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

package/dist/esm-node/src/components/CdsSelect/CdsSelect.vue_vue_type_script_setup_true_lang.mjs

@@ -374,17 +374,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (disabled) menu.value = false;
     });
     __expose(forwardRefs({
-      /** Находится ли компонент в фокусе. */
+      /**
+       * Находится ли компонент в фокусе.
+       * @en Whether the component is focused.
+       */
       isFocused,
       /** Состояние открытия выпадающего меню. */
       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/esm-node/src/components/CdsSelect/api/CdsSelect.props.mjs

@@ -8,7 +8,10 @@ import { C as CdsModalTransition } from "../../../transitions/modalTransition.mj
 import { a3 as omit } from "../../../utils/helpers.mjs";
 const defineCdsSelectProps = propsFactory(
   {
-    /** Текущее значение поискового запроса для фильтрации элементов (v-model:search). */
+    /**
+     * Текущее значение поискового запроса для фильтрации элементов (v-model:search).
+     * @en Current value of the search query used to filter the items (v-model:search).
+     */
     search: String,
     ...defineSelectProps(),
     ...defineFilterProps(),

package/dist/esm-node/src/components/CdsSelect/composables/useMenuActivator.mjs

@@ -2,12 +2,18 @@ import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { useId, computed, toRef, toValue } from "vue";
 const defineMenuActivatorProps = propsFactory(
   {
-    /** Текст для скринридеров, описывающий действие открытия меню. */
+    /**
+     * Текст для скринридеров, описывающий действие открытия меню.
+     * @en Text for screen readers describing the open action of the menu.
+     */
     openText: {
       type: String,
       default: "$cds.open"
     },
-    /** Текст для скринридеров, описывающий действие закрытия меню. */
+    /**
+     * Текст для скринридеров, описывающий действие закрытия меню.
+     * @en Text for screen readers describing the close action of the menu.
+     */
     closeText: {
       type: String,
       default: "$cds.close"

package/dist/esm-node/src/components/CdsSelect/composables/useSelect.mjs

@@ -5,57 +5,109 @@ import { C as CdsSelectConstants } from "../api/CdsSelect.constants.mjs";
 import { d as defineMenuActivatorProps } from "./useMenuActivator.mjs";
 const defineSelectProps = propsFactory(
   {
-    /** Разрешает выбор нескольких значений. Выбранные элементы отображаются чипами или списком. */
+    /**
+     * Разрешает выбор нескольких значений. Выбранные элементы отображаются чипами или списком.
+     * @en Allows selecting several values. The selected items are shown as chips or as a list.
+     */
     multiple: Boolean,
     /**
      * Добавляет первым элементом списка пункт «Выбрать все» (только для `multiple`).
      * `true` использует надпись по умолчанию `$cds.selectAll`, строка задаёт собственную надпись.
+     * @en Adds a "select all" entry as the first item of the list (for `multiple` only). `true` uses the default `$cds.selectAll` caption, a string sets your own caption.
      */
     isSelectAll: {
       type: [Boolean, String],
       default: false
     },
-    /** В режиме multiple удерживает выбранные значения в одну строку с многоточием */
+    /**
+     * В режиме multiple удерживает выбранные значения в одну строку с многоточием
+     * @en In multiple mode keeps the selected values on a single line with an ellipsis
+     */
     ellipsis: Boolean,
-    /** Отображает нативный HTML-select вместо кастомного выпадающего меню (CdsMenu) */
+    /**
+     * Отображает нативный HTML-select вместо кастомного выпадающего меню (CdsMenu)
+     * @en Renders a native HTML select instead of the custom dropdown menu (CdsMenu)
+     */
     nativeSelect: Boolean,
-    /** Отображает выбранные значения в виде удаляемых чипов (CdsTag). */
+    /**
+     * Отображает выбранные значения в виде удаляемых чипов (CdsTag).
+     * @en Shows the selected values as removable chips (CdsTag).
+     */
     chips: Boolean,
-    /** Добавляет чипам кнопку удаления (актуально вместе с `chips`). */
+    /**
+     * Добавляет чипам кнопку удаления (актуально вместе с `chips`).
+     * @en Adds a remove button to the chips (relevant together with `chips`).
+     */
     closableChips: Boolean,
-    /** Управляет состоянием открытия выпадающего меню (v-model:menu). */
+    /**
+     * Управляет состоянием открытия выпадающего меню (v-model:menu).
+     * @en Controls the open state of the dropdown menu (v-model:menu).
+     */
     menu: Boolean,
-    /** Рендерит контент меню заранее, не дожидаясь первого открытия. */
+    /**
+     * Рендерит контент меню заранее, не дожидаясь первого открытия.
+     * @en Renders the menu content upfront, without waiting for the first opening.
+     */
     eager: Boolean,
-    /** Скрывает меню и плейсхолдер «нет данных», когда список элементов пуст. */
+    /**
+     * Скрывает меню и плейсхолдер «нет данных», когда список элементов пуст.
+     * @en Hides the menu and the "no data" placeholder when the item list is empty.
+     */
     hideNoData: Boolean,
-    /** Скрывает уже выбранные элементы из списка меню. */
+    /**
+     * Скрывает уже выбранные элементы из списка меню.
+     * @en Hides the already selected items from the menu list.
+     */
     hideSelected: Boolean,
-    /** Открывает меню после очистки значения. */
+    /**
+     * Открывает меню после очистки значения.
+     * @en Opens the menu after the value is cleared.
+     */
     openOnClear: Boolean,
-    /** Отключает автоматическую прокрутку меню к выбранному элементу при открытии. */
+    /**
+     * Отключает автоматическую прокрутку меню к выбранному элементу при открытии.
+     * @en Turns off the automatic scrolling of the menu to the selected item on opening.
+     */
     noAutoScroll: Boolean,
-    /** Цвет выбранных элементов в списке меню. По умолчанию используется `color`. */
+    /**
+     * Цвет выбранных элементов в списке меню. По умолчанию используется `color`.
+     * @en Color of the selected items in the menu list. `color` is used by default.
+     */
     itemColor: String,
-    /** Иконка-индикатор раскрытия меню. */
+    /**
+     * Иконка-индикатор раскрытия меню.
+     * @en Icon indicating that the menu can be expanded.
+     */
     menuIcon: {
       type: IconValue,
       default: "chevron-down"
     },
-    /** Пропсы, прокидываемые во внутренний компонент CdsMenu. */
+    /**
+     * Пропсы, прокидываемые во внутренний компонент CdsMenu.
+     * @en Props passed through to the inner CdsMenu component.
+     */
     menuProps: {
       type: Object
     },
-    /** Максимальная высота выпадающего меню. */
+    /**
+     * Максимальная высота выпадающего меню.
+     * @en Maximum height of the dropdown menu.
+     */
     menuHeight: {
       type: [String, Number],
       default: CdsSelectConstants.menuHeight
     },
-    /** Пропсы, прокидываемые во внутренний компонент CdsList. */
+    /**
+     * Пропсы, прокидываемые во внутренний компонент CdsList.
+     * @en Props passed through to the inner CdsList component.
+     */
     listProps: {
       type: Object
     },
-    /** Текст, отображаемый в меню, когда список элементов пуст. */
+    /**
+     * Текст, отображаемый в меню, когда список элементов пуст.
+     * @en Text shown in the menu when the item list is empty.
+     */
     noDataText: {
       type: String,
       default: "$cds.noDataText"

package/dist/esm-node/src/components/CdsSelectionControl/CdsSelectionControl.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-selection-control {
     position: relative;

package/dist/esm-node/src/components/CdsSelectionControl/CdsSelectionControl.vue_vue_type_script_setup_true_lang.mjs

@@ -69,7 +69,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       model.value = e.target.checked;
     }
     __expose({
+      /**
+       * Находится ли элемент управления в фокусе.
+       * @en Whether the control is focused.
+       */
       isFocused,
+      /**
+       * Ссылка на нативный элемент `input` — чекбокс или радиокнопку.
+       * @en Ref to the native `input` element — a checkbox or a radio button.
+       */
       input
     });
     return () => {

package/dist/esm-node/src/components/CdsSelectionControl/api/CdsSelectionControl.props.mjs

@@ -6,11 +6,20 @@ import { C as CdsSelectionControlConstants } from "./CdsSelectionControl.constan
 import { a7 as pick } from "../../../utils/helpers.mjs";
 const defineCdsSelectionControlProps = propsFactory(
   {
-    /** Значение для true состояния. */
+    /**
+     * Значение для true состояния.
+     * @en Value for the true state.
+     */
     trueValue: null,
-    /** Значение для false состояния. */
+    /**
+     * Значение для false состояния.
+     * @en Value for the false state.
+     */
     falseValue: null,
-    /** Значение, используемое при выборе компонента в группе. Если оно не указано, будет использоваться уникальный идентификатор. */
+    /**
+     * Значение, используемое при выборе компонента в группе. Если оно не указано, будет использоваться уникальный идентификатор.
+     * @en Value used when the component is selected inside a group. When it is not set, a unique identifier is used.
+     */
     value: null,
     ...pick(defineCdsInputProps(), ["label", "description"]),
     ...defineComponentProps(),

package/dist/esm-node/src/components/CdsSelectionControlGroup/CdsSelectionControlGroup.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-selection-control-group {
     display: flex;

package/dist/esm-node/src/components/CdsSelectionControlGroup/api/CdsSelectionControlGroup.props.mjs

@@ -10,30 +10,63 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mj
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsSelectionControlGroupProps = propsFactory(
   {
-    /** Уникальный идентификатор компонента */
+    /**
+     * Уникальный идентификатор компонента
+     * @en Unique identifier of the component
+     */
     id: String,
-    /** Тип нативного элемента input — например, `radio` или `checkbox` */
+    /**
+     * Тип нативного элемента input — например, `radio` или `checkbox`
+     * @en Type of the native input element — `radio` or `checkbox`, for example
+     */
     type: String,
-    /** Имя дочернего компонента, которому пробрасываются значения пропсов группы по умолчанию */
+    /**
+     * Имя дочернего компонента, которому пробрасываются значения пропсов группы по умолчанию
+     * @en Name of the child component the group prop values are passed to as defaults
+     */
     defaultsTarget: String,
-    /** Атрибут `name` нативного элемента input. В группе одно имя объединяет все вложенные контролы */
+    /**
+     * Атрибут `name` нативного элемента input. В группе одно имя объединяет все вложенные контролы
+     * @en The `name` attribute of the native input element. In a group one name joins all the nested controls
+     */
     name: String,
-    /** Отображает контрол как inline-элемент — контейнер не растягивается на всю ширину */
+    /**
+     * Отображает контрол как inline-элемент — контейнер не растягивается на всю ширину
+     * @en Renders the control as an inline element — the container does not stretch to the full width
+     */
     inline: Boolean,
-    /** Переводит компонент в визуальное состояние ошибки */
+    /**
+     * Переводит компонент в визуальное состояние ошибки
+     * @en Puts the component into the visual error state
+     */
     error: Boolean,
-    /** Значение компонента (v-model). В группе — значение выбранного контрола, при `multiple` — массив выбранных значений */
+    /**
+     * Значение компонента (v-model). В группе — значение выбранного контрола, при `multiple` — массив выбранных значений
+     * @en Value of the component (v-model). In a group it is the value of the selected control, with `multiple` — an array of the selected values
+     */
     modelValue: null,
-    /** Иконка невыбранного состояния */
+    /**
+     * Иконка невыбранного состояния
+     * @en Icon of the unselected state
+     */
     falseIcon: IconValue,
-    /** Иконка выбранного состояния */
+    /**
+     * Иконка выбранного состояния
+     * @en Icon of the selected state
+     */
     trueIcon: IconValue,
-    /** Разрешает выбор нескольких значений — модель становится массивом. Включается автоматически, если в `modelValue` передан массив */
+    /**
+     * Разрешает выбор нескольких значений — модель становится массивом. Включается автоматически, если в `modelValue` передан массив
+     * @en Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to `modelValue`
+     */
     multiple: {
       type: Boolean,
       default: null
     },
-    /** Функция сравнения значения модели со значением `value` контрола. По умолчанию — глубокое сравнение */
+    /**
+     * Функция сравнения значения модели со значением `value` контрола. По умолчанию — глубокое сравнение
+     * @en Function comparing the model value with the `value` of the control. Deep comparison by default
+     */
     valueComparator: {
       type: Function,
       default: deepEqual

package/dist/esm-node/src/components/CdsSkeletonLoader/CdsSkeletonLoader.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-skeleton-loader {
     position: relative;

package/dist/esm-node/src/components/CdsSkeletonLoader/api/CdsSkeletonLoader.props.mjs

@@ -5,22 +5,34 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mj
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsSkeletonLoaderProps = propsFactory(
   {
-    /** Тип скелета: предопределённый пресет либо произвольная строка (или массив строк) структуры. */
+    /**
+     * Тип скелета: предопределённый пресет либо произвольная строка (или массив строк) структуры.
+     * @en Skeleton type: a predefined preset or an arbitrary structure string (or an array of strings).
+     */
     type: {
       type: [String, Array],
       default: "block"
     },
-    /** Показывать скелет вместо контента слота во время загрузки. */
+    /**
+     * Показывать скелет вместо контента слота во время загрузки.
+     * @en Shows the skeleton instead of the slot content while loading.
+     */
     loading: {
       type: Boolean,
       default: false
     },
-    /** Текст для `aria-label` во время загрузки. */
+    /**
+     * Текст для `aria-label` во время загрузки.
+     * @en Text for the `aria-label` while loading.
+     */
     loadingText: {
       type: String,
       default: void 0
     },
-    /** Режим заготовки: отключает анимацию мерцания (для прототипирования). */
+    /**
+     * Режим заготовки: отключает анимацию мерцания (для прототипирования).
+     * @en Boilerplate mode: turns the shimmer animation off (for prototyping).
+     */
     boilerplate: {
       type: Boolean,
       default: false

package/dist/esm-node/src/components/CdsSlideGroup/CdsSlideGroup.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-slide-group {
     display: flex;

package/dist/esm-node/src/components/CdsSlideGroup/CdsSlideGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -255,17 +255,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       scrollToPosition(newPosition);
     }
     __expose({
-      /** Получить индекс выбранного элемента */
+      /**
+       * Получить индекс выбранного элемента
+       * @en Returns the index of the selected element
+       */
       selected: group.selected,
-      /** Получить скролл элемента */
+      /**
+       * Получить скролл элемента
+       * @en Returns the scroll offset of the element
+       */
       scrollOffset,
-      /** Возвращает значение true, если перед текущим индексом есть элементы. */
+      /**
+       * Возвращает значение true, если перед текущим индексом есть элементы.
+       * @en Returns true if there are elements before the current index.
+       */
       hasPrev,
-      /** Возвращает значение true, если после текущего индекса есть элементы. */
+      /**
+       * Возвращает значение true, если после текущего индекса есть элементы.
+       * @en Returns true if there are elements after the current index.
+       */
       hasNext,
-      /** Зафокусить компонента */
+      /**
+       * Зафокусить компонента
+       * @en Focuses the component
+       */
       focus,
-      /** Проскроллить к элементу по индексу */
+      /**
+       * Проскроллить к элементу по индексу
+       * @en Scrolls to the element by its index
+       */
       scrollTo
     });
     return () => {

package/dist/esm-node/src/components/CdsSlideGroup/api/CdsSlideGroup.props.mjs

@@ -8,16 +8,28 @@ import { C as CdsSlideGroupConstants, a as CdsSlideGroupSymbol, b as CdsSlideGro
 import { d as defineDisplayProps } from "../../../composables/useDisplay/useDisplay.mjs";
 const defineCdsSlideGroupProps = propsFactory(
   {
-    /** Принудительно выравнивает активный компонент по центру. */
+    /**
+     * Принудительно выравнивает активный компонент по центру.
+     * @en Forces the active component to be aligned to the center.
+     */
     centerActive: Boolean,
-    /** Если `true`, то при изменении активного компонента, контейнер будет прокручиваться так, чтобы он был виден. */
+    /**
+     * Если `true`, то при изменении активного компонента, контейнер будет прокручиваться так, чтобы он был виден.
+     * @en When `true`, the container scrolls the active component into view whenever it changes.
+     */
     scrollToActive: {
       type: Boolean,
       default: true
     },
-    /** Добавляет классы к контейнеру slide group */
+    /**
+     * Добавляет классы к контейнеру slide group
+     * @en Adds classes to the slide group container
+     */
     contentClass: null,
-    /** Добавляет inline-стили к контейнеру slide group */
+    /**
+     * Добавляет inline-стили к контейнеру slide group
+     * @en Adds inline styles to the slide group container
+     */
     contentStyle: null,
     /**
      * Изменяет настройки отображения стрелок:
@@ -27,17 +39,24 @@ const defineCdsSlideGroupProps = propsFactory(
      * Значение «desktop» всегда отображает стрелки на настольных устройствах, а значение «mobile» — на мобильных устройствах.<br />
      * Значение «always» всегда отображает стрелки как на настольных, так и на мобильных устройствах.<br />
      * Используйте значение «never», чтобы отключить отображение стрелок.
+     * @en Changes how the arrows are shown. By default the arrows appear on desktop devices when the container overflows and stay hidden on mobile devices. `true` also shows them on mobile on overflow, `desktop` always shows them on desktop, `mobile` always on mobile, `always` on both, and `never` disables the arrows.
      */
     showArrows: {
       type: [Boolean, String],
       validator: (v) => typeof v === "boolean" || ["always", "desktop", "mobile", "never"].includes(v)
     },
-    /** Иконка для кнопки "следующий". */
+    /**
+     * Иконка для кнопки "следующий".
+     * @en Icon for the “next” button.
+     */
     nextIcon: {
       type: IconValue,
       default: "next"
     },
-    /** Иконка для кнопки "предыдущий". */
+    /**
+     * Иконка для кнопки "предыдущий".
+     * @en Icon for the “previous” button.
+     */
     prevIcon: {
       type: IconValue,
       default: "prev"

package/dist/esm-node/src/components/CdsSlideView/CdsSlideView.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-slide-view {
     overflow: hidden;

package/dist/esm-node/src/components/CdsSlideView/CdsSlideView.vue_vue_type_script_setup_true_lang.mjs

@@ -187,6 +187,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     __expose({
+      /**
+       * Состояние группы слайдов: список элементов, активный слайд и методы переключения.
+       * @en State of the slide group: the list of elements, the active slide and the switching methods.
+       */
       group
     });
     return () => {

package/dist/esm-node/src/components/CdsSlideView/CdsSlideViewItem.vue_vue_type_script_setup_true_lang.mjs

@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     ...defineCdsSlideViewItemProps()
   },
-  emits: [],
+  emits: ["group:selected"],
   setup(__props, {
     expose: __expose
   }) {
@@ -79,6 +79,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     __expose({
+      /**
+       * Состояние слайда в группе: выбран ли он, его значение и метод переключения.
+       * @en State of the slide inside the group: whether it is selected, its value and the toggle method.
+       */
       groupItem
     });
     return () => {