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

package/dist/es/src/components/CdsList/index.js

@@ -1,5 +1,5 @@
 import { w as withConstants } from "../../core/withConstants.js";
-import { C as CdsListConstants, a as CdsListItemConstants, i as CdsListItemActionConstants, j as CdsListItemImageConstants, k as CdsListItemMediaConstants, g as CdsListItemSubtitleConstants, h as CdsListItemTitleConstants, f as CdsListItemDescriptionConstants, d as CdsListItemDividerConstants, b as CdsListGroupConstants } from "./api/CdsList.constants.js";
+import { C as CdsListConstants, a as CdsListItemConstants, i as CdsListItemActionConstants, j as CdsListItemImageConstants, k as CdsListItemMediaConstants, g as CdsListItemSubtitleConstants, h as CdsListItemTitleConstants, f as CdsListItemDescriptionConstants, d as CdsListItemDividerConstants, b as CdsListGroupConstants, c as CdsListSubheaderConstants } from "./api/CdsList.constants.js";
 import { _ as _sfc_main } from "./CdsList.vue_vue_type_script_setup_true_lang.js";
 import { _ as _sfc_main$9 } from "./CdsListGroup.vue_vue_type_script_setup_true_lang.js";
 import { _ as _sfc_main$1 } from "./CdsListItem.vue_vue_type_script_setup_true_lang.js";
@@ -10,6 +10,7 @@ import { _ as _sfc_main$3 } from "./CdsListItemImage.vue_vue_type_script_lang.js
 import { _ as _sfc_main$4 } from "./CdsListItemMedia.vue_vue_type_script_setup_true_lang.js";
 import { _ as _sfc_main$5 } from "./CdsListItemSubtitle.vue_vue_type_script_lang.js";
 import { _ as _sfc_main$6 } from "./CdsListItemTitle.vue_vue_type_script_lang.js";
+import { _ as _sfc_main$a } from "./CdsListSubheader.vue_vue_type_script_setup_true_lang.js";
 const CdsList = withConstants(_sfc_main, CdsListConstants);
 const CdsListItem = withConstants(_sfc_main$1, CdsListItemConstants);
 const CdsListItemAction = withConstants(_sfc_main$2, CdsListItemActionConstants);
@@ -20,6 +21,7 @@ const CdsListItemTitle = withConstants(_sfc_main$6, CdsListItemTitleConstants);
 const CdsListItemDescription = withConstants(_sfc_main$7, CdsListItemDescriptionConstants);
 const CdsListItemDivider = withConstants(_sfc_main$8, CdsListItemDividerConstants);
 const CdsListGroup = withConstants(_sfc_main$9, CdsListGroupConstants);
+const CdsListSubheader = withConstants(_sfc_main$a, CdsListSubheaderConstants);
 export {
   CdsList as C,
   CdsListItem as a,
@@ -30,6 +32,7 @@ export {
   CdsListItemImage as f,
   CdsListItemMedia as g,
   CdsListItemSubtitle as h,
-  CdsListItemTitle as i
+  CdsListItemTitle as i,
+  CdsListSubheader as j
 };
 //# sourceMappingURL=index.js.map

package/dist/es/src/components/CdsLoader/CdsLoader.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-loader {
     position: relative;

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

@@ -1,9 +1,9 @@
 import { defineComponent, useAttrs, createVNode, unref, mergeProps } from "vue";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
 import { C as CdsLoaderConstants } from "./api/CdsLoader.constants.js";
 import { d as defineCdsLoaderProps } from "./api/CdsLoader.props.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useSize } from "../../composables/useSize/useSize.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

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

@@ -5,11 +5,20 @@ import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
 const defineCdsLoaderProps = propsFactory(
   {
-    /** Зафиксировать загрузчик относительно текущего контейнера */
+    /**
+     * Зафиксировать загрузчик относительно текущего контейнера
+     * @en Pins the loader to the current container
+     */
     fixed: Boolean,
-    /** Отображать фиксированный полноэкранный загрузчик */
+    /**
+     * Отображать фиксированный полноэкранный загрузчик
+     * @en Renders a fixed full-screen loader
+     */
     overlay: Boolean,
-    /** Укажите описание, которое лучше всего описывает состояние загрузки (aria-label) */
+    /**
+     * Укажите описание, которое лучше всего описывает состояние загрузки (aria-label)
+     * @en Description that best explains the loading state (aria-label)
+     */
     description: String,
     ...defineSizeProps(),
     ...defineThemeProps(),

package/dist/es/src/components/CdsMain/CdsMain.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-main {
     display: block;

package/dist/es/src/components/CdsMenu/CdsMenu.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-menu > .cds-overlay__content {
     display: flex;

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

@@ -5,9 +5,15 @@ import { a as CdsMenuConstants } from "./CdsMenu.constants.js";
 import { C as CdsModalTransition } from "../../../transitions/modalTransition.js";
 const defineCdsMenuProps = propsFactory(
   {
-    /** Уникальный идентификатор для связывания меню с его активатором. Если не указано, будет сгенерирован автоматически. */
+    /**
+     * Уникальный идентификатор для связывания меню с его активатором. Если не указано, будет сгенерирован автоматически.
+     * @en Unique identifier that links the menu to its activator. If it is not set, it is generated automatically.
+     */
     id: String,
-    /** Открывает/закрывает меню с помощью клавиш со стрелками left/right, а не up/down (для вложенных меню). */
+    /**
+     * Открывает/закрывает меню с помощью клавиш со стрелками left/right, а не up/down (для вложенных меню).
+     * @en Opens and closes the menu with the left/right arrow keys instead of up/down (for nested menus).
+     */
     submenu: Boolean,
     ...omit(
       defineCdsOverlayProps({

package/dist/es/src/components/CdsMessages/CdsMessages.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-messages {
     position: relative;

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

@@ -6,14 +6,23 @@ import { C as CdsMessagesConstants } from "./CdsMessages.constants.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsMessagesProps = propsFactory(
   {
-    /** Активное состояние */
+    /**
+     * Активное состояние
+     * @en Active state
+     */
     active: Boolean,
-    /** Сообщения для отображения под полем ввода */
+    /**
+     * Сообщения для отображения под полем ввода
+     * @en Messages shown under the input
+     */
     messages: {
       type: [Array, String],
       default: () => []
     },
-    /** Скрыть сообщения под полем ввода */
+    /**
+     * Скрыть сообщения под полем ввода
+     * @en Hide the messages under the input
+     */
     hideMessages: Boolean,
     ...defineColorProps(),
     ...defineComponentProps(),

package/dist/es/src/components/CdsModal/CdsModal.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-modal {
     align-items: center;

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

@@ -5,9 +5,15 @@ import { C as CdsModalTransition } from "../../../transitions/modalTransition.js
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
 const defineCdsModalProps = propsFactory(
   {
-    /** Разворачивает модальное окно на весь экран. */
+    /**
+     * Разворачивает модальное окно на весь экран.
+     * @en Expands the modal to the whole screen.
+     */
     fullscreen: Boolean,
-    /** Включает прокрутку контента внутри модального окна. */
+    /**
+     * Включает прокрутку контента внутри модального окна.
+     * @en Enables scrolling of the content inside the modal.
+     */
     scrollable: Boolean,
     ...defineCdsOverlayProps({
       captureFocus: true,

package/dist/es/src/components/CdsNotification/CdsNotification.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-notification {
     display: flex;

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

@@ -2,6 +2,7 @@ import { defineComponent, useSlots, toRef, unref, createVNode, mergeProps } from
 import { a as useLocale } from "../../composables/useLocale/useLocale.js";
 import { u as useStatus } from "../../composables/useStatus/useStatus.js";
 import { u as useText } from "../../composables/useText/useText.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { u as useProxyModel } from "../../core/useProxyModel.js";
 import { c as classNames } from "../../utils/dom/classNames.js";
@@ -10,7 +11,6 @@ import { C as CdsFunctionalButton } from "../CdsFunctionalButton/index.js";
 import { C as CdsIcon } from "../CdsIcon/index.js";
 import { C as CdsNotificationConstants, n as notificationStatusIcons } from "./api/CdsNotification.constants.js";
 import { d as defineCdsNotificationProps } from "./api/CdsNotification.props.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { a as useBackgroundColor, u as useTextColor } from "../../composables/useColor/useColor.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

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

@@ -1,39 +1,60 @@
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.js";
 import { d as defineStatusProps } from "../../../composables/useStatus/useStatus.js";
 import { d as defineTextProps } from "../../../composables/useText/useText.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { a7 as pick } from "../../../utils/helpers.js";
 import { C as CdsNotificationConstants } from "./CdsNotification.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsNotificationProps = propsFactory(
   {
-    /** Заголовок уведомления. */
+    /**
+     * Заголовок уведомления.
+     * @en Notification heading.
+     */
     title: String,
-    /** Иконка перед контентом. По умолчанию берётся из `status`; `false` скрывает иконку. */
+    /**
+     * Иконка перед контентом. По умолчанию берётся из `status`; `false` скрывает иконку.
+     * @en Icon before the content. Taken from `status` by default; `false` hides the icon.
+     */
     icon: {
       type: [Boolean, String, Function, Object, Array],
       default: null
     },
-    /** Добавляет кнопку закрытия, скрывающую уведомление. */
+    /**
+     * Добавляет кнопку закрытия, скрывающую уведомление.
+     * @en Adds a close button that hides the notification.
+     */
     closable: Boolean,
-    /** Иконка кнопки закрытия. */
+    /**
+     * Иконка кнопки закрытия.
+     * @en Icon of the close button.
+     */
     closeIcon: {
       type: IconValue,
       default: "remove"
     },
-    /** Доступная подпись (aria-label) для кнопки закрытия. */
+    /**
+     * Доступная подпись (aria-label) для кнопки закрытия.
+     * @en Accessible label (aria-label) for the close button.
+     */
     closeLabel: {
       type: String,
       default: "$cds.close"
     },
-    /** Видимость уведомления (v-model). При `false` уведомление не отображается. */
+    /**
+     * Видимость уведомления (v-model). При `false` уведомление не отображается.
+     * @en Visibility of the notification (v-model). When `false`, the notification is not rendered.
+     */
     modelValue: {
       type: Boolean,
       default: true
     },
-    /** Режим отображения: `default` — обычный; `flat` — без рамки; `compact` — однострочный без заголовка; `important` — нейтральный фон и тень, статус задаёт только цвета контента. */
+    /**
+     * Режим отображения: `default` — обычный; `flat` — без рамки; `compact` — однострочный без заголовка; `important` — нейтральный фон и тень, статус задаёт только цвета контента.
+     * @en Display mode: `default` — regular; `flat` — borderless; `compact` — single line without a heading; `important` — neutral background and a shadow, where the status only drives the content colors.
+     */
     variant: {
       type: String,
       default: "default"

package/dist/es/src/components/CdsNotificationAlert/CdsNotificationAlert.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-notification-alert {
     z-index: 10000;

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

@@ -11,31 +11,52 @@ import { C as CdsNotificationAlertConstants } from "./CdsNotificationAlert.const
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsNotificationAlertProps = propsFactory(
   {
-    /** Заголовок уведомления. */
+    /**
+     * Заголовок уведомления.
+     * @en Notification heading.
+     */
     title: String,
-    /** Иконка перед контентом. По умолчанию берётся из `status`; `false` скрывает иконку. */
+    /**
+     * Иконка перед контентом. По умолчанию берётся из `status`; `false` скрывает иконку.
+     * @en Icon before the content. Taken from `status` by default; `false` hides the icon.
+     */
     icon: {
       type: [Boolean, String, Function, Object, Array],
       default: null
     },
-    /** Добавляет кнопку закрытия, скрывающую уведомление. */
+    /**
+     * Добавляет кнопку закрытия, скрывающую уведомление.
+     * @en Adds a close button that hides the notification.
+     */
     closable: Boolean,
-    /** Иконка кнопки закрытия. */
+    /**
+     * Иконка кнопки закрытия.
+     * @en Icon of the close button.
+     */
     closeIcon: {
       type: IconValue,
       default: "remove"
     },
-    /** Доступная подпись (aria-label) для кнопки закрытия. */
+    /**
+     * Доступная подпись (aria-label) для кнопки закрытия.
+     * @en Accessible label (aria-label) for the close button.
+     */
     closeLabel: {
       type: String,
       default: "$cds.close"
     },
-    /** Внешний вид уведомления. По умолчанию `important` — приподнятая поверхность с тенью (внешний вид CdsNotificationAlert). */
+    /**
+     * Внешний вид уведомления. По умолчанию `important` — приподнятая поверхность с тенью (внешний вид CdsNotificationAlert).
+     * @en Appearance of the notification. `important` by default — an elevated surface with a shadow (the CdsNotificationAlert look).
+     */
     variant: {
       type: String,
       default: "important"
     },
-    /** Время в миллисекундах до автоматического скрытия уведомления. Значения `-1` и `0` отключают автозакрытие. */
+    /**
+     * Время в миллисекундах до автоматического скрытия уведомления. Значения `-1` и `0` отключают автозакрытие.
+     * @en Delay in milliseconds before the notification hides automatically. The values `-1` and `0` turn auto-closing off.
+     */
     timeout: {
       type: [Number, String],
       default: 5e3

package/dist/es/src/components/CdsOtpInput/CdsOtpInput.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-otp-input {
     position: relative;

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

@@ -3,6 +3,7 @@ import { C as CdsOverlay } from "../CdsOverlay/index.js";
 import { C as CdsProgressCircle } from "../CdsProgressCircle/index.js";
 import { u as useFocus, b as useAutofocus } from "../../composables/useFocus/useFocus.js";
 import { a as useLocale, u as useRtl } from "../../composables/useLocale/useLocale.js";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDefaults, p as provideDefaults } from "../../core/useDefaults.js";
 import { u as useProxyModel } from "../../core/useProxyModel.js";
 import { D as filterInputAttrs } from "../../utils/helpers.js";
@@ -14,7 +15,6 @@ import { _ as _sfc_main$1 } from "./CdsOtpGroup.vue_vue_type_script_setup_true_l
 import { _ as _sfc_main$3 } from "./CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js";
 import { u as useOtpInput } from "./composables/useOtpInput.js";
 import { I as Intersect } from "../../directives/intersect/index.js";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.js";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.js";
 import { u as useSize } from "../../composables/useSize/useSize.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -232,15 +232,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       focusAt
     });
     __expose({
-      /** Ref-ссылка на скрытый input, который принимает ввод кода */
+      /**
+       * Ref-ссылка на скрытый input, который принимает ввод кода
+       * @en Ref to the hidden input that receives the code
+       */
       inputRef,
-      /** Состояние фокуса поля */
+      /**
+       * Состояние фокуса поля
+       * @en Focus state of the field
+       */
       isFocused,
-      /** Установить фокус на поле */
+      /**
+       * Установить фокус на поле
+       * @en Set the focus on the field
+       */
       focus,
-      /** Снять фокус с поля */
+      /**
+       * Снять фокус с поля
+       * @en Remove the focus from the field
+       */
       blur,
-      /** Очистить введённый код */
+      /**
+       * Очистить введённый код
+       * @en Clear the entered code
+       */
       reset: otp.reset
     });
     return () => {

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

@@ -1,52 +1,85 @@
 import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.js";
 import { d as defineFocusProps, a as defineAutofocusProps } from "../../../composables/useFocus/useFocus.js";
 import { d as defineLoaderProps } from "../../../composables/useLoader/useLoader.js";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineComponentProps } from "../../../core/defineComponent.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsOtpFieldConstants, a as CdsOtpGroupConstants, b as CdsOtpSeparatorConstants, c as CdsOtpInputConstants } from "./CdsOtpInput.constants.js";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.js";
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.js";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.js";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.js";
 const defineCdsOtpInputProps = propsFactory(
   {
-    /** Символ-разделитель, который ставится между ячейками кода */
+    /**
+     * Символ-разделитель, который ставится между ячейками кода
+     * @en Separator character placed between the code cells
+     */
     divider: String,
-    /** Подсвечивать все ячейки, пока поле находится в фокусе, а не только активную */
+    /**
+     * Подсвечивать все ячейки, пока поле находится в фокусе, а не только активную
+     * @en Highlight all the cells while the field is focused, not only the active one
+     */
     focusAll: Boolean,
-    /** Слитный вид: ячейки объединяются в одно поле без промежутков между ними */
+    /**
+     * Слитный вид: ячейки объединяются в одно поле без промежутков между ними
+     * @en Merged look: the cells are joined into a single field with no gaps between them
+     */
     merged: Boolean,
-    /** Доступное имя поля (`aria-label`). Принимает ключ локализации вида `$cds.input.otp` */
+    /**
+     * Доступное имя поля (`aria-label`). Принимает ключ локализации вида `$cds.input.otp`
+     * @en Accessible name of the field (`aria-label`). Accepts a localization key such as `$cds.input.otp`
+     */
     label: {
       type: String,
       default: "$cds.input.otp"
     },
-    /** Количество ячеек кода */
+    /**
+     * Количество ячеек кода
+     * @en Number of code cells
+     */
     length: {
       type: [Number, String],
       default: 6
     },
-    /** Скрывать введённые символы точками */
+    /**
+     * Скрывать введённые символы точками
+     * @en Hide the entered characters behind dots
+     */
     masked: Boolean,
-    /** Значение компонента v-model */
+    /**
+     * Значение компонента v-model
+     * @en Value of the component (v-model)
+     */
     modelValue: {
       type: [Number, String],
       default: void 0
     },
-    /** Допустимые символы: имя готового паттерна (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) или собственное регулярное выражение */
+    /**
+     * Допустимые символы: имя готового паттерна (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) или собственное регулярное выражение
+     * @en Allowed characters: the name of a ready pattern (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) or your own regular expression
+     */
     pattern: {
       type: [String, Object],
       default: void 0
     },
-    /** Символ-заполнитель, который показывается в пустой ячейке */
+    /**
+     * Символ-заполнитель, который показывается в пустой ячейке
+     * @en Placeholder character shown in an empty cell
+     */
     placeholder: String,
-    /** Тип вводимого кода. `number` ограничивает ввод цифрами, `password` скрывает символы */
+    /**
+     * Тип вводимого кода. `number` ограничивает ввод цифрами, `password` скрывает символы
+     * @en Type of the code being entered. `number` limits the input to digits, `password` hides the characters
+     */
     type: {
       type: String,
       default: "number",
       validator: (value) => CdsOtpInputConstants.types.includes(value)
     },
-    /** Состояние ошибки */
+    /**
+     * Состояние ошибки
+     * @en Error state
+     */
     error: Boolean,
     ...defineAutofocusProps(),
     ...defineColorProps(),
@@ -62,7 +95,10 @@ const defineCdsOtpInputProps = propsFactory(
 );
 const defineCdsOtpFieldProps = propsFactory(
   {
-    /** Порядковый номер ячейки, начиная с нуля */
+    /**
+     * Порядковый номер ячейки, начиная с нуля
+     * @en Zero-based index of the cell
+     */
     index: {
       type: Number,
       required: true
@@ -73,7 +109,10 @@ const defineCdsOtpFieldProps = propsFactory(
 );
 const defineCdsOtpGroupProps = propsFactory(
   {
-    /** Слитный вид группы. По умолчанию наследуется от родительского `CdsOtpInput` */
+    /**
+     * Слитный вид группы. По умолчанию наследуется от родительского `CdsOtpInput`
+     * @en Merged look of the group. Inherited from the parent `CdsOtpInput` by default
+     */
     merged: {
       type: Boolean,
       default: null