@skdx/web-components 0.26.0

package/dist/select/Select.d.ts

@@ -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.js").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 {};

package/dist/select/Select.js

@@ -0,0 +1,17 @@
+var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(l,a,e,t)=>{for(var s=t>1?void 0:t?h(a,e):a,o=l.length-1,u;o>=0;o--)(u=l[o])&&(s=(t?u(a,e,s):u(s))||s);return t&&s&&d(a,e,s),s};import{css as m,html as p,LitElement as c,nothing as v}from"lit";import{property as r}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{FormAssociated as f}from"../internal/form-associated.js";import{nextId as b}from"../internal/ids.js";import{notifyOpenChangeComplete as y}from"../internal/open-change-complete.js";import{nextSelection as C,toValues as E}from"../internal/selection.js";import{hiddenHostStyles as w,resetNativeControl as O}from"../internal/styles.js";var i=class extends f(c){constructor(){super(...arguments);this.multiple=!1;this.open=!1;this.disabled=!1;this.required=!1;this.invalid=!1;this.contentId=b("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=y(()=>this.querySelector("skdx-select-content"),this.open,s=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:s,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 s of e)t.append(this.name,s);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 E(this.value)}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){this.value=C(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 p`
+      <slot></slot>
+      ${this.name?t.map(s=>p`<input
+                  type="text"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  .name=${this.name??""}
+                  .value=${s}
+                  ?required=${this.required}
+                  ?disabled=${this.disabled}
+                  style="position: absolute; pointer-events: none; opacity: 0; margin: 0; width: 1px; height: 1px"
+                />`):v}
+    `}};i.styles=[O,w,m`
+      :host {
+        display: contents;
+      }
+    `],n([r({type:String})],i.prototype,"value",2),n([r({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),n([r({type:Boolean,reflect:!0})],i.prototype,"multiple",2),n([r({attribute:!1})],i.prototype,"items",2),n([r({type:Boolean,reflect:!0})],i.prototype,"open",2),n([r({type:Boolean,reflect:!0})],i.prototype,"disabled",2),n([r({type:Boolean,reflect:!0})],i.prototype,"required",2),n([r({type:Boolean,reflect:!0})],i.prototype,"invalid",2),n([r({type:String})],i.prototype,"name",2),n([r({attribute:"required-message"})],i.prototype,"requiredMessage",2),i=n([g("skdx-select")],i);export{i as SkdxSelect};

package/dist/select/SelectContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var T=(r,i)=>{for(var t in i)u(r,t,{get:i[t],enumerable:!0})},P=(r,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of O(i))!E.call(r,o)&&o!==t&&u(r,o,{get:()=>i[o],enumerable:!(e=f(i,o))||e.enumerable});return r};var w=r=>P(u({},"__esModule",{value:!0}),r),a=(r,i,t,e)=>{for(var o=e>1?void 0:e?f(i,t):i,h=r.length-1,d;h>=0;h--)(d=r[h])&&(o=(e?d(i,t,o):d(o))||o);return e&&o&&u(i,t,o),o};var L={};T(L,{SkdxSelectContent:()=>s});module.exports=w(L);var c=require("lit"),l=require("lit/decorators.js"),y=require("../internal/closest.cjs"),g=require("../internal/define.cjs"),n=require("../internal/dismiss.cjs"),p=require("../internal/positioning.cjs"),v=require("../internal/styles.cjs"),b=require("../internal/typeahead.cjs");var m='[role="option"]:not([data-disabled])',s=class extends c.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.typeahead="";this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,n.triggerContains)(this.root.triggerEl,e)||(0,n.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,n.focusOutsideTarget)(t);!e||this.contains(e)||this.root.contains(e)||(0,n.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{let e=Array.from(this.querySelectorAll(m)),o=e.indexOf(document.activeElement);if(t.key==="Escape"){if(t.preventDefault(),!(0,n.dispatchEscapeKeyDown)(this,t))return;this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="Tab"){t.preventDefault(),this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="ArrowDown"||t.key==="ArrowUp"){if(t.preventDefault(),e.length===0)return;let h=t.key==="ArrowDown"?1:-1,d=Math.min(e.length-1,Math.max(0,o+h));e[d]?.focus();return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),document.activeElement?.click();return}t.key.length===1&&(this.typeahead+=t.key.toLowerCase(),clearTimeout(this.typeaheadTimer),this.typeaheadTimer=setTimeout(()=>this.typeahead="",500),e.find(d=>(0,b.itemText)(d).trim().toLowerCase().startsWith(this.typeahead))?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=(0,y.closestThroughPortal)(this,"skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),clearTimeout(this.typeaheadTimer),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.root?.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=(0,p.positionFloating)(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"select"}),requestAnimationFrame(()=>(0,n.focusOnOpen)(()=>{let t=this.querySelector('[role="option"][data-state="checked"]'),e=this.querySelector(m);(t??e??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return c.html`<slot></slot>`}};s.styles=[v.hiddenHostStyles,c.css`
+      :host {
+        display: block;
+      }
+    `],a([(0,l.property)({type:String})],s.prototype,"side",2),a([(0,l.property)({type:String})],s.prototype,"align",2),a([(0,l.property)({type:Number,attribute:"side-offset"})],s.prototype,"sideOffset",2),a([(0,l.property)({type:Number,attribute:"align-offset"})],s.prototype,"alignOffset",2),a([(0,l.property)({converter:p.optOutBoolean,attribute:"avoid-collisions"})],s.prototype,"avoidCollisions",2),a([(0,l.property)({type:Number,attribute:"collision-padding"})],s.prototype,"collisionPadding",2),a([(0,l.property)({attribute:!1})],s.prototype,"collisionBoundary",2),s=a([(0,g.customElement)("skdx-select-content","select","content")],s);0&&(module.exports={SkdxSelectContent});

package/dist/select/SelectContent.d.cts

@@ -0,0 +1,85 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.cjs';
+/**
+ * `<skdx-select-content>` — the listbox popup for the closest ancestor
+ * `<skdx-select>`, positioned relative to the trigger via `@floating-ui/dom`
+ * (`strategy: 'fixed'`, so it isn't clipped by `overflow: hidden` ancestors
+ * even without a portal — unlike React's `SelectPortal`, this content
+ * renders in normal document flow). `role`, `id`, `data-state`, and the
+ * `data-side`/`data-align` placement hooks (seeded from the configured
+ * `side`/`align`, then rewritten by `positionFloating` with floating-ui's
+ * resolved placement) are set directly on this host element (not inside shadow DOM) because
+ * `aria-controls` on the trigger targets this element's id, and because this
+ * element's own light-DOM `querySelectorAll` is how it finds its
+ * `<skdx-select-option>` children — both need the plain light-DOM tree, not
+ * a shadow-encapsulated one. Owns roving-focus + typeahead keyboard
+ * navigation between options, focuses the selected (or first) option on
+ * open, closes on Escape or an outside interaction (returning focus to the
+ * trigger), and closes on Tab.
+ *
+ * `positionFloating` also writes the measurement custom properties
+ * `--skdx-select-available-width` / `-available-height` / `-trigger-width` /
+ * `-transform-origin` onto this element on every reposition, so the listbox
+ * can be sized (`max-height: var(--skdx-select-available-height)`) and
+ * animated from CSS without measuring anything by hand.
+ *
+ * @fires escape-key-down - Escape was pressed while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside this listbox while open. Preventable.
+ * @fires focus-outside - Focus moved outside this listbox while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ */
+export declare class SkdxSelectContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the trigger to place the listbox against. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the trigger. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the listbox and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * listbox's clipping ancestors — keeps it inside a scroll container or one
+     * pane of a split layout rather than the whole viewport. Property-only: an
+     * `Element` cannot come from an attribute string.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private typeahead;
+    private typeaheadTimer?;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The trigger registers the element to anchor against in its own
+     * `firstUpdated()`, which has not run yet when this panel's
+     * `connectedCallback` does — so a panel that mounts already open finds no
+     * anchor and, with no open-state change to follow, never positions itself at
+     * all. This is the first tick where the anchor exists; `activate()` is
+     * guarded, so an already-positioned panel is untouched.
+     */
+    protected firstUpdated(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-content': SkdxSelectContent;
+    }
+}

package/dist/select/SelectContent.d.ts

@@ -0,0 +1,85 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.js';
+/**
+ * `<skdx-select-content>` — the listbox popup for the closest ancestor
+ * `<skdx-select>`, positioned relative to the trigger via `@floating-ui/dom`
+ * (`strategy: 'fixed'`, so it isn't clipped by `overflow: hidden` ancestors
+ * even without a portal — unlike React's `SelectPortal`, this content
+ * renders in normal document flow). `role`, `id`, `data-state`, and the
+ * `data-side`/`data-align` placement hooks (seeded from the configured
+ * `side`/`align`, then rewritten by `positionFloating` with floating-ui's
+ * resolved placement) are set directly on this host element (not inside shadow DOM) because
+ * `aria-controls` on the trigger targets this element's id, and because this
+ * element's own light-DOM `querySelectorAll` is how it finds its
+ * `<skdx-select-option>` children — both need the plain light-DOM tree, not
+ * a shadow-encapsulated one. Owns roving-focus + typeahead keyboard
+ * navigation between options, focuses the selected (or first) option on
+ * open, closes on Escape or an outside interaction (returning focus to the
+ * trigger), and closes on Tab.
+ *
+ * `positionFloating` also writes the measurement custom properties
+ * `--skdx-select-available-width` / `-available-height` / `-trigger-width` /
+ * `-transform-origin` onto this element on every reposition, so the listbox
+ * can be sized (`max-height: var(--skdx-select-available-height)`) and
+ * animated from CSS without measuring anything by hand.
+ *
+ * @fires escape-key-down - Escape was pressed while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside this listbox while open. Preventable.
+ * @fires focus-outside - Focus moved outside this listbox while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ */
+export declare class SkdxSelectContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the trigger to place the listbox against. */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the trigger. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the listbox and the trigger's edge. */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * listbox's clipping ancestors — keeps it inside a scroll container or one
+     * pane of a split layout rather than the whole viewport. Property-only: an
+     * `Element` cannot come from an attribute string.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private typeahead;
+    private typeaheadTimer?;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The trigger registers the element to anchor against in its own
+     * `firstUpdated()`, which has not run yet when this panel's
+     * `connectedCallback` does — so a panel that mounts already open finds no
+     * anchor and, with no open-state change to follow, never positions itself at
+     * all. This is the first tick where the anchor exists; `activate()` is
+     * guarded, so an already-positioned panel is untouched.
+     */
+    protected firstUpdated(): void;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-content': SkdxSelectContent;
+    }
+}

package/dist/select/SelectContent.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(d,l,t,e)=>{for(var o=e>1?void 0:e?p(l,t):l,a=d.length-1,r;a>=0;a--)(r=d[a])&&(o=(e?r(l,t,o):r(o))||o);return e&&o&&u(l,t,o),o};import{css as f,html as m,LitElement as y}from"lit";import{property as n}from"lit/decorators.js";import{closestThroughPortal as g}from"../internal/closest.js";import{customElement as v}from"../internal/define.js";import{dispatchEscapeKeyDown as b,dispatchOutside as h,focusOnOpen as O,focusOutsideTarget as E,triggerContains as T}from"../internal/dismiss.js";import{optOutBoolean as P,positionFloating as w}from"../internal/positioning.js";import{hiddenHostStyles as L}from"../internal/styles.js";import{itemText as k}from"../internal/typeahead.js";var c='[role="option"]:not([data-disabled])',i=class extends y{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.typeahead="";this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||T(this.root.triggerEl,e)||h(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=E(t);!e||this.contains(e)||this.root.contains(e)||h(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleKeyDown=t=>{let e=Array.from(this.querySelectorAll(c)),o=e.indexOf(document.activeElement);if(t.key==="Escape"){if(t.preventDefault(),!b(this,t))return;this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="Tab"){t.preventDefault(),this.root?.setOpen(!1),this.root?.focusTrigger();return}if(t.key==="ArrowDown"||t.key==="ArrowUp"){if(t.preventDefault(),e.length===0)return;let a=t.key==="ArrowDown"?1:-1,r=Math.min(e.length-1,Math.max(0,o+a));e[r]?.focus();return}if(t.key==="Enter"||t.key===" "){t.preventDefault(),document.activeElement?.click();return}t.key.length===1&&(this.typeahead+=t.key.toLowerCase(),clearTimeout(this.typeaheadTimer),this.typeaheadTimer=setTimeout(()=>this.typeahead="",500),e.find(r=>k(r).trim().toLowerCase().startsWith(this.typeahead))?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=g(this,"skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),clearTimeout(this.typeaheadTimer),super.disconnectedCallback()}firstUpdated(){this.root?.open&&this.activate()}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.root?.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.hidden=!t,t?this.activate():this.deactivate(),this.requestUpdate()}activate(){this.cleanupPosition||!this.root?.triggerEl||(this.cleanupPosition=w(this.root.triggerEl,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"select"}),requestAnimationFrame(()=>O(()=>{let t=this.querySelector('[role="option"][data-state="checked"]'),e=this.querySelector(c);(t??e??this).focus()})))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return m`<slot></slot>`}};i.styles=[L,f`
+      :host {
+        display: block;
+      }
+    `],s([n({type:String})],i.prototype,"side",2),s([n({type:String})],i.prototype,"align",2),s([n({type:Number,attribute:"side-offset"})],i.prototype,"sideOffset",2),s([n({type:Number,attribute:"align-offset"})],i.prototype,"alignOffset",2),s([n({converter:P,attribute:"avoid-collisions"})],i.prototype,"avoidCollisions",2),s([n({type:Number,attribute:"collision-padding"})],i.prototype,"collisionPadding",2),s([n({attribute:!1})],i.prototype,"collisionBoundary",2),i=s([v("skdx-select-content","select","content")],i);export{i as SkdxSelectContent};

package/dist/select/SelectGroup.cjs

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

package/dist/select/SelectGroup.d.cts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-group>` — groups related `<skdx-select-option>`s together,
+ * typically preceded by a `<skdx-select-label>`. Sets `role="group"` on the
+ * host element.
+ */
+export declare class SkdxSelectGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-group': SkdxSelectGroup;
+    }
+}

package/dist/select/SelectGroup.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-group>` — groups related `<skdx-select-option>`s together,
+ * typically preceded by a `<skdx-select-label>`. Sets `role="group"` on the
+ * host element.
+ */
+export declare class SkdxSelectGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-group': SkdxSelectGroup;
+    }
+}

package/dist/select/SelectGroup.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var c=(o,r,l,s)=>{for(var e=s>1?void 0:s?n(r,l):r,i=o.length-1,a;i>=0;i--)(a=o[i])&&(e=(s?a(r,l,e):a(e))||e);return s&&e&&m(r,l,e),e};import{css as d,html as p,LitElement as g}from"lit";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";var t=class extends g{connectedCallback(){super.connectedCallback(),this.setAttribute("role","group")}render(){return p`<slot></slot>`}};t.styles=[u,d`
+      :host {
+        display: block;
+      }
+    `],t=c([b("skdx-select-group","select","group")],t);export{t as SkdxSelectGroup};

package/dist/select/SelectIcon.cjs

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

package/dist/select/SelectIcon.d.cts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-icon>` — decorative indicator inside a
+ * `<skdx-select-trigger>` (e.g. a chevron). Renders an `aria-hidden`
+ * `<span>` defaulting to `▾` when no light-DOM content is provided.
+ */
+export declare class SkdxSelectIcon extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-icon': SkdxSelectIcon;
+    }
+}

package/dist/select/SelectIcon.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-icon>` — decorative indicator inside a
+ * `<skdx-select-trigger>` (e.g. a chevron). Renders an `aria-hidden`
+ * `<span>` defaulting to `▾` when no light-DOM content is provided.
+ */
+export declare class SkdxSelectIcon extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-icon': SkdxSelectIcon;
+    }
+}

package/dist/select/SelectIcon.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(i,t,a,r)=>{for(var e=r>1?void 0:r?p(t,a):t,l=i.length-1,n;l>=0;l--)(n=i[l])&&(e=(r?n(t,a,e):n(e))||e);return r&&e&&m(t,a,e),e};import{css as c,html as d,LitElement as f}from"lit";import{customElement as h}from"../internal/define.js";var s=class extends f{render(){return d`<span aria-hidden="true" part="icon"><slot>▾</slot></span>`}};s.styles=c`
+    :host {
+      display: inline-flex;
+    }
+  `,s=o([h("skdx-select-icon","select","icon")],s);export{s as SkdxSelectIcon};

package/dist/select/SelectItemIndicator.cjs

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

package/dist/select/SelectItemIndicator.d.cts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-item-indicator>` — the tick shown inside the
+ * `<skdx-select-option>` that is currently selected.
+ *
+ * `aria-hidden`, because the option already announces itself through
+ * `aria-selected` — an indicator that also spoke would say it twice.
+ *
+ * Hidden via `hidden` + `:host([hidden])` rather than unmounted, this package's
+ * convention; React's `SelectItemIndicator` returns `null` instead. `force-mount`
+ * keeps it visible in every state, which is how you reserve its width so that
+ * selecting an option does not shift the label sideways.
+ *
+ * Pair it with `<skdx-select-item-text>`. Without one, this element's glyph
+ * lands in the option's `textContent` and therefore in the label the trigger
+ * displays.
+ *
+ * @example
+ * ```html
+ * <skdx-select-option value="react">
+ *   <skdx-select-item-text>React</skdx-select-item-text>
+ *   <skdx-select-item-indicator>✓</skdx-select-item-indicator>
+ * </skdx-select-option>
+ * ```
+ *
+ * @slot - The mark itself.
+ */
+export declare class SkdxSelectItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stay visible even while the option is unselected, instead of hiding.
+     * @default false
+     */
+    forceMount: boolean;
+    private option;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-item-indicator': SkdxSelectItemIndicator;
+    }
+}

package/dist/select/SelectItemIndicator.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-item-indicator>` — the tick shown inside the
+ * `<skdx-select-option>` that is currently selected.
+ *
+ * `aria-hidden`, because the option already announces itself through
+ * `aria-selected` — an indicator that also spoke would say it twice.
+ *
+ * Hidden via `hidden` + `:host([hidden])` rather than unmounted, this package's
+ * convention; React's `SelectItemIndicator` returns `null` instead. `force-mount`
+ * keeps it visible in every state, which is how you reserve its width so that
+ * selecting an option does not shift the label sideways.
+ *
+ * Pair it with `<skdx-select-item-text>`. Without one, this element's glyph
+ * lands in the option's `textContent` and therefore in the label the trigger
+ * displays.
+ *
+ * @example
+ * ```html
+ * <skdx-select-option value="react">
+ *   <skdx-select-item-text>React</skdx-select-item-text>
+ *   <skdx-select-item-indicator>✓</skdx-select-item-indicator>
+ * </skdx-select-option>
+ * ```
+ *
+ * @slot - The mark itself.
+ */
+export declare class SkdxSelectItemIndicator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stay visible even while the option is unselected, instead of hiding.
+     * @default false
+     */
+    forceMount: boolean;
+    private option;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-item-indicator': SkdxSelectItemIndicator;
+    }
+}

package/dist/select/SelectItemIndicator.js

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