@skdx/vue 0.27.0 → 0.28.0

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

@@ -1,4 +1,5 @@
 import { type CommandFilter } from './context.cjs';
+import type { CommandGroup, CommandItem } from './types.cjs';
 /**
  * Root of a cmdk-style command palette: owns virtual focus
  * (`aria-activedescendant`-based, so real DOM focus always stays on
@@ -10,6 +11,12 @@ import { type CommandFilter } from './context.cjs';
  * Not popper-anchored — mount it inside a `SkdxDialog` for a classic ⌘K
  * palette, or render it standalone.
  *
+ * Draws the derived anatomy from `groups`/`placeholder`/`empty-message` when
+ * the default slot is empty — an input and a `role="listbox"` of grouped
+ * items — and renders whatever the slot holds when it is not. The switch is
+ * presence only; this component never inspects *which* parts it was given.
+ * For full primitive composition, use `@skdx/vue/primitives/command`.
+ *
  * `SkdxCommandInput` writes what the user types into the root's `search`, and
  * the root filters its own items with a case-insensitive substring match on
  * each item's `value`. Pass `filter` to replace the matcher, or
@@ -31,9 +38,28 @@ type __VLS_Props = {
      * Replaces the built-in matcher (case-insensitive substring on the item's
      * `value`) — return `true` to keep an item mounted for this search — or
      * `'manual'` to filter nothing, when the consumer already mounts only the
-     * matching items.
+     * matching items. Returning a number instead of a boolean ranks as well as
+     * filters: `0` excludes, any positive score keeps, and surviving items
+     * reorder by score descending.
      */
     filter?: CommandFilter;
+    /**
+     * Wraps arrow navigation around the ends of the item list: Arrow Down from
+     * the last item highlights the first, Arrow Up from the first highlights
+     * the last. Deliberately the *opposite* default from `SkdxCombobox`'s and
+     * `SkdxAutocomplete`'s: those wrap because their list is a popup summoned
+     * by typing, while a palette's list is the whole surface and cmdk — the
+     * reference here — clamps.
+     * @default false — what this palette already did, so nothing changes for an existing consumer.
+     */
+    loop?: boolean;
+    /**
+     * Stops pointer-enter from moving the highlight, leaving it wherever the
+     * keyboard put it. A mouse resting over the list otherwise steals the
+     * highlight from a keyboard user mid-search.
+     * @default false — hover keeps tracking the pointer.
+     */
+    disablePointerSelection?: boolean;
     /**
      * Marks results as in flight: `data-loading` on the root and
      * `aria-busy`/`data-loading` on `SkdxCommandList`, mounts
@@ -41,28 +67,61 @@ type __VLS_Props = {
      * search never flashes "No results".
      */
     loading?: boolean;
+    /**
+     * The palette's commands, in labelled groups. `groups: [{ items }]` is the
+     * flat case — there is no separate `items` prop.
+     * @default [] — an empty palette.
+     */
+    groups?: CommandGroup[];
+    /**
+     * Placeholder text on the derived `SkdxCommandInput`.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Text the derived `SkdxCommandEmpty` shows when a search matches nothing.
+     * @default undefined — no derived `SkdxCommandEmpty`.
+     */
+    emptyMessage?: string;
+    /**
+     * Text the derived `SkdxCommandLoading` announces while `loading` is set.
+     * @default undefined — no derived `SkdxCommandLoading`, so the live region never announces an empty string.
+     */
+    loadingMessage?: string;
+};
+declare var __VLS_1: {}, __VLS_6: {
+    item: CommandItem;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: CommandItem) => any;
     "update:value": (value: string) => any;
     "value-change": (value: string) => any;
     "update:search": (search: string) => any;
     "search-change": (search: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: CommandItem) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onValue-change"?: ((value: string) => any) | undefined;
     "onUpdate:search"?: ((search: string) => any) | undefined;
     "onSearch-change"?: ((search: string) => any) | undefined;
 }>, {
-    loading: boolean;
     filter: CommandFilter;
     search: string;
+    loading: boolean;
+    placeholder: string;
     value: string;
     defaultValue: string;
+    loop: boolean;
+    groups: CommandGroup[];
+    emptyMessage: string;
+    loadingMessage: string;
     defaultSearch: string;
+    disablePointerSelection: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import { type CommandFilter } from './context.js';
+import type { CommandGroup, CommandItem } from './types.js';
 /**
  * Root of a cmdk-style command palette: owns virtual focus
  * (`aria-activedescendant`-based, so real DOM focus always stays on
@@ -10,6 +11,12 @@ import { type CommandFilter } from './context.js';
  * Not popper-anchored — mount it inside a `SkdxDialog` for a classic ⌘K
  * palette, or render it standalone.
  *
+ * Draws the derived anatomy from `groups`/`placeholder`/`empty-message` when
+ * the default slot is empty — an input and a `role="listbox"` of grouped
+ * items — and renders whatever the slot holds when it is not. The switch is
+ * presence only; this component never inspects *which* parts it was given.
+ * For full primitive composition, use `@skdx/vue/primitives/command`.
+ *
  * `SkdxCommandInput` writes what the user types into the root's `search`, and
  * the root filters its own items with a case-insensitive substring match on
  * each item's `value`. Pass `filter` to replace the matcher, or
@@ -31,9 +38,28 @@ type __VLS_Props = {
      * Replaces the built-in matcher (case-insensitive substring on the item's
      * `value`) — return `true` to keep an item mounted for this search — or
      * `'manual'` to filter nothing, when the consumer already mounts only the
-     * matching items.
+     * matching items. Returning a number instead of a boolean ranks as well as
+     * filters: `0` excludes, any positive score keeps, and surviving items
+     * reorder by score descending.
      */
     filter?: CommandFilter;
+    /**
+     * Wraps arrow navigation around the ends of the item list: Arrow Down from
+     * the last item highlights the first, Arrow Up from the first highlights
+     * the last. Deliberately the *opposite* default from `SkdxCombobox`'s and
+     * `SkdxAutocomplete`'s: those wrap because their list is a popup summoned
+     * by typing, while a palette's list is the whole surface and cmdk — the
+     * reference here — clamps.
+     * @default false — what this palette already did, so nothing changes for an existing consumer.
+     */
+    loop?: boolean;
+    /**
+     * Stops pointer-enter from moving the highlight, leaving it wherever the
+     * keyboard put it. A mouse resting over the list otherwise steals the
+     * highlight from a keyboard user mid-search.
+     * @default false — hover keeps tracking the pointer.
+     */
+    disablePointerSelection?: boolean;
     /**
      * Marks results as in flight: `data-loading` on the root and
      * `aria-busy`/`data-loading` on `SkdxCommandList`, mounts
@@ -41,28 +67,61 @@ type __VLS_Props = {
      * search never flashes "No results".
      */
     loading?: boolean;
+    /**
+     * The palette's commands, in labelled groups. `groups: [{ items }]` is the
+     * flat case — there is no separate `items` prop.
+     * @default [] — an empty palette.
+     */
+    groups?: CommandGroup[];
+    /**
+     * Placeholder text on the derived `SkdxCommandInput`.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Text the derived `SkdxCommandEmpty` shows when a search matches nothing.
+     * @default undefined — no derived `SkdxCommandEmpty`.
+     */
+    emptyMessage?: string;
+    /**
+     * Text the derived `SkdxCommandLoading` announces while `loading` is set.
+     * @default undefined — no derived `SkdxCommandLoading`, so the live region never announces an empty string.
+     */
+    loadingMessage?: string;
+};
+declare var __VLS_1: {}, __VLS_6: {
+    item: CommandItem;
 };
-declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: CommandItem) => any;
     "update:value": (value: string) => any;
     "value-change": (value: string) => any;
     "update:search": (search: string) => any;
     "search-change": (search: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: CommandItem) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     "onValue-change"?: ((value: string) => any) | undefined;
     "onUpdate:search"?: ((search: string) => any) | undefined;
     "onSearch-change"?: ((search: string) => any) | undefined;
 }>, {
-    loading: boolean;
     filter: CommandFilter;
     search: string;
+    loading: boolean;
+    placeholder: string;
     value: string;
     defaultValue: string;
+    loop: boolean;
+    groups: CommandGroup[];
+    emptyMessage: string;
+    loadingMessage: string;
     defaultSearch: string;
+    disablePointerSelection: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/command/Command.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const d=require("./context.cjs");let a=require("vue");var w=["data-loading"],y=(0,a.defineComponent)({__name:"Command",props:{value:{default:void 0},defaultValue:{default:void 0},search:{default:void 0},defaultSearch:{default:""},filter:{type:[String,Function],default:void 0},loading:{type:Boolean,default:!1}},emits:["update:value","value-change","update:search","search-change"],setup(s,{emit:p}){const t=s,r=p,i=(0,a.ref)(null),u=(0,a.ref)(null),l=(0,a.ref)(new Set),v=(0,a.ref)(new Map),f=(0,a.ref)(t.defaultValue??""),o=(0,a.computed)(()=>t.value===void 0?f.value:t.value),m=(0,a.ref)(t.defaultSearch),c=(0,a.computed)(()=>t.search===void 0?m.value:t.search);function g(e){o.value!==e&&(t.value===void 0&&(f.value=e),r("update:value",e),r("value-change",e))}function S(e){c.value!==e&&(t.search===void 0&&(m.value=e),r("update:search",e),r("search-change",e))}function _(e){return t.filter==="manual"||c.value===""?!0:(typeof t.filter=="function"?t.filter:d.defaultCommandFilter)(e,c.value)}function h(e){u.value=e,g(e?v.value.get(e)?.value??"":"")}function C(e){if(l.value.has(e))return;const n=new Set(l.value);n.add(e),l.value=n}function I(e){if(!l.value.has(e))return;const n=new Set(l.value);n.delete(e),l.value=n,u.value===e&&(u.value=null)}return(0,a.watch)(l,()=>{if(u.value&&l.value.has(u.value))return;const e=i.value?.querySelector(d.OPTION_SELECTOR);h(e?.id??null)},{flush:"post"}),(0,a.watch)([o,u],()=>{if(!o.value||u.value&&v.value.get(u.value)?.value===o.value)return;const e=i.value?.querySelector(`[role="option"][data-value="${CSS.escape(o.value)}"]`);e&&(u.value=e.id)},{flush:"post"}),(0,a.provide)(d.COMMAND_CONTEXT,{listRef:i,listId:d.nextCommandListId(),activeId:u,setActiveId:h,itemMetaRef:v,registerItem:C,unregisterItem:I,itemCount:(0,a.computed)(()=>l.value.size),search:c,setSearch:S,matches:_,loading:(0,a.computed)(()=>t.loading)}),(e,n)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-command","data-part":"root","data-skdx-component":"command","data-loading":s.loading?"":void 0},[(0,a.renderSlot)(e.$slots,"default")],8,w))}});exports.default=y;
+const I=require("../utils/scoredFilter.cjs"),d=require("./context.cjs"),k=require("./CommandAnatomy.vue.cjs");let t=require("vue");var P=["data-loading"],T=(0,t.defineComponent)({__name:"Command",props:{value:{default:void 0},defaultValue:{default:void 0},search:{default:void 0},defaultSearch:{default:""},filter:{type:[String,Function],default:void 0},loop:{type:Boolean,default:!1},disablePointerSelection:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},groups:{default:()=>[]},placeholder:{default:void 0},emptyMessage:{default:void 0},loadingMessage:{default:void 0}},emits:["update:value","value-change","update:search","search-change","select"],setup(s,{emit:q}){const l=s,c=q,f=(0,t.ref)(null),u=(0,t.ref)(null),n=(0,t.ref)(new Set),v=(0,t.ref)(new Map),g=(0,t.ref)(l.defaultValue??""),r=(0,t.computed)(()=>l.value===void 0?g.value:l.value),h=(0,t.ref)(l.defaultSearch),i=(0,t.computed)(()=>l.search===void 0?h.value:l.search);function b(e){r.value!==e&&(l.value===void 0&&(g.value=e),c("update:value",e),c("value-change",e))}function B(e){i.value!==e&&(l.search===void 0&&(h.value=e),c("update:search",e),c("search-change",e))}function M(e,a){return l.filter==="manual"||i.value===""?!0:I.filterKeeps((typeof l.filter=="function"?l.filter:d.defaultCommandFilter)(e,i.value,a))}function R(e){if(l.filter==="manual"||i.value==="")return null;const a=v.value.get(e);if(!a)return null;const o=(typeof l.filter=="function"?l.filter:d.defaultCommandFilter)(a.value,i.value,a.keywords);return typeof o=="number"?o:null}function m(){const e=f.value;return e?I.orderByScore(e,d.OPTION_SELECTOR,R):[]}(0,t.watch)([n,i,()=>l.filter],()=>m(),{flush:"post"});function p(e,a){if(!e.contains(a))return;const o=e.getBoundingClientRect(),y=a.getBoundingClientRect(),C=y.top-o.top,w=y.bottom-o.bottom;C<0?e.scrollTop+=C:w>0&&(e.scrollTop+=w)}function S(e){u.value=e,b(e?v.value.get(e)?.value??"":"")}function O(e){if(n.value.has(e))return;const a=new Set(n.value);a.add(e),n.value=a}function _(e){if(!n.value.has(e))return;const a=new Set(n.value);a.delete(e),n.value=a,u.value===e&&(u.value=null)}return(0,t.watch)([n,r],()=>{if(u.value&&n.value.has(u.value))return;const e=f.value,a=r.value?e?.querySelector(`[role="option"][data-value="${CSS.escape(r.value)}"]`):null;if(a){u.value=a.id,e&&p(e,a);return}const o=m()[0];S(o?.id??null),e&&o&&p(e,o)},{flush:"post"}),(0,t.watch)([r,u],()=>{if(!r.value||u.value&&v.value.get(u.value)?.value===r.value)return;const e=f.value,a=e?.querySelector(`[role="option"][data-value="${CSS.escape(r.value)}"]`);a&&(u.value=a.id,e&&p(e,a))},{flush:"post"}),(0,t.provide)(d.COMMAND_CONTEXT,{listRef:f,listId:d.nextCommandListId(),activeId:u,setActiveId:S,itemMetaRef:v,registerItem:O,unregisterItem:_,itemCount:(0,t.computed)(()=>n.value.size),search:i,setSearch:B,matches:M,orderedOptions:m,loop:(0,t.computed)(()=>l.loop),disablePointerSelection:(0,t.computed)(()=>l.disablePointerSelection),loading:(0,t.computed)(()=>l.loading)}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-command","data-part":"root","data-skdx-component":"command","data-loading":s.loading?"":void 0},[(0,t.renderSlot)(e.$slots,"default",{},()=>[(0,t.createVNode)(k.default,{groups:s.groups,placeholder:s.placeholder,"empty-message":s.emptyMessage,"loading-message":s.loadingMessage,"on-item-select":o=>c("select",o)},(0,t.createSlots)({_:2},[e.$slots.item?{name:"item",fn:(0,t.withCtx)(o=>[(0,t.renderSlot)(e.$slots,"item",(0,t.normalizeProps)((0,t.guardReactiveProps)(o)))]),key:"0"}:void 0]),1032,["groups","placeholder","empty-message","loading-message","on-item-select"])])],8,P))}});exports.default=T;

package/dist/command/Command.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COMMAND_CONTEXT as e,OPTION_SELECTOR as a,defaultCommandFilter as t,nextCommandListId as l}from"./context.js";import{computed as u,createElementBlock as n,defineComponent as o,openBlock as d,provide as v,ref as s,renderSlot as i,watch as r}from"vue";var c=["data-loading"],f=/* @__PURE__ */o({__name:"Command",props:{value:{default:void 0},defaultValue:{default:void 0},search:{default:void 0},defaultSearch:{default:""},filter:{type:[String,Function],default:void 0},loading:{type:Boolean,default:!1}},emits:["update:value","value-change","update:search","search-change"],setup(o,{emit:f}){const m=o,p=f,h=s(null),g=s(null),S=s(/* @__PURE__ */new Set),C=s(/* @__PURE__ */new Map),I=s(m.defaultValue??""),w=u(()=>void 0===m.value?I.value:m.value),x=s(m.defaultSearch),y=u(()=>void 0===m.search?x.value:m.search);function O(e){g.value=e,function(e){w.value!==e&&(void 0===m.value&&(I.value=e),p("update:value",e),p("value-change",e))}(e?C.value.get(e)?.value??"":"")}return r(S,()=>{if(g.value&&S.value.has(g.value))return;const e=h.value?.querySelector(a);O(e?.id??null)},{flush:"post"}),r([w,g],()=>{if(!w.value||g.value&&C.value.get(g.value)?.value===w.value)return;const e=h.value?.querySelector(`[role="option"][data-value="${CSS.escape(w.value)}"]`);e&&(g.value=e.id)},{flush:"post"}),v(e,{listRef:h,listId:l(),activeId:g,setActiveId:O,itemMetaRef:C,registerItem:function(e){if(S.value.has(e))return;const a=new Set(S.value);a.add(e),S.value=a},unregisterItem:function(e){if(!S.value.has(e))return;const a=new Set(S.value);a.delete(e),S.value=a,g.value===e&&(g.value=null)},itemCount:u(()=>S.value.size),search:y,setSearch:function(e){y.value!==e&&(void 0===m.search&&(x.value=e),p("update:search",e),p("search-change",e))},matches:function(e){return"manual"===m.filter||""===y.value||("function"==typeof m.filter?m.filter:t)(e,y.value)},loading:u(()=>m.loading)}),(e,a)=>(d(),n("div",{class:"skdx-command","data-part":"root","data-skdx-component":"command","data-loading":o.loading?"":void 0},[i(e.$slots,"default")],8,c))}});export{f as default};
+import{filterKeeps as e,orderByScore as a}from"../utils/scoredFilter.js";import{COMMAND_CONTEXT as t,OPTION_SELECTOR as l,defaultCommandFilter as o,nextCommandListId as u}from"./context.js";import n from"./CommandAnatomy.vue.js";import{computed as s,createElementBlock as i,createSlots as r,createVNode as d,defineComponent as c,guardReactiveProps as v,normalizeProps as f,openBlock as p,provide as m,ref as g,renderSlot as h,watch as S,withCtx as y}from"vue";var C=["data-loading"],B=/* @__PURE__ */c({__name:"Command",props:{value:{default:void 0},defaultValue:{default:void 0},search:{default:void 0},defaultSearch:{default:""},filter:{type:[String,Function],default:void 0},loop:{type:Boolean,default:!1},disablePointerSelection:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},groups:{default:()=>[]},placeholder:{default:void 0},emptyMessage:{default:void 0},loadingMessage:{default:void 0}},emits:["update:value","value-change","update:search","search-change","select"],setup(c,{emit:B}){const M=c,w=B,I=g(null),b=g(null),k=g(/* @__PURE__ */new Set),x=g(/* @__PURE__ */new Map),O=g(M.defaultValue??""),P=s(()=>void 0===M.value?O.value:M.value),R=g(M.defaultSearch),T=s(()=>void 0===M.search?R.value:M.search);function $(e){if("manual"===M.filter||""===T.value)return null;const a=x.value.get(e);if(!a)return null;const t=("function"==typeof M.filter?M.filter:o)(a.value,T.value,a.keywords);return"number"==typeof t?t:null}function _(){const e=I.value;return e?a(e,l,$):[]}function E(e,a){if(!e.contains(a))return;const t=e.getBoundingClientRect(),l=a.getBoundingClientRect(),o=l.top-t.top,u=l.bottom-t.bottom;o<0?e.scrollTop+=o:u>0&&(e.scrollTop+=u)}function N(e){b.value=e,function(e){P.value!==e&&(void 0===M.value&&(O.value=e),w("update:value",e),w("value-change",e))}(e?x.value.get(e)?.value??"":"")}return S([k,T,()=>M.filter],()=>_(),{flush:"post"}),S([k,P],()=>{if(b.value&&k.value.has(b.value))return;const e=I.value,a=P.value?e?.querySelector(`[role="option"][data-value="${CSS.escape(P.value)}"]`):null;if(a)return b.value=a.id,void(e&&E(e,a));const t=_()[0];N(t?.id??null),e&&t&&E(e,t)},{flush:"post"}),S([P,b],()=>{if(!P.value||b.value&&x.value.get(b.value)?.value===P.value)return;const e=I.value,a=e?.querySelector(`[role="option"][data-value="${CSS.escape(P.value)}"]`);a&&(b.value=a.id,e&&E(e,a))},{flush:"post"}),m(t,{listRef:I,listId:u(),activeId:b,setActiveId:N,itemMetaRef:x,registerItem:function(e){if(k.value.has(e))return;const a=new Set(k.value);a.add(e),k.value=a},unregisterItem:function(e){if(!k.value.has(e))return;const a=new Set(k.value);a.delete(e),k.value=a,b.value===e&&(b.value=null)},itemCount:s(()=>k.value.size),search:T,setSearch:function(e){T.value!==e&&(void 0===M.search&&(R.value=e),w("update:search",e),w("search-change",e))},matches:function(a,t){return"manual"===M.filter||""===T.value||e(("function"==typeof M.filter?M.filter:o)(a,T.value,t))},orderedOptions:_,loop:s(()=>M.loop),disablePointerSelection:s(()=>M.disablePointerSelection),loading:s(()=>M.loading)}),(e,a)=>(p(),i("div",{class:"skdx-command","data-part":"root","data-skdx-component":"command","data-loading":c.loading?"":void 0},[h(e.$slots,"default",{},()=>[d(n,{groups:c.groups,placeholder:c.placeholder,"empty-message":c.emptyMessage,"loading-message":c.loadingMessage,"on-item-select":e=>w("select",e)},r({_:2},[e.$slots.item?{name:"item",fn:y(a=>[h(e.$slots,"item",f(v(a)))]),key:"0"}:void 0]),1032,["groups","placeholder","empty-message","loading-message","on-item-select"])])],8,C))}});export{B as default};

package/dist/command/CommandAnatomy.vue.cjs

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

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

@@ -0,0 +1,32 @@
+import type { CommandGroup, CommandItem } from './types.cjs';
+/**
+ * Default anatomy for `SkdxCommand`: search input, `role="listbox"` built from
+ * `groups` (wrapped in `SkdxCommandGroup` if a group has a label), plus empty
+ * and loading states.
+ * @internal
+ */
+type __VLS_Props = {
+    groups: CommandGroup[];
+    placeholder?: string;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    onItemSelect?: (item: CommandItem) => void;
+};
+declare var __VLS_19: {
+    item: CommandItem;
+}, __VLS_24: {
+    item: CommandItem;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_19) => any;
+} & {
+    item?: (props: typeof __VLS_24) => 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/command/CommandAnatomy.vue.d.ts

@@ -0,0 +1,32 @@
+import type { CommandGroup, CommandItem } from './types.js';
+/**
+ * Default anatomy for `SkdxCommand`: search input, `role="listbox"` built from
+ * `groups` (wrapped in `SkdxCommandGroup` if a group has a label), plus empty
+ * and loading states.
+ * @internal
+ */
+type __VLS_Props = {
+    groups: CommandGroup[];
+    placeholder?: string;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    onItemSelect?: (item: CommandItem) => void;
+};
+declare var __VLS_19: {
+    item: CommandItem;
+}, __VLS_24: {
+    item: CommandItem;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_19) => any;
+} & {
+    item?: (props: typeof __VLS_24) => 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/command/CommandAnatomy.vue.js

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

package/dist/command/CommandAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const u=require("./CommandEmpty.vue.cjs"),s=require("./CommandGroup.vue.cjs"),i=require("./CommandInput.vue.cjs"),d=require("./CommandItem.vue.cjs"),k=require("./CommandList.vue.cjs"),m=require("./CommandLoading.vue.cjs");let e=require("vue");var y=(0,e.defineComponent)({__name:"CommandAnatomy",props:{groups:{},placeholder:{},emptyMessage:{},loadingMessage:{},onItemSelect:{type:Function}},setup(t){function o(a,n){a.onSelect?.(),n?.(a)}return(a,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(i.default,{placeholder:t.placeholder},null,8,["placeholder"]),t.loadingMessage?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.loadingMessage),1)]),_:1})):(0,e.createCommentVNode)("",!0),t.emptyMessage?((0,e.openBlock)(),(0,e.createBlock)(u.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.emptyMessage),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(k.default,{"aria-label":t.placeholder},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.groups,(r,c)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:r.label??c},[r.label?((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:0,heading:r.label},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(r.items,l=>((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:l.value??l.label,value:l.value??l.label,keywords:l.keywords,disabled:l.disabled,"on-select":()=>o(l,t.onItemSelect)},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"item",{item:l},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.label),1)])]),_:2},1032,["value","keywords","disabled","on-select"]))),128))]),_:2},1032,["heading"])):((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:1},(0,e.renderList)(r.items,l=>((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:l.value??l.label,value:l.value??l.label,keywords:l.keywords,disabled:l.disabled,"on-select":()=>o(l,t.onItemSelect)},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"item",{item:l},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.label),1)])]),_:2},1032,["value","keywords","disabled","on-select"]))),128))],64))),128))]),_:3},8,["aria-label"])],64))}});exports.default=y;

package/dist/command/CommandAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"./CommandEmpty.vue.js";import a from"./CommandGroup.vue.js";import l from"./CommandInput.vue.js";import o from"./CommandItem.vue.js";import t from"./CommandList.vue.js";import s from"./CommandLoading.vue.js";import{Fragment as d,createBlock as m,createCommentVNode as r,createElementBlock as n,createTextVNode as i,createVNode as u,defineComponent as p,openBlock as c,renderList as y,renderSlot as b,toDisplayString as f,withCtx as g}from"vue";var k=/* @__PURE__ */p({__name:"CommandAnatomy",props:{groups:{},placeholder:{},emptyMessage:{},loadingMessage:{},onItemSelect:{type:Function}},setup(p){function k(e,a){e.onSelect?.(),a?.(e)}return(v,C)=>(c(),n(d,null,[u(l,{placeholder:p.placeholder},null,8,["placeholder"]),p.loadingMessage?(c(),m(s,{key:0},{default:g(()=>[i(f(p.loadingMessage),1)]),_:1})):r("",!0),p.emptyMessage?(c(),m(e,{key:1},{default:g(()=>[i(f(p.emptyMessage),1)]),_:1})):r("",!0),u(t,{"aria-label":p.placeholder},{default:g(()=>[(c(!0),n(d,null,y(p.groups,(e,l)=>(c(),n(d,{key:e.label??l},[e.label?(c(),m(a,{key:0,heading:e.label},{default:g(()=>[(c(!0),n(d,null,y(e.items,e=>(c(),m(o,{key:e.value??e.label,value:e.value??e.label,keywords:e.keywords,disabled:e.disabled,"on-select":()=>k(e,p.onItemSelect)},{default:g(()=>[b(v.$slots,"item",{item:e},()=>[i(f(e.label),1)])]),_:2},1032,["value","keywords","disabled","on-select"]))),128))]),_:2},1032,["heading"])):(c(!0),n(d,{key:1},y(e.items,e=>(c(),m(o,{key:e.value??e.label,value:e.value??e.label,keywords:e.keywords,disabled:e.disabled,"on-select":()=>k(e,p.onItemSelect)},{default:g(()=>[b(v.$slots,"item",{item:e},()=>[i(f(e.label),1)])]),_:2},1032,["value","keywords","disabled","on-select"]))),128))],64))),128))]),_:3},8,["aria-label"])],64))}});export{k as default};

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

@@ -1,10 +1,8 @@
 /**
- * Renders its children (typically "No results found") only when zero
- * `SkdxCommandItem`s are currently mounted inside `SkdxCommandList` — i.e. when
- * the search (or the consumer's own filtering) leaves nothing to show, and
- * never while the root is `loading`: an in-flight search that flashes
- * "No results" and then fills in is worse than showing nothing. Renders
- * `role="presentation"`. Must be used inside `SkdxCommand`.
+ * Renders its children ("No results found", etc.) only when zero
+ * `SkdxCommandItem`s are mounted in `SkdxCommandList` and the root is not
+ * `loading`. Prevents "No results" flash during in-flight searches. Must be
+ * used inside `SkdxCommand`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,10 +1,8 @@
 /**
- * Renders its children (typically "No results found") only when zero
- * `SkdxCommandItem`s are currently mounted inside `SkdxCommandList` — i.e. when
- * the search (or the consumer's own filtering) leaves nothing to show, and
- * never while the root is `loading`: an in-flight search that flashes
- * "No results" and then fills in is worse than showing nothing. Renders
- * `role="presentation"`. Must be used inside `SkdxCommand`.
+ * Renders its children ("No results found", etc.) only when zero
+ * `SkdxCommandItem`s are mounted in `SkdxCommandList` and the root is not
+ * `loading`. Prevents "No results" flash during in-flight searches. Must be
+ * used inside `SkdxCommand`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,12 +1,14 @@
 /**
- * Labelled cluster of `SkdxCommandItem`s: renders a `<div role="group">` with
- * an optional non-interactive heading above the items, via the `heading`
- * slot.
+ * Labelled cluster of command items. Renders `<div role="group">` named by
+ * heading (prop or slot), rendered non-interactively. Heading has
+ * `role="presentation"` and generates `id` for `aria-labelledby`. Only emits
+ * `aria-labelledby` when heading is given.
  */
 type __VLS_Props = {
     /**
-     * Non-interactive heading rendered above the group's items.
-     * @default undefined — no heading rendered.
+     * Non-interactive heading rendered above the group's items, and the group's
+     * accessible name.
+     * @default undefined — no heading rendered, and the group stays unnamed.
      */
     heading?: string;
 };

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

