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