@skdx/vue 0.26.0 → 0.28.0

package/dist/autocomplete/AutocompleteInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const y=require("../utils/reassertValue.cjs"),I=require("../utils/popper.cjs"),c=require("./context.cjs");let n=require("vue");var h=["aria-expanded","aria-controls","aria-activedescendant","disabled","readonly","aria-invalid","aria-readonly","data-invalid","data-readonly","data-disabled","data-state","value"],x=(0,n.defineComponent)({__name:"AutocompleteInput",setup(A){const l=(0,n.inject)(c.AUTOCOMPLETE_CONTEXT);if(!l)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const e=l,r=(0,n.inject)(I.POPPER_CONTEXT);if(!r)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const i=(0,n.ref)(null);(0,n.onMounted)(()=>{e.inputRef.value=i.value,r.setAnchor(i.value)}),(0,n.onBeforeUnmount)(()=>{r.anchor.value===i.value&&r.setAnchor(null)});function d(t){const a=e.contentRef.value;if(!a)return;const u=Array.from(a.querySelectorAll(c.OPTION_SELECTOR));if(u.length===0)return;let o=u.findIndex(_=>_.id===e.activeId.value)+t;o<0&&(o=0),o>=u.length&&(o=u.length-1),e.setActiveId(u[o].id)}function p(){const t=e.activeId.value?e.getItem(e.activeId.value):void 0;return t?(e.commitItem(t.value,t.text||t.value),!0):!1}function s(t){const a=t.target;e.onInputValueChange(a.value),e.open.value||e.setOpen(!0),y.reassertValue(a,()=>e.inputValue.value)}function f(){e.openOnFocus&&!e.readOnly&&!e.open.value&&e.setOpen(!0)}function v(){e.commitInputValue()}function m(t){t.key==="ArrowDown"?(t.preventDefault(),e.open.value?d(1):e.openWithHighlight("first")):t.key==="ArrowUp"?(t.preventDefault(),e.open.value?d(-1):e.openWithHighlight("last")):t.key==="Enter"?p()?t.preventDefault():e.allowCustomValue&&e.inputValue.value!==""&&(t.preventDefault(),e.commitInputValue()):t.key==="Escape"?e.open.value&&!e.contentRef.value&&(t.preventDefault(),e.revert()):t.key==="Tab"&&e.commitInputValue()}return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)("input",{class:"skdx-autocomplete__input","data-part":"input",ref_key:"elRef",ref:i,type:"text",role:"combobox","aria-expanded":(0,n.unref)(e).open.value,"aria-controls":(0,n.unref)(e).listId,"aria-autocomplete":"list","aria-activedescendant":(0,n.unref)(e).activeId.value??void 0,autocomplete:"off",disabled:(0,n.unref)(e).disabled||void 0,readonly:(0,n.unref)(e).readOnly||void 0,"aria-invalid":(0,n.unref)(e).invalid?!0:void 0,"aria-readonly":(0,n.unref)(e).readOnly?!0:void 0,"data-invalid":(0,n.unref)(e).invalid?"":void 0,"data-readonly":(0,n.unref)(e).readOnly?"":void 0,"data-disabled":(0,n.unref)(e).disabled?"":void 0,"data-state":(0,n.unref)(e).open.value?"open":"closed",value:(0,n.unref)(e).inputValue.value,onInput:s,onFocus:f,onBlur:v,onKeydown:m},null,40,h))}});exports.default=x;
+const _=require("../utils/reassertValue.cjs"),g=require("../utils/popper.cjs"),k=require("./context.cjs");let a=require("vue");var I=["aria-expanded","aria-controls","aria-activedescendant","name","form","disabled","readonly","aria-invalid","aria-readonly","aria-busy","data-invalid","data-readonly","data-loading","data-disabled","data-state","value"],b=(0,a.defineComponent)({__name:"AutocompleteInput",setup(A){const u=(0,a.inject)(k.AUTOCOMPLETE_CONTEXT);if(!u)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const e=u,o=(0,a.inject)(g.POPPER_CONTEXT);if(!o)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const r=(0,a.ref)(null);(0,a.onMounted)(()=>{e.inputRef.value=r.value,o.setAnchor(r.value)}),(0,a.onBeforeUnmount)(()=>{o.anchor.value===r.value&&o.setAnchor(null)});function l(t){e.setActiveId(t.id),t.scrollIntoView?.({block:"nearest"})}function i(t){const n=e.orderedOptions();if(n.length===0)return;const s=n.findIndex(h=>h.id===e.activeId.value),f=s===-1?t===1?-1:0:s;l(n[e.loop?(f+t+n.length)%n.length:Math.min(n.length-1,Math.max(0,f+t))])}function p(t){const n=e.orderedOptions();n.length!==0&&l(t==="last"?n[n.length-1]:n[0])}function d(){const t=e.activeId.value?e.getItem(e.activeId.value):void 0;return t?(e.commitItem(t.value,t.text||t.value,"keyboard"),!0):!1}function c(t){const n=t.target;e.onInputValueChange(n.value),e.open.value||e.setOpen(!0),_.reassertValue(n,()=>e.inputValue.value)}function v(){e.openOnFocus&&!e.readOnly&&!e.open.value&&e.setOpen(!0)}function m(){e.commitInputValue("pointer")}function y(t){if(t.altKey&&t.key==="ArrowDown")t.preventDefault(),e.open.value||e.setOpen(!0);else if(t.altKey&&t.key==="ArrowUp")t.preventDefault(),!d()&&e.open.value&&e.setOpen(!1);else if(t.key==="ArrowDown")t.preventDefault(),e.open.value?i(1):e.openWithHighlight("first");else if(t.key==="ArrowUp")t.preventDefault(),e.open.value?i(-1):e.openWithHighlight("last");else if(t.key==="Home"||t.key==="End"){if(!e.open.value)return;t.preventDefault(),p(t.key==="Home"?"first":"last")}else t.key==="Enter"?d()?t.preventDefault():e.allowCustomValue&&e.inputValue.value!==""?(t.preventDefault(),e.commitInputValue("keyboard")):e.open.value&&e.setOpen(!1):t.key==="Escape"?e.open.value&&!e.contentRef.value&&(t.preventDefault(),e.revert()):t.key==="Tab"&&e.commitInputValue("keyboard")}return(t,n)=>((0,a.openBlock)(),(0,a.createElementBlock)("input",{class:"skdx-autocomplete__input","data-part":"input",ref_key:"elRef",ref:r,type:"text",role:"combobox","aria-expanded":(0,a.unref)(e).open.value,"aria-controls":(0,a.unref)(e).listId,"aria-autocomplete":"list","aria-activedescendant":(0,a.unref)(e).activeId.value??void 0,autocomplete:"off",name:(0,a.unref)(e).name,form:(0,a.unref)(e).form,disabled:(0,a.unref)(e).disabled||void 0,readonly:(0,a.unref)(e).readOnly||void 0,"aria-invalid":(0,a.unref)(e).invalid?!0:void 0,"aria-readonly":(0,a.unref)(e).readOnly?!0:void 0,"aria-busy":(0,a.unref)(e).loading?!0:void 0,"data-invalid":(0,a.unref)(e).invalid?"":void 0,"data-readonly":(0,a.unref)(e).readOnly?"":void 0,"data-loading":(0,a.unref)(e).loading?"":void 0,"data-disabled":(0,a.unref)(e).disabled?"":void 0,"data-state":(0,a.unref)(e).open.value?"open":"closed",value:(0,a.unref)(e).inputValue.value,onInput:c,onFocus:v,onBlur:m,onKeydown:y},null,40,I))}});exports.default=b;

package/dist/autocomplete/AutocompleteInput.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{reassertValue as e}from"../utils/reassertValue.js";import{POPPER_CONTEXT as a}from"../utils/popper.js";import{AUTOCOMPLETE_CONTEXT as t,OPTION_SELECTOR as n}from"./context.js";import{createElementBlock as o,defineComponent as l,inject as u,onBeforeUnmount as i,onMounted as r,openBlock as d,ref as s,unref as p}from"vue";var v=["aria-expanded","aria-controls","aria-activedescendant","disabled","readonly","aria-invalid","aria-readonly","data-invalid","data-readonly","data-disabled","data-state","value"],c=/* @__PURE__ */l({__name:"AutocompleteInput",setup(l){const c=u(t);if(!c)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const f=c,m=u(a);if(!m)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const y=s(null);function I(e){const a=f.contentRef.value;if(!a)return;const t=Array.from(a.querySelectorAll(n));if(0===t.length)return;let o=t.findIndex(e=>e.id===f.activeId.value)+e;o<0&&(o=0),o>=t.length&&(o=t.length-1),f.setActiveId(t[o].id)}function h(a){const t=a.target;f.onInputValueChange(t.value),f.open.value||f.setOpen(!0),e(t,()=>f.inputValue.value)}function O(){f.openOnFocus&&!f.readOnly&&!f.open.value&&f.setOpen(!0)}function k(){f.commitInputValue()}function x(e){"ArrowDown"===e.key?(e.preventDefault(),f.open.value?I(1):f.openWithHighlight("first")):"ArrowUp"===e.key?(e.preventDefault(),f.open.value?I(-1):f.openWithHighlight("last")):"Enter"===e.key?function(){const e=f.activeId.value?f.getItem(f.activeId.value):void 0;return!!e&&(f.commitItem(e.value,e.text||e.value),!0)}()?e.preventDefault():f.allowCustomValue&&""!==f.inputValue.value&&(e.preventDefault(),f.commitInputValue()):"Escape"===e.key?f.open.value&&!f.contentRef.value&&(e.preventDefault(),f.revert()):"Tab"===e.key&&f.commitInputValue()}return r(()=>{f.inputRef.value=y.value,m.setAnchor(y.value)}),i(()=>{m.anchor.value===y.value&&m.setAnchor(null)}),(e,a)=>(d(),o("input",{class:"skdx-autocomplete__input","data-part":"input",ref_key:"elRef",ref:y,type:"text",role:"combobox","aria-expanded":p(f).open.value,"aria-controls":p(f).listId,"aria-autocomplete":"list","aria-activedescendant":p(f).activeId.value??void 0,autocomplete:"off",disabled:p(f).disabled||void 0,readonly:p(f).readOnly||void 0,"aria-invalid":!!p(f).invalid||void 0,"aria-readonly":!!p(f).readOnly||void 0,"data-invalid":p(f).invalid?"":void 0,"data-readonly":p(f).readOnly?"":void 0,"data-disabled":p(f).disabled?"":void 0,"data-state":p(f).open.value?"open":"closed",value:p(f).inputValue.value,onInput:h,onFocus:O,onBlur:k,onKeydown:x},null,40,v))}});export{c as default};
+import{reassertValue as e}from"../utils/reassertValue.js";import{POPPER_CONTEXT as a}from"../utils/popper.js";import{AUTOCOMPLETE_CONTEXT as t}from"./context.js";import{createElementBlock as n,defineComponent as o,inject as l,onBeforeUnmount as i,onMounted as r,openBlock as u,ref as d,unref as s}from"vue";var p=["aria-expanded","aria-controls","aria-activedescendant","name","form","disabled","readonly","aria-invalid","aria-readonly","aria-busy","data-invalid","data-readonly","data-loading","data-disabled","data-state","value"],v=/* @__PURE__ */o({__name:"AutocompleteInput",setup(o){const v=l(t);if(!v)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const c=v,f=l(a);if(!f)throw new Error("SkdxAutocompleteInput must be used within SkdxAutocomplete.");const m=d(null);function y(e){c.setActiveId(e.id),e.scrollIntoView?.({block:"nearest"})}function h(e){const a=c.orderedOptions();if(0===a.length)return;const t=a.findIndex(e=>e.id===c.activeId.value),n=-1===t?1===e?-1:0:t;y(a[c.loop?(n+e+a.length)%a.length:Math.min(a.length-1,Math.max(0,n+e))])}function k(){const e=c.activeId.value?c.getItem(c.activeId.value):void 0;return!!e&&(c.commitItem(e.value,e.text||e.value,"keyboard"),!0)}function I(a){const t=a.target;c.onInputValueChange(t.value),c.open.value||c.setOpen(!0),e(t,()=>c.inputValue.value)}function b(){c.openOnFocus&&!c.readOnly&&!c.open.value&&c.setOpen(!0)}function g(){c.commitInputValue("pointer")}function O(e){if(e.altKey&&"ArrowDown"===e.key)e.preventDefault(),c.open.value||c.setOpen(!0);else if(e.altKey&&"ArrowUp"===e.key)e.preventDefault(),!k()&&c.open.value&&c.setOpen(!1);else if("ArrowDown"===e.key)e.preventDefault(),c.open.value?h(1):c.openWithHighlight("first");else if("ArrowUp"===e.key)e.preventDefault(),c.open.value?h(-1):c.openWithHighlight("last");else if("Home"===e.key||"End"===e.key){if(!c.open.value)return;e.preventDefault(),function(e){const a=c.orderedOptions();0!==a.length&&y("last"===e?a[a.length-1]:a[0])}("Home"===e.key?"first":"last")}else"Enter"===e.key?k()?e.preventDefault():c.allowCustomValue&&""!==c.inputValue.value?(e.preventDefault(),c.commitInputValue("keyboard")):c.open.value&&c.setOpen(!1):"Escape"===e.key?c.open.value&&!c.contentRef.value&&(e.preventDefault(),c.revert()):"Tab"===e.key&&c.commitInputValue("keyboard")}return r(()=>{c.inputRef.value=m.value,f.setAnchor(m.value)}),i(()=>{f.anchor.value===m.value&&f.setAnchor(null)}),(e,a)=>(u(),n("input",{class:"skdx-autocomplete__input","data-part":"input",ref_key:"elRef",ref:m,type:"text",role:"combobox","aria-expanded":s(c).open.value,"aria-controls":s(c).listId,"aria-autocomplete":"list","aria-activedescendant":s(c).activeId.value??void 0,autocomplete:"off",name:s(c).name,form:s(c).form,disabled:s(c).disabled||void 0,readonly:s(c).readOnly||void 0,"aria-invalid":!!s(c).invalid||void 0,"aria-readonly":!!s(c).readOnly||void 0,"aria-busy":!!s(c).loading||void 0,"data-invalid":s(c).invalid?"":void 0,"data-readonly":s(c).readOnly?"":void 0,"data-loading":s(c).loading?"":void 0,"data-disabled":s(c).disabled?"":void 0,"data-state":s(c).open.value?"open":"closed",value:s(c).inputValue.value,onInput:I,onFocus:b,onBlur:g,onKeydown:O},null,40,p))}});export{v as default};

package/dist/autocomplete/AutocompleteItem.vue.d.cts

@@ -1,23 +1,10 @@
 /**
- * One suggestion inside `SkdxAutocompleteList`. Renders a `<div role="option">`
- * with `data-value`, `aria-selected` (true only for the suggestion matching the
- * *committed* value), `data-state` (`"checked" | "unchecked"`),
- * `data-highlighted` for virtual focus — the attribute the brand layer styles
- * the "keyboard cursor" from, since real DOM focus stays on the input — and
- * `data-disabled`.
- *
- * Registers itself, and its text, with the root: that is how
- * `SkdxAutocompleteEmpty` knows the list is empty, how the suggestion-count
- * announcement gets its number, and how Enter knows what the highlighted option
- * commits to. Click commits the suggestion, writes its text into the input,
- * closes the popup and returns focus to the input. Pointer hover moves the
- * highlight onto it.
- *
- * With a `filter` predicate on the root, a rejected item renders **nothing at
- * all** and unregisters itself — it is absent from the DOM rather than hidden,
- * because a hidden option is still reachable through `aria-activedescendant`
- * and would still be counted as a suggestion. Must be used inside
- * `SkdxAutocomplete`.
+ * One suggestion inside the List, rendering `<div role="option">` with data-value,
+ * aria-selected (true only for the committed suggestion), data-state (checked/unchecked),
+ * data-highlighted (for virtual focus), and data-disabled. Registers itself with the root
+ * (so Empty knows the list is empty, counts work, etc.). Click commits it and returns focus
+ * to the Input. Pointer hover highlights it. With a filter predicate, rejected items render
+ * nothing (absent from DOM, not hidden; hidden options are still reachable via aria-activedescendant).
  */
 type __VLS_Props = {
     /** Value committed to the autocomplete root when this suggestion is chosen. */
@@ -28,9 +15,8 @@ type __VLS_Props = {
      */
     disabled?: boolean;
     /**
-     * Text the root's `filter` predicate matches against, and the text a commit
-     * writes back into `SkdxAutocompleteInput`. Only needed when the item renders
-     * more than its label (an icon, a secondary line).
+     * Text matched by the `filter` predicate and written to the Input on commit;
+     * needed only when the item renders more than its label (icon, secondary line).
      * @default undefined — falls back to the item's rendered text content.
      */
     textValue?: string;

package/dist/autocomplete/AutocompleteItem.vue.d.ts

@@ -1,23 +1,10 @@
 /**
- * One suggestion inside `SkdxAutocompleteList`. Renders a `<div role="option">`
- * with `data-value`, `aria-selected` (true only for the suggestion matching the
- * *committed* value), `data-state` (`"checked" | "unchecked"`),
- * `data-highlighted` for virtual focus — the attribute the brand layer styles
- * the "keyboard cursor" from, since real DOM focus stays on the input — and
- * `data-disabled`.
- *
- * Registers itself, and its text, with the root: that is how
- * `SkdxAutocompleteEmpty` knows the list is empty, how the suggestion-count
- * announcement gets its number, and how Enter knows what the highlighted option
- * commits to. Click commits the suggestion, writes its text into the input,
- * closes the popup and returns focus to the input. Pointer hover moves the
- * highlight onto it.
- *
- * With a `filter` predicate on the root, a rejected item renders **nothing at
- * all** and unregisters itself — it is absent from the DOM rather than hidden,
- * because a hidden option is still reachable through `aria-activedescendant`
- * and would still be counted as a suggestion. Must be used inside
- * `SkdxAutocomplete`.
+ * One suggestion inside the List, rendering `<div role="option">` with data-value,
+ * aria-selected (true only for the committed suggestion), data-state (checked/unchecked),
+ * data-highlighted (for virtual focus), and data-disabled. Registers itself with the root
+ * (so Empty knows the list is empty, counts work, etc.). Click commits it and returns focus
+ * to the Input. Pointer hover highlights it. With a filter predicate, rejected items render
+ * nothing (absent from DOM, not hidden; hidden options are still reachable via aria-activedescendant).
  */
 type __VLS_Props = {
     /** Value committed to the autocomplete root when this suggestion is chosen. */
@@ -28,9 +15,8 @@ type __VLS_Props = {
      */
     disabled?: boolean;
     /**
-     * Text the root's `filter` predicate matches against, and the text a commit
-     * writes back into `SkdxAutocompleteInput`. Only needed when the item renders
-     * more than its label (an icon, a secondary line).
+     * Text matched by the `filter` predicate and written to the Input on commit;
+     * needed only when the item renders more than its label (icon, secondary line).
      * @default undefined — falls back to the item's rendered text content.
      */
     textValue?: string;

package/dist/autocomplete/AutocompleteItem.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("./context.cjs");let e=require("vue");var x=["id","data-value","aria-selected","aria-disabled","data-state","data-highlighted","data-disabled"],g=(0,e.defineComponent)({__name:"AutocompleteItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(i){const a=i,r=(0,e.inject)(f.AUTOCOMPLETE_CONTEXT);if(!r)throw new Error("SkdxAutocompleteItem must be used within SkdxAutocomplete.");const t=r,u=f.nextAutocompleteItemId(),c=(0,e.ref)(null),s=(0,e.computed)(()=>t.isSelected(a.value)),p=(0,e.computed)(()=>t.activeId.value===u),n=(0,e.computed)(()=>a.disabled||t.disabled||t.readOnly),l=(0,e.ref)(a.textValue??null);function v(){const o=a.textValue??c.value?.textContent;o!=null&&o!==l.value&&(l.value=o)}const d=(0,e.computed)(()=>l.value===null||t.matchesFilter(l.value));function m(){d.value?t.registerItem(u,{value:a.value,text:l.value??""}):t.unregisterItem(u)}(0,e.onMounted)(()=>{v(),m()}),(0,e.onUpdated)(v),(0,e.watch)([d,()=>a.value,l],m),(0,e.onBeforeUnmount)(()=>t.unregisterItem(u));function h(){n.value||(t.commitItem(a.value,l.value??a.value),t.inputRef.value?.focus())}function _(){n.value||t.setActiveId(u)}return(o,I)=>d.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-autocomplete__item","data-part":"item",ref_key:"itemRef",ref:c,role:"option",id:(0,e.unref)(u),"data-value":i.value,"aria-selected":s.value,"aria-disabled":n.value?!0:void 0,"data-state":s.value?"checked":"unchecked","data-highlighted":p.value?"":void 0,"data-disabled":n.value?"":void 0,onClick:h,onPointerenter:_},[(0,e.renderSlot)(o.$slots,"default")],40,x)):(0,e.createCommentVNode)("",!0)}});exports.default=g;
+const f=require("./context.cjs");let e=require("vue");var x=["id","data-value","aria-selected","aria-disabled","data-state","data-highlighted","data-disabled"],g=(0,e.defineComponent)({__name:"AutocompleteItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(d){const a=d,r=(0,e.inject)(f.AUTOCOMPLETE_CONTEXT);if(!r)throw new Error("SkdxAutocompleteItem must be used within SkdxAutocomplete.");const t=r,u=f.nextAutocompleteItemId(),c=(0,e.ref)(null),s=(0,e.computed)(()=>t.isSelected(a.value)),p=(0,e.computed)(()=>t.activeId.value===u),n=(0,e.computed)(()=>a.disabled||t.disabled||t.readOnly),l=(0,e.ref)(a.textValue??null);function v(){const o=a.textValue??c.value?.textContent;o!=null&&o!==l.value&&(l.value=o)}const i=(0,e.computed)(()=>l.value===null||t.matchesFilter(l.value));function m(){i.value?t.registerItem(u,{value:a.value,text:l.value??""}):t.unregisterItem(u)}(0,e.onMounted)(()=>{v(),m()}),(0,e.onUpdated)(v),(0,e.watch)([i,()=>a.value,l],m),(0,e.onBeforeUnmount)(()=>t.unregisterItem(u));function h(){n.value||(t.commitItem(a.value,l.value??a.value,"pointer"),t.inputRef.value?.focus())}function _(){n.value||t.setActiveId(u)}return(o,I)=>i.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-autocomplete__item","data-part":"item",ref_key:"itemRef",ref:c,role:"option",id:(0,e.unref)(u),"data-value":d.value,"aria-selected":s.value,"aria-disabled":n.value?!0:void 0,"data-state":s.value?"checked":"unchecked","data-highlighted":p.value?"":void 0,"data-disabled":n.value?"":void 0,onClick:h,onPointerenter:_},[(0,e.renderSlot)(o.$slots,"default")],40,x)):(0,e.createCommentVNode)("",!0)}});exports.default=g;

package/dist/autocomplete/AutocompleteItem.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{AUTOCOMPLETE_CONTEXT as e,nextAutocompleteItemId as t}from"./context.js";import{computed as a,createCommentVNode as l,createElementBlock as u,defineComponent as o,inject as d,onBeforeUnmount as n,onMounted as i,onUpdated as s,openBlock as r,ref as v,renderSlot as c,unref as m,watch as f}from"vue";var p=["id","data-value","aria-selected","aria-disabled","data-state","data-highlighted","data-disabled"],h=/* @__PURE__ */o({__name:"AutocompleteItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(o){const h=o,x=d(e);if(!x)throw new Error("SkdxAutocompleteItem must be used within SkdxAutocomplete.");const k=x,I=t(),b=v(null),g=a(()=>k.isSelected(h.value)),A=a(()=>k.activeId.value===I),C=a(()=>h.disabled||k.disabled||k.readOnly),_=v(h.textValue??null);function E(){const e=h.textValue??b.value?.textContent;null!=e&&e!==_.value&&(_.value=e)}const w=a(()=>null===_.value||k.matchesFilter(_.value));function y(){w.value?k.registerItem(I,{value:h.value,text:_.value??""}):k.unregisterItem(I)}function B(){C.value||(k.commitItem(h.value,_.value??h.value),k.inputRef.value?.focus())}function O(){C.value||k.setActiveId(I)}return i(()=>{E(),y()}),s(E),f([w,()=>h.value,_],y),n(()=>k.unregisterItem(I)),(e,t)=>w.value?(r(),u("div",{key:0,class:"skdx-autocomplete__item","data-part":"item",ref_key:"itemRef",ref:b,role:"option",id:m(I),"data-value":o.value,"aria-selected":g.value,"aria-disabled":!!C.value||void 0,"data-state":g.value?"checked":"unchecked","data-highlighted":A.value?"":void 0,"data-disabled":C.value?"":void 0,onClick:B,onPointerenter:O},[c(e.$slots,"default")],40,p)):l("",!0)}});export{h as default};
+import{AUTOCOMPLETE_CONTEXT as e,nextAutocompleteItemId as t}from"./context.js";import{computed as a,createCommentVNode as l,createElementBlock as u,defineComponent as o,inject as d,onBeforeUnmount as n,onMounted as i,onUpdated as s,openBlock as r,ref as v,renderSlot as c,unref as m,watch as f}from"vue";var p=["id","data-value","aria-selected","aria-disabled","data-state","data-highlighted","data-disabled"],h=/* @__PURE__ */o({__name:"AutocompleteItem",props:{value:{},disabled:{type:Boolean,default:!1},textValue:{default:void 0}},setup(o){const h=o,x=d(e);if(!x)throw new Error("SkdxAutocompleteItem must be used within SkdxAutocomplete.");const k=x,I=t(),b=v(null),g=a(()=>k.isSelected(h.value)),A=a(()=>k.activeId.value===I),C=a(()=>h.disabled||k.disabled||k.readOnly),_=v(h.textValue??null);function E(){const e=h.textValue??b.value?.textContent;null!=e&&e!==_.value&&(_.value=e)}const w=a(()=>null===_.value||k.matchesFilter(_.value));function y(){w.value?k.registerItem(I,{value:h.value,text:_.value??""}):k.unregisterItem(I)}function B(){C.value||(k.commitItem(h.value,_.value??h.value,"pointer"),k.inputRef.value?.focus())}function O(){C.value||k.setActiveId(I)}return i(()=>{E(),y()}),s(E),f([w,()=>h.value,_],y),n(()=>k.unregisterItem(I)),(e,t)=>w.value?(r(),u("div",{key:0,class:"skdx-autocomplete__item","data-part":"item",ref_key:"itemRef",ref:b,role:"option",id:m(I),"data-value":o.value,"aria-selected":g.value,"aria-disabled":!!C.value||void 0,"data-state":g.value?"checked":"unchecked","data-highlighted":A.value?"":void 0,"data-disabled":C.value?"":void 0,onClick:B,onPointerenter:O},[c(e.$slots,"default")],40,p)):l("",!0)}});export{h as default};

package/dist/autocomplete/AutocompleteList.vue.d.cts

@@ -1,16 +1,8 @@
 /**
- * The `role="listbox"` holding an `SkdxAutocomplete`'s suggestions. Carries the
- * id the input's `aria-controls` points at, so it must be rendered whenever the
- * popup is — a dangling `aria-controls` is an axe violation.
- *
- * Split out from `SkdxAutocompleteContent` rather than merged into it so the
- * popup can also hold things that are *not* options — a heading, a "showing 10
- * of 400" footer, an `SkdxAutocompleteEmpty` — without those becoming children
- * of a listbox, where a screen reader would report them as broken options.
- *
- * `role="listbox"` has no implicit accessible name: pass `aria-label` or
- * `aria-labelledby` saying what the list is *of*. Must be used inside
- * `SkdxAutocomplete`.
+ * The `role="listbox"` holding suggestions, with the id the input's aria-controls
+ * points at. Split from Content so the popup can hold non-options (headers, footers,
+ * Empty) without them becoming listbox children. role="listbox" has no implicit name;
+ * pass aria-label or aria-labelledby saying what the list is of. Must be inside SkdxAutocomplete.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/autocomplete/AutocompleteList.vue.d.ts

@@ -1,16 +1,8 @@
 /**
- * The `role="listbox"` holding an `SkdxAutocomplete`'s suggestions. Carries the
- * id the input's `aria-controls` points at, so it must be rendered whenever the
- * popup is — a dangling `aria-controls` is an axe violation.
- *
- * Split out from `SkdxAutocompleteContent` rather than merged into it so the
- * popup can also hold things that are *not* options — a heading, a "showing 10
- * of 400" footer, an `SkdxAutocompleteEmpty` — without those becoming children
- * of a listbox, where a screen reader would report them as broken options.
- *
- * `role="listbox"` has no implicit accessible name: pass `aria-label` or
- * `aria-labelledby` saying what the list is *of*. Must be used inside
- * `SkdxAutocomplete`.
+ * The `role="listbox"` holding suggestions, with the id the input's aria-controls
+ * points at. Split from Content so the popup can hold non-options (headers, footers,
+ * Empty) without them becoming listbox children. role="listbox" has no implicit name;
+ * pass aria-label or aria-labelledby saying what the list is of. Must be inside SkdxAutocomplete.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/autocomplete/AutocompletePortal.vue.d.cts

@@ -1,22 +1,17 @@
 import type { PortalContainer } from '../utils/portal.cjs';
 /**
- * Teleports its children (typically `SkdxAutocompleteContent`) to
- * `document.body` (or a custom `container`) while the `SkdxAutocomplete`'s popup
- * is open, so the
- * suggestions escape clipping and `overflow: hidden` from ancestors. Renders
- * nothing while closed unless `forceMount` is set. Must be used inside
- * `SkdxAutocomplete`.
+ * Teleports its children to document.body (or a custom container) while the
+ * popup is open, so suggestions escape clipping and overflow. Renders nothing
+ * while closed unless forceMount is set. Must be used inside SkdxAutocomplete.
  */
 type __VLS_Props = {
     /**
-     * DOM node (or CSS selector) the children are rendered into.
+     * DOM node or CSS selector the children are rendered into.
      * @default document.body
      */
     container?: PortalContainer;
     /**
-     * Render (and mount `SkdxAutocompleteContent`) even while closed, instead of
-     * unmounting. Useful for animation libraries that need the outgoing content
-     * present in the DOM during an exit transition.
+     * Mount Content even while closed for animation libraries (exit transition).
      * @default false — the popup leaves the DOM entirely while closed.
      */
     forceMount?: boolean;

package/dist/autocomplete/AutocompletePortal.vue.d.ts

@@ -1,22 +1,17 @@
 import type { PortalContainer } from '../utils/portal.js';
 /**
- * Teleports its children (typically `SkdxAutocompleteContent`) to
- * `document.body` (or a custom `container`) while the `SkdxAutocomplete`'s popup
- * is open, so the
- * suggestions escape clipping and `overflow: hidden` from ancestors. Renders
- * nothing while closed unless `forceMount` is set. Must be used inside
- * `SkdxAutocomplete`.
+ * Teleports its children to document.body (or a custom container) while the
+ * popup is open, so suggestions escape clipping and overflow. Renders nothing
+ * while closed unless forceMount is set. Must be used inside SkdxAutocomplete.
  */
 type __VLS_Props = {
     /**
-     * DOM node (or CSS selector) the children are rendered into.
+     * DOM node or CSS selector the children are rendered into.
      * @default document.body
      */
     container?: PortalContainer;
     /**
-     * Render (and mount `SkdxAutocompleteContent`) even while closed, instead of
-     * unmounting. Useful for animation libraries that need the outgoing content
-     * present in the DOM during an exit transition.
+     * Mount Content even while closed for animation libraries (exit transition).
      * @default false — the popup leaves the DOM entirely while closed.
      */
     forceMount?: boolean;

package/dist/autocomplete/AutocompleteTrigger.vue.d.cts

@@ -1,15 +1,8 @@
 /**
- * Optional button that toggles an `SkdxAutocomplete`'s suggestion popup — the
- * "▾" affordance that tells a pointer user there is a list at all, since a
- * plain text field looks like a plain text field.
- *
- * Renders a `<button type="button">` with `aria-expanded`, `aria-controls`
- * pointing at `SkdxAutocompleteList`, and `data-state="open" | "closed"`. It is
- * deliberately **not** a Tab stop: the input is the widget, and the keyboard
- * path to the list is Arrow Down on the input, so a second stop here would make
- * every autocomplete cost two Tab presses to skip. Give it an `aria-label` — a
- * chevron glyph is not an accessible name. Must be used inside
- * `SkdxAutocomplete`.
+ * Optional button that toggles the suggestion popup (the "▾" affordance).
+ * Renders `<button type="button">` with aria-expanded and aria-controls, tabindex="-1"
+ * (the input is the widget; Arrow Down is the keyboard path). Give it an aria-label;
+ * a glyph is not an accessible name. Must be used inside SkdxAutocomplete.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/autocomplete/AutocompleteTrigger.vue.d.ts

@@ -1,15 +1,8 @@
 /**
- * Optional button that toggles an `SkdxAutocomplete`'s suggestion popup — the
- * "▾" affordance that tells a pointer user there is a list at all, since a
- * plain text field looks like a plain text field.
- *
- * Renders a `<button type="button">` with `aria-expanded`, `aria-controls`
- * pointing at `SkdxAutocompleteList`, and `data-state="open" | "closed"`. It is
- * deliberately **not** a Tab stop: the input is the widget, and the keyboard
- * path to the list is Arrow Down on the input, so a second stop here would make
- * every autocomplete cost two Tab presses to skip. Give it an `aria-label` — a
- * chevron glyph is not an accessible name. Must be used inside
- * `SkdxAutocomplete`.
+ * Optional button that toggles the suggestion popup (the "▾" affordance).
+ * Renders `<button type="button">` with aria-expanded and aria-controls, tabindex="-1"
+ * (the input is the widget; Arrow Down is the keyboard path). Give it an aria-label;
+ * a glyph is not an accessible name. Must be used inside SkdxAutocomplete.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/autocomplete/context.cjs

@@ -1 +1 @@
-const e=require("../utils/id.cjs");var o='[role="option"]:not([data-disabled])',n=Symbol("skdx-autocomplete-context");function u(){return e.nextId("autocomplete-list")}function l(){return e.nextId("autocomplete-item")}function i(t){return`${t} suggestion${t===1?"":"s"} available`}exports.AUTOCOMPLETE_CONTEXT=n;exports.OPTION_SELECTOR=o;exports.defaultGetSuggestionCountLabel=i;exports.nextAutocompleteItemId=l;exports.nextAutocompleteListId=u;
+const n=require("../utils/id.cjs");var r='[role="option"]:not([data-disabled])';function c(t,o){const e=t.querySelector('[data-part="viewport"]')??t;if(e===o||!e.contains(o))return;const l=e.getBoundingClientRect(),u=o.getBoundingClientRect();e.scrollTop+=u.top-l.top-(l.height-u.height)/2}var i=Symbol("skdx-autocomplete-group-context");function a(){return n.nextId("autocomplete-group-label")}var p=Symbol("skdx-autocomplete-context");function s(){return n.nextId("autocomplete-list")}function T(){return n.nextId("autocomplete-item")}function d(t){return`${t} suggestion${t===1?"":"s"} available`}exports.AUTOCOMPLETE_CONTEXT=p;exports.AUTOCOMPLETE_GROUP_CONTEXT=i;exports.OPTION_SELECTOR=r;exports.defaultGetSuggestionCountLabel=d;exports.nextAutocompleteGroupLabelId=a;exports.nextAutocompleteItemId=T;exports.nextAutocompleteListId=s;exports.scrollIntoPopup=c;

package/dist/autocomplete/context.d.cts

@@ -1,76 +1,137 @@
 import type { InjectionKey, Ref } from 'vue';
-/** @internal CSS selector matching enabled (non-disabled) suggestion elements for keyboard navigation. */
+/** @internal Selector for enabled option elements in keyboard navigation. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /**
- * Decides which `SkdxAutocompleteItem`s survive the current draft text.
- * `undefined` filters nothing — the consumer renders only the suggestions that
- * match, which is what an async or server-side search needs.
+ * @internal Scroll option into view inside popup only, centered like native
+ * `<select>`. Not `scrollIntoView()` (which walks ancestors; on popup open
+ * floating-ui hasn't measured yet, sitting at y=0, so it takes the whole page).
+ * Positions via rects to avoid offset-parent dependency. Copied from SelectContent.
  */
-export type AutocompleteFilter = (itemText: string, inputValue: string) => boolean;
-/** @internal What one registered `SkdxAutocompleteItem` contributes to the root's collection. */
+export declare function scrollIntoPopup(content: HTMLElement, option: HTMLElement): void;
+/**
+ * Filter strategy for suggestions: `'manual'` (default, no filtering),
+ * predicate (returns boolean or number for ranking), or omitted (= `'manual'`).
+ */
+export type AutocompleteFilter = 'manual' | ((itemText: string, inputValue: string) => boolean | number);
+/**
+ * `value-change` event payload (Enter, suggestion click, Tab, and blur
+ * carry the same event shape).
+ */
+export interface AutocompleteValueChangeDetail {
+    /** New committed value. */
+    value: string;
+    /** Previous value or `null` if none. */
+    previousValue: string | null;
+    /** Change driver. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+    /** Whether committed value was draft text, not an existing suggestion. */
+    created: boolean;
+}
+/** One suggestion for `options` recipe. */
+export interface AutocompleteOption {
+    /** Value committed when chosen. */
+    value: string;
+    /** Label (matched against draft text). @default undefined → `value` */
+    label?: string;
+    /** Non-selectable suggestion. @default false */
+    disabled?: boolean;
+}
+/** Labelled suggestion group for `options` recipe. */
+export interface AutocompleteOptionGroup {
+    /** Group heading text. */
+    label: string;
+    /** Grouped suggestions. */
+    options: AutocompleteOption[];
+}
+/** @internal One registered item's contribution. */
 export interface AutocompleteItemEntry {
-    /** Identifier committed to the root's value when this suggestion is chosen. */
+    /** Value committed when chosen. */
     value: string;
-    /** The item's `textValue`, or its rendered text — matched by `filter` and written back into the input. */
+    /** Text used for filtering and written back to input. */
     text: string;
 }
-/** @internal Shared state distributed from `SkdxAutocomplete` to its parts via provide/inject. */
+/** @internal Shared state from Autocomplete to parts. */
 export interface AutocompleteContext {
     inputRef: Ref<HTMLElement | null>;
     /**
-     * The optional `SkdxAutocompleteTrigger`, when one is mounted. Content's
-     * dismissal layer needs it: the trigger toggles the popup on *click*, so a
-     * pointer-down on it that counted as "outside" would close the popup and let
-     * the click reopen it.
+     * Optional Trigger ref. Dismissal layer needs it to distinguish
+     * trigger clicks from outside pointer-down.
      */
     triggerRef: Ref<HTMLElement | null>;
     contentRef: Ref<HTMLElement | null>;
-    /** Id of `SkdxAutocompleteList`, referenced by the input's `aria-controls`. */
+    /** List id (`aria-controls` target). */
     listId: string;
-    /** The committed value — the answer the form takes, which need not be one of the suggestions. */
+    /** Committed value (need not be a suggestion). */
     value: Readonly<Ref<string>>;
-    /** Whether an option value is the committed one, for `aria-selected`. */
+    /** Whether value is committed (for `aria-selected`). */
     isSelected(value: string): boolean;
-    /** The draft text currently in the input. */
+    /** Draft text in input. */
     inputValue: Readonly<Ref<string>>;
     onInputValueChange(value: string): void;
     open: Readonly<Ref<boolean>>;
     setOpen(open: boolean): void;
     activeId: Readonly<Ref<string | null>>;
     setActiveId(id: string | null): void;
-    /** Opens the popup and, once its suggestions are mounted, highlights the first (or last) one. */
+    /** Open and highlight first (or last) suggestion once mounted. */
     openWithHighlight(edge: 'first' | 'last'): void;
     itemCount: Readonly<Ref<number>>;
     registerItem(id: string, entry: AutocompleteItemEntry): void;
     unregisterItem(id: string): void;
-    /** The registered entry behind a suggestion id, for committing the virtually-focused one. */
+    /** Entry for a suggestion id. */
     getItem(id: string): AutocompleteItemEntry | undefined;
-    /** Whether an item with this text survives the current `filter` and draft text. */
+    /** Whether item text survives current filter and draft. */
     matchesFilter(itemText: string): boolean;
-    /** Commits a suggestion: writes its text into the input, its value into `value`, and closes. */
-    commitItem(value: string, text: string): void;
-    /** Commits the raw draft text as the value (Tab, blur) — or restores the last committed text when `allowCustomValue` is off. */
-    commitInputValue(): void;
-    /** Closes and puts the last committed text back in the input (Escape). */
+    /** Visible suggestions in traversal order (score-sorted or DOM order). */
+    orderedOptions(): HTMLElement[];
+    /**
+     * Commit suggestion: write text to input, value to field, close.
+     * `reason` travels in emitted `value-change`.
+     */
+    commitItem(value: string, text: string, reason: AutocompleteValueChangeDetail['reason']): void;
+    /**
+     * Commit draft text as value (Tab, blur) or restore last committed
+     * (if `allowCustomValue` is off).
+     */
+    commitInputValue(reason: AutocompleteValueChangeDetail['reason']): void;
+    /** Close and restore last committed text to input (Escape). */
     revert(): void;
+    /**
+     * Empty draft and value together, clearing remembered value so blur
+     * cannot restore it (like Clear does).
+     */
+    clear(reason: AutocompleteValueChangeDetail['reason']): void;
     allowCustomValue: boolean;
     openOnFocus: boolean;
+    /** Whether arrow keys wrap around suggestion list ends. */
+    loop: boolean;
     disabled: boolean;
     readOnly: boolean;
     invalid: boolean;
+    /** Suggestions in flight (`aria-busy` / `data-loading`, no count). */
+    loading: boolean;
+    /** Input field name. */
+    name: string | undefined;
+    /** Form id the field submits into. */
+    form: string | undefined;
+}
+/** @internal Group context for its label. */
+export interface AutocompleteGroupContext {
+    /** Label id (`aria-labelledby` target). */
+    labelId: string;
 }
-/** @internal Injection key the Autocomplete root provides so its Input, Trigger, Content, List and Items share draft text, committed value, open and active-item state. */
+/** @internal Injection key for group's label id. */
+export declare const AUTOCOMPLETE_GROUP_CONTEXT: InjectionKey<AutocompleteGroupContext>;
+/** @internal Generates a unique id for an AutocompleteGroup's label. */
+export declare function nextAutocompleteGroupLabelId(): string;
+/** @internal Injection key for Autocomplete parts. */
 export declare const AUTOCOMPLETE_CONTEXT: InjectionKey<AutocompleteContext>;
 /** @internal Generates a unique id for an Autocomplete's list, for the input's `aria-controls`. */
 export declare function nextAutocompleteListId(): string;
 /** @internal Generates a unique, stable-per-instance id for an AutocompleteItem. */
 export declare function nextAutocompleteItemId(): string;
 /**
- * @internal Default `getSuggestionCountLabel`: `"1 suggestion available"` /
- * `"3 suggestions available"`.
- *
- * Lives here rather than in `Autocomplete.vue` because `withDefaults(defineProps())`
- * is hoisted out of `setup()`, so it cannot reference a binding declared
- * locally in the same `<script setup>` — only an imported one.
+ * @internal Default suggestion count label: `"1 suggestion available"` / `"3 suggestions available"`.
+ * Exported here because `withDefaults(defineProps())` is hoisted and cannot
+ * reference local bindings.
  */
 export declare function defaultGetSuggestionCountLabel(count: number): string;