style: Styling improvements

src/lib/components/Carousel/Carousel.svelte

@@ -5,7 +5,6 @@
 	import Container from '../../../Container.svelte';
 	import { PLATFORM_TV } from '../../constants';
 
-	export let gradientFromColor = 'from-secondary-500';
 	export let hideControls = false;
 
 	let carousel: HTMLDivElement | undefined;
@@ -51,10 +50,11 @@
 		<Container direction="horizontal" let:focusIndex on:enter {...$$restProps} class="">
 			<div
 				class={classNames(
-					'flex overflow-x-scroll items-center overflow-y-hidden relative scrollbar-hide',
-					'[&>*]:p-4 -mx-4 w-full',
+					'flex overflow-x-auto items-center overflow-y-hidden relative scrollbar-hide',
+					'space-x-8 py-4 w-full',
 					scrollClass
 				)}
+				style="-webkit-mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);"
 				bind:this={carousel}
 				tabindex="-1"
 				on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
@@ -62,17 +62,5 @@
 				<slot {focusIndex} />
 			</div>
 		</Container>
-		{#if scrollX > 50}
-			<div
-				class={'absolute inset-y-0 left-0 w-0 sm:w-16 md:w-24 bg-gradient-to-r ' +
-					gradientFromColor}
-			/>
-		{/if}
-		{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
-			<div
-				class={'absolute inset-y-0 right-0 w-0 sm:w-16 md:w-24 bg-gradient-to-l ' +
-					gradientFromColor}
-			/>
-		{/if}
 	</div>
 </div>

src/lib/components/DebugElements.svelte

@@ -27,12 +27,12 @@
 
 	const handleKeydown = (event: KeyboardEvent) => {
 		if (event.repeat) return;
-		if (event.key === 'Shift') showOverlay = true;
+		if (event.key === 'Control') showOverlay = true;
 	};
 
 	const handleKeyup = (event: KeyboardEvent) => {
 		if (event.repeat) return;
-		if (event.key === 'Shift') showOverlay = false;
+		if (event.key === 'Control') showOverlay = false;
 	};
 
 	onMount(() => {

src/lib/selectable.ts

@@ -487,8 +487,9 @@ export class Selectable {
 			}
 		}
 
-		if (childToFocus) console.log("Focusing child that's being added", childToFocus);
-		childToFocus?.focus();
+		if (childToFocus?.parent && get(childToFocus.parent.hasFocusWithin)) childToFocus.focus();
+		// if (childToFocus) console.log("Focusing child that's being added", childToFocus);
+		// childToFocus?.focus();
 
 		Selectable._initializationStack = [];
 	}