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

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`.
 
 ### 🧩 Новые компоненты
 
@@ -258,6 +263,7 @@ _TBD_
 - **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`. Всего пакет теперь поставляет восемь готовых тем.
 
 ### Улучшения
 

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.3` (в разработке).
+> Версии: CDS 3 — `3.10.1` (стабильная), CDS 4 — `4.0.0-alpha.4` (в разработке).
 
 ## Как читать этот документ
 
@@ -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
@@ -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` компонент отдаёт элементы и методы оверлея напрямую.

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
+};