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

package/CHANGELOG.md

@@ -153,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

@@ -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" />
@@ -2127,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`
 
@@ -2173,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"