@aceshooting/lyra-ui 0.1.3 → 0.1.4

package/dist/components/heatmap/heatmap.js

@@ -8,14 +8,19 @@ import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
-import { linearAlpha, sqrtStep } from './heatmap-scale.js';
+import { linearAlpha, minMax, sqrtStep } from './heatmap-scale.js';
 import { styles } from './heatmap.styles.js';
+import { buildCalendarGrid, quartileBucket } from './calendar-grid.js';
 const PAD_LEFT = 60;
 const PAD_TOP = 20;
-const NO_DATA_FILL = 'rgba(128,128,128,0.25)';
+const FALLBACK_NO_DATA_FILL = 'rgba(128,128,128,0.25)';
 const RAMP_STEPS = 7;
 const FALLBACK_SCALE_LO = '#cde2fb';
 const FALLBACK_SCALE_HI = '#0969da';
+const CAL_PAD_LEFT = 28;
+const CAL_LABEL_H = 16;
+const CAL_CELL = 11;
+const CAL_GAP = 2;
 const HEX_RE = /^([0-9a-f]{3}|[0-9a-f]{6})$/i;
 const RGB_RE = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i;
 /**
@@ -117,6 +122,18 @@ export class LyraHeatmap extends LyraElement {
         this.cellSize = 22;
         this.valueLabel = 'value';
         this.scale = 'linear';
+        /**
+         * When set, `cellSize` is derived from the host's measured `clientWidth`
+         * on every draw (including ResizeObserver-triggered redraws) instead of
+         * the fixed `cell-size` attribute, so the grid actually fills the
+         * available width. Without this, canvas dimensions are computed purely
+         * from `PAD_LEFT + cols * cellSize`, so a resize-triggered redraw is a
+         * geometric no-op.
+         */
+        this.fitToWidth = false;
+        this.mode = 'matrix';
+        this.days = [];
+        this.bucketCount = 5;
         this.onDprChange = () => {
             this.watchDpr();
             this.draw();
@@ -135,16 +152,31 @@ export class LyraHeatmap extends LyraElement {
         this.dprQuery?.removeEventListener('change', this.onDprChange);
     }
     watchDpr() {
+        // A MediaQueryList's `matches` is fixed at creation time, so crossing the
+        // DPR threshold it was built for means building a fresh one for the new
+        // ratio — remove the previous instance's listener first, or it leaks
+        // (disconnectedCallback only ever cleans up whichever is current).
+        this.dprQuery?.removeEventListener('change', this.onDprChange);
         this.dprQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
         this.dprQuery.addEventListener('change', this.onDprChange);
     }
     willUpdate() {
-        const rows = this.rowLabels.length;
-        const cols = this.colLabels.length;
-        const flat = this.values.flat().filter((v) => v >= 0);
-        const range = flat.length ? `${Math.min(...flat)}–${Math.max(...flat)}` : 'no data';
+        const bounds = this.valueRange();
+        const range = bounds ? `${bounds[0]}–${bounds[1]}` : 'no data';
         this.setAttribute('role', 'img');
-        this.setAttribute('aria-label', `Heatmap of ${rows} × ${cols} cells, ${this.valueLabel} range ${range}`);
+        if (this.mode === 'calendar') {
+            this.setAttribute('aria-label', `Calendar heatmap of ${this.days.length} days, ${this.valueLabel} range ${range}`);
+        }
+        else {
+            const rows = this.rowLabels.length;
+            const cols = this.colLabels.length;
+            this.setAttribute('aria-label', `Heatmap of ${rows} × ${cols} cells, ${this.valueLabel} range ${range}`);
+        }
+    }
+    /** The real (non-no-data) value range across `values` (or `days` in calendar mode), or `null` if there is none. Shared by `willUpdate()`, `draw()`, and the legend. */
+    valueRange() {
+        const source = this.mode === 'calendar' ? this.days.map((d) => d.value) : this.values.flat();
+        return minMax(source.filter((v) => Number.isFinite(v) && v >= 0));
     }
     updated() {
         this.draw();
@@ -160,13 +192,74 @@ export class LyraHeatmap extends LyraElement {
     labelColor() {
         return getComputedStyle(this).getPropertyValue('--lyra-color-text-quiet').trim() || '#6b7280';
     }
+    /** Reads the customizable no-data cell fill off the host's computed style. */
+    noDataFill() {
+        return getComputedStyle(this).getPropertyValue('--lyra-heatmap-no-data-fill').trim() || FALLBACK_NO_DATA_FILL;
+    }
     draw() {
+        if (this.mode === 'calendar')
+            this.drawCalendar();
+        else
+            this.drawMatrix();
+    }
+    drawCalendar() {
+        if (!this.canvas)
+            return;
+        const { cells, weekCount, monthLabels } = buildCalendarGrid(this.days);
+        const w = CAL_PAD_LEFT + Math.max(1, weekCount) * (CAL_CELL + CAL_GAP);
+        const h = CAL_LABEL_H + 7 * (CAL_CELL + CAL_GAP);
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = w * dpr;
+        this.canvas.height = h * dpr;
+        this.canvas.style.width = `${w}px`;
+        this.canvas.style.height = `${h}px`;
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, w, h);
+        const sortedValues = cells
+            .map((c) => c.value)
+            .filter((v) => Number.isFinite(v) && v >= 0)
+            .sort((a, b) => a - b);
+        const [scaleLo, scaleHi] = this.scaleEndpoints();
+        const loRgb = resolveRgb(scaleLo, FALLBACK_SCALE_LO);
+        const hiRgb = resolveRgb(scaleHi, FALLBACK_SCALE_HI);
+        const buckets = Math.max(2, this.bucketCount);
+        const ramp = Array.from({ length: buckets }, (_, i) => mixRgb(loRgb, hiRgb, i / (buckets - 1)));
+        const noDataFill = this.noDataFill();
+        for (const cell of cells) {
+            const x = CAL_PAD_LEFT + cell.week * (CAL_CELL + CAL_GAP);
+            const y = CAL_LABEL_H + cell.weekday * (CAL_CELL + CAL_GAP);
+            ctx.fillStyle =
+                cell.value < 0 || !Number.isFinite(cell.value)
+                    ? noDataFill
+                    : ramp[quartileBucket(cell.value, sortedValues, buckets)];
+            ctx.fillRect(x, y, CAL_CELL, CAL_CELL);
+        }
+        ctx.fillStyle = this.labelColor();
+        ctx.font = '10px sans-serif';
+        for (const m of monthLabels) {
+            ctx.fillText(m.label, CAL_PAD_LEFT + m.week * (CAL_CELL + CAL_GAP), CAL_LABEL_H - 4);
+        }
+        const WEEKDAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
+        WEEKDAY_LABELS.forEach((label, weekday) => {
+            if (label)
+                ctx.fillText(label, 2, CAL_LABEL_H + weekday * (CAL_CELL + CAL_GAP) + CAL_CELL - 1);
+        });
+    }
+    drawMatrix() {
         if (!this.canvas)
             return;
         const rows = this.rowLabels.length;
         const cols = this.colLabels.length;
-        const w = PAD_LEFT + cols * this.cellSize;
-        const h = PAD_TOP + rows * this.cellSize;
+        let cellSize = this.cellSize;
+        if (this.fitToWidth && cols > 0) {
+            const hostWidth = this.clientWidth || PAD_LEFT + cols * this.cellSize;
+            cellSize = Math.max(4, (hostWidth - PAD_LEFT) / cols);
+        }
+        const w = PAD_LEFT + cols * cellSize;
+        const h = PAD_TOP + rows * cellSize;
         const dpr = window.devicePixelRatio || 1;
         this.canvas.width = w * dpr;
         this.canvas.height = h * dpr;
@@ -177,24 +270,29 @@ export class LyraHeatmap extends LyraElement {
             return;
         ctx.scale(dpr, dpr);
         ctx.clearRect(0, 0, w, h);
-        const flat = this.values.flat().filter((v) => v >= 0);
-        const lo = flat.length ? Math.min(...flat) : 0;
-        const hi = flat.length ? Math.max(...flat) : 1;
+        const bounds = this.valueRange();
+        const lo = bounds ? bounds[0] : 0;
+        const hi = bounds ? bounds[1] : 1;
         const [scaleLo, scaleHi] = this.scaleEndpoints();
         const loRgb = resolveRgb(scaleLo, FALLBACK_SCALE_LO);
         const hiRgb = resolveRgb(scaleHi, FALLBACK_SCALE_HI);
         const ramp = Array.from({ length: RAMP_STEPS }, (_, i) => mixRgb(loRgb, hiRgb, i / (RAMP_STEPS - 1)));
+        const noDataFill = this.noDataFill();
         for (let r = 0; r < rows; r++) {
             for (let c = 0; c < cols; c++) {
                 const v = this.values[r]?.[c] ?? -1;
-                const x = PAD_LEFT + c * this.cellSize;
-                const y = PAD_TOP + r * this.cellSize;
-                if (v < 0) {
-                    ctx.fillStyle = NO_DATA_FILL;
+                const x = PAD_LEFT + c * cellSize;
+                const y = PAD_TOP + r * cellSize;
+                if (v < 0 || !Number.isFinite(v)) {
+                    // `v < 0` alone is false for NaN, which would otherwise fall through to
+                    // the ramp branches below, compute an unparsable rgb(NaN, NaN, NaN)
+                    // fillStyle, and silently paint with whatever color the previous cell
+                    // left in `ctx.fillStyle` (canvas ignores unparsable assignments).
+                    ctx.fillStyle = noDataFill;
                 }
                 else if (this.scale === 'sqrt') {
                     const step = sqrtStep(v, hi, RAMP_STEPS);
-                    ctx.fillStyle = step < 0 ? NO_DATA_FILL : ramp[step];
+                    ctx.fillStyle = step < 0 ? noDataFill : ramp[step];
                 }
                 else {
                     // linearAlpha() returns a 0.1-1.0 ramp position; reused here as a
@@ -204,24 +302,27 @@ export class LyraHeatmap extends LyraElement {
                     const t = linearAlpha(v, lo, hi);
                     ctx.fillStyle = mixRgb(loRgb, hiRgb, t);
                 }
-                ctx.fillRect(x, y, this.cellSize - 1, this.cellSize - 1);
+                ctx.fillRect(x, y, cellSize - 1, cellSize - 1);
             }
         }
         ctx.fillStyle = this.labelColor();
         ctx.font = '10px sans-serif';
         this.rowLabels.forEach((label, r) => {
-            ctx.fillText(label, 4, PAD_TOP + r * this.cellSize + this.cellSize / 2 + 3);
+            ctx.fillText(label, 4, PAD_TOP + r * cellSize + cellSize / 2 + 3);
         });
         this.colLabels.forEach((label, c) => {
-            ctx.fillText(label, PAD_LEFT + c * this.cellSize + 2, PAD_TOP - 6);
+            ctx.fillText(label, PAD_LEFT + c * cellSize + 2, PAD_TOP - 6);
         });
     }
     render() {
+        const range = this.valueRange();
         return html `
       <div part="base">
         <canvas part="canvas"></canvas>
         <div part="legend">
+          <span part="legend-lo">${range ? range[0] : ''}</span>
           <span class="bar"></span>
+          <span part="legend-hi">${range ? range[1] : ''}</span>
           <span>${this.valueLabel}</span>
         </div>
       </div>
@@ -246,6 +347,18 @@ __decorate([
 __decorate([
     property()
 ], LyraHeatmap.prototype, "scale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'fit-to-width' })
+], LyraHeatmap.prototype, "fitToWidth", void 0);
+__decorate([
+    property()
+], LyraHeatmap.prototype, "mode", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraHeatmap.prototype, "days", void 0);
+__decorate([
+    property({ attribute: 'bucket-count', type: Number })
+], LyraHeatmap.prototype, "bucketCount", void 0);
 __decorate([
     query('canvas')
 ], LyraHeatmap.prototype, "canvas", void 0);

package/dist/components/heatmap/heatmap.styles.js

@@ -9,6 +9,10 @@ export const styles = css `
        the ramp without raw hex leaking into the public API. */
     --lyra-heatmap-scale-lo: #cde2fb;
     --lyra-heatmap-scale-hi: #0969da;
+    /* No-data cell fill (the -1 sentinel / NaN case) — same resolve-via-
+       getComputedStyle pattern as the ramp endpoints above, so hosts can
+       retheme it instead of it being a hardcoded literal in heatmap.ts. */
+    --lyra-heatmap-no-data-fill: rgba(128, 128, 128, 0.25);
   }
   [part='base'] {
     display: flex;

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

@@ -12,6 +12,13 @@ export interface ChoroplethLayer {
     field: string;
     stops: [number, string][];
 }
+export interface MapMarker {
+    id?: string;
+    lngLat: [number, number];
+    color?: string;
+    label?: string;
+    html?: string;
+}
 /**
  * `<lyra-map>` — a maplibre-gl wrapper with a declarative legend and
  * choropleth GeoJSON layer, plus a raw `map` escape hatch. Requires the
@@ -29,17 +36,25 @@ export declare class LyraMap extends LyraElement {
     mapStyle: StyleSpecification | string;
     legend: LegendEntry[];
     choropleth?: ChoroplethLayer;
+    markers: MapMarker[];
     /** True until the lazy-loaded `maplibre-gl` peer dependency has settled (success or failure). */
     private loading;
     private containerEl?;
     private _map?;
     private _styleLoaded;
+    private _appliedChoroplethSourceId?;
+    private _appliedFillLayerId?;
+    private _maplibreModule;
+    private _markerInstances;
     /** The raw `maplibregl.Map` instance — escape hatch for anything this wrapper doesn't expose. */
     get map(): MaplibreMap | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private applyChoropleth;
+    /** Removes whatever choropleth layer/source is currently applied, if any. */
+    private removeChoropleth;
+    private applyMarkers;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/map/map.js

@@ -41,6 +41,7 @@ export class LyraMap extends LyraElement {
         this.zoom = 2;
         this.mapStyle = DEFAULT_STYLE;
         this.legend = [];
+        this.markers = [];
         /** True until the lazy-loaded `maplibre-gl` peer dependency has settled (success or failure). */
         this.loading = true;
         // Tracks whether the style has fired its initial 'load' (i.e. addSource/
@@ -50,6 +51,7 @@ export class LyraMap extends LyraElement {
         // own GeoJSON source is added — which would wrongly block subsequent
         // choropleth updates from ever re-running.
         this._styleLoaded = false;
+        this._markerInstances = new Map();
     }
     static { this.styles = [LyraElement.styles, styles]; }
     /** The raw `maplibregl.Map` instance — escape hatch for anything this wrapper doesn't expose. */
@@ -62,6 +64,7 @@ export class LyraMap extends LyraElement {
             this.loading = false;
             if (!mod)
                 return;
+            this._maplibreModule = mod;
             // `[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;
@@ -80,14 +83,11 @@ export class LyraMap extends LyraElement {
             this._map.on('load', () => {
                 this._styleLoaded = true;
                 this.applyChoropleth();
+                this.applyMarkers();
                 this.emit('lyra-map-load');
             });
             this._map.on('click', (e) => {
-                // Guard on the fill layer actually existing, not just `this.choropleth` being
-                // set: applyChoropleth() only adds it once the style has finished loading, so
-                // a click landing in that window (choropleth set before the map's own 'load')
-                // would otherwise query a layer id maplibre-gl doesn't know about yet.
-                const fillLayerId = this.choropleth ? `${this.choropleth.sourceId}-fill` : undefined;
+                const fillLayerId = this._appliedFillLayerId;
                 const features = fillLayerId && this._map.getLayer(fillLayerId)
                     ? this._map.queryRenderedFeatures(e.point, { layers: [fillLayerId] })
                     : [];
@@ -103,24 +103,53 @@ export class LyraMap extends LyraElement {
         this._map?.remove();
         this._map = undefined;
         this._styleLoaded = false;
+        this._appliedChoroplethSourceId = undefined;
+        this._appliedFillLayerId = undefined;
+        for (const marker of this._markerInstances.values())
+            marker.remove();
+        this._markerInstances.clear();
     }
     updated(changed) {
         if (this.loading)
             this.setAttribute('aria-busy', 'true');
         else
             this.removeAttribute('aria-busy');
-        if (changed.has('choropleth') && this._styleLoaded)
+        if (changed.has('mapStyle') && this._map) {
+            // A style change wipes every layer/source maplibre-gl knows about, so
+            // the previously-applied choropleth bookkeeping is stale the instant
+            // setStyle() is called — clear it and re-apply once the new style's
+            // own 'style.load' fires (mirrors the constructor's 'load' handshake).
+            this._styleLoaded = false;
+            this._appliedChoroplethSourceId = undefined;
+            this._appliedFillLayerId = undefined;
+            this._map.setStyle(this.mapStyle);
+            this._map.once('style.load', () => {
+                this._styleLoaded = true;
+                this.applyChoropleth();
+            });
+        }
+        else if (changed.has('choropleth') && this._styleLoaded) {
             this.applyChoropleth();
+        }
         if (changed.has('center') && this._map)
             this._map.setCenter(this.center);
         if (changed.has('zoom') && this._map)
             this._map.setZoom(this.zoom);
+        if (changed.has('markers') && this._map)
+            this.applyMarkers();
     }
     applyChoropleth() {
-        if (!this.choropleth || !this._map)
+        if (!this._map)
             return;
+        if (!this.choropleth) {
+            this.removeChoropleth();
+            return;
+        }
         const { sourceId, geojson, field, stops } = this.choropleth;
         const fillLayerId = `${sourceId}-fill`;
+        if (this._appliedChoroplethSourceId && this._appliedChoroplethSourceId !== sourceId) {
+            this.removeChoropleth();
+        }
         const colorExpr = ['interpolate', ['linear'], ['get', field]];
         for (const [value, color] of stops)
             colorExpr.push(value, color);
@@ -141,6 +170,56 @@ export class LyraMap extends LyraElement {
                 paint: { 'fill-color': colorExpr, 'fill-opacity': 0.75 },
             });
         }
+        this._appliedChoroplethSourceId = sourceId;
+        this._appliedFillLayerId = fillLayerId;
+    }
+    /** Removes whatever choropleth layer/source is currently applied, if any. */
+    removeChoropleth() {
+        if (!this._map || !this._appliedChoroplethSourceId)
+            return;
+        if (this._appliedFillLayerId && this._map.getLayer(this._appliedFillLayerId)) {
+            this._map.removeLayer(this._appliedFillLayerId);
+        }
+        if (this._map.getSource(this._appliedChoroplethSourceId)) {
+            this._map.removeSource(this._appliedChoroplethSourceId);
+        }
+        this._appliedChoroplethSourceId = undefined;
+        this._appliedFillLayerId = undefined;
+    }
+    async applyMarkers() {
+        if (!this._map)
+            return;
+        const mod = await loadMaplibre();
+        if (!mod)
+            return;
+        const visible = new Set();
+        for (const m of this.markers) {
+            const key = m.id ?? `${m.lngLat[0]},${m.lngLat[1]}`;
+            visible.add(key);
+            const existing = this._markerInstances.get(key);
+            if (!existing) {
+                const marker = new mod.Marker(m.color ? { color: m.color } : undefined).setLngLat(m.lngLat);
+                if (m.html || m.label) {
+                    const popup = new mod.Popup({ offset: 12 });
+                    if (m.html)
+                        popup.setHTML(m.html);
+                    else if (m.label)
+                        popup.setText(m.label);
+                    marker.setPopup(popup);
+                }
+                marker.addTo(this._map);
+                this._markerInstances.set(key, marker);
+            }
+            else {
+                existing.setLngLat(m.lngLat);
+            }
+        }
+        for (const [key, marker] of this._markerInstances) {
+            if (!visible.has(key)) {
+                marker.remove();
+                this._markerInstances.delete(key);
+            }
+        }
     }
     render() {
         // Lit's own whitespace/comment marker nodes around the `${...}` binding mean
@@ -180,6 +259,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], LyraMap.prototype, "choropleth", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraMap.prototype, "markers", void 0);
 __decorate([
     state()
 ], LyraMap.prototype, "loading", void 0);

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

@@ -2,8 +2,8 @@ import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 /**
  * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
- * interval (play/pause), like the manual play-timers duplicated across
- * per-repo time-series dashboards.
+ * interval (play/pause), the common building block behind ad-hoc
+ * play-timers in time-series dashboards.
  *
  * @customElement lyra-playback
  * @event lyra-play

package/dist/components/playback/playback.js

@@ -12,8 +12,8 @@ import { playIcon, pauseIcon } from '../../internal/icons.js';
 import { styles } from './playback.styles.js';
 /**
  * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
- * interval (play/pause), like the manual play-timers duplicated across
- * per-repo time-series dashboards.
+ * interval (play/pause), the common building block behind ad-hoc
+ * play-timers in time-series dashboards.
  *
  * @customElement lyra-playback
  * @event lyra-play

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

@@ -3,8 +3,8 @@ import { LyraElement } from '../../internal/lyra-element.js';
 export type SkeletonVariant = 'text' | 'circle' | 'rect';
 export type SkeletonEffect = 'pulse' | 'sheen';
 /**
- * `<lyra-skeleton>` — a loading placeholder. First-party invention; every
- * surveyed repo reinvents this as a bespoke `animate-pulse` div.
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention, standing
+ * in for the bespoke `animate-pulse` div most dashboards hand-roll.
  *
  * @customElement lyra-skeleton
  * @csspart base - The placeholder shape.

package/dist/components/skeleton/skeleton.js

@@ -11,8 +11,8 @@ import { defineElement } from '../../internal/prefix.js';
 import { srOnly } from '../../internal/a11y.js';
 import { styles } from './skeleton.styles.js';
 /**
- * `<lyra-skeleton>` — a loading placeholder. First-party invention; every
- * surveyed repo reinvents this as a bespoke `animate-pulse` div.
+ * `<lyra-skeleton>` — a loading placeholder. First-party invention, standing
+ * in for the bespoke `animate-pulse` div most dashboards hand-roll.
  *
  * @customElement lyra-skeleton
  * @csspart base - The placeholder shape.

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

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

package/dist/components/sparkline/sparkline.stories.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+const DATA = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
+const meta = {
+    title: 'Sparkline',
+    component: 'lyra-sparkline',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Line = {
+    render: () => html `<lyra-sparkline type="line" .values=${DATA}></lyra-sparkline>`,
+};
+export const Area = {
+    render: () => html `<lyra-sparkline type="area" .values=${DATA}></lyra-sparkline>`,
+};
+export const Bar = {
+    render: () => html `<lyra-sparkline type="bar" .values=${DATA}></lyra-sparkline>`,
+};

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

@@ -4,7 +4,7 @@ export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
 export type StatGoodDirection = 'up' | 'down';
 /**
  * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
- * "metric row" / "KPI card" pattern reinvented in every surveyed repo.
+ * "metric row" / "KPI card" pattern common to dashboard UIs.
  *
  * @customElement lyra-stat
  * @slot - Leading icon.

package/dist/components/stat/stat.js

@@ -12,7 +12,7 @@ import { chevronIcon } from '../../internal/icons.js';
 import { styles } from './stat.styles.js';
 /**
  * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
- * "metric row" / "KPI card" pattern reinvented in every surveyed repo.
+ * "metric row" / "KPI card" pattern common to dashboard UIs.
  *
  * @customElement lyra-stat
  * @slot - Leading icon.
@@ -33,8 +33,7 @@ export class LyraStat extends LyraElement {
         this.goodDirection = 'up';
         // Same fix `lyra-empty` already established: `[part]:empty` never matches
         // because the part always contains a literal `<slot>` child. Track real
-        // slot assignment in JS instead (2026-07-10 audit, "dashboard-atoms"
-        // §lyra-stat, High).
+        // slot assignment in JS instead.
         this.hasIcon = false;
         this.hasCaptionSlot = false;
         this.onIconSlotChange = (e) => {
@@ -55,10 +54,10 @@ export class LyraStat extends LyraElement {
         const hasTrend = !isNaN(this.trend);
         const rawDirection = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
         const isGood = rawDirection === 'flat' ? null : rawDirection === this.goodDirection;
-        // 2026-07-10 design review, "dashboard-atoms" §lyra-stat: the trend
-        // pill rendered literal ▲/▼ glyphs — font-dependent and inconsistent
-        // with the rest of the icon set — swapped for the shared chevronIcon(),
-        // rotated per direction via CSS on the wrapping [part='trend'].
+        // The trend pill previously rendered literal ▲/▼ glyphs — font-dependent
+        // and inconsistent with the rest of the icon set — swapped for the
+        // shared chevronIcon(), rotated per direction via CSS on the wrapping
+        // [part='trend'].
         const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
         const hasCaption = this.hasCaptionSlot || this.caption.length > 0;
         return html `

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

@@ -14,8 +14,7 @@ export interface TableColumn<T> {
  * Header/row activation is delegated: one `click` and one `keydown`
  * listener on `<table>` resolve the target via `closest('[data-col-key]'
  * | '[data-row-key]')` and a key→object lookup map, instead of allocating
- * fresh per-column/per-row closures on every render (2026-07-10 audit,
- * "dashboard-atoms" §lyra-table, Medium).
+ * fresh per-column/per-row closures on every render.
  *
  * @customElement lyra-table
  * @event lyra-sort - A sortable header was activated. `detail: { key }`.

package/dist/components/table/table.js

@@ -18,8 +18,7 @@ import '../empty/empty.js';
  * Header/row activation is delegated: one `click` and one `keydown`
  * listener on `<table>` resolve the target via `closest('[data-col-key]'
  * | '[data-row-key]')` and a key→object lookup map, instead of allocating
- * fresh per-column/per-row closures on every render (2026-07-10 audit,
- * "dashboard-atoms" §lyra-table, Medium).
+ * fresh per-column/per-row closures on every render.
  *
  * @customElement lyra-table
  * @event lyra-sort - A sortable header was activated. `detail: { key }`.

package/dist/components/table/table.styles.js

@@ -51,9 +51,8 @@ export const styles = css `
   }
   /* Rotate the wrapping part element, not the svg — internal/icons.ts's
      documented contract ("callers ... rotate the wrapping part element via
-     CSS transform: rotate(...), not the svg"). Design-review finding on
-     Task 3 (lyra-table sort indicator): this previously rotated the inner
-     <svg> directly. */
+     CSS transform: rotate(...), not the svg"). This previously rotated the
+     inner <svg> directly. */
   [part='sort-icon'][data-dir='asc'] {
     transform: rotate(-90deg);
   }

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

@@ -147,10 +147,10 @@ export class LyraTimeRange extends LyraElement {
             this.end = Math.min(hi, Math.max(lo, this.end));
         }
         // Keep start <= end regardless of which side changed (a controlled
-        // caller may set only `end`, e.g. two-way-binding an external store —
-        // see finding in 2026-07-09 tier2 review). The handle that just moved
-        // wins; the other side is pulled to meet it, mirroring the direction
-        // `clamp()` already uses during interactive dragging.
+        // 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')) {
             this.start = Math.min(this.start, this.end);
         }

package/dist/components/toast/toast.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 Triggers: Story;