iryx-ui 0.24.1 → 0.25.0

package/dist/components/FileUpload.vue_vue_type_script_setup_true_lang.js

@@ -3,23 +3,28 @@ import t from "./Icon.js";
 import n from "./Button.js";
 import { useFormField as r } from "../composables/form.js";
 import { fileUploadTheme as i } from "../theme/file-upload.js";
-import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as ee, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S, withModifiers as C } from "vue";
-import { Delete02Icon as w, File01Icon as T, Upload05Icon as E } from "@hugeicons/core-free-icons";
+import a from "./Progress.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, onBeforeUnmount as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, toRaw as S, unref as C, useModel as w, watch as T, withCtx as E, withModifiers as D } from "vue";
+import { Delete02Icon as O, File01Icon as k, Refresh01Icon as A, Upload05Icon as j } from "@hugeicons/core-free-icons";
 //#region src/components/FileUpload.vue?vue&type=script&setup=true&lang.ts
-var D = [
+var ee = [
 	"id",
 	"multiple",
 	"accept",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], O = ["src"], k = [
+], te = ["src"], ne = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], A = /*@__PURE__*/ d({
+], re = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], M = /*@__PURE__*/ m({
 	__name: "FileUpload",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ h({
 		multiple: { type: Boolean },
 		accept: {},
 		maxSize: {},
@@ -33,7 +38,11 @@ var D = [
 		label: { default: "Drag and drop a file here" },
 		hint: {},
 		browseLabel: { default: "Browse files" },
+		statusFor: {},
 		removeLabel: { default: "Remove" },
+		retryLabel: { default: "Retry" },
+		doneText: { default: "Uploaded" },
+		failedText: { default: "Upload failed" },
 		tooLargeText: { default: "is too large" },
 		wrongTypeText: { default: "is not an accepted type" },
 		tooManyText: { default: "exceeds the file limit" },
@@ -52,34 +61,34 @@ var D = [
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ f(["reject"], ["update:modelValue"]),
-	setup(d, { emit: f }) {
-		let A = d, j = f, M = b(d, "modelValue"), N = r(), P = o(() => A.id ?? N?.id.value);
-		N && A.id && (N.id.value = A.id);
-		let F = o(() => A.invalid ?? N?.invalid.value ?? !1), I = e(), L = o(() => A.unstyled ?? I.unstyled), R = g([]);
-		function z(e) {
-			if (!A.accept) return !0;
+	emits: /*@__PURE__*/ h(["reject", "retry"], ["update:modelValue"]),
+	setup(m, { emit: h }) {
+		let M = m, N = h, P = w(m, "modelValue"), F = r(), I = s(() => M.id ?? F?.id.value);
+		F && M.id && (F.id.value = M.id);
+		let L = s(() => M.invalid ?? F?.invalid.value ?? !1), R = e(), z = s(() => M.unstyled ?? R.unstyled), B = y([]);
+		function V(e) {
+			if (!M.accept) return !0;
 			let t = e.name.toLowerCase(), n = e.type.toLowerCase();
-			return A.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean).some((e) => e.startsWith(".") ? t.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
+			return M.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean).some((e) => e.startsWith(".") ? t.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
 		}
-		function B(e) {
-			let t = [], n = [], r = A.multiple ? M.value : [];
+		function H(e) {
+			let t = [], n = [], r = M.multiple ? P.value : [];
 			for (let i of e) {
-				if (!z(i)) {
+				if (!V(i)) {
 					n.push({
 						file: i,
 						reason: "type"
 					});
 					continue;
 				}
-				if (A.maxSize != null && i.size > A.maxSize) {
+				if (M.maxSize != null && i.size > M.maxSize) {
 					n.push({
 						file: i,
 						reason: "size"
 					});
 					continue;
 				}
-				let e = A.multiple ? A.maxFiles : 1;
+				let e = M.multiple ? M.maxFiles : 1;
 				if (e != null && r.length + t.length >= e) {
 					n.push({
 						file: i,
@@ -89,37 +98,40 @@ var D = [
 				}
 				t.push(i);
 			}
-			R.value = n, n.length && j("reject", n), t.length && (M.value = [...r, ...t]);
+			B.value = n, n.length && N("reject", n), t.length && (P.value = [...r, ...t]);
 		}
-		let V = g();
-		function H(e) {
+		let U = y();
+		function W(e) {
 			let t = e.target;
-			B([...t.files ?? []]), t.value = "";
+			H([...t.files ?? []]), t.value = "";
 		}
-		function U(e) {
-			M.value = M.value.filter((t, n) => n !== e);
+		function G(e) {
+			P.value = P.value.filter((t, n) => n !== e);
 		}
-		let W = g(0), G = o(() => W.value > 0);
-		function K() {
-			A.disabled || W.value++;
+		let K = y(0), q = s(() => K.value > 0);
+		function J() {
+			M.disabled || K.value++;
 		}
-		function q() {
-			W.value > 0 && W.value--;
+		function Y() {
+			K.value > 0 && K.value--;
 		}
-		function J(e) {
-			W.value = 0, !A.disabled && B([...e.dataTransfer?.files ?? []]);
+		function ie(e) {
+			K.value = 0, !M.disabled && H([...e.dataTransfer?.files ?? []]);
 		}
-		let Y = g(/* @__PURE__ */ new Map());
-		x(M, (e) => {
-			for (let [t, n] of Y.value) e.includes(t) || (URL.revokeObjectURL(n), Y.value.delete(t));
-			for (let t of e) t.type.startsWith("image/") && !Y.value.has(t) && Y.value.set(t, URL.createObjectURL(t));
+		let X = y(/* @__PURE__ */ new Map());
+		T(P, (e) => {
+			for (let [t, n] of X.value) e.includes(t) || (URL.revokeObjectURL(n), X.value.delete(t));
+			for (let t of e) t.type.startsWith("image/") && !X.value.has(t) && X.value.set(t, URL.createObjectURL(t));
 		}, {
 			immediate: !0,
 			deep: !0
-		}), m(() => {
-			for (let e of Y.value.values()) URL.revokeObjectURL(e);
+		}), _(() => {
+			for (let e of X.value.values()) URL.revokeObjectURL(e);
 		});
-		function X(e) {
+		function Z(e) {
+			return M.statusFor?.(S(e));
+		}
+		function ae(e) {
 			let t = [
 				"B",
 				"kB",
@@ -129,88 +141,119 @@ var D = [
 			for (; n >= 1024 && r < t.length - 1;) n /= 1024, r++;
 			return `${r === 0 ? n : Math.round(n * 10) / 10} ${t[r]}`;
 		}
-		function Z(e) {
-			let t = e.reason === "size" ? A.tooLargeText : e.reason === "type" ? A.wrongTypeText : A.tooManyText;
+		function oe(e) {
+			let t = e.reason === "size" ? M.tooLargeText : e.reason === "type" ? M.wrongTypeText : M.tooManyText;
 			return `${e.file.name} ${t}`;
 		}
-		let Q = o(() => i({
-			dragging: G.value,
-			invalid: F.value,
-			disabled: A.disabled
+		let Q = s(() => i({
+			dragging: q.value,
+			invalid: L.value,
+			disabled: M.disabled,
+			withStatus: !!M.statusFor
 		}));
 		function $(e, t) {
-			let n = A.ui?.[e];
-			return L.value ? [n, t] : Q.value[e]({ class: [n, t] });
+			let n = M.ui?.[e];
+			return z.value ? [n, t] : Q.value[e]({ class: [n, t] });
 		}
-		let te = o(() => L.value ? A.ui?.browse : Q.value.browse({ class: A.ui?.browse }));
-		return (e, r) => (h(), c("div", { class: p($("root", A.class)) }, [
-			l("label", {
-				class: p($("dropzone")),
-				onDragenter: C(K, ["prevent"]),
-				onDragover: r[0] ||= C(() => {}, ["prevent"]),
-				onDragleave: C(q, ["prevent"]),
-				onDrop: C(J, ["prevent"])
+		let se = s(() => z.value ? M.ui?.browse : Q.value.browse({ class: M.ui?.browse }));
+		return (e, r) => (v(), u("div", { class: g($("root", M.class)) }, [
+			d("label", {
+				class: g($("dropzone")),
+				onDragenter: D(J, ["prevent"]),
+				onDragover: r[0] ||= D(() => {}, ["prevent"]),
+				onDragleave: D(Y, ["prevent"]),
+				onDrop: D(ie, ["prevent"])
 			}, [
-				l("input", {
-					id: P.value,
+				d("input", {
+					id: I.value,
 					ref_key: "inputEl",
-					ref: V,
+					ref: U,
 					type: "file",
-					multiple: A.multiple,
-					accept: A.accept,
-					disabled: A.disabled,
-					"aria-invalid": F.value || void 0,
-					"aria-describedby": y(N)?.describedBy.value,
-					class: p($("input")),
-					onChange: H
-				}, null, 42, D),
-				l("span", { class: p($("icon")) }, [u(t, { icon: y(E) }, null, 8, ["icon"])], 2),
-				l("span", { class: p($("label")) }, v(A.label), 3),
-				A.hint ? (h(), c("span", {
+					multiple: M.multiple,
+					accept: M.accept,
+					disabled: M.disabled,
+					"aria-invalid": L.value || void 0,
+					"aria-describedby": C(F)?.describedBy.value,
+					class: g($("input")),
+					onChange: W
+				}, null, 42, ee),
+				d("span", { class: g($("icon")) }, [p(t, { icon: C(j) }, null, 8, ["icon"])], 2),
+				d("span", { class: g($("label")) }, x(M.label), 3),
+				M.hint ? (v(), u("span", {
 					key: 0,
-					class: p($("hint"))
-				}, v(A.hint), 3)) : s("", !0),
-				u(n, {
+					class: g($("hint"))
+				}, x(M.hint), 3)) : l("", !0),
+				p(n, {
 					as: "span",
 					variant: "outline",
 					size: "sm",
-					class: p(te.value)
+					class: g(se.value)
 				}, {
-					default: S(() => [ee(v(A.browseLabel), 1)]),
+					default: E(() => [f(x(M.browseLabel), 1)]),
 					_: 1
 				}, 8, ["class"])
 			], 34),
-			(h(!0), c(a, null, _(R.value, (e) => (h(), c("p", {
+			(v(!0), u(o, null, b(B.value, (e) => (v(), u("p", {
 				key: e.file.name,
-				class: p($("error"))
-			}, v(Z(e)), 3))), 128)),
-			M.value.length ? (h(), c("ul", {
+				class: g($("error"))
+			}, x(oe(e)), 3))), 128)),
+			P.value.length ? (v(), u("ul", {
 				key: 0,
-				class: p($("list"))
-			}, [(h(!0), c(a, null, _(M.value, (e, n) => (h(), c("li", {
+				class: g($("list"))
+			}, [(v(!0), u(o, null, b(P.value, (e, n) => (v(), u("li", {
 				key: `${e.name}-${n}`,
-				class: p($("item"))
+				class: g($("item"))
 			}, [
-				Y.value.get(e) ? (h(), c("img", {
+				X.value.get(e) ? (v(), u("img", {
 					key: 0,
-					src: Y.value.get(e),
+					src: X.value.get(e),
 					alt: "",
-					class: p($("thumbnail"))
-				}, null, 10, O)) : (h(), c("span", {
+					class: g($("thumbnail"))
+				}, null, 10, te)) : (v(), u("span", {
 					key: 1,
-					class: p($("placeholder"))
-				}, [u(t, { icon: y(T) }, null, 8, ["icon"])], 2)),
-				l("span", { class: p($("details")) }, [l("span", { class: p($("name")) }, v(e.name), 3), l("span", { class: p($("meta")) }, v(X(e.size)), 3)], 2),
-				l("button", {
+					class: g($("placeholder"))
+				}, [p(t, { icon: C(k) }, null, 8, ["icon"])], 2)),
+				d("span", { class: g($("details")) }, [
+					d("span", { class: g($("name")) }, x(e.name), 3),
+					Z(e)?.state === "error" ? (v(), u("span", {
+						key: 0,
+						role: "alert",
+						class: g($("error"))
+					}, x(Z(e).error ?? M.failedText), 3)) : (v(), u("span", {
+						key: 1,
+						class: g($("meta"))
+					}, [f(x(ae(e.size)), 1), Z(e)?.state === "uploading" && Z(e).progress != null ? (v(), u(o, { key: 0 }, [f(" · " + x(Math.round(Z(e).progress)) + "%", 1)], 64)) : Z(e)?.state === "done" ? (v(), u(o, { key: 1 }, [f(" · " + x(M.doneText), 1)], 64)) : l("", !0)], 2)),
+					Z(e)?.state === "uploading" ? (v(), c(a, {
+						key: 2,
+						"model-value": Z(e).progress ?? null,
+						size: "sm",
+						"aria-label": e.name,
+						unstyled: z.value,
+						class: g($("progress"))
+					}, null, 8, [
+						"model-value",
+						"aria-label",
+						"unstyled",
+						"class"
+					])) : l("", !0)
+				], 2),
+				d("span", { class: g($("actions")) }, [Z(e)?.state === "error" ? (v(), u("button", {
+					key: 0,
+					type: "button",
+					"aria-label": `${M.retryLabel} ${e.name}`,
+					disabled: M.disabled,
+					class: g($("retry")),
+					onClick: (t) => N("retry", S(e))
+				}, [p(t, { icon: C(A) }, null, 8, ["icon"])], 10, ne)) : l("", !0), d("button", {
 					type: "button",
-					"aria-label": `${A.removeLabel} ${e.name}`,
-					disabled: A.disabled,
-					class: p($("remove")),
-					onClick: (e) => U(n)
-				}, [u(t, { icon: y(w) }, null, 8, ["icon"])], 10, k)
-			], 2))), 128))], 2)) : s("", !0)
+					"aria-label": `${M.removeLabel} ${e.name}`,
+					disabled: M.disabled,
+					class: g($("remove")),
+					onClick: (e) => G(n)
+				}, [p(t, { icon: C(O) }, null, 8, ["icon"])], 10, re)], 2)
+			], 2))), 128))], 2)) : l("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { A as default };
+export { M as default };

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

@@ -20,6 +20,18 @@ export interface InputProps {
     debounce?: number;
     /** Accessible name for the clear button — override for non-English apps. */
     clearLabel?: string;
+    /** Hard limit in characters, enforced by the browser. */
+    maxlength?: number;
+    /**
+     * Show a character count in the trailing area — "12/50" with `maxlength`,
+     * turning red within the last tenth of the limit.
+     */
+    showCount?: boolean;
+    /**
+     * What a screen reader announces near the limit. Override for non-English
+     * apps.
+     */
+    countLabel?: (remaining: number) => string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     /** Applied to the outer field, which is the element carrying the chrome. */
@@ -31,6 +43,7 @@ export interface InputProps {
         leading?: string;
         trailing?: string;
         clear?: string;
+        count?: string;
     };
 }
 type __VLS_Props = InputProps;
@@ -57,6 +70,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     invalid: boolean;
     clearLabel: string;
     debounce: number;
+    countLabel: (remaining: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Input.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,11 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { useFormField as n } from "../composables/form.js";
 import { inputTheme as r } from "../theme/input.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderSlot as _, unref as v, useModel as y, useSlots as b, watch as x, withKeys as S } from "vue";
-import { Cancel01Icon as C, Loading03Icon as w } from "@hugeicons/core-free-icons";
+import { defaultCountLabel as i, useCharacterCount as a } from "../composables/character-count.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, onBeforeUnmount as _, openBlock as v, ref as y, renderSlot as b, toDisplayString as x, unref as S, useModel as C, useSlots as w, watch as T, withKeys as E } from "vue";
+import { Cancel01Icon as D, Loading03Icon as O } from "@hugeicons/core-free-icons";
 //#region src/components/Input.vue?vue&type=script&setup=true&lang.ts
-var T = [
+var k = [
 	"id",
 	"value",
 	"type",
@@ -14,11 +15,15 @@ var T = [
 	"disabled",
 	"required",
 	"aria-invalid",
-	"aria-describedby"
-], E = ["aria-label"], D = /*@__PURE__*/ u({
+	"aria-describedby",
+	"maxlength"
+], ee = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, A = ["aria-label"], j = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "Input",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ m({
 		type: { default: "text" },
 		size: {},
 		placeholder: {},
@@ -33,6 +38,12 @@ var T = [
 		loading: { type: Boolean },
 		debounce: { default: 0 },
 		clearLabel: { default: "Clear" },
+		maxlength: {},
+		showCount: { type: Boolean },
+		countLabel: {
+			type: Function,
+			default: i
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -49,92 +60,98 @@ var T = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(u, { expose: d }) {
-		let D = u, O = i(() => [
+	setup(i, { expose: p }) {
+		let m = i, j = s(() => [
 			"email",
 			"url",
 			"tel",
 			"password"
-		].includes(D.type) ? !1 : void 0), k = y(u, "modelValue"), A = b(), j = n(), M = i(() => D.id ?? j?.id.value);
-		j && D.id && (j.id.value = D.id);
-		let N = i(() => D.invalid ?? j?.invalid.value ?? !1), P = e(), F = i(() => D.unstyled ?? P.unstyled), I = g(k.value), L;
-		function R() {
-			L !== void 0 && (clearTimeout(L), L = void 0);
+		].includes(m.type) ? !1 : void 0), M = C(i, "modelValue"), N = w(), P = n(), F = s(() => m.id ?? P?.id.value);
+		P && m.id && (P.id.value = m.id);
+		let I = s(() => m.invalid ?? P?.invalid.value ?? !1), L = e(), R = s(() => m.unstyled ?? L.unstyled), z = y(M.value), B;
+		function V() {
+			B !== void 0 && (clearTimeout(B), B = void 0);
 		}
-		x(k, (e) => {
-			R(), I.value = e;
+		T(M, (e) => {
+			V(), z.value = e;
 		});
-		function z(e) {
+		function H(e) {
 			let t = e.target.value;
-			if (I.value = t, R(), !D.debounce) {
-				k.value = t;
+			if (z.value = t, V(), !m.debounce) {
+				M.value = t;
 				return;
 			}
-			L = setTimeout(() => {
-				L = void 0, k.value = t;
-			}, D.debounce);
+			B = setTimeout(() => {
+				B = void 0, M.value = t;
+			}, m.debounce);
 		}
-		function B() {
-			L !== void 0 && (R(), k.value = I.value);
+		function U() {
+			B !== void 0 && (V(), M.value = z.value);
 		}
-		m(R);
-		let V = g();
-		function H() {
-			R(), I.value = "", k.value = "", V.value?.focus();
+		_(V);
+		let W = y();
+		function G() {
+			V(), z.value = "", M.value = "", W.value?.focus();
 		}
-		d({ input: V });
-		let U = i(() => I.value !== "" && I.value != null), W = i(() => D.clearable && U.value && !D.disabled), G = i(() => D.loading || W.value || !!A.trailing), K = i(() => r({
-			size: D.size,
-			invalid: N.value
+		p({ input: W });
+		let K = s(() => z.value !== "" && z.value != null), q = s(() => m.clearable && K.value && !m.disabled), J = s(() => m.loading || q.value || m.showCount || !!N.trailing), { remaining: Y, nearLimit: X, text: Z } = a(() => z.value, () => m.maxlength), Q = s(() => r({
+			size: m.size,
+			invalid: I.value,
+			nearLimit: X.value
 		}));
-		function q(e, t) {
-			let n = D.ui?.[e];
-			return F.value ? [n, t] : K.value[e]({ class: [n, t] });
+		function $(e, t) {
+			let n = m.ui?.[e];
+			return R.value ? [n, t] : Q.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (h(), s("div", { class: p(q("root", D.class)) }, [
-			v(A).leading ? (h(), s("span", {
+		return (e, n) => (v(), u("div", { class: g($("root", m.class)) }, [
+			S(N).leading ? (v(), u("span", {
 				key: 0,
-				class: p(q("leading"))
-			}, [_(e.$slots, "leading")], 2)) : o("", !0),
-			c("input", f({
-				id: M.value,
+				class: g($("leading"))
+			}, [b(e.$slots, "leading")], 2)) : l("", !0),
+			d("input", h({
+				id: F.value,
 				ref_key: "inputEl",
-				ref: V,
-				value: I.value,
-				type: D.type,
-				spellcheck: O.value,
-				placeholder: D.placeholder,
-				disabled: D.disabled,
-				required: D.required,
-				"aria-invalid": N.value || void 0,
-				"aria-describedby": v(j)?.describedBy.value,
-				class: q("input")
+				ref: W,
+				value: z.value,
+				type: m.type,
+				spellcheck: j.value,
+				placeholder: m.placeholder,
+				disabled: m.disabled,
+				required: m.required,
+				"aria-invalid": I.value || void 0,
+				"aria-describedby": S(P)?.describedBy.value,
+				maxlength: m.maxlength,
+				class: $("input")
 			}, e.$attrs, {
-				onInput: z,
-				onBlur: B,
-				onKeydown: S(B, ["enter"])
-			}), null, 16, T),
-			G.value ? (h(), s("span", {
+				onInput: H,
+				onBlur: U,
+				onKeydown: E(U, ["enter"])
+			}), null, 16, k),
+			J.value ? (v(), u("span", {
 				key: 1,
-				class: p(q("trailing"))
+				class: g($("trailing"))
 			}, [
-				_(e.$slots, "trailing"),
-				W.value ? (h(), s("button", {
-					key: 0,
+				b(e.$slots, "trailing"),
+				m.showCount ? (v(), u(o, { key: 0 }, [d("span", {
+					"aria-hidden": "true",
+					class: g($("count"))
+				}, x(S(Z)), 3), d("span", ee, x(S(X) ? m.countLabel(S(Y)) : ""), 1)], 64)) : l("", !0),
+				q.value ? (v(), u("button", {
+					key: 1,
 					type: "button",
 					tabindex: "-1",
-					"aria-label": D.clearLabel,
-					class: p(q("clear")),
-					onClick: H
-				}, [l(t, { icon: v(C) }, null, 8, ["icon"])], 10, E)) : o("", !0),
-				D.loading ? (h(), a(t, {
-					key: 1,
-					icon: v(w),
+					"aria-label": m.clearLabel,
+					class: g($("clear")),
+					onClick: G
+				}, [f(t, { icon: S(D) }, null, 8, ["icon"])], 10, A)) : l("", !0),
+				m.loading ? (v(), c(t, {
+					key: 2,
+					icon: S(O),
 					class: "animate-spin"
-				}, null, 8, ["icon"])) : o("", !0)
-			], 2)) : o("", !0)
+				}, null, 8, ["icon"])) : l("", !0)
+			], 2)) : l("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { D as default };
+export { j as default };

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

@@ -50,9 +50,9 @@ declare const __VLS_export: import("vue").DefineComponent<SignaturePadProps, {
 }>, {
     unstyled: boolean;
     height: number;
+    ariaLabel: string;
     invalid: boolean;
     clearLabel: string;
-    ariaLabel: string;
     penColor: string;
     penWidth: number;
     undoLabel: string;

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

@@ -19,9 +19,22 @@ export interface TextareaProps {
     required?: boolean;
     /** Mark the field as invalid — styles the border and ring red. */
     invalid?: boolean;
+    /** Hard limit in characters, enforced by the browser. */
+    maxlength?: number;
+    /**
+     * Show a character count under the field — "120/500" with `maxlength`,
+     * turning red within the last tenth of the limit.
+     */
+    showCount?: boolean;
+    /**
+     * What a screen reader announces near the limit. Override for non-English
+     * apps.
+     */
+    countLabel?: (remaining: number) => string;
     id?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
+    /** Applied to the wrapper when `showCount` is on, otherwise to the textarea. */
     class?: ClassValue;
 }
 type __VLS_Props = TextareaProps;
@@ -39,6 +52,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     unstyled: boolean;
     invalid: boolean;
+    countLabel: (remaining: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;