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

package/bundle/components/Badge.md

@@ -1,9 +1,7 @@
 ---
 component: Badge
-category: Badges
-figma-node: ""
-figma-file: ""
-related: [Avatar, Chip, Tag, MarkerStatus]
+category: Badge
+related: [Marker, Chip, DropdownListItem, DropdownMobileListItem, TabsLineItem, TabsExtendedTabButton, Text, Caption]
 tokens:
   - --triplex-next-Badge-Background
 stories: stories/Badge/Badge.stories.tsx
@@ -14,259 +12,197 @@ version: "1.0"
 
 ## Назначение
 
-Индикатор статуса или уведомления в виде горизонтальной "таблетки" с опциональным
-префиксом, контентом и постфиксом. Имеет три размера (SM / MD / LG), которые
-соответствуют общей шкале компонентов библиотеки (`EComponentSize`).
+Небольшой inline-индикатор статуса или уведомления: подпись на цветной подложке
+(`Badge`) либо просто цветная точка (`Badge.Dot`). Собственного состояния и логики нет —
+компонент только собирает разметку из трёх необязательных частей (`prefix` → `children` →
+`postfix`) и раздаёт классы по размеру.
 
-Сопутствующий `Badge.Dot` — точечный вариант (круг) для минималистичных
-индикаторов (например, "есть непрочитанное"). Badge и BadgeDot — два независимых
-компонента под одним barrel-экспортом.
+Используй когда: нужно пометить объект коротким статусом («Новинка», «Нет данных»),
+показать счётчик уведомлений или поставить точку-индикатор рядом с элементом списка,
+чипсом, пунктом меню.
 
-Используй `Badge` когда: нужна краткая метка статуса/счётчика с текстом или
-иконкой ("NEW", "12", "Beta").
-Используй `Badge.Dot` когда: нужен просто цветной кружок без текста.
-Не используй когда: нужен удаляемый тег с текстом (используй `Chip` или `Tag`);
-нужен большой статус-блок с описанием (используй `MarkerStatus`).
-
----
-
-## Файловая структура
-
-```text
-src/components/Badge/
-├── Badge.tsx                              # React.forwardRef, compound: Badge + Badge.Dot
-├── BadgeDot.tsx                           # React.forwardRef, отдельный компонент (не subcomponent)
-├── types.ts                               # IBadgeProps, IBadgeDotProps, IBadgeContentProps
-├── index.ts                               # Barrel: types + Badge (+ Badge.Dot через compound)
-├── styles/
-│   ├── Badge.module.less                  # Root .badge (SM/MD/LG: height + border-radius)
-│   └── BadgeDot.module.less               # Root .badgeDot (SM/MD/LG: width+height, border-radius 50%)
-├── components/                            # Внутренние subcomponents (не экспортируются)
-│   ├── BadgeContent.tsx                   # React.FC с паддингами по size
-│   ├── BadgePrefix.tsx                    # React.FC, display: contents (не создаёт DOM-слоя)
-│   ├── BadgePostfix.tsx                   # React.FC, display: contents
-│   └── styles/
-│       ├── BadgeContent.module.less       # Паддинги SM=4px / MD=6px / LG=8px + noPaddingLeft/Right
-│       ├── BadgePrefix.module.less        # display: contents
-│       └── BadgePostfix.module.less       # display: contents
-└── tests/Badge.test.tsx
-```
-
-Особенности:
-- **`Badge` + `Badge.Dot` через `Object.assign`** — compound-паттерн, как у
-  `AlertProcess`. BadgeDot также экспортирован из `index.ts` (через `./Badge`),
-  но рекомендуемый путь — через `Badge.Dot`.
-- **`prefix`/`postfix` через `display: contents`** — обёртки не добавляют визуального
-  слоя, являются только семантическими якорями для DOM-тестов.
-- **`components/` папка** — прямо не экспортируется, subcomponents видны только Badge.
+Не используй когда:
+- Нужен интерактивный элемент (клик, фокус, клавиатура) — возьми `Chip` или `Button`;
+  `Badge` — неинтерактивный `<span>` без семантики и без обработки клавиатуры.
+- Нужен статус со встроенной палитрой (успех / ошибка / предупреждение) — у `Badge`
+  один-единственный токен фона, цветовые статусы задаёт потребитель (см. «Цвет и текст»).
+- Нужен индикатор состояния процесса в списке — посмотри `MarkerStatus`, он строится
+  на своих статусных токенах.
 
 ---
 
 ## Варианты и props
 
-### `IBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "prefix" | "postfix">`
-
-**Важно:** `prefix` и `postfix` НЕ стандартные HTML-атрибуты — они переопределены
-через `Omit` и изменяют семантику.
-
-| Prop | Тип | Обязателен | Описание |
-|---|---|---|---|
-| `size` | `EComponentSize` (`SM`, `MD`, `LG`) | Да | Определяет высоту (16/20/24px), border-radius и внутренние паддинги. |
-| `children` | `React.ReactNode` | Нет | Основной контент (текст/иконка/число). Если не передан — рендерится только prefix+postfix. |
-| `prefix` | `React.ReactNode` | Нет | Обычно иконка слева. При наличии — у BadgeContent убирается `padding-left`. |
-| `postfix` | `React.ReactNode` | Нет | Обычно иконка или мини-кнопка справа. При наличии — у BadgeContent убирается `padding-right`. |
-| `className` | `string` | Нет | Объединяется с `styles.badge + sizeClass`. |
-| `...HTMLSpanAttributes` | — | — | Всё остальное, кроме `prefix`/`postfix`. |
-
-### `IBadgeDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">`
+Оба компонента расширяют `React.HTMLAttributes<HTMLSpanElement>`: любой стандартный
+атрибут `<span>` (`id`, `data-*`, `style`, обработчики) уходит на корневой элемент
+через `...rest`. `className` объединяется с базовыми классами через `clsx`, а не
+заменяет их.
 
-| Prop | Тип | Обязателен | Описание |
-|---|---|---|---|
-| `size` | `EComponentSize` | Да | Диаметр точки: SM=6px, MD=8px, LG=10px. |
-| `children` | `never` | — | Явно запрещено через `never` — точка без контента. |
-| `className` | `string` | Нет | Объединяется с `styles.badgeDot + sizeClass`. |
-| `...HTMLSpanAttributes` | — | — | Стандартные атрибуты `<span>`. |
+### Badge — обязательные props
 
-### Размеры
+| Prop | Тип | Описание |
+|---|---|---|
+| `size` | `EComponentSize` | `SM` — высота 16px, радиус 4px; `MD` — 20px / 6px; `LG` — 24px / 8px. Значения по умолчанию нет |
 
-**Badge (горизонтальная плашка):**
+### Badge — опциональные props
 
-| size | Height | Border-radius | Content padding-x |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `SM` | 16px | 4px | 4px |
-| `MD` | 20px | 6px | 6px |
-| `LG` | 24px | 8px | 8px |
-
-**Badge.Dot (круг):**
-
-| size | Diameter |
-|---|---|
-| `SM` | 6px |
-| `MD` | 8px |
-| `LG` | 10px |
-
----
-
-## Ключевые особенности реализации
-
-### `createSizeToClassNameMap` вместо локального маппинга
-
-```ts
-const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
-```
+| `children` | `React.ReactNode` | — | Содержимое. Оборачивается во внутренний `<span class="badgeContent">` с горизонтальными отступами 4 / 6 / 8px по размеру |
+| `prefix` | `React.ReactNode` | — | Контент перед содержимым, обычно иконка. Обёртка `badgePrefix` имеет `display: contents` |
+| `postfix` | `React.ReactNode` | — | Контент после содержимого, обычно иконка. Обёртка `badgePostfix` имеет `display: contents` |
 
