@itguy614/clean-ui 1.2.2 → 1.3.0

package/dist/components/CuiFileUpload.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent as K, ref as y, computed as q, useTemplateRef as G, withDirectives as H, openBlock as c, createElementBlock as s, toDisplayString as l, createCommentVNode as f, createElementVNode as n, normalizeStyle as z, createVNode as h, createTextVNode as b, withModifiers as J, Fragment as P, renderList as Q, withCtx as k, unref as Z, createBlock as _, vShow as ee } from "vue";
+import { defineComponent as Y, ref as p, computed as K, useTemplateRef as G, withDirectives as H, openBlock as c, createElementBlock as u, toDisplayString as l, createCommentVNode as f, createElementVNode as n, normalizeStyle as b, createVNode as y, createTextVNode as z, withModifiers as J, Fragment as P, renderList as Q, withCtx as k, unref as Z, createBlock as _, vShow as ee } from "vue";
 import C from "./CuiButton.vue.js";
-import p from "./CuiIcon.vue.js";
+import g from "./CuiIcon.vue.js";
 import { useMessages as te } from "../composables/useMessages.js";
 const ie = {
   key: 0,
   style: { display: "block", marginBottom: "calc(0.375rem * var(--cui-density-scale, 1))", fontSize: "0.875rem", fontWeight: "500", color: "var(--cui-text-secondary)" }
-}, ae = ["accept", "multiple"], le = { style: { fontSize: "0.875rem", color: "var(--cui-text-secondary)" } }, re = {
+}, ae = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "accept", "multiple"], le = { style: { fontSize: "0.875rem", color: "var(--cui-text-secondary)" } }, re = {
   key: 0,
   style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)", marginTop: "calc(0.375rem * var(--cui-density-scale, 1))" }
-}, ne = { key: 0 }, oe = { key: 1 }, ce = { key: 2 }, se = {
+}, ne = { key: 0 }, oe = { key: 1 }, ce = { key: 2 }, ue = {
   key: 1,
   style: { marginTop: "calc(0.75rem * var(--cui-density-scale, 1))" }
-}, ue = { style: { flex: "1", minWidth: "0" } }, de = { style: { fontSize: "0.8125rem", fontWeight: "500", color: "var(--cui-text-body)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, fe = { style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)" } }, me = ["onClick"], ve = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "calc(0.5rem * var(--cui-density-scale, 1))" } }, he = { style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)" } }, xe = { style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))" } }, ke = /* @__PURE__ */ K({
+}, se = { style: { flex: "1", minWidth: "0" } }, de = { style: { fontSize: "0.8125rem", fontWeight: "500", color: "var(--cui-text-body)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, fe = { style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)" } }, me = ["onClick"], ve = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "calc(0.5rem * var(--cui-density-scale, 1))" } }, ye = { style: { fontSize: "0.75rem", color: "var(--cui-text-tertiary)" } }, he = { style: { display: "flex", gap: "calc(0.375rem * var(--cui-density-scale, 1))" } }, ke = /* @__PURE__ */ Y({
   __name: "CuiFileUpload",
   props: {
     accept: {},
@@ -23,27 +23,33 @@ const ie = {
     dragText: { default: "Drag and drop files here, or" },
     browseText: { default: "Browse" },
     uploadText: { default: "Upload" },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     color: { default: "primary" },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["upload", "reject", "change"],
   setup(i, { expose: B, emit: D }) {
-    const r = i, u = D, a = y([]), m = y(!1), S = y(null);
+    const r = i, s = D, a = p([]), m = p(!1), S = p(null);
     let T = 0;
     function $() {
       return `file-${++T}-${Date.now()}`;
     }
-    function x(e) {
+    function h(e) {
       return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
     }
     function W(e) {
       return e.startsWith("image/") ? "image" : e.startsWith("video/") ? "video-camera" : e.startsWith("audio/") ? "music-note" : e.includes("pdf") ? "file-pdf" : e.includes("zip") || e.includes("compressed") || e.includes("archive") ? "file-zip" : e.includes("spreadsheet") || e.includes("csv") || e.includes("excel") ? "file-xls" : e.includes("document") || e.includes("word") ? "file-doc" : e.includes("text") || e.includes("json") || e.includes("xml") ? "file-text" : "file";
     }
-    function M(e) {
+    function R(e) {
       var t;
       if (r.maxFileSize > 0 && e.size > r.maxFileSize)
-        return `File exceeds maximum size of ${x(r.maxFileSize)}`;
+        return `File exceeds maximum size of ${h(r.maxFileSize)}`;
       if (r.accept) {
         const o = r.accept.split(",").map((d) => d.trim().toLowerCase()), v = "." + ((t = e.name.split(".").pop()) == null ? void 0 : t.toLowerCase());
         if (!o.some((d) => d.startsWith(".") ? v === d : d.endsWith("/*") ? e.type.startsWith(d.replace("/*", "/")) : e.type === d)) return "File type not accepted";
@@ -54,12 +60,12 @@ const ie = {
       if (!r.disabled) {
         for (const t of Array.from(e)) {
           if (r.maxFiles > 0 && a.value.length >= r.maxFiles) {
-            u("reject", { file: t, reason: `Maximum ${r.maxFiles} files allowed` });
+            s("reject", { file: t, reason: `Maximum ${r.maxFiles} files allowed` });
             continue;
           }
-          const o = M(t);
+          const o = R(t);
           if (o) {
-            u("reject", { file: t, reason: o });
+            s("reject", { file: t, reason: o });
             continue;
           }
           a.value.some((v) => v.name === t.name && v.size === t.size) || a.value.push({
@@ -70,17 +76,17 @@ const ie = {
             type: t.type
           });
         }
-        u("change", [...a.value]), r.autoUpload && u("upload", a.value.map((t) => t.file));
+        s("change", [...a.value]), r.autoUpload && s("upload", a.value.map((t) => t.file));
       }
     }
-    function R(e) {
-      a.value = a.value.filter((t) => t.id !== e), u("change", [...a.value]);
+    function M(e) {
+      a.value = a.value.filter((t) => t.id !== e), s("change", [...a.value]);
     }
     function j() {
-      a.value = [], u("change", []);
+      a.value = [], s("change", []);
     }
     function E() {
-      a.value.length !== 0 && u("upload", a.value.map((e) => e.file));
+      a.value.length !== 0 && s("upload", a.value.map((e) => e.file));
     }
     function w() {
       var e;
@@ -90,39 +96,46 @@ const ie = {
       const t = e.target;
       t.files && F(t.files), t.value = "";
     }
-    function U(e) {
+    function L(e) {
       e.preventDefault(), r.disabled || (m.value = !0);
     }
-    function A(e) {
+    function U(e) {
       e.preventDefault();
     }
-    function L(e) {
+    function q(e) {
       const t = e.currentTarget.getBoundingClientRect();
       (e.clientX <= t.left || e.clientX >= t.right || e.clientY <= t.top || e.clientY >= t.bottom) && (m.value = !1);
     }
-    function N(e) {
+    function A(e) {
       var t;
       e.preventDefault(), m.value = !1, (t = e.dataTransfer) != null && t.files && F(e.dataTransfer.files);
     }
-    const V = q(() => x(a.value.reduce((e, t) => e + t.size, 0))), g = G("rootEl");
-    function O(e) {
+    const N = K(() => h(a.value.reduce((e, t) => e + t.size, 0))), x = G("rootEl");
+    function V(e) {
       var t;
-      (t = g.value) == null || t.focus(e);
+      (t = x.value) == null || t.focus(e);
     }
-    function X() {
+    function O() {
       var e;
-      (e = g.value) == null || e.blur();
+      (e = x.value) == null || e.blur();
     }
-    B({ el: g, focus: O, blur: X });
-    const Y = te();
-    return (e, t) => H((c(), s("div", {
+    B({ el: x, focus: V, blur: O });
+    const X = te();
+    return (e, t) => H((c(), u("div", {
+      class: "cui-file-upload",
       ref_key: "rootEl",
-      ref: g
+      ref: x
     }, [
-      i.label ? (c(), s("label", ie, l(i.label), 1)) : f("", !0),
+      i.label ? (c(), u("label", ie, l(i.label), 1)) : f("", !0),
       n("input", {
         ref_key: "inputRef",
         ref: S,
+        id: i.id,
+        name: i.name,
+        autocomplete: i.autocomplete,
+        "aria-describedby": i.ariaDescribedby,
+        "aria-required": i.ariaRequired || void 0,
+        "aria-labelledby": i.ariaLabelledby,
         type: "file",
         accept: i.accept,
         multiple: i.multiple,
@@ -130,7 +143,7 @@ const ie = {
         onChange: I
       }, null, 40, ae),
       n("div", {
-        style: z({
+        style: b({
           border: `2px dashed ${m.value ? `var(--cui-${i.color})` : "var(--cui-border)"}`,
           borderRadius: "0.625rem",
           padding: "calc(1.5rem * var(--cui-density-scale, 1))",
@@ -141,31 +154,31 @@ const ie = {
           transition: "border-color 0.15s ease, background 0.15s ease"
         }),
         onClick: w,
-        onDragenter: U,
-        onDragover: A,
-        onDragleave: L,
-        onDrop: N
+        onDragenter: L,
+        onDragover: U,
+        onDragleave: q,
+        onDrop: A
       }, [
-        h(p, {
+        y(g, {
           name: "cloud-arrow-up",
           size: "2rem",
-          style: z({ color: m.value ? `var(--cui-${i.color})` : "var(--cui-text-tertiary)", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" })
+          style: b({ color: m.value ? `var(--cui-${i.color})` : "var(--cui-text-tertiary)", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" })
         }, null, 8, ["style"]),
         n("div", le, [
-          b(l(i.dragText) + " ", 1),
+          z(l(i.dragText) + " ", 1),
           n("span", {
-            style: z({ color: `var(--cui-${i.color})`, fontWeight: "600", cursor: "pointer" }),
+            style: b({ color: `var(--cui-${i.color})`, fontWeight: "600", cursor: "pointer" }),
             onClick: J(w, ["stop"])
           }, l(i.browseText), 5)
         ]),
-        i.accept || i.maxFileSize > 0 ? (c(), s("div", re, [
-          i.accept ? (c(), s("span", ne, l(i.accept), 1)) : f("", !0),
-          i.accept && i.maxFileSize > 0 ? (c(), s("span", oe, " · ")) : f("", !0),
-          i.maxFileSize > 0 ? (c(), s("span", ce, "Max " + l(x(i.maxFileSize)), 1)) : f("", !0)
+        i.accept || i.maxFileSize > 0 ? (c(), u("div", re, [
+          i.accept ? (c(), u("span", ne, l(i.accept), 1)) : f("", !0),
+          i.accept && i.maxFileSize > 0 ? (c(), u("span", oe, " · ")) : f("", !0),
+          i.maxFileSize > 0 ? (c(), u("span", ce, "Max " + l(h(i.maxFileSize)), 1)) : f("", !0)
         ])) : f("", !0)
       ], 36),
-      a.value.length > 0 ? (c(), s("div", se, [
-        (c(!0), s(P, null, Q(a.value, (o) => (c(), s("div", {
+      a.value.length > 0 ? (c(), u("div", ue, [
+        (c(!0), u(P, null, Q(a.value, (o) => (c(), u("div", {
           key: o.id,
           style: {
             display: "flex",
@@ -178,14 +191,14 @@ const ie = {
             background: "var(--cui-surface-base, white)"
           }
         }, [
-          h(p, {
+          y(g, {
             name: W(o.type),
             size: "1.25rem",
             style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
           }, null, 8, ["name"]),
-          n("div", ue, [
+          n("div", se, [
             n("div", de, l(o.name), 1),
-            n("div", fe, l(x(o.size)), 1)
+            n("div", fe, l(h(o.size)), 1)
           ]),
           n("button", {
             type: "button",
@@ -202,24 +215,24 @@ const ie = {
               borderRadius: "0.25rem",
               flexShrink: "0"
             },
-            onClick: (v) => R(o.id)
+            onClick: (v) => M(o.id)
           }, [
-            h(p, {
+            y(g, {
               name: "x",
               size: "0.75rem"
             })
           ], 8, me)
         ]))), 128)),
         n("div", ve, [
-          n("span", he, l(a.value.length) + " file" + l(a.value.length === 1 ? "" : "s") + " · " + l(V.value), 1),
-          n("div", xe, [
-            h(C, {
+          n("span", ye, l(a.value.length) + " file" + l(a.value.length === 1 ? "" : "s") + " · " + l(N.value), 1),
+          n("div", he, [
+            y(C, {
               variant: "ghost",
               size: "xs",
               onClick: j
             }, {
               default: k(() => [
-                b(l(Z(Y).clearAll), 1)
+                z(l(Z(X).clearAll), 1)
               ]),
               _: 1
             }),
@@ -231,13 +244,13 @@ const ie = {
               onClick: E
             }, {
               prefix: k(() => [
-                h(p, {
+                y(g, {
                   name: "upload-simple",
                   size: "0.75rem"
                 })
               ]),
               default: k(() => [
-                b(" " + l(i.uploadText), 1)
+                z(" " + l(i.uploadText), 1)
               ]),
               _: 1
             }, 8, ["color"]))

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

@@ -1 +1 @@
-{"version":3,"file":"CuiFormField.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiFormField.vue"],"names":[],"mappings":"AAsMA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,gBAAgB;IACxE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA4ID,QAAA,IAAI,OAAO;;CAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAyB/C,QAAA,MAAM,eAAe;WA1KX,OAAO;cANJ,OAAO;;;mBAVF,aAAa;6EAiM7B,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":"CuiFormField.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiFormField.vue"],"names":[],"mappings":"AA4OA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,gBAAgB;IACxE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkKD,QAAA,IAAI,OAAO;;CAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA4B/C,QAAA,MAAM,eAAe;WAnMX,OAAO;cANJ,OAAO;;;mBAVF,aAAa;6EA0N7B,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/CuiFormField.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiFormField.vue2.js";
 /* empty css                  */
 import r from "../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7a8440be"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-402f1c2a"]]);
 export {
-  e as default
+  f as default
 };

package/dist/components/CuiFormField.vue2.js

@@ -1,19 +1,10 @@
-import { defineComponent as _, inject as x, computed as a, onBeforeUnmount as g, withDirectives as q, openBlock as t, createElementBlock as i, normalizeClass as B, unref as k, createElementVNode as u, toDisplayString as d, createCommentVNode as c, renderSlot as T, normalizeProps as V, guardReactiveProps as p, vShow as C } from "vue";
-import { FormContextKey as E } from "./form-context.js";
-const F = ["for"], M = {
-  key: 0,
-  class: "cui-form-field__required",
-  "aria-hidden": "true"
-}, P = {
+import { defineComponent as B, inject as k, computed as o, onBeforeUnmount as T, withDirectives as _, openBlock as i, createElementBlock as t, normalizeClass as F, unref as g, createElementVNode as s, toDisplayString as d, Fragment as V, createCommentVNode as v, renderSlot as C, normalizeProps as M, guardReactiveProps as $, vShow as D } from "vue";
+import { useMessages as E } from "../composables/useMessages.js";
+import { FormContextKey as P } from "./form-context.js";
+const S = ["for"], w = { class: "cui-sr-only" }, I = {
   key: 1,
   class: "cui-form-field__required-text"
-}, S = { class: "cui-form-field__body" }, w = { class: "cui-form-field__control" }, D = {
-  key: 0,
-  class: "cui-form-field__error"
-}, $ = {
-  key: 1,
-  class: "cui-form-field__help"
-}, U = /* @__PURE__ */ _({
+}, z = { class: "cui-form-field__body" }, N = { class: "cui-form-field__control" }, K = /* @__PURE__ */ B({
   __name: "CuiFormField",
   props: {
     label: {},
@@ -28,46 +19,61 @@ const F = ["for"], M = {
     hidden: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const l = e, o = x(E, null), s = a(() => !!l.name && !!o), n = a(
-      () => s.value ? !!o.errors.value[l.name] : !!l.error
-    ), f = a(
-      () => s.value ? o.errors.value[l.name] : l.errorMessage
-    ), h = a(() => n.value && f.value), b = a(() => l.disabled || ((o == null ? void 0 : o.disabled.value) ?? !1)), m = l.for ?? `cui-field-${Math.random().toString(36).slice(2, 8)}`, y = a(() => {
-      const r = {
-        id: m,
-        error: n.value,
-        disabled: b.value
+  setup(l) {
+    const e = l, r = k(P, null), c = o(() => !!e.name && !!r), f = o(
+      () => c.value ? !!r.errors.value[e.name] : !!e.error
+    ), b = o(
+      () => c.value ? r.errors.value[e.name] : e.errorMessage
+    ), y = o(() => f.value && b.value), p = o(() => e.disabled || ((r == null ? void 0 : r.disabled.value) ?? !1)), n = e.for ?? `cui-field-${Math.random().toString(36).slice(2, 8)}`, q = E(), h = `${n}-label`, m = `${n}-description`, x = o(() => {
+      const a = {
+        id: n,
+        error: f.value,
+        disabled: p.value
       };
-      return s.value && (r.modelValue = o.getValue(l.name), r["onUpdate:modelValue"] = (v) => o.setValue(l.name, v), r.readonly = o.readonly.value), r;
+      return e.label && (a.ariaLabelledby = h), e.required && (a.ariaRequired = !0), (y.value || e.helpText) && (a.ariaDescribedby = m), c.value && (a.modelValue = r.getValue(e.name), a["onUpdate:modelValue"] = (u) => r.setValue(e.name, u), a.readonly = r.readonly.value), a;
     });
-    return g(() => {
-      l.name && o && o.unregisterField(l.name);
-    }), (r, v) => q((t(), i("div", {
-      class: B(["cui-form-field", [
-        `cui-form-field--${e.labelPosition}`,
-        { "cui-form-field--error": n.value }
+    return T(() => {
+      e.name && r && r.unregisterField(e.name);
+    }), (a, u) => _((i(), t("div", {
+      class: F(["cui-form-field", [
+        `cui-form-field--${l.labelPosition}`,
+        { "cui-form-field--error": f.value }
       ]])
     }, [
-      e.label ? (t(), i("label", {
+      l.label ? (i(), t("label", {
         key: 0,
-        for: k(m),
+        id: h,
+        for: g(n),
         class: "cui-form-field__label"
       }, [
-        u("span", null, d(e.label), 1),
-        e.required && !e.requiredText ? (t(), i("span", M, "*")) : e.required && e.requiredText ? (t(), i("span", P, d(e.requiredText), 1)) : c("", !0)
-      ], 8, F)) : c("", !0),
-      u("div", S, [
-        u("div", w, [
-          T(r.$slots, "default", V(p(y.value)), void 0, !0)
+        s("span", null, d(l.label), 1),
+        l.required && !l.requiredText ? (i(), t(V, { key: 0 }, [
+          u[0] || (u[0] = s("span", {
+            class: "cui-form-field__required",
+            "aria-hidden": "true"
+          }, "*", -1)),
+          s("span", w, d(g(q).formField.required), 1)
+        ], 64)) : l.required ? (i(), t("span", I, d(l.requiredText), 1)) : v("", !0)
+      ], 8, S)) : v("", !0),
+      s("div", z, [
+        s("div", N, [
+          C(a.$slots, "default", M($(x.value)), void 0, !0)
         ]),
-        h.value ? (t(), i("div", D, d(f.value), 1)) : e.helpText ? (t(), i("div", $, d(e.helpText), 1)) : c("", !0)
+        y.value ? (i(), t("div", {
+          key: 0,
+          class: "cui-form-field__error",
+          id: m
+        }, d(b.value), 1)) : l.helpText ? (i(), t("div", {
+          key: 1,
+          class: "cui-form-field__help",
+          id: m
+        }, d(l.helpText), 1)) : v("", !0)
       ])
     ], 2)), [
-      [C, !e.hidden]
+      [D, !l.hidden]
     ]);
   }
 });
 export {
-  U as default
+  K as default
 };

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

@@ -1,6 +1,6 @@
-import type { HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded } from "../types/common";
+import type { HideableProps, ColorableProps, SizeableProps, DisableableProps, CuiRounded, NativeControlProps } from "../types/common";
 export type InputType = "text" | "password" | "email" | "url" | "tel" | "search" | "number" | "range";
-export interface CuiInputProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
+export interface CuiInputProps extends NativeControlProps, HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** v-model binding. `string | number` so `type="number"` / `v-model.number` bind without a cast. */
     modelValue?: string | number;
     /** Input type */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiInput.vue"],"names":[],"mappings":"AAmYA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAalH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACnG,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAsDD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAoND,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgCxD,QAAA,MAAM,eAAe;;;;;;;;;;;WA5TX,OAAO;cAIJ,OAAO;;;;UAVX,SAAS;aAYN,UAAU;;gBAdP,MAAM,GAAG,MAAM;eAMhB,OAAO;6EAuUnB,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":"CuiInput.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiInput.vue"],"names":[],"mappings":"AA+YA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AActI,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,WAAW,aAAc,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACvH,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAyDD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AA0ND,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACpD;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAkCxD,QAAA,MAAM,eAAe;;;;;;;;;;;WAvUX,OAAO;cAIJ,OAAO;;;;UAVX,SAAS;aAYN,UAAU;;gBAdP,MAAM,GAAG,MAAM;eAMhB,OAAO;6EAkVnB,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/CuiInput.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiInput.vue2.js";
 /* empty css              */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-29588c2a"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8462dac5"]]);
 export {
   m as default
 };