@skdx/web-components 0.27.0 → 0.28.0

package/dist/segmented-control/SegmentedControlItem.js

@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(a,r,t,i)=>{for(var e=i>1?void 0:i?h(r,t):r,d=a.length-1,l;d>=0;d--)(l=a[d])&&(e=(i?l(r,t,e):l(e))||e);return i&&e&&c(r,t,e),e};import{css as u,html as v,LitElement as b}from"lit";import{property as n}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";var s=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this._handleClick=()=>{this.effectiveDisabled||this.root?.setValue(this.value)};this._handleFocus=()=>{this.effectiveDisabled||this.root?.setValue(this.value)};this._handleKeydown=t=>{t.key==="Enter"&&t.preventDefault()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-segmented-control"),!this.root)throw new Error("<skdx-segmented-control-item> must be used inside <skdx-segmented-control>.");this.setAttribute("role","radio"),this.setAttribute("data-skdx-segmented-control-item",""),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(){this._sync()}refresh(){this._sync()}get checked(){return this.root?.getSelectedValue()===this.value}get effectiveDisabled(){return this.disabled||(this.root?.disabled??!1)}_sync(){let t=this.root,i=this.checked,e=this.effectiveDisabled;this.setAttribute("aria-checked",String(i)),this.setAttribute("data-state",i?"checked":"unchecked"),this.setAttribute("data-value",this.value),e?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"));let d=t?.getSelectedValue()===void 0&&t?.getFirstEnabledValue()===this.value;this.tabIndex=!e&&(i||d)?0:-1}render(){return v`<slot></slot>`}};s.styles=u`
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(a,r,e,t)=>{for(var i=t>1?void 0:t?h(r,e):r,o=a.length-1,l;o>=0;o--)(l=a[o])&&(i=(t?l(r,e,i):l(i))||i);return t&&i&&c(r,e,i),i};import{css as u,html as b,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";var s=class extends v{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this._handleClick=()=>{this.effectiveDisabled||this.root?.setValue(this.value,"pointer")};this._handleFocus=e=>{if(this.root&&!this.root.selectOnFocus)return;let t=e.relatedTarget;t?.getAttribute("role")==="radio"&&t.closest('[role="radiogroup"]')===this.closest('[role="radiogroup"]')&&(this.effectiveDisabled||this.root?.setValue(this.value,"keyboard"))};this._handleKeydown=e=>{e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.root?.selectOnFocus===!1&&(this.effectiveDisabled||this.root.setValue(this.value,"keyboard")))}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-segmented-control"),!this.root)throw new Error("<skdx-segmented-control-item> must be used inside <skdx-segmented-control>.");this.hasAttribute("disabled")&&(this.disabled=!0),this.setAttribute("role","radio"),this.setAttribute("data-skdx-segmented-control-item",""),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(){this._sync()}refresh(){this._sync()}get checked(){return this.root?.getSelectedValue()===this.value}get effectiveDisabled(){return this.disabled||(this.root?.disabled??!1)}_sync(){let e=this.root,t=this.checked,i=this.effectiveDisabled;this.setAttribute("aria-checked",String(t)),this.setAttribute("data-state",t?"checked":"unchecked"),this.setAttribute("data-value",this.value),i?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),this.removeAttribute("disabled");let o=e?.getSelectedValue()===void 0&&e?.getFirstEnabledValue()===this.value;this.tabIndex=!i&&(t||o)?0:-1}render(){return b`<slot></slot>`}};s.styles=u`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@ var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(a,r,t,i
     :host([data-disabled]) {
       cursor: default;
     }
-  `,o([n({type:String,reflect:!0})],s.prototype,"value",2),o([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=o([f("skdx-segmented-control-item","segmented-control","item")],s);export{s as SkdxSegmentedControlItem};
+  `,d([n({type:String,reflect:!0})],s.prototype,"value",2),d([n({type:Boolean,attribute:!1})],s.prototype,"disabled",2),s=d([f("skdx-segmented-control-item","segmented-control","item")],s);export{s as SkdxSegmentedControlItem};

package/dist/segmented-control/index.cjs

@@ -1 +1 @@
-"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var C=(o,e)=>{for(var r in e)n(o,r,{get:e[r],enumerable:!0})},f=(o,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of l(e))!p.call(o,t)&&t!==r&&n(o,t,{get:()=>e[t],enumerable:!(d=g(e,t))||d.enumerable});return o};var i=o=>f(n({},"__esModule",{value:!0}),o);var k={};C(k,{SkdxSegmentedControl:()=>m.SkdxSegmentedControl,SkdxSegmentedControlIndicator:()=>x.SkdxSegmentedControlIndicator,SkdxSegmentedControlItem:()=>S.SkdxSegmentedControlItem});module.exports=i(k);var m=require("./SegmentedControl.cjs"),S=require("./SegmentedControlItem.cjs"),x=require("./SegmentedControlIndicator.cjs");0&&(module.exports={SkdxSegmentedControl,SkdxSegmentedControlIndicator,SkdxSegmentedControlItem});
+"use strict";var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},S=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!d.call(t,n)&&n!==o&&r(t,n,{get:()=>e[n],enumerable:!(a=l(e,n))||a.enumerable});return t};var p=t=>S(r({},"__esModule",{value:!0}),t);var i={};m(i,{SkdxSegmentedControl:()=>g.SkdxSegmentedControl});module.exports=p(i);var g=require("./SegmentedControl.cjs");0&&(module.exports={SkdxSegmentedControl});

package/dist/segmented-control/index.d.cts

@@ -1,3 +1 @@
-export { SkdxSegmentedControl, type SegmentedControlOrientation } from './SegmentedControl.cjs';
-export { SkdxSegmentedControlItem } from './SegmentedControlItem.cjs';
-export { SkdxSegmentedControlIndicator } from './SegmentedControlIndicator.cjs';
+export { SkdxSegmentedControl, type SegmentedControlOrientation, type SegmentedControlChangeReason, type SegmentedControlValueChangeDetail, } from './SegmentedControl.cjs';

package/dist/segmented-control/index.d.ts

@@ -1,3 +1 @@
-export { SkdxSegmentedControl, type SegmentedControlOrientation } from './SegmentedControl.js';
-export { SkdxSegmentedControlItem } from './SegmentedControlItem.js';
-export { SkdxSegmentedControlIndicator } from './SegmentedControlIndicator.js';
+export { SkdxSegmentedControl, type SegmentedControlOrientation, type SegmentedControlChangeReason, type SegmentedControlValueChangeDetail, } from './SegmentedControl.js';

package/dist/segmented-control/index.js

@@ -1 +1 @@
-import{SkdxSegmentedControl as t}from"./SegmentedControl.js";import{SkdxSegmentedControlItem as n}from"./SegmentedControlItem.js";import{SkdxSegmentedControlIndicator as m}from"./SegmentedControlIndicator.js";export{t as SkdxSegmentedControl,m as SkdxSegmentedControlIndicator,n as SkdxSegmentedControlItem};
+import{SkdxSegmentedControl as n}from"./SegmentedControl.js";export{n as SkdxSegmentedControl};

package/dist/segmented-control/primitives.cjs

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

package/dist/segmented-control/primitives.d.cts

@@ -0,0 +1,18 @@
+/**
+ * Primitives for segmented-control (built from these elements). Use when anatomy's structure
+ * doesn't fit. Imports from this path; tags are global.
+ *
+ * @example
+ * ```ts
+ * import * as SegmentedControl from '@skdx/web-components/primitives/segmented-control';
+ * ```
+ * ```html
+ * <skdx-segmented-control default-value="week" aria-label="Date range">
+ *   <skdx-segmented-control-indicator aria-hidden="true"></skdx-segmented-control-indicator>
+ *   <skdx-segmented-control-item value="day">Day</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="week">Week</skdx-segmented-control-item>
+ * </skdx-segmented-control>
+ * ```
+ */
+export { SkdxSegmentedControlItem } from './SegmentedControlItem.cjs';
+export { SkdxSegmentedControlIndicator } from './SegmentedControlIndicator.cjs';

package/dist/segmented-control/primitives.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Primitives for segmented-control (built from these elements). Use when anatomy's structure
+ * doesn't fit. Imports from this path; tags are global.
+ *
+ * @example
+ * ```ts
+ * import * as SegmentedControl from '@skdx/web-components/primitives/segmented-control';
+ * ```
+ * ```html
+ * <skdx-segmented-control default-value="week" aria-label="Date range">
+ *   <skdx-segmented-control-indicator aria-hidden="true"></skdx-segmented-control-indicator>
+ *   <skdx-segmented-control-item value="day">Day</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="week">Week</skdx-segmented-control-item>
+ * </skdx-segmented-control>
+ * ```
+ */
+export { SkdxSegmentedControlItem } from './SegmentedControlItem.js';
+export { SkdxSegmentedControlIndicator } from './SegmentedControlIndicator.js';

package/dist/segmented-control/primitives.js

@@ -0,0 +1 @@
+import{SkdxSegmentedControlItem as t}from"./SegmentedControlItem.js";import{SkdxSegmentedControlIndicator as d}from"./SegmentedControlIndicator.js";export{d as SkdxSegmentedControlIndicator,t as SkdxSegmentedControlItem};

package/dist/select/Select.cjs

@@ -1,17 +1,19 @@
-"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var E=(a,n)=>{for(var e in n)u(a,e,{get:n[e],enumerable:!0})},w=(a,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of y(n))!C.call(a,i)&&i!==e&&u(a,i,{get:()=>n[i],enumerable:!(t=c(n,i))||t.enumerable});return a};var O=a=>w(u({},"__esModule",{value:!0}),a),r=(a,n,e,t)=>{for(var i=t>1?void 0:t?c(n,e):n,h=a.length-1,m;h>=0;h--)(m=a[h])&&(i=(t?m(n,e,i):m(i))||i);return t&&i&&u(n,e,i),i};var V={};E(V,{SkdxSelect:()=>s});module.exports=O(V);var o=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),g=require("../internal/form-associated.cjs"),f=require("../internal/ids.cjs"),b=require("../internal/open-change-complete.cjs"),p=require("../internal/selection.cjs"),d=require("../internal/styles.cjs");var s=class extends(0,g.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.multiple=!1;this.open=!1;this.disabled=!1;this.required=!1;this.invalid=!1;this.contentId=(0,f.nextId)("skdx-select-content");this.triggerEl=null;this.optionLabels=new Map;this.hasUpdatedOnce=!1}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(){this.hasUpdated||(this.value??(this.value=this.defaultValue))}updated(e){let t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("value")||e.has("multiple")||e.has("name"))&&this.setFormValue(this.formValue()),(e.has("value")||e.has("required")||e.has("multiple"))&&this.syncValidity(),e.has("value")&&!t&&this.emit("value-change",this.value),e.has("open")&&!t&&this.emit("open-change",this.open),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-select-internal-update")),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,b.notifyOpenChangeComplete)(()=>this.querySelector("skdx-select-content"),this.open,i=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:i,bubbles:!0,composed:!0}))))}formValue(){if(!this.multiple)return this.value??null;let e=this.selectedValues;if(!this.name||e.length===0)return null;let t=new FormData;for(let i of e)t.append(this.name,i);return t}syncValidity(){this.setValueMissing(this.required&&this.selectedValues.length===0,"Please select an item in the list.",this.triggerEl)}formResetCallback(){this.value=this.getAttribute("value")??void 0}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}setOpen(e){this.open!==e&&(this.open=e)}get selectedValues(){return(0,p.toValues)(this.value)}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){this.value=(0,p.nextSelection)(this.selectedValues,e,this.multiple)}get collection(){return this.items?this.items.map(t=>({...t,label:this.getOptionLabel(t.value)})):Array.from(this.querySelectorAll("skdx-select-option")).map(t=>({value:t.value,label:this.getOptionLabel(t.value),disabled:t.disabled}))}registerOptionLabel(e,t){this.optionLabels.get(e)!==t&&(this.optionLabels.set(e,t),this.dispatchEvent(new CustomEvent("skdx-select-internal-update")))}getOptionLabel(e){return this.optionLabels.get(e)??this.items?.find(t=>t.value===e)?.label??e}focusTrigger(){this.triggerEl?.focus()}render(){let e=this.selectedValues,t=e.length>0?e:[""];return o.html`
-      <slot></slot>
-      ${this.name?t.map(i=>o.html`<input
+"use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var V=(r,o)=>{for(var e in o)h(r,e,{get:o[e],enumerable:!0})},A=(r,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of C(o))!I.call(r,s)&&s!==e&&h(r,s,{get:()=>o[s],enumerable:!(t=g(o,s))||t.enumerable});return r};var L=r=>A(h({},"__esModule",{value:!0}),r),l=(r,o,e,t)=>{for(var s=t>1?void 0:t?g(o,e):o,d=r.length-1,v;d>=0;d--)(v=r[d])&&(s=(t?v(o,e,s):v(s))||s);return t&&s&&h(o,e,s),s};var M={};V(M,{OPTION_SELECTOR:()=>_,SkdxSelect:()=>i});module.exports=L(M);var u=require("lit"),n=require("lit/decorators.js"),c=require("../internal/authored.cjs"),b=require("../internal/define.cjs"),y=require("../internal/dismiss.cjs"),O=require("../internal/form-associated.cjs"),m=require("../internal/ids.cjs"),E=require("../internal/open-change-complete.cjs"),a=require("../internal/selection.cjs"),f=require("../internal/styles.cjs"),p=require("./SelectAnatomy.cjs");var _='[role="option"]:not([data-disabled])',w={fromAttribute:r=>r===null?void 0:r!=="false",toAttribute:r=>r===void 0?null:String(r)},i=class extends(0,O.FormAssociated)(u.LitElement){constructor(){super(...arguments);this._values=[];this._valueSet=!1;this.multiple=!1;this.deselectable=!1;this.open=!1;this.defaultOpen=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.invalid=!1;this.contentId=(0,m.nextId)("skdx-select-content");this.openIntent="selected";this.triggerEl=null;this.contentEl=null;this.activeId=null;this.optionLabels=new Map;this.hasUpdatedOnce=!1;this.fillAnatomy=()=>{if((0,c.hasAuthoredParts)(this,p.SELECT_ANATOMY_GENERATED,p.SELECT_RENDER_SLOTS)){this._anatomyOptionsRef=void 0;return}this.options!==this._anatomyOptionsRef||!(0,c.hasGeneratedContent)(this,p.SELECT_ANATOMY_GENERATED)?(this._anatomyOptionsRef=this.options,(0,p.fillSelectAnatomy)(this)):(0,p.refreshSelectAnatomyText)(this)}}get value(){return this._values}set value(e){let t=(0,a.toSelectionValues)(e,{multiple:this.isMultiple,label:"Select value"}),s=this._values;this._valueSet=!0,this._values=t,this.requestUpdate("value",s)}get isMultiple(){return this.multiple||!this.hasUpdated&&this.hasAttribute("multiple")}get closesOnSelect(){return this.closeOnSelect??!this.multiple}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-select-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}willUpdate(){!this.hasUpdated&&!this._valueSet&&(this.value=(0,a.toSelectionValues)(this.defaultValue,{multiple:this.isMultiple,label:"Select defaultValue"}))}updated(e){let t=!this.hasUpdatedOnce;if(this.hasUpdatedOnce=!0,this.fillAnatomy(),(e.has("value")||e.has("multiple")||e.has("name"))&&this.setFormValue(this.formValue()),(e.has("value")||e.has("required")||e.has("multiple"))&&this.syncValidity(),e.has("open")&&!this.open&&(this.activeId=null),e.has("value")&&!t){let s=this.selectedValues;this.emit("value-change",{value:s,selectedValue:(0,a.selectedValueOf)(s)})}e.has("open")&&!t&&this.emit("open-change",this.open),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-select-internal-update")),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,E.notifyOpenChangeComplete)(()=>this.querySelector("skdx-select-content"),this.open,s=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:s,bubbles:!0,composed:!0}))))}formValue(){return this.multiple?this.multiFormValue(this.selectedValues):(0,a.selectedValueOf)(this.selectedValues)}syncValidity(){this.setValueMissing(this.required&&this.selectedValues.length===0,"Please select an item in the list.",this.triggerEl)}formResetCallback(){this.value=(0,a.parseSelectionAttribute)(this.getAttribute("value"),{multiple:this.multiple,label:"Select value"})}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}setOpen(e){this.readOnly&&e||this.open!==e&&(this.open=e)}setActiveId(e){this.activeId!==e&&(this.activeId=e,this.dispatchEvent(new CustomEvent("skdx-select-internal-update")))}get valueId(){let e=this.querySelector("skdx-select-value");return e===null?null:(0,m.ensureId)(e,"skdx-select","value")}get selectedValues(){return this.value}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){this.readOnly||(this.value=(0,a.nextSelection)(this.selectedValues,e,this.multiple,this.deselectable))}get collection(){return this.items?this.items.map(t=>({...t,label:this.getOptionLabel(t.value)})):Array.from(this.querySelectorAll("skdx-select-item")).map(t=>({value:t.value,label:this.getOptionLabel(t.value),disabled:t.disabled}))}registerOptionLabel(e,t){this.optionLabels.get(e)!==t&&(this.optionLabels.set(e,t),this.dispatchEvent(new CustomEvent("skdx-select-internal-update")))}getOptionLabel(e){return this.optionLabels.get(e)??this.items?.find(t=>t.value===e)?.label??e}focusTrigger(){this.contentEl&&!(0,y.dispatchAutoFocus)(this.contentEl,"close-auto-focus")||this.triggerEl?.focus()}render(){let e=this.selectedValues,t=e.length>0?e:[""];return u.html`
+      <slot @slotchange=${this.fillAnatomy}></slot>
+      ${this.name?t.map((s,d)=>u.html`<input
                   type="text"
                   aria-hidden="true"
                   tabindex="-1"
                   .name=${this.name??""}
-                  .value=${i}
+                  .value=${s}
                   ?required=${this.required}
                   ?disabled=${this.disabled}
+                  form=${this.formId??u.nothing}
+                  autocomplete=${d===0?this.autoComplete??u.nothing:u.nothing}
                   style="position: absolute; pointer-events: none; opacity: 0; margin: 0; width: 1px; height: 1px"
-                />`):o.nothing}
-    `}};s.styles=[d.resetNativeControl,d.hiddenHostStyles,o.css`
+                />`):u.nothing}
+    `}};i.styles=[f.resetNativeControl,f.hiddenHostStyles,u.css`
       :host {
         display: contents;
       }
-    `],r([(0,l.property)({type:String})],s.prototype,"value",2),r([(0,l.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),r([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"multiple",2),r([(0,l.property)({attribute:!1})],s.prototype,"items",2),r([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),r([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),r([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"required",2),r([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"invalid",2),r([(0,l.property)({type:String})],s.prototype,"name",2),r([(0,l.property)({attribute:"required-message"})],s.prototype,"requiredMessage",2),s=r([(0,v.customElement)("skdx-select")],s);0&&(module.exports={SkdxSelect});
+    `],l([(0,n.property)({converter:a.selectionAttributeConverter,noAccessor:!0})],i.prototype,"value",1),l([(0,n.property)({converter:a.selectionAttributeConverter,attribute:"default-value"})],i.prototype,"defaultValue",2),l([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,"multiple",2),l([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,"deselectable",2),l([(0,n.property)({attribute:"close-on-select",converter:w})],i.prototype,"closeOnSelect",2),l([(0,n.property)({attribute:!1})],i.prototype,"items",2),l([(0,n.property)({attribute:!1})],i.prototype,"options",2),l([(0,n.property)({type:String})],i.prototype,"placeholder",2),l([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),l([(0,n.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),l([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([(0,n.property)({type:Boolean,attribute:"read-only",reflect:!0})],i.prototype,"readOnly",2),l([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,"required",2),l([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,"invalid",2),l([(0,n.property)({type:String})],i.prototype,"name",2),l([(0,n.property)({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),l([(0,n.property)({type:String,attribute:"autocomplete"})],i.prototype,"autoComplete",2),l([(0,n.property)({attribute:"required-message"})],i.prototype,"requiredMessage",2),i=l([(0,b.customElement)("skdx-select")],i);0&&(module.exports={OPTION_SELECTOR,SkdxSelect});

package/dist/select/Select.d.cts

@@ -1,45 +1,25 @@
 import { LitElement } from 'lit';
-/**
- * One entry of {@link SkdxSelect.items}: everything the root needs to know
- * about an option *before* that option has ever been rendered.
- */
+import type { SkdxOptionsInput } from '../internal/options.cjs';
+/** Enabled options only; lives on root since trigger walks the list. @internal */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** Entry in {@link SkdxSelect.items} with metadata about an option before rendering. */
 export interface SkdxSelectItemDescriptor {
-    /** Identifier committed to the root's value when this option is chosen. */
+    /** Identifier committed to root value when chosen. */
     value: string;
-    /**
-     * Text shown by `<skdx-select-value>` and matched by trigger typeahead. A
-     * mounted `<skdx-select-option>`'s own label overrides it.
-     * @default undefined — falls back to `value`.
-     */
+    /** Shown in select-value, matched by typeahead, overridden by rendered labels. @default undefined — falls back to value. */
     label?: string;
-    /**
-     * Excludes this option from trigger typeahead. The rendered option's own
-     * `disabled` is what excludes it from selection.
-     * @default false
-     */
+    /** Excludes from typeahead; rendered option's own disabled excludes from selection. @default false */
     disabled?: boolean;
 }
+/** Where active option goes on open: 'selected' (default, no change), 'first', or 'last'. @internal */
+export type SkdxSelectOpenIntent = 'selected' | 'first' | 'last';
 declare const SkdxSelect_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-select>` — the Web Components implementation of the shared Select
- * contract (see `@skdx/shared`'s `selectContract`). Owns the selected value
- * and the listbox's open state, and acts as the shared-state root that
- * `<skdx-select-trigger>` / `<skdx-select-content>` / `<skdx-select-option>`
- * (and friends) look up via `closest('skdx-select')` — Web Components have no
- * built-in context mechanism, so nested parts read/drive state directly on
- * this element's public properties/methods and re-render on the
- * `skdx-select-internal-update` event this element dispatches whenever they
- * change.
- *
- * Renders only a `<slot>` plus, when `name` is set, a visually-hidden native
- * text input mirroring `value` for native form participation. Also
- * form-associated through the shared `FormAssociated` mixin, so the select
- * participates in a light-DOM ancestor `<form>` without the hidden input when
- * `name` is set — including `form.reset()` and a `<fieldset disabled>`
- * ancestor.
- *
+ * Root listbox picker rendering a trigger button and floating content panel with options. Owns selected value, open state, and form integration;
+ * shared state for select-trigger, select-content, select-item and friends. Virtual focus per combobox pattern: DOM focus stays on trigger while
+ * aria-activedescendant names active option.
  * @example
  * ```html
  * <skdx-select name="framework">
@@ -48,144 +28,160 @@ declare const SkdxSelect_base: typeof LitElement & (new (...args: any[]) => impo
  *     <skdx-select-icon></skdx-select-icon>
  *   </skdx-select-trigger>
  *   <skdx-select-content>
- *     <skdx-select-option value="react">React</skdx-select-option>
- *     <skdx-select-option value="vue">Vue</skdx-select-option>
+ *     <skdx-select-item value="react">React</skdx-select-item>
+ *     <skdx-select-item value="vue">Vue</skdx-select-item>
  *   </skdx-select-content>
  * </skdx-select>
  * ```
  *
- * @fires value-change - Fires with the new value as `detail` (a `string[]` when `multiple`, a `string | undefined` otherwise) whenever the selection changes.
+ * @fires value-change - Fires with `{ value, selectedValue }` as `detail` whenever the selection changes — the whole selection as a `string[]` in single and multiple mode alike, plus the first selected value (or `null`). Strict out.
  * @fires open-change - Fires with the new open state (boolean) whenever the listbox opens or closes.
  * @fires open-change-complete - Fired with the new open state after `<skdx-select-content>`'s enter or exit animation has finished — as soon as the listbox has settled, when it declares no animation at all. Not cancelable: the change has already happened.
  */
 export declare class SkdxSelect extends SkdxSelect_base {
     static styles: import("lit").CSSResult[];
     /**
-     * Selected option's value — a `string[]` when {@link multiple}, a `string`
-     * otherwise. The `value` *attribute* can only ever carry a single string;
-     * a multi-selection is a property-only assignment (`el.value = ['a','b']`),
-     * the same restriction every native multi-value control has.
-     * @default undefined — no option selected until the user picks one.
-     */
-    value?: string | string[];
-    /**
-     * Initially selected value, for uncontrolled usage — read once, before the
-     * first render, and then left alone, exactly as `<skdx-listbox>` treats its
-     * own. Same shape as {@link value}: a `string[]` when {@link multiple}, and
-     * the array form is a property assignment because no attribute can carry it.
-     *
-     * The contract has always listed it — `@skdx/shared`'s `selectContract`,
-     * and React's own `SelectProps`; nothing here read it, so
-     * `<skdx-select default-value="a">` mounted with nothing chosen and the
-     * attribute sat inert in the DOM.
-     *
-     * Cited by package name rather than by repo path on purpose: this docstring
-     * is copied verbatim into `custom-elements.json`, which ships in the
-     * published tarball, and `scripts/verify-publish-boundary.mjs` scans that
-     * tarball for monorepo paths pointing into the shared package. A path into
-     * this repo is useless to the consumer reading it anyway.
-     * @default undefined — nothing selected until the user picks an option.
+     * Selected option value(s) for controlled usage; pair with valueChange event.
+     * @default []
+     */
+    get value(): string[];
+    set value(next: string | readonly string[] | null | undefined);
+    private _values;
+    private _valueSet;
+    /** Reads cardinality from DOM attributes to prevent false errors before properties apply. */
+    private get isMultiple();
+    /**
+     * Initially selected value(s) for uncontrolled usage.
+     * @default undefined
      */
     defaultValue?: string | string[];
     /**
-     * Allows more than one option to be selected: `value` becomes a `string[]`,
-     * the listbox gets `aria-multiselectable`, choosing an option toggles it
-     * instead of replacing the selection, and the listbox stays open.
+     * Allows more than one option selected. Sets aria-multiselectable="true" on Content, toggles options instead of replacing, keeps listbox open.
+     * @default false
      */
     multiple: boolean;
     /**
-     * The full option collection, declared up front, so the closed trigger can
-     * run typeahead and `<skdx-select-value>` can render a label before the
-     * listbox has ever been opened. Renders nothing; a mounted option's own
-     * registered label wins over an entry's `label`. Property only.
-     * @default undefined — the root only knows options rendered in its light DOM.
+     * Picking the already-selected option in single-select mode clears it; ignored in multiple mode.
+     * @default false
+     */
+    deselectable: boolean;
+    /**
+     * Picking an option closes the listbox. Defaults to !multiple; can override the default.
+     * @default undefined
+     */
+    closeOnSelect?: boolean;
+    /** @internal The resolved `closeOnSelect`: the property when set, else `!multiple`. */
+    get closesOnSelect(): boolean;
+    /**
+     * Option collection declared up front. Enables closed-trigger typeahead and labels on first paint before Content mounts.
+     * @default undefined
      */
     items?: SkdxSelectItemDescriptor[];
     /**
-     * Whether the listbox popup is currently open.
+     * Flat or grouped option data to render automatically — trigger, portal, listbox, and Items — instead of hand composition.
+     * @default undefined
+     */
+    options?: SkdxOptionsInput;
+    /**
+     * Placeholder shown by derived trigger while nothing is selected; only read while options derives.
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Controlled open state for two-way binding; pair with openChange event.
      * @default false
      */
     open: boolean;
-    /** Disables the trigger and prevents opening the listbox. */
+    /**
+     * Initial open state for uncontrolled usage of the select.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Disables the trigger and prevents opening. Distinct from readOnly, which keeps focusable and submits.
+     * @default false
+     */
     disabled: boolean;
-    /** Marks the select required: an empty selection reports `valueMissing` to the surrounding form. */
+    /**
+     * Unchangeable value. Trigger keeps tab stop and focus, carries aria-readonly="true" and data-readonly, listbox refuses to open.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks hidden form controls as required for constraint validation (only meaningful when name is set).
+     * @default false
+     */
     required: boolean;
-    /** Marks the select as invalid, exposed as `aria-invalid`/`data-invalid` on the trigger. */
+    /**
+     * Marks select as invalid, exposed as aria-invalid/data-invalid on the trigger.
+     * @default false
+     */
     invalid: boolean;
     /**
-     * Name for native form participation via a hidden input.
-     * @default undefined — no hidden input rendered.
+     * Visually-hidden native form control kept in sync with value for submission, reset, and validation.
+     * @default undefined
      */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` select is
-     * submitted with nothing chosen. Sealed inside the shadow root otherwise, so
-     * this is the only way to translate it or to name the list ("Choose a
-     * country.").
-     * @default undefined — keeps `'Please select an item in the list.'`
+     * Form id the select submits into, forwarded to every hidden control so select can live outside the form it belongs to.
+     * @default undefined
+     */
+    formId?: string;
+    /**
+     * Browser autofill hint, forwarded to the first mirrored hidden control — the same one that answers for the whole set's validity.
+     * @default undefined
+     */
+    autoComplete?: string;
+    /**
+     * Custom validation message for required select.
+     * @default undefined
      */
     requiredMessage?: string;
-    readonly contentId: string;
-    /** @internal Set by `<skdx-select-trigger>` once its native button mounts. */
+    contentId: string;
+    /** @internal Where next open puts active option; reset after consumed by content. */
+    openIntent: SkdxSelectOpenIntent;
+    /** @internal Set by trigger once button mounts. */
     triggerEl: HTMLElement | null;
+    /** @internal Mounted content element, registered to support portal moves. */
+    contentEl: HTMLElement | null;
+    /** @internal Virtually-focused option id, published as aria-activedescendant on trigger. */
+    activeId: string | null;
     private readonly optionLabels;
     private hasUpdatedOnce;
     private teardownOpenChangeComplete?;
+    private _anatomyOptionsRef?;
+    connectedCallback(): void;
+    /** Derives anatomy when no consumer parts exist; rebuilds only on shape changes, refreshes text in-place. */
+    private readonly fillAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(): void;
     protected updated(changed: Map<string, unknown>): void;
-    /**
-     * What the surrounding `<form>` submits. A `multiple` select submits one
-     * entry per selected value under the same `name` — the repeated pairs a
-     * native `<select multiple>` produces — which `ElementInternals` expresses
-     * as a whole `FormData` rather than a single string.
-     */
+    /** What surrounding form submits: single value or repeated name=value pairs for multiple. */
     private formValue;
-    /**
-     * `required` has to be published through `ElementInternals`: the mirrored
-     * input lives in this element's shadow root, so it is not associated with the
-     * ancestor `<form>` and its own `required` never blocks submission.
-     * Optional-chained because jsdom's `ElementInternals` has no `setValidity`.
-     */
+    /** Syncs validity via ElementInternals since mirrored input is in shadow root. */
     private syncValidity;
-    /**
-     * Restores the selection the `value` attribute declared, like a native
-     * `<select>`'s `selected` options. A `multiple` selection assigned as a
-     * property has no declared default to go back to — the attribute can only
-     * ever carry one string — so it clears, exactly as a native multi-select
-     * with no `selected` options does.
-     */
+    /** Restores value attribute like native select's selected options. */
     formResetCallback(): void;
     private emit;
-    /** @internal */
+    /** @internal Gate for parts to move open state; readOnly refuses opening but allows closing. */
     setOpen(next: boolean): void;
-    /** Every selected value as an array, whatever shape `value` currently holds. */
+    /** @internal Sets virtually-focused option; broadcast direct, not via requestUpdate. */
+    setActiveId(id: string | null): void;
+    /** @internal Id of mounted select-value (what aria-labelledby points at), or null if not rendered. */
+    get valueId(): string | null;
+    /** @internal Every selected value as array (strict-out shape). */
     get selectedValues(): string[];
-    /** Whether one option value is currently selected. */
+    /** @internal Whether value is currently selected. */
     isSelected(value: string): boolean;
-    /**
-     * Commits an option: replaces the selection, or toggles it within the
-     * current selection when {@link multiple}.
-     * @internal
-     */
+    /** @internal Commits option: replaces, toggles in multiple, or clears if deselectable and already selected. */
     selectItem(value: string): void;
-    /**
-     * Every option the root knows about without opening the listbox — the
-     * trigger-typeahead pool. `items` wins when given (it also fixes the order);
-     * otherwise the light-DOM options are read directly, which Web Components
-     * can do at any time because — unlike React's `SelectContent` — they are
-     * present whether or not the listbox has ever been open.
-     */
+    /** @internal Every option root knows without opening (trigger-typeahead pool); items wins if given. */
     get collection(): SkdxSelectItemDescriptor[];
-    /** @internal */
+    /** @internal Register option label; dispatch update so select-value catches late registrations. */
     registerOptionLabel(value: string, label: string): void;
-    /**
-     * Label for a value: a registered option's label wins, then an `items`
-     * entry's `label`, then the value itself.
-     * @internal
-     */
+    /** @internal Label for value: registered option wins, then items entry, then value itself. */
     getOptionLabel(value: string): string;
-    /** @internal */
+    /** @internal Hand focus back to trigger via close-auto-focus dispatch from content. */
     focusTrigger(): void;
     render(): import("lit").TemplateResult<1>;
 }