@bridge-ui/vue 0.0.11 → 0.1.0

package/dist/Components/OtpField/composables/useOtpField.js

@@ -1,12 +1,12 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { baseFieldBridgeKeys as r, useBaseField as i } from "../../BaseField/composables/useBaseField.js";
-import { computed as a, nextTick as o, onMounted as s, ref as c, toValue as l, useAttrs as ee } from "vue";
-import { get as u, isUndefined as d, omit as f, pick as p } from "es-toolkit/compat";
-import { applyOtpInput as m, applyOtpKeyNavigation as h, applyOtpPaste as g, isOtpComplete as _, joinOtpDigits as te, normalizeOtpValue as v, resolveOtpLength as ne, splitOtpValue as y } from "@bridge-ui/core/Domain";
-import { otpFieldColorProps as b, otpFieldInvalidatedProps as x, otpFieldRoundedProps as re, otpFieldSizeProps as ie, otpFieldVariantProps as ae } from "@bridge-ui/core/Tokens";
-import { cn as S, mergeBridgeUILayeredClasses as C, splitComponentProps as w } from "@bridge-ui/core/Utils";
+import { computed as a, nextTick as o, onMounted as ee, ref as s, toValue as c, useAttrs as te } from "vue";
+import { get as l, isUndefined as ne, omit as re, pick as ie } from "es-toolkit/compat";
+import { applyOtpInput as u, applyOtpKeyNavigation as d, applyOtpPaste as f, isOtpComplete as p, joinOtpDigits as m, normalizeOtpValue as h, resolveOtpLength as g, splitOtpValue as _ } from "@bridge-ui/core/Domain";
+import { otpFieldColorProps as v, otpFieldRoundedProps as y, otpFieldSizeProps as b, otpFieldVariantProps as x } from "@bridge-ui/core/Tokens";
+import { cn as S, getColorToken as ae, mergeBridgeUILayeredClasses as C, splitComponentProps as oe } from "@bridge-ui/core/Utils";
 //#region src/Components/OtpField/composables/useOtpField.ts
-var T = [
+var w = [
 	"mask",
 	"type",
 	"color",
@@ -18,15 +18,12 @@ var T = [
 	"defaultValue",
 	...r
 ];
-function oe(e) {
+function se(e) {
 	if (!e) return;
-	let { pin: t, invalidated: n, input: r, ...i } = e;
-	return {
-		...i,
-		...n?.errorMessage ? { invalidated: { errorMessage: n.errorMessage } } : {}
-	};
+	let { pin: t, input: n, ...r } = e;
+	return r;
 }
-function E(E, D, O = {}, se = {
+function T(T, E, D = {}, O = {
 	length: 6,
 	size: "md",
 	rounded: "md",
@@ -34,134 +31,138 @@ function E(E, D, O = {}, se = {
 	color: "primary",
 	variant: "outline"
 }) {
-	let ce = ee(), k = c([]), A = a(() => w({
-		bridgeKeys: T,
+	let k = te(), A = s([]), j = a(() => oe({
+		bridgeKeys: w,
 		props: {
-			...ce,
-			...l(E)
+			...k,
+			...c(T)
 		}
-	})), { merged: j, entry: M } = t({
-		libDefaults: se,
+	})), { merged: M, entry: N } = t({
+		libDefaults: O,
 		componentName: "OtpField",
-		props: () => A.value.componentProps
-	}), N = n({
-		entry: M,
-		props: () => A.value.componentProps
-	}), P = a(() => j.value.customProps), F = a(() => oe(j.value.customProps)), I = a(() => ({
-		...p(A.value.componentProps, r),
-		customProps: F.value,
-		id: A.value.inheritedAttrs.id,
-		class: A.value.inheritedAttrs.class,
-		...f(A.value.inheritedAttrs, ["class", "id"])
-	})), L = i(() => I.value, {
+		props: () => j.value.componentProps
+	}), P = n({
+		entry: N,
+		props: () => j.value.componentProps
+	}), F = a(() => M.value.customProps), I = a(() => se(M.value.customProps)), L = a(() => ({
+		...ie(j.value.componentProps, r),
+		customProps: I.value,
+		id: j.value.inheritedAttrs.id,
+		class: j.value.inheritedAttrs.class,
+		...re(j.value.inheritedAttrs, ["class", "id"])
+	})), R = i(() => L.value, {
 		size: "md",
 		hideErrorMessage: !1
 	}, {
 		componentName: "OtpField",
 		labelHtmlFor: (e) => `${e}-0`
-	}), { controlId: R, isDisabled: z, isReadonly: B, invalidated: V, ariaDescribedBy: H } = L, U = a(() => ne(j.value.length)), W = a(() => j.value.type ?? "numeric"), G = a(() => j.value.variant ?? "outline"), K = a(() => G.value === "underlined"), q = a(() => !d(D.value)), J = c(v(l(E).defaultValue, U.value, W.value)), le = a(() => q.value ? v(D.value, U.value, W.value) : J.value), Y = a(() => y(le.value, U.value));
-	s(() => {
-		if (!j.value.autoFocus || z.value || B.value) return;
-		let e = Y.value.findIndex((e) => e === ""), t = e === -1 ? 0 : e;
-		k.value[t]?.focus();
+	}), { controlId: z, isDisabled: B, isReadonly: V, invalidated: H, ariaDescribedBy: U } = R, W = a(() => g(M.value.length)), G = a(() => M.value.type ?? "numeric"), K = a(() => M.value.variant ?? "outline"), q = a(() => K.value === "underlined"), J = a(() => !ne(E.value)), Y = s(h(c(T).defaultValue, W.value, G.value)), ce = a(() => J.value ? h(E.value, W.value, G.value) : Y.value), X = a(() => _(ce.value, W.value));
+	ee(() => {
+		if (!M.value.autoFocus || B.value || V.value) return;
+		let e = X.value.findIndex((e) => e === ""), t = e === -1 ? 0 : e;
+		A.value[t]?.focus();
 	});
-	let X = (e, t) => {
-		let n = te(e);
-		q.value || (J.value = n), D.value = n, O.onChange?.(n), _(n, U.value) && O.onComplete?.(n), t != null && o(() => {
-			k.value[t]?.focus(), k.value[t]?.select();
+	let Z = (e, t) => {
+		let n = m(e);
+		J.value || (Y.value = n), E.value = n, D.onChange?.(n), p(n, W.value) && D.onComplete?.(n), t != null && o(() => {
+			A.value[t]?.focus(), A.value[t]?.select();
+		});
+	}, Q = a(() => {
+		let e = C(b, N.value?.tokens?.size);
+		return l(e, M.value.size ?? "md");
+	}), $ = a(() => {
+		let e = C(v, N.value?.tokens?.color);
+		return ae({
+			tokens: e,
+			color: M.value.color,
+			invalid: H.value
 		});
-	}, Z = a(() => {
-		let e = C(ie, M.value?.tokens?.size);
-		return u(e, j.value.size ?? "md");
-	}), Q = a(() => {
-		let e = C(b, M.value?.tokens?.color);
-		return u(e, j.value.color ?? "primary");
-	}), ue = a(() => C(x, M.value?.tokens?.invalidated, j.value.customProps?.invalidated)), $ = a(() => V.value ? ue.value : void 0), de = a(() => {
-		let e = C(re, M.value?.tokens?.rounded);
-		return u(e, j.value.rounded ?? "md");
-	}), fe = a(() => {
-		let e = C(ae, M.value?.tokens?.variant);
-		return u(e, G.value);
+	}), le = a(() => {
+		let e = C(y, N.value?.tokens?.rounded);
+		return l(e, M.value.rounded ?? "md");
+	}), ue = a(() => {
+		let e = C(x, N.value?.tokens?.variant);
+		return l(e, K.value);
 	});
 	return {
-		merged: j,
-		digits: Y,
-		length: U,
-		pinBind: (t) => e(P.value?.pin, {}, S({
+		merged: M,
+		digits: X,
+		length: W,
+		pinBind: (t) => e(F.value?.pin, {}, S({
 			"relative flex shrink-0 items-center justify-center overflow-hidden": !0,
-			[Z.value?.pin ?? ""]: !0,
-			[fe.value?.pin ?? ""]: !0,
-			[de.value?.pin ?? ""]: !K.value,
-			[Q.value?.pin ?? ""]: !V.value && !K.value,
-			[Q.value?.underlined ?? ""]: !V.value && K.value,
-			[$.value?.pin ?? ""]: V.value && !K.value,
-			[$.value?.pinUnderlined ?? ""]: V.value && K.value,
-			[N.value.pin ?? ""]: !0
+			[Q.value?.pin ?? ""]: !0,
+			[ue.value?.pin ?? ""]: !0,
+			[le.value?.pin ?? ""]: !q.value,
+			[$.value?.pin ?? ""]: !q.value,
+			[$.value?.underlined ?? ""]: q.value,
+			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": H.value && !q.value,
+			"border-error-500 dark:border-error-600": H.value && q.value,
+			[P.value.pin ?? ""]: !0
 		})),
 		pinsBind: a(() => e({}, {}, S({
 			"flex flex-wrap items-center": !0,
-			[L.sizeClasses.value?.group ?? ""]: !0
+			[R.sizeClasses.value?.group ?? ""]: !0
 		}))),
-		baseField: L,
+		baseField: R,
 		inputBind: (t) => {
-			let n = W.value === "numeric" ? "numeric" : "text";
+			let n = G.value === "numeric" ? "numeric" : "text";
 			return e({
-				...P.value?.input,
+				...F.value?.input,
 				inputmode: n,
-				maxlength: U.value,
-				disabled: z.value,
-				readOnly: B.value,
-				value: Y.value[t] ?? "",
-				id: `${R.value}-${t}`,
-				placeholder: j.value.placeholder,
-				"aria-describedby": H.value,
-				type: j.value.mask ? "password" : "text",
-				"aria-invalid": V.value || void 0,
+				maxlength: W.value,
+				disabled: B.value,
+				readOnly: V.value,
+				value: X.value[t] ?? "",
+				id: `${z.value}-${t}`,
+				placeholder: M.value.placeholder,
+				"aria-describedby": U.value,
+				type: M.value.mask ? "password" : "text",
+				"aria-invalid": H.value || void 0,
 				autocomplete: t === 0 ? "one-time-code" : "off",
-				"aria-label": `Digit ${t + 1} of ${U.value}`
+				"aria-label": `Digit ${t + 1} of ${W.value}`
 			}, {}, S({
 				"h-full w-full min-w-0 bg-transparent border-0 shadow-none text-center": !0,
 				"text-dark-900 dark:text-dark-100 placeholder:text-dark-400": !0,
 				"outline-none ring-0 focus:outline-none focus:ring-0": !0,
 				"disabled:cursor-not-allowed": !0,
-				[Z.value?.input ?? ""]: !0,
-				[N.value.input ?? ""]: !0
+				[Q.value?.input ?? ""]: !0,
+				[P.value.input ?? ""]: !0
 			}));
 		},
 		setPinRef: (e, t) => {
-			k.value[e] = t;
+			A.value[e] = t;
 		},
-		inputType: W,
+		inputType: G,
 		handlePinInput: (e, t) => {
-			let n = t.target.value, r = m({
+			let n = t.target.value, r = u({
 				index: e,
 				input: n,
-				digits: Y.value,
-				type: W.value
+				digits: X.value,
+				type: G.value
 			});
-			X(r.digits, r.focusIndex);
+			Z(r.digits, r.focusIndex);
 		},
 		handlePinFocus: (e) => {
-			k.value[e]?.select();
+			A.value[e]?.select();
 		},
 		handlePinPaste: (e, t) => {
-			let n = t.clipboardData?.getData("text") ?? "", r = g({
+			let n = t.clipboardData?.getData("text") ?? "", r = f({
 				index: e,
 				pasted: n,
-				digits: Y.value,
-				type: W.value
+				digits: X.value,
+				type: G.value
 			});
-			r.focusIndex == null && r.digits.every((e, t) => e === Y.value[t]) || (t.preventDefault(), X(r.digits, r.focusIndex));
+			r.focusIndex == null && r.digits.every((e, t) => e === X.value[t]) || (t.preventDefault(), Z(r.digits, r.focusIndex));
 		},
 		handlePinKeyDown: (e, t) => {
-			let n = h({
+			let n = d({
 				index: e,
 				key: t.key,
-				digits: Y.value
+				digits: X.value
 			});
-			n && (t.preventDefault(), X(n.digits, n.focusIndex));
+			n && (t.preventDefault(), Z(n.digits, n.focusIndex));
 		}
 	};
 }
 //#endregion
-export { T as otpFieldBridgeKeys, E as useOtpField };
+export { w as otpFieldBridgeKeys, T as useOtpField };

package/dist/Components/OtpField/otpField.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { OtpInputType } from '@bridge-ui/core/Domain';
-import { BaseFieldInvalidated, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldVariant } from '@bridge-ui/core/Tokens';
+import { OtpFieldColor, OtpFieldRounded, OtpFieldVariant } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
 export interface OtpFieldColorOverrides {}
@@ -17,18 +17,11 @@ export interface OtpFieldClasses extends BaseFieldClasses {
      */
     pin?: string;
 }
-export interface OtpFieldCustomProps extends Omit<BaseFieldCustomProps, "invalidated"> {
+export interface OtpFieldCustomProps extends BaseFieldCustomProps {
     /**
      * Props forwarded to each pin `<input>`.
      */
     input?: Partial<InputHTMLAttributes>;
-    /**
-     * Pin error chrome (`pin` / `pinUnderlined`). Error message color comes from
-     * {@link BaseField} (`Tokens/BaseField`); pass `errorMessage` here to override.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<OtpFieldInvalidated & BaseFieldInvalidated>;
     /**
      * Props forwarded to each pin cell wrapper.
      */

package/dist/Components/Radio/composables/useRadio.js

@@ -2,8 +2,8 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
 import { computed as i, toValue as a, useAttrs as o } from "vue";
 import { get as s, omit as c } from "es-toolkit/compat";
-import { radioColorProps as l, radioInvalidatedProps as u, radioRoundedProps as d, radioSizeProps as f } from "@bridge-ui/core/Tokens";
-import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
+import { radioColorProps as l, radioRoundedProps as u, radioSizeProps as d } from "@bridge-ui/core/Tokens";
+import { cn as f, getColorToken as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/Radio/composables/useRadio.ts
 var g = [
 	"name",
@@ -38,50 +38,54 @@ function _(_, v, y) {
 		props: () => S.value.componentProps
 	}), D = i(() => a(y) === C.value.value), O = i(() => {
 		let e = m(l, w.value?.tokens?.color);
-		return s(e, C.value.color ?? "primary");
-	}), k = i(() => m(u, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => {
-		let e = m(f, w.value?.tokens?.size);
+		return p({
+			tokens: e,
+			color: C.value.color,
+			invalid: x.invalidated.value
+		});
+	}), k = i(() => {
+		let e = m(d, w.value?.tokens?.size);
 		return s(e, C.value.size ?? "sm");
-	}), M = i(() => {
-		let e = m(d, w.value?.tokens?.rounded);
+	}), A = i(() => {
+		let e = m(u, w.value?.tokens?.rounded);
 		return s(e, C.value.rounded ?? "full");
-	}), N = i(() => e({
+	}), j = i(() => e({
 		...T.value?.input,
 		...x.controlBind.value,
 		type: "radio",
 		name: C.value.name,
 		value: C.value.value
-	}, c(S.value.inheritedAttrs, ["class"]), p({
+	}, c(S.value.inheritedAttrs, ["class"]), f({
 		"sr-only": !0,
 		[E.value.input ?? ""]: !0
-	}))), P = i(() => e(T.value?.control, { "aria-hidden": !0 }, p({
+	}))), M = i(() => e(T.value?.control, { "aria-hidden": !0 }, f({
 		"inline-flex shrink-0 items-center justify-center border shadow-sm transition ease-in-out duration-100": !0,
 		"pointer-events-none": !0,
-		[j.value ?? ""]: !0,
-		[M.value ?? ""]: !0,
-		[A.value?.base ?? ""]: !D.value,
-		[A.value?.checked ?? ""]: D.value,
+		[k.value ?? ""]: !0,
+		[A.value ?? ""]: !0,
+		[O.value?.base ?? ""]: !D.value,
+		[O.value?.checked ?? ""]: D.value,
 		[E.value.control ?? ""]: !0
 	})));
 	return {
 		merged: C,
-		dotBind: i(() => e(T.value?.dot, {}, p({
+		dotBind: i(() => e(T.value?.dot, {}, f({
 			"rounded-full bg-white transition-transform duration-100": !0,
 			"scale-0": !D.value,
 			"scale-100": D.value,
 			"h-[42%] w-[42%]": !0,
 			[E.value.dot ?? ""]: !0
 		}))),
-		fieldBind: i(() => e({}, {}, p({
+		fieldBind: i(() => e({}, {}, f({
 			"relative inline-flex shrink-0 cursor-pointer items-center": !0,
 			"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
-			[M.value ?? ""]: !0,
-			[A.value?.focus ?? ""]: !0
+			[A.value ?? ""]: !0,
+			[O.value?.focus ?? ""]: !0
 		}))),
-		inputBind: N,
+		inputBind: j,
 		isChecked: D,
 		formControl: x,
-		controlBind: P
+		controlBind: M
 	};
 }
 //#endregion

package/dist/Components/Select/composables/useSelect.d.ts

@@ -735,9 +735,9 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         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/Select/composables/useSelect.js

@@ -5,10 +5,10 @@ import { mergePartBind as r, resolveFieldAdornmentIconSize as ee, useBridgeUICom
 import { formFieldBridgeKeys as re, useFormField as ie } from "../../FormField/composables/useFormField.js";
 import { useListboxNavigation as ae } from "../../Listbox/composables/useListboxNavigation.js";
 import { Comment as oe, Text as se, computed as a, nextTick as o, onBeforeUnmount as ce, onMounted as le, ref as s, useAttrs as ue, useId as de, useSlots as fe, watch as c } from "vue";
-import { get as l, isNil as pe, omit as me } from "es-toolkit/compat";
-import { createSelectAsyncSearch as he, filterListboxEntries as ge, flattenListboxOptions as u, normalizeListboxEntries as _e, normalizeSelectOptions as ve, resolveFieldOverlay as ye, resolveSelectAsyncDebounce as be, resolveSelectAsyncOptions as xe, selectValuesEqual as d } from "@bridge-ui/core/Domain";
-import { listboxColorProps as Se, listboxInvalidatedProps as Ce } from "@bridge-ui/core/Tokens";
-import { adjustAutosizeTextareaHeight as we, cn as f, mergeBridgeUILayeredClasses as Te, splitComponentProps as Ee } from "@bridge-ui/core/Utils";
+import { get as pe, isNil as me, omit as he } from "es-toolkit/compat";
+import { createSelectAsyncSearch as ge, filterListboxEntries as _e, flattenListboxOptions as l, normalizeListboxEntries as u, normalizeSelectOptions as ve, resolveFieldOverlay as ye, resolveSelectAsyncDebounce as be, resolveSelectAsyncOptions as xe, selectValuesEqual as d } from "@bridge-ui/core/Domain";
+import { listboxColorProps as Se } from "@bridge-ui/core/Tokens";
+import { adjustAutosizeTextareaHeight as Ce, cn as f, getColorToken as we, mergeBridgeUILayeredClasses as Te, splitComponentProps as Ee } from "@bridge-ui/core/Utils";
 //#region src/Components/Select/composables/useSelect.ts
 var De = [
 	"classes",
@@ -53,7 +53,7 @@ function p(p, m, h, g, Oe) {
 	})), P = a(() => Oe.value.length > 0 ? Oe.value.map((e) => ({
 		option: e,
 		type: "option"
-	})) : _e(A.value.options, N.value)), Pe = a(() => u(P.value)), F = s([]);
+	})) : u(A.value.options, N.value)), Pe = a(() => l(P.value)), F = s([]);
 	function Fe(e) {
 		if (!e || typeof e != "object") return !1;
 		let t = e.type;
@@ -71,16 +71,16 @@ function p(p, m, h, g, Oe) {
 	let I = a(() => Ie() && !A.value.options?.length), L = a(() => {
 		if (I.value) return [];
 		if (T.value.length > 0) {
-			let e = _e(T.value, N.value);
+			let e = u(T.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;
-	}), Le = a(() => I.value ? F.value : u(L.value)), R = a(() => {
+	}), Le = a(() => I.value ? F.value : l(L.value)), R = a(() => {
 		let e = m.value;
-		return M.value ? Array.isArray(e) ? e : [] : !pe(e) && e !== "" ? [e] : [];
+		return M.value ? Array.isArray(e) ? e : [] : !me(e) && e !== "" ? [e] : [];
 	}), Re = a(() => ye(A.value.overlay, Ae.mobile)), z = ne({
 		componentName: "Select",
 		overlay: Re,
@@ -100,8 +100,8 @@ function p(p, m, h, g, Oe) {
 		if (I.value) return [];
 		if (!W.value || !x.value.trim()) return L.value;
 		let e = x.value.trim().toLowerCase();
-		return ge(L.value, (t) => t.label.toLowerCase().includes(e));
-	}), G = a(() => I.value ? F.value : u(He.value)), K = ae(() => G.value, C, v), Ue = a(() => p.readonly || p.disabled ? !0 : !W.value), We = a(() => W.value || M.value ? x.value : B.value[0]?.label ?? ""), Ge = (e) => {
+		return _e(L.value, (t) => t.label.toLowerCase().includes(e));
+	}), G = a(() => I.value ? F.value : l(He.value)), K = ae(() => G.value, C, v), Ue = a(() => p.readonly || p.disabled ? !0 : !W.value), We = a(() => W.value || M.value ? x.value : B.value[0]?.label ?? ""), Ge = (e) => {
 		D.value = e instanceof HTMLElement ? e : null;
 	};
 	function Ke(e) {
@@ -119,7 +119,7 @@ function p(p, m, h, g, Oe) {
 		}
 	}
 	let Je = a(() => {
-		let e = me(k.value.inheritedAttrs, ["class"]), n = Ee({
+		let e = he(k.value.inheritedAttrs, ["class"]), n = Ee({
 			bridgeKeys: re,
 			props: e
 		}).componentProps, ee = n.endIcon ?? (t(_, "end") ? void 0 : "chevronUpDown"), { listbox: te, ...i } = n.customProps ?? {};
@@ -147,7 +147,7 @@ function p(p, m, h, g, Oe) {
 		likeInput: () => M.value,
 		control: () => M.value ? "textarea" : "input"
 	}), Xe = a(() => V.value && Be.value && !p.readonly && !q.isDisabled.value), J = (e) => {
-		!e || !M.value || we(e);
+		!e || !M.value || Ce(e);
 	};
 	function Ze(e) {
 		return ze.value.some((t) => d(t, e));
@@ -267,18 +267,17 @@ function p(p, m, h, g, Oe) {
 		!e?.resolve || R.value.length === 0 || (E.value = ve(await e.resolve(R.value), N.value));
 	}
 	let $ = a(() => {
-		let e = Te(Se, l(Me.value, [
+		let e = Te(Se, pe(Me.value, [
 			"Select",
 			"tokens",
 			"listbox",
 			"color"
-		])), t = l(e, q.merged.value.color ?? "primary");
-		return q.invalidated.value ? Te(Ce, l(Me.value, [
-			"Select",
-			"tokens",
-			"listbox",
-			"invalidated"
-		])) : t;
+		]));
+		return we({
+			tokens: e,
+			color: q.merged.value.color,
+			invalid: q.invalidated.value
+		});
 	}), ct = a(() => $.value?.value), lt = a(() => {
 		let e = !p.disabled && !p.readonly && !W.value, t = !p.disabled && !p.readonly && W.value && U.value, n = V.value && !M.value && !W.value;
 		return r({
@@ -317,7 +316,7 @@ function p(p, m, h, g, Oe) {
 			O = null;
 			return;
 		}
-		O = he((e) => void ot(e), be(e));
+		O = ge((e) => void ot(e), be(e));
 	}, { immediate: !0 }), ce(() => {
 		O?.cancel();
 	}), le(() => {
@@ -346,10 +345,10 @@ function p(p, m, h, g, Oe) {
 		options: G.value,
 		componentName: "Select",
 		size: q.merged.value.size,
+		error: q.invalidated.value,
 		color: q.merged.value.color,
 		labelledBy: q.controlId.value,
 		rounded: q.merged.value.rounded,
-		invalidated: q.invalidated.value,
 		highlightedIndex: C.value,
 		disableMaxHeight: p.disableMaxHeight === !0,
 		hideEmptyMessage: A.value.hideEmptyMessage === !0,