@skdx/web-components 0.27.0 → 0.29.0

package/dist/select/SelectAnatomy.d.cts

@@ -0,0 +1,38 @@
+import type { SkdxSelect } from './Select.cjs';
+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", "tag"];
+/**
+ * @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;
+/**
+ * @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 syncSelectTags(root: SkdxSelect): void;

package/dist/select/SelectAnatomy.d.ts

@@ -0,0 +1,38 @@
+import type { SkdxSelect } from './Select.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';
+/** @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", "tag"];
+/**
+ * @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;
+/**
+ * @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 syncSelectTags(root: SkdxSelect): void;

package/dist/select/SelectAnatomy.js

@@ -0,0 +1 @@
+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 f=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var T=(r,i)=>{for(var t in i)u(r,t,{get:i[t],enumerable:!0})},P=(r,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of O(i))!E.call(r,o)&&o!==t&&u(r,o,{get:()=>i[o],enumerable:!(e=f(i,o))||e.enumerable});return r};var w=r=>P(u({},"__esModule",{value:!0}),r),a=(r,i,t,e)=>{for(var o=e>1?void 0:e?f(i,t):i,h=r.length-1,d;h>=0;h--)(d=r[h])&&(o=(e?d(i,t,o):d(o))||o);return e&&o&&u(i,t,o),o};var L={};T(L,{SkdxSelectContent:()=>s});module.exports=w(L);var c=require("lit"),l=require("lit/decorators.js"),y=require("../internal/closest.cjs"),g=require("../internal/define.cjs"),n=require("../internal/dismiss.cjs"),p=require("../internal/positioning.cjs"),v=require("../internal/styles.cjs"),b=require("../internal/typeahead.cjs");var m='[role="option"]:not([data-disabled])',s=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.typeahead="";this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,n.triggerContains)(this.root.triggerEl,e)||(0,n.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,n.focusOutsideTarget)(t);!e||this.contains(e)||this.root.contains(e)||(0,n.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{let e=Array.from(this.querySelectorAll(m)),o=e.indexOf(document.activeElement);if(t.key==="Escape"){if(t.preventDefault(),!(0,n.dispatchEscapeKeyDown)(this,t))return;this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="Tab"){t.preventDefault(),this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="ArrowDown"||t.key==="ArrowUp"){if(t.preventDefault(),e.length===0)return;let h=t.key==="ArrowDown"?1:-1,d=Math.min(e.length-1,Math.max(0,o+h));e[d]?.focus();return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),document.activeElement?.click();return}t.key.length===1&&(this.typeahead+=t.key.toLowerCase(),clearTimeout(this.typeaheadTimer),this.typeaheadTimer=setTimeout(()=>this.typeahead="",500),e.find(d=>(0,b.itemText)(d).trim().toLowerCase().startsWith(this.typeahead))?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=(0,y.closestThroughPortal)(this,"skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),clearTimeout(this.typeaheadTimer),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(()=>(0,n.focusOnOpen)(()=>{let t=this.querySelector('[role="option"][data-state="checked"]'),e=this.querySelector(m);(t??e??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return c.html`<slot></slot>`}};s.styles=[v.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;
       }
-    `],a([(0,l.property)({type:String})],s.prototype,"side",2),a([(0,l.property)({type:String})],s.prototype,"align",2),a([(0,l.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),a([(0,l.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),a([(0,l.property)({converter:p.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),a([(0,l.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),a([(0,l.property)({attribute:!1})],s.prototype,"collisionBoundary",2),s=a([(0,g.customElement)("skdx-select-content","select","content")],s);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,82 +1,71 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.cjs';
 /**
- * `<skdx-select-content>` — the listbox popup for the closest ancestor
- * `<skdx-select>`, positioned relative to the trigger via `@floating-ui/dom`
- * (`strategy: 'fixed'`, so it isn't clipped by `overflow: hidden` ancestors
- * even without a portal — unlike React's `SelectPortal`, this content
- * renders in normal document flow). `role`, `id`, `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) because
- * `aria-controls` on the trigger targets this element's id, and because this
- * element's own light-DOM `querySelectorAll` is how it finds its
- * `<skdx-select-option>` children — both need the plain light-DOM tree, not
- * a shadow-encapsulated one. Owns roving-focus + typeahead keyboard
- * navigation between options, focuses the selected (or first) option on
- * open, closes on Escape or an outside interaction (returning focus to the
- * trigger), and closes on Tab.
- *
- * `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.
  * @fires focus-outside - Focus moved outside this listbox 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.
+ * @fires close-auto-focus - Fired just before focus is returned to the trigger as the listbox closes — on Escape, and on committing an option. Preventing it suppresses that return so the consumer can place focus themselves, for when the trigger no longer exists. Preventable.
  */
 export declare class SkdxSelectContent extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Preferred edge of the trigger to place the listbox against. */
+    /**
+     * Preferred edge of the trigger to place the listbox.
+     * @default 'bottom'
+     */
     side: PositionOptions['side'];
-    /** Preferred alignment along that edge relative to the trigger. */
+    /**
+     * Preferred alignment of the listbox along that edge.
+     * @default 'start'
+     */
     align: PositionOptions['align'];
-    /** Pixel gap between the listbox and the trigger's edge. */
+    /**
+     * Pixel gap between listbox and trigger.
+     * @default 4
+     */
     sideOffset: number;
-    /** Pixel offset along the alignment axis. */
+    /**
+     * Pixel offset along the alignment axis.
+     * @default 0
+     */
     alignOffset: number;
-    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    /**
+     * Automatically flip and shift the listbox to stay within viewport.
+     * @default true
+     */
     avoidCollisions: boolean;
     /**
-     * Minimum pixel distance to keep from the collision boundary when avoiding
-     * collisions. 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.
+     * Minimum distance from collision boundary; a number applies to all sides, an object sets only named sides.
+     * @default 8
      */
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
     /**
-     * Element (or elements) collisions are measured against instead of this
-     * listbox's clipping ancestors — keeps it inside a scroll container or one
-     * pane of a split layout rather than the whole viewport. Property-only: an
-     * `Element` cannot come from an attribute string.
+     * Elements collisions are measured against; use it to keep the listbox inside a scroll container or split pane.
+     * @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 typeahead;
-    private typeaheadTimer?;
     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;
+    private seedActiveOption;
     private deactivate;
+    private readonly preventFocusSteal;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
-    private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    private readonly handleDocumentKeyDown;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/select/SelectContent.d.ts

@@ -1,82 +1,71 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type PositionOptions } from '../internal/positioning.js';
 /**
- * `<skdx-select-content>` — the listbox popup for the closest ancestor
- * `<skdx-select>`, positioned relative to the trigger via `@floating-ui/dom`
- * (`strategy: 'fixed'`, so it isn't clipped by `overflow: hidden` ancestors
- * even without a portal — unlike React's `SelectPortal`, this content
- * renders in normal document flow). `role`, `id`, `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) because
- * `aria-controls` on the trigger targets this element's id, and because this
- * element's own light-DOM `querySelectorAll` is how it finds its
- * `<skdx-select-option>` children — both need the plain light-DOM tree, not
- * a shadow-encapsulated one. Owns roving-focus + typeahead keyboard
- * navigation between options, focuses the selected (or first) option on
- * open, closes on Escape or an outside interaction (returning focus to the
- * trigger), and closes on Tab.
- *
- * `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.
  * @fires focus-outside - Focus moved outside this listbox 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.
+ * @fires close-auto-focus - Fired just before focus is returned to the trigger as the listbox closes — on Escape, and on committing an option. Preventing it suppresses that return so the consumer can place focus themselves, for when the trigger no longer exists. Preventable.
  */
 export declare class SkdxSelectContent extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Preferred edge of the trigger to place the listbox against. */
+    /**
+     * Preferred edge of the trigger to place the listbox.
+     * @default 'bottom'
+     */
     side: PositionOptions['side'];
-    /** Preferred alignment along that edge relative to the trigger. */
+    /**
+     * Preferred alignment of the listbox along that edge.
+     * @default 'start'
+     */
     align: PositionOptions['align'];
-    /** Pixel gap between the listbox and the trigger's edge. */
+    /**
+     * Pixel gap between listbox and trigger.
+     * @default 4
+     */
     sideOffset: number;
-    /** Pixel offset along the alignment axis. */
+    /**
+     * Pixel offset along the alignment axis.
+     * @default 0
+     */
     alignOffset: number;
-    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    /**
+     * Automatically flip and shift the listbox to stay within viewport.
+     * @default true
+     */
     avoidCollisions: boolean;
     /**
-     * Minimum pixel distance to keep from the collision boundary when avoiding
-     * collisions. 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.
+     * Minimum distance from collision boundary; a number applies to all sides, an object sets only named sides.
+     * @default 8
      */
     collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
     /**
-     * Element (or elements) collisions are measured against instead of this
-     * listbox's clipping ancestors — keeps it inside a scroll container or one
-     * pane of a split layout rather than the whole viewport. Property-only: an
-     * `Element` cannot come from an attribute string.
+     * Elements collisions are measured against; use it to keep the listbox inside a scroll container or split pane.
+     * @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 typeahead;
-    private typeaheadTimer?;
     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;
+    private seedActiveOption;
     private deactivate;
+    private readonly preventFocusSteal;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
-    private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    private readonly handleDocumentKeyDown;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/select/SelectContent.js

@@ -1,5 +1,5 @@
-var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(d,l,t,e)=>{for(var o=e>1?void 0:e?p(l,t):l,a=d.length-1,r;a>=0;a--)(r=d[a])&&(o=(e?r(l,t,o):r(o))||o);return e&&o&&u(l,t,o),o};import{css as f,html as m,LitElement as y}from"lit";import{property as n}from"lit/decorators.js";import{closestThroughPortal as g}from"../internal/closest.js";import{customElement as v}from"../internal/define.js";import{dispatchEscapeKeyDown as b,dispatchOutside as h,focusOnOpen as O,focusOutsideTarget as E,triggerContains as T}from"../internal/dismiss.js";import{optOutBoolean as P,positionFloating as w}from"../internal/positioning.js";import{hiddenHostStyles as L}from"../internal/styles.js";import{itemText as k}from"../internal/typeahead.js";var c='[role="option"]:not([data-disabled])',i=class extends y{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.typeahead="";this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||T(this.root.triggerEl,e)||h(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=E(t);!e||this.contains(e)||this.root.contains(e)||h(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{let e=Array.from(this.querySelectorAll(c)),o=e.indexOf(document.activeElement);if(t.key==="Escape"){if(t.preventDefault(),!b(this,t))return;this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="Tab"){t.preventDefault(),this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="ArrowDown"||t.key==="ArrowUp"){if(t.preventDefault(),e.length===0)return;let a=t.key==="ArrowDown"?1:-1,r=Math.min(e.length-1,Math.max(0,o+a));e[r]?.focus();return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),document.activeElement?.click();return}t.key.length===1&&(this.typeahead+=t.key.toLowerCase(),clearTimeout(this.typeaheadTimer),this.typeaheadTimer=setTimeout(()=>this.typeahead="",500),e.find(r=>k(r).trim().toLowerCase().startsWith(this.typeahead))?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=g(this,"skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),clearTimeout(this.typeaheadTimer),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=w(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(()=>O(()=>{let t=this.querySelector('[role="option"][data-state="checked"]'),e=this.querySelector(c);(t??e??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return m`<slot></slot>`}};i.styles=[L,f`
+var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(a,n,t,e)=>{for(var i=e>1?void 0:e?f(n,t):n,l=a.length-1,d;l>=0;l--)(d=a[l])&&(i=(e?d(n,t,i):d(i))||i);return e&&i&&p(n,t,i),i};import{css as m,html as v,LitElement as g}from"lit";import{property as r}from"lit/decorators.js";import{closestThroughPortal as b}from"../internal/closest.js";import{customElement as y}from"../internal/define.js";import{dispatchEscapeKeyDown as E,dispatchOutside as u,focusOutsideTarget as O,triggerContains as L}from"../internal/dismiss.js";import{optOutBoolean as P,positionFloating as A}from"../internal/positioning.js";import{hiddenHostStyles as w}from"../internal/styles.js";import{SELECT_FAMILY as h}from"./family.js";import{OPTION_SELECTOR as T}from"./Select.js";function D(a,n){let t=a.querySelector('[data-part="viewport"]')??a;if(t===n||!t.contains(n))return;let e=t.getBoundingClientRect(),i=n.getBoundingClientRect();t.scrollTop+=i.top-e.top-(e.height-i.height)/2}var o=class extends g{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)||L(this.root.triggerEl,e)||u(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=O(t);!e||this.contains(e)||this.root.contains(e)||u(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),E(this,t)&&(this.root.setOpen(!1),this.root.focusTrigger()))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=b(this,h.selector),this.root&&(this.root.contentEl=this),this.root?.addEventListener(h.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(h.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=A(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(T)),l=i[0],d=i[i.length-1],c=this.querySelector('[role="option"][data-state="checked"]:not([data-skdx-select-all])')??l;e==="first"?c=l:e==="last"&&(c=d),c&&(t.setActiveId(c.id),D(this,c))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return v`<slot></slot>`}};o.styles=[w,m`
       :host {
         display: block;
       }
-    `],s([n({type:String})],i.prototype,"side",2),s([n({type:String})],i.prototype,"align",2),s([n({type:Number,attribute:"side-offset"})],i.prototype,"sideOffset",2),s([n({type:Number,attribute:"align-offset"})],i.prototype,"alignOffset",2),s([n({converter:P,attribute:"avoid-collisions"})],i.prototype,"avoidCollisions",2),s([n({type:Number,attribute:"collision-padding"})],i.prototype,"collisionPadding",2),s([n({attribute:!1})],i.prototype,"collisionBoundary",2),i=s([v("skdx-select-content","select","content")],i);export{i as SkdxSelectContent};
+    `],s([r({type:String})],o.prototype,"side",2),s([r({type:String})],o.prototype,"align",2),s([r({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),s([r({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),s([r({converter:P,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),s([r({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),s([r({attribute:!1})],o.prototype,"collisionBoundary",2),s([r({type:Boolean,reflect:!0,attribute:"data-match-width"})],o.prototype,"matchWidth",2),o=s([y("skdx-select-content","select","content")],o);export{o as SkdxSelectContent};

package/dist/select/SelectEmpty.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},k=(o,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!b.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var C=o=>k(a({},"__esModule",{value:!0}),o),m=(o,e,r,s)=>{for(var t=s>1?void 0:s?p(e,r):e,c=o.length-1,d;c>=0;c--)(d=o[c])&&(t=(s?d(e,r,t):d(t))||t);return s&&t&&a(e,r,t),t};var L={};f(L,{SkdxSelectEmpty:()=>l});module.exports=C(L);var i=require("lit"),h=require("../internal/closest.cjs"),u=require("../internal/define.cjs"),n=require("./family.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,n.SELECT_FAMILY.selector),this.root?.addEventListener(n.SELECT_FAMILY.event,this.onRootUpdate),this.setAttribute("role","presentation"),this.setAttribute("aria-live","polite")}disconnectedCallback(){this.root?.removeEventListener(n.SELECT_FAMILY.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=m([(0,u.customElement)("skdx-select-empty","select","empty")],l);0&&(module.exports={SkdxSelectEmpty});

package/dist/select/SelectEmpty.d.cts

@@ -0,0 +1,22 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Message shown in place of the option list when the filter leaves no `<skdx-select-item>` standing, rendered beside the `role="listbox"` with `aria-live="polite"`.
+ *
+ * @example
+ * ```html
+ * <skdx-select-empty>No results found</skdx-select-empty>
+ * ```
+ */
+export declare class SkdxSelectEmpty extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-empty': SkdxSelectEmpty;
+    }
+}

package/dist/select/SelectEmpty.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Message shown in place of the option list when the filter leaves no `<skdx-select-item>` standing, rendered beside the `role="listbox"` with `aria-live="polite"`.
+ *
+ * @example
+ * ```html
+ * <skdx-select-empty>No results found</skdx-select-empty>
+ * ```
+ */
+export declare class SkdxSelectEmpty extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-empty': SkdxSelectEmpty;
+    }
+}

package/dist/select/SelectEmpty.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=(s,t,i,r)=>{for(var e=r>1?void 0:r?m(t,i):t,l=s.length-1,a;l>=0;l--)(a=s[l])&&(e=(r?a(t,i,e):a(e))||e);return r&&e&&p(t,i,e),e};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{SELECT_FAMILY as n}from"./family.js";var o=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=v(this,n.selector),this.root?.addEventListener(n.event,this.onRootUpdate),this.setAttribute("role","presentation"),this.setAttribute("aria-live","polite")}disconnectedCallback(){this.root?.removeEventListener(n.event,this.onRootUpdate),super.disconnectedCallback()}render(){return!this.root||this.root.itemCount>0?d``:d`<slot></slot>`}};o.styles=h`
+    :host {
+      display: block;
+    }
+  `,o=c([b("skdx-select-empty","select","empty")],o);export{o as SkdxSelectEmpty};

package/dist/select/SelectGroup.cjs

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

package/dist/select/SelectGroup.d.cts

@@ -1,13 +1,13 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-select-group>` — groups related `<skdx-select-option>`s together,
- * typically preceded by a `<skdx-select-label>`. Sets `role="group"` on the
- * host element.
+ * Groups related SelectItems under a SelectLabel (role="group"). Automatically wires aria-labelledby. Label is required inside Group.
  */
 export declare class SkdxSelectGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    private readonly onSlotChange;
+    private nameFromLabel;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/select/SelectGroup.d.ts

@@ -1,13 +1,13 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-select-group>` — groups related `<skdx-select-option>`s together,
- * typically preceded by a `<skdx-select-label>`. Sets `role="group"` on the
- * host element.
+ * Groups related SelectItems under a SelectLabel (role="group"). Automatically wires aria-labelledby. Label is required inside Group.
  */
 export declare class SkdxSelectGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    private readonly onSlotChange;
+    private nameFromLabel;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {