@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/sparkline/root/sparkline-root.d.ts

@@ -1,5 +1,5 @@
-import { type Curve, HelixElement, SourceController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { ChartPointerController, type Curve, HelixElement, SourceController } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A small chart with no axes that shows the shape of a series beside its number.
  *
@@ -13,8 +13,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * are set.
  *
  * Without a `label` the sparkline is decorative and `aria-hidden`, for example
- * beside a stat that already says "Sessions, 1,102". With a `label` it is an
- * image named by that sentence.
+ * beside a stat that already says "Sessions, 1,102". With a `label` it is
+ * named by that sentence and read by key, as every chart is: the drawing takes
+ * focus, the arrow keys walk the readings, Home and End go to the first and
+ * the last, Escape puts the reading away, and the `live` part says each
+ * reading with where it stands, such as "Mon: 12 (3 of 7)".
+ *
+ * A pointer resting on the drawing shows the reading under it: the `cursor`
+ * part marks it and the `readout` part writes it. `marks` adds a mark on the
+ * highest and the lowest reading. A blank cell in a `for` table is a gap in
+ * the line.
  *
  * Place it beside a `Stat`, because a change beside a figure is a second fact,
  * as `Stat`'s own spec says. `Trend` is composed the same way.
@@ -32,8 +40,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart area - The region between the line and the bottom of its range.
  * @csspart bar - One column, drawn when `plot="bar"`.
+ * @csspart cursor - The mark on the reading a pointer or a key rests on, rendered only while there is one. Placed with `inset-inline-start` and `inset-block-start`.
+ * @csspart high - The mark on the highest reading, under `marks="high"`. Placed as `cursor` is.
  * @csspart line - The line's path.
- * @csspart svg - The drawing.
+ * @csspart live - A polite region that says the reading a key moved to, rendered only with a `label`. Hide it visually.
+ * @csspart low - The mark on the lowest reading, under `marks="low"`. Placed as `cursor` is.
+ * @csspart readout - The reading a pointer or a key rests on, as the table or `values` writes it, rendered only while there is one. Placed as `cursor` is.
+ * @csspart svg - The drawing, which takes focus to be read by key where there is a `label`.
  * @csspart terminus - The mark on the last value.
  * @csspart wash-end - The far stop of the area's gradient.
  * @csspart wash-start - The stop of the area's gradient that meets the line.
@@ -91,6 +104,22 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * than announced without a name.
      */
     label: string;
+    /**
+     * The locale the readout's numbers and positions are written in, such as
+     * `de` for `1.240`.
+     *
+     * Absent uses the runtime's own. A table's cells are shown as the table
+     * writes them, whatever this says.
+     */
+    locale: string;
+    /**
+     * Which readings take a mark of their own: `high`, `low`, or both,
+     * separated by spaces.
+     *
+     * Absent marks none, and the drawing is what it was. Each mark is a part,
+     * placed at its reading, for a stylesheet to draw.
+     */
+    marks: string;
     /**
      * What the readings are drawn as.
      *
@@ -121,6 +150,15 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * is markup, the same reason `curve` lives here.
      */
     plot?: 'area' | 'bar' | 'line';
+    /**
+     * Where a reading the keys moved to stands among the readings, said after
+     * it. `{position}` and `{count}` are replaced with the numbers, written in
+     * `locale`.
+     *
+     * Set it to the words of the page's language, such as `{position} von
+     * {count}`, or to nothing to say no position.
+     */
+    positionLabel: string;
     /**
      * The numbers, separated by whitespace or by commas.
      *
@@ -131,10 +169,43 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      */
     values: string | readonly number[];
     protected readonly source: SourceController;
+    /**
+     * Finds the reading a pointer or a key rests on, as it does for every
+     * chart, so a sparkline is read the way they are.
+     */
+    readonly pointer: ChartPointerController;
     protected willUpdate(changed: PropertyValues<this>): void;
-    /** The series to draw: the table if there is one, the attribute otherwise. */
-    private points;
+    /**
+     * The series to draw, and how many readings it has room for: the table's
+     * first series over the table's rows if there is one, the attribute
+     * otherwise.
+     *
+     * Over the rows, so a blank cell is a reading with nothing in it and the
+     * line breaks there, as `LineChart` draws one. Joined across, the line
+     * claimed a value the table does not have.
+     */
+    private drawn;
+    /** How many readings there are, which the pointer and the keys walk. */
+    get readings(): number;
+    /**
+     * The reading at a place, in words: the table's cell as it is written, or
+     * the number in `locale`, after the row's name where a table gave one.
+     */
+    private reading;
     protected render(): TemplateResult;
+    /** The marks `marks` asks for, on the highest and the lowest reading. */
+    protected renderMarks(slots: (number | undefined)[], at: (index: number, value: number) => string): TemplateResult | typeof nothing;
+    /**
+     * The reading a pointer or a key rests on: a mark on it and its words
+     * beside it. Hidden from a screen reader, which hears the `live` part.
+     */
+    protected renderReading(slots: (number | undefined)[], at: (index: number, value: number) => string): TemplateResult | typeof nothing;
+    /**
+     * The polite region that says a reading the keys moved to, in words and
+     * with where it stands. Rendered from the first drawing and empty until a
+     * key moves the reading, so it is heard when its words change.
+     */
+    protected renderLive(slots: (number | undefined)[]): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/sparkline/root/sparkline-root.js

@@ -4,62 +4,117 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, extent, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, ChartPointerController, customElement, extent, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
+import { extremesOf, readingWords } from '../readings.js';
 const STRIP_HEIGHT = 32;
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     constructor() {
         super(...arguments);
         this.for = '';
         this.label = '';
+        this.locale = '';
+        this.marks = '';
+        this.positionLabel = '{position} of {count}';
         this.values = '';
         this.source = new SourceController(this);
+        this.pointer = new ChartPointerController(this);
     }
     willUpdate(changed) {
         if (changed.has('for')) {
             this.source.watch();
         }
     }
-    points() {
-        const series = this.source.series;
-        return series.length > 0
-            ? (series[0]?.points.map((point) => point.value) ?? [])
-            : writtenNumbers(this.values);
+    drawn() {
+        const read = this.source.series;
+        if (read.length > 0) {
+            return {
+                count: this.source.rows.length,
+                series: read[0] ?? { name: '', points: [] },
+            };
+        }
+        const values = writtenNumbers(this.values);
+        return {
+            count: values.length,
+            series: { name: '', points: values.map((value, at) => ({ at, label: '', value })) },
+        };
+    }
+    get readings() {
+        return this.drawn().count;
+    }
+    reading(at, value) {
+        const rows = this.source.rows;
+        const row = rows[at];
+        if (!row) {
+            return { label: '', text: value === undefined ? '' : formatNumbers(this.locale)(value) };
+        }
+        const column = row.cells.findIndex((_, index) => rows.some((one) => one.cells[index]?.value !== undefined));
+        return { label: row.label, text: row.cells[column]?.text ?? '' };
     }
     render() {
-        const points = this.points();
-        const x = linear([0, Math.max(points.length - 1, 1)], [0, PLOT_WIDTH]);
+        const { count, series } = this.drawn();
+        const slots = Array.from({ length: count }, () => undefined);
+        for (const point of series.points) {
+            if (point.at >= 0 && point.at < count) {
+                slots[point.at] = point.value;
+            }
+        }
+        const points = slots.filter((value) => value !== undefined);
+        const x = linear([0, Math.max(count - 1, 1)], [0, PLOT_WIDTH]);
         const [low, high] = extent(points.length > 0 ? points : [0]);
         const y = this.plot === 'bar'
             ? linear([Math.min(0, low), Math.max(0, high)], [STRIP_HEIGHT, 0])
             : linear([low, high], [STRIP_HEIGHT, 0]);
-        const coordinates = points.map((value, index) => [x(index), y(value)]);
-        const path = this.plot === 'bar' ? '' : linePath(coordinates, this.curve ?? 'smooth');
+        const runs = this.plot === 'bar'
+            ? []
+            : unbroken(series)
+                .map((run) => run.map((point) => [x(point.at), y(point.value)]))
+                .map((run) => ({ path: linePath(run, this.curve ?? 'smooth'), run }))
+                .filter((one) => one.path !== '');
+        const path = runs.map((one) => one.path).join('');
         const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
-            ? `${path}L${PLOT_WIDTH},${STRIP_HEIGHT}L0,${STRIP_HEIGHT}Z`
+            ? runs
+                .map((one) => {
+                const first = one.run[0];
+                const last = one.run.at(-1);
+                return `${one.path}L${last[0]},${STRIP_HEIGHT}L${first[0]},${STRIP_HEIGHT}Z`;
+            })
+                .join('')
             : '';
-        const slot = PLOT_WIDTH / Math.max(points.length, 1);
+        const slot = PLOT_WIDTH / Math.max(count, 1);
         const floor = y(0);
         const bars = this.plot === 'bar'
-            ? points.map((value, index) => ({
-                height: Math.abs(floor - y(value)),
-                width: slot * 0.72,
-                x: index * slot + slot * 0.14,
-                y: Math.min(floor, y(value)),
-            }))
+            ? slots.flatMap((value, index) => value === undefined
+                ? []
+                : [
+                    {
+                        height: Math.abs(floor - y(value)),
+                        width: slot * 0.72,
+                        x: index * slot + slot * 0.14,
+                        y: Math.min(floor, y(value)),
+                    },
+                ])
             : [];
+        const lastAt = slots.findLastIndex((value) => value !== undefined);
         const end = points.length < 2
             ? undefined
-            : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / STRIP_HEIGHT) * 100}%`;
+            : `--chart-terminus-x: ${(x(lastAt) / PLOT_WIDTH) * 100}%; --chart-terminus-y: ${(y(slots[lastAt]) / STRIP_HEIGHT) * 100}%`;
+        const at = (index, value) => {
+            const across = this.plot === 'bar' ? index * slot + slot / 2 : x(index);
+            return `inset-inline-start: ${(across / PLOT_WIDTH) * 100}%; inset-block-start: ${(y(value) / STRIP_HEIGHT) * 100}%`;
+        };
+        const named = this.label !== '';
         return html `<svg
-        aria-hidden=${this.label === '' ? 'true' : nothing}
-        aria-label=${this.label === '' ? nothing : this.label}
+        aria-hidden=${named ? nothing : 'true'}
+        aria-label=${named ? this.label : nothing}
         data-mirror
+        id=${CHART_PLOT}
         part="svg"
         preserveAspectRatio="none"
-        role=${this.label === '' ? nothing : 'img'}
+        role=${named ? (points.length > 0 ? 'application' : 'img') : nothing}
         style=${end ?? nothing}
+        tabindex=${named && points.length > 0 ? '0' : nothing}
         viewBox="0 0 ${PLOT_WIDTH} ${STRIP_HEIGHT}"
       >
         ${svg `<defs>
@@ -80,7 +135,38 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
       </svg>
       ${points.length < 2 || this.plot === 'bar'
             ? nothing
-            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}`;
+            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}${this.renderMarks(slots, at)}${this.renderReading(slots, at)}${named && count > 0 ? this.renderLive(slots) : nothing}`;
+    }
+    renderMarks(slots, at) {
+        const asked = writtenList(this.marks);
+        if (asked.length === 0) {
+            return nothing;
+        }
+        const found = extremesOf(slots);
+        const place = (index, name) => asked.includes(name) && index !== undefined ? at(index, slots[index]) : undefined;
+        const high = place(found.high, 'high');
+        const low = place(found.low, 'low');
+        return html `${high === undefined ? nothing : html `<span aria-hidden="true" part="high" style=${high}></span>`}${low === undefined ? nothing : html `<span aria-hidden="true" part="low" style=${low}></span>`}`;
+    }
+    renderReading(slots, at) {
+        const index = this.pointer.at;
+        const value = slots[index];
+        if (index < 0 || value === undefined) {
+            return nothing;
+        }
+        const { label, text } = this.reading(index, value);
+        const place = at(index, value);
+        return html `<span aria-hidden="true" part="cursor" style=${place}></span
+      ><span aria-hidden="true" part="readout" style=${place}
+        >${readingWords(label, text, '')}</span
+      >`;
+    }
+    renderLive(slots) {
+        const index = this.pointer.at;
+        const said = this.pointer.keyed && index >= 0 ? this.reading(index, slots[index]) : undefined;
+        return html `<span aria-live="polite" part="live" role="status"
+      >${said ? readingWords(said.label, said.text, this.pointer.position) : ''}</span
+    >`;
     }
 };
 __decorate([
@@ -92,9 +178,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "locale", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "marks", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSparkline.prototype, "plot", void 0);
+__decorate([
+    property({ attribute: 'position-label' })
+], HelixHeadlessSparkline.prototype, "positionLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "values", void 0);

package/dist/speed-dial/root/speed-dial-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { anchorElement, customElement, drawIcon, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, drawIcon, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, typeaheadBy, } from '@fusion.dev/helix-core';
 import { plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -17,7 +17,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.keys = new KeyboardNavigationController(this, {
             items: () => (this.open ? this.items : []),
             selects: () => false,
-            typeahead: (item) => slottedWords(item, ['']),
+            typeahead: typeaheadBy((item) => slottedWords(item, [''])),
         });
         this.focusOnOpen = false;
         this.panel = new PopoverController(this, {

package/dist/splitter/root/splitter-root.d.ts

@@ -264,8 +264,8 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * divider, because the child fills the pane and the pane spans this splitter
      * end to end on the axis the divider runs.
      *
-     * Not `@state`, because the array is mutated in place. `cross` and `uncross`
-     * request the update themselves.
+     * Not `@state`, because the array is mutated in place. The channel's `cross`
+     * and `uncross` request the update themselves.
      */
     private crossings;
     /** The splitter this one is nested in, once it has found it. */
@@ -499,17 +499,12 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     private readonly handleCornerDoubleClick;
     /**
-     * @internal Records that a nested splitter crosses this one at `at` percent
-     * along it.
-     *
-     * Public because it is the whole of the channel between the two, and it runs
-     * one way: the child tells the parent where it is, and the parent draws the
-     * corner and drives them both. Nothing is read back, so neither has to know
-     * anything about the other's state.
+     * Opens the channel a nested splitter reports through: where it crosses this
+     * one, and when it has left. It runs one way, the child telling the parent
+     * where it is and the parent drawing the corner and driving them both, so
+     * nothing is read back. Kept off the element, so it is no API of it.
      */
-    cross(by: HelixHeadlessSplitter, at: number): void;
-    /** @internal Forgets a nested splitter that has left the tree. See `cross`. */
-    uncross(by: HelixHeadlessSplitter): void;
+    constructor();
     /**
      * Announces this splitter to the one it is nested in, if they cross.
      *