@central-design-system/components 4.0.0-alpha.1 → 4.0.0-alpha.10

package/dist/esm-node/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/esm-node/src/components/CdsMessages/api/CdsMessages.props.mjs

@@ -6,14 +6,23 @@ import { C as CdsMessagesConstants } from "./CdsMessages.constants.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 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/esm-node/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/esm-node/src/components/CdsModal/api/CdsModal.props.mjs

@@ -5,9 +5,15 @@ import { C as CdsModalTransition } from "../../../transitions/modalTransition.mj
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 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/esm-node/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/esm-node/src/components/CdsNotification/CdsNotification.vue_vue_type_script_setup_true_lang.mjs

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

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

@@ -1,39 +1,60 @@
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.mjs";
 import { d as defineStatusProps } from "../../../composables/useStatus/useStatus.mjs";
 import { d as defineTextProps } from "../../../composables/useText/useText.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { a7 as pick } from "../../../utils/helpers.mjs";
 import { C as CdsNotificationConstants } from "./CdsNotification.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 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/esm-node/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/esm-node/src/components/CdsNotificationAlert/api/CdsNotificationAlert.props.mjs

@@ -11,31 +11,52 @@ import { C as CdsNotificationAlertConstants } from "./CdsNotificationAlert.const
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 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/esm-node/src/components/CdsOtpInput/CdsOtpField.mjs

