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

package/bundle/components/Confirm.md

@@ -1,11 +1,9 @@
 ---
 component: Confirm
-category: Overlays
-figma-node: ""
-figma-file: ""
-related: [Island, LightBox, SideOverlay, Button, TriggerClickOnKeyDownEvent, Typography]
+category: Confirm
+related: [Island, Button, Title, Text, TriggerClickOnKeyDownEvent]
 tokens: []
-stories: ""
+stories: stories/Confirm/Confirm.stories.tsx
 version: "1.0"
 ---
 
@@ -13,331 +11,398 @@ version: "1.0"
 
 ## Назначение
 
-Модальное подтверждение (диалог), встраиваемое **внутрь** уже открытого
-`LightBox` или `SideOverlay`. Не содержит собственного бэкдропа/портала —
-это компонент-контент, который рендерится поверх родительского overlay'а
-и ограничивает свою максимальную ширину так, чтобы визуально помещаться
-в контейнер родителя.
+Предупреждение о закрытии лайтбокса или его боковой панели: карточка `Island` типа `TYPE_1`
+с ролью `dialog` и `aria-modal="true"`, внутри которой лежит текст (`Confirm.Content`), кнопки
+действий (`Confirm.Controls`) и кнопка-крестик (`Confirm.Close`). Собственного состояния нет —
+компонент ничего не открывает и не закрывает, обработчики кнопок задаёт потребитель.
 
-Внутри — `Island type=TYPE_1` с `role="dialog" aria-modal="true"`, секция
-`Island.Body` с контентом (Title, SubTitle, Controls) и абсолютно
-позиционированная кнопка закрытия (справа сверху).
+Используй когда: действие пользователя приведёт к потере данных (закрытие формы, выход из
+мастера) и его нужно подтвердить прямо поверх контента — как правило, внутри `TopOverlay`
+(он же `LightBox.TopOverlay`), который и обеспечивает маску, выезд панели и ловушку фокуса.
 
-Используй когда: нужно подтвердить действие (закрыть/удалить/отменить)
-поверх уже открытого `LightBox` или `SideOverlay`.
-Не используй как самостоятельный модал (он не создаёт свой overlay/backdrop)
-— для автономных диалогов бери `ModalWindow` или используй `LightBox`
-c `Confirm` внутри.
-
----
-
-## Файловая структура
-
-```text
-src/components/Confirm/
-├── Confirm.tsx                                  # FC-обёртка над Island, compound FC (Close/Content/Controls)
-├── enums.ts                                     # EConfirmParentComponent
-├── index.ts                                     # Barrel: Confirm + enums
-├── components/
-│   ├── ConfirmClose.tsx                         # FC, условное оборачивание в TriggerClickOnKeyDownEvent (Esc)
-│   ├── ConfirmCloseButton.tsx                   # forwardRef, Button с иконкой крестика
-│   ├── ConfirmContent.tsx                       # FC, compound с Title/SubTitle
-│   ├── ConfirmContentTitle.tsx                  # FC-обёртка Typography Title
-│   └── ConfirmContentSubTitle.tsx               # FC-обёртка Typography Text
-└── styles/Confirm.module.less                   # Max-width по parentComponent, позиционирование кнопки закрытия
-```
-
-Особенности:
-- **Root — FC, не forwardRef.** Ref-форвардинг не реализован (известный
-  AI-ready debt, характерен для compound-обёрток). Ref, если нужен
-  родителю, идёт через `...htmlDivAttributes` в `Island`.
-- **Compound через прямое присваивание:** `Confirm.Close = ConfirmClose;`
-  `Confirm.Content = ConfirmContent;` `Confirm.Controls = ConfirmControls;`
-  Тип `IConfirmFC extends React.FC<IConfirmProps>`.
-- **ConfirmContent — тоже compound** (Title/SubTitle) через тот же паттерн.
-- **Нет `__tests__` и нет `stories`** — документируется косвенно через
-  потребителей `LightBox`/`SideOverlay`.
-- **Нет собственных дизайн-токенов** — все цвета/радиусы берутся из
-  `Island` (type=TYPE_1); ширина — из LESS-переменных родительского
-  overlay (`@sideOverlaySMWidth` etc.).
+Не используй когда:
+- Диалог нужен поверх обычной страницы, а не внутри лайтбокса — возьми `ModalWindow`: он сам
+  рендерится в портал, блокирует скролл и держит фокус. Confirm ничего из этого не делает.
+- Нужен полноэкранный сценарий с навигацией — возьми `LightBox`.
+- Нужно уведомление без выбора действия — возьми компоненты уведомлений (`AlertContext`,
+  `Notification`).
 
 ---
 
 ## Варианты и props
 
