@aceshooting/lyra-ui 0.1.2 → 0.1.4

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

@@ -6,9 +6,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-bar-chart
  */
 export class LyraBarChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'bar';
-    }
 }
+// `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(LyraBarChart.prototype, 'type', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return 'bar';
+    },
+    set(_v) {
+        /* locked to 'bar'; direct writes are ignored */
+    },
+});
 defineElement('bar-chart', LyraBarChart);

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

@@ -1,5 +1,6 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.js';
 export interface BoxPlotPoint {
     min: number;
     q1: number;
@@ -15,7 +16,7 @@ export interface BoxPlotSeries {
 /**
  * `<lyra-box-plot>` — a box-and-whisker chart from precomputed five-number
  * summaries (no raw sample data is shipped to the browser). Beyond Web
- * Awesome's chart set — heavily used across ML/clustering dashboards.
+ * Awesome's chart set — useful for summarizing distributions.
  *
  * @customElement lyra-box-plot
  * @csspart base, canvas
@@ -28,6 +29,12 @@ export declare class LyraBoxPlot extends LyraElement {
     height: string;
     yLabel: string;
     beginAtZero: 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 canvasEl?;
     private chart?;
     private chartJsModule?;

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

@@ -5,11 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+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 { styles } from './box-plot.styles.js';
+import '../skeleton/skeleton.js';
 let boxPlotPlugin;
 /**
  * Lazily loads `@sgratzl/chartjs-chart-boxplot` and registers its controller
@@ -36,7 +37,7 @@ function loadBoxPlotPlugin() {
 /**
  * `<lyra-box-plot>` — a box-and-whisker chart from precomputed five-number
  * summaries (no raw sample data is shipped to the browser). Beyond Web
- * Awesome's chart set — heavily used across ML/clustering dashboards.
+ * Awesome's chart set — useful for summarizing distributions.
  *
  * @customElement lyra-box-plot
  * @csspart base, canvas
@@ -50,6 +51,12 @@ export class LyraBoxPlot extends LyraElement {
         this.height = '280px';
         this.yLabel = '';
         this.beginAtZero = true;
+        /**
+         * 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;
     }
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
@@ -64,6 +71,7 @@ export class LyraBoxPlot extends LyraElement {
     // established pattern in `LyraChart.connectedCallback()` — instead of
     // unconditionally re-awaiting the already-cached `loadChartJs()` promise.
     async onBoxPlotPluginLoaded(boxMod) {
+        this.loading = false;
         if (!boxMod)
             return;
         this.chartJsModule = (await loadChartJs()) ?? undefined;
@@ -75,6 +83,10 @@ export class LyraBoxPlot extends LyraElement {
         this.chart = undefined;
     }
     updated(changed) {
+        if (this.loading)
+            this.setAttribute('aria-busy', 'true');
+        else
+            this.removeAttribute('aria-busy');
         // `--lyra-chart-height` is read by `:host`'s `block-size` in
         // `chart.styles.ts` (shared with `lyra-chart`). Custom properties only
         // cascade downward (host -> shadow tree), so this must be set on the
@@ -106,13 +118,34 @@ export class LyraBoxPlot extends LyraElement {
             },
         };
     }
+    // Mirrors `LyraChart.draw()`'s reuse-existing-instance-when-possible
+    // pattern: an update that doesn't need a new Chart.js instance (e.g. a
+    // bare `height` change, or new `boxes`/`labels` data) mutates the existing
+    // chart and does an incremental `.update('none')` instead of tearing down
+    // and rebuilding the whole canvas/instance on every reactive update. Unlike
+    // `LyraChart`, `LyraBoxPlot` has no raw `config` passthrough that could
+    // change the effective Chart.js type out from under `this.type`, so
+    // reusing whenever a chart already exists is always safe here.
     draw() {
         if (!this.chartJsModule || !this.canvasEl)
             return;
-        this.chart?.destroy();
-        this.chart = new this.chartJsModule.Chart(this.canvasEl, this.buildConfig());
+        const config = this.buildConfig();
+        if (this.chart) {
+            this.chart.data = config.data;
+            this.chart.options = config.options ?? {};
+            this.chart.update('none');
+            return;
+        }
+        this.chart = new this.chartJsModule.Chart(this.canvasEl, config);
     }
     render() {
+        if (this.loading) {
+            return html `
+        <div part="base">
+          <lyra-skeleton variant="rect"></lyra-skeleton>
+        </div>
+      `;
+        }
         const label = this.boxes.map((b) => b.label).join(', ') || 'Box plot';
         return html `
       <div part="base">
@@ -139,6 +172,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'begin-at-zero' })
 ], LyraBoxPlot.prototype, "beginAtZero", void 0);
+__decorate([
+    state()
+], LyraBoxPlot.prototype, "loading", void 0);
 __decorate([
     query('canvas')
 ], LyraBoxPlot.prototype, "canvasEl", void 0);

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

@@ -15,6 +15,10 @@ export const styles = css `
     inline-size: 100%;
     block-size: 100%;
   }
+  lyra-skeleton {
+    --lyra-skeleton-w: 100%;
+    --lyra-skeleton-h: 100%;
+  }
   canvas {
     inline-size: 100% !important;
     block-size: 100% !important;

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

@@ -1,5 +1,4 @@
 import { LyraChart } from './chart.js';
-import type { LyraChartType } from './chart.js';
 /**
  * `<lyra-bubble-chart>` — `<lyra-chart>` with `type` locked to `"bubble"`. Feed
  * points via `Series.points`, each needing an `x`/`y`/`r` (radius) triple —
@@ -10,7 +9,7 @@ import type { LyraChartType } from './chart.js';
  * @customElement lyra-bubble-chart
  */
 export declare class LyraBubbleChart extends LyraChart {
-    type: LyraChartType;
+    type: 'bubble';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -10,9 +10,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-bubble-chart
  */
 export class LyraBubbleChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'bubble';
-    }
 }
+// `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 */
+    },
+});
 defineElement('bubble-chart', LyraBubbleChart);

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

