@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/chart/box-plot.d.ts

@@ -19,7 +19,11 @@ export interface BoxPlotSeries {
  * Awesome's chart set — useful for summarizing distributions.
  *
  * @customElement lyra-box-plot
- * @csspart base, canvas
+ * @csspart base - The chart wrapper.
+ * @csspart canvas - The box-plot canvas.
+ * @csspart description - The accessible box-plot summary.
+ * @csspart data-table - The optional generated or slotted data table.
+ * @slot data-table - An optional consumer-provided accessible table alternative.
  */
 export declare class LyraBoxPlot extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -29,21 +33,41 @@ export declare class LyraBoxPlot extends LyraElement {
     height: string;
     yLabel: string;
     beginAtZero: boolean;
+    /** Accessible name applied to the canvas. Falls back to the box labels. */
+    accessibleLabel: string;
+    /** Accessible description for the canvas. When unset, a five-number summary is generated. */
+    accessibleDescription: string;
+    /** Makes the generated data table visible; it remains screen-reader available when false. */
+    showDataTable: boolean;
     /**
      * True until the lazy-loaded `chart.js` + `@sgratzl/chartjs-chart-boxplot`
      * peer dependencies have settled (success or failure) — mirrors
      * `LyraChart`'s `loading` state.
      */
     private loading;
+    private visible;
+    private intersectionObserver?;
     private canvasEl?;
     private chart?;
     private chartJsModule?;
+    private descriptionId;
     connectedCallback(): void;
     private onBoxPlotPluginLoaded;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Resolves the `--lyra-chart-*` theme tokens (declared in
+     * `box-plot.styles.ts`, each layered over an existing semantic token) via
+     * `getComputedStyle`. Chart.js renders to canvas, not the DOM, so it can't
+     * consume CSS `var()` directly — same constraint `chart.ts`'s
+     * `themeColors()` documents — so this is called fresh from `buildConfig()`
+     * on every draw rather than cached.
+     */
+    private themeColors;
     private buildConfig;
     private draw;
+    private boxPlotDescription;
+    private renderDataTable;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/chart/box-plot.js

@@ -8,9 +8,21 @@ import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
 import { loadChartJs } from './chart-loader.js';
 import { styles } from './box-plot.styles.js';
 import '../skeleton/skeleton.js';
+// Defensive JS-side fallbacks for themeColors() below, mirroring the
+// light-mode default of each `--lyra-chart-*` token's own fallback chain
+// (see box-plot.styles.ts) — only reached if getComputedStyle somehow can't
+// resolve the custom property at all (e.g. host detached from the document).
+// Same values as chart.ts's own fallbacks, since both default to the same
+// semantic tokens.
+const FALLBACK_GRID_COLOR = '#8a8a90';
+const FALLBACK_TICK_COLOR = '#6b7280';
+const FALLBACK_LEGEND_COLOR = '#1a1a1a';
+const FALLBACK_TOOLTIP_BG = '#fff';
+const FALLBACK_TOOLTIP_TEXT = '#1a1a1a';
 let boxPlotPlugin;
 /**
  * Lazily loads `@sgratzl/chartjs-chart-boxplot` and registers its controller
@@ -40,7 +52,11 @@ function loadBoxPlotPlugin() {
  * Awesome's chart set — useful for summarizing distributions.
  *
  * @customElement lyra-box-plot
- * @csspart base, canvas
+ * @csspart base - The chart wrapper.
+ * @csspart canvas - The box-plot canvas.
+ * @csspart description - The accessible box-plot summary.
+ * @csspart data-table - The optional generated or slotted data table.
+ * @slot data-table - An optional consumer-provided accessible table alternative.
  */
 export class LyraBoxPlot extends LyraElement {
     constructor() {
@@ -51,17 +67,34 @@ export class LyraBoxPlot extends LyraElement {
         this.height = '280px';
         this.yLabel = '';
         this.beginAtZero = true;
+        /** Accessible name applied to the canvas. Falls back to the box labels. */
+        this.accessibleLabel = '';
+        /** Accessible description for the canvas. When unset, a five-number summary is generated. */
+        this.accessibleDescription = '';
+        /** Makes the generated data table visible; it remains screen-reader available when false. */
+        this.showDataTable = false;
         /**
          * True until the lazy-loaded `chart.js` + `@sgratzl/chartjs-chart-boxplot`
          * peer dependencies have settled (success or failure) — mirrors
          * `LyraChart`'s `loading` state.
          */
         this.loading = true;
+        this.visible = true;
+        this.descriptionId = nextId('box-plot-description');
     }
-    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
     connectedCallback() {
         super.connectedCallback();
         void loadBoxPlotPlugin().then((boxMod) => this.onBoxPlotPluginLoaded(boxMod));
+        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);
+        }
     }
     // Split out from `connectedCallback()` so the partial-peer-dependency-
     // failure path (chart.js loads fine, `@sgratzl/chartjs-chart-boxplot`
@@ -70,17 +103,28 @@ export class LyraBoxPlot extends LyraElement {
     // case, so this must gate on its resolved value — mirroring the correct,
     // established pattern in `LyraChart.connectedCallback()` — instead of
     // unconditionally re-awaiting the already-cached `loadChartJs()` promise.
+    //
+    // Also guards against a disconnect while either lazy peer import is still
+    // in flight: `this.isConnected` is re-checked after each `await` gap, so a
+    // `<lyra-box-plot>` removed before the load settles never constructs a
+    // `Chart` bound to a (possibly detached) canvas.
     async onBoxPlotPluginLoaded(boxMod) {
+        if (!this.isConnected)
+            return;
         this.loading = false;
         if (!boxMod)
             return;
-        this.chartJsModule = (await loadChartJs()) ?? undefined;
+        const chartMod = await loadChartJs();
+        if (!this.isConnected)
+            return;
+        this.chartJsModule = chartMod ?? undefined;
         this.draw();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.chart?.destroy();
         this.chart = undefined;
+        this.intersectionObserver?.disconnect();
     }
     updated(changed) {
         if (this.loading)
@@ -95,9 +139,35 @@ export class LyraBoxPlot extends LyraElement {
         if (changed.has('height')) {
             this.style.setProperty('--lyra-chart-height', this.height);
         }
+        if (this.loading)
+            return;
+        if (!this.visible)
+            return; // becoming visible again triggers its own draw() via the observer above
+        const contentChanged = ['labels', 'boxes', 'legend', 'height', 'yLabel', 'beginAtZero', 'loading'].some((name) => changed.has(name));
+        if (!contentChanged)
+            return;
         this.draw();
     }
+    /**
+     * Resolves the `--lyra-chart-*` theme tokens (declared in
+     * `box-plot.styles.ts`, each layered over an existing semantic token) via
+     * `getComputedStyle`. Chart.js renders to canvas, not the DOM, so it can't
+     * consume CSS `var()` directly — same constraint `chart.ts`'s
+     * `themeColors()` documents — so this is called fresh from `buildConfig()`
+     * on every draw rather than cached.
+     */
+    themeColors() {
+        const cs = getComputedStyle(this);
+        return {
+            grid: cs.getPropertyValue('--lyra-chart-grid-color').trim() || FALLBACK_GRID_COLOR,
+            tick: cs.getPropertyValue('--lyra-chart-tick-color').trim() || FALLBACK_TICK_COLOR,
+            legend: cs.getPropertyValue('--lyra-chart-legend-color').trim() || FALLBACK_LEGEND_COLOR,
+            tooltipBg: cs.getPropertyValue('--lyra-chart-tooltip-bg').trim() || FALLBACK_TOOLTIP_BG,
+            tooltipText: cs.getPropertyValue('--lyra-chart-tooltip-text').trim() || FALLBACK_TOOLTIP_TEXT,
+        };
+    }
     buildConfig() {
+        const theme = this.themeColors();
         return {
             // boxplot isn't in chart.js's static ChartType union — same cast the seed uses.
             type: 'boxplot',
@@ -113,8 +183,15 @@ export class LyraBoxPlot extends LyraElement {
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
-                plugins: { legend: { display: this.legend } },
-                scales: { y: { beginAtZero: this.beginAtZero, title: { display: !!this.yLabel, text: this.yLabel } } },
+                plugins: { legend: { display: this.legend, labels: { color: theme.legend } } },
+                scales: {
+                    y: {
+                        beginAtZero: this.beginAtZero,
+                        title: { display: !!this.yLabel, text: this.yLabel },
+                        ticks: { color: theme.tick },
+                        grid: { color: theme.grid },
+                    },
+                },
             },
         };
     }
@@ -138,6 +215,51 @@ export class LyraBoxPlot extends LyraElement {
         }
         this.chart = new this.chartJsModule.Chart(this.canvasEl, config);
     }
+    boxPlotDescription() {
+        if (this.accessibleDescription)
+            return this.accessibleDescription;
+        const summaries = this.boxes.map((series) => {
+            if (!series.data.length)
+                return `${series.label}: no data`;
+            const medians = series.data.map((point) => point.median);
+            const first = medians[0];
+            const last = medians[medians.length - 1];
+            const trend = last > first ? 'increasing' : last < first ? 'decreasing' : 'flat';
+            return `${series.label}: ${series.data.length} distributions, median range ${Math.min(...medians)} to ${Math.max(...medians)}, ${trend} median trend`;
+        });
+        return `Box plot${summaries.length ? `. ${summaries.join('. ')}` : ' with no data'}.`;
+    }
+    renderDataTable() {
+        return html `
+      <table class=${this.showDataTable ? '' : 'sr-only'}>
+        <caption>${this.accessibleLabel || 'Box plot data'}</caption>
+        <thead>
+          <tr>
+            <th scope="col">Category</th>
+            <th scope="col">Series</th>
+            <th scope="col">Min</th>
+            <th scope="col">Q1</th>
+            <th scope="col">Median</th>
+            <th scope="col">Q3</th>
+            <th scope="col">Max</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${this.boxes.flatMap((series) => series.data.map((point, index) => html `
+                <tr>
+                  <th scope="row">${this.labels[index] ?? `Point ${index + 1}`}</th>
+                  <td>${series.label}</td>
+                  <td>${point.min}</td>
+                  <td>${point.q1}</td>
+                  <td>${point.median}</td>
+                  <td>${point.q3}</td>
+                  <td>${point.max}</td>
+                </tr>
+              `))}
+        </tbody>
+      </table>
+    `;
+    }
     render() {
         if (this.loading) {
             return html `
@@ -146,10 +268,16 @@ export class LyraBoxPlot extends LyraElement {
         </div>
       `;
         }
-        const label = this.boxes.map((b) => b.label).join(', ') || 'Box plot';
+        const label = this.accessibleLabel || this.boxes.map((b) => b.label).join(', ') || 'Box plot';
+        const description = this.boxPlotDescription();
         return html `
       <div part="base">
-        <canvas part="canvas" role="img" aria-label=${label}></canvas>
+        <canvas part="canvas" role="img" aria-label=${label} aria-describedby=${this.descriptionId}></canvas>
+        <p part="description" id=${this.descriptionId} class="sr-only">${description}</p>
+        <div part="data-table">
+          <slot name="data-table"></slot>
+          ${this.renderDataTable()}
+        </div>
       </div>
     `;
     }
@@ -172,9 +300,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'begin-at-zero' })
 ], LyraBoxPlot.prototype, "beginAtZero", void 0);
+__decorate([
+    property({ attribute: 'accessible-label' })
+], LyraBoxPlot.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ attribute: 'accessible-description' })
+], LyraBoxPlot.prototype, "accessibleDescription", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-data-table' })
+], LyraBoxPlot.prototype, "showDataTable", void 0);
 __decorate([
     state()
 ], LyraBoxPlot.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraBoxPlot.prototype, "visible", void 0);
 __decorate([
     query('canvas')
 ], LyraBoxPlot.prototype, "canvasEl", void 0);

package/dist/components/chart/box-plot.styles.js

@@ -9,6 +9,19 @@ export const styles = css `
     display: block;
     position: relative;
     block-size: var(--lyra-chart-height, 280px);
+    /* Same theme tokens as chart.styles.ts's :host — Chart.js renders to
+       canvas, not the DOM, so it can't consume CSS var() directly;
+       box-plot.ts's themeColors() resolves these once per draw() via
+       getComputedStyle, mirroring chart.ts. Each is its own token (rather
+       than reusing the semantic ones directly) so a host can retheme just
+       the chart's grid/ticks/legend/tooltip without affecting unrelated
+       text/border/surface colors elsewhere in the component, while still
+       defaulting to those semantic tokens. */
+    --lyra-chart-grid-color: var(--lyra-color-border);
+    --lyra-chart-tick-color: var(--lyra-color-text-quiet);
+    --lyra-chart-legend-color: var(--lyra-color-text);
+    --lyra-chart-tooltip-bg: var(--lyra-color-surface);
+    --lyra-chart-tooltip-text: var(--lyra-color-text);
   }
   [part='base'] {
     position: relative;

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

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-bubble-chart>` — `<lyra-chart>` with `type` locked to `"bubble"`. Feed
@@ -11,21 +11,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraBubbleChart extends LyraChart {
 }
-// `type` is locked read-only rather than a settable class field with just a
-// default value — `LyraChart` declares it as a plain (decorator-managed)
-// class field, and TypeScript forbids a subclass from re-declaring a base
-// field as a getter/setter pair via ordinary class syntax (TS2611) — so the
-// accessor pair is installed directly on the prototype instead, which is
-// runtime-equivalent (same shadowing semantics as a class-syntax override)
-// without tripping that check.
-Object.defineProperty(LyraBubbleChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'bubble';
-    },
-    set(_v) {
-        /* locked to 'bubble'; direct writes are ignored */
-    },
-});
+lockChartType(LyraBubbleChart, 'bubble');
 defineElement('bubble-chart', LyraBubbleChart);

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

@@ -1,25 +1,56 @@
 import type * as ChartJsModule from 'chart.js';
 import type ZoomPlugin from 'chartjs-plugin-zoom';
 /**
- * Independently loads the mandatory `chart.js` peer dependency and the
- * opt-in `chartjs-plugin-zoom` peer dependency, so a partial install
- * (`chart.js` only, which `peerDependenciesMeta` marks as a valid
- * combination) degrades to "charts render, zoom is inert" instead of every
- * chart breaking. Exported (in addition to `loadChartJs()` below) so both
- * failure paths — and the real caught error each one logs — are directly
- * testable without needing to actually uninstall either package.
+ * Independently loads the mandatory `chart.js` peer dependency and, only
+ * when `needsZoom` is true, the opt-in `chartjs-plugin-zoom` peer dependency
+ * — so a partial install (`chart.js` only, which `peerDependenciesMeta`
+ * marks as a valid combination) degrades to "charts render, zoom is inert"
+ * instead of every chart breaking. `needsZoom` defaults to `false` because
+ * most charts never set `zoom`, and `chartjs-plugin-zoom` has a hard
+ * dependency on `hammerjs` — no point paying that import cost for every
+ * chart on the page. Exported (in addition to `loadChartJs()`/
+ * `loadChartJsWithZoom()` below) so both failure paths — and the real caught
+ * error each one logs — are directly testable without needing to actually
+ * uninstall either package.
  */
 export declare function loadChartAndZoom(importChart?: () => Promise<typeof ChartJsModule>, importZoom?: () => Promise<{
     default: typeof ZoomPlugin;
-}>): Promise<{
+}>, needsZoom?: boolean): Promise<{
     mod: typeof ChartJsModule;
     zoomPlugin: typeof ZoomPlugin | undefined;
 } | null>;
 /**
- * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`,
- * loaded independently — see `loadChartAndZoom()`) once per page, registering
- * only the tree-shaken subset this library uses. Resolves to `null` if
- * chart.js isn't installed; still resolves the real module (with zoom simply
- * unregistered) if only `chartjs-plugin-zoom` is missing.
+ * Lazily loads the optional peer dependency `chart.js` once per page,
+ * registering only the tree-shaken subset this library uses.
+ * `chartjs-plugin-zoom` is *not* loaded here — see `loadChartJsWithZoom()`
+ * below, which any chart that actually sets `zoom` should call instead.
+ * Resolves to `null` if chart.js isn't installed.
  */
 export declare function loadChartJs(): Promise<typeof ChartJsModule | null>;
