@bridge-ui/vue 0.0.10 → 0.1.0

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

package/dist/Components/Select/select.types.d.ts

@@ -1,10 +1,11 @@
 import { InputHTMLAttributes, Slot, TextareaHTMLAttributes } from 'vue';
-import { FieldOverlayMode, ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
+import { FieldOverlayFooterSlotProps, FieldOverlayMode, ListboxOptionsInput, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { ChipOwnProps } from '../Chip/chip.types';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
 import { ListboxOwnProps } from '../Listbox/listbox.types';
-export type { ListboxOptionGroup, ListboxOptionsInput, SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectOptionLike, SelectValue, } from '@bridge-ui/core';
+export type { ListboxOptionGroup, ListboxOptionsInput, SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectOptionLike, SelectValue, } from '@bridge-ui/core/Domain';
 export interface SelectClasses extends FormFieldClasses {
     /**
      * The classes to apply to selected chips (multiple mode).
@@ -50,6 +51,10 @@ export interface SelectCustomProps extends FormFieldCustomProps {
     listbox?: Partial<ListboxOwnProps>;
 }
 export interface SelectEmits {
+    /**
+     * Emitted when Apply is pressed on the listbox footer (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed on the listbox footer (`showFooter`).
      */
@@ -225,10 +230,10 @@ export interface SelectOwnProps extends Omit<FormFieldOwnProps, "field"> {
      */
     searchable?: boolean;
     /**
-     * Shows Cancel / Apply on the nested listbox. When unset, defaults to `true`
-     * on mobile. Selection stays draft until Apply.
+     * Shows Cancel / Apply on the nested listbox. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`). Selection stays draft until Apply.
      *
-     * @default false
+     * @default false (`true` for `modal` / `drawer` when unset)
      */
     showFooter?: boolean;
 }
@@ -257,6 +262,13 @@ export interface SelectSlots extends FormFieldSlots {
      * Custom empty-state content.
      */
     empty?: Slot<undefined>;
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
     /**
      * Custom loading content.
      */

package/dist/Components/Skeleton/composables/useSkeleton.d.ts

@@ -1,9 +1,9 @@
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { SkeletonOwnProps, SkeletonProps } from '../skeleton.types';
 type SkeletonLibDefaults = LibDefaultsShape<SkeletonOwnProps, "rounded">;
 type SkeletonMerged = MergeLibDefaults<SkeletonOwnProps, SkeletonLibDefaults>;
 export declare function useSkeleton(props: SkeletonOwnProps, libDefaults: SkeletonLibDefaults): {
     merged: import('vue').ComputedRef<SkeletonMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, Omit<SkeletonProps, "classes" | "rounded">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, Omit<SkeletonProps, "classes" | "rounded">>>;
 };
 export {};