@profitliga/ui 2.0.2 → 2.0.4

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

@@ -1,23 +1,24 @@
-import { defineComponent as Ve, useModel as me, useId as De, useAttrs as Fe, computed as d, ref as F, useTemplateRef as C, onMounted as Le, nextTick as H, onBeforeUnmount as Oe, watch as S, openBlock as r, createElementBlock as f, mergeProps as v, unref as s, toDisplayString as _, createCommentVNode as x, createVNode as $, withCtx as Q, createElementVNode as h, renderSlot as L, createTextVNode as he, Fragment as pe, renderList as xe, createBlock as J, resolveDynamicComponent as Pe, withModifiers as ke, mergeModels as ye } from "vue";
-import { Search as We, CircleX as Ge, ChevronDown as ze } from "@lucide/vue";
-import { breakpoints as Ue } from "../../../utils/breakpoints.util.js";
-import Xe from "../Input/Input.vue.js";
-import qe from "../Popover/Popover.vue.js";
-import Ke from "../Radio/RadioMarker.vue.js";
-import je from "../Select/SelectCheckMarker.vue.js";
-import { useTestId as He } from "../shared/useTestId.util.js";
-const Qe = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "aria-label", "aria-describedby", "aria-activedescendant"], Je = ["aria-hidden"], Ye = ["src"], Ze = { class: "combobox__chip-label" }, ea = ["disabled", "tabindex", "aria-label", "onClick"], aa = ["aria-hidden"], la = ["disabled"], ta = { class: "combobox-list" }, oa = {
+import { defineComponent as Ge, useModel as ge, useId as ze, useAttrs as Ue, computed as u, ref as E, useTemplateRef as I, shallowRef as Xe, watch as R, onMounted as Ke, nextTick as W, onBeforeUnmount as je, openBlock as r, createElementBlock as v, mergeProps as f, unref as s, createTextVNode as Y, toDisplayString as w, createCommentVNode as x, createVNode as M, withCtx as Z, createElementVNode as y, renderSlot as G, Fragment as ke, renderList as _e, createBlock as ee, resolveDynamicComponent as Qe, withModifiers as ae, mergeModels as we } from "vue";
+import { Search as He, CircleX as Je, X as Ye, ChevronDown as Ze } from "@lucide/vue";
+import ea from "../Input/Input.vue.js";
+import aa from "../Popover/Popover.vue.js";
+import la from "../Radio/RadioMarker.vue.js";
+import ta from "../Select/SelectCheckMarker.vue.js";
+import { useIsMobile as oa } from "../shared/useIsMobile.util.js";
+import { useTestId as ia } from "../shared/useTestId.util.js";
+const sa = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "aria-label", "aria-describedby", "aria-activedescendant", "aria-required"], na = ["aria-hidden"], ua = ["src"], ra = { class: "combobox__chip-label" }, ca = ["disabled", "tabindex", "aria-label", "onClick"], da = ["aria-hidden"], va = ["aria-label"], fa = ["disabled"], ba = { class: "combobox-list" }, ma = {
   key: 0,
   class: "combobox-list__search"
-}, ia = ["aria-label", "aria-multiselectable"], sa = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], na = { class: "combobox-list__label" }, ua = 64, pa = /* @__PURE__ */ Ve({
+}, ha = ["aria-label", "aria-multiselectable"], pa = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], xa = { class: "combobox-list__label" }, ya = 64, Sa = /* @__PURE__ */ Ge({
   inheritAttrs: !1,
   __name: "Combobox",
-  props: /* @__PURE__ */ ye({
+  props: /* @__PURE__ */ we({
     options: {},
     multiple: { type: Boolean, default: !1 },
     filter: { type: Boolean, default: !0 },
     loading: { type: Boolean, default: !1 },
     label: { default: void 0 },
+    required: { type: Boolean, default: !1 },
     placeholder: { default: "Выберите значение" },
     searchPlaceholder: { default: "Поиск" },
     supportText: { default: void 0 },
@@ -25,6 +26,7 @@ const Qe = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
     invalid: { type: Boolean, default: !1 },
     size: { default: "default" },
     disabled: { type: Boolean, default: !1 },
+    hideEmptyList: { type: Boolean, default: !1 },
     emptyText: { default: "Нет вариантов" },
     notFoundText: { default: "Ничего не найдено" },
     loadingText: { default: "Загрузка…" },
@@ -34,7 +36,7 @@ const Qe = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
     side: { default: "bottom" },
     sideOffset: { default: 4 },
     ariaLabel: { default: void 0 },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     testId: { default: void 0 }
   }, {
     modelValue: {
@@ -44,438 +46,490 @@ const Qe = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
     search: { default: "" },
     searchModifiers: {}
   }),
-  emits: /* @__PURE__ */ ye(["change", "select", "search"], ["update:modelValue", "update:search"]),
-  setup(t, { emit: ge }) {
-    const o = t, k = ge, A = me(t, "modelValue"), u = me(t, "search"), B = De(), Y = `combobox-input-${B}`, Z = `combobox-label-${B}`, w = `combobox-list-${B}`, ee = `combobox-message-${B}`, b = He(() => o.testId), O = Fe(), _e = d(() => ({
-      class: O.class,
-      style: O.style
-    })), we = d(() => {
-      const { class: e, style: a, ...l } = O;
+  emits: /* @__PURE__ */ we(["change", "select", "search", "clear"], ["update:modelValue", "update:search"]),
+  setup(i, { emit: Ce }) {
+    const o = i, p = Ce, S = ge(i, "modelValue"), n = ge(i, "search"), V = ze(), le = `combobox-input-${V}`, te = `combobox-label-${V}`, C = `combobox-list-${V}`, oe = `combobox-message-${V}`, d = ia(() => o.testId), z = Ue(), Ie = u(() => ({
+      class: z.class,
+      style: z.style
+    })), Re = u(() => {
+      const { class: e, style: a, ...l } = z;
       return l;
-    }), I = Ue.smaller(o.breakpointMobile), c = F(!1), ae = C("fieldRef"), E = C("contentRef"), le = C("chipsRef"), te = C("counterRef"), P = C("inputRef"), oe = C("listRef"), y = F(Number.MAX_SAFE_INTEGER), W = F(0), n = F(-1), g = d(() => {
-      const e = A.value;
+    }), k = oa(o.breakpointMobile), b = E(!1), ie = I("fieldRef"), N = I("contentRef"), se = I("chipsRef"), ne = I("counterRef"), L = I("inputRef"), ue = I("listRef"), _ = E(Number.MAX_SAFE_INTEGER), U = E(0), c = E(-1), m = u(() => {
+      const e = S.value;
       return e == null ? [] : Array.isArray(e) ? e : [e];
-    }), R = d(
-      () => o.options.filter((e) => g.value.includes(e.value))
-    ), G = d(
-      () => R.value.map((e) => e.label).join(", ")
-    ), z = d(
-      () => o.multiple && R.value.length > 0
-    ), N = d(
-      () => Math.max(0, R.value.length - y.value)
-    ), Ce = d(() => c.value ? u.value : o.multiple ? "" : G.value), Ie = d(() => z.value ? "" : c.value && !o.multiple && G.value ? G.value : o.placeholder), p = d(() => {
-      const e = u.value.trim().toLowerCase();
+    }), X = Xe(/* @__PURE__ */ new Map());
+    R(
+      [m, () => o.options],
+      () => {
+        const e = /* @__PURE__ */ new Map();
+        for (const a of m.value) {
+          const l = o.options.find((t) => t.value === a) ?? X.value.get(a);
+          l && e.set(a, l);
+        }
+        X.value = e;
+      },
+      { immediate: !0 }
+    );
+    const T = u(() => {
+      const e = o.options.filter(
+        (t) => m.value.includes(t.value)
+      );
+      if (e.length === m.value.length) return e;
+      const a = new Set(e.map((t) => t.value)), l = m.value.filter((t) => !a.has(t)).map((t) => X.value.get(t)).filter((t) => t !== void 0);
+      return [...e, ...l];
+    }), re = u(
+      () => T.value.map((e) => e.label).join(", ")
+    ), K = u(
+      () => o.multiple && T.value.length > 0
+    ), Me = u(
+      () => !o.multiple && !o.disabled && m.value.length > 0
+    ), Se = u(() => "Очистить поле"), D = u(
+      () => Math.max(0, T.value.length - _.value)
+    ), $ = E(!1), Te = u(() => b.value && $.value ? n.value : o.multiple ? "" : re.value), $e = u(() => K.value ? "" : o.placeholder), g = u(() => {
+      const e = n.value.trim().toLowerCase();
       return !o.filter || !e ? o.options : o.options.filter(
         (a) => a.label.toLowerCase().includes(e)
       );
-    }), U = d(
+    }), Be = u(
+      () => o.loading || g.value.length > 0
+    ), Ae = u(() => n.value.trim().length > 0), q = u({
+      get: () => b.value && (!o.hideEmptyList || k.value || Be.value || Ae.value),
+      set: (e) => {
+        b.value = e;
+      }
+    }), j = u(
       () => o.invalid ? o.errorText ?? o.supportText : o.supportText
-    ), Re = d(() => o.width ?? W.value), ie = d(
-      () => c.value && n.value !== -1 ? `${w}-option-${n.value}` : void 0
-    ), Me = d(() => [
+    ), Ee = u(() => o.width ?? U.value), ce = u(
+      () => q.value && c.value !== -1 ? `${C}-option-${c.value}` : void 0
+    ), Ve = u(() => [
       "combobox",
       `combobox--${o.size}`,
       {
-        "combobox--open": c.value,
+        /* Стрелка и рамка следуют за видимым списком, а не за намерением открыть. */
+        "combobox--open": q.value,
         "combobox--invalid": o.invalid,
         "combobox--disabled": o.disabled,
         "combobox--multiple": o.multiple
       }
     ]);
-    function M(e) {
-      return g.value.includes(e);
+    function B(e) {
+      return m.value.includes(e);
     }
-    function X(e) {
-      const a = p.value[e];
+    function Q(e) {
+      const a = g.value[e];
       return !!a && !a?.disabled;
     }
-    function se() {
-      return p.value.findIndex((e, a) => X(a));
+    function de() {
+      return g.value.findIndex((e, a) => Q(a));
     }
-    function Te() {
-      for (let e = p.value.length - 1; e >= 0; e -= 1)
-        if (X(e)) return e;
+    function Ne() {
+      for (let e = g.value.length - 1; e >= 0; e -= 1)
+        if (Q(e)) return e;
       return -1;
     }
-    function ne(e, a) {
-      const l = p.value.length;
+    function ve(e, a) {
+      const l = g.value.length;
       if (l === 0) return -1;
-      let i = e;
-      for (let m = 0; m < l; m += 1)
-        if (i = (i + a + l) % l, X(i)) return i;
+      let t = e;
+      for (let h = 0; h < l; h += 1)
+        if (t = (t + a + l) % l, Q(t)) return t;
       return -1;
     }
-    function q() {
-      I.value || P.value?.focus();
+    function F() {
+      k.value || L.value?.focus();
     }
-    function T() {
-      o.disabled || c.value || (c.value = !0);
+    function A() {
+      o.disabled || b.value || (b.value = !0);
     }
-    function V() {
-      c.value = !1;
+    function O() {
+      b.value = !1;
     }
-    function Se(e) {
-      e.stopPropagation(), !o.disabled && (T(), q());
+    function Le() {
+      o.disabled || (S.value = void 0, p("change", void 0), p("clear"), $.value = !1, n.value && (n.value = "", p("search", "")), F());
     }
-    function $e() {
+    function De(e) {
+      e.stopPropagation(), !o.disabled && (A(), F());
+    }
+    function qe() {
       if (!o.disabled) {
-        if (c.value) {
-          V();
+        if (b.value) {
+          O();
           return;
         }
-        T(), q();
+        A(), F();
       }
     }
-    function ue(e) {
+    function fe(e) {
       const a = e.target.value;
-      u.value = a, k("search", a), T();
+      $.value = !0, n.value = a, p("search", a), A();
     }
-    function Ae(e) {
-      I.value || e.preventDefault();
+    function Fe(e) {
+      k.value || e.preventDefault();
     }
-    function Be(e, a) {
-      a || (n.value = e);
+    function Oe(e, a) {
+      a || (c.value = e);
     }
-    function re(e) {
+    function be(e) {
       switch (e.key) {
         case "ArrowDown":
-          if (e.preventDefault(), !c.value) {
-            T();
+          if (e.preventDefault(), !b.value) {
+            A();
             break;
           }
-          n.value = ne(n.value, 1);
+          c.value = ve(c.value, 1);
           break;
         case "ArrowUp":
-          if (e.preventDefault(), !c.value) {
-            T();
+          if (e.preventDefault(), !b.value) {
+            A();
             break;
           }
-          n.value = n.value === -1 ? Te() : ne(n.value, -1);
+          c.value = c.value === -1 ? Ne() : ve(c.value, -1);
           break;
         case "Enter": {
-          if (!c.value) break;
-          const a = p.value[n.value];
+          if (!b.value) break;
+          const a = g.value[c.value];
           if (!a) break;
-          e.preventDefault(), ce(a);
+          e.preventDefault(), me(a);
           break;
         }
         case "Escape":
-          if (c.value) {
-            u.value = "";
+          if (b.value) {
+            n.value = "";
             break;
           }
-          u.value && (u.value = "");
+          n.value && (n.value = "");
           break;
         case "Tab":
-          V();
+          O();
           break;
         case "Backspace": {
-          if (!o.multiple || u.value) break;
-          const a = g.value[g.value.length - 1];
+          if (!o.multiple || n.value) break;
+          const a = m.value[m.value.length - 1];
           if (a === void 0) break;
-          de(a);
+          he(a);
           break;
         }
       }
     }
-    function ce(e) {
+    function me(e) {
       if (!(e.disabled || o.disabled)) {
         if (o.multiple) {
-          const a = M(e.value) ? g.value.filter((l) => l !== e.value) : [...g.value, e.value];
-          A.value = a, k("change", a), u.value && (u.value = "", k("search", "")), q();
+          const a = B(e.value) ? m.value.filter((l) => l !== e.value) : [...m.value, e.value];
+          S.value = a, p("change", a), n.value && (n.value = "", p("search", "")), F();
         } else
-          A.value = e.value, k("change", e.value), V(), I.value || P.value?.focus();
-        k("select", e);
+          S.value = e.value, p("change", e.value), O(), k.value || L.value?.focus();
+        p("select", e);
       }
     }
-    function de(e) {
+    function he(e) {
       if (o.disabled) return;
-      const a = g.value.filter((l) => l !== e);
-      A.value = a, k("change", a);
+      const a = m.value.filter((l) => l !== e);
+      S.value = a, p("change", a);
     }
-    function K() {
+    function H() {
       if (!o.multiple) return;
-      const e = E.value, a = le.value;
+      const e = N.value, a = se.value;
       if (!e || !a) return;
       const l = Array.from(
         a.querySelectorAll('[data-chip="item"]')
       );
       if (!l.length) {
-        y.value = Number.MAX_SAFE_INTEGER;
+        _.value = Number.MAX_SAFE_INTEGER;
         return;
       }
-      const i = Number.parseFloat(getComputedStyle(a).columnGap) || 0, m = Number.parseFloat(getComputedStyle(e).columnGap) || 0, be = N.value ? (te.value?.offsetWidth ?? 0) + m : 0, Ee = e.clientWidth - be - ua - m;
-      let fe = 0, j = 0;
-      for (const Ne of l) {
-        const ve = fe + (j ? i : 0) + Ne.offsetWidth;
-        if (ve > Ee) break;
-        fe = ve, j += 1;
+      const t = Number.parseFloat(getComputedStyle(a).columnGap) || 0, h = Number.parseFloat(getComputedStyle(e).columnGap) || 0, pe = D.value ? (ne.value?.offsetWidth ?? 0) + h : 0, Pe = e.clientWidth - pe - ya - h;
+      let xe = 0, J = 0;
+      for (const We of l) {
+        const ye = xe + (J ? t : 0) + We.offsetWidth;
+        if (ye > Pe) break;
+        xe = ye, J += 1;
       }
-      y.value = Math.max(j, 1);
+      _.value = Math.max(J, 1);
     }
-    let D;
-    return Le(() => {
-      const e = ae.value;
-      e && (W.value = e.getBoundingClientRect().width, H(K), D = new ResizeObserver((a) => {
+    let P;
+    return Ke(() => {
+      const e = ie.value;
+      e && (U.value = e.getBoundingClientRect().width, W(H), P = new ResizeObserver((a) => {
         for (const l of a)
-          l.target === e && (W.value = l.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
-        K();
-      }), D.observe(e), E.value && D.observe(E.value));
-    }), Oe(() => D?.disconnect()), S(
-      () => R.value.map((e) => e.value).join("|"),
+          l.target === e && (U.value = l.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
+        H();
+      }), P.observe(e), N.value && P.observe(N.value));
+    }), je(() => P?.disconnect()), R(
+      () => T.value.map((e) => e.value).join("|"),
       () => {
-        y.value = Number.MAX_SAFE_INTEGER, H(K);
+        _.value = Number.MAX_SAFE_INTEGER, W(H);
       }
-    ), S([p, u], () => {
-      n.value = u.value ? se() : -1;
-    }), S(c, (e) => {
+    ), R([g, n], () => {
+      c.value = n.value ? de() : -1;
+    }), R(b, (e) => {
       if (e) {
-        n.value = u.value ? se() : -1;
+        c.value = n.value ? de() : -1, $.value = !1, !k.value && !o.multiple && re.value && W(() => L.value?.select());
         return;
       }
-      n.value = -1, u.value && (u.value = "", k("search", ""));
-    }), S(n, (e) => {
-      e !== -1 && H(() => {
-        oe.value?.querySelector(
-          `#${CSS.escape(`${w}-option-${e}`)}`
+      c.value = -1, $.value = !1, n.value && (n.value = "", p("search", ""));
+    }), R(c, (e) => {
+      e !== -1 && W(() => {
+        ue.value?.querySelector(
+          `#${CSS.escape(`${C}-option-${e}`)}`
         )?.scrollIntoView({ block: "nearest" });
       });
-    }), S(
+    }), R(
       () => o.disabled,
       (e) => {
-        e && V();
+        e && O();
       }
-    ), (e, a) => (r(), f("div", v({ class: Me.value }, { ..._e.value, ...s(b)("root") }), [
-      t.label ? (r(), f("label", v({
+    ), (e, a) => (r(), v("div", f({ class: Ve.value }, { ...Ie.value, ...s(d)("root") }), [
+      i.label ? (r(), v("label", f({
         key: 0,
-        id: Z,
+        id: te,
         class: "combobox__label",
-        for: Y
-      }, s(b)("label")), _(t.label), 17)) : x("", !0),
-      $(s(qe), {
-        open: c.value,
-        "onUpdate:open": a[1] || (a[1] = (l) => c.value = l),
-        width: Re.value,
-        side: t.side,
-        "side-offset": t.sideOffset,
-        align: t.align,
-        "align-offset": t.alignOffset,
+        for: le
+      }, s(d)("label")), [
+        Y(w(i.label) + " ", 1),
+        i.required ? (r(), v("span", f({
+          key: 0,
+          class: "combobox__required",
+          "aria-hidden": "true"
+        }, s(d)("required")), "*", 16)) : x("", !0)
+      ], 16)) : x("", !0),
+      M(s(aa), {
+        open: q.value,
+        "onUpdate:open": a[1] || (a[1] = (l) => q.value = l),
+        width: Ee.value,
+        side: i.side,
+        "side-offset": i.sideOffset,
+        align: i.align,
+        "align-offset": i.alignOffset,
         arrow: !1,
-        "breakpoint-mobile": t.breakpointMobile,
+        "breakpoint-mobile": i.breakpointMobile,
         "trigger-has-popup": "listbox",
-        "trigger-controls": w,
+        "trigger-controls": C,
         "trap-focus": !1,
-        "test-id": t.testId
+        "test-id": i.testId
       }, {
-        trigger: Q(({ props: l }) => [
-          h("div", v({
+        trigger: Z(({ props: l }) => [
+          y("div", f({
             ref_key: "fieldRef",
-            ref: ae,
+            ref: ie,
             class: "combobox__field"
-          }, s(b)("field"), { onClick: Se }), [
-            h("div", {
+          }, s(d)("field"), { onClick: De }), [
+            y("div", {
               ref_key: "contentRef",
-              ref: E,
+              ref: N,
               class: "combobox__content"
             }, [
-              h("input", v({
-                id: Y,
+              y("input", f({
+                id: le,
                 ref_key: "inputRef",
-                ref: P,
+                ref: L,
                 role: "combobox",
                 type: "text",
                 class: "combobox__input",
                 autocomplete: "off",
                 spellcheck: "false",
                 "aria-autocomplete": "list",
-                value: Ce.value,
-                placeholder: Ie.value,
-                disabled: t.disabled,
-                readonly: s(I),
-                "aria-labelledby": t.label ? Z : void 0,
-                "aria-label": t.label ? void 0 : t.ariaLabel,
-                "aria-describedby": U.value ? ee : void 0,
-                "aria-activedescendant": ie.value
+                value: Te.value,
+                placeholder: $e.value,
+                disabled: i.disabled,
+                readonly: s(k),
+                "aria-labelledby": i.label ? te : void 0,
+                "aria-label": i.label ? void 0 : i.ariaLabel,
+                "aria-describedby": j.value ? oe : void 0,
+                "aria-activedescendant": ce.value,
+                "aria-required": i.required || void 0
               }, {
                 ...l,
-                ...we.value,
-                ...s(b)("input")
+                ...Re.value,
+                ...s(d)("input")
               }, {
-                onInput: ue,
-                onKeydown: re
-              }), null, 16, Qe),
-              z.value ? (r(), f("span", {
+                onInput: fe,
+                onKeydown: be
+              }), null, 16, sa),
+              K.value ? (r(), v("span", {
                 key: 0,
                 ref_key: "chipsRef",
-                ref: le,
+                ref: se,
                 class: "combobox__chips"
               }, [
-                (r(!0), f(pe, null, xe(R.value, (i, m) => (r(), f("span", v({
-                  key: i.value,
+                (r(!0), v(ke, null, _e(T.value, (t, h) => (r(), v("span", f({
+                  key: t.value,
                   "data-chip": "item",
                   class: ["combobox__chip", {
-                    "combobox__chip--measured": m >= y.value
+                    "combobox__chip--measured": h >= _.value
                   }],
-                  "aria-hidden": m >= y.value || void 0
-                }, { ref_for: !0 }, s(b)("chip", i.value)), [
-                  L(e.$slots, "chip", {
-                    option: i,
-                    index: m
+                  "aria-hidden": h >= _.value || void 0
+                }, { ref_for: !0 }, s(d)("chip", t.value)), [
+                  G(e.$slots, "chip", {
+                    option: t,
+                    index: h
                   }, () => [
-                    i.avatar ? (r(), f("img", {
+                    t.avatar ? (r(), v("img", {
                       key: 0,
                       class: "combobox__chip-avatar",
-                      src: i.avatar,
+                      src: t.avatar,
                       alt: ""
-                    }, null, 8, Ye)) : i.icon ? (r(), J(Pe(i.icon), {
+                    }, null, 8, ua)) : t.icon ? (r(), ee(Qe(t.icon), {
                       key: 1,
                       class: "combobox__chip-icon",
                       "aria-hidden": "true"
                     })) : x("", !0),
-                    h("span", Ze, _(i.label), 1)
+                    y("span", ra, w(t.label), 1)
                   ], !0),
-                  h("button", v({
+                  y("button", f({
                     type: "button",
                     class: "combobox__chip-remove",
-                    disabled: t.disabled,
-                    tabindex: m >= y.value ? -1 : void 0,
-                    "aria-label": `Убрать ${i.label}`
-                  }, { ref_for: !0 }, s(b)("chip-remove", i.value), {
-                    onClick: ke((be) => de(i.value), ["stop"])
+                    disabled: i.disabled,
+                    tabindex: h >= _.value ? -1 : void 0,
+                    "aria-label": `Убрать ${t.label}`
+                  }, { ref_for: !0 }, s(d)("chip-remove", t.value), {
+                    onClick: ae((pe) => he(t.value), ["stop"])
                   }), [
-                    $(s(Ge), {
+                    M(s(Je), {
                       class: "combobox__chip-icon",
                       "aria-hidden": "true"
                     })
-                  ], 16, ea)
-                ], 16, Je))), 128))
+                  ], 16, ca)
+                ], 16, na))), 128))
               ], 512)) : x("", !0),
-              z.value ? (r(), f("span", v({
+              K.value ? (r(), v("span", f({
                 key: 1,
                 ref_key: "counterRef",
-                ref: te,
+                ref: ne,
                 class: ["combobox__chip combobox__chip--counter", {
-                  "combobox__chip--measured": !N.value
+                  "combobox__chip--measured": !D.value
                 }],
-                "aria-hidden": !N.value || void 0
-              }, s(b)("chip-counter")), " +" + _(N.value || 1), 17, aa)) : x("", !0)
+                "aria-hidden": !D.value || void 0
+              }, s(d)("chip-counter")), " +" + w(D.value || 1), 17, da)) : x("", !0)
             ], 512),
-            h("button", v({
+            Me.value ? (r(), v("button", f({
+              key: 0,
+              type: "button",
+              class: "combobox__clear-button",
+              "aria-label": Se.value
+            }, s(d)("clear"), {
+              onClick: ae(Le, ["stop"])
+            }), [
+              M(s(Ye), {
+                class: "combobox__clear",
+                "aria-hidden": "true"
+              })
+            ], 16, va)) : x("", !0),
+            y("button", f({
               type: "button",
               class: "combobox__arrow-button",
               tabindex: "-1",
               "aria-hidden": "true",
-              disabled: t.disabled
-            }, s(b)("arrow"), {
-              onClick: ke($e, ["stop"])
+              disabled: i.disabled
+            }, s(d)("arrow"), {
+              onClick: ae(qe, ["stop"])
             }), [
-              $(s(ze), { class: "combobox__arrow" })
-            ], 16, la)
+              M(s(Ze), { class: "combobox__arrow" })
+            ], 16, fa)
           ], 16)
         ]),
-        default: Q(() => [
-          h("div", ta, [
-            s(I) ? (r(), f("div", oa, [
-              $(s(Xe), v({
-                modelValue: u.value,
-                "onUpdate:modelValue": a[0] || (a[0] = (l) => u.value = l),
+        default: Z(() => [
+          y("div", ba, [
+            s(k) ? (r(), v("div", ma, [
+              M(s(ea), f({
+                modelValue: n.value,
+                "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
                 "native-type": "search",
-                placeholder: t.searchPlaceholder,
-                "aria-label": t.searchPlaceholder,
-                "aria-controls": w,
-                "aria-activedescendant": ie.value,
+                placeholder: i.searchPlaceholder,
+                "aria-label": i.searchPlaceholder,
+                "aria-controls": C,
+                "aria-activedescendant": ce.value,
                 "aria-autocomplete": "list",
                 autocomplete: "off",
                 spellcheck: "false"
-              }, s(b)("search"), {
-                onInput: ue,
-                onKeydown: re
+              }, s(d)("search"), {
+                onInput: fe,
+                onKeydown: be
               }), {
-                prefix: Q(() => [
-                  $(s(We), { "aria-hidden": "true" })
+                prefix: Z(() => [
+                  M(s(He), { "aria-hidden": "true" })
                 ]),
                 _: 1
               }, 16, ["modelValue", "placeholder", "aria-label", "aria-activedescendant"])
             ])) : x("", !0),
-            h("div", {
+            y("div", {
               ref_key: "listRef",
-              ref: oe,
+              ref: ue,
               class: "combobox-list__scroll",
-              onMousedown: Ae
+              onMousedown: Fe
             }, [
-              h("div", {
-                id: w,
+              y("div", {
+                id: C,
                 role: "listbox",
-                "aria-label": t.label ?? t.ariaLabel,
-                "aria-multiselectable": t.multiple || void 0,
+                "aria-label": i.label ?? i.ariaLabel,
+                "aria-multiselectable": i.multiple || void 0,
                 class: "combobox-list__options"
               }, [
-                t.loading ? (r(), f("p", v({
+                i.loading ? (r(), v("p", f({
                   key: 0,
                   class: "combobox-list__status"
-                }, s(b)("loading")), [
-                  L(e.$slots, "loading", {}, () => [
-                    he(_(t.loadingText), 1)
+                }, s(d)("loading")), [
+                  G(e.$slots, "loading", {}, () => [
+                    Y(w(i.loadingText), 1)
                   ], !0)
                 ], 16)) : x("", !0),
-                (r(!0), f(pe, null, xe(p.value, (l, i) => (r(), f("div", v({
-                  id: `${w}-option-${i}`,
+                (r(!0), v(ke, null, _e(g.value, (l, t) => (r(), v("div", f({
+                  id: `${C}-option-${t}`,
                   key: l.value,
                   role: "option",
                   class: ["combobox-list__option", {
-                    "combobox-list__option--active": n.value === i,
+                    "combobox-list__option--active": c.value === t,
                     "combobox-list__option--disabled": l.disabled
                   }],
-                  "aria-selected": M(l.value),
+                  "aria-selected": B(l.value),
                   "aria-disabled": l.disabled || void 0
-                }, { ref_for: !0 }, s(b)("option", l.value), {
-                  onClick: (m) => ce(l),
-                  onMouseenter: (m) => Be(i, l.disabled)
+                }, { ref_for: !0 }, s(d)("option", l.value), {
+                  onClick: (h) => me(l),
+                  onMouseenter: (h) => Oe(t, l.disabled)
                 }), [
-                  t.multiple ? (r(), J(je, {
+                  i.multiple ? (r(), ee(ta, {
                     key: 0,
-                    checked: M(l.value),
+                    checked: B(l.value),
                     disabled: l.disabled,
-                    state: n.value === i ? "hover" : "default"
-                  }, null, 8, ["checked", "disabled", "state"])) : (r(), J(s(Ke), {
+                    state: c.value === t ? "hover" : "default"
+                  }, null, 8, ["checked", "disabled", "state"])) : (r(), ee(s(la), {
                     key: 1,
-                    checked: M(l.value),
+                    checked: B(l.value),
                     disabled: l.disabled,
-                    state: n.value === i ? "hover" : "default"
+                    state: c.value === t ? "hover" : "default"
                   }, null, 8, ["checked", "disabled", "state"])),
-                  L(e.$slots, "option", {
+                  G(e.$slots, "option", {
                     option: l,
-                    selected: M(l.value),
-                    active: n.value === i,
-                    index: i
+                    selected: B(l.value),
+                    active: c.value === t,
+                    index: t
                   }, () => [
-                    h("span", na, _(l.label), 1)
+                    y("span", xa, w(l.label), 1)
                   ], !0)
-                ], 16, sa))), 128)),
-                !t.loading && !p.value.length ? (r(), f("p", v({
+                ], 16, pa))), 128)),
+                !i.loading && !g.value.length ? (r(), v("p", f({
                   key: 1,
                   class: "combobox-list__status"
-                }, s(b)("empty")), [
-                  L(e.$slots, "empty", {
-                    notFound: !!t.options.length
+                }, s(d)("empty")), [
+                  G(e.$slots, "empty", {
+                    notFound: !!i.options.length
                   }, () => [
-                    he(_(t.options.length ? t.notFoundText : t.emptyText), 1)
+                    Y(w(i.options.length ? i.notFoundText : i.emptyText), 1)
                   ], !0)
                 ], 16)) : x("", !0)
-              ], 8, ia)
+              ], 8, ha)
             ], 544)
           ])
         ]),
         _: 3
       }, 8, ["open", "width", "side", "side-offset", "align", "align-offset", "breakpoint-mobile", "test-id"]),
-      U.value ? (r(), f("p", v({
+      j.value ? (r(), v("p", f({
         key: 1,
-        id: ee,
+        id: oe,
         class: "combobox__message"
-      }, s(b)("message")), _(U.value), 17)) : x("", !0)
+      }, s(d)("message")), w(j.value), 17)) : x("", !0)
     ], 16));
   }
 });
 export {
-  pa as default
+  Sa as default
 };