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

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

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

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

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

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

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

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

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

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

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

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