@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/select/select.js

@@ -1,695 +1,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './select.class.js';
+import { LyraSelect } from './select.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { place } from '../../internal/positioner.js';
-import { nextId } from '../../internal/a11y.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
-import { styles } from './select.styles.js';
-import { LyraOption } from '../combobox/option.js';
-import '../combobox/option.js';
-/**
- * `<lyra-select>` — a plain closed-list dropdown: a direct `<lyra-*>`
- * counterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text
- * input) -- click/Enter/Space/ArrowDown opens it, there's no typing-to-filter.
- * A printable keypress instead jumps (or, while closed, directly selects) the
- * next option whose label starts with what's been typed, like a native
- * `<select>`'s type-ahead.
- *
- * Options are `<lyra-option value>` children, the same element `<lyra-combobox>`
- * uses. Unlike `lyra-combobox` this is single-select only, with no filter/
- * source/with-clear/max-options-visible/empty-text/max-render/multiple surface
- * -- see `<lyra-combobox>` for the filterable/multi-select case.
- *
- * Reuses `lyra-combobox`'s popup positioning (`internal/positioner.js`) and
- * click-outside/Escape/Home/End/Arrow-key listbox navigation patterns,
- * adapted to a trigger button that keeps DOM focus throughout (the listbox's
- * "active" row is conveyed via `aria-activedescendant`, never actual focus),
- * matching the WAI-ARIA "select-only combobox" pattern.
- *
- * When `autoCommitSingleOption` is set and exactly one option is enabled
- * (regardless of how many disabled ones exist alongside it), the popup never
- * opens at all: a click, Enter, Space, ArrowDown, or ArrowUp on the trigger
- * commits that sole option directly, and the trigger renders as a plain
- * `role="button"` with no chevron/`aria-haspopup`/`aria-expanded` rather than
- * a combobox with a permanently inert popup state — opening a one-row list to
- * pick the only available choice is pure friction with no real decision
- * behind it. This never changes `value`/validity defaults on its own — an
- * unselected single-option select stays unselected (and a `required` one
- * stays invalid) exactly like the multi-option case, until the trigger is
- * actually activated. `autoCommitSingleOption` defaults to `false`: by
- * default a select always renders the normal combobox/listbox/chevron
- * trigger no matter how many options are enabled, matching pre-1.3.0
- * behavior — opt in explicitly if a narrowing-to-one option list should
- * auto-commit.
- *
- * @customElement lyra-select
- * @slot - `<lyra-option>` elements.
- * @slot label - Custom label content.
- * @slot hint - Custom hint content.
- * @slot error - Custom error content.
- * @event change - The selection changed.
- * @event input - Fired alongside `change` on every selection change (native
- *   `<select>` doesn't meaningfully distinguish the two either).
- * @event lyra-show - The listbox opened.
- * @event lyra-hide - The listbox closed.
- * @csspart form-control - The outer wrapper around label, trigger, listbox, error and hint.
- * @csspart form-control-label - The `<label>` element.
- * @csspart trigger - The trigger button (positioning anchor).
- * @csspart listbox - The options popover.
- * @csspart option - An option row.
- * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
- * @csspart option-label - An option row's label/sub wrapper.
- * @csspart option-sub - An option row's secondary line (when `sub` is set).
- * @csspart expand-icon - The dropdown indicator.
- * @csspart error - The error message.
- * @csspart hint - The hint message.
- */
-export class LyraSelect extends LyraElement {
-    static { this.formAssociated = true; }
-    static { this.styles = [LyraElement.styles, styles]; }
-    static { this.properties = {
-        disabled: { type: Boolean, reflect: true, noAccessor: true },
-        required: { type: Boolean, reflect: true, noAccessor: true },
-        value: { noAccessor: true },
-        name: { reflect: true, noAccessor: true },
-    }; }
-    constructor() {
-        super();
-        this.placeholder = '';
-        this.label = '';
-        this.hint = '';
-        this.errorText = '';
-        this.open = false;
-        /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
-        this.size = 'm';
-        /**
-         * Opt-in: when `true` and exactly one `<lyra-option>` is enabled, the
-         * trigger commits that option directly (click/Enter/Space/ArrowDown/
-         * ArrowUp) instead of opening the listbox, and renders as a plain
-         * `role="button"` with no chevron. Defaults to `false`, which always
-         * renders the normal combobox/listbox/chevron trigger regardless of how
-         * many options are enabled — the pre-1.3.0 behavior. See the class doc
-         * above and `onlyOption` below for the full rationale.
-         */
-        this.autoCommitSingleOption = false;
-        this.activeIndex = -1;
-        this.options = [];
-        // Set on the trigger button's first `blur`; gates the `data-invalid`
-        // reflection below so validity styling never flashes on first render.
-        this.touched = false;
-        // `[part]:empty` never matches -- the part always contains a literal
-        // `<slot>` child element regardless of assigned content -- so real
-        // emptiness is tracked in JS instead (same fix as lyra-combobox's
-        // hasHintSlot/hasErrorSlot/hasLabelSlot) and reflected via `hidden`.
-        this.hasHintSlot = false;
-        this.hasErrorSlot = false;
-        this.hasLabelSlot = false;
-        // Tracked separately from the consumer's own `disabled` -- a native
-        // `<input>`'s own `disabled` IDL property/attribute is never mutated by
-        // fieldset cascading, so a consumer's explicit `disabled` must survive the
-        // fieldset re-enabling (see `formDisabledCallback` below).
-        this._fieldsetDisabled = false;
-        this.listId = nextId('select-list');
-        this.triggerId = nextId('select-trigger');
-        this._isFirstUpdate = true;
-        this._selected = '';
-        this._disabled = false;
-        this._required = false;
-        // What `form.reset()` restores to. Captured exactly once, from whatever
-        // `<lyra-option selected>` markup was present the first time slotted
-        // options are collected (mirrors native `<select><option selected>`) --
-        // never from the `value` setter, so a user picking an option (even the
-        // very first pick on an initially-unselected select) can't itself become
-        // the reset default. See lyra-combobox's identical `_defaultSelected`.
-        this._defaultSelected = '';
-        this._defaultCaptured = false;
-        // A restored value must win over declarative selected markup collected by
-        // the first asynchronous slotchange. Cleared by the next ordinary value write.
-        this._restoredStateActive = false;
-        // Standard listbox type-ahead: printable keystrokes accumulate into this
-        // buffer and reset ~500ms after the last one, so "b" then "a" narrows to
-        // "ba" instead of restarting the search on every keystroke.
-        this.typeAheadBuffer = '';
-        // Hand-written accessor (mirrors the `value` accessor below, and Task 2's
-        // `FormAssociated.name` in `../../internal/form-associated.ts`): a
-        // form-associated custom element's submitted entry name is resolved by the
-        // browser from the live `name` *content attribute*, read synchronously at
-        // FormData-construction/submit time (see `syncFormValue()` below) -- Lit's
-        // async (microtask-deferred) `reflect: true` alone would leave a
-        // property-only assignment like `el.name = 'b'` invisible to a same-tick
-        // `new FormData(form)`/submit, so the attribute write happens here instead.
-        this._name = '';
-        this.collectOptions = (e) => {
-            const slot = e.target;
-            const previous = new Set(this.options);
-            this.options = slot
-                .assignedElements({ flatten: true })
-                .filter((el) => el instanceof LyraOption);
-            if (!this._defaultCaptured) {
-                this._defaultCaptured = true;
-                // Seed the initial selection -- and the reset default -- from
-                // declarative `<lyra-option selected>` markup, mirroring native
-                // `<select><option selected>`. Only the *first* declared-selected
-                // option matters when several declare it, mirroring lyra-combobox's
-                // single-mode behavior. This is the only place `_defaultSelected` is
-                // set; picking an option later (the `value` setter) never redefines
-                // the reset default.
-                const declared = this.options.filter((o) => o.selected).map((o) => o.value);
-                this._defaultSelected = declared[0] ?? '';
-                if (declared.length && !this._restoredStateActive) {
-                    this.value = declared[0];
-                    return; // `value=`'s setter already called reflectSelected()
-                }
-            }
-            else {
-                // Options slotted in after the first pass (e.g. a lazily-populated
-                // list appended post-connect) still declare selection the same way a
-                // native `<select><option selected>` would -- seed the newest one
-                // into the live selection instead of letting reflectSelected() below
-                // strip its `selected` attribute back off.
-                const newlySelected = this.options.filter((o) => !previous.has(o) && o.selected).map((o) => o.value);
-                if (newlySelected.length && !this._restoredStateActive) {
-                    this.value = newlySelected[newlySelected.length - 1];
-                    return; // `value=`'s setter already called reflectSelected()
-                }
-            }
-            this.reflectSelected();
-        };
-        // Fired by `option.ts`'s `lyra-option-change` (a MutationObserver on the
-        // option's own light-DOM content/attributes) when an already-slotted
-        // `<lyra-option>` mutates its own data in place -- `collectOptions()` only
-        // re-runs on `slotchange`, which never fires for such a mutation, so
-        // without this the rendered listbox row would go stale. Reassigning (not
-        // mutating) `options` gives Lit a new array reference to diff against.
-        this.onOptionChange = () => {
-            this.options = [...this.options];
-        };
-        this.onDocPointer = (e) => {
-            if (!e.composedPath().includes(this))
-                this.hide();
-        };
-        this.onTriggerClick = () => {
-            if (this.effectiveDisabled)
-                return;
-            if (this.onlyOption)
-                return this.selectOption(this.onlyOption);
-            this.open ? this.hide() : this.show();
-        };
-        this.onTriggerBlur = () => {
-            this.touched = true;
-            // A mouse click outside the element is already handled by
-            // onDocPointer/hide(), but that leaves keyboard users with no way to
-            // dismiss the listbox short of Escape -- tabbing focus away from the
-            // trigger should close it too, the same as lyra-combobox's input blur.
-            this.hide();
-        };
-        this.onHintSlotChange = (e) => {
-            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onErrorSlotChange = (e) => {
-            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onLabelSlotChange = (e) => {
-            this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onKeyDown = (e) => {
-            const navigable = this.options.filter((o) => !o.disabled);
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (this.onlyOption)
-                        return this.selectOption(this.onlyOption);
-                    if (!this.open)
-                        return this.show();
-                    this.activeIndex = Math.min(navigable.length - 1, this.activeIndex + 1);
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (this.onlyOption)
-                        return this.selectOption(this.onlyOption);
-                    if (!this.open)
-                        return this.show();
-                    this.activeIndex = Math.max(0, this.activeIndex - 1);
-                    break;
-                case 'Enter':
-                case ' ':
-                    // When closed, let the button's native Enter/Space activation fire
-                    // its own `click` handler (onTriggerClick) to open -- only intercept
-                    // here to commit/dismiss while already open, so that synthesized
-                    // click doesn't also re-toggle it shut.
-                    if (this.open) {
-                        e.preventDefault();
-                        if (this.activeIndex >= 0 && navigable[this.activeIndex]) {
-                            this.selectOption(navigable[this.activeIndex]);
-                        }
-                        else {
-                            this.hide();
-                        }
-                    }
-                    break;
-                case 'Escape':
-                    if (this.open) {
-                        e.preventDefault();
-                        this.hide();
-                    }
-                    break;
-                case 'Home':
-                    if (this.open) {
-                        e.preventDefault();
-                        this.activeIndex = 0;
-                    }
-                    break;
-                case 'End':
-                    if (this.open) {
-                        e.preventDefault();
-                        this.activeIndex = navigable.length - 1;
-                    }
-                    break;
-                default:
-                    if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-                        this.typeAhead(e.key);
-                    }
-                    break;
-            }
-        };
-        // Delegated onto [part="listbox"] (see render()) rather than one closure
-        // pair allocated per option per render -- resolves the target row via
-        // closest('[part="option"]') + a data-value lookup, mirroring lyra-combobox.
-        this.onListboxMouseDown = (e) => {
-            if (e.target.closest('[part="option"]'))
-                e.preventDefault();
-        };
-        this.onListboxClick = (e) => {
-            const optionEl = e.target.closest('[part="option"]');
-            const value = optionEl?.dataset.value;
-            if (value === undefined)
-                return;
-            const option = this.options.find((o) => o.value === value);
-            if (option)
-                this.selectOption(option);
-        };
-        this.internals = this.attachInternals();
-        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
-        this.syncFormValue();
-    }
-    get form() {
-        return this.internals.form;
-    }
-    get labels() {
-        return this.internals.labels;
-    }
-    get validity() {
-        return this.internals.validity;
-    }
-    get validationMessage() {
-        return this.internals.validationMessage;
-    }
-    get willValidate() {
-        return this.internals.willValidate;
-    }
-    /** @internal */
-    [VALIDITY_ANCHOR]() {
-        return this.renderRoot?.querySelector('[part="trigger"]') ?? null;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateValidity();
-    }
-    willUpdate() {
-        // `hasUpdated` flips to `true` before `updated()` even sees its first
-        // call, so it can't distinguish "just mounted" from "just changed" there
-        // -- capture that distinction here, while it's still reliable, for
-        // `updated()`'s `open`-handling below to consult.
-        this._isFirstUpdate = !this.hasUpdated;
-        if (!this.hasUpdated) {
-            this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
-            this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
-            this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
-        }
-    }
-    get name() {
-        return this._name;
-    }
-    set name(next) {
-        const old = this._name;
-        this._name = next ?? '';
-        if (this._name) {
-            this.setAttribute('name', this._name);
-        }
-        else {
-            this.removeAttribute('name');
-        }
-        this.requestUpdate('name', old);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(next) {
-        const old = this._disabled;
-        this._disabled = Boolean(next);
-        this.toggleAttribute('disabled', this._disabled);
-        if (this._disabled)
-            this.hide();
-        this.requestUpdate('disabled', old);
-    }
-    get required() {
-        return this._required;
-    }
-    set required(next) {
-        const old = this._required;
-        this._required = Boolean(next);
-        this.toggleAttribute('required', this._required);
-        this.updateValidity();
-        this.requestUpdate('required', old);
-    }
-    /** The selected value: a single string (empty when nothing is selected). */
-    get value() {
-        return this._selected;
-    }
-    set value(next) {
-        const old = this._selected;
-        this._restoredStateActive = false;
-        this._selected = next ?? '';
-        this.syncFormValue();
-        this.reflectSelected();
-        this.updateValidity();
-        this.requestUpdate('value', old);
-    }
-    updateValidity() {
-        if (this.required && !this._selected) {
-            this.validityController.setValidity({ valueMissing: true }, 'Please select an option.');
-        }
-        else {
-            this.validityController.setValidity({});
-        }
-    }
-    syncFormValue() {
-        this.internals.setFormValue(this._selected);
-    }
-    /** Effective disabled state: this element's own `disabled` OR an ancestor
-     *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
-     *  own `disabled` IDL property/attribute is never mutated by a fieldset. */
-    get effectiveDisabled() {
-        return this.disabled || this._fieldsetDisabled;
-    }
-    formResetCallback() {
-        this.value = this._defaultSelected;
-    }
-    formStateRestoreCallback(state, _mode) {
-        this.value = typeof state === 'string' ? state : '';
-        this._restoredStateActive = true;
-    }
-    /**
-     * Called by the browser when an ancestor `<fieldset disabled>` toggles.
-     * Tracked separately from the consumer's own `disabled` (see
-     * `effectiveDisabled`) so a consumer's explicit `disabled` survives the
-     * fieldset re-enabling instead of being permanently overwritten.
-     */
-    formDisabledCallback(disabled) {
-        this._fieldsetDisabled = disabled;
-        if (disabled)
-            this.hide();
-        this.requestUpdate();
-    }
-    checkValidity() {
-        return this.internals.checkValidity();
-    }
-    reportValidity() {
-        return this.internals.reportValidity();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.cleanup?.();
-        this.cleanup = undefined;
-        clearTimeout(this.typeAheadTimer);
-        document.removeEventListener('pointerdown', this.onDocPointer);
-        // Reset so a reconnect (e.g. a drag-drop reparent) re-triggers
-        // `updated()`'s `open`-driven branch -- without this, `open` stays
-        // `true` across the disconnect/reconnect and `changed.has('open')` never
-        // fires again, leaving the listbox rendered open with no positioning and
-        // no outside-click listener.
-        this.open = false;
-    }
-    reflectSelected() {
-        for (const o of this.options)
-            o.selected = o.value === this._selected;
-    }
-    /**
-     * The sole navigable (non-disabled) option, when `autoCommitSingleOption` is set and
-     * there's exactly one. Opening a one-row popup to pick the only available choice is pure
-     * friction with no real decision behind it, so an opted-in single-option select skips the
-     * popup entirely -- see `onTriggerClick`/`onKeyDown`, which commit this option directly on
-     * activation instead of opening the listbox, and `render()`, which drops the popup-trigger
-     * ARIA semantics (`role="combobox"`, `aria-haspopup`, `aria-expanded`, the chevron) in favor
-     * of a plain button's, since no popup can ever appear while this getter returns a value.
-     * Returns `undefined` whenever `autoCommitSingleOption` is `false` (the default), regardless
-     * of option count, so the normal combobox trigger renders unconditionally. Does not affect
-     * `value`/validity defaults in any way -- an unselected single-option select stays unselected
-     * until the trigger is actually activated, exactly like the multi-option case.
-     */
-    get onlyOption() {
-        if (!this.autoCommitSingleOption)
-            return undefined;
-        const navigable = this.options.filter((o) => !o.disabled);
-        return navigable.length === 1 ? navigable[0] : undefined;
-    }
-    show() {
-        if (this.open || this.effectiveDisabled)
-            return;
-        this.open = true;
-    }
-    hide() {
-        if (!this.open)
-            return;
-        this.open = false;
-        this.activeIndex = -1;
-    }
-    updated(changed) {
-        if (changed.has('open')) {
-            this.cleanup?.();
-            this.cleanup = undefined;
-            // All `open`-driven side effects (positioning, the click-outside
-            // listener, and the lyra-show/lyra-hide events) live here rather than
-            // in show()/hide() so they fire however `open` became true -- via
-            // show()/hide()'s own user-interaction paths, or a consumer/test
-            // setting `el.open` directly, which bypasses both entirely.
-            if (this.open) {
-                document.addEventListener('pointerdown', this.onDocPointer);
-                // Don't announce a "show" transition for markup that's simply
-                // rendering open for the first time (e.g. `<lyra-select open>`) --
-                // only for an actual closed-to-open transition.
-                if (!this._isFirstUpdate)
-                    this.emit('lyra-show');
-                const anchor = this.renderRoot.querySelector('[part="trigger"]');
-                const listbox = this.renderRoot.querySelector('[part="listbox"]');
-                if (anchor && listbox)
-                    this.cleanup = place(anchor, listbox);
-            }
-            else {
-                document.removeEventListener('pointerdown', this.onDocPointer);
-                if (!this._isFirstUpdate)
-                    this.emit('lyra-hide');
-            }
-        }
-        if (changed.has('touched') || changed.has('required') || changed.has('value')) {
-            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
-        }
-    }
-    selectOption(option) {
-        if (this.effectiveDisabled || option.disabled)
-            return;
-        // Reopening the listbox (or, on a single-option select, simply
-        // reactivating the trigger) and landing back on the already-selected
-        // row is not a selection change -- `change`/`input` are documented as
-        // firing when "the selection changed", so only emit them when the
-        // value actually moves, matching a native <select> (which never fires
-        // `change` for re-picking the currently-selected <option>).
-        const changed = option.value !== this._selected;
-        this.value = option.value;
-        this.hide();
-        if (changed) {
-            this.emit('input');
-            this.emit('change');
-        }
-    }
-    /**
-     * Standard listbox type-ahead: moves to the next non-disabled option whose
-     * label starts with the accumulated buffer, cycling from just after the
-     * "current" option (the active row while open, the selected value while
-     * closed). While open this only moves `activeIndex` (a highlight, matching
-     * Arrow-key nav -- Enter/click still commits it); while closed there's no
-     * highlight to show, so it commits immediately, matching a native
-     * `<select>`'s closed-state type-ahead.
-     */
-    typeAhead(char) {
-        clearTimeout(this.typeAheadTimer);
-        this.typeAheadBuffer += char.toLowerCase();
-        this.typeAheadTimer = setTimeout(() => {
-            this.typeAheadBuffer = '';
-        }, 500);
-        const navigable = this.options.filter((o) => !o.disabled);
-        if (!navigable.length)
-            return;
-        const currentValue = this.open ? navigable[this.activeIndex]?.value : this._selected;
-        const currentIndex = navigable.findIndex((o) => o.value === currentValue);
-        const n = navigable.length;
-        for (let step = 1; step <= n; step++) {
-            const idx = (currentIndex + step + n) % n;
-            const candidate = navigable[idx];
-            if (candidate.label.toLowerCase().startsWith(this.typeAheadBuffer)) {
-                if (this.open) {
-                    this.activeIndex = idx;
-                }
-                else {
-                    this.selectOption(candidate);
-                }
-                return;
-            }
-        }
-    }
-    renderRows(options, activeId) {
-        const out = [];
-        let currentGroup;
-        options.forEach((o, i) => {
-            if (o.group !== currentGroup) {
-                currentGroup = o.group;
-                if (currentGroup)
-                    out.push(html `<div class="group-label">${currentGroup}</div>`);
-            }
-            const id = `${this.listId}-opt-${i}`;
-            const selected = o.value === this._selected;
-            out.push(html `<div
-          part="option"
-          id=${id}
-          role="option"
-          data-value=${o.value}
-          aria-selected=${selected ? 'true' : 'false'}
-          aria-disabled=${o.disabled ? 'true' : 'false'}
-          ?data-active=${id === activeId}
-        >
-          ${o.dotColor ? html `<span part="option-dot" style=${`background:${o.dotColor}`}></span>` : ''}
-          <span part="option-label">
-            <span>${o.label}</span>
-            ${o.sub ? html `<span part="option-sub">${o.sub}</span>` : ''}
-          </span>
-        </div>`);
-        });
-        return out;
-    }
-    render() {
-        const options = this.options;
-        const navigable = options.filter((o) => !o.disabled);
-        const active = this.activeIndex >= 0 ? navigable[this.activeIndex] : undefined;
-        const activeId = active ? `${this.listId}-opt-${options.indexOf(active)}` : '';
-        const selectedLabel = this._selected
-            ? (options.find((o) => o.value === this._selected)?.label ?? this._selected)
-            : '';
-        const hasValue = this._selected.length > 0;
-        const hasHint = this.hasHintSlot || this.hint.length > 0;
-        const hasError = this.hasErrorSlot || this.errorText.length > 0;
-        const hasLabel = this.hasLabelSlot || this.label.length > 0;
-        const describedBy = [hasError ? 'select-error' : '', hasHint ? 'select-hint' : ''].filter(Boolean).join(' ');
-        // A single navigable option has no popup to expand into -- when opted in via
-        // autoCommitSingleOption, the trigger commits it directly on activation (see
-        // onTriggerClick/onKeyDown) instead of opening the listbox, so it's exposed as a plain
-        // button rather than a combobox with a permanently-closed popup: no aria-haspopup/
-        // aria-expanded/aria-controls/aria-activedescendant (all meaningless without a popup that
-        // can ever appear) and no chevron. Without the opt-in (the default), this is always
-        // `false` and the normal combobox/listbox/chevron trigger renders regardless of option count.
-        const isSingleOption = this.autoCommitSingleOption && navigable.length === 1;
-        return html `
-      <div part="form-control">
-        <label part="form-control-label" for=${this.triggerId} ?hidden=${!hasLabel}>
-          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
-        </label>
-        <button
-          id=${this.triggerId}
-          part="trigger"
-          type="button"
-          role=${isSingleOption ? 'button' : 'combobox'}
-          aria-haspopup=${isSingleOption ? nothing : 'listbox'}
-          aria-expanded=${isSingleOption ? nothing : this.open ? 'true' : 'false'}
-          aria-controls=${isSingleOption ? nothing : this.listId}
-          aria-activedescendant=${isSingleOption ? nothing : activeId}
-          aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Select')}
-          aria-describedby=${describedBy || nothing}
-          aria-required=${this.required ? 'true' : 'false'}
-          aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
-          ?disabled=${this.effectiveDisabled}
-          @click=${this.onTriggerClick}
-          @keydown=${this.onKeyDown}
-          @blur=${this.onTriggerBlur}
-        >
-          <span class="trigger-label" ?data-placeholder=${!hasValue}
-            >${hasValue ? selectedLabel : this.placeholder}</span
-          >
-          ${isSingleOption ? nothing : html `<span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>`}
-        </button>
-        <div
-          part="listbox"
-          id=${this.listId}
-          role="listbox"
-          @mousedown=${this.onListboxMouseDown}
-          @click=${this.onListboxClick}
-        >
-          ${this.renderRows(options, activeId)}
-        </div>
-        <div id="select-error" part="error" ?hidden=${!hasError}>
-          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
-        </div>
-        <div id="select-hint" part="hint" ?hidden=${!hasHint}>
-          ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
-        </div>
-      </div>
-      <slot @slotchange=${this.collectOptions} @lyra-option-change=${this.onOptionChange} hidden></slot>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraSelect.prototype, "placeholder", void 0);
-__decorate([
-    property()
-], LyraSelect.prototype, "label", void 0);
-__decorate([
-    property()
-], LyraSelect.prototype, "hint", void 0);
-__decorate([
-    property({ attribute: 'error-text' })
-], LyraSelect.prototype, "errorText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraSelect.prototype, "open", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraSelect.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'auto-commit-single-option' })
-], LyraSelect.prototype, "autoCommitSingleOption", void 0);
-__decorate([
-    state()
-], LyraSelect.prototype, "activeIndex", void 0);
-__decorate([
-    state()
-], LyraSelect.prototype, "options", void 0);
-__decorate([
-    state()
-], LyraSelect.prototype, "touched", void 0);
-__decorate([
-    state()
-], LyraSelect.prototype, "hasHintSlot", void 0);
-__decorate([
-    state()
-], LyraSelect.prototype, "hasErrorSlot", void 0);
-__decorate([
-    state()
-], LyraSelect.prototype, "hasLabelSlot", void 0);
+import "../combobox/option.js";
 defineElement('select', LyraSelect);
+//# sourceMappingURL=select.js.map