bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/BbSelectPopover/BbSelectPopover.vue_vue_type_script_setup_true_lang.js

@@ -1,41 +1,41 @@
-import { useId as e } from "../../composables/useId.js";
-import { useUntil as t } from "../../composables/useUntil.js";
-import { removedPropsFor as n } from "../../deprecation/removedProps.js";
-import { useLogger as r } from "../../composables/useLogger.js";
-import { warnRemovedAttrs as i } from "../../utilities/functions/warnRemovedAttrs.js";
-import { extractDomContainer as a } from "../../utilities/functions/extractDomContainer.js";
-import { waitFor as o } from "../../utilities/functions/waitFor.js";
-import { transitions as s } from "../../utilities/misc/transitions.js";
-import ee from "../CommonPopover/CommonPopover.vue.js";
-import { parseWidthString as te } from "../../utilities/functions/parseWidthString.js";
-import { isTopEscapeEntry as ne, pushEscapeEntry as re, removeEscapeEntry as ie } from "../../utils/overlayEscapeStack.js";
-import { useMobile as ae } from "../../composables/useMobile.js";
-import { provideSheetSurface as oe } from "../../composables/useSheetSurface.js";
-import { useClosingInert as se } from "../../composables/useClosingInert.js";
+import { useConfig as e } from "../../composables/useConfig.js";
+import { useId as t } from "../../composables/useId.js";
+import { useUntil as n } from "../../composables/useUntil.js";
+import { removedPropsFor as r } from "../../deprecation/removedProps.js";
+import { useLogger as i } from "../../composables/useLogger.js";
+import { warnRemovedAttrs as a } from "../../utilities/functions/warnRemovedAttrs.js";
+import { extractDomContainer as o } from "../../utilities/functions/extractDomContainer.js";
+import { waitFor as s } from "../../utilities/functions/waitFor.js";
+import { transitions as ee } from "../../utilities/misc/transitions.js";
+import te from "../CommonPopover/CommonPopover.vue.js";
+import { parseWidthString as ne } from "../../utilities/functions/parseWidthString.js";
+import { isTopEscapeEntry as re, pushEscapeEntry as ie, removeEscapeEntry as ae } from "../../utils/overlayEscapeStack.js";
+import { useMobile as oe } from "../../composables/useMobile.js";
+import { provideSheetSurface as se } from "../../composables/useSheetSurface.js";
+import { useClosingInert as ce } from "../../composables/useClosingInert.js";
 import { wait as c } from "../../utilities/functions/wait.js";
-import ce from "../BbIcon/BbIcon.vue.js";
-import { isNil as le } from "../../utilities/functions/isNil.js";
-import { matchAnyKey as ue } from "../../utilities/functions/matchAnyKey.js";
-import de from "../../assets/svgs/search.svg_raw.js";
-import { useImeDismissBlur as fe } from "../../composables/useImeDismissBlur.js";
-import { get as pe } from "../../utilities/functions/get.js";
-import { useLocale as me } from "../../composables/useLocale.js";
-import he from "../BbOffCanvas/BbOffCanvas.vue.js";
-import ge from "../BbSmoothHeight/BbSmoothHeight.vue.js";
-import _e from "../BbBadge/BbBadge.vue.js";
-import { useArray as ve } from "../../composables/useArray.js";
-import { useItemsGetter as ye } from "../../composables/useItemsGetter.js";
-import { hash as be } from "../../utilities/functions/hash.js";
-import { useHashedWatcher as xe } from "../../composables/useHashedWatcher.js";
-import Se from "../ClearableButton/ClearableButton.vue.js";
-import { useIndexById as Ce } from "../../composables/useIndexById.js";
-import { useBaseOptions as we } from "../../composables/useBaseOptions.js";
-import { useCoherence as Te } from "../../composables/useCoherence.js";
-import { usePrefill as Ee } from "../../composables/usePrefill.js";
-import De from "../ErrorIcon/ErrorIcon.vue.js";
-import Oe from "../WarningIcon/WarningIcon.vue.js";
-import ke from "../ListBox/ListBox.vue.js";
-import { config as Ae } from "virtual:bitboss-ui/config";
+import { get as le } from "../../utilities/functions/get.js";
+import { useLocale as ue } from "../../composables/useLocale.js";
+import de from "../BbIcon/BbIcon.vue.js";
+import fe from "../BbBadge/BbBadge.vue.js";
+import { isNil as pe } from "../../utilities/functions/isNil.js";
+import { matchAnyKey as me } from "../../utilities/functions/matchAnyKey.js";
+import he from "../../assets/svgs/search.svg_raw.js";
+import { useImeDismissBlur as ge } from "../../composables/useImeDismissBlur.js";
+import _e from "../BbOffCanvas/BbOffCanvas.vue.js";
+import ve from "../BbSmoothHeight/BbSmoothHeight.vue.js";
+import { hash as ye } from "../../utilities/functions/hash.js";
+import { useArray as be } from "../../composables/useArray.js";
+import { useItemsGetter as xe } from "../../composables/useItemsGetter.js";
+import { useHashedWatcher as Se } from "../../composables/useHashedWatcher.js";
+import Ce from "../ClearableButton/ClearableButton.vue.js";
+import { useIndexById as we } from "../../composables/useIndexById.js";
+import { useBaseOptions as Te } from "../../composables/useBaseOptions.js";
+import { useCoherence as Ee } from "../../composables/useCoherence.js";
+import { usePrefill as De } from "../../composables/usePrefill.js";
+import Oe from "../ErrorIcon/ErrorIcon.vue.js";
+import ke from "../WarningIcon/WarningIcon.vue.js";
+import Ae from "../ListBox/ListBox.vue.js";
 import { Fragment as je, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as Me, createSlots as Ne, createTextVNode as Pe, createVNode as p, defineComponent as Fe, guardReactiveProps as m, mergeProps as h, nextTick as Ie, normalizeClass as Le, normalizeProps as g, onBeforeMount as Re, onBeforeUnmount as ze, openBlock as _, ref as v, renderList as Be, renderSlot as y, toDisplayString as Ve, toRef as b, unref as x, vModelText as He, watch as S, withCtx as C, withDirectives as Ue, withKeys as w, withModifiers as T } from "vue";
 import { createReusableTemplate as We, useElementSize as Ge, useIntersectionObserver as Ke } from "@vueuse/core";
 //#region src/components/BbSelectPopover/BbSelectPopover.vue?vue&type=script&setup=true&lang.ts
@@ -51,6 +51,7 @@ var qe = {
 	"aria-label",
 	"autocomplete",
 	"inputmode",
+	"placeholder",
 	"tabindex",
 	"onKeydown"
 ], Ye = {
@@ -124,7 +125,7 @@ var qe = {
 			default: !0
 		},
 		stash: { type: Boolean },
-		transitionDuration: { default: s.medium },
+		transitionDuration: { default: ee.medium },
 		width: { default: "200" }
 	},
 	emits: [
@@ -138,77 +139,77 @@ var qe = {
 		"update:modelValue",
 		"option:add"
 	],
-	setup(s, { emit: Fe }) {
-		let E = s, D = Fe;
-		process.env.NODE_ENV !== "production" && i("BbSelectPopover", n("BbSelectPopover"));
-		let [tt, nt] = We(), [rt, it] = We();
+	setup(ee, { emit: Fe }) {
+		let E = ee, D = Fe, tt = e();
+		process.env.NODE_ENV !== "production" && a("BbSelectPopover", r("BbSelectPopover"));
+		let [nt, rt] = We(), [it, at] = We();
 		Re(() => {
-			E.multiple && !Array.isArray(E.modelValue) && r().throw(`BbSelectPopover: \`multiple\` requires an array modelValue, received ${E.modelValue === null ? "null" : typeof E.modelValue}. Seed it with \`[]\` for an empty selection — \`null\`/\`undefined\` are not accepted, because a multi-select with no array has no way to express "nothing selected" separately from "not ready".`);
+			E.multiple && !Array.isArray(E.modelValue) && i().throw(`BbSelectPopover: \`multiple\` requires an array modelValue, received ${E.modelValue === null ? "null" : typeof E.modelValue}. Seed it with \`[]\` for an empty selection — \`null\`/\`undefined\` are not accepted, because a multi-select with no array has no way to express "nothing selected" separately from "not ready".`);
 		});
-		let O = v(), k = v(null), A = v(null), at = v(null), j = v(), M = l(() => {
+		let O = v(), k = v(null), A = v(null), ot = v(null), j = v(), M = l(() => {
 			if (E.anchor) {
-				let e = a(E.anchor);
+				let e = o(E.anchor);
 				if (e) return e;
 			}
 			return O.value;
 		}), { width: N } = Ge(M, {
 			width: 0,
 			height: 0
-		}, { box: "border-box" }), ot = l(() => E.activator != null), st = (e) => {
-			let t = a(e);
+		}, { box: "border-box" }), st = l(() => E.activator != null), ct = (e) => {
+			let t = o(e);
 			t && (O.value = t);
 		};
 		S(() => E.activator, (e) => {
-			e && st(e);
+			e && ct(e);
 		}, { immediate: !0 });
-		let { isMobile: P } = ae(), F = l(() => E.disableWriting === "mobile" ? !P.value : E.disableWriting === "desktop" ? P.value : !E.disableWriting), ct = l(() => E.disableWriting === "mobile" && P.value || E.disableWriting === "desktop" && !P.value ? "none" : void 0), { t: lt } = me(), ut = l(() => E.searchInputAriaLabel ?? lt("select.searchLabel").value), dt = l(() => !!E.clearable && (H.value.length > 0 || (E.multiple ? Array.isArray(E.modelValue) && E.modelValue.length > 0 : !le(E.modelValue)))), I = E.id || e().id.value, ft = l(() => E.ariaInvalid ?? !!E.hasErrors ? "true" : void 0), pt = l(() => {
+		let { isMobile: P } = oe(), F = l(() => E.disableWriting === "mobile" ? !P.value : E.disableWriting === "desktop" ? P.value : !E.disableWriting), lt = l(() => E.disableWriting === "mobile" && P.value || E.disableWriting === "desktop" && !P.value ? "none" : void 0), { t: ut } = ue(), dt = l(() => E.searchInputAriaLabel ?? ut("select.searchLabel").value), ft = l(() => !!E.clearable && (H.value.length > 0 || (E.multiple ? Array.isArray(E.modelValue) && E.modelValue.length > 0 : !pe(E.modelValue)))), I = E.id || t().id.value, pt = l(() => E.ariaInvalid ?? !!E.hasErrors ? "true" : void 0), mt = l(() => {
 			let e = E.ariaDescribedby;
 			if (Array.isArray(e)) return e.map((e) => e.trim()).filter(Boolean).join(" ") || void 0;
 			if (typeof e == "string") return e.trim() || void 0;
-		}), mt = !1, { resume: ht, pause: gt } = Ke(O, async ([{ intersectionRatio: e }]) => {
-			if (mt) {
-				mt = !1;
+		}), ht = !1, { resume: gt, pause: _t } = Ke(O, async ([{ intersectionRatio: e }]) => {
+			if (ht) {
+				ht = !1;
 				return;
 			}
 			e !== 1 && K.value && await Y();
 		}, {
 			threshold: [0, 1],
 			immediate: !1
-		}), _t = l(() => {
+		}), vt = l(() => {
 			if (E.width === "auto") return "auto";
 			if (E.width == null || E.width === "") return N.value ? `${N.value}px` : "320px";
 			try {
-				let { value: e, unit: t } = te(E.width);
+				let { value: e, unit: t } = ne(E.width);
 				return t === "%" ? N.value ? `${N.value * (e / 100)}px` : "320px" : `${e}${t}`;
 			} catch {
 				return typeof E.width == "string" ? E.width.trim() : N.value ? `${N.value}px` : "320px";
 			}
-		}), vt = l(() => ({ "--w": _t.value })), L = () => {
+		}), yt = l(() => ({ "--w": vt.value })), L = () => {
 			O.value?.focus();
 		}, R = () => {
 			A.value instanceof HTMLInputElement && A.value.focus();
-		}, yt = () => {
-			at.value instanceof HTMLButtonElement && at.value.focus();
 		}, bt = () => {
+			ot.value instanceof HTMLButtonElement && ot.value.focus();
+		}, xt = () => {
 			if (F.value) {
 				R();
 				return;
 			}
-			yt();
-		}, xt = () => {
+			bt();
+		}, St = () => {
 			let e = document.activeElement;
 			return e === A.value || !!O.value?.contains(e);
-		}, St = (e) => {
-			D("focus", e), Z();
 		}, Ct = (e) => {
-			D("blur", e), On();
+			D("focus", e), Z();
 		}, wt = (e) => {
-			D("change", e);
+			D("blur", e), jn();
 		}, Tt = (e) => {
-			Z();
+			D("change", e);
 		}, Et = (e) => {
-			D("input", e), $t(), zt(H.value, !1, E.modelValue);
+			Z();
 		}, Dt = (e) => {
+			D("input", e), nn(), Bt(H.value, !1, E.modelValue);
+		}, Ot = (e) => {
 			j.value = e;
 		}, z = async (e) => {
 			let t = e.target instanceof Element ? e.target : e.target instanceof Text ? e.target.parentElement : null;
@@ -216,32 +217,32 @@ var qe = {
 			let n = M.value?.contains(t), r = !!t.closest(".bb-common-popover");
 			if (n || r) return;
 			let i = t instanceof HTMLLabelElement ? t : t.closest("label");
-			i?.control && M.value?.contains(i.control) || (await Y(), Tn());
-		}, Ot = l(() => !(E.readonly || E.disabled || G.value && !Bt.value.length)), kt = new AbortController(), At = async () => o(() => !!k.value, {
+			i?.control && M.value?.contains(i.control) || (await Y(), On());
+		}, kt = l(() => !(E.readonly || E.disabled || G.value && !Ut.value.length)), At = new AbortController(), jt = async () => s(() => !!k.value, {
 			interval: 100,
-			signal: kt.signal
-		}), jt = () => {
+			signal: At.signal
+		}), Mt = () => {
 			let e = W.value[0];
 			if (e?.valueHash) {
 				k.value?.focusByHash(e.valueHash);
 				return;
 			}
 			k.value?.focusFirstSelected();
-		}, Mt = () => {
+		}, Nt = () => {
 			let e = W.value[W.value.length - 1];
 			if (e?.valueHash) {
 				k.value?.focusByHash(e.valueHash);
 				return;
 			}
 			k.value?.focusLastSelected();
-		}, Nt = async () => {
-			Ot.value && (K.value ? k.value?.focusPrevious() : (await J({ focusPopoverContent: !1 }), await At(), await c(E.transitionDuration), Mt()));
 		}, Pt = async () => {
-			Ot.value && (K.value ? k.value?.focusNext() : (await J({ focusPopoverContent: !1 }), await At(), await c(E.transitionDuration), jt()));
+			kt.value && (K.value ? k.value?.focusPrevious() : (await J({ focusPopoverContent: !1 }), await jt(), await c(E.transitionDuration), Nt()));
 		}, Ft = async () => {
-			if (!Ot.value) return;
+			kt.value && (K.value ? k.value?.focusNext() : (await J({ focusPopoverContent: !1 }), await jt(), await c(E.transitionDuration), Mt()));
+		}, It = async () => {
+			if (!kt.value) return;
 			if (!K.value) {
-				await J({ focusPopoverContent: !1 }), await At(), await c(E.transitionDuration), W.value.length ? jt() : F.value ? R() : yt();
+				await J({ focusPopoverContent: !1 }), await jt(), await c(E.transitionDuration), W.value.length ? Mt() : F.value ? R() : bt();
 				return;
 			} else if (k.value?.getHighlighted()) {
 				k.value.confirmOption();
@@ -249,68 +250,70 @@ var qe = {
 			}
 			if (!F.value) return;
 			let e = H.value.trim();
-			tn(e) || (D("option:add", e), H.value = "");
+			an(e) || (D("option:add", e), H.value = "");
 		}, B = async () => {
 			K.value && (await Y(), L());
-		}, V = Symbol("bb-select-popover-escape"), It = (e) => {
-			!K.value || e.key !== "Escape" || ne(V) && (e.stopImmediatePropagation(), e.preventDefault(), B());
-		}, H = v(""), Lt = v(!1), { getter: Rt, debouncedGetter: zt, items: Bt, loading: Vt } = ye({
+		}, V = Symbol("bb-select-popover-escape"), Lt = (e) => {
+			!K.value || e.key !== "Escape" || re(V) && (e.stopImmediatePropagation(), e.preventDefault(), B());
+		}, H = v(""), Rt = v(!1), { getter: zt, debouncedGetter: Bt, clientReproducible: Vt, hydratedFromSsr: Ht, items: Ut, loading: Wt } = xe({
 			items: b(E, "items"),
 			debounce: E.queryDebounceTime
-		}), { array: Ht, add: Ut, remove: Wt, set: Gt } = ve(), Kt = l(() => E.multiple ? !!E.modelValue?.length : !le(E.modelValue)), qt = l(() => E.prefill === !1 && !Array.isArray(E.items) && F.value && !Kt.value), Jt = l(() => qt.value && !H.value ? lt("select.searchToStart").value : E.noDataText), { hasPrefilled: Yt, isPrefilling: Xt, canLoad: Zt, prefill: Qt, markPrefilled: $t } = Ee({
-			trigger: l(() => Array.isArray(E.items) || E.prefill === !0 || E.enforceCoherence && Kt.value || E.prefill === "interaction" && Lt.value),
+		}), { array: Gt, add: Kt, remove: qt, set: Jt } = be(), Yt = l(() => E.multiple ? !!E.modelValue?.length : !pe(E.modelValue)), Xt = l(() => E.prefill === !1 && !Array.isArray(E.items) && F.value && !Yt.value), Zt = l(() => Xt.value && !H.value ? ut("select.searchToStart").value : E.noDataText), { hasPrefilled: Qt, isPrefilling: $t, canLoad: en, prefill: tn, markPrefilled: nn } = De({
+			alreadyLoaded: Ht,
+			clientReproducible: Vt,
+			trigger: l(() => Array.isArray(E.items) || E.prefill === !0 || E.enforceCoherence && Yt.value || E.prefill === "interaction" && Rt.value),
 			currentValue: void 0,
 			multiple: !1,
 			fn: async (e) => {
-				await Rt(H.value, e, E.modelValue), E.stash && Ut(...U.value.filter((e) => e.selected).map((e) => e.item)), E.enforceCoherence && !rn.value && D("update:modelValue", an.value);
+				await zt(H.value, e, E.modelValue), E.stash && Kt(...U.value.filter((e) => e.selected).map((e) => e.item)), E.enforceCoherence && !sn.value && D("update:modelValue", cn.value);
 			}
-		}), { data: en, get: tn } = Ce({ items: l(() => [].concat(E.modelValue)) }), { options: U } = we({
+		}), { data: rn, get: an } = we({ items: l(() => [].concat(E.modelValue)) }), { options: U } = Te({
 			disabled: b(E, "disabled"),
-			items: l(() => [...Bt.value, ...Ht.value]),
+			items: l(() => [...Ut.value, ...Gt.value]),
 			itemText: E.itemText,
 			itemValue: E.itemValue,
 			max: E.max,
 			selectable: b(E, "selectable"),
-			selectedIndexedByHash: en
-		}), { data: nn } = Ce({
+			selectedIndexedByHash: rn
+		}), { data: on } = we({
 			items: U,
 			key: "valueHash"
-		}), { coherent: rn, coherentValue: an } = Te({
+		}), { coherent: sn, coherentValue: cn } = Ee({
 			modelValue: b(E, "modelValue"),
 			multiple: E.multiple,
-			iteratee: (e) => !!nn.value[be(e)]
-		}), W = l(() => [].concat(E.modelValue).map((e) => nn.value[be(e)]).filter(Boolean)), on = (e) => ({
+			iteratee: (e) => !!on.value[ye(e)]
+		}), W = l(() => [].concat(E.modelValue).map((e) => on.value[ye(e)]).filter(Boolean)), ln = (e) => ({
 			item: e.item,
 			text: e.text,
 			value: e.value,
 			selected: e.selected ?? !0,
 			disabled: e.disabled ?? !1
-		}), sn = l(() => W.value.map(on)), G = l(() => !!(Vt.value || E.loading)), cn = l(() => G.value && U.value.length > 0), ln = l(() => !!E.hasErrors), un = l(() => !!E.hasWarning && !ln.value), dn = l(() => W.value.map((e) => e.text).filter(Boolean).join(", ") || "");
-		xe(() => E.modelValue, async () => {
-			Zt.value && (rn.value || (await Rt(H.value, !0, E.modelValue), E.enforceCoherence && (D("update:modelValue", an.value), k.value?.blur())));
-		}, { debounce: E.modelValueDebounceTime }), xe(() => [E.dependencies, E.items], async () => {
-			Zt.value && (await Rt(H.value, !0, E.modelValue), E.enforceCoherence && !rn.value && (D("update:modelValue", an.value), k.value?.blur()));
+		}), un = l(() => W.value.map(ln)), G = l(() => !!(Wt.value || E.loading)), dn = l(() => G.value && U.value.length > 0), fn = l(() => !!E.hasErrors), pn = l(() => !!E.hasWarning && !fn.value), mn = l(() => W.value.map((e) => e.text).filter(Boolean).join(", ") || "");
+		Se(() => E.modelValue, async () => {
+			en.value && (sn.value || (await zt(H.value, !0, E.modelValue), E.enforceCoherence && (D("update:modelValue", cn.value), k.value?.blur())));
+		}, { debounce: E.modelValueDebounceTime }), Se(() => [E.dependencies, E.items], async () => {
+			en.value && (await zt(H.value, !0, E.modelValue), E.enforceCoherence && !sn.value && (D("update:modelValue", cn.value), k.value?.blur()));
 		}, { debounce: E.depsDebounceTime });
-		let fn = async (e) => {
-			let t = xt();
-			E.multiple ? (D("update:modelValue", E.modelValue.concat(e.value)), E.stash && Ut(e.item)) : (E.stash && Gt(e.item), D("update:modelValue", e.value), await Ie()), E.multiple && F.value && K.value ? t && R() : L(), E.multiple || Y();
-		}, pn = async (e) => {
-			let t = xt();
+		let hn = async (e) => {
+			let t = St();
+			E.multiple ? (D("update:modelValue", E.modelValue.concat(e.value)), E.stash && Kt(e.item)) : (E.stash && Jt(e.item), D("update:modelValue", e.value), await Ie()), E.multiple && F.value && K.value ? t && R() : L(), E.multiple || Y();
+		}, gn = async (e) => {
+			let t = St();
 			if (!E.multiple) {
 				L(), Y();
 				return;
 			}
-			Wt((t) => t.valueHash !== e.valueHash);
-			let n = { ...en.value };
+			qt((t) => t.valueHash !== e.valueHash);
+			let n = { ...rn.value };
 			delete n[e.valueHash], D("update:modelValue", Object.values(n)), F.value && K.value ? t && R() : L();
-		}, mn = l(() => {
+		}, _n = l(() => {
 			if (!H.value || !E.multiple && W.value.some((e) => e.text === H.value)) return U.value;
 			let e = H.value.trim();
-			return E.filterBy.length ? U.value.filter((t) => ue(t.item, E.filterBy, e)) : U.value.filter((t) => ue(t, ["text"], e));
-		}), hn = Symbol("default"), gn = (e) => le(E.groupBy) ? hn : typeof E.groupBy == "function" ? E.groupBy(e.item) : pe(e.item, E.groupBy), _n = l(() => {
+			return E.filterBy.length ? U.value.filter((t) => me(t.item, E.filterBy, e)) : U.value.filter((t) => me(t, ["text"], e));
+		}), vn = Symbol("default"), yn = (e) => pe(E.groupBy) ? vn : typeof E.groupBy == "function" ? E.groupBy(e.item) : le(e.item, E.groupBy), bn = l(() => {
 			let e = {};
-			for (let t of mn.value) {
-				let n = gn(t), r = be(n);
+			for (let t of _n.value) {
+				let n = yn(t), r = ye(n);
 				e[r] || (e[r] = {
 					id: r,
 					data: n ?? null,
@@ -318,72 +321,73 @@ var qe = {
 				}), e[r].options.push(t);
 			}
 			return Object.values(e).filter((e) => e.options.length);
-		}), K = v(!1), vn = t(K), yn = se(K, () => E.transitionDuration), bn = () => (E.adaptive ?? Ae.adaptive) && P.value ? "canvas" : "popover", xn = v(bn()), q = l(() => xn.value === "canvas");
+		}), K = v(!1), xn = n(K), Sn = ce(K, () => E.transitionDuration), Cn = () => (E.adaptive ?? tt.adaptive) && P.value ? "canvas" : "popover", wn = v(Cn()), q = l(() => wn.value === "canvas");
 		S([
 			() => E.adaptive,
 			P,
 			K
 		], () => {
-			K.value || (xn.value = bn());
-		}), oe(q), fe({
+			K.value || (wn.value = Cn());
+		}), se(q), ge({
 			active: () => K.value && q.value,
 			input: () => A.value
 		});
-		let Sn = l(() => ({
+		let Tn = l(() => ({
 			side: "bottom",
 			size: "auto",
 			draggable: !0,
-			focusTarget: F.value ? ".bb-select-popover__search-input" : ".bb-listbox__option[role=\"option\"]:not(.bb-listbox__option--disabled), .bb-select-popover__focus-proxy",
+			focusTarget: ".bb-select-popover--sheet",
+			hideClose: !0,
 			disabled: E.disabled,
 			transitionDuration: E.transitionDuration,
-			...E.offCanvasProps?.title ? {} : { "aria-labelledby": jn.value },
+			...E.offCanvasProps?.title ? {} : { "aria-labelledby": Pn.value },
 			...E.offCanvasProps
 		})), J = async ({ focusPopoverContent: e = !0 } = {}) => {
-			E.disabled || E.readonly || K.value || (xn.value = bn(), Lt.value = !0, K.value = !0, !(!Yt.value && !Xt.value && !qt.value && (await Qt(), !K.value)) && (await Ie(), K.value && (q.value || (mt = !0, ht(), re(V), document.addEventListener("click", z), document.addEventListener("focusin", z), document.addEventListener("keydown", It, { capture: !0 }), e && (await c(0), K.value && (F.value ? R() : yt()))))));
+			E.disabled || E.readonly || K.value || (wn.value = Cn(), Rt.value = !0, K.value = !0, !(!Qt.value && !$t.value && !Xt.value && (await tn(), !K.value)) && (await Ie(), K.value && (q.value || (ht = !0, gt(), ie(V), document.addEventListener("click", z), document.addEventListener("focusin", z), document.addEventListener("keydown", Lt, { capture: !0 }), e && (await c(0), K.value && (F.value ? R() : bt()))))));
 		}, Y = async () => {
-			K.value && (K.value = !1, k.value?.blur(), j.value = void 0, H.value = "", !q.value && (gt(), ie(V), document.removeEventListener("click", z), document.removeEventListener("focusin", z), document.removeEventListener("keydown", It, { capture: !0 })));
-		}, Cn = () => {
-			k.value?.blur(), j.value = void 0, H.value = "", Tn(), L();
-		}, wn = () => K.value ? Y() : J(), X = v(!1), Z = () => {
+			K.value && (K.value = !1, k.value?.blur(), j.value = void 0, H.value = "", !q.value && (_t(), ae(V), document.removeEventListener("click", z), document.removeEventListener("focusin", z), document.removeEventListener("keydown", Lt, { capture: !0 })));
+		}, En = () => {
+			k.value?.blur(), j.value = void 0, H.value = "", On(), L();
+		}, Dn = () => K.value ? Y() : J(), X = v(!1), Z = () => {
 			X.value || (X.value = !0, D("active"));
-		}, Tn = () => {
+		}, On = () => {
 			X.value && (X.value = !1, D("inactive"));
-		}, En = (e) => {
+		}, kn = (e) => {
 			if (!(e instanceof Node)) return !1;
 			let t = !!O.value?.contains(e), n = k.value?.$el, r = n instanceof Element && !!n.closest(".bb-common-popover")?.contains(e);
 			return t || r;
-		}, Dn, On = () => {
-			clearTimeout(Dn), Dn = setTimeout(() => {
+		}, An, jn = () => {
+			clearTimeout(An), An = setTimeout(() => {
 				if (K.value) {
 					Z();
 					return;
 				}
-				if (En(document.activeElement)) {
+				if (kn(document.activeElement)) {
 					Z();
 					return;
 				}
-				Tn();
+				On();
 			}, 0);
-		}, kn = () => {
+		}, Mn = () => {
 			D("update:modelValue", E.multiple ? [] : null);
-		}, An = () => {
-			H.value = "", kn();
+		}, Nn = () => {
+			H.value = "", Mn();
 		}, Q = l(() => ({
 			close: Y,
-			clear: kn,
-			focus: bt,
+			clear: Mn,
+			focus: xt,
 			query: H.value,
-			selectedOptions: sn.value
-		})), $ = null, jn = v(), Mn = l(() => {
+			selectedOptions: un.value
+		})), $ = null, Pn = v(), Fn = l(() => {
 			let e = O.value;
 			return e ? e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby") : !1;
-		}), Nn = l(() => lt("select.triggerLabel").value);
+		}), In = l(() => ut("select.triggerLabel").value);
 		return S(O, (e) => {
 			if ($ &&= ($(), null), !e) return;
 			e.setAttribute("role", "combobox"), e.setAttribute("aria-haspopup", "listbox");
 			let t = !e.id;
-			t && (e.id = `${I}_activator`), jn.value = e.id;
-			let n = Mn.value, r = async (e) => {
+			t && (e.id = `${I}_activator`), Pn.value = e.id;
+			let n = Fn.value, r = async (e) => {
 				if (D("click", e), !E.disabled) {
 					if (e.preventDefault(), E.readonly) {
 						L();
@@ -400,13 +404,13 @@ var qe = {
 			}, a = (e) => {
 				switch (e.key) {
 					case "ArrowDown":
-						e.preventDefault(), Pt();
+						e.preventDefault(), Ft();
 						break;
 					case "ArrowUp":
-						e.preventDefault(), Nt();
+						e.preventDefault(), Pt();
 						break;
 					case "Enter":
-						e.preventDefault(), Ft();
+						e.preventDefault(), It();
 						break;
 					case "Escape":
 						K.value && (e.preventDefault(), B());
@@ -415,41 +419,41 @@ var qe = {
 			}, o = (e) => {
 				D("focus", e), Z();
 			}, s = (e) => {
-				D("blur", e), On();
+				D("blur", e), jn();
 			};
 			e.addEventListener("click", r), e.addEventListener("pointerdown", i), e.addEventListener("keydown", a), e.addEventListener("focus", o), e.addEventListener("blur", s), $ = () => {
-				e.removeEventListener("click", r), e.removeEventListener("pointerdown", i), e.removeEventListener("keydown", a), e.removeEventListener("focus", o), e.removeEventListener("blur", s), e.removeAttribute("role"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-invalid"), e.removeAttribute("aria-describedby"), e.removeAttribute("aria-activedescendant"), n || e.removeAttribute("aria-label"), t && e.removeAttribute("id"), jn.value = void 0;
+				e.removeEventListener("click", r), e.removeEventListener("pointerdown", i), e.removeEventListener("keydown", a), e.removeEventListener("focus", o), e.removeEventListener("blur", s), e.removeAttribute("role"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-invalid"), e.removeAttribute("aria-describedby"), e.removeAttribute("aria-activedescendant"), n || e.removeAttribute("aria-label"), t && e.removeAttribute("id"), Pn.value = void 0;
 			};
 		}, { immediate: !0 }), S([
 			O,
 			K,
-			vn,
-			ft,
+			xn,
 			pt,
+			mt,
 			j,
-			Mn,
-			Nn
+			Fn,
+			In
 		], ([e, t, n, r, i, a, o, s]) => {
 			e && (e.setAttribute("aria-expanded", String(t)), o || e.setAttribute("aria-label", s), r == null ? e.removeAttribute("aria-invalid") : e.setAttribute("aria-invalid", r), n ? e.setAttribute("aria-controls", `${I}_listbox`) : e.removeAttribute("aria-controls"), i == null ? e.removeAttribute("aria-describedby") : e.setAttribute("aria-describedby", i), t && a ? e.setAttribute("aria-activedescendant", a) : e.removeAttribute("aria-activedescendant"));
 		}, { immediate: !0 }), ze(() => {
-			clearTimeout(Dn), $?.(), kt.abort(), ie(V), document.removeEventListener("click", z), document.removeEventListener("focusin", z), document.removeEventListener("keydown", It, { capture: !0 });
+			clearTimeout(An), $?.(), At.abort(), ae(V), document.removeEventListener("click", z), document.removeEventListener("focusin", z), document.removeEventListener("keydown", Lt, { capture: !0 });
 		}), (e, t) => (_(), f(je, null, [
-			ot.value ? d("", !0) : y(e.$slots, "activator", g(h({ key: 0 }, {
-				props: { ref: st },
+			st.value ? d("", !0) : y(e.$slots, "activator", g(h({ key: 0 }, {
+				props: { ref: ct },
 				shown: K.value,
 				disabled: e.disabled,
 				readonly: e.readonly,
 				loading: G.value,
 				query: H.value,
-				selectedOptions: sn.value,
-				text: dn.value,
-				clear: kn,
-				focus: bt,
+				selectedOptions: un.value,
+				text: mn.value,
+				clear: Mn,
+				focus: xt,
 				open: J,
 				close: Y,
-				toggle: wn
+				toggle: Dn
 			}))),
-			p(x(tt), null, {
+			p(x(nt), null, {
 				default: C(() => [F.value ? (_(), f("div", qe, [
 					Ue(Me("input", {
 						id: `${x(I)}_search`,
@@ -457,97 +461,98 @@ var qe = {
 						ref: A,
 						"onUpdate:modelValue": t[0] ||= (e) => H.value = e,
 						"aria-activedescendant": j.value,
-						"aria-controls": x(vn) ? `${x(I)}_listbox` : void 0,
-						"aria-describedby": pt.value,
-						"aria-invalid": ft.value,
-						"aria-label": ut.value,
+						"aria-controls": x(xn) ? `${x(I)}_listbox` : void 0,
+						"aria-describedby": mt.value,
+						"aria-invalid": pt.value,
+						"aria-label": dt.value,
 						autocomplete: e.autocomplete,
 						class: "bb-select-popover__search-input",
-						inputmode: ct.value,
+						inputmode: lt.value,
+						placeholder: dt.value,
 						role: "searchbox",
 						tabindex: K.value ? 0 : -1,
 						type: "text",
-						onBlur: T(Ct, ["stop"]),
-						onChange: T(wt, ["stop"]),
-						onFocus: T(St, ["stop"]),
-						onInput: T(Et, ["stop"]),
+						onBlur: T(wt, ["stop"]),
+						onChange: T(Tt, ["stop"]),
+						onFocus: T(Ct, ["stop"]),
+						onInput: T(Dt, ["stop"]),
 						onKeydown: [
-							w(T(Pt, ["stop", "prevent"]), ["down"]),
-							w(T(Ft, ["stop", "prevent"]), ["enter"]),
+							w(T(Ft, ["stop", "prevent"]), ["down"]),
+							w(T(It, ["stop", "prevent"]), ["enter"]),
 							w(T(B, ["stop", "prevent"]), ["esc"]),
-							w(T(Nt, ["stop", "prevent"]), ["up"])
+							w(T(Pt, ["stop", "prevent"]), ["up"])
 						]
 					}, null, 40, Je), [[He, H.value]]),
-					p(De, {
+					p(Oe, {
 						"aria-hidden": "true",
 						class: "bb-select-popover__search-error-icon",
 						focusable: "false"
 					}),
-					p(Oe, {
+					p(ke, {
 						"aria-hidden": "true",
 						class: "bb-select-popover__search-warning-icon",
 						focusable: "false"
 					}),
-					p(ce, {
+					p(de, {
 						"aria-hidden": "true",
 						class: "bb-select-popover__search-icon",
 						focusable: "false",
-						icon: x(de)
+						icon: x(he)
 					}, null, 8, ["icon"]),
-					e.clearable ? (_(), u(Se, {
+					e.clearable ? (_(), u(Ce, {
 						key: 0,
 						class: "bb-select-popover__search-clear",
-						tabindex: dt.value && K.value ? 0 : -1,
-						onClick: T(An, ["stop"]),
+						tabindex: ft.value && K.value ? 0 : -1,
+						onClick: T(Nn, ["stop"]),
 						onMousedown: t[1] ||= T(() => {}, ["prevent"])
 					}, null, 8, ["tabindex"])) : d("", !0),
-					cn.value ? (_(), f("div", Ye)) : d("", !0)
+					dn.value ? (_(), f("div", Ye)) : d("", !0)
 				])) : (_(), f("button", {
 					key: 1,
 					ref_key: "popoverFocusProxy",
-					ref: at,
+					ref: ot,
 					"aria-activedescendant": j.value,
 					"aria-controls": `${x(I)}_listbox`,
-					"aria-describedby": pt.value,
+					"aria-describedby": mt.value,
 					"aria-expanded": "true",
-					"aria-invalid": ft.value,
-					"aria-label": ut.value,
+					"aria-invalid": pt.value,
+					"aria-label": dt.value,
 					class: "bb-select-popover__focus-proxy sr-only",
 					role: "combobox",
 					tabindex: "-1",
 					type: "button",
-					onFocus: Tt,
+					onFocus: Et,
 					onKeydown: [
-						w(T(Pt, ["stop", "prevent"]), ["down"]),
-						w(T(Ft, ["stop", "prevent"]), ["enter"]),
+						w(T(Ft, ["stop", "prevent"]), ["down"]),
+						w(T(It, ["stop", "prevent"]), ["enter"]),
 						w(T(B, ["stop", "prevent"]), ["esc"]),
-						w(T(Nt, ["stop", "prevent"]), ["up"])
+						w(T(Pt, ["stop", "prevent"]), ["up"])
 					]
 				}, null, 40, Xe))]),
 				_: 1
 			}),
-			p(x(rt), null, {
-				default: C(() => [p(ke, {
+			p(x(it), null, {
+				default: C(() => [p(Ae, {
 					id: `${x(I)}_listbox`,
 					ref_key: "optionsContainer",
 					ref: k,
 					compact: e.compact,
-					groups: e.groupBy ? _n.value : void 0,
+					groups: e.groupBy ? bn.value : void 0,
 					"header-height": e.headerHeight,
 					loading: G.value,
 					"loading-text": e.loadingText,
 					multiple: e.multiple,
-					"no-data-text": Jt.value,
+					"no-data-text": Zt.value,
 					open: K.value,
 					"option-height": e.itemHeight,
-					options: e.groupBy ? void 0 : mn.value,
-					"onFocused:change": Dt,
-					"onOption:selected": fn,
-					"onOption:unselected": pn
+					options: e.groupBy ? void 0 : _n.value,
+					"onFocused:change": Ot,
+					"onOption:selected": hn,
+					"onOption:unselected": gn
 				}, {
 					loading: C(() => [y(e.$slots, "loading", { query: H.value })]),
 					"no-data": C(() => [y(e.$slots, "no-data", {
-						focus: bt,
+						focus: xt,
 						query: H.value
 					})]),
 					option: C((t) => [y(e.$slots, "option", h({ loading: G.value }, t))]),
@@ -568,37 +573,40 @@ var qe = {
 				])]),
 				_: 3
 			}),
-			q.value ? (_(), u(he, h({
+			q.value ? (_(), u(_e, h({
 				key: 1,
 				modelValue: K.value,
 				"onUpdate:modelValue": t[3] ||= (e) => K.value = e,
 				class: "bb-select-popover-offcanvas"
 			}, {
-				...Sn.value,
+				...Tn.value,
 				...e.$attrs
-			}, { onHidden: Cn }), Ne({
-				default: C(() => [Me("div", { class: Le(["bb-select-popover bb-select-popover--sheet", {
-					"bb-select-popover--errors": ln.value,
-					"bb-select-popover--warnings": un.value,
-					"bb-select-popover--loading": G.value,
-					"bb-select-popover--reloading": cn.value,
-					"bb-select-popover--clearable-active": dt.value
-				}]) }, [
-					W.value.length ? (_(), f("div", Ze, [Me("div", Qe, [(_(!0), f(je, null, Be(W.value, (n) => (_(), u(_e, {
+			}, { onHidden: En }), Ne({
+				default: C(() => [Me("div", {
+					class: Le(["bb-select-popover bb-select-popover--sheet", {
+						"bb-select-popover--errors": fn.value,
+						"bb-select-popover--warnings": pn.value,
+						"bb-select-popover--loading": G.value,
+						"bb-select-popover--reloading": dn.value,
+						"bb-select-popover--clearable-active": ft.value
+					}]),
+					tabindex: "-1"
+				}, [
+					e.multiple && W.value.length ? (_(), f("div", Ze, [Me("div", Qe, [(_(!0), f(je, null, Be(W.value, (n) => (_(), u(fe, {
 						key: n.valueHash,
 						class: "bb-select-popover__sheet-chip",
 						clearable: !e.disabled && !e.readonly,
 						size: "xl",
 						variant: "secondary",
-						"onClick:clear": (e) => pn(n),
+						"onClick:clear": (e) => gn(n),
 						onMousedown: t[2] ||= T(() => {}, ["prevent"])
 					}, {
 						default: C(() => [Pe(Ve(n.text), 1)]),
 						_: 2
 					}, 1032, ["clearable", "onClick:clear"]))), 128))])])) : d("", !0),
-					p(x(nt)),
-					p(ge, null, {
-						default: C(() => [p(x(it))]),
+					p(x(rt)),
+					p(ve, null, {
+						default: C(() => [p(x(at))]),
 						_: 1
 					})
 				], 2)]),
@@ -611,25 +619,25 @@ var qe = {
 				name: "footer",
 				fn: C(() => [y(e.$slots, "footer", g(m(Q.value)))]),
 				key: "1"
-			} : void 0]), 1040, ["modelValue"])) : (_(), u(ee, h({
+			} : void 0]), 1040, ["modelValue"])) : (_(), u(te, h({
 				key: 2,
 				modelValue: K.value,
 				"onUpdate:modelValue": t[4] ||= (e) => K.value = e,
 				anchor: M.value,
 				boundary: e.boundary,
 				class: ["bb-select-popover", {
-					"bb-select-popover--errors": ln.value,
-					"bb-select-popover--warnings": un.value,
+					"bb-select-popover--errors": fn.value,
+					"bb-select-popover--warnings": pn.value,
 					"bb-select-popover--loading": G.value,
-					"bb-select-popover--reloading": cn.value,
-					"bb-select-popover--clearable-active": dt.value
+					"bb-select-popover--reloading": dn.value,
+					"bb-select-popover--clearable-active": ft.value
 				}],
 				"disable-flip": e.disableFlip,
 				"hide-arrow": "",
 				offset: e.offset,
 				padding: e.padding,
 				placement: e.placement,
-				style: vt.value,
+				style: yt.value,
 				tag: "span",
 				"transition-duration": e.transitionDuration
 			}, e.$attrs), {
@@ -637,14 +645,14 @@ var qe = {
 					e.$slots.header ? (_(), f("div", {
 						key: 0,
 						class: "bb-select-popover__header",
-						inert: x(yn)
+						inert: x(Sn)
 					}, [y(e.$slots, "header", g(m(Q.value)))], 8, $e)) : d("", !0),
-					p(x(nt)),
-					p(x(it)),
+					p(x(rt)),
+					p(x(at)),
 					e.$slots.footer ? (_(), f("div", {
 						key: 1,
 						class: "bb-select-popover__footer",
-						inert: x(yn)
+						inert: x(Sn)
 					}, [y(e.$slots, "footer", g(m(Q.value)))], 8, et)) : d("", !0)
 				]),
 				_: 3