@skdx/web-components 0.28.0 → 0.30.0

package/dist/multi-select/MultiSelect.js

@@ -1,5 +0,0 @@
-var v=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(o,u,e,t)=>{for(var i=t>1?void 0:t?g(u,e):u,n=o.length-1,a;n>=0;n--)(a=o[n])&&(i=(t?a(u,e,i):a(i))||i);return t&&i&&v(u,e,i),i};import{css as y,html as b,LitElement as I}from"lit";import{property as l}from"lit/decorators.js";import{hasAuthoredParts as V,hasGeneratedContent as E}from"../internal/authored.js";import{customElement as O}from"../internal/define.js";import{FormAssociated as C}from"../internal/form-associated.js";import{nextId as A}from"../internal/ids.js";import{notifyOpenChangeComplete as x}from"../internal/open-change-complete.js";import{filterKeeps as F,sortByScore as T}from"../internal/scored-filter.js";import{announce as R}from"../utils/live-announcer.js";import{fillMultiSelectAnatomy as L,MULTI_SELECT_ANATOMY_GENERATED as d,MULTI_SELECT_RENDER_SLOTS as w,refreshMultiSelectAnatomyText as _,syncMultiSelectTags as p}from"./MultiSelectAnatomy.js";var c='[role="option"]:not([data-disabled])',f="skdx-multi-select-internal-update";function k(o,u){let e=o.querySelector('[data-part="viewport"]')??o;if(e===u||!e.contains(u))return;let t=e.getBoundingClientRect(),i=u.getBoundingClientRect();e.scrollTop+=i.top-t.top-(t.height-i.height)/2}function S(o){return o===0?"none selected":`${o} selected`}function B(o,u){return o.length===u.length&&o.every((e,t)=>e===u[t])}var s=class extends C(I){constructor(){super(...arguments);this.value=[];this.defaultValue=[];this.inputValue="";this.defaultInputValue="";this.open=!1;this.defaultOpen=!1;this.closeOnSelect=!1;this.allowSelectAll=!0;this.loading=!1;this.clearable=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.getSelectionLabel=S;this.listId=A("skdx-multi-select-list");this.activeId=null;this.inputHost=null;this.contentEl=null;this.seeded=!1;this.hasUpdatedOnce=!1;this.rangeAnchor=null;this.itemRegistry=new Map;this._anatomyClearable=!1;this.fillAnatomy=()=>{if(V(this,d,w)){this._anatomyOptionsRef=void 0;return}this.options!==this._anatomyOptionsRef||this.clearable!==this._anatomyClearable||!E(this,d)?(this._anatomyClearable=this.clearable,this._anatomyOptionsRef=this.options,L(this),p(this)):_(this)}}get atMax(){return this.max!==void 0&&this.value.length>=this.max}get locked(){return this.disabled||this.readOnly}isSelected(e){return this.value.includes(e)}setValue(e,t="programmatic"){if(B(this.value,e))return;let i=this.value;this.value=e,this.emitValueChange(e,i,t)}emitValueChange(e,t,i){let n={value:e,previousValue:t.length===0?null:t,reason:i,added:e.filter(a=>!t.includes(a)),removed:t.filter(a=>!e.includes(a))};this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0})),this.notify()}setInputValue(e){this.inputValue!==e&&(this.inputValue=e,this.emit("input-value-change",e))}setOpen(e){this.open!==e&&(this.open=e,e||(this.activeId=null),this.emit("open-change",e))}toggle(e,t="programmatic"){if(this.locked)return;this.rangeAnchor=e;let i=this.value,n=i;i.includes(e)?n=i.filter(a=>a!==e):(this.max===void 0||i.length<this.max)&&(n=[...i,e]),this.setValue(n,t),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)}sweepSelect(e){let t=[...this.value];for(let i of e)if(!t.includes(i)){if(this.max!==void 0&&t.length>=this.max)break;t.push(i)}this.setValue(t,"keyboard"),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)}selectRange(){if(this.locked)return;let e=this.visibleOptions(),t=e.findIndex(h=>h.id===this.activeId);if(t===-1)return;let i=e.findIndex(h=>h.dataset.value===this.rangeAnchor),n=i===-1?t:i,[a,m]=n<=t?[n,t]:[t,n];this.sweepSelect(e.slice(a,m+1).map(h=>h.dataset.value??""))}selectToEdge(e){if(this.locked)return;let t=this.visibleOptions(),i=t.findIndex(a=>a.id===this.activeId);if(i===-1)return;let n=e==="first"?t.slice(0,i+1):t.slice(i);this.sweepSelect(n.map(a=>a.dataset.value??""))}selectAllOrClear(){if(this.locked)return;let t=this.visibleOptions().map(n=>n.dataset.value??"");t.length>0&&t.every(n=>this.value.includes(n))?(this.setValue(this.value.filter(n=>!t.includes(n)),"keyboard"),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)):this.sweepSelect(t)}deselect(e){this.locked||!this.value.includes(e)||this.setValue(this.value.filter(t=>t!==e),"pointer")}clear(){this.locked||(this.setValue([],"pointer"),this.setInputValue(""))}removeLast(){this.locked||this.value.length===0||this.setValue(this.value.slice(0,-1),"keyboard")}matchesFilter(e){return this.filter===void 0||F(this.filter(e,this.inputValue))}visibleOptions(){let e=this.filter;return e===void 0?Array.from(this.querySelectorAll(c)):T(this,c,t=>{let i=this.itemRegistry.get(t);if(!i)return null;let n=e(i.text,this.inputValue);return typeof n=="number"?n:null})}textFor(e){for(let t of this.itemRegistry.values())if(t.value===e)return t.text}openWithHighlight(e){this.setOpen(!0),requestAnimationFrame(()=>{let t=this.visibleOptions();if(t.length===0)return;let i=e==="last"?t[t.length-1]:t[0];this.setActiveId(i.id),this.contentEl&&k(this.contentEl,i)})}setActiveId(e){this.activeId=e,this.notify()}get itemCount(){return this.itemRegistry.size}registerItem(e,t){this.itemRegistry.set(e,t),this.scheduleReorder()}unregisterItem(e){this.itemRegistry.delete(e),this.activeId===e&&this.scheduleReseed(),this.scheduleReorder()}getItem(e){return this.itemRegistry.get(e)}scheduleReseed(){this.reseedFrame===void 0&&(this.reseedFrame=requestAnimationFrame(()=>{this.reseedFrame=void 0;let e=this.activeId;if(e===null)return;let t=this.visibleOptions();t.some(i=>i.id===e)||this.setActiveId(t[0]?.id??null)}))}scheduleReorder(){this.reorderFrame===void 0&&(this.reorderFrame=requestAnimationFrame(()=>{this.reorderFrame=void 0,this.visibleOptions()}))}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent(f,{bubbles:!0,composed:!0})),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("input-value")||(this.inputValue=this.defaultInputValue),this.hasAttribute("open")||(this.open=this.defaultOpen),this.initialValue=[...this.value],this.initialInputValue=this.inputValue);let e=this.querySelector("skdx-multi-select-list")?.id;e&&(this.listId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.reseedFrame!==void 0&&cancelAnimationFrame(this.reseedFrame),this.reseedFrame=void 0,this.reorderFrame!==void 0&&cancelAnimationFrame(this.reorderFrame),this.reorderFrame=void 0,this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),e.has("value")&&p(this),e.has("value")&&!t&&!this.loading&&R(this.getSelectionLabel(this.value.length)),(e.has("value")||e.has("name")||e.has("required"))&&this.syncFormState(),e.size>0&&this.dispatchEvent(new CustomEvent(f,{bubbles:!0,composed:!0})),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=x(()=>this.contentEl,this.open,i=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:i,bubbles:!0,composed:!0}))))}syncFormState(){this.setFormValue(this.multiFormValue(this.value)),this.setValueMissing(this.required&&this.value.length===0,"Please select an item in the list.",this.inputHost)}formResetCallback(){this.value=this.initialValue?[...this.initialValue]:[],this.inputValue=this.initialInputValue??"",this.rangeAnchor=null}render(){return b`<slot @slotchange=${this.fillAnatomy}></slot>`}};s.styles=y`
-    :host {
-      display: contents;
-    }
-  `,r([l({type:Array})],s.prototype,"value",2),r([l({type:Array,attribute:"default-value"})],s.prototype,"defaultValue",2),r([l({type:String,attribute:"input-value"})],s.prototype,"inputValue",2),r([l({type:String,attribute:"default-input-value"})],s.prototype,"defaultInputValue",2),r([l({type:Boolean,reflect:!0})],s.prototype,"open",2),r([l({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),r([l({type:Number})],s.prototype,"max",2),r([l({type:Boolean,attribute:"close-on-select",reflect:!0})],s.prototype,"closeOnSelect",2),r([l({type:Boolean,attribute:"allow-select-all"})],s.prototype,"allowSelectAll",2),r([l({type:Boolean,reflect:!0})],s.prototype,"loading",2),r([l({attribute:!1})],s.prototype,"filter",2),r([l({attribute:!1})],s.prototype,"options",2),r([l({type:String})],s.prototype,"placeholder",2),r([l({type:Boolean,reflect:!0})],s.prototype,"clearable",2),r([l({type:Boolean,reflect:!0})],s.prototype,"disabled",2),r([l({type:Boolean,attribute:"read-only",reflect:!0})],s.prototype,"readOnly",2),r([l({type:Boolean,reflect:!0})],s.prototype,"invalid",2),r([l({type:String,reflect:!0})],s.prototype,"name",2),r([l({type:Boolean,reflect:!0})],s.prototype,"required",2),r([l({type:String,attribute:"form",reflect:!0})],s.prototype,"formId",2),r([l({attribute:!1})],s.prototype,"getSelectionLabel",2),s=r([O("skdx-multi-select")],s);export{f as MULTI_SELECT_UPDATE_EVENT,c as OPTION_SELECTOR,s as SkdxMultiSelect,S as defaultGetSelectionLabel,k as scrollIntoPopup};

package/dist/multi-select/MultiSelectAnatomy.cjs

@@ -1 +0,0 @@
-"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var s in e)d(t,s,{get:e[s],enumerable:!0})},S=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of A(e))!E.call(t,i)&&i!==s&&d(t,i,{get:()=>e[i],enumerable:!(n=b(e,i))||n.enumerable});return t};var f=t=>S(d({},"__esModule",{value:!0}),t);var M={};g(M,{MULTI_SELECT_ANATOMY_GENERATED:()=>m,MULTI_SELECT_RENDER_SLOTS:()=>k,fillMultiSelectAnatomy:()=>L,refreshMultiSelectAnatomyText:()=>C,syncMultiSelectTags:()=>y});module.exports=f(M);var r=require("../internal/host-attributes.cjs"),o=require("../internal/options.cjs"),_=require("./MultiSelectTagList.cjs"),v=require("./MultiSelectTag.cjs"),O=require("./MultiSelectTagRemove.cjs"),R=require("./MultiSelectInput.cjs"),N=require("./MultiSelectClear.cjs"),D=require("./MultiSelectPortal.cjs"),H=require("./MultiSelectContent.cjs"),U=require("./MultiSelectList.cjs"),q=require("./MultiSelectItem.cjs"),F=require("./MultiSelectGroup.cjs"),I=require("./MultiSelectGroupLabel.cjs"),$=require("./MultiSelectEmpty.cjs"),m="data-skdx-multi-select-generated",k=["option","tag"],h="Clear selection";function L(t){let e=(0,o.renderSlotContent)(t,"option");(0,o.renderSlotContent)(t,"tag");let s=(0,r.claimHostAttributes)(t),n=(0,r.resolveHostLabel)(s,t.placeholder),i=document.createElement("skdx-multi-select-tag-list");i.setAttribute(m,""),(0,r.setOptionalAttribute)(i,"aria-label",n&&`${n} \u2014 selected`);let l=document.createElement("skdx-multi-select-input");l.setAttribute(m,""),t.placeholder&&l.setAttribute("placeholder",t.placeholder),(0,r.applyHostAttributes)(l,s,["aria-label"]),(0,r.setOptionalAttribute)(l,"aria-label",n);let c=document.createElement("skdx-multi-select-list");(0,r.setOptionalAttribute)(c,"aria-label",n),c.append(...(0,o.buildOptionElements)(t.options??[],{item:"skdx-multi-select-item",group:"skdx-multi-select-group",groupLabel:"skdx-multi-select-group-label",itemContent:e}));let u=document.createElement("skdx-multi-select-empty");u.textContent="No results found";let a=document.createElement("skdx-multi-select-content");a.setAttribute(m,""),a.append(c,u);let x=[i,l,a];if(t.clearable){let p=document.createElement("skdx-multi-select-clear");p.setAttribute(m,""),p.setAttribute("aria-label",h),p.textContent="\xD7",x.push(p)}t.replaceChildren(...x)}function C(t){let e=t.querySelector(":scope > skdx-multi-select-input");e&&(t.placeholder?e.setAttribute("placeholder",t.placeholder):e.removeAttribute("placeholder"))}function y(t){let e=t.querySelector(`:scope > skdx-multi-select-tag-list[${m}]`);if(!e)return;let s=Array.from(e.children,l=>l.getAttribute("value")),n=t.value;if(s.length===n.length&&s.every((l,c)=>l===n[c]))return;let i=(0,o.renderSlotContent)(t,"tag");e.replaceChildren(...n.map(l=>{let c=document.createElement("skdx-multi-select-tag");c.setAttribute("value",l);let u=i.get(l);u?c.append((0,o.stampRenderSlot)(u)):c.textContent=(0,o.findOptionLabel)(t.options,l)??t.textFor(l)??l;let a=document.createElement("skdx-multi-select-tag-remove");return a.textContent="\xD7",c.append(a),c}))}0&&(module.exports={MULTI_SELECT_ANATOMY_GENERATED,MULTI_SELECT_RENDER_SLOTS,fillMultiSelectAnatomy,refreshMultiSelectAnatomyText,syncMultiSelectTags});

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

@@ -1,38 +0,0 @@
-import type { SkdxMultiSelect } from './MultiSelect.cjs';
-import './MultiSelectTagList.cjs';
-import './MultiSelectTag.cjs';
-import './MultiSelectTagRemove.cjs';
-import './MultiSelectInput.cjs';
-import './MultiSelectClear.cjs';
-import './MultiSelectPortal.cjs';
-import './MultiSelectContent.cjs';
-import './MultiSelectList.cjs';
-import './MultiSelectItem.cjs';
-import './MultiSelectGroup.cjs';
-import './MultiSelectGroupLabel.cjs';
-import './MultiSelectEmpty.cjs';
-/** @internal Marks a direct child of `<skdx-multi-select>` this module generated. */
-export declare const MULTI_SELECT_ANATOMY_GENERATED = "data-skdx-multi-select-generated";
-/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
-export declare const MULTI_SELECT_RENDER_SLOTS: readonly ["option", "tag"];
-/**
- * Builds the canonical anatomy: TagList, Input, and popup List of Items.
- * Tags are synced separately via {@link syncMultiSelectTags} because they
- * change more often. Slot content is claimed from light DOM; host attributes
- * move onto the Input; resolved name labels the Input, List, and TagList.
- * @internal
- */
-export declare function fillMultiSelectAnatomy(root: SkdxMultiSelect): void;
-/**
- * Refreshes the generated Input's `placeholder` without rebuilding the anatomy.
- * `aria-label` is read once on connect.
- * @internal
- */
-export declare function refreshMultiSelectAnatomyText(root: SkdxMultiSelect): void;
-/**
- * Rebuilds the generated TagList from `root.value`, separate from
- * {@link fillMultiSelectAnatomy} because selection changes far more often than
- * options. A no-op when value shape hasn't changed or anatomy wasn't generated.
- * @internal
- */
-export declare function syncMultiSelectTags(root: SkdxMultiSelect): void;

package/dist/multi-select/MultiSelectAnatomy.d.ts

@@ -1,38 +0,0 @@
-import type { SkdxMultiSelect } from './MultiSelect.js';
-import './MultiSelectTagList.js';
-import './MultiSelectTag.js';
-import './MultiSelectTagRemove.js';
-import './MultiSelectInput.js';
-import './MultiSelectClear.js';
-import './MultiSelectPortal.js';
-import './MultiSelectContent.js';
-import './MultiSelectList.js';
-import './MultiSelectItem.js';
-import './MultiSelectGroup.js';
-import './MultiSelectGroupLabel.js';
-import './MultiSelectEmpty.js';
-/** @internal Marks a direct child of `<skdx-multi-select>` this module generated. */
-export declare const MULTI_SELECT_ANATOMY_GENERATED = "data-skdx-multi-select-generated";
-/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
-export declare const MULTI_SELECT_RENDER_SLOTS: readonly ["option", "tag"];
-/**
- * Builds the canonical anatomy: TagList, Input, and popup List of Items.
- * Tags are synced separately via {@link syncMultiSelectTags} because they
- * change more often. Slot content is claimed from light DOM; host attributes
- * move onto the Input; resolved name labels the Input, List, and TagList.
- * @internal
- */
-export declare function fillMultiSelectAnatomy(root: SkdxMultiSelect): void;
-/**
- * Refreshes the generated Input's `placeholder` without rebuilding the anatomy.
- * `aria-label` is read once on connect.
- * @internal
- */
-export declare function refreshMultiSelectAnatomyText(root: SkdxMultiSelect): void;
-/**
- * Rebuilds the generated TagList from `root.value`, separate from
- * {@link fillMultiSelectAnatomy} because selection changes far more often than
- * options. A no-op when value shape hasn't changed or anatomy wasn't generated.
- * @internal
- */
-export declare function syncMultiSelectTags(root: SkdxMultiSelect): void;

package/dist/multi-select/MultiSelectAnatomy.js

@@ -1 +0,0 @@
-import{applyHostAttributes as x,claimHostAttributes as b,resolveHostLabel as A,setOptionalAttribute as u}from"../internal/host-attributes.js";import{buildOptionElements as E,findOptionLabel as g,renderSlotContent as p,stampRenderSlot as S}from"../internal/options.js";import"./MultiSelectTagList.js";import"./MultiSelectTag.js";import"./MultiSelectTagRemove.js";import"./MultiSelectInput.js";import"./MultiSelectClear.js";import"./MultiSelectPortal.js";import"./MultiSelectContent.js";import"./MultiSelectList.js";import"./MultiSelectItem.js";import"./MultiSelectGroup.js";import"./MultiSelectGroupLabel.js";import"./MultiSelectEmpty.js";var a="data-skdx-multi-select-generated",U=["option","tag"],f="Clear selection";function q(t){let n=p(t,"option");p(t,"tag");let s=b(t),i=A(s,t.placeholder),r=document.createElement("skdx-multi-select-tag-list");r.setAttribute(a,""),u(r,"aria-label",i&&`${i} \u2014 selected`);let e=document.createElement("skdx-multi-select-input");e.setAttribute(a,""),t.placeholder&&e.setAttribute("placeholder",t.placeholder),x(e,s,["aria-label"]),u(e,"aria-label",i);let l=document.createElement("skdx-multi-select-list");u(l,"aria-label",i),l.append(...E(t.options??[],{item:"skdx-multi-select-item",group:"skdx-multi-select-group",groupLabel:"skdx-multi-select-group-label",itemContent:n}));let o=document.createElement("skdx-multi-select-empty");o.textContent="No results found";let c=document.createElement("skdx-multi-select-content");c.setAttribute(a,""),c.append(l,o);let d=[r,e,c];if(t.clearable){let m=document.createElement("skdx-multi-select-clear");m.setAttribute(a,""),m.setAttribute("aria-label",f),m.textContent="\xD7",d.push(m)}t.replaceChildren(...d)}function F(t){let n=t.querySelector(":scope > skdx-multi-select-input");n&&(t.placeholder?n.setAttribute("placeholder",t.placeholder):n.removeAttribute("placeholder"))}function I(t){let n=t.querySelector(`:scope > skdx-multi-select-tag-list[${a}]`);if(!n)return;let s=Array.from(n.children,e=>e.getAttribute("value")),i=t.value;if(s.length===i.length&&s.every((e,l)=>e===i[l]))return;let r=p(t,"tag");n.replaceChildren(...i.map(e=>{let l=document.createElement("skdx-multi-select-tag");l.setAttribute("value",e);let o=r.get(e);o?l.append(S(o)):l.textContent=g(t.options,e)??t.textFor(e)??e;let c=document.createElement("skdx-multi-select-tag-remove");return c.textContent="\xD7",l.append(c),l}))}export{a as MULTI_SELECT_ANATOMY_GENERATED,U as MULTI_SELECT_RENDER_SLOTS,q as fillMultiSelectAnatomy,F as refreshMultiSelectAnatomyText,I as syncMultiSelectTags};

package/dist/multi-select/MultiSelectClear.cjs

@@ -1,18 +0,0 @@
-"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},k=(o,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!f.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(r=h(t,e))||r.enumerable});return o};var y=o=>k(a({},"__esModule",{value:!0}),o),m=(o,t,s,r)=>{for(var e=r>1?void 0:r?h(t,s):t,n=o.length-1,d;n>=0;n--)(d=o[n])&&(e=(r?d(t,s,e):d(e))||e);return r&&e&&a(t,s,e),e};var L={};E(L,{SkdxMultiSelectClear:()=>i});module.exports=y(L);var l=require("lit"),p=require("../internal/aria-label.cjs"),u=require("../internal/closest.cjs"),b=require("../internal/define.cjs"),c=require("./MultiSelect.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.label??(this.label=(0,p.takeHostAriaLabel)(this)),this.root=(0,u.closestThroughPortal)(this,"skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),super.disconnectedCallback()}render(){if(!this.root)return l.html`<slot></slot>`;let s=this.root.value.length===0&&this.root.inputValue==="",r=this.root.disabled||this.root.readOnly||s;return l.html`
-      <button
-        type="button"
-        class="skdx-multi-select__clear"
-        data-part="clear"
-        aria-label="${this.label??l.nothing}"
-        ?disabled="${r}"
-        data-disabled="${this.root.disabled?"":l.nothing}"
-        data-readonly="${this.root.readOnly?"":l.nothing}"
-        @click="${()=>{this.root&&(this.root.clear(),this.root.inputHost?.focus?.())}}"
-      >
-        <slot></slot>
-      </button>
-    `}};i.styles=l.css`
-    :host {
-      display: inline-flex;
-    }
-  `,i=m([(0,b.customElement)("skdx-multi-select-clear","multi-select","clear")],i);0&&(module.exports={SkdxMultiSelectClear});

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

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Optional button that empties a `<skdx-multi-select>` in one press — the whole selection *and* the draft text — and hands focus back to `<skdx-multi-select-input>`. Without it the only way out of a large selection is removing every tag one at a time.
- *
- * Its own tab stop, and a plain `<button type="button">` so it never submits the surrounding form. Disabled while there is nothing to clear, and while the root is `disabled` or `readOnly`.
- *
- * Give it an `aria-label`: a "✕" glyph is not an accessible name. It is moved onto the inner `<button>`, where the role that can carry a name lives.
- */
-export declare class SkdxMultiSelectClear extends LitElement {
-    static styles: import("lit").CSSResult;
-    private root;
-    private label;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-clear': SkdxMultiSelectClear;
-    }
-}

package/dist/multi-select/MultiSelectClear.d.ts

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Optional button that empties a `<skdx-multi-select>` in one press — the whole selection *and* the draft text — and hands focus back to `<skdx-multi-select-input>`. Without it the only way out of a large selection is removing every tag one at a time.
- *
- * Its own tab stop, and a plain `<button type="button">` so it never submits the surrounding form. Disabled while there is nothing to clear, and while the root is `disabled` or `readOnly`.
- *
- * Give it an `aria-label`: a "✕" glyph is not an accessible name. It is moved onto the inner `<button>`, where the role that can carry a name lives.
- */
-export declare class SkdxMultiSelectClear extends LitElement {
-    static styles: import("lit").CSSResult;
-    private root;
-    private label;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-clear': SkdxMultiSelectClear;
-    }
-}

package/dist/multi-select/MultiSelectClear.js

@@ -1,18 +0,0 @@
-var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(r,o,l,e)=>{for(var t=e>1?void 0:e?p(o,l):o,i=r.length-1,a;i>=0;i--)(a=r[i])&&(t=(e?a(o,l,t):a(t))||t);return e&&t&&m(o,l,t),t};import{css as u,html as c,LitElement as b,nothing as n}from"lit";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{closestThroughPortal as f}from"../internal/closest.js";import{customElement as E}from"../internal/define.js";import{MULTI_SELECT_UPDATE_EVENT as h}from"./MultiSelect.js";var s=class extends b{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.label??(this.label=v(this)),this.root=f(this,"skdx-multi-select"),this.root?.addEventListener(h,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(h,this.onRootUpdate),super.disconnectedCallback()}render(){if(!this.root)return c`<slot></slot>`;let l=this.root.value.length===0&&this.root.inputValue==="",e=this.root.disabled||this.root.readOnly||l;return c`
-      <button
-        type="button"
-        class="skdx-multi-select__clear"
-        data-part="clear"
-        aria-label="${this.label??n}"
-        ?disabled="${e}"
-        data-disabled="${this.root.disabled?"":n}"
-        data-readonly="${this.root.readOnly?"":n}"
-        @click="${()=>{this.root&&(this.root.clear(),this.root.inputHost?.focus?.())}}"
-      >
-        <slot></slot>
-      </button>
-    `}};s.styles=u`
-    :host {
-      display: inline-flex;
-    }
-  `,s=d([E("skdx-multi-select-clear","multi-select","clear")],s);export{s as SkdxMultiSelectClear};

package/dist/multi-select/MultiSelectContent.cjs

@@ -1,5 +0,0 @@
-"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var O=(n,e)=>{for(var t in e)u(n,t,{get:e[t],enumerable:!0})},P=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!g.call(n,o)&&o!==t&&u(n,o,{get:()=>e[o],enumerable:!(i=v(e,o))||i.enumerable});return n};var w=n=>P(u({},"__esModule",{value:!0}),n),r=(n,e,t,i)=>{for(var o=i>1?void 0:i?v(e,t):e,c=n.length-1,p;c>=0;c--)(p=n[c])&&(o=(i?p(e,t,o):p(o))||o);return i&&o&&u(e,t,o),o};var L={};O(L,{SkdxMultiSelectContent:()=>s});module.exports=w(L);var l=require("lit"),a=require("lit/decorators.js"),m=require("../internal/closest.cjs"),y=require("../internal/define.cjs"),d=require("../internal/dismiss.cjs"),h=require("../internal/positioning.cjs"),b=require("../internal/styles.cjs"),f=require("./MultiSelect.cjs");var s=class extends l.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.preventFocusSteal=t=>t.preventDefault();this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,d.dispatchEscapeKeyDown)(this,t)&&this.root.setOpen(!1))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,d.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let i=(0,d.focusOutsideTarget)(t);i===null||this.isInside(i)||(0,d.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,m.closestThroughPortal)(this,"skdx-multi-select"),this.root&&(this.root.contentEl=this),this.root?.addEventListener(f.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(f.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("mousedown",this.preventFocusSteal),document.removeEventListener("keydown",this.handleDocumentKeyDown,!0),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),this.cleanupPosition=void 0,super.disconnectedCallback()}isInside(t){return t?this.contains(t)||this.root?.contains(t)===!0:!1}syncHostState(){let t=this.root?.open??!1,i=this.root?.loading??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),i?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),i?this.setAttribute("data-loading",""):this.removeAttribute("data-loading"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){this.cleanupPosition||!this.root?.inputHost||(this.cleanupPosition=(0,h.positionFloating)(this.root.inputHost,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"multi-select"}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return l.html`<slot></slot>`}};s.styles=[b.hiddenHostStyles,l.css`
-      :host {
-        display: block;
-      }
-    `],r([(0,a.property)({type:String})],s.prototype,"side",2),r([(0,a.property)({type:String})],s.prototype,"align",2),r([(0,a.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),r([(0,a.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),r([(0,a.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),r([(0,a.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),r([(0,a.property)({attribute:!1})],s.prototype,"collisionBoundary",2),s=r([(0,y.customElement)("skdx-multi-select-content","multi-select","content")],s);0&&(module.exports={SkdxMultiSelectContent});

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

@@ -1,65 +0,0 @@
-import { LitElement } from 'lit';
-import { type PositionOptions } from '../internal/positioning.cjs';
-/**
- * `<skdx-multi-select-content>` — the popup shell for the closest ancestor `<skdx-multi-select>`, positioned relative to `<skdx-multi-select-input>` via `@floating-ui/dom`. `data-state` and the `data-side`/`data-align` placement hooks (seeded from the configured `side`/`align`, then rewritten by `positionFloating` with floating-ui's resolved placement) are set directly on this host element, not inside shadow DOM, so light-DOM `querySelectorAll` is how descendant options are found.
- *
- * Carries **no ARIA role**: the listbox is `<skdx-multi-select-list>`, 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.
- *
- * `positionFloating` also writes the measurement custom properties `--skdx-multi-select-available-width` / `-available-height` / `-trigger-width` / `-transform-origin` onto this element on every reposition — so a panel whose height must stop at the viewport edge is CSS, not JavaScript.
- *
- * Closes on Escape or on an outside interaction, each announced first as `interact-outside` and then as the specific event, so one `preventDefault()` vetoes either path. Escape is owned here rather than by `<skdx-multi-select-input>`'s keydown handler: the document-level listener runs in the capture phase, i.e. *before* the input's, which is the only ordering in which a listener can still veto the close.
- *
- * @fires escape-key-down - Escape was pressed while open. Preventable.
- * @fires pointer-down-outside - A pointer-down landed outside the multi select while open. Preventable.
- * @fires focus-outside - Focus moved outside the multi select while open (detail: the original focusin). Preventable.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
- */
-export declare class SkdxMultiSelectContent extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /** Preferred side of the input to render on. @default 'bottom' */
-    side: PositionOptions['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. */
-    align: PositionOptions['align'];
-    /** Distance in pixels between the popup and the input along `side`. @default 4 */
-    sideOffset: number;
-    /** Offset in pixels along `align`, shifting the popup perpendicular to `side`. @default 0 */
-    alignOffset: number;
-    /** Flips to the opposite side when there isn't room to render on the preferred side. @default true — switch it off by value (`avoid-collisions="false"`), not by absence. */
-    avoidCollisions: boolean;
-    /**
-     * Minimum distance in pixels kept from the collision boundary. The `collision-padding` attribute sets a single number for
-     * every side; the per-side `{ top, right, bottom, left }` form is
-     * property-only, since an attribute cannot carry an object.
-     * @default 8
-     */
-    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
-    /**
-     * Element (or elements) collisions are measured against, instead of the popup's clipping ancestors.
-     * @default undefined — the popup's clipping ancestors.
-     */
-    collisionBoundary?: PositionOptions['collisionBoundary'];
-    private root;
-    private readonly onRootUpdate;
-    private cleanupPosition?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private readonly preventFocusSteal;
-    /**
-     * The layer is the whole control, not just this panel: real focus lives on
-     * `<skdx-multi-select-input>`, and the tag strip with its remove buttons sits
-     * beside it — everything inside the root is part of the field, not "outside".
-     */
-    private isInside;
-    private readonly handleDocumentKeyDown;
-    private readonly handleOutsidePointerDown;
-    private readonly handleOutsideFocus;
-    private syncHostState;
-    private activate;
-    private deactivate;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-content': SkdxMultiSelectContent;
-    }
-}

package/dist/multi-select/MultiSelectContent.d.ts

@@ -1,65 +0,0 @@
-import { LitElement } from 'lit';
-import { type PositionOptions } from '../internal/positioning.js';
-/**
- * `<skdx-multi-select-content>` — the popup shell for the closest ancestor `<skdx-multi-select>`, positioned relative to `<skdx-multi-select-input>` via `@floating-ui/dom`. `data-state` and the `data-side`/`data-align` placement hooks (seeded from the configured `side`/`align`, then rewritten by `positionFloating` with floating-ui's resolved placement) are set directly on this host element, not inside shadow DOM, so light-DOM `querySelectorAll` is how descendant options are found.
- *
- * Carries **no ARIA role**: the listbox is `<skdx-multi-select-list>`, 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.
- *
- * `positionFloating` also writes the measurement custom properties `--skdx-multi-select-available-width` / `-available-height` / `-trigger-width` / `-transform-origin` onto this element on every reposition — so a panel whose height must stop at the viewport edge is CSS, not JavaScript.
- *
- * Closes on Escape or on an outside interaction, each announced first as `interact-outside` and then as the specific event, so one `preventDefault()` vetoes either path. Escape is owned here rather than by `<skdx-multi-select-input>`'s keydown handler: the document-level listener runs in the capture phase, i.e. *before* the input's, which is the only ordering in which a listener can still veto the close.
- *
- * @fires escape-key-down - Escape was pressed while open. Preventable.
- * @fires pointer-down-outside - A pointer-down landed outside the multi select while open. Preventable.
- * @fires focus-outside - Focus moved outside the multi select while open (detail: the original focusin). Preventable.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
- */
-export declare class SkdxMultiSelectContent extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /** Preferred side of the input to render on. @default 'bottom' */
-    side: PositionOptions['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. */
-    align: PositionOptions['align'];
-    /** Distance in pixels between the popup and the input along `side`. @default 4 */
-    sideOffset: number;
-    /** Offset in pixels along `align`, shifting the popup perpendicular to `side`. @default 0 */
-    alignOffset: number;
-    /** Flips to the opposite side when there isn't room to render on the preferred side. @default true — switch it off by value (`avoid-collisions="false"`), not by absence. */
-    avoidCollisions: boolean;
-    /**
-     * Minimum distance in pixels kept from the collision boundary. The `collision-padding` attribute sets a single number for
-     * every side; the per-side `{ top, right, bottom, left }` form is
-     * property-only, since an attribute cannot carry an object.
-     * @default 8
-     */
-    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
-    /**
-     * Element (or elements) collisions are measured against, instead of the popup's clipping ancestors.
-     * @default undefined — the popup's clipping ancestors.
-     */
-    collisionBoundary?: PositionOptions['collisionBoundary'];
-    private root;
-    private readonly onRootUpdate;
-    private cleanupPosition?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private readonly preventFocusSteal;
-    /**
-     * The layer is the whole control, not just this panel: real focus lives on
-     * `<skdx-multi-select-input>`, and the tag strip with its remove buttons sits
-     * beside it — everything inside the root is part of the field, not "outside".
-     */
-    private isInside;
-    private readonly handleDocumentKeyDown;
-    private readonly handleOutsidePointerDown;
-    private readonly handleOutsideFocus;
-    private syncHostState;
-    private activate;
-    private deactivate;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-content': SkdxMultiSelectContent;
-    }
-}

package/dist/multi-select/MultiSelectContent.js

@@ -1,5 +0,0 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(a,r,t,i)=>{for(var s=i>1?void 0:i?p(r,t):r,d=a.length-1,l;d>=0;d--)(l=a[d])&&(s=(i?l(r,t,s):l(s))||s);return i&&s&&c(r,t,s),s};import{css as f,html as v,LitElement as m}from"lit";import{property as n}from"lit/decorators.js";import{closestThroughPortal as y}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";import{dispatchEscapeKeyDown as E,dispatchOutside as u,focusOutsideTarget as g}from"../internal/dismiss.js";import{optOutBoolean as O,positionFloating as P}from"../internal/positioning.js";import{hiddenHostStyles as w}from"../internal/styles.js";import{MULTI_SELECT_UPDATE_EVENT as h}from"./MultiSelect.js";var e=class extends m{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.preventFocusSteal=t=>t.preventDefault();this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),E(this,t)&&this.root.setOpen(!1))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||u(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let i=g(t);i===null||this.isInside(i)||u(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=y(this,"skdx-multi-select"),this.root&&(this.root.contentEl=this),this.root?.addEventListener(h,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(h,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("mousedown",this.preventFocusSteal),document.removeEventListener("keydown",this.handleDocumentKeyDown,!0),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),this.cleanupPosition=void 0,super.disconnectedCallback()}isInside(t){return t?this.contains(t)||this.root?.contains(t)===!0:!1}syncHostState(){let t=this.root?.open??!1,i=this.root?.loading??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),i?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),i?this.setAttribute("data-loading",""):this.removeAttribute("data-loading"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){this.cleanupPosition||!this.root?.inputHost||(this.cleanupPosition=P(this.root.inputHost,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"multi-select"}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return v`<slot></slot>`}};e.styles=[w,f`
-      :host {
-        display: block;
-      }
-    `],o([n({type:String})],e.prototype,"side",2),o([n({type:String})],e.prototype,"align",2),o([n({type:Number,attribute:"side-offset"})],e.prototype,"sideOffset",2),o([n({type:Number,attribute:"align-offset"})],e.prototype,"alignOffset",2),o([n({converter:O,attribute:"avoid-collisions"})],e.prototype,"avoidCollisions",2),o([n({type:Number,attribute:"collision-padding"})],e.prototype,"collisionPadding",2),o([n({attribute:!1})],e.prototype,"collisionBoundary",2),e=o([b("skdx-multi-select-content","multi-select","content")],e);export{e as SkdxMultiSelectContent};

package/dist/multi-select/MultiSelectEmpty.cjs

@@ -1,5 +0,0 @@
-"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var k=(o,t)=>{for(var r in t)a(o,r,{get:t[r],enumerable:!0})},E=(o,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!b.call(o,e)&&e!==r&&a(o,e,{get:()=>t[e],enumerable:!(s=m(t,e))||s.enumerable});return o};var T=o=>E(a({},"__esModule",{value:!0}),o),p=(o,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,n=o.length-1,d;n>=0;n--)(d=o[n])&&(e=(s?d(t,r,e):d(e))||e);return s&&e&&a(t,r,e),e};var f={};k(f,{SkdxMultiSelectEmpty:()=>l});module.exports=T(f);var i=require("lit"),h=require("../internal/closest.cjs"),u=require("../internal/define.cjs"),c=require("./MultiSelect.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=(0,h.closestThroughPortal)(this,"skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.setAttribute("role","presentation"),this.setAttribute("aria-live","polite")}disconnectedCallback(){this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),super.disconnectedCallback()}render(){return!this.root||this.root.itemCount>0?i.html``:i.html`<slot></slot>`}};l.styles=i.css`
-    :host {
-      display: block;
-    }
-  `,l=p([(0,u.customElement)("skdx-multi-select-empty","multi-select","empty")],l);0&&(module.exports={SkdxMultiSelectEmpty});

package/dist/multi-select/MultiSelectEmpty.d.cts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Fallback shown in place of the option list when no `<skdx-multi-select-item>`s are currently rendered — because the consumer's filtered results are empty, or because the root's `filter` rejected every item. Renders outside `role="listbox"` so the message is never announced as an option, and `aria-live="polite"` so one appearing while the user types is actually read. Renders nothing while an item is registered.
- */
-export declare class SkdxMultiSelectEmpty extends LitElement {
-    static styles: import("lit").CSSResult;
-    private root;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-empty': SkdxMultiSelectEmpty;
-    }
-}

package/dist/multi-select/MultiSelectEmpty.d.ts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Fallback shown in place of the option list when no `<skdx-multi-select-item>`s are currently rendered — because the consumer's filtered results are empty, or because the root's `filter` rejected every item. Renders outside `role="listbox"` so the message is never announced as an option, and `aria-live="polite"` so one appearing while the user types is actually read. Renders nothing while an item is registered.
- */
-export declare class SkdxMultiSelectEmpty extends LitElement {
-    static styles: import("lit").CSSResult;
-    private root;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-empty': SkdxMultiSelectEmpty;
-    }
-}

package/dist/multi-select/MultiSelectEmpty.js

@@ -1,5 +0,0 @@
-var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(s,e,i,r)=>{for(var t=r>1?void 0:r?p(e,i):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(r?a(e,i,t):a(t))||t);return r&&t&&m(e,i,t),t};import{css as h,html as d,LitElement as u}from"lit";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";import{MULTI_SELECT_UPDATE_EVENT as c}from"./MultiSelect.js";var o=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=v(this,"skdx-multi-select"),this.root?.addEventListener(c,this.onRootUpdate),this.setAttribute("role","presentation"),this.setAttribute("aria-live","polite")}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}render(){return!this.root||this.root.itemCount>0?d``:d`<slot></slot>`}};o.styles=h`
-    :host {
-      display: block;
-    }
-  `,o=n([b("skdx-multi-select-empty","multi-select","empty")],o);export{o as SkdxMultiSelectEmpty};

package/dist/multi-select/MultiSelectGroup.cjs

@@ -1,5 +0,0 @@
-"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(s,e)=>{for(var t in e)o(s,t,{get:e[t],enumerable:!0})},I=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of h(e))!g.call(s,l)&&l!==t&&o(s,l,{get:()=>e[l],enumerable:!(r=c(e,l))||r.enumerable});return s};var v=s=>I(o({},"__esModule",{value:!0}),s),m=(s,e,t,r)=>{for(var l=r>1?void 0:r?c(e,t):e,d=s.length-1,b;d>=0;d--)(b=s[d])&&(l=(r?b(e,t,l):b(l))||l);return r&&l&&o(e,t,l),l};var f={};p(f,{SkdxMultiSelectGroup:()=>i});module.exports=v(f);var a=require("lit"),n=require("../internal/define.cjs"),u=require("../internal/ids.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.labelId=(0,u.nextId)("multi-select-group-label")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group");let t=this.querySelector("skdx-multi-select-group-label")?.id;t&&(this.labelId=t),this.setAttribute("aria-labelledby",this.labelId)}getLabelId(){return this.labelId}setLabelId(t){this.labelId=t,this.setAttribute("aria-labelledby",this.labelId)}render(){return a.html`<slot></slot>`}};i.styles=a.css`
-    :host {
-      display: block;
-    }
-  `,i=m([(0,n.customElement)("skdx-multi-select-group","multi-select","group")],i);0&&(module.exports={SkdxMultiSelectGroup});

package/dist/multi-select/MultiSelectGroup.d.cts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Groups related `<skdx-multi-select-item>`s together under a `<skdx-multi-select-group-label>`. Renders `role="group"` on its host, whose `aria-labelledby` names that label.
- *
- * The wiring is automatic, and a label is therefore required: `role="group"` takes no accessible name from its content.
- */
-export declare class SkdxMultiSelectGroup extends LitElement {
-    static styles: import("lit").CSSResult;
-    private labelId;
-    connectedCallback(): void;
-    /** The id this group's `aria-labelledby` names, claimed by its label part. */
-    getLabelId(): string;
-    /** @internal Lets the label part republish an author-assigned id. */
-    setLabelId(id: string): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-group': SkdxMultiSelectGroup;
-    }
-}

package/dist/multi-select/MultiSelectGroup.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Groups related `<skdx-multi-select-item>`s together under a `<skdx-multi-select-group-label>`. Renders `role="group"` on its host, whose `aria-labelledby` names that label.
- *
- * The wiring is automatic, and a label is therefore required: `role="group"` takes no accessible name from its content.
- */
-export declare class SkdxMultiSelectGroup extends LitElement {
-    static styles: import("lit").CSSResult;
-    private labelId;
-    connectedCallback(): void;
-    /** The id this group's `aria-labelledby` names, claimed by its label part. */
-    getLabelId(): string;
-    /** @internal Lets the label part republish an author-assigned id. */
-    setLabelId(id: string): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-group': SkdxMultiSelectGroup;
-    }
-}

package/dist/multi-select/MultiSelectGroup.js

@@ -1,5 +0,0 @@
-var b=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(i,l,e,r)=>{for(var t=r>1?void 0:r?c(l,e):l,a=i.length-1,o;a>=0;a--)(o=i[a])&&(t=(r?o(l,e,t):o(t))||t);return r&&t&&b(l,e,t),t};import{css as m,html as n,LitElement as u}from"lit";import{customElement as h}from"../internal/define.js";import{nextId as g}from"../internal/ids.js";var s=class extends u{constructor(){super(...arguments);this.labelId=g("multi-select-group-label")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group");let e=this.querySelector("skdx-multi-select-group-label")?.id;e&&(this.labelId=e),this.setAttribute("aria-labelledby",this.labelId)}getLabelId(){return this.labelId}setLabelId(e){this.labelId=e,this.setAttribute("aria-labelledby",this.labelId)}render(){return n`<slot></slot>`}};s.styles=m`
-    :host {
-      display: block;
-    }
-  `,s=d([h("skdx-multi-select-group","multi-select","group")],s);export{s as SkdxMultiSelectGroup};

package/dist/multi-select/MultiSelectGroupLabel.cjs

@@ -1,5 +0,0 @@
-"use strict";var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(l,e)=>{for(var r in e)p(l,r,{get:e[r],enumerable:!0})},b=(l,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of n(e))!h.call(l,t)&&t!==r&&p(l,t,{get:()=>e[t],enumerable:!(o=m(e,t))||o.enumerable});return l};var k=l=>b(p({},"__esModule",{value:!0}),l),a=(l,e,r,o)=>{for(var t=o>1?void 0:o?m(e,r):e,u=l.length-1,c;u>=0;u--)(c=l[u])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&p(e,r,t),t};var v={};f(v,{SkdxMultiSelectGroupLabel:()=>s});module.exports=k(v);var i=require("lit"),d=require("../internal/closest.cjs"),g=require("../internal/define.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.group=null}connectedCallback(){super.connectedCallback(),this.group=(0,d.closestThroughPortal)(this,"skdx-multi-select-group"),this.group&&(this.id?this.group.setLabelId(this.id):this.id=this.group.getLabelId())}render(){return i.html`<slot></slot>`}};s.styles=i.css`
-    :host {
-      display: block;
-    }
-  `,s=a([(0,g.customElement)("skdx-multi-select-group-label","multi-select","group-label")],s);0&&(module.exports={SkdxMultiSelectGroupLabel});

package/dist/multi-select/MultiSelectGroupLabel.d.cts

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Heading for a `<skdx-multi-select-group>`. Carries the id its group points `aria-labelledby` at, so the group is named without the label itself becoming an option.
- */
-export declare class SkdxMultiSelectGroupLabel extends LitElement {
-    static styles: import("lit").CSSResult;
-    private group;
-    connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-group-label': SkdxMultiSelectGroupLabel;
-    }
-}

package/dist/multi-select/MultiSelectGroupLabel.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * Heading for a `<skdx-multi-select-group>`. Carries the id its group points `aria-labelledby` at, so the group is named without the label itself becoming an option.
- */
-export declare class SkdxMultiSelectGroupLabel extends LitElement {
-    static styles: import("lit").CSSResult;
-    private group;
-    connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-group-label': SkdxMultiSelectGroupLabel;
-    }
-}

package/dist/multi-select/MultiSelectGroupLabel.js

@@ -1,5 +0,0 @@
-var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=(o,t,s,r)=>{for(var e=r>1?void 0:r?m(t,s):t,i=o.length-1,p;i>=0;i--)(p=o[i])&&(e=(r?p(t,s,e):p(e))||e);return r&&e&&c(t,s,e),e};import{css as a,html as d,LitElement as g}from"lit";import{closestThroughPortal as n}from"../internal/closest.js";import{customElement as h}from"../internal/define.js";var l=class extends g{constructor(){super(...arguments);this.group=null}connectedCallback(){super.connectedCallback(),this.group=n(this,"skdx-multi-select-group"),this.group&&(this.id?this.group.setLabelId(this.id):this.id=this.group.getLabelId())}render(){return d`<slot></slot>`}};l.styles=a`
-    :host {
-      display: block;
-    }
-  `,l=u([h("skdx-multi-select-group-label","multi-select","group-label")],l);export{l as SkdxMultiSelectGroupLabel};

package/dist/multi-select/MultiSelectInput.cjs

@@ -1,28 +0,0 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var b=(a,o)=>{for(var e in o)d(a,e,{get:o[e],enumerable:!0})},E=(a,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of g(o))!k.call(a,i)&&i!==e&&d(a,i,{get:()=>o[i],enumerable:!(t=h(o,i))||t.enumerable});return a};var $=a=>E(d({},"__esModule",{value:!0}),a),u=(a,o,e,t)=>{for(var i=t>1?void 0:t?h(o,e):o,n=a.length-1,l;n>=0;n--)(l=a[n])&&(i=(t?l(o,e,i):l(i))||i);return t&&i&&d(o,e,i),i};var I={};b(I,{SkdxMultiSelectInput:()=>s});module.exports=$(I);var r=require("lit"),f=require("lit/decorators.js"),y=require("../internal/aria-label.cjs"),p=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),c=require("./MultiSelect.cjs");var s=class extends r.LitElement{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleInput=e=>{let t=this.root;t&&(t.setInputValue(e.target.value),t.open||t.setOpen(!0))};this.handleBlur=()=>{this.root?.setOpen(!1)};this.handleKeyDown=e=>{let t=this.root;if(t)if(e.key==="ArrowDown")e.preventDefault(),t.open?e.shiftKey?this.extendSelection(1):this.moveActive(1):t.openWithHighlight("first");else if(e.key==="ArrowUp")e.preventDefault(),t.open?e.shiftKey?this.extendSelection(-1):this.moveActive(-1):t.openWithHighlight("last");else if((e.key==="Home"||e.key==="End")&&e.ctrlKey&&e.shiftKey){if(!t.open)return;e.preventDefault(),t.selectToEdge(e.key==="Home"?"first":"last")}else if((e.key==="Home"||e.key==="End")&&t.open){e.preventDefault();let i=this.options();this.activate(e.key==="Home"?i[0]:i[i.length-1])}else if(e.key===" "&&e.shiftKey&&t.open&&t.activeId!==null)e.preventDefault(),t.selectRange();else if(e.key==="Enter"){let i=t.activeId?t.getItem(t.activeId):void 0;if(!i)return;e.preventDefault(),t.toggle(i.value,"keyboard")}else if(e.key==="Escape")t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1));else if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){if(!t.open||!t.allowSelectAll)return;e.preventDefault(),t.selectAllOrClear()}else e.key==="Backspace"&&t.inputValue===""&&t.removeLast()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=(0,y.takeHostAriaLabel)(this),this.root=this.closest("skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.root&&(0,p.whenUpgraded)(this.root,()=>{this.root&&(this.root.inputHost=this)}),(0,m.installLightDomStyles)()}focus(e){this.querySelector("input")?.focus(e)}disconnectedCallback(){this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.root?.inputHost===this&&(this.root.inputHost=null),super.disconnectedCallback()}options(){return this.root?.visibleOptions()??[]}activate(e){return e?(this.root?.setActiveId(e.id),e.scrollIntoView?.({block:"nearest"}),e.id):null}moveActive(e){let t=this.root;if(!t)return null;let i=this.options();if(i.length===0)return null;let l=i.findIndex(v=>v.id===t.activeId)+e;return l<0&&(l=0),l>=i.length&&(l=i.length-1),this.activate(i[l])}extendSelection(e){let t=this.root;if(!t)return;let i=t.activeId,n=this.moveActive(e);if(n===null||n===i)return;let l=t.getItem(n);l&&t.toggle(l.value,"keyboard")}render(){let e=this.root,t=e?.open??!1;return r.html`
-      <input
-        part="input"
-        type="text"
-        role="combobox"
-        aria-label=${this.label??r.nothing}
-        placeholder=${this.placeholder}
-        .value=${e?.inputValue??""}
-        aria-expanded=${t}
-        aria-controls=${e?.listId??r.nothing}
-        aria-autocomplete="list"
-        aria-activedescendant=${e?.activeId??r.nothing}
-        aria-busy=${e?.loading?"true":r.nothing}
-        autocomplete="off"
-        ?disabled=${e?.disabled??!1}
-        ?readonly=${e?.readOnly??!1}
-        aria-invalid=${e?.invalid?"true":r.nothing}
-        aria-readonly=${e?.readOnly?"true":r.nothing}
-        data-invalid=${e?.invalid?"":r.nothing}
-        data-readonly=${e?.readOnly?"":r.nothing}
-        data-disabled=${e?.disabled?"":r.nothing}
-        data-loading=${e?.loading?"":r.nothing}
-        data-state=${t?"open":"closed"}
-        @input=${this.handleInput}
-        @blur=${this.handleBlur}
-        @keydown=${this.handleKeyDown}
-      />
-    `}};u([(0,f.property)({type:String})],s.prototype,"placeholder",2),s=u([(0,p.customElement)("skdx-multi-select-input","multi-select","input")],s);0&&(module.exports={SkdxMultiSelectInput});