iryx-ui 0.18.1 → 0.18.3

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

@@ -60,8 +60,8 @@ declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {
     unstyled: boolean;
     as: string;
     scroll: "main" | "page";
-    sidebarPosition: "left" | "right";
     mobileNav: boolean;
+    sidebarPosition: "left" | "right";
     navLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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/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/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 };

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,7 @@ 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), 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 +81,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/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

@@ -19,6 +19,10 @@ export interface SelectProps extends SelectRootProps {
     items?: SelectItems;
     placeholder?: string;
     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;
@@ -43,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;