@aceshooting/lyra-ui 1.0.1 → 1.2.0

package/dist/components/playback/playback.js

@@ -16,8 +16,8 @@ import { styles } from './playback.styles.js';
  * play-timers in time-series dashboards.
  *
  * @customElement lyra-playback
- * @event lyra-play
- * @event lyra-pause
+ * @event lyra-play - Fired when playback starts.
+ * @event lyra-pause - Fired when playback stops (including auto-pause).
  * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
  * @csspart base, play-button, slider
  */
@@ -39,6 +39,10 @@ export class LyraPlayback extends LyraElement {
         this.hidden = false;
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    /** Largest index reachable at the current `length` (never negative). */
+    get maxIndex() {
+        return Math.max(0, this.length - 1);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.pause();
@@ -46,12 +50,18 @@ export class LyraPlayback extends LyraElement {
     willUpdate(changed) {
         if (changed.has('hidden') && this.hidden)
             this.pause();
-        // If length is externally reduced to <= 1 while playing, the timer would
-        // otherwise keep firing forever — and the play button (the only control
-        // that could stop it) becomes ?disabled at that point, leaving no way to
-        // stop it from the rendered UI.
-        if (changed.has('length') && this.length <= 1)
-            this.pause();
+        if (changed.has('length')) {
+            // If length is externally reduced to <= 1 while playing, the timer
+            // would otherwise keep firing forever — and the play button (the only
+            // control that could stop it) becomes ?disabled at that point, leaving
+            // no way to stop it from the rendered UI.
+            if (this.length <= 1)
+                this.pause();
+            // Re-clamp `index` into the new `[0, length)` range on any shrink, not
+            // just the <= 1 case above, so it never lingers out of bounds.
+            if (this.index > this.maxIndex)
+                this.index = this.maxIndex;
+        }
     }
     /** Start playback; no-op if there's nothing to advance through. */
     play() {
@@ -59,20 +69,33 @@ export class LyraPlayback extends LyraElement {
             return;
         this.playing = true;
         this.emit('lyra-play');
-        this.timer = window.setInterval(() => this.tick(), this.intervalMs);
+        this.scheduleTick();
     }
     /** Stop playback. */
     pause() {
         if (!this.playing)
             return;
-        window.clearInterval(this.timer);
+        window.clearTimeout(this.timer);
         this.timer = undefined;
         this.playing = false;
         this.emit('lyra-pause');
     }
+    /** Toggle between playing and paused. */
     toggle() {
         this.playing ? this.pause() : this.play();
     }
+    // A self-rescheduling `setTimeout` (rather than one long-lived
+    // `setInterval`) so `intervalMs` is re-read fresh before every tick, the
+    // same way `tick()` already re-reads `this.loop` on every fire — changing
+    // `interval-ms` live takes effect on the very next step instead of only
+    // after a pause/play cycle.
+    scheduleTick() {
+        this.timer = window.setTimeout(() => {
+            this.tick();
+            if (this.playing)
+                this.scheduleTick();
+        }, this.intervalMs);
+    }
     tick() {
         const next = this.index + 1;
         if (next >= this.length) {
@@ -104,7 +127,7 @@ export class LyraPlayback extends LyraElement {
     /** Jump to an explicit index, pausing playback. */
     goTo(index) {
         this.pause();
-        this.setIndex(Math.min(this.length - 1, Math.max(0, index)));
+        this.setIndex(Math.min(this.maxIndex, Math.max(0, index)));
     }
     render() {
         return html `
@@ -122,9 +145,10 @@ export class LyraPlayback extends LyraElement {
           part="slider"
           type="range"
           min="0"
-          max=${Math.max(0, this.length - 1)}
+          max=${this.maxIndex}
           .value=${String(this.index)}
           aria-label="Playback position"
+          ?disabled=${this.length <= 1}
           @input=${(e) => this.goTo(Number(e.target.value))}
         />
       </div>

package/dist/components/playback/playback.stories.d.ts

@@ -3,3 +3,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+export declare const NoLoop: Story;
+export declare const SingleFrame: Story;

package/dist/components/playback/playback.stories.js

@@ -8,3 +8,9 @@ export default meta;
 export const Default = {
     render: () => html `<lyra-playback length="10" interval-ms="500" loop></lyra-playback>`,
 };
+export const NoLoop = {
+    render: () => html `<lyra-playback length="10" interval-ms="500" .loop=${false}></lyra-playback>`,
+};
+export const SingleFrame = {
+    render: () => html `<lyra-playback length="1"></lyra-playback>`,
+};

package/dist/components/playback/playback.styles.js

@@ -11,8 +11,8 @@ export const styles = css `
     gap: var(--lyra-space-s);
   }
   [part='play-button'] {
-    inline-size: 2rem;
-    block-size: 2rem;
+    inline-size: var(--lyra-icon-button-size);
+    block-size: var(--lyra-icon-button-size);
     border-radius: 50%;
     border: 1px solid var(--lyra-color-border);
     background: var(--lyra-color-surface);
@@ -37,4 +37,12 @@ export const styles = css `
   [part='slider'] {
     accent-color: var(--lyra-color-brand);
   }
+  [part='slider']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='slider']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
 `;

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

@@ -0,0 +1,125 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../combobox/option.js';
+/**
+ * `<lyra-select>` — a plain closed-list dropdown: a direct `<lyra-*>`
+ * counterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text
+ * input) -- click/Enter/Space/ArrowDown opens it, there's no typing-to-filter.
+ * A printable keypress instead jumps (or, while closed, directly selects) the
+ * next option whose label starts with what's been typed, like a native
+ * `<select>`'s type-ahead.
+ *
+ * Options are `<lyra-option value>` children, the same element `<lyra-combobox>`
+ * uses. Unlike `lyra-combobox` this is single-select only, with no filter/
+ * source/with-clear/max-options-visible/empty-text/max-render/multiple surface
+ * -- see `<lyra-combobox>` for the filterable/multi-select case.
+ *
+ * Reuses `lyra-combobox`'s popup positioning (`internal/positioner.js`) and
+ * click-outside/Escape/Home/End/Arrow-key listbox navigation patterns,
+ * adapted to a trigger button that keeps DOM focus throughout (the listbox's
+ * "active" row is conveyed via `aria-activedescendant`, never actual focus),
+ * matching the WAI-ARIA "select-only combobox" pattern.
+ *
+ * @customElement lyra-select
+ * @slot - `<lyra-option>` elements.
+ * @slot label - Custom label content.
+ * @slot hint - Custom hint content.
+ * @slot error - Custom error content.
+ * @event change - The selection changed.
+ * @event input - Fired alongside `change` on every selection change (native
+ *   `<select>` doesn't meaningfully distinguish the two either).
+ * @event lyra-show - The listbox opened.
+ * @event lyra-hide - The listbox closed.
+ * @csspart form-control - The outer wrapper around label, trigger, listbox, error and hint.
+ * @csspart form-control-label - The `<label>` element.
+ * @csspart trigger - The trigger button (positioning anchor).
+ * @csspart listbox - The options popover.
+ * @csspart option - An option row.
+ * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
+ * @csspart option-label - An option row's label/sub wrapper.
+ * @csspart option-sub - An option row's secondary line (when `sub` is set).
+ * @csspart expand-icon - The dropdown indicator.
+ * @csspart error - The error message.
+ * @csspart hint - The hint message.
+ */
+export type LyraSelectSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export declare class LyraSelect extends LyraElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        value: {
+            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;
+    private hasHintSlot;
+    private hasErrorSlot;
+    private hasLabelSlot;
+    private internals;
+    private listId;
+    private triggerId;
+    private cleanup?;
+    private _isFirstUpdate;
+    private _selected;
+    private _defaultSelected;
+    private _defaultCaptured;
+    private typeAheadBuffer;
+    private typeAheadTimer?;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    /** The selected value: a single string (empty when nothing is selected). */
+    get value(): string;
+    set value(next: string);
+    private updateValidity;
+    private syncFormValue;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    disconnectedCallback(): void;
+    private collectOptions;
+    private reflectSelected;
+    private show;
+    private hide;
+    private onDocPointer;
+    protected updated(changed: PropertyValues): void;
+    private selectOption;
+    private onTriggerClick;
+    private onTriggerBlur;
+    private onHintSlotChange;
+    private onErrorSlotChange;
+    private onLabelSlotChange;
+    /**
+     * Standard listbox type-ahead: moves to the next non-disabled option whose
+     * label starts with the accumulated buffer, cycling from just after the
+     * "current" option (the active row while open, the selected value while
+     * closed). While open this only moves `activeIndex` (a highlight, matching
+     * Arrow-key nav -- Enter/click still commits it); while closed there's no
+     * highlight to show, so it commits immediately, matching a native
+     * `<select>`'s closed-state type-ahead.
+     */
+    private typeAhead;
+    private onKeyDown;
+    private onListboxMouseDown;
+    private onListboxClick;
+    private renderRows;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-select': LyraSelect;
+    }
+}