From 8335994024e33b2905f40aa1820eedbfa51ebe9e Mon Sep 17 00:00:00 2001
From: Yu Yu <yu.y516899@gmail.com>
Date: Mon, 14 Sep 2026 15:55:35 +0200
Subject: [PATCH 1/4] feat: Add travelling active-tab indicator for Tabs in One
 Theme

---
 src/tabs/tab-header-bar.scss | 47 ++++++++++++++++++++++++++++++++++++
 src/tabs/tab-header-bar.tsx  | 46 ++++++++++++++++++++++++++++++++++-
 2 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index 1e569ec770..44e7db8975 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -7,6 +7,7 @@
 @use '../internal/styles//foundation' as foundation;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/utils/theming' as theming;
 
 $separator-color: awsui.$color-border-tabs-divider;
 $label-horizontal-spacing: awsui.$space-xs;
@@ -161,6 +162,52 @@ $label-horizontal-spacing: awsui.$space-xs;
       }
     }
   }
+
+  @include theming.expressive-motion-only {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.tabs-active-indicator {
+  @include theming.expressive-motion-only {
+    position: absolute;
+    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
+    inset-inline-start: 0;
+    inline-size: 1px;
+    block-size: var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width);
+    border-start-start-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    border-start-end-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    border-end-start-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    border-end-end-radius: var(
+      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+      awsui.$border-radius-tabs-focus-ring
+    );
+    background: var(#{custom-props.$styleTabsActiveIndicatorColor}, awsui.$color-border-tabs-underline);
+    transform-origin: left center;
+    transform: translateX(var(--awsui-internal-style-tabs-active-indicator-offset, 0))
+      scaleX(var(--awsui-internal-style-tabs-active-indicator-scale, 0));
+    opacity: var(--awsui-internal-style-tabs-active-indicator-opacity, 0);
+    pointer-events: none;
+  }
+
+  @include theming.expressive-motion-only {
+    @include styles.with-motion {
+      transition:
+        transform awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c,
+        opacity awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c;
+    }
+  }
 }
 
 .tabs-tab:not(:last-child) {
diff --git a/src/tabs/tab-header-bar.tsx b/src/tabs/tab-header-bar.tsx
index c7e2de6d41..875afd39d0 100644
--- a/src/tabs/tab-header-bar.tsx
+++ b/src/tabs/tab-header-bar.tsx
@@ -20,7 +20,7 @@ import { getAllFocusables } from '../internal/components/focus-lock/utils';
 import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import useHiddenDescription from '../internal/hooks/use-hidden-description';
 import { usePrevious } from '../internal/hooks/use-previous';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useOneTheme, useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
 import { isHTMLElement } from '../internal/utils/dom';
@@ -107,6 +107,10 @@ export function TabHeaderBar({
   const i18n = useInternalI18n('tabs');
 
   const isVisualRefresh = useVisualRefresh();
+  const isOneTheme = useOneTheme();
+
+  const activeIndicatorRef = useRef<HTMLSpanElement>(null);
+  const indicatorMeasuredRef = useRef(false);
 
   const containerObjectRef = useRef<HTMLDivElement>(null);
   const documentRef = useRef<null | Document>(typeof document !== 'undefined' ? document : null);
@@ -196,6 +200,43 @@ export function TabHeaderBar({
     }
   }, [activeTabId]);
 
+  useEffect(() => {
+    if (!isOneTheme) {
+      return;
+    }
+    const indicator = activeIndicatorRef.current;
+    const list = headerBarRef.current;
+    if (!indicator || !list) {
+      return;
+    }
+    const activeTabElement = activeTabId ? tabRefs.current.get(activeTabId) : undefined;
+    if (!activeTabElement || (activeTabId && tabs.find(tab => tab.id === activeTabId)?.disabled)) {
+      indicator.style.setProperty('--awsui-internal-style-tabs-active-indicator-opacity', '0');
+      return;
+    }
+
+    const offset = activeTabElement.offsetLeft;
+    const width = activeTabElement.offsetWidth;
+
+    const apply = () => {
+      indicator.style.setProperty('--awsui-internal-style-tabs-active-indicator-offset', `${offset}px`);
+      indicator.style.setProperty('--awsui-internal-style-tabs-active-indicator-scale', `${width}`);
+      indicator.style.setProperty('--awsui-internal-style-tabs-active-indicator-opacity', '1');
+    };
+
+    if (!indicatorMeasuredRef.current) {
+      const previousTransition = indicator.style.transition;
+      indicator.style.transition = 'none';
+      apply();
+
+      void indicator.offsetWidth;
+      indicator.style.transition = previousTransition;
+      indicatorMeasuredRef.current = true;
+    } else {
+      apply();
+    }
+  }, [isOneTheme, activeTabId, widthChange, tabs]);
+
   const onScroll = () => {
     if (headerBarRef.current) {
       setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));
@@ -364,6 +405,9 @@ export function TabHeaderBar({
             onFocus={onFocus}
             onBlur={onBlur}
           >
+            {isOneTheme && (
+              <span className={styles['tabs-active-indicator']} ref={activeIndicatorRef} aria-hidden="true" />
+            )}
             {tabs.map(renderTabHeader)}
           </TabList>
         </SingleTabStopNavigationProvider>

From ace25f3b88ba6ac6cdabf6bc82fff42ecbdd777c Mon Sep 17 00:00:00 2001
From: Yu Yu <yu.y516899@gmail.com>
Date: Mon, 14 Sep 2026 15:55:35 +0200
Subject: [PATCH 2/4] feat: Add travelling active-tab indicator for Tabs in One
 Theme

---
 src/tabs/tab-header-bar.scss | 69 +++++++++++++++++-------------------
 src/tabs/tab-header-bar.tsx  | 22 ++++++------
 2 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index 44e7db8975..fc467e379c 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -126,40 +126,40 @@ $label-horizontal-spacing: awsui.$space-xs;
   }
 }
 
-.tabs-tab-header-container:not(.tabs-tab-disabled) {
-  // This is the underline for the currently selected tab.
-  &:after {
-    content: '';
-    position: absolute;
-    inset-inline-start: 0;
-    inline-size: calc(100% - 1px);
-    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
-    block-size: var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width);
-    border-start-start-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    border-start-end-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    border-end-start-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    border-end-end-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    background: var(#{custom-props.$styleTabsActiveIndicatorColor}, awsui.$color-border-tabs-underline);
-    opacity: 0;
-  }
+.tabs-active-indicator {
+  position: absolute;
+  inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
+  inset-inline-start: 0;
+  inline-size: 1px;
+  block-size: var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width);
+  border-start-start-radius: var(
+    #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+    awsui.$border-radius-tabs-focus-ring
+  );
+  border-start-end-radius: var(
+    #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+    awsui.$border-radius-tabs-focus-ring
+  );
+  border-end-start-radius: var(
+    #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+    awsui.$border-radius-tabs-focus-ring
+  );
+  border-end-end-radius: var(
+    #{custom-props.$styleTabsActiveIndicatorBorderRadius},
+    awsui.$border-radius-tabs-focus-ring
+  );
+  background: var(#{custom-props.$styleTabsActiveIndicatorColor}, awsui.$color-border-tabs-underline);
+  transform-origin: left center;
+  transform: translateX(var(--awsui-internal-style-tabs-active-indicator-offset, 0))
+    scaleX(var(--awsui-internal-style-tabs-active-indicator-scale, 0));
+  opacity: var(--awsui-internal-style-tabs-active-indicator-opacity, 0);
+  pointer-events: none;
 
-  &.refresh {
-    &:after {
-      @include styles.with-motion {
-        transition: opacity awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-c;
-      }
+  @include theming.expressive-motion-only {
+    @include styles.with-motion {
+      transition:
+        transform awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c,
+        opacity awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c;
     }
   }
 
@@ -325,9 +325,6 @@ $label-horizontal-spacing: awsui.$space-xs;
   color: var(#{custom-props.$styleColorActive}, awsui.$color-text-accent);
   border-color: var(#{custom-props.$styleBorderColorActive}, transparent);
   background-color: var(#{custom-props.$styleBackgroundActive}, transparent);
-  &:after {
-    opacity: 1;
-  }
 }
 
 .tabs-header-with-divider {
diff --git a/src/tabs/tab-header-bar.tsx b/src/tabs/tab-header-bar.tsx
index 875afd39d0..e94e058353 100644
--- a/src/tabs/tab-header-bar.tsx
+++ b/src/tabs/tab-header-bar.tsx
@@ -107,7 +107,6 @@ export function TabHeaderBar({
   const i18n = useInternalI18n('tabs');
 
   const isVisualRefresh = useVisualRefresh();
-  const isOneTheme = useOneTheme();
 
   const activeIndicatorRef = useRef<HTMLSpanElement>(null);
   const indicatorMeasuredRef = useRef(false);
@@ -201,9 +200,6 @@ export function TabHeaderBar({
   }, [activeTabId]);
 
   useEffect(() => {
-    if (!isOneTheme) {
-      return;
-    }
     const indicator = activeIndicatorRef.current;
     const list = headerBarRef.current;
     if (!indicator || !list) {
@@ -215,8 +211,16 @@ export function TabHeaderBar({
       return;
     }
 
-    const offset = activeTabElement.offsetLeft;
-    const width = activeTabElement.offsetWidth;
+    // Measure the tab header container the underline used to be attached to, so the
+    // indicator's width and position match the previous per-tab `::after` geometry
+    // (which was `calc(100% - 1px)` of that element). Falls back to the tab element.
+    const headerContainer =
+      activeTabElement.querySelector<HTMLElement>(`.${styles['tabs-tab-header-container']}`) ??
+      activeTabElement.closest<HTMLElement>(`.${styles['tabs-tab-header-container']}`) ??
+      activeTabElement;
+
+    const offset = headerContainer.offsetLeft;
+    const width = headerContainer.offsetWidth - 1;
 
     const apply = () => {
       indicator.style.setProperty('--awsui-internal-style-tabs-active-indicator-offset', `${offset}px`);
@@ -235,7 +239,7 @@ export function TabHeaderBar({
     } else {
       apply();
     }
-  }, [isOneTheme, activeTabId, widthChange, tabs]);
+  }, [activeTabId, widthChange, tabs]);
 
   const onScroll = () => {
     if (headerBarRef.current) {
@@ -405,9 +409,7 @@ export function TabHeaderBar({
             onFocus={onFocus}
             onBlur={onBlur}
           >
-            {isOneTheme && (
-              <span className={styles['tabs-active-indicator']} ref={activeIndicatorRef} aria-hidden="true" />
-            )}
+            <span className={styles['tabs-active-indicator']} ref={activeIndicatorRef} aria-hidden="true" />
             {tabs.map(renderTabHeader)}
           </TabList>
         </SingleTabStopNavigationProvider>

From 5bcf7b11e2a760d2f70eabb3f27d2dc1dad8442b Mon Sep 17 00:00:00 2001
From: Yu Yu <yu.y516899@gmail.com>
Date: Tue, 15 Sep 2026 11:49:31 +0200
Subject: [PATCH 3/4] test: Add unit tests for the shared active-tab indicator

---
 src/tabs/__tests__/tabs.test.tsx | 40 +++++++++++++++++++++++++
 src/tabs/tab-header-bar.scss     | 51 ++------------------------------
 src/tabs/tab-header-bar.tsx      |  7 ++---
 3 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/src/tabs/__tests__/tabs.test.tsx b/src/tabs/__tests__/tabs.test.tsx
index 907a1b2e7e..be342a17b8 100644
--- a/src/tabs/__tests__/tabs.test.tsx
+++ b/src/tabs/__tests__/tabs.test.tsx
@@ -1412,3 +1412,43 @@ describe('Tabs', () => {
     expect(wrapper.findActions()!.getElement()).toHaveTextContent('Actions content');
   });
 });
+
+describe('active-tab indicator', () => {
+  function findIndicator(container: HTMLElement) {
+    return container.querySelector(`.${styles['tabs-active-indicator']}`) as HTMLElement | null;
+  }
+  function indicatorOpacity(container: HTMLElement) {
+    return findIndicator(container)?.style.getPropertyValue('--awsui-internal-style-tabs-active-indicator-opacity');
+  }
+
+  test('renders a single shared indicator', () => {
+    const { container } = renderTabs(<Tabs tabs={defaultTabs} activeTabId="first" onChange={() => {}} />);
+    expect(container.querySelectorAll(`.${styles['tabs-active-indicator']}`)).toHaveLength(1);
+  });
+
+  test('positions the indicator over the active tab', () => {
+    const { container } = renderTabs(<Tabs tabs={defaultTabs} activeTabId="first" onChange={() => {}} />);
+    const indicator = findIndicator(container)!;
+    expect(indicator).not.toBeNull();
+    // The measuring effect sets the offset/scale custom properties and shows the indicator.
+    expect(indicator.style.getPropertyValue('--awsui-internal-style-tabs-active-indicator-offset')).not.toBe('');
+    expect(indicator.style.getPropertyValue('--awsui-internal-style-tabs-active-indicator-scale')).not.toBe('');
+    expect(indicatorOpacity(container)).toBe('1');
+  });
+
+  test('repositions the indicator when the active tab changes', () => {
+    function Wrapper() {
+      const [activeTabId, setActiveTabId] = useState('first');
+      return <Tabs tabs={defaultTabs} activeTabId={activeTabId} onChange={e => setActiveTabId(e.detail.activeTabId)} />;
+    }
+    const { container, wrapper } = renderTabs(<Wrapper />);
+    wrapper.findTabLinkById('second')!.click();
+    expect(indicatorOpacity(container)).toBe('1');
+  });
+
+  test('hides the indicator when the active tab is disabled', () => {
+    // 'third' is disabled in defaultTabs.
+    const { container } = renderTabs(<Tabs tabs={defaultTabs} activeTabId="third" onChange={() => {}} />);
+    expect(indicatorOpacity(container)).toBe('0');
+  });
+});
diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index fc467e379c..9d19e0c520 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -162,55 +162,9 @@ $label-horizontal-spacing: awsui.$space-xs;
         opacity awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c;
     }
   }
-
-  @include theming.expressive-motion-only {
-    &:after {
-      display: none;
-    }
-  }
-}
-
-.tabs-active-indicator {
-  @include theming.expressive-motion-only {
-    position: absolute;
-    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
-    inset-inline-start: 0;
-    inline-size: 1px;
-    block-size: var(#{custom-props.$styleTabsActiveIndicatorWidth}, awsui.$border-active-width);
-    border-start-start-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    border-start-end-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    border-end-start-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    border-end-end-radius: var(
-      #{custom-props.$styleTabsActiveIndicatorBorderRadius},
-      awsui.$border-radius-tabs-focus-ring
-    );
-    background: var(#{custom-props.$styleTabsActiveIndicatorColor}, awsui.$color-border-tabs-underline);
-    transform-origin: left center;
-    transform: translateX(var(--awsui-internal-style-tabs-active-indicator-offset, 0))
-      scaleX(var(--awsui-internal-style-tabs-active-indicator-scale, 0));
-    opacity: var(--awsui-internal-style-tabs-active-indicator-opacity, 0);
-    pointer-events: none;
-  }
-
-  @include theming.expressive-motion-only {
-    @include styles.with-motion {
-      transition:
-        transform awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c,
-        opacity awsui.$motion-duration-complex awsui.$motion-easing-refresh-only-c;
-    }
-  }
 }
 
-.tabs-tab:not(:last-child) {
+.tabs-tab:not(:nth-last-child(2)) {
   & > .tabs-tab-header-container {
     margin-inline-end: calc(-1 * #{awsui.$border-divider-section-width});
     // This is the divider for the tab
@@ -301,8 +255,7 @@ $label-horizontal-spacing: awsui.$space-xs;
   }
 }
 
-// Remediate focus shadow
-.tabs-tab:last-child {
+.tabs-tab:nth-last-child(2) {
   margin-inline-end: 1px;
   scroll-margin-inline-end: 1px;
   & > .tabs-tab-header-container {
diff --git a/src/tabs/tab-header-bar.tsx b/src/tabs/tab-header-bar.tsx
index e94e058353..77e1ca4410 100644
--- a/src/tabs/tab-header-bar.tsx
+++ b/src/tabs/tab-header-bar.tsx
@@ -20,7 +20,7 @@ import { getAllFocusables } from '../internal/components/focus-lock/utils';
 import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import useHiddenDescription from '../internal/hooks/use-hidden-description';
 import { usePrevious } from '../internal/hooks/use-previous';
-import { useOneTheme, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
 import { isHTMLElement } from '../internal/utils/dom';
@@ -211,9 +211,6 @@ export function TabHeaderBar({
       return;
     }
 
-    // Measure the tab header container the underline used to be attached to, so the
-    // indicator's width and position match the previous per-tab `::after` geometry
-    // (which was `calc(100% - 1px)` of that element). Falls back to the tab element.
     const headerContainer =
       activeTabElement.querySelector<HTMLElement>(`.${styles['tabs-tab-header-container']}`) ??
       activeTabElement.closest<HTMLElement>(`.${styles['tabs-tab-header-container']}`) ??
@@ -409,8 +406,8 @@ export function TabHeaderBar({
             onFocus={onFocus}
             onBlur={onBlur}
           >
-            <span className={styles['tabs-active-indicator']} ref={activeIndicatorRef} aria-hidden="true" />
             {tabs.map(renderTabHeader)}
+            <span className={styles['tabs-active-indicator']} ref={activeIndicatorRef} aria-hidden="true" />
           </TabList>
         </SingleTabStopNavigationProvider>
         {horizontalOverflow && (

From 0abec1f9b6f946a35efc8bdcb89850885484bf78 Mon Sep 17 00:00:00 2001
From: Yu Yu <yu.y516899@gmail.com>
Date: Wed, 16 Sep 2026 14:18:54 +0200
Subject: [PATCH 4/4] test: Cover active-tab indicator fallback and guard
 branches

---
 src/tabs/__tests__/tabs.test.tsx | 14 ++++++++++++++
 src/tabs/tab-header-bar.tsx      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/src/tabs/__tests__/tabs.test.tsx b/src/tabs/__tests__/tabs.test.tsx
index be342a17b8..0f23ee05a8 100644
--- a/src/tabs/__tests__/tabs.test.tsx
+++ b/src/tabs/__tests__/tabs.test.tsx
@@ -1451,4 +1451,18 @@ describe('active-tab indicator', () => {
     const { container } = renderTabs(<Tabs tabs={defaultTabs} activeTabId="third" onChange={() => {}} />);
     expect(indicatorOpacity(container)).toBe('0');
   });
+
+  test('falls back to the active tab element when no header container is present', () => {
+    function Wrapper() {
+      const [activeTabId, setActiveTabId] = useState('first');
+      return <Tabs tabs={defaultTabs} activeTabId={activeTabId} onChange={e => setActiveTabId(e.detail.activeTabId)} />;
+    }
+    const { container, wrapper } = renderTabs(<Wrapper />);
+    container
+      .querySelectorAll(`.${styles['tabs-tab-header-container']}`)
+      .forEach(element => element.classList.remove(styles['tabs-tab-header-container']));
+
+    wrapper.findTabLinkById('second')!.click();
+    expect(indicatorOpacity(container)).toBe('1');
+  });
 });
diff --git a/src/tabs/tab-header-bar.tsx b/src/tabs/tab-header-bar.tsx
index 77e1ca4410..f51be3c14b 100644
--- a/src/tabs/tab-header-bar.tsx
+++ b/src/tabs/tab-header-bar.tsx
@@ -202,6 +202,7 @@ export function TabHeaderBar({
   useEffect(() => {
     const indicator = activeIndicatorRef.current;
     const list = headerBarRef.current;
+    /* istanbul ignore if: refs are always attached when the effect runs */
     if (!indicator || !list) {
       return;
     }