@central-design-system/components 4.0.0-alpha.1 → 4.0.0-alpha.11

package/CHANGELOG.md

@@ -23,6 +23,11 @@ _TBD_
 - ⚡ **Производительность** — виртуализация длинных списков и меню (`CdsVirtualScroll`, `useVirtual`) в `CdsSelect` / `CdsAutocomplete` / `CdsCombobox` / `CdsTree`, ленивый рендер контента оверлеев (`eager` / `useLazy`) и tree-shaking за счёт ESM-бандлов с корректным `sideEffects`.
 - ↕️ **Drag-and-drop в CdsTable** — перетаскивание строк и колонок прямо в таблице (`CdsTable`).
 - 🧱 **20+ новых компонентов и атомарная декомпозиция** — библиотека пополнилась новыми компонентами (список ниже), а составные компоненты дополнительно разложены на самостоятельные атомы. В отличие от CDS 3, из этих атомов можно собирать собственные компоненты — как вручную, так и силами AI-агентов.
+- **SASS-переменные и vite-plugin.** Публикуются SCSS-исходники компонентов и
+  агрегат `styles/component-settings` (глобальные + компонентные переменные).
+  Новый пакет `@central-design-system/vite-plugin`: перекомпиляция стилей
+  с пользовательским файлом настроек (`styles.configFile`) и авто-импорт
+  компонентов и директив из шаблонов без регистрации в `createCds`.
 
 ### 🧩 Новые компоненты
 
@@ -32,6 +37,7 @@ _TBD_
 - **CdsDateInput** — поле ввода даты: текстовое поле с иконкой календаря, раскрывающее `CdsDatePicker` в выпадающем меню; поддерживает ручной ввод, диапазон, несколько дат и выбор времени.
 - **CdsFileInput** — поле выбора файлов: одиночный и множественный выбор, drag-and-drop и вставка из буфера, отображение именами или чипами, размер файлов и фильтрация по типам.
 - **CdsFileUpload** — выделенная зона загрузки файлов с drag-and-drop (включая папки), списком файлов, фильтрацией по типам и индикатором загрузки.
+- **CdsOtpInput** — поле ввода одноразового кода из SMS, письма или приложения-аутентификатора: ряд ячеек поверх одного скрытого `input`, автозаполнение кода, вставка из буфера и событие завершения ввода.
 - **CdsProgressCircle** — круговой индикатор прогресса в режимах determinate и indeterminate.
 - **CdsTagGroup** — группа тегов с переключаемым выбором: одиночным или множественным, с горизонтальной прокруткой или переносом по строкам.
 - **CdsToast** — всплывающее уведомление со статусом, автозакрытием по таймеру, позиционированием и действиями. Замена `CdsNotificationAlert` из CDS 3.
@@ -60,7 +66,7 @@ _TBD_
 - **CdsTabsV2**: компоненты `CdsTabsV2` / `CdsTabV2` переименованы в `CdsTabs` / `CdsTab` — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
 - **CdsTabs**: пропсы иконок стрелок прокрутки переименованы `prependIcon` / `appendIcon` → `prevIcon` / `nextIcon`.
 - **CdsTooltip**: контент подсказки по умолчанию получил `pointer-events: none` — наведение закрывает подсказку; для кликабельного контента добавьте проп `interactive` — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
-- **CdsTooltip**: удалён пропс `hideArrow` и сам направляющий «хвостик»; изменён exposed-API (`id` / `overlay` → `contentEl` / `activatorEl` / `updateLocation` …).
+- **CdsTooltip**: изменён exposed-API (`id` / `overlay` → `contentEl` / `activatorEl` / `updateLocation` …).
 - **CdsContainer**: компонент удалён (был помечен `deprecated` в CDS 3) — замена: `<div>` с утилитарными классами, либо `CdsCard`, если нужна интерактивность — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
 - **CdsContentSwitcher**: компоненты `CdsContentSwitcher` / `CdsContentSwitcherItem` удалены (были помечены `deprecated` в CDS 3) — замена `CdsTabs` / `CdsTab` — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
 - **CdsStatus**: значение статуса `error` переименовано в `danger` (`status`: `info` / `success` / `warning` / `danger` / `progress`) — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
@@ -107,6 +113,8 @@ _TBD_
 - **CdsToggle**: изменён exposed-API — вместо `id` / `isFocused` / `validationRef` / `inputRef` компонент отдаёт состояние (`isDirty` / `isDisabled` / `isReadonly` / `isPure` / `isValid` / `isValidating`) и методы валидации (`validate` / `reset` / `resetValidation`).
 - **CdsSidebar**: компонент удалён (был помечен `deprecated` в CDS 3 с рантайм-предупреждением `[CDS UPGRADE]`) — замена `CdsDrawer`.
 - **Стили (breakpoints)**: SCSS-миксин `cds-breakpoint-down` выровнен с JS-composable `useDisplay` — `down('<name>')` теперь означает «`<name>` и ниже» (max-width следующего брейкпоинта − 0.02), а не «строго ниже», как в CDS 3; значения порогов и миксин `cds-breakpoint-up` не изменились — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
+- **CdsDrawer**: видимость панели на широком экране подчиняется `v-model` — раньше обычная панель показывалась медиазапросом при любом значении, теперь `false` скрывает её и освобождает место в макете; чтобы панель сама открывалась там, где помещается в макет, передайте `null` или не задавайте `v-model` — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
+- **CdsDrawer**: на узком экране (< 1056 px) непостоянная панель ведёт себя как выезжающая и синхронизирует `v-model` с шириной экрана — закрывается при сужении и открывается при расширении (отключается пропом `disableResizeWatcher`); `permanent` на узком экране теперь занимает место в макете — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
 
 ### Что нового
 
@@ -147,7 +155,7 @@ _TBD_
 - **CdsTooltip**: проп `color` для цвета фона подсказки.
 - **CdsNotification**: новое значение `flat` у пропса `variant` — уведомление без рамки; `variant="important"` воспроизводит вид тоста `CdsNotificationAlert` из CDS 3 — нейтральный фон и тень, статус задаёт только цвета контента (набор CDS 3 `default` / `compact` / `important` сохранён).
 - **CdsNotification**: пропсы `bgColor` / `textColor` для переопределения цвета фона и контента (без них действуют цвета статуса).
-- **CdsEmptyState**: компонент переработан по мотивам Vuetify `VEmptyState`: сохранены `title`, `description` и legacy-иллюстрации CDS 3 (проп и слот `illustration`); добавлены медиа-область — иконка `icon` или изображение `image` с размером `size` (слот `media`), акцентный заголовок `headline` и слот `default` для произвольного контента.
+- **CdsEmptyState**: компонент переработан: сохранены `title`, `description` и legacy-иллюстрации CDS 3 (проп и слот `illustration`); добавлены медиа-область — иконка `icon` или изображение `image` с размером `size` (слот `media`), акцентный заголовок `headline` и слот `default` для произвольного контента.
 - **CdsEmptyState**: встроенная кнопка действия: пропсы `actionText` / `href` / `to`, событие `click:action`; слот `actions` получает `props` с обработчиком `onClick`.
 - **CdsEmptyState**: пропсы раскладки и оформления: `justify` (`start` / `center` / `end`), `textWidth`, цветовые `color` / `bgColor` и габариты `width` / `height` / `minWidth` / `maxWidth` / `minHeight` / `maxHeight`.
 - **CdsAutocomplete**: отображение выбранных значений чипами — пропсы `chips` / `closableChips`, слот `chip` и `clearOnSelect` для очистки запроса после выбора.
@@ -254,6 +262,15 @@ _TBD_
 - **CdsTagGroup**: пропсы `color`, `activeColor`, `disabled` и `filter` группа проставляет своим тегам как значения по умолчанию; наружу доступны `select`, `isSelected`, `selected`, `next` и `prev`.
 - **CdsTag**: новый проп `activeColor` — цвет выбранного в группе тега; без него выбор красит сама группа брендовым цветом, а `color` остаётся цветом невыбранного тега.
 - **CdsTag**: оформление заблокированного тега — `disabled` красит тег в служебные токены `fill-disable` / `content-disable` и снимает реакцию на клики.
+- **CdsOtpInput**: новый компонент — поле ввода одноразового кода: ячейки только отрисовывают код, а ввод принимает один скрытый `input` с `autocomplete="one-time-code"`, поэтому работают автозаполнение из SMS, вставка целой строкой из буфера, выделение и стрелки. Пропсы `length`, `type` (`number` / `text` / `password`), `masked`, `pattern` (готовые наборы `numeric` / `alpha` / `alphanumeric` / `unicode-alpha` / `unicode-alphanumeric` или свой RegExp), `placeholder`, `divider`, `merged`, `focusAll`, `error`, `loading`, `autofocus`, цветовые пропсы и `size`; событие `finish` при полностью набранном коде, слоты `fields` / `divider` / `loader` / `default` и exposed-методы `focus()` / `blur()` / `reset()`.
+- **CdsOtpField** / **CdsOtpGroup** / **CdsOtpSeparator**: атомы поля ввода кода — через слот `fields` из них собирается своя раскладка ячеек, например группировка «3 — 3» с общей рамкой у каждой группы.
+- **useOtpInput**: headless-композабл ввода кода — раскладывает значение по ячейкам в графемах (эмодзи занимают одну ячейку), фильтрует символы по паттерну, ведёт выделение скрытого input и поддерживает IME-композицию.
+- **Темы**: новые темы `lumaLight` / `lumaDark` — брендовые токены (`brand-primary*` / `brand-secondary*`) в красной гамме логотипа Luma (`#C71B3C` / `#D2154B`), остальные значения наследуются от базовых тем `cdsLight` / `cdsDark`. Всего пакет теперь поставляет восемь готовых тем.
+- **CdsDrawer**: проп `scrim` (`boolean | string`) — отключает затемнение под выезжающей панелью или задаёт его цвет.
+- **CdsDrawer**: проп `persistent` — клик по затемнению и Esc не закрывают панель, только `v-model`.
+- **CdsDrawer**: проп `width` — ширина панели в px, макет сдвигает контент ровно на неё.
+- **CdsDrawer**: свайпы у выезжающей панели — открытие от края экрана и закрытие жестом (отключаются пропом `touchless`).
+- **CdsDrawer**: фоновое изображение — проп `image` и слот `image`.
 
 ### Улучшения
 
@@ -272,6 +289,7 @@ _TBD_
 - **Темы**: базовый шрифт изменён с Arial на PT Root UI VF (переменный шрифт) во всех темах — Cds, B2b, Promo (светлые и тёмные варианты).
 - **Сборка**: ESM-бандл сохраняет модульную структуру, а CSS каждого компонента подключается его же чанком — теперь `createCds({ components: { CdsButton } })` кладёт в бандл приложения только используемые компоненты и их стили (в CDS 3 стили подключались одним общим файлом). Гайд — `docs/treeshaking.md`.
 - **CdsAutocomplete** / **CdsCombobox**: поисковое поле по умолчанию получает атрибут `autocomplete="off"` — браузерный автофилл больше не перекрывает выпадающее меню компонента; поведение переопределяется пропом `autocomplete` (включая режим `suppress`).
+- **CdsDrawer**: выезжающая панель с затемнением забирает фокус при открытии и удерживает Tab внутри (пропы `retainFocus` / `captureFocus`), при закрытии фокус возвращается на прежний элемент.
 
 ### Исправления
 
@@ -280,10 +298,15 @@ _TBD_
 - **CdsSelect** / **CdsAutocomplete** / **CdsCombobox**: при включённом `hide-no-data` уже открытое меню закрывается, когда результат фильтрации пустеет — в CDS 3 под полем оставалась пустая полоса меню без списка.
 - **useColor**: фон, заданный именованным алиасом палитры (`red`, `neutral` и т.д. с `aliasPath: 'surface'`), теперь также подставляет класс `.cds-theme-on-inverse` — ранее ветка авто-контраста не срабатывала для алиасов, так как их резолвленное значение (`rgb(var(--…))`) не проходило проверку `isParsableColor`. Парный токен `content-inverse` переключается вместе с темой: в тёмной теме это исправление решает проблему контраста уверенно (было ~1.2–2.0, стало ~7.4–12.8), а в светлой теме — осознанный компромисс: на среднетоновых оттенках белый текст даёт ~3.5 вместо ~4.3, поэтому фоны на алиасах `surface` не стоит использовать под длинный текст.
 - **CdsFooter** / **CdsToolbar**: проп `bgColor` теперь красит фон, а `color` — текст; оба компонента дополнительно получили полноценную поддержку цвета текста. Ранее `color` красил фон, а объявленный `bgColor` не был подключён и не влиял на отображение.
+- **CdsTextArea**: в размере `md` строки слипались (интерлиньяж был равен размеру шрифта), а при `auto-grow` с `rows="1"` контрол получал высоту меньше минимальной высоты поля и текст прижимался к верху — интерлиньяж выровнен по токену, минимум поля учитывается в расчёте высоты.
+- **CdsLayout**: корень макета больше не обрезает содержимое (`overflow: hidden`) и не становится скролл-контейнером — `position: sticky` внутри макета снова прилипает к прокручиваемой странице (например, закреплённая шапка `CdsTable` со `sticky`).
+- **CdsDrawer**: закрытая и выезжающая панели в макете позиционируются `fixed` и не создают горизонтальную прокрутку страницы; на время выезда обычной панели на `body` ставится класс `cds-body--drawer-toggle` (`overflow-x: hidden`). Выезжающая панель на прокрученной странице теперь открывается в видимой области, а не у верха макета.
+- **CdsFooter**: подвал, скрытый через `v-model="false"` и не закреплённый в макете, получает `display: none` и больше не удлиняет прокрутку страницы.
 
 ### Устаревшее
 
 - **CdsNotificationAlert**: обёртка-тост перенесена из CDS 3 как временный мост на `CdsToast` — работает в 4.x (внутри `CdsNotification` с `variant="important"`, вертикальный стек уведомлений как в CDS 3), в dev-консоли выводит `[CDS UPGRADE]` и будет удалена в 5.x — см. [Migration Guide](/docs/getting-started-migration-guide--docs).
+- **CdsStages**: компонент помечен deprecated — публичный API не изменился и шкала работает во всей ветке 4.x, но в dev-консоли выводит `[CDS UPGRADE]`, а в 5.0 будет удалена. Замена — `CdsSteps` без пропа `interactive`: шаги некликабельны, а шапка без `items` работает как трекер хода процесса (проп `vertical` — для вертикального варианта); учтите, что вид отличается — стрелочная лента против индикаторов с линией прогресса. См. [Migration Guide](/docs/getting-started-migration-guide--docs).
 
 ---
 

package/MIGRATION.md

@@ -4,7 +4,7 @@
 Этот документ — **живой** migration guide: записи добавляются по мере появления
 breaking-изменений в alpha/beta релизах CDS 4.
 
-> Версии: CDS 3 — `3.10.1` (стабильная), CDS 4 — `4.0.0-alpha.1` (в разработке).
+> Версии: CDS 3 — `3.10.1` (стабильная), CDS 4 — `4.0.0-alpha.4` (в разработке).
 
 ## Как читать этот документ
 
@@ -287,6 +287,46 @@ createCds({
 
 <!-- entry-meta: id=icons-createicons-factory; severity=new; component= -->
 
+### Иконки отправки `send-*` сведены к `send` и `send-fill`
+
+> ⚠️ **BREAKING** — `send-right` / `send-right-fill` переименованы, остальные направления удалены.
+
+В CDS 3 (3.12.0) иконка отправки шла в четырёх направлениях, каждое в
+контурном и залитом варианте. Это одна и та же иконка, повёрнутая на 90°,
+поэтому в CDS 4 осталась одна пара: `send` и `send-fill` (самолётик
+смотрит вправо). Во всех iconpack'ах (`cds`, `carbon`, `lucide`, `mdi`,
+`phosphor`, `remix`) они лежат под этими же именами.
+
+| CDS 3                                              | CDS 4       |
+| -------------------------------------------------- | ----------- |
+| `send-right`                                       | `send`      |
+| `send-right-fill`                                  | `send-fill` |
+| `send-up`, `send-down`, `send-left`                | — удалены   |
+| `send-up-fill`, `send-down-fill`, `send-left-fill` | — удалены   |
+
+**Было (CDS 3):**
+
+```vue
+<!-- CDS 3 -->
+<CdsIcon name="send-right" />
+<CdsIcon name="send-up-fill" />
+```
+
+**Стало (CDS 4):**
+
+```vue
+<!-- CDS 4 -->
+<CdsIcon icon="send" />
+<CdsIcon icon="send-fill" />
+```
+
+**Действие:** заменить `send-right` → `send` и `send-right-fill` → `send-fill`.
+Остальные направления заменить на `send` / `send-fill`; если направление
+принципиально, повернуть иконку через CSS (`transform: rotate(…)`).
+Поиск: `grep -rnE "send-(up|down|left|right)(-fill)?|IconSend(Up|Down|Left|Right)" src/`.
+
+<!-- entry-meta: id=icons-send-directions-to-send; severity=breaking; component= -->
+
 ---
 
 <a id="3-пропсы"></a>
@@ -400,7 +440,7 @@ import '@central-design-system/components/styles';
 
 ```ts
 // CDS 3
-import '@central-design-system/components/css';
+import '@central-design-system/components/dist/cds.css';
 import { createCds } from '@central-design-system/components';
 
 app.use(createCds());
@@ -415,7 +455,7 @@ app.use(createCds());
 
 ```ts
 // CDS 4 — временно включить легаси-утилиты на период миграции
-import '@central-design-system/components/css';
+import '@central-design-system/components/styles';
 import '@central-design-system/components/styles/legacy';
 import { createCds } from '@central-design-system/components';
 
@@ -450,10 +490,10 @@ app.use(createCds({
 
 ```vue
 <!-- CDS 4 — Tailwind v4 + CDS-токены как утилиты -->
-<div class="flex flex-col p-400 text-surface-primary">…</div>
+<div class="flex flex-col p-4 text-surface-primary">…</div>
 ```
 
-**Действие:** установить Tailwind CSS v4 по [официальной документации](https://tailwindcss.com/) и подключить конфигурацию `@central-design-system/components/styles/tailwind` — она расширяет тему Tailwind токенами CDS (`bg-surface-*`, `text-content-*`, `p-400`, `rounded-200`, …) и автоматически реагирует на смену темы. Стандартные Tailwind-утилиты (`p-4`, `text-blue-500`) остаются доступны параллельно.
+**Действие:** установить Tailwind CSS v4 по [официальной документации](https://tailwindcss.com/) и подключить конфигурацию `@central-design-system/components/styles/tailwind` — она расширяет тему Tailwind токенами CDS (`bg-surface-*`, `text-content-*`, `rounded-200`, …) и автоматически реагирует на смену темы. Отступы пишутся стандартной числовой шкалой Tailwind (`p-4`, `gap-2`) — шкала отступов CDS с ней совпадает.
 
 <!-- entry-meta: id=styles-tailwind-v4-integration; severity=new; component= -->
 
@@ -576,9 +616,10 @@ _Пока изменений нет. Записи будут добавлять
 | `CdsCard`        | ⚠️ удалены `interactive` / `selected`                                                      | [CdsCard](#cdscard)               |
 | `CdsCheckbox`    | ⚠️ удалён `CdsCheckboxGroup`; ⚠️ изменён exposed-API                                       | [CdsCheckbox](#cdscheckbox)       |
 | `CdsContentSwitcher` | ⚠️ Компонент удалён → `CdsTabs` / `CdsTab`                                             | [CdsContentSwitcher](#cdscontentswitcher) |
+| `CdsDrawer`      | ⚠️ `v-model` управляет видимостью и на широком экране; синхронизация с шириной экрана     | [CdsDrawer](#cdsdrawer)           |
 | `CdsForm`        | ⚠️ изменён exposed-API — убраны обёртки `form` / `formRef`                                 | [CdsForm](#cdsform)               |
 | `CdsIcon`        | ⚠️ удалён deprecated `invertColor` → цветовые пропсы `color` / `baseColor` / `textColor`   | [CdsIcon](#cdsicon)               |
-| `CdsList`        | ⚠️ удалён `invertColor`; `CdsListItem` — удалён `isClickable` (→ `link`) и изменён exposed-API; `CdsListGroup` — удалён слот `title` и изменён exposed-API; payload `click:open`/`click:select` без `event` | [CdsList](#cdslist)               |
+| `CdsList`        | ⚠️ удалён `invertColor`; `CdsListItem` — удалён `isClickable` (→ `link`) и изменён exposed-API; `CdsListGroup` — удалён слот `title`, проп `title` стал текстом активатора (статичная подпись → `CdsListSubheader`), изменён exposed-API; payload `click:open`/`click:select` без `event` | [CdsList](#cdslist)               |
 | `CdsModal`       | ⚠️ удалены `loading` и `dismissBtn`; ⚠️ изменён exposed-API                                | [CdsModal](#cdsmodal)             |
 | `CdsNotification` | 🔁 `status="error"`→`"danger"`; ⚠️ удалён `customIcon`; ✨ `variant="flat"`, тень у `important`, `bgColor`/`textColor` | [CdsNotification](#cdsnotification) |
 | `CdsNotificationAlert` | 🟠 Мост миграции на `CdsToast`; внутри `CdsNotification` (`variant="important"`); будет удалён | [CdsNotificationAlert](#cdsnotificationalert) |
@@ -587,13 +628,14 @@ _Пока изменений нет. Записи будут добавлять
 | `CdsProgress`    | 🔁 Переименован в `CdsProgressBar`; ✨ новые пропсы стилизации                              | [CdsProgress](#cdsprogress)       |
 | `CdsSlideGroup`  | 🔁 `prependIcon`/`appendIcon`→`prevIcon`/`nextIcon` (новая система иконок)                  | [CdsSlideGroup](#cdsslidegroup)   |
 | `CdsSlideView`   | ⚠️ дефолты иконок стрелок `chevron-left`/`chevron-right`→`prev`/`next` (новая система иконок) | [CdsSlideView](#cdsslideview)     |
+| `CdsStages`      | 🟠 Помечен deprecated → `CdsSteps` без `interactive`; будет удалён в 5.0                    | [CdsStages](#cdsstages)           |
 | `CdsStatus`      | 🔁 значение `status="error"`→`"danger"`; ⚠️ булев `icon`→`variant="text"`                   | [CdsStatus](#cdsstatus)           |
 | `CdsSteps`       | ⚠️ дефолт `interactive` изменён `true`→`false`; ✨ проп `items`, контентная часть и кнопки навигации | [CdsSteps](#cdssteps)             |
 | `CdsTabsV2`      | 🔁 Переименован в `CdsTabs`; 🔁 `prependIcon`/`appendIcon`→`prevIcon`/`nextIcon`; ✨ новые пропсы | [CdsTabsV2](#cdstabsv2)           |
 | `CdsTag`         | 🔁 `remove`→`click:close`; ⚠️ удалён слот `text`; иконки → `IconValue`; ✨ новые пропсы | [CdsTag](#cdstag)                 |
 | `CdsTextArea`    | ⚠️ удалён `limit`; ⚠️ изменён exposed-API; | [CdsTextArea](#cdstextarea)       |
-| `CdsTextInput`   | ⚠️ удалён `limit`; ⚠️ удалён `persistentMessages`; ⚠️ изменён exposed-API; иконки → `IconValue` | [CdsTextInput](#cdstextinput)     |
-| `CdsTooltip`     | ⚠️ hover на контент закрывает подсказку; интерактивный контент — через новый проп `interactive`; ⚠️ удалён `hideArrow`/«хвостик»; изменён exposed-API | [CdsTooltip](#cdstooltip)         |
+| `CdsTextInput`   | ⚠️ удалён `limit`; ⚠️ удалён `persistentMessages`, `messages` теперь видны всегда; ⚠️ изменён exposed-API; иконки → `IconValue` | [CdsTextInput](#cdstextinput)     |
+| `CdsTooltip`     | ⚠️ hover на контент закрывает подсказку; интерактивный контент — через новый проп `interactive`; изменён exposed-API | [CdsTooltip](#cdstooltip)         |
 | `CdsContainer`   | ⚠️ Компонент удален;                                                                       | [CdsContainer](#cdscontainer)     |
 
 ### CdsNotification
@@ -934,9 +976,9 @@ const selected = ref(['first']);
 
 <template>
   <div class="w-full">
-    <CdsLabel class="mb-100">Заголовок группы чекбоксов</CdsLabel>
-    <CdsDescription class="mb-100">Вспомогательное описание</CdsDescription>
-    <div class="flex flex-col gap-200">
+    <CdsLabel class="mb-1">Заголовок группы чекбоксов</CdsLabel>
+    <CdsDescription class="mb-1">Вспомогательное описание</CdsDescription>
+    <div class="flex flex-col gap-2">
       <CdsCheckbox v-model="selected" label="Значение чекбокса 1" hide-details value="first" />
       <CdsCheckbox v-model="selected" label="Значение чекбокса 2" hide-details value="second" />
       <CdsCheckbox v-model="selected" label="Значение чекбокса 3" hide-details value="third" />
@@ -1028,6 +1070,45 @@ const model = ref('ru');
 
 <!-- entry-meta: id=cdscontentswitcher-removed; severity=breaking; component=CdsContentSwitcher -->
 
+### CdsDrawer
+
+#### `v-model` управляет видимостью панели и на широком экране
+
+> ⚠️ **BREAKING** — `false` больше не игнорируется на экранах от 1056 px.
+
+**Было (CDS 3):**
+
+```vue
+<!-- CDS 3 -->
+<script setup>
+const drawer = ref(false); // для мобильной кнопки-бургера
+</script>
+
+<template>
+  <!-- на широком экране панель видна при любом значении drawer -->
+  <CdsDrawer v-model="drawer">…</CdsDrawer>
+</template>
+```
+
+**Стало (CDS 4):**
+
+```vue
+<!-- CDS 4 -->
+<script setup>
+// null — панель сама открыта на широком экране и закрыта на узком
+const drawer = ref<boolean | null>(null);
+</script>
+
+<template>
+  <!-- false скрывает панель на любой ширине и освобождает место в макете -->
+  <CdsDrawer v-model="drawer">…</CdsDrawer>
+</template>
+```
+
+**Действие:** если `v-model` обычной панели (без `permanent` / `temporary`) стартует с `false` в расчёте на то, что на десктопе панель всё равно видна, — заменить начальное значение на `null` (или убрать `v-model`) или на `true`. При переходе через 1056 px панель теперь сама меняет `v-model` (закрывается при сужении, открывается при расширении) — если это мешает, добавить `disable-resize-watcher`. `permanent` на узком экране теперь занимает место в макете, а не накрывает контент. Поиск: `grep -rnE "<CdsDrawer[^>]*(v-model|:model-value)" src/`.
+
+<!-- entry-meta: id=cdsdrawer-v-model-controls-visibility; severity=breaking; component=CdsDrawer -->
+
 ### CdsForm
 
 #### Изменён exposed-API — убраны обёртки `form` / `formRef`
@@ -1625,6 +1706,32 @@ const value = ref(35);
 
 <!-- entry-meta: id=cdsslideview-arrow-icons-iconvalue; severity=breaking; component=CdsSlideView -->
 
+### CdsStages
+
+#### Компонент `CdsStages` помечен deprecated — переходите на `CdsSteps`
+
+> 🟠 **DEPRECATED** — публичный API компонента не изменился (`items`, `current`, `finished`, exposed `isCurrent` / `isFinished` работают как в CDS 3), но сценарий полностью закрывает `CdsSteps`, поэтому новый код на `CdsStages` писать не нужно. Компонент остаётся рабочим во всей ветке 4.x и будет удалён в 5.0.
+
+**Было (CDS 3):**
+
+```html
+<!-- CDS 3 -->
+<CdsStages :items="stages" :current="current" :finished="finished" />
+```
+
+**Стало (CDS 4):**
+
+```html
+<!-- CDS 4 — шапка степпера без items работает как трекер статуса -->
+<CdsSteps :model-value="current">
+  <CdsStepsItem v-for="stage in stages" :key="stage.value" :value="stage.value" :title="stage.title" :error="stage.error" />
+</CdsSteps>
+```
+
+**Действие:** `CdsStages` продолжает работать в 4.x, но в dev-консоли выводит `[CDS UPGRADE] 'CdsStages' is deprecated, use 'CdsSteps' instead.` (см. `deprecate()` в `src/utils/dom/console.ts`). Переходите на `CdsSteps`: без пропа `interactive` шаги некликабельны (дефолт `false`), `readonly` отключает переходы принудительно, а шапка без `items` рендерится без контентной части и кнопок навигации. Учтите, что вид отличается: `CdsStages` — стрелочная лента, `CdsSteps` — индикаторы с линией прогресса; для вертикального трекера есть проп `vertical`. Поиск: `grep -rnE "CdsStages|cds-stages" src/`.
+
+<!-- entry-meta: id=cdsstages-deprecated-use-cdssteps; severity=deprecation; component=CdsStages -->
+
 ### CdsStatus
 
 #### Значение `status="error"` переименовано в `status="danger"`
@@ -1987,25 +2094,27 @@ area.value.controlRef;        // DOM-элемент контрола (<textarea>
 
 <!-- entry-meta: id=cdstextinput-limit-removed; severity=breaking; component=CdsTextInput -->
 
-#### Удалён пропс `persistentMessages`
+#### Удалён пропс `persistentMessages`, а `messages` видны всегда
 
-> ⚠️ **BREAKING** — в CDS 3 `persistentMessages` держал блок сообщений/подсказки под полем всегда видимым. В CDS 4 пропс удалён: для постоянного показа подсказки используйте `hint` + `persistentHint`.
+> ⚠️ **BREAKING** — роли разошлись. В CDS 3 `messages` показывались только в фокусе, а `persistentMessages` их закреплял. В CDS 4 `messages` видны **всегда**, поэтому `persistentMessages` удалён за ненадобностью, а «только в фокусе» — это отдельный пропс `hint` (с `persistentHint`, если подсказку нужно закрепить).
 
 **Было (CDS 3):**
 
 ```html
 <!-- CDS 3 -->
 <cds-text-input v-model="text" :messages="hint" persistent-messages />
+<cds-text-input v-model="text" :messages="hint" />
 ```
 
 **Стало (CDS 4):**
 
 ```html
-<!-- CDS 4 -->
-<CdsTextInput v-model="text" :hint="hint" persistent-hint />
+<!-- CDS 4 — messages видны всегда; показ по фокусу даёт hint -->
+<CdsTextInput v-model="text" :messages="hint" />
+<CdsTextInput v-model="text" :hint="hint" />
 ```
 
-**Действие:** убрать `persistent-messages`; для постоянной подсказки под полем задать `hint` и `persistent-hint`. Поиск: `grep -rnE "persistent-messages|persistentMessages" src/`.
+**Действие:** там, где стоял `persistent-messages`, достаточно удалить пропс — `messages` и так видны всегда, переносить текст в `hint` не нужно. Там, где `messages` использовались **без** него, перенести текст в `hint`: иначе подсказка, которая раньше появлялась по фокусу, после апгрейда будет висеть постоянно — код не сломается, но поле станет выглядеть иначе. Поиск: `grep -rnE "persistent-messages|persistentMessages|:messages|messages=" src/`. Начиная с CDS 3.11.0 оба случая предупреждают в консоли (`[CDS UPGRADE]`), а `hint` / `persistent-hint` там уже работают — переписать можно до апгрейда.
 
 <!-- entry-meta: id=cdstextinput-persistentmessages-removed; severity=breaking; component=CdsTextInput -->
 
@@ -2076,36 +2185,6 @@ input.value.controlRef;        // DOM-элемент контрола (<input>)
 
 <!-- entry-meta: id=cdstooltip-interactive-prop-required; severity=breaking; component=CdsTooltip -->
 
-#### Удалён пропс `hideArrow` и направляющий «хвостик»
-
-> ⚠️ **BREAKING** — у подсказки больше нет указателя-«хвостика», а вместе с ним удалён пропс `hideArrow`.
-
-**Было (CDS 3):**
-
-```html
-<!-- CDS 3 — «хвостик» можно было скрыть через hide-arrow -->
-<cds-tooltip text="Подсказка" hide-arrow>
-  <template #activator="{ props }">
-    <cds-button v-bind="props" text="Наведи" />
-  </template>
-</cds-tooltip>
-```
-
-**Стало (CDS 4):**
-
-```html
-<!-- CDS 4 — «хвостик» удалён из вёрстки, пропса hideArrow нет -->
-<CdsTooltip text="Подсказка">
-  <template #activator="{ props }">
-    <CdsButton v-bind="props" text="Наведи" />
-  </template>
-</CdsTooltip>
-```
-
-**Действие:** удалить `hide-arrow` / `hideArrow` из использований `CdsTooltip`. Поиск: `grep -rnE "cds-tooltip[^>]*hide-arrow|CdsTooltip[^>]*hideArrow" src/`.
-
-<!-- entry-meta: id=cdstooltip-hidearrow-removed; severity=breaking; component=CdsTooltip -->
-
 #### Изменён exposed-API
 
 > ⚠️ **BREAKING** — вместо `id` / `overlay` компонент отдаёт элементы и методы оверлея напрямую.
@@ -2155,13 +2234,13 @@ tip.value.updateLocation?.(e);   // пересчёт позиции
 
 ```html
 <!-- CDS 4 — обычный div + утилиты Tailwind и токены CDS -->
-<div class="rounded-200 bg-surface-primary p-400">
-  <div class="h6 mb-100">Заголовок контейнера</div>
+<div class="rounded-200 bg-surface-primary p-4">
+  <div class="h6 mb-1">Заголовок контейнера</div>
   <p>Используется в качестве элемента, где вся область контейнера — это интерактивное состояние.</p>
 </div>
 ```
 
-**Действие:** заменить `CdsContainer` / `<div class="cds-container-default …">` обычным `<div>` с утилитарными классами. В CDS 3 этот же совет давался прямо в сторибуке (`CdsContainer/stories/features.stories.ts`, story «Обычный контейнер»/«Вложенные контейнеры»), а в CDS 4 он тем более уместен — доступны Tailwind v4 и design-токены как утилиты (`bg-surface-*`, `p-400`, `rounded-200`, см. раздел «Интеграция с Tailwind CSS v4»). Поиск: `grep -rnE "CdsContainer|cds-container|cds-container-default" src/`.
+**Действие:** заменить `CdsContainer` / `<div class="cds-container-default …">` обычным `<div>` с утилитарными классами. В CDS 3 этот же совет давался прямо в сторибуке (`CdsContainer/stories/features.stories.ts`, story «Обычный контейнер»/«Вложенные контейнеры»), а в CDS 4 он тем более уместен — доступны Tailwind v4 и design-токены как утилиты (`bg-surface-*`, `rounded-200`, см. раздел «Интеграция с Tailwind CSS v4»). Поиск: `grep -rnE "CdsContainer|cds-container|cds-container-default" src/`.
 
 #### Выбираемый и множественный контейнер → `CdsCard` + `CdsCardGroup`
 
@@ -2201,7 +2280,7 @@ const items = [1, 2, 3];
 </script>
 
 <template>
-  <CdsCardGroup v-model="selected" required class="gap-400">
+  <CdsCardGroup v-model="selected" required class="gap-4">
     <CdsCard
       v-for="item in items"
       :key="item"

package/dist/browser/chunks/cdsLegacy-VUz8RzDN.js

@@ -0,0 +1,120 @@
+import { h as L, resolveComponent as w } from "vue";
+const R = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), A = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), I = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), S = /[^\p{L}\d]+/giu, _ = "$1\0$2", E = "";
+function i(r) {
+  let e = r.trim();
+  e = e.replace(R, _).replace(A, _), e = e.replace(S, "\0");
+  let c = 0, a = e.length;
+  for (; e.charAt(c) === "\0"; ) c++;
+  if (c === a) return [];
+  for (; e.charAt(a - 1) === "\0"; ) a--;
+  return e.slice(c, a).split("\0");
+}
+function T(r) {
+  const e = i(r);
+  for (let c = 0; c < e.length; c++) {
+    const a = e[c], l = I.exec(a);
+    if (l) {
+      const u = l.index + (l[1] ?? l[2]).length;
+      e.splice(c, 1, a.slice(0, u), a.slice(u));
+    }
+  }
+  return e;
+}
+function h(r, e) {
+  const [c, a, l] = s(r, e);
+  return c + a.map(m(e == null ? void 0 : e.locale)).join((e == null ? void 0 : e.delimiter) ?? " ") + l;
+}
+function j(r, e) {
+  const [c, a, l] = s(r, e), u = m(e == null ? void 0 : e.locale), f = d(e == null ? void 0 : e.locale), t = e != null && e.mergeAmbiguousCharacters ? x(u, f) : g(u, f);
+  return c + a.map((n, C) => C === 0 ? u(n) : t(n, C)).join((e == null ? void 0 : e.delimiter) ?? "") + l;
+}
+function F(r, e) {
+  const [c, a, l] = s(r, e), u = m(e == null ? void 0 : e.locale), f = d(e == null ? void 0 : e.locale), t = e != null && e.mergeAmbiguousCharacters ? x(u, f) : g(u, f);
+  return c + a.map(t).join((e == null ? void 0 : e.delimiter) ?? "") + l;
+}
+function k(r, e) {
+  return P(r, { delimiter: "_", ...e });
+}
+function P(r, e) {
+  const [c, a, l] = s(r, e), u = m(e == null ? void 0 : e.locale), f = d(e == null ? void 0 : e.locale);
+  return c + a.map(x(u, f)).join((e == null ? void 0 : e.delimiter) ?? " ") + l;
+}
+function y(r, e) {
+  const [c, a, l] = s(r, e);
+  return c + a.map(d(e == null ? void 0 : e.locale)).join((e == null ? void 0 : e.delimiter) ?? "_") + l;
+}
+function $(r, e) {
+  return h(r, { delimiter: ".", ...e });
+}
+function N(r, e) {
+  return h(r, { delimiter: "-", ...e });
+}
+function X(r, e) {
+  return h(r, { delimiter: "/", ...e });
+}
+function D(r, e) {
+  const [c, a, l] = s(r, e), u = m(e == null ? void 0 : e.locale), f = d(e == null ? void 0 : e.locale), t = x(u, f);
+  return c + a.map((n, C) => C === 0 ? t(n) : u(n)).join((e == null ? void 0 : e.delimiter) ?? " ") + l;
+}
+function v(r, e) {
+  return h(r, { delimiter: "_", ...e });
+}
+function B(r, e) {
+  return P(r, { delimiter: "-", ...e });
+}
+function m(r) {
+  return r === !1 ? (e) => e.toLowerCase() : (e) => e.toLocaleLowerCase(r);
+}
+function d(r) {
+  return r === !1 ? (e) => e.toUpperCase() : (e) => e.toLocaleUpperCase(r);
+}
+function x(r, e) {
+  return (c) => `${e(c[0])}${r(c.slice(1))}`;
+}
+function g(r, e) {
+  return (c, a) => {
+    const l = c[0];
+    return (a > 0 && l >= "0" && l <= "9" ? "_" + l : e(l)) + r(c.slice(1));
+  };
+}
+function s(r, e = {}) {
+  const c = e.split ?? (e.separateNumbers ? T : i), a = e.prefixCharacters ?? E, l = e.suffixCharacters ?? E;
+  let u = 0, f = r.length;
+  for (; u < r.length; ) {
+    const t = r.charAt(u);
+    if (!a.includes(t)) break;
+    u++;
+  }
+  for (; f > u; ) {
+    const t = f - 1, n = r.charAt(t);
+    if (!l.includes(n)) break;
+    f = t;
+  }
+  return [r.slice(0, u), c(r.slice(u, f)), r.slice(f)];
+}
+const U = {
+  component: (r) => {
+    const { icon: e, tag: c, ...a } = r, l = L(w(`Icon${F(e)}`), { key: e });
+    return L(c, a, l);
+  }
+}, G = {
+  icons: U
+};
+export {
+  P as a,
+  y as b,
+  j as c,
+  $ as d,
+  k as e,
+  X as f,
+  v as g,
+  i as h,
+  T as i,
+  G as j,
+  N as k,
+  U as l,
+  h as n,
+  F as p,
+  D as s,
+  B as t
+};

package/dist/browser/chunks/useIcons.component-Df4MSurB.js

@@ -0,0 +1,102 @@
+import { defineComponent as u, createVNode as i, mergeProps as o } from "vue";
+const f = [String, Function, Object, Array], g = Symbol.for("cds:icons");
+function s(n, l) {
+  return (t) => Object.keys(n).reduce((c, e) => {
+    const r = typeof n[e] == "object" && n[e] != null && !Array.isArray(n[e]) ? n[e] : { type: n[e] };
+    return t && e in t ? c[e] = {
+      ...r,
+      default: t[e]
+    } : c[e] = r, l && !c[e].source && (c[e].source = l), c;
+  }, {});
+}
+const a = s({
+  icon: {
+    type: f
+  },
+  tag: {
+    type: [String, Object, Function],
+    required: !0
+  }
+}, "icon"), m = /* @__PURE__ */ u({
+  name: "ComponentIcon",
+  props: a(),
+  setup(n, {
+    slots: l
+  }) {
+    return () => {
+      const t = n.icon;
+      return i(n.tag, null, {
+        default: () => {
+          var c;
+          return [n.icon ? i(t, null, null) : (c = l.default) == null ? void 0 : c.call(l)];
+        }
+      });
+    };
+  }
+}), I = /* @__PURE__ */ u({
+  name: "SvgIcon",
+  inheritAttrs: !1,
+  props: {
+    ...a(),
+    /**
+     * The `viewBox` of the rendered `<svg>`. Defaults to a 24×24 coordinate system.
+     * Icon sets authored in a different coordinate system (e.g. the legacy CDS 16×16 set)
+     * can override it.
+     */
+    viewBox: {
+      type: String,
+      default: "0 0 24 24"
+    },
+    /**
+     * The `fill-rule` applied to the rendered paths. Left unset by default (browser default `nonzero`).
+     * Sets whose icons rely on cut-outs/holes can opt into `evenodd`.
+     */
+    fillRule: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(n, {
+    attrs: l
+  }) {
+    return () => i(n.tag, o(l, {
+      style: null
+    }), {
+      default: () => [i("svg", {
+        class: "cds-icon__svg",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: n.viewBox,
+        role: "img",
+        "aria-hidden": "true"
+      }, [Array.isArray(n.icon) ? n.icon.map((t) => Array.isArray(t) ? i("path", {
+        d: t[0],
+        "fill-opacity": t[1],
+        "fill-rule": n.fillRule
+      }, null) : i("path", {
+        d: t,
+        "fill-rule": n.fillRule
+      }, null)) : i("path", {
+        d: n.icon,
+        "fill-rule": n.fillRule
+      }, null)])]
+    });
+  }
+});
+a();
+const S = /* @__PURE__ */ u({
+  name: "ClassIcon",
+  props: a(),
+  setup(n) {
+    return () => i(n.tag, {
+      class: n.icon
+    }, null);
+  }
+});
+export {
+  m as C,
+  g as I,
+  I as S,
+  S as a,
+  f as b,
+  s as p
+};