@bridge-ui/vue 0.7.0 → 0.8.0

package/ai/skills/bridge-ui-forms/SKILL.md

@@ -45,4 +45,4 @@ Controlled fields: **`v-model` / `modelValue`**. Never React `value`/`onChange`.
 1. Map validation to `error`, `error-message`, `description`, `disabled`, `readOnly`.
 2. Native input attrs often go through `:custom-props` → `input` — see TextField docs.
 3. Use only documented option shapes for Select/Autocomplete.
-4. Prefer public fields/controls in apps. `FormField`, `FormControl`, and `BaseField` are exported building blocks for advanced composition — they are **not** registry keys. Theme via the public parent (`components.TextField`, `tokens.baseField`, `tokens.formControl`). Dropdown tokens live on `components.Listbox`. Shared form density: `global.formDefaults: { size, rounded }` (Radio/Switch ignore `rounded`).
+4. Prefer public fields/controls in apps. `FormField`, `FormControl`, and `BaseField` are exported building blocks for advanced composition. Theme shared chrome via `components.FormField` / `FormControl` / `BaseField` (a public entry such as `components.TextField` still overrides `defaultProps`). Chrome tokens live on those shared keys. Dropdown tokens live on `components.Listbox`. Time overlay chrome: `components.TimePanel` (`TimePicker` / `TimeRangePicker` override). Shared form density: `global.formDefaults: { size, rounded }` (Radio/Switch/BaseField/FormControl ignore `rounded`).

package/dist/Components/Alert/Alert.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
-import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "../Icon/Icon.js";
-import { useAlert as i } from "./composables/useAlert.js";
-import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v } from "vue";
+import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import { useAlert as r } from "./composables/useAlert.js";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _ } from "vue";
 //#region src/Components/Alert/Alert.vue?vue&type=script&setup=true&lang.ts
-var y = {
+var v = {
 	key: 1,
 	class: "flex justify-between items-start"
-}, b = { class: "flex items-start gap-x-3" }, x = /*@__PURE__*/ d({
+}, y = { class: "flex items-start gap-x-3" }, b = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Alert",
 	props: {
@@ -20,20 +20,20 @@ var y = {
 		title: {},
 		variant: {}
 	},
-	setup(d) {
-		let { slots: x, merged: S, bodyBind: C, iconBind: w, rootBind: T, titleBind: E, resolvedIcon: D, hasDefaultBody: O } = i(d, {
+	setup(u) {
+		let { slots: b, merged: x, bodyBind: S, iconBind: C, rootBind: w, hasTitle: T, titleBind: E, resolvedIcon: D, hasDefaultBody: O } = r(u, {
 			shadow: "sm",
 			rounded: "sm",
 			variant: "flat",
 			color: "primary",
 			padding: "medium"
 		});
-		return (i, d) => (h(), c("div", m(f(v(T))), [
-			v(e)(v(x), "header") ? g(i.$slots, "header", {}, void 0, void 0, 0) : v(t)(v(x), "title", v(S).title) ? (h(), c("div", y, [l("div", b, [v(e)(v(x), "icon") ? g(i.$slots, "icon", {}, void 0, void 0, 0) : v(D) ? (h(), o(r, p({ key: 1 }, v(w), { icon: v(D) }), null, 16, ["icon"])) : s("", !0), l("div", m(f(v(E))), [v(e)(v(x), "title") ? g(i.$slots, "title", {}, void 0, void 0, 0) : v(n)(v(S).title) ? (h(), c(a, { key: 1 }, [u(_(v(S).title), 1)], 64)) : s("", !0)], 16)]), g(i.$slots, "action")])) : s("", !0),
-			v(O) ? (h(), c("div", m(p({ key: 2 }, v(C))), [g(i.$slots, "default")], 16)) : s("", !0),
-			g(i.$slots, "footer")
+		return (r, u) => (m(), s("div", p(d(_(w))), [
+			_(e)(_(b), "header") ? h(r.$slots, "header", {}, void 0, void 0, 0) : _(T) ? (m(), s("div", v, [c("div", y, [_(e)(_(b), "icon") ? h(r.$slots, "icon", {}, void 0, void 0, 0) : _(D) ? (m(), a(n, f({ key: 1 }, _(C), { icon: _(D) }), null, 16, ["icon"])) : o("", !0), c("div", p(d(_(E))), [_(e)(_(b), "title") ? h(r.$slots, "title", {}, void 0, void 0, 0) : _(t)(_(x).title) ? (m(), s(i, { key: 1 }, [l(g(_(x).title), 1)], 64)) : h(r.$slots, "default", {}, void 0, void 0, 2)], 16)]), h(r.$slots, "action")])) : o("", !0),
+			_(O) ? (m(), s("div", p(f({ key: 2 }, _(S))), [h(r.$slots, "default")], 16)) : o("", !0),
+			h(r.$slots, "footer")
 		], 16));
 	}
 });
 //#endregion
-export { x as default };
+export { b as default };

package/dist/Components/Alert/alert.types.d.ts

@@ -76,7 +76,7 @@ export interface AlertOwnProps {
      */
     icon?: null | IconSource;
     /**
-     * The padding to apply to the alert.
+     * Root padding scale. Each token also sets body indent under the title row.
      *
      * @default "medium"
      */
@@ -94,7 +94,8 @@ export interface AlertOwnProps {
      */
     shadow?: MergeProps<AlertShadow, AlertShadowOverrides>;
     /**
-     * The title to apply to the alert.
+     * Title in the heading row. When omitted, the default slot is used as the
+     * title.
      *
      * @default undefined
      */
@@ -112,7 +113,8 @@ export interface AlertSlots {
      */
     action?: Slot<undefined>;
     /**
-     * Main body text below the title row.
+     * Body below the title row. Used as the title when `title` and the `title`
+     * slot are omitted.
      */
     default?: Slot<undefined>;
     /**
@@ -128,7 +130,8 @@ export interface AlertSlots {
      */
     icon?: Slot<undefined>;
     /**
-     * The title of the alert.
+     * Title in the heading row. Takes precedence over the `title` prop and the
+     * default slot.
      */
     title?: Slot<undefined>;
 }

package/dist/Components/Alert/composables/useAlert.d.ts

@@ -11,6 +11,7 @@ export declare function useAlert(props: AlertOwnProps, libDefaults: AlertLibDefa
     bodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<AlertProps, "color" | "icon" | "classes" | "customProps" | "title" | "padding" | "rounded" | "shadow" | "variant">>>;
+    hasTitle: import('vue').ComputedRef<boolean>;
     titleBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     resolvedIcon: import('vue').ComputedRef<IconSource | null>;
     hasDefaultBody: import('vue').ComputedRef<boolean>;

package/dist/Components/Alert/composables/useAlert.js

@@ -1,11 +1,12 @@
-import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { alertDefaultIcons as r } from "../alertDefaultIcons.js";
-import { computed as i, useAttrs as a, useSlots as o } from "vue";
-import { get as s, isNull as c } from "es-toolkit/compat";
-import { alertPaddingProps as l, alertRoundedProps as u, alertShadowProps as d, alertVariantProps as f } from "@bridge-ui/core/Tokens";
-import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
+import { hasNamedSlot as e, hasSlotOrProp as t } from "../../../Utils/slotOrProp.js";
+import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { alertDefaultIcons as a } from "../alertDefaultIcons.js";
+import { computed as o, useAttrs as s, useSlots as c } from "vue";
+import { get as l, isNull as u } from "es-toolkit/compat";
+import { alertPaddingProps as d, alertRoundedProps as f, alertShadowProps as p, alertVariantProps as m } from "@bridge-ui/core/Tokens";
+import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
 //#region src/Components/Alert/composables/useAlert.ts
-var g = [
+var v = [
 	"icon",
 	"color",
 	"title",
@@ -16,68 +17,70 @@ var g = [
 	"variant",
 	"customProps"
 ];
-function _(_, v) {
-	let y = a(), b = o(), x = i(() => h({
-		bridgeKeys: g,
+function y(y, b) {
+	let x = s(), S = c(), C = o(() => _({
+		bridgeKeys: v,
 		props: {
-			...y,
-			..._
+			...x,
+			...y
 		}
-	})), { merged: S, entry: C } = t({
-		libDefaults: v,
+	})), { merged: w, entry: T } = r({
+		libDefaults: b,
 		componentName: "Alert",
-		props: () => x.value.componentProps
-	}), w = i(() => S.value.customProps), T = n({
-		entry: C,
-		props: () => x.value.componentProps
-	}), E = i(() => {
-		let e = b.default?.();
+		props: () => C.value.componentProps
+	}), E = o(() => w.value.customProps), D = i({
+		entry: T,
+		props: () => C.value.componentProps
+	}), O = o(() => t(S, "title", w.value.title)), k = o(() => {
+		let e = S.default?.();
 		return !!(e && e.length > 0);
-	}), D = i(() => {
-		let e = m(f, C.value?.tokens?.variant);
-		return s(e, [S.value.variant, S.value.color]);
-	}), O = i(() => {
-		let e = m(d, C.value?.tokens?.shadow);
-		return s(e, S.value.shadow);
-	}), k = i(() => {
-		let e = m(l, C.value?.tokens?.padding);
-		return s(e, S.value.padding);
-	}), A = i(() => {
-		let e = m(u, C.value?.tokens?.rounded);
-		return s(e, S.value.rounded);
-	}), j = i(() => c(S.value.icon) ? null : S.value.icon ? S.value.icon : s(D.value, "icon") ?? s(r, S.value.color));
+	}), A = o(() => !e(S, "header") && (k.value || O.value)), j = o(() => k.value && (O.value || e(S, "header"))), M = o(() => {
+		let e = g(m, T.value?.tokens?.variant);
+		return l(e, [w.value.variant, w.value.color]);
+	}), N = o(() => {
+		let e = g(p, T.value?.tokens?.shadow);
+		return l(e, w.value.shadow);
+	}), P = o(() => {
+		let e = g(d, T.value?.tokens?.padding);
+		return l(e, w.value.padding);
+	}), F = o(() => {
+		let e = g(f, T.value?.tokens?.rounded);
+		return l(e, w.value.rounded);
+	}), I = o(() => u(w.value.icon) ? null : w.value.icon ? w.value.icon : l(M.value, "icon") ?? l(a, w.value.color));
 	return {
-		slots: b,
-		merged: S,
-		bodyBind: i(() => e(w.value?.body, {}, p({
+		slots: S,
+		merged: w,
+		bodyBind: o(() => n(E.value?.body, {}, h({
 			"grow text-sm text-start": !0,
-			[k.value ?? ""]: !0,
-			[s(D.value, "text") ?? ""]: !0,
-			[s(T.value, "body") ?? ""]: !0
+			[l(P.value, "body") ?? ""]: !0,
+			[l(M.value, "text") ?? ""]: !0,
+			[l(D.value, "body") ?? ""]: !0
 		}))),
-		iconBind: i(() => e(w.value?.icon, {}, p({
+		iconBind: o(() => n(E.value?.icon, {}, h({
 			"w-5 h-5 shrink-0": !0,
-			[s(D.value, "iconColor") ?? ""]: !0,
-			[s(T.value, "icon") ?? ""]: !0
+			[l(M.value, "iconColor") ?? ""]: !0,
+			[l(D.value, "icon") ?? ""]: !0
 		}))),
-		rootBind: i(() => e(w.value?.root, x.value.inheritedAttrs, p({
-			"w-full flex flex-col p-4": !0,
-			[O.value ?? ""]: !0,
-			[A.value ?? ""]: !0,
-			[s(D.value, "border") ?? ""]: !0,
-			[s(D.value, "background") ?? ""]: !0,
-			[s(T.value, "root") ?? ""]: !0
+		rootBind: o(() => n(E.value?.root, C.value.inheritedAttrs, h({
+			"w-full flex flex-col": !0,
+			[l(P.value, "root") ?? ""]: !0,
+			[N.value ?? ""]: !0,
+			[F.value ?? ""]: !0,
+			[l(M.value, "border") ?? ""]: !0,
+			[l(M.value, "background") ?? ""]: !0,
+			[l(D.value, "root") ?? ""]: !0
 		}))),
-		titleBind: i(() => e(w.value?.title, {}, p({
+		hasTitle: A,
+		titleBind: o(() => n(E.value?.title, {}, h({
 			"text-start text-sm whitespace-normal": !0,
-			"font-normal": !E.value,
-			"font-semibold": E.value,
-			[s(D.value, "text") ?? ""]: !0,
-			[s(T.value, "title") ?? ""]: !0
+			"font-normal": !j.value,
+			"font-semibold": j.value,
+			[l(M.value, "text") ?? ""]: !0,
+			[l(D.value, "title") ?? ""]: !0
 		}))),
-		resolvedIcon: j,
-		hasDefaultBody: E
+		resolvedIcon: I,
+		hasDefaultBody: j
 	};
 }
 //#endregion
-export { _ as useAlert };
+export { y as useAlert };

package/dist/Components/Autocomplete/Autocomplete.vue.d.ts

@@ -31,9 +31,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;
-    freeSolo: boolean;
     minItemsForSearch: number;
     searchable: boolean;
+    freeSolo: 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/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js

@@ -76,6 +76,7 @@ var N = {
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: {
 			type: Boolean,
 			default: !0

package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts

@@ -436,7 +436,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
             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, {}>>;
@@ -461,6 +461,8 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         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>;
     };
@@ -720,7 +722,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         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">>>>>;
     handleApply: () => void;
     selectOption: (option: SelectOption) => void;
     handleCancel: () => void;

package/dist/Components/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js

@@ -19,30 +19,30 @@ var C = [
 				...D
 			}
 		})), k = o(() => t(D, "label", O.value.merged.value.label) || t(D, "corner", O.value.merged.value.corner));
-		return (o, p) => (_(), c("div", h(O.value.rootBind.value, {
+		return (t, o) => (_(), c("div", h(O.value.rootBind.value, {
 			"data-invalid": O.value.invalidated.value || void 0,
 			"aria-disabled": O.value.isDisabled.value || void 0,
 			"aria-readonly": O.value.isReadonly.value || void 0
 		}), [
 			k.value ? (_(), c("div", g(h({ key: 0 }, O.value.headerBind.value)), [f(i, { api: O.value }, u({ _: 2 }, [b(e)(b(D), "label") ? {
 				name: "label",
-				fn: S(() => [v(o.$slots, "label")]),
+				fn: S(() => [v(t.$slots, "label")]),
 				key: "0"
 			} : void 0]), 1032, ["api"]), f(r, { api: O.value }, u({ _: 2 }, [b(e)(b(D), "corner") ? {
 				name: "corner",
-				fn: S(() => [v(o.$slots, "corner")]),
+				fn: S(() => [v(t.$slots, "corner")]),
 				key: "0"
 			} : void 0]), 1032, ["api"])], 16)) : s("", !0),
 			l("div", g(m(O.value.groupBind.value)), [
-				b(e)(b(D), "start") ? (_(), c("div", g(h({ key: 0 }, O.value.startSlotBind.value)), [v(o.$slots, "start")], 16)) : s("", !0),
-				v(o.$slots, "default"),
-				b(e)(b(D), "end") ? (_(), c("div", g(h({ key: 1 }, O.value.endSlotBind.value)), [v(o.$slots, "end")], 16)) : s("", !0)
+				b(e)(b(D), "start") ? (_(), c("div", g(h({ key: 0 }, O.value.startSlotBind.value)), [v(t.$slots, "start")], 16)) : s("", !0),
+				v(t.$slots, "default"),
+				b(e)(b(D), "end") ? (_(), c("div", g(h({ key: 1 }, O.value.endSlotBind.value)), [v(t.$slots, "end")], 16)) : s("", !0)
 			], 16),
-			!O.value.invalidated.value && b(t)(b(D), "description", O.value.merged.value.description) ? (_(), c("p", h({ key: 1 }, O.value.descriptionBind.value, { id: `${O.value.controlId.value}-description` }), [b(e)(b(D), "description") ? v(o.$slots, "description", {}, void 0, void 0, 0) : b(n)(O.value.merged.value.description) ? (_(), c(a, { key: 1 }, [d(y(O.value.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
-			O.value.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, O.value.errorBind.value, {
+			O.value.showDescriptionContent.value ? (_(), c("p", h({ key: 1 }, O.value.descriptionBind.value, { id: `${O.value.controlId.value}-description` }), [b(e)(b(D), "description") ? v(t.$slots, "description", {}, void 0, void 0, 0) : b(n)(O.value.merged.value.description) ? (_(), c(a, { key: 1 }, [d(y(O.value.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			O.value.showErrorMessageRow.value ? (_(), c("p", h({ key: 2 }, O.value.errorBind.value, {
 				id: `${O.value.controlId.value}-error`,
 				"aria-hidden": !O.value.showErrorMessageContent.value || void 0
-			}), [O.value.showErrorMessageContent.value ? (_(), c(a, { key: 0 }, [b(e)(b(D), "errorMessage") ? v(o.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(O.value.merged.value.errorMessage) ? (_(), c(a, { key: 1 }, [d(y(O.value.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+			}), [O.value.showErrorMessageContent.value ? (_(), c(a, { key: 0 }, [b(e)(b(D), "errorMessage") ? v(t.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(O.value.merged.value.errorMessage) ? (_(), c(a, { key: 1 }, [d(y(O.value.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T)) : s("", !0)
 		], 16, C));
 	}
 });

package/dist/Components/BaseField/baseField.types.d.ts

@@ -115,7 +115,8 @@ export interface BaseFieldOwnProps {
      */
     customProps?: BaseFieldCustomProps;
     /**
-     * Helper text below the control group (hidden when the field is invalid).
+     * Helper text below the control group. Hidden when `error` is true and an
+     * error message is shown, unless `showDescriptionOnError` is true.
      *
      * @default undefined
      */
@@ -127,7 +128,9 @@ export interface BaseFieldOwnProps {
      */
     disabled?: boolean;
     /**
-     * When `true`, applies invalid styling on the label and control group.
+     * When `true`, applies invalid styling on the label and control group. Hides
+     * description when an error message is shown, unless `showDescriptionOnError`
+     * is true.
      *
      * @default false
      */
@@ -148,7 +151,8 @@ export interface BaseFieldOwnProps {
      */
     field?: UseBaseFieldReturn;
     /**
-     * When `true`, does not reserve space below the group for error messages.
+     * When `true`, does not reserve the error row. That row is also omitted
+     * while a description is shown.
      *
      * @default false
      */
@@ -171,6 +175,12 @@ export interface BaseFieldOwnProps {
      * @default false
      */
     required?: boolean;
+    /**
+     * When `true`, keeps the description visible while the field is invalid.
+     *
+     * @default false
+     */
+    showDescriptionOnError?: boolean;
     /**
      * Label typography and control group gap scale.
      *
@@ -195,7 +205,8 @@ export interface BaseFieldSlots {
      */
     default?: Slot<undefined>;
     /**
-     * Helper text below the control group.
+     * Helper text below the control group. Hidden when the field is invalid and
+     * an error message is shown, unless `showDescriptionOnError` is true.
      */
     description?: Slot;
     /**

package/dist/Components/BaseField/composables/useBaseField.d.ts

@@ -5,14 +5,16 @@ import { LabelProps } from '../../Label/label.types';
 export type BaseFieldOptions = {
     /**
      * Public registry key that owns BaseField chrome defaults/tokens.
+     * Defaults to `BaseField`; Slider / OtpField pass their own key so chrome
+     * cascades (`BaseField` → parent).
      */
-    componentName?: "Slider" | "OtpField";
+    componentName?: "Slider" | "OtpField" | "BaseField";
     /**
      * Resolve `Label` `for` from `controlId`. Defaults to the control id itself.
      */
     labelHtmlFor?: (controlId: string) => string;
 };
-export declare const baseFieldBridgeKeys: readonly ["size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage"];
+export declare const baseFieldBridgeKeys: readonly ["size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage", "showDescriptionOnError"];
 type BaseFieldLibDefaults = LibDefaultsShape<Omit<BaseFieldOwnProps, "field">, "size" | "error" | "hideErrorMessage">;
 type BaseFieldMerged = MergeLibDefaults<Omit<BaseFieldOwnProps, "field">, BaseFieldLibDefaults>;
 /**
@@ -49,6 +51,8 @@ export declare function useBaseField(props: MaybeRefOrGetter<Omit<BaseFieldOwnPr
     fieldLabelProps: import('vue').ComputedRef<LabelProps>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     fieldCornerProps: import('vue').ComputedRef<LabelProps>;
+    showErrorMessageRow: import('vue').ComputedRef<boolean>;
+    showDescriptionContent: import('vue').ComputedRef<boolean>;
     showErrorMessageContent: import('vue').ComputedRef<boolean>;
 };
 export type UseBaseFieldReturn = ReturnType<typeof useBaseField>;

package/dist/Components/BaseField/composables/useBaseField.js

@@ -18,7 +18,8 @@ var g = [
 	"customProps",
 	"description",
 	"errorMessage",
-	"hideErrorMessage"
+	"hideErrorMessage",
+	"showDescriptionOnError"
 ];
 function _(_, v = {
 	size: "md",
@@ -31,102 +32,101 @@ function _(_, v = {
 			...b,
 			...o(_)
 		}
-	})), { merged: w, entry: T } = r({
+	})), w = y.componentName ?? "BaseField", { merged: T, entry: E, chromeEntry: D } = r({
 		libDefaults: v,
-		componentName: y.componentName,
+		componentName: w,
 		props: () => C.value.componentProps
-	}), E = i({
-		entry: T,
+	}), O = i({
+		entry: E,
+		chromeEntry: D,
 		props: () => C.value.componentProps
-	}), D = a(() => w.value.customProps), O = a(() => w.value.error === !0), k = a(() => !!w.value.disabled), A = a(() => !!w.value.readonly), j = a(() => w.value.controlId ?? C.value.inheritedAttrs.id ?? S), M = a(() => {
-		let e = m(f, u(T.value, [
-			"tokens",
-			"baseField",
-			"size"
-		]));
-		return u(e, w.value.size ?? "md");
-	}), N = a(() => !w.value.hideErrorMessage), P = a(() => O.value && e(x, "errorMessage", w.value.errorMessage)), F = a(() => {
-		let t = [];
-		return !O.value && e(x, "description", w.value.description) && t.push(`${j.value}-description`), O.value && !w.value.hideErrorMessage && e(x, "errorMessage", w.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), I = a(() => n(D.value?.root, {
+	}), k = a(() => T.value.customProps), A = a(() => T.value.error === !0), j = a(() => !!T.value.disabled), M = a(() => !!T.value.readonly), N = a(() => T.value.controlId ?? C.value.inheritedAttrs.id ?? S), P = a(() => {
+		let e = w !== "BaseField", t = m(f, u(D.value, ["tokens", "size"]), e ? void 0 : u(E.value, ["tokens", "size"]));
+		return u(t, T.value.size ?? "md");
+	}), F = a(() => !T.value.hideErrorMessage && !e(x, "description", T.value.description)), I = a(() => A.value && !T.value.hideErrorMessage && e(x, "errorMessage", T.value.errorMessage)), L = a(() => e(x, "description", T.value.description) ? !I.value || T.value.showDescriptionOnError === !0 : !1), R = a(() => I.value || F.value), z = a(() => {
+		let e = [];
+		return L.value && e.push(`${N.value}-description`), I.value && e.push(`${N.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), B = a(() => n(k.value?.root, {
 		class: p(C.value.inheritedAttrs.class),
 		...d(C.value.inheritedAttrs, ["class", "id"])
 	}, p({
 		"group w-full relative": !0,
 		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[E.value.root ?? ""]: !0
-	}))), L = a(() => n(D.value?.header, {}, p({
+		[O.value.root ?? ""]: !0
+	}))), V = a(() => n(k.value?.header, {}, p({
 		"flex w-full gap-x-2 mb-1.5": !0,
-		"justify-between items-end": e(x, "label", w.value.label),
-		"justify-end": !e(x, "label", w.value.label),
-		[E.value.header ?? ""]: !0
-	}))), R = a(() => {
+		"justify-between items-end": e(x, "label", T.value.label),
+		"justify-end": !e(x, "label", T.value.label),
+		[O.value.header ?? ""]: !0
+	}))), H = a(() => {
 		let e = y.labelHtmlFor ?? ((e) => e);
-		return t(D.value?.corner, {
-			size: w.value.size,
-			for: e(j.value),
-			classes: { root: p({ [E.value.corner ?? ""]: !0 }) }
+		return t(k.value?.corner, {
+			size: T.value.size,
+			for: e(N.value),
+			classes: { root: p({ [O.value.corner ?? ""]: !0 }) }
 		});
-	}), z = a(() => n(D.value?.group, {
+	}), U = a(() => n(k.value?.group, {
 		role: "group",
-		id: j.value,
-		"aria-describedby": F.value,
-		"aria-disabled": k.value || void 0,
-		"aria-invalid": O.value || void 0
+		id: N.value,
+		"aria-describedby": z.value,
+		"aria-disabled": j.value || void 0,
+		"aria-invalid": A.value || void 0
 	}, p({
 		"flex flex-wrap items-center": !0,
-		[M.value?.group ?? ""]: !0,
-		[E.value.group ?? ""]: !0
-	}))), B = a(() => n(D.value?.start, {}, p({
+		[P.value?.group ?? ""]: !0,
+		[O.value.group ?? ""]: !0
+	}))), W = a(() => n(k.value?.start, {}, p({
 		"group/start wrapper-start-slot shrink-0 flex items-center [&>*]:min-h-0": !0,
-		[E.value.start ?? ""]: !0
-	}))), V = a(() => n(D.value?.end, {}, p({
+		[O.value.start ?? ""]: !0
+	}))), G = a(() => n(k.value?.end, {}, p({
 		"group/end wrapper-end-slot shrink-0 flex items-center [&>*]:min-h-0": !0,
-		[E.value.end ?? ""]: !0
-	}))), H = a(() => n(D.value?.description, {}, p({
+		[O.value.end ?? ""]: !0
+	}))), K = a(() => n(k.value?.description, {}, p({
 		"mt-1 px-1 text-dark-500 dark:text-dark-400": !0,
-		[M.value?.text ?? ""]: !0,
-		[E.value.description ?? ""]: !0
+		[P.value?.text ?? ""]: !0,
+		[O.value.description ?? ""]: !0
 	})));
 	return {
 		slots: x,
-		merged: w,
-		rootBind: I,
-		errorBind: a(() => n(D.value?.errorMessage, {}, p({
+		merged: T,
+		rootBind: B,
+		errorBind: a(() => n(k.value?.errorMessage, {}, p({
 			"mt-1 px-1": !0,
-			"min-h-[1lh]": N.value,
+			"min-h-[1lh]": F.value,
 			"text-error-600 dark:text-error-400": !0,
-			[M.value?.text ?? ""]: !0,
-			[E.value.errorMessage ?? ""]: !0
+			[P.value?.text ?? ""]: !0,
+			[O.value.errorMessage ?? ""]: !0
 		}))),
-		groupBind: z,
-		controlId: j,
-		headerBind: L,
-		isDisabled: k,
-		isReadonly: A,
-		sizeClasses: M,
-		endSlotBind: V,
-		invalidated: O,
-		startSlotBind: B,
-		mergedClasses: E,
-		ariaDescribedBy: F,
+		groupBind: U,
+		controlId: N,
+		headerBind: V,
+		isDisabled: j,
+		isReadonly: M,
+		sizeClasses: P,
+		endSlotBind: G,
+		invalidated: A,
+		startSlotBind: W,
+		mergedClasses: O,
+		ariaDescribedBy: z,
 		fieldLabelProps: a(() => {
 			let e = y.labelHtmlFor ?? ((e) => e);
-			return t(D.value?.label, {
-				size: w.value.size,
-				error: O.value,
-				required: w.value.required,
-				for: e(j.value),
+			return t(k.value?.label, {
+				size: T.value.size,
+				error: A.value,
+				required: T.value.required,
+				for: e(N.value),
 				classes: {
-					required: E.value.required,
-					root: p({ [E.value.label ?? ""]: !0 })
+					required: O.value.required,
+					root: p({ [O.value.label ?? ""]: !0 })
 				}
 			});
 		}),
-		descriptionBind: H,
-		fieldCornerProps: R,
-		showErrorMessageContent: P
+		descriptionBind: K,
+		fieldCornerProps: H,
+		showErrorMessageRow: R,
+		showDescriptionContent: L,
+		showErrorMessageContent: I
 	};
 }
 //#endregion