@aceshooting/lyra-ui 6.1.0 → 7.0.0

package/dist/components/data/heatmap/heatmap.class.js

@@ -11,6 +11,8 @@ import { LyraElement } from '../../../internal/lyra-element.js';
 import { srOnly } from '../../../internal/a11y.js';
 import { finiteInteger, finiteRange } from '../../../internal/numbers.js';
 import { getScratchCtx } from '../../../internal/canvas.js';
+import { resolveCssLength } from '../../../internal/css-length.js';
+import { ThemeWatcher } from '../../../internal/theme-watcher.js';
 import { linearAlpha, linearBucket, minMax, sqrtStep } from './heatmap-scale.js';
 import { styles } from './heatmap.styles.js';
 import { buildCalendarGrid, parseIsoDate, quartileBucket } from './calendar-grid.js';
@@ -32,6 +34,7 @@ const CAL_GAP = 2;
 /** Matrix mode's original fixed cell size — the effective fallback the
  *  `cellSize` accessor uses in matrix mode when left unset. */
 const DEFAULT_MATRIX_CELL_SIZE = 22;
+const DEFAULT_ACCESSIBLE_TARGET_SIZE_PX = 40;
 const DEFAULT_BUCKET_COUNT = 5;
 /**
  * Hard lower bound on a `fitToWidth`-derived cell size, in both modes. A grid squeezed below this
@@ -104,6 +107,21 @@ function warnInvalidColor(color) {
     console.warn(`<lr-heatmap> could not parse "${color}" (set via --lr-heatmap-scale-lo/-hi) as a CSS ` +
         'color; falling back to the default ramp endpoint.');
 }
+let warnedNoCanvasContext = false;
+/** Distinct from `warnInvalidColor()`: that one means "this color string is not valid CSS", this
+ *  one means "the environment can't tell us, because there is no canvas 2D context to parse it
+ *  with". Both end at the same fallback, so without separate messages a consumer debugging a wrong
+ *  ramp color cannot tell a typo'd token from a headless/canvas-disabled environment. Warned once
+ *  per page, not once per color: the cause is environmental, and `resolveRgb()` runs per ramp
+ *  endpoint on every draw pass. */
+function warnNoCanvasContext() {
+    if (warnedNoCanvasContext)
+        return;
+    warnedNoCanvasContext = true;
+    console.warn('<lr-heatmap>: no 2D canvas context is available in this environment; color resolution ' +
+        'for non-hex/non-rgb values (e.g. oklch(), color(srgb ...), named colors) will fall back ' +
+        'to the given default instead of resolving the requested color.');
+}
 /**
  * Normalizes a bucket count to the safe, renderable range. Non-finite values
  * restore the public default; finite values are floored and clamped to
@@ -174,8 +192,10 @@ export function resolveRgb(color, fallbackHex) {
     if (direct)
         return direct;
     const ctx = getScratchCtx();
-    if (!ctx)
+    if (!ctx) {
+        warnNoCanvasContext();
         return fallback;
+    }
     const sentinel = 'rgb(1, 2, 3)';
     ctx.fillStyle = sentinel;
     const sentinelNormalized = ctx.fillStyle;
@@ -313,8 +333,105 @@ function mixRgb(from, to, t) {
  * @cssprop [--lr-heatmap-color-steps-gradient=linear-gradient(to right, var(--lr-heatmap-scale-lo), var(--lr-heatmap-scale-hi))] - Gradient painted on the continuous legend bar. Set on the host by the component itself while `colorSteps` is supplied, and removed again when it is not; the fallback is the two-endpoint scale ramp.
  */
 export class LyraHeatmap extends LyraElement {
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    static get observedAttributes() {
+        return [...new Set([...super.observedAttributes, 'role'])];
+    }
+    /**
+     * Effective per-cell size (CSS px). Originally matrix-mode only; now also
+     * governs calendar mode's cell size (replacing the previously hardcoded
+     * 11px constant there) once explicitly set. Left unset, each mode keeps
+     * its own original default — `DEFAULT_MATRIX_CELL_SIZE` (22) in matrix
+     * mode, `CAL_CELL` (11) in calendar mode — so an existing consumer who
+     * never touches `cellSize` sees no change in either mode. Set explicitly
+     * (attribute or property), the same value governs both modes alike.
+     */
+    get cellSize() {
+        return this._cellSize ?? (this.mode === 'calendar' ? CAL_CELL : DEFAULT_MATRIX_CELL_SIZE);
+    }
+    set cellSize(value) {
+        const oldValue = this._cellSize;
+        // A non-finite, zero, or negative explicit size would divide-by-zero (or draw inverted
+        // geometry) in every cell-position calculation derived from it -- calendar mode's
+        // columnXFor()/weekAtX()/weekdayAtY()/calendarCellSize() and matrix mode's matrixCellSize()
+        // all divide by cellSize (directly or via + CAL_GAP). Clamp to a sane positive floor, falling
+        // back to the current mode-appropriate default (mirroring the getter's own fallback) for a
+        // non-finite input.
+        this._cellSize = finiteRange(value, this.mode === 'calendar' ? CAL_CELL : DEFAULT_MATRIX_CELL_SIZE, 1);
+        this.requestUpdate('cellSize', oldValue);
+    }
+    /**
+     * Ceiling (CSS px) on the cell size `fitToWidth` derives from the host width, in **both** modes.
+     * Ignored entirely while `fitToWidth` is unset — an explicit `cellSize` is never clamped, since
+     * it is already an exact request.
+     *
+     * Exists because `fitToWidth` divides the whole host width across the grid: a 5-week calendar or
+     * a 3-column matrix in a wide pane produces enormous cells. Capping them keeps the cell a cell.
+     * The canvas is sized *from the clamped cell size*, so a capped grid deliberately leaves the
+     * remaining host width unfilled (the canvas simply ends early) rather than stretching to fill it
+     * — position it with normal CSS on the host if you want it centered or end-aligned.
+     *
+     * Unset (the default) reproduces today's exact fit-to-width behavior. Clamped to at least the
+     * built-in `4`px floor; a non-finite value (or an empty attribute) means unset rather than `0`.
+     * When both clamps are set and `maxCellSize < minCellSize`, the ceiling wins — the same
+     * precedence `finiteRange()` itself applies.
+     */
+    get maxCellSize() {
+        return this._maxCellSize;
+    }
+    set maxCellSize(value) {
+        const oldValue = this._maxCellSize;
+        this._maxCellSize = normalizeCellSizeClamp(value);
+        this.requestUpdate('maxCellSize', oldValue);
+    }
+    /**
+     * Floor (CSS px) under the cell size `fitToWidth` derives from the host width, in **both** modes
+     * — the mirror of `maxCellSize`, and likewise ignored while `fitToWidth` is unset. Raises the
+     * built-in `FIT_MIN_CELL` (4px) floor so a year-long calendar in a narrow pane keeps legible,
+     * hit-testable cells and overflows its host instead of collapsing to hairlines.
+     *
+     * Can only raise that floor, never lower it: a value below `4` normalizes to `4`. Unset (the
+     * default) reproduces today's exact fit-to-width behavior, and a non-finite value (or an empty
+     * attribute) means unset.
+     */
+    get minCellSize() {
+        return this._minCellSize;
+    }
+    set minCellSize(value) {
+        const oldValue = this._minCellSize;
+        this._minCellSize = normalizeCellSizeClamp(value);
+        this.requestUpdate('minCellSize', oldValue);
+    }
+    /**
+     * Calendar mode only (no-op in matrix mode): anchors the calendar grid at
+     * a different weekday instead of always Sunday — `0`-`6`, same numbering
+     * as `CalendarCellPos.weekday` (`0` Sunday .. `6` Saturday, matching
+     * `CalendarCell.weekday`'s existing convention). Threaded into
+     * `buildCalendarGrid()`. Defaults to `0` (Sunday), unchanged from before
+     * this property existed. Normalized into `[0, 6]` via modulo wrap (not
+     * clamp) -- mirrors `buildCalendarGrid()`'s own `(x + 7) % 7` weekday-wrapping
+     * convention (already used elsewhere in this file), so e.g. `7` wraps to `0`
+     * (Sunday) and `-1` wraps to `6` (Saturday) rather than being clamped to the
+     * nearest in-range end. A non-finite input falls back to `0`.
+     */
+    get firstDayOfWeek() {
+        return this._firstDayOfWeek;
+    }
+    set firstDayOfWeek(value) {
+        const oldValue = this._firstDayOfWeek;
+        this._firstDayOfWeek = ((finiteInteger(value, 0) % 7) + 7) % 7;
+        this.requestUpdate('firstDayOfWeek', oldValue);
+    }
+    get bucketCount() {
+        return this._bucketCount;
+    }
+    set bucketCount(value) {
+        const oldValue = this._bucketCount;
+        this._bucketCount = normalizeBucketCount(value);
+        this.requestUpdate('bucketCount', oldValue);
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.rowLabels = [];
         this.colLabels = [];
         this.values = [];
@@ -364,7 +481,6 @@ export class LyraHeatmap extends LyraElement {
          * consumer updates `selectedCell` when it wants `aria-pressed` to change.
          */
         this.accessibleCells = false;
-        this.themeRefreshQueued = false;
         /** The current value range, refreshed once per update cycle by `willUpdate()`. See `computeValueRange()`. */
         this.cachedValueRange = null;
         /**
@@ -401,36 +517,14 @@ export class LyraHeatmap extends LyraElement {
         this.focusedCell = null;
         /** Text of the visually-hidden `aria-live="polite"` status announcement, refreshed on every focus move. */
         this.liveText = '';
-        /**
-         * Whether `role`/`aria-label` were present on the host *before* this
-         * element's own code ever wrote to them — snapshotted once, in the very
-         * first `willUpdate()` (guarded by `hasUpdated`, which Lit only flips to
-         * `true` after that first update commits). Re-checking `hasAttribute()` on
-         * every update instead would self-poison: once this element writes its own
-         * default `aria-label` on the first render, `hasAttribute('aria-label')`
-         * is permanently `true` afterwards, which would wrongly look like an
-         * author-supplied value and freeze the label instead of refreshing it as
-         * `values`/`days` change on later updates.
-         */
-        this.authorSuppliedRole = false;
-        this.authorSuppliedAriaLabel = false;
+        this.accessibleTargetSizePx = DEFAULT_ACCESSIBLE_TARGET_SIZE_PX;
+        this.authorRole = null;
+        this.authorAriaLabel = null;
+        this.syncingGeneratedSemantics = false;
         this.onDprChange = () => {
             this.watchDpr();
             this.draw();
         };
-        this.onColorSchemeChange = () => {
-            this.refreshTheme();
-        };
-        this.queueThemeRefresh = () => {
-            if (this.themeRefreshQueued)
-                return;
-            this.themeRefreshQueued = true;
-            queueMicrotask(() => {
-                this.themeRefreshQueued = false;
-                if (this.isConnected)
-                    this.refreshTheme();
-            });
-        };
         this.scheduleDraw = () => {
             if (this.drawRafId !== undefined)
                 return;
@@ -500,115 +594,35 @@ export class LyraHeatmap extends LyraElement {
             this.onKeyDown(e);
             this.focusAccessibleCell(this.focusedCell);
         };
+        // Redraws when prefers-color-scheme flips or an ancestor's theme attribute mutates. The
+        // controller registers itself with the host via addController().
+        new ThemeWatcher(this, () => this.refreshTheme());
     }
-    static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    /**
-     * Effective per-cell size (CSS px). Originally matrix-mode only; now also
-     * governs calendar mode's cell size (replacing the previously hardcoded
-     * 11px constant there) once explicitly set. Left unset, each mode keeps
-     * its own original default — `DEFAULT_MATRIX_CELL_SIZE` (22) in matrix
-     * mode, `CAL_CELL` (11) in calendar mode — so an existing consumer who
-     * never touches `cellSize` sees no change in either mode. Set explicitly
-     * (attribute or property), the same value governs both modes alike.
-     */
-    get cellSize() {
-        return this._cellSize ?? (this.mode === 'calendar' ? CAL_CELL : DEFAULT_MATRIX_CELL_SIZE);
-    }
-    set cellSize(value) {
-        const oldValue = this._cellSize;
-        // A non-finite, zero, or negative explicit size would divide-by-zero (or draw inverted
-        // geometry) in every cell-position calculation derived from it -- calendar mode's
-        // columnXFor()/weekAtX()/weekdayAtY()/calendarCellSize() and matrix mode's matrixCellSize()
-        // all divide by cellSize (directly or via + CAL_GAP). Clamp to a sane positive floor, falling
-        // back to the current mode-appropriate default (mirroring the getter's own fallback) for a
-        // non-finite input.
-        this._cellSize = finiteRange(value, this.mode === 'calendar' ? CAL_CELL : DEFAULT_MATRIX_CELL_SIZE, 1);
-        this.requestUpdate('cellSize', oldValue);
-    }
-    /**
-     * Ceiling (CSS px) on the cell size `fitToWidth` derives from the host width, in **both** modes.
-     * Ignored entirely while `fitToWidth` is unset — an explicit `cellSize` is never clamped, since
-     * it is already an exact request.
-     *
-     * Exists because `fitToWidth` divides the whole host width across the grid: a 5-week calendar or
-     * a 3-column matrix in a wide pane produces enormous cells. Capping them keeps the cell a cell.
-     * The canvas is sized *from the clamped cell size*, so a capped grid deliberately leaves the
-     * remaining host width unfilled (the canvas simply ends early) rather than stretching to fill it
-     * — position it with normal CSS on the host if you want it centered or end-aligned.
-     *
-     * Unset (the default) reproduces today's exact fit-to-width behavior. Clamped to at least the
-     * built-in `4`px floor; a non-finite value (or an empty attribute) means unset rather than `0`.
-     * When both clamps are set and `maxCellSize < minCellSize`, the ceiling wins — the same
-     * precedence `finiteRange()` itself applies.
-     */
-    get maxCellSize() {
-        return this._maxCellSize;
-    }
-    set maxCellSize(value) {
-        const oldValue = this._maxCellSize;
-        this._maxCellSize = normalizeCellSizeClamp(value);
-        this.requestUpdate('maxCellSize', oldValue);
-    }
-    /**
-     * Floor (CSS px) under the cell size `fitToWidth` derives from the host width, in **both** modes
-     * — the mirror of `maxCellSize`, and likewise ignored while `fitToWidth` is unset. Raises the
-     * built-in `FIT_MIN_CELL` (4px) floor so a year-long calendar in a narrow pane keeps legible,
-     * hit-testable cells and overflows its host instead of collapsing to hairlines.
-     *
-     * Can only raise that floor, never lower it: a value below `4` normalizes to `4`. Unset (the
-     * default) reproduces today's exact fit-to-width behavior, and a non-finite value (or an empty
-     * attribute) means unset.
-     */
-    get minCellSize() {
-        return this._minCellSize;
-    }
-    set minCellSize(value) {
-        const oldValue = this._minCellSize;
-        this._minCellSize = normalizeCellSizeClamp(value);
-        this.requestUpdate('minCellSize', oldValue);
-    }
-    /**
-     * Calendar mode only (no-op in matrix mode): anchors the calendar grid at
-     * a different weekday instead of always Sunday — `0`-`6`, same numbering
-     * as `CalendarCellPos.weekday` (`0` Sunday .. `6` Saturday, matching
-     * `CalendarCell.weekday`'s existing convention). Threaded into
-     * `buildCalendarGrid()`. Defaults to `0` (Sunday), unchanged from before
-     * this property existed. Normalized into `[0, 6]` via modulo wrap (not
-     * clamp) -- mirrors `buildCalendarGrid()`'s own `(x + 7) % 7` weekday-wrapping
-     * convention (already used elsewhere in this file), so e.g. `7` wraps to `0`
-     * (Sunday) and `-1` wraps to `6` (Saturday) rather than being clamped to the
-     * nearest in-range end. A non-finite input falls back to `0`.
-     */
-    get firstDayOfWeek() {
-        return this._firstDayOfWeek;
-    }
-    set firstDayOfWeek(value) {
-        const oldValue = this._firstDayOfWeek;
-        this._firstDayOfWeek = ((finiteInteger(value, 0) % 7) + 7) % 7;
-        this.requestUpdate('firstDayOfWeek', oldValue);
-    }
-    get bucketCount() {
-        return this._bucketCount;
-    }
-    set bucketCount(value) {
-        const oldValue = this._bucketCount;
-        this._bucketCount = normalizeBucketCount(value);
-        this.requestUpdate('bucketCount', oldValue);
+    attributeChangedCallback(name, oldValue, value) {
+        super.attributeChangedCallback(name, oldValue, value);
+        if (oldValue === value || this.syncingGeneratedSemantics)
+            return;
+        if (name === 'role')
+            this.authorRole = value;
+        if (name === 'aria-label')
+            this.authorAriaLabel = value;
     }
     connectedCallback() {
         super.connectedCallback();
+        this.refreshAccessibleTargetSize();
         this.resizeObserver = new ResizeObserver(this.scheduleDraw);
         this.resizeObserver.observe(this);
         this.watchDpr();
-        this.watchTheme();
+        // Theme watching is owned by the ThemeWatcher controller (connect/disconnect lifecycle too).
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.hoverCell = null;
+        this.focusedCell = null;
+        this.liveText = '';
+        this.canvasHasContent = false;
         this.resizeObserver?.disconnect();
         this.dprQuery?.removeEventListener('change', this.onDprChange);
-        this.colorSchemeQuery?.removeEventListener('change', this.onColorSchemeChange);
-        this.themeObserver?.disconnect();
-        this.themeObserver = undefined;
         if (this.drawRafId !== undefined) {
             cancelAnimationFrame(this.drawRafId);
             this.drawRafId = undefined;
@@ -623,28 +637,6 @@ export class LyraHeatmap extends LyraElement {
         this.dprQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
         this.dprQuery.addEventListener('change', this.onDprChange);
     }
-    watchTheme() {
-        const view = this.ownerDocument.defaultView;
-        if (!view)
-            return;
-        this.colorSchemeQuery = view.matchMedia?.('(prefers-color-scheme: dark)');
-        this.colorSchemeQuery?.addEventListener('change', this.onColorSchemeChange);
-        if (typeof MutationObserver === 'undefined')
-            return;
-        const targets = [this];
-        let parent = this.parentElement;
-        while (parent) {
-            targets.push(parent);
-            parent = parent.parentElement;
-        }
-        this.themeObserver = new MutationObserver(this.queueThemeRefresh);
-        for (const target of targets) {
-            this.themeObserver.observe(target, {
-                attributes: true,
-                attributeFilter: ['class', 'style', 'data-theme', 'data-color-scheme'],
-            });
-        }
-    }
     willUpdate(changed) {
         if (changed.has('mode') ||
             changed.has('rowLabels') ||
@@ -685,10 +677,6 @@ export class LyraHeatmap extends LyraElement {
             const { firstWeekStart, weekCount } = this.cachedCalendarGrid;
             this.cachedCalendarDateByPos = Array.from({ length: weekCount * 7 }, (_, index) => isoDateAtOffset(firstWeekStart, index));
         }
-        if (!this.hasUpdated) {
-            this.authorSuppliedRole = this.hasAttribute('role');
-            this.authorSuppliedAriaLabel = this.hasAttribute('aria-label');
-        }
         if (changed.has('colorSteps') || !this.hasUpdated) {
             if (this.colorSteps && this.colorSteps.length >= 2) {
                 this.style.setProperty('--lr-heatmap-color-steps-gradient', `linear-gradient(to right, ${this.colorSteps.join(', ')})`);
@@ -716,34 +704,40 @@ export class LyraHeatmap extends LyraElement {
         // tech to flatten the whole subtree, hiding both from the accessibility
         // tree; it would also silently overwrite any author-supplied
         // role/aria-label on every update.
-        if (!this.authorSuppliedRole)
-            this.setAttribute('role', 'group');
-        if (!this.authorSuppliedAriaLabel) {
-            let label;
-            if (this.mode === 'calendar') {
-                label = this.localize('heatmapCalendarLabel', undefined, {
-                    days: this.days.length,
-                    label: valueLabel,
-                    range,
-                });
-            }
-            else {
-                const rows = this.rowLabels.length;
-                const cols = this.colLabels.length;
-                label = this.localize('heatmapMatrixLabel', undefined, {
-                    rows,
-                    cols,
-                    label: valueLabel,
-                    range,
-                });
-            }
-            // A persistent selection description, appended to the host's own accessible name -- *not*
-            // an `aria-describedby` idref pointing into this element's shadow root, since an idref like
-            // that can't resolve across the shadow boundary. Reusing the plain aria-label string here
-            // keeps it discoverable any time a screen reader user queries this element's accessible
-            // name, regardless of which cell (if any) currently has keyboard focus.
-            const selectedText = this.selectedCellDescription();
-            this.setAttribute('aria-label', selectedText ? `${label} ${selectedText}` : label);
+        let label;
+        if (this.mode === 'calendar') {
+            label = this.localize('heatmapCalendarLabel', undefined, {
+                days: this.days.length,
+                label: valueLabel,
+                range,
+            });
+        }
+        else {
+            const rows = this.rowLabels.length;
+            const cols = this.colLabels.length;
+            label = this.localize('heatmapMatrixLabel', undefined, {
+                rows,
+                cols,
+                label: valueLabel,
+                range,
+            });
+        }
+        // A persistent selection description, appended to the host's own accessible name -- *not*
+        // an `aria-describedby` idref pointing into this element's shadow root, since an idref like
+        // that can't resolve across the shadow boundary. Reusing the plain aria-label string here
+        // keeps it discoverable any time a screen reader user queries this element's accessible
+        // name, regardless of which cell (if any) currently has keyboard focus.
+        const selectedText = this.selectedCellDescription();
+        const generatedAriaLabel = selectedText ? `${label} ${selectedText}` : label;
+        this.syncingGeneratedSemantics = true;
+        try {
+            if (this.authorRole === null)
+                this.setAttribute('role', 'group');
+            if (this.authorAriaLabel === null)
+                this.setAttribute('aria-label', generatedAriaLabel);
+        }
+        finally {
+            this.syncingGeneratedSemantics = false;
         }
     }
     /** The localized "Selected: <cell>." description appended to the host `aria-label`, or `''` when
@@ -812,6 +806,8 @@ export class LyraHeatmap extends LyraElement {
             'cellColor',
             'selectedCell',
             'legendStops',
+            'accessibleCells',
+            'accessibleTargetSizePx',
         ].some((name) => changed.has(name))) {
             const focusOnly = changed.has('focusedCell') && [...changed.keys()].every((key) => key === 'focusedCell' || key === 'liveText');
             if (focusOnly && this.repaintFocusRing(changed.get('focusedCell')))
@@ -821,7 +817,20 @@ export class LyraHeatmap extends LyraElement {
     }
     /** Redraws canvas content after an upstream token or theme change. */
     refreshTheme() {
-        this.draw();
+        const changed = this.refreshAccessibleTargetSize();
+        if (!changed)
+            this.draw();
+    }
+    refreshAccessibleTargetSize() {
+        const raw = getComputedStyle(this).getPropertyValue('--lr-icon-button-size').trim();
+        const resolved = resolveCssLength(raw, this);
+        const next = resolved !== undefined && Number.isFinite(resolved) && resolved > 0
+            ? resolved
+            : DEFAULT_ACCESSIBLE_TARGET_SIZE_PX;
+        if (next === this.accessibleTargetSizePx)
+            return false;
+        this.accessibleTargetSizePx = next;
+        return true;
     }
     /* Every token reader below takes the host's already-resolved computed-style
      * declaration rather than calling getComputedStyle(this) itself:
@@ -939,15 +948,19 @@ export class LyraHeatmap extends LyraElement {
      */
     calendarCellSize() {
         const { weekCount } = this.cachedCalendarGrid;
+        let size;
         if (this.fitToWidth && weekCount > 0) {
             // Unlike matrix mode's contiguous cells, calendar columns are spaced
             // `cellSize + CAL_GAP` apart (see `columnXFor()`), so the gap has to be
             // subtracted back out here — otherwise the painted width would overshoot
             // `hostWidth` by `weekCount * CAL_GAP` (every column's gap, once each).
             const hostWidth = this.clientWidth || CAL_PAD_LEFT + weekCount * (this.cellSize + CAL_GAP);
-            return this.clampFitCellSize((hostWidth - CAL_PAD_LEFT) / weekCount - CAL_GAP);
+            size = this.clampFitCellSize((hostWidth - CAL_PAD_LEFT) / weekCount - CAL_GAP);
         }
-        return this.cellSize;
+        else {
+            size = this.cellSize;
+        }
+        return this.accessibleCells ? Math.max(size, this.accessibleTargetSizePx) : size;
     }
     /**
      * Applies the optional `minCellSize`/`maxCellSize` clamps to a width-derived cell size. Only
@@ -1189,11 +1202,15 @@ export class LyraHeatmap extends LyraElement {
      * the same geometry as what's actually painted.
      */
     matrixCellSize(cols) {
+        let size;
         if (this.fitToWidth && cols > 0) {
             const hostWidth = this.clientWidth || PAD_LEFT + cols * this.cellSize;
-            return this.clampFitCellSize((hostWidth - PAD_LEFT) / cols);
+            size = this.clampFitCellSize((hostWidth - PAD_LEFT) / cols);
+        }
+        else {
+            size = this.cellSize;
         }
-        return this.cellSize;
+        return this.accessibleCells ? Math.max(size, this.accessibleTargetSizePx) : size;
     }
     paintMatrixCell(ctx, row, col, cellSize, cs, rampData, noDataFill) {
         const value = this.values[row]?.[col] ?? -1;
@@ -1764,19 +1781,41 @@ export class LyraHeatmap extends LyraElement {
      *  spec, leaving whatever the previous cell painted. Falls back to
      *  noDataFill() for a genuinely invalid color. */
     resolveCanvasColor(value, cs) {
-        if (!value.includes('var('))
-            return value;
         const cached = this.canvasColorCache.get(value);
         if (cached !== undefined)
             return cached;
-        if (!this.colorProbe) {
-            this.colorProbe = document.createElement('span');
-            this.colorProbe.style.cssText =
-                'position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;';
-            this.shadowRoot.appendChild(this.colorProbe);
+        const fallback = this.noDataFill(cs);
+        let candidate = value;
+        if (value.includes('var(')) {
+            if (!this.colorProbe) {
+                this.colorProbe = document.createElement('span');
+                this.colorProbe.style.cssText =
+                    'position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;';
+                this.shadowRoot.appendChild(this.colorProbe);
+            }
+            this.colorProbe.style.color = '';
+            this.colorProbe.style.color = value;
+            if (!this.colorProbe.style.color) {
+                this.canvasColorCache.set(value, fallback);
+                return fallback;
+            }
+            candidate = getComputedStyle(this.colorProbe).color;
+        }
+        const ctx = getScratchCtx();
+        if (!ctx)
+            return fallback;
+        ctx.fillStyle = 'rgb(1, 2, 3)';
+        const firstSentinel = ctx.fillStyle;
+        ctx.fillStyle = candidate;
+        let resolved = ctx.fillStyle;
+        if (resolved === firstSentinel) {
+            ctx.fillStyle = 'rgb(4, 5, 6)';
+            const secondSentinel = ctx.fillStyle;
+            ctx.fillStyle = candidate;
+            resolved = ctx.fillStyle;
+            if (resolved === secondSentinel)
+                resolved = fallback;
         }
-        this.colorProbe.style.color = value;
-        const resolved = this.colorProbe.style.color ? getComputedStyle(this.colorProbe).color : this.noDataFill(cs);
         this.canvasColorCache.set(value, resolved);
         return resolved;
     }
@@ -1893,6 +1932,9 @@ export class LyraHeatmap extends LyraElement {
           part="canvas"
           tabindex=${this.accessibleCells ? '-1' : '0'}
           aria-hidden=${this.accessibleCells ? 'true' : nothing}
+          role=${this.accessibleCells ? nothing : 'group'}
+          aria-label=${this.accessibleCells ? nothing : (this.getAttribute('aria-label') ?? nothing)}
+          aria-describedby=${this.accessibleCells ? nothing : 'live-region'}
           @pointermove=${this.onPointerMove}
           @pointerleave=${this.onPointerLeave}
           @click=${this.onCanvasClick}
@@ -1906,7 +1948,7 @@ export class LyraHeatmap extends LyraElement {
         >
           ${this.hoverCell ? this.resolveCellText(this.hoverCell) : ''}
         </div>
-        <div part="live-region" class="sr-only" role="status" aria-live="polite">${this.liveText}</div>
+        <div id="live-region" part="live-region" class="sr-only" role="status" aria-live="polite">${this.liveText}</div>
         <div part="legend">${this.renderLegendScale(range)}
           <span part="legend-value-label">${this.localizedValueLabel()}</span>
           ${labeledAnnotations.map((a) => html `<span part="legend-annotation"><span class="ring-swatch"></span>${a.label}</span>`)}
@@ -2002,4 +2044,7 @@ __decorate([
 __decorate([
     state()
 ], LyraHeatmap.prototype, "liveText", void 0);
+__decorate([
+    state()
+], LyraHeatmap.prototype, "accessibleTargetSizePx", void 0);
 //# sourceMappingURL=heatmap.class.js.map