sb-floating-panel-vue 4.0.0 → 5.0.1

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

@@ -1,70 +1,81 @@
-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, onScopeDispose as m, openBlock as h, provide as g, ref as _, renderSlot as v, 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 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, 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 I } from "@floating-ui/vue";
+//#region src/utils/warn.ts
+var L = (() => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !1;
+	}
+})();
+function R(e) {
+	L && 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]--;
+}
+function V(e) {
+	let t = c(z, null);
+	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
+	return t;
+}
+//#endregion
 //#region src/composables/useSbFloatingPanel.ts
-var L = (e) => `${Math.max(0, e)}px`, R = (e) => {
-	let [t, n] = e.split("-"), r = n === "start" ? "0%" : n === "end" ? "100%" : "50%";
-	return t === "top" ? `${r} 100%` : t === "bottom" ? `${r} 0%` : t === "left" ? `100% ${r}` : `0% ${r}`;
+var H = (e) => `${Math.max(0, e)}px`, te = (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 z(e) {
-	let t = _(null), r = _(null), i = n(() => {
-		let t = x(e.padding), n = x(e.matchWidth), r = x(e.placement).includes("-"), i = A({
+function ne(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({
 			padding: t,
 			crossAxis: "alignment",
 			fallbackAxisSideDirection: "end"
-		}), a = P({
+		}), a = F({
 			padding: t,
-			limiter: M()
+			limiter: N()
 		}), o = [
-			N(x(e.offset)),
+			P(S(e.offset)),
 			...r ? [i, a] : [a, i],
-			F({
+			ee({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = L(e.reference.width);
-					o.setProperty("--sbf-reference-width", s), o.setProperty("--sbf-transform-origin", R(a)), o.setProperty("--sbf-available-width", L(r)), o.setProperty("--sbf-available-height", L(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
+					let { style: o } = t.floating, s = H(e.reference.width);
+					o.setProperty("--sbf-reference-width", s);
+					let c = getComputedStyle(t.floating).direction === "rtl";
+					o.setProperty("--sbf-transform-origin", te(a, c)), o.setProperty("--sbf-available-width", H(r)), o.setProperty("--sbf-available-height", H(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
 				}
 			})
 		];
-		return x(e.hideWhenDetached) && o.push(j({ padding: t })), o;
+		return S(e.hideWhenDetached) && o.push(M({ padding: t })), o;
 	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = I(t, r, {
-		open: () => x(e.isOpen),
-		placement: () => x(e.placement),
-		strategy: () => x(e.strategy),
+		open: () => S(e.isOpen),
+		placement: () => S(e.placement),
+		strategy: () => S(e.strategy),
 		middleware: i,
-		whileElementsMounted: k
-	});
+		whileElementsMounted: A
+	}), u = n(() => !!o.value.hide?.referenceHidden);
 	return {
 		reference: t,
 		floating: r,
 		floatingStyles: n(() => ({
 			...a.value,
-			...o.value.hide?.referenceHidden ? { visibility: "hidden" } : {}
+			...u.value ? { visibility: "hidden" } : {}
 		})),
 		placement: s,
 		side: n(() => s.value.split("-")[0]),
 		align: n(() => s.value.split("-")[1]),
 		isPositioned: c,
+		referenceHidden: u,
 		update: l
 	};
 }
 //#endregion
-//#region src/context.ts
-var B = {
-	dialog: "dialog",
-	alertdialog: "dialog",
-	menu: "menu",
-	listbox: "listbox",
-	tree: "tree",
-	grid: "grid"
-}, V = Symbol("SbFloatingContext");
-function H(e) {
-	let t = c(V, null);
-	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
-	return t;
-}
-//#endregion
-//#region src/focus.ts
-var U = "data-sbf-focus-guard", W = [
+//#region src/utils/dom.ts
+var re = "data-sbf-focus-guard", U = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled]):not([type=\"hidden\"])",
@@ -75,20 +86,24 @@ var U = "data-sbf-focus-guard", W = [
 	"video[controls]",
 	"[tabindex]",
 	"[contenteditable=\"true\"]"
-].join(","), G = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
-function K(e) {
-	let t = e instanceof Element ? e.closest(W) : null;
+].join(","), W = (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 G(e) {
+	let t = e instanceof Element ? e.closest(U) : null;
 	return !!t && !t.closest("[inert]");
 }
-function q(e) {
-	return [...e.querySelectorAll(W)].filter(G);
+function K(e) {
+	return [...e.querySelectorAll(U)].filter(W);
 }
-function J(e, t) {
-	return q(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+function ae(e, t) {
+	return K(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 Y = [], X = /* @__PURE__ */ s({
+var q = [], oe = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -101,7 +116,7 @@ var Y = [], X = /* @__PURE__ */ s({
 			default: !1
 		},
 		hideWhenDetached: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: !1
 		},
 		defaultOpen: {
@@ -113,6 +128,10 @@ var Y = [], X = /* @__PURE__ */ s({
 			default: !1
 		},
 		trigger: { default: "click" },
+		delay: { default: () => ({
+			open: 300,
+			close: 150
+		}) },
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -134,9 +153,20 @@ var Y = [], X = /* @__PURE__ */ s({
 	}),
 	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = T(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u = (e) => {
-			e && i.disabled || e !== l.value && (a.value = e);
-		}, d = () => u(!0), f = () => u(!1), p = () => u(!l.value), h = z({
+		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) => {
+			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 = ne({
 			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
@@ -144,65 +174,104 @@ var Y = [], X = /* @__PURE__ */ s({
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), y = /* @__PURE__ */ new Set(), x = {
-			...h,
+		}), w = /* @__PURE__ */ new Set(), O = c(z, null), k = {
+			...S,
 			isOpen: l,
-			disabled: b(i, "disabled"),
-			trigger: b(i, "trigger"),
-			floatingId: `${w()}-floating`,
-			referenceId: _(),
-			floatingRole: _("dialog"),
+			disabled: x(i, "disabled"),
+			trigger: x(i, "trigger"),
+			floatingId: `${T()}-floating`,
+			referenceId: v(),
+			floatingRole: v("dialog"),
+			navigation: v(null),
+			focusRequest: v(null),
+			parent: O,
 			skipFocusReturn: !1,
-			open: d,
-			close: f,
-			toggle: p,
-			contains: (e) => e instanceof Node ? h.reference.value?.contains(e) || h.floating.value?.contains(e) ? !0 : [...y].some((t) => t.contains(e)) : !1,
-			registerChild: (e) => (y.add(e), () => y.delete(e))
-		}, C = c(V, null);
-		C && m(C.registerChild(x)), g(V, x);
-		let D = (e) => {
-			e.key === "Escape" && Y[Y.length - 1] === x && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), f()));
-		}, O = (e) => {
-			x.contains(e) || (x.skipFocusReturn = K(e), f());
-		}, k, A = (e) => {
-			if (k?.(), !i.closeOnClickOutside) return;
+			parts: {
+				reference: 0,
+				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))
+		};
+		O && h(O.registerChild(k)), _(z, k), p(() => k.isUnmounting = !0);
+		let A = (e) => {
+			let t = e.composedPath()[0] ?? e.target;
+			return q.findLast((e) => e.contains(t)) ?? q[q.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 = G(e), m());
+		}, N, P = (e) => {
+			if (N?.(), !i.closeOnClickOutside) return;
 			let t = e.composedPath()[0] ?? e.target;
 			if (e.pointerType !== "touch") {
-				O(t);
+				M(t);
 				return;
 			}
-			if (x.contains(t)) return;
+			if (k.contains(t)) return;
 			let n = (e) => {
-				k?.(), O(e.composedPath()[0] ?? e.target);
+				N?.(), M(e.composedPath()[0] ?? e.target);
 			};
-			document.addEventListener("click", n, !0), k = () => {
-				document.removeEventListener("click", n, !0), k = void 0;
+			document.addEventListener("click", n, !0), N = () => {
+				document.removeEventListener("click", n, !0), N = void 0;
 			};
-		}, j = (e) => {
-			i.closeOnFocusOut && (x.contains(e.composedPath()[0] ?? e.target) || f());
+		}, F = (e) => {
+			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
 		};
-		return E(l, (e, t, n) => {
-			e && typeof document < "u" && (Y.push(x), document.addEventListener("keydown", D), document.addEventListener("pointerdown", A, !0), document.addEventListener("focusin", j), n(() => {
-				document.removeEventListener("keydown", D), document.removeEventListener("pointerdown", A, !0), document.removeEventListener("focusin", j), k?.(), Y.splice(Y.indexOf(x), 1);
+		return D(l, (e, t, n) => {
+			e && typeof document < "u" && (q.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?.(), q.splice(q.indexOf(k), 1);
 			}));
-		}, { immediate: !0 }), E(l, (e) => o(e ? "open" : "close")), E(() => i.disabled, (e) => {
+		}, { immediate: !0 }), D(l, (e) => o(e ? "open" : "close")), D(S.referenceHidden, (e) => {
+			e && i.hideWhenDetached === "close" && m();
+		}), D(() => i.disabled, (e) => {
 			e && (a.value ?? s) && (a.value = !1);
 		}), t({
-			open: d,
-			close: f,
-			toggle: p,
-			update: h.update
-		}), (e, t) => v(e.$slots, "default", {
+			get isOpen() {
+				return l.value;
+			},
+			open: f,
+			close: m,
+			toggle: g,
+			update: S.update
+		}), (e, t) => y(e.$slots, "default", {
 			isOpen: l.value,
-			open: d,
-			close: f,
-			toggle: p,
-			placement: S(h).placement.value,
-			side: S(h).side.value,
-			align: S(h).align.value
+			open: f,
+			close: m,
+			toggle: g,
+			placement: C(S).placement.value,
+			side: C(S).side.value,
+			align: C(S).align.value,
+			floatingId: k.floatingId,
+			referenceId: k.referenceId.value
 		});
 	}
-}), Z = /* @__PURE__ */ s({
+}), J = {
+	dialog: "dialog",
+	alertdialog: "dialog",
+	menu: "menu",
+	listbox: "listbox",
+	tree: "tree",
+	grid: "grid"
+}, Y = {
+	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
+	listbox: "[role=\"option\"]"
+}, se = (e) => !!e && Object.hasOwn(Y, e);
+function ce(e, t) {
+	return [...e.querySelectorAll(Y[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
+}
+var le = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), ue = (e) => getComputedStyle(e).direction === "rtl" ? {
+	open: "ArrowLeft",
+	close: "ArrowRight"
+} : {
+	open: "ArrowRight",
+	close: "ArrowLeft"
+}, X = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
@@ -210,39 +279,62 @@ var Y = [], X = /* @__PURE__ */ s({
 		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, i = C(), a = H("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = () => typeof t.as != "string" || t.as === "button" || t.as === "a" && i.href != null, d = `${w()}-reference`, f = n(() => t.id ?? d);
-		D(() => {
-			a.referenceId.value = f.value;
+		let t = e, i = w(), a = V("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = B(a, "reference", "SbReference"), d = () => typeof t.as != "string" || t.as === "button" || t.as === "a" && i.href != null, f = `${T()}-reference`, h = n(() => t.id ?? f);
+		O(() => {
+			a.referenceId.value = h.value;
+		}), m(() => {
+			a.reference.value || R("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
 		}), p(() => {
-			a.referenceId.value === f.value && (a.referenceId.value = void 0);
+			a.referenceId.value === h.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && a.close();
 		});
-		let m = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(B, l.value) ? B[l.value] : void 0)), g = (e) => {
-			let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
-			a.reference.value = t instanceof HTMLElement ? t : null;
-		}, _ = () => {
+		let _ = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(J, l.value) ? J[l.value] : void 0)), v = (e) => {
+			a.reference.value = ie(e);
+		}, x = () => {
 			a.trigger.value === "click" && a.toggle();
-		}, b = (e) => {
-			let t = a.floating.value, n = t && q(t)[0];
+		}, S = n(() => l.value === "tooltip"), E = () => a.trigger.value === "hover" || a.trigger.value === "focus", D = () => a.parent?.navigation.value === "menu", A = (e) => {
+			E() && !D() && !a.contains(e.relatedTarget) && a.open();
+		}, j = (e) => {
+			E() && !a.contains(e.relatedTarget) && a.close();
+		}, M = (e) => {
+			let t = a.floating.value, n = t && K(t)[0];
 			n && (e.preventDefault(), n.focus());
-		}, x = (e) => {
-			e.key === "Tab" && !e.shiftKey && o.value ? b(e) : u() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), _());
+		}, N = (e) => {
+			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
+				if (D()) {
+					let t = e.currentTarget;
+					return e.key === ue(t).open ? "first" : void 0;
+				}
+				return e.key === "ArrowDown" ? "first" : e.key === "ArrowUp" ? "last" : void 0;
+			}
+		}, P = (e) => {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !D()) {
+				M(e);
+				return;
+			}
+			let t = N(e);
+			t ? (e.preventDefault(), a.focusRequest.value = t, a.open()) : d() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), x());
 		};
-		return (e, n) => (h(), r(y(t.as), {
-			id: f.value,
-			ref: g,
+		return (e, n) => (g(), r(b(t.as), {
+			id: h.value,
+			ref: v,
 			type: t.as === "button" ? "button" : void 0,
-			role: u() ? void 0 : "button",
-			tabindex: u() ? 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": m.value,
-			"aria-expanded": S(o) ? "true" : "false",
-			"aria-controls": S(o) ? S(c) : void 0,
-			"data-sbf-state": S(o) ? "open" : "closed",
-			onClick: _,
-			onKeydown: x
+			role: d() ? void 0 : "button",
+			tabindex: d() ? 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": _.value,
+			"aria-expanded": S.value ? void 0 : C(o) ? "true" : "false",
+			"aria-controls": C(o) && !S.value ? C(c) : void 0,
+			"aria-describedby": C(o) && S.value ? C(c) : void 0,
+			"data-sbf-state": C(o) ? "open" : "closed",
+			onClick: x,
+			onKeydown: P,
+			onFocusin: A,
+			onFocusout: j,
+			onPointerenter: C(a).hover,
+			onPointerleave: C(a).hover
 		}, {
-			default: O(() => [v(e.$slots, "default")]),
+			default: k(() => [y(e.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"id",
@@ -254,45 +346,53 @@ var Y = [], X = /* @__PURE__ */ s({
 			"aria-haspopup",
 			"aria-expanded",
 			"aria-controls",
-			"data-sbf-state"
+			"aria-describedby",
+			"data-sbf-state",
+			"onPointerenter",
+			"onPointerleave"
 		]));
 	}
-}), Q = /* @__PURE__ */ s({
+}), Z = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbFloating",
 	props: {
 		as: { default: "div" },
 		role: { default: "dialog" },
 		transition: { default: void 0 },
-		teleportTo: { default: "body" },
-		teleportDisabled: {
-			type: Boolean,
-			default: !1
+		teleport: {
+			type: [String, Boolean],
+			default: "body"
 		},
 		zIndex: { default: void 0 },
 		autoFocus: {
+			type: Boolean,
+			default: void 0
+		},
+		keyboardNavigation: {
 			type: Boolean,
 			default: !0
 		}
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, p = c, m = C(), g = H("SbFloating"), { isOpen: b, floatingId: x, referenceId: w, side: T, align: k } = g;
-		D(() => {
-			g.floatingRole.value = l.role;
+		let l = s, m = c, _ = w(), x = V("SbFloating");
+		p(B(x, "floating", "SbFloating"));
+		let { isOpen: S, floatingId: T, referenceId: E, side: A, align: j } = x;
+		O(() => {
+			x.floatingRole.value = l.role, x.navigation.value = l.keyboardNavigation && se(l.role) ? l.role : null;
 		});
-		let A = _(b.value), j = _(null), M = (e) => {
-			g.floating.value = e instanceof HTMLElement ? e : null;
-		}, N = (e) => {
-			j.value = e instanceof HTMLElement ? e : null;
-		}, P = n(() => ({
-			...g.floatingStyles.value,
+		let M = v(S.value), N = v(null), P = (e) => {
+			x.floating.value = e instanceof HTMLElement ? e : null;
+		}, F = (e) => {
+			N.value = ie(e);
+		}, ee = n(() => ({
+			...x.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
-		})), F = () => ({
-			"aria-labelledby": l.role && Object.hasOwn(B, l.role) && m["aria-label"] == null ? w.value : void 0,
-			...m
-		}), I = n(() => b.value && !l.teleportDisabled), L = {
-			[U]: "",
+		})), I = () => ({
+			"aria-labelledby": l.role && Object.hasOwn(J, l.role) && _["aria-label"] == null ? E.value : void 0,
+			..._
+		}), L = n(() => l.autoFocus ?? (l.role !== "tooltip" && x.trigger.value !== "hover" && x.trigger.value !== "focus")), R = n(() => S.value && l.teleport !== !1 && l.role !== "tooltip"), z = {
+			[re]: "",
 			tabindex: 0,
 			style: {
 				position: "fixed",
@@ -300,64 +400,113 @@ var Y = [], X = /* @__PURE__ */ s({
 				outline: "none",
 				pointerEvents: "none"
 			}
-		}, R = n(() => {
+		}, H = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), z = (e) => e.setAttribute("data-sbf-state", "closed"), V = () => p("after-enter"), W = () => {
-			b.value || (A.value = !1), p("after-leave");
-		}, G = (e) => e instanceof Node && !!j.value?.contains(e), K = (e) => {
-			let t = j.value;
+		}), te = (e) => e.setAttribute("data-sbf-state", "closed"), ne = () => m("after-enter"), U = () => {
+			S.value || (M.value = !1), m("after-leave");
+		}, W = (e) => e instanceof Node && !!N.value?.contains(e), G = (e) => {
+			let t = N.value;
 			if (!t) return;
-			let n = q(t);
+			let n = K(t);
 			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
-		}, Y = (e) => {
-			G(e.relatedTarget) ? g.reference.value?.focus() : K("first");
-		}, X = (e) => {
-			if (!G(e.relatedTarget)) {
-				K("last");
+		}, q = (e) => {
+			W(e.relatedTarget) ? x.reference.value?.focus() : G("first");
+		}, oe = (e) => {
+			if (!W(e.relatedTarget)) {
+				G("last");
 				return;
 			}
-			let t = g.reference.value;
-			((t && J(t, (e) => g.contains(e))) ?? t)?.focus();
+			let t = x.reference.value;
+			((t && ae(t, (e) => x.contains(e))) ?? t)?.focus();
+		}, Y = () => {
+			let e = x.navigation.value;
+			return N.value && e ? ce(N.value, e) : [];
+		}, X = (e) => {
+			let t = N.value;
+			if (!t) return;
+			let n = Y();
+			(n.find((e) => e.getAttribute("aria-selected") === "true") ?? (e === "last" ? n[n.length - 1] : e ? n[0] : void 0) ?? t.querySelector("[autofocus]") ?? n[0] ?? K(t)[0] ?? t).focus({ preventScroll: !0 });
 		}, Z = () => {
-			let e = j.value;
-			e && (e.querySelector("[autofocus]") ?? q(e)[0] ?? e).focus({ preventScroll: !0 });
+			let e = x.focusRequest.value;
+			return x.focusRequest.value = null, e;
+		}, Q = "", $;
+		h(() => clearTimeout($));
+		let de = (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));
+		}, fe = (e) => {
+			let t = x, n = [t];
+			for (; t.parent?.navigation.value === "menu";) t = t.parent, n.push(t);
+			let r = t.reference.value, i = e ? r : (r && ae(r, (e) => t.contains(e))) ?? r;
+			for (let e of n) e.skipFocusReturn = !0, e.close();
+			i?.focus();
+		}, pe = (e) => {
+			let t = x.navigation.value;
+			if (!t || e.defaultPrevented || e.isComposing || le(e.target)) return;
+			let n = Y(), r = n.findIndex((t) => t.contains(e.target)), i = n.length - 1, a = t === "menu", o;
+			if (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(), fe(e.shiftKey);
+				return;
+			} else if (t === "menu" && x.parent?.navigation.value === "menu" && N.value && e.key === ue(N.value).close) {
+				e.preventDefault(), x.close();
+				return;
+			} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key !== " " || Q)) e.preventDefault(), o = de(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;
+				e.preventDefault(), t.getAttribute("aria-disabled") !== "true" && t.click();
+				return;
+			}
+			o && (e.preventDefault(), o.focus());
 		};
-		return E(b, (e) => {
-			let t = g.skipFocusReturn;
-			if (g.skipFocusReturn = !1, e) {
-				A.value = !0;
+		return D(S, (e) => {
+			let t = x.skipFocusReturn;
+			if (x.skipFocusReturn = !1, e) {
+				M.value = !0;
 				return;
 			}
 			let n = document.activeElement;
-			!t && n && g.floating.value?.contains(n) && g.reference.value?.focus({ preventScroll: !0 });
-		}), E(() => b.value && g.isPositioned.value, async (e) => {
-			e && l.autoFocus && (await d(), Z());
-		}), (n, s) => (h(), r(e, {
-			to: l.teleportTo,
-			disabled: l.teleportDisabled
-		}, [A.value ? (h(), a("div", {
+			!t && n && x.floating.value?.contains(n) && x.reference.value?.focus({ preventScroll: !0 });
+		}), D(() => S.value && x.isPositioned.value, async (e) => {
+			if (!e) return;
+			let t = Z();
+			(t || L.value) && (await d(), X(t));
+		}), D(x.focusRequest, (e) => {
+			e && S.value && x.isPositioned.value && X(Z());
+		}), (n, s) => (g(), r(e, {
+			to: l.teleport || "body",
+			disabled: l.teleport === !1
+		}, [M.value ? (g(), a("div", {
 			key: 0,
-			ref: M,
-			style: f(P.value)
+			ref: P,
+			style: f(ee.value),
+			onPointerenter: s[0] ||= (...e) => C(x).hover && C(x).hover(...e),
+			onPointerleave: s[1] ||= (...e) => C(x).hover && C(x).hover(...e)
 		}, [
-			I.value ? (h(), a("span", u({ key: 0 }, L, { onFocus: Y }), null, 16)) : i("", !0),
-			o(t, u(R.value, {
+			R.value ? (g(), a("span", u({ key: 0 }, z, { onFocus: q }), null, 16)) : i("", !0),
+			o(t, u(H.value, {
 				appear: "",
-				onBeforeLeave: z,
-				onAfterEnter: V,
-				onAfterLeave: W
+				onBeforeLeave: te,
+				onAfterEnter: ne,
+				onAfterLeave: U
 			}), {
-				default: O(() => [S(b) ? (h(), r(y(l.as), u({ key: 0 }, F(), {
-					id: S(x),
-					ref: N,
+				default: k(() => [C(S) ? (g(), r(b(l.as), u({ key: 0 }, I(), {
+					id: C(T),
+					ref: F,
 					role: l.role ?? void 0,
-					tabindex: l.autoFocus ? -1 : void 0,
+					tabindex: L.value ? -1 : void 0,
 					"data-sbf-state": "open",
-					"data-sbf-side": S(T),
-					"data-sbf-align": S(k)
+					"data-sbf-side": C(A),
+					"data-sbf-align": C(j),
+					onKeydown: pe
 				}), {
-					default: O(() => [v(n.$slots, "default")]),
+					default: k(() => [y(n.$slots, "default")]),
 					_: 3
 				}, 16, [
 					"id",
@@ -368,9 +517,9 @@ var Y = [], X = /* @__PURE__ */ s({
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			I.value ? (h(), a("span", u({ key: 1 }, L, { onFocus: X }), null, 16)) : i("", !0)
-		], 4)) : i("", !0)], 8, ["to", "disabled"]));
+			R.value ? (g(), a("span", u({ key: 1 }, z, { onFocus: oe }), null, 16)) : i("", !0)
+		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { X as SbContainer, Q as SbFloating, Z as SbReference };
+export { oe as SbContainer, Z as SbFloating, X as SbReference };