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

package/bundle/components/SwipeableArea.md

@@ -234,7 +234,7 @@ export const Default = () => (
                     rightSwipeableArea={
                         <ListItemControls>
                             <ListItemControlsButton
-                                icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                icon={<AttachmentStrokeSrvIcon20 paletteIndex={0} />}
                                 onClick={() => {}}
                             >
                                 Скачать
@@ -279,7 +279,7 @@ export const WithBothAreas = () => (
                     leftSwipeableArea={
                         <ListItemControls>
                             <ListItemControlsButton
-                                icon={<DefaulticonStrokePrdIcon20 paletteIndex={5} />}
+                                icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
                                 onClick={() => {}}
                             >
                                 В архив
@@ -289,7 +289,7 @@ export const WithBothAreas = () => (
                     rightSwipeableArea={
                         <ListItemControls>
                             <ListItemControlsButton
-                                icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                icon={<AttachmentStrokeSrvIcon20 paletteIndex={0} />}
                                 onClick={() => {}}
                             >
                                 Скачать
@@ -368,7 +368,7 @@ export const ImperativeApi = () => {
                         leftSwipeableArea={
                             <ListItemControls>
                                 <ListItemControlsButton
-                                    icon={<DefaulticonStrokePrdIcon20 paletteIndex={5} />}
+                                    icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
                                     onClick={() => {}}
                                 >
                                     В архив
@@ -378,7 +378,7 @@ export const ImperativeApi = () => {
                         rightSwipeableArea={
                             <ListItemControls>
                                 <ListItemControlsButton
-                                    icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                    icon={<AttachmentStrokeSrvIcon20 paletteIndex={0} />}
                                     onClick={() => {}}
                                 >
                                     Скачать
@@ -451,13 +451,13 @@ export const Example = () => {
                             rightSwipeableArea={
                                 <ListItemControls>
                                     <ListItemControlsButton
-                                        icon={<AttachmentStrokeSrvIcon20 paletteIndex={5} />}
+                                        icon={<AttachmentStrokeSrvIcon20 paletteIndex={0} />}
                                         onClick={() => {}}
                                     >
                                         Скачать
                                     </ListItemControlsButton>
                                     <ListItemControlsButtonDropdown
-                                        icon={<DotshorizontalStrokeSrvIcon20 paletteIndex={5} />}
+                                        icon={<DotshorizontalStrokeSrvIcon20 paletteIndex={0} />}
                                         options={[
                                             { id: `${payment.id}-option-1`, label: "Повторить", onSelect: () => {} },
                                             { id: `${payment.id}-option-2`, label: "Удалить", onSelect: () => {} },

package/bundle/components/Tabs.md

@@ -1,10 +1,10 @@
 ---
 component: Tabs
-category: Navigation
-figma-node: ""
-figma-file: ""
-related: [TabsExtended, TabsLine]
-tokens: []
+category: Tabs
+related: [TabsExtended, TabsLine, ButtonDropdown]
+tokens:
+  - Tabs.Type1_Tab_Background_Selected
+  - Tabs.Type2_Tab_Background_Selected
 stories: stories/Tabs/Tabs.stories.tsx
 version: "1.0"
 ---
@@ -13,135 +13,121 @@ version: "1.0"
 
 ## Назначение
 
-Готовый компонент табов с overflow-меню (`ButtonDropdown` с `DOTS_SECONDARY`):
-табы, не помещающиеся в строку, автоматически уезжают в выпадающее меню.
-Принимает простой массив `tabs: ITabsItem[]` вместо children-композиции.
-Под капотом — `TabsExtended` с фиксированной разметкой
-`Content > TabsWrapper + DropdownWrapper`.
+Готовые табы-переключатели поверх `TabsExtended`: компонент принимает массив табов, сам собирает разметку, сам рендерит кнопку выпадающего списка для не поместившихся табов и сам обрабатывает навигацию стрелками.
 
-Используй когда: нужен стандартный таб-бар с поддержкой переполнения.
-Для кастомной разметки (свой dropdown, иконки, другие заголовки) —
-`TabsExtended` напрямую. Для простых горизонтальных линейных табов без
-overflow — `TabsLine`.
+Используй когда: нужен типовой набор табов «лейбл + опциональный значок уведомлений» — это первый выбор для обычной задачи.
+Не используй когда:
 
----
-
-## Файловая структура
-
-```text
-src/components/Tabs/
-├── Tabs.tsx     # FC<ITabsProps>; склейка TabsExtended + ButtonDropdown
-├── styles/
-│   ├── Tabs.module.less
-│   └── Tabs.less
-└── index.ts
-```
+- содержимое таба нестандартное (своя разметка, свой триггер выпадающего списка) — бери `TabsExtended`, `Tabs` собран поверх него;
+- нужны табы-подчёркивания в шапке раздела — бери `TabsLine`;
+- нужен набор переключателей без семантики табов — это не задача компонента.
 
 ---
 
-## Публичный API
+## Варианты и props
 
-### `ITabsItem`
+`ITabsProps` расширяет `ITabsExtendedProps` (а тот — `React.HTMLAttributes<HTMLDivElement>`). Неизвестные компоненту атрибуты уходят на корневой `<div>` с `role="tablist"`.
 
-```ts
-extends Omit<ITabsExtendedTabProps, "children" | "onSelect">
-```
+### Обязательные props
 
-| Поле | Тип | Описание |
+| Prop | Тип | Описание |
 |---|---|---|
-| `id` | `string` | Уникальный id таба (используется в `selectedId`/`onSelectTab`). |
-| `label` | `ReactNode` | Содержимое кнопки таба. |
-| `showNotificationIcon?` | `boolean` | Точка-индикатор уведомления на табе. |
-
-### `ITabsProps`
+| `tabs` | `Array<ITabsItem>` | Состав табов. Порядок массива = порядок в строке и порядок обхода стрелками |
+| `selectedId` | `string` | Id выбранного таба. Компонент полностью управляемый: своего состояния выбора у него нет |
+| `onSelectTab` | `(selectedId: string) => void` | Запрос на смену выбранного таба. Вызывается **только** если выбирают таб, отличный от `selectedId` — и из строки, и из выпадающего списка |
 
-```ts
-extends ITabsExtendedProps
-```
+### Опциональные props
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `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). |
+| `type` | `ETabsExtendedType` | `TYPE_1` | Тип оформления, выбирается по фону **страницы**: `TYPE_1` — серый фон контейнера, для белой страницы; `TYPE_2` — белый фон контейнера, для затенённой страницы |
+| `size` | `EComponentSize` | `MD` | Один prop на весь компонент: задаёт и контейнер, и кнопки табов, и кнопку выпадающего списка (в отличие от `TabsExtended`, где размеры независимы) |
+| `buttonDropdownAttributes` | `React.ButtonHTMLAttributes<HTMLButtonElement>` | — | HTML-атрибуты кнопки выпадающего списка. Сюда передаётся `aria-label`; переданный `className` мерджится с собственными классами кнопки, не затирая их |
+| `children` | `never` | — | Запрещены типом: состав задаётся только через `tabs` |
 
----
+### Поля элемента `tabs` (`ITabsItem`)
 
-## Поведение
+`ITabsItem` расширяет `Omit<ITabsExtendedTabProps, "children" | "onSelect">`, то есть принимает и HTML-атрибуты контейнера таба (`<span>`).
 
-### Overflow → Dropdown
+| Поле | Тип | Описание |
+|---|---|---|
+| `id` | `string` | Id таба. Сопоставляется с `selectedId` и приходит в `onSelectTab` |
+| `label` | `React.ReactNode` | Содержимое кнопки таба |
+| `showNotificationIcon` | `boolean` | Значок новых уведомлений (`Badge.Dot`) на кнопке таба и на пункте выпадающего списка |
+
+### Ограничения
 
-`TabsExtended.Content.DropdownWrapper` получает массив `dropdownItemsIds`
-табов, не поместившихся в строку. `Tabs` фильтрует `tabs` по этим id и
-передаёт в `ButtonDropdown.options`. Выбранный таб подсвечивается через
-`selected={tabs.find(t => t.id === selectedId)}`.
+- `label` и `showNotificationIcon` — поля кнопки таба, на контейнер таба они не уходят; остальные поля элемента считаются HTML-атрибутами `<span>`-контейнера.
+- Компонент не хардкодит текст: без `buttonDropdownAttributes["aria-label"]` кнопка выпадающего списка остаётся без доступного имени.
+- Выпадающий список рендерится всегда, но скрыт (`hidden`), пока все табы помещаются в строку.
+- `id` табов должны быть уникальными: по ним идёт и сопоставление с `selectedId`, и React-ключи, и замеры ширины.
 
-### Keyboard navigation
+---
 
-Roving tabindex по `availableToFocusTabId`:
+## Дизайн-токены
 
-- `ArrowLeft` → переключает фокус на предыдущий таб (если не первый в строке —
-  `isFirstInlineTab`), `preventDefault` для подавления скролла.
-- `ArrowRight` → следующий таб (если не последний в строке — `isLastInlineTab`).
-- При `onFocus` запоминаются id `prevAvailableToFocusTabId` /
-  `nextAvailableToFocusTabId` — на их кнопки навешиваются `prevTabRef` /
-  `nextTabRef` для программного `.focus()`.
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/Tabs.ts`.
 
-`isFirstInlineTab`/`isLastInlineTab` приходят через render-prop
-`<TabsExtended.Content.Tab>{({ selected, isFirstInlineTab, isLastInlineTab }) => ...}</TabsExtended.Content.Tab>`.
+Собственные стили компонента — только подсветка кнопки выпадающего списка, когда выбранный таб уехал в список:
 
-### Defaults
+```text
+Tabs.Type1_Tab_Background_Selected
+Tabs.Type2_Tab_Background_Selected
+```
 
-- `size = EComponentSize.MD`
-- `availableToFocusTabId` инициализируется как `selectedId || tabs[0].id` —
-  при пустом `tabs` упадёт (`tabs[0].id`); потребитель должен передавать
-  непустой массив.
+Оформление контейнера и самих кнопок табов приходит из `TabsExtended` — он использует всё семейство токенов `Tabs`, общее для обоих компонентов.
 
 ---
 
 ## Инварианты
 
-- **`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` напрямую.
+- `Tabs` объявлен через `React.forwardRef<HTMLDivElement, ITabsProps>`, `ref` уходит на корневой `<div role="tablist">` компонента `TabsExtended`; `displayName = "Tabs"`. Зафиксировано unit-тестом.
+- Публичные имена `ITabsProps`, `ITabsItem`, `Tabs` и barrel `src/components/Tabs/index.ts` — часть публичного API.
+- Компонент строится на `TabsExtended` и опирается на флаги `isFirstInlineTab` / `isLastInlineTab` из render-prop `Tab`: на них держатся границы навигации стрелками. Изменение их семантики ломает клавиатуру `Tabs`.
+- Класс `.tabButtonDropdown` согласует высоту кнопки выпадающего списка с высотой кнопки таба (SM — 20px, MD — 32px, LG — 40px). Без него `ButtonDropdown` выше таба того же размера и растягивает и контейнер, и сами табы.
+- `label` и `showNotificationIcon` обязаны вырезаться из элемента `tabs` перед спредом на `TabsExtended.Content.Tab`: иначе они уходят на `<span>` как неизвестные DOM-атрибуты, и React пишет предупреждение в консоль. Зафиксировано unit-тестом.
+- Массив `tabs` может быть пустым — компонент не должен падать (поэтому запасной id фокусируемого таба читается через optional chaining).
+- Таб с `tabIndex = 0` вычисляется на каждом рендере, а не хранится готовым в state: в state лежит только таб, последним получивший фокус, вместе с `selectedId` на тот момент. `inlineItemsIds` сверяется с текущим `tabs`: `TabsExtended` пересчитывает раскладку только при смене числа табов или ширины, и после замены `tabs` на массив той же длины там остаются старые id. Распределение табов по строке и выпадающему списку `Tabs` читает из `TabsExtendedContext` (`inlineItemsIds`) через `Consumer` внутри render-prop таба — сам `Tabs` рендерит провайдер и прочитать контекст хуком не может.
 
 ---
 
 ## 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`: корневой элемент — `role="tablist"`, кнопка таба — `<button role="tab">` с `aria-selected`, контейнер таба — `role="presentation"`.
+- **Roving tabindex:** в таб-порядок страницы попадает ровно один таб (`tabIndex = 0`), остальные получают `tabIndex = -1`. Кандидаты по приоритету: таб, последним получивший фокус (стрелкой или кликом), — пока выбран тот же таб, что и в момент фокуса (смена выбора, в том числе извне через `selectedId`, его сбрасывает); затем выбранный таб (или первый, если `selectedId` пуст). `tabIndex = 0` получает первый кандидат, отображаемый в строке, а если оба в выпадающем списке или отсутствуют в `tabs` — первый таб строки. Строка табов не выпадает из обхода по `Tab`.
+- **Клавиатура:** `ArrowLeft` / `ArrowRight` переносят фокус на соседний таб **в строке** и делают его единственным табом с `tabIndex = 0`. На краях строки фокус остаётся на месте (переноса на противоположный край нет). Для обеих стрелок вызывается `preventDefault` — чтобы страница не скроллилась; другие клавиши компонент не перехватывает.
+- Выбор таба — нативной активацией `<button>` (`Enter` / `Space`) и кликом. Стрелки только перемещают фокус и **не меняют** выбранный таб.
+- Табы, уехавшие в выпадающий список, скрыты через `display: none` и из обхода клавиатурой выпадают: попасть в них можно только через список.
+- `aria-label` кнопки выпадающего списка задаёт потребитель через `buttonDropdownAttributes` — компонент текста не хардкодит.
+- `aria-controls` и связку с панелью контента компонент не выставляет: если табы переключают панели, их `id` и `aria-controls` проставляет потребитель.
 
 ---
 
 ## Связанные компоненты
 
-- `TabsExtended` — низкоуровневый базовый компонент со слотами.
-- `TabsLine` — горизонтальные табы без overflow-меню.
-- `ButtonDropdown` (`EButtonDotsTheme.DOTS_SECONDARY`) — кнопка overflow.
+- `TabsExtended` — база: `Tabs` рендерит его субкомпоненты и наследует от его интерфейсов (`ITabsProps extends ITabsExtendedProps`, `ITabsItem extends Omit<ITabsExtendedTabProps, ...>`). Туда же уходят за нестандартной разметкой табов.
+- `TabsLine` — альтернативный визуальный паттерн табов (подчёркивание вместо залитой кнопки).
+- `ButtonDropdown` — кнопка выпадающего списка, которую `Tabs` рендерит сам для не поместившихся табов; тема подбирается по `type` (`DOTS_SECONDARY` / `DOTS_SECONDARY_LIGHT`).
+- `Badge` — `Badge.Dot` как значок новых уведомлений на кнопке таба (рендерится внутри `TabsExtended.Content.TabButton`).
 
 ---
 
 ## Stories
 
 Основные истории: `stories/Tabs/Tabs.stories.tsx`
-Примеры: `stories/Tabs/examples/`
+Файлы примеров: `stories/Tabs/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль типа, размера, количества табов, ширины контейнера и значка уведомлений |
+| `Default` | `Default.tsx` | Минимальный набор: три таба, всё помещается в строку |
+| `Types` | `Types.tsx` | Типы оформления `TYPE_1` и `TYPE_2` |
+| `Sizes` | `Sizes.tsx` | Размеры SM / MD / LG |
+| `WithNotificationIcon` | `WithNotificationIcon.tsx` | Значок новых уведомлений на табе |
+| `WithDropdown` | `WithDropdown.tsx` | Узкий контейнер: часть табов уезжает в выпадающий список |
+| `VisualTests` | `VisualTests.tsx` | Типы × размеры, значок уведомлений, переполнение строки, подсветка кнопки списка при выбранном скрытом табе, `:focus-visible` на табе (через `play`) |
+| `VisualTestsOpen` | `VisualTests.tsx` | Скриншот-регрессия раскрытого выпадающего списка (открывается через `play`) |
 
 ---
 
@@ -149,4 +135,191 @@ Roving tabindex по `availableToFocusTabId`:
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-22 | Создан документ AI-ready для `Tabs` (TRI-90). |
+| 2026-09-22 | AI-рефакторинг: `label` и `showNotificationIcon` больше не уходят на контейнер таба как DOM-атрибуты (React-предупреждение в консоли), React-ключ таба переведён с индекса на `id`, пустой массив `tabs` не роняет компонент, JSDoc проставлен на всех публичных props. Публичный API (имена props, значения enum, barrel-экспорты) не изменён. Добавлены unit-тесты на клавиатуру, выбор таба и выпадающий список, stories переписаны по modern pattern. |
+| 2026-09-22 | `Tabs` переведён на `forwardRef` (ref на корневой `<div role="tablist">`) и получил `displayName`; тип компонента — `React.ForwardRefExoticComponent`. Roving tabindex синхронизирован с `selectedId` и с распределением табов по строке и выпадающему списку: строка табов больше не выпадает из обхода по `Tab`. Добавлены unit-тесты на `ref`, `displayName` и перенос `tabIndex = 0` (внешняя смена выбора, клик, уезд таба в выпадающий список, замена `tabs`). |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Tabs/examples/Default.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { Tabs } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
+];
+
+export const Default = () => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <Tabs
+            tabs={TABS}
+            selectedId={selectedId}
+            onSelectTab={setSelectedId}
+            buttonDropdownAttributes={{ "aria-label": "Ещё табы" }}
+        />
+    );
+};
+```
+
+### Types
+
+`stories/Tabs/examples/Types.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ETabsExtendedType, Tabs } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
+];
+
+interface ITypeItemProps {
+    caption: string;
+    type: ETabsExtendedType;
+}
+
+const TypeItem = ({ caption, type }: ITypeItemProps) => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{caption}</div>
+            <Tabs
+                tabs={TABS}
+                type={type}
+                selectedId={selectedId}
+                onSelectTab={setSelectedId}
+                buttonDropdownAttributes={{ "aria-label": "Ещё табы" }}
+            />
+        </div>
+    );
+};
+
+export const Types = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        <TypeItem caption="TYPE_1 — для белой страницы" type={ETabsExtendedType.TYPE_1} />
+        <TypeItem caption="TYPE_2 — для затенённой страницы" type={ETabsExtendedType.TYPE_2} />
+    </div>
+);
+```
+
+### Sizes
+
+`stories/Tabs/examples/Sizes.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, Tabs } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
+];
+
+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>
+            <Tabs
+                tabs={TABS}
+                size={size}
+                selectedId={selectedId}
+                onSelectTab={setSelectedId}
+                buttonDropdownAttributes={{ "aria-label": "Ещё табы" }}
+            />
+        </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>
+);
+```
+
+### WithNotificationIcon
+
+`stories/Tabs/examples/WithNotificationIcon.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { Tabs } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2", showNotificationIcon: true },
+    { id: "tab-3", label: "Tab Name 3" },
+];
+
+export const WithNotificationIcon = () => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        <Tabs
+            tabs={TABS}
+            selectedId={selectedId}
+            onSelectTab={setSelectedId}
+            buttonDropdownAttributes={{ "aria-label": "Ещё табы" }}
+        />
+    );
+};
+```
+
+### WithDropdown
+
+`stories/Tabs/examples/WithDropdown.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { Tabs } from "@sberbusiness/triplex-next";
+
+const TABS = [
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
+    { id: "tab-4", label: "Tab Name 4" },
+    { id: "tab-5", label: "Tab Name 5" },
+    { id: "tab-6", label: "Tab Name 6" },
+];
+
+export const WithDropdown = () => {
+    const [selectedId, setSelectedId] = useState("tab-1");
+
+    return (
+        // Ширина контейнера ограничена, чтобы часть табов не поместилась в строку и уехала в выпадающий список.
+        <div style={{ maxWidth: "420px" }}>
+            <Tabs
+                tabs={TABS}
+                selectedId={selectedId}
+                onSelectTab={setSelectedId}
+                buttonDropdownAttributes={{ "aria-label": "Ещё табы" }}
+            />
+        </div>
+    );
+};
+```
+

package/bundle/components/TabsExtended.md

@@ -203,9 +203,9 @@ 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: "Документы" },
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
 ];
 
 export const Default = () => {
@@ -240,9 +240,9 @@ import React, { useState } from "react";
 import { ETabsExtendedType, TabsExtended } from "@sberbusiness/triplex-next";
 
 const TABS = [
-    { id: "tab-1", label: "Обзор" },
-    { id: "tab-2", label: "Операции" },
-    { id: "tab-3", label: "Документы" },
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
 ];
 
 interface ITypeItemProps {
@@ -294,9 +294,9 @@ import React, { useState } from "react";
 import { EComponentSize, TabsExtended } from "@sberbusiness/triplex-next";
 
 const TABS = [
-    { id: "tab-1", label: "Обзор" },
-    { id: "tab-2", label: "Операции" },
-    { id: "tab-3", label: "Документы" },
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
 ];
 
 interface ISizeItemProps {
@@ -349,9 +349,9 @@ 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 },
+    { id: "tab-1", label: "Tab Name 1", showNotificationIcon: false },
+    { id: "tab-2", label: "Tab Name 2", showNotificationIcon: true },
+    { id: "tab-3", label: "Tab Name 3", showNotificationIcon: true },
 ];
 
 export const WithNotificationIcon = () => {
@@ -395,12 +395,12 @@ import {
 } 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: "Настройки" },
+    { id: "tab-1", label: "Tab Name 1" },
+    { id: "tab-2", label: "Tab Name 2" },
+    { id: "tab-3", label: "Tab Name 3" },
+    { id: "tab-4", label: "Tab Name 4" },
+    { id: "tab-5", label: "Tab Name 5" },
+    { id: "tab-6", label: "Tab Name 6" },
 ];
 
 /**