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

package/dist/es/entry.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @layer cds-core {
   @layer reset, base, typography;
 }
@@ -15,23 +14,6 @@
 @layer cds-final {
   @layer transitions, trumps;
 }
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-core.fonts {
   /* Generated by ParaType (http://www.paratype.com) */
   /* Font PT Root UI: Copyright (c) ParaType, 2026. All rights reserved. */

package/dist/es/entry.js

@@ -47,7 +47,7 @@ import { C as C35 } from "./src/components/CdsInput/index.js";
 import { C as C36 } from "./src/components/CdsLabel/index.js";
 import { C as C37 } from "./src/components/CdsLayout/index.js";
 import { C as C38 } from "./src/components/CdsLink/index.js";
-import { C as C39, c as c7, a as a9, d as d4, e as e3, b as b7, f as f3, g as g3, h as h2, i as i8 } from "./src/components/CdsList/index.js";
+import { C as C39, c as c7, a as a9, d as d4, e as e3, b as b7, f as f3, g as g3, h as h2, i as i8, j as j2 } from "./src/components/CdsList/index.js";
 import { C as C40 } from "./src/components/CdsLoader/index.js";
 import { C as C41 } from "./src/components/CdsMain/index.js";
 import { C as C42 } from "./src/components/CdsMenu/index.js";
@@ -108,24 +108,25 @@ import { c as c13, a as a26, b as b16, u as u8 } from "./src/hooks/useBreakpoint
 import { c as c14, p as p3, u as u9 } from "./src/hooks/createContext/index.js";
 import { c as c15, d as d12, u as u10 } from "./src/composables/useDisplay/useDisplay.js";
 import { c as c16, a as a27, b as b17, d as d13, u as u11 } from "./src/hooks/useHydration/index.js";
-import { c as c17 } from "./src/hooks/createObserver/index.js";
-import { a as a28, c as c18 } from "./src/hooks/createPlugin/index.js";
-import { c as c19, d as d14, p as p4, u as u12 } from "./src/composables/useTheme/useTheme.js";
-import { c as c20 } from "./src/hooks/createTrinity/index.js";
-import { d as d15, g as g4, u as u13 } from "./src/composables/useDatetime/useDatetime.js";
-import { d as d16, u as u14 } from "./src/composables/useDimensions/useDimensions.js";
-import { d as d17, u as u15 } from "./src/composables/useLayout/useLayout.js";
+import { c as c17, d as d14, u as u12 } from "./src/composables/useForm/useForm.js";
+import { c as c18 } from "./src/hooks/createObserver/index.js";
+import { a as a28, c as c19 } from "./src/hooks/createPlugin/index.js";
+import { c as c20, d as d15, p as p4, u as u13 } from "./src/composables/useTheme/useTheme.js";
+import { c as c21 } from "./src/hooks/createTrinity/index.js";
+import { d as d16, g as g4, u as u14 } from "./src/composables/useDatetime/useDatetime.js";
+import { d as d17, u as u15 } from "./src/composables/useDimensions/useDimensions.js";
+import { d as d18, u as u16 } from "./src/composables/useLayout/useLayout.js";
 import { i as i9 } from "./src/assets/icons/index.js";
-import { m, u as u16 } from "./src/components/CdsTable/composable/table.js";
+import { m, u as u17 } from "./src/components/CdsTable/composable/table.js";
 import { t } from "./src/hooks/toArray/index.js";
 import { t as t2 } from "./src/hooks/toElement/index.js";
-import { u as u17, a as a29 } from "./src/hooks/useIntersectionObserver/index.js";
-import { a as a30, u as u18 } from "./src/hooks/useResizeObserver/index.js";
-import { u as u19, a as a31 } from "./src/components/CdsToastQueue/composables/useToastQueue.js";
+import { u as u18, a as a29 } from "./src/hooks/useIntersectionObserver/index.js";
+import { a as a30, u as u19 } from "./src/hooks/useResizeObserver/index.js";
+import { u as u20, a as a31 } from "./src/components/CdsToastQueue/composables/useToastQueue.js";
 const createCds = (options = {}) => {
   return createCds$1(options);
 };
-const version = "4.0.0-alpha.4";
+const version = "4.0.0-alpha.6";
 createCds.version = version;
 export {
   c3 as CDS_DRAWER_WIDTH,
@@ -197,6 +198,7 @@ export {
   g3 as CdsListItemMedia,
   h2 as CdsListItemSubtitle,
   i8 as CdsListItemTitle,
+  j2 as CdsListSubheader,
   C40 as CdsLoader,
   C41 as CdsMain,
   C42 as CdsMenu,
@@ -302,24 +304,26 @@ export {
   c as createDefaults,
   c15 as createDisplay,
   c16 as createFallbackHydration,
+  c17 as createForm,
   a27 as createHydration,
   b17 as createHydrationContext,
   d13 as createHydrationPlugin,
-  c17 as createObserver,
+  c18 as createObserver,
   a28 as createPlugin,
-  c18 as createPluginContext,
-  c19 as createTheme,
-  c20 as createTrinity,
+  c19 as createPluginContext,
+  c20 as createTheme,
+  c21 as createTrinity,
   d8 as defaultDisplayOptions,
   d7 as defaultThemeOptions,
   d9 as defineAppearanceProps,
   d11 as defineColorProps,
-  d15 as defineDatetimeProps,
-  d16 as defineDimensionsProps,
+  d16 as defineDatetimeProps,
+  d17 as defineDimensionsProps,
   d12 as defineDisplayProps,
-  d17 as defineLayoutProps,
+  d14 as defineFormProps,
+  d18 as defineLayoutProps,
   d10 as defineSizeProps,
-  d14 as defineThemeProps,
+  d15 as defineThemeProps,
   i2 as directives,
   g4 as getDayHash,
   i9 as iconsets,
@@ -339,25 +343,26 @@ export {
   u8 as useBreakpoints,
   b15 as useColor,
   u9 as useContext,
-  u13 as useDatetime,
+  u14 as useDatetime,
   u as useDefaults,
-  u14 as useDimensions,
+  u15 as useDimensions,
   u10 as useDisplay,
-  u17 as useElementIntersection,
+  u18 as useElementIntersection,
   a30 as useElementSize,
+  u12 as useForm,
   u11 as useHydration,
   u2 as useInjectLayout,
   a29 as useIntersectionObserver,
-  u15 as useLayout,
-  u16 as useLazyKVMap,
+  u16 as useLayout,
+  u17 as useLazyKVMap,
   u4 as useOtpInput,
-  u18 as useResizeObserver,
+  u19 as useResizeObserver,
   u3 as useSelection,
   c12 as useShadowBorderColor,
   u6 as useSize,
   u7 as useTextColor,
-  u12 as useTheme,
-  u19 as useToastItem,
+  u13 as useTheme,
+  u20 as useToastItem,
   a31 as useToastQueue,
   i5 as utils,
   version

package/dist/es/src/cds.js

@@ -1,18 +1,18 @@
 import { C as CssGridSymbol } from "./components/CdsGrid/api/CdsGrid.constants.js";
+import { D as DisplaySymbol } from "./composables/useDisplay/internal/useDisplay.constants.js";
+import { c as createDisplay } from "./composables/useDisplay/useDisplay.js";
 import { G as GoToSymbol } from "./composables/useGoTo/internal/useGoTo.constants.js";
 import { c as createGoTo } from "./composables/useGoTo/useGoTo.js";
 import { a as IconSymbol } from "./composables/useIcons/internal/useIcons.constants.js";
 import { L as LocaleSymbol } from "./composables/useLocale/internal/useLocale.constants.js";
 import { c as createLocale } from "./composables/useLocale/useLocale.js";
+import { T as ThemeSymbol } from "./composables/useTheme/internal/useTheme.constants.js";
+import { c as createTheme } from "./composables/useTheme/useTheme.js";
 import { c as createDefaults, D as DefaultsSymbol } from "./core/useDefaults.js";
 import { c as createIcons } from "./icons.js";
 import { a1 as mergeDeep } from "./utils/helpers.js";
 import { a as IN_BROWSER } from "./utils/dom/globals.js";
 import { effectScope, defineComponent, nextTick, reactive } from "vue";
-import { c as createDisplay } from "./composables/useDisplay/useDisplay.js";
-import { c as createTheme } from "./composables/useTheme/useTheme.js";
-import { D as DisplaySymbol } from "./composables/useDisplay/internal/useDisplay.constants.js";
-import { T as ThemeSymbol } from "./composables/useTheme/internal/useTheme.constants.js";
 function createCds(cdsOptions = {}) {
   const { blueprint, ...rest } = cdsOptions;
   const options = mergeDeep(blueprint, rest);
@@ -108,7 +108,7 @@ function createCds(cdsOptions = {}) {
     };
   });
 }
-const version = "4.0.0-alpha.4";
+const version = "4.0.0-alpha.6";
 createCds.version = version;
 function inject(key) {
   var _a, _b;

package/dist/es/src/components/CdsApp/CdsApp.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-app {
     display: flex;

package/dist/es/src/components/CdsApp/CdsApp.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { defineComponent, useSlots, createVNode, unref } from "vue";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { C as CdsAppConstants } from "./api/CdsApp.constants.js";
 import { d as defineCdsAppProps } from "./api/CdsApp.props.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsAppConstants.name

package/dist/es/src/components/CdsApp/api/CdsApp.props.js

@@ -1,9 +1,10 @@
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsAppConstants } from "./CdsApp.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 const defineCdsAppProps = propsFactory(
   {
+    /** Режим отображения внутри Storybook: убирает полноэкранную обёртку, `'fluid'` дополнительно снимает ограничение ширины */
     storybook: {
       type: [Boolean, String],
       default: false

package/dist/es/src/components/CdsAutocomplete/CdsAutocomplete.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-autocomplete .cds-field .cds-text-input__prefix,
   .cds-autocomplete .cds-field .cds-text-input__suffix,

package/dist/es/src/components/CdsAutocomplete/CdsAutocomplete.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,6 @@ import { d as defineCdsTagProps } from "../CdsTag/api/CdsTag.props.js";
 import { d as defineCdsTextInputProps } from "../CdsTextInput/api/CdsTextInput.props.js";
 import { u as useFilter } from "../../composables/useFilter/useFilter.js";
 import { u as useFocusGroups } from "../../composables/useFocus/useFocusGroup.js";
-import { u as useForm } from "../../composables/useForm/useForm.js";
 import { u as useItems } from "../../composables/useItems/useItems.js";
 import { a as useLocale } from "../../composables/useLocale/useLocale.js";
 import { f as filterProps } from "../../core/defineComponent.js";
@@ -21,6 +20,7 @@ import { c as classNames } from "../../utils/dom/classNames.js";
 import { a as IN_BROWSER } from "../../utils/dom/globals.js";
 import { C as CdsAutocompleteConstants } from "./api/CdsAutocomplete.constants.js";
 import { d as defineCdsAutocompleteProps } from "./api/CdsAutocomplete.props.js";
+import { u as useForm } from "../../composables/useForm/useForm.js";
 import { u as useTextColor } from "../../composables/useColor/useColor.js";
 import { C as CdsTextInput } from "../CdsTextInput/index.js";
 import { C as CdsIcon } from "../CdsIcon/index.js";
@@ -395,19 +395,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (disabled) menu.value = false;
     });
     __expose(forwardRefs({
-      /** Находится ли компонент в фокусе. */
+      /**
+       * Находится ли компонент в фокусе.
+       * @en Whether the component is focused.
+       */
       isFocused,
-      /** Не изменялся ли поисковый запрос с момента последнего выбора. */
+      /**
+       * Не изменялся ли поисковый запрос с момента последнего выбора.
+       * @en Whether the search query has not changed since the last selection.
+       */
       isPure,
       /** Состояние открытия выпадающего меню. */
       menu,
-      /** Текущее значение поискового запроса. */
+      /**
+       * Текущее значение поискового запроса.
+       * @en Current value of the search query.
+       */
       search,
-      /** Элементы, отфильтрованные по текущему поисковому запросу. */
+      /**
+       * Элементы, отфильтрованные по текущему поисковому запросу.
+       * @en Items filtered by the current search query.
+       */
       filteredItems,
       /** Выбрать элемент списка. Передайте `set` для явного добавления/снятия выбора. */
       select,
-      /** Переключить выбор всех доступных элементов (только для `multiple` + `isSelectAll`). */
+      /**
+       * Переключить выбор всех доступных элементов (только для `multiple` + `isSelectAll`).
+       * @en Toggle the selection of all available items (for `multiple` + `isSelectAll` only).
+       */
       selectAll: onSelectAll
     }, cdsTextInputRef));
     return () => {

package/dist/es/src/components/CdsAutocomplete/api/CdsAutocomplete.props.js

@@ -11,13 +11,20 @@ const defineCdsAutocompleteProps = propsFactory(
     /**
      * Подсвечивает первый подходящий элемент списка при вводе; Enter или Tab выбирают его.
      * Значение `exact` подсвечивает только при полном совпадении поискового запроса с заголовком элемента.
+     * @en Highlights the first matching item as you type; Enter or Tab select it. The `exact` value highlights it only on a full match of the search query with the item title.
      */
     autoSelectFirst: {
       type: [Boolean, String]
     },
-    /** Очищает поисковый запрос после выбора элемента (актуально для `multiple`). */
+    /**
+     * Очищает поисковый запрос после выбора элемента (актуально для `multiple`).
+     * @en Clears the search query after an item is selected (relevant for `multiple`).
+     */
     clearOnSelect: Boolean,
-    /** Текущее значение поискового запроса для фильтрации элементов (v-model:search). */
+    /**
+     * Текущее значение поискового запроса для фильтрации элементов (v-model:search).
+     * @en Current value of the search query used to filter the items (v-model:search).
+     */
     search: String,
     ...defineFilterProps({ filterKeys: ["title"] }),
     ...omit(defineSelectProps(), ["nativeSelect", "noAutoScroll"]),

package/dist/es/src/components/CdsAvatar/CdsAvatar.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-avatar {
     position: relative;

package/dist/es/src/components/CdsAvatar/CdsAvatar.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { defineComponent, useSlots, computed, createVNode, unref } from "vue";
 import { u as useText } from "../../composables/useText/useText.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { l as isObject } from "../../utils/helpers.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
@@ -9,7 +10,6 @@ import { C as CdsIcon } from "../CdsIcon/index.js";
 import { C as CdsImage } from "../CdsImage/index.js";
 import { C as CdsAvatarConstants } from "./api/CdsAvatar.constants.js";
 import { d as defineCdsAvatarProps } from "./api/CdsAvatar.props.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { a as useBackgroundColor } from "../../composables/useColor/useColor.js";
 import { u as useSize } from "../../composables/useSize/useSize.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/es/src/components/CdsAvatar/api/CdsAvatar.props.js

@@ -1,25 +1,40 @@
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.js";
 import { d as defineTextProps } from "../../../composables/useText/useText.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsAvatarConstants } from "./CdsAvatar.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
 const defineCdsAvatarProps = propsFactory(
   {
-    /** Бейдж аватара. `true` показывает точку, объект — пропсы `CdsBadge`. */
+    /**
+     * Бейдж аватара. `true` показывает точку, объект — пропсы `CdsBadge`.
+     * @en Avatar badge. `true` shows a dot, an object is passed through as `CdsBadge` props.
+     */
     badge: {
       type: [Boolean, Object],
       default: false
     },
-    /** Источник изображения аватара. Имеет приоритет над `icon` и `text`. */
+    /**
+     * Источник изображения аватара. Имеет приоритет над `icon` и `text`.
+     * @en Source of the avatar image. Takes priority over `icon` and `text`.
+     */
     image: String,
-    /** Иконка, отображаемая в аватаре, если не задано изображение. */
+    /**
+     * Иконка, отображаемая в аватаре, если не задано изображение.
+     * @en Icon shown in the avatar when no image is set.
+     */
     icon: IconValue,
-    /** Добавляет отступ справа — для использования в начале строки контента. */
+    /**
+     * Добавляет отступ справа — для использования в начале строки контента.
+     * @en Adds a margin on the right — for an avatar at the beginning of a line of content.
+     */
     start: Boolean,
-    /** Добавляет отступ слева — для использования в конце строки контента. */
+    /**
+     * Добавляет отступ слева — для использования в конце строки контента.
+     * @en Adds a margin on the left — for an avatar at the end of a line of content.
+     */
     end: Boolean,
     ...defineSizeProps(),
     ...defineTextProps(),

package/dist/es/src/components/CdsBadge/CdsBadge.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-badge {
     display: inline-block;

package/dist/es/src/components/CdsBadge/CdsBadge.vue_vue_type_script_setup_true_lang.js

@@ -2,6 +2,7 @@ import { defineComponent, useSlots, useAttrs, unref, createVNode, mergeProps, wi
 import { a as useLocale } from "../../composables/useLocale/useLocale.js";
 import { u as useLocation } from "../../composables/useLocation/useLocation.js";
 import { u as useText } from "../../composables/useText/useText.js";
+import { u as useTheme } from "../../composables/useTheme/useTheme.js";
 import { M as MaybeTransition } from "../../composables/useTransition/useTransition.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { a8 as pickWithRest, u as convertToUnit } from "../../utils/helpers.js";
@@ -10,7 +11,6 @@ import { C as CdsIcon } from "../CdsIcon/index.js";
 import { C as CdsBadgeConstants, f as floatingBadgeDotOffset, a as floatingBadgeOffset, d as defaultBadgeDotOffset, b as defaultBadgeOffset } from "./api/CdsBadge.constants.js";
 import { d as defineCdsBadgeProps } from "./api/CdsBadge.props.js";
 import { a as useBackgroundColor, u as useTextColor } from "../../composables/useColor/useColor.js";
-import { u as useTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/es/src/components/CdsBadge/api/CdsBadge.props.js

@@ -1,41 +1,69 @@
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.js";
 import { d as defineLocationProps } from "../../../composables/useLocation/useLocation.js";
 import { d as defineTextProps } from "../../../composables/useText/useText.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { b as defineTransitionProps } from "../../../composables/useTransition/useTransition.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { a7 as pick } from "../../../utils/helpers.js";
 import { C as CdsBadgeConstants } from "./CdsBadge.constants.js";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsBadgeProps = propsFactory(
   {
-    /**Иконка, отображаемая в компоненте. Если указано свойство `dot`, то это свойство будет проигнорировано. */
+    /**
+     * Иконка, отображаемая в компоненте. Если указано свойство `dot`, то это свойство будет проигнорировано.
+     * @en Icon shown inside the component. Ignored when the `dot` prop is set.
+     */
     icon: IconValue,
-    /**Уменьшает размер и скрывает содержимое, отображая компонент в виде точки */
+    /**
+     * Уменьшает размер и скрывает содержимое, отображая компонент в виде точки
+     * @en Shrinks the component and hides its content, rendering it as a dot
+     */
     dot: Boolean,
-    /**Размер точки */
+    /**
+     * Размер точки
+     * @en Dot size
+     */
     dotSize: [Number, String],
-    /**Отображать как inline блок вместо абсолютного позиционирования. Свойства location, floating и offset будут проигнорированы. */
+    /**
+     * Отображать как inline блок вместо абсолютного позиционирования. Свойства location, floating и offset будут проигнорированы.
+     * @en Renders as an inline block instead of using absolute positioning. The location, floating and offset props are ignored.
+     */
     inline: Boolean,
-    /**Переносит компонент дальше от контента. Это соответствует смещению на 8 пикселей. */
+    /**
+     * Переносит компонент дальше от контента. Это соответствует смещению на 8 пикселей.
+     * @en Moves the component further away from the content — an 8 pixel offset.
+     */
     floating: Boolean,
     /**
      * Устанавливает максимальное допустимое значение при использовании атрибута content со значением в виде числа.
      * Если число в поле content превышает максимальное значение, к нему добавляется суффикс «+».
+     * @en Sets the maximum allowed value when content holds a number. If the number exceeds the maximum, a "+" suffix is added.
      */
     max: [Number, String],
-    /** Сместить по оси X */
+    /**
+     * Сместить по оси X
+     * @en Offset along the X axis
+     */
     offsetX: [Number, String],
-    /** Сместить по оси Y */
+    /**
+     * Сместить по оси Y
+     * @en Offset along the Y axis
+     */
     offsetY: [Number, String],
-    /** Определяет, отображается ли компонент или скрыт. */
+    /**
+     * Определяет, отображается ли компонент или скрыт.
+     * @en Controls whether the component is shown or hidden.
+     */
     modelValue: {
       type: Boolean,
       default: true
     },
-    /** Aria-label для компонента. Если не указано, будет использоваться значение по умолчанию. */
+    /**
+     * Aria-label для компонента. Если не указано, будет использоваться значение по умолчанию.
+     * @en Aria-label for the component. Falls back to the default value when not set.
+     */
     label: {
       type: String,
       default: "$cds.badge"

package/dist/es/src/components/CdsBreadcrumbs/CdsBreadcrumbs.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-breadcrumbs {
     display: flex;

package/dist/es/src/components/CdsBreadcrumbs/api/CdsBreadcrumbs.props.js

@@ -9,19 +9,31 @@ import { d as defineDimensionsProps } from "../../../composables/useDimensions/u
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsBreadcrumbsProps = propsFactory(
   {
-    /** Массив строк или объектов, используемый для автоматического создания дочерних компонентов */
+    /**
+     * Массив строк или объектов, используемый для автоматического создания дочерних компонентов
+     * @en Array of strings or objects used to build the child components automatically
+     */
     items: {
       type: Array,
       default: () => []
     },
-    /** Разделитель между дочерними компонентами */
+    /**
+     * Разделитель между дочерними компонентами
+     * @en Divider between the child components
+     */
     divider: {
       type: String,
       default: "/"
     },
-    /** Иконка отображаемая рядом с компонентом */
+    /**
+     * Иконка отображаемая рядом с компонентом
+     * @en Icon displayed next to the component
+     */
     icon: IconValue,
-    /** Класс, применяемый к компоненту, когда он находится в активном состоянии */
+    /**
+     * Класс, применяемый к компоненту, когда он находится в активном состоянии
+     * @en Class applied to the component when it is in the active state
+     */
     activeClass: String,
     ...defineComponentProps(),
     ...defineDisabledProps(),
@@ -32,11 +44,20 @@ const defineCdsBreadcrumbsProps = propsFactory(
 );
 const defineCdsBreadcrumbsItemProps = propsFactory(
   {
-    /** Активное состояние компонента, обычно используется для обозначения текущей страницы в навигации */
+    /**
+     * Активное состояние компонента, обычно используется для обозначения текущей страницы в навигации
+     * @en Active state of the component; usually marks the current page in the navigation
+     */
     active: Boolean,
-    /** Класс, применяемый к компоненту, когда он находится в активном состоянии */
+    /**
+     * Класс, применяемый к компоненту, когда он находится в активном состоянии
+     * @en Class applied to the component when it is in the active state
+     */
     activeClass: String,
-    /** Заголовок элемента, отображаемый в компоненте */
+    /**
+     * Заголовок элемента, отображаемый в компоненте
+     * @en Item title displayed in the component
+     */
     title: String,
     ...defineComponentProps(),
     ...defineRouterProps(),
@@ -49,7 +70,10 @@ const defineCdsBreadcrumbsItemProps = propsFactory(
 );
 const defineCdsBreadcrumbsDividerProps = propsFactory(
   {
-    /** Разделитель */
+    /**
+     * Разделитель
+     * @en Divider
+     */
     divider: [Number, String],
     ...defineComponentProps()
   },