@skdx/vue 0.28.0 → 0.29.0

package/dist/utils/useFocusTrap.cjs

@@ -1 +1 @@
-const y=require("./tabbable.cjs");let s=require("vue");function p(n){return Array.from(n.querySelectorAll(y.TABBABLE_SELECTOR)).filter(t=>t.offsetParent!==null||t===document.activeElement)}function f(n,t){if(!t)return!0;const o=new CustomEvent(n,{cancelable:!0,detail:null});return t(o),!o.defaultPrevented}function A(n,t,o={}){let u=null,a,l=!1;const v=e=>{if(e.key!=="Tab")return;const r=n.value;if(!r)return;const c=p(r);if(c.length===0){e.preventDefault();return}const b=c[0],E=c[c.length-1],i=document.activeElement;e.shiftKey&&(i===b||i===r)?(e.preventDefault(),E.focus()):!e.shiftKey&&i===E&&(e.preventDefault(),b.focus())};function d(){const e=n.value;e&&(l=!0,u=document.activeElement,a=requestAnimationFrame(()=>{if(!f("open-auto-focus",o.onOpenAutoFocus))return;const r=p(e)[0]??e;e.contains(document.activeElement)||(e.tabIndex=e.tabIndex>=0?e.tabIndex:-1,r.focus({preventScroll:!0}))}),e.addEventListener("keydown",v))}function m(){if(!l)return;l=!1;const e=n.value;if(a!==void 0&&cancelAnimationFrame(a),e?.removeEventListener("keydown",v),!f("close-auto-focus",o.onCloseAutoFocus)){u=null;return}u&&u!==document.body&&document.contains(u)&&u.focus({preventScroll:!0}),u=null}(0,s.watch)(t,e=>{e?d():m()},{flush:"post"}),(0,s.onMounted)(()=>{t.value&&d()}),(0,s.onBeforeUnmount)(m)}exports.autoFocusEvent=f;exports.useFocusTrap=A;
+const A=require("./tabbable.cjs"),y=require("./dismissal.cjs"),b=require("./focus-targets.cjs");let l=require("vue");function E(n){return Array.from(n.querySelectorAll(A.TABBABLE_SELECTOR)).filter(u=>u.offsetParent!==null||u===document.activeElement)}function p(n,u,t={}){let o=null,a,c=!1;const f=e=>{if(e.key!=="Tab")return;const i=n.value;if(!i)return;const r=E(i);if(r.length===0){e.preventDefault();return}const d=r[0],F=r[r.length-1],s=document.activeElement;e.shiftKey&&(s===d||s===i)?(e.preventDefault(),F.focus()):!e.shiftKey&&s===F&&(e.preventDefault(),d.focus())};function v(){const e=n.value;e&&(c=!0,o=document.activeElement,a=requestAnimationFrame(()=>{e.tabIndex=e.tabIndex>=0?e.tabIndex:-1,y.focusOnOpen(()=>b.applyOpenAutoFocus(e,t.initialFocus,t.family??"Popover",t.onOpenAutoFocus))}),e.addEventListener("keydown",f))}function m(){if(!c)return;c=!1;const e=n.value;a!==void 0&&cancelAnimationFrame(a),e?.removeEventListener("keydown",f),b.returnFocus(t.finalFocus,t.family??"Popover",o,t.onCloseAutoFocus),o=null}(0,l.watch)(u,e=>{e?v():m()},{flush:"post"}),(0,l.onMounted)(()=>{u.value&&v()}),(0,l.onBeforeUnmount)(m)}exports.autoFocusEvent=y.autoFocusEvent;exports.useFocusTrap=p;

package/dist/utils/useFocusTrap.d.cts

@@ -1,21 +1,19 @@
 import { type Ref } from 'vue';
-/** Cancelable stand-in for auto-focus moves (no native event exists). */
-export type AutoFocusEvent = CustomEvent<null>;
-/**
- * Announces auto-focus move as cancelable event, returning whether it may proceed.
- * Shared by focus trap and overlay return-focus handlers. @internal
- */
-export declare function autoFocusEvent(type: 'open-auto-focus' | 'close-auto-focus', handler?: (event: AutoFocusEvent) => void): boolean;
+import { type AutoFocusEvent } from './dismissal.cjs';
+import { type FocusTargetFamily } from './focus-targets.cjs';
+export { autoFocusEvent, type AutoFocusEvent } from './dismissal.cjs';
 /** @internal Consumer overrides for the two auto-focus moves the trap makes. */
 export interface FocusTrapOptions {
     /** Fired before focus moves into the container; `preventDefault()` leaves focus where it is. */
     onOpenAutoFocus?: (event: AutoFocusEvent) => void;
     /** Fired before focus returns to the previously focused element; `preventDefault()` suppresses the return. */
     onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    /** CSS selector for the element inside the container that takes initial focus, ahead of the first tabbable one. */
+    initialFocus?: string | undefined;
+    /** CSS selector, resolved against the document, for the element focus returns to instead of the opener. */
+    finalFocus?: string | undefined;
+    /** Which overlay family the trap serves, for the console warning a missed selector prints. */
+    family?: FocusTargetFamily | undefined;
 }
-/**
- * Traps Tab inside containerRef while enabled; focuses first tabbable on
- * mount/position, restores previously-focused on disable/unmount. Each move
- * announced as cancelable event for consumer redirect or override. @internal
- */
+/** Traps Tab inside `containerRef` while enabled, focusing the first tabbable and restoring focus on disable/unmount. @internal */
 export declare function useFocusTrap(containerRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: FocusTrapOptions): void;

package/dist/utils/useFocusTrap.d.ts

@@ -1,21 +1,19 @@
 import { type Ref } from 'vue';
-/** Cancelable stand-in for auto-focus moves (no native event exists). */
-export type AutoFocusEvent = CustomEvent<null>;
-/**
- * Announces auto-focus move as cancelable event, returning whether it may proceed.
- * Shared by focus trap and overlay return-focus handlers. @internal
- */
-export declare function autoFocusEvent(type: 'open-auto-focus' | 'close-auto-focus', handler?: (event: AutoFocusEvent) => void): boolean;
+import { type AutoFocusEvent } from './dismissal.js';
+import { type FocusTargetFamily } from './focus-targets.js';
+export { autoFocusEvent, type AutoFocusEvent } from './dismissal.js';
 /** @internal Consumer overrides for the two auto-focus moves the trap makes. */
 export interface FocusTrapOptions {
     /** Fired before focus moves into the container; `preventDefault()` leaves focus where it is. */
     onOpenAutoFocus?: (event: AutoFocusEvent) => void;
     /** Fired before focus returns to the previously focused element; `preventDefault()` suppresses the return. */
     onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    /** CSS selector for the element inside the container that takes initial focus, ahead of the first tabbable one. */
+    initialFocus?: string | undefined;
+    /** CSS selector, resolved against the document, for the element focus returns to instead of the opener. */
+    finalFocus?: string | undefined;
+    /** Which overlay family the trap serves, for the console warning a missed selector prints. */
+    family?: FocusTargetFamily | undefined;
 }
-/**
- * Traps Tab inside containerRef while enabled; focuses first tabbable on
- * mount/position, restores previously-focused on disable/unmount. Each move
- * announced as cancelable event for consumer redirect or override. @internal
- */
+/** Traps Tab inside `containerRef` while enabled, focusing the first tabbable and restoring focus on disable/unmount. @internal */
 export declare function useFocusTrap(containerRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: FocusTrapOptions): void;

package/dist/utils/useFocusTrap.js

@@ -1 +1 @@
-import{TABBABLE_SELECTOR as e}from"./tabbable.js";import{onBeforeUnmount as t,onMounted as n,watch as o}from"vue";function u(t){return Array.from(t.querySelectorAll(e)).filter(e=>null!==e.offsetParent||e===document.activeElement)}function c(e,t){if(!t)return!0;const n=new CustomEvent(e,{cancelable:!0,detail:null});return t(n),!n.defaultPrevented}function r(e,r,a={}){let l,s=null,f=!1;const i=t=>{if("Tab"!==t.key)return;const n=e.value;if(!n)return;const o=u(n);if(0===o.length)return void t.preventDefault();const c=o[0],r=o[o.length-1],a=document.activeElement;!t.shiftKey||a!==c&&a!==n?!t.shiftKey&&a===r&&(t.preventDefault(),c.focus()):(t.preventDefault(),r.focus())};function m(){const t=e.value;t&&(f=!0,s=document.activeElement,l=requestAnimationFrame(()=>{if(!c("open-auto-focus",a.onOpenAutoFocus))return;const e=u(t)[0]??t;t.contains(document.activeElement)||(t.tabIndex=t.tabIndex>=0?t.tabIndex:-1,e.focus({preventScroll:!0}))}),t.addEventListener("keydown",i))}function v(){if(!f)return;f=!1;const t=e.value;void 0!==l&&cancelAnimationFrame(l),t?.removeEventListener("keydown",i),c("close-auto-focus",a.onCloseAutoFocus)?(s&&s!==document.body&&document.contains(s)&&s.focus({preventScroll:!0}),s=null):s=null}o(r,e=>{e?m():v()},{flush:"post"}),n(()=>{r.value&&m()}),t(v)}export{c as autoFocusEvent,r as useFocusTrap};
+import{TABBABLE_SELECTOR as e}from"./tabbable.js";import{autoFocusEvent as t,focusOnOpen as n}from"./dismissal.js";import{applyOpenAutoFocus as o,returnFocus as u}from"./focus-targets.js";import{onBeforeUnmount as s,onMounted as a,watch as r}from"vue";function i(t,i,c={}){let l,f=null,m=!1;const v=n=>{if("Tab"!==n.key)return;const o=t.value;if(!o)return;const u=function(t){return Array.from(t.querySelectorAll(e)).filter(e=>null!==e.offsetParent||e===document.activeElement)}(o);if(0===u.length)return void n.preventDefault();const s=u[0],a=u[u.length-1],r=document.activeElement;!n.shiftKey||r!==s&&r!==o?!n.shiftKey&&r===a&&(n.preventDefault(),s.focus()):(n.preventDefault(),a.focus())};function p(){const e=t.value;e&&(m=!0,f=document.activeElement,l=requestAnimationFrame(()=>{e.tabIndex=e.tabIndex>=0?e.tabIndex:-1,n(()=>o(e,c.initialFocus,c.family??"Popover",c.onOpenAutoFocus))}),e.addEventListener("keydown",v))}function d(){if(!m)return;m=!1;const e=t.value;void 0!==l&&cancelAnimationFrame(l),e?.removeEventListener("keydown",v),u(c.finalFocus,c.family??"Popover",f,c.onCloseAutoFocus),f=null}r(i,e=>{e?p():d()},{flush:"post"}),a(()=>{i.value&&p()}),s(d)}export{t as autoFocusEvent,i as useFocusTrap};

package/dist/utils/useFormReset.d.cts

@@ -1,9 +1,2 @@
-/**
- * @internal Runs `restore` on form reset, before browser resets native controls.
- *
- * Control element is read via getter since it exists after mount. **Any element will do**
- * — slider uses form="…" attribute on hidden inputs inside thumbs. Vue-owned values
- * need manual restore; native inputs restore themselves. Read via getter since it may
- * be replaced or removed with name later.
- */
+/** @internal Runs `restore` on form reset, before the browser resets native controls. */
 export declare function useFormReset(control: () => HTMLElement | null | undefined, restore: () => void): void;

package/dist/utils/useFormReset.d.ts

@@ -1,9 +1,2 @@
-/**
- * @internal Runs `restore` on form reset, before browser resets native controls.
- *
- * Control element is read via getter since it exists after mount. **Any element will do**
- * — slider uses form="…" attribute on hidden inputs inside thumbs. Vue-owned values
- * need manual restore; native inputs restore themselves. Read via getter since it may
- * be replaced or removed with name later.
- */
+/** @internal Runs `restore` on form reset, before the browser resets native controls. */
 export declare function useFormReset(control: () => HTMLElement | null | undefined, restore: () => void): void;

package/dist/utils/useMenuItem.d.cts

@@ -9,13 +9,7 @@ export interface UseMenuItemOptions {
     /** Called after a select that wasn't prevented — typically closes the menu (and may refocus its trigger). */
     onSelected: () => void;
     /**
-     * Whether an un-prevented select runs {@link UseMenuItemOptions.onSelected}
-     * — in practice, whether it closes the menu.
-     *
-     * The declarative half of the pair: `onSelect`'s `preventDefault()` is a
-     * per-activation decision made inside a handler, this is a property of the
-     * item. Either veto is enough, which is what makes a per-part default
-     * (`false` on a checkbox item, `true` on the rest) safe.
+     * Whether an un-prevented select runs {@link UseMenuItemOptions.onSelected} — in practice, whether it closes the menu.
      * @default undefined — treated as true.
      */
     closeOnSelect?: Ref<boolean | undefined>;
@@ -30,14 +24,10 @@ export interface MenuItemBindings {
         'aria-disabled': true | undefined;
         tabindex: number;
     }>;
-    onItemClick(): void;
-    onItemKeydown(event: KeyboardEvent): void;
-    onItemPointerenter(event: PointerEvent): void;
-    onItemPointerleave(event: PointerEvent): void;
+    onItemClick: () => void;
+    onItemKeydown: (event: KeyboardEvent) => void;
+    onItemPointerenter: (event: PointerEvent) => void;
+    onItemPointerleave: (event: PointerEvent) => void;
 }
-/**
- * Shared interaction wiring for menuitem families. Click/keyboard/hover
- * behavior identical across all.
- * @internal
- */
+/** Shared interaction wiring for menuitem families: identical click/keyboard/hover behavior across all. @internal */
 export declare function useMenuItem({ disabled, textValue, onSelect, onSelected, closeOnSelect, contentRef, }: UseMenuItemOptions): MenuItemBindings;

package/dist/utils/useMenuItem.d.ts

@@ -9,13 +9,7 @@ export interface UseMenuItemOptions {
     /** Called after a select that wasn't prevented — typically closes the menu (and may refocus its trigger). */
     onSelected: () => void;
     /**
-     * Whether an un-prevented select runs {@link UseMenuItemOptions.onSelected}
-     * — in practice, whether it closes the menu.
-     *
-     * The declarative half of the pair: `onSelect`'s `preventDefault()` is a
-     * per-activation decision made inside a handler, this is a property of the
-     * item. Either veto is enough, which is what makes a per-part default
-     * (`false` on a checkbox item, `true` on the rest) safe.
+     * Whether an un-prevented select runs {@link UseMenuItemOptions.onSelected} — in practice, whether it closes the menu.
      * @default undefined — treated as true.
      */
     closeOnSelect?: Ref<boolean | undefined>;
@@ -30,14 +24,10 @@ export interface MenuItemBindings {
         'aria-disabled': true | undefined;
         tabindex: number;
     }>;
-    onItemClick(): void;
-    onItemKeydown(event: KeyboardEvent): void;
-    onItemPointerenter(event: PointerEvent): void;
-    onItemPointerleave(event: PointerEvent): void;
+    onItemClick: () => void;
+    onItemKeydown: (event: KeyboardEvent) => void;
+    onItemPointerenter: (event: PointerEvent) => void;
+    onItemPointerleave: (event: PointerEvent) => void;
 }
-/**
- * Shared interaction wiring for menuitem families. Click/keyboard/hover
- * behavior identical across all.
- * @internal
- */
+/** Shared interaction wiring for menuitem families: identical click/keyboard/hover behavior across all. @internal */
 export declare function useMenuItem({ disabled, textValue, onSelect, onSelected, closeOnSelect, contentRef, }: UseMenuItemOptions): MenuItemBindings;

package/dist/utils/useOpenChangeComplete.d.cts

@@ -1,9 +1,6 @@
 import { type Ref } from 'vue';
 /**
- * Calls onComplete when open change finishes (after enter/exit animation or
- * immediately if no motion). Settled counterpart to open-change; use for work
- * racing animation (measure, focus, cleanup). flush:post reads after mount;
- * not immediate (mounted-closed never completes).
+ * Calls `onComplete` when an open change finishes — after enter/exit animation, or immediately if there is none.
  *
  * @example
  * ```ts

package/dist/utils/useOpenChangeComplete.d.ts

@@ -1,9 +1,6 @@
 import { type Ref } from 'vue';
 /**
- * Calls onComplete when open change finishes (after enter/exit animation or
- * immediately if no motion). Settled counterpart to open-change; use for work
- * racing animation (measure, focus, cleanup). flush:post reads after mount;
- * not immediate (mounted-closed never completes).
+ * Calls `onComplete` when an open change finishes — after enter/exit animation, or immediately if there is none.
  *
  * @example
  * ```ts

package/dist/utils/useOutsideInert.cjs

@@ -1 +1 @@
-let s=require("vue");var r=new Map,u=new Set;function d(n){const e=n.ownerDocument.body;let t=n;for(;t.parentElement&&t.parentElement!==e;)t=t.parentElement;return t.parentElement===e?t:null}function a(n){if(u.size===0){for(const[e,t]of r)t||e.removeAttribute("inert");r.clear();return}for(const e of Array.from(n.children)){if(u.has(e)){const t=r.get(e);t!==void 0&&(t||e.removeAttribute("inert"),r.delete(e));continue}r.has(e)||(r.set(e,e.hasAttribute("inert")),e.setAttribute("inert",""))}}function m(n,e){let t=null;function l(){if(!t)return;const{root:o,body:i}=t;t=null,u.delete(o),a(i)}function c(){const o=n.value;if(!o)return;const i=d(o);if(!i)return;const f=o.ownerDocument.body;t={root:i,body:f},u.add(i),a(f)}(0,s.watch)(e,o=>{l(),o&&c()},{flush:"post"}),(0,s.onMounted)(()=>{e.value&&c()}),(0,s.onBeforeUnmount)(l)}function b(){for(const[n,e]of r)e||n.removeAttribute("inert");r.clear()}exports.releaseOutsideInert=b;exports.useOutsideInert=m;
+let s=require("vue");var r=new Map,u=new Set;function d(n){const e=n.ownerDocument.body;let t=n;for(;t.parentElement&&t.parentElement!==e;)t=t.parentElement;return t.parentElement===e?t:null}function f(n){if(u.size===0){for(const[e,t]of r)t||e.removeAttribute("inert");r.clear();return}for(const e of Array.from(n.children))if(!e.hasAttribute("data-skdx-live-announcer")){if(u.has(e)){const t=r.get(e);t!==void 0&&(t||e.removeAttribute("inert"),r.delete(e));continue}r.has(e)||(r.set(e,e.hasAttribute("inert")),e.setAttribute("inert",""))}}function m(n,e){let t=null;function a(){if(!t)return;const{root:o,body:i}=t;t=null,u.delete(o),f(i)}function c(){const o=n.value;if(!o)return;const i=d(o);if(!i)return;const l=o.ownerDocument.body;t={root:i,body:l},u.add(i),f(l)}(0,s.watch)(e,o=>{a(),o&&c()},{flush:"post"}),(0,s.onMounted)(()=>{e.value&&c()}),(0,s.onBeforeUnmount)(a)}function b(){for(const[n,e]of r)e||n.removeAttribute("inert");r.clear()}exports.releaseOutsideInert=b;exports.useOutsideInert=m;

package/dist/utils/useOutsideInert.d.cts

@@ -1,34 +1,11 @@
 import { type Ref } from 'vue';
 /**
- * Marks everything outside the overlay's portal container `inert` while
- * `enabled`, and restores it on close — the inertness a Vue overlay has to write
- * for itself when it never calls `showModal()`.
+ * Marks everything outside the overlay's portal container `inert` while `enabled`, and restores it on close.
  *
- * Safe to stack: several overlays open at once each keep their own container
- * live, and the last one to close is what clears the attributes.
- *
- * @param contentRef ref to the overlay's panel; its nearest `<body>` child is
- * the subtree kept interactive.
- * @param enabled whether the overlay is currently open *and* modal. A non-modal
- * overlay must pass `false` — inerting the page behind a panel the user is meant
- * to work alongside is the opposite of the intent.
+ * @param contentRef ref to the overlay's panel; its nearest `<body>` child is the subtree kept interactive.
+ * @param enabled whether the overlay is currently open *and* modal.
  * @internal
  */
 export declare function useOutsideInert(contentRef: Ref<HTMLElement | null>, enabled: Ref<boolean>): void;
-/**
- * Takes every `inert` mark this module has written off the page, right now.
- *
- * The escape hatch for handing focus back out of an overlay that is closing but
- * has not finished closing. An inert element cannot take focus, and a close
- * path that refocuses its trigger does so from an *event handler* — before the
- * watcher above has run its release, and (for `Tab`) before the browser's own
- * default action, which has to start from the trigger. Calling this first is
- * what makes that `focus()` land.
- *
- * `exempt` is deliberately left alone: the overlay's own release is still to
- * come, and it is what settles the final state. This only lifts the attributes.
- *
- * Mirrors `packages/react/src/utils/useOutsideInert.ts`'s
- * `releaseOutsideInert`. @internal
- */
+/** Takes every `inert` mark this module has written off the page, right now — the escape hatch for handing focus back out of a closing overlay before its release has run. @internal */
 export declare function releaseOutsideInert(): void;

package/dist/utils/useOutsideInert.d.ts

@@ -1,34 +1,11 @@
 import { type Ref } from 'vue';
 /**
- * Marks everything outside the overlay's portal container `inert` while
- * `enabled`, and restores it on close — the inertness a Vue overlay has to write
- * for itself when it never calls `showModal()`.
+ * Marks everything outside the overlay's portal container `inert` while `enabled`, and restores it on close.
  *
- * Safe to stack: several overlays open at once each keep their own container
- * live, and the last one to close is what clears the attributes.
- *
- * @param contentRef ref to the overlay's panel; its nearest `<body>` child is
- * the subtree kept interactive.
- * @param enabled whether the overlay is currently open *and* modal. A non-modal
- * overlay must pass `false` — inerting the page behind a panel the user is meant
- * to work alongside is the opposite of the intent.
+ * @param contentRef ref to the overlay's panel; its nearest `<body>` child is the subtree kept interactive.
+ * @param enabled whether the overlay is currently open *and* modal.
  * @internal
  */
 export declare function useOutsideInert(contentRef: Ref<HTMLElement | null>, enabled: Ref<boolean>): void;
-/**
- * Takes every `inert` mark this module has written off the page, right now.
- *
- * The escape hatch for handing focus back out of an overlay that is closing but
- * has not finished closing. An inert element cannot take focus, and a close
- * path that refocuses its trigger does so from an *event handler* — before the
- * watcher above has run its release, and (for `Tab`) before the browser's own
- * default action, which has to start from the trigger. Calling this first is
- * what makes that `focus()` land.
- *
- * `exempt` is deliberately left alone: the overlay's own release is still to
- * come, and it is what settles the final state. This only lifts the attributes.
- *
- * Mirrors `packages/react/src/utils/useOutsideInert.ts`'s
- * `releaseOutsideInert`. @internal
- */
+/** Takes every `inert` mark this module has written off the page, right now — the escape hatch for handing focus back out of a closing overlay before its release has run. @internal */
 export declare function releaseOutsideInert(): void;

package/dist/utils/useOutsideInert.js

@@ -1 +1 @@
-import{onBeforeUnmount as e,onMounted as t,watch as n}from"vue";var o=/* @__PURE__ */new Map,r=/* @__PURE__ */new Set;function u(e){if(0!==r.size)for(const t of Array.from(e.children)){if(r.has(t)){const e=o.get(t);void 0!==e&&(e||t.removeAttribute("inert"),o.delete(t));continue}o.has(t)||(o.set(t,t.hasAttribute("inert")),t.setAttribute("inert",""))}else{for(const[e,t]of o)t||e.removeAttribute("inert");o.clear()}}function i(o,i){let s=null;function a(){if(!s)return;const{root:e,body:t}=s;s=null,r.delete(e),u(t)}function c(){const e=o.value;if(!e)return;const t=function(e){const t=e.ownerDocument.body;let n=e;for(;n.parentElement&&n.parentElement!==t;)n=n.parentElement;return n.parentElement===t?n:null}(e);if(!t)return;const n=e.ownerDocument.body;s={root:t,body:n},r.add(t),u(n)}n(i,e=>{a(),e&&c()},{flush:"post"}),t(()=>{i.value&&c()}),e(a)}function s(){for(const[e,t]of o)t||e.removeAttribute("inert");o.clear()}export{s as releaseOutsideInert,i as useOutsideInert};
+import{onBeforeUnmount as e,onMounted as t,watch as n}from"vue";var o=/* @__PURE__ */new Map,r=/* @__PURE__ */new Set;function u(e){if(0!==r.size){for(const t of Array.from(e.children))if(!t.hasAttribute("data-skdx-live-announcer")){if(r.has(t)){const e=o.get(t);void 0!==e&&(e||t.removeAttribute("inert"),o.delete(t));continue}o.has(t)||(o.set(t,t.hasAttribute("inert")),t.setAttribute("inert",""))}}else{for(const[e,t]of o)t||e.removeAttribute("inert");o.clear()}}function i(o,i){let s=null;function a(){if(!s)return;const{root:e,body:t}=s;s=null,r.delete(e),u(t)}function c(){const e=o.value;if(!e)return;const t=function(e){const t=e.ownerDocument.body;let n=e;for(;n.parentElement&&n.parentElement!==t;)n=n.parentElement;return n.parentElement===t?n:null}(e);if(!t)return;const n=e.ownerDocument.body;s={root:t,body:n},r.add(t),u(n)}n(i,e=>{a(),e&&c()},{flush:"post"}),t(()=>{i.value&&c()}),e(a)}function s(){for(const[e,t]of o)t||e.removeAttribute("inert");o.clear()}export{s as releaseOutsideInert,i as useOutsideInert};

package/dist/utils/usePointerAngle.d.cts

