@reuters-graphics/graphics-components 3.0.3 → 3.0.5

package/dist/components/Article/Article.mdx

@@ -105,7 +105,7 @@ If you're not using our `Block` component, you can still inherit the column widt
     }
     &.fluid {
       width: calc(100% + 30px);
-      margin-left: -15px;
+      margin-inline-start: -15px;
       max-width: none;
     }
   }

package/dist/components/Article/Article.stories.svelte

@@ -66,13 +66,13 @@
 
 :global(#article-story-basic, #article-column-widths-demo) {
   width: calc(100% + 30px);
-  margin-left: -15px;
+  margin-inline-start: -15px;
 }
 
 :global(#article-column-widths-demo) {
   background-color: #ddd;
   position: relative;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 :global(#article-column-widths-demo .article-boundaries) {
@@ -89,9 +89,9 @@
 :global(#article-column-widths-demo div.article-block) {
   height: 300px;
   background: #81a1c1;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   height: 50px;
-  padding-left: 3px;
+  padding-inline-start: 3px;
   color: white;
   font-size: 1rem;
 }

package/dist/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -40,13 +40,13 @@
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
     {#snippet beforeOverlay()}
-      <div class="overlay p-3 before text-left">
+      <div class="overlay p-3 before">
         <p class="h4 font-bold">July 7, 2020</p>
         <p class="body-note">Initially, this site was far smaller.</p>
       </div>
     {/snippet}
     {#snippet afterOverlay()}
-      <div class="overlay p-3 after text-right">
+      <div class="overlay p-3 after">
         <p class="h4 font-bold">Oct. 20, 2020</p>
         <p class="body-note">But then forces built up.</p>
       </div>

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -284,6 +284,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 /* Scales by 1.125 */
 button.before-after-container {
   box-sizing: content-box;
+  text-align: inherit;
 }
 button.before-after-container img {
   top: 0;
@@ -301,10 +302,10 @@ button.before-after-container .overlay-container {
   top: 0;
 }
 button.before-after-container .overlay-container :global(:first-child) {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 button.before-after-container .overlay-container :global(:last-child) {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 button.before-after-container .overlay-container.before {
   left: 0;
@@ -352,18 +353,18 @@ button.before-after-container .overlay-container.after {
   height: 0;
   user-select: none;
   position: relative;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
+  border-block-start: 10px solid transparent;
+  border-block-end: 10px solid transparent;
 }
 .handle .arrow-right {
-  left: 19px;
-  bottom: 14px;
-  border-left: 10px solid var(--before-after-handle-colour);
+  inset-inline-start: 19px;
+  inset-block-end: 14px;
+  border-inline-start: 10px solid var(--before-after-handle-colour);
 }
 .handle .arrow-left {
-  left: 3px;
-  top: 6px;
-  border-right: 10px solid var(--before-after-handle-colour);
+  inset-inline-start: 3px;
+  inset-block-start: 6px;
+  border-inline-end: 10px solid var(--before-after-handle-colour);
 }
 
 .before-after-caption :global(p) {
@@ -372,6 +373,6 @@ button.before-after-container .overlay-container.after {
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }</style>

package/dist/components/Block/Block.stories.svelte

@@ -129,7 +129,7 @@
   background-color: #ddd;
   position: relative;
   width: calc(100% + 30px);
-  margin-left: -15px;
+  margin-inline-start: -15px;
 }
 
 :global(#block-demo-article .article-boundaries) {
@@ -145,7 +145,7 @@
 }
 
 :global(#block-demo-article div.article-block.block-snap-widths-demo) {
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   height: 40px;
   font-size: 11px;
 }
@@ -156,7 +156,7 @@
 
 :global(#block-demo-article .label,
     #block-demo-article div.article-block.block-snap-widths-demo) {
-  padding-left: 3px;
+  padding-inline-start: 3px;
   color: white;
   font-weight: 500;
 }

package/dist/components/Byline/Byline.stories.svelte

@@ -9,7 +9,7 @@
     argTypes: {
       align: {
         control: 'select',
-        options: ['left', 'center'],
+        options: ['auto', 'center'],
       },
     },
   });

package/dist/components/Byline/Byline.svelte

@@ -21,7 +21,7 @@
     /**
      * Alignment of the byline.
      */
-    align?: 'left' | 'center';
+    align?: 'auto' | 'center';
     /**
      * Add an id to to target with custom CSS.
      * @type {string}
@@ -54,7 +54,7 @@
     authors = [],
     publishTime,
     updateTime,
-    align = 'left',
+    align = 'auto',
     id = '',
     cls = '',
     getAuthorPage = getAuthorPageUrl,
@@ -63,7 +63,7 @@
     updated,
   }: Props = $props();
 
-  let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
+  let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
 
   /**
   /* Date validation and formatter functions

package/dist/components/Byline/Byline.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     /**
      * Alignment of the byline.
      */
-    align?: 'left' | 'center';
+    align?: 'auto' | 'center';
     /**
      * Add an id to to target with custom CSS.
      * @type {string}

package/dist/components/EndNotes/EndNotes.svelte

@@ -47,13 +47,13 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   color: var(--theme-colour-text-primary);
   font-weight: 500;
   letter-spacing: 0em;
-  margin-top: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
-  margin-bottom: 0.125rem;
+  margin-block-start: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
+  margin-block-end: 0.125rem;
   text-transform: none;
 }
 
@@ -63,7 +63,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-top: 0;
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
 }</style>

package/dist/components/Framer/Resizer/index.svelte

@@ -165,7 +165,7 @@
   background-color: rgba(255, 255, 255, 0.8);
   padding: 4px 8px;
   border-radius: 4px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 #resizer button.icon {
   font-size: 14px;
@@ -196,10 +196,10 @@
 }
 #resizer button.icon.left {
   text-align: right;
-  padding-right: 3px;
+  padding-inline-end: 3px;
 }
 #resizer button.icon.right {
-  padding-left: 6px;
+  padding-inline-start: 6px;
   text-align: left;
 }
 #resizer div.slider-container {

package/dist/components/Framer/Typeahead/index.svelte

@@ -354,7 +354,7 @@ li:hover {
 }
 
 :global([data-svelte-search] label) {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   display: inline-flex;
   font-size: 0.75rem;
   color: #aaa;

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -138,8 +138,8 @@ div.container {
   display: contents;
 }
 div.container :global(.article-block.graphic p) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);
@@ -152,8 +152,8 @@ div.container :global(.article-block.graphic aside p) {
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }</style>

package/dist/components/Headline/Headline.svelte

@@ -155,9 +155,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   max-width: 660px;
 }
 .headline-wrapper :global(.dek p) {
-  margin-top: 0;
+  margin-block-start: 0;
   font-family: var(--theme-font-family-note);
   line-height: 1.3;
   font-weight: 300;
-  margin-bottom: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
+  margin-block-end: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
 }</style>

package/dist/components/HeroHeadline/HeroHeadline.mdx

@@ -51,7 +51,7 @@ In the graphics kit, set styles in `global.scss` to make the Reuters site header
   border: none !important;
 }
 .hero-wrapper {
-  margin-top: -64px;
+  margin-block-start: -64px;
 }
 ```
 
@@ -316,7 +316,7 @@ Add styles in `global.scss`:
   }
 
   .dek {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
     p {
       color: #ffffff;
       text-shadow: 1px 1px 8px #ff7c88;

package/dist/components/HeroHeadline/HeroHeadline.stories.svelte

@@ -243,7 +243,7 @@
   filter: drop-shadow(0px 0px 12px #ff7c88);
 }
 .custom-hed .dek {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 .custom-hed .dek p {
   color: #ffffff;
@@ -260,5 +260,5 @@
   border: none !important;
 }
 .transparent-header :global(.hero-wrapper) {
-  margin-top: -64px;
+  margin-block-start: -64px;
 }</style>

package/dist/components/HeroHeadline/HeroHeadline.svelte

@@ -200,7 +200,7 @@
         {getAuthorPage}
         {published}
         {updated}
-        align="left"
+        align="auto"
       />
     {/if}
   </div>
@@ -230,7 +230,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   height: var(--heroHeight, 100svh);
   max-height: 1800px;
   transform: translateX(-50%);
-  margin-top: 0;
+  margin-block-start: 0;
 }
 @media (max-width: 690px) {
   .hero-wrapper :global(.background-hero .headline) {
@@ -243,8 +243,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .hero-wrapper :global(.background-hero video) {
   position: relative;
@@ -257,7 +257,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   .hero-wrapper :global(.graphic-container .article-block.notes) {
     width: 100%;
     padding: 0 15px;
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 

package/dist/components/InfoBox/InfoBox.svelte

@@ -124,14 +124,14 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-weight: 600;
   letter-spacing: 0.03em;
   text-transform: uppercase;
-  margin-top: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.body p) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);
@@ -140,29 +140,29 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-weight: 300;
 }
 .infobox :global(.body p):last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.body ul),
 .infobox :global(.body ol) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);
   line-height: 1.3;
   font-size: var(--theme-font-size-sm);
   font-weight: 300;
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.body ul li),
 .infobox :global(.body ol li) {
-  margin-top: 0;
-  margin-top: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-start: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .infobox :global(.body ul li):last-child,
 .infobox :global(.body ol li):last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.footer p) {
   font-family: var(--theme-font-family-note);
@@ -170,9 +170,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .infobox :global(.footer p):last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }</style>

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -85,7 +85,7 @@
       <div
         class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
-        style:margin-bottom={ri < rows.length - 1 ? gap + 'px' : ''}
+        style:margin-block-end={ri < rows.length - 1 ? gap + 'px' : ''}
       >
         {#each row as img, i}
           <figure
@@ -143,6 +143,6 @@ div.photopack-container div.photopack-row figure div.alt-warning {
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }</style>

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -189,7 +189,7 @@ div.block-container.stacked {
 }
 
 div.heading {
-  margin-top: 0;
+  margin-block-start: 0;
   font-family: Knowledge, sans-serif;
 }
 div.heading.stacked {
@@ -212,8 +212,8 @@ div.heading.stacked {
   display: block;
   width: calc(50% - 30px);
   max-width: 450px;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }
 .referral-container .referral:hover .title {
   text-decoration: underline;
@@ -224,7 +224,7 @@ div.heading.stacked {
 .referral-container .referral .headline {
   display: inline-block;
   width: calc(100% - 9rem);
-  padding-right: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .referral-container .referral .headline .kicker {
   font-size: var(--theme-font-size-xxs);

package/dist/components/Scroller/Background.svelte

@@ -9,16 +9,25 @@
   }
 
   let { index, steps, preload = 1, stackBackground = true }: Props = $props();
+
+  function showStep(i: number) {
+    if (preload === 0) return true;
+    if (stackBackground) return i >= 0;
+    return i >= index - preload && i <= index + preload;
+  }
+
+  function isVisible(i: number) {
+    if (stackBackground) return i <= index;
+    return i === index;
+  }
 </script>
 
 {#each steps as step, i}
-  <!-- Load the step(s) before and after the active one, only -->
-  <!-- Unless stackBackground is true. If so, keep all steps before the current one loaded. -->
-  {#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
+  {#if showStep(i)}
     <div
-      class="step-background step-{i + 1} w-full absolute"
-      class:visible={stackBackground ? i <= index : i === index}
-      class:invisible={stackBackground ? i > index : i !== index}
+      class={`step step-${i + 1} w-full absolute`}
+      class:visible={isVisible(i)}
+      class:invisible={!isVisible(i)}
     >
       <step.background {...step.backgroundProps || {}}></step.background>
     </div>

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -40,5 +40,5 @@
 {/if}
 
 <style>div.embedded-foreground :global(p:last-child) {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }</style>

package/dist/components/Scroller/Foreground.svelte

@@ -59,8 +59,8 @@ div.step-foreground-container .step-foreground {
   background: rgba(255, 255, 255, 0.9);
 }
 div.step-foreground-container .step-foreground :global(p:last-child) {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 div.step-foreground-container .step-foreground :global(*:first-child) {
-  margin-top: 0;
+  margin-block-start: 0;
 }</style>

package/dist/components/Scroller/Scroller.mdx

@@ -8,7 +8,7 @@ import * as ScrollerStories from './Scroller.stories.svelte';
 
 The `Scroller` component creates a basic scrollytelling graphic with layout options.
 
-> This component is designed to handle most common layouts for scrollytelling. To make something more complex, customise [ScrollerBase](https://github.com/reuters-graphics/graphics-components/blob/main/src/components/Scroller/ScrollerBase/index.svelte), which is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
+This component is designed to handle most common layouts for scrollytelling. To make something more complex, customise [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs), which is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
 
 [Demo](?path=/story/components-graphics-scroller--demo)
 

package/dist/components/Scroller/Scroller.svelte

@@ -1,6 +1,6 @@
 <!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
 <script lang="ts">
-  import ScrollerBase from './ScrollerBase/index.svelte';
+  import ScrollerBase from '../ScrollerBase/ScrollerBase.svelte';
   import Background from './Background.svelte';
   import Foreground from './Foreground.svelte';
   import Embedded from './Embedded/index.svelte';

package/dist/components/ScrollerBase/ScrollerBase.mdx

@@ -0,0 +1,82 @@
+import { Meta } from '@storybook/blocks';
+
+import * as ScrollerBaseStories from './ScrollerBase.stories.svelte';
+
+<Meta of={ScrollerBaseStories} />
+
+# ScrollerBase
+
+The `ScrollerBase` component powers the [`Scroller` component](?path=/story/components-graphics-scroller--docs), which creates a basic storytelling graphic with preset layout options. `ScrollerBase` contains the bare minimum code necessary for a scrollytelling section, and allows for customisation beyond what the [`Scroller` component](?path=/story/components-graphics-scroller--docs) allows.
+
+`ScrollerBase` is a Svelte 5 version of the [svelte-scroller](https://github.com/sveltejs/svelte-scroller).
+
+> **Important❗:** Make sure the HTML element containing each foreground is a div with the class `step-foreground-container`. If you're modifying this to something else, pass the appropriate selector to the `query` prop.
+
+[Demo](?path=/story/components-graphics-scrollerbase--demo)
+
+```svelte
+<script lang="ts">
+  import { ScrollerBase } from '@reuters-graphics/graphics-components';
+
+  // Optional: Bind your own variables to use them in your code.
+  let count = $state(1);
+  let index = $state(0);
+  let offset = $state(0);
+  let progress = $state(0);
+  let top = $state(0.1);
+  let threshold = $state(0.5);
+  let bottom = $state(0.9);
+</script>
+
+<ScrollerBase
+  {top}
+  {threshold}
+  {bottom}
+  bind:count
+  bind:index
+  bind:offset
+  bind:progress
+  query="div.step-foreground-container"
+>
+  {#snippet backgroundSnippet()}
+    <!-- Add custom background HTML or component -->
+    <p class="mb-0">
+      Current step: <strong>{index + 1}/{count}</strong>
+    </p>
+    <progress class="mb-4" value={(index + 1) / count}></progress>
+
+    <p class="mb-0">Offset in current step</p>
+    <progress class="mb-4" value={offset}></progress>
+
+    <p class="mb-0">Total progress</p>
+    <progress class="mb-4" value={progress}></progress>
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container">Step 1</div>
+    <div class="step-foreground-container">Step 2</div>
+    <div class="step-foreground-container">Step 3</div>
+    <div class="step-foreground-container">Step 4</div>
+    <div class="step-foreground-container">Step 5</div>
+  {/snippet}
+</ScrollerBase>
+
+<style lang="scss">
+  @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
+
+  .scroller-demo-container {
+    width: mixins.$column-width-normal;
+    margin: auto;
+  }
+
+  .step-foreground-container {
+    height: 100vh;
+    width: 50%;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 1em;
+    margin: 0 0 2em 0;
+    position: relative;
+    left: 50%;
+  }
+</style>
+```

package/dist/components/ScrollerBase/ScrollerBase.stories.svelte

@@ -0,0 +1,12 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ScrollerBase from './ScrollerBase.svelte';
+  import ScrollerDemo from './demo/ScrollerDemo.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Graphics/ScrollerBase',
+    component: ScrollerBase,
+  });
+</script>
+
+<Story name="Demo"><ScrollerDemo /></Story>