-### Root: `IConfirmProps extends IIslandProps`
-
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `parentComponent` | `EConfirmParentComponent` | `LIGHTBOX` | Определяет max-width: в `LightBox` — как у контента LightBox, в `SideOverlay` — как у соответствующей ширины боковой панели. |
-| `children` | `ReactNode` | — | Обычно `Confirm.Close` + `Confirm.Content` + `Confirm.Controls`. |
-| `className` | `string` | — | Добавляется через `clsx` к root-классу `.confirm` и parent-класс map. |
-| `...IIslandProps` | — | — | Все пропсы `Island` (`id`, `onClick`, `data-tx` и др.). |
-
-`role="dialog"` и `aria-modal="true"` проставлены жёстко в реализации и
-не могут быть перебиты через `htmlDivAttributes` (spread идёт до них
-— **неверно**: в реализации spread идёт **после** `role` и `aria-modal`,
-значит пропс потребителя **перебьёт** дефолт). Если нужно — не
-перебивать, семантика диалога обязательна.
-
-### `EConfirmParentComponent` (enum string)
-
-```ts
-enum EConfirmParentComponent {
-    LIGHTBOX = "lightBox",
-    SIDE_OVERLAY_SM = "sideOverlaySM",
-    SIDE_OVERLAY_MD = "sideOverlayMD",
-    SIDE_OVERLAY_LG = "sideOverlayLG",
-}
-```
+### Обязательные props
 
-Соответствие → LESS-классы:
-- `LIGHTBOX` → `.isInLightBox` → `calc(var(--lightBox-content-max-width) - @page-padding-desktop-x*2)`
-- `SIDE_OVERLAY_SM` → `.isInSideOverlaySM` → `calc(@sideOverlaySMWidth - @page-padding-desktop-x*2)`
-- `SIDE_OVERLAY_MD` → `.isInSideOverlayMD` → `calc(@sideOverlayMDWidth - @page-padding-desktop-x*2)`
-- `SIDE_OVERLAY_LG` → `.isInSideOverlayLG` → `calc(@sideOverlayLGWidth - @page-padding-desktop-x*2)`
+Обязательных props нет — `<Confirm>` рендерится с шириной под контент лайтбокса.
 
-### Compound: `Confirm.Close` — `IConfirmCloseProps extends IConfirmCloseButtonProps`
+### Опциональные props
 
