@aceshooting/lyra-ui 1.1.0 → 1.2.0

package/dist/components/chart/chart.d.ts

@@ -77,6 +77,9 @@ export declare class LyraChart extends LyraElement {
     /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
     private loading;
     private zoomed;
+    private visible;
+    private intersectionObserver?;
+    private lastSignature;
     private canvasEl?;
     private chart?;
     private chartJsModule?;
@@ -95,6 +98,14 @@ export declare class LyraChart extends LyraElement {
      * is called fresh from `buildConfig()` on every draw rather than cached.
      */
     private themeColors;
+    /**
+     * A content-affecting-properties fingerprint used by `updated()` to skip a
+     * redundant `draw()` when neither visibility nor any of these properties
+     * actually changed since the last draw (e.g. an unrelated property/state
+     * update, or `requestUpdate()` with nothing changed). Mirrors
+     * `lite-chart.ts`'s `computeSignature()`.
+     */
+    private computeSignature;
     /**
      * Builds `options.scales` for the effective chart type: no scale at all for
      * pie/doughnut (a proportional-area chart has no axis), the single radial

package/dist/components/chart/chart.js

@@ -99,6 +99,8 @@ export class LyraChart extends LyraElement {
         /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
         this.loading = true;
         this.zoomed = false;
+        this.visible = true;
+        this.lastSignature = '';
         // `chartjs-plugin-zoom`'s own `resetZoom()` synchronously re-invokes the
         // `onZoomComplete` callback below as part of its reset, which would emit a
         // stale `{zoomed: true}` right before `resetZoom()` emits the real
@@ -116,11 +118,21 @@ export class LyraChart extends LyraElement {
             this.chartJsModule = mod;
             this.draw();
         });
+        if (typeof IntersectionObserver !== 'undefined') {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                const wasVisible = this.visible;
+                this.visible = entries[0]?.isIntersecting ?? true;
+                if (this.visible && !wasVisible)
+                    this.draw();
+            });
+            this.intersectionObserver.observe(this);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.chart?.destroy();
         this.chart = undefined;
+        this.intersectionObserver?.disconnect();
     }
     updated(changed) {
         if (this.loading)
@@ -135,9 +147,23 @@ export class LyraChart extends LyraElement {
         if (changed.has('height')) {
             this.style.setProperty('--lyra-chart-height', this.height);
         }
+        // While `chart.js` is still loading, `draw()` would no-op anyway (no
+        // `chartJsModule`/`canvasEl` yet) — bail before touching `lastSignature`
+        // so that phantom "no-op" update doesn't get cached as the baseline and
+        // silently swallow the real first draw once loading finishes with no
+        // other property having changed in the meantime.
+        if (this.loading)
+            return;
         const onlyZoomChanged = changed.size === 1 && changed.has('zoomed');
-        if (!onlyZoomChanged)
-            this.draw();
+        if (onlyZoomChanged)
+            return;
+        if (!this.visible)
+            return; // becoming visible again triggers its own draw() via the observer above
+        const signature = this.computeSignature();
+        if (signature === this.lastSignature)
+            return;
+        this.lastSignature = signature;
+        this.draw();
     }
     seriesToDataset(s) {
         const colors = Array.isArray(s.color) ? s.color : s.color ? [s.color] : undefined;
@@ -174,6 +200,29 @@ export class LyraChart extends LyraElement {
             tooltipText: cs.getPropertyValue('--lyra-chart-tooltip-text').trim() || FALLBACK_TOOLTIP_TEXT,
         };
     }
+    /**
+     * A content-affecting-properties fingerprint used by `updated()` to skip a
+     * redundant `draw()` when neither visibility nor any of these properties
+     * actually changed since the last draw (e.g. an unrelated property/state
+     * update, or `requestUpdate()` with nothing changed). Mirrors
+     * `lite-chart.ts`'s `computeSignature()`.
+     */
+    computeSignature() {
+        return JSON.stringify([
+            this.type,
+            this.labels,
+            this.datasets,
+            this.legend,
+            this.area,
+            this.xLabel,
+            this.yLabel,
+            this.y2Label,
+            this.beginAtZero,
+            this.horizontal,
+            this.stacked,
+            this.config,
+        ]);
+    }
     /**
      * Builds `options.scales` for the effective chart type: no scale at all for
      * pie/doughnut (a proportional-area chart has no axis), the single radial
@@ -428,6 +477,9 @@ __decorate([
 __decorate([
     state()
 ], LyraChart.prototype, "zoomed", void 0);
+__decorate([
+    state()
+], LyraChart.prototype, "visible", void 0);
 __decorate([
     query('canvas')
 ], LyraChart.prototype, "canvasEl", void 0);

package/dist/components/chart/lite-chart.d.ts

@@ -50,22 +50,31 @@ export declare class LyraLiteChart extends LyraElement {
     beginAtZero: boolean;
     /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
     stacked: boolean;
+    /** Formats a y-axis tick value for display (e.g. `(v) => \`$${v.toFixed(2)}\``). Falls back to the
+     *  built-in nice-number formatter when unset. */
+    tickFormat?: (value: number) => string;
     private plotWidth;
     private plotHeight;
+    private visible;
     private svgEl?;
     private resizeObserver?;
+    private intersectionObserver?;
+    private lastSignature;
+    private lastResult?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
     private colorFor;
     private domain;
+    private computeSignature;
     private emitPoint;
     private onPointKeyDown;
     private renderGrid;
     private renderBars;
     private renderLines;
     render(): TemplateResult;
+    private renderChart;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/chart/lite-chart.js

@@ -106,6 +106,8 @@ export class LyraLiteChart extends LyraElement {
         this.stacked = false;
         this.plotWidth = 0;
         this.plotHeight = 0;
+        this.visible = true;
+        this.lastSignature = '';
     }
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
@@ -124,10 +126,17 @@ export class LyraLiteChart extends LyraElement {
                 }
             }
         });
+        if (typeof IntersectionObserver !== 'undefined') {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                this.visible = entries[0]?.isIntersecting ?? true;
+            });
+            this.intersectionObserver.observe(this);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
     }
     firstUpdated() {
         if (this.svgEl)
@@ -179,6 +188,20 @@ export class LyraLiteChart extends LyraElement {
         }
         return niceDomain(lo, hi, this.beginAtZero, TICK_COUNT);
     }
+    computeSignature() {
+        return JSON.stringify([
+            this.type,
+            this.labels,
+            this.datasets,
+            this.legend,
+            this.xLabel,
+            this.yLabel,
+            this.beginAtZero,
+            this.stacked,
+            this.plotWidth,
+            this.plotHeight,
+        ]);
+    }
     emitPoint(datasetIndex, index) {
         const label = this.labels[index];
         const value = this.datasets[datasetIndex]?.data[index] ?? null;
@@ -196,7 +219,7 @@ export class LyraLiteChart extends LyraElement {
             const y = plotY + plotH - ((t - lo) / span) * plotH;
             return svg `
         <line part="grid-line" x1=${plotX} y1=${y} x2=${plotX + plotW} y2=${y}></line>
-        <text part="axis-label" x=${plotX - 6} y=${y} text-anchor="end" dominant-baseline="middle">${formatTick(t)}</text>
+        <text part="axis-label" x=${plotX - 6} y=${y} text-anchor="end" dominant-baseline="middle">${this.tickFormat ? this.tickFormat(t) : formatTick(t)}</text>
       `;
         });
     }
