@sberbusiness/triplex-next-mcp-server 1.42.0-beta → 1.43.0-beta

package/bundle/components/TabsExtended.md

@@ -1,11 +1,19 @@
 ---
 component: TabsExtended
-category: Navigation (base)
-figma-node: ""
-figma-file: ""
-related: [Tabs, TabsLine]
-tokens: []
-stories: ""
+category: Tabs
+related: [Tabs, TabsLine, Badge, Text]
+tokens:
+  - --triplex-next-Tabs-Type1_Background
+  - --triplex-next-Tabs-Type2_Background
+  - --triplex-next-Tabs-Type1_Tab_Background_Default
+  - --triplex-next-Tabs-Type2_Tab_Background_Default
+  - --triplex-next-Tabs-Type1_Tab_Background_Hover
+  - --triplex-next-Tabs-Type2_Tab_Background_Hover
+  - --triplex-next-Tabs-Type1_Tab_Background_Selected
+  - --triplex-next-Tabs-Type2_Tab_Background_Selected
+  - --triplex-next-Tabs-Tab_BorderColor_Default
+  - --triplex-next-Tabs-Tab_BorderColor_Focus
+stories: stories/TabsExtended/TabsExtended.stories.tsx
 version: "1.0"
 ---
 
@@ -13,261 +21,439 @@ version: "1.0"
 
 ## Назначение
 
-Низкоуровневая основа табов: рендерит `<div role="tablist">` с контекстом
-для слотов (`Content`, `TabsWrapper`, `Tab`, `TabButton`, `DropdownWrapper`).
-Сам не задаёт компоновку — потребитель выбирает структуру вручную.
-`TabsWrapper` автоматически вычисляет, какие табы не помещаются в строку,
-и передаёт их id в `DropdownWrapper` для overflow-меню.
+Базовый компонент табов-переключателей: сам он задаёт контекст, корневой контейнер с `role="tablist"` и логику «какие табы не поместились в строку», а разметку каждого таба собирает потребитель из субкомпонентов. Табы, которые не помещаются по ширине, автоматически уезжают в выпадающий список — его рендерит потребитель через render-prop.
 
-Используй когда: нужны табы с кастомной разметкой или своим dropdown'ом.
-Для готового решения с `ButtonDropdown` overflow — `Tabs`. Для линейных
-табов без overflow — `TabsLine`.
+Используй когда: нужны табы с нестандартным содержимым или нестандартным триггером выпадающего списка — то, что нельзя выразить через готовый `Tabs`.
+Не используй когда:
+
+- достаточно списка табов «лейбл + значок уведомления» — возьми `Tabs`: он собран поверх `TabsExtended`, добавляет клавиатурную навигацию стрелками и готовую кнопку выпадающего списка;
+- нужны табы-подчёркивания в шапке раздела — возьми `TabsLine`;
+- нужен просто набор переключателей без семантики табов — это не задача компонента.
 
 ---
 
-## Файловая структура
+## Состав (compound-компонент)
 
-```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
-```
+Состав задаётся вложенностью субкомпонентов, порядок важен: `TabsWrapper` должен идти раньше `DropdownWrapper`.
 
----
+| Субкомпонент | Обязателен | Что делает |
+|---|---|---|
+| `TabsExtended.Content` | Да | Контейнер с фоном, скруглением и внутренними отступами. Несёт размер (`size`) |
+| `TabsExtended.Content.TabsWrapper` | Да | Рендерит табы и скрытую копию табов для замеров. По замерам решает, какие табы уезжают в Dropdown |
+| `TabsExtended.Content.Tab` | Да | Контейнер (`<span>`) одного таба. Render-prop отдаёт `selected`, `isFirstInlineTab`, `isLastInlineTab`. Обрабатывает клик |
+| `TabsExtended.Content.TabButton` | Практически всегда | Кнопка таба: `<button role="tab">` с текстом и опциональным значком уведомлений |
+| `TabsExtended.Content.DropdownWrapper` | Нет | Контейнер выпадающего списка. Render-prop отдаёт id не поместившихся табов и обработчик выбора. Скрыт (`hidden`), пока все табы помещаются |
 
-## Композиция
+Без `DropdownWrapper` компонент работает, но не поместившиеся табы просто исчезают из строки — попасть в них будет нельзя.
 
