sb-floating-panel-vue 5.0.0 → 5.0.2

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 and about a text field reference of a `menu` or `listbox` panel. The warnings depend on `process.env.NODE_ENV`, which your bundler replaces: they are left out of production builds.
 
 ### Nested containers
 

package/dist/{context.d.ts → composables/useSbFloatingContext.d.ts}

@@ -1,7 +1,7 @@
 import { InjectionKey, Ref } from 'vue';
-import { FloatingPanel } from './composables/useSbFloatingPanel';
-import { NavigableRole } from './focus';
-import { SbTrigger } from './types';
+import { SbTrigger } from '../types';
+import { NavigableRole } from '../utils/navigation';
+import { FloatingPanel } from './useSbFloatingPanel';
 /**
  * State shared by `SbContainer` with `SbReference` and `SbFloating`.
  */
@@ -39,14 +39,7 @@ export interface SbFloatingContext extends FloatingPanel {
     /** Registers a nested container; returns the function that unregisters it. */
     registerChild: (child: SbFloatingContext) => () => void;
 }
-/**
- * Panel roles that make the reference a popup trigger, with their `aria-haspopup` value.
- * Panels with these roles are also named after the reference.
- */
-export declare const POPUP_ROLES: Record<string, 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'>;
 export declare const sbFloatingContextKey: InjectionKey<SbFloatingContext>;
-/** Element of a template ref: a component gives its instance, whose root element is `$el`. */
-export declare function toElement(el: unknown): HTMLElement | null;
 /** Counts a mounted part of the container, warning about a second one; returns the release. */
 export declare function claimPart(context: SbFloatingContext, part: 'reference' | 'floating', component: string): () => void;
 export declare function useSbFloatingContext(component: string): SbFloatingContext;

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

@@ -1,11 +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 te } from "@floating-ui/vue";
+//#region src/utils/warn.ts
+var I = (() => {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !1;
+	}
+})();
+function L(e) {
+	I && console.warn(`[sb-floating-panel-vue] ${e}`);
+}
+//#endregion
+//#region src/composables/useSbFloatingContext.ts
+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 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 I = (e) => `${Math.max(0, e)}px`, L = (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 R(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,
@@ -20,10 +43,10 @@ function R(e) {
 			ee({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = I(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", L(a, c)), o.setProperty("--sbf-available-width", I(r)), o.setProperty("--sbf-available-height", I(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
+					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 : "";
 				}
 			})
 		];
@@ -51,42 +74,8 @@ function R(e) {
 	};
 }
 //#endregion
-//#region src/dev.ts
-var z = (() => {
-	try {
-		return process.env.NODE_ENV !== "production";
-	} catch {
-		return !1;
-	}
-})();
-function B(e) {
-	z && console.warn(`[sb-floating-panel-vue] ${e}`);
-}
-//#endregion
-//#region src/context.ts
-var V = {
-	dialog: "dialog",
-	alertdialog: "dialog",
-	menu: "menu",
-	listbox: "listbox",
-	tree: "tree",
-	grid: "grid"
-}, H = Symbol("SbFloatingContext");
-function ne(e) {
-	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
-	return t instanceof HTMLElement ? t : null;
-}
-function re(e, t, n) {
-	return ++e.parts[t] > 1 && B(`<SbContainer> has more than one <${n}>: they share one open state and position, so only the last one works. Use one SbContainer for each panel.`), () => e.parts[t]--;
-}
-function ie(e) {
-	let t = c(H, null);
-	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
-	return t;
-}
-//#endregion
-//#region src/focus.ts
-var ae = "data-sbf-focus-guard", U = [
+//#region src/utils/dom.ts
+var ie = "data-sbf-focus-guard", H = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled]):not([type=\"hidden\"])",
@@ -97,34 +86,25 @@ var ae = "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 G(e) {
-	let t = e instanceof Element ? e.closest(U) : null;
-	return !!t && !t.closest("[inert]");
+].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 K(e) {
-	return [...e.querySelectorAll(U)].filter(W);
+function oe(e) {
+	let t = e instanceof Element ? e.closest(H) : null;
+	return !!t && !t.closest("[inert]");
 }
-var q = {
-	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
-	listbox: "[role=\"option\"]"
-}, oe = (e) => !!e && Object.hasOwn(q, e);
-function se(e, t) {
-	return [...e.querySelectorAll(q[t])].filter((n) => n.closest(`[role="${t}"]`) === e && !n.matches(":disabled") && (n.checkVisibility?.() ?? !0));
+var se = (e) => e.matches(H) && !e.closest("[inert]");
+function W(e) {
+	return [...e.querySelectorAll(H)].filter(ae);
 }
-var ce = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), le = (e) => getComputedStyle(e).direction === "rtl" ? {
-	open: "ArrowLeft",
-	close: "ArrowRight"
-} : {
-	open: "ArrowRight",
-	close: "ArrowLeft"
-};
-function ue(e, t) {
-	return K(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+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 J = [], Y = /* @__PURE__ */ s({
+var K = [], q = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -179,15 +159,15 @@ var J = [], Y = /* @__PURE__ */ s({
 		let d = (e) => {
 			clearTimeout(u), !(e && i.disabled) && e !== l.value && (a.value = e);
 		}, f = () => d(!0), m = () => d(!1), g = () => d(!l.value), b = (e) => {
-			if (i.trigger !== "hover" || e.pointerType === "touch") return;
-			let t = e.type === "pointerenter";
+			if (e.pointerType === "touch" || (O?.hover(e), i.trigger !== "hover")) return;
+			let t = e.type === "pointerenter" || k.contains(e.relatedTarget);
 			if (clearTimeout(u), t === l.value) return;
 			let { delay: n } = i, r = typeof n == "number" ? {
 				open: n,
 				close: n
 			} : n, a = (t ? r.open : r.close) ?? (t ? 300 : 150);
 			u = setTimeout(() => d(t), a);
-		}, S = R({
+		}, S = re({
 			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
@@ -195,7 +175,7 @@ var J = [], Y = /* @__PURE__ */ s({
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), w = /* @__PURE__ */ new Set(), O = c(H, null), k = {
+		}), w = /* @__PURE__ */ new Set(), O = c(R, null), k = {
 			...S,
 			isOpen: l,
 			disabled: x(i, "disabled"),
@@ -219,14 +199,14 @@ var J = [], Y = /* @__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)), _(H, 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 J.findLast((e) => e.contains(t)) ?? J[J.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;
@@ -245,8 +225,8 @@ var J = [], Y = /* @__PURE__ */ s({
 			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
 		};
 		return D(l, (e, t, n) => {
-			e && typeof document < "u" && (J.push(k), document.addEventListener("keydown", j), document.addEventListener("pointerdown", P, !0), document.addEventListener("focusin", F), n(() => {
-				document.removeEventListener("keydown", j), document.removeEventListener("pointerdown", P, !0), document.removeEventListener("focusin", F), N?.(), J.splice(J.indexOf(k), 1);
+			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();
@@ -272,7 +252,27 @@ var J = [], Y = /* @__PURE__ */ s({
 			referenceId: k.referenceId.value
 		});
 	}
-}), X = /* @__PURE__ */ s({
+}), J = {
+	dialog: "dialog",
+	alertdialog: "dialog",
+	menu: "menu",
+	listbox: "listbox",
+	tree: "tree",
+	grid: "grid"
+}, Y = {
+	menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]",
+	listbox: "[role=\"option\"]"
+}, 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 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"
+}, de = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
@@ -280,59 +280,64 @@ var J = [], Y = /* @__PURE__ */ s({
 		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, i = w(), a = ie("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = re(a, "reference", "SbReference"), d = () => typeof t.as != "string" || t.as === "button" || t.as === "a" && i.href != null, f = `${T()}-reference`, h = n(() => t.id ?? f);
+		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 || B("<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(V, l.value) ? V[l.value] : void 0)), v = (e) => {
-			a.reference.value = ne(e);
-		}, x = () => {
-			a.trigger.value === "click" && a.toggle();
-		}, S = n(() => l.value === "tooltip"), E = () => a.trigger.value === "hover" || a.trigger.value === "focus", D = (e) => {
-			E() && !a.contains(e.relatedTarget) && a.open();
-		}, A = (e) => {
-			E() && !a.contains(e.relatedTarget) && a.close();
-		}, j = (e) => {
-			let t = a.floating.value, n = t && K(t)[0];
-			n && (e.preventDefault(), n.focus());
+		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) => {
+			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 (a.parent?.navigation.value === "menu") {
+				if (A()) {
 					let t = e.currentTarget;
-					return e.key === le(t).open ? "first" : void 0;
+					return e.key === ue(t).open ? "first" : void 0;
 				}
 				return e.key === "ArrowDown" ? "first" : e.key === "ArrowUp" ? "last" : void 0;
 			}
-		}, N = (e) => {
-			let t = a.parent?.navigation.value === "menu";
-			if (e.key === "Tab" && !e.shiftKey && o.value && !t) {
-				j(e);
+		}, F = (e) => {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !A()) {
+				N(e);
 				return;
 			}
-			let n = M(e);
-			n ? (e.preventDefault(), a.focusRequest.value = n, 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: N,
-			onFocusin: D,
-			onFocusout: A,
+			onClick: S,
+			onKeydown: F,
+			onFocusin: j,
+			onFocusout: M,
 			onPointerenter: C(a).hover,
 			onPointerleave: C(a).hover
 		}, {
@@ -377,24 +382,26 @@ var J = [], Y = /* @__PURE__ */ s({
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, m = c, _ = w(), x = ie("SbFloating");
-		p(re(x, "floating", "SbFloating"));
-		let { isOpen: S, floatingId: T, referenceId: E, side: A, align: j } = x;
+		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 && oe(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 = ne(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 }
-		})), te = () => ({
-			"aria-labelledby": l.role && Object.hasOwn(V, l.role) && _["aria-label"] == null ? E.value : void 0,
-			..._
-		}), I = n(() => l.autoFocus ?? (l.role !== "tooltip" && x.trigger.value !== "hover" && x.trigger.value !== "focus")), L = n(() => S.value && l.teleport !== !1 && l.role !== "tooltip"), R = {
-			[ae]: "",
+		})), I = () => ({
+			"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",
@@ -402,63 +409,76 @@ var J = [], Y = /* @__PURE__ */ s({
 				outline: "none",
 				pointerEvents: "none"
 			}
-		}, z = n(() => {
+		}, re = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), B = (e) => e.setAttribute("data-sbf-state", "closed"), H = () => m("after-enter"), U = () => {
-			S.value || (M.value = !1), m("after-leave");
-		}, W = (e) => e instanceof Node && !!N.value?.contains(e), G = (e) => {
-			let t = N.value;
+		}), 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");
-		}, J = (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 && ue(t, (e) => x.contains(e))) ?? t)?.focus();
-		}, Y = () => {
-			let e = x.navigation.value;
-			return N.value && e ? se(N.value, e) : [];
-		}, X = (e) => {
-			let t = N.value;
-			if (!t) return;
-			let n = Y();
-			(n.find((e) => e.getAttribute("aria-selected") === "true") ?? (e === "last" ? n[n.length - 1] : e ? n[0] : void 0) ?? t.querySelector("[autofocus]") ?? n[0] ?? K(t)[0] ?? t).focus({ preventScroll: !0 });
+			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 && ue(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 || ce(e.target)) return;
-			let n = Y(), r = n.findIndex((t) => t.contains(e.target)), i = n.length - 1, a = t === "menu", o;
-			if (e.key === "ArrowDown") o = n[r < i ? r + 1 : a ? 0 : i];
+		}, 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 === le(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;
@@ -467,46 +487,46 @@ var J = [], Y = /* @__PURE__ */ s({
 			}
 			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 || I.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)
 		}, [
-			L.value ? (g(), a("span", u({ key: 0 }, R, { onFocus: q }), null, 16)) : i("", !0),
-			o(t, u(z.value, {
+			B.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: Y }), null, 16)) : i("", !0),
+			o(t, u(re.value, {
 				appear: "",
-				onBeforeLeave: B,
-				onAfterEnter: H,
-				onAfterLeave: U
+				onBeforeLeave: H,
+				onAfterEnter: ae,
+				onAfterLeave: oe
 			}), {
-				default: k(() => [C(S) ? (g(), r(b(l.as), u({ key: 0 }, te(), {
-					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: I.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
@@ -519,9 +539,9 @@ var J = [], Y = /* @__PURE__ */ s({
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			L.value ? (g(), a("span", u({ key: 1 }, R, { onFocus: J }), 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 { Y 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=e=>`${Math.max(0,e)}px`,i=(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 a(e){let a=(0,t.ref)(null),o=(0,t.ref)(null),s=(0,t.computed)(()=>{let a=(0,t.toValue)(e.padding),o=(0,t.toValue)(e.matchWidth),s=(0,t.toValue)(e.placement).includes(`-`),c=(0,n.flip)({padding:a,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),l=(0,n.shift)({padding:a,limiter:(0,n.limitShift)()}),u=[(0,n.offset)((0,t.toValue)(e.offset)),...s?[c,l]:[l,c],(0,n.size)({padding:a,apply({rects:e,elements:t,availableWidth:n,availableHeight:a,placement:s}){let{style:c}=t.floating,l=r(e.reference.width);c.setProperty(`--sbf-reference-width`,l);let u=getComputedStyle(t.floating).direction===`rtl`;c.setProperty(`--sbf-transform-origin`,i(s,u)),c.setProperty(`--sbf-available-width`,r(n)),c.setProperty(`--sbf-available-height`,r(a)),c.width=o===!0?l:``,c.minWidth=o===`min`?l:``}})];return(0,t.toValue)(e.hideWhenDetached)&&u.push((0,n.hide)({padding:a})),u}),{floatingStyles:c,middlewareData:l,placement:u,isPositioned:d,update:f}=(0,n.useFloating)(a,o,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:s,whileElementsMounted:n.autoUpdate}),p=(0,t.computed)(()=>!!l.value.hide?.referenceHidden);return{reference:a,floating:o,floatingStyles:(0,t.computed)(()=>({...c.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 o=(()=>{try{return process.env.NODE_ENV!==`production`}catch{return!1}})();function s(e){o&&console.warn(`[sb-floating-panel-vue] ${e}`)}var c={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},l=Symbol(`SbFloatingContext`);function u(e){let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;return t instanceof HTMLElement?t:null}function d(e,t,n){return++e.parts[t]>1&&s(`<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 f(e){let n=(0,t.inject)(l,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var p=`data-sbf-focus-guard`,m=[`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(`,`),h=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function g(e){let t=e instanceof Element?e.closest(m):null;return!!t&&!t.closest(`[inert]`)}function _(e){return[...e.querySelectorAll(m)].filter(h)}var v={menu:`[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]`,listbox:`[role="option"]`},y=e=>!!e&&Object.hasOwn(v,e);function b(e,t){return[...e.querySelectorAll(v[t])].filter(n=>n.closest(`[role="${t}"]`)===e&&!n.matches(`:disabled`)&&(n.checkVisibility?.()??!0))}var x=e=>e instanceof Element&&!!e.closest(`input, textarea, select, [contenteditable]:not([contenteditable="false"])`),S=e=>getComputedStyle(e).direction===`rtl`?{open:`ArrowLeft`,close:`ArrowRight`}:{open:`ArrowRight`,close:`ArrowLeft`};function C(e,t){return _(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var w=[],T=(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,u=(0,t.computed)(()=>!i.disabled&&(o.value??c)),d;(0,t.onScopeDispose)(()=>clearTimeout(d));let f=e=>{clearTimeout(d),!(e&&i.disabled)&&e!==u.value&&(o.value=e)},p=()=>f(!0),m=()=>f(!1),h=()=>f(!u.value),_=e=>{if(i.trigger!==`hover`||e.pointerType===`touch`)return;let t=e.type===`pointerenter`;if(clearTimeout(d),t===u.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=a({isOpen:u,placement:()=>i.placement,strategy:()=>i.strategy,offset:()=>i.offset,padding:()=>i.padding,matchWidth:()=>i.matchWidth,hideWhenDetached:()=>i.hideWhenDetached}),y=new Set,b=(0,t.inject)(l,null),x={...v,isOpen:u,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:b,skipFocusReturn:!1,parts:{reference:0,floating:0},isUnmounting:!1,open:p,close:m,toggle:h,hover:_,contains:e=>e instanceof Node?v.reference.value?.contains(e)||v.floating.value?.contains(e)?!0:[...y].some(t=>t.contains(e)):!1,registerChild:e=>(y.add(e),()=>y.delete(e))};b&&(0,t.onScopeDispose)(b.registerChild(x)),(0,t.provide)(l,x),(0,t.onBeforeUnmount)(()=>x.isUnmounting=!0);let S=e=>{let t=e.composedPath()[0]??e.target;return w.findLast(e=>e.contains(t))??w[w.length-1]},C=e=>{e.key===`Escape`&&S(e)===x&&(!i.closeOnEscape||e.defaultPrevented||e.isComposing||(e.preventDefault(),m()))},T=e=>{x.contains(e)||(x.skipFocusReturn=g(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(x.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&&(x.contains(e.composedPath()[0]??e.target)||m())};return(0,t.watch)(u,(e,t,n)=>{e&&typeof document<`u`&&(w.push(x),document.addEventListener(`keydown`,C),document.addEventListener(`pointerdown`,D,!0),document.addEventListener(`focusin`,O),n(()=>{document.removeEventListener(`keydown`,C),document.removeEventListener(`pointerdown`,D,!0),document.removeEventListener(`focusin`,O),E?.(),w.splice(w.indexOf(x),1)}))},{immediate:!0}),(0,t.watch)(u,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 u.value},open:p,close:m,toggle:h,update:v.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:u.value,open:p,close:m,toggle:h,placement:(0,t.unref)(v).placement.value,side:(0,t.unref)(v).side.value,align:(0,t.unref)(v).align.value,floatingId:x.floatingId,referenceId:x.referenceId.value})}}),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)(),i=f(`SbReference`),{isOpen:a,disabled:o,floatingId:l,floatingRole:p}=i,m=d(i,`reference`,`SbReference`),h=()=>typeof n.as!=`string`||n.as===`button`||n.as===`a`&&r.href!=null,g=`${(0,t.useId)()}-reference`,v=(0,t.computed)(()=>n.id??g);(0,t.watchEffect)(()=>{i.referenceId.value=v.value}),(0,t.onMounted)(()=>{i.reference.value||s("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.")}),(0,t.onBeforeUnmount)(()=>{i.referenceId.value===v.value&&(i.referenceId.value=void 0),m(),!i.parts.reference&&!i.isUnmounting&&i.close()});let y=(0,t.computed)(()=>n.ariaHaspopup??(p.value&&Object.hasOwn(c,p.value)?c[p.value]:void 0)),b=e=>{i.reference.value=u(e)},x=()=>{i.trigger.value===`click`&&i.toggle()},C=(0,t.computed)(()=>p.value===`tooltip`),w=()=>i.trigger.value===`hover`||i.trigger.value===`focus`,T=e=>{w()&&!i.contains(e.relatedTarget)&&i.open()},E=e=>{w()&&!i.contains(e.relatedTarget)&&i.close()},D=e=>{let t=i.floating.value,n=t&&_(t)[0];n&&(e.preventDefault(),n.focus())},O=e=>{if(i.navigation.value&&!o.value&&i.trigger.value!==`manual`){if(i.parent?.navigation.value===`menu`){let t=e.currentTarget;return e.key===S(t).open?`first`:void 0}return e.key===`ArrowDown`?`first`:e.key===`ArrowUp`?`last`:void 0}},k=e=>{let t=i.parent?.navigation.value===`menu`;if(e.key===`Tab`&&!e.shiftKey&&a.value&&!t){D(e);return}let n=O(e);n?(e.preventDefault(),i.focusRequest.value=n,i.open()):h()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),x())};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)(o)?-1:0,disabled:n.as===`button`&&(0,t.unref)(o)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(o)?`true`:void 0,"aria-haspopup":y.value,"aria-expanded":C.value?void 0:(0,t.unref)(a)?`true`:`false`,"aria-controls":(0,t.unref)(a)&&!C.value?(0,t.unref)(l):void 0,"aria-describedby":(0,t.unref)(a)&&C.value?(0,t.unref)(l):void 0,"data-sbf-state":(0,t.unref)(a)?`open`:`closed`,onClick:x,onKeydown:k,onFocusin:T,onFocusout:E,onPointerenter:(0,t.unref)(i).hover,onPointerleave:(0,t.unref)(i).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)(),o=f(`SbFloating`);(0,t.onBeforeUnmount)(d(o,`floating`,`SbFloating`));let{isOpen:s,floatingId:l,referenceId:m,side:h,align:g}=o;(0,t.watchEffect)(()=>{o.floatingRole.value=r.role,o.navigation.value=r.keyboardNavigation&&y(r.role)?r.role:null});let v=(0,t.ref)(s.value),w=(0,t.ref)(null),T=e=>{o.floating.value=e instanceof HTMLElement?e:null},E=e=>{w.value=u(e)},D=(0,t.computed)(()=>({...o.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),O=()=>({"aria-labelledby":r.role&&Object.hasOwn(c,r.role)&&a[`aria-label`]==null?m.value:void 0,...a}),k=(0,t.computed)(()=>r.autoFocus??(r.role!==`tooltip`&&o.trigger.value!==`hover`&&o.trigger.value!==`focus`)),A=(0,t.computed)(()=>s.value&&r.teleport!==!1&&r.role!==`tooltip`),j={[p]:``,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=()=>{s.value||(v.value=!1),i(`after-leave`)},I=e=>e instanceof Node&&!!w.value?.contains(e),L=e=>{let t=w.value;if(!t)return;let n=_(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},R=e=>{I(e.relatedTarget)?o.reference.value?.focus():L(`first`)},z=e=>{if(!I(e.relatedTarget)){L(`last`);return}let t=o.reference.value;((t&&C(t,e=>o.contains(e)))??t)?.focus()},B=()=>{let e=o.navigation.value;return w.value&&e?b(w.value,e):[]},V=e=>{let t=w.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]??_(t)[0]??t).focus({preventScroll:!0})},H=()=>{let e=o.focusRequest.value;return o.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=o,n=[t];for(;t.parent?.navigation.value===`menu`;)t=t.parent,n.push(t);let r=t.reference.value,i=e?r:(r&&C(r,e=>t.contains(e)))??r;for(let e of n)e.skipFocusReturn=!0,e.close();i?.focus()},q=e=>{let t=o.navigation.value;if(!t||e.defaultPrevented||e.isComposing||x(e.target))return;let n=B(),r=n.findIndex(t=>t.contains(e.target)),i=n.length-1,a=t===`menu`,s;if(e.key===`ArrowDown`)s=n[r<i?r+1:a?0:i];else if(e.key===`ArrowUp`)s=n[r>0?r-1:a||r<0?i:0];else if(e.key===`Home`)s=n[0];else if(e.key===`End`)s=n[i];else if(e.key===`Tab`&&t===`menu`){e.preventDefault(),K(e.shiftKey);return}else if(t===`menu`&&o.parent?.navigation.value===`menu`&&w.value&&e.key===S(w.value).close){e.preventDefault(),o.close();return}else if(e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.key!==` `||U))e.preventDefault(),s=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}s&&(e.preventDefault(),s.focus())};return(0,t.watch)(s,e=>{let t=o.skipFocusReturn;if(o.skipFocusReturn=!1,e){v.value=!0;return}let n=document.activeElement;!t&&n&&o.floating.value?.contains(n)&&o.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>s.value&&o.isPositioned.value,async e=>{if(!e)return;let n=H();(n||k.value)&&(await(0,t.nextTick)(),V(n))}),(0,t.watch)(o.focusRequest,e=>{e&&s.value&&o.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:T,style:(0,t.normalizeStyle)(D.value),onPointerenter:n[0]||=(...e)=>(0,t.unref)(o).hover&&(0,t.unref)(o).hover(...e),onPointerleave:n[1]||=(...e)=>(0,t.unref)(o).hover&&(0,t.unref)(o).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)(s)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},O(),{id:(0,t.unref)(l),ref:E,role:r.role??void 0,tabindex:k.value?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(h),"data-sbf-align":(0,t.unref)(g),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=T,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/aria.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Panel roles that make the reference a popup trigger, with their `aria-haspopup` value.
+ * Panels with these roles are also named after the reference.
+ */
+export declare const POPUP_ROLES: Record<string, 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'>;

package/dist/utils/dom.d.ts

@@ -0,0 +1,12 @@
+/** Marks the hidden elements placed around a teleported panel to keep the Tab order. */
+export declare const FOCUS_GUARD_ATTRIBUTE = "data-sbf-focus-guard";
+/** Element of a template ref: a component gives its instance, whose root element is `$el`. */
+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. */
+export declare function getNextTabbable(anchor: Element, exclude: (el: HTMLElement) => boolean): HTMLElement | undefined;

package/dist/{focus.d.ts → utils/navigation.d.ts}

@@ -1,9 +1,3 @@
-/** Marks the hidden elements placed around a teleported panel to keep the Tab order. */
-export declare const FOCUS_GUARD_ATTRIBUTE = "data-sbf-focus-guard";
-/** Whether pressing `target` moves focus to it (or to a focusable ancestor). */
-export declare function isFocusable(target: EventTarget | null): boolean;
-/** Elements reachable with Tab inside `root`, in document order (focus guards excluded). */
-export declare function getTabbables(root: ParentNode): HTMLElement[];
 /** Panel roles whose keyboard model the components handle, with the selector of their items. */
 export declare const ITEM_SELECTORS: {
     readonly menu: "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]";
@@ -20,5 +14,3 @@ export declare const submenuKeys: (el: Element) => {
     open: string;
     close: string;
 };
-/** First element reachable with Tab after `anchor` in document order, skipping the excluded ones. */
-export declare function getNextTabbable(anchor: Element, exclude: (el: HTMLElement) => boolean): HTMLElement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sb-floating-panel-vue",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "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",