@aceshooting/lyra-ui 1.0.1 → 1.2.0

package/dist/components/chart/histogram.js

@@ -40,6 +40,22 @@ __decorate([
 __decorate([
     property()
 ], LyraHistogram.prototype, "label", void 0);
+// Both the `labels` and `datasets` accessors below derive from the same
+// `binValues(values, bins)` pass, and `LyraChart` reads `datasets` more than
+// once per `draw()`/`render()` — memoize the last bucketing result per
+// instance (keyed by reference equality on `values`/`bins`, matching Lit's
+// own change detection for the `values` array) so an unrelated property
+// change doesn't re-run the O(n) bucketing loop from scratch on every access.
+const bucketCache = new WeakMap();
+export function binnedBuckets(el) {
+    const cached = bucketCache.get(el);
+    if (cached && cached.values === el.values && cached.bins === el.bins) {
+        return cached.buckets;
+    }
+    const buckets = binValues(el.values, el.bins);
+    bucketCache.set(el, { values: el.values, bins: el.bins, buckets });
+    return buckets;
+}
 // `labels`/`datasets` are computed from `values`/`bins` rather than settable
 // props. `LyraChart` declares both as plain (decorator-managed) class
 // fields, and TypeScript forbids a subclass from re-declaring a base field
@@ -51,7 +67,7 @@ Object.defineProperty(LyraHistogram.prototype, 'labels', {
     configurable: true,
     enumerable: true,
     get() {
-        return binValues(this.values, this.bins).map((b) => b.label);
+        return binnedBuckets(this).map((b) => b.label);
     },
     set(_v) {
         /* derived from `values`/`bins`; direct writes are ignored */
@@ -61,7 +77,7 @@ Object.defineProperty(LyraHistogram.prototype, 'datasets', {
     configurable: true,
     enumerable: true,
     get() {
-        return [{ label: this.label, data: binValues(this.values, this.bins).map((b) => b.count) }];
+        return [{ label: this.label, data: binnedBuckets(this).map((b) => b.count) }];
     },
     set(_v) {
         /* derived from `values`/`bins`; direct writes are ignored */

package/dist/components/chart/line-chart.stories.d.ts

@@ -3,3 +3,20 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+/**
+ * `area` fills every series lacking its own per-series `fill` (unlike
+ * `Default`'s "Sessions" series, which opts into a fill via its own
+ * `fill: true` instead of the chart-wide default).
+ */
+export declare const AreaFill: Story;
+/** `zoom` enables wheel/drag/pinch zoom; a reset-zoom button appears once zoomed. */
+export declare const WithZoom: Story;
+/** A second series on `axis: "y2"` plots against its own right-side scale, labelled by `y2-label`. */
+export declare const DualAxis: Story;
+/**
+ * `beginAtZero` lets the y axis start near the data's own minimum instead of
+ * 0 — set via the `.beginAtZero` property, since the `begin-at-zero`
+ * *attribute*'s presence (not its string value) is what Lit's boolean
+ * converter reads, so `begin-at-zero="false"` would not turn it off.
+ */
+export declare const WithoutBeginAtZero: Story;

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

@@ -22,3 +22,78 @@ export const Default = {
     `;
     },
 };
+/**
+ * `area` fills every series lacking its own per-series `fill` (unlike
+ * `Default`'s "Sessions" series, which opts into a fill via its own
+ * `fill: true` instead of the chart-wide default).
+ */
+export const AreaFill = {
+    render: () => {
+        const series = [{ label: 'Sessions', data: [4, 7, 6, 9, 12] }];
+        return html `
+      <lyra-line-chart
+        area
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        .datasets=${series}
+      ></lyra-line-chart>
+    `;
+    },
+};
+/** `zoom` enables wheel/drag/pinch zoom; a reset-zoom button appears once zoomed. */
+export const WithZoom = {
+    render: () => {
+        const series = [{ label: 'Sessions', data: [4, 7, 6, 9, 12, 8, 15, 10, 6, 9] }];
+        return html `
+      <lyra-line-chart
+        zoom
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O']}
+        .datasets=${series}
+        @lyra-zoom=${(e) => console.log('lyra-zoom', e.detail)}
+      ></lyra-line-chart>
+    `;
+    },
+};
+/** A second series on `axis: "y2"` plots against its own right-side scale, labelled by `y2-label`. */
+export const DualAxis = {
+    render: () => {
+        const series = [
+            { label: 'Sessions', data: [40, 70, 60, 90, 120] },
+            { label: 'Conversion rate', data: [0.02, 0.03, 0.025, 0.04, 0.05], axis: 'y2' },
+        ];
+        return html `
+      <lyra-line-chart
+        legend
+        height="16rem"
+        style="width: 22rem"
+        y-label="Sessions"
+        y2-label="Conversion rate"
+        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        .datasets=${series}
+      ></lyra-line-chart>
+    `;
+    },
+};
+/**
+ * `beginAtZero` lets the y axis start near the data's own minimum instead of
+ * 0 — set via the `.beginAtZero` property, since the `begin-at-zero`
+ * *attribute*'s presence (not its string value) is what Lit's boolean
+ * converter reads, so `begin-at-zero="false"` would not turn it off.
+ */
+export const WithoutBeginAtZero = {
+    render: () => {
+        const series = [{ label: 'Temperature (°C)', data: [18, 19, 21, 20, 22] }];
+        return html `
+      <lyra-line-chart
+        height="16rem"
+        style="width: 22rem"
+        .beginAtZero=${false}
+        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        .datasets=${series}
+      ></lyra-line-chart>
+    `;
+    },
+};

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

@@ -0,0 +1,83 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface LiteSeries {
+    label: string;
+    data: (number | null)[];
+    /** Defaults to a color from the built-in categorical palette, keyed by dataset index. */
+    color?: string;
+}
+export type LyraLiteChartType = 'bar' | 'line';
+/**
+ * `<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.
+ *
+ * @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 declare class LyraLiteChart extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    type: LyraLiteChartType;
+    labels: string[];
+    datasets: LiteSeries[];
+    legend: boolean;
+    height: string;
+    xLabel: string;
+    yLabel: string;
+    beginAtZero: boolean;
+    /** Stacks each category's bars into one segmented bar. Ignored for `type="line"`. */
+    stacked: boolean;
+    /** Formats a y-axis tick value for display (e.g. `(v) => \`$${v.toFixed(2)}\``). Falls back to the
+     *  built-in nice-number formatter when unset. */
+    tickFormat?: (value: number) => string;
+    private plotWidth;
+    private plotHeight;
+    private visible;
+    private svgEl?;
+    private resizeObserver?;
+    private intersectionObserver?;
+    private lastSignature;
+    private lastResult?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    private colorFor;
+    private domain;
+    private computeSignature;
+    private emitPoint;
+    private onPointKeyDown;
+    private renderGrid;
+    private renderBars;
+    private renderLines;
+    render(): TemplateResult;
+    private renderChart;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-lite-chart': LyraLiteChart;
+    }
+}

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

@@ -0,0 +1,424 @@
+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';
+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.
+ *
+ * @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;
+        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);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+    }
+    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,
+        ]);
+    }
+    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>
+      `;
+        });
+    }
+    renderBars(plotX, plotY, plotW, plotH, lo, hi) {
+        const span = hi - lo || 1;
+        const n = this.labels.length;
+        const slot = n > 0 ? plotW / n : 0;
+        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++) {
+            const slotStart = plotX + i * slot + (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)
+                    return;
+                const color = this.colorFor(di, s);
+                let barX;
+                let barValLo;
+                let barValHi;
+                if (this.stacked) {
+                    barX = slotStart;
+                    if (v >= 0) {
+                        barValLo = stackPos;
+                        barValHi = stackPos + v;
+                        stackPos += v;
+                    }
+                    else {
+                        barValLo = stackNeg + v;
+                        barValHi = stackNeg;
+                        stackNeg += v;
+                    }
+                }
+                else {
+                    barX = slotStart + di * (barW + BAR_GAP * slot);
+                    barValLo = Math.min(0, v);
+                    barValHi = Math.max(0, 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=${barX}
+            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);
+            const pts = s.data
+                .map((v, i) => (v == null ? null : [xFor(i), yFor(v)]))
+                .filter((p) => p !== null);
+            const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join(' ');
+            const dots = s.data.map((v, i) => {
+                if (v == null)
+                    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} 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;
+    }
+    renderChart() {
+        const w = this.plotWidth || 400;
+        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 plotW = Math.max(0, w - padLeft - PAD_RIGHT);
+        const plotH = Math.max(0, h - plotY - padBottom);
+        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, plotW, plotH, lo, hi)
+            : this.renderLines(plotX, plotY, plotW, plotH, lo, hi);
+        const categoryLabels = this.labels.map((label, i) => {
+            const n = this.labels.length;
+            const x = 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}" 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([
+    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);

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+/** Zero-dependency alternative to `lyra-chart` — plain SVG/DOM, no `chart.js` peer dep. */
+export declare const Default: Story;
+export declare const GroupedBars: Story;
+/** `stacked` sums each category's bars into one segmented bar instead of grouping them side by side. */
+export declare const StackedBars: Story;
+export declare const Line: Story;
+/** Clicking (or Enter/Space on a focused) bar/point fires `lyra-point-click`, same detail shape as `lyra-chart`'s. */
+export declare const ClickToFilter: Story;
+/** `tickFormat` customizes y-axis tick labels (e.g. currency) instead of the built-in nice-number formatter. */
+export declare const CurrencyTickFormat: Story;