@aceshooting/lyra-ui 6.1.0 → 7.0.0

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

@@ -8,10 +8,12 @@ import { html, svg, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { LyraElement } from '../../../internal/lyra-element.js';
 import { srOnly } from '../../../internal/a11y.js';
-import { getNumberFormat } from '../../../internal/intl-cache.js';
+import { getListFormat, getNumberFormat } from '../../../internal/intl-cache.js';
 import { finiteCount, finiteRange } from '../../../internal/numbers.js';
+import { escapeCsvField } from '../../utility/export-button/csv.js';
 import '../../utility/live-region/live-region.class.js';
 import { styles } from './lite-chart.styles.js';
+import { trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter } from '../../../internal/converters.js';
 // The semantic variables are resolved by SVG/CSS at paint time, so changing a
 // theme or color-scheme does not require a second JS-side draw pass.
 const DEFAULT_PALETTE = [
@@ -27,7 +29,8 @@ const DEFAULT_PALETTE = [
 const PAD_LEFT = 36;
 const PAD_RIGHT = 8;
 const PAD_TOP = 8;
-const PAD_BOTTOM = 20;
+const PAD_BOTTOM = 24;
+const CATEGORY_LABEL_OFFSET = 18;
 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
@@ -48,20 +51,73 @@ function niceStep(span, count) {
     const niceResidual = residual < 1.5 ? 1 : residual < 3 ? 2 : residual < 7 ? 5 : 10;
     return niceResidual * magnitude;
 }
+function saturatingAdd(left, right) {
+    const sum = left + right;
+    if (Number.isFinite(sum))
+        return sum;
+    return right < 0 ? -Number.MAX_VALUE : Number.MAX_VALUE;
+}
+function domainFraction(value, lo, hi) {
+    const span = hi - lo;
+    if (Number.isFinite(span) && span > 0) {
+        return Math.min(1, Math.max(0, (value - lo) / span));
+    }
+    const scale = Math.max(Math.abs(value), Math.abs(lo), Math.abs(hi), 1);
+    const scaledSpan = hi / scale - lo / scale;
+    if (!Number.isFinite(scaledSpan) || scaledSpan <= 0)
+        return 0;
+    const fraction = (value / scale - lo / scale) / scaledSpan;
+    return Number.isFinite(fraction) ? Math.min(1, Math.max(0, fraction)) : 0;
+}
+function safeDomainTicks(lo, hi, count) {
+    return Array.from({ length: Math.max(1, count) + 1 }, (_, index) => {
+        if (index === 0)
+            return lo;
+        if (index === count)
+            return hi;
+        const ratio = index / count;
+        return lo * (1 - ratio) + hi * ratio;
+    }).filter(Number.isFinite);
+}
 /** 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;
+        if (Math.abs(lo) > Number.MAX_VALUE / 2) {
+            lo = lo > 0 ? lo / 2 : lo;
+            hi = hi < 0 ? hi / 2 : hi;
+        }
+        else {
+            lo -= 1;
+            hi += 1;
+        }
+    }
+    const span = hi - lo;
+    if (!Number.isFinite(span))
+        return { lo, hi, ticks: safeDomainTicks(lo, hi, count) };
+    const step = niceStep(span, count);
+    if (!Number.isFinite(step) || step <= 0) {
+        return { lo, hi, ticks: safeDomainTicks(lo, hi, count) };
+    }
+    const roundedLo = Math.floor(lo / step) * step;
+    const roundedHi = Math.ceil(hi / step) * step;
+    if (Number.isFinite(roundedLo))
+        lo = roundedLo;
+    if (Number.isFinite(roundedHi))
+        hi = roundedHi;
+    const slots = Math.floor((hi - lo) / step);
+    if (!Number.isFinite(slots) || slots < 0 || slots > 100) {
+        return { lo, hi, ticks: safeDomainTicks(lo, hi, count) };
     }
-    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);
+    for (let index = 0; index <= slots; index++) {
+        const value = lo + index * step;
+        if (Number.isFinite(value))
+            ticks.push(value);
+    }
+    if (ticks.at(-1) !== hi)
+        ticks.push(hi);
     return { lo, hi, ticks };
 }
 /**
@@ -118,15 +174,18 @@ function niceDomain(dataLo, dataHi, beginAtZero, count) {
  * @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"). Carries `data-selected` when its category index is in `selectedIndex`.
+ * @csspart bar - Each bar rect (type="bar"). Carries `data-selected` and `aria-pressed="true"`
+ *   when its category index is in `selectedIndex`.
  * @csspart line - Each series' stroked line path (type="line").
- * @csspart point - Each series' per-point hit target (type="line").
+ * @csspart point - Each series' per-point keyboard target (type="line"). Carries
+ *   `data-selected` and explicit `aria-pressed` state.
  * @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 legend-text - Extra per-item text after the series label, rendered only when `legendText` is set.
  * @csspart live-region - The current mark announcement for keyboard users.
- * @csspart data-list - A visually hidden list of all plotted data points.
+ * @csspart data-list - A visually hidden list of all plotted data points (single-series only).
+ * @csspart data-table - A visually hidden category×series data table, rendered instead of `data-list` when there is more than one dataset so a screen-reader user hears series grouping rather than one flattened N×M sequence.
  * @cssprop [--lr-lite-chart-selected-outline-color=var(--lr-color-brand)] - Stroke for a bar/point whose category index is in `selectedIndex`.
  */
 export class LyraLiteChart extends LyraElement {
@@ -168,19 +227,51 @@ export class LyraLiteChart extends LyraElement {
         /** 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;
-        /** Category indexes to mark `data-selected` on every bar/segment at that index, across every
+        /** Category indexes to mark `data-selected` and `aria-pressed="true"` on every bar/point at
+         *  that index, across every
          *  dataset -- e.g. to highlight a whole selected week's column in a stacked chart. Empty (the
-         *  default) reproduces today's exact output: no bar carries `data-selected`. A consumer's own
-         *  `::part(bar)[data-selected]` (or `[data-selected]` inside the shadow root via a documented
-         *  CSS custom property) rule can then style the highlight -- this component takes no opinion on
-         *  what the highlight looks like, only which bars it applies to. */
+         *  default) reproduces today's exact output: no mark carries `data-selected`. Style the highlight
+         *  via the `--lr-lite-chart-selected-outline-color` custom property -- selectors such as
+         *  `::part(bar)[data-selected]` and `::part(point)[data-selected]` are invalid CSS (Shadow Parts
+         *  forbids an attribute selector after `::part()`), so the outline is
+         *  painted inside the shadow root and exposed through that token. This component takes no opinion
+         *  on what the highlight looks like, only which marks it applies to. */
         this.selectedIndex = [];
         this.plotWidth = 0;
         this.plotHeight = 0;
         /** One roving tab stop across all bar/point marks. */
         this.activeMarkIndex = 0;
+        this.refocusMarkAfterUpdate = false;
+        this.refocusChartAfterUpdate = false;
     }
     static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    /**
+     * Appends one streamed category to every series and optionally keeps only the newest `maxPoints`
+     * categories. This is a controlled convenience method: it replaces `labels`/`datasets` with new
+     * arrays, so a host can listen for the property update or continue treating the chart as a normal
+     * controlled component. Missing series values become `null` rather than shifting alignment.
+     */
+    appendData(label, values, maxPoints = 0) {
+        const limit = Math.max(0, finiteCount(maxPoints, 0));
+        const labels = [...this.labels, label];
+        const datasets = this.datasets.map((series, index) => ({
+            ...series,
+            data: [...series.data, values[index] ?? null],
+        }));
+        this.labels = limit > 0 ? labels.slice(-limit) : labels;
+        this.datasets = limit > 0 ? datasets.map((series) => ({ ...series, data: series.data.slice(-limit) })) : datasets;
+    }
+    /** Returns a spreadsheet-safe CSV snapshot of the visible labels and series values. */
+    exportData(format) {
+        if (format === 'svg') {
+            if (!this.svgEl || typeof XMLSerializer === 'undefined')
+                return '';
+            return new XMLSerializer().serializeToString(this.svgEl);
+        }
+        const header = ['label', ...this.datasets.map((series) => series.label)].map(escapeCsvField).join(',');
+        const rows = this.labels.map((label, index) => [label, ...this.datasets.map((series) => series.data[index] ?? '')].map(escapeCsvField).join(','));
+        return [header, ...rows].join('\r\n');
+    }
     connectedCallback() {
         super.connectedCallback();
         this.resizeObserver = new ResizeObserver((entries) => {
@@ -224,10 +315,43 @@ export class LyraLiteChart extends LyraElement {
         if (this.svgEl)
             this.resizeObserver?.observe(this.svgEl);
     }
+    willUpdate(changed) {
+        const marksChanged = ['type', 'labels', 'datasets', 'skipZero'].some((name) => changed.has(name));
+        if (!marksChanged)
+            return;
+        const active = this.shadowRoot?.activeElement ?? null;
+        const hadFocusedMark = active?.matches('[part="bar"], [part="point"]') ?? false;
+        const priorPosition = Number(active?.getAttribute('data-mark-index') ?? this.activeMarkIndex);
+        const datasetAttribute = active?.getAttribute('data-dataset-index');
+        const indexAttribute = active?.getAttribute('data-index');
+        const datasetIndex = Number(datasetAttribute);
+        const index = Number(indexAttribute);
+        const marks = this.interactiveMarks();
+        const sameIdentity = datasetAttribute !== null && datasetAttribute !== undefined &&
+            indexAttribute !== null && indexAttribute !== undefined
+            ? marks.findIndex((mark) => mark.datasetIndex === datasetIndex && mark.index === index)
+            : -1;
+        this.activeMarkIndex = marks.length
+            ? sameIdentity >= 0
+                ? sameIdentity
+                : Math.min(Math.max(priorPosition, 0), marks.length - 1)
+            : 0;
+        this.refocusMarkAfterUpdate = hadFocusedMark && marks.length > 0;
+        this.refocusChartAfterUpdate = hadFocusedMark && marks.length === 0;
+    }
     updated(changed) {
         if (changed.has('height')) {
             this.style.setProperty('--lr-chart-height', this.height);
         }
+        if (this.refocusMarkAfterUpdate) {
+            this.refocusMarkAfterUpdate = false;
+            const marks = this.renderRoot.querySelectorAll('[part="bar"], [part="point"]');
+            marks[this.normalizedMarkIndex()]?.focus();
+        }
+        if (this.refocusChartAfterUpdate) {
+            this.refocusChartAfterUpdate = false;
+            this.svgEl?.focus();
+        }
     }
     colorFor(index, series) {
         return series.color ?? DEFAULT_PALETTE[index % DEFAULT_PALETTE.length]; // safe: modulo a non-empty constant palette
@@ -275,15 +399,18 @@ export class LyraLiteChart extends LyraElement {
         const series = this.datasets[mark.datasetIndex]?.label ?? this.localize('chartSeriesLabel');
         const custom = this.resolvePointText(mark.label, mark.value, mark.datasetIndex);
         if (custom) {
-            const position = this.localize('liteChartMarkPosition', undefined, { index: index + 1, total: marks.length });
-            return `${custom} ${position}`;
+            return this.localize('liteChartCustomMarkSummary', undefined, {
+                content: custom,
+                index: getNumberFormat(this.effectiveLocale).format(index + 1),
+                total: getNumberFormat(this.effectiveLocale).format(marks.length),
+            });
         }
         return this.localize('liteChartMarkSummary', undefined, {
             series,
             label: mark.label,
             value: getNumberFormat(this.effectiveLocale).format(mark.value),
-            index: index + 1,
-            total: marks.length,
+            index: getNumberFormat(this.effectiveLocale).format(index + 1),
+            total: getNumberFormat(this.effectiveLocale).format(marks.length),
         });
     }
     onMarkFocus(index) {
@@ -327,8 +454,7 @@ export class LyraLiteChart extends LyraElement {
             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;
+        return plotY + plotH - domainFraction(value, lo, hi) * plotH;
     }
     /** Normalizes `minBarHeight` to a non-negative pixel floor, or `undefined` when left unset -- a
      *  non-finite/negative explicit value falls back to `0` (a no-op floor, since a bar's natural
@@ -366,9 +492,9 @@ export class LyraLiteChart extends LyraElement {
                     if (v == null || !Number.isFinite(v))
                         continue;
                     if (v >= 0)
-                        pos += v;
+                        pos = saturatingAdd(pos, v);
                     else
-                        neg += v;
+                        neg = saturatingAdd(neg, v);
                 }
                 lo = Math.min(lo, neg);
                 hi = Math.max(hi, pos);
@@ -427,10 +553,9 @@ export class LyraLiteChart extends LyraElement {
         this.focusMark(next);
     }
     renderGrid(plotX, plotY, plotW, plotH, ticks, lo, hi) {
-        const span = hi - lo || 1;
         const rtl = this.effectiveDirection === 'rtl';
         return ticks.map((t) => {
-            const y = plotY + plotH - ((t - lo) / span) * plotH;
+            const y = plotY + plotH - domainFraction(t, lo, hi) * plotH;
             return svg `
         <line part="grid-line" x1=${plotX} y1=${y} x2=${plotX + plotW} y2=${y}></line>
         <text
@@ -439,7 +564,7 @@ export class LyraLiteChart extends LyraElement {
           y=${y}
           text-anchor="end"
           dominant-baseline="middle"
-        >${this.tickFormat ? this.tickFormat(t) : formatTick(t)}</text>
+        >${this.tickFormat ? this.tickFormat(t) : formatTick(t, this.effectiveLocale)}</text>
       `;
         });
     }
@@ -482,7 +607,7 @@ export class LyraLiteChart extends LyraElement {
         // regardless of `lo` (correct only when lo === 0, i.e. no negative values in the domain). Both
         // the plain-stacked and stackedSqrt branches below anchor their positive/negative stacks here,
         // matching renderGrid()'s own zero gridline position.
-        const zeroY = plotY + plotH - ((0 - lo) / (hi - lo || 1)) * plotH;
+        const zeroY = plotY + plotH - domainFraction(0, lo, hi) * plotH;
         // Available pixel room on each side of the zero line -- the positive stack's compressed height is
         // scaled against posAvailH (not the full plotH) so it stops at the zero line instead of bleeding
         // into the negative side's own region, and likewise for the negative stack against negAvailH.
@@ -501,9 +626,9 @@ export class LyraLiteChart extends LyraElement {
                     if (this.skipZero && v === 0)
                         continue;
                     if (v >= 0)
-                        pos += v;
+                        pos = saturatingAdd(pos, v);
                     else
-                        neg += v;
+                        neg = saturatingAdd(neg, v);
                 }
                 posTotals.push(pos);
                 negTotals.push(neg);
@@ -626,47 +751,76 @@ export class LyraLiteChart extends LyraElement {
                 }
                 const markIndex = markIndexes.get(`${di}:${i}`);
                 const selected = this.selectedIndex.includes(i);
+                const hitWidth = Math.max(24, w);
+                const hitHeight = Math.max(24, h);
+                const hitX = rectX - (hitWidth - w) / 2;
+                const hitY = y1 - (hitHeight - h) / 2;
+                const hitTarget = svg `
+          <rect
+            data-mark-hit-target="bar"
+            aria-hidden="true"
+            x=${hitX}
+            y=${hitY}
+            width=${hitWidth}
+            height=${hitHeight}
+            style="fill: transparent; pointer-events: all"
+            @click=${() => this.emitPoint(di, i)}
+          ></rect>
+        `;
                 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}
-            ?data-selected=${selected}
-            @click=${() => this.emitPoint(di, i)}
-            @focus=${() => this.onMarkFocus(markIndex)}
-            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
-          ><title>${titleText}</title></path>
+          <g class="mark-hit-group">
+            ${hitTarget}
+            <path
+              part="bar"
+              d=${this.roundedBarPath(rectX, y1, w, h)}
+              fill=${color}
+              tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+              role="button"
+              aria-label=${ariaLabel}
+              aria-pressed=${selected ? 'true' : 'false'}
+              ?data-selected=${selected}
+              data-mark-index=${markIndex}
+              data-dataset-index=${di}
+              data-index=${i}
+              @click=${() => this.emitPoint(di, i)}
+              @focus=${() => this.onMarkFocus(markIndex)}
+              @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+            ><title>${titleText}</title></path>
+          </g>
         `
                     : svg `
-          <rect
-            part="bar"
-            x=${rectX}
-            y=${y1}
-            width=${w}
-            height=${h}
-            fill=${color}
-            tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
-            role="button"
-            aria-label=${ariaLabel}
-            ?data-selected=${selected}
-            @click=${() => this.emitPoint(di, i)}
-            @focus=${() => this.onMarkFocus(markIndex)}
-            @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
-          ><title>${titleText}</title></rect>
+          <g class="mark-hit-group">
+            ${hitTarget}
+            <rect
+              part="bar"
+              x=${rectX}
+              y=${y1}
+              width=${w}
+              height=${h}
+              fill=${color}
+              tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+              role="button"
+              aria-label=${ariaLabel}
+              aria-pressed=${selected ? 'true' : 'false'}
+              ?data-selected=${selected}
+              data-mark-index=${markIndex}
+              data-dataset-index=${di}
+              data-index=${i}
+              @click=${() => this.emitPoint(di, i)}
+              @focus=${() => this.onMarkFocus(markIndex)}
+              @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+            ><title>${titleText}</title></rect>
+          </g>
         `);
             });
         }
         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;
+        const yFor = (v) => plotY + plotH - domainFraction(v, lo, hi) * plotH;
         const markIndexes = this.markIndexMap();
         const activeMarkIndex = this.normalizedMarkIndex();
         // Hoisted out of the per-point loop for the same reason as renderBars(): the whole SVG
@@ -699,20 +853,37 @@ export class LyraLiteChart extends LyraElement {
                 const ariaLabel = barText;
                 const titleText = barText;
                 const markIndex = markIndexes.get(`${di}:${i}`);
+                const selected = this.selectedIndex.includes(i);
                 return svg `
-          <circle
-            part="point"
-            cx=${xFor(i)}
-            cy=${yFor(v)}
-            r="4"
-            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></circle>
+          <g class="mark-hit-group">
+            <circle
+              data-mark-hit-target="point"
+              aria-hidden="true"
+              cx=${xFor(i)}
+              cy=${yFor(v)}
+              r="12"
+              style="fill: transparent; pointer-events: all"
+              @click=${() => this.emitPoint(di, i)}
+            ></circle>
+            <circle
+              part="point"
+              cx=${xFor(i)}
+              cy=${yFor(v)}
+              r="4"
+              fill=${color}
+              tabindex=${activeMarkIndex === markIndex ? '0' : '-1'}
+              role="button"
+              aria-label=${ariaLabel}
+              aria-pressed=${selected ? 'true' : 'false'}
+              ?data-selected=${selected}
+              data-mark-index=${markIndex}
+              data-dataset-index=${di}
+              data-index=${i}
+              @click=${() => this.emitPoint(di, i)}
+              @focus=${() => this.onMarkFocus(markIndex)}
+              @keydown=${(e) => this.onPointKeyDown(e, di, i, markIndex)}
+            ><title>${titleText}</title></circle>
+          </g>
         `;
             });
             return svg `<path part="line" d=${d.trim()} stroke=${color}></path>${dots}`;
@@ -727,26 +898,25 @@ export class LyraLiteChart extends LyraElement {
         // 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) {
+    /** Indexes retained by `maxLabels`, distributed across the complete domain so the sample
+     * immediately before the forced final endpoint can never bunch against it. `undefined` means
+     * every label renders, preserving the default and non-finite-value behavior. */
+    visibleLabelIndexes(n) {
         if (this.maxLabels == null)
-            return 1;
+            return undefined;
         // finiteCount() falls back to `n` itself for a non-finite maxLabels (NaN/Infinity, e.g. an
         // unparsable attribute) -- making the `n <= max` check below always true, i.e. reproducing "no
         // cap", the same behavior as maxLabels being unset entirely. An explicit *negative* (but
         // finite) value instead clamps to `0` (finiteCount's own floor, same convention as
         // `normalizeBucketCount()`'s handling of a negative bucket count elsewhere in this codebase),
-        // which still can't go negative or divide by zero below thanks to `Math.max(1, max - 1)`.
+        // while the documented first/last guarantee still keeps both endpoints.
         const max = finiteCount(this.maxLabels, n);
         if (n <= max)
-            return 1;
-        return Math.max(1, Math.ceil((n - 1) / Math.max(1, max - 1)));
+            return undefined;
+        const count = Math.min(n, Math.max(2, max));
+        if (count <= 1)
+            return new Set(n === 1 ? [0] : []);
+        return new Set(Array.from({ length: count }, (_, index) => Math.round((index * (n - 1)) / (count - 1))));
     }
     renderChart() {
         const n = this.labels.length;
@@ -789,18 +959,21 @@ export class LyraLiteChart extends LyraElement {
         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 visibleLabelIndexes = this.visibleLabelIndexes(n);
         const categoryLabels = this.labels.map((label, i) => {
-            if (i !== 0 && i !== n - 1 && i % step !== 0)
-                return nothing; // maxLabels decimation
+            if (visibleLabelIndexes && !visibleLabelIndexes.has(i))
+                return nothing;
             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>`;
+            return svg `<text part="axis-label" x=${x} y=${plotY + plotH + CATEGORY_LABEL_OFFSET} text-anchor="middle">${label}</text>`;
         });
+        const datasetLabels = this.datasets.map((dataset) => dataset.label);
         const chartLabel = this.getAttribute('aria-label') ||
             this.accessibleLabel ||
-            this.datasets.map((d) => d.label).join(', ') ||
+            (datasetLabels.length
+                ? getListFormat(this.effectiveLocale, { type: 'conjunction' }).format(datasetLabels)
+                : '') ||
             this.localize('chart');
         const marksForA11y = this.interactiveMarks();
         return html `
@@ -829,9 +1002,30 @@ export class LyraLiteChart extends LyraElement {
             : nothing}
         </svg>
         <lr-live-region part="live-region"></lr-live-region>
-        <ul part="data-list" class="sr-only" aria-label=${this.localize('chartData')}>
-          ${marksForA11y.map((_mark, index) => html `<li>${this.markAnnouncement(index, marksForA11y)}</li>`)}
-        </ul>
+        ${this.datasets.length > 1
+            ? html `<table part="data-table" class="sr-only">
+              <caption>${this.localize('chartData')}</caption>
+              <thead>
+                <tr>
+                  <th scope="col">${this.localize('chartCategory')}</th>
+                  ${this.datasets.map((series) => html `<th scope="col">${series.label}</th>`)}
+                </tr>
+              </thead>
+              <tbody>
+                ${this.labels.map((label, index) => html `<tr>
+                    <th scope="row">${label}</th>
+                    ${this.datasets.map((series) => {
+                const value = series.data[index];
+                return html `<td>${value == null || !Number.isFinite(value)
+                    ? ''
+                    : getNumberFormat(this.effectiveLocale).format(value)}</td>`;
+            })}
+                  </tr>`)}
+              </tbody>
+            </table>`
+            : html `<ul part="data-list" class="sr-only" aria-label=${this.localize('chartData')}>
+              ${marksForA11y.map((_mark, index) => html `<li>${this.markAnnouncement(index, marksForA11y)}</li>`)}
+            </ul>`}
         ${this.legend
             ? html `<div part="legend">
               ${this.datasets.map((s, i) => html `
@@ -870,7 +1064,7 @@ __decorate([
     property({ attribute: 'y-label' })
 ], LyraLiteChart.prototype, "yLabel", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'begin-at-zero' })
+    property({ type: Boolean, attribute: 'begin-at-zero', converter: trueDefaultBooleanConverter })
 ], LyraLiteChart.prototype, "beginAtZero", void 0);
 __decorate([
     property({ type: Boolean })
@@ -938,9 +1132,9 @@ __decorate([
 __decorate([
     query('lr-live-region')
 ], LyraLiteChart.prototype, "liveRegion", void 0);
-function formatTick(v) {
+function formatTick(v, locale) {
     // 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();
+    return getNumberFormat(locale, { maximumFractionDigits: 6 }).format(Number(v.toFixed(6)));
 }
 //# sourceMappingURL=lite-chart.class.js.map