@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/chart/chart.js

@@ -1,541 +1,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './chart.class.js';
+import { LyraChart } from './chart.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { loadChartJs, loadChartJsWithZoom } from './chart-loader.js';
-import { styles } from './chart.styles.js';
-import '../skeleton/skeleton.js';
-/**
- * Recursively merges `override` onto `base`, matching JSON-merge semantics:
- * plain objects are merged key-by-key at every depth; arrays, functions, and
- * any other value type are replaced wholesale by `override`'s value. Used to
- * deep-merge the raw `config` passthrough over the `Series`-generated config
- * in `buildConfig()` so a nested key (e.g. `config.options.scales.y`) only
- * overrides the keys it sets, rather than clobbering the whole generated
- * sibling object (e.g. the rest of the generated `y` axis config).
- */
-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 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);
-    }
-    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;
-}
-/**
- * `<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:** 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
- * and full Chart.js configuration passthrough, not a `data`/`options` prop
- * pair. `lyra-chart` mirrors that dual surface: the `Series`-based
- * `datasets`/`labels`/`type`/`legend`/`xLabel`/`yLabel`/`zoom` attributes
- * below are the simplified surface (compatible with WA's `type`, `xLabel`,
- * `yLabel`, `withoutLegend`-equivalent `legend`, etc.), and the additional
- * `config` property is the raw-passthrough escape hatch — a
- * `Partial<ChartConfiguration>` deep-merged over the generated config in
- * `buildConfig()`, mirroring WA's `config` property without discarding the
- * `Series` shape the rest of this component family (subclasses, box-plot,
- * histogram) is built on.
- *
- * @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 {
-    constructor() {
-        super(...arguments);
-        this.type = 'line';
-        this.labels = [];
-        this.datasets = [];
-        this.legend = false;
-        this.area = false;
-        this.zoom = false;
-        this.height = '280px';
-        this.xLabel = '';
-        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() {
-        super.connectedCallback();
-        const load = this.zoom ? loadChartJsWithZoom() : loadChartJs();
-        void load.then((mod) => {
-            if (!this.isConnected)
-                return;
-            this.loading = false;
-            if (!mod)
-                return;
-            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) {
-        // 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
-            this.removeAttribute('aria-busy');
-        // `--lyra-chart-height` is read by `:host`'s `block-size` in
-        // `chart.styles.ts`. Custom properties only cascade downward (host ->
-        // shadow tree), never upward from a shadow-tree descendant back to the
-        // host, so this must be set on the host element itself, not on the
-        // `[part="base"]` div inside the shadow root.
-        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;
-        // `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 onlyZoomChanged = changed.size === 1 && changed.has('zoomed');
-        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;
-        return {
-            label: s.label,
-            data: s.points ?? s.data ?? [],
-            // 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,
-            backgroundColor: colors,
-            borderColor: colors?.[0],
-            pointBackgroundColor: s.pointColors,
-            pointRadius: s.pointRadius,
-            yAxisID: s.axis === 'y2' ? 'y2' : 'y',
-        };
-    }
-    /**
-     * 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 — 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(effectiveType, theme) {
-        if (effectiveType === 'pie' || effectiveType === 'doughnut')
-            return {};
-        if (effectiveType === 'radar' || effectiveType === '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 && (effectiveType === 'bar' || effectiveType === 'line');
-        return {
-            x: {
-                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 },
-                stacked,
-            },
-            y: {
-                beginAtZero: this.beginAtZero,
-                title: { display: !!this.yLabel, text: this.yLabel, color: theme.tick },
-                ticks: { color: theme.tick },
-                grid: { color: theme.grid },
-                stacked,
-            },
-            ...(hasY2
-                ? {
-                    y2: {
-                        position: 'right',
-                        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();
-        // 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.config?.type ??
-            this.type;
-        const generated = {
-            type: effectiveType,
-            data: {
-                labels: this.labels,
-                datasets: this.datasets.map((s) => this.seriesToDataset(s)),
-            },
-            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: effectiveType === 'scatter' ? 'nearest' : 'index' },
-                onClick: (event, _elements, chart) => this.handlePointClick(event, chart),
-                plugins: {
-                    legend: { display: this.legend, labels: { color: theme.legend } },
-                    tooltip: {
-                        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
-                        ? {
-                            pan: { enabled: false },
-                            zoom: {
-                                wheel: { enabled: true },
-                                drag: { enabled: true },
-                                pinch: { enabled: true },
-                                mode: 'x',
-                                onZoomComplete: () => {
-                                    if (this.suppressZoomComplete)
-                                        return;
-                                    this.zoomed = true;
-                                    this.emit('lyra-zoom', { zoomed: true });
-                                },
-                            },
-                            limits: { x: { min: 'original', max: 'original' } },
-                        }
-                        : undefined,
-                },
-                scales: this.buildScales(effectiveType, theme),
-            },
-        };
-        if (!this.config)
-            return generated;
-        // Raw Chart.js passthrough (mirrors `wa-chart`'s `config` property) —
-        // deep-merge `config` over the `Series`-derived config at every nesting
-        // level (see `deepMerge` above), letting consumers override or extend a
-        // single nested key (e.g. `config.options.scales.y.min`) without
-        // clobbering the rest of the generated sibling object.
-        return deepMerge(generated, this.config);
-    }
-    draw() {
-        if (!this.chartJsModule || !this.canvasEl)
-            return;
-        const config = this.buildConfig();
-        const effectiveType = config.type;
-        if (this.chart && this.builtType === effectiveType) {
-            this.chart.data = config.data;
-            this.chart.options = config.options ?? {};
-            this.chart.update('none');
-            return;
-        }
-        this.chart?.destroy();
-        this.chart = new this.chartJsModule.Chart(this.canvasEl, config);
-        this.builtType = effectiveType;
-    }
-    /** Reset any active zoom/pan back to the original view. */
-    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 `
-        <div part="base">
-          <lyra-skeleton variant="rect"></lyra-skeleton>
-        </div>
-      `;
-        }
-        const label = this.datasets.map((d) => d.label).join(', ') || 'Chart';
-        return html `
-      <div part="base">
-        <canvas part="canvas" role="img" aria-label=${label}></canvas>
-        ${this.zoom && this.zoomed
-            ? html `<button part="reset-zoom-button" type="button" @click=${() => this.resetZoom()}>
-              Reset zoom
-            </button>`
-            : nothing}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraChart.prototype, "type", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraChart.prototype, "labels", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraChart.prototype, "datasets", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraChart.prototype, "legend", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraChart.prototype, "area", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraChart.prototype, "zoom", void 0);
-__decorate([
-    property()
-], LyraChart.prototype, "height", void 0);
-__decorate([
-    property({ attribute: 'x-label' })
-], LyraChart.prototype, "xLabel", void 0);
-__decorate([
-    property({ attribute: 'y-label' })
-], LyraChart.prototype, "yLabel", void 0);
-__decorate([
-    property({ attribute: 'y2-label' })
-], LyraChart.prototype, "y2Label", void 0);
-__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);
-__decorate([
-    state()
-], LyraChart.prototype, "loading", void 0);
-__decorate([
-    state()
-], LyraChart.prototype, "zoomed", void 0);
-__decorate([
-    state()
-], LyraChart.prototype, "visible", void 0);
-__decorate([
-    query('canvas')
-], LyraChart.prototype, "canvasEl", void 0);
+import "../skeleton/skeleton.js";
 defineElement('chart', LyraChart);
+//# sourceMappingURL=chart.js.map

package/dist/components/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sourceRoot":"","sources":["../../../src/components/chart/chart.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=chart.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.styles.d.ts","sourceRoot":"","sources":["../../../src/components/chart/chart.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ClB,CAAC"}

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

@@ -3,7 +3,7 @@ export const styles = css `
   :host {
     display: block;
     position: relative;
-    block-size: var(--lyra-chart-height, 280px);
+    block-size: var(--lyra-chart-height, var(--lyra-size-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.
@@ -34,9 +34,9 @@ export const styles = css `
     position: absolute;
     inset-block-start: var(--lyra-space-xs);
     inset-inline-end: var(--lyra-space-xs);
-    font-size: 0.75rem;
-    padding: 0.15rem 0.5rem;
-    border: 1px solid var(--lyra-color-border);
+    font-size: var(--lyra-font-size-xs);
+    padding: var(--lyra-size-0-15rem) var(--lyra-size-0-5rem);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
@@ -47,3 +47,4 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
 `;
+//# sourceMappingURL=chart.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.styles.js","sourceRoot":"","sources":["../../../src/components/chart/chart.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,CAAC"}

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

@@ -0,0 +1,15 @@
+import { LyraChart } from './chart.class.js';
+/**
+ * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
+ *
+ * @customElement lyra-doughnut-chart
+ */
+export declare class LyraDoughnutChart extends LyraChart {
+    type: 'doughnut';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-doughnut-chart': LyraDoughnutChart;
+    }
+}
+//# sourceMappingURL=doughnut-chart.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"doughnut-chart.class.d.ts","sourceRoot":"","sources":["../../../src/components/chart/doughnut-chart.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,kBAAkB,CAAC;AAE5D;;;;GAIG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;IACtC,IAAI,EAAE,UAAU,CAAC;CAC1B;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

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

@@ -0,0 +1,10 @@
+import { LyraChart, lockChartType } from './chart.class.js';
+/**
+ * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
+ *
+ * @customElement lyra-doughnut-chart
+ */
+export class LyraDoughnutChart extends LyraChart {
+}
+lockChartType(LyraDoughnutChart, 'doughnut');
+//# sourceMappingURL=doughnut-chart.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"doughnut-chart.class.js","sourceRoot":"","sources":["../../../src/components/chart/doughnut-chart.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;;;GAIG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;CAE/C;AAED,aAAa,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC"}

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

@@ -1,14 +1,3 @@
-import { LyraChart } from './chart.js';
-/**
- * `<lyra-doughnut-chart>` — `<lyra-chart>` with `type` locked to `"doughnut"`.
- *
- * @customElement lyra-doughnut-chart
- */
-export declare class LyraDoughnutChart extends LyraChart {
-    type: 'doughnut';
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-doughnut-chart': LyraDoughnutChart;
-    }
-}
+export * from './doughnut-chart.class.js';
+import "./chart.js";
+//# sourceMappingURL=doughnut-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"doughnut-chart.d.ts","sourceRoot":"","sources":["../../../src/components/chart/doughnut-chart.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAG1C,OAAO,YAAY,CAAC"}