From 7740f697962de89b133d18cad79f17918d57e541 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Tue, 7 Oct 2025 17:19:43 +0200
Subject: [PATCH 01/13] Initialize with code from
 https://github.com/martgnz/svelte-scroller/tree/position-sticky

---
 components/src/Scroller/Scroller.svelte | 212 ++++++++++++++++++++++++
 components/src/Scroller/index.ts        |   2 +
 2 files changed, 214 insertions(+)
 create mode 100644 components/src/Scroller/Scroller.svelte
 create mode 100644 components/src/Scroller/index.ts

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
new file mode 100644
index 00000000..ece43980
--- /dev/null
+++ b/components/src/Scroller/Scroller.svelte
@@ -0,0 +1,212 @@
+<script context="module">
+	const handlers = [];
+	let manager;
+
+	if (typeof window !== 'undefined') {
+		const run_all = () => handlers.forEach((fn) => fn());
+
+		window.addEventListener('scroll', run_all);
+		window.addEventListener('resize', run_all);
+	}
+
+	if (typeof IntersectionObserver !== 'undefined') {
+		const map = new Map();
+
+		const observer = new IntersectionObserver(
+			(entries, observer) => {
+				entries.forEach((entry) => {
+					const update = map.get(entry.target);
+					const index = handlers.indexOf(update);
+
+					if (entry.isIntersecting) {
+						if (index === -1) handlers.push(update);
+					} else {
+						update();
+						if (index !== -1) handlers.splice(index, 1);
+					}
+				});
+			},
+			{
+				rootMargin: '400px 0px' // TODO why 400?
+			}
+		);
+
+		manager = {
+			add: ({ outer, update }) => {
+				const { top, bottom } = outer.getBoundingClientRect();
+
+				if (top < window.innerHeight && bottom > 0) handlers.push(update);
+
+				map.set(outer, update);
+				observer.observe(outer);
+			},
+
+			remove: ({ outer, update }) => {
+				const index = handlers.indexOf(update);
+				if (index !== -1) handlers.splice(index, 1);
+
+				map.delete(outer);
+				observer.unobserve(outer);
+			}
+		};
+	} else {
+		manager = {
+			add: ({ update }) => {
+				handlers.push(update);
+			},
+
+			remove: ({ update }) => {
+				const index = handlers.indexOf(update);
+				if (index !== -1) handlers.splice(index, 1);
+			}
+		};
+	}
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	// config
+	export let top = 0;
+	export let bottom = 1;
+	export let threshold = 0.5;
+	export let query = 'section';
+	export let parallax = false;
+
+	// bindings
+	export let index = 0;
+	export let count = 0;
+	export let offset = 0;
+	export let progress = 0;
+	export let visible = false;
+
+	let outer;
+	let foreground;
+	let background;
+	let left;
+	let sections;
+	let wh = 0;
+	let offset_top = 0;
+	let width = 1;
+	let height;
+	let inverted;
+
+	$: top_px = Math.round(top * wh);
+	$: bottom_px = Math.round(bottom * wh);
+	$: threshold_px = Math.round(threshold * wh);
+
+	$: top, bottom, threshold, parallax, update();
+
+	$: style = `
+		top: ${offset_top || top_px}px;
+		z-index: ${inverted ? 3 : 1};
+	`;
+
+	onMount(() => {
+		sections = foreground.querySelectorAll(query);
+		count = sections.length;
+
+		update();
+
+		const scroller = { outer, update };
+
+		manager.add(scroller);
+		return () => manager.remove(scroller);
+	});
+
+	function update() {
+		if (!foreground) return;
+
+		// re-measure outer container
+		const bcr = outer.getBoundingClientRect();
+		left = bcr.left;
+		width = bcr.right - left;
+
+		// determine fix state
+		const fg = foreground.getBoundingClientRect();
+		const bg = background.getBoundingClientRect();
+
+		visible = fg.top < wh && fg.bottom > 0;
+
+		const foreground_height = fg.bottom - fg.top;
+		const background_height = bg.bottom - bg.top;
+
+		const available_space = bottom_px - top_px;
+		progress = (top_px - fg.top) / (foreground_height - available_space);
+
+		if (parallax) {
+			offset_top = Math.round(top_px - progress * (background_height - available_space));
+		}
+
+		for (let i = 0; i < sections.length; i++) {
+			const section = sections[i];
+			const { top } = section.getBoundingClientRect();
+
+			const next = sections[i + 1];
+			const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
+
+			offset = (threshold_px - top) / (bottom - top);
+			if (bottom >= threshold_px) {
+				index = i;
+				break;
+			}
+		}
+	}
+</script>
+
+<svelte:window bind:innerHeight={wh} />
+
+<svelte-scroller-outer bind:this={outer}>
+	<svelte-scroller-background-container class="background-container">
+		<svelte-scroller-background bind:this={background} {style}>
+			<slot name="background"></slot>
+		</svelte-scroller-background>
+	</svelte-scroller-background-container>
+
+	<svelte-scroller-foreground bind:this={foreground}>
+		<slot name="foreground"></slot>
+	</svelte-scroller-foreground>
+</svelte-scroller-outer>
+
+<style>
+	svelte-scroller-outer {
+		display: block;
+		position: relative;
+	}
+
+	svelte-scroller-background {
+		display: block;
+		position: sticky;
+		top: 0;
+		width: 100%;
+	}
+
+	svelte-scroller-foreground {
+		display: block;
+		position: relative;
+		z-index: 2;
+	}
+
+	svelte-scroller-foreground::after {
+		content: ' ';
+		display: block;
+		clear: both;
+	}
+
+	svelte-scroller-background-container {
+		display: block;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		pointer-events: none;
+		/* height: 100%; */
+
+		/* in theory this helps prevent jumping */
+		will-change: transform;
+		/* -webkit-transform: translate3d(0, 0, 0);
+		-moz-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0); */
+	}
+</style>
diff --git a/components/src/Scroller/index.ts b/components/src/Scroller/index.ts
new file mode 100644
index 00000000..7603e1f7
--- /dev/null
+++ b/components/src/Scroller/index.ts
@@ -0,0 +1,2 @@
+import Scroller from './Scroller.svelte';
+export default Scroller;

From 55eca3103cdbd4736b46d02c4408e69d42d2292a Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Tue, 7 Oct 2025 17:19:59 +0200
Subject: [PATCH 02/13] Add basic example

---
 .../src/Scroller/Scroller.stories.svelte      | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 components/src/Scroller/Scroller.stories.svelte

diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
new file mode 100644
index 00000000..327cb6d0
--- /dev/null
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -0,0 +1,67 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Scroller from './Scroller.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Scroller',
+		component: Scroller
+	});
+
+	let index = $state(0);
+	let offset = $state(0);
+	let progress = $state(0);
+</script>
+
+<Story name="Default" asChild>
+	<div style="height: 400px; overflow: scroll;">
+		Scroll down to see the scroller in action.
+		<Scroller top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
+			<div slot="background">
+				<p>
+					This is the background content. It will stay fixed in place while the foreground scrolls
+					over the top.
+				</p>
+				<p>
+					<strong>Section {index + 1}</strong> is currently active .
+				</p>
+
+				<div>
+					<code>index</code>
+					<progress min="0" max="4" value={index}>{index}</progress>
+					<code>{index}</code>
+				</div>
+
+				<div>
+					<code>offset</code>
+					<progress min="0" max="1" value={offset}>{offset}</progress>
+					<code>{offset}</code>
+				</div>
+
+				<div>
+					<code>progress</code>
+					<progress min="0" max="1" value={progress}>{progress}</progress>
+					<code>{progress}</code>
+				</div>
+			</div>
+			<div slot="foreground">
+				<section>This is the first section.</section>
+				<section>This is the second section.</section>
+				<section>This is the third section.</section>
+				<section>This is the fourth section.</section>
+				<section>This is the fifth section.</section>
+			</div>
+		</Scroller>
+	</div>
+</Story>
+
+<style>
+	section {
+		height: 80vh;
+		border: 1px solid #ccc;
+	}
+
+	p {
+		margin: 0 0 1em;
+	}
+</style>

From e03c8e6ddc334d8fd3d4d2b944fce0ebab5aeaad Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 13:18:12 +0200
Subject: [PATCH 03/13] Add explicit docs page (default canvas won't work with
 scroller)

---
 components/src/Scroller/Scroller.mdx | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 components/src/Scroller/Scroller.mdx

diff --git a/components/src/Scroller/Scroller.mdx b/components/src/Scroller/Scroller.mdx
new file mode 100644
index 00000000..1a67f485
--- /dev/null
+++ b/components/src/Scroller/Scroller.mdx
@@ -0,0 +1,9 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as ScrollerStories from './Scroller.stories.svelte';
+
+<Meta of={ScrollerStories} />
+
+# Scroller
+
+A scroller component for Svelte apps.

From 35b4b07f4c3951b2b7a4963f58dd980603895ec6 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 13:34:24 +0200
Subject: [PATCH 04/13] Refactor to match code style

---
 components/src/Scroller/Scroller.svelte | 237 ++++++++++++++----------
 1 file changed, 144 insertions(+), 93 deletions(-)

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index ece43980..7c52a8e8 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -1,28 +1,52 @@
-<script context="module">
-	const handlers = [];
-	let manager;
+<script context="module" lang="ts">
+	interface ScrollHandler {
+		(): void;
+	}
+
+	interface ScrollerInstance {
+		outer: HTMLElement;
+		update: ScrollHandler;
+	}
+
+	interface ScrollManager {
+		add(scroller: ScrollerInstance): void;
+		remove(scroller: ScrollerInstance): void;
+	}
+
+	const handlers: ScrollHandler[] = [];
+	let manager: ScrollManager;
 
+	// Global scroll and resize event handling
 	if (typeof window !== 'undefined') {
-		const run_all = () => handlers.forEach((fn) => fn());
+		const runAllHandlers = (): void => {
+			handlers.forEach((handler) => handler());
+		};
 
-		window.addEventListener('scroll', run_all);
-		window.addEventListener('resize', run_all);
+		window.addEventListener('scroll', runAllHandlers);
+		window.addEventListener('resize', runAllHandlers);
 	}
 
+	// Intersection Observer for performance optimization
 	if (typeof IntersectionObserver !== 'undefined') {
-		const map = new Map();
+		const handlerMap = new Map<Element, ScrollHandler>();
 
 		const observer = new IntersectionObserver(
-			(entries, observer) => {
+			(entries) => {
 				entries.forEach((entry) => {
-					const update = map.get(entry.target);
-					const index = handlers.indexOf(update);
+					const update = handlerMap.get(entry.target);
+					if (!update) return;
+
+					const handlerIndex = handlers.indexOf(update);
 
 					if (entry.isIntersecting) {
-						if (index === -1) handlers.push(update);
+						if (handlerIndex === -1) {
+							handlers.push(update);
+						}
 					} else {
 						update();
-						if (index !== -1) handlers.splice(index, 1);
+						if (handlerIndex !== -1) {
+							handlers.splice(handlerIndex, 1);
+						}
 					}
 				});
 			},
@@ -32,121 +56,154 @@
 		);
 
 		manager = {
-			add: ({ outer, update }) => {
+			add: ({ outer, update }: ScrollerInstance): void => {
 				const { top, bottom } = outer.getBoundingClientRect();
 
-				if (top < window.innerHeight && bottom > 0) handlers.push(update);
+				// Add handler if element is initially visible
+				if (top < window.innerHeight && bottom > 0) {
+					handlers.push(update);
+				}
 
-				map.set(outer, update);
+				handlerMap.set(outer, update);
 				observer.observe(outer);
 			},
 
-			remove: ({ outer, update }) => {
-				const index = handlers.indexOf(update);
-				if (index !== -1) handlers.splice(index, 1);
+			remove: ({ outer, update }: ScrollerInstance): void => {
+				const handlerIndex = handlers.indexOf(update);
+				if (handlerIndex !== -1) {
+					handlers.splice(handlerIndex, 1);
+				}
 
-				map.delete(outer);
+				handlerMap.delete(outer);
 				observer.unobserve(outer);
 			}
 		};
 	} else {
+		// Fallback for browsers without IntersectionObserver
 		manager = {
-			add: ({ update }) => {
+			add: ({ update }: ScrollerInstance): void => {
 				handlers.push(update);
 			},
 
-			remove: ({ update }) => {
-				const index = handlers.indexOf(update);
-				if (index !== -1) handlers.splice(index, 1);
+			remove: ({ update }: ScrollerInstance): void => {
+				const handlerIndex = handlers.indexOf(update);
+				if (handlerIndex !== -1) {
+					handlers.splice(handlerIndex, 1);
+				}
 			}
 		};
 	}
 </script>
 
-<script>
+<script lang="ts">
 	import { onMount } from 'svelte';
 
-	// config
-	export let top = 0;
-	export let bottom = 1;
-	export let threshold = 0.5;
-	export let query = 'section';
-	export let parallax = false;
-
-	// bindings
-	export let index = 0;
-	export let count = 0;
-	export let offset = 0;
-	export let progress = 0;
-	export let visible = false;
-
-	let outer;
-	let foreground;
-	let background;
-	let left;
-	let sections;
-	let wh = 0;
-	let offset_top = 0;
-	let width = 1;
-	let height;
-	let inverted;
-
-	$: top_px = Math.round(top * wh);
-	$: bottom_px = Math.round(bottom * wh);
-	$: threshold_px = Math.round(threshold * wh);
-
-	$: top, bottom, threshold, parallax, update();
-
-	$: style = `
-		top: ${offset_top || top_px}px;
-		z-index: ${inverted ? 3 : 1};
-	`;
+	// Configuration props
+	export let top: number = 0;
+	export let bottom: number = 1;
+	export let threshold: number = 0.5;
+	export let query: string = 'section';
+	export let parallax: boolean = false;
+
+	// Binding props
+	export let index: number = 0;
+	export let count: number = 0;
+	export let offset: number = 0;
+	export let progress: number = 0;
+	export let visible: boolean = false;
+
+	// Element bindings
+	let outer: HTMLElement;
+	let foreground: HTMLElement;
+	let background: HTMLElement;
+
+	// Internal state
+	let sections: NodeListOf<Element>;
+	let windowHeight: number = 0;
+	let offsetTop: number = 0;
+	let containerWidth: number = 1;
+	let containerLeft: number = 0;
+
+	// Computed values
+	$: topPx = Math.round(top * windowHeight);
+	$: bottomPx = Math.round(bottom * windowHeight);
+	$: thresholdPx = Math.round(threshold * windowHeight);
+
+	// Reactive updates
+	$: if (top || bottom || threshold || parallax) {
+		update();
+	}
+
+	$: backgroundStyle = `
+        top: ${offsetTop || topPx}px;
+        z-index: ${progress > 1 ? 3 : 1};
+    `;
 
 	onMount(() => {
+		if (!foreground) return;
+
 		sections = foreground.querySelectorAll(query);
 		count = sections.length;
 
 		update();
 
-		const scroller = { outer, update };
+		const scrollerInstance: ScrollerInstance = { outer, update };
+		manager.add(scrollerInstance);
 
-		manager.add(scroller);
-		return () => manager.remove(scroller);
+		return () => {
+			manager.remove(scrollerInstance);
+		};
 	});
 
-	function update() {
-		if (!foreground) return;
+	function update(): void {
+		if (!foreground || !background || !outer) return;
 
-		// re-measure outer container
-		const bcr = outer.getBoundingClientRect();
-		left = bcr.left;
-		width = bcr.right - left;
+		updateContainerMeasurements();
+		updateScrollProgress();
+		updateActiveSection();
+	}
+
+	function updateContainerMeasurements(): void {
+		const outerRect = outer.getBoundingClientRect();
+		containerLeft = outerRect.left;
+		containerWidth = outerRect.right - outerRect.left;
+	}
 
-		// determine fix state
-		const fg = foreground.getBoundingClientRect();
-		const bg = background.getBoundingClientRect();
+	function updateScrollProgress(): void {
+		const foregroundRect = foreground.getBoundingClientRect();
+		const backgroundRect = background.getBoundingClientRect();
 
-		visible = fg.top < wh && fg.bottom > 0;
+		visible = foregroundRect.top < windowHeight && foregroundRect.bottom > 0;
 
-		const foreground_height = fg.bottom - fg.top;
-		const background_height = bg.bottom - bg.top;
+		const foregroundHeight = foregroundRect.bottom - foregroundRect.top;
+		const backgroundHeight = backgroundRect.bottom - backgroundRect.top;
+		const availableSpace = bottomPx - topPx;
 
-		const available_space = bottom_px - top_px;
-		progress = (top_px - fg.top) / (foreground_height - available_space);
+		progress = (topPx - foregroundRect.top) / (foregroundHeight - availableSpace);
 
 		if (parallax) {
-			offset_top = Math.round(top_px - progress * (background_height - available_space));
+			offsetTop = Math.round(topPx - progress * (backgroundHeight - availableSpace));
 		}
+	}
+
+	function updateActiveSection(): void {
+		if (!sections.length) return;
+
+		const foregroundRect = foreground.getBoundingClientRect();
 
 		for (let i = 0; i < sections.length; i++) {
 			const section = sections[i];
-			const { top } = section.getBoundingClientRect();
+			const sectionRect = section.getBoundingClientRect();
+			const sectionTop = sectionRect.top;
 
-			const next = sections[i + 1];
-			const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
+			const nextSection = sections[i + 1];
+			const sectionBottom = nextSection
+				? nextSection.getBoundingClientRect().top
+				: foregroundRect.bottom;
 
-			offset = (threshold_px - top) / (bottom - top);
-			if (bottom >= threshold_px) {
+			offset = (thresholdPx - sectionTop) / (sectionBottom - sectionTop);
+
+			if (sectionBottom >= thresholdPx) {
 				index = i;
 				break;
 			}
@@ -154,17 +211,17 @@
 	}
 </script>
 
-<svelte:window bind:innerHeight={wh} />
+<svelte:window bind:innerHeight={windowHeight} />
 
 <svelte-scroller-outer bind:this={outer}>
 	<svelte-scroller-background-container class="background-container">
-		<svelte-scroller-background bind:this={background} {style}>
-			<slot name="background"></slot>
+		<svelte-scroller-background bind:this={background} style={backgroundStyle}>
+			<slot name="background" {index} {count} {offset} {progress} {visible} />
 		</svelte-scroller-background>
 	</svelte-scroller-background-container>
 
 	<svelte-scroller-foreground bind:this={foreground}>
-		<slot name="foreground"></slot>
+		<slot name="foreground" {index} {count} {offset} {progress} {visible} />
 	</svelte-scroller-foreground>
 </svelte-scroller-outer>
 
@@ -188,7 +245,7 @@
 	}
 
 	svelte-scroller-foreground::after {
-		content: ' ';
+		content: '';
 		display: block;
 		clear: both;
 	}
@@ -201,12 +258,6 @@
 		height: 100%;
 		max-width: 100%;
 		pointer-events: none;
-		/* height: 100%; */
-
-		/* in theory this helps prevent jumping */
 		will-change: transform;
-		/* -webkit-transform: translate3d(0, 0, 0);
-		-moz-transform: translate3d(0, 0, 0);
-		transform: translate3d(0, 0, 0); */
 	}
 </style>

From 0592aac71a5bd1da1af4a1403362f80e09834129 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 13:35:33 +0200
Subject: [PATCH 05/13] Use passive handlers (potentially smoother scrolling)

---
 components/src/Scroller/Scroller.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 7c52a8e8..42088711 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -22,8 +22,8 @@
 			handlers.forEach((handler) => handler());
 		};
 
-		window.addEventListener('scroll', runAllHandlers);
-		window.addEventListener('resize', runAllHandlers);
+		window.addEventListener('scroll', runAllHandlers, { passive: true });
+		window.addEventListener('resize', runAllHandlers, { passive: true });
 	}
 
 	// Intersection Observer for performance optimization

From 06766889f162a4a14310192a69ecf7eea7d1a84f Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 13:48:48 +0200
Subject: [PATCH 06/13] Use Svelte 5 (runes)

---
 components/src/Scroller/Scroller.svelte | 80 +++++++++++++++----------
 1 file changed, 47 insertions(+), 33 deletions(-)

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 42088711..068596af 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	interface ScrollHandler {
 		(): void;
 	}
@@ -98,46 +98,60 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	// Configuration props
-	export let top: number = 0;
-	export let bottom: number = 1;
-	export let threshold: number = 0.5;
-	export let query: string = 'section';
-	export let parallax: boolean = false;
-
-	// Binding props
-	export let index: number = 0;
-	export let count: number = 0;
-	export let offset: number = 0;
-	export let progress: number = 0;
-	export let visible: boolean = false;
+	// Configuration props (read-only)
+	let {
+		top = 0,
+		bottom = 1,
+		threshold = 0.5,
+		query = 'section',
+		parallax = false,
+		// Binding props (two-way binding)
+		index = $bindable(0),
+		count = $bindable(0),
+		offset = $bindable(0),
+		progress = $bindable(0),
+		visible = $bindable(false)
+	}: {
+		top?: number;
+		bottom?: number;
+		threshold?: number;
+		query?: string;
+		parallax?: boolean;
+		index?: number;
+		count?: number;
+		offset?: number;
+		progress?: number;
+		visible?: boolean;
+	} = $props();
 
 	// Element bindings
-	let outer: HTMLElement;
-	let foreground: HTMLElement;
-	let background: HTMLElement;
+	let outer = $state<HTMLElement>();
+	let foreground = $state<HTMLElement>();
+	let background = $state<HTMLElement>();
 
 	// Internal state
-	let sections: NodeListOf<Element>;
-	let windowHeight: number = 0;
-	let offsetTop: number = 0;
-	let containerWidth: number = 1;
-	let containerLeft: number = 0;
+	let sections = $state<NodeListOf<Element>>();
+	let windowHeight = $state(0);
+	let offsetTop = $state(0);
+	let containerWidth = $state(1);
+	let containerLeft = $state(0);
 
 	// Computed values
-	$: topPx = Math.round(top * windowHeight);
-	$: bottomPx = Math.round(bottom * windowHeight);
-	$: thresholdPx = Math.round(threshold * windowHeight);
+	let topPx = $derived(Math.round(top * windowHeight));
+	let bottomPx = $derived(Math.round(bottom * windowHeight));
+	let thresholdPx = $derived(Math.round(threshold * windowHeight));
 
-	// Reactive updates
-	$: if (top || bottom || threshold || parallax) {
-		update();
-	}
+	let backgroundStyle = $derived(`
+		top: ${offsetTop || topPx}px;
+		z-index: ${progress > 1 ? 3 : 1};
+	`);
 
-	$: backgroundStyle = `
-        top: ${offsetTop || topPx}px;
-        z-index: ${progress > 1 ? 3 : 1};
-    `;
+	// Reactive updates
+	$effect(() => {
+		if (top || bottom || threshold || parallax) {
+			update();
+		}
+	});
 
 	onMount(() => {
 		if (!foreground) return;

From 1ade2519dbccde08f2d1caacc697443ba550f46c Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 14:08:49 +0200
Subject: [PATCH 07/13] Improve docs

---
 components/src/Scroller/Scroller.mdx          |  8 +-
 .../src/Scroller/Scroller.stories.svelte      | 46 +++++-----
 components/src/Scroller/Scroller.svelte       | 83 ++++++++++++++++---
 3 files changed, 98 insertions(+), 39 deletions(-)

diff --git a/components/src/Scroller/Scroller.mdx b/components/src/Scroller/Scroller.mdx
index 1a67f485..876488d4 100644
--- a/components/src/Scroller/Scroller.mdx
+++ b/components/src/Scroller/Scroller.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Controls, Meta } from '@storybook/addon-docs/blocks';
 
 import * as ScrollerStories from './Scroller.stories.svelte';
 
@@ -6,4 +6,8 @@ import * as ScrollerStories from './Scroller.stories.svelte';
 
 # Scroller
 
-A scroller component for Svelte apps.
+A scroller component for Svelte apps, based on svelte-scroller by Rich Harris (license) but using a different approach to positioning (`position: sticky`).
+
+## Properties
+
+<Controls of={ScrollerStories.Default} />
diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
index 327cb6d0..a1dde65e 100644
--- a/components/src/Scroller/Scroller.stories.svelte
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -4,8 +4,14 @@
 	import Scroller from './Scroller.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Scroller',
-		component: Scroller
+		title: 'Display/Scroller',
+		component: Scroller,
+		parameters: {
+			viewMode: 'docs',
+			previewTabs: {
+				canvas: { hidden: true }
+			}
+		}
 	});
 
 	let index = $state(0);
@@ -14,8 +20,10 @@
 </script>
 
 <Story name="Default" asChild>
-	<div style="height: 400px; overflow: scroll;">
-		Scroll down to see the scroller in action.
+	<div>
+		<h1>Scroller-Demo</h1>
+		<p>(Scroll down to see the scroller in action)</p>
+
 		<Scroller top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
 			<div slot="background">
 				<p>
@@ -23,26 +31,12 @@
 					over the top.
 				</p>
 				<p>
-					<strong>Section {index + 1}</strong> is currently active .
+					<strong>Section {index + 1}</strong> is currently active.
 				</p>
 
-				<div>
-					<code>index</code>
-					<progress min="0" max="4" value={index}>{index}</progress>
-					<code>{index}</code>
-				</div>
-
-				<div>
-					<code>offset</code>
-					<progress min="0" max="1" value={offset}>{offset}</progress>
-					<code>{offset}</code>
-				</div>
-
-				<div>
-					<code>progress</code>
-					<progress min="0" max="1" value={progress}>{progress}</progress>
-					<code>{progress}</code>
-				</div>
+				<p><code>index</code> / {index}</p>
+				<p><code>offset</code> / {offset}</p>
+				<p><code>progress</code> / {progress}</p>
 			</div>
 			<div slot="foreground">
 				<section>This is the first section.</section>
@@ -57,11 +51,13 @@
 
 <style>
 	section {
-		height: 80vh;
-		border: 1px solid #ccc;
+		height: 25vh;
+		background: #cccc;
+		padding: 0.5rem;
+		margin-bottom: 50vh;
 	}
 
 	p {
-		margin: 0 0 1em;
+		padding: 0.5rem;
 	}
 </style>
diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 068596af..bead0b37 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -98,6 +98,76 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
+	/**
+	 * Props interface for the Scroller component
+	 */
+	interface ScrollerProps {
+		/**
+		 * The vertical position that the top of the foreground must scroll past before the background becomes fixed,
+		 * as a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
+		 * @default 0
+		 */
+		top?: number;
+
+		/**
+		 * The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed.
+		 * As a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
+		 * @default 1
+		 */
+		bottom?: number;
+
+		/**
+		 * Once a section crosses this point, it becomes 'active'.
+		 * As a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
+		 * @default 0.5
+		 */
+		threshold?: number;
+
+		/**
+		 * A CSS selector that describes the individual sections of your foreground
+		 * @default 'section'
+		 */
+		query?: string;
+
+		/**
+		 * If true, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground.
+		 * This effect can be unpleasant for people with high motion sensitivity, so use it advisedly.
+		 * @default false
+		 */
+		parallax?: boolean;
+
+		/**
+		 * The index of the currently active section (bindable)
+		 * @default 0
+		 */
+		index?: number;
+
+		/**
+		 * The total number of sections (bindable)
+		 * @default 0
+		 */
+		count?: number;
+
+		/**
+		 * How far the section has scrolled past the threshold, as a value between 0 and 1 (bindable)
+		 * @default 0
+		 */
+		offset?: number;
+
+		/**
+		 * How far the foreground has travelled, where 0 is the top of the foreground crossing top,
+		 * and 1 is the bottom crossing bottom (bindable)
+		 * @default 0
+		 */
+		progress?: number;
+
+		/**
+		 * Whether the scroller is currently visible in the viewport (bindable)
+		 * @default false
+		 */
+		visible?: boolean;
+	}
+
 	// Configuration props (read-only)
 	let {
 		top = 0,
@@ -111,18 +181,7 @@
 		offset = $bindable(0),
 		progress = $bindable(0),
 		visible = $bindable(false)
-	}: {
-		top?: number;
-		bottom?: number;
-		threshold?: number;
-		query?: string;
-		parallax?: boolean;
-		index?: number;
-		count?: number;
-		offset?: number;
-		progress?: number;
-		visible?: boolean;
-	} = $props();
+	}: ScrollerProps = $props();
 
 	// Element bindings
 	let outer = $state<HTMLElement>();

From c0cf9c9d47220bde49aeaf02e40c6396b840a7f0 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 14:14:04 +0200
Subject: [PATCH 08/13] Add original software license

---
 components/src/Scroller/Scroller.mdx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/src/Scroller/Scroller.mdx b/components/src/Scroller/Scroller.mdx
index 876488d4..5d764a22 100644
--- a/components/src/Scroller/Scroller.mdx
+++ b/components/src/Scroller/Scroller.mdx
@@ -6,8 +6,20 @@ import * as ScrollerStories from './Scroller.stories.svelte';
 
 # Scroller
 
-A scroller component for Svelte apps, based on svelte-scroller by Rich Harris (license) but using a different approach to positioning (`position: sticky`).
+A scroller component for Svelte apps, based on svelte-scroller by Rich Harris ([license](#original-license)) but using a different approach to positioning (`position: sticky`).
 
 ## Properties
 
 <Controls of={ScrollerStories.Default} />
+
+## Original license
+
+Copyright (c) 2018 Rich Harris
+
+Permission is hereby granted by the authors of this software, to any person, to use the software for any purpose, free of charge, including the rights to run, read, copy, change, distribute and sell it, and including usage rights to any patents the authors may hold on it, subject to the following conditions:
+
+This license, or a link to its text, must be included with all copies of the software and any derivative works.
+
+Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license.
+
+The software is provided "as is", without warranty of any kind, including but not limited to the warranties of title, fitness, merchantability and non-infringement. The authors have no obligation to provide support or updates for the software, and may not be held liable for any damages, claims or other liability arising from its use.

From 293e77a609054d93f5cc4d1e5622bd297be6dec4 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 16:34:36 +0200
Subject: [PATCH 09/13] Fix runtime error: Only update active section if
 sections are present

---
 components/src/Scroller/Scroller.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index bead0b37..256c9295 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -260,7 +260,7 @@
 	}
 
 	function updateActiveSection(): void {
-		if (!sections.length) return;
+		if (!sections?.length) return;
 
 		const foregroundRect = foreground.getBoundingClientRect();
 

From 6b8937ed5cb5d616a7b64dcc7550e867561a4958 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Wed, 8 Oct 2025 17:22:27 +0200
Subject: [PATCH 10/13] Add tests

---
 .../src/Scroller/Scroller.stories.svelte      | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
index a1dde65e..ae057e85 100644
--- a/components/src/Scroller/Scroller.stories.svelte
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -1,5 +1,6 @@
-<script context="module">
+<script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
 
 	import Scroller from './Scroller.svelte';
 
@@ -19,11 +20,47 @@
 	let progress = $state(0);
 </script>
 
-<Story name="Default" asChild>
-	<div>
-		<h1>Scroller-Demo</h1>
-		<p>(Scroll down to see the scroller in action)</p>
+<Story
+	name="Default"
+	asChild
+	play={async ({ step, canvasElement }) => {
+		await step('Verify state values are set', async () => {
+			expect(index).toBeGreaterThanOrEqual(0);
+			expect(offset).toBeGreaterThanOrEqual(0);
+			expect(progress).toBeGreaterThanOrEqual(0);
+		});
+
+		await step('Foreground content is rendered', async () => {
+			const sections = canvasElement.querySelectorAll('[slot="foreground"] section');
+			expect(sections).toHaveLength(5);
+			expect(sections[0]).toHaveTextContent('This is the first section.');
+		});
+
+		await step('Background content is rendered', async () => {
+			const background = canvasElement.querySelector('[slot="background"]');
+			expect(background).toBeDefined();
+			expect(background).toHaveTextContent('This is the background content');
+		});
 
+		await step('Index is updated when scrolling', async () => {
+			// Store the event handler function separately
+			const scrollEndHandler = () => {
+				expect(index).toBe(3);
+				// Clean up the event listener after test has run
+				window.removeEventListener('scrollend', scrollEndHandler);
+				// Reset scroll position to top after test
+				window.scrollTo(0, 0);
+			};
+
+			// Add the event listener with the stored function reference
+			window.addEventListener('scrollend', scrollEndHandler);
+
+			const sections = canvasElement.querySelectorAll('[slot="foreground"] section');
+			sections[3].scrollIntoView();
+		});
+	}}
+>
+	<div>
 		<Scroller top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
 			<div slot="background">
 				<p>

From 212ecc161514fdf4d209929ff0d1fee8197da542 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 9 Oct 2025 11:03:42 +0200
Subject: [PATCH 11/13] Use `#snippets`/`@render` instead of (deprecated)
 `slot`

---
 .../src/Scroller/Scroller.stories.svelte      | 15 +++---
 components/src/Scroller/Scroller.svelte       | 52 ++++++++++---------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/components/src/Scroller/Scroller.stories.svelte b/components/src/Scroller/Scroller.stories.svelte
index ae057e85..7015ad72 100644
--- a/components/src/Scroller/Scroller.stories.svelte
+++ b/components/src/Scroller/Scroller.stories.svelte
@@ -31,13 +31,13 @@
 		});
 
 		await step('Foreground content is rendered', async () => {
-			const sections = canvasElement.querySelectorAll('[slot="foreground"] section');
+			const sections = canvasElement.querySelectorAll('svelte-scroller-foreground section');
 			expect(sections).toHaveLength(5);
 			expect(sections[0]).toHaveTextContent('This is the first section.');
 		});
 
 		await step('Background content is rendered', async () => {
-			const background = canvasElement.querySelector('[slot="background"]');
+			const background = canvasElement.querySelector('svelte-scroller-background');
 			expect(background).toBeDefined();
 			expect(background).toHaveTextContent('This is the background content');
 		});
@@ -55,14 +55,14 @@
 			// Add the event listener with the stored function reference
 			window.addEventListener('scrollend', scrollEndHandler);
 
-			const sections = canvasElement.querySelectorAll('[slot="foreground"] section');
+			const sections = canvasElement.querySelectorAll('svelte-scroller-foreground section');
 			sections[3].scrollIntoView();
 		});
 	}}
 >
 	<div>
 		<Scroller top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
-			<div slot="background">
+			{#snippet background()}
 				<p>
 					This is the background content. It will stay fixed in place while the foreground scrolls
 					over the top.
@@ -74,14 +74,15 @@
 				<p><code>index</code> / {index}</p>
 				<p><code>offset</code> / {offset}</p>
 				<p><code>progress</code> / {progress}</p>
-			</div>
-			<div slot="foreground">
+			{/snippet}
+
+			{#snippet foreground()}
 				<section>This is the first section.</section>
 				<section>This is the second section.</section>
 				<section>This is the third section.</section>
 				<section>This is the fourth section.</section>
 				<section>This is the fifth section.</section>
-			</div>
+			{/snippet}
 		</Scroller>
 	</div>
 </Story>
diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 256c9295..55bdb7d4 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -4,7 +4,7 @@
 	}
 
 	interface ScrollerInstance {
-		outer: HTMLElement;
+		outerWrapper: HTMLElement;
 		update: ScrollHandler;
 	}
 
@@ -56,26 +56,26 @@
 		);
 
 		manager = {
-			add: ({ outer, update }: ScrollerInstance): void => {
-				const { top, bottom } = outer.getBoundingClientRect();
+			add: ({ outerWrapper, update }: ScrollerInstance): void => {
+				const { top, bottom } = outerWrapper.getBoundingClientRect();
 
 				// Add handler if element is initially visible
 				if (top < window.innerHeight && bottom > 0) {
 					handlers.push(update);
 				}
 
-				handlerMap.set(outer, update);
-				observer.observe(outer);
+				handlerMap.set(outerWrapper, update);
+				observer.observe(outerWrapper);
 			},
 
-			remove: ({ outer, update }: ScrollerInstance): void => {
+			remove: ({ outerWrapper, update }: ScrollerInstance): void => {
 				const handlerIndex = handlers.indexOf(update);
 				if (handlerIndex !== -1) {
 					handlers.splice(handlerIndex, 1);
 				}
 
-				handlerMap.delete(outer);
-				observer.unobserve(outer);
+				handlerMap.delete(outerWrapper);
+				observer.unobserve(outerWrapper);
 			}
 		};
 	} else {
@@ -180,13 +180,15 @@
 		count = $bindable(0),
 		offset = $bindable(0),
 		progress = $bindable(0),
-		visible = $bindable(false)
+		visible = $bindable(false),
+		foreground = null,
+		background = null
 	}: ScrollerProps = $props();
 
 	// Element bindings
-	let outer = $state<HTMLElement>();
-	let foreground = $state<HTMLElement>();
-	let background = $state<HTMLElement>();
+	let outerWrapper = $state<HTMLElement>();
+	let foregroundWrapper = $state<HTMLElement>();
+	let backgroundWrapper = $state<HTMLElement>();
 
 	// Internal state
 	let sections = $state<NodeListOf<Element>>();
@@ -213,14 +215,14 @@
 	});
 
 	onMount(() => {
-		if (!foreground) return;
+		if (!foregroundWrapper) return;
 
-		sections = foreground.querySelectorAll(query);
+		sections = foregroundWrapper.querySelectorAll(query);
 		count = sections.length;
 
 		update();
 
-		const scrollerInstance: ScrollerInstance = { outer, update };
+		const scrollerInstance: ScrollerInstance = { outerWrapper, update };
 		manager.add(scrollerInstance);
 
 		return () => {
@@ -229,7 +231,7 @@
 	});
 
 	function update(): void {
-		if (!foreground || !background || !outer) return;
+		if (!foregroundWrapper || !backgroundWrapper || !outerWrapper) return;
 
 		updateContainerMeasurements();
 		updateScrollProgress();
@@ -237,14 +239,14 @@
 	}
 
 	function updateContainerMeasurements(): void {
-		const outerRect = outer.getBoundingClientRect();
+		const outerRect = outerWrapper.getBoundingClientRect();
 		containerLeft = outerRect.left;
 		containerWidth = outerRect.right - outerRect.left;
 	}
 
 	function updateScrollProgress(): void {
-		const foregroundRect = foreground.getBoundingClientRect();
-		const backgroundRect = background.getBoundingClientRect();
+		const foregroundRect = foregroundWrapper.getBoundingClientRect();
+		const backgroundRect = backgroundWrapper.getBoundingClientRect();
 
 		visible = foregroundRect.top < windowHeight && foregroundRect.bottom > 0;
 
@@ -262,7 +264,7 @@
 	function updateActiveSection(): void {
 		if (!sections?.length) return;
 
-		const foregroundRect = foreground.getBoundingClientRect();
+		const foregroundRect = foregroundWrapper.getBoundingClientRect();
 
 		for (let i = 0; i < sections.length; i++) {
 			const section = sections[i];
@@ -286,15 +288,15 @@
 
 <svelte:window bind:innerHeight={windowHeight} />
 
-<svelte-scroller-outer bind:this={outer}>
+<svelte-scroller-outer bind:this={outerWrapper}>
 	<svelte-scroller-background-container class="background-container">
-		<svelte-scroller-background bind:this={background} style={backgroundStyle}>
-			<slot name="background" {index} {count} {offset} {progress} {visible} />
+		<svelte-scroller-background bind:this={backgroundWrapper} style={backgroundStyle}>
+			{@render background()}
 		</svelte-scroller-background>
 	</svelte-scroller-background-container>
 
-	<svelte-scroller-foreground bind:this={foreground}>
-		<slot name="foreground" {index} {count} {offset} {progress} {visible} />
+	<svelte-scroller-foreground bind:this={foregroundWrapper}>
+		{@render foreground()}
 	</svelte-scroller-foreground>
 </svelte-scroller-outer>
 

From 27103fe5fefdac6d372e28d6769662fbfdbe0881 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 9 Oct 2025 11:22:44 +0200
Subject: [PATCH 12/13] Update docs

---
 components/src/Scroller/Scroller.svelte | 29 +++++++++++++------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/src/Scroller/Scroller.svelte b/components/src/Scroller/Scroller.svelte
index 55bdb7d4..f6ed8daa 100644
--- a/components/src/Scroller/Scroller.svelte
+++ b/components/src/Scroller/Scroller.svelte
@@ -102,87 +102,88 @@
 	 * Props interface for the Scroller component
 	 */
 	interface ScrollerProps {
+		/**
+		 * The content to show in the foreground, to be set via `{#snippet foreground()}`. This should contain multiple sections, each matching the `query` selector.
+		 */
+		foreground?: Snippet;
+
+		/**
+		 * The content to show in the background, to be set via `{#snippet background()}`. This will be fixed in place while the foreground scrolls over it.
+		 */
+		background?: Snippet;
+
 		/**
 		 * The vertical position that the top of the foreground must scroll past before the background becomes fixed,
 		 * as a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
-		 * @default 0
 		 */
 		top?: number;
 
 		/**
 		 * The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed.
 		 * As a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
-		 * @default 1
 		 */
 		bottom?: number;
 
 		/**
 		 * Once a section crosses this point, it becomes 'active'.
 		 * As a proportion of window height (0 = top of viewport, 1 = bottom of viewport)
-		 * @default 0.5
 		 */
 		threshold?: number;
 
 		/**
 		 * A CSS selector that describes the individual sections of your foreground
-		 * @default 'section'
 		 */
 		query?: string;
 
 		/**
 		 * If true, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground.
 		 * This effect can be unpleasant for people with high motion sensitivity, so use it advisedly.
-		 * @default false
 		 */
 		parallax?: boolean;
 
 		/**
 		 * The index of the currently active section (bindable)
-		 * @default 0
 		 */
 		index?: number;
 
 		/**
 		 * The total number of sections (bindable)
-		 * @default 0
 		 */
 		count?: number;
 
 		/**
 		 * How far the section has scrolled past the threshold, as a value between 0 and 1 (bindable)
-		 * @default 0
 		 */
 		offset?: number;
 
 		/**
 		 * How far the foreground has travelled, where 0 is the top of the foreground crossing top,
 		 * and 1 is the bottom crossing bottom (bindable)
-		 * @default 0
 		 */
 		progress?: number;
 
 		/**
 		 * Whether the scroller is currently visible in the viewport (bindable)
-		 * @default false
 		 */
 		visible?: boolean;
 	}
 
-	// Configuration props (read-only)
 	let {
+		// Configuration props (read-only)
+		foreground = null,
+		background = null,
 		top = 0,
 		bottom = 1,
 		threshold = 0.5,
 		query = 'section',
 		parallax = false,
+
 		// Binding props (two-way binding)
 		index = $bindable(0),
 		count = $bindable(0),
 		offset = $bindable(0),
 		progress = $bindable(0),
-		visible = $bindable(false),
-		foreground = null,
-		background = null
+		visible = $bindable(false)
 	}: ScrollerProps = $props();
 
 	// Element bindings

From 7676813760e31b3dd545f0c5e741e849559526fb Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Thu, 9 Oct 2025 14:40:42 +0200
Subject: [PATCH 13/13] Add component export

---
 components/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/src/index.js b/components/src/index.js
index 347844e9..b93bed42 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -11,6 +11,7 @@ export { default as Note } from './Note/Note.svelte';
 
 // Display
 export { default as Card } from './Card/Card.svelte';
+export { default as Scroller } from './Scroller/Scroller.svelte';
 
 // Chart
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';