From 4f5e80f9554cffbbc9eae04c0710ffe70443b453 Mon Sep 17 00:00:00 2001 From: Akshar Patel Date: Thu, 13 Aug 2026 18:33:05 -0400 Subject: [PATCH] fix(catalog): sync tab labels with the sliding indicator --- .../catalog/components/tabs-slide-indicator.json | 2 +- .../components/tabs-slide-indicator/demo.html | 15 ++++++++++++--- .../tabs-slide-indicator.html | 10 ++++++---- 3 files changed, 19 insertions(+), 8 deletions(-) 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":"\n\n \n \n \n Tabs Slide Indicator - Demo\n \n \n \n \n \n
\n
\n \n
\n
\n \n \n \n\n"} \ No newline at end of file +{"html":"\n\n \n \n \n Tabs Slide Indicator - Demo\n \n \n \n \n \n
\n
\n \n
\n
\n \n \n \n\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; } @@ -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; 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. -->
@@ -145,4 +145,6 @@