-| Prop | Тип | Обязателен | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `clickByEsc` | `boolean` | Да | Если `true` — оборачивает кнопку в `TriggerClickOnKeyDownEvent` с `ESCAPE`, клик кнопки симулируется при нажатии Esc. |
-| `...IConfirmCloseButtonProps` | — | — | Все пропсы кнопки, кроме `theme/size/icon` (зафиксированы). |
-
-**`IConfirmCloseButtonProps extends Omit<TButtonProps, "theme" \| "size" \| "icon">`:**
-
-- `theme` зафиксирован в `EButtonTheme.SECONDARY`
-- `size` зафиксирован в `EComponentSize.MD`
-- `icon` зафиксирован в `<CrossStrokeSrvIcon20 paletteIndex={0} />`
-- `title` по умолчанию `"Закрыть"`
-- `className` объединяется с `.confirmCloseButton` (абсолютное позиционирование top/right: 24px; 16px на `< screen-sm-max`).
-
-### Compound: `Confirm.Content` — `IConfirmContentProps extends HTMLAttributes<HTMLDivElement>`
-
-Обычный `<div className={clsx(className, styles.confirmContent)}>` с
-`margin-bottom: 24px` (16px на мобильных) и `padding-right: 56px`
-(место под кнопку закрытия).
-
-Compound-подкомпоненты:
-
-**`Confirm.Content.Title` — `IConfirmContentTitleProps extends TTitleProps<"h1">`:**
-- По умолчанию `size={ETitleSize.H3}`
-- `margin-bottom: 12px` через `.confirmContentTitle`
-
-**`Confirm.Content.SubTitle` — `IConfirmContentSubTitleProps extends TTextProps<"div">`:**
-- По умолчанию `size={ETextSize.B2}`
-- Рендерит `<Text tag="div" />`
-
-### Compound: `Confirm.Controls` — `IConfirmControlsProps extends HTMLAttributes<HTMLDivElement>`
-
-Обычный `<div className={clsx(className, styles.confirmControls)}>` —
-стилизован `white-space: nowrap` (чтобы кнопки действий не переносились).
-Внутри обычно два `Button` (подтвердить / отменить).
+| `parentComponent` | `EConfirmParentComponent` | `EConfirmParentComponent.LIGHTBOX` | Компонент, внутри которого открыт Confirm. Влияет только на максимальную ширину |
+
+`IConfirmProps extends IIslandProps`, поэтому доступны и props `Island` (`type`, `size`,
+`loading`, `loaderScreenProps`, `withoutPaddings`) и все атрибуты `<div>`. `type` компонент
+задаёт сам (`EIslandType.TYPE_1`) до spread'а — потребитель может его переопределить, но это
+выход за пределы дизайна компонента.
+
+### Максимальная ширина (`EConfirmParentComponent`)
+
+Класс ширины — единственное, на что влияет `parentComponent`. Из ширины родителя вычитаются
+горизонтальные отступы страницы (`@page-padding-desktop-x` × 2 = 64px):
+
+| Значение | Родитель | Max-width |
+|---|---|---|
+| `LIGHTBOX` | `LightBox` | `--lightBox-content-max-width` − 64px (вне лайтбокса fallback 864px → 800px) |
+| `SIDE_OVERLAY_SM` | `LightBoxSideOverlay` SM | 520px |
+| `SIDE_OVERLAY_MD` | `LightBoxSideOverlay` MD | 680px |
+| `SIDE_OVERLAY_LG` | `LightBoxSideOverlay` LG | 800px |
+
+`--lightBox-content-max-width` выставляет сам `LightBox` в зависимости от своего размера
+(664 / 864 / 1064 / 1264px), поэтому вариант `LIGHTBOX` подстраивается под лайтбокс, а не
+фиксирует число. Вне лайтбокса используется fallback-значение 864px. Карточка центрируется
+(`margin: 0 auto`) и растягивается до максимума (`flex-grow: 1`).
+
+### Составные части
+
+| Часть | Она же | Что делает |
+|---|---|---|
+| `Confirm.Content` | `ConfirmContent` | `<div>`-обёртка текста: отступ 24px до кнопок и `padding-right: 56px` — место под крестик |
+| `Confirm.Content.Title` | `ConfirmContentTitle` | `Title` с `size=H3` по умолчанию (тег `<h3>`) и отступом 12px до подзаголовка |
+| `Confirm.Content.SubTitle` | `ConfirmContentSubTitle` | `Text` с `size=B2` и `tag="div"` по умолчанию (тег можно переопределить) |
+| `Confirm.Controls` | `ConfirmControls` | `<div>` с `white-space: nowrap` — кнопки не переносятся на новую строку. Отступ между кнопками даёт сам `Button` (12px у соседних кнопок) |
+| `Confirm.Close` | `ConfirmClose` | Кнопка-крестик, абсолютно спозиционированная в правом верхнем углу; при `clickByEsc` нажатие Esc вызывает click по ней |
+
+Все части необязательны и порядок в разметке произвольный: крестик позиционируется абсолютно,
+остальные части идут потоком. Типичный порядок — `Content` → `Controls` → `Close`.
+
+### Закрытие по Esc (`Confirm.Close`)
+
+`clickByEsc` — обязательный prop `Confirm.Close`. При `true` компонент оборачивается в
+`TriggerClickOnKeyDownEvent`, который слушает `keydown` на `window` (через `KeyDownListener`) и
+вызывает `click()` по кнопке.
+
+- Слушатель **глобальный**: он сработает на Esc из любого места страницы, пока `Confirm.Close`
+  смонтирован. Поэтому передавай `clickByEsc` флагом видимости предупреждения
+  (`clickByEsc={topOverlayOpened}`), иначе Esc будет закрывать невидимый Confirm и конфликтовать
+  с Esc родительского `LightBox`.
+- Клик выполняется, только если кнопка видима: `TriggerClickOnKeyDownEvent` проверяет
+  `offsetParent !== null`. В jsdom `offsetParent` всегда `null`, поэтому в unit-тестах его
+  мокают (`__tests__/ConfirmClose.test.tsx`).
+- Совпадение клавиши проверяется по `event.keyCode` (`EVENT_KEY_CODES.ESCAPE`), а не по `key`.
 
 ---
 
-## Ключевые особенности реализации
-
-### Confirm — это Island type=TYPE_1
-
-```tsx
-<Island
-    type={EIslandType.TYPE_1}
-    className={clsx(className, styles.confirm, parentComponentToClassNameMap[parentComponent])}
-    role="dialog"
-    aria-modal="true"
-    {...htmlDivAttributes}
->
-    <Island.Body>{children}</Island.Body>
-</Island>
-```
-
-**Почему Island, а не чистый div:** Island даёт фирменные радиусы,
-тени и padding. TYPE_1 — "приподнятая" поверхность. Если захочется
-другого типа — это смена визуала Confirm, breaking-change.
+## Дизайн-токены
 
-**`<Island.Body>` обязателен** — Island ожидает compound-структуру для
-padding'а контента. Без Body контент приклеится к границам.
+Собственных токенов у Confirm нет: `styles/Confirm.module.less` задаёт только ширину, отступы и
+позиционирование крестика. Цвета приходят из вложенных компонентов — фон и тень от `Island`
+(`Island.Type1_Background`, `Island.Type1_Shadow`), текст от `Title` / `Text`, кнопка закрытия от
+`Button` (тема `SECONDARY`). Переопределяются они через `ThemeProvider` у соответствующего
+компонента — см. `Island-ai.md`, `Button-ai.md` и `ThemeProvider-ai.md` → «Как переопределять
+токены».
 
-### `parentComponent` → max-width map
+---
 
-```ts
-const parentComponentToClassNameMap = {
-    [EConfirmParentComponent.LIGHTBOX]: styles.isInLightBox,
-    [EConfirmParentComponent.SIDE_OVERLAY_SM]: styles.isInSideOverlaySM,
-    [EConfirmParentComponent.SIDE_OVERLAY_MD]: styles.isInSideOverlayMD,
-    [EConfirmParentComponent.SIDE_OVERLAY_LG]: styles.isInSideOverlayLG,
-};
-```
+## Инварианты
 
-Зачем: Confirm рендерится внутри родительского overlay'а и должен
-визуально поместиться в его внутренний контент. `parentComponent`
-сообщает компоненту, какой контейнер его содержит, чтобы он сам
-подсчитал max-width. Если не проставить — дефолт `LIGHTBOX`.
+- **`forwardRef`** — обязателен у `Confirm` и всех частей. `ref` у `Confirm` идёт на корневой
+  `<div>` `Island` (тот же элемент, что получает `className`, `role` и `...rest`), у
+  `Confirm.Close` — на `<button>`.
+- **Корневой элемент — `Island`, а не голый `<div>`.** Замена сломает фон, скругление и отступы
+  карточки, а также `position: relative` у `Island.Body`, от которого зависит абсолютное
+  позиционирование крестика.
+- **`children` кладутся в `Island.Body`.** Крестик позиционируется относительно `Island.Body`,
+  поэтому оборачивать содержимое в дополнительный контейнер с `position: relative` нельзя —
+  крестик уедет.
+- **`role="dialog"` и `aria-modal="true"` выставляются до spread'а props** — потребитель может
+  их переопределить (например на `alertdialog`). Убирать роль из компонента нельзя: на неё
+  опираются тесты и accessibility-контракт.
+- **Публичный API:** `Confirm`, `IConfirmProps`, `IConfirmFC`, `EConfirmParentComponent`
+  экспортируются из `src/components/Confirm/index.ts`. Значения enum — строки `lightBox`,
+  `sideOverlaySM`, `sideOverlayMD`, `sideOverlayLG`. Части доступны только как статики
+  (`Confirm.Close` / `.Content` / `.Controls`), из barrel они не экспортируются — их типы
+  (`IConfirmCloseProps`, `IConfirmContentProps`, `IConfirmControlsProps` и др.) живут в
+  `components/`.
+- **`IConfirmFC` и `IConfirmContentFC` описывают `React.ForwardRefExoticComponent` со
+  статиками.** Явная аннотация снимает проверку лишних свойств у `Object.assign`, поэтому при
+  добавлении статики интерфейс нужно править синхронно — иначе статика окажется в рантайме, но
+  не в публичном типе.
+- **`.isInLightBox` дублирует базовый `.confirm` намеренно** — max-width совпадает, класс
+  выставляется для симметрии с остальными значениями enum и читаемости DOM.
+- **`PARENT_COMPONENT_TO_CLASS_NAME_MAP` — внутренняя константа** `Confirm.tsx`, в barrel не
+  экспортируется.
 
