@profitliga/ui 2.0.0 → 2.0.2

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

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