From b65ff1ffdb23e51a4c45e5b5b673f11b5f2525c9 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 11 Mar 2025 13:34:43 -0700
Subject: [PATCH 01/47] cleans up old .md files

---
 src/components/Analytics/Analytics.mdx        |  4 +--
 src/components/Analytics/Analytics.svelte     |  3 +-
 .../Analytics/stories/docs/component.md       | 11 -------
 .../Analytics/stories/docs/environments.md    | 17 ----------
 .../Analytics/stories/docs/multipage.md       | 31 -------------------
 5 files changed, 4 insertions(+), 62 deletions(-)
 delete mode 100644 src/components/Analytics/stories/docs/component.md
 delete mode 100644 src/components/Analytics/stories/docs/environments.md
 delete mode 100644 src/components/Analytics/stories/docs/multipage.md

diff --git a/src/components/Analytics/Analytics.mdx b/src/components/Analytics/Analytics.mdx
index 8b39f502..60e7afd2 100644
--- a/src/components/Analytics/Analytics.mdx
+++ b/src/components/Analytics/Analytics.mdx
@@ -6,7 +6,7 @@ import * as AnalyticsStories from './Analytics.stories.svelte';
 
 # Analytics
 
-Add Google and Chartbeat analytics to your page.
+The `Analytics` component adds Google and Chartbeat analytics to your page.
 
 ```svelte
 <script>
@@ -42,7 +42,7 @@ For example, the following excludes analytics from pages in development or hoste
 
 If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
 
-This component also exports a function you can call to register pageviews.
+This component exports a function you can call to register pageviews.
 
 For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
 
diff --git a/src/components/Analytics/Analytics.svelte b/src/components/Analytics/Analytics.svelte
index c623e547..e8b5ce14 100644
--- a/src/components/Analytics/Analytics.svelte
+++ b/src/components/Analytics/Analytics.svelte
@@ -1,3 +1,5 @@
+<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
+
 <script module>
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
@@ -13,7 +15,6 @@
   export { registerPageview };
 </script>
 
-<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
 <script lang="ts">
   interface Author {
     name: string;
diff --git a/src/components/Analytics/stories/docs/component.md b/src/components/Analytics/stories/docs/component.md
deleted file mode 100644
index 1ddd7b8e..00000000
--- a/src/components/Analytics/stories/docs/component.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Add Google and Chartbeat analytics to your page.
-
-```svelte
-<script>
-  import { Analytics } from '@reuters-graphics/graphics-components';
-
-  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
-</script>
-
-<Analytics authors="{authors}" />
-```
diff --git a/src/components/Analytics/stories/docs/environments.md b/src/components/Analytics/stories/docs/environments.md
deleted file mode 100644
index 74089219..00000000
--- a/src/components/Analytics/stories/docs/environments.md
+++ /dev/null
@@ -1,17 +0,0 @@
-Generally, you only want to send page analytics in production environments.
-
-In a SvelteKit context, you can use `$app` stores to restrict when you send analytics.
-
-For example, the following excludes analytics from pages in development or hosted on our preview server:
-
-```svelte
-<script>
-  import { Analytics } from '@reuters-graphics/graphics-components';
-  import { dev } from '$app/environment';
-  import { page } from '$app/stores';
-</script>
-
-{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
-  <Analytics />
-{/if}
-```
diff --git a/src/components/Analytics/stories/docs/multipage.md b/src/components/Analytics/stories/docs/multipage.md
deleted file mode 100644
index a3223927..00000000
--- a/src/components/Analytics/stories/docs/multipage.md
+++ /dev/null
@@ -1,31 +0,0 @@
-If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
-
-This component also exports a function you can call to register pageviews.
-
-For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
-
-```svelte
-<script>
-  import {
-    Analytics,
-    registerPageview,
-  } from '@reuters-graphics/graphics-components';
-  import { afterNavigate } from '$app/navigation';
-
-  let isFirstPageview = true;
-
-  afterNavigate(() => {
-    // We shouldn't fire on initial page load because the Analytics component
-    // already registers a reader's first pageview. After this component
-    // has initially mounted, we can be sure that further navigation is virtual
-    // and register pageviews using this function.
-    if (!isFirstPageview) {
-      registerPageview();
-    } else {
-      isFirstPageview = false;
-    }
-  });
-</script>
-
-<Analytics />
-```

From f9cce65f66f96ddaff7f8b8c383f10232b39a980 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 11 Mar 2025 14:33:50 -0700
Subject: [PATCH 02/47] deletes .md files, clarifies docs

---
 src/components/Article/Article.mdx            | 36 ++++----
 src/components/Article/Article.stories.svelte | 56 ++++++------
 src/components/Article/Article.svelte         |  4 +-
 .../Article/stories/docs/component.md         | 13 ---
 .../Article/stories/docs/customWellWidths.md  | 87 -------------------
 5 files changed, 49 insertions(+), 147 deletions(-)
 delete mode 100644 src/components/Article/stories/docs/component.md
 delete mode 100644 src/components/Article/stories/docs/customWellWidths.md

diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx
index 9a3970e5..b5defaa4 100644
--- a/src/components/Article/Article.mdx
+++ b/src/components/Article/Article.mdx
@@ -6,9 +6,9 @@ import * as ArticleStories from './Article.stories.svelte';
 
 # Article
 
-The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
+The `Article` component contains all the contents of our story.
 
-> 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
+> 📌 In most cases, **you don't need to mess with the `Article` component** because it's already set up in the Graphics Kit.
 
 ```svelte
 <script>
@@ -16,29 +16,30 @@ The `Article` component contains all the content of our story and also establish
 </script>
 
 <Article>
-  <!-- The story stuff goes in here! -->
+  <!-- The story content goes here! -->
 </Article>
 ```
 
 <Canvas of={ArticleStories.Demo} />
 
-## Custom well widths
+## Custom column widths
 
-The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:
+The `Article` component also establishes the widths of columns that contain individual sections of the story, such as text, photos, and charts. The default column widths follow a basic class scheme:
 
-- `narrower` A bit narrower than narrow...
-- `narrow` A bit narrower than the text column
-- `normal` **The main width of the body text column**
-- `wide` A bit wider than the text column
+- `narrower` The narrowest...
+- `narrow` A bit narrower than the default body text column
+- `normal` **The default width of the body text column**
+- `wide` A bit wider
 - `wider` A bit wider than wide...
 - `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
 - `fluid` Fully edge-to-edge
 
-When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.
+You can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` classes. These can then be used by the `Block` component or other elements housed inside `<Article>`.
 
-> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
+> **For most Graphics Kit pages, you shouldn't customise the column widths.** Other Reuters tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside Graphics Kit. The main exception is SREP stories.
 
 ```svelte
+<!-- Set custom column widths -->
 <Article
   columnWidths={{
     narrower: 310,
@@ -48,6 +49,7 @@ When combined with the `Block` component, you can set custom column widths by pa
     wider: 1400,
   }}
 >
+  <!-- Custom column widths get passed down to the `Block` component -->
   <Block width="narrower" />
   <Block width="narrow" />
   <Block width="normal" />
@@ -58,11 +60,11 @@ When combined with the `Block` component, you can set custom column widths by pa
 </Article>
 ```
 
-If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
+If you're not using our `Block` component, you can still inherit the column widths from `Article` and create your own custom containers by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
 
 ```svelte
 <div class="my-special-container">
-  <!-- Stuffs... -->
+  <!-- Story content -->
 </div>
 
 <style lang="scss">
@@ -72,7 +74,7 @@ If you're not using our `Block` component, you can still inherit the column widt
 </style>
 ```
 
-... or you can make your component entirely configurable within the article well doing something like this:
+... or you can make your column widths entirely configurable by adding classes and manually specifying widths:
 
 ```svelte
 <script>
@@ -80,7 +82,7 @@ If you're not using our `Block` component, you can still inherit the column widt
 </script>
 
 <div class="my-special-container {width}">
-  <!-- Stuffs... -->
+  <!-- Story content -->
 </div>
 
 <style lang="scss">
@@ -110,4 +112,6 @@ If you're not using our `Block` component, you can still inherit the column widt
 </style>
 ```
 
-Here's an example of how custom\* `columnWidths` can be used to change the article well columns:
+Here's an example of how <span className='custom'>custom</span> `columnWidths` can be used to change column widths:
+
+<Canvas of={ArticleStories.CustomColumns} />
diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte
index c0683455..79d69c36 100644
--- a/src/components/Article/Article.stories.svelte
+++ b/src/components/Article/Article.stories.svelte
@@ -2,36 +2,25 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Block from '../Block/Block.svelte';
   import Article from './Article.svelte';
-  // @ts-ignore raw
-  import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';
-
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   const { Story } = defineMeta({
-    title: 'Components/Page Layout/Article',
+    title: 'Components/Page layout/Article',
     component: Article,
   });
 </script>
 
-<script lang="ts">
-</script>
-
-<Story
-  name="Demo"
-  args={{
-    embedded: false,
-    id: '',
-  }}
->
+<Story name="Demo">
   <Article id="article-story-basic">
     <div class="demo-container">
-      <div class="background-label">Article container</div>
+      <div class="background-label">Article well</div>
       <div class="padding-label"><span>⇤</span>15px padding</div>
     </div>
   </Article>
 </Story>
 
-<Story name="Custom columns" {...withStoryDocs(customWellWidthsDocs)}>
+<Story name="Custom columns" exportName="CustomColumns">
+  <h3>Default column widths</h3>
+
   <Article id="article-column-widths-demo">
     <div class="article-boundaries">
       <Block id="section-demo" width="narrower">narrower</Block>
@@ -43,22 +32,23 @@
       <Block id="section-demo" width="fluid">fluid</Block>
     </div>
   </Article>
+  <h3>Custom column widths</h3>
   <Article
     id="article-column-widths-demo"
     columnWidths={{
-      narrower: 310,
-      narrow: 450,
-      normal: 550,
+      narrower: 250,
+      narrow: 400,
+      normal: 500,
       wide: 675,
       wider: 1400,
     }}
   >
     <div class="article-boundaries custom">
-      <Block id="section-demo" width="narrower">narrower*</Block>
-      <Block id="section-demo" width="narrow">narrow*</Block>
-      <Block id="section-demo">normal*</Block>
-      <Block id="section-demo" width="wide">wide*</Block>
-      <Block id="section-demo" width="wider">wider*</Block>
+      <Block id="section-demo" width="narrower">narrower</Block>
+      <Block id="section-demo" width="narrow">narrow</Block>
+      <Block id="section-demo">normal</Block>
+      <Block id="section-demo" width="wide">wide</Block>
+      <Block id="section-demo" width="wider">wider</Block>
       <Block id="section-demo" width="widest">widest</Block>
       <Block id="section-demo" width="fluid">fluid</Block>
     </div>
@@ -66,6 +56,13 @@
 </Story>
 
 <style lang="scss">
+  h3 {
+    text-align: center;
+  }
+  :global(span.custom) {
+    color: rgb(211, 132, 123);
+    font-weight: 600;
+  }
   :global(#article-story-basic, #article-column-widths-demo) {
     width: calc(100% + 30px);
     margin-left: -15px;
@@ -93,21 +90,22 @@
     height: 50px;
     padding-left: 3px;
     color: white;
-    font-size: 12px;
+    font-size: 1rem;
   }
 
   div.demo-container {
     height: 300px;
     background: #ccc;
     position: relative;
-    font-size: 12px;
     .background-label {
+      font-size: 1.5rem;
       position: absolute;
-      bottom: 0;
-      left: 5px;
+      top: 40%;
+      left: 40%;
       color: #666;
     }
     .padding-label {
+      font-size: 1rem;
       position: absolute;
       top: 0;
       left: -17px;
diff --git a/src/components/Article/Article.svelte b/src/components/Article/Article.svelte
index df103673..ee8f8266 100644
--- a/src/components/Article/Article.svelte
+++ b/src/components/Article/Article.svelte
@@ -18,7 +18,7 @@
     /** Set to true for embeddables. */
     embedded?: boolean;
     /** Add an id to the article tag to target it with custom CSS. */
-    id?: string | null;
+    id?: string;
     /** ARIA role of the article */
     role?: string | null;
     /** Set custom widths for the normal, wide and wider column dimensions */
@@ -28,7 +28,7 @@
 
   let {
     embedded = false,
-    id = null,
+    id = '',
     role = null,
     columnWidths = {
       narrower: 330,
diff --git a/src/components/Article/stories/docs/component.md b/src/components/Article/stories/docs/component.md
deleted file mode 100644
index 1ca1c688..00000000
--- a/src/components/Article/stories/docs/component.md
+++ /dev/null
@@ -1,13 +0,0 @@
-The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
-
-> 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
-
-```svelte
-<script>
-  import { Article } from '@reuters-graphics/graphics-components';
-</script>
-
-<Article>
-  <!-- The story stuff goes in here! -->
-</Article>
-```
diff --git a/src/components/Article/stories/docs/customWellWidths.md b/src/components/Article/stories/docs/customWellWidths.md
deleted file mode 100644
index feab9be3..00000000
--- a/src/components/Article/stories/docs/customWellWidths.md
+++ /dev/null
@@ -1,87 +0,0 @@
-The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:
-
-- `narrower` A bit narrower than narrow...
-- `narrow` A bit narrower than the text column
-- `normal` **The main width of the body text column**
-- `wide` A bit wider than the text column
-- `wider` A bit wider than wide...
-- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
-- `fluid` Fully edge-to-edge
-
-When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.
-
-> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
-
-```svelte
-<Article
-  columnWidths="{{
-    narrower: 310,
-    narrow: 450,
-    normal: 550,
-    wide: 675,
-    wider: 1400,
-  }}"
->
-  <Block width="narrower" />
-  <Block width="narrow" />
-  <Block width="normal" />
-  <Block width="wide" />
-  <Block width="wider" />
-  <Block width="widest" />
-  <Block width="fluid" />
-</Article>
-```
-
-If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
-
-```svelte
-<div class="my-special-container">
-  <!-- Stuffs... -->
-</div>
-
-<style lang="scss">
-  div.my-special-container {
-    max-width: var(--wide-column-width);
-  }
-</style>
-```
-
-... or you can make your component entirely configurable within the article well doing something like this:
-
-```svelte
-<script>
-  export let width = 'normal';
-</script>
-
-<div class="my-special-container {width}">
-  <!-- Stuffs... -->
-</div>
-
-<style lang="scss">
-  div.my-special-container {
-    max-width: var(--normal-column-width);
-    &.narrower {
-      max-width: var(--narrower-column-width);
-    }
-    &.narrow {
-      max-width: var(--narrow-column-width);
-    }
-    &.wide {
-      max-width: var(--wide-column-width);
-    }
-    &.wider {
-      max-width: var(--wider-column-width);
-    }
-    &.widest {
-      max-width: 100%;
-    }
-    &.fluid {
-      width: calc(100% + 30px);
-      margin-left: -15px;
-      max-width: none;
-    }
-  }
-</style>
-```
-
-Here's an example of how custom\* `columnWidths` can be used to change the article well columns:

From 221bb70a000be94b4daeddd9f1ba132141d68b6d Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 15:53:46 -0700
Subject: [PATCH 03/47] svelte 5 set up but before/after not quite working

---
 src/components/BeforeAfter/BeforeAfter.mdx    | 103 +++++++
 .../BeforeAfter/BeforeAfter.stories.svelte    |  51 ++--
 src/components/BeforeAfter/BeforeAfter.svelte | 256 +++++++++---------
 .../{stories => images}/myrne-after.jpg       | Bin
 .../{stories => images}/myrne-before.jpg      | Bin
 .../stories/docs/ariaDescriptions.md          |  35 ---
 .../BeforeAfter/stories/docs/component.md     |  15 -
 .../BeforeAfter/stories/docs/withOverlays.md  |  33 ---
 src/components/Byline/Byline.svelte           |  14 +-
 9 files changed, 258 insertions(+), 249 deletions(-)
 create mode 100644 src/components/BeforeAfter/BeforeAfter.mdx
 rename src/components/BeforeAfter/{stories => images}/myrne-after.jpg (100%)
 rename src/components/BeforeAfter/{stories => images}/myrne-before.jpg (100%)
 delete mode 100644 src/components/BeforeAfter/stories/docs/ariaDescriptions.md
 delete mode 100644 src/components/BeforeAfter/stories/docs/component.md
 delete mode 100644 src/components/BeforeAfter/stories/docs/withOverlays.md

diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
new file mode 100644
index 00000000..dfb459f8
--- /dev/null
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -0,0 +1,103 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BeforeAfterStories from './BeforeAfter.stories.svelte';
+
+<Meta of={BeforeAfterStories} />
+
+# BeforeAfter
+
+The `BeforeAfter` component shows a before-and-after comparison of an image.
+
+```svelte
+<script>
+  import { BeforeAfter } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // If using in the Graphics Kit
+</script>
+
+<BeforeAfter
+  beforeSrc={`${assets}/images/before-after/myrne-before.jpg`}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={`${assets}/images/before-after/myrne-after.jpg`}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+/>
+```
+
+<Canvas of={BeforeAfterStories.Demo} />
+
+## Using with overlays
+
+Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
+
+```svelte
+<BeforeAfter
+  beforeSrc={beforeImg}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={afterImg}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+>
+  <div slot="beforeOverlay" 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>
+  <div slot="afterOverlay" 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>
+  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+</BeforeAfter>
+
+<style lang="scss">
+  .overlay {
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
+    &.after {
+      text-align: right;
+    }
+    p {
+      color: #ffffff;
+    }
+  }
+</style>
+```
+
+<Canvas of={BeforeAfterStories.WithOverlays} />
+
+## Adding ARIA descriptions
+
+Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
+
+> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
+
+```svelte
+<BeforeAfter
+  beforeSrc={beforeImg}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={afterImg}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+>
+  <div slot="beforeOverlay" 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>
+  <div slot="afterOverlay" 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>
+  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+</BeforeAfter>
+
+<style lang="scss">
+  .overlay {
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
+    &.after {
+      text-align: right;
+    }
+    p {
+      color: #ffffff;
+    }
+  }
+</style>
+```
+
+<Canvas of={BeforeAfterStories.AriaDescriptions} />
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index d2f79821..4b4ed935 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -1,19 +1,10 @@
-<!-- @migration-task Error while migrating Svelte code: end is out of bounds -->
-<script context="module" lang="ts">
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import BeforeAfter from './BeforeAfter.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import withOverlaysDocs from './stories/docs/withOverlays.md?raw';
-  // @ts-ignore raw
-  import ariaDescriptionsDocs from './stories/docs/ariaDescriptions.md?raw';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Graphics/BeforeAfter',
     component: BeforeAfter,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       handleColour: { control: 'color' },
       width: {
@@ -21,39 +12,31 @@
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import beforeImg from './stories/myrne-before.jpg';
-  // @ts-ignore raw
-  import afterImg from './stories/myrne-after.jpg';
+  import beforeImg from './images/myrne-before.jpg';
+  import afterImg from './images/myrne-after.jpg';
 </script>
 
-<Template let:args>
-  <BeforeAfter {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     beforeSrc: beforeImg,
     beforeAlt:
       'Satellite image of Russian base at Myrne taken on July 7, 2020.',
     afterSrc: afterImg,
     afterAlt:
       'Satellite image of Russian base at Myrne taken on Oct. 20, 2020.',
-  }}"
+  }}
 />
 
-<Story name="With overlays" {...withStoryDocs(withOverlaysDocs)}>
+<Story name="With overlays" exportName="WithOverlays">
   <BeforeAfter
-    beforeSrc="{beforeImg}"
+    beforeSrc={beforeImg}
     beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-    afterSrc="{afterImg}"
+    afterSrc={afterImg}
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
     <div slot="beforeOverlay" class="overlay p-3 before">
@@ -81,19 +64,19 @@
   </style>
 </Story>
 
-<Story name="ARIA descriptions" {...withStoryDocs(ariaDescriptionsDocs)}>
+<Story name="ARIA descriptions" exportName="AriaDescriptions">
   <BeforeAfter
-    beforeSrc="{beforeImg}"
+    beforeSrc={beforeImg}
     beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-    afterSrc="{afterImg}"
+    afterSrc={afterImg}
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div let:description="{id}" slot="beforeOverlay" class="overlay p-3">
+    <div let:description={id} slot="beforeOverlay" class="overlay p-3">
       <p class="body-caption" {id}>
         On July 7, 2020, the base contained only a few transport vehicles.
       </p>
     </div>
-    <div let:description="{id}" slot="afterOverlay" class="overlay p-3">
+    <div let:description={id} slot="afterOverlay" class="overlay p-3">
       <!-- 👇 id can also be used on an element containing multiple text elements -->
       <div {id}>
         <p class="body-caption">
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index e6229af5..293bb582 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -1,73 +1,92 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) -->
 <script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
   import { throttle } from 'lodash-es';
-  import { onMount } from 'svelte';
+
   import Block from '../Block/Block.svelte';
-  import type { ContainerWidth } from '../@types/global';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import type { ContainerWidth } from '../@types/global';
 
-  /** Width of the chart within the text well. */
-  export let width: ContainerWidth = 'normal'; // options: wide, wider, widest, fluid
-  /** Height of the component */
-  export let height = 600;
-
-  /**
-   * If set, makes the height a ratio of the component's width.
-   * @type {number}
-   */
-  export let heightRatio: number | null = null;
-
-  /**
-   * Before image src
-   * @required
-   */
-  export let beforeSrc: string | null = null;
-  /**
-   * Before image altText
-   * @required
-   */
-  export let beforeAlt: string | null = null;
-  /**
-   * After image src
-   * @required
-   */
-  export let afterSrc: string | null = null;
-  /**
-   * After image altText
-   * @required
-   */
-  export let afterAlt: string | null = null;
-
-  /**
-   * Set a class to target with SCSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-
-  /** Drag handle colour */
-  export let handleColour = 'white';
-  /** Drag handle opacity */
-  export let handleInactiveOpacity = 0.9;
-  /** Margin at the edge of the image to stop dragging */
-  export let handleMargin = 20;
-  /** Percentage of the component width the handle will travel ona key press */
-  export let keyPressStep = 0.05;
-
-  /** Initial offset of the handle, between 0 and 1. */
-  export let offset = 0.5;
-
+  /** Helper function to generate a random 4-character string */
   const random4 = () =>
     Math.floor((1 + Math.random()) * 0x10000)
       .toString(16)
       .substring(1);
 
-  /**
-   * Add an ID to target with SCSS.
-   * @type {string}
-   */
-  export let id: string = 'before-after-' + random4() + random4();
+  interface Props {
+    /** Width of the chart within the text well. Options: wide, wider, widest, fluid */
+    width?: ContainerWidth;
+    /** Height of the component */
+    height?: number;
+    /**
+     * If set, makes the height a ratio of the component's width.
+     */
+    heightRatio?: number;
+    /**
+     * Before image source
+     */
+    beforeSrc: string;
+    /**
+     * Before image altText
+     */
+    beforeAlt: string;
+    /**
+     * After image source
+     */
+    afterSrc: string;
+    /**
+     * After image altText
+     */
+    afterAlt: string;
+    /**
+     * Class to target with SCSS.
+     */
+    class?: string;
+    /** Drag handle colour */
+    handleColour?: string;
+    /** Drag handle opacity */
+    handleInactiveOpacity?: number;
+    /** Margin at the edge of the image to stop dragging */
+    handleMargin?: number;
+    /** Percentage of the component width the handle will travel ona key press */
+    keyPressStep?: number;
+    /** Initial offset of the handle, between 0 and 1. */
+    offset?: number;
+    /** ID to target with SCSS. */
+    id?: string;
+    /**
+     * Optional snippet for a custom overlay for the before image.
+     */
+    beforeOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom overlay for the after image.
+     */
+    afterOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom caption.
+     */
+    caption?: Snippet;
+  }
+
+  let {
+    width = 'normal',
+    height = 600,
+    heightRatio,
+    beforeSrc,
+    beforeAlt,
+    afterSrc,
+    afterAlt,
+    class: cls = '',
+    handleColour = 'white',
+    handleInactiveOpacity = 0.9,
+    handleMargin = 20,
+    keyPressStep = 0.05,
+    offset = 0.5,
+    id = 'before-after-' + random4() + random4(),
+    beforeOverlay,
+    afterOverlay,
+    caption,
+  }: Props = $props();
 
   let img: HTMLImageElement;
   let imgOffset: DOMRect | null = null;
@@ -77,21 +96,23 @@
   let isFocused = false;
   let containerWidth: number;
 
-  $: containerHeight =
-    containerWidth && heightRatio ? containerWidth * heightRatio : height;
+  let containerHeight = $derived(
+    containerWidth && heightRatio ? containerWidth * heightRatio : height
+  );
 
-  $: w = (imgOffset && imgOffset.width) || 0;
-  $: x = w * offset;
-  $: figStyle = `width:100%;height:${containerHeight}px;`;
-  $: imgStyle = 'width:100%;height:100%;';
-  $: beforeOverlayClip =
-    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
+  let w = $derived((imgOffset && imgOffset.width) || 0);
+  let x = $derived(w * offset);
+  let figStyle = $derived(`width:100%;height:${containerHeight}px;`);
+  const imgStyle = 'width:100%;height:100%;';
+  let beforeOverlayClip = $derived(
+    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0
+  );
 
-  const onFocus = () => (isFocused = true);
-  const onBlur = () => (isFocused = false);
+  const onfocus = () => (isFocused = true);
+  const onblur = () => (isFocused = false);
   const handleKeyDown = (e: KeyboardEvent) => {
     if (!isFocused) return;
-    const { keyCode } = e;
+    const { keyCode } = e; // DEPRECATED, change to key or code tk
     const margin = handleMargin / w;
     if (keyCode === 39) {
       offset = Math.min(1 - margin, offset + keyPressStep);
@@ -134,14 +155,11 @@
     sliding = true;
     move(e);
   };
+
   const end = () => {
     sliding = false;
   };
 
-  if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
-    console.warn('Missing required src or alt props for BeforeAfter component');
-  }
-
   onMount(() => {
     // This is necessary b/c on:load doesn't reliably fire on the image...
     const interval = setInterval(() => {
@@ -152,93 +170,83 @@
 </script>
 
 <svelte:window
-  on:touchmove="{move}"
-  on:touchend="{end}"
-  on:mousemove="{move}"
-  on:mouseup="{end}"
-  on:resize="{throttle(resize, 100)}"
-  on:keydown="{handleKeyDown}"
+  on:touchmove={move}
+  on:touchend={end}
+  on:mousemove={move}
+  on:mouseup={end}
+  on:resize={throttle(resize, 100)}
+  on:keydown={handleKeyDown}
 />
 
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
   <Block {width} {id} class="photo before-after fmy-6 {cls}">
-    <div
-      style="height: {containerHeight}px;"
-      bind:clientWidth="{containerWidth}"
-    >
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
+      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <figure
-        style="{figStyle}"
+        style={figStyle}
         class="before-after-container relative overflow-hidden my-0 mx-auto"
-        on:touchstart="{start}"
-        on:mousedown="{start}"
-        bind:this="{figure}"
-        aria-labelledby="{($$slots.caption && `${id}-caption`) || undefined}"
+        ontouchstart={start}
+        onmousedown={start}
+        bind:this={figure}
+        aria-labelledby={(caption && `${id}-caption`) || undefined}
       >
+        <!-- onmousedown={start || (e) => e.preventDefault()} -->
         <img
-          bind:this="{img}"
-          src="{afterSrc}"
-          alt="{afterAlt}"
-          on:load="{measureLoadedImage}"
-          on:mousedown|preventDefault
-          style="{imgStyle}"
+          bind:this={img}
+          src={afterSrc}
+          alt={afterAlt}
+          onload={measureLoadedImage}
+          onmousedown={start}
+          style={imgStyle}
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby="{($$slots.beforeOverlay && `${id}-before`) ||
-            undefined}"
+          aria-describedby={(beforeOverlay && `${id}-before`) || undefined}
         />
-
+        <!-- onmousedown={start || (e) => e.preventDefault()} -->
         <img
-          src="{beforeSrc}"
-          alt="{beforeAlt}"
-          on:mousedown|preventDefault
+          src={beforeSrc}
+          alt={beforeAlt}
+          onmousedown={start}
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby="{($$slots.afterOverlay && `${id}-after`) ||
-            undefined}"
+          aria-describedby={(afterOverlay && `${id}-after`) || undefined}
         />
-        {#if $$slots.beforeOverlay}
+        {#if beforeOverlay}
           <div
             id="image-before-label"
             class="overlay-container before absolute"
-            bind:clientWidth="{beforeOverlayWidth}"
+            bind:clientWidth={beforeOverlayWidth}
             style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
           >
             <!-- Overlay for before image -->
-            <slot
-              name="beforeOverlay"
-              description="{`${id}-before-description`}"
-            />
+            {@render beforeOverlay()}
           </div>
         {/if}
-        {#if $$slots.afterOverlay}
+        {#if afterOverlay}
           <div id="image-after-label" class="overlay-container after absolute">
             <!-- Overlay for after image -->
-            <slot
-              name="afterOverlay"
-              description="{`${id}-after-description`}"
-            />
+            {@render afterOverlay()}
           </div>
         {/if}
         <div
           tabindex="0"
           role="slider"
-          aria-valuenow="{Math.round(offset * 100)}"
+          aria-valuenow={Math.round(offset * 100)}
           class="handle"
           style="left: calc({offset *
             100}% - 20px); --before-after-handle-colour: {handleColour}; --before-after-handle-inactive-opacity: {handleInactiveOpacity};"
-          on:focus="{onFocus}"
-          on:blur="{onBlur}"
+          {onfocus}
+          {onblur}
         >
           <div class="arrow-left"></div>
           <div class="arrow-right"></div>
         </div>
       </figure>
     </div>
-    {#if $$slots.caption}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside class="before-after-caption mx-auto" id="{`${id}-caption`}">
+    {#if caption}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <aside class="before-after-caption mx-auto" id={`${id}-caption`}>
           <!-- Caption for image credits -->
-          <slot name="caption" />
+          {@render caption()}
         </aside>
       </PaddingReset>
     {/if}
@@ -246,7 +254,7 @@
 {/if}
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../scss/mixins' as mixins;
 
   figure.before-after-container {
     box-sizing: content-box;
@@ -339,7 +347,7 @@
 
   aside.before-after-caption {
     :global(p) {
-      @include body-caption;
+      @include mixins.body-caption;
     }
   }
 </style>
diff --git a/src/components/BeforeAfter/stories/myrne-after.jpg b/src/components/BeforeAfter/images/myrne-after.jpg
similarity index 100%
rename from src/components/BeforeAfter/stories/myrne-after.jpg
rename to src/components/BeforeAfter/images/myrne-after.jpg
diff --git a/src/components/BeforeAfter/stories/myrne-before.jpg b/src/components/BeforeAfter/images/myrne-before.jpg
similarity index 100%
rename from src/components/BeforeAfter/stories/myrne-before.jpg
rename to src/components/BeforeAfter/images/myrne-before.jpg
diff --git a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md b/src/components/BeforeAfter/stories/docs/ariaDescriptions.md
deleted file mode 100644
index 7e87edd3..00000000
--- a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md
+++ /dev/null
@@ -1,35 +0,0 @@
-Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
-
-> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
-
-```svelte
-  <BeforeAfter
-    beforeSrc="{beforeImg}"
-    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-    afterSrc="{afterImg}"
-    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
-  >
-    <div slot="beforeOverlay" 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>
-    <div slot="afterOverlay" 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>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-  </BeforeAfter>
-
-  <style lang="scss">
-    .overlay {
-      background: rgba(0, 0, 0, 0.45);
-      max-width: 350px;
-      &.after {
-        text-align: right;
-      }
-      p {
-        color: #ffffff;
-      }
-    }
-  </style>
-```
diff --git a/src/components/BeforeAfter/stories/docs/component.md b/src/components/BeforeAfter/stories/docs/component.md
deleted file mode 100644
index 6998143a..00000000
--- a/src/components/BeforeAfter/stories/docs/component.md
+++ /dev/null
@@ -1,15 +0,0 @@
-A before and after image comparison component.
-
-```svelte
-<script>
-  import { BeforeAfter } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // If using in the Graphics Kit
-</script>
-
-<BeforeAfter
-  beforeSrc="{`${assets}/images/before-after/myrne-before.jpg`}"
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{`${assets}/images/before-after/myrne-after.jpg`}"
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
-/>
-```
diff --git a/src/components/BeforeAfter/stories/docs/withOverlays.md b/src/components/BeforeAfter/stories/docs/withOverlays.md
deleted file mode 100644
index 4a6028d6..00000000
--- a/src/components/BeforeAfter/stories/docs/withOverlays.md
+++ /dev/null
@@ -1,33 +0,0 @@
-Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
-
-```svelte
-<BeforeAfter
-  beforeSrc="{beforeImg}"
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc="{afterImg}"
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
->
-  <div slot="beforeOverlay" 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>
-  <div slot="afterOverlay" 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>
-  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-</BeforeAfter>
-
-<style lang="scss">
-  .overlay {
-    background: rgba(0, 0, 0, 0.45);
-    max-width: 350px;
-    &.after {
-      text-align: right;
-    }
-    p {
-      color: #ffffff;
-    }
-  }
-</style>
-```
diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index 62b1ff5d..37050af2 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -17,12 +17,10 @@
     publishTime: string;
     /**
      * Update time as a datetime string.
-     * @type {string}
      */
     updateTime: string;
     /**
      * Alignment of the byline.
-     * @type {string}
      */
     align?: 'left' | 'center';
     /**
@@ -42,16 +40,16 @@
     /**
      * Optional snippet for a custom byline.
      */
-    byline?: Snippet | null;
+    byline?: Snippet;
     /**
      * Optional snippet for a custom published dateline.
      */
     // Specify that this prop should have the type of a Svelte snippet, i.e. basic html
-    published?: Snippet | null;
+    published?: Snippet;
     /**
      * Optional snippet for a custom updated dateline.
      */
-    updated?: Snippet | null;
+    updated?: Snippet;
   }
 
   let {
@@ -65,9 +63,9 @@
       const authorSlug = slugify(author.trim(), { lower: true });
       return `https://www.reuters.com/authors/${authorSlug}/`;
     },
-    byline = null,
-    published = null,
-    updated = null,
+    byline,
+    published,
+    updated,
   }: Props = $props();
 
   let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');

From 5834fd30082bbdd749359448d7719731e4aedfd8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 16:22:31 -0700
Subject: [PATCH 04/47] component working now, need sanity check for other
 svelte 5 updates

---
 .../BeforeAfter/BeforeAfter.stories.svelte    | 50 +++++++++++--------
 src/components/BeforeAfter/BeforeAfter.svelte | 26 ++++++----
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 4b4ed935..5ba7b736 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -39,15 +39,21 @@
     afterSrc={afterImg}
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div slot="beforeOverlay" 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>
-    <div slot="afterOverlay" 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>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+    {#snippet beforeOverlay()}
+      <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">
+        <p class="h4 font-bold">Oct. 20, 2020</p>
+        <p class="body-note">But then forces built up.</p>
+      </div>
+    {/snippet}
+    {#snippet caption()}
+      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
   </BeforeAfter>
 
   <style lang="scss">
@@ -71,15 +77,16 @@
     afterSrc={afterImg}
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
-    <div let:description={id} slot="beforeOverlay" class="overlay p-3">
-      <p class="body-caption" {id}>
-        On July 7, 2020, the base contained only a few transport vehicles.
-      </p>
-    </div>
-    <div let:description={id} slot="afterOverlay" class="overlay p-3">
-      <!-- 👇 id can also be used on an element containing multiple text elements -->
-      <div {id}>
-        <p class="body-caption">
+    {#snippet beforeOverlay()}
+      <div let:description={id} class="overlay p-3">
+        <p class="body-caption" {id}>
+          On July 7, 2020, the base contained only a few transport vehicles.
+        </p>
+      </div>
+    {/snippet}
+    {#snippet afterOverlay()}
+      <div let:description={id} class="overlay p-3">
+        <p class="body-caption" {id}>
           But by October, tanks and artillery could be seen.
         </p>
         <p class="body-caption">
@@ -87,9 +94,12 @@
           based here.
         </p>
       </div>
-    </div>
-    <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
+    {#snippet caption()}
+      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
   </BeforeAfter>
+
   <style lang="scss">
     div.overlay {
       max-width: 250px;
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 293bb582..a97a33a4 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -88,19 +88,23 @@
     caption,
   }: Props = $props();
 
-  let img: HTMLImageElement;
-  let imgOffset: DOMRect | null = null;
+  /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
+   */
+  let img: HTMLImageElement | undefined = $state(undefined);
+
+  /** Defaults with an empty DOMRect with all values set to 0 */
+  let imgOffset: DOMRect = $state(new DOMRect());
   let sliding = false;
-  let figure: HTMLElement;
-  let beforeOverlayWidth = 0;
+  let figure: HTMLElement | undefined = $state(undefined);
+  let beforeOverlayWidth = $state(0);
   let isFocused = false;
-  let containerWidth: number;
+  let containerWidth: number = $state(0); // check if this should be undefined
 
   let containerHeight = $derived(
     containerWidth && heightRatio ? containerWidth * heightRatio : height
   );
 
-  let w = $derived((imgOffset && imgOffset.width) || 0);
+  let w = $derived(imgOffset.width);
   let x = $derived(w * offset);
   let figStyle = $derived(`width:100%;height:${containerHeight}px;`);
   const imgStyle = 'width:100%;height:100%;';
@@ -110,13 +114,15 @@
 
   const onfocus = () => (isFocused = true);
   const onblur = () => (isFocused = false);
+
+  /** Handle left or right arrows being pressed */
   const handleKeyDown = (e: KeyboardEvent) => {
     if (!isFocused) return;
-    const { keyCode } = e; // DEPRECATED, change to key or code tk
+    const { code, key } = e;
     const margin = handleMargin / w;
-    if (keyCode === 39) {
+    if (code === 'ArrowRight' || key === 'ArrowRight') {
       offset = Math.min(1 - margin, offset + keyPressStep);
-    } else if (keyCode === 37) {
+    } else if (code === 'ArrowLeft' || key === 'ArrowLeft') {
       offset = Math.max(0 + margin, offset - keyPressStep);
     }
   };
@@ -129,6 +135,7 @@
     measureImage();
   };
 
+  /** This can probably get fixed?? */
   const measureLoadedImage = (e: Event) => {
     if (e.type === 'load') {
       imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
@@ -182,6 +189,7 @@
   <Block {width} {id} class="photo before-after fmy-6 {cls}">
     <div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+
       <figure
         style={figStyle}
         class="before-after-container relative overflow-hidden my-0 mx-auto"

From bf1415ea3cae4fa4c69a327ea5ac59522b0b27a6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 16:25:27 -0700
Subject: [PATCH 05/47] tweaks

---
 src/components/BeforeAfter/BeforeAfter.stories.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 5ba7b736..9994ba48 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -78,15 +78,15 @@
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
     {#snippet beforeOverlay()}
-      <div let:description={id} class="overlay p-3">
-        <p class="body-caption" {id}>
+      <div class="overlay p-3">
+        <p class="body-caption" id="aria-description-before">
           On July 7, 2020, the base contained only a few transport vehicles.
         </p>
       </div>
     {/snippet}
     {#snippet afterOverlay()}
-      <div let:description={id} class="overlay p-3">
-        <p class="body-caption" {id}>
+      <div class="overlay p-3">
+        <p class="body-caption" id="aria-description-after">
           But by October, tanks and artillery could be seen.
         </p>
         <p class="body-caption">

From 607f0af7fe49827c23017ba8b80a1f3bc176e525 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 10:50:46 -0700
Subject: [PATCH 06/47] a11y fixes

---
 .../BeforeAfter/BeforeAfter.stories.svelte    | 13 ++---
 src/components/BeforeAfter/BeforeAfter.svelte | 49 +++++++++----------
 src/utils/index.ts                            |  5 ++
 3 files changed, 33 insertions(+), 34 deletions(-)
 create mode 100644 src/utils/index.ts

diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 9994ba48..02a54187 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -3,7 +3,7 @@
   import BeforeAfter from './BeforeAfter.svelte';
 
   const { Story } = defineMeta({
-    title: 'Components/Graphics/BeforeAfter',
+    title: 'Components/Multimedia/BeforeAfter',
     component: BeforeAfter,
     argTypes: {
       handleColour: { control: 'color' },
@@ -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">
+      <div class="overlay p-3 before text-left">
         <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">
+      <div class="overlay p-3 after text-right">
         <p class="h4 font-bold">Oct. 20, 2020</p>
         <p class="body-note">But then forces built up.</p>
       </div>
@@ -60,9 +60,6 @@
     .overlay {
       background: rgba(0, 0, 0, 0.45);
       max-width: 350px;
-      &.after {
-        text-align: right;
-      }
       p {
         color: #ffffff;
       }
@@ -78,14 +75,14 @@
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
     {#snippet beforeOverlay()}
-      <div class="overlay p-3">
+      <div class="overlay p-3 text-left">
         <p class="body-caption" id="aria-description-before">
           On July 7, 2020, the base contained only a few transport vehicles.
         </p>
       </div>
     {/snippet}
     {#snippet afterOverlay()}
-      <div class="overlay p-3">
+      <div class="overlay p-3 text-right">
         <p class="body-caption" id="aria-description-after">
           But by October, tanks and artillery could be seen.
         </p>
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index a97a33a4..23621bfc 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -6,12 +6,7 @@
   import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
   import type { ContainerWidth } from '../@types/global';
-
-  /** Helper function to generate a random 4-character string */
-  const random4 = () =>
-    Math.floor((1 + Math.random()) * 0x10000)
-      .toString(16)
-      .substring(1);
+  import { random4 } from '../../utils/';
 
   interface Props {
     /** Width of the chart within the text well. Options: wide, wider, widest, fluid */
@@ -98,7 +93,7 @@
   let figure: HTMLElement | undefined = $state(undefined);
   let beforeOverlayWidth = $state(0);
   let isFocused = false;
-  let containerWidth: number = $state(0); // check if this should be undefined
+  let containerWidth: number = $state(0); // Defaults to 0
 
   let containerHeight = $derived(
     containerWidth && heightRatio ? containerWidth * heightRatio : height
@@ -112,6 +107,7 @@
     x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0
   );
 
+  /** Toggle `isFocused` */
   const onfocus = () => (isFocused = true);
   const onblur = () => (isFocused = false);
 
@@ -127,10 +123,12 @@
     }
   };
 
+  /** Measure image and set image offset */
   const measureImage = () => {
     if (img && img.complete) imgOffset = img.getBoundingClientRect();
   };
 
+  /** Reset image offset on resize */
   const resize = () => {
     measureImage();
   };
@@ -142,6 +140,7 @@
     }
   };
 
+  /** Move the slider */
   const move = (e: MouseEvent | TouchEvent) => {
     if (sliding && imgOffset) {
       const el =
@@ -158,11 +157,14 @@
       offset = x / w;
     }
   };
+
+  /** Starts the slider */
   const start = (e: MouseEvent | TouchEvent) => {
     sliding = true;
     move(e);
   };
 
+  /** Sets `sliding` to `false`*/
   const end = () => {
     sliding = false;
   };
@@ -177,46 +179,41 @@
 </script>
 
 <svelte:window
-  on:touchmove={move}
-  on:touchend={end}
-  on:mousemove={move}
-  on:mouseup={end}
-  on:resize={throttle(resize, 100)}
-  on:keydown={handleKeyDown}
+  ontouchmove={move}
+  ontouchend={end}
+  onmousemove={move}
+  onmouseup={end}
+  onresize={throttle(resize, 100)}
+  onkeydown={handleKeyDown}
 />
 
+<!-- Since we usually read these values from ArchieML, check that they exist -->
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
   <Block {width} {id} class="photo before-after fmy-6 {cls}">
     <div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
-      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-
-      <figure
+      <button
         style={figStyle}
         class="before-after-container relative overflow-hidden my-0 mx-auto"
         ontouchstart={start}
         onmousedown={start}
         bind:this={figure}
-        aria-labelledby={(caption && `${id}-caption`) || undefined}
+        aria-labelledby={(caption && `${id}-caption`) || ''}
       >
-        <!-- onmousedown={start || (e) => e.preventDefault()} -->
         <img
           bind:this={img}
           src={afterSrc}
           alt={afterAlt}
           onload={measureLoadedImage}
-          onmousedown={start}
           style={imgStyle}
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby={(beforeOverlay && `${id}-before`) || undefined}
+          aria-describedby={(beforeOverlay && `${id}-before`) || ''}
         />
-        <!-- onmousedown={start || (e) => e.preventDefault()} -->
         <img
           src={beforeSrc}
           alt={beforeAlt}
-          onmousedown={start}
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby={(afterOverlay && `${id}-after`) || undefined}
+          aria-describedby={(afterOverlay && `${id}-after`) || ''}
         />
         {#if beforeOverlay}
           <div
@@ -248,7 +245,7 @@
           <div class="arrow-left"></div>
           <div class="arrow-right"></div>
         </div>
-      </figure>
+      </button>
     </div>
     {#if caption}
       <PaddingReset containerIsFluid={width === 'fluid'}>
@@ -264,7 +261,7 @@
 <style lang="scss">
   @use '../../scss/mixins' as mixins;
 
-  figure.before-after-container {
+  button.before-after-container {
     box-sizing: content-box;
 
     img {
@@ -280,7 +277,7 @@
       user-select: none;
     }
     .overlay-container {
-      position: absolute;
+      top: 0;
       :global(:first-child) {
         margin-top: 0;
       }
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..c3e132f5
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,5 @@
+/** Helper function to generate a random 4-character string */
+export const random4 = () =>
+  Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);

From 36482a43131f467683fe7d1c5605cd38b60083f2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 12:12:06 -0700
Subject: [PATCH 07/47] cleaned up docs

---
 src/components/BeforeAfter/BeforeAfter.mdx    | 112 ++++++++++--------
 .../BeforeAfter/BeforeAfter.stories.svelte    |  43 +------
 src/components/BeforeAfter/BeforeAfter.svelte |  16 ++-
 3 files changed, 72 insertions(+), 99 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
index dfb459f8..41529395 100644
--- a/src/components/BeforeAfter/BeforeAfter.mdx
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -24,9 +24,46 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
 
 <Canvas of={BeforeAfterStories.Demo} />
 
-## Using with overlays
+## Using with ArchieML docs
 
-Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below.
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+
+type: before-after
+beforeSrc: images/before-after/myrne-before.jpg
+beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020.
+afterSrc: images/before-after/myrne-after.jpg
+afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `BeforeAfter` component.
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'before-after'}
+    <BeforeAfter
+      beforeSrc={`${assets}/${block.beforeSrc}`}
+      beforeAlt={block.beforeAlt}
+      afterSrc={`${assets}/${block.afterSrc}`}
+      afterAlt={block.afterAlt}
+    />
+  {/if}
+{/each}
+```
+
+<Canvas of={BeforeAfterStories.Demo} />
+
+## Adding text
+
+To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style these snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays).
+
+> 💡**NOTE:** The text in the overlays are used as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your before and after images. You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need.
 
 ```svelte
 <BeforeAfter
@@ -35,15 +72,26 @@ Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to
   afterSrc={afterImg}
   afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
 >
-  <div slot="beforeOverlay" 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>
-  <div slot="afterOverlay" 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>
-  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
+  <!-- Optional custom text overlay for the before image -->
+  {#snippet beforeOverlay()}
+    <div class="overlay p-3 before text-left">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom text overlay for the after image -->
+  {#snippet afterOverlay()}
+    <div class="overlay p-3 after text-right">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom caption for both images -->
+  {#snippet caption()}
+    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+  {/snippet}
 </BeforeAfter>
 
 <style lang="scss">
@@ -60,44 +108,4 @@ Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to
 </style>
 ```
 
-<Canvas of={BeforeAfterStories.WithOverlays} />
-
-## Adding ARIA descriptions
-
-Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props).
-
-> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need.
-
-```svelte
-<BeforeAfter
-  beforeSrc={beforeImg}
-  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc={afterImg}
-  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
->
-  <div slot="beforeOverlay" 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>
-  <div slot="afterOverlay" 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>
-  <p slot="caption">Photos by MAXAR Technologies, 2021.</p>
-</BeforeAfter>
-
-<style lang="scss">
-  .overlay {
-    background: rgba(0, 0, 0, 0.45);
-    max-width: 350px;
-    &.after {
-      text-align: right;
-    }
-    p {
-      color: #ffffff;
-    }
-  }
-</style>
-```
-
-<Canvas of={BeforeAfterStories.AriaDescriptions} />
+<Canvas of={BeforeAfterStories.WithText} />
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
index 02a54187..74ef3be3 100644
--- a/src/components/BeforeAfter/BeforeAfter.stories.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -32,7 +32,7 @@
   }}
 />
 
-<Story name="With overlays" exportName="WithOverlays">
+<Story name="With text" exportName="WithText">
   <BeforeAfter
     beforeSrc={beforeImg}
     beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
@@ -66,44 +66,3 @@
     }
   </style>
 </Story>
-
-<Story name="ARIA descriptions" exportName="AriaDescriptions">
-  <BeforeAfter
-    beforeSrc={beforeImg}
-    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-    afterSrc={afterImg}
-    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
-  >
-    {#snippet beforeOverlay()}
-      <div class="overlay p-3 text-left">
-        <p class="body-caption" id="aria-description-before">
-          On July 7, 2020, the base contained only a few transport vehicles.
-        </p>
-      </div>
-    {/snippet}
-    {#snippet afterOverlay()}
-      <div class="overlay p-3 text-right">
-        <p class="body-caption" id="aria-description-after">
-          But by October, tanks and artillery could be seen.
-        </p>
-        <p class="body-caption">
-          In total, over 50 pieces of heavy machinery and 200 personnel are now
-          based here.
-        </p>
-      </div>
-    {/snippet}
-    {#snippet caption()}
-      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
-    {/snippet}
-  </BeforeAfter>
-
-  <style lang="scss">
-    div.overlay {
-      max-width: 250px;
-      background: rgba(0, 0, 0, 0.45);
-      p {
-        color: #ffffff;
-      }
-    }
-  </style>
-</Story>
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 23621bfc..f7f8b976 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -197,7 +197,7 @@
         ontouchstart={start}
         onmousedown={start}
         bind:this={figure}
-        aria-labelledby={(caption && `${id}-caption`) || ''}
+        aria-labelledby={(caption && `${id}-caption-description`) || undefined}
       >
         <img
           bind:this={img}
@@ -206,18 +206,21 @@
           onload={measureLoadedImage}
           style={imgStyle}
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby={(beforeOverlay && `${id}-before`) || ''}
+          aria-describedby={(beforeOverlay && `${id}-before-description`) ||
+            undefined}
         />
+
         <img
           src={beforeSrc}
           alt={beforeAlt}
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby={(afterOverlay && `${id}-after`) || ''}
+          aria-describedby={(afterOverlay && `${id}-after-description`) ||
+            undefined}
         />
         {#if beforeOverlay}
           <div
-            id="image-before-label"
+            id="{id}-before-description"
             class="overlay-container before absolute"
             bind:clientWidth={beforeOverlayWidth}
             style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
@@ -227,7 +230,10 @@
           </div>
         {/if}
         {#if afterOverlay}
-          <div id="image-after-label" class="overlay-container after absolute">
+          <div
+            id="{id}-after-description"
+            class="overlay-container after absolute"
+          >
             <!-- Overlay for after image -->
             {@render afterOverlay()}
           </div>

From 3ddd21bced3912fb3d857e1582ec537e4d41a1d0 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 12:23:37 -0700
Subject: [PATCH 08/47] tweak

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

diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
index 41529395..3ce6f1e3 100644
--- a/src/components/BeforeAfter/BeforeAfter.mdx
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -61,7 +61,7 @@ afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
 
 ## Adding text
 
-To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style these snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays).
+To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style the snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays).
 
 > 💡**NOTE:** The text in the overlays are used as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your before and after images. You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need.
 

From 29c18fc64f4608586105bc366ed8ded17623e506 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 12:31:47 -0700
Subject: [PATCH 09/47] fixes typo on aria-labelledby

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

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index f7f8b976..d212da7a 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -197,7 +197,7 @@
         ontouchstart={start}
         onmousedown={start}
         bind:this={figure}
-        aria-labelledby={(caption && `${id}-caption-description`) || undefined}
+        aria-labelledby={(caption && `${id}-caption`) || undefined}
       >
         <img
           bind:this={img}

From 6d2a4af1c602b0d42941d915fc8fb3c3e165c091 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 12:37:50 -0700
Subject: [PATCH 10/47] cleanup

---
 src/components/BeforeAfter/BeforeAfter.svelte | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index d212da7a..61dfce6e 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -1,6 +1,6 @@
 <!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) -->
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
   import { throttle } from 'lodash-es';
 
   import Block from '../Block/Block.svelte';
@@ -133,7 +133,7 @@
     measureImage();
   };
 
-  /** This can probably get fixed?? */
+  /** Measure image and set image offset on load */
   const measureLoadedImage = (e: Event) => {
     if (e.type === 'load') {
       imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
@@ -169,13 +169,14 @@
     sliding = false;
   };
 
-  onMount(() => {
-    // This is necessary b/c on:load doesn't reliably fire on the image...
-    const interval = setInterval(() => {
-      if (imgOffset) clearInterval(interval);
-      if (img && img.complete && !imgOffset) measureImage();
-    }, 50);
-  });
+  /** @TODO - Double check if this onMount is still necessary */
+  // onMount(() => {
+  //   // This is necessary b/c on:load doesn't reliably fire on the image...
+  //   const interval = setInterval(() => {
+  //     if (imgOffset) clearInterval(interval);
+  //     if (img && img.complete && !imgOffset) measureImage();
+  //   }, 50);
+  // });
 </script>
 
 <svelte:window

From 6789b4b92f69e093fcf5238e9113a9c6b5ae9453 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 12:41:58 -0700
Subject: [PATCH 11/47] adds warning and notes

---
 src/components/BeforeAfter/BeforeAfter.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 61dfce6e..5f59e714 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -169,6 +169,11 @@
     sliding = false;
   };
 
+  /** Keep this warning since these values are often read from an ArchieML doc, which will not trigger typescript errors even if required values don't exist */
+  if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
+    console.warn('Missing required src or alt props for BeforeAfter component');
+  }
+
   /** @TODO - Double check if this onMount is still necessary */
   // onMount(() => {
   //   // This is necessary b/c on:load doesn't reliably fire on the image...

From 8de33b64619055f2efa96df2204828346c164761 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 12:46:59 -0700
Subject: [PATCH 12/47] fixes aria desc/label handling

---
 src/components/BeforeAfter/BeforeAfter.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 5f59e714..a4543746 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -203,7 +203,7 @@
         ontouchstart={start}
         onmousedown={start}
         bind:this={figure}
-        aria-labelledby={(caption && `${id}-caption`) || undefined}
+        aria-labelledby={caption ? `${id}-caption` : undefined}
       >
         <img
           bind:this={img}
@@ -212,8 +212,9 @@
           onload={measureLoadedImage}
           style={imgStyle}
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby={(beforeOverlay && `${id}-before-description`) ||
-            undefined}
+          aria-describedby={beforeOverlay ?
+            `${id}-before-description`
+          : undefined}
         />
 
         <img
@@ -221,8 +222,9 @@
           alt={beforeAlt}
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby={(afterOverlay && `${id}-after-description`) ||
-            undefined}
+          aria-describedby={afterOverlay ?
+            `${id}-after-description`
+          : undefined}
         />
         {#if beforeOverlay}
           <div

From b56fc64b968f33927ea1cbd523b633ab87a555ae Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 13:15:58 -0700
Subject: [PATCH 13/47] adds label for button

---
 src/components/BeforeAfter/BeforeAfter.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index a4543746..b71930b6 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -61,6 +61,8 @@
      * Optional snippet for a custom caption.
      */
     caption?: Snippet;
+    /** Custom ARIA label language to label the slider. */
+    sliderAriaLabel?: string;
   }
 
   let {
@@ -81,6 +83,7 @@
     beforeOverlay,
     afterOverlay,
     caption,
+    sliderAriaLabel = 'Stacked before and after images with an adjustable slider',
   }: Props = $props();
 
   /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
@@ -203,7 +206,7 @@
         ontouchstart={start}
         onmousedown={start}
         bind:this={figure}
-        aria-labelledby={caption ? `${id}-caption` : undefined}
+        aria-label={sliderAriaLabel}
       >
         <img
           bind:this={img}
@@ -364,7 +367,7 @@
     }
   }
 
-  aside.before-after-caption {
+  .before-after-caption {
     :global(p) {
       @include mixins.body-caption;
     }

From 442b00989e01042cfbfa720076b6d8b8504562fd Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 13:17:45 -0700
Subject: [PATCH 14/47] renames to ariaLabel

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

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index b71930b6..c3a8dc62 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -61,8 +61,8 @@
      * Optional snippet for a custom caption.
      */
     caption?: Snippet;
-    /** Custom ARIA label language to label the slider. */
-    sliderAriaLabel?: string;
+    /** Custom ARIA label language to label the component. */
+    ariaLabel?: string;
   }
 
   let {
@@ -83,7 +83,7 @@
     beforeOverlay,
     afterOverlay,
     caption,
-    sliderAriaLabel = 'Stacked before and after images with an adjustable slider',
+    ariaLabel = 'Stacked before and after images with an adjustable slider',
   }: Props = $props();
 
   /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
@@ -206,7 +206,7 @@
         ontouchstart={start}
         onmousedown={start}
         bind:this={figure}
-        aria-label={sliderAriaLabel}
+        aria-label={ariaLabel}
       >
         <img
           bind:this={img}

From 08e088e707f444814b535818abf17d1bd310fb38 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 13 Mar 2025 13:57:49 -0700
Subject: [PATCH 15/47] removes demo

---
 src/components/Analytics/Analytics.stories.svelte | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/Analytics/Analytics.stories.svelte b/src/components/Analytics/Analytics.stories.svelte
index bbb7031f..cf9c24a1 100644
--- a/src/components/Analytics/Analytics.stories.svelte
+++ b/src/components/Analytics/Analytics.stories.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import { defineMeta, type Args } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Analytics from './Analytics.svelte';
 
   const { Story } = defineMeta({
@@ -8,15 +8,10 @@
   });
 </script>
 
-{#snippet template(args: Args<typeof Story>)}
-  <Analytics {...args} />
-  <div>Nothing to see here</div>
-{/snippet}
-
 <Story
   name="Demo"
+  tags={['!autodocs', '!dev']}
   args={{
     authors: [{ name: 'Jane Doe' }, { name: 'John Doe' }],
   }}
-  children={template}
 />

From cfeb4a6de27e7eeb12ce42388c999483100d82d2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 17 Mar 2025 11:31:51 -0700
Subject: [PATCH 16/47] set up block docs

---
 .../{stories/docs/snapWidths.md => Block.mdx} | 48 ++++++++++-
 src/components/Block/Block.stories.svelte     | 84 ++++++++-----------
 .../Block/stories/docs/component.md           | 15 ----
 .../Block/stories/docs/customLayouts.md       | 13 ---
 4 files changed, 80 insertions(+), 80 deletions(-)
 rename src/components/Block/{stories/docs/snapWidths.md => Block.mdx} (54%)
 delete mode 100644 src/components/Block/stories/docs/component.md
 delete mode 100644 src/components/Block/stories/docs/customLayouts.md

diff --git a/src/components/Block/stories/docs/snapWidths.md b/src/components/Block/Block.mdx
similarity index 54%
rename from src/components/Block/stories/docs/snapWidths.md
rename to src/components/Block/Block.mdx
index cd9135f5..93f7619c 100644
--- a/src/components/Block/stories/docs/snapWidths.md
+++ b/src/components/Block/Block.mdx
@@ -1,9 +1,51 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BlockStories from './Block.stories.svelte';
+
+<Meta of={BlockStories} />
+
+# Block
+
+The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
+
+Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
+
+> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
+
+```svelte
+<script>
+  import { Block } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="normal">
+  <!-- Your stuff for this block -->
+</Block>
+```
+
+## Custom layouts
+
+Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
+
+If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
+
+```svelte
+<Block width="fluid">
+  <div class="my-radical-container">
+    <!-- Now, you have full control! -->
+  </div>
+</Block>
+```
+
+The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+
+## Snap widths
+
 Normally, `Block` containers resize fluidly below the original `width`. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.
 
 You can use the `snap` prop to force the container to snap to each block width successively as the window sizes down.
 
 ```svelte
-<Block width="wider" snap="{true}">
+<Block width="wider" snap={true}>
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -12,7 +54,7 @@ If you want to skip certain block widths entirely, you can add one or more class
 
 ```svelte
 <!-- Will skip wide and go straight to normal column width on resize. -->
-<Block width="wider" snap="{true}" class="skip-wide">
+<Block width="wider" snap={true} class="skip-wide">
   <!-- Your stuff for this block -->
 </Block>
 ```
@@ -28,7 +70,7 @@ Snap width breakpoints are hard-coded to the default article well column widths,
 Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
 
 ```svelte
-<Block width="wider" snap="{true}" class="custom-blocks">
+<Block width="wider" snap={true} class="custom-blocks">
   <!-- Your stuff for this block -->
 </Block>
 
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index a13a0411..a73274dc 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -1,19 +1,11 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import customLayoutsDocs from './stories/docs/customLayouts.md?raw';
-  // @ts-ignore raw
-  import snapWidthsDocs from './stories/docs/snapWidths.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Block from './Block.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page layout/Block',
     component: Block,
-    ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       width: {
         control: 'select',
@@ -28,35 +20,29 @@
         ],
       },
     },
-  };
+  });
 </script>
 
+<!-- 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
   import Article from '../Article/Article.svelte';
-</script>
+</script> -->
 
-<Template >
-  {#snippet children({ args })}
-    <Article id="block-demo-article">
-      <div class="article-boundaries">
-        <div class="label">Article</div>
-        <Block {...args}>
-          <div class="label">Block</div>
-        </Block>
-      </div>
-    </Article>
-  {/snippet}
-</Template>
+<!-- 
+{#snippet children({ args })}
+  <Article id="block-demo-article">
+    <div class="article-boundaries">
+      <div class="label">Article</div>
+      <Block {...args}>
+        <div class="label">Block</div>
+      </Block>
+    </div>
+  </Article>
+{/snippet} -->
 
-<Story
-  name="Default"
-  args="{{
-    width: 'normal',
-  }}"
-/>
+<Story name="Demo" />
 
-<Story name="Custom layouts" {...withStoryDocs(customLayoutsDocs)}>
+<Story name="Custom layout" exportName="CustomLayout">
   <Block width="fluid">
     <!-- Enter bootstrap grid! -->
     <div id="block-flex-example">
@@ -73,51 +59,51 @@
   </Block>
 </Story>
 
-<Story name="Snap widths" {...withStoryDocs(snapWidthsDocs)}>
+<!-- 
+<Story name="Snap widths">
   <Article id="block-demo-article">
     <div class="article-boundaries">
       <div class="label">Article</div>
-      <Block width="narrower" snap="{true}" class="block-snap-widths-demo"
+      <Block width="narrower" snap={true} class="block-snap-widths-demo"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" class="block-snap-widths-demo"
+      <Block width="narrow" snap={true} class="block-snap-widths-demo"
         >narrow</Block
       >
-      <Block width="normal" snap="{true}" class="block-snap-widths-demo"
+      <Block width="normal" snap={true} class="block-snap-widths-demo"
         >normal</Block
       >
-      <Block width="wide" snap="{true}" class="block-snap-widths-demo"
-        >wide</Block
+      <Block width="wide" snap={true} class="block-snap-widths-demo">wide</Block
       >
-      <Block width="wider" snap="{true}" class="block-snap-widths-demo"
+      <Block width="wider" snap={true} class="block-snap-widths-demo"
         >wider</Block
       >
-      <Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
+      <Block width="narrower" snap={true} class="block-snap-widths-demo even"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
+      <Block width="narrow" snap={true} class="block-snap-widths-demo even"
         >narrow</Block
       >
       <Block
         width="normal"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-narrow"
         >normal.skip-narrow</Block
       >
       <Block
         width="wide"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-normal skip-narrow"
         >wide.skip-normal.skip-narrow</Block
       >
       <Block
         width="wider"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
       >
     </div>
   </Article>
-</Story>
+</Story> -->
 
 <style lang="scss">
   :global(#block-demo-article) {
@@ -145,9 +131,9 @@
     background: rgb(211, 132, 123);
   }
   :global(
-      #block-demo-article .label,
-      #block-demo-article div.article-block.block-snap-widths-demo
-    ) {
+    #block-demo-article .label,
+    #block-demo-article div.article-block.block-snap-widths-demo
+  ) {
     padding-left: 3px;
     color: white;
   }
diff --git a/src/components/Block/stories/docs/component.md b/src/components/Block/stories/docs/component.md
deleted file mode 100644
index d3ba7d87..00000000
--- a/src/components/Block/stories/docs/component.md
+++ /dev/null
@@ -1,15 +0,0 @@
-The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
-
-Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
-
-> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
-
-```svelte
-<script>
-  import { Block } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block width="normal">
-  <!-- Your stuff for this block -->
-</Block>
-```
diff --git a/src/components/Block/stories/docs/customLayouts.md b/src/components/Block/stories/docs/customLayouts.md
deleted file mode 100644
index 74342fdb..00000000
--- a/src/components/Block/stories/docs/customLayouts.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
-
-If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
-
-```svelte
-<Block width="fluid">
-  <div class="my-radical-container">
-    <!-- Now, you have full control! -->
-  </div>
-</Block>
-```
-
-The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

From ae9522ce5c07d3cbc0436d977097dae2dffb4bf8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 17 Mar 2025 14:00:58 -0700
Subject: [PATCH 17/47] finished docs

---
 src/components/Block/Block.mdx            |  53 ++++++---
 src/components/Block/Block.stories.svelte | 134 +++++++++++++++-------
 src/components/Block/Block.svelte         |  52 +++++----
 src/components/BodyText/BodyText.mdx      |   2 +-
 4 files changed, 156 insertions(+), 85 deletions(-)

diff --git a/src/components/Block/Block.mdx b/src/components/Block/Block.mdx
index 93f7619c..522fbfe6 100644
--- a/src/components/Block/Block.mdx
+++ b/src/components/Block/Block.mdx
@@ -6,37 +6,43 @@ import * as BlockStories from './Block.stories.svelte';
 
 # Block
 
-The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
+The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece. The contents of each block are rendered as [snippets](https://svelte.dev/docs/svelte/snippet).
 
-Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
+Blocks are stacked vertically within the well created by the [Article](./?path=/docs/components-page-layout-article--docs) component. They can have different widths on larger screens depending on the `width` prop.
 
-> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
+> 📌 Many of our other components already use the `Block` component internally. You'll usually only need to use it yourself if you're making something custom.
 
 ```svelte
 <script>
   import { Block } from '@reuters-graphics/graphics-components';
 </script>
 
-<Block width="normal">
-  <!-- Your stuff for this block -->
+<Block>
+  {#snippet content()}
+    <!-- Contents for this block goes here -->
+  {/snippet}
 </Block>
 ```
 
+<Canvas of={BlockStories.Demo} />
+
 ## Custom layouts
 
-Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
+Our article well is designed to provide a basic responsive layout for you, but it also lets you customise.
 
-If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
+The radical but easiest way to do this is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
+
+The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
 
 ```svelte
 <Block width="fluid">
   <div class="my-radical-container">
-    <!-- Now, you have full control! -->
+    <!-- Now, you have full control over layout! -->
   </div>
 </Block>
 ```
 
-The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+<Canvas of={BlockStories.CustomLayout} />
 
 ## Snap widths
 
@@ -46,35 +52,44 @@ You can use the `snap` prop to force the container to snap to each block width s
 
 ```svelte
 <Block width="wider" snap={true}>
-  <!-- Your stuff for this block -->
+  {#snippet content()}
+    <!-- Contents for this block -->
+  {/snippet}
 </Block>
 ```
 
+<Canvas of={BlockStories.SnapWidthsBasic} />
+
 If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`.
 
+> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
+
 ```svelte
 <!-- Will skip wide and go straight to normal column width on resize. -->
 <Block width="wider" snap={true} class="skip-wide">
-  <!-- Your stuff for this block -->
+  {#snippet content()}
+    <!-- Contents for this block -->
+  {/snippet}
 </Block>
 ```
 
-This is probably easier to see in action than explain in words, so resize the window to get a better picture of how it all works.
+This is probably easier to see in action than explain in words, so [resize the demo](./?path=/docs/components-page-layout-block--snap-skip-widths) to get a better picture of how it all works.
 
-> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
+## Using with custom column widths
 
-#### Using with custom column widths
+Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the [Article](./?path=/docs/components-page-layout-article--docs) component (**rare!**), you need to do a littie work to use this functionality.
 
-Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the `Article` tag (**rare!**), you can't use this functionality without a little extra work.
-
-Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
+Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Then define a few SCSS variables corresponding to your custom column widths, and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
 
 ```svelte
 <Block width="wider" snap={true} class="custom-blocks">
-  <!-- Your stuff for this block -->
+  {#snippet content()}
+    <!-- Contents for this block -->
+  {/snippet}
 </Block>
 
 <style lang="scss">
+  // Define custom column widths
   $column-width-narrower: 310px;
   $column-width-narrow: 450px;
   $column-width-normal: 600px;
@@ -85,7 +100,7 @@ Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you
 
   :global {
     div.custom-blocks {
-      @include mixins.block-snap-widths;
+      @include mixins.block-snap-widths; // Use the `block-snap-widths` mixin
     }
   }
 </style>
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index a73274dc..d1f22dc7 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -23,89 +23,136 @@
   });
 </script>
 
-<!-- 
 <script>
   import Article from '../Article/Article.svelte';
-</script> -->
+</script>
 
-<!-- 
-{#snippet children({ args })}
+{#snippet template()}
   <Article id="block-demo-article">
     <div class="article-boundaries">
       <div class="label">Article</div>
-      <Block {...args}>
-        <div class="label">Block</div>
+      <Block>
+        {#snippet content()}
+          <div class="label">Block</div>
+        {/snippet}
       </Block>
     </div>
   </Article>
-{/snippet} -->
+{/snippet}
 
-<Story name="Demo" />
+<Story name="Demo" children={template} />
 
 <Story name="Custom layout" exportName="CustomLayout">
   <Block width="fluid">
-    <!-- Enter bootstrap grid! -->
-    <div id="block-flex-example">
-      <div class="row">
-        <div class="col">Column</div>
-        <div class="col-6">Column</div>
-        <div class="col">Column</div>
+    {#snippet content()}
+      <!-- Enter bootstrap grid! -->
+      <div id="block-flex-example">
+        <div class="row">
+          <div class="col">Column</div>
+          <div class="col-6">Column</div>
+          <div class="col">Column</div>
+        </div>
+        <div class="row">
+          <div class="col">Column</div>
+          <div class="col">Column</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-      </div>
-    </div>
+    {/snippet}
   </Block>
 </Story>
 
-<!-- 
-<Story name="Snap widths">
+<Story name="Snap widths" exportName="SnapWidthsBasic">
   <Article id="block-demo-article">
     <div class="article-boundaries">
       <div class="label">Article</div>
-      <Block width="narrower" snap={true} class="block-snap-widths-demo"
-        >narrower</Block
+      <h4>snap widths</h4>
+      <Block snap={true}>
+        {#snippet content()}
+          <div class="label">Block</div>
+        {/snippet}
+      </Block>
+    </div>
+  </Article>
+</Story>
+
+<Story name="Snap and skip widths" exportName="SnapSkipWidths">
+  <Article id="block-demo-article">
+    <div class="article-boundaries">
+      <div class="label">Article</div>
+      <h4>Regular layout</h4>
+
+      <Block width="narrower" snap={true} class="block-snap-widths-demo">
+        {#snippet content()}
+          narrower
+        {/snippet}
+      </Block>
+      <Block width="narrow" snap={true} class="block-snap-widths-demo">
+        {#snippet content()}
+          narrow
+        {/snippet}</Block
       >
-      <Block width="narrow" snap={true} class="block-snap-widths-demo"
-        >narrow</Block
-      >
-      <Block width="normal" snap={true} class="block-snap-widths-demo"
-        >normal</Block
-      >
-      <Block width="wide" snap={true} class="block-snap-widths-demo">wide</Block
-      >
-      <Block width="wider" snap={true} class="block-snap-widths-demo"
-        >wider</Block
-      >
-      <Block width="narrower" snap={true} class="block-snap-widths-demo even"
-        >narrower</Block
-      >
-      <Block width="narrow" snap={true} class="block-snap-widths-demo even"
-        >narrow</Block
+      <Block width="normal" snap={true} class="block-snap-widths-demo">
+        {#snippet content()}
+          normal
+        {/snippet}
+      </Block>
+      <Block width="wide" snap={true} class="block-snap-widths-demo">
+        {#snippet content()}
+          wide
+        {/snippet}
+      </Block>
+      <Block width="wider" snap={true} class="block-snap-widths-demo">
+        {#snippet content()}
+          wider
+        {/snippet}
+      </Block>
+
+      <h4>with snap and skip</h4>
+      <Block width="narrower" snap={true} class="block-snap-widths-demo even">
+        {#snippet content()}
+          narrower
+        {/snippet}
+      </Block>
+      <Block width="narrow" snap={true} class="block-snap-widths-demo even">
+        {#snippet content()}
+          narrow
+        {/snippet}</Block
       >
       <Block
         width="normal"
         snap={true}
         class="block-snap-widths-demo even skip-narrow"
-        >normal.skip-narrow</Block
       >
+        {#snippet content()}
+          normal.skip-narrow
+        {/snippet}
+      </Block>
       <Block
         width="wide"
         snap={true}
         class="block-snap-widths-demo even skip-normal skip-narrow"
-        >wide.skip-normal.skip-narrow</Block
       >
+        {#snippet content()}
+          wide.skip-normal.skip-narrow
+        {/snippet}
+      </Block>
       <Block
         width="wider"
         snap={true}
-        class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
+        class="block-snap-widths-demo even skip-wide"
+      >
+        {#snippet content()}
+          wider.skip-wide
+        {/snippet}</Block
       >
     </div>
   </Article>
-</Story> -->
+</Story>
 
 <style lang="scss">
+  h4 {
+    text-align: center;
+  }
   :global(#block-demo-article) {
     background-color: #ddd;
     position: relative;
@@ -136,6 +183,7 @@
   ) {
     padding-left: 3px;
     color: white;
+    font-weight: 500;
   }
 
   div#block-flex-example {
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index beea07dd..ed36b082 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -1,37 +1,45 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-block--docs) -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { ContainerWidth } from '../@types/global';
 
-  /** Width of the block within the article well. */
-  export let width: ContainerWidth = 'normal';
+  interface Props {
+    /** Content that goes inside `<Block>`*/
+    content: Snippet;
+    /** Width of the block within the article well. */
+    width?: ContainerWidth;
+    /** Add an id to the block tag to target it with custom CSS. */
+    id?: string;
+    /** Add custom classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /** Snap block to column widths, rather than fluidly resizing them. */
+    snap?: boolean;
+    /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
+    role?: string;
+    /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */
+    ariaLabel?: string;
+  }
 
-  /** Add an id to the block tag to target it with custom CSS. */
-  export let id: string = '';
-
-  /** Add extra classes to the block tag to target it with custom CSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /** Snap block to column widths, rather than fluidly resizing them. */
-  export let snap: boolean = false;
-
-  /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
-  export let role: string | null = null;
-
-  /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */
-  export let ariaLabel: string | null = null;
+  let {
+    content,
+    width = 'normal',
+    id = '',
+    class: cls = '',
+    snap = false,
+    role,
+    ariaLabel,
+  }: Props = $props();
 </script>
 
 <div
   {id}
   class="article-block fmx-auto {width} {cls}"
-  class:snap="{snap && width !== 'fluid' && width !== 'widest'}"
+  class:snap={snap && width !== 'fluid' && width !== 'widest'}
   {role}
-  aria-label="{ariaLabel}"
+  aria-label={ariaLabel}
 >
   <!-- block content -->
-  <slot />
+  {@render content()}
 </div>
 
 <style lang="scss">
@@ -66,7 +74,7 @@
       max-width: none;
     }
 
-    // Only setup for the default column widths, b/c can't use
+    // Only setup for the default column widths, b/c we can't use
     // CSS vars in media queries.
     &.snap {
       @include mixins.block-snap-widths;
diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx
index 9cd25312..7c43e7ea 100644
--- a/src/components/BodyText/BodyText.mdx
+++ b/src/components/BodyText/BodyText.mdx
@@ -30,7 +30,7 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal
 
 ## Using with ArchieML docs
 
-With the graphics kit, you'll likely get your text value from an ArchieML doc.
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc.
 
 ```yaml
 # Archie ML doc

From 362f0933d9d32b6f794f4d8103493f6c82f8265f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 17 Mar 2025 14:05:22 -0700
Subject: [PATCH 18/47] set up document cloud migration

---
 .../docs/component.md => DocumentCloud.mdx}   | 12 +++++++--
 .../DocumentCloud.stories.svelte              | 26 +++++--------------
 .../DocumentCloud/DocumentCloud.svelte        |  3 +--
 3 files changed, 17 insertions(+), 24 deletions(-)
 rename src/components/DocumentCloud/{stories/docs/component.md => DocumentCloud.mdx} (68%)

diff --git a/src/components/DocumentCloud/stories/docs/component.md b/src/components/DocumentCloud/DocumentCloud.mdx
similarity index 68%
rename from src/components/DocumentCloud/stories/docs/component.md
rename to src/components/DocumentCloud/DocumentCloud.mdx
index 6b52ec2a..fb2fca0b 100644
--- a/src/components/DocumentCloud/stories/docs/component.md
+++ b/src/components/DocumentCloud/DocumentCloud.mdx
@@ -1,6 +1,12 @@
-Embed a document hosted by [DocumentCloud](https://documentcloud.org)
+import { Meta, Canvas } from '@storybook/blocks';
 
----
+import * as DocumentCloudStories from './DocumentCloud.stories.svelte';
+
+<Meta of={DocumentCloudStories} />
+
+# DocumentCloud
+
+The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org)
 
 The document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is "3259984-Trump-Intelligence-Allegations".
 
@@ -15,3 +21,5 @@ The document must have its access level set to public before it can be embedded.
   width="normal"
 />
 ```
+
+<Canvas of={DocumentCloudStories.Demo} />
diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 7a111585..65f5174d 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -1,38 +1,24 @@
 <script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import DocumentCloud from './DocumentCloud.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Multimedia/DocumentCloud',
     component: DocumentCloud,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <DocumentCloud {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     width: 'normal',
     slug: '3259984-Trump-Intelligence-Allegations',
     altText: 'These Reports Allege Trump Has Deep Ties To Russia',
-  }}"
+  }}
 />
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 195c4c8a..f00a1167 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
@@ -35,7 +34,7 @@
   <iframe
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
-    title="{altText}"
+    title={altText}
     width="700"
     height="540"
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"

From fc11e2fab15b8770f637cb4dd73e7d542553672f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 10:46:26 -0700
Subject: [PATCH 19/47] updates doc clod

---
 .../DocumentCloud/DocumentCloud.mdx           |  7 +--
 .../DocumentCloud/DocumentCloud.svelte        | 53 ++++++++++---------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/DocumentCloud/DocumentCloud.mdx b/src/components/DocumentCloud/DocumentCloud.mdx
index fb2fca0b..88dec3d1 100644
--- a/src/components/DocumentCloud/DocumentCloud.mdx
+++ b/src/components/DocumentCloud/DocumentCloud.mdx
@@ -6,9 +6,11 @@ import * as DocumentCloudStories from './DocumentCloud.stories.svelte';
 
 # DocumentCloud
 
-The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org)
+The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org).
 
-The document must have its access level set to public before it can be embedded. The `slug` argument can be found after the final slash in the document's URL. For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The slug is "3259984-Trump-Intelligence-Allegations".
+The document must have its access level set to **public** before it can be embedded. The `slug` can be found after the final slash in the document's URL.
+
+For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The `slug` is `3259984-Trump-Intelligence-Allegations`.
 
 ```svelte
 <script>
@@ -18,7 +20,6 @@ The document must have its access level set to public before it can be embedded.
 <DocumentCloud
   slug="3259984-Trump-Intelligence-Allegations"
   altText="These Reports Allege Trump Has Deep Ties To Russia"
-  width="normal"
 />
 ```
 
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index f00a1167..09713cc6 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -1,33 +1,34 @@
 <!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
-  /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
-
-  /**
-   * Width of the container, one of: normal, wide, wider, widest or fluid
-   */
-  export let width: ContainerWidth = 'normal';
-
-  /**
-   * The unique identifier for the document.
-   * @required
-   */
-  export let slug: string;
-
-  /**
-   * Alt text for the document.
-   * @required
-   */
-  export let altText: string;
-
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
-
   import Block from '../Block/Block.svelte';
+
+  interface Props {
+    /**
+     * The unique identifier for the document.
+     */
+    slug: string;
+    /**
+     * Alt text for the document.
+     */
+    altText: string;
+    /**
+     * Width of the container, one of: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string; // Add a class to target with SCSS.
+  }
+
+  let {
+    slug,
+    altText,
+    width = 'normal',
+    id = '',
+    class: cls = '',
+  }: Props = $props();
 </script>
 
 <Block {width} {id} class="photo fmy-6 {cls}">

From 63782a7ce1dd84b765948b39a5e29e0955e04504 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 10:49:08 -0700
Subject: [PATCH 20/47] cleanup

---
 src/components/DocumentCloud/DocumentCloud.stories.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 65f5174d..22f69e6d 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -17,7 +17,6 @@
 <Story
   name="Demo"
   args={{
-    width: 'normal',
     slug: '3259984-Trump-Intelligence-Allegations',
     altText: 'These Reports Allege Trump Has Deep Ties To Russia',
   }}

From 470c73939af5e5c37b6ac8ccb928bc3d8bdd99a2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 11:50:37 -0700
Subject: [PATCH 21/47] updates photo

---
 src/components/FeaturePhoto/FeaturePhoto.mdx  |  72 +++++++++
 .../FeaturePhoto/FeaturePhoto.stories.svelte  |  47 +-----
 .../FeaturePhoto/FeaturePhoto.svelte          | 144 ++++++++++--------
 .../{stories => images}/shark.jpg             | Bin
 .../FeaturePhoto/stories/docs/archieML.md     |  37 -----
 .../FeaturePhoto/stories/docs/component.md    |  16 --
 .../stories/docs/missingAltText.md            |   1 -
 7 files changed, 159 insertions(+), 158 deletions(-)
 create mode 100644 src/components/FeaturePhoto/FeaturePhoto.mdx
 rename src/components/FeaturePhoto/{stories => images}/shark.jpg (100%)
 delete mode 100644 src/components/FeaturePhoto/stories/docs/archieML.md
 delete mode 100644 src/components/FeaturePhoto/stories/docs/component.md
 delete mode 100644 src/components/FeaturePhoto/stories/docs/missingAltText.md

diff --git a/src/components/FeaturePhoto/FeaturePhoto.mdx b/src/components/FeaturePhoto/FeaturePhoto.mdx
new file mode 100644
index 00000000..9ea5a3af
--- /dev/null
+++ b/src/components/FeaturePhoto/FeaturePhoto.mdx
@@ -0,0 +1,72 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as FeaturePhotoStories from './FeaturePhoto.stories.svelte';
+
+<Meta of={FeaturePhotoStories} />
+
+# FeaturePhoto
+
+The `FeaturePhoto` component adds a full-width photo.
+
+```svelte
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+</script>
+
+<FeaturePhoto
+  src={`${assets}/images/myImage.jpg`}
+  altText="Some alt text"
+  caption="A caption"
+/>
+```
+
+<Canvas of={FeaturePhotoStories.Demo} />
+
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+
+type: photo
+width: normal
+src: images/shark.jpg
+altText: The king of the sea
+caption: Carcharodon carcharias - REUTERS
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `FeaturePhoto` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... -->
+  {:else if block.type === 'photo'}
+    <FeaturePhoto
+      width={block.width}
+      src={`${assets}/${block.src}`}
+      altText={block.altText}
+      caption={block.caption}
+    />
+  {/if}
+{/each}
+```
+
+## Missing alt text
+
+`altText` is required in this component. If your photo is missing it, a small red text box will overlay the image.
+
+<Canvas of={FeaturePhotoStories.MissingAltText} />
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
index 07b53afb..55769963 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -1,26 +1,10 @@
 <script module lang="ts">
-    import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import archieMLDocs from './stories/docs/archieML.md?raw';
-  // @ts-ignore raw
-  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import FeaturePhoto from './FeaturePhoto.svelte';
 
-  // import {
-  //   withComponentDocs,
-  //   withStoryDocs,
-  // } from '$lib/docs/utils/withParams.js';
-
-
   const { Story } = defineMeta({
     title: 'Components/Multimedia/FeaturePhoto',
     component: FeaturePhoto,
-    // ...withComponentDocs(componentDocs),
-    tags: ['autodocs'],
     argTypes: {
       width: {
         control: 'select',
@@ -35,38 +19,23 @@
 </script>
 
 <script>
-  // @ts-ignore jpg
-  import sharkSrc from './stories/shark.jpg';
+  import sharkSrc from './images/shark.jpg';
 </script>
 
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     src: sharkSrc,
     altText: 'A shark!',
-    width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
+  }}
 />
 
-<Story
-  name="ArchieML"
-  args="{{
-    src: sharkSrc,
-    altText: 'A shark!',
-    width: 'normal',
-    caption: 'Carcharodon carcharias - REUTERS',
-  }}"
-/>
-<!-- {...withStoryDocs(archieMLDocs)} -->
-
 <Story
   name="Missing altText"
-  args="{{
+  exportName="MissingAltText"
+  args={{
     src: sharkSrc,
-    width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
+  }}
 />
-<!-- {...withStoryDocs(missingAltTextDocs)} -->
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 0ff0b7f6..a750d23d 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -1,75 +1,89 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Block from '../Block/Block.svelte';
   import type { ContainerWidth } from '../@types/global';
+
+  import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
 
-  /**
-   * Photo src
-   * @type {string}
-   * @required
-   */
-  export let src: string;
-  /**
-   * Photo altText
-   * @type {string}
-   * @required
-   */
-  export let altText: string;
-  /**
-   * Add an id to target with custom CSS.
-   * @type {string}
-   */
-  export let id: string = '';
-  /**
-   * Add extra classes to target with custom CSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-  /**
-   * Caption below the photo
-   * @type {string}
-   */
-  export let caption: string;
-  /**
-   * Height of the photo placeholder when lazy-loading
-   */
-  export let height: number = 100;
-  /**
-   * Width of the container, one of: normal, wide, wider, widest or fluid
-   */
-  export let width: ContainerWidth = 'normal';
+  interface Props {
+    /**
+     * Photo source
+     */
+    src: string;
+    /**
+     * Photo altText
+     */
+    altText: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class?: string;
+    /**
+     * Photo caption
+     */
+    caption?: string;
+    /**
+     * Height of the photo placeholder when lazy-loading
+     */
+    height?: number;
+    /**
+     * Width of the container: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text vs the photo. For example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+     */
+    lazy?: boolean;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading.
+     */
+    top?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading.
+     */
+    bottom?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading.
+     */
+    left?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading.
+     */
+    right?: number;
+  }
 
-  /**
-   * Set a different width for the text within the text well, for example,
-   * "normal" to keep the title, description and notes inline with the rest
-   * of the text well. Can't ever be wider than `width`.
-   * @type {string}
-   */
-  export let textWidth: ContainerWidth | null = 'normal';
+  let {
+    src,
+    altText,
+    id = '',
+    class: cls = '',
+    caption,
+    height = 100,
+    width = 'normal',
+    textWidth = 'normal',
+    lazy = true,
+    top = 0,
+    bottom = 0,
+    left = 0,
+    right = 0,
+  }: Props = $props();
 
-  /**
-   * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
-   */
-  export let lazy: boolean = false;
-  /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. */
-  export let top = 0;
-  /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. */
-  export let bottom = 0;
-  /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading. */
-  export let left = 0;
-  /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading. */
-  export let right = 0;
-
-  let intersecting = false;
-  let container;
+  let intersecting = $state(false);
+  let container: HTMLElement;
   const intersectable = typeof IntersectionObserver !== 'undefined';
 
   onMount(() => {
     if (!lazy) return;
+
     if (intersectable) {
       const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
 
@@ -93,18 +107,18 @@
 
 <Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
-    bind:this="{container}"
+    bind:this={container}
     aria-label="media"
     class="w-full flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" {src} alt="{altText}" />
+      <img class="w-full my-0" {src} alt={altText} />
     {:else}
-      <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
+      <div class="placeholder w-full" style={`height: ${height}px;`}></div>
     {/if}
     {#if caption}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <Block width="{textWidth}" class="notes w-full fmy-0">
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <Block width={textWidth} class="notes w-full fmy-0">
           <figcaption>
             {caption}
           </figcaption>
diff --git a/src/components/FeaturePhoto/stories/shark.jpg b/src/components/FeaturePhoto/images/shark.jpg
similarity index 100%
rename from src/components/FeaturePhoto/stories/shark.jpg
rename to src/components/FeaturePhoto/images/shark.jpg
diff --git a/src/components/FeaturePhoto/stories/docs/archieML.md b/src/components/FeaturePhoto/stories/docs/archieML.md
deleted file mode 100644
index f2b1817a..00000000
--- a/src/components/FeaturePhoto/stories/docs/archieML.md
+++ /dev/null
@@ -1,37 +0,0 @@
-```yaml
-[blocks]
-
-type: photo
-width: normal
-src: images/shark.jpg
-altText: The king of the sea
-caption: Carcharodon carcharias - REUTERS
-
-[]
-```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
-
-  import content from '$locales/en/content.json';
-  import { assets } from '$app/paths';
-</script>
-
-{#each content.blocks as block}
-  {#if block.Type === 'text'}
-  <!-- ... -->
-
-  {:else if block.type === 'photo'}
-    <FeaturePhoto
-      width="{block.width}"
-      src="{`${assets}/${block.src}`}"
-      altText="{block.altText}"
-      caption="{block.caption}"
-    />
-
-  <!-- ... -->
-  {/if}
-{/each}
-```
diff --git a/src/components/FeaturePhoto/stories/docs/component.md b/src/components/FeaturePhoto/stories/docs/component.md
deleted file mode 100644
index 846cfcf9..00000000
--- a/src/components/FeaturePhoto/stories/docs/component.md
+++ /dev/null
@@ -1,16 +0,0 @@
-A full-width photo inside the text well.
-
-```svelte
-<script>
-  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-</script>
-
-<FeaturePhoto
-  src="{`${assets}/images/myImage.jpg`}"
-  altText="Some alt text"
-  caption="A caption"
-  lazy="{false}"
-  width="normal"
-/>
-```
diff --git a/src/components/FeaturePhoto/stories/docs/missingAltText.md b/src/components/FeaturePhoto/stories/docs/missingAltText.md
deleted file mode 100644
index 48016d3e..00000000
--- a/src/components/FeaturePhoto/stories/docs/missingAltText.md
+++ /dev/null
@@ -1 +0,0 @@
-If your photo is missing `altText` a small warning will overlay the image.

From 4a674123df6173c89b0e0699de1509e3f04994a3 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 13:44:21 -0700
Subject: [PATCH 22/47] updates graphic block

---
 src/components/GraphicBlock/AriaHidden.svelte |  20 --
 src/components/GraphicBlock/GraphicBlock.mdx  | 215 ++++++++++++++++++
 .../GraphicBlock/GraphicBlock.stories.svelte  | 151 ++++++------
 .../GraphicBlock/GraphicBlock.svelte          | 190 ++++++++--------
 src/components/GraphicBlock/TextBlock.svelte  |  21 --
 .../GraphicBlock/components/AriaHidden.svelte |  21 ++
 .../GraphicBlock/components/TextBlock.svelte  |  22 ++
 .../ai2svelte/ai-chart.svelte                 |   0
 .../{stories => demo}/imgs/ai-chart-md.png    | Bin
 .../{stories => demo}/imgs/ai-chart-sm.png    | Bin
 .../{stories => demo}/imgs/ai-chart-xs.png    | Bin
 .../{stories => demo}/placeholder.png         | Bin
 .../GraphicBlock/stories/docs/ai2svelte.md    |  19 --
 .../GraphicBlock/stories/docs/archieML.md     |  40 ----
 .../GraphicBlock/stories/docs/aria.md         |  56 -----
 .../GraphicBlock/stories/docs/component.md    |  20 --
 .../GraphicBlock/stories/docs/customText.md   |  14 --
 17 files changed, 438 insertions(+), 351 deletions(-)
 delete mode 100644 src/components/GraphicBlock/AriaHidden.svelte
 create mode 100644 src/components/GraphicBlock/GraphicBlock.mdx
 delete mode 100644 src/components/GraphicBlock/TextBlock.svelte
 create mode 100644 src/components/GraphicBlock/components/AriaHidden.svelte
 create mode 100644 src/components/GraphicBlock/components/TextBlock.svelte
 rename src/components/GraphicBlock/{stories => demo}/ai2svelte/ai-chart.svelte (100%)
 rename src/components/GraphicBlock/{stories => demo}/imgs/ai-chart-md.png (100%)
 rename src/components/GraphicBlock/{stories => demo}/imgs/ai-chart-sm.png (100%)
 rename src/components/GraphicBlock/{stories => demo}/imgs/ai-chart-xs.png (100%)
 rename src/components/GraphicBlock/{stories => demo}/placeholder.png (100%)
 delete mode 100644 src/components/GraphicBlock/stories/docs/ai2svelte.md
 delete mode 100644 src/components/GraphicBlock/stories/docs/archieML.md
 delete mode 100644 src/components/GraphicBlock/stories/docs/aria.md
 delete mode 100644 src/components/GraphicBlock/stories/docs/component.md
 delete mode 100644 src/components/GraphicBlock/stories/docs/customText.md

diff --git a/src/components/GraphicBlock/AriaHidden.svelte b/src/components/GraphicBlock/AriaHidden.svelte
deleted file mode 100644
index 4379590c..00000000
--- a/src/components/GraphicBlock/AriaHidden.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  
-  interface Props {
-    /**
-   * Whether to wrap the graphic with an aria hidden tag.
-   */
-    hidden?: boolean;
-    children?: import('svelte').Snippet;
-  }
-
-  let { hidden = false, children }: Props = $props();
-</script>
-
-{#if hidden}
-  <div aria-hidden="true">
-    {@render children?.()}
-  </div>
-{:else}
-  {@render children?.()}
-{/if}
diff --git a/src/components/GraphicBlock/GraphicBlock.mdx b/src/components/GraphicBlock/GraphicBlock.mdx
new file mode 100644
index 00000000..14dd3dad
--- /dev/null
+++ b/src/components/GraphicBlock/GraphicBlock.mdx
@@ -0,0 +1,215 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as GraphicBlockStories from './GraphicBlock.stories.svelte';
+
+<Meta of={GraphicBlockStories} />
+
+# GraphicBlock
+
+The `GraphicBlock` component is a special derivative of the [Block](./?path=/docs/layout-block) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
+
+Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with styled text.
+
+```svelte
+<script>
+  import { GraphicBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<GraphicBlock
+  title="Title for my chart"
+  description="Some description for your chart."
+  notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
+>
+  <!-- Your chart goes here -->
+  <div id="my-chart" />
+</GraphicBlock>
+```
+
+<Canvas of={GraphicBlockStories.Demo} />
+
+## Using with ai2svelte and ArchieML docs
+
+The `GraphicBlock` component is built to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics in Graphics Kit.
+
+You'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+type: ai-graphic
+width: normal
+chart: AiMap # IMPORTANT: This must match the name of the ai2svelte chart you import in App.svelte
+title: Earthquake in Haiti
+description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
+notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
+
+\Source: USGIS
+:end
+altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `GraphicBlock` component.
+
+To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2svelte graphic at the top of `App.svelte` and add it to the `aiCharts` object.
+
+> **Important❗:** Make sure that the value for `chart` in the ArchieML doc matches the name of the ai2svelte file imported in `App.svelte`.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // IMPORTANT: The name of your ai2svelte chart must match `chart` in your ArchieML doc
+  import AiMap from './ai2svelte/my-map.svelte';
+  // Error handler for missing ai2svelte charts
+  import LogBlock from './components/dev/LogBlock.svelte';
+
+  // If using with the Graphics Kit
+  import { assets } from '$app/paths';
+
+  // A built-in helper function in Graphis Kit for validating container width
+  import { containerWidth } from '$utils/propValidators';
+
+  // Add your imported ai2svelte charts to this object
+  const aiCharts = {
+    AiMap,
+    // Other ai2svelte graphics...
+  };
+</script>
+
+<!-- Loop through ArchieML blocks -->
+{#each content.blocks as block}
+  {#if block.type === 'ai-graphic'}
+    {#if !aiCharts[block.chart]}
+      <!-- Error message for when the ai2svelte chart is missing -->
+      <LogBlock message={`Unable to find "${block.chart}" in aiCharts`} />
+    {:else}
+      <!-- Get the ai2svelte graphic specified by `chart` in ArchieML -->
+      {@const AiChart = aiCharts[block.chart]}
+      <GraphicBlock
+        id={block.chart}
+        width={containerWidth(block.width)}
+        title={block.title}
+        description={block.description}
+        notes={block.notes}
+        ariaDescription={block.altText}
+      >
+        <!-- In Graphics Kit, pass the `assetsPath` prop -->
+        <AiChart assetsPath={assets || '/'} />
+      </GraphicBlock>
+    {/if}
+  {/if}
+{/each}
+```
+
+<Canvas of={GraphicBlockStories.Ai2SvelteAndArchieML} />
+
+## Custom text
+
+You can override the default styles for title and notes by making your own custom elements with the `customTitle` and `customNotes` [snippets](https://svelte.dev/docs/svelte/snippet):
+
+```svelte
+<GraphicBlock>
+  <!-- Custom title snippet -->
+  {#snippet customTitle()}
+    <h5>My smaller title</h5>
+  {/snippet}
+
+  <!-- Your graphic -->
+  <div id="my-chart"></div>
+
+  <!-- Custom notes snippet -->
+  {#snippet customNotes()}
+    <aside>
+      <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
+    </aside>
+  {/snippet}
+</GraphicBlock>
+```
+
+<Canvas of={GraphicBlockStories.CustomText} />
+
+## ARIA descriptions
+
+If the text in your chart isn't easily read by screen readers — for example, a map with annotations that wouldn't make sense without the visual — add an `ariaDescription` that describes the chart.
+
+The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers, etc. in markdown.
+
+> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div with [aria-hidden="true"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden), which tells screen readers to read the hidden ARIA description and skip the text in the graphic.
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  ariaDescription="A map showing the shake intensity produced by the earthquake."
+>
+  <!-- In Graphics Kit, pass the `assetsPath` prop -->
+  <AiChart assetsPath={assets || '/'} />
+</GraphicBlock>
+```
+
+<Canvas of={GraphicBlockStories.AriaDescription} />
+
+## Custom ARIA descriptions
+
+Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, use the `customAria` [snippet](https://svelte.dev/docs/svelte/snippet).
+
+[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
+
+> **Note:** The `customAria` snippet will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
+
+```svelte
+<GraphicBlock
+  title="Earthquake in Haiti"
+  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+>
+  <!-- In Graphics Kit, pass the `assetsPath` prop -->
+  <AiChart assetsPath={assets || '/'} />
+
+  <!-- Custom ARIA description snippet -->
+  {#snippet customAria()}
+    <p>
+      A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
+      Haiti at 8:29 a.m. EST, Aug. 14, 2021.
+    </p>
+    <table>
+      <tbody>
+        <tr>
+          <th>City</th>
+          <th>Felt shake strength</th>
+        </tr>
+        <tr>
+          <td>Les Cayes</td>
+          <td>Very strong</td>
+        </tr>
+        <tr>
+          <td>Jeremie</td>
+          <td>Strong</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+</GraphicBlock>
+
+<!-- Optionally, style the visually hidden table nicely for sighted readers who use screen readers -->
+<style lang="scss">
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      border: 1px solid #ddd;
+      padding: 8px;
+    }
+
+    th {
+      background-color: #f2f2f2;
+    }
+  }
+</style>
+```
+
+<Canvas of={GraphicBlockStories.CustomAriaDescription} />
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 6923b855..ef6ad159 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -1,23 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import archieMLDocs from './stories/docs/archieML.md?raw';
-  // @ts-ignore raw
-  import customTextDocs from './stories/docs/customText.md?raw';
-  // @ts-ignore raw
-  import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore raw
-  import ariaDocs from './stories/docs/aria.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import GraphicBlock from './GraphicBlock.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Graphics/GraphicBlock',
     component: GraphicBlock,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
@@ -28,92 +15,102 @@
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import AiMap from './stories/ai2svelte/ai-chart.svelte';
-
-  // @ts-ignore img
-  import PlaceholderImg from './stories/placeholder.png';
+  import AiMap from './demo/ai2svelte/ai-chart.svelte';
+  import PlaceholderImg from './demo/placeholder.png';
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <GraphicBlock {...args}>
-      <div class="demo-graphic">
-        <img src="{PlaceholderImg}" alt="placeholder" />
-      </div>
-    </GraphicBlock>
-  {/snippet}
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    width: 'normal',
-    title: 'Bacon ipsum dolor amet t-bone',
-    description:
-      'Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.',
-    notes:
-      'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)',
-  }}"
-/>
-
-<Story name="ArchieML" {...withStoryDocs(archieMLDocs)}>
+<Story name="Demo">
+  <GraphicBlock
+    title="Title for my chart"
+    description="Some description for your chart."
+    notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
+  >
+    <!-- Graphic content -->
+    <div id="my-chart">
+      <img src={PlaceholderImg} alt="placeholder" />
+    </div>
+  </GraphicBlock>
+</Story>
+
+<Story name="Ai2svelte and ArchieML" exportName="Ai2SvelteAndArchieML">
   <GraphicBlock
-    width="normal"
     title="Earthquake in Haiti"
     description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
   >
+    <!-- Graphic content -->
     <AiMap />
   </GraphicBlock>
 </Story>
 
-<Story name="Custom text" {...withStoryDocs(customTextDocs)}>
-  <GraphicBlock width="normal">
-    {#snippet title()}
-        <div >
-        <h5>My smaller title</h5>
-      </div>
-      {/snippet}
+<Story name="Custom text" exportName="CustomText">
+  <GraphicBlock>
+    <!-- Graphic content -->
     <div class="demo-graphic">
-      <img src="{PlaceholderImg}" alt="placeholder" />
+      <img src={PlaceholderImg} alt="placeholder" />
     </div>
-    {#snippet notes()}
-        <aside >
+
+    {#snippet customTitle()}
+      <h5>My smaller title</h5>
+    {/snippet}
+
+    {#snippet customNotes()}
+      <aside>
         <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
       </aside>
-      {/snippet}
+    {/snippet}
   </GraphicBlock>
 </Story>
 
-<Story name="Ai2svelte" {...withStoryDocs(ai2svelteDocs)}>
+<Story name="AREA description" exportName="AriaDescription">
   <GraphicBlock
-    width="normal"
-    title="Earthquake in Haiti"
-    description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-    notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-  >
-    <AiMap />
-  </GraphicBlock>
-</Story>
-
-<Story name="ARIA" {...withStoryDocs(ariaDocs)}>
-  <GraphicBlock
-    width="normal"
     title="Earthquake in Haiti"
     description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
     ariaDescription="A map showing the shake intensity produced by the earthquake."
   >
+    <!-- Graphic content -->
     <AiMap />
   </GraphicBlock>
 </Story>
 
+<Story name="Custom AREA description" exportName="CustomAriaDescription">
+  <GraphicBlock
+    title="Earthquake in Haiti"
+    description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
+    notes="Note: A shakemap represents the ground shaking produced by an earthquake."
+  >
+    <!-- Graphic content -->
+    <AiMap />
+    {#snippet customAria()}
+      <p>
+        A shakemap shows the intensity of the 7.2-magnitude earthquake that
+        struck Haiti at 8:29 a.m. EST, Aug. 14, 2021.
+      </p>
+      <table>
+        <tbody>
+          <tr>
+            <th>City</th>
+            <th>Felt shake strength</th>
+          </tr>
+          <tr>
+            <td>Les Cayes</td>
+            <td>Very strong</td>
+          </tr>
+          <tr>
+            <td>Jeremie</td>
+            <td>Strong</td>
+          </tr>
+        </tbody>
+      </table>
+    {/snippet}
+  </GraphicBlock>
+</Story>
+
 <style lang="scss">
   div.demo-graphic {
     height: 400px;
@@ -125,4 +122,18 @@
       opacity: 0.4;
     }
   }
+
+  // Style the table nicely
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    th,
+    td {
+      border: 1px solid #ddd;
+      padding: 8px;
+    }
+    th {
+      background-color: #f2f2f2;
+    }
+  }
 </style>
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index f6824c1c..b5079208 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -1,130 +1,138 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-graphicblock--docs) -->
 <script lang="ts">
+  // Types
   import type { ContainerWidth } from '../@types/global';
+  import type { Snippet } from 'svelte';
 
-  /**
-   * Width of the component within the text well.
-   * @type {string}
-   */
-  export let width: ContainerWidth = 'normal';
-
-  /**
-   * Add an id to the block tag to target it with custom CSS.
-   * @type {string}
-   */
-  export let id: string = '';
-  /**
-   * Add extra classes to the block tag to target it with custom CSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-
-  /** Snap block to column widths, rather than fluidly resizing them. */
-  export let snap: boolean = false;
-
-  /**
-   * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
-   * @type {string}
-   */
-  export let role: string | null = null;
-
-  /**
-   * Notes to the graphic, passed in as a markdown string.
-   * @type {string}
-   */
-  export let notes: string | null = null;
-
-  /**
-   * Set a different width for the text within the text well, for example,
-   * "normal" to keep the title, description and notes inline with the rest
-   * of the text well. Can't ever be wider than `width`.
-   * @type {string}
-   */
-  export let textWidth: ContainerWidth | null = 'normal';
-
-  /**
-   * Title of the graphic
-   * @type {string}
-   */
-  export let title: string | null = null;
-
-  /**
-   * Description of the graphic, passed in as a markdown string.
-   * @type {string}
-   */
-  export let description: string | null = null;
-
-  /**
-   * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
-   * @type {string}
-   */
-  export let ariaLabel: string = 'chart';
-  /**
-   * ARIA description, passed in as a markdown string.
-   * @type {string}
-   */
-  export let ariaDescription: string | null = null;
-
-  import AriaHidden from './AriaHidden.svelte';
-  import TextBlock from './TextBlock.svelte';
+  // Components
+  import AriaHidden from './components/AriaHidden.svelte';
+  import TextBlock from './components/TextBlock.svelte';
   import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
+
+  interface Props {
+    /** Content to place inside `GraphicBlock` */
+    children: Snippet;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /** Snap block to column widths, rather than fluidly resizing them. */
+    snap?: boolean;
+    /**
+     * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
+     */
+    role?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /** Custom notes snippet */
+    customNotes?: Snippet;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Title of the graphic
+     */
+    title?: string;
+    /** Custom title snippet */
+    customTitle?: Snippet;
+    /**
+     * Description of the graphic, passed in as a markdown string.
+     */
+    description?: string;
+    /**
+     * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA description, passed in as a markdown string.
+     */
+    ariaDescription?: string;
+    /** Custom ARIA snippet */
+    customAria?: Snippet;
+  }
+
+  let {
+    children,
+    id = '',
+    class: cls = '',
+    snap = false,
+    role,
+    notes,
+    customNotes,
+    width = 'normal',
+    textWidth = 'normal',
+    title,
+    customTitle,
+    description,
+    ariaLabel = 'chart',
+    ariaDescription,
+    customAria,
+  }: Props = $props();
 </script>
 
 <Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
-  {#if $$slots.title}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
-        <!-- Custom title content -->
-        <slot name="title" />
+  {#if customTitle}
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
+        <!-- Custom title snippet -->
+        {@render customTitle()}
       </TextBlock>
     </PaddingReset>
   {:else if title}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <h3>{title}</h3>
         {#if description}
-          <Markdown source="{description}" />
+          <Markdown source={description} />
         {/if}
       </TextBlock>
     </PaddingReset>
   {/if}
-  <AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
+  <AriaHidden hidden={!!customAria || !!ariaDescription}>
     <!-- Graphic content -->
-    <slot />
+    {@render children()}
   </AriaHidden>
-  {#if $$slots.aria || ariaDescription}
+  {#if customAria || ariaDescription}
     <div class="visually-hidden">
-      {#if $$slots.aria}
-        <!-- Custom ARIA markup -->
-        <slot name="aria" />
-      {:else}
-        <Markdown source="{ariaDescription}" />
+      {#if customAria}
+        <!-- Custom ARIA snippet -->
+        {@render customAria()}
+      {:else if ariaDescription}
+        <Markdown source={ariaDescription} />
       {/if}
     </div>
   {/if}
-  {#if $$slots.notes}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+  {#if customNotes}
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <!-- Custom notes content -->
-        <slot name="notes" />
+        {@render customNotes()}
       </TextBlock>
     </PaddingReset>
   {:else if notes}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <aside>
-          <Markdown source="{notes}" />
+          <Markdown source={notes} />
         </aside>
       </TextBlock>
     </PaddingReset>
   {/if}
 </Block>
 
-<!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
   @use '../../scss/mixins' as mixins;
 
diff --git a/src/components/GraphicBlock/TextBlock.svelte b/src/components/GraphicBlock/TextBlock.svelte
deleted file mode 100644
index 9c09a42c..00000000
--- a/src/components/GraphicBlock/TextBlock.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { ContainerWidth } from '../@types/global';
-
-  
-  import Block from '../Block/Block.svelte';
-  interface Props {
-    /** Width of the component within the text well. */
-    width?: ContainerWidth | null;
-    children?: import('svelte').Snippet;
-  }
-
-  let { width = null, children }: Props = $props();
-</script>
-
-{#if width}
-  <Block {width} class="notes fmy-0">
-    {@render children?.()}
-  </Block>
-{:else}
-  {@render children?.()}
-{/if}
diff --git a/src/components/GraphicBlock/components/AriaHidden.svelte b/src/components/GraphicBlock/components/AriaHidden.svelte
new file mode 100644
index 00000000..2b632b44
--- /dev/null
+++ b/src/components/GraphicBlock/components/AriaHidden.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Whether to wrap the graphic with an aria hidden tag.
+     */
+    hidden?: boolean;
+    children: Snippet;
+  }
+
+  let { hidden = false, children }: Props = $props();
+</script>
+
+{#if hidden && children}
+  <div aria-hidden="true">
+    {@render children()}
+  </div>
+{:else if children}
+  {@render children()}
+{/if}
diff --git a/src/components/GraphicBlock/components/TextBlock.svelte b/src/components/GraphicBlock/components/TextBlock.svelte
new file mode 100644
index 00000000..c647c024
--- /dev/null
+++ b/src/components/GraphicBlock/components/TextBlock.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ContainerWidth } from '../../@types/global';
+
+  import Block from '../../Block/Block.svelte';
+  interface Props {
+    /** Width of the component within the text well. */
+    width?: ContainerWidth;
+    // children?: import('svelte').Snippet;
+    children?: Snippet;
+  }
+
+  let { width, children }: Props = $props();
+</script>
+
+{#if width && children}
+  <Block {width} class="notes fmy-0">
+    {@render children()}
+  </Block>
+{:else if children}
+  {@render children()}
+{/if}
diff --git a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte b/src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte
similarity index 100%
rename from src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
rename to src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte
diff --git a/src/components/GraphicBlock/stories/imgs/ai-chart-md.png b/src/components/GraphicBlock/demo/imgs/ai-chart-md.png
similarity index 100%
rename from src/components/GraphicBlock/stories/imgs/ai-chart-md.png
rename to src/components/GraphicBlock/demo/imgs/ai-chart-md.png
diff --git a/src/components/GraphicBlock/stories/imgs/ai-chart-sm.png b/src/components/GraphicBlock/demo/imgs/ai-chart-sm.png
similarity index 100%
rename from src/components/GraphicBlock/stories/imgs/ai-chart-sm.png
rename to src/components/GraphicBlock/demo/imgs/ai-chart-sm.png
diff --git a/src/components/GraphicBlock/stories/imgs/ai-chart-xs.png b/src/components/GraphicBlock/demo/imgs/ai-chart-xs.png
similarity index 100%
rename from src/components/GraphicBlock/stories/imgs/ai-chart-xs.png
rename to src/components/GraphicBlock/demo/imgs/ai-chart-xs.png
diff --git a/src/components/GraphicBlock/stories/placeholder.png b/src/components/GraphicBlock/demo/placeholder.png
similarity index 100%
rename from src/components/GraphicBlock/stories/placeholder.png
rename to src/components/GraphicBlock/demo/placeholder.png
diff --git a/src/components/GraphicBlock/stories/docs/ai2svelte.md b/src/components/GraphicBlock/stories/docs/ai2svelte.md
deleted file mode 100644
index e87c2c0e..00000000
--- a/src/components/GraphicBlock/stories/docs/ai2svelte.md
+++ /dev/null
@@ -1,19 +0,0 @@
-A more detailed example of using `GraphicBlock` with components created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
-
-```svelte
-<script>
-  import { GraphicBlock } from '@reuters-graphics/graphics-components';
-  import MyAiMap from './ai2svelte/my-map.svelte';
-  import { assets } from '$app/paths'; // If using with the Graphics Kit
-</script>
-
-<GraphicBlock
-  width="normal"
-  title="Earthquake in Haiti"
-  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-  ariaDescription="A map showing shake intensity of the quake."
->
-  <MyAiMap assetsPath="{assets}" />
-</GraphicBlock>
-```
diff --git a/src/components/GraphicBlock/stories/docs/archieML.md b/src/components/GraphicBlock/stories/docs/archieML.md
deleted file mode 100644
index d3a8a212..00000000
--- a/src/components/GraphicBlock/stories/docs/archieML.md
+++ /dev/null
@@ -1,40 +0,0 @@
-For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics.
-
-First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object;
-
-```svelte
-<!-- App.svelte -->
-<script>
-  // Other stuff...
-
-  import AiMap from './ai2svelte/my-map.svelte';
-
-  const aiCharts = {
-    // Other charts...
-    AiMap,
-  };
-</script>
-```
-
-Then add the following structure to your ArchieML doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `chart`:
-
-```yaml
-[blocks]
-# ...
-
-type: ai-graphic
-chart: AiMap
-width: normal
-textWidth: normal
-title: Earthquake in Haiti
-description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
-notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
-
-\Source: USGIS
-:end
-altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
-:end
-
-# ...
-[]
-```
diff --git a/src/components/GraphicBlock/stories/docs/aria.md b/src/components/GraphicBlock/stories/docs/aria.md
deleted file mode 100644
index 2ef6fef7..00000000
--- a/src/components/GraphicBlock/stories/docs/aria.md
+++ /dev/null
@@ -1,56 +0,0 @@
-If your chart isn't easily read by screen readers — for example, it has annotations that when read without the visual won't make sense — you should add an `ariaDescription` that better describes the chart.
-
-The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers or whatever else you need in markdown.
-
-> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div that tells screen readers not to read the text in the graphic, but instead read the hidden ARIA description.
-
-```svelte
-<GraphicBlock
-  width="normal"
-  title="Earthquake in Haiti"
-  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
-  ariaDescription="A map showing the shake intensity produced by the earthquake."
->
-  <MyAiMap assetsPath="{assets}" />
-</GraphicBlock>
-```
-
-Sometimes, instead of a simple ARIA description for graphics, we want to also provide a data table or something else that requires more complex markup.
-
-You can add custom markup for screen readers only by using the `aria` named slot.
-
-> **Note:** The `aria` slot will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
-
-```svelte
-<GraphicBlock
-  width="normal"
-  title="Earthquake in Haiti"
-  description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
-  notes="Note: A shakemap represents the ground shaking produced by an earthquake."
->
-  <MyAiMap basePath="{assets}" />
-  <div slot="aria">
-    <p>
-      A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
-      Haiti at 8:29 a.m. EST, Aug. 14, 2021.
-    </p>
-    <table>
-      <tr>
-        <th>City</th>
-        <th>Felt shake strength</th>
-      </tr>
-      <tr>
-        <td>Les Cayes</td>
-        <td>Very strong</td>
-      </tr>
-      <tr>
-        <td>Jeremie</td>
-        <td>Strong</td>
-      </tr>
-    </table>
-  </div>
-</GraphicBlock>
-```
-
-[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
diff --git a/src/components/GraphicBlock/stories/docs/component.md b/src/components/GraphicBlock/stories/docs/component.md
deleted file mode 100644
index cc46d41d..00000000
--- a/src/components/GraphicBlock/stories/docs/component.md
+++ /dev/null
@@ -1,20 +0,0 @@
-The `GraphicBlock` component is a special derivative of the [`Block`](./?path=/docs/layout-block) component that also handles text elements around a graphic.
-
-Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this:
-
----
-
-```svelte
-<script>
-  import { GraphicBlock } from '@reuters-graphics/graphics-components';
-</script>
-
-<GraphicBlock
-  width="normal"
-  title="Title for my chart"
-  description="Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta."
-  notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
->
-  <div id="my-chart"></div>
-</GraphicBlock>
-```
diff --git a/src/components/GraphicBlock/stories/docs/customText.md b/src/components/GraphicBlock/stories/docs/customText.md
deleted file mode 100644
index e6ab9ee7..00000000
--- a/src/components/GraphicBlock/stories/docs/customText.md
+++ /dev/null
@@ -1,14 +0,0 @@
-You can override the markup used to generate the chart text elements by using the `title` and/or `notes` named slots like this:
-
-```svelte
-<GraphicBlock
-  width="normal"
-  notes="{'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)'}"
->
-  <h5 slot="title">My smaller title</h5>
-  <div id="my-chart"></div>
-  <aside slot="notes">
-    <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
-  </aside>
-</GraphicBlock>
-```

From 129d2dc7fd2e11f096f5433f40962e43ead4241f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 13:47:17 -0700
Subject: [PATCH 23/47] cleanup

---
 src/components/GraphicBlock/GraphicBlock.stories.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index ef6ad159..24867830 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -42,14 +42,12 @@
     description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
   >
-    <!-- Graphic content -->
     <AiMap />
   </GraphicBlock>
 </Story>
 
 <Story name="Custom text" exportName="CustomText">
   <GraphicBlock>
-    <!-- Graphic content -->
     <div class="demo-graphic">
       <img src={PlaceholderImg} alt="placeholder" />
     </div>
@@ -73,7 +71,6 @@
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
     ariaDescription="A map showing the shake intensity produced by the earthquake."
   >
-    <!-- Graphic content -->
     <AiMap />
   </GraphicBlock>
 </Story>
@@ -84,7 +81,6 @@
     description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
   >
-    <!-- Graphic content -->
     <AiMap />
     {#snippet customAria()}
       <p>

From 72d26e2573ad604e4de54c0fa9ecc9c1394390b0 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 13:47:49 -0700
Subject: [PATCH 24/47] cleanup

---
 src/components/GraphicBlock/GraphicBlock.stories.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 24867830..7e0e8452 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -29,7 +29,6 @@
     description="Some description for your chart."
     notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
   >
-    <!-- Graphic content -->
     <div id="my-chart">
       <img src={PlaceholderImg} alt="placeholder" />
     </div>

From ad707fdfe09e3bd2d7aee0dd6120eb971d79f3a1 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 13:51:23 -0700
Subject: [PATCH 25/47] cleans up children snippet

---
 src/components/GraphicBlock/components/AriaHidden.svelte | 5 +++--
 src/components/GraphicBlock/components/TextBlock.svelte  | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/GraphicBlock/components/AriaHidden.svelte b/src/components/GraphicBlock/components/AriaHidden.svelte
index 2b632b44..6186b2ec 100644
--- a/src/components/GraphicBlock/components/AriaHidden.svelte
+++ b/src/components/GraphicBlock/components/AriaHidden.svelte
@@ -6,16 +6,17 @@
      * Whether to wrap the graphic with an aria hidden tag.
      */
     hidden?: boolean;
+    /** Content to put inside `AriaHidden`*/
     children: Snippet;
   }
 
   let { hidden = false, children }: Props = $props();
 </script>
 
-{#if hidden && children}
+{#if hidden}
   <div aria-hidden="true">
     {@render children()}
   </div>
-{:else if children}
+{:else}
   {@render children()}
 {/if}
diff --git a/src/components/GraphicBlock/components/TextBlock.svelte b/src/components/GraphicBlock/components/TextBlock.svelte
index c647c024..b354973a 100644
--- a/src/components/GraphicBlock/components/TextBlock.svelte
+++ b/src/components/GraphicBlock/components/TextBlock.svelte
@@ -6,17 +6,17 @@
   interface Props {
     /** Width of the component within the text well. */
     width?: ContainerWidth;
-    // children?: import('svelte').Snippet;
-    children?: Snippet;
+    /** Content to put inside `TextBlock`*/
+    children: Snippet;
   }
 
   let { width, children }: Props = $props();
 </script>
 
-{#if width && children}
+{#if width}
   <Block {width} class="notes fmy-0">
     {@render children()}
   </Block>
-{:else if children}
+{:else}
   {@render children()}
 {/if}

From f6c3d9168119e6642bbe930e5070745164b96288 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 13:55:52 -0700
Subject: [PATCH 26/47] cleans up children snippet

---
 src/components/Block/Block.mdx            | 18 ++----
 src/components/Block/Block.stories.svelte | 78 ++++++++---------------
 src/components/Block/Block.svelte         |  7 +-
 3 files changed, 34 insertions(+), 69 deletions(-)

diff --git a/src/components/Block/Block.mdx b/src/components/Block/Block.mdx
index 522fbfe6..3ec8a139 100644
--- a/src/components/Block/Block.mdx
+++ b/src/components/Block/Block.mdx
@@ -6,7 +6,7 @@ import * as BlockStories from './Block.stories.svelte';
 
 # Block
 
-The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece. The contents of each block are rendered as [snippets](https://svelte.dev/docs/svelte/snippet).
+The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece.
 
 Blocks are stacked vertically within the well created by the [Article](./?path=/docs/components-page-layout-article--docs) component. They can have different widths on larger screens depending on the `width` prop.
 
@@ -18,9 +18,7 @@ Blocks are stacked vertically within the well created by the [Article](./?path=/
 </script>
 
 <Block>
-  {#snippet content()}
-    <!-- Contents for this block goes here -->
-  {/snippet}
+  <!-- Contents for this block goes here -->
 </Block>
 ```
 
@@ -52,9 +50,7 @@ You can use the `snap` prop to force the container to snap to each block width s
 
 ```svelte
 <Block width="wider" snap={true}>
-  {#snippet content()}
-    <!-- Contents for this block -->
-  {/snippet}
+  <!-- Contents for this block -->
 </Block>
 ```
 
@@ -67,9 +63,7 @@ If you want to skip certain block widths entirely, you can add one or more class
 ```svelte
 <!-- Will skip wide and go straight to normal column width on resize. -->
 <Block width="wider" snap={true} class="skip-wide">
-  {#snippet content()}
-    <!-- Contents for this block -->
-  {/snippet}
+  <!-- Contents for this block -->
 </Block>
 ```
 
@@ -83,9 +77,7 @@ Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you
 
 ```svelte
 <Block width="wider" snap={true} class="custom-blocks">
-  {#snippet content()}
-    <!-- Contents for this block -->
-  {/snippet}
+  <!-- Contents for this block -->
 </Block>
 
 <style lang="scss">
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index d1f22dc7..9c985c91 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -32,9 +32,7 @@
     <div class="article-boundaries">
       <div class="label">Article</div>
       <Block>
-        {#snippet content()}
-          <div class="label">Block</div>
-        {/snippet}
+        <div class="label">Block</div>
       </Block>
     </div>
   </Article>
@@ -44,20 +42,18 @@
 
 <Story name="Custom layout" exportName="CustomLayout">
   <Block width="fluid">
-    {#snippet content()}
-      <!-- Enter bootstrap grid! -->
-      <div id="block-flex-example">
-        <div class="row">
-          <div class="col">Column</div>
-          <div class="col-6">Column</div>
-          <div class="col">Column</div>
-        </div>
-        <div class="row">
-          <div class="col">Column</div>
-          <div class="col">Column</div>
-        </div>
+    <!-- Enter bootstrap grid! -->
+    <div id="block-flex-example">
+      <div class="row">
+        <div class="col">Column</div>
+        <div class="col-6">Column</div>
+        <div class="col">Column</div>
       </div>
-    {/snippet}
+      <div class="row">
+        <div class="col">Column</div>
+        <div class="col">Column</div>
+      </div>
+    </div>
   </Block>
 </Story>
 
@@ -67,9 +63,7 @@
       <div class="label">Article</div>
       <h4>snap widths</h4>
       <Block snap={true}>
-        {#snippet content()}
-          <div class="label">Block</div>
-        {/snippet}
+        <div class="label">Block</div>
       </Block>
     </div>
   </Article>
@@ -82,69 +76,49 @@
       <h4>Regular layout</h4>
 
       <Block width="narrower" snap={true} class="block-snap-widths-demo">
-        {#snippet content()}
-          narrower
-        {/snippet}
+        narrower
       </Block>
       <Block width="narrow" snap={true} class="block-snap-widths-demo">
-        {#snippet content()}
-          narrow
-        {/snippet}</Block
-      >
+        narrow
+      </Block>
       <Block width="normal" snap={true} class="block-snap-widths-demo">
-        {#snippet content()}
-          normal
-        {/snippet}
+        normal
       </Block>
       <Block width="wide" snap={true} class="block-snap-widths-demo">
-        {#snippet content()}
-          wide
-        {/snippet}
+        wide
       </Block>
       <Block width="wider" snap={true} class="block-snap-widths-demo">
-        {#snippet content()}
-          wider
-        {/snippet}
+        wider
       </Block>
 
       <h4>with snap and skip</h4>
       <Block width="narrower" snap={true} class="block-snap-widths-demo even">
-        {#snippet content()}
-          narrower
-        {/snippet}
+        narrower
       </Block>
       <Block width="narrow" snap={true} class="block-snap-widths-demo even">
-        {#snippet content()}
-          narrow
-        {/snippet}</Block
-      >
+        narrow
+      </Block>
       <Block
         width="normal"
         snap={true}
         class="block-snap-widths-demo even skip-narrow"
       >
-        {#snippet content()}
-          normal.skip-narrow
-        {/snippet}
+        normal.skip-narrow
       </Block>
       <Block
         width="wide"
         snap={true}
         class="block-snap-widths-demo even skip-normal skip-narrow"
       >
-        {#snippet content()}
-          wide.skip-normal.skip-narrow
-        {/snippet}
+        wide.skip-normal.skip-narrow
       </Block>
       <Block
         width="wider"
         snap={true}
         class="block-snap-widths-demo even skip-wide"
       >
-        {#snippet content()}
-          wider.skip-wide
-        {/snippet}</Block
-      >
+        wider.skip-wide
+      </Block>
     </div>
   </Article>
 </Story>
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index ed36b082..868733cc 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -5,7 +5,7 @@
 
   interface Props {
     /** Content that goes inside `<Block>`*/
-    content: Snippet;
+    children: Snippet;
     /** Width of the block within the article well. */
     width?: ContainerWidth;
     /** Add an id to the block tag to target it with custom CSS. */
@@ -21,7 +21,7 @@
   }
 
   let {
-    content,
+    children,
     width = 'normal',
     id = '',
     class: cls = '',
@@ -38,8 +38,7 @@
   {role}
   aria-label={ariaLabel}
 >
-  <!-- block content -->
-  {@render content()}
+  {@render children()}
 </div>
 
 <style lang="scss">

From c9b4c7d86c95f7996f0a833481a440503b66111e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:06:36 -0700
Subject: [PATCH 27/47] sets up headline docs

---
 src/components/Headline/Headline.mdx          | 137 ++++++++++++++++++
 .../Headline/Headline.stories.svelte          | 128 +++++++---------
 src/components/Headline/Headline.svelte       |  21 ++-
 .../Headline/{stories => demo}/crown.png      | Bin
 .../Headline/{stories => demo}/graphic-lg.png | Bin
 .../Headline/{stories => demo}/graphic-md.png | Bin
 .../Headline/{stories => demo}/graphic-sm.png | Bin
 .../Headline/{stories => demo}/graphic-xl.png | Bin
 .../Headline/{stories => demo}/graphic-xs.png | Bin
 .../Headline/{stories => demo}/graphic.svelte |  12 +-
 .../Headline/stories/docs/component.md        |  13 --
 .../Headline/stories/docs/customHed.md        |  31 ----
 .../Headline/stories/docs/withByline.md       |  13 --
 .../Headline/stories/docs/withCrownGraphic.md |  24 ---
 .../Headline/stories/docs/withCrownImage.md   |  21 ---
 .../Headline/stories/docs/withDek.md          |  11 --
 16 files changed, 204 insertions(+), 207 deletions(-)
 create mode 100644 src/components/Headline/Headline.mdx
 rename src/components/Headline/{stories => demo}/crown.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-lg.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-md.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-sm.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-xl.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-xs.png (100%)
 rename src/components/Headline/{stories => demo}/graphic.svelte (98%)
 delete mode 100644 src/components/Headline/stories/docs/component.md
 delete mode 100644 src/components/Headline/stories/docs/customHed.md
 delete mode 100644 src/components/Headline/stories/docs/withByline.md
 delete mode 100644 src/components/Headline/stories/docs/withCrownGraphic.md
 delete mode 100644 src/components/Headline/stories/docs/withCrownImage.md
 delete mode 100644 src/components/Headline/stories/docs/withDek.md

diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
new file mode 100644
index 00000000..afbdf0b8
--- /dev/null
+++ b/src/components/Headline/Headline.mdx
@@ -0,0 +1,137 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeadlineStories from './Headline.stories.svelte';
+
+<Meta of={HeadlineStories} />
+
+# Headline
+
+The `Headline` component creates the Reuters Graphics headline.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'World News'}
+/>
+```
+
+<Canvas of={HeadlineStories.Demo} />
+
+## Dek
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+/>
+```
+
+## With byline
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+  authors={['Dea Bankova', 'Aditi Bhandari']}
+  publishTime={new Date('2020-01-01').toISOString()}
+/>
+```
+
+## With custom hed
+Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline width="wide">
+  <h1 class="custom-hed" slot="hed">
+    <span class="small block text-base">The secret to</span>
+    “The Nutcracker's”
+    <span class="small block text-base fpt-1">success</span>
+  </h1>
+  <p class="custom-dek !fmt-3" slot="dek">
+    How “The Nutcracker” ballet became an<span
+      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+    >and a financial pillar of ballet companies across the country
+  </p>
+</Headline>
+
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
+```
+
+## With crown image
+
+Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+</script>
+
+<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
+  <!-- Add a crown -->
+  <img
+    slot="crown"
+    src={crownImgSrc}
+    width="100"
+    class="mx-auto mb-0"
+    alt="Illustration of Europe"
+  />
+  <!-- Override the hed with a named slot -->
+  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
+</Headline>
+```
+
+## With crown graphic
+
+Add a full graphic or any other component in the crown.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import Map from './ai2svelte/graphic.svelte';
+  import { assets } from '$app/paths';
+</script>
+
+<Headline
+  width="wider"
+  class="!fmt-1"
+  hed={'Unfriendly skies'}
+  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+  section={'Ukraine Crisis'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+>
+  <!-- Add a crown graphic -->
+  <div slot="crown">
+    <Map assetsPath={assets} />
+  </div>
+</Headline>
+```
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 720d119b..76ff4ec0 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -1,28 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import withBylineDocs from './stories/docs/withByline.md?raw';
-  // @ts-ignore raw
-  import withDekDocs from './stories/docs/withDek.md?raw';
-  // @ts-ignore raw
-  import customHedDocs from './stories/docs/customHed.md?raw';
-  // @ts-ignore raw
-  import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
-  // @ts-ignore raw
-  import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Headline from './Headline.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/Headline',
     component: Headline,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       hedSize: {
         control: 'select',
@@ -33,115 +15,107 @@
         options: ['normal', 'wide', 'wider', 'widest'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore img
-  import crownImgSrc from './stories/crown.png';
-  import Map from './stories/graphic.svelte';
+  import crownImgSrc from './demo/crown.png';
+  import Map from './demo/graphic.svelte';
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <Headline {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     section: 'World News',
     hed: 'Reuters Graphics interactive',
     hedSize: 'normal',
     dek: '',
     authors: [],
-  }}"
+  }}
 />
 
-<Story name="With dek" {...withStoryDocs(withDekDocs)}>
+<Story name="Dek">
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
   />
 </Story>
 
-<Story name="With byline" {...withStoryDocs(withBylineDocs)}>
+<Story name="Byline">
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-    authors="{['Dea Bankova', 'Aditi Bhandari']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Dea Bankova', 'Aditi Bhandari']}
+    publishTime={new Date('2020-01-01').toISOString()}
   />
 </Story>
 
-<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+<Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
     {#snippet hed()}
-        <h1 class="custom-hed" >
+      <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
-      {/snippet}
+    {/snippet}
     {#snippet dek()}
-        <p class="custom-dek !fmt-3" >
+      <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
         >and a financial pillar of ballet companies across the country
       </p>
-      {/snippet}
+    {/snippet}
   </Headline>
-  <style lang="scss">
-    .custom-hed {
-      line-height: 0.9;
-    }
-    .custom-dek {
-      span {
-        background-color: #fde68a;
-      }
-    }
-  </style>
 </Story>
 
-<Story name="With crown image" {...withStoryDocs(withCrownImgDocs)}>
-  <Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
+<Story name="Crown image" exportName="CrownImage">
+  >
+  <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
     <!-- Add a crown -->
     {#snippet crown()}
-        <img
-        
-        src="{crownImgSrc}"
+      <img
+        src={crownImgSrc}
         width="100"
         class="mx-auto mb-0"
         alt="Illustration of Europe"
       />
-      {/snippet}
-    <!-- Override the hed with a named slot -->
+    {/snippet}
+    <!-- Override the hed with a snippet -->
     {#snippet hed()}
-        <h1  class="!font-serif !tracking-wide">Europa</h1>
-      {/snippet}
+      <h1 class="!font-serif !tracking-wide">Europa</h1>
+    {/snippet}
   </Headline>
 </Story>
 
-<Story name="With crown graphic" {...withStoryDocs(withCrownGraphicDocs)}>
+<Story name="Crown graphic" exportName="CrownGraphic">
   <Headline
     width="wider"
     class="!fmt-1"
-    hed="{'Unfriendly skies'}"
-    dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-    section="{'Ukraine Crisis'}"
-    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-    publishTime="{new Date('2022-03-04').toISOString()}"
+    hed={'Unfriendly skies'}
+    dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+    section={'Ukraine Crisis'}
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2022-03-04').toISOString()}
   >
     <!-- Add a crown graphic -->
     {#snippet crown()}
-        <div >
+      <div>
         <Map />
       </div>
-      {/snippet}
+    {/snippet}
   </Headline>
 </Story>
+
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index ef10aa1b..3a2e39b0 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script lang="ts">
   import type { HeadlineSize } from './../@types/global';
@@ -95,8 +94,8 @@
           <!-- Headline named slot -->
           <slot name="hed" />
         {:else}
-          <h1 class="{hedClass}">
-            <Markdown source="{hed}" parseInline />
+          <h1 class={hedClass}>
+            <Markdown source={hed} parseInline />
           </h1>
         {/if}
         {#if $$slots.dek}
@@ -106,7 +105,7 @@
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
-            <Markdown source="{dek}" />
+            <Markdown source={dek} />
           </div>
         {/if}
       </div>
@@ -115,7 +114,7 @@
         <slot name="byline" />
       {:else if authors.length > 0 || publishTime}
         <Byline
-          class="fmy-4"
+          cls="fmy-4"
           {authors}
           {publishTime}
           {updateTime}
@@ -127,17 +126,17 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../scss/mixins' as mixins;
   .headline-wrapper {
     :global(.dek) {
       max-width: $column-width-normal;
     }
     :global(.dek p) {
-      @include fmt-0;
-      @include font-note;
-      @include leading-tight;
-      @include font-light;
-      @include fmb-3;
+      @include mixins.fmt-0;
+      @include mixins.font-note;
+      @include mixins.leading-tight;
+      @include mixins.font-light;
+      @include mixins.fmb-3;
     }
   }
 </style>
diff --git a/src/components/Headline/stories/crown.png b/src/components/Headline/demo/crown.png
similarity index 100%
rename from src/components/Headline/stories/crown.png
rename to src/components/Headline/demo/crown.png
diff --git a/src/components/Headline/stories/graphic-lg.png b/src/components/Headline/demo/graphic-lg.png
similarity index 100%
rename from src/components/Headline/stories/graphic-lg.png
rename to src/components/Headline/demo/graphic-lg.png
diff --git a/src/components/Headline/stories/graphic-md.png b/src/components/Headline/demo/graphic-md.png
similarity index 100%
rename from src/components/Headline/stories/graphic-md.png
rename to src/components/Headline/demo/graphic-md.png
diff --git a/src/components/Headline/stories/graphic-sm.png b/src/components/Headline/demo/graphic-sm.png
similarity index 100%
rename from src/components/Headline/stories/graphic-sm.png
rename to src/components/Headline/demo/graphic-sm.png
diff --git a/src/components/Headline/stories/graphic-xl.png b/src/components/Headline/demo/graphic-xl.png
similarity index 100%
rename from src/components/Headline/stories/graphic-xl.png
rename to src/components/Headline/demo/graphic-xl.png
diff --git a/src/components/Headline/stories/graphic-xs.png b/src/components/Headline/demo/graphic-xs.png
similarity index 100%
rename from src/components/Headline/stories/graphic-xs.png
rename to src/components/Headline/demo/graphic-xs.png
diff --git a/src/components/Headline/stories/graphic.svelte b/src/components/Headline/demo/graphic.svelte
similarity index 98%
rename from src/components/Headline/stories/graphic.svelte
rename to src/components/Headline/demo/graphic.svelte
index 28a6b06c..bfccbab4 100644
--- a/src/components/Headline/stories/graphic.svelte
+++ b/src/components/Headline/demo/graphic.svelte
@@ -14,7 +14,7 @@
   let width = $state(null);
 </script>
 
-<div id="g-graphic-box" bind:clientWidth="{width}">
+<div id="g-graphic-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-graphic-xs" class="g-artboard" style="">
@@ -22,7 +22,7 @@
       <div
         id="g-graphic-xs-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-3"
@@ -89,7 +89,7 @@
       <div
         id="g-graphic-sm-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -213,7 +213,7 @@
       <div
         id="g-graphic-md-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
 
       <div
@@ -346,7 +346,7 @@
       <div
         id="g-graphic-lg-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -485,7 +485,7 @@
       <div
         id="g-graphic-xl-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"
diff --git a/src/components/Headline/stories/docs/component.md b/src/components/Headline/stories/docs/component.md
deleted file mode 100644
index c20fc753..00000000
--- a/src/components/Headline/stories/docs/component.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Reuters Graphics headline
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'World News'}"
-/>
-```
diff --git a/src/components/Headline/stories/docs/customHed.md b/src/components/Headline/stories/docs/customHed.md
deleted file mode 100644
index 25228bd3..00000000
--- a/src/components/Headline/stories/docs/customHed.md
+++ /dev/null
@@ -1,31 +0,0 @@
-Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline width="wide">
-  <h1 class="custom-hed" slot="hed">
-    <span class="small block text-base">The secret to</span>
-    “The Nutcracker's”
-    <span class="small block text-base fpt-1">success</span>
-  </h1>
-  <p class="custom-dek !fmt-3" slot="dek">
-    How “The Nutcracker” ballet became an<span
-      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
-    >and a financial pillar of ballet companies across the country
-  </p>
-</Headline>
-
-<style lang="scss">
-  .custom-hed {
-    line-height: 0.9;
-  }
-  .custom-dek {
-    span {
-      background-color: #fde68a;
-    }
-  }
-</style>
-```
diff --git a/src/components/Headline/stories/docs/withByline.md b/src/components/Headline/stories/docs/withByline.md
deleted file mode 100644
index eff73515..00000000
--- a/src/components/Headline/stories/docs/withByline.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-  authors="{['Dea Bankova', 'Aditi Bhandari']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
-/>
-```
diff --git a/src/components/Headline/stories/docs/withCrownGraphic.md b/src/components/Headline/stories/docs/withCrownGraphic.md
deleted file mode 100644
index 48a7099a..00000000
--- a/src/components/Headline/stories/docs/withCrownGraphic.md
+++ /dev/null
@@ -1,24 +0,0 @@
-Add a full graphic or any other component in the crown.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline
-  width="wider"
-  class="!fmt-1"
-  hed="{'Unfriendly skies'}"
-  dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-  section="{'Ukraine Crisis'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2022-03-04').toISOString()}"
->
-  <!-- Add a crown graphic -->
-  <div slot="crown">
-    <Map assetsPath="{assets}" />
-  </div>
-</Headline>
-```
diff --git a/src/components/Headline/stories/docs/withCrownImage.md b/src/components/Headline/stories/docs/withCrownImage.md
deleted file mode 100644
index f705d9cb..00000000
--- a/src/components/Headline/stories/docs/withCrownImage.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
-  <!-- Add a crown -->
-  <img
-    slot="crown"
-    src="{crownImgSrc}"
-    width="100"
-    class="mx-auto mb-0"
-    alt="Illustration of Europe"
-  />
-  <!-- Override the hed with a named slot -->
-  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
-</Headline>
-```
diff --git a/src/components/Headline/stories/docs/withDek.md b/src/components/Headline/stories/docs/withDek.md
deleted file mode 100644
index 63b808c7..00000000
--- a/src/components/Headline/stories/docs/withDek.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-/>
-```

From 2f7c40f6c18eb4c7f0e83256a417253a897e7980 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:17:31 -0700
Subject: [PATCH 28/47] migrated Headline.svelte

---
 .../Headline/Headline.stories.svelte          |   5 +-
 src/components/Headline/Headline.svelte       | 123 +++++++++---------
 2 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 76ff4ec0..3610b645 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -54,14 +54,14 @@
 
 <Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
-    {#snippet hed()}
+    {#snippet customHed()}
       <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
     {/snippet}
-    {#snippet dek()}
+    {#snippet customDek()}
       <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
@@ -72,7 +72,6 @@
 </Story>
 
 <Story name="Crown image" exportName="CrownImage">
-  >
   <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
     <!-- Add a crown -->
     {#snippet crown()}
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 3a2e39b0..7b8fbb6b 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -1,59 +1,62 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script lang="ts">
+  // Types
   import type { HeadlineSize } from './../@types/global';
+  import type { Snippet } from 'svelte';
 
-  /**
-   * Headline, parsed as an _inline_ markdown string in an `h1` element.
-   * @type {string}
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-
-  /** Add extra classes to the block tag to target it with custom CSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Headline size
-   * @type {string}
-   */
-  export let hedSize: HeadlineSize = 'normal';
-
-  /**
-   * Dek, parsed as a markdown string.
-   * @type {string}
-   */
-  export let dek: string | null = null;
-  /**
-   * Section title
-   * @type {string}
-   */
-  export let section: string | null = null;
-  /**
-   * Array of author names, which will be slugified to create links to Reuters author pages
-   */
-  export let authors: string[] = [];
-  /**
-   * Publish time as a datetime string.
-   * @type {string}
-   */
-  export let publishTime: string = '';
-  /**
-   * Update time as a datetime string.
-   * @type {string}
-   */
-  export let updateTime: string = '';
-
-  /**
-   * Width of the headline.
-   */
-  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
-
+  // Components
   import Block from '../Block/Block.svelte';
   import Byline from '../Byline/Byline.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
 
-  let hedClass: string;
-  $: {
+  interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element. */
+    hed: string;
+    /** Custom byline snippet */
+    byline?: Snippet;
+    /** Custom headline snippet */
+    customHed?: Snippet;
+    /** Add extra classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /** Headline size: small, normal, big, bigger, biggest */
+    hedSize?: HeadlineSize;
+    /** Dek, parsed as a markdown string. */
+    dek?: string;
+    /** Custom dek snippet */
+    customDek?: Snippet;
+    /** Custom crown snippet */
+    crown?: Snippet;
+    /** Section title */
+    section?: string;
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
+    authors?: string[];
+    /** Publish time as a datetime string. */
+    publishTime?: string;
+    /** Update time as a datetime string. */
+    updateTime?: string;
+    /** Width of the headline: normal, wide, wider, widest */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+  }
+
+  let {
+    hed = 'Reuters Graphics Interactive',
+    byline,
+    customHed,
+    class: cls = '',
+    hedSize = 'normal',
+    dek,
+    customDek,
+    crown,
+    section,
+    authors = [],
+    publishTime = '',
+    updateTime = '',
+    width = 'normal',
+  }: Props = $props();
+
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $state('text-3xl');
+  $effect(() => {
     switch (hedSize) {
       case 'biggest':
         hedClass = 'text-6xl';
@@ -70,16 +73,16 @@
       default:
         hedClass = 'text-3xl';
     }
-  }
+  });
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
   <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
-      {#if $$slots.crown}
+      {#if crown}
         <div class="crown-container">
-          <!-- Crown named slot -->
-          <slot name="crown" />
+          <!-- Crown snippet -->
+          {@render crown()}
         </div>
       {/if}
       <div class="title">
@@ -90,18 +93,18 @@
             {section}
           </p>
         {/if}
-        {#if $$slots.hed}
-          <!-- Headline named slot -->
-          <slot name="hed" />
+        {#if customHed}
+          <!-- Headline snippet -->
+          {@render customHed()}
         {:else}
           <h1 class={hedClass}>
             <Markdown source={hed} parseInline />
           </h1>
         {/if}
-        {#if $$slots.dek}
-          <!-- Dek named slot-->
+        {#if customDek}
+          <!-- Dek snippet-->
           <div class="dek fmx-auto fmb-6">
-            <slot name="dek" />
+            {@render customDek()}
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
@@ -109,9 +112,9 @@
           </div>
         {/if}
       </div>
-      {#if $$slots.byline}
+      {#if byline}
         <!-- Custom byline/dateline -->
-        <slot name="byline" />
+        {@render byline()}
       {:else if authors.length > 0 || publishTime}
         <Byline
           cls="fmy-4"

From 19a5908a4fd343f89a08871962189aa1be8c5d32 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:42:02 -0700
Subject: [PATCH 29/47] updates snippet prop names

---
 src/components/GraphicBlock/GraphicBlock.mdx  | 12 ++--
 .../GraphicBlock/GraphicBlock.stories.svelte  |  6 +-
 .../GraphicBlock/GraphicBlock.svelte          | 66 ++++++++-----------
 3 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/src/components/GraphicBlock/GraphicBlock.mdx b/src/components/GraphicBlock/GraphicBlock.mdx
index 14dd3dad..3df1e4e3 100644
--- a/src/components/GraphicBlock/GraphicBlock.mdx
+++ b/src/components/GraphicBlock/GraphicBlock.mdx
@@ -6,7 +6,7 @@ import * as GraphicBlockStories from './GraphicBlock.stories.svelte';
 
 # GraphicBlock
 
-The `GraphicBlock` component is a special derivative of the [Block](./?path=/docs/layout-block) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
+The `GraphicBlock` component is a special derivative of the [Block](?path=/docs/components-page-layout-block--docs) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
 
 Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with styled text.
 
@@ -106,12 +106,12 @@ To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2sve
 
 ## Custom text
 
-You can override the default styles for title and notes by making your own custom elements with the `customTitle` and `customNotes` [snippets](https://svelte.dev/docs/svelte/snippet):
+You can override the default styles for title and notes by making your own custom elements and passing them as `title` and `notes` [snippets](https://svelte.dev/docs/svelte/snippet) instead of as strings:
 
 ```svelte
 <GraphicBlock>
   <!-- Custom title snippet -->
-  {#snippet customTitle()}
+  {#snippet title()}
     <h5>My smaller title</h5>
   {/snippet}
 
@@ -119,7 +119,7 @@ You can override the default styles for title and notes by making your own custo
   <div id="my-chart"></div>
 
   <!-- Custom notes snippet -->
-  {#snippet customNotes()}
+  {#snippet notes()}
     <aside>
       <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
     </aside>
@@ -153,7 +153,7 @@ The `ariaDescription` string will be processed as markdown, so you can add multi
 
 ## Custom ARIA descriptions
 
-Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, use the `customAria` [snippet](https://svelte.dev/docs/svelte/snippet).
+Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, pass the custom elements as an `ariaDescription` [snippet](https://svelte.dev/docs/svelte/snippet) instead of as a string, as in the [example above](?path=/docs/components-graphics-graphicblock--docs#aria-descriptions).
 
 [Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
 
@@ -169,7 +169,7 @@ Sometimes, instead of a simple sentence, we want to provide a data table or some
   <AiChart assetsPath={assets || '/'} />
 
   <!-- Custom ARIA description snippet -->
-  {#snippet customAria()}
+  {#snippet ariaDescription()}
     <p>
       A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
       Haiti at 8:29 a.m. EST, Aug. 14, 2021.
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 7e0e8452..07c70115 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -51,11 +51,11 @@
       <img src={PlaceholderImg} alt="placeholder" />
     </div>
 
-    {#snippet customTitle()}
+    {#snippet title()}
       <h5>My smaller title</h5>
     {/snippet}
 
-    {#snippet customNotes()}
+    {#snippet notes()}
       <aside>
         <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
       </aside>
@@ -81,7 +81,7 @@
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
   >
     <AiMap />
-    {#snippet customAria()}
+    {#snippet ariaDescription()}
       <p>
         A shakemap shows the intensity of the 7.2-magnitude earthquake that
         struck Haiti at 8:29 a.m. EST, Aug. 14, 2021.
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index b5079208..0ae66ca8 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -29,11 +29,9 @@
      */
     role?: string;
     /**
-     * Notes to the graphic, passed in as a markdown string.
+     * Notes to the graphic, passed in as a markdown string OR as a custom snippet.
      */
-    notes?: string;
-    /** Custom notes snippet */
-    customNotes?: Snippet;
+    notes?: string | Snippet;
     /**
      * Width of the component within the text well.
      */
@@ -43,11 +41,9 @@
      */
     textWidth?: ContainerWidth;
     /**
-     * Title of the graphic
+     * Title of the graphic as a string or a custom snippet.
      */
-    title?: string;
-    /** Custom title snippet */
-    customTitle?: Snippet;
+    title?: string | Snippet;
     /**
      * Description of the graphic, passed in as a markdown string.
      */
@@ -57,11 +53,9 @@
      */
     ariaLabel?: string;
     /**
-     * ARIA description, passed in as a markdown string.
+     * ARIA description, passed in as a markdown string OR as a custom snippet.
      */
-    ariaDescription?: string;
-    /** Custom ARIA snippet */
-    customAria?: Snippet;
+    ariaDescription?: string | Snippet;
   }
 
   let {
@@ -71,27 +65,18 @@
     snap = false,
     role,
     notes,
-    customNotes,
     width = 'normal',
     textWidth = 'normal',
     title,
-    customTitle,
     description,
     ariaLabel = 'chart',
     ariaDescription,
-    customAria,
   }: Props = $props();
 </script>
 
 <Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
-  {#if customTitle}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <!-- Custom title snippet -->
-        {@render customTitle()}
-      </TextBlock>
-    </PaddingReset>
-  {:else if title}
+  <!-- Check if `title` is a snippet -->
+  {#if typeof title === 'string'}
     <PaddingReset containerIsFluid={width === 'fluid'}>
       <TextBlock width={textWidth}>
         <h3>{title}</h3>
@@ -100,29 +85,29 @@
         {/if}
       </TextBlock>
     </PaddingReset>
+  {:else if title}
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
+        <!-- Custom title snippet -->
+        {@render title()}
+      </TextBlock>
+    </PaddingReset>
   {/if}
-  <AriaHidden hidden={!!customAria || !!ariaDescription}>
+  <AriaHidden hidden={!!ariaDescription}>
     <!-- Graphic content -->
     {@render children()}
   </AriaHidden>
-  {#if customAria || ariaDescription}
+  {#if ariaDescription}
     <div class="visually-hidden">
-      {#if customAria}
-        <!-- Custom ARIA snippet -->
-        {@render customAria()}
-      {:else if ariaDescription}
+      {#if typeof ariaDescription === 'string'}
         <Markdown source={ariaDescription} />
+      {:else}
+        <!-- Custom ARIA snippet -->
+        {@render ariaDescription()}
       {/if}
     </div>
   {/if}
-  {#if customNotes}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <!-- Custom notes content -->
-        {@render customNotes()}
-      </TextBlock>
-    </PaddingReset>
-  {:else if notes}
+  {#if typeof notes === 'string'}
     <PaddingReset containerIsFluid={width === 'fluid'}>
       <TextBlock width={textWidth}>
         <aside>
@@ -130,6 +115,13 @@
         </aside>
       </TextBlock>
     </PaddingReset>
+  {:else if notes}
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
+        <!-- Custom notes content -->
+        {@render notes()}
+      </TextBlock>
+    </PaddingReset>
   {/if}
 </Block>
 

From 478f16472a8f0e61b47461ef2e2a5b887f14a1f6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:46:42 -0700
Subject: [PATCH 30/47] set up snippets in Headline.svelte, working on docs

---
 src/components/Headline/Headline.mdx          |  5 +--
 .../Headline/Headline.stories.svelte          |  4 +--
 src/components/Headline/Headline.svelte       | 36 ++++++++-----------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index afbdf0b8..4e9fdf5c 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -52,8 +52,9 @@ The `Headline` component creates the Reuters Graphics headline.
 />
 ```
 
-## With custom hed
-Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
+## With custom hed
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with completely custom markup.
 
 ```svelte
 <script>
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 3610b645..51da9ece 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -54,14 +54,14 @@
 
 <Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
-    {#snippet customHed()}
+    {#snippet hed()}
       <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
     {/snippet}
-    {#snippet customDek()}
+    {#snippet dek()}
       <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 7b8fbb6b..f14194d9 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -10,20 +10,16 @@
   import Markdown from '../Markdown/Markdown.svelte';
 
   interface Props {
-    /** Headline, parsed as an _inline_ markdown string in an `h1` element. */
-    hed: string;
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
     /** Custom byline snippet */
     byline?: Snippet;
-    /** Custom headline snippet */
-    customHed?: Snippet;
     /** Add extra classes to the block tag to target it with custom CSS. */
     class?: string;
     /** Headline size: small, normal, big, bigger, biggest */
     hedSize?: HeadlineSize;
-    /** Dek, parsed as a markdown string. */
-    dek?: string;
-    /** Custom dek snippet */
-    customDek?: Snippet;
+    /** Dek, parsed as a markdown string OR as a custom snippet. */
+    dek?: string | Snippet;
     /** Custom crown snippet */
     crown?: Snippet;
     /** Section title */
@@ -41,11 +37,9 @@
   let {
     hed = 'Reuters Graphics Interactive',
     byline,
-    customHed,
     class: cls = '',
     hedSize = 'normal',
     dek,
-    customDek,
     crown,
     section,
     authors = [],
@@ -93,23 +87,23 @@
             {section}
           </p>
         {/if}
-        {#if customHed}
-          <!-- Headline snippet -->
-          {@render customHed()}
-        {:else}
+        {#if typeof hed === 'string'}
           <h1 class={hedClass}>
             <Markdown source={hed} parseInline />
           </h1>
+        {:else if hed}
+          <!-- Headline snippet -->
+          {@render hed()}
         {/if}
-        {#if customDek}
-          <!-- Dek snippet-->
-          <div class="dek fmx-auto fmb-6">
-            {@render customDek()}
-          </div>
-        {:else if dek}
+        {#if typeof dek === 'string'}
           <div class="dek fmx-auto fmb-6">
             <Markdown source={dek} />
           </div>
+        {:else if dek}
+          <!-- Dek snippet-->
+          <div class="dek fmx-auto fmb-6">
+            {@render dek()}
+          </div>
         {/if}
       </div>
       {#if byline}
@@ -132,7 +126,7 @@
   @use '../../scss/mixins' as mixins;
   .headline-wrapper {
     :global(.dek) {
-      max-width: $column-width-normal;
+      max-width: mixins.$column-width-normal;
     }
     :global(.dek p) {
       @include mixins.fmt-0;

From 0a4155949a7dd7205ca5d9b88396343dd5dce017 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 08:16:20 -0700
Subject: [PATCH 31/47] adds notes on getAuthorPage prop to Byline;

---
 src/components/Byline/Byline.mdx              | 24 ++++++++++++++++++-
 src/components/Byline/Byline.stories.svelte   | 19 ++++++++++++++-
 src/components/Byline/Byline.svelte           |  8 ++-----
 src/components/Headline/Headline.mdx          | 24 ++++---------------
 .../Headline/Headline.stories.svelte          |  6 ++---
 src/components/Headline/Headline.svelte       | 12 ++++++----
 src/utils/index.ts                            |  9 +++++++
 7 files changed, 67 insertions(+), 35 deletions(-)
 create mode 100644 src/utils/index.ts

diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx
index dbff6ad5..94106e99 100644
--- a/src/components/Byline/Byline.mdx
+++ b/src/components/Byline/Byline.mdx
@@ -58,7 +58,7 @@ updateTime: 2021-09-12T12:57:00.000Z
 
 <Canvas of={BylineStories.Demo} />
 
-## Cutomisation
+## Custom byline, published and updated datelines
 
 Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
 
@@ -82,3 +82,25 @@ Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline,
 ```
 
 <Canvas of={BylineStories.Customised} />
+
+## Custom author page
+
+By default, the `Byline` component will hyperlink each author's byline to their Reuters.com page, formatted `https://www.reuters.com/authors/{author-slug}/`.
+
+To hyperlink to different pages or email addresses, pass a custom function to the `getAuthorPage` prop.
+
+```svelte
+<!-- Pass a custom function as `getAuthorPage` -->
+<Byline
+  authors={['Dea Bankova', 'Prasanta Kumar Dutta', 'Anurag Rao', 'Mariano Zafra']}
+  publishTime="2021-09-12T00:00:00Z"
+  updateTime="2021-09-12T13:57:00Z"
+  getAuthorPage={(author: string) => {
+    return `mailto:${author.replace(' ', '')}@example.com`;
+  }}
+/>
+
+```
+
+<Canvas of={BylineStories.CustomAuthorPage} />
+````
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index c0cf796a..6a81142a 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -18,7 +18,6 @@
 <Story
   name="Demo"
   args={{
-    align: 'left',
     authors: [
       'Dea Bankova',
       'Prasanta Kumar Dutta',
@@ -43,3 +42,21 @@
     {/snippet}
   </Byline>
 </Story>
+
+<Story
+  name="Custom author page"
+  exportName="CustomAuthorPage"
+  args={{
+    authors: [
+      'Dea Bankova',
+      'Prasanta Kumar Dutta',
+      'Anurag Rao',
+      'Mariano Zafra',
+    ],
+    publishTime: '2021-09-12T00:00:00Z',
+    updateTime: '2021-09-12T13:57:00Z',
+    getAuthorPage: (author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    },
+  }}
+/>
diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index c904e27f..fa8e2558 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -1,8 +1,8 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
 <script lang="ts">
+  import { getAuthorPageUrl } from '../../utils';
   import Block from '../Block/Block.svelte';
-  import slugify from 'slugify';
   import { apdate } from 'journalize';
   import type { Snippet } from 'svelte';
 
@@ -46,7 +46,6 @@
     /**
      * Optional snippet for a custom published dateline.
      */
-    // Specify that this prop should have the type of a Svelte snippet, i.e. basic html
     published?: Snippet;
     /**
      * Optional snippet for a custom updated dateline.
@@ -61,10 +60,7 @@
     align = 'left',
     id = '',
     cls = '',
-    getAuthorPage = (author: string): string => {
-      const authorSlug = slugify(author.trim(), { lower: true });
-      return `https://www.reuters.com/authors/${authorSlug}/`;
-    },
+    getAuthorPage = getAuthorPageUrl,
     byline,
     published,
     updated,
diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index 4e9fdf5c..1e648521 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -6,7 +6,7 @@ import * as HeadlineStories from './Headline.stories.svelte';
 
 # Headline
 
-The `Headline` component creates the Reuters Graphics headline.
+The `Headline` component creates headlines in the legacy Reuters Graphics style, with the text centred on the page.
 
 ```svelte
 <script>
@@ -14,29 +14,15 @@ The `Headline` component creates the Reuters Graphics headline.
 </script>
 
 <Headline
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  section={'World News'}
+  hed="Reuters Graphics Interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
 />
 ```
 
 <Canvas of={HeadlineStories.Demo} />
 
-## Dek
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  section={'Global news'}
-/>
-```
-
-## With byline
+## With authors and publish time
 
 ```svelte
 <script>
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 51da9ece..f2637248 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -26,11 +26,9 @@
 <Story
   name="Demo"
   args={{
-    section: 'World News',
     hed: 'Reuters Graphics interactive',
-    hedSize: 'normal',
-    dek: '',
-    authors: [],
+    dek: 'The beginning of a beautiful page',
+    section: 'World News',
   }}
 />
 
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index f14194d9..02a8d7ef 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -26,6 +26,10 @@
     section?: string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors?: string[];
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
     /** Publish time as a datetime string. */
     publishTime?: string;
     /** Update time as a datetime string. */
@@ -106,10 +110,7 @@
           </div>
         {/if}
       </div>
-      {#if byline}
-        <!-- Custom byline/dateline -->
-        {@render byline()}
-      {:else if authors.length > 0 || publishTime}
+      {#if authors.length > 0 || publishTime}
         <Byline
           cls="fmy-4"
           {authors}
@@ -117,6 +118,9 @@
           {updateTime}
           align="center"
         />
+      {:else if byline}
+        <!-- Custom byline/dateline -->
+        {@render byline()}
       {/if}
     </header>
   </Block>
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..0760531d
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,9 @@
+import slugify from 'slugify';
+
+/**
+ * Custom function that returns an author page URL.
+ */
+export const getAuthorPageUrl = (author: string): string => {
+  const authorSlug = slugify(author.trim(), { lower: true });
+  return `https://www.reuters.com/authors/${authorSlug}/`;
+};

From afb6270b46f56c32f10cfcb60898951867f84a84 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 08:53:08 -0700
Subject: [PATCH 32/47] cleaned up headline docs

---
 src/components/Byline/Byline.mdx              |  4 +-
 src/components/Byline/Byline.stories.svelte   |  1 +
 src/components/Headline/Headline.mdx          | 88 ++++++++++++-------
 .../Headline/Headline.stories.svelte          | 31 +++----
 src/components/Headline/Headline.svelte       | 39 +++++---
 5 files changed, 102 insertions(+), 61 deletions(-)

diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx
index 94106e99..3f812644 100644
--- a/src/components/Byline/Byline.mdx
+++ b/src/components/Byline/Byline.mdx
@@ -96,8 +96,8 @@ To hyperlink to different pages or email addresses, pass a custom function to th
   publishTime="2021-09-12T00:00:00Z"
   updateTime="2021-09-12T13:57:00Z"
   getAuthorPage={(author: string) => {
-    return `mailto:${author.replace(' ', '')}@example.com`;
-  }}
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
 />
 
 ```
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index 6a81142a..33705d5a 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -46,6 +46,7 @@
 <Story
   name="Custom author page"
   exportName="CustomAuthorPage"
+  tags={['!autodocs', '!dev']}
   args={{
     authors: [
       'Dea Bankova',
diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index 1e648521..dd2f3e58 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -22,7 +22,11 @@ The `Headline` component creates headlines in the legacy Reuters Graphics style,
 
 <Canvas of={HeadlineStories.Demo} />
 
-## With authors and publish time
+## With bylines and dateline
+
+Optionally, you can add authors and a publish time to the headline, which the `Headline` component internally renders with the [Byline](./?path=/docs/components-text-elements-byline--docs) component.
+
+> **Note**: Since `Headline` uses `Byline`, you can customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
 
 ```svelte
 <script>
@@ -33,14 +37,19 @@ The `Headline` component creates headlines in the legacy Reuters Graphics style,
   hed={'Reuters Graphics Interactive'}
   dek={'The beginning of a beautiful page'}
   section={'Global news'}
-  authors={['Dea Bankova', 'Aditi Bhandari']}
+  authors={['Jane Doe']}
   publishTime={new Date('2020-01-01').toISOString()}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
 />
 ```
 
-## With custom hed
+<Canvas of={HeadlineStories.Byline} />
 
-Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with completely custom markup.
+## Custom hed and dek
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with custom elements.
 
 ```svelte
 <script>
@@ -48,18 +57,26 @@ Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to
 </script>
 
 <Headline width="wide">
-  <h1 class="custom-hed" slot="hed">
-    <span class="small block text-base">The secret to</span>
-    “The Nutcracker's”
-    <span class="small block text-base fpt-1">success</span>
-  </h1>
-  <p class="custom-dek !fmt-3" slot="dek">
-    How “The Nutcracker” ballet became an<span
-      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
-    >and a financial pillar of ballet companies across the country
-  </p>
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1 class="custom-hed">
+      <span class="small block text-base">The secret to</span>
+      “The Nutcracker's”
+      <span class="small block text-base fpt-1">success</span>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <p class="custom-dek !fmt-3">
+      How “The Nutcracker” ballet became an<span
+        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+      >and a financial pillar of ballet companies across the country
+    </p>
+  {/snippet}
 </Headline>
 
+<!-- Custom styles -->
 <style lang="scss">
   .custom-hed {
     line-height: 0.9;
@@ -72,9 +89,11 @@ Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to
 </style>
 ```
 
+<Canvas of={HeadlineStories.CustomHedDek} />
+
 ## With crown image
 
-Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
+To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/snippet).
 
 ```svelte
 <script>
@@ -82,20 +101,25 @@ Add a crown image in the `crown` named slot and override the headline in the `he
   import { assets } from '$app/paths';
 </script>
 
-<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
+<Headline
+  class="!fmt-3"
+  hed="Europa"
+  publishTime={new Date('2020-01-01').toISOString()}
+>
   <!-- Add a crown -->
-  <img
-    slot="crown"
-    src={crownImgSrc}
-    width="100"
-    class="mx-auto mb-0"
-    alt="Illustration of Europe"
-  />
-  <!-- Override the hed with a named slot -->
-  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
+  {#snippet crown()}
+    <img
+      src={crownImgSrc}
+      width="100"
+      class="mx-auto mb-0"
+      alt="Illustration of Europe"
+    />
+  {/snippet}
 </Headline>
 ```
 
+<Canvas of={HeadlineStories.CrownImage} />
+
 ## With crown graphic
 
 Add a full graphic or any other component in the crown.
@@ -103,8 +127,9 @@ Add a full graphic or any other component in the crown.
 ```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
+  import { assets } from '$app/paths'; // If in Graphis Kit
+
+  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
 </script>
 
 <Headline
@@ -117,8 +142,11 @@ Add a full graphic or any other component in the crown.
   publishTime={new Date('2022-03-04').toISOString()}
 >
   <!-- Add a crown graphic -->
-  <div slot="crown">
-    <Map assetsPath={assets} />
-  </div>
+  {#snippet crown()}
+    <!-- Pass `assetsPath` if in Graphics Kit -->
+    <Map assetsPath={assets || '/'} />
+  {/snippet}
 </Headline>
 ```
+
+<Canvas of={HeadlineStories.CrownGraphic} />
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index f2637248..0b48df75 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -32,25 +32,20 @@
   }}
 />
 
-<Story name="Dek">
+<Story name="With byline and dateline" exportName="Byline">
   <Headline
     hed={'Reuters Graphics Interactive'}
     dek={'The beginning of a beautiful page'}
     section={'Global news'}
-  />
-</Story>
-
-<Story name="Byline">
-  <Headline
-    hed={'Reuters Graphics Interactive'}
-    dek={'The beginning of a beautiful page'}
-    section={'Global news'}
-    authors={['Dea Bankova', 'Aditi Bhandari']}
+    authors={['Jane Doe']}
     publishTime={new Date('2020-01-01').toISOString()}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
   />
 </Story>
 
-<Story name="Custom hed" exportName="CustomHed">
+<Story name="Custom hed and dek" exportName="CustomHedDek">
   <Headline width="wide">
     {#snippet hed()}
       <h1 class="custom-hed">
@@ -70,7 +65,11 @@
 </Story>
 
 <Story name="Crown image" exportName="CrownImage">
-  <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
+  <Headline
+    class="!fmt-3"
+    hed="Europa"
+    publishTime={new Date('2020-01-01').toISOString()}
+  >
     <!-- Add a crown -->
     {#snippet crown()}
       <img
@@ -80,10 +79,6 @@
         alt="Illustration of Europe"
       />
     {/snippet}
-    <!-- Override the hed with a snippet -->
-    {#snippet hed()}
-      <h1 class="!font-serif !tracking-wide">Europa</h1>
-    {/snippet}
   </Headline>
 </Story>
 
@@ -99,9 +94,7 @@
   >
     <!-- Add a crown graphic -->
     {#snippet crown()}
-      <div>
-        <Map />
-      </div>
+      <Map />
     {/snippet}
   </Headline>
 </Story>
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 02a8d7ef..07e77005 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -12,44 +12,60 @@
   interface Props {
     /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
     hed: string | Snippet;
-    /** Custom byline snippet */
-    byline?: Snippet;
+
     /** Add extra classes to the block tag to target it with custom CSS. */
     class?: string;
     /** Headline size: small, normal, big, bigger, biggest */
     hedSize?: HeadlineSize;
     /** Dek, parsed as a markdown string OR as a custom snippet. */
     dek?: string | Snippet;
-    /** Custom crown snippet */
-    crown?: Snippet;
+
     /** Section title */
     section?: string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors?: string[];
-    /**
-     * Custom function that returns an author page URL.
-     */
-    getAuthorPage?: (author: string) => string;
+
     /** Publish time as a datetime string. */
     publishTime?: string;
     /** Update time as a datetime string. */
     updateTime?: string;
     /** Width of the headline: normal, wide, wider, widest */
     width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /** Custom crown snippet */
+    crown?: Snippet;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
   }
 
   let {
     hed = 'Reuters Graphics Interactive',
-    byline,
     class: cls = '',
     hedSize = 'normal',
     dek,
-    crown,
     section,
     authors = [],
     publishTime = '',
     updateTime = '',
     width = 'normal',
+    getAuthorPage,
+    crown,
+    byline,
+    published,
+    updated,
   }: Props = $props();
 
   // Set the headline text size class based on the `hedSize` prop
@@ -116,6 +132,9 @@
           {authors}
           {publishTime}
           {updateTime}
+          {getAuthorPage}
+          {published}
+          {updated}
           align="center"
         />
       {:else if byline}

From 0689435f3bd83e433246e41679de49f0b767eb30 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 20 Mar 2025 12:35:37 -0700
Subject: [PATCH 33/47] migrates padding reset

---
 src/components/PaddingReset/PaddingReset.mdx  |  49 ++++++++++++
 .../PaddingReset/PaddingReset.stories.svelte  |  70 +++++++++---------
 .../PaddingReset/PaddingReset.svelte          |  16 ++--
 src/components/PaddingReset/shark.jpg         | Bin 0 -> 105346 bytes
 .../PaddingReset/stories/docs/component.md    |  35 ---------
 5 files changed, 93 insertions(+), 77 deletions(-)
 create mode 100644 src/components/PaddingReset/PaddingReset.mdx
 create mode 100644 src/components/PaddingReset/shark.jpg
 delete mode 100644 src/components/PaddingReset/stories/docs/component.md

diff --git a/src/components/PaddingReset/PaddingReset.mdx b/src/components/PaddingReset/PaddingReset.mdx
new file mode 100644
index 00000000..c2fa743d
--- /dev/null
+++ b/src/components/PaddingReset/PaddingReset.mdx
@@ -0,0 +1,49 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PaddingResetStories from './PaddingReset.stories.svelte';
+
+<Meta of={PaddingResetStories} />
+
+# PaddingReset
+
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on surrouding text such as ntoes or captions. The `PaddingReset` component resets padding to `0 15px` on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="fluid">
+  <!-- Image in `fluid` block is edge-to-edge -->
+  <img src="https:..." alt="Alt text" />
+
+  <!-- Wrap text in `PaddingReset`to add padding back in -->
+  <PaddingReset>
+    <p>A caption for the image that is padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+```
+
+<Canvas of={PaddingResetStories.Demo} />
+
+## Conditional padding
+
+You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  export let src = 'https://...';
+  export let width = 'fluid';
+</script>
+
+<Block {width}>
+  <img {src} alt="Alt text" />
+
+  <!-- Set `containerIsFluid: true` if `width === 'fluid'` -->
+  <PaddingReset containerIsFluid={width === 'fluid'}>
+    <p>A caption for the image that is padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+```
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index e85df8e5..015e1869 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -1,51 +1,49 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PaddingReset from './PaddingReset.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page layout/PaddingReset',
     component: PaddingReset,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
   import Block from '../Block/Block.svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  let width: ContainerWidth = 'fluid' as 'wide' | 'fluid';
+
+  import sharkSrc from './shark.jpg';
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <Block width="fluid">
-      <div class="outer"></div>
-      <PaddingReset {...args}>
-        <div class="inner"></div>
-      </PaddingReset>
-    </Block>
-  {/snippet}
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    containerIsFluid: true,
-  }}"
-/>
+<Story name="Demo">
+  <!-- Fluid block -->
+  <Block {width}>
+    <img src={sharkSrc} alt="shark" />
+    <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
+      <p>
+        A caption for the image that is padded when <code>Block</code> is fluid.
+      </p>
+    </PaddingReset>
+  </Block>
+</Story>
 
 <style lang="scss">
-  div {
-    height: 30px;
-    width: 100%;
-    margin-bottom: 2px;
-    &.outer {
-      background: grey;
-    }
-    &.inner {
-      background: salmon;
-    }
+  // Style span as code block with unicode font
+  code {
+    line-height: 1;
+    margin: 0px 2px;
+    padding: 3px 5px;
+    white-space: nowrap;
+    border-radius: 3px;
+    font-size: 13px;
+    border: 1px solid rgb(236, 244, 249);
+    color: rgba(46, 52, 56, 0.9);
+    background-color: rgb(247, 250, 252);
   }
+
+  // p {
+  //   background: rgb(222, 222, 222);
+  // }
 </style>
diff --git a/src/components/PaddingReset/PaddingReset.svelte b/src/components/PaddingReset/PaddingReset.svelte
index abc7dda6..60b1e309 100644
--- a/src/components/PaddingReset/PaddingReset.svelte
+++ b/src/components/PaddingReset/PaddingReset.svelte
@@ -1,12 +1,16 @@
 <!-- @component `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) -->
 <script lang="ts">
-  
+  import type { Snippet } from 'svelte';
+
   interface Props {
     /**
-   * If parent container is fluid, which resets the padding around contained elements.
-   */
+     * If parent container is fluid, which resets the padding around contained elements.
+     */
     containerIsFluid?: boolean;
-    children?: import('svelte').Snippet;
+    /**
+     * Content to be padded.
+     */
+    children: Snippet;
   }
 
   let { containerIsFluid = true, children }: Props = $props();
@@ -15,11 +19,11 @@
 {#if containerIsFluid}
   <div>
     <!-- Padded content -->
-    {@render children?.()}
+    {@render children()}
   </div>
 {:else}
   <!-- Padded content -->
-  {@render children?.()}
+  {@render children()}
 {/if}
 
 <style>
diff --git a/src/components/PaddingReset/shark.jpg b/src/components/PaddingReset/shark.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5b54e9f330afb7b78f600bf3d51ff1edc1e236a9
GIT binary patch
literal 105346
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

literal 0
HcmV?d00001

diff --git a/src/components/PaddingReset/stories/docs/component.md b/src/components/PaddingReset/stories/docs/component.md
deleted file mode 100644
index 75c5cf90..00000000
--- a/src/components/PaddingReset/stories/docs/component.md
+++ /dev/null
@@ -1,35 +0,0 @@
-Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
-
-The `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
-
-```svelte
-<script>
-  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
-</script>
-
-<Block width="fluid">
-  <!-- An edge-to-edge image -->
-  <img src="https//..." alt="..." width="100%" />
-  <PaddingReset>
-    <p>A caption for the image that will still be padded.</p>
-  </PaddingReset>
-</Block>
-```
-
-You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.
-
-```svelte
-<script>
-  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
-
-  export let src = 'https://...';
-  export let width = 'fluid';
-</script>
-
-<Block width="{width}">
-  <img src="{src}" alt="..." width="100%" />
-  <PaddingReset containerIsFluid="{width === 'fluid'}">
-    <p>A caption for the image that will be padded when Block is fluid.</p>
-  </PaddingReset>
-</Block>
-```

From 8a7e79affff7aab0319bde4deba019886b9b02a8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 20 Mar 2025 12:37:27 -0700
Subject: [PATCH 34/47] tweaks

---
 src/components/PaddingReset/PaddingReset.mdx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/PaddingReset/PaddingReset.mdx b/src/components/PaddingReset/PaddingReset.mdx
index c2fa743d..582b0bd0 100644
--- a/src/components/PaddingReset/PaddingReset.mdx
+++ b/src/components/PaddingReset/PaddingReset.mdx
@@ -14,7 +14,7 @@ Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep pa
 </script>
 
 <Block width="fluid">
-  <!-- Image in `fluid` block is edge-to-edge -->
+  <!-- Edge-to-edge image -->
   <img src="https:..." alt="Alt text" />
 
   <!-- Wrap text in `PaddingReset`to add padding back in -->
@@ -39,9 +39,10 @@ You can add the padding conditionally by setting the `containerIsFluid` prop to
 </script>
 
 <Block {width}>
-  <img {src} alt="Alt text" />
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" />
 
-  <!-- Set `containerIsFluid: true` if `width === 'fluid'` -->
+  <!-- Set conditional padding with the `containerIsFluid` prop -->
   <PaddingReset containerIsFluid={width === 'fluid'}>
     <p>A caption for the image that is padded when Block is fluid.</p>
   </PaddingReset>

From d34a908be818c2b49132a8144ab33b48275ac400 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 20 Mar 2025 12:39:15 -0700
Subject: [PATCH 35/47] type tweak

---
 src/components/PaddingReset/PaddingReset.stories.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index 015e1869..6cba1224 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -10,9 +10,7 @@
 
 <script>
   import Block from '../Block/Block.svelte';
-  import type { ContainerWidth } from '../@types/global';
-
-  let width: ContainerWidth = 'fluid' as 'wide' | 'fluid';
+  let width: 'wide' | 'fluid' = 'fluid';
 
   import sharkSrc from './shark.jpg';
 </script>

From 9adc6e4ce4dc801a7cd63cabf445bfc56dcbf27c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 20 Mar 2025 12:40:13 -0700
Subject: [PATCH 36/47] note tweak

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

diff --git a/src/components/PaddingReset/PaddingReset.svelte b/src/components/PaddingReset/PaddingReset.svelte
index 60b1e309..cfc012b5 100644
--- a/src/components/PaddingReset/PaddingReset.svelte
+++ b/src/components/PaddingReset/PaddingReset.svelte
@@ -4,7 +4,7 @@
 
   interface Props {
     /**
-     * If parent container is fluid, which resets the padding around contained elements.
+     * Set to `true` if the parent container is fluid.
      */
     containerIsFluid?: boolean;
     /**

From 45eb8178e8a6d05a384c9385cefdd51c1b7c3de1 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 20 Mar 2025 14:49:53 -0700
Subject: [PATCH 37/47] set up photo carousel

---
 src/components/@types/global.ts               |  19 ++
 .../PhotoCarousel/PhotoCarousel.mdx           |  63 +++++
 .../PhotoCarousel.stories.svelte              |  59 ++---
 .../PhotoCarousel/PhotoCarousel.svelte        | 216 ++++++++----------
 .../{stories => demo}/photos.json             |   0
 .../PhotoCarousel/stories/docs/component.md   |  21 --
 .../PhotoCarousel/stories/docs/withCustom.md  |  27 ---
 7 files changed, 195 insertions(+), 210 deletions(-)
 create mode 100644 src/components/PhotoCarousel/PhotoCarousel.mdx
 rename src/components/PhotoCarousel/{stories => demo}/photos.json (100%)
 delete mode 100644 src/components/PhotoCarousel/stories/docs/component.md
 delete mode 100644 src/components/PhotoCarousel/stories/docs/withCustom.md

diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index 5dfd180e..8b7408d8 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -48,3 +48,22 @@ export interface ScrollerStep {
    */
   foregroundProps?: object;
 }
+
+export interface PhotoCarouselImage {
+  /**
+   * Image src
+   */
+  src: string;
+  /**
+   * Image alt text
+   */
+  altText: string;
+  /** Optional caption as a string */
+  caption?: string;
+  /** Optional credit as string */
+  credit?: string;
+  /** Optional object-fit rule */
+  objectFit?: string;
+  /** Optional object-position rule */
+  objectPosition?: string;
+}
diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx
new file mode 100644
index 00000000..44188191
--- /dev/null
+++ b/src/components/PhotoCarousel/PhotoCarousel.mdx
@@ -0,0 +1,63 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PhotoCarouselStories from './PhotoCarousel.stories.svelte';
+
+<Meta of={PhotoCarouselStories} />
+
+# PhotoCarousel
+
+The `PhotoCarousel` component creates a simple, accessible photo carousel with lazy-loading and mobile swipe built in.
+
+```svelte
+<script>
+  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
+
+  const photos = [
+    {
+      src: 'https://.../myImage.jpg',
+      altText: 'A picture of...',
+      caption: 'My caption...', // Optional
+      credit: 'REUTERS/Jane Doe', // Optional
+      objectFit: 'contain', // Optional
+      objectPosition: '50% 50%', // Optional
+    },
+    // ...
+  ];
+</script>
+
+<PhotoCarousel {photos} />
+```
+
+<Canvas of={PhotoCarouselStories.Demo} />
+
+## Custom text
+
+Use named slots to style your own custom credits and/or captions.
+
+```svelte
+<PhotoCarousel {photos}>
+  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
+  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
+</PhotoCarousel>
+
+<style lang="scss">
+  p {
+    position: absolute;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    font-family: sans-serif;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    &.custom-credit {
+      top: 0;
+      right: 0;
+    }
+    &.custom-caption {
+      bottom: 5px;
+      left: 0;
+    }
+  }
+</style>
+```
+
+<Canvas of={PhotoCarouselStories.CustomText} />
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index 3b1bc3a0..76db1c5c 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -1,68 +1,41 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import customDocs from './stories/docs/withCustom.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PhotoCarousel from './PhotoCarousel.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Multimedia/PhotoCarousel',
     component: PhotoCarousel,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import photosJson from './stories/photos.json';
+  import photosJson from './demo/photos.json';
+  // import { PhotoCarouselImage } from '../@types/global';
 
   const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <PhotoCarousel {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    width: 'wider',
+  name="Demo"
+  args={{
     photos,
-  }}"
+  }}
 />
 
-<Story
-  name="Custom credits and captions"
-  args="{{
-    width: 'wider',
-    photos,
-  }}"
-  {...withStoryDocs(customDocs)}
->
-  <PhotoCarousel
-    {...{
-      width: 'wider',
-      photos,
-    }}
-  >
-    {#snippet credit({ credit })}
-        <p class="custom-credit"  >{credit}</p>
-      {/snippet}
-    {#snippet caption({ caption })}
-        <p class="custom-caption"  >{caption}</p>
-      {/snippet}
+<Story name="Custom text" exportName="CustomText">
+  <PhotoCarousel {photos}>
+    {#snippet credit(photo)}
+      <p class="custom-credit">{photo.credit}</p>
+    {/snippet}
+    {#snippet caption(photo)}
+      <p class="custom-caption">{photo.caption}</p>
+    {/snippet}
   </PhotoCarousel>
 </Story>
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index a785c761..400970a8 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -1,108 +1,86 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photocarousel--docs) -->
 <script lang="ts">
-  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
-
-  /** Width of the component within the text well. */
-  export let width: ContainerWidth = 'wider';
-
-  /**
-   * Set a different width for captions within the text well, for example,
-   * "normal" to keep captions inline with the rest of the text well.
-   * Can't ever be wider than `width`.
-   * @type {string}
-   */
-  export let textWidth: ContainerWidth = 'normal';
-
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  interface Image {
-    /**
-     * Image src
-     * @required
-     */
-    src: string;
-    /**
-     * Image alt-text
-     * @required
-     */
-    altText: string;
-    /** Optional caption */
-    caption?: string;
-    /** Optional credit */
-    credit?: string;
-    /** Optional object-fit rule */
-    objectFit?: string;
-    /** Optional object-position rule */
-    objectPosition?: string;
-  }
-
-  /**
-   * Array of photos.
-   * @required
-   */
-  export let photos: Image[] = [];
-
-  /**
-   * Max height of the carousel
-   */
-  export let maxHeight: number = 660;
-
-  type ObjectFit = 'cover' | 'contain';
-
-  /**
-   * Default Image object-fit style, either `cover` or `contain`.
-   */
-  export let defaultImageObjectFit: ObjectFit = 'cover';
-
-  /**
-   * Default image object-position style, e.g., `center center` or `50% 50%`.
-   */
-  export let defaultImageObjectPosition: string = 'center center';
-
-  /**
-   * ARIA label for the carousel.
-   * @required
-   */
-  export let carouselAriaLabel: string = 'Photo gallery';
-
-  /**
-   * Set height of the carousel as a ratio of its width
-   * as long as its below whatever you set in `maxHeight`.
-   */
-  export let heightRatio: number = 0.68;
-
-  /**
-   * Number of images to preload ahead of the active image.
-   */
-  export let preloadImages: number = 1;
-
-  import Block from '../Block/Block.svelte';
-  import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
+  // Utils
   import '@splidejs/svelte-splide/css/core';
-  // @ts-ignore no types
+  import { fly } from 'svelte/transition';
+  import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
+
+  // Icons
   import Fa from 'svelte-fa/src/fa.svelte';
   import {
     faChevronLeft,
     faChevronRight,
   } from '@fortawesome/free-solid-svg-icons';
-  import { fly } from 'svelte/transition';
+
+  // Components
+  import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  // Types
   import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
+  import type { Snippet } from 'svelte';
+  import type { PhotoCarouselImage } from '../@types/global';
 
-  let containerWidth: number;
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
-  let activeImageIndex = 0;
+  type ObjectFit = 'cover' | 'contain';
 
-  $: carouselHeight =
+  interface Props {
+    /** Array of photos. */
+    photos: PhotoCarouselImage[];
+    /** Width of the component within the text well: normal, wide, wider, widest, fluid */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for captions within the text well, e.g. "normal," to keep captions inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    cls?: string;
+    /** Max height of the carousel */
+    maxHeight?: number;
+    /** Default Image object-fit style: cover, contain */
+    defaultImageObjectFit?: ObjectFit;
+    /** Default image object-position style, e.g., `center center` or `50% 50%`. */
+    defaultImageObjectPosition?: string;
+    /** ARIA label for the carousel. */
+    carouselAriaLabel?: string;
+    /** Set height of the carousel as a ratio of its width as long as its below whatever you set in `maxHeight`. */
+    heightRatio?: number;
+    /** Number of images to preload ahead of the active image. */
+    preloadImages?: number;
+    /** Optional custom credit format as a snippet, which takes the argument `photo`. */
+    credit?: Snippet<[PhotoCarouselImage]>;
+    /** Optional custom caption format as a snippet, which takes the argument `photo`. */
+    caption?: Snippet<[PhotoCarouselImage]>;
+  }
+
+  let {
+    width = 'wider',
+    textWidth = 'normal',
+    id = '',
+    cls = '',
+    photos,
+    maxHeight = 660,
+    defaultImageObjectFit = 'cover',
+    defaultImageObjectPosition = 'center center',
+    carouselAriaLabel = 'Photo gallery',
+    heightRatio = 0.68,
+    preloadImages = 1,
+    credit,
+    caption,
+  }: Props = $props();
+
+  let containerWidth: number | undefined = $state(undefined);
+  let activeImageIndex = $state(0);
+
+  // Derive carousel height based on container width
+  let carouselHeight = $derived(
     containerWidth ?
       Math.min(containerWidth * heightRatio, maxHeight)
-    : maxHeight;
+    : maxHeight
+  );
 
   const handleActiveChange = (e?: CustomEvent<MoveEventDetail>) => {
     if (!e) return;
@@ -111,17 +89,17 @@
 </script>
 
 <Block {width} {id} class="photo-carousel fmy-6 {cls}">
-  <div class="carousel-container" bind:clientWidth="{containerWidth}">
+  <div class="carousel-container" bind:clientWidth={containerWidth}>
     <Splide
-      hasTrack="{false}"
-      options="{{
+      hasTrack={false}
+      options={{
         height: carouselHeight,
         fixedHeight: carouselHeight,
         lazyLoad: 'nearby',
         preloadPages: preloadImages,
-      }}"
-      aria-label="{carouselAriaLabel}"
-      on:move="{handleActiveChange}"
+      }}
+      aria-label={carouselAriaLabel}
+      on:move={handleActiveChange}
     >
       <div class="image-container">
         <SplideTrack>
@@ -134,20 +112,20 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy="{photo.src}"
-                    alt="{photo.altText}"
-                    style:object-fit="{photo.objectFit ||
-                      defaultImageObjectFit}"
-                    style:object-position="{photo.objectPosition ||
-                      defaultImageObjectPosition}"
+                    data-splide-lazy={photo.src}
+                    alt={photo.altText}
+                    style:object-fit={photo.objectFit || defaultImageObjectFit}
+                    style:object-position={photo.objectPosition ||
+                      defaultImageObjectPosition}
                   />
-                  {#if $$slots.credit}
-                    <slot name="credit" credit="{photo.credit}" />
-                  {:else}
+                  {#if credit}
+                    <!-- Render custom credit snippet -->
+                    {@render credit(photo)}
+                  {:else if photo.credit}
                     <span
                       class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
-                      class:contain-fit="{photo.objectFit === 'contain' ||
-                        defaultImageObjectFit === 'contain'}"
+                      class:contain-fit={photo.objectFit === 'contain' ||
+                        defaultImageObjectFit === 'contain'}
                       >{photo.credit}</span
                     >
                   {/if}
@@ -158,20 +136,20 @@
         </SplideTrack>
 
         {#if photos[activeImageIndex].caption}
-          <PaddingReset containerIsFluid="{width === 'fluid'}">
-            <Block width="{textWidth}">
-              {#if $$slots.caption}
-                <slot
-                  name="caption"
-                  caption="{photos[activeImageIndex].caption}"
-                />
-              {:else}
+          {@const activePhoto = photos[activeImageIndex]}
+          <PaddingReset containerIsFluid={width === 'fluid'}>
+            <Block width={textWidth}>
+              {#if caption && activePhoto.caption}
+                {#key activeImageIndex}
+                  {@render caption(activePhoto)}
+                {/key}
+              {:else if typeof activePhoto.caption}
                 {#key activeImageIndex}
                   <p
                     class="caption body-caption text-center"
-                    in:fly|local="{{ x: 20, duration: 175 }}"
+                    in:fly|local={{ x: 20, duration: 175 }}
                   >
-                    {photos[activeImageIndex].caption}
+                    {activePhoto.caption}
                   </p>
                 {/key}
               {/if}
@@ -185,10 +163,10 @@
 
         <div class="splide__arrows fp-1">
           <button class="splide__arrow splide__arrow--prev">
-            <Fa icon="{faChevronLeft}" fw />
+            <Fa icon={faChevronLeft} fw />
           </button>
           <button class="splide__arrow splide__arrow--next">
-            <Fa icon="{faChevronRight}" fw />
+            <Fa icon={faChevronRight} fw />
           </button>
         </div>
       </div>
diff --git a/src/components/PhotoCarousel/stories/photos.json b/src/components/PhotoCarousel/demo/photos.json
similarity index 100%
rename from src/components/PhotoCarousel/stories/photos.json
rename to src/components/PhotoCarousel/demo/photos.json
diff --git a/src/components/PhotoCarousel/stories/docs/component.md b/src/components/PhotoCarousel/stories/docs/component.md
deleted file mode 100644
index c85a042f..00000000
--- a/src/components/PhotoCarousel/stories/docs/component.md
+++ /dev/null
@@ -1,21 +0,0 @@
-A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
-
-```svelte
-<script>
-  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
-
-  const photos = [
-    {
-      src: 'https://.../myImage.jpg',
-      altText: 'A picture of...',
-      caption: 'My caption...', // Optional
-      credit: 'REUTERS/Jane Doe', // Optional
-      objectFit: 'contain', // Optional
-      objectPosition: '50% 50%', // Optional
-    },
-    // ...
-  ];
-</script>
-
-<PhotoCarousel photos="{photos}" />
-```
diff --git a/src/components/PhotoCarousel/stories/docs/withCustom.md b/src/components/PhotoCarousel/stories/docs/withCustom.md
deleted file mode 100644
index 849ee394..00000000
--- a/src/components/PhotoCarousel/stories/docs/withCustom.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Use named slots to style your own custom credits and/or captions.
-
-```svelte
-<PhotoCarousel photos="{photos}">
-  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
-  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
-</PhotoCarousel>
-
-<style lang="scss">
-  p {
-    position: absolute;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.6);
-    font-family: sans-serif;
-    font-size: 0.8rem;
-    padding: 0 5px;
-    &.custom-credit {
-      top: 0;
-      right: 0;
-    }
-    &.custom-caption {
-      bottom: 5px;
-      left: 0;
-    }
-  }
-</style>
-```

From 81aedad0b6efc114f228d7de06da8aff19ab38f3 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 20 Mar 2025 15:17:52 -0700
Subject: [PATCH 38/47] migrated, added docs, adds assets prop

---
 src/components/@types/global.ts               |  19 ++
 src/components/BodyText/BodyText.mdx          |   9 +-
 .../PhotoCarousel/PhotoCarousel.mdx           | 125 ++++++++++
 .../PhotoCarousel.stories.svelte              |  59 ++---
 .../PhotoCarousel/PhotoCarousel.svelte        | 227 +++++++++---------
 .../{stories => demo}/photos.json             |   0
 .../PhotoCarousel/stories/docs/component.md   |  21 --
 .../PhotoCarousel/stories/docs/withCustom.md  |  27 ---
 8 files changed, 275 insertions(+), 212 deletions(-)
 create mode 100644 src/components/PhotoCarousel/PhotoCarousel.mdx
 rename src/components/PhotoCarousel/{stories => demo}/photos.json (100%)
 delete mode 100644 src/components/PhotoCarousel/stories/docs/component.md
 delete mode 100644 src/components/PhotoCarousel/stories/docs/withCustom.md

diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index 5dfd180e..01d74235 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -48,3 +48,22 @@ export interface ScrollerStep {
    */
   foregroundProps?: object;
 }
+
+export interface PhotoCarouselImage {
+  /**
+   * Image source
+   */
+  src: string;
+  /**
+   * Image alt text
+   */
+  altText: string;
+  /** Optional caption */
+  caption?: string;
+  /** Optional credit */
+  credit?: string;
+  /** Optional object-fit rule */
+  objectFit?: string;
+  /** Optional object-position rule */
+  objectPosition?: string;
+}
diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx
index 9cd25312..d51f7356 100644
--- a/src/components/BodyText/BodyText.mdx
+++ b/src/components/BodyText/BodyText.mdx
@@ -30,10 +30,10 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal
 
 ## Using with ArchieML docs
 
-With the graphics kit, you'll likely get your text value from an ArchieML doc.
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
-# Archie ML doc
+# ArchieML doc
 [blocks]
 
 type: text
@@ -49,6 +49,11 @@ text: Bacon ipsum ...
 
 ```svelte
 <!-- App.svelte -->
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
 {#each content.blocks as block}
   {#if block.type === 'text'}
     <BodyText text={block.text} />
diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx
new file mode 100644
index 00000000..5b447618
--- /dev/null
+++ b/src/components/PhotoCarousel/PhotoCarousel.mdx
@@ -0,0 +1,125 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PhotoCarouselStories from './PhotoCarousel.stories.svelte';
+
+<Meta of={PhotoCarouselStories} />
+
+# PhotoCarousel
+
+The `PhotoCarousel` component creates a simple and accessible photo carousel with built-in lazy-loading and mobile swipe.
+
+```svelte
+<script>
+  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
+
+  const photos = [
+    {
+      src: 'https://.../myImage.jpg',
+      altText: 'A picture of...',
+      caption: 'My caption...', // Optional
+      credit: 'REUTERS/Jane Doe', // Optional
+      objectFit: 'contain', // Optional
+      objectPosition: '50% 50%', // Optional
+    },
+  ];
+</script>
+
+<PhotoCarousel {photos} />
+```
+
+<Canvas of={PhotoCarouselStories.Demo} />
+
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+type: photo-carousel
+
+# List of photo data
+[.photos]
+  # Photo 1
+  src: 'images/myImage.jpg', # The source path can be a URL or a local path
+  altText: 'A picture of...',
+  caption: 'My caption...', // Optional
+  credit: 'REUTERS/Jane Doe', // Optional
+  objectFit: 'contain', // Optional
+  objectPosition: '50% 50%', // Optional
+
+  # Photo 2
+  src: 'images/myImage2.jpg',
+  altText: 'A picture of...',
+  caption: 'My caption...', // Optional
+  credit: 'REUTERS/Jane Doe', // Optional
+  objectFit: 'contain', // Optional
+  objectPosition: '50% 50%', // Optional
+  ...
+[]
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `PhotoCarousel` component.
+
+> **Important❗:** If you're using the Graphics Kit and your photos are saved locally in `src/statics` instead of being on the web, pass the Svelte-kit `assets` string to `PhotoCarousel` to get the correct path. You can't mix and match, though -- all photos must be either local or web-hosted.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  import content from '$locales/en/content.json';
+</script>
+
+{#each content.blocks as block}
+  {#if block.type === 'photo-carousel'}
+  <!-- Pass `assets` if using photos saved in your Graphics Kit project folder -->
+    <PhotoCarousel {block.photos} {assets} />
+  {/if}
+{/each}
+
+```
+
+<Canvas of={PhotoCarouselStories.Demo} />
+
+## Custom text
+
+To customise the credit and/or caption style, use the `credit` and `caption` [snippets](https://svelte.dev/docs/svelte/snippet) and pass `photo` as an argument.
+
+```svelte
+<PhotoCarousel {photos}>
+  <!-- Pass `photo` and use the `photo.credit` string in the HTML -->
+  {#snippet credit(photo)}
+    <p class="custom-credit">{photo.credit}</p>
+  {/snippet}
+
+  <!-- Pass `photo` and use the `photo.caption` string in the HTML -->
+  {#snippet caption(photo)}
+    <p class="custom-caption">{photo.caption}</p>
+  {/snippet}
+</PhotoCarousel>
+
+<!-- Customise credit and caption styles -->
+<style lang="scss">
+  p {
+    position: absolute;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    font-family: sans-serif;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    &.custom-credit {
+      top: 0;
+      right: 0;
+    }
+    &.custom-caption {
+      bottom: 5px;
+      left: 0;
+    }
+  }
+</style>
+```
+
+<Canvas of={PhotoCarouselStories.CustomText} />
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index 3b1bc3a0..76db1c5c 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -1,68 +1,41 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import customDocs from './stories/docs/withCustom.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PhotoCarousel from './PhotoCarousel.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Multimedia/PhotoCarousel',
     component: PhotoCarousel,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import photosJson from './stories/photos.json';
+  import photosJson from './demo/photos.json';
+  // import { PhotoCarouselImage } from '../@types/global';
 
   const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <PhotoCarousel {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    width: 'wider',
+  name="Demo"
+  args={{
     photos,
-  }}"
+  }}
 />
 
-<Story
-  name="Custom credits and captions"
-  args="{{
-    width: 'wider',
-    photos,
-  }}"
-  {...withStoryDocs(customDocs)}
->
-  <PhotoCarousel
-    {...{
-      width: 'wider',
-      photos,
-    }}
-  >
-    {#snippet credit({ credit })}
-        <p class="custom-credit"  >{credit}</p>
-      {/snippet}
-    {#snippet caption({ caption })}
-        <p class="custom-caption"  >{caption}</p>
-      {/snippet}
+<Story name="Custom text" exportName="CustomText">
+  <PhotoCarousel {photos}>
+    {#snippet credit(photo)}
+      <p class="custom-credit">{photo.credit}</p>
+    {/snippet}
+    {#snippet caption(photo)}
+      <p class="custom-caption">{photo.caption}</p>
+    {/snippet}
   </PhotoCarousel>
 </Story>
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index a785c761..4aae06f9 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -1,108 +1,90 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photocarousel--docs) -->
 <script lang="ts">
-  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
-
-  /** Width of the component within the text well. */
-  export let width: ContainerWidth = 'wider';
-
-  /**
-   * Set a different width for captions within the text well, for example,
-   * "normal" to keep captions inline with the rest of the text well.
-   * Can't ever be wider than `width`.
-   * @type {string}
-   */
-  export let textWidth: ContainerWidth = 'normal';
-
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  interface Image {
-    /**
-     * Image src
-     * @required
-     */
-    src: string;
-    /**
-     * Image alt-text
-     * @required
-     */
-    altText: string;
-    /** Optional caption */
-    caption?: string;
-    /** Optional credit */
-    credit?: string;
-    /** Optional object-fit rule */
-    objectFit?: string;
-    /** Optional object-position rule */
-    objectPosition?: string;
-  }
-
-  /**
-   * Array of photos.
-   * @required
-   */
-  export let photos: Image[] = [];
-
-  /**
-   * Max height of the carousel
-   */
-  export let maxHeight: number = 660;
-
-  type ObjectFit = 'cover' | 'contain';
-
-  /**
-   * Default Image object-fit style, either `cover` or `contain`.
-   */
-  export let defaultImageObjectFit: ObjectFit = 'cover';
-
-  /**
-   * Default image object-position style, e.g., `center center` or `50% 50%`.
-   */
-  export let defaultImageObjectPosition: string = 'center center';
-
-  /**
-   * ARIA label for the carousel.
-   * @required
-   */
-  export let carouselAriaLabel: string = 'Photo gallery';
-
-  /**
-   * Set height of the carousel as a ratio of its width
-   * as long as its below whatever you set in `maxHeight`.
-   */
-  export let heightRatio: number = 0.68;
-
-  /**
-   * Number of images to preload ahead of the active image.
-   */
-  export let preloadImages: number = 1;
-
-  import Block from '../Block/Block.svelte';
-  import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
+  // Utils
   import '@splidejs/svelte-splide/css/core';
-  // @ts-ignore no types
+  import { fly } from 'svelte/transition';
+  import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
+
+  // Icons
   import Fa from 'svelte-fa/src/fa.svelte';
   import {
     faChevronLeft,
     faChevronRight,
   } from '@fortawesome/free-solid-svg-icons';
-  import { fly } from 'svelte/transition';
+
+  // Components
+  import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  // Types
   import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
+  import type { Snippet } from 'svelte';
+  import type { PhotoCarouselImage } from '../@types/global';
+  import src from 'svelte-search/index.js';
 
-  let containerWidth: number;
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
-  let activeImageIndex = 0;
+  type ObjectFit = 'cover' | 'contain';
 
-  $: carouselHeight =
+  interface Props {
+    /** Array of photos. */
+    photos: PhotoCarouselImage[];
+    /** Pass Svelte-kit `assets`, if using local photo files instead of web-hosted ones*/
+    assets?: string;
+    /** Width of the component within the text well: normal, wide, wider, widest, fluid */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for captions within the text well, e.g. "normal," to keep captions inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    cls?: string;
+    /** Max height of the carousel */
+    maxHeight?: number;
+    /** Default Image object-fit style: cover, contain */
+    defaultImageObjectFit?: ObjectFit;
+    /** Default image object-position style, e.g., `center center` or `50% 50%`. */
+    defaultImageObjectPosition?: string;
+    /** ARIA label for the carousel. */
+    carouselAriaLabel?: string;
+    /** Set height of the carousel as a ratio of its width as long as its below whatever you set in `maxHeight`. */
+    heightRatio?: number;
+    /** Number of images to preload ahead of the active image. */
+    preloadImages?: number;
+    /** Optional custom credit format as a snippet, which takes the argument `photo`. */
+    credit?: Snippet<[PhotoCarouselImage]>;
+    /** Optional custom caption format as a snippet, which takes the argument `photo`. */
+    caption?: Snippet<[PhotoCarouselImage]>;
+  }
+
+  let {
+    assets,
+    width = 'wider',
+    textWidth = 'normal',
+    id = '',
+    cls = '',
+    photos,
+    maxHeight = 660,
+    defaultImageObjectFit = 'cover',
+    defaultImageObjectPosition = 'center center',
+    carouselAriaLabel = 'Photo gallery',
+    heightRatio = 0.68,
+    preloadImages = 1,
+    credit,
+    caption,
+  }: Props = $props();
+
+  let containerWidth: number | undefined = $state(undefined);
+  let activeImageIndex = $state(0);
+
+  // Derive carousel height based on container width
+  let carouselHeight = $derived(
     containerWidth ?
       Math.min(containerWidth * heightRatio, maxHeight)
-    : maxHeight;
+    : maxHeight
+  );
 
   const handleActiveChange = (e?: CustomEvent<MoveEventDetail>) => {
     if (!e) return;
@@ -111,21 +93,23 @@
 </script>
 
 <Block {width} {id} class="photo-carousel fmy-6 {cls}">
-  <div class="carousel-container" bind:clientWidth="{containerWidth}">
+  <div class="carousel-container" bind:clientWidth={containerWidth}>
     <Splide
-      hasTrack="{false}"
-      options="{{
+      hasTrack={false}
+      options={{
         height: carouselHeight,
         fixedHeight: carouselHeight,
         lazyLoad: 'nearby',
         preloadPages: preloadImages,
-      }}"
-      aria-label="{carouselAriaLabel}"
-      on:move="{handleActiveChange}"
+      }}
+      aria-label={carouselAriaLabel}
+      on:move={handleActiveChange}
     >
       <div class="image-container">
         <SplideTrack>
           {#each photos as photo}
+            <!-- Set source path if `assets` is passed, i.e the photos are local files -->
+            {@const src = assets ? `${assets}/${photo.src}` : photo.src}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -134,20 +118,22 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy="{photo.src}"
-                    alt="{photo.altText}"
-                    style:object-fit="{photo.objectFit ||
-                      defaultImageObjectFit}"
-                    style:object-position="{photo.objectPosition ||
-                      defaultImageObjectPosition}"
+                    data-splide-lazy={src}
+                    alt={photo.altText}
+                    style:object-fit={photo.objectFit || defaultImageObjectFit}
+                    style:object-position={photo.objectPosition ||
+                      defaultImageObjectPosition}
                   />
-                  {#if $$slots.credit}
-                    <slot name="credit" credit="{photo.credit}" />
-                  {:else}
+                  <!-- Render custom credit if credit snippet and string both exist -->
+                  {#if credit && photo.credit}
+                    {@render credit(photo)}
+
+                    <!-- Otherwise, render with default credit style -->
+                  {:else if photo.credit}
                     <span
                       class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
-                      class:contain-fit="{photo.objectFit === 'contain' ||
-                        defaultImageObjectFit === 'contain'}"
+                      class:contain-fit={photo.objectFit === 'contain' ||
+                        defaultImageObjectFit === 'contain'}
                       >{photo.credit}</span
                     >
                   {/if}
@@ -158,20 +144,23 @@
         </SplideTrack>
 
         {#if photos[activeImageIndex].caption}
-          <PaddingReset containerIsFluid="{width === 'fluid'}">
-            <Block width="{textWidth}">
-              {#if $$slots.caption}
-                <slot
-                  name="caption"
-                  caption="{photos[activeImageIndex].caption}"
-                />
-              {:else}
+          {@const activePhoto = photos[activeImageIndex]}
+          <PaddingReset containerIsFluid={width === 'fluid'}>
+            <Block width={textWidth}>
+              <!-- Render custom caption if caption snippet and string both exist -->
+              {#if caption && activePhoto.caption}
+                {#key activeImageIndex}
+                  {@render caption(activePhoto)}
+                {/key}
+
+                <!-- Otherwise, render with default caption style -->
+              {:else if activePhoto.caption}
                 {#key activeImageIndex}
                   <p
                     class="caption body-caption text-center"
-                    in:fly|local="{{ x: 20, duration: 175 }}"
+                    in:fly|local={{ x: 20, duration: 175 }}
                   >
-                    {photos[activeImageIndex].caption}
+                    {activePhoto.caption}
                   </p>
                 {/key}
               {/if}
@@ -185,10 +174,10 @@
 
         <div class="splide__arrows fp-1">
           <button class="splide__arrow splide__arrow--prev">
-            <Fa icon="{faChevronLeft}" fw />
+            <Fa icon={faChevronLeft} fw />
           </button>
           <button class="splide__arrow splide__arrow--next">
-            <Fa icon="{faChevronRight}" fw />
+            <Fa icon={faChevronRight} fw />
           </button>
         </div>
       </div>
diff --git a/src/components/PhotoCarousel/stories/photos.json b/src/components/PhotoCarousel/demo/photos.json
similarity index 100%
rename from src/components/PhotoCarousel/stories/photos.json
rename to src/components/PhotoCarousel/demo/photos.json
diff --git a/src/components/PhotoCarousel/stories/docs/component.md b/src/components/PhotoCarousel/stories/docs/component.md
deleted file mode 100644
index c85a042f..00000000
--- a/src/components/PhotoCarousel/stories/docs/component.md
+++ /dev/null
@@ -1,21 +0,0 @@
-A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
-
-```svelte
-<script>
-  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
-
-  const photos = [
-    {
-      src: 'https://.../myImage.jpg',
-      altText: 'A picture of...',
-      caption: 'My caption...', // Optional
-      credit: 'REUTERS/Jane Doe', // Optional
-      objectFit: 'contain', // Optional
-      objectPosition: '50% 50%', // Optional
-    },
-    // ...
-  ];
-</script>
-
-<PhotoCarousel photos="{photos}" />
-```
diff --git a/src/components/PhotoCarousel/stories/docs/withCustom.md b/src/components/PhotoCarousel/stories/docs/withCustom.md
deleted file mode 100644
index 849ee394..00000000
--- a/src/components/PhotoCarousel/stories/docs/withCustom.md
+++ /dev/null
@@ -1,27 +0,0 @@
-Use named slots to style your own custom credits and/or captions.
-
-```svelte
-<PhotoCarousel photos="{photos}">
-  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
-  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
-</PhotoCarousel>
-
-<style lang="scss">
-  p {
-    position: absolute;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.6);
-    font-family: sans-serif;
-    font-size: 0.8rem;
-    padding: 0 5px;
-    &.custom-credit {
-      top: 0;
-      right: 0;
-    }
-    &.custom-caption {
-      bottom: 5px;
-      left: 0;
-    }
-  }
-</style>
-```

From e9dff42de14a9074c9d6edb076a9d5bfe35fbc6f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 24 Mar 2025 09:57:10 -0700
Subject: [PATCH 39/47] set up photo pack

---
 .../YourComponent.stories.svelte              |   6 +-
 .../YourComponent/YourComponent.svelte        |   4 +-
 src/actions/cssVariables/cssVariables.mdx     |   2 +-
 src/actions/resizeObserver/resizeObserver.mdx |   2 +-
 src/components/AdSlot/AdSlot.svelte           |   2 +-
 src/components/AdSlot/InlineAd.mdx            |   6 +-
 src/components/AdSlot/LeaderboardAd.svelte    |   2 +-
 src/components/AdSlot/ResponsiveAd.svelte     |   2 +-
 src/components/Article/Article.mdx            |   4 +-
 src/components/Block/Block.stories.svelte     |  33 ++--
 src/components/Block/Block.svelte             |   4 +-
 .../DatawrapperChart.stories.svelte           |  10 +-
 .../DocumentCloud.stories.svelte              |   6 +-
 .../DocumentCloud/DocumentCloud.svelte        |   2 +-
 .../FeaturePhoto/FeaturePhoto.stories.svelte  |  16 +-
 .../FeaturePhoto/FeaturePhoto.svelte          |  10 +-
 src/components/Framer/Framer.stories.svelte   |   6 +-
 src/components/Framer/Framer.svelte           |  27 ++--
 src/components/Framer/Resizer/index.svelte    |  42 ++---
 src/components/Framer/Typeahead/index.svelte  |  50 +++---
 src/components/GraphicBlock/AriaHidden.svelte |   5 +-
 .../GraphicBlock/GraphicBlock.stories.svelte  |  18 +--
 .../GraphicBlock/GraphicBlock.svelte          |  24 +--
 src/components/GraphicBlock/TextBlock.svelte  |   1 -
 .../stories/ai2svelte/ai-chart.svelte         |   8 +-
 .../Headline/Headline.stories.svelte          |  57 ++++---
 src/components/Headline/Headline.svelte       |   6 +-
 .../Headline/stories/graphic.svelte           |  12 +-
 .../HeroHeadline/Hero.stories.svelte          |  74 ++++-----
 src/components/HeroHeadline/Hero.svelte       |  10 +-
 .../stories/graphics/crash.svelte             |  14 +-
 .../stories/graphics/quakemap.svelte          |  12 +-
 .../PhotoCarousel.stories.svelte              |  18 +--
 .../PhotoCarousel/PhotoCarousel.svelte        |  41 +++--
 src/components/PhotoPack/PhotoPack.mdx        | 127 +++++++++++++++
 .../PhotoPack/PhotoPack.stories.svelte        |  99 +++---------
 src/components/PhotoPack/PhotoPack.svelte     | 152 ++++++++----------
 .../PhotoPack/stories/docs/archieML.md        |  63 --------
 .../PhotoPack/stories/docs/component.md       |  45 ------
 .../PhotoPack/stories/docs/missingAltText.md  |   1 -
 src/components/PhotoPack/utils.ts             |  18 +++
 .../PymChild/PymChild.stories.svelte          |   2 +-
 .../ReferralBlock.stories.svelte              |  10 +-
 .../ReferralBlock/ReferralBlock.svelte        |  22 +--
 src/components/Scroller/Background.svelte     |   4 +-
 .../Scroller/Embedded/Background.svelte       |   2 +-
 .../Scroller/Embedded/Foreground.svelte       |   6 +-
 src/components/Scroller/Foreground.svelte     |   6 +-
 .../Scroller/Scroller.stories.svelte          |  16 +-
 src/components/Scroller/Scroller.svelte       |   6 +-
 .../components/ai2svelte/ai-scroller-1.svelte |   2 +-
 .../components/ai2svelte/ai-scroller-2.svelte |   2 +-
 .../components/ai2svelte/ai-scroller-3.svelte |   2 +-
 .../basic/InteractiveForeground.svelte        |   4 +-
 .../stories/components/basic/Step.svelte      |   2 +-
 .../SearchInput/SearchInput.stories.svelte    |   4 +-
 src/components/SearchInput/SearchInput.svelte |  10 +-
 src/components/SiteFooter/CompanyLinks.svelte |   2 +-
 src/components/SiteFooter/LegalLinks.svelte   |   8 +-
 src/components/SiteFooter/QuickLinks.svelte   |  16 +-
 .../SiteFooter/SiteFooter.stories.svelte      |   4 +-
 src/components/SiteFooter/SiteFooter.svelte   |  10 +-
 .../SiteHeader/MobileMenu/index.svelte        |  10 +-
 .../SiteHeader/NavBar/DownArrow.svelte        |   2 +-
 .../NavBar/NavDropdown/MoreDropdown.svelte    |   6 +-
 .../NavBar/NavDropdown/SectionDropdown.svelte |   6 +-
 .../NavBar/NavDropdown/StoryCard/index.svelte |  10 +-
 src/components/SiteHeader/NavBar/index.svelte |  54 +++----
 .../SiteHeader/SiteHeader.stories.svelte      |   2 +-
 src/components/SiteHeader/SiteHeader.svelte   |  16 +-
 .../SiteHeadline/SiteHeadline.stories.svelte  |  16 +-
 .../SiteHeadline/SiteHeadline.svelte          |   2 +-
 src/components/Spinner/Spinner.stories.svelte |   2 +-
 src/components/Spinner/Spinner.svelte         |   2 +-
 src/components/Table/Pagination.svelte        |   6 +-
 src/components/Table/Select.svelte            |   4 +-
 src/components/Table/SortArrow.svelte         |   4 +-
 src/components/Table/Table.stories.svelte     |  42 ++---
 src/components/Table/Table.svelte             |  48 +++---
 .../TestForSvelte5.stories.svelte             |   6 +-
 .../TestForSvelte5/TestForSvelte5.svelte      |   4 +-
 src/components/Theme/Theme.stories.svelte     |  34 ++--
 src/components/Theme/Theme.svelte             |  28 ++--
 .../Theme/stories/ThemedPage.svelte           |  16 +-
 .../ToolsHeader/ToolsHeader.stories.svelte    |   4 +-
 src/components/ToolsHeader/ToolsHeader.svelte |   6 +-
 src/components/Video/Controls.svelte          |  10 +-
 src/components/Video/Video.stories.svelte     |  18 +--
 src/components/Video/Video.svelte             |  82 +++++-----
 src/components/Visible/Visible.stories.svelte |   6 +-
 src/components/Visible/Visible.svelte         |  21 +--
 .../Visible/stories/snippets/default.svelte   |   2 +-
 .../story-recipes/basic-story.mdx             |  18 +--
 .../story-with-custom-controls.mdx            |   2 +-
 .../story-recipes/story-with-custom-docs.mdx  |  10 +-
 .../story-recipes/story-with-media.mdx        |   6 +-
 src/docs/guides/archieml.mdx                  |  34 ++--
 src/docs/guides/graphics-kit.mdx              |   2 +-
 src/docs/guides/svelte-components.mdx         |   2 +-
 src/docs/intro.mdx                            |   2 +-
 src/docs/theming/css-variables.mdx            |  14 +-
 101 files changed, 848 insertions(+), 892 deletions(-)
 create mode 100644 src/components/PhotoPack/PhotoPack.mdx
 delete mode 100644 src/components/PhotoPack/stories/docs/archieML.md
 delete mode 100644 src/components/PhotoPack/stories/docs/component.md
 delete mode 100644 src/components/PhotoPack/stories/docs/missingAltText.md
 create mode 100644 src/components/PhotoPack/utils.ts

diff --git a/bin/newComponent/template/YourComponent/YourComponent.stories.svelte b/bin/newComponent/template/YourComponent/YourComponent.stories.svelte
index 097cd64e..837857c9 100644
--- a/bin/newComponent/template/YourComponent/YourComponent.stories.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.stories.svelte
@@ -28,7 +28,7 @@
   import SharkImg from './stories/shark.jpg';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <YourComponent {...args} />
   {/snippet}
@@ -36,9 +36,9 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
     src: SharkImg,
     altText: "Duh dum! It's a shark!!",
-  }}"
+  }}
 />
diff --git a/bin/newComponent/template/YourComponent/YourComponent.svelte b/bin/newComponent/template/YourComponent/YourComponent.svelte
index fafaa8ff..364fb89e 100644
--- a/bin/newComponent/template/YourComponent/YourComponent.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.svelte
@@ -36,8 +36,8 @@
 
 <Block {width} {id} class="photo {cls}">
   <div
-    style:background-image="{`url(${src})`}"
-    style:height="{`${height}px`}"
+    style:background-image={`url(${src})`}
+    style:height={`${height}px`}
   ></div>
   <p class="visually-hidden">{altText}</p>
 </Block>
diff --git a/src/actions/cssVariables/cssVariables.mdx b/src/actions/cssVariables/cssVariables.mdx
index 4e48eb38..fb5f97a9 100644
--- a/src/actions/cssVariables/cssVariables.mdx
+++ b/src/actions/cssVariables/cssVariables.mdx
@@ -22,7 +22,7 @@ An action you can use to easily set [CSS variables](https://developer.mozilla.or
 </script>
 
 <!-- Attach it to a parent element with the action -->
-<div use:cssVariables="{variables}">
+<div use:cssVariables={variables}>
   <p>My text...</p>
 </div>
 
diff --git a/src/actions/resizeObserver/resizeObserver.mdx b/src/actions/resizeObserver/resizeObserver.mdx
index e7a57ebe..b56549ad 100644
--- a/src/actions/resizeObserver/resizeObserver.mdx
+++ b/src/actions/resizeObserver/resizeObserver.mdx
@@ -14,7 +14,7 @@ An action you can use to easily to check when a DOM element's dimensions change
   let elementWidth = 0;
 </script>
 
-<div use:resizeObserver="{(element) => (elementWidth = element.clientWidth)}">
+<div use:resizeObserver={(element) => (elementWidth = element.clientWidth)}>
   My width is: {elementWidth}
 </div>
 ```
diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte
index c80e6925..4fed36b9 100644
--- a/src/components/AdSlot/AdSlot.svelte
+++ b/src/components/AdSlot/AdSlot.svelte
@@ -55,7 +55,7 @@
   });
 </script>
 
-<div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
+<div data-freestar-ad={dataFreestarAd || null} id={adId}></div>
 
 <style>
   :global(div.freestar-adslot:has(.unfulfilled-ad)) {
diff --git a/src/components/AdSlot/InlineAd.mdx b/src/components/AdSlot/InlineAd.mdx
index 97e851cc..5be76a80 100644
--- a/src/components/AdSlot/InlineAd.mdx
+++ b/src/components/AdSlot/InlineAd.mdx
@@ -46,11 +46,11 @@ You may add **up to three** inline ads per page, but must set the `n` prop on mu
 
 ```svelte
 <!-- First inline ad on the page -->
-<InlineAd n="{1}" />
+<InlineAd n={1} />
 <!-- ... second ... -->
-<InlineAd n="{2}" />
+<InlineAd n={2} />
 <!-- ... third and final. -->
-<InlineAd n="{3}" />
+<InlineAd n={3} />
 ```
 
 <Canvas of={InlineAdStories.Demo} />
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte
index 0dface07..fdc4435b 100644
--- a/src/components/AdSlot/LeaderboardAd.svelte
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@@ -46,7 +46,7 @@
   });
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <div
   class="freestar-adslot leaderboard__sticky {cls}"
diff --git a/src/components/AdSlot/ResponsiveAd.svelte b/src/components/AdSlot/ResponsiveAd.svelte
index 01a95685..55a9edd5 100644
--- a/src/components/AdSlot/ResponsiveAd.svelte
+++ b/src/components/AdSlot/ResponsiveAd.svelte
@@ -69,7 +69,7 @@
   let adType = $derived(getAdType(placementName));
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 {#if windowWidth}
   {#key placementName}
diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx
index 5c038bd2..b5defaa4 100644
--- a/src/components/Article/Article.mdx
+++ b/src/components/Article/Article.mdx
@@ -41,13 +41,13 @@ You can set custom column widths by passing an object to the `columnWidths` prop
 ```svelte
 <!-- Set custom column widths -->
 <Article
-  columnWidths="{{
+  columnWidths={{
     narrower: 310,
     narrow: 450,
     normal: 550,
     wide: 675,
     wider: 1400,
-  }}"
+  }}
 >
   <!-- Custom column widths get passed down to the `Block` component -->
   <Block width="narrower" />
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index a13a0411..9763b12d 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -36,7 +36,7 @@
   import Article from '../Article/Article.svelte';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Article id="block-demo-article">
       <div class="article-boundaries">
@@ -51,9 +51,9 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
-  }}"
+  }}
 />
 
 <Story name="Custom layouts" {...withStoryDocs(customLayoutsDocs)}>
@@ -77,42 +77,41 @@
   <Article id="block-demo-article">
     <div class="article-boundaries">
       <div class="label">Article</div>
-      <Block width="narrower" snap="{true}" class="block-snap-widths-demo"
+      <Block width="narrower" snap={true} class="block-snap-widths-demo"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" class="block-snap-widths-demo"
+      <Block width="narrow" snap={true} class="block-snap-widths-demo"
         >narrow</Block
       >
-      <Block width="normal" snap="{true}" class="block-snap-widths-demo"
+      <Block width="normal" snap={true} class="block-snap-widths-demo"
         >normal</Block
       >
-      <Block width="wide" snap="{true}" class="block-snap-widths-demo"
-        >wide</Block
+      <Block width="wide" snap={true} class="block-snap-widths-demo">wide</Block
       >
-      <Block width="wider" snap="{true}" class="block-snap-widths-demo"
+      <Block width="wider" snap={true} class="block-snap-widths-demo"
         >wider</Block
       >
-      <Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
+      <Block width="narrower" snap={true} class="block-snap-widths-demo even"
         >narrower</Block
       >
-      <Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
+      <Block width="narrow" snap={true} class="block-snap-widths-demo even"
         >narrow</Block
       >
       <Block
         width="normal"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-narrow"
         >normal.skip-narrow</Block
       >
       <Block
         width="wide"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-normal skip-narrow"
         >wide.skip-normal.skip-narrow</Block
       >
       <Block
         width="wider"
-        snap="{true}"
+        snap={true}
         class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
       >
     </div>
@@ -145,9 +144,9 @@
     background: rgb(211, 132, 123);
   }
   :global(
-      #block-demo-article .label,
-      #block-demo-article div.article-block.block-snap-widths-demo
-    ) {
+    #block-demo-article .label,
+    #block-demo-article div.article-block.block-snap-widths-demo
+  ) {
     padding-left: 3px;
     color: white;
   }
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index beea07dd..1b588589 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -26,9 +26,9 @@
 <div
   {id}
   class="article-block fmx-auto {width} {cls}"
-  class:snap="{snap && width !== 'fluid' && width !== 'widest'}"
+  class:snap={snap && width !== 'fluid' && width !== 'widest'}
   {role}
-  aria-label="{ariaLabel}"
+  aria-label={ariaLabel}
 >
   <!-- block content -->
   <slot />
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
index b1dcee23..412d1adc 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -17,18 +17,18 @@
 
 <Story
   name="Demo"
-  args="{{
+  args={{
     src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
     id: 'abortion-rights-map',
     ariaLabel: 'map',
     frameTitle: 'Global abortion access',
-  }}"
+  }}
 />
 
 <Story
   name="With chatter"
-  tags="{['!autodocs']}"
-  args="{{
+  tags={['!autodocs']}
+  args={{
     frameTitle: 'Global abortion access',
     ariaLabel: 'map',
     id: 'abortion-rights-map',
@@ -37,5 +37,5 @@
     description: 'A map of worldwide access to abortion.',
     notes:
       'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
-  }}"
+  }}
 />
diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
index 7a111585..ab31bcae 100644
--- a/src/components/DocumentCloud/DocumentCloud.stories.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -22,7 +22,7 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <DocumentCloud {...args} />
   {/snippet}
@@ -30,9 +30,9 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
     slug: '3259984-Trump-Intelligence-Allegations',
     altText: 'These Reports Allege Trump Has Deep Ties To Russia',
-  }}"
+  }}
 />
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 195c4c8a..f3eb197a 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -35,7 +35,7 @@
   <iframe
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
-    title="{altText}"
+    title={altText}
     width="700"
     height="540"
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
index 07b53afb..d0334a49 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-    import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore raw
   import componentDocs from './stories/docs/component.md?raw';
@@ -15,7 +15,6 @@
   //   withStoryDocs,
   // } from '$lib/docs/utils/withParams.js';
 
-
   const { Story } = defineMeta({
     title: 'Components/Multimedia/FeaturePhoto',
     component: FeaturePhoto,
@@ -39,34 +38,33 @@
   import sharkSrc from './stories/shark.jpg';
 </script>
 
-
 <Story
   name="Default"
-  args="{{
+  args={{
     src: sharkSrc,
     altText: 'A shark!',
     width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
+  }}
 />
 
 <Story
   name="ArchieML"
-  args="{{
+  args={{
     src: sharkSrc,
     altText: 'A shark!',
     width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
+  }}
 />
 <!-- {...withStoryDocs(archieMLDocs)} -->
 
 <Story
   name="Missing altText"
-  args="{{
+  args={{
     src: sharkSrc,
     width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
+  }}
 />
 <!-- {...withStoryDocs(missingAltTextDocs)} -->
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 0ff0b7f6..7aecc2b1 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -93,18 +93,18 @@
 
 <Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
-    bind:this="{container}"
+    bind:this={container}
     aria-label="media"
     class="w-full flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" {src} alt="{altText}" />
+      <img class="w-full my-0" {src} alt={altText} />
     {:else}
-      <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
+      <div class="placeholder w-full" style={`height: ${height}px;`}></div>
     {/if}
     {#if caption}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <Block width="{textWidth}" class="notes w-full fmy-0">
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <Block width={textWidth} class="notes w-full fmy-0">
           <figcaption>
             {caption}
           </figcaption>
diff --git a/src/components/Framer/Framer.stories.svelte b/src/components/Framer/Framer.stories.svelte
index a9d34b9f..e47c14ba 100644
--- a/src/components/Framer/Framer.stories.svelte
+++ b/src/components/Framer/Framer.stories.svelte
@@ -17,7 +17,7 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Framer {...args} />
   {/snippet}
@@ -25,9 +25,9 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     embeds: [
       'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
     ],
-  }}"
+  }}
 />
diff --git a/src/components/Framer/Framer.svelte b/src/components/Framer/Framer.svelte
index 97e13751..a3ea1eae 100644
--- a/src/components/Framer/Framer.svelte
+++ b/src/components/Framer/Framer.svelte
@@ -62,25 +62,20 @@
 
   <div id="typeahead-container">
     <div class="embed-link">
-      <a
-        rel="external"
-        target="_blank"
-        href="{activeEmbed}"
-        title="{activeEmbed}"
-      >
-        Live link <Fa icon="{faLink}" />
+      <a rel="external" target="_blank" href={activeEmbed} title={activeEmbed}>
+        Live link <Fa icon={faLink} />
       </a>
     </div>
     <Typeahead
       label="Select an embed"
-      value="{embedTitles[embeds.indexOf(activeEmbed)] ||
+      value={embedTitles[embeds.indexOf(activeEmbed)] ||
         embedTitles[activeEmbedIndex] ||
-        embedTitles[0]}"
-      extract="{(d) => embedTitles[d.index]}"
-      data="{embeds.map((embed, index) => ({ index, embed }))}"
-      placeholder="{'Search'}"
-      showDropdownOnFocus="{true}"
-      on:select="{({ detail }) => {
+        embedTitles[0]}
+      extract={(d) => embedTitles[d.index]}
+      data={embeds.map((embed, index) => ({ index, embed }))}
+      placeholder={'Search'}
+      showDropdownOnFocus={true}
+      on:select={({ detail }) => {
         if (typeof window !== 'undefined') {
           window.localStorage.setItem(
             'framer-active-embed',
@@ -89,7 +84,7 @@
         }
         activeEmbed = detail.original.embed;
         activeEmbedIndex = detail.original.index;
-      }}"
+      }}
     />
   </div>
 
@@ -101,7 +96,7 @@
 
 <div id="home-link">
   <a rel="external" href="./../">
-    <Fa icon="{faDesktop}" />
+    <Fa icon={faDesktop} />
   </a>
 </div>
 
diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte
index f93febe5..212a2baf 100644
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@@ -95,48 +95,48 @@
 </script>
 
 <svelte:window
-  onmousemove="{move}"
-  onmouseup="{end}"
-  onkeydown="{handleKeyDown}"
-  bind:innerWidth="{windowInnerWidth}"
+  onmousemove={move}
+  onmouseup={end}
+  onkeydown={handleKeyDown}
+  bind:innerWidth={windowInnerWidth}
 />
 
 <div id="resizer">
   <div class="slider">
-    <div class="label" style="{`opacity: ${sliding || isFocused ? 1 : 0};`}">
+    <div class="label" style={`opacity: ${sliding || isFocused ? 1 : 0};`}>
       {pixelLabel || $width}px
     </div>
     <button
       class="icon left"
-      disabled="{$width === minWidth}"
-      onclick="{decrement}"
-      onfocus="{onFocus}"
-      onmouseover="{onFocus}"
-      onmouseleave="{onBlur}"
+      disabled={$width === minWidth}
+      onclick={decrement}
+      onfocus={onFocus}
+      onmouseover={onFocus}
+      onmouseleave={onBlur}
     >
-      <Fa icon="{faMobileAlt}" fw />
+      <Fa icon={faMobileAlt} fw />
     </button>
-    <div class="slider-container" bind:this="{container}">
+    <div class="slider-container" bind:this={container}>
       <div class="track"></div>
       <div
         class="handle"
         tabindex="0"
         role="button"
         style="left: calc({offset * 100}% - 5px);"
-        onmousedown="{start}"
-        onfocus="{onFocus}"
-        onblur="{onBlur}"
+        onmousedown={start}
+        onfocus={onFocus}
+        onblur={onBlur}
       ></div>
     </div>
     <button
       class="icon right"
-      disabled="{$width === maxWidth}"
-      onclick="{increment}"
-      onfocus="{onFocus}"
-      onmouseover="{onFocus}"
-      onmouseleave="{onBlur}"
+      disabled={$width === maxWidth}
+      onclick={increment}
+      onfocus={onFocus}
+      onmouseover={onFocus}
+      onmouseleave={onBlur}
     >
-      <Fa icon="{faDesktop}" fw />
+      <Fa icon={faDesktop} fw />
     </button>
   </div>
 </div>
diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte
index 2e0aafca..dd07ef9b 100644
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@@ -158,55 +158,55 @@
 </script>
 
 <svelte:window
-  on:click="{({ target }) => {
+  on:click={({ target }) => {
     if (!hideDropdown && !comboboxRef?.contains(target)) {
       close();
     }
-  }}"
+  }}
 />
 
 <div
   data-svelte-typeahead
-  bind:this="{comboboxRef}"
+  bind:this={comboboxRef}
   role="combobox"
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
-  class:dropdown="{results.length > 0}"
+  class:dropdown={results.length > 0}
   aria-controls="{id}-listbox"
-  aria-expanded="{showResults ||
-    (isFocused && value.length > 0 && results.length === 0)}"
+  aria-expanded={showResults ||
+    (isFocused && value.length > 0 && results.length === 0)}
   id="{id}-typeahead"
 >
   <Search
     {id}
-    removeFormAriaAttributes="{true}"
+    removeFormAriaAttributes={true}
     {...$$restProps}
-    bind:ref="{searchRef}"
+    bind:ref={searchRef}
     aria-autocomplete="list"
     aria-controls="{id}-listbox"
     aria-labelledby="{id}-label"
-    aria-activedescendant="{(
+    aria-activedescendant={(
       selectedIndex >= 0 && !hideDropdown && results.length > 0
     ) ?
       `${id}-result-${selectedIndex}`
-    : null}"
+    : null}
     bind:value
     on:type
     on:input
     on:change
     on:focus
-    on:focus="{() => {
+    on:focus={() => {
       open();
       if (showDropdownOnFocus) {
         showResults = true;
         isFocused = true;
       }
-    }}"
+    }}
     on:clear
-    on:clear="{open}"
+    on:clear={open}
     on:blur
     on:keydown
-    on:keydown="{(e) => {
+    on:keydown={(e) => {
       if (results.length === 0) return;
 
       switch (e.key) {
@@ -228,10 +228,10 @@
           close();
           break;
       }
-    }}"
+    }}
   />
   <ul
-    class:svelte-typeahead-list="{true}"
+    class:svelte-typeahead-list={true}
     role="listbox"
     aria-labelledby="{id}-label"
     id="{id}-listbox"
@@ -241,24 +241,24 @@
         <li
           role="option"
           id="{id}-result-{index}"
-          class:selected="{selectedIndex === index}"
-          class:disabled="{result.disabled}"
-          aria-selected="{selectedIndex === index}"
-          on:click="{() => {
+          class:selected={selectedIndex === index}
+          class:disabled={result.disabled}
+          aria-selected={selectedIndex === index}
+          on:click={() => {
             if (result.disabled) return;
             selectedIndex = index;
             select();
-          }}"
-          on:keyup="{(e) => {
+          }}
+          on:keyup={(e) => {
             if (e.key !== 'Enter') return;
             if (result.disabled) return;
             selectedIndex = index;
             select();
-          }}"
-          on:mouseenter="{() => {
+          }}
+          on:mouseenter={() => {
             if (result.disabled) return;
             selectedIndex = index;
-          }}"
+          }}
         >
           <slot {result} {index} {value}>
             {@html result.string}
diff --git a/src/components/GraphicBlock/AriaHidden.svelte b/src/components/GraphicBlock/AriaHidden.svelte
index 4379590c..467df07a 100644
--- a/src/components/GraphicBlock/AriaHidden.svelte
+++ b/src/components/GraphicBlock/AriaHidden.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  
   interface Props {
     /**
-   * Whether to wrap the graphic with an aria hidden tag.
-   */
+     * Whether to wrap the graphic with an aria hidden tag.
+     */
     hidden?: boolean;
     children?: import('svelte').Snippet;
   }
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 6923b855..9e51a1d3 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -40,11 +40,11 @@
   import PlaceholderImg from './stories/placeholder.png';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <GraphicBlock {...args}>
       <div class="demo-graphic">
-        <img src="{PlaceholderImg}" alt="placeholder" />
+        <img src={PlaceholderImg} alt="placeholder" />
       </div>
     </GraphicBlock>
   {/snippet}
@@ -52,14 +52,14 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
     title: 'Bacon ipsum dolor amet t-bone',
     description:
       'Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.',
     notes:
       'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)',
-  }}"
+  }}
 />
 
 <Story name="ArchieML" {...withStoryDocs(archieMLDocs)}>
@@ -76,18 +76,18 @@
 <Story name="Custom text" {...withStoryDocs(customTextDocs)}>
   <GraphicBlock width="normal">
     {#snippet title()}
-        <div >
+      <div>
         <h5>My smaller title</h5>
       </div>
-      {/snippet}
+    {/snippet}
     <div class="demo-graphic">
-      <img src="{PlaceholderImg}" alt="placeholder" />
+      <img src={PlaceholderImg} alt="placeholder" />
     </div>
     {#snippet notes()}
-        <aside >
+      <aside>
         <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
       </aside>
-      {/snippet}
+    {/snippet}
   </GraphicBlock>
 </Story>
 
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index f6824c1c..bd644c4d 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -76,23 +76,23 @@
 
 <Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
   {#if $$slots.title}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <!-- Custom title content -->
         <slot name="title" />
       </TextBlock>
     </PaddingReset>
   {:else if title}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <h3>{title}</h3>
         {#if description}
-          <Markdown source="{description}" />
+          <Markdown source={description} />
         {/if}
       </TextBlock>
     </PaddingReset>
   {/if}
-  <AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
+  <AriaHidden hidden={!!$$slots.aria || !!ariaDescription}>
     <!-- Graphic content -->
     <slot />
   </AriaHidden>
@@ -102,22 +102,22 @@
         <!-- Custom ARIA markup -->
         <slot name="aria" />
       {:else}
-        <Markdown source="{ariaDescription}" />
+        <Markdown source={ariaDescription} />
       {/if}
     </div>
   {/if}
   {#if $$slots.notes}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <!-- Custom notes content -->
         <slot name="notes" />
       </TextBlock>
     </PaddingReset>
   {:else if notes}
-    <PaddingReset containerIsFluid="{width === 'fluid'}">
-      <TextBlock width="{textWidth}">
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
         <aside>
-          <Markdown source="{notes}" />
+          <Markdown source={notes} />
         </aside>
       </TextBlock>
     </PaddingReset>
diff --git a/src/components/GraphicBlock/TextBlock.svelte b/src/components/GraphicBlock/TextBlock.svelte
index 9c09a42c..bb66d08e 100644
--- a/src/components/GraphicBlock/TextBlock.svelte
+++ b/src/components/GraphicBlock/TextBlock.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
 
-  
   import Block from '../Block/Block.svelte';
   interface Props {
     /** Width of the component within the text well. */
diff --git a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
index 43904f42..9b9c11fe 100644
--- a/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
+++ b/src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
@@ -17,7 +17,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-29 12:37 -->
 
-<div id="g-_ai-chart-box" bind:clientWidth="{width}">
+<div id="g-_ai-chart-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-_ai-chart-xs" class="g-artboard" style="">
@@ -26,7 +26,7 @@
         id="g-_ai-chart-xs-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-1"
@@ -159,7 +159,7 @@
         id="g-_ai-chart-sm-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -292,7 +292,7 @@
         id="g-_ai-chart-md-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
       <div
         id="g-ai2-1"
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 720d119b..4d30fa5e 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -44,7 +44,7 @@
   import Map from './stories/graphic.svelte';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Headline {...args} />
   {/snippet}
@@ -52,49 +52,49 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     section: 'World News',
     hed: 'Reuters Graphics interactive',
     hedSize: 'normal',
     dek: '',
     authors: [],
-  }}"
+  }}
 />
 
 <Story name="With dek" {...withStoryDocs(withDekDocs)}>
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
   />
 </Story>
 
 <Story name="With byline" {...withStoryDocs(withBylineDocs)}>
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-    authors="{['Dea Bankova', 'Aditi Bhandari']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Dea Bankova', 'Aditi Bhandari']}
+    publishTime={new Date('2020-01-01').toISOString()}
   />
 </Story>
 
 <Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
   <Headline width="wide">
     {#snippet hed()}
-        <h1 class="custom-hed" >
+      <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
-      {/snippet}
+    {/snippet}
     {#snippet dek()}
-        <p class="custom-dek !fmt-3" >
+      <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
         >and a financial pillar of ballet companies across the country
       </p>
-      {/snippet}
+    {/snippet}
   </Headline>
   <style lang="scss">
     .custom-hed {
@@ -109,21 +109,20 @@
 </Story>
 
 <Story name="With crown image" {...withStoryDocs(withCrownImgDocs)}>
-  <Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
+  <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
     <!-- Add a crown -->
     {#snippet crown()}
-        <img
-        
-        src="{crownImgSrc}"
+      <img
+        src={crownImgSrc}
         width="100"
         class="mx-auto mb-0"
         alt="Illustration of Europe"
       />
-      {/snippet}
+    {/snippet}
     <!-- Override the hed with a named slot -->
     {#snippet hed()}
-        <h1  class="!font-serif !tracking-wide">Europa</h1>
-      {/snippet}
+      <h1 class="!font-serif !tracking-wide">Europa</h1>
+    {/snippet}
   </Headline>
 </Story>
 
@@ -131,17 +130,17 @@
   <Headline
     width="wider"
     class="!fmt-1"
-    hed="{'Unfriendly skies'}"
-    dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-    section="{'Ukraine Crisis'}"
-    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-    publishTime="{new Date('2022-03-04').toISOString()}"
+    hed={'Unfriendly skies'}
+    dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+    section={'Ukraine Crisis'}
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2022-03-04').toISOString()}
   >
     <!-- Add a crown graphic -->
     {#snippet crown()}
-        <div >
+      <div>
         <Map />
       </div>
-      {/snippet}
+    {/snippet}
   </Headline>
 </Story>
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index ef10aa1b..ef706b7d 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -95,8 +95,8 @@
           <!-- Headline named slot -->
           <slot name="hed" />
         {:else}
-          <h1 class="{hedClass}">
-            <Markdown source="{hed}" parseInline />
+          <h1 class={hedClass}>
+            <Markdown source={hed} parseInline />
           </h1>
         {/if}
         {#if $$slots.dek}
@@ -106,7 +106,7 @@
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
-            <Markdown source="{dek}" />
+            <Markdown source={dek} />
           </div>
         {/if}
       </div>
diff --git a/src/components/Headline/stories/graphic.svelte b/src/components/Headline/stories/graphic.svelte
index 28a6b06c..bfccbab4 100644
--- a/src/components/Headline/stories/graphic.svelte
+++ b/src/components/Headline/stories/graphic.svelte
@@ -14,7 +14,7 @@
   let width = $state(null);
 </script>
 
-<div id="g-graphic-box" bind:clientWidth="{width}">
+<div id="g-graphic-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-graphic-xs" class="g-artboard" style="">
@@ -22,7 +22,7 @@
       <div
         id="g-graphic-xs-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-3"
@@ -89,7 +89,7 @@
       <div
         id="g-graphic-sm-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -213,7 +213,7 @@
       <div
         id="g-graphic-md-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
 
       <div
@@ -346,7 +346,7 @@
       <div
         id="g-graphic-lg-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -485,7 +485,7 @@
       <div
         id="g-graphic-xl-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
index 91b9e59a..1e0af245 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -75,14 +75,14 @@
 
 <Story
   name="With backdrop photo"
-  args="{{
+  args={{
     section: 'World News',
     hed: 'Reuters Graphics Interactive',
     dek: 'The beginning of a beautiful page',
     authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
     publishTime: new Date('2022-03-04').toISOString(),
     img: polarImgSrc,
-  }}"
+  }}
 />
 
 <Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
@@ -95,9 +95,9 @@
       section="World News"
       hed="Reuters Graphics Interactive"
       dek="The beginning of a beautiful page"
-      authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-      publishTime="{new Date('2022-03-04').toISOString()}"
-      img="{polarImgSrc}"
+      authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+      publishTime={new Date('2022-03-04').toISOString()}
+      img={polarImgSrc}
     />
   </div>
 </Story>
@@ -108,12 +108,12 @@
   </Block>
 
   <HeroHeadline
-    hed="{'Earthquake devastates Afghanistan'}"
-    hedSize="{'big'}"
+    hed={'Earthquake devastates Afghanistan'}
+    hedSize={'big'}
     hedWidth="wide"
     class="custom-hero mb-0"
     dek=""
-    authors="{[
+    authors={[
       'Anand Katakam',
       'Vijdan Mohammad Kawoosa',
       'Adolfo Arranz',
@@ -123,8 +123,8 @@
       'Jitesh Chowdhury',
       'Manas Sharma',
       'Aditi Bhandari',
-    ]}"
-    publishTime="{new Date('2022-06-24').toISOString()}"
+    ]}
+    publishTime={new Date('2022-06-24').toISOString()}
   >
     <div slot="background">
       <GraphicBlock
@@ -135,7 +135,7 @@
         notes=""
         ariaDescription="Earthquake impact map"
       >
-        <svelte:component this="{QuakeMap}" />
+        <svelte:component this={QuakeMap} />
       </GraphicBlock>
     </div>
   </HeroHeadline>
@@ -186,16 +186,16 @@
     hed="The conflict in Ethiopia"
     hedSize="bigger"
     hedWidth="wide"
-    authors="{['Aditi Bhandari ', 'David Lewis']}"
-    publishTime="{new Date('2020-12-18').toISOString()}"
+    authors={['Aditi Bhandari ', 'David Lewis']}
+    publishTime={new Date('2020-12-18').toISOString()}
   >
     <div slot="background">
       <Video
         width="widest"
         class="my-0"
-        showControls="{false}"
+        showControls={false}
         preloadVideo="auto"
-        playVideoWhenInView="{false}"
+        playVideoWhenInView={false}
         src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
         poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
         notes="Drone footage from the Village 8 refugee camp in Sudan."
@@ -227,13 +227,13 @@
   </Block>
 
   <HeroHeadline
-    hed="{'Buried under the bricks'}"
+    hed={'Buried under the bricks'}
     hedWidth="wide"
     class="mb-0"
-    dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
-    section="{'Global news'}"
-    authors="{['Mariano Zafra']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    dek={'How mud-brick housing made the Morocco earthquake so deadly'}
+    section={'Global news'}
+    authors={['Mariano Zafra']}
+    publishTime={new Date('2020-01-01').toISOString()}
   >
     <div slot="inline">
       <FeaturePhoto
@@ -253,13 +253,13 @@
   </Block>
 
   <HeroHeadline
-    hed="{'The plunge from 29,000 feet'}"
+    hed={'The plunge from 29,000 feet'}
     hedWidth="wide"
     class="mb-0"
-    dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
-    section="{'Global news'}"
-    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
+    section={'Global news'}
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2020-01-01').toISOString()}
   >
     <div slot="inline">
       <GraphicBlock
@@ -270,7 +270,7 @@
         notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
         ariaDescription="Aerial map showing trajectory of crash"
       >
-        <svelte:component this="{CrashMap}" />
+        <svelte:component this={CrashMap} />
       </GraphicBlock>
     </div>
   </HeroHeadline>
@@ -282,21 +282,21 @@
   </Block>
 
   <HeroHeadline
-    hed="{'Devastation in Derna'}"
+    hed={'Devastation in Derna'}
     hedWidth="wide"
     class="mb-0"
-    dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
-    section="{'Global news'}"
-    authors="{['Simon Scarr']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    dek={'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}
+    section={'Global news'}
+    authors={['Simon Scarr']}
+    publishTime={new Date('2020-01-01').toISOString()}
   >
     <div slot="inline">
       <Video
         width="widest"
         class="my-0"
-        showControls="{false}"
+        showControls={false}
         preloadVideo="auto"
-        playVideoWhenInView="{false}"
+        playVideoWhenInView={false}
         src="https://www.reuters.com/graphics/LIBYA-STORM/EXPLAINER/klvyzqebzpg/cdn/video/drone.mp4"
         notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
         ariaDescription="alttext fot video"
@@ -308,14 +308,14 @@
 <Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
   <HeroHeadline
     class="custom-hed"
-    authors="{[
+    authors={[
       'Prasanta Kumar Dutta',
       'Dea Bankova',
       'Aditi Bhandari',
       'Anurag Rao',
-    ]}"
-    publishTime="{new Date('2023-05-11').toISOString()}"
-    img="{eurovisImgSrc}"
+    ]}
+    publishTime={new Date('2023-05-11').toISOString()}
+    img={eurovisImgSrc}
   >
     <h1 slot="hed">
       <div class="body-note">A visual guide to</div>
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
index 8bc3e39e..731493f9 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -96,7 +96,7 @@
         {#if $$slots.hed}
           <Headline
             class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
+            width={hedWidth}
             {section}
             {hedSize}
             {hed}
@@ -110,7 +110,7 @@
         {:else}
           <Headline
             class="{cls} !text-{hedAlign}"
-            width="{hedWidth}"
+            width={hedWidth}
             {section}
             {hedSize}
             {hed}
@@ -144,11 +144,11 @@
     <!-- Inline hero -->
     {#if $$slots.inline}
       <Block width="fluid" class="hero-headline inline-hero">
-        <PaddingReset containerIsFluid="{true}">
+        <PaddingReset containerIsFluid={true}>
           {#if $$slots.hed}
             <Headline
               class="{cls} !text-{hedAlign}"
-              width="{hedWidth}"
+              width={hedWidth}
               {section}
               {hedSize}
               {hed}
@@ -162,7 +162,7 @@
           {:else}
             <Headline
               class="{cls} !text-{hedAlign}"
-              width="{hedWidth}"
+              width={hedWidth}
               {section}
               {hedSize}
               {hed}
diff --git a/src/components/HeroHeadline/stories/graphics/crash.svelte b/src/components/HeroHeadline/stories/graphics/crash.svelte
index 66355933..1fc73b82 100644
--- a/src/components/HeroHeadline/stories/graphics/crash.svelte
+++ b/src/components/HeroHeadline/stories/graphics/crash.svelte
@@ -18,7 +18,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->
 
-<div id="g-CRASH_1-box" bind:clientWidth="{width}">
+<div id="g-CRASH_1-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-CRASH_1-xs" class="g-artboard" style="">
@@ -27,7 +27,7 @@
         id="g-CRASH_1-xs-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-1"
@@ -80,7 +80,7 @@
         id="g-CRASH_1-sm-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -133,7 +133,7 @@
         id="g-CRASH_1-md-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
       <div
         id="g-ai2-1"
@@ -194,7 +194,7 @@
         id="g-CRASH_1-lg-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -255,7 +255,7 @@
         id="g-CRASH_1-xl-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"
@@ -316,7 +316,7 @@
         id="g-CRASH_1-xl_copy-img"
         class="g-aiImg"
         alt=""
-        style="{`background-image: url(${chartXxl});`}"
+        style={`background-image: url(${chartXxl});`}
       ></div>
       <div
         id="g-ai5-1"
diff --git a/src/components/HeroHeadline/stories/graphics/quakemap.svelte b/src/components/HeroHeadline/stories/graphics/quakemap.svelte
index 941a391b..5ca06cdd 100644
--- a/src/components/HeroHeadline/stories/graphics/quakemap.svelte
+++ b/src/components/HeroHeadline/stories/graphics/quakemap.svelte
@@ -13,7 +13,7 @@
   import chartXl from '././quake-map-top-xl.jpeg';
 </script>
 
-<div id="g-quake-map-top-box" bind:clientWidth="{width}">
+<div id="g-quake-map-top-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-quake-map-top-xs" class="g-artboard" style="">
@@ -21,7 +21,7 @@
       <div
         id="g-quake-map-top-xs-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-1"
@@ -102,7 +102,7 @@
       <div
         id="g-quake-map-top-sm-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -183,7 +183,7 @@
       <div
         id="g-quake-map-top-md-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
       <div
         id="g-ai2-1"
@@ -271,7 +271,7 @@
       <div
         id="g-quake-map-top-lg-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -359,7 +359,7 @@
       <div
         id="g-quake-map-top-xl-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index 3b1bc3a0..34db11c7 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -29,7 +29,7 @@
   const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <PhotoCarousel {...args} />
   {/snippet}
@@ -37,18 +37,18 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'wider',
     photos,
-  }}"
+  }}
 />
 
 <Story
   name="Custom credits and captions"
-  args="{{
+  args={{
     width: 'wider',
     photos,
-  }}"
+  }}
   {...withStoryDocs(customDocs)}
 >
   <PhotoCarousel
@@ -58,11 +58,11 @@
     }}
   >
     {#snippet credit({ credit })}
-        <p class="custom-credit"  >{credit}</p>
-      {/snippet}
+      <p class="custom-credit">{credit}</p>
+    {/snippet}
     {#snippet caption({ caption })}
-        <p class="custom-caption"  >{caption}</p>
-      {/snippet}
+      <p class="custom-caption">{caption}</p>
+    {/snippet}
   </PhotoCarousel>
 </Story>
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index a785c761..c746e555 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -111,17 +111,17 @@
 </script>
 
 <Block {width} {id} class="photo-carousel fmy-6 {cls}">
-  <div class="carousel-container" bind:clientWidth="{containerWidth}">
+  <div class="carousel-container" bind:clientWidth={containerWidth}>
     <Splide
-      hasTrack="{false}"
-      options="{{
+      hasTrack={false}
+      options={{
         height: carouselHeight,
         fixedHeight: carouselHeight,
         lazyLoad: 'nearby',
         preloadPages: preloadImages,
-      }}"
-      aria-label="{carouselAriaLabel}"
-      on:move="{handleActiveChange}"
+      }}
+      aria-label={carouselAriaLabel}
+      on:move={handleActiveChange}
     >
       <div class="image-container">
         <SplideTrack>
@@ -134,20 +134,19 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy="{photo.src}"
-                    alt="{photo.altText}"
-                    style:object-fit="{photo.objectFit ||
-                      defaultImageObjectFit}"
-                    style:object-position="{photo.objectPosition ||
-                      defaultImageObjectPosition}"
+                    data-splide-lazy={photo.src}
+                    alt={photo.altText}
+                    style:object-fit={photo.objectFit || defaultImageObjectFit}
+                    style:object-position={photo.objectPosition ||
+                      defaultImageObjectPosition}
                   />
                   {#if $$slots.credit}
-                    <slot name="credit" credit="{photo.credit}" />
+                    <slot name="credit" credit={photo.credit} />
                   {:else}
                     <span
                       class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
-                      class:contain-fit="{photo.objectFit === 'contain' ||
-                        defaultImageObjectFit === 'contain'}"
+                      class:contain-fit={photo.objectFit === 'contain' ||
+                        defaultImageObjectFit === 'contain'}
                       >{photo.credit}</span
                     >
                   {/if}
@@ -158,18 +157,18 @@
         </SplideTrack>
 
         {#if photos[activeImageIndex].caption}
-          <PaddingReset containerIsFluid="{width === 'fluid'}">
-            <Block width="{textWidth}">
+          <PaddingReset containerIsFluid={width === 'fluid'}>
+            <Block width={textWidth}>
               {#if $$slots.caption}
                 <slot
                   name="caption"
-                  caption="{photos[activeImageIndex].caption}"
+                  caption={photos[activeImageIndex].caption}
                 />
               {:else}
                 {#key activeImageIndex}
                   <p
                     class="caption body-caption text-center"
-                    in:fly|local="{{ x: 20, duration: 175 }}"
+                    in:fly|local={{ x: 20, duration: 175 }}
                   >
                     {photos[activeImageIndex].caption}
                   </p>
@@ -185,10 +184,10 @@
 
         <div class="splide__arrows fp-1">
           <button class="splide__arrow splide__arrow--prev">
-            <Fa icon="{faChevronLeft}" fw />
+            <Fa icon={faChevronLeft} fw />
           </button>
           <button class="splide__arrow splide__arrow--next">
-            <Fa icon="{faChevronRight}" fw />
+            <Fa icon={faChevronRight} fw />
           </button>
         </div>
       </div>
diff --git a/src/components/PhotoPack/PhotoPack.mdx b/src/components/PhotoPack/PhotoPack.mdx
new file mode 100644
index 00000000..a76ec09e
--- /dev/null
+++ b/src/components/PhotoPack/PhotoPack.mdx
@@ -0,0 +1,127 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PhotoPackStories from './PhotoPack.stories.svelte';
+
+<Meta of={PhotoPackStories} />
+
+# PhotoPack
+
+The `PhotoPack` component makes simple photo grids with custom layouts at various breakpoints.
+
+`images` are defined with their src, alt text, captions and an optional `maxHeight`, which ensures that the images are no taller than that height in any layout.
+
+`layouts` describe how images will be laid out at different breakpoints. The default layout is one photo per row, stacked vertically -- i.e. mobile layout. You can customise the layouts and group images into `rows` above a certain `breakpoint` by specifying the number of images that should go in that row. For example:
+
+```javascript
+const layouts = [
+  {
+    breakpoint: 450,
+    rows: [1, 2, 1],
+  },
+];
+```
+
+... tells the component that when the `PhotoPack` container is 450 pixels or wider, it should group the 4 images in 3 rows: 1 in the first, 2 in the second and 1 in the last.
+
+You can define as many layouts for as many images as you like.
+
+```svelte
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+
+  /** Array of photo metadata */
+  const images = [
+    {
+      src: 'https://...',
+      altText: 'Alt text',
+      caption: 'Lorem ipsum. REUTERS/Photog',
+      // Optional max-height of images across all layouts
+      maxHeight: 800,
+    },
+    // ...
+  ];
+
+  /** Set the number of photos in each row at various breakpoints */
+  const layouts = [
+    {
+      breakpoint: 450, // Applies to containers wider than 450px
+      rows: [1, 2, 1], // Number of photos in each row
+    },
+    // Another layout for containers wider than 750px
+    { breakpoint: 750, rows: [1, 3] },
+  ];
+</script>
+
+<PhotoPack {images} {layouts} />
+```
+
+<Canvas of={PhotoPackStories.Demo} />
+
+## ArchieML
+
+```yaml
+[blocks]
+# ...
+
+type: photo-pack
+id: my-photo-pack
+class: mb-2
+width: wide
+textWidth: normal
+gap: 10
+[.images]
+  src: images/my-img-1.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-2.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-3.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-4.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-5.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+[]
+
+# ...
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+    <!-- ... -->
+  {:else if block.type === 'photo-pack'}
+    <PhotoPack
+      id={block.id}
+      class={block.class}
+      width={block.width}
+      textWidth={block.textWidth}
+      images={block.images.map((img) => ({
+        src: `${assets}/${img.src}`,
+        altText: img.altText,
+        caption: img.caption,
+      }))}
+      layouts={[
+        { breakpoint: 750, rows: [2, 3] },
+        { breakpoint: 450, rows: [1, 2, 2] },
+      ]}
+    />
+
+    <!-- ... -->
+  {/if}
+{/each}
+```
+
+## Misisng alt text
+
+If any of your images is missing `altText` a small warning will overlay the photo.
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index f2acea98..0c0ef376 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -1,19 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import archieMLDocs from './stories/docs/archieML.md?raw';
-  // @ts-ignore raw
-  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PhotoPack from './PhotoPack.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Multimedia/PhotoPack',
     component: PhotoPack,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
@@ -24,37 +15,34 @@
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
   const defaultImages = [
     {
-      src: 'https://via.placeholder.com/1024x768.jpg',
-      altText: 'alt text',
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg',
       caption:
-        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
-      maxHeight: 400,
+        "Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1640x1180.jpg',
-      altText: 'alt text',
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_2007900040_UP1.jpeg',
       caption:
-        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
+        "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1200x900.jpg',
-      altText: 'alt text',
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_635809122_UP1E.jpeg',
       caption:
-        'People walk past the remains of a missile at a bus terminal in Kyiv, Ukraine March 4, 2022. REUTERS/Valentyn Ogirenko',
+        "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
+      altText: 'alt text',
     },
     {
-      src: 'https://via.placeholder.com/1024x768.jpg',
-      altText: 'alt text',
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T191015Z_1293757566_UP1.jpeg',
       caption:
-        'People walk past the remains of a missile at a bus terminal. REUTERS/Valentyn Ogirenko',
+        "Spain's Sergio Busquets in action with Germany's Thomas Muller.",
+      altText: 'alt text',
     },
   ];
 
@@ -70,34 +58,7 @@
     width: 'wide',
     textWidth: 'normal',
     gap: '15',
-    images: [
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-        maxHeight: 600,
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-      {
-        src: 'https://via.placeholder.com/1024x768.jpg',
-        altText: 'alt text',
-        caption: 'Lorem ipsum. Reuters/Photog',
-      },
-    ],
+    images: defaultImages,
     layouts: [
       { breakpoint: 750, rows: [2, 3] },
       { breakpoint: 450, rows: [1, 2, 2] },
@@ -106,8 +67,8 @@
 
   const altTextImages = [
     {
-      src: 'https://via.placeholder.com/1024x768.jpg',
       altText: 'alt text',
+      src: 'https://via.placeholder.com/1024x768.jpg',
       caption:
         'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
       maxHeight: 400,
@@ -122,37 +83,23 @@
   const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
 </script>
 
-<Template >
-  {#snippet children({ ...args })}
-    <PhotoPack {...args} />
-  {/snippet}
-</Template>
-
-
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     width: 'wide',
     textWidth: 'normal',
     images: defaultImages,
     layouts: defaultLayouts,
-  }}"
-/>
-
-<Story
-  name="ArchieML"
-  {...withStoryDocs(archieMLDocs)}
-  args="{archieMLBlock}"
+  }}
 />
 
 <Story
   name="Missing altText"
-  args="{{
+  exportName="MissingAltText"
+  args={{
     width: 'wide',
     textWidth: 'normal',
     images: altTextImages,
     layouts: altTextLayouts,
-  }}"
-  {...withStoryDocs(missingAltTextDocs)}
+  }}
 />
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 70b6dade..399d6454 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -1,102 +1,92 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photopack--docs) -->
 <script lang="ts">
-  interface Image {
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import Markdown from '../Markdown/Markdown.svelte';
+
+  // Utils
+  import { random4 } from '../../utils';
+  import { groupRows } from './utils';
+  // import { groupRows } from './utils';
+
+  // Types
+  export interface Image {
     src: string;
     altText: string;
     caption?: string;
     maxHeight?: number;
   }
-  /**
-   * Array of image objects
-   * @required
-   */
-  export let images: Image[] = [];
 
-  interface Layout {
+  export interface Layout {
     breakpoint: number;
     rows: number[];
   }
-  /**
-   * Array of layout objects
-   * @required
-   */
-  export let layouts: Layout[] = [];
-  /**
-   * Gap between images.
-   * @type {number}
-   */
-  export let gap = 15;
-
-  const random4 = () =>
-    Math.floor((1 + Math.random()) * 0x10000)
-      .toString(16)
-      .substring(1);
-  /**
-   * Add an ID to target with SCSS. Should be unique from all other elements.
-   * @type {string}
-   */
-  export let id: string = 'photopack-' + random4() + random4();
-  /**
-   * Add a class to target with SCSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
 
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
-  /** Width of the component within the text well. */
-  export let width: ContainerWidth = 'normal';
+  interface Props {
+    /** Array of image objects */
+    images: Image[];
+    /** Array of layout objects */
+    layouts?: Layout[];
+    /** Gap between images. */
+    gap?: number;
+    /** Add an ID to target with SCSS. Should be unique from all other elements. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class: string;
+    /** Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid' */
+    width: ContainerWidth;
+    /** Set a different width for captions within the text well. For example, "normal" to keep captions inline with the rest of the text well.
+     *
+     *  Can't ever be wider than `width`: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid' */
+    textWidth: ContainerWidth;
+  }
+
+  let {
+    images,
+    layouts,
+    gap = 15,
+    id = 'photopack-' + random4() + random4(),
+    class: cls = '',
+    width = 'normal',
+    textWidth = 'normal',
+  }: Props = $props();
+
+  let containerWidth = $state(0); // or undefined?
+
   /**
-   * Set a different width for captions within the text well, for example,
-   * "normal" to keep captions inline with the rest of the text well.
-   * Can't ever be wider than `width`.
-   * @type {string}
+   *
+   * Sort layouts by descending breakpoints.
+   *
+   * @NOTE - We can't use `sort` directly on the array because it mutates the original array; we can't update a state inside a derived expression: https://svelte.dev/docs/svelte/runtime-errors#Client-errors-state_unsafe_mutation
+   *
+   * So, we need to use `toSorted` instead.
    */
-  export let textWidth: ContainerWidth = 'normal';
-
-  import Block from '../Block/Block.svelte';
-  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
-
-  let containerWidth: number;
-
-  const groupRows = (images: Image[], layout?: Layout) => {
-    // Default layout, one img per row
-    if (!layout) return images.map((img) => [img]);
-    // Otherwise, chunk into rows according to layout scheme
-    let i = 0;
-    const rows = [];
-    for (const rowLength of layout.rows) {
-      const row = [];
-      for (const imgI of [...Array(rowLength).keys()]) {
-        row.push(images[imgI + i]);
-      }
-      rows.push(row);
-      i += rowLength;
-    }
-    return rows;
-  };
-  // Sort so breakpoints always descend
-  $: layouts.sort((a, b) => (a.breakpoint < b.breakpoint ? 1 : -1));
-  $: layout = layouts.find(
-    (l) =>
-      // Must have valid rows schema, i.e., adds to the total number of images
-      l.rows.reduce((a, b) => a + b, 0) === images.length &&
-      // Breakpoint is higher than container width
-      (containerWidth || 0) >= l.breakpoint
+  let sortedLayouts = $derived(
+    layouts?.toSorted((a, b) => (a.breakpoint < b.breakpoint ? 1 : -1))
   );
-  $: rows = groupRows(images, layout);
+
+  let layout = $derived(
+    sortedLayouts?.find(
+      (l) =>
+        // Must have valid rows schema, i.e., adds to the total number of images
+        l.rows.reduce((a, b) => a + b, 0) === images.length &&
+        // Breakpoint is higher than container width
+        (containerWidth || 0) >= l.breakpoint
+    )
+  );
+
+  let rows = $derived(groupRows(images, layout));
 </script>
 
 <Block {width} {id} class="photopack fmy-6 {cls}">
-  <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
+  <div class="photopack-container w-full" bind:clientWidth={containerWidth}>
     {#each rows as row, ri}
       <div
         class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
-        style:margin-bottom="{ri < rows.length - 1 ? gap + 'px' : ''}"
+        style:margin-bottom={ri < rows.length - 1 ? gap + 'px' : ''}
       >
         {#each row as img, i}
           <figure
@@ -105,9 +95,9 @@
           >
             <img
               class="m-0 w-full h-full object-cover"
-              src="{img.src}"
-              alt="{img.altText}"
-              style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
+              src={img.src}
+              alt={img.altText}
+              style:max-height={img.maxHeight ? img.maxHeight + 'px' : ''}
             />
             {#if !img.altText}
               <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
@@ -117,14 +107,14 @@
       </div>
     {/each}
   </div>
-  <PaddingReset containerIsFluid="{width === 'fluid'}">
+  <PaddingReset containerIsFluid={width === 'fluid'}>
     <div class="notes contents">
-      <Block width="{textWidth}" class="photopack-captions-container">
+      <Block width={textWidth} class="photopack-captions-container">
         {#each rows as row, ri}
           {#each row as img, i}
             {#if img.caption}
               <div id="{id}-figure-{ri}-{i}" class="caption">
-                <Markdown source="{img.caption}" />
+                <Markdown source={img.caption} />
               </div>
             {/if}
           {/each}
diff --git a/src/components/PhotoPack/stories/docs/archieML.md b/src/components/PhotoPack/stories/docs/archieML.md
deleted file mode 100644
index 130c2c3f..00000000
--- a/src/components/PhotoPack/stories/docs/archieML.md
+++ /dev/null
@@ -1,63 +0,0 @@
-```yaml
-[blocks]
-# ...
-
-type: photo-pack
-id: my-photo-pack
-class: mb-2
-width: wide
-textWidth: normal
-gap: 10
-[.images]
-  src: images/my-img-1.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-
-  src: images/my-img-2.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-
-  src: images/my-img-3.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-
-  src: images/my-img-4.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-
-  src: images/my-img-5.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-[]
-
-# ...
-[]
-```
-
-```svelte
-<!-- App.svelte -->
-{#each content.blocks as block}
-  {#if block.type === 'text'}
-  <!-- ... -->
-
-  {:else if block.type === 'photo-pack'}
-    <PhotoPack
-      id={block.id}
-      class={block.class}
-      width={block.width}
-      textWidth={block.textWidth}
-      images={block.images.map((img) => ({
-        src: `${assets}/${img.src}`,
-        altText: img.altText,
-        caption: img.caption,
-      }))}
-      layouts={[
-        { breakpoint: 750, rows: [2, 3] },
-        { breakpoint: 450, rows: [1, 2, 2] },
-      ]}
-    />
-    
-  <!-- ... -->
-  {/if}
-{/each}
-```
diff --git a/src/components/PhotoPack/stories/docs/component.md b/src/components/PhotoPack/stories/docs/component.md
deleted file mode 100644
index 69c32c05..00000000
--- a/src/components/PhotoPack/stories/docs/component.md
+++ /dev/null
@@ -1,45 +0,0 @@
-The `PhotoPack` component makes simple photo grids with custom layouts at whatever breakpoint you need.
-
-```svelte
-<script>
-  import { PhotoPack } from '@reuters-graphics/graphics-components';
-
-  const images = [
-    {
-      src: 'https://...',
-      altText: 'Alt text',
-      caption: 'Lorem ipsum. REUTERS/Photog',
-      // Optional max-height of image across all layouts
-      maxHeight: 800,
-    },
-    // ...
-  ];
-
-  const layouts = [
-    {
-      // Breakpoint above which this layout applies
-      breakpoint: 450,
-      // Number of photos in each row of this layout, adding up to the total number of images
-      rows: [1, 2, 1],
-    },
-    { breakpoint: 750, rows: [1, 3] },
-  ];
-</script>
-
-<PhotoPack images="{images}" layouts="{layouts}" />
-```
-
-`images` are defined with their src, alt text, captions and an optional `maxHeight`, which makes sure the image is no taller than that height in pixels in any layout.
-
-`layouts` describe how those images will be laid out in rows at different breakpoints. The default layout (mobile-first) is each photo on its own row, stacked vertically, but you can group photos into `rows` above a `breakpoint` by specifying the number of photos that should go in that row. For example:
-
-```javascript
-const layouts = [{
-  breakpoint: 450,
-  rows: [1,2,1],
-}];
-```
-
-... tells the component that when the `PhotoPack` container is 450 pixels or wider, it should group the 4 photos in 3 rows, 1 in the first, 2 in the second and 1 in the last.
-
-You can define as many layouts for as many images as you like.
diff --git a/src/components/PhotoPack/stories/docs/missingAltText.md b/src/components/PhotoPack/stories/docs/missingAltText.md
deleted file mode 100644
index 93304de2..00000000
--- a/src/components/PhotoPack/stories/docs/missingAltText.md
+++ /dev/null
@@ -1 +0,0 @@
-If any of your images is missing `altText` a small warning will overlay the photo.
diff --git a/src/components/PhotoPack/utils.ts b/src/components/PhotoPack/utils.ts
new file mode 100644
index 00000000..da466828
--- /dev/null
+++ b/src/components/PhotoPack/utils.ts
@@ -0,0 +1,18 @@
+import type { Image, Layout } from './PhotoPack.svelte';
+
+export const groupRows = (images: Image[], layout?: Layout) => {
+  // Default layout, one img per row
+  if (!layout) return images.map((img) => [img]);
+  // Otherwise, chunk into rows according to layout scheme
+  let i = 0;
+  const rows = [];
+  for (const rowLength of layout.rows) {
+    const row = [];
+    for (const imgI of [...Array(rowLength).keys()]) {
+      row.push(images[imgI + i]);
+    }
+    rows.push(row);
+    i += rowLength;
+  }
+  return rows;
+};
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
index 5119f692..8b90c1f3 100644
--- a/src/components/PymChild/PymChild.stories.svelte
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -17,7 +17,7 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <PymChild {...args} />
     <div>Nothing to see here. 😎</div>
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
index f3e4197d..f0177b39 100644
--- a/src/components/ReferralBlock/ReferralBlock.stories.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -41,7 +41,7 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <ReferralBlock {...args} />
   {/snippet}
@@ -49,21 +49,21 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     section: '/lifestyle/sports/',
     number: 4,
     class: 'fmy-0',
     heading: 'More World Cup coverage',
-  }}"
+  }}
 />
 
 <Story
   name="By collection"
-  args="{{
+  args={{
     collection: 'x-trump',
     number: 6,
     class: 'fmy-8',
     heading: 'The latest Trump coverage',
-  }}"
+  }}
   {...withStoryDocs(collectionDocs)}
 />
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index 0110b37f..f1a4ec3f 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -96,33 +96,33 @@
   <Block {width} {id} class="referrals-block {cls}">
     <div
       class="block-container"
-      class:stacked="{clientWidth && clientWidth < 750}"
+      class:stacked={clientWidth && clientWidth < 750}
       bind:clientWidth
     >
       {#if heading}
         <div
           class="heading h4 font-bold"
-          class:stacked="{clientWidth && clientWidth < 750}"
+          class:stacked={clientWidth && clientWidth < 750}
         >
           {heading}
         </div>
       {/if}
       <div
         class="referral-container inline-flex flex-wrap w-full justify-between"
-        class:stacked="{clientWidth && clientWidth < 750}"
-        class:xs="{clientWidth && clientWidth < 450}"
+        class:stacked={clientWidth && clientWidth < 750}
+        class:xs={clientWidth && clientWidth < 450}
       >
         {#each referrals as referral}
           <div class="referral">
             <a
               href="https://www.reuters.com{referral.canonical_url}"
-              target="{linkTarget}"
-              rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
+              target={linkTarget}
+              rel={linkTarget === '_blank' ? 'noreferrer' : null}
             >
               <div class="referral-pack flex justify-around my-0 mx-auto">
                 <div
                   class="headline"
-                  class:xs="{clientWidth && clientWidth < 450}"
+                  class:xs={clientWidth && clientWidth < 450}
                 >
                   <div
                     class="kicker m-0 body-caption leading-tighter"
@@ -145,14 +145,14 @@
                 </div>
                 <div
                   class="image-container block m-0 overflow-hidden relative"
-                  class:xs="{clientWidth && clientWidth < 450}"
+                  class:xs={clientWidth && clientWidth < 450}
                 >
                   <img
                     class="block object-cover m-0 w-full"
                     data-chromatic="ignore"
-                    src="{referral.thumbnail.renditions.landscape['240w']}"
-                    alt="{referral.thumbnail.caption ||
-                      referral.thumbnail.alt_text}"
+                    src={referral.thumbnail.renditions.landscape['240w']}
+                    alt={referral.thumbnail.caption ||
+                      referral.thumbnail.alt_text}
                   />
                 </div>
               </div>
diff --git a/src/components/Scroller/Background.svelte b/src/components/Scroller/Background.svelte
index 0f568478..1b60f30d 100644
--- a/src/components/Scroller/Background.svelte
+++ b/src/components/Scroller/Background.svelte
@@ -22,8 +22,8 @@
   {#if preload === 0 || (i >= (stackBackground ? 0 : index - preload) && i <= index + preload)}
     <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:visible={stackBackground ? i <= index : i === index}
+      class:invisible={stackBackground ? i > index : i !== index}
     >
       <step.background {...step.backgroundProps || {}}></step.background>
     </div>
diff --git a/src/components/Scroller/Embedded/Background.svelte b/src/components/Scroller/Embedded/Background.svelte
index 73150e3c..b7bc244d 100644
--- a/src/components/Scroller/Embedded/Background.svelte
+++ b/src/components/Scroller/Embedded/Background.svelte
@@ -11,7 +11,7 @@
   let { step, backgroundWidth, index }: Props = $props();
 </script>
 
-<Block width="{backgroundWidth}" class="background-container step-{index + 1}">
+<Block width={backgroundWidth} class="background-container step-{index + 1}">
   <div class="embedded-background step-{index + 1}" aria-hidden="true">
     <step.background {...step.backgroundProps || {}}></step.background>
   </div>
diff --git a/src/components/Scroller/Embedded/Foreground.svelte b/src/components/Scroller/Embedded/Foreground.svelte
index c959a658..d3fe2d81 100644
--- a/src/components/Scroller/Embedded/Foreground.svelte
+++ b/src/components/Scroller/Embedded/Foreground.svelte
@@ -17,18 +17,18 @@
 
   {#if typeof step.altText === 'string'}
     <div class="background-alt-text visually-hidden">
-      <Markdown source="{step.altText}" />
+      <Markdown source={step.altText} />
     </div>
   {/if}
 {:else if typeof step.foreground === 'string'}
   <Block class="body-text step-{index + 1}">
     <div class="embedded-foreground step-{index + 1}">
-      <Markdown source="{step.foreground}" />
+      <Markdown source={step.foreground} />
     </div>
 
     {#if typeof step.altText === 'string'}
       <div class="background-alt-text visually-hidden">
-        <Markdown source="{step.altText}" />
+        <Markdown source={step.altText} />
       </div>
     {/if}
   </Block>
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index 58068a49..f5e01ede 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -19,20 +19,20 @@
       <div class="empty-step-foreground"></div>
       {#if typeof step.altText === 'string'}
         <div class="background-alt-text visually-hidden">
-          <Markdown source="{step.altText}" />
+          <Markdown source={step.altText} />
         </div>
       {/if}
     {:else}
       <div class="step-foreground w-full">
         {#if typeof step.foreground === 'string'}
-          <Markdown source="{step.foreground}" />
+          <Markdown source={step.foreground} />
         {:else}
           <step.foreground {...step.foregroundProps || {}}></step.foreground>
         {/if}
       </div>
       {#if typeof step.altText === 'string'}
         <div class="background-alt-text visually-hidden">
-          <Markdown source="{step.altText}" />
+          <Markdown source={step.altText} />
         </div>
       {/if}
     {/if}
diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index e930a4bb..4b43fae8 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -79,7 +79,7 @@
   };
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Scroller {...args} />
   {/snippet}
@@ -87,7 +87,7 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     steps: [
       {
         background: BasicStep,
@@ -112,14 +112,14 @@
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}"
+  }}
 />
 
-<Story name="ArchieML" args="{docBlock}" {...withStoryDocs(archieMLDocs)} />
+<Story name="ArchieML" args={docBlock} {...withStoryDocs(archieMLDocs)} />
 
 <Story
   name="Foreground components"
-  args="{{
+  args={{
     steps: [
       {
         background: BasicStep,
@@ -142,13 +142,13 @@
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}"
+  }}
   {...withStoryDocs(interactiveDocs)}
 />
 
 <Story
   name="Ai2svelte"
-  args="{{
+  args={{
     steps: [
       {
         background: AiMap1,
@@ -175,6 +175,6 @@
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}"
+  }}
   {...withStoryDocs(ai2svelteDocs)}
 />
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 67906ce6..a0b4948d 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -123,13 +123,13 @@
       <div
         slot="background"
         class="background min-h-screen relative p-0 flex justify-center"
-        class:right="{foregroundPosition === 'left opposite'}"
-        class:left="{foregroundPosition === 'right opposite'}"
+        class:right={foregroundPosition === 'left opposite'}
+        class:left={foregroundPosition === 'right opposite'}
         aria-hidden="true"
       >
         <div class="scroller-graphic-well w-full">
           <Block
-            width="{backgroundWidth}"
+            width={backgroundWidth}
             class="background-container step-{index +
               1} my-0 min-h-screen flex justify-center items-center relative"
           >
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte
index 37392f3c..d860564d 100644
--- a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte
+++ b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte
@@ -15,7 +15,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:21 -->
 
-<div id="g-step-1-box" bind:clientWidth="{width}">
+<div id="g-step-1-box" bind:clientWidth={width}>
   <!-- Artboard: XL -->
   {#if width && width >= 1200}
     <div id="g-step-1-xl" class="g-artboard" style="">
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
index a56006a2..021c14ec 100644
--- a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
+++ b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
@@ -15,7 +15,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->
 
-<div id="g-step-2-box" bind:clientWidth="{width}">
+<div id="g-step-2-box" bind:clientWidth={width}>
   <!-- Artboard: XL -->
   {#if width && width >= 1200}
     <div id="g-step-2-xl" class="g-artboard" style="">
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
index 75c3b217..bab2159e 100644
--- a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
+++ b/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
@@ -15,7 +15,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->
 
-<div id="g-step-3-box" bind:clientWidth="{width}">
+<div id="g-step-3-box" bind:clientWidth={width}>
   <!-- Artboard: XL -->
   {#if width && width >= 1200}
     <div id="g-step-3-xl" class="g-artboard" style="">
diff --git a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
index 63c91bee..dbb0565d 100644
--- a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
+++ b/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
@@ -11,7 +11,7 @@
 <p>The count is {count}</p>
 
 <button
-  onclick="{() => {
+  onclick={() => {
     count += 1;
-  }}">Click Me</button
+  }}>Click Me</button
 >
diff --git a/src/components/Scroller/stories/components/basic/Step.svelte b/src/components/Scroller/stories/components/basic/Step.svelte
index 05b95243..d914ec8a 100644
--- a/src/components/Scroller/stories/components/basic/Step.svelte
+++ b/src/components/Scroller/stories/components/basic/Step.svelte
@@ -6,7 +6,7 @@
   let { colour = 'lightblue' }: Props = $props();
 </script>
 
-<div class="step" style="{`background: ${colour};`}"></div>
+<div class="step" style={`background: ${colour};`}></div>
 
 <style lang="scss">
   .step {
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
index 55fbdf5a..e0399fd5 100644
--- a/src/components/SearchInput/SearchInput.stories.svelte
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -17,10 +17,10 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <SearchInput {...args} />
   {/snippet}
 </Template>
 
-<Story name="Default" args="{{}}" />
+<Story name="Default" args={{}} />
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index b0761c69..5e0e49ca 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -38,17 +38,17 @@
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
-    placeholder="{searchPlaceholder}"
-    oninput="{input}"
+    placeholder={searchPlaceholder}
+    oninput={input}
     bind:value
   />
   <div
     class="search--x absolute"
     role="button"
     tabindex="0"
-    class:invisible="{!active}"
-    onclick="{clear}"
-    onkeyup="{clear}"
+    class:invisible={!active}
+    onclick={clear}
+    onkeyup={clear}
   >
     <X />
   </div>
diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index cd706764..239a704d 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -31,7 +31,7 @@
             {#each links.social_links as link}
               {@const SvelteComponent = symbols[link.type]}
               <li class="social-links symbol">
-                <a href="{normalizeUrl(link.url)}">
+                <a href={normalizeUrl(link.url)}>
                   <div class="button">
                     <div class="social">
                       <SvelteComponent />
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
index e563ed1a..4e1f5a26 100644
--- a/src/components/SiteFooter/LegalLinks.svelte
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -11,7 +11,7 @@
         <ul class="link-group">
           {#each links.ad_links as link}
             <li>
-              <a href="{normalizeUrl(link.url)}">
+              <a href={normalizeUrl(link.url)}>
                 {link.text}
               </a>
             </li>
@@ -20,7 +20,7 @@
       </section>
       <p class="disclaimer">
         All quotes delayed a minimum of 15 minutes. <a
-          href="{normalizeUrl(links.disclaimer_link)}"
+          href={normalizeUrl(links.disclaimer_link)}
           >See here for a complete list of exchanges and delays</a
         >.
       </p>
@@ -28,7 +28,7 @@
         <ul class="link-group">
           {#each links.misc_links.filter((d) => !d.self) as link}
             <li>
-              <a href="{normalizeUrl(link.url)}">
+              <a href={normalizeUrl(link.url)}>
                 {link.text}
               </a>
             </li>
@@ -37,7 +37,7 @@
       </section>
       <p class="copyright">
         © {links.copyright_year} Reuters.
-        <a href="{normalizeUrl(links.copyright_link)}">All rights reserved</a>
+        <a href={normalizeUrl(links.copyright_link)}>All rights reserved</a>
       </p>
     </div>
   </section>
diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte
index a28f00d1..fbb07608 100644
--- a/src/components/SiteFooter/QuickLinks.svelte
+++ b/src/components/SiteFooter/QuickLinks.svelte
@@ -17,7 +17,7 @@
   const mobileBreakpoint = 745;
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 {#if links.latest_links}
   <section class="quick-links">
@@ -30,7 +30,7 @@
             <ul>
               {#each links.latest_links as link}
                 <li>
-                  <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                  <a href={normalizeUrl(link.url)}>{link.text}</a>
                 </li>
               {/each}
             </ul>
@@ -44,7 +44,7 @@
                   <div class="symbol">
                     <SvelteComponent />
                   </div>
-                  <a href="{normalizeUrl(link.url)}">
+                  <a href={normalizeUrl(link.url)}>
                     {link.text}
                   </a>
                 </li>
@@ -58,7 +58,7 @@
           <ul>
             {#each links.latest_links as link}
               <li>
-                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
               </li>
             {/each}
           </ul>
@@ -70,7 +70,7 @@
         <ul>
           {#each links.browse_links as link}
             <li>
-              <a href="{normalizeUrl(link.url)}">{link.text}</a>
+              <a href={normalizeUrl(link.url)}>{link.text}</a>
             </li>
           {/each}
         </ul>
@@ -85,7 +85,7 @@
                 <div class="symbol">
                   <SvelteComponent_1 />
                 </div>
-                <a href="{normalizeUrl(link.url)}">
+                <a href={normalizeUrl(link.url)}>
                   {link.text}
                 </a>
               </li>
@@ -99,7 +99,7 @@
           <ul>
             {#each links.about_links as link}
               <li>
-                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
               </li>
             {/each}
           </ul>
@@ -109,7 +109,7 @@
           <ul>
             {#each links.stay_informed_links as link}
               <li>
-                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
               </li>
             {/each}
           </ul>
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
index c3c0dd63..a4be2141 100644
--- a/src/components/SiteFooter/SiteFooter.stories.svelte
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -26,7 +26,7 @@
   import Theme from '../Theme/Theme.svelte';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <div>
       <SiteFooter {...args} />
@@ -46,7 +46,7 @@
 
 <Story
   name="Remove referrals"
-  args="{{ includeReferrals: false }}"
+  args={{ includeReferrals: false }}
   {...withStoryDocs(removeReferralsDocs)}
 />
 
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 61ccce6c..80f6a2de 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -44,12 +44,12 @@
 
 <footer
   class="my-0"
-  style="{`
+  style={`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
     --theme-font-family-sans-serif: Knowledge, sans-serif;
-  `}"
+  `}
 >
   <div>
     {#if includeReferrals}
@@ -61,9 +61,9 @@
         />
       </PaddingReset>
     {/if}
-    <QuickLinks links="{data[0]}" />
-    <CompanyLinks links="{data[0]}" />
-    <LegalLinks links="{data[0]}" />
+    <QuickLinks links={data[0]} />
+    <CompanyLinks links={data[0]} />
+    <LegalLinks links={data[0]} />
   </div>
 </footer>
 
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index 77a7703f..9c6a340e 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -20,13 +20,13 @@
   <div
     class="overlay"
     aria-modal="true"
-    style="{`
+    style={`
       --nav-background: var(--theme-colour-background, #fff);
       --nav-primary: var(--theme-colour-text-primary, #404040);
       --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
       --nav-accent: var(--theme-colour-brand-logo, #fa6400);
       --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgba(64,64,64,.08));
-    `}"
+    `}
   >
     <header class="header">
       <div class="logo">
@@ -35,7 +35,7 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" onclick="{releaseMobileMenu}">
+      <button class="button close-button" onclick={releaseMobileMenu}>
         <div class="button-container">
           <CloseIcon />
         </div>
@@ -43,14 +43,14 @@
     </header>
     {#each data.sections as section}
       <section class="section">
-        <a class="section-link" href="{normalizeUrl(section.url)}"
+        <a class="section-link" href={normalizeUrl(section.url)}
           >{section.name}</a
         >
         {#if section.children}
           <ul class="subsections">
             {#each section.children as sub}
               <li>
-                <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+                <a class="subsection-link" href={normalizeUrl(sub.url)}>
                   {sub.name}
                 </a>
               </li>
diff --git a/src/components/SiteHeader/NavBar/DownArrow.svelte b/src/components/SiteHeader/NavBar/DownArrow.svelte
index 4258f0de..6f30dc51 100644
--- a/src/components/SiteHeader/NavBar/DownArrow.svelte
+++ b/src/components/SiteHeader/NavBar/DownArrow.svelte
@@ -8,7 +8,7 @@
 
 <svg
   class="arrow"
-  class:rotated="{rotate}"
+  class:rotated={rotate}
   focusable="false"
   aria-hidden="true"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
index 50fd90f8..b7c3ceca 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
@@ -11,16 +11,16 @@
       {#each sections as section}
         <section
           class="more-section-group"
-          class:has-children="{section.children}"
+          class:has-children={section.children}
         >
-          <a href="{normalizeUrl(section.url)}" class="section-link">
+          <a href={normalizeUrl(section.url)} class="section-link">
             {section.name}
           </a>
           {#if section.children}
             <ul class="subsections">
               {#each section.children as sub}
                 <li>
-                  <a class="subsection-link" href="{normalizeUrl(sub.url)}"
+                  <a class="subsection-link" href={normalizeUrl(sub.url)}
                     >{sub.name}</a
                   >
                 </li>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 86994a4d..079233d4 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <NavDropdown {headingText}>
-  <a href="{normalizeUrl(section.url)}">
+  <a href={normalizeUrl(section.url)}>
     <span class="heading">
       Browse {section.name}
     </span>
@@ -23,7 +23,7 @@
       <ul class="sections-group">
         {#each section.children.slice(0, splitCount) as sub}
           <li>
-            <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+            <a class="subsection-link" href={normalizeUrl(sub.url)}>
               {sub.name}
             </a>
           </li>
@@ -33,7 +33,7 @@
     <ul class="sections-group">
       {#each section.children.slice(splitCount) as sub}
         <li>
-          <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+          <a class="subsection-link" href={normalizeUrl(sub.url)}>
             {sub.name}
           </a>
         </li>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
index 839b5a4b..7c0d8e3e 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
@@ -8,16 +8,16 @@
 </script>
 
 <div class="story-card">
-  <a href="{normalizeUrl(story.canonical_url)}">
-    <div class="story-text" class:has-thumbnail="{thumbnail}">
+  <a href={normalizeUrl(story.canonical_url)}>
+    <div class="story-text" class:has-thumbnail={thumbnail}>
       <span>{story.title}</span>
-      <time datetime="{story.display_time}">{getTime(story.display_time)}</time>
+      <time datetime={story.display_time}>{getTime(story.display_time)}</time>
     </div>
     {#if thumbnail}
       <div class="thumbnail">
         <img
-          src="{thumbnail.renditions.square['120w']}"
-          alt="{thumbnail.alt_text}"
+          src={thumbnail.renditions.square['120w']}
+          alt={thumbnail.alt_text}
         />
       </div>
     {/if}
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index d0147a57..7dff8f02 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -24,7 +24,7 @@
   let hiddenSections = $derived(sections.slice(displayCount));
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <div class="nav-bar">
   <nav aria-label="Main navigation">
@@ -35,50 +35,50 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             class="nav-item category link"
-            onmouseenter="{() => {
+            onmouseenter={() => {
               navTimeout = setTimeout(
                 () => activeSection.set(section.id),
                 timeout
               );
-            }}"
-            onfocus="{() => activeSection.set(section.id)}"
-            onmouseleave="{() => {
+            }}
+            onfocus={() => activeSection.set(section.id)}
+            onmouseleave={() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}"
-            onblur="{() => {
+            }}
+            onblur={() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}"
-            onclick="{() => {
+            }}
+            onclick={() => {
               if ($activeSection === section.id) {
                 clearTimeout(navTimeout);
                 activeSection.set(null);
               }
-            }}"
+            }}
           >
             <div
               class="nav-button link"
-              class:open="{section.id === $activeSection}"
+              class:open={section.id === $activeSection}
             >
-              <a href="{normalizeUrl(section.url)}">
+              <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
               <button class="button">
-                <DownArrow rotate="{section.id === $activeSection}" />
+                <DownArrow rotate={section.id === $activeSection} />
               </button>
             </div>
             {#if $activeSection === section.id}
               <SectionDropdown
                 {section}
-                headingText="{`Latest in ${section.name}`}"
+                headingText={`Latest in ${section.name}`}
               />
             {/if}
           </li>
         {:else}
           <li class="nav-item category link">
             <div class="nav-button link">
-              <a href="{normalizeUrl(section.url)}">
+              <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
             </div>
@@ -88,35 +88,35 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <li
         class="nav-item"
-        onmouseenter="{() => {
+        onmouseenter={() => {
           navTimeout = setTimeout(() => activeSection.set('more'), timeout);
-        }}"
-        onfocus="{() => activeSection.set('more')}"
-        onmouseleave="{() => {
+        }}
+        onfocus={() => activeSection.set('more')}
+        onmouseleave={() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}"
-        onblur="{() => {
+        }}
+        onblur={() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}"
-        onclick="{() => {
+        }}
+        onclick={() => {
           if ($activeSection === 'more') {
             clearTimeout(navTimeout);
             activeSection.set(null);
           }
-        }}"
+        }}
       >
         <div
           class="nav-button more link"
-          class:open="{$activeSection === 'more'}"
+          class:open={$activeSection === 'more'}
         >
           <button class="button">
-            <span>More <DownArrow rotate="{$activeSection === 'more'}" /></span>
+            <span>More <DownArrow rotate={$activeSection === 'more'} /></span>
           </button>
         </div>
         {#if $activeSection === 'more'}
-          <MoreDropdown sections="{hiddenSections}" />
+          <MoreDropdown sections={hiddenSections} />
         {/if}
       </li>
     </ul>
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index 44560247..979f5ab5 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -27,7 +27,7 @@
   import Theme from '../Theme/Theme.svelte';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <div>
       <SiteHeader {...args} />
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index 0620975f..5a0072a8 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -40,14 +40,14 @@
 </script>
 
 <header
-  style="{`
+  style={`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
     --nav-accent: var(--theme-colour-brand-logo, #fa6400);
     --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
     --theme-font-family-sans-serif: Knowledge, sans-serif;
-  `}"
+  `}
 >
   <a href="#main-content" class="skip-link"> Skip to main content </a>
   <div class="nav-container show-nav">
@@ -76,10 +76,10 @@
                 class="menu-button"
                 aria-label="Menu"
                 aria-haspopup="true"
-                aria-expanded="{isMobileMenuOpen}"
-                onclick="{() => {
+                aria-expanded={isMobileMenuOpen}
+                onclick={() => {
                   isMobileMenuOpen = !isMobileMenuOpen;
-                }}"
+                }}
               >
                 <div class="button-container">
                   <MenuIcon />
@@ -95,10 +95,10 @@
 
 <MobileMenu
   {isMobileMenuOpen}
-  releaseMobileMenu="{() => {
+  releaseMobileMenu={() => {
     isMobileMenuOpen = false;
-  }}"
-  data="{data[0]}"
+  }}
+  data={data[0]}
 />
 
 <style lang="scss">
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
index 6a4faf92..42921188 100644
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -35,7 +35,7 @@
   };
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <SiteHeadline {...args} />
   {/snippet}
@@ -43,7 +43,7 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     section: 'Graphics',
     sectionUrl: 'https://graphics.reuters.com',
     hed: 'Ukraine makes surprising gains in counteroffensive',
@@ -55,15 +55,15 @@
     ],
     publishTime: new Date('2021-09-12').toISOString(),
     updateTime: new Date('2021-09-12T13:57:00').toISOString(),
-  }}"
+  }}
 />
 
 <Story name="ArchieML" {...withStoryDocs(archieML)}>
   <SiteHeadline
-    hed="{content.Hed}"
-    section="{content.Section}"
-    sectionUrl="{content.SectionUrl}"
-    authors="{content.Authors.split(',')}"
-    publishTime="{content.Published}"
+    hed={content.Hed}
+    section={content.Section}
+    sectionUrl={content.SectionUrl}
+    authors={content.Authors.split(',')}
+    publishTime={content.Published}
   />
 </Story>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index b1b647a8..81937824 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -80,7 +80,7 @@
           class="section-title mb-0 font-subhed text-xs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
         >
           {#if sectionUrl}
-            <a class="no-underline !text-secondary" href="{sectionUrl}"
+            <a class="no-underline !text-secondary" href={sectionUrl}
               >{section}</a
             >
           {:else}
diff --git a/src/components/Spinner/Spinner.stories.svelte b/src/components/Spinner/Spinner.stories.svelte
index 81b280a8..f92b2a5f 100644
--- a/src/components/Spinner/Spinner.stories.svelte
+++ b/src/components/Spinner/Spinner.stories.svelte
@@ -26,7 +26,7 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Spinner {...args} />
   {/snippet}
diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte
index 54db7079..be6dd41b 100644
--- a/src/components/Spinner/Spinner.svelte
+++ b/src/components/Spinner/Spinner.svelte
@@ -32,7 +32,7 @@
 
 <div
   style:width="100%"
-  style:height="{`${width + containerPadding * 2}px`}"
+  style:height={`${width + containerPadding * 2}px`}
   class="component-container flex items-center justify-center"
 >
   <div
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index 1d39f33b..cabd3c99 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -51,7 +51,7 @@
 </script>
 
 <nav aria-label="pagination" class="pagination fmt-4">
-  <button onclick="{goToPreviousPage}" disabled="{pageNumber === 1}"
+  <button onclick={goToPreviousPage} disabled={pageNumber === 1}
     ><div class="icon-wrapper">
       <LeftArrow />
       <span class="visually-hidden">Previous page</span>
@@ -63,8 +63,8 @@
     </div>
   </div>
   <button
-    onclick="{goToNextPage}"
-    disabled="{pageNumber === Math.ceil(n / pageSize)}"
+    onclick={goToNextPage}
+    disabled={pageNumber === Math.ceil(n / pageSize)}
     ><div class="icon-wrapper">
       <RightArrow />
       <span class="visually-hidden">Next page</span>
diff --git a/src/components/Table/Select.svelte b/src/components/Table/Select.svelte
index c0c7d5e1..43251d41 100644
--- a/src/components/Table/Select.svelte
+++ b/src/components/Table/Select.svelte
@@ -33,10 +33,10 @@
     class="select--input body-caption fpx-2"
     name="select--input"
     id="select--input"
-    oninput="{input}"
+    oninput={input}
   >
     {#each options as obj}
-      <option value="{obj.value}">{obj.text}</option>
+      <option value={obj.value}>{obj.text}</option>
     {/each}
   </select>
 </div>
diff --git a/src/components/Table/SortArrow.svelte b/src/components/Table/SortArrow.svelte
index 4fb751bf..7eb22c7d 100644
--- a/src/components/Table/SortArrow.svelte
+++ b/src/components/Table/SortArrow.svelte
@@ -26,11 +26,11 @@
   class="avoid-clicks"
 >
   <path
-    class:active="{sortDirection === 'descending' && active}"
+    class:active={sortDirection === 'descending' && active}
     d="M6.76474 20.2244L0.236082 13.4649C-0.0786943 13.139 -0.0786943 12.6104 0.236082 12.2845C0.550521 11.959 1.19794 11.96 1.51305 12.2845L7.33483 12.2845L13 12.2845C13.43 11.8545 14.1195 11.9593 14.4339 12.2849C14.7487 12.6107 14.7487 13.1394 14.4339 13.4653L7.90492 20.2244C7.59015 20.5503 7.07952 20.5503 6.76474 20.2244Z"
   ></path>
   <path
-    class:active="{sortDirection === 'ascending' && active}"
+    class:active={sortDirection === 'ascending' && active}
     d="M7.90518 0.244414L14.4338 7.00385C14.7486 7.32973 14.7486 7.85838 14.4338 8.18427C14.1194 8.50981 13.472 8.50876 13.1569 8.18427L7.33509 8.18427L1.66992 8.18427C1.23992 8.61427 0.550443 8.50946 0.236003 8.18392C-0.0787725 7.85803 -0.0787725 7.32938 0.236003 7.0035L6.765 0.244414C7.07978 -0.0814713 7.5904 -0.0814713 7.90518 0.244414Z"
   ></path>
 </svg>
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index d7777f23..d27f6859 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -47,7 +47,7 @@
   const currencyFormat = (v: number) => '$' + v.toFixed(1);
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Table {...args} />
   {/snippet}
@@ -55,74 +55,74 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
     data: homeRuns,
-  }}"
+  }}
 />
 
 <Story
   name="Metadata"
   {...withStoryDocs(metadataDocs)}
-  args="{{
+  args={{
     width: 'normal',
     data: homeRuns,
     title: 'Career home run leaders',
     dek: 'In baseball, a home run (also known as a "dinger" or "tater") occurs when a batter hits the ball over the outfield fence. When a home run is hit, the batter and any runners on base are able to score.',
     notes: 'Note: As of Opening Day 2023',
     source: 'Source: Baseball Reference',
-  }}"
+  }}
 />
 
 <Story
   name="Truncate"
   {...withStoryDocs(truncateDocs)}
-  args="{{
+  args={{
     data: homeRuns,
     truncated: true,
     source: 'Source: Baseball Reference',
-  }}"
+  }}
 />
 
 <Story
   name="Paginate"
   {...withStoryDocs(paginateDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     title: 'Press Freedom Index',
     paginated: true,
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Search"
   {...withStoryDocs(searchDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     searchable: true,
     paginated: true,
     title: 'Press Freedom Index',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Filter"
   {...withStoryDocs(filterDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     paginated: true,
     filterField: 'Region',
     title: 'Press Freedom Index',
     notes: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Search and filter"
   {...withStoryDocs(bothDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     searchable: true,
     filterField: 'Region',
@@ -130,13 +130,13 @@
     title: 'Press Freedom Index',
     dek: 'Reporters Without Borders ranks countries based on their level of press freedom using criteria such as the degree of media pluralism and violence against journalists.',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Sort"
   {...withStoryDocs(sortDocs)}
-  args="{{
+  args={{
     data: pressFreedom,
     sortable: true,
     sortField: 'Score',
@@ -145,13 +145,13 @@
     title: 'Press Freedom Index',
     notes: 'Note: data as of 2018',
     source: 'Source: Reporters Without Borders',
-  }}"
+  }}
 />
 
 <Story
   name="Format"
   {...withStoryDocs(formatDocs)}
-  args="{{
+  args={{
     data: richestWomen,
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
@@ -159,16 +159,16 @@
     sortField: 'Net worth (in billions)',
     sortDirection: 'descending',
     fieldFormatters: { 'Net worth (in billions)': currencyFormat },
-  }}"
+  }}
 />
 
 <Story
   name="Style"
   {...withStoryDocs(styleDocs)}
-  args="{{
+  args={{
     id: 'custom-table',
     data: richestWomen,
     title: 'The Richest Women in the World',
     source: 'Source: Forbes',
-  }}"
+  }}
 />
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index efb621e1..1482fde9 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -230,9 +230,9 @@
             {#if filterList}
               <div class="table--header--filter">
                 <Select
-                  label="{filterLabel || filterField}"
-                  options="{filterList}"
-                  on:select="{handleFilterInput}"
+                  label={filterLabel || filterField}
+                  options={filterList}
+                  on:select={handleFilterInput}
                 />
               </div>
             {/if}
@@ -240,7 +240,7 @@
               <div class="table--header--search">
                 <SearchInput
                   bind:searchPlaceholder
-                  on:search="{handleSearchInput}"
+                  on:search={handleSearchInput}
                 />
               </div>
             {/if}
@@ -252,9 +252,7 @@
       <table
         class="w-full"
         class:paginated
-        class:truncated="{truncated &&
-          !showAll &&
-          data.length > truncateLength}"
+        class:truncated={truncated && !showAll && data.length > truncateLength}
       >
         <thead class="table--thead">
           <tr>
@@ -262,22 +260,22 @@
               <th
                 scope="col"
                 class="table--thead--th h4 pl-0 py-2 pr-2"
-                class:sortable="{sortable && sortableFields.includes(field)}"
-                class:sort-ascending="{sortable &&
+                class:sortable={sortable && sortableFields.includes(field)}
+                class:sort-ascending={sortable &&
                   sortField === field &&
-                  sortDirection === 'ascending'}"
-                class:sort-descending="{sortable &&
+                  sortDirection === 'ascending'}
+                class:sort-descending={sortable &&
                   sortField === field &&
-                  sortDirection === 'descending'}"
-                data-field="{field}"
-                on:click="{handleSort}"
+                  sortDirection === 'descending'}
+                data-field={field}
+                on:click={handleSort}
               >
                 {field}
                 {#if sortable && sortableFields.includes(field)}
                   <div class="table--thead--sortarrow fml-1 avoid-clicks">
                     <SortArrow
                       bind:sortDirection
-                      active="{sortField === field}"
+                      active={sortField === field}
                     />
                   </div>
                 {/if}
@@ -287,13 +285,13 @@
         </thead>
         <tbody class="table--tbody">
           {#each currentPageData as item, idx}
-            <tr data-row-index="{idx}">
+            <tr data-row-index={idx}>
               {#each includedFields as field}
                 <td
                   class="body-note pl-0 py-2 pr-2"
-                  data-row-index="{idx}"
-                  data-field="{field}"
-                  data-value="{item[field]}"
+                  data-row-index={idx}
+                  data-field={field}
+                  data-value={item[field]}
                 >
                   {@html formatValue(item, field)}
                 </td>
@@ -302,7 +300,7 @@
           {/each}
           {#if searchable && searchText && currentPageData.length === 0}
             <tr>
-              <td class="no-results" colspan="{includedFields.length}">
+              <td class="no-results" colspan={includedFields.length}>
                 No results found for "{searchText}"
               </td>
             </tr>
@@ -312,7 +310,7 @@
           <tfoot class="table--tfoot">
             {#if notes}
               <tr>
-                <td class="" colspan="{includedFields.length}">
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-2">
                     {@html notes}
                   </div>
@@ -321,7 +319,7 @@
             {/if}
             {#if source}
               <tr>
-                <td class="" colspan="{includedFields.length}">
+                <td class="" colspan={includedFields.length}>
                   <div class="fmt-1">
                     {@html source}
                   </div>
@@ -337,7 +335,7 @@
         aria-label="Show all button"
         class="show-all flex items-center justify-center fmt-2"
       >
-        <button class="body-caption" on:click="{toggleTruncate}"
+        <button class="body-caption" on:click={toggleTruncate}
           >{#if showAll}Show fewer rows{:else}Show {data.length -
               truncateLength} more rows{/if}</button
         >
@@ -347,8 +345,8 @@
       <Pagination
         bind:pageNumber
         bind:pageSize
-        bind:pageLength="{currentPageData.length}"
-        bind:n="{sortedData.length}"
+        bind:pageLength={currentPageData.length}
+        bind:n={sortedData.length}
       />{/if}
   </article>
 </Block>
diff --git a/src/components/TestForSvelte5/TestForSvelte5.stories.svelte b/src/components/TestForSvelte5/TestForSvelte5.stories.svelte
index 11829e60..c127c6af 100644
--- a/src/components/TestForSvelte5/TestForSvelte5.stories.svelte
+++ b/src/components/TestForSvelte5/TestForSvelte5.stories.svelte
@@ -28,7 +28,7 @@
   import SharkImg from './stories/shark.jpg';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ ...args })}
     <TestForSvelte5 {...args} />
   {/snippet}
@@ -36,9 +36,9 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
     src: SharkImg,
     altText: "Duh dum! It's a shark!!",
-  }}"
+  }}
 />
diff --git a/src/components/TestForSvelte5/TestForSvelte5.svelte b/src/components/TestForSvelte5/TestForSvelte5.svelte
index 92ed190d..2b73f664 100644
--- a/src/components/TestForSvelte5/TestForSvelte5.svelte
+++ b/src/components/TestForSvelte5/TestForSvelte5.svelte
@@ -36,8 +36,8 @@
 
 <Block {width} {id} class="photo {cls}">
   <div
-    style:background-image="{`url(${src})`}"
-    style:height="{`${height}px`}"
+    style:background-image={`url(${src})`}
+    style:height={`${height}px`}
   ></div>
   <p class="visually-hidden">{altText}</p>
 </Block>
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index f1084fcc..987086af 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -40,7 +40,7 @@
   import Headline from './../Headline/Headline.svelte';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <div class="reset-article">
       <Theme {...args}>
@@ -52,19 +52,19 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     theme: themes.light,
     base: 'light',
-  }}"
+  }}
 />
 
 <Story name="Custom theme" {...withStoryDocs(customiseDocs)}>
   <Theme
     base="dark"
-    theme="{{
+    theme={{
       colour: { accent: 'var(--tr-light-orange)' },
       font: { family: { hed: 'FreightText, serif' } },
-    }}"
+    }}
   >
     <ThemedPage />
   </Theme>
@@ -73,15 +73,15 @@
 <Story name="Custom Google font" {...withStoryDocs(customiseFontDocs)}>
   <Theme
     base="light"
-    theme="{{
+    theme={{
       font: { family: { hed: 'Bebas Neue, sans-serif' } },
-    }}"
+    }}
   >
     <div class="gfont">
       <Headline
-        hed="{'Reuters Graphics Interactive'}"
-        dek="{'The beginning of a beautiful page'}"
-        section="{'Global news'}"
+        hed={'Reuters Graphics Interactive'}
+        dek={'The beginning of a beautiful page'}
+        section={'Global news'}
       />
     </div>
   </Theme>
@@ -91,9 +91,9 @@
   <div id="pattern-bg">
     <Theme
       base="dark"
-      theme="{{
+      theme={{
         colour: { background: 'transparent' },
-      }}"
+      }}
     >
       <SiteHeader />
       <ThemedPage />
@@ -102,22 +102,22 @@
 </Story>
 
 <Story name="Inheritance" {...withStoryDocs(inheritanceDocs)}>
-  <Theme theme="{themes.light}">
+  <Theme theme={themes.light}>
     <div class="themed">
       <p>Theme</p>
-      <Theme theme="{themes.dark}">
+      <Theme theme={themes.dark}>
         <div class="themed">
           <p>Sub-theme</p>
-          <Theme theme="{themes.light}">
+          <Theme theme={themes.light}>
             <div class="themed">
               <p>Sub-sub</p>
             </div>
           </Theme>
           <Theme
-            theme="{{
+            theme={{
               colour: { background: 'steelblue', 'text-primary': '#fff' },
               font: { family: { note: 'FreightText, serif' } },
-            }}"
+            }}
             base="dark"
           >
             <div class="themed">
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index bf3915e6..f46b9669 100644
--- a/src/components/Theme/Theme.svelte
+++ b/src/components/Theme/Theme.svelte
@@ -11,23 +11,21 @@
 
 <script lang="ts">
   import type { CustomTheme } from './@types/component';
-  
 
   type Base = 'light' | 'dark';
-  
 
   import flatten from './utils/flatten';
   import mergeThemes from './utils/merge';
   interface Props {
     /** Custom theme object. Can be a partial theme with just
-   * what you want to change.
-   */
+     * what you want to change.
+     */
     theme?: CustomTheme;
     /**
-   * Base theme is one of `light` or `dark` and will be merged
-   * with your custom theme to fill in any values you don't
-   * explicitly set.
-   */
+     * Base theme is one of `light` or `dark` and will be merged
+     * with your custom theme to fill in any values you don't
+     * explicitly set.
+     */
     base?: Base;
     children?: import('svelte').Snippet;
   }
@@ -35,14 +33,18 @@
   let { theme = {}, base = 'light', children }: Props = $props();
 
   /** @type {Theme} */
-  let mergedTheme = $derived(mergeThemes({}, themes[base] || themes.light, theme));
+  let mergedTheme = $derived(
+    mergeThemes({}, themes[base] || themes.light, theme)
+  );
 
-  let cssVariables = $derived(Object.entries(flatten({ theme: mergedTheme }))
-    .map(([key, value]) => `--${key}: ${value};`)
-    .join(' '));
+  let cssVariables = $derived(
+    Object.entries(flatten({ theme: mergedTheme }))
+      .map(([key, value]) => `--${key}: ${value};`)
+      .join(' ')
+  );
 </script>
 
-<div class="theme" style="{cssVariables}" style:display="contents">
+<div class="theme" style={cssVariables} style:display="contents">
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
   <div class="theme-client-override" style="display: contents;">
     <!-- Themed content -->
diff --git a/src/components/Theme/stories/ThemedPage.svelte b/src/components/Theme/stories/ThemedPage.svelte
index 82ea7051..98221f38 100644
--- a/src/components/Theme/stories/ThemedPage.svelte
+++ b/src/components/Theme/stories/ThemedPage.svelte
@@ -7,21 +7,21 @@
 
 <Article>
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-    authors="{['Jon McClure', 'Prasanta Kumar Dutta']}"
-    publishTime="{new Date('2021-09-12').toISOString()}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Jon McClure', 'Prasanta Kumar Dutta']}
+    publishTime={new Date('2021-09-12').toISOString()}
   />
   <BodyText
-    text="{`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.
+    text={`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.
 
 Prosciutto kevin brisket sirloin pork loin shoulder cupim sausage chicken jowl strip steak rump pork ball tip ham hock. Swine pork belly fatback alcatra jowl.
 
 ## Brisket sirloin
 
 Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buffalo ground round burgdoggen ribeye.   
-  `}"
+  `}
   />
   <GraphicBlock
     title="Steak tar-tar"
@@ -31,7 +31,7 @@ Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buf
     <div class="fake-graphic"></div>
   </GraphicBlock>
   <BodyText
-    text="{'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}"
+    text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
   />
 </Article>
 
diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte
index 5116fbcc..0264b0a5 100644
--- a/src/components/ToolsHeader/ToolsHeader.stories.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte
@@ -17,7 +17,7 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <div>
       <ToolsHeader {...args} />
@@ -25,7 +25,7 @@
   {/snippet}
 </Template>
 
-<Story name="Default" args="{{}}" />
+<Story name="Default" args={{}} />
 
 <style>
   div {
diff --git a/src/components/ToolsHeader/ToolsHeader.svelte b/src/components/ToolsHeader/ToolsHeader.svelte
index 100dcba8..9decb43c 100644
--- a/src/components/ToolsHeader/ToolsHeader.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.svelte
@@ -41,13 +41,13 @@
 
 <header
   {id}
-  class="{cls}"
+  class={cls}
   class:sticky
   style:background
-  style:border-bottom="{borderBottom}"
+  style:border-bottom={borderBottom}
 >
   <div class="logo-container">
-    <a href="{homeLink}">
+    <a href={homeLink}>
       <ReutersGraphicsLogo {...{ ...logoProps, ...{ width: '100%' } }} />
     </a>
   </div>
diff --git a/src/components/Video/Controls.svelte b/src/components/Video/Controls.svelte
index ce59b2a6..401d1408 100644
--- a/src/components/Video/Controls.svelte
+++ b/src/components/Video/Controls.svelte
@@ -29,7 +29,7 @@
 </script>
 
 <button
-  onclick="{forwardBtnClick}"
+  onclick={forwardBtnClick}
   style="
     opacity: {controlsOpacity};
     top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?
@@ -50,18 +50,18 @@
   {#if resetCondition}
     <i class="play-pause-icon replay">
       {#if separateReplayIcon}
-        <Fa icon="{faReply}" size="2x" color="{controlsColour}" />
+        <Fa icon={faReply} size="2x" color={controlsColour} />
       {:else}
-        <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
+        <Fa icon={faPlay} size="2x" color={controlsColour} />
       {/if}
     </i>
   {:else if paused === false}
     <i class="play-pause-icon pause">
-      <Fa icon="{faPause}" size="2x" color="{controlsColour}" />
+      <Fa icon={faPause} size="2x" color={controlsColour} />
     </i>
   {:else if paused === true}
     <i class="play-pause-icon play">
-      <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
+      <Fa icon={faPlay} size="2x" color={controlsColour} />
     </i>
   {:else}
     error
diff --git a/src/components/Video/Video.stories.svelte b/src/components/Video/Video.stories.svelte
index 6d84c0f0..71a87ef5 100644
--- a/src/components/Video/Video.stories.svelte
+++ b/src/components/Video/Video.stories.svelte
@@ -31,7 +31,7 @@
   import SoundVideo from './stories/videos/sound-video.mp4';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
     <Video {...args} />
   {/snippet}
@@ -39,17 +39,17 @@
 
 <Story
   name="Default"
-  args="{{
+  args={{
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'wide',
     notes: 'Optional caption for your video.',
-  }}"
+  }}
 />
 
 <Story
   name="Playing and looping"
-  args="{{
+  args={{
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'normal',
@@ -57,13 +57,13 @@
     notes:
       "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
     playVideoThreshold: 0.9,
-  }}"
+  }}
   {...withStoryDocs(playAndLoopDocs)}
 />
 
 <Story
   name="Controls"
-  args="{{
+  args={{
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SilentVideo,
     width: 'normal',
@@ -76,13 +76,13 @@
     separateReplayIcon: true,
     loopVideo: false,
     hoverToSeeControls: true,
-  }}"
+  }}
   {...withStoryDocs(controlsDocs)}
 />
 
 <Story
   name="Videos with sound"
-  args="{{
+  args={{
     ariaDescription: 'Compulsory description of your video for screen readers.',
     src: SoundVideo,
     width: 'normal',
@@ -94,6 +94,6 @@
     muteVideo: false,
     playVideoWhenInView: true,
     allowSoundToAutoplay: true,
-  }}"
+  }}
   {...withStoryDocs(controlsDocs)}
 />
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index 1cc90a43..24bbbd1a 100644
--- a/src/components/Video/Video.svelte
+++ b/src/components/Video/Video.svelte
@@ -165,8 +165,8 @@
 </script>
 
 <svelte:window
-  on:click="{setInteractedWithDom}"
-  on:touchstart="{setInteractedWithDom}"
+  on:click={setInteractedWithDom}
+  on:touchstart={setInteractedWithDom}
 />
 
 <GraphicBlock
@@ -179,18 +179,18 @@
 >
   <div
     role="figure"
-    on:mouseover="{() => {
+    on:mouseover={() => {
       interactiveControlsOpacity = controlsOpacity;
-    }}"
-    on:focus="{() => {
+    }}
+    on:focus={() => {
       interactiveControlsOpacity = controlsOpacity;
-    }}"
-    on:mouseout="{() => {
+    }}
+    on:mouseout={() => {
       interactiveControlsOpacity = 0;
-    }}"
-    on:blur="{() => {
+    }}
+    on:blur={() => {
       interactiveControlsOpacity = 0;
-    }}"
+    }}
   >
     {#if (hidden && ariaDescription) || !hidden}
       {#if ariaDescription}
@@ -202,25 +202,25 @@
         <IntersectionObserver
           {element}
           bind:intersecting
-          threshold="{playVideoThreshold}"
-          once="{false}"
+          threshold={playVideoThreshold}
+          once={false}
         >
           <div
-            bind:this="{element}"
+            bind:this={element}
             class="video-wrapper relative block"
-            aria-hidden="{hidden}"
-            bind:clientWidth="{widthVideoContainer}"
-            bind:clientHeight="{heightVideoContainer}"
+            aria-hidden={hidden}
+            bind:clientWidth={widthVideoContainer}
+            bind:clientHeight={heightVideoContainer}
           >
             {#if possibleToPlayPause}
               {#if showControls}
                 <Controls
-                  on:pausePlayEvent="{pausePlayEvent}"
+                  on:pausePlayEvent={pausePlayEvent}
                   {paused}
                   {clickedOnPauseBtn}
-                  controlsOpacity="{hoverToSeeControls ?
+                  controlsOpacity={hoverToSeeControls ?
                     interactiveControlsOpacity
-                  : controlsOpacity}"
+                  : controlsOpacity}
                   {controlsPosition}
                   {widthVideoContainer}
                   {heightVideoContainer}
@@ -232,32 +232,32 @@
               {:else}
                 <button
                   class="border-0 m-0 p-0 bg-transparent absolute"
-                  on:click="{() => {
+                  on:click={() => {
                     if (paused === true) {
                       paused = false;
                     } else {
                       paused = true;
                     }
-                  }}"
+                  }}
                   style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
                 ></button>
               {/if}
             {/if}
             <video
-              bind:this="{videoElement}"
+              bind:this={videoElement}
               {src}
               {poster}
               class="pointer-events-none relative"
               width="100%"
-              muted="{muteVideo}"
+              muted={muteVideo}
               playsinline
-              preload="{preloadVideo}"
-              loop="{loopVideo}"
-              bind:currentTime="{time}"
+              preload={preloadVideo}
+              loop={loopVideo}
+              bind:currentTime={time}
               bind:duration
               bind:paused
-              bind:clientWidth="{widthVideo}"
-              bind:clientHeight="{heightVideo}"
+              bind:clientWidth={widthVideo}
+              bind:clientHeight={heightVideo}
             >
               <track kind="captions" />
             </video>
@@ -267,14 +267,14 @@
         <!-- Video element without Intersection observer -->
         <div
           class="video-wrapper relative"
-          aria-hidden="{hidden}"
-          bind:clientWidth="{widthVideoContainer}"
-          bind:clientHeight="{heightVideoContainer}"
+          aria-hidden={hidden}
+          bind:clientWidth={widthVideoContainer}
+          bind:clientHeight={heightVideoContainer}
         >
           {#if possibleToPlayPause}
             {#if showControls}
               <Controls
-                on:pausePlayEvent="{pausePlayEvent}"
+                on:pausePlayEvent={pausePlayEvent}
                 {paused}
                 {clickedOnPauseBtn}
                 {controlsOpacity}
@@ -289,33 +289,33 @@
             {:else}
               <button
                 class="border-0 m-0 p-0 bg-transparent absolute"
-                on:click="{() => {
+                on:click={() => {
                   if (paused === true) {
                     paused = false;
                   } else {
                     paused = true;
                   }
-                }}"
+                }}
                 style="top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
               ></button>
             {/if}
           {/if}
           <video
-            bind:this="{videoElement}"
+            bind:this={videoElement}
             {src}
             {poster}
             class="pointer-events-none relative"
             width="100%"
-            muted="{muteVideo}"
+            muted={muteVideo}
             playsinline
-            preload="{preloadVideo}"
-            loop="{loopVideo}"
-            bind:currentTime="{time}"
+            preload={preloadVideo}
+            loop={loopVideo}
+            bind:currentTime={time}
             bind:duration
             bind:paused
             autoplay
-            bind:clientWidth="{widthVideo}"
-            bind:clientHeight="{heightVideo}"
+            bind:clientWidth={widthVideo}
+            bind:clientHeight={heightVideo}
           >
             <track kind="captions" />
           </video>
diff --git a/src/components/Visible/Visible.stories.svelte b/src/components/Visible/Visible.stories.svelte
index 481555ec..38068151 100644
--- a/src/components/Visible/Visible.stories.svelte
+++ b/src/components/Visible/Visible.stories.svelte
@@ -19,16 +19,16 @@
   import { Template, Story } from '@storybook/addon-svelte-csf';
 </script>
 
-<Template >
+<Template>
   {#snippet children({ args })}
-    <Visible {...args} >
+    <Visible {...args}>
       {#snippet children({ visible })}
         {#if visible}
           <p>Visible!</p>
         {:else}
           <p>Not yet visible.</p>
         {/if}
-            {/snippet}
+      {/snippet}
     </Visible>
   {/snippet}
 </Template>
diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 3871c32e..4584c12e 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -1,18 +1,13 @@
 <!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  
-  
-  
-  
-  
-  
+
   interface Props {
     /**
-   * Whether to change visibility just once.
-   *
-   * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
-   */
+     * Whether to change visibility just once.
+     *
+     * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
+     */
     once?: boolean;
     /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
     top?: number;
@@ -34,7 +29,7 @@
     left = 0,
     right = 0,
     threshold = 0,
-    children
+    children,
   }: Props = $props();
 
   let visible = $state(false);
@@ -74,7 +69,7 @@
   });
 </script>
 
-<div bind:this="{container}">
+<div bind:this={container}>
   <!-- An element or component -->
-  {@render children?.({ visible, })}
+  {@render children?.({ visible })}
 </div>
diff --git a/src/components/Visible/stories/snippets/default.svelte b/src/components/Visible/stories/snippets/default.svelte
index 06bb740d..e84555a3 100644
--- a/src/components/Visible/stories/snippets/default.svelte
+++ b/src/components/Visible/stories/snippets/default.svelte
@@ -2,7 +2,7 @@
   import { Visible } from '@reuters-graphics/graphics-components';
 </script>
 
-<Visible >
+<Visible>
   {#snippet children({ visible })}
     {#if visible}
       <p>Visible!</p>
diff --git a/src/docs/contributing/story-recipes/basic-story.mdx b/src/docs/contributing/story-recipes/basic-story.mdx
index ef182677..4dab01bb 100644
--- a/src/docs/contributing/story-recipes/basic-story.mdx
+++ b/src/docs/contributing/story-recipes/basic-story.mdx
@@ -20,7 +20,7 @@ Once you've setup the `Meta` and `Template` components as below, you can write a
   import YourComponent from './YourComponent.svelte';
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}" />
+<Meta title="Components/YourComponent" component={YourComponent} />
 
 <Template let:args>
   <YourComponent {...args} />
@@ -28,9 +28,9 @@ Once you've setup the `Meta` and `Template` components as below, you can write a
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
-  }}"
+  }}
 />
 ```
 
@@ -47,16 +47,16 @@ You can define additional stories with _different_ args to show how your compone
 
 <Story
   name="Default"
-  args="{{
+  args={{
     width: 'normal',
-  }}"
+  }}
 />
 
 <Story
   name="Extra wide"
-  args="{{
+  args={{
     width: 'wider',
-  }}"
+  }}
 />
 ```
 
@@ -66,10 +66,10 @@ If you want even more control, you can skip the `args` and pass your component d
 <Story name="Super custom">
   <YourComponent
     width="fluid"
-    data="{[
+    data={[
       { id: 'UK', value: 65 },
       { id: 'USA', value: 265 },
-    ]}"
+    ]}
   />
 </Story>
 ```
diff --git a/src/docs/contributing/story-recipes/story-with-custom-controls.mdx b/src/docs/contributing/story-recipes/story-with-custom-controls.mdx
index 7afe748e..e279dc16 100644
--- a/src/docs/contributing/story-recipes/story-with-custom-controls.mdx
+++ b/src/docs/contributing/story-recipes/story-with-custom-controls.mdx
@@ -34,7 +34,7 @@ You can customise the controls in Storybook's built-in [controls panel](https://
   };
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}" {...meta} />
+<Meta title="Components/YourComponent" component={YourComponent} {...meta} />
 
 <template let:args>
   <YourComponent {...args} />
diff --git a/src/docs/contributing/story-recipes/story-with-custom-docs.mdx b/src/docs/contributing/story-recipes/story-with-custom-docs.mdx
index 048b0e67..24a3b1f1 100644
--- a/src/docs/contributing/story-recipes/story-with-custom-docs.mdx
+++ b/src/docs/contributing/story-recipes/story-with-custom-docs.mdx
@@ -47,19 +47,19 @@ Now, import your markdown file in your story page component and attach it to eit
   };
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}" {...meta} />
+<Meta title="Components/YourComponent" component={YourComponent} {...meta} />
 
 <template let:args>
   <YourComponent {...args} />
 </template>
 
 <!-- The first story will use the component docs in Meta... -->
-<Story name="Basic" args="{{ width: 'normal' }}" />
+<Story name="Basic" args={{ width: 'normal' }} />
 
 <!-- Additional stories can use other docs now. -->
 <Story
   name="Another story"
-  args="{{ width: 'normal' }}"
+  args={{ width: 'normal' }}
   {...withStoryDocs(someStoryDocs)}
 />
 ```
@@ -110,7 +110,7 @@ Now, import your snippet file in your story page component and attach it to any
 <!-- Pass source in inside an object keyed by your snippet's language, e.g., svelte, scss, etc. -->
 <Story
   name="Basic"
-  args="{{ width: 'normal' }}"
+  args={{ width: 'normal' }}
   {...withSource({ svelte: defaultSnippet })}
 />
 ```
@@ -124,7 +124,7 @@ If you're adding source code AND custom docs to a story, you can chain `withSour
 
 <Story
   name="Extra wide"
-  args="{{ width: 'wider' }}"
+  args={{ width: 'wider' }}
   {...withComponentDocs(componentDocs, withSource({ svelte: defaultSnippet }))}
 />
 ```
diff --git a/src/docs/contributing/story-recipes/story-with-media.mdx b/src/docs/contributing/story-recipes/story-with-media.mdx
index e7eb5b4e..1ac08b86 100644
--- a/src/docs/contributing/story-recipes/story-with-media.mdx
+++ b/src/docs/contributing/story-recipes/story-with-media.mdx
@@ -34,7 +34,7 @@ Now, import your media file directly in your code, which will resolve to the URL
   import myImageSrc from './stories/imgs/myImage.jpg';
 </script>
 
-<Meta title="Components/YourComponent" component="{YourComponent}" />
+<Meta title="Components/YourComponent" component={YourComponent} />
 
 <template let:args>
   <YourComponent {...args} />
@@ -42,9 +42,9 @@ Now, import your media file directly in your code, which will resolve to the URL
 
 <Story
   name="Basic"
-  args="{{
+  args={{
     src: myImageSrc,
     altText: 'My image in the component',
-  }}"
+  }}
 />
 ```
diff --git a/src/docs/guides/archieml.mdx b/src/docs/guides/archieml.mdx
index c99a2b56..91b88c46 100644
--- a/src/docs/guides/archieml.mdx
+++ b/src/docs/guides/archieml.mdx
@@ -21,11 +21,11 @@ Let's look at a basic component, a `ProfileCard`, with a demo that looks like th
 
 <ProfileCard
   name="Kitty"
-  age="{2}"
+  age={2}
   img="https://cats.com/cat1.jpg"
-  birthday="{new Date('2020-09-25')}"
+  birthday={new Date('2020-09-25')}
   bio="Some notes.\n\nWith multiple paragraphs."
-  isGood="{true}"
+  isGood={true}
 />
 ```
 
@@ -100,12 +100,12 @@ Notice all the values in the data are **strings**. More on that soon.
     <!-- ... -->
   {:else if block.type === 'profile-card'}
     <ProfileCard
-      name="{block.name}"
-      age="{parseInt(block.age)}"
-      img="{`${assets}/${block.picture}`}"
-      birthday="{new Date(block.birthday)}"
-      bio="{block.bio}"
-      isGood="{block.isGood === 'true'}"
+      name={block.name}
+      age={parseInt(block.age)}
+      img={`${assets}/${block.picture}`}
+      birthday={new Date(block.birthday)}
+      bio={block.bio}
+      isGood={block.isGood === 'true'}
     />
     <!-- ... -->
   {/if}
@@ -136,12 +136,12 @@ Once we've identified we have the right block for our component, we need to conv
 
 ```svelte
 <ProfileCard
-  name="{block.name}"
-  age="{parseInt(block.age)}"
-  img="{`${assets}/${block.picture}`}"
-  birthday="{new Date(block.birthday)}"
-  bio="{block.bio}"
-  isGood="{block.isGood === 'true'}"
+  name={block.name}
+  age={parseInt(block.age)}
+  img={`${assets}/${block.picture}`}
+  birthday={new Date(block.birthday)}
+  bio={block.bio}
+  isGood={block.isGood === 'true'}
 />
 ```
 
@@ -191,7 +191,7 @@ Let's look at another example component:
 ```svelte
 <Timeline
   title="A brief history of BitCoin"
-  dates="{[
+  dates={[
     {
       date: new Date('1992-01-01'),
       subhed:
@@ -208,7 +208,7 @@ Let's look at another example component:
       subhed: 'The Winklevoss twins buy in',
       img: `${assets}/images/winkle-boys.jpeg`,
     },
-  ]}"
+  ]}
 />
 ```
 
diff --git a/src/docs/guides/graphics-kit.mdx b/src/docs/guides/graphics-kit.mdx
index 5528ed55..93d4ceec 100644
--- a/src/docs/guides/graphics-kit.mdx
+++ b/src/docs/guides/graphics-kit.mdx
@@ -30,5 +30,5 @@ In the Graphics Kit, that means you'll need to prefix relative paths with the sp
 </script>
 
 <!-- Use the assets module to prefix the path to your image. -->
-<FeautrePhoto src="{`${assets}/imgs/myImage.jpg`}" />
+<FeautrePhoto src={`${assets}/imgs/myImage.jpg`} />
 ```
diff --git a/src/docs/guides/svelte-components.mdx b/src/docs/guides/svelte-components.mdx
index e472ccab..5afd7783 100644
--- a/src/docs/guides/svelte-components.mdx
+++ b/src/docs/guides/svelte-components.mdx
@@ -26,7 +26,7 @@ A component is usually composed of several parts: JavaScript for managing data,
 
 <!-- HTML -->
 <figure>
-  <img src="{imgSrc}" alt="{altText}" />
+  <img src={imgSrc} alt={altText} />
   <figcaption>{caption}</figcaption>
 </figure>
 
diff --git a/src/docs/intro.mdx b/src/docs/intro.mdx
index 94a73ff6..7ecbe52a 100644
--- a/src/docs/intro.mdx
+++ b/src/docs/intro.mdx
@@ -32,5 +32,5 @@ pnpm i @reuters-graphics/graphics-components
   import { BodyText } from '@reuters-graphics/graphics-components';
 </script>
 
-<BodyText text="{'Hello world!'}" />
+<BodyText text={'Hello world!'} />
 ```
diff --git a/src/docs/theming/css-variables.mdx b/src/docs/theming/css-variables.mdx
index be71cb74..d6894f4e 100644
--- a/src/docs/theming/css-variables.mdx
+++ b/src/docs/theming/css-variables.mdx
@@ -37,12 +37,12 @@ You can redefine any of the above CSS variables in the `<Theme>` component. Read
 ```svelte
 <Theme
   base="light"
-  theme="{{
+  theme={{
     colour: {
       // This replaces the default text-secondary colour '#666666' for light theme
       'text-secondary': '#213310',
     },
-  }}"
+  }}
 >
   <!-- page stuff -->
 </Theme>
@@ -57,11 +57,11 @@ For example, let's say you want to define a border radius for some card elements
 ```svelte
 <Theme
   base="light"
-  theme="{{
+  theme={{
     style: {
       'border-radius': '22px',
     },
-  }}"
+  }}
 >
   <!-- page stuff -->
 </Theme>
@@ -90,15 +90,15 @@ You can also change a variable's value based on some condition. For example, to
   let windowWidth;
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <Theme
   base="light"
-  theme="{{
+  theme={{
     style: {
       'border-radius': windowWidth > 475 ? '22px' : '11px',
     },
-  }}"
+  }}
 >
   <!-- page stuff -->
 </Theme>

From 4c8883552bd4dc90045c980581e4b93da5796e30 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 24 Mar 2025 10:33:06 -0700
Subject: [PATCH 40/47] finished docs;

---
 src/components/BeforeAfter/BeforeAfter.mdx    |  2 +-
 src/components/PhotoPack/PhotoPack.mdx        | 75 +++++++++----------
 .../PhotoPack/PhotoPack.stories.svelte        | 65 ++++++++--------
 src/components/PhotoPack/PhotoPack.svelte     |  1 -
 4 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
index 3ce6f1e3..e85451b9 100644
--- a/src/components/BeforeAfter/BeforeAfter.mdx
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -11,7 +11,7 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
 ```svelte
 <script>
   import { BeforeAfter } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // If using in the Graphics Kit
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 </script>
 
 <BeforeAfter
diff --git a/src/components/PhotoPack/PhotoPack.mdx b/src/components/PhotoPack/PhotoPack.mdx
index a76ec09e..c8bb19c4 100644
--- a/src/components/PhotoPack/PhotoPack.mdx
+++ b/src/components/PhotoPack/PhotoPack.mdx
@@ -57,60 +57,61 @@ You can define as many layouts for as many images as you like.
 
 <Canvas of={PhotoPackStories.Demo} />
 
-## ArchieML
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
+# ArchieML doc
 [blocks]
-# ...
-
 type: photo-pack
-id: my-photo-pack
-class: mb-2
-width: wide
-textWidth: normal
-gap: 10
-[.images]
-  src: images/my-img-1.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+id: my-photo-pack # Optional
+class: mb-2 # Optional
+width: wide # Optional
+textWidth: normal # Optional
+gap: 10 # Optional; must be a number.
 
-  src: images/my-img-2.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+# Array of image metadata
+  [.images]
+    src: images/my-img-1.jpg
+    altText: Alt text
+    caption: Lorem ipsum. REUTERS/Photog
 
-  src: images/my-img-3.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+    src: images/my-img-2.jpg
+    altText: Alt text
+    caption: Lorem ipsum. REUTERS/Photog
 
-  src: images/my-img-4.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
+    ...
+  []
 
-  src: images/my-img-5.jpg
-  altText: Alt text
-  caption: Lorem ipsum. REUTERS/Photog
-[]
-
-# ...
 []
 ```
 
+... which you'll parse out of a ArchieML block object before passing to the `PhotoPack` component.
+
+> **Important ❗**: The prop `gap` must be a number. ArchieML renders all values -- including numbers -- as strings, so convert the `prop` value to a number before passing it to `PhotoPack`.
+
 ```svelte
 <!-- App.svelte -->
+<script>
+  import { PhotoPack } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+  import { fixSrcPathArray } from '$utils/paths'; // 👈 If using in the Graphics Kit...
+
+  import content from '$locales/en/content.json';
+</script>
+
 {#each content.blocks as block}
-  {#if block.type === 'text'}
-    <!-- ... -->
-  {:else if block.type === 'photo-pack'}
+  {#if block.type === 'photo-pack'}
+    <!-- Pass `assets` into the image source in Graphics Kit -->
+    <!-- @TODO - Update this doc once the util to derive `images` with `assets` in the image src path is written and tested. See ticket https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164 -->
     <PhotoPack
       id={block.id}
       class={block.class}
       width={block.width}
       textWidth={block.textWidth}
-      images={block.images.map((img) => ({
-        src: `${assets}/${img.src}`,
-        altText: img.altText,
-        caption: img.caption,
-      }))}
+      gap={Number(block.gap)}
+      images={fixSrcPathArray(block.images)}
       layouts={[
         { breakpoint: 750, rows: [2, 3] },
         { breakpoint: 450, rows: [1, 2, 2] },
@@ -122,6 +123,4 @@ gap: 10
 {/each}
 ```
 
-## Misisng alt text
-
-If any of your images is missing `altText` a small warning will overlay the photo.
+<Canvas of={PhotoPackStories.ArchieML} />
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 0c0ef376..1cd4b8ed 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -51,36 +51,49 @@
     { breakpoint: 750, rows: [1, 3] },
   ];
 
+  const archieMLImages = [
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg',
+      caption:
+        "Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_2007900040_UP1.jpeg',
+      caption:
+        "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_635809122_UP1E.jpeg',
+      caption:
+        "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T191015Z_1293757566_UP1.jpeg',
+      caption:
+        "Spain's Sergio Busquets in action with Germany's Thomas Muller.",
+      altText: 'alt text',
+    },
+    {
+      src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203612Z_1399473226_UP1.jpeg',
+      caption: "Spain's Alvaro Morata celebrates scoring their first goal.",
+      altText: 'alt text',
+    },
+  ];
   const archieMLBlock = {
-    type: 'photo-pack',
     id: 'my-photo-pack',
     class: 'mb-2',
     width: 'wide',
     textWidth: 'normal',
-    gap: '15',
-    images: defaultImages,
+    gap: Number('15'),
+    images: archieMLImages,
     layouts: [
       { breakpoint: 750, rows: [2, 3] },
       { breakpoint: 450, rows: [1, 2, 2] },
     ],
   };
-
-  const altTextImages = [
-    {
-      altText: 'alt text',
-      src: 'https://via.placeholder.com/1024x768.jpg',
-      caption:
-        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
-      maxHeight: 400,
-    },
-    {
-      src: 'https://via.placeholder.com/1640x1180.jpg',
-      altText: '',
-      caption:
-        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
-    },
-  ];
-  const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
 </script>
 
 <Story
@@ -92,14 +105,4 @@
     layouts: defaultLayouts,
   }}
 />
-
-<Story
-  name="Missing altText"
-  exportName="MissingAltText"
-  args={{
-    width: 'wide',
-    textWidth: 'normal',
-    images: altTextImages,
-    layouts: altTextLayouts,
-  }}
-/>
+<Story name="ArchieML" args={archieMLBlock} />
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 399d6454..6d13c172 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -7,7 +7,6 @@
   // Utils
   import { random4 } from '../../utils';
   import { groupRows } from './utils';
-  // import { groupRows } from './utils';
 
   // Types
   export interface Image {

From 3dad5cf08f6c30d565e137cd68bdab935a4ba5fe Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 24 Mar 2025 10:40:48 -0700
Subject: [PATCH 41/47] updates docs on asset handling

---
 src/components/PhotoCarousel/PhotoCarousel.mdx    | 7 +++----
 src/components/PhotoCarousel/PhotoCarousel.svelte | 8 +-------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx
index 5b447618..718535df 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.mdx
+++ b/src/components/PhotoCarousel/PhotoCarousel.mdx
@@ -62,8 +62,6 @@ type: photo-carousel
 
 ... which you'll parse out of a ArchieML block object before passing to the `PhotoCarousel` component.
 
-> **Important❗:** If you're using the Graphics Kit and your photos are saved locally in `src/statics` instead of being on the web, pass the Svelte-kit `assets` string to `PhotoCarousel` to get the correct path. You can't mix and match, though -- all photos must be either local or web-hosted.
-
 ```svelte
 <!-- App.svelte -->
 <script>
@@ -71,12 +69,13 @@ type: photo-carousel
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
   import content from '$locales/en/content.json';
+
+  // @TODO - Update this doc once the util to derive `photos` with `assets` in the image src path is written and tested. See ticket: https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164
 </script>
 
 {#each content.blocks as block}
   {#if block.type === 'photo-carousel'}
-  <!-- Pass `assets` if using photos saved in your Graphics Kit project folder -->
-    <PhotoCarousel {block.photos} {assets} />
+    <PhotoCarousel {block.photos}  />
   {/if}
 {/each}
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 4aae06f9..d3331d56 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -20,7 +20,6 @@
   import type { MoveEventDetail } from '@splidejs/svelte-splide/types';
   import type { Snippet } from 'svelte';
   import type { PhotoCarouselImage } from '../@types/global';
-  import src from 'svelte-search/index.js';
 
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
@@ -29,8 +28,6 @@
   interface Props {
     /** Array of photos. */
     photos: PhotoCarouselImage[];
-    /** Pass Svelte-kit `assets`, if using local photo files instead of web-hosted ones*/
-    assets?: string;
     /** Width of the component within the text well: normal, wide, wider, widest, fluid */
     width?: ContainerWidth;
     /**
@@ -60,7 +57,6 @@
   }
 
   let {
-    assets,
     width = 'wider',
     textWidth = 'normal',
     id = '',
@@ -108,8 +104,6 @@
       <div class="image-container">
         <SplideTrack>
           {#each photos as photo}
-            <!-- Set source path if `assets` is passed, i.e the photos are local files -->
-            {@const src = assets ? `${assets}/${photo.src}` : photo.src}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -118,7 +112,7 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy={src}
+                    data-splide-lazy={photo.src}
                     alt={photo.altText}
                     style:object-fit={photo.objectFit || defaultImageObjectFit}
                     style:object-position={photo.objectPosition ||

From 2111002f8bf7912b6618e70de8cc9137a91b89f4 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 24 Mar 2025 11:16:49 -0700
Subject: [PATCH 42/47] updates docs, svelte 5

---
 src/components/PymChild/PymChild.mdx          | 36 +++++++++++++++++++
 .../PymChild/PymChild.stories.svelte          | 24 +++----------
 src/components/PymChild/PymChild.svelte       | 11 +++---
 src/components/PymChild/state.svelte.ts       |  5 +++
 src/components/PymChild/stores.js             |  3 --
 .../PymChild/stories/docs/component.md        | 28 ---------------
 6 files changed, 50 insertions(+), 57 deletions(-)
 create mode 100644 src/components/PymChild/PymChild.mdx
 create mode 100644 src/components/PymChild/state.svelte.ts
 delete mode 100644 src/components/PymChild/stores.js
 delete mode 100644 src/components/PymChild/stories/docs/component.md

diff --git a/src/components/PymChild/PymChild.mdx b/src/components/PymChild/PymChild.mdx
new file mode 100644
index 00000000..927d6bd3
--- /dev/null
+++ b/src/components/PymChild/PymChild.mdx
@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/blocks';
+
+import * as PymChildStories from './PymChild.stories.svelte';
+
+<Meta of={PymChildStories} />
+
+# PymChild
+
+The `PymChild` component creates a [Pym.js](https://blog.apps.npr.org/pym.js/) child instance for embeddables.
+
+```svelte
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+</script>
+
+<PymChild polling={500} />
+```
+
+You can access the Pym.js child via `pymChildState` in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import {
+    PymChild,
+    pymChildState,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if (pymChildState.pymChild) pymChildState.pymChild.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button onclick={updateHeight}>Update height</button>
+```
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
index 5119f692..36c1f1f3 100644
--- a/src/components/PymChild/PymChild.stories.svelte
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -1,27 +1,11 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PymChild from './PymChild.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/PymChild',
     component: PymChild,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <PymChild {...args} />
-    <div>Nothing to see here. 😎</div>
-  {/snippet}
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" tags={['!autodocs', '!dev']} />
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index c60f870c..f7cb9831 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -1,8 +1,9 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
-  import { onMount } from 'svelte';
   import pym from 'pym.js';
-  import { pymChildStore } from './stores.js';
+  import { pymChildState } from './state.svelte.js';
+  import { onMount } from 'svelte';
+
   interface Props {
     /** Pym.js polling interval */
     polling?: number;
@@ -10,10 +11,8 @@
 
   let { polling = 500 }: Props = $props();
 
-  let pymChild;
-
   onMount(() => {
-    pymChild = new pym.Child({ polling });
-    pymChildStore.set(pymChild);
+    let pymChild = new pym.Child({ polling });
+    pymChildState.pymChild = pymChild;
   });
 </script>
diff --git a/src/components/PymChild/state.svelte.ts b/src/components/PymChild/state.svelte.ts
new file mode 100644
index 00000000..3dfee824
--- /dev/null
+++ b/src/components/PymChild/state.svelte.ts
@@ -0,0 +1,5 @@
+import pym from 'pym.js';
+
+type PymChildState = { pymChild: pym.Child | null };
+
+export const pymChildState: PymChildState = $state({ pymChild: null });
diff --git a/src/components/PymChild/stores.js b/src/components/PymChild/stores.js
deleted file mode 100644
index 690e8453..00000000
--- a/src/components/PymChild/stores.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const pymChildStore = writable(null);
diff --git a/src/components/PymChild/stories/docs/component.md b/src/components/PymChild/stories/docs/component.md
deleted file mode 100644
index ac261b84..00000000
--- a/src/components/PymChild/stories/docs/component.md
+++ /dev/null
@@ -1,28 +0,0 @@
-A Pym.js child instance for embeddables.
-
-```svelte
-<script>
-  import { PymChild } from '@reuters-graphics/graphics-components';
-</script>
-
-<PymChild polling="{500}" />
-```
-
-You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
-
-```svelte
-<script>
-  import {
-    PymChild,
-    pymChildStore,
-  } from '@reuters-graphics/graphics-components';
-
-  const updateHeight = () => {
-    if ($pymChildStore) $pymChildStore.sendHeight();
-  };
-</script>
-
-<PymChild />
-
-<button on:click="{updateHeight}">Update height</button>
-```

From d6c03cbe41e17f9733322311d11961217906db2d Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 26 Mar 2025 09:05:50 -0700
Subject: [PATCH 43/47] fixes assets handling

---
 src/components/PhotoPack/PhotoPack.mdx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/PhotoPack/PhotoPack.mdx b/src/components/PhotoPack/PhotoPack.mdx
index c8bb19c4..dd1fecc5 100644
--- a/src/components/PhotoPack/PhotoPack.mdx
+++ b/src/components/PhotoPack/PhotoPack.mdx
@@ -96,7 +96,6 @@ gap: 10 # Optional; must be a number.
 <script>
   import { PhotoPack } from '@reuters-graphics/graphics-components';
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-  import { fixSrcPathArray } from '$utils/paths'; // 👈 If using in the Graphics Kit...
 
   import content from '$locales/en/content.json';
 </script>
@@ -104,21 +103,21 @@ gap: 10 # Optional; must be a number.
 {#each content.blocks as block}
   {#if block.type === 'photo-pack'}
     <!-- Pass `assets` into the image source in Graphics Kit -->
-    <!-- @TODO - Update this doc once the util to derive `images` with `assets` in the image src path is written and tested. See ticket https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164 -->
     <PhotoPack
       id={block.id}
       class={block.class}
       width={block.width}
       textWidth={block.textWidth}
       gap={Number(block.gap)}
-      images={fixSrcPathArray(block.images)}
+      images={block.images.map((img) => ({
+        ...img,
+        src: `${assets}/${img.src}`,
+      }))}
       layouts={[
         { breakpoint: 750, rows: [2, 3] },
         { breakpoint: 450, rows: [1, 2, 2] },
       ]}
     />
-
-    <!-- ... -->
   {/if}
 {/each}
 ```

From 53aad54cd8b14199f26155296b2eeb8ad2eafac6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 26 Mar 2025 09:12:22 -0700
Subject: [PATCH 44/47] fixes assets handling

---
 .../PhotoCarousel/PhotoCarousel.mdx           | 28 +++++++++--------
 .../PhotoCarousel.stories.svelte              | 17 +++++------
 .../PhotoCarousel/PhotoCarousel.svelte        | 30 +++++++++----------
 .../demo/{photos.json => images.json}         |  0
 4 files changed, 39 insertions(+), 36 deletions(-)
 rename src/components/PhotoCarousel/demo/{photos.json => images.json} (100%)

diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx
index 718535df..d2ef465f 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.mdx
+++ b/src/components/PhotoCarousel/PhotoCarousel.mdx
@@ -39,7 +39,7 @@ With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 type: photo-carousel
 
 # List of photo data
-[.photos]
+[.images]
   # Photo 1
   src: 'images/myImage.jpg', # The source path can be a URL or a local path
   altText: 'A picture of...',
@@ -62,6 +62,8 @@ type: photo-carousel
 
 ... which you'll parse out of a ArchieML block object before passing to the `PhotoCarousel` component.
 
+> **Note:** If you're using local images files stored in your Graphics Kit project, prefix `assets` to the image source path, as in the example below.
+
 ```svelte
 <!-- App.svelte -->
 <script>
@@ -69,16 +71,18 @@ type: photo-carousel
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
   import content from '$locales/en/content.json';
-
-  // @TODO - Update this doc once the util to derive `photos` with `assets` in the image src path is written and tested. See ticket: https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164
 </script>
 
 {#each content.blocks as block}
   {#if block.type === 'photo-carousel'}
-    <PhotoCarousel {block.photos}  />
+    <PhotoCarousel
+      images={block.images.map((img) => ({
+        ...img,
+        src: `${assets}/${img.src}`,
+      }))}
+    />
   {/if}
 {/each}
-
 ```
 
 <Canvas of={PhotoCarouselStories.Demo} />
@@ -88,15 +92,15 @@ type: photo-carousel
 To customise the credit and/or caption style, use the `credit` and `caption` [snippets](https://svelte.dev/docs/svelte/snippet) and pass `photo` as an argument.
 
 ```svelte
-<PhotoCarousel {photos}>
-  <!-- Pass `photo` and use the `photo.credit` string in the HTML -->
-  {#snippet credit(photo)}
-    <p class="custom-credit">{photo.credit}</p>
+<PhotoCarousel {images}>
+  <!-- Pass `image` and use the `image.credit` string in the HTML -->
+  {#snippet credit(image)}
+    <p class="custom-credit">{image.credit}</p>
   {/snippet}
 
-  <!-- Pass `photo` and use the `photo.caption` string in the HTML -->
-  {#snippet caption(photo)}
-    <p class="custom-caption">{photo.caption}</p>
+  <!-- Pass `image` and use the `image.caption` string in the HTML -->
+  {#snippet caption(image)}
+    <p class="custom-caption">{image.caption}</p>
   {/snippet}
 </PhotoCarousel>
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index 76db1c5c..0092f7f6 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -15,26 +15,25 @@
 </script>
 
 <script>
-  import photosJson from './demo/photos.json';
-  // import { PhotoCarouselImage } from '../@types/global';
+  import imagesJson from './demo/images.json';
 
-  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
+  const images = imagesJson.map((img) => ({ ...img, altText: img.caption }));
 </script>
 
 <Story
   name="Demo"
   args={{
-    photos,
+    images,
   }}
 />
 
 <Story name="Custom text" exportName="CustomText">
-  <PhotoCarousel {photos}>
-    {#snippet credit(photo)}
-      <p class="custom-credit">{photo.credit}</p>
+  <PhotoCarousel {images}>
+    {#snippet credit(image)}
+      <p class="custom-credit">{image.credit}</p>
     {/snippet}
-    {#snippet caption(photo)}
-      <p class="custom-caption">{photo.caption}</p>
+    {#snippet caption(image)}
+      <p class="custom-caption">{image.caption}</p>
     {/snippet}
   </PhotoCarousel>
 </Story>
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index d3331d56..a420e542 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -26,8 +26,8 @@
   type ObjectFit = 'cover' | 'contain';
 
   interface Props {
-    /** Array of photos. */
-    photos: PhotoCarouselImage[];
+    /** Array of images. */
+    images: PhotoCarouselImage[];
     /** Width of the component within the text well: normal, wide, wider, widest, fluid */
     width?: ContainerWidth;
     /**
@@ -61,7 +61,7 @@
     textWidth = 'normal',
     id = '',
     cls = '',
-    photos,
+    images,
     maxHeight = 660,
     defaultImageObjectFit = 'cover',
     defaultImageObjectPosition = 'center center',
@@ -103,7 +103,7 @@
     >
       <div class="image-container">
         <SplideTrack>
-          {#each photos as photo}
+          {#each images as image}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -112,23 +112,23 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy={photo.src}
-                    alt={photo.altText}
-                    style:object-fit={photo.objectFit || defaultImageObjectFit}
-                    style:object-position={photo.objectPosition ||
+                    data-splide-lazy={image.src}
+                    alt={image.altText}
+                    style:object-fit={image.objectFit || defaultImageObjectFit}
+                    style:object-position={image.objectPosition ||
                       defaultImageObjectPosition}
                   />
                   <!-- Render custom credit if credit snippet and string both exist -->
-                  {#if credit && photo.credit}
-                    {@render credit(photo)}
+                  {#if credit && image.credit}
+                    {@render credit(image)}
 
                     <!-- Otherwise, render with default credit style -->
-                  {:else if photo.credit}
+                  {:else if image.credit}
                     <span
                       class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
-                      class:contain-fit={photo.objectFit === 'contain' ||
+                      class:contain-fit={image.objectFit === 'contain' ||
                         defaultImageObjectFit === 'contain'}
-                      >{photo.credit}</span
+                      >{image.credit}</span
                     >
                   {/if}
                 </figure>
@@ -137,8 +137,8 @@
           {/each}
         </SplideTrack>
 
-        {#if photos[activeImageIndex].caption}
-          {@const activePhoto = photos[activeImageIndex]}
+        {#if images[activeImageIndex].caption}
+          {@const activePhoto = images[activeImageIndex]}
           <PaddingReset containerIsFluid={width === 'fluid'}>
             <Block width={textWidth}>
               <!-- Render custom caption if caption snippet and string both exist -->
diff --git a/src/components/PhotoCarousel/demo/photos.json b/src/components/PhotoCarousel/demo/images.json
similarity index 100%
rename from src/components/PhotoCarousel/demo/photos.json
rename to src/components/PhotoCarousel/demo/images.json

From 3d68ad446ea1ac32045e613ca4bf5f0a7667648a Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 4 Apr 2025 19:30:20 +0100
Subject: [PATCH 45/47] removes unnecessary hardcoded dimensions of iframe

---
 src/components/DocumentCloud/DocumentCloud.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
index 09713cc6..01a86cc6 100644
--- a/src/components/DocumentCloud/DocumentCloud.svelte
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -36,8 +36,6 @@
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
     title={altText}
-    width="700"
-    height="540"
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
   ></iframe>
 </Block>

From 2067283d7debd7b0277246e571488cfdd1bae98e Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 4 Apr 2025 20:35:14 +0100
Subject: [PATCH 46/47] fixes styles for chart text furniture. fixes newlines
 in demo

---
 src/components/GraphicBlock/GraphicBlock.mdx  |   2 +-
 .../GraphicBlock/GraphicBlock.stories.svelte  |   2 +-
 .../GraphicBlock/GraphicBlock.svelte          | 117 +++++++++---------
 .../GraphicBlock/components/TextBlock.svelte  |   1 +
 4 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/components/GraphicBlock/GraphicBlock.mdx b/src/components/GraphicBlock/GraphicBlock.mdx
index 3df1e4e3..10ef9fea 100644
--- a/src/components/GraphicBlock/GraphicBlock.mdx
+++ b/src/components/GraphicBlock/GraphicBlock.mdx
@@ -18,7 +18,7 @@ Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with
 <GraphicBlock
   title="Title for my chart"
   description="Some description for your chart."
-  notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
+  notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
 >
   <!-- Your chart goes here -->
   <div id="my-chart" />
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 07c70115..f19268eb 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -27,7 +27,7 @@
   <GraphicBlock
     title="Title for my chart"
     description="Some description for your chart."
-    notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
+    notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
   >
     <div id="my-chart">
       <img src={PlaceholderImg} alt="placeholder" />
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 0ae66ca8..e8cef209 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -74,72 +74,75 @@
   }: Props = $props();
 </script>
 
-<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
-  <!-- Check if `title` is a snippet -->
-  {#if typeof title === 'string'}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <h3>{title}</h3>
-        {#if description}
-          <Markdown source={description} />
+<div class="container">
+  <Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
+    <!-- Check if `title` is a snippet -->
+    {#if typeof title === 'string'}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <h3>{title}</h3>
+          {#if description}
+            <Markdown source={description} />
+          {/if}
+        </TextBlock>
+      </PaddingReset>
+    {:else if title}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <!-- Custom title snippet -->
+          {@render title()}
+        </TextBlock>
+      </PaddingReset>
+    {/if}
+    <AriaHidden hidden={!!ariaDescription}>
+      <!-- Graphic content -->
+      {@render children()}
+    </AriaHidden>
+    {#if ariaDescription}
+      <div class="visually-hidden">
+        {#if typeof ariaDescription === 'string'}
+          <Markdown source={ariaDescription} />
+        {:else}
+          <!-- Custom ARIA snippet -->
+          {@render ariaDescription()}
         {/if}
-      </TextBlock>
-    </PaddingReset>
-  {:else if title}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <!-- Custom title snippet -->
-        {@render title()}
-      </TextBlock>
-    </PaddingReset>
-  {/if}
-  <AriaHidden hidden={!!ariaDescription}>
-    <!-- Graphic content -->
-    {@render children()}
-  </AriaHidden>
-  {#if ariaDescription}
-    <div class="visually-hidden">
-      {#if typeof ariaDescription === 'string'}
-        <Markdown source={ariaDescription} />
-      {:else}
-        <!-- Custom ARIA snippet -->
-        {@render ariaDescription()}
-      {/if}
-    </div>
-  {/if}
-  {#if typeof notes === 'string'}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <aside>
-          <Markdown source={notes} />
-        </aside>
-      </TextBlock>
-    </PaddingReset>
-  {:else if notes}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <!-- Custom notes content -->
-        {@render notes()}
-      </TextBlock>
-    </PaddingReset>
-  {/if}
-</Block>
+      </div>
+    {/if}
+    {#if typeof notes === 'string'}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <aside>
+            <Markdown source={notes} />
+          </aside>
+        </TextBlock>
+      </PaddingReset>
+    {:else if notes}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <TextBlock width={textWidth}>
+          <!-- Custom notes content -->
+          {@render notes()}
+        </TextBlock>
+      </PaddingReset>
+    {/if}
+  </Block>
+</div>
 
-<style lang="scss" global>
+<style lang="scss">
   @use '../../scss/mixins' as mixins;
 
-  .article-block.graphic {
+  div.container {
+    display: contents;
+
     // Dek
-    p {
+    :global(.article-block.graphic p) {
       @include mixins.body-note;
       @include mixins.font-light;
     }
+
     // Caption and Sources
-    aside {
-      p {
-        @include mixins.body-caption;
-        @include mixins.fmy-1;
-      }
+    :global(.article-block.graphic aside p) {
+      @include mixins.body-caption;
+      @include mixins.fmy-1;
     }
   }
 </style>
diff --git a/src/components/GraphicBlock/components/TextBlock.svelte b/src/components/GraphicBlock/components/TextBlock.svelte
index b354973a..c7413fd5 100644
--- a/src/components/GraphicBlock/components/TextBlock.svelte
+++ b/src/components/GraphicBlock/components/TextBlock.svelte
@@ -3,6 +3,7 @@
   import type { ContainerWidth } from '../../@types/global';
 
   import Block from '../../Block/Block.svelte';
+
   interface Props {
     /** Width of the component within the text well. */
     width?: ContainerWidth;

From d9773e85b2dbb1ffd1ad70df570a7747b9e3555f Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 10 Apr 2025 12:30:11 +0100
Subject: [PATCH 47/47] updates docs

---
 src/components/PaddingReset/PaddingReset.mdx       | 14 +++++++++-----
 .../PaddingReset/PaddingReset.stories.svelte       | 10 ++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/PaddingReset/PaddingReset.mdx b/src/components/PaddingReset/PaddingReset.mdx
index 582b0bd0..17b8cb1a 100644
--- a/src/components/PaddingReset/PaddingReset.mdx
+++ b/src/components/PaddingReset/PaddingReset.mdx
@@ -6,7 +6,7 @@ import * as PaddingResetStories from './PaddingReset.stories.svelte';
 
 # PaddingReset
 
-Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on surrouding text such as ntoes or captions. The `PaddingReset` component resets padding to `0 15px` on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The `PaddingReset` component resets our normal well padding inside a `fluid` container.
 
 ```svelte
 <script>
@@ -15,11 +15,13 @@ Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep pa
 
 <Block width="fluid">
   <!-- Edge-to-edge image -->
-  <img src="https:..." alt="Alt text" />
+  <img src="https:..." alt="Alt text" class="fmb-1" />
 
   <!-- Wrap text in `PaddingReset`to add padding back in -->
   <PaddingReset>
-    <p>A caption for the image that is padded when Block is fluid.</p>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
   </PaddingReset>
 </Block>
 ```
@@ -40,11 +42,13 @@ You can add the padding conditionally by setting the `containerIsFluid` prop to
 
 <Block {width}>
   <!-- Edge-to-edge image -->
-  <img src="https:..." alt="Alt text" />
+  <img src="https:..." alt="Alt text" class="fmb-1" />
 
   <!-- Set conditional padding with the `containerIsFluid` prop -->
   <PaddingReset containerIsFluid={width === 'fluid'}>
-    <p>A caption for the image that is padded when Block is fluid.</p>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
   </PaddingReset>
 </Block>
 ```
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index 6cba1224..1d222aa3 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -18,11 +18,13 @@
 <Story name="Demo">
   <!-- Fluid block -->
   <Block {width}>
-    <img src={sharkSrc} alt="shark" />
+    <img src={sharkSrc} alt="shark" class="fmb-1" />
     <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
-      <p>
-        A caption for the image that is padded when <code>Block</code> is fluid.
-      </p>
+      <div class="body-note">
+        A caption for the image that is padded when its containing <code
+          >Block</code
+        > is fluid.
+      </div>
     </PaddingReset>
   </Block>
 </Story>