@bridge-ui/vue 0.0.11 → 0.1.1

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

@@ -2,10 +2,10 @@
 name: bridge-ui-components
 description: >-
   Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
-  Link, List, Tabs, Spinner, Skeleton, Progress, TextField, Select,
+  Link, List, Tabs, Spinner, Skeleton, Progress, Stepper, TextField, Select,
   Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
-  TimeField, TimePicker, DateTimeField, DateTimePicker, classes, customProps,
-  slots. Use when building UI with Bridge components.
+  TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
+  classes, customProps, slots. Use when building UI with Bridge components.
 ---
 
 # Bridge UI (Vue) — components
@@ -24,6 +24,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Badge                         | `.ai/docs/components/Badge.md`                                        |
 | Alert                         | `.ai/docs/components/Alert.md`                                        |
 | Accordion                     | `.ai/docs/components/Accordion.md`                                    |
+| Stepper                       | `.ai/docs/components/Stepper.md`                                      |
 | Icon                          | `.ai/docs/components/Icon.md`                                         |
 | Lists                         | `.ai/docs/components/List.md`                                         |
 | Tabs                          | `.ai/docs/components/Tabs.md`                                         |
@@ -35,6 +36,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Time range                    | `.ai/docs/components/TimeRangeField.md`, `TimeRangePicker.md`         |
 | Date-time                     | `.ai/docs/components/DateTimeField.md`, `DateTimePicker.md`           |
 | Date-time range               | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
+| Color                         | `.ai/docs/components/ColorField.md`, `ColorPicker.md`                 |
 | Spinner / skeleton / progress | `.ai/docs/components/Spinner.md`, `Skeleton.md`, `Progress.md`        |
 | Index                         | `.ai/docs/README.md`                                                  |
 

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

@@ -5,7 +5,8 @@ description: >-
   NumberField, OtpField, Select, Autocomplete, Slider, Checkbox, Radio,
   Switch, DateField, DatePicker, DateRangeField, DateRangePicker, TimeField,
   TimePicker, TimeRangeField, TimeRangePicker, DateTimeField, DateTimePicker,
-  DateTimeRangeField, DateTimeRangePicker, FormField, FormControl, BaseField.
+  DateTimeRangeField, DateTimeRangePicker, ColorField, ColorPicker, FormField,
+  FormControl, BaseField.
   Use when wiring inputs, date/time pickers, validation chrome, or select.
 ---
 
@@ -34,6 +35,7 @@ Controlled fields: **`v-model` / `modelValue`**. Never React `value`/`onChange`.
 | Time range                | `.ai/docs/components/TimeRangeField.md`, `TimeRangePicker.md`         |
 | Date-time                 | `.ai/docs/components/DateTimeField.md`, `DateTimePicker.md`           |
 | Date-time range           | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
+| Color                     | `.ai/docs/components/ColorField.md`, `ColorPicker.md`                 |
 | Input chrome              | `.ai/docs/components/FormField.md`                                    |
 | Toggle row chrome         | `.ai/docs/components/FormControl.md`                                  |
 | Custom control chrome     | `.ai/docs/components/BaseField.md`                                    |
@@ -43,4 +45,4 @@ Controlled fields: **`v-model` / `modelValue`**. Never React `value`/`onChange`.
 1. Map validation to `error`, `error-message`, `description`, `disabled`, `readOnly`.
 2. Native input attrs often go through `:custom-props` → `input` — see TextField docs.
 3. Use only documented option shapes for Select/Autocomplete.
-4. Prefer public fields/controls in apps. `FormField`, `FormControl`, `BaseField`, and `Listbox` are exported building blocks for advanced composition — they are **not** registry keys. Theme via the public parent (`components.TextField`, `tokens.baseField`, `tokens.formControl`, `tokens.listbox` on Select/Autocomplete). Shared form density: `global.formDefaults: { size, rounded }` (Radio/Switch ignore `rounded`).
+4. Prefer public fields/controls in apps. `FormField`, `FormControl`, and `BaseField` are exported building blocks for advanced composition — they are **not** registry keys. Theme via the public parent (`components.TextField`, `tokens.baseField`, `tokens.formControl`). Dropdown tokens live on `components.Listbox`. Shared form density: `global.formDefaults: { size, rounded }` (Radio/Switch ignore `rounded`).

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

@@ -728,15 +728,14 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
         color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
-        componentName: "Select" | "Autocomplete";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;
         emptyMessage: string;
         entries: ListboxEntry[];
+        error: boolean;
         hideEmptyMessage: boolean;
         highlightedIndex: number;
-        invalidated: boolean;
         isSelected: (value: import('@bridge-ui/core/Domain').ListboxValue) => boolean;
         labelledBy: string;
         listboxId: string;

package/dist/Components/Autocomplete/composables/useAutocomplete.js

@@ -5,12 +5,12 @@ import { mergePartBind as r, resolveFieldAdornmentIconSize as i, useBridgeUIComp
 import { formFieldBridgeKeys as ne, useFormField as re } from "../../FormField/composables/useFormField.js";
 import { useListboxNavigation as ie } from "../../Listbox/composables/useListboxNavigation.js";
 import { Comment as ae, Text as oe, computed as o, nextTick as s, onBeforeUnmount as se, onMounted as ce, ref as c, useAttrs as le, useId as ue, useSlots as de, watch as l } from "vue";
-import { get as u, isNil as fe, omit as pe } from "es-toolkit/compat";
-import { commitFreeSoloValue as d, createSelectAsyncSearch as me, filterListboxEntries as he, flattenListboxOptions as f, normalizeListboxEntries as ge, normalizeSelectOptions as _e, resolveFieldOverlay as ve, resolveSelectAsyncDebounce as ye, resolveSelectAsyncOptions as be, selectValuesEqual as p } from "@bridge-ui/core/Domain";
-import { listboxColorProps as xe, listboxInvalidatedProps as Se } from "@bridge-ui/core/Tokens";
-import { adjustAutosizeTextareaHeight as Ce, cn as m, mergeBridgeUILayeredClasses as we, splitComponentProps as Te } from "@bridge-ui/core/Utils";
+import { get as fe, isNil as pe, omit as me } from "es-toolkit/compat";
+import { commitFreeSoloValue as u, createSelectAsyncSearch as he, filterListboxEntries as ge, flattenListboxOptions as d, normalizeListboxEntries as _e, normalizeSelectOptions as ve, resolveFieldOverlay as ye, resolveSelectAsyncDebounce as be, resolveSelectAsyncOptions as xe, selectValuesEqual as f } from "@bridge-ui/core/Domain";
+import { listboxColorProps as Se } from "@bridge-ui/core/Tokens";
+import { adjustAutosizeTextareaHeight as Ce, cn as p, getColorToken as we, mergeBridgeUILayeredClasses as Te, splitComponentProps as Ee } from "@bridge-ui/core/Utils";
 //#region src/Components/Autocomplete/composables/useAutocomplete.ts
-var Ee = [
+var De = [
 	"classes",
 	"loading",
 	"options",
@@ -34,13 +34,13 @@ var Ee = [
 	"minItemsForSearch",
 	"optionDescription"
 ];
-function h(h, g, _, v, De) {
-	let Oe = le(), y = de(), b = ue(), ke = n(), x = e(), S = c(!1), C = c(""), w = c(!1), T = c(-1), E = c([]), D = c([]), O = c([]), Ae = c(null), k = null, je = o(() => Te({
+function m(m, h, g, _, Oe) {
+	let ke = le(), v = de(), y = ue(), Ae = n(), b = e(), x = c(!1), S = c(""), C = c(!1), w = c(-1), T = c([]), E = c([]), D = c([]), O = c(null), k = null, je = o(() => Ee({
 		props: {
-			...Oe,
-			...h
+			...ke,
+			...m
 		},
-		bridgeKeys: Ee
+		bridgeKeys: De
 	})), A = o(() => je.value.componentProps), Me = o(() => ({ classes: A.value.classes })), { components: Ne, entry: Pe } = ee({
 		componentName: "Autocomplete",
 		props: () => Me.value
@@ -51,10 +51,10 @@ function h(h, g, _, v, De) {
 		optionLabel: A.value.optionLabel ?? "label",
 		optionValue: A.value.optionValue ?? "value",
 		optionDescription: A.value.optionDescription ?? "description"
-	})), P = o(() => De.value.length > 0 ? De.value.map((e) => ({
+	})), P = o(() => Oe.value.length > 0 ? Oe.value.map((e) => ({
 		option: e,
 		type: "option"
-	})) : ge(A.value.options, N.value)), Fe = o(() => f(P.value)), F = c([]);
+	})) : _e(A.value.options, N.value)), Fe = o(() => d(P.value)), F = c([]);
 	function Ie(e) {
 		if (!e || typeof e != "object") return !1;
 		let t = e.type;
@@ -63,7 +63,7 @@ function h(h, g, _, v, De) {
 		return n === "AutocompleteOption" || r === "AutocompleteOption";
 	}
 	function Le() {
-		return t(y, "default") ? (y.default?.({}) ?? []).some((e) => {
+		return t(v, "default") ? (v.default?.({}) ?? []).some((e) => {
 			if (!e || typeof e != "object") return !1;
 			let t = e.type;
 			return t === ae || t === oe || t === void 0 || typeof t == "symbol" ? !1 : !Ie(e);
@@ -71,24 +71,24 @@ function h(h, g, _, v, De) {
 	}
 	let I = o(() => Le() && !A.value.options?.length), L = o(() => {
 		if (I.value) return [];
-		if (D.value.length > 0) {
-			let e = ge(D.value, N.value);
+		if (E.value.length > 0) {
+			let e = _e(E.value, N.value);
 			return A.value.flipOptions ? [...e].reverse() : e;
 		}
 		return A.value.flipOptions ? [...P.value].reverse().map((e) => e.type === "section" ? {
 			...e,
 			options: [...e.options].reverse()
 		} : e) : P.value;
-	}), Re = o(() => I.value ? F.value : f(L.value)), R = o(() => {
-		let e = g.value;
-		return M.value ? Array.isArray(e) ? e : [] : !fe(e) && e !== "" ? [e] : [];
-	}), ze = o(() => ve(A.value.overlay, ke.mobile)), z = te({
+	}), Re = o(() => I.value ? F.value : d(L.value)), R = o(() => {
+		let e = h.value;
+		return M.value ? Array.isArray(e) ? e : [] : !pe(e) && e !== "" ? [e] : [];
+	}), ze = o(() => ye(A.value.overlay, Ae.mobile)), z = te({
 		overlay: ze,
 		componentName: "Autocomplete",
 		showFooter: () => A.value.showFooter
-	}), Be = o(() => z.value ? E.value : R.value), B = o(() => {
+	}), Be = o(() => z.value ? T.value : R.value), B = o(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of [...Re.value, ...O.value]) e.set(t.value, t);
+		for (let t of [...Re.value, ...D.value]) e.set(t.value, t);
 		return R.value.map((t) => e.get(t) ?? {
 			value: t,
 			label: String(t)
@@ -97,33 +97,33 @@ function h(h, g, _, v, De) {
 		if (H.value || (A.value.searchable ?? !0)) return !0;
 		let e = A.value.minItemsForSearch ?? 11;
 		return Fe.value.length >= e;
-	}), W = o(() => S.value && U.value), He = o(() => !!A.value.loading || w.value), Ue = o(() => {
+	}), W = o(() => x.value && U.value), He = o(() => !!A.value.loading || C.value), Ue = o(() => {
 		if (I.value) return [];
-		if (!W.value || !C.value.trim()) return L.value;
-		let e = C.value.trim().toLowerCase();
-		return he(L.value, (t) => t.label.toLowerCase().includes(e));
-	}), G = o(() => I.value ? F.value : f(Ue.value)), K = ie(() => G.value, T, b), We = o(() => h.readonly || h.disabled ? !0 : !W.value), Ge = o(() => W.value || M.value ? C.value : B.value[0]?.label ?? ""), Ke = (e) => {
-		Ae.value = e instanceof HTMLElement ? e : null;
+		if (!W.value || !S.value.trim()) return L.value;
+		let e = S.value.trim().toLowerCase();
+		return ge(L.value, (t) => t.label.toLowerCase().includes(e));
+	}), G = o(() => I.value ? F.value : d(Ue.value)), K = ie(() => G.value, w, y), We = o(() => m.readonly || m.disabled ? !0 : !W.value), Ge = o(() => W.value || M.value ? S.value : B.value[0]?.label ?? ""), Ke = (e) => {
+		O.value = e instanceof HTMLElement ? e : null;
 	};
 	function qe(e) {
 		e.preventDefault();
 	}
 	function Je(e) {
-		if (h.disabled || h.readonly) return;
+		if (m.disabled || m.readonly) return;
 		let t = e.target;
 		if (!t.closest("[data-autocomplete-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
-			if (!S.value) {
+			if (!x.value) {
 				Z();
 				return;
 			}
-			W.value || (Q(), _.value?.focus({ preventScroll: !0 }));
+			W.value || (Q(), g.value?.focus({ preventScroll: !0 }));
 		}
 	}
 	let Ye = o(() => {
-		let e = pe(je.value.inheritedAttrs, ["class"]), n = Te({
+		let e = me(je.value.inheritedAttrs, ["class"]), n = Ee({
 			bridgeKeys: ne,
 			props: e
-		}).componentProps, i = n.endIcon ?? (t(y, "end") ? void 0 : "chevronUpDown"), { listbox: ee, ...a } = n.customProps ?? {};
+		}).componentProps, i = n.endIcon ?? (t(v, "end") ? void 0 : "chevronUpDown"), { listbox: ee, ...a } = n.customProps ?? {};
 		return {
 			...n,
 			endIcon: i,
@@ -133,11 +133,11 @@ function h(h, g, _, v, De) {
 				container: r(a.container, {}, {
 					ref: Ke,
 					onClick: Je,
-					class: m({ "cursor-pointer": !h.disabled && !h.readonly && !W.value })
+					class: p({ "cursor-pointer": !m.disabled && !m.readonly && !W.value })
 				})
 			}
 		};
-	}), Xe = o(() => h.customProps?.listbox), q = re(() => Ye.value, {
+	}), Xe = o(() => m.customProps?.listbox), q = re(() => Ye.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
@@ -147,86 +147,86 @@ function h(h, g, _, v, De) {
 		componentName: "Autocomplete",
 		likeInput: () => M.value,
 		control: () => M.value ? "textarea" : "input"
-	}), Ze = o(() => V.value && Ve.value && !h.readonly && !q.isDisabled.value), J = (e) => {
+	}), Ze = o(() => V.value && Ve.value && !m.readonly && !q.isDisabled.value), J = (e) => {
 		!e || !M.value || Ce(e);
 	};
 	function Qe(e) {
-		return Be.value.some((t) => p(t, e));
+		return Be.value.some((t) => f(t, e));
 	}
 	function Y(e) {
-		g.value = e;
+		h.value = e;
 	}
 	function X(e) {
 		if (M.value) {
 			let t = Array.isArray(e) ? e : [];
-			v("update:modelValue", t), v("change", t);
+			_("update:modelValue", t), _("change", t);
 			return;
 		}
 		let t = e ?? "";
-		v("update:modelValue", t), v("change", t);
+		_("update:modelValue", t), _("change", t);
 	}
 	function Z() {
-		h.disabled || h.readonly || S.value || (E.value = [...R.value], S.value = !0, C.value = "", K.highlightCurrentSelection((e) => R.value.some((t) => p(t, e))), v("open"), H.value && A.value.asyncData && k?.searchImmediate(""));
+		m.disabled || m.readonly || x.value || (T.value = [...R.value], x.value = !0, S.value = "", K.highlightCurrentSelection((e) => R.value.some((t) => f(t, e))), _("open"), H.value && A.value.asyncData && k?.searchImmediate(""));
 	}
 	function Q(e) {
 		k?.cancel();
-		let t = S.value;
+		let t = x.value;
 		if (t && e?.commitFreeSolo && A.value.freeSolo !== !1) {
-			let e = d(C.value, R.value, M.value);
+			let e = u(S.value, R.value, M.value);
 			e != null && (Y(e), X(e), M.value && s(() => {
-				J(_.value), _.value?.focus({ preventScroll: !0 });
+				J(g.value), g.value?.focus({ preventScroll: !0 });
 			}));
 		}
-		C.value = "", T.value = -1, t && (S.value = !1, v("close"));
+		S.value = "", w.value = -1, t && (x.value = !1, _("close"));
 	}
 	function $e(e) {
 		if (!e.disabled) {
 			if (z.value) {
 				if (M.value) {
-					let t = [...E.value], n = t.findIndex((t) => p(t, e.value));
-					n >= 0 ? (t.splice(n, 1), v("deselect", e)) : (t.push(e.value), v("select", e)), E.value = t, C.value = "", T.value = -1, s(() => {
-						_.value?.focus({ preventScroll: !0 });
+					let t = [...T.value], n = t.findIndex((t) => f(t, e.value));
+					n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), T.value = t, S.value = "", w.value = -1, s(() => {
+						g.value?.focus({ preventScroll: !0 });
 					});
 					return;
 				}
-				E.value = [e.value], v("select", e), C.value = "", T.value = -1;
+				T.value = [e.value], _("select", e), S.value = "", w.value = -1;
 				return;
 			}
 			if (M.value) {
-				let t = [...R.value], n = t.findIndex((t) => p(t, e.value));
-				n >= 0 ? (t.splice(n, 1), v("deselect", e)) : (t.push(e.value), v("select", e)), Y(t), X(t), C.value = "", T.value = -1, s(() => {
-					J(_.value), _.value?.focus({ preventScroll: !0 });
+				let t = [...R.value], n = t.findIndex((t) => f(t, e.value));
+				n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), Y(t), X(t), S.value = "", w.value = -1, s(() => {
+					J(g.value), g.value?.focus({ preventScroll: !0 });
 				});
 				return;
 			}
-			Y(e.value), X(e.value), v("select", e), Q();
+			Y(e.value), X(e.value), _("select", e), Q();
 		}
 	}
 	function et() {
-		if (M.value) Y(E.value), X(E.value);
+		if (M.value) Y(T.value), X(T.value);
 		else {
-			let e = E.value[0] ?? null;
+			let e = T.value[0] ?? null;
 			Y(e), X(e);
 		}
-		Q(), v("apply");
+		Q(), _("apply");
 	}
 	function tt() {
-		E.value = [...R.value], Q(), v("cancel");
+		T.value = [...R.value], Q(), _("cancel");
 	}
 	function nt() {
 		if (A.value.freeSolo === !1) return !1;
-		let e = d(C.value, R.value, M.value);
-		return e != null && (Y(e), X(e), C.value = "", T.value = -1, M.value ? (s(() => {
-			J(_.value), _.value?.focus({ preventScroll: !0 });
+		let e = u(S.value, R.value, M.value);
+		return e != null && (Y(e), X(e), S.value = "", w.value = -1, M.value ? (s(() => {
+			J(g.value), g.value?.focus({ preventScroll: !0 });
 		}), !0) : (Q(), !0));
 	}
 	function rt(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(h.disabled || h.readonly) && (M.value ? (Y([]), X([])) : (Y(null), X(null)), v("clear"), Q());
+		e?.preventDefault(), e?.stopPropagation(), !(m.disabled || m.readonly) && (M.value ? (Y([]), X([])) : (Y(null), X(null)), _("clear"), Q());
 	}
 	function it(e, t) {
 		if (t.preventDefault(), t.stopPropagation(), !M.value) return;
-		let n = R.value.filter((t) => !p(t, e.value));
-		Y(n), X(n), v("deselect", e), s(() => J(_.value));
+		let n = R.value.filter((t) => !f(t, e.value));
+		Y(n), X(n), _("deselect", e), s(() => J(g.value));
 	}
 	function at() {
 		let e = K.getHighlightedOption();
@@ -234,30 +234,30 @@ function h(h, g, _, v, De) {
 	}
 	function ot(e) {
 		let t = e.target;
-		C.value = t.value, v("search", C.value), S.value || Z(), K.resetHighlight(), H.value && k?.searchDebounced(C.value);
+		S.value = t.value, _("search", S.value), x.value || Z(), K.resetHighlight(), H.value && k?.searchDebounced(S.value);
 	}
 	function st(e) {
-		if (!(h.disabled || h.readonly)) switch (e.key) {
+		if (!(m.disabled || m.readonly)) switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), S.value ? K.moveHighlight(1) : Z();
+				e.preventDefault(), x.value ? K.moveHighlight(1) : Z();
 				break;
 			case "ArrowUp":
-				e.preventDefault(), S.value ? K.moveHighlight(-1) : Z();
+				e.preventDefault(), x.value ? K.moveHighlight(-1) : Z();
 				break;
 			case "Enter":
-				e.preventDefault(), S.value ? at() || nt() : Z();
+				e.preventDefault(), x.value ? at() || nt() : Z();
 				break;
 			case "Escape":
 				e.preventDefault(), Q();
 				break;
 			case "Home":
-				S.value && (e.preventDefault(), K.highlightFirst());
+				x.value && (e.preventDefault(), K.highlightFirst());
 				break;
 			case "End":
-				S.value && (e.preventDefault(), K.highlightLast());
+				x.value && (e.preventDefault(), K.highlightLast());
 				break;
 			case "Backspace":
-				if (M.value && !C.value && B.value.length > 0) {
+				if (M.value && !S.value && B.value.length > 0) {
 					e.preventDefault();
 					let t = B.value.at(-1);
 					t && it(t, e);
@@ -269,108 +269,106 @@ function h(h, g, _, v, De) {
 	async function ct(e) {
 		let t = A.value.asyncData;
 		if (t) {
-			w.value = !0;
+			C.value = !0;
 			try {
-				let { options: n, resolvedSelected: r } = await be(t, e, R.value, (e) => _e(e, N.value));
-				r.length > 0 && (O.value = r), D.value = n;
+				let { options: n, resolvedSelected: r } = await xe(t, e, R.value, (e) => ve(e, N.value));
+				r.length > 0 && (D.value = r), E.value = n;
 			} finally {
-				w.value = !1;
+				C.value = !1;
 			}
 		}
 	}
 	async function lt() {
 		let e = A.value.asyncData;
-		!e?.resolve || R.value.length === 0 || (O.value = _e(await e.resolve(R.value), N.value));
+		!e?.resolve || R.value.length === 0 || (D.value = ve(await e.resolve(R.value), N.value));
 	}
 	let $ = o(() => {
-		let e = we(xe, u(Ne.value, [
+		let e = Te(Se, fe(Ne.value, [
 			"Autocomplete",
 			"tokens",
 			"listbox",
 			"color"
-		])), t = u(e, q.merged.value.color ?? "primary");
-		return q.invalidated.value ? we(Se, u(Ne.value, [
-			"Autocomplete",
-			"tokens",
-			"listbox",
-			"invalidated"
-		])) : t;
+		]));
+		return we({
+			tokens: e,
+			color: q.merged.value.color,
+			invalid: q.invalidated.value
+		});
 	}), ut = o(() => $.value?.value), dt = o(() => {
-		let e = !h.disabled && !h.readonly && !W.value, t = !h.disabled && !h.readonly && W.value && U.value, n = V.value && !M.value && !W.value;
+		let e = !m.disabled && !m.readonly && !W.value, t = !m.disabled && !m.readonly && W.value && U.value, n = V.value && !M.value && !W.value;
 		return r({
 			role: "combobox",
 			value: Ge.value,
-			"aria-controls": b,
-			"aria-expanded": S.value,
+			"aria-controls": y,
+			"aria-expanded": x.value,
 			readonly: We.value,
 			onKeydown: st,
 			placeholder: A.value.placeholder,
 			"aria-autocomplete": U.value ? "list" : void 0,
-			"aria-activedescendant": S.value ? K.activeDescendantId.value : void 0,
+			"aria-activedescendant": x.value ? K.activeDescendantId.value : void 0,
 			...M.value ? {
 				rows: 1,
 				onInput: (e) => {
 					ot(e), J(e.target);
 				}
 			} : { onInput: ot }
-		}, q.inputBind.value, m({
+		}, q.inputBind.value, p({
 			"cursor-text": t,
 			"cursor-pointer": e,
 			"resize-none overflow-hidden": M.value,
-			[m(ut.value, j.value.value) ?? ""]: n
+			[p(ut.value, j.value.value) ?? ""]: n
 		}));
 	});
 	l(() => [
-		S.value,
+		x.value,
 		M.value,
-		_.value
+		g.value
 	], () => {
-		J(_.value);
-	}, { immediate: !0 }), l(() => g.value, () => {
+		J(g.value);
+	}, { immediate: !0 }), l(() => h.value, () => {
 		lt();
 	}, { immediate: !0 }), l(() => A.value.asyncData, (e) => {
-		if (k?.cancel(), D.value = [], lt(), !e) {
+		if (k?.cancel(), E.value = [], lt(), !e) {
 			k = null;
 			return;
 		}
-		k = me((e) => void ct(e), ye(e));
+		k = he((e) => void ct(e), be(e));
 	}, { immediate: !0 }), se(() => {
 		k?.cancel();
 	}), ce(() => {
-		J(_.value);
+		J(g.value);
 	});
 	let ft = o(() => i(q.merged.value.size)), pt = o(() => r({}, {}, {
 		tabindex: 0,
 		role: "button",
 		"data-autocomplete-clear": !0,
 		onMousedown: qe,
-		class: m({
+		class: p({
 			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
 			[$.value?.clear ?? ""]: !0,
 			[j.value.clear ?? ""]: !0
 		})
 	})), mt = o(() => ({
-		listboxId: b,
+		listboxId: y,
 		isSelected: Qe,
 		disableAutoFocus: !0,
-		overlay: h.overlay,
+		overlay: m.overlay,
 		loading: He.value,
 		multiple: M.value,
-		maxHeight: h.maxHeight,
+		maxHeight: m.maxHeight,
 		showFooter: z.value,
 		entries: Ue.value,
 		options: G.value,
 		size: q.merged.value.size,
+		error: q.invalidated.value,
 		color: q.merged.value.color,
 		labelledBy: q.controlId.value,
-		componentName: "Autocomplete",
 		rounded: q.merged.value.rounded,
-		invalidated: q.invalidated.value,
-		highlightedIndex: T.value,
-		disableMaxHeight: h.disableMaxHeight === !0,
+		highlightedIndex: w.value,
+		disableMaxHeight: m.disableMaxHeight === !0,
 		hideEmptyMessage: A.value.hideEmptyMessage === !0,
-		emptyMessage: A.value.emptyMessage ?? x("No options"),
-		loadingMessage: A.value.loadingMessage ?? x("Loading..."),
+		emptyMessage: A.value.emptyMessage ?? b("No options"),
+		loadingMessage: A.value.loadingMessage ?? b("Loading..."),
 		...Xe.value
 	}));
 	function ht(e) {
@@ -378,10 +376,10 @@ function h(h, g, _, v, De) {
 		t.length === e.length && t.every((t, n) => String(t.value) === String(e[n]?.value)) || (F.value = e);
 	}
 	return {
-		slots: y,
+		slots: v,
 		hasValue: V,
 		multiple: M,
-		listboxId: b,
+		listboxId: y,
 		formField: q,
 		isLoading: He,
 		clearable: Ve,
@@ -393,7 +391,7 @@ function h(h, g, _, v, De) {
 		handleApply: et,
 		selectOption: $e,
 		handleCancel: tt,
-		containerRef: Ae,
+		containerRef: O,
 		listboxProps: mt,
 		clearIconSize: ft,
 		mergedClasses: j,
@@ -401,19 +399,19 @@ function h(h, g, _, v, De) {
 		visibleOptions: G,
 		isSearchActive: W,
 		open: o({
-			get: () => S.value,
+			get: () => x.value,
 			set: (e) => {
 				e ? Z() : Q({ commitFreeSolo: !0 });
 			}
 		}),
 		selectedOptions: B,
 		hasComposedList: I,
-		highlightedIndex: T,
+		highlightedIndex: w,
 		handleRegisteredOptionsChange: ht,
 		hideEmptyMessage: o(() => A.value.hideEmptyMessage === !0),
-		emptyMessage: o(() => A.value.emptyMessage ?? x("No options")),
-		loadingMessage: o(() => A.value.loadingMessage ?? x("Loading..."))
+		emptyMessage: o(() => A.value.emptyMessage ?? b("No options")),
+		loadingMessage: o(() => A.value.loadingMessage ?? b("Loading..."))
 	};
 }
 //#endregion
-export { h as useAutocomplete };
+export { m as useAutocomplete };

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { BaseFieldInvalidated, BaseFieldSize } from '@bridge-ui/core/Tokens';
+import { BaseFieldSize } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { UseBaseFieldReturn } from './composables/useBaseField';
 import { LabelProps } from '../Label/label.types';
@@ -71,13 +71,6 @@ export interface BaseFieldCustomProps {
      * Props forwarded to the label + corner header row.
      */
     header?: HTMLAttributes;
-    /**
-     * Error-state message colors (`errorMessage`). Label colors come from `Label`
-     * when `error` is set.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<BaseFieldInvalidated>;
     /**
      * Props forwarded to the primary `Label` (content stays owned by `BaseField`).
      *