@bridge-ui/vue 0.0.6 → 0.0.8

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

@@ -20,13 +20,13 @@ var x = [
 			u("div", h(p(f.api.containerBind.value)), [
 				b(e)(f.api.slots, "start") ? (g(), l("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "start"))))], 16)) : b(n)(f.api.merged.value.start) ? (g(), l("div", h(m({ key: 1 }, f.api.startBind.value)), y(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), l("div", h(m({ key: 2 }, f.api.startBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0),
 				_(w.$slots, "default"),
-				b(e)(f.api.slots, "end") ? (g(), l("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "end"))))], 16)) : b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 4 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.withErrorIcon !== !1 ? (g(), l("div", h(m({ key: 5 }, f.api.endBind.value)), [d(b(a), m({
+				b(e)(f.api.slots, "end") ? (g(), l("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "end"))))], 16)) : b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 4 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), l("div", h(m({ key: 5 }, f.api.endBind.value)), [d(b(a), 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(), l("div", h(m({ key: 6 }, f.api.endBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0)
 			], 16),
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
-			f.api.merged.value.withoutErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
+			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
 				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))

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

@@ -21,7 +21,7 @@ var x = [
 				u("div", h(p(f.api.stackedBodyBind.value)), [f.api.hasInsetLabelRow.value ? (g(), l("div", h(m({ key: 0 }, f.api.insetLabelRowBind.value)), [d(o, { api: f.api }, null, 8, ["api"]), b(t)(f.api.slots, "corner", f.api.merged.value.corner) ? (g(), l("span", h(m({ key: 0 }, f.api.cornerBind.value)), [(g(), s(v(b(i)(f.api.slots, "corner", f.api.merged.value.corner))))], 16)) : c("", !0)], 16)) : c("", !0), u("div", h(p(f.api.stackedInputRowBind.value)), [
 					b(n)(f.api.merged.value.start) ? (g(), l("div", h(m({ key: 0 }, f.api.startBind.value)), y(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), l("div", h(m({ key: 1 }, f.api.startBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0),
 					_(w.$slots, "default"),
-					b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 2 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.withErrorIcon !== !1 ? (g(), l("div", h(m({ key: 3 }, f.api.endBind.value)), [d(b(a), m({
+					b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 2 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), l("div", h(m({ key: 3 }, f.api.endBind.value)), [d(b(a), 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(), l("div", h(m({ key: 4 }, f.api.endBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0)
@@ -29,7 +29,7 @@ var x = [
 				b(e)(f.api.slots, "end") ? (g(), l("div", h(m({ key: 1 }, f.api.endSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "end"))))], 16)) : c("", !0)
 			], 16),
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 0 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
-			f.api.merged.value.withoutErrorMessage ? c("", !0) : (g(), l("p", m({ key: 1 }, f.api.errorBind.value, {
+			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 1 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
 				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))

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

@@ -20,13 +20,13 @@ var x = [
 			u("div", h(p(f.api.containerBind.value)), [
 				b(e)(f.api.slots, "start") ? (g(), l("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "start"))))], 16)) : b(n)(f.api.merged.value.start) ? (g(), l("div", h(m({ key: 1 }, f.api.startBind.value)), y(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), l("div", h(m({ key: 2 }, f.api.startBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0),
 				_(w.$slots, "default"),
-				b(e)(f.api.slots, "end") ? (g(), l("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "end"))))], 16)) : b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 4 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.withErrorIcon !== !1 ? (g(), l("div", h(m({ key: 5 }, f.api.endBind.value)), [d(b(a), m({
+				b(e)(f.api.slots, "end") ? (g(), l("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [(g(), s(v(b(r)(f.api.slots, "end"))))], 16)) : b(n)(f.api.merged.value.end) ? (g(), l("div", h(m({ key: 4 }, f.api.endBind.value)), y(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), l("div", h(m({ key: 5 }, f.api.endBind.value)), [d(b(a), 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(), l("div", h(m({ key: 6 }, f.api.endBind.value)), [d(b(a), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : c("", !0)
 			], 16),
 			!f.api.invalidated.value && b(t)(f.api.slots, "description", f.api.merged.value.description) ? (g(), l("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [(g(), s(v(b(i)(f.api.slots, "description", f.api.merged.value.description))))], 16, S)) : c("", !0),
-			f.api.merged.value.withoutErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
+			f.api.merged.value.hideErrorMessage ? c("", !0) : (g(), l("p", m({ key: 2 }, f.api.errorBind.value, {
 				id: `${f.api.controlId.value}-error`,
 				"aria-hidden": f.api.showErrorMessageContent.value ? void 0 : !0
 			}), [f.api.showErrorMessageContent.value ? (g(), s(v(b(i)(f.api.slots, "errorMessage", f.api.merged.value.errorMessage)), { key: 0 })) : c("", !0)], 16, C))

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

@@ -4,6 +4,10 @@ import { FormFieldOwnProps, FormFieldSlots } from '../formField.types';
 import { LabelProps } from '../../Label/label.types';
 export type FormFieldReservedSlotName = Exclude<keyof FormFieldSlots, "default">;
 export type FormFieldOptions = {
+    /**
+     * Public registry key that owns FormField chrome defaults/tokens.
+     */
+    componentName?: "Select" | "Textarea" | "TextField" | "NumberField" | "Autocomplete" | "PasswordField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *
@@ -20,8 +24,8 @@ 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", "withErrorIcon", "withoutErrorMessage"];
-type FormFieldLibDefaults = LibDefaultsShape<FormFieldOwnProps, "size" | "color" | "rounded" | "variant" | "errorIcon" | "withErrorIcon">;
+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"];
+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): {
     slots: Readonly<{
@@ -443,7 +447,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" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
+    }, 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">>>>;
     isNotched: import('vue').ComputedRef<boolean>;
     isStacked: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;

package/dist/Components/FormField/composables/useFormField.js

@@ -1,8 +1,8 @@
 import { hasNamedSlot as e, hasSlotOrProp as t } from "../../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
 import { computed as o, toValue as s, useId as c, useSlots as l } from "vue";
-import { get as u, omit as d } from "es-toolkit/compat";
-import { cn as f, mergeBridgeUILayeredClasses as p, splitComponentProps as m } from "@bridge-ui/core";
+import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
+import { get as p, omit as m } from "es-toolkit/compat";
 import { colorProps as h, invalidatedProps as g, roundedProps as _, sizeProps as v, variantProps as y } from "@bridge-ui/core/Tokens/FormField";
 //#region src/Components/FormField/composables/useFormField.ts
 var b = [
@@ -25,42 +25,42 @@ var b = [
 	"customProps",
 	"description",
 	"errorMessage",
-	"withErrorIcon",
-	"withoutErrorMessage"
+	"showErrorIcon",
+	"hideErrorMessage"
 ];
 function x(x, S, C = {}) {
-	let ee = c(), w = l(), T = o(() => m({
+	let ee = c(), w = l(), T = o(() => f({
 		props: s(x),
 		bridgeKeys: b
 	})), { merged: E, entry: D } = i({
 		libDefaults: S,
-		componentName: "FormField",
+		componentName: C.componentName,
 		props: () => T.value.componentProps
 	}), O = o(() => E.value.customProps), k = o(() => C.control?.() ?? "input"), A = a({
 		entry: D,
 		props: () => T.value.componentProps
-	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !E.value.withoutErrorMessage), H = o(() => {
+	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !E.value.hideErrorMessage), H = o(() => {
 		let e = T.value.inheritedAttrs.id;
 		return E.value.controlId ?? e ?? ee;
 	}), U = o(() => j.value && t(w, "errorMessage", E.value.errorMessage)), W = o(() => (I.value || L.value) && (t(w, "label", E.value.label) || t(w, "corner", E.value.corner))), G = o(() => t(w, "label", E.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
 		let e = [];
-		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.withoutErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
-	}), q = o(() => u(p(v, D.value?.tokens?.size), [E.value.size, P.value])), J = o(() => u(p(h, D.value?.tokens?.color), E.value.color ?? "primary")), Y = o(() => p(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => u(p(_, D.value?.tokens?.rounded), E.value.rounded)), Q = o(() => u(p(y, D.value?.tokens?.variant), P.value)), te = o(() => {
+		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), q = o(() => p(d(v, D.value?.tokens?.size), [E.value.size, P.value])), J = o(() => p(d(h, D.value?.tokens?.color), E.value.color ?? "primary")), Y = o(() => d(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => p(d(_, D.value?.tokens?.rounded), E.value.rounded)), Q = o(() => p(d(y, D.value?.tokens?.variant), P.value)), te = o(() => {
 		let e = j.value ? Y.value : J.value;
 		return R.value ? e?.underlined : e?.input;
 	}), ne = o(() => {
-		if (L.value) return f({
+		if (L.value) return u({
 			[q.value?.insetTop ?? ""]: !0,
 			[q.value?.insetStart ?? ""]: !0,
 			[q.value?.insetEnd ?? ""]: !0
 		});
 	}), re = o(() => {
 		let t = C.reservedSlots?.() ?? [], n = e(w, "end") || t.includes("end"), r = e(w, "start") || t.includes("start");
-		if (!L.value) return !r && !n ? q.value?.padding : f({
+		if (!L.value) return !r && !n ? q.value?.padding : u({
 			[q.value?.insetStart ?? ""]: !r,
 			[q.value?.insetEnd ?? ""]: !n
 		});
-	}), ie = o(() => r(O.value?.end, {}, f({
+	}), ie = o(() => r(O.value?.end, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-gray-500": !j.value,
 		[Z.value?.end ?? ""]: !R.value && !L.value,
@@ -70,15 +70,15 @@ function x(x, S, C = {}) {
 	}))), ae = o(() => {
 		let e = T.value.inheritedAttrs;
 		return r(O.value?.root, {
-			class: f(e.class),
-			...d(e, ["class"])
-		}, f({
+			class: u(e.class),
+			...m(e, ["class"])
+		}, u({
 			"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,
 			[A.value.root ?? ""]: !0
 		}));
-	}), oe = o(() => r(O.value?.errorMessage, {}, f({
+	}), oe = o(() => r(O.value?.errorMessage, {}, u({
 		"mt-2": !0,
 		"min-h-[1lh]": V.value,
 		[X.value?.errorMessage ?? ""]: !0,
@@ -91,7 +91,7 @@ function x(x, S, C = {}) {
 		readonly: N.value,
 		"aria-describedby": K.value,
 		"aria-invalid": j.value || void 0
-	}, d(T.value.inheritedAttrs, ["class"]), f({
+	}, m(T.value.inheritedAttrs, ["class"]), u({
 		"flex-1 min-w-0 min-h-0 bg-transparent border-0 shadow-none": !0,
 		"h-full": !z.value && !L.value,
 		"max-h-none": z.value,
@@ -109,26 +109,26 @@ function x(x, S, C = {}) {
 		required: E.value.required,
 		classes: {
 			required: A.value.required,
-			root: f({
+			root: u({
 				[Q.value?.label ?? ""]: I.value,
 				[A.value.label ?? ""]: !0
 			})
 		}
-	})), ce = o(() => r(O.value?.start, {}, f({
+	})), ce = o(() => r(O.value?.start, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-gray-400": !j.value,
 		[Z.value?.start ?? ""]: !R.value && !L.value,
 		[J.value?.start ?? ""]: !j.value,
 		[X.value?.adornment ?? ""]: j.value,
 		[A.value.start ?? ""]: !0
-	}))), le = o(() => r(O.value?.corner, {}, f({
+	}))), le = o(() => r(O.value?.corner, {}, u({
 		"text-gray-500 dark:text-gray-400": !I.value,
 		[q.value?.text ?? ""]: !0,
 		[Q.value?.corner ?? ""]: I.value,
 		[A.value.corner ?? ""]: !0
 	}))), ue = o(() => {
 		let e = t(w, "label", E.value.label);
-		return r(O.value?.header, {}, f({
+		return r(O.value?.header, {}, u({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
@@ -138,20 +138,20 @@ function x(x, S, C = {}) {
 			[Q.value?.labelRow ?? ""]: W.value,
 			[A.value.header ?? ""]: !0
 		}));
-	}), de = o(() => r(O.value?.header, {}, f({
+	}), de = o(() => r(O.value?.header, {}, u({
 		flex: !0,
 		"mb-1": !0,
 		[G.value]: !0,
 		[A.value.header ?? ""]: !0
-	}))), fe = o(() => r(O.value?.endIcon, {}, f({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), pe = o(() => r(O.value?.end, {}, f({
+	}))), fe = o(() => r(O.value?.endIcon, {}, u({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), pe = o(() => r(O.value?.end, {}, u({
 		"group/end wrapper-end-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 		"self-stretch min-h-0 overflow-hidden py-0.5 pe-0.5": L.value,
 		"h-full min-h-0 overflow-hidden py-0.5 pe-0.5": !L.value,
 		[A.value.end ?? ""]: !0
-	}))), me = o(() => r({}, {}, f({
+	}))), me = o(() => r({}, {}, u({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
 		[ne.value ?? ""]: !0
-	}))), he = o(() => r({}, {}, f({
+	}))), he = o(() => r({}, {}, u({
 		"flex w-full min-w-0 flex-1 items-stretch gap-x-2": !0,
 		[q.value?.controlRow ?? ""]: !0
 	})));
@@ -176,7 +176,7 @@ function x(x, S, C = {}) {
 		endIconBind: fe,
 		endSlotBind: pe,
 		invalidated: j,
-		containerBind: o(() => r(O.value?.container, { "data-bridge-rounded": E.value.rounded ?? "md" }, f({
+		containerBind: o(() => r(O.value?.container, { "data-bridge-rounded": E.value.rounded ?? "md" }, u({
 			"group/field relative flex flex-row items-stretch overflow-hidden": L.value,
 			"group/field relative flex justify-start gap-x-2 items-stretch": !L.value,
 			"transition-all ease-in-out duration-150 outline-none": !0,
@@ -193,8 +193,8 @@ function x(x, S, C = {}) {
 			[X.value?.containerUnderlined ?? ""]: j.value && R.value,
 			[A.value.container ?? ""]: !0
 		}))),
-		startIconBind: o(() => r(O.value?.startIcon, {}, f({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
-		startSlotBind: o(() => r(O.value?.start, {}, f({
+		startIconBind: o(() => r(O.value?.startIcon, {}, u({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: o(() => r(O.value?.start, {}, u({
 			"group/start wrapper-start-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 			"self-stretch min-h-0 overflow-hidden py-0.5 ps-0.5": L.value,
 			"h-full min-h-0 overflow-hidden py-0.5 ps-0.5": !L.value,
@@ -202,7 +202,7 @@ function x(x, S, C = {}) {
 		}))),
 		fieldLabelProps: se,
 		ariaDescribedBy: K,
-		descriptionBind: o(() => r(O.value?.description, {}, f({
+		descriptionBind: o(() => r(O.value?.description, {}, u({
 			"mt-2 text-gray-500 dark:text-gray-400": !0,
 			[q.value?.text ?? ""]: !0,
 			[A.value.description ?? ""]: !0

package/dist/Components/FormField/formField.types.d.ts

@@ -175,7 +175,7 @@ export interface FormFieldOwnProps {
      */
     error?: boolean;
     /**
-     * Icon used when `withErrorIcon` is enabled and the field is invalid.
+     * Icon used when `showErrorIcon` is enabled and the field is invalid.
      *
      * @default "alert"
      */
@@ -194,6 +194,12 @@ export interface FormFieldOwnProps {
      * @default undefined
      */
     field?: UseFormFieldReturn;
+    /**
+     * When `true`, does not reserve space below the control for error messages.
+     *
+     * @default false
+     */
+    hideErrorMessage?: boolean;
     /**
      * The primary label text above the control.
      *
@@ -218,6 +224,13 @@ export interface FormFieldOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<FormFieldRounded, FormFieldRoundedOverrides>;
+    /**
+     * When `true` and the field is invalid, shows an error icon at the inline end
+     * when no `endIcon` or `end` slot is present.
+     *
+     * @default true
+     */
+    showErrorIcon?: boolean;
     /**
      * Typography scale for label, corner, description, and error message, and
      * control sizing (input, container, icons).
@@ -248,19 +261,6 @@ export interface FormFieldOwnProps {
      * @default "outline"
      */
     variant?: MergeProps<FormFieldVariant, FormFieldVariantOverrides>;
-    /**
-     * When `true` and the field is invalid, shows an error icon at the inline end
-     * when no `endIcon` or `end` slot is present.
-     *
-     * @default true
-     */
-    withErrorIcon?: boolean;
-    /**
-     * When `true`, does not reserve space below the control for error messages.
-     *
-     * @default false
-     */
-    withoutErrorMessage?: boolean;
 }
 export interface FormFieldSlots {
     /**

package/dist/Components/Icon/composables/useIcon.js

@@ -1,13 +1,13 @@
 import { useIconAdapter as e } from "../../../Adapters/Icon/useIconAdapter.js";
 import { mergePartBind as t, useBridgeUIComponent as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { get as a } from "es-toolkit/compat";
-import { cn as o, mergeBridgeUILayeredClasses as s, resolveIconSource as c, splitComponentProps as l } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, resolveIconSource as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l } from "es-toolkit/compat";
 import { sizeProps as u } from "@bridge-ui/core/Tokens/Icon";
 //#region src/Components/Icon/composables/useIcon.ts
 var d = ["icon", "size"];
 function f(f, p) {
-	let m = i(), h = r(() => l({
+	let m = i(), h = r(() => c({
 		bridgeKeys: d,
 		props: {
 			...m,
@@ -17,10 +17,10 @@ function f(f, p) {
 		libDefaults: p,
 		componentName: "Icon",
 		props: () => h.value.componentProps
-	}), v = e(), y = r(() => c(g.value.icon, v.value)), b = r(() => a(s(u, _.value?.tokens?.size), g.value.size));
+	}), v = e(), y = r(() => s(g.value.icon, v.value)), b = r(() => l(o(u, _.value?.tokens?.size), g.value.size));
 	return {
 		merged: g,
-		rootBind: r(() => t({}, h.value.inheritedAttrs, o({ [b.value ?? ""]: !0 }))),
+		rootBind: r(() => t({}, h.value.inheritedAttrs, a({ [b.value ?? ""]: !0 }))),
 		resolvedIcon: y
 	};
 }

package/dist/Components/Label/composables/useLabel.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { get as a } from "es-toolkit/compat";
-import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
+import { get as c } from "es-toolkit/compat";
 import { invalidatedProps as l, sizeProps as u } from "@bridge-ui/core/Tokens/Label";
 //#region src/Components/Label/composables/useLabel.ts
 var d = [
@@ -11,7 +11,7 @@ var d = [
 	"required"
 ];
 function f(f, p) {
-	let m = i(), h = r(() => c({
+	let m = i(), h = r(() => s({
 		bridgeKeys: d,
 		props: {
 			...m,
@@ -24,13 +24,13 @@ function f(f, p) {
 	}), v = n({
 		entry: _,
 		props: () => h.value.componentProps
-	}), y = r(() => a(s(u, _.value?.tokens?.size), g.value.size)), b = r(() => s(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, o({
+	}), y = r(() => c(o(u, _.value?.tokens?.size), g.value.size)), b = r(() => o(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, a({
 		[b.value.required ?? ""]: !0,
 		[v.value.required ?? ""]: !0
 	})));
 	return {
 		merged: g,
-		rootBind: r(() => e({}, h.value.inheritedAttrs, o({
+		rootBind: r(() => e({}, h.value.inheritedAttrs, a({
 			"inline-flex items-center gap-x-0.5 font-medium leading-none": !0,
 			"text-gray-700 dark:text-gray-300": !g.value.error,
 			[b.value.label ?? ""]: g.value.error,

package/dist/Components/Link/composables/useLink.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i, useSlots as a } from "vue";
-import { get as o } from "es-toolkit/compat";
-import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
+import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l } from "es-toolkit/compat";
 import { colorProps as u, sizeProps as d, underlineProps as f } from "@bridge-ui/core/Tokens/Link";
 //#region src/Components/Link/composables/useLink.ts
 var p = [
@@ -17,7 +17,7 @@ var p = [
 	"customProps"
 ];
 function m(m, h) {
-	let g = i(), _ = a(), v = r(() => l({
+	let g = i(), _ = a(), v = r(() => c({
 		bridgeKeys: p,
 		props: {
 			...g,
@@ -34,28 +34,28 @@ function m(m, h) {
 		if (y.value.external && !C.value) return "_blank";
 	}), D = r(() => {
 		if (y.value.external && !C.value) return "noopener noreferrer";
-	}), O = r(() => o(c(d, b.value?.tokens?.size), y.value.size)), k = r(() => o(c(u, b.value?.tokens?.color), y.value.color)), A = r(() => o(c(f, b.value?.tokens?.underline), y.value.underline));
+	}), O = r(() => l(s(d, b.value?.tokens?.size), y.value.size)), k = r(() => l(s(u, b.value?.tokens?.color), y.value.color)), A = r(() => l(s(f, b.value?.tokens?.underline), y.value.underline));
 	return {
 		slots: _,
 		merged: y,
 		rootRel: D,
-		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, s({
+		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, o({
 			"inline-flex items-center gap-x-1 font-medium": !0,
 			"transition-colors duration-200": !0,
 			[O.value ?? ""]: !0,
 			[A.value ?? ""]: !0,
-			[o(k.value, "base") ?? ""]: !0,
-			[o(k.value, "hover") ?? ""]: !0,
+			[l(k.value, "base") ?? ""]: !0,
+			[l(k.value, "hover") ?? ""]: !0,
 			"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
 			[S.value.root ?? ""]: !0
 		}))),
 		rootHref: T,
 		rootTarget: E,
-		leftIconBind: r(() => e(x.value?.leftIcon, {}, s({
+		leftIconBind: r(() => e(x.value?.leftIcon, {}, o({
 			"shrink-0": !0,
 			[S.value.leftIcon ?? ""]: !0
 		}))),
-		rightIconBind: r(() => e(x.value?.rightIcon, {}, s({
+		rightIconBind: r(() => e(x.value?.rightIcon, {}, o({
 			"shrink-0": !0,
 			[S.value.rightIcon ?? ""]: !0
 		}))),

package/dist/Components/List/composables/useList.js

@@ -1,8 +1,8 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as r } from "../listInjectionKey.js";
 import { computed as i, provide as a, useAttrs as o } from "vue";
-import { get as s, omit as c } from "es-toolkit/compat";
-import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
+import { cn as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l, omit as u } from "es-toolkit/compat";
 //#region src/Components/List/composables/useList.ts
 var d = [
 	"as",
@@ -12,7 +12,7 @@ var d = [
 	"customProps"
 ];
 function f(f) {
-	let p = o(), m = i(() => u({
+	let p = o(), m = i(() => c({
 		bridgeKeys: d,
 		props: {
 			...p,
@@ -26,13 +26,13 @@ function f(f) {
 		props: () => m.value.componentProps
 	});
 	a(r, i(() => ({ dense: h.value.dense === !0 })));
-	let y = i(() => c(m.value.inheritedAttrs, []));
+	let y = i(() => u(m.value.inheritedAttrs, []));
 	return {
 		merged: h,
-		rootBind: i(() => e(_.value?.root, y.value, l({
+		rootBind: i(() => e(_.value?.root, y.value, s({
 			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
-			[s(v.value, "root") ?? ""]: !0
+			[l(v.value, "root") ?? ""]: !0
 		})))
 	};
 }

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

@@ -2,8 +2,8 @@ import { ListItemOwnProps, ListItemSlots } from './listItem.types';
 type __VLS_Slots = ListItemSlots;
 declare const __VLS_base: import('vue').DefineComponent<ListItemOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListItemOwnProps> & Readonly<{}>, {
     role: "button" | "option" | "menuitem";
-    as: "li" | "div";
     disabled: boolean;
+    as: "li" | "div";
     divider: boolean;
     interactive: boolean;
     selected: boolean;

package/dist/Components/ListItem/composables/useListItem.d.ts

@@ -11,7 +11,7 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         class: string;
         id: string | undefined;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "disabled" | "as" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
     rowClass: import('vue').ComputedRef<string>;
     hasStart: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;

package/dist/Components/ListItem/composables/useListItem.js

@@ -1,11 +1,11 @@
 import { hasNamedSlot as e, isPropPresent as t, resolveNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { LIST_INJECTION_KEY as o } from "../../List/listInjectionKey.js";
-import { getListboxOptionId as s } from "../../Listbox/composables/useListboxNavigation.js";
+import { getListboxOptionId as o } from "../../Listbox/composables/useListboxNavigation.js";
+import { LIST_INJECTION_KEY as s } from "../../List/listInjectionKey.js";
 import { LISTBOX_INJECTION_KEY as c } from "../../Listbox/listboxInjectionKey.js";
 import { computed as l, getCurrentInstance as u, inject as d, onBeforeUnmount as f, toValue as p, useAttrs as m, watch as h } from "vue";
-import { get as g, isNull as _, omit as v } from "es-toolkit/compat";
-import { cn as y, splitComponentProps as b } from "@bridge-ui/core";
+import { cn as g, splitComponentProps as _ } from "@bridge-ui/core";
+import { get as v, isNull as y, omit as b } from "es-toolkit/compat";
 //#region src/Components/ListItem/composables/useListItem.ts
 var x = [
 	"as",
@@ -23,7 +23,7 @@ var x = [
 	"selectedIcon"
 ];
 function S(t, n, S) {
-	let C = m(), w = d(o, null), T = d(c, null), E = T != null, D = l(() => b({
+	let C = m(), w = d(s, null), T = d(c, null), E = T != null, D = l(() => _({
 		props: {
 			...C,
 			...t
@@ -52,13 +52,13 @@ function S(t, n, S) {
 	let N = l(() => j.value != null), P = l(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = l(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = l(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = l(() => O.value.customProps), R = a({
 		entry: k,
 		props: () => D.value.componentProps
-	}), z = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : w ? p(w).dense : !1), B = l(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = l(() => e(S, "secondary") || !!O.value.secondary), H = l(() => e(S, "start")), U = l(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || _(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), W = l(() => e(S, "end") || U.value != null), G = l(() => v(D.value.inheritedAttrs, [])), K = l(() => r(L.value?.root, G.value, {
-		class: y({
+	}), z = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : w ? p(w).dense : !1), B = l(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = l(() => e(S, "secondary") || !!O.value.secondary), H = l(() => e(S, "start")), U = l(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || y(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), W = l(() => e(S, "end") || U.value != null), G = l(() => b(D.value.inheritedAttrs, [])), K = l(() => r(L.value?.root, G.value, {
+		class: g({
 			"list-none": !0,
 			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
-			[g(R.value, "root") ?? ""]: !0
+			[v(R.value, "root") ?? ""]: !0
 		}),
-		id: N.value && A.value?.listboxId && F.value >= 0 ? s(A.value.listboxId, F.value) : void 0
+		id: N.value && A.value?.listboxId && F.value >= 0 ? o(A.value.listboxId, F.value) : void 0
 	})), q = l(() => O.value.interactive || N.value ? r(L.value?.interactive, {}, {
 		"aria-disabled": O.value.disabled ? !0 : void 0,
 		role: N.value ? "option" : O.value.role,
@@ -71,7 +71,7 @@ function S(t, n, S) {
 		onClick: N.value ? () => {
 			j.value && A.value?.onSelect(j.value);
 		} : void 0,
-		class: y({
+		class: g({
 			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
 			"cursor-pointer select-none": !O.value.disabled,
 			"px-4": !0,
@@ -84,28 +84,28 @@ function S(t, n, S) {
 			[A.value?.optionHighlightedClass ?? ""]: N.value && I.value && !P.value,
 			[A.value?.mergedClasses.optionHighlighted ?? ""]: N.value && I.value && !P.value,
 			"opacity-50 pointer-events-none": O.value.disabled,
-			[g(R.value, "interactive") ?? ""]: !0,
+			[v(R.value, "interactive") ?? ""]: !0,
 			[A.value?.sizeClasses?.option ?? ""]: !0
 		})
-	}) : null), J = l(() => y({
+	}) : null), J = l(() => g({
 		"flex w-full min-w-0 gap-x-3": !0,
 		"items-center text-dark-900 dark:text-dark-100": !O.value.interactive,
 		"px-4": !O.value.interactive,
 		"py-2": !O.value.interactive && !z.value,
 		"py-1.5": !O.value.interactive && z.value
-	})), Y = l(() => r(L.value?.start, {}, y({
+	})), Y = l(() => r(L.value?.start, {}, g({
 		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[g(R.value, "start") ?? ""]: !0
-	}))), X = l(() => r(L.value?.content, {}, y({
+		[v(R.value, "start") ?? ""]: !0
+	}))), X = l(() => r(L.value?.content, {}, g({
 		"min-w-0 flex-1": !0,
-		[g(R.value, "content") ?? ""]: !0
-	}))), Z = l(() => r(L.value?.primary, {}, y("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, g(R.value, "primary")))), Q = l(() => r(L.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, g(R.value, "secondary"))));
+		[v(R.value, "content") ?? ""]: !0
+	}))), Z = l(() => r(L.value?.primary, {}, g("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, v(R.value, "primary")))), Q = l(() => r(L.value?.secondary, {}, g("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, v(R.value, "secondary"))));
 	return {
 		merged: O,
 		hasEnd: W,
-		endBind: l(() => r(L.value?.end, {}, y({
+		endBind: l(() => r(L.value?.end, {}, g({
 			"ml-auto flex shrink-0 items-center": !0,
-			[g(R.value, "end") ?? ""]: !0
+			[v(R.value, "end") ?? ""]: !0
 		}))),
 		rootBind: K,
 		rowClass: J,
@@ -119,7 +119,7 @@ function S(t, n, S) {
 		interactiveBind: q,
 		selectedIconBind: l(() => r(L.value?.selectedIcon, {}, {
 			size: "sm",
-			class: y("shrink-0", A.value?.checkClass, g(R.value, "selectedIcon"))
+			class: g("shrink-0", A.value?.checkClass, v(R.value, "selectedIcon"))
 		})),
 		resolvedSelectedIcon: U
 	};