-**Если добавить новый parent (например, SIDE_OVERLAY_XL):** нужно
-обновить и enum, и map, и добавить `.isInSideOverlayXL` в LESS.
+---
 
-### `clickByEsc` → обёртка в `TriggerClickOnKeyDownEvent`
+## Accessibility
 
-```tsx
-if (clickByEsc) {
-    return (
-        <TriggerClickOnKeyDownEvent targetRef={ref} eventKeyCode={EVENT_KEY_CODES.ESCAPE}>
-            <ConfirmCloseButton {...buttonProps} ref={ref} />
-        </TriggerClickOnKeyDownEvent>
-    );
-}
-return <ConfirmCloseButton {...buttonProps} />;
-```
+- **Роль:** корневой элемент — `role="dialog"` с `aria-modal="true"`. Доступного имени компонент
+  сам не проставляет: если у предупреждения есть `Confirm.Content.Title`, свяжи их
+  (`aria-labelledby` на `Confirm` и `id` на заголовке) или передай `aria-label` — иначе
+  скринридер объявит диалог без названия.
+- **Фокус компонент не трапит и не переводит.** Ловушку фокуса даёт контейнер: `TopOverlay`
+  использует `FocusTrapExtended`, `LightBox` — свой focus trap. Отдельно от них Confirm
+  доступностью модального диалога не обладает.
+- **Клавиатура:** собственных обработчиков нет, кроме Esc у `Confirm.Close` при `clickByEsc`
+  (глобальный слушатель `keydown` на `window`). Кнопки действий — обычные `<button>` из `Button`.
+- **Текст кнопки закрытия задаёт потребитель, и он обязателен.** Дефолта у `Confirm.Close`
+  нет: строки на конкретном языке внутри компонентов запрещены. Кнопка иконочная, поэтому
+  без `title` (или `aria-label`) у неё не будет доступного имени — передавай его всегда.
+- **Заголовок — `<h3>` по умолчанию** (`Title` берёт тег из `size`). Если по структуре страницы
+  нужен другой уровень, передай `tag` в `Confirm.Content.Title`.
 
-**Важно:** `TriggerClickOnKeyDownEvent` слушает Esc на `document` и
-программно кликает элемент по `ref`. Не вешает hard-bound listener
-на кнопку. Если в родителе уже есть обработчик Escape (LightBox
-обычно закрывается по Esc), появятся **конфликты** — Confirm должен
-останавливать пропагацию или родитель должен учитывать модальную
-вложенность. Это зона ответственности потребителя, не Confirm.
-
-### Кнопка закрытия — absolute позиция
-
-```less
-.confirmCloseButton {
-    position: absolute;
-    top: 24px;
-    right: 24px;
-}
-@media (max-width: @screen-sm-max) {
-    .confirmCloseButton {
-        top: 16px;
-        right: 16px;
-    }
-}
-```
+---
 
-**Абсолютное позиционирование** требует `position: relative` или
-`position: absolute` на ближайшем предке. Island type=TYPE_1
-создаёт этот контекст. Если оборачивать Confirm в произвольный
-контейнер без position — кнопка "улетит" к ближайшему.
+## Связанные компоненты
 
-### `padding-right: 56px` у Content
+### Контракты (в `related`)
 
-`.confirmContent { padding-right: 56px; }` — место под кнопку закрытия,
-чтобы текст Title не перекрывался с крестиком. Значение: ширина кнопки
-(40px для MD) + gap (16px).
+- `Island` — корневая карточка. `IConfirmProps extends IIslandProps`, поэтому добавление prop в
+  `Island` расширяет публичный API `Confirm` без правок в его коде. Confirm задаёт
+  `type={EIslandType.TYPE_1}` и кладёт `children` в `Island.Body`.
+- `Button` — `ConfirmCloseButton` рендерит `Button` с темой `SECONDARY`, размером `MD` и иконкой
+  `CrossStrokeSrvIcon20`; props `theme`, `size` и `icon` в `IConfirmCloseButtonProps` вырезаны
+  через `Omit`. Кнопки действий потребитель кладёт в `Confirm.Controls` сам.
+- `Title` — основа `Confirm.Content.Title` (дефолт `size=H3`).
+- `Text` — основа `Confirm.Content.SubTitle` (дефолт `size=B2`, `tag="div"`).
+- `TriggerClickOnKeyDownEvent` — обёртка, дающая `Confirm.Close` реакцию на Esc при `clickByEsc`.
 
-### Zero tokens — всё из родителей
+### Части Confirm (своего AI.md не имеют)
 
-В `Confirm.module.less` **нет** CSS-переменных вида
-`--triplex-next-Confirm-*`. Используются:
-- `--lightBox-content-max-width` (токен LightBox)
-- `@lightBox-content-max-width-fallback` (LESS-fallback)
-- `@sideOverlaySMWidth`, `@sideOverlayMDWidth`, `@sideOverlayLGWidth`
-- `@page-padding-desktop-x`, `@screen-sm-max`
+- `ConfirmContent` (`Confirm.Content`) и его части `ConfirmContentTitle` (`.Title`),
+  `ConfirmContentSubTitle` (`.SubTitle`).
+- `ConfirmControls` (`Confirm.Controls`).
+- `ConfirmClose` (`Confirm.Close`) и внутренний `ConfirmCloseButton`.
 
-**Это осознанное решение**: Confirm — слой-"контент", не независимый
-визуальный блок. Вся пластика — от Island. Размеры — от контейнера.
+### Контейнеры, в которых открывают Confirm (в `related` не входят — связи по коду нет)
 
-### `IConfirmFC` — кастомный тип интерфейса
+- `TopOverlay` (он же `LightBox.TopOverlay`) — штатное место Confirm: маска поверх контента
+  лайтбокса и выезжающая сверху панель с ловушкой фокуса. Значение `parentComponent` выбирается
+  по тому, в чём открыт сам лайтбокс.
+- `LightBox` и `LightBoxSideOverlay` — задают ширину, под которую подстраивается Confirm через
+  `parentComponent`.
+- `ModalWindow` — направление из «Не используй когда»: самостоятельный модальный диалог поверх
+  страницы.
 
-```ts
-export interface IConfirmFC extends React.FC<IConfirmProps> {
-    Close: typeof ConfirmClose;
-    Content: typeof ConfirmContent;
-    Controls: typeof ConfirmControls;
-}
-```
+---
 
-Аналог Badge / AlertProcess / Chip. TS видит `Confirm.Close` типизированно,
-без `as any`.
+## Stories
 
----
+Основные истории: `stories/Confirm/Confirm.stories.tsx`
+Файлы примеров: `stories/Confirm/examples/`
 
-## Инварианты
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `parentComponent`, наличия крестика и `clickByEsc` |
+| `Default` | `Default.tsx` | Минимальное предупреждение: заголовок, текст, две кнопки, крестик |
+| `Parent components` | `ParentComponents.tsx` | Все значения `EConfirmParentComponent` и разница в максимальной ширине |
+| `Example` | `Example.tsx` | Продуктовый сценарий: Confirm внутри `TopOverlay` подтверждает закрытие `LightBox` |
+| `VisualTests` | `VisualTests.tsx` | Скриншот-кейсы: только заголовок, без крестика, длинный текст с тремя кнопками |
 
-- **`role="dialog" aria-modal="true"`** — обязательны. Не переопределять
-  через пропсы (spread-order перебьёт, но не надо).
-- **`Island.Body` обёртка** внутри Confirm — обязательна. Не превращать
-  `children` в прямых детей Island.
-- **`parentComponentToClassNameMap` и enum синхронны** — при добавлении
-  нового значения enum обновлять и map, и LESS. Дефолт — `LIGHTBOX`.
-- **`Confirm.Close` с `clickByEsc` должен стоять внутри одного Confirm**
-  — не выносить. `TriggerClickOnKeyDownEvent` работает через document,
-  Esc сработает где угодно.
-- **Кнопка закрытия — absolute относительно Island** — требует
-  `position: relative` на `.confirm`/Island. Island задаёт это сам.
-- **`padding-right: 56px` в `.confirmContent`** — резерв под кнопку.
-  Если убрать кнопку — уменьшить padding.
-- **Нет собственных CSS-токенов** — не добавлять. Все стили делегируются
-  Island и родительскому overlay.
-- **Нет forwardRef на root** — известный debt. Не добавлять точечно.
+`Playground` и `Example` исключены из скриншот-тестов: песочница интерактивна, а лайтбокс в
+`Example` открывается по клику — статичный скриншот показал бы только кнопку.
 
 ---
 
-## Accessibility
+## История изменений
 
