From 44f3d6407012f220a3f52a86805a54ebef82841c Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Tue, 22 Apr 2025 22:39:26 +0530
Subject: [PATCH 01/25] expose bindable props

---
 .../Scroller/Scroller.stories.svelte           | 18 ++++++++++++++++++
 src/components/Scroller/Scroller.svelte        | 14 +++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index 101b4967..ca233b30 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -19,6 +19,24 @@
         control: 'select',
         options: ['fb', 'bf'],
       },
+      index: {
+        control: false,
+        table: {
+          category: 'Bindable states (Read-only)',
+        },
+      },
+      offset: {
+        control: false,
+        table: {
+          category: 'Bindable states (Read-only)',
+        },
+      },
+      progress: {
+        control: false,
+        table: {
+          category: 'Bindable states (Read-only)',
+        },
+      },
     },
   });
 </script>
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 777cef59..b6c897b2 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -74,6 +74,12 @@
     id?: string;
     /** Set a class to target with SCSS */
     class?: string;
+    /** The currently active section */
+    index?: number;
+    /**  How far the section has scrolled past the threshold, as a value between 0 and 1 */
+    offset?: number;
+    /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom */
+    progress?: number;
   }
 
   let {
@@ -90,12 +96,10 @@
     bottom = 1,
     parallax = false,
     class: cls = '',
+    index = $bindable(0),
+    offset = $bindable(0),
+    progress = $bindable(0),
   }: Props = $props();
