@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/select/select.js

@@ -11,6 +11,7 @@ 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 './select.styles.js';
 import { LyraOption } from '../combobox/option.js';
 import '../combobox/option.js';
@@ -33,16 +34,21 @@ 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.
+ * When `autoCommitSingleOption` is set and 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. `autoCommitSingleOption` defaults to `false`: by
+ * default a select always renders the normal combobox/listbox/chevron
+ * trigger no matter how many options are enabled, matching pre-1.3.0
+ * behavior — opt in explicitly if a narrowing-to-one option list should
+ * auto-commit.
  *
  * @customElement lyra-select
  * @slot - `<lyra-option>` elements.
@@ -70,20 +76,30 @@ export class LyraSelect 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();
         this.placeholder = '';
-        this.disabled = false;
-        this.required = false;
         this.label = '';
         this.hint = '';
         this.errorText = '';
         this.open = false;
         /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
         this.size = 'm';
+        /**
+         * Opt-in: when `true` and exactly one `<lyra-option>` is enabled, the
+         * trigger commits that option directly (click/Enter/Space/ArrowDown/
+         * ArrowUp) instead of opening the listbox, and renders as a plain
+         * `role="button"` with no chevron. Defaults to `false`, which always
+         * renders the normal combobox/listbox/chevron trigger regardless of how
+         * many options are enabled — the pre-1.3.0 behavior. See the class doc
+         * above and `onlyOption` below for the full rationale.
+         */
+        this.autoCommitSingleOption = false;
         this.activeIndex = -1;
         this.options = [];
         // Set on the trigger button's first `blur`; gates the `data-invalid`
@@ -105,6 +121,8 @@ export class LyraSelect extends LyraElement {
         this.triggerId = nextId('select-trigger');
         this._isFirstUpdate = true;
         this._selected = '';
+        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>`) --
@@ -113,6 +131,9 @@ export class LyraSelect extends LyraElement {
         // the reset default. See lyra-combobox's identical `_defaultSelected`.
         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;
         // Standard listbox type-ahead: printable keystrokes accumulate into this
         // buffer and reset ~500ms after the last one, so "b" then "a" narrows to
         // "ba" instead of restarting the search on every keystroke.
@@ -143,7 +164,7 @@ export class LyraSelect extends LyraElement {
                 // the reset default.
                 const declared = this.options.filter((o) => o.selected).map((o) => o.value);
                 this._defaultSelected = declared[0] ?? '';
-                if (declared.length) {
+                if (declared.length && !this._restoredStateActive) {
                     this.value = declared[0];
                     return; // `value=`'s setter already called reflectSelected()
                 }
@@ -155,7 +176,7 @@ export class LyraSelect extends LyraElement {
                 // into the live selection instead of letting reflectSelected() below
                 // strip its `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 = newlySelected[newlySelected.length - 1];
                     return; // `value=`'s setter already called reflectSelected()
                 }
@@ -276,6 +297,27 @@ export class LyraSelect extends LyraElement {
                 this.selectOption(option);
         };
         this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        this.syncFormValue();
+    }
+    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"]') ?? null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -307,12 +349,34 @@ export class LyraSelect extends LyraElement {
         }
         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);
+    }
     /** The selected value: a single string (empty when nothing is selected). */
     get value() {
         return this._selected;
     }
     set value(next) {
         const old = this._selected;
+        this._restoredStateActive = false;
         this._selected = next ?? '';
         this.syncFormValue();
         this.reflectSelected();
@@ -321,10 +385,10 @@ export class LyraSelect extends LyraElement {
     }
     updateValidity() {
         if (this.required && !this._selected) {
-            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() {
@@ -339,6 +403,10 @@ export class LyraSelect extends LyraElement {
     formResetCallback() {
         this.value = this._defaultSelected;
     }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+        this._restoredStateActive = true;
+    }
     /**
      * Called by the browser when an ancestor `<fieldset disabled>` toggles.
      * Tracked separately from the consumer's own `disabled` (see
@@ -347,6 +415,8 @@ export class LyraSelect extends LyraElement {
      */
     formDisabledCallback(disabled) {
         this._fieldsetDisabled = disabled;
+        if (disabled)
+            this.hide();
         this.requestUpdate();
     }
     checkValidity() {
@@ -373,17 +443,21 @@ export class LyraSelect extends LyraElement {
             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
+     * The sole navigable (non-disabled) option, when `autoCommitSingleOption` is set and
+     * 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 an opted-in 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.
+     * Returns `undefined` whenever `autoCommitSingleOption` is `false` (the default), regardless
+     * of option count, so the normal combobox trigger renders unconditionally. 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() {
+        if (!this.autoCommitSingleOption)
+            return undefined;
         const navigable = this.options.filter((o) => !o.disabled);
         return navigable.length === 1 ? navigable[0] : undefined;
     }
@@ -425,19 +499,26 @@ export class LyraSelect extends LyraElement {
                     this.emit('lyra-hide');
             }
         }
-        if (changed.has('required'))
-            this.updateValidity();
         if (changed.has('touched') || changed.has('required') || changed.has('value')) {
             this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
         }
     }
     selectOption(option) {
-        if (option.disabled)
+        if (this.effectiveDisabled || option.disabled)
             return;
+        // Reopening the listbox (or, on a single-option select, simply
+        // reactivating the trigger) and landing back on the already-selected
+        // row is not a selection change -- `change`/`input` are documented as
+        // firing when "the selection changed", so only emit them when the
+        // value actually moves, matching a native <select> (which never fires
+        // `change` for re-picking the currently-selected <option>).
+        const changed = option.value !== this._selected;
         this.value = option.value;
         this.hide();
-        this.emit('input');
-        this.emit('change');
+        if (changed) {
+            this.emit('input');
+            this.emit('change');
+        }
     }
     /**
      * Standard listbox type-ahead: moves to the next non-disabled option whose
@@ -515,12 +596,15 @@ 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;
+        const describedBy = [hasError ? 'select-error' : '', hasHint ? 'select-hint' : ''].filter(Boolean).join(' ');
+        // A single navigable option has no popup to expand into -- when opted in via
+        // autoCommitSingleOption, 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. Without the opt-in (the default), this is always
+        // `false` and the normal combobox/listbox/chevron trigger renders regardless of option count.
+        const isSingleOption = this.autoCommitSingleOption && navigable.length === 1;
         return html `
       <div part="form-control">
         <label part="form-control-label" for=${this.triggerId} ?hidden=${!hasLabel}>
@@ -536,6 +620,7 @@ export class LyraSelect extends LyraElement {
           aria-controls=${isSingleOption ? nothing : this.listId}
           aria-activedescendant=${isSingleOption ? nothing : activeId}
           aria-label=${this.getAttribute('aria-label') || (hasLabel ? nothing : this.placeholder || 'Select')}
+          aria-describedby=${describedBy || nothing}
           aria-required=${this.required ? 'true' : 'false'}
           aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
           ?disabled=${this.effectiveDisabled}
@@ -557,10 +642,10 @@ export class LyraSelect extends LyraElement {
         >
           ${this.renderRows(options, activeId)}
         </div>
-        <div part="error" ?hidden=${!hasError}>
+        <div id="select-error" part="error" ?hidden=${!hasError}>
           ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
         </div>
-        <div part="hint" ?hidden=${!hasHint}>
+        <div id="select-hint" part="hint" ?hidden=${!hasHint}>
           ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
         </div>
       </div>
@@ -571,12 +656,6 @@ export class LyraSelect extends LyraElement {
 __decorate([
     property()
 ], LyraSelect.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraSelect.prototype, "required", void 0);
 __decorate([
     property()
 ], LyraSelect.prototype, "label", void 0);
@@ -592,6 +671,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], LyraSelect.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-commit-single-option' })
+], LyraSelect.prototype, "autoCommitSingleOption", void 0);
 __decorate([
     state()
 ], LyraSelect.prototype, "activeIndex", void 0);

package/dist/components/skeleton/skeleton.d.ts

@@ -15,6 +15,9 @@ export declare class LyraSkeleton extends LyraElement {
     effect: SkeletonEffect;
     width?: string;
     height?: string;
+    /** Accessible name announced via `role="status"`. Override with a
+     *  description of what is actually loading (e.g. "Loading chart"). */
+    label: string;
     protected willUpdate(): void;
     protected updated(changed: PropertyValues): void;
     render(): TemplateResult;

package/dist/components/skeleton/skeleton.js

@@ -22,6 +22,9 @@ export class LyraSkeleton extends LyraElement {
         super(...arguments);
         this.variant = 'text';
         this.effect = 'pulse';
+        /** Accessible name announced via `role="status"`. Override with a
+         *  description of what is actually loading (e.g. "Loading chart"). */
+        this.label = 'Loading…';
     }
     static { this.styles = [LyraElement.styles, styles, srOnly]; }
     willUpdate() {
@@ -44,7 +47,7 @@ export class LyraSkeleton extends LyraElement {
         }
     }
     render() {
-        return html `<span part="base"><span class="sr-only">Loading…</span></span>`;
+        return html `<span part="base"><span class="sr-only">${this.label}</span></span>`;
     }
 }
 __decorate([
@@ -59,4 +62,7 @@ __decorate([
 __decorate([
     property()
 ], LyraSkeleton.prototype, "height", void 0);
+__decorate([
+    property()
+], LyraSkeleton.prototype, "label", void 0);
 defineElement('skeleton', LyraSkeleton);

package/dist/components/skeleton/skeleton.styles.js

@@ -10,15 +10,13 @@ export const styles = css `
     block-size: 100%;
     background: var(--lyra-color-border);
   }
-  :host([variant='text']) [part='base'] {
+  :host([variant='text']) [part='base'],
+  :host([variant='rect']) [part='base'] {
     border-radius: var(--lyra-radius);
   }
   :host([variant='circle']) [part='base'] {
     border-radius: 50%;
   }
-  :host([variant='rect']) [part='base'] {
-    border-radius: var(--lyra-radius);
-  }
   :host([effect='pulse']) [part='base'] {
     animation: lyra-skeleton-pulse 1.5s ease-in-out infinite;
   }
@@ -53,5 +51,8 @@ export const styles = css `
     [part='base'] {
       animation: none !important;
     }
+    :host([effect='sheen']) [part='base'] {
+      background-image: none;
+    }
   }
 `;

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

@@ -1,4 +1,4 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
+import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 declare const LyraSlider_base: typeof LyraElement & (new (...args: any[]) => import("../../internal/form-associated.js").FormAssociatedInterface);
 /**
@@ -17,6 +17,10 @@ declare const LyraSlider_base: typeof LyraElement & (new (...args: any[]) => imp
  * to block submission before that default lands, matching how `required`
  * isn't a meaningful constraint on a native range input either.
  *
+ * Clicking anywhere on the track (not just the 16px thumb) jumps the thumb
+ * to that point and continues the same gesture as a drag, matching native
+ * `<input type=range>` click-to-seek.
+ *
  * @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
@@ -34,9 +38,30 @@ declare const LyraSlider_base: typeof LyraElement & (new (...args: any[]) => imp
  */
 export declare class LyraSlider extends LyraSlider_base {
     static styles: import("lit").CSSResultGroup[];
-    min: number;
-    max: number;
-    step: number;
+    static properties: {
+        min: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+        step: {
+            type: NumberConstructor;
+            noAccessor: boolean;
+        };
+    };
+    private _min;
+    private _max;
+    private _step;
+    private pendingValue;
+    get min(): number;
+    set min(next: number);
+    get max(): number;
+    set max(next: number);
+    get step(): number;
+    set step(next: 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
@@ -51,6 +76,8 @@ export declare class LyraSlider extends LyraSlider_base {
      *  boolean converter checks). */
     showValue: boolean;
     private activePointers;
+    private changedPointers;
+    private keyboardChanged;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** The numeric counterpart of `value`, mirroring native `<input
@@ -61,10 +88,20 @@ export declare class LyraSlider extends LyraSlider_base {
      *  back into `value`. */
     get valueAsNumber(): number;
     set valueAsNumber(next: number);
+    /**
+     * `FormAssociated` provides the form plumbing; this override adds the
+     * slider's native-range sanitization at the IDL boundary so invalid direct
+     * assignments cannot briefly submit a literal `NaN`/`Infinity`.
+     */
+    get value(): string;
+    set value(next: string);
+    formResetCallback(): void;
     /** 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;
+    /** Re-sanitize an already assigned value immediately after range settings change. */
+    private sanitizeCurrentValue;
     private domain;
     private defaultNumericValue;
     private percentOf;
@@ -73,12 +110,27 @@ export declare class LyraSlider extends LyraSlider_base {
     private setValue;
     private onKeyDown;
     private onKeyUp;
+    /** Start tracking `pointerId` as an active drag, transferring pointer
+     *  capture to `captureTarget` and wiring the shared window-level move/end
+     *  listeners. Shared by a pointerdown that starts on the thumb itself and
+     *  one that starts elsewhere on the track (see `onBasePointerDown`), so
+     *  both gestures continue identically from here on. */
+    private beginDrag;
     private onPointerDown;
+    /** A pointerdown anywhere on `[part="base"]` other than the thumb itself
+     *  (the vast majority of the control's clickable area) jumps the thumb to
+     *  that point and continues the same gesture as a drag, mirroring native
+     *  `<input type=range>` click-to-seek. A pointerdown that started on the
+     *  thumb bubbles up to this same listener too — already fully handled by
+     *  `onPointerDown` above, so it's ignored here via the `e.target === thumb`
+     *  check. Unlike the two-handle `lyra-time-range` (where a track click is
+     *  ambiguous about which handle should move), a single thumb has no such
+     *  ambiguity. */
+    private onBasePointerDown;
     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 {