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 01/17] 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 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 02/17] 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 03/17] 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 04/17] 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 05/17] 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 06/17] 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 07/17] 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 08/17] 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 09/17] 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 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 10/17] 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 11/17] 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 12/17] 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 13/17] 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 14/17] 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 15/17] 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 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 16/17] 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 17/17] 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;