@itguy614/clean-ui 1.2.2 → 1.3.1

package/dist/components/CuiTagInput.vue2.js

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

package/dist/components/CuiTextarea.vue2.js

@@ -1,15 +1,13 @@
-import { defineComponent as k, useTemplateRef as H, computed as m, onMounted as F, nextTick as f, watch as $, withDirectives as A, openBlock as l, createElementBlock as i, createElementVNode as w, normalizeStyle as I, normalizeClass as z, toDisplayString as h, createCommentVNode as B, vShow as D } from "vue";
-import { TEXTAREA_SIZE_SCALE as N } from "../utils/sizing.js";
-const W = { class: "cui-textarea-wrapper" }, O = ["value", "placeholder", "disabled", "readonly", "rows", "aria-invalid"], X = {
+import { defineComponent as q, useTemplateRef as D, computed as m, onMounted as I, nextTick as v, watch as $, withDirectives as A, openBlock as i, createElementBlock as l, createElementVNode as w, normalizeStyle as N, normalizeClass as B, unref as L, toDisplayString as f, createCommentVNode as R, vShow as W } from "vue";
+import { TEXTAREA_SIZE_SCALE as O } from "../utils/sizing.js";
+import { useFieldDescribedBy as X } from "../composables/useFieldDescribedBy.js";
+const Y = { class: "cui-textarea-wrapper" }, Z = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder", "disabled", "readonly", "rows", "aria-invalid"], j = {
   key: 0,
   class: "cui-textarea__footer"
-}, Y = {
-  key: 0,
-  class: "cui-textarea__error"
-}, Z = {
+}, G = ["id"], J = {
   key: 1,
   class: "cui-textarea__spacer"
-}, G = /* @__PURE__ */ k({
+}, U = /* @__PURE__ */ q({
   __name: "CuiTextarea",
   props: {
     modelValue: { default: "" },
@@ -22,69 +20,81 @@ const W = { class: "cui-textarea-wrapper" }, O = ["value", "placeholder", "disab
     errorMessage: {},
     readonly: { type: Boolean, default: !1 },
     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"],
-  setup(e, { expose: C, emit: L }) {
-    const R = {
+  setup(e, { expose: z, emit: C }) {
+    const S = {
       none: "0",
-      sm: "0.25rem",
-      md: "var(--cui-button-radius, 0.375rem)",
-      lg: "0.5rem",
+      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"
-    }, a = e, S = L, d = H("textareaEl"), v = m(() => a.modelValue.length), n = m(() => a.maxLength !== void 0 && v.value > a.maxLength);
-    function p(t) {
-      const o = t.target;
-      let r = o.value;
-      a.maxLength !== void 0 && r.length > a.maxLength && (r = r.slice(0, a.maxLength), o.value = r), S("update:modelValue", r), a.autoResize && f(u);
+    }, t = e, { errorId: T, describedBy: E } = X(t), M = C, d = D("textareaEl"), h = m(() => t.modelValue.length), u = m(() => t.maxLength !== void 0 && h.value > t.maxLength);
+    function V(a) {
+      const r = a.target;
+      let o = r.value;
+      t.maxLength !== void 0 && o.length > t.maxLength && (o = o.slice(0, t.maxLength), r.value = o), M("update:modelValue", o), t.autoResize && v(n);
     }
-    function u() {
-      const t = d.value;
-      if (!t) return;
-      t.style.height = "auto";
-      const o = parseFloat(getComputedStyle(t).lineHeight) || 20, r = parseFloat(getComputedStyle(t).paddingTop) || 0, g = parseFloat(getComputedStyle(t).paddingBottom) || 0, x = parseFloat(getComputedStyle(t).borderTopWidth) || 0, y = parseFloat(getComputedStyle(t).borderBottomWidth) || 0, M = o * a.rows + r + g + x + y;
-      let c = 1 / 0;
-      a.maxRows && (c = o * a.maxRows + r + g + x + y);
-      const b = t.scrollHeight, V = Math.min(Math.max(b, M), c);
-      t.style.height = `${V}px`, t.style.overflowY = b > c ? "auto" : "hidden";
+    function n() {
+      const a = d.value;
+      if (!a) return;
+      a.style.height = "auto";
+      const r = parseFloat(getComputedStyle(a).lineHeight) || 20, o = parseFloat(getComputedStyle(a).paddingTop) || 0, g = parseFloat(getComputedStyle(a).paddingBottom) || 0, y = parseFloat(getComputedStyle(a).borderTopWidth) || 0, x = parseFloat(getComputedStyle(a).borderBottomWidth) || 0, F = r * t.rows + o + g + y + x;
+      let s = 1 / 0;
+      t.maxRows && (s = r * t.maxRows + o + g + y + x);
+      const b = a.scrollHeight, p = Math.min(Math.max(b, F), s);
+      a.style.height = `${p}px`, a.style.overflowY = b > s ? "auto" : "hidden";
     }
-    F(() => {
-      a.autoResize && f(u);
-    }), $(() => a.modelValue, () => {
-      a.autoResize && f(u);
+    I(() => {
+      t.autoResize && v(n);
+    }), $(() => t.modelValue, () => {
+      t.autoResize && v(n);
     });
-    function T(t) {
-      var o;
-      (o = d.value) == null || o.focus(t);
+    function k(a) {
+      var r;
+      (r = d.value) == null || r.focus(a);
     }
-    function E() {
-      var t;
-      (t = d.value) == null || t.blur();
+    function H() {
+      var a;
+      (a = d.value) == null || a.blur();
     }
-    C({ el: d, focus: T, blur: E });
-    const s = m(() => N[a.size]);
-    return (t, o) => A((l(), i("div", W, [
+    z({ el: d, focus: k, blur: H });
+    const c = m(() => O[t.size]);
+    return (a, r) => A((i(), l("div", Y, [
       w("div", {
-        class: z(["cui-textarea", {
-          "cui-textarea--error": e.error || n.value,
+        class: B(["cui-textarea", {
+          "cui-textarea--error": e.error || u.value,
           "cui-textarea--disabled": e.disabled
         }]),
-        style: I({
-          borderRadius: R[e.rounded],
-          "--_ta-px": s.value.px,
-          "--_ta-py": s.value.py,
-          "--_ta-font-size": s.value.fontSize,
+        style: N({
+          borderRadius: S[e.rounded],
+          "--_ta-px": c.value.px,
+          "--_ta-py": c.value.py,
+          "--_ta-font-size": c.value.fontSize,
           "--_ta-color": `var(--cui-${e.color})`,
           "--_ta-focus-ring": `var(--cui-${e.color}-focus-ring)`,
-          "--_ta-border": e.error || n.value ? "var(--cui-error)" : "var(--cui-border-strong)",
-          "--_ta-focus-border": e.error || n.value ? "var(--cui-error)" : `var(--cui-${e.color})`
+          "--_ta-border": e.error || u.value ? "var(--cui-error)" : "var(--cui-border-strong)",
+          "--_ta-focus-border": e.error || u.value ? "var(--cui-error)" : `var(--cui-${e.color})`
         })
       }, [
         w("textarea", {
           ref: "textareaEl",
+          id: e.id,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          "aria-describedby": L(E),
+          "aria-required": e.ariaRequired || void 0,
+          "aria-labelledby": e.ariaLabelledby,
           value: e.modelValue,
           placeholder: e.placeholder,
           disabled: e.disabled,
@@ -92,21 +102,25 @@ const W = { class: "cui-textarea-wrapper" }, O = ["value", "placeholder", "disab
           rows: e.rows,
           "aria-invalid": e.error || void 0,
           class: "cui-textarea__native",
-          onInput: p
-        }, null, 40, O)
+          onInput: V
+        }, null, 40, Z)
       ], 6),
-      e.error && e.errorMessage || e.maxLength !== void 0 ? (l(), i("div", X, [
-        e.error && e.errorMessage ? (l(), i("div", Y, h(e.errorMessage), 1)) : (l(), i("div", Z)),
-        e.maxLength !== void 0 ? (l(), i("div", {
+      e.error && e.errorMessage || e.maxLength !== void 0 ? (i(), l("div", j, [
+        e.error && e.errorMessage ? (i(), l("div", {
+          key: 0,
+          id: L(T),
+          class: "cui-textarea__error"
+        }, f(e.errorMessage), 9, G)) : (i(), l("div", J)),
+        e.maxLength !== void 0 ? (i(), l("div", {
           key: 2,
-          class: z(["cui-textarea__counter", { "cui-textarea__counter--over": n.value }])
-        }, h(v.value) + "/" + h(e.maxLength), 3)) : B("", !0)
-      ])) : B("", !0)
+          class: B(["cui-textarea__counter", { "cui-textarea__counter--over": u.value }])
+        }, f(h.value) + "/" + f(e.maxLength), 3)) : R("", !0)
+      ])) : R("", !0)
     ], 512)), [
-      [D, !e.hidden]
+      [W, !e.hidden]
     ]);
   }
 });
 export {
-  G as default
+  U as default
 };

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

@@ -1,6 +1,6 @@
-import type { HideableProps, DisableableProps } from "../types/common";
+import type { HideableProps, DisableableProps, NativeControlProps } from "../types/common";
 export type TimePickerFormat = "12" | "24";
-export interface CuiTimePickerProps extends HideableProps, DisableableProps {
+export interface CuiTimePickerProps extends NativeControlProps, HideableProps, DisableableProps {
     /** Time value as "HH:mm" (24h) or "hh:mm AM/PM" (12h) */
     modelValue?: string;
     /** Clock format */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTimePicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimePicker.vue"],"names":[],"mappings":"AAyRA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,gBAAgB;IACzE,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8HD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAvIQ,IAAI,GAAG,IAAI,GAAG,IAAI;;gBAZZ,MAAM;YAEV,gBAAgB;gBAEZ,MAAM;;AAoarB,wBASG"}
+{"version":3,"file":"CuiTimePicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimePicker.vue"],"names":[],"mappings":"AAsaA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,gBAAgB;IAC7F,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuPD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAjQQ,IAAI,GAAG,IAAI,GAAG,IAAI;;gBAZZ,MAAM;YAEV,gBAAgB;gBAEZ,MAAM;;AAgkBrB,wBASG"}