@skdx/vue 0.26.0 → 0.28.0

package/dist/command/CommandItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COMMAND_CONTEXT as e,nextCommandItemId as t}from"./context.js";import{computed as a,createCommentVNode as d,createElementBlock as o,defineComponent as n,inject as l,onBeforeUnmount as i,onMounted as s,openBlock as m,renderSlot as u,unref as r,watch as c,watchEffect as v}from"vue";var f=["id","data-value","aria-selected","data-highlighted","data-disabled"],p=/* @__PURE__ */n({__name:"CommandItem",props:{value:{},disabled:{type:Boolean},onSelect:{type:Function}},setup(n){const p=n,h=l(e);if(!h)throw new Error("SkdxCommandItem must be used within SkdxCommand.");const I=h,b=t(),C=a(()=>I.activeId.value===b),g=a(()=>I.matches(p.value));function k(){g.value?I.registerItem(b):(I.unregisterItem(b),I.itemMetaRef.value.delete(b))}function S(){p.disabled||(I.setActiveId(b),p.onSelect?.(p.value))}function x(){p.disabled||I.setActiveId(b)}return v(()=>{g.value&&I.itemMetaRef.value.set(b,{value:p.value,disabled:p.disabled,onSelect:p.onSelect})}),s(k),c(g,k),i(()=>{I.unregisterItem(b),I.itemMetaRef.value.delete(b)}),(e,t)=>g.value?(m(),o("div",{key:0,class:"skdx-command__item","data-part":"item",role:"option",id:r(b),"data-value":n.value,"aria-selected":C.value,"data-highlighted":C.value?"":void 0,"data-disabled":n.disabled?"":void 0,onClick:S,onPointerenter:x},[u(e.$slots,"default")],40,f)):d("",!0)}});export{p as default};
+import{COMMAND_CONTEXT as e,nextCommandItemId as a}from"./context.js";import{computed as t,createCommentVNode as d,createElementBlock as o,defineComponent as i,inject as l,onBeforeUnmount as n,onMounted as s,openBlock as r,renderSlot as u,unref as m,watch as c,watchEffect as v}from"vue";var f=["id","data-value","aria-selected","data-highlighted","aria-disabled","data-disabled"],p=/* @__PURE__ */i({__name:"CommandItem",props:{value:{},disabled:{type:Boolean},onSelect:{type:Function},keywords:{},forceMount:{type:Boolean}},setup(i){const p=i,b=l(e);if(!b)throw new Error("SkdxCommandItem must be used within SkdxCommand.");const h=b,k=a(),I=t(()=>h.activeId.value===k),w=t(()=>!0===p.forceMount||h.matches(p.value,p.keywords));function C(){w.value?h.registerItem(k):(h.unregisterItem(k),h.itemMetaRef.value.delete(k))}function y(){p.disabled||(h.setActiveId(k),p.onSelect?.(p.value))}function M(){!p.disabled&&!h.disablePointerSelection.value&&h.setActiveId(k)}return v(()=>{w.value&&h.itemMetaRef.value.set(k,{value:p.value,disabled:p.disabled,onSelect:p.onSelect,keywords:p.keywords})}),s(C),c(w,C),n(()=>{h.unregisterItem(k),h.itemMetaRef.value.delete(k)}),(e,a)=>w.value?(r(),o("div",{key:0,class:"skdx-command__item","data-part":"item",role:"option",id:m(k),"data-value":i.value,"aria-selected":I.value,"data-highlighted":I.value?"":void 0,"aria-disabled":i.disabled||void 0,"data-disabled":i.disabled?"":void 0,onClick:y,onPointerenter:M},[u(e.$slots,"default")],40,f)):d("",!0)}});export{p as default};

package/dist/command/CommandList.vue.d.cts

@@ -1,8 +1,8 @@
 /**
- * Container for `SkdxCommandItem`s and `SkdxCommandGroup`s: renders
- * `<div role="listbox">`, wired to `SkdxCommandInput` via `aria-controls`/
- * `aria-activedescendant`, and carrying `aria-busy`/`data-loading` while the
- * root's `loading` is set. Must be used inside `SkdxCommand`.
+ * Container for command items/groups: renders `<div role="listbox">` wired to
+ * input via `aria-controls`/`aria-activedescendant`. Give it an accessible
+ * name via `aria-label` or `aria-labelledby` — the input names itself, so the
+ * list has no name otherwise.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/command/CommandList.vue.d.ts

@@ -1,8 +1,8 @@
 /**
- * Container for `SkdxCommandItem`s and `SkdxCommandGroup`s: renders
- * `<div role="listbox">`, wired to `SkdxCommandInput` via `aria-controls`/
- * `aria-activedescendant`, and carrying `aria-busy`/`data-loading` while the
- * root's `loading` is set. Must be used inside `SkdxCommand`.
+ * Container for command items/groups: renders `<div role="listbox">` wired to
+ * input via `aria-controls`/`aria-activedescendant`. Give it an accessible
+ * name via `aria-label` or `aria-labelledby` — the input names itself, so the
+ * list has no name otherwise.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/command/context.cjs

@@ -1 +1 @@
-const t=require("../utils/id.cjs");var d='[role="option"]:not([data-disabled])';function o(n,e){return n.toLowerCase().includes(e.toLowerCase())}var m=Symbol("skdx-command-context");function a(){return t.nextId("command-list")}function r(){return t.nextId("command-item")}exports.COMMAND_CONTEXT=m;exports.OPTION_SELECTOR=d;exports.defaultCommandFilter=o;exports.nextCommandItemId=r;exports.nextCommandListId=a;
+const e=require("../utils/id.cjs");var a='[role="option"]:not([data-disabled])';function r(t,d,o){const n=d.toLowerCase();return t.toLowerCase().includes(n)?!0:o?.some(m=>m.toLowerCase().includes(n))??!1}var i=Symbol("skdx-command-context");function u(){return e.nextId("command-list")}function C(){return e.nextId("command-item")}function s(){return e.nextId("command-group-heading")}exports.COMMAND_CONTEXT=i;exports.OPTION_SELECTOR=a;exports.defaultCommandFilter=r;exports.nextCommandGroupHeadingId=s;exports.nextCommandItemId=C;exports.nextCommandListId=u;

package/dist/command/context.d.cts

@@ -2,18 +2,22 @@ import type { InjectionKey, Ref } from 'vue';
 /** @internal CSS selector matching enabled (non-disabled) listbox option elements for keyboard navigation. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /**
- * How a Command decides which items a search keeps: a predicate over the
- * item's `value`, or `'manual'` when the consumer mounts only the matching
- * items itself. Mirrors `ComboboxFilter`.
+ * How a Command decides which items a search keeps: a predicate over `value`
+ * and `keywords`, or `'manual'` for consumer-filtered lists. Number scores
+ * rank items (0 excludes, positive keeps, ordered by score). Booleans stay unchanged.
  */
-export type CommandFilter = 'manual' | ((itemValue: string, search: string) => boolean);
-/** The built-in matcher: case-insensitive substring on the item's `value`. */
-export declare function defaultCommandFilter(itemValue: string, search: string): boolean;
-/** @internal Per-item bookkeeping (`value`/`disabled`/`onSelect`) kept in Command's mutable ref map, keyed by item id. */
+export type CommandFilter = 'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number);
+/**
+ * Built-in matcher: case-insensitive substring on `value` or `keywords`.
+ */
+export declare function defaultCommandFilter(itemValue: string, search: string, keywords?: readonly string[]): boolean;
+/** @internal Per-item bookkeeping (`value`/`disabled`/`onSelect`/`keywords`) kept in Command's mutable ref map, keyed by item id. */
 export interface CommandItemMeta {
     value: string;
     disabled?: boolean;
     onSelect?(value: string): void;
+    /** The item's aliases, for re-scoring it against the current search. */
+    keywords?: readonly string[];
 }
 /** @internal Injection key a Command provides so its parts can read/drive shared state. */
 export interface CommandContext {
@@ -28,8 +32,14 @@ export interface CommandContext {
     /** The root's current search text, written by `SkdxCommandInput` on every keystroke. */
     search: Readonly<Ref<string>>;
     setSearch(search: string): void;
-    /** Whether an item's `value` survives the current search under the root's `filter`. */
-    matches(itemValue: string): boolean;
+    /** Whether item value or keywords survive the current search filter. */
+    matches(itemValue: string, keywords?: readonly string[]): boolean;
+    /** Mounted items in traversal order — score-sorted descending when `filter` ranks, DOM order otherwise. */
+    orderedOptions(): HTMLElement[];
+    /** Whether arrow navigation wraps around the ends of the item list. */
+    loop: Readonly<Ref<boolean>>;
+    /** Whether pointer-enter is allowed to move the highlight. */
+    disablePointerSelection: Readonly<Ref<boolean>>;
     /** Whether results are in flight — drives `data-loading`, `SkdxCommandLoading`, and a hidden `SkdxCommandEmpty`. */
     loading: Readonly<Ref<boolean>>;
 }
@@ -39,3 +49,5 @@ export declare const COMMAND_CONTEXT: InjectionKey<CommandContext>;
 export declare function nextCommandListId(): string;
 /** @internal Generates a unique, stable-per-instance id for a CommandItem. */
 export declare function nextCommandItemId(): string;
+/** @internal Generates the id a CommandGroup's heading carries, so the group can name itself from it. */
+export declare function nextCommandGroupHeadingId(): string;

package/dist/command/context.d.ts

@@ -2,18 +2,22 @@ import type { InjectionKey, Ref } from 'vue';
 /** @internal CSS selector matching enabled (non-disabled) listbox option elements for keyboard navigation. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /**
- * How a Command decides which items a search keeps: a predicate over the
- * item's `value`, or `'manual'` when the consumer mounts only the matching
- * items itself. Mirrors `ComboboxFilter`.
+ * How a Command decides which items a search keeps: a predicate over `value`
+ * and `keywords`, or `'manual'` for consumer-filtered lists. Number scores
+ * rank items (0 excludes, positive keeps, ordered by score). Booleans stay unchanged.
  */
-export type CommandFilter = 'manual' | ((itemValue: string, search: string) => boolean);
-/** The built-in matcher: case-insensitive substring on the item's `value`. */
-export declare function defaultCommandFilter(itemValue: string, search: string): boolean;
-/** @internal Per-item bookkeeping (`value`/`disabled`/`onSelect`) kept in Command's mutable ref map, keyed by item id. */
+export type CommandFilter = 'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number);
+/**
+ * Built-in matcher: case-insensitive substring on `value` or `keywords`.
+ */
+export declare function defaultCommandFilter(itemValue: string, search: string, keywords?: readonly string[]): boolean;
+/** @internal Per-item bookkeeping (`value`/`disabled`/`onSelect`/`keywords`) kept in Command's mutable ref map, keyed by item id. */
 export interface CommandItemMeta {
     value: string;
     disabled?: boolean;
     onSelect?(value: string): void;
+    /** The item's aliases, for re-scoring it against the current search. */
+    keywords?: readonly string[];
 }
 /** @internal Injection key a Command provides so its parts can read/drive shared state. */
 export interface CommandContext {
@@ -28,8 +32,14 @@ export interface CommandContext {
     /** The root's current search text, written by `SkdxCommandInput` on every keystroke. */
     search: Readonly<Ref<string>>;
     setSearch(search: string): void;
-    /** Whether an item's `value` survives the current search under the root's `filter`. */
-    matches(itemValue: string): boolean;
+    /** Whether item value or keywords survive the current search filter. */
+    matches(itemValue: string, keywords?: readonly string[]): boolean;
+    /** Mounted items in traversal order — score-sorted descending when `filter` ranks, DOM order otherwise. */
+    orderedOptions(): HTMLElement[];
+    /** Whether arrow navigation wraps around the ends of the item list. */
+    loop: Readonly<Ref<boolean>>;
+    /** Whether pointer-enter is allowed to move the highlight. */
+    disablePointerSelection: Readonly<Ref<boolean>>;
     /** Whether results are in flight — drives `data-loading`, `SkdxCommandLoading`, and a hidden `SkdxCommandEmpty`. */
     loading: Readonly<Ref<boolean>>;
 }
@@ -39,3 +49,5 @@ export declare const COMMAND_CONTEXT: InjectionKey<CommandContext>;
 export declare function nextCommandListId(): string;
 /** @internal Generates a unique, stable-per-instance id for a CommandItem. */
 export declare function nextCommandItemId(): string;
+/** @internal Generates the id a CommandGroup's heading carries, so the group can name itself from it. */
+export declare function nextCommandGroupHeadingId(): string;

package/dist/command/context.js

@@ -1 +1 @@
-import{nextId as t}from"../utils/id.js";var n='[role="option"]:not([data-disabled])';function o(t,n){return t.toLowerCase().includes(n.toLowerCase())}var a=/* @__PURE__ */Symbol("skdx-command-context");function e(){return t("command-list")}function m(){return t("command-item")}export{a as COMMAND_CONTEXT,n as OPTION_SELECTOR,o as defaultCommandFilter,m as nextCommandItemId,e as nextCommandListId};
+import{nextId as n}from"../utils/id.js";var o='[role="option"]:not([data-disabled])';function t(n,o,t){const e=o.toLowerCase();return!!n.toLowerCase().includes(e)||(t?.some(n=>n.toLowerCase().includes(e))??!1)}var e=/* @__PURE__ */Symbol("skdx-command-context");function a(){return n("command-list")}function d(){return n("command-item")}function m(){return n("command-group-heading")}export{e as COMMAND_CONTEXT,o as OPTION_SELECTOR,t as defaultCommandFilter,m as nextCommandGroupHeadingId,d as nextCommandItemId,a as nextCommandListId};

package/dist/command/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./context.cjs"),r=require("./Command.vue.cjs"),m=require("./CommandEmpty.vue.cjs"),d=require("./CommandGroup.vue.cjs"),o=require("./CommandInput.vue.cjs"),t=require("./CommandItem.vue.cjs"),a=require("./CommandList.vue.cjs"),n=require("./CommandLoading.vue.cjs"),u=require("./CommandSeparator.vue.cjs");exports.SkdxCommand=r.default;exports.SkdxCommandEmpty=m.default;exports.SkdxCommandGroup=d.default;exports.SkdxCommandInput=o.default;exports.SkdxCommandItem=t.default;exports.SkdxCommandList=a.default;exports.SkdxCommandLoading=n.default;exports.SkdxCommandSeparator=u.default;exports.defaultCommandFilter=e.defaultCommandFilter;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./context.cjs"),r=require("./Command.vue.cjs");exports.SkdxCommand=r.default;exports.defaultCommandFilter=e.defaultCommandFilter;

package/dist/command/index.d.cts

@@ -1,9 +1,3 @@
 export { default as SkdxCommand } from './Command.vue.cjs';
-export { default as SkdxCommandEmpty } from './CommandEmpty.vue.cjs';
-export { default as SkdxCommandGroup } from './CommandGroup.vue.cjs';
-export { default as SkdxCommandInput } from './CommandInput.vue.cjs';
-export { default as SkdxCommandItem } from './CommandItem.vue.cjs';
-export { default as SkdxCommandList } from './CommandList.vue.cjs';
-export { default as SkdxCommandLoading } from './CommandLoading.vue.cjs';
-export { default as SkdxCommandSeparator } from './CommandSeparator.vue.cjs';
 export { defaultCommandFilter, type CommandFilter } from './context.cjs';
+export type { CommandGroup, CommandItem } from './types.cjs';

package/dist/command/index.d.ts

@@ -1,9 +1,3 @@
 export { default as SkdxCommand } from './Command.vue.js';
-export { default as SkdxCommandEmpty } from './CommandEmpty.vue.js';
-export { default as SkdxCommandGroup } from './CommandGroup.vue.js';
-export { default as SkdxCommandInput } from './CommandInput.vue.js';
-export { default as SkdxCommandItem } from './CommandItem.vue.js';
-export { default as SkdxCommandList } from './CommandList.vue.js';
-export { default as SkdxCommandLoading } from './CommandLoading.vue.js';
-export { default as SkdxCommandSeparator } from './CommandSeparator.vue.js';
 export { defaultCommandFilter, type CommandFilter } from './context.js';
+export type { CommandGroup, CommandItem } from './types.js';

package/dist/command/index.js

@@ -1 +1 @@
-import{defaultCommandFilter as m}from"./context.js";import o from"./Command.vue.js";import a from"./CommandEmpty.vue.js";import d from"./CommandGroup.vue.js";import r from"./CommandInput.vue.js";import t from"./CommandItem.vue.js";import n from"./CommandList.vue.js";import s from"./CommandLoading.vue.js";import e from"./CommandSeparator.vue.js";export{o as SkdxCommand,a as SkdxCommandEmpty,d as SkdxCommandGroup,r as SkdxCommandInput,t as SkdxCommandItem,n as SkdxCommandList,s as SkdxCommandLoading,e as SkdxCommandSeparator,m as defaultCommandFilter};
+import{defaultCommandFilter as m}from"./context.js";import o from"./Command.vue.js";export{o as SkdxCommand,m as defaultCommandFilter};

package/dist/command/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CommandEmpty.vue.cjs"),r=require("./CommandGroup.vue.cjs"),m=require("./CommandInput.vue.cjs"),d=require("./CommandItem.vue.cjs"),o=require("./CommandList.vue.cjs"),a=require("./CommandLoading.vue.cjs"),n=require("./Command.vue.cjs"),t=require("./CommandSeparator.vue.cjs");exports.SkdxCommand=n.default;exports.SkdxCommandEmpty=e.default;exports.SkdxCommandGroup=r.default;exports.SkdxCommandInput=m.default;exports.SkdxCommandItem=d.default;exports.SkdxCommandList=o.default;exports.SkdxCommandLoading=a.default;exports.SkdxCommandSeparator=t.default;

package/dist/command/primitives.d.cts

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `SkdxCommand` — the parts the recipe composes.
+ * Use when you need a different structure. Command here is the barrel export,
+ * derives anatomy with no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCommand, SkdxCommandEmpty, SkdxCommandGroup, SkdxCommandInput, SkdxCommandItem, SkdxCommandList } from '@skdx/vue/primitives/command';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCommand>
+ *     <SkdxCommandInput placeholder="Search…" />
+ *     <SkdxCommandList>
+ *       <SkdxCommandEmpty>No results</SkdxCommandEmpty>
+ *       <SkdxCommandGroup heading="Actions">
+ *         <SkdxCommandItem value="new">New file</SkdxCommandItem>
+ *       </SkdxCommandGroup>
+ *     </SkdxCommandList>
+ *   </SkdxCommand>
+ * </template>
+ * ```
+ */
+export { default as SkdxCommand } from './Command.vue.cjs';
+export { default as SkdxCommandInput } from './CommandInput.vue.cjs';
+export { default as SkdxCommandList } from './CommandList.vue.cjs';
+export { default as SkdxCommandEmpty } from './CommandEmpty.vue.cjs';
+export { default as SkdxCommandLoading } from './CommandLoading.vue.cjs';
+export { default as SkdxCommandGroup } from './CommandGroup.vue.cjs';
+export { default as SkdxCommandItem } from './CommandItem.vue.cjs';
+export { default as SkdxCommandSeparator } from './CommandSeparator.vue.cjs';
+export type { CommandGroup, CommandItem } from './types.cjs';

package/dist/command/primitives.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `SkdxCommand` — the parts the recipe composes.
+ * Use when you need a different structure. Command here is the barrel export,
+ * derives anatomy with no children.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxCommand, SkdxCommandEmpty, SkdxCommandGroup, SkdxCommandInput, SkdxCommandItem, SkdxCommandList } from '@skdx/vue/primitives/command';
+ * </script>
+ *
+ * <template>
+ *   <SkdxCommand>
+ *     <SkdxCommandInput placeholder="Search…" />
+ *     <SkdxCommandList>
+ *       <SkdxCommandEmpty>No results</SkdxCommandEmpty>
+ *       <SkdxCommandGroup heading="Actions">
+ *         <SkdxCommandItem value="new">New file</SkdxCommandItem>
+ *       </SkdxCommandGroup>
+ *     </SkdxCommandList>
+ *   </SkdxCommand>
+ * </template>
+ * ```
+ */
+export { default as SkdxCommand } from './Command.vue.js';
+export { default as SkdxCommandInput } from './CommandInput.vue.js';
+export { default as SkdxCommandList } from './CommandList.vue.js';
+export { default as SkdxCommandEmpty } from './CommandEmpty.vue.js';
+export { default as SkdxCommandLoading } from './CommandLoading.vue.js';
+export { default as SkdxCommandGroup } from './CommandGroup.vue.js';
+export { default as SkdxCommandItem } from './CommandItem.vue.js';
+export { default as SkdxCommandSeparator } from './CommandSeparator.vue.js';
+export type { CommandGroup, CommandItem } from './types.js';

