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

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

@@ -3,7 +3,10 @@ import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsPageConstants } from "./CdsPage.constants.mjs";
 const defineCdsPageProps = propsFactory(
   {
-    /** Добавляет внутренние отступы странице. */
+    /**
+     * Добавляет внутренние отступы странице.
+     * @en Adds paddings to the page.
+     */
     padding: {
       type: Boolean,
       default: false
@@ -11,6 +14,7 @@ const defineCdsPageProps = propsFactory(
     /**
      * Функция вычисления стилей страницы. Получает суммарный offset
      * (header + footer) и высоту области, возвращает строку стилей.
+     * @en Function that computes the styles of the page. It receives the total offset (header + footer) and the height of the area, and returns a style string.
      */
     styleFn: {
       type: Function,

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

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

@@ -185,9 +185,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       inputPageModel.value = "";
     }
     __expose({
+      /**
+       * Переходит на первую страницу.
+       * @en Jumps to the first page.
+       */
       setFirst: () => setValue(unref(start), "first"),
+      /**
+       * Переходит на последнюю страницу.
+       * @en Jumps to the last page.
+       */
       setLast: () => setValue(unref(start) + unref(length) - 1, "last"),
+      /**
+       * Переходит на следующую страницу.
+       * @en Jumps to the next page.
+       */
       setNext: () => setValue(unref(page) + 1, "next"),
+      /**
+       * Переходит на предыдущую страницу.
+       * @en Jumps to the previous page.
+       */
       setPrev: () => setValue(unref(page) - 1, "prev")
     });
     return () => {

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

@@ -6,99 +6,162 @@ import { C as CdsPaginationConstants } from "./CdsPagination.constants.mjs";
 import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsPaginationProps = propsFactory(
   {
-    /** Начальная страница */
+    /**
+     * Начальная страница
+     * @en Initial page
+     */
     start: {
       type: [Number, String],
       default: 1
     },
-    /** Значение v-model — номер текущей страницы */
+    /**
+     * Значение v-model — номер текущей страницы
+     * @en The v-model value — the number of the current page
+     */
     modelValue: {
       type: Number,
       default: (props) => props.start
     },
-    /** Количество страниц */
+    /**
+     * Количество страниц
+     * @en Number of pages
+     */
     length: {
       type: [Number, String],
       default: 1,
       validator: (value) => value % 1 === 0
     },
-    /** Количество одновременно видимых кнопок страниц */
+    /**
+     * Количество одновременно видимых кнопок страниц
+     * @en Number of page buttons visible at once
+     */
     totalVisible: [Number, String],
-    /** Иконка кнопки перехода на первую страницу */
+    /**
+     * Иконка кнопки перехода на первую страницу
+     * @en Icon of the first page button
+     */
     firstIcon: {
       type: IconValue,
       default: "first"
     },
-    /** Иконка кнопки перехода на предыдущую страницу */
+    /**
+     * Иконка кнопки перехода на предыдущую страницу
+     * @en Icon of the previous page button
+     */
     prevIcon: {
       type: IconValue,
       default: "prev"
     },
-    /** Иконка кнопки перехода на следующую страницу */
+    /**
+     * Иконка кнопки перехода на следующую страницу
+     * @en Icon of the next page button
+     */
     nextIcon: {
       type: IconValue,
       default: "next"
     },
-    /** Иконка кнопки перехода на последнюю страницу */
+    /**
+     * Иконка кнопки перехода на последнюю страницу
+     * @en Icon of the last page button
+     */
     lastIcon: {
       type: IconValue,
       default: "last"
     },
-    /** ARIA-метка корневого элемента навигации */
+    /**
+     * ARIA-метка корневого элемента навигации
+     * @en ARIA label of the root navigation element
+     */
     ariaLabel: {
       type: String,
       default: "Навигация по страницам"
     },
-    /** ARIA-метка кнопки страницы. `{0}` заменяется номером страницы */
+    /**
+     * ARIA-метка кнопки страницы. `{0}` заменяется номером страницы
+     * @en ARIA label of a page button. `{0}` is replaced with the page number
+     */
     pageAriaLabel: {
       type: String,
       default: "Перейти к странице {0}"
     },
-    /** ARIA-метка текущей (активной) страницы. `{0}` заменяется номером страницы */
+    /**
+     * ARIA-метка текущей (активной) страницы. `{0}` заменяется номером страницы
+     * @en ARIA label of the current (active) page. `{0}` is replaced with the page number
+     */
     currentPageAriaLabel: {
       type: String,
       default: "Текущая страница, страница {0}"
     },
-    /** ARIA-метка кнопки перехода на первую страницу */
+    /**
+     * ARIA-метка кнопки перехода на первую страницу
+     * @en ARIA label of the first page button
+     */
     firstAriaLabel: {
       type: String,
       default: "Первая страница"
     },
-    /** ARIA-метка кнопки перехода на предыдущую страницу */
+    /**
+     * ARIA-метка кнопки перехода на предыдущую страницу
+     * @en ARIA label of the previous page button
+     */
     previousAriaLabel: {
       type: String,
       default: "Предыдущая страница"
     },
-    /** ARIA-метка кнопки перехода на следующую страницу */
+    /**
+     * ARIA-метка кнопки перехода на следующую страницу
+     * @en ARIA label of the next page button
+     */
     nextAriaLabel: {
       type: String,
       default: "Следующая страница"
     },
-    /** ARIA-метка кнопки перехода на последнюю страницу */
+    /**
+     * ARIA-метка кнопки перехода на последнюю страницу
+     * @en ARIA label of the last page button
+     */
     lastAriaLabel: {
       type: String,
       default: "Последняя страница"
     },
-    /** Текст, отображаемый между страницами при их сокрытии */
+    /**
+     * Текст, отображаемый между страницами при их сокрытии
+     * @en Text displayed between pages when they are collapsed
+     */
     ellipsis: {
       type: String,
       default: "..."
     },
-    /** Отображение кнопок перехода на первую/последнюю страницу. `'only-first'` — только на первую */
+    /**
+     * Отображение кнопок перехода на первую/последнюю страницу. `'only-first'` — только на первую
+     * @en Shows the first/last page buttons. `'only-first'` shows only the first page button
+     */
     showFirstLastPage: {
       type: [Boolean, String],
       default: false
     },
-    /** Цвет кнопок страниц */
+    /**
+     * Цвет кнопок страниц
+     * @en Color of the page buttons
+     */
     color: String,
-    /** Цвет активной кнопки страницы */
+    /**
+     * Цвет активной кнопки страницы
+     * @en Color of the active page button
+     */
     activeColor: String,
-    /** Отображение поля быстрого перехода к странице */
+    /**
+     * Отображение поля быстрого перехода к странице
+     * @en Shows the quick jump field
+     */
     quickJumper: {
       type: Boolean,
       default: false
     },
-    /** Текст-подпись перед полем быстрого перехода к странице */
+    /**
+     * Текст-подпись перед полем быстрого перехода к странице
+     * @en Caption text before the quick jump field
+     */
     quickJumperLabel: {
       type: String,
       default: "Перейти к странице"

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

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

@@ -7,52 +7,100 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mj
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsProgressBarProps = propsFactory(
   {
-    /** Абсолютное позиционирование компонента */
+    /**
+     * Абсолютное позиционирование компонента
+     * @en Absolute positioning of the component
+     */
     absolute: Boolean,
-    /** Неопределенное состояние прогресса без фиксированного значения */
+    /**
+     * Неопределенное состояние прогресса без фиксированного значения
+     * @en Indeterminate progress state with no fixed value
+     */
     indeterminate: Boolean,
-    /** Делает прогресс-бар кликабельным */
+    /**
+     * Делает прогресс-бар кликабельным
+     * @en Makes the progress bar clickable
+     */
     clickable: Boolean,
-    /** Обратное направление заполнения шкалы прогресса */
+    /**
+     * Обратное направление заполнения шкалы прогресса
+     * @en Fills the progress bar in the opposite direction
+     */
     reverse: Boolean,
-    /** Отображать потоковую анимацию поверх индикатора прогресса */
+    /**
+     * Отображать потоковую анимацию поверх индикатора прогресса
+     * @en Shows a streaming animation over the progress indicator
+     */
     stream: Boolean,
-    /** Отображать полосы на индикаторе прогресса */
+    /**
+     * Отображать полосы на индикаторе прогресса
+     * @en Shows stripes on the progress indicator
+     */
     striped: Boolean,
-    /** Скруглять индикатор прогресса */
+    /**
+     * Скруглять индикатор прогресса
+     * @en Rounds the progress indicator
+     */
     roundedBar: Boolean,
-    /** Управление отображением активного состояния прогресс-бара */
+    /**
+     * Управление отображением активного состояния прогресс-бара
+     * @en Controls the active state of the progress bar
+     */
     active: {
       type: Boolean,
       default: true
     },
-    /** Высота прогресс-бара */
+    /**
+     * Высота прогресс-бара
+     * @en Height of the progress bar
+     */
     height: {
       type: [Number, String],
       default: 4
     },
-    /** Максимальное значение прогресса */
+    /**
+     * Максимальное значение прогресса
+     * @en Maximum progress value
+     */
     max: {
       type: [Number, String],
       default: 100
     },
-    /** Текущее значение прогресса */
+    /**
+     * Текущее значение прогресса
+     * @en Current progress value
+     */
     modelValue: {
       type: [Number, String],
       default: 0
     },
-    /** Значение буфера прогресса */
+    /**
+     * Значение буфера прогресса
+     * @en Buffer value of the progress
+     */
     bufferValue: {
       type: [Number, String],
       default: 0
     },
-    /** Прозрачность основного индикатора прогресса */
+    /**
+     * Прозрачность основного индикатора прогресса
+     * @en Opacity of the main progress indicator
+     */
     opacity: [Number, String],
-    /** Прозрачность фона прогресс-бара */
+    /**
+     * Прозрачность фона прогресс-бара
+     * @en Opacity of the progress bar background
+     */
     bgOpacity: [Number, String],
-    /** Цвет буферной части прогресс-бара */
+    /**
+     * Цвет буферной части прогресс-бара
+     * @en Color of the buffer part of the progress bar
+     */
     bufferColor: String,
-    /** Прозрачность буферной части прогресс-бара */
+    /**
+     * Прозрачность буферной части прогресс-бара
+     * @en Opacity of the buffer part of the progress bar
+     */
     bufferOpacity: [Number, String],
     ...defineLocationProps({ location: "top" }),
     ...defineChunksProps(),

package/dist/esm-node/src/components/CdsProgressBar/composables/useChunk.mjs

@@ -5,6 +5,7 @@ const defineChunksProps = propsFactory(
   {
     /**
      * Количество сегментов, на которые разбивается прогресс-бар
+     * @en Number of segments the progress bar is split into
      */
     chunkCount: {
       type: [Number, String],
@@ -12,6 +13,7 @@ const defineChunksProps = propsFactory(
     },
     /**
      * Ширина одного сегмента прогресс-бара
+     * @en Width of a single segment of the progress bar
      */
     chunkWidth: {
       type: [Number, String],
@@ -19,6 +21,7 @@ const defineChunksProps = propsFactory(
     },
     /**
      * Расстояние между сегментами прогресс-бара
+     * @en Gap between the segments of the progress bar
      */
     chunkGap: {
       type: [Number, String],
@@ -26,6 +29,7 @@ const defineChunksProps = propsFactory(
     },
     /**
      * Вариант отображения сегментов прогресс-бара
+     * @en Display variant of the progress bar segments
      */
     variant: {
       type: String,

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

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

@@ -6,28 +6,49 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mj
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 const defineCdsProgressCircleProps = propsFactory(
   {
-    /** Постоянно отображается анимация; использовать, если ход загрузки неизвестен. Если задать строку «disable-shrink», будет использоваться более простая анимация, которая не запускается в основном потоке */
+    /**
+     * Постоянно отображается анимация; использовать, если ход загрузки неизвестен. Если задать строку «disable-shrink», будет использоваться более простая анимация, которая не запускается в основном потоке
+     * @en Shows the animation continuously; use it when the course of the loading is unknown. The string `disable-shrink` switches to a simpler animation that does not run on the main thread
+     */
     indeterminate: [Boolean, String],
-    /** Значение в процентах текущего прогресса загрузки */
+    /**
+     * Значение в процентах текущего прогресса загрузки
+     * @en Current loading progress in percent
+     */
     modelValue: {
       type: [Number, String],
       default: 0
     },
-    /** Поворачивает начальную точку окружности на указанное количество градусов */
+    /**
+     * Поворачивает начальную точку окружности на указанное количество градусов
+     * @en Turns the starting point of the circle by the given number of degrees
+     */
     rotate: {
       type: [Number, String],
       default: 0
     },
-    /** Задает толщину контура круга в пикселях */
+    /**
+     * Задает толщину контура круга в пикселях
+     * @en Sets the thickness of the circle stroke in pixels
+     */
     width: {
       type: [Number, String],
       default: 4
     },
-    /** Скругляет концы дуги прогресса */
+    /**
+     * Скругляет концы дуги прогресса
+     * @en Rounds the ends of the progress arc
+     */
     rounded: Boolean,
-    /** Цвет загрузчика */
+    /**
+     * Цвет загрузчика
+     * @en Color of the loader
+     */
     color: String,
-    /** Цвет фона загрузчика */
+    /**
+     * Цвет фона загрузчика
+     * @en Background color of the loader
+     */
     bgColor: String,
     ...defineComponentProps(),
     ...defineRevealProps(),

package/dist/esm-node/src/components/CdsRadio/CdsRadio.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-radio {
     --cds-selection-control-width: calc(16px / var(--cds-base-unit) * 1rem + var(--cds-spacing-200));

package/dist/esm-node/src/components/CdsRadioGroup/CdsRadioGroup.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-radio-group > .cds-input__control {
     flex-direction: column;

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

@@ -6,7 +6,10 @@ import { C as CdsRadioGroupConstants } from "./CdsRadioGroup.constants.mjs";
 import { a3 as omit } from "../../../utils/helpers.mjs";
 const defineCdsRadioGroupProps = propsFactory(
   {
-    /** Высота компонента */
+    /**
+     * Высота компонента
+     * @en Height of the component
+     */
     height: {
       type: [Number, String],
       default: "auto"
@@ -18,17 +21,26 @@ const defineCdsRadioGroupProps = propsFactory(
       }),
       ["multiple"]
     ),
-    /** Иконка выбранной радиокнопки */
+    /**
+     * Иконка выбранной радиокнопки
+     * @en Icon of a selected radio button
+     */
     trueIcon: {
       type: IconValue,
       default: "radio-on"
     },
-    /** Иконка невыбранной радиокнопки */
+    /**
+     * Иконка невыбранной радиокнопки
+     * @en Icon of an unselected radio button
+     */
     falseIcon: {
       type: IconValue,
       default: "radio-off"
     },
-    /** Тип нативного элемента input у кнопок группы */
+    /**
+     * Тип нативного элемента input у кнопок группы
+     * @en Type of the native input element of the group buttons
+     */
     type: {
       type: String,
       default: "radio"

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

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

@@ -4,11 +4,20 @@ import { C as CdsResponsiveConstants } from "./CdsResponsive.constants.mjs";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsResponsiveProps = propsFactory(
   {
-    /** Соотношение сторон контента. Например `1.7778` (16/9) или `'4/3'`. */
+    /**
+     * Соотношение сторон контента. Например `1.7778` (16/9) или `'4/3'`.
+     * @en Aspect ratio of the content. For example `1.7778` (16/9) or `'4/3'`.
+     */
     aspectRatio: [Number, String],
-    /** CSS-класс, применяемый к обёртке контента. */
+    /**
+     * CSS-класс, применяемый к обёртке контента.
+     * @en CSS class applied to the content wrapper.
+     */
     contentClass: [String, Array, Object],
-    /** Отображает компонент как inline-блок (`inline-flex`) вместо блочного. */
+    /**
+     * Отображает компонент как inline-блок (`inline-flex`) вместо блочного.
+     * @en Renders the component as an inline block (`inline-flex`) instead of a block one.
+     */
     inline: Boolean,
     ...defineComponentProps(),
     ...defineDimensionsProps()

package/dist/esm-node/src/components/CdsSelect/CdsSelect.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-select .cds-field .cds-text-input__prefix,
   .cds-select .cds-field .cds-text-input__suffix,