@sberbusiness/triplex-next-mcp-server 0.24.0-beta1

package/bundle/components/SelectExtendedField.md

@@ -0,0 +1,322 @@
+---
+component: SelectExtendedField
+category: Form Controls
+figma-node: ""
+figma-file: ""
+related: [SelectField, MultiselectField, Dropdown, FormField, KeyDownListener]
+tokens: []
+stories: stories/SelectExtendedField/SelectExtendedField.stories.tsx
+version: "1.0"
+---
+
+# SelectExtendedField
+
+## Назначение
+
+**Базовый компонент** для построения custom-Select'ов: оркестрирует
+открытие/закрытие dropdown'а, click-outside, ESC и (опционально)
+TAB-закрытие, прокидывает `opened/setOpened/targetRef/dropdownRef` в
+**render-prop'ы** для target и dropdown. Сам не диктует ни форму
+target'а (icon vs text vs input), ни содержимое dropdown'а — потребитель
+рендерит их через render-функции.
+
+`SelectExtendedField.Target` (`SelectExtendedFieldTarget`) и
+`SelectExtendedField.Dropdown` — типичные реализации; их можно заменить
+своими.
+
+Используй когда: строишь нестандартный Select (например, multi-select с
+поиском, color-picker как select, и т.п.). Для типичных — `SelectField`,
+`MultiselectField`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/SelectExtendedField/
+├── SelectExtendedField.tsx                                 # forwardRef + Object.assign({Target, Dropdown})
+├── components/
+│   ├── SelectExtendedFieldTarget.tsx                       # forwardRef; FormField + caret + clear + loader
+│   ├── SelectExtendedFieldDropdown.tsx                     # FC; <Dropdown> wrapper + .List
+│   └── SelectExtendedFieldDropdownDefault.tsx              # FC; готовая раскладка опций (desktop + mobile)
+├── styles/
+├── index.ts
+└── __tests__/
+```
+
+---
+
+## Compound-структура (через render-prop'ы)
+
+```tsx
+<SelectExtendedField
+    closeOnTab
+    onOpen={...} onClose={...}
+    renderTarget={({ opened, setOpened }) => (
+        <SelectExtendedField.Target
+            opened={opened}
+            setOpened={setOpened}
+            label={selected?.label}
+            placeholder="Выбрать..."
+            fieldLabel="Label"
+            size={EComponentSize.MD}
+            onClear={() => onChange(undefined)}
+        />
+    )}
+>
+    {({ opened, setOpened, targetRef, dropdownRef }) => (
+        <SelectExtendedField.Dropdown
+            opened={opened}
+            setOpened={setOpened}
+            targetRef={targetRef}
+            forwardedRef={dropdownRef}
+        >
+            <SelectExtendedField.Dropdown.List dropdownOpened={opened}>
+                {options.map(...)}
+            </SelectExtendedField.Dropdown.List>
+        </SelectExtendedField.Dropdown>
+    )}
+</SelectExtendedField>
+```
+
+---
+
+## Варианты и props
+
+### SelectExtendedField — `ISelectExtendedFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `renderTarget` | `(props: ISelectExtendedFieldTargetProvideProps) => ReactNode` | — | Render-prop для target. Получает `{ opened, setOpened }`. |
+| `children` | `(props: ISelectExtendedFieldDropdownProvideProps) => ReactNode` | — | Render-prop для dropdown. Получает `{ opened, setOpened, targetRef, dropdownRef }`. |
+| `onOpen?` | `() => void` | — | Только при реальном переходе `false → true` (skip mount). |
+| `onClose?` | `() => void` | — | Только при `true → false`. |
+| `closeOnTab?` | `boolean` | `false` | Tab закрывает dropdown. |
+| `...HTMLAttributes` | — | — | На корневой `<div>`. |
+
+### SelectExtendedField.Target — `ISelectExtendedFieldTargetProps extends Omit<IFormFieldProps, "prefix" \| "postfix">`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `opened` | `boolean` | — | Из render-prop'а. |
+| `setOpened` | `(opened: boolean) => void` | — | Из render-prop'а. |
+| `fieldLabel` | `ReactNode` | — | Label, рендерится через `FormFieldLabel`. |
+| `label?` | `ReactNode` | — | Текущий выбранный (отображается в `FormFieldTarget`). |
+| `placeholder?` | `ReactNode` | — | Когда `label` пуст. |
+| `loading?` | `boolean` | — | Заменяет caret на `LoaderSmall` (BRAND). Блокирует клики и keys. |
+| `prefix?` / `postfix?` | `ReactNode` | — | До/после target. Caret/Loader всегда рендерятся в Postfix. |
+| `onClear?` | `() => void` | — | Если передан — рендерится `FormFieldClear`. |
+| `size` | `EComponentSize` | `MD` | Размер. Маппится на `CaretdownStrokeSrvIcon{16/20/24}` и `LoaderSmall size`. |
+| `status` | `EFormFieldStatus` | — | `DISABLED` блокирует клики/keys. |
+| `tabIndex` | `number` | — | Стандартно. |
+
+- `aria-expanded={opened}`, `aria-haspopup="listbox"` — на корне FormField.
+- Открытие по: **click**, **Enter**, **Space**, **ArrowDown**, **ArrowUp** (только когда `!opened`); тогда `preventDefault + stopPropagation`.
+
+### SelectExtendedField.Dropdown — `ISelectExtendedFieldDropdownProps extends Omit<IDropdownProps, "forwardedRef">`
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `forwardedRef` | `RefObject<HTMLDivElement>` | Из render-prop'а (dropdownRef). |
+| `targetRef` | `RefObject<HTMLElement>` | Из render-prop'а. |
+| `opened` | `boolean` | — |
+| `children?` | `ReactNode` | — |
+| `...IDropdownProps` | — | width, mobileViewProps, size и т.п. |
+
+Slots: **`SelectExtendedField.Dropdown.List`** = `DropdownList` (re-export).
+
+### Provide-types
+
+```ts
+ISelectExtendedFieldTargetProvideProps:    { opened, setOpened }
+ISelectExtendedFieldDropdownProvideProps:  { opened, setOpened, targetRef, dropdownRef }
+ISelectExtendedFieldDefaultOption: { value: string; label: ReactNode; ...IDropdownListItemProps без active/onSelect/selected/key/className/keyCodesForSelection }
+```
+
+### SelectExtendedFieldDropdownDefault (отдельная утилита)
+
+Готовая раскладка опций для desktop (`Dropdown.List`) **и** mobile (`DropdownMobileHeader/Body/List`). Не часть Object.assign — импортируется отдельно:
+
+```ts
+import { SelectExtendedFieldDropdownDefault } from "@sberbusiness/triplex-next/components/SelectExtendedField";
+```
+
+(используется в `SelectField`).
+
+---
+
+## Ключевые особенности реализации
+
+### Stable `onOpen`/`onClose` через ref
+
+```ts
+const onOpenRef = useRef(onOpen);
+const onCloseRef = useRef(onClose);
+
+useLayoutEffect(() => {
+    onOpenRef.current = onOpen;
+    onCloseRef.current = onClose;
+});
+```
+
+- Колбэки хранятся в ref'ах и обновляются после каждого коммита через `useLayoutEffect` без deps.
+- `useEffect([opened])` читает `onOpenRef.current` — поэтому **эффект не пересоздаётся** при смене ссылок на колбэки.
+
+### Skip mount-вызов `onOpen` / `onClose`
+
+```ts
+if (!isMountedRef.current) {
+    isMountedRef.current = true;
+    return;
+}
+if (opened) onOpenRef.current?.();
+else onCloseRef.current?.();
+```
+
+- Default `opened = false` → без skip'а `onClose` вызвался бы при mount.
+
+### Click-outside через `document.mousedown`
+
+```ts
+useEffect(() => {
+    document.addEventListener("mousedown", listenMouseDown);
+    return () => document.removeEventListener("mousedown", listenMouseDown);
+}, [listenMouseDown]);
+```
+
+- Закрывает, если клик вне `targetRef` и `dropdownRef`.
+- **`mousedown`**, не `click` — закрывает раньше, чем сработает `click` на dropdown items.
+
+### ESC — через KeyDownListener (window)
+
+```tsx
+<KeyDownListener onMatch={closeDropdown} eventKeyCode={EVENT_KEY_CODES.ESCAPE}>
+    ...
+</KeyDownListener>
+```
+
+- Глобальный listener, см. `KeyDownListener-AI.md`.
+
+### TAB — через onKeyDown в самом контейнере
+
+```ts
+if (closeOnTab && isKey(key, "TAB")) closeDropdown();
+```
+
+- Опционально. Контракт: `closeOnTab` — потребитель решает (по UX).
+
+### Target: открытие по клавишам
+
+```ts
+if (!opened && [SPACE, ENTER, ARROW_DOWN, ARROW_UP].includes(event.keyCode)) {
+    event.preventDefault();
+    event.stopPropagation();  // чтобы dropdown сразу не среагировал тем же keydown
+    setOpened(!opened);
+}
+```
+
+- `event.keyCode` — **deprecated** API (тех-долг).
+- `stopPropagation` — комментарий в коде: предотвращает срабатывание `keydown` в `DropdownListItem` через `document.addEventListener("keydown")`.
+
+### Target: caret + loader через size-map
+
+- `CaretdownStrokeSrvIcon{16/20/24}` для `SM/MD/LG`.
+- `LoaderSmall theme=BRAND` тех же размеров.
+- `IconWrapper active={opened} disabled={status===DISABLED}` оборачивает caret — управляет цветом через `@sberbusiness/icons-next` глобальные классы.
+
+### `setRef` мерж forwardRef + targetRef
+
+```ts
+const setRef = (instance) => {
+    targetRef.current = instance;
+    if (typeof ref === "function") ref(instance); else if (ref) ref.current = instance;
+};
+```
+
+### Target слоты Postfix
+
+```tsx
+<FormFieldPostfix>
+    {onClear && <FormFieldClear onClick={onClear} />}
+    {loading ? <LoaderSmall .../> : <IconWrapper .../>}
+    {postfix}
+</FormFieldPostfix>
+```
+
+- Порядок: clear → loader/caret → custom postfix.
+
+### Loading блокирует клики и keydown
+
+```ts
+if (loading || status === DISABLED) return;  // в handleClick
+if (loading && status === DISABLED) return;  // в handleKeyDown — bug? && вместо ||
+```
+
+- В `handleKeyDown` используется `&&` — **похоже на баг**: keys блокируются только если ОБА условия true. Тех-долг, не трогать без задачи.
+
+---
+
+## Инварианты
+
+- **`renderTarget` и `children` — render-prop'ы** (функции). Изменение API — breaking.
+- **`onOpen` / `onClose` через ref'ы** — stable callback pattern. Не пересоздавать эффект на смене ссылок.
+- **Skip mount-вызов** колбэков через `isMountedRef`.
+- **Click-outside на `mousedown`** (не `click`) — public behavior contract.
+- **ESC закрывает через `KeyDownListener` (window)** — глобальный listener.
+- **`closeOnTab` default `false`** — UX-выбор.
+- **Target открывает по `Enter / Space / ArrowDown / ArrowUp`** + `preventDefault + stopPropagation`.
+- **Target использует `event.keyCode`** — deprecated, тех-долг.
+- **Target loading: `&&` вместо `||`** в handleKeyDown — известный потенциальный баг.
+- **`aria-haspopup="listbox"`** — публичная семантика.
+- **`SelectExtendedField.Dropdown.List = DropdownList`** — реэкспорт.
+- **`SelectExtendedFieldDropdownDefault`** — не slot, отдельный экспорт.
+- **`Target.size` default `MD`**.
+- **Target caret-icon фиксирован** (`CaretdownStrokeSrvIcon`) — нельзя заменить.
+- **`forwardRef`** на SelectExtendedField и Target; **`FC`** на Dropdown.
+
+---
+
+## Accessibility
+
+- `aria-expanded={opened}` + `aria-haspopup="listbox"` на target — корректная семантика combobox-like.
+- ESC закрывает (стандарт).
+- Open by `Enter`/`Space`/`Arrow*` — стандартное keyboard поведение для select.
+- **Target — `<div>` (от FormField)**, не `<button>` — для AT может звучать как regular область. Если нужен strict role — потребитель добавляет через `...rest` (`role="combobox"` и т.п.).
+- `aria-label` / `aria-labelledby` для target — потребитель.
+- `loading` блокирует клики и (по идее) keys — но по факту `keydown` блокировка имеет потенциальный баг (см. выше).
+- `tabIndex` — наследуется от FormField/FormFieldProps.
+
+---
+
+## Дизайн-токены
+
+Нет собственных. Цвета/spacing — от `FormField`, `Dropdown`, `Loader`.
+
+---
+
+## Связанные компоненты
+
+- `SelectField` — высокоуровневая обёртка для типичного Select.
+- `MultiselectField` — multi-выбор.
+- `Dropdown` — popover.
+- `FormField` (Target/Label/Prefix/Postfix/Clear) — основа target.
+- `KeyDownListener` — ESC.
+- `LoaderSmall` — индикатор загрузки в target.
+- `IconWrapper` — управление цветом caret.
+- `CaretdownStrokeSrvIcon{16/20/24}` — иконка раскрытия.
+- `EComponentSize`, `EFormFieldStatus`.
+
+---
+
+## Stories
+
+`stories/SelectExtendedField/SelectExtendedField.stories.tsx`
+Примеры: `stories/SelectExtendedField/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/SelectField.md

@@ -0,0 +1,213 @@
+---
+component: SelectField
+category: Form Controls
+figma-node: ""
+figma-file: ""
+related: [SelectExtendedField, MultiselectField, Dropdown, FormField]
+tokens: []
+stories: stories/SelectField/SelectField.stories.tsx
+version: "1.0"
+---
+
+# SelectField
+
+## Назначение
+
+Готовый Select для одиночного выбора из списка опций. Под капотом —
+`SelectExtendedField` с фиксированной раскладкой target'а и dropdown'а:
+- Target = `SelectExtendedField.Target` (FormField + caret + clear).
+- Dropdown = `SelectExtendedFieldDropdownDefault` (desktop list +
+  mobile bottom-sheet) c шириной `EDropdownWidth.TARGET`.
+
+Управляет:
+- `activeDescendant` через `DropdownListContext` — для a11y `aria-activedescendant`.
+- `instanceId` через `lodash uniqueId()` — связывает Target ↔ List через `aria-controls`.
+- **`closeOnTab = true`** захардкожен.
+
+Используй когда: типичный select из списка опций. Для multi-выбора —
+`MultiselectField`. Для нестандартного target/dropdown —
+`SelectExtendedField` напрямую.
+
+---
+
+## Файловая структура
+
+```text
+src/components/SelectField/
+├── SelectField.tsx   # forwardRef; склейка SelectExtendedField + Default-Dropdown
+├── index.ts
+└── __tests__/
+```
+
+---
+
+## Варианты и props
+
+### `ISelectFieldProps`
+
+```ts
+extends Omit<ISelectExtendedFieldProps, "children" | "onChange" | "renderTarget">
+extends Pick<ISelectExtendedFieldTargetProps, "loading" | "status" | "placeholder">
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | — (обязателен) | Размер. |
+| `value?` | `ISelectFieldOption` | — | Текущая выбранная опция. |
+| `options` | `ISelectFieldOption[]` | — | Список опций. |
+| `onChange` | `(option: ISelectFieldOption) => void` | — | Колбэк выбора. |
+| `placeholder?` | `ReactNode` | — | На target. |
+| `loading?` | `boolean` | — | Спиннер в target, dropdown НЕ открывается. |
+| `status?` | `EFormFieldStatus` | — | DISABLED блокирует target. |
+| `targetProps?` | `Omit<ISelectExtendedFieldTargetProps, "opened" \| "setOpened" \| "size">` | — | Доп. props для target (spread'ятся **после** дефолтных, но **до** provide-props). |
+| `dropdownListItemClassName?` | `string` | — | className для каждого `DropdownListItem` / mobile-item. |
+| `mobileTitle?` | `ReactNode` | — | Заголовок mobile bottom-sheet. |
+| `aria-labelledby?` | `string` | — | На target. |
+| `children?` | `never` | — | Запрещено. |
+| `...ISelectExtendedFieldProps` | `onOpen`, `onClose`, ... | — | Прокидывается. **`closeOnTab` зашит в `true`**, передача игнорируется. |
+
+### `ISelectFieldOption extends ISelectExtendedFieldDefaultOption`
+
+```ts
+{ value: string; label: ReactNode; ...IDropdownListItemProps без active/onSelect/selected/key/className/keyCodesForSelection }
+```
+
+- **`id`** обязателен (часть `IDropdownListItemProps`) — используется как `key` и `selected={option.id === value?.id}`.
+
+---
+
+## Ключевые особенности реализации
+
+### Layered render-prop'ы
+
+```tsx
+<SelectExtendedField renderTarget={renderTarget} closeOnTab={true}>
+    {renderDropdown}
+</SelectExtendedField>
+```
+
+- `renderTarget` рендерит `SelectExtendedField.Target` с `value?.label`.
+- `renderDropdown` рендерит `SelectExtendedFieldDropdownDefault` с `width=TARGET`.
+
+### `DropdownListContext` — `activeDescendant` для a11y
+
+```tsx
+<DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>
+    <SelectExtendedFieldDropdownDefault ... />
+</DropdownListContext.Provider>
+```
+
+- `DropdownList` items пишут свой `id` в `activeDescendant` при keyboard-навигации.
+- Target читает `activeDescendant` и ставит `aria-activedescendant` — корректная семантика combobox.
+
+### `instanceId = uniqueId()` через `useRef`
+
+```ts
+const instanceId = useRef(uniqueId());
+```
+
+- **SSR-небезопасно** (`uniqueId` глобальный счётчик).
+- Используется как `aria-controls` на target и `id` на List — связывает их.
+
+### Target props order
+
+```tsx
+<SelectExtendedField.Target
+    label={value?.label} placeholder={...} loading={...} status={...}
+    role="combobox"
+    aria-controls={instanceId.current}
+    aria-activedescendant={activeDescendant}
+    aria-labelledby={ariaLabelledby}
+    ref={setRef}
+    size={size}
+    fieldLabel={undefined}
+    {...targetProps}    // потребительские targetProps — переопределяют дефолты
+    {...props}          // provide-props (opened, setOpened) — переопределяют всё
+/>
+```
+
+- Порядок: defaults → `targetProps` (потребитель) → `provide-props` (system).
+- **`fieldLabel: undefined`** по умолчанию — потребитель должен передать через `targetProps.fieldLabel`.
+
+### Жёстко зашито
+
+- **`closeOnTab: true`**.
+- **`width: EDropdownWidth.TARGET`** — dropdown ровно ширины target'а.
+- **`role="combobox"`** на target.
+- **Default Dropdown layout** (desktop List + mobile bottom-sheet) — нельзя заменить (для нестандартного — использовать `SelectExtendedField`).
+
+### `loading` блокирует открытие dropdown'а
+
+В `SelectExtendedFieldDropdownDefault`:
+
+```tsx
+opened={opened && !loading}
+```
+
+- При `loading=true` dropdown не показывается, в target — спиннер.
+
+### `setRef` мерж forwardRef + targetRef
+
+Стандартный паттерн.
+
+---
+
+## Инварианты
+
+- **`size` обязателен** (нет default).
+- **`closeOnTab=true`** захардкожен.
+- **`width=TARGET`** захардкожен.
+- **`role="combobox"`** на target — публичный a11y-контракт.
+- **`aria-controls`** + **`aria-activedescendant`** связывают target и list через `instanceId` и `DropdownListContext`.
+- **`uniqueId()` через `useRef`** — SSR-небезопасно (тех-долг).
+- **`children: never`** — запрещены.
+- **`option.id`** — обязательный (наследуется от `IDropdownListItemProps`); используется как `key` и `selected`.
+- **`targetProps` мержатся между defaults и provide-props** — порядок важен.
+- **`fieldLabel` по умолчанию `undefined`** — потребитель добавляет через `targetProps.fieldLabel`.
+- **`loading` блокирует Dropdown** (`opened && !loading`).
+- **Default Dropdown layout фиксирован** — для кастомного использовать `SelectExtendedField`.
+- **`forwardRef<HTMLDivElement>`** — на target ref.
+
+---
+
+## Accessibility
+
+- `role="combobox"` + `aria-haspopup="listbox"` (от Target) + `aria-expanded` + `aria-controls` + `aria-activedescendant` — каноническая combobox-семантика.
+- `aria-labelledby` — потребитель.
+- ESC закрывает (от SelectExtendedField).
+- `closeOnTab=true` — Tab закрывает (UX-выбор).
+- `loading` — клики/keys блокированы (с known bug в keydown — см. SelectExtendedField-AI).
+- **`uniqueId()` SSR-небезопасно** — может привести к несовпадению `id` между сервером и клиентом.
+
+---
+
+## Дизайн-токены
+
+Нет собственных — наследуются от `SelectExtendedField` / `Dropdown` / `FormField`.
+
+---
+
+## Связанные компоненты
+
+- `SelectExtendedField` — базовый, для кастомных Select'ов.
+- `MultiselectField` — multi-выбор.
+- `SelectExtendedFieldDropdownDefault` — переиспользуется для default-раскладки.
+- `Dropdown` (+`DropdownList`+`DropdownMobile*`) — popover.
+- `DropdownListContext` — для `activeDescendant`.
+- `EDropdownWidth.TARGET`, `EComponentSize`.
+- `lodash uniqueId`.
+
+---
+
+## Stories
+
+`stories/SelectField/SelectField.stories.tsx`
+Примеры: `stories/SelectField/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/Skeleton.md

@@ -0,0 +1,129 @@
+---
+component: Skeleton
+category: Feedback
+figma-node: ""
+figma-file: ""
+related: [Loader, LoaderScreen]
+tokens: [triplex-next-Skeleton-BackgroundColor_Light_Start, triplex-next-Skeleton-BackgroundColor_Light_End, triplex-next-Skeleton-BackgroundColor_Dark_Start, triplex-next-Skeleton-BackgroundColor_Dark_End]
+stories: stories/Skeleton/Skeleton.stories.tsx
+version: "1.0"
+---
+
+# Skeleton
+
+## Назначение
+
+Плейсхолдер для загружающегося контента — пульсирующий `<div>` с
+`border-radius: 16px` и `flex-grow: 1`. Поддерживает две темы (`DARK` /
+`LIGHT`) — отличаются фоновыми переменными в @keyframes.
+
+Используй когда: показываешь shape будущего контента, чтобы избежать
+layout shift и психологически сократить ощущаемое время загрузки. Для
+точечного индикатора — `Loader`/`LoaderScreen`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Skeleton/
+├── Skeleton.tsx               # FC; <div> + класс по type
+├── enums.ts                   # ESkeletonType (DARK | LIGHT)
+├── styles/Skeleton.module.less # 2 @keyframes пульсации
+├── index.ts
+└── __tests__/
+```
+
+---
+
+## Варианты и props
+
+### `ISkeletonProps extends HTMLAttributes<HTMLDivElement>`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `type` | `ESkeletonType` | `DARK` | Тема (DARK/LIGHT). Влияет на анимационные переменные. |
+| `...HTMLAttributes` | — | — | На `<div>`. Размер задаётся через `style`/`className`. |
+
+### Enum
+
+- `ESkeletonType.DARK | LIGHT`.
+
+---
+
+## Ключевые особенности реализации
+
+### Анимация — 2s ease-in-out infinite через background-color keyframes
+
+```less
+.skeleton.dark { animation: skeleton-dark-pulse 2s ease-in-out infinite; }
+@keyframes skeleton-dark-pulse {
+    0%   { background-color: var(--triplex-next-Skeleton-BackgroundColor_Dark_Start); }
+    50%  { background-color: var(--triplex-next-Skeleton-BackgroundColor_Dark_End); }
+    100% { background-color: var(--triplex-next-Skeleton-BackgroundColor_Dark_Start); }
+}
+```
+
+- Пульсация Start ↔ End ↔ Start.
+- **`prefers-reduced-motion`** не учитывается — потенциальный a11y-долг.
+
+### `border-radius: 16px`, `flex-grow: 1`
+
+- Скругление **захардкожено** (16px). Для других форм (круги аватаров, узкие линии текста) — потребитель override через className/style.
+- `flex-grow: 1` — растягивается во flex-контейнере. **В блочном родителе** Skeleton сам по себе не имеет ширины — нужна `style.width` или `className` с шириной.
+
+### **`FC, не forwardRef`**
+
+- Ref на `<div>` не пробрасывается.
+
+### **Нет `aria-busy`/`role="status"`**
+
+- Skeleton — чисто визуальный. AT не озвучивает «загрузка». Если важно — потребитель добавляет `role="status"` / `aria-busy="true"` через `...rest`.
+
+---
+
+## Инварианты
+
+- **`type` default `DARK`**.
+- **`border-radius: 16px`** захардкожено — изменение требует override.
+- **`flex-grow: 1`** захардкожено — поведение во flex-контейнере.
+- **Анимация 2s ease-in-out infinite** — захардкожено, не настраивается.
+- **CSS-переменные `--triplex-next-Skeleton-BackgroundColor_{Light|Dark}_{Start|End}`** — публичные токены.
+- **`FC, не forwardRef`**.
+- **`prefers-reduced-motion` не учитывается** — тех-долг.
+- **`data-tx`** — версия пакета.
+
+---
+
+## Accessibility
+
+- **Нет `role` / `aria-busy`** по умолчанию — потребитель должен добавить, если нужно.
+- **Нет `prefers-reduced-motion` media-query** — анимация играет всегда. Пользователи с предпочтением reduced motion увидят пульсацию (тех-долг).
+
+---
+
+## Дизайн-токены
+
+- `--triplex-next-Skeleton-BackgroundColor_Light_Start` / `_End`.
+- `--triplex-next-Skeleton-BackgroundColor_Dark_Start` / `_End`.
+
+---
+
+## Связанные компоненты
+
+- `Loader` / `LoaderScreen` — для активной точечной загрузки.
+
+---
+
+## Stories
+
+`stories/Skeleton/Skeleton.stories.tsx`
+Примеры: `stories/Skeleton/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |