sb-floating-panel-vue 5.2.0 → 5.3.0

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

@@ -1,7 +1,7 @@
-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";
+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 re = "data-sbf-focus-guard", I = [
+var L = "data-sbf-focus-guard", R = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled]):not([type=\"hidden\"])",
@@ -12,66 +12,66 @@ var re = "data-sbf-focus-guard", I = [
 	"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) {
+].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 R(e) {
-	let t = e instanceof Element ? e.closest(I) : null;
+function z(e) {
+	let t = e instanceof Element ? e.closest(R) : null;
 	return !!t && !t.closest("[inert]");
 }
-function ae(e) {
+function B(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);
+var ne = (e) => e.matches(R) && !e.closest("[inert]");
+function V(e) {
+	return [...e.querySelectorAll(R)].filter(ee);
 }
-function B(e, t) {
-	return z(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+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 se = (() => {
+var U = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 })();
-function V(e) {
-	se && 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 H = (e) => e.parent?.navigation.value === "menu";
-function U(e, 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 : B(r, (t) => e.contains(t)))?.focus({ preventScroll: !0 }), !0);
+	return !n || !r || r.contains(n) || !e.contains(n) ? !1 : ((t ? r : H(r, (t) => e.contains(t)))?.focus({ preventScroll: !0 }), !0);
 }
-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]--;
+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 le(e) {
-	let t = c(W, null);
+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 G = (e) => `${Math.max(0, e)}px`, K = (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 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({
+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"
@@ -79,47 +79,47 @@ function q(e) {
 			padding: t,
 			limiter: M()
 		}), o = [
-			N(x(e.offset)),
+			N(e.offset),
 			...r ? [i, a] : [a, i],
 			F({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = G(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", 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 : "";
+					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 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,
+		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
-	}), u = n(() => !!o.value.hide?.referenceHidden);
+	}), 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/components/SbContainer.vue?vue&type=script&setup=true&lang.ts
-var J = [], Y = {
+var Y = [], X = {
 	open: 300,
 	close: 150
-}, X = /* @__PURE__ */ s({
+}, se = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -144,7 +144,7 @@ var J = [], Y = {
 			default: !1
 		},
 		trigger: { default: "click" },
-		delay: { default: () => ({ ...Y }) },
+		delay: { default: () => ({ ...X }) },
 		closeOnEscape: {
 			type: Boolean,
 			default: !0
@@ -167,198 +167,195 @@ var J = [], Y = {
 	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;
-		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);
+		h(() => clearTimeout(u));
+		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 = t ? "open" : "close", a = typeof n == "number" ? n : n[r] ?? Y[r];
-			u = setTimeout(() => p(t, "hover"), a);
-		}, C = q({
+			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,
-			placement: () => i.placement,
-			strategy: () => i.strategy,
-			offset: () => i.offset,
-			padding: () => i.padding,
-			matchWidth: () => i.matchWidth,
-			hideWhenDetached: () => i.hideWhenDetached
-		}), D = /* @__PURE__ */ new Set(), O = c(W, null), k = {
-			...C,
-			isOpen: l,
-			disabled: b(i, "disabled"),
-			trigger: b(i, "trigger"),
+			disabled: x(i, "disabled"),
+			trigger: x(i, "trigger"),
 			floatingId: `${w()}-floating`,
 			referenceId: v(),
 			floatingRole: v("dialog"),
 			navigation: v(null),
 			focusRequest: v(null),
-			parent: O,
+			parent: A,
 			skipFocusReturn: !1,
 			parts: {
 				reference: 0,
 				floating: 0
 			},
 			isUnmounting: !1,
-			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))
+			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))
 		};
-		O && m(O.registerChild(k)), g(W, k), f(() => {
-			k.isUnmounting = !0, U(k, !1);
+		A && h(A.registerChild(j)), _(q, j), p(() => {
+			j.isUnmounting = !0, K(j, !1);
 		});
-		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(), p(!1, "escape")));
-		}, M = (e) => {
-			k.contains(e) || (k.skipFocusReturn = R(e), p(!1, "outside"));
-		}, N, P = (e) => {
-			if (N?.(), !i.closeOnClickOutside) return;
+		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) || p(!1, "focus-out"));
+		}, L = (e) => {
+			i.closeOnFocusOut && (j.contains(e.composedPath()[0] ?? e.target) || m(!1, "focus-out"));
 		};
 		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);
-			}));
+			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 = 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");
+			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: h,
-			close: _,
-			toggle: y,
-			update: C.update
-		}), (e, t) => te(e.$slots, "default", {
+			open: g,
+			close: b,
+			toggle: C,
+			update: O.update
+		}), (e, t) => y(e.$slots, "default", {
 			isOpen: l.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
+			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
 		});
 	}
-}), ue = {
+}), Z = {
 	dialog: "dialog",
 	alertdialog: "dialog",
 	menu: "menu",
 	listbox: "listbox",
 	tree: "tree",
 	grid: "grid"
-}, Z = {
+}, ce = {
 	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
 	listbox: "[role=\"option\"]"
-}, 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));
+}, 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 Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), pe = (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"
-}, me = /* @__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 = C(), a = le("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = ce(a, "reference", "SbReference"), ee = [
+		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"
-		], d = () => typeof t.as != "string" || ee.includes(t.as) || t.as === "a" && i.href != null, m = `${w()}-reference`, g = n(() => t.id ?? m);
+		], 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 = g.value;
-		}), p(() => {
+			a.referenceId.value = _.value;
+		}), m(() => {
 			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"));
+			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.skipFocusReturn = K(a, !1), a.setOpen(!1, "api"));
 		});
-		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 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" || 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());
+			(a.trigger.value === "focus" || B(t)) && a.setOpen(!0, "focus");
 		}, j = (e) => {
+			k() && !a.contains(e.relatedTarget) && a.setOpen(!1, "focus-out");
+		}, M = (e) => {
+			let t = a.floating.value, n = t && V(t)[0];
+			n && (e.preventDefault(), n.focus());
+		}, N = (e) => {
 			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
-				if (H(a)) {
+				if (G(a)) {
 					let t = e.currentTarget;
-					return e.key === pe(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;
 			}
-		}, M = (e) => {
-			if (e.key === "Tab" && !e.shiftKey && o.value && !H(a)) {
-				A(e);
+		}, P = (e) => {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !G(a)) {
+				M(e);
 				return;
 			}
-			let t = j(e);
-			t ? (e.preventDefault(), a.focusRequest.value = t, a.setOpen(!0, "trigger")) : d() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), b());
+			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) => (h(), r(y(t.as), {
-			id: g.value,
-			ref: v,
+		return (e, n) => (g(), r(b(t.as), {
+			id: _.value,
+			ref: x,
 			type: t.as === "button" ? "button" : void 0,
-			role: d() ? void 0 : "button",
-			tabindex: d() ? void 0 : S(s) ? -1 : 0,
+			role: f() ? void 0 : "button",
+			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": _.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,
+			"aria-haspopup": v.value,
+			"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: b,
-			onKeydown: M,
-			onFocusin: E,
-			onFocusout: k,
+			onClick: T,
+			onKeydown: P,
+			onFocusin: A,
+			onFocusout: j,
 			onPointerenter: S(a).hover,
 			onPointerleave: S(a).hover
 		}, {
-			default: O(() => [te(e.$slots, "default")]),
+			default: O(() => [y(e.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"id",
@@ -376,18 +373,18 @@ var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			"onPointerleave"
 		]));
 	}
-}), he = ":disabled, [aria-disabled=\"true\"], [aria-haspopup]:not([aria-haspopup=\"false\"])", ge = /* @__PURE__ */ s({
+}), pe = ":disabled, [aria-disabled=\"true\"], [aria-haspopup]:not([aria-haspopup=\"false\"])", me = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbFloating",
 	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
@@ -403,28 +400,28 @@ var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, g = c, _ = C(), b = le("SbFloating");
-		f(ce(b, "floating", "SbFloating")), f(() => {
-			b.isUnmounting || U(b, !0);
+		let l = s, _ = c, x = C(), w = ie("SbFloating");
+		p(re(w, "floating", "SbFloating")), p(() => {
+			w.isUnmounting || K(w, !0);
 		});
-		let { isOpen: x, floatingId: w, referenceId: T, side: k, align: A } = b;
+		let { isOpen: T, floatingId: k, referenceId: A, side: j, align: M } = w;
 		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.");
+			w.floatingRole.value = l.role, w.navigation.value = l.keyboardNavigation && le(l.role) ? l.role : null;
+		}), m(() => {
+			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 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,
+		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 }
-		})), 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]: "",
+		})), 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",
@@ -432,82 +429,79 @@ var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				outline: "none",
 				pointerEvents: "none"
 			}
-		}, ae = n(() => {
+		}, q = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), 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;
+		}), 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 = z(t);
+			let n = V(t);
 			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
-		}, J = (e) => {
-			K(e.relatedTarget) ? b.reference.value?.focus() : q("first");
-		}, Y = (e) => {
-			if (!K(e.relatedTarget)) {
-				q("last");
+		}, se = (e) => {
+			Y(e.relatedTarget) ? w.reference.value?.focus() : X("first");
+		}, fe = (e) => {
+			if (!Y(e.relatedTarget)) {
+				X("last");
 				return;
 			}
-			let t = b.reference.value;
-			((t && B(t, (e) => b.contains(e))) ?? t)?.focus();
-		}, X = (e) => {
+			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 = 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"));
+			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(L, (e, t, n) => {
-			e && typeof document < "u" && (document.addEventListener("keydown", X), n(() => document.removeEventListener("keydown", X)));
+		E(B, (e, t, n) => {
+			e && typeof document < "u" && (document.addEventListener("keydown", me), n(() => document.removeEventListener("keydown", me)));
 		}, { immediate: !0 });
-		let Z = () => {
-			let e = b.navigation.value;
-			return M.value && e ? fe(M.value, e) : [];
-		}, me = {
+		let he = () => {
+			let e = w.navigation.value;
+			return P.value && e ? ue(P.value, e) : [];
+		}, ge = {
 			menu: "[role=\"menuitem\"]",
 			listbox: "[role=\"option\"]"
-		}, ge = {
-			menu: "role=\"menuitem\", \"menuitemcheckbox\" or \"menuitemradio\"",
-			listbox: "role=\"option\""
 		}, _e = !1, ve = (e) => {
-			let t = b.navigation.value;
+			let t = w.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}`));
+			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 = M.value;
+			let t = P.value;
 			if (!t) return;
-			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 });
+			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 = b.focusRequest.value;
-			return b.focusRequest.value = null, e;
+			let e = w.focusRequest.value;
+			return w.focusRequest.value = null, e;
 		}, $ = "", xe;
-		m(() => clearTimeout(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 = [b];
-			for (; H(e[e.length - 1]);) e.push(e[e.length - 1].parent);
+			let e = [w];
+			for (; G(e[e.length - 1]);) e.push(e[e.length - 1].parent);
 			return e;
 		}, we = (e, t, n) => {
 			for (let t of e) t.skipFocusReturn = !0, t.setOpen(!1, n);
 			t?.focus({ preventScroll: !0 });
 		}, Te = (e) => {
-			let t = Ce(), n = t[t.length - 1], r = n.reference.value, i = e ? r : (r && B(r, (e) => n.contains(e))) ?? r;
+			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 = M.value;
-			if (!l.closeOnSelect || e.defaultPrevented || !n || !de(t)) return;
-			let r = e.target.closest(me[t]);
-			if (!r || r.closest(`[role="${t}"]`) !== n || r.matches(he) || t === "listbox" && n.getAttribute("aria-multiselectable") === "true") return;
-			let i = t === "menu" ? Ce() : [b];
+			let { role: t } = l, n = P.value;
+			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" ? Ce() : [w];
 			we(i, i[i.length - 1].reference.value, "select");
 		}, De = (e) => {
-			let t = b.navigation.value;
+			let t = w.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;
+			let n = he(), r = n.findIndex((t) => t.contains(e.target)), i = n.length - 1, a = t === "menu", o;
 			if ([
 				"ArrowDown",
 				"ArrowUp",
@@ -520,8 +514,8 @@ var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			else if (e.key === "Tab" && t === "menu") {
 				e.preventDefault(), Te(e.shiftKey);
 				return;
-			} else if (t === "menu" && H(b) && M.value && e.key === pe(M.value).close) {
-				e.preventDefault(), b.setOpen(!1, "escape");
+			} 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 !== " " || $)) e.preventDefault(), o = Se(n, r, e.key);
 			else if ((e.key === "Enter" || e.key === " ") && e.target === n[r]) {
@@ -532,49 +526,49 @@ var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			}
 			o && (e.preventDefault(), o.focus());
 		};
-		return E(x, (e) => {
-			let t = b.skipFocusReturn;
-			if (b.skipFocusReturn = !1, e) {
-				j.value = !0;
+		return E(T, (e) => {
+			let t = w.skipFocusReturn;
+			if (w.skipFocusReturn = !1, e) {
+				N.value = !0;
 				return;
 			}
 			let n = document.activeElement;
-			!t && n && b.floating.value?.contains(n) && b.reference.value?.focus({ preventScroll: !0 });
-		}), E(() => x.value && b.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 = 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, {
+			(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
-		}, [j.value ? (h(), a("div", {
+		}, [N.value ? (g(), a("div", {
 			key: 0,
-			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)
+			ref: F,
+			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)
 		}, [
-			L.value ? (h(), a("span", u({ key: 0 }, R, { onFocus: J }), null, 16)) : i("", !0),
-			o(t, u(ae.value, {
+			B.value ? (g(), a("span", u({ key: 0 }, U, { onFocus: se }), null, 16)) : i("", !0),
+			o(t, u(q.value, {
 				appear: "",
-				onBeforeLeave: se,
-				onAfterEnter: W,
-				onAfterLeave: G
+				onBeforeLeave: J,
+				onAfterEnter: ae,
+				onAfterLeave: oe
 			}), {
-				default: O(() => [S(x) ? (h(), r(y(l.as), u({ key: 0 }, ne(), {
-					id: S(w),
-					ref: P,
+				default: O(() => [S(T) ? (g(), r(b(l.as), u({ key: 0 }, ee(), {
+					id: S(k),
+					ref: I,
 					role: l.role ?? void 0,
-					tabindex: I.value ? -1 : void 0,
+					tabindex: z.value ? -1 : void 0,
 					"data-sbf-state": "open",
-					"data-sbf-side": S(k),
-					"data-sbf-align": S(A),
+					"data-sbf-side": S(j),
+					"data-sbf-align": S(M),
 					onKeydown: De,
 					onClick: Ee
 				}), {
-					default: O(() => [te(n.$slots, "default")]),
+					default: O(() => [y(n.$slots, "default")]),
 					_: 3
 				}, 16, [
 					"id",
@@ -585,22 +579,22 @@ var Q = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			L.value ? (h(), a("span", u({ key: 1 }, R, { onFocus: Y }), 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 _e() {
-	let e = c(W, null);
+function he() {
+	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: _(t),
+		isOpen: t,
 		open: n,
 		close: r,
 		toggle: i
 	};
 }
 //#endregion
-export { X as SbContainer, ge as SbFloating, me as SbReference, _e as useSbFloating };
+export { se as SbContainer, me as SbFloating, fe as SbReference, he as useSbFloating };