@skdx/web-components 0.28.0 → 0.29.0

package/dist/listbox/ListboxAnatomy.d.cts

@@ -8,9 +8,7 @@ export declare const LISTBOX_ANATOMY_GENERATED = "data-skdx-listbox-generated";
 /** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
 export declare const LISTBOX_RENDER_SLOTS: readonly ["option"];
 /**
- * Builds the canonical anatomy as light-DOM children: one Item per `root.options` entry
- * (grouped entries become a Group with a Label). `slot="option"` children provide
- * per-option content instead of plain label text.
+ * Builds the canonical anatomy as light-DOM children: one Item per `root.options` entry, grouped entries becoming a Group with a Label.
  * @internal
  */
 export declare function fillListboxAnatomy(root: SkdxListbox): void;

package/dist/listbox/ListboxAnatomy.d.ts

@@ -8,9 +8,7 @@ export declare const LISTBOX_ANATOMY_GENERATED = "data-skdx-listbox-generated";
 /** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
 export declare const LISTBOX_RENDER_SLOTS: readonly ["option"];
 /**
- * Builds the canonical anatomy as light-DOM children: one Item per `root.options` entry
- * (grouped entries become a Group with a Label). `slot="option"` children provide
- * per-option content instead of plain label text.
+ * Builds the canonical anatomy as light-DOM children: one Item per `root.options` entry, grouped entries becoming a Group with a Label.
  * @internal
  */
 export declare function fillListboxAnatomy(root: SkdxListbox): void;

package/dist/listbox/ListboxAnatomy.js

@@ -1 +1 @@
-import{buildOptionElements as n,renderSlotContent as s}from"../internal/options.js";import"./ListboxItem.js";import"./ListboxItemIndicator.js";import"./ListboxGroup.js";import"./ListboxLabel.js";var r="data-skdx-listbox-generated",b=["option"];function a(t){let i=s(t,"option"),o=n(t.options??[],{item:"skdx-listbox-item",group:"skdx-listbox-group",groupLabel:"skdx-listbox-label",itemContent:i});for(let e of o)e.setAttribute(r,"");t.replaceChildren(...o)}export{r as LISTBOX_ANATOMY_GENERATED,b as LISTBOX_RENDER_SLOTS,a as fillListboxAnatomy};
+import{buildOptionElements as n,renderSlotContent as s}from"../internal/options.js";import"./ListboxItem.js";import"./ListboxItemIndicator.js";import"./ListboxGroup.js";import"./ListboxLabel.js";var r="data-skdx-listbox-generated",b=["option"];function a(t){let i=s(t,"option"),o=n(t.options??[],{item:"skdx-listbox-item",group:"skdx-listbox-group",groupLabel:"skdx-listbox-label",itemIndicator:"skdx-listbox-item-indicator",itemContent:i});for(let e of o)e.setAttribute(r,"");t.replaceChildren(...o)}export{r as LISTBOX_ANATOMY_GENERATED,b as LISTBOX_RENDER_SLOTS,a as fillListboxAnatomy};

package/dist/listbox/ListboxGroup.cjs

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

package/dist/listbox/ListboxGroup.d.cts

@@ -1,14 +1,12 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-listbox-group>` — groups related items under a label.
- * Sets `role="group"` and `aria-labelledby` pointing at the label.
- * Unlike select groups, requires the label for screen readers.
+ * Groups related listbox items under a label, setting `role="group"` and `aria-labelledby` pointing at it.
  *
  * @example
  * ```html
  * <skdx-listbox-group>
  *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
- *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ *   <skdx-listbox-item value="ruby">Ruby</skdx-listbox-item>
  * </skdx-listbox-group>
  * ```
  */
@@ -17,7 +15,7 @@ export declare class SkdxListboxGroup extends LitElement {
     connectedCallback(): void;
     private readonly handleSlotChange;
     private syncLabel;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxGroup.d.ts

@@ -1,14 +1,12 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-listbox-group>` — groups related items under a label.
- * Sets `role="group"` and `aria-labelledby` pointing at the label.
- * Unlike select groups, requires the label for screen readers.
+ * Groups related listbox items under a label, setting `role="group"` and `aria-labelledby` pointing at it.
  *
  * @example
  * ```html
  * <skdx-listbox-group>
  *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
- *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ *   <skdx-listbox-item value="ruby">Ruby</skdx-listbox-item>
  * </skdx-listbox-group>
  * ```
  */
@@ -17,7 +15,7 @@ export declare class SkdxListboxGroup extends LitElement {
     connectedCallback(): void;
     private readonly handleSlotChange;
     private syncLabel;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxGroup.js

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

package/dist/listbox/ListboxItem.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var m=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},E=(s,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!y.call(s,i)&&i!==e&&d(s,i,{get:()=>t[i],enumerable:!(a=c(t,i))||a.enumerable});return s};var k=s=>E(d({},"__esModule",{value:!0}),s),o=(s,t,e,a)=>{for(var i=a>1?void 0:a?c(t,e):t,h=s.length-1,u;h>=0;h--)(u=s[h])&&(i=(a?u(t,e,i):u(i))||i);return a&&i&&d(t,e,i),i};var A={};m(A,{SkdxListboxItem:()=>r});module.exports=k(A);var l=require("lit"),n=require("lit/decorators.js"),v=require("../internal/define.cjs"),p=require("../internal/styles.cjs"),b=require("./Listbox.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.isDisabled||this.root?.selectItem(this.value,"pointer")};this.handleKeyDown=e=>{e.key!==" "&&e.key!=="Enter"||e.key===" "&&e.shiftKey&&this.root?.multiple||(e.preventDefault(),!this.isDisabled&&this.root?.selectItem(this.value,"keyboard"))};this.handleFocus=()=>{this.isDisabled||this.root?.setActiveValue(this.value)};this.handlePointerEnter=()=>{this.root?.focusOnHover&&!this.isDisabled&&this.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("focus",this.handleFocus),this.addEventListener("pointerenter",this.handlePointerEnter),this.root=(0,b.findListboxRoot)(this),this.root?.addEventListener("skdx-listbox-internal-update",this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener("skdx-listbox-internal-update",this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("pointerenter",this.handlePointerEnter),super.disconnectedCallback()}updated(){this.syncState()}get isDisabled(){return this.disabled||(this.root?.disabled??!1)}syncState(){let e=this.root?.isSelected(this.value)??!1,a=this.isDisabled;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-value",this.value),this.setAttribute("data-state",e?"checked":"unchecked"),this.textValue===void 0?this.removeAttribute("data-text-value"):this.setAttribute("data-text-value",this.textValue),this.posInSet===void 0?this.removeAttribute("aria-posinset"):this.setAttribute("aria-posinset",String(this.posInSet)),this.setSize===void 0?this.removeAttribute("aria-setsize"):this.setAttribute("aria-setsize",String(this.setSize)),a?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),this.tabIndex=!a&&this.root?.activeValue===this.value?0:-1}render(){return l.html`<slot></slot>`}};r.styles=[p.hiddenHostStyles,l.css`
+"use strict";var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var k=(s,i)=>{for(var e in i)d(s,e,{get:i[e],enumerable:!0})},A=(s,i,e,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of y(i))!E.call(s,t)&&t!==e&&d(s,t,{get:()=>i[t],enumerable:!(a=v(i,t))||a.enumerable});return s};var S=s=>A(d({},"__esModule",{value:!0}),s),o=(s,i,e,a)=>{for(var t=a>1?void 0:a?v(i,e):i,h=s.length-1,u;h>=0;h--)(u=s[h])&&(t=(a?u(i,e,t):u(t))||t);return a&&t&&d(i,e,t),t};var g={};k(g,{SkdxListboxItem:()=>r});module.exports=S(g);var l=require("lit"),n=require("lit/decorators.js"),p=require("../internal/define.cjs"),b=require("../internal/roving-tab-stop.cjs"),m=require("../internal/styles.cjs"),c=require("./family.cjs"),f=require("./Listbox.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=e=>{this.isDisabled||!this.selectsOnClick(e)||this.root?.selectItem(this.value,"pointer")};this.handleKeyDown=e=>{e.key!==" "&&e.key!=="Enter"||e.key===" "&&e.shiftKey&&this.root?.multiple||(e.preventDefault(),!this.isDisabled&&this.root?.selectItem(this.value,"keyboard"))};this.handleFocus=()=>{this.isDisabled||this.root?.setActiveValue(this.value)};this.handlePointerEnter=()=>{this.root?.focusOnHover&&!this.isDisabled&&this.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("focus",this.handleFocus),this.addEventListener("pointerenter",this.handlePointerEnter),this.root=(0,f.findListboxRoot)(this),this.root?.addEventListener(c.LISTBOX_FAMILY.event,this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener(c.LISTBOX_FAMILY.event,this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("pointerenter",this.handlePointerEnter),super.disconnectedCallback()}updated(){this.syncState()}get isDisabled(){return this.disabled||(this.root?.disabled??!1)}syncState(){let e=this.root?.isSelected(this.value)??!1,a=this.isDisabled;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-value",this.value),this.setAttribute("data-state",e?"checked":"unchecked"),this.textValue===void 0?this.removeAttribute("data-text-value"):this.setAttribute("data-text-value",this.textValue),this.posInSet===void 0?this.removeAttribute("aria-posinset"):this.setAttribute("aria-posinset",String(this.posInSet)),this.setSize===void 0?this.removeAttribute("aria-setsize"):this.setAttribute("aria-setsize",String(this.setSize)),a?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"));let t=this.root?.activeValue??null;this.tabIndex=(0,b.rovingTabIndex)(t!==null,t===this.value,a)}selectsOnClick(e){return!0}render(){return l.html`<slot></slot>`}};r.styles=[m.hiddenHostStyles,l.css`
       :host {
         display: block;
       }
-    `],o([(0,n.property)({type:String})],r.prototype,"value",2),o([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),o([(0,n.property)({type:String,attribute:"text-value"})],r.prototype,"textValue",2),o([(0,n.property)({type:Number,attribute:"pos-in-set"})],r.prototype,"posInSet",2),o([(0,n.property)({type:Number,attribute:"set-size"})],r.prototype,"setSize",2),r=o([(0,v.customElement)("skdx-listbox-item","listbox","item")],r);0&&(module.exports={SkdxListboxItem});
+    `],o([(0,n.property)({type:String})],r.prototype,"value",2),o([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),o([(0,n.property)({type:String,attribute:"text-value"})],r.prototype,"textValue",2),o([(0,n.property)({type:Number,attribute:"pos-in-set"})],r.prototype,"posInSet",2),o([(0,n.property)({type:Number,attribute:"set-size"})],r.prototype,"setSize",2),r=o([(0,p.customElement)("skdx-listbox-item","listbox","item")],r);0&&(module.exports={SkdxListboxItem});

package/dist/listbox/ListboxItem.d.cts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-listbox-item>` — selectable option in `<skdx-listbox>`.
- * Click / Enter / Space selects (replace or toggle if `multiple`). Moves list's roving tab stop.
- * `role="option"`, `aria-selected`, `data-state`, roving `tabindex` on host in light DOM.
- * Disabled options skip keyboard navigation but stay in DOM with `aria-selected`.
+ * Selectable option in `<skdx-listbox>`, setting `role="option"`, `aria-selected`, `data-state`, and roving `tabindex` on the host.
  * @example
  * ```html
- * <skdx-listbox-item value="react" text-value="React">
+ * <skdx-listbox-item value="ruby" text-value="Ruby">
  *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
  *   React
  * </skdx-listbox-item>
@@ -14,7 +11,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxListboxItem extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Identifier committed to the listbox's value when this option is chosen. Required. */
+    /** Identifier committed to the listbox's value when this option is chosen (required). */
     value: string;
     /**
      * Excludes this option from selection and from arrow/typeahead navigation.
@@ -22,18 +19,12 @@ export declare class SkdxListboxItem extends LitElement {
      */
     disabled: boolean;
     /**
-     * Text typeahead matches this option against, published as
-     * `data-text-value`. Needed whenever the option renders more than its
-     * label — an `<skdx-listbox-item-indicator>` glyph, an icon, a second line —
-     * since the fallback is the option's whole rendered text content.
+     * Text typeahead matches this option against, published as `data-text-value`; needed whenever the option renders more than its label.
      * @default undefined — falls back to the option's rendered text content.
      */
     textValue?: string;
     /**
-     * This option's 1-based position in the *whole* option set, published as
-     * `aria-posinset`. Only needed for a virtualized or paged listbox, where
-     * without it a screen reader announces the DOM's own count instead of the
-     * true position. Set together with `setSize`.
+     * This option's 1-based position in the whole option set, published as `aria-posinset`; set together with `setSize` for a virtualized or paged listbox.
      * @default undefined — the option set is exactly what is rendered.
      */
     posInSet?: number;
@@ -46,14 +37,15 @@ export declare class SkdxListboxItem extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
-    /** Whether this option is disabled in its own right or by the whole list. */
     private get isDisabled();
     private syncState;
+    /** @internal Whether a click on this option should commit it; Transfer's Shift+Click ranges instead. */
+    protected selectsOnClick(_event: MouseEvent): boolean;
     private readonly handleClick;
     private readonly handleKeyDown;
     private readonly handleFocus;
     private readonly handlePointerEnter;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxItem.d.ts

@@ -1,12 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-listbox-item>` — selectable option in `<skdx-listbox>`.
- * Click / Enter / Space selects (replace or toggle if `multiple`). Moves list's roving tab stop.
- * `role="option"`, `aria-selected`, `data-state`, roving `tabindex` on host in light DOM.
- * Disabled options skip keyboard navigation but stay in DOM with `aria-selected`.
+ * Selectable option in `<skdx-listbox>`, setting `role="option"`, `aria-selected`, `data-state`, and roving `tabindex` on the host.
  * @example
  * ```html
- * <skdx-listbox-item value="react" text-value="React">
+ * <skdx-listbox-item value="ruby" text-value="Ruby">
  *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
  *   React
  * </skdx-listbox-item>
@@ -14,7 +11,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxListboxItem extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Identifier committed to the listbox's value when this option is chosen. Required. */
+    /** Identifier committed to the listbox's value when this option is chosen (required). */
     value: string;
     /**
      * Excludes this option from selection and from arrow/typeahead navigation.
@@ -22,18 +19,12 @@ export declare class SkdxListboxItem extends LitElement {
      */
     disabled: boolean;
     /**
-     * Text typeahead matches this option against, published as
-     * `data-text-value`. Needed whenever the option renders more than its
-     * label — an `<skdx-listbox-item-indicator>` glyph, an icon, a second line —
-     * since the fallback is the option's whole rendered text content.
+     * Text typeahead matches this option against, published as `data-text-value`; needed whenever the option renders more than its label.
      * @default undefined — falls back to the option's rendered text content.
      */
     textValue?: string;
     /**
-     * This option's 1-based position in the *whole* option set, published as
-     * `aria-posinset`. Only needed for a virtualized or paged listbox, where
-     * without it a screen reader announces the DOM's own count instead of the
-     * true position. Set together with `setSize`.
+     * This option's 1-based position in the whole option set, published as `aria-posinset`; set together with `setSize` for a virtualized or paged listbox.
      * @default undefined — the option set is exactly what is rendered.
      */
     posInSet?: number;
@@ -46,14 +37,15 @@ export declare class SkdxListboxItem extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
-    /** Whether this option is disabled in its own right or by the whole list. */
     private get isDisabled();
     private syncState;
+    /** @internal Whether a click on this option should commit it; Transfer's Shift+Click ranges instead. */
+    protected selectsOnClick(_event: MouseEvent): boolean;
     private readonly handleClick;
     private readonly handleKeyDown;
     private readonly handleFocus;
     private readonly handlePointerEnter;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxItem.js

@@ -1,5 +1,5 @@
-var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(n,a,e,i)=>{for(var s=i>1?void 0:i?u(a,e):a,l=n.length-1,d;l>=0;l--)(d=n[l])&&(s=(i?d(a,e,s):d(s))||s);return i&&s&&h(a,e,s),s};import{css as c,html as v,LitElement as p}from"lit";import{property as o}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";import{findListboxRoot as y}from"./Listbox.js";var t=class extends p{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.isDisabled||this.root?.selectItem(this.value,"pointer")};this.handleKeyDown=e=>{e.key!==" "&&e.key!=="Enter"||e.key===" "&&e.shiftKey&&this.root?.multiple||(e.preventDefault(),!this.isDisabled&&this.root?.selectItem(this.value,"keyboard"))};this.handleFocus=()=>{this.isDisabled||this.root?.setActiveValue(this.value)};this.handlePointerEnter=()=>{this.root?.focusOnHover&&!this.isDisabled&&this.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("focus",this.handleFocus),this.addEventListener("pointerenter",this.handlePointerEnter),this.root=y(this),this.root?.addEventListener("skdx-listbox-internal-update",this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener("skdx-listbox-internal-update",this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("pointerenter",this.handlePointerEnter),super.disconnectedCallback()}updated(){this.syncState()}get isDisabled(){return this.disabled||(this.root?.disabled??!1)}syncState(){let e=this.root?.isSelected(this.value)??!1,i=this.isDisabled;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-value",this.value),this.setAttribute("data-state",e?"checked":"unchecked"),this.textValue===void 0?this.removeAttribute("data-text-value"):this.setAttribute("data-text-value",this.textValue),this.posInSet===void 0?this.removeAttribute("aria-posinset"):this.setAttribute("aria-posinset",String(this.posInSet)),this.setSize===void 0?this.removeAttribute("aria-setsize"):this.setAttribute("aria-setsize",String(this.setSize)),i?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),this.tabIndex=!i&&this.root?.activeValue===this.value?0:-1}render(){return v`<slot></slot>`}};t.styles=[f,c`
+var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(n,a,e,s)=>{for(var t=s>1?void 0:s?c(a,e):a,l=n.length-1,d;l>=0;l--)(d=n[l])&&(t=(s?d(a,e,t):d(t))||t);return s&&t&&u(a,e,t),t};import{css as v,html as p,LitElement as b}from"lit";import{property as o}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{rovingTabIndex as f}from"../internal/roving-tab-stop.js";import{hiddenHostStyles as y}from"../internal/styles.js";import{LISTBOX_FAMILY as h}from"./family.js";import{findListboxRoot as E}from"./Listbox.js";var i=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=e=>{this.isDisabled||!this.selectsOnClick(e)||this.root?.selectItem(this.value,"pointer")};this.handleKeyDown=e=>{e.key!==" "&&e.key!=="Enter"||e.key===" "&&e.shiftKey&&this.root?.multiple||(e.preventDefault(),!this.isDisabled&&this.root?.selectItem(this.value,"keyboard"))};this.handleFocus=()=>{this.isDisabled||this.root?.setActiveValue(this.value)};this.handlePointerEnter=()=>{this.root?.focusOnHover&&!this.isDisabled&&this.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("focus",this.handleFocus),this.addEventListener("pointerenter",this.handlePointerEnter),this.root=E(this),this.root?.addEventListener(h.event,this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener(h.event,this.onRootUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("pointerenter",this.handlePointerEnter),super.disconnectedCallback()}updated(){this.syncState()}get isDisabled(){return this.disabled||(this.root?.disabled??!1)}syncState(){let e=this.root?.isSelected(this.value)??!1,s=this.isDisabled;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-value",this.value),this.setAttribute("data-state",e?"checked":"unchecked"),this.textValue===void 0?this.removeAttribute("data-text-value"):this.setAttribute("data-text-value",this.textValue),this.posInSet===void 0?this.removeAttribute("aria-posinset"):this.setAttribute("aria-posinset",String(this.posInSet)),this.setSize===void 0?this.removeAttribute("aria-setsize"):this.setAttribute("aria-setsize",String(this.setSize)),s?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"));let t=this.root?.activeValue??null;this.tabIndex=f(t!==null,t===this.value,s)}selectsOnClick(e){return!0}render(){return p`<slot></slot>`}};i.styles=[y,v`
       :host {
         display: block;
       }
-    `],r([o({type:String})],t.prototype,"value",2),r([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([o({type:String,attribute:"text-value"})],t.prototype,"textValue",2),r([o({type:Number,attribute:"pos-in-set"})],t.prototype,"posInSet",2),r([o({type:Number,attribute:"set-size"})],t.prototype,"setSize",2),t=r([b("skdx-listbox-item","listbox","item")],t);export{t as SkdxListboxItem};
+    `],r([o({type:String})],i.prototype,"value",2),r([o({type:Boolean,reflect:!0})],i.prototype,"disabled",2),r([o({type:String,attribute:"text-value"})],i.prototype,"textValue",2),r([o({type:Number,attribute:"pos-in-set"})],i.prototype,"posInSet",2),r([o({type:Number,attribute:"set-size"})],i.prototype,"setSize",2),i=r([m("skdx-listbox-item","listbox","item")],i);export{i as SkdxListboxItem};

package/dist/listbox/ListboxItemIndicator.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var v=(o,t)=>{for(var i in t)d(o,i,{get:t[i],enumerable:!0})},f=(o,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!x.call(o,e)&&e!==i&&d(o,e,{get:()=>t[e],enumerable:!(s=p(t,e))||s.enumerable});return o};var k=o=>f(d({},"__esModule",{value:!0}),o),c=(o,t,i,s)=>{for(var e=s>1?void 0:s?p(t,i):t,a=o.length-1,n;a>=0;a--)(n=o[a])&&(e=(s?n(t,i,e):n(e))||e);return s&&e&&d(t,i,e),e};var y={};v(y,{SkdxListboxItemIndicator:()=>r});module.exports=k(y);var l=require("lit"),m=require("lit/decorators.js"),h=require("../internal/define.cjs"),u=require("../internal/styles.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-listbox"),this.root?.addEventListener("skdx-listbox-internal-update",this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener("skdx-listbox-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(){this.syncState()}syncState(){let i=this.closest("skdx-listbox-item"),s=i?this.root?.isSelected(i.value)??!1:!1;this.setAttribute("data-state",s?"checked":"unchecked"),this.hidden=!this.forceMount&&!s}render(){return l.html`<slot></slot>`}};r.styles=[u.hiddenHostStyles,l.css`
+"use strict";var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var i in t)a(o,i,{get:t[i],enumerable:!0})},x=(o,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!f.call(o,e)&&e!==i&&a(o,e,{get:()=>t[e],enumerable:!(s=m(t,e))||s.enumerable});return o};var k=o=>x(a({},"__esModule",{value:!0}),o),p=(o,t,i,s)=>{for(var e=s>1?void 0:s?m(t,i):t,n=o.length-1,c;n>=0;n--)(c=o[n])&&(e=(s?c(t,i,e):c(e))||e);return s&&e&&a(t,i,e),e};var L={};y(L,{SkdxListboxItemIndicator:()=>r});module.exports=k(L);var l=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),d=require("./family.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=d.LISTBOX_FAMILY.root(this),this.root?.addEventListener(d.LISTBOX_FAMILY.event,this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener(d.LISTBOX_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}updated(){this.syncState()}syncState(){let i=this.closest("skdx-listbox-item"),s=i?this.root?.isSelected(i.value)??!1:!1;this.setAttribute("data-state",s?"checked":"unchecked"),this.hidden=!this.forceMount&&!s}render(){return l.html`<slot></slot>`}};r.styles=[v.hiddenHostStyles,l.css`
       :host {
         display: inline-block;
       }
-    `],c([(0,m.property)({type:Boolean,attribute:"force-mount"})],r.prototype,"forceMount",2),r=c([(0,h.customElement)("skdx-listbox-item-indicator","listbox","item-indicator")],r);0&&(module.exports={SkdxListboxItemIndicator});
+    `],p([(0,h.property)({type:Boolean,attribute:"force-mount"})],r.prototype,"forceMount",2),r=p([(0,u.customElement)("skdx-listbox-item-indicator","listbox","item-indicator")],r);0&&(module.exports={SkdxListboxItemIndicator});

package/dist/listbox/ListboxItemIndicator.d.cts

@@ -1,20 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-listbox-item-indicator>` — renders slotted content (typically a check
- * glyph) only while the `<skdx-listbox-item>` it sits in is selected. Hides
- * otherwise unless `force-mount` is set. `aria-hidden="true"` since the option's
- * `aria-selected` already carries the state.
- *
- * Selection is read off the root (via `closest()`) not the item's `data-state`
- * attribute: both re-render from the same broadcast, and using the attribute
- * could make this element's output depend on update order.
- *
- * Give the option a `text-value` when rendering an indicator: typeahead otherwise
- * matches against the whole text content including the glyph.
+ * Renders slotted content (typically a check glyph) only while its `<skdx-listbox-item>` is selected, or always when `force-mount` is set.
  *
  * @example
  * ```html
- * <skdx-listbox-item value="react" text-value="React">
+ * <skdx-listbox-item value="ruby" text-value="Ruby">
  *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
  *   React
  * </skdx-listbox-item>
@@ -36,7 +26,7 @@ export declare class SkdxListboxItemIndicator extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private syncState;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxItemIndicator.d.ts

@@ -1,20 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-listbox-item-indicator>` — renders slotted content (typically a check
- * glyph) only while the `<skdx-listbox-item>` it sits in is selected. Hides
- * otherwise unless `force-mount` is set. `aria-hidden="true"` since the option's
- * `aria-selected` already carries the state.
- *
- * Selection is read off the root (via `closest()`) not the item's `data-state`
- * attribute: both re-render from the same broadcast, and using the attribute
- * could make this element's output depend on update order.
- *
- * Give the option a `text-value` when rendering an indicator: typeahead otherwise
- * matches against the whole text content including the glyph.
+ * Renders slotted content (typically a check glyph) only while its `<skdx-listbox-item>` is selected, or always when `force-mount` is set.
  *
  * @example
  * ```html
- * <skdx-listbox-item value="react" text-value="React">
+ * <skdx-listbox-item value="ruby" text-value="Ruby">
  *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
  *   React
  * </skdx-listbox-item>
@@ -36,7 +26,7 @@ export declare class SkdxListboxItemIndicator extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private syncState;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxItemIndicator.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(r,s,o,t)=>{for(var e=t>1?void 0:t?c(s,o):s,l=r.length-1,d;l>=0;l--)(d=r[l])&&(e=(t?d(s,o,e):d(e))||e);return t&&e&&n(s,o,e),e};import{css as p,html as m,LitElement as h}from"lit";import{property as u}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as x}from"../internal/styles.js";var i=class extends h{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-listbox"),this.root?.addEventListener("skdx-listbox-internal-update",this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener("skdx-listbox-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(){this.syncState()}syncState(){let o=this.closest("skdx-listbox-item"),t=o?this.root?.isSelected(o.value)??!1:!1;this.setAttribute("data-state",t?"checked":"unchecked"),this.hidden=!this.forceMount&&!t}render(){return m`<slot></slot>`}};i.styles=[x,p`
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(r,s,o,t)=>{for(var e=t>1?void 0:t?p(s,o):s,l=r.length-1,a;l>=0;l--)(a=r[l])&&(e=(t?a(s,o,e):a(e))||e);return t&&e&&c(s,o,e),e};import{css as m,html as h,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";import{LISTBOX_FAMILY as n}from"./family.js";var i=class extends u{constructor(){super(...arguments);this.forceMount=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=n.root(this),this.root?.addEventListener(n.event,this.onRootUpdate),this.syncState()}disconnectedCallback(){this.root?.removeEventListener(n.event,this.onRootUpdate),super.disconnectedCallback()}updated(){this.syncState()}syncState(){let o=this.closest("skdx-listbox-item"),t=o?this.root?.isSelected(o.value)??!1:!1;this.setAttribute("data-state",t?"checked":"unchecked"),this.hidden=!this.forceMount&&!t}render(){return h`<slot></slot>`}};i.styles=[f,m`
       :host {
         display: inline-block;
       }
-    `],a([u({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=a([b("skdx-listbox-item-indicator","listbox","item-indicator")],i);export{i as SkdxListboxItemIndicator};
+    `],d([v({type:Boolean,attribute:"force-mount"})],i.prototype,"forceMount",2),i=d([b("skdx-listbox-item-indicator","listbox","item-indicator")],i);export{i as SkdxListboxItemIndicator};

