fix: Containers mounting asynchronously being in wrong focus order

src/lib/components/Carousel/Carousel.svelte

@@ -45,7 +45,11 @@
 	</div>
 
 	<div class="relative">
-		<Container childrenRevealStrategy={scrollWithOffset('left', 64 + 16)} direction="horizontal">
+		<Container
+			childrenRevealStrategy={scrollWithOffset('left', 64 + 16)}
+			direction="horizontal"
+			navigationActions={{ left: () => true }}
+		>
 			<div
 				class={classNames(
 					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',

src/lib/components/Carousel/UICarousel.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 	import Container from '../../../Container.svelte';
 
-	let element: HTMLDivElement;
+	let element: Container;
 	let scrollX = 0;
 	let maxScrollX = 0;
 	let fadeLeft = false;
@@ -31,7 +31,7 @@
 		fadeLeft ? '' : 'black 0%, '
 	}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
 	on:scroll={updateScrollPosition}
-	bind:element
+	bind:this={element}
 >
 	<slot />
 </Container>