@aceshooting/lyra-ui 0.1.4 → 1.0.0

package/dist/components/flag/flag.js

@@ -11,6 +11,15 @@ import { defineElement } from '../../internal/prefix.js';
 import { styles } from './flag.styles.js';
 import { languageToCountry } from './language-map.js';
 import '../skeleton/skeleton.js';
+/**
+ * ISO 3166-1 alpha-2 country code: exactly two letters, case-insensitive.
+ * The peer package `@aceshooting/lyra-flags` naively interpolates its `code`
+ * argument into a `new URL('./flags/${code}.svg', ...)` with no validation
+ * of its own — an unvalidated `country` containing `../` segments (e.g.
+ * `../../etc`) can escape the intended flags/ directory. Anything that
+ * doesn't match this shape is treated the same as an unknown/missing flag.
+ */
+const COUNTRY_CODE_RE = /^[a-z]{2}$/i;
 let flagUrlResolver;
 /**
  * Lazily loads the optional peer dependency '@aceshooting/lyra-flags' once per
@@ -51,8 +60,9 @@ export class LyraFlag extends LyraElement {
     }
     static { this.styles = [LyraElement.styles, styles]; }
     get code() {
-        if (this.country)
-            return this.country.toLowerCase();
+        if (this.country) {
+            return COUNTRY_CODE_RE.test(this.country) ? this.country.toLowerCase() : undefined;
+        }
         if (this.language)
             return languageToCountry(this.language);
         return undefined;

package/dist/components/gauge/gauge.js

@@ -69,6 +69,10 @@ export class LyraGauge extends LyraElement {
             this.setAttribute('aria-label', this.label);
         else
             this.removeAttribute('aria-label');
+        if (this.valueLabel)
+            this.setAttribute('aria-valuetext', this.valueLabel);
+        else
+            this.removeAttribute('aria-valuetext');
     }
     renderRadial() {
         const text = this.valueLabel ?? String(this.value);
@@ -85,8 +89,8 @@ export class LyraGauge extends LyraElement {
         stroke-dasharray=${RADIAL_ARC_LENGTH}
         stroke-dashoffset=${dashoffset}
       ></path>
-      <text part="value" x="50" y="52">${text}</text>
-      ${this.label ? svg `<text part="label" x="50" y="68">${this.label}</text>` : ''}
+      <text part="value" x="50" y="52" aria-hidden="true">${text}</text>
+      ${this.label ? svg `<text part="label" x="50" y="68" aria-hidden="true">${this.label}</text>` : ''}
     </svg>`;
     }
     renderLinear() {
@@ -104,8 +108,8 @@ export class LyraGauge extends LyraElement {
         stroke-dasharray=${LINEAR_LENGTH}
         stroke-dashoffset=${dashoffset}
       ></line>
-      ${this.label ? svg `<text part="label" x="0" y=${LINEAR_TEXT_Y}>${this.label}</text>` : ''}
-      <text part="value" x="100" y=${LINEAR_TEXT_Y}>${text}</text>
+      ${this.label ? svg `<text part="label" x="0" y=${LINEAR_TEXT_Y} aria-hidden="true">${this.label}</text>` : ''}
+      <text part="value" x="100" y=${LINEAR_TEXT_Y} aria-hidden="true">${text}</text>
     </svg>`;
     }
     render() {

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Radial: Story;
+export declare const Linear: Story;

package/dist/components/gauge/gauge.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Gauge',
+    component: 'lyra-gauge',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Radial = {
+    render: () => html `<lyra-gauge value="72" max="100" label="CPU"></lyra-gauge>`,
+};
+export const Linear = {
+    render: () => html `<lyra-gauge type="linear" value="40" max="100" label="Disk"></lyra-gauge>`,
+};

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/graph/graph.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+const nodes = [
+    { id: 'a', label: 'A' },
+    { id: 'b', label: 'B' },
+    { id: 'c', label: 'C' },
+    { id: 'd', label: 'D' },
+];
+const links = [
+    { source: 'a', target: 'b' },
+    { source: 'a', target: 'c' },
+    { source: 'b', target: 'd' },
+    { source: 'c', target: 'd' },
+];
+const meta = {
+    title: 'Graph',
+    component: 'lyra-graph',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-graph
+      width="480"
+      height="320"
+      style="height: 20rem"
+      .nodes=${nodes}
+      .links=${links}
+    ></lyra-graph>
+  `,
+};

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/heatmap/heatmap.stories.js

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Heatmap',
+    component: 'lyra-heatmap',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-heatmap
+      cell-size="24"
+      value-label="events"
+      .rowLabels=${['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
+      .colLabels=${['0h', '6h', '12h', '18h']}
+      .values=${[
+        [1, 4, 9, 2],
+        [0, 2, 6, 3],
+        [5, 8, 3, 1],
+        [-1, 1, 4, 7],
+        [2, 3, 5, 6],
+    ]}
+    ></lyra-heatmap>
+  `,
+};

package/dist/components/map/map.d.ts

@@ -28,6 +28,11 @@ export interface MapMarker {
  * @event lyra-map-load - Fired once the underlying maplibregl.Map loads.
  * @event lyra-map-click - `detail: { lngLat, feature? }`.
  * @csspart base, container, legend, legend-swatch
+ *
+ * ⚠️ The default `mapStyle` (when unset) uses OpenStreetMap's demo tile
+ * server, which is not suitable for production traffic — see the
+ * `DEFAULT_STYLE` doc comment in `map.ts`. Always pass an explicit
+ * `mapStyle` in production.
  */
 export declare class LyraMap extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -46,6 +51,7 @@ export declare class LyraMap extends LyraElement {
     private _appliedFillLayerId?;
     private _maplibreModule;
     private _markerInstances;
+    private _connectGeneration;
     /** The raw `maplibregl.Map` instance — escape hatch for anything this wrapper doesn't expose. */
     get map(): MaplibreMap | undefined;
     connectedCallback(): void;

package/dist/components/map/map.js

@@ -7,11 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /// <reference types="geojson" />
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { loadMaplibre } from './map-loader.js';
 import { styles } from './map.styles.js';
 import '../skeleton/skeleton.js';
+/**
+ * Fallback `mapStyle` used only when a consumer never sets one. Points at
+ * OpenStreetMap's shared **demo** tile server (`tile.openstreetmap.org`),
+ * which is explicitly NOT for production/bulk use: it has no capacity
+ * guarantees, requires an identifying `User-Agent`/`Referer`, and will
+ * rate-limit or IP-block non-compliant or high-volume clients per the OSM
+ * Foundation's tile usage policy
+ * (https://operations.osmfoundation.org/policies/tiles/). Convenient for
+ * local development and quick prototypes only — production apps MUST supply
+ * their own `mapStyle` (a hosted vector/raster style from a tile provider
+ * you have a plan with, or your own tile server).
+ */
 const DEFAULT_STYLE = {
     version: 8,
     sources: {
@@ -24,6 +37,19 @@ const DEFAULT_STYLE = {
     },
     layers: [{ id: 'lyra-osm', type: 'raster', source: 'lyra-osm' }],
 };
+/**
+ * Rejects a `LegendEntry.color` that could break out of the single
+ * `background` declaration it's assigned to — `;`, `{`, and `}` are all a
+ * value needs to terminate that declaration and start another. This matters
+ * even though the swatch's color is set via Lit's `styleMap` directive (not
+ * raw string interpolation): `styleMap`'s first commit for a given
+ * attribute part serializes the whole `style` value as a single string
+ * (only later updates go through the safe `CSSStyleDeclaration.setProperty()`
+ * path), so an unsanitized value could still inject on that first render.
+ */
+function sanitizeSwatchColor(color) {
+    return /[;{}]/.test(color) ? undefined : color;
+}
 /**
  * `<lyra-map>` — a maplibre-gl wrapper with a declarative legend and
  * choropleth GeoJSON layer, plus a raw `map` escape hatch. Requires the
@@ -33,6 +59,11 @@ const DEFAULT_STYLE = {
  * @event lyra-map-load - Fired once the underlying maplibregl.Map loads.
  * @event lyra-map-click - `detail: { lngLat, feature? }`.
  * @csspart base, container, legend, legend-swatch
+ *
+ * ⚠️ The default `mapStyle` (when unset) uses OpenStreetMap's demo tile
+ * server, which is not suitable for production traffic — see the
+ * `DEFAULT_STYLE` doc comment in `map.ts`. Always pass an explicit
+ * `mapStyle` in production.
  */
 export class LyraMap extends LyraElement {
     constructor() {
@@ -52,6 +83,17 @@ export class LyraMap extends LyraElement {
         // choropleth updates from ever re-running.
         this._styleLoaded = false;
         this._markerInstances = new Map();
+        // Bumped on every connectedCallback and captured by value in its
+        // loadMaplibre().then() closure below. A disconnect immediately followed
+        // by a reconnect (fast remounts, route/tab switches, etc.) before that
+        // cached promise settles would otherwise let *every* connect attempt's
+        // closure construct its own maplibregl.Map against the same container —
+        // only the last one written to `this._map` survives, and the earlier
+        // ones leak their WebGL context/canvas/event listeners forever. Each
+        // closure compares its captured generation against the current value
+        // before doing anything observable, and bails if a newer
+        // connectedCallback has since superseded it.
+        this._connectGeneration = 0;
     }
     static { this.styles = [LyraElement.styles, styles]; }
     /** The raw `maplibregl.Map` instance — escape hatch for anything this wrapper doesn't expose. */
@@ -60,7 +102,15 @@ export class LyraMap extends LyraElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        const generation = ++this._connectGeneration;
         void loadMaplibre().then(async (mod) => {
+            // A newer connectedCallback (disconnect + reconnect) already
+            // superseded this attempt while loadMaplibre()'s cached promise was
+            // in flight — bail before touching any state, let the newer attempt's
+            // own closure (already queued behind this one on the same promise)
+            // take over instead.
+            if (generation !== this._connectGeneration)
+                return;
             this.loading = false;
             if (!mod)
                 return;
@@ -68,11 +118,13 @@ export class LyraMap extends LyraElement {
             // `[part="container"]` only exists once `loading` flips to `false` and
             // Lit re-renders — wait for that render to land before querying it.
             await this.updateComplete;
-            // The element may have been removed from the DOM while the async
-            // loadMaplibre()/updateComplete window was in flight — don't spin up
-            // a maplibre Map (WebGL context + event listeners) for a detached
-            // instance (disconnectedCallback's cleanup already ran).
-            if (!this.containerEl || !this.isConnected)
+            // Re-check after the await: the element may have been removed from
+            // the DOM entirely while this loadMaplibre()/updateComplete window
+            // was in flight — don't spin up a maplibre Map (WebGL context + event
+            // listeners) for a detached instance (disconnectedCallback's cleanup
+            // already ran) — or superseded by yet another disconnect+reconnect
+            // cycle that happened during the `await` above.
+            if (generation !== this._connectGeneration || !this.containerEl || !this.isConnected)
                 return;
             this._map = new mod.Map({
                 container: this.containerEl,
@@ -122,11 +174,16 @@ export class LyraMap extends LyraElement {
             this._styleLoaded = false;
             this._appliedChoroplethSourceId = undefined;
             this._appliedFillLayerId = undefined;
-            this._map.setStyle(this.mapStyle);
+            // Register the listener *before* calling setStyle(): maplibre-gl's
+            // diff-based style update path (small, incremental style changes) can
+            // fire 'style.load' synchronously from inside setStyle() itself —
+            // registering the listener afterwards would miss that emission and
+            // leave the choropleth (and `_styleLoaded`) never re-applied.
             this._map.once('style.load', () => {
                 this._styleLoaded = true;
                 this.applyChoropleth();
             });
+            this._map.setStyle(this.mapStyle);
         }
         else if (changed.has('choropleth') && this._styleLoaded) {
             this.applyChoropleth();
@@ -234,10 +291,13 @@ export class LyraMap extends LyraElement {
             : html `<div part="container"></div>`}
         ${this.legend.length
             ? html `<div part="legend">
-              ${this.legend.map((entry) => html `<div class="legend-row">
-                  <span part="legend-swatch" style=${`background:${entry.color}`}></span>
+              ${this.legend.map((entry) => {
+                const bg = sanitizeSwatchColor(entry.color);
+                return html `<div class="legend-row">
+                  <span part="legend-swatch" style=${styleMap(bg ? { background: bg } : {})}></span>
                   <span>${entry.label}</span>
-                </div>`)}
+                </div>`;
+            })}
             </div>`
             : nothing}
       </div>

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/map/map.stories.js

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+const legend = [
+    { color: '#5b8def', label: 'Low' },
+    { color: '#e5484d', label: 'High' },
+];
+const meta = {
+    title: 'Map',
+    component: 'lyra-map',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Demoed with a raster OpenStreetMap tile style since a vector style needs an API key.',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-map
+      style="height: 20rem"
+      center="[2.3522, 48.8566]"
+      zoom="4"
+      .legend=${legend}
+      .mapStyle=${{
+        version: 8,
+        sources: {
+            demo: {
+                type: 'raster',
+                tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                attribution: '© OpenStreetMap contributors',
+            },
+        },
+        layers: [{ id: 'demo', type: 'raster', source: 'demo' }],
+    }}
+    ></lyra-map>
+  `,
+};

package/dist/components/playback/playback.js

@@ -46,6 +46,12 @@ 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();
     }
     /** Start playback; no-op if there's nothing to advance through. */
     play() {

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

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

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Playback',
+    component: 'lyra-playback',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `<lyra-playback length="10" interval-ms="500" loop></lyra-playback>`,
+};

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Gallery: Story;

package/dist/components/skeleton/skeleton.stories.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Skeleton',
+    component: 'lyra-skeleton',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Gallery = {
+    render: () => html `
+    <div style="display:flex; gap:1rem; align-items:center;">
+      <lyra-skeleton width="10rem" height="1rem"></lyra-skeleton>
+      <lyra-skeleton variant="circle" width="3rem" height="3rem"></lyra-skeleton>
+      <lyra-skeleton variant="rect" effect="sheen" width="6rem" height="3rem"></lyra-skeleton>
+    </div>
+  `,
+};

package/dist/components/split/split.d.ts

@@ -25,6 +25,7 @@ export declare class LyraSplit extends LyraElement {
     private loadPersisted;
     private persist;
     private ensureSizes;
+    private onSlotChange;
     private clampPair;
     private applyDelta;
     private onPointerDown;

package/dist/components/split/split.js

@@ -29,6 +29,10 @@ export class LyraSplit extends LyraElement {
         this.dragIndex = -1;
         this.dragStartPos = 0;
         this.dragStartSizes = [];
+        this.onSlotChange = () => {
+            this.panelCount = this.children.length;
+            this.ensureSizes();
+        };
         this.onPointerDown = (e, index) => {
             this.dragIndex = index;
             this.dragStartPos = this.orientation === 'vertical' ? e.clientY : e.clientX;
@@ -86,7 +90,14 @@ export class LyraSplit extends LyraElement {
         const key = this.storageFullKey;
         if (!key)
             return;
-        const raw = localStorage.getItem(key);
+        let raw;
+        try {
+            raw = localStorage.getItem(key);
+        }
+        catch {
+            /* localStorage unavailable (private browsing, sandboxed iframe, etc.) */
+            return;
+        }
         if (!raw)
             return;
         try {
@@ -100,8 +111,14 @@ export class LyraSplit extends LyraElement {
     }
     persist() {
         const key = this.storageFullKey;
-        if (key)
+        if (!key)
+            return;
+        try {
             localStorage.setItem(key, JSON.stringify(this.sizes));
+        }
+        catch {
+            /* ignore persistence failures (e.g. quota exceeded, private browsing) */
+        }
     }
     ensureSizes() {
         if (this.sizes.length === this.panelCount && this.panelCount > 0)
@@ -137,20 +154,24 @@ export class LyraSplit extends LyraElement {
     render() {
         const dividers = [];
         for (let i = 0; i < this.panelCount - 1; i++) {
+            // The achievable max for this divider is bounded by its two adjacent
+            // panels, not the whole track — pushing past it would starve a panel
+            // further down the line even though this pair still has room.
+            const valueMax = (this.sizes[i] ?? 0) + (this.sizes[i + 1] ?? 0) - this.min;
             dividers.push(html `<div
         part="divider"
         role="separator"
         aria-orientation=${this.orientation === 'vertical' ? 'horizontal' : 'vertical'}
         aria-valuenow=${Math.round(this.sizes[i] ?? 0)}
         aria-valuemin=${this.min}
-        aria-valuemax=${100 - this.min}
+        aria-valuemax=${Math.round(valueMax)}
         tabindex="0"
         style=${`order:${i * 2 + 1}`}
         @pointerdown=${(e) => this.onPointerDown(e, i)}
         @keydown=${(e) => this.onDividerKeyDown(e, i)}
       ></div>`);
         }
-        return html `<div part="base"><slot></slot>${dividers}</div>`;
+        return html `<div part="base"><slot @slotchange=${this.onSlotChange}></slot>${dividers}</div>`;
     }
 }
 __decorate([

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/split/split.stories.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Split',
+    component: 'lyra-split',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-split style="height: 8rem; border: 1px solid #ddd">
+      <div style="padding: 0.5rem">Panel A</div>
+      <div style="padding: 0.5rem">Panel B</div>
+      <div style="padding: 0.5rem">Panel C</div>
+    </lyra-split>
+  `,
+};

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Gallery: Story;

package/dist/components/stat/stat.stories.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Stat',
+    component: 'lyra-stat',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Gallery = {
+    render: () => html `
+    <div style="display:flex; gap:1rem; flex-wrap:wrap;">
+      <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" variant="success"></lyra-stat>
+      <lyra-stat label="Errors" value="128" trend="-5.1" variant="danger"></lyra-stat>
+      <lyra-stat label="Sessions" value="9,204"></lyra-stat>
+    </div>
+  `,
+};

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Empty: Story;

package/dist/components/table/table.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+const rows = [
+    { id: 'a', name: 'Alpha', score: 92 },
+    { id: 'b', name: 'Beta', score: 81 },
+    { id: 'c', name: 'Gamma', score: 76 },
+];
+const columns = [
+    { key: 'name', label: 'Name', sortable: true, cell: (r) => r.name },
+    { key: 'score', label: 'Score', sortable: true, align: 'end', cell: (r) => r.score },
+];
+const meta = {
+    title: 'Table',
+    component: 'lyra-table',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `<lyra-table .columns=${columns} .rows=${rows}></lyra-table>`,
+};
+export const Empty = {
+    render: () => html `<lyra-table .columns=${columns} .rows=${[]}></lyra-table>`,
+};

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+const meta = {
+    title: 'TimeRange',
+    component: 'lyra-time-range',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `<lyra-time-range min="0" max="100" start="20" end="80"></lyra-time-range>`,
+};
+export const Disabled = {
+    render: () => html `<lyra-time-range min="0" max="100" start="20" end="80" disabled></lyra-time-range>`,
+};

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

@@ -32,6 +32,7 @@ export declare class LyraToastItem extends LyraElement {
     private timer?;
     private remaining;
     private startedAt;
+    private showRafId?;
     firstUpdated(): void;
     disconnectedCallback(): void;
     private startTimer;

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

@@ -49,6 +49,16 @@ export class LyraToastItem extends LyraElement {
         this.remaining = 0;
         this.startedAt = 0;
         this.resumeTimer = () => {
+            // Guard against an interleaved pointer+focus pause/resume sequence
+            // calling resumeTimer() twice without a pauseTimer() in between --
+            // without clearing here, the earlier setTimeout is orphaned (not
+            // tracked by `this.timer` anymore) and still fires on its own
+            // schedule, auto-dismissing the toast early even after it's paused
+            // again.
+            if (this.timer !== undefined) {
+                clearTimeout(this.timer);
+                this.timer = undefined;
+            }
             if (!isFinite(this.duration) || this.duration <= 0 || this.remaining <= 0)
                 return;
             this.startedAt = performance.now();
@@ -66,7 +76,8 @@ export class LyraToastItem extends LyraElement {
     firstUpdated() {
         // Assertive for actionable severities, polite otherwise.
         this.setAttribute('role', this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'status');
-        requestAnimationFrame(() => {
+        this.showRafId = requestAnimationFrame(() => {
+            this.showRafId = undefined;
             this.setAttribute('data-visible', '');
             this.emit('lyra-show');
             window.setTimeout(() => this.emit('lyra-after-show'), ANIM_MS);
@@ -75,6 +86,10 @@ export class LyraToastItem extends LyraElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        if (this.showRafId !== undefined) {
+            cancelAnimationFrame(this.showRafId);
+            this.showRafId = undefined;
+        }
         this.clearTimer();
     }
     startTimer() {