@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/combobox/combobox.js

@@ -4,13 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.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.js';
 import './option.js';
@@ -26,8 +27,11 @@ import './option.js';
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
  * @slot error - Custom error content.
- * @event change - The selection changed.
- * @event input - The user typed in the filter or changed the selection.
+ * @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.
@@ -53,15 +57,15 @@ 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.multiple = false;
         this.placeholder = '';
-        this.disabled = false;
-        this.required = false;
-        this.name = '';
         this.label = '';
         this.hint = '';
         this.errorText = '';
@@ -69,6 +73,10 @@ export class LyraCombobox extends LyraElement {
         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;
@@ -91,16 +99,29 @@ export class LyraCombobox extends LyraElement {
         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>`) —
@@ -111,6 +132,18 @@ export class LyraCombobox extends LyraElement {
         // 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 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);
@@ -128,7 +161,7 @@ export class LyraCombobox extends LyraElement {
                 // after the user has picked something.
                 const declared = this.options.filter((o) => o.selected).map((o) => o.value);
                 this._defaultSelected = [...declared];
-                if (declared.length) {
+                if (declared.length && !this._restoredStateActive) {
                     this.value = this.multiple ? declared : declared[0];
                     return; // `value=`'s setter already called reflectSelected()
                 }
@@ -140,7 +173,7 @@ export class LyraCombobox extends LyraElement {
                 // 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) {
+                if (newlySelected.length && !this._restoredStateActive) {
                     this.value = this.multiple
                         ? [...new Set([...this._selected, ...newlySelected])]
                         : newlySelected[newlySelected.length - 1];
@@ -149,6 +182,14 @@ export class LyraCombobox extends LyraElement {
             }
             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();
@@ -159,7 +200,6 @@ export class LyraCombobox extends LyraElement {
             this.show();
             if (this.source)
                 this.runSource(this.query);
-            this.emit('input');
         };
         this.onInputBlur = () => {
             this.touched = true;
@@ -226,7 +266,7 @@ export class LyraCombobox extends LyraElement {
             }
         };
         this.onComboMouseDown = (e) => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
             if (e.target.closest('button'))
                 return;
@@ -251,6 +291,26 @@ export class LyraCombobox extends LyraElement {
                 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();
@@ -267,6 +327,62 @@ export class LyraCombobox extends LyraElement {
             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() {
@@ -274,6 +390,7 @@ export class LyraCombobox extends LyraElement {
     }
     set value(next) {
         const old = this._selected;
+        this._restoredStateActive = false;
         this._selected = Array.isArray(next) ? [...next] : next ? [next] : [];
         this.syncFormValue();
         this.reflectSelected();
@@ -282,13 +399,14 @@ export class LyraCombobox extends LyraElement {
     }
     updateValidity() {
         if (this.required && this._selected.length === 0) {
-            this.internals.setValidity({ valueMissing: true }, 'Please select an option.');
+            this.validityController.setValidity({ valueMissing: true }, 'Please select an option.');
         }
         else {
-            this.internals.setValidity({});
+            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
@@ -297,24 +415,54 @@ export class LyraCombobox extends LyraElement {
             // inventing a shared key that would merge with any other unnamed
             // combobox in the same form.
             if (!this.name) {
-                this.internals.setFormValue(null);
+                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);
+            this.internals.setFormValue(fd, state);
         }
         else {
-            this.internals.setFormValue(this._selected[0] ?? '');
+            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.disabled = disabled;
+        this._fieldsetDisabled = disabled;
+        if (disabled)
+            this.hide();
+        this.requestUpdate();
     }
     checkValidity() {
         return this.internals.checkValidity();
@@ -325,8 +473,15 @@ export class LyraCombobox extends LyraElement {
     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);
@@ -334,7 +489,17 @@ export class LyraCombobox extends LyraElement {
             o.selected = sel.has(o.value);
     }
     labelFor(value) {
-        return this._selectedLabelCache.get(value) ?? this.options.find((o) => o.value === value)?.label ?? 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() {
@@ -354,15 +519,27 @@ export class LyraCombobox extends LyraElement {
         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)
+                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() {
@@ -381,7 +558,7 @@ export class LyraCombobox extends LyraElement {
         return this._selected[0] ? this.labelFor(this._selected[0]) : '';
     }
     show() {
-        if (this.open || this.disabled)
+        if (this.open || this.effectiveDisabled)
             return;
         this.open = true;
     }
@@ -390,6 +567,15 @@ export class LyraCombobox extends LyraElement {
             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')) {
@@ -420,15 +606,25 @@ export class LyraCombobox extends LyraElement {
                     this.emit('lyra-hide');
             }
         }
-        if (changed.has('required'))
-            this.updateValidity();
+        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 (row.disabled)
+        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);
@@ -447,20 +643,25 @@ export class LyraCombobox extends LyraElement {
         // mode) matches the now-empty input instead of the stale prior query.
         if (this.source)
             this.runSource(this.query);
-        this.emit('input');
-        this.emit('change');
+        if (selectionChanged)
+            this.emitValueEvents();
     }
     removeValue(value) {
-        this.value = this._selected.filter((v) => v !== value);
-        this.emit('change');
+        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');
-        this.emit('change');
     }
     runSource(query) {
         if (!this.source)
@@ -469,11 +670,22 @@ export class LyraCombobox extends LyraElement {
         this.sourceTimer = setTimeout(() => {
             const token = ++this.sourceToken;
             this.loading = true;
-            this.source(query)
+            // `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)
@@ -523,6 +735,7 @@ export class LyraCombobox extends LyraElement {
         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}>
@@ -534,6 +747,7 @@ export class LyraCombobox extends LyraElement {
                 >${this.labelFor(v)}<button
                   part="tag__remove-button"
                   type="button"
+                  ?disabled=${this.effectiveDisabled}
                   aria-label="Remove ${this.labelFor(v)}"
                   @click=${(e) => {
             e.stopPropagation();
@@ -549,7 +763,8 @@ export class LyraCombobox extends LyraElement {
             id=${this.inputId}
             part="combobox-input"
             role="combobox"
-            aria-label=${this.getAttribute('aria-label') || this.label || this.placeholder || '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}
@@ -559,7 +774,7 @@ export class LyraCombobox extends LyraElement {
             autocomplete="off"
             .value=${this.displayValue}
             placeholder=${hasValue && !this.multiple ? '' : this.placeholder}
-            ?disabled=${this.disabled}
+            ?disabled=${this.effectiveDisabled}
             @input=${this.onInput}
             @keydown=${this.onKeyDown}
             @focus=${() => this.show()}
@@ -569,6 +784,7 @@ export class LyraCombobox extends LyraElement {
             ? html `<button
                 part="clear-button"
                 type="button"
+                ?disabled=${this.effectiveDisabled}
                 aria-label="Clear"
                 @click=${(e) => {
                 e.stopPropagation();
@@ -589,40 +805,28 @@ export class LyraCombobox extends LyraElement {
           @click=${this.onListboxClick}
         >
           ${this.loading
-            ? html `<div class="loading" role="option" aria-selected="false" aria-disabled="true">Loading…</div>`
+            ? 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">+${overflow} more — refine your search</div>`
+                    ? html `<div part="option-overflow">${this.overflowText.replace('{n}', String(overflow))}</div>`
                     : ''}`}
         </div>
-        <div part="error" ?hidden=${!hasError}>
+        <div id="combobox-error" part="error" ?hidden=${!hasError}>
           ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
         </div>
-        <div part="hint" ?hidden=${!hasHint}>
+        <div id="combobox-hint" part="hint" ?hidden=${!hasHint}>
           ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
         </div>
       </div>
-      <slot @slotchange=${this.collectOptions} hidden></slot>
+      <slot @slotchange=${this.collectOptions} @lyra-option-change=${this.onOptionChange} hidden></slot>
     `;
     }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCombobox.prototype, "multiple", void 0);
 __decorate([
     property()
 ], LyraCombobox.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCombobox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraCombobox.prototype, "required", void 0);
-__decorate([
-    property()
-], LyraCombobox.prototype, "name", void 0);
 __decorate([
     property()
 ], LyraCombobox.prototype, "label", void 0);
@@ -644,6 +848,12 @@ __decorate([
 __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);

package/dist/components/combobox/combobox.styles.js

@@ -111,11 +111,11 @@ export const styles = css `
     position: fixed;
     z-index: 900;
     box-sizing: border-box;
-    max-block-size: 18rem;
+    max-block-size: min(18rem, var(--lyra-positioner-available-block-size, 18rem));
     overflow-y: auto;
     inline-size: max-content;
-    min-inline-size: 12rem;
-    max-inline-size: min(92vw, 28rem);
+    min-inline-size: min(12rem, var(--lyra-positioner-available-inline-size, 12rem));
+    max-inline-size: min(92vw, 28rem, var(--lyra-positioner-available-inline-size, 100vw));
     padding: var(--lyra-space-xs);
     background: var(--lyra-color-surface);
     border: 1px solid var(--lyra-color-border);

package/dist/components/combobox/option.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 /**
  * `<lyra-option>` — a selectable option for `<lyra-combobox>`.
@@ -27,6 +27,10 @@ export declare class LyraOption extends LyraElement {
     dotColor: string;
     /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
     get label(): string;
+    private labelObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/combobox/option.js

@@ -48,6 +48,41 @@ export class LyraOption extends LyraElement {
         const attr = this.getAttribute('label');
         return (attr ? attr : (this.textContent ?? '')).trim();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // `label` is derived from either the `label` attribute or `textContent` --
+        // neither is a Lit reactive property, so a direct mutation of either
+        // (e.g. `option.textContent = 'New label'`) needs its own observer to
+        // notify the parent combobox/select that its cached row data is stale.
+        this.labelObserver = new MutationObserver(() => this.emit('lyra-option-change'));
+        this.labelObserver.observe(this, {
+            attributes: true,
+            attributeFilter: ['label'],
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.labelObserver?.disconnect();
+        this.labelObserver = undefined;
+    }
+    updated(changed) {
+        // `selected` is deliberately excluded -- the parent combobox/select
+        // already sets `selected` itself as *part of* rendering the current
+        // selection, so echoing that back as a `lyra-option-change` notification
+        // would trigger a redundant re-render on every selection change, rather
+        // than signal a genuine "this option's own data changed externally".
+        if (changed.has('value') ||
+            changed.has('disabled') ||
+            changed.has('group') ||
+            changed.has('searchText') ||
+            changed.has('sub') ||
+            changed.has('dotColor')) {
+            this.emit('lyra-option-change');
+        }
+    }
     render() {
         return html `<slot></slot>`;
     }