@bridge-ui/vue 0.7.0 → 0.8.0

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts

@@ -437,7 +437,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -462,6 +462,8 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -686,7 +688,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, "class", {
         value: string;
         readonly: boolean;
         onFocus: (event: FocusEvent) => void;
@@ -705,7 +707,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
     showFooter: import('vue').ComputedRef<boolean>;
     orientation: import('vue').ComputedRef<import('@bridge-ui/core/Domain').RangePickerOrientation>;
     pickerClass: import('vue').ComputedRef<string | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "editable" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "clearable" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "disableTimes" | "maxTime" | "minTime">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts

@@ -9,7 +9,7 @@ type DateTimeRangePickerMerged = MergeLibDefaults<DateTimeRangePickerOwnProps, D
  */
 export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeRangePickerOwnProps>, libDefaults: DateTimeRangePickerLibDefaults, emit: SetupContext<DateTimeRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimeRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "disableTimes" | "maxTime" | "minTime">>>>;
     timeBind: import('vue').ComputedRef<string>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;

package/dist/Components/FormControl/composables/useFormControl.d.ts

@@ -11,8 +11,10 @@ type FormControlMerged = MergeLibDefaults<FormControlOwnProps, FormControlLibDef
 export type FormControlOptions = {
     /**
      * Public registry key that owns FormControl chrome defaults/tokens.
+     * Defaults to `FormControl`; Checkbox / Radio / Switch pass their own key
+     * so chrome cascades (`FormControl` → parent).
      */
-    componentName?: "Radio" | "Switch" | "Checkbox";
+    componentName?: "Radio" | "Switch" | "Checkbox" | "FormControl";
 };
 export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlOwnProps, "field">>, libDefaults: FormControlLibDefaults, options?: FormControlOptions): {
     slots: Readonly<{

package/dist/Components/FormControl/composables/useFormControl.js

@@ -27,76 +27,77 @@ function g(g, _, v = {}) {
 			...x,
 			...o(g)
 		}
-	})), { merged: C, entry: w } = r({
+	})), { merged: C, entry: w, chromeEntry: T } = r({
 		libDefaults: _,
-		componentName: v.componentName,
+		componentName: v.componentName ?? "FormControl",
 		props: () => S.value.componentProps
-	}), T = a(() => C.value.customProps), E = i({
+	}), E = a(() => C.value.customProps), D = i({
 		entry: w,
+		chromeEntry: T,
 		props: () => S.value.componentProps
-	}), D = a(() => C.value.error === !0), O = a(() => !!C.value.disabled), k = a(() => !!C.value.readonly), A = a(() => {
+	}), O = a(() => C.value.error === !0), k = a(() => !!C.value.disabled), A = a(() => !!C.value.readonly), j = a(() => {
 		let e = S.value.inheritedAttrs.id;
 		return C.value.controlId ?? e ?? y;
-	}), j = a(() => !C.value.hideErrorMessage), M = a(() => D.value && e(b, "errorMessage", C.value.errorMessage)), N = a(() => {
+	}), M = a(() => !C.value.hideErrorMessage), N = a(() => O.value && e(b, "errorMessage", C.value.errorMessage)), P = a(() => {
 		let t = [];
-		return !D.value && e(b, "description", C.value.description) && t.push(`${A.value}-description`), D.value && j.value && e(b, "errorMessage", C.value.errorMessage) && t.push(`${A.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), P = a(() => u(f, C.value.size ?? "md")), F = a(() => n(T.value?.root, d(S.value.inheritedAttrs, ["class"]), p({
+		return !O.value && e(b, "description", C.value.description) && t.push(`${j.value}-description`), O.value && M.value && e(b, "errorMessage", C.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
+	}), F = a(() => u(f, C.value.size ?? "md")), I = a(() => n(E.value?.root, d(S.value.inheritedAttrs, ["class"]), p({
 		"group/form-control relative w-full": !0,
 		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60 aria-disabled:cursor-not-allowed": !0,
 		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[E.value.root ?? ""]: !0,
+		[D.value.root ?? ""]: !0,
 		[x.class]: !!x.class
-	}))), I = a(() => n(T.value?.row, {}, p({
+	}))), L = a(() => n(E.value?.row, {}, p({
 		"flex flex-row items-center gap-x-2": !0,
-		[E.value.row ?? ""]: !0
-	}))), L = a(() => {
-		let e = (e) => t(T.value?.[e], {
-			for: A.value,
+		[D.value.row ?? ""]: !0
+	}))), R = a(() => {
+		let e = (e) => t(E.value?.[e], {
+			for: j.value,
 			size: C.value.size,
-			error: D.value,
+			error: O.value,
 			required: C.value.required,
 			classes: { root: p({
 				"cursor-pointer": !0,
-				[E.value[e] ?? ""]: !0
+				[D.value[e] ?? ""]: !0
 			}) }
 		});
 		return {
 			endLabel: e("endLabel"),
 			startLabel: e("startLabel")
 		};
-	}), R = a(() => n(T.value?.description, { id: `${A.value}-description` }, p({
+	}), z = a(() => n(E.value?.description, { id: `${j.value}-description` }, p({
 		"mt-2 text-dark-500 dark:text-dark-400": !0,
-		[P.value ?? ""]: !0,
-		[E.value.description ?? ""]: !0
-	}))), z = a(() => n(T.value?.errorMessage, { id: `${A.value}-error` }, p({
+		[F.value ?? ""]: !0,
+		[D.value.description ?? ""]: !0
+	}))), B = a(() => n(E.value?.errorMessage, { id: `${j.value}-error` }, p({
 		"mt-2": !0,
-		"min-h-[1lh]": j.value,
+		"min-h-[1lh]": M.value,
 		"text-error-600 dark:text-error-400": !0,
-		[P.value ?? ""]: !0,
-		[E.value.errorMessage ?? ""]: !0
+		[F.value ?? ""]: !0,
+		[D.value.errorMessage ?? ""]: !0
 	})));
 	return {
 		slots: b,
 		merged: C,
-		rowBind: I,
-		rootBind: F,
-		controlId: A,
-		isDisabled: O,
-		isReadonly: k,
+		rowBind: L,
+		rootBind: I,
+		controlId: j,
+		isDisabled: k,
+		isReadonly: A,
 		controlBind: a(() => ({
-			id: A.value,
-			disabled: O.value,
-			readonly: k.value,
-			"aria-describedby": N.value,
+			id: j.value,
+			disabled: k.value,
+			readonly: A.value,
+			"aria-describedby": P.value,
 			required: C.value.required || void 0,
-			"aria-invalid": D.value || void 0
+			"aria-invalid": O.value || void 0
 		})),
-		invalidated: D,
-		fieldLabelProps: L,
-		descriptionBind: R,
-		errorMessageBind: z,
-		showErrorMessageContent: M,
-		reservesErrorMessageSpace: j
+		invalidated: O,
+		fieldLabelProps: R,
+		descriptionBind: z,
+		errorMessageBind: B,
+		showErrorMessageContent: N,
+		reservesErrorMessageSpace: M
 	};
 }
 //#endregion

package/dist/Components/FormField/FilledFormField.vue_vue_type_script_setup_true_lang.js

@@ -35,11 +35,11 @@ var C = [
 					size: p.api.merged.value.size
 				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
 			], 16),
-			!p.api.invalidated.value && b(t)(b(E), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
-			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
+			p.api.showDescriptionContent.value ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			p.api.showErrorMessageRow.value ? (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
 				id: `${p.api.controlId.value}-error`,
 				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
-			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T)) : s("", !0)
 		], 16, C));
 	}
 });

package/dist/Components/FormField/NotchedFormField.vue_vue_type_script_setup_true_lang.js

@@ -1,46 +1,46 @@
-import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "../Icon/Icon.js";
-import i from "./FormFieldCorner.js";
-import a from "./FormFieldLabel.js";
-import { Fragment as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
+import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import r from "./FormFieldCorner.js";
+import i from "./FormFieldLabel.js";
+import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
 //#region src/Components/FormField/NotchedFormField.vue?vue&type=script&setup=true&lang.ts
-var C = [
+var S = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], w = { class: "flex min-h-0 w-full flex-1 items-stretch gap-x-2" }, T = ["id"], E = ["id", "aria-hidden"], D = /*@__PURE__*/ p({
+], C = { class: "flex min-h-0 w-full flex-1 items-stretch gap-x-2" }, w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ f({
 	__name: "NotchedFormField",
 	props: { api: {} },
-	setup(p) {
-		let D = x();
-		return (x, O) => (_(), c("div", h(p.api.rootBind.value, {
-			"data-invalid": p.api.invalidated.value || void 0,
-			"aria-disabled": p.api.isDisabled.value || void 0,
-			"aria-readonly": p.api.isReadonly.value || void 0
+	setup(f) {
+		let E = b();
+		return (b, D) => (g(), s("div", m(f.api.rootBind.value, {
+			"data-invalid": f.api.invalidated.value || void 0,
+			"aria-disabled": f.api.isDisabled.value || void 0,
+			"aria-readonly": f.api.isReadonly.value || void 0
 		}), [
-			l("div", g(m(p.api.containerBind.value)), [p.api.hasInsetLabelRow.value ? (_(), c("div", g(h({ key: 0 }, p.api.insetLabelRowBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(D), "label") ? {
+			c("div", h(p(f.api.containerBind.value)), [f.api.hasInsetLabelRow.value ? (g(), s("div", h(m({ key: 0 }, f.api.insetLabelRowBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(E), "label") ? {
 				name: "label",
-				fn: S(() => [v(x.$slots, "label")]),
+				fn: x(() => [_(b.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(D), "corner") ? {
+			} : void 0]), 1032, ["api"]), d(r, { api: f.api }, l({ _: 2 }, [y(e)(y(E), "corner") ? {
 				name: "corner",
-				fn: S(() => [v(x.$slots, "corner")]),
+				fn: x(() => [_(b.$slots, "corner")]),
 				key: "0"
-			} : void 0]), 1032, ["api"])], 16)) : s("", !0), l("div", w, [
-				b(e)(b(D), "start") ? (_(), c("div", g(h({ key: 0 }, p.api.startSlotBind.value)), [v(x.$slots, "start")], 16)) : b(n)(p.api.merged.value.start) ? (_(), c("div", g(h({ key: 1 }, p.api.startBind.value)), y(p.api.merged.value.start), 17)) : p.api.merged.value.startIcon ? (_(), c("div", g(h({ key: 2 }, p.api.startBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.startIconBind.value, { icon: p.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0),
-				v(x.$slots, "default"),
-				b(e)(b(D), "end") ? (_(), c("div", g(h({ key: 3 }, p.api.endSlotBind.value)), [v(x.$slots, "end")], 16)) : b(n)(p.api.merged.value.end) ? (_(), c("div", g(h({ key: 4 }, p.api.endBind.value)), y(p.api.merged.value.end), 17)) : p.api.invalidated.value && p.api.merged.value.showErrorIcon !== !1 ? (_(), c("div", g(h({ key: 5 }, p.api.endBind.value)), [f(b(r), h({
-					icon: p.api.errorIcon.value,
-					size: p.api.merged.value.size
-				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
+			} : void 0]), 1032, ["api"])], 16)) : o("", !0), c("div", C, [
+				y(e)(y(E), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : y(t)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 2 }, f.api.startBind.value)), [d(y(n), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
+				_(b.$slots, "default"),
+				y(e)(y(E), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(t)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 5 }, f.api.endBind.value)), [d(y(n), m({
+					icon: f.api.errorIcon.value,
+					size: f.api.merged.value.size
+				}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 6 }, f.api.endBind.value)), [d(y(n), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
 			])], 16),
-			!p.api.invalidated.value && b(t)(b(D), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 0 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(D), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, T)) : s("", !0),
-			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 1 }, p.api.errorBind.value, {
-				id: `${p.api.controlId.value}-error`,
-				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
-			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(D), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, E))
-		], 16, C));
+			f.api.showDescriptionContent.value ? (g(), s("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(E), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(t)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, w)) : o("", !0),
+			f.api.showErrorMessageRow.value ? (g(), s("p", m({ key: 1 }, f.api.errorBind.value, {
+				id: `${f.api.controlId.value}-error`,
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
+			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(E), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(t)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, T)) : o("", !0)
+		], 16, S));
 	}
 });
 //#endregion
-export { D as default };
+export { E as default };

package/dist/Components/FormField/OutlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -35,11 +35,11 @@ var C = [
 					size: p.api.merged.value.size
 				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
 			], 16),
-			!p.api.invalidated.value && b(t)(b(E), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
-			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
+			p.api.showDescriptionContent.value ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			p.api.showErrorMessageRow.value ? (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
 				id: `${p.api.controlId.value}-error`,
 				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
-			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T)) : s("", !0)
 		], 16, C));
 	}
 });

package/dist/Components/FormField/StackedFormField.vue_vue_type_script_setup_true_lang.js

@@ -1,50 +1,50 @@
-import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "../Icon/Icon.js";
-import i from "./FormFieldCorner.js";
-import a from "./FormFieldLabel.js";
-import { Fragment as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
+import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import r from "./FormFieldCorner.js";
+import i from "./FormFieldLabel.js";
+import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
 //#region src/Components/FormField/StackedFormField.vue?vue&type=script&setup=true&lang.ts
-var C = [
+var S = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ p({
+], C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
 	__name: "StackedFormField",
 	props: { api: {} },
-	setup(p) {
-		let E = x();
-		return (x, D) => (_(), c("div", h(p.api.rootBind.value, {
-			"data-invalid": p.api.invalidated.value || void 0,
-			"aria-disabled": p.api.isDisabled.value || void 0,
-			"aria-readonly": p.api.isReadonly.value || void 0
+	setup(f) {
+		let T = b();
+		return (b, E) => (g(), s("div", m(f.api.rootBind.value, {
+			"data-invalid": f.api.invalidated.value || void 0,
+			"aria-disabled": f.api.isDisabled.value || void 0,
+			"aria-readonly": f.api.isReadonly.value || void 0
 		}), [
-			l("div", g(m(p.api.containerBind.value)), [
-				b(e)(b(E), "start") ? (_(), c("div", g(h({ key: 0 }, p.api.startSlotBind.value)), [v(x.$slots, "start")], 16)) : s("", !0),
-				l("div", g(m(p.api.stackedBodyBind.value)), [p.api.hasInsetLabelRow.value ? (_(), c("div", g(h({ key: 0 }, p.api.insetLabelRowBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "label") ? {
+			c("div", h(p(f.api.containerBind.value)), [
+				y(e)(y(T), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : o("", !0),
+				c("div", h(p(f.api.stackedBodyBind.value)), [f.api.hasInsetLabelRow.value ? (g(), s("div", h(m({ key: 0 }, f.api.insetLabelRowBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "label") ? {
 					name: "label",
-					fn: S(() => [v(x.$slots, "label")]),
+					fn: x(() => [_(b.$slots, "label")]),
 					key: "0"
-				} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "corner") ? {
+				} : void 0]), 1032, ["api"]), d(r, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "corner") ? {
 					name: "corner",
-					fn: S(() => [v(x.$slots, "corner")]),
+					fn: x(() => [_(b.$slots, "corner")]),
 					key: "0"
-				} : void 0]), 1032, ["api"])], 16)) : s("", !0), l("div", g(m(p.api.stackedInputRowBind.value)), [
-					b(n)(p.api.merged.value.start) ? (_(), c("div", g(h({ key: 0 }, p.api.startBind.value)), y(p.api.merged.value.start), 17)) : p.api.merged.value.startIcon ? (_(), c("div", g(h({ key: 1 }, p.api.startBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.startIconBind.value, { icon: p.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0),
-					v(x.$slots, "default"),
-					b(n)(p.api.merged.value.end) ? (_(), c("div", g(h({ key: 2 }, p.api.endBind.value)), y(p.api.merged.value.end), 17)) : p.api.invalidated.value && p.api.merged.value.showErrorIcon !== !1 ? (_(), c("div", g(h({ key: 3 }, p.api.endBind.value)), [f(b(r), h({
-						icon: p.api.errorIcon.value,
-						size: p.api.merged.value.size
-					}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 4 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
+				} : void 0]), 1032, ["api"])], 16)) : o("", !0), c("div", h(p(f.api.stackedInputRowBind.value)), [
+					y(t)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 0 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), [d(y(n), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
+					_(b.$slots, "default"),
+					y(t)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 2 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 3 }, f.api.endBind.value)), [d(y(n), m({
+						icon: f.api.errorIcon.value,
+						size: f.api.merged.value.size
+					}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), [d(y(n), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
 				], 16)], 16),
-				b(e)(b(E), "end") ? (_(), c("div", g(h({ key: 1 }, p.api.endSlotBind.value)), [v(x.$slots, "end")], 16)) : s("", !0)
+				y(e)(y(T), "end") ? (g(), s("div", h(m({ key: 1 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : o("", !0)
 			], 16),
-			!p.api.invalidated.value && b(t)(b(E), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 0 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
-			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 1 }, p.api.errorBind.value, {
-				id: `${p.api.controlId.value}-error`,
-				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
-			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
-		], 16, C));
+			f.api.showDescriptionContent.value ? (g(), s("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(T), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(t)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, C)) : o("", !0),
+			f.api.showErrorMessageRow.value ? (g(), s("p", m({ key: 1 }, f.api.errorBind.value, {
+				id: `${f.api.controlId.value}-error`,
+				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
+			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(T), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(t)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, w)) : o("", !0)
+		], 16, S));
 	}
 });
 //#endregion
-export { E as default };
+export { T as default };

package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -35,11 +35,11 @@ var C = [
 					size: p.api.merged.value.size
 				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
 			], 16),
-			!p.api.invalidated.value && b(t)(b(E), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
-			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
+			p.api.showDescriptionContent.value ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			p.api.showErrorMessageRow.value ? (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
 				id: `${p.api.controlId.value}-error`,
 				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
-			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T)) : s("", !0)
 		], 16, C));
 	}
 });

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -6,8 +6,10 @@ export type FormFieldReservedSlotName = Exclude<keyof FormFieldSlots, "default">
 export type FormFieldOptions = {
     /**
      * Public registry key that owns FormField chrome defaults/tokens.
+     * Defaults to `FormField`; public fields pass their own key so chrome
+     * cascades (`FormField` → `TextField`, …).
      */
-    componentName?: "Select" | "Textarea" | "DateField" | "TextField" | "TimeField" | "ColorField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
+    componentName?: "Select" | "Textarea" | "DateField" | "FormField" | "TextField" | "TimeField" | "ColorField" | "NumberField" | "Autocomplete" | "DateTimeField" | "PasswordField" | "DateRangeField" | "TimeRangeField" | "DateTimeRangeField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *
@@ -24,7 +26,7 @@ export type FormFieldOptions = {
      */
     reservedSlots?: () => undefined | readonly FormFieldReservedSlotName[];
 };
-export declare const formFieldBridgeKeys: readonly ["end", "size", "color", "error", "label", "start", "corner", "classes", "endIcon", "rounded", "variant", "disabled", "readonly", "required", "errorIcon", "startIcon", "customProps", "description", "errorMessage", "showErrorIcon", "hideErrorMessage"];
+export declare const formFieldBridgeKeys: readonly ["end", "size", "color", "error", "label", "start", "corner", "classes", "endIcon", "rounded", "variant", "disabled", "readonly", "required", "errorIcon", "startIcon", "customProps", "description", "errorMessage", "showErrorIcon", "hideErrorMessage", "showDescriptionOnError"];
 type FormFieldLibDefaults = LibDefaultsShape<FormFieldOwnProps, "size" | "color" | "rounded" | "variant" | "errorIcon" | "showErrorIcon">;
 type FormFieldMerged = MergeLibDefaults<FormFieldOwnProps, FormFieldLibDefaults>;
 export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnProps, "field">>, libDefaults: FormFieldLibDefaults, options?: FormFieldOptions): {
@@ -447,7 +449,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>>;
     isNotched: import('vue').ComputedRef<boolean>;
     isStacked: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
@@ -472,6 +474,8 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     hasInsetLabelRow: import('vue').ComputedRef<boolean>;
     insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+    showErrorMessageRow: import('vue').ComputedRef<boolean>;
+    showDescriptionContent: import('vue').ComputedRef<boolean>;
     showErrorMessageContent: import('vue').ComputedRef<boolean>;
     reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
 };