@skdx/vue 0.27.0 → 0.29.0

package/dist/combobox/ComboboxAnatomy.vue.d.ts

@@ -0,0 +1,40 @@
+import { type ComboboxOption, type ComboboxOptionGroup } from './context.js';
+/**
+ * Anatomy of `SkdxCombobox`: input and the listbox built from `options`,
+ * filtered by case-insensitive substring match against `label`.
+ * @internal
+ */
+type __VLS_Props = {
+    options: ComboboxOption[] | ComboboxOptionGroup[];
+    /** Names input and content, neither of which derive a name from content. */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    /**
+     * Placeholder text forwarded to the Input.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+    /**
+     * Outline the skin gives the text input, applied to the derived Input part.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the text input at, applied to the derived Input part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+};
+type __VLS_Slots = {
+    option?(props: {
+        option: ComboboxOption;
+    }): unknown;
+};
+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/combobox/ComboboxAnatomy.vue.js

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

package/dist/combobox/ComboboxAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const c=require("./context.cjs"),m=require("./ComboboxContent.vue.cjs"),f=require("./ComboboxEmpty.vue.cjs"),p=require("./ComboboxGroup.vue.cjs"),x=require("./ComboboxGroupLabel.vue.cjs"),C=require("./ComboboxInput.vue.cjs"),d=require("./ComboboxItem.vue.cjs"),v=require("./ComboboxPortal.vue.cjs");let e=require("vue");var k=(0,e.defineComponent)({inheritAttrs:!1,__name:"ComboboxAnatomy",props:{options:{},ariaLabel:{},ariaLabelledby:{},placeholder:{},shape:{},size:{}},setup(o){const i=o,b=(0,e.inject)(c.COMBOBOX_CONTEXT);function u(a){return"options"in a}function n(a,t){return(a.label??a.value).toLowerCase().includes(t)}const s=(0,e.computed)(()=>{const a=b.inputValue.value.trim().toLowerCase();return a?i.options.flatMap(t=>{if(!u(t))return n(t,a)?[t]:[];const l=t.options.filter(r=>n(r,a));return l.length>0?[{label:t.label,options:l}]:[]}):i.options});return(a,t)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(C.default,(0,e.mergeProps)(a.$attrs,{shape:o.shape,size:o.size,"aria-label":o.ariaLabel,"aria-labelledby":o.ariaLabelledby,placeholder:o.placeholder}),null,16,["shape","size","aria-label","aria-labelledby","placeholder"]),(0,e.createVNode)(v.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(m.default,{"aria-label":o.ariaLabel,"aria-labelledby":o.ariaLabelledby},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(s.value,l=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:u(l)?l.label:l.value},[u(l)?((0,e.openBlock)(),(0,e.createBlock)(p.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(x.default,null,{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.label),1)]),_:2},1024),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.options,r=>((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:r.value,value:r.value,disabled:r.disabled,"text-value":r.label},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"option",{option:r},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.label??r.value),1)])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:1,value:l.value,disabled:l.disabled,"text-value":l.label},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"option",{option:l},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.label??l.value),1)])]),_:2},1032,["value","disabled","text-value"]))],64))),128)),(0,e.createVNode)(f.default,null,{default:(0,e.withCtx)(()=>[...t[0]||(t[0]=[(0,e.createTextVNode)("No results",-1)])]),_:1})]),_:3},8,["aria-label","aria-labelledby"])]),_:3})],64))}});exports.default=k;

package/dist/combobox/ComboboxAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{COMBOBOX_CONTEXT as e}from"./context.js";import a from"./ComboboxContent.vue.js";import l from"./ComboboxEmpty.vue.js";import o from"./ComboboxGroup.vue.js";import t from"./ComboboxGroupLabel.vue.js";import r from"./ComboboxInput.vue.js";import s from"./ComboboxItem.vue.js";import i from"./ComboboxPortal.vue.js";import{Fragment as u,computed as b,createBlock as n,createElementBlock as p,createTextVNode as d,createVNode as m,defineComponent as v,inject as f,mergeProps as c,openBlock as x,renderList as C,renderSlot as y,toDisplayString as h,withCtx as L}from"vue";var _=/* @__PURE__ */v({inheritAttrs:!1,__name:"ComboboxAnatomy",props:{options:{},ariaLabel:{},ariaLabelledby:{},placeholder:{},shape:{},size:{}},setup(v){const _=v,j=f(e);function k(e){return"options"in e}function B(e,a){return(e.label??e.value).toLowerCase().includes(a)}const g=b(()=>{const e=j.inputValue.value.trim().toLowerCase();return e?_.options.flatMap(a=>{if(!k(a))return B(a,e)?[a]:[];const l=a.options.filter(a=>B(a,e));return l.length>0?[{label:a.label,options:l}]:[]}):_.options});return(e,b)=>(x(),p(u,null,[m(r,c(e.$attrs,{shape:v.shape,size:v.size,"aria-label":v.ariaLabel,"aria-labelledby":v.ariaLabelledby,placeholder:v.placeholder}),null,16,["shape","size","aria-label","aria-labelledby","placeholder"]),m(i,null,{default:L(()=>[m(a,{"aria-label":v.ariaLabel,"aria-labelledby":v.ariaLabelledby},{default:L(()=>[(x(!0),p(u,null,C(g.value,a=>(x(),p(u,{key:k(a)?a.label:a.value},[k(a)?(x(),n(o,{key:0},{default:L(()=>[m(t,null,{default:L(()=>[d(h(a.label),1)]),_:2},1024),(x(!0),p(u,null,C(a.options,a=>(x(),n(s,{key:a.value,value:a.value,disabled:a.disabled,"text-value":a.label},{default:L(()=>[y(e.$slots,"option",{option:a},()=>[d(h(a.label??a.value),1)])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):(x(),n(s,{key:1,value:a.value,disabled:a.disabled,"text-value":a.label},{default:L(()=>[y(e.$slots,"option",{option:a},()=>[d(h(a.label??a.value),1)])]),_:2},1032,["value","disabled","text-value"]))],64))),128)),m(l,null,{default:L(()=>[...b[0]||(b[0]=[d("No results",-1)])]),_:1})]),_:3},8,["aria-label","aria-labelledby"])]),_:3})],64))}});export{_ as default};

package/dist/combobox/ComboboxClear.vue.cjs

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

package/dist/combobox/ComboboxClear.vue.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Clears selection and draft text and returns focus to input, disabled when
+ * there's nothing to clear or the root is disabled/readOnly; needs an
+ * `aria-label` since a glyph alone is not a name.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/combobox/ComboboxClear.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Clears selection and draft text and returns focus to input, disabled when
+ * there's nothing to clear or the root is disabled/readOnly; needs an
+ * `aria-label` since a glyph alone is not a name.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/combobox/ComboboxClear.vue.js

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

package/dist/combobox/ComboboxClear.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const d=require("../utils/injectRequired.cjs"),u=require("./context.cjs");let e=require("vue");var l=["disabled","data-disabled","data-readonly"],i=(0,e.defineComponent)({__name:"ComboboxClear",setup(s){const t=d.injectRequired(u.COMBOBOX_CONTEXT,"SkdxComboboxClear must be used within SkdxCombobox."),a=(0,e.computed)(()=>t.selectedValues.value.length===0&&t.inputValue.value==="");function n(o){o.preventDefault()}function r(){t.clear("pointer"),t.inputRef.value?.focus()}return(o,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-combobox__clear","data-part":"clear",type:"button",tabindex:-1,disabled:(0,e.unref)(t).disabled||(0,e.unref)(t).readOnly||a.value||void 0,"data-disabled":(0,e.unref)(t).disabled?"":void 0,"data-readonly":(0,e.unref)(t).readOnly?"":void 0,onMousedown:n,onClick:r},[(0,e.renderSlot)(o.$slots,"default")],40,l))}});exports.default=i;

package/dist/combobox/ComboboxClear.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{injectRequired as e}from"../utils/injectRequired.js";import{COMBOBOX_CONTEXT as a}from"./context.js";import{computed as o,createElementBlock as t,defineComponent as d,openBlock as l,renderSlot as n,unref as s}from"vue";var r=["disabled","data-disabled","data-readonly"],i=/* @__PURE__ */d({__name:"ComboboxClear",setup(d){const i=e(a,"SkdxComboboxClear must be used within SkdxCombobox."),u=o(()=>0===i.selectedValues.value.length&&""===i.inputValue.value);function b(e){e.preventDefault()}function c(){i.clear("pointer"),i.inputRef.value?.focus()}return(e,a)=>(l(),t("button",{class:"skdx-combobox__clear","data-part":"clear",type:"button",tabindex:-1,disabled:s(i).disabled||s(i).readOnly||u.value||void 0,"data-disabled":s(i).disabled?"":void 0,"data-readonly":s(i).readOnly?"":void 0,onMousedown:b,onClick:c},[n(e.$slots,"default")],40,r))}});export{i as default};

package/dist/combobox/ComboboxContent.vue.d.cts

@@ -1,52 +1,29 @@
 import { type Align, type PhysicalSide, type Side } from '../utils/popper.cjs';
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
 /**
- * The listbox popup for a `SkdxCombobox`, positioned relative to the input
- * via floating-ui using `side` (defaults to `'bottom'`) / `align` (defaults
- * to `'start'`) / `sideOffset` (defaults to `4`) / `alignOffset`,
- * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
- * `false` — against `collisionBoundary` when one is given, otherwise the
- * listbox's clipping ancestors. Renders a `<div role="listbox">` with
- * `data-state` and `data-side`/`data-align` from the popper, the measurement
- * custom properties `--skdx-combobox-available-width` / `-available-height` /
- * `-trigger-width` / `-transform-origin` (so the listbox can match the input's
- * width and the available height from CSS alone), plus
- * `aria-multiselectable="true"`
- * while the root is `multiple` and `aria-busy`/`data-loading` while it is
- * `loading`. Prevents `mousedown` from
- * stealing focus off the input (real DOM focus must never leave
- * `SkdxComboboxInput`).
- *
- * Closes on Escape or on an outside interaction (pointer-down or focus moving
- * out) unless `escape-key-down`/`pointer-down-outside`/`focus-outside`/
- * `interact-outside` call `event.preventDefault()`. `interact-outside` fires
- * for either kind of outside interaction, immediately before the specific
- * event and with the same event object, so one veto covers both. Escape is
- * owned here rather than in `SkdxComboboxInput` precisely so the veto lands
- * before anything has closed. Mounts only while open unless `forceMount` is
- * set. Must be used inside `SkdxCombobox`.
+ * Combobox listbox positioned via floating-ui, a `role="listbox"` with
+ * `aria-multiselectable`/`aria-busy`, closing on Escape or outside
+ * interaction unless prevented.
  */
 type __VLS_Props = {
-    /** Preferred side of the input to render on. */
+    /** Preferred edge of the input to place the listbox against. */
     side?: Side;
-    /** Alignment of the listbox along the chosen side, relative to the input. */
+    /** Preferred alignment along that edge relative to the input. */
     align?: Align;
-    /** Distance in pixels between the listbox and the input along `side`. */
+    /** Distance (px) between listbox and input. */
     sideOffset?: number;
-    /** Offset in pixels along `align`, shifting the listbox perpendicular to `side`. */
+    /** Pixel offset along the alignment axis. */
     alignOffset?: number;
-    /** Flips to the opposite side when there isn't room to render on the preferred side. */
+    /** Flip / shift to stay in viewport. */
     avoidCollisions?: boolean;
-    /** Minimum distance in pixels kept from the collision boundary. A number applies to every side; an object sets only the sides it names. */
+    /** Min distance (px) from collision boundary. */
     collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
     /**
-     * Element (or elements) collisions are measured against, instead of the
-     * listbox's clipping ancestors. Use it to keep the listbox inside a scroll
-     * container or one pane of a split layout rather than the whole viewport.
-     * @default undefined — the listbox's clipping ancestors.
+     * Collision boundary (instead of clipping ancestors).
+     * @default undefined — clipping ancestors.
      */
     collisionBoundary?: Element | Element[] | null;
-    /** Keep this listbox mounted even while closed, instead of unmounting it. */
+    /** Mounts the listbox DOM even when closed, enabling exit animations. */
     forceMount?: boolean;
 };
 declare var __VLS_1: {};
@@ -59,14 +36,14 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
-    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
-    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
-    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+    "onFocus-outside"?: (event: FocusOutsideEvent) => any;
+    "onEscape-key-down"?: (event: KeyboardEvent) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
 }>, {
+    align: Align;
     forceMount: boolean;
     side: Side;
-    align: Align;
     sideOffset: number;
     alignOffset: number;
     avoidCollisions: boolean;

package/dist/combobox/ComboboxContent.vue.d.ts

@@ -1,52 +1,29 @@
 import { type Align, type PhysicalSide, type Side } from '../utils/popper.js';
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.js';
 /**
- * The listbox popup for a `SkdxCombobox`, positioned relative to the input
- * via floating-ui using `side` (defaults to `'bottom'`) / `align` (defaults
- * to `'start'`) / `sideOffset` (defaults to `4`) / `alignOffset`,
- * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
- * `false` — against `collisionBoundary` when one is given, otherwise the
- * listbox's clipping ancestors. Renders a `<div role="listbox">` with
- * `data-state` and `data-side`/`data-align` from the popper, the measurement
- * custom properties `--skdx-combobox-available-width` / `-available-height` /
- * `-trigger-width` / `-transform-origin` (so the listbox can match the input's
- * width and the available height from CSS alone), plus
- * `aria-multiselectable="true"`
- * while the root is `multiple` and `aria-busy`/`data-loading` while it is
- * `loading`. Prevents `mousedown` from
- * stealing focus off the input (real DOM focus must never leave
- * `SkdxComboboxInput`).
- *
- * Closes on Escape or on an outside interaction (pointer-down or focus moving
- * out) unless `escape-key-down`/`pointer-down-outside`/`focus-outside`/
- * `interact-outside` call `event.preventDefault()`. `interact-outside` fires
- * for either kind of outside interaction, immediately before the specific
- * event and with the same event object, so one veto covers both. Escape is
- * owned here rather than in `SkdxComboboxInput` precisely so the veto lands
- * before anything has closed. Mounts only while open unless `forceMount` is
- * set. Must be used inside `SkdxCombobox`.
+ * Combobox listbox positioned via floating-ui, a `role="listbox"` with
+ * `aria-multiselectable`/`aria-busy`, closing on Escape or outside
+ * interaction unless prevented.
  */
 type __VLS_Props = {
-    /** Preferred side of the input to render on. */
+    /** Preferred edge of the input to place the listbox against. */
     side?: Side;
-    /** Alignment of the listbox along the chosen side, relative to the input. */
+    /** Preferred alignment along that edge relative to the input. */
     align?: Align;
-    /** Distance in pixels between the listbox and the input along `side`. */
+    /** Distance (px) between listbox and input. */
     sideOffset?: number;
-    /** Offset in pixels along `align`, shifting the listbox perpendicular to `side`. */
+    /** Pixel offset along the alignment axis. */
     alignOffset?: number;
-    /** Flips to the opposite side when there isn't room to render on the preferred side. */
+    /** Flip / shift to stay in viewport. */
     avoidCollisions?: boolean;
-    /** Minimum distance in pixels kept from the collision boundary. A number applies to every side; an object sets only the sides it names. */
+    /** Min distance (px) from collision boundary. */
     collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
     /**
-     * Element (or elements) collisions are measured against, instead of the
-     * listbox's clipping ancestors. Use it to keep the listbox inside a scroll
-     * container or one pane of a split layout rather than the whole viewport.
-     * @default undefined — the listbox's clipping ancestors.
+     * Collision boundary (instead of clipping ancestors).
+     * @default undefined — clipping ancestors.
      */
     collisionBoundary?: Element | Element[] | null;
-    /** Keep this listbox mounted even while closed, instead of unmounting it. */
+    /** Mounts the listbox DOM even when closed, enabling exit animations. */
     forceMount?: boolean;
 };
 declare var __VLS_1: {};
@@ -59,14 +36,14 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
-    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
-    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
-    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+    "onFocus-outside"?: (event: FocusOutsideEvent) => any;
+    "onEscape-key-down"?: (event: KeyboardEvent) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
 }>, {
+    align: Align;
     forceMount: boolean;
     side: Side;
-    align: Align;
     sideOffset: number;
     alignOffset: number;
     avoidCollisions: boolean;

package/dist/combobox/ComboboxContent.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const _=require("../utils/composeRefs.cjs"),C=require("../utils/useDismiss.cjs"),r=require("../utils/popper.cjs"),v=require("./context.cjs");let e=require("vue");var x=["id","aria-multiselectable","aria-busy","data-state","data-loading","data-multiple","data-side","data-align"],O=(0,e.defineComponent)({__name:"ComboboxContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(i,{emit:d}){const l=i,n=d,s=(0,e.inject)(v.COMBOBOX_CONTEXT);if(!s)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const t=s,u=(0,e.inject)(r.POPPER_CONTEXT);if(!u)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const a=(0,e.ref)(null),c=_.composeRefs(a,t.contentRef);C.useDismiss({enabled:t.open,onEscapeKeyDown:o=>{n("escape-key-down",o),o.defaultPrevented||t.setOpen(!1)},onPointerDownOutside:o=>{n("pointer-down-outside",o),o.defaultPrevented||t.setOpen(!1)},onFocusOutside:o=>{n("focus-outside",o),o.defaultPrevented||t.setOpen(!1)},onInteractOutside:o=>n("interact-outside",o)},[a,t.inputRef]);const{style:f,placedSide:p,placedAlign:m}=r.usePopperPosition(u.anchor,a,t.open,()=>({...l,component:"combobox"}));function b(o){o.preventDefault()}return(o,w)=>i.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-combobox__content","data-part":"content",id:(0,e.unref)(t).contentId,ref:(0,e.unref)(c),role:"listbox","aria-multiselectable":(0,e.unref)(t).multiple?!0:void 0,"aria-busy":(0,e.unref)(t).loading.value?!0:void 0,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-loading":(0,e.unref)(t).loading.value?"":void 0,"data-multiple":(0,e.unref)(t).multiple?"":void 0,"data-side":(0,e.unref)(p),"data-align":(0,e.unref)(m),style:(0,e.normalizeStyle)((0,e.unref)(f)),onMousedown:b},[(0,e.renderSlot)(o.$slots,"default")],44,x)):(0,e.createCommentVNode)("",!0)}});exports.default=O;
+const b=require("../utils/injectRequired.cjs"),_=require("../utils/composeRefs.cjs"),C=require("../utils/useDismiss.cjs"),s=require("../utils/popper.cjs"),v=require("./context.cjs");let e=require("vue");var x=["id","aria-multiselectable","aria-busy","data-state","data-loading","data-multiple","data-side","data-align"],O=(0,e.defineComponent)({__name:"ComboboxContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(a,{emit:r}){const d=a,n=r,t=b.injectRequired(v.COMBOBOX_CONTEXT,"SkdxComboboxContent must be used within SkdxCombobox."),u=(0,e.inject)(s.POPPER_CONTEXT);if(!u)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const i=(0,e.ref)(null),l=_.composeRefs(i,t.contentRef);C.useDismiss({enabled:t.open,onEscapeKeyDown:o=>{n("escape-key-down",o),o.defaultPrevented||t.setOpen(!1)},onPointerDownOutside:o=>{n("pointer-down-outside",o),o.defaultPrevented||t.setOpen(!1)},onFocusOutside:o=>{n("focus-outside",o),o.defaultPrevented||t.setOpen(!1)},onInteractOutside:o=>n("interact-outside",o)},[i,t.inputRef,t.triggerRef]);const{style:c,placedSide:f,placedAlign:p}=s.usePopperPosition(u.anchor,i,t.open,()=>({...d,component:"combobox"}));function m(o){o.preventDefault()}return(o,g)=>a.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,id:(0,e.unref)(t).contentId,ref:(0,e.unref)(l),class:"skdx-combobox__content","data-part":"content",role:"listbox","aria-multiselectable":(0,e.unref)(t).multiple?!0:void 0,"aria-busy":(0,e.unref)(t).loading.value?!0:void 0,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-loading":(0,e.unref)(t).loading.value?"":void 0,"data-multiple":(0,e.unref)(t).multiple?"":void 0,"data-side":(0,e.unref)(f),"data-align":(0,e.unref)(p),style:(0,e.normalizeStyle)((0,e.unref)(c)),onMousedown:m},[(0,e.renderSlot)(o.$slots,"default")],44,x)):(0,e.createCommentVNode)("",!0)}});exports.default=O;

package/dist/combobox/ComboboxContent.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as o}from"../utils/useDismiss.js";import{POPPER_CONTEXT as t,usePopperPosition as a}from"../utils/popper.js";import{COMBOBOX_CONTEXT as n}from"./context.js";import{createCommentVNode as s,createElementBlock as i,defineComponent as d,inject as l,normalizeStyle as u,openBlock as r,ref as p,renderSlot as c,unref as m}from"vue";var f=["id","aria-multiselectable","aria-busy","data-state","data-loading","data-multiple","data-side","data-align"],b=/* @__PURE__ */d({__name:"ComboboxContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(d,{emit:b}){const v=d,x=b,C=l(n);if(!C)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const O=C,w=l(t);if(!w)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const y=p(null),g=e(y,O.contentRef);o({enabled:O.open,onEscapeKeyDown:e=>{x("escape-key-down",e),e.defaultPrevented||O.setOpen(!1)},onPointerDownOutside:e=>{x("pointer-down-outside",e),e.defaultPrevented||O.setOpen(!1)},onFocusOutside:e=>{x("focus-outside",e),e.defaultPrevented||O.setOpen(!1)},onInteractOutside:e=>x("interact-outside",e)},[y,O.inputRef]);const{style:k,placedSide:P,placedAlign:B}=a(w.anchor,y,O.open,()=>({...v,component:"combobox"}));function E(e){e.preventDefault()}return(e,o)=>d.forceMount||m(O).open.value?(r(),i("div",{key:0,class:"skdx-combobox__content","data-part":"content",id:m(O).contentId,ref:m(g),role:"listbox","aria-multiselectable":!!m(O).multiple||void 0,"aria-busy":!!m(O).loading.value||void 0,"data-state":m(O).open.value?"open":"closed","data-loading":m(O).loading.value?"":void 0,"data-multiple":m(O).multiple?"":void 0,"data-side":m(P),"data-align":m(B),style:u(m(k)),onMousedown:E},[c(e.$slots,"default")],44,f)):s("",!0)}});export{b as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{composeRefs as t}from"../utils/composeRefs.js";import{useDismiss as o}from"../utils/useDismiss.js";import{POPPER_CONTEXT as a,usePopperPosition as s}from"../utils/popper.js";import{COMBOBOX_CONTEXT as n}from"./context.js";import{createCommentVNode as i,createElementBlock as d,defineComponent as l,inject as u,normalizeStyle as r,openBlock as p,ref as c,renderSlot as m,unref as f}from"vue";var b=["id","aria-multiselectable","aria-busy","data-state","data-loading","data-multiple","data-side","data-align"],v=/* @__PURE__ */l({__name:"ComboboxContent",props:{side:{default:"bottom"},align:{default:"start"},sideOffset:{default:4},alignOffset:{default:0},avoidCollisions:{type:Boolean,default:!0},collisionPadding:{default:8},collisionBoundary:{},forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(l,{emit:v}){const x=l,C=v,O=e(n,"SkdxComboboxContent must be used within SkdxCombobox."),g=u(a);if(!g)throw new Error("SkdxComboboxContent must be used within SkdxCombobox.");const y=c(null),w=t(y,O.contentRef);o({enabled:O.open,onEscapeKeyDown:e=>{C("escape-key-down",e),e.defaultPrevented||O.setOpen(!1)},onPointerDownOutside:e=>{C("pointer-down-outside",e),e.defaultPrevented||O.setOpen(!1)},onFocusOutside:e=>{C("focus-outside",e),e.defaultPrevented||O.setOpen(!1)},onInteractOutside:e=>C("interact-outside",e)},[y,O.inputRef,O.triggerRef]);const{style:k,placedSide:P,placedAlign:j}=s(g.anchor,y,O.open,()=>({...x,component:"combobox"}));function R(e){e.preventDefault()}return(e,t)=>l.forceMount||f(O).open.value?(p(),d("div",{key:0,id:f(O).contentId,ref:f(w),class:"skdx-combobox__content","data-part":"content",role:"listbox","aria-multiselectable":!!f(O).multiple||void 0,"aria-busy":!!f(O).loading.value||void 0,"data-state":f(O).open.value?"open":"closed","data-loading":f(O).loading.value?"":void 0,"data-multiple":f(O).multiple?"":void 0,"data-side":f(P),"data-align":f(j),style:r(f(k)),onMousedown:R},[m(e.$slots,"default")],44,b)):i("",!0)}});export{v as default};

package/dist/combobox/ComboboxEmpty.vue.d.cts

@@ -1,8 +1,7 @@
 /**
  * Fallback shown in place of the item list when no `SkdxComboboxItem`s are
- * currently registered (e.g. the consumer's filtered results are empty).
- * Renders a `<div role="presentation">`; renders nothing while at least one
- * item is registered. Must be used inside `SkdxCombobox`.
+ * registered (e.g. filtered results are empty), rendered as a
+ * `<div role="presentation">`; must be used inside `SkdxCombobox`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/combobox/ComboboxEmpty.vue.d.ts

@@ -1,8 +1,7 @@
 /**
  * Fallback shown in place of the item list when no `SkdxComboboxItem`s are
- * currently registered (e.g. the consumer's filtered results are empty).
- * Renders a `<div role="presentation">`; renders nothing while at least one
- * item is registered. Must be used inside `SkdxCombobox`.
+ * registered (e.g. filtered results are empty), rendered as a
+ * `<div role="presentation">`; must be used inside `SkdxCombobox`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

package/dist/combobox/ComboboxEmpty.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const r=require("./context.cjs");let e=require("vue");var n={key:0,class:"skdx-combobox__empty","data-part":"empty",role:"presentation"},u=(0,e.defineComponent)({__name:"ComboboxEmpty",setup(_){const t=(0,e.inject)(r.COMBOBOX_CONTEXT);if(!t)throw new Error("SkdxComboboxEmpty must be used within SkdxCombobox.");return(o,m)=>(0,e.unref)(t).itemCount.value===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",n,[(0,e.renderSlot)(o.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=u;
+const r=require("../utils/injectRequired.cjs"),u=require("./context.cjs");let e=require("vue");var n={key:0,class:"skdx-combobox__empty","data-part":"empty",role:"presentation"},_=(0,e.defineComponent)({__name:"ComboboxEmpty",setup(i){const t=r.injectRequired(u.COMBOBOX_CONTEXT,"SkdxComboboxEmpty must be used within SkdxCombobox.");return(o,m)=>(0,e.unref)(t).itemCount.value===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",n,[(0,e.renderSlot)(o.$slots,"default")])):(0,e.createCommentVNode)("",!0)}});exports.default=_;

package/dist/combobox/ComboboxEmpty.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{COMBOBOX_CONTEXT as e}from"./context.js";import{createCommentVNode as o,createElementBlock as t,defineComponent as a,inject as r,openBlock as s,renderSlot as m,unref as n}from"vue";var p={key:0,class:"skdx-combobox__empty","data-part":"empty",role:"presentation"},d=/* @__PURE__ */a({__name:"ComboboxEmpty",setup(a){const d=r(e);if(!d)throw new Error("SkdxComboboxEmpty must be used within SkdxCombobox.");return(e,a)=>0===n(d).itemCount.value?(s(),t("div",p,[m(e.$slots,"default")])):o("",!0)}});export{d as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{COMBOBOX_CONTEXT as o}from"./context.js";import{createCommentVNode as t,createElementBlock as s,defineComponent as a,openBlock as m,renderSlot as r,unref as n}from"vue";var i={key:0,class:"skdx-combobox__empty","data-part":"empty",role:"presentation"},d=/* @__PURE__ */a({__name:"ComboboxEmpty",setup(a){const d=e(o,"SkdxComboboxEmpty must be used within SkdxCombobox.");return(e,o)=>0===n(d).itemCount.value?(m(),s("div",i,[r(e.$slots,"default")])):t("",!0)}});export{d as default};

package/dist/combobox/ComboboxGroup.vue.cjs

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

package/dist/combobox/ComboboxGroup.vue.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Groups related `SkdxComboboxItem`s under an `SkdxComboboxGroupLabel`,
+ * rendering a `<div role="group">` with `aria-labelledby` auto-wired to the
+ * generated label id.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/combobox/ComboboxGroup.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Groups related `SkdxComboboxItem`s under an `SkdxComboboxGroupLabel`,
+ * rendering a `<div role="group">` with `aria-labelledby` auto-wired to the
+ * generated label id.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/combobox/ComboboxGroup.vue.js

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

package/dist/combobox/ComboboxGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let e=require("vue");var a=["aria-labelledby"],l=(0,e.defineComponent)({__name:"ComboboxGroup",setup(u){const o=r.nextComboboxGroupLabelId();return(0,e.provide)(r.COMBOBOX_GROUP_CONTEXT,{labelId:o}),(t,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-combobox__group","data-part":"group",role:"group","aria-labelledby":(0,e.unref)(o)},[(0,e.renderSlot)(t.$slots,"default")],8,a))}});exports.default=l;

package/dist/combobox/ComboboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{COMBOBOX_GROUP_CONTEXT as o,nextComboboxGroupLabelId as e}from"./context.js";import{createElementBlock as a,defineComponent as r,openBlock as l,provide as t,renderSlot as s,unref as p}from"vue";var b=["aria-labelledby"],d=/* @__PURE__ */r({__name:"ComboboxGroup",setup(r){const d=e();return t(o,{labelId:d}),(o,e)=>(l(),a("div",{class:"skdx-combobox__group","data-part":"group",role:"group","aria-labelledby":p(d)},[s(o.$slots,"default")],8,b))}});export{d as default};

package/dist/combobox/ComboboxGroupLabel.vue.cjs

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

package/dist/combobox/ComboboxGroupLabel.vue.d.cts

@@ -0,0 +1,18 @@
+/**
+ * The heading naming an `SkdxComboboxGroup`, rendered as a `<div>` (not an
+ * option arrow keys land on) carrying the id its group's `aria-labelledby`
+ * points at; must be inside `SkdxComboboxGroup`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/combobox/ComboboxGroupLabel.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The heading naming an `SkdxComboboxGroup`, rendered as a `<div>` (not an
+ * option arrow keys land on) carrying the id its group's `aria-labelledby`
+ * points at; must be inside `SkdxComboboxGroup`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/combobox/ComboboxGroupLabel.vue.js

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

package/dist/combobox/ComboboxGroupLabel.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const t=require("../utils/injectRequired.cjs"),u=require("./context.cjs");let e=require("vue");var _=["id"],l=(0,e.defineComponent)({__name:"ComboboxGroupLabel",setup(a){const o=t.injectRequired(u.COMBOBOX_GROUP_CONTEXT,"SkdxComboboxGroupLabel must be used within SkdxComboboxGroup.");return(r,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{id:(0,e.unref)(o).labelId,class:"skdx-combobox__label","data-part":"label"},[(0,e.renderSlot)(r.$slots,"default")],8,_))}});exports.default=l;

package/dist/combobox/ComboboxGroupLabel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{injectRequired as e}from"../utils/injectRequired.js";import{COMBOBOX_GROUP_CONTEXT as o}from"./context.js";import{createElementBlock as t,defineComponent as a,openBlock as r,renderSlot as s,unref as l}from"vue";var d=["id"],b=/* @__PURE__ */a({__name:"ComboboxGroupLabel",setup(a){const b=e(o,"SkdxComboboxGroupLabel must be used within SkdxComboboxGroup.");return(e,o)=>(r(),t("div",{id:l(b).labelId,class:"skdx-combobox__label","data-part":"label"},[s(e.$slots,"default")],8,d))}});export{b as default};

package/dist/combobox/ComboboxInput.vue.d.cts

@@ -1,21 +1,25 @@
 /**
- * Text field that drives a `SkdxCombobox`'s filtering and keeps real DOM
- * focus for the whole interaction, and doubles as the popper anchor the
- * listbox positions against. Renders an `<input type="text" role="combobox">`
- * with `aria-expanded`, `aria-controls` pointing at the content,
- * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
- * virtually-focused option, `autocomplete="off"`, and
- * `aria-invalid`/`data-invalid`, the native `readonly` attribute with
- * `aria-readonly`/`data-readonly`, and `aria-busy`/`data-loading` from the
- * root's `invalid`/`readOnly`/`loading` props.
- * Typing opens the listbox and updates the draft text; Arrow Down/Up open
- * the listbox (or move the highlight by one option when already open);
- * Enter commits the highlighted option — or, with `allowCustomValue` and
- * nothing highlighted, the draft text itself; Escape closes the listbox —
- * handled by `SkdxComboboxContent` whenever one is mounted, so the cancelable
- * `escape-key-down` it emits can still veto the close. Must be used inside
- * `SkdxCombobox`.
+ * Text field with real DOM focus and popper anchor, rendering
+ * `role="combobox"` with `aria-expanded`/`aria-controls`/`aria-activedescendant`,
+ * requiring an accessible name via `<label>`, `aria-label`, or
+ * `aria-labelledby` since it takes none from content.
  */
-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>;
+type __VLS_Props = {
+    /**
+     * Outline the skin gives the input, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the input at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus onto the underlying native text input. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The underlying native `<input>` element, for focus and measurement. */
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/combobox/ComboboxInput.vue.d.ts

@@ -1,21 +1,25 @@
 /**
- * Text field that drives a `SkdxCombobox`'s filtering and keeps real DOM
- * focus for the whole interaction, and doubles as the popper anchor the
- * listbox positions against. Renders an `<input type="text" role="combobox">`
- * with `aria-expanded`, `aria-controls` pointing at the content,
- * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
- * virtually-focused option, `autocomplete="off"`, and
- * `aria-invalid`/`data-invalid`, the native `readonly` attribute with
- * `aria-readonly`/`data-readonly`, and `aria-busy`/`data-loading` from the
- * root's `invalid`/`readOnly`/`loading` props.
- * Typing opens the listbox and updates the draft text; Arrow Down/Up open
- * the listbox (or move the highlight by one option when already open);
- * Enter commits the highlighted option — or, with `allowCustomValue` and
- * nothing highlighted, the draft text itself; Escape closes the listbox —
- * handled by `SkdxComboboxContent` whenever one is mounted, so the cancelable
- * `escape-key-down` it emits can still veto the close. Must be used inside
- * `SkdxCombobox`.
+ * Text field with real DOM focus and popper anchor, rendering
+ * `role="combobox"` with `aria-expanded`/`aria-controls`/`aria-activedescendant`,
+ * requiring an accessible name via `<label>`, `aria-label`, or
+ * `aria-labelledby` since it takes none from content.
  */
-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>;
+type __VLS_Props = {
+    /**
+     * Outline the skin gives the input, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the input at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    /** Moves keyboard focus onto the underlying native text input. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The underlying native `<input>` element, for focus and measurement. */
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/combobox/ComboboxInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const m=require("../utils/reassertValue.cjs"),_=require("../utils/popper.cjs"),c=require("./context.cjs");let t=require("vue");var x=["aria-expanded","aria-controls","aria-activedescendant","readonly","aria-invalid","aria-readonly","aria-busy","data-invalid","data-readonly","data-loading","data-multiple","value"],y=(0,t.defineComponent)({__name:"ComboboxInput",setup(b){const l=(0,t.inject)(c.COMBOBOX_CONTEXT);if(!l)throw new Error("SkdxComboboxInput must be used within SkdxCombobox.");const e=l,r=(0,t.inject)(_.POPPER_CONTEXT);if(!r)throw new Error("SkdxComboboxInput must be used within SkdxCombobox.");const i=(0,t.ref)(null);(0,t.onMounted)(()=>{e.inputRef.value=i.value,r.setAnchor(i.value)}),(0,t.onBeforeUnmount)(()=>{r.anchor.value===i.value&&r.setAnchor(null)});function d(a){const n=e.contentRef.value;if(!n)return;const u=Array.from(n.querySelectorAll(c.OPTION_SELECTOR));if(u.length===0)return;let o=u.findIndex(s=>s.id===e.activeId.value)+a;o<0&&(o=0),o>=u.length&&(o=u.length-1),e.setActiveId(u[o].id)}function f(){if(!e.activeId.value)return;const a=e.getItem(e.activeId.value);a&&e.selectItem(a.value,a.text||a.value)}function v(a){const n=a.target;e.onInputValueChange(n.value),e.open.value||e.setOpen(!0),m.reassertValue(n,()=>e.inputValue.value)}function p(a){a.key==="ArrowDown"?(a.preventDefault(),e.open.value?d(1):e.openWithHighlight("first")):a.key==="ArrowUp"?(a.preventDefault(),e.open.value?d(-1):e.openWithHighlight("last")):a.key==="Enter"?e.activeId.value?(a.preventDefault(),f()):e.allowCustomValue&&e.inputValue.value!==""&&(a.preventDefault(),e.selectItem(e.inputValue.value,e.inputValue.value)):a.key==="Escape"&&e.open.value&&!e.contentRef.value&&(a.preventDefault(),e.setOpen(!1))}return(a,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("input",{class:"skdx-combobox__input","data-part":"input",ref_key:"elRef",ref:i,type:"text",role:"combobox","aria-expanded":(0,t.unref)(e).open.value,"aria-controls":(0,t.unref)(e).contentId,"aria-autocomplete":"list","aria-activedescendant":(0,t.unref)(e).activeId.value??void 0,autocomplete:"off",readonly:(0,t.unref)(e).readOnly||void 0,"aria-invalid":(0,t.unref)(e).invalid?!0:void 0,"aria-readonly":(0,t.unref)(e).readOnly?!0:void 0,"aria-busy":(0,t.unref)(e).loading.value?!0:void 0,"data-invalid":(0,t.unref)(e).invalid?"":void 0,"data-readonly":(0,t.unref)(e).readOnly?"":void 0,"data-loading":(0,t.unref)(e).loading.value?"":void 0,"data-multiple":(0,t.unref)(e).multiple?"":void 0,value:(0,t.unref)(e).inputValue.value,onInput:v,onKeydown:p},null,40,x))}});exports.default=y;
+const w=require("../utils/appearance.cjs"),q=require("../utils/injectRequired.cjs"),A=require("../utils/reassertValue.cjs"),C=require("../utils/popper.cjs"),E=require("./context.cjs");let t=require("vue");var D=["aria-expanded","aria-controls","aria-activedescendant","readonly","disabled","data-disabled","aria-invalid","aria-required","aria-readonly","aria-busy","data-invalid","data-readonly","data-loading","data-multiple","value"],V=(0,t.defineComponent)({inheritAttrs:!1,__name:"ComboboxInput",props:{shape:{},size:{}},setup(i,{expose:p}){const e=q.injectRequired(E.COMBOBOX_CONTEXT,"SkdxComboboxInput must be used within SkdxCombobox."),u=(0,t.inject)(C.POPPER_CONTEXT);if(!u)throw new Error("SkdxComboboxInput must be used within SkdxCombobox.");const v=new Set(["Home","End","PageUp","PageDown"]),r=(0,t.ref)(null);(0,t.onMounted)(()=>{e.inputRef.value=r.value,u.setAnchor(r.value)}),(0,t.onBeforeUnmount)(()=>{u.anchor.value===r.value&&u.setAnchor(null)});function l(a){a&&(e.setActiveId(a.id,"keyboard"),a.scrollIntoView?.({block:"nearest"}))}function d(){return e.orderedOptions()}function m(a){const n=d();if(n.length===0)return;const c=n.findIndex(I=>I.id===e.activeId.value);let o=c;c===-1&&(o=a===1?-1:0),l(n[e.loop?(o+a+n.length)%n.length:Math.min(n.length-1,Math.max(0,o+a))])}function s(){if(!e.activeId.value)return;const a=e.getItem(e.activeId.value);a&&e.selectItem(a.value,a.text||a.value,"keyboard")}function y(a){const n=a.target;e.onInputValueChange(n.value),e.open.value||e.setOpen(!0),A.reassertValue(n,()=>e.inputValue.value)}function b(){e.openOn==="type"||e.readOnly||e.open.value||e.setOpen(!0)}function h(){e.openOn!=="focus"||e.readOnly||e.open.value||e.setOpen(!0)}function x(a){return a.key==="ArrowDown"?(a.preventDefault(),e.open.value||e.setOpen(!0),!0):a.key==="ArrowUp"?(a.preventDefault(),e.activeId.value&&s(),e.open.value&&e.setOpen(!1),!0):!1}function f(a,n){a.preventDefault(),e.open.value?m(n):e.openWithHighlight(n===1?"first":"last")}function g(a){a.preventDefault();const n=d();l(a.key==="Home"||a.key==="PageUp"?n[0]:n[n.length-1])}function k(a){e.activeId.value?(a.preventDefault(),s()):e.allowCustomValue&&e.inputValue.value!==""?(a.preventDefault(),e.selectItem(e.inputValue.value,e.inputValue.value,"keyboard")):e.open.value&&e.setOpen(!1)}function O(a){a.altKey&&x(a)||(a.key==="ArrowDown"?f(a,1):a.key==="ArrowUp"?f(a,-1):v.has(a.key)&&e.open.value?g(a):a.key==="Enter"?k(a):a.key==="Escape"&&e.open.value&&!e.contentRef.value&&(a.preventDefault(),e.setOpen(!1)))}function _(a){const n=a.relatedTarget;n&&(n===r.value||e.contentRef.value?.contains(n))||e.reconcileDraftText()}return p({focus:a=>r.value?.focus(a),el:r}),(a,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("input",(0,t.mergeProps)({ref_key:"elRef",ref:r,class:"skdx-combobox__input","data-part":"input",type:"text",role:"combobox","aria-expanded":(0,t.unref)(e).open.value,"aria-controls":(0,t.unref)(e).contentId,"aria-autocomplete":"list","aria-activedescendant":(0,t.unref)(e).activeId.value??void 0,autocomplete:"off",readonly:(0,t.unref)(e).readOnly||void 0,disabled:(0,t.unref)(e).disabled||void 0,"data-disabled":(0,t.unref)(e).disabled?"":void 0,"aria-invalid":(0,t.unref)(e).invalid?!0:void 0,"aria-required":(0,t.unref)(e).required?!0:void 0,"aria-readonly":(0,t.unref)(e).readOnly?!0:void 0,"aria-busy":(0,t.unref)(e).loading.value?!0:void 0,"data-invalid":(0,t.unref)(e).invalid?"":void 0,"data-readonly":(0,t.unref)(e).readOnly?"":void 0,"data-loading":(0,t.unref)(e).loading.value?"":void 0,"data-multiple":(0,t.unref)(e).multiple?"":void 0,value:(0,t.unref)(e).inputValue.value},{...a.$attrs,...(0,t.unref)(w.appearanceAttrs)({shape:i.shape,size:i.size},a.$attrs)},{onInput:y,onClick:b,onFocus:h,onKeydown:O,onFocusout:_}),null,16,D))}});exports.default=V;