-```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`.
+## Варианты и props
 
----
+`ITabsExtendedProps` расширяет `React.HTMLAttributes<HTMLDivElement>`. Неизвестные компоненту атрибуты уходят на корневой `<div>`.
 
-## Публичный API
+### Обязательные props
 
-### `ITabsExtendedProps`
+| Prop | Тип | Описание |
+|---|---|---|
+| `selectedId` | `string` | Id выбранного таба. Компонент полностью управляемый: своего состояния выбора у него нет |
+| `onSelectTab` | `TTabsExtendedOnSelectTab` | Запрос на смену выбранного таба. Вызывается **только** если кликнули по табу, отличному от `selectedId` |
+
+### Опциональные props
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `selectedId` | `string` | — | Id выбранного таба. |
-| `onSelectTab` | `(id: string) => void` | — | Колбэк выбора. Не вызывается, если `id === selectedId`. |
-| `type?` | `ETabsExtendedType` | `TYPE_1` | Стиль таба. |
-| `...HTMLAttributes<HTMLDivElement>` | — | — | На корневой div (role=tablist). |
+| `type` | `ETabsExtendedType` | `TYPE_1` | Тип оформления, выбирается по фону **страницы**: `TYPE_1` — серый фон контейнера, для белой страницы; `TYPE_2` — белый фон контейнера, для затенённой страницы. Значение уходит в контекст и применяется к кнопкам таба |
 
-### `ITabsExtendedContentProps`
+### Props субкомпонентов
 
-| Prop | Тип | Default | Описание |
+| Субкомпонент | Prop | По умолчанию | Описание |
 |---|---|---|---|
-| `size?` | `EComponentSize` | `MD` | Размер; маппится на CSS-класс через `createSizeToClassNameMap`. |
-| `...HTMLAttributes<HTMLDivElement>` | — | — | На контейнер. |
+| `Content` | `size` | `EComponentSize.MD` | Скругление и внутренние отступы контейнера |
+| `Tab` | `id` | — | Id таба. Сопоставляется с `selectedId` и с id из `DropdownWrapper` |
+| `TabButton` | `selected` | `false` | Выбранное состояние: класс `selected` и `aria-selected` |
+| `TabButton` | `size` | `EComponentSize.MD` | Размер кнопки и размер текста внутри неё |
+| `TabButton` | `showNotificationIcon` | `false` | Значок новых уведомлений (`Badge.Dot`) в правом верхнем углу кнопки |
 
-### `ITabsExtendedTabProps`
+### Ограничения
 
-```ts
-extends Omit<HTMLAttributes<HTMLSpanElement>, "children">
-{
-    id: string;
-    children: (props: ITabsExtendedItemProvideProps) => ReactNode;
-}
-```
+- `size` на `Content` и `size` на `TabButton` — **независимые props**. Контейнер не транслирует свой размер кнопкам; передавать нужно оба, иначе отступы контейнера и высота кнопок разойдутся.
+- `Tab` и `DropdownWrapper` принимают `children` только как функцию (render-prop). Обычные узлы туда положить нельзя — тип это запрещает.
+- Компонент не рендерит выпадающий список сам: и триггер, и список — целиком на потребителе. В библиотеке для этого обычно берут `ButtonDropdown`.
+- **Высоту триггера потребитель обязан согласовать с высотой кнопки таба.** `DropdownWrapper` — обычный flex-элемент строки, а строка тянется по самому высокому: `ButtonDropdown` размера MD — 40px против 32px у таба того же размера, поэтому «сырой» триггер растягивает и контейнер (40px → 48px), и сами табы (32px → 40px, из-за `align-items: stretch`). Ориентир по высоте: SM — 20px, MD — 32px, LG — 40px; в библиотеке это зашито в `Tabs` классом `.tabButtonDropdown`, в примерах stories — через `buttonAttributes.style`.
+- У `TabButton` нет собственного оформления для `disabled`: атрибут проставится, но визуально кнопка не изменится.
+- Возможность переопределить роль зависит от порядка спреда и у каждого субкомпонента своя: на `TabsExtended` `role="tablist"` стоит до `...rest` — переопределяется; на `Tab` `role="presentation"` и `data-tab-item-id` стоят после спреда — не переопределяются (и `data-tab-item-id` трогать нельзя, по нему идут замеры); на `TabButton` спред идёт последним — переопределяется всё, включая `role="tab"`, `aria-selected` и `type`.
 
