@skdx/web-components 0.26.0

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

@@ -0,0 +1,78 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-segmented-control-indicator>` — the sliding highlight behind the
+ * checked segment, and the reason this family exists as something other than a
+ * styled radio group.
+ *
+ * It measures the checked `<skdx-segmented-control-item>` against the root with
+ * a `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
+ * segment re-measures) and publishes the geometry as CSS custom properties on
+ * its own element:
+ *
+ * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
+ * - `--skdx-segmented-control-width`
+ * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
+ *   when the root's `orientation` is `'vertical'`
+ *
+ * So the whole animation is one CSS rule and no consumer JavaScript:
+ *
+ * ```css
+ * .my-indicator {
+ *   position: absolute;
+ *   inset-block: 0;
+ *   width: var(--skdx-segmented-control-width);
+ *   translate: var(--skdx-segmented-control-x) 0;
+ *   transition: translate 150ms, width 150ms;
+ * }
+ * ```
+ *
+ * `x` is a *physical* offset from the root's left edge, not a logical one, so
+ * `translate` is correct under `dir="rtl"` without a second rule.
+ *
+ * With nothing selected there is nothing to measure: the element carries
+ * `data-state="hidden"` and publishes **no** custom properties at all, rather
+ * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
+ * CSS decide what "not yet chosen" looks like.
+ *
+ * Decorative: it draws a state the segments already report, so it sets
+ * `aria-hidden="true"` on itself.
+ *
+ * Must be used inside `<skdx-segmented-control>`.
+ *
+ * @example
+ * ```html
+ * <skdx-segmented-control default-value="week" aria-label="Date range">
+ *   <skdx-segmented-control-indicator></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 declare class SkdxSegmentedControlIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private observer;
+    /** The segment currently under observation, so the observer is only rebuilt when the selection actually moves. */
+    private observedItem;
+    /**
+     * The last geometry actually published, flattened to a string so the dedupe
+     * below is one `===`. It exists because the custom properties this writes can
+     * themselves change layout: writing on every observer callback would re-flow,
+     * re-enter the observer, and never settle.
+     */
+    private lastKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-segmented-control>` whenever its state changes. */
+    refresh(): void;
+    private detachObserver;
+    private measure;
+    private observe;
+    private publish;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-segmented-control-indicator': SkdxSegmentedControlIndicator;
+    }
+}

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

@@ -0,0 +1,78 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-segmented-control-indicator>` — the sliding highlight behind the
+ * checked segment, and the reason this family exists as something other than a
+ * styled radio group.
+ *
+ * It measures the checked `<skdx-segmented-control-item>` against the root with
+ * a `ResizeObserver` (watching both, so a re-flowed strip or a re-labelled
+ * segment re-measures) and publishes the geometry as CSS custom properties on
+ * its own element:
+ *
+ * - `--skdx-segmented-control-x` — offset from the root's left edge, in `px`
+ * - `--skdx-segmented-control-width`
+ * - `--skdx-segmented-control-y` / `--skdx-segmented-control-height` — added only
+ *   when the root's `orientation` is `'vertical'`
+ *
+ * So the whole animation is one CSS rule and no consumer JavaScript:
+ *
+ * ```css
+ * .my-indicator {
+ *   position: absolute;
+ *   inset-block: 0;
+ *   width: var(--skdx-segmented-control-width);
+ *   translate: var(--skdx-segmented-control-x) 0;
+ *   transition: translate 150ms, width 150ms;
+ * }
+ * ```
+ *
+ * `x` is a *physical* offset from the root's left edge, not a logical one, so
+ * `translate` is correct under `dir="rtl"` without a second rule.
+ *
+ * With nothing selected there is nothing to measure: the element carries
+ * `data-state="hidden"` and publishes **no** custom properties at all, rather
+ * than a zero-width bar parked at the start — `width: var(--…, 0)` then lets
+ * CSS decide what "not yet chosen" looks like.
+ *
+ * Decorative: it draws a state the segments already report, so it sets
+ * `aria-hidden="true"` on itself.
+ *
+ * Must be used inside `<skdx-segmented-control>`.
+ *
+ * @example
+ * ```html
+ * <skdx-segmented-control default-value="week" aria-label="Date range">
+ *   <skdx-segmented-control-indicator></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 declare class SkdxSegmentedControlIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private observer;
+    /** The segment currently under observation, so the observer is only rebuilt when the selection actually moves. */
+    private observedItem;
+    /**
+     * The last geometry actually published, flattened to a string so the dedupe
+     * below is one `===`. It exists because the custom properties this writes can
+     * themselves change layout: writing on every observer callback would re-flow,
+     * re-enter the observer, and never settle.
+     */
+    private lastKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-segmented-control>` whenever its state changes. */
+    refresh(): void;
+    private detachObserver;
+    private measure;
+    private observe;
+    private publish;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-segmented-control-indicator': SkdxSegmentedControlIndicator;
+    }
+}

package/dist/segmented-control/SegmentedControlIndicator.js

@@ -0,0 +1,5 @@
+var v=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(l,i,t,s)=>{for(var e=s>1?void 0:s?m(i,t):i,r=l.length-1,o;r>=0;r--)(o=l[r])&&(e=(s?o(i,t,e):o(e))||e);return s&&e&&v(i,t,e),e};import{css as u,html as b,LitElement as p}from"lit";import{customElement as g}from"../internal/define.js";import{ITEM_SELECTOR as y}from"./SegmentedControl.js";var x=["--skdx-segmented-control-x","--skdx-segmented-control-y","--skdx-segmented-control-width","--skdx-segmented-control-height"],n=class extends p{constructor(){super(...arguments);this.root=null;this.observer=null;this.observedItem=null;this.lastKey=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-segmented-control"),!this.root)throw new Error("<skdx-segmented-control-indicator> must be used inside <skdx-segmented-control>.");this.setAttribute("aria-hidden","true"),this.measure()}disconnectedCallback(){this.detachObserver(),super.disconnectedCallback()}refresh(){this.measure()}detachObserver(){this.observer?.disconnect(),this.observer=null,this.observedItem=null}measure(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation);let s=t.querySelector(`${y}[data-state="checked"]`);if(!s){this.detachObserver(),this.lastKey=null,this.setAttribute("data-state","hidden");for(let e of x)this.style.removeProperty(e);return}this.observe(t,s),this.publish(t,s)}observe(t,s){this.observer&&this.observedItem===s||(this.detachObserver(),!(typeof ResizeObserver>"u")&&(this.observer=new ResizeObserver(()=>this.measure()),this.observer.observe(t),this.observer.observe(s),this.observedItem=s))}publish(t,s){let e=s.getBoundingClientRect(),r=t.getBoundingClientRect(),o=e.left-r.left,d=e.top-r.top,h=t.orientation==="vertical",c=`${h}:${o},${d},${e.width},${e.height}`;this.lastKey!==c&&(this.lastKey=c,this.setAttribute("data-state","visible"),this.style.setProperty("--skdx-segmented-control-x",`${o}px`),this.style.setProperty("--skdx-segmented-control-width",`${e.width}px`),h?(this.style.setProperty("--skdx-segmented-control-y",`${d}px`),this.style.setProperty("--skdx-segmented-control-height",`${e.height}px`)):(this.style.removeProperty("--skdx-segmented-control-y"),this.style.removeProperty("--skdx-segmented-control-height")))}render(){return b`<slot></slot>`}};n.styles=u`
+    :host {
+      display: block;
+    }
+  `,n=a([g("skdx-segmented-control-indicator","segmented-control","indicator")],n);export{n as SkdxSegmentedControlIndicator};

package/dist/segmented-control/SegmentedControlItem.cjs

@@ -0,0 +1,9 @@
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(s,t)=>{for(var i in t)l(s,i,{get:t[i],enumerable:!0})},p=(s,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!f.call(s,e)&&e!==i&&l(s,e,{get:()=>t[e],enumerable:!(r=u(t,e))||r.enumerable});return s};var k=s=>p(l({},"__esModule",{value:!0}),s),n=(s,t,i,r)=>{for(var e=r>1?void 0:r?u(t,i):t,a=s.length-1,c;a>=0;a--)(c=s[a])&&(e=(r?c(t,i,e):c(e))||e);return r&&e&&l(t,i,e),e};var y={};m(y,{SkdxSegmentedControlItem:()=>d});module.exports=k(y);var o=require("lit"),h=require("lit/decorators.js"),v=require("../internal/define.cjs");var d=class extends o.LitElement{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=i=>{i.key==="Enter"&&i.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 i=this.root,r=this.checked,e=this.effectiveDisabled;this.setAttribute("aria-checked",String(r)),this.setAttribute("data-state",r?"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 a=i?.getSelectedValue()===void 0&&i?.getFirstEnabledValue()===this.value;this.tabIndex=!e&&(r||a)?0:-1}render(){return o.html`<slot></slot>`}};d.styles=o.css`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,n([(0,h.property)({type:String,reflect:!0})],d.prototype,"value",2),n([(0,h.property)({type:Boolean,reflect:!0})],d.prototype,"disabled",2),d=n([(0,v.customElement)("skdx-segmented-control-item","segmented-control","item")],d);0&&(module.exports={SkdxSegmentedControlItem});

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

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-segmented-control-item>` — one segment within an
+ * `<skdx-segmented-control>`. Sets `role="radio"`, `aria-checked`, `data-state`
+ * (`"checked"` / `"unchecked"`), `data-disabled`, `data-value` and the roving
+ * `tabindex` on itself (the host), mirroring `<skdx-radio-group-item>`.
+ *
+ * Selects on click **and on focus** — which is what makes arrow-key navigation
+ * select as it moves, per the WAI-ARIA radio pattern. Only one segment is ever
+ * in the tab order: the checked one, or the first enabled segment while nothing
+ * is checked. Enter is suppressed so it does not fire a second, native
+ * activation on top of the keyboard selection.
+ *
+ * Must be used inside `<skdx-segmented-control>`.
+ *
+ * @example
+ * ```html
+ * <skdx-segmented-control default-value="grid" aria-label="View">
+ *   <skdx-segmented-control-item value="list">List</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="grid">Grid</skdx-segmented-control-item>
+ * </skdx-segmented-control>
+ * ```
+ */
+export declare class SkdxSegmentedControlItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Unique identifier compared against the group's selected value.
+     * @default '' — an empty value never matches a real selection, so give every
+     * segment its own.
+     * @example
+     * ```html
+     * <skdx-segmented-control-item value="week">Week</skdx-segmented-control-item>
+     * ```
+     */
+    value: string;
+    /**
+     * Excludes this segment from selection and from arrow-key navigation,
+     * independent of the group's own `disabled`.
+     * @default false — the segment is selectable, and eligible to hold the
+     * group's tab stop.
+     * @example
+     * ```html
+     * <skdx-segmented-control-item value="year" disabled>Year</skdx-segmented-control-item>
+     * ```
+     */
+    disabled: boolean;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** @internal Called by the parent `<skdx-segmented-control>` whenever its state changes. */
+    refresh(): void;
+    /** Whether this segment is the group's selected value. */
+    get checked(): boolean;
+    private get effectiveDisabled();
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleFocus;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-segmented-control-item': SkdxSegmentedControlItem;
+    }
+}

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

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-segmented-control-item>` — one segment within an
+ * `<skdx-segmented-control>`. Sets `role="radio"`, `aria-checked`, `data-state`
+ * (`"checked"` / `"unchecked"`), `data-disabled`, `data-value` and the roving
+ * `tabindex` on itself (the host), mirroring `<skdx-radio-group-item>`.
+ *
+ * Selects on click **and on focus** — which is what makes arrow-key navigation
+ * select as it moves, per the WAI-ARIA radio pattern. Only one segment is ever
+ * in the tab order: the checked one, or the first enabled segment while nothing
+ * is checked. Enter is suppressed so it does not fire a second, native
+ * activation on top of the keyboard selection.
+ *
+ * Must be used inside `<skdx-segmented-control>`.
+ *
+ * @example
+ * ```html
+ * <skdx-segmented-control default-value="grid" aria-label="View">
+ *   <skdx-segmented-control-item value="list">List</skdx-segmented-control-item>
+ *   <skdx-segmented-control-item value="grid">Grid</skdx-segmented-control-item>
+ * </skdx-segmented-control>
+ * ```
+ */
+export declare class SkdxSegmentedControlItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Unique identifier compared against the group's selected value.
+     * @default '' — an empty value never matches a real selection, so give every
+     * segment its own.
+     * @example
+     * ```html
+     * <skdx-segmented-control-item value="week">Week</skdx-segmented-control-item>
+     * ```
+     */
+    value: string;
+    /**
+     * Excludes this segment from selection and from arrow-key navigation,
+     * independent of the group's own `disabled`.
+     * @default false — the segment is selectable, and eligible to hold the
+     * group's tab stop.
+     * @example
+     * ```html
+     * <skdx-segmented-control-item value="year" disabled>Year</skdx-segmented-control-item>
+     * ```
+     */
+    disabled: boolean;
+    private root;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** @internal Called by the parent `<skdx-segmented-control>` whenever its state changes. */
+    refresh(): void;
+    /** Whether this segment is the group's selected value. */
+    get checked(): boolean;
+    private get effectiveDisabled();
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleFocus;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-segmented-control-item': SkdxSegmentedControlItem;
+    }
+}

package/dist/segmented-control/SegmentedControlItem.js

@@ -0,0 +1,9 @@
+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`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :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};

package/dist/segmented-control/index.cjs

@@ -0,0 +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});

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

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

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

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

package/dist/segmented-control/index.js

@@ -0,0 +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};

package/dist/select/Select.cjs

@@ -0,0 +1,17 @@
+"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
+                  type="text"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  .name=${this.name??""}
+                  .value=${i}
+                  ?required=${this.required}
+                  ?disabled=${this.disabled}
+                  style="position: absolute; pointer-events: none; opacity: 0; margin: 0; width: 1px; height: 1px"
+                />`):o.nothing}
+    `}};s.styles=[d.resetNativeControl,d.hiddenHostStyles,o.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});

package/dist/select/Select.d.cts

@@ -0,0 +1,197 @@
+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.
+ */
+export interface SkdxSelectItemDescriptor {
+    /** Identifier committed to the root's value when this option is 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`.
+     */
+    label?: string;
+    /**
+     * Excludes this option from trigger typeahead. The rendered option's own
+     * `disabled` is what excludes it from selection.
+     * @default false
+     */
+    disabled?: boolean;
+}
+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.
+ *
+ * @example
+ * ```html
+ * <skdx-select name="framework">
+ *   <skdx-select-trigger>
+ *     <skdx-select-value placeholder="Pick a framework"></skdx-select-value>
+ *     <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-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 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.
+     */
+    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.
+     */
+    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.
+     */
+    items?: SkdxSelectItemDescriptor[];
+    /**
+     * Whether the listbox popup is currently open.
+     * @default false
+     */
+    open: boolean;
+    /** Disables the trigger and prevents opening the listbox. */
+    disabled: boolean;
+    /** Marks the select required: an empty selection reports `valueMissing` to the surrounding form. */
+    required: boolean;
+    /** Marks the select as invalid, exposed as `aria-invalid`/`data-invalid` on the trigger. */
+    invalid: boolean;
+    /**
+     * Name for native form participation via a hidden input.
+     * @default undefined — no hidden input rendered.
+     */
+    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.'`
+     */
+    requiredMessage?: string;
+    readonly contentId: string;
+    /** @internal Set by `<skdx-select-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    private readonly optionLabels;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    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.
+     */
+    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`.
+     */
+    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.
+     */
+    formResetCallback(): void;
+    private emit;
+    /** @internal */
+    setOpen(next: boolean): void;
+    /** Every selected value as an array, whatever shape `value` currently holds. */
+    get selectedValues(): string[];
+    /** Whether one option 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
+     */
+    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.
+     */
+    get collection(): SkdxSelectItemDescriptor[];
+    /** @internal */
+    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
+     */
+    getOptionLabel(value: string): string;
+    /** @internal */
+    focusTrigger(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select': SkdxSelect;
+    }
+}
+export {};