@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/Select/composables/useSelect.js

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

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

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, Slot, TextareaHTMLAttributes } from 'vue';
-import { ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
+import { FieldOverlayMode, ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
 import { ChipOwnProps } from '../Chip/chip.types';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
@@ -50,6 +50,10 @@ export interface SelectCustomProps extends FormFieldCustomProps {
     listbox?: Partial<ListboxOwnProps>;
 }
 export interface SelectEmits {
+    /**
+     * Emitted when Cancel is pressed on the listbox footer (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selection changes.
      */
@@ -203,6 +207,13 @@ export interface SelectOwnProps extends Omit<FormFieldOwnProps, "field"> {
      * @default "value"
      */
     optionValue?: string;
+    /**
+     * Which overlay shell opens the options panel. `auto` uses `menu` on desktop
+     * and `drawer` (bottom) on mobile. Forwarded to the internal `Listbox`.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
     /**
      * Placeholder shown when no value is selected.
      */
@@ -213,6 +224,13 @@ export interface SelectOwnProps extends Omit<FormFieldOwnProps, "field"> {
      * @default false
      */
     searchable?: boolean;
+    /**
+     * Shows Cancel / Apply on the nested listbox. When unset, defaults to `true`
+     * on mobile. Selection stays draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
 }
 export interface SelectSlots extends FormFieldSlots {
     /**

package/dist/Components/Skeleton/Skeleton.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useSkeleton as e } from "./composables/useSkeleton.js";
 import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, normalizeProps as i, openBlock as a, unref as o } from "vue";
 //#region src/Components/Skeleton/Skeleton.vue?vue&type=script&setup=true&lang.ts
-var s = /* @__PURE__ */ n({
+var s = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "Skeleton",
 	props: {