feat(tabs): redesign (#DS-4761)

[NikGurev]

Summary

Tabs underlined variant - visual redesign

List of notable changes:

Layout

• Removed hardcoded padding: 14px overrides for underlined tab items; horizontal padding now derives uniformly from --kbq-tabs-size-tab-item-padding-horizontal (12px) minus the focus outline width (2px)
• Vertical padding on .kbq-tab-list__content tokenised from hardcoded 8px to var(--kbq-size-s)
• .kbq-tab-header border-radius removed in underlined mode

Icon-only tabs

• margin-inline reduced globally from 6px (--kbq-size-xs) to 4px (--kbq-size-xxs)
• In underlined mode, icon-only width/height reduced from 32px to 28px via new --kbq-tabs-size-tab-item-underlined-icon-only-size token (calc(32px - 4px)), keeping the total header height at 48px

First tab alignment

• Replaced padding-left: 0 on :first-child with margin-inline-start: -12px (text tabs) / 0 (icon-only). Negative margin preserves the full padding on the element so the focus ring can extend beyond the container edge, while padding-left: 0 would have clipped it under overflow: hidden

Hover underline

• Added ::after pseudo-element on each underlined text/icon+text tab: 3px bar pinned to the separator, coloured var(--kbq-line-contrast-fade) on hover, suppressed on the selected tab (active underline div takes over)
• left/right offsets are content-aligned — calc(padding-horizontal - border-width) — so hover and active underlines have identical width and position
• Icon-only underlined tabs reuse ::after for the same hover bar (overriding the non-underlined click-expander role, which for underlined is already covered by ::before)
• Four new hover underline color tokens added for all filled/transparent × on-background/on-surface combinations

Active underline positioning (TypeScript)

• activeTabOffsetWidth / activeTabOffsetLeft in KbqTabHeader: icon-only uses full offsetWidth / raw offsetLeft; text tabs subtract/add TAB_PADDING (12px) to align the underline with the content area, not the padding box
• Same recalculation applied to KbqTabNavBar (previously returned raw offsetWidth/offsetLeft with no adjustment)
• selectedIndex === 0 special-casing removed — with negative margin-inline-start the first tab's offsetLeft is negative, so left + TAB_PADDING resolves correctly for all positions uniformly

[github-actions]

Visit the preview URL for this PR (updated for commit 663c1af):

https://koobiq-next--prs-1762-s009mykw.web.app

_{(expires Sun, 26 Jul 2026 14:47:06 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[NikGurev]

/approve-snapshots

[github-actions]

🔄 Updating snapshots.

[github-actions]

✅ Snapshots updated!

[Copilot]

Pull request overview

This PR implements a visual redesign for the Tabs “underlined” variant, updating SCSS tokens/styles and adjusting TypeScript underline positioning logic so the active/hover underlines align to the tab content area (including new first-tab alignment behavior).

Changes:

• Updated underlined-mode styling: focus area geometry, hover underline pseudo-element, icon-only sizing/margins, and first-tab negative margin alignment.
• Adjusted active underline positioning calculations in KbqTabHeader and KbqTabNavBar to align the underline with content (not padding box).
• Added unit tests validating the new active underline offset calculations.

Reviewed changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/components/tabs/tabs-tokens.scss	Adds a new token for underlined icon-only tab sizing.
packages/components/tabs/tab-nav-bar.ts	Adjusts active underline width/left calculations for underlined nav bar.
packages/components/tabs/tab-nav-bar.spec.ts	Adds unit tests for nav bar active underline offset calculations.
packages/components/tabs/tab-header.spec.ts	Adds unit tests for tab header active underline offset calculations (incl. icon-only handling).
packages/components/tabs/tab-header.scss	Removes border radius in underlined mode.
packages/components/tabs/tab-header.component.ts	Adjusts active underline width/left calculations for tab header (incl. icon-only handling).
packages/components/tabs/_tabs-theme.scss	Adds hover-state styling to drive the new hover underline behavior.
packages/components/tabs/_tabs-common.scss	Refactors underlined-mode layout/pseudo-elements (focus inset, hover bar, icon-only sizing, first-tab alignment, underline radius).
packages/components-dev/tabs/module.ts	Adds the underlined example to the dev tabs showcase (but currently imports it from dist).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[NikGurev]

/approve-snapshots

[github-actions]

🔄 Updating snapshots.

[github-actions]

✅ Snapshots updated!

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[NikGurev]

/approve-snapshots

[github-actions]

🔄 Updating snapshots.

[github-actions]

✅ Snapshots updated!