@aceshooting/lyra-ui 6.1.0 → 7.0.0

package/dist/components/forms/combobox/combobox.class.d.ts

@@ -20,7 +20,15 @@ export interface ComboboxSourceRow {
     group?: string;
     disabled?: boolean;
 }
-export type ComboboxSource = (query: string) => Promise<ComboboxSourceRow[]>;
+/** Async row provider for a remote-backed combobox. Receives the current query and an options bag
+ *  carrying an `AbortSignal` that the component aborts when a newer query supersedes this one or the
+ *  element disconnects — forward it to `fetch(url, { signal })` to cancel stale in-flight requests.
+ *  The options parameter is required by the exported type so implementations can consume the
+ *  cancellation signal. A one-parameter `(query) => …` function remains assignable under
+ *  TypeScript's ordinary function-parameter compatibility rules. */
+export type ComboboxSource = (query: string, options: {
+    signal: AbortSignal;
+}) => Promise<ComboboxSourceRow[]>;
 export type LyraComboboxSelectionDirection = 'forward' | 'backward' | 'none';
 /** Detail of `lr-filter`: the in-progress filter text, never the committed selection. */
 export interface ComboboxFilterDetail {
@@ -31,6 +39,15 @@ export interface LyraComboboxEventMap {
     'lr-hide': CustomEvent<undefined>;
     'lr-clear': CustomEvent<undefined>;
     'lr-filter': CustomEvent<ComboboxFilterDetail>;
+    'lr-change': CustomEvent<{
+        value: string | string[];
+    }>;
+    input: CustomEvent<{
+        value: string | string[];
+    }>;
+    change: CustomEvent<{
+        value: string | string[];
+    }>;
     blur: CustomEvent<undefined>;
     focus: CustomEvent<undefined>;
 }
@@ -53,11 +70,15 @@ export interface LyraComboboxEventMap {
  *   only ever collects `<lr-option>` elements from the default slot.
  * @slot end - Adornment after the filter input and the built-in clear action, and before the
  *   expand icon — so consumer content never sits outboard of the dropdown chevron.
- * @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 {CustomEvent<{ value: string | string[] }>} change - The selection changed through user
+ * interaction. A bubbling, composed, non-cancelable event carrying `detail: { value }` (the new
+ * committed selection: a string in single mode, a string[] in `multiple` mode).
+ * @event {InputEvent | CustomEvent<{ value: string | string[] }>} input - The user typed in the
+ * filter or changed the selection. Text edits expose the original InputEvent (no `value` detail);
+ * selection changes emit a bubbling, composed, non-cancelable event carrying `detail: { value }`.
+ * @event {CustomEvent<{ value: string | string[] }>} lr-change - Prefixed compatibility alias fired
+ * after `input` and `change` on the same selection change, mirroring `<lr-checkbox>`'s `lr-change`.
+ * `detail: { value }`. Not fired for typing or a programmatic `value` assignment.
  * @event lr-show - The listbox opened.
  * @event lr-hide - The listbox closed.
  * @event lr-clear - The value was cleared.
@@ -85,6 +106,7 @@ export interface LyraComboboxEventMap {
  * @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-label - The wrapping/ellipsis-safe selected-tag label.
  * @csspart tag__remove-button - A tag's remove button.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The dropdown indicator.
@@ -110,6 +132,14 @@ export interface LyraComboboxEventMap {
  *   (`[part='combobox']`). Does not vary by `size` tier.
  * @cssprop [--lr-combobox-option-active-bg=var(--lr-color-brand-quiet)] - Background of a hovered
  *   or keyboard-active option row.
+ * @cssprop [--lr-combobox-option-selected-bg=transparent] - Background of the currently-selected
+ *   option row. Not declared on `:host`; retheme without hijacking `--lr-color-brand`.
+ * @cssprop [--lr-combobox-option-selected-border=var(--lr-color-brand)] - Border color of the
+ *   selected option row.
+ * @cssprop [--lr-combobox-option-selected-color=var(--lr-color-brand)] - Text color of the
+ *   selected option row.
+ * @cssprop [--lr-combobox-option-selected-font-weight=var(--lr-font-weight-semibold)] - Font
+ *   weight of the selected option row.
  */
 export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     static formAssociated: boolean;
@@ -147,6 +177,11 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
             attribute: string;
             noAccessor: boolean;
         };
+        sourceDelay: {
+            type: NumberConstructor;
+            attribute: string;
+            noAccessor: boolean;
+        };
     };
     placeholder: string;
     label: string;
@@ -189,10 +224,14 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private hasStartSlot;
     private hasEndSlot;
     private loading;
+    private sourceFailed;
     private asyncRows;
     private inputEl?;
     private sourceTimer?;
     private sourceToken;
+    /** Aborted when a newer query supersedes the in-flight one, or on disconnect, so the source's
+     *  own `fetch` can cancel. */
+    private sourceAbort?;
     private _sourceWarmed;
     private _selectedLabelCache;
     private _selectedRowCache;
@@ -214,6 +253,7 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private _name;
     private _maxOptionsVisible;
     private _maxRender;
+    private _sourceDelay;
     constructor();
     get form(): HTMLFormElement | null;
     get labels(): NodeList;
@@ -260,8 +300,20 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     set maxOptionsVisible(next: number);
     /** Maximum number of rows rendered before the rest collapse behind the overflow indicator
      *  (the current selection is always kept visible regardless). Sanitized to a finite,
-     *  non-negative integer. */
+     *  non-negative integer.
+     *
+     *  Rows render in full rather than as a recycled scroll window, because the filter input's
+     *  `aria-activedescendant` is an IDREF and can only resolve within its own tree scope — rows
+     *  hosted inside a nested windowing element would sit one shadow root deeper than the input
+     *  that must point at them. Raising this to cover a few-hundred-entry list (countries,
+     *  currencies, time zones) is the intended use; past roughly a thousand rows, `source` narrows
+     *  the set before it becomes DOM and is the better tool. */
     get maxRender(): number;
+    /** Debounce (ms) between the last keystroke and the `source` call. Sanitized to a finite
+     *  duration clamped to `[0, browser-timer-ceiling]`; `0` fires on every keystroke, a
+     *  non-finite value falls back to the `200` default. */
+    get sourceDelay(): number;
+    set sourceDelay(next: number);
     set maxRender(next: number);
     /** Structured rows corresponding to the current selection, including opaque async-row data. */
     get selectedRows(): ComboboxSourceRow[];
@@ -297,9 +349,12 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private hide;
     private onDocPointer;
     protected updated(changed: PropertyValues): void;
-    /** 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. */
+    /** Dispatches the platform-style value events used by non-text user
+     * interactions: `input`, `change`, and the prefixed `lr-change` alias, each
+     * carrying `detail: { value }` (the new committed selection). Text editing
+     * keeps and exposes the original InputEvent from the shadow input so its
+     * data/inputType metadata is not lost. `this.emit()` (from `LyraElement`)
+     * already dispatches a bubbling, composed, non-cancelable `CustomEvent`. */
     private emitValueEvents;
     private pickRow;
     private removeValue;

package/dist/components/forms/combobox/combobox.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.class.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/combobox/combobox.class.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.class.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/combobox/combobox.class.ts"],"names":[],"mappings":"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"}

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

@@ -11,10 +11,12 @@ 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 { finiteCount } from '../../../internal/numbers.js';
+import { finiteCount, finiteDuration } from '../../../internal/numbers.js';
 import { styles } from './combobox.styles.js';
 import { LyraOption } from './option.class.js';
 import './option.class.js';
+import { spellcheckConverter } from '../../../internal/converters.js';
+import { getNumberFormat } from '../../../internal/intl-cache.js';
 /** A no-op stand-in for `ElementInternals`, used only when the host environment has no real
  *  implementation of it (e.g. a downstream consumer's Vitest + happy-dom test suite) --
  *  `attachInternals()` is browser-only, and calling it unconditionally in the constructor would
@@ -50,10 +52,6 @@ function createNoopInternals() {
         },
     };
 }
-const spellcheckConverter = {
-    fromAttribute: (value) => value !== 'false',
-    toAttribute: (value) => (value ? 'true' : 'false'),
-};
 /**
  * `<lr-combobox>` — a filterable single/multi select that combines a text
  * input with a listbox. Mirrors the core `<wa-combobox>` API under `lr-`.
@@ -73,11 +71,15 @@ const spellcheckConverter = {
  *   only ever collects `<lr-option>` elements from the default slot.
  * @slot end - Adornment after the filter input and the built-in clear action, and before the
  *   expand icon — so consumer content never sits outboard of the dropdown chevron.
- * @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 {CustomEvent<{ value: string | string[] }>} change - The selection changed through user
+ * interaction. A bubbling, composed, non-cancelable event carrying `detail: { value }` (the new
+ * committed selection: a string in single mode, a string[] in `multiple` mode).
+ * @event {InputEvent | CustomEvent<{ value: string | string[] }>} input - The user typed in the
+ * filter or changed the selection. Text edits expose the original InputEvent (no `value` detail);
+ * selection changes emit a bubbling, composed, non-cancelable event carrying `detail: { value }`.
+ * @event {CustomEvent<{ value: string | string[] }>} lr-change - Prefixed compatibility alias fired
+ * after `input` and `change` on the same selection change, mirroring `<lr-checkbox>`'s `lr-change`.
+ * `detail: { value }`. Not fired for typing or a programmatic `value` assignment.
  * @event lr-show - The listbox opened.
  * @event lr-hide - The listbox closed.
  * @event lr-clear - The value was cleared.
@@ -105,6 +107,7 @@ const spellcheckConverter = {
  * @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-label - The wrapping/ellipsis-safe selected-tag label.
  * @csspart tag__remove-button - A tag's remove button.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The dropdown indicator.
@@ -130,6 +133,14 @@ const spellcheckConverter = {
  *   (`[part='combobox']`). Does not vary by `size` tier.
  * @cssprop [--lr-combobox-option-active-bg=var(--lr-color-brand-quiet)] - Background of a hovered
  *   or keyboard-active option row.
+ * @cssprop [--lr-combobox-option-selected-bg=transparent] - Background of the currently-selected
+ *   option row. Not declared on `:host`; retheme without hijacking `--lr-color-brand`.
+ * @cssprop [--lr-combobox-option-selected-border=var(--lr-color-brand)] - Border color of the
+ *   selected option row.
+ * @cssprop [--lr-combobox-option-selected-color=var(--lr-color-brand)] - Text color of the
+ *   selected option row.
+ * @cssprop [--lr-combobox-option-selected-font-weight=var(--lr-font-weight-semibold)] - Font
+ *   weight of the selected option row.
  */
 export class LyraCombobox extends LyraElement {
     static { this.formAssociated = true; }
@@ -142,6 +153,7 @@ export class LyraCombobox extends LyraElement {
         name: { reflect: true, noAccessor: true },
         maxOptionsVisible: { type: Number, attribute: 'max-options-visible', noAccessor: true },
         maxRender: { type: Number, attribute: 'max-render', noAccessor: true },
+        sourceDelay: { type: Number, attribute: 'source-delay', noAccessor: true },
     }; }
     constructor() {
         super();
@@ -205,6 +217,7 @@ export class LyraCombobox extends LyraElement {
         this.hasStartSlot = false;
         this.hasEndSlot = false;
         this.loading = false;
+        this.sourceFailed = false;
         this.asyncRows = [];
         this.sourceToken = 0;
         // Guards the proactive `asyncRows` warm-up in `willUpdate()` below so it
@@ -259,6 +272,7 @@ export class LyraCombobox extends LyraElement {
         // rather than left for Lit's default async field setter to hand through unchecked.
         this._maxOptionsVisible = 3;
         this._maxRender = 200;
+        this._sourceDelay = 200;
         this.collectOptions = (e) => {
             const slot = e.target;
             const previous = new Set(this.options);
@@ -529,6 +543,19 @@ export class LyraCombobox extends LyraElement {
         // -- capture that distinction here, while it's still reliable, for
         // `updated()`'s `open`-handling below to consult.
         this._isFirstUpdate = !this.hasUpdated;
+        if (changed.has('source')) {
+            clearTimeout(this.sourceTimer);
+            this.sourceAbort?.abort();
+            this.sourceAbort = undefined;
+            this.sourceToken++;
+            this.loading = false;
+            this.sourceFailed = false;
+            this.asyncRows = [];
+            this.activeIndex = -1;
+            this._sourceWarmed = false;
+            if (this.source && this.open)
+                this.runSource(this.query);
+        }
         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');
@@ -637,10 +664,28 @@ export class LyraCombobox extends LyraElement {
     }
     /** Maximum number of rows rendered before the rest collapse behind the overflow indicator
      *  (the current selection is always kept visible regardless). Sanitized to a finite,
-     *  non-negative integer. */
+     *  non-negative integer.
+     *
+     *  Rows render in full rather than as a recycled scroll window, because the filter input's
+     *  `aria-activedescendant` is an IDREF and can only resolve within its own tree scope — rows
+     *  hosted inside a nested windowing element would sit one shadow root deeper than the input
+     *  that must point at them. Raising this to cover a few-hundred-entry list (countries,
+     *  currencies, time zones) is the intended use; past roughly a thousand rows, `source` narrows
+     *  the set before it becomes DOM and is the better tool. */
     get maxRender() {
         return this._maxRender;
     }
+    /** Debounce (ms) between the last keystroke and the `source` call. Sanitized to a finite
+     *  duration clamped to `[0, browser-timer-ceiling]`; `0` fires on every keystroke, a
+     *  non-finite value falls back to the `200` default. */
+    get sourceDelay() {
+        return this._sourceDelay;
+    }
+    set sourceDelay(next) {
+        const old = this._sourceDelay;
+        this._sourceDelay = finiteDuration(next, 200);
+        this.requestUpdate('sourceDelay', old);
+    }
     set maxRender(next) {
         const old = this._maxRender;
         this._maxRender = finiteCount(next, 200);
@@ -733,6 +778,9 @@ export class LyraCombobox extends LyraElement {
         this.cleanup?.();
         this.cleanup = undefined;
         clearTimeout(this.sourceTimer);
+        // Cancel any in-flight source request so its fetch is aborted on disconnect.
+        this.sourceAbort?.abort();
+        this.sourceAbort = undefined;
         this.ownerDocument.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
@@ -836,8 +884,14 @@ export class LyraCombobox extends LyraElement {
         // 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)
+        if (!this.multiple) {
+            const queryChanged = this.query !== '';
             this.query = '';
+            if (queryChanged && this.source) {
+                this.asyncRows = [];
+                this.sourceFailed = false;
+            }
+        }
     }
     updated(changed) {
         super.updated(changed); // no-op in LyraElement/ReactiveElement today, but a future mixin's
@@ -886,14 +940,16 @@ export class LyraCombobox extends LyraElement {
             this.renderRoot.querySelector('[part="option"][data-active]')?.scrollIntoView({ block: 'nearest' });
         }
     }
-    /** 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. */
+    /** Dispatches the platform-style value events used by non-text user
+     * interactions: `input`, `change`, and the prefixed `lr-change` alias, each
+     * carrying `detail: { value }` (the new committed selection). Text editing
+     * keeps and exposes the original InputEvent from the shadow input so its
+     * data/inputType metadata is not lost. `this.emit()` (from `LyraElement`)
+     * already dispatches a bubbling, composed, non-cancelable `CustomEvent`. */
     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));
+        this.emit('input', { value: this.value });
+        this.emit('change', { value: this.value });
+        this.emit('lr-change', { value: this.value });
     }
     pickRow(row) {
         if (this.effectiveDisabled || row.disabled)
@@ -962,23 +1018,34 @@ export class LyraCombobox extends LyraElement {
             this.emit('lr-filter', { value: this.query });
     }
     runSource(query) {
-        if (!this.source)
+        const source = this.source;
+        if (!source)
             return;
         clearTimeout(this.sourceTimer);
+        // Abort any in-flight request from a prior query so its fetch can be cancelled.
+        this.sourceAbort?.abort();
         this.sourceTimer = setTimeout(() => {
             const token = ++this.sourceToken;
+            const controller = new AbortController();
+            this.sourceAbort = controller;
             this.loading = true;
-            // `Promise.resolve().then(() => this.source!(query))` moves the call
+            this.sourceFailed = false;
+            // `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(() => source(query, { signal: controller.signal }))
                 .then((rows) => {
                 if (token !== this.sourceToken || !this.isConnected)
                     return;
                 this.asyncRows = rows;
+                this.sourceFailed = false;
+                const navigableCount = rows.filter((row) => !row.disabled).length;
+                if (this.activeIndex >= navigableCount) {
+                    this.activeIndex = navigableCount ? navigableCount - 1 : -1;
+                }
                 const selected = new Set(this._selected);
                 for (const row of rows) {
                     if (selected.has(row.value))
@@ -988,27 +1055,50 @@ export class LyraCombobox extends LyraElement {
                 .catch((err) => {
                 if (token !== this.sourceToken || !this.isConnected)
                     return;
+                // A caller that forwarded the signal to fetch() surfaces cancellation as an AbortError;
+                // that is expected teardown, not a source failure, so don't warn about it.
+                if (err instanceof DOMException && err.name === 'AbortError')
+                    return;
+                this.asyncRows = [];
+                this.activeIndex = -1;
+                this.sourceFailed = true;
                 console.warn('<lr-combobox> source() rejected:', err);
             })
                 .finally(() => {
                 if (token === this.sourceToken)
                     this.loading = false;
             });
-        }, 200);
+        }, this._sourceDelay);
     }
     renderRows(rows, activeId) {
         const out = [];
         let currentGroup;
+        let currentGroupRows = [];
+        let groupIndex = 0;
         const selectedSet = new Set(this._selected);
+        const flushGroup = () => {
+            if (!currentGroupRows.length)
+                return;
+            if (currentGroup) {
+                const labelId = `${this.listId}-group-${groupIndex++}`;
+                out.push(html `<div role="group" aria-labelledby=${labelId}>
+          <div id=${labelId} class="group-label">${currentGroup}</div>
+          ${currentGroupRows}
+        </div>`);
+            }
+            else {
+                out.push(...currentGroupRows);
+            }
+            currentGroupRows = [];
+        };
         rows.forEach((o, i) => {
             if (o.group !== currentGroup) {
+                flushGroup();
                 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
+            currentGroupRows.push(html `<div
           part="option"
           id=${id}
           role="option"
@@ -1027,6 +1117,7 @@ export class LyraCombobox extends LyraElement {
           ${o.badge != null ? html `<span part="option-badge">${o.badge}</span>` : ''}
         </div>`);
         });
+        flushGroup();
         return out;
     }
     render() {
@@ -1058,7 +1149,7 @@ export class LyraCombobox extends LyraElement {
           </span>
           <div part="tags">
             ${shownTags.map((v) => html `<span part="tag"
-                >${this.labelFor(v)}<button
+                ><span part="tag-label">${this.labelFor(v)}</span><button
                   part="tag__remove-button"
                   type="button"
                   ?disabled=${this.effectiveDisabled}
@@ -1071,7 +1162,11 @@ export class LyraCombobox extends LyraElement {
                   ${closeIcon()}</button
                 ></span
               >`)}
-            ${extra > 0 ? html `<span part="tag">+${extra}</span>` : ''}
+            ${extra > 0
+            ? html `<span part="tag">${this.localize('comboboxSelectedOverflow', undefined, {
+                n: getNumberFormat(this.effectiveLocale).format(extra),
+            })}</span>`
+            : ''}
           </div>
           <input
             id=${this.inputId}
@@ -1082,7 +1177,7 @@ export class LyraCombobox extends LyraElement {
             aria-describedby=${describedBy || nothing}
             aria-expanded=${this.open ? 'true' : 'false'}
             aria-controls=${this.listId}
-            aria-activedescendant=${activeId}
+            aria-activedescendant=${activeId || nothing}
             aria-autocomplete="list"
             aria-required=${this.required ? 'true' : 'false'}
             aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
@@ -1129,12 +1224,14 @@ export class LyraCombobox extends LyraElement {
         >
           ${this.loading
             ? html `<div class="loading" role="option" aria-selected="false" aria-disabled="true">${this.localize('loading', this.loadingText || undefined)}</div>`
-            : rows.length === 0
-                ? html `<div class="empty" role="option" aria-selected="false" aria-disabled="true">${this.localize('noMatches', this.emptyText || undefined)}</div>`
-                : html `${this.renderRows(rows, activeId)}
+            : this.sourceFailed
+                ? html `<div class="source-error" role="alert">${this.localize('comboboxLoadError')}</div>`
+                : rows.length === 0
+                    ? html `<div class="empty" role="option" aria-selected="false" aria-disabled="true">${this.localize('noMatches', this.emptyText || undefined)}</div>`
+                    : html `${this.renderRows(rows, activeId)}
                   ${overflow > 0
-                    ? html `<div part="option-overflow">${this.localize('comboboxOverflow', this.overflowText || undefined, { n: overflow })}</div>`
-                    : ''}`}
+                        ? html `<div part="option-overflow">${this.localize('comboboxOverflow', this.overflowText || undefined, { n: overflow })}</div>`
+                        : ''}`}
         </div>
         <div id="combobox-error" part="error" ?hidden=${!hasError}>
           ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
@@ -1234,6 +1331,9 @@ __decorate([
 __decorate([
     state()
 ], LyraCombobox.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "sourceFailed", void 0);
 __decorate([
     state()
 ], LyraCombobox.prototype, "asyncRows", void 0);