@@ -1,70 +1,28 @@
-/**
- * Pointer-drag-to-angle, for widgets whose input is a *direction* rather than a
- * distance (angle slider, hue wheel, gradient-angle picker, compass). Mirrors
- * `packages/react/src/utils/usePointerAngle.ts`. @internal
- */
 import { type MaybeRefOrGetter, type Ref } from 'vue';
 /** Options for {@link usePointerAngle}. @internal */
 export interface UsePointerAngleOptions {
     /**
-     * Snap increment in degrees. Angles are rounded to the nearest multiple
-     * before either callback sees them, and a drag that stays within one
-     * increment emits nothing — which is what keeps a per-pixel `pointermove`
-     * from becoming a per-pixel render. Accepts a ref or getter, so a component
-     * whose `step` is a reactive prop is read fresh on every move.
+     * Snap increment in degrees; angles round to the nearest multiple before either callback sees them, and a drag within one increment emits nothing.
      * @default 0 — continuous; every pixel of movement reports a fresh angle.
      */
     step?: MaybeRefOrGetter<number>;
-    /**
-     * Fires with the angle in `[0, 360)` on pointer down and on every subsequent
-     * move that changes it, plus the native event that produced it.
-     */
+    /** Fires with the angle in `[0, 360)` on pointer down and on every subsequent move that changes it, plus the native event that produced it. */
     onAngleChange: (angle: number, event: PointerEvent) => void;
     /**
-     * Fires once with the final angle when the drag ends — `pointerup` or
-     * `pointercancel`. This is the callback that lets a consumer avoid one
-     * network call per frame; `onAngleChange` is the per-frame signal.
+     * Fires once with the final angle when the drag ends (`pointerup` or `pointercancel`), for a consumer that wants to avoid a call per frame.
      * @default undefined — no-op if omitted.
      */
     onAngleChangeEnd?: (angle: number, event: PointerEvent) => void;
 }
 /** Return value of {@link usePointerAngle}. @internal */
 export interface UsePointerAngleResult {
-    /**
-     * Bind on the element that defines the circle via `@pointerdown`. The
-     * measurement source is the element in the ref handed to the composable —
-     * its border box centre is the pivot, and it is re-measured on every move, so
-     * a page that scrolls or resizes mid-drag stays correct.
-     */
+    /** Bind on the element that defines the circle via `@pointerdown`; its border box centre is the pivot, re-measured on every move. */
     onPointerDown: (event: PointerEvent) => void;
-    /**
-     * `true` between pointer down and pointer up/cancel. Suitable for a
-     * `data-dragging` styling hook; it flips once per drag boundary and never
-     * per move.
-     */
+    /** `true` between pointer down and pointer up/cancel; suitable for a `data-dragging` styling hook, flipping once per drag boundary. */
     dragging: Readonly<Ref<boolean>>;
 }
 /**
- * Turns a pointer position inside an element into a normalized angle.
- *
- * **Convention: 0° is at 12 o'clock and the angle increases clockwise**, so 90°
- * is 3 o'clock, 180° is 6 o'clock and 270° is 9 o'clock. Screen coordinates
- * have +y pointing *down*, which this composable already accounts for — callers
- * pass raw `clientX`/`clientY` and never touch the sign themselves. Values are
- * always in `[0, 360)`; 360 is never emitted.
- *
- * It knows nothing about what the angle *means*. It has no notion of a value
- * range, no ARIA, and no `disabled`/`readOnly` policy — a component that should
- * ignore input simply does not call `onPointerDown`.
- *
- * It takes pointer capture on the element so a drag survives leaving it, and
- * tracks the drag through document-level listeners so it survives leaving the
- * *window* too. Those listeners are removed on pointer up, on `pointercancel`
- * (which also fires `onAngleChangeEnd`, so a drag interrupted by a system
- * gesture still commits rather than hanging), and on unmount — where nothing is
- * fired, because an unmounted component has no value to commit to.
- *
- * Nothing is measured or subscribed during `setup`, so it is safe under SSR.
+ * Turns a pointer position inside an element into a normalized angle in `[0, 360)`, with 0° at 12 o'clock increasing clockwise.
  *
  * @param elementRef Template ref for the element whose border box defines the circle.
  * @example

package/dist/utils/usePointerAngle.d.ts

@@ -1,70 +1,28 @@
-/**
- * Pointer-drag-to-angle, for widgets whose input is a *direction* rather than a
- * distance (angle slider, hue wheel, gradient-angle picker, compass). Mirrors
- * `packages/react/src/utils/usePointerAngle.ts`. @internal
- */
 import { type MaybeRefOrGetter, type Ref } from 'vue';
 /** Options for {@link usePointerAngle}. @internal */
 export interface UsePointerAngleOptions {
     /**
-     * Snap increment in degrees. Angles are rounded to the nearest multiple
-     * before either callback sees them, and a drag that stays within one
-     * increment emits nothing — which is what keeps a per-pixel `pointermove`
-     * from becoming a per-pixel render. Accepts a ref or getter, so a component
-     * whose `step` is a reactive prop is read fresh on every move.
+     * Snap increment in degrees; angles round to the nearest multiple before either callback sees them, and a drag within one increment emits nothing.
      * @default 0 — continuous; every pixel of movement reports a fresh angle.
      */
     step?: MaybeRefOrGetter<number>;
-    /**
-     * Fires with the angle in `[0, 360)` on pointer down and on every subsequent
-     * move that changes it, plus the native event that produced it.
-     */
+    /** Fires with the angle in `[0, 360)` on pointer down and on every subsequent move that changes it, plus the native event that produced it. */
     onAngleChange: (angle: number, event: PointerEvent) => void;
     /**
-     * Fires once with the final angle when the drag ends — `pointerup` or
-     * `pointercancel`. This is the callback that lets a consumer avoid one
-     * network call per frame; `onAngleChange` is the per-frame signal.
+     * Fires once with the final angle when the drag ends (`pointerup` or `pointercancel`), for a consumer that wants to avoid a call per frame.
      * @default undefined — no-op if omitted.
      */
     onAngleChangeEnd?: (angle: number, event: PointerEvent) => void;
 }
 /** Return value of {@link usePointerAngle}. @internal */
 export interface UsePointerAngleResult {
-    /**
-     * Bind on the element that defines the circle via `@pointerdown`. The
-     * measurement source is the element in the ref handed to the composable —
-     * its border box centre is the pivot, and it is re-measured on every move, so
-     * a page that scrolls or resizes mid-drag stays correct.
-     */
+    /** Bind on the element that defines the circle via `@pointerdown`; its border box centre is the pivot, re-measured on every move. */
     onPointerDown: (event: PointerEvent) => void;
-    /**
-     * `true` between pointer down and pointer up/cancel. Suitable for a
-     * `data-dragging` styling hook; it flips once per drag boundary and never
-     * per move.
-     */
+    /** `true` between pointer down and pointer up/cancel; suitable for a `data-dragging` styling hook, flipping once per drag boundary. */
     dragging: Readonly<Ref<boolean>>;
 }
 /**
- * Turns a pointer position inside an element into a normalized angle.
- *
- * **Convention: 0° is at 12 o'clock and the angle increases clockwise**, so 90°
- * is 3 o'clock, 180° is 6 o'clock and 270° is 9 o'clock. Screen coordinates
- * have +y pointing *down*, which this composable already accounts for — callers
- * pass raw `clientX`/`clientY` and never touch the sign themselves. Values are
- * always in `[0, 360)`; 360 is never emitted.
- *
- * It knows nothing about what the angle *means*. It has no notion of a value
- * range, no ARIA, and no `disabled`/`readOnly` policy — a component that should
- * ignore input simply does not call `onPointerDown`.
- *
- * It takes pointer capture on the element so a drag survives leaving it, and
- * tracks the drag through document-level listeners so it survives leaving the
- * *window* too. Those listeners are removed on pointer up, on `pointercancel`
- * (which also fires `onAngleChangeEnd`, so a drag interrupted by a system
- * gesture still commits rather than hanging), and on unmount — where nothing is
- * fired, because an unmounted component has no value to commit to.
- *
- * Nothing is measured or subscribed during `setup`, so it is safe under SSR.
+ * Turns a pointer position inside an element into a normalized angle in `[0, 360)`, with 0° at 12 o'clock increasing clockwise.
  *
  * @param elementRef Template ref for the element whose border box defines the circle.
  * @example

package/dist/utils/useRovingFocus.cjs

@@ -1 +1 @@
-const v=require("./direction.cjs");let b=require("vue");function x(i,s,g,n){const u=()=>{const a=Array.from(i.value?.querySelectorAll(s)??[],o=>o.getAttribute(g)).filter(o=>o!==null&&o!==""),f=a[0];f===void 0||n.value!==null&&a.includes(n.value)||(n.value=f)};return(0,b.onMounted)(u),(0,b.onUpdated)(u),u}var E=1e3;function m(i){return i.getAttribute("data-text-value")??i.textContent??""}var R={horizontal:["ArrowRight"],vertical:["ArrowDown"],both:["ArrowRight","ArrowDown"]},K={horizontal:["ArrowLeft"],vertical:["ArrowUp"],both:["ArrowLeft","ArrowUp"]};function S({orientation:i="both",loop:s=!0,itemSelector:g,scopeSelector:n,typeahead:u=!1,includeDisabled:a=!1,direction:f}){let o="",A;return function(t){const h=t.currentTarget,r=Array.from(h.querySelectorAll(g)).filter(l=>(a||!l.hasAttribute("disabled")&&l.getAttribute("data-disabled")===null)&&(!n||l.closest(n)===h));if(r.length===0)return;const c=r.indexOf(t.target),d=v.directionalKey(t.key,h,f?.());let e;if(R[i].includes(d))e=c+1,e>=r.length&&(e=s?0:r.length-1);else if(K[i].includes(d))e=c-1,e<0&&(e=s?r.length-1:0);else if(d==="Home")e=0;else if(d==="End")e=r.length-1;else if(u&&t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey&&(t.key!==" "||o!=="")){clearTimeout(A),o+=t.key.toLowerCase(),A=setTimeout(()=>{o=""},E);const l=o,w=T=>m(T).trim().toLowerCase().startsWith(l),y=[...r.slice(c+1),...r.slice(0,c+1)].find(w);y&&(e=r.indexOf(y))}e!==void 0&&(t.preventDefault(),r[e]?.focus())}}exports.itemText=m;exports.useRovingFocus=S;exports.useRovingTabStop=x;
+const p=require("./direction.cjs"),v=require("./roving-tab-stop.cjs"),b=require("./typeahead.cjs");let A=require("vue");function R(a,s,d,o,{activeIds:f,scopeSelector:h}={}){const i=()=>{const l=v.rovingItemIds(v.enabledRovingItems(a.value,s,h),d),c=v.resolveTabStopId(l,(f?.()??[]).filter(u=>l.includes(u)),o.value);c!==null&&(o.value=c)};return(0,A.onMounted)(i),(0,A.onUpdated)(i),i}var q={horizontal:["ArrowRight"],vertical:["ArrowDown"],both:["ArrowRight","ArrowDown"]},x={horizontal:["ArrowLeft"],vertical:["ArrowUp"],both:["ArrowLeft","ArrowUp"]};function T({orientation:a="both",loop:s=!0,itemSelector:d,scopeSelector:o,typeahead:f=!1,includeDisabled:h=!1,direction:i}){const l=new b.Typeahead;function c(u,e,t,n){if(q[a].includes(e)){const r=n+1;return r>=t.length?s?0:t.length-1:r}if(x[a].includes(e)){const r=n-1;return r<0?s?t.length-1:0:r}if(e==="Home")return 0;if(e==="End")return t.length-1;if(f&&b.isTypeaheadKey(u)){const r=l.match(u.key,t.map(b.itemText),n);if(r!==-1)return r}}return function(e){const t=e.currentTarget,n=Array.from(t.querySelectorAll(d)).filter(g=>(h||!g.hasAttribute("disabled")&&g.getAttribute("data-disabled")===null)&&(!o||g.closest(o)===t));if(n.length===0)return;const r=n.indexOf(e.target),w=c(e,p.directionalKey(e.key,t,i?.()),n,r);w!==void 0&&(e.preventDefault(),n[w]?.focus())}}exports.useRovingFocus=T;exports.useRovingTabStop=R;

package/dist/utils/useRovingFocus.d.cts

@@ -1,17 +1,16 @@
-/**
- * DOM-driven roving focus for composite widgets. Returns a keydown handler
- * for arrow, Home, End, and optional typeahead navigation. @internal
- */
 import { type Ref } from 'vue';
 import { type Direction } from './direction.cjs';
+/** DOM-driven roving focus for composite widgets; returns a keydown handler for arrow, Home, End, and optional typeahead navigation. @internal */
 export type Orientation = 'horizontal' | 'vertical' | 'both';
-/**
- * Keeps a roving-tabindex group's tab stop valid when items are removed.
- * When an item holding the tab stop is removed, reseeds to the first item.
- * Runs on mount and update; reseed returned for manual re-run if items
- * unmount without re-rendering. @internal
- */
-export declare function useRovingTabStop(rootRef: Ref<HTMLElement | null>, itemSelector: string, idAttribute: string, currentId: Ref<string | null>): () => void;
+/** @internal Narrows which items a group's single tab stop may land on. */
+export interface RovingTabStopOptions {
+    /** Ids of the selected/pressed items, each of which claims the stop while it stays enabled. */
+    activeIds?: () => readonly string[];
+    /** Selector naming an item's owning group, so a nested group's items are left to it. */
+    scopeSelector?: string;
+}
+/** Keeps a roving-tabindex group's single tab stop on the selected item while it is enabled, else on the first enabled one; runs on mount and update. @internal */
+export declare function useRovingTabStop(rootRef: Ref<HTMLElement | null>, itemSelector: string, idAttribute: string, currentId: Ref<string | null>, { activeIds, scopeSelector }?: RovingTabStopOptions): () => void;
 interface UseRovingFocusOptions {
     /** Axis the arrow keys navigate; defaults to both. */
     orientation?: Orientation;
@@ -28,20 +27,13 @@ interface UseRovingFocusOptions {
     /** Enable letter-key typeahead (jumps to the next item whose text starts with what was typed). */
     typeahead?: boolean;
     /**
-     * Keep disabled items navigable. Opt-in: controls skip them (per APG),
-     * but menu commands must stay navigable so they remain discoverable.
+     * Keep disabled items navigable; opt-in, since controls skip them per APG but menu commands must stay discoverable.
      * @default false
      */
     includeDisabled?: boolean;
     /** Writing direction override; omit to resolve from the nearest `[dir]` ancestor. */
     direction?: () => Direction | undefined;
 }
-/**
- * Text for typeahead matching: `data-text-value` if set, else rendered text.
- * Raw `textContent` fails for items with decorators (e.g., `ItemIndicator`).
- * @internal
- */
-export declare function itemText(el: Element): string;
 /** @internal Returns a group keydown handler that moves focus between items via arrow/Home/End keys and optional typeahead. */
 export declare function useRovingFocus({ orientation, loop, itemSelector, scopeSelector, typeahead, includeDisabled, direction, }: UseRovingFocusOptions): (event: KeyboardEvent) => void;
 export {};

package/dist/utils/useRovingFocus.d.ts

@@ -1,17 +1,16 @@
-/**
- * DOM-driven roving focus for composite widgets. Returns a keydown handler
- * for arrow, Home, End, and optional typeahead navigation. @internal
- */
 import { type Ref } from 'vue';
 import { type Direction } from './direction.js';
+/** DOM-driven roving focus for composite widgets; returns a keydown handler for arrow, Home, End, and optional typeahead navigation. @internal */
 export type Orientation = 'horizontal' | 'vertical' | 'both';
-/**
- * Keeps a roving-tabindex group's tab stop valid when items are removed.
- * When an item holding the tab stop is removed, reseeds to the first item.
- * Runs on mount and update; reseed returned for manual re-run if items
- * unmount without re-rendering. @internal
- */
-export declare function useRovingTabStop(rootRef: Ref<HTMLElement | null>, itemSelector: string, idAttribute: string, currentId: Ref<string | null>): () => void;
+/** @internal Narrows which items a group's single tab stop may land on. */
+export interface RovingTabStopOptions {
+    /** Ids of the selected/pressed items, each of which claims the stop while it stays enabled. */
+    activeIds?: () => readonly string[];
+    /** Selector naming an item's owning group, so a nested group's items are left to it. */
+    scopeSelector?: string;
+}
+/** Keeps a roving-tabindex group's single tab stop on the selected item while it is enabled, else on the first enabled one; runs on mount and update. @internal */
+export declare function useRovingTabStop(rootRef: Ref<HTMLElement | null>, itemSelector: string, idAttribute: string, currentId: Ref<string | null>, { activeIds, scopeSelector }?: RovingTabStopOptions): () => void;
 interface UseRovingFocusOptions {
     /** Axis the arrow keys navigate; defaults to both. */
     orientation?: Orientation;
@@ -28,20 +27,13 @@ interface UseRovingFocusOptions {
     /** Enable letter-key typeahead (jumps to the next item whose text starts with what was typed). */
     typeahead?: boolean;
     /**
-     * Keep disabled items navigable. Opt-in: controls skip them (per APG),
-     * but menu commands must stay navigable so they remain discoverable.
+     * Keep disabled items navigable; opt-in, since controls skip them per APG but menu commands must stay discoverable.
      * @default false
      */
     includeDisabled?: boolean;
     /** Writing direction override; omit to resolve from the nearest `[dir]` ancestor. */
     direction?: () => Direction | undefined;
 }
-/**
- * Text for typeahead matching: `data-text-value` if set, else rendered text.
- * Raw `textContent` fails for items with decorators (e.g., `ItemIndicator`).
- * @internal
- */
-export declare function itemText(el: Element): string;
 /** @internal Returns a group keydown handler that moves focus between items via arrow/Home/End keys and optional typeahead. */
 export declare function useRovingFocus({ orientation, loop, itemSelector, scopeSelector, typeahead, includeDisabled, direction, }: UseRovingFocusOptions): (event: KeyboardEvent) => void;
 export {};

package/dist/utils/useRovingFocus.js

@@ -1 +1 @@
-import{directionalKey as e}from"./direction.js";import{onMounted as t,onUpdated as r}from"vue";function o(e,o,i,l){const n=()=>{const t=Array.from(e.value?.querySelectorAll(o)??[],e=>e.getAttribute(i)).filter(e=>null!==e&&""!==e),r=t[0];void 0===r||null!==l.value&&t.includes(l.value)||(l.value=r)};return t(n),r(n),n}function i(e){return e.getAttribute("data-text-value")??e.textContent??""}var l={horizontal:["ArrowRight"],vertical:["ArrowDown"],both:["ArrowRight","ArrowDown"]},n={horizontal:["ArrowLeft"],vertical:["ArrowUp"],both:["ArrowLeft","ArrowUp"]};function a({orientation:t="both",loop:r=!0,itemSelector:o,scopeSelector:a,typeahead:s=!1,includeDisabled:u=!1,direction:c}){let d,f="";return function(h){const A=h.currentTarget,g=Array.from(A.querySelectorAll(o)).filter(e=>(u||!e.hasAttribute("disabled")&&null===e.getAttribute("data-disabled"))&&(!a||e.closest(a)===A));if(0===g.length)return;const v=g.indexOf(h.target),m=e(h.key,A,c?.());let y;if(l[t].includes(m))y=v+1,y>=g.length&&(y=r?0:g.length-1);else if(n[t].includes(m))y=v-1,y<0&&(y=r?g.length-1:0);else if("Home"===m)y=0;else if("End"===m)y=g.length-1;else if(s&&1===h.key.length&&!h.ctrlKey&&!h.metaKey&&!h.altKey&&(" "!==h.key||""!==f)){clearTimeout(d),f+=h.key.toLowerCase(),d=setTimeout(()=>{f=""},1e3);const e=f,t=t=>i(t).trim().toLowerCase().startsWith(e),r=[...g.slice(v+1),...g.slice(0,v+1)].find(t);r&&(y=g.indexOf(r))}void 0!==y&&(h.preventDefault(),g[y]?.focus())}}export{i as itemText,a as useRovingFocus,o as useRovingTabStop};
+import{directionalKey as e}from"./direction.js";import{enabledRovingItems as t,resolveTabStopId as r,rovingItemIds as o}from"./roving-tab-stop.js";import{Typeahead as n,isTypeaheadKey as i,itemText as a}from"./typeahead.js";import{onMounted as s,onUpdated as l}from"vue";function c(e,n,i,a,{activeIds:c,scopeSelector:u}={}){const d=()=>{const s=o(t(e.value,n,u),i),l=r(s,(c?.()??[]).filter(e=>s.includes(e)),a.value);null!==l&&(a.value=l)};return s(d),l(d),d}var u={horizontal:["ArrowRight"],vertical:["ArrowDown"],both:["ArrowRight","ArrowDown"]},d={horizontal:["ArrowLeft"],vertical:["ArrowUp"],both:["ArrowLeft","ArrowUp"]};function f({orientation:t="both",loop:r=!0,itemSelector:o,scopeSelector:s,typeahead:l=!1,includeDisabled:c=!1,direction:f}){const p=new n;return function(n){const h=n.currentTarget,m=Array.from(h.querySelectorAll(o)).filter(e=>(c||!e.hasAttribute("disabled")&&null===e.getAttribute("data-disabled"))&&(!s||e.closest(s)===h));if(0===m.length)return;const v=m.indexOf(n.target),g=function(e,o,n,s){if(u[t].includes(o)){const e=s+1;return e>=n.length?r?0:n.length-1:e}if(d[t].includes(o)){const e=s-1;return e<0?r?n.length-1:0:e}if("Home"===o)return 0;if("End"===o)return n.length-1;if(l&&i(e)){const t=p.match(e.key,n.map(a),s);if(-1!==t)return t}}(n,e(n.key,h,f?.()),m,v);void 0!==g&&(n.preventDefault(),m[g]?.focus())}}export{f as useRovingFocus,c as useRovingTabStop};

package/dist/utils/useSelectionCard.cjs

@@ -0,0 +1 @@
+const f=require("./id.cjs"),v=require("./cardNesting.cjs"),i=require("./declaredChildren.cjs");let a=require("vue");function b(e){const n=f.nextId(e.name),c=(0,a.ref)(!1),u=(0,a.ref)(!1),s=(0,a.ref)(!1),o=i.slotDeclares(e.slot,e.label),d=i.slotDeclares(e.slot,e.description),r=(0,a.ref)(!1);(0,a.onMounted)(()=>{r.value=!0,v.warnOnNestedInteractive(e.displayName,e.rootEl.value)});let l=!1;return{labelId:`${n}-label`,descriptionId:`${n}-description`,hasLabel:(0,a.computed)(()=>c.value||!r.value&&o()),hasDescription:(0,a.computed)(()=>u.value||!r.value&&d()),setHasLabel:t=>{c.value=t},setHasDescription:t=>{u.value=t},focusVisible:s,onPointerDown(){l=!0},onFocusIn(){s.value=!l,l=!1},onFocusOut(){s.value=!1,l=!1}}}exports.useSelectionCard=b;