iryx-ui 0.18.2 → 0.18.4

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

@@ -7,6 +7,8 @@ export interface CheckboxProps extends CheckboxRootProps {
     description?: string;
     size?: 'sm' | 'md' | 'lg';
     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;
@@ -36,6 +38,7 @@ declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {
     "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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/Checkbox.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 { checkboxTheme as n } from "../theme/checkbox.js";
-import { 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, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
-import { MinusSignIcon as v, Tick02Icon as y } from "@hugeicons/core-free-icons";
-import { CheckboxIndicator as b, CheckboxRoot as x, Label as S, useForwardPropsEmits as C, useId as w } from "reka-ui";
+import { useFormField as n } from "../composables/form.js";
+import { checkboxTheme as r } from "../theme/checkbox.js";
+import { 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, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
+import { MinusSignIcon as y, Tick02Icon as b } from "@hugeicons/core-free-icons";
+import { CheckboxIndicator as x, CheckboxRoot as S, Label as C, useForwardPropsEmits as w, useId as T } from "reka-ui";
 //#region src/components/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var T = ["id"], E = /*@__PURE__*/ u({
+var E = ["id"], D = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Checkbox",
 	props: {
@@ -13,6 +14,10 @@ var T = ["id"], E = /*@__PURE__*/ u({
 		description: {},
 		size: {},
 		id: {},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -36,69 +41,81 @@ 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 { label: e, description: t, size: n, id: r, unstyled: i, class: a, ui: o, ...s } = D;
-			return s;
-		}), O), A = w(), j = r(() => D.id ?? A), M = r(() => !!(D.label || D.description)), N = e(), P = r(() => D.unstyled ?? N.unstyled), F = r(() => n({
-			size: D.size,
-			withText: M.value
-		})), I = r(() => P.value ? D.ui?.wrapper : F.value.wrapper({ class: D.ui?.wrapper })), L = r(() => P.value ? [D.ui?.root, D.class] : F.value.root({ class: [D.ui?.root, D.class] })), R = r(() => P.value ? D.ui?.indicator : F.value.indicator({ class: D.ui?.indicator })), z = r(() => P.value ? D.ui?.content : F.value.content({ class: D.ui?.content })), B = r(() => P.value ? D.ui?.label : F.value.label({ class: D.ui?.label })), V = r(() => P.value ? D.ui?.description : F.value.description({ class: D.ui?.description }));
-		return (e, n) => M.value ? (p(), o("div", {
+	setup(d, { emit: D }) {
+		let O = d, k = D, A = w(i(() => {
+			let { label: e, description: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = O;
+			return c;
+		}), k), j = T(), M = n(), N = i(() => O.invalid ?? M?.invalid.value ?? !1), P = i(() => O.id ?? M?.id.value ?? j);
+		M && (M.id.value = P.value);
+		let F = i(() => !!(O.label || O.description)), I = e(), L = i(() => O.unstyled ?? I.unstyled), R = i(() => r({
+			size: O.size,
+			withText: F.value,
+			invalid: N.value
+		})), z = i(() => L.value ? O.ui?.wrapper : R.value.wrapper({ class: O.ui?.wrapper })), B = i(() => L.value ? [O.ui?.root, O.class] : R.value.root({ class: [O.ui?.root, O.class] })), V = i(() => L.value ? O.ui?.indicator : R.value.indicator({ class: O.ui?.indicator })), H = i(() => L.value ? O.ui?.content : R.value.content({ class: O.ui?.content })), U = i(() => L.value ? O.ui?.label : R.value.label({ class: O.ui?.label })), W = i(() => L.value ? O.ui?.description : R.value.description({ class: O.ui?.description }));
+		return (e, n) => F.value ? (m(), s("div", {
 			key: 0,
-			class: f(I.value)
-		}, [l(g(x), d({ id: j.value }, {
-			...g(k),
+			class: p(z.value)
+		}, [u(_(S), f({ id: P.value }, {
+			..._(A),
 			...e.$attrs
 		}, {
-			"aria-describedby": D.description ? `${j.value}-description` : void 0,
-			class: L.value
+			"aria-invalid": N.value || void 0,
+			"aria-describedby": O.description ? `${P.value}-description` : void 0,
+			class: B.value
 		}), {
-			default: _(() => [l(g(b), { class: f(R.value) }, {
-				default: _(() => [m(e.$slots, "default", {}, () => [D.modelValue === "indeterminate" ? (p(), i(t, {
+			default: v(() => [u(_(x), { class: p(V.value) }, {
+				default: v(() => [h(e.$slots, "default", {}, () => [O.modelValue === "indeterminate" ? (m(), a(t, {
 					key: 0,
-					icon: g(v)
-				}, null, 8, ["icon"])) : (p(), i(t, {
+					icon: _(y)
+				}, null, 8, ["icon"])) : (m(), a(t, {
 					key: 1,
-					icon: g(y)
+					icon: _(b)
 				}, null, 8, ["icon"]))])]),
 				_: 3
 			}, 8, ["class"])]),
 			_: 3
 		}, 16, [
 			"id",
+			"aria-invalid",
 			"aria-describedby",
 			"class"
-		]), s("div", { class: f(z.value) }, [l(g(S), {
-			for: j.value,
-			class: f(B.value)
+		]), c("div", { class: p(H.value) }, [u(_(C), {
+			for: P.value,
+			class: p(U.value)
 		}, {
-			default: _(() => [m(e.$slots, "label", {}, () => [c(h(D.label), 1)])]),
+			default: v(() => [h(e.$slots, "label", {}, () => [l(g(O.label), 1)])]),
 			_: 3
-		}, 8, ["for", "class"]), D.description || e.$slots.description ? (p(), o("p", {
+		}, 8, ["for", "class"]), O.description || e.$slots.description ? (m(), s("p", {
 			key: 0,
-			id: `${j.value}-description`,
-			class: f(V.value)
-		}, [m(e.$slots, "description", {}, () => [c(h(D.description), 1)])], 10, T)) : a("", !0)], 2)], 2)) : (p(), i(g(x), d({
+			id: `${P.value}-description`,
+			class: p(W.value)
+		}, [h(e.$slots, "description", {}, () => [l(g(O.description), 1)])], 10, E)) : o("", !0)], 2)], 2)) : (m(), a(_(S), f({
 			key: 1,
-			id: D.id
+			id: P.value
 		}, {
-			...g(k),
+			..._(A),
 			...e.$attrs
-		}, { class: L.value }), {
-			default: _(() => [l(g(b), { class: f(R.value) }, {
-				default: _(() => [m(e.$slots, "default", {}, () => [D.modelValue === "indeterminate" ? (p(), i(t, {
+		}, {
+			"aria-invalid": N.value || void 0,
+			class: B.value
+		}), {
+			default: v(() => [u(_(x), { class: p(V.value) }, {
+				default: v(() => [h(e.$slots, "default", {}, () => [O.modelValue === "indeterminate" ? (m(), a(t, {
 					key: 0,
-					icon: g(v)
-				}, null, 8, ["icon"])) : (p(), i(t, {
+					icon: _(y)
+				}, null, 8, ["icon"])) : (m(), a(t, {
 					key: 1,
-					icon: g(y)
+					icon: _(b)
 				}, null, 8, ["icon"]))])]),
 				_: 3
 			}, 8, ["class"])]),
 			_: 3
-		}, 16, ["id", "class"]));
+		}, 16, [
+			"id",
+			"aria-invalid",
+			"class"
+		]));
 	}
 });
 //#endregion
-export { E as default };
+export { D as default };

package/dist/components/Combobox.vue_vue_type_script_setup_true_lang.js

@@ -167,7 +167,9 @@ var E = /*@__PURE__*/ u({
 				bubbles: !0
 			}));
 		}
-		let q = n(), J = i(() => D.id ?? q?.id.value), Y = i(() => D.invalid ?? q?.invalid.value ?? !1), Oe = e(), X = i(() => D.unstyled ?? Oe.unstyled), Z = i(() => ee({
+		let q = n(), J = i(() => D.id ?? q?.id.value);
+		q && D.id && (q.id.value = D.id);
+		let Y = i(() => D.invalid ?? q?.invalid.value ?? !1), Oe = e(), X = i(() => D.unstyled ?? Oe.unstyled), Z = i(() => ee({
 			size: D.size,
 			chips: H.value,
 			invalid: Y.value,

package/dist/components/CommandPalette.vue_vue_type_script_setup_true_lang.js

@@ -79,7 +79,8 @@ var B = /*@__PURE__*/ h({
 			default: O(() => [m(T(ne), null, {
 				default: O(() => [m(T(te), { class: _($("overlay")) }, null, 8, ["class"]), m(T(ee), {
 					class: _(Z.value ? [B.ui?.content, B.class] : Q.value.content({ class: [B.ui?.content, B.class] })),
-					"aria-label": B.label
+					"aria-label": B.label,
+					"aria-describedby": void 0
 				}, {
 					default: O(() => [
 						m(T(R), null, {

package/dist/components/DateField.vue_vue_type_script_setup_true_lang.js

@@ -37,7 +37,9 @@ var y = /*@__PURE__*/ u({
 	},
 	emits: ["update:modelValue"],
 	setup(u, { emit: y }) {
-		let b = u, x = y, S = r(), C = o(() => b.id ?? S?.id.value), w = o(() => {
+		let b = u, x = y, S = r(), C = o(() => b.id ?? S?.id.value);
+		S && b.id && (S.id.value = b.id);
+		let w = o(() => {
 			let e = b.modelValue;
 			return !e || !t(e) ? !1 : b.minValue && e < b.minValue || b.maxValue && e > b.maxValue ? !0 : b.isUnavailable?.(e) ?? !1;
 		}), T = o(() => (b.invalid ?? S?.invalid.value ?? !1) || w.value), E = e(), D = o(() => b.unstyled ?? E.unstyled), O = o(() => {

package/dist/components/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -52,7 +52,9 @@ var D = [
 	}),
 	emits: ["update:modelValue"],
 	setup(p) {
-		let m = p, k = b(p, "modelValue"), A = _(!1), j = a(), M = s(() => m.id ?? j?.id.value), N = s(() => m.invalid ?? j?.invalid.value ?? !1), P = e(), F = s(() => m.unstyled ?? P.unstyled), I = s(() => n(k.value, m.locale, m.format));
+		let m = p, k = b(p, "modelValue"), A = _(!1), j = a(), M = s(() => m.id ?? j?.id.value);
+		j && m.id && (j.id.value = m.id);
+		let N = s(() => m.invalid ?? j?.invalid.value ?? !1), P = e(), F = s(() => m.unstyled ?? P.unstyled), I = s(() => n(k.value, m.locale, m.format));
 		function L() {
 			k.value = r(), A.value = !1;
 		}

package/dist/components/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { formatIsoDate as n, toCalendarDate as r, toIsoDate as i } from "../composables/date.js";
 import { calendarTheme as ee } from "../theme/calendar.js";
-import { useFormField as a } from "../composables/form.js";
-import { datePickerTheme as o } from "../theme/date-picker.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, shallowRef as x, toDisplayString as S, unref as C, useModel as w, watch as T, withCtx as E } from "vue";
-import { ArrowLeft01Icon as te, ArrowRight01Icon as ne, Calendar03Icon as re } from "@hugeicons/core-free-icons";
+import { useFormField as te } from "../composables/form.js";
+import { datePickerTheme as a } from "../theme/date-picker.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, openBlock as _, ref as v, renderList as y, shallowRef as b, toDisplayString as x, unref as S, useModel as C, watch as w, withCtx as T } from "vue";
+import { ArrowLeft01Icon as E, ArrowRight01Icon as ne, Calendar03Icon as re } from "@hugeicons/core-free-icons";
 import { PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, RangeCalendarCell as j, RangeCalendarCellTrigger as M, RangeCalendarGrid as N, RangeCalendarGridBody as P, RangeCalendarGridHead as F, RangeCalendarGridRow as I, RangeCalendarHeadCell as L, RangeCalendarHeader as R, RangeCalendarHeading as z, RangeCalendarNext as B, RangeCalendarPrev as V, RangeCalendarRoot as ie } from "reka-ui";
 //#region src/components/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
 var H = [
@@ -13,9 +13,9 @@ var H = [
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ h({
+], U = { key: 0 }, W = /*@__PURE__*/ m({
 	__name: "DateRangePicker",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ h({
 		size: {},
 		placeholder: { default: "Pick a date range" },
 		disabled: { type: Boolean },
@@ -54,30 +54,32 @@ var H = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(h) {
-		let g = h, W = w(h, "modelValue"), G = y(!1), K = a(), q = c(() => g.id ?? K?.id.value), J = c(() => g.invalid ?? K?.invalid.value ?? !1), Y = e(), ae = c(() => g.unstyled ?? Y.unstyled), X = x({
+	setup(m) {
+		let h = m, W = C(m, "modelValue"), G = v(!1), K = te(), q = s(() => h.id ?? K?.id.value);
+		K && h.id && (K.id.value = h.id);
+		let J = s(() => h.invalid ?? K?.invalid.value ?? !1), Y = e(), ae = s(() => h.unstyled ?? Y.unstyled), X = b({
 			start: r(W.value?.start),
 			end: r(W.value?.end)
 		});
 		function Z(e) {
 			return i(e.start) === (W.value?.start ?? null) && i(e.end) === (W.value?.end ?? null);
 		}
-		T(W, () => {
+		w(W, () => {
 			Z(X.value) || (X.value = {
 				start: r(W.value?.start),
 				end: r(W.value?.end)
 			});
-		}, { deep: !0 }), T(X, (e) => {
+		}, { deep: !0 }), w(X, (e) => {
 			Z(e) || (W.value = {
 				start: i(e.start),
 				end: i(e.end)
 			});
 		});
-		let oe = c(() => r(g.min)), se = c(() => r(g.max)), Q = c(() => {
-			let e = n(W.value?.start, g.locale, g.format), t = n(W.value?.end, g.locale, g.format);
-			return !e && !t ? "" : t ? `${e}${g.separator}${t}` : e;
+		let oe = s(() => r(h.min)), se = s(() => r(h.max)), Q = s(() => {
+			let e = n(W.value?.start, h.locale, h.format), t = n(W.value?.end, h.locale, h.format);
+			return !e && !t ? "" : t ? `${e}${h.separator}${t}` : e;
 		});
-		T(W, (e) => {
+		w(W, (e) => {
 			G.value && e?.start && e?.end && (G.value = !1);
 		}, { deep: !0 });
 		function ce() {
@@ -86,97 +88,97 @@ var H = [
 				end: null
 			}, G.value = !1;
 		}
-		let le = c(() => ({
-			...o({
-				size: g.size,
+		let le = s(() => ({
+			...a({
+				size: h.size,
 				invalid: J.value
 			}),
 			...ee({ range: !0 })
 		}));
 		function $(e, t) {
-			let n = g.ui?.[e];
+			let n = h.ui?.[e];
 			return ae.value ? [n, t] : le.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (v(), l(C(k), {
+		return (e, n) => (_(), c(S(k), {
 			open: G.value,
 			"onUpdate:open": n[1] ||= (e) => G.value = e
 		}, {
-			default: E(() => [m(C(A), { "as-child": "" }, {
-				default: E(() => [f("button", {
+			default: T(() => [p(S(A), { "as-child": "" }, {
+				default: T(() => [d("button", {
 					id: q.value,
 					type: "button",
-					disabled: g.disabled,
+					disabled: h.disabled,
 					"aria-invalid": J.value || void 0,
-					"aria-describedby": C(K)?.describedBy.value,
-					class: _($("trigger", g.class))
-				}, [Q.value ? (v(), d("span", U, S(Q.value), 1)) : (v(), d("span", {
+					"aria-describedby": S(K)?.describedBy.value,
+					class: g($("trigger", h.class))
+				}, [Q.value ? (_(), u("span", U, x(Q.value), 1)) : (_(), u("span", {
 					key: 1,
-					class: _($("placeholder"))
-				}, S(g.placeholder), 3)), m(t, { icon: C(re) }, null, 8, ["icon"])], 10, H)]),
+					class: g($("placeholder"))
+				}, x(h.placeholder), 3)), p(t, { icon: S(re) }, null, 8, ["icon"])], 10, H)]),
 				_: 1
-			}), m(C(O), null, {
-				default: E(() => [m(C(D), {
-					class: _($("content")),
+			}), p(S(O), null, {
+				default: T(() => [p(S(D), {
+					class: g($("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: E(() => [m(C(ie), {
+					default: T(() => [p(S(ie), {
 						modelValue: X.value,
 						"onUpdate:modelValue": n[0] ||= (e) => X.value = e,
 						"min-value": oe.value,
 						"max-value": se.value,
-						locale: g.locale,
-						"week-starts-on": g.weekStartsOn,
-						"number-of-months": g.months,
+						locale: h.locale,
+						"week-starts-on": h.weekStartsOn,
+						"number-of-months": h.months,
 						"fixed-weeks": "",
 						"initial-focus": ""
 					}, {
-						default: E(({ grid: e, weekDays: n }) => [m(C(R), { class: _($("header")) }, {
-							default: E(() => [
-								m(C(V), {
-									"aria-label": g.previousLabel,
-									class: _($("nav"))
+						default: T(({ grid: e, weekDays: n }) => [p(S(R), { class: g($("header")) }, {
+							default: T(() => [
+								p(S(V), {
+									"aria-label": h.previousLabel,
+									class: g($("nav"))
 								}, {
-									default: E(() => [m(t, { icon: C(te) }, null, 8, ["icon"])]),
+									default: T(() => [p(t, { icon: S(E) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"]),
-								m(C(z), { class: _($("heading")) }, null, 8, ["class"]),
-								m(C(B), {
-									"aria-label": g.nextLabel,
-									class: _($("nav"))
+								p(S(z), { class: g($("heading")) }, null, 8, ["class"]),
+								p(S(B), {
+									"aria-label": h.nextLabel,
+									class: g($("nav"))
 								}, {
-									default: E(() => [m(t, { icon: C(ne) }, null, 8, ["icon"])]),
+									default: T(() => [p(t, { icon: S(ne) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"])
 							]),
 							_: 1
-						}, 8, ["class"]), f("div", { class: _($("months")) }, [(v(!0), d(s, null, b(e, (e) => (v(), l(C(N), {
+						}, 8, ["class"]), d("div", { class: g($("months")) }, [(_(!0), u(o, null, y(e, (e) => (_(), c(S(N), {
 							key: e.value.toString(),
-							class: _($("grid"))
+							class: g($("grid"))
 						}, {
-							default: E(() => [m(C(F), null, {
-								default: E(() => [m(C(I), null, {
-									default: E(() => [(v(!0), d(s, null, b(n, (e) => (v(), l(C(L), {
+							default: T(() => [p(S(F), null, {
+								default: T(() => [p(S(I), null, {
+									default: T(() => [(_(!0), u(o, null, y(n, (e) => (_(), c(S(L), {
 										key: e,
-										class: _($("headCell"))
+										class: g($("headCell"))
 									}, {
-										default: E(() => [p(S(e), 1)]),
+										default: T(() => [f(x(e), 1)]),
 										_: 2
 									}, 1032, ["class"]))), 128))]),
 									_: 2
 								}, 1024)]),
 								_: 2
-							}, 1024), m(C(P), null, {
-								default: E(() => [(v(!0), d(s, null, b(e.rows, (t, n) => (v(), l(C(I), { key: `week-${n}` }, {
-									default: E(() => [(v(!0), d(s, null, b(t, (t) => (v(), l(C(j), {
+							}, 1024), p(S(P), null, {
+								default: T(() => [(_(!0), u(o, null, y(e.rows, (t, n) => (_(), c(S(I), { key: `week-${n}` }, {
+									default: T(() => [(_(!0), u(o, null, y(t, (t) => (_(), c(S(j), {
 										key: t.toString(),
 										date: t,
-										class: _($("cell"))
+										class: g($("cell"))
 									}, {
-										default: E(() => [m(C(M), {
+										default: T(() => [p(S(M), {
 											day: t,
 											month: e.value,
-											class: _($("cellTrigger"))
+											class: g($("cellTrigger"))
 										}, null, 8, [
 											"day",
 											"month",
@@ -198,14 +200,14 @@ var H = [
 						"locale",
 						"week-starts-on",
 						"number-of-months"
-					]), g.clearable ? (v(), d("div", {
+					]), h.clearable ? (_(), u("div", {
 						key: 0,
-						class: _($("footer"))
-					}, [f("button", {
+						class: g($("footer"))
+					}, [d("button", {
 						type: "button",
-						class: _($("action")),
+						class: g($("action")),
 						onClick: ce
-					}, S(g.clearLabel), 3)], 2)) : u("", !0)]),
+					}, x(h.clearLabel), 3)], 2)) : l("", !0)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1

package/dist/components/Editable.vue_vue_type_script_setup_true_lang.js

@@ -48,7 +48,9 @@ var E = /*@__PURE__*/ u({
 	},
 	emits: ["update:modelValue", "submit"],
 	setup(u, { emit: E }) {
-		let D = u, O = E, k = n(), A = a(() => D.id ?? k?.id.value), j = a(() => D.invalid ?? k?.invalid.value ?? !1), M = e(), N = a(() => D.unstyled ?? M.unstyled), P = a(() => r({
+		let D = u, O = E, k = n(), A = a(() => D.id ?? k?.id.value);
+		k && D.id && (k.id.value = D.id);
+		let j = a(() => D.invalid ?? k?.invalid.value ?? !1), M = e(), N = a(() => D.unstyled ?? M.unstyled), P = a(() => r({
 			size: D.size,
 			invalid: j.value
 		}));
@@ -83,7 +85,10 @@ var E = /*@__PURE__*/ u({
 						isEmpty: r
 					})]),
 					_: 2
-				}, 1032, ["class"]), l(m(S), { class: d(F("input")) }, null, 8, ["class"])]),
+				}, 1032, ["class"]), l(m(S), {
+					id: A.value,
+					class: d(F("input"))
+				}, null, 8, ["id", "class"])]),
 				_: 2
 			}, 1032, ["class"]), D.controls ? (f(), c(i, { key: 0 }, [n ? (f(), c(i, { key: 1 }, [l(m(T), {
 				"aria-label": D.submitLabel,

package/dist/components/FileUpload.vue_vue_type_script_setup_true_lang.js

@@ -54,7 +54,9 @@ var D = [
 	}),
 	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), F = o(() => A.invalid ?? N?.invalid.value ?? !1), I = e(), L = o(() => A.unstyled ?? I.unstyled), R = g([]);
+		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;
 			let t = e.name.toLowerCase(), n = e.type.toLowerCase();

package/dist/components/FormField.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@ import { useIryxUiConfig as e } from "../config.js";
 import { formFieldContextKey as t, getByPath as n, useForm as r } from "../composables/form.js";
 import { formFieldTheme as i } from "../theme/form.js";
 import a from "./Label.js";
-import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, provide as m, renderSlot as h, toDisplayString as g, unref as _, watch as v, withCtx as y } from "vue";
-import { useId as b } from "reka-ui";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, provide as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
+import { useId as x } from "reka-ui";
 //#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
-var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__*/ d({
+var S = ["data-iryx-field"], C = ["id"], w = ["id"], T = ["id"], E = /*@__PURE__*/ d({
 	__name: "FormField",
 	props: {
 		name: {},
@@ -28,73 +28,76 @@ var x = ["data-iryx-field"], S = ["id"], C = ["id"], w = ["id"], T = /*@__PURE__
 		ui: {}
 	},
 	setup(d) {
-		let T = d, E = r(), D = b(), O = o(() => T.error ?? E?.errorFor(T.name)), k = o(() => {
+		let E = d, D = r(), O = x(), k = h(O), A = o(() => E.error ?? D?.errorFor(E.name)), j = o(() => {
 			let e = [];
-			return T.description && e.push(`${D}-description`), O.value ? e.push(`${D}-error`) : T.help && e.push(`${D}-help`), e.length ? e.join(" ") : void 0;
+			return E.description && e.push(`${O}-description`), A.value ? e.push(`${O}-error`) : E.help && e.push(`${O}-help`), e.length ? e.join(" ") : void 0;
 		});
-		v(() => T.name && E ? n(E.state.value, T.name) : void 0, () => {
-			if (!T.name || !E) return;
-			let e = E.validateOn.value;
-			(e.includes("change") || e.includes("input")) && E.validateField(T.name);
+		y(() => E.name && D ? n(D.state.value, E.name) : void 0, () => {
+			if (!E.name || !D) return;
+			let e = D.validateOn.value;
+			(e.includes("change") || e.includes("input")) && D.validateField(E.name);
 		});
-		function A() {
-			!T.name || !E || E.validateOn.value.includes("blur") && E.validateField(T.name);
+		function M() {
+			!E.name || !D || D.validateOn.value.includes("blur") && D.validateField(E.name);
 		}
-		let j = e(), M = o(() => T.unstyled ?? j.unstyled), N = i();
-		function P(e, t) {
-			return M.value ? t : N[e]({ class: t });
+		let N = e(), P = o(() => E.unstyled ?? N.unstyled), F = i();
+		function I(e, t) {
+			return P.value ? t : F[e]({ class: t });
 		}
 		return m(t, {
-			id: o(() => D),
-			name: o(() => T.name),
-			invalid: o(() => !!O.value),
-			describedBy: k
+			id: k,
+			labelId: o(() => E.label ? `${O}-label` : void 0),
+			name: o(() => E.name),
+			invalid: o(() => !!A.value),
+			describedBy: j
 		}), (e, t) => (p(), l("div", {
-			"data-iryx-field": T.name,
-			class: f(M.value ? T.class : _(N).root({ class: [T.ui?.root, T.class] })),
-			onFocusout: A
+			"data-iryx-field": E.name,
+			class: f(P.value ? E.class : v(F).root({ class: [E.ui?.root, E.class] })),
+			onFocusout: M
 		}, [
-			T.label || T.hint || e.$slots.hint ? (p(), l("div", {
+			E.label || E.hint || e.$slots.hint ? (p(), l("div", {
 				key: 0,
-				class: f(P("header", T.ui?.header))
-			}, [T.label ? (p(), s(a, {
+				class: f(I("header", E.ui?.header))
+			}, [E.label ? (p(), s(a, {
 				key: 0,
-				for: _(D),
-				required: T.required,
-				class: f(T.ui?.label)
+				id: `${v(O)}-label`,
+				for: k.value,
+				required: E.required,
+				class: f(E.ui?.label)
 			}, {
-				default: y(() => [u(g(T.label), 1)]),
+				default: b(() => [u(_(E.label), 1)]),
 				_: 1
 			}, 8, [
+				"id",
 				"for",
 				"required",
 				"class"
-			])) : c("", !0), T.hint || e.$slots.hint ? (p(), l("span", {
+			])) : c("", !0), E.hint || e.$slots.hint ? (p(), l("span", {
 				key: 1,
-				class: f(P("hint", T.ui?.hint))
-			}, [h(e.$slots, "hint", {}, () => [u(g(T.hint), 1)])], 2)) : c("", !0)], 2)) : c("", !0),
-			T.description ? (p(), l("p", {
+				class: f(I("hint", E.ui?.hint))
+			}, [g(e.$slots, "hint", {}, () => [u(_(E.hint), 1)])], 2)) : c("", !0)], 2)) : c("", !0),
+			E.description ? (p(), l("p", {
 				key: 1,
-				id: `${_(D)}-description`,
-				class: f(P("description", T.ui?.description))
-			}, g(T.description), 11, S)) : c("", !0),
-			h(e.$slots, "default", {
-				id: _(D),
-				error: O.value
+				id: `${v(O)}-description`,
+				class: f(I("description", E.ui?.description))
+			}, _(E.description), 11, C)) : c("", !0),
+			g(e.$slots, "default", {
+				id: v(O),
+				error: A.value
 			}),
-			O.value ? (p(), l("p", {
+			A.value ? (p(), l("p", {
 				key: 2,
-				id: `${_(D)}-error`,
+				id: `${v(O)}-error`,
 				role: "alert",
 				"aria-live": "polite",
-				class: f(P("error", T.ui?.error))
-			}, g(O.value), 11, C)) : T.help ? (p(), l("p", {
+				class: f(I("error", E.ui?.error))
+			}, _(A.value), 11, w)) : E.help ? (p(), l("p", {
 				key: 3,
-				id: `${_(D)}-help`,
-				class: f(P("help", T.ui?.help))
-			}, g(T.help), 11, w)) : c("", !0)
-		], 42, x));
+				id: `${v(O)}-help`,
+				class: f(I("help", E.ui?.help))
+			}, _(E.help), 11, T)) : c("", !0)
+		], 42, S));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };