sb-floating-panel-vue 5.0.2 → 5.1.0

package/README.md

@@ -65,18 +65,16 @@ import { SbContainer, SbReference, SbFloating } from 'sb-floating-panel-vue';
 
 ### Menu
 
-With `role="menu"` the library handles the keyboard: ArrowDown on the trigger opens the menu on its first item, the arrow keys, Home, End and typing move between items, Tab leaves (see [Keyboard](#keyboard)). Activating an item is up to its `click` handler.
+With `role="menu"` the library handles the keyboard: ArrowDown on the trigger opens the menu on its first item, the arrow keys, Home, End and typing move between items, Tab leaves (see [Keyboard](#keyboard)). Activating an item runs its `click` handler; with `close-on-select` the menu then closes and focus goes back to the trigger.
 
 ```vue
 <SbContainer match-width="min">
-  <template #default="{ close }">
-    <SbReference class="my-trigger">Account</SbReference>
-    <SbFloating role="menu" class="my-panel">
-      <button v-for="item in ['Profile', 'Settings', 'Sign out']" :key="item" type="button" role="menuitem" @click="close()">
-        {{ item }}
-      </button>
-    </SbFloating>
-  </template>
+  <SbReference class="my-trigger">Account</SbReference>
+  <SbFloating role="menu" close-on-select class="my-panel">
+    <button v-for="item in ['Profile', 'Settings', 'Sign out']" :key="item" type="button" role="menuitem" @click="go(item)">
+      {{ item }}
+    </button>
+  </SbFloating>
 </SbContainer>
 ```
 
@@ -174,6 +172,7 @@ The panel, teleported to `body`. It is rendered while open and stays mounted unt
 | `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"`, 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 |
+| `closeOnSelect`      | `boolean`                        | `false`    | With `role="menu"` / `"listbox"`, activating a `menuitem` / `option` closes the panel (a submenu: with its parent menus) and gives focus back to the reference, after the item's `click` handler. Not for `menuitemcheckbox` / `menuitemradio`, submenu triggers, disabled items or a listbox with `aria-multiselectable="true"`; `event.preventDefault()` in the handler keeps it open |
 
 | Event         | Description                                                    |
 |---------------|----------------------------------------------------------------|
@@ -182,6 +181,25 @@ The panel, teleported to `body`. It is rendered while open and stays mounted unt
 
 With a popup role (`dialog`, `alertdialog`, `menu`, `listbox`, `tree`, `grid`), the panel is named after the reference with `aria-labelledby`, unless you pass `aria-label` or `aria-labelledby` yourself. When focus is inside the panel as it closes, it goes back to the reference.
 
+### `useSbFloating()`
+
+The open state and actions of the closest `SbContainer`, for your own components inside it: a `MenuItem` of your design system can close the menu without `close` passed down from the slot.
+
+```ts
+import { useSbFloating } from 'sb-floating-panel-vue';
+
+const { isOpen, open, close, toggle } = useSbFloating();
+```
+
+| Returns  | Type                     | Description               |
+|----------|--------------------------|---------------------------|
+| `isOpen` | `Readonly<Ref<boolean>>` | Whether the panel is open |
+| `open`   | `() => void`             | Opens the panel           |
+| `close`  | `() => void`             | Closes the panel          |
+| `toggle` | `() => void`             | Toggles the panel         |
+
+Call it in `setup` of a component rendered inside an `SbContainer` (in the reference, the panel or anywhere in its slot); outside one it throws.
+
 ### Types
 
 ```ts
@@ -197,6 +215,7 @@ import type {
   SbAlignment,
   SbStrategy,
   SbFloatingRole,
+  UseSbFloatingReturn,
 } from 'sb-floating-panel-vue';
 ```
 
@@ -226,7 +245,7 @@ import type {
   - A press outside closes the panel; on touch, only a tap does, so starting a scroll keeps it open.
   - 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"`.
+- **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`); add `closeOnSelect` to close the panel after it. 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.
 
 ---
@@ -355,9 +374,9 @@ SbContainer ── provides the state ──┬─▶ SbReference
 
 - `SbReference` and `SbFloating` find their container on their own: you pass no refs, styles or handlers, and never write `.value`.
 - 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.
+- They can sit at any depth inside the container slot, also inside your own components, which can read the same state with [`useSbFloating()`](#usesbfloating).
 - 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 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.
+- 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/components/SbFloating.vue.d.ts

@@ -1,8 +1,8 @@
 import { TransitionProps } from 'vue';
 import { SbFloatingProps } from '../types';
-declare var __VLS_25: {};
+declare var __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
+    default?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<SbFloatingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "after-enter": () => any;
@@ -18,6 +18,7 @@ declare const __VLS_base: import('vue').DefineComponent<SbFloatingProps, {}, {},
     zIndex: string | number;
     autoFocus: boolean;
     keyboardNavigation: boolean;
+    closeOnSelect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/composables/useSbFloating.d.ts

@@ -0,0 +1,6 @@
+import { UseSbFloatingReturn } from '../types';
+/**
+ * Open state and actions of the closest `SbContainer`, for your own components inside it
+ * (e.g. a `MenuItem` that closes the menu), without passing `close` down from the slot.
+ */
+export declare function useSbFloating(): UseSbFloatingReturn;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as SbContainer } from './components/SbContainer.vue';
 export { default as SbReference } from './components/SbReference.vue';
 export { default as SbFloating } from './components/SbFloating.vue';
-export type { SbContainerProps, SbContainerSlotProps, SbContainerExposed, SbReferenceProps, SbFloatingProps, SbTrigger, SbPlacement, SbSide, SbAlignment, SbStrategy, SbFloatingRole, } from './types';
+export { useSbFloating } from './composables/useSbFloating';
+export type { SbContainerProps, SbContainerSlotProps, SbContainerExposed, SbReferenceProps, SbFloatingProps, SbTrigger, SbPlacement, SbSide, SbAlignment, SbStrategy, SbFloatingRole, UseSbFloatingReturn, } from './types';

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

@@ -1,62 +1,62 @@
-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";
+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 _, readonly as v, ref as y, renderSlot as b, resolveDynamicComponent as x, toRef as S, toValue as C, unref as w, useAttrs as T, useId as E, useModel as D, watch as O, watchEffect as k, withCtx as A } from "vue";
+import { autoUpdate as j, flip as M, hide as N, limitShift as P, offset as F, shift as ee, size as te, useFloating as I } from "@floating-ui/vue";
 //#region src/utils/warn.ts
-var I = (() => {
+var L = (() => {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
 		return !1;
 	}
 })();
-function L(e) {
-	I && console.warn(`[sb-floating-panel-vue] ${e}`);
+function R(e) {
+	L && 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]--;
+var z = Symbol("SbFloatingContext");
+function B(e, t, n) {
+	return ++e.parts[t] > 1 && R(`<SbContainer> has more than one <${n}>: they share one open state and position, so only the last one works. Use one SbContainer for each panel.`), () => e.parts[t]--;
 }
-function z(e) {
-	let t = c(R, null);
+function ne(e) {
+	let t = c(z, null);
 	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
 	return t;
 }
 //#endregion
 //#region src/composables/useSbFloatingPanel.ts
-var B = (e) => `${Math.max(0, e)}px`, V = (e, t) => {
+var V = (e) => `${Math.max(0, e)}px`, re = (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 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({
+function ie(e) {
+	let t = y(null), r = y(null), i = n(() => {
+		let t = C(e.padding), n = C(e.matchWidth), r = C(e.placement).includes("-"), i = M({
 			padding: t,
 			crossAxis: "alignment",
 			fallbackAxisSideDirection: "end"
-		}), a = F({
+		}), a = ee({
 			padding: t,
-			limiter: N()
+			limiter: P()
 		}), o = [
-			P(S(e.offset)),
+			F(C(e.offset)),
 			...r ? [i, a] : [a, i],
-			ee({
+			te({
 				padding: t,
 				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
-					let { style: o } = t.floating, s = B(e.reference.width);
+					let { style: o } = t.floating, s = V(e.reference.width);
 					o.setProperty("--sbf-reference-width", s);
 					let c = getComputedStyle(t.floating).direction === "rtl";
-					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 : "";
+					o.setProperty("--sbf-transform-origin", re(a, c)), o.setProperty("--sbf-available-width", V(r)), o.setProperty("--sbf-available-height", V(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 } = te(t, r, {
-		open: () => S(e.isOpen),
-		placement: () => S(e.placement),
-		strategy: () => S(e.strategy),
+		return C(e.hideWhenDetached) && o.push(N({ padding: t })), o;
+	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = I(t, r, {
+		open: () => C(e.isOpen),
+		placement: () => C(e.placement),
+		strategy: () => C(e.strategy),
 		middleware: i,
-		whileElementsMounted: A
+		whileElementsMounted: j
 	}), u = n(() => !!o.value.hide?.referenceHidden);
 	return {
 		reference: t,
@@ -75,7 +75,7 @@ function re(e) {
 }
 //#endregion
 //#region src/utils/dom.ts
-var ie = "data-sbf-focus-guard", H = [
+var ae = "data-sbf-focus-guard", H = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled]):not([type=\"hidden\"])",
@@ -86,25 +86,25 @@ var ie = "data-sbf-focus-guard", H = [
 	"video[controls]",
 	"[tabindex]",
 	"[contenteditable=\"true\"]"
-].join(","), ae = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
-function U(e) {
+].join(","), oe = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function se(e) {
 	let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
 	return t instanceof HTMLElement ? t : null;
 }
-function oe(e) {
+function U(e) {
 	let t = e instanceof Element ? e.closest(H) : null;
 	return !!t && !t.closest("[inert]");
 }
-var se = (e) => e.matches(H) && !e.closest("[inert]");
+var ce = (e) => e.matches(H) && !e.closest("[inert]");
 function W(e) {
-	return [...e.querySelectorAll(H)].filter(ae);
+	return [...e.querySelectorAll(H)].filter(oe);
 }
 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 K = [], q = /* @__PURE__ */ s({
+var K = [], le = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -154,12 +154,12 @@ var K = [], q = /* @__PURE__ */ s({
 	}),
 	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = E(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u;
+		let i = e, a = D(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u;
 		h(() => clearTimeout(u));
 		let d = (e) => {
 			clearTimeout(u), !(e && i.disabled) && e !== l.value && (a.value = e);
-		}, f = () => d(!0), m = () => d(!1), g = () => d(!l.value), b = (e) => {
-			if (e.pointerType === "touch" || (O?.hover(e), i.trigger !== "hover")) return;
+		}, f = () => d(!0), m = () => d(!1), g = () => d(!l.value), v = (e) => {
+			if (e.pointerType === "touch" || (T?.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" ? {
@@ -167,7 +167,7 @@ var K = [], q = /* @__PURE__ */ s({
 				close: n
 			} : n, a = (t ? r.open : r.close) ?? (t ? 300 : 150);
 			u = setTimeout(() => d(t), a);
-		}, S = re({
+		}, x = ie({
 			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
@@ -175,17 +175,17 @@ var K = [], q = /* @__PURE__ */ s({
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), w = /* @__PURE__ */ new Set(), O = c(R, null), k = {
-			...S,
+		}), C = /* @__PURE__ */ new Set(), T = c(z, null), k = {
+			...x,
 			isOpen: l,
-			disabled: x(i, "disabled"),
-			trigger: x(i, "trigger"),
-			floatingId: `${T()}-floating`,
-			referenceId: v(),
-			floatingRole: v("dialog"),
-			navigation: v(null),
-			focusRequest: v(null),
-			parent: O,
+			disabled: S(i, "disabled"),
+			trigger: S(i, "trigger"),
+			floatingId: `${E()}-floating`,
+			referenceId: y(),
+			floatingRole: y("dialog"),
+			navigation: y(null),
+			focusRequest: y(null),
+			parent: T,
 			skipFocusReturn: !1,
 			parts: {
 				reference: 0,
@@ -195,18 +195,18 @@ var K = [], q = /* @__PURE__ */ s({
 			open: f,
 			close: m,
 			toggle: g,
-			hover: b,
-			contains: (e) => e instanceof Node ? S.reference.value?.contains(e) || S.floating.value?.contains(e) ? !0 : [...w].some((t) => t.contains(e)) : !1,
-			registerChild: (e) => (w.add(e), () => w.delete(e))
+			hover: v,
+			contains: (e) => e instanceof Node ? x.reference.value?.contains(e) || x.floating.value?.contains(e) ? !0 : [...C].some((t) => t.contains(e)) : !1,
+			registerChild: (e) => (C.add(e), () => C.delete(e))
 		};
-		O && h(O.registerChild(k)), _(R, k), p(() => k.isUnmounting = !0);
+		T && h(T.registerChild(k)), _(z, k), p(() => k.isUnmounting = !0);
 		let A = (e) => {
 			let t = e.composedPath()[0] ?? e.target;
 			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 = oe(e), m());
+			k.contains(e) || (k.skipFocusReturn = U(e), m());
 		}, N, P = (e) => {
 			if (N?.(), !i.closeOnClickOutside) return;
 			let t = e.composedPath()[0] ?? e.target;
@@ -224,13 +224,13 @@ var K = [], q = /* @__PURE__ */ s({
 		}, F = (e) => {
 			i.closeOnFocusOut && (k.contains(e.composedPath()[0] ?? e.target) || m());
 		};
-		return D(l, (e, t, n) => {
+		return O(l, (e, t, n) => {
 			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) => {
+		}, { immediate: !0 }), O(l, (e) => o(e ? "open" : "close")), O(x.referenceHidden, (e) => {
 			e && i.hideWhenDetached === "close" && m();
-		}), D(() => i.disabled, (e) => {
+		}), O(() => i.disabled, (e) => {
 			e && (a.value ?? s) && (a.value = !1);
 		}), t({
 			get isOpen() {
@@ -239,40 +239,40 @@ var K = [], q = /* @__PURE__ */ s({
 			open: f,
 			close: m,
 			toggle: g,
-			update: S.update
-		}), (e, t) => y(e.$slots, "default", {
+			update: x.update
+		}), (e, t) => b(e.$slots, "default", {
 			isOpen: l.value,
 			open: f,
 			close: m,
 			toggle: g,
-			placement: C(S).placement.value,
-			side: C(S).side.value,
-			align: C(S).align.value,
+			placement: w(x).placement.value,
+			side: w(x).side.value,
+			align: w(x).align.value,
 			floatingId: k.floatingId,
 			referenceId: k.referenceId.value
 		});
 	}
-}), J = {
+}), q = {
 	dialog: "dialog",
 	alertdialog: "dialog",
 	menu: "menu",
 	listbox: "listbox",
 	tree: "tree",
 	grid: "grid"
-}, Y = {
+}, J = {
 	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));
+}, ue = (e) => !!e && Object.hasOwn(J, e);
+function de(e, t) {
+	return [...e.querySelectorAll(J[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" ? {
+var Y = (e) => e instanceof Element && !!e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])"), fe = (e) => getComputedStyle(e).direction === "rtl" ? {
 	open: "ArrowLeft",
 	close: "ArrowRight"
 } : {
 	open: "ArrowRight",
 	close: "ArrowLeft"
-}, de = /* @__PURE__ */ s({
+}, X = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
@@ -280,26 +280,26 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, i = w(), a = z("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = ne(a, "reference", "SbReference"), d = [
+		let t = e, i = T(), a = ne("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = B(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(() => {
+		], f = () => typeof t.as != "string" || d.includes(t.as) || t.as === "a" && i.href != null, h = `${E()}-reference`, _ = n(() => t.id ?? h);
+		k(() => {
 			a.referenceId.value = _.value;
 		}), m(() => {
 			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.");
+			e ? Y(e) && a.navigation.value && R(`<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.`) : R("<SbReference> rendered no element, so the panel cannot be positioned: a component in `as` must render a single root element.");
 		}), p(() => {
 			a.referenceId.value === _.value && (a.referenceId.value = void 0), u(), !a.parts.reference && !a.isUnmounting && 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);
+		let v = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(q, l.value) ? q[l.value] : void 0)), y = (e) => {
+			a.reference.value = se(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();
+			a.trigger.value === "click" && (Y(a.reference.value) ? a.open() : a.toggle());
+		}, C = n(() => l.value === "tooltip"), D = () => a.trigger.value === "hover" || a.trigger.value === "focus", O = () => a.parent?.navigation.value === "menu", j = (e) => {
+			D() && !O() && !a.contains(e.relatedTarget) && a.open();
 		}, M = (e) => {
 			D() && !a.contains(e.relatedTarget) && a.close();
 		}, N = (e) => {
@@ -307,41 +307,41 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			n && (e.preventDefault(), n.focus());
 		}, P = (e) => {
 			if (a.navigation.value && !s.value && a.trigger.value !== "manual") {
-				if (A()) {
+				if (O()) {
 					let t = e.currentTarget;
-					return e.key === ue(t).open ? "first" : void 0;
+					return e.key === fe(t).open ? "first" : void 0;
 				}
 				return e.key === "ArrowDown" ? "first" : e.key === "ArrowUp" ? "last" : void 0;
 			}
 		}, F = (e) => {
-			if (e.key === "Tab" && !e.shiftKey && o.value && !A()) {
+			if (e.key === "Tab" && !e.shiftKey && o.value && !O()) {
 				N(e);
 				return;
 			}
 			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), {
+		return (e, n) => (g(), r(x(t.as), {
 			id: _.value,
-			ref: x,
+			ref: y,
 			type: t.as === "button" ? "button" : void 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,
+			tabindex: f() ? void 0 : w(s) ? -1 : 0,
+			disabled: t.as === "button" && w(s) ? !0 : void 0,
+			"aria-disabled": t.as !== "button" && w(s) ? "true" : 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",
+			"aria-expanded": C.value ? void 0 : w(o) ? "true" : "false",
+			"aria-controls": w(o) && !C.value ? w(c) : void 0,
+			"aria-describedby": w(o) && C.value ? w(c) : void 0,
+			"data-sbf-state": w(o) ? "open" : "closed",
 			onClick: S,
 			onKeydown: F,
 			onFocusin: j,
 			onFocusout: M,
-			onPointerenter: C(a).hover,
-			onPointerleave: C(a).hover
+			onPointerenter: w(a).hover,
+			onPointerleave: w(a).hover
 		}, {
-			default: k(() => [y(e.$slots, "default")]),
+			default: A(() => [b(e.$slots, "default")]),
 			_: 3
 		}, 40, [
 			"id",
@@ -359,7 +359,7 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			"onPointerleave"
 		]));
 	}
-}), Z = /* @__PURE__ */ s({
+}), pe = ":disabled, [aria-disabled=\"true\"], [aria-haspopup]:not([aria-haspopup=\"false\"])", me = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbFloating",
 	props: {
@@ -378,30 +378,34 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 		keyboardNavigation: {
 			type: Boolean,
 			default: !0
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		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(() => {
-			S.floatingRole.value = l.role, S.navigation.value = l.keyboardNavigation && ce(l.role) ? l.role : null;
+		let l = s, _ = c, v = T(), S = ne("SbFloating");
+		p(B(S, "floating", "SbFloating"));
+		let { isOpen: C, floatingId: E, referenceId: D, side: j, align: M } = S;
+		k(() => {
+			S.floatingRole.value = l.role, S.navigation.value = l.keyboardNavigation && ue(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.");
+			l.role === "tooltip" && S.trigger.value === "click" && R("<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 N = v(T.value), P = v(null), F = (e) => {
+		let N = y(C.value), P = y(null), F = (e) => {
 			S.floating.value = e instanceof HTMLElement ? e : null;
 		}, ee = (e) => {
-			P.value = U(e);
+			P.value = se(e);
 		}, te = n(() => ({
 			...S.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
 		})), 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]: "",
+			"aria-labelledby": l.role && Object.hasOwn(q, l.role) && v["aria-label"] == null ? D.value : void 0,
+			...v
+		}), L = n(() => l.autoFocus ?? (l.role !== "tooltip" && S.trigger.value !== "hover" && S.trigger.value !== "focus" && !Y(S.reference.value))), z = n(() => C.value && l.teleport !== !1 && l.role !== "tooltip"), V = {
+			[ae]: "",
 			tabindex: 0,
 			style: {
 				position: "fixed",
@@ -412,73 +416,87 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 		}, re = n(() => {
 			let { transition: e } = l;
 			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
-		}), 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) => {
+		}), ie = (e) => e.setAttribute("data-sbf-state", "closed"), H = () => _("after-enter"), oe = () => {
+			C.value || (N.value = !1), _("after-leave");
+		}, U = (e) => e instanceof Node && !!P.value?.contains(e), K = (e) => {
 			let t = P.value;
 			if (!t) return;
 			let n = W(t);
 			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
-		}, Y = (e) => {
-			K(e.relatedTarget) ? S.reference.value?.focus() : q("first");
-		}, de = (e) => {
-			if (!K(e.relatedTarget)) {
-				q("last");
+		}, le = (e) => {
+			U(e.relatedTarget) ? S.reference.value?.focus() : K("first");
+		}, J = (e) => {
+			if (!U(e.relatedTarget)) {
+				K("last");
 				return;
 			}
 			let t = S.reference.value;
 			((t && G(t, (e) => S.contains(e))) ?? t)?.focus();
-		}, Z = () => {
+		}, X = () => {
 			let e = S.navigation.value;
-			return P.value && e ? le(P.value, e) : [];
-		}, fe = {
+			return P.value && e ? de(P.value, e) : [];
+		}, me = {
+			menu: "[role=\"menuitem\"]",
+			listbox: "[role=\"option\"]"
+		}, he = {
 			menu: "role=\"menuitem\", \"menuitemcheckbox\" or \"menuitemradio\"",
 			listbox: "role=\"option\""
-		}, pe = !1, me = (e) => {
+		}, ge = !1, _e = (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) => {
+			if (ge || !t) return;
+			let n = e.length ? e.every(ce) ? 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 ${he[t]} and must not be disabled.`;
+			n && (ge = !0, R(`<SbFloating role="${t}"> ${n}`));
+		}, ve = (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 n = X();
+			e && _e(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 });
+		}, Z = () => {
 			let e = S.focusRequest.value;
 			return S.focusRequest.value = null, e;
 		}, Q = "", $;
 		h(() => clearTimeout($));
-		let _e = (e, t, n) => {
+		let ye = (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));
-		}, 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 && G(r, (e) => t.contains(e))) ?? r;
-			for (let e of n) e.skipFocusReturn = !0, e.close();
-			i?.focus();
-		}, ye = (e) => {
+		}, be = () => {
+			let e = [S];
+			for (; e[e.length - 1].parent?.navigation.value === "menu";) e.push(e[e.length - 1].parent);
+			return e;
+		}, xe = (e, t) => {
+			for (let t of e) t.skipFocusReturn = !0, t.close();
+			t?.focus({ preventScroll: !0 });
+		}, Se = (e) => {
+			let t = be(), n = t[t.length - 1], r = n.reference.value, i = e ? r : (r && G(r, (e) => n.contains(e))) ?? r;
+			xe(t, i);
+		}, Ce = (e) => {
+			let { role: t } = l, n = P.value;
+			if (!l.closeOnSelect || e.defaultPrevented || !n || !ue(t)) return;
+			let r = e.target.closest(me[t]);
+			if (!r || r.closest(`[role="${t}"]`) !== n || r.matches(pe) || t === "listbox" && n.getAttribute("aria-multiselectable") === "true") return;
+			let i = t === "menu" ? be() : [S];
+			xe(i, i[i.length - 1].reference.value);
+		}, we = (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 (!t || e.defaultPrevented || e.isComposing || Y(e.target)) return;
+			let n = X(), 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];
+			].includes(e.key) && _e(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(), ve(e.shiftKey);
+				e.preventDefault(), Se(e.shiftKey);
 				return;
-			} else if (t === "menu" && S.parent?.navigation.value === "menu" && P.value && e.key === ue(P.value).close) {
+			} else if (t === "menu" && S.parent?.navigation.value === "menu" && P.value && e.key === fe(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 = _e(n, r, e.key);
+			} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key !== " " || Q)) e.preventDefault(), o = ye(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;
@@ -487,7 +505,7 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			}
 			o && (e.preventDefault(), o.focus());
 		};
-		return D(T, (e) => {
+		return O(C, (e) => {
 			let t = S.skipFocusReturn;
 			if (S.skipFocusReturn = !1, e) {
 				N.value = !0;
@@ -495,12 +513,12 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			}
 			let n = document.activeElement;
 			!t && n && S.floating.value?.contains(n) && S.reference.value?.focus({ preventScroll: !0 });
-		}), D(() => T.value && S.isPositioned.value, async (e) => {
+		}), O(() => C.value && S.isPositioned.value, async (e) => {
 			if (!e) return;
-			let t = ge();
-			(t || R.value) && (await d(), he(t));
-		}), D(S.focusRequest, (e) => {
-			e && T.value && S.isPositioned.value && he(ge());
+			let t = Z();
+			(t || L.value) && (await d(), ve(t));
+		}), O(S.focusRequest, (e) => {
+			e && C.value && S.isPositioned.value && ve(Z());
 		}), (n, s) => (g(), r(e, {
 			to: l.teleport || "body",
 			disabled: l.teleport === !1
@@ -508,27 +526,28 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 			key: 0,
 			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)
+			onPointerenter: s[0] ||= (...e) => w(S).hover && w(S).hover(...e),
+			onPointerleave: s[1] ||= (...e) => w(S).hover && w(S).hover(...e)
 		}, [
-			B.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: Y }), null, 16)) : i("", !0),
+			z.value ? (g(), a("span", u({ key: 0 }, V, { onFocus: le }), null, 16)) : i("", !0),
 			o(t, u(re.value, {
 				appear: "",
-				onBeforeLeave: H,
-				onAfterEnter: ae,
+				onBeforeLeave: ie,
+				onAfterEnter: H,
 				onAfterLeave: oe
 			}), {
-				default: k(() => [C(T) ? (g(), r(b(l.as), u({ key: 0 }, I(), {
-					id: C(E),
+				default: A(() => [w(C) ? (g(), r(x(l.as), u({ key: 0 }, I(), {
+					id: w(E),
 					ref: ee,
 					role: l.role ?? void 0,
-					tabindex: R.value ? -1 : void 0,
+					tabindex: L.value ? -1 : void 0,
 					"data-sbf-state": "open",
-					"data-sbf-side": C(j),
-					"data-sbf-align": C(M),
-					onKeydown: ye
+					"data-sbf-side": w(j),
+					"data-sbf-align": w(M),
+					onKeydown: we,
+					onClick: Ce
 				}), {
-					default: k(() => [y(n.$slots, "default")]),
+					default: A(() => [b(n.$slots, "default")]),
 					_: 3
 				}, 16, [
 					"id",
@@ -539,9 +558,22 @@ var X = (e) => e instanceof Element && !!e.closest("input, textarea, select, [co
 				])) : i("", !0)]),
 				_: 3
 			}, 16),
-			B.value ? (g(), a("span", u({ key: 1 }, V, { onFocus: de }), null, 16)) : i("", !0)
+			z.value ? (g(), a("span", u({ key: 1 }, V, { onFocus: J }), null, 16)) : i("", !0)
 		], 36)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { q as SbContainer, Z as SbFloating, de as SbReference };
+//#region src/composables/useSbFloating.ts
+function he() {
+	let e = c(z, null);
+	if (!e) throw Error("[sb-floating-panel-vue] useSbFloating() must be called in a component inside <SbContainer>.");
+	let { isOpen: t, open: n, close: r, toggle: i } = e;
+	return {
+		isOpen: v(t),
+		open: n,
+		close: r,
+		toggle: i
+	};
+}
+//#endregion
+export { le as SbContainer, me as SbFloating, X as SbReference, he as useSbFloating };

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]`)}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});
+(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=`:disabled, [aria-disabled="true"], [aria-haspopup]:not([aria-haspopup="false"])`,k=(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},closeOnSelect:{type:Boolean,default:!1}},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},k=e=>{S.value=m(e)},A=(0,t.computed)(()=>({...l.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),j=()=>({"aria-labelledby":r.role&&Object.hasOwn(x,r.role)&&c[`aria-label`]==null?p.value:void 0,...c}),M=(0,t.computed)(()=>r.autoFocus??(r.role!==`tooltip`&&l.trigger.value!==`hover`&&l.trigger.value!==`focus`&&!T(l.reference.value))),N=(0,t.computed)(()=>u.value&&r.teleport!==!1&&r.role!==`tooltip`),P={[d]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},F=(0,t.computed)(()=>{let{transition:e}=r;return e?typeof e==`string`?{name:e}:e:{css:!1}}),I=e=>e.setAttribute(`data-sbf-state`,`closed`),L=()=>a(`after-enter`),R=()=>{u.value||(b.value=!1),a(`after-leave`)},z=e=>e instanceof Node&&!!S.value?.contains(e),B=e=>{let t=S.value;if(!t)return;let n=_(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},V=e=>{z(e.relatedTarget)?l.reference.value?.focus():B(`first`)},H=e=>{if(!z(e.relatedTarget)){B(`last`);return}let t=l.reference.value;((t&&v(t,e=>l.contains(e)))??t)?.focus()},U=()=>{let e=l.navigation.value;return S.value&&e?w(S.value,e):[]},W={menu:`[role="menuitem"]`,listbox:`[role="option"]`},G={menu:`role="menuitem", "menuitemcheckbox" or "menuitemradio"`,listbox:`role="option"`},K=!1,q=e=>{let t=l.navigation.value;if(K||!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 ${G[t]} and must not be disabled.`;n&&(K=!0,i(`<SbFloating role="${t}"> ${n}`))},J=e=>{let t=S.value;if(!t)return;let n=U();e&&q(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})},Y=()=>{let e=l.focusRequest.value;return l.focusRequest.value=null,e},X=``,Z;(0,t.onScopeDispose)(()=>clearTimeout(Z));let ee=(e,t,n)=>{X+=n.toLowerCase(),clearTimeout(Z),Z=setTimeout(()=>X=``,500);let r=[...X].every(e=>e===X[0])?X[0]:X,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))},Q=()=>{let e=[l];for(;e[e.length-1].parent?.navigation.value===`menu`;)e.push(e[e.length-1].parent);return e},$=(e,t)=>{for(let t of e)t.skipFocusReturn=!0,t.close();t?.focus({preventScroll:!0})},te=e=>{let t=Q(),n=t[t.length-1],r=n.reference.value,i=e?r:(r&&v(r,e=>n.contains(e)))??r;$(t,i)},ne=e=>{let{role:t}=r,n=S.value;if(!r.closeOnSelect||e.defaultPrevented||!n||!C(t))return;let i=e.target.closest(W[t]);if(!i||i.closest(`[role="${t}"]`)!==n||i.matches(O)||t===`listbox`&&n.getAttribute(`aria-multiselectable`)===`true`)return;let a=t===`menu`?Q():[l];$(a,a[a.length-1].reference.value)},re=e=>{let t=l.navigation.value;if(!t||e.defaultPrevented||e.isComposing||T(e.target))return;let n=U(),r=n.findIndex(t=>t.contains(e.target)),i=n.length-1,a=t===`menu`,o;if([`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key)&&q(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(),te(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!==` `||X))e.preventDefault(),o=ee(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=Y();(n||M.value)&&(await(0,t.nextTick)(),J(n))}),(0,t.watch)(l.focusRequest,e=>{e&&u.value&&l.isPositioned.value&&J(Y())}),(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)(A.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)},[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},P,{onFocus:V}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(F.value,{appear:``,onBeforeLeave:I,onAfterEnter:L,onAfterLeave:R}),{default:(0,t.withCtx)(()=>[(0,t.unref)(u)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},j(),{id:(0,t.unref)(f),ref:k,role:r.role??void 0,tabindex:M.value?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(h),"data-sbf-align":(0,t.unref)(y),onKeydown:re,onClick:ne}),{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),N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},P,{onFocus:H}),null,16)):(0,t.createCommentVNode)(``,!0)],36)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});function A(){let e=(0,t.inject)(a,null);if(!e)throw Error(`[sb-floating-panel-vue] useSbFloating() must be called in a component inside <SbContainer>.`);let{isOpen:n,open:r,close:i,toggle:o}=e;return{isOpen:(0,t.readonly)(n),open:r,close:i,toggle:o}}e.SbContainer=b,e.SbFloating=k,e.SbReference=D,e.useSbFloating=A});

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { Component, TransitionProps } from 'vue';
+import { Component, Ref, TransitionProps } from 'vue';
 /** Side of the reference the panel is placed on. */
 export type SbSide = 'top' | 'right' | 'bottom' | 'left';
 /** Alignment of the panel along the side. */
@@ -246,4 +246,26 @@ export interface SbFloatingProps {
      * @default true
      */
     keyboardNavigation?: boolean;
+    /**
+     * With `role="menu"` or `role="listbox"`: activating an item (click, Enter or Space) closes
+     * the panel and gives focus back to the reference, after the `click` handler of the item.
+     * - Menu: `menuitem` items, not `menuitemcheckbox` / `menuitemradio` nor submenu triggers.
+     *   The menus it opened from close too.
+     * - Listbox: `option` items, unless the listbox is `aria-multiselectable="true"`.
+     *
+     * Disabled items are left out. Call `event.preventDefault()` in the `click` handler of an
+     * item to keep the panel open.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+}
+/**
+ * Returned by `useSbFloating()`: the open state of the closest `SbContainer` and its actions.
+ */
+export interface UseSbFloatingReturn {
+    /** Whether the panel is open. */
+    isOpen: Readonly<Ref<boolean>>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
 }

package/package.json

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