@aceshooting/lyra-ui 1.0.1 → 1.2.0

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

@@ -42,6 +42,10 @@ export type LyraChartType = 'line' | 'bar' | 'scatter' | 'pie' | 'doughnut' | 'r
  *
  * @customElement lyra-chart
  * @event lyra-zoom - `detail: { zoomed }`.
+ * @event lyra-point-click - Fired when a click lands on (or nearest,
+ *   intersect-only — see `handlePointClick()`) a data point/segment.
+ *   `detail: { datasetIndex: number, index: number, label: string |
+ *   undefined, value: unknown }`.
  * @csspart base, canvas, reset-zoom-button
  */
 export declare class LyraChart extends LyraElement {
@@ -57,6 +61,10 @@ export declare class LyraChart extends LyraElement {
     yLabel: string;
     y2Label: string;
     beginAtZero: 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. */
+    stacked: boolean;
     /**
      * Raw Chart.js configuration passthrough — mirrors `wa-chart`'s `config`
      * property. Recursively deep-merged over the `Series`-derived config in
@@ -69,25 +77,73 @@ 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?;
     private builtType?;
+    private suppressZoomComplete;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private seriesToDataset;
+    /**
+     * Resolves the `--lyra-chart-*` theme tokens (declared in
+     * `chart.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 documented on
+     * `heatmap.ts`'s `labelColor()`/`noDataFill()`/`scaleEndpoints()` — so this
+     * 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
      * `r` scale Chart.js v4 uses for radar/polarArea, and the cartesian
-     * `x`/`y`(/`y2`) block for every other (line/bar/scatter/bubble) type.
+     * `x`/`y`(/`y2`) block for every other (line/bar/scatter/bubble) type — with
+     * `x` itself further split within that block: scatter and bubble datasets
+     * carry raw numeric `{x, y(, r)}` points (via `Series.points`) and need a
+     * linear `x` scale, while line/bar plot against `labels` and need the
+     * default categorical one. `theme` (from `themeColors()`) drives every
+     * scale's `ticks.color`/`grid.color`/axis `title.color` so grid lines and
+     * labels retheme instead of sitting at Chart.js's own hardcoded defaults.
      */
     private buildScales;
+    /**
+     * `options.onClick` handler wired in `buildConfig()`. The chart-wide
+     * `interaction` mode above (`'index'`/`'nearest'`, `intersect: false`) is
+     * tuned for hover tooltips — resolving which single point/segment was
+     * actually clicked needs its own `getElementsAtEventForMode('nearest', {
+     * intersect: true }, true)` lookup instead, so a click landing off any
+     * point/segment reports nothing (`elements` empty) rather than firing for
+     * whatever's nearest. Covers the per-bar/per-segment click ask for any
+     * chart type (bar/line/pie/doughnut/etc.), not just bars.
+     */
+    private handlePointClick;
     private buildConfig;
     private draw;
     /** Reset any active zoom/pan back to the original view. */
     resetZoom(): void;
+    /**
+     * Forces a redraw so `themeColors()` re-reads the `--lyra-chart-*` custom
+     * properties from the current computed style. No global theme-broadcast
+     * event exists anywhere in lyra-ui (nothing to subscribe to here) — this
+     * is the escape hatch for a consumer's own theme-toggle handler to call
+     * directly when it flips e.g. a `data-theme` attribute upstream that
+     * doesn't otherwise change any `lyra-chart` property, so Lit's reactive
+     * update loop has nothing of its own to trigger `draw()` on.
+     */
+    refreshTheme(): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/chart/chart.js

@@ -27,6 +27,18 @@ function isPlainObject(value) {
 // response) reach up through the merge and mutate `Object.prototype` —
 // skipped unconditionally regardless of `base`'s own shape.
 const UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+function prefersReducedMotion() {
+    return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+// Defensive JS-side fallbacks for themeColors() below, mirroring the
+// light-mode default of each `--lyra-chart-*` token's own fallback chain
+// (see chart.styles.ts) — only reached if getComputedStyle somehow can't
+// resolve the custom property at all (e.g. host detached from the document).
+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';
 function deepMerge(base, override) {
     if (!isPlainObject(base) || !isPlainObject(override)) {
         return (override === undefined ? base : override);
@@ -60,6 +72,10 @@ function deepMerge(base, override) {
  *
  * @customElement lyra-chart
  * @event lyra-zoom - `detail: { zoomed }`.
+ * @event lyra-point-click - Fired when a click lands on (or nearest,
+ *   intersect-only — see `handlePointClick()`) a data point/segment.
+ *   `detail: { datasetIndex: number, index: number, label: string |
+ *   undefined, value: unknown }`.
  * @csspart base, canvas, reset-zoom-button
  */
 export class LyraChart extends LyraElement {
@@ -76,9 +92,21 @@ export class LyraChart extends LyraElement {
         this.yLabel = '';
         this.y2Label = '';
         this.beginAtZero = true;
+        /** Sets `options.indexAxis = 'y'`, Chart.js's own mechanism for horizontal bars (also applies to line/area types). */
+        this.horizontal = false;
+        /** Stacks the `x`/`y`(/`y2`) scale entries `buildScales()` returns; only meaningful for `bar` and `line` types. */
+        this.stacked = false;
         /** 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
+        // `{zoomed: false}`. Set while this component's own `resetZoom()` is
+        // driving the plugin so that re-entrant callback is ignored.
+        this.suppressZoomComplete = false;
     }
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
@@ -90,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)
@@ -109,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;
@@ -130,41 +182,134 @@ export class LyraChart extends LyraElement {
             tooltip: s.noTooltip ? { enabled: false } : undefined,
         };
     }
+    /**
+     * Resolves the `--lyra-chart-*` theme tokens (declared in
+     * `chart.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 documented on
+     * `heatmap.ts`'s `labelColor()`/`noDataFill()`/`scaleEndpoints()` — 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,
+        };
+    }
+    /**
+     * 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
      * `r` scale Chart.js v4 uses for radar/polarArea, and the cartesian
-     * `x`/`y`(/`y2`) block for every other (line/bar/scatter/bubble) type.
+     * `x`/`y`(/`y2`) block for every other (line/bar/scatter/bubble) type — with
+     * `x` itself further split within that block: scatter and bubble datasets
+     * carry raw numeric `{x, y(, r)}` points (via `Series.points`) and need a
+     * linear `x` scale, while line/bar plot against `labels` and need the
+     * default categorical one. `theme` (from `themeColors()`) drives every
+     * scale's `ticks.color`/`grid.color`/axis `title.color` so grid lines and
+     * labels retheme instead of sitting at Chart.js's own hardcoded defaults.
      */
-    buildScales() {
+    buildScales(theme) {
         if (this.type === 'pie' || this.type === 'doughnut')
             return {};
         if (this.type === 'radar' || this.type === 'polarArea') {
             return {
                 r: {
                     beginAtZero: this.beginAtZero,
+                    ticks: { color: theme.tick },
+                    grid: { color: theme.grid },
+                    angleLines: { color: theme.grid },
+                    pointLabels: { color: theme.tick },
                 },
             };
         }
         const hasY2 = this.datasets.some((s) => s.axis === 'y2');
+        // `stacked` only applies to bar/line-family charts sharing a categorical
+        // axis, per the design spec — scatter/bubble's linear x scale and the
+        // radial r scale above are out of scope.
+        const stacked = this.stacked && (this.type === 'bar' || this.type === 'line');
         return {
             x: {
-                type: this.type === 'scatter' ? 'linear' : 'category',
-                title: { display: !!this.xLabel, text: this.xLabel },
+                type: this.type === 'scatter' || this.type === 'bubble' ? 'linear' : 'category',
+                title: { display: !!this.xLabel, text: this.xLabel, color: theme.tick },
+                ticks: { color: theme.tick },
+                grid: { color: theme.grid },
+                stacked,
+            },
+            y: {
+                beginAtZero: this.beginAtZero,
+                title: { display: !!this.yLabel, text: this.yLabel, color: theme.tick },
+                ticks: { color: theme.tick },
+                grid: { color: theme.grid },
+                stacked,
             },
-            y: { beginAtZero: this.beginAtZero, title: { display: !!this.yLabel, text: this.yLabel } },
             ...(hasY2
                 ? {
                     y2: {
                         position: 'right',
-                        grid: { drawOnChartArea: false },
-                        title: { display: !!this.y2Label, text: this.y2Label },
+                        grid: { drawOnChartArea: false, color: theme.grid },
+                        title: { display: !!this.y2Label, text: this.y2Label, color: theme.tick },
+                        ticks: { color: theme.tick },
+                        stacked,
                     },
                 }
                 : {}),
         };
     }
+    /**
+     * `options.onClick` handler wired in `buildConfig()`. The chart-wide
+     * `interaction` mode above (`'index'`/`'nearest'`, `intersect: false`) is
+     * tuned for hover tooltips — resolving which single point/segment was
+     * actually clicked needs its own `getElementsAtEventForMode('nearest', {
+     * intersect: true }, true)` lookup instead, so a click landing off any
+     * point/segment reports nothing (`elements` empty) rather than firing for
+     * whatever's nearest. Covers the per-bar/per-segment click ask for any
+     * chart type (bar/line/pie/doughnut/etc.), not just bars.
+     */
+    handlePointClick(event, chart) {
+        // Chart.js's own `onClick` handler hands us its `ChartEvent` wrapper, but
+        // `getElementsAtEventForMode()`'s .d.ts (inaccurately) types its first
+        // param as a DOM `Event` — at runtime Chart.js only reads `.x`/`.y` off
+        // whatever is passed (see chart.js/src/helpers/helpers.dom.ts
+        // `getRelativePosition()`), which `ChartEvent` already has, so the cast
+        // here is a type-only correction, not a behavior change.
+        const elements = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
+        const hit = elements[0];
+        if (!hit)
+            return;
+        const { datasetIndex, index } = hit;
+        const label = chart.data.labels?.[index];
+        const value = chart.data.datasets[datasetIndex]?.data?.[index] ?? null;
+        this.emit('lyra-point-click', { datasetIndex, index, label, value });
+    }
     buildConfig() {
+        const theme = this.themeColors();
         const generated = {
             type: this.type,
             data: {
@@ -174,9 +319,25 @@ export class LyraChart extends LyraElement {
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
+                // Chart.js's own mechanism for horizontal bars (also flips line/area
+                // types onto a horizontal category axis).
+                indexAxis: this.horizontal ? 'y' : undefined,
+                // Chart.js's own default ~1000ms draw-in animation only ever fires
+                // from `new Chart()` (chart/type-change construction) — every
+                // in-place update in `draw()` already passes `'none'` to
+                // `Chart#update()`. A CSS media query can't reach that
+                // canvas-internal animation loop, so `prefersReducedMotion()` is
+                // checked here instead and fed into `options.animation`.
+                animation: prefersReducedMotion() ? false : undefined,
                 interaction: { intersect: false, mode: this.type === 'scatter' ? 'nearest' : 'index' },
+                onClick: (event, _elements, chart) => this.handlePointClick(event, chart),
                 plugins: {
-                    legend: { display: this.legend },
+                    legend: { display: this.legend, labels: { color: theme.legend } },
+                    tooltip: {
+                        backgroundColor: theme.tooltipBg,
+                        titleColor: theme.tooltipText,
+                        bodyColor: theme.tooltipText,
+                    },
                     zoom: this.zoom
                         ? {
                             pan: { enabled: false },
@@ -186,6 +347,8 @@ export class LyraChart extends LyraElement {
                                 pinch: { enabled: true },
                                 mode: 'x',
                                 onZoomComplete: () => {
+                                    if (this.suppressZoomComplete)
+                                        return;
                                     this.zoomed = true;
                                     this.emit('lyra-zoom', { zoomed: true });
                                 },
@@ -194,7 +357,7 @@ export class LyraChart extends LyraElement {
                         }
                         : undefined,
                 },
-                scales: this.buildScales(),
+                scales: this.buildScales(theme),
             },
         };
         if (!this.config)
@@ -223,10 +386,28 @@ export class LyraChart extends LyraElement {
     }
     /** Reset any active zoom/pan back to the original view. */
     resetZoom() {
-        this.chart?.resetZoom?.();
+        this.suppressZoomComplete = true;
+        try {
+            this.chart?.resetZoom?.();
+        }
+        finally {
+            this.suppressZoomComplete = false;
+        }
         this.zoomed = false;
         this.emit('lyra-zoom', { zoomed: false });
     }
+    /**
+     * Forces a redraw so `themeColors()` re-reads the `--lyra-chart-*` custom
+     * properties from the current computed style. No global theme-broadcast
+     * event exists anywhere in lyra-ui (nothing to subscribe to here) — this
+     * is the escape hatch for a consumer's own theme-toggle handler to call
+     * directly when it flips e.g. a `data-theme` attribute upstream that
+     * doesn't otherwise change any `lyra-chart` property, so Lit's reactive
+     * update loop has nothing of its own to trigger `draw()` on.
+     */
+    refreshTheme() {
+        this.draw();
+    }
     render() {
         if (this.loading) {
             return html `
@@ -281,6 +462,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'begin-at-zero' })
 ], LyraChart.prototype, "beginAtZero", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraChart.prototype, "stacked", void 0);
 __decorate([
     property({ attribute: false })
 ], LyraChart.prototype, "config", void 0);
@@ -290,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/chart.stories.d.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+/**
+ * The `config` property is the raw Chart.js passthrough escape hatch — it is
+ * deep-merged over the `Series`-generated config, so a nested key like
+ * `options.plugins.title` can be set without discarding the rest of the
+ * generated config the `type`/`labels`/`datasets` attributes produce.
+ */
+export declare const ConfigPassthrough: Story;
+/** `horizontal` sets Chart.js's `indexAxis: 'y'`, flipping bars onto a horizontal axis. */
+export declare const Horizontal: Story;
+/** `stacked` stacks every dataset sharing an axis on top of each other instead of side by side. */
+export declare const Stacked: Story;
+/**
+ * The `--lyra-chart-grid-color`/`-tick-color`/`-legend-color`/`-tooltip-bg`/
+ * `-tooltip-text` custom properties retheme Chart.js's canvas-drawn chrome
+ * (grid lines, axis ticks/titles, legend labels, tooltip). Chart.js can't
+ * consume `var()` directly, so these are resolved via `getComputedStyle`
+ * once per draw — see `themeColors()` in `chart.ts`.
+ */
+export declare const ThemedTokens: Story;
+/**
+ * `lyra-point-click` fires whenever a click lands on (or nearest,
+ * intersect-only) a data point/segment — covers any `type`, not just bars.
+ * `refreshTheme()` forces a redraw so an out-of-band theme change (e.g. a
+ * host-level dark-mode toggle that doesn't touch any `lyra-chart` property)
+ * is picked up immediately, rather than waiting for the next reactive update.
+ */
+export declare const PointClickAndRefreshTheme: Story;

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

@@ -0,0 +1,141 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Chart',
+    component: 'lyra-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        legend
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-chart>
+    `;
+    },
+};
+/**
+ * The `config` property is the raw Chart.js passthrough escape hatch — it is
+ * deep-merged over the `Series`-generated config, so a nested key like
+ * `options.plugins.title` can be set without discarding the rest of the
+ * generated config the `type`/`labels`/`datasets` attributes produce.
+ */
+export const ConfigPassthrough = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+        .config=${{
+            options: { plugins: { title: { display: true, text: 'Quarterly revenue' } } },
+        }}
+      ></lyra-chart>
+    `;
+    },
+};
+/** `horizontal` sets Chart.js's `indexAxis: 'y'`, flipping bars onto a horizontal axis. */
+export const Horizontal = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-chart
+        type="bar"
+        horizontal
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-chart>
+    `;
+    },
+};
+/** `stacked` stacks every dataset sharing an axis on top of each other instead of side by side. */
+export const Stacked = {
+    render: () => {
+        const series = [
+            { label: 'Product A', data: [12, 19, 14, 22] },
+            { label: 'Product B', data: [8, 11, 9, 15] },
+        ];
+        return html `
+      <lyra-chart
+        type="bar"
+        stacked
+        legend
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-chart>
+    `;
+    },
+};
+/**
+ * The `--lyra-chart-grid-color`/`-tick-color`/`-legend-color`/`-tooltip-bg`/
+ * `-tooltip-text` custom properties retheme Chart.js's canvas-drawn chrome
+ * (grid lines, axis ticks/titles, legend labels, tooltip). Chart.js can't
+ * consume `var()` directly, so these are resolved via `getComputedStyle`
+ * once per draw — see `themeColors()` in `chart.ts`.
+ */
+export const ThemedTokens = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-chart
+        type="bar"
+        legend
+        height="16rem"
+        style="
+          width: 22rem;
+          --lyra-chart-grid-color: #e5484d;
+          --lyra-chart-tick-color: #e5484d;
+          --lyra-chart-legend-color: #e5484d;
+          --lyra-chart-tooltip-bg: #1a1a1a;
+          --lyra-chart-tooltip-text: #fff;
+        "
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-chart>
+    `;
+    },
+};
+/**
+ * `lyra-point-click` fires whenever a click lands on (or nearest,
+ * intersect-only) a data point/segment — covers any `type`, not just bars.
+ * `refreshTheme()` forces a redraw so an out-of-band theme change (e.g. a
+ * host-level dark-mode toggle that doesn't touch any `lyra-chart` property)
+ * is picked up immediately, rather than waiting for the next reactive update.
+ */
+export const PointClickAndRefreshTheme = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-chart
+        type="bar"
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+        @lyra-point-click=${(e) => console.log('lyra-point-click', e.detail)}
+      ></lyra-chart>
+      <button
+        type="button"
+        @click=${(e) => {
+            const chart = e.target.previousElementSibling;
+            chart.refreshTheme();
+        }}
+      >
+        refreshTheme()
+      </button>
+    `;
+    },
+};

package/dist/components/chart/chart.styles.js

@@ -4,6 +4,18 @@ export const styles = css `
     display: block;
     position: relative;
     block-size: var(--lyra-chart-height, 280px);
+    /* Chart.js renders to canvas, not the DOM, so it can't consume CSS
+       var() directly — chart.ts's themeColors() resolves these once per
+       draw() via getComputedStyle, same pattern as heatmap.ts's scale-lo/-hi.
+       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;
@@ -30,4 +42,8 @@ export const styles = css `
     color: var(--lyra-color-text);
     cursor: pointer;
   }
+  [part='reset-zoom-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
 `;

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

@@ -1,4 +1,5 @@
 import { LyraChart } from './chart.js';
+import { type HistogramBucket } from './histogram-bin.js';
 /**
  * `<lyra-histogram>` — bins `values` into `bins` equal-width buckets and
  * renders them as a bar chart. Chart.js has no built-in histogram
@@ -13,6 +14,7 @@ export declare class LyraHistogram extends LyraChart {
     values: number[];
     label: string;
 }
+export declare function binnedBuckets(el: LyraHistogram): HistogramBucket[];
 declare global {
     interface HTMLElementTagNameMap {
         'lyra-histogram': LyraHistogram;