@skdx/vue 0.27.0 → 0.28.0

package/dist/multi-select/MultiSelect.vue.d.ts

@@ -1,126 +1,163 @@
-import { type MultiSelectFilter } from './context.js';
+import { type MultiSelectFilter, type MultiSelectOption, type MultiSelectOptionGroup, type MultiSelectValueChangeDetail } from './context.js';
 /**
- * The Vue implementation of the shared MultiSelect contract (see
- * `@skdx/shared`'s `multiSelectContract`). A text field with a listbox of
- * options where every chosen value shows up as a removable tag. Owns the
- * `string[]` selection, the draft text and the popup's open state, and hands
- * them to every other `SkdxMultiSelect*` part via provide/inject. Renders no DOM
- * of its own — the "field" box that visually contains the tags and the input is
- * yours to lay out.
+ * Vue implementation of the shared MultiSelect contract (`@skdx/shared`'s
+ * `multiSelectContract`): a text field with a listbox of options, each
+ * selection rendered as a removable tag. Owns the selection, draft text, and
+ * popup state; renders no DOM of its own.
  *
- * The popup **stays open across selections** (`closeOnSelect` defaults to
- * `false`): picking five things should cost five clicks, not five clicks and
- * five reopenings. Backspace on an empty input removes the last tag, which is
- * the gesture every tag field has trained users to expect.
+ * The popup stays open across selections (`closeOnSelect` defaults to
+ * `false`), and Backspace on an empty input removes the last tag.
  *
- * The tag half is not reimplemented here: `SkdxMultiSelectTagList`/
- * `SkdxMultiSelectTag`/`SkdxMultiSelectTagRemove` are thin bindings over the
- * existing `SkdxTagGroup`/`SkdxTag`/`SkdxTagDelete`, which already own the
- * single-tab-stop roving focus and the "move focus to the neighbour *before*
- * the removal lands" rule that makes clearing several tags in a row possible
- * from the keyboard.
+ * While open, Shift+Arrow Up/Down moves and toggles the highlight,
+ * Shift+Space range-selects from the last option toggled alone,
+ * Control+Shift+Home/End sweeps to an end without moving the highlight, and
+ * Home/End jump it. Closed, these keys keep their native input meaning.
  *
- * Emits `open-change` the instant the state flips and `open-change-complete`
- * once the change has finished on screen — after `SkdxMultiSelectContent`'s
- * enter or exit animation ends, or in the same task when it declares none.
+ * With `name`, one hidden control is mirrored per selected value so the
+ * selection submits as repeated `name=value` entries; `required` reports
+ * `valueMissing` on an empty selection.
  *
- * Works controlled (`v-model:value`, `v-model:input-value`, `v-model:open`) or
- * uncontrolled (`default-value`, `default-input-value`, `default-open`).
+ * `SkdxMultiSelectTagList`/`SkdxMultiSelectTag`/`SkdxMultiSelectTagRemove` are thin bindings over
+ * `SkdxTagGroup`/`Tag`/`TagDelete`, reusing their roving-focus tag removal.
+ *
+ * Works controlled (`v-model:value`/`v-model:input-value`/`v-model:open`) or
+ * uncontrolled. With an empty default slot, options render as a derived tag
+ * field and popup listbox; any slot content opts into manual composition.
+ *
+ * @example
+ * ```vue
+ * <SkdxMultiSelect :options="[{ value: 'react', label: 'React' }]" />
+ * ```
  */
 type __VLS_Props = {
     /**
-     * Selected values in selection order, for controlled usage. Pair with
-     * `v-model:value` or `@value-change`.
-     * @default undefined — uncontrolled, tracks its own selection internally.
+     * Selected values, in selection order; for controlled usage.
+     * @default undefined
      */
     value?: string[];
     /**
-     * Initially selected values, for uncontrolled usage.
-     * @default [] — nothing selected, so no tags are rendered.
+     * Initially selected values for uncontrolled usage.
+     * @default []
      */
     defaultValue?: string[];
     /**
-     * The draft text in the input, for controlled usage. Pair with
-     * `v-model:input-value` or `@input-value-change` — typically used to filter
-     * the option list, since filtering is the consumer's job unless `filter` is
-     * supplied.
-     * @default undefined — uncontrolled, tracks its own draft text internally.
+     * Draft text in the input, for controlled usage; narrows the rendered options unless `filter` is supplied.
+     * @default undefined
      */
     inputValue?: string;
     /**
-     * Initial draft text, for uncontrolled usage.
-     * @default '' — the field starts empty, so the option list starts unfiltered.
+     * Flat or grouped option data to render tag list, input, Clear button, and listbox automatically, instead of hand composing parts. Ignored under full manual composition.
+     * @default undefined
+     */
+    options?: MultiSelectOption[] | MultiSelectOptionGroup[];
+    /**
+     * Initial draft text for uncontrolled usage.
+     * @default ''
      */
     defaultInputValue?: string;
     /**
-     * Whether the option popup is open, for controlled usage. Pair with
-     * `v-model:open` or `@open-change`.
-     * @default undefined — uncontrolled, tracks its own open state internally.
+     * Whether the option popup is open for controlled usage.
+     * @default undefined
      */
     open?: boolean;
     /**
-     * Initial open state, for uncontrolled usage.
-     * @default false — the popup waits for a keystroke or an arrow key.
+     * Initial open state for uncontrolled usage.
+     * @default false
      */
     defaultOpen?: boolean;
     /**
-     * Largest number of values that can be selected. Once reached, unselected
-     * options become `aria-disabled` and stop responding rather than silently
-     * swallowing clicks; already-selected ones stay removable, so the way out of
-     * a full selection is always visible.
-     * @default undefined — no cap.
+     * Largest number of values selectable. Once reached, unselected options go aria-disabled; selected ones stay removable.
+     * @default undefined
      */
     max?: number;
     /**
-     * Close the popup after each selection.
-     * @default false — the whole ergonomic point of a multi-select: picking five things should cost five clicks, not five clicks and five reopenings.
+     * Close the popup after each selection instead of staying open.
+     * @default false
      */
     closeOnSelect?: boolean;
     /**
-     * Predicate deciding which `SkdxMultiSelectItem`s survive the current draft
-     * text. Rejected items render nothing at all, so they leave the option count
-     * and the highlight order exactly as if the consumer had removed them.
-     * @default undefined — nothing is filtered; the consumer renders only the matching items.
+     * Predicate deciding which items survive the current draft text. Returns a boolean to filter, or a number to filter and rank (0 excludes, positive keeps).
+     * @default undefined
      */
     filter?: MultiSelectFilter;
     /**
-     * Blocks all interaction: the input is natively `disabled`, tags cannot be
-     * removed, and the popup can never open.
+     * Blocks all interaction: input is disabled, tags cannot be removed, popup never opens.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Shows the selection but blocks any change to it — the input is natively
-     * `readonly` and still focusable (unlike `disabled`), tags are not
-     * removable, and no option can be toggled.
+     * Shows selection but blocks changes — input stays focusable, tags not removable, no option can toggle.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
-     * `SkdxMultiSelectInput`.
+     * Marks the field invalid, exposed as aria-invalid on the Input.
      * @default false
      */
     invalid?: boolean;
     /**
-     * Formats the message announced (through the shared live announcer) after
-     * every selection change. Toggling an option changes `aria-selected` on a
-     * node the user is not focused on, so without this a screen-reader user gets
-     * no confirmation that anything happened. Return an empty string to announce
-     * nothing.
-     * @default defaultGetSelectionLabel — e.g. `"2 selected"`.
+     * Form field name. One hidden control per selected value produces repeated name=value entries like a native <select multiple>; draft text never submits.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Marks the multi-select required: empty selection reports valueMissing. Meaningful only with name.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Id of the <form> the multi-select submits into, so it can live outside its owning form.
+     * @default undefined
+     */
+    form?: string;
+    /**
+     * Formats the message announced after each selection change. Without this, screen-reader users get no confirmation that anything happened. Return empty string to announce nothing. Counts *selected* options, not rendered options.
+     * @default defaultGetSelectionLabel
      */
     getSelectionLabel?: (count: number) => string;
+    /**
+     * Whether Control+A selects every enabled option while the popup is open.
+     * @default true
+     */
+    allowSelectAll?: boolean;
+    /**
+     * Whether the option list is in flight; suppresses the selection-count announcement until options arrive.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the derived anatomy renders a Clear button that empties the selection and draft text in one action.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Accessible name for the derived MultiSelectInput and tag list. Only read while options is deriving the anatomy.
+     * @default undefined
+     */
+    ariaLabel?: string;
+};
+declare var __VLS_4: {}, __VLS_9: {
+    option: MultiSelectOption;
+}, __VLS_11: {
+    value: string;
 };
-declare var __VLS_5: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
+    default?: (props: typeof __VLS_4) => any;
+} & {
+    option?: (props: typeof __VLS_9) => any;
+} & {
+    tag?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the mirrored form controls satisfy their constraints, `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
     "update:value": (value: string[]) => any;
-    "value-change": (value: string[]) => any;
+    "value-change": (detail: MultiSelectValueChangeDetail) => any;
     "open-change-complete": (open: boolean) => any;
     "update:inputValue": (value: string) => any;
     "input-value-change": (value: string) => any;
@@ -128,23 +165,31 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     "onOpen-change"?: ((open: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((detail: MultiSelectValueChangeDetail) => any) | undefined;
     "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onInput-value-change"?: ((value: string) => any) | undefined;
 }>, {
-    disabled: boolean;
+    form: string;
     filter: MultiSelectFilter;
+    loading: boolean;
+    disabled: boolean;
     open: boolean;
     defaultOpen: boolean;
     value: string[];
+    readOnly: boolean;
+    required: boolean;
+    name: string;
     invalid: boolean;
     defaultValue: string[];
     max: number;
-    readOnly: boolean;
+    ariaLabel: string;
+    options: MultiSelectOption[] | MultiSelectOptionGroup[];
+    clearable: boolean;
+    allowSelectAll: boolean;
+    closeOnSelect: boolean;
     inputValue: string;
     defaultInputValue: string;
-    closeOnSelect: boolean;
     getSelectionLabel: (count: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/multi-select/MultiSelect.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const T=require("../utils/useOpenChangeComplete.cjs"),E=require("../utils/liveAnnouncer.cjs"),R=require("../utils/PopperRoot.vue.cjs"),v=require("./context.cjs");let l=require("vue");var k=(0,l.defineComponent)({inheritAttrs:!1,__name:"MultiSelect",props:{value:{default:void 0},defaultValue:{default:()=>[]},inputValue:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},max:{default:void 0},closeOnSelect:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},getSelectionLabel:{type:Function,default:v.defaultGetSelectionLabel}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(q,{emit:C}){const t=q,i=C,V=(0,l.ref)(null),f=(0,l.ref)(null),r=(0,l.ref)(null),a=(0,l.ref)(new Map),p=(0,l.ref)(null),O=(0,l.ref)(t.defaultValue),o=(0,l.computed)(()=>t.value===void 0?O.value:t.value),y=(0,l.ref)(t.defaultInputValue),g=(0,l.computed)(()=>t.inputValue===void 0?y.value:t.inputValue),S=(0,l.ref)(t.defaultOpen),s=(0,l.computed)(()=>t.open??S.value);T.useOpenChangeComplete(s,f,e=>i("open-change-complete",e));const m=(0,l.computed)(()=>t.disabled||t.readOnly),A=(0,l.computed)(()=>t.max!==void 0&&o.value.length>=t.max);function h(e){e!==o.value&&(t.value===void 0&&(O.value=e),i("update:value",e),i("value-change",e))}function I(e){e!==g.value&&(t.inputValue===void 0&&(y.value=e),i("update:inputValue",e),i("input-value-change",e))}function _(e){e!==s.value&&(t.open===void 0&&(S.value=e),i("update:open",e),i("open-change",e))}function B(e){if(m.value)return;const n=o.value;let u=n;n.includes(e)?u=n.filter(c=>c!==e):(t.max===void 0||n.length<t.max)&&(u=[...n,e]),h(u),I(""),t.closeOnSelect&&_(!1)}function b(e){if(m.value)return;const n=o.value;h(n.includes(e)?n.filter(u=>u!==e):n)}function L(){if(m.value)return;const e=o.value;h(e.length===0?e:e.slice(0,-1))}function M(e){p.value=e,_(!0)}function w(e,n){const u=a.value.get(e);if(u?.value===n.value&&u.text===n.text)return;const c=new Map(a.value);c.set(e,n),a.value=c}function x(e){if(!a.value.has(e))return;const n=new Map(a.value);n.delete(e),a.value=n}let d;(0,l.watch)(s,e=>{if(d!==void 0&&cancelAnimationFrame(d),!e){r.value=null;return}d=requestAnimationFrame(()=>{const n=p.value;if(p.value=null,!n)return;const u=f.value?.querySelectorAll(v.OPTION_SELECTOR);if(!u||u.length===0)return;const c=n==="last"?u[u.length-1]:u[0];r.value===null&&(r.value=c.id)})}),(0,l.onBeforeUnmount)(()=>{d!==void 0&&cancelAnimationFrame(d)});const F=(0,l.computed)(()=>a.value.size);return(0,l.watch)([a,r],([,e])=>{if(e===null)return;const n=Array.from(f.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);n.some(u=>u.id===e)||(r.value=n[0]?.id??null)},{flush:"post"}),(0,l.watch)(()=>o.value.length,e=>E.announce(t.getSelectionLabel(e))),(0,l.provide)(v.MULTI_SELECT_CONTEXT,{inputRef:V,contentRef:f,listId:v.nextMultiSelectListId(),value:o,isSelected:e=>o.value.includes(e),toggle:B,deselect:b,removeLast:L,atMax:A,inputValue:g,onInputValueChange:I,open:s,setOpen:_,activeId:r,setActiveId:e=>{r.value=e},openWithHighlight:M,itemCount:F,registerItem:w,unregisterItem:x,getItem:e=>a.value.get(e),matchesFilter:e=>t.filter===void 0||t.filter(e,g.value),get disabled(){return t.disabled},get readOnly(){return t.readOnly},get invalid(){return t.invalid}}),(e,n)=>((0,l.openBlock)(),(0,l.createBlock)(R.default,null,{default:(0,l.withCtx)(()=>[(0,l.renderSlot)(e.$slots,"default")]),_:3}))}});exports.default=k;
+const Y=require("../utils/useFormReset.cjs"),Z=require("../utils/useOpenChangeComplete.cjs"),ee=require("../utils/mirroredValues.cjs"),te=require("../utils/PopperRoot.vue.cjs"),le=require("../utils/liveAnnouncer.cjs"),L=require("../utils/scoredFilter.cjs"),k=require("./context.cjs"),ne=require("./MultiSelectAnatomy.vue.cjs");let t=require("vue");var ae=["name","^value","required","disabled","form"],ue=(0,t.defineComponent)({inheritAttrs:!1,__name:"MultiSelect",props:{value:{default:void 0},defaultValue:{default:()=>[]},inputValue:{default:void 0},options:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},max:{default:void 0},closeOnSelect:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},getSelectionLabel:{type:Function,default:k.defaultGetSelectionLabel},allowSelectAll:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},ariaLabel:{default:void 0}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(r,{expose:M,emit:R}){const a=r,p=R,P=(0,t.ref)(null),V=(0,t.ref)(null),s=(0,t.ref)(null),i=(0,t.ref)(new Map),B=(0,t.ref)(null),C=(0,t.ref)(a.defaultValue),o=(0,t.computed)(()=>a.value===void 0?C.value:a.value),w=(0,t.ref)(a.defaultInputValue),q=(0,t.computed)(()=>a.inputValue===void 0?w.value:a.inputValue),A=(0,t.ref)(a.defaultOpen),x=(0,t.computed)(()=>a.open??A.value);Z.useOpenChangeComplete(x,V,e=>p("open-change-complete",e));const m=(0,t.computed)(()=>a.disabled||a.readOnly),T=(0,t.computed)(()=>a.max!==void 0&&o.value.length>=a.max);function $(e){if(a.filter===void 0)return null;const l=i.value.get(e);if(!l)return null;const n=a.filter(l.text,q.value);return typeof n=="number"?n:null}function g(){const e=V.value;return e?L.orderByScore(e,k.OPTION_SELECTOR,$):[]}function d(e,l){const n=o.value;e!==n&&(a.value===void 0&&(C.value=e),p("update:value",e),p("value-change",{value:e,previousValue:n.length===0?null:n,reason:l,added:e.filter(u=>!n.includes(u)),removed:n.filter(u=>!e.includes(u))}))}function f(e){e!==q.value&&(a.inputValue===void 0&&(w.value=e),p("update:inputValue",e),p("input-value-change",e))}function h(e){e!==x.value&&(a.open===void 0&&(A.value=e),p("update:open",e),p("open-change",e))}let F=null;function N(e,l){if(m.value)return;F=e;const n=o.value;let u=n;n.includes(e)?u=n.filter(c=>c!==e):(a.max===void 0||n.length<a.max)&&(u=[...n,e]),d(u,l),f(""),a.closeOnSelect&&h(!1)}function _(){if(m.value)return;const e=g(),l=e.findIndex(O=>O.id===s.value);if(l===-1)return;const n=e.findIndex(O=>O.dataset.value===F),u=n===-1?l:n,[c,y]=u<=l?[u,l]:[l,u],b=o.value,v=[...b];for(const O of e.slice(c,y+1)){const E=O.dataset.value??"";if(!v.includes(E)){if(a.max!==void 0&&v.length>=a.max)break;v.push(E)}}d(v.length===b.length?b:v,"keyboard"),f(""),a.closeOnSelect&&h(!1)}function z(e){if(m.value)return;const l=g(),n=l.findIndex(b=>b.id===s.value);if(n===-1)return;const u=e==="first"?l.slice(0,n+1):l.slice(n),c=o.value,y=[...c];for(const b of u){const v=b.dataset.value??"";if(!y.includes(v)){if(a.max!==void 0&&y.length>=a.max)break;y.push(v)}}d(y.length===c.length?c:y,"keyboard"),f(""),a.closeOnSelect&&h(!1)}function H(e){if(m.value)return;const l=o.value;d(l.includes(e)?l.filter(n=>n!==e):l,"pointer")}function U(){if(m.value)return;const e=o.value;d(e.length===0?e:e.slice(0,-1),"keyboard")}function G(){if(m.value||!V.value)return;const e=g().map(l=>l.dataset.value??"");if(e.length>0&&e.every(l=>o.value.includes(l)))d(o.value.filter(l=>!e.includes(l)),"keyboard"),f(""),a.closeOnSelect&&h(!1);else{const l=o.value,n=[...l];for(const u of e)if(!n.includes(u)){if(a.max!==void 0&&n.length>=a.max)break;n.push(u)}d(n.length===l.length?l:n,"keyboard"),f(""),a.closeOnSelect&&h(!1)}}function K(){m.value||(d([],"pointer"),f(""))}function W(e){B.value=e,h(!0)}function X(e,l){const n=i.value.get(e);if(n?.value===l.value&&n.text===l.text)return;const u=new Map(i.value);u.set(e,l),i.value=u}function j(e){if(!i.value.has(e))return;const l=new Map(i.value);l.delete(e),i.value=l}let S;(0,t.watch)(x,e=>{if(S!==void 0&&cancelAnimationFrame(S),!e){s.value=null;return}S=requestAnimationFrame(()=>{const l=B.value;if(B.value=null,!l)return;const n=V.value;if(!n)return;const u=g();if(u.length===0)return;const c=l==="last"?u[u.length-1]:u[0];s.value===null&&(s.value=c.id,k.scrollIntoPopup(n,c))})}),(0,t.onBeforeUnmount)(()=>{S!==void 0&&cancelAnimationFrame(S)});const D=(0,t.computed)(()=>i.value.size);(0,t.watch)([i,q,()=>a.filter],()=>g(),{flush:"post"}),(0,t.watch)([i,s],([,e])=>{if(e===null)return;const l=g();l.some(n=>n.id===e)||(s.value=l[0]?.id??null)},{flush:"post"}),(0,t.watch)(()=>o.value.length,e=>le.announce(a.getSelectionLabel(e))),(0,t.provide)(k.MULTI_SELECT_CONTEXT,{inputRef:P,contentRef:V,listId:k.nextMultiSelectListId(),value:o,isSelected:e=>o.value.includes(e),toggle:N,selectRange:_,selectToEdge:z,deselect:H,removeLast:U,selectAllOrClear:G,clear:K,atMax:T,inputValue:q,onInputValueChange:f,open:x,setOpen:h,activeId:s,setActiveId:e=>{s.value=e},openWithHighlight:W,itemCount:D,registerItem:X,unregisterItem:j,getItem:e=>i.value.get(e),matchesFilter:e=>a.filter===void 0||L.filterKeeps(a.filter(e,q.value)),orderedOptions:g,get disabled(){return a.disabled},get readOnly(){return a.readOnly},get invalid(){return a.invalid},get allowSelectAll(){return a.allowSelectAll},get loading(){return a.loading}});const I=(0,t.ref)([]),J=a.value??a.defaultValue,Q=a.inputValue??a.defaultInputValue;return Y.useFormReset(()=>I.value[0],()=>{d(J,"programmatic"),f(Q)}),M({checkValidity:()=>I.value[0]?.checkValidity()??!0,reportValidity:()=>I.value[0]?.reportValidity()??!0}),(e,l)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[(0,t.createVNode)(te.default,null,{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,"default",{},()=>[(0,t.createVNode)(ne.default,(0,t.mergeProps)(e.$attrs,{options:r.options??[],clearable:r.clearable,"aria-label":r.ariaLabel}),(0,t.createSlots)({_:2},[e.$slots.option?{name:"option",fn:(0,t.withCtx)(n=>[(0,t.renderSlot)(e.$slots,"option",(0,t.normalizeProps)((0,t.guardReactiveProps)(n)))]),key:"0"}:void 0,e.$slots.tag?{name:"tag",fn:(0,t.withCtx)(n=>[(0,t.renderSlot)(e.$slots,"tag",(0,t.normalizeProps)((0,t.guardReactiveProps)(n)))]),key:"1"}:void 0]),1040,["options","clearable","aria-label"])])]),_:3}),r.name?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)((0,t.unref)(ee.mirroredFormValues)(o.value,{required:r.required}),(n,u)=>((0,t.openBlock)(),(0,t.createElementBlock)("input",{key:n||u,ref_for:!0,ref_key:"hiddenEls",ref:I,type:"text","aria-hidden":"true",tabindex:"-1",name:r.name,"^value":n,required:r.required,disabled:r.disabled||void 0,form:r.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,ae))),128)):(0,t.createCommentVNode)("",!0)],64))}});exports.default=ue;

package/dist/multi-select/MultiSelect.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import{announce as t}from"../utils/liveAnnouncer.js";import l from"../utils/PopperRoot.vue.js";import{MULTI_SELECT_CONTEXT as a,OPTION_SELECTOR as n,defaultGetSelectionLabel as u,nextMultiSelectListId as o}from"./context.js";import{computed as i,createBlock as d,defineComponent as v,onBeforeUnmount as r,openBlock as s,provide as c,ref as p,renderSlot as f,watch as m,withCtx as g}from"vue";var h=/* @__PURE__ */v({inheritAttrs:!1,__name:"MultiSelect",props:{value:{default:void 0},defaultValue:{default:()=>[]},inputValue:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},max:{default:void 0},closeOnSelect:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},getSelectionLabel:{type:Function,default:u}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(u,{emit:v}){const h=u,y=v,O=p(null),S=p(null),x=p(null),I=p(/* @__PURE__ */new Map),V=p(null),C=p(h.defaultValue),A=i(()=>void 0===h.value?C.value:h.value),B=p(h.defaultInputValue),b=i(()=>void 0===h.inputValue?B.value:h.inputValue),L=p(h.defaultOpen),M=i(()=>h.open??L.value);e(M,S,e=>y("open-change-complete",e));const F=i(()=>h.disabled||h.readOnly),T=i(()=>void 0!==h.max&&A.value.length>=h.max);function _(e){e!==A.value&&(void 0===h.value&&(C.value=e),y("update:value",e),y("value-change",e))}function w(e){e!==b.value&&(void 0===h.inputValue&&(B.value=e),y("update:inputValue",e),y("input-value-change",e))}function E(e){e!==M.value&&(void 0===h.open&&(L.value=e),y("update:open",e),y("open-change",e))}let j;m(M,e=>{void 0!==j&&cancelAnimationFrame(j),e?j=requestAnimationFrame(()=>{const e=V.value;if(V.value=null,!e)return;const t=S.value?.querySelectorAll(n);if(!t||0===t.length)return;const l="last"===e?t[t.length-1]:t[0];null===x.value&&(x.value=l.id)}):x.value=null}),r(()=>{void 0!==j&&cancelAnimationFrame(j)});const R=i(()=>I.value.size);return m([I,x],([,e])=>{if(null===e)return;const t=Array.from(S.value?.querySelectorAll('[role="option"]:not([data-disabled])')??[]);t.some(t=>t.id===e)||(x.value=t[0]?.id??null)},{flush:"post"}),m(()=>A.value.length,e=>t(h.getSelectionLabel(e))),c(a,{inputRef:O,contentRef:S,listId:o(),value:A,isSelected:e=>A.value.includes(e),toggle:function(e){if(F.value)return;const t=A.value;let l=t;t.includes(e)?l=t.filter(t=>t!==e):(void 0===h.max||t.length<h.max)&&(l=[...t,e]),_(l),w(""),h.closeOnSelect&&E(!1)},deselect:function(e){if(F.value)return;const t=A.value;_(t.includes(e)?t.filter(t=>t!==e):t)},removeLast:function(){if(F.value)return;const e=A.value;_(0===e.length?e:e.slice(0,-1))},atMax:T,inputValue:b,onInputValueChange:w,open:M,setOpen:E,activeId:x,setActiveId:e=>{x.value=e},openWithHighlight:function(e){V.value=e,E(!0)},itemCount:R,registerItem:function(e,t){const l=I.value.get(e);if(l?.value===t.value&&l.text===t.text)return;const a=new Map(I.value);a.set(e,t),I.value=a},unregisterItem:function(e){if(!I.value.has(e))return;const t=new Map(I.value);t.delete(e),I.value=t},getItem:e=>I.value.get(e),matchesFilter:e=>void 0===h.filter||h.filter(e,b.value),get disabled(){return h.disabled},get readOnly(){return h.readOnly},get invalid(){return h.invalid}}),(e,t)=>(s(),d(l,null,{default:g(()=>[f(e.$slots,"default")]),_:3}))}});export{h as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{useOpenChangeComplete as t}from"../utils/useOpenChangeComplete.js";import{mirroredFormValues as l}from"../utils/mirroredValues.js";import a from"../utils/PopperRoot.vue.js";import{announce as n}from"../utils/liveAnnouncer.js";import{filterKeeps as u,orderByScore as o}from"../utils/scoredFilter.js";import{MULTI_SELECT_CONTEXT as i,OPTION_SELECTOR as r,defaultGetSelectionLabel as s,nextMultiSelectListId as d,scrollIntoPopup as c}from"./context.js";import f from"./MultiSelectAnatomy.vue.js";import{Fragment as v,computed as p,createCommentVNode as m,createElementBlock as g,createSlots as h,createVNode as y,defineComponent as b,guardReactiveProps as x,mergeProps as V,normalizeProps as O,onBeforeUnmount as S,openBlock as k,provide as I,ref as B,renderList as C,renderSlot as A,unref as F,watch as L,withCtx as w}from"vue";var _=["name","^value","required","disabled","form"],j=/* @__PURE__ */b({inheritAttrs:!1,__name:"MultiSelect",props:{value:{default:void 0},defaultValue:{default:()=>[]},inputValue:{default:void 0},options:{default:void 0},defaultInputValue:{default:""},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},max:{default:void 0},closeOnSelect:{type:Boolean,default:!1},filter:{type:Function,default:void 0},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},getSelectionLabel:{type:Function,default:s},allowSelectAll:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},ariaLabel:{default:void 0}},emits:["update:value","value-change","update:inputValue","input-value-change","update:open","open-change","open-change-complete"],setup(s,{expose:b,emit:j}){const E=s,M=j,R=B(null),q=B(null),T=B(null),P=B(/* @__PURE__ */new Map),$=B(null),N=B(E.defaultValue),z=p(()=>void 0===E.value?N.value:E.value),U=B(E.defaultInputValue),G=p(()=>void 0===E.inputValue?U.value:E.inputValue),H=B(E.defaultOpen),K=p(()=>E.open??H.value);t(K,q,e=>M("open-change-complete",e));const W=p(()=>E.disabled||E.readOnly),X=p(()=>void 0!==E.max&&z.value.length>=E.max);function D(e){if(void 0===E.filter)return null;const t=P.value.get(e);if(!t)return null;const l=E.filter(t.text,G.value);return"number"==typeof l?l:null}function J(){const e=q.value;return e?o(e,r,D):[]}function Q(e,t){const l=z.value;e!==l&&(void 0===E.value&&(N.value=e),M("update:value",e),M("value-change",{value:e,previousValue:0===l.length?null:l,reason:t,added:e.filter(e=>!l.includes(e)),removed:l.filter(t=>!e.includes(t))}))}function Y(e){e!==G.value&&(void 0===E.inputValue&&(U.value=e),M("update:inputValue",e),M("input-value-change",e))}function Z(e){e!==K.value&&(void 0===E.open&&(H.value=e),M("update:open",e),M("open-change",e))}let ee,te=null;L(K,e=>{void 0!==ee&&cancelAnimationFrame(ee),e?ee=requestAnimationFrame(()=>{const e=$.value;if($.value=null,!e)return;const t=q.value;if(!t)return;const l=J();if(0===l.length)return;const a="last"===e?l[l.length-1]:l[0];null===T.value&&(T.value=a.id,c(t,a))}):T.value=null}),S(()=>{void 0!==ee&&cancelAnimationFrame(ee)});const le=p(()=>P.value.size);L([P,G,()=>E.filter],()=>J(),{flush:"post"}),L([P,T],([,e])=>{if(null===e)return;const t=J();t.some(t=>t.id===e)||(T.value=t[0]?.id??null)},{flush:"post"}),L(()=>z.value.length,e=>n(E.getSelectionLabel(e))),I(i,{inputRef:R,contentRef:q,listId:d(),value:z,isSelected:e=>z.value.includes(e),toggle:function(e,t){if(W.value)return;te=e;const l=z.value;let a=l;l.includes(e)?a=l.filter(t=>t!==e):(void 0===E.max||l.length<E.max)&&(a=[...l,e]),Q(a,t),Y(""),E.closeOnSelect&&Z(!1)},selectRange:function(){if(W.value)return;const e=J(),t=e.findIndex(e=>e.id===T.value);if(-1===t)return;const l=e.findIndex(e=>e.dataset.value===te),a=-1===l?t:l,[n,u]=a<=t?[a,t]:[t,a],o=z.value,i=[...o];for(const t of e.slice(n,u+1)){const e=t.dataset.value??"";if(!i.includes(e)){if(void 0!==E.max&&i.length>=E.max)break;i.push(e)}}Q(i.length===o.length?o:i,"keyboard"),Y(""),E.closeOnSelect&&Z(!1)},selectToEdge:function(e){if(W.value)return;const t=J(),l=t.findIndex(e=>e.id===T.value);if(-1===l)return;const a="first"===e?t.slice(0,l+1):t.slice(l),n=z.value,u=[...n];for(const e of a){const t=e.dataset.value??"";if(!u.includes(t)){if(void 0!==E.max&&u.length>=E.max)break;u.push(t)}}Q(u.length===n.length?n:u,"keyboard"),Y(""),E.closeOnSelect&&Z(!1)},deselect:function(e){if(W.value)return;const t=z.value;Q(t.includes(e)?t.filter(t=>t!==e):t,"pointer")},removeLast:function(){if(W.value)return;const e=z.value;Q(0===e.length?e:e.slice(0,-1),"keyboard")},selectAllOrClear:function(){if(W.value||!q.value)return;const e=J().map(e=>e.dataset.value??"");if(e.length>0&&e.every(e=>z.value.includes(e)))Q(z.value.filter(t=>!e.includes(t)),"keyboard"),Y(""),E.closeOnSelect&&Z(!1);else{const t=z.value,l=[...t];for(const t of e)if(!l.includes(t)){if(void 0!==E.max&&l.length>=E.max)break;l.push(t)}Q(l.length===t.length?t:l,"keyboard"),Y(""),E.closeOnSelect&&Z(!1)}},clear:function(){W.value||(Q([],"pointer"),Y(""))},atMax:X,inputValue:G,onInputValueChange:Y,open:K,setOpen:Z,activeId:T,setActiveId:e=>{T.value=e},openWithHighlight:function(e){$.value=e,Z(!0)},itemCount:le,registerItem:function(e,t){const l=P.value.get(e);if(l?.value===t.value&&l.text===t.text)return;const a=new Map(P.value);a.set(e,t),P.value=a},unregisterItem:function(e){if(!P.value.has(e))return;const t=new Map(P.value);t.delete(e),P.value=t},getItem:e=>P.value.get(e),matchesFilter:e=>void 0===E.filter||u(E.filter(e,G.value)),orderedOptions:J,get disabled(){return E.disabled},get readOnly(){return E.readOnly},get invalid(){return E.invalid},get allowSelectAll(){return E.allowSelectAll},get loading(){return E.loading}});const ae=B([]),ne=E.value??E.defaultValue,ue=E.inputValue??E.defaultInputValue;return e(()=>ae.value[0],()=>{Q(ne,"programmatic"),Y(ue)}),b({checkValidity:()=>ae.value[0]?.checkValidity()??!0,reportValidity:()=>ae.value[0]?.reportValidity()??!0}),(e,t)=>(k(),g(v,null,[y(a,null,{default:w(()=>[A(e.$slots,"default",{},()=>[y(f,V(e.$attrs,{options:s.options??[],clearable:s.clearable,"aria-label":s.ariaLabel}),h({_:2},[e.$slots.option?{name:"option",fn:w(t=>[A(e.$slots,"option",O(x(t)))]),key:"0"}:void 0,e.$slots.tag?{name:"tag",fn:w(t=>[A(e.$slots,"tag",O(x(t)))]),key:"1"}:void 0]),1040,["options","clearable","aria-label"])])]),_:3}),s.name?(k(!0),g(v,{key:0},C(F(l)(z.value,{required:s.required}),(e,t)=>(k(),g("input",{key:e||t,ref_for:!0,ref_key:"hiddenEls",ref:ae,type:"text","aria-hidden":"true",tabindex:"-1",name:s.name,"^value":e,required:s.required,disabled:s.disabled||void 0,form:s.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,_))),128)):m("",!0)],64))}});export{j as default};

package/dist/multi-select/MultiSelectAnatomy.vue.cjs

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

package/dist/multi-select/MultiSelectAnatomy.vue.d.cts

@@ -0,0 +1,34 @@
+import { type MultiSelectOption, type MultiSelectOptionGroup } from './context.cjs';
+/**
+ * Anatomy of `SkdxMultiSelect`: tag strip, input, optional clear button, listbox.
+ * @internal
+ */
+type __VLS_Props = {
+    options: MultiSelectOption[] | MultiSelectOptionGroup[];
+    clearable: boolean;
+    /** Names input, list, and tag list (none derive name from content). */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+};
+declare var __VLS_7: {
+    value: string;
+}, __VLS_36: {
+    option: MultiSelectOption;
+}, __VLS_41: {
+    option: MultiSelectOption;
+};
+type __VLS_Slots = {} & {
+    tag?: (props: typeof __VLS_7) => any;
+} & {
+    option?: (props: typeof __VLS_36) => any;
+} & {
+    option?: (props: typeof __VLS_41) => 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/multi-select/MultiSelectAnatomy.vue.d.ts

@@ -0,0 +1,34 @@
+import { type MultiSelectOption, type MultiSelectOptionGroup } from './context.js';
+/**
+ * Anatomy of `SkdxMultiSelect`: tag strip, input, optional clear button, listbox.
+ * @internal
+ */
+type __VLS_Props = {
+    options: MultiSelectOption[] | MultiSelectOptionGroup[];
+    clearable: boolean;
+    /** Names input, list, and tag list (none derive name from content). */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+};
+declare var __VLS_7: {
+    value: string;
+}, __VLS_36: {
+    option: MultiSelectOption;
+}, __VLS_41: {
+    option: MultiSelectOption;
+};
+type __VLS_Slots = {} & {
+    tag?: (props: typeof __VLS_7) => any;
+} & {
+    option?: (props: typeof __VLS_36) => any;
+} & {
+    option?: (props: typeof __VLS_41) => 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/multi-select/MultiSelectAnatomy.vue.js

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

package/dist/multi-select/MultiSelectAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const b=require("./context.cjs"),s=require("./MultiSelectClear.vue.cjs"),f=require("./MultiSelectContent.vue.cjs"),q=require("./MultiSelectEmpty.vue.cjs"),k=require("./MultiSelectGroup.vue.cjs"),v=require("./MultiSelectGroupLabel.vue.cjs"),S=require("./MultiSelectInput.vue.cjs"),o=require("./MultiSelectItem.vue.cjs"),B=require("./MultiSelectList.vue.cjs"),m=require("./MultiSelectPortal.vue.cjs"),x=require("./MultiSelectTag.vue.cjs"),C=require("./MultiSelectTagList.vue.cjs"),L=require("./MultiSelectTagRemove.vue.cjs");let e=require("vue");var N=(0,e.defineComponent)({inheritAttrs:!1,__name:"MultiSelectAnatomy",props:{options:{},clearable:{type:Boolean},ariaLabel:{},ariaLabelledby:{}},setup(t){const n=t,c=(0,e.inject)(b.MULTI_SELECT_CONTEXT);function i(a){return"options"in a}function d(a){for(const r of n.options)if(i(r)){const l=r.options.find(u=>u.value===a);if(l)return l.label??l.value}else if(r.value===a)return r.label??r.value;return a}return(a,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(C.default,{"aria-label":t.ariaLabel?`${t.ariaLabel} — selected`:void 0,"aria-labelledby":t.ariaLabelledby},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(c).value.value,l=>((0,e.openBlock)(),(0,e.createBlock)(x.default,{key:l,value:l},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"tag",{value:l},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(d(l)),1)]),(0,e.createVNode)(L.default)]),_:2},1032,["value"]))),128))]),_:3},8,["aria-label","aria-labelledby"]),(0,e.createVNode)(S.default,(0,e.mergeProps)(a.$attrs,{"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledby}),null,16,["aria-label","aria-labelledby"]),t.clearable?((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:0,"aria-label":"Clear selection"},{default:(0,e.withCtx)(()=>[...r[0]||(r[0]=[(0,e.createTextVNode)("✕",-1)])]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(m.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(f.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(B.default,{"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledby},{default:(0,e.withCtx)(()=>[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.options,l=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:i(l)?l.label:l.value},[i(l)?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(v.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,u=>((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:u.value,value:u.value,disabled:u.disabled,"text-value":u.label},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"option",{option:u},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(u.label??u.value),1)])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):((0,e.openBlock)(),(0,e.createBlock)(o.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))]),_:3},8,["aria-label","aria-labelledby"]),(0,e.createVNode)(q.default,null,{default:(0,e.withCtx)(()=>[...r[1]||(r[1]=[(0,e.createTextVNode)("No results found",-1)])]),_:1})]),_:3})]),_:3})],64))}});exports.default=N;

package/dist/multi-select/MultiSelectAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{MULTI_SELECT_CONTEXT as e}from"./context.js";import l from"./MultiSelectClear.vue.js";import a from"./MultiSelectContent.vue.js";import t from"./MultiSelectEmpty.vue.js";import r from"./MultiSelectGroup.vue.js";import o from"./MultiSelectGroupLabel.vue.js";import i from"./MultiSelectInput.vue.js";import u from"./MultiSelectItem.vue.js";import s from"./MultiSelectList.vue.js";import n from"./MultiSelectPortal.vue.js";import b from"./MultiSelectTag.vue.js";import d from"./MultiSelectTagList.vue.js";import m from"./MultiSelectTagRemove.vue.js";import{Fragment as v,createBlock as f,createCommentVNode as p,createElementBlock as c,createTextVNode as y,createVNode as S,defineComponent as L,inject as _,mergeProps as j,openBlock as M,renderList as k,renderSlot as x,toDisplayString as C,unref as T,withCtx as g}from"vue";var E=/* @__PURE__ */L({inheritAttrs:!1,__name:"MultiSelectAnatomy",props:{options:{},clearable:{type:Boolean},ariaLabel:{},ariaLabelledby:{}},setup(L){const E=L,N=_(e);function $(e){return"options"in e}function B(e){for(const l of E.options)if($(l)){const a=l.options.find(l=>l.value===e);if(a)return a.label??a.value}else if(l.value===e)return l.label??l.value;return e}return(e,_)=>(M(),c(v,null,[S(d,{"aria-label":L.ariaLabel?`${L.ariaLabel} — selected`:void 0,"aria-labelledby":L.ariaLabelledby},{default:g(()=>[(M(!0),c(v,null,k(T(N).value.value,l=>(M(),f(b,{key:l,value:l},{default:g(()=>[x(e.$slots,"tag",{value:l},()=>[y(C(B(l)),1)]),S(m)]),_:2},1032,["value"]))),128))]),_:3},8,["aria-label","aria-labelledby"]),S(i,j(e.$attrs,{"aria-label":L.ariaLabel,"aria-labelledby":L.ariaLabelledby}),null,16,["aria-label","aria-labelledby"]),L.clearable?(M(),f(l,{key:0,"aria-label":"Clear selection"},{default:g(()=>[..._[0]||(_[0]=[y("✕",-1)])]),_:1})):p("",!0),S(n,null,{default:g(()=>[S(a,null,{default:g(()=>[S(s,{"aria-label":L.ariaLabel,"aria-labelledby":L.ariaLabelledby},{default:g(()=>[(M(!0),c(v,null,k(L.options,l=>(M(),c(v,{key:$(l)?l.label:l.value},[$(l)?(M(),f(r,{key:0},{default:g(()=>[S(o,null,{default:g(()=>[y(C(l.label),1)]),_:2},1024),(M(!0),c(v,null,k(l.options,l=>(M(),f(u,{key:l.value,value:l.value,disabled:l.disabled,"text-value":l.label},{default:g(()=>[x(e.$slots,"option",{option:l},()=>[y(C(l.label??l.value),1)])]),_:2},1032,["value","disabled","text-value"]))),128))]),_:2},1024)):(M(),f(u,{key:1,value:l.value,disabled:l.disabled,"text-value":l.label},{default:g(()=>[x(e.$slots,"option",{option:l},()=>[y(C(l.label??l.value),1)])]),_:2},1032,["value","disabled","text-value"]))],64))),128))]),_:3},8,["aria-label","aria-labelledby"]),S(t,null,{default:g(()=>[..._[1]||(_[1]=[y("No results found",-1)])]),_:1})]),_:3})]),_:3})],64))}});export{E as default};

package/dist/multi-select/MultiSelectClear.vue.cjs

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

package/dist/multi-select/MultiSelectClear.vue.d.cts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/multi-select/MultiSelectClear.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/multi-select/MultiSelectClear.vue.js

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

package/dist/multi-select/MultiSelectClear.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const r=require("./context.cjs");let e=require("vue");var n=["disabled","data-disabled","data-readonly"],i=(0,e.defineComponent)({name:"SkdxMultiSelectClear",__name:"MultiSelectClear",setup(o){const t=(0,e.inject)(r.MULTI_SELECT_CONTEXT);if(!t)throw new Error("SkdxMultiSelectClear must be used within SkdxMultiSelect.");const a=(0,e.computed)(()=>t.value.value.length===0&&t.inputValue.value===""),u=(0,e.computed)(()=>t.disabled||t.readOnly||a.value);return(d,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{type:"button",class:"skdx-multi-select__clear","data-part":"clear",disabled:u.value,"data-disabled":(0,e.unref)(t).disabled?"":void 0,"data-readonly":(0,e.unref)(t).readOnly?"":void 0,onClick:l[0]||(l[0]=()=>{(0,e.unref)(t).clear(),(0,e.unref)(t).inputRef.value?.focus()})},[(0,e.renderSlot)(d.$slots,"default")],8,n))}});exports.default=i;

package/dist/multi-select/MultiSelectClear.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{MULTI_SELECT_CONTEXT as e}from"./context.js";import{computed as a,createElementBlock as t,defineComponent as l,inject as d,openBlock as s,renderSlot as r,unref as n}from"vue";var o=["disabled","data-disabled","data-readonly"],u=/* @__PURE__ */l({name:"SkdxMultiSelectClear",__name:"MultiSelectClear",setup(l){const u=d(e);if(!u)throw new Error("SkdxMultiSelectClear must be used within SkdxMultiSelect.");const i=a(()=>0===u.value.value.length&&""===u.inputValue.value),c=a(()=>u.disabled||u.readOnly||i.value);return(e,a)=>(s(),t("button",{type:"button",class:"skdx-multi-select__clear","data-part":"clear",disabled:c.value,"data-disabled":n(u).disabled?"":void 0,"data-readonly":n(u).readOnly?"":void 0,onClick:a[0]||(a[0]=()=>{n(u).clear(),n(u).inputRef.value?.focus()})},[r(e.$slots,"default")],8,o))}});export{u as default};

package/dist/multi-select/MultiSelectContent.vue.d.cts

@@ -1,73 +1,47 @@
 import { type Align, type PhysicalSide, type Side } from '../utils/popper.cjs';
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
 /**
- * The popup shell of an `SkdxMultiSelect`, positioned relative to the input via
- * floating-ui using `side` (defaults to `'bottom'`) / `align` (defaults to
- * `'start'`) / `sideOffset` (defaults to `4`) / `alignOffset`, flipping and
- * shifting to avoid viewport collisions unless `avoidCollisions` is `false`.
- * Renders a plain `<div>` with `data-state`, `data-side` and `data-align`, and
- * writes the four measurement custom properties
- * `--skdx-multi-select-available-width`, `--skdx-multi-select-available-height`,
- * `--skdx-multi-select-trigger-width` and `--skdx-multi-select-transform-origin`
- * onto itself after each reposition — so a panel whose height must stop at the
- * viewport edge is CSS, not JavaScript.
- *
- * Carries **no ARIA role**: the listbox is `SkdxMultiSelectList`, one level in,
- * leaving room for a "3 of 8 selected" header or a footer that is not an option.
- * Prevents `mousedown` from stealing focus off the input, which is what lets the
- * popup stay open across a run of selections.
- *
- * 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 `SkdxMultiSelectInput` precisely so the veto lands before
- * anything has closed. Mounts only while open unless `forceMount` is set. Must
- * be used inside `SkdxMultiSelect`.
+ * The popup shell, positioned against the input via the shared popper layer. Defaults: side bottom, align start, sideOffset 4.
  */
 type __VLS_Props = {
     /**
      * Preferred side of the input to render on.
-     * @default 'bottom' — the popup hangs below the field, flipping above it only when there is no room.
+     * @default 'bottom'
      */
     side?: Side;
     /**
      * Alignment of the popup along the chosen side, relative to the input.
-     * @default 'start' — the popup's leading edge lines up with the field's.
+     * @default 'start'
      */
     align?: Align;
     /**
      * Distance in pixels between the popup and the input along `side`.
-     * @default 4 — a small gap, so the popup reads as a separate surface.
+     * @default 4
      */
     sideOffset?: number;
     /**
      * Offset in pixels along `align`, shifting the popup perpendicular to `side`.
-     * @default 0 — no perpendicular shift.
+     * @default 0
      */
     alignOffset?: number;
     /**
      * Flips to the opposite side when there isn't room to render on the preferred side.
-     * @default true — a popup that would render off-screen flips instead.
+     * @default true
      */
     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.
-     * @default 8 — the popup never touches the viewport edge.
+     * Minimum distance in pixels kept from the collision boundary. A number applies to every side; an object sets only the sides it names.
+     * @default 8
      */
     collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
     /**
-     * Element (or elements) collisions are measured against, instead of the
-     * popup's clipping ancestors. Use it to keep the options inside a scroll
-     * container or one pane of a split layout rather than the whole viewport.
-     * @default undefined — the popup's clipping ancestors.
+     * Element (or elements) collisions are measured against, instead of the popup's clipping ancestors.
+     * @default undefined
      */
     collisionBoundary?: Element | Element[] | null;
     /**
      * Keep this popup mounted even while closed, instead of unmounting it.
-     * @default false — the popup leaves the DOM entirely while closed.
+     * @default false
      */
     forceMount?: boolean;
 };
@@ -87,8 +61,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
 }>, {
     forceMount: boolean;
-    side: Side;
     align: Align;
+    side: Side;
     sideOffset: number;
     alignOffset: number;
     avoidCollisions: boolean;