@fusion.dev/helix-core 0.149.1 → 0.151.0

package/dist/controllers/chart-pointer-controller/chart-pointer-controller.d.ts

@@ -1,4 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ReadingDetail } from '../../events/details.js';
 /**
  * The id every chart puts on its plot, and the boundary a bubble is kept inside.
  *
@@ -65,7 +66,15 @@ export interface ChartPointerHost extends ReactiveControllerHost, HTMLElement {
      * the nearest `lang`, then the runtime's own, as `wordsLocale` does.
      */
     readonly locale?: string;
+    /** The table's rows, whose headings name a reading in `onReading`. */
+    readonly sourceRows?: ReadonlyArray<{
+        readonly label: string;
+    }>;
+    /** The heading of the column at this place in a row, which names a series in `onReading`. */
+    columnName?(cell: number): string;
 }
+/** What `onReading` is told: the reading moved, or it was pressed. */
+export type ReadingHeard = 'change' | 'press';
 /**
  * Which reading a pointer is nearest, for a chart that draws no markers.
  *
@@ -84,11 +93,13 @@ export interface ChartPointerHost extends ReactiveControllerHost, HTMLElement {
  * depending on which line the pointer drifted toward, which is a tooltip that
  * changes its mind while the reader holds still.
  *
- * **Coarse pointers get nothing.** A touch has no hover, so a tooltip driven by
- * one appears where a finger already covers it and stays after the finger
- * lifts. The table underneath is the readable version and is what a phone
- * should be given, so this listens for `pointermove` and ignores anything whose
- * `pointerType` is not fine.
+ * **A touch has no hover, so it moves nothing by passing over.** A tooltip
+ * driven by a finger dragging across would appear under the finger. So this
+ * listens for `pointermove` and ignores anything whose `pointerType` is not
+ * fine. **A tap is the touch reader's hover**, for a chart that hears its
+ * readings through `onReading`: it shows the reading tapped, as Chart.js does,
+ * and keeps it until a tap lands elsewhere, outside the chart or on another
+ * reading. A drag that scrolls the page is no tap and shows nothing.
  *
  * **The keyboard moves the same reading, which is what makes it the reading
  * and not the pointer's.** A chart's plot takes focus (`tabindex="0"` on the
@@ -145,6 +156,22 @@ export declare class ChartPointerController implements ReactiveController {
      * sides. The slices call `set` and this only holds the answer.
      */
     axis: 'block' | 'inline' | 'none';
+    /**
+     * Hears the reading: `change` each time it moves or is put away, and
+     * `press` when it is clicked, tapped, or pressed with Enter or Space.
+     *
+     * Set by a chart that sends `helix-reading-change` and
+     * `helix-reading-press`, which it does from here so the event classes are
+     * constructed in the chart that declares them. A chart that hears its
+     * readings also shows one on a tap.
+     */
+    onReading: ((heard: ReadingHeard, detail: ReadingDetail) => void) | undefined;
+    /** What last moved the reading, which `onReading` is told. */
+    private by;
+    /** The reading and the series `onReading` was last told of. */
+    private said;
+    /** Whether a tap shows the reading, which stays until a tap lands elsewhere. */
+    private tapped;
     constructor(host: ChartPointerHost);
     hostConnected(): void;
     hostDisconnected(): void;
@@ -207,6 +234,31 @@ export declare class ChartPointerController implements ReactiveController {
      * position until the render that follows.
      */
     hostUpdated(): void;
+    /**
+     * Tells `onReading` the reading moved, once for each move.
+     *
+     * After the update, from `hostUpdated`, so a listener reading the chart
+     * finds it already showing the reading it was told of.
+     */
+    private announce;
+    /** The reading as `onReading` is told it. */
+    private detail;
+    /**
+     * Shows the reading at `at` for a tap, and keeps it until a tap lands
+     * outside the chart. Public for a chart that finds the reading under a
+     * finger itself, a scatter's nearest point.
+     */
+    tapTo(at: number): void;
+    /** Stops waiting for a tap elsewhere. */
+    private untap;
+    /** A press outside the chart puts a tapped reading away. */
+    private readonly away;
+    private readonly tap;
+    /**
+     * Tells `onReading` a reading was clicked or tapped, where the press landed
+     * on the plot and a reading is shown.
+     */
+    private readonly press;
     /**
      * The box the readings are laid out in, which is the plot and not the host.
      *
@@ -279,6 +331,11 @@ export declare class ChartPointerController implements ReactiveController {
      */
     private readonly arrive;
     private readonly depart;
+    /**
+     * The reading a pointer is over, by the slot it is in along `axis`, or
+     * `undefined` with nothing to measure.
+     */
+    private resolve;
     private readonly move;
     private readonly leave;
 }