-
-  // Bindable variables passed to ScrollerBase
-  let index = $state(0);
-  let offset = $state(0);
-  let progress = $state(0);
 </script>
 
 {#if !embedded}

From 28a2c2663438f302613df0a1980e9a0687a51e42 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Tue, 22 Apr 2025 22:40:00 +0530
Subject: [PATCH 02/25] Create lefthook.yml

---
 lefthook.yml | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 lefthook.yml

diff --git a/lefthook.yml b/lefthook.yml
new file mode 100644
index 00000000..3ac5730a
--- /dev/null
+++ b/lefthook.yml
@@ -0,0 +1,42 @@
+# EXAMPLE USAGE:
+#
+#   Refer for explanation to following link:
+#   https://lefthook.dev/configuration/
+#
+# pre-push:
+#   jobs:
+#     - name: packages audit
+#       tags:
+#         - frontend
+#         - security
+#       run: yarn audit
+#
+#     - name: gems audit
+#       tags:
+#         - backend
+#         - security
+#       run: bundle audit
+#
+# pre-commit:
+#   parallel: true
+#   jobs:
+#     - run: yarn eslint {staged_files}
+#       glob: "*.{js,ts,jsx,tsx}"
+#
+#     - name: rubocop
+#       glob: "*.rb"
+#       exclude:
+#         - config/application.rb
+#         - config/routes.rb
+#       run: bundle exec rubocop --force-exclusion {all_files}
+#
+#     - name: govet
+#       files: git ls-files -m
+#       glob: "*.go"
+#       run: go vet {files}
+#
+#     - script: "hello.js"
+#       runner: node
+#
+#     - script: "hello.go"
+#       runner: go run

From 4b52ad8cdc734069cfcc4d817c266f85fcffb842 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Tue, 22 Apr 2025 22:49:53 +0530
Subject: [PATCH 03/25] Delete lefthook.yml

---
 lefthook.yml | 42 ------------------------------------------
 1 file changed, 42 deletions(-)
 delete mode 100644 lefthook.yml

diff --git a/lefthook.yml b/lefthook.yml
deleted file mode 100644
index 3ac5730a..00000000
--- a/lefthook.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-# EXAMPLE USAGE:
-#
-#   Refer for explanation to following link:
-#   https://lefthook.dev/configuration/
-#
-# pre-push:
-#   jobs:
-#     - name: packages audit
-#       tags:
-#         - frontend
-#         - security
-#       run: yarn audit
-#
-#     - name: gems audit
-#       tags:
-#         - backend
-#         - security
-#       run: bundle audit
-#
-# pre-commit:
-#   parallel: true
-#   jobs:
-#     - run: yarn eslint {staged_files}
-#       glob: "*.{js,ts,jsx,tsx}"
-#
-#     - name: rubocop
-#       glob: "*.rb"
-#       exclude:
-#         - config/application.rb
-#         - config/routes.rb
-#       run: bundle exec rubocop --force-exclusion {all_files}
-#
-#     - name: govet
-#       files: git ls-files -m
-#       glob: "*.go"
-#       run: go vet {files}
-#
-#     - script: "hello.js"
-#       runner: node
-#
-#     - script: "hello.go"
-#       runner: go run

From 93a41f32aa1221f09d0970b0a10215fff4ccb8eb Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Tue, 22 Apr 2025 22:58:21 +0530
Subject: [PATCH 04/25] docs(changeset): Exposes bindable props for the
 Scroller component

---
 .changeset/huge-moles-watch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/huge-moles-watch.md

diff --git a/.changeset/huge-moles-watch.md b/.changeset/huge-moles-watch.md
new file mode 100644
index 00000000..ebe5dcc8
--- /dev/null
+++ b/.changeset/huge-moles-watch.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Exposes bindable props for the Scroller component

From 185039c35e87d1d08fe8bbe9dc40a29a28591d3f Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 22 Apr 2025 15:23:18 -0400
Subject: [PATCH 05/25] fix rngs.io keys for site headline

---
 src/components/SiteHeadline/SiteHeadline.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteHeadline/SiteHeadline.mdx b/src/components/SiteHeadline/SiteHeadline.mdx
index 3bb36dc4..5812a57e 100644
--- a/src/components/SiteHeadline/SiteHeadline.mdx
+++ b/src/components/SiteHeadline/SiteHeadline.mdx
@@ -58,8 +58,8 @@ updated:
   sectionUrl={content.sectionUrl}
   hed={content.hed}
   authors={content.authors.split(',')}
-  publishTime={content.published}
-  updateTime={content.updated}
+  publishTime={content.publishTime}
+  updateTime={content.updatTime}
 />
 ```
 

From 074c4884659aad7ffd3483d961d66990afb38a0e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 22 Apr 2025 15:23:37 -0400
Subject: [PATCH 06/25] fix typo in timeline docs

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

diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx
index 7ff74758..2747ad25 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.mdx
+++ b/src/components/SimpleTimeline/SimpleTimeline.mdx
@@ -72,7 +72,7 @@ titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-pa
   import content from '$locales/en/content.json';
 </script>
 
-<EndNotes SimpleTimeline={content.timeline} />
+<SimpleTimeline={content.timeline} />
 ```
 
 <Canvas of={SimpleTimelineStories.Demo} />

From fd7a496888acd004b9965f0e5f9dc7b1f97639c3 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 22 Apr 2025 15:34:57 -0400
Subject: [PATCH 07/25] fixes timeline archieml docs;

---
 .../SimpleTimeline/SimpleTimeline.mdx         | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx
index 2747ad25..7eb4c72b 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.mdx
+++ b/src/components/SimpleTimeline/SimpleTimeline.mdx
@@ -40,24 +40,20 @@ With the graphics kit, you'll likely get your text value from an ArchieML doc.
 ```yaml
 # Archie ML doc
 
-[timeline]
-
-# date object with events
-date: May 18
-[.events]
-title: Mariupol defenders surrender to Russia but their fate is uncertain
-context:  More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia's war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign.
-titleLink: https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/
-
-# More events...
-[]
-
-date: May 10
-[.events]
-title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion
-context:  The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.
-titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
-[]
+type: timeline
+# Optional
+class: timeline
+id: timeline-1
+symbolColour: var(--theme-colour-brand-rules, grey)
+dateColour: var(--theme-colour-accent, red)
+[.dates]
+    # date object with events
+    date: May 10
+    [.events]
+    title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion
+    context:  The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.
+    titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
+    []
 
 # More dates and events...
 []
@@ -72,7 +68,13 @@ titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-pa
   import content from '$locales/en/content.json';
 </script>
 
-<SimpleTimeline={content.timeline} />
+<SimpleTimeline
+  dates={block.dates}
+  class={block.class}
+  symbolColour={block.symbolColour}
+  id={block.id}
+  dateColour={block.dateColour}
+/>
 ```
 
 <Canvas of={SimpleTimelineStories.Demo} />

From 3eb666f1b8a5e424f306de7e3ad81584123ab9f3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 22 Apr 2025 20:18:41 +0000
Subject: [PATCH 08/25] RELEASING: Releasing 1 package(s)

Releases:
  @reuters-graphics/graphics-components@3.0.1

[skip ci]
---
 .changeset/huge-moles-watch.md | 5 -----
 CHANGELOG.md                   | 6 ++++++
 package.json                   | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/huge-moles-watch.md

diff --git a/.changeset/huge-moles-watch.md b/.changeset/huge-moles-watch.md
deleted file mode 100644
index ebe5dcc8..00000000
--- a/.changeset/huge-moles-watch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Exposes bindable props for the Scroller component
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75e6de88..01f2638a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.1
+
+### Patch Changes
+
+- 93a41f3: Exposes bindable props for the Scroller component
+
 ## 3.0.0
 
 ### Major Changes
diff --git a/package.json b/package.json
index c2d27323..66c96f67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From e95a5f2b3901a09eeb255171e577f7722b8acc98 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 23 Apr 2025 16:51:38 +0100
Subject: [PATCH 09/25] handles some a11y arias in sitefooter and siteheader we
 always get dinged on

---
 src/components/SiteFooter/CompanyLinks.svelte          | 10 +++++++++-
 src/components/SiteHeader/MobileMenu/index.svelte      |  6 +++++-
 .../SiteHeader/NavBar/NavDropdown/index.svelte         |  4 ++--
 src/components/SiteHeader/NavBar/index.svelte          |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index 443dc930..be3c6f29 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -25,6 +25,11 @@
   }
 
   let { links = {} }: Props = $props();
+
+  const normaliseSocialName = (name: string) => {
+    if (name === 'twitter') return 'X';
+    return name;
+  };
 </script>
 
 {#if links.social_links}
@@ -42,7 +47,10 @@
               {@const SvelteComponent =
                 symbols[link.type as keyof typeof symbols]}
               <li class="social-links symbol">
-                <a href={normalizeUrl(link.url)}>
+                <a
+                  href={normalizeUrl(link.url)}
+                  aria-label="Visit Reuters on {normaliseSocialName(link.type)}"
+                >
                   <div class="button">
                     <div class="social">
                       <SvelteComponent />
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index e2dc2dd0..bb02b67d 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -37,7 +37,11 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" onclick={releaseMobileMenu}>
+      <button
+        class="button close-button"
+        aria-label="Close menu"
+        onclick={releaseMobileMenu}
+      >
         <div class="button-container">
           <CloseIcon />
         </div>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
index b9335654..f5cc466f 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
@@ -69,7 +69,7 @@
   };
 </script>
 
-<div class="dropdown">
+<div class="dropdown" data-chromatic="ignore">
   <div class="dropdown-container">
     <div class="inner">
       <div class="submenu">
@@ -78,7 +78,7 @@
         </div>
       </div>
       <div class="stories-container">
-        <div class="inner" data-chromatic="ignore">
+        <div class="inner">
           {#if stories.length > 0}
             <span class="latest">{headingText}</span>
             <ul class="story-list">
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index 0bb66c5b..692e89b0 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -66,7 +66,7 @@
               <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
-              <button class="button">
+              <button class="button" aria-label="{section.name} menu">
                 <DownArrow rotate={section.id === $activeSection} />
               </button>
             </div>

From c91807ebac03664931b755b99a49f04310b57412 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 23 Apr 2025 16:52:00 +0100
Subject: [PATCH 10/25] docs(changeset): a11y fixes for SiteHeader and
 SiteFooter

---
 .changeset/rude-beers-drive.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rude-beers-drive.md

diff --git a/.changeset/rude-beers-drive.md b/.changeset/rude-beers-drive.md
new file mode 100644
index 00000000..d4edf2d7
--- /dev/null
+++ b/.changeset/rude-beers-drive.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+a11y fixes for SiteHeader and SiteFooter

From be7d0b1d8f7f53cd73a8709a3054070a709b19a4 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 10:03:17 +0100
Subject: [PATCH 11/25] cleans up a spare console log

---
 src/components/Framer/Typeahead/index.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte
index cbd62dad..dd26a4a8 100644
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@@ -177,7 +177,6 @@
 
 <svelte:window
   onclick={({ target }) => {
-    console.log('HELLO', !comboboxRef?.contains(target as Node));
     if (!hideDropdown && !comboboxRef?.contains(target as Node)) {
       close();
     }

From 2d4a6412408fb2fc03d060a7fda372e4d1f5bf8c Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 10:03:34 +0100
Subject: [PATCH 12/25] docs(changeset): Cleans up a spare console log left in

---
 .changeset/mighty-rats-doubt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/mighty-rats-doubt.md

diff --git a/.changeset/mighty-rats-doubt.md b/.changeset/mighty-rats-doubt.md
new file mode 100644
index 00000000..1ae0ac3d
--- /dev/null
+++ b/.changeset/mighty-rats-doubt.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Cleans up a spare console log left in

From ac5f591835a2144f847e6faeb310f78018df3179 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 12:50:05 +0100
Subject: [PATCH 13/25] fixes for Ad types that were overlapping the component
 names and a bug in the Framer Resizer

---
 src/components/AdSlot/@types/ads.ts           | 48 ++++++++-----------
 src/components/AdSlot/InlineAd.svelte         |  4 +-
 src/components/AdSlot/LeaderboardAd.svelte    |  4 +-
 src/components/AdSlot/SponsorshipAd.svelte    |  4 +-
 src/components/Framer/Resizer/index.svelte    | 13 +++--
 .../Framer/stories/docs/component.md          | 11 -----
 6 files changed, 33 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/Framer/stories/docs/component.md

diff --git a/src/components/AdSlot/@types/ads.ts b/src/components/AdSlot/@types/ads.ts
index 3812be38..8ccfb68e 100644
--- a/src/components/AdSlot/@types/ads.ts
+++ b/src/components/AdSlot/@types/ads.ts
@@ -1,4 +1,4 @@
-export type LeaderboardAd = {
+export type LeaderboardAdType = {
   mobile: {
     adType: 'leaderboard';
     placementName: 'reuters_mobile_leaderboard';
@@ -8,8 +8,7 @@ export type LeaderboardAd = {
     placementName: 'reuters_desktop_leaderboard_atf';
   };
 };
-
-export type SponsorshipAd = {
+export type SponsorshipAdType = {
   mobile: {
     adType: 'sponsorlogo';
     placementName: 'reuters_sponsorlogo';
@@ -19,40 +18,35 @@ export type SponsorshipAd = {
     placementName: 'reuters_sponsorlogo';
   };
 };
-
-export type InlineAd = {
+export type InlineAdType = {
   mobile: {
     adType: 'mpu' | 'native' | 'mpu2';
     placementName:
-      | 'reuters_mobile_mpu_1'
-      | 'reuters_mobile_mpu_2'
-      | 'reuters_mobile_mpu_3';
+    | 'reuters_mobile_mpu_1'
+    | 'reuters_mobile_mpu_2'
+    | 'reuters_mobile_mpu_3';
   };
   desktop: {
     adType: 'native' | 'canvas' | 'flex';
     placementName:
-      | 'reuters_desktop_native_1'
-      | 'reuters_desktop_native_2'
-      | 'reuters_desktop_native_3';
+    | 'reuters_desktop_native_1'
+    | 'reuters_desktop_native_2'
+    | 'reuters_desktop_native_3';
   };
 };
-
 export type DesktopPlacementName =
-  | LeaderboardAd['desktop']['placementName']
-  | SponsorshipAd['desktop']['placementName']
-  | InlineAd['desktop']['placementName'];
-
+  | LeaderboardAdType['desktop']['placementName']
+  | SponsorshipAdType['desktop']['placementName']
+  | InlineAdType['desktop']['placementName'];
 export type MobilePlacementName =
-  | LeaderboardAd['mobile']['placementName']
-  | SponsorshipAd['mobile']['placementName']
-  | InlineAd['mobile']['placementName'];
-
+  | LeaderboardAdType['mobile']['placementName']
+  | SponsorshipAdType['mobile']['placementName']
+  | InlineAdType['mobile']['placementName'];
 export type DesktopAdType =
-  | LeaderboardAd['desktop']['adType']
-  | SponsorshipAd['desktop']['adType']
-  | InlineAd['desktop']['adType'];
-
+  | LeaderboardAdType['desktop']['adType']
+  | SponsorshipAdType['desktop']['adType']
+  | InlineAdType['desktop']['adType'];
 export type MobileAdType =
-  | LeaderboardAd['mobile']['adType']
-  | SponsorshipAd['mobile']['adType']
-  | InlineAd['mobile']['adType'];
+  | LeaderboardAdType['mobile']['adType']
+  | SponsorshipAdType['mobile']['adType']
+  | InlineAdType['mobile']['adType'];
diff --git a/src/components/AdSlot/InlineAd.svelte b/src/components/AdSlot/InlineAd.svelte
index 6a0e8331..09cb4d26 100644
--- a/src/components/AdSlot/InlineAd.svelte
+++ b/src/components/AdSlot/InlineAd.svelte
@@ -2,7 +2,7 @@
 <!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import type { InlineAd } from './@types/ads';
+  import type { InlineAdType } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   interface Props {
@@ -16,7 +16,7 @@
 
   let { id = '', class: cls = 'my-12', n = 1 }: Props = $props();
 
-  const desktopPlacementName: InlineAd['desktop']['placementName'] = `reuters_desktop_native_${n}`;
+  const desktopPlacementName: InlineAdType['desktop']['placementName'] = `reuters_desktop_native_${n}`;
 </script>
 
 <Block {id} class="freestar-adslot {cls}">
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte
index fdc4435b..95aada3d 100644
--- a/src/components/AdSlot/LeaderboardAd.svelte
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@@ -1,6 +1,6 @@
 <!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) -->
 <script lang="ts">
-  import type { LeaderboardAd } from './@types/ads';
+  import type { LeaderboardAdType } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
   import { onMount } from 'svelte';
 
@@ -16,7 +16,7 @@
   let windowWidth = $state(1200);
   let adSize = $derived(windowWidth < 1024 ? 110 : 275);
 
-  const desktopPlacementName: LeaderboardAd['desktop']['placementName'] =
+  const desktopPlacementName: LeaderboardAdType['desktop']['placementName'] =
     'reuters_desktop_leaderboard_atf';
 
   let sticky = $state(false);
diff --git a/src/components/AdSlot/SponsorshipAd.svelte b/src/components/AdSlot/SponsorshipAd.svelte
index 7449cbb1..8f3b3c5e 100644
--- a/src/components/AdSlot/SponsorshipAd.svelte
+++ b/src/components/AdSlot/SponsorshipAd.svelte
@@ -2,7 +2,7 @@
 <!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import type { SponsorshipAd } from './@types/ads';
+  import type { SponsorshipAdType } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   interface Props {
@@ -18,7 +18,7 @@
 
   let { id = '', class: cls = 'my-12', adLabel = '' }: Props = $props();
 
-  const desktopPlacementName: SponsorshipAd['desktop']['placementName'] =
+  const desktopPlacementName: SponsorshipAdType['desktop']['placementName'] =
     'reuters_sponsorlogo';
 </script>
 
diff --git a/src/components/Framer/Resizer/index.svelte b/src/components/Framer/Resizer/index.svelte
index 66652811..9b41b617 100644
--- a/src/components/Framer/Resizer/index.svelte
+++ b/src/components/Framer/Resizer/index.svelte
@@ -27,8 +27,7 @@
     if ($width > maxWidth) width.set(maxWidth);
   });
 
-  // svelte-ignore state_referenced_locally
-  let offset = $state(($width - minWidth) / pixelRange);
+  let offset = $derived(($width - minWidth) / pixelRange);
 
   let sliding = $state(false);
   let isFocused = $state(false);
@@ -55,7 +54,7 @@
     } else if (keyCode === 37) {
       offset = Math.max(0, offset - pixelWidth / sliderWidth);
     }
-    width.set(getPx());
+    $width = getPx();
   };
   const start = (e: MouseEvent) => {
     sliding = true;
@@ -77,17 +76,17 @@
       .filter((b) => b <= maxWidth)
       .filter((b) => b > $width);
     if (availableBreakpoints.length === 0) {
-      width.set(maxWidth);
+      $width = maxWidth;
     } else {
-      width.set(availableBreakpoints[0]);
+      $width = availableBreakpoints[0];
     }
   };
   const decrement = () => {
     const availableBreakpoints = breakpoints.filter((b) => b < $width);
     if (availableBreakpoints.length === 0) {
-      width.set(minWidth);
+      $width = minWidth;
     } else {
-      width.set(availableBreakpoints.slice(-1)[0]);
+      $width = availableBreakpoints.slice(-1)[0];
     }
   };
 </script>
diff --git a/src/components/Framer/stories/docs/component.md b/src/components/Framer/stories/docs/component.md
deleted file mode 100644
index 05f26772..00000000
--- a/src/components/Framer/stories/docs/component.md
+++ /dev/null
@@ -1,11 +0,0 @@
-An embed tool for development in the graphics kit.
-
-```svelte
-<script>
-  import { Framer } from '@reuters-graphics/graphics-components';
-
-  const embeds = ['/embeds/my-chart/index.html'];
-</script>
-
-<Framer embeds="{embeds}" />
-```

From b13463fe37c98d46b05a997f50d8b8894a1b24d8 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 12:50:36 +0100
Subject: [PATCH 14/25] docs(changeset): fixes for Ad types that were colliding
 with their component names and a bug in the Framer Resizer

---
 .changeset/shaky-colts-dress.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaky-colts-dress.md

diff --git a/.changeset/shaky-colts-dress.md b/.changeset/shaky-colts-dress.md
new file mode 100644
index 00000000..818b89e0
--- /dev/null
+++ b/.changeset/shaky-colts-dress.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+fixes for Ad types that were colliding with their component names and a bug in the Framer Resizer

From a1cdfc9a23042be9d942818f123a2e9e6de6dc37 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 12:53:11 +0100
Subject: [PATCH 15/25] lint

---
 src/components/AdSlot/@types/ads.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/AdSlot/@types/ads.ts b/src/components/AdSlot/@types/ads.ts
index 8ccfb68e..93e32b72 100644
--- a/src/components/AdSlot/@types/ads.ts
+++ b/src/components/AdSlot/@types/ads.ts
@@ -22,16 +22,16 @@ export type InlineAdType = {
   mobile: {
     adType: 'mpu' | 'native' | 'mpu2';
     placementName:
-    | 'reuters_mobile_mpu_1'
-    | 'reuters_mobile_mpu_2'
-    | 'reuters_mobile_mpu_3';
+      | 'reuters_mobile_mpu_1'
+      | 'reuters_mobile_mpu_2'
+      | 'reuters_mobile_mpu_3';
   };
   desktop: {
     adType: 'native' | 'canvas' | 'flex';
     placementName:
-    | 'reuters_desktop_native_1'
-    | 'reuters_desktop_native_2'
-    | 'reuters_desktop_native_3';
+      | 'reuters_desktop_native_1'
+      | 'reuters_desktop_native_2'
+      | 'reuters_desktop_native_3';
   };
 };
 export type DesktopPlacementName =

From fe77c1a35386edc8bac4f18fd9d1f8543a96ad2c Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 13:01:16 +0100
Subject: [PATCH 16/25] closes #282

---
 src/components/SEO/SEO.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index 8ceb2cd5..19bc6940 100644
--- a/src/components/SEO/SEO.svelte
+++ b/src/components/SEO/SEO.svelte
@@ -185,9 +185,11 @@
     <meta property="fb:admins" content="625796953" />
     <meta property="fb:admins" content="571759798" />
 
+    <!-- svelte-ignore hydration_html_changed -->
     {@html `<${'script'} type="application/ld+json">${JSON.stringify(
       orgLdJson
     )}</script>`}
+    <!-- svelte-ignore hydration_html_changed -->
     {@html `<${'script'} type="application/ld+json">${JSON.stringify(
       articleLdJson
     )}</script>`}

From a48d3339b442646785eb71e412cec34b01ef504e Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 13:01:54 +0100
Subject: [PATCH 17/25] docs(changeset): Ignore hydration mismatch in SEO
 component ld+json

---
 .changeset/twelve-ravens-lead.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/twelve-ravens-lead.md

diff --git a/.changeset/twelve-ravens-lead.md b/.changeset/twelve-ravens-lead.md
new file mode 100644
index 00000000..b3ab5042
--- /dev/null
+++ b/.changeset/twelve-ravens-lead.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Ignore hydration mismatch in SEO component ld+json

From f2b7921aee8970cab1986d043a388f95ec470a4f Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 16:59:48 +0100
Subject: [PATCH 18/25] adds dropdown as default search type for framer

---
 src/components/Framer/Dropdown/index.svelte |  50 ++++++++
 src/components/Framer/Framer.svelte         | 123 ++++++++++++--------
 2 files changed, 126 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Framer/Dropdown/index.svelte

diff --git a/src/components/Framer/Dropdown/index.svelte b/src/components/Framer/Dropdown/index.svelte
new file mode 100644
index 00000000..8798d5b6
--- /dev/null
+++ b/src/components/Framer/Dropdown/index.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  interface Props {
+    data: {
+      index: number;
+      embed: string;
+      title: string;
+    }[];
+    selected: string;
+  }
+
+  let { data = [], selected = $bindable() }: Props = $props();
+</script>
+
+<form>
+  <label for="embed-options">Select an embed</label>
+  <select id="embed-options" bind:value={selected}>
+    {#each data as d (d.index)}
+      <option value={d.embed}>{d.title}</option>
+    {/each}
+  </select>
+</form>
+
+<style lang="scss">
+  @use '../../../scss/mixins' as mixins;
+
+  label {
+    margin-bottom: 0.25rem;
+    display: inline-flex;
+    font-size: 0.75rem;
+    color: #aaa;
+    @include mixins.font-sans;
+  }
+
+  select {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: none;
+    font-size: 1rem;
+    border: 0;
+    border-radius: 0 !important;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    @include mixins.font-sans;
+  }
+
+  select:focus {
+    outline: none;
+    border: 1px solid #ccc;
+  }
+</style>
diff --git a/src/components/Framer/Framer.svelte b/src/components/Framer/Framer.svelte
index acbe4aa4..9359e624 100644
--- a/src/components/Framer/Framer.svelte
+++ b/src/components/Framer/Framer.svelte
@@ -7,6 +7,7 @@
   import { width } from './stores';
   import getUniqNames from './uniqNames';
   import Typeahead from './Typeahead/index.svelte';
+  import Dropdown from './Dropdown/index.svelte';
   import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 
   interface Props {
@@ -14,6 +15,7 @@
     breakpoints?: number[];
     minFrameWidth?: number;
     maxFrameWidth?: number;
+    searchType?: 'dropdown' | 'typeahead';
   }
 
   let {
@@ -21,6 +23,7 @@
     breakpoints = [330, 510, 660, 930, 1200],
     minFrameWidth = 320,
     maxFrameWidth = 1200,
+    searchType = 'dropdown',
   }: Props = $props();
 
   const getDefaultEmbed = (embeds: Props['embeds']) => {
@@ -71,37 +74,62 @@
       <p>No embeds to show.</p>
     </div>
   {:else}
-    <div id="typeahead-container">
-      <div class="embed-link">
-        <a
-          rel="external"
-          target="_blank"
-          href={activeEmbed}
-          title={activeEmbed}
-        >
-          Live link <Fa icon={faLink} />
-        </a>
+    {#if searchType === 'typeahead'}
+      <div id="typeahead-container">
+        <div class="embed-link">
+          <a
+            rel="external"
+            target="_blank"
+            href={activeEmbed}
+            title={activeEmbed}
+          >
+            Live link <Fa icon={faLink} />
+          </a>
+        </div>
+        <Typeahead
+          label="Select an embed"
+          value={embedTitles[embeds.indexOf(activeEmbed)] ||
+            embedTitles[activeEmbedIndex] ||
+            embedTitles[0]}
+          extract={(d) => embedTitles[d.index]}
+          data={embeds.map((embed, index) => ({ index, embed }))}
+          showDropdownOnFocus={true}
+          onselect={(detail) => {
+            if (typeof window !== 'undefined') {
+              window.localStorage.setItem(
+                'framer-active-embed',
+                detail.original.embed
+              );
+            }
+            activeEmbed = detail.original.embed;
+            // activeEmbedIndex = detail.original.index;
+          }}
+        />
       </div>
-      <Typeahead
-        label="Select an embed"
-        value={embedTitles[embeds.indexOf(activeEmbed)] ||
-          embedTitles[activeEmbedIndex] ||
-          embedTitles[0]}
-        extract={(d) => embedTitles[d.index]}
-        data={embeds.map((embed, index) => ({ index, embed }))}
-        showDropdownOnFocus={true}
-        onselect={(detail) => {
-          if (typeof window !== 'undefined') {
-            window.localStorage.setItem(
-              'framer-active-embed',
-              detail.original.embed
-            );
-          }
-          activeEmbed = detail.original.embed;
-          // activeEmbedIndex = detail.original.index;
-        }}
-      />
-    </div>
+    {:else}
+      <div id="dropdown-container">
+        <div>
+          <div class="embed-link">
+            <a
+              rel="external"
+              target="_blank"
+              href={activeEmbed}
+              title={activeEmbed}
+            >
+              Live link <Fa icon={faLink} />
+            </a>
+          </div>
+        </div>
+        <Dropdown
+          data={embeds.map((embed, index) => ({
+            index,
+            embed,
+            title: embedTitles[index],
+          }))}
+          bind:selected={activeEmbed}
+        />
+      </div>
+    {/if}
 
     <div id="preview-label" style="width:{$width}px;">
       <p>Preview</p>
@@ -139,26 +167,27 @@
     }
   }
 
-  div#typeahead-container {
+  div#typeahead-container,
+  div#dropdown-container {
     max-width: 660px;
     margin: 0 auto 15px;
     position: relative;
-  }
-  div#typeahead-container div.embed-link {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: inline-block;
-    z-index: 2;
-  }
-  div#typeahead-container div.embed-link a {
-    font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
-    color: #bbb;
-    font-size: 12px;
-    text-decoration: none !important;
-  }
-  div#typeahead-container div.embed-link a:hover {
-    color: #666;
+    div.embed-link {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: inline-block;
+      z-index: 2;
+      a {
+        font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
+        color: #bbb;
+        font-size: 12px;
+        text-decoration: none !important;
+        &:hover {
+          color: #666;
+        }
+      }
+    }
   }
 
   div#preview-label {

From 737f2e134a68d9484379b8dc22f14b34aaf5ec59 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 17:00:42 +0100
Subject: [PATCH 19/25] docs(changeset): Adds a simple dropdown option to
 search embeds for Framer

---
 .changeset/easy-dryers-chew.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/easy-dryers-chew.md

diff --git a/.changeset/easy-dryers-chew.md b/.changeset/easy-dryers-chew.md
new file mode 100644
index 00000000..f749bc9a
--- /dev/null
+++ b/.changeset/easy-dryers-chew.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Adds a simple dropdown option to search embeds for Framer

From 72ac5d8b3052a850c5fb7cbc5bdefc284ee3d5f8 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 18:01:45 +0100
Subject: [PATCH 20/25] only fetch referrals on dotcom. half-step to #286

---
 src/components/ReferralBlock/ReferralBlock.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index bdf825c7..a3c959ed 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -67,6 +67,9 @@
   let referrals: Article[] = $state([]);
 
   const getReferrals = async () => {
+    if (typeof window === 'undefined') return;
+    // fetch only reliably works on prod sites
+    if (window?.location?.hostname !== 'www.reuters.com') return;
     const isCollection = Boolean(collection);
     const API = isCollection ? COLLECTION_API : SECTION_API;
     try {

From a032218ea37ee84481f2fcc67e4212cbf775bbe1 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Thu, 24 Apr 2025 18:02:40 +0100
Subject: [PATCH 21/25] docs(changeset): Don't fetch referrals on non-dotcom
 domains

---
 .changeset/itchy-adults-cheer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/itchy-adults-cheer.md

diff --git a/.changeset/itchy-adults-cheer.md b/.changeset/itchy-adults-cheer.md
new file mode 100644
index 00000000..7529ea01
--- /dev/null
+++ b/.changeset/itchy-adults-cheer.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Don't fetch referrals on non-dotcom domains

From 059de658eb367ef636b95d83c1e6ade133b8e720 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 24 Apr 2025 17:06:21 +0000
Subject: [PATCH 22/25] RELEASING: Releasing 1 package(s)

Releases:
  @reuters-graphics/graphics-components@3.0.2

[skip ci]
---
 .changeset/easy-dryers-chew.md   |  5 -----
 .changeset/itchy-adults-cheer.md |  5 -----
 .changeset/mighty-rats-doubt.md  |  5 -----
 .changeset/rude-beers-drive.md   |  5 -----
 .changeset/shaky-colts-dress.md  |  5 -----
 .changeset/twelve-ravens-lead.md |  5 -----
 CHANGELOG.md                     | 11 +++++++++++
 package.json                     |  2 +-
 8 files changed, 12 insertions(+), 31 deletions(-)
 delete mode 100644 .changeset/easy-dryers-chew.md
 delete mode 100644 .changeset/itchy-adults-cheer.md
 delete mode 100644 .changeset/mighty-rats-doubt.md
 delete mode 100644 .changeset/rude-beers-drive.md
 delete mode 100644 .changeset/shaky-colts-dress.md
 delete mode 100644 .changeset/twelve-ravens-lead.md

diff --git a/.changeset/easy-dryers-chew.md b/.changeset/easy-dryers-chew.md
deleted file mode 100644
index f749bc9a..00000000
--- a/.changeset/easy-dryers-chew.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Adds a simple dropdown option to search embeds for Framer
diff --git a/.changeset/itchy-adults-cheer.md b/.changeset/itchy-adults-cheer.md
deleted file mode 100644
index 7529ea01..00000000
--- a/.changeset/itchy-adults-cheer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Don't fetch referrals on non-dotcom domains
diff --git a/.changeset/mighty-rats-doubt.md b/.changeset/mighty-rats-doubt.md
deleted file mode 100644
index 1ae0ac3d..00000000
--- a/.changeset/mighty-rats-doubt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Cleans up a spare console log left in
diff --git a/.changeset/rude-beers-drive.md b/.changeset/rude-beers-drive.md
deleted file mode 100644
index d4edf2d7..00000000
--- a/.changeset/rude-beers-drive.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-a11y fixes for SiteHeader and SiteFooter
diff --git a/.changeset/shaky-colts-dress.md b/.changeset/shaky-colts-dress.md
deleted file mode 100644
index 818b89e0..00000000
--- a/.changeset/shaky-colts-dress.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-fixes for Ad types that were colliding with their component names and a bug in the Framer Resizer
diff --git a/.changeset/twelve-ravens-lead.md b/.changeset/twelve-ravens-lead.md
deleted file mode 100644
index b3ab5042..00000000
--- a/.changeset/twelve-ravens-lead.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Ignore hydration mismatch in SEO component ld+json
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01f2638a..4fa69fba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.2
+
+### Patch Changes
+
+- 737f2e1: Adds a simple dropdown option to search embeds for Framer
+- a032218: Don't fetch referrals on non-dotcom domains
+- 2d4a641: Cleans up a spare console log left in
+- c91807e: a11y fixes for SiteHeader and SiteFooter
+- b13463f: fixes for Ad types that were colliding with their component names and a bug in the Framer Resizer
+- a48d333: Ignore hydration mismatch in SEO component ld+json
+
 ## 3.0.1
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 66c96f67..3f0b6a92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From aa2fb9328da79b9e735310d79a00e06ca16f4711 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 6 May 2025 08:16:11 -0700
Subject: [PATCH 23/25] allows background to be undefined closes #296

---
 src/components/@types/global.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@types/global.ts b/src/components/@types/global.ts
index 0d9323ba..9fb19b5f 100644
--- a/src/components/@types/global.ts
+++ b/src/components/@types/global.ts
@@ -31,7 +31,7 @@ export interface ScrollerStep {
   /**
    * A background component
    */
-  background: Component;
+  background: Component | undefined;
   /**
    * Optional props for background component
    */

From c074a18a143a65a4826c28a655fe309143f4c8d3 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 6 May 2025 08:16:27 -0700
Subject: [PATCH 24/25] docs(changeset): Allows step.background to be undefined

---
 .changeset/grumpy-lines-heal.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/grumpy-lines-heal.md

diff --git a/.changeset/grumpy-lines-heal.md b/.changeset/grumpy-lines-heal.md
new file mode 100644
index 00000000..681c1cd3
--- /dev/null
+++ b/.changeset/grumpy-lines-heal.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Allows step.background to be undefined

From 6cba35ec3399f6446005c48a7cf36a783e8f2ebe Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 6 May 2025 15:22:58 +0000
Subject: [PATCH 25/25] RELEASING: Releasing 1 package(s)

Releases:
  @reuters-graphics/graphics-components@3.0.3

[skip ci]
---
 .changeset/grumpy-lines-heal.md | 5 -----
 CHANGELOG.md                    | 6 ++++++
 package.json                    | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/grumpy-lines-heal.md

diff --git a/.changeset/grumpy-lines-heal.md b/.changeset/grumpy-lines-heal.md
deleted file mode 100644
index 681c1cd3..00000000
--- a/.changeset/grumpy-lines-heal.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Allows step.background to be undefined
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4fa69fba..27747ab7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.3
+
+### Patch Changes
+
+- c074a18: Allows step.background to be undefined
+
 ## 3.0.2
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 3f0b6a92..eeeeda59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",