-- **`role="dialog" aria-modal="true"`** — семантика модального диалога.
-  Screen reader объявит как модал и ограничит чтение его содержимым.
-- **Focus management** — **не реализован самим Confirm**. Ожидается,
-  что родительский overlay (LightBox/SideOverlay) уже управляет focus
-  trap'ом, и внутри Confirm фокус сам попадает на первый интерактивный
-  элемент (обычно кнопку закрытия или первый контрол).
-- **Esc handling** — через `clickByEsc` и `TriggerClickOnKeyDownEvent`.
-  Важно: Esc-listener вешается на document, не на Confirm. Если
-  родитель уже закрывается по Esc — возможен двойной trigger.
-- **Label'ы** — Confirm сам `aria-label`/`aria-labelledby` не
-  проставляет. Если нужно явное имя для screen reader'а — передать
-  `aria-labelledby` через пропсы с id `Confirm.Content.Title` или
-  `aria-label` текстом.
-- **Кнопка закрытия** имеет `title="Закрыть"` по умолчанию (becomes
-  tooltip + `aria-label` fallback для `<Button>` — зависит от
-  реализации Button).
+| Дата | Изменение |
+|---|---|
+| 2026-09-15 | Создан документ. AI-рефакторинг: `Confirm`, `Confirm.Content`, `Confirm.Content.Title`, `Confirm.Content.SubTitle`, `Confirm.Controls` и `Confirm.Close` переведены с `React.FC` на `forwardRef` (статики сохранены через `Object.assign`), JSDoc на props, значениях `EConfirmParentComponent` и компонентах, `className` больше не идёт перед базовыми классами в `clsx`. Добавлены unit-тесты (34) и stories `stories/Confirm/`. Публичный API не изменён. |
 
 ---
 
-## Дизайн-токены
-
-**Нет собственных.** Визуальные токены наследуются от `Island`
-(type=TYPE_1): радиус, фон, тени, внутренние отступы. Layout-переменные
-— LESS (`@sideOverlay*Width`, `@page-padding-desktop-x`, `@screen-sm-max`).
+## Примеры использования
 
-Если нужно кастомизировать Confirm в проекте — переопределять токены
-Island или оборачивать в собственный CSS.
+### Default
 
----
+`stories/Confirm/examples/Default.tsx`
 
-## Связанные компоненты
+```tsx
+import React from "react";
+import { Button, Confirm, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <Confirm aria-labelledby="confirm-default-title">
+        <Confirm.Content>
+            <Confirm.Content.Title id="confirm-default-title">Внимание</Confirm.Content.Title>
+            <Confirm.Content.SubTitle>
+                Несохранённые данные будут утеряны. Вы уверены, что хотите покинуть форму редактирования?
+            </Confirm.Content.SubTitle>
+        </Confirm.Content>
+
+        <Confirm.Controls>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => {}}>
+                Отмена
+            </Button>
+            <Button theme={EButtonTheme.DANGER} size={EComponentSize.MD} onClick={() => {}}>
+                Покинуть форму
+            </Button>
+        </Confirm.Controls>
+
+        <Confirm.Close title="Закрыть" clickByEsc={false} onClick={() => {}} />
+    </Confirm>
+);
+```
 
-- `Island` (`src/components/Island`) — визуальная основа. Confirm =
-  `Island type=TYPE_1` + позиционирование + label-подкомпоненты.
-- `LightBox` (`src/components/LightBox`) — основной контейнер, в котором
-  Confirm открывается поверх контента.
-- `SideOverlay*` (`src/components/SideOverlay`) — вторичные контейнеры
-  (SM/MD/LG). Размеры задают ширину Confirm через `parentComponent`.
-- `Button` (`src/components/Button`) — кнопка закрытия (SECONDARY, MD,
-  CrossStrokeSrvIcon20) и кнопки действий в `Confirm.Controls`.
-- `TriggerClickOnKeyDownEvent` (`src/components/Triggers`) — механизм
-  Esc → click (`Confirm.Close` при `clickByEsc`).
-- `Typography.Title` / `Typography.Text` — базы для
-  `Confirm.Content.Title` / `Confirm.Content.SubTitle`.
-- `ModalWindow` — автономный диалог (с бэкдропом). Не замена Confirm:
-  разная семантика слоя.
+### Parent components
 
----
+`stories/Confirm/examples/ParentComponents.tsx`
 