@@ -1,12 +1,14 @@
 /**
- * Labelled cluster of `SkdxCommandItem`s: renders a `<div role="group">` with
- * an optional non-interactive heading above the items, via the `heading`
- * slot.
+ * Labelled cluster of command items. Renders `<div role="group">` named by
+ * heading (prop or slot), rendered non-interactively. Heading has
+ * `role="presentation"` and generates `id` for `aria-labelledby`. Only emits
+ * `aria-labelledby` when heading is given.
  */
 type __VLS_Props = {
     /**
-     * Non-interactive heading rendered above the group's items.
-     * @default undefined — no heading rendered.
+     * Non-interactive heading rendered above the group's items, and the group's
+     * accessible name.
+     * @default undefined — no heading rendered, and the group stays unnamed.
      */
     heading?: string;
 };

package/dist/command/CommandGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var r={class:"skdx-command__group","data-part":"group",role:"group"},a={key:0,role:"presentation"},n=(0,e.defineComponent)({__name:"CommandGroup",props:{heading:{}},setup(o){return(t,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",r,[o.heading!==void 0||t.$slots.heading?((0,e.openBlock)(),(0,e.createElementBlock)("div",a,[(0,e.renderSlot)(t.$slots,"heading",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.heading),1)])])):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=n;
+const l=require("./context.cjs");let e=require("vue");var u=["aria-labelledby"],i=["id"],s=(0,e.defineComponent)({__name:"CommandGroup",props:{heading:{}},setup(o){const n=o,d=(0,e.useSlots)(),t=l.nextCommandGroupHeadingId(),a=(0,e.computed)(()=>n.heading!==void 0||!!d.heading);return(r,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-command__group","data-part":"group",role:"group","aria-labelledby":a.value?(0,e.unref)(t):void 0},[a.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,role:"presentation",id:(0,e.unref)(t)},[(0,e.renderSlot)(r.$slots,"heading",{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.heading),1)])],8,i)):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(r.$slots,"default")],8,u))}});exports.default=s;

package/dist/command/CommandGroup.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createCommentVNode as e,createElementBlock as a,createTextVNode as o,defineComponent as t,openBlock as s,renderSlot as r,toDisplayString as d}from"vue";var n={class:"skdx-command__group","data-part":"group",role:"group"},p={key:0,role:"presentation"},i=/* @__PURE__ */t({__name:"CommandGroup",props:{heading:{}},setup:t=>(i,l)=>(s(),a("div",n,[void 0!==t.heading||i.$slots.heading?(s(),a("div",p,[r(i.$slots,"heading",{},()=>[o(d(t.heading),1)])])):e("",!0),r(i.$slots,"default")]))});export{i as default};
+import{nextCommandGroupHeadingId as e}from"./context.js";import{computed as a,createCommentVNode as o,createElementBlock as t,createTextVNode as d,defineComponent as r,openBlock as s,renderSlot as n,toDisplayString as l,unref as i,useSlots as p}from"vue";var m=["aria-labelledby"],u=["id"],c=/* @__PURE__ */r({__name:"CommandGroup",props:{heading:{}},setup(r){const c=r,g=p(),v=e(),f=a(()=>void 0!==c.heading||!!g.heading);return(e,a)=>(s(),t("div",{class:"skdx-command__group","data-part":"group",role:"group","aria-labelledby":f.value?i(v):void 0},[f.value?(s(),t("div",{key:0,role:"presentation",id:i(v)},[n(e.$slots,"heading",{},()=>[d(l(r.heading),1)])],8,u)):o("",!0),n(e.$slots,"default")],8,m))}});export{c as default};

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

@@ -1,15 +1,7 @@
 /**
- * The palette's search/filter field: a plain `<input type="text">` wired to
- * `SkdxCommandList` via `aria-controls` and to the currently highlighted item
- * via `aria-activedescendant`. Handles Arrow Up/Down to move the virtual
- * highlight across whichever `SkdxCommandItem`s are currently mounted, and
- * Enter to invoke the highlighted item's `onSelect`. Real DOM focus stays
- * here at all times — filtering the item list as the user types does not
- * need to move focus. Must be used inside `SkdxCommand`.
- *
- * Every keystroke also writes into the root's `search`, which is what drives
- * the root's own filtering. Binding `:value`/`@input` here still works: the
- * consumer's handler runs alongside, not instead of, that.
+ * Search/filter field wired via aria-controls and aria-activedescendant.
+ * Handles Arrow Up/Down for virtual highlight, Enter to invoke. Real focus
+ * stays here. Keystroke writes to root's search; consumer's @input runs alongside.
  */
 type __VLS_Props = {};
 declare const _default: 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>;

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

@@ -1,15 +1,7 @@
 /**
- * The palette's search/filter field: a plain `<input type="text">` wired to
- * `SkdxCommandList` via `aria-controls` and to the currently highlighted item
- * via `aria-activedescendant`. Handles Arrow Up/Down to move the virtual
- * highlight across whichever `SkdxCommandItem`s are currently mounted, and
- * Enter to invoke the highlighted item's `onSelect`. Real DOM focus stays
- * here at all times — filtering the item list as the user types does not
- * need to move focus. Must be used inside `SkdxCommand`.
- *
- * Every keystroke also writes into the root's `search`, which is what drives
- * the root's own filtering. Binding `:value`/`@input` here still works: the
- * consumer's handler runs alongside, not instead of, that.
+ * Search/filter field wired via aria-controls and aria-activedescendant.
+ * Handles Arrow Up/Down for virtual highlight, Enter to invoke. Real focus
+ * stays here. Keystroke writes to root's search; consumer's @input runs alongside.
  */
 type __VLS_Props = {};
 declare const _default: 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>;

package/dist/command/CommandInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const c=require("./context.cjs");let a=require("vue");var f=["aria-controls","aria-activedescendant"],p=(0,a.defineComponent)({__name:"CommandInput",setup(v){const o=(0,a.inject)(c.COMMAND_CONTEXT);if(!o)throw new Error("SkdxCommandInput must be used within SkdxCommand.");const t=o;function u(e){const n=t.listRef.value;if(!n)return;const r=Array.from(n.querySelectorAll(c.OPTION_SELECTOR));if(r.length===0)return;let i=r.findIndex(s=>s.id===t.activeId.value)+e;i<0&&(i=0),i>=r.length&&(i=r.length-1),t.setActiveId(r[i].id)}function l(e){t.setSearch(e.target.value)}function d(e){if(e.key==="ArrowDown")e.preventDefault(),u(1);else if(e.key==="ArrowUp")e.preventDefault(),u(-1);else if(e.key==="Enter"){if(!t.activeId.value)return;const n=t.itemMetaRef.value.get(t.activeId.value);n&&!n.disabled&&(e.preventDefault(),n.onSelect?.(n.value))}}return(e,n)=>((0,a.openBlock)(),(0,a.createElementBlock)("input",{class:"skdx-command__input","data-part":"input",type:"text","aria-controls":(0,a.unref)(t).listId,"aria-activedescendant":(0,a.unref)(t).activeId.value??void 0,autocomplete:"off",onInput:l,onKeydown:d},null,40,f))}});exports.default=p;
+const p=require("./context.cjs");let o=require("vue");var m=["aria-controls","aria-activedescendant"],_=(0,o.defineComponent)({__name:"CommandInput",setup(v){const r=(0,o.inject)(p.COMMAND_CONTEXT);if(!r)throw new Error("SkdxCommandInput must be used within SkdxCommand.");const n=r;function i(){return n.orderedOptions()}function u(e){const t=i();if(t.length===0)return;const a=t.findIndex(f=>f.id===n.activeId.value),c=a===-1?e===1?-1:0:a,l=t[n.loop.value?(c+e+t.length)%t.length:Math.min(t.length-1,Math.max(0,c+e))];n.setActiveId(l.id),l.scrollIntoView?.({block:"nearest"})}function s(e){n.setSearch(e.target.value)}function d(e){if(e.key==="ArrowDown")e.preventDefault(),u(1);else if(e.key==="ArrowUp")e.preventDefault(),u(-1);else if(e.key==="Home"||e.key==="End"){const t=i();if(t.length===0)return;e.preventDefault();const a=e.key==="Home"?t[0]:t[t.length-1];n.setActiveId(a.id),a.scrollIntoView?.({block:"nearest"})}else if(e.key==="Enter"){if(!n.activeId.value)return;const t=n.itemMetaRef.value.get(n.activeId.value);t&&!t.disabled&&(e.preventDefault(),t.onSelect?.(t.value))}}return(e,t)=>((0,o.openBlock)(),(0,o.createElementBlock)("input",{class:"skdx-command__input","data-part":"input",type:"text","aria-controls":(0,o.unref)(n).listId,"aria-activedescendant":(0,o.unref)(n).activeId.value??void 0,autocomplete:"off",onInput:s,onKeydown:d},null,40,m))}});exports.default=_;

package/dist/command/CommandInput.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COMMAND_CONTEXT as e,OPTION_SELECTOR as t}from"./context.js";import{createElementBlock as n,defineComponent as a,inject as o,openBlock as r,unref as i}from"vue";var l=["aria-controls","aria-activedescendant"],u=/* @__PURE__ */a({__name:"CommandInput",setup(a){const u=o(e);if(!u)throw new Error("SkdxCommandInput must be used within SkdxCommand.");const s=u;function c(e){const n=s.listRef.value;if(!n)return;const a=Array.from(n.querySelectorAll(t));if(0===a.length)return;let o=a.findIndex(e=>e.id===s.activeId.value)+e;o<0&&(o=0),o>=a.length&&(o=a.length-1),s.setActiveId(a[o].id)}function d(e){s.setSearch(e.target.value)}function f(e){if("ArrowDown"===e.key)e.preventDefault(),c(1);else if("ArrowUp"===e.key)e.preventDefault(),c(-1);else if("Enter"===e.key){if(!s.activeId.value)return;const t=s.itemMetaRef.value.get(s.activeId.value);t&&!t.disabled&&(e.preventDefault(),t.onSelect?.(t.value))}}return(e,t)=>(r(),n("input",{class:"skdx-command__input","data-part":"input",type:"text","aria-controls":i(s).listId,"aria-activedescendant":i(s).activeId.value??void 0,autocomplete:"off",onInput:d,onKeydown:f},null,40,l))}});export{u as default};
+import{COMMAND_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as n,inject as a,openBlock as o,unref as r}from"vue";var i=["aria-controls","aria-activedescendant"],l=/* @__PURE__ */n({__name:"CommandInput",setup(n){const l=a(e);if(!l)throw new Error("SkdxCommandInput must be used within SkdxCommand.");const s=l;function c(){return s.orderedOptions()}function u(e){const t=c();if(0===t.length)return;const n=t.findIndex(e=>e.id===s.activeId.value),a=-1===n?1===e?-1:0:n,o=t[s.loop.value?(a+e+t.length)%t.length:Math.min(t.length-1,Math.max(0,a+e))];s.setActiveId(o.id),o.scrollIntoView?.({block:"nearest"})}function d(e){s.setSearch(e.target.value)}function f(e){if("ArrowDown"===e.key)e.preventDefault(),u(1);else if("ArrowUp"===e.key)e.preventDefault(),u(-1);else if("Home"===e.key||"End"===e.key){const t=c();if(0===t.length)return;e.preventDefault();const n="Home"===e.key?t[0]:t[t.length-1];s.setActiveId(n.id),n.scrollIntoView?.({block:"nearest"})}else if("Enter"===e.key){if(!s.activeId.value)return;const t=s.itemMetaRef.value.get(s.activeId.value);t&&!t.disabled&&(e.preventDefault(),t.onSelect?.(t.value))}}return(e,n)=>(o(),t("input",{class:"skdx-command__input","data-part":"input",type:"text","aria-controls":r(s).listId,"aria-activedescendant":r(s).activeId.value??void 0,autocomplete:"off",onInput:d,onKeydown:f},null,40,i))}});export{l as default};

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

@@ -1,17 +1,9 @@
 /**
- * A single selectable result: `role="option"` with `aria-selected` and
- * `data-highlighted`/`data-disabled` reflecting virtual-focus state.
- * Registers itself with the parent `SkdxCommand` on mount (and unregisters
- * on unmount, so filtering items in/out keeps navigation and
- * `SkdxCommandEmpty` accurate). Pointer-enter moves the highlight here;
- * click or Enter (while highlighted) fires `onSelect` with `value`. Set
- * `disabled` to exclude it from navigation and selection. Must be used
- * inside `SkdxCommand`.
- *
- * Renders nothing while the root's search filters it out — a filtered-out item
- * is unregistered, not just hidden, so `SkdxCommandEmpty` and keyboard
- * navigation both see only what is shown. `data-value` carries its `value` so
- * the root can move the highlight to it by value.
+ * A selectable result: `role="option"` with `aria-selected` reflecting highlight
+ * state and `data-highlighted` / `data-disabled` attributes. Registers with
+ * parent `SkdxCommand` on mount; filtered items render nothing and unregister.
+ * Pointer-enter moves highlight; click or Enter fires `onSelect`. Set `disabled`
+ * to exclude from navigation and selection.
  */
 type __VLS_Props = {
     /** Identifier passed to `onSelect` and used to match this item as the active/highlighted one. */
@@ -26,6 +18,17 @@ type __VLS_Props = {
      * @default undefined — no-op if omitted.
      */
     onSelect?: (value: string) => void;
+    /**
+     * Extra strings the root's filter matches against, like aliases for
+     * searchability. Passed to custom `filter` as its third argument.
+     * @default undefined — the item matches on its `value` alone.
+     */
+    keywords?: string[];
+    /**
+     * Keeps the item mounted during search, for always-reachable actions like "Create new…".
+     * @default false
+     */
+    forceMount?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1,17 +1,9 @@
 /**
- * A single selectable result: `role="option"` with `aria-selected` and
- * `data-highlighted`/`data-disabled` reflecting virtual-focus state.
- * Registers itself with the parent `SkdxCommand` on mount (and unregisters
- * on unmount, so filtering items in/out keeps navigation and
- * `SkdxCommandEmpty` accurate). Pointer-enter moves the highlight here;
- * click or Enter (while highlighted) fires `onSelect` with `value`. Set
- * `disabled` to exclude it from navigation and selection. Must be used
- * inside `SkdxCommand`.
- *
- * Renders nothing while the root's search filters it out — a filtered-out item
- * is unregistered, not just hidden, so `SkdxCommandEmpty` and keyboard
- * navigation both see only what is shown. `data-value` carries its `value` so
- * the root can move the highlight to it by value.
+ * A selectable result: `role="option"` with `aria-selected` reflecting highlight
+ * state and `data-highlighted` / `data-disabled` attributes. Registers with
+ * parent `SkdxCommand` on mount; filtered items render nothing and unregister.
+ * Pointer-enter moves highlight; click or Enter fires `onSelect`. Set `disabled`
+ * to exclude from navigation and selection.
  */
 type __VLS_Props = {
     /** Identifier passed to `onSelect` and used to match this item as the active/highlighted one. */
@@ -26,6 +18,17 @@ type __VLS_Props = {
      * @default undefined — no-op if omitted.
      */
     onSelect?: (value: string) => void;
+    /**
+     * Extra strings the root's filter matches against, like aliases for
+     * searchability. Passed to custom `filter` as its third argument.
+     * @default undefined — the item matches on its `value` alone.
+     */
+    keywords?: string[];
+    /**
+     * Keeps the item mounted during search, for always-reachable actions like "Create new…".
+     * @default false
+     */
+    forceMount?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/command/CommandItem.vue_vue_type_script_setup_true_lang.cjs

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