@skdx/web-components 0.28.0 → 0.30.0

package/dist/listbox/Listbox.js

@@ -1,5 +1,5 @@
-var A=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var n=(o,l,e,t)=>{for(var i=t>1?void 0:t?E(l,e):l,u=o.length-1,d;u>=0;u--)(d=o[u])&&(i=(t?d(l,e,i):d(i))||i);return t&&i&&A(l,e,i),i};import{css as k,html as w,LitElement as V}from"lit";import{property as h,state as S}from"lit/decorators.js";import{hasAuthoredParts as O,hasGeneratedContent as D}from"../internal/authored.js";import{customElement as M}from"../internal/define.js";import{nextSelection as K,selectedValueOf as C,selectionAttributeConverter as m,toSelectionValues as y}from"../internal/selection.js";import{hiddenHostStyles as T}from"../internal/styles.js";import{isTypeaheadKey as _,Typeahead as H}from"../internal/typeahead.js";import{fillListboxAnatomy as L,LISTBOX_ANATOMY_GENERATED as v,LISTBOX_RENDER_SLOTS as R}from"./ListboxAnatomy.js";var x='[role="option"]:not([data-disabled])';function U(o,l){return o.length===l.length&&o.every((e,t)=>e===l[t])}function $(o){for(let l=o.parentElement;l!==null;l=l.parentElement)if(l instanceof s||l.localName==="skdx-listbox")return l;return null}var g=10,s=class extends V{constructor(){super(...arguments);this._values=[];this._valueSet=!1;this.multiple=!1;this.disabled=!1;this.allowSelectAll=!0;this.orientation="vertical";this.focusOnHover=!1;this.disallowEmptySelection=!1;this.activeValue=null;this.typeahead=new H;this.selectionAnchor=null;this.fillAnatomy=()=>{if(O(this,v,R)){this._anatomyOptionsRef=void 0;return}(this.options!==this._anatomyOptionsRef||!D(this,v))&&(this._anatomyOptionsRef=this.options,L(this))};this.handleKeyDown=e=>{let t=this.renderedOptions,i=t.indexOf(e.target);if(this.handleSelectionKeys(e,t,i))return;if((e.key==="PageUp"||e.key==="PageDown")&&i!==-1){e.preventDefault();let a=e.key==="PageDown"?g:-g;t[Math.min(t.length-1,Math.max(0,i+a))]?.focus();return}let u=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",d=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp";if(e.key===u||e.key===d){if(e.preventDefault(),t.length===0)return;let a=e.key===u?1:-1;t[Math.min(t.length-1,Math.max(0,i+a))]?.focus();return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if(e.defaultPrevented||!_(e))return;let r=this.typeahead.match(e.key,t.map(z),i);r!==-1&&(e.preventDefault(),t[r].focus())};this.handleSlotChange=()=>{this.fillAnatomy(),this.requestUpdate()}}get value(){return this._values}set value(e){let t=y(e,{multiple:this.isMultiple,label:"Listbox value"}),i=this._values;this._valueSet=!0,this._values=t,this.requestUpdate("value",i)}get isMultiple(){return this.multiple||!this.hasUpdated&&this.hasAttribute("multiple")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.addEventListener("keydown",this.handleKeyDown),this.syncHostState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.typeahead.clear(),super.disconnectedCallback()}willUpdate(){!this.hasUpdated&&!this._valueSet&&(this.value=y(this.defaultValue,{multiple:this.isMultiple,label:"Listbox defaultValue"})),this.activeValue===null&&this.seedActiveValue()}updated(e){this.syncHostState(),this.fillAnatomy(),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-listbox-internal-update"))}syncHostState(){this.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}seedActiveValue(){let e=this.renderedOptions,i=(e.find(u=>this.isSelected(u.getAttribute("data-value")??""))??e[0])?.getAttribute("data-value");i&&(this.activeValue=i)}get renderedOptions(){return Array.from(this.querySelectorAll(x))}get selectedValues(){return this.value}isSelected(e){return this.selectedValues.includes(e)}selectItem(e,t){this.multiple&&this.disallowEmptySelection&&this.selectedValues.length===1&&this.selectedValues[0]===e||(this.selectionAnchor=e,this.commit(K(this.selectedValues,e,this.multiple),t))}commit(e,t){let i=this.selectedValues;U(e,i)||(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,previousValue:i.length===0?null:i,reason:t,selectedValue:C(e)},bubbles:!0,composed:!0})))}selectRange(e){let t=this.selectedValues;this.commit([...t,...e.filter(i=>!t.includes(i))],"keyboard")}readAnchor(){return this.selectedValues.length===0&&(this.selectionAnchor=null),this.selectionAnchor}setActiveValue(e){this.activeValue=e}handleSelectionKeys(e,t,i){if(!this.multiple||i===-1)return!1;let u=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",d=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp";if((e.key===u||e.key===d)&&e.shiftKey){e.preventDefault();let r=t[i+(e.key===u?1:-1)];return r&&(r.focus(),this.selectItem(p(r),"keyboard")),!0}if(e.key===" "&&e.shiftKey){e.preventDefault();let r=this.readAnchor(),a=t.findIndex(b=>p(b)===r),f=Math.min(a===-1?i:a,i),c=Math.max(a===-1?i:a,i);return this.selectRange(t.slice(f,c+1).map(p)),!0}if(e.ctrlKey&&e.shiftKey&&(e.key==="Home"||e.key==="End")){e.preventDefault();let[r,a]=e.key==="Home"?[0,i]:[i,t.length-1];return this.selectRange(t.slice(r,a+1).map(p)),!0}if(this.allowSelectAll&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let r=t.map(p),a=this.selectedValues;return r.every(c=>a.includes(c))?this.multiple&&this.disallowEmptySelection||this.commit(a.filter(c=>!r.includes(c)),"keyboard"):this.commit([...a,...r.filter(c=>!a.includes(c))],"keyboard"),!0}return!1}render(){return w`<slot @slotchange=${this.handleSlotChange}></slot>`}};s.styles=[T,k`
+var A=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var s=(n,d,e,t)=>{for(var i=t>1?void 0:t?E(d,e):d,r=n.length-1,o;r>=0;r--)(o=n[r])&&(i=(t?o(d,e,i):o(i))||i);return t&&i&&A(d,e,i),i};import{css as w,html as S,LitElement as V}from"lit";import{property as u,state as T}from"lit/decorators.js";import{hasAuthoredParts as k,hasGeneratedContent as M}from"../internal/authored.js";import{customElement as K}from"../internal/define.js";import{directionalKey as m}from"../internal/direction.js";import{emit as O}from"../internal/events.js";import{enabledRovingItems as H,resolveTabStopId as D,rovingItemIds as L}from"../internal/roving-tab-stop.js";import{nextSelection as _,selectedValueOf as R,toSelectionValues as p}from"../internal/selection.js";import{selectionAttributeConverter as f}from"../internal/selection-attribute.js";import{hiddenHostStyles as C}from"../internal/styles.js";import{isTypeaheadKey as x,Typeahead as B}from"../internal/typeahead.js";import{LISTBOX_FAMILY as I}from"./family.js";import{fillListboxAnatomy as P,LISTBOX_ANATOMY_GENERATED as y,LISTBOX_RENDER_SLOTS as z}from"./ListboxAnatomy.js";var U='[role="option"]:not([data-disabled])';function N(n,d){return n.length===d.length&&n.every((e,t)=>e===d[t])}function le(n){let d=customElements.get("skdx-listbox");for(let e=n.parentElement;e!==null;e=e.parentElement)if(e.localName==="skdx-listbox"||d!==void 0&&e instanceof d)return e;return null}var v=10,l=class extends V{constructor(){super(...arguments);this._values=[];this._valueSet=!1;this.multiple=!1;this.disabled=!1;this.allowSelectAll=!0;this.orientation="vertical";this.focusOnHover=!1;this.disallowEmptySelection=!1;this.activeValue=null;this.typeahead=new B;this.selectionAnchor=null;this.fillAnatomy=()=>{if(k(this,y,z)){this._anatomyOptionsRef=void 0;return}(this.options!==this._anatomyOptionsRef||!M(this,y))&&(this._anatomyOptionsRef=this.options,P(this))};this.handleKeyDown=e=>{if(e.defaultPrevented)return;let t=this.renderedOptions,i=t.indexOf(e.target);if(this.handleSelectionKeys(e,t,i)||this.roveByPage(e,t,i)||this.roveByArrow(e,t,i))return;if(e.key==="Home"||e.key==="End"){e.preventDefault(),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if(e.defaultPrevented||!x(e))return;let r=this.typeahead.match(e.key,t.map(q),i);r!==-1&&(e.preventDefault(),t[r].focus())};this.handleSlotChange=()=>{this.fillAnatomy(),this.requestUpdate()}}get value(){return this._values}set value(e){let t=p(e,{multiple:this.isMultiple,label:"Listbox value"}),i=this._values;this._valueSet=!0,this._values=t,this.requestUpdate("value",i)}get isMultiple(){return this.multiple||!this.hasUpdated&&this.hasAttribute("multiple")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.addEventListener("keydown",this.handleKeyDown),this.syncHostState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.typeahead.clear(),super.disconnectedCallback()}willUpdate(){!this.hasUpdated&&!this._valueSet&&(this.value=p(this.defaultValue,{multiple:this.isMultiple,label:"Listbox defaultValue"})),this.seedActiveValue()}updated(e){this.syncHostState(),this.fillAnatomy(),e.size>0&&I.notify(this)}syncHostState(){this.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}seedActiveValue(){let e=L(this.renderedOptions,"data-value"),t=D(e,e.filter(i=>this.isSelected(i)),this.activeValue);t&&(this.activeValue=t)}get renderedOptions(){return H(this,U)}get selectedValues(){return this.value}isSelected(e){return this.selectedValues.includes(e)}selectItem(e,t){this.multiple&&this.disallowEmptySelection&&this.selectedValues.length===1&&this.selectedValues[0]===e||(this.selectionAnchor=e,this.commit(_(this.selectedValues,e,this.multiple),t))}commit(e,t){let i=this.selectedValues;N(e,i)||(this.value=e,O(this,"value-change",{value:e,previousValue:i,reason:t,selectedValue:R(e)}))}selectRange(e){let t=this.selectedValues;this.commit([...t,...e.filter(i=>!t.includes(i))],"keyboard")}readAnchor(){return this.selectedValues.length===0&&(this.selectionAnchor=null),this.selectionAnchor}setActiveValue(e){this.activeValue=e}handleSelectionKeys(e,t,i){return!this.multiple||i===-1?!1:this.extendWithArrow(e,t,i)||this.extendFromAnchor(e,t,i)||this.extendToEdge(e,t,i)||this.toggleSelectAll(e,t)}extendWithArrow(e,t,i){let r=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",o=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp",a=m(e.key,this);if(a!==r&&a!==o||!e.shiftKey)return!1;e.preventDefault();let h=t[i+(a===r?1:-1)];return h&&(h.focus(),this.selectItem(c(h),"keyboard")),!0}extendFromAnchor(e,t,i){if(e.key!==" "||!e.shiftKey)return!1;e.preventDefault();let r=this.readAnchor(),o=t.findIndex(b=>c(b)===r),a=o===-1?i:o,h=Math.min(a,i),g=Math.max(a,i);return this.selectRange(t.slice(h,g+1).map(c)),!0}extendToEdge(e,t,i){if(!e.ctrlKey||!e.shiftKey||e.key!=="Home"&&e.key!=="End")return!1;e.preventDefault();let[r,o]=e.key==="Home"?[0,i]:[i,t.length-1];return this.selectRange(t.slice(r,o+1).map(c)),!0}toggleSelectAll(e,t){if(!this.allowSelectAll||!e.ctrlKey&&!e.metaKey||e.key.toLowerCase()!=="a")return!1;e.preventDefault();let i=t.map(c),r=this.selectedValues;return i.every(a=>r.includes(a))?this.multiple&&this.disallowEmptySelection||this.commit(r.filter(a=>!i.includes(a)),"keyboard"):this.commit([...r,...i.filter(a=>!r.includes(a))],"keyboard"),!0}roveByPage(e,t,i){if(e.key!=="PageUp"&&e.key!=="PageDown"||i===-1)return!1;e.preventDefault();let r=e.key==="PageDown"?v:-v;return t[Math.min(t.length-1,Math.max(0,i+r))]?.focus(),!0}roveByArrow(e,t,i){let r=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",o=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp",a=m(e.key,this);if(a!==r&&a!==o)return!1;if(e.preventDefault(),t.length===0)return!0;let h=a===r?1:-1;return t[Math.min(t.length-1,Math.max(0,i+h))]?.focus(),!0}render(){return S`<slot @slotchange=${this.handleSlotChange}></slot>`}};l.styles=[C,w`
       :host {
         display: block;
       }
-    `],n([h({converter:m,reflect:!0,noAccessor:!0})],s.prototype,"value",1),n([h({converter:m,attribute:"default-value"})],s.prototype,"defaultValue",2),n([h({type:Boolean,reflect:!0})],s.prototype,"multiple",2),n([h({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([h({type:Boolean,attribute:"allow-select-all"})],s.prototype,"allowSelectAll",2),n([h({type:String,reflect:!0})],s.prototype,"orientation",2),n([h({type:Boolean,attribute:"focus-on-hover"})],s.prototype,"focusOnHover",2),n([h({type:Boolean,attribute:"disallow-empty-selection"})],s.prototype,"disallowEmptySelection",2),n([h({attribute:!1})],s.prototype,"options",2),n([S()],s.prototype,"activeValue",2),s=n([M("skdx-listbox","listbox","root")],s);function z(o){return o.getAttribute("data-text-value")??o.textContent??""}function p(o){return o.getAttribute("data-value")??""}export{x as OPTION_SELECTOR,s as SkdxListbox,$ as findListboxRoot};
+    `],s([u({converter:f,reflect:!0,noAccessor:!0})],l.prototype,"value",1),s([u({converter:f,attribute:"default-value"})],l.prototype,"defaultValue",2),s([u({type:Boolean,reflect:!0})],l.prototype,"multiple",2),s([u({type:Boolean,reflect:!0})],l.prototype,"disabled",2),s([u({type:Boolean,attribute:"allow-select-all"})],l.prototype,"allowSelectAll",2),s([u({type:String,reflect:!0})],l.prototype,"orientation",2),s([u({type:Boolean,attribute:"focus-on-hover"})],l.prototype,"focusOnHover",2),s([u({type:Boolean,attribute:"disallow-empty-selection"})],l.prototype,"disallowEmptySelection",2),s([u({attribute:!1})],l.prototype,"options",2),s([u({type:String,reflect:!0,attribute:"data-density"})],l.prototype,"density",2),s([u({type:String,reflect:!0,attribute:"data-shape"})],l.prototype,"shape",2),s([u({type:String,reflect:!0,attribute:"data-size"})],l.prototype,"size",2),s([T()],l.prototype,"activeValue",2),l=s([K("skdx-listbox","listbox","root")],l);function q(n){return n.getAttribute("data-text-value")??n.textContent??""}function c(n){return n.getAttribute("data-value")??""}export{U as OPTION_SELECTOR,l as SkdxListbox,le as findListboxRoot};

package/dist/listbox/ListboxAnatomy.cjs

@@ -1 +1 @@
-"use strict";var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var i in o)r(t,i,{get:o[i],enumerable:!0})},b=(t,o,i,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of d(o))!l.call(t,e)&&e!==i&&r(t,e,{get:()=>o[e],enumerable:!(n=x(o,e))||n.enumerable});return t};var a=t=>b(r({},"__esModule",{value:!0}),t);var S={};m(S,{LISTBOX_ANATOMY_GENERATED:()=>p,LISTBOX_RENDER_SLOTS:()=>c,fillListboxAnatomy:()=>L});module.exports=a(S);var s=require("../internal/options.cjs"),k=require("./ListboxItem.cjs"),u=require("./ListboxItemIndicator.cjs"),E=require("./ListboxGroup.cjs"),A=require("./ListboxLabel.cjs"),p="data-skdx-listbox-generated",c=["option"];function L(t){let o=(0,s.renderSlotContent)(t,"option"),i=(0,s.buildOptionElements)(t.options??[],{item:"skdx-listbox-item",group:"skdx-listbox-group",groupLabel:"skdx-listbox-label",itemContent:o});for(let n of i)n.setAttribute(p,"");t.replaceChildren(...i)}0&&(module.exports={LISTBOX_ANATOMY_GENERATED,LISTBOX_RENDER_SLOTS,fillListboxAnatomy});
+"use strict";var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var i in o)r(t,i,{get:o[i],enumerable:!0})},b=(t,o,i,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of d(o))!l.call(t,e)&&e!==i&&r(t,e,{get:()=>o[e],enumerable:!(n=p(o,e))||n.enumerable});return t};var a=t=>b(r({},"__esModule",{value:!0}),t);var k={};m(k,{LISTBOX_ANATOMY_GENERATED:()=>x,LISTBOX_RENDER_SLOTS:()=>c,fillListboxAnatomy:()=>L});module.exports=a(k);var s=require("../internal/options.cjs"),f=require("./ListboxItem.cjs"),u=require("./ListboxItemIndicator.cjs"),E=require("./ListboxGroup.cjs"),A=require("./ListboxLabel.cjs"),x="data-skdx-listbox-generated",c=["option"];function L(t){let o=(0,s.renderSlotContent)(t,"option"),i=(0,s.buildOptionElements)(t.options??[],{item:"skdx-listbox-item",group:"skdx-listbox-group",groupLabel:"skdx-listbox-label",itemIndicator:"skdx-listbox-item-indicator",itemContent:o});for(let n of i)n.setAttribute(x,"");t.replaceChildren(...i)}0&&(module.exports={LISTBOX_ANATOMY_GENERATED,LISTBOX_RENDER_SLOTS,fillListboxAnatomy});

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>
  * ```
  */