@@ -1,8 +1,25 @@
 import type * as ChartJsModule from 'chart.js';
+import type ZoomPlugin from 'chartjs-plugin-zoom';
 /**
- * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`)
- * once per page, registering only the tree-shaken subset this library uses.
- * Resolves to `null` (with a one-time warning) if chart.js isn't installed —
- * mirrors `<lyra-flag>`'s peer-dependency pattern.
+ * 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.
+ */
+export declare function loadChartAndZoom(importChart?: () => Promise<typeof ChartJsModule>, importZoom?: () => Promise<{
+    default: typeof ZoomPlugin;
+}>): 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.
  */
 export declare function loadChartJs(): Promise<typeof ChartJsModule | null>;

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

@@ -1,25 +1,52 @@
 let chartJs;
 let registered = false;
 /**
- * Lazily loads the optional peer dependency `chart.js` (+ `chartjs-plugin-zoom`)
- * once per page, registering only the tree-shaken subset this library uses.
- * Resolves to `null` (with a one-time warning) if chart.js isn't installed —
- * mirrors `<lyra-flag>`'s peer-dependency pattern.
+ * 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.
+ */
+export async function loadChartAndZoom(importChart = () => import('chart.js'), importZoom = () => import('chartjs-plugin-zoom')) {
+    let mod;
+    try {
+        mod = await importChart();
+    }
+    catch (err) {
+        console.warn('<lyra-chart> needs the optional peer dependency `chart.js` — install it with `pnpm add chart.js`:', err);
+        return null;
+    }
+    let zoomPlugin;
+    try {
+        zoomPlugin = (await importZoom()).default;
+    }
+    catch (err) {
+        console.warn('<lyra-chart> zoom support needs the optional peer dependency `chartjs-plugin-zoom` — ' +
+            'charts still render without it, but the `zoom` attribute has no effect until it is ' +
+            'installed with `pnpm add chartjs-plugin-zoom`:', err);
+    }
+    return { mod, zoomPlugin };
+}
+/**
+ * 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.
  */
 export function loadChartJs() {
     if (!chartJs) {
-        chartJs = Promise.all([import('chart.js'), import('chartjs-plugin-zoom')])
-            .then(([mod, zoomMod]) => {
+        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, zoomMod.default);
+                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;
             }
             return mod;
-        })
-            .catch(() => {
-            console.warn('<lyra-chart> needs the optional peer dependencies `chart.js` and ' +
-                '`chartjs-plugin-zoom` — install them with `pnpm add chart.js chartjs-plugin-zoom`.');
-            return null;
         });
     }
     return chartJs;

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

@@ -20,12 +20,12 @@ export interface Series {
     pointRadius?: number;
     type?: 'line' | 'bar';
 }
-export type LyraChartType = 'line' | 'bar' | 'scatter';
+export type LyraChartType = 'line' | 'bar' | 'scatter' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'bubble';
 /**
  * `<lyra-chart>` — the core Chart.js wrapper every other `lyra-*-chart` tag
  * subclasses. Requires the optional peer deps `chart.js` + `chartjs-plugin-zoom`.
  *
- * **API mirror note (Task 0):** the real `wa-chart` docs page
+ * **API mirror note:** the real `wa-chart` docs page
  * (https://webawesome.com/docs/components/chart/) documents a `config:
  * ChartJS['config']` property alongside its simplified attributes — "a
  * flexible wrapper around Chart.js" supporting *both* simplified attributes
@@ -73,11 +73,17 @@ export declare class LyraChart extends LyraElement {
     private chart?;
     private chartJsModule?;
     private builtType?;
-    private onThemeChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private seriesToDataset;
+    /**
+     * 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.
+     */
+    private buildScales;
     private buildConfig;
     private draw;
     /** Reset any active zoom/pan back to the original view. */

package/dist/components/chart/chart.js

@@ -23,12 +23,18 @@ import '../skeleton/skeleton.js';
 function isPlainObject(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
+// Keys that would let a JSON-sourced `config` (e.g. parsed from an API
+// 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 deepMerge(base, override) {
     if (!isPlainObject(base) || !isPlainObject(override)) {
         return (override === undefined ? base : override);
     }
     const result = { ...base };
     for (const key of Object.keys(override)) {
+        if (UNSAFE_KEYS.has(key))
+            continue;
         result[key] = deepMerge(base[key], override[key]);
     }
     return result;
@@ -37,7 +43,7 @@ function deepMerge(base, override) {
  * `<lyra-chart>` — the core Chart.js wrapper every other `lyra-*-chart` tag
  * subclasses. Requires the optional peer deps `chart.js` + `chartjs-plugin-zoom`.
  *
- * **API mirror note (Task 0):** the real `wa-chart` docs page
+ * **API mirror note:** the real `wa-chart` docs page
  * (https://webawesome.com/docs/components/chart/) documents a `config:
  * ChartJS['config']` property alongside its simplified attributes — "a
  * flexible wrapper around Chart.js" supporting *both* simplified attributes
@@ -73,12 +79,10 @@ export class LyraChart extends LyraElement {
         /** True until the lazy-loaded `chart.js` peer dependency has settled (success or failure). */
         this.loading = true;
         this.zoomed = false;
-        this.onThemeChange = () => this.draw();
     }
     static { this.styles = [LyraElement.styles, styles]; }
     connectedCallback() {
         super.connectedCallback();
-        window.addEventListener('lyra-theme', this.onThemeChange);
         void loadChartJs().then((mod) => {
             this.loading = false;
             if (!mod)
@@ -89,7 +93,6 @@ export class LyraChart extends LyraElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        window.removeEventListener('lyra-theme', this.onThemeChange);
         this.chart?.destroy();
         this.chart = undefined;
     }
@@ -127,8 +130,41 @@ export class LyraChart extends LyraElement {
             tooltip: s.noTooltip ? { enabled: false } : undefined,
         };
     }
-    buildConfig() {
+    /**
+     * 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.
+     */
+    buildScales() {
+        if (this.type === 'pie' || this.type === 'doughnut')
+            return {};
+        if (this.type === 'radar' || this.type === 'polarArea') {
+            return {
+                r: {
+                    beginAtZero: this.beginAtZero,
+                },
+            };
+        }
         const hasY2 = this.datasets.some((s) => s.axis === 'y2');
+        return {
+            x: {
+                type: this.type === 'scatter' ? 'linear' : 'category',
+                title: { display: !!this.xLabel, text: this.xLabel },
+            },
+            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 },
+                    },
+                }
+                : {}),
+        };
+    }
+    buildConfig() {
         const generated = {
             type: this.type,
             data: {
@@ -158,22 +194,7 @@ export class LyraChart extends LyraElement {
                         }
                         : undefined,
                 },
-                scales: {
-                    x: {
-                        type: this.type === 'scatter' ? 'linear' : 'category',
-                        title: { display: !!this.xLabel, text: this.xLabel },
-                    },
-                    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 },
-                            },
-                        }
-                        : {}),
-                },
+                scales: this.buildScales(),
             },
         };
         if (!this.config)

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

@@ -1,12 +1,11 @@
 import { LyraChart } from './chart.js';
-import type { LyraChartType } from './chart.js';
 /**
  * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
  *
  * @customElement lyra-doughnut-chart
  */
 export declare class LyraDoughnutChart extends LyraChart {
-    type: LyraChartType;
+    type: 'doughnut';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -6,9 +6,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-doughnut-chart
  */
 export class LyraDoughnutChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'doughnut';
-    }
 }
+// `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 */
+    },
+});
 defineElement('doughnut-chart', LyraDoughnutChart);

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

@@ -2,8 +2,18 @@
 export function binValues(values, binCount) {
     if (values.length === 0 || binCount <= 0)
         return [];
-    const lo = Math.min(...values);
-    const hi = Math.max(...values);
+    // 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) {
+        if (v < lo)
+            lo = v;
+        if (v > hi)
+            hi = v;
+    }
     const span = hi - lo || 1;
     const width = span / binCount;
     const buckets = Array.from({ length: binCount }, (_, i) => {

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

@@ -1,8 +1,8 @@
 import { LyraChart } from './chart.js';
 /**
  * `<lyra-histogram>` — bins `values` into `bins` equal-width buckets and
- * renders them as a bar chart. No Chart.js histogram controller exists in
- * any surveyed seed; this composes `binValues()` with the plain `bar` type.
+ * renders them as a bar chart. Chart.js has no built-in histogram
+ * controller; this composes `binValues()` with the plain `bar` type.
  *
  * @customElement lyra-histogram
  */

package/dist/components/chart/histogram.js

@@ -12,8 +12,8 @@ import { binValues } from './histogram-bin.js';
 import { styles } from './histogram.styles.js';
 /**
  * `<lyra-histogram>` — bins `values` into `bins` equal-width buckets and
- * renders them as a bar chart. No Chart.js histogram controller exists in
- * any surveyed seed; this composes `binValues()` with the plain `bar` type.
+ * renders them as a bar chart. Chart.js has no built-in histogram
+ * controller; this composes `binValues()` with the plain `bar` type.
  *
  * @customElement lyra-histogram
  */
@@ -67,4 +67,18 @@ Object.defineProperty(LyraHistogram.prototype, 'datasets', {
         /* derived from `values`/`bins`; direct writes are ignored */
     },
 });
+// `type` is locked to `'bar'` the same way — the field initializer above is
+// 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 */
+    },
+});
 defineElement('histogram', LyraHistogram);

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

@@ -6,9 +6,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-line-chart
  */
 export class LyraLineChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'line';
-    }
 }
+// `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 */
+    },
+});
 defineElement('line-chart', LyraLineChart);

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

@@ -1,5 +1,4 @@
 import { LyraChart } from './chart.js';
-import type { LyraChartType } from './chart.js';
 /**
  * `<lyra-pie-chart>` — `<lyra-chart>` with `type` locked to `"pie"`. Single-series:
  * one `Series` with `data: number[]` and `color: string[]` as the slice palette.
@@ -7,7 +6,7 @@ import type { LyraChartType } from './chart.js';
  * @customElement lyra-pie-chart
  */
 export declare class LyraPieChart extends LyraChart {
-    type: LyraChartType;
+    type: 'pie';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -7,9 +7,22 @@ import { defineElement } from '../../internal/prefix.js';
  * @customElement lyra-pie-chart
  */
 export class LyraPieChart extends LyraChart {
-    constructor() {
-        super(...arguments);
-        this.type = 'pie';
-    }
 }
+// `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(LyraPieChart.prototype, 'type', {
+    configurable: true,
+    enumerable: true,
+    get() {
+        return 'pie';
+    },
+    set(_v) {
+        /* locked to 'pie'; direct writes are ignored */
+    },
+});
 defineElement('pie-chart', LyraPieChart);

package/dist/components/chart/polar-area-chart.d.ts

@@ -1,12 +1,11 @@
 import { LyraChart } from './chart.js';
-import type { LyraChartType } from './chart.js';
 /**
  * `<lyra-polar-area-chart>` — `<lyra-chart>` with `type` locked to `"polarArea"`.
  *
  * @customElement lyra-polar-area-chart
  */
 export declare class LyraPolarAreaChart extends LyraChart {
-    type: LyraChartType;
+    type: 'polarArea';
 }
 declare global {
     interface HTMLElementTagNameMap {