@@ -294,6 +317,17 @@ export class LyraLiteChart extends LyraElement {
         });
     }
     render() {
+        if (!this.visible && this.lastResult)
+            return this.lastResult;
+        const signature = this.computeSignature();
+        if (signature === this.lastSignature && this.lastResult)
+            return this.lastResult;
+        this.lastSignature = signature;
+        const result = this.renderChart();
+        this.lastResult = result;
+        return result;
+    }
+    renderChart() {
         const w = this.plotWidth || 400;
         const h = this.plotHeight || 200;
         const padLeft = PAD_LEFT + (this.yLabel ? AXIS_TITLE_SPACE : 0);
@@ -367,12 +401,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], LyraLiteChart.prototype, "stacked", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "tickFormat", void 0);
 __decorate([
     state()
 ], LyraLiteChart.prototype, "plotWidth", void 0);
 __decorate([
     state()
 ], LyraLiteChart.prototype, "plotHeight", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "visible", void 0);
 __decorate([
     query('svg')
 ], LyraLiteChart.prototype, "svgEl", void 0);

package/dist/components/chart/lite-chart.stories.d.ts

@@ -10,3 +10,5 @@ export declare const StackedBars: Story;
 export declare const Line: Story;
 /** Clicking (or Enter/Space on a focused) bar/point fires `lyra-point-click`, same detail shape as `lyra-chart`'s. */
 export declare const ClickToFilter: Story;
+/** `tickFormat` customizes y-axis tick labels (e.g. currency) instead of the built-in nice-number formatter. */
+export declare const CurrencyTickFormat: Story;

package/dist/components/chart/lite-chart.stories.js

@@ -96,3 +96,19 @@ export const ClickToFilter = {
     `;
     },
 };
+/** `tickFormat` customizes y-axis tick labels (e.g. currency) instead of the built-in nice-number formatter. */
+export const CurrencyTickFormat = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [1204.37, 1890.5, 1420.1, 2260.75] }];
+        return html `
+      <lyra-lite-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+        .tickFormat=${(v) => `$${v.toFixed(2)}`}
+      ></lyra-lite-chart>
+    `;
+    },
+};

package/dist/components/combobox/combobox.js

@@ -549,7 +549,7 @@ export class LyraCombobox extends LyraElement {
             id=${this.inputId}
             part="combobox-input"
             role="combobox"
-            aria-label=${this.label || this.placeholder || 'Combobox'}
+            aria-label=${this.getAttribute('aria-label') || this.label || this.placeholder || 'Combobox'}
             aria-expanded=${this.open ? 'true' : 'false'}
             aria-controls=${this.listId}
             aria-activedescendant=${activeId}

package/dist/components/flag/flag.d.ts

@@ -1,7 +1,9 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../skeleton/skeleton.js';
-type FlagUrlResolver = (code: string) => Promise<string | undefined>;
+type FlagUrlResolver = (code: string, options?: {
+    variant?: 'detailed';
+}) => Promise<string | undefined>;
 /**
  * Resolves the optional peer dependency `@aceshooting/lyra-flags`'s `flagUrl`
  * via the given importer (a real dynamic import by default). Uncached and
@@ -31,10 +33,16 @@ export declare function loadFlagUrl(importFlags?: () => Promise<{
  * `src` instead to skip the peer-package round trip (and its loading-skeleton
  * flash) entirely.
  *
+ * A handful of flags (e.g. `es`, `pt` — any whose design includes a detailed coat of
+ * arms/seal/emblem) ship a second, full-detail source SVG alongside the default icon-optimized
+ * one; set `detailed` to request it (e.g. for a hero-scale display where the extra illustrative
+ * detail is actually visible). A no-op for every other code — see `detailed`'s own doc.
+ *
  * @customElement lyra-flag
  * @example <lyra-flag country="fr"></lyra-flag>
  * @example <lyra-flag language="en" label="English"></lyra-flag>
  * @example <lyra-flag src=${frUrl} label="French"></lyra-flag>
+ * @example <lyra-flag country="es" detailed></lyra-flag>
  * @csspart image - The underlying <img>.
  */
 export declare class LyraFlag extends LyraElement {
@@ -53,14 +61,27 @@ export declare class LyraFlag extends LyraElement {
      */
     src?: string;
     /**
-     * Accessible label / `alt` text. Defaults to the uppercase *resolved country
-     * code* — for a `language`-only element (e.g. `language="en"`) that's the
-     * mapped country (`"GB"`), not the language tag itself (`"EN"`). Has no
-     * default when only `src` is given (no country/language to derive one from).
+     * Accessible label / `alt` text. Defaults to a localized, human-readable
+     * region name derived from the *resolved country code* via
+     * `Intl.DisplayNames` (e.g. `"United Kingdom"`) — for a `language`-only
+     * element (e.g. `language="en"`) that's the mapped country's display name,
+     * not the language tag itself. Falls back to the bare uppercase code if
+     * `Intl.DisplayNames` can't resolve it. Has no default when only `src` is
+     * given (no country/language to derive one from).
      */
     label?: string;
     /** Render as a circular flag. */
     round: boolean;
+    /**
+     * Requests the pristine, full-detail source SVG instead of the default icon-optimized one —
+     * only meaningful for the minority of `country`/`language` codes whose source art was large
+     * enough to need optimizing (e.g. `es`, `pt`, a national coat of arms/seal/emblem); for every
+     * other code this is a safe no-op (the default and detailed variants are the same file). Has no
+     * effect when `src` is set — a pre-resolved URL is used as-is regardless. Intended for rendering
+     * a flag larger than icon scale (e.g. a hero display) where the extra illustrative detail is
+     * actually visible.
+     */
+    detailed: boolean;
     private resolvedSrc?;
     /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
     private loading;

package/dist/components/flag/flag.js

@@ -28,6 +28,22 @@ export async function loadFlagUrl(importFlags = () => import('@aceshooting/lyra-
         return null;
     }
 }
+/**
+ * Resolves an ISO 3166-1 alpha-2 region code to a human-readable, localized
+ * display name (e.g. `'FR'` -> `'France'`) via `Intl.DisplayNames`, for use as
+ * the default accessible name (`alt`) instead of a bare code read
+ * letter-by-letter by most screen readers. Falls back to the uppercase code
+ * itself if `Intl.DisplayNames` throws (unrecognized region) or isn't
+ * available in the current runtime.
+ */
+function displayNameFor(code) {
+    try {
+        return new Intl.DisplayNames([navigator.language], { type: 'region' }).of(code.toUpperCase()) ?? code.toUpperCase();
+    }
+    catch {
+        return code.toUpperCase();
+    }
+}
 let flagUrlResolver;
 /**
  * Lazily loads the optional peer dependency '@aceshooting/lyra-flags' once per
@@ -59,10 +75,16 @@ function loadFlagUrlResolver() {
  * `src` instead to skip the peer-package round trip (and its loading-skeleton
  * flash) entirely.
  *
+ * A handful of flags (e.g. `es`, `pt` — any whose design includes a detailed coat of
+ * arms/seal/emblem) ship a second, full-detail source SVG alongside the default icon-optimized
+ * one; set `detailed` to request it (e.g. for a hero-scale display where the extra illustrative
+ * detail is actually visible). A no-op for every other code — see `detailed`'s own doc.
+ *
  * @customElement lyra-flag
  * @example <lyra-flag country="fr"></lyra-flag>
  * @example <lyra-flag language="en" label="English"></lyra-flag>
  * @example <lyra-flag src=${frUrl} label="French"></lyra-flag>
+ * @example <lyra-flag country="es" detailed></lyra-flag>
  * @csspart image - The underlying <img>.
  */
 export class LyraFlag extends LyraElement {
@@ -70,6 +92,16 @@ export class LyraFlag extends LyraElement {
         super(...arguments);
         /** Render as a circular flag. */
         this.round = false;
+        /**
+         * Requests the pristine, full-detail source SVG instead of the default icon-optimized one —
+         * only meaningful for the minority of `country`/`language` codes whose source art was large
+         * enough to need optimizing (e.g. `es`, `pt`, a national coat of arms/seal/emblem); for every
+         * other code this is a safe no-op (the default and detailed variants are the same file). Has no
+         * effect when `src` is set — a pre-resolved URL is used as-is regardless. Intended for rendering
+         * a flag larger than icon scale (e.g. a hero display) where the extra illustrative detail is
+         * actually visible.
+         */
+        this.detailed = false;
         /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
         this.loading = true;
         /**
@@ -96,8 +128,13 @@ export class LyraFlag extends LyraElement {
         // undefined -> undefined (no-op to Lit), so none of `changed.has(...)`
         // would otherwise ever become true for a `<lyra-flag>` that never
         // receives one, leaving `loading` stuck at its initial `true` forever.
-        if (this.hasUpdated && !changed.has('country') && !changed.has('language') && !changed.has('src'))
+        if (this.hasUpdated &&
+            !changed.has('country') &&
+            !changed.has('language') &&
+            !changed.has('src') &&
+            !changed.has('detailed')) {
             return;
+        }
         const token = ++this.resolveToken; // invalidates any in-flight peer resolution either way
         if (this.src) {
             this.resolvedSrc = undefined;
@@ -112,7 +149,7 @@ export class LyraFlag extends LyraElement {
         }
         this.loading = true;
         void loadFlagUrlResolver()
-            .then((resolve) => resolve?.(code))
+            .then((resolve) => resolve?.(code, this.detailed ? { variant: 'detailed' } : undefined))
             .then((url) => {
             if (token !== this.resolveToken)
                 return; // superseded by a later country/language/src change
@@ -132,7 +169,8 @@ export class LyraFlag extends LyraElement {
         const url = this.src ?? this.resolvedSrc;
         if (!url)
             return html ``;
-        const alt = this.label ?? (this.code ?? '').toUpperCase();
+        const code = this.code;
+        const alt = this.label ?? (code ? displayNameFor(code) : '');
         return html `<img part="image" src=${url} alt=${alt} loading="lazy" decoding="async" />`;
     }
 }
@@ -151,6 +189,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraFlag.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFlag.prototype, "detailed", void 0);
 __decorate([
     state()
 ], LyraFlag.prototype, "resolvedSrc", void 0);

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

@@ -3,3 +3,4 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Gallery: Story;
+export declare const DetailedVariant: Story;

package/dist/components/flag/flag.stories.js

@@ -15,3 +15,17 @@ export const Gallery = {
     </div>
   `,
 };
+export const DetailedVariant = {
+    render: () => html `
+    <div style="display:flex; gap:2rem; align-items:center;">
+      <div style="display:flex; flex-direction:column; align-items:center; gap:0.5rem;">
+        <lyra-flag country="es" label="Spain (default, icon-optimized)" style="height: 6rem"></lyra-flag>
+        <span>default</span>
+      </div>
+      <div style="display:flex; flex-direction:column; align-items:center; gap:0.5rem;">
+        <lyra-flag country="es" detailed label="Spain (detailed)" style="height: 6rem"></lyra-flag>
+        <span>detailed</span>
+      </div>
+    </div>
+  `,
+};

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

@@ -82,7 +82,9 @@ export declare function mixColor(fromColor: string, toColor: string, t: number):
  * @customElement lyra-heatmap
  * @event lyra-cell-click - Fired on click, or Enter/Space on the
  * focused/hovered cell. `detail: { row, col, value }` in matrix mode,
- * `detail: { date, value }` in calendar mode.
+ * `detail: { date, value }` in calendar mode. `cellText` overrides the
+ * built-in English "Row X, Col Y: value" / "Mon DD: value" template used for
+ * both the hover tooltip and the keyboard live-region announcement.
  * @csspart base, canvas, tooltip, live-region, legend, legend-lo, legend-hi, legend-annotation
  */
 export declare class LyraHeatmap extends LyraElement {
@@ -107,6 +109,10 @@ export declare class LyraHeatmap extends LyraElement {
     bucketCount: number;
     /** Cells to ring-highlight — `row`/`col` in matrix mode, `date` in calendar mode. See `HeatmapAnnotation`. */
     annotations: HeatmapAnnotation[];
+    /** Formats the per-cell tooltip and keyboard live-region text — receives the cell position
+     *  (`MatrixCellPos` in matrix mode, `CalendarCellPos` in calendar mode) and its value. Falls back to
+     *  the built-in English "Row X, Col Y: value" / "Mon DD: value" template when unset. */
+    cellText?: (pos: MatrixCellPos | CalendarCellPos, value: number) => string;
     private canvas?;
     private resizeObserver?;
     private dprQuery?;
@@ -185,11 +191,17 @@ export declare class LyraHeatmap extends LyraElement {
     /**
      * Human-readable "<label>: <value>" text for a cell — shared by the hover
      * tooltip and the keyboard-focus live-region announcement, so both always
-     * describe a cell the same way.
+     * describe a cell the same way. This is the built-in English fallback used
+     * when `cellText` isn't set — see `resolveCellText()`.
      */
-    private cellText;
+    private defaultCellText;
     private matrixCellText;
     private calendarCellText;
+    /** The raw numeric value at a cell position, in either mode — shared by `resolveCellText()`
+     *  so a custom `cellText` formatter receives the same value the built-in template would use. */
+    private valueAt;
+    /** Dispatches to the host-provided `cellText` formatter when set, otherwise the built-in template. */
+    private resolveCellText;
     /** Refreshes the visually-hidden live-region text for a newly-focused cell. */
     private announce;
     private emitCellClick;

package/dist/components/heatmap/heatmap.js

@@ -170,7 +170,9 @@ export function mixColor(fromColor, toColor, t) {
  * @customElement lyra-heatmap
  * @event lyra-cell-click - Fired on click, or Enter/Space on the
  * focused/hovered cell. `detail: { row, col, value }` in matrix mode,
- * `detail: { date, value }` in calendar mode.
+ * `detail: { date, value }` in calendar mode. `cellText` overrides the
+ * built-in English "Row X, Col Y: value" / "Mon DD: value" template used for
+ * both the hover tooltip and the keyboard live-region announcement.
  * @csspart base, canvas, tooltip, live-region, legend, legend-lo, legend-hi, legend-annotation
  */
 export class LyraHeatmap extends LyraElement {
@@ -270,7 +272,7 @@ export class LyraHeatmap extends LyraElement {
         this.cachedValueRange = this.computeValueRange();
         const bounds = this.cachedValueRange;
         const range = bounds ? `${bounds[0]}–${bounds[1]}` : 'no data';
-        this.setAttribute('role', 'img');
+        this.setAttribute('role', 'group');
         if (this.mode === 'calendar') {
             this.setAttribute('aria-label', `Calendar heatmap of ${this.days.length} days, ${this.valueLabel} range ${range}`);
         }
@@ -579,9 +581,10 @@ export class LyraHeatmap extends LyraElement {
     /**
      * Human-readable "<label>: <value>" text for a cell — shared by the hover
      * tooltip and the keyboard-focus live-region announcement, so both always
-     * describe a cell the same way.
+     * describe a cell the same way. This is the built-in English fallback used
+     * when `cellText` isn't set — see `resolveCellText()`.
      */
-    cellText(pos) {
+    defaultCellText(pos) {
         return 'week' in pos ? this.calendarCellText(pos) : this.matrixCellText(pos);
     }
     matrixCellText(pos) {
@@ -593,13 +596,24 @@ export class LyraHeatmap extends LyraElement {
     }
     calendarCellText(pos) {
         const { date, value } = this.calendarCellAt(pos);
-        const label = parseIsoDate(date).toLocaleString('en', { month: 'short', day: 'numeric', timeZone: 'UTC' });
+        const label = parseIsoDate(date).toLocaleString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' });
         const valueText = value < 0 || !Number.isFinite(value) ? 'no data' : String(value);
         return `${label}: ${valueText}`;
     }
+    /** The raw numeric value at a cell position, in either mode — shared by `resolveCellText()`
+     *  so a custom `cellText` formatter receives the same value the built-in template would use. */
+    valueAt(pos) {
+        if ('week' in pos)
+            return this.calendarCellAt(pos).value;
+        return this.values[pos.row]?.[pos.col] ?? -1;
+    }
+    /** Dispatches to the host-provided `cellText` formatter when set, otherwise the built-in template. */
+    resolveCellText(pos) {
+        return this.cellText ? this.cellText(pos, this.valueAt(pos)) : this.defaultCellText(pos);
+    }
     /** Refreshes the visually-hidden live-region text for a newly-focused cell. */
     announce(pos) {
-        this.liveText = this.cellText(pos);
+        this.liveText = this.resolveCellText(pos);
     }
     emitCellClick(pos) {
         if ('week' in pos) {
@@ -703,7 +717,7 @@ export class LyraHeatmap extends LyraElement {
           ?hidden=${!this.hoverCell}
           style=${styleMap(this.hoverCell ? this.tooltipStyle(this.hoverCell) : {})}
         >
-          ${this.hoverCell ? this.cellText(this.hoverCell) : ''}
+          ${this.hoverCell ? this.resolveCellText(this.hoverCell) : ''}
         </div>
         <div part="live-region" class="sr-only" role="status" aria-live="polite">${this.liveText}</div>
         <div part="legend">
@@ -750,6 +764,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], LyraHeatmap.prototype, "annotations", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraHeatmap.prototype, "cellText", void 0);
 __decorate([
     query('canvas')
 ], LyraHeatmap.prototype, "canvas", void 0);

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

@@ -18,5 +18,10 @@ export declare const HoverFocusClick: Story;
  * also surface a swatch + text entry in the legend.
  */
 export declare const Annotations: Story;
+/**
+ * `cellText` overrides the built-in English tooltip/live-region template —
+ * here with a French translation — for both matrix and calendar modes.
+ */
+export declare const CustomCellText: Story;
 /** `annotations` in calendar mode match by ISO `date` instead of `row`/`col`. */
 export declare const CalendarAnnotations: Story;

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

@@ -131,6 +131,31 @@ export const Annotations = {
     ></lyra-heatmap>
   `,
 };
+/**
+ * `cellText` overrides the built-in English tooltip/live-region template —
+ * here with a French translation — for both matrix and calendar modes.
+ */
+export const CustomCellText = {
+    render: () => html `
+    <lyra-heatmap
+      cell-size="28"
+      value-label="évènements"
+      .rowLabels=${['Lun', 'Mar', 'Mer']}
+      .colLabels=${['0h', '6h', '12h']}
+      .values=${[
+        [1, 4, 9],
+        [0, 2, 6],
+        [-1, 1, 4],
+    ]}
+      .cellText=${(pos, value) => {
+        const rows = ['Lun', 'Mar', 'Mer'];
+        const cols = ['0h', '6h', '12h'];
+        const valueText = value < 0 ? 'aucune donnée' : String(value);
+        return `Ligne ${rows[pos.row]}, Col ${cols[pos.col]} : ${valueText}`;
+    }}
+    ></lyra-heatmap>
+  `,
+};
 /** `annotations` in calendar mode match by ISO `date` instead of `row`/`col`. */
 export const CalendarAnnotations = {
     render: () => {

package/dist/components/select/select.d.ts

@@ -42,6 +42,7 @@ import '../combobox/option.js';
  * @csspart error - The error message.
  * @csspart hint - The hint message.
  */
+export type LyraSelectSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 export declare class LyraSelect extends LyraElement {
     static formAssociated: boolean;
     static styles: import("lit").CSSResultGroup[];
@@ -58,6 +59,8 @@ export declare class LyraSelect extends LyraElement {
     hint: string;
     errorText: string;
     open: boolean;
+    /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
+    size: LyraSelectSize;
     private activeIndex;
     private options;
     private touched;