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

package/dist/esm-node/src/components/CdsIcon/CdsIcon.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-icon {
     --cds-icon-size-multiplier: 1;

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

@@ -7,24 +7,37 @@ import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsIconProps = propsFactory(
   {
-    /** Название иконки или компонент иконки, который будет отображаться */
+    /**
+     * Название иконки или компонент иконки, который будет отображаться
+     * @en Name of the icon or the icon component to render
+     */
     icon: {
       type: [Boolean, String, Function, Object],
       default: void 0
     },
     /**
      * Строковое имя иконки из зарегистрированного набора (алиас для icon)
+     * @en String name of an icon from a registered pack (an alias for icon)
      * @example `<CdsIcon name="add" />`
      */
     name: {
       type: String,
       default: void 0
     },
-    /** Добавляет отступ справа от иконки — для иконки перед текстом */
+    /**
+     * Добавляет отступ справа от иконки — для иконки перед текстом
+     * @en Adds spacing to the right of the icon — for an icon before the text
+     */
     start: Boolean,
-    /** Добавляет отступ слева от иконки — для иконки после текста */
+    /**
+     * Добавляет отступ слева от иконки — для иконки после текста
+     * @en Adds spacing to the left of the icon — for an icon after the text
+     */
     end: Boolean,
-    /** Прозрачность иконки — число от 0 до 1 */
+    /**
+     * Прозрачность иконки — число от 0 до 1
+     * @en Opacity of the icon — a number between 0 and 1
+     */
     opacity: [String, Number],
     ...defineTagProps({ tag: "i" }),
     ...defineColorProps(),

package/dist/esm-node/src/components/CdsImage/CdsImage.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-image {
     z-index: 0;

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

@@ -248,10 +248,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, null);
     }
     __expose({
+      /**
+       * Фактический адрес загруженного изображения — с учётом `srcset` и выбранной браузером плотности.
+       * @en Actual address of the loaded image — taking `srcset` and the density chosen by the browser into account.
+       */
       currentSrc,
+      /**
+       * Ссылка на DOM-элемент `img`.
+       * @en Reference to the `img` DOM element.
+       */
       image,
+      /**
+       * Состояние загрузки изображения: ожидание, загрузка, успех или ошибка.
+       * @en Loading state of the image: idle, loading, success or error.
+       */
       state,
+      /**
+       * Собственная ширина загруженного изображения в пикселях.
+       * @en Natural width of the loaded image in pixels.
+       */
       naturalWidth,
+      /**
+       * Собственная высота загруженного изображения в пикселях.
+       * @en Natural height of the loaded image in pixels.
+       */
       naturalHeight
     });
     return () => {

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

@@ -5,28 +5,58 @@ import { C as CdsImageConstants } from "./CdsImage.constants.mjs";
 import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsImageProps = propsFactory(
   {
-    /** Позиционирует изображение как `position: absolute`, заполняя родителя. */
+    /**
+     * Позиционирует изображение как `position: absolute`, заполняя родителя.
+     * @en Positions the image with `position: absolute`, filling its parent.
+     */
     absolute: Boolean,
-    /** Альтернативный текст изображения (атрибут `alt`). */
+    /**
+     * Альтернативный текст изображения (атрибут `alt`).
+     * @en Alternative text of the image (the `alt` attribute).
+     */
     alt: String,
-    /** Масштабирует изображение, чтобы оно полностью закрывало контейнер (`object-fit: cover`). */
+    /**
+     * Масштабирует изображение, чтобы оно полностью закрывало контейнер (`object-fit: cover`).
+     * @en Scales the image so that it covers the whole container (`object-fit: cover`).
+     */
     cover: Boolean,
-    /** Цвет фона-плейсхолдера, отображаемого во время загрузки. */
+    /**
+     * Цвет фона-плейсхолдера, отображаемого во время загрузки.
+     * @en Background color of the placeholder shown while loading.
+     */
     color: String,
-    /** Управляет возможностью перетаскивания изображения (атрибут `draggable`). */
+    /**
+     * Управляет возможностью перетаскивания изображения (атрибут `draggable`).
+     * @en Controls whether the image can be dragged (the `draggable` attribute).
+     */
     draggable: {
       type: [Boolean, String],
       default: void 0
     },
-    /** Принудительно загружает изображение сразу, не дожидаясь появления в области видимости. */
+    /**
+     * Принудительно загружает изображение сразу, не дожидаясь появления в области видимости.
+     * @en Loads the image immediately instead of waiting for it to enter the viewport.
+     */
     eager: Boolean,
-    /** CSS-градиент, накладываемый поверх изображения. Например `'to top, rgba(0,0,0,.4), transparent'`. */
+    /**
+     * CSS-градиент, накладываемый поверх изображения. Например `'to top, rgba(0,0,0,.4), transparent'`.
+     * @en CSS gradient laid over the image. For example `'to top, rgba(0,0,0,.4), transparent'`.
+     */
     gradient: String,
-    /** CSS-класс, применяемый к внутреннему элементу `<img>`. */
+    /**
+     * CSS-класс, применяемый к внутреннему элементу `<img>`.
+     * @en CSS class applied to the inner `<img>` element.
+     */
     imageClass: [String, Array, Object],
-    /** Источник изображения-заглушки низкого качества, показываемого до загрузки основного. */
+    /**
+     * Источник изображения-заглушки низкого качества, показываемого до загрузки основного.
+     * @en Source of the low-quality placeholder image shown until the main one loads.
+     */
     lazySrc: String,
-    /** Опции `IntersectionObserver` для ленивой загрузки. */
+    /**
+     * Опции `IntersectionObserver` для ленивой загрузки.
+     * @en `IntersectionObserver` options for lazy loading.
+     */
     options: {
       type: Object,
       default: () => ({
@@ -35,20 +65,38 @@ const defineCdsImageProps = propsFactory(
         threshold: void 0
       })
     },
-    /** Значение атрибута `sizes` для адаптивных изображений. */
+    /**
+     * Значение атрибута `sizes` для адаптивных изображений.
+     * @en Value of the `sizes` attribute for responsive images.
+     */
     sizes: String,
-    /** Источник изображения. Строка или объект с `src`/`srcset`/`lazySrc`/`aspect`. */
+    /**
+     * Источник изображения. Строка или объект с `src`/`srcset`/`lazySrc`/`aspect`.
+     * @en Image source. A string or an object with `src`/`srcset`/`lazySrc`/`aspect`.
+     */
     src: {
       type: [String, Object],
       default: ""
     },
-    /** Значение атрибута `crossorigin`. */
+    /**
+     * Значение атрибута `crossorigin`.
+     * @en Value of the `crossorigin` attribute.
+     */
     crossorigin: String,
-    /** Значение атрибута `referrerpolicy`. */
+    /**
+     * Значение атрибута `referrerpolicy`.
+     * @en Value of the `referrerpolicy` attribute.
+     */
     referrerpolicy: String,
-    /** Набор источников изображения для разных разрешений (атрибут `srcset`). */
+    /**
+     * Набор источников изображения для разных разрешений (атрибут `srcset`).
+     * @en Set of image sources for different resolutions (the `srcset` attribute).
+     */
     srcset: String,
-    /** Значение `object-position` для позиционирования изображения внутри контейнера. */
+    /**
+     * Значение `object-position` для позиционирования изображения внутри контейнера.
+     * @en Value of `object-position` that places the image inside the container.
+     */
     position: String,
     ...defineCdsResponsiveProps(),
     ...defineTransitionProps(),

package/dist/esm-node/src/components/CdsInput/CdsInput.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-input {
     display: grid;

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

@@ -101,27 +101,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       CdsInputIcon
     } = useInputIcon(props);
     __expose({
-      /** ID поля ввода */
+      /**
+       * ID поля ввода
+       * @en ID of the input
+       */
       id,
-      /** Является ли поле ввода "грязным" */
+      /**
+       * Является ли поле ввода "грязным"
+       * @en Whether the input is dirty
+       */
       isDirty,
-      /** Является ли поле ввода заблокированным */
+      /**
+       * Является ли поле ввода заблокированным
+       * @en Whether the input is disabled
+       */
       isDisabled,
-      /** Является ли поле ввода только для чтения */
+      /**
+       * Является ли поле ввода только для чтения
+       * @en Whether the input is read-only
+       */
       isReadonly,
-      /** Является ли поле ввода "чистым" */
+      /**
+       * Является ли поле ввода "чистым"
+       * @en Whether the input is pure
+       */
       isPure,
-      /** Является ли поле ввода валидным */
+      /**
+       * Является ли поле ввода валидным
+       * @en Whether the input is valid
+       */
       isValid,
-      /** Является ли поле ввода в процессе валидации */
+      /**
+       * Является ли поле ввода в процессе валидации
+       * @en Whether the input is being validated
+       */
       isValidating,
-      /** Сообщения об ошибках валидации */
+      /**
+       * Сообщения об ошибках валидации
+       * @en Validation error messages
+       */
       errorMessages,
-      /** Функция сброса поля ввода в исходное состояние */
+      /**
+       * Функция сброса поля ввода в исходное состояние
+       * @en Resets the input to its initial state
+       */
       reset,
-      /** Функция сброса валидации поля ввода */
+      /**
+       * Функция сброса валидации поля ввода
+       * @en Resets the validation of the input
+       */
       resetValidation,
-      /** Функция валидации поля ввода */
+      /**
+       * Функция валидации поля ввода
+       * @en Validates the input
+       */
       validate
     });
     return () => {

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

@@ -12,32 +12,68 @@ import { d as defineColorProps } from "../../../composables/useColor/useColor.mj
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 const defineCdsInputProps = propsFactory(
   {
-    /** Уникальный идентификатор компонента */
+    /**
+     * Уникальный идентификатор компонента
+     * @en Unique identifier of the component
+     */
     id: String,
-    /** Текст метки (label) компонента */
+    /**
+     * Текст метки (label) компонента
+     * @en Label text of the component
+     */
     label: String,
-    /** Описание компонента, отображаемое под меткой */
+    /**
+     * Описание компонента, отображаемое под меткой
+     * @en Description of the component, shown under the label
+     */
     description: String,
-    /** Иконка в слоте append после контента */
+    /**
+     * Иконка в слоте append после контента
+     * @en Icon in the append slot, after the content
+     */
     appendIcon: IconValue,
-    /** Иконка в слоте prepend перед контентом */
+    /**
+     * Иконка в слоте prepend перед контентом
+     * @en Icon in the prepend slot, before the content
+     */
     prependIcon: IconValue,
-    /** Цвет иконки. Принимает булево значение или строку с цветом */
+    /**
+     * Цвет иконки. Принимает булево значение или строку с цветом
+     * @en Icon color. Accepts a boolean or a color string
+     */
     iconColor: [Boolean, String],
-    /** Текст подсказки, отображаемый под полем ввода */
+    /**
+     * Текст подсказки, отображаемый под полем ввода
+     * @en Hint text shown under the input
+     */
     hint: String,
-    /** Всегда отображать подсказку, а не только при фокусе */
+    /**
+     * Всегда отображать подсказку, а не только при фокусе
+     * @en Always show the hint, not only on focus
+     */
     persistentHint: Boolean,
-    /** Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений */
+    /**
+     * Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
+     * @en Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages
+     */
     hideDetails: [Boolean, String],
-    /** Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру. */
+    /**
+     * Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
+     * @en Vertically center the appendInner, prependInner, clearIcon and label elements.
+     */
     centerAffix: {
       type: Boolean,
       default: true
     },
-    /** Обработчик клика в слоте prepend */
+    /**
+     * Обработчик клика в слоте prepend
+     * @en Handler for a click in the prepend slot
+     */
     "onClick:prepend": EventProp(),
-    /** Обработчик клика в слоте append */
+    /**
+     * Обработчик клика в слоте append
+     * @en Handler for a click in the append slot
+     */
     "onClick:append": EventProp(),
     ...defineComponentProps(),
     ...defineValidationProps(),

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

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

@@ -8,6 +8,10 @@ import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 import { E as EventProp } from "../../../utils/helpers.mjs";
 const defineCdsLabelProps = propsFactory(
   {
+    /**
+     * Идентификатор поля, к которому относится подпись — значение HTML-атрибута `for`
+     * @en Identifier of the field the label belongs to — the value of the `for` HTML attribute
+     */
     for: String,
     onClick: EventProp(),
     ...defineTextProps(),

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

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

@@ -4,7 +4,10 @@ import { C as CdsLayoutConstants } from "./CdsLayout.constants.mjs";
 import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsLayoutProps = propsFactory(
   {
-    /** Контейнерный режим: макет скроллится внутри себя, а не страницы. */
+    /**
+     * Контейнерный режим: макет скроллится внутри себя, а не страницы.
+     * @en Container mode: the layout scrolls inside itself instead of scrolling the page.
+     */
     container: {
       type: Boolean,
       default: false
@@ -12,6 +15,7 @@ const defineCdsLayoutProps = propsFactory(
     /**
      * Схема макета из трёх строк: верх (header), середина (left-page-right),
      * низ (footer). Например `'hhh lpr fff'`.
+     * @en Layout scheme of three strings: top (header), middle (left-page-right), bottom (footer). For example `'hhh lpr fff'`.
      */
     view: {
       type: String,

package/dist/esm-node/src/components/CdsLink/CdsLink.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-link {
     color: rgb(var(--cds-color-content-link));

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

@@ -6,7 +6,10 @@ import { C as CdsLinkConstants } from "./CdsLink.constants.mjs";
 import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsLinkProps = propsFactory(
   {
-    /** Отключает ссылку: навигация не выполняется, проставляются aria-disabled и tabindex=-1 */
+    /**
+     * Отключает ссылку: навигация не выполняется, проставляются aria-disabled и tabindex=-1
+     * @en Disables the link: no navigation happens, aria-disabled and tabindex=-1 are set
+     */
     disabled: {
       type: Boolean,
       default: void 0

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

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

@@ -99,17 +99,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     __expose({
       /** Текущий индекс клавиатурной навигации */
       navigationIndex,
-      /** Карта дочерних элементов по идентификаторам родителей */
+      /**
+       * Карта дочерних элементов по идентификаторам родителей
+       * @en Map of child items keyed by the identifiers of their parents
+       */
       children,
-      /** Карта родительских элементов по идентификаторам дочерних */
+      /**
+       * Карта родительских элементов по идентификаторам дочерних
+       * @en Map of parent items keyed by the identifiers of their children
+       */
       parents,
-      /** Возвращает путь (массив идентификаторов) до элемента по его id */
+      /**
+       * Возвращает путь (массив идентификаторов) до элемента по его id
+       * @en Returns the path (an array of identifiers) to an item by its id
+       */
       getPath,
-      /** Раскрывает или сворачивает группу по её идентификатору */
+      /**
+       * Раскрывает или сворачивает группу по её идентификатору
+       * @en Expands or collapses a group by its identifier
+       */
       open,
-      /** Выбирает или снимает выбор с элемента по его идентификатору */
+      /**
+       * Выбирает или снимает выбор с элемента по его идентификатору
+       * @en Selects or deselects an item by its identifier
+       */
       select,
-      /** Устанавливает фокус на элемент списка (по индексу или ключевому слову: `next`, `prev`, `first`, `last`) */
+      /**
+       * Устанавливает фокус на элемент списка (по индексу или ключевому слову: `next`, `prev`, `first`, `last`)
+       * @en Moves the focus to a list item (by index or by a keyword: `next`, `prev`, `first`, `last`)
+       */
       focus
     });
     return () => {

package/dist/esm-node/src/components/CdsList/CdsListGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -65,7 +65,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       open(!unref(isOpen), e);
     }
     __expose({
-      /** Признак того, что группа раскрыта */
+      /**
+       * Признак того, что группа раскрыта
+       * @en Whether the group is expanded
+       */
       isOpen
     });
     return () => {

package/dist/esm-node/src/components/CdsList/CdsListItem.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-list-item {
     position: relative;