feat: ScrollerSection

components/src/DesignTokens/DesignTokens.svelte

@@ -61,6 +61,7 @@
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
 		--color-surfaceBorder: var(--surfaceBorder-light);
+		--color-dropShadow: var(--dropShadow-light);
 
 		&[data-theme='dark'] {
 			--color-logoFill: var(--logoFill-dark);
@@ -70,6 +71,7 @@
 			--color-textPrimary: var(--textPrimary-dark);
 			--color-textSecondary: var(--textSecondary-dark);
 			--color-textSecondaryHover: var(--textSecondaryHover-dark);
+			--color-dropShadow: var(--dropShadow-dark);
 		}
 
 		--swr-text: 'SWR-VAR-Text', sans-serif;

components/src/DesignTokens/Tokens.ts

@@ -182,12 +182,16 @@ const semantics: ColourMap = {
 		light: '#ffffff'
 	},
 	surfaceBorder: {
-		dark: 'hsl(0, 0%, 35%)',
-		light: shades.gray.base
+		dark: 'rgba(255,255,255,.15)',
+		light: shades.gray.light3
 	},
 	pageFill: {
 		dark: '#0C0C0C',
 		light: '#fff'
+	},
+	dropShadow: {
+		dark: 'rgba(0,0,0, 0.25)',
+		light: 'rgba(0,0,0, 0.0375)'
 	}
 };
 

components/src/ScrollerSection/ScrollerSection.stories.svelte

@@ -0,0 +1,56 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import ScrollerSection from './ScrollerSection.svelte';
+	import Scroller from '../Scroller/Scroller.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Display/ScrollerSection',
+		component: ScrollerSection,
+		parameters: {
+			viewMode: 'docs',
+			previewTabs: {
+				canvas: { hidden: true }
+			}
+		}
+	});
+
+	let index = $state(0);
+</script>
+
+<Story name="Default" asChild>
+	<DesignTokens theme="dark">
+		<div>
+			<Scroller bind:index>
+				{#snippet background()}
+					<p>
+						This is the background content. It will stay fixed in place while the foreground scrolls
+						over the top. Index: {index}
+					</p>
+				{/snippet}
+
+				{#snippet foreground()}
+					<ScrollerSection
+						>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo earum dolore nam debitis
+						velit aliquam quae, minima praesentium ratione et.
+					</ScrollerSection>
+					<ScrollerSection
+						>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo earum dolore nam debitis
+						velit aliquam quae, minima praesentium ratione et.
+					</ScrollerSection>
+					<ScrollerSection
+						>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo earum dolore nam debitis
+						velit aliquam quae, minima praesentium ratione et.
+					</ScrollerSection>
+				{/snippet}
+			</Scroller>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	p {
+		padding: 0.5rem;
+	}
+</style>

components/src/ScrollerSection/ScrollerSection.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	interface SlideContentProps {
+		height?: string;
+		children: Snippet;
+	}
+
+	let { height = '100vh', children }: SlideContentProps = $props();
+</script>
+
+<section class="container" style:height>
+	<div class="inner">
+		{@render children?.()}
+	</div>
+</section>
+
+<style lang="scss">
+	.container {
+		display: flex;
+		align-items: center;
+	}
+	.inner {
+		margin: 0 auto;
+		padding: 1em 1.5em;
+		color: var(--color-textPrimary);
+		max-width: 40em;
+		font-family: var(--swr-sans);
+		font-weight: 400;
+		line-height: 1.5;
+		letter-spacing: 0.01em;
+		font-size: var(--fs-small-1);
+		border-radius: 8px;
+		background: var(--color-surfaceFill);
+		box-shadow: 0 0 8px 1px var(--color-dropShadow);
+		border: 1px solid var(--color-surfaceBorder);
+		@media (min-width: 500px) {
+			padding: 1.25em;
+			margin: 1em auto;
+		}
+	}
+</style>

components/src/ScrollerSection/index.ts

@@ -0,0 +1,2 @@
+import ScrollerSection from './ScrollerSection.svelte';
+export default ScrollerSection;

components/src/index.js

@@ -12,6 +12,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';
+export { default as ScrollerSection } from './ScrollerSection/ScrollerSection.svelte';
 export { default as SwrHeader } from './SwrHeader/SwrHeader.svelte';
 
 // Chart