-`ITabsExtendedItemProvideProps`:
+---
 
-| Поле | Тип | Описание |
-|---|---|---|
-| `selected` | `boolean` | `selectedId === id`. |
-| `isFirstInlineTab` | `boolean` | Первый в `inlineItemsIds`. |
-| `isLastInlineTab` | `boolean` | Последний в `inlineItemsIds`. |
+## Дизайн-токены
 
-### `ITabsExtendedButtonProps`
+Компонент использует токены семейства `Tabs` — они общие с `Tabs`:
 
-```ts
-extends ButtonHTMLAttributes<HTMLButtonElement>
+```text
+--triplex-next-Tabs-Type1_Background
+--triplex-next-Tabs-Type2_Background
+--triplex-next-Tabs-Type1_Tab_Background_Default
+--triplex-next-Tabs-Type2_Tab_Background_Default
+--triplex-next-Tabs-Type1_Tab_Background_Hover
+--triplex-next-Tabs-Type2_Tab_Background_Hover
+--triplex-next-Tabs-Type1_Tab_Background_Selected
+--triplex-next-Tabs-Type2_Tab_Background_Selected
+--triplex-next-Tabs-Tab_BorderColor_Default
+--triplex-next-Tabs-Tab_BorderColor_Focus
 ```
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `selected?` | `boolean` | — | Подсветка + `aria-selected`. |
-| `size?` | `EComponentSize` | `MD` | Размер. |
-| `showNotificationIcon?` | `boolean` | — | Рендерит `Badge.Dot`. |
+Собственного префикса `--triplex-next-TabsExtended-*` у компонента нет: переименование токенов `Tabs` ломает оба компонента сразу.
 
-Контент рендерится дважды (`Text` default + hover-вариант) для CSS-эффектов.
+---
 
-### `ITabsExtendedTabsWrapperProps`
+## Инварианты
 
-```ts
-extends HTMLAttributes<HTMLDivElement>
-```
+- `forwardRef` есть у `TabsExtended` и всех пяти публичных субкомпонентов — не убирать. Ref указывает на тот же элемент, который получает `className` и `...rest`: у `TabsWrapper` это **отображаемый** контейнер (`tabsReal`), а не скрытый контейнер замеров.
+- `TabsExtended` — `forwardRef`-компонент со статическим свойством `Content`, у `Content` — статические `TabsWrapper`, `Tab`, `TabButton`, `DropdownWrapper`. Набор статических свойств — часть публичного API.
+- Интерфейс props кнопки называется `ITabsExtendedButtonProps` (без `Tab` в середине) — рассинхрон с именем компонента `TabsExtendedTabButton`. Переименование — breaking change, требует отдельного согласования.
+- Атрибут `data-tab-item-id` на `Tab` — контракт замеров: по нему `TabsWrapper` находит табы среди детей скрытого контейнера. Не переименовывать и не снимать.
+- Скрытый контейнер `tabsFake` обязан идти в разметке **раньше** отображаемого `tabsReal`: на этом построено сравнение позиций.
+- `TabsWrapper` копирует `children` в скрытый контейнер, вырезая `data-`атрибуты потребителя (`stripDataAttributes`). Это нужно, чтобы селекторы по `data-`атрибутам не находили две копии одного таба. Копия создаётся через `React.createElement(child.type, props)` — компонент-обёртка вокруг `Tab` в копию не попадёт корректно, вкладывать `Tab` в собственные обёртки не стоит.
+- У таба, уехавшего в Dropdown, и у любого таба из скрытой копии атрибут `id` снимается — иначе в DOM оказались бы два элемента с одинаковым `id`. `data-tab-item-id` при этом остаётся.
+- Контекст `TabsExtendedContext` и `TabsExtendedTabContext` через barrel `index.ts` не экспортируются (`TabsExtendedTabContext` реэкспортируется из `components/index.ts` — это исторический факт, а не приглашение им пользоваться). Их форма — внутренняя деталь.
+- `Tabs` построен поверх `TabsExtended` и опирается на `isFirstInlineTab` / `isLastInlineTab` в клавиатурной навигации. Любое изменение семантики этих флагов ломает `Tabs`.
+- Значение контекста мемоизировано (`useMemo`), а `onSelectTab` обёрнут в `useCallback`. Возврат к пересозданию объекта на каждый рендер вернёт лишние перерисовки всех табов.
 
-Без публичных полей — только htmlDivAttributes.
+---
 
-### `ITabsExtendedDropdownWrapperProps`
+## Accessibility
 
-```ts
-extends Omit<HTMLAttributes<HTMLDivElement>, "children">
-{
-    children: (props: ITabsExtendedDropdownWrapperProvideProps) => ReactNode;
-}
-```
+- Корневой элемент — `role="tablist"`, кнопка таба — `role="tab"` с `aria-selected`. Контейнер таба (`<span>`) помечен `role="presentation"`, чтобы не добавлять лишний уровень в дерево доступности.
+- `aria-controls` и связку с панелью контента компонент **не выставляет** — если табы переключают панели, `id` панели и `aria-controls` проставляет потребитель.
+- Клавиатурной навигации стрелками у `TabsExtended` нет: обработка `ArrowLeft` / `ArrowRight` и roving `tabIndex` живут в `Tabs`. Если строишь свой набор табов на `TabsExtended`, клавиатуру нужно реализовать самому — флаги `isFirstInlineTab` / `isLastInlineTab` из render-prop `Tab` для этого и предназначены.
+- Выбор таба срабатывает по клику на контейнере `Tab`; нативная активация `<button>` по `Enter` / `Space` работает за счёт того, что `TabButton` рендерит настоящий `<button>`. Если подставляешь свой компонент кнопки, он тоже должен рендерить `<button>`, иначе выбор с клавиатуры сломается.
+- Фокус подсвечивается через `:focus-visible` (токен `Tab_BorderColor_Focus`) — только при клавиатурной навигации.
+- Таб, уехавший в Dropdown, скрыт через `display: none` и из порядка обхода клавиатурой выпадает; попасть в него можно только через выпадающий список.
+- Компонент не хардкодит текст: `aria-label` кнопки выпадающего списка задаёт потребитель (библиотека мультиязычная).
 
-`ITabsExtendedDropdownWrapperProvideProps`:
+---
 
-| Поле | Тип | Описание |
-|---|---|---|
-| `dropdownItemsIds` | `string[]` | Id табов, не поместившихся inline. |
-| `onSelectTab` | `(id: string) => void` | Колбэк выбора (тот же, что в Context). |
+## Связанные компоненты
 
-### Enums
+Отдельного AI.md нет ни у одного субкомпонента семейства — все они описаны здесь. Это область задачи TRI-91 («Scope: только TabsExtended»): в таблице `docs/ai/ROADMAP.md` у `TabsExtended` одна строка.
 
-- `ETabsExtendedType`: `TYPE_1` | `TYPE_2`
+**Части составного компонента (`components/`):**
 
----
+- `TabsExtendedContent` — контейнер с фоном и размером; хост статических субкомпонентов.
+- `TabsExtendedTabsWrapper` — замеры и распределение табов между строкой и Dropdown; единственное место, где живёт `useResizeDetector`.
+- `TabsExtendedTab` — контейнер таба, обработка клика, render-prop с состоянием.
+- `TabsExtendedTabButton` — кнопка таба: два слоя текста (обычный и hover-состояние) и значок уведомлений.
+- `TabsExtendedDropdownWrapper` — контейнер выпадающего списка; отдаёт наружу id не поместившихся табов.
 
-## Контекст
+**Инфраструктура (через barrel не экспортируется):**
 
-### `TabsExtendedContext`
+- `TabsExtendedContext` — выбранный таб, распределение табов, ref на Dropdown, тип оформления.
+- `TabsExtendedTabContext` — флаг `isFakeTab`, отличающий скрытую копию таба от отображаемой.
+- `utils.ts` — маппинги «размер → размер текста» и «тип → CSS-класс».
 
-```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`
+- `Tabs` — готовые табы поверх `TabsExtended`: принимает массив `tabs`, сам рендерит `ButtonDropdown` и добавляет навигацию стрелками. Первый выбор для типовой задачи.
+- `TabsLine` — альтернативный визуальный паттерн табов (подчёркивание вместо залитой кнопки), собственной логики переполнения не имеет.
+- `Badge` — `TabButton` рендерит `Badge.Dot` как значок новых уведомлений.
+- `Text` — текст внутри `TabButton`; размер выбирается по `size` через `TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP`.
+- `ButtonDropdown` — компонент, которым в примерах и в `Tabs` заполняется `DropdownWrapper`. Зависимости от него у `TabsExtended` нет.
 
-```ts
-{ isFakeTab: boolean }
-```
+---
+
+## Stories
+
+Основные истории: `stories/TabsExtended/TabsExtended.stories.tsx`
+Файлы примеров: `stories/TabsExtended/examples/`
 
-Включается только внутри fake-копии табов (см. ниже).
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `type`, размера, количества табов и ширины контейнера |
+| `Default` | `Default.tsx` | Минимальный состав: три таба без выпадающего списка |
+| `Types` | `Types.tsx` | Типы оформления `TYPE_1` и `TYPE_2` |
+| `Sizes` | `Sizes.tsx` | Размеры SM / MD / LG на `Content` и `TabButton` |
+| `WithNotificationIcon` | `WithNotificationIcon.tsx` | Значок новых уведомлений на табах |
+| `WithDropdown` | `WithDropdown.tsx` | Узкий контейнер: часть табов уезжает в `ButtonDropdown` |
+| `VisualTests` | `VisualTests.tsx` | Типы × размеры, значок уведомлений, раскрытый выпадающий список, `:focus-visible` на табе (через `play`) |
 
 ---
 
-## Overflow-механика (`TabsExtendedTabsWrapper`)
+## История изменений
 
-Рендерит **две копии** табов:
+| Дата | Изменение |
+|---|---|
+| 2026-08-14 | Создан документ AI-ready для `TabsExtended` (TRI-91). |
+| 2026-08-14 | Правки по ревью (документация и stories, кода компонента не касаются): в «Ограничения» добавлено требование согласовывать высоту триггера Dropdown с высотой кнопки таба — «сырой» `ButtonDropdown` растягивает контейнер и табы; в примерах stories это согласование сделано через `buttonAttributes.style` (проверено в браузере: контейнер 48px → 40px, таб 40px → 32px). Описание `ETabsExtendedType` в JSDoc и здесь приведено к одной формулировке — тип выбирается по фону страницы, а не контейнера. |
+| 2026-08-14 | AI-рефакторинг: `TabsExtended`, `TabsExtendedContent`, `TabsExtendedTabsWrapper` и `TabsExtendedDropdownWrapper` переведены с `React.FC` на `forwardRef` (у `DropdownWrapper` ref потребителя объединён с внутренним ref замеров), у всех субкомпонентов появился `displayName`. Значение контекста мемоизировано. В `TabsWrapper` убраны non-null assertion'ы, чтение ref во время рендера заменено на состояние, зависимости `useLayoutEffect` приведены в порядок, константы и `stripDataAttributes` вынесены на module scope. JSDoc проставлен на всех публичных props, enum и типах. Публичный API (имена props, значения enum, barrel-экспорты) не изменён. Добавлены unit-тесты на все субкомпоненты и stories по modern pattern. |
 
-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` каждый рендер; при изменении — повторный замер.
+### Default
 
----
+`stories/TabsExtended/examples/Default.tsx`
 
-## `TabsExtendedTab` поведение
+```tsx
+import React, { useState } from "react";
+import { TabsExtended } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Обзор" },
+    { id: "tab-2", label: "Операции" },
+    { id: "tab-3", label: "Документы" },
+];
+
+export const Default = () => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <TabsExtended selectedId={selectedId} onSelectTab={setSelectedId}>
+            <TabsExtended.Content>
+                <TabsExtended.Content.TabsWrapper>
+                    {TABS.map(({ id, label }) => (
+                        <TabsExtended.Content.Tab key={id} id={id}>
+                            {({ selected }) => (
+                                <TabsExtended.Content.TabButton selected={selected}>
+                                    {label}
+                                </TabsExtended.Content.TabButton>
+                            )}
+                        </TabsExtended.Content.Tab>
+                    ))}
+                </TabsExtended.Content.TabsWrapper>
+            </TabsExtended.Content>
+        </TabsExtended>
+    );
+};
+```
 
-- `<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-кадра).
+### Types
 
----
+`stories/TabsExtended/examples/Types.tsx`
 
-## `TabsExtendedTabButton` поведение
+```tsx
+import React, { useState } from "react";
+import { ETabsExtendedType, TabsExtended } from "@sberbusiness/triplex-next";
 
-- `<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).
+const TABS = [
+    { id: "tab-1", label: "Обзор" },
+    { id: "tab-2", label: "Операции" },
+    { id: "tab-3", label: "Документы" },
+];
 
----
+interface ITypeItemProps {
+    type: ETabsExtendedType;
+}
 
-## Инварианты
+const TypeItem = ({ type }: ITypeItemProps) => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{type}</div>
+            <TabsExtended type={type} selectedId={selectedId} onSelectTab={setSelectedId}>
+                <TabsExtended.Content>
+                    <TabsExtended.Content.TabsWrapper>
+                        {TABS.map(({ id, label }) => (
+                            <TabsExtended.Content.Tab key={id} id={id}>
+                                {({ selected }) => (
+                                    <TabsExtended.Content.TabButton selected={selected}>
+                                        {label}
+                                    </TabsExtended.Content.TabButton>
+                                )}
+                            </TabsExtended.Content.Tab>
+                        ))}
+                    </TabsExtended.Content.TabsWrapper>
+                </TabsExtended.Content>
+            </TabsExtended>
+        </div>
+    );
+};
+
+const TYPES = Object.values(ETabsExtendedType);
+
+export const Types = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {TYPES.map((type) => (
+            <TypeItem key={type} type={type} />
+        ))}
+    </div>
+);
+```
 
