From 305de15432730397b23f0c2061b73b48857af6a3 Mon Sep 17 00:00:00 2001
From: Akshar Patel <123344143+AksharP5@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:40:11 -0400
Subject: [PATCH] fix(catalog): sync tab labels with the sliding indicator
 (#3267)

* fix(catalog): sync tab labels with the sliding indicator

* fix(catalog): preserve tab contrast during indicator motion
---
 .../components/tabs-slide-indicator.mdx       | 82 ++++++++++++++-----
 .../components/tabs-slide-indicator.json      |  2 +-
 .../components/tabs-slide-indicator/demo.html | 68 +++++++++++----
 .../tabs-slide-indicator.html                 | 41 +++++++---
 4 files changed, 146 insertions(+), 47 deletions(-)

diff --git a/docs/catalog/components/tabs-slide-indicator.mdx b/docs/catalog/components/tabs-slide-indicator.mdx
index 640c7b3b1..86384d8a4 100644
--- a/docs/catalog/components/tabs-slide-indicator.mdx
+++ b/docs/catalog/components/tabs-slide-indicator.mdx
@@ -42,8 +42,8 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       commas. Two or more names rebuild the row, one name or none leaves the
       authored markup alone, since a single tab has nowhere to slide to.
 
-  On every default the result is identical to the original: three 86px tabs in
-  a light pill track, a near-black pill sliding from the first to the second.
+  With the defaults, this renders three 86px tabs in a light pill track. The
+  near-black pill and white active label move from the first tab to the second.
 -->
 
 <div
@@ -55,12 +55,14 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
   ]'
 >
-  <span class="indicator"></span><button>Plan</button><button>Debug</button><button>Ask</button>
+  <span class="indicator"></span><button style="--hf-tab-index: 0">Plan</button
+  ><button style="--hf-tab-index: 1">Debug</button><button style="--hf-tab-index: 2">Ask</button>
 </div>
 
 <style>
   .hf-transition-tabs-slide-indicator {
     --hf-tab-x: 0px;
+    --hf-tab-offset: calc(var(--hf-tab-x) * var(--hf-tab-step, 1));
     position: relative;
     display: inline-grid;
     grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
@@ -78,21 +80,39 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
     height: 36px;
     border-radius: var(--hf-tab-radius, 999px);
     background: var(--hf-tab-fill, #18181b);
-    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+    transform: translateX(var(--hf-tab-offset));
     box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
   }
   .hf-transition-tabs-slide-indicator button {
+    --hf-tab-highlight-start: clamp(
+      0px,
+      calc(var(--hf-tab-offset) - var(--hf-tab-index) * var(--hf-tab-width, 86px)),
+      var(--hf-tab-width, 86px)
+    );
+    --hf-tab-highlight-end: clamp(
+      0px,
+      calc(
+        var(--hf-tab-offset) + var(--hf-tab-width, 86px) - var(--hf-tab-index) *
+          var(--hf-tab-width, 86px)
+      ),
+      var(--hf-tab-width, 86px)
+    );
     position: relative;
     z-index: 1;
     height: 36px;
     border: 0;
-    background: transparent;
-    color: #71717a;
+    background-color: transparent;
+    background-image: linear-gradient(
+      to right,
+      #6f6f78 0 var(--hf-tab-highlight-start),
+      #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),
+      #6f6f78 var(--hf-tab-highlight-end) 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
     font-weight: 850;
   }
-  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
-    color: #fff;
-  }
 </style>
 
 <script>
@@ -150,6 +170,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
         for (var k = 0; k < labels.length; k += 1) {
           var button = document.createElement("button");
           button.textContent = labels[k];
+          button.style.setProperty("--hf-tab-index", String(k));
           roots[i].appendChild(button);
         }
         roots[i].style.setProperty("--hf-tab-count", String(labels.length));
@@ -160,7 +181,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-transition-tabs-slide-indicator .indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
+  tl.fromTo('.hf-transition-tabs-slide-indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
 -->
 ```
 
@@ -228,8 +249,8 @@ defaults, so this behaves exactly like the preview above until you change one:
       commas. Two or more names rebuild the row, one name or none leaves the
       authored markup alone, since a single tab has nowhere to slide to.
 
-  On every default the result is identical to the original: three 86px tabs in
-  a light pill track, a near-black pill sliding from the first to the second.
+  With the defaults, this renders three 86px tabs in a light pill track. The
+  near-black pill and white active label move from the first tab to the second.
 -->
 
 <div
@@ -241,12 +262,14 @@ defaults, so this behaves exactly like the preview above until you change one:
     { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
   ]'
 >
-  <span class="indicator"></span><button>Plan</button><button>Debug</button><button>Ask</button>
+  <span class="indicator"></span><button style="--hf-tab-index: 0">Plan</button
+  ><button style="--hf-tab-index: 1">Debug</button><button style="--hf-tab-index: 2">Ask</button>
 </div>
 
 <style>
   .hf-transition-tabs-slide-indicator {
     --hf-tab-x: 0px;
+    --hf-tab-offset: calc(var(--hf-tab-x) * var(--hf-tab-step, 1));
     position: relative;
     display: inline-grid;
     grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
@@ -264,21 +287,39 @@ defaults, so this behaves exactly like the preview above until you change one:
     height: 36px;
     border-radius: var(--hf-tab-radius, 999px);
     background: var(--hf-tab-fill, #18181b);
-    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+    transform: translateX(var(--hf-tab-offset));
     box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
   }
   .hf-transition-tabs-slide-indicator button {
+    --hf-tab-highlight-start: clamp(
+      0px,
+      calc(var(--hf-tab-offset) - var(--hf-tab-index) * var(--hf-tab-width, 86px)),
+      var(--hf-tab-width, 86px)
+    );
+    --hf-tab-highlight-end: clamp(
+      0px,
+      calc(
+        var(--hf-tab-offset) + var(--hf-tab-width, 86px) - var(--hf-tab-index) *
+          var(--hf-tab-width, 86px)
+      ),
+      var(--hf-tab-width, 86px)
+    );
     position: relative;
     z-index: 1;
     height: 36px;
     border: 0;
-    background: transparent;
-    color: #71717a;
+    background-color: transparent;
+    background-image: linear-gradient(
+      to right,
+      #6f6f78 0 var(--hf-tab-highlight-start),
+      #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),
+      #6f6f78 var(--hf-tab-highlight-end) 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
     font-weight: 850;
   }
-  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
-    color: #fff;
-  }
 </style>
 
 <script>
@@ -336,6 +377,7 @@ defaults, so this behaves exactly like the preview above until you change one:
         for (var k = 0; k < labels.length; k += 1) {
           var button = document.createElement("button");
           button.textContent = labels[k];
+          button.style.setProperty("--hf-tab-index", String(k));
           roots[i].appendChild(button);
         }
         roots[i].style.setProperty("--hf-tab-count", String(labels.length));
@@ -346,7 +388,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-transition-tabs-slide-indicator .indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
+  tl.fromTo('.hf-transition-tabs-slide-indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
 -->
 ```
 
diff --git a/docs/public/catalog/components/tabs-slide-indicator.json b/docs/public/catalog/components/tabs-slide-indicator.json
index 6d7543bc1..4f096784f 100644
--- a/docs/public/catalog/components/tabs-slide-indicator.json
+++ b/docs/public/catalog/components/tabs-slide-indicator.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Tabs Slide Indicator - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 760px;\n        min-height: 480px;\n        padding: 56px;\n        /* ponytail: scale wrapper only — GSAP targets .indicator inside, not this element */\n        transform: scale(3.5);\n      }\n      .hf-transition-tabs-slide-indicator {\n        --hf-tab-x: 0px;\n        position: relative;\n        display: inline-grid;\n        grid-template-columns: repeat(3, 86px);\n        padding: 4px;\n        border: 1px solid #e4e4e7;\n        border-radius: 999px;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-tabs-slide-indicator .indicator {\n        position: absolute;\n        top: 4px;\n        left: 4px;\n        width: 86px;\n        height: 36px;\n        border-radius: 999px;\n        background: #18181b;\n        transform: translateX(var(--hf-tab-x));\n        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);\n      }\n      .hf-transition-tabs-slide-indicator button {\n        position: relative;\n        z-index: 1;\n        height: 36px;\n        border: 0;\n        background: transparent;\n        color: #71717a;\n        font-weight: 600;\n      }\n      .hf-transition-tabs-slide-indicator button:nth-of-type(2) {\n        color: #fff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"tabs-slide-indicator-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-transition-tabs-slide-indicator\" data-composition-variables='[\n    { \"id\": \"accent\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Accent\", \"description\": \"Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.\", \"default\": \"ink\", \"options\": [{ \"value\": \"ink\", \"label\": \"Ink\" }, { \"value\": \"green\", \"label\": \"Green\" }, { \"value\": \"blue\", \"label\": \"Blue\" }, { \"value\": \"violet\", \"label\": \"Violet\" }] },\n    { \"id\": \"width\", \"type\": \"enum\", \"role\": \"layout\", \"label\": \"Tab width\", \"description\": \"Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.\", \"default\": \"standard\", \"options\": [{ \"value\": \"compact\", \"label\": \"Compact\" }, { \"value\": \"standard\", \"label\": \"Standard\" }, { \"value\": \"wide\", \"label\": \"Wide\" }] },\n    { \"id\": \"shape\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Shape\", \"description\": \"Corner radius of the track and the pill.\", \"default\": \"pill\", \"options\": [{ \"value\": \"pill\", \"label\": \"Pill\" }, { \"value\": \"rounded\", \"label\": \"Rounded\" }, { \"value\": \"square\", \"label\": \"Square\" }] },\n    { \"id\": \"labels\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Labels\", \"description\": \"The tab names, separated by commas. Two or more names rebuild the row.\", \"default\": \"Plan,Debug,Ask\" }\n  ]'>\n          <span class=\"indicator\"></span><button>Plan</button><button>Debug</button\n          ><button>Ask</button>\n        </div>\n      </div>\n      <script>\n  (function () {\n    \"use strict\";\n\n    var vars =\n      window.__hyperframes && window.__hyperframes.getVariables\n        ? window.__hyperframes.getVariables()\n        : {};\n\n    // Unrecognised overrides return to their declared defaults.\n    // The pill is the one accent-carrying element here, so the three chromatic\n    // options ride the composition's own tokens and fall back to ink.\n    var accents = {\n      ink: \"#18181b\",\n      green: \"var(--brand, #18181b)\",\n      blue: \"var(--accent, #18181b)\",\n      violet: \"var(--accent-2, #18181b)\",\n    };\n    var widths = { compact: 72, standard: 86, wide: 104 };\n    var shapes = { pill: \"999px\", rounded: \"12px\", square: \"4px\" };\n\n    function pick(table, value, fallback) {\n      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;\n    }\n\n    var accent = accents[pick(accents, vars.accent, \"ink\")];\n    var width = widths[pick(widths, vars.width, \"standard\")];\n    var radius = shapes[pick(shapes, vars.shape, \"pill\")];\n    var labels =\n      typeof vars.labels === \"string\"\n        ? vars.labels.split(\",\").map(function (part) {\n            return part.trim();\n          })\n        : [];\n    labels = labels.filter(function (part) {\n      return part.length > 0;\n    });\n\n    var roots = document.querySelectorAll(\".hf-transition-tabs-slide-indicator\");\n    for (var i = 0; i < roots.length; i += 1) {\n      roots[i].style.setProperty(\"--hf-tab-fill\", accent);\n      roots[i].style.setProperty(\"--hf-tab-width\", width + \"px\");\n      // The timeline slides the pill by one standard tab, so scale that slide\n      // to whatever a tab is actually worth here.\n      roots[i].style.setProperty(\"--hf-tab-step\", String(width / 86));\n      roots[i].style.setProperty(\"--hf-tab-radius\", radius);\n      // A single tab has nowhere to slide to, so it is left as authored.\n      if (labels.length > 1) {\n        var old = roots[i].querySelectorAll(\"button\");\n        for (var j = 0; j < old.length; j += 1) {\n          old[j].parentNode.removeChild(old[j]);\n        }\n        for (var k = 0; k < labels.length; k += 1) {\n          var button = document.createElement(\"button\");\n          button.textContent = labels[k];\n          roots[i].appendChild(button);\n        }\n        roots[i].style.setProperty(\"--hf-tab-count\", String(labels.length));\n      }\n    }\n  })();\n</script>\n<script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-transition-tabs-slide-indicator .indicator\",\n          { \"--hf-tab-x\": \"0px\" },\n          { \"--hf-tab-x\": \"86px\", duration: 0.42, ease: \"power3.inOut\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"tabs-slide-indicator-demo\"] = tl;\n      </script>\n    </div>\n  <style>\n  .hf-transition-tabs-slide-indicator {\n    --hf-tab-x: 0px;\n    position: relative;\n    display: inline-grid;\n    grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));\n    padding: 4px;\n    border: 1px solid #e4e4e7;\n    border-radius: var(--hf-tab-radius, 999px);\n    background: #f4f4f5;\n    font-family: Inter, system-ui, sans-serif;\n  }\n  .hf-transition-tabs-slide-indicator .indicator {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    width: var(--hf-tab-width, 86px);\n    height: 36px;\n    border-radius: var(--hf-tab-radius, 999px);\n    background: var(--hf-tab-fill, #18181b);\n    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));\n    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);\n  }\n  .hf-transition-tabs-slide-indicator button {\n    position: relative;\n    z-index: 1;\n    height: 36px;\n    border: 0;\n    background: transparent;\n    color: #71717a;\n    font-weight: 850;\n  }\n  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {\n    color: #fff;\n  }\n</style>\n</body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Tabs Slide Indicator - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 760px;\n        min-height: 480px;\n        padding: 56px;\n        /* ponytail: scale wrapper only — GSAP targets .indicator inside, not this element */\n        transform: scale(3.5);\n      }\n      .hf-transition-tabs-slide-indicator {\n        --hf-tab-x: 0px;\n        --hf-tab-offset: var(--hf-tab-x);\n        position: relative;\n        display: inline-grid;\n        grid-template-columns: repeat(3, 86px);\n        padding: 4px;\n        border: 1px solid #e4e4e7;\n        border-radius: 999px;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-tabs-slide-indicator .indicator {\n        position: absolute;\n        top: 4px;\n        left: 4px;\n        width: 86px;\n        height: 36px;\n        border-radius: 999px;\n        background: #18181b;\n        transform: translateX(var(--hf-tab-offset));\n        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);\n      }\n      .hf-transition-tabs-slide-indicator button {\n        --hf-tab-highlight-start: clamp(\n          0px,\n          calc(var(--hf-tab-offset) - var(--hf-tab-index) * 86px),\n          86px\n        );\n        --hf-tab-highlight-end: clamp(\n          0px,\n          calc(var(--hf-tab-offset) + 86px - var(--hf-tab-index) * 86px),\n          86px\n        );\n        position: relative;\n        z-index: 1;\n        height: 36px;\n        border: 0;\n        background-color: transparent;\n        background-image: linear-gradient(\n          to right,\n          #6f6f78 0 var(--hf-tab-highlight-start),\n          #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),\n          #6f6f78 var(--hf-tab-highlight-end) 100%\n        );\n        background-clip: text;\n        -webkit-background-clip: text;\n        color: transparent;\n        font-weight: 600;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"tabs-slide-indicator-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div\n          class=\"hf-transition-tabs-slide-indicator\"\n          data-composition-variables='[\n    { \"id\": \"accent\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Accent\", \"description\": \"Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.\", \"default\": \"ink\", \"options\": [{ \"value\": \"ink\", \"label\": \"Ink\" }, { \"value\": \"green\", \"label\": \"Green\" }, { \"value\": \"blue\", \"label\": \"Blue\" }, { \"value\": \"violet\", \"label\": \"Violet\" }] },\n    { \"id\": \"width\", \"type\": \"enum\", \"role\": \"layout\", \"label\": \"Tab width\", \"description\": \"Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.\", \"default\": \"standard\", \"options\": [{ \"value\": \"compact\", \"label\": \"Compact\" }, { \"value\": \"standard\", \"label\": \"Standard\" }, { \"value\": \"wide\", \"label\": \"Wide\" }] },\n    { \"id\": \"shape\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Shape\", \"description\": \"Corner radius of the track and the pill.\", \"default\": \"pill\", \"options\": [{ \"value\": \"pill\", \"label\": \"Pill\" }, { \"value\": \"rounded\", \"label\": \"Rounded\" }, { \"value\": \"square\", \"label\": \"Square\" }] },\n    { \"id\": \"labels\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Labels\", \"description\": \"The tab names, separated by commas. Two or more names rebuild the row.\", \"default\": \"Plan,Debug,Ask\" }\n  ]'\n        >\n          <span class=\"indicator\"></span><button style=\"--hf-tab-index: 0\">Plan</button\n          ><button style=\"--hf-tab-index: 1\">Debug</button\n          ><button style=\"--hf-tab-index: 2\">Ask</button>\n        </div>\n      </div>\n      <script>\n        (function () {\n          \"use strict\";\n\n          var vars =\n            window.__hyperframes && window.__hyperframes.getVariables\n              ? window.__hyperframes.getVariables()\n              : {};\n\n          // Unrecognised overrides return to their declared defaults.\n          // The pill is the one accent-carrying element here, so the three chromatic\n          // options ride the composition's own tokens and fall back to ink.\n          var accents = {\n            ink: \"#18181b\",\n            green: \"var(--brand, #18181b)\",\n            blue: \"var(--accent, #18181b)\",\n            violet: \"var(--accent-2, #18181b)\",\n          };\n          var widths = { compact: 72, standard: 86, wide: 104 };\n          var shapes = { pill: \"999px\", rounded: \"12px\", square: \"4px\" };\n\n          function pick(table, value, fallback) {\n            return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;\n          }\n\n          var accent = accents[pick(accents, vars.accent, \"ink\")];\n          var width = widths[pick(widths, vars.width, \"standard\")];\n          var radius = shapes[pick(shapes, vars.shape, \"pill\")];\n          var labels =\n            typeof vars.labels === \"string\"\n              ? vars.labels.split(\",\").map(function (part) {\n                  return part.trim();\n                })\n              : [];\n          labels = labels.filter(function (part) {\n            return part.length > 0;\n          });\n\n          var roots = document.querySelectorAll(\".hf-transition-tabs-slide-indicator\");\n          for (var i = 0; i < roots.length; i += 1) {\n            roots[i].style.setProperty(\"--hf-tab-fill\", accent);\n            roots[i].style.setProperty(\"--hf-tab-width\", width + \"px\");\n            // The timeline slides the pill by one standard tab, so scale that slide\n            // to whatever a tab is actually worth here.\n            roots[i].style.setProperty(\"--hf-tab-step\", String(width / 86));\n            roots[i].style.setProperty(\"--hf-tab-radius\", radius);\n            // A single tab has nowhere to slide to, so it is left as authored.\n            if (labels.length > 1) {\n              var old = roots[i].querySelectorAll(\"button\");\n              for (var j = 0; j < old.length; j += 1) {\n                old[j].parentNode.removeChild(old[j]);\n              }\n              for (var k = 0; k < labels.length; k += 1) {\n                var button = document.createElement(\"button\");\n                button.textContent = labels[k];\n                button.style.setProperty(\"--hf-tab-index\", String(k));\n                roots[i].appendChild(button);\n              }\n              roots[i].style.setProperty(\"--hf-tab-count\", String(labels.length));\n            }\n          }\n        })();\n      </script>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-transition-tabs-slide-indicator\",\n          { \"--hf-tab-x\": \"0px\" },\n          { \"--hf-tab-x\": \"86px\", duration: 0.42, ease: \"power3.inOut\" },\n          startTime,\n        );\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"tabs-slide-indicator-demo\"] = tl;\n      </script>\n    </div>\n    <style>\n      .hf-transition-tabs-slide-indicator {\n        --hf-tab-x: 0px;\n        --hf-tab-offset: calc(var(--hf-tab-x) * var(--hf-tab-step, 1));\n        position: relative;\n        display: inline-grid;\n        grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));\n        padding: 4px;\n        border: 1px solid #e4e4e7;\n        border-radius: var(--hf-tab-radius, 999px);\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-tabs-slide-indicator .indicator {\n        position: absolute;\n        top: 4px;\n        left: 4px;\n        width: var(--hf-tab-width, 86px);\n        height: 36px;\n        border-radius: var(--hf-tab-radius, 999px);\n        background: var(--hf-tab-fill, #18181b);\n        transform: translateX(var(--hf-tab-offset));\n        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);\n      }\n      .hf-transition-tabs-slide-indicator button {\n        --hf-tab-highlight-start: clamp(\n          0px,\n          calc(var(--hf-tab-offset) - var(--hf-tab-index) * var(--hf-tab-width, 86px)),\n          var(--hf-tab-width, 86px)\n        );\n        --hf-tab-highlight-end: clamp(\n          0px,\n          calc(\n            var(--hf-tab-offset) + var(--hf-tab-width, 86px) - var(--hf-tab-index) *\n              var(--hf-tab-width, 86px)\n          ),\n          var(--hf-tab-width, 86px)\n        );\n        position: relative;\n        z-index: 1;\n        height: 36px;\n        border: 0;\n        background-color: transparent;\n        background-image: linear-gradient(\n          to right,\n          #6f6f78 0 var(--hf-tab-highlight-start),\n          #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),\n          #6f6f78 var(--hf-tab-highlight-end) 100%\n        );\n        background-clip: text;\n        -webkit-background-clip: text;\n        color: transparent;\n        font-weight: 850;\n      }\n    </style>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/components/tabs-slide-indicator/demo.html b/registry/components/tabs-slide-indicator/demo.html
index 99c36446a..e97610f0a 100644
--- a/registry/components/tabs-slide-indicator/demo.html
+++ b/registry/components/tabs-slide-indicator/demo.html
@@ -35,6 +35,7 @@
       }
       .hf-transition-tabs-slide-indicator {
         --hf-tab-x: 0px;
+        --hf-tab-offset: var(--hf-tab-x);
         position: relative;
         display: inline-grid;
         grid-template-columns: repeat(3, 86px);
@@ -52,21 +53,36 @@
         height: 36px;
         border-radius: 999px;
         background: #18181b;
-        transform: translateX(var(--hf-tab-x));
+        transform: translateX(var(--hf-tab-offset));
         box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
       }
       .hf-transition-tabs-slide-indicator button {
+        --hf-tab-highlight-start: clamp(
+          0px,
+          calc(var(--hf-tab-offset) - var(--hf-tab-index) * 86px),
+          86px
+        );
+        --hf-tab-highlight-end: clamp(
+          0px,
+          calc(var(--hf-tab-offset) + 86px - var(--hf-tab-index) * 86px),
+          86px
+        );
         position: relative;
         z-index: 1;
         height: 36px;
         border: 0;
-        background: transparent;
-        color: #71717a;
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          #6f6f78 0 var(--hf-tab-highlight-start),
+          #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),
+          #6f6f78 var(--hf-tab-highlight-end) 100%
+        );
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
         font-weight: 600;
       }
-      .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
-        color: #fff;
-      }
     </style>
   </head>
   <body>
@@ -88,8 +104,9 @@
     { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
   ]'
         >
-          <span class="indicator"></span><button>Plan</button><button>Debug</button
-          ><button>Ask</button>
+          <span class="indicator"></span><button style="--hf-tab-index: 0">Plan</button
+          ><button style="--hf-tab-index: 1">Debug</button
+          ><button style="--hf-tab-index: 2">Ask</button>
         </div>
       </div>
       <script>
@@ -147,6 +164,7 @@
               for (var k = 0; k < labels.length; k += 1) {
                 var button = document.createElement("button");
                 button.textContent = labels[k];
+                button.style.setProperty("--hf-tab-index", String(k));
                 roots[i].appendChild(button);
               }
               roots[i].style.setProperty("--hf-tab-count", String(labels.length));
@@ -158,12 +176,11 @@
         const tl = gsap.timeline({ paused: true });
         const startTime = 0.5;
         tl.fromTo(
-          ".hf-transition-tabs-slide-indicator .indicator",
+          ".hf-transition-tabs-slide-indicator",
           { "--hf-tab-x": "0px" },
           { "--hf-tab-x": "86px", duration: 0.42, ease: "power3.inOut" },
           startTime,
         );
-        tl.set({}, {}, 5);
         window.__timelines = window.__timelines || {};
         window.__timelines["tabs-slide-indicator-demo"] = tl;
       </script>
@@ -171,6 +188,7 @@
     <style>
       .hf-transition-tabs-slide-indicator {
         --hf-tab-x: 0px;
+        --hf-tab-offset: calc(var(--hf-tab-x) * var(--hf-tab-step, 1));
         position: relative;
         display: inline-grid;
         grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
@@ -188,21 +206,39 @@
         height: 36px;
         border-radius: var(--hf-tab-radius, 999px);
         background: var(--hf-tab-fill, #18181b);
-        transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+        transform: translateX(var(--hf-tab-offset));
         box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
       }
       .hf-transition-tabs-slide-indicator button {
+        --hf-tab-highlight-start: clamp(
+          0px,
+          calc(var(--hf-tab-offset) - var(--hf-tab-index) * var(--hf-tab-width, 86px)),
+          var(--hf-tab-width, 86px)
+        );
+        --hf-tab-highlight-end: clamp(
+          0px,
+          calc(
+            var(--hf-tab-offset) + var(--hf-tab-width, 86px) - var(--hf-tab-index) *
+              var(--hf-tab-width, 86px)
+          ),
+          var(--hf-tab-width, 86px)
+        );
         position: relative;
         z-index: 1;
         height: 36px;
         border: 0;
-        background: transparent;
-        color: #71717a;
+        background-color: transparent;
+        background-image: linear-gradient(
+          to right,
+          #6f6f78 0 var(--hf-tab-highlight-start),
+          #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),
+          #6f6f78 var(--hf-tab-highlight-end) 100%
+        );
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
         font-weight: 850;
       }
-      .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
-        color: #fff;
-      }
     </style>
   </body>
 </html>
diff --git a/registry/components/tabs-slide-indicator/tabs-slide-indicator.html b/registry/components/tabs-slide-indicator/tabs-slide-indicator.html
index d472843d4..b843abe40 100644
--- a/registry/components/tabs-slide-indicator/tabs-slide-indicator.html
+++ b/registry/components/tabs-slide-indicator/tabs-slide-indicator.html
@@ -26,8 +26,8 @@
       commas. Two or more names rebuild the row, one name or none leaves the
       authored markup alone, since a single tab has nowhere to slide to.
 
-  On every default the result is identical to the original: three 86px tabs in
-  a light pill track, a near-black pill sliding from the first to the second.
+  With the defaults, this renders three 86px tabs in a light pill track. The
+  near-black pill and white active label move from the first tab to the second.
 -->
 
 <div
@@ -39,12 +39,14 @@
     { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
   ]'
 >
-  <span class="indicator"></span><button>Plan</button><button>Debug</button><button>Ask</button>
+  <span class="indicator"></span><button style="--hf-tab-index: 0">Plan</button
+  ><button style="--hf-tab-index: 1">Debug</button><button style="--hf-tab-index: 2">Ask</button>
 </div>
 
 <style>
   .hf-transition-tabs-slide-indicator {
     --hf-tab-x: 0px;
+    --hf-tab-offset: calc(var(--hf-tab-x) * var(--hf-tab-step, 1));
     position: relative;
     display: inline-grid;
     grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
@@ -62,21 +64,39 @@
     height: 36px;
     border-radius: var(--hf-tab-radius, 999px);
     background: var(--hf-tab-fill, #18181b);
-    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+    transform: translateX(var(--hf-tab-offset));
     box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
   }
   .hf-transition-tabs-slide-indicator button {
+    --hf-tab-highlight-start: clamp(
+      0px,
+      calc(var(--hf-tab-offset) - var(--hf-tab-index) * var(--hf-tab-width, 86px)),
+      var(--hf-tab-width, 86px)
+    );
+    --hf-tab-highlight-end: clamp(
+      0px,
+      calc(
+        var(--hf-tab-offset) + var(--hf-tab-width, 86px) - var(--hf-tab-index) *
+          var(--hf-tab-width, 86px)
+      ),
+      var(--hf-tab-width, 86px)
+    );
     position: relative;
     z-index: 1;
     height: 36px;
     border: 0;
-    background: transparent;
-    color: #71717a;
+    background-color: transparent;
+    background-image: linear-gradient(
+      to right,
+      #6f6f78 0 var(--hf-tab-highlight-start),
+      #fff var(--hf-tab-highlight-start) var(--hf-tab-highlight-end),
+      #6f6f78 var(--hf-tab-highlight-end) 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
     font-weight: 850;
   }
-  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
-    color: #fff;
-  }
 </style>
 
 <script>
@@ -134,6 +154,7 @@
         for (var k = 0; k < labels.length; k += 1) {
           var button = document.createElement("button");
           button.textContent = labels[k];
+          button.style.setProperty("--hf-tab-index", String(k));
           roots[i].appendChild(button);
         }
         roots[i].style.setProperty("--hf-tab-count", String(labels.length));
@@ -144,5 +165,5 @@
 
 <!--
   Timeline integration:
-  tl.fromTo('.hf-transition-tabs-slide-indicator .indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
+  tl.fromTo('.hf-transition-tabs-slide-indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
 -->