@fusion.dev/helix-headless 0.188.0 → 0.189.0

package/dist/spatial-heatmap/root/spatial-heatmap-root.js

@@ -0,0 +1,252 @@
+import { __decorate } from "tslib";
+import { CHART_PLOT, commaList, customElement, drawTooltip, HelixPlotChangeEvent, HelixPlotTurnEvent, isRtl, MIRROR_RULE, spokenReading, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { html, nothing, svg, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '../../tooltip/index.js';
+import { fits, toneOf } from '../../heatmap/root/buckets.js';
+import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
+import { ACROSS, heightsOf, highestOf, reliefOf } from '../projection.js';
+const TURNS = {
+    ArrowDown: { across: 0, up: -1 },
+    ArrowLeft: { across: -1, up: 0 },
+    ArrowRight: { across: 1, up: 0 },
+    ArrowUp: { across: 0, up: 1 },
+};
+let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
+    constructor() {
+        super(...arguments);
+        this.flat = false;
+        this.relief = 2;
+        this.shown = undefined;
+        this.rendered = false;
+        this.told = { at: -1, field: '' };
+        this.onTurnKeydown = (event) => {
+            const turn = TURNS[event.key];
+            if (!this.rendered ||
+                !event.shiftKey ||
+                !turn ||
+                this.selectionMode === 'multiple' ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey) {
+                this.onStripKeydown();
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.dispatchEvent(new HelixPlotTurnEvent(turn));
+        };
+    }
+    static { this.words = 'helix-spatial-heatmap'; }
+    static { this.markRules = [MIRROR_RULE]; }
+    get field() {
+        const cells = this.drawn;
+        const rows = this.rowCount;
+        const bounds = writtenNumbers(this.thresholds);
+        const palette = writtenList(this.tones);
+        const tallest = this.flat ? 0 : Math.max(0, this.relief || 0);
+        const heights = heightsOf(cells.map((point) => point.value), highestOf(this.points.map((point) => point.value)), tallest);
+        const first = this.points.length - cells.length;
+        return {
+            cells: cells.map((cell, index) => ({
+                column: Math.floor(index / rows),
+                height: heights[index] ?? 0,
+                label: this.sourceRows[first + index]?.label ?? '',
+                row: index % rows,
+                tone: toneOf(cell, bounds, palette),
+            })),
+            columns: Math.ceil(cells.length / rows),
+            rows: Math.min(rows, cells.length),
+        };
+    }
+    get active() {
+        return this.pointer.at;
+    }
+    rendererDrawn(on = true) {
+        this.rendered = on;
+        this.toggleState('drawn', on);
+    }
+    requestActive(index, kind = 'mouse') {
+        if (kind === 'touch') {
+            this.pointer.tapTo(index);
+        }
+        else if (index >= 0 || !this.pointer.keyed) {
+            this.pointer.set(index);
+        }
+    }
+    placeReading(at) {
+        this.place = at;
+    }
+    placeCorners(at) {
+        if (at || !this.rendered) {
+            this.corners = at;
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        const field = JSON.stringify(this.field);
+        if (field !== this.told.field) {
+            this.told.field = field;
+            this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'data' }));
+        }
+        if (this.pointer.at !== this.told.at) {
+            this.told.at = this.pointer.at;
+            this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'focus' }));
+        }
+        if (changed.has('place')) {
+            ;
+            this.renderRoot.querySelector('[for="helix-chart-mark"]')?.reposition?.();
+        }
+    }
+    get room() {
+        const width = this.width;
+        if (width === undefined) {
+            return this.points.length;
+        }
+        const pitch = this.cellPx + this.gapPx;
+        const across = width / ACROSS - this.rowCount * pitch - this.gapPx;
+        return fits(this.points.length, Math.max(across, Number.MIN_VALUE), this.cellPx, this.gapPx, this.rowCount);
+    }
+    drawnRelief() {
+        const tallest = this.flat ? 0 : Math.max(0, this.relief || 0);
+        const highest = highestOf(this.points.map((point) => point.value));
+        const heights = heightsOf(this.drawn.map((point) => point.value), highest, tallest);
+        return reliefOf(heights, this.rowCount, this.cellPx / (this.cellPx + this.gapPx));
+    }
+    render() {
+        const bounds = writtenNumbers(this.thresholds);
+        const palette = writtenList(this.tones);
+        const cells = this.drawn;
+        const readable = cells.length > 0;
+        const grid = readable && this.selectionMode !== undefined;
+        const keys = this.selectionMode ? this.keysOf(cells) : [];
+        const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
+        const relief = this.drawnRelief();
+        this.shown = relief;
+        const at = this.pointer.at;
+        const prisms = relief.prisms.map((prism) => this.renderPrism(prism.index, prism.top, prism.left, prism.right, at === prism.index, chosen.has(keys[prism.index] ?? ''), grid, toneOf(cells[prism.index] ?? { value: undefined }, bounds, palette)));
+        const { box } = relief;
+        const drawing = readable
+            ? html `<svg
+          aria-hidden=${grid ? nothing : 'true'}
+          data-mirror
+          part="drawing"
+          role=${grid ? 'none' : nothing}
+          style=${this.rendered ? 'opacity: 0; pointer-events: none' : nothing}
+          viewBox="${box.x} ${box.y} ${box.width} ${box.height}"
+          xmlns="http://www.w3.org/2000/svg"
+        >${relief.base ? this.renderBase(relief.base) : nothing}${grid ? this.renderPrismRows(prisms) : prisms}</svg>`
+            : nothing;
+        return html `<div
+        aria-activedescendant=${grid && at >= 0 ? `cell-${at}` : nothing}
+        aria-describedby=${readable ? 'helix-chart-summary' : nothing}
+        aria-label=${this.named || this.stripLabel}
+        aria-multiselectable=${grid && this.selectionMode === 'multiple' ? 'true' : nothing}
+        part="strip plot"
+        id=${CHART_PLOT}
+        role=${grid ? 'grid' : readable ? 'application' : 'img'}
+        style="--spatial-heatmap-span: ${Math.ceil(cells.length / this.rowCount) + Math.min(this.rowCount, cells.length)}"
+        tabindex=${readable ? '0' : nothing}
+        @click=${this.onClick}
+        @keydown=${this.onTurnKeydown}
+        @pointerover=${this.rendered ? undefined : this.onPointerOver}
+        @pointerleave=${this.onPointerLeave}
+        @pointerup=${this.rendered ? undefined : this.onPointerUp}
+      ><slot name="renderer"></slot>${drawing}${this.renderTooltip(grid)}</div>
+      ${cells.length === 0 ? this.renderStatus() : nothing}
+      <div part="footer" style=${this.cornersStyle(relief)}>
+        <span part="start"><slot name="start"></slot></span>
+        <span part="summary"><slot name="summary"></slot></span>
+        <span part="end"><slot name="end"></slot></span>
+      </div>${readable ? this.renderOverview(cells) : nothing}${this.status.spoken
+            ? html `<span part="selection" role="status">${this.status.said}</span>`
+            : nothing}${this.renderTable()}`;
+    }
+    renderPrism(index, top, left, right, active, picked, grid, tone) {
+        const row = grid ? this.sourceRows[this.points.length - this.drawn.length + index] : undefined;
+        const name = row ? spokenReading(row) : '';
+        return svg `<g
+      aria-label=${grid && name ? name : nothing}
+      aria-selected=${grid ? (picked ? 'true' : 'false') : nothing}
+      data-index=${index}
+      data-tone=${tone ?? nothing}
+      id=${grid ? `cell-${index}` : nothing}
+      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+      role=${grid ? 'gridcell' : nothing}
+      style=${tone === undefined ? nothing : `--heatmap-tone: var(--heatmap-tone-${tone})`}
+    ><path d=${left} part="left-face"></path><path d=${right} part="right-face"></path><path d=${top} part="top-face"></path></g>`;
+    }
+    renderBase(base) {
+        return svg `<g aria-hidden="true" part="base"><path d=${base.left} part="base-left"></path><path d=${base.right} part="base-right"></path><path d=${base.top} part="base-top"></path></g>`;
+    }
+    cornersStyle(relief) {
+        const { box, corners } = relief;
+        if (!corners || box.width <= 0) {
+            return nothing;
+        }
+        const share = (value) => Math.round(value * 10000) / 10000;
+        const depth = box.height / box.width;
+        const drawn = this.rendered ? this.corners : undefined;
+        const across = (x) => (isRtl(this) ? 1 - x : x);
+        const start = drawn
+            ? { x: across(drawn.start.x), y: drawn.start.y * depth }
+            : { x: 0, y: (corners.start.y - box.y) / box.width };
+        const end = drawn
+            ? { x: across(drawn.end.x), y: drawn.end.y * depth }
+            : { x: (corners.end.x - box.x) / box.width, y: depth };
+        return [
+            `--spatial-heatmap-depth: ${share(depth)}`,
+            `--spatial-heatmap-end-x: ${share(end.x)}`,
+            `--spatial-heatmap-end-y: ${share(end.y)}`,
+            `--spatial-heatmap-start-x: ${share(start.x)}`,
+            `--spatial-heatmap-start-y: ${share(start.y)}`,
+        ].join('; ');
+    }
+    renderPrismRows(prisms) {
+        const size = this.rowCount === 1 ? prisms.length : this.rowCount;
+        const rows = [];
+        for (let start = 0; start < prisms.length; start += size) {
+            rows.push(svg `<g part="row" role="row">${prisms.slice(start, start + size)}</g>`);
+        }
+        return rows;
+    }
+    renderTooltip(grid = false) {
+        const at = this.pointer.at;
+        const prism = this.shown?.prisms[at];
+        const box = this.shown?.box;
+        const reading = grid ? undefined : this.pointer;
+        if (this.rendered) {
+            const place = this.place;
+            return drawTooltip(this.sourceRows, at >= 0 && place ? this.points.length - this.drawn.length + at : -1, this.tag('tooltip'), place
+                ? { fixed: true, placement: 'top', x: `${place.x * 100}%`, y: `${place.y * 100}%` }
+                : undefined, undefined, reading);
+        }
+        if (at < 0 || !prism || !box || box.width <= 0 || box.height <= 0) {
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, reading);
+        }
+        return drawTooltip(this.sourceRows, this.points.length - this.drawn.length + at, this.tag('tooltip'), {
+            placement: 'top',
+            x: `${((prism.peak.x - box.x) / box.width) * 100}%`,
+            y: `${((prism.peak.y - box.y) / box.height) * 100}%`,
+        }, undefined, reading);
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessSpatialHeatmap.prototype, "flat", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessSpatialHeatmap.prototype, "relief", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialHeatmap.prototype, "rendered", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialHeatmap.prototype, "place", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialHeatmap.prototype, "corners", void 0);
+HelixHeadlessSpatialHeatmap = __decorate([
+    customElement('helix-headless-spatial-heatmap')
+], HelixHeadlessSpatialHeatmap);
+export { HelixHeadlessSpatialHeatmap };

