@reuters-graphics/graphics-components 3.0.4 → 3.0.6

package/dist/components/Headpile/Headpile.mdx

@@ -0,0 +1,37 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeadpileStories from './Headpile.stories.svelte';
+
+<Meta of={HeadpileStories} />
+
+# Headpile
+
+The `Headpile` component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story.
+
+It's designed to be used with headshots that have had their background removed, which can be done in the [Preview app](https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4) on macOS.
+
+```svelte
+<script>
+  import { Headpile } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<Headpile
+  figures={[
+    {
+      img: `${assets}/images/person-A.jpg`,
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      text: 'Burhan was little known in public life until taking part in the coup ...',
+    },
+    {
+      img: `${assets}/images/person-B.jpg`,
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
+    },
+  ]}
+/>
+```
+
+<Canvas of={HeadpileStories.Demo} />

package/dist/components/Headpile/Headpile.stories.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Headpile from './Headpile.svelte';
+
+  import hed1 from './images/abdel.png';
+  import hed2 from './images/hemedti.png';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/Headpile',
+    component: Headpile,
+    argTypes: {},
+  });
+
+  const defaultArgs = [
+    {
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      img: hed1,
+      text: 'Burhan was little known in public life until taking part in the coup against Bashir in 2019 after a popular uprising against his rule. In August 2019, his role as de facto head of state was affirmed when he became head of the Sovereign Council, a body comprising civilian and military leaders formed to oversee the transition towards elections.',
+      // colour: '#957caa',
+    },
+    {
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      img: hed2,
+      text: "Popularly known as Hemedti, Dagalo rose from lowly beginnings as a camel trader to head a widely feared Arab militia that crushed a revolt in Darfur, winning him influence and eventually a role as Sudan's former deputy head of state.\r\n\r\nOver the past decade, he has been a key figure in Sudanese politics, aiding in the ousting of Bashir in 2019 and suppressing pro-democracy protests. As the country limped from one economic crisis to another, Hemedti became one of Sudan’s richest men, exporting gold from mines in Darfur seized by his fighters.",
+      colour: '#afb776',
+    },
+  ];
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    figures: defaultArgs,
+  }}
+/>

package/dist/components/Headpile/Headpile.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Headpile from './Headpile.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Headpile: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Headpile = InstanceType<typeof Headpile>;
+export default Headpile;

package/dist/components/Headpile/Headpile.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+  import KeyFigure from './KeyFigure.svelte';
+
+  interface Props {
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id: string;
+    /**
+     * Width of the container.
+     */
+    width: Extract<ContainerWidth, 'normal' | 'wide'>;
+    /**
+     * Default background colour to be used as a mount behind the headshot.
+     */
+    colour: string;
+    /**
+     * Individual figures -- i.e., people -- for the headpile.
+     */
+    figures: {
+      /**
+       * Headshot image src. Be sure to prefix the image
+       *
+       * ```typescript
+       * import { assets } from '$app/paths';
+       *
+       * const imgSrc = `${assets}/images/my-image.jpg`;
+       * ```
+       */
+      img: string;
+      /**
+       * Figure name.
+       */
+      name: string;
+      /**
+       * Figure role or title.
+       */
+      role?: string;
+      /**
+       * Text describing the person.
+       */
+      text: string;
+      /**
+       * Background colour to be used as a mount behind the headshot.
+       */
+      colour?: string;
+    }[];
+  }
+
+  let {
+    figures,
+    class: cls,
+    id,
+    width = 'normal',
+    colour = '#cccccc',
+  }: Props = $props();
+</script>
+
+<Block class="fmy-6 {cls} {id} {width}">
+  <div class="figures">
+    {#each figures as figure}
+      <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
+    {/each}
+  </div>
+</Block>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+div.figures {
+  display: flex;
+  flex-direction: column;
+  gap: 2.75rem;
+}</style>

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

@@ -0,0 +1,53 @@
+import type { ContainerWidth } from '../@types/global';
+interface Props {
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id: string;
+    /**
+     * Width of the container.
+     */
+    width: Extract<ContainerWidth, 'normal' | 'wide'>;
+    /**
+     * Default background colour to be used as a mount behind the headshot.
+     */
+    colour: string;
+    /**
+     * Individual figures -- i.e., people -- for the headpile.
+     */
+    figures: {
+        /**
+         * Headshot image src. Be sure to prefix the image
+         *
+         * ```typescript
+         * import { assets } from '$app/paths';
+         *
+         * const imgSrc = `${assets}/images/my-image.jpg`;
+         * ```
+         */
+        img: string;
+        /**
+         * Figure name.
+         */
+        name: string;
+        /**
+         * Figure role or title.
+         */
+        role?: string;
+        /**
+         * Text describing the person.
+         */
+        text: string;
+        /**
+         * Background colour to be used as a mount behind the headshot.
+         */
+        colour?: string;
+    }[];
+}
+declare const Headpile: import("svelte").Component<Props, {}, "">;
+type Headpile = ReturnType<typeof Headpile>;
+export default Headpile;

package/dist/components/Headpile/Headshot.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  let { img = '', colour = 'var(--theme-colour-accent)' } = $props();
+</script>
+
+<div class="headshot-wrapper">
+  <div class="background" style="background-color: {colour};"></div>
+  <div class="headshot" style="background-image: url({img}); "></div>
+</div>
+
+<style>.headshot-wrapper {
+  width: 7rem;
+  height: 6.75rem;
+  position: relative;
+  margin-block-start: -1.75rem;
+  margin-block-end: -1.75rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.background {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 7rem;
+  height: 4.75rem;
+  display: inline-block;
+  border-radius: 0.25rem;
+}
+
+.headshot {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  background-size: 106%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  overflow: hidden;
+}</style>

package/dist/components/Headpile/Headshot.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Headshot: import("svelte").Component<{
+    img?: string;
+    colour?: string;
+}, {}, "">;
+type Headshot = ReturnType<typeof Headshot>;
+export default Headshot;

package/dist/components/Headpile/KeyFigure.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+  import Headshot from './Headshot.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+
+  interface Props {
+    img: string;
+    name: string;
+    role?: string;
+    text: string;
+    colour?: string;
+  }
+
+  let { name, role, img, text, colour }: Props = $props();
+
+  const mobile = new MediaQuery('max-width: 600px');
+</script>
+
+<div>
+  <div class="wrapper-profile">
+    <div>
+      <Headshot {img} {colour} />
+    </div>
+    <div class="text">
+      <div class="title">{name}</div>
+      <div class="role">
+        {role || ''}
+      </div>
+      {#if !mobile.current}
+        <div class="description desktop">
+          <Markdown source={text} />
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if mobile.current}
+    <div class="description mobile">
+      <Markdown source={text} />
+    </div>
+  {/if}
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.wrapper-profile {
+  display: flex;
+  align-items: flex-start;
+  justify-content: start;
+  gap: 1rem;
+  width: 100%;
+  min-height: 5.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: var(--theme-font-size-base);
+  line-height: 1;
+}
+@media (max-width: 450px) {
+  .title {
+    font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+  }
+}
+
+.role {
+  border-block-start: 0.5px solid var(--tr-muted-grey);
+  margin-inline-start: -0.75rem;
+  padding-inline-start: 0.75rem;
+  margin-block-start: 0.25rem;
+  padding-block-start: 0.25rem;
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
+  font-size: var(--theme-font-size-sm);
+  font-weight: 300;
+  line-height: 1.15;
+  margin-block-end: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+}
+@media (max-width: 450px) {
+  .role {
+    font-size: var(--theme-font-size-xs);
+  }
+}
+
+.description :global(p) {
+  font-family: var(--theme-font-family-note);
+  font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+  font-weight: 300;
+  margin-block-end: 0;
+  text-wrap: pretty;
+}
+.description.desktop {
+  display: block;
+}
+.description.mobile {
+  display: none;
+}
+@media (max-width: 600px) {
+  .description.desktop {
+    display: none;
+  }
+  .description.mobile {
+    display: block;
+  }
+}</style>

package/dist/components/Headpile/KeyFigure.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    img: string;
+    name: string;
+    role?: string;
+    text: string;
+    colour?: string;
+}
+declare const KeyFigure: import("svelte").Component<Props, {}, "">;
+type KeyFigure = ReturnType<typeof KeyFigure>;
+export default KeyFigure;

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/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>

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

@@ -0,0 +1,19 @@
+import ScrollerBase from './ScrollerBase.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ScrollerBase: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ScrollerBase = InstanceType<typeof ScrollerBase>;
+export default ScrollerBase;

package/dist/components/{Scroller/ScrollerBase/index.svelte → ScrollerBase/ScrollerBase.svelte}

@@ -117,7 +117,7 @@
     top = 0,
     bottom = 1,
     threshold = 0.5,
-    query = 'section',
+    query = 'div.step-foreground-container',
     parallax = false,
     backgroundSnippet,
     foregroundSnippet,
@@ -133,7 +133,7 @@
   let wh = $state(0);
   let fixed = $state(false);
   let offset_top = 0;
-  let width = 1;
+  let width = $state(1);
 
   let top_px = $derived(Math.round(top * wh));
   let bottom_px = $derived(Math.round(bottom * wh));

package/dist/components/{Scroller/ScrollerBase/index.svelte.d.ts → ScrollerBase/ScrollerBase.svelte.d.ts}

@@ -27,6 +27,6 @@ interface Props {
     /** Whether the foreground is visible */
     visible?: boolean;
 }
-declare const Index: import("svelte").Component<Props, {}, "progress" | "offset" | "index" | "count" | "visible">;
-type Index = ReturnType<typeof Index>;
-export default Index;
+declare const ScrollerBase: import("svelte").Component<Props, {}, "progress" | "offset" | "index" | "count" | "visible">;
+type ScrollerBase = ReturnType<typeof ScrollerBase>;
+export default ScrollerBase;

package/dist/components/ScrollerBase/demo/DraggableLabel.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  export let value = 0;
+  export let label = 'label';
+
+  function drag(node: HTMLElement) {
+    function handleMousedown() {
+      function handleMousemove(event: MouseEvent) {
+        event.preventDefault();
+
+        node.dispatchEvent(
+          new CustomEvent('drag', {
+            detail: {
+              value: event.clientY / window.innerHeight,
+            },
+          })
+        );
+      }
+
+      function handleMouseup() {
+        window.removeEventListener('mousemove', handleMousemove);
+        window.removeEventListener('mouseup', handleMouseup);
+      }
+
+      window.addEventListener('mousemove', handleMousemove);
+      window.addEventListener('mouseup', handleMouseup);
+    }
+
+    node.addEventListener('mousedown', handleMousedown);
+
+    return {
+      destroy() {
+        node.removeEventListener('mousedown', handleMousedown);
+      },
+    };
+  }
+
+  // Round to 2 decimal places
+  function round(value: number): number {
+    return Math.round(value * 100) / 100;
+  }
+</script>
+
+<div
+  class="label"
+  style="top: {value * 100}%"
+  use:drag
+  ondrag={(event: DragEvent) => {
+    const customEvent = event as unknown as { detail: { value: number } };
+    value = customEvent.detail.value;
+  }}
+  role="slider"
+  aria-valuemin="0"
+  aria-valuemax="1"
+  aria-valuenow={value}
+  tabindex="0"
+>
+  <div class="drag-target"></div>
+  <hr />
+  <p>{label}: {round(value)}</p>
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.label {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 150px;
+  height: 0;
+  cursor: ns-resize;
+}
+.label .drag-target {
+  position: absolute;
+  height: 20px;
+  top: -10px;
+}
+.label hr {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 2px;
+  background: red;
+  border: none;
+  margin: 0;
+}
+.label p {
+  position: absolute;
+  font-family: var(--theme-font-family-sans-serif);
+  font-weight: 500;
+  font-size: var(--theme-font-size-sm);
+}</style>

package/dist/components/ScrollerBase/demo/DraggableLabel.svelte.d.ts

@@ -0,0 +1,21 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DraggableLabel: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    label?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DraggableLabel = InstanceType<typeof DraggableLabel>;
+export default DraggableLabel;

package/dist/components/ScrollerBase/demo/ScrollerDemo.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import ScrollerBase from '../ScrollerBase.svelte';
+  import DraggableLabel from './DraggableLabel.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+
+  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);
+
+  const text =
+    'Read the documentation on the props `progress`, `top`, `threshold`, `bottom` under **Controls** to understand how they work. \n\nAdjust the red sliders on the right to see how changes in these values affect scrolling behaviour.';
+</script>
+
+<BodyText {text} />
+
+<div class="scroller-demo-container">
+  <ScrollerBase
+    {top}
+    {threshold}
+    {bottom}
+    bind:count
+    bind:index
+    bind:offset
+    bind:progress
+    query="div.step-foreground-container"
+  >
+    {#snippet backgroundSnippet()}
+      <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()}
+      <div class="step-foreground-container font-medium">Step 1</div>
+      <div class="step-foreground-container font-medium">Step 2</div>
+      <div class="step-foreground-container font-medium">Step 3</div>
+      <div class="step-foreground-container font-medium">Step 4</div>
+      <div class="step-foreground-container font-medium">Step 5</div>
+    {/snippet}
+  </ScrollerBase>
+</div>
+
+<BodyText
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+"
+/>
+
+<DraggableLabel bind:value={top} label="top" />
+<DraggableLabel bind:value={threshold} label="threshold" />
+<DraggableLabel bind:value={bottom} label="bottom" />
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.scroller-demo-container {
+  max-width: 660px;
+  margin: auto;
+  background: #c5dfe8;
+}
+
+.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/demo/ScrollerDemo.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ScrollerDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type ScrollerDemo = ReturnType<typeof ScrollerDemo>;
+export default ScrollerDemo;

package/dist/components/Theme/@types/component.d.ts

@@ -44,4 +44,5 @@ export interface Theme {
 export interface CustomTheme {
     colour?: Partial<Colour>;
     font?: Partial<CustomFont>;
+    [customProperty: string]: unknown;
 }

package/dist/components/Theme/Theme.svelte

@@ -14,7 +14,7 @@
   import mergeThemes from './utils/merge.js';
 
   // Types
-  import type { CustomTheme } from './@types/component';
+  import type { CustomTheme, Theme } from './@types/component';
   import type { Snippet } from 'svelte';
   type Base = 'light' | 'dark';
 
@@ -22,7 +22,7 @@
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme;
+    theme?: CustomTheme | Theme;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't

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

@@ -2,17 +2,17 @@
  * Pre-made themes you can import.
  */
 export declare const themes: {
-    light: import("./@types/component").Theme;
-    dark: import("./@types/component").Theme;
+    light: Theme;
+    dark: Theme;
 };
-import type { CustomTheme } from './@types/component';
+import type { CustomTheme, Theme } from './@types/component';
 import type { Snippet } from 'svelte';
 type Base = 'light' | 'dark';
 interface Props {
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme;
+    theme?: CustomTheme | Theme;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
+export { default as Headpile } from './components/Headpile/Headpile.svelte';
 export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
@@ -34,6 +35,7 @@ export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
 export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as Theme, themes } from './components/Theme/Theme.svelte';

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
+export { default as Headpile } from './components/Headpile/Headpile.svelte';
 export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
@@ -36,6 +37,7 @@ export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
 export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export { default as Theme, themes } from './components/Theme/Theme.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",