From 32f2a833c53f8f25d0d6087be23911af5ed5bf13 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 22 May 2025 12:46:21 -0700
Subject: [PATCH 01/36] makes rootMargin prop units customiasable closes #221

---
 src/components/Visible/Visible.mdx            |  3 +-
 src/components/Visible/Visible.stories.svelte |  5 +-
 src/components/Visible/Visible.svelte         | 48 ++++++++++++-------
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/Visible/Visible.mdx b/src/components/Visible/Visible.mdx
index f3c25b59..f6f38f4b 100644
--- a/src/components/Visible/Visible.mdx
+++ b/src/components/Visible/Visible.mdx
@@ -19,7 +19,8 @@ By default, `visible` will switch between `false` and `true` whenever the elemen
   import { Visible } from '@reuters-graphics/graphics-components';
 </script>
 
-<Visible>
+<!-- Optionally set your own `top`, `bottom`, `right` and `left` values with units -->
+<Visible top={{ value: 10, unit: 'px' }}>
   {#snippet children(visible)}
     {#if visible}
       <p>Visible!</p>
diff --git a/src/components/Visible/Visible.stories.svelte b/src/components/Visible/Visible.stories.svelte
index 2529755b..e683ea62 100644
--- a/src/components/Visible/Visible.stories.svelte
+++ b/src/components/Visible/Visible.stories.svelte
@@ -9,8 +9,9 @@
   });
 </script>
 
