iryx-ui 0.18.2 → 0.18.4

package/dist/components/Input.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { inputTheme as n } from "../theme/input.js";
-import { useFormField as r } from "../composables/form.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";
 //#region src/components/Input.vue?vue&type=script&setup=true&lang.ts
@@ -55,7 +55,9 @@ var T = [
 			"url",
 			"tel",
 			"password"
-		].includes(D.type) ? !1 : void 0), k = y(u, "modelValue"), A = b(), j = r(), M = i(() => D.id ?? j?.id.value), N = i(() => D.invalid ?? j?.invalid.value ?? !1), P = e(), F = i(() => D.unstyled ?? P.unstyled), I = g(k.value), L;
+		].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);
 		}
@@ -81,7 +83,7 @@ var T = [
 			R(), I.value = "", k.value = "", V.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(() => n({
+		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
 		}));

package/dist/components/NumberInput.vue_vue_type_script_setup_true_lang.js

@@ -57,7 +57,9 @@ var M = [
 	}),
 	emits: ["update:modelValue"],
 	setup(_) {
-		let v = _, F = w(_, "modelValue"), I = n(), L = f(() => v.id ?? I?.id.value), R = f(() => v.invalid ?? I?.invalid.value ?? !1), z = e(), B = f(() => v.unstyled ?? z.unstyled), V = S(""), H = S(!1);
+		let v = _, F = w(_, "modelValue"), I = n(), L = f(() => v.id ?? I?.id.value);
+		I && v.id && (I.id.value = v.id);
+		let R = f(() => v.invalid ?? I?.invalid.value ?? !1), z = e(), B = f(() => v.unstyled ?? z.unstyled), V = S(""), H = S(!1);
 		function U(e) {
 			return e ? v.locale ? o(e, v.locale, v.precision) : v.precision == null ? e : l(e, v.precision) ?? e : "";
 		}

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

@@ -55,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<PinInputProps, {}, {}, {
     length: number;
     unstyled: boolean;
     separator: string;
+    invalid: boolean;
 }, {}, {}, {}, 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/PinInput.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { pinInputTheme as t } from "../theme/pin-input.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
-import { PinInputInput as _, PinInputRoot as v } from "reka-ui";
+import { useFormField as t } from "../composables/form.js";
+import { pinInputTheme as n } from "../theme/pin-input.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+import { PinInputInput as v, PinInputRoot as y } from "reka-ui";
 //#region src/components/PinInput.vue?vue&type=script&setup=true&lang.ts
-var y = /*@__PURE__*/ l({
+var b = /*@__PURE__*/ u({
 	__name: "PinInput",
 	props: {
 		modelValue: {},
@@ -15,7 +16,10 @@ var y = /*@__PURE__*/ l({
 		groupSize: {},
 		separator: { default: "–" },
 		disabled: { type: Boolean },
-		invalid: { type: Boolean },
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		size: {},
 		id: {},
 		unstyled: {
@@ -31,43 +35,47 @@ var y = /*@__PURE__*/ l({
 		ui: {}
 	},
 	emits: ["update:modelValue", "complete"],
-	setup(l, { emit: y }) {
-		let b = l, x = y, S = r(() => (b.modelValue ?? "").split("")), C = (e) => e.join(""), w = r(() => Array.from({ length: b.length }, (e, t) => t)), T = r(() => {
-			let e = b.groupSize;
-			return !e || e <= 0 ? /* @__PURE__ */ new Set() : new Set(w.value.filter((t) => (t + 1) % e === 0 && t !== b.length - 1));
-		}), E = e(), D = r(() => b.unstyled ?? E.unstyled), O = r(() => t({
-			size: b.size,
-			invalid: b.invalid
-		})), k = r(() => D.value ? [b.ui?.root, b.class] : O.value.root({ class: [b.ui?.root, b.class] })), A = r(() => D.value ? b.ui?.input : O.value.input({ class: b.ui?.input })), j = r(() => D.value ? b.ui?.separator : O.value.separator({ class: b.ui?.separator }));
-		return (e, t) => (d(), i(h(v), {
-			id: b.id,
-			"model-value": S.value,
-			type: b.type,
-			mask: b.mask,
-			otp: b.otp,
-			placeholder: b.placeholder,
-			disabled: b.disabled,
-			class: u(k.value),
-			"onUpdate:modelValue": t[0] ||= (e) => x("update:modelValue", C(e)),
-			onComplete: t[1] ||= (e) => x("complete", C(e))
+	setup(u, { emit: b }) {
+		let x = u, S = b, C = i(() => (x.modelValue ?? "").split("")), w = (e) => e.join(""), T = i(() => Array.from({ length: x.length }, (e, t) => t)), E = i(() => {
+			let e = x.groupSize;
+			return !e || e <= 0 ? /* @__PURE__ */ new Set() : new Set(T.value.filter((t) => (t + 1) % e === 0 && t !== x.length - 1));
+		}), D = t(), O = i(() => x.id ?? D?.id.value);
+		D && x.id && (D.id.value = x.id);
+		let k = i(() => x.invalid ?? D?.invalid.value ?? !1), A = e(), j = i(() => x.unstyled ?? A.unstyled), M = i(() => n({
+			size: x.size,
+			invalid: k.value
+		})), N = i(() => j.value ? [x.ui?.root, x.class] : M.value.root({ class: [x.ui?.root, x.class] })), P = i(() => j.value ? x.ui?.input : M.value.input({ class: x.ui?.input })), F = i(() => j.value ? x.ui?.separator : M.value.separator({ class: x.ui?.separator }));
+		return (e, t) => (f(), a(g(y), {
+			"aria-describedby": g(D)?.describedBy.value,
+			"model-value": C.value,
+			type: x.type,
+			mask: x.mask,
+			otp: x.otp,
+			placeholder: x.placeholder,
+			disabled: x.disabled,
+			class: d(N.value),
+			"onUpdate:modelValue": t[0] ||= (e) => S("update:modelValue", w(e)),
+			onComplete: t[1] ||= (e) => S("complete", w(e))
 		}, {
-			default: g(() => [(d(!0), o(n, null, f(w.value, (t) => (d(), o(n, { key: t }, [c(h(_), {
+			default: _(() => [(f(!0), s(r, null, p(T.value, (t) => (f(), s(r, { key: t }, [l(g(v), {
+				id: t === 0 ? O.value : void 0,
 				index: t,
 				spellcheck: "false",
-				"aria-invalid": b.invalid || void 0,
-				class: u(A.value)
+				"aria-invalid": k.value || void 0,
+				class: d(P.value)
 			}, null, 8, [
+				"id",
 				"index",
 				"aria-invalid",
 				"class"
-			]), T.value.has(t) ? (d(), o("span", {
+			]), E.value.has(t) ? (f(), s("span", {
 				key: 0,
-				class: u(j.value),
+				class: d(F.value),
 				"aria-hidden": "true"
-			}, [p(e.$slots, "separator", {}, () => [s(m(b.separator), 1)])], 2)) : a("", !0)], 64))), 128))]),
+			}, [m(e.$slots, "separator", {}, () => [c(h(x.separator), 1)])], 2)) : o("", !0)], 64))), 128))]),
 			_: 3
 		}, 8, [
-			"id",
+			"aria-describedby",
 			"model-value",
 			"type",
 			"mask",
@@ -79,4 +87,4 @@ var y = /*@__PURE__*/ l({
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };

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

@@ -11,6 +11,8 @@ export interface RadioGroupProps extends RadioGroupRootProps {
     /** Options to render. Strings are expanded to `{ label, value }`. */
     items?: (RadioGroupItemOption | string)[];
     size?: 'sm' | 'md' | 'lg';
+    /** Mark as failing validation. Taken from the enclosing `IFormField` when omitted. */
+    invalid?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
@@ -31,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<RadioGroupProps, {}, {},
     "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableValue) => any) | undefined;
 }>, {
     unstyled: boolean;
+    invalid: boolean;
 }, {}, {}, {}, 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/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,18 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { radioGroupTheme as t } from "../theme/radio-group.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
-import { Label as y, RadioGroupIndicator as b, RadioGroupItem as x, RadioGroupRoot as S, useForwardPropsEmits as C, useId as w } from "reka-ui";
+import { useFormField as t } from "../composables/form.js";
+import { radioGroupTheme as n } from "../theme/radio-group.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+import { Label as b, RadioGroupIndicator as x, RadioGroupItem as S, RadioGroupRoot as C, useForwardPropsEmits as w, useId as T } from "reka-ui";
 //#region src/components/RadioGroup.vue?vue&type=script&setup=true&lang.ts
-var T = ["id"], E = /*@__PURE__*/ u({
+var E = ["id"], D = /*@__PURE__*/ d({
 	__name: "RadioGroup",
 	props: {
 		items: {},
 		size: {},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -31,29 +36,37 @@ var T = ["id"], E = /*@__PURE__*/ u({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(u, { emit: E }) {
-		let D = u, O = E, k = C(r(() => {
-			let { items: e, size: t, unstyled: n, class: r, ui: i, ...a } = D;
-			return a;
-		}), O), A = r(() => (D.items ?? []).map((e) => typeof e == "string" ? {
+	setup(d, { emit: D }) {
+		let O = d, k = D, A = w(i(() => {
+			let { items: e, size: t, invalid: n, unstyled: r, class: i, ui: a, ...o } = O;
+			return o;
+		}), k), j = i(() => (O.items ?? []).map((e) => typeof e == "string" ? {
 			label: e,
 			value: e
-		} : e)), j = w(), M = e(), N = r(() => D.unstyled ?? M.unstyled), P = r(() => t({
-			size: D.size,
-			orientation: D.orientation ?? "vertical"
-		})), F = r(() => N.value ? [D.ui?.root, D.class] : P.value.root({ class: [D.ui?.root, D.class] })), I = r(() => N.value ? D.ui?.item : P.value.item({ class: D.ui?.item })), L = r(() => N.value ? D.ui?.label : P.value.label({ class: D.ui?.label })), R = r(() => N.value ? D.ui?.description : P.value.description({ class: D.ui?.description }));
-		return (e, t) => (p(), i(_(S), d(_(k), { class: F.value }), {
-			default: v(() => [h(e.$slots, "default", {}, () => [(p(!0), o(n, null, m(A.value, (e) => (p(), o("div", {
+		} : e)), M = T(), N = t();
+		N && (N.id.value = void 0);
+		let P = i(() => O.invalid ?? N?.invalid.value ?? !1), F = e(), I = i(() => O.unstyled ?? F.unstyled), L = i(() => n({
+			size: O.size,
+			orientation: O.orientation ?? "vertical",
+			invalid: P.value
+		})), R = i(() => I.value ? [O.ui?.root, O.class] : L.value.root({ class: [O.ui?.root, O.class] })), z = i(() => I.value ? O.ui?.item : L.value.item({ class: O.ui?.item })), B = i(() => I.value ? O.ui?.label : L.value.label({ class: O.ui?.label })), V = i(() => I.value ? O.ui?.description : L.value.description({ class: O.ui?.description }));
+		return (e, t) => (m(), a(v(C), f(v(A), {
+			"aria-labelledby": v(N)?.labelId.value,
+			"aria-invalid": P.value || void 0,
+			"aria-describedby": v(N)?.describedBy.value,
+			class: R.value
+		}), {
+			default: y(() => [g(e.$slots, "default", {}, () => [(m(!0), s(r, null, h(j.value, (e) => (m(), s("div", {
 				key: e.value,
-				class: f(N.value ? void 0 : P.value.wrapper())
-			}, [l(_(x), {
-				id: `${_(j)}-${e.value}`,
+				class: p(I.value ? void 0 : L.value.wrapper())
+			}, [u(v(S), {
+				id: `${v(M)}-${e.value}`,
 				value: e.value,
 				disabled: e.disabled,
-				"aria-describedby": e.description ? `${_(j)}-${e.value}-description` : void 0,
-				class: f(I.value)
+				"aria-describedby": e.description ? `${v(M)}-${e.value}-description` : void 0,
+				class: p(z.value)
 			}, {
-				default: v(() => [l(_(b), { class: f(N.value ? void 0 : P.value.indicator()) }, null, 8, ["class"])]),
+				default: y(() => [u(v(x), { class: p(I.value ? void 0 : L.value.indicator()) }, null, 8, ["class"])]),
 				_: 1
 			}, 8, [
 				"id",
@@ -61,20 +74,25 @@ var T = ["id"], E = /*@__PURE__*/ u({
 				"disabled",
 				"aria-describedby",
 				"class"
-			]), s("div", { class: f(N.value ? void 0 : P.value.content()) }, [l(_(y), {
-				for: `${_(j)}-${e.value}`,
-				class: f(L.value)
+			]), c("div", { class: p(I.value ? void 0 : L.value.content()) }, [u(v(b), {
+				for: `${v(M)}-${e.value}`,
+				class: p(B.value)
 			}, {
-				default: v(() => [c(g(e.label), 1)]),
+				default: y(() => [l(_(e.label), 1)]),
 				_: 2
-			}, 1032, ["for", "class"]), e.description ? (p(), o("p", {
+			}, 1032, ["for", "class"]), e.description ? (m(), s("p", {
 				key: 0,
-				id: `${_(j)}-${e.value}-description`,
-				class: f(R.value)
-			}, g(e.description), 11, T)) : a("", !0)], 2)], 2))), 128))])]),
+				id: `${v(M)}-${e.value}-description`,
+				class: p(V.value)
+			}, _(e.description), 11, E)) : o("", !0)], 2)], 2))), 128))])]),
 			_: 3
-		}, 16, ["class"]));
+		}, 16, [
+			"aria-labelledby",
+			"aria-invalid",
+			"aria-describedby",
+			"class"
+		]));
 	}
 });
 //#endregion
-export { E as default };
+export { D as default };

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

@@ -21,6 +21,8 @@ export interface SelectProps extends SelectRootProps {
     size?: 'sm' | 'md' | 'lg';
     /** Lands on the trigger, so a `<label for>` names the control. */
     id?: string;
+    /** Mark as failing validation. Taken from the enclosing `IFormField` when omitted. */
+    invalid?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
@@ -45,6 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {},
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
+    invalid: boolean;
 }, {}, {}, {}, 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/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { selectTheme as n } from "../theme/select.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
-import { ArrowDown01Icon as x, Tick02Icon as S } from "@hugeicons/core-free-icons";
-import { SelectContent as C, SelectGroup as w, SelectIcon as T, SelectItem as E, SelectItemIndicator as D, SelectItemText as O, SelectLabel as k, SelectPortal as A, SelectRoot as j, SelectTrigger as M, SelectValue as N, SelectViewport as P, useForwardPropsEmits as F } from "reka-ui";
+import { useFormField as n } from "../composables/form.js";
+import { selectTheme as r } from "../theme/select.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+import { ArrowDown01Icon as S, Tick02Icon as C } from "@hugeicons/core-free-icons";
+import { SelectContent as w, SelectGroup as T, SelectIcon as E, SelectItem as D, SelectItemIndicator as O, SelectItemText as k, SelectLabel as A, SelectPortal as ee, SelectRoot as te, SelectTrigger as j, SelectValue as M, SelectViewport as N, useForwardPropsEmits as P } from "reka-ui";
 //#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
-var I = /*@__PURE__*/ u({
+var F = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Select",
 	props: {
@@ -13,6 +14,10 @@ var I = /*@__PURE__*/ u({
 		placeholder: {},
 		size: {},
 		id: {},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -38,67 +43,81 @@ var I = /*@__PURE__*/ u({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue", "update:open"],
-	setup(u, { emit: I }) {
-		let L = u, R = I, z = F(i(() => {
-			let { items: e, placeholder: t, size: n, id: r, unstyled: i, class: a, ui: o, ...s } = L;
-			return s;
-		}), R);
-		function B(e) {
+	setup(d, { emit: F }) {
+		let I = d, L = F, R = P(a(() => {
+			let { items: e, placeholder: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = I;
+			return c;
+		}), L);
+		function z(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		function V(e) {
+		function B(e) {
 			return typeof e != "string" && "items" in e;
 		}
-		let H = i(() => {
-			let e = L.items ?? [];
-			if (e.some(V)) return e.map((e) => V(e) ? {
+		let V = a(() => {
+			let e = I.items ?? [];
+			if (e.some(B)) return e.map((e) => B(e) ? {
 				label: e.label,
-				options: e.items.map(B)
+				options: e.items.map(z)
 			} : {
 				label: "",
-				options: [B(e)]
+				options: [z(e)]
 			});
-		}), U = i(() => (L.items ?? []).flatMap((e) => V(e) ? e.items.map(B) : [B(e)])), W = e(), G = i(() => L.unstyled ?? W.unstyled), K = i(() => n({ size: L.size })), q = i(() => G.value ? [L.ui?.trigger, L.class] : K.value.trigger({ class: [L.ui?.trigger, L.class] })), J = i(() => G.value ? L.ui?.content : K.value.content({ class: L.ui?.content })), Y = i(() => G.value ? L.ui?.viewport : K.value.viewport({ class: L.ui?.viewport })), X = i(() => G.value ? L.ui?.item : K.value.item({ class: L.ui?.item })), Z = i(() => G.value ? void 0 : K.value.itemIndicator()), Q = i(() => G.value ? L.ui?.group : K.value.group({ class: L.ui?.group })), $ = i(() => G.value ? L.ui?.groupLabel : K.value.groupLabel({ class: L.ui?.groupLabel }));
-		return (e, n) => (h(), a(y(j), m(d(y(z))), {
-			default: b(() => [l(y(M), f({ id: L.id }, e.$attrs, { class: q.value }), {
-				default: b(() => [l(y(N), {
+		}), H = a(() => (I.items ?? []).flatMap((e) => B(e) ? e.items.map(z) : [z(e)])), U = n(), W = a(() => I.id ?? U?.id.value);
+		U && I.id && (U.id.value = I.id);
+		let G = a(() => I.invalid ?? U?.invalid.value ?? !1), K = e(), q = a(() => I.unstyled ?? K.unstyled), J = a(() => r({
+			size: I.size,
+			invalid: G.value
+		})), Y = a(() => q.value ? [I.ui?.trigger, I.class] : J.value.trigger({ class: [I.ui?.trigger, I.class] })), X = a(() => q.value ? I.ui?.content : J.value.content({ class: I.ui?.content })), Z = a(() => q.value ? I.ui?.viewport : J.value.viewport({ class: I.ui?.viewport })), Q = a(() => q.value ? I.ui?.item : J.value.item({ class: I.ui?.item })), $ = a(() => q.value ? void 0 : J.value.itemIndicator()), ne = a(() => q.value ? I.ui?.group : J.value.group({ class: I.ui?.group })), re = a(() => q.value ? I.ui?.groupLabel : J.value.groupLabel({ class: I.ui?.groupLabel }));
+		return (e, n) => (g(), o(b(te), h(f(b(R))), {
+			default: x(() => [u(b(j), p({
+				id: W.value,
+				"aria-invalid": G.value || void 0,
+				"aria-describedby": b(U)?.describedBy.value
+			}, e.$attrs, { class: Y.value }), {
+				default: x(() => [u(b(M), {
 					class: "truncate",
-					placeholder: L.placeholder
-				}, null, 8, ["placeholder"]), l(y(T), { "as-child": "" }, {
-					default: b(() => [l(t, { icon: y(x) }, null, 8, ["icon"])]),
+					placeholder: I.placeholder
+				}, null, 8, ["placeholder"]), u(b(E), { "as-child": "" }, {
+					default: x(() => [u(t, { icon: b(S) }, null, 8, ["icon"])]),
 					_: 1
 				})]),
 				_: 1
-			}, 16, ["id", "class"]), l(y(A), null, {
-				default: b(() => [l(y(C), {
-					class: p(J.value),
+			}, 16, [
+				"id",
+				"aria-invalid",
+				"aria-describedby",
+				"class"
+			]), u(b(ee), null, {
+				default: x(() => [u(b(w), {
+					class: m(X.value),
 					position: "item-aligned"
 				}, {
-					default: b(() => [l(y(P), { class: p(Y.value) }, {
-						default: b(() => [_(e.$slots, "default", {}, () => [H.value ? (h(!0), s(r, { key: 0 }, g(H.value, (e, n) => (h(), a(y(w), {
+					default: x(() => [u(b(N), { class: m(Z.value) }, {
+						default: x(() => [v(e.$slots, "default", {}, () => [V.value ? (g(!0), c(i, { key: 0 }, _(V.value, (e, n) => (g(), o(b(T), {
 							key: e.label || n,
-							class: p(Q.value)
+							class: m(ne.value)
 						}, {
-							default: b(() => [e.label ? (h(), a(y(k), {
+							default: x(() => [e.label ? (g(), o(b(A), {
 								key: 0,
-								class: p($.value)
+								class: m(re.value)
 							}, {
-								default: b(() => [c(v(e.label), 1)]),
+								default: x(() => [l(y(e.label), 1)]),
 								_: 2
-							}, 1032, ["class"])) : o("", !0), (h(!0), s(r, null, g(e.options, (e) => (h(), a(y(E), {
+							}, 1032, ["class"])) : s("", !0), (g(!0), c(i, null, _(e.options, (e) => (g(), o(b(D), {
 								key: e.value,
 								value: e.value,
 								disabled: e.disabled,
-								class: p(X.value)
+								class: m(Q.value)
 							}, {
-								default: b(() => [l(y(D), { class: p(Z.value) }, {
-									default: b(() => [l(t, { icon: y(S) }, null, 8, ["icon"])]),
+								default: x(() => [u(b(O), { class: m($.value) }, {
+									default: x(() => [u(t, { icon: b(C) }, null, 8, ["icon"])]),
 									_: 1
-								}, 8, ["class"]), l(y(O), null, {
-									default: b(() => [c(v(e.label), 1)]),
+								}, 8, ["class"]), u(b(k), null, {
+									default: x(() => [l(y(e.label), 1)]),
 									_: 2
 								}, 1024)]),
 								_: 2
@@ -108,17 +127,17 @@ var I = /*@__PURE__*/ u({
 								"class"
 							]))), 128))]),
 							_: 2
-						}, 1032, ["class"]))), 128)) : (h(!0), s(r, { key: 1 }, g(U.value, (e) => (h(), a(y(E), {
+						}, 1032, ["class"]))), 128)) : (g(!0), c(i, { key: 1 }, _(H.value, (e) => (g(), o(b(D), {
 							key: e.value,
 							value: e.value,
 							disabled: e.disabled,
-							class: p(X.value)
+							class: m(Q.value)
 						}, {
-							default: b(() => [l(y(D), { class: p(Z.value) }, {
-								default: b(() => [l(t, { icon: y(S) }, null, 8, ["icon"])]),
+							default: x(() => [u(b(O), { class: m($.value) }, {
+								default: x(() => [u(t, { icon: b(C) }, null, 8, ["icon"])]),
 								_: 1
-							}, 8, ["class"]), l(y(O), null, {
-								default: b(() => [c(v(e.label), 1)]),
+							}, 8, ["class"]), u(b(k), null, {
+								default: x(() => [l(y(e.label), 1)]),
 								_: 2
 							}, 1024)]),
 							_: 2
@@ -138,4 +157,4 @@ var I = /*@__PURE__*/ u({
 	}
 });
 //#endregion
-export { I as default };
+export { F as default };

package/dist/components/SignaturePad.vue_vue_type_script_setup_true_lang.js

@@ -54,7 +54,9 @@ var x = [
 		"clear"
 	],
 	setup(d, { expose: w, emit: T }) {
-		let E = d, D = T, O = _(), k = _([]), A = !1, j = 0, M = () => k.value.at(-1), N = r(), P = s(() => E.id ?? N?.id.value), F = s(() => E.invalid ?? N?.invalid.value ?? !1), I = s(() => !i(k.value));
+		let E = d, D = T, O = _(), k = _([]), A = !1, j = 0, M = () => k.value.at(-1), N = r(), P = s(() => E.id ?? N?.id.value);
+		N && E.id && (N.id.value = E.id);
+		let F = s(() => E.invalid ?? N?.invalid.value ?? !1), I = s(() => !i(k.value));
 		function L() {
 			if (E.penColor !== "currentColor") return E.penColor;
 			let e = O.value;