@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/menu/menu.js

@@ -51,7 +51,10 @@ import './menu-item.js';
  *   Home/End jump to the first/last non-disabled item. Enter/Space activate
  *   the focused item. Escape closes and returns focus to the trigger. Tab
  *   closes the menu without trapping focus (the browser's own default Tab
- *   behavior proceeds untouched).
+ *   behavior proceeds untouched). A printable keypress runs type-ahead:
+ *   roving focus jumps to the next non-disabled item whose text starts with
+ *   the accumulated buffer, cycling from just after the active item (mirrors
+ *   `<lyra-select>`'s identical listbox type-ahead).
  * - A click outside both the trigger and the open popup closes it (mirrors
  *   `<lyra-select>`'s `onDocPointer` exactly) — this does *not* refocus the
  *   trigger, since the outside click itself already moved focus somewhere
@@ -112,6 +115,11 @@ export class LyraMenu extends LyraElement {
         this._isFirstUpdate = true;
         this.pendingFocus = 'first';
         this.listId = nextId('menu-list');
+        // Standard menu type-ahead, mirroring lyra-select's identical listbox
+        // trio: printable keystrokes accumulate into this buffer and reset ~500ms
+        // after the last one, so "d" then "e" narrows to "de" instead of
+        // restarting the search on every keystroke.
+        this.typeAheadBuffer = '';
         this.onDocPointer = (e) => {
             if (!e.composedPath().includes(this))
                 this.hide();
@@ -161,9 +169,19 @@ export class LyraMenu extends LyraElement {
                 this.reposition();
         };
         this.onItemsSlotChange = (e) => {
+            this.itemStateObserver?.disconnect();
             this.items = e.target
                 .assignedElements({ flatten: true })
                 .filter((el) => el instanceof LyraMenuItem);
+            if (typeof MutationObserver !== 'undefined') {
+                this.itemStateObserver = new MutationObserver(() => this.onItemStateChange());
+                for (const item of this.items) {
+                    this.itemStateObserver.observe(item, {
+                        attributes: true,
+                        attributeFilter: ['disabled', 'hidden', 'aria-hidden'],
+                    });
+                }
+            }
             if (this.activeIndex >= this.items.length)
                 this.activeIndex = -1;
             this.applyRovingTabIndex();
@@ -175,6 +193,24 @@ export class LyraMenu extends LyraElement {
             if (this.open && this.activeIndex === -1)
                 this.focusRoving(this.pendingFocus);
         };
+        /** Rehomes roving focus immediately when an active item becomes disabled or hidden. */
+        this.onItemStateChange = () => {
+            const navigable = this.items.filter((item) => this.isNavigable(item));
+            if (this.activeIndex >= 0 && !this.isNavigable(this.items[this.activeIndex])) {
+                const current = this.activeIndex;
+                const next = navigable.find((item) => this.items.indexOf(item) > current) ??
+                    navigable.find((item) => this.items.indexOf(item) < current);
+                if (next) {
+                    this.setActiveItem(next);
+                }
+                else {
+                    this.activeIndex = -1;
+                    this.applyRovingTabIndex();
+                }
+                return;
+            }
+            this.applyRovingTabIndex();
+        };
         this.onItemSelect = (e) => {
             const item = e.target;
             if (!(item instanceof LyraMenuItem))
@@ -182,8 +218,27 @@ export class LyraMenu extends LyraElement {
             this.emit('lyra-menu-select', { value: item.value });
             this.hide(true);
         };
+        /** Resyncs `activeIndex` (and the roving `tabindex`) to wherever real DOM
+         *  focus actually lands, for any path that doesn't go through
+         *  `setActiveItem()` -- e.g. a real mousedown on an item, which focuses it
+         *  even while `disabled` (`tabIndex="-1"` remains mouse-focusable per
+         *  spec). Without this, `activeIndex` goes stale the moment focus moves any
+         *  other way, and subsequent Arrow-key navigation computes its next item
+         *  from that stale position instead of from where focus actually is. A
+         *  no-op for `setActiveItem()`'s own `.focus()` call, since `activeIndex`
+         *  there is already set to match before focus moves. */
+        this.onListFocusIn = (e) => {
+            const target = e.target;
+            if (!(target instanceof LyraMenuItem))
+                return;
+            const index = this.items.indexOf(target);
+            if (index === -1 || index === this.activeIndex)
+                return;
+            this.activeIndex = index;
+            this.applyRovingTabIndex();
+        };
         this.onListKeyDown = (e) => {
-            const navigable = this.items.filter((i) => !i.disabled);
+            const navigable = this.items.filter((i) => this.isNavigable(i));
             const current = this.activeIndex >= 0 ? this.items[this.activeIndex] : undefined;
             const currentNavIndex = current ? navigable.indexOf(current) : -1;
             switch (e.key) {
@@ -227,6 +282,9 @@ export class LyraMenu extends LyraElement {
                     this.hide();
                     break;
                 default:
+                    if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
+                        this.typeAhead(e.key);
+                    }
                     return;
             }
         };
@@ -280,7 +338,16 @@ export class LyraMenu extends LyraElement {
         super.disconnectedCallback();
         this.cleanup?.();
         this.cleanup = undefined;
+        clearTimeout(this.typeAheadTimer);
+        this.itemStateObserver?.disconnect();
+        this.itemStateObserver = undefined;
         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 menu rendered open with no positioning and
+        // no outside-click listener.
+        this.open = false;
     }
     show(focus = 'first') {
         if (this.open)
@@ -310,6 +377,9 @@ export class LyraMenu extends LyraElement {
         this.triggerEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         this.triggerEl.setAttribute('aria-controls', this.listId);
     }
+    isNavigable(item) {
+        return !item.disabled && !item.hidden && item.getAttribute('aria-hidden') !== 'true';
+    }
     /** Flips exactly one non-disabled item's `tabIndex` to `0` (the roving
      *  target) and every other item's to `-1` -- see `<lyra-menu-item>`'s doc
      *  for why this is the sole authority over that property. */
@@ -322,7 +392,7 @@ export class LyraMenu extends LyraElement {
      *  non-disabled item. A no-op when there are none -- focus then simply
      *  stays on the trigger (see onTriggerKeyDown's Escape safety net). */
     focusRoving(which) {
-        const navigable = this.items.filter((i) => !i.disabled);
+        const navigable = this.items.filter((i) => this.isNavigable(i));
         if (!navigable.length)
             return;
         const item = which === 'first' ? navigable[0] : navigable[navigable.length - 1];
@@ -333,6 +403,30 @@ export class LyraMenu extends LyraElement {
         this.applyRovingTabIndex();
         item.focus();
     }
+    /** Standard WAI-ARIA APG menu-button type-ahead: moves the roving focus to
+     *  the next non-disabled item whose text content starts with the
+     *  accumulated buffer, cycling from just after the currently active item
+     *  -- mirrors `<lyra-select>`'s identical listbox type-ahead. */
+    typeAhead(char) {
+        clearTimeout(this.typeAheadTimer);
+        this.typeAheadBuffer += char.toLowerCase();
+        this.typeAheadTimer = setTimeout(() => {
+            this.typeAheadBuffer = '';
+        }, 500);
+        const navigable = this.items.filter((i) => !i.disabled);
+        if (!navigable.length)
+            return;
+        const current = this.activeIndex >= 0 ? this.items[this.activeIndex] : undefined;
+        const currentIndex = current ? navigable.indexOf(current) : -1;
+        const n = navigable.length;
+        for (let step = 1; step <= n; step++) {
+            const candidate = navigable[(currentIndex + step + n) % n];
+            if ((candidate.textContent ?? '').trim().toLowerCase().startsWith(this.typeAheadBuffer)) {
+                this.setActiveItem(candidate);
+                return;
+            }
+        }
+    }
     render() {
         return html `
       <div part="trigger" @click=${this.onTriggerClick} @keydown=${this.onTriggerKeyDown}>
@@ -345,7 +439,9 @@ export class LyraMenu extends LyraElement {
           role="menu"
           aria-label=${this.label}
           @keydown=${this.onListKeyDown}
+          @focusin=${this.onListFocusIn}
           @lyra-menu-item-select=${this.onItemSelect}
+          @lyra-menu-item-state-change=${this.onItemStateChange}
         >
           <slot @slotchange=${this.onItemsSlotChange}></slot>
         </div>

package/dist/components/menu/menu.styles.js

@@ -18,7 +18,8 @@ export const styles = css `
     z-index: 900;
     box-sizing: border-box;
     min-inline-size: 10rem;
-    max-inline-size: min(92vw, 20rem);
+    max-inline-size: min(92vw, 20rem, var(--lyra-positioner-available-inline-size, 100vw));
+    max-block-size: min(20rem, var(--lyra-positioner-available-block-size, 20rem));
     background: var(--lyra-color-surface);
     border: 1px solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
@@ -50,7 +51,7 @@ export const styles = css `
   [part='list'] {
     display: flex;
     flex-direction: column;
-    max-block-size: 20rem;
+    max-block-size: min(20rem, var(--lyra-positioner-available-block-size, 20rem));
     overflow-y: auto;
     padding: var(--lyra-space-xs);
     outline: none;

package/dist/components/model-select/model-select.d.ts

@@ -30,6 +30,8 @@ export type LyraModelCatalog = string[] | LyraModelCatalogEntry[];
  *
  * @customElement lyra-model-select
  * @event lyra-change - The selected/typed value changed. `detail: { value: string; inCatalog: boolean }`.
+ * @csspart form-control-label - The `<label>` element (only rendered — and only contributes to the
+ *   accessible name — once `label` is non-empty).
  * @csspart trigger - The trigger button (closed-dropdown mode's positioning anchor).
  * @csspart combobox - The text-input container (free-text mode's positioning anchor).
  * @csspart combobox-input - The free-text mode's text input.
@@ -44,9 +46,23 @@ export declare class LyraModelSelect extends LyraElement {
     static formAssociated: boolean;
     static styles: import("lit").CSSResultGroup[];
     static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
         value: {
             noAccessor: boolean;
         };
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
     };
     /** Informational only — e.g. `'ollama'`. Rendered as a small leading badge for display grouping. */
     provider: string;
@@ -54,29 +70,56 @@ export declare class LyraModelSelect extends LyraElement {
     catalog?: LyraModelCatalog;
     /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
     allowCustom: boolean;
+    /**
+     * Optional visible title above the control, mirroring `lyra-select`'s
+     * `label` exactly: rendered via a `part="form-control-label"` `<label>`
+     * paired with the control's id, and — once non-empty — it takes over as
+     * the accessible-name source (the `aria-label` fallback below is then only
+     * emitted when the host has an explicit `aria-label` override, same
+     * precedence as `lyra-select`). Leaving it empty (the default) keeps
+     * today's `aria-label || placeholder || 'Model'` chain untouched.
+     */
+    label: string;
     placeholder: string;
-    name: string;
-    disabled: boolean;
-    required: boolean;
     open: boolean;
     private activeIndex;
     private query;
     private touched;
     private internals;
+    private validityController;
     private listId;
     private controlId;
     private cleanup?;
     private _value;
+    private _fieldsetDisabled;
+    private _name;
+    private _disabled;
+    private _required;
     private _defaultValue;
     constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, old: string | null, val: string | null): void;
     /** The current model id (empty string when nothing is selected). */
     get value(): string;
     set value(next: string);
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name(): string;
+    set name(next: string);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    get required(): boolean;
+    set required(next: boolean);
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled(): boolean;
     private updateValidity;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
     formDisabledCallback(disabled: boolean): void;
     checkValidity(): boolean;
     reportValidity(): boolean;
@@ -114,6 +157,8 @@ export declare class LyraModelSelect extends LyraElement {
     private onListboxClick;
     private renderRows;
     private renderListbox;
+    /** `part="form-control-label"` — see `label`'s doc comment for its precedence over `aria-label`. */
+    private renderLabel;
     private renderClosed;
     private renderFreeText;
     render(): TemplateResult;

package/dist/components/model-select/model-select.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 } from '../../internal/icons.js';
+import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
 import { styles } from './model-select.styles.js';
 /**
  * `<lyra-model-select>` — a provider/model picker that renders as a closed
@@ -32,6 +33,8 @@ import { styles } from './model-select.styles.js';
  *
  * @customElement lyra-model-select
  * @event lyra-change - The selected/typed value changed. `detail: { value: string; inCatalog: boolean }`.
+ * @csspart form-control-label - The `<label>` element (only rendered — and only contributes to the
+ *   accessible name — once `label` is non-empty).
  * @csspart trigger - The trigger button (closed-dropdown mode's positioning anchor).
  * @csspart combobox - The text-input container (free-text mode's positioning anchor).
  * @csspart combobox-input - The free-text mode's text input.
@@ -46,7 +49,10 @@ export class LyraModelSelect extends LyraElement {
     static { this.formAssociated = true; }
     static { this.styles = [LyraElement.styles, styles]; }
     static { this.properties = {
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+        required: { type: Boolean, reflect: true, noAccessor: true },
         value: { noAccessor: true },
+        name: { reflect: true, noAccessor: true },
     }; }
     constructor() {
         super();
@@ -54,10 +60,17 @@ export class LyraModelSelect extends LyraElement {
         this.provider = '';
         /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
         this.allowCustom = false;
+        /**
+         * Optional visible title above the control, mirroring `lyra-select`'s
+         * `label` exactly: rendered via a `part="form-control-label"` `<label>`
+         * paired with the control's id, and — once non-empty — it takes over as
+         * the accessible-name source (the `aria-label` fallback below is then only
+         * emitted when the host has an explicit `aria-label` override, same
+         * precedence as `lyra-select`). Leaving it empty (the default) keeps
+         * today's `aria-label || placeholder || 'Model'` chain untouched.
+         */
+        this.label = '';
         this.placeholder = '';
-        this.name = '';
-        this.disabled = false;
-        this.required = false;
         this.open = false;
         this.activeIndex = -1;
         // Free-text mode's live input text. Only meaningful while `open` — the
@@ -70,6 +83,10 @@ export class LyraModelSelect extends LyraElement {
         this.listId = nextId('model-select-list');
         this.controlId = nextId('model-select-control');
         this._value = '';
+        this._fieldsetDisabled = false;
+        this._name = '';
+        this._disabled = false;
+        this._required = false;
         // What `form.reset()` restores to — captured from the `value` *content
         // attribute* only, mirroring native `<input>`/`FormAssociated`'s
         // `_defaultValue` (see internal/form-associated.ts). There's no child
@@ -82,7 +99,7 @@ export class LyraModelSelect extends LyraElement {
         };
         // -- Closed-dropdown mode (trigger button) --------------------------------
         this.onTriggerClick = () => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
             this.open ? this.hide() : this.show();
         };
@@ -139,7 +156,7 @@ export class LyraModelSelect extends LyraElement {
         };
         // -- Free-text mode (text input) ------------------------------------------
         this.onComboMouseDown = (e) => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
             e.preventDefault();
             this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
@@ -214,6 +231,8 @@ export class LyraModelSelect extends LyraElement {
                 e.preventDefault();
         };
         this.onListboxClick = (e) => {
+            if (this.effectiveDisabled)
+                return;
             const optionEl = e.target.closest('[part="option"]');
             const value = optionEl?.dataset.value;
             if (value === undefined)
@@ -223,6 +242,30 @@ export class LyraModelSelect extends LyraElement {
                 this.selectEntry(entry);
         };
         this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        // Native <input> always has a submission value ("") from construction —
+        // without this, a control whose `value` is never touched is entirely
+        // absent from FormData instead of present as "" (see form-associated.ts).
+        this.internals.setFormValue('');
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]') ?? null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -231,7 +274,14 @@ export class LyraModelSelect extends LyraElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.cleanup?.();
+        this.cleanup = undefined;
         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;
     }
     attributeChangedCallback(name, old, val) {
         super.attributeChangedCallback(name, old, val);
@@ -249,19 +299,65 @@ export class LyraModelSelect extends LyraElement {
         this.updateValidity();
         this.requestUpdate('value', old);
     }
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        if (this._disabled)
+            this.hide();
+        this.requestUpdate('disabled', old);
+    }
+    get required() {
+        return this._required;
+    }
+    set required(next) {
+        const old = this._required;
+        this._required = Boolean(next);
+        this.toggleAttribute('required', this._required);
+        this.updateValidity();
+        this.requestUpdate('required', old);
+    }
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
     updateValidity() {
         if (this.required && !this._value) {
-            this.internals.setValidity({ valueMissing: true }, 'Please choose a model.');
+            this.validityController.setValidity({ valueMissing: true }, 'Please choose a model.');
         }
         else {
-            this.internals.setValidity({});
+            this.validityController.setValidity({});
         }
     }
     formResetCallback() {
         this.value = this._defaultValue;
     }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+    }
     formDisabledCallback(disabled) {
-        this.disabled = disabled;
+        this._fieldsetDisabled = disabled;
+        if (disabled)
+            this.hide();
+        this.requestUpdate();
     }
     checkValidity() {
         return this.internals.checkValidity();
@@ -307,7 +403,7 @@ export class LyraModelSelect extends LyraElement {
         return this.effectiveEntries.find((e) => e.id === id)?.label ?? id;
     }
     show() {
-        if (this.open || this.disabled)
+        if (this.open || this.effectiveDisabled)
             return;
         this.open = true;
     }
@@ -388,11 +484,17 @@ export class LyraModelSelect extends LyraElement {
       </div>
     `;
     }
+    /** `part="form-control-label"` — see `label`'s doc comment for its precedence over `aria-label`. */
+    renderLabel() {
+        return html `<label part="form-control-label" for=${this.controlId} ?hidden=${!this.label}>${this.label}</label>`;
+    }
     renderClosed() {
         const rows = this.effectiveEntries;
         const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
         const hasValue = this._value.length > 0;
+        const hasLabel = this.label.length > 0;
         return html `
+      ${this.renderLabel()}
       <button
         id=${this.controlId}
         part="trigger"
@@ -402,10 +504,10 @@ export class LyraModelSelect extends LyraElement {
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-controls=${this.listId}
         aria-activedescendant=${activeId}
-        aria-label=${this.getAttribute('aria-label') || this.placeholder || 'Model'}
+        aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Model')}
         aria-required=${this.required ? 'true' : 'false'}
         aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
-        ?disabled=${this.disabled}
+        ?disabled=${this.effectiveDisabled}
         @click=${this.onTriggerClick}
         @keydown=${this.onTriggerKeyDown}
         @blur=${this.onTriggerBlur}
@@ -422,14 +524,16 @@ export class LyraModelSelect extends LyraElement {
     renderFreeText() {
         const rows = this.filteredEntries;
         const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        const hasLabel = this.label.length > 0;
         return html `
+      ${this.renderLabel()}
       <div part="combobox" @mousedown=${this.onComboMouseDown}>
         ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
         <input
           id=${this.controlId}
           part="combobox-input"
           role="combobox"
-          aria-label=${this.getAttribute('aria-label') || this.placeholder || 'Model'}
+          aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Model')}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-controls=${this.listId}
           aria-activedescendant=${activeId}
@@ -439,7 +543,7 @@ export class LyraModelSelect extends LyraElement {
           autocomplete="off"
           .value=${this.open ? this.query : this.labelFor(this._value)}
           placeholder=${this.placeholder}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           @input=${this.onInput}
           @keydown=${this.onInputKeyDown}
           @focus=${this.onInputFocus}
@@ -465,16 +569,10 @@ __decorate([
 ], LyraModelSelect.prototype, "allowCustom", void 0);
 __decorate([
     property()
-], LyraModelSelect.prototype, "placeholder", void 0);
+], LyraModelSelect.prototype, "label", void 0);
 __decorate([
     property()
-], LyraModelSelect.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraModelSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraModelSelect.prototype, "required", void 0);
+], LyraModelSelect.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraModelSelect.prototype, "open", void 0);

package/dist/components/model-select/model-select.styles.js

@@ -6,10 +6,24 @@ export const styles = css `
     inline-size: 100%;
     max-inline-size: 24rem;
   }
-  :host([disabled]) {
+  :host(:disabled) {
     cursor: not-allowed;
   }
 
+  [part='form-control-label'] {
+    display: block;
+    margin-block-end: var(--lyra-space-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  /* :empty never matches here -- the part always renders a literal label
+     element regardless of label content -- so real emptiness is tracked via
+     the label property length and reflected through the hidden attribute
+     instead (same fix as lyra-select's own form-control-label). */
+  [part='form-control-label'][hidden] {
+    display: none;
+  }
+
   [part='trigger'],
   [part='combobox'] {
     display: flex;
@@ -40,8 +54,8 @@ export const styles = css `
   :host([open]) [part='trigger'] {
     border-color: var(--lyra-color-brand);
   }
-  :host([disabled]) [part='trigger'],
-  :host([disabled]) [part='combobox'] {
+  :host(:disabled) [part='trigger'],
+  :host(:disabled) [part='combobox'] {
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }