@aceshooting/lyra-ui 1.2.0 → 2.1.0

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

@@ -9,6 +9,7 @@ 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 { finiteNumber, finiteRange } from '../../internal/numbers.js';
 import { styles } from './time-range.styles.js';
 function isArrowKey(key) {
     return key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowDown';
@@ -22,14 +23,17 @@ function isSliderKey(key) {
  *  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. */
+/** Number of decimal places implied by `n`, including exponent notation.
+ *  `0.1` -> 1, `5` -> 0, and `1e-7` -> 7. 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;
+    if (!Number.isFinite(n) || n === 0)
+        return 0;
+    const [mantissa, exponentText] = n.toExponential().split('e');
+    const mantissaPlaces = mantissa.includes('.') ? mantissa.length - mantissa.indexOf('.') - 1 : 0;
+    return Math.max(0, mantissaPlaces - Number(exponentText));
 }
 /**
  * `<lyra-time-range>` — a two-handle brush/scrubber over a numeric domain.
@@ -41,26 +45,72 @@ function decimalPlaces(n) {
  * shortcut that sets both handles at once, the continuous brush underneath
  * is unaffected and both interaction modes coexist.
  *
+ * Form-associated (via a directly-attached `ElementInternals`, mirroring
+ * `<lyra-combobox>`'s minimal pattern rather than the single-string-value
+ * `FormAssociated` mixin, which doesn't fit a two-handle range): an ancestor
+ * `<fieldset disabled>` disables both handles and every preset button
+ * through `effectiveDisabled`, the same way it would a native `<input>`,
+ * without touching the consumer-facing `disabled` property/attribute itself.
+ *
  * @customElement lyra-time-range
  * @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
+ * @csspart base - The time-range wrapper.
+ * @csspart track - The complete range track.
+ * @csspart range - The selected range.
+ * @csspart handle-start - The start handle.
+ * @csspart handle-end - The end handle.
+ * @csspart presets - The preset controls wrapper.
+ * @csspart preset-button - A preset button.
  */
 export class LyraTimeRange extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        // Hand-written accessor (see the `get`/`set disabled` pair below)
+        // instead of a plain `@property({ reflect: true })`: this element is
+        // form-associated, and the browser invokes `formDisabledCallback`
+        // synchronously for *this element's own* `disabled` attribute changes
+        // too, not only for an ancestor `<fieldset disabled>` toggling. A plain
+        // reflecting property defers its attribute write into the async Lit
+        // update cycle, so that browser callback would otherwise fire nested
+        // *inside* this same element's own in-progress update -- the
+        // `requestUpdate()` it triggers (to pick up `_fieldsetDisabled`) then
+        // races Lit's own scheduling and can resolve `updateComplete` before the
+        // corrected value actually renders. Reflecting the attribute
+        // synchronously, right in the setter (mirrors `<lyra-combobox>`'s and
+        // `FormAssociated`'s identical `disabled` accessor), makes the browser
+        // invoke that callback *before* any Lit update even starts, so it never
+        // interleaves with one.
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+    }; }
     constructor() {
-        super(...arguments);
+        super();
         this.min = 0;
         this.max = 100;
         this.start = 0;
         this.end = 100;
         this.step = 1;
-        this.disabled = false;
+        /** Accessible name for the start handle, used as its `aria-label`.
+         *  Overridable for i18n/custom copy; defaults to the same literal text
+         *  this component always rendered before the property existed. */
+        this.startLabel = 'Range start';
+        /** Accessible name for the end handle, used as its `aria-label`.
+         *  Overridable for i18n/custom copy; defaults to the same literal text
+         *  this component always rendered before the property existed. */
+        this.endLabel = 'Range end';
         /**
          * 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 = [];
+        this._disabled = false;
+        // Tracked separately from the consumer's own `disabled` -- a fieldset
+        // cascade must never mutate that IDL property/attribute itself (mirrors
+        // combobox.ts's/slider.ts's identical `_fieldsetDisabled`/
+        // `effectiveDisabled` pattern), only the combined getter below.
+        this._fieldsetDisabled = false;
         // 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
@@ -69,12 +119,14 @@ export class LyraTimeRange extends LyraElement {
         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
-            // blocked by the `if (this.disabled) return;` guard in onPointerDown,
-            // and disabled handles carry `tabindex="-1"`, but a pre-existing focus
-            // can bypass both of those).
-            if (this.disabled)
+            // blocked by the `if (this.effectiveDisabled) return;` guard in
+            // onPointerDown, and disabled handles carry `tabindex="-1"`, but a
+            // pre-existing focus can bypass both of those).
+            if (this.effectiveDisabled)
                 return;
-            const current = handle === 'start' ? this.start : this.end;
+            const current = handle === 'start'
+                ? finiteRange(this.start, this.domain().lo)
+                : finiteRange(this.end, this.domain().hi);
             // 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);
@@ -109,12 +161,12 @@ export class LyraTimeRange extends LyraElement {
             // 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))
+            if (this.effectiveDisabled || !isSliderKey(e.key))
                 return;
             this.emit('lyra-change', { start: this.start, end: this.end });
         };
         this.onPointerDown = (handle, e) => {
-            if (this.disabled)
+            if (this.effectiveDisabled)
                 return;
             const base = this.renderRoot.querySelector('[part="base"]');
             this.drags.set(e.pointerId, { handle, base });
@@ -134,15 +186,15 @@ export class LyraTimeRange extends LyraElement {
             const drag = this.drags.get(e.pointerId);
             if (drag === undefined)
                 return;
-            if (this.disabled) {
+            if (this.effectiveDisabled) {
                 // These are window-level listeners driven by setPointerCapture, so
                 // they keep firing for this pointerId regardless of any CSS on the
                 // host (this was already true even back when the host used
                 // `pointer-events: none`, since that never governed an
                 // already-captured window listener) — a drag already in progress
                 // 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.
+                // after `disabled` (or an ancestor fieldset) flips true mid-drag.
+                // Abort the drag instead of continuing to process it.
                 this.endDrag(e.pointerId, false);
                 return;
             }
@@ -152,14 +204,41 @@ export class LyraTimeRange extends LyraElement {
             // 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);
+            const { lo, hi } = this.domain();
+            const value = lo + ratio * (hi - lo);
             this.setValue(drag.handle, value, false);
         };
         this.onPointerUp = (e) => {
             this.endDrag(e.pointerId, true);
         };
+        this.internals = this.attachInternals();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        this.requestUpdate('disabled', old);
+    }
+    /** 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;
+    }
+    /**
+     * 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._fieldsetDisabled = disabled;
+        this.requestUpdate();
     }
-    static { this.styles = [LyraElement.styles, styles]; }
     disconnectedCallback() {
         super.disconnectedCallback();
         // Mirror lyra-split's cleanup: if the element is removed mid-drag (or a
@@ -184,8 +263,8 @@ export class LyraTimeRange extends LyraElement {
         // 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;
+        const min = finiteNumber(this.min, 0);
+        const max = finiteNumber(this.max, 100);
         return { lo: Math.min(min, max), hi: Math.max(min, max) };
     }
     percentOf(value) {
@@ -193,11 +272,10 @@ export class LyraTimeRange extends LyraElement {
         // 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 safeValue = finiteRange(value, lo, lo, hi);
         const span = hi - lo || 1;
-        return ((value - lo) / span) * 100;
+        return ((safeValue - 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
@@ -209,8 +287,8 @@ export class LyraTimeRange extends LyraElement {
         // 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;
+        const start = finiteRange(this.start, lo, lo, hi);
+        const end = finiteRange(this.end, hi, lo, hi);
         return handle === 'start' ? { min: lo, max: end } : { min: start, max: hi };
     }
     clamp(handle, value) {
@@ -220,7 +298,6 @@ export class LyraTimeRange extends LyraElement {
         // 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`
@@ -229,16 +306,17 @@ export class LyraTimeRange extends LyraElement {
         // (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;
+        let stepped = finiteNumber(value, lo);
+        const step = finiteRange(this.step, 0, 0);
+        if (Number.isFinite(step) && step > 0) {
+            const stepsFromLo = Math.round((stepped - lo) / step);
+            const factor = 10 ** decimalPlaces(step);
+            stepped = Math.round((lo + stepsFromLo * 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);
+            return Math.min(bounded, finiteRange(this.end, hi, lo, hi));
+        return Math.max(bounded, finiteRange(this.start, lo, lo, hi));
     }
     setValue(handle, value, commit) {
         const clamped = this.clamp(handle, value);
@@ -253,22 +331,28 @@ export class LyraTimeRange extends LyraElement {
     /**
      * Apply a discrete preset: sets both handles and emits the same
      * lyra-input/lyra-change pair a committed drag or keyboard step would.
+     *
+     * Deliberately bypasses `setValue()`/`clamp()` — a preset is an explicit
+     * discrete jump to the caller's own exact numbers, not a stepped nudge, so
+     * routing it through `clamp()`'s step-grid rounding would silently round
+     * a preset's values away from what the caller specified (and desync the
+     * active-button match in render(), which compares against these exact
+     * numbers). Only the domain bounds and the start<=end invariant apply
+     * here, not `step`. Both handles are also assigned before either event
+     * fires — routing them through two sequential `setValue()` calls instead
+     * would emit an extra lyra-input whose detail still held the stale
+     * pre-preset value for whichever handle hadn't been assigned yet.
      */
     applyPreset(preset) {
-        if (this.disabled)
+        if (this.effectiveDisabled)
             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);
+        const { lo, hi } = this.domain();
+        const start = finiteRange(preset.start, lo, lo, hi);
+        const end = finiteRange(preset.end, hi, lo, hi);
+        this.start = Math.min(start, end);
+        this.end = Math.max(start, end);
+        this.emit('lyra-input', { start: this.start, end: this.end });
+        this.emit('lyra-change', { start: this.start, end: this.end });
     }
     /** Stop the drag owned by `pointerId`, optionally committing a final lyra-change. */
     endDrag(pointerId, commit) {
@@ -298,20 +382,25 @@ export class LyraTimeRange extends LyraElement {
             // the track, since percentOf() would otherwise produce <0%/>100%.
             // Guard against a caller passing min > max so the bounds themselves
             // stay well-formed.
-            const lo = Math.min(this.min, this.max);
-            const hi = Math.max(this.min, this.max);
-            this.start = Math.min(hi, Math.max(lo, this.start));
-            this.end = Math.min(hi, Math.max(lo, this.end));
+            const { lo, hi } = this.domain();
+            if (Number.isFinite(this.start))
+                this.start = finiteRange(this.start, lo, lo, hi);
+            if (Number.isFinite(this.end))
+                this.end = finiteRange(this.end, hi, lo, hi);
         }
         // Keep start <= end regardless of which side changed (a controlled
         // caller may set only `end`, e.g. two-way-binding an external store).
         // The handle that just moved wins; the other side is pulled to meet it,
         // mirroring the direction `clamp()` already uses during interactive
         // dragging.
-        if (changed.has('start') || changed.has('min') || changed.has('max')) {
+        if ((changed.has('start') || changed.has('min') || changed.has('max')) &&
+            Number.isFinite(this.start) &&
+            Number.isFinite(this.end)) {
             this.start = Math.min(this.start, this.end);
         }
-        if (changed.has('end') || changed.has('min') || changed.has('max')) {
+        if ((changed.has('end') || changed.has('min') || changed.has('max')) &&
+            Number.isFinite(this.start) &&
+            Number.isFinite(this.end)) {
             this.end = Math.max(this.end, this.start);
         }
     }
@@ -328,7 +417,7 @@ export class LyraTimeRange extends LyraElement {
                 return html `<button
                 part="preset-button"
                 type="button"
-                ?disabled=${this.disabled}
+                ?disabled=${this.effectiveDisabled}
                 aria-pressed=${active ? 'true' : 'false'}
                 ?data-active=${active}
                 @click=${() => this.applyPreset(preset)}
@@ -347,12 +436,14 @@ export class LyraTimeRange extends LyraElement {
         <div
           part="handle-start"
           role="slider"
-          tabindex=${this.disabled ? '-1' : '0'}
-          aria-label="Range start"
-          aria-disabled=${this.disabled ? 'true' : nothing}
+          tabindex=${this.effectiveDisabled ? '-1' : '0'}
+          aria-label=${this.startLabel}
+          aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
           aria-valuemin=${startBounds.min}
           aria-valuemax=${startBounds.max}
-          aria-valuenow=${isNaN(this.start) ? nothing : this.start}
+          aria-valuenow=${Number.isFinite(this.start)
+            ? finiteRange(this.start, startBounds.min, startBounds.min, startBounds.max)
+            : nothing}
           style=${`inset-inline-start:${startPct}%`}
           @pointerdown=${(e) => this.onPointerDown('start', e)}
           @keydown=${(e) => this.onKeyDown('start', e)}
@@ -361,12 +452,14 @@ export class LyraTimeRange extends LyraElement {
         <div
           part="handle-end"
           role="slider"
-          tabindex=${this.disabled ? '-1' : '0'}
-          aria-label="Range end"
-          aria-disabled=${this.disabled ? 'true' : nothing}
+          tabindex=${this.effectiveDisabled ? '-1' : '0'}
+          aria-label=${this.endLabel}
+          aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
           aria-valuemin=${endBounds.min}
           aria-valuemax=${endBounds.max}
-          aria-valuenow=${isNaN(this.end) ? nothing : this.end}
+          aria-valuenow=${Number.isFinite(this.end)
+            ? finiteRange(this.end, endBounds.min, endBounds.min, endBounds.max)
+            : nothing}
           style=${`inset-inline-start:${endPct}%`}
           @pointerdown=${(e) => this.onPointerDown('end', e)}
           @keydown=${(e) => this.onKeyDown('end', e)}
@@ -392,8 +485,11 @@ __decorate([
     property({ type: Number })
 ], LyraTimeRange.prototype, "step", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], LyraTimeRange.prototype, "disabled", void 0);
+    property({ attribute: 'start-label' })
+], LyraTimeRange.prototype, "startLabel", void 0);
+__decorate([
+    property({ attribute: 'end-label' })
+], LyraTimeRange.prototype, "endLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], LyraTimeRange.prototype, "presets", void 0);

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

@@ -34,11 +34,12 @@ export declare class LyraToastItem extends LyraElement {
     private startedAt;
     private timerStarted;
     private showRafId?;
-    private showAnimTimer?;
-    private hideAnimTimer?;
+    private cancelShowAnimation?;
+    private cancelHideAnimation?;
     private hovering;
     private focused;
     private hiding;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
@@ -46,6 +47,15 @@ export declare class LyraToastItem extends LyraElement {
     private resumeTimer;
     private pauseTimer;
     private clearTimer;
+    /**
+     * Wait for the actual CSS transition/animation on the toast surface. The
+     * computed duration is intentionally read at runtime so a consumer's
+     * `--lyra-toast-show-duration`/`--lyra-toast-hide-duration` override keeps
+     * lifecycle events and removal in sync with the pixels on screen. A small
+     * timeout remains as a safety net for zero-duration transitions, disabled
+     * animation, and browsers that do not dispatch an end event.
+     */
+    private waitForVisualCompletion;
     private onPointerEnter;
     private onPointerLeave;
     private onFocusIn;

package/dist/components/toast/toast-item.js

@@ -10,23 +10,19 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { closeIcon } from '../../internal/icons.js';
 import { styles } from './toast-item.styles.js';
-// Must stay in sync with --lyra-transition-base's 180ms fallback
-// (internal/tokens.styles.ts) — toast-item.styles.ts derives
-// --show-duration/--hide-duration from that same token. Kept as a literal
-// here rather than read via getComputedStyle() because the token's value is
-// a full transition shorthand ("180ms ease-out"), not a bare duration, and
-// parsing that back out in JS for a single setTimeout would be more fragile
-// than this documented literal.
-const ANIM_MS = 180;
 function prefersReducedMotion() {
     return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 }
-// toast-item.styles.ts already collapses the CSS transition itself to ~0 under
-// reduced motion; this keeps the lyra-after-show/lyra-after-hide events (and
-// the DOM removal in hide()) from still waiting out the full duration of an
-// animation nothing is visibly playing.
-function animMs() {
-    return prefersReducedMotion() ? 0 : ANIM_MS;
+function parseTime(value) {
+    const trimmed = value.trim();
+    if (trimmed.endsWith('ms'))
+        return Number.parseFloat(trimmed);
+    if (trimmed.endsWith('s'))
+        return Number.parseFloat(trimmed) * 1000;
+    return 0;
+}
+function maxCssTime(value) {
+    return Math.max(0, ...value.split(',').map(parseTime).filter(Number.isFinite));
 }
 /**
  * `<lyra-toast-item>` — a single toast notification.
@@ -76,8 +72,12 @@ export class LyraToastItem extends LyraElement {
             if (!isFinite(this.duration) || this.duration <= 0)
                 return;
             const remaining = this.duration - this.elapsedMs;
-            if (remaining <= 0)
+            // A duration shortened below the already-elapsed time must hide promptly,
+            // not silently never schedule anything.
+            if (remaining <= 0) {
+                void this.hide();
                 return;
+            }
             this.startedAt = performance.now();
             this.timer = window.setTimeout(() => this.hide(), remaining);
         };
@@ -113,6 +113,28 @@ export class LyraToastItem extends LyraElement {
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        // `elapsedMs`/`duration` are re-read fresh every time the timer is
+        // (re)scheduled, so a `duration` change while paused (hovering/focused)
+        // or before the timer has ever started needs no action here -- the next
+        // resumeTimer()/startTimer() call already picks up the new value.
+        // Re-evaluate on any duration change once the show sequence has started,
+        // not only while a timer is already actively counting down -- this also
+        // covers duration flipping from disabled (0/Infinity) back to a positive
+        // value, which previously never had `this.timer !== undefined` to gate on.
+        //
+        // This runs in willUpdate() (before render), not updated(), because a
+        // duration shortened below the already-elapsed time makes resumeTimer()
+        // call hide(), which sets the `hiding` state property synchronously --
+        // doing that from updated() sets a reactive property after Lit considers
+        // the update cycle finished, scheduling a redundant extra render pass.
+        // willUpdate() runs before that cycle is considered complete, so the same
+        // set just folds into the render already in progress.
+        if (changed.has('duration') && this.timerStarted && !this.hovering && !this.focused) {
+            this.pauseTimer();
+            this.resumeTimer();
+        }
+    }
     updated(changed) {
         if (changed.has('variant')) {
             // Assertive for actionable severities, polite otherwise. Re-evaluated
@@ -121,27 +143,21 @@ export class LyraToastItem extends LyraElement {
             // interruption instead of keeping its original, now-stale role.
             this.setAttribute('role', this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'status');
         }
-        // `elapsedMs`/`duration` are re-read fresh every time the timer is
-        // (re)scheduled, so a `duration` change while paused (hovering/focused)
-        // or before the timer has ever started needs no action here -- the next
-        // resumeTimer()/startTimer() call already picks up the new value. Only a
-        // timer that's actively counting down right now is running against a
-        // setTimeout scheduled for the *old* duration, so that's the one case
-        // that needs an explicit reschedule.
-        if (changed.has('duration') && this.timerStarted && this.timer !== undefined) {
-            this.pauseTimer();
-            this.resumeTimer();
-        }
     }
     firstUpdated() {
         this.showRafId = requestAnimationFrame(() => {
             this.showRafId = undefined;
+            // hide() may have already run synchronously before this frame fired
+            // (e.g. a caller creates the toast and immediately dismisses it) --
+            // don't resurrect the show sequence on top of an already-hiding item.
+            if (this.hiding)
+                return;
             this.setAttribute('data-visible', '');
             this.emit('lyra-show');
-            this.showAnimTimer = window.setTimeout(() => {
-                this.showAnimTimer = undefined;
-                this.emit('lyra-after-show');
-            }, animMs());
+            void this.waitForVisualCompletion('show').then(() => {
+                if (this.isConnected && !this.hiding)
+                    this.emit('lyra-after-show');
+            });
             this.startTimer();
         });
     }
@@ -151,14 +167,10 @@ export class LyraToastItem extends LyraElement {
             cancelAnimationFrame(this.showRafId);
             this.showRafId = undefined;
         }
-        if (this.showAnimTimer !== undefined) {
-            clearTimeout(this.showAnimTimer);
-            this.showAnimTimer = undefined;
-        }
-        if (this.hideAnimTimer !== undefined) {
-            clearTimeout(this.hideAnimTimer);
-            this.hideAnimTimer = undefined;
-        }
+        this.cancelShowAnimation?.();
+        this.cancelShowAnimation = undefined;
+        this.cancelHideAnimation?.();
+        this.cancelHideAnimation = undefined;
         this.clearTimer();
     }
     startTimer() {
@@ -171,6 +183,53 @@ export class LyraToastItem extends LyraElement {
             clearTimeout(this.timer);
         this.timer = undefined;
     }
+    /**
+     * Wait for the actual CSS transition/animation on the toast surface. The
+     * computed duration is intentionally read at runtime so a consumer's
+     * `--lyra-toast-show-duration`/`--lyra-toast-hide-duration` override keeps
+     * lifecycle events and removal in sync with the pixels on screen. A small
+     * timeout remains as a safety net for zero-duration transitions, disabled
+     * animation, and browsers that do not dispatch an end event.
+     */
+    waitForVisualCompletion(kind) {
+        const previous = kind === 'show' ? this.cancelShowAnimation : this.cancelHideAnimation;
+        previous?.();
+        const surface = this.shadowRoot?.querySelector('[part="toast-item"]');
+        if (!surface || prefersReducedMotion())
+            return Promise.resolve();
+        const computed = getComputedStyle(surface);
+        const transitionMs = maxCssTime(computed.transitionDuration) + maxCssTime(computed.transitionDelay);
+        const animationMs = maxCssTime(computed.animationDuration) + maxCssTime(computed.animationDelay);
+        const fallbackMs = Math.max(transitionMs, animationMs);
+        if (fallbackMs <= 0)
+            return Promise.resolve();
+        return new Promise((resolve) => {
+            let settled = false;
+            let timeout;
+            const cancelKey = kind === 'show' ? 'cancelShowAnimation' : 'cancelHideAnimation';
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                if (timeout !== undefined)
+                    window.clearTimeout(timeout);
+                surface.removeEventListener('transitionend', onEnd);
+                surface.removeEventListener('animationend', onEnd);
+                if (this[cancelKey] === cancel)
+                    this[cancelKey] = undefined;
+                resolve();
+            };
+            const onEnd = (event) => {
+                if (event.target === surface)
+                    finish();
+            };
+            const cancel = () => finish();
+            surface.addEventListener('transitionend', onEnd);
+            surface.addEventListener('animationend', onEnd);
+            timeout = window.setTimeout(finish, fallbackMs + 50);
+            this[cancelKey] = cancel;
+        });
+    }
     // A stack of several simultaneously-open toasts otherwise gives every
     // close button the same bare "Close" label, so screen-reader/switch-access
     // users can't tell which toast a given button dismisses without first
@@ -199,15 +258,18 @@ export class LyraToastItem extends LyraElement {
         if (this.hiding)
             return;
         this.hiding = true;
+        this.cancelShowAnimation?.();
+        this.cancelShowAnimation = undefined;
         this.clearTimer();
         this.emit('lyra-hide');
         this.removeAttribute('data-visible');
-        await new Promise((resolve) => {
-            this.hideAnimTimer = window.setTimeout(() => {
-                this.hideAnimTimer = undefined;
-                resolve();
-            }, animMs());
-        });
+        this.setAttribute('data-hiding', '');
+        await this.waitForVisualCompletion('hide');
+        // A disconnect cancels the visual wait, but it does so without this
+        // reaching its normal completion -- guard against emitting a finished
+        // event or redundantly removing a node already torn down elsewhere.
+        if (!this.isConnected)
+            return;
         this.emit('lyra-after-hide');
         this.remove();
     }