package/dist/controllers/chart-pointer-controller/chart-pointer-controller.js

@@ -10,6 +10,41 @@ export class ChartPointerController {
         this.keyed = false;
         this.series = -1;
         this.axis = 'inline';
+        this.by = 'mouse';
+        this.said = { at: -1, series: -1 };
+        this.tapped = false;
+        this.away = (event) => {
+            if (!event.composedPath().includes(this.host)) {
+                this.clear();
+            }
+        };
+        this.tap = (event) => {
+            if (event.pointerType !== 'touch' || !this.onReading || this.axis === 'none') {
+                return;
+            }
+            const at = this.resolve(event);
+            if (at !== undefined) {
+                this.tapTo(at);
+            }
+        };
+        this.press = (event) => {
+            if (!this.onReading || this.at < 0) {
+                return;
+            }
+            const onPlot = event
+                .composedPath()
+                .some((node) => node instanceof Element &&
+                node.id === CHART_PLOT &&
+                node.getRootNode() === this.host.renderRoot);
+            if (!onPlot) {
+                return;
+            }
+            const type = event.pointerType;
+            this.onReading('press', {
+                ...this.detail(),
+                pointerType: type === 'touch' || type === 'pen' || type === 'mouse' ? type : this.by,
+            });
+        };
         this.key = (event) => {
             if (!this.fromPlot(event) || event.altKey || event.ctrlKey || event.metaKey) {
                 return;
@@ -26,6 +61,13 @@ export class ChartPointerController {
                 }
                 return;
             }
+            if ((event.key === 'Enter' || event.key === ' ') && this.onReading) {
+                if (this.at >= 0) {
+                    event.preventDefault();
+                    this.onReading('press', { ...this.detail(), pointerType: 'keyboard' });
+                }
+                return;
+            }
             const paged = (event.key === 'PageDown' || event.key === 'PageUp') && this.at >= 0
                 ? this.host.pageFrom?.(this.at, event.key === 'PageDown')
                 : undefined;
@@ -91,19 +133,12 @@ export class ChartPointerController {
             if (this.axis === 'none' || !this.accepts(event)) {
                 return;
             }
-            const box = this.box();
-            const count = this.host.readings;
-            const along = this.axis === 'block' ? box?.height : box?.width;
-            if (!box || !along || count === 0) {
+            const next = this.resolve(event);
+            if (next === undefined) {
                 return;
             }
-            const from = this.axis === 'block'
-                ? event.clientY - box.top
-                : this.mirrored
-                    ? box.right - event.clientX
-                    : event.clientX - box.left;
-            const slot = Math.floor((from / along) * count);
-            const next = Math.min(Math.max(slot, 0), count - 1);
+            this.untap();
+            this.by = event.pointerType === 'pen' ? 'pen' : 'mouse';
             if (next !== this.at) {
                 this.at = next;
                 this.keyed = false;
@@ -113,7 +148,7 @@ export class ChartPointerController {
             }
         };
         this.leave = () => {
-            if (this.at !== -1 && !this.keyed) {
+            if (this.at !== -1 && !this.keyed && !this.tapped) {
                 this.at = -1;
                 this.host.requestUpdate();
             }
@@ -127,6 +162,8 @@ export class ChartPointerController {
         this.host.addEventListener('keydown', this.key);
         this.host.addEventListener('focusin', this.arrive);
         this.host.addEventListener('focusout', this.depart);
+        this.host.addEventListener('pointerup', this.tap);
+        this.host.addEventListener('click', this.press);
     }
     hostDisconnected() {
         this.host.removeEventListener('pointermove', this.move);
@@ -134,9 +171,13 @@ export class ChartPointerController {
         this.host.removeEventListener('keydown', this.key);
         this.host.removeEventListener('focusin', this.arrive);
         this.host.removeEventListener('focusout', this.depart);
+        this.host.removeEventListener('pointerup', this.tap);
+        this.host.removeEventListener('click', this.press);
+        this.untap();
         this.at = -1;
         this.series = -1;
         this.keyed = false;
+        this.said = { at: -1, series: -1 };
     }
     get column() {
         return this.series < 0 ? undefined : this.columns()[this.series];
@@ -171,6 +212,7 @@ export class ChartPointerController {
             : all.filter((at) => host.showsReading?.(at) !== false);
     }
     hostUpdated() {
+        this.announce();
         if (!this.moved) {
             return;
         }
@@ -179,6 +221,46 @@ export class ChartPointerController {
             .querySelector('[part="tooltip-anchor"]')
             ?.reposition?.();
     }
+    announce() {
+        if (!this.onReading || (this.at === this.said.at && this.series === this.said.series)) {
+            return;
+        }
+        this.said = { at: this.at, series: this.series };
+        this.onReading('change', this.detail());
+    }
+    detail() {
+        const at = this.at;
+        const column = this.column;
+        return {
+            index: at,
+            label: at < 0 ? '' : (this.host.sourceRows?.[at]?.label ?? ''),
+            pointerType: this.keyed ? 'keyboard' : this.by,
+            series: at < 0 || column === undefined ? '' : (this.host.columnName?.(column) ?? ''),
+        };
+    }
+    tapTo(at) {
+        if (at < 0) {
+            return;
+        }
+        this.by = 'touch';
+        if (!this.tapped) {
+            this.tapped = true;
+            this.host.ownerDocument.addEventListener('pointerdown', this.away, true);
+        }
+        if (at !== this.at || this.keyed) {
+            this.at = at;
+            this.keyed = false;
+            this.series = -1;
+            this.moved = true;
+            this.host.requestUpdate();
+        }
+    }
+    untap() {
+        if (this.tapped) {
+            this.tapped = false;
+            this.host.ownerDocument.removeEventListener('pointerdown', this.away, true);
+        }
+    }
     box() {
         if (!this.plot?.isConnected) {
             this.plot =
@@ -195,6 +277,8 @@ export class ChartPointerController {
         return type === 'mouse' || type === 'pen';
     }
     set(at) {
+        this.untap();
+        this.by = 'mouse';
         if (at !== this.at) {
             this.at = at;
             this.keyed = false;
@@ -209,6 +293,7 @@ export class ChartPointerController {
             target.getRootNode() === this.host.renderRoot);
     }
     clear() {
+        this.untap();
         const was = this.at;
         this.at = -1;
         this.series = -1;
@@ -217,4 +302,19 @@ export class ChartPointerController {
             this.host.requestUpdate();
         }
     }
+    resolve(event) {
+        const box = this.box();
+        const count = this.host.readings;
+        const along = this.axis === 'block' ? box?.height : box?.width;
+        if (!box || !along || count === 0) {
+            return undefined;
+        }
+        const from = this.axis === 'block'
+            ? event.clientY - box.top
+            : this.mirrored
+                ? box.right - event.clientX
+                : event.clientX - box.left;
+        const slot = Math.floor((from / along) * count);
+        return Math.min(Math.max(slot, 0), count - 1);
+    }
 }

package/dist/events/details.d.ts

@@ -382,6 +382,20 @@ export interface PressDetail {
     /** What the press came from. */
     pointerType: PressPointerType;
 }
+/** Detail carried by `helix-reading-change` and `helix-reading-press`. */
+export interface ReadingDetail {
+    /** The reading's place among the table's rows, counting from 0, or `-1` once no reading is shown. */
+    index: number;
+    /** The reading's name, its row's heading, such as `March`. Empty with no reading. */
+    label: string;
+    /** What moved to the reading or pressed it. */
+    pointerType: 'keyboard' | 'mouse' | 'pen' | 'touch';
+    /**
+     * The heading of the series the up and down keys rest on within the
+     * reading, or `''` while the whole reading is read.
+     */
+    series: string;
+}
 /** Detail carried by `helix-band`. */
 export interface BandDetail {
     /** The band the reading is in now, or `''` where it is in none. */

package/dist/events/events.d.ts

@@ -94,6 +94,8 @@ import { HelixPreviewEvent } from './preview.js';
 import { HelixPreviousEvent } from './previous.js';
 import { HelixRangeChangeEvent } from './range-change.js';
 import { HelixReadEvent } from './read.js';
+import { HelixReadingChangeEvent } from './reading-change.js';
+import { HelixReadingPressEvent } from './reading-press.js';
 import { HelixReconnectEvent } from './reconnect.js';
 import { HelixRejectEvent } from './reject.js';
 import { HelixRelabelEvent } from './relabel.js';
@@ -116,9 +118,9 @@ import { HelixToggleEvent } from './toggle.js';
 import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
-export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
+export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReadingDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 /**
  * Every event class, and the one place a new one is registered: a class in a
  * module of its own, imported above, and named here and in `names.ts`.
@@ -198,6 +200,8 @@ declare const registry: {
     readonly HelixPreviousEvent: typeof HelixPreviousEvent;
     readonly HelixRangeChangeEvent: typeof HelixRangeChangeEvent;
     readonly HelixReadEvent: typeof HelixReadEvent;
+    readonly HelixReadingChangeEvent: typeof HelixReadingChangeEvent;
+    readonly HelixReadingPressEvent: typeof HelixReadingPressEvent;
     readonly HelixReconnectEvent: typeof HelixReconnectEvent;
     readonly HelixRejectEvent: typeof HelixRejectEvent;
     readonly HelixRelabelEvent: typeof HelixRelabelEvent;

package/dist/events/events.js

@@ -64,6 +64,8 @@ import { HelixPreviewEvent } from './preview.js';
 import { HelixPreviousEvent } from './previous.js';
 import { HelixRangeChangeEvent } from './range-change.js';
 import { HelixReadEvent } from './read.js';
+import { HelixReadingChangeEvent } from './reading-change.js';
+import { HelixReadingPressEvent } from './reading-press.js';
 import { HelixReconnectEvent } from './reconnect.js';
 import { HelixRejectEvent } from './reject.js';
 import { HelixRelabelEvent } from './relabel.js';
@@ -87,7 +89,7 @@ import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 const registry = {
     HelixActionEvent,
     HelixActivateEvent,
@@ -155,6 +157,8 @@ const registry = {
     HelixPreviousEvent,
     HelixRangeChangeEvent,
     HelixReadEvent,
+    HelixReadingChangeEvent,
+    HelixReadingPressEvent,
     HelixReconnectEvent,
     HelixRejectEvent,
     HelixRelabelEvent,

package/dist/events/names.js

@@ -6,7 +6,8 @@ export const helixEventNames = new Set(('action activate aura-fallback band befo
     'filtered graph-filter graph-layout graph-pan graph-part-change graph-ready ' +
     'graph-signal graph-zoom history load load-more map-cluster map-pan map-part-change ' +
     'map-ready map-rotate map-tilt map-zoom move navigate next panel-resize pin press ' +
-    'preview previous range-change read reconnect reject relabel remove reorder ' +
+    'preview previous range-change read reading-change reading-press reconnect reject ' +
+    'relabel remove reorder ' +
     'reordered resize resized sample-end sample-start scrolled select selected send ' +
     'shortcut sort sorted split toggle tour-ask tour-status typing')
     .split(' ')

package/dist/events/reading-change.d.ts

@@ -0,0 +1,14 @@
+import type { ReadingDetail } from './details.js';
+/**
+ * A chart moved to a reading, or put its reading away: a pointer crossed into
+ * one, a tap or a key landed on one, or the pointer left. Chart.js's
+ * `onHover`.
+ *
+ * Sent once for each change, never for a pointer moving within the reading it
+ * is already on. `index` is `-1` once no reading is shown. Not cancelable,
+ * since the chart has already moved. Bubbles and is composed.
+ */
+export declare class HelixReadingChangeEvent extends CustomEvent<ReadingDetail> {
+    static readonly eventName = "helix-reading-change";
+    constructor(detail: ReadingDetail);
+}

package/dist/events/reading-change.js

@@ -0,0 +1,11 @@
+export class HelixReadingChangeEvent extends CustomEvent {
+    static { this.eventName = 'helix-reading-change'; }
+    constructor(detail) {
+        super(HelixReadingChangeEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/events/reading-press.d.ts

@@ -0,0 +1,13 @@
+import type { ReadingDetail } from './details.js';
+/**
+ * A reading of a chart was pressed: clicked, tapped, or Enter or Space on the
+ * plot while the keys rest on it. Chart.js's `onClick`.
+ *
+ * For a page that opens what a reading stands for, such as the month behind a
+ * column. Not cancelable, since a chart does nothing of its own on a press.
+ * Bubbles and is composed.
+ */
+export declare class HelixReadingPressEvent extends CustomEvent<ReadingDetail> {
+    static readonly eventName = "helix-reading-press";
+    constructor(detail: ReadingDetail);
+}

package/dist/events/reading-press.js

@@ -0,0 +1,11 @@
+export class HelixReadingPressEvent extends CustomEvent {
+    static { this.eventName = 'helix-reading-press'; }
+    constructor(detail) {
+        super(HelixReadingPressEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}

package/dist/helix-element/helix-element.js

@@ -7,9 +7,10 @@ const BOX_SIZING = '*,::before,::after{box-sizing:border-box}';
 const HIDDEN = ":host([hidden]:not([hidden='until-found'])){display:none}";
 const SCROLLER = '[data-scroller]{overflow:auto}';
 const VIRTUAL = '[data-virtual]{overflow-anchor:none}';
+const SPOKEN = '[data-spoken]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}';
 const MIRROR = ':host(:dir(rtl)) [data-mirror]{scale:-1 1}';
 const SETTLED = ':host(:not(:state(settled))),:host(:not(:state(settled))) *{transition:none!important}';
-const BASE = unsafeCSS(BOX_SIZING + HIDDEN + SCROLLER + VIRTUAL + MIRROR + SETTLED);
+const BASE = unsafeCSS(BOX_SIZING + HIDDEN + SCROLLER + VIRTUAL + SPOKEN + MIRROR + SETTLED);
 const LOOK_EVERY = 16;
 const LOOK_FOR = 96;
 export class HelixElement extends LitElement {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { auditName } from '@fusion.dev/helix-core/audits/name';
 export { AriaForwardController, type AriaForwardOptions, } from './controllers/aria-forward-controller/aria-forward-controller.js';
 export { ArrivalController, type ArrivalOptions, } from './controllers/arrival-controller/arrival-controller.js';
-export { ChartPointerController, type ChartPointerHost, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
+export { ChartPointerController, type ChartPointerHost, type ReadingHeard, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
 export { ChildrenController } from './controllers/children-controller/children-controller.js';
 export { CommandController, type CommandOptions, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
 export { CopyController, type CopyOptions, } from './controllers/copy-controller/copy-controller.js';
@@ -33,7 +33,7 @@ export { SwipeController, type SwipeOptions, } from './controllers/swipe-control
 export { type TokenColor, TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { type ActivateDetail, type AuraFallbackDetail, type BandDetail, type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type PressDetail, type PressPointerType, type RangeDetail, type ReadDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ReorderDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type TourStatusDetail, type TypingDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
+export { type ActivateDetail, type AuraFallbackDetail, type BandDetail, type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type PressDetail, type PressPointerType, type RangeDetail, type ReadDetail, type ReadingDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ReorderDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type TourStatusDetail, type TypingDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -74,6 +74,7 @@ export { segmentName } from './utils/date-segments/date-segments.js';
 export { type DrawDismissOptions, drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip, type ReadingCursor } from './utils/draw-tooltip/draw-tooltip.js';
+export { drawValueAxis } from './utils/draw-value-axis/draw-value-axis.js';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { type ElementByIdOptions, elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
 export { exportParts } from './utils/export-parts/export-parts.js';
@@ -107,7 +108,7 @@ export { plainClick } from './utils/plain-click/plain-click.js';
 export { appleTouch, onAndroid, onApple, type Platform } from './utils/platform/platform.js';
 export { pressType, type RecentPress } from './utils/press-type/press-type.js';
 export { rangeAdd } from './utils/range-add/range-add.js';
-export { type ColorBytes, readColor, rgbOf } from './utils/read-color/read-color.js';
+export { type ColorBytes, type ColorBytesAlpha, readColor, readColorAlpha, rgbOf, } from './utils/read-color/read-color.js';
 export { byRow, type Extremes, extremesOf, type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, seriesKey, unbroken, } from './utils/read-series/read-series.js';
 export { type ElementsProperty, linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
 export { type Relative, type RelativeOptions, relativeTime, } from './utils/relative-time/relative-time.js';

package/dist/index.js

@@ -33,7 +33,7 @@ export { SwipeController, } from './controllers/swipe-controller/swipe-controlle
 export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPinEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, POSITION_LABEL, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -74,6 +74,7 @@ export { segmentName } from './utils/date-segments/date-segments.js';
 export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
+export { drawValueAxis } from './utils/draw-value-axis/draw-value-axis.js';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
 export { exportParts } from './utils/export-parts/export-parts.js';
@@ -107,7 +108,7 @@ export { plainClick } from './utils/plain-click/plain-click.js';
 export { appleTouch, onAndroid, onApple } from './utils/platform/platform.js';
 export { pressType } from './utils/press-type/press-type.js';
 export { rangeAdd } from './utils/range-add/range-add.js';
-export { readColor, rgbOf } from './utils/read-color/read-color.js';
+export { readColor, readColorAlpha, rgbOf, } from './utils/read-color/read-color.js';
 export { byRow, extremesOf, readRows, readSeries, seriesKey, unbroken, } from './utils/read-series/read-series.js';
 export { linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
 export { relativeTime, } from './utils/relative-time/relative-time.js';

package/dist/mixins/mixin-collection/mixin-collection.d.ts

@@ -29,6 +29,11 @@ export declare class CollectionElement {
     protected renderLive(hasContent: boolean): TemplateResult;
     /** News the component has for the live region while there are rows and nothing is loading. */
     protected announced: string;
+    /**
+     * Whether the status line is an `empty` or `loading` slot, with the text as
+     * its fallback. A family that turns it on documents the two slots.
+     */
+    protected statusSlots: boolean;
     /** Binds to a rows slot's `slotchange`, and answers `hasRows` from it. */
     protected countRows(event: Event): void;
     /** What the rows slot is given, read from the host so a first render has it. */

package/dist/mixins/mixin-collection/mixin-collection.js

@@ -17,6 +17,7 @@ export const MixinCollection = (Base) => {
             this.slotCounted = false;
             this.slotRows = 0;
             this.announced = '';
+            this.statusSlots = false;
         }
         static { this.words = ''; }
         countRows(event) {
@@ -49,7 +50,12 @@ export const MixinCollection = (Base) => {
                 return nothing;
             }
             const text = this.loading ? this.loadingText : this.emptyText;
-            const words = cell ? html `<span role=${cell}>${text}</span>` : text;
+            const shown = this.statusSlots
+                ? this.loading
+                    ? html `<slot name="loading">${text}</slot>`
+                    : html `<slot name="empty">${text}</slot>`
+                : text;
+            const words = cell ? html `<span role=${cell}>${shown}</span>` : shown;
             const row = cell ? 'row' : nothing;
             return this.loading
                 ? html `<p part="loading" role=${row}>${words}</p>`