@aceshooting/lyra-ui 1.0.0 → 1.1.0

package/dist/components/time-range/time-range.js

@@ -4,23 +4,47 @@ 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 } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { isRtl } from '../../internal/rtl.js';
 import { styles } from './time-range.styles.js';
 function isArrowKey(key) {
     return key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowDown';
 }
+/** Keys that onKeyDown acts on and onKeyUp commits after — arrow keys plus
+ *  the WAI-ARIA APG slider pattern's Home/End/PageUp/PageDown shortcuts. */
+function isSliderKey(key) {
+    return isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageUp' || key === 'PageDown';
+}
+/** PageUp/PageDown move by a larger increment than a single ArrowUp/Down
+ *  step, matching the WAI-ARIA APG slider pattern's expected keyboard
+ *  interactions (and native `<input type=range>`). */
+const PAGE_STEP_MULTIPLIER = 10;
+/** Number of decimal digits in `n`'s shortest string representation, e.g.
+ *  `0.1` -> 1, `5` -> 0. Used to round a stepped value back to the precision
+ *  the caller's `step` itself implies, instead of leaving it at whatever
+ *  binary floating-point noise `value / step` happened to produce. */
+function decimalPlaces(n) {
+    const str = n.toString();
+    const dot = str.indexOf('.');
+    return dot === -1 ? 0 : str.length - dot - 1;
+}
 /**
  * `<lyra-time-range>` — a two-handle brush/scrubber over a numeric domain.
  * Callers map their own time axis to `[min, max]`; no date logic lives here
  * (matches the no-date-library constraint used elsewhere in this library).
  *
+ * Optionally paired with a row of discrete presets (`presets`) — e.g. "Last
+ * 7 days" / "Last 30 days" — rendered above the track; picking one is just a
+ * shortcut that sets both handles at once, the continuous brush underneath
+ * is unaffected and both interaction modes coexist.
+ *
  * @customElement lyra-time-range
- * @event lyra-input - Fired continuously while dragging. `detail: { start, end }`.
- * @event lyra-change - Fired on release / keyup-commit. `detail: { start, end }`.
- * @csspart base, track, range, handle-start, handle-end
+ * @event lyra-input - Fired continuously while dragging or on each arrow-key press. `detail: { start, end }`.
+ * @event lyra-change - Fired on release / keyup-commit, or when a preset button is clicked. `detail: { start, end }`.
+ * @csspart base, track, range, handle-start, handle-end, presets, preset-button
  */
 export class LyraTimeRange extends LyraElement {
     constructor() {
@@ -31,7 +55,17 @@ export class LyraTimeRange extends LyraElement {
         this.end = 100;
         this.step = 1;
         this.disabled = false;
-        this.dragging = null;
+        /**
+         * Optional discrete presets rendered as a `[part="presets"]` button row
+         * above the track. Purely additive: leaving this empty (the default)
+         * renders nothing extra and leaves the continuous brush untouched.
+         */
+        this.presets = [];
+        // Keyed by pointerId rather than a single scalar so two concurrent drags
+        // (e.g. a two-finger touch, one per handle) each keep tracking their own
+        // handle instead of the second pointerdown hijacking which handle the
+        // first pointer's subsequent moves apply to.
+        this.drags = new Map();
         this.onKeyDown = (handle, e) => {
             // A handle that already has focus when the component becomes disabled
             // must not still respond to arrow keys (new pointerdowns are already
@@ -41,33 +75,64 @@ export class LyraTimeRange extends LyraElement {
             if (this.disabled)
                 return;
             const current = handle === 'start' ? this.start : this.end;
-            if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            // Mirror the same left/right swap as onPointerMove: under RTL, physical
+            // ArrowRight moves toward inset-inline-start, i.e. a lower value.
+            const rtl = isRtl(this);
+            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            if (e.key === forwardKey || e.key === 'ArrowUp') {
                 e.preventDefault();
                 this.setValue(handle, current + this.step, false);
             }
-            else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            else if (e.key === backwardKey || e.key === 'ArrowDown') {
                 e.preventDefault();
                 this.setValue(handle, current - this.step, false);
             }
+            else if (e.key === 'PageUp') {
+                e.preventDefault();
+                this.setValue(handle, current + this.step * PAGE_STEP_MULTIPLIER, false);
+            }
+            else if (e.key === 'PageDown') {
+                e.preventDefault();
+                this.setValue(handle, current - this.step * PAGE_STEP_MULTIPLIER, false);
+            }
+            else if (e.key === 'Home') {
+                e.preventDefault();
+                this.setValue(handle, this.reachableBounds(handle).min, false);
+            }
+            else if (e.key === 'End') {
+                e.preventDefault();
+                this.setValue(handle, this.reachableBounds(handle).max, false);
+            }
         };
         this.onKeyUp = (e) => {
-            // Only commit on release of the arrow keys that onKeyDown acts on —
-            // releasing an unrelated key (Tab, Shift, ...) while a handle happens
-            // to be focused must not emit a spurious lyra-change.
-            if (this.disabled || !isArrowKey(e.key))
+            // Only commit on release of the keys that onKeyDown acts on — releasing
+            // an unrelated key (Tab, Shift, ...) while a handle happens to be
+            // focused must not emit a spurious lyra-change.
+            if (this.disabled || !isSliderKey(e.key))
                 return;
             this.emit('lyra-change', { start: this.start, end: this.end });
         };
         this.onPointerDown = (handle, e) => {
             if (this.disabled)
                 return;
-            this.dragging = handle;
+            const base = this.renderRoot.querySelector('[part="base"]');
+            this.drags.set(e.pointerId, { handle, base });
             e.target.setPointerCapture(e.pointerId);
             window.addEventListener('pointermove', this.onPointerMove);
             window.addEventListener('pointerup', this.onPointerUp);
+            // A drag can end without a pointerup: a system gesture / palm rejection
+            // can fire `pointercancel`, and losing capture (e.g. element removed)
+            // fires `lostpointercapture` — both need the same teardown as pointerup
+            // or `this.drags` keeps a permanently-stale entry and these window
+            // listeners (and the closure keeping this instance alive) never get
+            // removed. Mirrors lyra-split's identical fix.
+            window.addEventListener('pointercancel', this.onPointerUp);
+            window.addEventListener('lostpointercapture', this.onPointerUp);
         };
         this.onPointerMove = (e) => {
-            if (!this.dragging)
+            const drag = this.drags.get(e.pointerId);
+            if (drag === undefined)
                 return;
             if (this.disabled) {
                 // These are window-level listeners driven by setPointerCapture, so
@@ -78,17 +143,20 @@ export class LyraTimeRange extends LyraElement {
                 // would otherwise keep mutating start/end (and emitting lyra-input)
                 // after `disabled` flips true mid-drag. Abort the drag instead of
                 // continuing to process it.
-                this.endDrag(false);
+                this.endDrag(e.pointerId, false);
                 return;
             }
-            const base = this.renderRoot.querySelector('[part="base"]');
-            const rect = base.getBoundingClientRect();
-            const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+            const rect = drag.base.getBoundingClientRect();
+            const raw = (e.clientX - rect.left) / rect.width;
+            // The track is positioned with inset-inline-start (0% at the visual
+            // right edge under RTL), so the pointer ratio has to mirror that or a
+            // rightward drag would move the handle the wrong way.
+            const ratio = Math.min(1, Math.max(0, isRtl(this) ? 1 - raw : raw));
             const value = this.min + ratio * (this.max - this.min);
-            this.setValue(this.dragging, value, false);
+            this.setValue(drag.handle, value, false);
         };
-        this.onPointerUp = () => {
-            this.endDrag(true);
+        this.onPointerUp = (e) => {
+            this.endDrag(e.pointerId, true);
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
@@ -98,16 +166,76 @@ export class LyraTimeRange extends LyraElement {
         // pointercancel/alt-tab means `pointerup` never reaches `window`), these
         // window-level listeners — and the closure keeping this instance alive —
         // would otherwise leak indefinitely.
+        this.drags.clear();
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('pointercancel', this.onPointerUp);
+        window.removeEventListener('lostpointercapture', this.onPointerUp);
+    }
+    // Both percentOf() and clamp() key off this same lo/hi pair — willUpdate()
+    // already normalizes a caller-supplied `min > max` domain this way, so
+    // rendering and interactive dragging must agree with it instead of
+    // indexing off this.min/this.max directly (which inverts the visuals and
+    // locks dragging to a fixed value when min > max).
+    domain() {
+        // A caller-supplied min/max that fails Number attribute conversion (e.g.
+        // `min="not-a-number"`) arrives here as NaN; Math.min/Math.max would
+        // otherwise propagate that NaN into `lo`/`hi` and poison every
+        // percentOf()/clamp() caller. Mirror lyra-gauge's `ratio` getter, which
+        // short-circuits on isNaN(...) instead, by falling back to this
+        // property's own default.
+        const min = isNaN(this.min) ? 0 : this.min;
+        const max = isNaN(this.max) ? 100 : this.max;
+        return { lo: Math.min(min, max), hi: Math.max(min, max) };
     }
     percentOf(value) {
-        const span = this.max - this.min || 1;
-        return ((value - this.min) / span) * 100;
+        // A NaN `start`/`end` (e.g. an invalid `start` attribute) must not reach
+        // the rendered `inset-inline-start:NaN%` — that's an invalid CSS value
+        // the browser silently drops, leaving the handle stuck with no visible
+        // recovery. 0% is at least a stable, well-defined position.
+        if (isNaN(value))
+            return 0;
+        const { lo, hi } = this.domain();
+        const span = hi - lo || 1;
+        return ((value - lo) / span) * 100;
+    }
+    /** Each handle's actual reachable sub-range, bounded by its sibling
+     *  handle's current value the same way clamp() already enforces it — used
+     *  both for aria-valuemin/aria-valuemax and for Home/End's jump targets,
+     *  instead of reporting/jumping to the component's full [min, max] domain
+     *  which the sibling handle may make partially unreachable. */
+    reachableBounds(handle) {
+        const { lo, hi } = this.domain();
+        // A NaN sibling value (e.g. an invalid `end` attribute) must not leak
+        // into the *other* handle's aria-valuemin/aria-valuemax as a literal
+        // "NaN" — fall back to the domain bound it would otherwise report.
+        const start = isNaN(this.start) ? lo : this.start;
+        const end = isNaN(this.end) ? hi : this.end;
+        return handle === 'start' ? { min: lo, max: end } : { min: start, max: hi };
     }
     clamp(handle, value) {
-        const stepped = Math.round(value / this.step) * this.step;
-        const bounded = Math.min(this.max, Math.max(this.min, stepped));
+        const { lo, hi } = this.domain();
+        // A non-positive or non-finite step (e.g. a transient `step={0}` while a
+        // caller derives it as `(max-min)/tickCount`) would otherwise divide by
+        // zero/NaN below and permanently poison start/end with NaN, since the
+        // other handle's clamp cross-references this one's (already-NaN) value.
+        // Treat it as "unstepped" instead of propagating NaN.
+        const hasStep = Number.isFinite(this.step) && this.step > 0;
+        // Anchor the step grid at the domain's own `lo` (matching native
+        // `<input type=range>`) instead of absolute 0 — otherwise a `min` that
+        // isn't itself a multiple of `step` makes the very first nudge off `min`
+        // jump to the nearest multiple-of-step-from-zero instead of moving by
+        // one `step`. Round the result back to `step`'s own decimal precision
+        // (rather than leaving raw `value / step` binary-float noise in place)
+        // so repeated steps land on exact values like 20.1 instead of
+        // 20.200000000000003.
+        let stepped = value;
+        if (hasStep) {
+            const stepsFromLo = Math.round((value - lo) / this.step);
+            const factor = 10 ** decimalPlaces(this.step);
+            stepped = Math.round((lo + stepsFromLo * this.step) * factor) / factor;
+        }
+        const bounded = Math.min(hi, Math.max(lo, stepped));
         if (handle === 'start')
             return Math.min(bounded, this.end);
         return Math.max(bounded, this.start);
@@ -122,13 +250,42 @@ export class LyraTimeRange extends LyraElement {
         if (commit)
             this.emit('lyra-change', { start: this.start, end: this.end });
     }
-    /** Stop an in-progress drag, optionally committing a final lyra-change. */
-    endDrag(commit) {
-        if (this.dragging && commit)
+    /**
+     * Apply a discrete preset: sets both handles and emits the same
+     * lyra-input/lyra-change pair a committed drag or keyboard step would.
+     */
+    applyPreset(preset) {
+        if (this.disabled)
+            return;
+        // clamp('start', v) pins to <= this.end and clamp('end', v) pins to >=
+        // this.start, cross-referencing the *other* handle's current value. If
+        // the preset shifts the whole range past the old end (or before the old
+        // start), applying setValue() in either order straight away would let
+        // that cross-reference clip the first handle against the stale sibling
+        // before the second call updates it. Widen the working range first —
+        // never narrows anything, just guarantees both setValue() calls below
+        // land on the preset's exact values regardless of direction.
+        this.start = Math.min(this.start, preset.start);
+        this.end = Math.max(this.end, preset.end);
+        this.setValue('start', preset.start, false);
+        this.setValue('end', preset.end, true);
+    }
+    /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
+    endDrag(pointerId, commit) {
+        if (!this.drags.has(pointerId))
+            return;
+        this.drags.delete(pointerId);
+        if (commit)
             this.emit('lyra-change', { start: this.start, end: this.end });
-        this.dragging = null;
-        window.removeEventListener('pointermove', this.onPointerMove);
-        window.removeEventListener('pointerup', this.onPointerUp);
+        // Only the last concurrent drag to end tears down the shared window
+        // listeners — another pointer (e.g. the other finger of a two-finger
+        // drag) may still be down.
+        if (this.drags.size === 0) {
+            window.removeEventListener('pointermove', this.onPointerMove);
+            window.removeEventListener('pointerup', this.onPointerUp);
+            window.removeEventListener('pointercancel', this.onPointerUp);
+            window.removeEventListener('lostpointercapture', this.onPointerUp);
+        }
     }
     willUpdate(changed) {
         if (changed.has('start') ||
@@ -161,7 +318,26 @@ export class LyraTimeRange extends LyraElement {
     render() {
         const startPct = this.percentOf(this.start);
         const endPct = this.percentOf(this.end);
+        const startBounds = this.reachableBounds('start');
+        const endBounds = this.reachableBounds('end');
         return html `
+      ${this.presets.length > 0
+            ? html `<div part="presets">
+            ${this.presets.map((preset) => {
+                const active = preset.start === this.start && preset.end === this.end;
+                return html `<button
+                part="preset-button"
+                type="button"
+                ?disabled=${this.disabled}
+                aria-pressed=${active ? 'true' : 'false'}
+                ?data-active=${active}
+                @click=${() => this.applyPreset(preset)}
+              >
+                ${preset.label}
+              </button>`;
+            })}
+          </div>`
+            : nothing}
       <div part="base">
         <div part="track"></div>
         <div
@@ -173,9 +349,10 @@ export class LyraTimeRange extends LyraElement {
           role="slider"
           tabindex=${this.disabled ? '-1' : '0'}
           aria-label="Range start"
-          aria-valuemin=${this.min}
-          aria-valuemax=${this.max}
-          aria-valuenow=${this.start}
+          aria-disabled=${this.disabled ? 'true' : nothing}
+          aria-valuemin=${startBounds.min}
+          aria-valuemax=${startBounds.max}
+          aria-valuenow=${isNaN(this.start) ? nothing : this.start}
           style=${`inset-inline-start:${startPct}%`}
           @pointerdown=${(e) => this.onPointerDown('start', e)}
           @keydown=${(e) => this.onKeyDown('start', e)}
@@ -186,9 +363,10 @@ export class LyraTimeRange extends LyraElement {
           role="slider"
           tabindex=${this.disabled ? '-1' : '0'}
           aria-label="Range end"
-          aria-valuemin=${this.min}
-          aria-valuemax=${this.max}
-          aria-valuenow=${this.end}
+          aria-disabled=${this.disabled ? 'true' : nothing}
+          aria-valuemin=${endBounds.min}
+          aria-valuemax=${endBounds.max}
+          aria-valuenow=${isNaN(this.end) ? nothing : this.end}
           style=${`inset-inline-start:${endPct}%`}
           @pointerdown=${(e) => this.onPointerDown('end', e)}
           @keydown=${(e) => this.onKeyDown('end', e)}
@@ -216,4 +394,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraTimeRange.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTimeRange.prototype, "presets", void 0);
 defineElement('time-range', LyraTimeRange);

package/dist/components/time-range/time-range.stories.d.ts

@@ -4,3 +4,5 @@ export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
 export declare const Disabled: Story;
+export declare const CoarseStep: Story;
+export declare const DiscretePresets: Story;

package/dist/components/time-range/time-range.stories.js

@@ -1,4 +1,9 @@
 import { html } from 'lit';
+const presets = [
+    { label: 'Last 7 days', start: 0, end: 7 },
+    { label: 'Last 30 days', start: 0, end: 30 },
+    { label: 'Last 90 days', start: 0, end: 90 },
+];
 const meta = {
     title: 'TimeRange',
     component: 'lyra-time-range',
@@ -11,3 +16,11 @@ export const Default = {
 export const Disabled = {
     render: () => html `<lyra-time-range min="0" max="100" start="20" end="80" disabled></lyra-time-range>`,
 };
+export const CoarseStep = {
+    render: () => html `<lyra-time-range min="0" max="100" start="20" end="80" step="10"></lyra-time-range>`,
+};
+export const DiscretePresets = {
+    render: () => html `
+    <lyra-time-range min="0" max="90" start="0" end="30" .presets=${presets}></lyra-time-range>
+  `,
+};

package/dist/components/time-range/time-range.styles.js

@@ -3,12 +3,54 @@ export const styles = css `
   :host {
     display: block;
     inline-size: 100%;
-    block-size: 1.5rem;
+    /* No fixed block-size here (unlike before presets existed): [part="base"]
+       now carries its own 1.5rem below and the host's block box is just the
+       natural stack height of its children. With presets empty this still
+       computes to exactly 1.5rem (the one [part="base"] child), so the
+       brush-only case renders byte-for-byte the same as before. */
+  }
+  [part='presets'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-xs);
+    margin-block-end: var(--lyra-space-s);
+  }
+  [part='preset-button'] {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    font: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition: var(--lyra-transition-fast);
+  }
+  [part='preset-button']:hover:not(:disabled) {
+    border-color: var(--lyra-color-brand);
+  }
+  [part='preset-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='preset-button'][data-active] {
+    background: var(--lyra-color-brand);
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-on-brand);
+  }
+  [part='preset-button']:disabled {
+    /* Dimming already comes from :host([disabled])'s opacity below (applies
+       to the whole host, presets row included) — stacking a second opacity
+       here would compound multiplicatively and over-dim relative to the
+       handles, which only restate the cursor for the same reason. */
+    cursor: not-allowed;
   }
   [part='base'] {
     position: relative;
     inline-size: 100%;
-    block-size: 100%;
+    block-size: 1.5rem;
     display: flex;
     align-items: center;
   }

package/dist/components/toast/toast-item.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 export type ToastVariant = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
 export type ToastSize = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -30,15 +30,27 @@ export declare class LyraToastItem extends LyraElement {
     /** Show the icon slot. */
     withIcon: boolean;
     private timer?;
-    private remaining;
+    private elapsedMs;
     private startedAt;
+    private timerStarted;
     private showRafId?;
+    private showAnimTimer?;
+    private hideAnimTimer?;
+    private hovering;
+    private focused;
+    private hiding;
+    protected updated(changed: PropertyValues): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
     private startTimer;
     private resumeTimer;
     private pauseTimer;
     private clearTimer;
+    private onPointerEnter;
+    private onPointerLeave;
+    private onFocusIn;
+    private onFocusOut;
+    private get closeLabel();
     /** Hide with animation, then remove from the DOM. */
     hide(): Promise<void>;
     render(): TemplateResult;