@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -1,542 +1,5 @@
-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, svg, nothing } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './lite-chart.class.js';
+import { LyraLiteChart } from './lite-chart.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './lite-chart.styles.js';
-// Colorblind-considered categorical palette, used round-robin when a Series
-// doesn't set its own `color` — same role as Chart.js's default dataset
-// colors for lyra-chart, just a fixed JS array instead of a peer dep's.
-const DEFAULT_PALETTE = [
-    '#4c6ef5',
-    '#f76707',
-    '#2f9e44',
-    '#e64980',
-    '#ae3ec9',
-    '#1098ad',
-    '#f59f00',
-    '#495057',
-];
-const PAD_LEFT = 36;
-const PAD_RIGHT = 8;
-const PAD_TOP = 8;
-const PAD_BOTTOM = 20;
-const AXIS_TITLE_SPACE = 14;
-const TICK_COUNT = 4;
-const BAR_GROUP_GAP = 0.2; // fraction of a category slot left as gap between categories
-const BAR_GAP = 0.08; // fraction of a category slot left as gap between grouped bars
-/**
- * Picks a "nice" (1/2/5 × 10^n) step size for an axis spanning `span` over
- * roughly `count` ticks — the standard Heckbert nice-numbers approach, so
- * axis labels read as 0/25/50/75/100 rather than 0/23.4/46.8/70.2/93.6.
- */
-function niceStep(span, count) {
-    if (span <= 0)
-        return 1;
-    const rough = span / Math.max(1, count);
-    const magnitude = 10 ** Math.floor(Math.log10(rough));
-    const residual = rough / magnitude;
-    const niceResidual = residual < 1.5 ? 1 : residual < 3 ? 2 : residual < 7 ? 5 : 10;
-    return niceResidual * magnitude;
-}
-/** Nice-rounded [lo, hi, ticks[]] for an axis covering `dataLo..dataHi`. */
-function niceDomain(dataLo, dataHi, beginAtZero, count) {
-    let lo = beginAtZero ? Math.min(0, dataLo) : dataLo;
-    let hi = beginAtZero ? Math.max(0, dataHi) : dataHi;
-    if (lo === hi) {
-        lo -= 1;
-        hi += 1;
-    }
-    const step = niceStep(hi - lo, count);
-    lo = Math.floor(lo / step) * step;
-    hi = Math.ceil(hi / step) * step;
-    const ticks = [];
-    for (let v = lo; v <= hi + step / 2; v += step)
-        ticks.push(Math.round(v / step) * step);
-    return { lo, hi, ticks };
-}
-/**
- * `<lyra-lite-chart>` — a dependency-free bar/line chart, plain SVG/DOM
- * rendering with zero peer dependencies (unlike `lyra-chart`, which wraps
- * `chart.js`). For a project whose architecture forbids a charting
- * dependency outright, this covers the common bar/line case: grouped or
- * stacked bars, multi-series lines, per-point click, and hover tooltips
- * (native SVG `<title>`, no positioning JS needed) — not a full `lyra-chart`
- * replacement (no zoom/pan, no pie/doughnut/radar/scatter/bubble types, no
- * horizontal/dual-y-axis, no raw-config passthrough).
- *
- * Because this renders real DOM (not canvas), it reuses `lyra-chart`'s
- * `--lyra-chart-*` theme tokens directly via CSS `var()` — no
- * `getComputedStyle()`-based re-theming step is needed the way `chart.ts`
- * needs one for its canvas.
- *
- * By default (`layout="fit"`) the plot always squeezes to the measured host
- * width. Three independent, opt-in escape hatches for dense/aligned data:
- * `layout="scroll"` (+ `barWidth`) gives every bar a fixed pixel width and
- * lets the plot overflow the host horizontally (scrollable) instead of
- * squeezing; `maxLabels` decimates which x-axis text labels render (bars
- * always still render) once there are more categories than that; and
- * `barX` lets a consumer hand in its own per-category x-coordinate function
- * — e.g. to pixel-align this chart's bars with a sibling `lyra-heatmap`'s
- * calendar columns — overriding the internal slot math for both bars and
- * their labels. All three are additive and no-ops when left unset.
- *
- * @customElement lyra-lite-chart
- * @event lyra-point-click - Fired when a bar/point is activated (click, or
- *   Enter/Space while focused). `detail: { datasetIndex: number, index:
- *   number, label: string | undefined, value: number | null }` — same shape
- *   as `lyra-chart`'s `lyra-point-click`.
- * @csspart base - The host's flex layout wrapper.
- * @csspart grid-line - Each horizontal gridline.
- * @csspart axis-label - Each axis tick label.
- * @csspart axis-title - The x/y axis title text, when set.
- * @csspart bar - Each bar rect (type="bar").
- * @csspart line - Each series' stroked line path (type="line").
- * @csspart point - Each series' per-point hit target (type="line").
- * @csspart legend - The legend row, when `legend` is set.
- * @csspart legend-item - Each legend entry.
- * @csspart legend-swatch - Each legend entry's color swatch.
- */
-export class LyraLiteChart extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.type = 'bar';
-        this.labels = [];
-        this.datasets = [];
-        this.legend = false;
-        this.height = '280px';
-        this.xLabel = '';
-        this.yLabel = '';
-        this.beginAtZero = true;
-        /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
-        this.stacked = false;
-        /** `'fit'` (default) squeezes the plot into the measured host width, unchanged from before this
-         *  property existed. `'scroll'` gives every bar a fixed `barWidth` instead, letting the plot's
-         *  content width exceed the host's — the host becomes horizontally scrollable
-         *  (`overflow-x: auto`) so every bar stays exactly `barWidth` wide regardless of category count.
-         *  Reflects to the `layout` attribute (e.g. for `:host([layout='scroll'])` host styling). */
-        this.layout = 'fit';
-        /** Fixed per-category bar width in px, used only when `layout="scroll"`. Ignored (as before this
-         *  property existed) in `layout="fit"`, the default. */
-        this.barWidth = 32;
-        this.plotWidth = 0;
-        this.plotHeight = 0;
-        this.visible = true;
-        this.lastSignature = '';
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const box = entries[0]?.contentBoxSize?.[0];
-            if (box) {
-                this.plotWidth = box.inlineSize;
-                this.plotHeight = box.blockSize;
-            }
-            else {
-                const rect = this.svgEl?.getBoundingClientRect();
-                if (rect) {
-                    this.plotWidth = rect.width;
-                    this.plotHeight = rect.height;
-                }
-            }
-        });
-        if (typeof IntersectionObserver !== 'undefined') {
-            this.intersectionObserver = new IntersectionObserver((entries) => {
-                this.visible = entries[0]?.isIntersecting ?? true;
-            });
-            this.intersectionObserver.observe(this);
-        }
-        // A reconnect re-creates the observer above but the `<svg>` render root
-        // content survives across disconnect/reconnect (Lit doesn't tear down the
-        // shadow root) — re-observe it here (firstUpdated() only ever runs once,
-        // on the very first render, so it can't be relied on for a reconnect).
-        if (this.svgEl)
-            this.resizeObserver.observe(this.svgEl);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.resizeObserver?.disconnect();
-        this.intersectionObserver?.disconnect();
-    }
-    // Kept (not deleted, despite the "delete it" alternative the fix brief
-    // offered): connectedCallback() fires *before* Lit's first render, so on
-    // the very first mount `this.svgEl` (a `@query('svg')`) is still
-    // undefined there and its guarded `observe()` call is a no-op — verified
-    // empirically: deleting firstUpdated() here hung every existing test that
-    // waits for the ResizeObserver's initial measurement. firstUpdated() runs
-    // once, after that first render, and is what actually arms the observer
-    // for the initial mount; connectedCallback()'s own observe() call (added
-    // above) only ever succeeds on a *reconnect*, when the shadow DOM (and
-    // svgEl) already exists from before the disconnect. Together the two
-    // cover first-mount and reconnect without ever double-observing the same
-    // element from the same callback path.
-    firstUpdated() {
-        if (this.svgEl)
-            this.resizeObserver?.observe(this.svgEl);
-    }
-    updated(changed) {
-        if (changed.has('height')) {
-            this.style.setProperty('--lyra-chart-height', this.height);
-        }
-    }
-    colorFor(index, series) {
-        return series.color ?? DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
-    }
-    domain() {
-        let lo = Infinity;
-        let hi = -Infinity;
-        if (this.type === 'bar' && this.stacked) {
-            // Stacked bars: each category's extent is the sum of its (signed)
-            // positive/negative segments, not the max single value.
-            for (let i = 0; i < this.labels.length; i++) {
-                let pos = 0;
-                let neg = 0;
-                for (const s of this.datasets) {
-                    const v = s.data[i];
-                    if (v == null)
-                        continue;
-                    if (v >= 0)
-                        pos += v;
-                    else
-                        neg += v;
-                }
-                lo = Math.min(lo, neg);
-                hi = Math.max(hi, pos);
-            }
-        }
-        else {
-            for (const s of this.datasets) {
-                for (const v of s.data) {
-                    if (v == null)
-                        continue;
-                    lo = Math.min(lo, v);
-                    hi = Math.max(hi, v);
-                }
-            }
-        }
-        if (!Number.isFinite(lo) || !Number.isFinite(hi)) {
-            lo = 0;
-            hi = 1;
-        }
-        return niceDomain(lo, hi, this.beginAtZero, TICK_COUNT);
-    }
-    computeSignature() {
-        return JSON.stringify([
-            this.type,
-            this.labels,
-            this.datasets,
-            this.legend,
-            this.xLabel,
-            this.yLabel,
-            this.beginAtZero,
-            this.stacked,
-            this.plotWidth,
-            this.plotHeight,
-            this.layout,
-            this.barWidth,
-            this.maxLabels,
-            // `tickFormat`/`barX` are functions -- JSON.stringify() silently drops
-            // function-valued entries, so (matching tickFormat's existing,
-            // pre-this-change exclusion) they can't be included here anyway; a
-            // consumer swapping one in/out post-mount should also change some
-            // other signature input, same pre-existing caveat as tickFormat.
-        ]);
-    }
-    emitPoint(datasetIndex, index) {
-        const label = this.labels[index];
-        const value = this.datasets[datasetIndex]?.data[index] ?? null;
-        this.emit('lyra-point-click', { datasetIndex, index, label, value });
-    }
-    onPointKeyDown(e, datasetIndex, index) {
-        if (e.key !== 'Enter' && e.key !== ' ')
-            return;
-        e.preventDefault();
-        this.emitPoint(datasetIndex, index);
-    }
-    renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi) {
-        const span = hi - lo || 1;
-        return ticks.map((t) => {
-            const y = plotY + plotH - ((t - lo) / span) * plotH;
-            return svg `
-        <line part="grid-line" x1=${plotX} y1=${y} x2=${plotX + plotW} y2=${y}></line>
-        <text part="axis-label" x=${plotX - 6} y=${y} text-anchor="end" dominant-baseline="middle">${this.tickFormat ? this.tickFormat(t) : formatTick(t)}</text>
-      `;
-        });
-    }
-    /**
-     * `slot` is the per-category width to lay bars out against — either the
-     * measured-width-derived `plotW / n` (`layout="fit"`) or the fixed
-     * `barWidth` (`layout="scroll"`), computed once by the caller
-     * (`renderChart()`) and handed to both this method and the category-label
-     * x-position calc so the two can never drift apart from each other.
-     */
-    renderBars(plotX, plotY, plotH, slot, lo, hi) {
-        const span = hi - lo || 1;
-        const n = this.labels.length;
-        const groupCount = this.stacked ? 1 : Math.max(1, this.datasets.length);
-        const groupW = slot * (1 - BAR_GROUP_GAP);
-        const barW = (groupW - BAR_GAP * slot * (groupCount - 1)) / groupCount;
-        const bars = [];
-        for (let i = 0; i < n; i++) {
-            // `this.barX`, when set, overrides just the category's own x-origin
-            // (what an unset `barX` would compute as `plotX + i * slot`) -- the
-            // group-centering/per-dataset-offset math below still layers on top of
-            // it, same as it does on top of the internal formula.
-            const origin = this.barX ? this.barX(i) : plotX + i * slot;
-            const slotStart = origin + (slot - groupW) / 2;
-            let stackPos = 0; // running positive-side offset (in value units) for stacked bars
-            let stackNeg = 0; // running negative-side offset
-            this.datasets.forEach((s, di) => {
-                const v = s.data[i];
-                if (v == null || !Number.isFinite(v))
-                    return;
-                const color = this.colorFor(di, s);
-                let rectX;
-                let barValLo;
-                let barValHi;
-                if (this.stacked) {
-                    rectX = slotStart;
-                    if (v >= 0) {
-                        barValLo = stackPos;
-                        barValHi = stackPos + v;
-                        stackPos += v;
-                    }
-                    else {
-                        barValLo = stackNeg + v;
-                        barValHi = stackNeg;
-                        stackNeg += v;
-                    }
-                }
-                else {
-                    rectX = slotStart + di * (barW + BAR_GAP * slot);
-                    const zeroClamped = Math.min(hi, Math.max(lo, 0));
-                    barValLo = Math.min(zeroClamped, v);
-                    barValHi = Math.max(zeroClamped, v);
-                }
-                const y1 = plotY + plotH - ((barValHi - lo) / span) * plotH;
-                const y2 = plotY + plotH - ((barValLo - lo) / span) * plotH;
-                const label = this.labels[i];
-                bars.push(svg `
-          <rect
-            part="bar"
-            x=${rectX}
-            y=${y1}
-            width=${Math.max(0, barW)}
-            height=${Math.max(0, y2 - y1)}
-            fill=${color}
-            tabindex="0"
-            role="button"
-            aria-label=${`${s.label}, ${label}: ${v}`}
-            @click=${() => this.emitPoint(di, i)}
-            @keydown=${(e) => this.onPointKeyDown(e, di, i)}
-          ><title>${s.label} — ${label}: ${v}</title></rect>
-        `);
-            });
-        }
-        return bars;
-    }
-    renderLines(plotX, plotY, plotW, plotH, lo, hi) {
-        const span = hi - lo || 1;
-        const n = this.labels.length;
-        const xFor = (i) => plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
-        const yFor = (v) => plotY + plotH - ((v - lo) / span) * plotH;
-        return this.datasets.map((s, di) => {
-            const color = this.colorFor(di, s);
-            let d = '';
-            let penDown = false;
-            s.data.forEach((v, i) => {
-                if (v == null || !Number.isFinite(v)) {
-                    penDown = false;
-                    return;
-                }
-                const cmd = penDown ? 'L' : 'M';
-                d += `${cmd}${xFor(i)},${yFor(v)} `;
-                penDown = true;
-            });
-            const dots = s.data.map((v, i) => {
-                if (v == null || !Number.isFinite(v))
-                    return nothing;
-                const label = this.labels[i];
-                return svg `
-          <circle
-            part="point"
-            cx=${xFor(i)}
-            cy=${yFor(v)}
-            r="4"
-            fill=${color}
-            tabindex="0"
-            role="button"
-            aria-label=${`${s.label}, ${label}: ${v}`}
-            @click=${() => this.emitPoint(di, i)}
-            @keydown=${(e) => this.onPointKeyDown(e, di, i)}
-          ><title>${s.label} — ${label}: ${v}</title></circle>
-        `;
-            });
-            return svg `<path part="line" d=${d.trim()} stroke=${color}></path>${dots}`;
-        });
-    }
-    render() {
-        if (!this.visible && this.lastResult)
-            return this.lastResult;
-        const signature = this.computeSignature();
-        if (signature === this.lastSignature && this.lastResult)
-            return this.lastResult;
-        this.lastSignature = signature;
-        const result = this.renderChart();
-        this.lastResult = result;
-        return result;
-    }
-    /**
-     * Step size for `maxLabels` decimation: 1 (show every label, today's
-     * unchanged default) when `maxLabels` is unset or already >= the label
-     * count, otherwise the ceil-divide spacing that lands close to
-     * `maxLabels` shown labels while always keeping index 0 and the last
-     * index (enforced by the caller, not here).
-     */
-    labelStep(n) {
-        const max = this.maxLabels;
-        if (max == null || n <= max)
-            return 1;
-        return Math.max(1, Math.ceil((n - 1) / Math.max(1, max - 1)));
-    }
-    renderChart() {
-        const n = this.labels.length;
-        const h = this.plotHeight || 200;
-        const padLeft = PAD_LEFT + (this.yLabel ? AXIS_TITLE_SPACE : 0);
-        const padBottom = PAD_BOTTOM + (this.xLabel ? AXIS_TITLE_SPACE : 0);
-        const plotX = padLeft;
-        const plotY = PAD_TOP;
-        const plotH = Math.max(0, h - plotY - padBottom);
-        let w;
-        let plotW;
-        let slot;
-        if (this.layout === 'scroll') {
-            // Fixed-width bars: content width is driven by category count ×
-            // barWidth instead of the measured host width, and CAN exceed it --
-            // the svg gets an explicit inline-size below (not 100%) and
-            // `:host([layout='scroll']) [part='base']` (lite-chart.styles.ts)
-            // turns on `overflow-x: auto` so the host scrolls to reveal the rest.
-            slot = this.barWidth;
-            plotW = Math.max(0, n * slot);
-            w = plotX + plotW + PAD_RIGHT;
-        }
-        else {
-            // 'fit' (default): squeeze to the measured host width, byte-for-byte
-            // the same computation as before `layout` existed.
-            w = this.plotWidth || 400;
-            plotW = Math.max(0, w - plotX - PAD_RIGHT);
-            slot = n > 0 ? plotW / n : 0;
-        }
-        const { lo, hi, ticks } = this.domain();
-        const grid = this.renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi);
-        const marks = this.type === 'bar'
-            ? this.renderBars(plotX, plotY, plotH, slot, lo, hi)
-            : this.renderLines(plotX, plotY, plotW, plotH, lo, hi);
-        const step = this.labelStep(n);
-        const categoryLabels = this.labels.map((label, i) => {
-            if (i !== 0 && i !== n - 1 && i % step !== 0)
-                return nothing; // maxLabels decimation
-            const x = this.type === 'bar' && n > 0
-                ? (this.barX ? this.barX(i) : plotX + i * slot) + slot / 2 // matches renderBars()'s own per-category slot center (or the barX override, when set)
-                : plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
-            return svg `<text part="axis-label" x=${x} y=${plotY + plotH + 14} text-anchor="middle">${label}</text>`;
-        });
-        const chartLabel = this.datasets.map((d) => d.label).join(', ') || 'Chart';
-        return html `
-      <div part="base">
-        <svg
-          viewBox="0 0 ${w} ${h}"
-          style=${this.layout === 'scroll' ? `inline-size: ${w}px` : nothing}
-          role="group"
-          aria-label=${chartLabel}
-        >
-          ${grid}
-          ${categoryLabels}
-          ${marks}
-          ${this.yLabel
-            ? svg `<text part="axis-title" x=${12} y=${plotY + plotH / 2} text-anchor="middle" transform="rotate(-90, 12, ${plotY + plotH / 2})">${this.yLabel}</text>`
-            : nothing}
-          ${this.xLabel
-            ? svg `<text part="axis-title" x=${plotX + plotW / 2} y=${plotY + plotH + padBottom - 2} text-anchor="middle">${this.xLabel}</text>`
-            : nothing}
-        </svg>
-        ${this.legend
-            ? html `<div part="legend">
-              ${this.datasets.map((s, i) => html `
-                  <span part="legend-item">
-                    <span part="legend-swatch" style="background:${this.colorFor(i, s)}"></span>
-                    ${s.label}
-                  </span>
-                `)}
-            </div>`
-            : nothing}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraLiteChart.prototype, "type", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraLiteChart.prototype, "labels", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraLiteChart.prototype, "datasets", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraLiteChart.prototype, "legend", void 0);
-__decorate([
-    property()
-], LyraLiteChart.prototype, "height", void 0);
-__decorate([
-    property({ attribute: 'x-label' })
-], LyraLiteChart.prototype, "xLabel", void 0);
-__decorate([
-    property({ attribute: 'y-label' })
-], LyraLiteChart.prototype, "yLabel", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'begin-at-zero' })
-], LyraLiteChart.prototype, "beginAtZero", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraLiteChart.prototype, "stacked", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraLiteChart.prototype, "tickFormat", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraLiteChart.prototype, "layout", void 0);
-__decorate([
-    property({ type: Number, attribute: 'bar-width' })
-], LyraLiteChart.prototype, "barWidth", void 0);
-__decorate([
-    property({ type: Number, attribute: 'max-labels' })
-], LyraLiteChart.prototype, "maxLabels", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraLiteChart.prototype, "barX", void 0);
-__decorate([
-    state()
-], LyraLiteChart.prototype, "plotWidth", void 0);
-__decorate([
-    state()
-], LyraLiteChart.prototype, "plotHeight", void 0);
-__decorate([
-    state()
-], LyraLiteChart.prototype, "visible", void 0);
-__decorate([
-    query('svg')
-], LyraLiteChart.prototype, "svgEl", void 0);
-function formatTick(v) {
-    // Avoid float noise (e.g. 0.30000000000000004) from the niceStep() math
-    // above without hardcoding a fixed decimal count that'd butcher large ints.
-    return Number(v.toFixed(6)).toString();
-}
 defineElement('lite-chart', LyraLiteChart);
+//# sourceMappingURL=lite-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lite-chart.js","sourceRoot":"","sources":["../../../src/components/chart/lite-chart.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC"}

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

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

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

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

package/dist/components/chart/lite-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));
     /* Same token names/fallback chain as chart.ts's --lyra-chart-* — a host
        already theming lyra-chart gets lyra-lite-chart themed for free, and
        vice versa. Unlike chart.ts (canvas-rendered, can't consume var()
@@ -14,6 +14,14 @@ export const styles = css `
     --lyra-chart-legend-color: var(--lyra-color-text);
     --lyra-chart-tooltip-bg: var(--lyra-color-surface);
     --lyra-chart-tooltip-text: var(--lyra-color-text);
+    --lyra-chart-color-1: var(--lyra-color-chart-1);
+    --lyra-chart-color-2: var(--lyra-color-chart-2);
+    --lyra-chart-color-3: var(--lyra-color-chart-3);
+    --lyra-chart-color-4: var(--lyra-color-chart-4);
+    --lyra-chart-color-5: var(--lyra-color-chart-5);
+    --lyra-chart-color-6: var(--lyra-color-chart-6);
+    --lyra-chart-color-7: var(--lyra-color-chart-7);
+    --lyra-chart-color-8: var(--lyra-color-chart-8);
   }
   [part='base'] {
     position: relative;
@@ -45,13 +53,13 @@ export const styles = css `
   }
   [part='axis-label'] {
     fill: var(--lyra-chart-tick-color);
-    font-size: 10px;
+    font-size: var(--lyra-size-10px);
     font-family: var(--lyra-font-family, inherit);
   }
   [part='axis-title'] {
     fill: var(--lyra-chart-tick-color);
-    font-size: 11px;
-    font-weight: 600;
+    font-size: var(--lyra-size-11px);
+    font-weight: var(--lyra-font-weight-semibold);
     font-family: var(--lyra-font-family, inherit);
   }
   [part='bar'] {
@@ -60,7 +68,7 @@ export const styles = css `
   [part='bar']:focus-visible,
   [part='point']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
-    outline-offset: 1px;
+    outline-offset: var(--lyra-size-1px);
   }
   [part='line'] {
     fill: none;
@@ -79,14 +87,15 @@ export const styles = css `
   [part='legend-item'] {
     display: inline-flex;
     align-items: center;
-    gap: 0.35em;
-    font-size: 0.8rem;
+    gap: var(--lyra-size-0-35em);
+    font-size: var(--lyra-size-0-8rem);
     color: var(--lyra-chart-legend-color);
   }
   [part='legend-swatch'] {
-    inline-size: 0.7em;
-    block-size: 0.7em;
-    border-radius: 2px;
+    inline-size: var(--lyra-size-0-7em);
+    block-size: var(--lyra-size-0-7em);
+    border-radius: var(--lyra-size-2px);
     flex: 0 0 auto;
   }
 `;
+//# sourceMappingURL=lite-chart.styles.js.map

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

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

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

@@ -0,0 +1,16 @@
+import { LyraChart } from './chart.class.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.
+ *
+ * @customElement lyra-pie-chart
+ */
+export declare class LyraPieChart extends LyraChart {
+    type: 'pie';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-pie-chart': LyraPieChart;
+    }
+}
+//# sourceMappingURL=pie-chart.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.class.d.ts","sourceRoot":"","sources":["../../../src/components/chart/pie-chart.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,kBAAkB,CAAC;AAE5D;;;;;GAKG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACjC,IAAI,EAAE,KAAK,CAAC;CACrB;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,11 @@
+import { LyraChart, lockChartType } from './chart.class.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.
+ *
+ * @customElement lyra-pie-chart
+ */
+export class LyraPieChart extends LyraChart {
+}
+lockChartType(LyraPieChart, 'pie');
+//# sourceMappingURL=pie-chart.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.class.js","sourceRoot":"","sources":["../../../src/components/chart/pie-chart.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,OAAO,YAAa,SAAQ,SAAS;CAE1C;AAED,aAAa,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC"}