@sberbusiness/triplex-next-mcp-server 0.24.0-beta1

package/bundle/components/Tabs.md

@@ -0,0 +1,152 @@
+---
+component: Tabs
+category: Navigation
+figma-node: ""
+figma-file: ""
+related: [TabsExtended, TabsLine]
+tokens: []
+stories: stories/Tabs/Tabs.stories.tsx
+version: "1.0"
+---
+
+# Tabs
+
+## Назначение
+
+Готовый компонент табов с overflow-меню (`ButtonDropdown` с `DOTS_SECONDARY`):
+табы, не помещающиеся в строку, автоматически уезжают в выпадающее меню.
+Принимает простой массив `tabs: ITabsItem[]` вместо children-композиции.
+Под капотом — `TabsExtended` с фиксированной разметкой
+`Content > TabsWrapper + DropdownWrapper`.
+
+Используй когда: нужен стандартный таб-бар с поддержкой переполнения.
+Для кастомной разметки (свой dropdown, иконки, другие заголовки) —
+`TabsExtended` напрямую. Для простых горизонтальных линейных табов без
+overflow — `TabsLine`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Tabs/
+├── Tabs.tsx     # FC<ITabsProps>; склейка TabsExtended + ButtonDropdown
+├── styles/
+│   ├── Tabs.module.less
+│   └── Tabs.less
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `ITabsItem`
+
+```ts
+extends Omit<ITabsExtendedTabProps, "children" | "onSelect">
+```
+
+| Поле | Тип | Описание |
+|---|---|---|
+| `id` | `string` | Уникальный id таба (используется в `selectedId`/`onSelectTab`). |
+| `label` | `ReactNode` | Содержимое кнопки таба. |
+| `showNotificationIcon?` | `boolean` | Точка-индикатор уведомления на табе. |
+
+### `ITabsProps`
+
+```ts
+extends ITabsExtendedProps
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `tabs` | `ITabsItem[]` | — | Массив табов. **Обязателен.** |
+| `selectedId` | `string` | — | Id выбранного таба (от `ITabsExtendedProps`). |
+| `onSelectTab` | `(selectedId: string) => void` | — | Колбэк выбора таба. |
+| `size?` | `EComponentSize` | `MD` | Размер табов и кнопки overflow. |
+| `buttonDropdownAttributes?` | `ButtonHTMLAttributes<HTMLButtonElement>` | — | HTML-атрибуты для `ButtonDropdown`. |
+| `type?` | `ETabsExtendedType` | `TYPE_1` | Тип оформления (от `TabsExtended`). |
+| `children` | `never` | — | Запрещено — структура фиксирована. |
+| `...HTMLAttributes<HTMLDivElement>` | — | — | На корневой `TabsExtended` (role=tablist). |
+
+---
+
+## Поведение
+
+### Overflow → Dropdown
+
+`TabsExtended.Content.DropdownWrapper` получает массив `dropdownItemsIds`
+табов, не поместившихся в строку. `Tabs` фильтрует `tabs` по этим id и
+передаёт в `ButtonDropdown.options`. Выбранный таб подсвечивается через
+`selected={tabs.find(t => t.id === selectedId)}`.
+
+### Keyboard navigation
+
+Roving tabindex по `availableToFocusTabId`:
+
+- `ArrowLeft` → переключает фокус на предыдущий таб (если не первый в строке —
+  `isFirstInlineTab`), `preventDefault` для подавления скролла.
+- `ArrowRight` → следующий таб (если не последний в строке — `isLastInlineTab`).
+- При `onFocus` запоминаются id `prevAvailableToFocusTabId` /
+  `nextAvailableToFocusTabId` — на их кнопки навешиваются `prevTabRef` /
+  `nextTabRef` для программного `.focus()`.
+
+`isFirstInlineTab`/`isLastInlineTab` приходят через render-prop
+`<TabsExtended.Content.Tab>{({ selected, isFirstInlineTab, isLastInlineTab }) => ...}</TabsExtended.Content.Tab>`.
+
+### Defaults
+
+- `size = EComponentSize.MD`
+- `availableToFocusTabId` инициализируется как `selectedId || tabs[0].id` —
+  при пустом `tabs` упадёт (`tabs[0].id`); потребитель должен передавать
+  непустой массив.
+
+---
+
+## Инварианты
+
+- **`children: never`** — структура зашита (`TabsWrapper` + `DropdownWrapper`).
+  Для своей разметки — `TabsExtended`.
+- **`tabs` непустой** — `tabs[0].id` читается без guard'а.
+- **`onSelectTab` обязателен** — таб не сам мутирует `selectedId`, контроллер на потребителе.
+- **`selectedId` управляемый** — `TabsExtended` гарантирует, что повторный выбор того же id не триггерит `onSelectTab` (`if (selectedId !== id)`).
+- **Overflow-кнопка — `ButtonDropdown` с `EButtonDotsTheme.DOTS_SECONDARY`** — менять только осознанно (UX-канон).
+- **Размер кнопки overflow привязан к `size`** через `clsx(styles.tabButtonDropdown, styles[size])`.
+- **`FC, не forwardRef`** — ref не пробрасывается. Если нужен ref на `tablist` — использовать `TabsExtended` напрямую.
+
+---
+
+## Accessibility
+
+- Корневой `<div role="tablist">` приходит из `TabsExtended`.
+- На каждой кнопке таба (`TabsExtended.Content.TabButton`) — `role="tab"` + `aria-selected`.
+- Roving tabindex (`tabIndex = availableToFocusTabId === item.id ? 0 : -1`) —
+  только один таб в tab-стопе клавиатуры.
+- ArrowLeft/ArrowRight перемещают фокус **только в пределах inline-табов**
+  (не в overflow-меню) — для overflow используется родной dropdown.
+- `showNotificationIcon` — визуальный индикатор; для screen-reader потребитель
+  должен добавить текстовый намёк в `label` сам.
+
+---
+
+## Связанные компоненты
+
+- `TabsExtended` — низкоуровневый базовый компонент со слотами.
+- `TabsLine` — горизонтальные табы без overflow-меню.
+- `ButtonDropdown` (`EButtonDotsTheme.DOTS_SECONDARY`) — кнопка overflow.
+
+---
+
+## Stories
+
+Основные истории: `stories/Tabs/Tabs.stories.tsx`
+Примеры: `stories/Tabs/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TabsExtended.md