package/dist/spatial-scatter-chart/field.d.ts

@@ -0,0 +1,63 @@
+/**
+ * A 3D scatter's table read as points, axes, and groups.
+ *
+ * Kept apart from the element because it is arithmetic a picture hides: a
+ * range that does not reach the round numbers either side puts a point on
+ * the edge of the box, and a row read into the wrong axis looks like data.
+ */
+/** What the field reads of a row: its label and its cells, with their headings and numbers. */
+export interface FieldRow {
+    cells: readonly {
+        name: string;
+        text: string;
+        value?: number | undefined;
+    }[];
+    label: string;
+}
+/** One row drawn as a point. */
+export interface PlotPoint {
+    /** The point's group, from the `group-by` column, or `''` where there is none. */
+    group: string;
+    /** The point's place among the groups, which its color is read by. */
+    groupIndex: number;
+    /** The row's own label. */
+    label: string;
+    /** The row it was read from, counting from zero. */
+    row: number;
+    /** Across, up, and in depth, in the table's own numbers. */
+    x: number;
+    y: number;
+    z: number;
+}
+/** One axis: its column's name, its range widened to round numbers, and the ticks on it. */
+export interface PlotAxis {
+    name: string;
+    range: [number, number];
+    ticks: number[];
+}
+/** The table as a 3D scatter reads it. */
+export interface PlotField {
+    axes: {
+        x: PlotAxis;
+        y: PlotAxis;
+        z: PlotAxis;
+    };
+    /** Every group, in the order its first row comes. */
+    groups: string[];
+    points: PlotPoint[];
+}
+/**
+ * A range widened to the round numbers either side of it, so the first and
+ * last tick are the edges of the box and no point sits on its border. A
+ * range of one number is widened by one either way.
+ */
+export declare const niceRange: (low: number, high: number) => [number, number];
+/**
+ * Reads the table: **the first three numeric columns are across, up, and in
+ * depth**, and `groupBy` names a column whose text puts each point in a
+ * group. A row that lacks any of the three numbers is left out, since a
+ * point needs all three to stand anywhere.
+ */
+export declare const fieldOf: (rows: readonly FieldRow[], columns: readonly number[], groupBy?: string) => PlotField;
+/** Where a number stands along an axis, from 0 at its low end to 1 at its high end. */
+export declare const along: (axis: PlotAxis, value: number) => number;

package/dist/spatial-scatter-chart/field.js

@@ -0,0 +1,61 @@
+import { ticks } from '@fusion.dev/helix-core';
+export const niceRange = (low, high) => {
+    if (!Number.isFinite(low) || !Number.isFinite(high)) {
+        return [0, 1];
+    }
+    if (low === high) {
+        return [low - 1, high + 1];
+    }
+    const levels = ticks([low, high]);
+    const step = levels.length > 1 ? levels[1] - levels[0] : high - low;
+    const round = (value) => Number(value.toPrecision(12));
+    return [round(Math.floor(low / step) * step), round(Math.ceil(high / step) * step)];
+};
+export const fieldOf = (rows, columns, groupBy = '') => {
+    const [xAt, yAt, zAt] = columns.filter((column) => {
+        const name = rows.find((row) => row.cells[column])?.cells[column]?.name ?? '';
+        return name !== groupBy;
+    });
+    const nameOf = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+    const groups = [];
+    const points = [];
+    rows.forEach((row, at) => {
+        const value = (column) => column === undefined ? undefined : row.cells[column]?.value;
+        const [x, y, z] = [value(xAt), value(yAt), value(zAt)];
+        if (!(Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z))) {
+            return;
+        }
+        const group = groupBy ? (row.cells.find((cell) => cell.name === groupBy)?.text ?? '') : '';
+        let groupIndex = groups.indexOf(group);
+        if (groupIndex < 0) {
+            groupIndex = groups.push(group) - 1;
+        }
+        points.push({
+            group,
+            groupIndex,
+            label: row.label,
+            row: at,
+            x: x,
+            y: y,
+            z: z,
+        });
+    });
+    const axis = (column, read) => {
+        const values = points.map(read);
+        const range = niceRange(Math.min(...values), Math.max(...values));
+        return { name: nameOf(column), range, ticks: ticks(range) };
+    };
+    return {
+        axes: {
+            x: axis(xAt, (point) => point.x),
+            y: axis(yAt, (point) => point.y),
+            z: axis(zAt, (point) => point.z),
+        },
+        groups,
+        points,
+    };
+};
+export const along = (axis, value) => {
+    const [low, high] = axis.range;
+    return high === low ? 0.5 : (value - low) / (high - low);
+};

package/dist/spatial-scatter-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { along, fieldOf, niceRange, type PlotAxis, type PlotField, type PlotPoint, } from './field.js';
+export { HelixHeadlessSpatialScatterChart } from './root/spatial-scatter-chart-root.js';

package/dist/spatial-scatter-chart/index.js

@@ -0,0 +1,2 @@
+export { along, fieldOf, niceRange, } from './field.js';
+export { HelixHeadlessSpatialScatterChart } from './root/spatial-scatter-chart-root.js';

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.d.ts

@@ -0,0 +1,207 @@
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+import { type PlotField } from '../field.js';
+declare const HelixHeadlessSpatialScatterChart_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
+/**
+ * @summary A chart that plots each row as a point in three dimensions, for data with three measures.
+ *
+ * @description
+ * A 3D scatter chart shows how three measures relate. The table's first
+ * three numeric columns are measured across, up, and in depth, and each row
+ * is one point. `group-by` names a column of text, such as a team or a
+ * cluster, and each group is drawn in its own color.
+ *
+ * **Helix draws the frame, and a renderer draws the points in 3D.** Put a
+ * box for the renderer inside the chart, and `connectSpatialScatterChart` from
+ * `@fusion.dev/helix-plot` draws the points in it with three.js and keeps it
+ * in step with the chart. Until a renderer has drawn, and where none is
+ * connected, the chart draws the points in 3D itself, in SVG, from the same
+ * place the renderer's camera starts: a still picture the server, a print,
+ * and a page without WebGL all show, which Shift with an arrow turns.
+ *
+ * **The table is the reading.** Every number is in it, and screen readers
+ * read it. The `summary` part names the three measures and the number of
+ * points, and describes the plot.
+ *
+ * **The plot is read by key.** It takes focus, named by `label` or the
+ * caption. The left and right arrows move from point to point in the table's
+ * order, Home and End go to the first and the last, and the up and down
+ * arrows move among the measures the readout says first. The `live` part
+ * says the point's row in words, and the renderer marks it. Shift with an
+ * arrow turns the view, and Escape lets the point go.
+ *
+ * **A reading shows its row in a tooltip**, as on every chart: the point a
+ * mouse or a pen rests on in the drawing, the point tapped, or the one the
+ * keys move to, once a renderer has drawn.
+ *
+ * **Readings are sent as every chart sends them.** `helix-reading-change`
+ * says each move of the reading, by pointer or key, and `helix-reading-press`
+ * a point clicked, tapped, or pressed with Enter or Space, each with the row
+ * of the table in `index`.
+ *
+ * **Keyboard.** The plot is one tab stop once it has points.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the plot. |
+ * | Right, Left | Moves to the next or the previous point, in the table's order. |
+ * | Up, Down | Moves among the point's measures, which the readout says first. |
+ * | Home, End | Moves to the first or the last point. |
+ * | Shift with an arrow | Turns the view across, or tilts it up and down. |
+ * | Enter, Space | Presses the point, which sends `helix-reading-press`. |
+ * | Escape | Lets the point go. |
+ *
+ * @since 0.189.0
+ * @status experimental
+ * @category charts
+ * @aliases 3D scatter chart, 3D scatter plot, Point cloud, Three-dimensional scatter
+ * @documentation https://fusion.dev/helix/components/spatial-scatter-chart
+ *
+ * @slot - The renderer's box, which the 3D drawing is made in.
+ * @slot empty - Content shown when the table has no points. Falls back to `empty-text`.
+ * @slot loading - Content shown while `loading` is set and there are no points yet. Falls back to `loading-text`.
+ *
+ * @event {HelixPlotChangeEvent} helix-plot-change - The points or the point the keys rest on changed, which the renderer is told. It stays on the chart.
+ * @event {HelixPlotTurnEvent} helix-plot-turn - Shift with an arrow asked the view to turn, by a step across or up.
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading moved, or was put away: `index` is the row, or `-1` for none, with its `label` and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A point was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
+ * @csspart axis-name - A measure's name, along its edge of the box, in the chart's own drawing.
+ * @csspart drawing - The chart's own drawing in SVG: the box, its grid and numbers, and the points.
+ * @csspart empty - The words when the table has no points: the `empty` slot, falling back to `empty-text`.
+ * @csspart fallback - The box the chart's own drawing fills, shown until a renderer has drawn and where none is connected. Hidden from screen readers.
+ * @csspart grid - The box's edges and its grid at the ticks, in the chart's own drawing.
+ * @csspart live - The readout: a polite live region that says the point the keys moved to. Hide it visually.
+ * @csspart loading - The words while `loading` is set and there are no points.
+ * @csspart mark - The invisible point the tooltip is anchored to, where the renderer draws the reading.
+ * @csspart plot - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
+ * @csspart point - One point of the chart's own drawing.
+ * @csspart point-active - The point the pointer or the keys rest on, in the chart's own drawing. Set alongside `point`.
+ * @csspart ring - The ring around the point the pointer or the keys rest on, drawn over every point.
+ * @csspart summary - The three measures and the number of points, written as a sentence for screen readers, which describes the plot. Hide it visually.
+ * @csspart table - The readings as a table, for a screen reader, rendered only where they were drawn from `data`. Hide it visually.
+ * @csspart tick - A number at a tick, along its edge of the box, in the chart's own drawing.
+ * @csspart tooltip - The bubble, forwarded from `Tooltip`.
+ * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The point while the bubble is below the reading, on its top edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The point while the bubble is left of the reading, on its right edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The point while the bubble is right of the reading, on its left edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
+ * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
+ * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell a chart's series keys rest on, which every chart's tooltip can mark. This chart marks none, since its readout says the measure. Set alongside `tooltip-cell`.
+ * @csspart tooltip-label - The row's own name inside the tooltip.
+ * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
+ * @csspart tooltip-name - A column's name inside the tooltip.
+ * @csspart tooltip-right - The bubble while it is right of the reading. Set alongside `tooltip`.
+ * @csspart tooltip-top - The bubble while it is above the reading. Set alongside `tooltip`.
+ * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssstate active - While a point is shown, under the pointer or the keys.
+ * @cssstate drawn - While a renderer has drawn the points, and the chart's own drawing is hidden.
+ * @cssstate empty - While the `empty` part stands in place of the points.
+ * @cssstate loading - While the `loading` part stands in place of the points.
+ */
+export declare class HelixHeadlessSpatialScatterChart extends HelixHeadlessSpatialScatterChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-spatial-scatter-chart': { emptyText: 'Keine Punkte' } })`.
+     */
+    static words: string;
+    /** The column of text that puts each point in a group, by its heading. None by default. */
+    groupBy: string;
+    /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+    plotLabel: string;
+    /**
+     * The `summary` part's sentence. `{count}` is the number of points, written
+     * in the locale, and `{x}`, `{y}`, and `{z}` are the three measures' names.
+     */
+    summaryLabel: string;
+    /** Whether a renderer has drawn the points, which hides the chart's own drawing. */
+    private rendered;
+    /** Where the chart's own drawing is seen from, which Shift with an arrow turns. */
+    private camera;
+    /** Each point where the chart's own drawing put it, which the pointer finds. */
+    private placed;
+    /** Where the renderer draws the reading, which the tooltip points at. */
+    private place;
+    /** The field last read, kept so a change of it can be told. */
+    private last;
+    /** The point the keys rested on last, so a change of it can be told. */
+    private told;
+    /** Carries a host `aria-labelledby` and `aria-describedby` to the plot. */
+    protected readonly aria: AriaForwardController;
+    /**
+     * The table read as points, axes, and groups. **The first three numeric
+     * columns are across, up, and in depth**, and a row lacking any of them is
+     * left out. A renderer reads it.
+     */
+    get field(): PlotField;
+    /** The point the keys or the pointer rest on, as its place in `field.points`, or `-1`. */
+    get active(): number;
+    /** The number of points, which the keys walk. */
+    get readings(): number;
+    /**
+     * Says whether a renderer has drawn the points, which hides the chart's
+     * own drawing or shows it again. Called by the connector.
+     */
+    rendererDrawn(on?: boolean): void;
+    /**
+     * Puts the reading on the point at `index`, or lets it go with `-1`, as a
+     * pointer resting on it in the renderer's drawing or a press there does.
+     * A touch keeps it until a tap lands elsewhere, and a mouse leaving a
+     * reading the keys moved to leaves it. Called by the connector.
+     */
+    requestActive(index: number, kind?: 'mouse' | 'pen' | 'touch'): void;
+    /**
+     * Says where the renderer draws the reading, as fractions of the plot from
+     * its top left, or `undefined` while it draws none. The tooltip points
+     * there. Called by the connector.
+     */
+    placeReading(at: {
+        x: number;
+        y: number;
+    } | undefined): void;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Shift with an arrow turns the view, the chart's own drawing and the
+     * renderer's alike, and moves no reading.
+     */
+    private readonly onPlotKeydown;
+    /** A mouse or a pen over the chart's own drawing puts the reading on the point nearest it. */
+    private readonly onDrawingMove;
+    private readonly onDrawingLeave;
+    /** A tap is a touch reader's hover: it shows the point nearest it until a tap lands elsewhere. */
+    private readonly onDrawingTap;
+    protected render(): TemplateResult;
+    /**
+     * The points in 3D, in SVG: the box with its grid, numbers, and names, and
+     * each point painted back to front, as the camera sees them. The chart's
+     * own drawing, until a renderer has drawn and where none is connected.
+     */
+    private renderFallback;
+    /** The readout: the point's row in words, once the keys have moved to one. */
+    private renderLive;
+    /**
+     * The reading's row in the tooltip, pointed at the point in the chart's
+     * own drawing, which holds it at the point's place.
+     */
+    private renderOwnTooltip;
+    /**
+     * The reading's row in the tooltip every chart shows, pointed at where the
+     * renderer draws it. Only once a renderer has drawn; until then the
+     * chart's own drawing holds the tooltip at the reading.
+     */
+    private renderTooltip;
+    /** What the plot shows, in a sentence, which describes the plot. */
+    private renderSummary;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-spatial-scatter-chart': HelixHeadlessSpatialScatterChart;
+    }
+}
+export {};