@skdx/web-components 0.26.0

package/dist/listbox/Listbox.d.cts

@@ -0,0 +1,130 @@
+import { LitElement } from 'lit';
+/** @internal Every option that can hold focus. Disabled options are skipped, never focused. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/**
+ * @internal The nearest ancestor listbox an option belongs to.
+ *
+ * Matched on the class rather than on the `skdx-listbox` tag alone, so an
+ * element that *extends* `SkdxListbox` under a tag name of its own —
+ * `<skdx-transfer-list>` — is still found by the options inside it. The tag
+ * check stays as a fallback for the window before that element upgrades.
+ */
+export declare function findListboxRoot(el: Element): SkdxListbox | null;
+/**
+ * `<skdx-listbox>` — the Web Components implementation of the shared Listbox
+ * contract (see `@skdx/shared`'s `listboxContract`). A standalone WAI-ARIA
+ * listbox: an always-visible list of options with one tab stop, arrow-key
+ * roving focus, typeahead, and single or multiple selection. Sets
+ * `role="listbox"` on *this host element* (light DOM, not shadow DOM) so its
+ * `<skdx-listbox-item>` children are real `role="option"` descendants of it,
+ * and renders only a `<slot>`.
+ *
+ * This is the selection list without the popup: `<skdx-select>` is this plus a
+ * trigger and a floating layer, `<skdx-combobox>` is this plus a text filter
+ * and virtual focus. Reach for it when the options should always be on
+ * screen — a transfer/pick-list, a settings panel, a master list beside a
+ * detail pane.
+ *
+ * Web Components have no built-in context mechanism, so — as in
+ * `<skdx-select>` — each nested part finds this element with
+ * `closest('skdx-listbox')`, reads state straight off its public
+ * properties/methods, and re-renders on the `skdx-listbox-internal-update`
+ * event this element dispatches whenever anything changes. Nothing here
+ * watches the light DOM with a `MutationObserver`, which is why every part can
+ * write its own attributes unconditionally without risking a feedback loop.
+ *
+ * Focus is real, not virtual: exactly one option carries `tabindex="0"` (the
+ * selected one, else the first enabled one) and the arrows move it, so the
+ * list is one Tab stop from the outside and `document.activeElement` is always
+ * the option a screen reader is announcing.
+ *
+ * `role="listbox"` takes no accessible name from its content and, unlike
+ * `<skdx-select>`, has no trigger to be named by — give it an `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="svelte">Svelte</skdx-listbox-item>
+ * </skdx-listbox>
+ * ```
+ *
+ * @fires value-change - Fires with the new value as `detail` (the whole `string[]` when `multiple`, a `string` otherwise) whenever the user changes the selection.
+ */
+export declare class SkdxListbox extends LitElement {
+    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. Same shape as {@link value}: a
+     * `string[]` when {@link multiple}.
+     * @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 list gains `aria-multiselectable="true"`, and choosing an option
+     * toggles it instead of replacing the selection. Unlike `<skdx-select>` there
+     * is nothing to keep open, so this changes no focus behaviour.
+     * @default false
+     */
+    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.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * The option value holding the list's single tab stop.
+     * @internal
+     */
+    activeValue: string | null;
+    /** @internal */
+    private readonly typeahead;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostState;
+    /**
+     * The single tab stop: the first selected option if one is rendered,
+     * otherwise the first enabled one. Resolved against the DOM rather than
+     * against `selectedValues[0]` so a selection whose option is not rendered —
+     * or is disabled — still leaves the list reachable by Tab.
+     */
+    private seedActiveValue;
+    /** Focusable options in document order — the only ordering that is always right. @internal */
+    private get options();
+    /** 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}. Dispatches `value-change` with
+     * the whole new value.
+     * @internal
+     */
+    selectItem(value: string): void;
+    /** @internal Called by an option when it takes focus, moving the tab stop onto it. */
+    setActiveValue(value: string | null): void;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+    private readonly handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox': SkdxListbox;
+    }
+}

package/dist/listbox/Listbox.d.ts

@@ -0,0 +1,130 @@
+import { LitElement } from 'lit';
+/** @internal Every option that can hold focus. Disabled options are skipped, never focused. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/**
+ * @internal The nearest ancestor listbox an option belongs to.
+ *
+ * Matched on the class rather than on the `skdx-listbox` tag alone, so an
+ * element that *extends* `SkdxListbox` under a tag name of its own —
+ * `<skdx-transfer-list>` — is still found by the options inside it. The tag
+ * check stays as a fallback for the window before that element upgrades.
+ */
+export declare function findListboxRoot(el: Element): SkdxListbox | null;
+/**
+ * `<skdx-listbox>` — the Web Components implementation of the shared Listbox
+ * contract (see `@skdx/shared`'s `listboxContract`). A standalone WAI-ARIA
+ * listbox: an always-visible list of options with one tab stop, arrow-key
+ * roving focus, typeahead, and single or multiple selection. Sets
+ * `role="listbox"` on *this host element* (light DOM, not shadow DOM) so its
+ * `<skdx-listbox-item>` children are real `role="option"` descendants of it,
+ * and renders only a `<slot>`.
+ *
+ * This is the selection list without the popup: `<skdx-select>` is this plus a
+ * trigger and a floating layer, `<skdx-combobox>` is this plus a text filter
+ * and virtual focus. Reach for it when the options should always be on
+ * screen — a transfer/pick-list, a settings panel, a master list beside a
+ * detail pane.
+ *
+ * Web Components have no built-in context mechanism, so — as in
+ * `<skdx-select>` — each nested part finds this element with
+ * `closest('skdx-listbox')`, reads state straight off its public
+ * properties/methods, and re-renders on the `skdx-listbox-internal-update`
+ * event this element dispatches whenever anything changes. Nothing here
+ * watches the light DOM with a `MutationObserver`, which is why every part can
+ * write its own attributes unconditionally without risking a feedback loop.
+ *
+ * Focus is real, not virtual: exactly one option carries `tabindex="0"` (the
+ * selected one, else the first enabled one) and the arrows move it, so the
+ * list is one Tab stop from the outside and `document.activeElement` is always
+ * the option a screen reader is announcing.
+ *
+ * `role="listbox"` takes no accessible name from its content and, unlike
+ * `<skdx-select>`, has no trigger to be named by — give it an `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="svelte">Svelte</skdx-listbox-item>
+ * </skdx-listbox>
+ * ```
+ *
+ * @fires value-change - Fires with the new value as `detail` (the whole `string[]` when `multiple`, a `string` otherwise) whenever the user changes the selection.
+ */
+export declare class SkdxListbox extends LitElement {
+    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. Same shape as {@link value}: a
+     * `string[]` when {@link multiple}.
+     * @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 list gains `aria-multiselectable="true"`, and choosing an option
+     * toggles it instead of replacing the selection. Unlike `<skdx-select>` there
+     * is nothing to keep open, so this changes no focus behaviour.
+     * @default false
+     */
+    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.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * The option value holding the list's single tab stop.
+     * @internal
+     */
+    activeValue: string | null;
+    /** @internal */
+    private readonly typeahead;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncHostState;
+    /**
+     * The single tab stop: the first selected option if one is rendered,
+     * otherwise the first enabled one. Resolved against the DOM rather than
+     * against `selectedValues[0]` so a selection whose option is not rendered —
+     * or is disabled — still leaves the list reachable by Tab.
+     */
+    private seedActiveValue;
+    /** Focusable options in document order — the only ordering that is always right. @internal */
+    private get options();
+    /** 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}. Dispatches `value-change` with
+     * the whole new value.
+     * @internal
+     */
+    selectItem(value: string): void;
+    /** @internal Called by an option when it takes focus, moving the tab stop onto it. */
+    setActiveValue(value: string | null): void;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+    private readonly handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox': SkdxListbox;
+    }
+}

package/dist/listbox/Listbox.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(i,r,e,t)=>{for(var l=t>1?void 0:t?h(r,e):r,a=i.length-1,o;a>=0;a--)(o=i[a])&&(l=(t?o(r,e,l):o(l))||l);return t&&l&&c(r,e,l),l};import{css as p,html as m,LitElement as f}from"lit";import{property as d,state as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{nextSelection as y,toValues as g}from"../internal/selection.js";import{hiddenHostStyles as A}from"../internal/styles.js";import{isTypeaheadKey as E,Typeahead as w}from"../internal/typeahead.js";var k='[role="option"]:not([data-disabled])';function O(i){for(let r=i.parentElement;r!==null;r=r.parentElement)if(r instanceof s||r.localName==="skdx-listbox")return r;return null}var u={fromAttribute:i=>i??void 0,toAttribute:i=>Array.isArray(i)||i===void 0?null:i},s=class extends f{constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.activeValue=null;this.typeahead=new w;this.handleKeyDown=e=>{let t=this.options,l=t.indexOf(e.target);if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),t.length===0)return;let o=e.key==="ArrowDown"?1:-1;t[Math.min(t.length-1,Math.max(0,l+o))]?.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(e))return;let a=this.typeahead.match(e.key,t.map(V),l);a!==-1&&(e.preventDefault(),t[a].focus())};this.handleSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.addEventListener("keydown",this.handleKeyDown),this.syncHostState()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.typeahead.clear(),super.disconnectedCallback()}willUpdate(){this.hasUpdated||(this.value??(this.value=this.defaultValue)),this.activeValue===null&&this.seedActiveValue()}updated(e){this.syncHostState(),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"))}seedActiveValue(){let e=this.options,l=(e.find(a=>this.isSelected(a.getAttribute("data-value")??""))??e[0])?.getAttribute("data-value");l&&(this.activeValue=l)}get options(){return Array.from(this.querySelectorAll(k))}get selectedValues(){return g(this.value)}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){let t=y(this.selectedValues,e,this.multiple);this.value=t,this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}setActiveValue(e){this.activeValue=e}render(){return m`<slot @slotchange=${this.handleSlotChange}></slot>`}};s.styles=[A,p`
+      :host {
+        display: block;
+      }
+    `],n([d({converter:u,reflect:!0})],s.prototype,"value",2),n([d({converter:u,attribute:"default-value"})],s.prototype,"defaultValue",2),n([d({type:Boolean,reflect:!0})],s.prototype,"multiple",2),n([d({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([v()],s.prototype,"activeValue",2),s=n([b("skdx-listbox","listbox","root")],s);function V(i){return i.getAttribute("data-text-value")??i.textContent??""}export{k as OPTION_SELECTOR,s as SkdxListbox,O as findListboxRoot};

package/dist/listbox/ListboxGroup.cjs

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

package/dist/listbox/ListboxGroup.d.cts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-group>` — groups related `<skdx-listbox-item>`s under an
+ * `<skdx-listbox-label>`. Sets `role="group"` on the host element and points
+ * its `aria-labelledby` at that label, generating the label an id if it hasn't
+ * got one.
+ *
+ * Deliberately unlike `<skdx-select-group>`/`<skdx-select-label>`, which are
+ * purely presentational: a select's groups sit inside a popup the user opened
+ * on purpose, whereas a standalone listbox is often one of several things on a
+ * page, so an unnamed group leaves a screen reader announcing "group" with
+ * nothing to distinguish it.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-group>
+ *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
+ *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ * </skdx-listbox-group>
+ * ```
+ */
+export declare class SkdxListboxGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    /** Re-runs when the label arrives later than this element does (a streaming parse). */
+    private readonly handleSlotChange;
+    private syncLabel;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-group': SkdxListboxGroup;
+    }
+}

package/dist/listbox/ListboxGroup.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-group>` — groups related `<skdx-listbox-item>`s under an
+ * `<skdx-listbox-label>`. Sets `role="group"` on the host element and points
+ * its `aria-labelledby` at that label, generating the label an id if it hasn't
+ * got one.
+ *
+ * Deliberately unlike `<skdx-select-group>`/`<skdx-select-label>`, which are
+ * purely presentational: a select's groups sit inside a popup the user opened
+ * on purpose, whereas a standalone listbox is often one of several things on a
+ * page, so an unnamed group leaves a screen reader announcing "group" with
+ * nothing to distinguish it.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-group>
+ *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
+ *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ * </skdx-listbox-group>
+ * ```
+ */
+export declare class SkdxListboxGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    /** Re-runs when the label arrives later than this element does (a streaming parse). */
+    private readonly handleSlotChange;
+    private syncLabel;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-group': SkdxListboxGroup;
+    }
+}

package/dist/listbox/ListboxGroup.js

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

package/dist/listbox/ListboxItem.cjs

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

package/dist/listbox/ListboxItem.d.cts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-item>` — a single selectable option within an
+ * `<skdx-listbox>`. Click, Enter, or Space selects it — replacing the
+ * selection, or toggling it while the root is `multiple`. Focusing it moves
+ * the list's single tab stop onto it.
+ *
+ * `role="option"`, `aria-selected`, `aria-disabled`, `data-value`,
+ * `data-text-value`, `data-state` (`checked`/`unchecked`), `data-disabled`,
+ * and the roving `tabindex` are all set on *this host element*, in light DOM,
+ * never inside the shadow root: the root's own
+ * `querySelectorAll('[role="option"]')` is how it finds its options, and an
+ * ARIA state buried in a shadow tree is invisible both to it and to the
+ * accessibility tree of the surrounding page.
+ *
+ * A disabled option is skipped by the arrows and by typeahead and cannot be
+ * selected; it stays in the DOM and keeps `aria-selected`, so it is still
+ * announced as part of the list. The root's `disabled` ORs with this one's.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-item value="react" text-value="React">
+ *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
+ *   React
+ * </skdx-listbox-item>
+ * ```
+ */
+export declare class SkdxListboxItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Identifier committed to the listbox's value when this option is chosen. Required. */
+    value: string;
+    /**
+     * Excludes this option from selection and from arrow/typeahead navigation.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Text typeahead matches this option against, published as
+     * `data-text-value`. Needed whenever the option renders more than its
+     * label — an `<skdx-listbox-item-indicator>` glyph, an icon, a second line —
+     * since the fallback is the option's whole rendered text content.
+     * @default undefined — falls back to the option's rendered text content.
+     */
+    textValue?: string;
+    /** @internal */
+    private root;
+    /** @internal */
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** Whether this option is disabled in its own right or by the whole list. */
+    private get isDisabled();
+    private syncState;
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    private readonly handleFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-item': SkdxListboxItem;
+    }
+}

package/dist/listbox/ListboxItem.d.ts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-item>` — a single selectable option within an
+ * `<skdx-listbox>`. Click, Enter, or Space selects it — replacing the
+ * selection, or toggling it while the root is `multiple`. Focusing it moves
+ * the list's single tab stop onto it.
+ *
+ * `role="option"`, `aria-selected`, `aria-disabled`, `data-value`,
+ * `data-text-value`, `data-state` (`checked`/`unchecked`), `data-disabled`,
+ * and the roving `tabindex` are all set on *this host element*, in light DOM,
+ * never inside the shadow root: the root's own
+ * `querySelectorAll('[role="option"]')` is how it finds its options, and an
+ * ARIA state buried in a shadow tree is invisible both to it and to the
+ * accessibility tree of the surrounding page.
+ *
+ * A disabled option is skipped by the arrows and by typeahead and cannot be
+ * selected; it stays in the DOM and keeps `aria-selected`, so it is still
+ * announced as part of the list. The root's `disabled` ORs with this one's.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-item value="react" text-value="React">
+ *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
+ *   React
+ * </skdx-listbox-item>
+ * ```
+ */
+export declare class SkdxListboxItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Identifier committed to the listbox's value when this option is chosen. Required. */
+    value: string;
+    /**
+     * Excludes this option from selection and from arrow/typeahead navigation.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Text typeahead matches this option against, published as
+     * `data-text-value`. Needed whenever the option renders more than its
+     * label — an `<skdx-listbox-item-indicator>` glyph, an icon, a second line —
+     * since the fallback is the option's whole rendered text content.
+     * @default undefined — falls back to the option's rendered text content.
+     */
+    textValue?: string;
+    /** @internal */
+    private root;
+    /** @internal */
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** Whether this option is disabled in its own right or by the whole list. */
+    private get isDisabled();
+    private syncState;
+    private readonly handleClick;
+    private readonly handleKeyDown;
+    private readonly handleFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-item': SkdxListboxItem;
+    }
+}

package/dist/listbox/ListboxItem.js

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

package/dist/listbox/ListboxItemIndicator.cjs

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

package/dist/listbox/ListboxItemIndicator.d.cts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-item-indicator>` — renders its slotted content (typically a
+ * check glyph) only while the `<skdx-listbox-item>` it sits in is selected, and
+ * hides otherwise unless `force-mount` is set. `aria-hidden="true"`: the
+ * option's own `aria-selected` already carries the state, so announcing the
+ * glyph too would say it twice.
+ *
+ * Selection is read straight off the root (found with `closest('skdx-listbox')`,
+ * the same mechanism every part uses) rather than off its item's `data-state`
+ * attribute: both elements re-render from the same
+ * `skdx-listbox-internal-update` broadcast, and reading the attribute would
+ * make this element's output depend on which of the two Lit happened to update
+ * first.
+ *
+ * Give the option a `text-value` whenever you render an indicator: typeahead
+ * otherwise matches against the option's whole text content, glyph included.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-item value="react" text-value="React">
+ *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
+ *   React
+ * </skdx-listbox-item>
+ * ```
+ */
+export declare class SkdxListboxItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Keep this indicator mounted even while its option isn't selected, instead
+     * of hiding it.
+     * @default false
+     */
+    forceMount: boolean;
+    /** @internal */
+    private root;
+    /** @internal */
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-item-indicator': SkdxListboxItemIndicator;
+    }
+}

package/dist/listbox/ListboxItemIndicator.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-item-indicator>` — renders its slotted content (typically a
+ * check glyph) only while the `<skdx-listbox-item>` it sits in is selected, and
+ * hides otherwise unless `force-mount` is set. `aria-hidden="true"`: the
+ * option's own `aria-selected` already carries the state, so announcing the
+ * glyph too would say it twice.
+ *
+ * Selection is read straight off the root (found with `closest('skdx-listbox')`,
+ * the same mechanism every part uses) rather than off its item's `data-state`
+ * attribute: both elements re-render from the same
+ * `skdx-listbox-internal-update` broadcast, and reading the attribute would
+ * make this element's output depend on which of the two Lit happened to update
+ * first.
+ *
+ * Give the option a `text-value` whenever you render an indicator: typeahead
+ * otherwise matches against the option's whole text content, glyph included.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-item value="react" text-value="React">
+ *   <skdx-listbox-item-indicator>✓</skdx-listbox-item-indicator>
+ *   React
+ * </skdx-listbox-item>
+ * ```
+ */
+export declare class SkdxListboxItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Keep this indicator mounted even while its option isn't selected, instead
+     * of hiding it.
+     * @default false
+     */
+    forceMount: boolean;
+    /** @internal */
+    private root;
+    /** @internal */
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-item-indicator': SkdxListboxItemIndicator;
+    }
+}

package/dist/listbox/ListboxItemIndicator.js

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

package/dist/listbox/ListboxLabel.cjs

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