package/dist/listbox/ListboxLabel.cjs

@@ -1,5 +1,5 @@
-"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var E=(l,e)=>{for(var r in e)i(l,r,{get:e[r],enumerable:!0})},b=(l,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!y.call(l,t)&&t!==r&&i(l,t,{get:()=>e[t],enumerable:!(s=c(e,t))||s.enumerable});return l};var g=l=>b(i({},"__esModule",{value:!0}),l),d=(l,e,r,s)=>{for(var t=s>1?void 0:s?c(e,r):e,a=l.length-1,n;a>=0;a--)(n=l[a])&&(t=(s?n(e,r,t):n(t))||t);return s&&t&&i(e,r,t),t};var u={};E(u,{SkdxListboxLabel:()=>o});module.exports=g(u);var m=require("lit"),p=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var o=class extends m.LitElement{render(){return m.html`<slot></slot>`}};o.styles=[f.hiddenHostStyles,m.css`
+"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var T=(l,e)=>{for(var s in e)a(l,s,{get:e[s],enumerable:!0})},h=(l,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!y.call(l,t)&&t!==s&&a(l,t,{get:()=>e[t],enumerable:!(r=n(e,t))||r.enumerable});return l};var E=l=>h(a({},"__esModule",{value:!0}),l),c=(l,e,s,r)=>{for(var t=r>1?void 0:r?n(e,s):e,i=l.length-1,p;i>=0;i--)(p=l[i])&&(t=(r?p(e,s,t):p(t))||t);return r&&t&&a(e,s,t),t};var b={};T(b,{SkdxListboxLabel:()=>o});module.exports=E(b);var m=require("lit"),d=require("../internal/define.cjs"),f=require("../internal/styles.cjs");var o=class extends m.LitElement{render(){return m.html`<slot></slot>`}};o.styles=[f.hiddenHostStyles,m.css`
       :host {
         display: block;
       }
-    `],o=d([(0,p.customElement)("skdx-listbox-label","listbox","label")],o);0&&(module.exports={SkdxListboxLabel});
+    `],o=c([(0,d.customElement)("skdx-listbox-label","listbox","label")],o);0&&(module.exports={SkdxListboxLabel});

package/dist/listbox/ListboxLabel.d.cts

@@ -1,19 +1,18 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * The heading naming an `<skdx-listbox-group>`, with an id for `aria-labelledby`.
- * The label is not an option itself. Must be used inside `<skdx-listbox-group>`.
+ * The heading naming an `<skdx-listbox-group>`, exposing an id for `aria-labelledby`.
  *
  * @example
  * ```html
  * <skdx-listbox-group>
  *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
- *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ *   <skdx-listbox-item value="ruby">Ruby</skdx-listbox-item>
  * </skdx-listbox-group>
  * ```
  */
 export declare class SkdxListboxLabel extends LitElement {
     static styles: import("lit").CSSResult[];
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxLabel.d.ts

@@ -1,19 +1,18 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * The heading naming an `<skdx-listbox-group>`, with an id for `aria-labelledby`.
- * The label is not an option itself. Must be used inside `<skdx-listbox-group>`.
+ * The heading naming an `<skdx-listbox-group>`, exposing an id for `aria-labelledby`.
  *
  * @example
  * ```html
  * <skdx-listbox-group>
  *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
- *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ *   <skdx-listbox-item value="ruby">Ruby</skdx-listbox-item>
  * </skdx-listbox-group>
  * ```
  */
 export declare class SkdxListboxLabel extends LitElement {
     static styles: import("lit").CSSResult[];
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/listbox/ListboxLabel.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(s,l,o,r)=>{for(var e=r>1?void 0:r?c(l,o):l,m=s.length-1,i;m>=0;m--)(i=s[m])&&(e=(r?i(l,o,e):i(e))||e);return r&&e&&n(l,o,e),e};import{css as d,html as p,LitElement as f}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as y}from"../internal/styles.js";var t=class extends f{render(){return p`<slot></slot>`}};t.styles=[y,d`
+var p=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var i=(r,l,o,s)=>{for(var e=s>1?void 0:s?n(l,o):l,m=r.length-1,a;m>=0;m--)(a=r[m])&&(e=(s?a(l,o,e):a(e))||e);return s&&e&&p(l,o,e),e};import{css as c,html as d,LitElement as f}from"lit";import{customElement as u}from"../internal/define.js";import{hiddenHostStyles as y}from"../internal/styles.js";var t=class extends f{render(){return d`<slot></slot>`}};t.styles=[y,c`
       :host {
         display: block;
       }
-    `],t=a([h("skdx-listbox-label","listbox","label")],t);export{t as SkdxListboxLabel};
+    `],t=i([u("skdx-listbox-label","listbox","label")],t);export{t as SkdxListboxLabel};

package/dist/listbox/family.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var d=(t,o)=>{for(var x in o)s(t,x,{get:o[x],enumerable:!0})},l=(t,o,x,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of m(o))!L.call(t,i)&&i!==x&&s(t,i,{get:()=>o[i],enumerable:!(e=b(o,i))||e.enumerable});return t};var p=t=>l(s({},"__esModule",{value:!0}),t);var k={};d(k,{LISTBOX_FAMILY:()=>f});module.exports=p(k);var r=require("../internal/family.cjs"),f=(0,r.defineFamily)("listbox",{selector:"skdx-listbox"});0&&(module.exports={LISTBOX_FAMILY});

package/dist/listbox/family.d.cts

@@ -0,0 +1,3 @@
+import type { SkdxListbox } from './Listbox.cjs';
+/** @internal The broadcast every `<skdx-listbox-*>` part re-renders on, and the lookup that finds their root. */
+export declare const LISTBOX_FAMILY: import("../internal/family.cjs").SkdxFamily<SkdxListbox>;

package/dist/listbox/family.d.ts

@@ -0,0 +1,3 @@
+import type { SkdxListbox } from './Listbox.js';
+/** @internal The broadcast every `<skdx-listbox-*>` part re-renders on, and the lookup that finds their root. */
+export declare const LISTBOX_FAMILY: import("../internal/family.js").SkdxFamily<SkdxListbox>;

package/dist/listbox/family.js

@@ -0,0 +1 @@
+import{defineFamily as o}from"../internal/family.js";var i=o("listbox",{selector:"skdx-listbox"});export{i as LISTBOX_FAMILY};

package/dist/listbox/primitives.d.cts

@@ -1,8 +1,5 @@
 /**
- * Advanced primitives for `<skdx-listbox>` — the parts the recipe composes.
- *
- * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-listbox>` from `@skdx/web-components`) is built from exactly these elements.
+ * Advanced primitives for `<skdx-listbox>` — the parts the recipe composes; reach for these when the derived anatomy isn't the structure you need.
  *
  * @example
  * ```ts
@@ -10,8 +7,8 @@
  * ```
  * ```html
  * <skdx-listbox aria-label="Framework" default-value="react">
- *   <skdx-listbox-item value="react">React</skdx-listbox-item>
- *   <skdx-listbox-item value="vue">Vue</skdx-listbox-item>
+ *   <skdx-listbox-item value="ruby">Ruby</skdx-listbox-item>
+ *   <skdx-listbox-item value="go">Go</skdx-listbox-item>
  * </skdx-listbox>
  * ```
  */

package/dist/listbox/primitives.d.ts

@@ -1,8 +1,5 @@
 /**
- * Advanced primitives for `<skdx-listbox>` — the parts the recipe composes.
- *
- * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-listbox>` from `@skdx/web-components`) is built from exactly these elements.
+ * Advanced primitives for `<skdx-listbox>` — the parts the recipe composes; reach for these when the derived anatomy isn't the structure you need.
  *
  * @example
  * ```ts
@@ -10,8 +7,8 @@
  * ```
  * ```html
  * <skdx-listbox aria-label="Framework" default-value="react">
- *   <skdx-listbox-item value="react">React</skdx-listbox-item>
- *   <skdx-listbox-item value="vue">Vue</skdx-listbox-item>
+ *   <skdx-listbox-item value="ruby">Ruby</skdx-listbox-item>
+ *   <skdx-listbox-item value="go">Go</skdx-listbox-item>
  * </skdx-listbox>
  * ```
  */

package/dist/loading-overlay/LoadingOverlay.cjs

@@ -1,6 +1,9 @@
-"use strict";var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var A=(i,t)=>{for(var e in t)u(i,e,{get:t[e],enumerable:!0})},L=(i,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of E(t))!T.call(i,l)&&l!==e&&u(i,l,{get:()=>t[l],enumerable:!(s=b(t,l))||s.enumerable});return i};var k=i=>L(u({},"__esModule",{value:!0}),i),a=(i,t,e,s)=>{for(var l=s>1?void 0:s?b(t,e):t,h=i.length-1,y;h>=0;h--)(y=i[h])&&(l=(s?y(t,e,l):y(l))||l);return s&&l&&u(t,e,l),l};var C={};A(C,{LOADING_OVERLAY_UPDATE_EVENT:()=>g,SkdxLoadingOverlay:()=>o});module.exports=k(C);var r=require("lit"),n=require("lit/decorators.js"),f=require("../internal/define.cjs"),c=require("../utils/live-announcer.cjs"),p=require("./LoadingOverlayAnatomy.cjs");var d=0,m="",v="";function w(){if(d===0){let i=window.innerWidth-document.documentElement.clientWidth;m=document.body.style.overflow,v=document.body.style.paddingRight,document.body.style.overflow="hidden",i>0&&(document.body.style.paddingRight=`${i}px`)}d++}function B(){d=Math.max(0,d-1),d===0&&(document.body.style.overflow=m,document.body.style.paddingRight=v)}var g="skdx-loading-overlay-internal-update",o=class extends r.LitElement{constructor(){super(...arguments);this.visible=!1;this.fullScreen=!1;this.loadingLabel="Loading";this.delay=0;this.delayElapsed=!1;this.lastVisible=!1;this.hasSynced=!1;this.locked=!1;this.fillAnatomy=()=>(0,p.fillLoadingOverlayAnatomy)(this)}get covered(){return this.renderRoot?.querySelector('[part="covered"]')??null}get effectiveVisible(){return this.visible&&(this.delay<=0||this.delayElapsed)}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,this.setBodyLock(!1),this.covered?.removeAttribute("inert"),this.removeAttribute("aria-busy"),super.disconnectedCallback()}updated(e){(e.has("visible")||e.has("delay"))&&this.rearmDelay(),this.syncState()}rearmDelay(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,!(!this.visible||this.delay<=0)&&(this.delayTimer=setTimeout(()=>{this.delayTimer=void 0,this.delayElapsed=!0,this.syncState()},this.delay))}syncState(){let e=this.effectiveVisible;e?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.covered?.toggleAttribute("inert",e),this.setAttribute("data-state",e?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.fullScreen),this.setBodyLock(e&&this.fullScreen),e?this.announcedLabel!==this.loadingLabel&&(this.announcedLabel=this.loadingLabel,(0,c.announce)(this.loadingLabel)):this.announcedLabel!==void 0&&(this.announcedLabel=void 0,this.loadedLabel?(0,c.announce)(this.loadedLabel):(0,c.clearAnnouncements)("polite")),this.dispatchEvent(new CustomEvent(g));let s=!this.hasSynced;this.hasSynced=!0,e!==this.lastVisible&&(this.lastVisible=e,!s&&this.dispatchEvent(new CustomEvent("visible-change",{detail:e,bubbles:!0,composed:!0})))}setBodyLock(e){e!==this.locked&&(this.locked=e,e?w():B())}render(){return r.html`<div part="covered" data-part="covered">
+"use strict";var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var k=(i,t)=>{for(var e in t)c(i,e,{get:t[e],enumerable:!0})},w=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of A(t))!L.call(i,s)&&s!==e&&c(i,s,{get:()=>t[s],enumerable:!(a=y(t,s))||a.enumerable});return i};var R=i=>w(c({},"__esModule",{value:!0}),i),o=(i,t,e,a)=>{for(var s=a>1?void 0:a?y(t,e):t,p=i.length-1,m;p>=0;p--)(m=i[p])&&(s=(a?m(t,e,s):m(s))||s);return a&&s&&c(t,e,s),s};var V={};k(V,{LOADING_OVERLAY_UPDATE_EVENT:()=>T,SkdxLoadingOverlay:()=>l});module.exports=R(V);var d=require("lit"),r=require("lit/decorators.js"),f=require("../internal/define.cjs"),u=require("../internal/derive.cjs"),b=require("../internal/events.cjs"),h=require("../utils/live-announcer.cjs"),v=require("./LoadingOverlayAnatomy.cjs");var n=0,g="",E="";function B(){if(n===0){let i=window.innerWidth-document.documentElement.clientWidth;g=document.body.style.overflow,E=document.body.style.paddingRight,document.body.style.overflow="hidden",i>0&&(document.body.style.paddingRight=`${i}px`)}n++}function M(){n=Math.max(0,n-1),n===0&&(document.body.style.overflow=g,document.body.style.paddingRight=E)}var T="skdx-loading-overlay-internal-update",l=class extends d.LitElement{constructor(){super(...arguments);this.visible=!1;this.fullScreen=!1;this.loadingLabel="Loading";this.delay=0;this.delayElapsed=!1;this.lastVisible=!1;this.hasSynced=!1;this.locked=!1;this.fillAnatomy=()=>{(0,v.fillLoadingOverlayAnatomy)(this),this.threadEmphasis()}}get covered(){return this.renderRoot?.querySelector('[part="covered"]')??null}get effectiveVisible(){return this.visible&&(this.delay<=0||this.delayElapsed)}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}threadEmphasis(){(0,u.threadAppearance)(this,{emphasis:this.emphasis},[...(0,u.derivedParts)(this,"skdx-loading-overlay-backdrop")])}disconnectedCallback(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,this.setBodyLock(!1),this.covered?.removeAttribute("inert"),this.removeAttribute("aria-busy"),super.disconnectedCallback()}updated(e){(e.has("visible")||e.has("delay"))&&this.rearmDelay(),this.syncState(),this.threadEmphasis()}rearmDelay(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,!(!this.visible||this.delay<=0)&&(this.delayTimer=setTimeout(()=>{this.delayTimer=void 0,this.delayElapsed=!0,this.syncState()},this.delay))}syncState(){let e=this.effectiveVisible;e?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.covered?.toggleAttribute("inert",e),this.setAttribute("data-state",e?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.fullScreen),this.setBodyLock(e&&this.fullScreen),e?this.announcedLabel!==this.loadingLabel&&(this.announcedLabel=this.loadingLabel,(0,h.announce)(this.loadingLabel)):this.announcedLabel!==void 0&&(this.announcedLabel=void 0,this.loadedLabel?(0,h.announce)(this.loadedLabel):(0,h.clearAnnouncements)("polite")),this.dispatchEvent(new CustomEvent(T));let a=!this.hasSynced;this.hasSynced=!0,e!==this.lastVisible&&(this.lastVisible=e,!a&&(0,b.emit)(this,"visible-change",e))}setBodyLock(e){e!==this.locked&&(this.locked=e,e?B():M())}render(){return d.html`<div
+      part="covered"
+      data-part="covered"
+    >
       <slot @slotchange=${this.fillAnatomy}></slot>
-    </div>`}};o.styles=r.css`
+    </div>`}};l.styles=d.css`
     :host {
       display: block;
     }
@@ -10,4 +13,4 @@
     [part='covered'] {
       display: contents;
     }
-  `,a([(0,n.property)({type:Boolean,reflect:!0})],o.prototype,"visible",2),a([(0,n.property)({type:Boolean,reflect:!0,attribute:"full-screen"})],o.prototype,"fullScreen",2),a([(0,n.property)({type:String,attribute:"loading-label"})],o.prototype,"loadingLabel",2),a([(0,n.property)({type:String,attribute:"loaded-label"})],o.prototype,"loadedLabel",2),a([(0,n.property)({type:Number})],o.prototype,"delay",2),o=a([(0,f.customElement)("skdx-loading-overlay","loading-overlay","root")],o);0&&(module.exports={LOADING_OVERLAY_UPDATE_EVENT,SkdxLoadingOverlay});
+  `,o([(0,r.property)({type:Boolean,reflect:!0})],l.prototype,"visible",2),o([(0,r.property)({type:Boolean,reflect:!0,attribute:"full-screen"})],l.prototype,"fullScreen",2),o([(0,r.property)({type:String,attribute:"loading-label"})],l.prototype,"loadingLabel",2),o([(0,r.property)({type:String,attribute:"loaded-label"})],l.prototype,"loadedLabel",2),o([(0,r.property)({type:Number})],l.prototype,"delay",2),o([(0,r.property)({type:String,attribute:"data-emphasis"})],l.prototype,"emphasis",2),l=o([(0,f.customElement)("skdx-loading-overlay","loading-overlay","root")],l);0&&(module.exports={LOADING_OVERLAY_UPDATE_EVENT,SkdxLoadingOverlay});