@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/result-card/result-field.d.ts

@@ -0,0 +1,36 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-result-field>` — a single label/value row, meant for use inside a
+ * `<lyra-result-card>` body (though it works standalone too). Renders as a
+ * dense "label: value" line by default — e.g. "Status: 200 OK" or
+ * "Duration: 340ms" — matching the compact, small-card presentation this
+ * pair exists for.
+ *
+ * @customElement lyra-result-field
+ * @slot - Rich value content (e.g. a `<lyra-chip>` status badge, or a plain
+ * text override), taking precedence over the `value` prop whenever it has
+ * any assigned content.
+ * @csspart base - The row container.
+ * @csspart label - The label text (including its trailing colon).
+ * @csspart value - The wrapper around the value — either the slotted
+ * content or the plain `value` prop text.
+ */
+export declare class LyraResultField extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The field name, e.g. "Status". Leave unset to render a value with no label. */
+    label: string;
+    /** Plain-text value, e.g. "200 OK". Ignored once the default slot carries
+     *  real content — see the `@slot` doc. */
+    value: string;
+    private hasValueSlot;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    private onSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-result-field': LyraResultField;
+    }
+}

package/dist/components/result-card/result-field.js

@@ -0,0 +1,87 @@
+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 { defineElement } from '../../internal/prefix.js';
+import { styles } from './result-field.styles.js';
+// An element always counts as real slot content, even one with no text of
+// its own (e.g. a `<lyra-chip>` status badge whose label comes from an
+// attribute, not slotted text) -- assignedElements()-only checks (as
+// lyra-widget's hasActionsSlot/lyra-source-card's hasFullSlot use) would
+// miss that case. A bare text node only counts once trimmed of whitespace,
+// matching lyra-checkbox's hasLabelSlot. Together this catches both a
+// plain-text value override (`<lyra-result-field label="Status">200 OK`)
+// and a rich slotted badge.
+function hasRealContent(nodes) {
+    return nodes.some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? '').trim().length > 0);
+}
+/**
+ * `<lyra-result-field>` — a single label/value row, meant for use inside a
+ * `<lyra-result-card>` body (though it works standalone too). Renders as a
+ * dense "label: value" line by default — e.g. "Status: 200 OK" or
+ * "Duration: 340ms" — matching the compact, small-card presentation this
+ * pair exists for.
+ *
+ * @customElement lyra-result-field
+ * @slot - Rich value content (e.g. a `<lyra-chip>` status badge, or a plain
+ * text override), taking precedence over the `value` prop whenever it has
+ * any assigned content.
+ * @csspart base - The row container.
+ * @csspart label - The label text (including its trailing colon).
+ * @csspart value - The wrapper around the value — either the slotted
+ * content or the plain `value` prop text.
+ */
+export class LyraResultField extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The field name, e.g. "Status". Leave unset to render a value with no label. */
+        this.label = '';
+        /** Plain-text value, e.g. "200 OK". Ignored once the default slot carries
+         *  real content — see the `@slot` doc. */
+        this.value = '';
+        this.hasValueSlot = false;
+        this.onSlotChange = (e) => {
+            this.hasValueSlot = hasRealContent(e.target.assignedNodes({ flatten: true }));
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasValueSlot = hasRealContent(Array.from(this.childNodes));
+        }
+    }
+    firstUpdated() {
+        // Fallback reconciliation against the fully-resolved slot assignment,
+        // the same belt-and-suspenders pass lyra-source-card's hasFullSlot and
+        // lyra-empty's hasIcon/hasActions take -- a no-op in the common case
+        // since willUpdate already seeded the correct value above.
+        const slot = this.shadowRoot.querySelector('slot');
+        this.hasValueSlot = hasRealContent(slot.assignedNodes({ flatten: true }));
+    }
+    render() {
+        const hasLabel = this.label.length > 0;
+        return html `
+      <div part="base">
+        ${hasLabel ? html `<span part="label">${this.label}:</span>` : nothing}
+        <span part="value"
+          >${this.hasValueSlot ? nothing : this.value}<slot @slotchange=${this.onSlotChange}></slot
+        ></span>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraResultField.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraResultField.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraResultField.prototype, "hasValueSlot", void 0);
+defineElement('result-field', LyraResultField);

package/dist/components/result-card/result-field.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/result-card/result-field.styles.js

@@ -0,0 +1,32 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  /* Dense "label: value" single-line row by default -- the compact
+     presentation short status/duration/count content (the kind this
+     component is meant for) reads best as, versus a stacked two-line
+     layout. A consumer that prefers stacked can override this from the
+     light DOM: :host { } / [part='base'] { flex-direction: column; }. */
+  [part='base'] {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  [part='label'] {
+    flex: 0 0 auto;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='value'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    color: var(--lyra-color-text);
+    overflow-wrap: anywhere;
+  }
+  [part='value'] ::slotted(*) {
+    vertical-align: middle;
+  }
+`;

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

@@ -1,6 +1,7 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../combobox/option.js';
+export type LyraSelectSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 /**
  * `<lyra-select>` — a plain closed-list dropdown: a direct `<lyra-*>`
  * counterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text
@@ -20,6 +21,17 @@ import '../combobox/option.js';
  * "active" row is conveyed via `aria-activedescendant`, never actual focus),
  * matching the WAI-ARIA "select-only combobox" pattern.
  *
+ * When exactly one option is enabled (regardless of how many disabled ones
+ * exist alongside it), the popup never opens at all: a click, Enter, Space,
+ * ArrowDown, or ArrowUp on the trigger commits that sole option directly,
+ * and the trigger renders as a plain `role="button"` with no chevron/
+ * `aria-haspopup`/`aria-expanded` rather than a combobox with a permanently
+ * inert popup state — opening a one-row list to pick the only available
+ * choice is pure friction with no real decision behind it. This never
+ * changes `value`/validity defaults on its own — an unselected single-option
+ * select stays unselected (and a `required` one stays invalid) exactly like
+ * the multi-option case, until the trigger is actually activated.
+ *
  * @customElement lyra-select
  * @slot - `<lyra-option>` elements.
  * @slot label - Custom label content.
@@ -49,15 +61,20 @@ export declare class LyraSelect extends LyraElement {
         value: {
             noAccessor: boolean;
         };
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
     };
     placeholder: string;
     disabled: boolean;
     required: boolean;
-    name: string;
     label: string;
     hint: string;
     errorText: string;
     open: boolean;
+    /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
+    size: LyraSelectSize;
     private activeIndex;
     private options;
     private touched;
@@ -65,6 +82,7 @@ export declare class LyraSelect extends LyraElement {
     private hasErrorSlot;
     private hasLabelSlot;
     private internals;
+    private _fieldsetDisabled;
     private listId;
     private triggerId;
     private cleanup?;
@@ -74,21 +92,47 @@ export declare class LyraSelect extends LyraElement {
     private _defaultCaptured;
     private typeAheadBuffer;
     private typeAheadTimer?;
+    private _name;
     constructor();
     connectedCallback(): void;
     protected willUpdate(): void;
+    get name(): string;
+    set name(next: string);
     /** The selected value: a single string (empty when nothing is selected). */
     get value(): string;
     set value(next: string);
     private updateValidity;
     private syncFormValue;
+    /** 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(): boolean;
     formResetCallback(): void;
+    /**
+     * 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: boolean): void;
     checkValidity(): boolean;
     reportValidity(): boolean;
     disconnectedCallback(): void;
     private collectOptions;
     private reflectSelected;
+    /**
+     * The sole navigable (non-disabled) option, when there's exactly one. Opening a one-row
+     * popup to pick the only available choice is pure friction with no real decision behind
+     * it, so a single-option select skips the popup entirely -- see `onTriggerClick`/`onKeyDown`,
+     * which commit this option directly on activation instead of opening the listbox, and
+     * `render()`, which drops the popup-trigger ARIA semantics (`role="combobox"`,
+     * `aria-haspopup`, `aria-expanded`, the chevron) in favor of a plain button's, since no
+     * popup can ever appear while this getter returns a value. Does not affect `value`/
+     * validity defaults in any way -- an unselected single-option select stays unselected
+     * until the trigger is actually activated, exactly like the multi-option case.
+     */
+    private get onlyOption();
+    private onOptionChange;
     private show;
     private hide;
     private onDocPointer;

package/dist/components/select/select.js

@@ -4,7 +4,7 @@ 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';
@@ -33,6 +33,17 @@ import '../combobox/option.js';
  * "active" row is conveyed via `aria-activedescendant`, never actual focus),
  * matching the WAI-ARIA "select-only combobox" pattern.
  *
+ * When exactly one option is enabled (regardless of how many disabled ones
+ * exist alongside it), the popup never opens at all: a click, Enter, Space,
+ * ArrowDown, or ArrowUp on the trigger commits that sole option directly,
+ * and the trigger renders as a plain `role="button"` with no chevron/
+ * `aria-haspopup`/`aria-expanded` rather than a combobox with a permanently
+ * inert popup state — opening a one-row list to pick the only available
+ * choice is pure friction with no real decision behind it. This never
+ * changes `value`/validity defaults on its own — an unselected single-option
+ * select stays unselected (and a `required` one stays invalid) exactly like
+ * the multi-option case, until the trigger is actually activated.
+ *
  * @customElement lyra-select
  * @slot - `<lyra-option>` elements.
  * @slot label - Custom label content.
@@ -60,17 +71,19 @@ export class LyraSelect extends LyraElement {
     static { this.styles = [LyraElement.styles, styles]; }
     static { this.properties = {
         value: { noAccessor: true },
+        name: { reflect: true, noAccessor: true },
     }; }
     constructor() {
         super();
         this.placeholder = '';
         this.disabled = false;
         this.required = false;
-        this.name = '';
         this.label = '';
         this.hint = '';
         this.errorText = '';
         this.open = false;
+        /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
+        this.size = 'm';
         this.activeIndex = -1;
         this.options = [];
         // Set on the trigger button's first `blur`; gates the `data-invalid`
@@ -83,6 +96,11 @@ export class LyraSelect extends LyraElement {
         this.hasHintSlot = false;
         this.hasErrorSlot = false;
         this.hasLabelSlot = false;
+        // Tracked separately from the consumer's own `disabled` -- a native
+        // `<input>`'s own `disabled` IDL property/attribute is never mutated by
+        // fieldset cascading, so a consumer's explicit `disabled` must survive the
+        // fieldset re-enabling (see `formDisabledCallback` below).
+        this._fieldsetDisabled = false;
         this.listId = nextId('select-list');
         this.triggerId = nextId('select-trigger');
         this._isFirstUpdate = true;
@@ -99,6 +117,15 @@ export class LyraSelect extends LyraElement {
         // buffer and reset ~500ms after the last one, so "b" then "a" narrows to
         // "ba" instead of restarting the search on every keystroke.
         this.typeAheadBuffer = '';
+        // Hand-written accessor (mirrors the `value` accessor below, and Task 2's
+        // `FormAssociated.name` in `../../internal/form-associated.ts`): a
+        // form-associated custom element's submitted entry name is resolved by the
+        // browser from the live `name` *content attribute*, read synchronously at
+        // FormData-construction/submit time (see `syncFormValue()` below) -- Lit's
+        // async (microtask-deferred) `reflect: true` alone would leave a
+        // property-only assignment like `el.name = 'b'` invisible to a same-tick
+        // `new FormData(form)`/submit, so the attribute write happens here instead.
+        this._name = '';
         this.collectOptions = (e) => {
             const slot = e.target;
             const previous = new Set(this.options);
@@ -135,13 +162,24 @@ export class LyraSelect extends LyraElement {
             }
             this.reflectSelected();
         };
+        // Fired by `option.ts`'s `lyra-option-change` (a MutationObserver on the
+        // option's own light-DOM content/attributes) when an already-slotted
+        // `<lyra-option>` mutates its own data in place -- `collectOptions()` only
+        // re-runs on `slotchange`, which never fires for such a mutation, so
+        // without this the rendered listbox row would go stale. Reassigning (not
+        // mutating) `options` gives Lit a new array reference to diff against.
+        this.onOptionChange = () => {
+            this.options = [...this.options];
+        };
         this.onDocPointer = (e) => {
             if (!e.composedPath().includes(this))
                 this.hide();
         };
         this.onTriggerClick = () => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
+            if (this.onlyOption)
+                return this.selectOption(this.onlyOption);
             this.open ? this.hide() : this.show();
         };
         this.onTriggerBlur = () => {
@@ -166,12 +204,16 @@ export class LyraSelect extends LyraElement {
             switch (e.key) {
                 case 'ArrowDown':
                     e.preventDefault();
+                    if (this.onlyOption)
+                        return this.selectOption(this.onlyOption);
                     if (!this.open)
                         return this.show();
                     this.activeIndex = Math.min(navigable.length - 1, this.activeIndex + 1);
                     break;
                 case 'ArrowUp':
                     e.preventDefault();
+                    if (this.onlyOption)
+                        return this.selectOption(this.onlyOption);
                     if (!this.open)
                         return this.show();
                     this.activeIndex = Math.max(0, this.activeIndex - 1);
@@ -251,6 +293,20 @@ export class LyraSelect extends LyraElement {
             this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
         }
     }
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
     /** The selected value: a single string (empty when nothing is selected). */
     get value() {
         return this._selected;
@@ -274,11 +330,24 @@ export class LyraSelect extends LyraElement {
     syncFormValue() {
         this.internals.setFormValue(this._selected);
     }
+    /** Effective disabled state: this element's own `disabled` OR an ancestor
+     *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
+     *  own `disabled` IDL property/attribute is never mutated by a fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
     formResetCallback() {
         this.value = this._defaultSelected;
     }
+    /**
+     * 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;
+        this.requestUpdate();
     }
     checkValidity() {
         return this.internals.checkValidity();
@@ -289,15 +358,37 @@ export class LyraSelect extends LyraElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.cleanup?.();
+        this.cleanup = undefined;
         clearTimeout(this.typeAheadTimer);
         document.removeEventListener('pointerdown', this.onDocPointer);
+        // Reset so a reconnect (e.g. a drag-drop reparent) re-triggers
+        // `updated()`'s `open`-driven branch -- without this, `open` stays
+        // `true` across the disconnect/reconnect and `changed.has('open')` never
+        // fires again, leaving the listbox rendered open with no positioning and
+        // no outside-click listener.
+        this.open = false;
     }
     reflectSelected() {
         for (const o of this.options)
             o.selected = o.value === this._selected;
     }
+    /**
+     * The sole navigable (non-disabled) option, when there's exactly one. Opening a one-row
+     * popup to pick the only available choice is pure friction with no real decision behind
+     * it, so a single-option select skips the popup entirely -- see `onTriggerClick`/`onKeyDown`,
+     * which commit this option directly on activation instead of opening the listbox, and
+     * `render()`, which drops the popup-trigger ARIA semantics (`role="combobox"`,
+     * `aria-haspopup`, `aria-expanded`, the chevron) in favor of a plain button's, since no
+     * popup can ever appear while this getter returns a value. Does not affect `value`/
+     * validity defaults in any way -- an unselected single-option select stays unselected
+     * until the trigger is actually activated, exactly like the multi-option case.
+     */
+    get onlyOption() {
+        const navigable = this.options.filter((o) => !o.disabled);
+        return navigable.length === 1 ? navigable[0] : undefined;
+    }
     show() {
-        if (this.open || this.disabled)
+        if (this.open || this.effectiveDisabled)
             return;
         this.open = true;
     }
@@ -424,6 +515,12 @@ export class LyraSelect 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;
+        // A single navigable option has no popup to expand into -- the trigger commits it
+        // directly on activation (see onTriggerClick/onKeyDown) instead of opening the listbox,
+        // so it's exposed as a plain button rather than a combobox with a permanently-closed
+        // popup: no aria-haspopup/aria-expanded/aria-controls/aria-activedescendant (all
+        // meaningless without a popup that can ever appear) and no chevron.
+        const isSingleOption = navigable.length === 1;
         return html `
       <div part="form-control">
         <label part="form-control-label" for=${this.triggerId} ?hidden=${!hasLabel}>
@@ -433,15 +530,15 @@ export class LyraSelect extends LyraElement {
           id=${this.triggerId}
           part="trigger"
           type="button"
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded=${this.open ? 'true' : 'false'}
-          aria-controls=${this.listId}
-          aria-activedescendant=${activeId}
-          aria-label=${this.label || this.placeholder || 'Select'}
+          role=${isSingleOption ? 'button' : 'combobox'}
+          aria-haspopup=${isSingleOption ? nothing : 'listbox'}
+          aria-expanded=${isSingleOption ? nothing : this.open ? 'true' : 'false'}
+          aria-controls=${isSingleOption ? nothing : this.listId}
+          aria-activedescendant=${isSingleOption ? nothing : activeId}
+          aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Select')}
           aria-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.onKeyDown}
           @blur=${this.onTriggerBlur}
@@ -449,7 +546,7 @@ export class LyraSelect extends LyraElement {
           <span class="trigger-label" ?data-placeholder=${!hasValue}
             >${hasValue ? selectedLabel : this.placeholder}</span
           >
-          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+          ${isSingleOption ? nothing : html `<span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>`}
         </button>
         <div
           part="listbox"
@@ -467,7 +564,7 @@ export class LyraSelect extends LyraElement {
           ${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>
     `;
     }
 }
@@ -480,9 +577,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraSelect.prototype, "required", void 0);
-__decorate([
-    property()
-], LyraSelect.prototype, "name", void 0);
 __decorate([
     property()
 ], LyraSelect.prototype, "label", void 0);
@@ -495,6 +589,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraSelect.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSelect.prototype, "size", void 0);
 __decorate([
     state()
 ], LyraSelect.prototype, "activeIndex", void 0);

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

@@ -2,6 +2,29 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
+    --lyra-select-trigger-padding: var(--lyra-space-xs) var(--lyra-space-s);
+    --lyra-select-trigger-min-height: 2.5rem;
+    --lyra-select-font-size: 1rem;
+  }
+  :host([size='xs']) {
+    --lyra-select-trigger-padding: 0.125rem var(--lyra-space-xs);
+    --lyra-select-trigger-min-height: 1.5rem;
+    --lyra-select-font-size: 0.75rem;
+  }
+  :host([size='s']) {
+    --lyra-select-trigger-padding: var(--lyra-space-xs) var(--lyra-space-xs);
+    --lyra-select-trigger-min-height: 1.875rem;
+    --lyra-select-font-size: 0.8125rem;
+  }
+  :host([size='l']) {
+    --lyra-select-trigger-padding: var(--lyra-space-s) var(--lyra-space-m);
+    --lyra-select-trigger-min-height: 3rem;
+    --lyra-select-font-size: 1.125rem;
+  }
+  :host([size='xl']) {
+    --lyra-select-trigger-padding: var(--lyra-space-m) var(--lyra-space-l);
+    --lyra-select-trigger-min-height: 3.5rem;
+    --lyra-select-font-size: 1.25rem;
   }
   [part='form-control-label'] {
     display: block;
@@ -30,13 +53,14 @@ export const styles = css `
     justify-content: space-between;
     gap: var(--lyra-space-xs);
     inline-size: 100%;
-    min-block-size: 2.5rem;
-    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    min-block-size: var(--lyra-select-trigger-min-height);
+    padding: var(--lyra-select-trigger-padding);
     border: 1px solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: inherit;
     font: inherit;
+    font-size: var(--lyra-select-font-size);
     text-align: start;
     cursor: pointer;
   }

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,89 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+declare const LyraSlider_base: typeof LyraElement & (new (...args: any[]) => import("../../internal/form-associated.js").FormAssociatedInterface);
+/**
+ * `<lyra-slider>` — a numeric range control (e.g. an LLM "temperature"
+ * setting), form-associated. Mirrors native `<input type="range">`
+ * semantics: `value` is the string form-submitted via `FormAssociated`,
+ * `valueAsNumber` is the ergonomic numeric accessor (mirroring the native
+ * `<input type=range>` IDL attribute of the same name) kept in sync with it
+ * in both directions — reads parse `value`, writes stringify back to it.
+ *
+ * Unlike the mixin's other consumers, an unset `value` is eagerly defaulted
+ * — on connect, and again after `form.reset()` — to the midpoint of
+ * `[min, max]` snapped to `step`, the same "range sanitization algorithm"
+ * default a native range input applies. A slider always represents *some*
+ * number, so `required` (inherited from `FormAssociated`) only has a window
+ * to block submission before that default lands, matching how `required`
+ * isn't a meaningful constraint on a native range input either.
+ *
+ * @customElement lyra-slider
+ * @event lyra-input - Fired continuously during an active drag or a
+ *   keyboard step (including OS key-repeat while a key is held), mirroring
+ *   native `<input type=range>`'s own `input` event. `detail: { value: number }`.
+ * @event lyra-change - Fired once an interaction commits: on pointerup for a
+ *   drag, or on keyup for a keyboard step — so a single Arrow/Home/End/
+ *   PageUp/PageDown press fires both `lyra-input` and `lyra-change`,
+ *   mirroring how native `<input type=range>` fires `change` on every
+ *   committed step too. `detail: { value: number }`.
+ * @csspart base - The row wrapping the track and the optional value readout.
+ * @csspart track - The full-width background line.
+ * @csspart fill - The filled portion of the track from `min` up to the current value.
+ * @csspart thumb - The draggable handle (`role="slider"`).
+ * @csspart value - The visible numeric readout, rendered when `show-value` is true.
+ */
+export declare class LyraSlider extends LyraSlider_base {
+    static styles: import("lit").CSSResultGroup[];
+    min: number;
+    max: number;
+    step: number;
+    /** Accessible name for the slider, used when no visible label context
+     *  exists around it (e.g. no wrapping `<label>` or adjacent heading). Set
+     *  as `aria-label` on the interactive `role="slider"` element. A plain
+     *  `aria-label` attribute on the host itself is honored as a fallback when
+     *  this is left unset, matching `<lyra-checkbox>`/`<lyra-switch>`. */
+    label: string;
+    /** Whether to render the current numeric value as visible text next to
+     *  the track. Like `<lyra-markdown>`'s `sanitize`/`gfm`, this is a plain
+     *  `type: Boolean` property defaulting `true` — turn it off via the
+     *  `.showValue=${false}` property binding (a bare `show-value="false"`
+     *  content attribute is still truthy, since presence is all Lit's default
+     *  boolean converter checks). */
+    showValue: boolean;
+    private activePointers;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The numeric counterpart of `value`, mirroring native `<input
+     *  type=range>.valueAsNumber`. Reading always returns a finite, clamped,
+     *  step-snapped number — even if `value` is momentarily `""` (e.g. right
+     *  after `form.reset()` restores an undeclared default) — by falling back
+     *  to the midpoint of `[min, max]`. Writing stringifies the clamped result
+     *  back into `value`. */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /** If `value` is still unset, seed it with the sanitized default — the
+     *  midpoint of `[min, max]`, snapped to `step` — so `value`/`valueAsNumber`
+     *  and rendering never have to treat "" as a real, distinct state. */
+    private ensureValue;
+    private domain;
+    private defaultNumericValue;
+    private percentOf;
+    private clampValue;
+    private formatValue;
+    private setValue;
+    private onKeyDown;
+    private onKeyUp;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
+    private endDrag;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-slider': LyraSlider;
+    }
+}
+export {};