@sberbusiness/triplex-next-mcp-server 1.40.0-beta → 1.41.0-beta

package/bundle/components/Chip.md

@@ -1,12 +1,12 @@
 ---
 component: Chip
 category: Chips
-figma-node: ""
-figma-file: ""
-related: [ChipGroup, Badge, IconWrapper, SelectField, MultiselectField]
+related: [ChipGroup, ChipIcon, ChipOptions, ChipSelect, ChipMultiselect, ChipSort, ChipSuggest, ChipDatePicker, ChipClearButton, ChipDropdownArrow, Badge, IconWrapper]
 tokens:
-  - --triplex-next-Chip-Background_Default
-  - --triplex-next-Chip-Background_Hover
+  - --triplex-next-Chip-Background_Type1_Default
+  - --triplex-next-Chip-Background_Type1_Hover
+  - --triplex-next-Chip-Background_Type2_Default
+  - --triplex-next-Chip-Background_Type2_Hover
   - --triplex-next-Chip-Background_Active
   - --triplex-next-Chip-Background_Disabled
   - --triplex-next-Chip-Background_Selected_Default
@@ -22,7 +22,7 @@ tokens:
   - --triplex-next-Chip-Color_Selected_Active
   - --triplex-next-Chip-Color_Selected_Disabled
   - --triplex-next-Chip-Shadow_Focus
-stories: stories/Chips/Chip.stories.tsx (+ 8 других файлов)
+stories: stories/Chips/Chip.stories.tsx
 version: "1.0"
 ---
 
@@ -30,375 +30,371 @@ version: "1.0"
 
 ## Назначение
 
-Семейство интерактивных "таблеток" (chips): прямоугольные элементы со
-скруглением для выбора, сортировки, фильтрации. Включает **базовый `Chip`**
-и **9 вариантов на его основе**. Чипы обычно кладутся внутрь `ChipGroup`
-(горизонтальный список с gap'ами и переносом).
-
-Базовый `Chip` — `<span role="button">`, реагирует на клавиатуру (Space
-блокирует скролл), поддерживает selected/disabled, prefix/postfix иконки
-и "точку уведомления" через `Badge.Dot`.
-
-Варианты:
-- **`ChipIcon`** — чип только с иконкой (иконка в prefix, пустой span в postfix для симметрии).
-- **`ChipMultiselect`** — target-чип для `MultiselectField` с ClearButton / DropdownArrow.
-- **`ChipSelect`** (в subfolder) — target-чип для `SelectExtendedField`.
-- **`ChipOptions`** — чип с иконкой опций + clear button.
-- **`ChipSort`** — чип-иконка для сортировки + selectExtendedField dropdown.
-- **`ChipSuggest`** (в subfolder) — чип-input с саджестами.
-- **`ChipDatePicker`** (в subfolder) — чип с календарным попапом.
-- **`ChipClearButton`** — кнопка "×" для очистки выбранного.
-- **`ChipDropdownArrow`** — стрелка dropdown (ротируется при opened).
-
-Используй когда: нужен фильтр/сортировка/мультивыбор в линейном наборе.
-Рекомендуется всегда внутри `ChipGroup`.
-Не используй когда: нужна "метка-значок" без интерактива (бери `Badge`/`Tag`);
-нужен input поля формы (бери `TextField`/`SelectField`).
+Компактный интерактивный элемент-«чипс»: выполняет действие по нажатию и отображает
+выбранное (`selected`) состояние. Одновременно служит базой для всего семейства Chip*
+— поверх него построены `ChipIcon`, `ChipOptions`, а также target-элементы
+`ChipSelect`, `ChipMultiselect`, `ChipSuggest`, `ChipDatePicker`.
 
----
-
-## Файловая структура
+Используй когда: нужен переключаемый фильтр, тег или компактная кнопка-действие
+в ряду однотипных элементов.
+Не используй когда: нужна обычная кнопка формы (возьми `Button` — у него нативная
+клавиатурная активация и семантика `<button>`) или нужен выбор значения из списка
+(возьми `ChipSelect` / `ChipMultiselect`).
 
-```text
-src/components/Chip/
-├── Chip.tsx                            # Базовый, React.forwardRef
-├── ChipClearButton.tsx                 # ButtonIcon-обёртка с крестиком по size
-├── ChipDropdownArrow.tsx               # Стрелка, rotate при rotated
-├── ChipIcon.tsx                        # Chip с prefix=children и postfix=<span />
-├── ChipMultiselect.tsx                 # MultiselectField target
-├── ChipOptions.tsx                     # Chip + OptionsIcon + ChipClearButton
-├── ChipSort.tsx                        # SelectExtendedField target с SortIcon
-├── ChipDatePicker/
-│   ├── ChipDatePicker.tsx
-│   ├── ChipDatePickerTarget.tsx
-│   └── index.ts
-├── ChipSelect/
-│   ├── ChipSelect.tsx
-│   ├── ChipSelectTarget.tsx
-│   └── index.ts
-├── ChipSuggest/
-│   ├── ChipSuggest.tsx
-│   ├── ChipSuggestTarget.tsx
-│   ├── ChipSuggestDropdown.tsx
-│   ├── desktop/
-│   ├── types.ts
-│   └── index.ts
-├── index.ts                            # Barrel всех вариантов
-├── styles/
-│   ├── Chip.module.less                # Root чипа
-│   ├── ChipClearButton.module.less
-│   ├── ChipDropdownArrow.module.less
-│   ├── ChipOptions.module.less
-│   └── ChipSuggest.module.less
-└── __tests__/
-```
-
-Особенности:
-- **Нет общего enum/типов файла** — каждый чип декларирует свой интерфейс
-  через `extends IChipProps` / `Omit<IChipProps, ...>` / подобное.
-- **`ChipGroup` — отдельный компонент** (в `src/components/ChipGroup`). Большинство
-  чипов получают `styles.chipGroupItem` класс, чтобы быть валидным flex-item
-  внутри ChipGroup.
-- **`ChipIcon` делает `postfix={<span />}`** — трюк для симметричных
-  паддингов, так как Chip меняет padding при наличии postfix.
+Рекомендуется всегда располагать `Chip` внутри `ChipGroup` — он задаёт отступы,
+перенос строк и однострочный режим со скроллом.
 
 ---
 
 ## Варианты и props
 
-### Base `Chip` — `IChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "prefix">, DataAttributes`
-
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `size` | `EComponentSize` | `MD` | SM=28px, MD=40px, LG=56px. |
-| `disabled` | `boolean` | — | Визуальный disabled + `tabIndex=-1`. |
-| `selected` | `boolean` | — | "Активен" (галочка-выбор). |
-| `prefix` | `ReactNode` | — | Контент слева (обычно иконка). Оборачивается в `IconWrapper`. |
-| `postfix` | `ReactNode` | — | Контент справа. |
-| `showNotificationIcon` | `boolean` | — | Отрисовать `Badge.Dot` в правом-верхнем углу. |
-| `children` | `ReactNode` | — | Основной контент. |
-| `...HTMLSpanAttributes` | — | — | Все кроме `prefix` (HTML-атрибут переопределён). |
+### Типы (`EChipType`)
 
-### `ChipIcon` — `IChipIconProps extends Omit<IChipProps, "prefix" | "postfix">`
+| Значение | Описание |
+|---|---|
+| `TYPE_1` | Основной фон (по умолчанию) |
+| `TYPE_2` | Альтернативный фон — для случаев, когда `TYPE_1` сливается с подложкой |
 
-Принимает `children` (иконку), кладёт в `prefix`, форсирует `postfix=<span/>`
-для симметричных паддингов.
+Тип влияет **только** на фон в обычном состоянии и на hover. В состояниях `selected`,
+`active` и `disabled` фон задаётся общими токенами и от типа не зависит.
 
-### `ChipClearButton` — `IChipClearButtonProps extends Omit<IButtonIconProps, "children">`
+### Размеры (`EComponentSize`)
 
-Кнопка `<button>` с крестиком. Иконка выбирается по `size`:
-- SM → `CrossStrokeSrvIcon16`
-- MD → `CrossStrokeSrvIcon20`
-- LG → `CrossStrokeSrvIcon24`
+| Значение | Высота | Padding | Border-radius | Font-size |
+|---|---|---|---|---|
+| `SM` | 28px | 0 12px | 6px | 12px |
+| `MD` | 40px | 0 12px | 8px | 14px |
+| `LG` | 56px | 0 16px | 10px | 16px |
 
-### `ChipDropdownArrow`
+`size` пробрасывается в `Badge.Dot` при `showNotificationIcon` — размер значка
+уведомлений всегда согласован с размером чипса.
 
-| Prop | Тип | Описание |
-|---|---|---|
-| `rotated` | `boolean` | `true` → rotate(180deg). |
-| `size` | `EComponentSize` | Выбирает иконку Caret 16/20/24. |
+### Опциональные props
 
-### `ChipMultiselect` — `extends Omit<IMultiselectFieldProps, "renderTarget">`
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `type` | `EChipType` | `TYPE_1` | Визуальный тип |
+| `size` | `EComponentSize` | `MD` | Размер |
+| `selected` | `boolean` | `false` | Выбранное состояние (визуальное; компонент неуправляемый — состояние держит потребитель) |
+| `disabled` | `boolean` | `false` | Визуально блокирует и убирает из tab-порядка (см. ограничения ниже) |
+| `prefix` | `React.ReactNode` | — | Контент перед основным, обычно иконка слева; оборачивается в `IconWrapper` |
+| `postfix` | `React.ReactNode` | — | Контент после основного, обычно иконка справа; оборачивается в `IconWrapper` |
+| `showNotificationIcon` | `boolean` | `false` | Значок новых уведомлений (`Badge.Dot`) в правом верхнем углу |
+| `children` | `React.ReactNode` | — | Основной контент; обрезается по `max-width` с многоточием |
+| `...HTMLSpanAttributes` | — | — | Все атрибуты `<span>` кроме `prefix`, включая `onClick`, `aria-expanded`, `data-*` |
+
+### Ограничения
+
+- **`prefix` / `postfix`: отсутствие значения передавай как `undefined`, не как `null` или `false`.**
+  Классы `.withPrefix` / `.withPostfix` (обнуляют боковой `padding`) выставляются по
+  `!== undefined`, а сама иконка рендерится по truthiness. Поэтому
+  `postfix={condition && <Icon/>}` при `condition === false` даст чипс с нулевым
+  правым паддингом и без иконки. Пиши `postfix={condition ? <Icon/> : undefined}`.
+  Внутри библиотеки все обёртки передают либо JSX, либо `<span />`-заглушку —
+  проблема проявляется только у внешнего потребителя.
+- **`disabled` — не нативный атрибут.** Корневой элемент — `<span>`, поэтому блокировка
+  чисто визуальная: `pointer-events: none` в LESS плюс `tabIndex={-1}`. Реальные
+  пользовательские клики и клавиатура до обработчиков не доходят, но программно
+  диспатченные события (`fireEvent.click` в тестах, синтетический `dispatchEvent`)
+  вызовут `onClick` / `onKeyDown`. Не полагайся на `disabled` как на защиту в логике —
+  проверяй флаг в самом обработчике, если это критично.
+- **`selected` и `disabled` совместимы** — есть отдельные токены
+  `--triplex-next-Chip-*_Selected_Disabled`.
+- Ширина ограничена: `min-width: 40px`, `max-width: 264px`. Длинный `children`
+  обрезается многоточием, а не переносится.
 
-Обёртка над `MultiselectField`, где `renderTarget` рендерит `Chip` с
-`ClearButton` (если selected) или `DropdownArrow` (если нет).
+---
 
-| Доп. prop | Тип | Описание |
-|---|---|---|
-| `clearSelected` | `() => void` | Коллбек на крестик. |
-| `disabled` | `boolean` | Форвардится в Chip и MultiselectField. |
-| `selected` | `boolean` | Включает "выбранное" состояние + ClearButton. |
-| `label` | `ReactNode` | Текст при пустом выборе. |
-| `displayedValue` | `ReactNode` | Текст при выборе (fallback на label). |
+## Дизайн-токены
 
-### `ChipOptions` — `extends Omit<IChipProps, "prefix" | "postfix">`
+Паттерн: `--triplex-next-Chip-{Property}_{Modifier}_{State}`
 
-Иконка `OptionsStrokeSrvIcon24` слева. Справа ClearButton только если
-selected.
+```text
+--triplex-next-Chip-Background_Type1_Default
+--triplex-next-Chip-Background_Type1_Hover
+--triplex-next-Chip-Background_Type2_Default
+--triplex-next-Chip-Background_Type2_Hover
+--triplex-next-Chip-Background_Active
+--triplex-next-Chip-Background_Disabled
+--triplex-next-Chip-Background_Selected_Default
+--triplex-next-Chip-Background_Selected_Hover
+--triplex-next-Chip-Background_Selected_Active
+--triplex-next-Chip-Background_Selected_Disabled
+--triplex-next-Chip-Color_Default
+--triplex-next-Chip-Color_Hover
+--triplex-next-Chip-Color_Active
+--triplex-next-Chip-Color_Disabled
+--triplex-next-Chip-Color_Selected_Default
+--triplex-next-Chip-Color_Selected_Hover
+--triplex-next-Chip-Color_Selected_Active
+--triplex-next-Chip-Color_Selected_Disabled
+--triplex-next-Chip-Shadow_Focus
+```
 
-| Доп. prop | Тип | Описание |
-|---|---|---|
-| `clearSelected` | `() => void` | Коллбек крестика. |
+Токены `_Type1_` / `_Type2_` существуют только для `Background` в состояниях
+Default и Hover. Цвет текста (`Color_*`) от типа не зависит.
 
-### `ChipSort` — SelectExtendedField target с `SortStrokeSrvIcon24`
+---
 
-`selected = Boolean(value) && !isEqual(defaultValue, value)` — в отличие от
-простого `value`: если текущее значение равно дефолту, чип не подсвечивается
-как изменённый. **Это ключевое поведение Sort-чипа** — дефолтная сортировка
-не должна выглядеть как "активный фильтр".
+## Инварианты
 
-### `ChipSelect`, `ChipSuggest`, `ChipDatePicker` — см. соответствующие
-файлы в subfolder (компонентно большие). Смотри их `<Name>Target.tsx` для
-того, как они рендерят базовый Chip.
+- **`forwardRef`** — обязателен, `ref` указывает на корневой `<span>`. Не убирать.
+- **Корневой элемент — `<span role="button">`, а не нативный `<button>`.** Это осознанное
+  решение: в `postfix` живут вложенные интерактивные элементы (`ChipClearButton`,
+  `ChipDropdownArrow`), а `<button>` внутри `<button>` — невалидный HTML. Смена корневого
+  тега сломает всё семейство Chip*.
+- **`role` и `tabIndex` выставляются до `{...restProps}`**, то есть потребитель может
+  их переопределить через props. Это часть текущего контракта — менять порядок осознанно.
+  (`ref` при `forwardRef` в `restProps` не попадает, на него порядок не влияет.)
+- **Класс `.chipGroupItem`** выставляется всегда, наравне с `.chip`. Объявлен
+  в `styles/Chip.module.less` и служит общим маркером «элемент верхнего уровня
+  в ряду чипсов»: его проставляют себе все члены семейства — `Chip`, `ChipSort`,
+  `ChipMultiselect`, `ChipSelect`, `ChipDatePicker`, `ChipSuggest`. Причём
+  `.chipGroupItem` не всегда совпадает с `.chip`: в `ChipSelect` / `ChipMultiselect`
+  `.chip` лежит внутри элемента с `.chipGroupItem`. Раскладка `ChipGroup` на этот
+  класс не опирается — в её стилях он не встречается. Не удалять и не переименовывать.
+- **`EChipType` значения** (`type_1`, `type_2`) — публичное API, не переименовывать.
+- **`EComponentSize`** — общий enum из `src/enums/EComponentSize`, локального аналога не заводить.
+- **Селектор `[aria-expanded="true"]`** в LESS даёт active-стиль. На него опираются
+  chip-триггеры дропдаунов — не убирать вместе с рефакторингом стилей.
+- **Barrel-экспорты** `src/components/Chip/index.ts` — `Chip`, `IChipProps`, `EChipType`
+  и всё семейство. Сохранять.
+- **Story ids** `chips-chip--*` завязаны на baseline-скриншоты в `__screenshots__/` —
+  переименование story требует синхронного обновления baseline.
 
 ---
 
-## Ключевые особенности реализации
+## Accessibility
 
-### Space preventDefault в Chip
+- Роль `role="button"` на `<span>`; в tab-порядке через `tabIndex={0}`, при `disabled` —
+  `tabIndex={-1}`.
+- **Клавиатурная активация не реализована внутри компонента.** `Chip` перехватывает
+  `keydown` только чтобы вызвать `preventDefault()` на пробеле (код `Space`) — это гасит
+  прокрутку страницы, поскольку чипс фокусируем. Синтетический `click` по Enter/Space
+  компонент не генерирует (у `<span role="button">` нет нативного поведения кнопки),
+  внешний `onKeyDown` вызывается всегда и после `preventDefault`. Если чипс должен
+  срабатывать с клавиатуры, потребитель обрабатывает Enter/Space сам через `onKeyDown`.
+  Обёртки семейства (`ChipSelect`, `ChipSuggest`, `ChipDatePicker`) делают это на своём уровне.
+- Фокус-стиль через `:focus-visible` (`--triplex-next-Chip-Shadow_Focus`) — виден только
+  при клавиатурной навигации. Нативная обводка на корневом элементе намеренно отключена
+  (`outline: none` в LESS) в пользу `box-shadow` — убирать правило нельзя, иначе фокус
+  отрисуется дважды.
+- **Выбранное состояние не объявляется ассистивным технологиям автоматически.** `selected`
+  меняет только визуал. Для роли `button` передавай `aria-pressed` через `...rest`;
+  в списке-подобных сценариях используй `ChipSelect` / `ChipMultiselect`.
+- **`aria-expanded`** потребитель передаёт сам, когда чипс работает триггером дропдауна —
+  атрибут дополнительно активирует active-стиль через CSS.
+- Чипс без текстового `children` (только `prefix`/`postfix`, как в `ChipIcon`) требует
+  `aria-label` от потребителя — библиотека мультиязычная, текст не хардкодится.
 
-```ts
-if (isKey(event.code, "SPACE")) {
-    event.preventDefault();
-}
-onKeyDown?.(event);
-```
+---
 
-Блокирует скролл страницы. Не добавляет toggle-логики — это задача
-потребителя. Потребители обычно через свой `onKeyDown` обрабатывают ENTER/SPACE
-для активации.
+## Связанные компоненты
 
-### `role="button"` + `tabIndex={disabled ? -1 : 0}`
+- `ChipGroup` (`src/components/ChipGroup`) — контейнер-раскладка для чипсов;
+  рекомендуемая обёртка, задаёт `size` и режим `oneLine`
+- `ChipIcon` — тонкая обёртка: `children` уходит в `prefix`, `postfix` заполняется
+  пустым `<span />` ради симметричных отступов
+- `ChipOptions` — чипс с иконкой опций и кнопкой сброса выбора (`clearSelected`)
+- `ChipClearButton` — кнопка сброса для `postfix`; `forwardRef` на `HTMLButtonElement`,
+  props расширяют `Omit<IButtonIconProps, "children">` (то есть доступен весь API
+  `ButtonIcon`, включая `onClick` и `aria-label`) плюс собственный `size?: EComponentSize`,
+  выбирающий размер иконки-крестика
+- `ChipDropdownArrow` — стрелка дропдауна для `postfix`; объявлена как `React.FC`
+  (не `forwardRef`), собственных обработчиков не имеет. Props: **обязательный**
+  `rotated: boolean` (даёт класс `.rotated`) и `size?: EComponentSize`
+- `ChipSelect`, `ChipMultiselect`, `ChipSuggest`, `ChipDatePicker`, `ChipSort` —
+  составные компоненты, использующие `Chip` как target-элемент дропдауна
+- `Badge` (`Badge.Dot`) — значок уведомлений при `showNotificationIcon`
+- `IconWrapper` — обёртка `prefix` / `postfix`, добавляет классы `hoverable` / `disabled`,
+  управляющие цветом иконки при взаимодействии
 
-Chip — span с ARIA-ролью button. Disabled → вне tab-order. Переопределение
-`role` через `{...rest}` — возможно (например, ChipMultiselect передаёт
-`role="listbox"`).
+---
 
-### Notification dot = Badge.Dot
+## Stories
 
-```tsx
-{showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}
-```
+Основные истории: `stories/Chips/Chip.stories.tsx`
+Файлы примеров: `stories/Chips/examples/Chip/`
 
-Тот же `Badge.Dot` из семейства Badge. Size — тот же. Позиция абсолютная,
-настраивается в LESS по размерам (SM=3px/3px, MD=4px/4px, LG=6px/6px).
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `type`, `size`, `disabled`, `showNotificationIcon` |
+| `Default` | `DefaultExample.tsx` | Базовое использование: переключение `selected` по клику |
+| `Types` | `TypesExample.tsx` | `TYPE_1` и `TYPE_2` |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG |
+| `States` | `StatesExample.tsx` | Состояния `selected` и `disabled` |
+| `WithPrefixAndPostfix` | `WithPrefixAndPostfixExample.tsx` | Иконки слева и справа от контента |
+| `WithNotificationIcon` | `WithNotificationIconExample.tsx` | Значок уведомлений во всех трёх размерах |
+| `VisualTests` | `DefaultExample.tsx` | Скриншот-регрессия, `play` доводит чипс до состояния фокуса |
 
-### `prefix`/`postfix` через `IconWrapper`
+---
 
-```tsx
-<IconWrapper className={styles.prefix} disabled={Boolean(disabled)}>
-    {prefix}
-</IconWrapper>
-```
+## История изменений
 
-`IconWrapper` управляет цветом иконки через `disabled`. Если внутри prefix
-SVG с `paletteIndex` — подстраивается под текущую тему.
+| Дата | Изменение |
+|---|---|
+| 2026-07-29 | Создан документ (TRI-26, AI-Ready Phase 1) |
+| 2026-07-29 | AI-рефакторинг (TRI-26): codestyle-чистка `Chip.tsx` (константы-маппинги в UPPER_SNAKE_CASE, эквивалентные упрощения в `clsx`, JSDoc на `children` и `handleKeyDown`), unit-тесты расширены с 5 до 22 кейсов; публичный API, DOM и визуал не изменены |
+| 2026-07-29 | Правки по ревью PR #487: уточнена атрибуция класса `.chipGroupItem` (его проставляет семейство Chip*, а не раскладка `ChipGroup`) и описание API `ChipClearButton` / `ChipDropdownArrow` |
 
-### ChipIcon и `postfix={<span />}` — симметричные паддинги
+---
 
-```tsx
-<Chip {...rest} prefix={children} postfix={<span />} ref={ref} />
-```
+## Примеры использования
 
-Пустой span чтобы `styles.withPostfix` класс применился. Без этого padding-right
-был бы по обычному правилу, и чип выглядел бы асимметрично. **Hack, но
-намеренный.**
+### Default
 
-### ChipMultiselect — role="listbox" на чипе
+`stories/Chips/examples/Chip/DefaultExample.tsx`
 
 ```tsx
-<Chip role="listbox" aria-expanded={opened} ...>
+import React, { useState } from "react";
+import { Chip } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => {
+    const [selected, setSelected] = useState(false);
+    return (
+        <Chip selected={selected} onClick={() => setSelected((s) => !s)}>
+            Value
+        </Chip>
+    );
+};
 ```
 
-Нестандартно — обычно listbox это UL. Это решение MultiselectField:
-chip-таргет действует как listbox button. Screen reader-ы разного качества
-по-разному интерпретируют. Если нужна более строгая семантика — потребителю
-надо делать свой renderTarget.
+### Types
 
-### ChipSort — `isEqual` с defaultValue
+`stories/Chips/examples/Chip/TypesExample.tsx`
 
-```ts
-const selected = Boolean(value) && !isEqual(defaultValue, value);
+```tsx
+import React, { useState } from "react";
+import { Chip, EChipType } from "@sberbusiness/triplex-next";
+
+type TypeItemProps = {
+    type: EChipType;
+    label: string;
+};
+
+const TypeItem = ({ type, label }: TypeItemProps) => {
+    const [selected, setSelected] = useState(false);
+
+    const handleClick = () => setSelected((prevSelected) => !prevSelected);
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <Chip type={type} selected={selected} onClick={handleClick}>
+                Value
+            </Chip>
+        </div>
+    );
+};
+
+const typeOptions = Object.values(EChipType).map((type) => ({
+    value: type,
+    label: type.toUpperCase(),
+}));
+
+export const TypesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {typeOptions.map(({ value, label }) => (
+            <TypeItem key={value} type={value} label={label} />
+        ))}
+    </div>
+);
 ```
 
-Использует `lodash` (не `-es`). Не менять без общего рефакторинга импортов.
-Deep equal нужен, потому что options — объекты (value, label).
+### Sizes
 
-### `aria-expanded` → `.chip[aria-expanded="true"]` стили
+`stories/Chips/examples/Chip/SizesExample.tsx`
 
-```less
-&:active,
-&[aria-expanded="true"] {
-    background: var(--triplex-next-Chip-Background_Active);
-}
+```tsx
+import React, { useState } from "react";
+import { Chip, EComponentSize } from "@sberbusiness/triplex-next";
+
+type SizeItemProps = {
+    size: EComponentSize;
+    label: string;
+};
+
+const SizeItem = ({ size, label }: SizeItemProps) => {
+    const [selected, setSelected] = useState(false);
+
+    const handleClick = () => setSelected((prevSelected) => !prevSelected);
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <Chip size={size} selected={selected} onClick={handleClick}>
+                Value
+            </Chip>
+        </div>
+    );
+};
+
+const sizeOptions = Object.values(EComponentSize).map((size) => ({
+    value: size,
+    label: size.toUpperCase(),
+}));
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {sizeOptions.map(({ value, label }) => (
+            <SizeItem key={value} size={value} label={label} />
+        ))}
+    </div>
+);
 ```
 
-CSS-селектор на атрибут. Когда dropdown раскрыт, чип выглядит "нажатым" без
-дополнительного className. Умный приём.
+### States
 
-### `styles.chipGroupItem` — маркер для ChipGroup
+`stories/Chips/examples/Chip/StatesExample.tsx`
 
-Почти все варианты получают этот класс:
-```less
-.chipGroupItem { display: inline-block; }
+```tsx
+import React from "react";
+import { Chip } from "@sberbusiness/triplex-next";
+
+export const StatesExample = () => (
+    <div style={{ display: "flex", gap: 12 }}>
+        <Chip selected>Selected</Chip>
+        <Chip disabled>Disabled</Chip>
+    </div>
+);
 ```
 
-ChipGroup рендерит flex-контейнер и ожидает inline-block детей. **Не
-удалять класс** — иначе чипы сломают layout в ChipGroup.
+### WithPrefixAndPostfix
 
-### `uniqueId()` в ChipSort для `aria-controls`
+`stories/Chips/examples/Chip/WithPrefixAndPostfixExample.tsx`
 
-```ts
-const instanceId = useRef(uniqueId());
+```tsx
+import React from "react";
+import { SortStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+import { Chip } from "@sberbusiness/triplex-next";
+
+export const WithPrefixAndPostfixExample = () => (
+    <Chip prefix={<SortStrokeSrvIcon20 paletteIndex={5} />} postfix={<SortStrokeSrvIcon20 paletteIndex={5} />}>
+        Value
+    </Chip>
+);
 ```
 
-Связывает ChipIcon (role=combobox) и dropdown. Если через useRef(uniqueId())
-— значение стабильно между рендерами, но каждый инстанс получит свой id.
-
----
-
-## Инварианты
-
-- **`Chip` — forwardRef**, не удалять.
-- **`role="button"` и `tabIndex` на Chip** — не менять семантику без
-  согласования.
-- **`Space preventDefault`** в `handleKeyDown` — не удалять (скролл
-  страницы).
-- **`Omit<HTMLAttributes, "prefix">`** — нужно, т.к. `prefix` — HTML
-  устаревший атрибут (RDFa).
-- **`IconWrapper` для prefix/postfix** — не замена на div. `IconWrapper`
-  управляет цветом иконок по disabled.
-- **`styles.chipGroupItem`** — на каждом root-элементе вариантов чипов.
-  Ожидается ChipGroup'ом.
-- **`ChipIcon` → `postfix={<span />}`** — не удалять span. Нужен для
-  симметричных паддингов.
-- **`ChipSort` — `!isEqual(defaultValue, value)` для selected** — не
-  упрощать до `Boolean(value)`. Это UX-правило (дефолт не "активный фильтр").
-- **`Badge.Dot` для notification icon** — не заменять на произвольный
-  элемент, размер синхронизирован с size чипа.
-- **Базовые токены `--triplex-next-Chip-*`** — не дублировать для вариантов.
-  Варианты используют одни и те же токены (цвета).
-- **Варианты (ChipSelect/ChipSuggest/ChipDatePicker) обёртки над
-  SelectExtendedField/SuggestField/подобными** — не инвертировать зависимость
-  (не Chip оборачивает Field, а наоборот).
-- **`lodash` (не `-es`) в ChipSort** — исторически, не менять точечно.
-
----
-
-## Accessibility
-
-- **`role="button"`** на Chip — работает с screen reader'ом как кнопка.
-- **`tabIndex` управляется через disabled** — disabled чип вне tab-order.
-- **`aria-expanded`** на Chip в ChipMultiselect / ChipSort — для dropdown
-  состояния. Screen reader озвучит "раскрыто"/"свёрнуто".
-- **`aria-controls`** в ChipSort связывает чип с dropdown через
-  `instanceId`.
-- **Клавиатура**:
-  - Space — preventDefault (против скролла), потребитель обрабатывает
-    активацию.
-  - Enter — bubble up, потребитель вешает handler через `onKeyDown`.
-  - ChipMultiselect/ChipSort — свои `handleKeyDown` обрабатывают Enter/Space
-    для toggle opened.
-- **Notification icon `Badge.Dot`** — чисто визуальный, без ARIA. Если
-  означает "есть новые" — потребитель должен добавить `aria-label` на
-  Chip (например, "Фильтр, есть новые").
-- **Nested interactive**: ClearButton внутри Chip — кнопка в "кнопке".
-  Решается `event.stopPropagation()` на ClearButton, чтобы клик на крестик
-  не триггерил родительский toggle.
-
----
-
-## Дизайн-токены
+### WithNotificationIcon
 
-**Базовые (разделяемые всеми вариантами):**
-```
---triplex-next-Chip-Background_Default
---triplex-next-Chip-Background_Hover
---triplex-next-Chip-Background_Active
---triplex-next-Chip-Background_Disabled
---triplex-next-Chip-Color_Default
---triplex-next-Chip-Color_Hover
---triplex-next-Chip-Color_Active
---triplex-next-Chip-Color_Disabled
---triplex-next-Chip-Shadow_Focus                      # focus-visible
-```
+`stories/Chips/examples/Chip/WithNotificationIconExample.tsx`
 
-**Selected (включённое состояние):**
-```
---triplex-next-Chip-Background_Selected_Default
---triplex-next-Chip-Background_Selected_Hover
---triplex-next-Chip-Background_Selected_Active
---triplex-next-Chip-Background_Selected_Disabled
---triplex-next-Chip-Color_Selected_Default
---triplex-next-Chip-Color_Selected_Hover
---triplex-next-Chip-Color_Selected_Active
---triplex-next-Chip-Color_Selected_Disabled
+```tsx
+import React from "react";
+import { Chip, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const WithNotificationIconExample = () => (
+    <div style={{ display: "flex", gap: 12 }}>
+        <Chip size={EComponentSize.SM} showNotificationIcon>
+            SM
+        </Chip>
+        <Chip size={EComponentSize.MD} showNotificationIcon>
+            MD
+        </Chip>
+        <Chip size={EComponentSize.LG} showNotificationIcon>
+            LG
+        </Chip>
+    </div>
+);
 ```
 
-Размеры (высоты, radius, padding, font-size) — hardcoded в LESS по size-
-классам, не токенизированы.
-
----
-
-## Связанные компоненты
-
-- `ChipGroup` (`src/components/ChipGroup`) — контейнер для чипов с
-  горизонтальным скроллом/переносом.
-- `Badge` (`src/components/Badge`) — notification dot (`Badge.Dot`) —
-  та же реализация.
-- `IconWrapper` (`src/components/IconWrapper`) — обёртка для prefix/postfix
-  иконок.
-- `ButtonIcon` (`src/components/Button`) — основа для `ChipClearButton`.
-- `MultiselectField`, `SelectExtendedField`, `SuggestField` — варианты
-  чипов обёртки над этими field'ами.
-- `EComponentSize`, `createSizeToClassNameMap` — общий паттерн size'ов.
-
----
-
-## Stories
-
-Отдельная story-файл для каждого варианта:
-
-| File | Variant |
-|---|---|
-| `stories/Chips/Chip.stories.tsx` | Base Chip |
-| `stories/Chips/ChipIcon.stories.tsx` | ChipIcon |
-| `stories/Chips/ChipGroup.stories.tsx` | ChipGroup (отдельный компонент) |
-| `stories/Chips/ChipMultiselect.stories.tsx` | ChipMultiselect |
-| `stories/Chips/ChipOptions.stories.tsx` | ChipOptions |
-| `stories/Chips/ChipSelect.stories.tsx` | ChipSelect |
-| `stories/Chips/ChipSort.stories.tsx` | ChipSort |
-| `stories/Chips/ChipSuggest.stories.tsx` | ChipSuggest |
-| `stories/Chips/ChipDatePicker.stories.tsx` | ChipDatePicker |
-
-Примеры в `stories/Chips/examples/<Name>/`. Typical: `Default`, `Playground`,
-`Sizes`, специфичные для варианта (`States`, `WithNotificationIcon`,
-`WithPrefixAndPostfix` для base Chip).
-
----
-
-## История изменений
-
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |