Tab Standard

Level: molecule.

Purpose and use

Render one tab's visual and selected/disabled semantics inside a tablist. Use a button or Chip for standalone actions instead of a tab without a panel relationship.

Anatomy, behavior, and accessibility

• A native role=tab button contains the label, optional decorative count badge and a fixed downward chevron. M/S changes size; focused only forces visual treatment. Optional tabId and panelId bind its native id and aria-controls.
• selected controls aria-selected and tabindex=0; unselected uses tabindex=-1. Disabled suppresses selected appearance and disables the native button.
• There is no selectedChange output or internal toggle. The parent handles native activation, selection and panel display. Badge content is hidden from assistive technology; use the label for necessary meaning.

Local component contract

This is the active owned contract for component.tab-standard. The API below is verified against the current local implementation, focused test and story. The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains migration provenance, not the runtime owner.

Classes and selectors

• WblTabStandardComponent — wbl-tab-standard (src/app/design-system/patterns/tab-standard/tab-standard.component.ts).

Inputs

• WblTabStandardComponent.size = input<WblTabStandardSize>('M')
• WblTabStandardComponent.label = input('Tab')
• WblTabStandardComponent.selected = input(false)
• WblTabStandardComponent.disabled = input(false)
• WblTabStandardComponent.badge = input(false)
• WblTabStandardComponent.badgeLabel = input<string | number>('1')
• WblTabStandardComponent.icon = input(false)
• WblTabStandardComponent.focused = input(false)
• WblTabStandardComponent.tabId = input<string | null>(null)
• WblTabStandardComponent.panelId = input<string | null>(null)

Public types and allowed values

type WblTabStandardSize = 'M' | 'S';

Models

• None.

Outputs

• None.

Slots and projection markers

• The exact template has no Angular content-projection slot.

Local evidence

• Code: src/app/design-system/patterns/tab-standard/tab-standard.component.ts.
• Focused test: src/app/design-system/patterns/tab-standard/tab-standard.component.spec.ts.
• Public export: export * from './patterns/tab-standard/tab-standard.component'; in src/app/design-system/index.ts.
• Storybook: storybook/stories/tab-standard.stories.ts (Design System/Patterns/wbl-tab-standard).

Figma status

Tab Standard is directly observed as the repeated item inside the published Horizontal Tabs assembly, not as a verified standalone Figma assembly owner in this scope. The evidence is the two-item row at Tabs_horiz_row:

• The selected item uses the existing accent text and selected underline treatment.
• The nested inactive label is #5F5F6D, which maps to the local semantic token --color-button-flat-secondary-pressed, now used for the local default label.

This evidence confirms the current visual alignment; it does not add a new input, state, or token decision to the local API.

The Horizontal Tabs assembly contract is maintained in the sibling owner tab-horiz-row.figma.md. Do not infer a standalone Tab Standard Figma component key, a vertical-tabs role, or an API change from this nested evidence.

Provenance

The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.

M-002 refinement

Selected, focused and inactive styling must share one stable intrinsic width for the same label, badge and icon configuration. The selected underline and text treatment cannot change the button's inline footprint. A hidden ::after reserves the active font width, preventing the enclosing Tab Horiz Row from shifting when selection changes. The public API is unchanged.

M-002 visual transitions

The button transitions border-block-end-color and text color; its Badge transitions background-color and color. Each uses --duration-fast with --ease-out, without changing intrinsic width or delaying selected semantics. Focus indication and keyboard behavior remain available throughout. Under prefers-reduced-motion: reduce, all four transitions are disabled and the visual state changes immediately. The public API is unchanged.