-Утилита `src/utils/classNameMaps.ts` возвращает `{ [SM]: styles.sm, [MD]: styles.md, [LG]: styles.lg }`.
-Используется во всех Badge-файлах (`Badge.tsx`, `BadgeDot.tsx`, `BadgeContent.tsx`).
-Это единый паттерн — не дублировать маппинг локально.
+`prefix` перекрывает одноимённый RDFa-атрибут `prefix?: string` из
+`React.HTMLAttributes`, поэтому вырезан из базового типа через `Omit`. Атрибута
+`postfix` в `React.HTMLAttributes` нет — он попал в `Omit<..., "prefix" | "postfix">`
+для симметрии и фактически ничего не убирает.
 
-Если понадобится новый размер (XS, XL) — обновлять **и** `EComponentSize`, **и**
-`createSizeToClassNameMap`, **и** LESS-файлы. Помни: `createSizeToClassNameMap`
-типизирован как `Record<EComponentSize, string>` — TypeScript заставит добавить
-ключ.
+Отступ содержимого снимается со стороны, где стоит иконка: при `prefix` контент получает
+класс `noPaddingLeft`, при `postfix` — `noPaddingRight`. Логика целиком декларативная,
+считается от факта наличия props (`Boolean(prefix)` / `Boolean(postfix)`).
 
-### `Omit<HTMLAttributes, "prefix" | "postfix">` — реальная проблема
+### Badge.Dot — props
 
-HTML-атрибут `prefix` (устаревший, для RDFa) существует на некоторых тегах.
-TypeScript не распознаёт его на `<span>`, но React.HTMLAttributes включает его
-через dom-типы. Без `Omit` prop `prefix` компонента конфликтует с HTML-атрибутом
-в типах. Не удалять Omit.
-
-### `BadgePrefix` / `BadgePostfix` — `display: contents`
-
-```less
-.badgePrefix { display: contents; }
-.badgePostfix { display: contents; }
-```
+| Prop | Тип | Описание |
+|---|---|---|
+| `size` | `EComponentSize` | Диаметр круга: `SM` — 6px, `MD` — 8px, `LG` — 10px. Обязательный |
+| `children` | `never` | Точка не имеет содержимого — тип запрещает передачу детей |
 
-Обёртка не создаёт box — её children рендерятся так, как будто `<span>`
-вообще нет, но в DOM он есть. Это позволяет:
-- Применять семантический класс для тестов.
-- Не нарушать flex-лейаут родителя.
-- Не добавлять лишних паддингов.
+### Falsy-значения не рендерят части
 
-**`display: contents` имеет a11y-баг в Safari <14** — он убирает роль элемента
-для screen reader. Для `<span>` без семантической роли это не проблема, но помни
-при расширении (не добавлять `role="button"` на BadgePrefix без тестирования).
+Части рендерятся по truthy-проверке (`children ? ... : null`). Поэтому
+`children={0}`, `children=""`, `prefix={false}` не выводят ни содержимого, ни обёртки.
+Для счётчика с нулём передавай строку (`"0"`) или не рендери `Badge` вовсе. Это
+исторически сложившееся поведение; менять его — задача с записью в release notes.
 
-### `BadgeContent` убирает паддинги при наличии prefix/postfix
+### Цвет и текст
 
-```tsx
-<BadgeContent
-    size={size}
-    noPaddingLeft={Boolean(prefix)}
-    noPaddingRight={Boolean(postfix)}
->
-```
+- Фон обоих компонентов — единственный токен `--triplex-next-Badge-Background`
+  (`ColorWarning.70` в обеих темах). Вариантов/статусов у компонента нет.
+- Цвет и размер текста задаёт потребитель, вкладывая внутрь `Text` / `Caption`
+  с нужным `type` (в примерах — `EFontType.PRIMARY_INVERT`). Своей типографики
+  `Badge` не задаёт — только высоту, скругление и отступы.
+- Нестандартный фон в продуктовых сценариях делают инлайновым `style`
+  (`ProductionExample.tsx`). Это осознанный обход: расширять API цветовыми
+  вариантами без задачи не нужно.
 
