[vvaliyev]

Description

Moves the tab's painted styles (background, border, border radius, block padding, colour and font per state) from the tab link to the tab container, so one element paints the tab and the upcoming internal style API can target it. The link, the action and the dismiss button cancel the moved block padding with negative margins, so the link keeps its size, focus ring and click area, and the action and dismiss button keep their own text style.

style.tab.paddingBlock moves to two custom properties, styleTabsPaddingBlockStart and styleTabsPaddingBlockEnd, so the moved padding and the negative margins follow it. Adding them changes the hash suffix of all custom properties, which updates the style snapshots of other components.

Visible changes:

• Default rendering: none.
• Without @cloudscape-design/global-styles, button tab labels inherit the font family instead of using the browser default.
• style.tab (core system only): backgroundColor, borderColor and borderRadius paint the whole tab, including its inline padding, the action and the dismiss button, so adjacent tabs touch. The separator stays visible over a coloured tab, inside its end border. Hover colours still apply only while the pointer is over the link.
• style.tab.borderWidth sets the tab's outer border. The label and the tab size stay the same; with a width other than 1px the underline and the separators move inside by the difference.
• style.tab.paddingBlock: no change. The link, the action and the dismiss button follow the set padding, so the label, the tab size, the focus ring and the click area are as before.

Related links, issue #, if available: n/a

How has this been tested?

Unit tests, and a pixel comparison of the Tabs dev pages against main at rest, hovered, focused and active: classic and One Theme in both densities; visual refresh in both densities, light and dark, LTR and RTL. The label, link, focus ring and tab boxes with style.tab.paddingBlock of 0px, 4px and 4px 8px match main in classic and visual refresh.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.82%. Comparing base (ab62434) to head (1a13586).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5248      +/-   ##
==========================================
- Coverage   97.82%   97.82%   -0.01%     
==========================================
  Files        1006     1006              
  Lines       32621    32648      +27     
  Branches    12117    12133      +16     
==========================================
+ Hits        31913    31939      +26     
- Misses        666      703      +37     
+ Partials       42        6      -36     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🟡 Changes recommended

The tab styling clips keyboard focus rings when custom padding is zero and leaves separators visible over filled tab backgrounds.

2 open issues

• Separator paints over filled tab backgrounds · New
• Zero-padding tabs clip the keyboard focus ring · New

What changed in this PR

Moves tab painting from the link to the container, preparing Tabs for the upcoming internal style API while aiming to preserve default rendering and interaction geometry.

Changes:

• Moves backgrounds, borders, block padding, and state typography to the container; keeps inline padding on the trigger.
• Adjusts trigger, action, and dismiss styles to compensate for the moved styles.
• Updates style tests and adds disabled-tab examples.

File	Description
src/​tabs/​tab-header-bar.tsx	Applies styles to the container and trigger separately.
src/​tabs/​tab-header-bar.scss	Moves painting and state styles; adjusts child spacing and inheritance.
src/​tabs/​styles.tsx	Adds a trigger-specific inline-padding helper.
src/​tabs/​__tests__/​tabs.test.tsx	Tests style placement on rendered elements.
src/​tabs/​__tests__/​styles.test.tsx	Covers the new helper and non-core behavior.
src/​tabs/​__tests__/​__snapshots__/​styles.test.tsx.snap	Updates snapshots for the split style mapping.
pages/​tabs/​actions.page.tsx	Adds disabled tabs with text actions and dismiss buttons.

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

The padding logic misaligns action/dismiss controls with font-relative padding and differing tab/body font sizes, and invalidates padding and cancellation margins for variable-backed two-value padding.

3 open issues

• Preserve shorthand expansion for variable-backed padding · New
• Compute control margins using the tab font size · New
• Separator paints over filled tab backgrounds

1 resolved since last review

• Zero-padding tabs clip the keyboard focus ring

_{Review effort: Balanced}