@@ -0,0 +1,273 @@
+---
+component: TabsExtended
+category: Navigation (base)
+figma-node: ""
+figma-file: ""
+related: [Tabs, TabsLine]
+tokens: []
+stories: ""
+version: "1.0"
+---
+
+# TabsExtended
+
+## Назначение
+
+Низкоуровневая основа табов: рендерит `<div role="tablist">` с контекстом
+для слотов (`Content`, `TabsWrapper`, `Tab`, `TabButton`, `DropdownWrapper`).
+Сам не задаёт компоновку — потребитель выбирает структуру вручную.
+`TabsWrapper` автоматически вычисляет, какие табы не помещаются в строку,
+и передаёт их id в `DropdownWrapper` для overflow-меню.
+
+Используй когда: нужны табы с кастомной разметкой или своим dropdown'ом.
+Для готового решения с `ButtonDropdown` overflow — `Tabs`. Для линейных
+табов без overflow — `TabsLine`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/TabsExtended/
+├── TabsExtended.tsx                          # FC + Composition; Provider
+├── TabsExtendedContext.ts                    # state overflow-распределения
+├── enums.ts                                  # ETabsExtendedType
+├── types.ts                                  # TTabsExtendedOnSelectTab
+├── utils.ts                                  # SIZE→TEXT, TYPE→className maps
+├── components/
+│   ├── TabsExtendedContent.tsx               # FC + Composition
+│   ├── TabsExtendedTabsWrapper.tsx           # measurement + overflow
+│   ├── TabsExtendedTab.tsx                   # forwardRef<HTMLSpanElement>
+│   ├── TabsExtendedTabButton.tsx             # forwardRef<HTMLButtonElement>
+│   ├── TabsExtendedDropdownWrapper.tsx       # render-prop slot
+│   └── TabsExtendedTabContext.ts             # { isFakeTab }
+├── styles/
+└── index.ts
+```
+
+---
+
+## Композиция
+
+```tsx
+<TabsExtended selectedId={id} onSelectTab={setId} type={ETabsExtendedType.TYPE_1}>
+    <TabsExtended.Content size={EComponentSize.MD}>
+        <TabsExtended.Content.TabsWrapper>
+            {tabs.map(t => (
+                <TabsExtended.Content.Tab key={t.id} id={t.id}>
+                    {({ selected, isFirstInlineTab, isLastInlineTab }) => (
+                        <TabsExtended.Content.TabButton selected={selected}>
+                            {t.label}
+                        </TabsExtended.Content.TabButton>
+                    )}
+                </TabsExtended.Content.Tab>
+            ))}
+        </TabsExtended.Content.TabsWrapper>
+
+        <TabsExtended.Content.DropdownWrapper>
+            {({ dropdownItemsIds, onSelectTab }) => (/* свой dropdown */)}
+        </TabsExtended.Content.DropdownWrapper>
+    </TabsExtended.Content>
+</TabsExtended>
+```
+
+Все компоненты экспортируются также напрямую: `TabsExtendedContent`,
+`TabsExtendedTabsWrapper`, `TabsExtendedTab`, `TabsExtendedTabButton`,
+`TabsExtendedDropdownWrapper`.
+
+---
+
+## Публичный API
+
+### `ITabsExtendedProps`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `selectedId` | `string` | — | Id выбранного таба. |
+| `onSelectTab` | `(id: string) => void` | — | Колбэк выбора. Не вызывается, если `id === selectedId`. |
+| `type?` | `ETabsExtendedType` | `TYPE_1` | Стиль таба. |
+| `...HTMLAttributes<HTMLDivElement>` | — | — | На корневой div (role=tablist). |
+
+### `ITabsExtendedContentProps`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `size?` | `EComponentSize` | `MD` | Размер; маппится на CSS-класс через `createSizeToClassNameMap`. |
+| `...HTMLAttributes<HTMLDivElement>` | — | — | На контейнер. |
+
+### `ITabsExtendedTabProps`
+
+```ts
+extends Omit<HTMLAttributes<HTMLSpanElement>, "children">
+{
+    id: string;
+    children: (props: ITabsExtendedItemProvideProps) => ReactNode;
+}
+```
+
+`ITabsExtendedItemProvideProps`:
+
+| Поле | Тип | Описание |
+|---|---|---|
+| `selected` | `boolean` | `selectedId === id`. |
+| `isFirstInlineTab` | `boolean` | Первый в `inlineItemsIds`. |
+| `isLastInlineTab` | `boolean` | Последний в `inlineItemsIds`. |
+
+### `ITabsExtendedButtonProps`
+
+```ts
+extends ButtonHTMLAttributes<HTMLButtonElement>
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `selected?` | `boolean` | — | Подсветка + `aria-selected`. |
+| `size?` | `EComponentSize` | `MD` | Размер. |
+| `showNotificationIcon?` | `boolean` | — | Рендерит `Badge.Dot`. |
+
+Контент рендерится дважды (`Text` default + hover-вариант) для CSS-эффектов.
+
+### `ITabsExtendedTabsWrapperProps`
+
+```ts
+extends HTMLAttributes<HTMLDivElement>
+```
+
+Без публичных полей — только htmlDivAttributes.
+
+### `ITabsExtendedDropdownWrapperProps`
+
+```ts
+extends Omit<HTMLAttributes<HTMLDivElement>, "children">
+{
+    children: (props: ITabsExtendedDropdownWrapperProvideProps) => ReactNode;
+}
+```
+
+`ITabsExtendedDropdownWrapperProvideProps`:
+
+| Поле | Тип | Описание |
+|---|---|---|
+| `dropdownItemsIds` | `string[]` | Id табов, не поместившихся inline. |
+| `onSelectTab` | `(id: string) => void` | Колбэк выбора (тот же, что в Context). |
+
+### Enums
+
+- `ETabsExtendedType`: `TYPE_1` | `TYPE_2`
+
+---
+
+## Контекст
+
+### `TabsExtendedContext`
+
+```ts
+{
+    dropdownItemsIds: string[];        // id табов в overflow
+    inlineItemsIds: string[];          // id видимых inline
+    setDropdownItemsIds(ids): void;
+    setInlineItemsIds(ids): void;
+    selectedId: string;
+    onSelectTab(id): void;             // wrapper, не вызывает onSelect повторно
+    type: ETabsExtendedType;
+    dropdownRef: RefObject<HTMLDivElement>;  // на DropdownWrapper, для замера ширины
+}
+```
+
+### `TabsExtendedTabContext`
+
+```ts
+{ isFakeTab: boolean }
+```
+
+Включается только внутри fake-копии табов (см. ниже).
+
+---
+
+## Overflow-механика (`TabsExtendedTabsWrapper`)
+
+Рендерит **две копии** табов:
+
+1. **`tabsFake`** (скрытый) — внутри `TabsExtendedTabContext.Provider value={isFakeTab: true}`. Табы рендерятся без `id` и без `onClick` (см. `TabsExtendedTab`), `data-` атрибуты у детей удаляются (`stripDataAttributes`). Используется для замера фактической ширины каждого таба.
+2. **`tabsReal`** (видимый) — настоящие табы.
+
+`checkVisibleItems` (вызывается в `useLayoutEffect` + по `useResizeDetector` throttle 150ms):
+- Идёт по детям `tabsFake`, читает `getBoundingClientRect`.
+- Если `right > containerRight - 4 - dropdownWidth` → таб уходит в `dropdownIds`.
+- `containerRight - 4` — учёт padding (2px) + gap (2px).
+- Если **хотя бы один** таб реально вылез за `containerRight` (`overflow = true`),
+  выставляется `setDropdownItemsIds(dropdownIds)`. Иначе — `[]` (всё помещается).
+- Inline-табы — те, у которых `data-tab-item-id` есть и right укладывается.
+
+Размер dropdown отслеживается через `dropdownRef.getBoundingClientRect()` в
+`useLayoutEffect` каждый рендер; при изменении — повторный замер.
+
+---
+
+## `TabsExtendedTab` поведение
+
+- `<span role="presentation" data-tab-item-id={id}>` — оборачивает render-prop children.
+- `id` атрибут НЕ ставится, если `isFakeTab` или таб в `dropdownItemsIds` (избегаем дублирования id в DOM).
+- `onClick` блокируется в fake-режиме.
+- Видимость: при попадании в overflow — добавляется `styles.hidden` (display:none), но таб остаётся в DOM (для пересчёта inline-кадра).
+
+---
+
+## `TabsExtendedTabButton` поведение
+
+- `<button type="button" role="tab" aria-selected={selected}>`.
+- Внутри — два `<Text>` (default + hover) для CSS-перехода стилей.
+- `Badge.Dot` — при `showNotificationIcon`.
+- Размер текста: SIZE→`ETextSize` через `TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP` (LG=B2, MD=B3, SM=B4).
+
+---
+
+## Инварианты
+
+- **`TabsExtended` — `FC` + composition** (`TabsExtended.Content = ...`).
+- **`TabsExtended.Content` — `FC` + composition** (`TabsWrapper`/`Tab`/`TabButton`/`DropdownWrapper`).
+- **`TabsExtendedTab` и `TabsExtendedTabButton` — `forwardRef`** (Span/Button). Не убирать.
+- **`Tab.children` — render-prop**: `(state) => ReactNode`. Не accept'ить плоские дети.
+- **`DropdownWrapper.children` — render-prop**: получает `dropdownItemsIds` + `onSelectTab`.
+- **`TabsWrapper` рендерит две копии children** (fake + real). Любой таб должен корректно работать как fake (без `id`, без onClick).
+- **`stripDataAttributes` чистит только `data-*` пропсы у прямых children** (на 1 уровень). Глубже — потребитель ответственен.
+- **`onSelectTab` в Context — wrapper**, который НЕ вызывает props.onSelectTab при `id === selectedId`. Дедупликация выбора.
+- **`dropdownRef` — на `DropdownWrapper`** (не на самой кнопке dropdown'а потребителя). Используется для замера зарезервированной ширины.
+- **`role="tablist"` / `role="tab"` / `aria-selected`** — обязательная семантика; не переопределять без причины.
+- **`ETabsExtendedType` экспортируется** — часть публичного API.
+
+---
+
+## Accessibility
+
+- `<div role="tablist">` на корне.
+- `<button role="tab" aria-selected>` на каждой кнопке.
+- Управление фокусом (roving tabindex, ArrowLeft/Right) — НЕ встроено;
+  потребитель реализует сам (см. `Tabs`).
+- `<TabsExtendedTab>` — `role="presentation"` (это обёртка, не tab сам по себе).
+- Таб в overflow не имеет id и убран из таб-ордера через `display:none` —
+  попадает в кастомный dropdown потребителя (там ARIA — на потребителе).
+
+---
+
+## Связанные компоненты
+
+- `Tabs` — готовый таб-бар поверх TabsExtended с `ButtonDropdown` overflow.
+- `TabsLine` — горизонтальные линейные табы (без overflow, своя реализация).
+- `Badge.Dot` — индикатор в `TabButton`.
+- `Typography.Text` — текст лейбла.
+
+---
+
+## Stories
+
+Отдельных stories нет — демонстрируется через `Tabs` и собственные примеры
+в `src/components/TabsExtended/components/index.ts` (`Type1Example`, `Type2Example`, `PlaygroundExample`).
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TabsLine.md

@@ -0,0 +1,189 @@
+---
+component: TabsLine
+category: Navigation
+figma-node: ""
+figma-file: ""
+related: [Tabs, TabsExtended, MobileView, Dropdown]
+tokens: []
+stories: stories/TabsLine/TabsLine.stories.tsx
+version: "1.0"
+---
+
+# TabsLine
+
+## Назначение
+
+Линейные табы — кнопки, разделённые тонкой линией снизу, без текстового
+содержимого внутри. Отдельная реализация (НЕ поверх `TabsExtended`).
+Адаптивная: desktop рендерит `TabsLineDesktop` с overflow в `Dropdown`,
+mobile — горизонтальный скролл (`TabsLineMobile`). Переключение через
+`MobileView` по media query.
+
+Используй когда: нужны "линейные" табы 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
+```
+
+---
+
+## Публичный 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`
+
+```ts
+extends Omit<HTMLAttributes<HTMLDivElement>, "children">
+{ tabs; onChangeTab; selectedId; size? }
+```
+
+Общая база Desktop/Mobile вариантов.
+
+---
+
+## Поведение Desktop (`TabsLineDesktop`)
+
+### Распределение inline / dropdown
+
+`useEffect` на `[tabs, maxVisible]`:
+- Если `maxVisible` задан И `i + 1 >= maxVisible` И `tabs.length > maxVisible` → `dropdownTabs`. Иначе → `inlineTabs`.
+- Сравнение через `isEqual` (lodash) перед `setState` — избегаем лишних рендеров.
+
+`maxVisible` без overflow (когда `tabs.length <= maxVisible`) — все остаются inline.
+
+### Overflow-кнопка (`TabsLineDropdown`)
+
+- Рендерится после 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`.
+
+### Keyboard navigation
+
+Roving tabindex по `focusableTabIndexRef` (ref, не state):
+- `ArrowLeft` / `ArrowRight` (на `event.code`!) — двигают фокус по `inlineTabsRefs.current[index ± 1]`.
+- ArrowRight на последнем inline-табе **не** переходит на dropdown-кнопку (`isLastInlineTab` блокирует).
+- `onFocus` обновляет `focusableTabIndexRef.current = index`; `onBlur` сбрасывает в `0`.
+
+---
+
+## Поведение Mobile (`TabsLineMobile`)
+
+- Простая горизонтальная лента (`overflow-x: auto` через CSS).
+- НЕТ overflow-меню — табы прокручиваются.
+- НЕ принимает `maxVisible`, `paddingX`, `withSeparator`, `size` — игнорируются на mobile.
+- Возвращает `null` при пустом `tabs`.
+
+---
+
+## `TabsLineItem` поведение
+
+- `<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` таба!).
+
+---
+
+## Инварианты
+
+- **`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`) — это разные подсистемы.
+
+---
+
+## 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).
+
+---
+
+## Связанные компоненты
+
+- `Tabs` — табы с overflow через `ButtonDropdown`.
+- `TabsExtended` — низкоуровневая альтернатива (composition slots).
+- `MobileView` — переключение desktop/mobile.
+- `Dropdown` / `DropdownList` — overflow-меню в desktop-варианте.
+- `Badge.Dot` — индикатор уведомлений.
+- `Typography.Text` — текст лейбла.
+
+---
+
+## Stories
+
+Основные истории: `stories/TabsLine/TabsLine.stories.tsx`
+Примеры: `stories/TabsLine/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |