@skdx/web-components 0.28.0 → 0.29.0

package/dist/select/Select.js

@@ -1,19 +1,19 @@
-var v=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=(r,o,e,t)=>{for(var n=t>1?void 0:t?g(o,e):o,a=r.length-1,p;a>=0;a--)(p=r[a])&&(n=(t?p(o,e,n):p(n))||n);return t&&n&&v(o,e,n),n};import{css as b,html as d,LitElement as y,nothing as u}from"lit";import{property as l}from"lit/decorators.js";import{hasAuthoredParts as O,hasGeneratedContent as E}from"../internal/authored.js";import{customElement as C}from"../internal/define.js";import{dispatchAutoFocus as I}from"../internal/dismiss.js";import{FormAssociated as V}from"../internal/form-associated.js";import{ensureId as A,nextId as L}from"../internal/ids.js";import{notifyOpenChangeComplete as _}from"../internal/open-change-complete.js";import{nextSelection as w,parseSelectionAttribute as M,selectedValueOf as h,selectionAttributeConverter as c,toSelectionValues as m}from"../internal/selection.js";import{hiddenHostStyles as T,resetNativeControl as q}from"../internal/styles.js";import{fillSelectAnatomy as x,refreshSelectAnatomyText as k,SELECT_ANATOMY_GENERATED as f,SELECT_RENDER_SLOTS as R}from"./SelectAnatomy.js";var J='[role="option"]:not([data-disabled])',B={fromAttribute:r=>r===null?void 0:r!=="false",toAttribute:r=>r===void 0?null:String(r)},i=class extends V(y){constructor(){super(...arguments);this._values=[];this._valueSet=!1;this.multiple=!1;this.deselectable=!1;this.open=!1;this.defaultOpen=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.invalid=!1;this.contentId=L("skdx-select-content");this.openIntent="selected";this.triggerEl=null;this.contentEl=null;this.activeId=null;this.optionLabels=new Map;this.hasUpdatedOnce=!1;this.fillAnatomy=()=>{if(O(this,f,R)){this._anatomyOptionsRef=void 0;return}this.options!==this._anatomyOptionsRef||!E(this,f)?(this._anatomyOptionsRef=this.options,x(this)):k(this)}}get value(){return this._values}set value(e){let t=m(e,{multiple:this.isMultiple,label:"Select value"}),n=this._values;this._valueSet=!0,this._values=t,this.requestUpdate("value",n)}get isMultiple(){return this.multiple||!this.hasUpdated&&this.hasAttribute("multiple")}get closesOnSelect(){return this.closeOnSelect??!this.multiple}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-select-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(){!this.hasUpdated&&!this._valueSet&&(this.value=m(this.defaultValue,{multiple:this.isMultiple,label:"Select defaultValue"}))}updated(e){let t=!this.hasUpdatedOnce;if(this.hasUpdatedOnce=!0,this.fillAnatomy(),(e.has("value")||e.has("multiple")||e.has("name"))&&this.setFormValue(this.formValue()),(e.has("value")||e.has("required")||e.has("multiple"))&&this.syncValidity(),e.has("open")&&!this.open&&(this.activeId=null),e.has("value")&&!t){let n=this.selectedValues;this.emit("value-change",{value:n,selectedValue:h(n)})}e.has("open")&&!t&&this.emit("open-change",this.open),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-select-internal-update")),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=_(()=>this.querySelector("skdx-select-content"),this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}formValue(){return this.multiple?this.multiFormValue(this.selectedValues):h(this.selectedValues)}syncValidity(){this.setValueMissing(this.required&&this.selectedValues.length===0,"Please select an item in the list.",this.triggerEl)}formResetCallback(){this.value=M(this.getAttribute("value"),{multiple:this.multiple,label:"Select value"})}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}setOpen(e){this.readOnly&&e||this.open!==e&&(this.open=e)}setActiveId(e){this.activeId!==e&&(this.activeId=e,this.dispatchEvent(new CustomEvent("skdx-select-internal-update")))}get valueId(){let e=this.querySelector("skdx-select-value");return e===null?null:A(e,"skdx-select","value")}get selectedValues(){return this.value}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){this.readOnly||(this.value=w(this.selectedValues,e,this.multiple,this.deselectable))}get collection(){return this.items?this.items.map(t=>({...t,label:this.getOptionLabel(t.value)})):Array.from(this.querySelectorAll("skdx-select-item")).map(t=>({value:t.value,label:this.getOptionLabel(t.value),disabled:t.disabled}))}registerOptionLabel(e,t){this.optionLabels.get(e)!==t&&(this.optionLabels.set(e,t),this.dispatchEvent(new CustomEvent("skdx-select-internal-update")))}getOptionLabel(e){return this.optionLabels.get(e)??this.items?.find(t=>t.value===e)?.label??e}focusTrigger(){this.contentEl&&!I(this.contentEl,"close-auto-focus")||this.triggerEl?.focus()}render(){let e=this.selectedValues,t=e.length>0?e:[""];return d`
+var S=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var s=(a,u,e,t)=>{for(var l=t>1?void 0:t?C(u,e):u,r=a.length-1,o;r>=0;r--)(o=a[r])&&(l=(t?o(u,e,l):o(l))||l);return t&&l&&S(u,e,l),l};import{css as E,html as v,LitElement as R,nothing as p}from"lit";import{property as n}from"lit/decorators.js";import{hasAuthoredParts as _,hasGeneratedContent as x}from"../internal/authored.js";import{customElement as L}from"../internal/define.js";import{derivedParts as d,threadAppearance as c}from"../internal/derive.js";import{dispatchAutoFocus as w}from"../internal/dismiss.js";import{emit as f}from"../internal/events.js";import{FormAssociated as T}from"../internal/form-associated.js";import{ensureId as M,nextId as q}from"../internal/ids.js";import{notifyOpenChangeComplete as F}from"../internal/open-change-complete.js";import{optOutBoolean as B}from"../internal/positioning.js";import{filterKeeps as k,sortByScore as $}from"../internal/scored-filter.js";import{nextSelection as z,parseSelectionAttribute as D,sameSelection as N,selectedValueOf as y,toSelectionValues as g}from"../internal/selection.js";import{selectionAttributeConverter as b}from"../internal/selection-attribute.js";import{hiddenHostStyles as U,resetNativeControl as H}from"../internal/styles.js";import{announce as P}from"../utils/live-announcer.js";import{SELECT_FAMILY as m}from"./family.js";import{fillSelectAnatomy as G,refreshSelectAnatomyText as W,SELECT_ANATOMY_GENERATED as V,SELECT_RENDER_SLOTS as Y,syncSelectTags as I}from"./SelectAnatomy.js";var O='[role="option"]:not([data-disabled]):not([data-skdx-select-all])';function K(a){return a===0?"none selected":`${a} selected`}var j={fromAttribute:a=>a===null?void 0:a!=="false",toAttribute:a=>a===void 0?null:String(a)},i=class extends T(R){constructor(){super(...arguments);this._values=[];this._previousValues=[];this._valueSet=!1;this.multiple=!1;this.deselectable=!1;this.open=!1;this.defaultOpen=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.invalid=!1;this.filterable=!1;this.inputValue="";this.defaultInputValue="";this.allowSelectAll=!0;this.loading=!1;this.clearable=!1;this.getSelectionLabel=K;this.contentId=q("skdx-select-content");this.openIntent="selected";this.triggerEl=null;this.contentEl=null;this.activeId=null;this.optionLabels=new Map;this.hasUpdatedOnce=!1;this.fillAnatomy=()=>{if(_(this,V,Y)){this._anatomyOptionsRef=void 0;return}let e=`${this.multiple}|${this.filterable}|${this.clearable}|${this.allowSelectAll}`;this.options!==this._anatomyOptionsRef||e!==this._anatomyShape||!x(this,V)?(this._anatomyOptionsRef=this.options,this._anatomyShape=e,G(this),I(this)):W(this)};this.rangeAnchor=null;this.itemRegistry=new Map}get value(){return this._values}set value(e){let t=g(e,{multiple:this.isMultiple,label:"Select value"}),l=this._values;if(this._valueSet&&N(t,l)){this._pendingReason=void 0;return}this._valueSet=!0,this._values=t,this._previousValues=l,this.requestUpdate("value",l)}get isMultiple(){return this.multiple||!this.hasUpdated&&this.hasAttribute("multiple")}get closesOnSelect(){return this.closeOnSelect??!this.multiple}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0),this.hasAttribute("input-value")||this.inputValue||(this.inputValue=this.defaultInputValue),this.initialInputValue??(this.initialInputValue=this.inputValue);let e=this.querySelector("skdx-select-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(){!this.hasUpdated&&!this._valueSet&&(this.value=g(this.defaultValue,{multiple:this.isMultiple,label:"Select defaultValue"}))}updated(e){let t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),e.has("value")&&I(this),this.syncFormAndValidity(e),e.has("open")&&!this.open&&(this.activeId=null),e.has("value")&&!t&&this.announceAndEmitValue(),e.has("open")&&!t&&this.emit("open-change",this.open),e.size>0&&m.notify(this),e.has("open")&&!t&&this.watchOpenChangeComplete(),c(this,{shape:this.shape,size:this.size},[...d(this,"skdx-select-trigger")]),c(this,{matchWidth:this.matchWidth},[...d(this,"skdx-select-content")]),c(this,{density:this.density},[...d(this,"skdx-select-tag-list")]),c(this,{shape:this.shape,size:this.size,status:this.status},[...d(this,"skdx-select-tag")])}announceAndEmitValue(){let e=this.selectedValues;this.multiple&&!this.loading&&P(this.getSelectionLabel(e.length));let t=this._pendingReason??"programmatic";this._pendingReason=void 0,this.emit("value-change",{value:e,previousValue:this._previousValues,reason:t,selectedValue:y(e)})}watchOpenChangeComplete(){this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=F(()=>this.querySelector("skdx-select-content"),this.open,e=>f(this,"open-change-complete",e))}syncFormAndValidity(e){(e.has("value")||e.has("multiple")||e.has("name"))&&this.setFormValue(this.formValue()),(e.has("value")||e.has("required")||e.has("multiple"))&&this.syncValidity()}formValue(){return this.multiple?this.multiFormValue(this.selectedValues):y(this.selectedValues)}syncValidity(){this.setValueMissing(this.required&&this.selectedValues.length===0,"Please select an item in the list.",this.triggerEl)}formResetCallback(){this.rangeAnchor=null,this.inputValue=this.initialInputValue??this.defaultInputValue;let e=this.getAttribute("value");this.value=e===null?g(this.defaultValue,{multiple:this.multiple,label:"Select defaultValue"}):D(e,{multiple:this.multiple,label:"Select value"})}emit(e,t){f(this,e,t)}setOpen(e){this.readOnly&&e||this.open!==e&&(this.open=e)}setActiveId(e){this.activeId!==e&&(this.activeId=e,m.notify(this))}get valueId(){let e=this.querySelector("skdx-select-value");return e===null?null:M(e,"skdx-select","value")}get selectedValues(){return this.value}isSelected(e){return this.selectedValues.includes(e)}selectItem(e,t="programmatic"){if(!this.readOnly){if(this.multiple){if(this.atMax&&!this.isSelected(e))return;this.rangeAnchor=e}this.applySelection(z(this.selectedValues,e,this.multiple,this.deselectable),t)}}get atMax(){return this.multiple&&this.maxSelected!==void 0&&this.selectedValues.length>=this.maxSelected}get locked(){return this.disabled||this.readOnly}applySelection(e,t){this._pendingReason=t,this.value=e,this.setInputValue("")}setInputValue(e){this.inputValue!==e&&(this.inputValue=e,f(this,"input-value-change",e),m.notify(this))}deselect(e){this.locked||!this.isSelected(e)||this.applySelection(this.selectedValues.filter(t=>t!==e),"pointer")}clearSelection(){this.locked||this.applySelection([],"pointer")}removeLast(){this.locked||this.selectedValues.length===0||this.applySelection(this.selectedValues.slice(0,-1),"keyboard")}sweepSelect(e){let t=[...this.selectedValues];for(let l of e)if(!t.includes(l)){if(this.maxSelected!==void 0&&t.length>=this.maxSelected)break;t.push(l)}this.applySelection(t,"keyboard")}selectRange(){if(this.locked||!this.multiple)return;let e=this.visibleOptions(),t=e.findIndex(h=>h.id===this.activeId);if(t===-1)return;let l=e.findIndex(h=>h.dataset.value===this.rangeAnchor),r=l===-1?t:l,[o,A]=r<=t?[r,t]:[t,r];this.sweepSelect(e.slice(o,A+1).map(h=>h.dataset.value??""))}selectToEdge(e){if(this.locked||!this.multiple)return;let t=this.visibleOptions(),l=t.findIndex(o=>o.id===this.activeId);if(l===-1)return;let r=e==="first"?t.slice(0,l+1):t.slice(l);this.sweepSelect(r.map(o=>o.dataset.value??""))}selectAllOrClear(){if(this.locked||!this.multiple)return;let e=this.visibleOptions().map(t=>t.dataset.value??"");if(this.allSelected){this.applySelection(this.selectedValues.filter(t=>!e.includes(t)),"keyboard");return}this.sweepSelect(e)}get allSelected(){let e=this.visibleOptions().map(t=>t.dataset.value??"");return e.length>0&&e.every(t=>this.isSelected(t))}get itemCount(){return this.itemRegistry.size}registerItem(e,t){this.itemRegistry.set(e,t)}unregisterItem(e){this.itemRegistry.delete(e),this.activeId===e&&this.setActiveId(this.visibleOptions()[0]?.id??null)}getItem(e){return this.itemRegistry.get(e)}matchesFilter(e){return!this.filterable||this.filter===void 0?!0:k(this.filter(e,this.inputValue))}visibleOptions(){let e=this.contentEl??this,t=this.filterable?this.filter:void 0;return t===void 0?Array.from(e.querySelectorAll(O)):$(e,O,l=>{let r=this.itemRegistry.get(l);if(!r)return null;let o=t(r.text,this.inputValue);return typeof o=="number"?o:null})}textFor(e){for(let t of this.itemRegistry.values())if(t.value===e)return t.text}get collection(){return this.items?this.items.map(t=>({...t,label:this.getOptionLabel(t.value)})):Array.from(this.querySelectorAll("skdx-select-item")).map(t=>({value:t.value,label:this.getOptionLabel(t.value),disabled:t.disabled}))}registerOptionLabel(e,t){this.optionLabels.get(e)!==t&&(this.optionLabels.set(e,t),m.notify(this))}getOptionLabel(e){return this.optionLabels.get(e)??this.items?.find(t=>t.value===e)?.label??e}focusTrigger(){this.contentEl&&!w(this.contentEl,"close-auto-focus")||this.triggerEl?.focus()}render(){let e=this.selectedValues,t=e.length>0?e:[""];return v`
       <slot @slotchange=${this.fillAnatomy}></slot>
-      ${this.name?t.map((n,a)=>d`<input
+      ${this.name?t.map((l,r)=>v`<input
                   type="text"
                   aria-hidden="true"
                   tabindex="-1"
                   .name=${this.name??""}
-                  .value=${n}
+                  .value=${l}
                   ?required=${this.required}
                   ?disabled=${this.disabled}
-                  form=${this.formId??u}
-                  autocomplete=${a===0?this.autoComplete??u:u}
+                  form=${this.formId??p}
+                  autocomplete=${r===0?this.autoComplete??p:p}
                   style="position: absolute; pointer-events: none; opacity: 0; margin: 0; width: 1px; height: 1px"
-                />`):u}
-    `}};i.styles=[q,T,b`
+                />`):p}
+    `}};i.styles=[H,U,E`
       :host {
         display: contents;
       }
-    `],s([l({converter:c,noAccessor:!0})],i.prototype,"value",1),s([l({converter:c,attribute:"default-value"})],i.prototype,"defaultValue",2),s([l({type:Boolean,reflect:!0})],i.prototype,"multiple",2),s([l({type:Boolean,reflect:!0})],i.prototype,"deselectable",2),s([l({attribute:"close-on-select",converter:B})],i.prototype,"closeOnSelect",2),s([l({attribute:!1})],i.prototype,"items",2),s([l({attribute:!1})],i.prototype,"options",2),s([l({type:String})],i.prototype,"placeholder",2),s([l({type:Boolean,reflect:!0})],i.prototype,"open",2),s([l({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),s([l({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([l({type:Boolean,attribute:"read-only",reflect:!0})],i.prototype,"readOnly",2),s([l({type:Boolean,reflect:!0})],i.prototype,"required",2),s([l({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([l({type:String})],i.prototype,"name",2),s([l({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),s([l({type:String,attribute:"autocomplete"})],i.prototype,"autoComplete",2),s([l({attribute:"required-message"})],i.prototype,"requiredMessage",2),i=s([C("skdx-select")],i);export{J as OPTION_SELECTOR,i as SkdxSelect};
+    `],s([n({converter:b,noAccessor:!0})],i.prototype,"value",1),s([n({converter:b,attribute:"default-value"})],i.prototype,"defaultValue",2),s([n({type:Boolean,reflect:!0})],i.prototype,"multiple",2),s([n({type:Boolean,reflect:!0})],i.prototype,"deselectable",2),s([n({attribute:"close-on-select",converter:j})],i.prototype,"closeOnSelect",2),s([n({attribute:!1})],i.prototype,"items",2),s([n({attribute:!1})],i.prototype,"options",2),s([n({type:String})],i.prototype,"placeholder",2),s([n({type:Boolean,reflect:!0})],i.prototype,"open",2),s([n({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),s([n({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([n({type:Boolean,attribute:"read-only",reflect:!0})],i.prototype,"readOnly",2),s([n({type:Boolean,reflect:!0})],i.prototype,"required",2),s([n({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([n({type:String})],i.prototype,"name",2),s([n({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),s([n({type:String,attribute:"autocomplete"})],i.prototype,"autoComplete",2),s([n({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([n({type:String,attribute:"data-shape"})],i.prototype,"shape",2),s([n({type:String,attribute:"data-size"})],i.prototype,"size",2),s([n({type:Boolean,attribute:"data-match-width"})],i.prototype,"matchWidth",2),s([n({type:Boolean,reflect:!0})],i.prototype,"filterable",2),s([n({type:String,attribute:"input-value"})],i.prototype,"inputValue",2),s([n({type:String,attribute:"default-input-value"})],i.prototype,"defaultInputValue",2),s([n({attribute:!1})],i.prototype,"filter",2),s([n({type:Number,attribute:"max-selected"})],i.prototype,"maxSelected",2),s([n({converter:B,attribute:"allow-select-all"})],i.prototype,"allowSelectAll",2),s([n({type:Boolean,reflect:!0})],i.prototype,"loading",2),s([n({type:Boolean,reflect:!0})],i.prototype,"clearable",2),s([n({attribute:!1})],i.prototype,"getSelectionLabel",2),s([n({type:String,attribute:"data-status"})],i.prototype,"status",2),s([n({type:String,attribute:"data-density"})],i.prototype,"density",2),i=s([L("skdx-select")],i);export{O as OPTION_SELECTOR,i as SkdxSelect,K as defaultGetSelectionLabel};

package/dist/select/SelectAll.cjs

@@ -0,0 +1,8 @@
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(l,t)=>{for(var s in t)a(l,s,{get:t[s],enumerable:!0})},y=(l,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!k.call(l,e)&&e!==s&&a(l,e,{get:()=>t[e],enumerable:!(o=h(t,e))||o.enumerable});return l};var b=l=>y(a({},"__esModule",{value:!0}),l),p=(l,t,s,o)=>{for(var e=o>1?void 0:o?h(t,s):t,d=l.length-1,c;d>=0;d--)(c=l[d])&&(e=(o?c(t,s,e):c(e))||e);return o&&e&&a(t,s,e),e};var C={};f(C,{SkdxSelectAll:()=>i});module.exports=b(C);var r=require("lit"),m=require("../internal/closest.cjs"),v=require("../internal/define.cjs"),n=require("./family.cjs");var i=class extends r.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncState();this.handleClick=()=>{this.hidden||this.root?.selectAllOrClear()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.setAttribute("data-skdx-select-all",""),this.root=(0,m.closestThroughPortal)(this,n.SELECT_FAMILY.selector),this.root?.addEventListener(n.SELECT_FAMILY.event,this.onRootUpdate),this.addEventListener("click",this.handleClick),this.syncState()}disconnectedCallback(){this.root?.removeEventListener(n.SELECT_FAMILY.event,this.onRootUpdate),this.removeEventListener("click",this.handleClick),super.disconnectedCallback()}updated(){this.syncState()}syncState(){let s=this.root,o=(s?.multiple??!1)&&(s?.allowSelectAll??!1);this.hidden=!o;let e=o&&s!==null&&s.allSelected;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"checked":"unchecked")}render(){return r.html`<slot></slot>`}};i.styles=r.css`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,i=p([(0,v.customElement)("skdx-select-all","select","select-all")],i);0&&(module.exports={SkdxSelectAll});

package/dist/select/SelectAll.d.cts

@@ -0,0 +1,25 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Row at the head of the listbox toggling every enabled option at once while the root is `multiple` and `allowSelectAll`, reporting through `aria-selected` whether the whole enabled set is currently selected.
+ *
+ * @example
+ * ```html
+ * <skdx-select-all>Select all</skdx-select-all>
+ * ```
+ */
+export declare class SkdxSelectAll extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncState;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-all': SkdxSelectAll;
+    }
+}

package/dist/select/SelectAll.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Row at the head of the listbox toggling every enabled option at once while the root is `multiple` and `allowSelectAll`, reporting through `aria-selected` whether the whole enabled set is currently selected.
+ *
+ * @example
+ * ```html
+ * <skdx-select-all>Select all</skdx-select-all>
+ * ```
+ */
+export declare class SkdxSelectAll extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncState;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-all': SkdxSelectAll;
+    }
+}

package/dist/select/SelectAll.js

@@ -0,0 +1,8 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(i,l,t,s)=>{for(var e=s>1?void 0:s?h(l,t):l,r=i.length-1,a;r>=0;r--)(a=i[r])&&(e=(s?a(l,t,e):a(e))||e);return s&&e&&c(l,t,e),e};import{css as p,html as m,LitElement as v}from"lit";import{closestThroughPortal as u}from"../internal/closest.js";import{customElement as k}from"../internal/define.js";import{SELECT_FAMILY as n}from"./family.js";var o=class extends v{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncState();this.handleClick=()=>{this.hidden||this.root?.selectAllOrClear()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.setAttribute("data-skdx-select-all",""),this.root=u(this,n.selector),this.root?.addEventListener(n.event,this.onRootUpdate),this.addEventListener("click",this.handleClick),this.syncState()}disconnectedCallback(){this.root?.removeEventListener(n.event,this.onRootUpdate),this.removeEventListener("click",this.handleClick),super.disconnectedCallback()}updated(){this.syncState()}syncState(){let t=this.root,s=(t?.multiple??!1)&&(t?.allowSelectAll??!1);this.hidden=!s;let e=s&&t!==null&&t.allSelected;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"checked":"unchecked")}render(){return m`<slot></slot>`}};o.styles=p`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,o=d([k("skdx-select-all","select","select-all")],o);export{o as SkdxSelectAll};

package/dist/select/SelectAnatomy.cjs

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var n in t)p(e,n,{get:t[n],enumerable:!0})},S=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!u.call(e,o)&&o!==n&&p(e,o,{get:()=>t[o],enumerable:!(r=a(t,o))||r.enumerable});return e};var E=e=>S(p({},"__esModule",{value:!0}),e);var A={};x(A,{SELECT_ANATOMY_GENERATED:()=>s,SELECT_RENDER_SLOTS:()=>f,fillSelectAnatomy:()=>k,refreshSelectAnatomyText:()=>v});module.exports=E(A);var i=require("../internal/host-attributes.cjs"),l=require("../internal/options.cjs"),h=require("./SelectTrigger.cjs"),b=require("./SelectPortal.cjs"),C=require("./SelectValue.cjs"),T=require("./SelectIcon.cjs"),y=require("./SelectContent.cjs"),L=require("./SelectViewport.cjs"),R=require("./SelectItem.cjs"),_=require("./SelectItemText.cjs"),N=require("./SelectItemIndicator.cjs"),O=require("./SelectGroup.cjs"),D=require("./SelectLabel.cjs"),q=require("./SelectSeparator.cjs"),s="data-skdx-select-generated",f=["option","value"];function k(e){let t=(0,l.renderSlotContent)(e,"option"),n=(0,l.renderSlotContent)(e,"value"),r=document.createElement("skdx-select-trigger");r.setAttribute(s,""),(0,i.forwardHostAttributes)(e,r);let o=document.createElement("skdx-select-value");e.placeholder&&o.setAttribute("placeholder",e.placeholder);for(let d of n.values())o.append((0,l.stampRenderSlot)(d));r.append(o,document.createElement("skdx-select-icon"));let c=document.createElement("skdx-select-content");c.setAttribute(s,""),c.append(...(0,l.buildOptionElements)(e.options??[],{item:"skdx-select-item",group:"skdx-select-group",groupLabel:"skdx-select-label",itemContent:t})),e.replaceChildren(r,c)}function v(e){let t=e.querySelector(":scope > skdx-select-trigger > skdx-select-value");t&&(e.placeholder?t.setAttribute("placeholder",e.placeholder):t.removeAttribute("placeholder"))}0&&(module.exports={SELECT_ANATOMY_GENERATED,SELECT_RENDER_SLOTS,fillSelectAnatomy,refreshSelectAnatomyText});
+"use strict";var d=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},b=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of A(t))!f.call(e,r)&&r!==i&&d(e,r,{get:()=>t[r],enumerable:!(o=E(t,r))||o.enumerable});return e};var S=e=>b(d({},"__esModule",{value:!0}),e);var R={};g(R,{SELECT_ANATOMY_GENERATED:()=>p,SELECT_RENDER_SLOTS:()=>h,fillSelectAnatomy:()=>C,refreshSelectAnatomyText:()=>T,syncSelectTags:()=>_});module.exports=S(R);var m=require("lit"),u=require("../internal/glyphs.cjs"),a=require("../internal/host-attributes.cjs"),c=require("../internal/options.cjs"),F=require("./SelectTrigger.cjs"),O=require("./SelectPortal.cjs"),M=require("./SelectValue.cjs"),N=require("./SelectIcon.cjs"),q=require("./SelectInput.cjs"),B=require("./SelectClear.cjs"),H=require("./SelectContent.cjs"),U=require("./SelectViewport.cjs"),G=require("./SelectAll.cjs"),Y=require("./SelectItem.cjs"),$=require("./SelectItemText.cjs"),w=require("./SelectItemIndicator.cjs"),P=require("./SelectGroup.cjs"),V=require("./SelectLabel.cjs"),j=require("./SelectSeparator.cjs"),z=require("./SelectEmpty.cjs"),I=require("./SelectTagList.cjs"),J=require("./SelectTag.cjs"),K=require("./SelectTagRemove.cjs"),p="data-skdx-select-generated",h=["option","value","tag"],k="Clear selection",L="Select all",y="No results found";function C(e){let t=(0,c.renderSlotContent)(e,"option"),i=(0,c.renderSlotContent)(e,"value");(0,c.renderSlotContent)(e,"tag");let o=(0,a.claimHostAttributes)(e),r=(0,a.resolveHostLabel)(o,e.placeholder),l=[];if(e.multiple){let s=document.createElement("skdx-select-tag-list");s.setAttribute(p,""),(0,a.setOptionalAttribute)(s,"aria-label",r&&`${r} \u2014 selected`),l.push(s)}if(l.push(v(e,o,r,i)),e.clearable){let s=document.createElement("skdx-select-clear");s.setAttribute(p,""),s.setAttribute("aria-label",k),(0,m.render)(u.closeGlyph,s),l.push(s)}let n=document.createElement("skdx-select-content");if(n.setAttribute(p,""),e.multiple&&e.allowSelectAll){let s=document.createElement("skdx-select-all");s.textContent=L,n.append(s)}if(n.append(...(0,c.buildOptionElements)(e.options??[],{item:"skdx-select-item",group:"skdx-select-group",groupLabel:"skdx-select-label",itemContent:t})),l.push(n),e.filterable){let s=document.createElement("skdx-select-empty");s.setAttribute(p,""),s.textContent=y,l.push(s)}e.replaceChildren(...l)}function v(e,t,i,o){if(e.filterable){let n=document.createElement("skdx-select-input");return n.setAttribute(p,""),e.placeholder&&n.setAttribute("placeholder",e.placeholder),(0,a.applyHostAttributes)(n,t,["aria-label"]),(0,a.setOptionalAttribute)(n,"aria-label",i),n}let r=document.createElement("skdx-select-trigger");r.setAttribute(p,""),(0,a.applyHostAttributes)(r,t);let l=document.createElement("skdx-select-value");e.placeholder&&l.setAttribute("placeholder",e.placeholder);for(let n of o.values())l.append((0,c.stampRenderSlot)(n));return r.append(l,document.createElement("skdx-select-icon")),r}function T(e){let t=e.querySelector(":scope > skdx-select-trigger > skdx-select-value")??e.querySelector(":scope > skdx-select-input");t&&(e.placeholder?t.setAttribute("placeholder",e.placeholder):t.removeAttribute("placeholder"))}function _(e){let t=e.querySelector(`:scope > skdx-select-tag-list[${p}]`);if(!t)return;let i=Array.from(t.children,l=>l.getAttribute("value")),o=e.selectedValues;if(i.length===o.length&&i.every((l,n)=>l===o[n]))return;let r=(0,c.renderSlotContent)(e,"tag");t.replaceChildren(...o.map(l=>{let n=document.createElement("skdx-select-tag");n.setAttribute("value",l);let s=r.get(l);s?n.append((0,c.stampRenderSlot)(s)):n.textContent=(0,c.findOptionLabel)(e.options,l)??e.textFor(l)??l;let x=document.createElement("skdx-select-tag-remove");return(0,m.render)(u.closeGlyph,x),n.append(x),n}))}0&&(module.exports={SELECT_ANATOMY_GENERATED,SELECT_RENDER_SLOTS,fillSelectAnatomy,refreshSelectAnatomyText,syncSelectTags});

package/dist/select/SelectAnatomy.d.cts

@@ -3,32 +3,36 @@ import './SelectTrigger.cjs';
 import './SelectPortal.cjs';
 import './SelectValue.cjs';
 import './SelectIcon.cjs';
+import './SelectInput.cjs';
+import './SelectClear.cjs';
 import './SelectContent.cjs';
 import './SelectViewport.cjs';
+import './SelectAll.cjs';
 import './SelectItem.cjs';
 import './SelectItemText.cjs';
 import './SelectItemIndicator.cjs';
 import './SelectGroup.cjs';
 import './SelectLabel.cjs';
 import './SelectSeparator.cjs';
+import './SelectEmpty.cjs';
+import './SelectTagList.cjs';
+import './SelectTag.cjs';
+import './SelectTagRemove.cjs';
 /** @internal Marks a direct child of `<skdx-select>` this module generated. */
 export declare const SELECT_ANATOMY_GENERATED = "data-skdx-select-generated";
 /** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
-export declare const SELECT_RENDER_SLOTS: readonly ["option", "value"];
+export declare const SELECT_RENDER_SLOTS: readonly ["option", "value", "tag"];
 /**
- * Builds the anatomy — a trigger holding Value and Icon, and a listbox with one
- * Item per `root.options` (grouped entries become a Group with Label) — as
- * light-DOM children of `root`.
- *
- * `slot="option"` supplies per-option content; `slot="value"` supplies the
- * value read-out. The host's `id`/`class`/`style`/`data-*`/`aria-*` move onto
- * the Trigger.
- * @internal
+ * @internal Builds the anatomy: a tag strip while `multiple`, a filter Input or
+ * a trigger holding Value and Icon, an optional Clear button, and a listbox with
+ * one Item per `root.options`.
  */
 export declare function fillSelectAnatomy(root: SkdxSelect): void;
+/** @internal Refreshes the generated placeholder in place, without a structural rebuild. */
+export declare function refreshSelectAnatomyText(root: SkdxSelect): void;
 /**
- * Refreshes the generated Value's `placeholder` in place — the only part that
- * changes without a structural rebuild.
- * @internal
+ * @internal Rebuilds the generated tag strip from the current selection, kept
+ * apart from {@link fillSelectAnatomy} since selection changes far more often
+ * than the option data does.
  */
-export declare function refreshSelectAnatomyText(root: SkdxSelect): void;
+export declare function syncSelectTags(root: SkdxSelect): void;

package/dist/select/SelectAnatomy.d.ts

@@ -3,32 +3,36 @@ import './SelectTrigger.js';
 import './SelectPortal.js';
 import './SelectValue.js';
 import './SelectIcon.js';
+import './SelectInput.js';
+import './SelectClear.js';
 import './SelectContent.js';
 import './SelectViewport.js';
+import './SelectAll.js';
 import './SelectItem.js';
 import './SelectItemText.js';
 import './SelectItemIndicator.js';
 import './SelectGroup.js';
 import './SelectLabel.js';
 import './SelectSeparator.js';
+import './SelectEmpty.js';
+import './SelectTagList.js';
+import './SelectTag.js';
+import './SelectTagRemove.js';
 /** @internal Marks a direct child of `<skdx-select>` this module generated. */
 export declare const SELECT_ANATOMY_GENERATED = "data-skdx-select-generated";
 /** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
-export declare const SELECT_RENDER_SLOTS: readonly ["option", "value"];
+export declare const SELECT_RENDER_SLOTS: readonly ["option", "value", "tag"];
 /**
- * Builds the anatomy — a trigger holding Value and Icon, and a listbox with one
- * Item per `root.options` (grouped entries become a Group with Label) — as
- * light-DOM children of `root`.
- *
- * `slot="option"` supplies per-option content; `slot="value"` supplies the
- * value read-out. The host's `id`/`class`/`style`/`data-*`/`aria-*` move onto
- * the Trigger.
- * @internal
+ * @internal Builds the anatomy: a tag strip while `multiple`, a filter Input or
+ * a trigger holding Value and Icon, an optional Clear button, and a listbox with
+ * one Item per `root.options`.
  */
 export declare function fillSelectAnatomy(root: SkdxSelect): void;
+/** @internal Refreshes the generated placeholder in place, without a structural rebuild. */
+export declare function refreshSelectAnatomyText(root: SkdxSelect): void;
 /**
- * Refreshes the generated Value's `placeholder` in place — the only part that
- * changes without a structural rebuild.
- * @internal
+ * @internal Rebuilds the generated tag strip from the current selection, kept
+ * apart from {@link fillSelectAnatomy} since selection changes far more often
+ * than the option data does.
  */
-export declare function refreshSelectAnatomyText(root: SkdxSelect): void;
+export declare function syncSelectTags(root: SkdxSelect): void;

package/dist/select/SelectAnatomy.js

@@ -1 +1 @@
-import{forwardHostAttributes as i}from"../internal/host-attributes.js";import{buildOptionElements as d,renderSlotContent as n,stampRenderSlot as a}from"../internal/options.js";import"./SelectTrigger.js";import"./SelectPortal.js";import"./SelectValue.js";import"./SelectIcon.js";import"./SelectContent.js";import"./SelectViewport.js";import"./SelectItem.js";import"./SelectItemText.js";import"./SelectItemIndicator.js";import"./SelectGroup.js";import"./SelectLabel.js";import"./SelectSeparator.js";var c="data-skdx-select-generated",y=["option","value"];function L(e){let t=n(e,"option"),p=n(e,"value"),o=document.createElement("skdx-select-trigger");o.setAttribute(c,""),i(e,o);let r=document.createElement("skdx-select-value");e.placeholder&&r.setAttribute("placeholder",e.placeholder);for(let s of p.values())r.append(a(s));o.append(r,document.createElement("skdx-select-icon"));let l=document.createElement("skdx-select-content");l.setAttribute(c,""),l.append(...d(e.options??[],{item:"skdx-select-item",group:"skdx-select-group",groupLabel:"skdx-select-label",itemContent:t})),e.replaceChildren(o,l)}function R(e){let t=e.querySelector(":scope > skdx-select-trigger > skdx-select-value");t&&(e.placeholder?t.setAttribute("placeholder",e.placeholder):t.removeAttribute("placeholder"))}export{c as SELECT_ANATOMY_GENERATED,y as SELECT_RENDER_SLOTS,L as fillSelectAnatomy,R as refreshSelectAnatomyText};
+import{render as m}from"lit";import{closeGlyph as u}from"../internal/glyphs.js";import{applyHostAttributes as d,claimHostAttributes as A,resolveHostLabel as f,setOptionalAttribute as x}from"../internal/host-attributes.js";import{buildOptionElements as g,findOptionLabel as b,renderSlotContent as a,stampRenderSlot as E}from"../internal/options.js";import"./SelectTrigger.js";import"./SelectPortal.js";import"./SelectValue.js";import"./SelectIcon.js";import"./SelectInput.js";import"./SelectClear.js";import"./SelectContent.js";import"./SelectViewport.js";import"./SelectAll.js";import"./SelectItem.js";import"./SelectItemText.js";import"./SelectItemIndicator.js";import"./SelectGroup.js";import"./SelectLabel.js";import"./SelectSeparator.js";import"./SelectEmpty.js";import"./SelectTagList.js";import"./SelectTag.js";import"./SelectTagRemove.js";var i="data-skdx-select-generated",I=["option","value","tag"],S="Clear selection",h="Select all",k="No results found";function J(e){let s=a(e,"option"),o=a(e,"value");a(e,"tag");let c=A(e),r=f(c,e.placeholder),t=[];if(e.multiple){let n=document.createElement("skdx-select-tag-list");n.setAttribute(i,""),x(n,"aria-label",r&&`${r} \u2014 selected`),t.push(n)}if(t.push(L(e,c,r,o)),e.clearable){let n=document.createElement("skdx-select-clear");n.setAttribute(i,""),n.setAttribute("aria-label",S),m(u,n),t.push(n)}let l=document.createElement("skdx-select-content");if(l.setAttribute(i,""),e.multiple&&e.allowSelectAll){let n=document.createElement("skdx-select-all");n.textContent=h,l.append(n)}if(l.append(...g(e.options??[],{item:"skdx-select-item",group:"skdx-select-group",groupLabel:"skdx-select-label",itemContent:s})),t.push(l),e.filterable){let n=document.createElement("skdx-select-empty");n.setAttribute(i,""),n.textContent=k,t.push(n)}e.replaceChildren(...t)}function L(e,s,o,c){if(e.filterable){let l=document.createElement("skdx-select-input");return l.setAttribute(i,""),e.placeholder&&l.setAttribute("placeholder",e.placeholder),d(l,s,["aria-label"]),x(l,"aria-label",o),l}let r=document.createElement("skdx-select-trigger");r.setAttribute(i,""),d(r,s);let t=document.createElement("skdx-select-value");e.placeholder&&t.setAttribute("placeholder",e.placeholder);for(let l of c.values())t.append(E(l));return r.append(t,document.createElement("skdx-select-icon")),r}function K(e){let s=e.querySelector(":scope > skdx-select-trigger > skdx-select-value")??e.querySelector(":scope > skdx-select-input");s&&(e.placeholder?s.setAttribute("placeholder",e.placeholder):s.removeAttribute("placeholder"))}function Q(e){let s=e.querySelector(`:scope > skdx-select-tag-list[${i}]`);if(!s)return;let o=Array.from(s.children,t=>t.getAttribute("value")),c=e.selectedValues;if(o.length===c.length&&o.every((t,l)=>t===c[l]))return;let r=a(e,"tag");s.replaceChildren(...c.map(t=>{let l=document.createElement("skdx-select-tag");l.setAttribute("value",t);let n=r.get(t);n?l.append(E(n)):l.textContent=b(e.options,t)??e.textFor(t)??t;let p=document.createElement("skdx-select-tag-remove");return m(u,p),l.append(p),l}))}export{i as SELECT_ANATOMY_GENERATED,I as SELECT_RENDER_SLOTS,J as fillSelectAnatomy,K as refreshSelectAnatomyText,Q as syncSelectTags};

package/dist/select/SelectClear.cjs

@@ -0,0 +1,22 @@
+"use strict";var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var k=(l,t)=>{for(var e in t)i(l,e,{get:t[e],enumerable:!0})},y=(l,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!g.call(l,o)&&o!==e&&i(l,o,{get:()=>t[o],enumerable:!(s=h(t,o))||s.enumerable});return l};var E=l=>y(i({},"__esModule",{value:!0}),l),m=(l,t,e,s)=>{for(var o=s>1?void 0:s?h(t,e):t,c=l.length-1,p;c>=0;c--)(p=l[c])&&(o=(s?p(t,e,o):p(o))||o);return s&&o&&i(t,e,o),o};var L={};k(L,{SkdxSelectClear:()=>a});module.exports=E(L);var r=require("lit"),u=require("../internal/aria-label.cjs"),b=require("../internal/closest.cjs"),v=require("../internal/define.cjs"),d=require("../internal/styles.cjs"),n=require("./family.cjs");var a=class extends r.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{let e=this.root;e&&(e.clearSelection(),e.triggerEl?.focus())}}connectedCallback(){super.connectedCallback(),this.label??(this.label=(0,u.takeHostAriaLabel)(this)),this.root=(0,b.closestThroughPortal)(this,n.SELECT_FAMILY.selector),this.root?.addEventListener(n.SELECT_FAMILY.event,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(n.SELECT_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}render(){let e=this.root;if(!e)return r.html`<slot></slot>`;let s=e.selectedValues.length===0&&e.inputValue==="",o=e.disabled||e.readOnly||s;return r.html`
+      <button
+        part="clear"
+        type="button"
+        aria-label=${this.label??"Clear selection"}
+        ?disabled=${o}
+        data-disabled=${e.disabled?"":r.nothing}
+        data-readonly=${e.readOnly?"":r.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};a.styles=[d.resetNativeControl,r.css`
+      :host {
+        display: inline-flex;
+      }
+      /* The skin sets no padding on the clear button, so its box is the UA
+         button padding the other frameworks render with. */
+      button {
+        padding: revert;
+      }
+    `,d.controlBoxOnHost],a=m([(0,v.customElement)("skdx-select-clear","select","clear")],a);0&&(module.exports={SkdxSelectClear});

package/dist/select/SelectClear.d.cts

@@ -0,0 +1,21 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Button emptying a `<skdx-select>` in one press — selection and draft text — then handing focus back to the field it sits beside. Named `Clear selection` unless an `aria-label` on the host names it.
+ *
+ * @csspart clear - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSelectClear extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-clear': SkdxSelectClear;
+    }
+}

package/dist/select/SelectClear.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Button emptying a `<skdx-select>` in one press — selection and draft text — then handing focus back to the field it sits beside. Named `Clear selection` unless an `aria-label` on the host names it.
+ *
+ * @csspart clear - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxSelectClear extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-clear': SkdxSelectClear;
+    }
+}

package/dist/select/SelectClear.js

@@ -0,0 +1,22 @@
+var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(s,l,e,o)=>{for(var t=o>1?void 0:o?m(l,e):l,a=s.length-1,i;a>=0;a--)(i=s[a])&&(t=(o?i(l,e,t):i(t))||t);return o&&t&&h(l,e,t),t};import{css as u,html as c,LitElement as b,nothing as p}from"lit";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{closestThroughPortal as f}from"../internal/closest.js";import{customElement as g}from"../internal/define.js";import{controlBoxOnHost as k,resetNativeControl as y}from"../internal/styles.js";import{SELECT_FAMILY as n}from"./family.js";var r=class extends b{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{let e=this.root;e&&(e.clearSelection(),e.triggerEl?.focus())}}connectedCallback(){super.connectedCallback(),this.label??(this.label=v(this)),this.root=f(this,n.selector),this.root?.addEventListener(n.event,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(n.event,this.onRootUpdate),super.disconnectedCallback()}render(){let e=this.root;if(!e)return c`<slot></slot>`;let o=e.selectedValues.length===0&&e.inputValue==="",t=e.disabled||e.readOnly||o;return c`
+      <button
+        part="clear"
+        type="button"
+        aria-label=${this.label??"Clear selection"}
+        ?disabled=${t}
+        data-disabled=${e.disabled?"":p}
+        data-readonly=${e.readOnly?"":p}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};r.styles=[y,u`
+      :host {
+        display: inline-flex;
+      }
+      /* The skin sets no padding on the clear button, so its box is the UA
+         button padding the other frameworks render with. */
+      button {
+        padding: revert;
+      }
+    `,k],r=d([g("skdx-select-clear","select","clear")],r);export{r as SkdxSelectClear};

package/dist/select/SelectContent.cjs

@@ -1,5 +1,5 @@
-"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var L=(s,o)=>{for(var t in o)u(s,t,{get:o[t],enumerable:!0})},w=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!P.call(s,i)&&i!==t&&u(s,i,{get:()=>o[i],enumerable:!(e=v(o,i))||e.enumerable});return s};var A=s=>w(u({},"__esModule",{value:!0}),s),r=(s,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,d=s.length-1,h;d>=0;d--)(h=s[d])&&(i=(e?h(o,t,i):h(i))||i);return e&&i&&u(o,t,i),i};var D={};L(D,{SkdxSelectContent:()=>n});module.exports=A(D);var c=require("lit"),l=require("lit/decorators.js"),m=require("../internal/closest.cjs"),g=require("../internal/define.cjs"),a=require("../internal/dismiss.cjs"),p=require("../internal/positioning.cjs"),y=require("../internal/styles.cjs"),b=require("./Select.cjs");function T(s,o){let t=s.querySelector('[data-part="viewport"]')??s;if(t===o||!t.contains(o))return;let e=t.getBoundingClientRect(),i=o.getBoundingClientRect();t.scrollTop+=i.top-e.top-(e.height-i.height)/2}var n=class extends c.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.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,a.triggerContains)(this.root.triggerEl,e)||(0,a.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,a.focusOutsideTarget)(t);!e||this.contains(e)||this.root.contains(e)||(0,a.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,a.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.focusTrigger()))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=(0,m.closestThroughPortal)(this,"skdx-select"),this.root&&(this.root.contentEl=this),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id?this.root.contentId=this.id:this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",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?.(),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.root?.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,p.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"select"}),requestAnimationFrame(()=>this.seedActiveOption()))}seedActiveOption(){let t=this.root;if(!t?.open)return;let e=t.openIntent;t.openIntent="selected";let i=Array.from(this.querySelectorAll(b.OPTION_SELECTOR)),d=i[0],h=i[i.length-1],E=this.querySelector('[role="option"][data-state="checked"]'),f=e==="first"?d:e==="last"?h:E??d;f&&(t.setActiveId(f.id),T(this,f))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return c.html`<slot></slot>`}};n.styles=[y.hiddenHostStyles,c.css`
+"use strict";var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var P=(s,o)=>{for(var t in o)p(s,t,{get:o[t],enumerable:!0})},A=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!L.call(s,i)&&i!==t&&p(s,i,{get:()=>o[i],enumerable:!(e=v(o,i))||e.enumerable});return s};var w=s=>A(p({},"__esModule",{value:!0}),s),r=(s,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,d=s.length-1,h;d>=0;d--)(h=s[d])&&(i=(e?h(o,t,i):h(i))||i);return e&&i&&p(o,t,i),i};var D={};P(D,{SkdxSelectContent:()=>n});module.exports=w(D);var c=require("lit"),a=require("lit/decorators.js"),g=require("../internal/closest.cjs"),b=require("../internal/define.cjs"),l=require("../internal/dismiss.cjs"),m=require("../internal/positioning.cjs"),y=require("../internal/styles.cjs"),f=require("./family.cjs"),E=require("./Select.cjs");function T(s,o){let t=s.querySelector('[data-part="viewport"]')??s;if(t===o||!t.contains(o))return;let e=t.getBoundingClientRect(),i=o.getBoundingClientRect();t.scrollTop+=i.top-e.top-(e.height-i.height)/2}var n=class extends c.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.matchWidth=!1;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.preventFocusSteal=t=>t.preventDefault();this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,l.triggerContains)(this.root.triggerEl,e)||(0,l.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,l.focusOutsideTarget)(t);!e||this.contains(e)||this.root.contains(e)||(0,l.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,l.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.focusTrigger()))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=(0,g.closestThroughPortal)(this,f.SELECT_FAMILY.selector),this.root&&(this.root.contentEl=this),this.root?.addEventListener(f.SELECT_FAMILY.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.root&&(this.id?this.root.contentId=this.id:this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(f.SELECT_FAMILY.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?.(),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.root?.loading?(this.setAttribute("aria-busy","true"),this.setAttribute("data-loading","")):(this.removeAttribute("aria-busy"),this.removeAttribute("data-loading")),this.root?.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,m.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"select"}),requestAnimationFrame(()=>this.seedActiveOption()))}seedActiveOption(){let t=this.root;if(!t?.open)return;let e=t.openIntent;t.openIntent="selected";let i=Array.from(this.querySelectorAll(E.OPTION_SELECTOR)),d=i[0],h=i[i.length-1],u=this.querySelector('[role="option"][data-state="checked"]:not([data-skdx-select-all])')??d;e==="first"?u=d:e==="last"&&(u=h),u&&(t.setActiveId(u.id),T(this,u))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return c.html`<slot></slot>`}};n.styles=[y.hiddenHostStyles,c.css`
       :host {
         display: block;
       }
-    `],r([(0,l.property)({type:String})],n.prototype,"side",2),r([(0,l.property)({type:String})],n.prototype,"align",2),r([(0,l.property)({type:Number,attribute:"side-offset"})],n.prototype,"sideOffset",2),r([(0,l.property)({type:Number,attribute:"align-offset"})],n.prototype,"alignOffset",2),r([(0,l.property)({converter:p.optOutBoolean,attribute:"avoid-collisions"})],n.prototype,"avoidCollisions",2),r([(0,l.property)({type:Number,attribute:"collision-padding"})],n.prototype,"collisionPadding",2),r([(0,l.property)({attribute:!1})],n.prototype,"collisionBoundary",2),n=r([(0,g.customElement)("skdx-select-content","select","content")],n);0&&(module.exports={SkdxSelectContent});
+    `],r([(0,a.property)({type:String})],n.prototype,"side",2),r([(0,a.property)({type:String})],n.prototype,"align",2),r([(0,a.property)({type:Number,attribute:"side-offset"})],n.prototype,"sideOffset",2),r([(0,a.property)({type:Number,attribute:"align-offset"})],n.prototype,"alignOffset",2),r([(0,a.property)({converter:m.optOutBoolean,attribute:"avoid-collisions"})],n.prototype,"avoidCollisions",2),r([(0,a.property)({type:Number,attribute:"collision-padding"})],n.prototype,"collisionPadding",2),r([(0,a.property)({attribute:!1})],n.prototype,"collisionBoundary",2),r([(0,a.property)({type:Boolean,reflect:!0,attribute:"data-match-width"})],n.prototype,"matchWidth",2),n=r([(0,b.customElement)("skdx-select-content","select","content")],n);0&&(module.exports={SkdxSelectContent});

package/dist/select/SelectContent.d.cts

@@ -1,19 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.cjs';
 /**
- * The floating listbox (role="listbox"), positioned relative to the trigger via
- * @floating-ui/dom. Publishes `data-state` and `data-side`/`data-align` hooks for
- * styling, `aria-multiselectable` while `multiple`, and carries the roving tab
- * stop.
- *
- * Closed by Escape or an outside interaction (returning focus to the trigger, which
- * never lost it).
- *
- * `positionFloating` also writes the measurement custom properties
- * `--skdx-select-available-width` / `-available-height` / `-trigger-width` /
- * `-transform-origin` onto this element on every reposition, so the listbox
- * can be sized (`max-height: var(--skdx-select-available-height)`) and
- * animated from CSS without measuring anything by hand.
+ * The floating listbox (`role="listbox"`), positioned relative to the trigger via `@floating-ui/dom`.
  *
  * @fires escape-key-down - Escape was pressed while open. Preventable.
  * @fires pointer-down-outside - A pointer-down landed outside this listbox while open. Preventable.
@@ -58,57 +46,26 @@ export declare class SkdxSelectContent extends LitElement {
      * @default undefined
      */
     collisionBoundary?: PositionOptions['collisionBoundary'];
+    /**
+     * Sizes the panel to match the trigger width, reflected as the `data-match-width` attribute.
+     * @default false
+     */
+    matchWidth: boolean;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * The trigger registers the element to anchor against in its own
-     * `firstUpdated()`, which has not run yet when this panel's
-     * `connectedCallback` does — so a panel that mounts already open finds no
-     * anchor and, with no open-state change to follow, never positions itself at
-     * all. This is the first tick where the anchor exists; `activate()` is
-     * guarded, so an already-positioned panel is untouched.
-     */
     protected firstUpdated(): void;
     private syncHostState;
     private activate;
-    /**
-     * Makes the selected option (or the first enabled one) active when the
-     * listbox opens, and scrolls it into the listbox.
-     *
-     * `scrollIntoListbox` rather than the `scrollIntoView({ block: 'nearest' })`
-     * the trigger uses while navigating, and that difference is load-bearing:
-     * floating-ui renders the content at the document origin for the frame before
-     * it measures and applies its transform, so *any* ancestor-walking scroll in
-     * this frame asks the browser to bring an element sitting at y=0 into view —
-     * which scrolls the page to the top, out from under whatever the user was
-     * looking at. That was the regression the old `.focus()` here caused; only
-     * the listbox may scroll on open. By the time the user presses a key the
-     * content is positioned and the trigger's explicit `scrollIntoView` is safe.
-     */
     private seedActiveOption;
     private deactivate;
-    /**
-     * Real DOM focus must never leave the trigger; a mousedown inside the listbox
-     * would otherwise steal it on some browsers, and with it the whole keyboard —
-     * every listbox key is handled on the trigger now.
-     */
     private readonly preventFocusSteal;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
-    /**
-     * Escape, and only Escape — the roving-focus, typeahead, Tab and Enter
-     * branches belong to `<skdx-select-trigger>`, which is where the keyboard
-     * actually arrives.
-     *
-     * `focusTrigger()` is kept even though the trigger never gave focus up: a
-     * consumer who moved focus into the listbox some other way still ends up with
-     * focus where the contract says it is, and it is a no-op otherwise.
-     */
     private readonly handleDocumentKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/select/SelectContent.d.ts

@@ -1,19 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.js';
 /**
- * The floating listbox (role="listbox"), positioned relative to the trigger via
- * @floating-ui/dom. Publishes `data-state` and `data-side`/`data-align` hooks for
- * styling, `aria-multiselectable` while `multiple`, and carries the roving tab
- * stop.
- *
- * Closed by Escape or an outside interaction (returning focus to the trigger, which
- * never lost it).
- *
- * `positionFloating` also writes the measurement custom properties
- * `--skdx-select-available-width` / `-available-height` / `-trigger-width` /
- * `-transform-origin` onto this element on every reposition, so the listbox
- * can be sized (`max-height: var(--skdx-select-available-height)`) and
- * animated from CSS without measuring anything by hand.
+ * The floating listbox (`role="listbox"`), positioned relative to the trigger via `@floating-ui/dom`.
  *
  * @fires escape-key-down - Escape was pressed while open. Preventable.
  * @fires pointer-down-outside - A pointer-down landed outside this listbox while open. Preventable.
@@ -58,57 +46,26 @@ export declare class SkdxSelectContent extends LitElement {
      * @default undefined
      */
     collisionBoundary?: PositionOptions['collisionBoundary'];
+    /**
+     * Sizes the panel to match the trigger width, reflected as the `data-match-width` attribute.
+     * @default false
+     */
+    matchWidth: boolean;
     private root;
     private readonly onRootUpdate;
     private cleanupPosition?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * The trigger registers the element to anchor against in its own
-     * `firstUpdated()`, which has not run yet when this panel's
-     * `connectedCallback` does — so a panel that mounts already open finds no
-     * anchor and, with no open-state change to follow, never positions itself at
-     * all. This is the first tick where the anchor exists; `activate()` is
-     * guarded, so an already-positioned panel is untouched.
-     */
     protected firstUpdated(): void;
     private syncHostState;
     private activate;
-    /**
-     * Makes the selected option (or the first enabled one) active when the
-     * listbox opens, and scrolls it into the listbox.
-     *
-     * `scrollIntoListbox` rather than the `scrollIntoView({ block: 'nearest' })`
-     * the trigger uses while navigating, and that difference is load-bearing:
-     * floating-ui renders the content at the document origin for the frame before
-     * it measures and applies its transform, so *any* ancestor-walking scroll in
-     * this frame asks the browser to bring an element sitting at y=0 into view —
-     * which scrolls the page to the top, out from under whatever the user was
-     * looking at. That was the regression the old `.focus()` here caused; only
-     * the listbox may scroll on open. By the time the user presses a key the
-     * content is positioned and the trigger's explicit `scrollIntoView` is safe.
-     */
     private seedActiveOption;
     private deactivate;
-    /**
-     * Real DOM focus must never leave the trigger; a mousedown inside the listbox
-     * would otherwise steal it on some browsers, and with it the whole keyboard —
-     * every listbox key is handled on the trigger now.
-     */
     private readonly preventFocusSteal;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
-    /**
-     * Escape, and only Escape — the roving-focus, typeahead, Tab and Enter
-     * branches belong to `<skdx-select-trigger>`, which is where the keyboard
-     * actually arrives.
-     *
-     * `focusTrigger()` is kept even though the trigger never gave focus up: a
-     * consumer who moved focus into the listbox some other way still ends up with
-     * focus where the contract says it is, and it is a no-op otherwise.
-     */
     private readonly handleDocumentKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {