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

package/dist/es/src/components/CdsOtpInput/composables/useOtpInput.js

@@ -0,0 +1,329 @@
+import { shallowRef, toRef, toValue, computed } from "vue";
+const OtpInputPatterns = {
+  numeric: /[0-9]/,
+  alpha: /[a-zA-Z]/,
+  alphanumeric: /[a-zA-Z0-9]/,
+  "unicode-alpha": new RegExp("\\p{L}", "u"),
+  "unicode-alphanumeric": /[\p{L}\p{N}]/u
+};
+const IME_SCRIPT_RE = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\p{Script=Bopomofo}]/u;
+const graphemeSegmenter = /* @__PURE__ */ new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function useOtpInput(options) {
+  const {
+    value,
+    length: _length = 6,
+    pattern,
+    type = "number",
+    masked = false,
+    placeholder,
+    isFocused = shallowRef(false)
+  } = options;
+  const selection = shallowRef(null);
+  const composition = shallowRef("");
+  const isComposing = shallowRef(false);
+  let prevSelection = null;
+  let anchorG = null;
+  let focusG = null;
+  const length = toRef(() => Number(toValue(_length)));
+  const isMasked = toRef(() => toValue(masked) || toValue(type) === "password");
+  const effectivePattern = toRef(() => {
+    const p = toValue(pattern);
+    if (p instanceof RegExp) return p;
+    if (p != null) return OtpInputPatterns[p] ?? null;
+    if (toValue(type) === "number") return OtpInputPatterns.numeric;
+    return null;
+  });
+  const inputMode = toRef(
+    () => effectivePattern.value === OtpInputPatterns.numeric ? "numeric" : "text"
+  );
+  function graphemes(s) {
+    return Array.from(graphemeSegmenter.segment(s), (seg) => seg.segment);
+  }
+  function codeUnitsToGraphemeIndex(s, pos) {
+    let count = 0;
+    for (const seg of graphemeSegmenter.segment(s)) {
+      if (seg.index >= pos) break;
+      count++;
+    }
+    return count;
+  }
+  function graphemeIndexToCodeUnits(s, gIndex) {
+    if (gIndex <= 0) return 0;
+    let count = 0;
+    for (const seg of graphemeSegmenter.segment(s)) {
+      if (count === gIndex) return seg.index;
+      count++;
+    }
+    return s.length;
+  }
+  const slots = computed(() => {
+    const chars = graphemes(value.value);
+    const compositionChars = graphemes(composition.value);
+    const placeholderChar = toValue(placeholder) ?? null;
+    const currentSelection = selection.value;
+    const startG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.start) : null;
+    const endG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.end) : null;
+    const compositionStart = startG ?? chars.length;
+    return Array.from({ length: length.value }, (_, i) => {
+      const char = chars[i] ?? null;
+      const displayChar = char !== null && isMasked.value ? "•" : char;
+      let compositionChar = null;
+      if (composition.value && i >= compositionStart) {
+        const offset = i - compositionStart;
+        const c = compositionChars[offset];
+        if (c != null) compositionChar = isMasked.value ? "•" : c;
+      }
+      const isActive = !!(isFocused.value && startG !== null && endG !== null && (startG === endG && i === startG || i >= startG && i < endG));
+      return {
+        char: displayChar,
+        compositionChar,
+        placeholderChar,
+        isActive,
+        hasFakeCaret: isActive && char === null && compositionChar === null
+      };
+    });
+  });
+  function filter(text) {
+    const re = effectivePattern.value;
+    if (!re) return text;
+    return graphemes(text).filter((c) => re.test(c)).join("");
+  }
+  function clampGraphemes(text, max) {
+    const chars = graphemes(text);
+    if (chars.length <= max) return text;
+    return chars.slice(0, max).join("");
+  }
+  function isImeText(text) {
+    return IME_SCRIPT_RE.test(text);
+  }
+  function setValue(text) {
+    const next = clampGraphemes(filter(text), length.value);
+    value.value = next;
+    return next;
+  }
+  function insert(text, range) {
+    const current = value.value;
+    const start = (range == null ? void 0 : range.start) ?? current.length;
+    const end = (range == null ? void 0 : range.end) ?? current.length;
+    const filtered = filter(text);
+    const next = clampGraphemes(current.slice(0, start) + filtered + current.slice(end), length.value);
+    value.value = next;
+    const insertEnd = Math.min(start + filtered.length, next.length);
+    const insertEndG = codeUnitsToGraphemeIndex(next, insertEnd);
+    const cursorG = Math.min(insertEndG, length.value - 1);
+    const cursor = graphemeIndexToCodeUnits(next, cursorG);
+    setSelection(cursor, insertEnd, "forward");
+    return next;
+  }
+  function deleteRange(start, end) {
+    const current = value.value;
+    const next = current.slice(0, start) + current.slice(end);
+    value.value = next;
+    const newEnd = Math.min(start + 1, next.length);
+    setSelection(start, newEnd, "forward");
+    return next;
+  }
+  function bulkDelete(isBackward) {
+    const current = value.value;
+    const currentSelection = selection.value;
+    const next = isBackward ? current.slice((currentSelection == null ? void 0 : currentSelection.end) ?? current.length) : current.slice(0, (currentSelection == null ? void 0 : currentSelection.start) ?? 0);
+    value.value = next;
+    if (next.length === 0) setSelection(0, 0, "none");
+    else if (isBackward) setSelection(0, 1, "forward");
+    else setSelection(next.length, next.length, "none");
+    return next;
+  }
+  function setSelection(start, end, direction = "none") {
+    if (start === null || end === null) {
+      selection.value = null;
+      anchorG = null;
+      focusG = null;
+      return;
+    }
+    const next = { start, end, direction };
+    selection.value = next;
+    prevSelection = next;
+    const startG = codeUnitsToGraphemeIndex(value.value, start);
+    anchorG = startG;
+    focusG = startG;
+  }
+  function clearSelection() {
+    selection.value = null;
+    anchorG = null;
+    focusG = null;
+  }
+  function selectAtEnd() {
+    const current = value.value;
+    const graphemeCount = graphemes(current).length;
+    let start;
+    let end;
+    if (graphemeCount >= length.value) {
+      start = graphemeIndexToCodeUnits(current, length.value - 1);
+      end = current.length;
+    } else {
+      start = current.length;
+      end = current.length;
+    }
+    const next = { start, end, direction: "forward" };
+    selection.value = next;
+    prevSelection = next;
+    anchorG = graphemeCount >= length.value ? length.value - 1 : graphemeCount;
+    focusG = anchorG;
+    return next;
+  }
+  function selectSlot(index) {
+    const current = value.value;
+    const graphemeCount = graphemes(current).length;
+    const clamped = Math.min(index, graphemeCount);
+    const start = graphemeIndexToCodeUnits(current, clamped);
+    const end = clamped < graphemeCount ? graphemeIndexToCodeUnits(current, clamped + 1) : current.length;
+    const next = { start, end, direction: "forward" };
+    selection.value = next;
+    prevSelection = next;
+    anchorG = clamped;
+    focusG = clamped;
+    return next;
+  }
+  function extendSelection(direction) {
+    const current = value.value;
+    const valueG = graphemes(current).length;
+    if (valueG === 0) return null;
+    const maxFocus = Math.min(length.value - 1, valueG);
+    if (anchorG === null || focusG === null) {
+      const currentSelection = selection.value;
+      if (!currentSelection) return null;
+      const selectionStartG = codeUnitsToGraphemeIndex(current, currentSelection.start);
+      const selectionEndG = codeUnitsToGraphemeIndex(current, currentSelection.end);
+      if (selectionEndG - selectionStartG <= 1) {
+        anchorG = selectionStartG;
+        focusG = selectionStartG;
+      } else if (currentSelection.direction === "backward") {
+        anchorG = selectionEndG - 1;
+        focusG = selectionStartG;
+      } else {
+        anchorG = selectionStartG;
+        focusG = selectionEndG - 1;
+      }
+    }
+    const newFocus = Math.max(0, Math.min(maxFocus, focusG + direction));
+    focusG = newFocus;
+    const minG = Math.min(anchorG, newFocus);
+    const maxG = Math.max(anchorG, newFocus);
+    const start = graphemeIndexToCodeUnits(current, minG);
+    const end = maxG + 1 >= valueG ? current.length : graphemeIndexToCodeUnits(current, maxG + 1);
+    const newDirection = newFocus < anchorG ? "backward" : "forward";
+    const next = { start, end, direction: newDirection };
+    selection.value = next;
+    prevSelection = next;
+    return next;
+  }
+  function syncSelection(raw) {
+    if (isComposing.value) return selection.value;
+    const { value: inputValue, selectionStart, selectionEnd, selectionDirection, maxLength } = raw;
+    if (selectionStart === null || selectionEnd === null) {
+      selection.value = null;
+      prevSelection = null;
+      return null;
+    }
+    const valueG = graphemes(inputValue).length;
+    const startG = codeUnitsToGraphemeIndex(inputValue, selectionStart);
+    const endG = codeUnitsToGraphemeIndex(inputValue, selectionEnd);
+    let outStartG = -1;
+    let outEndG = -1;
+    let direction;
+    if (valueG !== 0) {
+      const isSingleCaret = startG === endG;
+      const isInsertMode = startG === valueG && valueG < maxLength;
+      if (isSingleCaret && !isInsertMode) {
+        if (startG === 0) {
+          outStartG = 0;
+          outEndG = 1;
+          direction = "forward";
+        } else if (startG === maxLength) {
+          outStartG = startG - 1;
+          outEndG = startG;
+          direction = "backward";
+        } else if (maxLength > 1 && valueG > 1) {
+          let offset = 0;
+          if (prevSelection !== null) {
+            const prevStartG = codeUnitsToGraphemeIndex(inputValue, prevSelection.start);
+            const prevEndG = codeUnitsToGraphemeIndex(inputValue, prevSelection.end);
+            direction = startG < prevEndG ? "backward" : "forward";
+            const wasPreviouslyInserting = prevStartG === prevEndG && prevStartG < maxLength;
+            const wasMultiSlot = prevEndG - prevStartG > 1;
+            if (direction === "backward" && !wasPreviouslyInserting && !wasMultiSlot) {
+              offset = -1;
+            }
+          }
+          outStartG = offset + startG;
+          outEndG = offset + startG + 1;
+        }
+      }
+    }
+    const finalStartG = outStartG !== -1 ? outStartG : startG;
+    const finalEndG = outEndG !== -1 ? outEndG : endG;
+    const finalStart = graphemeIndexToCodeUnits(inputValue, finalStartG);
+    const finalEnd = graphemeIndexToCodeUnits(inputValue, finalEndG);
+    const finalDirection = direction ?? selectionDirection ?? "none";
+    const next = { start: finalStart, end: finalEnd, direction: finalDirection };
+    selection.value = next;
+    prevSelection = next;
+    if (finalEndG - finalStartG <= 1) {
+      anchorG = finalStartG;
+      focusG = finalStartG;
+    }
+    return next;
+  }
+  function startComposition() {
+    isComposing.value = true;
+    composition.value = "";
+  }
+  function updateComposition(data) {
+    composition.value = IME_SCRIPT_RE.test(data) ? data : "";
+  }
+  function endComposition() {
+    isComposing.value = false;
+    composition.value = "";
+  }
+  function reset() {
+    value.value = "";
+    selection.value = null;
+    composition.value = "";
+    isComposing.value = false;
+    prevSelection = null;
+    anchorG = null;
+    focusG = null;
+  }
+  return {
+    value,
+    length,
+    slots,
+    selection,
+    composition,
+    isComposing,
+    isFocused,
+    effectivePattern,
+    inputMode,
+    filter,
+    isImeText,
+    setValue,
+    insert,
+    deleteRange,
+    bulkDelete,
+    syncSelection,
+    setSelection,
+    clearSelection,
+    selectAtEnd,
+    selectSlot,
+    extendSelection,
+    startComposition,
+    updateComposition,
+    endComposition,
+    reset
+  };
+}
+export {
+  OtpInputPatterns as O,
+  useOtpInput as u
+};
+//# sourceMappingURL=useOtpInput.js.map

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

