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

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

@@ -1,13 +1,17 @@
-import { defineComponent, useSlots, useAttrs, ref, computed, unref, onBeforeMount, onBeforeUnmount, watch, createVNode, Fragment, mergeProps } from "vue";
+import { defineComponent, useSlots, useAttrs, ref, computed, unref, reactive, toRef, onBeforeUnmount, watch, nextTick, createVNode, Fragment, mergeProps } from "vue";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
+import { u as useFocusTrap } from "../../composables/useFocus/useFocusTrap.mjs";
+import { u as useSsrBoot } from "../../composables/useSsrBoot/useSsrBoot.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 { _ as keyNames } from "../../utils/helpers.mjs";
+import { u as convertToUnit, _ as keyNames, I as focusableChildren } from "../../utils/helpers.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
-import { C as CdsDrawerConstants, a as CDS_DRAWER_Z_INDEX_OUTER, b as CDS_DRAWER_WIDTH_MINIFIED, c as CDS_DRAWER_WIDTH } from "./api/CdsDrawer.constants.mjs";
+import { C as CdsImage } from "../CdsImage/index.mjs";
+import { C as CdsDrawerConstants, a as CDS_DRAWER_WIDTH, b as CDS_DRAWER_Z_INDEX_OUTER, c as CDS_DRAWER_WIDTH_MINIFIED } from "./api/CdsDrawer.constants.mjs";
 import { d as defineCdsDrawerProps } from "./api/CdsDrawer.props.mjs";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
+import { u as useDrawerTouch } from "./composables/useDrawerTouch.mjs";
 import { u as useInjectLayout } from "../../composables/useLayout/context.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.mjs";
 import { a as useBackgroundColor, u as useTextColor } from "../../composables/useColor/useColor.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -31,17 +35,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const drawerRef = ref();
     const isActive = useProxyModel(props, "modelValue", null, (value) => !!value);
-    const isTemporary = computed(() => !props.permanent && props.temporary);
     const isHovering = ref(false);
     const display = useDisplay();
     const layout = useInjectLayout();
     const inLayout = ref(!!Object.keys(layout).length);
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
+    const isTemporary = computed(() => !props.permanent && (props.temporary || !unref(display.mdUp)));
+    const drawerWidth = computed(() => {
+      const width = parseFloat(String(props.width));
+      return Number.isFinite(width) ? width : CDS_DRAWER_WIDTH;
+    });
+    if (props.modelValue == null && !unref(isTemporary)) {
+      isActive.value = true;
+    }
     const {
       themeClasses
     } = provideTheme(props);
     const {
       dimensionStyles
-    } = useDimensions(props);
+    } = useDimensions(reactive({
+      height: toRef(() => props.height),
+      minWidth: toRef(() => props.minWidth),
+      maxWidth: toRef(() => props.maxWidth),
+      minHeight: toRef(() => props.minHeight),
+      maxHeight: toRef(() => props.maxHeight)
+    }));
+    const {
+      isDragging,
+      dragProgress
+    } = useDrawerTouch({
+      el: drawerRef,
+      isActive,
+      isTemporary,
+      width: drawerWidth,
+      touchless: toRef(() => props.touchless),
+      right: toRef(() => props.right)
+    });
     const {
       backgroundColorClasses,
       backgroundColorStyles
@@ -50,6 +81,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       textColorClasses,
       textColorStyles
     } = useTextColor(() => props.color);
+    const {
+      backgroundColorClasses: scrimColorClasses,
+      backgroundColorStyles: scrimColorStyles
+    } = useBackgroundColor(() => typeof props.scrim === "string" ? props.scrim : null);
     const fixed = computed(() => {
       if (!unref(inLayout)) return props.fixed;
       return props.fixed || unref(layout.view).indexOf(props.right ? "R" : "L") > -1 || unref(display.platform).ios && unref(layout.isContainer);
@@ -58,6 +93,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       [`${CdsDrawerConstants.rootClass}--active`]: unref(isActive),
       [`${CdsDrawerConstants.rootClass}--hover`]: unref(isHovering),
       [`${CdsDrawerConstants.rootClass}--temporary`]: unref(isTemporary),
+      [`${CdsDrawerConstants.rootClass}--persistent`]: props.persistent,
+      [`${CdsDrawerConstants.rootClass}--dragging`]: unref(isDragging),
       [`${CdsDrawerConstants.rootClass}--minified`]: props.minified,
       [`${CdsDrawerConstants.rootClass}--right`]: props.right,
       [`${CdsDrawerConstants.rootClass}--fixed`]: unref(fixed),
@@ -112,15 +149,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return css;
     });
