@sberbusiness/triplex-next-mcp-server 1.45.0-beta → 1.48.0-beta

package/bundle/components/TabsLine.md

@@ -1,10 +1,12 @@
 ---
 component: TabsLine
-category: Navigation
-figma-node: ""
-figma-file: ""
-related: [Tabs, TabsExtended, MobileView, Dropdown]
-tokens: []
+category: Tabs
+related: [Tabs, TabsExtended, Dropdown, Badge, Text]
+tokens:
+  - TabsLine.BorderColor_Active
+  - TabsLine.BorderColor_Hover
+  - TabsLine.Separator_Color
+  - TabsLine.Shadow_Focus
 stories: stories/TabsLine/TabsLine.stories.tsx
 version: "1.0"
 ---
@@ -13,172 +15,153 @@ version: "1.0"
 
 ## Назначение
 
-Линейные табы — кнопки, разделённые тонкой линией снизу, без текстового
-содержимого внутри. Отдельная реализация (НЕ поверх `TabsExtended`).
-Адаптивная: desktop рендерит `TabsLineDesktop` с overflow в `Dropdown`,
-mobile — горизонтальный скролл (`TabsLineMobile`). Переключение через
-`MobileView` по media query.
+Линейка табов-подчёркиваний для переключения разделов внутри страницы: активный таб отмечен цветной полосой снизу, а не залитой кнопкой. Состав задаётся массивом `tabs`, а не дочерними элементами. На десктопе табы, не поместившиеся в лимит `maxVisible`, уезжают в выпадающий список, который компонент рендерит сам; на мобильной ширине (<768px) списка нет — все табы остаются в строке с горизонтальной прокруткой.
 
-Используй когда: нужны "линейные" табы Sber-стиля с поддержкой свыше
-нескольких табов и автосворачиванием в dropdown. Для табов с кастомным
-overflow — `Tabs` (общий стиль) или `TabsExtended` (низкоуровневый).
+Используй когда: нужны табы-подчёркивания в шапке раздела или над таблицей, а состав табов — это плоский список «текст + опциональный значок уведомлений».
 
----
-
-## Файловая структура
+Не используй когда:
 
-```text
-src/components/TabsLine/
-├── TabsLine.tsx                       # FC, MobileView switcher + paddingX/withSeparator
-├── types.ts                           # ITabsLineBaseProps
-├── utils.ts                           # SIZE→ETextSize map
-├── components/
-│   ├── TabsLineDesktop.tsx            # FC, расчёт inline/dropdown по maxVisible
-│   ├── TabsLineMobile.tsx             # FC, горизонтальный скролл
-│   ├── TabsLineItem.tsx               # forwardRef<HTMLButtonElement>
-│   └── TabsLineDropdown.tsx           # Dropdown + DropdownList для overflow
-├── styles/
-├── __tests__/
-└── index.ts
-```
+- нужны табы-переключатели в залитом контейнере — возьми `Tabs` (или `TabsExtended`, если состав таба нестандартный);
+- в таб нужно положить произвольную разметку (иконку, счётчик, свой компонент кнопки) — `tabs` принимает только `label: string`, здесь нужен `TabsExtended`;
+- переполнение должно считаться по реальной ширине строки — `TabsLine` считает только по числу табов (`maxVisible`), замеров он не делает; автоматическое переполнение по ширине есть у `TabsExtended` / `Tabs`.
 
 ---
 
-## Публичный API
-
-### `ITabsLineProps`
-
-```ts
-extends ITabsLineDesktopProps
-```
-
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `tabs` | `ITabsLineItemProps[]` | — | Список табов. |
-| `selectedId` | `string` | — | Id выбранного. |
-| `onChangeTab` | `(tabId: string) => void` | — | Колбэк выбора. |
-| `size?` | `EComponentSize` | — | Размер табов (LG/MD/SM). |
-| `maxVisible?` | `number` | — | Максимум inline-табов; остальные → Dropdown (только desktop). |
-| `dropdownTargetHtmlAttributes?` | `HTMLAttributes<HTMLButtonElement> & TestProps` | — | Атрибуты кнопки overflow-dropdown. |
-| `paddingX?` | `0 \| 8 \| 16 \| 24` | — | Горизонтальный отступ от первого/последнего таба. Записывается в `data-paddingx-size`. |
-| `withSeparator?` | `boolean` | — | Нижний бордер контейнера (`styles.withSeparator`). |
-| `...HTMLAttributes<HTMLDivElement>` | — | — | На корневой div (role=tablist). |
-
-### `ITabsLineItemProps`
-
-```ts
-extends HTMLAttributes<HTMLButtonElement>, TestProps
-```
-
-| Поле | Тип | Описание |
-|---|---|---|
-| `id` | `string` | Уникальный id. |
-| `label` | `string` | Текст таба. |
-| `selected?` | `boolean` | Подсветка (выставляется родителем по `selectedId === id`). |
-| `showNotificationIcon?` | `boolean` | Точка-индикатор (`Badge.Dot`, всегда `EComponentSize.MD`). |
-| `size?` | `EComponentSize` | Размер; индивидуально override'ит `size` контейнера. |
+## Состав
 
-### `ITabsLineBaseProps`
+`TabsLine` — единая точка входа. Остальные компоненты папки экспортируются через barrel, но рассчитаны на внутреннее использование: собственного AI.md у них нет, их контракт описан здесь.
 
-```ts
-extends Omit<HTMLAttributes<HTMLDivElement>, "children">
-{ tabs; onChangeTab; selectedId; size? }
-```
-
-Общая база Desktop/Mobile вариантов.
+| Компонент | Что делает |
+|---|---|
+| `TabsLine` | Корневой `<div role="tablist">`: горизонтальные отступы, разделитель и выбор десктопного / мобильного варианта через `MobileView` |
+| `TabsLineDesktop` | Строка табов, распределение табов между строкой и дропдауном, клавиатурная навигация стрелками |
+| `TabsLineMobile` | Строка табов с горизонтальной прокруткой, без дропдауна |
+| `TabsLineItem` | Кнопка одного таба: `<button role="tab">` с текстом и опциональным значком уведомлений |
+| `TabsLineDropdown` | Кнопка-таб, раскрывающая выпадающий список с не поместившимися табами |
 
 ---
 
-## Поведение Desktop (`TabsLineDesktop`)
+## Варианты и props
+
+`ITabsLineProps` наследует `ITabsLineDesktopProps` → `ITabsLineBaseProps` → `Omit<React.HTMLAttributes<HTMLDivElement>, "children">`. Неизвестные компоненту атрибуты уходят на корневой `<div>`.
 
-### Распределение inline / dropdown
+### Обязательные props
 
-`useEffect` на `[tabs, maxVisible]`:
-- Если `maxVisible` задан И `i + 1 >= maxVisible` И `tabs.length > maxVisible` → `dropdownTabs`. Иначе → `inlineTabs`.
-- Сравнение через `isEqual` (lodash) перед `setState` — избегаем лишних рендеров.
+| Prop | Тип | Описание |
+|---|---|---|
+| `tabs` | `ITabsLineItemProps[]` | Коллекция табов. Порядок в массиве — порядок в строке |
+| `selectedId` | `string` | Id выбранного таба. Компонент полностью управляемый: своего состояния выбора у него нет |
+| `onChangeTab` | `(tabId: string) => void` | Запрос на смену таба. Вызывается на **каждый** клик по табу, включая клик по уже выбранному |
 
-`maxVisible` без overflow (когда `tabs.length <= maxVisible`) — все остаются inline.
+### Опциональные props
 
-### Overflow-кнопка (`TabsLineDropdown`)
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | `MD` | Высота строки и размер текста: SM — 28px, MD — 40px, LG — 56px. До мобильного варианта не доходит |
+| `maxVisible` | `number` | — | Максимальное число элементов строки **вместе с кнопкой дропдауна**: в строке остаётся `maxVisible - 1` табов, остальные уезжают в список. Без prop'а все табы в строке |
+| `paddingX` | `0 \| 8 \| 16 \| 24` | — | Горизонтальный отступ от первого таба слева и последнего справа. Пишется в `data-paddingx-size`, стили подбираются по атрибуту |
+| `withSeparator` | `boolean` | `false` | Разделитель в виде нижнего бордера на всю ширину корневого элемента |
+| `dropdownTargetHtmlAttributes` | `React.HTMLAttributes<HTMLButtonElement> & TestProps` | — | Атрибуты кнопки дропдауна: `data-test-id`, обработчики, `aria-*` |
 
-- Рендерится после inline-табов, если `dropdownTabs.length > 0`.
-- `label` — label выбранного таба, если он в overflow; иначе — label первого dropdown-таба.
-- `active` — `true`, если выбранный таб в overflow.
-- Внутри — `Dropdown` + `DropdownList` (а не ButtonDropdown как в `Tabs`).
-- Open/close: ArrowUp/Down открывают; Tab/Esc закрывают; mouseup outside — закрывает.
-- ARIA: `role="tab" aria-haspopup="menu" aria-expanded aria-controls aria-activedescendant`.
+### Поля элемента `tabs` (`ITabsLineItemProps`)
 
-### Keyboard navigation
+Интерфейс наследует `React.HTMLAttributes<HTMLButtonElement>`, поэтому в элемент массива можно положить любые атрибуты кнопки.
 
-Roving tabindex по `focusableTabIndexRef` (ref, не state):
-- `ArrowLeft` / `ArrowRight` (на `event.code`!) — двигают фокус по `inlineTabsRefs.current[index ± 1]`.
-- ArrowRight на последнем inline-табе **не** переходит на dropdown-кнопку (`isLastInlineTab` блокирует).
-- `onFocus` обновляет `focusableTabIndexRef.current = index`; `onBlur` сбрасывает в `0`.
+| Поле | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `id` | `string` | — | Идентификатор таба. Сопоставляется с `selectedId` и приходит в `onChangeTab`. **В DOM не попадает** |
+| `label` | `string` | — | Текст таба. Только строка: разметку сюда положить нельзя |
+| `showNotificationIcon` | `boolean` | `false` | Значок новых уведомлений (`Badge.Dot`) в правом верхнем углу таба |
+| `size` | `EComponentSize` | значение `size` компонента | Размер конкретного таба. Переопределяет общий `size` |
+| `selected` | `boolean` | — | Игнорируется: выбранное состояние вычисляется по `selectedId` |
+
+### Ограничения
+
+- **`maxVisible` считает кнопку дропдауна.** `maxVisible={3}` при пяти табах оставляет в строке два таба и кнопку. Пока табов не больше `maxVisible`, кнопка не рендерится и все табы остаются в строке.
+- **Переполнение не зависит от ширины.** Решение принимается только по числу табов, замеров DOM нет. При длинных `label` строка может не поместиться в контейнер даже с заданным `maxVisible`.
+- **Кнопка дропдауна подписывается табом, а не служебным текстом.** Если выбранный таб уехал в список — его `label`; иначе `label` первого скрытого таба. Отдельного текста вроде «Ещё» у компонента нет.
+- **Мобильный вариант не поддерживает `size` и `maxVisible`.** `TabsLine` передаёт в `TabsLineMobile` только `tabs`, `selectedId` и `onChangeTab`, поэтому на мобильной ширине все табы остаются в строке, а общий `size` игнорируется — размер таба там дефолтный MD. Размер, заданный на самом элементе `tabs`, при этом применяется: он приходит внутри элемента массива.
+- **`onChangeTab` не сравнивает id.** Клик по уже выбранному табу тоже вызывает обработчик — в отличие от `TabsExtended`.
+- **`onKeyDown` таба перекрывает навигацию стрелками.** Обработчики `onClick`, `onFocus`, `onBlur` из элемента `tabs` вызываются **вместе** с внутренними, а вот `onKeyDown` и `tabIndex` спредятся после внутренних и полностью их заменяют — свой `onKeyDown` на табе отключит переход стрелками и roving `tabIndex`.
+- **`dropdownTargetHtmlAttributes` мерджится с внутренними props кнопки.** `className` дописывается к внутренним классам, а `onClick`, `onKeyDown`, `onFocus`, `onBlur`, `onMouseEnter`, `onMouseLeave` вызываются **вместе** с внутренними обработчиками, не заменяя их.
+- **Порядок спреда у корневого элемента:** `role="tablist"` стоит до `...rest` — переопределяется; `className` деструктурируется из props и дописывается к внутренним классам через `clsx`, поэтому внутренний не теряется; `data-paddingx-size` и `ref` стоят после `...rest` — не переопределяются.
+- **DOM `id` пункта списка не равен `id` таба.** Пункт выпадающего списка получает `id` вида `<instanceId>-item-<index>`, чтобы два `TabsLine` с одинаковыми `id` табов не давали дублирующихся DOM `id` и `aria-activedescendant` не адресовал чужой экземпляр. В `onChangeTab` приходит исходный `id` таба.
+- **Пустой массив `tabs`** — десктопный и мобильный варианты возвращают `null`, но корневой `<div role="tablist">` всё равно отрендерится.
 
 ---
 
-## Поведение Mobile (`TabsLineMobile`)
-
-- Простая горизонтальная лента (`overflow-x: auto` через CSS).
-- НЕТ overflow-меню — табы прокручиваются.
-- НЕ принимает `maxVisible`, `paddingX`, `withSeparator`, `size` — игнорируются на mobile.
-- Возвращает `null` при пустом `tabs`.
+## Дизайн-токены
 
----
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/TabsLine.ts`.
 
-## `TabsLineItem` поведение
+```text
+TabsLine.BorderColor_Active
+TabsLine.BorderColor_Hover
+TabsLine.Separator_Color
+TabsLine.Shadow_Focus
+```
 
-- `<button type="button" role="tab" aria-selected>`.
-- Внутренний state: `focused`, `hovered` — для смены `EFontType` (`PRIMARY` при selected/focused/hovered, иначе `SECONDARY`).
-- `Text` size маппится через `tabsLineSizeToTextSizeMap` (LG=B2, MD=B3, SM=B4).
-- Default `size = MD`.
-- `Badge.Dot` — всегда `EComponentSize.MD` (НЕ зависит от `size` таба!).
+Цвет текста таба задаётся не токенами группы: `TabsLineItem` и `TabsLineDropdown` рендерят `Text` и переключают его `type` между `EFontType.PRIMARY` (выбран, в фокусе или под курсором) и `EFontType.SECONDARY`.
 
 ---
 
 ## Инварианты
 
-- **`TabsLine` — `FC`, не `forwardRef`** — ref не пробрасывается.
-- **`TabsLineItem` — `forwardRef<HTMLButtonElement>`** — Desktop хранит refs в `inlineTabsRefs` для управления фокусом.
-- **`onChangeTab` обязателен** — нет внутреннего state выбора, всегда контролируемый.
-- **`paddingX` ограничен 4 значениями** (`0 | 8 | 16 | 24`) — расширять с осторожностью (CSS привязан к `data-paddingx-size`).
-- **`withSeparator`** включает `styles.withSeparator` на wrapper'е.
-- **Mobile рендерит ВСЕ табы inline** (нет maxVisible) — не пытаться добавить overflow без миграции UX.
-- **Keyboard navigation на `event.code`** (не `event.key`) — отличие от `Tabs`. Не унифицировать без проверки тестов.
-- **`isEqual` сравнение перед `setInlineTabs`/`setDropdownTabs`** — не убирать, иначе бесконечный ререндер.
-- **`Badge.Dot size = MD`** на TabsLineItem — намеренно (не наследует `size` таба).
-- **Реализация не использует `TabsExtended`** — отдельная архитектура. Изменения должны быть синхронизированы вручную, если нужна согласованность.
-- **`TabsLineDropdown` использует `Dropdown` + `DropdownList`**, не `ButtonDropdown` (как в `Tabs`) — это разные подсистемы.
+- `forwardRef` есть у `TabsLine`, `TabsLineDesktop`, `TabsLineMobile`, `TabsLineItem` и `TabsLineDropdown` — не убирать. Ref указывает на тот же элемент, который получает `className` и `...rest`.
+- У `TabsLineDropdown` ref потребителя объединён с внутренним ref корневого элемента: по этому же элементу позиционируется `Dropdown` (prop `targetRef`). Разрывать связку нельзя — список «оторвётся» от кнопки.
+- `id` таба намеренно не уходит на `<button>`: он остаётся идентификатором в модели данных. Пункты выпадающего списка, наоборот, получают `id` — он нужен `aria-activedescendant`.
+- Корневой элемент `TabsLine` — `<div role="tablist">`, элемент таба — `<button role="tab">`. Кнопка дропдауна — тоже `role="tab"`, а не `button`: она замещает собой скрытые табы.
+- Атрибут `data-paddingx-size` — контракт стилей: значения `paddingX` разворачиваются в селекторы `each(@paddingXsizes, ...)` в `TabsLine.module.less`. Переименование атрибута или расширение набора значений требует правки LESS.
+- `data-size` на корневом элементе `TabsLineDesktop` — тот же контракт для высоты строки.
+- Размер таба приходит в `Badge.Dot` и в `Text` (через `tabsLineSizeToTextSizeMap`): SM → `B4`, MD → `B3`, LG → `B2`. Маппинг типизирован как `Record<EComponentSize, ETextSize>` — новый размер компонента обязан появиться и здесь.
+- `splitTabsByMaxVisible` из `utils.ts` — единственное место, где решается, какие табы уходят в дропдаун. Через barrel не экспортируется.
+- Компонент React 17-совместим: уникальный id дропдауна строится через `uniqueId` из `lodash-es`, а не через `useId`.
 
 ---
 
 ## Accessibility
 
-- Корень: `<div role="tablist">`.
-- Каждый таб: `<button role="tab" aria-selected={selected}>`.
-- Overflow-кнопка: `role="tab" aria-haspopup="menu" aria-expanded aria-controls aria-activedescendant`.
-- Roving tabindex (`tabIndex = focusableTabIndexRef.current === index ? 0 : -1`).
-- ArrowLeft/ArrowRight перемещают фокус. ArrowUp/Down открывают dropdown.
-- Tab / Escape закрывают открытый dropdown.
-- Mobile: естественный таб-ордер всех кнопок (нет roving tabindex).
+- Корневой элемент — `role="tablist"`, каждый таб — `<button role="tab">` с `aria-selected`. Связку с панелями контента (`aria-controls`, `id` панели, `role="tabpanel"`) компонент **не выставляет** — это на потребителе.
+- **Клавиатура в строке табов (только десктоп):** `ArrowLeft` / `ArrowRight` переводят фокус на соседний таб с `preventDefault`. Реализован roving `tabIndex`: в порядок обхода включён только таб в фокусе, остальные получают `tabIndex={-1}`, на `blur` фокусируемым снова становится первый таб. Поэтому один `Tab` из строки табов ведёт сразу на кнопку дропдауна, а не на следующий таб. Движение по кругу не реализовано: с первого таба `ArrowLeft` никуда не ведёт, с последнего `ArrowRight` не уводит на кнопку дропдауна.
+- **Клавиатура на кнопке дропдауна:** `ArrowUp` / `ArrowDown` раскрывают список (с `preventDefault`), `Escape` и `Tab` закрывают. `Enter` и `Space` работают нативной активацией `<button>`. Раскрытый список также закрывается по `mouseup` вне кнопки и вне списка.
+- Кнопка дропдауна несёт `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` (id списка) и `aria-activedescendant` (id активного пункта, приходит из `DropdownListContext`).
+- Фокус подсвечивается через `:focus-visible` (токен `TabsLine.Shadow_Focus`) — только при клавиатурной навигации. Подчёркивание `::after` при этом реагирует и на `:hover`, и на `:focus`.
+- Компонент не хардкодит текст: значок новых уведомлений — чисто визуальный, доступного имени у него нет. Если статус «есть новое» важен для скринридера, передай `aria-label` в соответствующий элемент `tabs`.
+- Фокус после выбора таба в списке компонент не возвращает на кнопку дропдауна — список просто закрывается.
 
 ---
 
 ## Связанные компоненты
 
-- `Tabs` — табы с overflow через `ButtonDropdown`.
-- `TabsExtended` — низкоуровневая альтернатива (composition slots).
-- `MobileView` — переключение desktop/mobile.
-- `Dropdown` / `DropdownList` — overflow-меню в desktop-варианте.
-- `Badge.Dot` — индикатор уведомлений.
-- `Typography.Text` — текст лейбла.
+Отдельного AI.md нет ни у одной части семейства — все они описаны в разделе «Состав». Это область задачи TRI-92 («Scope: только TabsLine»): в таблице `docs/ai/ROADMAP.md` у `TabsLine` одна строка.
+
+**Соседние компоненты:**
+
+- `Tabs` — табы-переключатели в залитом контейнере поверх `TabsExtended`. Тот же класс задачи, другой визуальный паттерн и автоматическое переполнение по ширине.
+- `TabsExtended` — базовый компонент табов с render-prop'ами: нужен, когда содержимое таба или триггер выпадающего списка нестандартные.
+- `Dropdown` — `TabsLineDropdown` рендерит внутри себя `Dropdown` + `DropdownList` + `DropdownList.Item` и прокидывает в них `size`; ширина списка — `EDropdownWidth.MIN_TARGET`.
+- `Badge` — значок новых уведомлений на табе (`Badge.Dot`).
+- `Text` — текст таба; размер выбирается по `size` через `tabsLineSizeToTextSizeMap`.
+- `MobileView` — переключает десктопный и мобильный варианты по ширине окна (<768px). Собственной разметки не добавляет.
 
 ---
 
 ## Stories
 
 Основные истории: `stories/TabsLine/TabsLine.stories.tsx`
-Примеры: `stories/TabsLine/examples/`
+Файлы примеров: `stories/TabsLine/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `paddingX`, `maxVisible`, `size`, `withSeparator` и значка уведомлений |
+| `Default` | `Default.tsx` | Минимальный состав: четыре таба без дропдауна и отступов |
+| `Sizes` | `Sizes.tsx` | Размеры SM / MD / LG |
+| `Paddings` | `Paddings.tsx` | Горизонтальные отступы 0 / 8 / 16 / 24 |
+| `WithSeparator` | `WithSeparator.tsx` | Нижний разделитель на всю ширину |
+| `WithNotificationIcon` | `WithNotificationIcon.tsx` | Значок новых уведомлений на табах |
+| `WithDropdown` | `WithDropdown.tsx` | `maxVisible={3}`: часть табов уезжает в выпадающий список |
+| `VisualTests` | `VisualTests.tsx` | Раскрытый выпадающий список и `:focus-visible` на его кнопке (через `play`) |
 
 ---
 
