@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/combobox/combobox.class.js

@@ -0,0 +1,892 @@
+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';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon, closeIcon } from '../../internal/icons.js';
+import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
+import { styles } from './combobox.styles.js';
+import { LyraOption } from './option.class.js';
+import './option.class.js';
+/**
+ * `<lyra-combobox>` — a filterable single/multi select that combines a text
+ * input with a listbox. Mirrors the core `<wa-combobox>` API under `lyra-`.
+ *
+ * Options are `<lyra-option value>` children. Emits native-style `change`/`input`
+ * (like Web Awesome) plus `lyra-show`/`lyra-hide`/`lyra-clear`.
+ *
+ * @customElement lyra-combobox
+ * @slot - `<lyra-option>` elements.
+ * @slot label - Custom label content.
+ * @slot hint - Custom hint content.
+ * @slot error - Custom error content.
+ * @event {Event} change - The selection changed through user interaction. A bubbling,
+ * composed, non-cancelable Event.
+ * @event {InputEvent | Event} input - The user typed in the filter or changed the selection. Text
+ * edits expose the original InputEvent; selection changes emit a bubbling,
+ * composed, non-cancelable Event.
+ * @event lyra-show - The listbox opened.
+ * @event lyra-hide - The listbox closed.
+ * @event lyra-clear - The value was cleared.
+ * @csspart form-control - The outer wrapper around label, combobox, listbox, error and hint.
+ * @csspart form-control-label - The `<label>` element.
+ * @csspart combobox - The input container (positioning anchor).
+ * @csspart combobox-input - The text input.
+ * @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 option-overflow - The "+N more" indicator shown when rows are capped by `maxRender`.
+ * @csspart tags - The multi-select tag container.
+ * @csspart tag - An individual selected tag.
+ * @csspart tag__remove-button - A tag's remove button.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The dropdown indicator.
+ * @csspart error - The error message.
+ * @csspart hint - The hint message.
+ */
+export class LyraCombobox extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        multiple: { type: Boolean, reflect: true, noAccessor: true },
+        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;
+        this.withClear = false;
+        this.maxOptionsVisible = 3;
+        this.emptyText = 'No results';
+        /** Status copy shown in the listbox while a `source` fetch is in flight. */
+        this.loadingText = 'Loading…';
+        /** Status copy shown when `maxRender` caps the row list; `{n}` is replaced with the hidden count. */
+        this.overflowText = '+{n} more — refine your search';
+        this.filter = null;
+        this.source = null;
+        this.maxRender = 200;
+        this.query = '';
+        this.activeIndex = -1;
+        this.options = [];
+        // Set on the combobox input'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-stat's
+        // icon/caption) and reflected via `hidden`. Applies to
+        // `form-control-label` too: the required-asterisk `::after` attaches to
+        // that box, so leaving it always-visible orphans a stray ' *' when no
+        // `label` is set.
+        this.hasHintSlot = false;
+        this.hasErrorSlot = false;
+        this.hasLabelSlot = false;
+        this.loading = false;
+        this.asyncRows = [];
+        this.sourceToken = 0;
+        // Guards the proactive `asyncRows` warm-up in `willUpdate()` below so it
+        // fires at most once per mount instead of re-running (and endlessly
+        // resetting the debounce timer) on every subsequent render while the fetch
+        // is still in flight.
+        this._sourceWarmed = false;
+        this._selectedLabelCache = new Map();
+        // Rebuilt once per render (in render(), before renderRows()) from the
+        // currently-visible row set -- backs the delegated listbox click/mousedown
+        // handlers' data-value lookup below, instead of each option row closing
+        // over its own row object.
+        this._rowsByValue = new Map();
+        // 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('combobox-list');
+        this.inputId = nextId('combobox-input');
+        this._isFirstUpdate = true;
+        this._selected = [];
+        this._multiple = false;
+        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 combobox) can't itself
+        // become the reset default (native `defaultValue`/`defaultSelected`
+        // semantics: only declarative/attribute state feeds the default, plain
+        // property assignment never does).
+        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;
+        // Hand-written accessor (mirrors the `value` accessor below, and the
+        // `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 — mirrors native
+                // `<select><option selected>`, which was previously silently ignored.
+                // This is the only place `_defaultSelected` is set; picking an option
+                // later (the `value` setter) never redefines the reset default, so an
+                // initially-unselected combobox always resets back to empty even
+                // after the user has picked something.
+                const declared = this.options.filter((o) => o.selected).map((o) => o.value);
+                this._defaultSelected = [...declared];
+                if (declared.length && !this._restoredStateActive) {
+                    this.value = this.multiple ? declared : 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 newly-arrived ones
+                // into the live selection instead of letting reflectSelected() below
+                // strip their `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 = this.multiple
+                        ? [...new Set([...this._selected, ...newlySelected])]
+                        : newlySelected[newlySelected.length - 1];
+                    return; // `value=`'s setter already called reflectSelected()
+                }
+            }
+            this.reflectSelected();
+        };
+        this.onOptionChange = () => {
+            // Touch the `options` array reference so Lit's change-detection sees a
+            // "new" value and re-renders `renderRows()`/`filtered`/`labelFor()` off
+            // the options' now-current data -- the *set* of options is unchanged,
+            // only one member's own properties are, so this skips
+            // collectOptions()'s selection-seeding logic entirely.
+            this.options = [...this.options];
+        };
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.activeIndex = -1;
+            this.show();
+            if (this.source)
+                this.runSource(this.query);
+        };
+        this.onInputBlur = () => {
+            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
+            // input should close it too, the same as it would for a native
+            // `<select>`'s popup.
+            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.renderedRows.rows.filter((r) => !r.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(navigable.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                    if (this.open && this.activeIndex >= 0 && navigable[this.activeIndex]) {
+                        e.preventDefault();
+                        this.pickRow(navigable[this.activeIndex]);
+                    }
+                    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;
+                case 'Backspace':
+                    if (this.multiple && !this.query && this._selected.length) {
+                        this.removeValue(this._selected[this._selected.length - 1]);
+                    }
+                    break;
+            }
+        };
+        this.onComboMouseDown = (e) => {
+            if (this.effectiveDisabled)
+                return;
+            if (e.target.closest('button'))
+                return;
+            e.preventDefault();
+            this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
+            this.show();
+        };
+        // 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 into `_rowsByValue`.
+        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 row = this._rowsByValue.get(value);
+            if (row)
+                this.pickRow(row);
+        };
+        this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+    }
+    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="combobox-input"]') ?? 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');
+        }
+        // In source (async) mode, `labelFor()` can only resolve a programmatically
+        // -set value's label from `asyncRows` -- and nothing normally populates
+        // `asyncRows` until the listbox is actually opened. Fire the fetch once,
+        // independent of `open`, so the closed input / multi-select tag chips can
+        // already show the real label the very first time they render (the
+        // common "edit an existing record" case) instead of the raw value string.
+        if (!this._sourceWarmed && this.source && this._selected.length && this.asyncRows.length === 0) {
+            this._sourceWarmed = true;
+            this.runSource('');
+        }
+    }
+    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.syncFormValue();
+        this.requestUpdate('name', old);
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    set multiple(next) {
+        const old = this._multiple;
+        this._multiple = Boolean(next);
+        this.toggleAttribute('multiple', this._multiple);
+        this.syncFormValue();
+        this.requestUpdate('multiple', 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(s): a string in single mode, a string[] in `multiple` mode. */
+    get value() {
+        return this.multiple ? [...this._selected] : (this._selected[0] ?? '');
+    }
+    set value(next) {
+        const old = this._selected;
+        this._restoredStateActive = false;
+        this._selected = Array.isArray(next) ? [...next] : next ? [next] : [];
+        this.syncFormValue();
+        this.reflectSelected();
+        this.updateValidity();
+        this.requestUpdate('value', old);
+    }
+    updateValidity() {
+        if (this.required && this._selected.length === 0) {
+            this.validityController.setValidity({ valueMissing: true }, 'Please select an option.');
+        }
+        else {
+            this.validityController.setValidity({});
+        }
+    }
+    syncFormValue() {
+        const state = JSON.stringify(this._selected);
+        if (this.multiple) {
+            // A FormData form value submits under the keys baked into the FormData
+            // itself, bypassing the element's own `name` the way a plain string
+            // value would use it -- so an unnamed multi-select must contribute
+            // nothing (matching a nameless native `<select multiple>`) rather than
+            // inventing a shared key that would merge with any other unnamed
+            // combobox in the same form.
+            if (!this.name) {
+                this.internals.setFormValue(null, state);
+                return;
+            }
+            const fd = new FormData();
+            for (const v of this._selected)
+                fd.append(this.name, v);
+            this.internals.setFormValue(fd, state);
+        }
+        else {
+            this.internals.setFormValue(this._selected[0] ?? '', state);
+        }
+    }
+    /** 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];
+        this.query = '';
+    }
+    formStateRestoreCallback(state, _mode) {
+        let selected = [];
+        if (typeof state === 'string') {
+            try {
+                const parsed = JSON.parse(state);
+                if (Array.isArray(parsed) && parsed.every((value) => typeof value === 'string'))
+                    selected = parsed;
+            }
+            catch {
+                // Malformed persisted state restores an empty selection.
+            }
+        }
+        this.value = this.multiple ? selected : (selected[0] ?? '');
+        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.sourceTimer);
+        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() {
+        const sel = new Set(this._selected);
+        for (const o of this.options)
+            o.selected = sel.has(o.value);
+    }
+    labelFor(value) {
+        // Checked in order: an explicit pick's own label (works even after the
+        // source rows backing it have since changed), a slotted `<lyra-option>`
+        // (local mode), then the last-fetched async row set (source mode) -- a
+        // value set programmatically (e.g. `el.value = 'b'` before the listbox
+        // has ever been opened) has no chance to have populated the first two,
+        // so without this last fallback it would render as the raw value string
+        // instead of its label.
+        return (this._selectedLabelCache.get(value) ??
+            this.options.find((o) => o.value === value)?.label ??
+            this.asyncRows.find((r) => r.value === value)?.label ??
+            value);
+    }
+    /** The current row set in a source-agnostic shape, before capping. */
+    get effectiveRows() {
+        if (this.source)
+            return this.asyncRows;
+        return this.filtered.map((o) => ({
+            value: o.value,
+            label: o.label,
+            sub: o.sub || undefined,
+            dotColor: o.dotColor || undefined,
+            group: o.group || undefined,
+            disabled: o.disabled,
+        }));
+    }
+    /** `effectiveRows` capped to `maxRender`, always keeping the current selection visible. */
+    get renderedRows() {
+        const all = this.effectiveRows;
+        if (all.length <= this.maxRender)
+            return { rows: all, overflow: 0 };
+        const originalIndex = new Map(all.map((r, i) => [r, i]));
+        const capped = all.slice(0, this.maxRender);
+        const cappedValues = new Set(capped.map((r) => r.value));
+        let appendedOutOfCap = false;
+        for (const v of this._selected) {
+            if (!cappedValues.has(v)) {
+                const selectedRow = all.find((r) => r.value === v);
+                if (selectedRow) {
+                    capped.push(selectedRow);
+                    appendedOutOfCap = true;
+                }
+            }
+        }
+        if (appendedOutOfCap) {
+            // A preserved out-of-cap selection was just tacked onto the very end,
+            // regardless of its own `group` -- stable-sort back by each row's
+            // original position so it lands among its own group's other rows
+            // instead of forcing renderRows() to emit that group's label a second
+            // time after whatever group happens to trail the cap.
+            capped.sort((a, b) => originalIndex.get(a) - originalIndex.get(b));
+        }
+        return { rows: capped, overflow: all.length - capped.length };
+    }
+    get filtered() {
+        const q = this.query.trim().toLowerCase();
+        const selectedLabel = !this.multiple ? (this.labelFor(this._selected[0] ?? '') ?? '') : '';
+        const effective = q && q === selectedLabel.toLowerCase() ? '' : q;
+        if (!effective)
+            return this.options;
+        const fn = this.filter ??
+            ((o, query) => o.label.toLowerCase().includes(query) || o.searchText.toLowerCase().includes(query));
+        return this.options.filter((o) => fn(o, effective));
+    }
+    get displayValue() {
+        if (this.multiple || this.open)
+            return this.query;
+        return this._selected[0] ? this.labelFor(this._selected[0]) : '';
+    }
+    show() {
+        if (this.open || this.effectiveDisabled)
+            return;
+        this.open = true;
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+        // Single-select mode only shows `query` while `open` (see `displayValue`
+        // above) -- but dismissing without picking a row (blur, Escape, or an
+        // outside click) previously left an abandoned filter string sitting in
+        // `query` forever, so the *next* reopen would reappear with stale text
+        // and re-filter the list from it. Multiple mode is unaffected: its input
+        // always shows `query` regardless of `open`, by design (a persistent
+        // search box next to the tags).
+        if (!this.multiple)
+            this.query = '';
+    }
+    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-combobox open>`) --
+                // only for an actual closed-to-open transition.
+                if (!this._isFirstUpdate)
+                    this.emit('lyra-show');
+                const anchor = this.renderRoot.querySelector('[part="combobox"]');
+                const listbox = this.renderRoot.querySelector('[part="listbox"]');
+                if (anchor && listbox)
+                    this.cleanup = place(anchor, listbox);
+                if (this.source && this.asyncRows.length === 0)
+                    this.runSource(this.query);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.onDocPointer);
+                if (!this._isFirstUpdate)
+                    this.emit('lyra-hide');
+            }
+        }
+        if (changed.has('name'))
+            this.syncFormValue();
+        if (changed.has('touched') || changed.has('required') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
+    }
+    /** Dispatches the platform-style value-event pair used by non-text user
+     * interactions. Text editing keeps and exposes the original InputEvent
+     * from the shadow input so its data/inputType metadata is not lost. */
+    emitValueEvents() {
+        const EventConstructor = this.ownerDocument.defaultView?.Event ?? Event;
+        const init = { bubbles: true, composed: true };
+        this.dispatchEvent(new EventConstructor('input', init));
+        this.dispatchEvent(new EventConstructor('change', init));
+    }
+    pickRow(row) {
+        if (this.effectiveDisabled || row.disabled)
+            return;
+        const selectionChanged = this.multiple || this._selected[0] !== row.value;
+        this._selectedLabelCache.set(row.value, row.label);
+        if (this.multiple) {
+            const set = new Set(this._selected);
+            set.has(row.value) ? set.delete(row.value) : set.add(row.value);
+            this.value = [...set];
+            this.query = '';
+        }
+        else {
+            this.value = row.value;
+            this.query = '';
+            this.hide();
+        }
+        // The query resets to '' above but `asyncRows` doesn't refresh on its
+        // own -- re-run `source` so the listbox (still open in multiple mode,
+        // and whatever `asyncRows` holds for the next time it reopens in single
+        // mode) matches the now-empty input instead of the stale prior query.
+        if (this.source)
+            this.runSource(this.query);
+        if (selectionChanged)
+            this.emitValueEvents();
+    }
+    removeValue(value) {
+        const next = this._selected.filter((v) => v !== value);
+        if (next.length === this._selected.length)
+            return;
+        this.value = next;
+        this.emitValueEvents();
+    }
+    clear() {
+        if (this._selected.length === 0)
+            return;
+        this.value = [];
+        this.query = '';
+        if (this.source)
+            this.runSource(this.query);
+        this.emitValueEvents();
+        this.emit('lyra-clear');
+    }
+    runSource(query) {
+        if (!this.source)
+            return;
+        clearTimeout(this.sourceTimer);
+        this.sourceTimer = setTimeout(() => {
+            const token = ++this.sourceToken;
+            this.loading = true;
+            // `Promise.resolve().then(() => this.source!(query))` moves the call
+            // itself inside a `.then()` callback, so a *synchronous* throw from
+            // `this.source(query)` becomes a normal promise rejection the
+            // following `.catch()` handles, instead of escaping this `setTimeout`
+            // callback as an uncaught exception.
+            Promise.resolve()
+                .then(() => this.source(query))
+                .then((rows) => {
+                if (token !== this.sourceToken || !this.isConnected)
+                    return;
+                this.asyncRows = rows;
+            })
+                .catch((err) => {
+                if (token !== this.sourceToken || !this.isConnected)
+                    return;
+                console.warn('<lyra-combobox> source() rejected:', err);
+            })
+                .finally(() => {
+                if (token === this.sourceToken)
+                    this.loading = false;
+            });
+        }, 200);
+    }
+    renderRows(rows, activeId) {
+        const out = [];
+        let currentGroup;
+        const selectedSet = new Set(this._selected);
+        rows.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 = selectedSet.has(o.value);
+            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 { rows, overflow } = this.renderedRows;
+        this._rowsByValue = new Map(rows.map((r) => [r.value, r]));
+        const navigable = rows.filter((r) => !r.disabled);
+        const active = this.activeIndex >= 0 ? navigable[this.activeIndex] : undefined;
+        const activeId = active ? `${this.listId}-opt-${rows.indexOf(active)}` : '';
+        const shownTags = this.multiple ? this._selected.slice(0, this.maxOptionsVisible) : [];
+        const extra = this.multiple ? this._selected.length - shownTags.length : 0;
+        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 ? 'combobox-error' : '', hasHint ? 'combobox-hint' : ''].filter(Boolean).join(' ');
+        return html `
+      <div part="form-control">
+        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
+          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
+        </label>
+        <div part="combobox" @mousedown=${this.onComboMouseDown}>
+          <div part="tags" style="display:contents">
+            ${shownTags.map((v) => html `<span part="tag"
+                >${this.labelFor(v)}<button
+                  part="tag__remove-button"
+                  type="button"
+                  ?disabled=${this.effectiveDisabled}
+                  aria-label="Remove ${this.labelFor(v)}"
+                  @click=${(e) => {
+            e.stopPropagation();
+            this.removeValue(v);
+        }}
+                >
+                  ${closeIcon()}</button
+                ></span
+              >`)}
+            ${extra > 0 ? html `<span part="tag">+${extra}</span>` : ''}
+          </div>
+          <input
+            id=${this.inputId}
+            part="combobox-input"
+            role="combobox"
+            aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Combobox')}
+            aria-describedby=${describedBy || nothing}
+            aria-expanded=${this.open ? 'true' : 'false'}
+            aria-controls=${this.listId}
+            aria-activedescendant=${activeId}
+            aria-autocomplete="list"
+            aria-required=${this.required ? 'true' : 'false'}
+            aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+            autocomplete="off"
+            .value=${this.displayValue}
+            placeholder=${hasValue && !this.multiple ? '' : this.placeholder}
+            ?disabled=${this.effectiveDisabled}
+            @input=${this.onInput}
+            @keydown=${this.onKeyDown}
+            @focus=${() => this.show()}
+            @blur=${this.onInputBlur}
+          />
+          ${this.withClear && hasValue
+            ? html `<button
+                part="clear-button"
+                type="button"
+                ?disabled=${this.effectiveDisabled}
+                aria-label="Clear"
+                @click=${(e) => {
+                e.stopPropagation();
+                this.clear();
+            }}
+              >
+                ${closeIcon()}
+              </button>`
+            : ''}
+          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+        </div>
+        <div
+          part="listbox"
+          id=${this.listId}
+          role="listbox"
+          aria-multiselectable=${this.multiple ? 'true' : 'false'}
+          @mousedown=${this.onListboxMouseDown}
+          @click=${this.onListboxClick}
+        >
+          ${this.loading
+            ? html `<div class="loading" role="option" aria-selected="false" aria-disabled="true">${this.loadingText}</div>`
+            : rows.length === 0
+                ? html `<div class="empty" role="option" aria-selected="false" aria-disabled="true">${this.emptyText}</div>`
+                : html `${this.renderRows(rows, activeId)}
+                  ${overflow > 0
+                    ? html `<div part="option-overflow">${this.overflowText.replace('{n}', String(overflow))}</div>`
+                    : ''}`}
+        </div>
+        <div id="combobox-error" part="error" ?hidden=${!hasError}>
+          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
+        </div>
+        <div id="combobox-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()
+], LyraCombobox.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], LyraCombobox.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraCombobox.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], LyraCombobox.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCombobox.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-clear' })
+], LyraCombobox.prototype, "withClear", void 0);
+__decorate([
+    property({ attribute: 'max-options-visible', type: Number })
+], LyraCombobox.prototype, "maxOptionsVisible", void 0);
+__decorate([
+    property({ attribute: 'empty-text' })
+], LyraCombobox.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: 'loading-text' })
+], LyraCombobox.prototype, "loadingText", void 0);
+__decorate([
+    property({ attribute: 'overflow-text' })
+], LyraCombobox.prototype, "overflowText", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraCombobox.prototype, "filter", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraCombobox.prototype, "source", void 0);
+__decorate([
+    property({ attribute: 'max-render', type: Number })
+], LyraCombobox.prototype, "maxRender", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "query", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "options", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "touched", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasErrorSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasLabelSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "asyncRows", void 0);
+//# sourceMappingURL=combobox.class.js.map