+/**
+ * Loads `chart.js` (reusing the cached load above) plus `chartjs-plugin-zoom`,
+ * on first actual demand — most charts never set `zoom`, and the plugin has
+ * a hard dependency on `hammerjs`. Registers the plugin at most once across
+ * the page. Call this instead of `loadChartJs()` from any chart that has
+ * `zoom` set (at connect time, or later once `zoom` turns on).
+ *
+ * The whole operation (chart.js core + the zoom plugin import + its
+ * registration) is memoized behind a single `zoomLoad` promise, assigned
+ * synchronously before any `await` — mirroring `loadChartJs()`'s own
+ * `chartJs` memoization above. A plain boolean "already registered" guard
+ * checked before an `await` and only set after would leave a check-then-act
+ * race across that `await` boundary: two callers racing to turn `zoom` on
+ * close together (e.g. two `<lyra-chart zoom>` elements connecting around
+ * the same time) could both pass the check before either sets the flag,
+ * each independently re-importing the plugin and calling
+ * `mod.Chart.register()`. A single promise assigned up front closes that
+ * window — the second caller synchronously observes `zoomLoad` already set
+ * and awaits the same in-flight load instead of starting its own.
+ *
+ * `importZoom` defaults to the real dynamic import; it's a parameter purely
+ * so tests can instrument/count the underlying import without needing to
+ * actually uninstall the package.
+ */
+export declare function loadChartJsWithZoom(importZoom?: () => Promise<{
+    default: typeof ZoomPlugin;
+}>): Promise<typeof ChartJsModule | null>;

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

@@ -1,15 +1,20 @@
 let chartJs;
+let zoomLoad;
 let registered = false;
 /**
- * Independently loads the mandatory `chart.js` peer dependency and the
- * opt-in `chartjs-plugin-zoom` peer dependency, so a partial install
- * (`chart.js` only, which `peerDependenciesMeta` marks as a valid
- * combination) degrades to "charts render, zoom is inert" instead of every
- * chart breaking. Exported (in addition to `loadChartJs()` below) so both
- * failure paths — and the real caught error each one logs — are directly
- * testable without needing to actually uninstall either package.
+ * Independently loads the mandatory `chart.js` peer dependency and, only
+ * when `needsZoom` is true, the opt-in `chartjs-plugin-zoom` peer dependency
+ * — so a partial install (`chart.js` only, which `peerDependenciesMeta`
+ * marks as a valid combination) degrades to "charts render, zoom is inert"
+ * instead of every chart breaking. `needsZoom` defaults to `false` because
+ * most charts never set `zoom`, and `chartjs-plugin-zoom` has a hard
+ * dependency on `hammerjs` — no point paying that import cost for every
+ * chart on the page. Exported (in addition to `loadChartJs()`/
+ * `loadChartJsWithZoom()` below) so both failure paths — and the real caught
+ * error each one logs — are directly testable without needing to actually
+ * uninstall either package.
  */
-export async function loadChartAndZoom(importChart = () => import('chart.js'), importZoom = () => import('chartjs-plugin-zoom')) {
+export async function loadChartAndZoom(importChart = () => import('chart.js'), importZoom = () => import('chartjs-plugin-zoom'), needsZoom = false) {
     let mod;
     try {
         mod = await importChart();
@@ -18,6 +23,8 @@ export async function loadChartAndZoom(importChart = () => import('chart.js'), i
         console.warn('<lyra-chart> needs the optional peer dependency `chart.js` — install it with `pnpm add chart.js`:', err);
         return null;
     }
+    if (!needsZoom)
+        return { mod, zoomPlugin: undefined };
     let zoomPlugin;
     try {
         zoomPlugin = (await importZoom()).default;
@@ -29,25 +36,65 @@ export async function loadChartAndZoom(importChart = () => import('chart.js'), i
     }
     return { mod, zoomPlugin };
 }
+function registerCore(mod) {
+    if (registered)
+        return;
+    mod.Chart.register(mod.LineController, mod.BarController, mod.ScatterController, mod.DoughnutController, mod.PieController, mod.RadarController, mod.PolarAreaController, mod.BubbleController, mod.LineElement, mod.PointElement, mod.BarElement, mod.ArcElement, mod.LinearScale, mod.CategoryScale, mod.RadialLinearScale, mod.Filler, mod.Tooltip, mod.Legend);
+    registered = true;
+}
 /**
- * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`,
- * loaded independently — see `loadChartAndZoom()`) once per page, registering
- * only the tree-shaken subset this library uses. Resolves to `null` if
- * chart.js isn't installed; still resolves the real module (with zoom simply
- * unregistered) if only `chartjs-plugin-zoom` is missing.
+ * Lazily loads the optional peer dependency `chart.js` once per page,
+ * registering only the tree-shaken subset this library uses.
+ * `chartjs-plugin-zoom` is *not* loaded here — see `loadChartJsWithZoom()`
+ * below, which any chart that actually sets `zoom` should call instead.
+ * Resolves to `null` if chart.js isn't installed.
  */
 export function loadChartJs() {
     if (!chartJs) {
         chartJs = loadChartAndZoom().then((result) => {
             if (!result)
                 return null;
-            const { mod, zoomPlugin } = result;
-            if (!registered) {
-                mod.Chart.register(mod.LineController, mod.BarController, mod.ScatterController, mod.DoughnutController, mod.PieController, mod.RadarController, mod.PolarAreaController, mod.BubbleController, mod.LineElement, mod.PointElement, mod.BarElement, mod.ArcElement, mod.LinearScale, mod.CategoryScale, mod.RadialLinearScale, mod.Filler, mod.Tooltip, mod.Legend, ...(zoomPlugin ? [zoomPlugin] : []));
-                registered = true;
+            registerCore(result.mod);
+            return result.mod;
+        });
+    }
+    return chartJs;
+}
+/**
+ * Loads `chart.js` (reusing the cached load above) plus `chartjs-plugin-zoom`,
+ * on first actual demand — most charts never set `zoom`, and the plugin has
+ * a hard dependency on `hammerjs`. Registers the plugin at most once across
+ * the page. Call this instead of `loadChartJs()` from any chart that has
+ * `zoom` set (at connect time, or later once `zoom` turns on).
+ *
+ * The whole operation (chart.js core + the zoom plugin import + its
+ * registration) is memoized behind a single `zoomLoad` promise, assigned
+ * synchronously before any `await` — mirroring `loadChartJs()`'s own
+ * `chartJs` memoization above. A plain boolean "already registered" guard
+ * checked before an `await` and only set after would leave a check-then-act
+ * race across that `await` boundary: two callers racing to turn `zoom` on
+ * close together (e.g. two `<lyra-chart zoom>` elements connecting around
+ * the same time) could both pass the check before either sets the flag,
+ * each independently re-importing the plugin and calling
+ * `mod.Chart.register()`. A single promise assigned up front closes that
+ * window — the second caller synchronously observes `zoomLoad` already set
+ * and awaits the same in-flight load instead of starting its own.
+ *
+ * `importZoom` defaults to the real dynamic import; it's a parameter purely
+ * so tests can instrument/count the underlying import without needing to
+ * actually uninstall the package.
+ */
+export function loadChartJsWithZoom(importZoom = () => import('chartjs-plugin-zoom')) {
+    if (!zoomLoad) {
+        zoomLoad = loadChartJs().then(async (mod) => {
+            if (!mod)
+                return null;
+            const result = await loadChartAndZoom(() => Promise.resolve(mod), importZoom, true);
+            if (result?.zoomPlugin) {
+                mod.Chart.register(result.zoomPlugin);
             }
             return mod;
         });
     }
-    return chartJs;
+    return zoomLoad;
 }

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

@@ -1,5 +1,4 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
-import type { ChartConfiguration } from 'chart.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../skeleton/skeleton.js';
 export interface Series {
@@ -46,7 +45,12 @@ export type LyraChartType = 'line' | 'bar' | 'scatter' | 'pie' | 'doughnut' | 'r
  *   intersect-only — see `handlePointClick()`) a data point/segment.
  *   `detail: { datasetIndex: number, index: number, label: string |
  *   undefined, value: unknown }`.
- * @csspart base, canvas, reset-zoom-button
+ * @csspart base - The chart wrapper.
+ * @csspart canvas - The Chart.js canvas.
+ * @csspart reset-zoom-button - The reset-zoom control when zoom is active.
+ * @csspart description - The accessible chart summary.
+ * @csspart data-table - The optional generated or slotted data table.
+ * @slot data-table - An optional consumer-provided accessible table alternative.
  */
 export declare class LyraChart extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -61,6 +65,12 @@ export declare class LyraChart extends LyraElement {
     yLabel: string;
     y2Label: string;
     beginAtZero: boolean;
+    /** Accessible name applied to the canvas. Falls back to the dataset labels. */
+    accessibleLabel: string;
+    /** Accessible description for the canvas. When unset, a concise data/trend summary is generated. */
+    accessibleDescription: string;
+    /** Makes the generated data table visible; it remains screen-reader available when false. */
+    showDataTable: boolean;
     /** Sets `options.indexAxis = 'y'`, Chart.js's own mechanism for horizontal bars (also applies to line/area types). */
     horizontal: boolean;
     /** Stacks the `x`/`y`(/`y2`) scale entries `buildScales()` returns; only meaningful for `bar` and `line` types. */
@@ -73,20 +83,35 @@ export declare class LyraChart extends LyraElement {
      * without discarding sibling keys the generated config set), for consumers
      * who need full Chart.js control beyond the simplified `Series` shape.
      */
-    config?: Partial<ChartConfiguration>;
+    config?: Partial<import('chart.js').ChartConfiguration>;
     /** 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?;
     private builtType?;
     private suppressZoomComplete;
+    private descriptionId;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Resets a stale `zoomed` flag before the render pass that's about to call
+     * `draw()`: a `type` (or `config.type` override) change that lands on a
+     * *different* effective Chart.js type makes `draw()` destroy the old
+     * `Chart` instance and construct a brand-new one, which was never zoomed —
+     * without this, `render()`'s reset-zoom-button stays visible for an
+     * instance that has no zoom/pan state left to reset. Computed here (before
+     * render), not in `updated()`/`draw()`, because setting `zoomed` — a
+     * reactive `@state` property — from `updated()` would schedule a second,
+     * redundant update pass; `willUpdate()` runs before this cycle's render is
+     * considered complete, so the same set just folds into the render already
+     * in progress. Same rationale as `toast-item.ts`'s `willUpdate()`-vs-
+     * `updated()` split.
+     */
+    protected willUpdate(): void;
     protected updated(changed: PropertyValues): void;
     private seriesToDataset;
     /**
@@ -98,14 +123,6 @@ 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
@@ -130,6 +147,15 @@ export declare class LyraChart extends LyraElement {
      * chart type (bar/line/pie/doughnut/etc.), not just bars.
      */
     private handlePointClick;
+    /**
+     * `config.type` (if set) overrides the attribute `type` post-merge — this
+     * is the one place that resolution logic lives, shared by `buildConfig()`
+     * (which needs it to build scales/interaction for the right type) and
+     * `willUpdate()` (which needs it to detect a type change against the last
+     * *actually built* type, `this.builtType`, before the render pass that
+     * would rebuild the `Chart` instance).
+     */
+    private effectiveType;
     private buildConfig;
     private draw;
     /** Reset any active zoom/pan back to the original view. */
@@ -144,6 +170,9 @@ export declare class LyraChart extends LyraElement {
      * update loop has nothing of its own to trigger `draw()` on.
      */
     refreshTheme(): void;
+    private seriesValues;
+    private chartDescription;
+    private renderDataTable;
     render(): TemplateResult;
 }
 declare global {
@@ -151,3 +180,17 @@ declare global {
         'lyra-chart': LyraChart;
     }
 }
+/**
+ * Installs a read-only `type` accessor pair on a `LyraChart` subclass's
+ * prototype, locking it to `value` — assigning `.type` afterwards (attribute
+ * or property) is silently ignored. `LyraChart` declares `type` as a plain
+ * (decorator-managed) class field, and TypeScript forbids a subclass from
+ * re-declaring a base field as a getter/setter pair via ordinary class
+ * syntax (TS2611), so the accessor pair is installed directly on the
+ * prototype instead, which is runtime-equivalent (same shadowing semantics
+ * as a class-syntax override) without tripping that check. Shared by every
+ * `lyra-*-chart` subclass (bar/line/pie/doughnut/scatter/bubble/radar/
+ * polarArea) plus `lyra-histogram`, replacing what used to be an identical
+ * ~16-line `Object.defineProperty` block copy-pasted into each file.
+ */
+export declare function lockChartType(ctor: Function, value: string): void;