@skdx/web-components 0.28.0 → 0.29.0

package/dist/list/ListItem.js

@@ -1,16 +1,21 @@
-var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(n,i,o,e)=>{for(var t=e>1?void 0:e?h(i,o):i,s=n.length-1,r;s>=0;s--)(r=n[s])&&(t=(e?r(i,o,t):r(t))||t);return e&&t&&p(i,o,t),t};import{css as u,html as c,LitElement as f,nothing as m}from"lit";import{property as v}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as g}from"../internal/styles.js";import{LIST_ITEM_RENDER_SLOTS as $}from"../list-item/ListItemAnatomy.js";var[d]=$,l=class extends f{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let o=this.querySelector(`:scope > [slot="${d}"]`)!==null,e=o?void 0:this.list?.getDefaultIcon(),t=o||e!==void 0;return c`<li
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,i,o,t)=>{for(var e=t>1?void 0:t?p(i,o):i,l=n.length-1,r;l>=0;l--)(r=n[l])&&(e=(t?r(i,o,e):r(e))||e);return t&&e&&h(i,o,e),e};import{css as u,html as c,LitElement as v,nothing as m}from"lit";import{property as f}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as k}from"../internal/styles.js";import{LIST_ITEM_RENDER_SLOTS as g}from"../list-item/ListItemAnatomy.js";var[d]=g,s=class extends v{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let o=this.querySelector(`:scope > [slot="${d}"]`)!==null,t=o?void 0:this.list?.getDefaultIcon(),e=o||t!==void 0;return c`<li
       part="item"
       role="presentation"
       value=${this.value??m}
-      style=${t?"list-style: none":m}
+      style=${e?"list-style: none":m}
     >
-      ${t?c`<span part="indicator"
-              ><slot name=${d} @slotchange=${this.onIconSlotChange}
-                >${e}</slot
+      ${e?c`<span part="indicator"
+              ><slot
+                name=${d}
+                @slotchange=${this.onIconSlotChange}
+                >${t}</slot
               ></span
-            >`:c`<slot name=${d} @slotchange=${this.onIconSlotChange} hidden></slot>`}
-      <slot></slot>
-    </li>`}};l.styles=[g,u`
+            >`:c`<slot
+              name=${d}
+              @slotchange=${this.onIconSlotChange}
+              hidden
+            ></slot>`}<slot></slot>
+    </li>`}};s.styles=[k,u`
       :host {
         display: contents;
       }
@@ -21,8 +26,15 @@ var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(n,i,o,e
       li::marker {
         color: var(--skdx-list-marker-color, currentColor);
       }
+      /* Shadow content can't be reached by the light-DOM skin stylesheet, so the indicator's box lives here. */
       [part='indicator'] {
         display: inline-flex;
+        flex: none;
         align-items: center;
+        justify-content: center;
+        inline-size: var(--skdx-icon-size-sm, 1em);
+        block-size: var(--skdx-icon-size-sm, 1em);
+        margin-inline-end: var(--skdx-space-2, 0.5em);
+        color: var(--skdx-list-marker-color, currentColor);
       }
-    `],a([v({type:Number})],l.prototype,"value",2),l=a([y("skdx-list-item","list","item")],l);export{l as SkdxListItem};
+    `],a([f({type:Number})],s.prototype,"value",2),s=a([y("skdx-list-item","list","item")],s);export{s as SkdxListItem};

package/dist/list/index.cjs

@@ -1 +1 @@
-"use strict";var e=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var s=(o,t)=>{for(var x in t)e(o,x,{get:t[x],enumerable:!0})},L=(o,t,x,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of k(t))!p.call(o,r)&&r!==x&&e(o,r,{get:()=>t[r],enumerable:!(m=i(t,r))||m.enumerable});return o};var S=o=>L(e({},"__esModule",{value:!0}),o);var I={};s(I,{SkdxList:()=>d.SkdxList,SkdxListItem:()=>f.SkdxListItem});module.exports=S(I);var d=require("./List.cjs"),f=require("./ListItem.cjs");0&&(module.exports={SkdxList,SkdxListItem});
+"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var k=(r,t)=>{for(var i in t)o(r,i,{get:t[i],enumerable:!0})},S=(r,t,i,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of L(t))!d.call(r,e)&&e!==i&&o(r,e,{get:()=>t[e],enumerable:!(x=p(t,e))||x.enumerable});return r};var f=r=>S(o({},"__esModule",{value:!0}),r);var n={};k(n,{SkdxList:()=>s.SkdxList,SkdxListItem:()=>m.SkdxListItem});module.exports=f(n);var s=require("./List.cjs"),m=require("./ListItem.cjs");0&&(module.exports={SkdxList,SkdxListItem});

package/dist/list/index.d.cts

@@ -1,2 +1,3 @@
 export { SkdxList } from './List.cjs';
+export type { SkdxListItemDescriptor, SkdxListOrientation } from './List.cjs';
 export { SkdxListItem } from './ListItem.cjs';

package/dist/list/index.d.ts

@@ -1,2 +1,3 @@
 export { SkdxList } from './List.js';
+export type { SkdxListItemDescriptor, SkdxListOrientation } from './List.js';
 export { SkdxListItem } from './ListItem.js';

package/dist/list/index.js

@@ -1 +1 @@
-import{SkdxList as r}from"./List.js";import{SkdxListItem as e}from"./ListItem.js";export{r as SkdxList,e as SkdxListItem};
+import{SkdxList as e}from"./List.js";import{SkdxListItem as o}from"./ListItem.js";export{e as SkdxList,o as SkdxListItem};

package/dist/listbox/Listbox.cjs

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

package/dist/listbox/Listbox.d.cts

@@ -1,38 +1,30 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import type { SkdxOptionsInput } from '../internal/options.cjs';
 /** @internal Focusable options; disabled ones are skipped, never focused. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /**
- * The `detail` a `value-change` CustomEvent carries. `reason` mirrors
- * `@skdx/shared`'s `change-reason` contract; `previousValue` is `null` for no
- * prior value, the same convention {@link selectedValueOf} uses.
+ * The `detail` payload a `value-change` CustomEvent carries, naming the new selection and the one it replaced.
  */
 export interface SkdxListboxValueChangeDetail {
     /** The whole selection after the change, not the single option that was toggled — see `selectedValue`. */
     value: string[];
-    /** The selection held before this change, or `null` when there was none. */
-    previousValue: string[] | null;
+    /** The selection held before this change, empty when there was none. */
+    previousValue: string[];
     /** What drove the change. */
     reason: 'keyboard' | 'pointer' | 'programmatic';
     /** The first selected value, or `null` when nothing is selected. */
     selectedValue: string | null;
 }
-/**
- * @internal Finds the nearest ancestor listbox. Matched by class, not tag,
- * so subclasses like `<skdx-transfer-list>` are still found.
- */
+/** @internal Finds the nearest ancestor listbox by walking up and matching against the registered custom-element definition. */
 export declare function findListboxRoot(el: Element): SkdxListbox | null;
 /**
- * Standalone WAI-ARIA listbox: one tab stop, arrow-key roving focus, typeahead,
- * single or multiple selection. In single-mode the selection replaces; in
- * multiple-mode Shift+Arrow / Shift+Space extend it, Control+Shift+Home/End act
- * on the whole list. Requires `aria-label` or `aria-labelledby`.
+ * Standalone WAI-ARIA listbox with one tab stop, arrow-key roving focus, typeahead, and single or multiple selection; requires `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```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>
  * ```
  *
@@ -42,25 +34,16 @@ export declare function findListboxRoot(el: Element): SkdxListbox | null;
 export declare class SkdxListbox extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Selected value(s). Accepts `string` or `string[]` under both modes; always
-     * reads back `string[]`. Single-mode with multiple values throws in dev, takes
-     * the first otherwise. As attribute: comma-separated list.
+     * Selected value(s), accepted as `string` or `string[]` under either mode but always read back as `string[]`.
      * @default [] — no option selected until the user picks one.
      */
     get value(): string[];
     set value(next: string | readonly string[] | null | undefined);
-    /** Normalized selection. */
     private _values;
-    /** Track if value has been explicitly set (controls defaultValue seeding). */
     private _valueSet;
-    /**
-     * Resolve cardinality from the DOM until `multiple` property is set.
-     * Attributes can land in any order.
-     */
     private get isMultiple();
     /**
-     * Initial value for uncontrolled usage, read once before the first render
-     * and then left alone. Same shapes as {@link value}.
+     * Initial value for uncontrolled usage, read once before first render and left alone, accepting the same shapes as {@link value}.
      * @default undefined — nothing selected until the user picks an option.
      */
     defaultValue?: string | string[];
@@ -71,33 +54,27 @@ export declare class SkdxListbox extends LitElement {
      */
     multiple: boolean;
     /**
-     * Disables every option in the list at once, exposed as `aria-disabled` and
-     * `data-disabled` here and on each option. An individual
-     * `<skdx-listbox-item>` can still be disabled on its own; the two OR together.
+     * Disables every option at once, exposed as `aria-disabled`/`data-disabled` on the host and each option, ORed with any option's own `disabled`.
      * @default false
      */
     disabled: boolean;
     /**
-     * Enables Control+A to select all (or clear all if already selected) while
-     * `multiple`. Inert when single-select. Opt-out default.
+     * Enables Control+A to select all, or clear all if already selected, while `multiple`; inert when single-select.
      * @default true
      */
     allowSelectAll: boolean;
     /**
-     * Arrow-key navigation axis: `vertical` uses Up/Down, `horizontal` uses
-     * Left/Right. Reflected as `aria-orientation` and `data-orientation`.
+     * Arrow-key navigation axis — `vertical` uses Up/Down, `horizontal` uses Left/Right — reflected as `aria-orientation`/`data-orientation`.
      * @default 'vertical'
      */
     orientation: 'horizontal' | 'vertical';
     /**
-     * Moves roving focus to options on hover. Off by default: real DOM focus
-     * means hovering would steal it from elsewhere on the page.
+     * Moves roving focus to options on hover; off by default.
      * @default false
      */
     focusOnHover: boolean;
     /**
-     * Prevents the last selected option from being deselected while `multiple`.
-     * Blocks Control+A's clearing half too. Doesn't create a selection on its own.
+     * Prevents the last selected option from being deselected while `multiple`, including Control+A's clear.
      * @default false
      */
     disallowEmptySelection: boolean;
@@ -108,64 +85,69 @@ export declare class SkdxListbox extends LitElement {
      * @default undefined — no anatomy is derived; author the Items by hand.
      */
     options?: SkdxOptionsInput;
+    /**
+     * Row spacing the skin applies, reflected as `data-density`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Corner rounding the skin applies, reflected as `data-shape`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+    /** @internal Option holding the roving tab stop; real DOM focus, never aria-activedescendant. */
     activeValue: string | null;
     /** @internal */
     private readonly typeahead;
-    /**
-     * @internal Shift+Space range origin (APG's "most recently selected item").
-     * Non-range commits move it; range commits keep it fixed. Resets on empty
-     * selection. A value, not index, so it survives option removal.
-     */
+    /** @internal Shift+Space range origin (APG's "most recently selected item"), stored as a value so it survives option removal. */
     private selectionAnchor;
-    /** Track `options` reference for anatomy rebuilds; `undefined` if none generated yet. */
     private _anatomyOptionsRef?;
     connectedCallback(): void;
-    /**
-     * Draws anatomy when no consumer-authored parts exist. Gated on `options`
-     * reference (rebuilding tears down every Item and the tab stop).
-     */
     private readonly fillAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(): void;
     protected updated(changed: Map<string, unknown>): void;
     private syncHostState;
-    /**
-     * Set the tab stop to the first selected option, or first enabled one.
-     * Resolved against the DOM, not `selectedValues[0]`, so unrendered or
-     * disabled selections still leave the list reachable by Tab.
-     */
     private seedActiveValue;
     /** Focusable options in document order — the only ordering that is always right. @internal */
     private get renderedOptions();
-    /** Every selected value as an array — the same strict-out shape {@link value} reads back. */
+    /** @internal Every selected value as an array — the same strict-out shape {@link value} reads back. */
     get selectedValues(): string[];
-    /** Reports whether the given value is currently selected in this listbox. */
+    /** @internal Reports whether the given value is currently selected in this listbox. */
     isSelected(value: string): boolean;
-    /**
-     * @internal Selects an option: replaces the selection in single-mode,
-     * toggles it in multi-mode. Dispatches `value-change` with named `reason`.
-     */
+    /** @internal Selects an option, replacing the selection in single-mode or toggling it in multi-mode, and dispatches `value-change`. */
     selectItem(value: string, reason: SkdxListboxValueChangeDetail['reason']): void;
     /**
      * @internal Publishes selection changes, guarding the no-op case centrally.
      */
     private commit;
-    /**
-     * @internal Adds a contiguous range to the selection (Shift+Space,
-     * Control+Shift+Home/End). Additive, not replacement.
-     */
+    /** @internal Adds a contiguous range to the selection (Shift+Space, Control+Shift+Home/End), additive not replacement. */
     private selectRange;
     /** @internal Read anchor, reset if selection is empty. */
     private readAnchor;
     /** @internal Called by an option when it takes focus, moving the tab stop onto it. */
     setActiveValue(value: string | null): void;
-    /**
-     * @internal Handle selection-extending keys (Shift+Arrow, Shift+Space,
-     * Control+Shift+Home/End, Control+A). Returns true if claimed.
-     */
+    /** @internal Handles selection-extending keys (Shift+Arrow, Shift+Space, Control+Shift+Home/End, Control+A); returns true if claimed. */
     private handleSelectionKeys;
+    /** @internal Shift+Arrow: moves focus and adds the landed-on option to the selection. */
+    private extendWithArrow;
+    /** @internal Shift+Space: selects the range between the anchor and the focused option. */
+    private extendFromAnchor;
+    /** @internal Control+Shift+Home/End extend to a list end, not the anchor. */
+    private extendToEdge;
+    /** @internal Control+A toggles all enabled options (toggle-off clears the selection). */
+    private toggleSelectAll;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    /** @internal PageUp/Down jump by PAGE_SIZE steps, not Home/End aliases. */
+    private roveByPage;
+    /** @internal Arrow keys move focus along the orientation axis without wrapping. */
+    private roveByArrow;
+    render(): TemplateResult;
     private readonly handleSlotChange;
 }
 declare global {

package/dist/listbox/Listbox.d.ts

@@ -1,38 +1,30 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import type { SkdxOptionsInput } from '../internal/options.js';
 /** @internal Focusable options; disabled ones are skipped, never focused. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /**
- * The `detail` a `value-change` CustomEvent carries. `reason` mirrors
- * `@skdx/shared`'s `change-reason` contract; `previousValue` is `null` for no
- * prior value, the same convention {@link selectedValueOf} uses.
+ * The `detail` payload a `value-change` CustomEvent carries, naming the new selection and the one it replaced.
  */
 export interface SkdxListboxValueChangeDetail {
     /** The whole selection after the change, not the single option that was toggled — see `selectedValue`. */
     value: string[];
-    /** The selection held before this change, or `null` when there was none. */
-    previousValue: string[] | null;
+    /** The selection held before this change, empty when there was none. */
+    previousValue: string[];
     /** What drove the change. */
     reason: 'keyboard' | 'pointer' | 'programmatic';
     /** The first selected value, or `null` when nothing is selected. */
     selectedValue: string | null;
 }
-/**
- * @internal Finds the nearest ancestor listbox. Matched by class, not tag,
- * so subclasses like `<skdx-transfer-list>` are still found.
- */
+/** @internal Finds the nearest ancestor listbox by walking up and matching against the registered custom-element definition. */
 export declare function findListboxRoot(el: Element): SkdxListbox | null;
 /**
- * Standalone WAI-ARIA listbox: one tab stop, arrow-key roving focus, typeahead,
- * single or multiple selection. In single-mode the selection replaces; in
- * multiple-mode Shift+Arrow / Shift+Space extend it, Control+Shift+Home/End act
- * on the whole list. Requires `aria-label` or `aria-labelledby`.
+ * Standalone WAI-ARIA listbox with one tab stop, arrow-key roving focus, typeahead, and single or multiple selection; requires `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```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>
  * ```
  *
@@ -42,25 +34,16 @@ export declare function findListboxRoot(el: Element): SkdxListbox | null;
 export declare class SkdxListbox extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Selected value(s). Accepts `string` or `string[]` under both modes; always
-     * reads back `string[]`. Single-mode with multiple values throws in dev, takes
-     * the first otherwise. As attribute: comma-separated list.
+     * Selected value(s), accepted as `string` or `string[]` under either mode but always read back as `string[]`.
      * @default [] — no option selected until the user picks one.
      */
     get value(): string[];
     set value(next: string | readonly string[] | null | undefined);
-    /** Normalized selection. */
     private _values;
-    /** Track if value has been explicitly set (controls defaultValue seeding). */
     private _valueSet;
-    /**
-     * Resolve cardinality from the DOM until `multiple` property is set.
-     * Attributes can land in any order.
-     */
     private get isMultiple();
     /**
-     * Initial value for uncontrolled usage, read once before the first render
-     * and then left alone. Same shapes as {@link value}.
+     * Initial value for uncontrolled usage, read once before first render and left alone, accepting the same shapes as {@link value}.
      * @default undefined — nothing selected until the user picks an option.
      */
     defaultValue?: string | string[];
@@ -71,33 +54,27 @@ export declare class SkdxListbox extends LitElement {
      */
     multiple: boolean;
     /**
-     * Disables every option in the list at once, exposed as `aria-disabled` and
-     * `data-disabled` here and on each option. An individual
-     * `<skdx-listbox-item>` can still be disabled on its own; the two OR together.
+     * Disables every option at once, exposed as `aria-disabled`/`data-disabled` on the host and each option, ORed with any option's own `disabled`.
      * @default false
      */
     disabled: boolean;
     /**
-     * Enables Control+A to select all (or clear all if already selected) while
-     * `multiple`. Inert when single-select. Opt-out default.
+     * Enables Control+A to select all, or clear all if already selected, while `multiple`; inert when single-select.
      * @default true
      */
     allowSelectAll: boolean;
     /**
-     * Arrow-key navigation axis: `vertical` uses Up/Down, `horizontal` uses
-     * Left/Right. Reflected as `aria-orientation` and `data-orientation`.
+     * Arrow-key navigation axis — `vertical` uses Up/Down, `horizontal` uses Left/Right — reflected as `aria-orientation`/`data-orientation`.
      * @default 'vertical'
      */
     orientation: 'horizontal' | 'vertical';
     /**
-     * Moves roving focus to options on hover. Off by default: real DOM focus
-     * means hovering would steal it from elsewhere on the page.
+     * Moves roving focus to options on hover; off by default.
      * @default false
      */
     focusOnHover: boolean;
     /**
-     * Prevents the last selected option from being deselected while `multiple`.
-     * Blocks Control+A's clearing half too. Doesn't create a selection on its own.
+     * Prevents the last selected option from being deselected while `multiple`, including Control+A's clear.
      * @default false
      */
     disallowEmptySelection: boolean;
@@ -108,64 +85,69 @@ export declare class SkdxListbox extends LitElement {
      * @default undefined — no anatomy is derived; author the Items by hand.
      */
     options?: SkdxOptionsInput;
+    /**
+     * Row spacing the skin applies, reflected as `data-density`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Corner rounding the skin applies, reflected as `data-shape`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+    /** @internal Option holding the roving tab stop; real DOM focus, never aria-activedescendant. */
     activeValue: string | null;
     /** @internal */
     private readonly typeahead;
-    /**
-     * @internal Shift+Space range origin (APG's "most recently selected item").
-     * Non-range commits move it; range commits keep it fixed. Resets on empty
-     * selection. A value, not index, so it survives option removal.
-     */
+    /** @internal Shift+Space range origin (APG's "most recently selected item"), stored as a value so it survives option removal. */
     private selectionAnchor;
-    /** Track `options` reference for anatomy rebuilds; `undefined` if none generated yet. */
     private _anatomyOptionsRef?;
     connectedCallback(): void;
-    /**
-     * Draws anatomy when no consumer-authored parts exist. Gated on `options`
-     * reference (rebuilding tears down every Item and the tab stop).
-     */
     private readonly fillAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(): void;
     protected updated(changed: Map<string, unknown>): void;
     private syncHostState;
-    /**
-     * Set the tab stop to the first selected option, or first enabled one.
-     * Resolved against the DOM, not `selectedValues[0]`, so unrendered or
-     * disabled selections still leave the list reachable by Tab.
-     */
     private seedActiveValue;
     /** Focusable options in document order — the only ordering that is always right. @internal */
     private get renderedOptions();
-    /** Every selected value as an array — the same strict-out shape {@link value} reads back. */
+    /** @internal Every selected value as an array — the same strict-out shape {@link value} reads back. */
     get selectedValues(): string[];
-    /** Reports whether the given value is currently selected in this listbox. */
+    /** @internal Reports whether the given value is currently selected in this listbox. */
     isSelected(value: string): boolean;
-    /**
-     * @internal Selects an option: replaces the selection in single-mode,
-     * toggles it in multi-mode. Dispatches `value-change` with named `reason`.
-     */
+    /** @internal Selects an option, replacing the selection in single-mode or toggling it in multi-mode, and dispatches `value-change`. */
     selectItem(value: string, reason: SkdxListboxValueChangeDetail['reason']): void;
     /**
      * @internal Publishes selection changes, guarding the no-op case centrally.
      */
     private commit;
-    /**
-     * @internal Adds a contiguous range to the selection (Shift+Space,
-     * Control+Shift+Home/End). Additive, not replacement.
-     */
+    /** @internal Adds a contiguous range to the selection (Shift+Space, Control+Shift+Home/End), additive not replacement. */
     private selectRange;
     /** @internal Read anchor, reset if selection is empty. */
     private readAnchor;
     /** @internal Called by an option when it takes focus, moving the tab stop onto it. */
     setActiveValue(value: string | null): void;
-    /**
-     * @internal Handle selection-extending keys (Shift+Arrow, Shift+Space,
-     * Control+Shift+Home/End, Control+A). Returns true if claimed.
-     */
+    /** @internal Handles selection-extending keys (Shift+Arrow, Shift+Space, Control+Shift+Home/End, Control+A); returns true if claimed. */
     private handleSelectionKeys;
+    /** @internal Shift+Arrow: moves focus and adds the landed-on option to the selection. */
+    private extendWithArrow;
+    /** @internal Shift+Space: selects the range between the anchor and the focused option. */
+    private extendFromAnchor;
+    /** @internal Control+Shift+Home/End extend to a list end, not the anchor. */
+    private extendToEdge;
+    /** @internal Control+A toggles all enabled options (toggle-off clears the selection). */
+    private toggleSelectAll;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    /** @internal PageUp/Down jump by PAGE_SIZE steps, not Home/End aliases. */
+    private roveByPage;
+    /** @internal Arrow keys move focus along the orientation axis without wrapping. */
+    private roveByArrow;
+    render(): TemplateResult;
     private readonly handleSlotChange;
 }
 declare global {

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});