@itguy614/clean-ui 1.2.2 → 1.3.1

package/dist/components/CuiCombobox.vue.js

@@ -1,332 +1,7 @@
-import { defineComponent as ue, ref as v, computed as w, watch as L, onMounted as se, onUnmounted as ce, nextTick as V, withDirectives as de, openBlock as n, createElementBlock as s, toDisplayString as p, createCommentVNode as m, createElementVNode as C, normalizeStyle as b, Fragment as j, renderList as K, createBlock as k, withCtx as ve, createTextVNode as me, Teleport as fe, createVNode as ge, unref as Y, withModifiers as ye, renderSlot as he, vShow as pe } from "vue";
-import { clampSize as be, scaleDensity as o } from "../utils/sizing.js";
-import A from "./CuiIcon.vue.js";
-import xe from "./CuiBadge.vue.js";
-import { useMessages as we } from "../composables/useMessages.js";
-import Z from "./CuiSpinner.vue.js";
-/* empty css                */
-const ke = {
-  key: 0,
-  style: { display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
-}, Se = ["src"], ze = ["value", "placeholder", "disabled"], $e = { style: { display: "flex", alignItems: "center", gap: "calc(0.25rem * var(--cui-density-scale, 1))", flexShrink: "0" } }, Ce = {
-  key: 1,
-  style: { fontSize: "0.75rem", color: "var(--cui-error)", marginTop: "calc(0.25rem * var(--cui-density-scale, 1))" }
-}, Re = {
-  key: 0,
-  style: { padding: "calc(1rem * var(--cui-density-scale, 1))", textAlign: "center" }
-}, Oe = {
-  key: 1,
-  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
-}, Te = {
-  key: 2,
-  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
-}, Ve = ["data-index", "onClick", "onMouseenter"], Be = ["src"], Me = { style: { flex: "1", minWidth: "0" } }, De = {
-  key: 0,
-  style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)", lineHeight: "1.3", marginTop: "calc(0.0625rem * var(--cui-density-scale, 1))" }
-}, Ne = /* @__PURE__ */ ue({
-  __name: "CuiCombobox",
-  props: {
-    modelValue: {},
-    options: { default: () => [] },
-    multiple: { type: Boolean, default: !1 },
-    placeholder: { default: "Search..." },
-    fetchOptions: {},
-    debounce: { default: 300 },
-    minChars: { default: 0 },
-    maxVisible: { default: 8 },
-    loading: { type: Boolean, default: !1 },
-    label: {},
-    error: { type: Boolean, default: !1 },
-    errorMessage: {},
-    noResultsText: { default: "No results found" },
-    rounded: { default: "md" },
-    hidden: { type: Boolean, default: !1 },
-    color: { default: "primary" },
-    size: { default: "md" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue", "search"],
-  setup(l, { expose: G, emit: J }) {
-    const r = l, Q = {
-      none: "0",
-      sm: "0.25rem",
-      md: "var(--cui-button-radius, 0.375rem)",
-      lg: "0.5rem",
-      full: "9999px"
-    }, R = J, u = v(""), c = v(!1), d = v(-1), B = v(!1), O = v([]), f = v(null), M = v(null), S = v(null), I = v({});
-    let z = null;
-    const g = w(() => r.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(r.modelValue) ? new Set(r.modelValue) : /* @__PURE__ */ new Set([r.modelValue])), $ = v([]);
-    L(() => r.options, (e) => {
-      for (const a of e)
-        $.value.find((t) => t.value === a.value) || $.value.push(a);
-    }, { immediate: !0 }), L(O, (e) => {
-      for (const a of e)
-        $.value.find((t) => t.value === a.value) || $.value.push(a);
-    });
-    const y = w(
-      () => [...g.value].map((e) => $.value.find((a) => a.value === e)).filter(Boolean)
-    ), h = w(() => {
-      const e = r.fetchOptions ? O.value : r.options;
-      if (!u.value || r.fetchOptions) return e;
-      const a = u.value.toLowerCase();
-      return e.filter(
-        (t) => t.label.toLowerCase().includes(a) || t.description && t.description.toLowerCase().includes(a)
-      );
-    }), P = w(() => r.loading || B.value), X = ["sm", "md", "lg"], _ = {
-      sm: { fontSize: "0.8125rem", padding: `${o("0.25rem")} ${o("0.5rem")}`, tagSize: "sm", itemPadding: `${o("0.375rem")} ${o("0.625rem")}`, inputHeight: o("2rem") },
-      md: { fontSize: "0.875rem", padding: `${o("0.3125rem")} ${o("0.625rem")}`, tagSize: "sm", itemPadding: `${o("0.5rem")} ${o("0.75rem")}`, inputHeight: o("2.375rem") },
-      lg: { fontSize: "0.9375rem", padding: `${o("0.4375rem")} ${o("0.75rem")}`, tagSize: "md", itemPadding: `${o("0.625rem")} ${o("0.875rem")}`, inputHeight: o("2.75rem") }
-    }, x = w(() => _[be(r.size, X)]);
-    function T() {
-      if (!S.value) return;
-      const e = S.value.getBoundingClientRect(), a = window.innerHeight, t = a - e.bottom, i = e.top, E = Math.min(320, Math.max(t, i) - 16), oe = t < 200 && i > t, H = {
-        position: "fixed",
-        zIndex: "9990",
-        left: `${e.left}px`,
-        width: `${e.width}px`,
-        maxHeight: `${E}px`,
-        overflowY: "auto",
-        background: "var(--cui-surface-base)",
-        border: "1px solid var(--cui-border)",
-        borderRadius: "0.5rem",
-        boxShadow: "0 8px 24px -4px rgba(0,0,0,0.12), 0 2px 8px -2px rgba(0,0,0,0.08)",
-        padding: "calc(0.25rem * var(--cui-density-scale, 1))"
-      };
-      oe ? H.bottom = `${a - e.top + 4}px` : H.top = `${e.bottom + 4}px`, I.value = H;
-    }
-    function ee(e) {
-      if (u.value = e.target.value, d.value = -1, c.value || D(), R("search", u.value), r.fetchOptions) {
-        if (u.value.length < r.minChars) {
-          O.value = [];
-          return;
-        }
-        z && clearTimeout(z), z = setTimeout(async () => {
-          B.value = !0;
-          try {
-            O.value = await r.fetchOptions(u.value);
-          } finally {
-            B.value = !1;
-          }
-        }, r.debounce);
-      }
-    }
-    function F(e) {
-      var a;
-      if (!e.disabled)
-        if (r.multiple) {
-          const t = new Set(g.value);
-          t.has(e.value) ? t.delete(e.value) : t.add(e.value), R("update:modelValue", [...t]), u.value = "", V(() => {
-            var i;
-            return (i = f.value) == null ? void 0 : i.focus();
-          });
-        } else
-          R("update:modelValue", e.value), u.value = "", c.value = !1, (a = f.value) == null || a.blur();
-    }
-    function N(e) {
-      if (r.disabled) return;
-      const a = [...g.value];
-      R("update:modelValue", a.filter((t) => t !== e)), V(() => {
-        var t;
-        return (t = f.value) == null ? void 0 : t.focus();
-      });
-    }
-    function te(e) {
-      if (e.key === "ArrowDown") {
-        if (e.preventDefault(), !c.value) {
-          D();
-          return;
-        }
-        d.value = Math.min(d.value + 1, h.value.length - 1), W();
-      } else e.key === "ArrowUp" ? (e.preventDefault(), d.value = Math.max(d.value - 1, 0), W()) : e.key === "Enter" ? (e.preventDefault(), d.value >= 0 && d.value < h.value.length && F(h.value[d.value])) : e.key === "Escape" ? c.value = !1 : e.key === "Backspace" && !u.value && r.multiple && y.value.length > 0 && N(y.value[y.value.length - 1].value);
-    }
-    function W() {
-      V(() => {
-        var e, a;
-        (a = (e = M.value) == null ? void 0 : e.querySelector(`[data-index="${d.value}"]`)) == null || a.scrollIntoView({ block: "nearest" });
-      });
-    }
-    function D() {
-      r.disabled || (c.value = !0, T());
-    }
-    function ae() {
-      D();
-    }
-    function q(e) {
-      var t, i;
-      const a = e.target;
-      (t = S.value) != null && t.contains(a) || (i = M.value) != null && i.contains(a) || (c.value = !1);
-    }
-    se(() => {
-      document.addEventListener("mousedown", q), window.addEventListener("scroll", () => {
-        c.value && T();
-      }, !0), window.addEventListener("resize", () => {
-        c.value && T();
-      });
-    }), ce(() => {
-      document.removeEventListener("mousedown", q), z && clearTimeout(z);
-    });
-    const le = w(() => r.multiple ? "" : y.value.length > 0 ? y.value[0].label : "");
-    L(c, (e) => {
-      e || (u.value = ""), e && V(T);
-    });
-    function re(e) {
-      var a;
-      (a = f.value) == null || a.focus(e);
-    }
-    function ne() {
-      var e;
-      (e = f.value) == null || e.blur();
-    }
-    G({ el: S, focus: re, blur: ne });
-    function ie(e, a) {
-      const t = g.value.has(a.value), i = d.value === e;
-      return {
-        display: "flex",
-        alignItems: "center",
-        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
-        padding: x.value.itemPadding,
-        cursor: a.disabled ? "default" : "pointer",
-        fontSize: x.value.fontSize,
-        color: a.disabled ? "var(--cui-text-tertiary)" : "var(--cui-text-body)",
-        opacity: a.disabled ? "0.5" : "1",
-        background: i ? "var(--cui-primary-bg)" : t ? "color-mix(in srgb, var(--cui-primary-bg) 50%, transparent)" : "transparent",
-        transition: "background 0.1s ease",
-        borderRadius: "0.25rem"
-      };
-    }
-    const U = we();
-    return (e, a) => de((n(), s("div", {
-      ref_key: "wrapperRef",
-      ref: S,
-      style: { position: "relative" }
-    }, [
-      l.label ? (n(), s("label", ke, p(l.label), 1)) : m("", !0),
-      C("div", {
-        style: b({
-          display: "flex",
-          flexWrap: "wrap",
-          alignItems: "center",
-          gap: "calc(0.25rem * var(--cui-density-scale, 1))",
-          padding: x.value.padding,
-          border: `1px solid ${l.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"}`,
-          borderRadius: Q[l.rounded],
-          background: "var(--cui-surface-base, white)",
-          cursor: l.disabled ? "default" : "text",
-          opacity: l.disabled ? "0.5" : "1",
-          minHeight: x.value.inputHeight
-        }),
-        onClick: a[0] || (a[0] = (t) => {
-          var i;
-          return (i = f.value) == null ? void 0 : i.focus();
-        })
-      }, [
-        (n(!0), s(j, null, K(l.multiple ? y.value : [], (t) => (n(), k(xe, {
-          key: String(t.value),
-          color: l.color,
-          size: x.value.tagSize,
-          removable: "",
-          onRemove: (i) => N(t.value)
-        }, {
-          default: ve(() => [
-            t.image ? (n(), s("img", {
-              key: 0,
-              src: t.image,
-              style: { width: "1rem", height: "1rem", borderRadius: "50%", objectFit: "cover", marginRight: "calc(0.125rem * var(--cui-density-scale, 1))" }
-            }, null, 8, Se)) : m("", !0),
-            me(" " + p(t.label), 1)
-          ]),
-          _: 2
-        }, 1032, ["color", "size", "onRemove"]))), 128)),
-        C("input", {
-          ref_key: "inputRef",
-          ref: f,
-          value: c.value ? u.value : le.value,
-          placeholder: y.value.length > 0 ? "" : l.placeholder,
-          disabled: l.disabled,
-          style: b({
-            flex: "1",
-            minWidth: "4rem",
-            border: "none",
-            outline: "none",
-            background: "transparent",
-            fontSize: x.value.fontSize,
-            color: "var(--cui-text-body)",
-            padding: "calc(0.125rem * var(--cui-density-scale, 1)) 0",
-            fontFamily: "inherit"
-          }),
-          onInput: ee,
-          onFocus: ae,
-          onKeydown: te
-        }, null, 44, ze),
-        C("div", $e, [
-          P.value ? (n(), k(Z, {
-            key: 0,
-            size: "xs"
-          })) : (n(), k(A, {
-            key: 1,
-            name: "caret-down",
-            size: "0.875rem",
-            style: b({ color: "var(--cui-text-tertiary)", transform: c.value ? "rotate(180deg)" : "none", transition: "transform 0.15s ease" })
-          }, null, 8, ["style"]))
-        ])
-      ], 4),
-      l.error && l.errorMessage ? (n(), s("div", Ce, p(l.errorMessage), 1)) : m("", !0),
-      (n(), k(fe, { to: "body" }, [
-        c.value ? (n(), s("div", {
-          key: 0,
-          ref_key: "dropdownRef",
-          ref: M,
-          style: b(I.value)
-        }, [
-          P.value && h.value.length === 0 ? (n(), s("div", Re, [
-            ge(Z, {
-              size: "sm",
-              "show-label": "",
-              label: Y(U).combobox.searching
-            }, null, 8, ["label"])
-          ])) : h.value.length === 0 && (u.value.length >= l.minChars || !l.fetchOptions) ? (n(), s("div", Oe, p(l.noResultsText), 1)) : h.value.length === 0 && l.fetchOptions && u.value.length < l.minChars ? (n(), s("div", Te, p(Y(U).combobox.typeMore(l.minChars - u.value.length)), 1)) : m("", !0),
-          (n(!0), s(j, null, K(h.value, (t, i) => (n(), s("div", {
-            key: String(t.value),
-            "data-index": i,
-            style: b(ie(i, t)),
-            onClick: ye((E) => F(t), ["stop"]),
-            onMouseenter: (E) => d.value = i
-          }, [
-            he(e.$slots, "option", {
-              option: t,
-              selected: g.value.has(t.value)
-            }, () => [
-              t.image ? (n(), s("img", {
-                key: 0,
-                src: t.image,
-                style: { width: "1.75rem", height: "1.75rem", borderRadius: "50%", objectFit: "cover", flexShrink: "0" }
-              }, null, 8, Be)) : t.icon ? (n(), k(A, {
-                key: 1,
-                name: t.icon,
-                size: "1rem",
-                style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
-              }, null, 8, ["name"])) : m("", !0),
-              C("div", Me, [
-                C("div", {
-                  style: b({ lineHeight: "1.3", fontWeight: g.value.has(t.value) ? "600" : "400" })
-                }, p(t.label), 5),
-                t.description ? (n(), s("div", De, p(t.description), 1)) : m("", !0)
-              ]),
-              g.value.has(t.value) ? (n(), k(A, {
-                key: 2,
-                name: "check",
-                size: "0.875rem",
-                style: b({ color: `var(--cui-${l.color})`, flexShrink: "0" })
-              }, null, 8, ["style"])) : m("", !0)
-            ])
-          ], 44, Ve))), 128))
-        ], 4)) : m("", !0)
-      ]))
-    ], 512)), [
-      [pe, !l.hidden]
-    ]);
-  }
-});
+import o from "./CuiCombobox.vue2.js";
+/* empty css                 */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a05525e3"]]);
 export {
-  Ne as default
+  p as default
 };

package/dist/components/CuiCombobox.vue2.js

@@ -1,4 +1,332 @@
-import f from "./CuiCombobox.vue.js";
+import { defineComponent as me, ref as d, computed as g, watch as I, onMounted as fe, onUnmounted as be, nextTick as O, withDirectives as ye, openBlock as r, createElementBlock as u, normalizeStyle as x, toDisplayString as h, createCommentVNode as v, createElementVNode as S, normalizeClass as Y, Fragment as Z, renderList as G, createBlock as w, withCtx as he, createTextVNode as ge, unref as L, Teleport as xe, createVNode as we, withModifiers as pe, renderSlot as ke, vShow as Se } from "vue";
+import { INPUT_SIZE_SCALE as ze, scaleDensity as J, nestedSize as Ce } from "../utils/sizing.js";
+import { useFieldDescribedBy as Re } from "../composables/useFieldDescribedBy.js";
+import q from "./CuiIcon.vue.js";
+import $e from "./CuiBadge.vue.js";
+import { useMessages as Be } from "../composables/useMessages.js";
+import Q from "./CuiSpinner.vue.js";
+/* empty css                */
+const Oe = {
+  key: 0,
+  style: { display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
+}, Le = ["src"], Te = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder", "disabled"], Ve = { style: { display: "flex", alignItems: "center", gap: "calc(0.25rem * var(--cui-density-scale, 1))", flexShrink: "0" } }, Me = ["id"], Ee = {
+  key: 0,
+  style: { padding: "calc(1rem * var(--cui-density-scale, 1))", textAlign: "center" }
+}, De = {
+  key: 1,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
+}, Ae = {
+  key: 2,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
+}, Ie = ["data-index", "onClick", "onMouseenter"], qe = ["src"], Fe = { style: { flex: "1", minWidth: "0" } }, He = {
+  key: 0,
+  style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)", lineHeight: "1.3", marginTop: "calc(0.0625rem * var(--cui-density-scale, 1))" }
+}, Ze = /* @__PURE__ */ me({
+  __name: "CuiCombobox",
+  props: {
+    modelValue: {},
+    options: { default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    placeholder: { default: "Search..." },
+    fetchOptions: {},
+    debounce: { default: 300 },
+    minChars: { default: 0 },
+    maxVisible: { default: 8 },
+    loading: { type: Boolean, default: !1 },
+    label: {},
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    noResultsText: { default: "No results found" },
+    rounded: { default: "md" },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "search"],
+  setup(a, { expose: X, emit: ee }) {
+    const o = a, { errorId: te, describedBy: le } = Re(o), ae = {
+      none: "0",
+      sm: "var(--cui-radius-sm, 0.25rem)",
+      md: "var(--cui-button-radius, var(--cui-radius-md, 0.375rem))",
+      lg: "var(--cui-radius-lg, 0.5rem)",
+      full: "9999px"
+    }, z = ee, n = d(""), s = d(!1), c = d(-1), T = d(!1), C = d([]), m = d(null), V = d(null), R = d(null), F = d(null), H = d({});
+    let p = null;
+    const f = g(() => o.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(o.modelValue) ? new Set(o.modelValue) : /* @__PURE__ */ new Set([o.modelValue])), k = d([]);
+    I(() => o.options, (e) => {
+      for (const l of e)
+        k.value.find((t) => t.value === l.value) || k.value.push(l);
+    }, { immediate: !0 }), I(C, (e) => {
+      for (const l of e)
+        k.value.find((t) => t.value === l.value) || k.value.push(l);
+    });
+    const b = g(
+      () => [...f.value].map((e) => k.value.find((l) => l.value === e)).filter(Boolean)
+    ), y = g(() => {
+      const e = o.fetchOptions ? C.value : o.options;
+      if (!n.value || o.fetchOptions) return e;
+      const l = n.value.toLowerCase();
+      return e.filter(
+        (t) => t.label.toLowerCase().includes(l) || t.description && t.description.toLowerCase().includes(l)
+      );
+    }), N = g(() => o.loading || T.value), oe = J("0.25rem"), M = g(() => {
+      const e = ze[o.size];
+      return {
+        tagSize: Ce(o.size),
+        style: {
+          "--_combobox-font-size": e.fontSize,
+          "--_combobox-padding": `${oe} ${e.px}`,
+          "--_combobox-item-padding": `${J("0.5rem")} ${e.px}`,
+          "--_combobox-min-height": e.height
+        }
+      };
+    });
+    function E() {
+      const e = F.value ?? R.value;
+      if (!e) return;
+      const l = e.getBoundingClientRect(), t = window.innerHeight, i = t - l.bottom, B = l.top, K = i < 200 && B > i, ve = Math.max(0, Math.min(320, (K ? B : i) - 16)), A = {
+        // The panel is teleported to <body>, so it inherits nothing from the component — it
+        // has to carry the size-derived properties itself (#123).
+        ...M.value.style,
+        position: "fixed",
+        zIndex: "9990",
+        left: `${l.left}px`,
+        width: `${l.width}px`,
+        maxHeight: `${ve}px`
+        // Only the geometry the positioner computes stays inline; the panel's paint lives in
+        // the stylesheet so it can be themed (#123).
+      };
+      K ? A.bottom = `${t - l.top + 4}px` : A.top = `${l.bottom + 4}px`, H.value = A;
+    }
+    function re(e) {
+      if (n.value = e.target.value, c.value = -1, s.value || D(), z("search", n.value), o.fetchOptions) {
+        if (n.value.length < o.minChars) {
+          C.value = [];
+          return;
+        }
+        p && clearTimeout(p), p = setTimeout(async () => {
+          T.value = !0;
+          try {
+            C.value = await o.fetchOptions(n.value);
+          } finally {
+            T.value = !1;
+          }
+        }, o.debounce);
+      }
+    }
+    function P(e) {
+      var l;
+      if (!e.disabled)
+        if (o.multiple) {
+          const t = new Set(f.value);
+          t.has(e.value) ? t.delete(e.value) : t.add(e.value), z("update:modelValue", [...t]), n.value = "", O(() => {
+            var i;
+            return (i = m.value) == null ? void 0 : i.focus();
+          });
+        } else
+          z("update:modelValue", e.value), n.value = "", s.value = !1, (l = m.value) == null || l.blur();
+    }
+    function W(e) {
+      if (o.disabled) return;
+      const l = [...f.value];
+      z("update:modelValue", l.filter((t) => t !== e)), O(() => {
+        var t;
+        return (t = m.value) == null ? void 0 : t.focus();
+      });
+    }
+    function ie(e) {
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !s.value) {
+          D();
+          return;
+        }
+        c.value = Math.min(c.value + 1, y.value.length - 1), _();
+      } else e.key === "ArrowUp" ? (e.preventDefault(), c.value = Math.max(c.value - 1, 0), _()) : e.key === "Enter" ? (e.preventDefault(), c.value >= 0 && c.value < y.value.length && P(y.value[c.value])) : e.key === "Escape" ? s.value = !1 : e.key === "Backspace" && !n.value && o.multiple && b.value.length > 0 && W(b.value[b.value.length - 1].value);
+    }
+    function _() {
+      O(() => {
+        var e, l;
+        (l = (e = V.value) == null ? void 0 : e.querySelector(`[data-index="${c.value}"]`)) == null || l.scrollIntoView({ block: "nearest" });
+      });
+    }
+    function D() {
+      o.disabled || (s.value = !0, E());
+    }
+    function ne() {
+      D();
+    }
+    function U(e) {
+      var t, i;
+      const l = e.target;
+      (t = R.value) != null && t.contains(l) || (i = V.value) != null && i.contains(l) || (s.value = !1);
+    }
+    function $() {
+      s.value && E();
+    }
+    fe(() => {
+      document.addEventListener("mousedown", U), window.addEventListener("scroll", $, !0), window.addEventListener("resize", $);
+    }), be(() => {
+      document.removeEventListener("mousedown", U), window.removeEventListener("scroll", $, !0), window.removeEventListener("resize", $), p && clearTimeout(p);
+    });
+    const ue = g(() => o.multiple ? "" : b.value.length > 0 ? b.value[0].label : "");
+    I(s, (e) => {
+      e || (n.value = ""), e && O(E);
+    });
+    function se(e) {
+      var l;
+      (l = m.value) == null || l.focus(e);
+    }
+    function ce() {
+      var e;
+      (e = m.value) == null || e.blur();
+    }
+    X({ el: R, focus: se, blur: ce });
+    function de(e, l) {
+      return {
+        "cui-combobox__option": !0,
+        "cui-combobox__option--focused": c.value === e,
+        "cui-combobox__option--selected": f.value.has(l.value),
+        "cui-combobox__option--disabled": !!l.disabled
+      };
+    }
+    const j = Be();
+    return (e, l) => ye((r(), u("div", {
+      class: "cui-combobox",
+      ref_key: "wrapperRef",
+      ref: R,
+      style: x(M.value.style)
+    }, [
+      a.label ? (r(), u("label", Oe, h(a.label), 1)) : v("", !0),
+      S("div", {
+        ref_key: "controlRef",
+        ref: F,
+        class: Y(["cui-combobox__control", { "cui-combobox__control--disabled": a.disabled }]),
+        style: x({
+          "--_combobox-radius": ae[a.rounded],
+          "--_combobox-border": a.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))",
+          "--_combobox-focus-ring": a.error ? "var(--cui-error-focus-ring)" : `var(--cui-${a.color}-focus-ring)`,
+          "--_combobox-focus-border": a.error ? "var(--cui-error)" : `var(--cui-${a.color})`
+        }),
+        onClick: l[0] || (l[0] = (t) => {
+          var i;
+          return (i = m.value) == null ? void 0 : i.focus();
+        })
+      }, [
+        (r(!0), u(Z, null, G(a.multiple ? b.value : [], (t) => (r(), w($e, {
+          key: String(t.value),
+          color: a.color,
+          size: M.value.tagSize,
+          removable: "",
+          onRemove: (i) => W(t.value)
+        }, {
+          default: he(() => [
+            t.image ? (r(), u("img", {
+              key: 0,
+              src: t.image,
+              style: { width: "1rem", height: "1rem", borderRadius: "50%", objectFit: "cover", marginRight: "calc(0.125rem * var(--cui-density-scale, 1))" }
+            }, null, 8, Le)) : v("", !0),
+            ge(" " + h(t.label), 1)
+          ]),
+          _: 2
+        }, 1032, ["color", "size", "onRemove"]))), 128)),
+        S("input", {
+          ref_key: "inputRef",
+          ref: m,
+          id: a.id,
+          name: a.name,
+          autocomplete: a.autocomplete,
+          "aria-describedby": L(le),
+          "aria-required": a.ariaRequired || void 0,
+          "aria-labelledby": a.ariaLabelledby,
+          value: s.value ? n.value : ue.value,
+          placeholder: b.value.length > 0 ? "" : a.placeholder,
+          disabled: a.disabled,
+          class: "cui-combobox__input",
+          onInput: re,
+          onFocus: ne,
+          onKeydown: ie
+        }, null, 40, Te),
+        S("div", Ve, [
+          N.value ? (r(), w(Q, {
+            key: 0,
+            size: "xs"
+          })) : (r(), w(q, {
+            key: 1,
+            name: "caret-down",
+            size: "0.875rem",
+            style: x({ color: "var(--cui-text-tertiary)", transform: s.value ? "rotate(180deg)" : "none", transition: "transform 0.15s ease" })
+          }, null, 8, ["style"]))
+        ])
+      ], 6),
+      a.error && a.errorMessage ? (r(), u("div", {
+        key: 1,
+        id: L(te),
+        style: { fontSize: "0.75rem", color: "var(--cui-error)", marginTop: "calc(0.25rem * var(--cui-density-scale, 1))" }
+      }, h(a.errorMessage), 9, Me)) : v("", !0),
+      (r(), w(xe, { to: "body" }, [
+        s.value ? (r(), u("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: V,
+          class: "cui-combobox__dropdown",
+          style: x(H.value)
+        }, [
+          N.value && y.value.length === 0 ? (r(), u("div", Ee, [
+            we(Q, {
+              size: "sm",
+              "show-label": "",
+              label: L(j).combobox.searching
+            }, null, 8, ["label"])
+          ])) : y.value.length === 0 && (n.value.length >= a.minChars || !a.fetchOptions) ? (r(), u("div", De, h(a.noResultsText), 1)) : y.value.length === 0 && a.fetchOptions && n.value.length < a.minChars ? (r(), u("div", Ae, h(L(j).combobox.typeMore(a.minChars - n.value.length)), 1)) : v("", !0),
+          (r(!0), u(Z, null, G(y.value, (t, i) => (r(), u("div", {
+            key: String(t.value),
+            "data-index": i,
+            class: Y(de(i, t)),
+            onClick: pe((B) => P(t), ["stop"]),
+            onMouseenter: (B) => c.value = i
+          }, [
+            ke(e.$slots, "option", {
+              option: t,
+              selected: f.value.has(t.value)
+            }, () => [
+              t.image ? (r(), u("img", {
+                key: 0,
+                src: t.image,
+                style: { width: "1.75rem", height: "1.75rem", borderRadius: "50%", objectFit: "cover", flexShrink: "0" }
+              }, null, 8, qe)) : t.icon ? (r(), w(q, {
+                key: 1,
+                name: t.icon,
+                size: "1rem",
+                style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
+              }, null, 8, ["name"])) : v("", !0),
+              S("div", Fe, [
+                S("div", {
+                  style: x({ lineHeight: "1.3", fontWeight: f.value.has(t.value) ? "600" : "400" })
+                }, h(t.label), 5),
+                t.description ? (r(), u("div", He, h(t.description), 1)) : v("", !0)
+              ]),
+              f.value.has(t.value) ? (r(), w(q, {
+                key: 2,
+                name: "check",
+                size: "0.875rem",
+                style: x({ color: `var(--cui-${a.color})`, flexShrink: "0" })
+              }, null, 8, ["style"])) : v("", !0)
+            ], !0)
+          ], 42, Ie))), 128))
+        ], 4)) : v("", !0)
+      ]))
+    ], 4)), [
+      [Se, !a.hidden]
+    ]);
+  }
+});
 export {
-  f as default
+  Ze as default
 };