@@ -0,0 +1,17 @@
+import { w as withConstants } from "../../core/withConstants.js";
+import { c as CdsOtpInputConstants, C as CdsOtpFieldConstants, a as CdsOtpGroupConstants, b as CdsOtpSeparatorConstants } from "./api/CdsOtpInput.constants.js";
+import { _ as _sfc_main$1 } from "./CdsOtpField.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main$2 } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main } from "./CdsOtpInput.vue_vue_type_script_setup_true_lang.js";
+import { _ as _sfc_main$3 } from "./CdsOtpSeparator.vue_vue_type_script_setup_true_lang.js";
+const CdsOtpInput = withConstants(_sfc_main, CdsOtpInputConstants);
+const CdsOtpField = withConstants(_sfc_main$1, CdsOtpFieldConstants);
+const CdsOtpGroup = withConstants(_sfc_main$2, CdsOtpGroupConstants);
+const CdsOtpSeparator = withConstants(_sfc_main$3, CdsOtpSeparatorConstants);
+export {
+  CdsOtpField as C,
+  CdsOtpGroup as a,
+  CdsOtpInput as b,
+  CdsOtpSeparator as c
+};
+//# sourceMappingURL=index.js.map

package/dist/es/src/components/CdsOverlay/CdsOverlay.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-overlay-container {
     position: absolute;

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

@@ -13,6 +13,11 @@ import { g as getCurrentInstance } from "../../core/getCurrentInstance.js";
 import { u as useDefaults } from "../../core/useDefaults.js";
 import { u as useProxyModel } from "../../core/useProxyModel.js";
 import { u as useToggleScope } from "../../core/useToggleScope.js";
+import { u as convertToUnit } from "../../utils/helpers.js";
+import { a as animate } from "../../utils/dom/animation.js";
+import { c as classNames } from "../../utils/dom/classNames.js";
+import { c as getScrollParent } from "../../utils/dom/getScrollParent.js";
+import { a as IN_BROWSER } from "../../utils/dom/globals.js";
 import { C as CdsOverlayConstants } from "./api/CdsOverlay.constants.js";
 import { d as defineCdsOverlayProps } from "./api/CdsOverlay.props.js";
 import { S as Scrim } from "./components/Scrim.js";
@@ -22,17 +27,12 @@ import { u as useScrollStrategies } from "./composables/useScrollStrategies.js";
 import { C as ClickOutside } from "../../directives/click-outside/index.js";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.js";
 import { a as useBackgroundColor } from "../../composables/useColor/useColor.js";
-import { c as getScrollParent } from "../../utils/dom/getScrollParent.js";
-import { a as IN_BROWSER } from "../../utils/dom/globals.js";
-import { a as animate } from "../../utils/dom/animation.js";
-import { u as convertToUnit } from "../../utils/helpers.js";
-import { c as classNames } from "../../utils/dom/classNames.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsOverlayConstants.name,
     inheritAttrs: false,
     directives: {
-      vClickOutside: ClickOutside
+      ClickOutside
     }
   },
   __name: "CdsOverlay",
@@ -216,27 +216,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("afterLeave");
     }
     __expose({
-      /** Корневой DOM-элемент оверлея. */
+      /**
+       * Корневой DOM-элемент оверлея.
+       * @en The root DOM element of the overlay.
+       */
       rootEl: root,
-      /** DOM-элемент подложки (scrim), затемняющей страницу. */
+      /**
+       * DOM-элемент подложки (scrim), затемняющей страницу.
+       * @en The DOM element of the scrim that dims the page.
+       */
       scrimEl,
-      /** DOM-элемент контента оверлея. */
+      /**
+       * DOM-элемент контента оверлея.
+       * @en The DOM element of the overlay content.
+       */
       contentEl,
-      /** DOM-элемент активатора. */
+      /**
+       * DOM-элемент активатора.
+       * @en The DOM element of the activator.
+       */
       activatorEl,
-      /** Template ref для назначения активатора вручную. */
+      /**
+       * Template ref для назначения активатора вручную.
+       * @en Template ref for assigning the activator manually.
+       */
       activatorRef,
-      /** DOM-элемент цели позиционирования. */
+      /**
+       * DOM-элемент цели позиционирования.
+       * @en The DOM element of the positioning target.
+       */
       targetEl,
-      /** Template ref для назначения цели позиционирования вручную. */
+      /**
+       * Template ref для назначения цели позиционирования вручную.
+       * @en Template ref for assigning the positioning target manually.
+       */
       targetRef,
-      /** Текущая цель позиционирования: элемент либо координаты `[x, y]`. */
+      /**
+       * Текущая цель позиционирования: элемент либо координаты `[x, y]`.
+       * @en The current positioning target: an element or the `[x, y]` coordinates.
+       */
       target,
-      /** Является ли оверлей верхним в глобальном стеке открытых оверлеев. */
+      /**
+       * Является ли оверлей верхним в глобальном стеке открытых оверлеев.
+       * @en Whether the overlay is the top one in the global stack of open overlays.
+       */
       globalTop,
-      /** Пересчитывает позицию контента относительно цели. */
+      /**
+       * Пересчитывает позицию контента относительно цели.
+       * @en Recalculates the position of the content relative to the target.
+       */
       updateLocation,
-      /** Запускает bounce-анимацию контента — как при клике мимо `persistent`-оверлея. */
+      /**
+       * Запускает bounce-анимацию контента — как при клике мимо `persistent`-оверлея.
+       * @en Runs the bounce animation of the content — the same as on a click outside a `persistent` overlay.
+       */
       animateClick
     });
     return () => {

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

@@ -12,49 +12,77 @@ import { C as CdsOverlayConstants } from "./CdsOverlay.constants.js";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.js";
 const defineCdsOverlayProps = propsFactory(
   {
-    /** Указывает, что элемент должен быть позиционирован абсолютно, а не фиксированно. Это может быть полезно для оверлеев, которые должны быть ограничены определенной областью, например, внутри контейнера с `position: relative`. */
+    /**
+     * Указывает, что элемент должен быть позиционирован абсолютно, а не фиксированно. Это может быть полезно для оверлеев, которые должны быть ограничены определенной областью, например, внутри контейнера с `position: relative`.
+     * @en Positions the element absolutely instead of fixed. This is useful for overlays that must stay inside a certain area, for example inside a container with `position: relative`.
+     */
     absolute: Boolean,
     /**
      * Указывает, в какой элемент DOM следует переместить содержимое overlay.
      * Может быть прямой ссылкой на элемент, строкой querySelector или значением true для отключения перемещения.
      * По умолчанию используется элемент body.
      * Как правило, не рекомендуется изменять это свойство, за исключением крайних случаев: алгоритм позиционирования по умолчанию должен справляться с большинством сценариев лучше, чем это возможно без перемещения, и может возникнуть непредвиденное поведение, если меню окажется дочерним элементом своего активатора.
+     * @en Sets the DOM element the overlay content is moved to. It accepts a direct element reference, a querySelector string, or true to disable moving. By default the body element is used. Changing this prop is usually not recommended except for edge cases: the default positioning algorithm handles most scenarios better than it can without moving, and unexpected behavior may appear if the menu ends up being a child of its activator.
      */
     attach: [Boolean, String, Object],
     /**
      * Ограничивает размер компонента и сетки в соответствии с его смещенным родительским элементом.
      * Подразумевает использование свойств `absolute` и `attach`. (Примечание: родительский элемент должен иметь свойство `position: relative`.)
+     * @en Limits the size of the component and of its grid to the offset parent. Implies the `absolute` and `attach` props. (Note: the parent element must have `position: relative`.)
      */
     contained: Boolean,
     /**
      * Применяет пользовательский класс к отдельному элементу.
      * Это удобно, поскольку содержимое перемещается в начало компонента cds-app (если не указан параметр `attach`) и не может быть выделено с помощью классов, переданных непосредственно в компонент.
+     * @en Applies a custom class to the content element. This is handy because the content is moved to the beginning of the cds-app component (unless `attach` is set) and cannot be selected with classes passed to the component directly.
      */
     contentClass: null,
-    /** Применяет кастомные свойства (props) к перемещаемому контенту */
+    /**
+     * Применяет кастомные свойства (props) к перемещаемому контенту
+     * @en Applies custom props to the moved content
+     */
     contentProps: null,
-    /** Прозрачность элемента «scrim». Применяется только в том случае, если св-во `scrim=true`. */
+    /**
+     * Прозрачность элемента «scrim». Применяется только в том случае, если св-во `scrim=true`.
+     * @en Opacity of the scrim element. Applies only when `scrim=true`.
+     */
     opacity: [Number, String],
-    /** Значение компонента v-model. Если компонент поддерживает свойство **multiple**, по умолчанию используется пустой массив. */
+    /**
+     * Значение компонента v-model. Если компонент поддерживает свойство **multiple**, по умолчанию используется пустой массив.
+     * @en The v-model value of the component. If the component supports the **multiple** prop, an empty array is used by default.
+     */
     modelValue: Boolean,
-    /** Клик за пределами элемента или нажатие клавиши Esc не приведет к его закрытию. */
+    /**
+     * Клик за пределами элемента или нажатие клавиши Esc не приведет к его закрытию.
+     * @en A click outside the element or the Esc key does not close it.
+     */
     persistent: Boolean,
-    /** Отключает эффект bounce при нажатии за пределами элемента контента при использовании атрибута persistent. */
+    /**
+     * Отключает эффект bounce при нажатии за пределами элемента контента при использовании атрибута persistent.
+     * @en Disables the bounce effect on a click outside the content element when `persistent` is set.
+     */
     noClickAnimation: Boolean,
     /**
      * Закрывает содержимое оверлея при нажатии кнопки «Назад» в браузере или вызове $router.back(), отменяя исходную навигацию.
      * `persistent` оверлеи отменяют навигацию и анимируются так, как будто по ним щелкнули за пределами оверлея, вместо того чтобы закрываться.
+     * @en Closes the overlay content when the browser Back button is pressed or $router.back() is called, cancelling the original navigation. `persistent` overlays cancel the navigation and animate as if they were clicked outside instead of closing.
      */
     closeOnBack: {
       type: Boolean,
       default: true
     },
-    /** Фон при активации overlay. Принимает значения true/false для включения фона и строку для определения цвета. */
+    /**
+     * Фон при активации overlay. Принимает значения true/false для включения фона и строку для определения цвета.
+     * @en Backdrop shown while the overlay is active. Accepts true/false to toggle the backdrop and a string to set its color.
+     */
     scrim: {
       type: [Boolean, String],
       default: true
     },
-    /** Значение z-index для компонента. */
+    /**
+     * Значение z-index для компонента.
+     * @en The z-index value of the component.
+     */
     zIndex: {
       type: [Number, String],
       default: 2e3

package/dist/es/src/components/CdsOverlay/components/Scrim.js

@@ -1,7 +1,7 @@
 import { createVNode, Transition, mergeProps, unref } from "vue";
-import { C as CdsOverlayConstants } from "../api/CdsOverlay.constants.js";
 import { a3 as omit } from "../../../utils/helpers.js";
 import { c as classNames } from "../../../utils/dom/classNames.js";
+import { C as CdsOverlayConstants } from "../api/CdsOverlay.constants.js";
 function Scrim(props) {
   const restProps = omit(props, ["modelValue", "color"]);
   return createVNode(Transition, {

package/dist/es/src/components/CdsOverlay/composables/useActivator.js

@@ -2,14 +2,20 @@ import { C as CdsMenuSymbol } from "../../CdsMenu/api/CdsMenu.constants.js";
 import { d as defineDelayProps, u as useDelay } from "../../../composables/useDelay/useDelay.js";
 import { g as getCurrentInstance } from "../../../core/getCurrentInstance.js";
 import { p as propsFactory } from "../../../core/propsFactory.js";
-import { ref, computed, unref, inject, watch, watchEffect, nextTick, effectScope, onScopeDispose, mergeProps } from "vue";
 import { ab as templateRef, a0 as matchesSelector } from "../../../utils/helpers.js";
-import { a as IN_BROWSER } from "../../../utils/dom/globals.js";
 import { b as bindProps, u as unbindProps } from "../../../utils/dom/bindProps.js";
+import { a as IN_BROWSER } from "../../../utils/dom/globals.js";
+import { ref, computed, unref, inject, watch, watchEffect, nextTick, effectScope, onScopeDispose, mergeProps } from "vue";
 const defineActivatorProps = propsFactory({
-  /** Элемент, который будет активировать компонент */
+  /**
+   * Элемент, который будет активировать компонент
+   * @en The element that activates the component
+   */
   activator: [String, Object],
-  /** Свойства для элемента активатора */
+  /**
+   * Свойства для элемента активатора
+   * @en Props for the activator element
+   */
   activatorProps: {
     type: Object,
     default: () => ({})
@@ -17,21 +23,34 @@ const defineActivatorProps = propsFactory({
   /**
    * Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей.
    * По умолчанию в качестве такого элемента используется элемент-активатор.
+   * @en When `locationStrategy` is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used.
    */
   target: [String, Object],
-  /** Показать компонент по клику на активатор */
+  /**
+   * Показать компонент по клику на активатор
+   * @en Show the component on a click on the activator
+   */
   openOnClick: {
     type: Boolean,
     default: void 0
   },
-  /** Показать компонент по наведению на активатор */
+  /**
+   * Показать компонент по наведению на активатор
+   * @en Show the component on hover over the activator
+   */
   openOnHover: Boolean,
-  /** Показать компонент по фокусу на активатор */
+  /**
+   * Показать компонент по фокусу на активатор
+   * @en Show the component when the activator gets focus
+   */
   openOnFocus: {
     type: Boolean,
     default: void 0
   },
-  /** Скрыть компонент по клику на контент */
+  /**
+   * Скрыть компонент по клику на контент
+   * @en Hide the component on a click on the content
+   */
   closeOnContentClick: Boolean,
   ...defineDelayProps()
 }, "activator");