@bridge-ui/vue 0.0.10 → 0.1.0

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

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

package/dist/Components/Avatar/avatar.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ImgHTMLAttributes, Slot } from 'vue';
-import { AvatarColor, AvatarRounded, AvatarSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { AvatarColor, AvatarRounded, AvatarSize } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { IconSource } from '../../Adapters/Icon';
 import { IconProps } from '../Icon';
 export interface AvatarSizeOverrides {}