sb-floating-panel-vue 3.0.0 → 4.0.0

package/README.md

@@ -9,10 +9,10 @@
 
 ## 🔥 Features
 
-- 🧩 Three components (`SbContainer`, `SbReference`, `SbFloating`) for dropdowns, popovers, menus and tooltips
+- 🧩 Three components (`SbContainer`, `SbReference`, `SbFloating`) for dropdowns, popovers and disclosure panels
 - ⚡ Built on top of [`@floating-ui/vue`](https://floating-ui.com/): `offset`, `flip`, `shift`, `size` and `hide` already configured
 - 🎨 Zero CSS shipped: the library adapts to your design system (plain CSS, Tailwind, CSS modules)
-- ♿ Accessible by default: ARIA attributes, keyboard support, Escape, click outside, focus management
+- ♿ Accessible by default: ARIA attributes and naming, Tab order kept across the teleport, Escape, click outside, focus management
 - 🔁 Fully reactive props, `v-model:open`, nested panels
 
 ---
@@ -58,9 +58,10 @@ import { SbContainer, SbReference, SbFloating } from 'sb-floating-panel-vue';
 <template>
   <SbContainer placement="bottom-start" match-width="min">
     <template #default="{ close }">
-      <SbReference class="my-trigger" aria-haspopup="menu">Account</SbReference>
-      <SbFloating role="menu" transition="pop" class="my-panel">
-        <button type="button" role="menuitem" @click="close()">Sign out</button>
+      <SbReference class="my-trigger">Account</SbReference>
+      <SbFloating transition="pop" class="my-panel">
+        <a href="/profile">Profile</a>
+        <button type="button" @click="close()">Sign out</button>
       </SbFloating>
     </template>
   </SbContainer>
@@ -86,7 +87,8 @@ Holds the state and the positioning. Renders no element of its own, only its slo
 | `disabled`            | `boolean`                              | `false`          | Prevents opening; closes the panel if it is open                                             |
 | `trigger`             | `'click' \| 'manual'`                  | `'click'`        | `manual`: the reference does not toggle; open with `v-model:open`, slot props or methods    |
 | `closeOnEscape`       | `boolean`                              | `true`           | Closes on Escape                                                                             |
-| `closeOnClickOutside` | `boolean`                              | `true`           | Closes on a pointer press outside the reference and the panel                                |
+| `closeOnClickOutside` | `boolean`                              | `true`           | Closes on a pointer press outside the reference and the panel (on touch, on the tap's click) |
+| `closeOnFocusOut`     | `boolean`                              | `true`           | Closes when keyboard focus moves outside the reference and the panel                         |
 
 | Event         | Payload   | Description              |
 |---------------|-----------|--------------------------|
@@ -94,7 +96,7 @@ Holds the state and the positioning. Renders no element of its own, only its slo
 | `open`        | —         | The panel has opened     |
 | `close`       | —         | The panel has closed     |
 
-**Slot props**: `isOpen`, `open()`, `close()`, `toggle()`, `placement` (resolved after flip), `side`.
+**Slot props**: `isOpen`, `open()`, `close()`, `toggle()`, `placement` (resolved after flip), `side`, `align`.
 
 **Exposed methods** (template ref): `open()`, `close()`, `toggle()`, `update()` (recomputes the position).
 
@@ -102,12 +104,15 @@ Holds the state and the positioning. Renders no element of its own, only its slo
 
 The trigger the panel is anchored to.
 
-| Prop           | Type     | Default    | Description                                                                                                  |
-|----------------|----------|------------|--------------------------------------------------------------------------------------------------------------|
-| `as`           | `string` | `'button'` | Tag to render. `button` gets `type="button"`; tags other than `button`/`a` get `role="button"`, `tabindex="0"` and Enter/Space |
-| `ariaHaspopup` | `'dialog' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'true' \| 'false'` | `'dialog'` | Value of `aria-haspopup`, matching the `role` of the panel |
+| 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 |
+| `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 |
 
-Sets `aria-expanded`, `aria-controls` (while open) and `data-sbf-state`. When the container is `disabled`, a `button` gets `disabled`, other tags get `aria-disabled="true"` and `tabindex="-1"`. Your own `class`, attributes and listeners (`@click`, `@mouseenter`, …) are applied to the element; the click is not stopped.
+Sets `aria-expanded`, `aria-controls` (while open) and `data-sbf-state`. When the container is `disabled`, a `button` gets `disabled`, anything else gets `aria-disabled="true"` (and non-interactive tags `tabindex="-1"`). Your own `class`, attributes and listeners (`@click`, `@mouseenter`, …) are applied to the element; the click is not stopped.
+
+With a component (e.g. the `Button` of your design system), its root element becomes the reference, so the component must render a single root element that accepts the attributes and listeners above. While the panel is open, Tab on the reference moves focus into the panel.
 
 ### `<SbFloating>`
 
@@ -115,20 +120,20 @@ The panel, teleported to `body`. It is rendered while open and stays mounted unt
 
 | Prop               | Type                    | Default    | Description                                                                                         |
 |--------------------|-------------------------|------------|-----------------------------------------------------------------------------------------------------|
-| `as`               | `string`                | `'div'`    | Tag of the panel element                                                                            |
-| `role`             | `string`                | `'dialog'` | ARIA role of the panel                                                                              |
-| `transition`       | `string`                | —          | Name of a Vue `<Transition>` defined in your CSS. No animation when unset                           |
-| `teleportTo`       | `string \| HTMLElement` | `'body'`   | Teleport target                                                                                     |
-| `teleportDisabled` | `boolean`               | `false`    | Renders the panel in place                                                                          |
-| `zIndex`           | `number \| string`      | —          | `z-index` of the positioned wrapper                                                                 |
-| `autoFocus`        | `boolean`               | `false`    | Once positioned, focuses the first `[autofocus]` or focusable element inside, else the panel itself |
+| `as`               | `string`                     | `'div'`    | Tag of the panel element                                                                            |
+| `role`             | `string \| null`             | `'dialog'` | ARIA role of the panel; `null` renders no role (disclosure pattern)                                 |
+| `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 |
+| `teleportTo`       | `string \| HTMLElement`      | `'body'`   | Teleport target                                                                                     |
+| `teleportDisabled` | `boolean`                    | `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`     | Once positioned, focuses the first `[autofocus]` or focusable element inside, else the panel itself. Set it to `false` for panels that must not take focus, such as tooltips |
 
 | Event         | Description                                                    |
 |---------------|----------------------------------------------------------------|
 | `after-enter` | The enter transition has finished                              |
 | `after-leave` | The leave transition has finished and the panel is removed     |
 
-When focus is inside the panel as it closes, it goes back to the reference.
+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.
 
 ### Types
 
@@ -170,21 +175,21 @@ SbContainer ── provides the state ──┬─▶ SbReference
 An `SbContainer` placed inside another one (e.g. a submenu in a menu panel) registers with its parent:
 
 - a press inside the nested panel is not "outside" for the parent, so both stay open;
-- Escape closes the innermost open panel first, then the next one;
+- Escape closes the innermost open panel first, then the next one (more generally, the most recently opened panel, also between sibling containers);
 - a press outside all of them closes them all.
 
 ### From click to open panel
 
 1. **Click** on `SbReference` (or Enter/Space on a non-interactive tag). With `trigger="click"` and the container not `disabled`, the container toggles: it emits `update:open` and, without `v-model:open`, updates its own state.
-2. **Open state changes.** `SbReference` gets `aria-expanded="true"`, `aria-controls` and `data-sbf-state="open"`; the container starts listening for Escape and outside presses (only while open) and emits `open`.
-3. **The panel mounts.** `SbFloating` renders the wrapper in the teleport target and the panel inside it; the enter classes of your `transition`, if any, are applied to the panel.
+2. **Open state changes.** `SbReference` gets `aria-expanded="true"`, `aria-controls` and `data-sbf-state="open"`; the container starts listening for Escape, outside presses and focus moving outside (only while open) and emits `open`.
+3. **The panel mounts.** `SbFloating` renders the wrapper in the teleport target, with the panel and two hidden focus guards inside it; the enter classes of your `transition`, if any, are applied to the panel.
 4. **Positioning.** Floating UI starts tracking the reference (scroll, resize, layout changes) and computes the position with `offset`, `flip`, `shift`, `size` and, with `hideWhenDetached`, `hide`. `size` writes the `--sbf-*` variables and applies `matchWidth`; the position is written on the wrapper.
-5. **Positioned.** With `autoFocus`, focus moves inside the panel now, not earlier, so the page does not jump to the panel's initial (0, 0) position.
+5. **Positioned.** With `autoFocus` (the default), focus moves inside the panel now, not earlier, so the page does not jump to the panel's initial (0, 0) position.
 
-Closing (click on the reference, `close()`, Escape, press outside, `v-model:open` set to `false`, or `disabled`):
+Closing (click on the reference, `close()`, Escape, press outside, focus moving outside, `v-model:open` set to `false`, or `disabled`):
 
-1. If focus is inside the panel, it goes back to the reference; the container emits `close`.
-2. The leave classes of your `transition` are applied; the wrapper stays mounted and positioned until the animation ends (immediately without `transition`).
+1. If focus is inside the panel, it goes back to the reference without scrolling the page; it stays where it is when a press outside lands on another focusable element. The container emits `close`.
+2. The panel gets `data-sbf-state="closed"` and the leave classes of your `transition`; the wrapper stays mounted and positioned until the animation ends (immediately without `transition`).
 3. The wrapper is removed, Floating UI stops tracking, `SbFloating` emits `after-leave`.
 
 ---
@@ -210,7 +215,7 @@ Your styles, transitions and transforms go on the panel, so they never fight wit
 | Attribute        | Values                               | On                       | Use                                         |
 |------------------|--------------------------------------|--------------------------|---------------------------------------------|
 | `data-sbf-state` | `open` / `closed`                    | reference                | Open/closed styles (e.g. rotate an icon)    |
-| `data-sbf-state` | `open`                               | panel                    | Always `open` while rendered: style the exit with the leave classes of `transition` |
+| `data-sbf-state` | `open` / `closed`                    | panel                    | `closed` from the start of the leave transition: style or animate the exit |
 | `data-sbf-side`  | `top` / `bottom` / `left` / `right`  | panel                    | Real side after flip: directional animation |
 | `data-sbf-align` | `start` / `end` / absent             | panel                    | Alignment part of the placement             |
 
@@ -223,9 +228,14 @@ Set on the wrapper and inherited by the panel:
 | `--sbf-reference-width`  | Width of the reference                               |
 | `--sbf-available-width`  | Horizontal space left before overflowing the viewport |
 | `--sbf-available-height` | Vertical space left before overflowing the viewport  |
+| `--sbf-transform-origin` | Corner or edge of the panel facing the reference, for `transform-origin` |
 
 All attributes and variables use the `sbf` prefix, so they do not clash with other libraries in the same app (e.g. Radix / Reka UI `data-state`).
 
+### Stacking
+
+The wrapper is positioned with a CSS `transform`, which creates a stacking context: a `z-index` on the panel (e.g. a `z-50` class) only orders it inside the wrapper and has no effect on the rest of the page. Set the `zIndex` prop of `SbFloating` instead, which goes on the wrapper.
+
 ### Plain CSS
 
 Panels are teleported to `body`, so their styles cannot be `scoped` to the component that renders them: use global styles, CSS modules or utility classes.
@@ -246,6 +256,7 @@ Panels are teleported to `body`, so their styles cannot be `scoped` to the compo
 /* <SbFloating transition="pop"> */
 .pop-enter-active,
 .pop-leave-active {
+  transform-origin: var(--sbf-transform-origin);
   transition: opacity 150ms ease, transform 150ms ease;
 }
 .pop-enter-from,
@@ -257,6 +268,18 @@ Panels are teleported to `body`, so their styles cannot be `scoped` to the compo
 /* direction from the side resolved after flip */
 .pop-enter-from[data-sbf-side='bottom'] { transform: translateY(-6px); }
 .pop-enter-from[data-sbf-side='top'] { transform: translateY(6px); }
+
+/* respect the user's motion setting */
+@media (prefers-reduced-motion: reduce) {
+  .pop-enter-active,
+  .pop-leave-active {
+    transition: opacity 150ms ease;
+  }
+  .pop-enter-from,
+  .pop-leave-to {
+    transform: none;
+  }
+}
 ```
 
 ### Tailwind (v4)
@@ -266,7 +289,16 @@ Panels are teleported to `body`, so their styles cannot be `scoped` to the compo
   Options
   <span class="inline-block transition-transform group-data-[sbf-state=open]:rotate-180">▾</span>
 </SbReference>
-<SbFloating class="max-h-(--sbf-available-height) w-(--sbf-reference-width) overflow-y-auto rounded border bg-white shadow-lg">
+<SbFloating
+  :z-index="50"
+  :transition="{
+    enterActiveClass: 'transition duration-150 ease-out motion-reduce:transition-none',
+    enterFromClass: 'opacity-0 scale-95',
+    leaveActiveClass: 'transition duration-100 ease-in motion-reduce:transition-none',
+    leaveToClass: 'opacity-0 scale-95',
+  }"
+  class="max-h-(--sbf-available-height) w-(--sbf-reference-width) origin-(--sbf-transform-origin) overflow-y-auto rounded border bg-white shadow-lg"
+>
   …
 </SbFloating>
 ```
@@ -275,11 +307,29 @@ Panels are teleported to `body`, so their styles cannot be `scoped` to the compo
 
 ## ♿ Accessibility
 
-- `SbReference` gets `aria-expanded`, `aria-controls` (pointing to the panel `id`) and `aria-haspopup`; non-interactive tags get `role="button"`, `tabindex="0"` and Enter/Space.
-- `SbFloating` gets an `id` generated with Vue `useId()` (SSR safe) and a `role` (`dialog` by default).
-- Escape closes the innermost open panel; a press outside closes the panel. A container nested inside a panel counts as part of it.
-- With `autoFocus`, focus moves inside the panel after it is positioned.
-- When the panel closes with focus inside it, focus returns to the reference (with or without `autoFocus`).
+- `SbReference` gets an `id`, `aria-expanded`, `aria-controls` (pointing to the panel `id`) and `aria-haspopup` (following the panel `role`); non-interactive tags get `role="button"`, `tabindex="0"` and Enter/Space.
+- `SbFloating` gets an `id` generated with Vue `useId()` (SSR safe), a `role` (`dialog` by default) and, with a popup role (`dialog`, `alertdialog`, `menu`, `listbox`, `tree`, `grid`), `aria-labelledby` pointing to the reference.
+- **Tab order.** The panel is teleported to the end of `body`, so the library keeps the order a reader expects: Tab on the open reference enters the panel, Shift+Tab from its first element returns to the reference, Tab from its last element moves on to what follows the reference. Two hidden focus guards (`data-sbf-focus-guard`) around the panel do this; they are not rendered with `teleportDisabled`.
+- **Focus.** By default (`autoFocus`) focus moves inside the panel once it is positioned. When the panel closes with focus inside it, focus returns to the reference without scrolling the page.
+- **Dismissal.**
+  - Escape closes the most recently opened panel. It is ignored when a widget inside has already handled it (`event.preventDefault()`) and while an IME composition is in progress.
+  - 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 composite widgets: for `role="menu"`, `listbox` or `grid` panels, add the arrow-key navigation, Home/End and typeahead those roles promise to screen-reader users, and use valid structure (`menuitem` elements directly inside `menu`, no `ul > li` in between). A tooltip panel should use `role="tooltip"` and `:auto-focus="false"`, with `aria-describedby` on the trigger pointing to an element with your own `id` inside the panel (the [playground](playground/App.vue) has an example).
+
+---
+
+## 🔀 Migrating from v3
+
+The next major release changes these defaults:
+
+- **`autoFocus` is `true`.** Focus moves inside the panel when it opens. Set `:auto-focus="false"` on panels that must not take focus, such as tooltips.
+- **`ariaHaspopup` follows the panel `role`** instead of defaulting to `dialog`: drop the matching `aria-haspopup` you set by hand, keep it only where it differs from the role.
+- **Focus moving outside closes the panel.** Set `:close-on-focus-out="false"` to keep the previous behaviour.
+- **The panel is named after the reference** with `aria-labelledby`; pass `aria-label` or `aria-labelledby` to name it differently.
+- **Escape** no longer closes the panel when a widget inside called `preventDefault()` on it, and it now calls `preventDefault()` itself.
+- **`data-sbf-state` on the panel** becomes `closed` during the leave transition.
 
 ---
 

package/dist/components/SbContainer.vue.d.ts

@@ -25,6 +25,7 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<Omit<S
     trigger: import('..').SbTrigger;
     closeOnEscape: boolean;
     closeOnClickOutside: boolean;
+    closeOnFocusOut: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     default?: (props: SbContainerSlotProps) => unknown;
 }>;

package/dist/components/SbFloating.vue.d.ts

@@ -1,7 +1,8 @@
+import { TransitionProps } from 'vue';
 import { SbFloatingProps } from '../types';
-declare var __VLS_22: {};
+declare var __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<SbFloatingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "after-enter": () => any;
@@ -11,8 +12,8 @@ declare const __VLS_base: import('vue').DefineComponent<SbFloatingProps, {}, {},
     "onAfter-leave"?: (() => any) | undefined;
 }>, {
     as: string;
-    role: string;
-    transition: string;
+    role: string | null;
+    transition: string | TransitionProps;
     teleportTo: string | HTMLElement;
     teleportDisabled: boolean;
     zIndex: string | number;

package/dist/components/SbReference.vue.d.ts

@@ -4,7 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<SbReferenceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbReferenceProps> & Readonly<{}>, {
-    as: string;
+    as: string | import('vue').Component;
+    id: string;
     ariaHaspopup: "dialog" | "menu" | "listbox" | "tree" | "grid" | "true" | "false";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/context.d.ts

@@ -9,15 +9,24 @@ export interface SbFloatingContext extends FloatingPanel {
     disabled: Readonly<Ref<boolean>>;
     trigger: Readonly<Ref<SbTrigger>>;
     floatingId: string;
+    /** Id of the mounted `SbReference`, used to name the panel with `aria-labelledby`. */
+    referenceId: Ref<string | undefined>;
+    /** `role` of the mounted `SbFloating`, used to derive `aria-haspopup` on the reference. */
+    floatingRole: Ref<string | null>;
+    /** Set when an outside press closes the panel on a focusable element, which keeps focus. */
+    skipFocusReturn: boolean;
     open: () => void;
     close: () => void;
     toggle: () => void;
     /** Whether an event target is inside the reference, the panel or a nested container. */
     contains: (target: EventTarget | null) => boolean;
-    /** Whether a nested container is open. */
-    hasOpenChild: () => boolean;
     /** 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>;
 export declare function useSbFloatingContext(component: string): SbFloatingContext;

package/dist/focus.d.ts

@@ -0,0 +1,8 @@
+/** 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[];
+/** 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/sb-floating-panel.es.js

@@ -1,34 +1,37 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeStyle as f, onScopeDispose as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toRef as y, toValue as b, unref as x, useId as S, useModel as C, watch as w, withCtx as T } from "vue";
-import { autoUpdate as E, flip as D, hide as O, limitShift as k, offset as A, shift as j, size as M, useFloating as N } from "@floating-ui/vue";
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeStyle as f, onBeforeUnmount as p, onScopeDispose as m, openBlock as h, provide as g, ref as _, renderSlot as v, resolveDynamicComponent as y, toRef as b, toValue as x, unref as S, useAttrs as C, useId as w, useModel as T, watch as E, watchEffect as D, withCtx as O } from "vue";
+import { autoUpdate as k, flip as A, hide as j, limitShift as M, offset as N, shift as P, size as F, useFloating as I } from "@floating-ui/vue";
 //#region src/composables/useSbFloatingPanel.ts
-var P = (e) => `${Math.max(0, e)}px`;
-function F(e) {
-	let t = g(null), r = g(null), i = n(() => {
-		let t = b(e.padding), n = b(e.matchWidth), r = b(e.placement).includes("-"), i = D({
+var L = (e) => `${Math.max(0, e)}px`, R = (e) => {
+	let [t, n] = e.split("-"), r = n === "start" ? "0%" : n === "end" ? "100%" : "50%";
+	return t === "top" ? `${r} 100%` : t === "bottom" ? `${r} 0%` : t === "left" ? `100% ${r}` : `0% ${r}`;
+};
+function z(e) {
+	let t = _(null), r = _(null), i = n(() => {
+		let t = x(e.padding), n = x(e.matchWidth), r = x(e.placement).includes("-"), i = A({
 			padding: t,
 			crossAxis: "alignment",
 			fallbackAxisSideDirection: "end"
-		}), a = j({
+		}), a = P({
 			padding: t,
-			limiter: k()
+			limiter: M()
 		}), o = [
-			A(b(e.offset)),
+			N(x(e.offset)),
 			...r ? [i, a] : [a, i],
-			M({
+			F({
 				padding: t,
-				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i }) {
-					let { style: a } = t.floating, o = P(e.reference.width);
-					a.setProperty("--sbf-reference-width", o), a.setProperty("--sbf-available-width", P(r)), a.setProperty("--sbf-available-height", P(i)), a.width = n === !0 ? o : "", a.minWidth = n === "min" ? o : "";
+				apply({ rects: e, elements: t, availableWidth: r, availableHeight: i, placement: a }) {
+					let { style: o } = t.floating, s = L(e.reference.width);
+					o.setProperty("--sbf-reference-width", s), o.setProperty("--sbf-transform-origin", R(a)), o.setProperty("--sbf-available-width", L(r)), o.setProperty("--sbf-available-height", L(i)), o.width = n === !0 ? s : "", o.minWidth = n === "min" ? s : "";
 				}
 			})
 		];
-		return b(e.hideWhenDetached) && o.push(O({ padding: t })), o;
-	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = N(t, r, {
-		open: () => b(e.isOpen),
-		placement: () => b(e.placement),
-		strategy: () => b(e.strategy),
+		return x(e.hideWhenDetached) && o.push(j({ padding: t })), o;
+	}), { floatingStyles: a, middlewareData: o, placement: s, isPositioned: c, update: l } = I(t, r, {
+		open: () => x(e.isOpen),
+		placement: () => x(e.placement),
+		strategy: () => x(e.strategy),
 		middleware: i,
-		whileElementsMounted: E
+		whileElementsMounted: k
 	});
 	return {
 		reference: t,
@@ -46,15 +49,46 @@ function F(e) {
 }
 //#endregion
 //#region src/context.ts
-var I = Symbol("SbFloatingContext");
-function L(e) {
-	let t = c(I, null);
+var B = {
+	dialog: "dialog",
+	alertdialog: "dialog",
+	menu: "menu",
+	listbox: "listbox",
+	tree: "tree",
+	grid: "grid"
+}, V = Symbol("SbFloatingContext");
+function H(e) {
+	let t = c(V, null);
 	if (!t) throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);
 	return t;
 }
 //#endregion
+//#region src/focus.ts
+var U = "data-sbf-focus-guard", W = [
+	"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(","), G = (e) => e.tabIndex >= 0 && !e.hasAttribute("data-sbf-focus-guard") && !e.closest("[inert]") && (e.checkVisibility?.() ?? !0);
+function K(e) {
+	let t = e instanceof Element ? e.closest(W) : null;
+	return !!t && !t.closest("[inert]");
+}
+function q(e) {
+	return [...e.querySelectorAll(W)].filter(G);
+}
+function J(e, t) {
+	return q(e.ownerDocument).find((n) => !!(e.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING) && !e.contains(n) && !t(n));
+}
+//#endregion
 //#region src/components/SbContainer.vue?vue&type=script&setup=true&lang.ts
-var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
+var Y = [], X = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbContainer",
 	props: /*@__PURE__*/ l({
@@ -86,6 +120,10 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 		closeOnClickOutside: {
 			type: Boolean,
 			default: !0
+		},
+		closeOnFocusOut: {
+			type: Boolean,
+			default: !0
 		}
 	}, {
 		open: {
@@ -96,86 +134,118 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 	}),
 	emits: /*@__PURE__*/ l(["open", "close"], ["update:open"]),
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = C(e, "open"), o = r, s = n(() => !i.disabled && (a.value ?? i.defaultOpen)), l = (e) => {
-			e && i.disabled || e !== s.value && (a.value = e);
-		}, u = () => l(!0), d = () => l(!1), f = () => l(!s.value), m = F({
-			isOpen: s,
+		let i = e, a = T(e, "open"), o = r, s = i.defaultOpen, l = n(() => !i.disabled && (a.value ?? s)), u = (e) => {
+			e && i.disabled || e !== l.value && (a.value = e);
+		}, d = () => u(!0), f = () => u(!1), p = () => u(!l.value), h = z({
+			isOpen: l,
 			placement: () => i.placement,
 			strategy: () => i.strategy,
 			offset: () => i.offset,
 			padding: () => i.padding,
 			matchWidth: () => i.matchWidth,
 			hideWhenDetached: () => i.hideWhenDetached
-		}), g = /* @__PURE__ */ new Set(), v = {
-			...m,
-			isOpen: s,
-			disabled: y(i, "disabled"),
-			trigger: y(i, "trigger"),
-			floatingId: `${S()}-floating`,
-			open: u,
-			close: d,
-			toggle: f,
-			contains: (e) => e instanceof Node ? m.reference.value?.contains(e) || m.floating.value?.contains(e) ? !0 : [...g].some((t) => t.contains(e)) : !1,
-			hasOpenChild: () => [...g].some((e) => e.isOpen.value || e.hasOpenChild()),
-			registerChild: (e) => (g.add(e), () => g.delete(e))
-		}, b = c(I, null);
-		b && p(b.registerChild(v)), h(I, v);
-		let T = (e) => {
-			e.key === "Escape" && i.closeOnEscape && !v.hasOpenChild() && (R.has(e) || (R.add(e), d()));
-		}, E = (e) => {
-			i.closeOnClickOutside && (v.contains(e.composedPath()[0] ?? e.target) || d());
+		}), y = /* @__PURE__ */ new Set(), x = {
+			...h,
+			isOpen: l,
+			disabled: b(i, "disabled"),
+			trigger: b(i, "trigger"),
+			floatingId: `${w()}-floating`,
+			referenceId: _(),
+			floatingRole: _("dialog"),
+			skipFocusReturn: !1,
+			open: d,
+			close: f,
+			toggle: p,
+			contains: (e) => e instanceof Node ? h.reference.value?.contains(e) || h.floating.value?.contains(e) ? !0 : [...y].some((t) => t.contains(e)) : !1,
+			registerChild: (e) => (y.add(e), () => y.delete(e))
+		}, C = c(V, null);
+		C && m(C.registerChild(x)), g(V, x);
+		let D = (e) => {
+			e.key === "Escape" && Y[Y.length - 1] === x && (!i.closeOnEscape || e.defaultPrevented || e.isComposing || (e.preventDefault(), f()));
+		}, O = (e) => {
+			x.contains(e) || (x.skipFocusReturn = K(e), f());
+		}, k, A = (e) => {
+			if (k?.(), !i.closeOnClickOutside) return;
+			let t = e.composedPath()[0] ?? e.target;
+			if (e.pointerType !== "touch") {
+				O(t);
+				return;
+			}
+			if (x.contains(t)) return;
+			let n = (e) => {
+				k?.(), O(e.composedPath()[0] ?? e.target);
+			};
+			document.addEventListener("click", n, !0), k = () => {
+				document.removeEventListener("click", n, !0), k = void 0;
+			};
+		}, j = (e) => {
+			i.closeOnFocusOut && (x.contains(e.composedPath()[0] ?? e.target) || f());
 		};
-		return w(s, (e, t, n) => {
-			e && typeof document < "u" && (document.addEventListener("keydown", T), document.addEventListener("pointerdown", E, !0), n(() => {
-				document.removeEventListener("keydown", T), document.removeEventListener("pointerdown", E, !0);
+		return E(l, (e, t, n) => {
+			e && typeof document < "u" && (Y.push(x), document.addEventListener("keydown", D), document.addEventListener("pointerdown", A, !0), document.addEventListener("focusin", j), n(() => {
+				document.removeEventListener("keydown", D), document.removeEventListener("pointerdown", A, !0), document.removeEventListener("focusin", j), k?.(), Y.splice(Y.indexOf(x), 1);
 			}));
-		}, { immediate: !0 }), w(s, (e) => o(e ? "open" : "close")), w(() => i.disabled, (e) => {
-			e && a.value && (a.value = !1);
+		}, { immediate: !0 }), E(l, (e) => o(e ? "open" : "close")), E(() => i.disabled, (e) => {
+			e && (a.value ?? s) && (a.value = !1);
 		}), t({
-			open: u,
-			close: d,
-			toggle: f,
-			update: m.update
-		}), (e, t) => _(e.$slots, "default", {
-			isOpen: s.value,
-			open: u,
-			close: d,
-			toggle: f,
-			placement: x(m).placement.value,
-			side: x(m).side.value
+			open: d,
+			close: f,
+			toggle: p,
+			update: h.update
+		}), (e, t) => v(e.$slots, "default", {
+			isOpen: l.value,
+			open: d,
+			close: f,
+			toggle: p,
+			placement: S(h).placement.value,
+			side: S(h).side.value,
+			align: S(h).align.value
 		});
 	}
-}), B = /* @__PURE__ */ s({
+}), Z = /* @__PURE__ */ s({
 	__name: "SbReference",
 	props: {
 		as: { default: "button" },
-		ariaHaspopup: { default: "dialog" }
+		id: { default: void 0 },
+		ariaHaspopup: { default: void 0 }
 	},
 	setup(e) {
-		let t = e, i = L("SbReference"), { isOpen: a, disabled: o, floatingId: s } = i, c = n(() => t.as === "button" || t.as === "a"), l = (e) => {
-			i.reference.value = e instanceof HTMLElement ? e : null;
-		}, u = () => {
-			i.trigger.value === "click" && i.toggle();
-		}, d = (e) => {
-			c.value || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), u());
+		let t = e, i = C(), a = H("SbReference"), { isOpen: o, disabled: s, floatingId: c, floatingRole: l } = a, u = () => typeof t.as != "string" || t.as === "button" || t.as === "a" && i.href != null, d = `${w()}-reference`, f = n(() => t.id ?? d);
+		D(() => {
+			a.referenceId.value = f.value;
+		}), p(() => {
+			a.referenceId.value === f.value && (a.referenceId.value = void 0);
+		});
+		let m = n(() => t.ariaHaspopup ?? (l.value && Object.hasOwn(B, l.value) ? B[l.value] : void 0)), g = (e) => {
+			let t = e && typeof e == "object" && "$el" in e ? e.$el : e;
+			a.reference.value = t instanceof HTMLElement ? t : null;
+		}, _ = () => {
+			a.trigger.value === "click" && a.toggle();
+		}, b = (e) => {
+			let t = a.floating.value, n = t && q(t)[0];
+			n && (e.preventDefault(), n.focus());
+		}, x = (e) => {
+			e.key === "Tab" && !e.shiftKey && o.value ? b(e) : u() || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), _());
 		};
-		return (e, n) => (m(), r(v(t.as), {
-			ref: l,
+		return (e, n) => (h(), r(y(t.as), {
+			id: f.value,
+			ref: g,
 			type: t.as === "button" ? "button" : void 0,
-			role: c.value ? void 0 : "button",
-			tabindex: c.value ? void 0 : x(o) ? -1 : 0,
-			disabled: t.as === "button" && x(o) ? !0 : void 0,
-			"aria-disabled": !c.value && x(o) ? "true" : void 0,
-			"aria-haspopup": t.ariaHaspopup,
-			"aria-expanded": x(a) ? "true" : "false",
-			"aria-controls": x(a) ? x(s) : void 0,
-			"data-sbf-state": x(a) ? "open" : "closed",
-			onClick: u,
-			onKeydown: d
+			role: u() ? void 0 : "button",
+			tabindex: u() ? void 0 : S(s) ? -1 : 0,
+			disabled: t.as === "button" && S(s) ? !0 : void 0,
+			"aria-disabled": t.as !== "button" && S(s) ? "true" : void 0,
+			"aria-haspopup": m.value,
+			"aria-expanded": S(o) ? "true" : "false",
+			"aria-controls": S(o) ? S(c) : void 0,
+			"data-sbf-state": S(o) ? "open" : "closed",
+			onClick: _,
+			onKeydown: x
 		}, {
-			default: T(() => [_(e.$slots, "default")]),
+			default: O(() => [v(e.$slots, "default")]),
 			_: 3
 		}, 40, [
+			"id",
 			"type",
 			"role",
 			"tabindex",
@@ -187,7 +257,7 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 			"data-sbf-state"
 		]));
 	}
-}), V = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", H = /* @__PURE__ */ s({
+}), Q = /* @__PURE__ */ s({
 	inheritAttrs: !1,
 	__name: "SbFloating",
 	props: {
@@ -202,69 +272,105 @@ var R = /* @__PURE__ */ new WeakSet(), z = /* @__PURE__ */ s({
 		zIndex: { default: void 0 },
 		autoFocus: {
 			type: Boolean,
-			default: !1
+			default: !0
 		}
 	},
 	emits: ["after-enter", "after-leave"],
 	setup(s, { emit: c }) {
-		let l = s, p = c, h = L("SbFloating"), { isOpen: y, floatingId: b, side: S, align: C } = h, E = g(y.value), D = g(null), O = (e) => {
-			h.floating.value = e instanceof HTMLElement ? e : null;
-		}, k = (e) => {
-			D.value = e instanceof HTMLElement ? e : null;
-		}, A = n(() => ({
-			...h.floatingStyles.value,
+		let l = s, p = c, m = C(), g = H("SbFloating"), { isOpen: b, floatingId: x, referenceId: w, side: T, align: k } = g;
+		D(() => {
+			g.floatingRole.value = l.role;
+		});
+		let A = _(b.value), j = _(null), M = (e) => {
+			g.floating.value = e instanceof HTMLElement ? e : null;
+		}, N = (e) => {
+			j.value = e instanceof HTMLElement ? e : null;
+		}, P = n(() => ({
+			...g.floatingStyles.value,
 			...l.zIndex === void 0 ? {} : { zIndex: l.zIndex }
-		})), j = () => p("after-enter"), M = () => {
-			y.value || (E.value = !1), p("after-leave");
-		}, N = () => {
-			let e = D.value;
-			e && (e.querySelector("[autofocus]") ?? e.querySelector(V) ?? e).focus({ preventScroll: !0 });
+		})), F = () => ({
+			"aria-labelledby": l.role && Object.hasOwn(B, l.role) && m["aria-label"] == null ? w.value : void 0,
+			...m
+		}), I = n(() => b.value && !l.teleportDisabled), L = {
+			[U]: "",
+			tabindex: 0,
+			style: {
+				position: "fixed",
+				opacity: 0,
+				outline: "none",
+				pointerEvents: "none"
+			}
+		}, R = n(() => {
+			let { transition: e } = l;
+			return e ? typeof e == "string" ? { name: e } : e : { css: !1 };
+		}), z = (e) => e.setAttribute("data-sbf-state", "closed"), V = () => p("after-enter"), W = () => {
+			b.value || (A.value = !1), p("after-leave");
+		}, G = (e) => e instanceof Node && !!j.value?.contains(e), K = (e) => {
+			let t = j.value;
+			if (!t) return;
+			let n = q(t);
+			((e === "first" ? n[0] : n[n.length - 1]) ?? t).focus({ preventScroll: !0 });
+		}, Y = (e) => {
+			G(e.relatedTarget) ? g.reference.value?.focus() : K("first");
+		}, X = (e) => {
+			if (!G(e.relatedTarget)) {
+				K("last");
+				return;
+			}
+			let t = g.reference.value;
+			((t && J(t, (e) => g.contains(e))) ?? t)?.focus();
+		}, Z = () => {
+			let e = j.value;
+			e && (e.querySelector("[autofocus]") ?? q(e)[0] ?? e).focus({ preventScroll: !0 });
 		};
-		return w(y, (e) => {
-			if (e) {
-				E.value = !0;
+		return E(b, (e) => {
+			let t = g.skipFocusReturn;
+			if (g.skipFocusReturn = !1, e) {
+				A.value = !0;
 				return;
 			}
-			let t = document.activeElement;
-			t && h.floating.value?.contains(t) && h.reference.value?.focus();
-		}), w(() => y.value && h.isPositioned.value, async (e) => {
-			e && l.autoFocus && (await d(), N());
-		}), (n, s) => (m(), r(e, {
+			let n = document.activeElement;
+			!t && n && g.floating.value?.contains(n) && g.reference.value?.focus({ preventScroll: !0 });
+		}), E(() => b.value && g.isPositioned.value, async (e) => {
+			e && l.autoFocus && (await d(), Z());
+		}), (n, s) => (h(), r(e, {
 			to: l.teleportTo,
 			disabled: l.teleportDisabled
-		}, [E.value ? (m(), a("div", {
+		}, [A.value ? (h(), a("div", {
 			key: 0,
-			ref: O,
-			style: f(A.value)
-		}, [o(t, {
-			name: l.transition,
-			css: !!l.transition,
-			appear: "",
-			onAfterEnter: j,
-			onAfterLeave: M
-		}, {
-			default: T(() => [x(y) ? (m(), r(v(l.as), u({ key: 0 }, n.$attrs, {
-				id: x(b),
-				ref: k,
-				role: l.role,
-				tabindex: l.autoFocus ? -1 : void 0,
-				"data-sbf-state": x(y) ? "open" : "closed",
-				"data-sbf-side": x(S),
-				"data-sbf-align": x(C)
+			ref: M,
+			style: f(P.value)
+		}, [
+			I.value ? (h(), a("span", u({ key: 0 }, L, { onFocus: Y }), null, 16)) : i("", !0),
+			o(t, u(R.value, {
+				appear: "",
+				onBeforeLeave: z,
+				onAfterEnter: V,
+				onAfterLeave: W
 			}), {
-				default: T(() => [_(n.$slots, "default")]),
+				default: O(() => [S(b) ? (h(), r(y(l.as), u({ key: 0 }, F(), {
+					id: S(x),
+					ref: N,
+					role: l.role ?? void 0,
+					tabindex: l.autoFocus ? -1 : void 0,
+					"data-sbf-state": "open",
+					"data-sbf-side": S(T),
+					"data-sbf-align": S(k)
+				}), {
+					default: O(() => [v(n.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"id",
+					"role",
+					"tabindex",
+					"data-sbf-side",
+					"data-sbf-align"
+				])) : i("", !0)]),
 				_: 3
-			}, 16, [
-				"id",
-				"role",
-				"tabindex",
-				"data-sbf-state",
-				"data-sbf-side",
-				"data-sbf-align"
-			])) : i("", !0)]),
-			_: 3
-		}, 8, ["name", "css"])], 4)) : i("", !0)], 8, ["to", "disabled"]));
+			}, 16),
+			I.value ? (h(), a("span", u({ key: 1 }, L, { onFocus: X }), null, 16)) : i("", !0)
+		], 4)) : i("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { z as SbContainer, H as SbFloating, B as SbReference };
+export { X as SbContainer, Q as SbFloating, Z 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`;function i(e){let i=(0,t.ref)(null),a=(0,t.ref)(null),o=(0,t.computed)(()=>{let i=(0,t.toValue)(e.padding),a=(0,t.toValue)(e.matchWidth),o=(0,t.toValue)(e.placement).includes(`-`),s=(0,n.flip)({padding:i,crossAxis:`alignment`,fallbackAxisSideDirection:`end`}),c=(0,n.shift)({padding:i,limiter:(0,n.limitShift)()}),l=[(0,n.offset)((0,t.toValue)(e.offset)),...o?[s,c]:[c,s],(0,n.size)({padding:i,apply({rects:e,elements:t,availableWidth:n,availableHeight:i}){let{style:o}=t.floating,s=r(e.reference.width);o.setProperty(`--sbf-reference-width`,s),o.setProperty(`--sbf-available-width`,r(n)),o.setProperty(`--sbf-available-height`,r(i)),o.width=a===!0?s:``,o.minWidth=a===`min`?s:``}})];return(0,t.toValue)(e.hideWhenDetached)&&l.push((0,n.hide)({padding:i})),l}),{floatingStyles:s,middlewareData:c,placement:l,isPositioned:u,update:d}=(0,n.useFloating)(i,a,{open:()=>(0,t.toValue)(e.isOpen),placement:()=>(0,t.toValue)(e.placement),strategy:()=>(0,t.toValue)(e.strategy),middleware:o,whileElementsMounted:n.autoUpdate});return{reference:i,floating:a,floatingStyles:(0,t.computed)(()=>({...s.value,...c.value.hide?.referenceHidden?{visibility:`hidden`}:{}})),placement:l,side:(0,t.computed)(()=>l.value.split(`-`)[0]),align:(0,t.computed)(()=>l.value.split(`-`)[1]),isPositioned:u,update:d}}var a=Symbol(`SbFloatingContext`);function o(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 s=new WeakSet,c=(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,default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{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 o=e,c=(0,t.useModel)(e,`open`),l=r,u=(0,t.computed)(()=>!o.disabled&&(c.value??o.defaultOpen)),d=e=>{e&&o.disabled||e!==u.value&&(c.value=e)},f=()=>d(!0),p=()=>d(!1),m=()=>d(!u.value),h=i({isOpen:u,placement:()=>o.placement,strategy:()=>o.strategy,offset:()=>o.offset,padding:()=>o.padding,matchWidth:()=>o.matchWidth,hideWhenDetached:()=>o.hideWhenDetached}),g=new Set,_={...h,isOpen:u,disabled:(0,t.toRef)(o,`disabled`),trigger:(0,t.toRef)(o,`trigger`),floatingId:`${(0,t.useId)()}-floating`,open:f,close:p,toggle:m,contains:e=>e instanceof Node?h.reference.value?.contains(e)||h.floating.value?.contains(e)?!0:[...g].some(t=>t.contains(e)):!1,hasOpenChild:()=>[...g].some(e=>e.isOpen.value||e.hasOpenChild()),registerChild:e=>(g.add(e),()=>g.delete(e))},v=(0,t.inject)(a,null);v&&(0,t.onScopeDispose)(v.registerChild(_)),(0,t.provide)(a,_);let y=e=>{e.key===`Escape`&&o.closeOnEscape&&!_.hasOpenChild()&&(s.has(e)||(s.add(e),p()))},b=e=>{o.closeOnClickOutside&&(_.contains(e.composedPath()[0]??e.target)||p())};return(0,t.watch)(u,(e,t,n)=>{e&&typeof document<`u`&&(document.addEventListener(`keydown`,y),document.addEventListener(`pointerdown`,b,!0),n(()=>{document.removeEventListener(`keydown`,y),document.removeEventListener(`pointerdown`,b,!0)}))},{immediate:!0}),(0,t.watch)(u,e=>l(e?`open`:`close`)),(0,t.watch)(()=>o.disabled,e=>{e&&c.value&&(c.value=!1)}),n({open:f,close:p,toggle:m,update:h.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:u.value,open:f,close:p,toggle:m,placement:(0,t.unref)(h).placement.value,side:(0,t.unref)(h).side.value})}}),l=(0,t.defineComponent)({__name:`SbReference`,props:{as:{default:`button`},ariaHaspopup:{default:`dialog`}},setup(e){let n=e,r=o(`SbReference`),{isOpen:i,disabled:a,floatingId:s}=r,c=(0,t.computed)(()=>n.as===`button`||n.as===`a`),l=e=>{r.reference.value=e instanceof HTMLElement?e:null},u=()=>{r.trigger.value===`click`&&r.toggle()},d=e=>{c.value||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),u())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{ref:l,type:n.as===`button`?`button`:void 0,role:c.value?void 0:`button`,tabindex:c.value?void 0:(0,t.unref)(a)?-1:0,disabled:n.as===`button`&&(0,t.unref)(a)?!0:void 0,"aria-disabled":!c.value&&(0,t.unref)(a)?`true`:void 0,"aria-haspopup":n.ariaHaspopup,"aria-expanded":(0,t.unref)(i)?`true`:`false`,"aria-controls":(0,t.unref)(i)?(0,t.unref)(s):void 0,"data-sbf-state":(0,t.unref)(i)?`open`:`closed`,onClick:u,onKeydown:d},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},40,[`type`,`role`,`tabindex`,`disabled`,`aria-disabled`,`aria-haspopup`,`aria-expanded`,`aria-controls`,`data-sbf-state`]))}}),u=`a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]`,d=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{default:void 0},teleportTo:{default:`body`},teleportDisabled:{type:Boolean,default:!1},zIndex:{default:void 0},autoFocus:{type:Boolean,default:!1}},emits:[`after-enter`,`after-leave`],setup(e,{emit:n}){let r=e,i=n,a=o(`SbFloating`),{isOpen:s,floatingId:c,side:l,align:d}=a,f=(0,t.ref)(s.value),p=(0,t.ref)(null),m=e=>{a.floating.value=e instanceof HTMLElement?e:null},h=e=>{p.value=e instanceof HTMLElement?e:null},g=(0,t.computed)(()=>({...a.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),_=()=>i(`after-enter`),v=()=>{s.value||(f.value=!1),i(`after-leave`)},y=()=>{let e=p.value;e&&(e.querySelector(`[autofocus]`)??e.querySelector(u)??e).focus({preventScroll:!0})};return(0,t.watch)(s,e=>{if(e){f.value=!0;return}let t=document.activeElement;t&&a.floating.value?.contains(t)&&a.reference.value?.focus()}),(0,t.watch)(()=>s.value&&a.isPositioned.value,async e=>{e&&r.autoFocus&&(await(0,t.nextTick)(),y())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:r.teleportTo,disabled:r.teleportDisabled},[f.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:m,style:(0,t.normalizeStyle)(g.value)},[(0,t.createVNode)(t.Transition,{name:r.transition,css:!!r.transition,appear:``,onAfterEnter:_,onAfterLeave:v},{default:(0,t.withCtx)(()=>[(0,t.unref)(s)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},e.$attrs,{id:(0,t.unref)(c),ref:h,role:r.role,tabindex:r.autoFocus?-1:void 0,"data-sbf-state":(0,t.unref)(s)?`open`:`closed`,"data-sbf-side":(0,t.unref)(l),"data-sbf-align":(0,t.unref)(d)}),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`role`,`tabindex`,`data-sbf-state`,`data-sbf-side`,`data-sbf-align`])):(0,t.createCommentVNode)(``,!0)]),_:3},8,[`name`,`css`])],4)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});e.SbContainer=c,e.SbFloating=d,e.SbReference=l});
+(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=>{let[t,n]=e.split(`-`),r=n===`start`?`0%`:n===`end`?`100%`:`50%`;return t===`top`?`${r} 100%`:t===`bottom`?`${r} 0%`:t===`left`?`100% ${r}`:`0% ${r}`};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),c.setProperty(`--sbf-transform-origin`,i(s)),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});return{reference:a,floating:o,floatingStyles:(0,t.computed)(()=>({...c.value,...l.value.hide?.referenceHidden?{visibility:`hidden`}:{}})),placement:u,side:(0,t.computed)(()=>u.value.split(`-`)[0]),align:(0,t.computed)(()=>u.value.split(`-`)[1]),isPositioned:d,update:f}}var o={dialog:`dialog`,alertdialog:`dialog`,menu:`menu`,listbox:`listbox`,tree:`tree`,grid:`grid`},s=Symbol(`SbFloatingContext`);function c(e){let n=(0,t.inject)(s,null);if(!n)throw Error(`[sb-floating-panel-vue] <${e}> must be used inside <SbContainer>.`);return n}var l=`data-sbf-focus-guard`,u=[`a[href]`,`button:not([disabled])`,`input:not([disabled]):not([type="hidden"])`,`select:not([disabled])`,`textarea:not([disabled])`,`summary`,`audio[controls]`,`video[controls]`,`[tabindex]`,`[contenteditable="true"]`].join(`,`),d=e=>e.tabIndex>=0&&!e.hasAttribute(`data-sbf-focus-guard`)&&!e.closest(`[inert]`)&&(e.checkVisibility?.()??!0);function f(e){let t=e instanceof Element?e.closest(u):null;return!!t&&!t.closest(`[inert]`)}function p(e){return[...e.querySelectorAll(u)].filter(d)}function m(e,t){return p(e.ownerDocument).find(n=>!!(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)&&!e.contains(n)&&!t(n))}var h=[],g=(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,default:!1},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{default:`click`},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`),c=r,l=i.defaultOpen,u=(0,t.computed)(()=>!i.disabled&&(o.value??l)),d=e=>{e&&i.disabled||e!==u.value&&(o.value=e)},p=()=>d(!0),m=()=>d(!1),g=()=>d(!u.value),_=a({isOpen:u,placement:()=>i.placement,strategy:()=>i.strategy,offset:()=>i.offset,padding:()=>i.padding,matchWidth:()=>i.matchWidth,hideWhenDetached:()=>i.hideWhenDetached}),v=new Set,y={..._,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`),skipFocusReturn:!1,open:p,close:m,toggle:g,contains:e=>e instanceof Node?_.reference.value?.contains(e)||_.floating.value?.contains(e)?!0:[...v].some(t=>t.contains(e)):!1,registerChild:e=>(v.add(e),()=>v.delete(e))},b=(0,t.inject)(s,null);b&&(0,t.onScopeDispose)(b.registerChild(y)),(0,t.provide)(s,y);let x=e=>{e.key===`Escape`&&h[h.length-1]===y&&(!i.closeOnEscape||e.defaultPrevented||e.isComposing||(e.preventDefault(),m()))},S=e=>{y.contains(e)||(y.skipFocusReturn=f(e),m())},C,w=e=>{if(C?.(),!i.closeOnClickOutside)return;let t=e.composedPath()[0]??e.target;if(e.pointerType!==`touch`){S(t);return}if(y.contains(t))return;let n=e=>{C?.(),S(e.composedPath()[0]??e.target)};document.addEventListener(`click`,n,!0),C=()=>{document.removeEventListener(`click`,n,!0),C=void 0}},T=e=>{i.closeOnFocusOut&&(y.contains(e.composedPath()[0]??e.target)||m())};return(0,t.watch)(u,(e,t,n)=>{e&&typeof document<`u`&&(h.push(y),document.addEventListener(`keydown`,x),document.addEventListener(`pointerdown`,w,!0),document.addEventListener(`focusin`,T),n(()=>{document.removeEventListener(`keydown`,x),document.removeEventListener(`pointerdown`,w,!0),document.removeEventListener(`focusin`,T),C?.(),h.splice(h.indexOf(y),1)}))},{immediate:!0}),(0,t.watch)(u,e=>c(e?`open`:`close`)),(0,t.watch)(()=>i.disabled,e=>{e&&(o.value??l)&&(o.value=!1)}),n({open:p,close:m,toggle:g,update:_.update}),(e,n)=>(0,t.renderSlot)(e.$slots,`default`,{isOpen:u.value,open:p,close:m,toggle:g,placement:(0,t.unref)(_).placement.value,side:(0,t.unref)(_).side.value,align:(0,t.unref)(_).align.value})}}),_=(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=c(`SbReference`),{isOpen:a,disabled:s,floatingId:l,floatingRole:u}=i,d=()=>typeof n.as!=`string`||n.as===`button`||n.as===`a`&&r.href!=null,f=`${(0,t.useId)()}-reference`,m=(0,t.computed)(()=>n.id??f);(0,t.watchEffect)(()=>{i.referenceId.value=m.value}),(0,t.onBeforeUnmount)(()=>{i.referenceId.value===m.value&&(i.referenceId.value=void 0)});let h=(0,t.computed)(()=>n.ariaHaspopup??(u.value&&Object.hasOwn(o,u.value)?o[u.value]:void 0)),g=e=>{let t=e&&typeof e==`object`&&`$el`in e?e.$el:e;i.reference.value=t instanceof HTMLElement?t:null},_=()=>{i.trigger.value===`click`&&i.toggle()},v=e=>{let t=i.floating.value,n=t&&p(t)[0];n&&(e.preventDefault(),n.focus())},y=e=>{e.key===`Tab`&&!e.shiftKey&&a.value?v(e):d()||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),_())};return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.as),{id:m.value,ref:g,type:n.as===`button`?`button`:void 0,role:d()?void 0:`button`,tabindex:d()?void 0:(0,t.unref)(s)?-1:0,disabled:n.as===`button`&&(0,t.unref)(s)?!0:void 0,"aria-disabled":n.as!==`button`&&(0,t.unref)(s)?`true`:void 0,"aria-haspopup":h.value,"aria-expanded":(0,t.unref)(a)?`true`:`false`,"aria-controls":(0,t.unref)(a)?(0,t.unref)(l):void 0,"data-sbf-state":(0,t.unref)(a)?`open`:`closed`,onClick:_,onKeydown:y},{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`,`data-sbf-state`]))}}),v=(0,t.defineComponent)({inheritAttrs:!1,__name:`SbFloating`,props:{as:{default:`div`},role:{default:`dialog`},transition:{default:void 0},teleportTo:{default:`body`},teleportDisabled:{type:Boolean,default:!1},zIndex:{default:void 0},autoFocus:{type:Boolean,default:!0}},emits:[`after-enter`,`after-leave`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.useAttrs)(),s=c(`SbFloating`),{isOpen:u,floatingId:d,referenceId:f,side:h,align:g}=s;(0,t.watchEffect)(()=>{s.floatingRole.value=r.role});let _=(0,t.ref)(u.value),v=(0,t.ref)(null),y=e=>{s.floating.value=e instanceof HTMLElement?e:null},b=e=>{v.value=e instanceof HTMLElement?e:null},x=(0,t.computed)(()=>({...s.floatingStyles.value,...r.zIndex===void 0?{}:{zIndex:r.zIndex}})),S=()=>({"aria-labelledby":r.role&&Object.hasOwn(o,r.role)&&a[`aria-label`]==null?f.value:void 0,...a}),C=(0,t.computed)(()=>u.value&&!r.teleportDisabled),w={[l]:``,tabindex:0,style:{position:`fixed`,opacity:0,outline:`none`,pointerEvents:`none`}},T=(0,t.computed)(()=>{let{transition:e}=r;return e?typeof e==`string`?{name:e}:e:{css:!1}}),E=e=>e.setAttribute(`data-sbf-state`,`closed`),D=()=>i(`after-enter`),O=()=>{u.value||(_.value=!1),i(`after-leave`)},k=e=>e instanceof Node&&!!v.value?.contains(e),A=e=>{let t=v.value;if(!t)return;let n=p(t);((e===`first`?n[0]:n[n.length-1])??t).focus({preventScroll:!0})},j=e=>{k(e.relatedTarget)?s.reference.value?.focus():A(`first`)},M=e=>{if(!k(e.relatedTarget)){A(`last`);return}let t=s.reference.value;((t&&m(t,e=>s.contains(e)))??t)?.focus()},N=()=>{let e=v.value;e&&(e.querySelector(`[autofocus]`)??p(e)[0]??e).focus({preventScroll:!0})};return(0,t.watch)(u,e=>{let t=s.skipFocusReturn;if(s.skipFocusReturn=!1,e){_.value=!0;return}let n=document.activeElement;!t&&n&&s.floating.value?.contains(n)&&s.reference.value?.focus({preventScroll:!0})}),(0,t.watch)(()=>u.value&&s.isPositioned.value,async e=>{e&&r.autoFocus&&(await(0,t.nextTick)(),N())}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:r.teleportTo,disabled:r.teleportDisabled},[_.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:y,style:(0,t.normalizeStyle)(x.value)},[C.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0},w,{onFocus:j}),null,16)):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(t.Transition,(0,t.mergeProps)(T.value,{appear:``,onBeforeLeave:E,onAfterEnter:D,onAfterLeave:O}),{default:(0,t.withCtx)(()=>[(0,t.unref)(u)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(r.as),(0,t.mergeProps)({key:0},S(),{id:(0,t.unref)(d),ref:b,role:r.role??void 0,tabindex:r.autoFocus?-1:void 0,"data-sbf-state":`open`,"data-sbf-side":(0,t.unref)(h),"data-sbf-align":(0,t.unref)(g)}),{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),C.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:1},w,{onFocus:M}),null,16)):(0,t.createCommentVNode)(``,!0)],4)):(0,t.createCommentVNode)(``,!0)],8,[`to`,`disabled`]))}});e.SbContainer=g,e.SbFloating=v,e.SbReference=_});

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import { Component, 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. */
@@ -80,6 +81,12 @@ export interface SbContainerProps {
      * @default true
      */
     closeOnClickOutside?: boolean;
+    /**
+     * Closes the panel when keyboard focus moves outside the reference and the panel
+     * (e.g. tabbing past the last element of the panel).
+     * @default true
+     */
+    closeOnFocusOut?: boolean;
 }
 /**
  * Props passed to the default slot of `SbContainer`.
@@ -97,6 +104,8 @@ export interface SbContainerSlotProps {
     placement: SbPlacement;
     /** Side of the resolved placement. */
     side: SbSide;
+    /** Alignment of the resolved placement, `undefined` when centered. */
+    align: SbAlignment | undefined;
 }
 /**
  * Methods exposed by `SbContainer` through a template ref.
@@ -116,14 +125,26 @@ export interface SbContainerExposed {
  */
 export interface SbReferenceProps {
     /**
-     * HTML tag to render. A `button` gets `type="button"`; any tag other than `button` and `a`
-     * gets `role="button"`, `tabindex="0"` and Enter/Space handling.
+     * 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).
+     * - Any other tag (including `a` without `href`) gets `role="button"`, `tabindex="0"` and
+     *   Enter/Space handling.
+     *
+     * When disabled, `button` gets `disabled`; anything else gets `aria-disabled="true"`.
      * @default 'button'
      */
-    as?: string;
+    as?: string | Component;
     /**
-     * Value of `aria-haspopup`, matching the `role` of `SbFloating`.
-     * @default 'dialog'
+     * `id` of the element. The panel is named after the reference with `aria-labelledby`.
+     * @default an id generated with `useId()`
+     */
+    id?: string;
+    /**
+     * Value of `aria-haspopup`. When unset it follows the `role` of `SbFloating`
+     * (`dialog`, `menu`, `listbox`, `tree`, `grid`; `alertdialog` gives `dialog`)
+     * and is left out for any other role.
      */
     ariaHaspopup?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true' | 'false';
 }
@@ -137,15 +158,24 @@ export interface SbFloatingProps {
      */
     as?: string;
     /**
-     * ARIA role of the panel.
+     * ARIA role of the panel. 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.
+     * `null` renders no role (disclosure pattern).
      * @default 'dialog'
      */
-    role?: string;
+    role?: string | null;
     /**
-     * Name of a Vue `<Transition>` defined by your CSS (`<name>-enter-active`, …).
-     * The classes are applied to the panel element. No animation when unset.
+     * Animation of the panel, through a Vue `<Transition>` on the panel element.
+     * - A name: the classes of your CSS (`<name>-enter-active`, …).
+     * - An object of `<Transition>` props: e.g. `enterActiveClass`, `leaveToClass` with
+     *   Tailwind utilities, or JavaScript hooks.
+     *
+     * With any transition, Vue also waits for CSS animations keyed on
+     * `data-sbf-state="closed"`, set on the panel when it starts leaving.
+     * No animation when unset.
      */
-    transition?: string;
+    transition?: string | TransitionProps;
     /**
      * Teleport target (CSS selector or element).
      * @default 'body'
@@ -163,7 +193,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.
-     * @default false
+     * Set it to `false` for panels that must not take focus, such as tooltips.
+     * @default true
      */
     autoFocus?: boolean;
 }

package/package.json

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