Navigation progress

src/lib/components/Carousel/Carousel.svelte

@@ -3,6 +3,7 @@
 	import IconButton from '../IconButton.svelte';
 	import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
 	import classNames from 'classnames';
+	import type { Registerer } from '../../actions/focusAction';
 
 	export let gradientFromColor = 'from-stone-950';
 	export let heading = '';

src/lib/components/Carousel/CarouselPlaceholderItems.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import CardPlaceholder from '../Card/CardPlaceholder.svelte';
+	import { Container } from '../../actions/focusAction';
 	export let size: 'dynamic' | 'md' | 'lg' = 'md';
 	export let orientation: 'landscape' | 'portrait' = 'landscape';
+
+	export let container: Container;
+	let registerer = container.getRegisterer();
 </script>
 
 {#each Array(10) as _, i (i)}
-	<CardPlaceholder {size} index={i} {orientation} />
+	<div tabindex="0" use:registerer>
+		<CardPlaceholder {size} index={i} {orientation} />
+	</div>
 {/each}