@bridge-ui/vue 0.6.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/Adapters/I18n/useI18nAdapter.d.ts

@@ -13,4 +13,4 @@ export declare function useI18nAdapter(): ComputedRef<undefined | I18nAdapter>;
 /**
  * Resolves Bridge chrome strings through the active i18n adapter.
  */
-export declare function useResolveMessage(): (message: string, params?: MessageParams) => string;
+export declare function useResolveMessage(): (message: string, countOrParams?: number | MessageParams, params?: MessageParams) => string;

package/dist/Adapters/I18n/useI18nAdapter.js

@@ -12,7 +12,10 @@ function a() {
 }
 function o() {
 	let e = a();
-	return (t, r) => n(t, e.value, r);
+	function t(t, r, i) {
+		return n(t, e.value, r, i);
+	}
+	return t;
 }
 //#endregion
 export { i as setI18nAdapterForTests, a as useI18nAdapter, o as useResolveMessage };

package/dist/Components/Accordion/Accordion.vue_vue_type_script_setup_true_lang.js

@@ -26,9 +26,9 @@ var u = /*@__PURE__*/ n({
 	setup(n, { emit: i }) {
 		let u = i, d = n, f = l(n, "modelValue"), { rootBind: p } = e(d, {
 			size: "md",
+			color: "dark",
 			multiple: !1,
 			disabled: !1,
-			color: "primary",
 			variant: "default"
 		}, f, u);
 		return (e, n) => (o(), t("div", a(r(c(p))), [s(e.$slots, "default")], 16));

package/dist/Components/Accordion/accordion.types.d.ts

@@ -40,9 +40,9 @@ export interface AccordionOwnProps {
      */
     classes?: AccordionClasses;
     /**
-     * Accent color for the expanded indicator and trigger.
+     * Optional text accent for the expanded trigger and indicator.
      *
-     * @default "primary"
+     * @default "dark"
      */
     color?: MergeProps<AccordionColor, AccordionColorOverrides>;
     /**

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,11 +436,10 @@ 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, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
@@ -458,9 +457,12 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         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

@@ -1,45 +1,50 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "./BaseFieldLabel.js";
-import { Fragment as i, computed 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";
+import r from "./BaseFieldCorner.js";
+import i from "./BaseFieldLabel.js";
+import { Fragment as a, computed 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";
 //#region src/Components/BaseField/BaseField.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var C = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
+], w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "BaseField",
 	props: { field: {} },
-	setup(f) {
-		let T = f, E = b(), D = a(() => ({
-			...T.field,
+	setup(p) {
+		let E = p, D = x(), O = o(() => ({
+			...E.field,
 			slots: {
-				...T.field.slots,
-				...E
+				...E.field.slots,
+				...D
 			}
-		})), O = a(() => t(E, "label", D.value.merged.value.label) || t(E, "corner", D.value.merged.value.corner));
-		return (a, f) => (g(), s("div", m(D.value.rootBind.value, {
-			"data-invalid": D.value.invalidated.value || void 0,
-			"aria-disabled": D.value.isDisabled.value || void 0,
-			"aria-readonly": D.value.isReadonly.value || void 0
+		})), k = o(() => t(D, "label", O.value.merged.value.label) || t(D, "corner", O.value.merged.value.corner));
+		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
 		}), [
-			O.value ? (g(), s("div", h(m({ key: 0 }, D.value.headerBind.value)), [d(r, { api: D.value }, l({ _: 2 }, [y(e)(y(E), "label") ? {
+			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: x(() => [_(a.$slots, "label")]),
+				fn: S(() => [v(t.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(E), "corner", D.value.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, D.value.cornerBind.value)), [y(e)(y(E), "corner") ? _(a.$slots, "corner", {}, void 0, void 0, 0) : y(n)(D.value.merged.value.corner) ? (g(), s(i, { key: 1 }, [u(v(D.value.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			c("div", h(p(D.value.groupBind.value)), [
-				y(e)(y(E), "start") ? (g(), s("div", h(m({ key: 0 }, D.value.startSlotBind.value)), [_(a.$slots, "start")], 16)) : o("", !0),
-				_(a.$slots, "default"),
-				y(e)(y(E), "end") ? (g(), s("div", h(m({ key: 1 }, D.value.endSlotBind.value)), [_(a.$slots, "end")], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(r, { api: O.value }, u({ _: 2 }, [b(e)(b(D), "corner") ? {
+				name: "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(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),
-			!D.value.invalidated.value && y(t)(y(E), "description", D.value.merged.value.description) ? (g(), s("p", m({ key: 1 }, D.value.descriptionBind.value, { id: `${D.value.controlId.value}-description` }), [y(e)(y(E), "description") ? _(a.$slots, "description", {}, void 0, void 0, 0) : y(n)(D.value.merged.value.description) ? (g(), s(i, { key: 1 }, [u(v(D.value.merged.value.description), 1)], 64)) : o("", !0)], 16, C)) : o("", !0),
-			D.value.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, D.value.errorBind.value, {
-				id: `${D.value.controlId.value}-error`,
-				"aria-hidden": !D.value.showErrorMessageContent.value || void 0
-			}), [D.value.showErrorMessageContent.value ? (g(), s(i, { key: 0 }, [y(e)(y(E), "errorMessage") ? _(a.$slots, "errorMessage", {}, void 0, void 0, 0) : y(n)(D.value.merged.value.errorMessage) ? (g(), s(i, { key: 1 }, [u(v(D.value.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, w))
-		], 16, S));
+			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(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));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/Components/BaseField/BaseFieldCorner.js

@@ -0,0 +1,5 @@
+import e from "./BaseFieldCorner.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/BaseField/BaseFieldCorner.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/BaseField/BaseFieldCorner.vue.d.ts

@@ -0,0 +1,17 @@
+import { UseBaseFieldReturn } from './composables/useBaseField';
+type __VLS_Props = {
+    api: UseBaseFieldReturn;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    corner?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,17 @@
+import { hasNamedSlot as e, hasSlotOrProp as t } from "../../Utils/slotOrProp.js";
+import n from "../Label/Label.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, defineComponent as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g } from "vue";
+//#region src/Components/BaseField/BaseFieldCorner.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	__name: "BaseFieldCorner",
+	props: { api: {} },
+	setup(c) {
+		let _ = h();
+		return (h, v) => m(t)(m(_), "corner", c.api.merged.value.corner) ? (d(), i(m(n), u(l({ key: 0 }, c.api.fieldCornerProps.value)), {
+			default: g(() => [m(e)(m(_), "corner") ? f(h.$slots, "corner", {}, void 0, void 0, 0) : (d(), o(r, { key: 1 }, [s(p(c.api.merged.value.corner), 1)], 64))]),
+			_: 3
+		}, 16)) : a("", !0);
+	}
+});
+//#endregion
+export { _ as default };

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

@@ -48,9 +48,11 @@ export interface BaseFieldClasses {
 }
 export interface BaseFieldCustomProps {
     /**
-     * Props forwarded to the corner label element.
+     * Props forwarded to the corner `Label` (content stays owned by `BaseField`).
+     *
+     * @default undefined
      */
-    corner?: HTMLAttributes;
+    corner?: Partial<Omit<LabelProps, "children">>;
     /**
      * Props forwarded to the helper text below the control group.
      */
@@ -113,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
      */
@@ -125,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
      */
@@ -146,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
      */
@@ -169,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.
      *
@@ -193,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>;
 /**
@@ -38,7 +40,6 @@ export declare function useBaseField(props: MaybeRefOrGetter<Omit<BaseFieldOwnPr
     }>>;
     controlId: import('vue').ComputedRef<string>;
     headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').BaseFieldSizeItem | undefined>;
@@ -49,6 +50,9 @@ export declare function useBaseField(props: MaybeRefOrGetter<Omit<BaseFieldOwnPr
     ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
     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>;