sb-floating-panel-vue 5.1.0 → 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 _, 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 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 L = (() => {
+var se = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 })();
-function R(e) {
-	L && 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 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 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 ne(e) {
-	let t = c(z, 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 V = (e) => `${Math.max(0, e)}px`, re = (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 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 q(e) {
+	let t = v(null), r = v(null), i = n(() => {
+		let t = x(e.padding), n = x(e.matchWidth), r = x(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(x(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 = G(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", 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 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),
+		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: j
+		whileElementsMounted: k
 	}), u = n(() => !!o.value.hide?.referenceHidden);
 	return {
 		reference: t,
@@ -74,37 +115,11 @@ function ie(e) {
 	};
 }
 //#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 J = [], Y = {
+	open: 300,
+	close: 150
+}, X = /* @__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: () => ({ ...Y }) },
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -154,20 +166,17 @@ 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;
-		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 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);
-		}, x = ie({
+			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,38 +184,41 @@ var K = [], le = /* @__PURE__ */ s({
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), C = /* @__PURE__ */ new Set(), T = c(z, null), k = {
-			...x,
+		}), D = /* @__PURE__ */ new Set(), O = c(W, null), k = {
+			...C,
 			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: b(i, "disabled"),
+			trigger: b(i, "trigger"),
+			floatingId: `${w()}-floating`,
+			referenceId: v(),
+			floatingRole: v("dialog"),
+			navigation: v(null),
+			focusRequest: v(null),
+			parent: O,
 			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: 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))
 		};
-		T && h(T.registerChild(k)), _(z, 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 = U(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 = [], le = /* @__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 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);
+		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 }), O(l, (e) => o(e ? "open" : "close")), O(x.referenceHidden, (e) => {
-			e && i.hideWhenDetached === "close" && m();
-		}), O(() => 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: x.update
-		}), (e, t) => b(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: w(x).placement.value,
-			side: w(x).side.value,
-			align: w(x).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
 		});
 	}
-}), q = {
+}), ue = {
 	dialog: "dialog",
 	alertdialog: "dialog",
 	menu: "menu",
 	listbox: "listbox",
 	tree: "tree",
 	grid: "grid"
-}, J = {
+}, Z = {
 	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));
+}, 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 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\"])"), pe = (e) => getComputedStyle(e).direction === "rtl" ? {
 	open: "ArrowLeft",
 	close: "ArrowRight"
 } : {
 	open: "ArrowRight",
 	close: "ArrowLeft"
-}, X = /* @__PURE__ */ s({
+}, me = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
@@ -280,68 +295,70 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 		ariaHaspopup: { default: void 0 }
 	},
 	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 = 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 = `${E()}-reference`, _ = n(() => t.id ?? h);
-		k(() => {
-			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.");
+		], 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(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();
-		}, 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 (O()) {
+				if (H(a)) {
 					let t = e.currentTarget;
-					return e.key === fe(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 && !O()) {
-				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(x(t.as), {
-			id: _.value,
-			ref: y,
+		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 : w(s) ? -1 : 0,
-			disabled: t.as === "button" && w(s) ? !0 : void 0,
-			"aria-disabled": t.as !== "button" && w(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
+			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: A(() => [b(e.$slots, "default")]),
+			default: O(() => [te(e.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"id",
@@ -359,7 +376,7 @@ var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			"onPointerleave"
 		]));
 	}
-}), pe = ":disabled, [aria-disabled=\"true\"], [aria-haspopup]:not([aria-haspopup=\"false\"])", me = /* @__PURE__ */ s({
+}), he = ":disabled, [aria-disabled=\"true\"], [aria-haspopup]:not([aria-haspopup=\"false\"])", ge = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbFloating",
 	props: {
@@ -386,26 +403,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;
-		}), 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.");
+		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 = 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 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(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]: "",
+		})), 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",
@@ -413,90 +432,98 @@ var Y = (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 };
-		}), 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) => {
-			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 });
-		}, le = (e) => {
-			U(e.relatedTarget) ? S.reference.value?.focus() : K("first");
 		}, J = (e) => {
-			if (!U(e.relatedTarget)) {
-				K("last");
+			K(e.relatedTarget) ? b.reference.value?.focus() : q("first");
+		}, Y = (e) => {
+			if (!K(e.relatedTarget)) {
+				q("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) : [];
+			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\"]"
-		}, he = {
+		}, ge = {
 			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) => {
-			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 = 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 = Z();
+			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 = [S];
-			for (; e[e.length - 1].parent?.navigation.value === "menu";) e.push(e[e.length - 1].parent);
+			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));
+		}, Ce = () => {
+			let e = [b];
+			for (; H(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) => {
-			let { role: t } = l, n = P.value;
-			if (!l.closeOnSelect || e.defaultPrevented || !n || !ue(t)) return;
+		}, 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(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;
+			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) && _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" && 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 = 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 +532,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) {
-				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 });
-		}), O(() => C.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 = Z();
-			(t || L.value) && (await d(), ve(t));
-		}), O(S.focusRequest, (e) => {
-			e && C.value && S.isPositioned.value && ve(Z());
-		}), (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) => w(S).hover && w(S).hover(...e),
-			onPointerleave: s[1] ||= (...e) => w(S).hover && w(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)
 		}, [
-			z.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: le }), 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: ie,
-				onAfterEnter: H,
-				onAfterLeave: oe
+				onBeforeLeave: se,
+				onAfterEnter: W,
+				onAfterLeave: G
 			}), {
-				default: A(() => [w(C) ? (g(), r(x(l.as), u({ key: 0 }, I(), {
-					id: w(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: L.value ? -1 : void 0,
+					tabindex: I.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(k),
+					"data-sbf-align": S(A),
+					onKeydown: De,
+					onClick: Ee
 				}), {
-					default: A(() => [b(n.$slots, "default")]),
+					default: O(() => [te(n.$slots, "default")]),
 					_: 3
 				}, 16, [
 					"id",
@@ -558,22 +585,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)
+			L.value ? (h(), a("span", u({ key: 1 }, R, { onFocus: Y }), null, 16)) : i("", !0)
 		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
 //#region src/composables/useSbFloating.ts
-function he() {
-	let e = c(z, null);
+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: 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 { X as SbContainer, ge as SbFloating, me as SbReference, _e as useSbFloating };