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 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. It records verified visual evidence only; the Angular API above remains the owned runtime contract.