@fusion.dev/helix-headless 0.145.0 → 0.147.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, type Series, 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,22 @@ 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 named sparkline describes itself.** Beside its name, a screen reader
+ * hears what the readings come to, the first and the last, the highest and
+ * the lowest, in `overview-label`: "From 12 to 20, highest 30, lowest 8". An
+ * `aria-label` on the element names it as `label` does.
+ *
+ * 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, and `range` draws a band between two values,
+ * such as a normal range. A blank cell in a `for` table is a gap in the line,
+ * and a reading alone between two blanks is a `lone` mark.
  *
  * 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 +46,16 @@ 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 lone - The mark on a reading no line reaches, with a blank or an end on each side. Placed as `cursor` is.
+ * @csspart low - The mark on the lowest reading, under `marks="low"`. Placed as `cursor` is.
+ * @csspart overview - What the readings come to, in `overview-label`, which describes the drawing. Rendered `hidden` with a name, since it is read through the description and not shown.
+ * @csspart range - The band between the two values of `range`, drawn behind the line.
+ * @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 +113,31 @@ 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 come to, said after the name: `{first}` and `{last}`
+     * for the first and the last reading, `{high}` and `{low}` for the highest
+     * and the lowest, each written as the readout writes it.
+     *
+     * Set it to the words of the page's language, or to nothing to say no
+     * more than the name. Said only where the sparkline is named.
+     */
+    overviewLabel: string;
     /**
      * What the readings are drawn as.
      *
@@ -121,6 +168,23 @@ 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;
+    /**
+     * Two values a band is drawn between, behind the line, separated by a
+     * space: `range="60 100"` marks a normal range.
+     *
+     * The scale stretches to hold the band where the readings do not reach it.
+     * Absent draws none.
+     */
+    range: string;
     /**
      * The numbers, separated by whitespace or by commas.
      *
@@ -131,10 +195,60 @@ 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;
+    /**
+     * Hears an `aria-label` written on the sparkline, which no property mirrors,
+     * because it names the drawing as `label` does, as on every chart.
+     */
+    static get observedAttributes(): string[];
+    /** Called by the browser when an observed attribute changes; a new `aria-label` renames the drawing. */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** The drawing's name: an `aria-label` written on the sparkline, then `label`. */
+    get named(): string;
+    /** The two values of `range`, lower first, or none. */
+    private get band();
     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;
+    /**
+     * A mark on each reading with a blank on either side, which no line can
+     * reach, so a line and an area show it as `LineChart` does. Not on a bar
+     * plot, whose column already shows it.
+     */
+    protected renderLone(series: Series | undefined, at: (index: number, value: number) => string): TemplateResult | typeof nothing;
+    /** 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,130 @@ 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, extremesOf, 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 { areaPath, overviewWords, readingWords, slotsOf } 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.overviewLabel = 'From {first} to {last}, highest {high}, lowest {low}';
+        this.positionLabel = '{position} of {count}';
+        this.range = '';
         this.values = '';
         this.source = new SourceController(this);
+        this.pointer = new ChartPointerController(this);
+    }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
+    get named() {
+        return this.getAttribute?.('aria-label') || this.label;
+    }
+    get band() {
+        const [one, two] = writtenNumbers(this.range);
+        return one === undefined || two === undefined
+            ? undefined
+            : [Math.min(one, two), Math.max(one, two)];
     }
     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 [low, high] = extent(points.length > 0 ? points : [0]);
+        const { count, series } = this.drawn();
+        const slots = slotsOf(series.points, count);
+        const points = slots.filter((value) => value !== undefined);
+        const band = this.band;
+        const x = linear([0, Math.max(count - 1, 1)], [0, PLOT_WIDTH]);
+        const [low, high] = extent(points.length > 0 ? [...points, ...(band ?? [])] : [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 area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
-            ? `${path}L${PLOT_WIDTH},${STRIP_HEIGHT}L0,${STRIP_HEIGHT}Z`
-            : '';
-        const slot = PLOT_WIDTH / Math.max(points.length, 1);
+        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 !== '' ? areaPath(runs, STRIP_HEIGHT) : '';
+        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 name = this.named;
+        const named = name !== '';
+        const overview = named
+            ? overviewWords(this.overviewLabel, slots, (index) => this.reading(index, slots[index]).text)
+            : '';
         return html `<svg
-        aria-hidden=${this.label === '' ? 'true' : nothing}
-        aria-label=${this.label === '' ? nothing : this.label}
+        aria-describedby=${overview === '' ? nothing : 'sparkline-overview'}
+        aria-hidden=${named ? nothing : 'true'}
+        aria-label=${named ? name : 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>
@@ -68,6 +136,15 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
               <stop offset="1" part="wash-end" />
             </linearGradient>
           </defs>`}
+        ${band === undefined
+            ? nothing
+            : svg `<rect
+                height=${Math.abs(y(band[0]) - y(band[1]))}
+                part="range"
+                width=${PLOT_WIDTH}
+                x="0"
+                y=${Math.min(y(band[0]), y(band[1]))}
+              />`}
         ${path === '' ? nothing : svg `<path d=${path} part="line" />`}
         ${area === '' ? nothing : svg `<path d=${area} part="area" />`}
         ${bars.map((bar) => svg `<rect
@@ -80,7 +157,49 @@ 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.renderLone(points.length < 2 ? undefined : series, at)}${this.renderMarks(slots, at)}${this.renderReading(slots, at)}${named && count > 0 ? this.renderLive(slots) : nothing}${overview === ''
+            ? nothing
+            : html `<span hidden id="sparkline-overview" part="overview">${overview}</span>`}`;
+    }
+    renderLone(series, at) {
+        if (!series || this.plot === 'bar') {
+            return nothing;
+        }
+        const alone = unbroken(series).filter((run) => run.length === 1);
+        return alone.length === 0
+            ? nothing
+            : html `${alone.map(([point]) => html `<span aria-hidden="true" part="lone" style=${at(point?.at ?? 0, point?.value ?? 0)}></span>`)}`;
+    }
+    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 +211,24 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "locale", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "marks", void 0);
+__decorate([
+    property({ attribute: 'overview-label' })
+], HelixHeadlessSparkline.prototype, "overviewLabel", 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, "range", void 0);
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "values", void 0);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -43,7 +43,7 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      */
     readonly isSpeedDialItem = true;
     /** Puts focus on the control inside the item. */
-    focus(): void;
+    focus(options?: FocusOptions): void;
     /**
      * Moves focus to the action. Part of `NavigableItem`, which the shared
      * keyboard controller uses for the arrow keys.

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

@@ -17,8 +17,8 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
             this.choose();
         };
     }
-    focus() {
-        this.partNamed('item')?.focus();
+    focus(options) {
+        this.partNamed('item')?.focus(options);
     }
     focusItem() {
         this.focus();

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -76,6 +76,12 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     private get trigger();
     /** The actions, which are this element's own rows and nothing else slotted. */
     private get items();
+    /**
+     * Puts focus on the trigger, the slotted one or the button drawn in its
+     * place, as a `focus()` on a native control would. The host itself takes no
+     * focus, so a page focusing it after a dialog closes landed nowhere.
+     */
+    focus(options?: FocusOptions): void;
     /** Shuts it and puts the reader back on the trigger. */
     private close;
     private readonly handleTriggerClick;

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, {
@@ -66,11 +66,19 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         const slot = this.renderRoot?.querySelector('slot:not([name])');
         return (slot?.assignedElements?.() ?? []).filter((one) => one.isSpeedDialItem === true);
     }
+    focus(options) {
+        const trigger = this.trigger;
+        if (trigger === this) {
+            super.focus(options);
+            return;
+        }
+        trigger.focus(options);
+    }
     close() {
         if (!this.requestOpen(false)) {
             return;
         }
-        this.trigger.focus();
+        this.focus();
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -42,6 +42,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixBeforeResizeEvent} helix-before-resize - Fired before the divider settles, and only when the gesture moved it. A press that moved nothing, a drag that came back, an arrow key with no room left, and a corner that moved only the other divider do not fire it. Cancelable: canceling it leaves the position to you and keeps the rest of the gesture, so a collapse the gesture reached still fires `helix-before-collapse`, which you can also cancel. A dragged divider stays where it was dropped until you set your own `position`.
  * @event {HelixCollapseEvent} helix-collapse - Fired after a pane shuts or reopens, with the side that is shut, or empty where both are open.
  * @event {HelixResizedEvent} helix-resized - Fired after the divider settles somewhere new, with the new position.
+ * @event {Event} input - Fired each time a drag moves the divider, before it settles, as a range input does while it is dragged. Read `position` for where it is now.
  *
  * @csspart corner - The handle where two dividers cross, added on the client.
  * @csspart end - The box that holds the second pane.
@@ -50,6 +51,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssproperty --splitter-corner-at - Where a nested splitter crosses this one, as a percentage.
  * @cssproperty --splitter-position - Where the divider sits, as a percentage of the box.
+ *
+ * @cssstate dragging - While the pointer or a corner holds the divider.
  */
 export declare class HelixHeadlessSplitter extends HelixElement {
     /**
@@ -264,8 +267,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 +502,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.
      *