@aceshooting/lyra-ui 2.0.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
@@ -86,6 +88,22 @@ function niceDomain(dataLo, dataHi, beginAtZero, count) {
  * 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:
@@ -101,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() {
@@ -124,12 +144,31 @@ export class LyraLiteChart extends LyraElement {
         /** 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) => {
@@ -188,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;
@@ -226,38 +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,
-            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 !== ' ')
+    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;
@@ -277,11 +408,13 @@ export class LyraLiteChart extends LyraElement {
      * 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 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++) {
             // `this.barX`, when set, overrides just the category's own x-origin
@@ -296,6 +429,8 @@ export class LyraLiteChart extends LyraElement {
                 const v = s.data[i];
                 if (v == null || !Number.isFinite(v))
                     return;
+                if (this.skipZero && v === 0)
+                    return;
                 const color = this.colorFor(di, s);
                 let rectX;
                 let barValLo;
@@ -319,23 +454,44 @@ export class LyraLiteChart extends LyraElement {
                     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=${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>
         `);
             });
         }
@@ -346,6 +502,8 @@ 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);
             let d = '';
@@ -363,6 +521,10 @@ export class LyraLiteChart extends LyraElement {
                 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"
@@ -370,27 +532,26 @@ 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.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
@@ -408,7 +569,7 @@ export class LyraLiteChart extends LyraElement {
     renderChart() {
         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;
@@ -434,7 +595,7 @@ export class LyraLiteChart extends LyraElement {
             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, plotH, slot, lo, hi)
             : this.renderLines(plotX, plotY, plotW, plotH, lo, hi);
@@ -448,6 +609,8 @@ export class LyraLiteChart extends LyraElement {
             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
@@ -455,6 +618,7 @@ export class LyraLiteChart extends LyraElement {
           style=${this.layout === 'scroll' ? `inline-size: ${w}px` : nothing}
           role="group"
           aria-label=${chartLabel}
+          tabindex=${marksForA11y.length ? '-1' : '0'}
         >
           ${grid}
           ${categoryLabels}
@@ -466,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 `
@@ -522,6 +692,27 @@ __decorate([
 __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);
@@ -531,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/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);

package/dist/components/chart/polar-area-chart.js

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-polar-area-chart>` — `<lyra-chart>` with `type` locked to `"polarArea"`.
@@ -7,21 +7,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraPolarAreaChart 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(LyraPolarAreaChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'polarArea';
-    },
-    set(_v) {
-        /* locked to 'polarArea'; direct writes are ignored */
-    },
-});
+lockChartType(LyraPolarAreaChart, 'polarArea');
 defineElement('polar-area-chart', LyraPolarAreaChart);

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

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-radar-chart>` — `<lyra-chart>` with `type` locked to `"radar"`.
@@ -7,21 +7,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraRadarChart 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(LyraRadarChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'radar';
-    },
-    set(_v) {
-        /* locked to 'radar'; direct writes are ignored */
-    },
-});
+lockChartType(LyraRadarChart, 'radar');
 defineElement('radar-chart', LyraRadarChart);

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

@@ -1,4 +1,4 @@
-import { LyraChart } from './chart.js';
+import { LyraChart, lockChartType } from './chart.js';
 import { defineElement } from '../../internal/prefix.js';
 /**
  * `<lyra-scatter-chart>` — `<lyra-chart>` with `type` locked to `"scatter"`. Feed
@@ -8,21 +8,5 @@ import { defineElement } from '../../internal/prefix.js';
  */
 export class LyraScatterChart 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(LyraScatterChart.prototype, 'type', {
-    configurable: true,
-    enumerable: true,
-    get() {
-        return 'scatter';
-    },
-    set(_v) {
-        /* locked to 'scatter'; direct writes are ignored */
-    },
-});
+lockChartType(LyraScatterChart, 'scatter');
 defineElement('scatter-chart', LyraScatterChart);

package/dist/components/chat-composer/chat-composer.d.ts

@@ -14,7 +14,12 @@ declare const LyraChatComposer_base: typeof LyraElement & (new (...args: any[])
  * border at runtime (`resizeTextarea()`) rather than assuming a fixed
  * px-per-row constant, so it stays correct under a consumer's own font-size/
  * line-height overrides. It grows between `min-rows` and `max-rows`, then
- * switches to internal scrolling.
+ * switches to internal scrolling. A `ResizeObserver` on the textarea itself
+ * re-runs the same fit whenever its *width* changes (a responsive
+ * breakpoint, a sidebar toggling, a window resize, an orientation change)
+ * even though `value`/`min-rows`/`max-rows` never did -- a narrower box
+ * wraps the same text across more lines, so the previously-fitted height
+ * would otherwise go stale and clip content with no scrollbar to reveal it.
  *
  * Enter-to-send (only active while `submit-on-enter` is true, the default):
  * plain Enter submits and is prevented from inserting a newline; Shift+Enter
@@ -60,10 +65,16 @@ export declare class LyraChatComposer extends LyraChatComposer_base {
     private hasLeadingSlot;
     private hasChipsSlot;
     private hasTrailingSlot;
+    private touched;
     private textareaEl?;
+    private textareaResizeObserver?;
+    private textareaResizeRaf?;
+    constructor();
     protected willUpdate(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    formResetCallback(): void;
     private hasSlotted;
     /**
      * Grows/shrinks the textarea between `min-rows` and `max-rows`, reading
@@ -74,6 +85,35 @@ export declare class LyraChatComposer extends LyraChatComposer_base {
      * scrolling (`overflow-y: auto`).
      */
     private resizeTextarea;
+    /**
+     * Re-fits the textarea whenever its own box *width* changes, independent
+     * of any `value`/`min-rows`/`max-rows` update -- `updated()` above only
+     * reacts to those, so a pure layout change (a responsive breakpoint, a
+     * sidebar collapsing/expanding, a window resize, an orientation change)
+     * would otherwise leave the height pinned at whatever it last was, even
+     * though the same text now wraps across a different number of lines.
+     * Mirrors split.ts's `collapseResizeObserver`/virtual-list.ts's
+     * `containerResizeObserver`/lite-chart.ts's `resizeObserver`.
+     *
+     * Only reacts to an actual inline-size change rather than calling
+     * `resizeTextarea()` unconditionally on every callback: `resizeTextarea()`
+     * itself sets `ta.style.height`, a *block*-size change on the very element
+     * being observed, which would otherwise re-trigger this same observer
+     * every tick. Diffing against the last-seen width (same technique as
+     * split.ts keying its collapse state off `contentBoxSize[0].inlineSize`)
+     * keeps a same-width, height-only callback from doing anything.
+     *
+     * The actual recompute is deferred one animation frame rather than run
+     * synchronously inside the callback: `ResizeObserver`'s spec re-delivers,
+     * within the same notification pass, to any observed element resized by
+     * its own callback -- mutating `ta.style.height` synchronously here would
+     * do exactly that to the very box just observed, and the browser reports
+     * it as "ResizeObserver loop completed with undelivered notifications"
+     * (a real, user-visible console error, not just noise). Deferring the
+     * mutation to the next frame -- outside that notification pass -- avoids
+     * ever resizing the observed element from inside its own callback.
+     */
+    private armTextareaResizeObserver;
     private onTextareaInput;
     private onTextareaKeyDown;
     private onActionClick;
@@ -81,6 +121,7 @@ export declare class LyraChatComposer extends LyraChatComposer_base {
     private onLeadingSlotChange;
     private onChipsSlotChange;
     private onTrailingSlotChange;
+    private onTextareaBlur;
     private renderActionButton;
     render(): TemplateResult;
 }