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

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

@@ -4,26 +4,51 @@ import { C as CdsDividerConstants } from "./CdsDivider.constants.mjs";
 import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsDividerProps = propsFactory(
   {
-    /** Длина разделителя. Единица измерения по умолчанию — пиксели. */
+    /**
+     * Длина разделителя. Единица измерения по умолчанию — пиксели.
+     * @en Length of the divider. Defaults to pixels.
+     */
     length: [Number, String],
-    /** Толщина разделителя. Единица измерения по умолчанию — пиксели. */
+    /**
+     * Толщина разделителя. Единица измерения по умолчанию — пиксели.
+     * @en Thickness of the divider. Defaults to pixels.
+     */
     thickness: [Number, String],
-    /** Прозрачность разделителя. */
+    /**
+     * Прозрачность разделителя.
+     * @en Opacity of the divider.
+     */
     opacity: [Number, String],
     /**
      * Увеличивает интервал между элементами контента и строками.
      * Если передается в виде массива, второе значение смещает содержимое слота вниз (или вправо если vertical = true).
+     * @en Increases the spacing between the content and the lines. When passed as an array, the second value shifts the slot content down (or right when vertical = true).
      */
     contentOffset: [Number, String, Array],
-    /** Цвет разделителя. */
+    /**
+     * Цвет разделителя.
+     * @en Color of the divider.
+     */
     color: String,
-    /** Добавляет эффект затухания с обеих сторон. */
+    /**
+     * Добавляет эффект затухания с обеих сторон.
+     * @en Adds a fade-out effect on both ends.
+     */
     gradient: Boolean,
-    /** Добавляет отступ для обычных разделителей и уменьшает максимальную высоту для вертикальных разделителей. */
+    /**
+     * Добавляет отступ для обычных разделителей и уменьшает максимальную высоту для вертикальных разделителей.
+     * @en Adds an indent to horizontal dividers and reduces the maximum height of vertical ones.
+     */
     inset: Boolean,
-    /** Отображает разделитель вертикально */
+    /**
+     * Отображает разделитель вертикально
+     * @en Renders the divider vertically
+     */
     vertical: Boolean,
-    /** Вариант отображения разделителя */
+    /**
+     * Вариант отображения разделителя
+     * @en Visual variant of the divider
+     */
     variant: {
       type: String,
       default: "solid",

package/dist/esm-node/src/components/CdsDrawer/CdsDrawer.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-drawer {
     position: absolute;

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

@@ -165,6 +165,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isHovering.value = false;
     }
     __expose({
+      /**
+       * Ссылка на корневой DOM-элемент панели.
+       * @en Ref to the root DOM element of the drawer.
+       */
       drawerRef
     });
     return () => {

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

@@ -7,42 +7,66 @@ import { d as defineColorProps } from "../../../composables/useColor/useColor.mj
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsDrawerProps = propsFactory(
   {
-    /** Показать/скрыть панель (v-model). */
+    /**
+     * Показать/скрыть панель (v-model).
+     * @en Shows/hides the drawer (v-model).
+     */
     modelValue: {
       type: Boolean,
       default: null
     },
-    /** Постоянно видима, независимо от размера экрана. */
+    /**
+     * Постоянно видима, независимо от размера экрана.
+     * @en Always visible, regardless of the screen size.
+     */
     permanent: {
       type: Boolean,
       default: false
     },
-    /** Временная панель: открывается через v-model и закрывается по оверлею. */
+    /**
+     * Временная панель: открывается через v-model и закрывается по оверлею.
+     * @en Temporary drawer: opens through v-model and closes on the overlay.
+     */
     temporary: {
       type: Boolean,
       default: false
     },
-    /** Свёрнутый вид (только иконки) до наведения мыши. */
+    /**
+     * Свёрнутый вид (только иконки) до наведения мыши.
+     * @en Minified look (icons only) until the mouse hovers over it.
+     */
     minified: {
       type: Boolean,
       default: false
     },
-    /** Применяет `position: fixed`. */
+    /**
+     * Применяет `position: fixed`.
+     * @en Applies `position: fixed`.
+     */
     fixed: {
       type: Boolean,
       default: false
     },
-    /** Позиционирование справа. */
+    /**
+     * Позиционирование справа.
+     * @en Positions the drawer on the right.
+     */
     right: {
       type: Boolean,
       default: false
     },
-    /** Добавляет границы между секциями (prepend/append). */
+    /**
+     * Добавляет границы между секциями (prepend/append).
+     * @en Adds borders between the sections (prepend/append).
+     */
     border: {
       type: Boolean,
       default: false
     },
-    /** Использовать внутренний скролл для секции контента. */
+    /**
+     * Использовать внутренний скролл для секции контента.
+     * @en Uses an inner scroll for the content section.
+     */
     fixedSlots: {
       type: Boolean,
       default: false

package/dist/esm-node/src/components/CdsEmptyState/CdsEmptyState.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-empty-state {
     display: flex;

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

@@ -11,30 +11,55 @@ import { a7 as pick } from "../../../utils/helpers.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsEmptyStateProps = propsFactory(
   {
-    /** Текст кнопки действия. При указании рендерится кнопка под контентом. */
+    /**
+     * Текст кнопки действия. При указании рендерится кнопка под контентом.
+     * @en Text of the action button. When set, a button is rendered below the content.
+     */
     actionText: String,
-    /** Иконка в медиа-области. */
+    /**
+     * Иконка в медиа-области.
+     * @en Icon in the media area.
+     */
     icon: IconValue,
     /**
      * Legacy-иллюстрация из пакета `@central-design-system/illustrations` (CDS 3):
      * kebab-case имя глобально зарегистрированного компонента, например `rocket`.
      * Иллюстрации регистрируются через опцию `illustrations` в `createCds`.
+     * @en Legacy illustration from the `@central-design-system/illustrations` package (CDS 3): the kebab-case name of a globally registered component, for example `rocket`. Illustrations are registered through the `illustrations` option of `createCds`.
      */
     illustration: String,
-    /** Источник изображения в медиа-области (имеет приоритет над `icon`). */
+    /**
+     * Источник изображения в медиа-области (имеет приоритет над `icon`).
+     * @en Source of the image in the media area (takes priority over `icon`).
+     */
     image: String,
-    /** Горизонтальное выравнивание контента: `start`, `center`, `end`. */
+    /**
+     * Горизонтальное выравнивание контента: `start`, `center`, `end`.
+     * @en Horizontal alignment of the content: `start`, `center`, `end`.
+     */
     justify: {
       type: String,
       default: "center"
     },
-    /** Крупный акцентный заголовок над основным заголовком. */
+    /**
+     * Крупный акцентный заголовок над основным заголовком.
+     * @en Large accent heading above the main heading.
+     */
     headline: String,
-    /** Заголовок. */
+    /**
+     * Заголовок.
+     * @en Heading.
+     */
     title: String,
-    /** Описание */
+    /**
+     * Описание
+     * @en Description
+     */
     description: String,
-    /** Максимальная ширина блока описания. */
+    /**
+     * Максимальная ширина блока описания.
+     * @en Maximum width of the description block.
+     */
     textWidth: {
       type: [Number, String],
       default: 500

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

@@ -26,13 +26,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const groupItem = useGroupItem(props, CdsExpandablePanelsSymbol);
     provide(CdsExpandablePanelSymbol, groupItem);
     __expose({
-      /** Панель раскрыта */
+      /**
+       * Панель раскрыта
+       * @en The panel is expanded
+       */
       isSelected: groupItem.isSelected,
-      /** Панель заблокирована */
+      /**
+       * Панель заблокирована
+       * @en The panel is blocked
+       */
       disabled: groupItem.disabled,
-      /** Переключить раскрытие панели */
+      /**
+       * Переключить раскрытие панели
+       * @en Toggles the expansion of the panel
+       */
       toggle: groupItem.toggle,
-      /** Раскрыть/свернуть панель */
+      /**
+       * Раскрыть/свернуть панель
+       * @en Expands or collapses the panel
+       */
       select: groupItem.select
     });
     return () => {

package/dist/esm-node/src/components/CdsExpandablePanel/CdsExpandablePanelTitle.vue_vue_type_script_setup_true_lang.mjs

@@ -34,9 +34,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       readonly: props.readonly
     }));
     __expose({
-      /** Панель раскрыта */
+      /**
+       * Панель раскрыта
+       * @en The panel is expanded
+       */
       isSelected: panel.isSelected,
-      /** Переключить раскрытие панели */
+      /**
+       * Переключить раскрытие панели
+       * @en Toggles the expansion of the panel
+       */
       toggle: panel.toggle
     });
     return () => {

package/dist/esm-node/src/components/CdsExpandablePanel/CdsExpandablePanels.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-expandable-panels {
     position: relative;

package/dist/esm-node/src/components/CdsExpandablePanel/CdsExpandablePanels.vue_vue_type_script_setup_true_lang.mjs

@@ -41,9 +41,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     __expose({
-      /** Раскрыть предыдущую панель */
+      /**
+       * Раскрыть предыдущую панель
+       * @en Expands the previous panel
+       */
       prev,
-      /** Раскрыть следующую панель */
+      /**
+       * Раскрыть следующую панель
+       * @en Expands the next panel
+       */
       next
     });
     return () => {

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

@@ -11,26 +11,44 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mj
 import { a7 as pick } from "../../../utils/helpers.mjs";
 const defineCdsExpandablePanelTitleProps = propsFactory(
   {
-    /** Иконка раскрытия панели */
+    /**
+     * Иконка раскрытия панели
+     * @en Icon shown when the panel is collapsed and can be expanded
+     */
     expandIcon: {
       type: IconValue,
       default: "chevron-down"
     },
-    /** Иконка сворачивания панели */
+    /**
+     * Иконка сворачивания панели
+     * @en Icon shown when the panel is expanded and can be collapsed
+     */
     collapseIcon: {
       type: IconValue,
       default: "chevron-up"
     },
-    /** Скрыть иконку раскрытия/сворачивания */
+    /**
+     * Скрыть иконку раскрытия/сворачивания
+     * @en Hides the expand/collapse icon
+     */
     hideActions: Boolean,
-    /** Подсвечивать заголовок фоном при наведении курсора */
+    /**
+     * Подсвечивать заголовок фоном при наведении курсора
+     * @en Highlights the title with a background on hover
+     */
     hover: {
       type: Boolean,
       default: true
     },
-    /** Подсвечивать заголовок фоном при фокусе */
+    /**
+     * Подсвечивать заголовок фоном при фокусе
+     * @en Highlights the title with a background on focus
+     */
     focusable: Boolean,
-    /** Отключить анимацию заголовка */
+    /**
+     * Отключить анимацию заголовка
+     * @en Turns off the animation of the title
+     */
     static: Boolean,
     ...defineComponentProps(),
     ...defineDimensionsProps(),
@@ -47,9 +65,15 @@ const defineCdsExpandablePanelContentProps = propsFactory(
 );
 const defineCdsExpandablePanelProps = propsFactory(
   {
-    /** Текст заголовка панели */
+    /**
+     * Текст заголовка панели
+     * @en Text of the panel title
+     */
     title: String,
-    /** Текст раскрываемого содержимого панели */
+    /**
+     * Текст раскрываемого содержимого панели
+     * @en Text of the expandable content of the panel
+     */
     text: String,
     ...defineCdsExpandablePanelTitleProps(),
     ...defineCdsExpandablePanelContentProps(),
@@ -63,6 +87,7 @@ const defineCdsExpandablePanelsProps = propsFactory(
   {
     /**
      * Вариант отображения группы панелей
+     * @en Display variant of the panel group
      * @values default, accordion
      */
     variant: {
@@ -72,6 +97,7 @@ const defineCdsExpandablePanelsProps = propsFactory(
     },
     /**
      * Внешний вид панелей
+     * @en Appearance of the panels
      * @values primary, secondary, transparent
      */
     appearance: {
@@ -79,7 +105,10 @@ const defineCdsExpandablePanelsProps = propsFactory(
       default: "primary",
       validator: (value) => CdsExpandablePanelsConstants.appearances.includes(value)
     },
-    /** Отступ между панелями */
+    /**
+     * Отступ между панелями
+     * @en Spacing between the panels
+     */
     gap: [Number, String],
     ...pick(defineCdsExpandablePanelProps(), [
       "collapseIcon",

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

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

@@ -23,10 +23,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     ...defineCdsFieldProps(),
     id: String,
+    /**
+     * Резервирует место под подсказки и сообщения об ошибках под полем
+     * @en Reserves the space for hints and error messages under the field
+     */
     details: Boolean,
     ...defineFocusProps()
   },
-  emits: ["update:focused", "update:modelValue"],
+  emits: ["update:focused", "update:modelValue", "click:clear"],
   setup(__props, {
     expose: __expose
   }) {
@@ -96,9 +100,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     __expose({
-      /** Ref-ссылка на контролл поля ввода */
+      /**
+       * Ref-ссылка на контролл поля ввода
+       * @en Ref to the control of the input
+       */
       controlRef,
-      /** Цвет иконки */
+      /**
+       * Цвет иконки
+       * @en Icon color
+       */
       fieldIconColor: iconColor
     });
     return () => {

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

@@ -11,39 +11,81 @@ import { d as defineColorProps } from "../../../composables/useColor/useColor.mj
 import { E as EventProp } from "../../../utils/helpers.mjs";
 const defineCdsFieldProps = propsFactory(
   {
-    /** Активное состояние поля */
+    /**
+     * Активное состояние поля
+     * @en Active state of the field
+     */
     active: Boolean,
-    /** Состояние ошибки */
+    /**
+     * Состояние ошибки
+     * @en Error state
+     */
     error: Boolean,
-    /** Признак того, что значение поля было изменено пользователем */
+    /**
+     * Признак того, что значение поля было изменено пользователем
+     * @en Marks that the value of the field was changed by the user
+     */
     dirty: Boolean,
-    /** Обратный порядок расположения элементов внутри поля */
+    /**
+     * Обратный порядок расположения элементов внутри поля
+     * @en Reverses the order of the elements inside the field
+     */
     reverse: Boolean,
-    /** Отображать кнопку очистки значения */
+    /**
+     * Отображать кнопку очистки значения
+     * @en Shows the clear button
+     */
     clearable: Boolean,
-    /** Всегда отображать кнопку очистки, а не только при наведении или фокусе */
+    /**
+     * Всегда отображать кнопку очистки, а не только при наведении или фокусе
+     * @en Always show the clear button, not only on hover or focus
+     */
     persistentClearable: Boolean,
-    /** Цвет иконки. Принимает булево значение или строку с цветом */
+    /**
+     * Цвет иконки. Принимает булево значение или строку с цветом
+     * @en Icon color. Accepts a boolean or a color string
+     */
     iconColor: [Boolean, String],
-    /** Иконка во внутреннем слоте prepend перед содержимым поля */
+    /**
+     * Иконка во внутреннем слоте prepend перед содержимым поля
+     * @en Icon in the inner prepend slot, before the content of the field
+     */
     prependInnerIcon: IconValue,
-    /** Иконка во внутреннем слоте append после содержимого поля */
+    /**
+     * Иконка во внутреннем слоте append после содержимого поля
+     * @en Icon in the inner append slot, after the content of the field
+     */
     appendInnerIcon: IconValue,
-    /** Иконка кнопки очистки */
+    /**
+     * Иконка кнопки очистки
+     * @en Icon of the clear button
+     */
     clearIcon: {
       type: IconValue,
       default: "remove"
     },
-    /** Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру. */
+    /**
+     * Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
+     * @en Vertically center the appendInner, prependInner, clearIcon and label elements.
+     */
     centerAffix: {
       type: Boolean,
       default: void 0
     },
-    /** Обработчик клика по кнопке очистки */
+    /**
+     * Обработчик клика по кнопке очистки
+     * @en Handler for a click on the clear button
+     */
     "onClick:clear": EventProp(),
-    /** Обработчик клика по внутренней иконке append */
+    /**
+     * Обработчик клика по внутренней иконке append
+     * @en Handler for a click on the inner append icon
+     */
     "onClick:appendInner": EventProp(),
-    /** Обработчик клика по внутренней иконке prepend */
+    /**
+     * Обработчик клика по внутренней иконке prepend
+     * @en Handler for a click on the inner prepend icon
+     */
     "onClick:prependInner": EventProp(),
     ...defineComponentProps(),
     ...defineDisabledProps(),

package/dist/esm-node/src/components/CdsField/composables/useAutocomplete.mjs

@@ -6,6 +6,7 @@ const defineAutocompleteProps = propsFactory(
      * Помогает влиять на предложения браузера.
      * Значение «suppress» изменяет атрибут name полей, а значение «off» полагается на то, что браузер по собственной инициативе перестанет предлагать значения.
      * Любое другое значение передается встроенной функции автозаполнения для соответствующего элемента.
+     * @en Helps to influence browser suggestions. The `suppress` value changes the name attribute of the fields, and `off` relies on the browser to stop suggesting values on its own. Any other value is passed to the built-in autocomplete of the corresponding element.
      */
     autocomplete: String
   },

package/dist/esm-node/src/components/CdsFileInput/CdsFileInput.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-file-input--hide.cds-input .cds-field,
   .cds-file-input--hide.cds-input .cds-input__control,