package/dist/command/primitives.js

@@ -0,0 +1 @@
+import m from"./CommandEmpty.vue.js";import o from"./CommandGroup.vue.js";import a from"./CommandInput.vue.js";import d from"./CommandItem.vue.js";import r from"./CommandList.vue.js";import n from"./CommandLoading.vue.js";import t from"./Command.vue.js";import s from"./CommandSeparator.vue.js";export{t as SkdxCommand,m as SkdxCommandEmpty,o as SkdxCommandGroup,a as SkdxCommandInput,d as SkdxCommandItem,r as SkdxCommandList,n as SkdxCommandLoading,s as SkdxCommandSeparator};

package/dist/command/types.d.cts

@@ -0,0 +1,34 @@
+/** One command in a `SkdxCommand` group. */
+export interface CommandItem {
+    /** Text rendered inside the derived `SkdxCommandItem`. */
+    label: string;
+    /**
+     * Identifier for filtering/highlighting. @default undefined (uses `label`).
+     */
+    value?: string;
+    /**
+     * Extra search aliases the filter matches against ("dark mode" → "Toggle theme").
+     * @default undefined
+     */
+    keywords?: string[];
+    /**
+     * Excludes the item from keyboard navigation, pointer highlighting and Enter selection.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Called when the item is activated, before the recipe's own `select`.
+     * @default undefined — the item selects and nothing else happens.
+     */
+    onSelect?: () => void;
+}
+/** One labelled group of commands for the `groups` recipe prop, rendered as a `SkdxCommandGroup`. */
+export interface CommandGroup {
+    /**
+     * Heading rendered above the group's items, and the group's accessible name.
+     * @default undefined — no `SkdxCommandGroup` wrapper; the items go straight into the list.
+     */
+    label?: string;
+    /** The commands in this group. */
+    items: CommandItem[];
+}

package/dist/command/types.d.ts

@@ -0,0 +1,34 @@
+/** One command in a `SkdxCommand` group. */
+export interface CommandItem {
+    /** Text rendered inside the derived `SkdxCommandItem`. */
+    label: string;
+    /**
+     * Identifier for filtering/highlighting. @default undefined (uses `label`).
+     */
+    value?: string;
+    /**
+     * Extra search aliases the filter matches against ("dark mode" → "Toggle theme").
+     * @default undefined
+     */
+    keywords?: string[];
+    /**
+     * Excludes the item from keyboard navigation, pointer highlighting and Enter selection.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Called when the item is activated, before the recipe's own `select`.
+     * @default undefined — the item selects and nothing else happens.
+     */
+    onSelect?: () => void;
+}
+/** One labelled group of commands for the `groups` recipe prop, rendered as a `SkdxCommandGroup`. */
+export interface CommandGroup {
+    /**
+     * Heading rendered above the group's items, and the group's accessible name.
+     * @default undefined — no `SkdxCommandGroup` wrapper; the items go straight into the list.
+     */
+    label?: string;
+    /** The commands in this group. */
+    items: CommandItem[];
+}

package/dist/context-menu/ContextMenu.vue.d.cts

@@ -1,46 +1,73 @@
+import type { Point } from './context.cjs';
+import type { MenuItem } from './types.cjs';
 /**
- * Root of a right-click (or long-press) context menu: owns open state and
- * the triggering pointer position, and hands both down to
- * `SkdxContextMenuTrigger` / `SkdxContextMenuPortal` / `SkdxContextMenuContent`
- * / item parts via context. Renders no DOM of its own.
+ * A right-click or long-press menu: wraps the default slot as the trigger,
+ * building a portalled `role="menu"` panel with roving focus, typeahead,
+ * nested submenus, and checkbox/radio items. For full primitive composition,
+ * use `SkdxContextMenuRoot` from `@skdx/vue/primitives/context-menu`.
  *
- * Unlike `SkdxDropdownMenu`, `SkdxContextMenuContent` positions itself at the
- * pointer's coordinates rather than via the popper layer, so a menu opened
- * via `default-open` (rather than by a `contextmenu` event on
- * `SkdxContextMenuTrigger`) has no pointer to sit at and lands at the
- * viewport's top-left corner.
- *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the change has finished on screen — after `SkdxContextMenuContent`'s
- * enter or exit animation ends, or in the same task when it declares none.
- *
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ * @example
+ * ```vue
+ * <SkdxContextMenu :items="[{ label: 'Cut', onSelect: cut }]">
+ *   <div>Right-click me</div>
+ * </SkdxContextMenu>
+ * ```
  */
 type __VLS_Props = {
     /** Whether the menu is open, for controlled usage. Pair with `v-model:open`. */
     open?: boolean;
     /**
-     * Whether the menu is initially open, for uncontrolled usage. There is no
-     * pointer event to position it at, so it opens at the viewport's top-left
-     * corner.
+     * Initially open for uncontrolled usage. Opens at viewport top-left unless
+     * `point` overrides (no pointer event to position at).
+     * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Makes the page inert and locks body scroll while menu is open.
+     * @default false
+     */
+    modal?: boolean;
+    /**
+     * Viewport coordinates the derived panel is placed at, overriding the region's recorded pointer position.
+     * @default undefined — the position of the pointer that opened the menu.
+     */
+    point?: Point;
+    /**
+     * The menu's entries. A plain action carries no `type`; separators, checkbox items, radio groups, submenus and groups declare one.
+     * @default [] — an empty panel.
+     */
+    items?: MenuItem[];
+    /**
+     * Disables the context menu for this region, letting the native browser context menu through.
+     * @default false
+     */
+    disabled?: boolean;
+};
+declare var __VLS_14: {}, __VLS_16: {
+    item: MenuItem;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    item?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: MenuItem) => any;
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
     "open-change-complete": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MenuItem) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
 }>, {
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
+    items: MenuItem[];
+    modal: boolean;
+    point: Point;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/context-menu/ContextMenu.vue.d.ts

@@ -1,46 +1,73 @@
+import type { Point } from './context.js';
+import type { MenuItem } from './types.js';
 /**
- * Root of a right-click (or long-press) context menu: owns open state and
- * the triggering pointer position, and hands both down to
- * `SkdxContextMenuTrigger` / `SkdxContextMenuPortal` / `SkdxContextMenuContent`
- * / item parts via context. Renders no DOM of its own.
+ * A right-click or long-press menu: wraps the default slot as the trigger,
+ * building a portalled `role="menu"` panel with roving focus, typeahead,
+ * nested submenus, and checkbox/radio items. For full primitive composition,
+ * use `SkdxContextMenuRoot` from `@skdx/vue/primitives/context-menu`.
  *
- * Unlike `SkdxDropdownMenu`, `SkdxContextMenuContent` positions itself at the
- * pointer's coordinates rather than via the popper layer, so a menu opened
- * via `default-open` (rather than by a `contextmenu` event on
- * `SkdxContextMenuTrigger`) has no pointer to sit at and lands at the
- * viewport's top-left corner.
- *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the change has finished on screen — after `SkdxContextMenuContent`'s
- * enter or exit animation ends, or in the same task when it declares none.
- *
- * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ * @example
+ * ```vue
+ * <SkdxContextMenu :items="[{ label: 'Cut', onSelect: cut }]">
+ *   <div>Right-click me</div>
+ * </SkdxContextMenu>
+ * ```
  */
 type __VLS_Props = {
     /** Whether the menu is open, for controlled usage. Pair with `v-model:open`. */
     open?: boolean;
     /**
-     * Whether the menu is initially open, for uncontrolled usage. There is no
-     * pointer event to position it at, so it opens at the viewport's top-left
-     * corner.
+     * Initially open for uncontrolled usage. Opens at viewport top-left unless
+     * `point` overrides (no pointer event to position at).
+     * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Makes the page inert and locks body scroll while menu is open.
+     * @default false
+     */
+    modal?: boolean;
+    /**
+     * Viewport coordinates the derived panel is placed at, overriding the region's recorded pointer position.
+     * @default undefined — the position of the pointer that opened the menu.
+     */
+    point?: Point;
+    /**
+     * The menu's entries. A plain action carries no `type`; separators, checkbox items, radio groups, submenus and groups declare one.
+     * @default [] — an empty panel.
+     */
+    items?: MenuItem[];
+    /**
+     * Disables the context menu for this region, letting the native browser context menu through.
+     * @default false
+     */
+    disabled?: boolean;
+};
+declare var __VLS_14: {}, __VLS_16: {
+    item: MenuItem;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    item?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: MenuItem) => any;
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
     "open-change-complete": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MenuItem) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
 }>, {
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
+    items: MenuItem[];
+    modal: boolean;
+    point: Point;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/context-menu/ContextMenu.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("../utils/useOpenChangeComplete.cjs"),a=require("./context.cjs");let n=require("vue");var _=(0,n.defineComponent)({__name:"ContextMenu",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete"],setup(c,{emit:s}){const t=c,o=s,d=(0,n.ref)(null),p=(0,n.ref)(null),u=(0,n.ref)(t.defaultOpen),r=(0,n.computed)(()=>t.open??u.value),l=(0,n.ref)({x:0,y:0});f.useOpenChangeComplete(r,p,e=>o("open-change-complete",e));function i(e){t.open===void 0&&(u.value=e),o("update:open",e),o("open-change",e)}return(0,n.provide)(a.CONTEXT_MENU_CONTEXT,{triggerRef:d,contentRef:p,contentId:a.nextContextMenuContentId(),open:r,setOpen:i,point:l,setPoint:e=>{l.value=e}}),(e,C)=>(0,n.renderSlot)(e.$slots,"default")}});exports.default=_;
+const i=require("./ContextMenuAnatomy.vue.cjs"),u=require("./ContextMenuRoot.vue.cjs");let e=require("vue");var p=(0,e.defineComponent)({inheritAttrs:!1,__name:"ContextMenu",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!1},point:{default:void 0},items:{default:()=>[]},disabled:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete","select"],setup(n,{emit:d}){const l=d;return(a,o)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,{open:n.open,"default-open":n.defaultOpen,modal:n.modal,point:n.point,"onUpdate:open":o[0]||(o[0]=t=>l("update:open",t)),onOpenChange:o[1]||(o[1]=t=>l("open-change",t)),onOpenChangeComplete:o[2]||(o[2]=t=>l("open-change-complete",t))},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(i.default,(0,e.mergeProps)(a.$attrs,{items:n.items,disabled:n.disabled,"on-item-select":t=>l("select",t)}),(0,e.createSlots)({default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"default")]),_:2},[a.$slots.item?{name:"item",fn:(0,e.withCtx)(t=>[(0,e.renderSlot)(a.$slots,"item",(0,e.normalizeProps)((0,e.guardReactiveProps)(t)))]),key:"0"}:void 0]),1040,["items","disabled","on-item-select"])]),_:3},8,["open","default-open","modal","point"]))}});exports.default=p;

package/dist/context-menu/ContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import{CONTEXT_MENU_CONTEXT as n,nextContextMenuContentId as t}from"./context.js";import{computed as o,defineComponent as p,provide as a,ref as u,renderSlot as l}from"vue";var s=/* @__PURE__ */p({__name:"ContextMenu",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete"],setup(p,{emit:s}){const r=p,d=s,m=u(null),f=u(null),i=u(r.defaultOpen),c=o(()=>r.open??i.value),C=u({x:0,y:0});return e(c,f,e=>d("open-change-complete",e)),a(n,{triggerRef:m,contentRef:f,contentId:t(),open:c,setOpen:function(e){void 0===r.open&&(i.value=e),d("update:open",e),d("open-change",e)},point:C,setPoint:e=>{C.value=e}}),(e,n)=>l(e.$slots,"default")}});export{s as default};
+import e from"./ContextMenuAnatomy.vue.js";import t from"./ContextMenuRoot.vue.js";import{createBlock as o,createSlots as a,createVNode as n,defineComponent as p,guardReactiveProps as l,mergeProps as s,normalizeProps as d,openBlock as i,renderSlot as m,withCtx as r}from"vue";var u=/* @__PURE__ */p({inheritAttrs:!1,__name:"ContextMenu",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!1},point:{default:void 0},items:{default:()=>[]},disabled:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete","select"],setup(p,{emit:u}){const f=u;return(u,c)=>(i(),o(t,{open:p.open,"default-open":p.defaultOpen,modal:p.modal,point:p.point,"onUpdate:open":c[0]||(c[0]=e=>f("update:open",e)),onOpenChange:c[1]||(c[1]=e=>f("open-change",e)),onOpenChangeComplete:c[2]||(c[2]=e=>f("open-change-complete",e))},{default:r(()=>[n(e,s(u.$attrs,{items:p.items,disabled:p.disabled,"on-item-select":e=>f("select",e)}),a({default:r(()=>[m(u.$slots,"default")]),_:2},[u.$slots.item?{name:"item",fn:r(e=>[m(u.$slots,"item",d(l(e)))]),key:"0"}:void 0]),1040,["items","disabled","on-item-select"])]),_:3},8,["open","default-open","modal","point"]))}});export{u as default};

package/dist/context-menu/ContextMenuAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./ContextMenuAnatomy.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/context-menu/ContextMenuAnatomy.vue.d.cts

@@ -0,0 +1,27 @@
+import type { MenuItem } from './types.cjs';
+/**
+ * The anatomy a `SkdxContextMenu` draws: a right-clickable region and a
+ * portalled `role="menu"` panel built from `items`.
+ * @internal
+ */
+type __VLS_Props = {
+    items: MenuItem[];
+    disabled?: boolean;
+    onItemSelect?: (item: MenuItem) => void;
+};
+declare var __VLS_4: {}, __VLS_15: {
+    item: MenuItem;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+} & {
+    item?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/context-menu/ContextMenuAnatomy.vue.d.ts

@@ -0,0 +1,27 @@
+import type { MenuItem } from './types.js';
+/**
+ * The anatomy a `SkdxContextMenu` draws: a right-clickable region and a
+ * portalled `role="menu"` panel built from `items`.
+ * @internal
+ */
+type __VLS_Props = {
+    items: MenuItem[];
+    disabled?: boolean;
+    onItemSelect?: (item: MenuItem) => void;
+};
+declare var __VLS_4: {}, __VLS_15: {
+    item: MenuItem;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+} & {
+    item?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/context-menu/ContextMenuAnatomy.vue.js

@@ -0,0 +1 @@
+import t from"./ContextMenuAnatomy.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/context-menu/ContextMenuAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const a=require("./context.cjs"),s=require("./ContextMenuContent.vue.cjs"),l=require("./ContextMenuItems.vue.cjs"),d=require("./ContextMenuPortal.vue.cjs"),c=require("./ContextMenuTrigger.vue.cjs");let e=require("vue");var m=(0,e.defineComponent)({inheritAttrs:!1,__name:"ContextMenuAnatomy",props:{items:{},disabled:{type:Boolean},onItemSelect:{type:Function}},setup(r){const o=(0,e.inject)(a.CONTEXT_MENU_CONTEXT);if(!o)throw new Error("ContextMenuAnatomy must be used within SkdxContextMenu.");const n=(0,e.useAttrs)(),i=(0,e.computed)(()=>n.id&&o.open.value?{"aria-controls":n.id,"aria-owns":n.id}:{});return(t,C)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(c.default,(0,e.mergeProps)({disabled:r.disabled},i.value),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"default")]),_:3},16,["disabled"]),(0,e.createVNode)(d.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(s.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(t.$attrs)),{default:(0,e.withCtx)(()=>[(0,e.createVNode)(l.default,{items:r.items,"on-item-select":r.onItemSelect},(0,e.createSlots)({_:2},[t.$slots.item?{name:"item",fn:(0,e.withCtx)(u=>[(0,e.renderSlot)(t.$slots,"item",(0,e.normalizeProps)((0,e.guardReactiveProps)(u)))]),key:"0"}:void 0]),1032,["items","on-item-select"])]),_:3},16)]),_:3})],64))}});exports.default=m;