@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.6

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`.
 
 ### 🧩 Новые компоненты
 
@@ -148,7 +153,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` для очистки запроса после выбора.

package/MIGRATION.md

@@ -400,7 +400,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 +415,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 +450,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= -->
 
@@ -578,7 +578,7 @@ _Пока изменений нет. Записи будут добавлять
 | `CdsContentSwitcher` | ⚠️ Компонент удалён → `CdsTabs` / `CdsTab`                                             | [CdsContentSwitcher](#cdscontentswitcher) |
 | `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) |
@@ -592,8 +592,8 @@ _Пока изменений нет. Записи будут добавлять
 | `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 +934,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" />
@@ -1987,25 +1987,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 +2078,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 +2127,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 +2173,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"