@@ -0,0 +1,2 @@
+import { _ as _sfc_main } from "./CdsOtpField.vue_vue_type_script_setup_true_lang.mjs";
+//# sourceMappingURL=CdsOtpField.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpField.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,62 @@
+import { defineComponent, inject, computed, unref, createVNode } from "vue";
+import { C as CdsField } from "../CdsField/index.mjs";
+import { u as useDefaults } from "../../core/useDefaults.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
+import { C as CdsOtpFieldConstants, d as CdsOtpInputSymbol } from "./api/CdsOtpInput.constants.mjs";
+import { d as defineCdsOtpFieldProps } from "./api/CdsOtpInput.props.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpFieldConstants.name
+  },
+  __name: "CdsOtpField",
+  props: {
+    ...defineCdsOtpFieldProps()
+  },
+  setup(__props) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const otpInput = inject(CdsOtpInputSymbol);
+    if (!otpInput) {
+      throw new Error(`[CDS] ${CdsOtpFieldConstants.name} должен использоваться внутри CdsOtpInput`);
+    }
+    const slot = computed(() => unref(otpInput.otpSlots)[props.index]);
+    const isHighlighted = computed(() => {
+      var _a;
+      return unref(otpInput.isFocused) && unref(otpInput.focusAll) && !((_a = unref(slot)) == null ? void 0 : _a.isActive);
+    });
+    return () => {
+      const {
+        rootClass
+      } = CdsOtpFieldConstants;
+      const data = unref(slot);
+      if (!data) return null;
+      return createVNode(CdsField, {
+        "class": classNames(rootClass, {
+          [`${rootClass}--highlighted`]: unref(isHighlighted)
+        }, props.class),
+        "style": props.style,
+        "focused": data.isActive || unref(isHighlighted),
+        "onMousedown": (event) => event.preventDefault(),
+        "onClick": () => otpInput.focusAt(props.index)
+      }, {
+        default: () => createVNode("div", {
+          "class": `${rootClass}__slot`
+        }, [createVNode("input", {
+          "class": `${rootClass}__spacer`,
+          "aria-hidden": "true",
+          "tabindex": -1
+        }, null), data.compositionChar ? createVNode("span", {
+          "class": `${rootClass}__composition`
+        }, [data.compositionChar]) : data.hasFakeCaret ? createVNode("span", {
+          "class": `${rootClass}__caret`
+        }, null) : createVNode("span", {
+          "class": !data.char ? `${rootClass}__placeholder` : void 0
+        }, [data.char ?? data.placeholderChar ?? ""])])
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=CdsOtpField.vue_vue_type_script_setup_true_lang.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpGroup.mjs

@@ -0,0 +1,2 @@
+import { _ as _sfc_main } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.mjs";
+//# sourceMappingURL=CdsOtpGroup.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,51 @@
+import { defineComponent, useSlots, inject, computed, unref, createVNode, Fragment } from "vue";
+import { u as useDefaults } from "../../core/useDefaults.mjs";
+import { c as classNames } from "../../utils/dom/classNames.mjs";
+import { a as CdsOtpGroupConstants, d as CdsOtpInputSymbol } from "./api/CdsOtpInput.constants.mjs";
+import { a as defineCdsOtpGroupProps } from "./api/CdsOtpInput.props.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: CdsOtpGroupConstants.name
+  },
+  __name: "CdsOtpGroup",
+  props: {
+    ...defineCdsOtpGroupProps()
+  },
+  setup(__props) {
+    const _props = __props;
+    const props = useDefaults(_props);
+    const slots = useSlots();
+    const otpInput = inject(CdsOtpInputSymbol, null);
+    const isMerged = computed(() => props.merged ?? unref(otpInput == null ? void 0 : otpInput.merged) ?? false);
+    function countSlotChildren(vnodes) {
+      let count = 0;
+      for (const vnode of vnodes) {
+        if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+          count += countSlotChildren(vnode.children);
+        } else {
+          count++;
+        }
+      }
+      return count;
+    }
+    return () => {
+      var _a;
+      const {
+        rootClass
+      } = CdsOtpGroupConstants;
+      const children = ((_a = slots.default) == null ? void 0 : _a.call(slots)) ?? [];
+      return createVNode("div", {
+        "class": classNames(rootClass, {
+          [`${rootClass}--merged`]: unref(isMerged)
+        }, props.class),
+        "style": [unref(isMerged) ? {
+          flex: countSlotChildren(children)
+        } : void 0, props.style]
+      }, [children]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=CdsOtpGroup.vue_vue_type_script_setup_true_lang.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpInput.css

@@ -0,0 +1,186 @@
+@layer cds-components {
+  .cds-otp-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .cds-otp-input--disabled {
+    pointer-events: none;
+  }
+  .cds-otp-input--size-xs .cds-otp-field {
+    min-width: calc(24px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-sm .cds-otp-field {
+    min-width: calc(28px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-md .cds-otp-field {
+    min-width: calc(32px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-lg .cds-otp-field {
+    min-width: calc(36px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-xl .cds-otp-field {
+    min-width: calc(40px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--size-xs .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-300);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-400);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-sm .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-400);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-400);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-md .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-500);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-500);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-lg .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-600);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-600);
+    letter-spacing: 0;
+  }
+  .cds-otp-input--size-xl .cds-otp-field__slot {
+    font-family: inherit;
+    font-size: var(--cds-font-size-700);
+    font-weight: var(--cds-font-weight-regular);
+    line-height: var(--cds-font-line-height-700);
+    letter-spacing: 0;
+  }
+  .cds-otp-input__content {
+    position: relative;
+    display: flex;
+    gap: var(--cds-spacing-200);
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    max-width: calc(320px / var(--cds-base-unit) * 1rem);
+    border-radius: var(--cds-border-radius-200);
+  }
+  .cds-otp-input--divided .cds-otp-input__content {
+    max-width: calc(360px / var(--cds-base-unit) * 1rem);
+  }
+  .cds-otp-input--merged .cds-otp-input__content {
+    gap: 0;
+  }
+  .cds-otp-input__input {
+    position: absolute;
+    inset-inline-start: 50%;
+    bottom: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: 0;
+    color: transparent;
+    pointer-events: none;
+    caret-color: transparent;
+    outline: none;
+    background: transparent;
+    border: 0;
+    opacity: 0;
+  }
+  .cds-otp-input__loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .cds-otp-group {
+    display: contents;
+  }
+  .cds-otp-group--merged {
+    display: flex;
+    gap: 0;
+    align-items: stretch;
+    border-radius: inherit;
+  }
+  .cds-otp-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline: var(--cds-spacing-100);
+    color: rgb(var(--cds-color-content-secondary));
+  }
+  .cds-otp-field {
+    flex: 1 1 0;
+    min-width: 0;
+    transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: opacity, border-color, box-shadow;
+  }
+  .cds-otp-field--highlighted {
+    opacity: 0.5;
+  }
+  .cds-otp-group--merged .cds-otp-field {
+    border-radius: 0;
+  }
+  .cds-otp-group--merged .cds-otp-field:not(:first-child) {
+    margin-inline-start: calc(var(--cds-border-100) * -1);
+  }
+  .cds-otp-group--merged .cds-otp-field:first-child {
+    border-start-start-radius: var(--cds-border-radius-200);
+    border-end-start-radius: var(--cds-border-radius-200);
+  }
+  .cds-otp-group--merged .cds-otp-field:last-child {
+    border-start-end-radius: var(--cds-border-radius-200);
+    border-end-end-radius: var(--cds-border-radius-200);
+  }
+  .cds-otp-group--merged .cds-otp-field:hover {
+    z-index: 1;
+  }
+  .cds-otp-group--merged .cds-otp-field.cds-field--focused {
+    z-index: 2;
+  }
+  .cds-otp-field .cds-field__field {
+    justify-content: center;
+  }
+  .cds-otp-field__slot {
+    position: relative;
+    display: grid;
+    place-content: center;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+  }
+  .cds-otp-field__slot > * {
+    grid-area: 1/1;
+  }
+  .cds-otp-field__spacer {
+    display: block;
+    pointer-events: none;
+    opacity: 0;
+  }
+  .cds-otp-field__placeholder {
+    color: rgb(var(--cds-color-content-tertiary));
+  }
+  .cds-otp-field__composition {
+    color: rgb(var(--cds-color-content-secondary));
+    text-decoration: underline;
+  }
+  .cds-otp-field__caret {
+    width: var(--cds-border-100);
+    height: 1.2em;
+    background: currentcolor;
+    animation: cds-otp-blink 1000ms step-end infinite;
+  }
+  @keyframes cds-otp-blink {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+}

package/dist/esm-node/src/components/CdsOtpInput/CdsOtpInput.mjs

@@ -0,0 +1,2 @@
+import { _ as _sfc_main } from "./CdsOtpInput.vue_vue_type_script_setup_true_lang.mjs";
+//# sourceMappingURL=CdsOtpInput.mjs.map