-    const hasOverlay = computed(() => {
-      if (!unref(isActive) || props.permanent) return false;
-      return unref(isTemporary) || !unref(display.mdUp);
+    const hasOverlay = computed(() => (unref(isActive) || unref(isDragging)) && unref(isTemporary) && !!props.scrim);
+    const overlayStyles = computed(() => unref(isDragging) ? {
+      opacity: unref(dragProgress),
+      transition: "none"
+    } : void 0);
+    const isFocusTrapped = computed(() => unref(isActive) && unref(isTemporary) && !!props.scrim);
+    useFocusTrap(props, {
+      isActive: isFocusTrapped,
+      localTop: isFocusTrapped,
+      contentEl: drawerRef
     });
     let activeElement = null;
-    onBeforeMount(() => {
-      if (props.modelValue !== null || unref(isTemporary)) return;
-      isActive.value = props.permanent;
-    });
+    function focusInside() {
+      nextTick(() => {
+        const el = unref(drawerRef);
+        if (!el) return;
+        const tryFocus = () => {
+          if (!unref(isFocusTrapped) || el.contains(document.activeElement)) return;
+          (focusableChildren(el)[0] ?? el).focus();
+        };
+        tryFocus();
+        if (!el.contains(document.activeElement)) el.addEventListener("transitionend", tryFocus, {
+          once: true
+        });
+      });
+    }
     onBeforeUnmount(() => {
       if (unref(inLayout)) {
         layout.update(props.right ? "right" : "left", "space", false);
@@ -130,29 +184,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (value) {
         activeElement = document.activeElement;
         emit("opened", value);
+        if (unref(isFocusTrapped)) focusInside();
       } else {
         activeElement == null ? void 0 : activeElement.focus();
         emit("closed", value);
       }
     });
-    if (unref(inLayout)) {
-      watch(display.mdUp, (value) => {
-        layout.update(props.right ? "right" : "left", "space", props.temporary ? false : value);
-      }, {
-        immediate: true
+    watch(isTemporary, (value) => {
+      if (props.permanent || props.disableResizeWatcher) return;
+      nextTick(() => {
+        isActive.value = !value;
       });
-      watch(() => props.minified, () => {
-        layout.update(props.right ? "right" : "left", "size", props.minified ? CDS_DRAWER_WIDTH_MINIFIED : CDS_DRAWER_WIDTH);
-      }, {
+    });
+    watch(() => props.permanent, (value) => {
+      if (value) isActive.value = true;
+    });
+    if (unref(inLayout)) {
+      const side = props.right ? "right" : "left";
+      watch(() => unref(isActive) && !unref(isTemporary), (value) => layout.update(side, "space", value), {
         immediate: true
       });
-      watch(() => props.temporary, (value) => {
-        layout.update(props.right ? "right" : "left", "space", !value);
-      }, {
+      watch(() => props.minified ? CDS_DRAWER_WIDTH_MINIFIED : unref(drawerWidth), (value) => layout.update(side, "size", value), {
         immediate: true
       });
     }
     function onClose() {
+      if (props.persistent) return;
       isActive.value = false;
     }
     function onKeydown(event) {
@@ -165,6 +222,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isHovering.value = false;
     }
     __expose({
+      /**
+       * Ссылка на корневой DOM-элемент панели.
+       * @en Ref to the root DOM element of the drawer.
+       */
       drawerRef
     });
     return () => {
@@ -174,7 +235,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return createVNode(Fragment, null, [createVNode(props.tag, mergeProps(attrs, {
         "ref": drawerRef,
         "class": classNames(rootClass, unref(drawerClasses), unref(backgroundColorClasses), unref(textColorClasses), unref(themeClasses), props.class),
-        "style": [unref(dimensionStyles), unref(positionStyles), unref(backgroundColorStyles), unref(textColorStyles), props.style],
+        "style": [{
+          "--cds-drawer-width": convertToUnit(unref(drawerWidth))
+        }, unref(ssrBootStyles), unref(dimensionStyles), unref(positionStyles), unref(backgroundColorStyles), unref(textColorStyles), props.style],
         "tabindex": -1,
         "onKeydown": onKeydown,
         "onMouseenter": onMouseenter,
@@ -182,7 +245,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }), {
         default: () => {
           var _a;
-          return [slots.prepend && createVNode("div", {
+          return [(slots.image || props.image) && createVNode("div", {
+            "class": `${rootClass}__image`
+          }, [slots.image ? slots.image({
+            image: props.image
+          }) : createVNode(CdsImage, {
+            "src": props.image,
+            "alt": "",
+            "cover": true,
+            "height": "100%"
+          }, null)]), slots.prepend && createVNode("div", {
             "class": `${rootClass}__prepend`
           }, [slots.prepend()]), createVNode("nav", {
             "class": `${rootClass}__content`
@@ -191,7 +263,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, [slots.append()])];
         }
       }), unref(hasOverlay) && createVNode("div", {
-        "class": `${rootClass}__overlay`,
+        "class": classNames(`${rootClass}__overlay`, unref(scrimColorClasses)),
+        "style": [unref(scrimColorStyles), unref(overlayStyles)],
         "onClick": onClose
       }, null)]);
     };

package/dist/esm-node/src/components/CdsDrawer/api/CdsDrawer.constants.mjs

@@ -6,9 +6,9 @@ const CDS_DRAWER_Z_INDEX_INNER = 600;
 const CDS_DRAWER_Z_INDEX_OUTER = 801;
 export {
   CdsDrawerConstants as C,
-  CDS_DRAWER_Z_INDEX_OUTER as a,
-  CDS_DRAWER_WIDTH_MINIFIED as b,
-  CDS_DRAWER_WIDTH as c,
+  CDS_DRAWER_WIDTH as a,
+  CDS_DRAWER_Z_INDEX_OUTER as b,
+  CDS_DRAWER_WIDTH_MINIFIED as c,
   CDS_DRAWER_Z_INDEX_INNER as d
 };
 //# sourceMappingURL=CdsDrawer.constants.mjs.map

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

@@ -1,53 +1,134 @@
+import { d as defineFocusTrapProps } from "../../../composables/useFocus/useFocusTrap.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineComponentProps, a as defineTagProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
-import { a7 as pick } from "../../../utils/helpers.mjs";
-import { C as CdsDrawerConstants } from "./CdsDrawer.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
+import { a7 as pick, a3 as omit } from "../../../utils/helpers.mjs";
+import { C as CdsDrawerConstants, a as CDS_DRAWER_WIDTH } from "./CdsDrawer.constants.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsDrawerProps = propsFactory(
   {
-    /** Показать/скрыть панель (v-model). */
+    /**
+     * Показать/скрыть панель (v-model). Без него обычная панель открыта на широком экране,
+     * а выезжающая закрыта.
+     * @en Shows/hides the drawer (v-model). Without it a regular drawer is open on a wide screen,
+     * and a sliding one is closed.
+     */
     modelValue: {
       type: Boolean,
       default: null
     },
-    /** Постоянно видима, независимо от размера экрана. */
+    /**
+     * Постоянно видима, независимо от размера экрана.
+     * @en Always visible, regardless of the screen size.
+     */
     permanent: {
       type: Boolean,
       default: false
     },
-    /** Временная панель: открывается через v-model и закрывается по оверлею. */
+    /**
+     * Временная панель: выезжает поверх контента на любой ширине экрана, открывается через v-model и
+     * закрывается по оверлею. На узком экране так ведёт себя любая непостоянная панель.
+     * @en Temporary drawer: slides out over the content at any screen width, opens through v-model and
+     * closes on the overlay. On a narrow screen any non-permanent drawer behaves this way.
+     */
     temporary: {
       type: Boolean,
       default: false
     },
-    /** Свёрнутый вид (только иконки) до наведения мыши. */
+    /**
+     * Затемнение под панелью, когда она накрывает контент. `false` убирает его целиком — контент
+     * остаётся кликабельным, а панель закрывается только клавишей Esc или через v-model; строка задаёт цвет.
+     * @en Backdrop under the drawer while it covers the content. `false` removes it entirely: the content
+     * stays clickable and the drawer closes only with Esc or through v-model; a string sets its color.
+     */
+    scrim: {
+      type: [Boolean, String],
+      default: true
+    },
+    /**
+     * Клик по затемнению и клавиша Esc не закрывают панель — только v-model. Для панелей с формой,
+     * где случайное закрытие теряет ввод.
+     * @en A click on the scrim and the Esc key do not close the drawer, only v-model does. For drawers with
+     * a form where an accidental close loses the input.
+     */
+    persistent: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Не синхронизировать v-model с шириной экрана. По умолчанию обычная панель закрывается, когда экран
+     * сужается и она становится выезжающей, и открывается обратно на широком.
+     * @en Does not sync v-model with the screen width. By default a regular drawer closes when the screen
+     * narrows and it becomes a sliding one, and opens back on a wide screen.
+     */
+    disableResizeWatcher: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Отключает жесты: выезжающая панель не открывается свайпом от края экрана и не закрывается свайпом.
+     * @en Disables gestures: a sliding drawer neither opens with a swipe from the screen edge nor closes with a swipe.
+     */
+    touchless: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Ширина панели, px. Уходит и в макет: контент сдвигается ровно на неё.
+     * @en The drawer width, px. It also goes into the layout: the content shifts by exactly this width.
+     */
+    width: {
+      type: [Number, String],
+      default: CDS_DRAWER_WIDTH
+    },
+    /**
+     * Фоновое изображение панели (URL). Для своей разметки фона есть слот `image`.
+     * @en Background image of the drawer (URL). The `image` slot is available for custom background markup.
+     */
+    image: String,
+    /**
+     * Свёрнутый вид (только иконки) до наведения мыши.
+     * @en Minified look (icons only) until the mouse hovers over it.
+     */
     minified: {
       type: Boolean,
       default: false
     },
-    /** Применяет `position: fixed`. */
+    /**
+     * Применяет `position: fixed`.
+     * @en Applies `position: fixed`.
+     */
     fixed: {
       type: Boolean,
       default: false
     },
-    /** Позиционирование справа. */
+    /**
+     * Позиционирование справа.
+     * @en Positions the drawer on the right.
+     */
     right: {
       type: Boolean,
       default: false
     },
-    /** Добавляет границы между секциями (prepend/append). */
+    /**
+     * Добавляет границы между секциями (prepend/append).
+     * @en Adds borders between the sections (prepend/append).
+     */
     border: {
       type: Boolean,
       default: false
     },
-    /** Использовать внутренний скролл для секции контента. */
+    /**
+     * Использовать внутренний скролл для секции контента.
+     * @en Uses an inner scroll for the content section.
+     */
     fixedSlots: {
       type: Boolean,
       default: false
     },
-    ...defineDimensionsProps(),
+    ...omit(defineDimensionsProps(), ["width"]),
+    ...defineFocusTrapProps({ retainFocus: true, captureFocus: true }),
     ...pick(defineColorProps(), ["color", "bgColor"]),
     ...defineThemeProps(),
     ...defineTagProps({ tag: "aside" }),

package/dist/esm-node/src/components/CdsDrawer/composables/useDrawerTouch.mjs

@@ -0,0 +1,148 @@
+import { c as clamp } from "../../../utils/helpers.mjs";
+import { shallowRef, onMounted, onBeforeUnmount, computed, watch } from "vue";
+const TOUCH_ZONE = 25;
+const VELOCITY_HORIZON = 100;
+const VELOCITY_HISTORY = 20;
+const FLING_VELOCITY = 400;
+function kineticEnergyToVelocity(work) {
+  return (work < 0 ? -1 : 1) * Math.sqrt(Math.abs(work)) * Math.SQRT2;
+}
+function calculateImpulseVelocity(samples) {
+  if (samples.length < 2) return 0;
+  if (samples.length === 2) {
+    if (samples[1].t === samples[0].t) return 0;
+    return (samples[1].d - samples[0].d) / (samples[1].t - samples[0].t) * 1e3;
+  }
+  let work = 0;
+  for (let i = samples.length - 1; i > 0; i--) {
+    if (samples[i].t === samples[i - 1].t) continue;
+    const vprev = kineticEnergyToVelocity(work);
+    const vcurr = (samples[i].d - samples[i - 1].d) / (samples[i].t - samples[i - 1].t);
+    work += (vcurr - vprev) * Math.abs(vcurr);
+    if (i === samples.length - 1) work *= 0.5;
+  }
+  return kineticEnergyToVelocity(work) * 1e3;
+}
+function useHorizontalVelocity() {
+  const touches = /* @__PURE__ */ new Map();
+  function addMovement(e) {
+    for (const touch of Array.from(e.changedTouches)) {
+      const samples = touches.get(touch.identifier) ?? [];
+      samples.push({ t: e.timeStamp, d: touch.clientX });
+      if (samples.length > VELOCITY_HISTORY) samples.shift();
+      touches.set(touch.identifier, samples);
+    }
+  }
+  function endTouch(e) {
+    for (const touch of Array.from(e.changedTouches)) touches.delete(touch.identifier);
+  }
+  function getVelocity(id) {
+    const samples = [...touches.get(id) ?? []].reverse();
+    if (!samples.length) return 0;
+    const newest = samples[0].t;
+    return calculateImpulseVelocity(samples.filter(({ t }) => newest - t <= VELOCITY_HORIZON));
+  }
+  return { addMovement, endTouch, getVelocity };
+}
+function useDrawerTouch({
+  el,
+  isActive,
+  isTemporary,
+  width,
+  touchless,
+  right
+}) {
+  const { addMovement, endTouch, getVelocity } = useHorizontalVelocity();
+  const isDragging = shallowRef(false);
+  const dragProgress = shallowRef(0);
+  const offset = shallowRef(0);
+  let maybeDragging = false;
+  let start;
+  function fromEdge(x) {
+    return right.value ? document.documentElement.clientWidth - x : x;
+  }
+  function getOffset(x, active) {
+    return fromEdge(x) - (active ? width.value : 0);
+  }
+  function getProgress(x, limit = true) {
+    const progress = (fromEdge(x) - offset.value) / width.value;
+    return limit ? clamp(progress) : progress;
+  }
+  function onTouchstart(e) {
+    if (touchless.value || !isTemporary.value) return;
+    const [touch] = Array.from(e.changedTouches);
+    const inTouchZone = fromEdge(touch.clientX) < TOUCH_ZONE;
+    if (!inTouchZone && !isActive.value) return;
+    start = [touch.clientX, touch.clientY];
+    offset.value = getOffset(touch.clientX, isActive.value);
+    dragProgress.value = getProgress(touch.clientX);
+    maybeDragging = offset.value > -20 && offset.value < 80;
+    endTouch(e);
+    addMovement(e);
+  }
+  function onTouchmove(e) {
+    const [touch] = Array.from(e.changedTouches);
+    if (maybeDragging && start) {
+      if (!e.cancelable) {
+        maybeDragging = false;
+        return;
+      }
+      const dx = Math.abs(touch.clientX - start[0]);
+      const dy = Math.abs(touch.clientY - start[1]);
+      if (dx > dy && dx > 3) {
+        isDragging.value = true;
+        maybeDragging = false;
+      } else if (dy > 3) {
+        maybeDragging = false;
+      }
+    }
+    if (!isDragging.value) return;
+    e.preventDefault();
+    addMovement(e);
+    const progress = getProgress(touch.clientX, false);
+    dragProgress.value = clamp(progress);
+    if (progress > 1) offset.value = getOffset(touch.clientX, true);
+    else if (progress < 0) offset.value = getOffset(touch.clientX, false);
+  }
+  function onTouchend(e) {
+    maybeDragging = false;
+    if (!isDragging.value) return;
+    addMovement(e);
+    isDragging.value = false;
+    const [touch] = Array.from(e.changedTouches);
+    const velocity = getVelocity(touch.identifier);
+    if (Math.abs(velocity) > FLING_VELOCITY) {
+      isActive.value = right.value ? velocity < 0 : velocity > 0;
+    } else {
+      isActive.value = dragProgress.value > 0.5;
+    }
+  }
+  onMounted(() => {
+    window.addEventListener("touchstart", onTouchstart, { passive: true });
+    window.addEventListener("touchmove", onTouchmove, { passive: false });
+    window.addEventListener("touchend", onTouchend, { passive: true });
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("touchstart", onTouchstart);
+    window.removeEventListener("touchmove", onTouchmove);
+    window.removeEventListener("touchend", onTouchend);
+  });
+  const dragStyles = computed(() => {
+    if (!isDragging.value) return void 0;
+    const shift = `${dragProgress.value * width.value}px`;
+    return {
+      transform: right.value ? `translateX(calc(100% - ${shift}))` : `translateX(calc(-100% + ${shift}))`,
+      transition: "none"
+    };
+  });
+  watch(dragStyles, (styles) => {
+    var _a, _b;
+    (_a = el.value) == null ? void 0 : _a.style.setProperty("transform", (styles == null ? void 0 : styles.transform) ?? null);
+    (_b = el.value) == null ? void 0 : _b.style.setProperty("transition", (styles == null ? void 0 : styles.transition) ?? null);
+  });
+  return { isDragging, dragProgress };
+}
+export {
+  useDrawerTouch as u
+};
+//# sourceMappingURL=useDrawerTouch.mjs.map

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

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

@@ -1,4 +1,6 @@
 import { defineComponent, useSlots, resolveDynamicComponent, createVNode, unref } from "vue";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { p as pascalCase } from "../../utils/changeCase.mjs";
 import { u as convertToUnit } from "../../utils/helpers.mjs";
@@ -9,10 +11,8 @@ import { C as CdsIcon } from "../CdsIcon/index.mjs";
 import { C as CdsImage } from "../CdsImage/index.mjs";
 import { C as CdsEmptyStateConstants } from "./api/CdsEmptyState.constants.mjs";
 import { d as defineCdsEmptyStateProps } from "./api/CdsEmptyState.props.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { a as useBackgroundColor, u as useTextColor } from "../../composables/useColor/useColor.mjs";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.mjs";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsEmptyStateConstants.name

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

@@ -1,40 +1,65 @@
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.mjs";
 import { d as defineRouterProps } from "../../../composables/useRouter/useRouter.mjs";
 import { d as defineTextProps } from "../../../composables/useText/useText.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { 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 CdsEmptyStateConstants } from "./CdsEmptyState.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsEmptyStateProps = propsFactory(
   {
-    /** Текст кнопки действия. При указании рендерится кнопка под контентом. */
+    /**
+     * Текст кнопки действия. При указании рендерится кнопка под контентом.
+     * @en Text of the action button. When set, a button is rendered below the content.
+     */
     actionText: String,
-    /** Иконка в медиа-области. */
+    /**
+     * Иконка в медиа-области.
+     * @en Icon in the media area.
+     */
     icon: IconValue,
     /**
      * Legacy-иллюстрация из пакета `@central-design-system/illustrations` (CDS 3):
      * kebab-case имя глобально зарегистрированного компонента, например `rocket`.
      * Иллюстрации регистрируются через опцию `illustrations` в `createCds`.
+     * @en Legacy illustration from the `@central-design-system/illustrations` package (CDS 3): the kebab-case name of a globally registered component, for example `rocket`. Illustrations are registered through the `illustrations` option of `createCds`.
      */
     illustration: String,
-    /** Источник изображения в медиа-области (имеет приоритет над `icon`). */
+    /**
+     * Источник изображения в медиа-области (имеет приоритет над `icon`).
+     * @en Source of the image in the media area (takes priority over `icon`).
+     */
     image: String,
-    /** Горизонтальное выравнивание контента: `start`, `center`, `end`. */
+    /**
+     * Горизонтальное выравнивание контента: `start`, `center`, `end`.
+     * @en Horizontal alignment of the content: `start`, `center`, `end`.
+     */
     justify: {
       type: String,
       default: "center"
     },
-    /** Крупный акцентный заголовок над основным заголовком. */
+    /**
+     * Крупный акцентный заголовок над основным заголовком.
+     * @en Large accent heading above the main heading.
+     */
     headline: String,
-    /** Заголовок. */
+    /**
+     * Заголовок.
+     * @en Heading.
+     */
     title: String,
-    /** Описание */
+    /**
+     * Описание
+     * @en Description
+     */
     description: String,
-    /** Максимальная ширина блока описания. */
+    /**
+     * Максимальная ширина блока описания.
+     * @en Maximum width of the description block.
+     */
     textWidth: {
       type: [Number, String],
       default: 500