-- **`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.
+### Sizes
 
----
+`stories/TabsExtended/examples/Sizes.tsx`
 
-## Accessibility
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, TabsExtended } from "@sberbusiness/triplex-next";
 
-- `<div role="tablist">` на корне.
-- `<button role="tab" aria-selected>` на каждой кнопке.
-- Управление фокусом (roving tabindex, ArrowLeft/Right) — НЕ встроено;
-  потребитель реализует сам (см. `Tabs`).
-- `<TabsExtendedTab>` — `role="presentation"` (это обёртка, не tab сам по себе).
-- Таб в overflow не имеет id и убран из таб-ордера через `display:none` —
-  попадает в кастомный dropdown потребителя (там ARIA — на потребителе).
+const TABS = [
+    { id: "tab-1", label: "Обзор" },
+    { id: "tab-2", label: "Операции" },
+    { id: "tab-3", label: "Документы" },
+];
 
----
+interface ISizeItemProps {
+    size: EComponentSize;
+}
 
-## Связанные компоненты
+const SizeItem = ({ size }: ISizeItemProps) => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+            <TabsExtended selectedId={selectedId} onSelectTab={setSelectedId}>
+                {/* size задаётся отдельно: на Content — отступы и скругление контейнера, на TabButton — высота кнопки. */}
+                <TabsExtended.Content size={size}>
+                    <TabsExtended.Content.TabsWrapper>
+                        {TABS.map(({ id, label }) => (
+                            <TabsExtended.Content.Tab key={id} id={id}>
+                                {({ selected }) => (
+                                    <TabsExtended.Content.TabButton selected={selected} size={size}>
+                                        {label}
+                                    </TabsExtended.Content.TabButton>
+                                )}
+                            </TabsExtended.Content.Tab>
+                        ))}
+                    </TabsExtended.Content.TabsWrapper>
+                </TabsExtended.Content>
+            </TabsExtended>
+        </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>
+);
+```
 
-- `Tabs` — готовый таб-бар поверх TabsExtended с `ButtonDropdown` overflow.
-- `TabsLine` — горизонтальные линейные табы (без overflow, своя реализация).
-- `Badge.Dot` — индикатор в `TabButton`.
-- `Typography.Text` — текст лейбла.
+### WithNotificationIcon
 
----
+`stories/TabsExtended/examples/WithNotificationIcon.tsx`
 
-## Stories
+```tsx
+import React, { useState } from "react";
+import { TabsExtended } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Обзор", showNotificationIcon: false },
+    { id: "tab-2", label: "Операции", showNotificationIcon: true },
+    { id: "tab-3", label: "Документы", showNotificationIcon: true },
+];
+
+export const WithNotificationIcon = () => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <TabsExtended selectedId={selectedId} onSelectTab={setSelectedId}>
+            <TabsExtended.Content>
+                <TabsExtended.Content.TabsWrapper>
+                    {TABS.map(({ id, label, showNotificationIcon }) => (
+                        <TabsExtended.Content.Tab key={id} id={id}>
+                            {({ selected }) => (
+                                <TabsExtended.Content.TabButton
+                                    selected={selected}
+                                    showNotificationIcon={showNotificationIcon}
+                                >
+                                    {label}
+                                </TabsExtended.Content.TabButton>
+                            )}
+                        </TabsExtended.Content.Tab>
+                    ))}
+                </TabsExtended.Content.TabsWrapper>
+            </TabsExtended.Content>
+        </TabsExtended>
+    );
+};
+```
 
-Отдельных stories нет — демонстрируется через `Tabs` и собственные примеры
-в `src/components/TabsExtended/components/index.ts` (`Type1Example`, `Type2Example`, `PlaygroundExample`).
+### WithDropdown
 
----
+`stories/TabsExtended/examples/WithDropdown.tsx`
 
-## История изменений
+```tsx
+import React, { useState } from "react";
+import {
+    ButtonDropdown,
+    EButtonDotsTheme,
+    EComponentSize,
+    ITabsExtendedDropdownWrapperProvideProps,
+    TabsExtended,
+} from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Обзор" },
+    { id: "tab-2", label: "Операции" },
+    { id: "tab-3", label: "Документы" },
+    { id: "tab-4", label: "Реквизиты" },
+    { id: "tab-5", label: "Выписка" },
+    { id: "tab-6", label: "Настройки" },
+];
+
+/**
+ * Высоту триггера нужно согласовать с высотой кнопки таба: по умолчанию кнопка размера MD
+ * выше таба (40px против 32px) и растягивает по себе и контейнер, и сами табы.
+ */
+const DROPDOWN_TRIGGER_STYLE: React.CSSProperties = {
+    minWidth: "32px",
+    minHeight: "32px",
+    height: "32px",
+    padding: 0,
+    justifyContent: "center",
+};
+
+export const WithDropdown = () => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    /** Табы, не поместившиеся в строку, превращаются в опции выпадающего списка. */
+    const getDropdownOptions = ({ dropdownItemsIds, onSelectTab }: ITabsExtendedDropdownWrapperProvideProps) =>
+        TABS.filter(({ id }) => dropdownItemsIds.includes(id)).map((tab) => ({
+            ...tab,
+            onSelect: () => onSelectTab(tab.id),
+        }));
+
+    return (
+        // Ширина контейнера ограничена, чтобы часть табов не поместилась в строку.
+        <div style={{ maxWidth: "420px" }}>
+            <TabsExtended selectedId={selectedId} onSelectTab={setSelectedId}>
+                <TabsExtended.Content>
+                    <TabsExtended.Content.TabsWrapper>
+                        {TABS.map(({ id, label }) => (
+                            <TabsExtended.Content.Tab key={id} id={id}>
+                                {({ selected }) => (
+                                    <TabsExtended.Content.TabButton selected={selected}>
+                                        {label}
+                                    </TabsExtended.Content.TabButton>
+                                )}
+                            </TabsExtended.Content.Tab>
+                        ))}
+                    </TabsExtended.Content.TabsWrapper>
+
+                    <TabsExtended.Content.DropdownWrapper>
+                        {(provideProps) => (
+                            <ButtonDropdown
+                                theme={EButtonDotsTheme.DOTS_SECONDARY}
+                                size={EComponentSize.MD}
+                                options={getDropdownOptions(provideProps)}
+                                selected={TABS.find(({ id }) => id === selectedId)}
+                                buttonAttributes={{ "aria-label": "Ещё табы", style: DROPDOWN_TRIGGER_STYLE }}
+                            />
+                        )}
+                    </TabsExtended.Content.DropdownWrapper>
+                </TabsExtended.Content>
+            </TabsExtended>
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |