@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/chart/chart.js

@@ -8,9 +8,25 @@ import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
-import { loadChartJs } from './chart-loader.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
+import { loadChartJs, loadChartJsWithZoom } from './chart-loader.js';
 import { styles } from './chart.styles.js';
 import '../skeleton/skeleton.js';
+const CHART_TYPES = new Set([
+    'line',
+    'bar',
+    'scatter',
+    'pie',
+    'doughnut',
+    'radar',
+    'polarArea',
+    'bubble',
+]);
+function normalizeChartType(value) {
+    return typeof value === 'string' && CHART_TYPES.has(value)
+        ? value
+        : 'line';
+}
 /**
  * Recursively merges `override` onto `base`, matching JSON-merge semantics:
  * plain objects are merged key-by-key at every depth; arrays, functions, and
@@ -39,15 +55,21 @@ const FALLBACK_TICK_COLOR = '#6b7280';
 const FALLBACK_LEGEND_COLOR = '#1a1a1a';
 const FALLBACK_TOOLTIP_BG = '#fff';
 const FALLBACK_TOOLTIP_TEXT = '#1a1a1a';
-function deepMerge(base, override) {
+function deepMerge(base, override, seen = new WeakMap()) {
+    if (typeof override === 'object' && override !== null) {
+        const previous = seen.get(override);
+        if (previous !== undefined)
+            return previous;
+    }
     if (!isPlainObject(base) || !isPlainObject(override)) {
         return (override === undefined ? base : override);
     }
     const result = { ...base };
+    seen.set(override, result);
     for (const key of Object.keys(override)) {
         if (UNSAFE_KEYS.has(key))
             continue;
-        result[key] = deepMerge(base[key], override[key]);
+        result[key] = deepMerge(base[key], override[key], seen);
     }
     return result;
 }
@@ -76,7 +98,12 @@ function deepMerge(base, override) {
  *   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 class LyraChart extends LyraElement {
     constructor() {
@@ -92,6 +119,12 @@ export class LyraChart extends LyraElement {
         this.yLabel = '';
         this.y2Label = '';
         this.beginAtZero = true;
+        /** Accessible name applied to the canvas. Falls back to the dataset labels. */
+        this.accessibleLabel = '';
+        /** Accessible description for the canvas. When unset, a concise data/trend summary is generated. */
+        this.accessibleDescription = '';
+        /** Makes the generated data table visible; it remains screen-reader available when false. */
+        this.showDataTable = false;
         /** 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. */
@@ -100,18 +133,21 @@ export class LyraChart extends LyraElement {
         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;
+        this.descriptionId = nextId('chart-description');
     }
-    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
     connectedCallback() {
         super.connectedCallback();
-        void loadChartJs().then((mod) => {
+        const load = this.zoom ? loadChartJsWithZoom() : loadChartJs();
+        void load.then((mod) => {
+            if (!this.isConnected)
+                return;
             this.loading = false;
             if (!mod)
                 return;
@@ -134,7 +170,41 @@ export class LyraChart extends LyraElement {
         this.chart = undefined;
         this.intersectionObserver?.disconnect();
     }
+    /**
+     * 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.
+     */
+    willUpdate() {
+        if (!this.zoomed)
+            return;
+        if (this.effectiveType() !== this.builtType) {
+            this.zoomed = false;
+        }
+    }
     updated(changed) {
+        // Disconnected between the property change that scheduled this update
+        // and Lit's (microtask-deferred) processing of it — e.g. a property
+        // changes and the element is removed in the same synchronous tick, so
+        // `disconnectedCallback()` (which already destroyed `this.chart`) runs
+        // *before* this method does. Nothing below should run in that case:
+        // this method's own unconditional `draw()` call further down would
+        // otherwise construct a brand-new `Chart` bound to the now-detached
+        // canvas — `draw()`'s own guard (`!chartJsModule || !canvasEl`) doesn't
+        // catch this, since both persist on a disconnected-but-intact element.
+        // If the component is reconnected later, `connectedCallback()` re-kicks
+        // its own load/draw sequence, so nothing is lost by bailing out here.
+        if (!this.isConnected)
+            return;
         if (this.loading)
             this.setAttribute('aria-busy', 'true');
         else
@@ -154,15 +224,43 @@ export class LyraChart extends LyraElement {
         // other property having changed in the meantime.
         if (this.loading)
             return;
-        const onlyZoomChanged = changed.size === 1 && changed.has('zoomed');
-        if (onlyZoomChanged)
+        // `zoom` can also turn on after connect (it was false at
+        // `connectedCallback()` time, so only the core `loadChartJs()` load was
+        // kicked off) — load the zoom plugin on demand now and redraw once it's
+        // registered. Mirrors the same `isConnected` guard `connectedCallback()`
+        // uses: this method already bailed out above if *already* disconnected,
+        // but the element can *also* disconnect during the gap while this
+        // dynamic import is in flight — without this guard, `draw()` would
+        // construct a new, leaked `Chart` bound to the now-detached canvas once
+        // the import resolves.
+        if (changed.has('zoom') && this.zoom) {
+            void loadChartJsWithZoom().then(() => {
+                if (!this.isConnected)
+                    return;
+                this.draw();
+            });
+        }
+        const contentChanged = [
+            'type',
+            'labels',
+            'datasets',
+            'legend',
+            'area',
+            'height',
+            'xLabel',
+            'yLabel',
+            'y2Label',
+            'beginAtZero',
+            'horizontal',
+            'stacked',
+            'config',
+            'zoom',
+            'loading',
+        ].some((name) => changed.has(name));
+        if (!contentChanged)
             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) {
@@ -170,7 +268,20 @@ export class LyraChart extends LyraElement {
         return {
             label: s.label,
             data: s.points ?? s.data ?? [],
-            type: s.type ?? this.type,
+            // Leave unset rather than defaulting to `this.type`: Chart.js already
+            // falls back to the chart-level (effective) type for any dataset that
+            // doesn't set its own `type`, and forcing `this.type` here unconditionally
+            // used to be harmless (it normally matched the effective type anyway) —
+            // but it actively breaks a `config.type` override to a different chart
+            // family (e.g. attribute `type="line"` + `config.type: 'radar'`): every
+            // dataset would carry an explicit `type: 'line'` under a chart whose
+            // scales are built for `radar` (a single radial `r` scale, no `x`/`y`),
+            // which Chart.js can't reconcile — it hangs the page trying to lay out
+            // a cartesian-scale controller against a radial-only scale set. Only
+            // `s.type` (an explicit per-series mixed-type override, e.g. a line
+            // series over a bar chart of the *same* effective family) is passed
+            // through.
+            type: s.type,
             fill: s.fill ?? this.area,
             borderWidth: s.width ?? 2,
             borderDash: s.dash ? [4, 4] : undefined,
@@ -179,7 +290,6 @@ export class LyraChart extends LyraElement {
             pointBackgroundColor: s.pointColors,
             pointRadius: s.pointRadius,
             yAxisID: s.axis === 'y2' ? 'y2' : 'y',
-            tooltip: s.noTooltip ? { enabled: false } : undefined,
         };
     }
     /**
@@ -200,29 +310,6 @@ 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
@@ -235,10 +322,10 @@ export class LyraChart extends LyraElement {
      * 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(theme) {
-        if (this.type === 'pie' || this.type === 'doughnut')
+    buildScales(effectiveType, theme) {
+        if (effectiveType === 'pie' || effectiveType === 'doughnut')
             return {};
-        if (this.type === 'radar' || this.type === 'polarArea') {
+        if (effectiveType === 'radar' || effectiveType === 'polarArea') {
             return {
                 r: {
                     beginAtZero: this.beginAtZero,
@@ -253,10 +340,10 @@ export class LyraChart extends LyraElement {
         // `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');
+        const stacked = this.stacked && (effectiveType === 'bar' || effectiveType === 'line');
         return {
             x: {
-                type: this.type === 'scatter' || this.type === 'bubble' ? 'linear' : 'category',
+                type: effectiveType === 'scatter' || effectiveType === 'bubble' ? 'linear' : 'category',
                 title: { display: !!this.xLabel, text: this.xLabel, color: theme.tick },
                 ticks: { color: theme.tick },
                 grid: { color: theme.grid },
@@ -308,10 +395,27 @@ export class LyraChart extends LyraElement {
         const value = chart.data.datasets[datasetIndex]?.data?.[index] ?? null;
         this.emit('lyra-point-click', { datasetIndex, index, label, value });
     }
+    /**
+     * `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).
+     */
+    effectiveType() {
+        return (this.config?.type ?? normalizeChartType(this.type));
+    }
     buildConfig() {
         const theme = this.themeColors();
+        // Resolve the effective type up front: `config.type` (if set) overrides
+        // the attribute `type` post-merge, so scales/interaction must be built
+        // for *that* type, not `this.type` — otherwise a config.type override
+        // (e.g. line -> radar) ships with the wrong axis shape (categorical x/y
+        // instead of a radial r scale).
+        const effectiveType = this.effectiveType();
         const generated = {
-            type: this.type,
+            type: effectiveType,
             data: {
                 labels: this.labels,
                 datasets: this.datasets.map((s) => this.seriesToDataset(s)),
@@ -329,7 +433,7 @@ export class LyraChart extends LyraElement {
                 // 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' },
+                interaction: { intersect: false, mode: effectiveType === 'scatter' ? 'nearest' : 'index' },
                 onClick: (event, _elements, chart) => this.handlePointClick(event, chart),
                 plugins: {
                     legend: { display: this.legend, labels: { color: theme.legend } },
@@ -337,6 +441,10 @@ export class LyraChart extends LyraElement {
                         backgroundColor: theme.tooltipBg,
                         titleColor: theme.tooltipText,
                         bodyColor: theme.tooltipText,
+                        // Chart.js's tooltip plugin has no per-dataset `tooltip.enabled`
+                        // — `Series.noTooltip` is implemented here instead, via the one
+                        // mechanism the core tooltip plugin actually reads.
+                        filter: (item) => !this.datasets[item.datasetIndex]?.noTooltip,
                     },
                     zoom: this.zoom
                         ? {
@@ -357,7 +465,7 @@ export class LyraChart extends LyraElement {
                         }
                         : undefined,
                 },
-                scales: this.buildScales(theme),
+                scales: this.buildScales(effectiveType, theme),
             },
         };
         if (!this.config)
@@ -408,6 +516,56 @@ export class LyraChart extends LyraElement {
     refreshTheme() {
         this.draw();
     }
+    seriesValues(series) {
+        if (series.points)
+            return series.points.map((point) => point.y).filter((value) => Number.isFinite(value));
+        return (series.data ?? []).filter((value) => value != null && Number.isFinite(value));
+    }
+    chartDescription() {
+        if (this.accessibleDescription)
+            return this.accessibleDescription;
+        const summaries = this.datasets.map((series) => {
+            const values = this.seriesValues(series);
+            if (!values.length)
+                return `${series.label}: no data`;
+            const first = values[0];
+            const last = values[values.length - 1];
+            const trend = last > first ? 'increasing' : last < first ? 'decreasing' : 'flat';
+            let min = values[0];
+            let max = values[0];
+            for (const value of values) {
+                min = Math.min(min, value);
+                max = Math.max(max, value);
+            }
+            return `${series.label}: ${values.length} values, range ${min} to ${max}, ${trend} trend`;
+        });
+        return `${this.effectiveType()} chart${summaries.length ? `. ${summaries.join('. ')}` : ' with no data'}.`;
+    }
+    renderDataTable() {
+        const rowCount = Math.max(this.labels.length, ...this.datasets.map((series) => (series.points ? series.points.length : series.data?.length ?? 0)), 0);
+        return html `
+      <table class=${this.showDataTable ? nothing : 'sr-only'}>
+        <caption>${this.accessibleLabel || 'Chart data'}</caption>
+        <thead>
+          <tr>
+            <th scope="col">Category</th>
+            ${this.datasets.map((series) => html `<th scope="col">${series.label}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${Array.from({ length: rowCount }, (_, index) => html `
+            <tr>
+              <th scope="row">${this.labels[index] ?? `Point ${index + 1}`}</th>
+              ${this.datasets.map((series) => {
+            const value = series.points ? series.points[index]?.y : series.data?.[index];
+            return html `<td>${value == null || !Number.isFinite(value) ? 'No data' : value}</td>`;
+        })}
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    `;
+    }
     render() {
         if (this.loading) {
             return html `
@@ -416,10 +574,16 @@ export class LyraChart extends LyraElement {
         </div>
       `;
         }
-        const label = this.datasets.map((d) => d.label).join(', ') || 'Chart';
+        const label = this.accessibleLabel || this.datasets.map((d) => d.label).join(', ') || 'Chart';
+        const description = this.chartDescription();
         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>
         ${this.zoom && this.zoomed
             ? html `<button part="reset-zoom-button" type="button" @click=${() => this.resetZoom()}>
               Reset zoom
@@ -430,7 +594,7 @@ export class LyraChart extends LyraElement {
     }
 }
 __decorate([
-    property()
+    property({ converter: { fromAttribute: (value) => normalizeChartType(value) } })
 ], LyraChart.prototype, "type", void 0);
 __decorate([
     property({ attribute: false })
@@ -462,6 +626,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'begin-at-zero' })
 ], LyraChart.prototype, "beginAtZero", void 0);
+__decorate([
+    property({ attribute: 'accessible-label' })
+], LyraChart.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ attribute: 'accessible-description' })
+], LyraChart.prototype, "accessibleDescription", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-data-table' })
+], LyraChart.prototype, "showDataTable", void 0);
 __decorate([
     property({ type: Boolean })
 ], LyraChart.prototype, "horizontal", void 0);
@@ -484,3 +657,28 @@ __decorate([
     query('canvas')
 ], LyraChart.prototype, "canvasEl", void 0);
 defineElement('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 function lockChartType(ctor, value) {
+    Object.defineProperty(ctor.prototype, 'type', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return value;
+        },
+        set(_v) {
+            /* locked to `value`; direct writes are ignored */
+        },
+    });
+}

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

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
@@ -7,21 +7,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraDoughnutChart 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(LyraDoughnutChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'doughnut';
-    },
-    set(_v) {
-        /* locked to 'doughnut'; direct writes are ignored */
-    },
-});
+lockChartType(LyraDoughnutChart, 'doughnut');
 defineElement('doughnut-chart', LyraDoughnutChart);

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

@@ -2,5 +2,11 @@ export interface HistogramBucket {
     label: string;
     count: number;
 }
-/** Splits `values` into `binCount` equal-width buckets and counts membership. */
+export declare const MAX_HISTOGRAM_BINS = 1000;
+/** Converts an untyped bucket count to a bounded, non-negative integer. */
+export declare function normalizeHistogramBinCount(binCount: unknown): number;
+/** Splits `values` into `binCount` equal-width buckets and counts membership.
+ *  Non-finite `binCount` (or <= 0) yields no buckets; a fractional `binCount`
+ *  is floored and an excessive count is capped; non-finite samples in
+ *  `values` are dropped rather than corrupting bucket-index math. */
 export declare function binValues(values: number[], binCount: number): HistogramBucket[];

package/dist/components/chart/histogram-bin.js

@@ -1,29 +1,47 @@
-/** Splits `values` into `binCount` equal-width buckets and counts membership. */
+export const MAX_HISTOGRAM_BINS = 1_000;
+/** Converts an untyped bucket count to a bounded, non-negative integer. */
+export function normalizeHistogramBinCount(binCount) {
+    const numeric = typeof binCount === 'number' ? binCount : Number(binCount);
+    if (!Number.isFinite(numeric))
+        return 0;
+    return Math.min(MAX_HISTOGRAM_BINS, Math.max(0, Math.floor(numeric)));
+}
+/** Splits `values` into `binCount` equal-width buckets and counts membership.
+ *  Non-finite `binCount` (or <= 0) yields no buckets; a fractional `binCount`
+ *  is floored and an excessive count is capped; non-finite samples in
+ *  `values` are dropped rather than corrupting bucket-index math. */
 export function binValues(values, binCount) {
-    if (values.length === 0 || binCount <= 0)
+    const finite = values.filter((v) => Number.isFinite(v));
+    if (finite.length === 0)
+        return [];
+    const bins = normalizeHistogramBinCount(binCount);
+    if (bins <= 0)
         return [];
-    // Spreading `values` as call arguments (`Math.min(...values)`) throws
-    // `RangeError: Maximum call stack size exceeded` once `values` is large
-    // enough to overflow the engine's argument-list limit — reduce manually
-    // instead so an arbitrarily large sample never crashes.
-    let lo = values[0];
-    let hi = values[0];
-    for (const v of values) {
+    let lo = finite[0];
+    let hi = finite[0];
+    for (const v of finite) {
         if (v < lo)
             lo = v;
         if (v > hi)
             hi = v;
     }
+    // Constant data (lo === hi) previously fell into the `v === hi` branch
+    // below, which places every value in the *last* bucket alone — misleading,
+    // since every other bucket reads 0 and the label implies a spread that
+    // isn't real. Spread it into the *first* bucket instead so a single-value
+    // dataset reads as "N items, one bucket populated" starting from the data's
+    // own value, not its synthetic +1 upper edge.
+    const constant = hi === lo;
     const span = hi - lo || 1;
-    const width = span / binCount;
-    const buckets = Array.from({ length: binCount }, (_, i) => {
+    const width = span / bins;
+    const buckets = Array.from({ length: bins }, (_, i) => {
         const bLo = lo + i * width;
         const bHi = lo + (i + 1) * width;
         return { label: `${bLo.toFixed(1)}–${bHi.toFixed(1)}`, count: 0 };
     });
-    for (const v of values) {
-        const index = v === hi ? binCount - 1 : Math.floor((v - lo) / width);
-        buckets[Math.min(binCount - 1, Math.max(0, index))].count++;
+    for (const v of finite) {
+        const index = constant ? 0 : v === hi ? bins - 1 : Math.floor((v - lo) / width);
+        buckets[Math.min(bins - 1, Math.max(0, index))].count++;
     }
     return buckets;
 }

package/dist/components/chart/histogram.js

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
-import { binValues } from './histogram-bin.js';
+import { binValues, normalizeHistogramBinCount, } from './histogram-bin.js';
 import { styles } from './histogram.styles.js';
 /**
  * `<lyra-histogram>` — bins `values` into `bins` equal-width buckets and
@@ -32,7 +32,7 @@ export class LyraHistogram extends LyraChart {
     static { this.styles = [LyraElement.styles, styles]; }
 }
 __decorate([
-    property({ type: Number })
+    property({ converter: { fromAttribute: (value) => normalizeHistogramBinCount(value) } })
 ], LyraHistogram.prototype, "bins", void 0);
 __decorate([
     property({ attribute: false })
@@ -48,12 +48,13 @@ __decorate([
 // change doesn't re-run the O(n) bucketing loop from scratch on every access.
 const bucketCache = new WeakMap();
 export function binnedBuckets(el) {
+    const bins = normalizeHistogramBinCount(el.bins);
     const cached = bucketCache.get(el);
-    if (cached && cached.values === el.values && cached.bins === el.bins) {
+    if (cached && cached.values === el.values && cached.bins === bins) {
         return cached.buckets;
     }
-    const buckets = binValues(el.values, el.bins);
-    bucketCache.set(el, { values: el.values, bins: el.bins, buckets });
+    const buckets = binValues(el.values, bins);
+    bucketCache.set(el, { values: el.values, bins, buckets });
     return buckets;
 }
 // `labels`/`datasets` are computed from `values`/`bins` rather than settable
@@ -87,14 +88,5 @@ Object.defineProperty(LyraHistogram.prototype, 'datasets', {
 // just a default value, not an enforced lock, so without this a `type="line"`
 // attribute (or `el.type = 'line'`) would silently turn a histogram into a
 // line chart of its own bucket counts.
-Object.defineProperty(LyraHistogram.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'bar';
-    },
-    set(_v) {
-        /* locked to 'bar'; direct writes are ignored */
-    },
-});
+lockChartType(LyraHistogram, 'bar');
 defineElement('histogram', LyraHistogram);

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

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-line-chart>` — `<lyra-chart>` with `type` locked to `"line"`.
@@ -7,21 +7,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraLineChart 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(LyraLineChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'line';
-    },
-    set(_v) {
-        /* locked to 'line'; direct writes are ignored */
-    },
-});
+lockChartType(LyraLineChart, 'line');
 defineElement('line-chart', LyraLineChart);