@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-plot.class.js","sourceRoot":"","sources":["../../../src/components/chart/box-plot.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,+BAA+B,CAAC;AAevC,qEAAqE;AACrE,yEAAyE;AACzE,4EAA4E;AAC5E,6EAA6E;AAC7E,0EAA0E;AAC1E,mBAAmB;AACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC;AACtC,MAAM,mBAAmB,GAAG,SAAS,CAAC;AACtC,MAAM,qBAAqB,GAAG,SAAS,CAAC;AACxC,MAAM,mBAAmB,GAAG,MAAM,CAAC;AACnC,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAexC,IAAI,aAA0D,CAAC;AAE/D;;;;GAIG;AACH,SAAS,iBAAiB;IACxB,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,MAAM,CAAC,gCAAgC,CAAC,CAAC,CAAC;aACnF,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,EAAE;YAC3B,IAAI,CAAC,QAAQ;gBAAE,OAAO,IAAI,CAAC;YAC3B,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;YACxE,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,OAAO,CAAC,IAAI,CACV,sFAAsF;gBACpF,8DAA8D,CACjE,CAAC;YACF,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACP,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QAGkC,WAAM,GAAa,EAAE,CAAC;QACtB,UAAK,GAAoB,EAAE,CAAC;QAC/B,WAAM,GAAG,KAAK,CAAC;QAChC,WAAM,GAAG,OAAO,CAAC;QACO,WAAM,GAAG,EAAE,CAAC;QACS,gBAAW,GAAG,IAAI,CAAC;QAC5E,2EAA2E;QAC9B,oBAAe,GAAG,EAAE,CAAC;QAClE,6FAA6F;QAC1C,0BAAqB,GAAG,EAAE,CAAC;QAC9E,6FAA6F;QAClC,kBAAa,GAAG,KAAK,CAAC;QAEjF;;;;WAIG;QACc,YAAO,GAAG,IAAI,CAAC;QAEf,YAAO,GAAG,IAAI,CAAC;QAMxB,kBAAa,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;IA8MzD,CAAC;aA1OQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,AAAvC,CAAwC;IA8BrD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,KAAK,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9E,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE,CAAC;YAChD,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;gBAChC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,cAAc,IAAI,IAAI,CAAC;gBAClD,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU;oBAAE,IAAI,CAAC,IAAI,EAAE,CAAC;YAC/C,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,uEAAuE;IACvE,sEAAsE;IACtE,0EAA0E;IAC1E,uEAAuE;IACvE,yEAAyE;IACzE,sEAAsE;IACtE,0EAA0E;IAC1E,EAAE;IACF,0EAA0E;IAC1E,2EAA2E;IAC3E,uEAAuE;IACvE,iDAAiD;IACzC,KAAK,CAAC,qBAAqB,CACjC,MAA8B;QAE9B,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,QAAQ,GAAG,MAAM,WAAW,EAAE,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,aAAa,GAAG,QAAQ,IAAI,SAAS,CAAC;QAC3C,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAES,OAAO,CAAC,OAAuB;QACvC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QAEvC,6DAA6D;QAC7D,uEAAuE;QACvE,qEAAqE;QACrE,wEAAwE;QACxE,QAAQ;QACR,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7D,CAAC;QACD,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,CAAC,wEAAwE;QACnG,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAC/G,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAClB,CAAC;QACF,IAAI,CAAC,cAAc;YAAE,OAAO;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;;;;;;OAOG;IACK,WAAW;QACjB,MAAM,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO;YACL,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,IAAI,EAAE,IAAI,mBAAmB;YAClF,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,IAAI,EAAE,IAAI,mBAAmB;YAClF,MAAM,EAAE,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC,IAAI,EAAE,IAAI,qBAAqB;YACxF,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,IAAI,EAAE,IAAI,mBAAmB;YACvF,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC,IAAI,EAAE,IAAI,qBAAqB;SAC9F,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACjC,OAAO;YACL,gFAAgF;YAChF,IAAI,EAAE,SAAkB;YACxB,IAAI,EAAE;gBACJ,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;oBAC/B,KAAK,EAAE,CAAC,CAAC,KAAK;oBACd,IAAI,EAAE,CAAC,CAAC,IAAI;oBACZ,eAAe,EAAE,CAAC,CAAC,KAAK;oBACxB,WAAW,EAAE,CAAC,CAAC,KAAK;iBACrB,CAAC,CAAC;aACJ;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,KAAK;gBAC1B,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE;gBAC9E,MAAM,EAAE;oBACN,CAAC,EAAE;wBACD,WAAW,EAAE,IAAI,CAAC,WAAW;wBAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE;wBACpD,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE;wBAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE;qBAC5B;iBACF;aACO;SACX,CAAC;IACJ,CAAC;IAED,qEAAqE;IACrE,uEAAuE;IACvE,2EAA2E;IAC3E,0EAA0E;IAC1E,4EAA4E;IAC5E,wEAAwE;IACxE,oEAAoE;IACpE,+DAA+D;IACvD,IAAI;QACV,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAClC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;YAC1C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC1B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACnE,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,qBAAqB;YAAE,OAAO,IAAI,CAAC,qBAAqB,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAC1C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;gBAAE,OAAO,GAAG,MAAM,CAAC,KAAK,WAAW,CAAC;YAC3D,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACzD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAE,CAAC;YAC1B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC;YAC1C,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC;YACjF,OAAO,GAAG,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,gCAAgC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,KAAK,KAAK,eAAe,CAAC;QACxJ,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,GAAG,CAAC;IACxF,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;qBACM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mBACrC,IAAI,CAAC,eAAe,IAAI,eAAe;;;;;;;;;;;;;YAa9C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CACb,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,SAAS,KAAK,GAAG,CAAC,EAAE;wBACtD,MAAM,CAAC,KAAK;wBACZ,KAAK,CAAC,GAAG;wBACT,KAAK,CAAC,EAAE;wBACR,KAAK,CAAC,MAAM;wBACZ,KAAK,CAAC,EAAE;wBACR,KAAK,CAAC,GAAG;;eAElB,CACF,CACF;;;KAGN,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA;;;;OAIV,CAAC;QACJ,CAAC;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC;QAC9F,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9C,OAAO,IAAI,CAAA;;sDAEuC,KAAK,qBAAqB,IAAI,CAAC,aAAa;mCAC/D,IAAI,CAAC,aAAa,oBAAoB,WAAW;;;YAGxE,IAAI,CAAC,eAAe,EAAE;;;KAG7B,CAAC;IACJ,CAAC;CACF;AAxOiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAAuB;AACtB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAA6B;AAC/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAgB;AAChC;IAAX,QAAQ,EAAE;2CAAkB;AACO;IAAnC,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;2CAAa;AACS;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDAAoB;AAE/B;IAA5C,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDAAsB;AAEf;IAAlD,QAAQ,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;0DAA4B;AAEnB;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDAAuB;AAOhE;IAAhB,KAAK,EAAE;4CAAwB;AAEf;IAAhB,KAAK,EAAE;4CAAwB;AAGP;IAAxB,KAAK,CAAC,QAAQ,CAAC;6CAAsC"}

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