@@ -186,4 +169,195 @@ Roving tabindex по `focusableTabIndexRef` (ref, не state):
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-16 | Создан документ AI-ready для `TabsLine` (TRI-92). |
+| 2026-09-16 | AI-рефакторинг: `TabsLine`, `TabsLineDesktop`, `TabsLineMobile` и `TabsLineDropdown` переведены с `React.FC` на `forwardRef` (у `TabsLineDropdown` ref потребителя объединён с внутренним ref позиционирования), у всех появился `displayName`. В `TabsLineDesktop` распределение табов между строкой и дропдауном переведено с `useEffect` + `setState` на производное значение (`splitTabsByMaxVisible` в `utils.ts`), roving `tabIndex` переехал с ref на состояние — оба `eslint-disable react-hooks/*` сняты. `TabsLineItem` перестал терять `className`, `onMouseEnter` и `onMouseLeave` потребителя; `TabsLineDesktop` и `TabsLineMobile` начали прокидывать `className` и `...rest` на корневой элемент. Удалены ссылки на несуществующие классы LESS-модуля (`tabInner`, `dropdownItem`, `dropdownItemInner` — в самом модуле их не было, поэтому обёртки рендерились без класса) вместе с самими обёртками-`<span>`. Публичный API (имена props, типы, значения enum, barrel-экспорты) не изменён. Добавлены unit-тесты на все части семейства и stories по modern pattern. |
+| 2026-09-16 | Правки по ревью PR: DOM `id` пункта выпадающего списка выводится из внутреннего идентификатора экземпляра (`<instanceId>-item-<index>`) вместо `id` таба — два `TabsLine` с одинаковыми `id` табов больше не дают дублирующихся DOM `id`; в `onChangeTab` по-прежнему приходит исходный `id` таба. В `handleTargetKeyDown` пользовательский `onKeyDown` вызывается после внутренней логики — как у остальных обработчиков кнопки дропдауна. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/TabsLine/examples/Default.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { TabsLine } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tabs-line-all", label: "Tab Name 1" },
+    { id: "tabs-line-draft", label: "Tab Name 2" },
+    { id: "tabs-line-sign", label: "Tab Name 3" },
+    { id: "tabs-line-executed", label: "Tab Name 4" },
+];
+
+export const Default = () => {
+    const [selectedId, setSelectedId] = useState("tabs-line-all");
+
+    return <TabsLine tabs={TABS} selectedId={selectedId} onChangeTab={setSelectedId} />;
+};
+```
+
+### Sizes
+
+`stories/TabsLine/examples/Sizes.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, TabsLine } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tabs-line-all", label: "Tab Name 1" },
+    { id: "tabs-line-draft", label: "Tab Name 2" },
+    { id: "tabs-line-sign", label: "Tab Name 3" },
+    { id: "tabs-line-executed", label: "Tab Name 4" },
+    { id: "tabs-line-rejected", label: "Tab Name 5" },
+];
+
+/** Пятый таб уходит в дропдаун — так кнопка дропдауна попадает в кадр во всех трёх размерах. */
+const MAX_VISIBLE = 4;
+
+interface ISizeItemProps {
+    size: EComponentSize;
+}
+
+const SizeItem = ({ size }: ISizeItemProps) => {
+    const [selectedId, setSelectedId] = useState("tabs-line-all");
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+            <TabsLine
+                tabs={TABS}
+                selectedId={selectedId}
+                onChangeTab={setSelectedId}
+                size={size}
+                maxVisible={MAX_VISIBLE}
+            />
+        </div>
+    );
+};
+
+const SIZES = Object.values(EComponentSize);
+
+export const Sizes = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {SIZES.map((size) => (
+            <SizeItem key={size} size={size} />
+        ))}
+    </div>
+);
+```
+
+### Paddings
+
+`stories/TabsLine/examples/Paddings.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { TabsLine } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tabs-line-all", label: "Tab Name 1" },
+    { id: "tabs-line-draft", label: "Tab Name 2" },
+    { id: "tabs-line-sign", label: "Tab Name 3" },
+    { id: "tabs-line-executed", label: "Tab Name 4" },
+];
+
+const PADDINGS: Array<0 | 8 | 16 | 24> = [0, 8, 16, 24];
+
+interface IPaddingItemProps {
+    paddingX: 0 | 8 | 16 | 24;
+}
+
+const PaddingItem = ({ paddingX }: IPaddingItemProps) => {
+    const [selectedId, setSelectedId] = useState("tabs-line-all");
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{paddingX}</div>
+            <TabsLine tabs={TABS} selectedId={selectedId} onChangeTab={setSelectedId} paddingX={paddingX} />
+        </div>
+    );
+};
+
+export const Paddings = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {PADDINGS.map((paddingX) => (
+            <PaddingItem key={paddingX} paddingX={paddingX} />
+        ))}
+    </div>
+);
+```
+
+### WithSeparator
+
+`stories/TabsLine/examples/WithSeparator.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { TabsLine } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tabs-line-all", label: "Tab Name 1" },
+    { id: "tabs-line-draft", label: "Tab Name 2" },
+    { id: "tabs-line-sign", label: "Tab Name 3" },
+    { id: "tabs-line-executed", label: "Tab Name 4" },
+];
+
+export const WithSeparator = () => {
+    const [selectedId, setSelectedId] = useState("tabs-line-all");
+
+    return <TabsLine tabs={TABS} selectedId={selectedId} onChangeTab={setSelectedId} withSeparator />;
+};
+```
+
+### WithNotificationIcon
+
+`stories/TabsLine/examples/WithNotificationIcon.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { TabsLine } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tabs-line-all", label: "Tab Name 1" },
+    { id: "tabs-line-draft", label: "Tab Name 2", showNotificationIcon: true },
+    { id: "tabs-line-sign", label: "Tab Name 3", showNotificationIcon: true },
+    { id: "tabs-line-executed", label: "Tab Name 4" },
+];
+
+export const WithNotificationIcon = () => {
+    const [selectedId, setSelectedId] = useState("tabs-line-all");
+
+    return <TabsLine tabs={TABS} selectedId={selectedId} onChangeTab={setSelectedId} />;
+};
+```
+
+### WithDropdown
+
+`stories/TabsLine/examples/WithDropdown.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { TabsLine } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tabs-line-all", label: "Tab Name 1" },
+    { id: "tabs-line-draft", label: "Tab Name 2" },
+    { id: "tabs-line-sign", label: "Tab Name 3" },
+    { id: "tabs-line-executed", label: "Tab Name 4" },
+    { id: "tabs-line-rejected", label: "Tab Name 5" },
+];
+
+export const WithDropdown = () => {
+    const [selectedId, setSelectedId] = useState("tabs-line-all");
+
+    return (
+        // maxVisible считает и кнопку дропдауна: в строке остаются два таба, остальные уезжают в список.
+        <TabsLine tabs={TABS} selectedId={selectedId} onChangeTab={setSelectedId} maxVisible={3} />
+    );
+};
+```
+