@profitliga/ui 1.2.89 → 2.0.0

package/dist/components/v2/Select/Select.vue2.js

@@ -0,0 +1,352 @@
+import { defineComponent as _e, useModel as ke, useId as xe, useAttrs as Re, computed as u, ref as S, useTemplateRef as _, onMounted as we, nextTick as z, onBeforeUnmount as Ce, watch as T, openBlock as c, createElementBlock as o, mergeProps as f, unref as r, toDisplayString as v, createCommentVNode as k, createElementVNode as p, createVNode as $, withCtx as L, Fragment as ae, renderList as se, createBlock as X, createTextVNode as Ae, resolveDynamicComponent as Ie, withModifiers as Me, mergeModels as ie } from "vue";
+import { CircleX as Ee, ChevronDown as Se } from "@lucide/vue";
+import Te from "../Popover/Popover.vue.js";
+import $e from "../Radio/RadioMarker.vue.js";
+import { useTestId as Ne } from "../shared/useTestId.util.js";
+import Ve from "../shared/VisuallyHidden.vue.js";
+import Be from "./SelectCheckMarker.vue.js";
+const De = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Fe = ["aria-label", "aria-multiselectable", "aria-activedescendant"], Oe = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], Ge = { class: "select-list__label" }, We = {
+  key: 0,
+  class: "select-list__empty"
+}, ze = ["aria-hidden"], Le = ["src"], Xe = { class: "select__chip-label" }, Ue = ["disabled", "tabindex", "aria-label", "onClick"], je = ["aria-hidden"], qe = {
+  key: 3,
+  class: "select__placeholder"
+}, He = "Нет вариантов", tt = /* @__PURE__ */ _e({
+  inheritAttrs: !1,
+  __name: "Select",
+  props: /* @__PURE__ */ ie({
+    options: {},
+    multiple: { type: Boolean, default: !1 },
+    label: { default: void 0 },
+    placeholder: { default: "Выберите значение" },
+    supportText: { default: void 0 },
+    errorText: { default: void 0 },
+    invalid: { type: Boolean, default: !1 },
+    size: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    width: { default: void 0 },
+    align: { default: "start" },
+    alignOffset: { default: 0 },
+    side: { default: "bottom" },
+    sideOffset: { default: 4 },
+    ariaLabel: { default: void 0 },
+    breakpointMobile: { default: "sm" },
+    testId: { default: void 0 }
+  }, {
+    modelValue: {
+      default: void 0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ie(["change", "select"], ["update:modelValue"]),
+  setup(a, { emit: ne }) {
+    const s = a, x = ne, R = ke(a, "modelValue"), w = xe(), U = `select-trigger-${w}`, j = `select-label-${w}`, C = `select-list-${w}`, q = `select-message-${w}`, d = Ne(() => s.testId), N = Re(), ce = u(() => ({
+      class: N.class,
+      style: N.style
+    })), re = u(() => {
+      const { class: e, style: l, ...t } = N;
+      return t;
+    }), b = S(!1), H = _("fieldRef"), V = _("listRef"), A = _("contentRef"), K = _("chipsRef"), P = _("counterRef"), m = S(Number.MAX_SAFE_INTEGER), B = S(0), i = S(-1), y = u(() => {
+      const e = R.value;
+      return e == null ? [] : Array.isArray(e) ? e : [e];
+    }), g = u(
+      () => s.options.filter((e) => y.value.includes(e.value))
+    ), D = u(
+      () => g.value.map((e) => e.label).join(", ")
+    ), I = u(
+      () => Math.max(0, g.value.length - m.value)
+    ), oe = u(() => D.value || s.placeholder), F = u(
+      () => s.invalid ? s.errorText ?? s.supportText : s.supportText
+    ), ue = u(() => s.width ?? B.value), de = u(
+      () => i.value === -1 ? void 0 : `${C}-option-${i.value}`
+    ), fe = u(() => [
+      "select",
+      `select--${s.size}`,
+      {
+        "select--open": b.value,
+        "select--invalid": s.invalid,
+        "select--disabled": s.disabled,
+        "select--multiple": s.multiple
+      }
+    ]);
+    function M(e) {
+      return y.value.includes(e);
+    }
+    function O(e) {
+      const l = s.options[e];
+      return !!l && !l?.disabled;
+    }
+    function ve() {
+      return s.options.findIndex((e, l) => O(l));
+    }
+    function J() {
+      for (let e = s.options.length - 1; e >= 0; e -= 1)
+        if (O(e)) return e;
+      return -1;
+    }
+    function Q(e, l) {
+      const t = s.options.length;
+      if (t === 0) return -1;
+      let n = e;
+      for (let h = 0; h < t; h += 1)
+        if (n = (n + l + t) % t, O(n)) return n;
+      return -1;
+    }
+    function Y(e = 20) {
+      z(() => {
+        if (!b.value) return;
+        const l = V.value;
+        l && (l.focus(), document.activeElement === l) || e > 0 && requestAnimationFrame(() => Y(e - 1));
+      });
+    }
+    function be(e, l) {
+      l || (i.value = e);
+    }
+    function me(e) {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), i.value = Q(i.value, 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), i.value = i.value === -1 ? J() : Q(i.value, -1);
+          break;
+        case "Home":
+          e.preventDefault(), i.value = ve();
+          break;
+        case "End":
+          e.preventDefault(), i.value = J();
+          break;
+        case "Enter":
+        case " ": {
+          const l = s.options[i.value];
+          if (!l) break;
+          e.preventDefault(), Z(l);
+          break;
+        }
+      }
+    }
+    function Z(e) {
+      if (!(e.disabled || s.disabled)) {
+        if (s.multiple) {
+          const l = M(e.value) ? y.value.filter((t) => t !== e.value) : [...y.value, e.value];
+          R.value = l, x("change", l);
+        } else
+          R.value = e.value, x("change", e.value), b.value = !1;
+        x("select", e);
+      }
+    }
+    function he(e) {
+      if (s.disabled) return;
+      const l = y.value.filter((t) => t !== e);
+      R.value = l, x("change", l);
+    }
+    function G() {
+      if (!s.multiple) return;
+      const e = A.value, l = K.value;
+      if (!e || !l) return;
+      const t = Array.from(
+        l.querySelectorAll('[data-chip="item"]')
+      );
+      if (!t.length) {
+        m.value = Number.MAX_SAFE_INTEGER;
+        return;
+      }
+      const n = Number.parseFloat(getComputedStyle(l).columnGap) || 0, h = Number.parseFloat(getComputedStyle(e).columnGap) || 0, pe = I.value ? (P.value?.offsetWidth ?? 0) + h : 0, ge = e.clientWidth - pe;
+      let te = 0, W = 0;
+      for (const ye of t) {
+        const le = te + (W ? n : 0) + ye.offsetWidth;
+        if (le > ge) break;
+        te = le, W += 1;
+      }
+      m.value = Math.max(W, 1);
+    }
+    let E;
+    we(() => {
+      const e = H.value;
+      e && (B.value = e.getBoundingClientRect().width, z(G), E = new ResizeObserver((l) => {
+        for (const t of l)
+          t.target === e && (B.value = t.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
+        G();
+      }), E.observe(e), A.value && E.observe(A.value));
+    }), Ce(() => E?.disconnect()), T(
+      () => g.value.map((e) => e.value).join("|"),
+      () => {
+        m.value = Number.MAX_SAFE_INTEGER, z(G);
+      }
+    );
+    let ee = null;
+    return T(b, (e) => {
+      e ? (ee = document.activeElement, i.value = -1) : (i.value = -1, ee?.focus());
+    }), T(V, (e) => {
+      e && b.value && Y();
+    }), T(
+      () => s.disabled,
+      (e) => {
+        e && (b.value = !1);
+      }
+    ), (e, l) => (c(), o("div", f({ class: fe.value }, { ...ce.value, ...r(d)("root") }), [
+      a.label ? (c(), o("label", f({
+        key: 0,
+        id: j,
+        class: "select__label",
+        for: U
+      }, r(d)("label")), v(a.label), 17)) : k("", !0),
+      p("div", f({
+        ref_key: "fieldRef",
+        ref: H,
+        class: "select__field"
+      }, r(d)("field")), [
+        $(r(Te), {
+          open: b.value,
+          "onUpdate:open": l[0] || (l[0] = (t) => b.value = t),
+          width: ue.value,
+          side: a.side,
+          "side-offset": a.sideOffset,
+          align: a.align,
+          "align-offset": a.alignOffset,
+          arrow: !1,
+          "breakpoint-mobile": a.breakpointMobile,
+          "trigger-has-popup": "listbox",
+          "trigger-controls": C,
+          "test-id": a.testId
+        }, {
+          trigger: L(({ props: t }) => [
+            p("button", f({
+              id: U,
+              type: "button",
+              class: "select__trigger",
+              disabled: a.disabled,
+              "aria-labelledby": a.label ? j : void 0,
+              "aria-label": a.label ? void 0 : a.ariaLabel,
+              "aria-describedby": F.value ? q : void 0
+            }, {
+              ...t,
+              ...re.value,
+              ...r(d)("trigger")
+            }), [
+              $(Ve, null, {
+                default: L(() => [
+                  Ae(v(oe.value), 1)
+                ]),
+                _: 1
+              })
+            ], 16, De)
+          ]),
+          default: L(() => [
+            p("div", {
+              id: C,
+              ref_key: "listRef",
+              ref: V,
+              role: "listbox",
+              tabindex: "0",
+              "aria-label": a.label ?? a.ariaLabel,
+              "aria-multiselectable": a.multiple || void 0,
+              "aria-activedescendant": de.value,
+              class: "select-list",
+              onKeydown: me
+            }, [
+              (c(!0), o(ae, null, se(a.options, (t, n) => (c(), o("div", f({
+                id: `${C}-option-${n}`,
+                key: t.value,
+                role: "option",
+                class: ["select-list__option", {
+                  "select-list__option--active": i.value === n,
+                  "select-list__option--disabled": t.disabled
+                }],
+                "aria-selected": M(t.value),
+                "aria-disabled": t.disabled || void 0
+              }, { ref_for: !0 }, r(d)("option", t.value), {
+                onClick: (h) => Z(t),
+                onMouseenter: (h) => be(n, t.disabled)
+              }), [
+                a.multiple ? (c(), X(Be, {
+                  key: 0,
+                  checked: M(t.value),
+                  disabled: t.disabled,
+                  state: i.value === n ? "hover" : "default"
+                }, null, 8, ["checked", "disabled", "state"])) : (c(), X(r($e), {
+                  key: 1,
+                  checked: M(t.value),
+                  disabled: t.disabled,
+                  state: i.value === n ? "hover" : "default"
+                }, null, 8, ["checked", "disabled", "state"])),
+                p("span", Ge, v(t.label), 1)
+              ], 16, Oe))), 128)),
+              a.options.length ? k("", !0) : (c(), o("p", We, v(He)))
+            ], 40, Fe)
+          ]),
+          _: 1
+        }, 8, ["open", "width", "side", "side-offset", "align", "align-offset", "breakpoint-mobile", "test-id"]),
+        p("div", {
+          ref_key: "contentRef",
+          ref: A,
+          class: "select__content"
+        }, [
+          a.multiple && g.value.length ? (c(), o("span", {
+            key: 0,
+            ref_key: "chipsRef",
+            ref: K,
+            class: "select__chips"
+          }, [
+            (c(!0), o(ae, null, se(g.value, (t, n) => (c(), o("span", f({
+              key: t.value,
+              "data-chip": "item",
+              class: ["select__chip", {
+                "select__chip--measured": n >= m.value
+              }],
+              "aria-hidden": n >= m.value || void 0
+            }, { ref_for: !0 }, r(d)("chip", t.value)), [
+              t.avatar ? (c(), o("img", {
+                key: 0,
+                class: "select__chip-avatar",
+                src: t.avatar,
+                alt: ""
+              }, null, 8, Le)) : t.icon ? (c(), X(Ie(t.icon), {
+                key: 1,
+                class: "select__chip-icon",
+                "aria-hidden": "true"
+              })) : k("", !0),
+              p("span", Xe, v(t.label), 1),
+              p("button", f({
+                type: "button",
+                class: "select__chip-remove",
+                disabled: a.disabled,
+                tabindex: n >= m.value ? -1 : void 0,
+                "aria-label": `Убрать ${t.label}`
+              }, { ref_for: !0 }, r(d)("chip-remove", t.value), {
+                onClick: Me((h) => he(t.value), ["stop"])
+              }), [
+                $(r(Ee), {
+                  class: "select__chip-icon",
+                  "aria-hidden": "true"
+                })
+              ], 16, Ue)
+            ], 16, ze))), 128))
+          ], 512)) : k("", !0),
+          a.multiple && g.value.length ? (c(), o("span", f({
+            key: 1,
+            ref_key: "counterRef",
+            ref: P,
+            class: ["select__chip select__chip--counter", { "select__chip--measured": !I.value }],
+            "aria-hidden": !I.value || void 0
+          }, r(d)("chip-counter")), " +" + v(I.value || 1), 17, je)) : D.value ? (c(), o("span", f({
+            key: 2,
+            class: "select__value"
+          }, r(d)("value")), v(D.value), 17)) : (c(), o("span", qe, v(a.placeholder), 1))
+        ], 512),
+        $(r(Se), {
+          class: "select__arrow",
+          "aria-hidden": "true"
+        })
+      ], 16),
+      F.value ? (c(), o("p", f({
+        key: 1,
+        id: q,
+        class: "select__message"
+      }, r(d)("message")), v(F.value), 17)) : k("", !0)
+    ], 16));
+  }
+});
+export {
+  tt as default
+};

package/dist/components/v2/Select/SelectCheckMarker.css

@@ -0,0 +1 @@
+.select-check-marker[data-v-9d87445b]{--marker-color:var(--theme-neutral-border-default);--marker-fill:transparent;width:1.25rem;height:1.25rem;color:var(--theme-neutral-0);background-color:var(--marker-fill);border:.0625rem solid var(--marker-color);transition:background-color var(--animation-duration-fast) ease, border-color var(--animation-duration-fast) ease;border-radius:.3125rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.select-check-marker__mark[data-v-9d87445b]{width:100%;height:100%}.select-check-marker--checked[data-v-9d87445b]{--marker-color:var(--theme-primary-500);--marker-fill:var(--theme-primary-500)}.select-check-marker--hover[data-v-9d87445b]{--marker-color:var(--theme-primary-300)}.select-check-marker--hover.select-check-marker--checked[data-v-9d87445b]{--marker-fill:var(--theme-primary-300)}.select-check-marker--disabled[data-v-9d87445b]{--marker-color:var(--theme-neutral-border-disabled)}.select-check-marker--disabled.select-check-marker--checked[data-v-9d87445b]{--marker-fill:var(--theme-neutral-300)}

package/dist/components/v2/Select/SelectCheckMarker.vue.d.ts

@@ -0,0 +1,8 @@
+import { SelectMarkerProps } from './Select.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<SelectMarkerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SelectMarkerProps> & Readonly<{}>, {
+    disabled: boolean;
+    checked: boolean;
+    state: "default" | "hover";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/v2/Select/SelectCheckMarker.vue.js

@@ -0,0 +1,8 @@
+import './SelectCheckMarker.css';
+import o from "./SelectCheckMarker.vue2.js";
+/* empty css                       */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9d87445b"]]);
+export {
+  c as default
+};

package/dist/components/v2/Select/SelectCheckMarker.vue2.js

@@ -0,0 +1,40 @@
+import { defineComponent as s, computed as o, openBlock as c, createElementBlock as l, normalizeClass as d, createElementVNode as n, createCommentVNode as k } from "vue";
+const m = {
+  key: 0,
+  class: "select-check-marker__mark",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, i = /* @__PURE__ */ s({
+  __name: "SelectCheckMarker",
+  props: {
+    checked: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    state: { default: "default" }
+  },
+  setup(t) {
+    const e = t, r = o(() => [
+      "select-check-marker",
+      `select-check-marker--${e.disabled ? "default" : e.state}`,
+      {
+        "select-check-marker--checked": e.checked,
+        "select-check-marker--disabled": e.disabled
+      }
+    ]);
+    return (u, a) => (c(), l("span", {
+      class: d(r.value),
+      "aria-hidden": "true",
+      "data-part": "select-check-marker"
+    }, [
+      t.checked ? (c(), l("svg", m, [...a[0] || (a[0] = [
+        n("path", {
+          d: "M8.13636 13.70149L5.03409 10.25373L4 11.40299L8.13636 16L17 6.14925L15.9659 5L8.13636 13.70149Z",
+          fill: "currentColor"
+        }, null, -1)
+      ])])) : k("", !0)
+    ], 2));
+  }
+});
+export {
+  i as default
+};

package/dist/components/v2/Select/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Select } from './Select.vue';
+export type { SelectMarkerProps, SelectOptionData, SelectProps, SelectSize, SelectValue } from './Select.types';
+export { Select };

package/dist/components/v2/Stepper/Stepper.css

@@ -0,0 +1 @@
+.stepper[data-v-a6a81276]{scroll-behavior:smooth;scrollbar-width:none;align-items:center;gap:.25rem;min-width:0;margin:-.25rem;padding:.25rem;list-style:none;display:flex;overflow-x:auto}.stepper[data-v-a6a81276]::-webkit-scrollbar{display:none}

package/dist/components/v2/Stepper/Stepper.types.d.ts

@@ -0,0 +1,33 @@
+export type StepperValue = string | number;
+/**
+ * Состояние шага выводится из его позиции относительно активного, а не
+ * задаётся снаружи: иначе потребителю пришлось бы вручную держать флаги
+ * согласованными, и «пройденный шаг после текущего» стал бы возможен.
+ */
+export type StepperItemState = 'completed' | 'current' | 'upcoming';
+export interface StepperProps {
+    /**
+     * Делает шаги кнопками: по ним можно кликнуть и пройти табом. По умолчанию
+     * степпер — индикатор прогресса без интерактива.
+     */
+    clickable?: boolean;
+    /** Выключает все шаги разом. Имеет смысл только вместе с `clickable`. */
+    disabled?: boolean;
+    /**
+     * Доступное имя списка шагов (`aria-label`). Нужно, когда рядом нет
+     * видимого заголовка — иначе скринридер объявит безымянный список.
+     */
+    label?: string;
+    /** Доступное имя через `id` видимого заголовка. */
+    labelledBy?: string;
+    /** Базовый `data-testid`; внутренние части получают суффикс имени части. */
+    testId?: string;
+}
+export interface StepperItemProps {
+    /** Значение шага — по нему степпер понимает, какой шаг активен. */
+    value: StepperValue;
+    /** Подпись шага. Можно передать слотом по умолчанию. */
+    label?: string;
+    disabled?: boolean;
+    testId?: string;
+}

package/dist/components/v2/Stepper/Stepper.vue.d.ts

@@ -0,0 +1,37 @@
+import { StepperProps, StepperValue } from './Stepper.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = StepperProps;
+type __VLS_PublicProps = {
+    modelValue?: StepperValue | undefined;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        rootRef: HTMLOListElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: StepperValue | undefined) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: StepperValue | undefined) => any) | undefined;
+}>, {
+    label: string;
+    disabled: boolean;
+    testId: string;
+    labelledBy: string;
+    clickable: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    rootRef: HTMLOListElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/v2/Stepper/Stepper.vue.js

@@ -0,0 +1,8 @@
+import './Stepper.css';
+import o from "./Stepper.vue2.js";
+/* empty css             */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a6a81276"]]);
+export {
+  e as default
+};

package/dist/components/v2/Stepper/Stepper.vue2.js

@@ -0,0 +1,84 @@
+import { defineComponent as R, useModel as y, useTemplateRef as k, ref as T, computed as u, provide as x, watch as m, nextTick as p, onMounted as V, openBlock as C, createElementBlock as E, mergeProps as M, unref as P, renderSlot as w, mergeModels as L } from "vue";
+import { useTestId as N } from "../shared/useTestId.util.js";
+import { STEPPER_KEY as S } from "./stepper.context.js";
+const W = ["aria-label", "aria-labelledby"], A = /* @__PURE__ */ R({
+  inheritAttrs: !1,
+  __name: "Stepper",
+  props: /* @__PURE__ */ L({
+    clickable: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: void 0 },
+    labelledBy: { default: void 0 },
+    testId: { default: void 0 }
+  }, {
+    modelValue: { default: void 0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const i = a, l = y(a, "modelValue"), b = N(() => i.testId), s = k("rootRef"), o = T([]), n = u(
+      () => [...o.value].sort(
+        (e, t) => e.el.compareDocumentPosition(t.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+      ).map((e) => e.value)
+    ), d = u(
+      () => l.value === void 0 ? -1 : n.value.indexOf(l.value)
+    );
+    function g(e) {
+      return n.value.indexOf(e) + 1;
+    }
+    function h(e) {
+      const t = n.value.indexOf(e);
+      return t === -1 || d.value === -1 ? "upcoming" : t < d.value ? "completed" : t === d.value ? "current" : "upcoming";
+    }
+    function I(e) {
+      const t = n.value;
+      return t.length > 0 && t[t.length - 1] === e;
+    }
+    x(S, {
+      clickable: u(() => i.clickable),
+      disabled: u(() => i.disabled),
+      selected: l,
+      select: (e) => {
+        l.value = e;
+      },
+      numberOf: g,
+      stateOf: h,
+      isLast: I,
+      registerItem: (e, t) => {
+        o.value = [
+          ...o.value.filter((r) => r.value !== e),
+          { value: e, el: t }
+        ];
+      },
+      unregisterItem: (e) => {
+        o.value = o.value.filter((t) => t.value !== e);
+      }
+    }), m(n, (e) => {
+      l.value === void 0 && e.length > 0 && (l.value = e[0]);
+    });
+    function c(e) {
+      const t = s.value;
+      if (!t || t.scrollWidth <= t.clientWidth) return;
+      const r = o.value.find((B) => B.value === l.value)?.el;
+      if (!r) return;
+      const f = t.getBoundingClientRect(), v = r.getBoundingClientRect(), O = v.left - f.left - (f.width - v.width) / 2;
+      t.scrollTo({ left: t.scrollLeft + O, behavior: e });
+    }
+    return m(l, () => {
+      p(() => c("smooth"));
+    }), V(() => {
+      p(() => c("instant"));
+    }), (e, t) => (C(), E("ol", M({
+      ref_key: "rootRef",
+      ref: s,
+      class: "stepper",
+      "aria-label": a.labelledBy ? void 0 : a.label,
+      "aria-labelledby": a.labelledBy
+    }, { ...e.$attrs, ...P(b)("root") }), [
+      w(e.$slots, "default", {}, void 0, !0)
+    ], 16, W));
+  }
+});
+export {
+  A as default
+};

package/dist/components/v2/Stepper/StepperItem.css

@@ -0,0 +1 @@
+.stepper-item[data-v-49c65a4e]{flex:none;align-items:center;gap:.25rem;height:1.5rem;display:flex}.stepper-item__control[data-v-49c65a4e]{font:inherit;color:inherit;text-align:left;background:0 0;border:none;flex-shrink:0;align-items:center;gap:.25rem;margin:0;padding:0;display:flex}.stepper-item--clickable .stepper-item__control[data-v-49c65a4e]{cursor:pointer}.stepper-item--clickable .stepper-item__control[data-v-49c65a4e]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:2px}.stepper-item__indicator[data-v-49c65a4e]{box-sizing:border-box;width:1.5rem;height:1.5rem;color:var(--theme-neutral-400);text-align:center;background-color:var(--theme-neutral-surface-disabled);transition:background-color var(--animation-duration-fast) ease-in-out, color var(--animation-duration-fast) ease-in-out;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:.875rem;font-weight:500;line-height:1.375rem;display:flex}.stepper-item--completed .stepper-item__indicator[data-v-49c65a4e]{color:var(--theme-primary-500);background-color:var(--theme-primary-surface-subtitle)}.stepper-item--current .stepper-item__indicator[data-v-49c65a4e]{color:var(--theme-neutral-text-negative);background-color:var(--theme-primary-surface-default)}.stepper-item__label[data-v-49c65a4e]{color:var(--theme-neutral-text-body);white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.375rem}.stepper-divider[data-v-49c65a4e]{background-color:var(--theme-neutral-icon-disabled);min-width:.4375rem;height:1px;transition:background-color var(--animation-duration-fast) ease-in-out;flex:1 1 0}@media (min-width:768px){.stepper-divider[data-v-49c65a4e]{margin-inline-end:.375rem}}.stepper-divider--completed[data-v-49c65a4e]{background-color:var(--theme-primary-surface-default)}

package/dist/components/v2/Stepper/StepperItem.vue.d.ts

@@ -0,0 +1,34 @@
+import { StepperItemProps, StepperItemState } from './Stepper.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        indicator?(_: {
+            number: number;
+            state: StepperItemState;
+        }): any;
+        default?(_: {
+            number: number;
+            state: StepperItemState;
+        }): any;
+    };
+    refs: {
+        itemRef: HTMLLIElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<StepperItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<StepperItemProps> & Readonly<{}>, {
+    label: string;
+    disabled: boolean;
+    testId: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    itemRef: HTMLLIElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/v2/Stepper/StepperItem.vue.js

@@ -0,0 +1,8 @@
+import './StepperItem.css';
+import t from "./StepperItem.vue2.js";
+/* empty css                 */
+import o from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ o(t, [["__scopeId", "data-v-49c65a4e"]]);
+export {
+  m as default
+};