# 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

```ts
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](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=17553-28500):

- 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`](../organisms/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.