v4.0.0-alpha.13

Русский

English

Русский

English

Тема

Changelog 4.x ​

4.0.0 ​

Мажорное обновление дизайн-системы. Полный гайд по переходу с CDS 3 — в Migration Guide (MIGRATION.md в составе npm-пакета).

🚀 Что нового в CDS 4 ​

  • 🤖 AI Agent Skill — библиотека поставляет готовый Agent Skill (packages/skills/cds) и машиночитаемые llms.txt / llms-full.txt, чтобы ИИ-агенты (Claude Code и др.) генерировали код на CDS без ошибок.
  • 🧩 Новая архитектура компонентов — <script setup lang="tsx"> + defineRender, пропсы через propsFactory и композицию фабрик, публичный API вынесен в api/.
  • 💨 Поддержка Tailwind CSS v4 — официальная интеграция со слоями и токенами CDS (см. Tailwind CSS v4).
  • 🖼️ Iconpacks — иконки подключаются через createIcons и пакеты иконок; можно подставить свой набор вместо жёсткого импорта.
  • 📦 Новый сборщик библиотеки — 6 бандлов из одного пайплайна: CJS, ESM, MJS, IIFE и Web Components.
  • 🎨 useColor во всех компонентах — единые цветовые пропсы color / baseColor / activeColor / textColor / bgColor позволяют перекрашивать любой компонент токенами темы, цветами из палитры и кастомными цветами.
  • ⚡ Производительность — виртуализация длинных списков и меню (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.

🧩 Новые компоненты ​

  • CdsAvatar — аватар с изображением, иконкой или инициалами в круглом контейнере, с поддержкой бейджа.
  • CdsButtonGroup — объединяет несколько CdsButton в единую группу с общим оформлением.
  • CdsButtonToggle — группа кнопок с переключаемым выбором: одиночным или множественным.
  • CdsDateInput — поле ввода даты: текстовое поле с иконкой календаря, раскрывающее CdsDatePicker в выпадающем меню; поддерживает ручной ввод, диапазон, несколько дат и выбор времени.
  • CdsFileInput — поле выбора файлов: одиночный и множественный выбор, drag-and-drop и вставка из буфера, отображение именами или чипами, размер файлов и фильтрация по типам.
  • CdsFileUpload — выделенная зона загрузки файлов с drag-and-drop (включая папки), списком файлов, фильтрацией по типам и индикатором загрузки.
  • CdsOtpInput — поле ввода одноразового кода из SMS, письма или приложения-аутентификатора: ряд ячеек поверх одного скрытого input, автозаполнение кода, вставка из буфера и событие завершения ввода.
  • CdsProgressCircle — круговой индикатор прогресса в режимах determinate и indeterminate.
  • CdsTagGroup — группа тегов с переключаемым выбором: одиночным или множественным, с горизонтальной прокруткой или переносом по строкам.
  • CdsToast — всплывающее уведомление со статусом, автозакрытием по таймеру, позиционированием и действиями. Замена CdsNotificationAlert из CDS 3.
  • CdsToastQueue — очередь тостов через v-model: лимит видимых, стратегия переполнения, сворачивание в стопку и поддержка промисов.
  • CdsVirtualScroll — виртуализация длинных списков: в DOM рендерятся только видимые элементы.

Критические изменения ​

  • CdsButton: удалён устаревший пропс invertColor — вместо него пропсы цвета color / baseColor / activeColor.
  • CdsButton: SASS-переменная $button-appearances удалена — цвета задаёт карта ролей $button-colors — см. Migration Guide.
  • CdsButton: изменён exposed-API — вместо groupItem / toggle() / isDisabled компонент отдаёт только group (контекст группы).
  • CdsButton: константа CdsButton.constants.appearances удалена — списки видов и ролей цвета дают CdsButton.constants.variants / CdsButton.constants.colors (из пакета — availableVariants / availableColorRoles) — см. Migration Guide (LDS-227).
  • CdsBadge: пропс count переименован в content, булев limited заменён числовым порогом max — см. Migration Guide.
  • CdsBadge: удалён устаревший пропс invertColor — для смены цвета используйте color / textColor — см. Migration Guide.
  • CdsBadge: изменён дефолт пропса inline (true → undefined) — без явного inline бейдж позиционируется абсолютно (location: 'top end') — см. Migration Guide.
  • CdsCheckbox: удалён компонент-обёртка CdsCheckboxGroup — группа собирается из CdsLabel / CdsDescription / CdsCheckbox с общим v-model (или через встроенный multiple) — см. Migration Guide.
  • CdsCheckbox: изменён exposed-API — вместо id / isGroup / validationRef компонент отдаёт методы валидации (validate / reset / resetValidation, isValid / isDirty / isValidating …).
  • CdsModal: удалены пропсы loading и dismissBtn (и слот dismissBtn) — лоадер и кнопку закрытия добавляйте в контент вручную — см. Migration Guide.
  • CdsModal: изменён exposed-API — вместо ссылки overlay компонент отдаёт элементы и методы оверлея (contentEl / activatorEl / rootEl / updateLocation …).
  • CdsRadioButton: компонент переименован в CdsRadioGroup (cds-radio-button → cds-radio-group) — см. Migration Guide.
  • CdsDropdown: компонент переименован в CdsSelect (богатый список с кастомным меню, множественным выбором и фильтрацией) — см. Migration Guide.
  • CdsSelect: нативный CdsSelect из CDS 3 (обёртка над <select>) удалён — нативное поведение теперь через проп native-select — см. Migration Guide.
  • CdsProgress: компонент переименован в CdsProgressBar (cds-progress → cds-progress-bar) — см. Migration Guide.
  • CdsSteps: изменён дефолт пропса interactive (true → false) — по умолчанию шаги больше не кликабельны, для переходов по клику укажите interactive — см. Migration Guide.
  • CdsTabsV2: компоненты CdsTabsV2 / CdsTabV2 переименованы в CdsTabs / CdsTab — см. Migration Guide.
  • CdsTabs: пропсы иконок стрелок прокрутки переименованы prependIcon / appendIcon → prevIcon / nextIcon.
  • CdsTooltip: контент подсказки по умолчанию получил pointer-events: none — наведение закрывает подсказку; для кликабельного контента добавьте проп interactive — см. Migration Guide.
  • CdsTooltip: изменён exposed-API (id / overlay → contentEl / activatorEl / updateLocation …).
  • CdsContainer: компонент удалён (был помечен deprecated в CDS 3) — замена: <div> с утилитарными классами, либо CdsCard, если нужна интерактивность — см. Migration Guide.
  • CdsContentSwitcher: компоненты CdsContentSwitcher / CdsContentSwitcherItem удалены (были помечены deprecated в CDS 3) — замена CdsTabs / CdsTab — см. Migration Guide.
  • CdsStatus: значение статуса error переименовано в danger (status: info / success / warning / danger / progress) — см. Migration Guide.
  • CdsStatus: булев пропс icon заменён пропсом variant (fill — заливка-бейдж, text — иконка + нейтральный текст; по умолчанию fill) — см. Migration Guide.
  • CdsNotification: значение статуса error переименовано в danger (status: info / success / warning / danger / progress) — см. Migration Guide.
  • CdsNotification: удалён пропс customIcon — своя иконка задаётся единым пропсом icon (false — скрыть) — см. Migration Guide.
  • CdsEmptyState: изменён exposed-API — компонент больше не отдаёт illustrationComponent через ref.
  • CdsAutocomplete: изменён exposed-API — убраны ref-ссылки menuRef / listRef / textInputRef; добавлены методы валидации (validate / reset / resetValidation) и search / menu через ref.
  • CdsCombobox: изменён exposed-API — убраны ref-ссылки menuRef / listRef / textInputRef; добавлены методы валидации (validate / reset / resetValidation) и доступ к search / selectionIndex через ref.
  • CdsBreadcrumbsItem: пропс text переименован в title; удалён устаревший пропс currentPage — для текущей/неактивной страницы используйте disabled (или active).
  • CdsBreadcrumbs: изменён exposed-API — компонент больше не отдаёт items / isLastItem.
  • CdsCard: удалён проп interactive — кликабельность включается пропсом link (либо автоматически при href / to или членстве в CdsCardGroup).
  • CdsCard: удалён проп selected — выбранное состояние управляется через CdsCardGroup и проп value (CSS-класс задаётся selectedClass).
  • CdsCard: событие group:selected убрано из публичного API (не задекларировано в типах / meta.json); выбор рекомендуется наблюдать через v-model на CdsCardGroup.
  • CdsDrawer: удалён устаревший пропс invertColor (и передача invertColor в scope слотов prepend / default / append) — для инверсного оформления используйте цветовые пропсы color / bgColor.
  • CdsExpandablePanel: изменён exposed-API — вместо спреда groupItem + isDisabled панель отдаёт isSelected / select / toggle; CdsExpandablePanelTitle отдаёт isSelected / toggle, CdsExpandablePanelContent больше ничего не экспонирует.
  • CdsForm: изменён exposed-API — убраны обёртки form / formRef; методы валидации (validate / reset / resetValidation) и состояние (isValid / isValidating / isDisabled / isReadonly, errors / items) доступны напрямую через ref.
  • CdsIcon: удалён устаревший пропс invertColor — для инверсного/произвольного цвета используйте цветовые пропсы color / baseColor / textColor.
  • CdsIcon: иконка резолвится через новую систему иконок (iconpacks) вместо прямого импорта из @central-design-system/icons; пропс name больше не валидируется по allowedIcons, добавлен пропс icon (IconValue) — см. Migration Guide.
  • CdsInput: удалены события click:control / mousedown:control — в публичном API базового компонента остаётся update:modelValue (клик и нажатие по области контрола теперь обрабатываются на уровне поля — CdsField / CdsTextInput).
  • CdsInput: изменён exposed-API — убраны id / isFocused / messages; компонент отдаёт состояние (isDirty / isDisabled / isReadonly / isPure / isValid / isValidating) и методы валидации (validate / reset / resetValidation).
  • CdsInput: удалён проп persistentMessages — для постоянного показа подсказки используйте persistentHint.
  • CdsInput: иконки prependIcon / appendIcon переведены на новую систему иконок (IconValue) вместо строкового имени с валидацией по allowedIcons — см. Migration Guide.
  • CdsList: удалён устаревший пропс invertColor — для инверсного/произвольного оформления используйте цветовые пропсы color / baseColor / bgColor / textColor.
  • CdsList: изменена сигнатура событий click:open / click:select — payload больше не содержит поле event ({ id, value, path }).
  • CdsListItem: удалён пропс isClickable — кликабельность включается пропсом link (либо автоматически при href / to или наличии value внутри списка).
  • CdsListItem: изменён exposed-API — вместо isActive / isIndeterminate компонент отдаёт isActivated / activate (плюс isSelected / select / isGroupActivator и контексты list / root).
  • CdsListGroup: удалён слот title и изменён смысл пропа title — теперь это текст кликабельного активатора (статичная подпись группы делается компонентом CdsListSubheader); изменён exposed-API — вместо id / isExpandable группа отдаёт только isOpen.
  • CdsMenu: изменён exposed-API — вместо ref-ссылки overlay и счётчика openChildren компонент отдаёт элементы и методы оверлея (contentEl / activatorEl / rootEl / targetEl / updateLocation / animateClick …).
  • CdsOverlay: изменён exposed-API — убрана ссылка localTop; добавлены элементы и метод оверлея (rootEl / scrimEl / targetEl / activatorRef / targetRef / animateClick) наряду с прежними activatorEl / contentEl / globalTop / updateLocation.
  • CdsSlideGroup: пропсы иконок стрелок переименованы prependIcon / appendIcon → prevIcon / nextIcon и переведены на новую систему иконок (IconValue); дефолтные имена изменены arrow-left / arrow-right → chevron-left / chevron-right.
  • CdsSlideView: пропсы иконок стрелок prevIcon / nextIcon переведены на новую систему иконок (IconValue).
  • CdsSlideView: изменён exposed-API — вместо group / next / prev компонент отдаёт только group (контекст группы).
  • CdsTag: событие remove переименовано в click:close — его эмитит кнопка закрытия; проп removable сохранён как псевдоним closable.
  • CdsTag: удалён слот text — текст задаётся пропсами text / content или слотом по умолчанию.
  • CdsTag: иконочные пропсы prependIcon / appendIcon переведены на новую систему иконок (IconValue) вместо строкового имени с валидацией по allowedIcons — см. Migration Guide.
  • CdsTextArea: удалён проп limit — ограничение по числу символов и счётчик задаются пропсом counter / counterValue — см. Migration Guide.
  • CdsTextArea: изменён exposed-API — вместо id / isFocused / fieldRef / textareaRef / validationRef / sizerRef / focus / blur компонент отдаёт состояние (isDirty / isDisabled / isReadonly / isPure / isValid / isValidating), методы валидации (validate / reset / resetValidation) и controlRef — см. Migration Guide.
  • CdsTextArea: иконочные пропсы prependIcon / appendIcon / prependInnerIcon / appendInnerIcon переведены на новую систему иконок (IconValue) вместо строкового имени с валидацией по allowedIcons — см. Migration Guide.
  • CdsTextInput: удалён проп limit — ограничение по числу символов и счётчик задаются пропсом counter / counterValue — см. Migration Guide.
  • CdsTextInput: удалён проп persistentMessages — для постоянного показа подсказки используйте persistentHint — см. Migration Guide.
  • CdsTextInput: изменён exposed-API — вместо fieldRef / inputRef / validationRef / focus / blur компонент отдаёт состояние (isDirty / isDisabled / isReadonly / isPure / isValid / isValidating), методы валидации (validate / reset / resetValidation) и controlRef — см. Migration Guide.
  • CdsTextInput: иконочные пропсы prependIcon / appendIcon / prependInnerIcon / appendInnerIcon переведены на новую систему иконок (IconValue) вместо строкового имени с валидацией по allowedIcons — см. Migration Guide.
  • 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.
  • CdsDrawer: видимость панели на широком экране подчиняется v-model — раньше обычная панель показывалась медиазапросом при любом значении, теперь false скрывает её и освобождает место в макете; чтобы панель сама открывалась там, где помещается в макет, передайте null или не задавайте v-model — см. Migration Guide.
  • CdsDrawer: на узком экране (< 1056 px) непостоянная панель ведёт себя как выезжающая и синхронизирует v-model с шириной экрана — закрывается при сужении и открывается при расширении (отключается пропом disableResizeWatcher); permanent на узком экране теперь занимает место в макете — см. Migration Guide.
  • Tailwind (внутри 4.0.0-alpha): из styles/tailwind удалены классы устаревших токенов состояний (bg-fill-primary-hover, text-content-disable и т. п.) — состояния собираются плёнкой state.*; классов для самой плёнки нет, её цвет зависит от фона.
  • Стили: удалены переменные settings.$standard-easing / $decelerated-easing / $accelerated-easing (кривые Material 2), а также tools.$cds-duration-*, get-motion и cds-animation-motion; замена — motion.easing(standard|enter|exit), motion.duration(<ступень>) из @central-design-system/components/styles/motion — см. Migration Guide.
  • CdsTransitionCollapse: удалён; замена — CdsTransitionPresence (затухание, затем схлопывание высоты). CdsTree раскрывает ветви через него — см. Migration Guide.
  • CdsNotification: событие update:modelValue приходит после анимации ухода (до 300ms), а не в момент клика; click:close по-прежнему срабатывает сразу — см. Migration Guide.
  • Темы: surface-overlay непрозрачный во всех темах, подложки CdsOverlay, CdsDrawer, CdsLoader и кнопки CdsCarousel разбавляют его сами ($overlay-opacity, 50%); свои подложки на токене нужно разбавить через color-mix (LDS-222) — см. Migration Guide.

Что нового ​

  • CdsButton: пропсы variant (solid / soft / outline / surface / ghost) и color — роль (brand / accent / neutral / danger / inverse), алиас палитры, токен темы или CSS-цвет; ховер, нажатие и недоступность любого цвета строит плёнка состояний (LDS-216).
  • CdsButton: baseColor и activeColor — цвет невыбранной и выбранной в группе кнопки.
  • CdsButton: пропсы раскладки block, stacked, spaced и произвольный HTML-тег через tag.
  • CdsButton: пропсы габаритов width / height / minWidth / minHeight / maxWidth / maxHeight; size дополнительно принимает число.
  • CdsButton: роутер-пропсы exact и replace для управления поведением RouterLink.
  • CdsButton: пропс content для передачи контента без слота и новый слот loader для кастомного индикатора загрузки.
  • CdsApp: новый компонент — корневая обёртка приложения (провайдер темы и layout-контекста).
  • CdsAvatar: новый компонент — аватар с изображением, иконкой или инициалами в круглом контейнере, с поддержкой бейджа.
  • CdsButtonGroup: новый компонент — объединяет несколько CdsButton в единую группу.
  • CdsButtonToggle: новый компонент — группа кнопок с переключаемым выбором (одиночный / множественный).
  • CdsCheckboxButton: новый компонент — чекбокс на базе CdsSelectionControl (одиночный/множественный выбор, indeterminate, true/false-значения).
  • CdsCounter: новый компонент — счётчик значения с ограничением max (например «99+»).
  • CdsDefaultsProvider: новый компонент — провайдер значений пропсов по умолчанию для вложенных компонентов.
  • CdsDescription: новый компонент — вспомогательный текст-описание с настраиваемым тегом.
  • CdsField: новый компонент — базовая обёртка поля формы (иконки, clearable, состояния error / loading / disabled).
  • CdsFileInput: новый компонент — поле выбора файлов на базе CdsInput / CdsField: одиночный и множественный выбор (multiple), drag-and-drop и вставка из буфера, отображение выбранного именами или чипами (chips), размер файлов (showSize) и счётчик (counter), фильтрация по типам (filterByType), персистентный placeholder и скрытие поля (hideInput).
  • CdsFileUpload: новый компонент — выделенная зона загрузки файлов с drag-and-drop: перетаскивание (включая папки), вставка из буфера и выбор через системный диалог, одиночный и множественный выбор (multiple), удаление файлов (clearable) и отображение размера (showSize), фильтрация по типам (filterByType) с событием rejected, список файлов под зоной или внутри неё (insetFileList), три размера зоны (size) и индикатор загрузки (loading). Собирается из подкомпонентов CdsFileUploadDropzone, CdsFileUploadList и CdsFileUploadItem.
  • CdsHighlight: новый компонент — подсветка совпадений в тексте по запросу (query) или готовым диапазонам (matches).
  • CdsLabel: новый компонент — подпись/лейбл контрола (for, размеры, состояния disabled / readonly).
  • CdsMessages: новый компонент — блок сообщений валидации/подсказок под контролом.
  • CdsProgressCircle: новый компонент — круговой индикатор прогресса (determinate / indeterminate).
  • CdsResponsive: новый компонент — контейнер с фиксированным соотношением сторон (aspectRatio) и адаптивными размерами.
  • CdsSelectionControl: новый компонент — низкоуровневый контрол выбора, основа для checkbox / radio / toggle.
  • CdsSelectionControlGroup: новый компонент — группа контролов выбора с общей моделью (single / multiple).
  • CdsSurface: новый компонент — базовая оформленная поверхность-контейнер, основа для более сложных компонентов.
  • CdsVirtualScroll: новый компонент — виртуализация длинных списков (в DOM рендерятся только видимые элементы).
  • CdsBadge: пропсы габаритов (width / height / minWidth / maxWidth / minHeight / maxHeight) и label для a11y; icon переведён на новую систему иконок (IconValue).
  • CdsCheckbox: встроенный множественный выбор (multiple, trueValue / falseValue) — замена CdsCheckboxGroup; кастомные иконки состояний (trueIcon / falseIcon / indeterminateIcon), цветовые пропсы (color / baseColor / activeColor / textColor / iconColor) и слоты input / details.
  • CdsModal: события жизненного цикла анимации afterEnter / afterLeave.
  • CdsRadioGroup: цветовые (color / baseColor / activeColor / textColor / iconColor) и иконочные (prependIcon / appendIcon / trueIcon / falseIcon) пропсы, inline, size и exposed-методы валидации.
  • CdsSelect: событие update:search и проп search для внешнего управления фильтром; режим «выбрать все» (isSelectAll, событие update:selectedAll, exposed-метод selectAll()), menuProps / listProps, чипы (chips / closableChips) и набор слотов (selection / chip / no-data / menu-header …).
  • CdsProgressBar: цветовые пропсы (color / baseColor / activeColor / textColor), стилизация буфера (bufferColor / bufferOpacity), режим сегментов (variant: 'split', chunkCount / chunkGap / chunkWidth), striped / roundedBar / opacity.
  • CdsSteps: проп items (+ itemTitle / itemText / itemValue / itemProps) рендерит шапку, контент (CdsStepsView / CdsStepsViewItem) и кнопки навигации (CdsStepsActions); слоты header-item / item / actions / prev / next, методы prev() / next() через ref, пропсы hideActions / prevText / nextText.
  • CdsTabs: цветовые пропсы, настройка слайдера (hideSlider / sliderTransition / sliderTransitionDuration), режимы inset / fixedTabs / centerActive / mobile, слоты tab / item / view.
  • CdsTab: роутер-пропсы (href / to / exact / replace), раскладка (block / stacked / spaced), цветовые пропсы и слот loader.
  • CdsTooltip: проп color для цвета фона подсказки.
  • CdsNotification: новое значение flat у пропса variant — уведомление без рамки; variant="important" воспроизводит вид тоста CdsNotificationAlert из CDS 3 — нейтральный фон и тень, статус задаёт только цвета контента (набор CDS 3 default / compact / important сохранён).
  • CdsNotification: пропсы bgColor / textColor для переопределения цвета фона и контента (без них действуют цвета статуса).
  • 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 для очистки запроса после выбора.
  • CdsAutocomplete: цветовые пропсы color / baseColor / activeColor / textColor / bgColor и itemColor (цвет выбранных элементов в меню).
  • CdsAutocomplete: слоты кастомизации меню menu-header / menu-footer / divider / subheader, поддержка структурных элементов списка (itemType: item / divider / subheader) и проп valueComparator для сравнения значений.
  • CdsAutocomplete: режим «выбрать все» — проп isSelectAll (первый пункт-чекбокс в меню; строка задаёт свою надпись), событие update:selectedAll и exposed-метод selectAll().
  • CdsCombobox: отображение выбранных значений чипами — пропсы chips / closableChips и слот chip.
  • CdsCombobox: цветовые пропсы color / baseColor / activeColor / textColor / bgColor / iconColor и itemColor (цвет выбранных элементов в меню).
  • CdsCombobox: слоты кастомизации меню menu-header / menu-footer / divider / subheader, поддержка структурных элементов списка (itemType: item / divider / subheader) и проп valueComparator для сравнения значений.
  • CdsCombobox: проп clearOnSelect (по умолчанию true) управляет очисткой поискового запроса после выбора элемента.
  • CdsBreadcrumbs: настраиваемый разделитель — проп divider (по умолчанию /) и слот divider; слоты item / title / prepend для кастомизации, проп icon (новая система иконок), проп tag и цветовые пропсы color / baseColor / activeColor / textColor / bgColor / activeClass.
  • CdsBreadcrumbsItem: пропс active, цветовые пропсы (color / baseColor / activeColor / textColor / bgColor), габариты width / maxWidth и произвольный HTML-тег через tag.
  • CdsBreadcrumbsDivider: новый компонент — разделитель между хлебными крошками (проп divider, слот default) для ручной вёрстки навигации.
  • CdsCard: цветовые пропсы color / baseColor / activeColor / textColor / bgColor; иконочные пропсы prependIcon / appendIcon переведены на новую систему иконок (IconValue).
  • CdsCard: аватары в шапке карточки — пропсы prependAvatar / appendAvatar.
  • CdsCard / CdsCardItem: вертикальное выравнивание зон prepend / append в шапке — проп itemAlign у карточки и align у CdsCardItem (start / center / end).
  • CdsCard: пропсы position / location для позиционирования и проп content для текстового контента без слота.
  • CdsCard: слот loader для кастомного индикатора загрузки.
  • CdsCardActions: проп align (start / center / end) для выравнивания блока действий.
  • CdsCardSubtitle / CdsCardText: проп opacity для прозрачности текста.
  • CdsDivider: проп variant — стиль линии (solid / dashed / dotted / double, по умолчанию solid).
  • CdsDivider: пропсы оформления color, opacity, gradient (затухание по краям) и inset (отступ / уменьшённая длина).
  • CdsDivider: проп contentOffset — интервал между разделителем и контентом слота (число или пара значений).
  • CdsDrawer: цветовые пропсы color / bgColor для настройки цвета контента и фона панели.
  • CdsExpandablePanels: обязательный выбор mandatory (boolean | 'force'), отступ между панелями gap, групповые пропсы иконок и поведения expandIcon / collapseIcon / hideActions / eager / focusable / hover / static (наследуются панелями) и exposed-навигация next() / prev().
  • CdsExpandablePanel: пропсы габаритов width / height / minWidth / maxWidth / minHeight / maxHeight, подсветка заголовка hover / focusable, отключение анимации заголовка static и selectedClass для выбранного состояния.
  • CdsExpandablePanelTitle: пропсы габаритов width / height / minWidth / maxWidth / minHeight / maxHeight, подсветка заголовка hover / focusable и отключение анимации static.
  • CdsIcon: пропс icon (IconValue) — иконка задаётся строкой-именем, компонентом иконки или булевым значением; name остаётся строковым алиасом для icon.
  • CdsIcon: цветовые пропсы color / baseColor / activeColor / textColor / bgColor и пропс disabled.
  • CdsIcon: пропсы отступов start / end для использования иконки как префикса/суффикса рядом с текстом.
  • CdsIcon: проп opacity для прозрачности и проп tag для произвольного HTML-тега (по умолчанию i).
  • CdsImage: пропс imageClass — CSS-класс для внутреннего элемента <img>.
  • CdsInput: цветовые пропсы color / baseColor / activeColor / textColor / bgColor и iconColor для настройки цвета поля и иконок.
  • CdsInput: пропсы подсказки hint / persistentHint, управление блоком деталей hideDetails (true / false / 'auto') и слоты label / description / details / message для кастомизации подписи, описания и сообщений.
  • CdsInput: проп direction (horizontal / vertical) и centerAffix для раскладки поля и выравнивания префикс/суффикс-элементов.
  • CdsInput: пропсы габаритов width / minWidth / maxWidth.
  • CdsInput: события кликов по внешним иконкам click:prepend / click:append (EventProp-пропсы onClick:*) — в CDS 3 у базового CdsInput их не было.
  • CdsList: рендеринг из данных — пропс items (+ маппинг itemTitle / itemValue / itemChildren / itemProps / itemType), слоты кастомизации item / header / subheader / divider и структурные типы элементов (item / divider / subheader).
  • CdsList: режим активации элементов — пропсы activatable / activated / activeStrategy, события click:activate и update:activated (v-model).
  • CdsList: клавиатурная навигация — пропсы navigationIndex / navigationStrategy (focus / track) и событие update:navigationIndex.
  • CdsList: расширенное управление выбором и раскрытием — пропсы selectable / selected / selectStrategy / mandatory / required / returnObject / valueComparator, opened / openStrategy.
  • CdsList: цветовые пропсы (color / baseColor / activeColor / bgColor / textColor / activeClass), габариты (width / height / minWidth / maxWidth / minHeight / maxHeight) и оформление nav / slim / indent / prependGap / collapseIcon / expandIcon.
  • CdsList: exposed-API дополнен методом getPath и картами children / parents (наряду с open / select / focus).
  • CdsListItem: подзаголовок subtitle (в дополнение к title / description), аватары prependAvatar / appendAvatar, роутер-пропсы exact / replace, цветовые пропсы, габариты и оформление nav / slim / lines / prependGap.
  • CdsListGroup: цветовые пропсы (color / baseColor / activeColor / bgColor / textColor) и иконка prependIcon перед заголовком группы.
  • CdsListItemTitle / CdsListItemSubtitle / CdsListItemDescription / CdsListItemMedia / CdsListItemImage / CdsListItemAction / CdsListItemDivider: новые вспомогательные компоненты для сборки элемента списка (заголовок, подзаголовок, описание, медиа-область, изображение, блок действий, разделитель) — в CDS 3 из семейства были только CdsList / CdsListItem / CdsListGroup.
  • CdsMenu: поддержка вложенных меню — проп submenu (открытие/закрытие стрелками ←/→ вместо ↑/↓).
  • CdsMenu: управление фокусом — пропсы captureFocus (по умолчанию true) и retainFocus (focus-trap внутри меню).
  • CdsMenu: пропсы позиционирования stickToTarget (контент следует за целью при прокрутке за пределы экрана) и viewportMargin (отступ контента от границ вьюпорта, по умолчанию 12).
  • CdsMenu: события жизненного цикла анимации afterEnter / afterLeave.
  • CdsOverlay: управление фокусом — пропсы captureFocus и retainFocus (focus-trap внутри контента оверлея).
  • CdsOverlay: пропсы позиционирования stickToTarget (контент следует за целью при прокрутке за пределы экрана) и viewportMargin (отступ контента от границ вьюпорта, по умолчанию 12).
  • CdsPagination: кнопки перехода на первую/последнюю страницу — проп showFirstLastPage (boolean | 'only-first'), иконки firstIcon / lastIcon и слоты first / last.
  • CdsPagination: настраиваемые иконки навигации prevIcon / nextIcon (новая система иконок IconValue) — в CDS 3 иконки chevron-left / chevron-right были захардкожены.
  • CdsPagination: цветовые пропсы color / activeColor для кнопок страниц и активной кнопки.
  • CdsPagination: пропсы a11y для локализации меток навигации — ariaLabel, pageAriaLabel, currentPageAriaLabel, firstAriaLabel / lastAriaLabel, nextAriaLabel / previousAriaLabel.
  • CdsPagination: проп quickJumperLabel — настраиваемая подпись поля быстрого перехода (в CDS 3 текст «Перейти к странице» был захардкожен).
  • CdsSlideGroup: пропсы contentClass / contentStyle — классы и inline-стили контейнера прокрутки.
  • CdsSlideGroup: пропсы mobile / mobileBreakpoint для управления мобильным режимом, scrollToActive (по умолчанию true) для автопрокрутки к активному элементу и mandatory для обязательного выбора; значение never у showArrows (полностью скрыть стрелки).
  • CdsSlideGroup: exposed-API дополнен hasNext / hasPrev (наряду с selected / scrollTo / scrollOffset / focus).
  • CdsSlideView: проп crossfade — переход между слайдами кроссфейдом вместо сдвига.
  • CdsSlideView: проп reverse — обратное направление анимации перехода.
  • CdsSlideView: проп verticalArrows (boolean | 'left' | 'right') — вертикальное расположение стрелок сбоку с выбором стороны.
  • CdsSlideView: проп transitionDuration — длительность анимации перехода между слайдами.
  • CdsTable: drag-and-drop строк и колонок — пропсы row-draggable / column-draggable (boolean | { icon, disabled, allowDrop }) включают перетаскивание за грип-иконку; события row-reorder / column-reorder отдают перетаскиваемый и целевой элементы с позицией вставки, порядок данных меняет потребитель. Строки переставляются между соседями одного родителя, колонки — среди соседей внутри своей группы (шапка группы переносится целиком).
  • CdsTag: управление видимостью через v-model — проп modelValue (по умолчанию true) и событие update:modelValue (при false тег скрывается).
  • CdsTag: кнопка закрытия — пропсы closable (и removable как псевдоним), closeIcon / closeLabel, событие click:close и слот close.
  • CdsTag: работа в составе группы — проп value, событие group:selected, selectedClass / activeClass и режим фильтра filter / filterIcon со слотом filter (индикатор выбора).
  • CdsTag: оформление — pill (полное скругление), label (уменьшенное скругление + слот label), проп size и произвольный HTML-тег через tag.
  • CdsTag: ссылочное поведение — пропсы link, exact, replace (в CDS 3 ссылка включалась только через href / to).
  • CdsTag: аватары prependAvatar / appendAvatar и текстовый контент без слота через content.
  • CdsTag: проп disabled (заблокированное состояние), нативный drag-and-drop через draggable и явное событие click.
  • CdsTag: новый проп textColor; color переведён на useColor — принимает токены темы, палитру и произвольный цвет (в CDS 3 был ограниченный набор значений).
  • CdsTextArea: цветовые пропсы color / baseColor / activeColor / textColor / bgColor / iconColor.
  • CdsTextArea: пропсы подсказки hint / persistentHint, управление блоком деталей hideDetails (true / false / 'auto') и hideMessages, сообщения messages / maxErrors.
  • CdsTextArea: настраиваемая иконка очистки clearIcon, пропсы persistentCounter / persistentPlaceholder и пользовательское значение счётчика counterValue.
  • CdsTextArea: проп maxHeight (максимальная высота) и событие update:rows при автоувеличении высоты (autoGrow).
  • CdsTextArea: пропсы габаритов width / minWidth / maxWidth и пропсы centerAffix / reverse / autocomplete / validateOn / validationValue.
  • CdsTextArea: слоты label / description / details / message / messages / counter / clear / loader / prepend / append / prepend-inner / append-inner.
  • CdsTextArea: новые события click:control / mousedown:control (клик и нажатие в области контрола) и update:rows (изменение вычисленного числа строк при autoGrow). События кликов по иконкам click:prepend / click:append / click:prependInner / click:appendInner / click:clear работают как прежде (@click:*), но теперь объявлены как EventProp-пропсы onClick:*, а не через emits.
  • CdsTextInput: цветовые пропсы color / baseColor / activeColor / textColor / bgColor / iconColor.
  • CdsTextInput: пропсы подсказки hint / persistentHint, управление блоком деталей hideDetails (true / false / 'auto') и hideMessages, сообщения errorMessages / maxErrors.
  • CdsTextInput: настраиваемая иконка очистки clearIcon, пропсы persistentCounter / persistentPlaceholder и пользовательское значение счётчика counterValue.
  • CdsTextInput: пропсы габаритов width / minWidth / maxWidth и пропсы centerAffix / reverse / validateOn / validationValue.
  • CdsTextInput: слоты details / message / clear / counter / loader для кастомизации сообщений, кнопки очистки, счётчика и индикатора загрузки.
  • CdsToast: новый компонент — всплывающее уведомление (тост) на базе CdsOverlay / CdsNotification: семантический status, заголовок и текст (title / text / content), иконка / загрузка / аватар (icon / loading / prependAvatar), автозакрытие timeout (-1 отключает) со шкалой таймера (timer / timerColor / reverseTimer), позиционирование location, вертикальная раскладка vertical, цветовые пропсы (bgColor / textColor), слоты (default / title / text / header / prepend / actions / activator) и события afterEnter / afterLeave. Замена тоста CdsNotificationAlert из CDS 3 — см. Migration Guide.
  • CdsToastQueue: новый компонент — очередь/стек тостов через v-model (массив ToastMessage): ограничение одновременно видимых totalVisible и стратегия переполнения displayStrategy (hold / overflow), сворачивание неактивных в стопку collapsed, отступ gap, кнопка закрытия closable / closeText, поддержка промисов (promise / success / error) с колбэком onDismiss, слоты item / header / text / actions и exposed-метод clear().
  • CdsToggle: цветовые пропсы color / baseColor / iconColor и thumbColor (цвет бегунка).
  • CdsToggle: проп size (xs / sm / md / lg / xl или число) и проп direction (horizontal / vertical).
  • CdsToggle: настраиваемые значения состояний trueValue / falseValue, неопределённое состояние indeterminate (событие update:indeterminate) и иконки состояний trueIcon / falseIcon.
  • CdsToggle: множественный выбор в группе — пропсы multiple / value / valueComparator (на базе CdsSelectionControlGroup).
  • CdsToggle: иконочные пропсы prependIcon / appendIcon (новая система иконок IconValue).
  • CdsToggle: индикатор загрузки loading и слот loader.
  • CdsToggle: пропсы подсказки hint / persistentHint, управление блоком деталей hideDetails / hideMessages, сообщения messages / errorMessages / maxErrors и валидация rules / validateOn / validationValue.
  • CdsToggle: пропсы габаритов width / minWidth / maxWidth.
  • CdsToggle: слоты кастомизации thumb (бегунок), track-true / track-false (части дорожки), input, details / message / messages и default.
  • CdsDateInput: новый компонент — поле ввода даты на базе CdsTextInput и CdsDatePicker в CdsMenu; значение хранится строкой в формате mask (DD.MM.YYYY по умолчанию).
  • CdsDateInput: ручной ввод с клавиатуры — проп updateOn (blur / enter) задаёт момент разбора значения, пустой массив оставляет только выбор в календаре.
  • CdsDateInput: формат отображения displayFormat (маска или функция) отдельно от формата хранения mask.
  • CdsDateInput: выбор времени — проп withTime добавляет CdsTimePicker под календарь и дописывает время в маску (withSeconds — секунды), пропсы тайм-пикера доступны напрямую и через timePickerProps.
  • CdsDateInput: отложенное применение — hideActions: false добавляет кнопки подтверждения (события save / cancel) и слот actions с save / cancel / isPristine.
  • CdsDateInput: настройка выпадающего меню и календаря — пропсы location, menuProps, pickerProps и состояние меню через v-model:menu.
  • CdsTagGroup: новый компонент — группа тегов на базе CdsSlideGroup: выбор через v-model, множественный выбор multiple с лимитом max, обязательный выбор mandatory, индикатор выбора filter и перенос по строкам column вместо прокрутки.
  • 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. lumaLight — эталонная светлая тема с цветами дизайнера Luma, включая плёнку состояний и её доли; ключи, которых у дизайнера нет, берутся из cdsLight (LDS-222). lumaDark пока переопределяет только брендовые токены (brand-primary* / brand-secondary*) в красной гамме логотипа Luma (#D2154B), остальные значения наследуются от cdsDark. Всего пакет теперь поставляет восемь готовых тем.
  • CdsDrawer: проп scrim (boolean | string) — отключает затемнение под выезжающей панелью или задаёт его цвет.
  • CdsDrawer: проп persistent — клик по затемнению и Esc не закрывают панель, только v-model.
  • CdsDrawer: проп width — ширина панели в px, макет сдвигает контент ровно на неё.
  • CdsDrawer: свайпы у выезжающей панели — открытие от края экрана и закрытие жестом (отключаются пропом touchless).
  • CdsDrawer: фоновое изображение — проп image и слот image.
  • Иконки: пак по умолчанию — Phosphor, его CSS идёт в пакете, ставить ничего не нужно.
  • Иконки: пак cds устарел, подключается через defaultSet: 'cds'.
  • Темы: токены плёнки состояний — цвета state / state-inverse / state-selected / state-disabled и доли --cds-state-*-opacity во всех темах; ховер, нажатие, выбор и недоступность ложатся плёнкой поверх любого фона.
  • Стили: функции плёнки state.hover / state.active / state.selected / state.disabled / state.line-hover / state.line-active / state.tint — @use '@central-design-system/components/styles/state'; каждая возвращает одно значение color-mix(…).
  • Темы: опция legacyTokens в настройках темы — при false устаревшие токены состояний убираются из тем, CSS-переменных, вариаций и утилит; по умолчанию true, пока компоненты переводятся на плёнку.
  • Анимации: единая шкала для всех тем — семь длительностей (instant 50ms … very-slow 500ms, spring 300ms), кривые standard / enter / exit / spring / loop / ripple / linear и циклы пульса (2s) и ряби (1.5s). SASS-модуль @use '@central-design-system/components/styles/motion' (duration, easing, transition, interactive-transition, миксины interactive, spatial, reduced, pulse, ripple), CSS-переменные --cds-motion-duration-* / --cds-motion-easing-* / --cds-motion-loop-* на :root и JS-объект motion (motion.durations, motion.easings, motion.loops). Гайд — «Анимации».
  • CdsTransitionPresence: новый переход для блока, уходящего из потока (уведомление, алерт, строка списка): затухание, затем схлопывание высоты, отступов и рамки; появление идёт наоборот. Обёртка в разметке не нужна, after-leave срабатывает после обеих фаз, при prefers-reduced-motion остаётся только затухание.
  • CdsStatus: пропс indicator — точка-индикатор вместо иконки и pulse — пульс точки для статуса «идёт сейчас» (бесконечный, WCAG 2.2.2: включайте, пока сигнал актуален; при prefers-reduced-motion не запускается); смена статуса плавно перекрашивает компонент.
  • CdsNotification: плавное появление и уход через CdsTransitionPresence: затухание, затем схлопывание высоты, соседние уведомления сдвигаются без рывка.

Улучшения ​

  • CdsButton: проп loading принимает string | boolean (в CDS 3 — только boolean).
  • CdsButton: ховер, нажатие и недоступность всех appearance строятся плёнкой состояний state.* поверх цветов покоя вместо токенов *-hover / *-active / *-disable; недоступная кнопка сохраняет оттенок своего вида, а не становится одинаково серой; вид в покое не изменился (LDS-215).
  • CdsAutocomplete: список меню виртуализируется через CdsVirtualScroll (в CDS 3 виртуализация не была реализована) — производительность на длинных списках.
  • CdsAutocomplete: улучшены a11y и клавиатурная навигация — aria-expanded / aria-controls и переходы Tab между шапкой, списком и подвалом меню.
  • CdsCombobox: режим «выбрать все» (isSelectAll) теперь принимает строку — кастомная надпись пункта в меню (в CDS 3 — только boolean).
  • CdsCard: проп loading принимает string | boolean (в CDS 3 — только boolean); строкой задаётся цвет индикатора.
  • CdsCard: пропсы title / subtitle принимают string | number | boolean (в CDS 3 subtitle — только string).
  • CdsImage: пропс src больше не обязателен (дефолт '') — компонент можно рендерить без источника (например, с плейсхолдером/слотами); в CDS 3 src был required.
  • CdsInput: проп size дополнительно принимает число (в CDS 3 — только xs / sm / md / lg / xl).
  • CdsSlideView: добавлена клавиатурная навигация по слайдам стрелками (←/→ для горизонтального, ↑/↓ для вертикального направления) — в CDS 3 её не было.
  • CdsTextArea: проп counter принимает boolean | number | string (в CDS 3 — только boolean).
  • CdsTextInput: проп size дополнительно принимает число (в CDS 3 — только xs / sm / md / lg / xl).
  • CdsTextInput: проп counter принимает boolean | number | string (в CDS 3 — только boolean).
  • Темы: базовый шрифт изменён с 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), при закрытии фокус возвращается на прежний элемент.
  • Анимации: все компоненты и общие переходы CdsTransition* переведены на шкалу движения Luma вместо кривых Material 2 (ховер very-fast / fast, нажатие instant, появление fast + enter, уход very-fast + exit, модалка и дровер normal / fast); публичные переменные $*-transition сохранили имя и форму, изменились значения по умолчанию — см. Migration Guide.
  • Анимации: JS-переходы (createJSTransition, CdsModalTransition) и слайдер CdsTabs читают prefers-reduced-motion при монтировании: модалка при reduced-motion меняет только прозрачность, слайдер вкладок переходит на затухание.
  • CdsTabs: перелёт слайдера идёт по шкале (fast / normal / slow в зависимости от вида перелёта), ховер вкладки — по ступеням плёнки состояний.
  • CdsSkeletonLoader: шиммер выключается при prefers-reduced-motion, как и декоративные полосы striped у CdsProgressBar; индикаторы процесса CdsLoader и неопределённый CdsProgressBar продолжают работать.
  • CdsOverlay: пульс при клике по фону не запускается при prefers-reduced-motion.
  • CdsMenu: при открытии стрелкой у активаторов-списков (CdsSelect, CdsCombobox, CdsAutocomplete) фокус остаётся в поле, а не уходит в меню.
  • CdsTooltip: интерактивная подсказка (interactive) без явного closeDelay закрывается с задержкой 250 мс (как CdsMenu) — курсор успевает пересечь зазор между активатором и контентом; явный close-delay, в том числе 0, приоритетнее, обычные подсказки закрываются сразу, как и раньше.

Исправления ​

  • CdsSkeletonLoader: после завершения загрузки контент слота рендерится напрямую, без обёртки-скелета — в CDS 3 контент оставался внутри flex-контейнера .cds-skeleton-loader (display: flex; flex-wrap: wrap), что ломало раскладку реального контента.
  • useDisplay: composable теперь заполняет флаг xlDown (объявлен в DisplayInstance, но в createDisplay не проставлялся и был undefined) — теперь всегда true («xl и ниже»).
  • 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 и больше не удлиняет прокрутку страницы.
  • CdsCard: SASS-переменные карточки ($card-*) попали в агрегат component-settings и настраиваются через styles.configFile плагина @central-design-system/vite-plugin: раньше их переопределение роняло сборку ошибкой was not declared with !default.
  • Переходы: уходящий элемент, вынутый из потока (CdsTransitionSlideRight, CdsTransitionSlideLeft, CdsTransitionJump*, а также любой CSS-переход с leaveAbsolute), больше не ловит клики (уходящая подпись месяца в календаре не перехватывает клик по стрелке); общие переходы CdsTransitionSlide*, CdsTransitionJump*, CdsTransitionScale, CdsTransitionModal* при prefers-reduced-motion не двигают и не масштабируют элемент, а заменяют сдвиг и масштаб затуханием (у слайдов вправо и влево и у модальных панелей анимируется только прозрачность).
  • Стили: легаси-сброс ($legacy-reset: true) больше не глушит анимации при prefers-reduced-motion (animation-iteration-count: 1 останавливал спиннер CdsLoader); политику движения задаёт ДС, а не сброс совместимости с CDS 3.
  • CdsTabs: sliderTransitionDuration: 0 корректно отключает перелёт слайдера.
  • CdsNotification: исправлена опечатка в имени класса notification-transition-leave-active — правило ухода раньше не применялось.
  • CdsNotificationAlert: CdsNotification, положенная в слот алерта, снова закрывается по своему v-model и крестику и анимирует уход — внутренний флаг алерта больше не доходит до вложенных уведомлений.
  • CdsProgressBar: полосы striped теперь видны и бегут (с CDS 3 градиент и анимация были перепутаны местами, и полосы не рисовались); при prefers-reduced-motion полосы стоят.

Устаревшее ​

  • CdsButton: пропс appearance устарел — выводит пару variant + color и пишет [CDS UPGRADE] один раз на значение; transparent сохранён как ghost + brand (удаление пересмотрено) — см. Migration Guide.
  • CdsNotificationAlert: обёртка-тост перенесена из CDS 3 как временный мост на CdsToast — работает в 4.x (внутри CdsNotification с variant="important", вертикальный стек уведомлений как в CDS 3), в dev-консоли выводит [CDS UPGRADE] и будет удалена в 5.x — см. Migration Guide.
  • CdsStages: компонент помечен deprecated — публичный API не изменился и шкала работает во всей ветке 4.x, но в dev-консоли выводит [CDS UPGRADE], а в 5.0 будет удалена. Замена — CdsSteps без пропа interactive: шаги некликабельны, а шапка без items работает как трекер хода процесса (проп vertical — для вертикального варианта); учтите, что вид отличается — стрелочная лента против индикаторов с линией прогресса. См. Migration Guide.
  • Темы: 31 токен состояний (fill-primary-hover, brand-primary-active, fill-selected, fill-disable и др., список — legacyTokens) помечен @deprecated — замена — плёнка state.*, подсказка с заменой видна в IDE и в правиле stylelint cds/no-legacy-tokens; удаление в 5.0, подробности в MIGRATION (LDS-218).