-Это делает `prefix/postfix` "приклеенными" к контенту без двойного отступа. Если
-пишешь новый subcomponent внутри Badge — следуй этому паттерну (не добавляй
-горизонтальные паддинги на subcomponent-уровне, только на BadgeContent).
+---
 
-### Compound `Badge.Dot`
+## Дизайн-токены
 
-```ts
-export const Badge = Object.assign(
-    React.forwardRef<HTMLSpanElement, IBadgeProps>(...),
-    { Dot: BadgeDot },
-);
+```text
+--triplex-next-Badge-Background
 ```
 
-Тот же паттерн, что у `AlertProcess.Spoiler`. Одновременно `BadgeDot` экспортируется
-из `index.ts` через `./Badge` напрямую, но **рекомендуемое использование** —
-через `Badge.Dot` (единый API).
-
-### Один цветовой токен на оба
-
-`--triplex-next-Badge-Background` используется и для Badge, и для BadgeDot. Нет
-отдельного токена для `BadgeDot-Background` — оба разделяют цвет. Если нужны
-разные цвета (например, зелёная точка при сером Badge) — потребитель
-переопределяет через `style`/`className`.
+Один токен на всё семейство: фон `Badge` (`styles/Badge.module.less`) и цвет точки
+`Badge.Dot` (`styles/BadgeDot.module.less`). Объявлен в
+`src/components/DesignTokens/components/Badge.ts` (`ColorWarning.70` в светлой и тёмной
+темах). Геометрия (высоты, радиусы, диаметры точки, горизонтальные отступы контента)
+задана литералами в LESS и снаружи не настраивается.
 
 ---
 
 ## Инварианты
 
-- **`forwardRef`** — обязателен на Badge и BadgeDot. Не убирать.
-- **`size` обязателен** — без default value, чтобы потребитель явно выбирал масштаб.
-- **`EComponentSize`** — общий enum из `src/enums/EComponentSize`, не делай
-  локальный аналог. Badge входит в семейство компонентов, использующих единый
-  SM/MD/LG.
-- **`BadgeDot.children: never`** — не превращать в обычный slot. Компонент
-  намеренно пустой.
-- **`Omit<HTMLAttributes, "prefix" | "postfix">`** — не убирать, конфликт типов.
-- **`display: contents` в BadgePrefix/BadgePostfix** — не менять на `inline-flex`.
-  Меняет лейаут и ломает `noPaddingLeft/Right` логику в BadgeContent.
-- **`Badge.Dot` через Object.assign** — не убирать, потребители импортируют
-  через compound.
-- **Background-токен един** для Badge и BadgeDot — не разделять без согласования
-  с дизайнером.
-- **`white-space: nowrap`** на Badge — не убирать, иначе длинный контент ломается
-  на несколько строк и разваливает высоту.
-- **BadgeContent/Prefix/Postfix — внутренние** — не экспортировать через barrel.
-  Потребители используют только `prefix`/`postfix` props.
+- **`forwardRef` на `Badge` и `BadgeDot`** — оба пробрасывают ref на корневой
+  `<span>`; не убирать.
+- **Корневой элемент — `<span>`** у всех частей семейства. Смена тега ломает
+  инлайновое размещение внутри текста и чипсов.
+- **`BadgeDot` доступен только как `Badge.Dot`.** Barrel (`src/components/Badge/index.ts`)
+  экспортирует `Badge` и типы; отдельного именованного экспорта `BadgeDot` нет — так его
+  и импортируют внутренние потребители: `Marker`, `Chip`, `DropdownListItem`,
+  `DropdownMobileListItem`, `TabsLineItem`, `TabsExtendedTabButton`.
+  Добавление именованного экспорта — расширение публичного API.
+- **`IBadgeDotProps` — не только props точки.** `Marker` строит из него свой публичный
+  интерфейс: `IMarkerProps extends IBadgeDotProps` (`src/components/Marker/Marker.tsx:9`).
+  Любое изменение формы `IBadgeDotProps` автоматически меняет публичный API `Marker`.
+- **`IBadgeContentProps` экспортируется из barrel, хотя `BadgeContent` — нет.**
+  Тип уже в публичном API (`export * from "./types"`), удалять или переименовывать
+  нельзя без release notes.
+- **Класс `.badgeDot` проверяется в тестах соседнего компонента** —
+  `src/components/Chip/__tests__/Chip.test.tsx` ищет точку через
+  `container.querySelector(".badgeDot")`. Переименование класса ломает чужой тест.
+- **Порядок частей в разметке — `prefix` → `children` → `postfix`**, ровно три
+  необязательных узла, без дополнительных обёрток. На порядок и на классы
+  `badgePrefix` / `badgeContent` / `badgePostfix` опираются unit-тесты.
+- **`display: contents` у `badgePrefix` / `badgePostfix`** — обёртки намеренно не
+  создают бокса, иначе иконка получит лишний уровень выравнивания внутри inline-flex.
+- **`displayName`** — `Badge`, `BadgeDot`, `BadgeContent`, `BadgePrefix`, `BadgePostfix`;
+  видны в React DevTools.
+- **`size` обязателен у обоих компонентов** — дефолта нет, `<Badge />` не типизируется.
 
 ---
 
 ## Accessibility
 
-- **Никаких ARIA-ролей по умолчанию** — Badge семантически нейтрален. Если
-  Badge отображает число непрочитанных сообщений — потребитель обязан обеспечить
-  озвучку: `aria-label="5 непрочитанных сообщений"` или `role="status"`.
-- **Для статусного Badge** (например, "Online") — потребитель должен добавить
-  `role="status"` и `aria-label` / `title`, иначе screen reader прочитает только
-  визуальный текст, без контекста.
-- **BadgeDot** — чистая визуальная точка без текста. **Обязан** получать
-  `aria-label` от потребителя, иначе не воспринимается screen reader'ом. Или,
-  если это чисто декоративный индикатор рядом с другим текстом — `aria-hidden="true"`.
-- **`display: contents`** на prefix/postfix — в современных браузерах не ломает
-  a11y, но в Safari <14 может. Если поддержка старого Safari критична, делай
-  тесты.
-
----
-
-## Дизайн-токены
-
-```
---triplex-next-Badge-Background       # Фон Badge и BadgeDot (единый токен)
-```
-
-Цвет текста внутри Badge определяется `color: inherit` от родителя (нет явного
-токена) — потребитель задаёт цвет через `Typography`-компоненты или `style`.
-
-Высоты, радиусы, паддинги, размеры точки — жёсткие значения в LESS, не токенизированы.
-Кандидат на рефакторинг при общей токенизации размеров.
+- Компонент неинтерактивен: не получает фокус, не обрабатывает клавиатуру, ARIA-ролей
+  и атрибутов не выставляет. Корневой `<span>` для скринридера — обычный текст.
+- Текстовый `Badge` доступен как есть: содержимое читается в потоке. Отдельная
+  подпись не нужна.
+- **`Badge.Dot` не имеет доступного имени** — это чисто визуальный индикатор.
+  Корневой `<span>` без роли попадает в `generic`, а для него доступное имя
+  запрещено, поэтому одного `aria-label` недостаточно. Если точка несёт смысл
+  («есть непрочитанное»), потребитель обязан передать роль, поддерживающую имя,
+  вместе с текстом — например `role="img"` и `aria-label` (оба уйдут в `...rest`),
+  — либо продублировать смысл текстом рядом. Если точка декоративна и дублирует
+  видимый текст — передай `aria-hidden`.
+  **Внутри библиотеки этого пока нет:** `Chip`, `DropdownListItem`,
+  `DropdownMobileListItem`, `TabsLineItem` и `TabsExtendedTabButton` рендерят
+  `<Badge.Dot size={...} className={styles.notificationIcon} />` — без `aria-hidden`
+  и без роли с именем. Точка там означает «есть новые уведомления», и подписью
+  рядом этот смысл не дублируется, то есть для скринридера информация теряется.
+  Это известный пробел, а не образец для копирования.
+- Строки на конкретном языке компонент не хардкодит — весь текст приходит от
+  потребителя.
 
 ---
 
 ## Связанные компоненты
 
-- `Avatar` (`src/components/Avatar`) — часто комбинируется с Badge: Badge на углу
-  Avatar как индикатор статуса. Позиционирование — задача потребителя.
-- `Chip` (`src/components/Chip`) — "большой Badge" с возможностью закрытия и
-  интерактивностью. Разная семантика: Badge = индикатор, Chip = тег.
-- `Tag` / `TagColor` / `TagGroup` (`src/components/Tag`) — ещё больший уровень:
-  стилизованные метки категорий с цветами.
-- `MarkerStatus` (`src/components/MarkerStatus`) — крупный блок статуса с иконкой
-  и текстом (тип сообщения).
-- `EComponentSize` (`src/enums/EComponentSize`) — общий enum трёх размеров.
-- `createSizeToClassNameMap` (`src/utils/classNameMaps.ts`) — утилита
-  размер → class.
+- `Marker` (`src/components/Marker/Marker.tsx`) — обёртка над `Badge.Dot` со статусными
+  цветами; наследует `IBadgeDotProps`.
+- `Chip` (`src/components/Chip/Chip.tsx:108`) — рендерит `Badge.Dot` как значок
+  уведомления при `showNotificationIcon`.
+- `DropdownListItem`, `DropdownMobileListItem` — то же самое для пунктов выпадающего
+  списка.
+- `TabsLineItem` (`src/components/TabsLine/components/TabsLineItem.tsx:78`),
+  `TabsExtendedTabButton` (`src/components/TabsExtended/components/TabsExtendedTabButton.tsx:51`)
+  — то же самое для вкладок.
+- `Text`, `Caption` — типографика содержимого: `B4`/`C1` для SM–MD, `B3` для LG,
+  `type={EFontType.PRIMARY_INVERT}` для читаемости на цветной подложке.
+- `MarkerStatus`, `TagColor` — альтернативы, когда нужен статус с собственной палитрой.
+
+### Внутренние субкомпоненты (собственного AI.md не имеют)
+
+- `BadgeContent` (`components/BadgeContent.tsx`) — обёртка содержимого; единственная
+  нетривиальная часть: горизонтальные отступы по размеру и их снятие флагами
+  `noPaddingLeft` / `noPaddingRight`.
+- `BadgePrefix`, `BadgePostfix` (`components/`) — обёртки иконок, `display: contents`,
+  логики нет.
+
+Все трое объявлены как `React.FC` без `forwardRef` — это допустимо, потому что наружу
+они не экспортируются и ref в них не приходит.
 
 ---
 
 ## Stories
 
-`stories/Badge/Badge.stories.tsx`
+Основные истории: `stories/Badge/Badge.stories.tsx`
 Файлы примеров: `stories/Badge/examples/`
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `size` |
-| `Default` | `DefaultExample.tsx` | Базовое использование |
-| `Sizes` | `SizesExample.tsx` | Все три размера Badge |
-| `WithPrefixAndPostfix` | `WithPrefixAndPostfixExample.tsx` | Badge с иконкой слева и/или справа |
-| `DotSizes` | `DotSizesExample.tsx` | Три размера Badge.Dot |
-| `Example` | `ProductionExample.tsx` | Реальные кейсы композиции |
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный подбор `size` |
+| `Default` | `DefaultExample.tsx` | Минимальный вызов: размер `MD` и `Text` внутри |
+| `Sizes` | `SizesExample.tsx` | Размеры `SM` / `MD` / `LG` с подходящей типографикой |
+| `WithPrefixAndPostfix` | `WithPrefixAndPostfixExample.tsx` | Иконки слева и справа во всех трёх размерах |
+| `DotSizes` | `DotSizesExample.tsx` | Размеры `Badge.Dot` |
+| `Example` | `ProductionExample.tsx` | Продуктовые сценарии: только иконка, иконка с текстом (`prefix` / `postfix`), цветные статусы через инлайновый `style` |
+
+Скриншот-регрессия снимается со стори `Default`, `Sizes`, `WithPrefixAndPostfix`,
+`DotSizes` (`__screenshots__/badge--*--xs|xl.png`). `Playground` и `Example` исключены
+через `testRunner: { skip: true }`: первый — интерактивная песочница, второй содержит
+подобранные вручную цвета и дублирует остальные состояния.
 
 ---
 
@@ -274,7 +210,7 @@ export const Badge = Object.assign(
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-08-12 | Создан документ. AI-рефакторинг: JSDoc на всех props `IBadgeProps` / `IBadgeDotProps` / `IBadgeContentProps` с указанием размеров в px, в `IBadgeProps` добавлен явный `children` (тип совпадает с унаследованным из `React.HTMLAttributes`), расширены JSDoc компонентов и внутренних обёрток. Unit-тесты расширены с 12 до 45 кейсов: `Badge.test.tsx` вырос с 12 до 23 кейсов, рядом добавлены `BadgeDot.test.tsx` (7), `BadgeContent.test.tsx` (9) и `BadgeAffixes.test.tsx` (6) — покрыты логика снятия отступов контента, нерендеринг частей с falsy-значением, порядок частей разметки, проброс `...rest` и `ref`. Публичный API, DOM-разметка и визуальное поведение не изменены. |
 
 ---
 
@@ -372,8 +308,8 @@ export const WithPrefixAndPostfixExample = () => (
     <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
         <Badge
             size={EComponentSize.SM}
-            prefix={<PercentsmallStrokeSrvIcon16 paletteIndex={7} />}
-            postfix={<PercentsmallStrokeSrvIcon16 paletteIndex={7} />}
+            prefix={<PercentsmallStrokeSrvIcon16 paletteIndex={10} />}
+            postfix={<PercentsmallStrokeSrvIcon16 paletteIndex={10} />}
         >
             <Caption size={ECaptionSize.C1} weight={EFontWeightCaption.REGULAR} type={EFontType.PRIMARY_INVERT}>
                 Badge text SM
@@ -381,8 +317,8 @@ export const WithPrefixAndPostfixExample = () => (
         </Badge>
         <Badge
             size={EComponentSize.MD}
-            prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}
-            postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}
+            prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={10} />}
+            postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={10} />}
         >
             <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
                 Badge text MD
@@ -390,8 +326,8 @@ export const WithPrefixAndPostfixExample = () => (
         </Badge>
         <Badge
             size={EComponentSize.LG}
-            prefix={<PercentsmallStrokeSrvIcon24 paletteIndex={7} />}
-            postfix={<PercentsmallStrokeSrvIcon24 paletteIndex={7} />}
+            prefix={<PercentsmallStrokeSrvIcon24 paletteIndex={10} />}
+            postfix={<PercentsmallStrokeSrvIcon24 paletteIndex={10} />}
         >
             <Text size={ETextSize.B3} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
                 Badge text LG
@@ -434,20 +370,20 @@ import { Badge, EComponentSize, EFontType, EFontWeightText, ETextSize, Text } fr
 
 export const ProductionExample = () => (
     <div style={{ display: "flex", gap: "16px" }}>
-        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />} />
-        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}>
+        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={10} />} />
+        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={10} />}>
             <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
                 Badge text
             </Text>
         </Badge>
-        <Badge size={EComponentSize.MD} postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}>
+        <Badge size={EComponentSize.MD} postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={10} />}>
             <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
                 Badge text
             </Text>
         </Badge>
         <Badge
             size={EComponentSize.MD}
-            prefix={<NewsmallFilledSrvIcon20 paletteIndex={7} />}
+            prefix={<NewsmallFilledSrvIcon20 paletteIndex={10} />}
             style={{ backgroundColor: "#1297FE" }}
         >
             <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>