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

package/bundle/components/TagColor.md

@@ -1,10 +1,14 @@
 ---
 component: TagColor
-category: Data Display
-figma-node: ""
-figma-file: ""
-related: [Tag, TagGroup]
-tokens: []
+category: Tag
+related: [Tag, MarkerStatus]
+tokens:
+  - TagColor.Background_Default
+  - TagColor.Background_Error
+  - TagColor.Background_Info
+  - TagColor.Background_Success
+  - TagColor.Background_Warning
+  - TagColor.Text_Color_Default
 stories: stories/TagColor/TagColor.stories.tsx
 version: "1.0"
 ---
@@ -13,104 +17,140 @@ version: "1.0"
 
 ## Назначение
 
-Цветной маркировочный тег: `<span>` с фоном/обводкой по статусу
-(`DEFAULT`/`SUCCESS`/`INFO`/`WARNING`/`ERROR`). Без интерактивности —
-только визуальная классификация (категории, статусы операций, лейблы).
+Неинтерактивная цветная плашка с текстом — метка для маркировки и классификации. Цвет фона
+кодирует статус (`DEFAULT` / `SUCCESS` / `INFO` / `WARNING` / `ERROR`), содержимое произвольное.
+Типичное место — статус заявки в строке таблицы, тип документа в списке, признак записи рядом
+с заголовком.
 
-Используй когда: нужно подсветить состояние/категорию (например, статус
-заявки, тип сообщения). Для интерактивного тега с кнопками edit/remove —
-`Tag`.
+Используй когда: нужно показать состояние или категорию объекта короткой цветной меткой,
+и пользователь с ней не взаимодействует.
 
----
+Не используй когда:
 
-## Файловая структура
-
-```text
-src/components/TagColor/
-├── TagColor.tsx     # forwardRef<HTMLSpanElement, ITagColorProps>
-├── enums.ts         # ETagColorStatus
-├── types.ts         # ITagColorProps
-├── styles/TagColor.module.less
-├── __tests__/
-└── index.ts
-```
+- Метку нужно снимать или редактировать — возьми `Tag`: у него есть кнопки удаления
+  и редактирования, но нет `status`.
+- Статус достаточно показать точкой без текста — возьми `Marker`, а с подписью и описанием —
+  `MarkerStatus`.
+- Нужен интерактивный элемент (выбор фильтра, выпадающий список) — это семейство `Chip`.
+  `TagColor` рендерит `<span>` без роли, фокуса, обработчиков и клавиатуры.
 
 ---
 
-## Публичный API
+## Варианты и props
 
-### `ITagColorProps`
+### Обязательные props
 
-```ts
-extends HTMLAttributes<HTMLSpanElement>
-```
+| Prop | Тип | Описание |
+|---|---|---|
+| `size` | `EComponentSize` | Размер: SM (высота 16px) / MD (20px) / LG (28px). Задаёт высоту, внутренние отступы, `border-radius` (4 / 4 / 8px) и размер текста (10 / 12 / 14px) |
 
-| Prop | Тип | Default | Описание |
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `size` | `EComponentSize` | — | **Обязателен** — нет default'а. Маппится в CSS-класс через `createSizeToClassNameMap`. |
-| `status?` | `ETagColorStatus` | `DEFAULT` | Цветовой статус. |
-| `children` | `ReactNode` | — | Содержимое (текст). Оборачивается в `<span class="content">`. |
-| `...HTMLAttributes<HTMLSpanElement>` | — | — | На корневой `<span>`. |
-
-### `ETagColorStatus`
-
-```ts
-enum ETagColorStatus {
-    DEFAULT = "default",
-    SUCCESS = "success",
-    INFO    = "info",
-    WARNING = "warning",
-    ERROR   = "error",
-}
-```
+| `status` | `ETagColorStatus` | `ETagColorStatus.DEFAULT` | Определяет **только** цвет фона. На размер, типографику и цвет текста не влияет |
+| `children` | `React.ReactNode` | — | Содержимое метки. Рендерится во вложенном `<span>`, длинный текст обрезается многоточием |
+
+Остальные props — стандартные атрибуты `span`
+(`ITagColorProps extends React.HTMLAttributes<HTMLSpanElement>`), уходят на корневой элемент
+через `...restProps`.
 
-Маппинг в CSS-классы — `STATUS_TO_CLASS_NAME_MAP` внутри компонента.
+### Размер и статус независимы
+
+Две оси не пересекаются: `size` отвечает за геометрию и типографику, `status` — за один
+`background`. Любая комбинация допустима, поэтому матрицу 3×5 целиком покрывает story
+`VisualTests`, а документационные stories показывают оси по отдельности.
 
 ---
 
-## Структура DOM
+## Дизайн-токены
+
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/TagColor.ts`.
 
-```html
-<span class="tagColor {size} {status} {className}">
-    <span class="content">{children}</span>
-</span>
+```text
+TagColor.Background_Default
+TagColor.Background_Success
+TagColor.Background_Info
+TagColor.Background_Warning
+TagColor.Background_Error
+TagColor.Text_Color_Default
 ```
 
-Внешний `<span>` несёт фон/обводку, внутренний — паддинги контента
-(вынесено для управления line-height независимо от рамки).
+Пять фоновых токенов — по одному на значение `ETagColorStatus`; добавление статуса означает
+и новый токен. Цвет текста один на все статусы (`Text_Color_Default`, тёмный нейтральный
+в обеих темах): фоны подобраны так, чтобы контраст держался без переключения цвета текста.
+
+Размерные значения (высоты 16/20/28px, отступы, `border-radius`, `font-size` / `line-height`)
+заданы литералами в `styles/TagColor.module.less` — они специфичны для компонента.
 
 ---
 
 ## Инварианты
 
-- **`forwardRef<HTMLSpanElement>`** — не убирать.
-- **`size` обязателен** (нет default'а в типе и в компоненте).
-- **`status` default = `DEFAULT`** — допускается опускать.
-- **Корень — `<span>`**, inline-friendly.
-- **Двойной `<span>` обязателен** — внутренний `.content` нужен для корректного отображения паддингов вместе с фоном внешнего span'а; не сокращать.
-- **`ETagColorStatus` экспортируется** — часть публичного API; не переименовывать значения.
-- **Нет интерактивности** — никаких кнопок, hover-эффектов, click-handler'ов в реализации. Если нужна интерактивность — оборачивать снаружи (но обычно это означает, что нужен `Tag`, а не `TagColor`).
+- `forwardRef<HTMLSpanElement>` — не убирать. Ref всегда указывает на корневой `<span>`.
+- Корневой элемент — `<span>` (метка инлайновая, встаёт в строку текста и в ячейку таблицы).
+  Менять на `div` нельзя.
+- `displayName` — `"TagColor"`. Не менять.
+- Двухуровневая разметка обязательна: корневой `<span class="tagColor">` держит фон, размеры
+  и `display: inline-flex`, вложенный `<span class="content">` — обрезку текста
+  (`min-width: 0`, `overflow: hidden`, `text-overflow: ellipsis`, `white-space: nowrap`)
+  и цвет текста. Схлопывать в один элемент нельзя: обрезка перестанет работать, а `max-width: 100%`
+  на корне — ограничивать ширину.
+- `status` имеет значение по умолчанию `ETagColorStatus.DEFAULT` — оно проставляется
+  в деструктуризации props, а не в `defaultProps`. Класс статуса на корне есть всегда.
+- Значения `ETagColorStatus` (`"default"` / `"success"` / `"info"` / `"warning"` / `"error"`)
+  совпадают с именами CSS-классов в `TagColor.module.less` и с суффиксами токенов
+  `TagColor.Background_*`. Переименование значения enum — ломающее изменение сразу в трёх местах.
+- `className` деструктурируется из props и мерджится через `clsx`, поэтому в `...restProps`
+  его нет и перезатереть базовые классы он не может.
+- Экспорты `TagColor`, `ITagColorProps` и `ETagColorStatus` идут в barrel
+  `src/components/TagColor/index.ts` — сохранять.
 
 ---
 
 ## Accessibility
 
-- Нет специальной ARIA — это визуальный маркер.
-- Цвет статуса **не должен** быть единственным носителем смысла. Текст внутри (`children`) — основной канал для screen-reader.
-- При необходимости потребитель может добавить `role="status"` или `aria-label` через restProps.
+- Собственной ARIA-роли нет: корневой `<span>` — неинтерактивный контейнер, в порядок фокуса
+  не попадает, обработчиков клавиатуры у компонента нет.
+- Цвет — единственный визуальный носитель статуса, поэтому **смысл обязан быть в тексте
+  метки**. Не полагайся на один цвет: `<TagColor status={ETagColorStatus.ERROR}>Отклонено</TagColor>`,
+  а не пустая красная плашка.
+- Если метка расшифровывает соседний элемент (статус строки таблицы), связывай их через
+  `aria-describedby` / `aria-labelledby` на стороне потребителя — компонент никаких
+  ARIA-атрибутов сам не проставляет, но пробрасывает любые через `...restProps`.
+- Компонент не хардкодит текстовые строки: содержимое и любые `aria-label` / `title` задаёт
+  потребитель. Библиотека мультиязычная.
 
 ---
 
 ## Связанные компоненты
 
-- `Tag` — тег с edit/remove кнопками.
-- `TagGroup` — контейнер для коллекции тегов с overflow.
+- `Tag` — визуально похожая плашка, но интерактивная: с кнопками удаления и редактирования
+  и без `status`. Берётся, когда значение можно снять; `TagColor` — когда метку только показывают.
+- `Marker` — цветная точка-индикатор статуса без текста. Тот же набор смыслов, минимальная форма:
+  берётся, когда на подпись нет места.
+- `MarkerStatus` — точка с подписью и описанием. Альтернатива, когда статусу нужен не компактный
+  бейдж, а строка с пояснением.
 
 ---
 
 ## Stories
 
 Основные истории: `stories/TagColor/TagColor.stories.tsx`
+Файлы примеров: `stories/TagColor/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `children`, `size` и `status` |
+| `Default` | `Default.tsx` | Минимальная метка: обязателен только `size`, статус по умолчанию |
+| `Sizes` | `Sizes.tsx` | Размеры SM / MD / LG при одном статусе |
+| `Statuses` | `Statuses.tsx` | Все пять значений `ETagColorStatus` при одном размере |
+| `WithOverflow` | `WithOverflow.tsx` | Обрезка длинного контента многоточием по ширине контейнера |
+| `VisualTests` | `VisualTests.tsx` | Матрица размеров × статусов плюс пустая метка и обрезка — для скриншот-тестов |
+
+Story ID участвуют в именах baseline-скриншотов (`tagcolor--sizes--xs.png` и т.п.), поэтому
+переименование story требует перегенерации baseline и удаления осиротевших файлов.
 
 ---
 
@@ -118,4 +158,85 @@ enum ETagColorStatus {
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-22 | Создан документ. AI-рефакторинг (JSDoc на props, enum и map'ах класса, типизация `STATUS_TO_CLASS_NAME_MAP`, исправлен JSDoc `ITagColorProps`), расширены unit-тесты, stories переведены на modern pattern и дополнены `VisualTests`. |
+| 2026-09-22 | По ревью: `children` объявлен в `ITagColorProps` явно (тип прежний, приходил из `React.HTMLAttributes`) — попадает в таблицу Props в Storybook. JSDoc компонента сокращён, детали разметки остались здесь. |
+| 2026-09-22 | По решению ревьюера stories `DifferentSizes` / `DifferentStatuses` переименованы в `Sizes` / `Statuses` — единообразно с `Tag`, `Marker`, `NumberField`. Baseline перегенерированы, старые удалены. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/TagColor/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { TagColor, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const Default = () => <TagColor size={EComponentSize.MD}>Tag text</TagColor>;
+```
+
+### Sizes
+
+`stories/TagColor/examples/Sizes.tsx`
+
+```tsx
+import React from "react";
+import { TagColor, EComponentSize, ETagColorStatus } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(EComponentSize);
+
+export const Sizes = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {SIZES.map((size) => (
+            <div key={size}>
+                <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{size.toUpperCase()}</div>
+                <TagColor size={size} status={ETagColorStatus.INFO}>
+                    Tag text
+                </TagColor>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### Statuses
+
+`stories/TagColor/examples/Statuses.tsx`
+
+```tsx
+import React from "react";
+import { TagColor, EComponentSize, ETagColorStatus } from "@sberbusiness/triplex-next";
+
+const STATUSES = Object.values(ETagColorStatus);
+
+export const Statuses = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {STATUSES.map((status) => (
+            <div key={status}>
+                <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{status.toUpperCase()}</div>
+                <TagColor size={EComponentSize.MD} status={status}>
+                    Tag text
+                </TagColor>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### WithOverflow
+
+`stories/TagColor/examples/WithOverflow.tsx`
+
+```tsx
+import React from "react";
+import { TagColor, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const WithOverflow = () => (
+    <div style={{ maxWidth: 400 }}>
+        <TagColor size={EComponentSize.LG}>Very long tag text that should be truncated with ellipsis</TagColor>
+    </div>
+);
+```
+

package/bundle/components/TagGroup.md

@@ -1,9 +1,7 @@
 ---
 component: TagGroup
-category: Data Display
-figma-node: ""
-figma-file: ""
-related: [Tag, TagColor]
+category: TagGroup
+related: [Tag, ChipGroup]
 tokens: []
 stories: stories/TagGroup/TagGroup.stories.tsx
 version: "1.0"
@@ -13,83 +11,121 @@ version: "1.0"
 
 ## Назначение
 
-Контейнер для коллекции `Tag` / `TagColor`: задаёт общий
-горизонтальный/вертикальный gap по `size` и `role="group"`. Не управляет
-overflow или выбором — чистая разметка.
+Контейнер-раскладка для тегов: выстраивает `Tag` в общем потоке с одинаковым отступом,
+переносит их на новые строки, когда ширины контейнера не хватает, и помечает набор
+как группу (`role="group"`).
 
-Используй когда: нужно сгруппировать несколько тегов с одинаковым размером
-и стандартным отступом. Сами теги передаются как children — потребитель
-решает, что внутри (`Tag`, `TagColor`, миксы).
+Используй когда: на экране идёт ряд снимаемых значений — применённые фильтры, выбранные
+в форме опции — и им нужен единый отступ и общая семантика группы.
+Не используй когда: группируются чипсы семейства `Chip*` — для них есть `ChipGroup`
+(flex + `gap`, опциональный режим одной строки с прокруткой). Нужен контейнер общего
+назначения с отступами — бери собственную вёрстку.
 
 ---
 
-## Файловая структура
+## Варианты и props
 
-```text
-src/components/TagGroup/
-├── TagGroup.tsx     # forwardRef<HTMLDivElement, ITagGroupProps>
-├── types.ts         # ITagGroupProps
-├── styles/TagGroup.module.less
-├── __tests__/
-└── index.ts
-```
-
----
-
-## Публичный API
+### Обязательные props
 
-### `ITagGroupProps`
+| Prop | Тип | Описание |
+|---|---|---|
+| `size` | `EComponentSize` | Отступ между тегами: SM — 4px, MD — 8px, LG — 12px. Размер самих тегов не меняет |
 
-```ts
-extends HTMLAttributes<HTMLDivElement>
-```
+### Опциональные props
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `size` | `EComponentSize` | — | **Обязателен**. Маппится на класс gap'а через `createSizeToClassNameMap`. |
-| `children` | `ReactNode` | — | Теги внутри. Размер тегов **не** прокидывается автоматически — выставлять у каждого `Tag`/`TagColor` отдельно. |
-| `...HTMLAttributes<HTMLDivElement>` | — | — | На корневой div (role=group). |
+| `children` | `React.ReactNode` | — | Обычно набор `Tag`. Отступ получает **любой** прямой ребёнок — селектор в LESS-модуле `& > *` |
+| `...HTMLDivAttributes` | `React.HTMLAttributes<HTMLDivElement>` | — | Все атрибуты `<div>`, включая `style`, `aria-*`, `data-*` и `role` |
+
+### Ограничения использования
+
+- **`size` не пробрасывается в теги.** Он задаёт только отступ группы; `size` каждого `Tag`
+  потребитель выставляет сам. Рассинхрон размеров группы и тегов ничем не подсвечивается —
+  во всех stories они совпадают.
+- **Отступ сделан на margin'ах, а не на `gap`.** Каждый прямой ребёнок получает
+  `margin: 2px / 4px / 6px`, а сам контейнер — такой же отрицательный margin. Следствия:
+  крайние теги прижаты к границам группы, но визуально группа «вылезает» за свой бокс
+  на эти 2/4/6px и может наехать на соседний контент, если у родителя нет отступа.
+- **Собственного `display` у контейнера нет** — это обычный блок, теги переносятся
+  как инлайновые элементы. Если записать теги в одну строку JSX через пробел
+  (`<Tag/> <Tag/>`), между ними добавится пробельный текстовый узел и горизонтальный
+  зазор станет чуть больше вертикального. При переносе тегов по строкам или рендере
+  из `map()` такого узла не возникает и зазоры одинаковы.
+- **Ширину контейнер не ограничивает.** Перенос по строкам появится только там, где
+  ширину задал родитель.
+- **`role="group"` можно переопределить.** Атрибут выставляется **до** `{...restProps}`,
+  поэтому `role`, переданный потребителем, побеждает (в отличие от `data-tx` в `ChipGroup`,
+  который стоит после spread и переопределению не поддаётся).
 
 ---
 
-## Структура DOM
+## Дизайн-токены
 
-```html
-<div class="tagGroup {size} {className}" role="group">
-    {children}
-</div>
-```
+Компонент не использует собственных CSS-переменных: в стилях только раскладка (margin'ы
+по размерам). Цвета и размеры приходят от вложенных тегов — см. `Tag-ai.md`.
 
 ---
 
 ## Инварианты
 
-- **`forwardRef<HTMLDivElement>`** — не убирать.
-- **`size` обязателен**, без default'а — потребитель указывает явно.
-- **`size` НЕ прокидывается в children** — каждый `Tag`/`TagColor` принимает свой `size` независимо. `TagGroup.size` влияет только на gap между ними.
-- **`role="group"`** — фиксированно. Не переопределять без причины.
-- **Корень — `<div>`** (в отличие от `Tag`/`TagColor`, которые `<span>`).
-- **Нет overflow-логики** — все теги рендерятся inline; перенос строк регулируется CSS (`flex-wrap` в LESS).
+- **`forwardRef<HTMLDivElement>`** — обязателен, `ref` указывает на корневой `<div>`. Не убирать.
+- **Корневой элемент — `<div>` с `role="group"` по умолчанию.** Роль — часть наблюдаемого
+  контракта: на неё опираются unit-тесты (`screen.getByRole("group")`) и потребители.
+- **`size` — обязательный prop без значения по умолчанию.** Делать его опциональным
+  или менять числа отступов нельзя без согласования: это изменит вёрстку у потребителей.
+- **Порядок в JSX: `className` → `role` → `{...restProps}` → `ref`.** Перестановка `role`
+  за spread отнимет у потребителя возможность переопределить роль.
+- **`className` добавляется последним аргументом `clsx`** и собственные классы не затирает.
+- **Классы `.sm` / `.md` / `.lg` берутся из общего хелпера** `createSizeToClassNameMap`
+  (`src/utils/classNameMaps.ts`) — локальный маппинг не заводить.
+- **`displayName`** — `"TagGroup"`. Не менять.
+- **Публичный API** — `TagGroup` и `ITagGroupProps` через `src/components/TagGroup/index.ts`
+  (`export * from "./types"` + `export * from "./TagGroup"`) и общий barrel
+  `src/components/index.ts`. Сохранять.
+- **Story ids `taggroup--*`** завязаны на baseline-скриншоты в `__screenshots__/` —
+  переименование story требует синхронного обновления baseline.
 
 ---
 
 ## Accessibility
 
-- `role="group"` — семантическая группа; рекомендуется добавить `aria-label` или `aria-labelledby` через restProps для описания назначения группы (например, "Активные фильтры").
-- Каждый тег внутри отвечает за свою ARIA сам.
+- Корневой `<div>` несёт `role="group"` — набор тегов объявляется скринридеру как группа.
+- **Доступное имя группе задаёт потребитель**: `aria-label` или `aria-labelledby` через
+  `...restProps`. Компонент строку не подставляет — библиотека мультиязычная. Без имени
+  роль `group` остаётся безымянной и пользы от неё немного.
+- Если набор тегов по смыслу не группа контролов, а список, роль переопределяется снаружи:
+  `role="list"` (тогда детям нужен `role="listitem"`).
+- Клавиатуру и фокус компонент не трогает: порядок фокуса задаётся порядком тегов в DOM,
+  а кнопки внутри — это `ButtonIcon` внутри `Tag`, `aria-label` для них передаётся
+  на самих тегах (`editButtonProps` / `removeButtonProps`).
 
 ---
 
 ## Связанные компоненты
 
-- `Tag` — интерактивные теги (edit/remove).
-- `TagColor` — цветные маркеры.
+- `Tag` — основной ребёнок группы: плашка с выбранным значением, кнопкой удаления и,
+  при переданном `onEdit`, кнопкой редактирования. Свой `size` получает отдельно от группы.
+- `ChipGroup` — аналогичный контейнер для семейства `Chip*`. Отличия: раскладка на
+  `display: flex` + `gap`, `size` опционален, роли по умолчанию нет, зато есть режим
+  `oneLine` с горизонтальной прокруткой.
+- `TagColor` — неинтерактивная цветная метка статуса. В группу её класть можно (отступ
+  получает любой прямой ребёнок), но типовой ребёнок `TagGroup` — именно `Tag`.
 
 ---
 
 ## Stories
 
 Основные истории: `stories/TagGroup/TagGroup.stories.tsx`
+Файлы примеров: `stories/TagGroup/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `size` и наличия кнопки редактирования у тегов |
+| `Default` | `Default.tsx` | Минимальная группа тегов с отступом `LG` |
+| `Sizes` | `Sizes.tsx` | Отступы для размеров SM / MD / LG |
+| `WithOverflow` | `WithOverflow.tsx` | Перенос тегов по строкам в контейнере фиксированной ширины |
+| `VisualTests` | `VisualTests.tsx` | Матрица размеров с переносом строк и группа из одного длинного тега — для скриншот-тестов |
 
 ---
 
@@ -97,4 +133,104 @@ extends HTMLAttributes<HTMLDivElement>
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-18 | Создан документ. AI-рефакторинг (TRI-95): `displayName`, маппинг размеров в UPPER_SNAKE_CASE, JSDoc на props и компоненте, явный `children` в `ITagGroupProps`; расширены unit-тесты, stories переведены на modern pattern. Публичный API, DOM и внешний вид не изменены |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/TagGroup/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { Tag, TagGroup, EComponentSize } from "@sberbusiness/triplex-next";
+
+const TAGS = ["Selected value", "Another value", "One more value"];
+
+export const Default = () => (
+    <TagGroup size={EComponentSize.LG} aria-label="Применённые фильтры">
+        {TAGS.map((label, index) => (
+            <Tag
+                key={label}
+                id={`default-tag-${index}`}
+                size={EComponentSize.LG}
+                onRemove={() => {}}
+                removeButtonProps={{ "aria-label": "Удалить" }}
+            >
+                {label}
+            </Tag>
+        ))}
+    </TagGroup>
+);
+```
+
+### Sizes
+
+`stories/TagGroup/examples/Sizes.tsx`
+
+```tsx
+import React from "react";
+import { Tag, TagGroup, EComponentSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(EComponentSize);
+const TAGS = ["Selected value", "Another value", "One more value"];
+
+export const Sizes = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+        {SIZES.map((size) => (
+            <div key={size}>
+                <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{size.toUpperCase()}</div>
+                <TagGroup size={size} aria-label={`Применённые фильтры, размер ${size}`}>
+                    {TAGS.map((label, index) => (
+                        <Tag
+                            key={label}
+                            id={`${size}-tag-${index}`}
+                            size={size}
+                            onEdit={() => {}}
+                            onRemove={() => {}}
+                            editButtonProps={{ "aria-label": "Редактировать" }}
+                            removeButtonProps={{ "aria-label": "Удалить" }}
+                        >
+                            {label}
+                        </Tag>
+                    ))}
+                </TagGroup>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### WithOverflow
+
+`stories/TagGroup/examples/WithOverflow.tsx`
+
+```tsx
+import React from "react";
+import { Tag, TagGroup, EComponentSize } from "@sberbusiness/triplex-next";
+
+const TAGS = Array.from({ length: 6 }, (_, index) => `Selected value ${index + 1}`);
+
+export const WithOverflow = () => (
+    // maxWidth, а не width: на широком экране в строку помещается четыре тега,
+    // на узком контейнер сжимается по месту и теги переносятся раньше.
+    <div style={{ maxWidth: 760, border: "1px dashed #D0D4D9" }}>
+        <TagGroup size={EComponentSize.LG} aria-label="Применённые фильтры">
+            {TAGS.map((label, index) => (
+                <Tag
+                    key={label}
+                    id={`overflow-tag-${index}`}
+                    size={EComponentSize.LG}
+                    onRemove={() => {}}
+                    removeButtonProps={{ "aria-label": "Удалить" }}
+                >
+                    {label}
+                </Tag>
+            ))}
+        </TagGroup>
+    </div>
+);
+```
+