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

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 component set is the verified Figma owner for this contract. Its assembly is recorded in the sibling 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.

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.