@skdx/web-components 0.26.0 → 0.28.0

package/dist/select/Select.d.ts

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

package/dist/select/Select.js

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

package/dist/select/SelectAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var n in t)p(e,n,{get:t[n],enumerable:!0})},S=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!u.call(e,o)&&o!==n&&p(e,o,{get:()=>t[o],enumerable:!(r=a(t,o))||r.enumerable});return e};var E=e=>S(p({},"__esModule",{value:!0}),e);var A={};x(A,{SELECT_ANATOMY_GENERATED:()=>s,SELECT_RENDER_SLOTS:()=>f,fillSelectAnatomy:()=>k,refreshSelectAnatomyText:()=>v});module.exports=E(A);var i=require("../internal/host-attributes.cjs"),l=require("../internal/options.cjs"),h=require("./SelectTrigger.cjs"),b=require("./SelectPortal.cjs"),C=require("./SelectValue.cjs"),T=require("./SelectIcon.cjs"),y=require("./SelectContent.cjs"),L=require("./SelectViewport.cjs"),R=require("./SelectItem.cjs"),_=require("./SelectItemText.cjs"),N=require("./SelectItemIndicator.cjs"),O=require("./SelectGroup.cjs"),D=require("./SelectLabel.cjs"),q=require("./SelectSeparator.cjs"),s="data-skdx-select-generated",f=["option","value"];function k(e){let t=(0,l.renderSlotContent)(e,"option"),n=(0,l.renderSlotContent)(e,"value"),r=document.createElement("skdx-select-trigger");r.setAttribute(s,""),(0,i.forwardHostAttributes)(e,r);let o=document.createElement("skdx-select-value");e.placeholder&&o.setAttribute("placeholder",e.placeholder);for(let d of n.values())o.append((0,l.stampRenderSlot)(d));r.append(o,document.createElement("skdx-select-icon"));let c=document.createElement("skdx-select-content");c.setAttribute(s,""),c.append(...(0,l.buildOptionElements)(e.options??[],{item:"skdx-select-item",group:"skdx-select-group",groupLabel:"skdx-select-label",itemContent:t})),e.replaceChildren(r,c)}function v(e){let t=e.querySelector(":scope > skdx-select-trigger > skdx-select-value");t&&(e.placeholder?t.setAttribute("placeholder",e.placeholder):t.removeAttribute("placeholder"))}0&&(module.exports={SELECT_ANATOMY_GENERATED,SELECT_RENDER_SLOTS,fillSelectAnatomy,refreshSelectAnatomyText});

package/dist/select/SelectAnatomy.d.cts

@@ -0,0 +1,34 @@
+import type { SkdxSelect } from './Select.cjs';
+import './SelectTrigger.cjs';
+import './SelectPortal.cjs';
+import './SelectValue.cjs';
+import './SelectIcon.cjs';
+import './SelectContent.cjs';
+import './SelectViewport.cjs';
+import './SelectItem.cjs';
+import './SelectItemText.cjs';
+import './SelectItemIndicator.cjs';
+import './SelectGroup.cjs';
+import './SelectLabel.cjs';
+import './SelectSeparator.cjs';
+/** @internal Marks a direct child of `<skdx-select>` this module generated. */
+export declare const SELECT_ANATOMY_GENERATED = "data-skdx-select-generated";
+/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
+export declare const SELECT_RENDER_SLOTS: readonly ["option", "value"];
+/**
+ * Builds the anatomy — a trigger holding Value and Icon, and a listbox with one
+ * Item per `root.options` (grouped entries become a Group with Label) — as
+ * light-DOM children of `root`.
+ *
+ * `slot="option"` supplies per-option content; `slot="value"` supplies the
+ * value read-out. The host's `id`/`class`/`style`/`data-*`/`aria-*` move onto
+ * the Trigger.
+ * @internal
+ */
+export declare function fillSelectAnatomy(root: SkdxSelect): void;
+/**
+ * Refreshes the generated Value's `placeholder` in place — the only part that
+ * changes without a structural rebuild.
+ * @internal
+ */
+export declare function refreshSelectAnatomyText(root: SkdxSelect): void;

package/dist/select/SelectAnatomy.d.ts

@@ -0,0 +1,34 @@
+import type { SkdxSelect } from './Select.js';
+import './SelectTrigger.js';
+import './SelectPortal.js';
+import './SelectValue.js';
+import './SelectIcon.js';
+import './SelectContent.js';
+import './SelectViewport.js';
+import './SelectItem.js';
+import './SelectItemText.js';
+import './SelectItemIndicator.js';
+import './SelectGroup.js';
+import './SelectLabel.js';
+import './SelectSeparator.js';
+/** @internal Marks a direct child of `<skdx-select>` this module generated. */
+export declare const SELECT_ANATOMY_GENERATED = "data-skdx-select-generated";
+/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
+export declare const SELECT_RENDER_SLOTS: readonly ["option", "value"];
+/**
+ * Builds the anatomy — a trigger holding Value and Icon, and a listbox with one
+ * Item per `root.options` (grouped entries become a Group with Label) — as
+ * light-DOM children of `root`.
+ *
+ * `slot="option"` supplies per-option content; `slot="value"` supplies the
+ * value read-out. The host's `id`/`class`/`style`/`data-*`/`aria-*` move onto
+ * the Trigger.
+ * @internal
+ */
+export declare function fillSelectAnatomy(root: SkdxSelect): void;
+/**
+ * Refreshes the generated Value's `placeholder` in place — the only part that
+ * changes without a structural rebuild.
+ * @internal
+ */
+export declare function refreshSelectAnatomyText(root: SkdxSelect): void;

