sb-floating-panel-vue 5.0.1 → 5.0.3

package/README.md

@@ -153,7 +153,7 @@ The trigger the panel is anchored to.
 
 | Prop           | Type                  | Default        | Description                                                                                                  |
 |----------------|-----------------------|----------------|--------------------------------------------------------------------------------------------------------------|
-| `as`           | `string \| Component` | `'button'`     | Tag or component to render. `button` gets `type="button"`; `a` with `href` and components keep their own semantics; any other tag (also `a` without `href`) gets `role="button"`, `tabindex="0"` and Enter/Space |
+| `as`           | `string \| Component` | `'button'`     | Tag or component to render. `button` gets `type="button"`; form controls (`input`, `textarea`, `select`), `a` with `href` and components keep their own semantics; any other tag (also `a` without `href`) gets `role="button"`, `tabindex="0"` and Enter/Space. A text field opens the panel on click without closing it, and keeps focus (see [Text field references](#text-field-references)) |
 | `id`           | `string`              | generated      | `id` of the element, used to name the panel                                                                  |
 | `ariaHaspopup` | `'dialog' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'true' \| 'false'` | follows `role` | Value of `aria-haspopup`. When unset it follows the `role` of the panel (`alertdialog` gives `dialog`) and is left out for other roles |
 
@@ -172,7 +172,7 @@ The panel, teleported to `body`. It is rendered while open and stays mounted unt
 | `transition`         | `string \| TransitionProps`      | —          | Name of a Vue `<Transition>` defined in your CSS, or an object of `<Transition>` props (e.g. Tailwind classes). No animation when unset |
 | `teleport`           | `string \| HTMLElement \| false` | `'body'`   | Teleport target (selector or element); `false` renders the panel in place |
 | `zIndex`             | `number \| string`               | —          | `z-index` of the positioned wrapper. Use this, not a `z-*` class on the panel (see [Stacking](#stacking)) |
-| `autoFocus`          | `boolean`                        | `true`, `false` with `role="tooltip"` or the `hover` / `focus` trigger | Once positioned, focuses the first `[autofocus]` or focusable element inside, else the panel itself (a menu: its first item; a listbox: its selected option) |
+| `autoFocus`          | `boolean`                        | `true`, `false` with `role="tooltip"`, the `hover` / `focus` trigger or a text field reference | Once positioned, focuses the first `[autofocus]` or focusable element inside, else the panel itself (a menu: its first item; a listbox: its selected option) |
 | `keyboardNavigation` | `boolean`                        | `true`     | Handles the keyboard model of `role="menu"` and `role="listbox"` panels (see [Keyboard](#keyboard)). No effect with other roles |
 
 | Event         | Description                                                    |
@@ -227,6 +227,7 @@ import type {
   - Moving focus outside (e.g. tabbing past the last element) closes it.
   - A container nested inside a panel counts as part of it.
 - **What is up to you.** The library does not implement the keyboard model of `tree` and `grid` panels, nor selection: a listbox option or a menu item does what its `click` handler does (e.g. set `aria-selected` and close the panel). Use valid structure: items directly inside the `menu` / `listbox`, or inside `ul` / `li` with `role="none"`.
+- <a id="text-field-references"></a>**Text field references.** `<SbReference as="input">` (or `textarea`) stays a text field: no `role="button"`, Enter and Space type as usual, a click opens the panel without closing it, and focus stays in the field when the panel opens. The [combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) (autocomplete with focus kept in the field and `aria-activedescendant`) is not supported: with a `menu` or `listbox` panel the arrow keys move focus into the panel, and the console warns about it in development.
 
 ---
 
@@ -356,7 +357,7 @@ SbContainer ── provides the state ──┬─▶ SbReference
 - The lookup follows the component tree, not the DOM, so it keeps working although `SbFloating` is teleported to `body`.
 - They can sit at any depth inside the container slot, also inside your own components.
 - Used outside an `SbContainer`, they throw: `[sb-floating-panel-vue] <SbFloating> must be used inside <SbContainer>.`
-- In development, the console warns about a second `SbReference` or `SbFloating` in the same container and about an `as` component that renders no single root element. The warnings depend on `process.env.NODE_ENV`, which your bundler replaces: they are left out of production builds.
+- In development, the console warns about a second `SbReference` or `SbFloating` in the same container about an `as` component that renders no single root element, about a text field reference of a `menu` or `listbox` panel, about a `tooltip` opened by click, and, the first time the arrow keys look for them, about a `menu` or `listbox` with no items or with items that cannot take focus. The warnings depend on `process.env.NODE_ENV`, which your bundler replaces: they are left out of production builds.
 
 ### Nested containers
 

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

@@ -1,34 +1,34 @@
 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";
+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/utils/warn.ts
-var L = (() => {
+var I = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 })();
-function R(e) {
-	L && console.warn(`[sb-floating-panel-vue] ${e}`);
+function L(e) {
+	I && 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 R = Symbol("SbFloatingContext");
+function ne(e, t, n) {
+	return ++e.parts[t] > 1 && L(`<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);
+function z(e) {
+	let t = c(R, null);
 	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
 	return t;
 }
 //#endregion
 //#region src/composables/useSbFloatingPanel.ts
-var H = (e) => `${Math.max(0, e)}px`, te = (e, t) => {
+var B = (e) => `${Math.max(0, e)}px`, V = (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 ne(e) {
+function re(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,
@@ -43,15 +43,15 @@ function ne(e) {
 			ee({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = H(e.reference.width);
+					let { style: o } = t.floating, s = B(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 : "";
+					o.setProperty("--sbf-transform-origin", V(a, c)), o.setProperty("--sbf-available-width", B(r)), o.setProperty("--sbf-available-height", B(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
 				}
 			})
 		];
 		return S(e.hideWhenDetached) && o.push(M({ padding: t })), o;
-	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = I(t, r, {
+	}), { 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),
@@ -75,7 +75,7 @@ function ne(e) {
 }
 //#endregion
 //#region src/utils/dom.ts
-var re = "data-sbf-focus-guard", U = [
+var ie = "data-sbf-focus-guard", H = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled]):not([type=\"hidden\"])",
@@ -86,24 +86,25 @@ var re = "data-sbf-focus-guard", U = [
 	"video[controls]",
 	"[tabindex]",
 	"[contenteditable=\"true\"]"
-].join(","), W = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
-function ie(e) {
+].join(","), ae = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function U(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;
+function oe(e) {
+	let t = e instanceof Element ? e.closest(H) : null;
 	return !!t && !t.closest("[inert]");
 }
-function K(e) {
-	return [...e.querySelectorAll(U)].filter(W);
+var se = (e) => e.matches(H) && !e.closest("[inert]");
+function W(e) {
+	return [...e.querySelectorAll(H)].filter(ae);
 }
-function ae(e, t) {
-	return K(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+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 q = [], oe = /* @__PURE__ */ s({
+var K = [], q = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -166,7 +167,7 @@ var q = [], oe = /* @__PURE__ */ s({
 				close: n
 			} : n, a = (t ? r.open : r.close) ?? (t ? 300 : 150);
 			u = setTimeout(() => d(t), a);
-		}, S = ne({
+		}, S = re({
 			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
@@ -174,7 +175,7 @@ var q = [], oe = /* @__PURE__ */ s({
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), w = /* @__PURE__ */ new Set(), O = c(z, null), k = {
+		}), w = /* @__PURE__ */ new Set(), O = c(R, null), k = {
 			...S,
 			isOpen: l,
 			disabled: x(i, "disabled"),
@@ -198,14 +199,14 @@ var q = [], oe = /* @__PURE__ */ s({
 			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);
+		O && h(O.registerChild(k)), _(R, 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];
+			return K.findLast((e) => e.contains(t)) ?? K[K.length - 1];
 		}, j = (e) => {
 			e.key === "Escape" && A(e) === k && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), m()));
 		}, M = (e) => {
-			k.contains(e) || (k.skipFocusReturn = G(e), m());
+			k.contains(e) || (k.skipFocusReturn = oe(e), m());
 		}, N, P = (e) => {
 			if (N?.(), !i.closeOnClickOutside) return;
 			let t = e.composedPath()[0] ?? e.target;
@@ -224,8 +225,8 @@ var q = [], oe = /* @__PURE__ */ s({
 			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
 		};
 		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);
+			e && typeof document < "u" && (K.push(k), document.addEventListener("keydown", j), document.addEventListener("pointerdown", P, !0), document.addEventListener("focusin", F), n(() => {
+				document.removeEventListener("keydown", j), document.removeEventListener("pointerdown", P, !0), document.removeEventListener("focusin", F), N?.(), K.splice(K.indexOf(k), 1);
 			}));
 		}, { immediate: !0 }), D(l, (e) => o(e ? "open" : "close")), D(S.referenceHidden, (e) => {
 			e && i.hideWhenDetached === "close" && m();
@@ -261,17 +262,17 @@ var q = [], oe = /* @__PURE__ */ s({
 }, Y = {
 	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
 	listbox: "[role=\"option\"]"
-}, se = (e) => !!e && Object.hasOwn(Y, e);
-function ce(e, t) {
+}, ce = (e) => !!e && Object.hasOwn(Y, e);
+function le(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" ? {
+var X = (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({
+}, de = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
@@ -279,58 +280,64 @@ var le = (e) => e instanceof Element && !!e.closest("input, textarea, select, [c
 		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		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);
+		let t = e, i = w(), a = z("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = ne(a, "reference", "SbReference"), d = [
+			"button",
+			"input",
+			"textarea",
+			"select"
+		], f = () => typeof t.as != "string" || d.includes(t.as) || t.as === "a" && i.href != null, h = `${T()}-reference`, _ = n(() => t.id ?? h);
 		O(() => {
-			a.referenceId.value = h.value;
+			a.referenceId.value = _.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.");
+			let e = a.reference.value;
+			e ? X(e) && a.navigation.value && L(`<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.`) : L("<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();
+			a.referenceId.value === _.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && a.close();
 		});
-		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();
-		}, 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();
+		let v = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(J, l.value) ? J[l.value] : void 0)), x = (e) => {
+			a.reference.value = U(e);
+		}, S = () => {
+			a.trigger.value === "click" && (X(a.reference.value) ? a.open() : a.toggle());
+		}, E = n(() => l.value === "tooltip"), D = () => a.trigger.value === "hover" || a.trigger.value === "focus", A = () => a.parent?.navigation.value === "menu", j = (e) => {
+			D() && !A() && !a.contains(e.relatedTarget) && a.open();
 		}, M = (e) => {
-			let t = a.floating.value, n = t && K(t)[0];
-			n && (e.preventDefault(), n.focus());
+			D() && !a.contains(e.relatedTarget) && a.close();
 		}, N = (e) => {
+			let t = a.floating.value, n = t && W(t)[0];
+			n && (e.preventDefault(), n.focus());
+		}, P = (e) => {
 			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
-				if (D()) {
+				if (A()) {
 					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);
+		}, F = (e) => {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !A()) {
+				N(e);
 				return;
 			}
-			let t = N(e);
-			t ? (e.preventDefault(), a.focusRequest.value = t, a.open()) : d() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), x());
+			let t = P(e);
+			t ? (e.preventDefault(), a.focusRequest.value = t, a.open()) : f() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), S());
 		};
 		return (e, n) => (g(), r(b(t.as), {
-			id: h.value,
-			ref: v,
+			id: _.value,
+			ref: x,
 			type: t.as === "button" ? "button" : void 0,
-			role: d() ? void 0 : "button",
-			tabindex: d() ? void 0 : C(s) ? -1 : 0,
+			role: f() ? void 0 : "button",
+			tabindex: f() ? 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,
+			"aria-haspopup": v.value,
+			"aria-expanded": E.value ? void 0 : C(o) ? "true" : "false",
+			"aria-controls": C(o) && !E.value ? C(c) : void 0,
+			"aria-describedby": C(o) && E.value ? C(c) : void 0,
 			"data-sbf-state": C(o) ? "open" : "closed",
-			onClick: x,
-			onKeydown: P,
-			onFocusin: A,
-			onFocusout: j,
+			onClick: S,
+			onKeydown: F,
+			onFocusin: j,
+			onFocusout: M,
 			onPointerenter: C(a).hover,
 			onPointerleave: C(a).hover
 		}, {
@@ -375,24 +382,26 @@ var le = (e) => e instanceof Element && !!e.closest("input, textarea, select, [c
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		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;
+		let l = s, _ = c, x = w(), S = z("SbFloating");
+		p(ne(S, "floating", "SbFloating"));
+		let { isOpen: T, floatingId: E, referenceId: A, side: j, align: M } = S;
 		O(() => {
-			x.floatingRole.value = l.role, x.navigation.value = l.keyboardNavigation && se(l.role) ? l.role : null;
+			S.floatingRole.value = l.role, S.navigation.value = l.keyboardNavigation && ce(l.role) ? l.role : null;
+		}), m(() => {
+			l.role === "tooltip" && S.trigger.value === "click" && L("<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 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,
+		let N = v(T.value), P = v(null), F = (e) => {
+			S.floating.value = e instanceof HTMLElement ? e : null;
+		}, ee = (e) => {
+			P.value = U(e);
+		}, te = n(() => ({
+			...S.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
 		})), 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]: "",
+			"aria-labelledby": l.role && Object.hasOwn(J, l.role) && x["aria-label"] == null ? A.value : void 0,
+			...x
+		}), R = n(() => l.autoFocus ?? (l.role !== "tooltip" && S.trigger.value !== "hover" && S.trigger.value !== "focus" && !X(S.reference.value))), B = n(() => T.value && l.teleport !== !1 && l.role !== "tooltip"), V = {
+			[ie]: "",
 			tabindex: 0,
 			style: {
 				position: "fixed",
@@ -400,63 +409,76 @@ var le = (e) => e instanceof Element && !!e.closest("input, textarea, select, [c
 				outline: "none",
 				pointerEvents: "none"
 			}
-		}, H = n(() => {
+		}, re = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), 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;
+		}), H = (e) => e.setAttribute("data-sbf-state", "closed"), ae = () => _("after-enter"), oe = () => {
+			T.value || (N.value = !1), _("after-leave");
+		}, K = (e) => e instanceof Node && !!P.value?.contains(e), q = (e) => {
+			let t = P.value;
 			if (!t) return;
-			let n = K(t);
+			let n = W(t);
 			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
-		}, q = (e) => {
-			W(e.relatedTarget) ? x.reference.value?.focus() : G("first");
-		}, oe = (e) => {
-			if (!W(e.relatedTarget)) {
-				G("last");
+		}, Y = (e) => {
+			K(e.relatedTarget) ? S.reference.value?.focus() : q("first");
+		}, de = (e) => {
+			if (!K(e.relatedTarget)) {
+				q("last");
 				return;
 			}
-			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 });
+			let t = S.reference.value;
+			((t && G(t, (e) => S.contains(e))) ?? t)?.focus();
 		}, Z = () => {
-			let e = x.focusRequest.value;
-			return x.focusRequest.value = null, e;
+			let e = S.navigation.value;
+			return P.value && e ? le(P.value, e) : [];
+		}, fe = {
+			menu: "role=\"menuitem\", \"menuitemcheckbox\" or \"menuitemradio\"",
+			listbox: "role=\"option\""
+		}, pe = !1, me = (e) => {
+			let t = S.navigation.value;
+			if (pe || !t) return;
+			let n = e.length ? e.every(se) ? 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 ${fe[t]} and must not be disabled.`;
+			n && (pe = !0, L(`<SbFloating role="${t}"> ${n}`));
+		}, he = (e) => {
+			let t = P.value;
+			if (!t) return;
+			let n = Z();
+			e && me(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 });
+		}, ge = () => {
+			let e = S.focusRequest.value;
+			return S.focusRequest.value = null, e;
 		}, Q = "", $;
 		h(() => clearTimeout($));
-		let de = (e, t, n) => {
+		let _e = (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];
+		}, ve = (e) => {
+			let t = S, 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;
+			let r = t.reference.value, i = e ? r : (r && G(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];
+		}, ye = (e) => {
+			let t = S.navigation.value;
+			if (!t || e.defaultPrevented || e.isComposing || X(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) && me(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(), fe(e.shiftKey);
+				e.preventDefault(), ve(e.shiftKey);
 				return;
-			} else if (t === "menu" && x.parent?.navigation.value === "menu" && N.value && e.key === ue(N.value).close) {
-				e.preventDefault(), x.close();
+			} else if (t === "menu" && S.parent?.navigation.value === "menu" && P.value && e.key === ue(P.value).close) {
+				e.preventDefault(), S.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.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key !== " " || Q)) e.preventDefault(), o = _e(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;
@@ -465,46 +487,46 @@ var le = (e) => e instanceof Element && !!e.closest("input, textarea, select, [c
 			}
 			o && (e.preventDefault(), o.focus());
 		};
-		return D(S, (e) => {
-			let t = x.skipFocusReturn;
-			if (x.skipFocusReturn = !1, e) {
-				M.value = !0;
+		return D(T, (e) => {
+			let t = S.skipFocusReturn;
+			if (S.skipFocusReturn = !1, e) {
+				N.value = !0;
 				return;
 			}
 			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) => {
+			!t && n && S.floating.value?.contains(n) && S.reference.value?.focus({ preventScroll: !0 });
+		}), D(() => T.value && S.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());
+			let t = ge();
+			(t || R.value) && (await d(), he(t));
+		}), D(S.focusRequest, (e) => {
+			e && T.value && S.isPositioned.value && he(ge());
 		}), (n, s) => (g(), r(e, {
 			to: l.teleport || "body",
 			disabled: l.teleport === !1
-		}, [M.value ? (g(), a("div", {
+		}, [N.value ? (g(), a("div", {
 			key: 0,
-			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)
+			ref: F,
+			style: f(te.value),
+			onPointerenter: s[0] ||= (...e) => C(S).hover && C(S).hover(...e),
+			onPointerleave: s[1] ||= (...e) => C(S).hover && C(S).hover(...e)
 		}, [
-			R.value ? (g(), a("span", u({ key: 0 }, z, { onFocus: q }), null, 16)) : i("", !0),
-			o(t, u(H.value, {
+			B.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: Y }), null, 16)) : i("", !0),
+			o(t, u(re.value, {
 				appear: "",
-				onBeforeLeave: te,
-				onAfterEnter: ne,
-				onAfterLeave: U
+				onBeforeLeave: H,
+				onAfterEnter: ae,
+				onAfterLeave: oe
 			}), {
-				default: k(() => [C(S) ? (g(), r(b(l.as), u({ key: 0 }, I(), {
-					id: C(T),
-					ref: F,
+				default: k(() => [C(T) ? (g(), r(b(l.as), u({ key: 0 }, I(), {
+					id: C(E),
+					ref: ee,
 					role: l.role ?? void 0,
-					tabindex: L.value ? -1 : void 0,
+					tabindex: R.value ? -1 : void 0,
 					"data-sbf-state": "open",
-					"data-sbf-side": C(A),
-					"data-sbf-align": C(j),
-					onKeydown: pe
+					"data-sbf-side": C(j),
+					"data-sbf-align": C(M),
+					onKeydown: ye
 				}), {
 					default: k(() => [y(n.$slots, "default")]),
 					_: 3
@@ -517,9 +539,9 @@ var le = (e) => e instanceof Element && !!e.closest("input, textarea, select, [c
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			R.value ? (g(), a("span", u({ key: 1 }, z, { onFocus: oe }), null, 16)) : i("", !0)
+			B.value ? (g(), a("span", u({ key: 1 }, V, { onFocus: de }), null, 16)) : i("", !0)
 		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { oe as SbContainer, Z as SbFloating, X as SbReference };
+export { q as SbContainer, Z as SbFloating, de as SbReference };

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

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@floating-ui/vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@floating-ui/vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SbFloatingPanelVue={},e.Vue,e.FloatingUIVue))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=(()=>{try{return process.env.NODE_ENV!==`production`}catch{return!1}})();function i(e){r&&console.warn(`[sb-floating-panel-vue] ${e}`)}var a=Symbol(`SbFloatingContext`);function o(e,t,n){return++e.parts[t]>1&&i(`<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 s(e){let n=(0,t.inject)(a,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var c=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 u(e){let r=(0,t.ref)(null),i=(0,t.ref)(null),a=(0,t.computed)(()=>{let r=(0,t.toValue)(e.padding),i=(0,t.toValue)(e.matchWidth),a=(0,t.toValue)(e.placement).includes(`-`),o=(0,n.flip)({padding:r,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),s=(0,n.shift)({padding:r,limiter:(0,n.limitShift)()}),u=[(0,n.offset)((0,t.toValue)(e.offset)),...a?[o,s]:[s,o],(0,n.size)({padding:r,apply({rects:e,elements:t,availableWidth:n,availableHeight:r,placement:a}){let{style:o}=t.floating,s=c(e.reference.width);o.setProperty(`--sbf-reference-width`,s);let u=getComputedStyle(t.floating).direction===`rtl`;o.setProperty(`--sbf-transform-origin`,l(a,u)),o.setProperty(`--sbf-available-width`,c(n)),o.setProperty(`--sbf-available-height`,c(r)),o.width=i===!0?s:``,o.minWidth=i===`min`?s:``}})];return(0,t.toValue)(e.hideWhenDetached)&&u.push((0,n.hide)({padding:r})),u}),{floatingStyles:o,middlewareData:s,placement:u,isPositioned:d,update:f}=(0,n.useFloating)(r,i,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:a,whileElementsMounted:n.autoUpdate}),p=(0,t.computed)(()=>!!s.value.hide?.referenceHidden);return{reference:r,floating:i,floatingStyles:(0,t.computed)(()=>({...o.value,...p.value?{visibility:`hidden`}:{}})),placement:u,side:(0,t.computed)(()=>u.value.split(`-`)[0]),align:(0,t.computed)(()=>u.value.split(`-`)[1]),isPositioned:d,referenceHidden:p,update:f}}var d=`data-sbf-focus-guard`,f=[`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(`,`),p=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function m(e){let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;return t instanceof HTMLElement?t:null}function h(e){let t=e instanceof Element?e.closest(f):null;return!!t&&!t.closest(`[inert]`)}function g(e){return[...e.querySelectorAll(f)].filter(p)}function _(e,t){return g(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var v=[],y=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbContainer`,props:(0,t.mergeModels)({placement:{default:`bottom-start`},strategy:{default:`absolute`},offset:{default:8},padding:{default:8},matchWidth:{type:[Boolean,String],default:!1},hideWhenDetached:{type:[Boolean,String],default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},delay:{default:()=>({open:300,close:150})},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},closeOnFocusOut:{type:Boolean,default:!0}},{open:{type:Boolean,default:void 0},openModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:open`]),setup(e,{expose:n,emit:r}){let i=e,o=(0,t.useModel)(e,`open`),s=r,c=i.defaultOpen,l=(0,t.computed)(()=>!i.disabled&&(o.value??c)),d;(0,t.onScopeDispose)(()=>clearTimeout(d));let f=e=>{clearTimeout(d),!(e&&i.disabled)&&e!==l.value&&(o.value=e)},p=()=>f(!0),m=()=>f(!1),g=()=>f(!l.value),_=e=>{if(e.pointerType===`touch`||(x?.hover(e),i.trigger!==`hover`))return;let t=e.type===`pointerenter`||S.contains(e.relatedTarget);if(clearTimeout(d),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);d=setTimeout(()=>f(t),a)},y=u({isOpen:l,placement:()=>i.placement,strategy:()=>i.strategy,offset:()=>i.offset,padding:()=>i.padding,matchWidth:()=>i.matchWidth,hideWhenDetached:()=>i.hideWhenDetached}),b=new Set,x=(0,t.inject)(a,null),S={...y,isOpen:l,disabled:(0,t.toRef)(i,`disabled`),trigger:(0,t.toRef)(i,`trigger`),floatingId:`${(0,t.useId)()}-floating`,referenceId:(0,t.ref)(),floatingRole:(0,t.ref)(`dialog`),navigation:(0,t.ref)(null),focusRequest:(0,t.ref)(null),parent:x,skipFocusReturn:!1,parts:{reference:0,floating:0},isUnmounting:!1,open:p,close:m,toggle:g,hover:_,contains:e=>e instanceof Node?y.reference.value?.contains(e)||y.floating.value?.contains(e)?!0:[...b].some(t=>t.contains(e)):!1,registerChild:e=>(b.add(e),()=>b.delete(e))};x&&(0,t.onScopeDispose)(x.registerChild(S)),(0,t.provide)(a,S),(0,t.onBeforeUnmount)(()=>S.isUnmounting=!0);let C=e=>{let t=e.composedPath()[0]??e.target;return v.findLast(e=>e.contains(t))??v[v.length-1]},w=e=>{e.key===`Escape`&&C(e)===S&&(!i.closeOnEscape||e.defaultPrevented||e.isComposing||(e.preventDefault(),m()))},T=e=>{S.contains(e)||(S.skipFocusReturn=h(e),m())},E,D=e=>{if(E?.(),!i.closeOnClickOutside)return;let t=e.composedPath()[0]??e.target;if(e.pointerType!==`touch`){T(t);return}if(S.contains(t))return;let n=e=>{E?.(),T(e.composedPath()[0]??e.target)};document.addEventListener(`click`,n,!0),E=()=>{document.removeEventListener(`click`,n,!0),E=void 0}},O=e=>{i.closeOnFocusOut&&(S.contains(e.composedPath()[0]??e.target)||m())};return(0,t.watch)(l,(e,t,n)=>{e&&typeof document<`u`&&(v.push(S),document.addEventListener(`keydown`,w),document.addEventListener(`pointerdown`,D,!0),document.addEventListener(`focusin`,O),n(()=>{document.removeEventListener(`keydown`,w),document.removeEventListener(`pointerdown`,D,!0),document.removeEventListener(`focusin`,O),E?.(),v.splice(v.indexOf(S),1)}))},{immediate:!0}),(0,t.watch)(l,e=>s(e?`open`:`close`)),(0,t.watch)(y.referenceHidden,e=>{e&&i.hideWhenDetached===`close`&&m()}),(0,t.watch)(()=>i.disabled,e=>{e&&(o.value??c)&&(o.value=!1)}),n({get isOpen(){return l.value},open:p,close:m,toggle:g,update:y.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:l.value,open:p,close:m,toggle:g,placement:(0,t.unref)(y).placement.value,side:(0,t.unref)(y).side.value,align:(0,t.unref)(y).align.value,floatingId:S.floatingId,referenceId:S.referenceId.value})}}),b={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},x={menu:`[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]`,listbox:`[role="option"]`},S=e=>!!e&&Object.hasOwn(x,e);function C(e,t){return[...e.querySelectorAll(x[t])].filter(n=>n.closest(`[role="${t}"]`)===e&&!n.matches(`:disabled`)&&(n.checkVisibility?.()??!0))}var w=e=>e instanceof Element&&!!e.closest(`input, textarea, select, [contenteditable]:not([contenteditable="false"])`),T=e=>getComputedStyle(e).direction===`rtl`?{open:`ArrowLeft`,close:`ArrowRight`}:{open:`ArrowRight`,close:`ArrowLeft`},E=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},id:{default:void 0},ariaHaspopup:{default:void 0}},setup(e){let n=e,r=(0,t.useAttrs)(),a=s(`SbReference`),{isOpen:c,disabled:l,floatingId:u,floatingRole:d}=a,f=o(a,`reference`,`SbReference`),p=()=>typeof n.as!=`string`||n.as===`button`||n.as===`a`&&r.href!=null,h=`${(0,t.useId)()}-reference`,_=(0,t.computed)(()=>n.id??h);(0,t.watchEffect)(()=>{a.referenceId.value=_.value}),(0,t.onMounted)(()=>{a.reference.value||i("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.")}),(0,t.onBeforeUnmount)(()=>{a.referenceId.value===_.value&&(a.referenceId.value=void 0),f(),!a.parts.reference&&!a.isUnmounting&&a.close()});let v=(0,t.computed)(()=>n.ariaHaspopup??(d.value&&Object.hasOwn(b,d.value)?b[d.value]:void 0)),y=e=>{a.reference.value=m(e)},x=()=>{a.trigger.value===`click`&&a.toggle()},S=(0,t.computed)(()=>d.value===`tooltip`),C=()=>a.trigger.value===`hover`||a.trigger.value===`focus`,w=()=>a.parent?.navigation.value===`menu`,E=e=>{C()&&!w()&&!a.contains(e.relatedTarget)&&a.open()},D=e=>{C()&&!a.contains(e.relatedTarget)&&a.close()},O=e=>{let t=a.floating.value,n=t&&g(t)[0];n&&(e.preventDefault(),n.focus())},k=e=>{if(a.navigation.value&&!l.value&&a.trigger.value!==`manual`){if(w()){let t=e.currentTarget;return e.key===T(t).open?`first`:void 0}return e.key===`ArrowDown`?`first`:e.key===`ArrowUp`?`last`:void 0}},A=e=>{if(e.key===`Tab`&&!e.shiftKey&&c.value&&!w()){O(e);return}let t=k(e);t?(e.preventDefault(),a.focusRequest.value=t,a.open()):p()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),x())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{id:_.value,ref:y,type:n.as===`button`?`button`:void 0,role:p()?void 0:`button`,tabindex:p()?void 0:(0,t.unref)(l)?-1:0,disabled:n.as===`button`&&(0,t.unref)(l)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(l)?`true`:void 0,"aria-haspopup":v.value,"aria-expanded":S.value?void 0:(0,t.unref)(c)?`true`:`false`,"aria-controls":(0,t.unref)(c)&&!S.value?(0,t.unref)(u):void 0,"aria-describedby":(0,t.unref)(c)&&S.value?(0,t.unref)(u):void 0,"data-sbf-state":(0,t.unref)(c)?`open`:`closed`,onClick:x,onKeydown:A,onFocusin:E,onFocusout:D,onPointerenter:(0,t.unref)(a).hover,onPointerleave:(0,t.unref)(a).hover},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`id`,`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`aria-describedby`,`data-sbf-state`,`onPointerenter`,`onPointerleave`]))}}),D=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{default:void 0},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(e,{emit:n}){let r=e,i=n,a=(0,t.useAttrs)(),c=s(`SbFloating`);(0,t.onBeforeUnmount)(o(c,`floating`,`SbFloating`));let{isOpen:l,floatingId:u,referenceId:f,side:p,align:h}=c;(0,t.watchEffect)(()=>{c.floatingRole.value=r.role,c.navigation.value=r.keyboardNavigation&&S(r.role)?r.role:null});let v=(0,t.ref)(l.value),y=(0,t.ref)(null),x=e=>{c.floating.value=e instanceof HTMLElement?e:null},E=e=>{y.value=m(e)},D=(0,t.computed)(()=>({...c.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),O=()=>({"aria-labelledby":r.role&&Object.hasOwn(b,r.role)&&a[`aria-label`]==null?f.value:void 0,...a}),k=(0,t.computed)(()=>r.autoFocus??(r.role!==`tooltip`&&c.trigger.value!==`hover`&&c.trigger.value!==`focus`)),A=(0,t.computed)(()=>l.value&&r.teleport!==!1&&r.role!==`tooltip`),j={[d]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},M=(0,t.computed)(()=>{let{transition:e}=r;return e?typeof e==`string`?{name:e}:e:{css:!1}}),N=e=>e.setAttribute(`data-sbf-state`,`closed`),P=()=>i(`after-enter`),F=()=>{l.value||(v.value=!1),i(`after-leave`)},I=e=>e instanceof Node&&!!y.value?.contains(e),L=e=>{let t=y.value;if(!t)return;let n=g(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},R=e=>{I(e.relatedTarget)?c.reference.value?.focus():L(`first`)},z=e=>{if(!I(e.relatedTarget)){L(`last`);return}let t=c.reference.value;((t&&_(t,e=>c.contains(e)))??t)?.focus()},B=()=>{let e=c.navigation.value;return y.value&&e?C(y.value,e):[]},V=e=>{let t=y.value;if(!t)return;let n=B();(n.find(e=>e.getAttribute(`aria-selected`)===`true`)??(e===`last`?n[n.length-1]:e?n[0]:void 0)??t.querySelector(`[autofocus]`)??n[0]??g(t)[0]??t).focus({preventScroll:!0})},H=()=>{let e=c.focusRequest.value;return c.focusRequest.value=null,e},U=``,W;(0,t.onScopeDispose)(()=>clearTimeout(W));let G=(e,t,n)=>{U+=n.toLowerCase(),clearTimeout(W),W=setTimeout(()=>U=``,500);let r=[...U].every(e=>e===U[0])?U[0]:U,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))},K=e=>{let t=c,n=[t];for(;t.parent?.navigation.value===`menu`;)t=t.parent,n.push(t);let r=t.reference.value,i=e?r:(r&&_(r,e=>t.contains(e)))??r;for(let e of n)e.skipFocusReturn=!0,e.close();i?.focus()},q=e=>{let t=c.navigation.value;if(!t||e.defaultPrevented||e.isComposing||w(e.target))return;let n=B(),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(),K(e.shiftKey);return}else if(t===`menu`&&c.parent?.navigation.value===`menu`&&y.value&&e.key===T(y.value).close){e.preventDefault(),c.close();return}else if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.key!==` `||U))e.preventDefault(),o=G(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(0,t.watch)(l,e=>{let t=c.skipFocusReturn;if(c.skipFocusReturn=!1,e){v.value=!0;return}let n=document.activeElement;!t&&n&&c.floating.value?.contains(n)&&c.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>l.value&&c.isPositioned.value,async e=>{if(!e)return;let n=H();(n||k.value)&&(await(0,t.nextTick)(),V(n))}),(0,t.watch)(c.focusRequest,e=>{e&&l.value&&c.isPositioned.value&&V(H())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:r.teleport||`body`,disabled:r.teleport===!1},[v.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:x,style:(0,t.normalizeStyle)(D.value),onPointerenter:n[0]||=(...e)=>(0,t.unref)(c).hover&&(0,t.unref)(c).hover(...e),onPointerleave:n[1]||=(...e)=>(0,t.unref)(c).hover&&(0,t.unref)(c).hover(...e)},[A.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},j,{onFocus:R}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(M.value,{appear:``,onBeforeLeave:N,onAfterEnter:P,onAfterLeave:F}),{default:(0,t.withCtx)(()=>[(0,t.unref)(l)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},O(),{id:(0,t.unref)(u),ref:E,role:r.role??void 0,tabindex:k.value?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(p),"data-sbf-align":(0,t.unref)(h),onKeydown:q}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},16),A.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},j,{onFocus:z}),null,16)):(0,t.createCommentVNode)(``,!0)],36)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});e.SbContainer=y,e.SbFloating=D,e.SbReference=E});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@floating-ui/vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@floating-ui/vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SbFloatingPanelVue={},e.Vue,e.FloatingUIVue))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=(()=>{try{return process.env.NODE_ENV!==`production`}catch{return!1}})();function i(e){r&&console.warn(`[sb-floating-panel-vue] ${e}`)}var a=Symbol(`SbFloatingContext`);function o(e,t,n){return++e.parts[t]>1&&i(`<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 s(e){let n=(0,t.inject)(a,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var c=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 u(e){let r=(0,t.ref)(null),i=(0,t.ref)(null),a=(0,t.computed)(()=>{let r=(0,t.toValue)(e.padding),i=(0,t.toValue)(e.matchWidth),a=(0,t.toValue)(e.placement).includes(`-`),o=(0,n.flip)({padding:r,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),s=(0,n.shift)({padding:r,limiter:(0,n.limitShift)()}),u=[(0,n.offset)((0,t.toValue)(e.offset)),...a?[o,s]:[s,o],(0,n.size)({padding:r,apply({rects:e,elements:t,availableWidth:n,availableHeight:r,placement:a}){let{style:o}=t.floating,s=c(e.reference.width);o.setProperty(`--sbf-reference-width`,s);let u=getComputedStyle(t.floating).direction===`rtl`;o.setProperty(`--sbf-transform-origin`,l(a,u)),o.setProperty(`--sbf-available-width`,c(n)),o.setProperty(`--sbf-available-height`,c(r)),o.width=i===!0?s:``,o.minWidth=i===`min`?s:``}})];return(0,t.toValue)(e.hideWhenDetached)&&u.push((0,n.hide)({padding:r})),u}),{floatingStyles:o,middlewareData:s,placement:u,isPositioned:d,update:f}=(0,n.useFloating)(r,i,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:a,whileElementsMounted:n.autoUpdate}),p=(0,t.computed)(()=>!!s.value.hide?.referenceHidden);return{reference:r,floating:i,floatingStyles:(0,t.computed)(()=>({...o.value,...p.value?{visibility:`hidden`}:{}})),placement:u,side:(0,t.computed)(()=>u.value.split(`-`)[0]),align:(0,t.computed)(()=>u.value.split(`-`)[1]),isPositioned:d,referenceHidden:p,update:f}}var d=`data-sbf-focus-guard`,f=[`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(`,`),p=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function m(e){let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;return t instanceof HTMLElement?t:null}function h(e){let t=e instanceof Element?e.closest(f):null;return!!t&&!t.closest(`[inert]`)}var g=e=>e.matches(f)&&!e.closest(`[inert]`);function _(e){return[...e.querySelectorAll(f)].filter(p)}function v(e,t){return _(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var y=[],b=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbContainer`,props:(0,t.mergeModels)({placement:{default:`bottom-start`},strategy:{default:`absolute`},offset:{default:8},padding:{default:8},matchWidth:{type:[Boolean,String],default:!1},hideWhenDetached:{type:[Boolean,String],default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},delay:{default:()=>({open:300,close:150})},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},closeOnFocusOut:{type:Boolean,default:!0}},{open:{type:Boolean,default:void 0},openModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:open`]),setup(e,{expose:n,emit:r}){let i=e,o=(0,t.useModel)(e,`open`),s=r,c=i.defaultOpen,l=(0,t.computed)(()=>!i.disabled&&(o.value??c)),d;(0,t.onScopeDispose)(()=>clearTimeout(d));let f=e=>{clearTimeout(d),!(e&&i.disabled)&&e!==l.value&&(o.value=e)},p=()=>f(!0),m=()=>f(!1),g=()=>f(!l.value),_=e=>{if(e.pointerType===`touch`||(x?.hover(e),i.trigger!==`hover`))return;let t=e.type===`pointerenter`||S.contains(e.relatedTarget);if(clearTimeout(d),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);d=setTimeout(()=>f(t),a)},v=u({isOpen:l,placement:()=>i.placement,strategy:()=>i.strategy,offset:()=>i.offset,padding:()=>i.padding,matchWidth:()=>i.matchWidth,hideWhenDetached:()=>i.hideWhenDetached}),b=new Set,x=(0,t.inject)(a,null),S={...v,isOpen:l,disabled:(0,t.toRef)(i,`disabled`),trigger:(0,t.toRef)(i,`trigger`),floatingId:`${(0,t.useId)()}-floating`,referenceId:(0,t.ref)(),floatingRole:(0,t.ref)(`dialog`),navigation:(0,t.ref)(null),focusRequest:(0,t.ref)(null),parent:x,skipFocusReturn:!1,parts:{reference:0,floating:0},isUnmounting:!1,open:p,close:m,toggle:g,hover:_,contains:e=>e instanceof Node?v.reference.value?.contains(e)||v.floating.value?.contains(e)?!0:[...b].some(t=>t.contains(e)):!1,registerChild:e=>(b.add(e),()=>b.delete(e))};x&&(0,t.onScopeDispose)(x.registerChild(S)),(0,t.provide)(a,S),(0,t.onBeforeUnmount)(()=>S.isUnmounting=!0);let C=e=>{let t=e.composedPath()[0]??e.target;return y.findLast(e=>e.contains(t))??y[y.length-1]},w=e=>{e.key===`Escape`&&C(e)===S&&(!i.closeOnEscape||e.defaultPrevented||e.isComposing||(e.preventDefault(),m()))},T=e=>{S.contains(e)||(S.skipFocusReturn=h(e),m())},E,D=e=>{if(E?.(),!i.closeOnClickOutside)return;let t=e.composedPath()[0]??e.target;if(e.pointerType!==`touch`){T(t);return}if(S.contains(t))return;let n=e=>{E?.(),T(e.composedPath()[0]??e.target)};document.addEventListener(`click`,n,!0),E=()=>{document.removeEventListener(`click`,n,!0),E=void 0}},O=e=>{i.closeOnFocusOut&&(S.contains(e.composedPath()[0]??e.target)||m())};return(0,t.watch)(l,(e,t,n)=>{e&&typeof document<`u`&&(y.push(S),document.addEventListener(`keydown`,w),document.addEventListener(`pointerdown`,D,!0),document.addEventListener(`focusin`,O),n(()=>{document.removeEventListener(`keydown`,w),document.removeEventListener(`pointerdown`,D,!0),document.removeEventListener(`focusin`,O),E?.(),y.splice(y.indexOf(S),1)}))},{immediate:!0}),(0,t.watch)(l,e=>s(e?`open`:`close`)),(0,t.watch)(v.referenceHidden,e=>{e&&i.hideWhenDetached===`close`&&m()}),(0,t.watch)(()=>i.disabled,e=>{e&&(o.value??c)&&(o.value=!1)}),n({get isOpen(){return l.value},open:p,close:m,toggle:g,update:v.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:l.value,open:p,close:m,toggle:g,placement:(0,t.unref)(v).placement.value,side:(0,t.unref)(v).side.value,align:(0,t.unref)(v).align.value,floatingId:S.floatingId,referenceId:S.referenceId.value})}}),x={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},S={menu:`[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]`,listbox:`[role="option"]`},C=e=>!!e&&Object.hasOwn(S,e);function w(e,t){return[...e.querySelectorAll(S[t])].filter(n=>n.closest(`[role="${t}"]`)===e&&!n.matches(`:disabled`)&&(n.checkVisibility?.()??!0))}var T=e=>e instanceof Element&&!!e.closest(`input, textarea, select, [contenteditable]:not([contenteditable="false"])`),E=e=>getComputedStyle(e).direction===`rtl`?{open:`ArrowLeft`,close:`ArrowRight`}:{open:`ArrowRight`,close:`ArrowLeft`},D=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},id:{default:void 0},ariaHaspopup:{default:void 0}},setup(e){let n=e,r=(0,t.useAttrs)(),a=s(`SbReference`),{isOpen:c,disabled:l,floatingId:u,floatingRole:d}=a,f=o(a,`reference`,`SbReference`),p=[`button`,`input`,`textarea`,`select`],h=()=>typeof n.as!=`string`||p.includes(n.as)||n.as===`a`&&r.href!=null,g=`${(0,t.useId)()}-reference`,v=(0,t.computed)(()=>n.id??g);(0,t.watchEffect)(()=>{a.referenceId.value=v.value}),(0,t.onMounted)(()=>{let e=a.reference.value;e?T(e)&&a.navigation.value&&i(`<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.`):i("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.")}),(0,t.onBeforeUnmount)(()=>{a.referenceId.value===v.value&&(a.referenceId.value=void 0),f(),!a.parts.reference&&!a.isUnmounting&&a.close()});let y=(0,t.computed)(()=>n.ariaHaspopup??(d.value&&Object.hasOwn(x,d.value)?x[d.value]:void 0)),b=e=>{a.reference.value=m(e)},S=()=>{a.trigger.value===`click`&&(T(a.reference.value)?a.open():a.toggle())},C=(0,t.computed)(()=>d.value===`tooltip`),w=()=>a.trigger.value===`hover`||a.trigger.value===`focus`,D=()=>a.parent?.navigation.value===`menu`,O=e=>{w()&&!D()&&!a.contains(e.relatedTarget)&&a.open()},k=e=>{w()&&!a.contains(e.relatedTarget)&&a.close()},A=e=>{let t=a.floating.value,n=t&&_(t)[0];n&&(e.preventDefault(),n.focus())},j=e=>{if(a.navigation.value&&!l.value&&a.trigger.value!==`manual`){if(D()){let t=e.currentTarget;return e.key===E(t).open?`first`:void 0}return e.key===`ArrowDown`?`first`:e.key===`ArrowUp`?`last`:void 0}},M=e=>{if(e.key===`Tab`&&!e.shiftKey&&c.value&&!D()){A(e);return}let t=j(e);t?(e.preventDefault(),a.focusRequest.value=t,a.open()):h()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),S())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{id:v.value,ref:b,type:n.as===`button`?`button`:void 0,role:h()?void 0:`button`,tabindex:h()?void 0:(0,t.unref)(l)?-1:0,disabled:n.as===`button`&&(0,t.unref)(l)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(l)?`true`:void 0,"aria-haspopup":y.value,"aria-expanded":C.value?void 0:(0,t.unref)(c)?`true`:`false`,"aria-controls":(0,t.unref)(c)&&!C.value?(0,t.unref)(u):void 0,"aria-describedby":(0,t.unref)(c)&&C.value?(0,t.unref)(u):void 0,"data-sbf-state":(0,t.unref)(c)?`open`:`closed`,onClick:S,onKeydown:M,onFocusin:O,onFocusout:k,onPointerenter:(0,t.unref)(a).hover,onPointerleave:(0,t.unref)(a).hover},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`id`,`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`aria-describedby`,`data-sbf-state`,`onPointerenter`,`onPointerleave`]))}}),O=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{default:void 0},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(e,{emit:n}){let r=e,a=n,c=(0,t.useAttrs)(),l=s(`SbFloating`);(0,t.onBeforeUnmount)(o(l,`floating`,`SbFloating`));let{isOpen:u,floatingId:f,referenceId:p,side:h,align:y}=l;(0,t.watchEffect)(()=>{l.floatingRole.value=r.role,l.navigation.value=r.keyboardNavigation&&C(r.role)?r.role:null}),(0,t.onMounted)(()=>{r.role===`tooltip`&&l.trigger.value===`click`&&i(`<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 b=(0,t.ref)(u.value),S=(0,t.ref)(null),D=e=>{l.floating.value=e instanceof HTMLElement?e:null},O=e=>{S.value=m(e)},k=(0,t.computed)(()=>({...l.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),A=()=>({"aria-labelledby":r.role&&Object.hasOwn(x,r.role)&&c[`aria-label`]==null?p.value:void 0,...c}),j=(0,t.computed)(()=>r.autoFocus??(r.role!==`tooltip`&&l.trigger.value!==`hover`&&l.trigger.value!==`focus`&&!T(l.reference.value))),M=(0,t.computed)(()=>u.value&&r.teleport!==!1&&r.role!==`tooltip`),N={[d]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},P=(0,t.computed)(()=>{let{transition:e}=r;return e?typeof e==`string`?{name:e}:e:{css:!1}}),F=e=>e.setAttribute(`data-sbf-state`,`closed`),I=()=>a(`after-enter`),L=()=>{u.value||(b.value=!1),a(`after-leave`)},R=e=>e instanceof Node&&!!S.value?.contains(e),z=e=>{let t=S.value;if(!t)return;let n=_(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},B=e=>{R(e.relatedTarget)?l.reference.value?.focus():z(`first`)},V=e=>{if(!R(e.relatedTarget)){z(`last`);return}let t=l.reference.value;((t&&v(t,e=>l.contains(e)))??t)?.focus()},H=()=>{let e=l.navigation.value;return S.value&&e?w(S.value,e):[]},U={menu:`role="menuitem", "menuitemcheckbox" or "menuitemradio"`,listbox:`role="option"`},W=!1,G=e=>{let t=l.navigation.value;if(W||!t)return;let n=e.length?e.every(g)?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 ${U[t]} and must not be disabled.`;n&&(W=!0,i(`<SbFloating role="${t}"> ${n}`))},K=e=>{let t=S.value;if(!t)return;let n=H();e&&G(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]??_(t)[0]??t).focus({preventScroll:!0})},q=()=>{let e=l.focusRequest.value;return l.focusRequest.value=null,e},J=``,Y;(0,t.onScopeDispose)(()=>clearTimeout(Y));let X=(e,t,n)=>{J+=n.toLowerCase(),clearTimeout(Y),Y=setTimeout(()=>J=``,500);let r=[...J].every(e=>e===J[0])?J[0]:J,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))},Z=e=>{let t=l,n=[t];for(;t.parent?.navigation.value===`menu`;)t=t.parent,n.push(t);let r=t.reference.value,i=e?r:(r&&v(r,e=>t.contains(e)))??r;for(let e of n)e.skipFocusReturn=!0,e.close();i?.focus()},Q=e=>{let t=l.navigation.value;if(!t||e.defaultPrevented||e.isComposing||T(e.target))return;let n=H(),r=n.findIndex(t=>t.contains(e.target)),i=n.length-1,a=t===`menu`,o;if([`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key)&&G(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(),Z(e.shiftKey);return}else if(t===`menu`&&l.parent?.navigation.value===`menu`&&S.value&&e.key===E(S.value).close){e.preventDefault(),l.close();return}else if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.key!==` `||J))e.preventDefault(),o=X(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(0,t.watch)(u,e=>{let t=l.skipFocusReturn;if(l.skipFocusReturn=!1,e){b.value=!0;return}let n=document.activeElement;!t&&n&&l.floating.value?.contains(n)&&l.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>u.value&&l.isPositioned.value,async e=>{if(!e)return;let n=q();(n||j.value)&&(await(0,t.nextTick)(),K(n))}),(0,t.watch)(l.focusRequest,e=>{e&&u.value&&l.isPositioned.value&&K(q())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:r.teleport||`body`,disabled:r.teleport===!1},[b.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:D,style:(0,t.normalizeStyle)(k.value),onPointerenter:n[0]||=(...e)=>(0,t.unref)(l).hover&&(0,t.unref)(l).hover(...e),onPointerleave:n[1]||=(...e)=>(0,t.unref)(l).hover&&(0,t.unref)(l).hover(...e)},[M.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},N,{onFocus:B}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(P.value,{appear:``,onBeforeLeave:F,onAfterEnter:I,onAfterLeave:L}),{default:(0,t.withCtx)(()=>[(0,t.unref)(u)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},A(),{id:(0,t.unref)(f),ref:O,role:r.role??void 0,tabindex:j.value?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(h),"data-sbf-align":(0,t.unref)(y),onKeydown:Q}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},16),M.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},N,{onFocus:V}),null,16)):(0,t.createCommentVNode)(``,!0)],36)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});e.SbContainer=b,e.SbFloating=O,e.SbReference=D});

package/dist/types.d.ts

@@ -153,11 +153,15 @@ export interface SbReferenceProps {
     /**
      * HTML tag or component to render.
      * - `button` gets `type="button"`.
-     * - `a` with `href` and components are left as they are: a component is expected to render
-     *   its own focusable element (e.g. the `<Button>` of your design system).
+     * - Form controls (`input`, `textarea`, `select`), `a` with `href` and components are left as
+     *   they are: a component is expected to render its own focusable element (e.g. the
+     *   `<Button>` of your design system).
      * - Any other tag (including `a` without `href`) gets `role="button"`, `tabindex="0"` and
      *   Enter/Space handling.
      *
+     * A text field (`input`, `textarea`) opens the panel on click without closing it, and keeps
+     * focus when the panel opens. The combobox pattern (`aria-activedescendant`) is not supported.
+     *
      * When disabled, `button` gets `disabled`; anything else gets `aria-disabled="true"`.
      * @default 'button'
      */
@@ -219,7 +223,8 @@ export interface SbFloatingProps {
      * Moves focus inside the panel once it is positioned: to the first element with
      * `autofocus`, otherwise to the first focusable element, otherwise to the panel itself.
      * With `role="menu"` or `listbox` the first item gets focus (a listbox: its selected option).
-     * @default true, false with `role="tooltip"` and with the `hover` and `focus` triggers
+     * @default true, false with `role="tooltip"`, with the `hover` and `focus` triggers and with
+     * a text field reference
      */
     autoFocus?: boolean;
     /**

package/dist/utils/dom.d.ts

@@ -4,6 +4,8 @@ export declare const FOCUS_GUARD_ATTRIBUTE = "data-sbf-focus-guard";
 export declare function toElement(el: unknown): HTMLElement | null;
 /** Whether pressing `target` moves focus to it (or to a focusable ancestor). */
 export declare function isFocusable(target: EventTarget | null): boolean;
+/** Whether `el` itself can take focus, with Tab or from script. */
+export declare const canFocus: (el: Element) => boolean;
 /** Elements reachable with Tab inside `root`, in document order (focus guards excluded). */
 export declare function getTabbables(root: ParentNode): HTMLElement[];
 /** First element reachable with Tab after `anchor` in document order, skipping the excluded ones. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sb-floating-panel-vue",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Headless Vue 3 floating panel components (dropdowns, popovers, menus) powered by @floating-ui/vue: positioning, accessibility and open state handled, zero CSS shipped.",
   "keywords": [
     "vue",