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

package/bundle/components/Link.md

@@ -1,13 +1,12 @@
 ---
 component: Link
-category: Navigation
-figma-node: ""
-figma-file: ""
-related: [Button, IconWrapper, Typography]
+category: Link
+related: [IconWrapper]
 tokens:
-  - --triplex-next-Link-Color
-  - --triplex-next-Link-Color-Hover
-  - --triplex-next-Link-Color-Active
+  - Link.Text_Color_Default
+  - Link.Text_Color_Hover
+  - Link.Text_Color_Active
+  - Link.BorderColor_Focus
 stories: stories/Link/Link.stories.tsx
 version: "1.0"
 ---
@@ -16,141 +15,184 @@ version: "1.0"
 
 ## Назначение
 
-Инлайновая ссылка — `<a>` с дизайн-цветами бренда и поддержкой
-**leading/trailing-контента** (иконки). Вставляет zero-width space
-для корректного выравнивания иконки с текстом и умеет **привязывать
-иконку к первому/последнему слову** многословной ссылки, чтобы иконка
-не "отлетала" на новую строку при переносе.
+Гиперссылка — инлайновый `<a>` с типографикой и состояниями дизайн-системы. Помимо обычного
+текста умеет принимать сопутствующий контент (обычно иконку) до и после тела ссылки, следя
+за тем, чтобы этот контент не оторвался от текста при переносе строки.
 
-Используй когда: нужна стандартная текстовая ссылка (в тексте, в списке).
-Для стилизованной кнопки-CTA — `Button` с `type="link"`.
+Используй когда: нужен переход по адресу — навигация внутри приложения или ссылка наружу.
+Не используй когда: элемент выполняет действие, а не переход (отправка формы, открытие модалки) —
+это `Button`, в том числе с темой `EButtonTheme.LINK`, которая выглядит как ссылка, но остаётся
+кнопкой по семантике и клавиатурному поведению.
 
----
-
-## Файловая структура
-
-```text
-src/components/Link/
-├── Link.tsx                   # forwardRef<HTMLAnchorElement>
-├── index.ts                   # Barrel
-├── styles/Link.module.less
-└── __tests__/Link.test.tsx
-```
+Собственных размеров и типографики у компонента нет: размер и цвет текста наследуются от
+контекста. В stories и в проде ссылку оборачивают в `Text` с нужными `size` и `type`.
 
 ---
 
 ## Варианты и props
 
-### `ILinkCommonProps extends AnchorHTMLAttributes<HTMLAnchorElement>`
+Интерфейс `ILinkCommonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>` — все
+стандартные атрибуты `<a>` поддерживаются. Большинство (`href`, `onClick`, `onBlur`,
+`onMouseDown`, `download`, …) уходит на корневой элемент как есть, через `...rest`.
 
-| Prop | Тип | Обязателен | Описание |
-|---|---|---|---|
-| `children` | `ReactNode` | Да | Текст или node. Для строк включается логика "иконка + первое/последнее слово". |
-| `contentBefore` | `() => ReactElement` | Нет | Рендер-функция leading-контента (обычно иконка). |
-| `contentAfter` | `() => ReactElement` | Нет | Рендер-функция trailing-контента. |
-| `href`, `target`, `rel`, `onClick`, … | стандартные `<a>`-атрибуты | — | Передаются на `<a>`. |
+Три атрибута компонент обрабатывает сам — положить их в объект и разложить спредом
+не то же самое, что «прокинуть напрямую»:
 
-**`contentBefore` / `contentAfter` — render-props**, не `ReactNode`. Функции вызываются каждый раз при рендере.
+| Prop | Что делает компонент |
+|---|---|
+| `rel` | Пропускает через `getSafeRel(target, rel)` — см. «Безопасность внешних ссылок» |
+| `target` | Выставляет явно после спреда; участвует в вычислении `rel` |
+| `className` | Мерджит с `styles.link` через `clsx`, собственный класс не затирается |
 
----
+### Обязательные props
 
-## Ключевые особенности реализации
+| Prop | Тип | Описание |
+|---|---|---|
+| `children` | `React.ReactNode` | Тело гиперссылки. Строка и не-строка обрабатываются по-разному — см. «Сшивка контента со словами» |
 
-### Zero-width space перед leading-контентом
+### Опциональные props
 
-```tsx
-const renderContentBefore = () =>
-    contentBefore ? <>{"\u200B"}{contentBefore()}</> : null;
-```
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `contentBefore` | `() => React.ReactElement` | — | Рендер-функция контента перед телом ссылки. Типичное содержимое — иконка |
+| `contentAfter` | `() => React.ReactElement` | — | Рендер-функция контента после тела ссылки |
 
-- `"\u200B"` (ZWSP) — невидимый символ, используется для корректного **выравнивания по baseline**. Без него иконка "прыгает" относительно текста.
-- Аналогичного для `contentAfter` нет — баланс достигается CSS-стилями.
+`contentBefore` / `contentAfter` — именно **функции**, а не узлы: компонент вызывает их сам,
+по одному разу за рендер, и сам решает, в какое место вёрстки поставить результат
+(см. таблицу ниже). Возвращать нужно один элемент — тип `React.ReactElement`,
+не `ReactNode`: строка, массив или `null` не подойдут.
 
-### Привязка иконки к первому/последнему слову
+### Сшивка контента со словами
 
-```tsx
-if (words.length < 2 || (words.length < 3 && contentBefore && contentAfter)) {
-    return <span>{before}{text}{after}</span>; // всё в одном span
-}
-// Иначе: первый + оставшиеся + последний слово как отдельные узлы
-return <>{firstNode} {restWords} {lastNode}</>;
-```
+Главная неочевидность компонента. Если `contentBefore` / `contentAfter` не переданы, `children`
+рендерятся как есть. Если переданы — поведение зависит от типа `children`:
 
-- Для строковых `children` Link парсит текст по пробелам и **оборачивает первое/последнее слово** в `<span>` вместе с `contentBefore`/`contentAfter`.
-- Это гарантирует, что иконка не разорвётся с соседним словом при word-wrap.
-- Для нестроковых `children` — простая конкатенация: `{before}{node}{after}`.
-- Edge case: `words.length < 2` (одно слово) или `< 3` при обоих before+after → всё в одном `<span>` (иначе нечего "разделять").
+**`children` — строка.** Строка режется по пробелам, и контент «приклеивается» к крайним словам,
+чтобы иконка никогда не осталась на строке одна:
 
-### `IconWrapper displayContents`
+| Слов в строке | Что получается |
+|---|---|
+| 1 | Одно слово вместе с обоими контентами — один неразрывный блок |
+| 2 + оба контента | Всё ещё один неразрывный блок: развести контенты по разным словам нельзя, иначе при переносе строки они разъедутся |
+| 2 + один контент | Разбивается на первое и последнее слово, контент клеится к своему краю |
+| 3 и больше | Первое слово + `contentBefore` — один блок, последнее слово + `contentAfter` — другой, середина между ними обычным текстом |
 
-```tsx
-<a>
-    <IconWrapper displayContents>{content}</IconWrapper>
-</a>
-```
+Известный артефакт ветки «2 слова + один контент»: середина строки пуста, и в разметку
+попадают два пробела подряд между словами. В HTML они схлопываются в один, визуально
+это незаметно, но в `textContent` видны — тесты потребителей должны сравнивать текст
+с нормализацией пробелов, а не побайтово.
 
-- Оборачивает **весь контент** в `IconWrapper` с `display: contents`, чтобы включить `hoverable`-класс для иконок в `contentBefore`/`contentAfter` (меняет `fill` при hover).
-- `displayContents` нужен, чтобы обёртка не создавала свой box и не ломала inline-поток.
+Неразрывный блок — `<span>` с классом `wordWithContent` (`white-space: nowrap`,
+`display: inline-flex`). Перед `contentBefore` вставляется zero-width space (`U+200B`) — он
+нужен для правильного вертикального выравнивания внутри inline-flex.
 
-### `data-tx={process.env.npm_package_version}` atribute
+Асимметрия намеренная: ZWSP ставится только перед `contentBefore` и не ставится после
+`contentAfter`. В `after`-блоке первым идёт текст слова и он же задаёт базовую линию;
+в `before`-блоке первым шёл бы элемент контента, и ZWSP подставляет перед ним текстовый
+бокс. Не «доводи до симметрии», добавляя ZWSP в конец, — это сдвинет выравнивание.
 
-Версия библиотеки пишется в DOM — для дебага на production (можно узнать версию, просмотрев разметку). Этот атрибут стоит сохранить при изменениях.
+**`children` — не строка** (элемент, фрагмент, массив). Резать по словам нечего, поэтому
+контенты просто ставятся по краям, без обёрток `wordWithContent` и без zero-width space.
+Следствие: перенос строки может оторвать иконку от текста — за неразрывность в этом случае
+отвечает потребитель.
 
-### `role="link"` на `<a>`
+### Безопасность внешних ссылок
 
-**Избыточно** — `<a href>` по умолчанию имеет role="link". Но без `href` роль теряется → `role="link"` делает компонент семантически корректным и для "кнопкоподобных" ссылок без href'а. Не удалять без рефакторинга.
+При `target="_blank"` компонент сам подставляет `rel="noopener"` (утилита `getSafeRel`) —
+защита от reverse tabnabbing. Явно переданный непустой `rel` потребителя сохраняется как есть;
+пустая строка защиту не отключает. Без `target="_blank"` атрибут `rel` не добавляется.
 
-### `onBlur` / `onMouseDown` прокидываются отдельно
+---
 
-Остальные handler'ы идут через `...rest`, но эти два — отдельно. **Легаси** — можно убрать, упростив до `...rest`. При рефакторинге проверять storybook-примеры.
+## Дизайн-токены
 
----
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/Link.ts`.
 
-## Инварианты
+```text
+Link.Text_Color_Default
+Link.Text_Color_Hover
+Link.Text_Color_Active
+Link.BorderColor_Focus
+```
+
+Только цвет текста по состояниям и кольцо фокуса. `Link.BorderColor_Focus` подставляется
+в `box-shadow` (не в `border-color`) — имя токена историческое, менять его нельзя.
 
-- **`<a>` с `role="link"`** — не менять тег на `<span>`/`<button>` (нарушит screen reader'ов).
-- **`contentBefore` / `contentAfter` — функции**, не nodes. Публичный API.
-- **ZWSP перед leading-контентом** — не убирать без визуальной регрессии.
-- **Строковые children обрабатываются специально** (первое/последнее слово). Не все потребители это знают; при рефакторинге поддерживать логику разрыва слов.
-- **`IconWrapper displayContents`** — обязателен, обеспечивает `hoverable` для иконок внутри.
-- **`data-tx` атрибут** — продакшн-маркер версии, не трогать.
-- **`forwardRef<HTMLAnchorElement>`** — не `HTMLElement`.
+Размер и начертание текста компонент не задаёт вовсе — их даёт родительский `Text`
+или окружающая типографика. Отступ 2px между словом и контентом задан литералом
+в `styles/Link.module.less`.
 
 ---
 
-## Accessibility
+## Инварианты
 
-- `<a>` с `href` — полная клавиатурная навигация (Tab, Enter).
-- `role="link"` — дублирующая роль, но нужна для `<a>` без href (interactive span-like ссылки).
-- Иконки в `contentBefore`/`contentAfter` не имеют `aria-label` — потребитель должен передать нужные атрибуты через `contentBefore={() => <Icon aria-hidden="true" />}` (если декоративная) или осмысленный `aria-label` у иконки (если несёт смысл).
-- `disabled`-состояние у `<a>` невозможно; для блокировки — `tabIndex={-1}` + CSS (нет в компоненте).
+- `forwardRef<HTMLAnchorElement>` — не убирать. Ref всегда указывает на корневой `<a>`.
+- Корневой элемент — `<a>`. Менять нельзя: от него зависят нативная навигация,
+  клавиатурная семантика и стили `:hover` / `:active` / `:focus-visible`.
+- `displayName` — `"Link"`. Не менять.
+- Имя интерфейса `ILinkCommonProps` и имена props (`children`, `contentBefore`, `contentAfter`) —
+  публичный API, переименование ломает потребителей.
+- `role="link"` рендерится **до** `{...rest}`, то есть потребитель может его переопределить.
+  Порядок сложился исторически; трогать его — изменение публичного поведения.
+- Автоподстановка `rel="noopener"` при `target="_blank"` — контракт безопасности,
+  не убирать. Логика вынесена в `src/utils/html/anchorSecurity.ts` и переиспользуется
+  другими компонентами.
+- Zero-width space перед `contentBefore` — не «мусорный символ», а выравнивание.
+  Он попадает в `textContent`, это нужно учитывать в тестах потребителей.
+- Классы `wordWithContent`, `before`, `after` из `styles/Link.module.less` завязаны на
+  логику разбиения в `Link.tsx` — переименовывать только синхронно с TSX и тестами.
+- `.before :first-child` и `.after :last-child` — селекторы **потомка**, а не прямого
+  ребёнка. Отступ 2px получает каждый первый (последний) потомок на любом уровне
+  вложенности: если `contentBefore` возвращает иконку в обёртке, 2px достаются и обёртке,
+  и иконке. Замена на `> :first-child` изменит рендер и потребует пересъёмки
+  baseline-скриншотов — не менять походя.
+- Barrel `src/components/Link/index.ts` реэкспортирует всё из `Link.tsx` — сохранять.
 
 ---
 
-## Дизайн-токены
-
-```
---triplex-next-Link-Color             # основной цвет
---triplex-next-Link-Color-Hover       # hover
---triplex-next-Link-Color-Active      # active
-```
+## Accessibility
 
-(Названия могут отличаться — проверь `styles/Link.module.less`.)
+- Роль: `<a>` с явным `role="link"`. Доступное имя берётся из текстового содержимого,
+  поэтому осмысленный текст ссылки — ответственность потребителя. Компонент не хардкодит
+  строк: библиотека мультиязычная.
+- Иконка в `contentBefore` / `contentAfter` декоративная — она не должна добавлять доступное
+  имя. Если иконка несёт смысл (например, «откроется в новой вкладке»), потребитель обязан
+  сам задать `aria-label` на ссылке или скрытый текст.
+- `href` компонент не подставляет. Без `href` элемент выпадает из порядка фокуса и с клавиатуры
+  недоступен — для действия без адреса бери `Button` с темой `EButtonTheme.LINK`.
+- Клавиатура: собственных обработчиков нет, работает нативное поведение `<a href>`
+  (Tab, Enter).
+- Кольцо фокуса — через `:focus-visible`, то есть только при клавиатурной навигации;
+  `outline` снят намеренно и заменён на `box-shadow` из токена.
+- При `target="_blank"` о переходе в новую вкладку скринридер сам не предупреждает —
+  если это важно, текст предупреждения даёт потребитель.
 
 ---
 
 ## Связанные компоненты
 
-- `IconWrapper` — обёртка для `hoverable`-стилей иконок (используется внутри).
-- `Button` с `type="link"` — кнопка, стилизованная как ссылка.
-- `Typography` — для текста без ссылочной функции.
+- `Button` — другой класс задач при похожей визуальной подаче: тема `EButtonTheme.LINK`
+  рисует кнопку как ссылку. Выбор между ними по семантике, а не по виду: переход по адресу —
+  `Link`, действие на странице — `Button`. Поэтому `Button` намеренно не попал в `related`:
+  это отвод в соседнюю задачу, а не взаимозаменяемый вариант.
+- `IconWrapper` — рендерится внутри с `displayContents`, поэтому не создаёт своего блока
+  в вёрстке. Ставит глобальный класс `hoverable`, по которому иконки в `contentBefore` /
+  `contentAfter` перекрашиваются вместе со ссылкой на hover и active. Размер иконки он
+  не задаёт — его задаёт сама иконка (`...Icon16` / `...Icon20` / `...Icon24`).
 
 ---
 
 ## Stories
 
-`stories/Link/Link.stories.tsx`
-Примеры: `stories/Link/examples/`
+Основные истории: `stories/Link/Link.stories.tsx`
+Файлы примеров: `stories/Link/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | — | Интерактивный контроль текста ссылки: `parameters.controls.include` оставляет в панели только `children`, поэтому объявленные в `argTypes` `href` и `target` туда не попадают, а `onClick` — action, а не контрол. Рендерится инлайново, без отдельного example-файла |
+| `Default` | `DefaultExample.tsx` | Минимальная ссылка внутри `Text` |
+| `Examples` | `ExamplesExample.tsx` | Иконка через `contentAfter`, `contentBefore` и оба сразу |
 
 ---
 
@@ -158,4 +200,77 @@ return <>{firstNode} {restWords} {lastNode}</>;
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-08-31 | Создан документ. AI-рефакторинг: снята ручная проброска `onBlur` / `onMouseDown` вместе с их деструктуризацией — теперь они едут в составе `...rest`; устранено затенение `className` и `children` во внутренних функциях; условие разбиения вынесено в `isSingleBlock`; JSDoc на props и на логику сшивки. Unit-тесты расширены. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Link/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Link, Text, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+        <Link href="#" onClick={(event) => event.preventDefault()}>
+            Link text
+        </Link>
+    </Text>
+);
+```
+
+### Examples
+
+`stories/Link/examples/ExamplesExample.tsx`
+
+```tsx
+import React from "react";
+import { Link, Text, Gap, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+import { LinkStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+
+export const ExamplesExample = () => {
+    const renderContentAfter = () => (
+        <div style={{ paddingTop: "6px" }}>
+            <LinkStrokeSrvIcon16 paletteIndex={0} />
+        </div>
+    );
+
+    const renderContentBefore = () => (
+        <div style={{ paddingTop: "4px" }}>
+            <LinkStrokeSrvIcon16 paletteIndex={0} />
+        </div>
+    );
+
+    return (
+        <div>
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                <Link href="#" contentAfter={renderContentAfter} onClick={(event) => event.preventDefault()}>
+                    External link with content after
+                </Link>
+            </Text>
+            <Gap size={16} />
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                <Link href="#" contentBefore={renderContentBefore} onClick={(event) => event.preventDefault()}>
+                    External link with content before
+                </Link>
+            </Text>
+            <Gap size={16} />
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                <Link
+                    href="#"
+                    contentBefore={renderContentBefore}
+                    contentAfter={renderContentAfter}
+                    onClick={(event) => event.preventDefault()}
+                >
+                    External link with content before and after
+                </Link>
+            </Text>
+        </div>
+    );
+};
+```
+

package/bundle/components/ListActionItem.md

@@ -3,8 +3,8 @@ component: ListActionItem
 category: List
 related: [ListItem, ListItemContent, ListSortableItem]
 tokens:
-  - --triplex-next-ListItem-Background_Hover
-  - --triplex-next-ListItem-BorderColor_Focus
+  - ListItem.Background_Hover
+  - ListItem.BorderColor_Focus
 stories: stories/List/ListItem.stories.tsx
 version: "1.0"
 ---
@@ -70,9 +70,12 @@ hover-подсветку, focus-обводку по Tab и активацию п
 
 ## Дизайн-токены
 
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListItem.ts`.
+
 ```text
---triplex-next-ListItem-Background_Hover    // фон при hover (desktop)
---triplex-next-ListItem-BorderColor_Focus   // цвет focus-обводки (:focus-visible)
+ListItem.Background_Hover    // фон при hover (desktop)
+ListItem.BorderColor_Focus   // цвет focus-обводки (:focus-visible)
 ```
 
 Класс `styles.listActionItem` навешивается на сам `ListItemContent`, поэтому весь

package/bundle/components/ListItem.md

@@ -3,10 +3,10 @@ component: ListItem
 category: List
 related: [List, ListItemContent, ListActionItem, ListItemSelectable, ListTableItem, ListSortableItem]
 tokens:
-  - --triplex-next-ListItem-Background
-  - --triplex-next-ListItem-Background_Selected
-  - --triplex-next-ListItem-Background_Hover
-  - --triplex-next-ListItem-BorderColor_Focus
+  - ListItem.Background
+  - ListItem.Background_Selected
+  - ListItem.Background_Hover
+  - ListItem.BorderColor_Focus
 stories: stories/List/ListItem.stories.tsx
 version: "1.0"
 ---
@@ -41,14 +41,17 @@ swipe-actions и selectable.
 
 ## Дизайн-токены
 
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListItem.ts`.
+
 Сами стили `ListItem.tsx` пустые — токены применяются в подкомпонентах
 (`ListItemContent`, `ListItemSelectable`, `ListActionItem`):
 
 ```text
---triplex-next-ListItem-Background          // фон по умолчанию (ListItemContent)
---triplex-next-ListItem-Background_Selected // фон, когда selected=true (ListItemContent)
---triplex-next-ListItem-Background_Hover    // фон при hover на desktop (ListActionItem на ListItemContent)
---triplex-next-ListItem-BorderColor_Focus   // цвет focus-обводки на desktop (ListActionItem)
+ListItem.Background          // фон по умолчанию (ListItemContent)
+ListItem.Background_Selected // фон, когда selected=true (ListItemContent)
+ListItem.Background_Hover    // фон при hover на desktop (ListActionItem на ListItemContent)
+ListItem.BorderColor_Focus   // цвет focus-обводки на desktop (ListActionItem)
 ```
 
 ---

package/bundle/components/ListItemControlsButton.md

@@ -3,12 +3,12 @@ component: ListItemControlsButton
 category: List
 related: [ListItemControls, ListItemControlsButtonDropdown, IconWrapper]
 tokens:
-  - --triplex-next-ListItemControlsButton-Background_Default
-  - --triplex-next-ListItemControlsButton-Background_Hover
-  - --triplex-next-ListItemControlsButton-Background_Active
-  - --triplex-next-ListItemControlsButton-Color_Default
-  - --triplex-next-ListItemControlsButton-Color_Hover
-  - --triplex-next-ListItemControlsButton-Color_Active
+  - ListItemControlsButton.Background_Default
+  - ListItemControlsButton.Background_Hover
+  - ListItemControlsButton.Background_Active
+  - ListItemControlsButton.Color_Default
+  - ListItemControlsButton.Color_Hover
+  - ListItemControlsButton.Color_Active
 stories: stories/List/ListItemControls.stories.tsx
 version: "1.0"
 ---
@@ -43,15 +43,18 @@ version: "1.0"
 
 ## Дизайн-токены
 
-Паттерн: `--triplex-next-ListItemControlsButton-{Property}_{State}`
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListItemControlsButton.ts`.
+
+Паттерн: `ListItemControlsButton.{Property}_{State}`
 
 ```text
---triplex-next-ListItemControlsButton-Background_Default
---triplex-next-ListItemControlsButton-Background_Hover
---triplex-next-ListItemControlsButton-Background_Active   // применяется при :active или классе .expanded (если выставлен снаружи)
---triplex-next-ListItemControlsButton-Color_Default
---triplex-next-ListItemControlsButton-Color_Hover
---triplex-next-ListItemControlsButton-Color_Active
+ListItemControlsButton.Background_Default
+ListItemControlsButton.Background_Hover
+ListItemControlsButton.Background_Active   // применяется при :active или классе .expanded (если выставлен снаружи)
+ListItemControlsButton.Color_Default
+ListItemControlsButton.Color_Hover
+ListItemControlsButton.Color_Active
 ```
 
 Цвет лейбла переопределяет токен `Color_*` через `!important`, потому что

package/bundle/components/ListItemControlsButtonDropdown.md

@@ -3,12 +3,12 @@ component: ListItemControlsButtonDropdown
 category: List
 related: [ListItemControlsButton, ButtonDropdownExtended, Dropdown]
 tokens:
-  - --triplex-next-ListItemControlsButton-Background_Default
-  - --triplex-next-ListItemControlsButton-Background_Hover
-  - --triplex-next-ListItemControlsButton-Background_Active
-  - --triplex-next-ListItemControlsButton-Color_Default
-  - --triplex-next-ListItemControlsButton-Color_Hover
-  - --triplex-next-ListItemControlsButton-Color_Active
+  - ListItemControlsButton.Background_Default
+  - ListItemControlsButton.Background_Hover
+  - ListItemControlsButton.Background_Active
+  - ListItemControlsButton.Color_Default
+  - ListItemControlsButton.Color_Hover
+  - ListItemControlsButton.Color_Active
 stories: stories/List/ListItemControls.stories.tsx
 version: "1.0"
 ---
@@ -52,6 +52,9 @@ dropdown.
 
 ## Дизайн-токены
 
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListItemControlsButton.ts`.
+
 Использует те же токены, что и `ListItemControlsButton`. Дополнительно — стиль
 `.buttonDropdownMenuItem` для опций dropdown (ellipsis для длинных лейблов).
 

package/bundle/components/ListItemSelectable.md

@@ -3,8 +3,8 @@ component: ListItemSelectable
 category: List
 related: [ListItem, ListItemContent, Checkbox]
 tokens:
-  - --triplex-next-ListItem-Background
-  - --triplex-next-ListItem-Background_Selected
+  - ListItem.Background
+  - ListItem.Background_Selected
 stories: stories/List/ListItem.stories.tsx
 version: "1.0"
 ---
@@ -45,9 +45,12 @@ version: "1.0"
 
 ## Дизайн-токены
 
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListItem.ts`.
+
 ```text
---triplex-next-ListItem-Background          // фон по умолчанию
---triplex-next-ListItem-Background_Selected // фон, когда selected=true
+ListItem.Background          // фон по умолчанию
+ListItem.Background_Selected // фон, когда selected=true
 ```
 
 ---

package/bundle/components/ListMasterFooter.md

@@ -3,8 +3,8 @@ component: ListMasterFooter
 category: List
 related: [ListMaster, ListMasterFooterDescription, ListMasterFooterControls]
 tokens:
-  - --triplex-next-ListMaster-Footer_Background
-  - --triplex-next-ListMaster-Footer_Shadow
+  - ListMaster.Footer_Background
+  - ListMaster.Footer_Shadow
 stories: stories/ListMaster/ListMaster.stories.tsx
 version: "1.0"
 ---
@@ -37,9 +37,12 @@ align-items: center` — слева текст (`FooterDescription`), справ
 
 ## Дизайн-токены
 
-```
---triplex-next-ListMaster-Footer_Background  // фон футера
---triplex-next-ListMaster-Footer_Shadow      // тень сверху
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListMaster.ts`.
+
+```text
+ListMaster.Footer_Background  // фон футера
+ListMaster.Footer_Shadow      // тень сверху
 ```
 
 ---

package/bundle/components/ListMasterHeader.md

@@ -3,8 +3,8 @@ component: ListMasterHeader
 category: List
 related: [ListMaster, SelectionControls]
 tokens:
-  - --triplex-next-ListMaster-Header_Background
-  - --triplex-next-ListMaster-Header_Shadow
+  - ListMaster.Header_Background
+  - ListMaster.Header_Shadow
 stories: stories/ListMaster/ListMaster.stories.tsx
 version: "1.0"
 ---
@@ -37,9 +37,12 @@ Sticky-шапка `ListMaster`. Показывается обычно при в
 
 ## Дизайн-токены
 
-```
---triplex-next-ListMaster-Header_Background  // фон шапки
---triplex-next-ListMaster-Header_Shadow      // тень снизу
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ListMaster.ts`.
+
+```text
+ListMaster.Header_Background  // фон шапки
+ListMaster.Header_Shadow      // тень снизу
 ```
 
 ---