@bridge-ui/vue 0.0.10 → 0.1.0

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

@@ -1,12 +1,11 @@
 import { hasSlotOrProp as e } from "../../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as t, mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
 import { computed as a, toValue as o, useAttrs as s, useId as c, useSlots as l } from "vue";
-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 { sizeProps as h } from "@bridge-ui/core/Tokens/Label";
-import { invalidatedProps as g } from "@bridge-ui/core/Tokens/FormControl";
+import { get as u, omit as d } from "es-toolkit/compat";
+import { labelSizeProps as f } from "@bridge-ui/core/Tokens";
+import { cn as p, splitComponentProps as m } from "@bridge-ui/core/Utils";
 //#region src/Components/FormControl/composables/useFormControl.ts
-var _ = [
+var h = [
 	"size",
 	"error",
 	"classes",
@@ -21,88 +20,84 @@ var _ = [
 	"errorMessage",
 	"hideErrorMessage"
 ];
-function v(v, y, b = {}) {
-	let x = c(), S = l(), C = s(), w = a(() => f({
-		bridgeKeys: _,
+function g(g, _, v = {}) {
+	let y = c(), b = l(), x = s(), S = a(() => m({
+		bridgeKeys: h,
 		props: {
-			...C,
-			...o(v)
+			...x,
+			...o(g)
 		}
-	})), { merged: T, entry: E } = r({
-		libDefaults: y,
-		componentName: b.componentName,
-		props: () => w.value.componentProps
-	}), D = a(() => T.value.customProps), O = i({
-		entry: E,
-		props: () => w.value.componentProps
-	}), k = a(() => T.value.error === !0), A = a(() => !!T.value.disabled), j = a(() => !!T.value.readonly), M = a(() => {
-		let e = w.value.inheritedAttrs.id;
-		return T.value.controlId ?? e ?? x;
-	}), N = a(() => !T.value.hideErrorMessage), P = a(() => k.value && e(S, "errorMessage", T.value.errorMessage)), F = a(() => {
+	})), { merged: C, entry: w } = r({
+		libDefaults: _,
+		componentName: v.componentName,
+		props: () => S.value.componentProps
+	}), T = a(() => C.value.customProps), E = i({
+		entry: w,
+		props: () => S.value.componentProps
+	}), D = a(() => C.value.error === !0), O = a(() => !!C.value.disabled), k = a(() => !!C.value.readonly), A = a(() => {
+		let e = S.value.inheritedAttrs.id;
+		return C.value.controlId ?? e ?? y;
+	}), j = a(() => !C.value.hideErrorMessage), M = a(() => D.value && e(b, "errorMessage", C.value.errorMessage)), N = a(() => {
 		let t = [];
-		return !k.value && e(S, "description", T.value.description) && t.push(`${M.value}-description`), k.value && N.value && e(S, "errorMessage", T.value.errorMessage) && t.push(`${M.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), I = a(() => p(h, T.value.size ?? "md")), L = a(() => d(g, p(E.value, [
-		"tokens",
-		"formControl",
-		"invalidated"
-	]), T.value.customProps?.invalidated)), R = a(() => n(D.value?.root, m(w.value.inheritedAttrs, ["class"]), u({
+		return !D.value && e(b, "description", C.value.description) && t.push(`${A.value}-description`), D.value && j.value && e(b, "errorMessage", C.value.errorMessage) && t.push(`${A.value}-error`), t.length > 0 ? t.join(" ") : void 0;
+	}), P = a(() => u(f, C.value.size ?? "md")), F = a(() => n(T.value?.root, d(S.value.inheritedAttrs, ["class"]), p({
 		"group/form-control relative w-full": !0,
 		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60 aria-disabled:cursor-not-allowed": !0,
 		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[O.value.root ?? ""]: !0,
-		[C.class]: !!C.class
-	}))), z = a(() => n(D.value?.row, {}, u({
+		[E.value.root ?? ""]: !0,
+		[x.class]: !!x.class
+	}))), I = a(() => n(T.value?.row, {}, p({
 		"flex flex-row items-center gap-x-2": !0,
-		[O.value.row ?? ""]: !0
-	}))), B = a(() => {
-		let e = (e) => t(D.value?.[e], {
-			for: M.value,
-			size: T.value.size,
-			error: k.value,
-			required: T.value.required,
-			classes: { root: u({
+		[E.value.row ?? ""]: !0
+	}))), L = a(() => {
+		let e = (e) => t(T.value?.[e], {
+			for: A.value,
+			size: C.value.size,
+			error: D.value,
+			required: C.value.required,
+			classes: { root: p({
 				"cursor-pointer": !0,
-				[O.value[e] ?? ""]: !0
+				[E.value[e] ?? ""]: !0
 			}) }
 		});
 		return {
 			endLabel: e("endLabel"),
 			startLabel: e("startLabel")
 		};
-	}), V = a(() => n(D.value?.description, { id: `${M.value}-description` }, u({
+	}), R = a(() => n(T.value?.description, { id: `${A.value}-description` }, p({
 		"mt-2 text-dark-500 dark:text-dark-400": !0,
-		[I.value ?? ""]: !0,
-		[O.value.description ?? ""]: !0
-	}))), H = a(() => n(D.value?.errorMessage, { id: `${M.value}-error` }, u({
+		[P.value ?? ""]: !0,
+		[E.value.description ?? ""]: !0
+	}))), z = a(() => n(T.value?.errorMessage, { id: `${A.value}-error` }, p({
 		"mt-2": !0,
-		"min-h-[1lh]": N.value,
-		[L.value.errorMessage ?? ""]: !0,
-		[I.value ?? ""]: !0,
-		[O.value.errorMessage ?? ""]: !0
+		"min-h-[1lh]": j.value,
+		"text-error-600 dark:text-error-400": !0,
+		[P.value ?? ""]: !0,
+		[E.value.errorMessage ?? ""]: !0
 	})));
 	return {
-		slots: S,
-		merged: T,
-		rowBind: z,
-		rootBind: R,
-		controlId: M,
-		isDisabled: A,
-		isReadonly: j,
+		slots: b,
+		merged: C,
+		rowBind: I,
+		rootBind: F,
+		controlId: A,
+		isDisabled: O,
+		isReadonly: k,
 		controlBind: a(() => ({
-			id: M.value,
-			disabled: A.value,
-			readonly: j.value,
-			"aria-describedby": F.value,
-			required: T.value.required || void 0,
-			"aria-invalid": k.value || void 0
+			id: A.value,
+			disabled: O.value,
+			readonly: k.value,
+			"aria-describedby": N.value,
+			required: C.value.required || void 0,
+			"aria-invalid": D.value || void 0
 		})),
-		invalidated: k,
-		fieldLabelProps: B,
-		descriptionBind: V,
-		errorMessageBind: H,
-		showErrorMessageContent: P,
-		reservesErrorMessageSpace: N
+		invalidated: D,
+		fieldLabelProps: L,
+		descriptionBind: R,
+		errorMessageBind: z,
+		showErrorMessageContent: M,
+		reservesErrorMessageSpace: j
 	};
 }
 //#endregion
-export { _ as formControlBridgeKeys, v as useFormControl };
+export { h as formControlBridgeKeys, g as useFormControl };

package/dist/Components/FormControl/formControl.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { FormControlInvalidated, LabelSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { LabelSize } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { UseFormControlReturn } from './composables/useFormControl';
 import { LabelProps } from '../Label/label.types';
 export interface FormControlSizeOverrides {}
@@ -44,12 +45,6 @@ export interface FormControlCustomProps {
      * Props forwarded to the error message element.
      */
     errorMessage?: HTMLAttributes;
-    /**
-     * Error-state message colors (`errorMessage`). Label colors come from `Label` when `error` is set.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<FormControlInvalidated>;
     /**
      * Props forwarded to the root wrapper.
      */

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, MaybeRefOrGetter } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { FormFieldOwnProps, FormFieldSlots } from '../formField.types';
 import { LabelProps } from '../../Label/label.types';
 export type FormFieldReservedSlotName = Exclude<keyof FormFieldSlots, "default">;
@@ -33,8 +33,8 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     }>;
     merged: import('vue').ComputedRef<FormFieldMerged>;
     control: import('vue').ComputedRef<string>;
-    endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
+    endBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {
         onCopy?: ((payload: ClipboardEvent) => void) | undefined;
         onCut?: ((payload: ClipboardEvent) => void) | undefined;
         onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -154,7 +154,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         'aria-expanded'?: (boolean | "true" | "false") | undefined;
         'aria-flowto'?: string | undefined | undefined;
         'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-haspopup'?: "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | "dialog" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
         'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined | undefined;
@@ -190,7 +190,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
         hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
         inert?: (boolean | "true" | "false") | undefined;
         placeholder?: string | undefined | undefined;
@@ -224,9 +224,9 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         class: string;
     }>>;
     controlId: import('vue').ComputedRef<string>;
-    errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    errorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     errorIcon: import('vue').ComputedRef<NonNullable<import('../../..').IconSource | undefined>>;
-    inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
+    inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
         id: string;
         disabled: boolean;
         readonly: boolean;
@@ -450,27 +450,27 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     }, 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, {}>>;
-    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    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>;
-    variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>>;
-    endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-    endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>>;
+    endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     invalidated: import('vue').ComputedRef<boolean>;
-    containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
-        "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
+    containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
     }>>;
-    startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-    startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     fieldLabelProps: import('vue').ComputedRef<LabelProps>;
     ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
-    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    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", {}, {}>>;
     hasInsetLabelRow: import('vue').ComputedRef<boolean>;
-    insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    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", {}, {}>>;
     showErrorMessageContent: import('vue').ComputedRef<boolean>;
     reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
 };

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

@@ -1,9 +1,9 @@
 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 { 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";
+import { get as u, omit as d } from "es-toolkit/compat";
+import { formFieldColorProps as f, formFieldRoundedProps as p, formFieldSizeProps as m, formFieldVariantProps as h } from "@bridge-ui/core/Tokens";
+import { cn as g, getColorToken as _, mergeBridgeUILayeredClasses as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
 //#region src/Components/FormField/composables/useFormField.ts
 var b = [
 	"end",
@@ -29,81 +29,81 @@ var b = [
 	"hideErrorMessage"
 ];
 function x(x, S, C = {}) {
-	let ee = c(), w = l(), T = o(() => f({
+	let w = c(), T = l(), E = o(() => y({
 		props: s(x),
 		bridgeKeys: b
-	})), { merged: E, entry: D } = i({
+	})), { merged: D, entry: O } = i({
 		libDefaults: S,
 		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.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(() => {
+		props: () => E.value.componentProps
+	}), k = o(() => D.value.customProps), A = o(() => C.control?.() ?? "input"), j = a({
+		entry: O,
+		props: () => E.value.componentProps
+	}), M = o(() => D.value.error === !0), N = o(() => !!D.value.disabled), P = o(() => !!D.value.readonly), F = o(() => D.value.variant ?? "outline"), ee = o(() => D.value.errorIcon ?? "alert"), I = o(() => F.value === "notched"), L = o(() => F.value === "stacked"), R = o(() => F.value === "underlined"), z = o(() => A.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !D.value.hideErrorMessage), H = o(() => {
+		let e = E.value.inheritedAttrs.id;
+		return D.value.controlId ?? e ?? w;
+	}), U = o(() => M.value && t(T, "errorMessage", D.value.errorMessage)), W = o(() => (I.value || L.value) && (t(T, "label", D.value.label) || t(T, "corner", D.value.corner))), G = o(() => t(T, "label", D.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.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+		return !M.value && t(T, "description", D.value.description) && e.push(`${H.value}-description`), M.value && !D.value.hideErrorMessage && t(T, "errorMessage", D.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
 	}), q = o(() => {
-		let e = d(v, D.value?.tokens?.size);
-		return p(e, [E.value.size, P.value]);
+		let e = v(m, O.value?.tokens?.size);
+		return u(e, [D.value.size, F.value]);
 	}), J = o(() => {
-		let e = d(h, D.value?.tokens?.color);
-		return p(e, 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(() => {
-		let e = d(_, D.value?.tokens?.rounded);
-		return p(e, E.value.rounded);
-	}), Q = o(() => {
-		let e = d(y, D.value?.tokens?.variant);
-		return p(e, 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 u({
+		let e = v(f, O.value?.tokens?.color);
+		return _({
+			tokens: e,
+			color: D.value.color,
+			invalid: M.value
+		});
+	}), Y = o(() => {
+		let e = v(p, O.value?.tokens?.rounded);
+		return u(e, D.value.rounded);
+	}), X = o(() => {
+		let e = v(h, O.value?.tokens?.variant);
+		return u(e, F.value);
+	}), Z = o(() => R.value ? J.value?.underlined : J.value?.input), Q = o(() => {
+		if (L.value) return g({
 			[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 : u({
+	}), te = o(() => {
+		let t = C.reservedSlots?.() ?? [], n = e(T, "end") || t.includes("end"), r = e(T, "start") || t.includes("start");
+		if (!L.value) return !r && !n ? q.value?.padding : g({
 			[q.value?.insetStart ?? ""]: !r,
 			[q.value?.insetEnd ?? ""]: !n
 		});
-	}), ie = o(() => r(O.value?.end, {}, u({
+	}), ne = o(() => r(k.value?.end, {}, g({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
-		"text-dark-500": !j.value,
-		[Z.value?.end ?? ""]: !R.value && !L.value,
-		[J.value?.end ?? ""]: !j.value,
-		[X.value?.adornment ?? ""]: j.value,
-		[A.value.end ?? ""]: !0
-	}))), ae = o(() => {
-		let e = T.value.inheritedAttrs;
-		return r(O.value?.root, {
-			class: u(e.class),
-			...m(e, ["class"])
-		}, u({
+		"text-dark-500": !0,
+		[Y.value?.end ?? ""]: !R.value && !L.value,
+		[J.value?.end ?? ""]: !0,
+		[j.value.end ?? ""]: !0
+	}))), re = o(() => {
+		let e = E.value.inheritedAttrs;
+		return r(k.value?.root, {
+			class: g(e.class),
+			...d(e, ["class"])
+		}, g({
 			"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
+			[j.value.root ?? ""]: !0
 		}));
-	}), oe = o(() => r(O.value?.errorMessage, {}, u({
+	}), ie = o(() => r(k.value?.errorMessage, {}, g({
 		"mt-2": !0,
 		"min-h-[1lh]": V.value,
-		[X.value?.errorMessage ?? ""]: !0,
+		"text-error-600 dark:text-error-400": !0,
 		[q.value?.text ?? ""]: !0,
-		[A.value.errorMessage ?? ""]: !0
-	}))), $ = o(() => r({
-		...O.value?.input,
+		[j.value.errorMessage ?? ""]: !0
+	}))), ae = o(() => r({
+		...k.value?.input,
 		id: H.value,
-		disabled: M.value,
-		readonly: N.value,
+		disabled: N.value,
+		readonly: P.value,
 		"aria-describedby": K.value,
-		"aria-invalid": j.value || void 0
-	}, m(T.value.inheritedAttrs, ["class"]), u({
+		"aria-invalid": M.value || void 0
+	}, d(E.value.inheritedAttrs, ["class"]), g({
 		"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,
@@ -113,116 +113,115 @@ function x(x, S, C = {}) {
 		[q.value?.input ?? ""]: !z.value,
 		[q.value?.textarea ?? ""]: z.value,
 		[q.value?.textareaLikeInput ?? ""]: B.value,
-		[A.value.input ?? ""]: !0
-	}))), se = o(() => n(O.value?.label, {
+		[j.value.input ?? ""]: !0
+	}))), oe = o(() => n(k.value?.label, {
 		for: H.value,
-		size: E.value.size,
-		error: j.value,
-		required: E.value.required,
+		size: D.value.size,
+		error: M.value,
+		required: D.value.required,
 		classes: {
-			required: A.value.required,
-			root: u({
-				[Q.value?.label ?? ""]: I.value,
-				[A.value.label ?? ""]: !0
+			required: j.value.required,
+			root: g({
+				[X.value?.label ?? ""]: I.value,
+				[j.value.label ?? ""]: !0
 			})
 		}
-	})), ce = o(() => r(O.value?.start, {}, u({
+	})), $ = o(() => r(k.value?.start, {}, g({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
-		"text-dark-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, {}, u({
+		"text-dark-400": !0,
+		[Y.value?.start ?? ""]: !R.value && !L.value,
+		[J.value?.start ?? ""]: !0,
+		[j.value.start ?? ""]: !0
+	}))), se = o(() => r(k.value?.corner, {}, g({
 		"text-dark-500 dark:text-dark-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, {}, u({
+		[X.value?.corner ?? ""]: I.value,
+		[j.value.corner ?? ""]: !0
+	}))), ce = o(() => {
+		let e = t(T, "label", D.value.label);
+		return r(k.value?.header, {}, g({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
 			"justify-end": !e,
 			"items-center": I.value,
 			"items-end": L.value,
-			[Q.value?.labelRow ?? ""]: W.value,
-			[A.value.header ?? ""]: !0
+			[X.value?.labelRow ?? ""]: W.value,
+			[j.value.header ?? ""]: !0
 		}));
-	}), de = o(() => r(O.value?.header, {}, u({
+	}), le = o(() => r(k.value?.header, {}, g({
 		flex: !0,
 		"mb-1": !0,
 		[G.value]: !0,
-		[A.value.header ?? ""]: !0
-	}))), 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({
+		[j.value.header ?? ""]: !0
+	}))), ue = o(() => r(k.value?.endIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), de = o(() => r(k.value?.end, {}, g({
 		"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({}, {}, u({
+		[j.value.end ?? ""]: !0
+	}))), fe = o(() => r({}, {}, g({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
-		[ne.value ?? ""]: !0
-	}))), he = o(() => r({}, {}, u({
+		[Q.value ?? ""]: !0
+	}))), pe = o(() => r({}, {}, g({
 		"flex w-full min-w-0 flex-1 items-stretch gap-x-2": !0,
 		[q.value?.controlRow ?? ""]: !0
 	})));
 	return {
-		slots: w,
-		merged: E,
-		control: k,
-		endBind: ie,
-		rootBind: ae,
+		slots: T,
+		merged: D,
+		control: A,
+		endBind: ne,
+		rootBind: re,
 		controlId: H,
-		errorBind: oe,
-		errorIcon: F,
-		inputBind: $,
+		errorBind: ie,
+		errorIcon: ee,
+		inputBind: ae,
 		isNotched: I,
 		isStacked: L,
-		startBind: ce,
-		cornerBind: le,
-		headerBind: de,
-		isDisabled: M,
-		isReadonly: N,
-		variantKey: P,
-		endIconBind: fe,
-		endSlotBind: pe,
-		invalidated: j,
-		containerBind: o(() => r(O.value?.container, { "data-bridge-rounded": E.value.rounded ?? "md" }, u({
+		startBind: $,
+		cornerBind: se,
+		headerBind: le,
+		isDisabled: N,
+		isReadonly: P,
+		variantKey: F,
+		endIconBind: ue,
+		endSlotBind: de,
+		invalidated: M,
+		containerBind: o(() => r(k.value?.container, { "data-bridge-rounded": D.value.rounded ?? "md" }, g({
 			"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,
-			"bg-dark-100 dark:bg-dark-800": M.value && !j.value,
+			"bg-dark-100 dark:bg-dark-800": N.value && !M.value,
 			[q.value?.container ?? ""]: !z.value,
 			[q.value?.containerTextareaLikeInput ?? ""]: B.value,
 			[q.value?.containerTextarea ?? ""]: z.value && !B.value,
-			[Q.value?.container ?? ""]: !0,
-			[Z.value?.input ?? ""]: !R.value,
-			[re.value ?? ""]: !0,
+			[X.value?.container ?? ""]: !0,
+			[Y.value?.input ?? ""]: !R.value,
 			[te.value ?? ""]: !0,
+			[Z.value ?? ""]: !0,
 			"rounded-none": R.value,
-			[X.value?.container ?? ""]: j.value && !R.value,
-			[X.value?.containerUnderlined ?? ""]: j.value && R.value,
-			[A.value.container ?? ""]: !0
+			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": M.value && !R.value,
+			"border-error-500 dark:border-error-600": M.value && R.value,
+			[j.value.container ?? ""]: !0
 		}))),
-		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({
+		startIconBind: o(() => r(k.value?.startIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: o(() => r(k.value?.start, {}, g({
 			"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,
-			[A.value.start ?? ""]: !0
+			[j.value.start ?? ""]: !0
 		}))),
-		fieldLabelProps: se,
+		fieldLabelProps: oe,
 		ariaDescribedBy: K,
-		descriptionBind: o(() => r(O.value?.description, {}, u({
+		descriptionBind: o(() => r(k.value?.description, {}, g({
 			"mt-2 text-dark-500 dark:text-dark-400": !0,
 			[q.value?.text ?? ""]: !0,
-			[A.value.description ?? ""]: !0
+			[j.value.description ?? ""]: !0
 		}))),
-		stackedBodyBind: me,
+		stackedBodyBind: fe,
 		hasInsetLabelRow: W,
-		insetLabelRowBind: ue,
-		stackedInputRowBind: he,
+		insetLabelRowBind: ce,
+		stackedInputRowBind: pe,
 		showErrorMessageContent: U,
 		reservesErrorMessageSpace: V
 	};

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
-import { FormFieldColor, FormFieldInvalidated, FormFieldRounded, FormFieldSize, FormFieldVariant, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { FormFieldColor, FormFieldRounded, FormFieldSize, FormFieldVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { IconSource } from '../../Adapters/Icon';
 import { UseFormFieldReturn } from './composables/useFormField';
 import { IconProps } from '../Icon';
@@ -87,12 +88,6 @@ export interface FormFieldCustomProps {
      * Props forwarded to the `<input>`.
      */
     input?: Partial<InputHTMLAttributes>;
-    /**
-     * Error-state field chrome colors (container, adornments, input, …). Label colors come from `Label` when `error` is set.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<FormFieldInvalidated>;
     /**
      * Props forwarded to the primary `Label` (content stays owned by `FormField`).
      *