-## Stories
+```tsx
+import React from "react";
+import { Button, Confirm, EButtonTheme, EComponentSize, EConfirmParentComponent } from "@sberbusiness/triplex-next";
+
+const PARENT_COMPONENTS = Object.values(EConfirmParentComponent);
+
+export const ParentComponents = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {PARENT_COMPONENTS.map((parentComponent) => (
+            <div key={parentComponent}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{parentComponent}</div>
+
+                <Confirm parentComponent={parentComponent} aria-labelledby={`confirm-${parentComponent}-title`}>
+                    <Confirm.Content>
+                        <Confirm.Content.Title id={`confirm-${parentComponent}-title`}>Внимание</Confirm.Content.Title>
+                        <Confirm.Content.SubTitle>
+                            Максимальная ширина предупреждения зависит от компонента, в котором оно открыто.
+                        </Confirm.Content.SubTitle>
+                    </Confirm.Content>
+
+                    <Confirm.Controls>
+                        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => {}}>
+                            Отмена
+                        </Button>
+                        <Button theme={EButtonTheme.DANGER} size={EComponentSize.MD} onClick={() => {}}>
+                            Покинуть форму
+                        </Button>
+                    </Confirm.Controls>
+
+                    <Confirm.Close title="Закрыть" clickByEsc={false} onClick={() => {}} />
+                </Confirm>
+            </div>
+        ))}
+    </div>
+);
+```
 
-**Нет собственных stories.** Документируется косвенно через сценарии
-`LightBox`/`SideOverlay`, где Confirm появляется как подтверждение
-закрытия.
+### Example
 
-Добавлять stories при миграции на AI-ready pattern — stories должны
-эмулировать контекст (мок родительского overlay или использование
-реального `LightBox`/`SideOverlay` с открытым Confirm внутри).
+`stories/Confirm/examples/Example.tsx`
 
----
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    Confirm,
+    EBodyPageType,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EHeaderPageType,
+    ETextSize,
+    ETitleSize,
+    FocusTrapUtils,
+    LightBox,
+    Page,
+    Text,
+    Title,
+    TopOverlay,
+} from "@sberbusiness/triplex-next";
+
+/**
+ * Типовой сценарий: закрытие LightBox с несохранёнными данными подтверждается
+ * предупреждением в верхней панели.
+ */
+export const Example = () => {
+    const [lightBoxOpened, setLightBoxOpened] = useState(false);
+    const [topOverlayOpened, setTopOverlayOpened] = useState(false);
+
+    const handleCloseLightBox = () => setTopOverlayOpened(true);
+    const handleCancel = () => setTopOverlayOpened(false);
+    const handleConfirm = () => {
+        setTopOverlayOpened(false);
+        setLightBoxOpened(false);
+    };
 
-## История изменений
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setLightBoxOpened(true)}>
+                Открыть LightBox
+            </Button>
+
+            {lightBoxOpened ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={topOverlayOpened}>
+                    <LightBox.Content isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Форма редактирования
+                                        </Title>
+                                    </Page.Header.Title.Content>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.FIRST}>
+                                <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                    Закройте лайтбокс крестиком — верхняя панель попросит подтвердить выход.
+                                </Text>
+                            </Page.Body>
+                        </Page>
+
+                        <TopOverlay opened={topOverlayOpened} onOpen={() => {}} onClose={() => {}}>
+                            <Confirm aria-labelledby="confirm-example-title">
+                                <Confirm.Content>
+                                    <Confirm.Content.Title id="confirm-example-title">Внимание</Confirm.Content.Title>
+                                    <Confirm.Content.SubTitle>
+                                        Несохранённые данные будут утеряны. Вы уверены, что хотите покинуть форму
+                                        редактирования?
+                                    </Confirm.Content.SubTitle>
+                                </Confirm.Content>
+
+                                <Confirm.Controls>
+                                    <Button
+                                        theme={EButtonTheme.SECONDARY}
+                                        size={EComponentSize.MD}
+                                        onClick={handleCancel}
+                                    >
+                                        Отмена
+                                    </Button>
+                                    <Button
+                                        theme={EButtonTheme.DANGER}
+                                        size={EComponentSize.MD}
+                                        onClick={handleConfirm}
+                                    >
+                                        Покинуть форму
+                                    </Button>
+                                </Confirm.Controls>
+
+                                <Confirm.Close
+                                    title="Закрыть"
+                                    // Закрыть по Esc, только пока верхняя панель открыта.
+                                    clickByEsc={topOverlayOpened}
+                                    onClick={handleCancel}
+                                />
+                            </Confirm>
+                        </TopOverlay>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" onClick={handleCloseLightBox} />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |