diff --git a/docs/public/catalog/components/tabs-slide-indicator.json b/docs/public/catalog/components/tabs-slide-indicator.json
index f6a0c7c735..6fafa47652 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\">\n          <span class=\"indicator\"></span><button>Plan</button><button>Debug</button\n          ><button>Ask</button>\n        </div>\n      </div>\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  </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        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: #6f6f78;\n        font-weight: 600;\n      }\n      .hf-transition-tabs-slide-indicator button:nth-of-type(1) {\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\">\n          <span class=\"indicator\"></span><button>Plan</button><button>Debug</button\n          ><button>Ask</button>\n        </div>\n      </div>\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.to(\n          \".hf-transition-tabs-slide-indicator button:nth-of-type(1)\",\n          { color: \"#6f6f78\", duration: 0.42, ease: \"power3.inOut\" },\n          startTime,\n        );\n        tl.to(\n          \".hf-transition-tabs-slide-indicator button:nth-of-type(2)\",\n          { color: \"#fff\", 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  </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 88effc1d48..4aed2e009e 100644
--- a/registry/components/tabs-slide-indicator/demo.html
+++ b/registry/components/tabs-slide-indicator/demo.html
@@ -61,10 +61,10 @@
         height: 36px;
         border: 0;
         background: transparent;
-        color: #71717a;
+        color: #6f6f78;
         font-weight: 600;
       }
-      .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+      .hf-transition-tabs-slide-indicator button:nth-of-type(1) {
         color: #fff;
       }
     </style>
@@ -93,7 +93,16 @@
           { "--hf-tab-x": "86px", duration: 0.42, ease: "power3.inOut" },
           startTime,
         );
-        tl.set({}, {}, 5);
+        tl.to(
+          ".hf-transition-tabs-slide-indicator button:nth-of-type(1)",
+          { color: "#6f6f78", duration: 0.42, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-tabs-slide-indicator button:nth-of-type(2)",
+          { color: "#fff", duration: 0.42, ease: "power3.inOut" },
+          startTime,
+        );
         window.__timelines = window.__timelines || {};
         window.__timelines["tabs-slide-indicator-demo"] = tl;
       </script>
diff --git a/registry/components/tabs-slide-indicator/tabs-slide-indicator.html b/registry/components/tabs-slide-indicator/tabs-slide-indicator.html
index d472843d4f..6062d8a83d 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
@@ -71,10 +71,10 @@
     height: 36px;
     border: 0;
     background: transparent;
-    color: #71717a;
+    color: #6f6f78;
     font-weight: 850;
   }
-  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+  .hf-transition-tabs-slide-indicator button:nth-of-type(1) {
     color: #fff;
   }
 </style>
@@ -145,4 +145,6 @@
 <!--
   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.to('.hf-transition-tabs-slide-indicator button:nth-of-type(1)', { color: '#6f6f78', duration: 0.42, ease: 'power3.inOut' }, startTime);
+  tl.to('.hf-transition-tabs-slide-indicator button:nth-of-type(2)', { color: '#fff', duration: 0.42, ease: 'power3.inOut' }, startTime);
 -->
