sb-floating-panel-vue 5.1.0 → 5.2.1

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

@@ -1,110 +1,125 @@
-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 _, readonly as v, ref as y, renderSlot as b, resolveDynamicComponent as x, toRef as S, toValue as C, unref as w, useAttrs as T, useId as E, useModel as D, watch as O, watchEffect as k, withCtx as A } from "vue";
-import { autoUpdate as j, flip as M, hide as N, limitShift as P, offset as F, shift as ee, size as te, useFloating as I } 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 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, 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 I } from "@floating-ui/vue";
+//#region src/utils/dom.ts
+var L = "data-sbf-focus-guard", R = [
+	"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(","), ee = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function te(e) {
+	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
+	return t instanceof HTMLElement ? t : null;
+}
+function z(e) {
+	let t = e instanceof Element ? e.closest(R) : null;
+	return !!t && !t.closest("[inert]");
+}
+function B(e) {
+	try {
+		return e.matches(":focus-visible");
+	} catch {
+		return !0;
+	}
+}
+var ne = (e) => e.matches(R) && !e.closest("[inert]");
+function V(e) {
+	return [...e.querySelectorAll(R)].filter(ee);
+}
+function H(e, t) {
+	return V(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+}
+//#endregion
 //#region src/utils/warn.ts
-var L = (() => {
+var U = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 })();
-function R(e) {
-	L && console.warn(`[sb-floating-panel-vue] ${e}`);
+function W(e) {
+	U && console.warn(`[sb-floating-panel-vue] ${e}`);
 }
 //#endregion
 //#region src/composables/useSbFloatingContext.ts
-var z = Symbol("SbFloatingContext");
-function B(e, t, n) {
-	return ++e.parts[t] > 1 && R(`<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 G = (e) => e.parent?.navigation.value === "menu";
+function K(e, t) {
+	let n = document.activeElement, r = e.reference.value;
+	return !n || !r || r.contains(n) || !e.contains(n) ? !1 : ((t ? r : H(r, (t) => e.contains(t)))?.focus({ preventScroll: !0 }), !0);
 }
-function ne(e) {
-	let t = c(z, null);
+var q = Symbol("SbFloatingContext");
+function re(e, t, n) {
+	return ++e.parts[t] > 1 && W(`<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 ie(e) {
+	let t = c(q, null);
 	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
 	return t;
 }
 //#endregion
 //#region src/composables/useSbFloatingPanel.ts
-var V = (e) => `${Math.max(0, e)}px`, re = (e, t) => {
+var J = (e) => `${Math.max(0, e)}px`, ae = (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 ie(e) {
-	let t = y(null), r = y(null), i = n(() => {
-		let t = C(e.padding), n = C(e.matchWidth), r = C(e.placement).includes("-"), i = M({
+function oe(e, t) {
+	let r = v(null), i = v(null), a = n(() => {
+		let { padding: t, matchWidth: n } = e, r = e.placement.includes("-"), i = A({
 			padding: t,
 			crossAxis: "alignment",
 			fallbackAxisSideDirection: "end"
-		}), a = ee({
+		}), a = P({
 			padding: t,
-			limiter: P()
+			limiter: M()
 		}), o = [
-			F(C(e.offset)),
+			N(e.offset),
 			...r ? [i, a] : [a, i],
-			te({
+			F({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = V(e.reference.width);
+					let { style: o } = t.floating, s = J(e.reference.width);
 					o.setProperty("--sbf-reference-width", s);
 					let c = getComputedStyle(t.floating).direction === "rtl";
-					o.setProperty("--sbf-transform-origin", re(a, c)), o.setProperty("--sbf-available-width", V(r)), o.setProperty("--sbf-available-height", V(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
+					o.setProperty("--sbf-transform-origin", ae(a, c)), o.setProperty("--sbf-available-width", J(r)), o.setProperty("--sbf-available-height", J(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
 				}
 			})
 		];
-		return C(e.hideWhenDetached) && o.push(N({ padding: t })), o;
-	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = I(t, r, {
-		open: () => C(e.isOpen),
-		placement: () => C(e.placement),
-		strategy: () => C(e.strategy),
-		middleware: i,
-		whileElementsMounted: j
-	}), u = n(() => !!o.value.hide?.referenceHidden);
+		return e.hideWhenDetached && o.push(j({ padding: t })), o;
+	}), { floatingStyles: o, middlewareData: s, placement: c, isPositioned: l, update: u } = I(r, i, {
+		open: t,
+		placement: () => e.placement,
+		strategy: () => e.strategy,
+		middleware: a,
+		whileElementsMounted: k
+	}), d = n(() => !!s.value.hide?.referenceHidden);
 	return {
-		reference: t,
-		floating: r,
+		reference: r,
+		floating: i,
 		floatingStyles: n(() => ({
-			...a.value,
-			...u.value ? { visibility: "hidden" } : {}
+			...o.value,
+			...d.value ? { visibility: "hidden" } : {}
 		})),
-		placement: s,
-		side: n(() => s.value.split("-")[0]),
-		align: n(() => s.value.split("-")[1]),
-		isPositioned: c,
-		referenceHidden: u,
-		update: l
+		placement: c,
+		side: n(() => c.value.split("-")[0]),
+		align: n(() => c.value.split("-")[1]),
+		isPositioned: l,
+		referenceHidden: d,
+		update: u
 	};
 }
 //#endregion
-//#region src/utils/dom.ts
-var ae = "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(","), oe = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
-function se(e) {
-	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
-	return t instanceof HTMLElement ? t : null;
-}
-function U(e) {
-	let t = e instanceof Element ? e.closest(H) : null;
-	return !!t && !t.closest("[inert]");
-}
-var ce = (e) => e.matches(H) && !e.closest("[inert]");
-function W(e) {
-	return [...e.querySelectorAll(H)].filter(oe);
-}
-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 = [], le = /* @__PURE__ */ s({
+var Y = [], X = {
+	open: 300,
+	close: 150
+}, se = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -129,10 +144,7 @@ var K = [], le = /* @__PURE__ */ s({
 			default: !1
 		},
 		trigger: { default: "click" },
-		delay: { default: () => ({
-			open: 300,
-			close: 150
-		}) },
+		delay: { default: () => ({ ...X }) },
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -154,194 +166,196 @@ var K = [], le = /* @__PURE__ */ s({
 	}),
 	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = D(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u;
+		let i = e, a = T(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), v = (e) => {
-			if (e.pointerType === "touch" || (T?.hover(e), i.trigger !== "hover")) return;
-			let t = e.type === "pointerenter" || k.contains(e.relatedTarget);
+		let f, m = ((e, t) => {
+			clearTimeout(u), !(e && i.disabled) && e !== l.value && (f = t, a.value = e, d(() => f = void 0));
+		}), g = () => m(!0, "api"), b = () => m(!1, "api"), C = () => m(!l.value, "api"), D = (e) => {
+			if (e.pointerType === "touch" || (A?.hover(e), i.trigger !== "hover")) return;
+			let t = e.type === "pointerenter" || j.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);
-		}, x = ie({
-			isOpen: l,
-			placement: () => i.placement,
-			strategy: () => i.strategy,
-			offset: () => i.offset,
-			padding: () => i.padding,
-			matchWidth: () => i.matchWidth,
-			hideWhenDetached: () => i.hideWhenDetached
-		}), C = /* @__PURE__ */ new Set(), T = c(z, null), k = {
-			...x,
+			let { delay: n } = i, r = t ? "open" : "close", a = typeof n == "number" ? n : n[r] ?? X[r];
+			u = setTimeout(() => m(t, "hover"), a);
+		}, O = oe(i, l), k = /* @__PURE__ */ new Set(), A = c(q, null), j = {
+			...O,
 			isOpen: l,
-			disabled: S(i, "disabled"),
-			trigger: S(i, "trigger"),
-			floatingId: `${E()}-floating`,
-			referenceId: y(),
-			floatingRole: y("dialog"),
-			navigation: y(null),
-			focusRequest: y(null),
-			parent: T,
+			disabled: x(i, "disabled"),
+			trigger: x(i, "trigger"),
+			floatingId: `${w()}-floating`,
+			referenceId: v(),
+			floatingRole: v("dialog"),
+			navigation: v(null),
+			focusRequest: v(null),
+			parent: A,
 			skipFocusReturn: !1,
 			parts: {
 				reference: 0,
 				floating: 0
 			},
 			isUnmounting: !1,
-			open: f,
-			close: m,
-			toggle: g,
-			hover: v,
-			contains: (e) => e instanceof Node ? x.reference.value?.contains(e) || x.floating.value?.contains(e) ? !0 : [...C].some((t) => t.contains(e)) : !1,
-			registerChild: (e) => (C.add(e), () => C.delete(e))
+			open: g,
+			close: b,
+			toggle: C,
+			setOpen: m,
+			hover: D,
+			contains: (e) => e instanceof Node ? O.reference.value?.contains(e) || O.floating.value?.contains(e) ? !0 : [...k].some((t) => t.contains(e)) : !1,
+			registerChild: (e) => (k.add(e), () => k.delete(e))
 		};
-		T && h(T.registerChild(k)), _(z, k), p(() => k.isUnmounting = !0);
-		let A = (e) => {
-			let t = e.composedPath()[0] ?? e.target;
-			return K.findLast((e) => e.contains(t)) ?? K[K.length - 1];
-		}, j = (e) => {
-			e.key === "Escape" && A(e) === k && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), m()));
-		}, M = (e) => {
-			k.contains(e) || (k.skipFocusReturn = U(e), m());
-		}, N, P = (e) => {
-			if (N?.(), !i.closeOnClickOutside) return;
+		A && h(A.registerChild(j)), _(q, j), p(() => {
+			j.isUnmounting = !0, K(j, !1);
+		});
+		let M = (e) => {
+			let t = e.composedPath()[0] ?? e.target, n = Y.filter((e) => e.closeOnEscape());
+			return (n.findLast((e) => e.context.contains(t)) ?? n[n.length - 1])?.context;
+		}, N = (e) => {
+			e.key === "Escape" && M(e) === j && (e.defaultPrevented || e.isComposing || (e.preventDefault(), m(!1, "escape")));
+		}, P = (e) => {
+			j.contains(e) || (j.skipFocusReturn = z(e), m(!1, "outside"));
+		}, F, I = (e) => {
+			if (F?.(), !i.closeOnClickOutside) return;
 			let t = e.composedPath()[0] ?? e.target;
 			if (e.pointerType !== "touch") {
-				M(t);
+				P(t);
 				return;
 			}
-			if (k.contains(t)) return;
+			if (j.contains(t)) return;
 			let n = (e) => {
-				N?.(), M(e.composedPath()[0] ?? e.target);
+				F?.(), P(e.composedPath()[0] ?? e.target);
 			};
-			document.addEventListener("click", n, !0), N = () => {
-				document.removeEventListener("click", n, !0), N = void 0;
+			document.addEventListener("click", n, !0), F = () => {
+				document.removeEventListener("click", n, !0), F = void 0;
 			};
-		}, F = (e) => {
-			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
+		}, L = (e) => {
+			i.closeOnFocusOut && (j.contains(e.composedPath()[0] ?? e.target) || m(!1, "focus-out"));
 		};
-		return O(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);
-			}));
-		}, { immediate: !0 }), O(l, (e) => o(e ? "open" : "close")), O(x.referenceHidden, (e) => {
-			e && i.hideWhenDetached === "close" && m();
-		}), O(() => i.disabled, (e) => {
+		return E(l, (e, t, n) => {
+			if (!e || typeof document > "u") return;
+			let r = {
+				context: j,
+				closeOnEscape: () => i.closeOnEscape
+			};
+			Y.push(r), document.addEventListener("keydown", N), document.addEventListener("pointerdown", I, !0), document.addEventListener("focusin", L), n(() => {
+				document.removeEventListener("keydown", N), document.removeEventListener("pointerdown", I, !0), document.removeEventListener("focusin", L), F?.(), Y.splice(Y.indexOf(r), 1);
+			});
+		}, { immediate: !0 }), E(l, (e) => {
+			let t = f ?? (!e && i.disabled ? "disabled" : "api");
+			f = void 0, o(e ? "open" : "close", t);
+		}), E(O.referenceHidden, (e) => {
+			e && i.hideWhenDetached === "close" && m(!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: x.update
-		}), (e, t) => b(e.$slots, "default", {
+			open: g,
+			close: b,
+			toggle: C,
+			update: O.update
+		}), (e, t) => y(e.$slots, "default", {
 			isOpen: l.value,
-			open: f,
-			close: m,
-			toggle: g,
-			placement: w(x).placement.value,
-			side: w(x).side.value,
-			align: w(x).align.value,
-			floatingId: k.floatingId,
-			referenceId: k.referenceId.value
+			open: g,
+			close: b,
+			toggle: C,
+			placement: S(O).placement.value,
+			side: S(O).side.value,
+			align: S(O).align.value,
+			floatingId: j.floatingId,
+			referenceId: j.referenceId.value
 		});
 	}
-}), q = {
+}), Z = {
 	dialog: "dialog",
 	alertdialog: "dialog",
 	menu: "menu",
 	listbox: "listbox",
 	tree: "tree",
 	grid: "grid"
-}, J = {
+}, ce = {
 	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
 	listbox: "[role=\"option\"]"
-}, ue = (e) => !!e && Object.hasOwn(J, e);
-function de(e, t) {
-	return [...e.querySelectorAll(J[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
+}, le = (e) => !!e && Object.hasOwn(ce, e);
+function ue(e, t) {
+	return [...e.querySelectorAll(ce[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
 }
-var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), fe = (e) => getComputedStyle(e).direction === "rtl" ? {
+var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), de = (e) => getComputedStyle(e).direction === "rtl" ? {
 	open: "ArrowLeft",
 	close: "ArrowRight"
 } : {
 	open: "ArrowRight",
 	close: "ArrowLeft"
-}, X = /* @__PURE__ */ s({
+}, fe = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
-		id: { default: void 0 },
-		ariaHaspopup: { default: void 0 }
+		id: {},
+		ariaHaspopup: {}
 	},
 	setup(e) {
-		let t = e, i = T(), a = ne("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = B(a, "reference", "SbReference"), d = [
+		let t = e, i = C(), a = ie("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = re(a, "reference", "SbReference"), d = [
 			"button",
 			"input",
 			"textarea",
 			"select"
-		], f = () => typeof t.as != "string" || d.includes(t.as) || t.as === "a" && i.href != null, h = `${E()}-reference`, _ = n(() => t.id ?? h);
-		k(() => {
+		], f = () => typeof t.as != "string" || d.includes(t.as) || t.as === "a" && i.href != null, h = `${w()}-reference`, _ = n(() => t.id ?? h);
+		D(() => {
 			a.referenceId.value = _.value;
 		}), m(() => {
 			let e = a.reference.value;
-			e ? Y(e) && a.navigation.value && R(`<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.`) : R("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
+			e ? Q(e) && a.navigation.value && W(`<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.`) : W("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
 		}), p(() => {
-			a.referenceId.value === _.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && a.close();
+			a.referenceId.value === _.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && (a.skipFocusReturn = K(a, !1), a.setOpen(!1, "api"));
 		});
-		let v = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(q, l.value) ? q[l.value] : void 0)), y = (e) => {
-			a.reference.value = se(e);
-		}, S = () => {
-			a.trigger.value === "click" && (Y(a.reference.value) ? a.open() : a.toggle());
-		}, C = n(() => l.value === "tooltip"), D = () => a.trigger.value === "hover" || a.trigger.value === "focus", O = () => a.parent?.navigation.value === "menu", j = (e) => {
-			D() && !O() && !a.contains(e.relatedTarget) && a.open();
+		let v = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(Z, l.value) ? Z[l.value] : void 0)), x = (e) => {
+			a.reference.value = te(e);
+		}, T = (e) => {
+			s.value && a.reference.value instanceof HTMLAnchorElement && e?.preventDefault(), a.trigger.value === "click" && (Q(a.reference.value) ? a.setOpen(!0, "trigger") : a.setOpen(!o.value, "trigger"));
+		}, E = n(() => l.value === "tooltip"), k = () => a.trigger.value === "hover" || a.trigger.value === "focus", A = (e) => {
+			if (!k() || G(a) || a.contains(e.relatedTarget)) return;
+			let t = e.target;
+			(a.trigger.value === "focus" || B(t)) && a.setOpen(!0, "focus");
+		}, j = (e) => {
+			k() && !a.contains(e.relatedTarget) && a.setOpen(!1, "focus-out");
 		}, M = (e) => {
-			D() && !a.contains(e.relatedTarget) && a.close();
-		}, N = (e) => {
-			let t = a.floating.value, n = t && W(t)[0];
+			let t = a.floating.value, n = t && V(t)[0];
 			n && (e.preventDefault(), n.focus());
-		}, P = (e) => {
+		}, N = (e) => {
 			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
-				if (O()) {
+				if (G(a)) {
 					let t = e.currentTarget;
-					return e.key === fe(t).open ? "first" : void 0;
+					return e.key === de(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 && !O()) {
-				N(e);
+		}, P = (e) => {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !G(a)) {
+				M(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 = N(e);
+			t ? (e.preventDefault(), a.focusRequest.value = t, a.setOpen(!0, "trigger")) : f() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), T());
 		};
-		return (e, n) => (g(), r(x(t.as), {
+		return (e, n) => (g(), r(b(t.as), {
 			id: _.value,
-			ref: y,
+			ref: x,
 			type: t.as === "button" ? "button" : void 0,
 			role: f() ? void 0 : "button",
-			tabindex: f() ? void 0 : w(s) ? -1 : 0,
-			disabled: t.as === "button" && w(s) ? !0 : void 0,
-			"aria-disabled": t.as !== "button" && w(s) ? "true" : void 0,
+			tabindex: f() ? 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": v.value,
-			"aria-expanded": C.value ? void 0 : w(o) ? "true" : "false",
-			"aria-controls": w(o) && !C.value ? w(c) : void 0,
-			"aria-describedby": w(o) && C.value ? w(c) : void 0,
-			"data-sbf-state": w(o) ? "open" : "closed",
-			onClick: S,
-			onKeydown: F,
-			onFocusin: j,
-			onFocusout: M,
-			onPointerenter: w(a).hover,
-			onPointerleave: w(a).hover
+			"aria-expanded": E.value ? void 0 : S(o) ? "true" : "false",
+			"aria-controls": S(o) && !E.value ? S(c) : void 0,
+			"aria-describedby": S(o) && E.value ? S(c) : void 0,
+			"data-sbf-state": S(o) ? "open" : "closed",
+			onClick: T,
+			onKeydown: P,
+			onFocusin: A,
+			onFocusout: j,
+			onPointerenter: S(a).hover,
+			onPointerleave: S(a).hover
 		}, {
-			default: A(() => [b(e.$slots, "default")]),
+			default: O(() => [y(e.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"id",
@@ -365,12 +379,12 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 	props: {
 		as: { default: "div" },
 		role: { default: "dialog" },
-		transition: { default: void 0 },
+		transition: {},
 		teleport: {
 			type: [String, Boolean],
 			default: "body"
 		},
-		zIndex: { default: void 0 },
+		zIndex: {},
 		autoFocus: {
 			type: Boolean,
 			default: void 0
@@ -386,26 +400,28 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, _ = c, v = T(), S = ne("SbFloating");
-		p(B(S, "floating", "SbFloating"));
-		let { isOpen: C, floatingId: E, referenceId: D, side: j, align: M } = S;
-		k(() => {
-			S.floatingRole.value = l.role, S.navigation.value = l.keyboardNavigation && ue(l.role) ? l.role : null;
+		let l = s, _ = c, x = C(), w = ie("SbFloating");
+		p(re(w, "floating", "SbFloating")), p(() => {
+			w.isUnmounting || K(w, !0);
+		});
+		let { isOpen: T, floatingId: k, referenceId: A, side: j, align: M } = w;
+		D(() => {
+			w.floatingRole.value = l.role, w.navigation.value = l.keyboardNavigation && le(l.role) ? l.role : null;
 		}), m(() => {
-			l.role === "tooltip" && S.trigger.value === "click" && R("<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.");
+			l.role === "tooltip" && w.trigger.value === "click" && W("<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 = y(C.value), P = y(null), F = (e) => {
-			S.floating.value = e instanceof HTMLElement ? e : null;
-		}, ee = (e) => {
-			P.value = se(e);
-		}, te = n(() => ({
-			...S.floatingStyles.value,
+		let N = v(T.value), P = v(null), F = (e) => {
+			w.floating.value = e instanceof HTMLElement ? e : null;
+		}, I = (e) => {
+			P.value = te(e);
+		}, R = n(() => ({
+			...w.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
-		})), I = () => ({
-			"aria-labelledby": l.role && Object.hasOwn(q, l.role) && v["aria-label"] == null ? D.value : void 0,
-			...v
-		}), L = n(() => l.autoFocus ?? (l.role !== "tooltip" && S.trigger.value !== "hover" && S.trigger.value !== "focus" && !Y(S.reference.value))), z = n(() => C.value && l.teleport !== !1 && l.role !== "tooltip"), V = {
-			[ae]: "",
+		})), ee = () => ({
+			"aria-labelledby": l.role && Object.hasOwn(Z, l.role) && x["aria-label"] == null ? A.value : void 0,
+			...x
+		}), z = n(() => l.autoFocus ?? (l.role !== "tooltip" && w.trigger.value !== "hover" && w.trigger.value !== "focus" && !Q(w.reference.value))), B = n(() => T.value && l.teleport !== !1 && l.role !== "tooltip"), U = {
+			[L]: "",
 			tabindex: 0,
 			style: {
 				position: "fixed",
@@ -413,90 +429,95 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				outline: "none",
 				pointerEvents: "none"
 			}
-		}, re = n(() => {
+		}, q = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), ie = (e) => e.setAttribute("data-sbf-state", "closed"), H = () => _("after-enter"), oe = () => {
-			C.value || (N.value = !1), _("after-leave");
-		}, U = (e) => e instanceof Node && !!P.value?.contains(e), K = (e) => {
+		}), J = (e) => e.setAttribute("data-sbf-state", "closed"), ae = () => _("after-enter"), oe = () => {
+			T.value || (N.value = !1), _("after-leave");
+		}, Y = (e) => e instanceof Node && !!P.value?.contains(e), X = (e) => {
 			let t = P.value;
 			if (!t) return;
-			let n = W(t);
+			let n = V(t);
 			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
-		}, le = (e) => {
-			U(e.relatedTarget) ? S.reference.value?.focus() : K("first");
-		}, J = (e) => {
-			if (!U(e.relatedTarget)) {
-				K("last");
+		}, se = (e) => {
+			Y(e.relatedTarget) ? w.reference.value?.focus() : X("first");
+		}, fe = (e) => {
+			if (!Y(e.relatedTarget)) {
+				X("last");
 				return;
 			}
-			let t = S.reference.value;
-			((t && G(t, (e) => S.contains(e))) ?? t)?.focus();
-		}, X = () => {
-			let e = S.navigation.value;
-			return P.value && e ? de(P.value, e) : [];
-		}, me = {
+			let t = w.reference.value;
+			((t && H(t, (e) => w.contains(e))) ?? t)?.focus();
+		}, me = (e) => {
+			if (e.key !== "Tab" || !e.shiftKey || e.defaultPrevented) return;
+			let t = w.reference.value;
+			t && P.value && V(P.value).length && (e.composedPath()[0] ?? e.target) === H(t, (e) => w.contains(e)) && (e.preventDefault(), X("last"));
+		};
+		E(B, (e, t, n) => {
+			e && typeof document < "u" && (document.addEventListener("keydown", me), n(() => document.removeEventListener("keydown", me)));
+		}, { immediate: !0 });
+		let he = () => {
+			let e = w.navigation.value;
+			return P.value && e ? ue(P.value, e) : [];
+		}, ge = {
 			menu: "[role=\"menuitem\"]",
 			listbox: "[role=\"option\"]"
-		}, he = {
-			menu: "role=\"menuitem\", \"menuitemcheckbox\" or \"menuitemradio\"",
-			listbox: "role=\"option\""
-		}, ge = !1, _e = (e) => {
-			let t = S.navigation.value;
-			if (ge || !t) return;
-			let n = e.length ? e.every(ce) ? 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 ${he[t]} and must not be disabled.`;
-			n && (ge = !0, R(`<SbFloating role="${t}"> ${n}`));
-		}, ve = (e) => {
+		}, _e = !1, ve = (e) => {
+			let t = w.navigation.value;
+			if (_e || !t) return;
+			let n = e.length ? e.every(ne) ? 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 ${ce[t]} and must not be disabled.`;
+			n && (_e = !0, W(`<SbFloating role="${t}"> ${n}`));
+		}, ye = (e) => {
 			let t = P.value;
 			if (!t) return;
-			let n = X();
-			e && _e(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 });
-		}, Z = () => {
-			let e = S.focusRequest.value;
-			return S.focusRequest.value = null, e;
-		}, Q = "", $;
-		h(() => clearTimeout($));
-		let ye = (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)];
-			return r.length === 1 && t >= 0 && a.push(a.shift()), a.find((e) => e.textContent?.trim().toLowerCase().startsWith(r));
+			let n = he();
+			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] ?? V(t)[0] ?? t).focus({ preventScroll: !0 });
 		}, be = () => {
-			let e = [S];
-			for (; e[e.length - 1].parent?.navigation.value === "menu";) e.push(e[e.length - 1].parent);
+			let e = w.focusRequest.value;
+			return w.focusRequest.value = null, e;
+		}, $ = "", xe;
+		h(() => 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));
+		}, Ce = () => {
+			let e = [w];
+			for (; G(e[e.length - 1]);) e.push(e[e.length - 1].parent);
 			return e;
-		}, xe = (e, t) => {
-			for (let t of e) t.skipFocusReturn = !0, t.close();
+		}, we = (e, t, n) => {
+			for (let t of e) t.skipFocusReturn = !0, t.setOpen(!1, n);
 			t?.focus({ preventScroll: !0 });
-		}, Se = (e) => {
-			let t = be(), n = t[t.length - 1], r = n.reference.value, i = e ? r : (r && G(r, (e) => n.contains(e))) ?? r;
-			xe(t, i);
-		}, Ce = (e) => {
+		}, Te = (e) => {
+			let t = Ce(), n = t[t.length - 1], r = n.reference.value, i = e ? r : (r && H(r, (e) => n.contains(e))) ?? r;
+			we(t, i, "focus-out");
+		}, Ee = (e) => {
 			let { role: t } = l, n = P.value;
-			if (!l.closeOnSelect || e.defaultPrevented || !n || !ue(t)) return;
-			let r = e.target.closest(me[t]);
+			if (!l.closeOnSelect || e.defaultPrevented || !n || !le(t)) return;
+			let r = e.target.closest(ge[t]);
 			if (!r || r.closest(`[role="${t}"]`) !== n || r.matches(pe) || t === "listbox" && n.getAttribute("aria-multiselectable") === "true") return;
-			let i = t === "menu" ? be() : [S];
-			xe(i, i[i.length - 1].reference.value);
-		}, we = (e) => {
-			let t = S.navigation.value;
-			if (!t || e.defaultPrevented || e.isComposing || Y(e.target)) return;
-			let n = X(), r = n.findIndex((t) => t.contains(e.target)), i = n.length - 1, a = t === "menu", o;
+			let i = t === "menu" ? Ce() : [w];
+			we(i, i[i.length - 1].reference.value, "select");
+		}, De = (e) => {
+			let t = w.navigation.value;
+			if (!t || e.defaultPrevented || e.isComposing || Q(e.target)) return;
+			let n = he(), r = n.findIndex((t) => t.contains(e.target)), i = n.length - 1, a = t === "menu", o;
 			if ([
 				"ArrowDown",
 				"ArrowUp",
 				"Home",
 				"End"
-			].includes(e.key) && _e(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(), Se(e.shiftKey);
+				e.preventDefault(), Te(e.shiftKey);
 				return;
-			} else if (t === "menu" && S.parent?.navigation.value === "menu" && P.value && e.key === fe(P.value).close) {
-				e.preventDefault(), S.close();
+			} else if (t === "menu" && G(w) && P.value && e.key === de(P.value).close) {
+				e.preventDefault(), w.setOpen(!1, "escape");
 				return;
-			} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key !== " " || Q)) e.preventDefault(), o = ye(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;
@@ -505,49 +526,49 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			}
 			o && (e.preventDefault(), o.focus());
 		};
-		return O(C, (e) => {
-			let t = S.skipFocusReturn;
-			if (S.skipFocusReturn = !1, e) {
+		return E(T, (e) => {
+			let t = w.skipFocusReturn;
+			if (w.skipFocusReturn = !1, e) {
 				N.value = !0;
 				return;
 			}
 			let n = document.activeElement;
-			!t && n && S.floating.value?.contains(n) && S.reference.value?.focus({ preventScroll: !0 });
-		}), O(() => C.value && S.isPositioned.value, async (e) => {
+			!t && n && w.floating.value?.contains(n) && w.reference.value?.focus({ preventScroll: !0 });
+		}), E(() => T.value && w.isPositioned.value, async (e) => {
 			if (!e) return;
-			let t = Z();
-			(t || L.value) && (await d(), ve(t));
-		}), O(S.focusRequest, (e) => {
-			e && C.value && S.isPositioned.value && ve(Z());
+			let t = be();
+			(t || z.value) && (await d(), ye(t));
+		}), E(w.focusRequest, (e) => {
+			e && T.value && w.isPositioned.value && ye(be());
 		}), (n, s) => (g(), r(e, {
 			to: l.teleport || "body",
 			disabled: l.teleport === !1
 		}, [N.value ? (g(), a("div", {
 			key: 0,
 			ref: F,
-			style: f(te.value),
-			onPointerenter: s[0] ||= (...e) => w(S).hover && w(S).hover(...e),
-			onPointerleave: s[1] ||= (...e) => w(S).hover && w(S).hover(...e)
+			style: f(R.value),
+			onPointerenter: s[0] ||= (...e) => S(w).hover && S(w).hover(...e),
+			onPointerleave: s[1] ||= (...e) => S(w).hover && S(w).hover(...e)
 		}, [
-			z.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: le }), null, 16)) : i("", !0),
-			o(t, u(re.value, {
+			B.value ? (g(), a("span", u({ key: 0 }, U, { onFocus: se }), null, 16)) : i("", !0),
+			o(t, u(q.value, {
 				appear: "",
-				onBeforeLeave: ie,
-				onAfterEnter: H,
+				onBeforeLeave: J,
+				onAfterEnter: ae,
 				onAfterLeave: oe
 			}), {
-				default: A(() => [w(C) ? (g(), r(x(l.as), u({ key: 0 }, I(), {
-					id: w(E),
-					ref: ee,
+				default: O(() => [S(T) ? (g(), r(b(l.as), u({ key: 0 }, ee(), {
+					id: S(k),
+					ref: I,
 					role: l.role ?? void 0,
-					tabindex: L.value ? -1 : void 0,
+					tabindex: z.value ? -1 : void 0,
 					"data-sbf-state": "open",
-					"data-sbf-side": w(j),
-					"data-sbf-align": w(M),
-					onKeydown: we,
-					onClick: Ce
+					"data-sbf-side": S(j),
+					"data-sbf-align": S(M),
+					onKeydown: De,
+					onClick: Ee
 				}), {
-					default: A(() => [b(n.$slots, "default")]),
+					default: O(() => [y(n.$slots, "default")]),
 					_: 3
 				}, 16, [
 					"id",
@@ -558,22 +579,22 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			z.value ? (g(), a("span", u({ key: 1 }, V, { onFocus: J }), null, 16)) : i("", !0)
+			B.value ? (g(), a("span", u({ key: 1 }, U, { onFocus: fe }), null, 16)) : i("", !0)
 		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
 //#region src/composables/useSbFloating.ts
 function he() {
-	let e = c(z, null);
+	let e = c(q, 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: v(t),
+		isOpen: t,
 		open: n,
 		close: r,
 		toggle: i
 	};
 }
 //#endregion
-export { le as SbContainer, me as SbFloating, X as SbReference, he as useSbFloating };
+export { se as SbContainer, me as SbFloating, fe as SbReference, he as useSbFloating };