@aceshooting/lyra-ui 1.2.0 → 2.1.0

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

@@ -8,6 +8,7 @@ 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 { srOnly } from '../../internal/a11y.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
@@ -30,6 +31,7 @@ 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
+const BAR_CORNER_RADIUS = 4; // px, used only when roundedBars is true
 /**
  * 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
@@ -75,6 +77,33 @@ function niceDomain(dataLo, dataHi, beginAtZero, count) {
  * `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.
+ *
+ * Seven further additive, opt-in properties: `pointText` overrides the
+ * per-bar/per-point `<title>`/`aria-label` tooltip text (mirrors
+ * `lyra-heatmap`'s `cellText` hook), falling back to the built-in raw-value
+ * template when unset; `roundedBars` draws bars as a rounded-top path
+ * instead of a square-cornered rect; `skipZero` omits a bar entirely (not
+ * just zero-height) for an exactly-`0` value; `padLeft`/`barGapRatio`
+ * override the internal `PAD_LEFT`/`BAR_GROUP_GAP` layout constants; `scale`
+ * (`type="bar"` only) switches the bar-height mapping from the default
+ * linear `niceDomain` fraction to a `Math.sqrt(value / domainMax)`
+ * compression (mirroring `lyra-heatmap`'s matrix-mode `sqrt` scale) so a
+ * skewed dataset's smaller bars don't get washed out by one dominant value
+ * — gridlines/tick labels stay on the linear domain regardless, only the bar
+ * marks' own height changes, and `type="line"` ignores `scale` entirely; and
+ * `hideAxis` suppresses `renderGrid()`'s gridlines/tick labels altogether
+ * (x-axis category labels, rendered separately, are unaffected).
+ *
  * @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:
@@ -90,6 +119,8 @@ function niceDomain(dataLo, dataHi, beginAtZero, count) {
  * @csspart legend - The legend row, when `legend` is set.
  * @csspart legend-item - Each legend entry.
  * @csspart legend-swatch - Each legend entry's color swatch.
+ * @csspart live-region - The current mark announcement for keyboard users.
+ * @csspart data-list - A visually hidden list of all plotted data points.
  */
 export class LyraLiteChart extends LyraElement {
     constructor() {
@@ -104,12 +135,40 @@ export class LyraLiteChart extends LyraElement {
         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;
+        /** `type="bar"` only: draws each bar as a rounded-top-corner shape instead of the default
+         *  square-cornered rect. Default `false` renders exactly today's plain `<rect>`. */
+        this.roundedBars = false;
+        /** `type="bar"` only: omits a bar entirely (no mark, no `tabindex`, no tooltip) for a value that
+         *  is exactly `0` — `null`/non-finite values are always skipped regardless of this flag. Default
+         *  `false` preserves today's behavior of a zero-height but focusable/titled bar. */
+        this.skipZero = false;
+        /** `type="bar"` only (no effect on `type="line"`): `'linear'` (default) maps a bar's value to
+         *  height via the standard `niceDomain`-based fraction, unchanged from before this property
+         *  existed. `'sqrt'` instead maps via `Math.sqrt(value / domainMax)` (mirroring `lyra-heatmap`'s
+         *  matrix-mode `sqrt` scale), boosting smaller values relative to one dominant value so a skewed
+         *  dataset's smaller bars don't get washed out. Gridlines/tick labels stay on the linear domain
+         *  either way — only the bar marks' own height mapping changes. */
+        this.scale = 'linear';
+        /** Suppresses `renderGrid()` entirely — no gridlines, no y-axis tick labels. x-axis category
+         *  labels (rendered separately) are unaffected. Default `false` preserves today's behavior. */
+        this.hideAxis = false;
         this.plotWidth = 0;
         this.plotHeight = 0;
         this.visible = true;
-        this.lastSignature = '';
+        /** One roving tab stop across all bar/point marks. */
+        this.activeMarkIndex = 0;
+        this.liveText = '';
     }
-    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
     connectedCallback() {
         super.connectedCallback();
         this.resizeObserver = new ResizeObserver((entries) => {
@@ -132,12 +191,30 @@ export class LyraLiteChart extends LyraElement {
             });
             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);
@@ -150,6 +227,102 @@ export class LyraLiteChart extends LyraElement {
     colorFor(index, series) {
         return series.color ?? DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
     }
+    /** Dispatches to the host-provided `pointText` formatter when set, otherwise `undefined` (the
+     *  caller falls back to its own built-in template) — mirrors `lyra-heatmap`'s `resolveCellText()`. */
+    resolvePointText(label, value, datasetIndex) {
+        return this.pointText?.(label, value, datasetIndex);
+    }
+    /** The ordered set of visible marks used by both keyboard navigation and
+     * the screen-reader data alternative. */
+    interactiveMarks() {
+        const marks = [];
+        if (this.type === 'bar') {
+            for (let index = 0; index < this.labels.length; index++) {
+                for (let datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
+                    const value = this.datasets[datasetIndex]?.data[index];
+                    if (value == null || !Number.isFinite(value) || (this.skipZero && value === 0))
+                        continue;
+                    marks.push({ datasetIndex, index, label: this.labels[index] ?? '', value });
+                }
+            }
+        }
+        else {
+            this.datasets.forEach((series, datasetIndex) => {
+                series.data.forEach((value, index) => {
+                    if (value == null || !Number.isFinite(value))
+                        return;
+                    marks.push({ datasetIndex, index, label: this.labels[index] ?? '', value });
+                });
+            });
+        }
+        return marks;
+    }
+    markIndexMap() {
+        return new Map(this.interactiveMarks().map((mark, index) => [`${mark.datasetIndex}:${mark.index}`, index]));
+    }
+    normalizedMarkIndex(marks = this.interactiveMarks()) {
+        return marks.length ? Math.min(Math.max(this.activeMarkIndex, 0), marks.length - 1) : -1;
+    }
+    markAnnouncement(index, marks = this.interactiveMarks()) {
+        const mark = marks[index];
+        if (!mark)
+            return '';
+        const series = this.datasets[mark.datasetIndex]?.label ?? 'Series';
+        const custom = this.resolvePointText(mark.label, mark.value, mark.datasetIndex);
+        return `${custom ?? `${series}, ${mark.label}: ${mark.value}`} (${index + 1} of ${marks.length})`;
+    }
+    onMarkFocus(index) {
+        const marks = this.interactiveMarks();
+        if (!marks[index])
+            return;
+        this.activeMarkIndex = index;
+        this.liveText = this.markAnnouncement(index, marks);
+    }
+    focusMark(index) {
+        const marks = this.interactiveMarks();
+        if (!marks[index])
+            return;
+        this.activeMarkIndex = index;
+        this.liveText = this.markAnnouncement(index, marks);
+        void this.updateComplete.then(() => {
+            const markEls = Array.from(this.renderRoot.querySelectorAll('[part="bar"], [part="point"]'));
+            markEls[index]?.focus();
+        });
+    }
+    /**
+     * A value-to-y-pixel mapping for a bar's top/bottom edge. `'linear'` (the
+     * default) is the standard `niceDomain`-fraction formula, unchanged from
+     * before `scale` existed. `'sqrt'` instead compresses via
+     * `Math.sqrt(value / domainMax)` (mirroring `lyra-heatmap`'s matrix-mode
+     * `sqrt` branch), clamping `value` to `[0, hi]` first since a negative
+     * input has no real square root — bar charts using `scale="sqrt"` are
+     * expected to carry non-negative data, same assumption as the heatmap
+     * precedent this mirrors.
+     */
+    barValueToY(value, plotY, plotH, lo, hi) {
+        if (this.scale === 'sqrt') {
+            const domainMax = hi > 0 ? hi : 1;
+            const frac = Math.sqrt(Math.min(domainMax, Math.max(0, value)) / domainMax);
+            return plotY + plotH - frac * plotH;
+        }
+        const span = hi - lo || 1;
+        return plotY + plotH - ((value - lo) / span) * plotH;
+    }
+    /**
+     * A rounded-top-corners `<path>` `d` string for a bar occupying
+     * `[x, y, x+w, y+h]` — an SVG `<rect>` can only express a uniform radius
+     * on all four corners, so `roundedBars` switches the mark to a path
+     * instead of adding `rx`/`ry` to keep the bottom edge square against the
+     * baseline. `r` is clamped so it never exceeds half the bar's width or its
+     * full height (a thin/short bar degrades to a plain rectangle path rather
+     * than self-intersecting).
+     */
+    roundedBarPath(x, y, w, h) {
+        const r = Math.max(0, Math.min(BAR_CORNER_RADIUS, w / 2, h));
+        if (r <= 0)
+            return `M${x},${y} h${w} v${h} h${-w} Z`;
+        return `M${x},${y + r} Q${x},${y} ${x + r},${y} H${x + w - r} Q${x + w},${y} ${x + w},${y + r} V${y + h} H${x} Z`;
+    }
     domain() {
         let lo = Infinity;
         let hi = -Infinity;
@@ -188,30 +361,34 @@ export class LyraLiteChart extends LyraElement {
         }
         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 !== ' ')
+    onPointKeyDown(e, datasetIndex, index, markIndex) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.onMarkFocus(markIndex);
+            this.emitPoint(datasetIndex, index);
+            return;
+        }
+        const marks = this.interactiveMarks();
+        if (!marks.length)
+            return;
+        let next = markIndex;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+            next = Math.min(marks.length - 1, markIndex + 1);
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+            next = Math.max(0, markIndex - 1);
+        else if (e.key === 'Home')
+            next = 0;
+        else if (e.key === 'End')
+            next = marks.length - 1;
+        else
             return;
         e.preventDefault();
-        this.emitPoint(datasetIndex, index);
+        this.focusMark(next);
     }
     renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi) {
         const span = hi - lo || 1;
@@ -223,28 +400,43 @@ export class LyraLiteChart extends LyraElement {
       `;
         });
     }
-    renderBars(plotX, plotY, plotW, plotH, lo, hi) {
-        const span = hi - lo || 1;
+    /**
+     * `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 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 groupGap = this.barGapRatio ?? BAR_GROUP_GAP;
+        const groupW = slot * (1 - groupGap);
         const barW = (groupW - BAR_GAP * slot * (groupCount - 1)) / groupCount;
+        const markIndexes = this.markIndexMap();
+        const activeMarkIndex = this.normalizedMarkIndex();
         const bars = [];
         for (let i = 0; i < n; i++) {
-            const slotStart = plotX + i * slot + (slot - groupW) / 2;
+            // `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)
+                if (v == null || !Number.isFinite(v))
+                    return;
+                if (this.skipZero && v === 0)
                     return;
                 const color = this.colorFor(di, s);
-                let barX;
+                let rectX;
                 let barValLo;
                 let barValHi;
                 if (this.stacked) {
-                    barX = slotStart;
+                    rectX = slotStart;
                     if (v >= 0) {
                         barValLo = stackPos;
                         barValHi = stackPos + v;
@@ -257,27 +449,49 @@ export class LyraLiteChart extends LyraElement {
                     }
                 }
                 else {
-                    barX = slotStart + di * (barW + BAR_GAP * slot);
-                    barValLo = Math.min(0, v);
-                    barValHi = Math.max(0, v);
+                    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 y1 = this.barValueToY(barValHi, plotY, plotH, lo, hi);
+                const y2 = this.barValueToY(barValLo, plotY, plotH, lo, hi);
                 const label = this.labels[i];
-                bars.push(svg `
+                const custom = this.resolvePointText(label, v, di);
+                const ariaLabel = custom ?? `${s.label}, ${label}: ${v}`;
+                const titleText = custom ?? `${s.label} — ${label}: ${v}`;
+                const w = Math.max(0, barW);
+                const h = Math.max(0, y2 - y1);
+                const markIndex = markIndexes.get(`${di}:${i}`);
+                bars.push(this.roundedBars
+                    ? svg `
+          <path
+            part="bar"
+            d=${this.roundedBarPath(rectX, y1, w, h)}
+            fill=${color}
+            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+            role="button"
+            aria-label=${ariaLabel}
+            @click=${() => this.emitPoint(di, i)}
+            @focus=${() => this.onMarkFocus(markIndex)}
+            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+          ><title>${titleText}</title></path>
+        `
+                    : svg `
           <rect
             part="bar"
-            x=${barX}
+            x=${rectX}
             y=${y1}
-            width=${Math.max(0, barW)}
-            height=${Math.max(0, y2 - y1)}
+            width=${w}
+            height=${h}
             fill=${color}
-            tabindex="0"
+            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
             role="button"
-            aria-label=${`${s.label}, ${label}: ${v}`}
+            aria-label=${ariaLabel}
             @click=${() => this.emitPoint(di, i)}
-            @keydown=${(e) => this.onPointKeyDown(e, di, i)}
-          ><title>${s.label} — ${label}: ${v}</title></rect>
+            @focus=${() => this.onMarkFocus(markIndex)}
+            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+          ><title>${titleText}</title></rect>
         `);
             });
         }
@@ -288,16 +502,29 @@ export class LyraLiteChart extends LyraElement {
         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;
+        const markIndexes = this.markIndexMap();
+        const activeMarkIndex = this.normalizedMarkIndex();
         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(' ');
+            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)
+                if (v == null || !Number.isFinite(v))
                     return nothing;
                 const label = this.labels[i];
+                const custom = this.resolvePointText(label, v, di);
+                const ariaLabel = custom ?? `${s.label}, ${label}: ${v}`;
+                const titleText = custom ?? `${s.label} — ${label}: ${v}`;
+                const markIndex = markIndexes.get(`${di}:${i}`);
                 return svg `
           <circle
             part="point"
@@ -305,51 +532,94 @@ export class LyraLiteChart extends LyraElement {
             cy=${yFor(v)}
             r="4"
             fill=${color}
-            tabindex="0"
+            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
             role="button"
-            aria-label=${`${s.label}, ${label}: ${v}`}
+            aria-label=${ariaLabel}
             @click=${() => this.emitPoint(di, i)}
-            @keydown=${(e) => this.onPointKeyDown(e, di, i)}
-          ><title>${s.label} — ${label}: ${v}</title></circle>
+            @focus=${() => this.onMarkFocus(markIndex)}
+            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+          ><title>${titleText}</title></circle>
         `;
             });
-            return svg `<path part="line" d=${d} stroke=${color}></path>${dots}`;
+            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;
+        // Lit already tracks every reactive input, including function-valued
+        // properties such as `tickFormat` and `barX`. Returning a cached
+        // TemplateResult here would make callback replacement invisible and
+        // serializing arbitrary data would throw for circular objects/BigInt.
+        // Rendering this small SVG template is cheaper and more correct than a
+        // lossy content fingerprint.
+        return this.renderChart();
+    }
+    /**
+     * 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 w = this.plotWidth || 400;
+        const n = this.labels.length;
         const h = this.plotHeight || 200;
-        const padLeft = PAD_LEFT + (this.yLabel ? AXIS_TITLE_SPACE : 0);
+        const padLeft = (this.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);
+        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 grid = this.hideAxis ? [] : this.renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi);
         const marks = this.type === 'bar'
-            ? this.renderBars(plotX, plotY, plotW, plotH, lo, hi)
+            ? 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) => {
-            const n = this.labels.length;
-            const x = plotX + (n > 1 ? (i / (n - 1)) * plotW : plotW / 2);
+            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';
+        const marksForA11y = this.interactiveMarks();
+        const activeMark = this.normalizedMarkIndex(marksForA11y);
         return html `
       <div part="base">
-        <svg viewBox="0 0 ${w} ${h}" role="group" aria-label=${chartLabel}>
+        <svg
+          viewBox="0 0 ${w} ${h}"
+          style=${this.layout === 'scroll' ? `inline-size: ${w}px` : nothing}
+          role="group"
+          aria-label=${chartLabel}
+          tabindex=${marksForA11y.length ? '-1' : '0'}
+        >
           ${grid}
           ${categoryLabels}
           ${marks}
@@ -360,6 +630,12 @@ export class LyraLiteChart extends LyraElement {
             ? svg `<text part="axis-title" x=${plotX + plotW / 2} y=${plotY + plotH + padBottom - 2} text-anchor="middle">${this.xLabel}</text>`
             : nothing}
         </svg>
+        <div part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+          ${activeMark >= 0 ? this.liveText || this.markAnnouncement(activeMark, marksForA11y) : ''}
+        </div>
+        <ul part="data-list" class="sr-only" aria-label="Chart data">
+          ${marksForA11y.map((mark, index) => html `<li>${this.markAnnouncement(index, marksForA11y)}</li>`)}
+        </ul>
         ${this.legend
             ? html `<div part="legend">
               ${this.datasets.map((s, i) => html `
@@ -404,6 +680,39 @@ __decorate([
 __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([
+    property({ attribute: false })
+], LyraLiteChart.prototype, "pointText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'rounded-bars' })
+], LyraLiteChart.prototype, "roundedBars", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'skip-zero' })
+], LyraLiteChart.prototype, "skipZero", void 0);
+__decorate([
+    property({ type: Number, attribute: 'pad-left' })
+], LyraLiteChart.prototype, "padLeft", void 0);
+__decorate([
+    property({ type: Number, attribute: 'bar-gap-ratio' })
+], LyraLiteChart.prototype, "barGapRatio", void 0);
+__decorate([
+    property()
+], LyraLiteChart.prototype, "scale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-axis' })
+], LyraLiteChart.prototype, "hideAxis", void 0);
 __decorate([
     state()
 ], LyraLiteChart.prototype, "plotWidth", void 0);
@@ -413,6 +722,12 @@ __decorate([
 __decorate([
     state()
 ], LyraLiteChart.prototype, "visible", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "activeMarkIndex", void 0);
+__decorate([
+    state()
+], LyraLiteChart.prototype, "liveText", void 0);
 __decorate([
     query('svg')
 ], LyraLiteChart.prototype, "svgEl", void 0);

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

@@ -23,6 +23,15 @@ export const styles = css `
     flex-direction: column;
     gap: var(--lyra-space-xs);
   }
+  /* layout="scroll": the svg below gets an explicit inline-size (its
+     computed content width, set inline per-render since it depends on
+     category count/barWidth) instead of the 100% below, and can end up
+     wider than this container -- scroll to reveal the rest instead of
+     squeezing. Scoped strictly to the reflected [layout='scroll'] attribute
+     so layout="fit" (the default) never triggers this rule. */
+  :host([layout='scroll']) [part='base'] {
+    overflow-x: auto;
+  }
   svg {
     flex: 1 1 auto;
     inline-size: 100%;

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

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-pie-chart>` — `<lyra-chart>` with `type` locked to `"pie"`. Single-series:
@@ -8,21 +8,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraPieChart extends LyraChart {
 }
-// `type` is locked read-only rather than a settable class field with just a
-// default value — `LyraChart` declares it as a plain (decorator-managed)
-// class field, and TypeScript forbids a subclass from re-declaring a base
-// field as a getter/setter pair via ordinary class syntax (TS2611) — so the
-// accessor pair is installed directly on the prototype instead, which is
-// runtime-equivalent (same shadowing semantics as a class-syntax override)
-// without tripping that check.
-Object.defineProperty(LyraPieChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'pie';
-    },
-    set(_v) {
-        /* locked to 'pie'; direct writes are ignored */
-    },
-});
+lockChartType(LyraPieChart, 'pie');
 defineElement('pie-chart', LyraPieChart);