@itguy614/clean-ui 1.2.2 → 1.3.0

package/dist/components/CuiTagInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTagInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTagInput.vue"],"names":[],"mappings":"AA8ZA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMrI,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACtG,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAoOD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;AAiOD,QAAA,IAAI,QAAQ;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgDnD,QAAA,MAAM,eAAe;;;;;;;;;WAzgBX,OAAO;YAQN,OAAO;;;aAEN,UAAU;;iBAdN,MAAM;gBAdP,MAAM,EAAE;cAQV,MAAM;cAEN,MAAM;iBARH,SAAS,EAAE;iBAIX,OAAO;aAMX,MAAM;uBAUI,MAAM;gBAEb,MAAM;6EA4gBnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTagInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTagInput.vue"],"names":[],"mappings":"AAihBA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAOzJ,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA2PD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;AAkOD,QAAA,IAAI,QAAQ;;CAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAmDnD,QAAA,MAAM,eAAe;;;;;;;;;WApiBX,OAAO;YAQN,OAAO;;;aAEN,UAAU;;iBAdN,MAAM;gBAdP,MAAM,EAAE;cAQV,MAAM;cAEN,MAAM;iBARH,SAAS,EAAE;iBAIX,OAAO;aAMX,MAAM;uBAUI,MAAM;gBAEb,MAAM;6EAuiBnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTagInput.vue.js

@@ -1,296 +1,7 @@
-import { defineComponent as le, ref as v, computed as h, onMounted as ne, onUnmounted as re, watch as oe, nextTick as L, withDirectives as ue, openBlock as s, createElementBlock as d, toDisplayString as x, createCommentVNode as w, createElementVNode as $, normalizeStyle as k, Fragment as q, renderList as F, createBlock as O, withCtx as ie, createTextVNode as se, Teleport as ce, createVNode as P, withModifiers as U, renderSlot as de, vShow as ve } from "vue";
-import { clampSize as fe } from "../utils/sizing.js";
-import me from "./CuiIcon.vue.js";
-import ge from "./CuiBadge.vue.js";
-import pe from "./CuiSpinner.vue.js";
-/* empty css                */
-const ye = {
-  key: 0,
-  style: { display: "block", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
-}, be = ["value", "placeholder", "disabled"], he = {
-  key: 1,
-  style: { fontSize: "0.75rem", color: "var(--cui-error)", marginTop: "calc(0.25rem * var(--cui-density-scale, 1))" }
-}, xe = {
-  key: 0,
-  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center" }
-}, we = ["data-index", "onClick", "onMouseenter"], Me = /* @__PURE__ */ le({
-  __name: "CuiTagInput",
-  props: {
-    modelValue: { default: () => [] },
-    suggestions: { default: () => [] },
-    fetchSuggestions: {},
-    allowCreate: { type: Boolean, default: !0 },
-    debounce: { default: 300 },
-    minChars: { default: 0 },
-    maxTags: { default: 0 },
-    placeholder: { default: "Add tag..." },
-    label: {},
-    error: { type: Boolean, default: !1 },
-    errorMessage: {},
-    noSuggestionsText: { default: "No suggestions" },
-    createText: { default: "Create" },
-    hidden: { type: Boolean, default: !1 },
-    rounded: { default: "md" },
-    color: { default: "primary" },
-    size: { default: "md" },
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["update:modelValue"],
-  setup(r, { expose: K, emit: Y }) {
-    const l = r, Z = {
-      none: "0",
-      sm: "0.25rem",
-      md: "var(--cui-button-radius, 0.375rem)",
-      lg: "0.5rem",
-      full: "9999px"
-    }, B = Y, o = v(""), c = v(!1), u = v(-1), V = v(!1), m = v([]), f = v(null), E = v(null), g = v(null), I = v({});
-    let S = null;
-    const z = h(() => new Set(l.modelValue)), C = h(() => l.maxTags > 0 && l.modelValue.length >= l.maxTags);
-    function j(e) {
-      const a = [...l.suggestions, ...m.value].find((t) => t.value === e);
-      return (a == null ? void 0 : a.label) ?? e;
-    }
-    function G(e) {
-      const a = [...l.suggestions, ...m.value].find((t) => t.value === e);
-      return (a == null ? void 0 : a.color) ?? l.color;
-    }
-    const i = h(() => {
-      const a = (l.fetchSuggestions ? m.value : l.suggestions).filter((n) => !z.value.has(n.value));
-      if (!o.value || l.fetchSuggestions) return a;
-      const t = o.value.toLowerCase();
-      return a.filter(
-        (n) => n.value.toLowerCase().includes(t) || n.label && n.label.toLowerCase().includes(t)
-      );
-    }), p = h(() => {
-      if (!l.allowCreate || !o.value.trim() || C.value) return !1;
-      const e = o.value.trim().toLowerCase();
-      return z.value.has(e) || z.value.has(o.value.trim()) ? !1 : ![...l.suggestions, ...m.value].map((t) => t.value.toLowerCase()).includes(e);
-    }), D = h(() => V.value), J = ["sm", "md", "lg"], Q = {
-      sm: { fontSize: "0.8125rem", padding: "calc(0.25rem * var(--cui-density-scale, 1)) calc(0.5rem * var(--cui-density-scale, 1))", tagSize: "sm", inputHeight: "2rem" },
-      md: { fontSize: "0.875rem", padding: "calc(0.3125rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))", tagSize: "sm", inputHeight: "2.375rem" },
-      lg: { fontSize: "0.9375rem", padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))", tagSize: "md", inputHeight: "2.75rem" }
-    }, y = h(() => Q[fe(l.size, J)]);
-    function b() {
-      if (!g.value) return;
-      const e = g.value.getBoundingClientRect(), a = window.innerHeight, t = a - e.bottom, n = t < 200 && e.top > t, M = Math.min(240, Math.max(t, e.top) - 16), R = {
-        position: "fixed",
-        zIndex: "9990",
-        left: `${e.left}px`,
-        width: `${e.width}px`,
-        maxHeight: `${M}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))"
-      };
-      n ? R.bottom = `${a - e.top + 4}px` : R.top = `${e.bottom + 4}px`, I.value = R;
-    }
-    function X(e) {
-      if (o.value = e.target.value, u.value = -1, c.value || (c.value = !0, b()), l.fetchSuggestions) {
-        if (o.value.length < l.minChars) {
-          m.value = [];
-          return;
-        }
-        S && clearTimeout(S), S = setTimeout(async () => {
-          V.value = !0;
-          try {
-            m.value = await l.fetchSuggestions(o.value);
-          } finally {
-            V.value = !1;
-          }
-        }, l.debounce);
-      }
-    }
-    function H(e) {
-      if (l.disabled || C.value) return;
-      const a = e.trim();
-      !a || z.value.has(a) || (B("update:modelValue", [...l.modelValue, a]), o.value = "", u.value = -1, L(() => {
-        var t;
-        return (t = f.value) == null ? void 0 : t.focus();
-      }));
-    }
-    function A(e) {
-      H(e.value);
-    }
-    function T() {
-      p.value && H(o.value.trim());
-    }
-    function N(e) {
-      l.disabled || (B("update:modelValue", l.modelValue.filter((a) => a !== e)), L(() => {
-        var a;
-        return (a = f.value) == null ? void 0 : a.focus();
-      }));
-    }
-    function _(e) {
-      const a = i.value.length + (p.value ? 1 : 0);
-      if (e.key === "ArrowDown") {
-        if (e.preventDefault(), !c.value) {
-          c.value = !0, b();
-          return;
-        }
-        u.value = Math.min(u.value + 1, a - 1);
-      } else e.key === "ArrowUp" ? (e.preventDefault(), u.value = Math.max(u.value - 1, 0)) : e.key === "Enter" ? (e.preventDefault(), u.value >= 0 && u.value < i.value.length ? A(i.value[u.value]) : (p.value && (u.value === i.value.length || u.value === -1) || p.value && o.value.trim()) && T()) : e.key === "," || e.key === "Tab" ? o.value.trim() && l.allowCreate && (e.preventDefault(), T()) : e.key === "Escape" ? c.value = !1 : e.key === "Backspace" && !o.value && l.modelValue.length > 0 && N(l.modelValue[l.modelValue.length - 1]);
-    }
-    function W(e) {
-      var t, n;
-      const a = e.target;
-      (t = g.value) != null && t.contains(a) || (n = E.value) != null && n.contains(a) || (c.value = !1);
-    }
-    function ee() {
-      !l.disabled && !C.value && (c.value = !0, b());
-    }
-    ne(() => {
-      document.addEventListener("mousedown", W), window.addEventListener("scroll", () => {
-        c.value && b();
-      }, !0), window.addEventListener("resize", () => {
-        c.value && b();
-      });
-    }), re(() => {
-      document.removeEventListener("mousedown", W), S && clearTimeout(S);
-    }), oe(c, (e) => {
-      e || (o.value = ""), e && L(b);
-    });
-    function ae(e) {
-      var a;
-      f.value ? f.value.focus(e) : (a = g.value) == null || a.focus(e);
-    }
-    function te() {
-      var e;
-      (e = f.value) == null || e.blur();
-    }
-    return K({ el: g, focus: ae, blur: te }), (e, a) => ue((s(), d("div", {
-      ref_key: "wrapperRef",
-      ref: g,
-      style: { position: "relative" }
-    }, [
-      r.label ? (s(), d("label", ye, x(r.label), 1)) : w("", !0),
-      $("div", {
-        style: k({
-          display: "flex",
-          flexWrap: "wrap",
-          alignItems: "center",
-          gap: "calc(0.25rem * var(--cui-density-scale, 1))",
-          padding: y.value.padding,
-          border: `1px solid ${r.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"}`,
-          borderRadius: Z[r.rounded],
-          background: "var(--cui-surface-base, white)",
-          cursor: r.disabled ? "default" : "text",
-          opacity: r.disabled ? "0.5" : "1",
-          minHeight: y.value.inputHeight
-        }),
-        onClick: a[0] || (a[0] = (t) => {
-          var n;
-          return (n = f.value) == null ? void 0 : n.focus();
-        })
-      }, [
-        (s(!0), d(q, null, F(r.modelValue, (t) => (s(), O(ge, {
-          key: t,
-          color: G(t),
-          size: y.value.tagSize,
-          removable: "",
-          onRemove: (n) => N(t)
-        }, {
-          default: ie(() => [
-            se(x(j(t)), 1)
-          ]),
-          _: 2
-        }, 1032, ["color", "size", "onRemove"]))), 128)),
-        C.value ? w("", !0) : (s(), d("input", {
-          key: 0,
-          ref_key: "inputRef",
-          ref: f,
-          value: o.value,
-          placeholder: r.modelValue.length > 0 ? "" : r.placeholder,
-          disabled: r.disabled,
-          style: k({
-            flex: "1",
-            minWidth: "4rem",
-            border: "none",
-            outline: "none",
-            background: "transparent",
-            fontSize: y.value.fontSize,
-            color: "var(--cui-text-body)",
-            padding: "calc(0.125rem * var(--cui-density-scale, 1)) 0",
-            fontFamily: "inherit"
-          }),
-          onInput: X,
-          onFocus: ee,
-          onKeydown: _
-        }, null, 44, be))
-      ], 4),
-      r.error && r.errorMessage ? (s(), d("div", he, x(r.errorMessage), 1)) : w("", !0),
-      (s(), O(ce, { to: "body" }, [
-        c.value && (i.value.length > 0 || p.value || D.value) ? (s(), d("div", {
-          key: 0,
-          ref_key: "dropdownRef",
-          ref: E,
-          style: k(I.value)
-        }, [
-          D.value && i.value.length === 0 ? (s(), d("div", xe, [
-            P(pe, {
-              size: "xs",
-              "show-label": "",
-              label: "Searching..."
-            })
-          ])) : w("", !0),
-          (s(!0), d(q, null, F(i.value, (t, n) => (s(), d("div", {
-            key: t.value,
-            "data-index": n,
-            style: k({
-              display: "flex",
-              alignItems: "center",
-              gap: "calc(0.5rem * var(--cui-density-scale, 1))",
-              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
-              cursor: "pointer",
-              fontSize: y.value.fontSize,
-              borderRadius: "0.25rem",
-              background: u.value === n ? "var(--cui-primary-bg)" : "transparent",
-              color: "var(--cui-text-body)",
-              transition: "background 0.1s ease"
-            }),
-            onClick: U((M) => A(t), ["stop"]),
-            onMouseenter: (M) => u.value = n
-          }, [
-            de(e.$slots, "suggestion", { suggestion: t }, () => [
-              $("span", null, x(t.label || t.value), 1)
-            ])
-          ], 44, we))), 128)),
-          p.value ? (s(), d("div", {
-            key: 1,
-            style: k({
-              display: "flex",
-              alignItems: "center",
-              gap: "calc(0.375rem * var(--cui-density-scale, 1))",
-              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
-              cursor: "pointer",
-              fontSize: y.value.fontSize,
-              borderRadius: "0.25rem",
-              background: u.value === i.value.length ? "var(--cui-primary-bg)" : "transparent",
-              color: "var(--cui-primary)",
-              fontWeight: "500",
-              transition: "background 0.1s ease",
-              borderTop: i.value.length > 0 ? "1px solid color-mix(in srgb, var(--cui-border) 50%, transparent)" : "none",
-              marginTop: i.value.length > 0 ? "calc(0.125rem * var(--cui-density-scale, 1))" : "0",
-              paddingTop: i.value.length > 0 ? "calc(0.5rem * var(--cui-density-scale, 1))" : void 0
-            }),
-            onClick: U(T, ["stop"]),
-            onMouseenter: a[1] || (a[1] = (t) => u.value = i.value.length)
-          }, [
-            P(me, {
-              name: "plus",
-              size: "0.75rem"
-            }),
-            $("span", null, x(r.createText) + " “" + x(o.value.trim()) + "”", 1)
-          ], 36)) : w("", !0)
-        ], 4)) : w("", !0)
-      ]))
-    ], 512)), [
-      [ve, !r.hidden]
-    ]);
-  }
-});
+import o from "./CuiTagInput.vue2.js";
+/* empty css                 */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ca6016d3"]]);
 export {
-  Me as default
+  m as default
 };

package/dist/components/CuiTagInput.vue2.js

@@ -1,4 +1,279 @@
-import f from "./CuiTagInput.vue.js";
+import { defineComponent as se, ref as c, computed as b, onMounted as de, onUnmounted as ce, watch as ve, nextTick as B, withDirectives as fe, openBlock as r, createElementBlock as v, normalizeStyle as M, toDisplayString as h, createCommentVNode as y, createElementVNode as R, normalizeClass as $, Fragment as O, renderList as U, createBlock as K, withCtx as me, createTextVNode as ge, unref as W, Teleport as pe, createVNode as Y, withModifiers as Z, renderSlot as be, vShow as he } from "vue";
+import { INPUT_SIZE_SCALE as ye, nestedSize as we, scaleDensity as xe } from "../utils/sizing.js";
+import { useFieldDescribedBy as ke } from "../composables/useFieldDescribedBy.js";
+import Ce from "./CuiIcon.vue.js";
+import Se from "./CuiBadge.vue.js";
+import Te from "./CuiSpinner.vue.js";
+/* empty css                */
+const Ve = {
+  key: 0,
+  class: "cui-tag-input__label"
+}, ze = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder", "disabled"], Le = ["id"], Be = {
+  key: 0,
+  style: { padding: "calc(0.75rem * var(--cui-density-scale, 1))", textAlign: "center" }
+}, Me = ["data-index", "onClick", "onMouseenter"], Ae = /* @__PURE__ */ se({
+  __name: "CuiTagInput",
+  props: {
+    modelValue: { default: () => [] },
+    suggestions: { default: () => [] },
+    fetchSuggestions: {},
+    allowCreate: { type: Boolean, default: !0 },
+    debounce: { default: 300 },
+    minChars: { default: 0 },
+    maxTags: { default: 0 },
+    placeholder: { default: "Add tag..." },
+    label: {},
+    error: { type: Boolean, default: !1 },
+    errorMessage: {},
+    noSuggestionsText: { default: "No suggestions" },
+    createText: { default: "Create" },
+    hidden: { type: Boolean, default: !1 },
+    rounded: { default: "md" },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
+    color: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(u, { expose: j, emit: G }) {
+    const l = u, { errorId: J, describedBy: Q } = ke(l), X = {
+      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"
+    }, D = G, o = c(""), s = c(!1), i = c(-1), V = c(!1), m = c([]), f = c(null), _ = c(null), w = c(null), E = c(null), I = c({});
+    let x = null;
+    const k = b(() => new Set(l.modelValue)), C = b(() => l.maxTags > 0 && l.modelValue.length >= l.maxTags);
+    function ee(e) {
+      const t = [...l.suggestions, ...m.value].find((a) => a.value === e);
+      return (t == null ? void 0 : t.label) ?? e;
+    }
+    function te(e) {
+      const t = [...l.suggestions, ...m.value].find((a) => a.value === e);
+      return (t == null ? void 0 : t.color) ?? l.color;
+    }
+    const d = b(() => {
+      const t = (l.fetchSuggestions ? m.value : l.suggestions).filter((n) => !k.value.has(n.value));
+      if (!o.value || l.fetchSuggestions) return t;
+      const a = o.value.toLowerCase();
+      return t.filter(
+        (n) => n.value.toLowerCase().includes(a) || n.label && n.label.toLowerCase().includes(a)
+      );
+    }), g = b(() => {
+      if (!l.allowCreate || !o.value.trim() || C.value) return !1;
+      const e = o.value.trim().toLowerCase();
+      return k.value.has(e) || k.value.has(o.value.trim()) ? !1 : ![...l.suggestions, ...m.value].map((a) => a.value.toLowerCase()).includes(e);
+    }), q = b(() => V.value), ae = xe("0.25rem"), z = b(() => {
+      const e = ye[l.size];
+      return {
+        tagSize: we(l.size),
+        style: {
+          "--_tag-input-font-size": e.fontSize,
+          "--_tag-input-padding": `${ae} ${e.px}`,
+          "--_tag-input-min-height": e.height
+        }
+      };
+    });
+    function p() {
+      const e = E.value ?? w.value;
+      if (!e) return;
+      const t = e.getBoundingClientRect(), a = window.innerHeight, n = a - t.bottom, T = t.top, F = n < 200 && T > n, re = Math.max(0, Math.min(240, (F ? T : n) - 16)), L = {
+        // The panel is teleported to <body>, so it inherits nothing from the component — it
+        // has to carry the size-derived properties itself (#123).
+        ...z.value.style,
+        position: "fixed",
+        zIndex: "9990",
+        left: `${t.left}px`,
+        width: `${t.width}px`,
+        maxHeight: `${re}px`
+        // Only the geometry the positioner computes stays inline; the panel's paint lives in
+        // the stylesheet so it can be themed (#123).
+      };
+      F ? L.bottom = `${a - t.top + 4}px` : L.top = `${t.bottom + 4}px`, I.value = L;
+    }
+    function le(e) {
+      if (o.value = e.target.value, i.value = -1, s.value || (s.value = !0, p()), l.fetchSuggestions) {
+        if (o.value.length < l.minChars) {
+          m.value = [];
+          return;
+        }
+        x && clearTimeout(x), x = setTimeout(async () => {
+          V.value = !0;
+          try {
+            m.value = await l.fetchSuggestions(o.value);
+          } finally {
+            V.value = !1;
+          }
+        }, l.debounce);
+      }
+    }
+    function A(e) {
+      if (l.disabled || C.value) return;
+      const t = e.trim();
+      !t || k.value.has(t) || (D("update:modelValue", [...l.modelValue, t]), o.value = "", i.value = -1, B(() => {
+        var a;
+        return (a = f.value) == null ? void 0 : a.focus();
+      }));
+    }
+    function N(e) {
+      A(e.value);
+    }
+    function S() {
+      g.value && A(o.value.trim());
+    }
+    function H(e) {
+      l.disabled || (D("update:modelValue", l.modelValue.filter((t) => t !== e)), B(() => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.focus();
+      }));
+    }
+    function ue(e) {
+      const t = d.value.length + (g.value ? 1 : 0);
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !s.value) {
+          s.value = !0, p();
+          return;
+        }
+        i.value = Math.min(i.value + 1, t - 1);
+      } else e.key === "ArrowUp" ? (e.preventDefault(), i.value = Math.max(i.value - 1, 0)) : e.key === "Enter" ? (e.preventDefault(), i.value >= 0 && i.value < d.value.length ? N(d.value[i.value]) : (g.value && (i.value === d.value.length || i.value === -1) || g.value && o.value.trim()) && S()) : e.key === "," || e.key === "Tab" ? o.value.trim() && l.allowCreate && (e.preventDefault(), S()) : e.key === "Escape" ? s.value = !1 : e.key === "Backspace" && !o.value && l.modelValue.length > 0 && H(l.modelValue[l.modelValue.length - 1]);
+    }
+    function P(e) {
+      var a, n;
+      const t = e.target;
+      (a = w.value) != null && a.contains(t) || (n = _.value) != null && n.contains(t) || (s.value = !1);
+    }
+    function ne() {
+      !l.disabled && !C.value && (s.value = !0, p());
+    }
+    de(() => {
+      document.addEventListener("mousedown", P), window.addEventListener("scroll", () => {
+        s.value && p();
+      }, !0), window.addEventListener("resize", () => {
+        s.value && p();
+      });
+    }), ce(() => {
+      document.removeEventListener("mousedown", P), x && clearTimeout(x);
+    }), ve(s, (e) => {
+      e || (o.value = ""), e && B(p);
+    });
+    function oe(e) {
+      var t;
+      f.value ? f.value.focus(e) : (t = w.value) == null || t.focus(e);
+    }
+    function ie() {
+      var e;
+      (e = f.value) == null || e.blur();
+    }
+    return j({ el: w, focus: oe, blur: ie }), (e, t) => fe((r(), v("div", {
+      class: "cui-tag-input",
+      ref_key: "wrapperRef",
+      ref: w,
+      style: M(z.value.style)
+    }, [
+      u.label ? (r(), v("label", Ve, h(u.label), 1)) : y("", !0),
+      R("div", {
+        ref_key: "controlRef",
+        ref: E,
+        class: $(["cui-tag-input__control", { "cui-tag-input__control--disabled": u.disabled }]),
+        style: M({
+          "--_tag-input-radius": X[u.rounded],
+          "--_tag-input-border": u.error ? "var(--cui-error)" : "var(--cui-border-strong, var(--cui-border))"
+        }),
+        onClick: t[0] || (t[0] = (a) => {
+          var n;
+          return (n = f.value) == null ? void 0 : n.focus();
+        })
+      }, [
+        (r(!0), v(O, null, U(u.modelValue, (a) => (r(), K(Se, {
+          key: a,
+          color: te(a),
+          size: z.value.tagSize,
+          removable: "",
+          onRemove: (n) => H(a)
+        }, {
+          default: me(() => [
+            ge(h(ee(a)), 1)
+          ]),
+          _: 2
+        }, 1032, ["color", "size", "onRemove"]))), 128)),
+        C.value ? y("", !0) : (r(), v("input", {
+          key: 0,
+          id: u.id,
+          name: u.name,
+          autocomplete: u.autocomplete,
+          "aria-describedby": W(Q),
+          "aria-required": u.ariaRequired || void 0,
+          "aria-labelledby": u.ariaLabelledby,
+          ref_key: "inputRef",
+          ref: f,
+          value: o.value,
+          placeholder: u.modelValue.length > 0 ? "" : u.placeholder,
+          disabled: u.disabled,
+          class: "cui-tag-input__input",
+          onInput: le,
+          onFocus: ne,
+          onKeydown: ue
+        }, null, 40, ze))
+      ], 6),
+      u.error && u.errorMessage ? (r(), v("div", {
+        key: 1,
+        id: W(J),
+        class: "cui-tag-input__error"
+      }, h(u.errorMessage), 9, Le)) : y("", !0),
+      (r(), K(pe, { to: "body" }, [
+        s.value && (d.value.length > 0 || g.value || q.value) ? (r(), v("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: _,
+          class: "cui-tag-input__dropdown",
+          style: M(I.value)
+        }, [
+          q.value && d.value.length === 0 ? (r(), v("div", Be, [
+            Y(Te, {
+              size: "xs",
+              "show-label": "",
+              label: "Searching..."
+            })
+          ])) : y("", !0),
+          (r(!0), v(O, null, U(d.value, (a, n) => (r(), v("div", {
+            key: a.value,
+            "data-index": n,
+            class: $(["cui-tag-input__suggestion", { "cui-tag-input__suggestion--focused": i.value === n }]),
+            onClick: Z((T) => N(a), ["stop"]),
+            onMouseenter: (T) => i.value = n
+          }, [
+            be(e.$slots, "suggestion", { suggestion: a }, () => [
+              R("span", null, h(a.label || a.value), 1)
+            ], !0)
+          ], 42, Me))), 128)),
+          g.value ? (r(), v("div", {
+            key: 1,
+            class: $(["cui-tag-input__create", {
+              "cui-tag-input__suggestion--focused": i.value === d.value.length,
+              "cui-tag-input__create--divided": d.value.length > 0
+            }]),
+            onClick: Z(S, ["stop"]),
+            onMouseenter: t[1] || (t[1] = (a) => i.value = d.value.length)
+          }, [
+            Y(Ce, {
+              name: "plus",
+              size: "0.75rem"
+            }),
+            R("span", null, h(u.createText) + " “" + h(o.value.trim()) + "”", 1)
+          ], 34)) : y("", !0)
+        ], 4)) : y("", !0)
+      ]))
+    ], 4)), [
+      [he, !u.hidden]
+    ]);
+  }
+});
 export {
-  f as default
+  Ae as default
 };

package/dist/components/CuiTextarea.vue.d.ts

@@ -1,5 +1,5 @@
-import type { HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded } from "../types/common";
-export interface CuiTextareaProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
+import type { HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded, NativeControlProps } from "../types/common";
+export interface CuiTextareaProps extends NativeControlProps, HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** v-model binding */
     modelValue?: string;
     /** Placeholder text */

package/dist/components/CuiTextarea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTextarea.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTextarea.vue"],"names":[],"mappings":"AA+QA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAWlH,MAAM,WAAW,gBAAiB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACtG,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAoFD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;WAjGS,OAAO;cAIJ,OAAO;;;;aAER,UAAU;;UAdb,MAAM;gBAJA,MAAM;gBAMN,OAAO;;AA+OtB,wBASG"}
+{"version":3,"file":"CuiTextarea.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTextarea.vue"],"names":[],"mappings":"AA0RA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAYtI,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IAC1H,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAwFD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;WArGS,OAAO;cAIJ,OAAO;;;;aAER,UAAU;;UAdb,MAAM;gBAJA,MAAM;gBAMN,OAAO;;AA4PtB,wBASG"}

package/dist/components/CuiTextarea.vue.js

@@ -1,7 +1,7 @@
-import a from "./CuiTextarea.vue2.js";
+import o from "./CuiTextarea.vue2.js";
 /* empty css                 */
-import o from "../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ o(a, [["__scopeId", "data-v-fea4b0a7"]]);
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c82ce8bc"]]);
 export {
-  f as default
+  e as default
 };