sb-floating-panel-vue 3.0.0 → 5.0.0

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

@@ -1,60 +1,130 @@
-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, onScopeDispose as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toRef as y, toValue as b, unref as x, useId as S, useModel as C, watch as w, withCtx as T } from "vue";
-import { autoUpdate as E, flip as D, hide as O, limitShift as k, offset as A, shift as j, size as M, useFloating as N } 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 te } from "@floating-ui/vue";
 //#region src/composables/useSbFloatingPanel.ts
-var P = (e) => `${Math.max(0, e)}px`;
-function F(e) {
-	let t = g(null), r = g(null), i = n(() => {
-		let t = b(e.padding), n = b(e.matchWidth), r = b(e.placement).includes("-"), i = D({
+var I = (e) => `${Math.max(0, e)}px`, L = (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 R(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 = j({
+		}), a = F({
 			padding: t,
-			limiter: k()
+			limiter: N()
 		}), o = [
-			A(b(e.offset)),
+			P(S(e.offset)),
 			...r ? [i, a] : [a, i],
-			M({
+			ee({
 				padding: t,
-				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i }) {
-					let { style: a } = t.floating, o = P(e.reference.width);
-					a.setProperty("--sbf-reference-width", o), a.setProperty("--sbf-available-width", P(r)), a.setProperty("--sbf-available-height", P(i)), a.width = n === !0 ? o : "", a.minWidth = n === "min" ? o : "";
+				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
+					let { style: o } = t.floating, s = I(e.reference.width);
+					o.setProperty("--sbf-reference-width", s);
+					let c = getComputedStyle(t.floating).direction === "rtl";
+					o.setProperty("--sbf-transform-origin", L(a, c)), o.setProperty("--sbf-available-width", I(r)), o.setProperty("--sbf-available-height", I(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
 				}
 			})
 		];
-		return b(e.hideWhenDetached) && o.push(O({ padding: t })), o;
-	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = N(t, r, {
-		open: () => b(e.isOpen),
-		placement: () => b(e.placement),
-		strategy: () => b(e.strategy),
+		return S(e.hideWhenDetached) && o.push(M({ padding: t })), o;
+	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = te(t, r, {
+		open: () => S(e.isOpen),
+		placement: () => S(e.placement),
+		strategy: () => S(e.strategy),
 		middleware: i,
-		whileElementsMounted: E
-	});
+		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/dev.ts
+var z = (() => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !1;
+	}
+})();
+function B(e) {
+	z && console.warn(`[sb-floating-panel-vue] ${e}`);
+}
+//#endregion
 //#region src/context.ts
-var I = Symbol("SbFloatingContext");
-function L(e) {
-	let t = c(I, null);
+var V = {
+	dialog: "dialog",
+	alertdialog: "dialog",
+	menu: "menu",
+	listbox: "listbox",
+	tree: "tree",
+	grid: "grid"
+}, H = Symbol("SbFloatingContext");
+function ne(e) {
+	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
+	return t instanceof HTMLElement ? t : null;
+}
+function re(e, t, n) {
+	return ++e.parts[t] > 1 && B(`<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(H, null);
 	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
 	return t;
 }
 //#endregion
+//#region src/focus.ts
+var ae = "data-sbf-focus-guard", U = [
+	"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(","), W = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function G(e) {
+	let t = e instanceof Element ? e.closest(U) : null;
+	return !!t && !t.closest("[inert]");
+}
+function K(e) {
+	return [...e.querySelectorAll(U)].filter(W);
+}
+var q = {
+	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
+	listbox: "[role=\"option\"]"
+}, oe = (e) => !!e && Object.hasOwn(q, e);
+function se(e, t) {
+	return [...e.querySelectorAll(q[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
+}
+var ce = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), le = (e) => getComputedStyle(e).direction === "rtl" ? {
+	open: "ArrowLeft",
+	close: "ArrowRight"
+} : {
+	open: "ArrowRight",
+	close: "ArrowLeft"
+};
+function ue(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 R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
+var J = [], Y = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -67,7 +137,7 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 			default: !1
 		},
 		hideWhenDetached: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: !1
 		},
 		defaultOpen: {
@@ -79,6 +149,10 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 			default: !1
 		},
 		trigger: { default: "click" },
+		delay: { default: () => ({
+			open: 300,
+			close: 150
+		}) },
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -86,6 +160,10 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 		closeOnClickOutside: {
 			type: Boolean,
 			default: !0
+		},
+		closeOnFocusOut: {
+			type: Boolean,
+			default: !0
 		}
 	}, {
 		open: {
@@ -96,86 +174,172 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 	}),
 	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = C(e, "open"), o = r, s = n(() => !i.disabled && (a.value ?? i.defaultOpen)), l = (e) => {
-			e && i.disabled || e !== s.value && (a.value = e);
-		}, u = () => l(!0), d = () => l(!1), f = () => l(!s.value), m = F({
-			isOpen: s,
+		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 (i.trigger !== "hover" || e.pointerType === "touch") return;
+			let t = e.type === "pointerenter";
+			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 = R({
+			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
 			offset: () => i.offset,
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), g = /* @__PURE__ */ new Set(), v = {
-			...m,
-			isOpen: s,
-			disabled: y(i, "disabled"),
-			trigger: y(i, "trigger"),
-			floatingId: `${S()}-floating`,
-			open: u,
-			close: d,
-			toggle: f,
-			contains: (e) => e instanceof Node ? m.reference.value?.contains(e) || m.floating.value?.contains(e) ? !0 : [...g].some((t) => t.contains(e)) : !1,
-			hasOpenChild: () => [...g].some((e) => e.isOpen.value || e.hasOpenChild()),
-			registerChild: (e) => (g.add(e), () => g.delete(e))
-		}, b = c(I, null);
-		b && p(b.registerChild(v)), h(I, v);
-		let T = (e) => {
-			e.key === "Escape" && i.closeOnEscape && !v.hasOpenChild() && (R.has(e) || (R.add(e), d()));
-		}, E = (e) => {
-			i.closeOnClickOutside && (v.contains(e.composedPath()[0] ?? e.target) || d());
+		}), w = /* @__PURE__ */ new Set(), O = c(H, null), k = {
+			...S,
+			isOpen: l,
+			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,
+			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))
 		};
-		return w(s, (e, t, n) => {
-			e && typeof document < "u" && (document.addEventListener("keydown", T), document.addEventListener("pointerdown", E, !0), n(() => {
-				document.removeEventListener("keydown", T), document.removeEventListener("pointerdown", E, !0);
+		O && h(O.registerChild(k)), _(H, k), p(() => k.isUnmounting = !0);
+		let A = (e) => {
+			let t = e.composedPath()[0] ?? e.target;
+			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()));
+		}, 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") {
+				M(t);
+				return;
+			}
+			if (k.contains(t)) return;
+			let n = (e) => {
+				N?.(), M(e.composedPath()[0] ?? e.target);
+			};
+			document.addEventListener("click", n, !0), N = () => {
+				document.removeEventListener("click", n, !0), N = void 0;
+			};
+		}, F = (e) => {
+			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
+		};
+		return D(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 }), w(s, (e) => o(e ? "open" : "close")), w(() => i.disabled, (e) => {
-			e && a.value && (a.value = !1);
+		}, { 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: u,
-			close: d,
-			toggle: f,
-			update: m.update
-		}), (e, t) => _(e.$slots, "default", {
-			isOpen: s.value,
-			open: u,
-			close: d,
-			toggle: f,
-			placement: x(m).placement.value,
-			side: x(m).side.value
+			get isOpen() {
+				return l.value;
+			},
+			open: f,
+			close: m,
+			toggle: g,
+			update: S.update
+		}), (e, t) => y(e.$slots, "default", {
+			isOpen: l.value,
+			open: f,
+			close: m,
+			toggle: g,
+			placement: C(S).placement.value,
+			side: C(S).side.value,
+			align: C(S).align.value,
+			floatingId: k.floatingId,
+			referenceId: k.referenceId.value
 		});
 	}
-}), B = /* @__PURE__ */ s({
+}), X = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
-		ariaHaspopup: { default: "dialog" }
+		id: { default: void 0 },
+		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, i = L("SbReference"), { isOpen: a, disabled: o, floatingId: s } = i, c = n(() => t.as === "button" || t.as === "a"), l = (e) => {
-			i.reference.value = e instanceof HTMLElement ? e : null;
-		}, u = () => {
-			i.trigger.value === "click" && i.toggle();
-		}, d = (e) => {
-			c.value || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), u());
+		let t = e, i = w(), a = ie("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = re(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 || B("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
+		}), p(() => {
+			a.referenceId.value === h.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && a.close();
+		});
+		let _ = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(V, l.value) ? V[l.value] : void 0)), v = (e) => {
+			a.reference.value = ne(e);
+		}, x = () => {
+			a.trigger.value === "click" && a.toggle();
+		}, S = n(() => l.value === "tooltip"), E = () => a.trigger.value === "hover" || a.trigger.value === "focus", D = (e) => {
+			E() && !a.contains(e.relatedTarget) && a.open();
+		}, A = (e) => {
+			E() && !a.contains(e.relatedTarget) && a.close();
+		}, j = (e) => {
+			let t = a.floating.value, n = t && K(t)[0];
+			n && (e.preventDefault(), n.focus());
+		}, M = (e) => {
+			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
+				if (a.parent?.navigation.value === "menu") {
+					let t = e.currentTarget;
+					return e.key === le(t).open ? "first" : void 0;
+				}
+				return e.key === "ArrowDown" ? "first" : e.key === "ArrowUp" ? "last" : void 0;
+			}
+		}, N = (e) => {
+			let t = a.parent?.navigation.value === "menu";
+			if (e.key === "Tab" && !e.shiftKey && o.value && !t) {
+				j(e);
+				return;
+			}
+			let n = M(e);
+			n ? (e.preventDefault(), a.focusRequest.value = n, a.open()) : d() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), x());
 		};
-		return (e, n) => (m(), r(v(t.as), {
-			ref: l,
+		return (e, n) => (g(), r(b(t.as), {
+			id: h.value,
+			ref: v,
 			type: t.as === "button" ? "button" : void 0,
-			role: c.value ? void 0 : "button",
-			tabindex: c.value ? void 0 : x(o) ? -1 : 0,
-			disabled: t.as === "button" && x(o) ? !0 : void 0,
-			"aria-disabled": !c.value && x(o) ? "true" : void 0,
-			"aria-haspopup": t.ariaHaspopup,
-			"aria-expanded": x(a) ? "true" : "false",
-			"aria-controls": x(a) ? x(s) : void 0,
-			"data-sbf-state": x(a) ? "open" : "closed",
-			onClick: u,
-			onKeydown: d
+			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: N,
+			onFocusin: D,
+			onFocusout: A,
+			onPointerenter: C(a).hover,
+			onPointerleave: C(a).hover
 		}, {
-			default: T(() => [_(e.$slots, "default")]),
+			default: k(() => [y(e.$slots, "default")]),
 			_: 3
 		}, 40, [
+			"id",
 			"type",
 			"role",
 			"tabindex",
@@ -184,87 +348,180 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 			"aria-haspopup",
 			"aria-expanded",
 			"aria-controls",
-			"data-sbf-state"
+			"aria-describedby",
+			"data-sbf-state",
+			"onPointerenter",
+			"onPointerleave"
 		]));
 	}
-}), V = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", H = /* @__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: !1
+			default: void 0
+		},
+		keyboardNavigation: {
+			type: Boolean,
+			default: !0
 		}
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, p = c, h = L("SbFloating"), { isOpen: y, floatingId: b, side: S, align: C } = h, E = g(y.value), D = g(null), O = (e) => {
-			h.floating.value = e instanceof HTMLElement ? e : null;
-		}, k = (e) => {
-			D.value = e instanceof HTMLElement ? e : null;
-		}, A = n(() => ({
-			...h.floatingStyles.value,
+		let l = s, m = c, _ = w(), x = ie("SbFloating");
+		p(re(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 && oe(l.role) ? l.role : null;
+		});
+		let M = v(S.value), N = v(null), P = (e) => {
+			x.floating.value = e instanceof HTMLElement ? e : null;
+		}, F = (e) => {
+			N.value = ne(e);
+		}, ee = n(() => ({
+			...x.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
-		})), j = () => p("after-enter"), M = () => {
-			y.value || (E.value = !1), p("after-leave");
-		}, N = () => {
-			let e = D.value;
-			e && (e.querySelector("[autofocus]") ?? e.querySelector(V) ?? e).focus({ preventScroll: !0 });
+		})), te = () => ({
+			"aria-labelledby": l.role && Object.hasOwn(V, l.role) && _["aria-label"] == null ? E.value : void 0,
+			..._
+		}), I = n(() => l.autoFocus ?? (l.role !== "tooltip" && x.trigger.value !== "hover" && x.trigger.value !== "focus")), L = n(() => S.value && l.teleport !== !1 && l.role !== "tooltip"), R = {
+			[ae]: "",
+			tabindex: 0,
+			style: {
+				position: "fixed",
+				opacity: 0,
+				outline: "none",
+				pointerEvents: "none"
+			}
+		}, z = n(() => {
+			let { transition: e } = l;
+			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
+		}), B = (e) => e.setAttribute("data-sbf-state", "closed"), H = () => 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 = K(t);
+			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
+		}, q = (e) => {
+			W(e.relatedTarget) ? x.reference.value?.focus() : G("first");
+		}, J = (e) => {
+			if (!W(e.relatedTarget)) {
+				G("last");
+				return;
+			}
+			let t = x.reference.value;
+			((t && ue(t, (e) => x.contains(e))) ?? t)?.focus();
+		}, Y = () => {
+			let e = x.navigation.value;
+			return N.value && e ? se(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 = 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 && ue(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 || ce(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 === le(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 w(y, (e) => {
-			if (e) {
-				E.value = !0;
+		return D(S, (e) => {
+			let t = x.skipFocusReturn;
+			if (x.skipFocusReturn = !1, e) {
+				M.value = !0;
 				return;
 			}
-			let t = document.activeElement;
-			t && h.floating.value?.contains(t) && h.reference.value?.focus();
-		}), w(() => y.value && h.isPositioned.value, async (e) => {
-			e && l.autoFocus && (await d(), N());
-		}), (n, s) => (m(), r(e, {
-			to: l.teleportTo,
-			disabled: l.teleportDisabled
-		}, [E.value ? (m(), a("div", {
+			let n = document.activeElement;
+			!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 || I.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: O,
-			style: f(A.value)
-		}, [o(t, {
-			name: l.transition,
-			css: !!l.transition,
-			appear: "",
-			onAfterEnter: j,
-			onAfterLeave: M
-		}, {
-			default: T(() => [x(y) ? (m(), r(v(l.as), u({ key: 0 }, n.$attrs, {
-				id: x(b),
-				ref: k,
-				role: l.role,
-				tabindex: l.autoFocus ? -1 : void 0,
-				"data-sbf-state": x(y) ? "open" : "closed",
-				"data-sbf-side": x(S),
-				"data-sbf-align": x(C)
+			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)
+		}, [
+			L.value ? (g(), a("span", u({ key: 0 }, R, { onFocus: q }), null, 16)) : i("", !0),
+			o(t, u(z.value, {
+				appear: "",
+				onBeforeLeave: B,
+				onAfterEnter: H,
+				onAfterLeave: U
 			}), {
-				default: T(() => [_(n.$slots, "default")]),
+				default: k(() => [C(S) ? (g(), r(b(l.as), u({ key: 0 }, te(), {
+					id: C(T),
+					ref: F,
+					role: l.role ?? void 0,
+					tabindex: I.value ? -1 : void 0,
+					"data-sbf-state": "open",
+					"data-sbf-side": C(A),
+					"data-sbf-align": C(j),
+					onKeydown: pe
+				}), {
+					default: k(() => [y(n.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"id",
+					"role",
+					"tabindex",
+					"data-sbf-side",
+					"data-sbf-align"
+				])) : i("", !0)]),
 				_: 3
-			}, 16, [
-				"id",
-				"role",
-				"tabindex",
-				"data-sbf-state",
-				"data-sbf-side",
-				"data-sbf-align"
-			])) : i("", !0)]),
-			_: 3
-		}, 8, ["name", "css"])], 4)) : i("", !0)], 8, ["to", "disabled"]));
+			}, 16),
+			L.value ? (g(), a("span", u({ key: 1 }, R, { onFocus: J }), null, 16)) : i("", !0)
+		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { z as SbContainer, H as SbFloating, B as SbReference };
+export { Y as SbContainer, Z as SbFloating, X as SbReference };