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

package/llms/llms-migration.txt

@@ -1,8 +1,8 @@
-# Central Design System — миграция CDS 3 → CDS 4
+# Central Design System — CDS 3 → CDS 4 migration
 
-> Версия: 4.0.0-alpha.4
-> Полный гайд перехода: breaking-изменения, переименования, deprecations и шаги миграции.
-> Сгенерировано автоматически (`bun run generate:meta` → `bun run generate:llms`). Не редактировать вручную.
+> Version: 4.0.0-alpha.5
+> The full migration guide (currently in Russian): breaking changes, renames, deprecations, and migration steps.
+> Generated automatically (`bun run generate:meta` → `bun run generate:llms`). Do not edit manually.
 
 ---
 
@@ -408,7 +408,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());
@@ -423,7 +423,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';
 
@@ -458,10 +458,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= -->
 
@@ -586,7 +586,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) |
@@ -600,8 +600,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
@@ -1994,25 +1994,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 -->
 
@@ -2082,36 +2084,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` компонент отдаёт элементы и методы оверлея напрямую.

package/llms/llms-tokens.txt

@@ -1,28 +1,28 @@
-# Central Design System (CDS 4) — токены и темы
+# Central Design System (CDS 4) — tokens and themes
 
-> Версия: 4.0.0-alpha.4
-> Три уровня токенов: палитра-примитивы, цветовые токены тем (`--cds-color-*`) и локальные переменные компонентов.
-> Сгенерировано автоматически (`bun run generate:meta` → `bun run generate:llms`). Не редактировать вручную.
+> Version: 4.0.0-alpha.5
+> Three token levels: the primitive palette, theme color tokens (`--cds-color-*`), and local component variables.
+> Generated automatically (`bun run generate:meta` → `bun run generate:llms`). Do not edit manually.
 
 ---
 
-# Темы и глобальные цветовые токены (уровень 2)
+# Themes and global color tokens (level 2)
 
-> Сгенерировано из `src/themes/*.ts` скриптом `bun run generate:skill`. Не редактировать вручную.
+> Generated from `src/themes/*.ts` by `bun run generate:skill`. Do not edit manually.
 
-Каждая тема определяет набор цветов. В рантайме они становятся CSS-переменными
-`--cds-color-<имя>` (RGB-триплетами) и используются как `rgb(var(--cds-color-<имя>))`.
-Тема выбирается при инициализации:
+Each theme defines a set of colors. At runtime they become CSS variables
+`--cds-color-<name>` (RGB triplets) and are used as `rgb(var(--cds-color-<name>))`.
+The theme is chosen at initialization:
 
 ```ts
 const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 ```
 
-Значения ниже — исходные hex из палитры уровня 1 (colors.md).
+The values below are the source hex colors from the level-1 palette (colors.md).
 
-## cdsLight (светлая)
+## cdsLight (light)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#ECEEF2` |
 | `--cds-color-surface-primary` | `#FFFFFF` |
@@ -141,9 +141,9 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#4D98F9` |
 | `--cds-color-brand-primary` | `#2978D4` |
 
-## cdsDark (тёмная)
+## cdsDark (dark)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#33373F` |
 | `--cds-color-surface-primary` | `#272A30` |
@@ -262,9 +262,9 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#1D4790` |
 | `--cds-color-brand-primary` | `#417FE1` |
 
-## b2bLight (светлая)
+## b2bLight (light)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#FFFFFF` |
 | `--cds-color-surface-primary` | `#FFFFFF` |
@@ -383,9 +383,9 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#2B9DE9` |
 | `--cds-color-brand-primary` | `#1D7DBC` |
 
-## b2bDark (тёмная)
+## b2bDark (dark)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#33373F` |
 | `--cds-color-surface-primary` | `#272A30` |
@@ -504,9 +504,9 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#014F77` |
 | `--cds-color-brand-primary` | `#0287CA` |
 
-## lumaLight (светлая)
+## lumaLight (light)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#ECEEF2` |
 | `--cds-color-surface-primary` | `#FFFFFF` |
@@ -625,15 +625,15 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#E0476E` |
 | `--cds-color-brand-primary` | `#C71B3C` |
 
-## lumaDark (тёмная)
+## lumaDark (dark)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
-| `--cds-color-surface-secondary` | `#33373F` |
-| `--cds-color-surface-primary` | `#272A30` |
+| `--cds-color-surface-secondary` | `#24262C` |
+| `--cds-color-surface-primary` | `#1B1D21` |
 | `--cds-color-surface-overlay` | `#272A30CC` |
 | `--cds-color-surface-inverse` | `#DCDDE3` |
-| `--cds-color-surface-elevated` | `#33373F` |
+| `--cds-color-surface-elevated` | `#24262C` |
 | `--cds-color-status-warning-surface` | `#C9A449` |
 | `--cds-color-status-warning-line` | `#BE9737` |
 | `--cds-color-status-warning-fill-hover` | `#8A6502` |
@@ -664,7 +664,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-status-danger-fill-hover` | `#B8423D` |
 | `--cds-color-status-danger-fill` | `#822825` |
 | `--cds-color-status-danger-content` | `#FFD2CC` |
-| `--cds-color-page-primary` | `#1A1A1A` |
+| `--cds-color-page-primary` | `#16171A` |
 | `--cds-color-other-teal-surface` | `#0ABACE` |
 | `--cds-color-other-teal-line` | `#01ACBF` |
 | `--cds-color-other-teal-fill-hover` | `#007886` |
@@ -736,19 +736,19 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-content-link` | `#92BAFE` |
 | `--cds-color-content-inverse` | `#1A1A1A` |
 | `--cds-color-content-disable` | `#989DA8` |
-| `--cds-color-brand-secondary-hover` | `#650B25` |
-| `--cds-color-brand-secondary-border` | `#8A1034` |
-| `--cds-color-brand-secondary-active` | `#8A1034` |
-| `--cds-color-brand-secondary` | `#3A0715` |
+| `--cds-color-brand-secondary-hover` | `#8A1034` |
+| `--cds-color-brand-secondary-border` | `#A01639` |
+| `--cds-color-brand-secondary-active` | `#A01639` |
+| `--cds-color-brand-secondary` | `#6F0C28` |
 | `--cds-color-brand-primary-hover` | `#8A1034` |
 | `--cds-color-brand-primary-content` | `#FFD9E1` |
 | `--cds-color-brand-primary-border` | `#D2154B` |
 | `--cds-color-brand-primary-active` | `#650B25` |
 | `--cds-color-brand-primary` | `#D2154B` |
 
-## promoLight (светлая)
+## promoLight (light)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#EEEEEE` |
 | `--cds-color-surface-primary` | `#FFFFFF` |
@@ -867,9 +867,9 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#F46A5D` |
 | `--cds-color-brand-primary` | `#D1453F` |
 
-## promoDark (тёмная)
+## promoDark (dark)
 
-| Токен | Значение |
+| Token | Value |
 | --- | --- |
 | `--cds-color-surface-secondary` | `#33373F` |
 | `--cds-color-surface-primary` | `#272A30` |
@@ -990,16 +990,16 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ---
 
-# Палитра-примитивы (уровень 1)
+# Primitive palette (level 1)
 
-> Сгенерировано из `src/utils/colors.ts` скриптом `bun run generate:skill`. Не редактировать вручную.
+> Generated from `src/utils/colors.ts` by `bun run generate:skill`. Do not edit manually.
 
-Базовая палитра CDS. В продуктовом коде примитивы напрямую не используются:
-цвет задаётся пропом `color` компонента или токенами темы (themes.md).
+The base CDS palette. Product code never uses the primitives directly:
+color is set via a component's `color` prop or theme tokens (themes.md).
 
 ## red
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `red.light10` | `#FFE9E3` |
 | `red.light50` | `#FFD1C6` |
@@ -1028,7 +1028,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## chocolate
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `chocolate.light10` | `#FAEBDF` |
 | `chocolate.light50` | `#E7D9CC` |
@@ -1057,7 +1057,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## orange
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `orange.light10` | `#FEEAD9` |
 | `orange.light50` | `#FBD5B5` |
@@ -1086,7 +1086,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## yellow
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `yellow.light10` | `#FBEDBE` |
 | `yellow.light50` | `#F2DB82` |
@@ -1115,7 +1115,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## lemon
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `lemon.light10` | `#F4EFBE` |
 | `lemon.light50` | `#E6DF83` |
@@ -1144,7 +1144,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## lime
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `lime.light10` | `#EAF2C4` |
 | `lime.light50` | `#D4E490` |
@@ -1173,7 +1173,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## green
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `green.light10` | `#DCF5D0` |
 | `green.light50` | `#BCE8AB` |
@@ -1202,7 +1202,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## cyan
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `cyan.light10` | `#D4F5EC` |
 | `cyan.light50` | `#9FEBD8` |
@@ -1231,7 +1231,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## teal
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `teal.light10` | `#D4F4F7` |
 | `teal.light50` | `#A1E9E9` |
@@ -1260,7 +1260,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## sky
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `sky.light10` | `#E2EFFF` |
 | `sky.light50` | `#C3DFFF` |
@@ -1289,7 +1289,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## blue
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `blue.light10` | `#E6EEFF` |
 | `blue.light50` | `#CBDDFD` |
@@ -1318,7 +1318,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## indigo
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `indigo.light10` | `#EEECFF` |
 | `indigo.light50` | `#DDD9FC` |
@@ -1347,7 +1347,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## purple
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `purple.light10` | `#F5E9FE` |
 | `purple.light50` | `#E8D5F6` |
@@ -1376,7 +1376,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## pink
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `pink.light10` | `#F7E9FF` |
 | `pink.light50` | `#F8D1F2` |
@@ -1405,7 +1405,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## silver
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `silver.light10` | `#ECEEF2` |
 | `silver.light50` | `#DADDE2` |
@@ -1435,7 +1435,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## gray
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `gray.light10` | `#EEEEEE` |
 | `gray.light50` | `#DCDCDC` |
@@ -1468,7 +1468,7 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 
 ## alpha
 
-| Оттенок | Значение |
+| Shade | Value |
 | --- | --- |
 | `alpha.dark500` | `#272A3080` |
 | `alpha.dark400` | `#272A3066` |