sb-floating-panel-vue 5.0.3 → 5.2.0

package/dist/sb-floating-panel.es.js

@@ -1,62 +1,103 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, onScopeDispose as h, openBlock as g, provide as _, ref as v, renderSlot as y, resolveDynamicComponent as b, toRef as x, toValue as S, unref as C, useAttrs as w, useId as T, useModel as E, watch as D, watchEffect as O, withCtx as k } from "vue";
-import { autoUpdate as A, flip as j, hide as M, limitShift as N, offset as P, shift as F, size as ee, useFloating as te } from "@floating-ui/vue";
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, mergeProps as u, nextTick as ee, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onScopeDispose as m, openBlock as h, provide as g, readonly as _, ref as v, renderSlot as te, resolveDynamicComponent as y, toRef as b, toValue as x, unref as S, useAttrs as C, useId as w, useModel as T, watch as E, watchEffect as D, withCtx as O } from "vue";
+import { autoUpdate as k, flip as A, hide as j, limitShift as M, offset as N, shift as P, size as F, useFloating as ne } from "@floating-ui/vue";
+//#region src/utils/dom.ts
+var re = "data-sbf-focus-guard", I = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"summary",
+	"audio[controls]",
+	"video[controls]",
+	"[tabindex]",
+	"[contenteditable=\"true\"]"
+].join(","), L = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function ie(e) {
+	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
+	return t instanceof HTMLElement ? t : null;
+}
+function R(e) {
+	let t = e instanceof Element ? e.closest(I) : null;
+	return !!t && !t.closest("[inert]");
+}
+function ae(e) {
+	try {
+		return e.matches(":focus-visible");
+	} catch {
+		return !0;
+	}
+}
+var oe = (e) => e.matches(I) && !e.closest("[inert]");
+function z(e) {
+	return [...e.querySelectorAll(I)].filter(L);
+}
+function B(e, t) {
+	return z(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+}
+//#endregion
 //#region src/utils/warn.ts
-var I = (() => {
+var se = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 })();
-function L(e) {
-	I && console.warn(`[sb-floating-panel-vue] ${e}`);
+function V(e) {
+	se && console.warn(`[sb-floating-panel-vue] ${e}`);
 }
 //#endregion
 //#region src/composables/useSbFloatingContext.ts
-var R = Symbol("SbFloatingContext");
-function ne(e, t, n) {
-	return ++e.parts[t] > 1 && L(`<SbContainer> has more than one <${n}>: they share one open state and position, so only the last one works. Use one SbContainer for each panel.`), () => e.parts[t]--;
+var H = (e) => e.parent?.navigation.value === "menu";
+function U(e, t) {
+	let n = document.activeElement, r = e.reference.value;
+	return !n || !r || r.contains(n) || !e.contains(n) ? !1 : ((t ? r : B(r, (t) => e.contains(t)))?.focus({ preventScroll: !0 }), !0);
 }
-function z(e) {
-	let t = c(R, null);
+var W = Symbol("SbFloatingContext");
+function ce(e, t, n) {
+	return ++e.parts[t] > 1 && V(`<SbContainer> has more than one <${n}>: they share one open state and position, so only the last one works. Use one SbContainer for each panel.`), () => e.parts[t]--;
+}
+function le(e) {
+	let t = c(W, null);
 	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
 	return t;
 }
 //#endregion
 //#region src/composables/useSbFloatingPanel.ts
-var B = (e) => `${Math.max(0, e)}px`, V = (e, t) => {
+var G = (e) => `${Math.max(0, e)}px`, K = (e, t) => {
 	let [n, r] = e.split("-"), i = t && (n === "top" || n === "bottom"), a = r === "start" ? i ? "100%" : "0%" : r === "end" ? i ? "0%" : "100%" : "50%";
 	return n === "top" ? `${a} 100%` : n === "bottom" ? `${a} 0%` : n === "left" ? `100% ${a}` : `0% ${a}`;
 };
-function re(e) {
+function q(e) {
 	let t = v(null), r = v(null), i = n(() => {
-		let t = S(e.padding), n = S(e.matchWidth), r = S(e.placement).includes("-"), i = j({
+		let t = x(e.padding), n = x(e.matchWidth), r = x(e.placement).includes("-"), i = A({
 			padding: t,
 			crossAxis: "alignment",
 			fallbackAxisSideDirection: "end"
-		}), a = F({
+		}), a = P({
 			padding: t,
-			limiter: N()
+			limiter: M()
 		}), o = [
-			P(S(e.offset)),
+			N(x(e.offset)),
 			...r ? [i, a] : [a, i],
-			ee({
+			F({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = B(e.reference.width);
+					let { style: o } = t.floating, s = G(e.reference.width);
 					o.setProperty("--sbf-reference-width", s);
 					let c = getComputedStyle(t.floating).direction === "rtl";
-					o.setProperty("--sbf-transform-origin", V(a, c)), o.setProperty("--sbf-available-width", B(r)), o.setProperty("--sbf-available-height", B(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
+					o.setProperty("--sbf-transform-origin", K(a, c)), o.setProperty("--sbf-available-width", G(r)), o.setProperty("--sbf-available-height", G(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
 				}
 			})
 		];
-		return S(e.hideWhenDetached) && o.push(M({ padding: t })), o;
-	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = te(t, r, {
-		open: () => S(e.isOpen),
-		placement: () => S(e.placement),
-		strategy: () => S(e.strategy),
+		return x(e.hideWhenDetached) && o.push(j({ padding: t })), o;
+	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = ne(t, r, {
+		open: () => x(e.isOpen),
+		placement: () => x(e.placement),
+		strategy: () => x(e.strategy),
 		middleware: i,
-		whileElementsMounted: A
+		whileElementsMounted: k
 	}), u = n(() => !!o.value.hide?.referenceHidden);
 	return {
 		reference: t,
@@ -74,37 +115,11 @@ function re(e) {
 	};
 }
 //#endregion
-//#region src/utils/dom.ts
-var ie = "data-sbf-focus-guard", H = [
-	"a[href]",
-	"button:not([disabled])",
-	"input:not([disabled]):not([type=\"hidden\"])",
-	"select:not([disabled])",
-	"textarea:not([disabled])",
-	"summary",
-	"audio[controls]",
-	"video[controls]",
-	"[tabindex]",
-	"[contenteditable=\"true\"]"
-].join(","), ae = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
-function U(e) {
-	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
-	return t instanceof HTMLElement ? t : null;
-}
-function oe(e) {
-	let t = e instanceof Element ? e.closest(H) : null;
-	return !!t && !t.closest("[inert]");
-}
-var se = (e) => e.matches(H) && !e.closest("[inert]");
-function W(e) {
-	return [...e.querySelectorAll(H)].filter(ae);
-}
-function G(e, t) {
-	return W(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
-}
-//#endregion
 //#region src/components/SbContainer.vue?vue&type=script&setup=true&lang.ts
-var K = [], q = /* @__PURE__ */ s({
+var J = [], Y = {
+	open: 300,
+	close: 150
+}, X = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -129,10 +144,7 @@ var K = [], q = /* @__PURE__ */ s({
 			default: !1
 		},
 		trigger: { default: "click" },
-		delay: { default: () => ({
-			open: 300,
-			close: 150
-		}) },
+		delay: { default: () => ({ ...Y }) },
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -154,20 +166,17 @@ var K = [], q = /* @__PURE__ */ s({
 	}),
 	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = E(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u;
-		h(() => clearTimeout(u));
-		let d = (e) => {
-			clearTimeout(u), !(e && i.disabled) && e !== l.value && (a.value = e);
-		}, f = () => d(!0), m = () => d(!1), g = () => d(!l.value), b = (e) => {
+		let i = e, a = T(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u;
+		m(() => clearTimeout(u));
+		let d, p = ((e, t) => {
+			clearTimeout(u), !(e && i.disabled) && e !== l.value && (d = t, a.value = e, ee(() => d = void 0));
+		}), h = () => p(!0, "api"), _ = () => p(!1, "api"), y = () => p(!l.value, "api"), x = (e) => {
 			if (e.pointerType === "touch" || (O?.hover(e), i.trigger !== "hover")) return;
 			let t = e.type === "pointerenter" || k.contains(e.relatedTarget);
 			if (clearTimeout(u), t === l.value) return;
-			let { delay: n } = i, r = typeof n == "number" ? {
-				open: n,
-				close: n
-			} : n, a = (t ? r.open : r.close) ?? (t ? 300 : 150);
-			u = setTimeout(() => d(t), a);
-		}, S = re({
+			let { delay: n } = i, r = t ? "open" : "close", a = typeof n == "number" ? n : n[r] ?? Y[r];
+			u = setTimeout(() => p(t, "hover"), a);
+		}, C = q({
 			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
@@ -175,12 +184,12 @@ var K = [], q = /* @__PURE__ */ s({
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), w = /* @__PURE__ */ new Set(), O = c(R, null), k = {
-			...S,
+		}), D = /* @__PURE__ */ new Set(), O = c(W, null), k = {
+			...C,
 			isOpen: l,
-			disabled: x(i, "disabled"),
-			trigger: x(i, "trigger"),
-			floatingId: `${T()}-floating`,
+			disabled: b(i, "disabled"),
+			trigger: b(i, "trigger"),
+			floatingId: `${w()}-floating`,
 			referenceId: v(),
 			floatingRole: v("dialog"),
 			navigation: v(null),
@@ -192,21 +201,24 @@ var K = [], q = /* @__PURE__ */ s({
 				floating: 0
 			},
 			isUnmounting: !1,
-			open: f,
-			close: m,
-			toggle: g,
-			hover: b,
-			contains: (e) => e instanceof Node ? S.reference.value?.contains(e) || S.floating.value?.contains(e) ? !0 : [...w].some((t) => t.contains(e)) : !1,
-			registerChild: (e) => (w.add(e), () => w.delete(e))
+			open: h,
+			close: _,
+			toggle: y,
+			setOpen: p,
+			hover: x,
+			contains: (e) => e instanceof Node ? C.reference.value?.contains(e) || C.floating.value?.contains(e) ? !0 : [...D].some((t) => t.contains(e)) : !1,
+			registerChild: (e) => (D.add(e), () => D.delete(e))
 		};
-		O && h(O.registerChild(k)), _(R, k), p(() => k.isUnmounting = !0);
+		O && m(O.registerChild(k)), g(W, k), f(() => {
+			k.isUnmounting = !0, U(k, !1);
+		});
 		let A = (e) => {
 			let t = e.composedPath()[0] ?? e.target;
-			return K.findLast((e) => e.contains(t)) ?? K[K.length - 1];
+			return J.findLast((e) => e.contains(t)) ?? J[J.length - 1];
 		}, j = (e) => {
-			e.key === "Escape" && A(e) === k && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), m()));
+			e.key === "Escape" && A(e) === k && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), p(!1, "escape")));
 		}, M = (e) => {
-			k.contains(e) || (k.skipFocusReturn = oe(e), m());
+			k.contains(e) || (k.skipFocusReturn = R(e), p(!1, "outside"));
 		}, N, P = (e) => {
 			if (N?.(), !i.closeOnClickOutside) return;
 			let t = e.composedPath()[0] ?? e.target;
@@ -222,57 +234,60 @@ var K = [], q = /* @__PURE__ */ s({
 				document.removeEventListener("click", n, !0), N = void 0;
 			};
 		}, F = (e) => {
-			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
+			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || p(!1, "focus-out"));
 		};
-		return D(l, (e, t, n) => {
-			e && typeof document < "u" && (K.push(k), document.addEventListener("keydown", j), document.addEventListener("pointerdown", P, !0), document.addEventListener("focusin", F), n(() => {
-				document.removeEventListener("keydown", j), document.removeEventListener("pointerdown", P, !0), document.removeEventListener("focusin", F), N?.(), K.splice(K.indexOf(k), 1);
+		return E(l, (e, t, n) => {
+			e && typeof document < "u" && (J.push(k), document.addEventListener("keydown", j), document.addEventListener("pointerdown", P, !0), document.addEventListener("focusin", F), n(() => {
+				document.removeEventListener("keydown", j), document.removeEventListener("pointerdown", P, !0), document.removeEventListener("focusin", F), N?.(), J.splice(J.indexOf(k), 1);
 			}));
-		}, { immediate: !0 }), D(l, (e) => o(e ? "open" : "close")), D(S.referenceHidden, (e) => {
-			e && i.hideWhenDetached === "close" && m();
-		}), D(() => i.disabled, (e) => {
+		}, { immediate: !0 }), E(l, (e) => {
+			let t = d ?? (!e && i.disabled ? "disabled" : "api");
+			d = void 0, o(e ? "open" : "close", t);
+		}), E(C.referenceHidden, (e) => {
+			e && i.hideWhenDetached === "close" && p(!1, "detached");
+		}), E(() => i.disabled, (e) => {
 			e && (a.value ?? s) && (a.value = !1);
 		}), t({
 			get isOpen() {
 				return l.value;
 			},
-			open: f,
-			close: m,
-			toggle: g,
-			update: S.update
-		}), (e, t) => y(e.$slots, "default", {
+			open: h,
+			close: _,
+			toggle: y,
+			update: C.update
+		}), (e, t) => te(e.$slots, "default", {
 			isOpen: l.value,
-			open: f,
-			close: m,
-			toggle: g,
-			placement: C(S).placement.value,
-			side: C(S).side.value,
-			align: C(S).align.value,
+			open: h,
+			close: _,
+			toggle: y,
+			placement: S(C).placement.value,
+			side: S(C).side.value,
+			align: S(C).align.value,
 			floatingId: k.floatingId,
 			referenceId: k.referenceId.value
 		});
 	}
-}), J = {
+}), ue = {
 	dialog: "dialog",
 	alertdialog: "dialog",
 	menu: "menu",
 	listbox: "listbox",
 	tree: "tree",
 	grid: "grid"
-}, Y = {
+}, Z = {
 	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
 	listbox: "[role=\"option\"]"
-}, ce = (e) => !!e && Object.hasOwn(Y, e);
-function le(e, t) {
-	return [...e.querySelectorAll(Y[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
+}, de = (e) => !!e && Object.hasOwn(Z, e);
+function fe(e, t) {
+	return [...e.querySelectorAll(Z[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
 }
-var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), ue = (e) => getComputedStyle(e).direction === "rtl" ? {
+var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), pe = (e) => getComputedStyle(e).direction === "rtl" ? {
 	open: "ArrowLeft",
 	close: "ArrowRight"
 } : {
 	open: "ArrowRight",
 	close: "ArrowLeft"
-}, de = /* @__PURE__ */ s({
+}, me = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
@@ -280,68 +295,70 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, i = w(), a = z("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = ne(a, "reference", "SbReference"), d = [
+		let t = e, i = C(), a = le("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = ce(a, "reference", "SbReference"), ee = [
 			"button",
 			"input",
 			"textarea",
 			"select"
-		], f = () => typeof t.as != "string" || d.includes(t.as) || t.as === "a" && i.href != null, h = `${T()}-reference`, _ = n(() => t.id ?? h);
-		O(() => {
-			a.referenceId.value = _.value;
-		}), m(() => {
-			let e = a.reference.value;
-			e ? X(e) && a.navigation.value && L(`<SbReference> is a text field with a role="${a.navigation.value}" panel: the arrow keys move focus into the panel, so typing stops there. The combobox pattern (focus kept in the field with aria-activedescendant) is not supported.`) : L("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
+		], d = () => typeof t.as != "string" || ee.includes(t.as) || t.as === "a" && i.href != null, m = `${w()}-reference`, g = n(() => t.id ?? m);
+		D(() => {
+			a.referenceId.value = g.value;
 		}), p(() => {
-			a.referenceId.value === _.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && a.close();
+			let e = a.reference.value;
+			e ? Q(e) && a.navigation.value && V(`<SbReference> is a text field with a role="${a.navigation.value}" panel: the arrow keys move focus into the panel, so typing stops there. The combobox pattern (focus kept in the field with aria-activedescendant) is not supported.`) : V("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
+		}), f(() => {
+			a.referenceId.value === g.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && (a.skipFocusReturn = U(a, !1), a.setOpen(!1, "api"));
 		});
-		let v = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(J, l.value) ? J[l.value] : void 0)), x = (e) => {
-			a.reference.value = U(e);
-		}, S = () => {
-			a.trigger.value === "click" && (X(a.reference.value) ? a.open() : a.toggle());
-		}, E = n(() => l.value === "tooltip"), D = () => a.trigger.value === "hover" || a.trigger.value === "focus", A = () => a.parent?.navigation.value === "menu", j = (e) => {
-			D() && !A() && !a.contains(e.relatedTarget) && a.open();
-		}, M = (e) => {
-			D() && !a.contains(e.relatedTarget) && a.close();
-		}, N = (e) => {
-			let t = a.floating.value, n = t && W(t)[0];
+		let _ = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(ue, l.value) ? ue[l.value] : void 0)), v = (e) => {
+			a.reference.value = ie(e);
+		}, b = () => {
+			a.trigger.value === "click" && (Q(a.reference.value) ? a.setOpen(!0, "trigger") : a.setOpen(!o.value, "trigger"));
+		}, x = n(() => l.value === "tooltip"), T = () => a.trigger.value === "hover" || a.trigger.value === "focus", E = (e) => {
+			if (!T() || H(a) || a.contains(e.relatedTarget)) return;
+			let t = e.target;
+			(a.trigger.value === "focus" || ae(t)) && a.setOpen(!0, "focus");
+		}, k = (e) => {
+			T() && !a.contains(e.relatedTarget) && a.setOpen(!1, "focus-out");
+		}, A = (e) => {
+			let t = a.floating.value, n = t && z(t)[0];
 			n && (e.preventDefault(), n.focus());
-		}, P = (e) => {
+		}, j = (e) => {
 			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
-				if (A()) {
+				if (H(a)) {
 					let t = e.currentTarget;
-					return e.key === ue(t).open ? "first" : void 0;
+					return e.key === pe(t).open ? "first" : void 0;
 				}
 				return e.key === "ArrowDown" ? "first" : e.key === "ArrowUp" ? "last" : void 0;
 			}
-		}, F = (e) => {
-			if (e.key === "Tab" && !e.shiftKey && o.value && !A()) {
-				N(e);
+		}, M = (e) => {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !H(a)) {
+				A(e);
 				return;
 			}
-			let t = P(e);
-			t ? (e.preventDefault(), a.focusRequest.value = t, a.open()) : f() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), S());
+			let t = j(e);
+			t ? (e.preventDefault(), a.focusRequest.value = t, a.setOpen(!0, "trigger")) : d() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), b());
 		};
-		return (e, n) => (g(), r(b(t.as), {
-			id: _.value,
-			ref: x,
+		return (e, n) => (h(), r(y(t.as), {
+			id: g.value,
+			ref: v,
 			type: t.as === "button" ? "button" : void 0,
-			role: f() ? void 0 : "button",
-			tabindex: f() ? void 0 : C(s) ? -1 : 0,
-			disabled: t.as === "button" && C(s) ? !0 : void 0,
-			"aria-disabled": t.as !== "button" && C(s) ? "true" : void 0,
-			"aria-haspopup": v.value,
-			"aria-expanded": E.value ? void 0 : C(o) ? "true" : "false",
-			"aria-controls": C(o) && !E.value ? C(c) : void 0,
-			"aria-describedby": C(o) && E.value ? C(c) : void 0,
-			"data-sbf-state": C(o) ? "open" : "closed",
-			onClick: S,
-			onKeydown: F,
-			onFocusin: j,
-			onFocusout: M,
-			onPointerenter: C(a).hover,
-			onPointerleave: C(a).hover
+			role: d() ? void 0 : "button",
+			tabindex: d() ? void 0 : S(s) ? -1 : 0,
+			disabled: t.as === "button" && S(s) ? !0 : void 0,
+			"aria-disabled": t.as !== "button" && S(s) ? "true" : void 0,
+			"aria-haspopup": _.value,
+			"aria-expanded": x.value ? void 0 : S(o) ? "true" : "false",
+			"aria-controls": S(o) && !x.value ? S(c) : void 0,
+			"aria-describedby": S(o) && x.value ? S(c) : void 0,
+			"data-sbf-state": S(o) ? "open" : "closed",
+			onClick: b,
+			onKeydown: M,
+			onFocusin: E,
+			onFocusout: k,
+			onPointerenter: S(a).hover,
+			onPointerleave: S(a).hover
 		}, {
-			default: k(() => [y(e.$slots, "default")]),
+			default: O(() => [te(e.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"id",
@@ -359,7 +376,7 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			"onPointerleave"
 		]));
 	}
-}), Z = /* @__PURE__ */ s({
+}), he = ":disabled, [aria-disabled=\"true\"], [aria-haspopup]:not([aria-haspopup=\"false\"])", ge = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbFloating",
 	props: {
@@ -378,30 +395,36 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 		keyboardNavigation: {
 			type: Boolean,
 			default: !0
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, _ = c, x = w(), S = z("SbFloating");
-		p(ne(S, "floating", "SbFloating"));
-		let { isOpen: T, floatingId: E, referenceId: A, side: j, align: M } = S;
-		O(() => {
-			S.floatingRole.value = l.role, S.navigation.value = l.keyboardNavigation && ce(l.role) ? l.role : null;
-		}), m(() => {
-			l.role === "tooltip" && S.trigger.value === "click" && L("<SbFloating role=\"tooltip\"> opens on click: a tooltip shows on hover and focus. Set trigger=\"hover\" or \"focus\" on SbContainer, or use another role for a panel opened by click.");
+		let l = s, g = c, _ = C(), b = le("SbFloating");
+		f(ce(b, "floating", "SbFloating")), f(() => {
+			b.isUnmounting || U(b, !0);
+		});
+		let { isOpen: x, floatingId: w, referenceId: T, side: k, align: A } = b;
+		D(() => {
+			b.floatingRole.value = l.role, b.navigation.value = l.keyboardNavigation && de(l.role) ? l.role : null;
+		}), p(() => {
+			l.role === "tooltip" && b.trigger.value === "click" && V("<SbFloating role=\"tooltip\"> opens on click: a tooltip shows on hover and focus. Set trigger=\"hover\" or \"focus\" on SbContainer, or use another role for a panel opened by click.");
 		});
-		let N = v(T.value), P = v(null), F = (e) => {
-			S.floating.value = e instanceof HTMLElement ? e : null;
-		}, ee = (e) => {
-			P.value = U(e);
-		}, te = n(() => ({
-			...S.floatingStyles.value,
+		let j = v(x.value), M = v(null), N = (e) => {
+			b.floating.value = e instanceof HTMLElement ? e : null;
+		}, P = (e) => {
+			M.value = ie(e);
+		}, F = n(() => ({
+			...b.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
-		})), I = () => ({
-			"aria-labelledby": l.role && Object.hasOwn(J, l.role) && x["aria-label"] == null ? A.value : void 0,
-			...x
-		}), R = n(() => l.autoFocus ?? (l.role !== "tooltip" && S.trigger.value !== "hover" && S.trigger.value !== "focus" && !X(S.reference.value))), B = n(() => T.value && l.teleport !== !1 && l.role !== "tooltip"), V = {
-			[ie]: "",
+		})), ne = () => ({
+			"aria-labelledby": l.role && Object.hasOwn(ue, l.role) && _["aria-label"] == null ? T.value : void 0,
+			..._
+		}), I = n(() => l.autoFocus ?? (l.role !== "tooltip" && b.trigger.value !== "hover" && b.trigger.value !== "focus" && !Q(b.reference.value))), L = n(() => x.value && l.teleport !== !1 && l.role !== "tooltip"), R = {
+			[re]: "",
 			tabindex: 0,
 			style: {
 				position: "fixed",
@@ -409,76 +432,98 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				outline: "none",
 				pointerEvents: "none"
 			}
-		}, re = n(() => {
+		}, ae = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), H = (e) => e.setAttribute("data-sbf-state", "closed"), ae = () => _("after-enter"), oe = () => {
-			T.value || (N.value = !1), _("after-leave");
-		}, K = (e) => e instanceof Node && !!P.value?.contains(e), q = (e) => {
-			let t = P.value;
+		}), se = (e) => e.setAttribute("data-sbf-state", "closed"), W = () => g("after-enter"), G = () => {
+			x.value || (j.value = !1), g("after-leave");
+		}, K = (e) => e instanceof Node && !!M.value?.contains(e), q = (e) => {
+			let t = M.value;
 			if (!t) return;
-			let n = W(t);
+			let n = z(t);
 			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
+		}, J = (e) => {
+			K(e.relatedTarget) ? b.reference.value?.focus() : q("first");
 		}, Y = (e) => {
-			K(e.relatedTarget) ? S.reference.value?.focus() : q("first");
-		}, de = (e) => {
 			if (!K(e.relatedTarget)) {
 				q("last");
 				return;
 			}
-			let t = S.reference.value;
-			((t && G(t, (e) => S.contains(e))) ?? t)?.focus();
-		}, Z = () => {
-			let e = S.navigation.value;
-			return P.value && e ? le(P.value, e) : [];
-		}, fe = {
+			let t = b.reference.value;
+			((t && B(t, (e) => b.contains(e))) ?? t)?.focus();
+		}, X = (e) => {
+			if (e.key !== "Tab" || !e.shiftKey || e.defaultPrevented) return;
+			let t = b.reference.value;
+			t && M.value && z(M.value).length && (e.composedPath()[0] ?? e.target) === B(t, (e) => b.contains(e)) && (e.preventDefault(), q("last"));
+		};
+		E(L, (e, t, n) => {
+			e && typeof document < "u" && (document.addEventListener("keydown", X), n(() => document.removeEventListener("keydown", X)));
+		}, { immediate: !0 });
+		let Z = () => {
+			let e = b.navigation.value;
+			return M.value && e ? fe(M.value, e) : [];
+		}, me = {
+			menu: "[role=\"menuitem\"]",
+			listbox: "[role=\"option\"]"
+		}, ge = {
 			menu: "role=\"menuitem\", \"menuitemcheckbox\" or \"menuitemradio\"",
 			listbox: "role=\"option\""
-		}, pe = !1, me = (e) => {
-			let t = S.navigation.value;
-			if (pe || !t) return;
-			let n = e.length ? e.every(se) ? null : "has items that cannot take focus, so the arrow keys cannot move to them: make each one a button, or give it tabindex=\"-1\"." : `has no items the arrow keys can move to: items need ${fe[t]} and must not be disabled.`;
-			n && (pe = !0, L(`<SbFloating role="${t}"> ${n}`));
-		}, he = (e) => {
-			let t = P.value;
+		}, _e = !1, ve = (e) => {
+			let t = b.navigation.value;
+			if (_e || !t) return;
+			let n = e.length ? e.every(oe) ? null : "has items that cannot take focus, so the arrow keys cannot move to them: make each one a button, or give it tabindex=\"-1\"." : `has no items the arrow keys can move to: items need ${ge[t]} and must not be disabled.`;
+			n && (_e = !0, V(`<SbFloating role="${t}"> ${n}`));
+		}, ye = (e) => {
+			let t = M.value;
 			if (!t) return;
 			let n = Z();
-			e && me(n), (n.find((e) => e.getAttribute("aria-selected") === "true") ?? (e === "last" ? n[n.length - 1] : e ? n[0] : void 0) ?? t.querySelector("[autofocus]") ?? n[0] ?? W(t)[0] ?? t).focus({ preventScroll: !0 });
-		}, ge = () => {
-			let e = S.focusRequest.value;
-			return S.focusRequest.value = null, e;
-		}, Q = "", $;
-		h(() => clearTimeout($));
-		let _e = (e, t, n) => {
-			Q += n.toLowerCase(), clearTimeout($), $ = setTimeout(() => Q = "", 500);
-			let r = [...Q].every((e) => e === Q[0]) ? Q[0] : Q, i = Math.max(t, 0), a = [...e.slice(i), ...e.slice(0, i)];
+			e && ve(n), (n.find((e) => e.getAttribute("aria-selected") === "true") ?? (e === "last" ? n[n.length - 1] : e ? n[0] : void 0) ?? t.querySelector("[autofocus]") ?? n[0] ?? z(t)[0] ?? t).focus({ preventScroll: !0 });
+		}, be = () => {
+			let e = b.focusRequest.value;
+			return b.focusRequest.value = null, e;
+		}, $ = "", xe;
+		m(() => clearTimeout(xe));
+		let Se = (e, t, n) => {
+			$ += n.toLowerCase(), clearTimeout(xe), xe = setTimeout(() => $ = "", 500);
+			let r = [...$].every((e) => e === $[0]) ? $[0] : $, i = Math.max(t, 0), a = [...e.slice(i), ...e.slice(0, i)];
 			return r.length === 1 && t >= 0 && a.push(a.shift()), a.find((e) => e.textContent?.trim().toLowerCase().startsWith(r));
-		}, ve = (e) => {
-			let t = S, n = [t];
-			for (; t.parent?.navigation.value === "menu";) t = t.parent, n.push(t);
-			let r = t.reference.value, i = e ? r : (r && G(r, (e) => t.contains(e))) ?? r;
-			for (let e of n) e.skipFocusReturn = !0, e.close();
-			i?.focus();
-		}, ye = (e) => {
-			let t = S.navigation.value;
-			if (!t || e.defaultPrevented || e.isComposing || X(e.target)) return;
+		}, Ce = () => {
+			let e = [b];
+			for (; H(e[e.length - 1]);) e.push(e[e.length - 1].parent);
+			return e;
+		}, we = (e, t, n) => {
+			for (let t of e) t.skipFocusReturn = !0, t.setOpen(!1, n);
+			t?.focus({ preventScroll: !0 });
+		}, Te = (e) => {
+			let t = Ce(), n = t[t.length - 1], r = n.reference.value, i = e ? r : (r && B(r, (e) => n.contains(e))) ?? r;
+			we(t, i, "focus-out");
+		}, Ee = (e) => {
+			let { role: t } = l, n = M.value;
+			if (!l.closeOnSelect || e.defaultPrevented || !n || !de(t)) return;
+			let r = e.target.closest(me[t]);
+			if (!r || r.closest(`[role="${t}"]`) !== n || r.matches(he) || t === "listbox" && n.getAttribute("aria-multiselectable") === "true") return;
+			let i = t === "menu" ? Ce() : [b];
+			we(i, i[i.length - 1].reference.value, "select");
+		}, De = (e) => {
+			let t = b.navigation.value;
+			if (!t || e.defaultPrevented || e.isComposing || Q(e.target)) return;
 			let n = Z(), r = n.findIndex((t) => t.contains(e.target)), i = n.length - 1, a = t === "menu", o;
 			if ([
 				"ArrowDown",
 				"ArrowUp",
 				"Home",
 				"End"
-			].includes(e.key) && me(n), e.key === "ArrowDown") o = n[r < i ? r + 1 : a ? 0 : i];
+			].includes(e.key) && ve(n), e.key === "ArrowDown") o = n[r < i ? r + 1 : a ? 0 : i];
 			else if (e.key === "ArrowUp") o = n[r > 0 ? r - 1 : a || r < 0 ? i : 0];
 			else if (e.key === "Home") o = n[0];
 			else if (e.key === "End") o = n[i];
 			else if (e.key === "Tab" && t === "menu") {
-				e.preventDefault(), ve(e.shiftKey);
+				e.preventDefault(), Te(e.shiftKey);
 				return;
-			} else if (t === "menu" && S.parent?.navigation.value === "menu" && P.value && e.key === ue(P.value).close) {
-				e.preventDefault(), S.close();
+			} else if (t === "menu" && H(b) && M.value && e.key === pe(M.value).close) {
+				e.preventDefault(), b.setOpen(!1, "escape");
 				return;
-			} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key !== " " || Q)) e.preventDefault(), o = _e(n, r, e.key);
+			} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key !== " " || $)) e.preventDefault(), o = Se(n, r, e.key);
 			else if ((e.key === "Enter" || e.key === " ") && e.target === n[r]) {
 				let t = n[r];
 				if (t.matches("button, a[href], input, summary")) return;
@@ -487,48 +532,49 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			}
 			o && (e.preventDefault(), o.focus());
 		};
-		return D(T, (e) => {
-			let t = S.skipFocusReturn;
-			if (S.skipFocusReturn = !1, e) {
-				N.value = !0;
+		return E(x, (e) => {
+			let t = b.skipFocusReturn;
+			if (b.skipFocusReturn = !1, e) {
+				j.value = !0;
 				return;
 			}
 			let n = document.activeElement;
-			!t && n && S.floating.value?.contains(n) && S.reference.value?.focus({ preventScroll: !0 });
-		}), D(() => T.value && S.isPositioned.value, async (e) => {
+			!t && n && b.floating.value?.contains(n) && b.reference.value?.focus({ preventScroll: !0 });
+		}), E(() => x.value && b.isPositioned.value, async (e) => {
 			if (!e) return;
-			let t = ge();
-			(t || R.value) && (await d(), he(t));
-		}), D(S.focusRequest, (e) => {
-			e && T.value && S.isPositioned.value && he(ge());
-		}), (n, s) => (g(), r(e, {
+			let t = be();
+			(t || I.value) && (await ee(), ye(t));
+		}), E(b.focusRequest, (e) => {
+			e && x.value && b.isPositioned.value && ye(be());
+		}), (n, s) => (h(), r(e, {
 			to: l.teleport || "body",
 			disabled: l.teleport === !1
-		}, [N.value ? (g(), a("div", {
+		}, [j.value ? (h(), a("div", {
 			key: 0,
-			ref: F,
-			style: f(te.value),
-			onPointerenter: s[0] ||= (...e) => C(S).hover && C(S).hover(...e),
-			onPointerleave: s[1] ||= (...e) => C(S).hover && C(S).hover(...e)
+			ref: N,
+			style: d(F.value),
+			onPointerenter: s[0] ||= (...e) => S(b).hover && S(b).hover(...e),
+			onPointerleave: s[1] ||= (...e) => S(b).hover && S(b).hover(...e)
 		}, [
-			B.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: Y }), null, 16)) : i("", !0),
-			o(t, u(re.value, {
+			L.value ? (h(), a("span", u({ key: 0 }, R, { onFocus: J }), null, 16)) : i("", !0),
+			o(t, u(ae.value, {
 				appear: "",
-				onBeforeLeave: H,
-				onAfterEnter: ae,
-				onAfterLeave: oe
+				onBeforeLeave: se,
+				onAfterEnter: W,
+				onAfterLeave: G
 			}), {
-				default: k(() => [C(T) ? (g(), r(b(l.as), u({ key: 0 }, I(), {
-					id: C(E),
-					ref: ee,
+				default: O(() => [S(x) ? (h(), r(y(l.as), u({ key: 0 }, ne(), {
+					id: S(w),
+					ref: P,
 					role: l.role ?? void 0,
-					tabindex: R.value ? -1 : void 0,
+					tabindex: I.value ? -1 : void 0,
 					"data-sbf-state": "open",
-					"data-sbf-side": C(j),
-					"data-sbf-align": C(M),
-					onKeydown: ye
+					"data-sbf-side": S(k),
+					"data-sbf-align": S(A),
+					onKeydown: De,
+					onClick: Ee
 				}), {
-					default: k(() => [y(n.$slots, "default")]),
+					default: O(() => [te(n.$slots, "default")]),
 					_: 3
 				}, 16, [
 					"id",
@@ -539,9 +585,22 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			B.value ? (g(), a("span", u({ key: 1 }, V, { onFocus: de }), null, 16)) : i("", !0)
+			L.value ? (h(), a("span", u({ key: 1 }, R, { onFocus: Y }), null, 16)) : i("", !0)
 		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { q as SbContainer, Z as SbFloating, de as SbReference };
+//#region src/composables/useSbFloating.ts
+function _e() {
+	let e = c(W, null);
+	if (!e) throw Error("[sb-floating-panel-vue] useSbFloating() must be called in a component inside <SbContainer>.");
+	let { isOpen: t, open: n, close: r, toggle: i } = e;
+	return {
+		isOpen: _(t),
+		open: n,
+		close: r,
+		toggle: i
+	};
+}
+//#endregion
+export { X as SbContainer, ge as SbFloating, me as SbReference, _e as useSbFloating };