# Tab Horiz Row

Level: organism.

## Purpose and use

Choose a section of a detail view using a horizontal row of small tabs. Use
Segment Control for an option value rather than a tab/panel relationship.

## Anatomy, behavior, and accessibility

- A named tablist renders Tab Standard children in size S, with optional underline,
  per-tab badge and chevron icon. The selected ID is parent-controlled. Each
  item may supply optional `tabId` and `panelId` metadata for a native
  tab/tabpanel relationship.
- If selectedId is missing or disabled, the first enabled tab is displayed as
  selected. Enabled unselected activation emits selectedIdChange and tabSelect;
  selected/disabled activation emits nothing. ArrowLeft/ArrowRight wrap between
  enabled tabs; Home/End select their first/last enabled tab and move focus.
- The row does not create panels, route links or loading states. Give tabs unique
  IDs and short section labels, and keep ariaLabel descriptive of the group.

## Local component contract

This is the active owned contract for `component.tab-horiz-row`. 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

- `WblTabHorizRowComponent` — `wbl-tab-horiz-row` (src/app/design-system/patterns/tab-horiz-row/tab-horiz-row.component.ts).

### Inputs

- `WblTabHorizRowComponent.tabs = input<WblTabHorizRowItem[]>(DEFAULT_TABS)`
- `WblTabHorizRowComponent.selectedId = input(DEFAULT_TABS[0].id)`
- `WblTabHorizRowComponent.underline = input(true)`
- `WblTabHorizRowComponent.ariaLabel = input('Разделы')`

### Public types and allowed values

```ts
type WblTabHorizRowItem = {
  id: string;
  label: string;
  disabled?: boolean;
  badge?: boolean;
  badgeLabel?: string | number;
  icon?: boolean;
  tabId?: string;
  panelId?: string;
};
```

### Models

- None.

### Outputs

- `WblTabHorizRowComponent.selectedIdChange = output<string>()`
- `WblTabHorizRowComponent.tabSelect = output<WblTabHorizRowItem>()`

### Slots and projection markers

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

### Local evidence

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

## Figma status

The published [Tabs_horiz_row](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=17553-28500)
component set is the verified Figma owner for this contract. Its assembly is
recorded in the sibling [`tab-horiz-row.figma.md`](tab-horiz-row.figma.md).

Verified correspondence:

- `Underline=on` (`17553:28523`) maps to `underline=true`: a `16px` gap,
  `44px` S-size tab items, and a `1px` secondary bottom divider.
- `Underline=off` (`17553:28534`) maps to `underline=false` without changing
  the tab-item geometry.
- The selected item uses the existing `2px` accent bottom underline and
  accent text. The nested inactive item is `#5F5F6D`, mapped to
  `--color-button-flat-secondary-pressed`, which is the current runtime
  default state.

The Figma component set only verifies the published horizontal geometry and
its `Underline` variants. It does not add inputs, outputs, keyboard behavior,
or a vertical-tabs role to the local contract.

## 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

Each child tab keeps the same inline footprint in active and inactive states.
Changing `selectedId` must not move adjacent tabs, change the total row width,
or clip a label/badge that fit before selection. Tab Standard owns the width
reservation; Tab Horiz Row adds no public input.

## M-002 selection transition

The selected item changes with the short visual transitions owned by Tab
Standard while preserving the current stable inline footprint. Selection,
focus and `aria-selected` semantics update without waiting for decorative
motion, and the row remains interactive throughout the transition.

With `prefers-reduced-motion: reduce`, those child transitions are disabled and
the visual selection changes immediately. The screen owns the table-content
animation; Tab Horiz Row does not animate or retain a tab panel. The public API
is unchanged.