@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -179,6 +179,17 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get position(): number;
     set position(next: number);
+    /**
+     * Where a dragged divider snaps, comma separated, as Web Awesome's split
+     * panel does: a bare number is a percentage and a length such as `240px` is
+     * measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
+     * The arrow keys move by `step` and do not snap.
+     */
+    snap: string;
+    /**
+     * How close a drag has to come to a snap point to land on it, in pixels.
+     */
+    snapThreshold: number;
     /**
      * How far one arrow key press moves the divider, as a percentage.
      */
@@ -253,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. */
@@ -434,6 +445,8 @@ export declare class HelixHeadlessSplitter extends HelixElement {
     private settle;
     private readonly handlePointerDown;
     private readonly handlePointerMove;
+    /** Where a drag at `position` lands once `snap` has had its say. */
+    private snapped;
     private readonly handlePointerUp;
     /**
      * The keys a separator answers.
@@ -486,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.
      *