# Tab Vert Row

Level: organism.

## Purpose

`component.tab-vert-row` selects one section from a compact vertical list. Use
it for peer sections shown beside their content. It is not sidebar navigation,
a tree, or an accordion.

## Anatomy

- The row is a vertical `tablist` with a visible, optional secondary left
  stroke.
- Each `tabs` item produces one native button with `role="tab"` and a text
  label. There are no icon, badge, or projection slots in the verified design.
- The selected item has a 2px accent left indicator and accented medium text;
  all other items use the flat-secondary pressed text role.

## Behavior

- The effective selection is `selectedId` when it occurs in `tabs`; otherwise
  it is the first item. An empty list has no effective selection.
- Clicking an unselected item emits its ID and full item. Clicking the selected
  item is a no-op.
- `ArrowDown` and `ArrowUp` move the selection and keyboard focus through the
  list with wraparound; `Home` and `End` select and focus the first and last
  items.
- `stroke` controls only the 1px secondary left border on the container. The
  selected item's 2px accent indicator is always present.

## Variants and states

The [Figma source](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=14932-67620)
shows two visual variants:

- `Stroke=Off` (`13744:18022`) — no container border.
- `Stroke=On` (`14932:67631`) — a 1px `stroke/secondary` border at the
  container's left edge.

The source demonstrates one selected item and six unselected items. It does
not verify icons, badges, disabled rows, loading, errors, or a fixed item
count; this owned component exposes none of those states.

## Token usage

- Selected indicator: `--stroke-200` and `--color-stroke-accent`.
- Optional container stroke: `--stroke-100` and
  `--color-stroke-secondary`.
- Selected label: `--typography-body-accent-buffalo` and
  `--color-text-icon-accent`.
- Unselected label: `--typography-body-horse` and
  `--color-button-flat-secondary-pressed`.
- Item padding: `--space-150` block and `--space-250` inline. The resulting
  32px minimum row height uses `--space-800`.
- The source width is 220px; the implementation keeps this as local layout
  geometry (`13.75rem`) and lets the host shrink to its available width.

## Accessibility

- The container has `role="tablist"`, `aria-orientation="vertical"`, and the
  configurable `ariaLabel`.
- Exactly the effective selection is exposed with `aria-selected="true"` and
  `tabindex="0"`; other items receive `tabindex="-1"`.
- Focus is visibly indicated with the shared focused stroke token.
- The component does not create a tab panel or `aria-controls` relationship.
  A consuming screen that presents panels must provide that association and
  keep it in sync with `selectedId`.

## Content guidelines

Use short, distinct text labels that identify sections. Do not use this
component for nested navigation or controls that need icons, counters, or
disabled states; those needs require a separately verified component contract.

## Figma source

Direct Figma evidence is the `🟣 🚛 Tabs_vert_row` reference frame at node
`14932:67620`. The readback identified a 480×244 reference frame containing
the two 220×224 symbols above. It is the published Figma component set
`2458c77021bbae55425a32d0bf21d143d38c15ed`; its two verified component
variants are `18c9f48611462d15d4aca2db6185dfe660834dd1` (`Stroke=Off`) and
`dc3fa7060a0c5d37ee12dcd391548500d1eaeb62` (`Stroke=On`).

## Local component contract

### Classes and selectors

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

### Inputs

- `WblTabVertRowComponent.tabs = input<WblTabVertRowItem[]>(DEFAULT_TABS)`
- `WblTabVertRowComponent.selectedId = input(DEFAULT_TABS[0].id)`
- `WblTabVertRowComponent.stroke = input(false)`
- `WblTabVertRowComponent.ariaLabel = input('Разделы')`

`WblTabVertRowItem` contains only `id: string` and `label: string`.

### Models

- None.

### Outputs

- `WblTabVertRowComponent.selectedIdChange = output<string>()`
- `WblTabVertRowComponent.tabSelect = output<WblTabVertRowItem>()`

### Slots and projection markers

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

### Local evidence

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

## Figma status

The Figma assembly is documented in the sibling
[`tab-vert-row.figma.md`](tab-vert-row.figma.md). It records verified visual
evidence only; the Angular API above remains the owned runtime contract.