@@ -1,53 +1,3 @@
-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;
-    median: number;
-    q3: number;
-    max: number;
-}
-export interface BoxPlotSeries {
-    label: string;
-    data: BoxPlotPoint[];
-    color?: string;
-}
-/**
- * `<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 — useful for summarizing distributions.
- *
- * @customElement lyra-box-plot
- * @csspart base, canvas
- */
-export declare class LyraBoxPlot extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    labels: string[];
-    boxes: BoxPlotSeries[];
-    legend: boolean;
-    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?;
-    connectedCallback(): void;
-    private onBoxPlotPluginLoaded;
-    disconnectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    private buildConfig;
-    private draw;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-box-plot': LyraBoxPlot;
-    }
-}
+export * from './box-plot.class.js';
+import "../skeleton/skeleton.js";
+//# sourceMappingURL=box-plot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-plot.d.ts","sourceRoot":"","sources":["../../../src/components/chart/box-plot.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AAGpC,OAAO,yBAAyB,CAAC"}

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

@@ -1,191 +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 } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './box-plot.class.js';
+import { LyraBoxPlot } from './box-plot.class.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
- * only when a `<lyra-box-plot>` connects — kept separate from the base
- * `chart-loader.ts` so importing `lyra-chart.js` alone never pulls this in.
- */
-function loadBoxPlotPlugin() {
-    if (!boxPlotPlugin) {
-        boxPlotPlugin = Promise.all([loadChartJs(), import('@sgratzl/chartjs-chart-boxplot')])
-            .then(([chartMod, boxMod]) => {
-            if (!chartMod)
-                return null;
-            chartMod.Chart.register(boxMod.BoxPlotController, boxMod.BoxAndWiskers);
-            return boxMod;
-        })
-            .catch(() => {
-            console.warn('<lyra-box-plot> needs the optional peer dependency `@sgratzl/chartjs-chart-boxplot` ' +
-                '— install it with `pnpm add @sgratzl/chartjs-chart-boxplot`.');
-            return null;
-        });
-    }
-    return boxPlotPlugin;
-}
-/**
- * `<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 — useful for summarizing distributions.
- *
- * @customElement lyra-box-plot
- * @csspart base, canvas
- */
-export class LyraBoxPlot extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.labels = [];
-        this.boxes = [];
-        this.legend = false;
-        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() {
-        super.connectedCallback();
-        void loadBoxPlotPlugin().then((boxMod) => this.onBoxPlotPluginLoaded(boxMod));
-    }
-    // Split out from `connectedCallback()` so the partial-peer-dependency-
-    // failure path (chart.js loads fine, `@sgratzl/chartjs-chart-boxplot`
-    // doesn't) is directly testable: `loadBoxPlotPlugin()` resolves to `null`
-    // without ever registering `BoxPlotController`/`BoxAndWiskers` in that
-    // case, so this must gate on its resolved value — mirroring the correct,
-    // established pattern in `LyraChart.connectedCallback()` — instead of
-    // unconditionally re-awaiting the already-cached `loadChartJs()` promise.
-    //
-    // Also guards against a disconnect while either lazy peer import is still
-    // in flight: `this.isConnected` is re-checked after each `await` gap, so a
-    // `<lyra-box-plot>` removed before the load settles never constructs a
-    // `Chart` bound to a (possibly detached) canvas.
-    async onBoxPlotPluginLoaded(boxMod) {
-        if (!this.isConnected)
-            return;
-        this.loading = false;
-        if (!boxMod)
-            return;
-        const chartMod = await loadChartJs();
-        if (!this.isConnected)
-            return;
-        this.chartJsModule = chartMod ?? undefined;
-        this.draw();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.chart?.destroy();
-        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
-        // 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);
-        }
-        this.draw();
-    }
-    buildConfig() {
-        return {
-            // boxplot isn't in chart.js's static ChartType union — same cast the seed uses.
-            type: 'boxplot',
-            data: {
-                labels: this.labels,
-                datasets: this.boxes.map((s) => ({
-                    label: s.label,
-                    data: s.data,
-                    backgroundColor: s.color,
-                    borderColor: s.color,
-                })),
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: { legend: { display: this.legend } },
-                scales: { y: { beginAtZero: this.beginAtZero, title: { display: !!this.yLabel, text: this.yLabel } } },
-            },
-        };
-    }
-    // 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;
-        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">
-        <canvas part="canvas" role="img" aria-label=${label}></canvas>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraBoxPlot.prototype, "labels", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraBoxPlot.prototype, "boxes", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraBoxPlot.prototype, "legend", void 0);
-__decorate([
-    property()
-], LyraBoxPlot.prototype, "height", void 0);
-__decorate([
-    property({ attribute: 'y-label' })
-], LyraBoxPlot.prototype, "yLabel", void 0);
-__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);
+import "../skeleton/skeleton.js";
 defineElement('box-plot', LyraBoxPlot);
+//# sourceMappingURL=box-plot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-plot.js","sourceRoot":"","sources":["../../../src/components/chart/box-plot.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC"}

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

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

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

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

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

@@ -8,7 +8,20 @@ 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));
+    /* Same theme tokens as chart.styles.ts's :host — Chart.js renders to
+       canvas, not the DOM, so it can't consume CSS var() directly;
+       box-plot.ts's themeColors() resolves these once per draw() via
+       getComputedStyle, mirroring chart.ts. Each is its own token (rather
+       than reusing the semantic ones directly) so a host can retheme just
+       the chart's grid/ticks/legend/tooltip without affecting unrelated
+       text/border/surface colors elsewhere in the component, while still
+       defaulting to those semantic tokens. */
+    --lyra-chart-grid-color: var(--lyra-color-border);
+    --lyra-chart-tick-color: var(--lyra-color-text-quiet);
+    --lyra-chart-legend-color: var(--lyra-color-text);
+    --lyra-chart-tooltip-bg: var(--lyra-color-surface);
+    --lyra-chart-tooltip-text: var(--lyra-color-text);
   }
   [part='base'] {
     position: relative;
@@ -24,3 +37,4 @@ export const styles = css `
     block-size: 100% !important;
   }
 `;
+//# sourceMappingURL=box-plot.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-plot.styles.js","sourceRoot":"","sources":["../../../src/components/chart/box-plot.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,kEAAkE;AAClE,2EAA2E;AAC3E,wEAAwE;AACxE,mEAAmE;AACnE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC"}

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

@@ -0,0 +1,19 @@
+import { LyraChart } from './chart.class.js';
+/**
+ * `<lyra-bubble-chart>` — `<lyra-chart>` with `type` locked to `"bubble"`. Feed
+ * points via `Series.points`, each needing an `x`/`y`/`r` (radius) triple —
+ * cast the array through `as unknown as Series['points']` (or a local
+ * `BubblePoint` type) when constructing it, since `Series.points` itself is
+ * typed as `{ x; y; label? }[]` with no `r` field.
+ *
+ * @customElement lyra-bubble-chart
+ */
+export declare class LyraBubbleChart extends LyraChart {
+    type: 'bubble';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-bubble-chart': LyraBubbleChart;
+    }
+}
+//# sourceMappingURL=bubble-chart.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-chart.class.d.ts","sourceRoot":"","sources":["../../../src/components/chart/bubble-chart.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,kBAAkB,CAAC;AAE5D;;;;;;;;GAQG;AACH,qBAAa,eAAgB,SAAQ,SAAS;IACpC,IAAI,EAAE,QAAQ,CAAC;CACxB;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}