-<Story name="Demo" tags={['!autodocs', '!dev']}>
-  <Visible>
+<Story name="Demo">
+  <!-- Optionally set your own `top`, `bottom`, `right` and `left` values with units -->
+  <Visible top={{ value: 10, unit: 'px' }}>
     {#snippet children(visible)}
       {#if visible}
         <p>Visible!</p>
diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index e1dd30a4..f8860595 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -9,14 +9,26 @@
      * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
      */
     once?: boolean;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
-    top?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */
-    bottom?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */
-    left?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */
-    right?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`.
+     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     */
+    top?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`.
+     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     */
+    bottom?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`.
+     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     */
+    left?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`.
+     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     */
+    right?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;
     children?: Snippet<[boolean]>;
@@ -24,10 +36,10 @@
 
   let {
     once = false,
-    top = 0,
-    bottom = 0,
-    left = 0,
-    right = 0,
+    top = { value: 0, unit: 'px' },
+    bottom = { value: 0, unit: 'px' },
+    left = { value: 0, unit: 'px' },
+    right = { value: 0, unit: 'px' },
     threshold = 0,
     children,
   }: Props = $props();
@@ -37,7 +49,7 @@
 
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+      const rootMargin = `${bottom.value}${bottom.unit} ${left.value}${left.unit} ${top.value}${top.unit} ${right.value}${right.unit}`;
 
       const observer = new IntersectionObserver(
         (entries) => {
@@ -53,17 +65,17 @@
       );
       if (container) observer.observe(container);
       return () => {
-        if (container) observer.observe(container);
+        if (container) observer.unobserve(container);
       };
     }
     function handler() {
       if (container) {
         const bcr = container.getBoundingClientRect();
         visible =
-          bcr.bottom + bottom > 0 &&
-          bcr.right + right > 0 &&
-          bcr.top - top < window.innerHeight &&
-          bcr.left - left < window.innerWidth;
+          bcr.bottom + bottom.value > 0 &&
+          bcr.right + right.value > 0 &&
+          bcr.top - top.value < window.innerHeight &&
+          bcr.left - left.value < window.innerWidth;
       }
       if (visible && once) {
         window.removeEventListener('scroll', handler);

From d5723617fe8fdbc5c7474841a36aaad7ad59f9b1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 May 2025 19:14:05 +0000
Subject: [PATCH 02/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/slimy-cities-swim.md b/.changeset/slimy-cities-swim.md
deleted file mode 100644
index 57e10ff4..00000000
--- a/.changeset/slimy-cities-swim.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Adds new Headpile component.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0cecf610..94a008f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.6
+
+### Patch Changes
+
+- a205a35: Adds new Headpile component.
+
 ## 3.0.5
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 7a67c895..66b73160 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From 15f04770bf13fca60a84b7879b581d02b48dbcef Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 29 May 2025 12:50:06 -0700
Subject: [PATCH 03/36] adds visible demo

---
 src/components/Visible/Visible.stories.svelte | 12 ++-----
 .../Visible/demo/VisibleDemo.svelte           | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Visible/demo/VisibleDemo.svelte

diff --git a/src/components/Visible/Visible.stories.svelte b/src/components/Visible/Visible.stories.svelte
index e683ea62..cefa60d8 100644
--- a/src/components/Visible/Visible.stories.svelte
+++ b/src/components/Visible/Visible.stories.svelte
@@ -2,6 +2,7 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Visible from './Visible.svelte';
+  import VisibleDemo from './demo/VisibleDemo.svelte';
 
   const { Story } = defineMeta({
     title: 'Components/Utilities/Visible',
@@ -10,14 +11,5 @@
 </script>
 
 <Story name="Demo">
-  <!-- Optionally set your own `top`, `bottom`, `right` and `left` values with units -->
-  <Visible top={{ value: 10, unit: 'px' }}>
-    {#snippet children(visible)}
-      {#if visible}
-        <p>Visible!</p>
-      {:else}
-        <p>Not yet visible.</p>
-      {/if}
-    {/snippet}
-  </Visible>
+  <VisibleDemo />
 </Story>
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
new file mode 100644
index 00000000..1b0a98f8
--- /dev/null
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Visible from '../Visible.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+  import Block from '../../Block/Block.svelte';
+
+  const text =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+
+<Block>
+  <Visible top={{ value: 10, unit: 'px' }}>
+    {#snippet children(visible)}
+      {#if visible}
+        <h2>Visible!</h2>
+      {:else}
+        <h2>Not yet visible.</h2>
+      {/if}
+    {/snippet}
+  </Visible>
+</Block>
+
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+
+<style lang="scss">
+</style>

From 97476d6a468807bcc7aa9e26ae23c003403b68cc Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 29 May 2025 12:53:27 -0700
Subject: [PATCH 04/36] adds demo text to visible demo

---
 src/components/Visible/demo/VisibleDemo.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index 1b0a98f8..66224052 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -3,11 +3,13 @@
   import BodyText from '../../BodyText/BodyText.svelte';
   import Block from '../../Block/Block.svelte';
 
+  const demoText =
+    'Adjust the window dimension to see what happens when the HTML element wrapped in `Visible` becomes enters the viewport.';
   const text =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 </script>
 
-<BodyText {text} />
+<BodyText text={`**${demoText}**`} />
 <BodyText {text} />
 <BodyText {text} />
 <BodyText {text} />

From 96a10123df74d4a629dc3ee0e255670d15adcb08 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 29 May 2025 14:07:56 -0700
Subject: [PATCH 05/36] adds demo, changes back to px

---
 src/components/Visible/Visible.svelte         | 37 ++++++-------
 .../Visible/demo/VisibleDemo.svelte           | 54 +++++++++++++------
 2 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index f8860595..6582e4eb 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -11,24 +11,24 @@
     once?: boolean;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    top?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    top?: number;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    bottom?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    bottom?: number;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    left?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    left?: number;
     /**
      * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`.
-     * Specify a value and unit (e.g. `px`, `%`, `vw`, `vh`, `rem`, `em`).
+     * Specify a pixel value.
      */
-    right?: { value: number; unit: 'px' | '%' | 'vw' | 'vh' | 'rem' | 'em' };
+    right?: number;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;
     children?: Snippet<[boolean]>;
@@ -36,10 +36,10 @@
 
   let {
     once = false,
-    top = { value: 0, unit: 'px' },
-    bottom = { value: 0, unit: 'px' },
-    left = { value: 0, unit: 'px' },
-    right = { value: 0, unit: 'px' },
+    top = 0,
+    bottom = 0,
+    left = 0,
+    right = 0,
     threshold = 0,
     children,
   }: Props = $props();
@@ -49,7 +49,7 @@
 
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${bottom.value}${bottom.unit} ${left.value}${left.unit} ${top.value}${top.unit} ${right.value}${right.unit}`;
+      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
 
       const observer = new IntersectionObserver(
         (entries) => {
@@ -71,11 +71,12 @@
     function handler() {
       if (container) {
         const bcr = container.getBoundingClientRect();
+
         visible =
-          bcr.bottom + bottom.value > 0 &&
-          bcr.right + right.value > 0 &&
-          bcr.top - top.value < window.innerHeight &&
-          bcr.left - left.value < window.innerWidth;
+          bcr.bottom + bottom > 0 &&
+          bcr.right + right > 0 &&
+          bcr.top - top < window.innerHeight &&
+          bcr.left - left < window.innerWidth;
       }
       if (visible && once) {
         window.removeEventListener('scroll', handler);
@@ -86,7 +87,7 @@
   });
 </script>
 
-<div bind:this={container}>
+<div class="visibility-tracker" bind:this={container}>
   {#if children}
     {@render children(visible)}
   {/if}
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index 66224052..c0b47208 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -2,11 +2,16 @@
   import Visible from '../Visible.svelte';
   import BodyText from '../../BodyText/BodyText.svelte';
   import Block from '../../Block/Block.svelte';
+  import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
+  import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
   const demoText =
-    'Adjust the window dimension to see what happens when the HTML element wrapped in `Visible` becomes enters the viewport.';
+    "Adjust the window dimension to see what happens when `<div class=\'visibility-tracker\'>` comes into <a href=\'https://codepen.io/michellebarker/full/xxwLpRG\'>Internsection Observer's</a> view.";
+
   const text =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+  let top = 500;
 </script>
 
 <BodyText text={`**${demoText}**`} />
@@ -14,22 +19,41 @@
 <BodyText {text} />
 <BodyText {text} />
 
-<Block>
-  <Visible top={{ value: 10, unit: 'px' }}>
-    {#snippet children(visible)}
-      {#if visible}
-        <h2>Visible!</h2>
-      {:else}
-        <h2>Not yet visible.</h2>
-      {/if}
-    {/snippet}
-  </Visible>
-</Block>
-
-<BodyText {text} />
-<BodyText {text} />
+<!-- <div class="root-margin-demo" style="padding-top:{top}px;">
+  <p class="margin-value font-note font-medium">Root margin top: {top}px</p>
+</div> -->
+<Visible {top}>
+  {#snippet children(visible)}
+    {#if visible}
+      <FeaturePhoto
+        src={sharkSrc}
+        altText="A shark!"
+        caption="Carcharodon carcharias - REUTERS"
+      />
+    {:else}
+      <Block>
+        <h2 class="not-visible">Not yet visible.</h2>
+      </Block>
+    {/if}
+  {/snippet}
+</Visible>
 <BodyText {text} />
 <BodyText {text} />
 
 <style lang="scss">
+  @use '../../../scss/mixins' as mixins;
+
+  .root-margin-demo {
+    position: relative;
+    background: lightblue;
+    margin: auto;
+    max-width: mixins.$column-width-normal;
+
+    p.margin-value {
+      position: absolute;
+      top: 5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
 </style>

From ef76d67252e27a1acf184715649475b1f4ab34a9 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 29 May 2025 14:13:25 -0700
Subject: [PATCH 06/36] lint fix

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

diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index c0b47208..04325678 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -6,7 +6,7 @@
   import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
   const demoText =
-    "Adjust the window dimension to see what happens when `<div class=\'visibility-tracker\'>` comes into <a href=\'https://codepen.io/michellebarker/full/xxwLpRG\'>Internsection Observer's</a> view.";
+    "Adjust the window dimension to see what happens when `<div class='visibility-tracker'>` comes into <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Internsection Observer's</a> view.";
 
   const text =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

From 6858a8a86868bd766faa4b66a46a57bf023b7908 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 3 Jun 2025 15:13:56 -0700
Subject: [PATCH 07/36] fixes rootmargin and scroll event triggers

---
 src/components/Visible/Visible.svelte         | 43 +++++++++++--------
 .../Visible/demo/VisibleDemo.svelte           | 43 +++++++------------
 2 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 6582e4eb..1cd44968 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -45,8 +45,24 @@
   }: Props = $props();
 
   let visible = $state(false);
+  let visibleOnce = $state(false);
   let container: HTMLElement | undefined = $state(undefined);
 
+  function scrollHandler() {
+    // Only trigger if `visibleOnce` is false
+    if (container && !visibleOnce) {
+      const bcr = container.getBoundingClientRect();
+      visible =
+        bcr.bottom + bottom > 0 &&
+        bcr.right + right > 0 &&
+        bcr.top - top < window.innerHeight &&
+        bcr.left - left < window.innerWidth;
+
+      // If `once` is true, set `visibleOnce` to true once `visible` becomes true
+      if (once && visible) visibleOnce = true;
+    }
+  }
+
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
       const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
@@ -63,31 +79,24 @@
           threshold,
         }
       );
+
       if (container) observer.observe(container);
+      // Unobserve when the component is unmounted
       return () => {
         if (container) observer.unobserve(container);
       };
     }
-    function handler() {
-      if (container) {
-        const bcr = container.getBoundingClientRect();
-
-        visible =
-          bcr.bottom + bottom > 0 &&
-          bcr.right + right > 0 &&
-          bcr.top - top < window.innerHeight &&
-          bcr.left - left < window.innerWidth;
-      }
-      if (visible && once) {
-        window.removeEventListener('scroll', handler);
-      }
-    }
-    window.addEventListener('scroll', handler);
-    return () => window.removeEventListener('scroll', handler);
   });
 </script>
 
-<div class="visibility-tracker" bind:this={container}>
+<svelte:window onscroll={scrollHandler} />
+
+<div
+  class="visibility-tracker"
+  class:visible
+  class:not-visible={!visible}
+  bind:this={container}
+>
   {#if children}
     {@render children(visible)}
   {/if}
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index 04325678..919758c8 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -5,24 +5,28 @@
   import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
   import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
+  let top = 200;
+
   const demoText =
-    "Adjust the window dimension to see what happens when `<div class='visibility-tracker'>` comes into <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Internsection Observer's</a> view.";
+    'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';
+
+  let demoText2 = $derived(
+    `The top value for \`rootMargin\` is set to \`${top}px\` in this demo. Read about how \`rootMargin\` affects the <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Intersection Observer's behaviour here</a>.`
+  );
 
   const text =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
-
-  let top = 500;
 </script>
 
 <BodyText text={`**${demoText}**`} />
+
+<BodyText text={`**${demoText2}**`} />
+<BodyText {text} />
 <BodyText {text} />
 <BodyText {text} />
 <BodyText {text} />
 
-<!-- <div class="root-margin-demo" style="padding-top:{top}px;">
-  <p class="margin-value font-note font-medium">Root margin top: {top}px</p>
-</div> -->
-<Visible {top}>
+<Visible {top} once={false}>
   {#snippet children(visible)}
     {#if visible}
       <FeaturePhoto
@@ -31,29 +35,12 @@
         caption="Carcharodon carcharias - REUTERS"
       />
     {:else}
-      <Block>
-        <h2 class="not-visible">Not yet visible.</h2>
-      </Block>
+      <Block><h2>Not yet visible.</h2></Block>
     {/if}
   {/snippet}
 </Visible>
 <BodyText {text} />
 <BodyText {text} />
-
-<style lang="scss">
-  @use '../../../scss/mixins' as mixins;
-
-  .root-margin-demo {
-    position: relative;
-    background: lightblue;
-    margin: auto;
-    max-width: mixins.$column-width-normal;
-
-    p.margin-value {
-      position: absolute;
-      top: 5px;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-</style>
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />

From b17ce2ee4b210028b7deda0bf843583b548694c8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 11:51:14 -0700
Subject: [PATCH 08/36] gets rid of interaction observer

---
 src/components/Visible/Visible.svelte         | 33 +++----------------
 .../Visible/demo/VisibleDemo.svelte           |  2 +-
 2 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 1cd44968..4f008c19 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -1,6 +1,6 @@
 <!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
 
   interface Props {
     /**
@@ -29,8 +29,9 @@
      * Specify a pixel value.
      */
     right?: number;
-    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
-    threshold?: number;
+    /**
+     * A snippet that renders inside the component.
+     */
     children?: Snippet<[boolean]>;
   }
 
@@ -40,7 +41,6 @@
     bottom = 0,
     left = 0,
     right = 0,
-    threshold = 0,
     children,
   }: Props = $props();
 
@@ -62,31 +62,6 @@
       if (once && visible) visibleOnce = true;
     }
   }
-
-  onMount(() => {
-    if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          visible = entries[0].isIntersecting;
-          if (visible && once && container) {
-            observer.unobserve(container);
-          }
-        },
-        {
-          rootMargin,
-          threshold,
-        }
-      );
-
-      if (container) observer.observe(container);
-      // Unobserve when the component is unmounted
-      return () => {
-        if (container) observer.unobserve(container);
-      };
-    }
-  });
 </script>
 
 <svelte:window onscroll={scrollHandler} />
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index 919758c8..ca97581a 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -5,7 +5,7 @@
   import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
   import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
-  let top = 200;
+  let top = 100;
 
   const demoText =
     'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';

From a5006e18d0834b59a517e2ea0262fdd4f93ede20 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:17:51 -0700
Subject: [PATCH 09/36] stash

---
 src/components/Visible/Visible.svelte | 69 ++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 4f008c19..38e4ec75 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -1,6 +1,6 @@
 <!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
 <script lang="ts">
-  import { type Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
 
   interface Props {
     /**
@@ -29,9 +29,8 @@
      * Specify a pixel value.
      */
     right?: number;
-    /**
-     * A snippet that renders inside the component.
-     */
+    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
+    threshold?: number;
     children?: Snippet<[boolean]>;
   }
 
@@ -41,6 +40,7 @@
     bottom = 0,
     left = 0,
     right = 0,
+    threshold = 0,
     children,
   }: Props = $props();
 
@@ -48,23 +48,58 @@
   let visibleOnce = $state(false);
   let container: HTMLElement | undefined = $state(undefined);
 
-  function scrollHandler() {
-    // Only trigger if `visibleOnce` is false
-    if (container && !visibleOnce) {
-      const bcr = container.getBoundingClientRect();
-      visible =
-        bcr.bottom + bottom > 0 &&
-        bcr.right + right > 0 &&
-        bcr.top - top < window.innerHeight &&
-        bcr.left - left < window.innerWidth;
+  let observer: IntersectionObserver | undefined = $state(undefined);
 
-      // If `once` is true, set `visibleOnce` to true once `visible` becomes true
-      if (once && visible) visibleOnce = true;
+  // function scrollHandler() {
+  //   // Only trigger if `visibleOnce` is false
+  //   if (container && observer && !visibleOnce) {
+  //     const bcr = container.getBoundingClientRect();
+  //     visible =
+  //       bcr.bottom + bottom > 0 &&
+  //       bcr.right + right > 0 &&
+  //       bcr.top - top < window.innerHeight &&
+  //       bcr.left - left < window.innerWidth;
+
+  //     if (container) {
+  //       // console.log('Observing container:', observer);
+  //       observer.observe(container);
+  //     }
+
+  //     // If `once` is true, set `visibleOnce` to true once `visible` becomes true
+  //     if (once && visible) visibleOnce = true;
+  //   }
+  // }
+
+  onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          visible = entries[0].isIntersecting;
+          if (visible && once && container && observer) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+          threshold,
+        }
+      );
+
+      // Unobserve when the component is unmounted
+      return () => {
+        if (container && observer) observer.unobserve(container);
+      };
     }
-  }
+  });
+
+  $effect(() => {
+    console.log('visible:', visible);
+  });
 </script>
 
-<svelte:window onscroll={scrollHandler} />
+<!-- <svelte:window onscroll={scrollHandler} /> -->
 
 <div
   class="visibility-tracker"

From ff8c114526d59a54574fa603fbaa5939cd14eb7e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:38:01 -0700
Subject: [PATCH 10/36] gets rid of scroll event, makes root margin a string to
 allow unit specification

---
 src/components/Visible/Visible.svelte         | 81 +++++--------------
 .../Visible/demo/VisibleDemo.svelte           |  2 +-
 2 files changed, 19 insertions(+), 64 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 38e4ec75..d48a3be5 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -9,26 +9,14 @@
      * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
      */
     once?: boolean;
-    /**
-     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`.
-     * Specify a pixel value.
-     */
-    top?: number;
-    /**
-     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`.
-     * Specify a pixel value.
-     */
-    bottom?: number;
-    /**
-     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`.
-     * Specify a pixel value.
-     */
-    left?: number;
-    /**
-     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`.
-     * Specify a pixel value.
-     */
-    right?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Accepted units are `px` or `%`. */
+    top?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Accepted units are `px` or `%`. */
+    bottom?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Accepted units are `px` or `%`. */
+    left?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Accepted units are `px` or `%`. */
+    right?: string;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;
     children?: Snippet<[boolean]>;
@@ -36,48 +24,25 @@
 
   let {
     once = false,
-    top = 0,
-    bottom = 0,
-    left = 0,
-    right = 0,
+    top = '0px',
+    bottom = '0px',
+    left = '0px',
+    right = '0px',
     threshold = 0,
     children,
   }: Props = $props();
 
   let visible = $state(false);
-  let visibleOnce = $state(false);
   let container: HTMLElement | undefined = $state(undefined);
 
-  let observer: IntersectionObserver | undefined = $state(undefined);
-
-  // function scrollHandler() {
-  //   // Only trigger if `visibleOnce` is false
-  //   if (container && observer && !visibleOnce) {
-  //     const bcr = container.getBoundingClientRect();
-  //     visible =
-  //       bcr.bottom + bottom > 0 &&
-  //       bcr.right + right > 0 &&
-  //       bcr.top - top < window.innerHeight &&
-  //       bcr.left - left < window.innerWidth;
-
-  //     if (container) {
-  //       // console.log('Observing container:', observer);
-  //       observer.observe(container);
-  //     }
-
-  //     // If `once` is true, set `visibleOnce` to true once `visible` becomes true
-  //     if (once && visible) visibleOnce = true;
-  //   }
-  // }
-
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
+      const rootMargin = `${bottom} ${left} ${top} ${right}`;
 
       const observer = new IntersectionObserver(
         (entries) => {
           visible = entries[0].isIntersecting;
-          if (visible && once && container && observer) {
+          if (visible && once && container) {
             observer.unobserve(container);
           }
         },
@@ -86,27 +51,17 @@
           threshold,
         }
       );
-
-      // Unobserve when the component is unmounted
+      if (container) observer.observe(container);
       return () => {
-        if (container && observer) observer.unobserve(container);
+        if (container) observer.observe(container);
       };
     }
   });
 
-  $effect(() => {
-    console.log('visible:', visible);
-  });
+  $effect(() => console.log('visible', visible));
 </script>
 
-<!-- <svelte:window onscroll={scrollHandler} /> -->
-
-<div
-  class="visibility-tracker"
-  class:visible
-  class:not-visible={!visible}
-  bind:this={container}
->
+<div bind:this={container}>
   {#if children}
     {@render children(visible)}
   {/if}
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index ca97581a..02f65c77 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -5,7 +5,7 @@
   import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
   import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
-  let top = 100;
+  let top = '150px';
 
   const demoText =
     'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';

From b205d91f38594964b26a97d612d0f3ebdb866b57 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:39:27 -0700
Subject: [PATCH 11/36] tweak

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

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index d48a3be5..3017ca11 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -9,13 +9,13 @@
      * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
      */
     once?: boolean;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Accepted units are `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be `px` or `%`. */
     top?: string;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Accepted units are `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be `px` or `%`. */
     bottom?: string;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Accepted units are `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be `px` or `%`. */
     left?: string;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Accepted units are `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be `px` or `%`. */
     right?: string;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;

From 94ca201d9fa5f982a98448d09c42efa93458f47c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:39:53 -0700
Subject: [PATCH 12/36] deletes debugging console log

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

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 3017ca11..c274afe8 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -57,8 +57,6 @@
       };
     }
   });
-
-  $effect(() => console.log('visible', visible));
 </script>
 
 <div bind:this={container}>

From dc2b111837345051702495f303be5a293ca2d40c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:40:41 -0700
Subject: [PATCH 13/36] adds classes to container

---
 src/components/Visible/Visible.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index c274afe8..4e3a0e43 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -59,7 +59,12 @@
   });
 </script>
 
-<div bind:this={container}>
+<div
+  bind:this={container}
+  class="visibility-tracker"
+  class:visible
+  class:not-visible={!visible}
+>
   {#if children}
     {@render children(visible)}
   {/if}

From 199e9cc7ac597fe53fc8b2babf9f71fb67407053 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 12:43:11 -0700
Subject: [PATCH 14/36] adds docs on absolute lengths units for rootMargin

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

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 4e3a0e43..2eeda676 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -9,13 +9,13 @@
      * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
      */
     once?: boolean;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
     top?: string;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
     bottom?: string;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
     left?: string;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be `px` or `%`. */
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
     right?: string;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;

From 09a4d59150c36166abb5212368b830bf6c586bb8 Mon Sep 17 00:00:00 2001
From: Kuyoshbek Mekhmonov <Kuyoshbek.Mekhmonov@thomsonreuters.com>
Date: Wed, 25 Jun 2025 11:28:29 -0400
Subject: [PATCH 15/36] rm parsely

---
 src/components/Analytics/Analytics.svelte     |  5 +--
 src/components/Analytics/providers/index.ts   |  1 -
 src/components/Analytics/providers/parsely.ts | 32 -------------------
 src/globals.d.ts                              |  8 -----
 4 files changed, 1 insertion(+), 45 deletions(-)
 delete mode 100644 src/components/Analytics/providers/parsely.ts

diff --git a/src/components/Analytics/Analytics.svelte b/src/components/Analytics/Analytics.svelte
index e8b5ce14..7c85d2aa 100644
--- a/src/components/Analytics/Analytics.svelte
+++ b/src/components/Analytics/Analytics.svelte
@@ -3,13 +3,11 @@
 <script module>
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
-  import { registerPageview as registerParselyPageview } from './providers/parsely';
 
   /** Register virtual pageviews when using client-side routing in multipage applications. */
   function registerPageview() {
     registerChartbeatPageview();
     registerGAPageview();
-    registerParselyPageview();
   }
 
   export { registerPageview };
@@ -21,7 +19,7 @@
   }
 
   import { onMount } from 'svelte';
-  import { ga, chartbeat, parsely } from './providers';
+  import { ga, chartbeat } from './providers';
   interface Props {
     /**
      * Used to associate a page with its author(s) in Chartbeat.
@@ -34,6 +32,5 @@
   onMount(() => {
     ga();
     chartbeat(authors);
-    parsely();
   });
 </script>
diff --git a/src/components/Analytics/providers/index.ts b/src/components/Analytics/providers/index.ts
index 39815f08..9b2fdba9 100644
--- a/src/components/Analytics/providers/index.ts
+++ b/src/components/Analytics/providers/index.ts
@@ -1,3 +1,2 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
-export { default as parsely } from './parsely';
diff --git a/src/components/Analytics/providers/parsely.ts b/src/components/Analytics/providers/parsely.ts
deleted file mode 100644
index 9a49d9e6..00000000
--- a/src/components/Analytics/providers/parsely.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-const SITE_ID = 'reuters.com';
-
-const attachScript = () => {
-  const b = document.body;
-  const e = document.createElement('script');
-
-  e.id = 'parsely-cfg';
-  e.src = `//cdn.parsely.com/keys/${SITE_ID}/p.js`;
-  e.setAttribute('async', '');
-  e.setAttribute('defer', '');
-  b.appendChild(e);
-};
-
-export default () => {
-  window.PARSELY = window.PARSELY || {
-    autotrack: false,
-    onReady() {
-      window.PARSELY.updateDefaults({
-        data: {
-          is_logged_in: false,
-        },
-      });
-      window.PARSELY.beacon.trackPageView();
-    },
-  };
-  attachScript();
-};
-
-export const registerPageview = () => {
-  if (typeof window === 'undefined' || !window.PARSELY) return;
-  window.PARSELY.beacon.trackPageView();
-};
diff --git a/src/globals.d.ts b/src/globals.d.ts
index 95acb207..bd6dbb8b 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -21,14 +21,6 @@ declare global {
     };
     /** Graphics ads */
     graphicsAdQueue: any[];
-    /** Parsely */
-    PARSELY: {
-      onLoad: () => void;
-      beacon: {
-        trackPageView: () => void;
-      };
-      updateDefaults: (params: any) => void;
-    };
   }
 }
 

From f80e450017fc58a7bbb3fb394fd15d34b0e9343a Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 25 Jun 2025 16:56:10 +0100
Subject: [PATCH 16/36] docs(changeset): Removes Parsely page analytics

---
 .changeset/angry-words-fall.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/angry-words-fall.md

diff --git a/.changeset/angry-words-fall.md b/.changeset/angry-words-fall.md
new file mode 100644
index 00000000..3163bd81
--- /dev/null
+++ b/.changeset/angry-words-fall.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Removes Parsely page analytics

From 6998d45127e47d92372d7580f148d4a44d47eacd Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 25 Jun 2025 09:11:13 -0700
Subject: [PATCH 17/36] fix typo on unobserve

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

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 2eeda676..b95bcc63 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -53,7 +53,7 @@
       );
       if (container) observer.observe(container);
       return () => {
-        if (container) observer.observe(container);
+        if (container) observer.unobserve(container);
       };
     }
   });

From fc2372b9df2a7b76d9dcbad87531e9526ea4ba51 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 25 Jun 2025 09:12:33 -0700
Subject: [PATCH 18/36] fix demo typos

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

diff --git a/src/components/Visible/Visible.mdx b/src/components/Visible/Visible.mdx
index f6f38f4b..bb5d2bcd 100644
--- a/src/components/Visible/Visible.mdx
+++ b/src/components/Visible/Visible.mdx
@@ -19,8 +19,8 @@ By default, `visible` will switch between `false` and `true` whenever the elemen
   import { Visible } from '@reuters-graphics/graphics-components';
 </script>
 
-<!-- Optionally set your own `top`, `bottom`, `right` and `left` values with units -->
-<Visible top={{ value: 10, unit: 'px' }}>
+<!-- Optionally set your own `top`, `bottom`, `right` and `left` values with `px` or `%` units -->
+<Visible top="10px">
   {#snippet children(visible)}
     {#if visible}
       <p>Visible!</p>

From 7e3c5ed5ca47af1855fddd62b8aeda769323b693 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 25 Jun 2025 16:13:48 +0000
Subject: [PATCH 19/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/angry-words-fall.md b/.changeset/angry-words-fall.md
deleted file mode 100644
index 3163bd81..00000000
--- a/.changeset/angry-words-fall.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Removes Parsely page analytics
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94a008f5..b94c4866 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.7
+
+### Patch Changes
+
+- f80e450: Removes Parsely page analytics
+
 ## 3.0.6
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 66b73160..32fd4628 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From bdf391836c31aa00e7904df27c03d82b5a01ce7e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 25 Jun 2025 10:27:04 -0700
Subject: [PATCH 20/36] docs(changeset): Updates Visible to allow unit
 specification for top, bototm, right, left and adds a demo

---
 .changeset/gold-boats-dream.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-boats-dream.md

diff --git a/.changeset/gold-boats-dream.md b/.changeset/gold-boats-dream.md
new file mode 100644
index 00000000..5fc78dcc
--- /dev/null
+++ b/.changeset/gold-boats-dream.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Updates Visible to allow unit specification for top, bototm, right, left and adds a demo

From e46b9fba563e1cbf1ab75eb3914d0400fd78a4ee Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 25 Jun 2025 17:33:19 +0000
Subject: [PATCH 21/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/gold-boats-dream.md b/.changeset/gold-boats-dream.md
deleted file mode 100644
index 5fc78dcc..00000000
--- a/.changeset/gold-boats-dream.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Updates Visible to allow unit specification for top, bototm, right, left and adds a demo
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b94c4866..dd77c776 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.8
+
+### Patch Changes
+
+- bdf3918: Updates Visible to allow unit specification for top, bototm, right, left and adds a demo
+
 ## 3.0.7
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 32fd4628..dfc15de9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From 8d3e4b50eadb70a1c021615332ebff3b8630860c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 14 Jul 2025 10:20:05 -0400
Subject: [PATCH 22/36] renames Theme and CustomTheme types #326

---
 src/components/Theme/@types/component.ts | 4 ++--
 src/components/Theme/Theme.svelte        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
index 325faed0..74de2bdf 100644
--- a/src/components/Theme/@types/component.ts
+++ b/src/components/Theme/@types/component.ts
@@ -42,12 +42,12 @@ export interface CustomFont {
   size?: Partial<FontSize>;
 }
 
-export interface Theme {
+export interface ThemeConfig {
   colour: Colour;
   font: Font;
 }
 
-export interface CustomTheme {
+export interface CustomThemeConfig {
   colour?: Partial<Colour>;
   font?: Partial<CustomFont>;
   [customProperty: string]: unknown;
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index 002dfcb7..dbea6cb5 100644
--- a/src/components/Theme/Theme.svelte
+++ b/src/components/Theme/Theme.svelte
@@ -14,7 +14,7 @@
   import mergeThemes from './utils/merge.js';
 
   // Types
-  import type { CustomTheme, Theme } from './@types/component';
+  import type { CustomThemeConfig, ThemeConfig } from './@types/component';
   import type { Snippet } from 'svelte';
   type Base = 'light' | 'dark';
 
@@ -22,7 +22,7 @@
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme | Theme;
+    theme?: CustomThemeConfig | ThemeConfig;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't

From 18e49eb99cc0401a0b5a157b22353d3e0d892e81 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 14 Jul 2025 10:20:17 -0400
Subject: [PATCH 23/36] docs(changeset): renames Theme and CustomTheme types

---
 .changeset/hungry-tigers-mix.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hungry-tigers-mix.md

diff --git a/.changeset/hungry-tigers-mix.md b/.changeset/hungry-tigers-mix.md
new file mode 100644
index 00000000..7cf57661
--- /dev/null
+++ b/.changeset/hungry-tigers-mix.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+renames Theme and CustomTheme types

From b04435ebaa4cc58e2a96aa4540efa5f7990e13ad Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 14 Jul 2025 10:25:04 -0400
Subject: [PATCH 24/36] fixes exports to ThemeConfig, CustomThemeConfig in
 merge.ts

---
 src/components/Theme/utils/merge.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Theme/utils/merge.ts b/src/components/Theme/utils/merge.ts
index 8e0ebc48..7a90c237 100644
--- a/src/components/Theme/utils/merge.ts
+++ b/src/components/Theme/utils/merge.ts
@@ -1,4 +1,4 @@
-import type { Theme, CustomTheme } from '../@types/component';
+import type { ThemeConfig, CustomThemeConfig } from '../@types/component';
 
 function isObject(item: unknown): item is Record<string, unknown> {
   return item !== null && typeof item === 'object' && !Array.isArray(item);
@@ -9,7 +9,7 @@ function isObject(item: unknown): item is Record<string, unknown> {
  */
 export default function merge<T extends Record<string, unknown>>(
   target: T,
-  ...sources: (Theme | CustomTheme)[]
+  ...sources: (ThemeConfig | CustomThemeConfig)[]
 ): T {
   if (!sources.length) return target;
   const source = sources.shift();

From 52cbd12ee0460b9ede21c531754997ffb5bffa15 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 14 Jul 2025 10:29:47 -0400
Subject: [PATCH 25/36] renames to ThemeConfig in the themes/.js files

---
 src/components/Theme/themes/common.js | 2 +-
 src/components/Theme/themes/dark.js   | 2 +-
 src/components/Theme/themes/light.js  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js
index ee23e6d0..77bfb736 100644
--- a/src/components/Theme/themes/common.js
+++ b/src/components/Theme/themes/common.js
@@ -1,4 +1,4 @@
-/** @type {Omit<import('../@types/component').Theme, "colour">} */
+/** @type {Omit<import('../@types/component').ThemeConfig, "colour">} */
 /* Generated from
 https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.125&maxFontSize=21&maxWidth=1280&maxRatio=1.25&steps=xxs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=base&prefix=&decimals=2&useRems=on&remValue=16&previewFont=Noto+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=0
 */
diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js
index 96ce7be8..f5d6a334 100644
--- a/src/components/Theme/themes/dark.js
+++ b/src/components/Theme/themes/dark.js
@@ -1,6 +1,6 @@
 import common from './common.js';
 
-/** @type {import('../@types/component').Theme} */
+/** @type {import('../@types/component').ThemeConfig} */
 export default {
   ...common,
   colour: {
diff --git a/src/components/Theme/themes/light.js b/src/components/Theme/themes/light.js
index f7328d24..5749c7b3 100644
--- a/src/components/Theme/themes/light.js
+++ b/src/components/Theme/themes/light.js
@@ -1,6 +1,6 @@
 import common from './common.js';
 
-/** @type {import('../@types/component').Theme} */
+/** @type {import('../@types/component').ThemeConfig} */
 export default {
   ...common,
   colour: {

From 85e0ed92c4e6f52dff3c136d046135a8e8c95dbe Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 14 Jul 2025 14:36:00 +0000
Subject: [PATCH 26/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/hungry-tigers-mix.md b/.changeset/hungry-tigers-mix.md
deleted file mode 100644
index 7cf57661..00000000
--- a/.changeset/hungry-tigers-mix.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-renames Theme and CustomTheme types
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd77c776..a744e67d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.9
+
+### Patch Changes
+
+- 18e49eb: renames Theme and CustomTheme types
+
 ## 3.0.8
 
 ### Patch Changes
diff --git a/package.json b/package.json
index dfc15de9..eda7be56 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From a5818a4282bca54297a771a3fbb44a11df02d8a1 Mon Sep 17 00:00:00 2001
From: paulalexandrescuTR
 <52189864+paulalexandrescuTR@users.noreply.github.com>
Date: Tue, 15 Jul 2025 09:38:12 -0400
Subject: [PATCH 27/36] Updated oneTrustId from a test one to the actual
 production one

---
 src/components/AdSlot/adScripts/bootstrap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AdSlot/adScripts/bootstrap.ts b/src/components/AdSlot/adScripts/bootstrap.ts
index 420028a5..0ff6a51c 100644
--- a/src/components/AdSlot/adScripts/bootstrap.ts
+++ b/src/components/AdSlot/adScripts/bootstrap.ts
@@ -4,7 +4,7 @@ import Ias from './ias';
 
 const ONETRUST_LOGS = 'ot_logs';
 const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
-const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
+const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf';
 
 export const loadBootstrap = () => {
   (<any>window).freestar = (<any>window).freestar || {};

From cf7e5130bbe4587d3f1706a042ed0b54cffd34d1 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 15 Jul 2025 09:59:34 -0400
Subject: [PATCH 28/36] docs(changeset): Updated oneTrustId to production ID

---
 .changeset/warm-rocks-travel.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/warm-rocks-travel.md

diff --git a/.changeset/warm-rocks-travel.md b/.changeset/warm-rocks-travel.md
new file mode 100644
index 00000000..4ff921ae
--- /dev/null
+++ b/.changeset/warm-rocks-travel.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Updated oneTrustId to production ID

From 798c4b165847f8e2e26837b108abd08598e7372e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 15 Jul 2025 14:43:55 +0000
Subject: [PATCH 29/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/warm-rocks-travel.md b/.changeset/warm-rocks-travel.md
deleted file mode 100644
index 4ff921ae..00000000
--- a/.changeset/warm-rocks-travel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Updated oneTrustId to production ID
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a744e67d..1259d916 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.10
+
+### Patch Changes
+
+- cf7e513: Updated oneTrustId to production ID
+
 ## 3.0.9
 
 ### Patch Changes
diff --git a/package.json b/package.json
index eda7be56..89422182 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From f3d7896728928b57fa7148efcf0c10c6ebd6a0b6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 28 Jul 2025 14:30:08 -0400
Subject: [PATCH 30/36] fix typo for scroller prop from width to
 backgroundWidth

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

diff --git a/src/components/Scroller/Scroller.mdx b/src/components/Scroller/Scroller.mdx
index 54994565..a89be296 100644
--- a/src/components/Scroller/Scroller.mdx
+++ b/src/components/Scroller/Scroller.mdx
@@ -122,7 +122,7 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
   {#if block.type === 'ai-scroller'}
     <Scroller
       id={block.id}
-      backgroundWidth={block.width}
+      backgroundWidth={block.backgroundWidth}
       foregroundPosition={block.foregroundPosition}
       stackBackground={truthy(block.stackBackground)}
       steps={block.steps.map((step) => ({

From 5a0a5c3d9413de7e1c85a6097bff5e5d82b70eaa Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 28 Jul 2025 14:37:25 -0400
Subject: [PATCH 31/36] fix scroller bg class name to step-background from step

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

diff --git a/src/components/Scroller/Background.svelte b/src/components/Scroller/Background.svelte
index 6762b6bd..8a372018 100644
--- a/src/components/Scroller/Background.svelte
+++ b/src/components/Scroller/Background.svelte
@@ -25,7 +25,7 @@
 {#each steps as step, i}
   {#if showStep(i)}
     <div
-      class={`step step-${i + 1} w-full absolute`}
+      class={`step-background step-${i + 1} w-full absolute`}
       class:visible={isVisible(i)}
       class:invisible={!isVisible(i)}
     >

From 31caab267bdf8f63caebc49e3dec4bf9ebdb77e2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 28 Jul 2025 14:37:48 -0400
Subject: [PATCH 32/36] docs(changeset): Fix typos in Scroller

---
 .changeset/soft-jars-sin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/soft-jars-sin.md

diff --git a/.changeset/soft-jars-sin.md b/.changeset/soft-jars-sin.md
new file mode 100644
index 00000000..227ae687
--- /dev/null
+++ b/.changeset/soft-jars-sin.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Fix typos in Scroller

From 71a1a3deb62697a38ba869e872d86c48ff2bec7e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 28 Jul 2025 18:42:49 +0000
Subject: [PATCH 33/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/soft-jars-sin.md b/.changeset/soft-jars-sin.md
deleted file mode 100644
index 227ae687..00000000
--- a/.changeset/soft-jars-sin.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Fix typos in Scroller
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1259d916..5c8068c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.11
+
+### Patch Changes
+
+- 31caab2: Fix typos in Scroller
+
 ## 3.0.10
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 89422182..4de8f501 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

From 7367f79742fd429c9acee5f14c56e3c03c33eef9 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Tue, 5 Aug 2025 17:13:03 +0530
Subject: [PATCH 34/36] fixes sizing issue

---
 src/components/Framer/Framer.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Framer/Framer.svelte b/src/components/Framer/Framer.svelte
index 9359e624..4c7937e9 100644
--- a/src/components/Framer/Framer.svelte
+++ b/src/components/Framer/Framer.svelte
@@ -201,6 +201,7 @@
   }
 
   #frame-parent {
+    box-sizing: content-box;
     border: 1px solid #ddd;
     margin: 0 auto;
     width: var(--width);

From 771ccb4583bef0d6eb0b978b9f8eed889bd9ec27 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Tue, 5 Aug 2025 20:50:46 +0530
Subject: [PATCH 35/36] docs(changeset): Fixes sizing issue for Framer

---
 .changeset/few-coats-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/few-coats-happen.md

diff --git a/.changeset/few-coats-happen.md b/.changeset/few-coats-happen.md
new file mode 100644
index 00000000..df804c0b
--- /dev/null
+++ b/.changeset/few-coats-happen.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Fixes sizing issue for Framer

From 76b9f56d3252657cd4bd2d810451ad3b43fd9f94 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 5 Aug 2025 15:28:28 +0000
Subject: [PATCH 36/36] RELEASING: Releasing 1 package(s)

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

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

diff --git a/.changeset/few-coats-happen.md b/.changeset/few-coats-happen.md
deleted file mode 100644
index df804c0b..00000000
--- a/.changeset/few-coats-happen.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@reuters-graphics/graphics-components': patch
----
-
-Fixes sizing issue for Framer
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c8068c9..805b2cc8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @reuters-graphics/graphics-components
 
+## 3.0.12
+
+### Patch Changes
+
+- 771ccb4: Fixes sizing issue for Framer
+
 ## 3.0.11
 
 ### Patch Changes
diff --git a/package.json b/package.json
index 4de8f501..c69b4992 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",