package/dist/select/SelectAnatomy.js

@@ -0,0 +1 @@
+import{forwardHostAttributes as i}from"../internal/host-attributes.js";import{buildOptionElements as d,renderSlotContent as n,stampRenderSlot as a}from"../internal/options.js";import"./SelectTrigger.js";import"./SelectPortal.js";import"./SelectValue.js";import"./SelectIcon.js";import"./SelectContent.js";import"./SelectViewport.js";import"./SelectItem.js";import"./SelectItemText.js";import"./SelectItemIndicator.js";import"./SelectGroup.js";import"./SelectLabel.js";import"./SelectSeparator.js";var c="data-skdx-select-generated",y=["option","value"];function L(e){let t=n(e,"option"),p=n(e,"value"),o=document.createElement("skdx-select-trigger");o.setAttribute(c,""),i(e,o);let r=document.createElement("skdx-select-value");e.placeholder&&r.setAttribute("placeholder",e.placeholder);for(let s of p.values())r.append(a(s));o.append(r,document.createElement("skdx-select-icon"));let l=document.createElement("skdx-select-content");l.setAttribute(c,""),l.append(...d(e.options??[],{item:"skdx-select-item",group:"skdx-select-group",groupLabel:"skdx-select-label",itemContent:t})),e.replaceChildren(o,l)}function R(e){let t=e.querySelector(":scope > skdx-select-trigger > skdx-select-value");t&&(e.placeholder?t.setAttribute("placeholder",e.placeholder):t.removeAttribute("placeholder"))}export{c as SELECT_ANATOMY_GENERATED,y as SELECT_RENDER_SLOTS,L as fillSelectAnatomy,R as refreshSelectAnatomyText};

package/dist/select/SelectContent.cjs

@@ -1,5 +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`
+"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var L=(s,o)=>{for(var t in o)u(s,t,{get:o[t],enumerable:!0})},w=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!P.call(s,i)&&i!==t&&u(s,i,{get:()=>o[i],enumerable:!(e=v(o,i))||e.enumerable});return s};var A=s=>w(u({},"__esModule",{value:!0}),s),r=(s,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,d=s.length-1,h;d>=0;d--)(h=s[d])&&(i=(e?h(o,t,i):h(i))||i);return e&&i&&u(o,t,i),i};var D={};L(D,{SkdxSelectContent:()=>n});module.exports=A(D);var c=require("lit"),l=require("lit/decorators.js"),m=require("../internal/closest.cjs"),g=require("../internal/define.cjs"),a=require("../internal/dismiss.cjs"),p=require("../internal/positioning.cjs"),y=require("../internal/styles.cjs"),b=require("./Select.cjs");function T(s,o){let t=s.querySelector('[data-part="viewport"]')??s;if(t===o||!t.contains(o))return;let e=t.getBoundingClientRect(),i=o.getBoundingClientRect();t.scrollTop+=i.top-e.top-(e.height-i.height)/2}var n=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.preventFocusSteal=t=>t.preventDefault();this.handleOutsidePointerDown=t=>{if(!this.root?.open)return;let e=t.target;this.contains(e)||(0,a.triggerContains)(this.root.triggerEl,e)||(0,a.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let e=(0,a.focusOutsideTarget)(t);!e||this.contains(e)||this.root.contains(e)||(0,a.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)};this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,a.dispatchEscapeKeyDown)(this,t)&&(this.root.setOpen(!1),this.root.focusTrigger()))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.tabIndex=-1,this.root=(0,m.closestThroughPortal)(this,"skdx-select"),this.root&&(this.root.contentEl=this),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.root&&(this.id?this.root.contentId=this.id:this.id=this.root.contentId),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("mousedown",this.preventFocusSteal),document.removeEventListener("keydown",this.handleDocumentKeyDown,!0),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),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(()=>this.seedActiveOption()))}seedActiveOption(){let t=this.root;if(!t?.open)return;let e=t.openIntent;t.openIntent="selected";let i=Array.from(this.querySelectorAll(b.OPTION_SELECTOR)),d=i[0],h=i[i.length-1],E=this.querySelector('[role="option"][data-state="checked"]'),f=e==="first"?d:e==="last"?h:E??d;f&&(t.setActiveId(f.id),T(this,f))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return c.html`<slot></slot>`}};n.styles=[y.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});
+    `],r([(0,l.property)({type:String})],n.prototype,"side",2),r([(0,l.property)({type:String})],n.prototype,"align",2),r([(0,l.property)({type:Number,attribute:"side-offset"})],n.prototype,"sideOffset",2),r([(0,l.property)({type:Number,attribute:"align-offset"})],n.prototype,"alignOffset",2),r([(0,l.property)({converter:p.optOutBoolean,attribute:"avoid-collisions"})],n.prototype,"avoidCollisions",2),r([(0,l.property)({type:Number,attribute:"collision-padding"})],n.prototype,"collisionPadding",2),r([(0,l.property)({attribute:!1})],n.prototype,"collisionBoundary",2),n=r([(0,g.customElement)("skdx-select-content","select","content")],n);0&&(module.exports={SkdxSelectContent});

package/dist/select/SelectContent.d.cts

@@ -1,21 +1,13 @@
 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.
+ * The floating listbox (role="listbox"), positioned relative to the trigger via
+ * @floating-ui/dom. Publishes `data-state` and `data-side`/`data-align` hooks for
+ * styling, `aria-multiselectable` while `multiple`, and carries the roving tab
+ * stop.
+ *
+ * Closed by Escape or an outside interaction (returning focus to the trigger, which
+ * never lost it).
  *
  * `positionFloating` also writes the measurement custom properties
  * `--skdx-select-available-width` / `-available-height` / `-trigger-width` /
@@ -27,37 +19,47 @@ import { type PositionOptions } from '../internal/positioning.cjs';
  * @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.
+ * @fires close-auto-focus - Fired just before focus is returned to the trigger as the listbox closes — on Escape, and on committing an option. Preventing it suppresses that return so the consumer can place focus themselves, for when the trigger no longer exists. Preventable.
  */
 export declare class SkdxSelectContent extends LitElement {
     static styles: import("lit").CSSResult[];
-    /** Preferred edge of the trigger to place the listbox against. */
+    /**
+     * Preferred edge of the trigger to place the listbox.
+     * @default 'bottom'
+     */
     side: PositionOptions['side'];
-    /** Preferred alignment along that edge relative to the trigger. */
+    /**
+     * Preferred alignment of the listbox along that edge.
+     * @default 'start'
+     */
     align: PositionOptions['align'];
-    /** Pixel gap between the listbox and the trigger's edge. */
+    /**
+     * Pixel gap between listbox and trigger.
+     * @default 4
+     */
     sideOffset: number;
-    /** Pixel offset along the alignment axis. */
+    /**
+     * Pixel offset along the alignment axis.
+     * @default 0
+     */
     alignOffset: number;
-    /** Flip/shift to stay within the viewport instead of overflowing it. */
+    /**
+     * Automatically flip and shift the listbox to stay within viewport.
+     * @default true
+     */
     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.
+     * Minimum distance from collision boundary; a number applies to all sides, an object sets only named sides.
+     * @default 8
      */
     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.
+     * Elements collisions are measured against; use it to keep the listbox inside a scroll container or split pane.
+     * @default undefined
      */
     collisionBoundary?: PositionOptions['collisionBoundary'];
     private root;
     private readonly onRootUpdate;
-    private typeahead;
-    private typeaheadTimer?;
     private cleanupPosition?;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -72,10 +74,40 @@ export declare class SkdxSelectContent extends LitElement {
     protected firstUpdated(): void;
     private syncHostState;
     private activate;
+    /**
+     * Makes the selected option (or the first enabled one) active when the
+     * listbox opens, and scrolls it into the listbox.
+     *
+     * `scrollIntoListbox` rather than the `scrollIntoView({ block: 'nearest' })`
+     * the trigger uses while navigating, and that difference is load-bearing:
+     * floating-ui renders the content at the document origin for the frame before
+     * it measures and applies its transform, so *any* ancestor-walking scroll in
+     * this frame asks the browser to bring an element sitting at y=0 into view —
+     * which scrolls the page to the top, out from under whatever the user was
+     * looking at. That was the regression the old `.focus()` here caused; only
+     * the listbox may scroll on open. By the time the user presses a key the
+     * content is positioned and the trigger's explicit `scrollIntoView` is safe.
+     */
+    private seedActiveOption;
     private deactivate;
+    /**
+     * Real DOM focus must never leave the trigger; a mousedown inside the listbox
+     * would otherwise steal it on some browsers, and with it the whole keyboard —
+     * every listbox key is handled on the trigger now.
+     */
+    private readonly preventFocusSteal;
     private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
-    private readonly handleKeyDown;
+    /**
+     * Escape, and only Escape — the roving-focus, typeahead, Tab and Enter
+     * branches belong to `<skdx-select-trigger>`, which is where the keyboard
+     * actually arrives.
+     *
+     * `focusTrigger()` is kept even though the trigger never gave focus up: a
+     * consumer who moved focus into the listbox some other way still ends up with
+     * focus where the contract says it is, and it is a no-op otherwise.
+     */
+    private readonly handleDocumentKeyDown;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {