@bridge-ui/vue 0.6.0 → 0.8.0

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

@@ -1,42 +1,47 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
 import r from "../Icon/Icon.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";
+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";
 //#region src/Components/FormField/OutlinedFormField.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({
 	__name: "OutlinedFormField",
 	props: { api: {} },
-	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
+	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
 		}), [
-			y(t)(y(T), "label", f.api.merged.value.label) || y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("div", h(m({ key: 0 }, f.api.headerBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "label") ? {
+			b(t)(b(E), "label", p.api.merged.value.label) || b(t)(b(E), "corner", p.api.merged.value.corner) ? (_(), c("div", g(h({ key: 0 }, p.api.headerBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "label") ? {
 				name: "label",
-				fn: x(() => [_(b.$slots, "label")]),
+				fn: S(() => [v(x.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(T), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			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)) : y(n)(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(r), 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(T), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(n)(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(r), 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(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "corner") ? {
+				name: "corner",
+				fn: S(() => [v(x.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : s("", !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)) : 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(E), "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)
 			], 16),
-			!f.api.invalidated.value && y(t)(y(T), "description", f.api.merged.value.description) ? (g(), s("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(T), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(n)(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.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, 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(n)(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))
-		], 16, S));
+			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)) : s("", !0)
+		], 16, C));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/Components/FormField/StackedFormField.vue.d.ts

@@ -2,21 +2,21 @@ import { UseFormFieldReturn } from './composables/useFormField';
 type __VLS_Props = {
     api: UseFormFieldReturn;
 };
-declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {}, __VLS_31: {}, __VLS_33: {}, __VLS_35: {};
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_19: {}, __VLS_26: {}, __VLS_38: {}, __VLS_40: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     start?: (props: typeof __VLS_1) => any;
 } & {
     label?: (props: typeof __VLS_10) => any;
 } & {
-    corner?: (props: typeof __VLS_12) => any;
+    corner?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    end?: (props: typeof __VLS_31) => any;
+    end?: (props: typeof __VLS_38) => any;
 } & {
-    description?: (props: typeof __VLS_33) => any;
+    description?: (props: typeof __VLS_40) => any;
 } & {
-    errorMessage?: (props: typeof __VLS_35) => any;
+    errorMessage?: (props: typeof __VLS_42) => 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>;

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

@@ -1,5 +1,6 @@
-import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "../Icon/Icon.js";
+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
@@ -23,21 +24,25 @@ var S = [
 					name: "label",
 					fn: x(() => [_(b.$slots, "label")]),
 					key: "0"
-				} : void 0]), 1032, ["api"]), y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(T), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0), c("div", h(p(f.api.stackedInputRowBind.value)), [
-					y(n)(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(r), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
+				} : void 0]), 1032, ["api"]), d(r, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "corner") ? {
+					name: "corner",
+					fn: x(() => [_(b.$slots, "corner")]),
+					key: "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(n)(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(r), m({
+					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(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+					}, 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),
 				y(e)(y(T), "end") ? (g(), s("div", h(m({ key: 1 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : o("", !0)
 			], 16),
-			!f.api.invalidated.value && y(t)(y(T), "description", f.api.merged.value.description) ? (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(n)(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.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 1 }, f.api.errorBind.value, {
+			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(n)(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))
+			}), [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));
 	}
 });

package/dist/Components/FormField/UnderlinedFormField.vue.d.ts

@@ -2,21 +2,21 @@ import { UseFormFieldReturn } from './composables/useFormField';
 type __VLS_Props = {
     api: UseFormFieldReturn;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_19: {}, __VLS_21: {}, __VLS_33: {}, __VLS_35: {};
+declare var __VLS_8: {}, __VLS_17: {}, __VLS_19: {}, __VLS_26: {}, __VLS_28: {}, __VLS_40: {}, __VLS_42: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_8) => any;
 } & {
-    corner?: (props: typeof __VLS_10) => any;
+    corner?: (props: typeof __VLS_17) => any;
 } & {
-    start?: (props: typeof __VLS_12) => any;
+    start?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    end?: (props: typeof __VLS_21) => any;
+    end?: (props: typeof __VLS_28) => any;
 } & {
-    description?: (props: typeof __VLS_33) => any;
+    description?: (props: typeof __VLS_40) => any;
 } & {
-    errorMessage?: (props: typeof __VLS_35) => any;
+    errorMessage?: (props: typeof __VLS_42) => 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>;

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

@@ -1,42 +1,47 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
 import r from "../Icon/Icon.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";
+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";
 //#region src/Components/FormField/UnderlinedFormField.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({
 	__name: "UnderlinedFormField",
 	props: { api: {} },
-	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
+	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
 		}), [
-			y(t)(y(T), "label", f.api.merged.value.label) || y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("div", h(m({ key: 0 }, f.api.headerBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "label") ? {
+			b(t)(b(E), "label", p.api.merged.value.label) || b(t)(b(E), "corner", p.api.merged.value.corner) ? (_(), c("div", g(h({ key: 0 }, p.api.headerBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "label") ? {
 				name: "label",
-				fn: x(() => [_(b.$slots, "label")]),
+				fn: S(() => [v(x.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(T), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			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)) : y(n)(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(r), 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(T), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(n)(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(r), 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(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "corner") ? {
+				name: "corner",
+				fn: S(() => [v(x.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : s("", !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)) : 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(E), "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)
 			], 16),
-			!f.api.invalidated.value && y(t)(y(T), "description", f.api.merged.value.description) ? (g(), s("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(T), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(n)(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.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, 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(n)(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))
-		], 16, S));
+			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)) : s("", !0)
+		], 16, C));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

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,11 +449,10 @@ 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, {}>>;
-    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;
@@ -469,9 +470,12 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+    fieldCornerProps: import('vue').ComputedRef<LabelProps>;
     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>;
 };