@fusion.dev/helix-headless 0.150.0 → 0.151.0

package/dist/data-table/root/data-table-root.d.ts

@@ -40,6 +40,10 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *   and shows a dash while only some are chosen.
  * - Shift with a press on a checkbox selects every row between it and the row
  *   last chosen.
+ * - `selection-behavior="replace"` makes a press or a move select the row
+ *   alone, as a file list does. Control or Command with a press adds or takes
+ *   out one row, and Shift with a press selects every row from the one last
+ *   chosen.
  *
  * To act on a single row, such as opening it, put a link or a button in a cell.
  *
@@ -56,7 +60,8 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Enter, Space on the `load-more` row | Sends `helix-load-more`. |
- * | Space on a row | Selects the row, in a `selectable` table. |
+ * | Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior="replace"`, selects it alone, and Control or Command with Space adds or takes out the row. |
+ * | Down, Up, Page Down, Page Up under `selection-behavior="replace"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |
  * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
  * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
@@ -123,7 +128,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/data-table
  *
  * @slot - The columns, as `TableColumn` elements.
+ * @slot empty - Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot footer - Content below the grid. It replaces the built-in pagination.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`.
@@ -216,6 +223,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * `registerWords('de', { 'helix-data-table': { nextLabel: 'Nächste Seite' } })`.
      */
     static words: string;
+    /** The empty and loading lines are the `empty` and `loading` slots. */
+    protected statusSlots: boolean;
     /**
      * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
      *
@@ -490,6 +499,15 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * {# wybranych} other {# wybranego}}`.
      */
     selectedLabel: string;
+    /**
+     * What a key or a press on a row does to the rows already selected, in a
+     * `selectable` table. `toggle`, the default, keeps them: Space adds or takes
+     * out the row. `replace` selects the row alone, as a file list does: Down and
+     * Up carry the selection with them, and a press on a row selects it. Control
+     * or Command with a press or Space adds or takes out one row, and with a move
+     * goes without selecting. The checkboxes add or take out one row either way.
+     */
+    selectionBehavior: 'replace' | 'toggle';
     /**
      * The name of a row's checkbox. `{row}` is replaced with the row's value in
      * the first column that has a field, or with its key.
@@ -954,7 +972,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     toggleSort(field: string): boolean;
     /**
-     * The columns into the header row, everything else into the toolbar and footer.
+     * The columns into the header row, everything else into the slot it names.
      *
      * Manual assignment, so a consumer's own markup is never written to.
      */
@@ -1124,6 +1142,20 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * request carries only the state it asks for.
      */
     private readonly notePress;
+    /** Whether a press or a move on a row selects it alone. */
+    private get replaces();
+    /**
+     * Selects the row at `row` on the page alone, and makes it where a range
+     * runs from. Asks nothing where it is already the only one selected.
+     */
+    private chooseOnly;
+    /**
+     * A press on a row under `selection-behavior="replace"`: it selects the row
+     * alone, Control or Command adds or takes out the row, and Shift selects
+     * every row from the one last chosen. A press on a control in a cell, or on
+     * the checkbox or grip column, is the control's.
+     */
+    private readonly handleRowClick;
     /**
      * A click on a sortable heading, anywhere but its grip or its edge.
      *

package/dist/data-table/root/data-table-root.js

@@ -30,6 +30,7 @@ const isControl = (element) => element.matches(CONTROL) || element.shadowRoot?.d
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.defaultExpanded = '';
@@ -64,6 +65,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
         this.selectedLabel = '{count} selected';
+        this.selectionBehavior = 'toggle';
         this.selectRowLabel = 'Select {row}';
         this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.total = 0;
@@ -178,6 +180,30 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.notePress = (event) => {
             this.shiftPressed = event.shiftKey;
         };
+        this.handleRowClick = (event) => {
+            if (!this.replaces || event.defaultPrevented) {
+                return;
+            }
+            const place = this.placeOf(event);
+            if (!place || place.row < 0 || place.row >= this.drawnPage.length || place.column < this.lead) {
+                return;
+            }
+            const origin = event.composedPath()[0];
+            if (origin instanceof Node && this.controlsIn(place).some((one) => deepContains(one, origin))) {
+                return;
+            }
+            if (event.shiftKey && this.anchorKey !== undefined) {
+                this.selectRange(place.row);
+                return;
+            }
+            if (event.ctrlKey || event.metaKey) {
+                const data = this.drawnPage[place.row];
+                const key = this.keyOf(data, this.rowIndex(place.row) - 2);
+                this.chooseRow(key, !this.chosen.has(key));
+                return;
+            }
+            this.chooseOnly(place.row);
+        };
         this.handleHeadClick = (event) => {
             if (this.partIn(event, 'grip') || this.partIn(event, 'resizer')) {
                 return;
@@ -251,14 +277,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
             const { column, row } = to;
             event.preventDefault();
+            const onRow = row >= 0 && row < this.drawnPage.length;
             if (event.shiftKey &&
                 this.selectable &&
                 (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
                 place.row >= 0 &&
-                row >= 0 &&
-                row < this.drawnPage.length) {
+                onRow) {
                 this.selectRange(row, place.row);
             }
+            else if (this.replaces &&
+                onRow &&
+                row !== place.row &&
+                !event.shiftKey &&
+                !event.ctrlKey &&
+                !event.metaKey) {
+                this.chooseOnly(row);
+            }
             if (row !== place.row || column !== place.column) {
                 this.moveTo(row, column);
             }
@@ -878,6 +912,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         for (const [name, wanted] of [
             ['toolbar', true],
             ['footer', true],
+            ['empty', true],
+            ['loading', true],
         ]) {
             const slot = root.querySelector(`slot[name="${name}"]`);
             if (slot?.assign && wanted) {
@@ -1201,6 +1237,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('click', this.handleRowClick);
         this.addEventListener('pointerdown', this.notePress, true);
         this.addEventListener('keydown', this.notePress, true);
         this.addEventListener('focusin', this.handleFocusIn);
@@ -1212,6 +1249,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('click', this.handleRowClick);
         this.removeEventListener('pointerdown', this.notePress, true);
         this.removeEventListener('keydown', this.notePress, true);
         this.removeEventListener('focusin', this.handleFocusIn);
@@ -1220,6 +1258,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.removeEventListener('keydown', this.handleGripKey);
         this.removeEventListener('helix-before-resize', this.handleResize);
     }
+    get replaces() {
+        return this.selectable && this.selectionBehavior === 'replace';
+    }
+    chooseOnly(row) {
+        const data = this.drawnPage[row];
+        if (!data) {
+            return;
+        }
+        const key = this.keyOf(data, this.rowIndex(row) - 2);
+        this.anchorKey = key;
+        const now = this.chosen;
+        if (now.size === 1 && now.has(key)) {
+            return;
+        }
+        this.requestSelected(new Set([key]));
+    }
     cellAt(row, column) {
         const offset = this.lead;
         if (row === -1) {
@@ -1402,6 +1456,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     event.preventDefault();
                     this.selectRange(place.row);
                 }
+                else if (this.replaces && row && !event.ctrlKey && !event.metaKey) {
+                    event.preventDefault();
+                    this.chooseOnly(place.row);
+                }
                 else if (this.selectable && row) {
                     event.preventDefault();
                     const key = this.keyOf(row, this.rowIndex(place.row) - 2);
@@ -1595,6 +1653,9 @@ __decorate([
     words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessDataTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessDataTable.prototype, "selectionBehavior", void 0);
 __decorate([
     words,
     property({ attribute: 'select-row-label' })

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

@@ -12,9 +12,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **The line is a separator**, as `<hr>` is, and as Radix Separator, React
  * Aria Separator, and Web Awesome's divider are. It is named by any content
  * set into it, so a screen reader says "Or, separator" where you wrote "Or" on
- * the line. Set `decorative` on a rule that separates nothing, such as one
- * under a heading or between the facts of a byline, and it leaves the
- * accessibility tree.
+ * the line, and the words are read once, as that name. Set words into a
+ * separator and no controls, which are hidden with them. Set `decorative` on
+ * a rule that separates nothing, such as one under a heading or between the
+ * facts of a byline, and it leaves the accessibility tree.
  *
  * Use `orientation="vertical"` between items on one line. A vertical divider
  * stretches to fit its flex parent and sets no height of its own.
@@ -44,9 +45,10 @@ export declare class HelixHeadlessDivider extends HelixElement {
      * Whether screen readers announce the line as a separator, which they now do
      * by default.
      *
-     * It dates from when the line was decorative by default. It is still read,
-     * and it wins over `decorative`, so a divider written with it stays a
-     * separator.
+     * @deprecated Remove it: a divider is a separator unless `decorative` is
+     * set. It dates from when the line was decorative by default, and it is
+     * still read and wins over `decorative`, so a divider written with it stays
+     * a separator.
      */
     announced: boolean;
     /**

package/dist/divider/root/divider-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 { customElement, HelixElement, markRegion, toolbarAround, toolbarAxis, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, markRegion, reportRuntime, toolbarAround, toolbarAxis, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
@@ -38,6 +38,14 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
+        if (changed.has('announced') && this.announced && changed.get('announced') === undefined) {
+            reportRuntime({
+                kind: 'deprecated',
+                message: `<${this.localName} announced> is deprecated: remove it. A divider is a separator ` +
+                    'unless `decorative` is set.',
+                tag: this.localName,
+            });
+        }
     }
     render() {
         const separator = this.announced || !this.decorative;
@@ -47,7 +55,7 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
       aria-labelledby=${separator ? 'content' : nothing}
       aria-orientation=${separator ? this.drawn : nothing}
     ></div>
-      <span id="content" part="content"><slot @slotchange=${() => this.markEmpty()}></slot></span>
+      <span id="content" part="content" aria-hidden=${separator ? 'true' : nothing}><slot @slotchange=${() => this.markEmpty()}></slot></span>
       <div part="line" role="presentation"></div>`;
     }
 };

package/dist/element-events.generated.js

@@ -3,7 +3,9 @@ registerElementEvents({
     'helix-headless-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-announcement': ['helix-dismiss'],
     'helix-headless-app-header': ['helix-scrolled'],
+    'helix-headless-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-avatar': ['error', 'load'],
+    'helix-headless-bar-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-button': ['helix-press'],
     'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
@@ -132,6 +134,7 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
+    'helix-headless-line-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-list': [
         'change',
         'helix-action',
@@ -208,6 +211,7 @@ registerElementEvents({
         'helix-preview',
         'input',
     ],
+    'helix-headless-scatter-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-scroll-area': ['scroll', 'scrollend'],
     'helix-headless-select': [
         'change',

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

@@ -23,6 +23,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the shortcut with the control. A chord the page wrote there itself is left
  * alone, and the key takes back only what it added.
  *
+ * A chord is drawn with the platform's modifiers first, in its order, so one
+ * `keys` value is right everywhere: `mod+shift+p` is `⇧⌘P` on an Apple
+ * keyboard and `Ctrl+Shift+P` elsewhere. Where it is drawn in glyphs, it is
+ * read in words, such as `Shift Command P`.
+ *
  * `caps` draws a chord as a key per key: each is a `key` part and the `+`
  * between two a `separator` part, so a sheet can draw a cap for each.
  * `key-labels` renames any key, on every platform, such as
@@ -141,7 +146,8 @@ export declare class HelixHeadlessKbd extends HelixElement {
     /**
      * The chord under `caps`, a part for each key and for each `+` between two,
      * so a sheet can draw a cap per key. Written with no space between, so a
-     * chord reads as the one label it was.
+     * chord reads as the one label it was. Where the chord is said in words,
+     * the parts are hidden from a screen reader, which reads the words.
      */
     protected renderChord(): TemplateResult;
 }

package/dist/kbd/root/kbd-root.js

@@ -135,12 +135,16 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         if (this.keys === '') {
             return html `<kbd part="kbd"><slot></slot></kbd>`;
         }
-        const { keys, separator } = this.label;
-        return html `<kbd part="kbd">${this.caps ? this.renderChord() : keys.join(separator)}</kbd>`;
+        const { keys, separator, spoken } = this.label;
+        if (spoken === '') {
+            return html `<kbd part="kbd">${this.caps ? this.renderChord() : keys.join(separator)}</kbd>`;
+        }
+        return html `<kbd part="kbd">${this.caps ? this.renderChord() : html `<span aria-hidden="true">${keys.join(separator)}</span>`}<span data-spoken>${spoken}</span></kbd>`;
     }
     renderChord() {
-        const { keys, separator } = this.label;
-        return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator">${separator}</span>` : nothing}<span part="key">${key}</span>`)}`;
+        const { keys, separator, spoken } = this.label;
+        const hidden = spoken === '' ? nothing : 'true';
+        return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator" aria-hidden=${hidden}>${separator}</span>` : nothing}<span part="key" aria-hidden=${hidden}>${key}</span>`)}`;
     }
 };
 __decorate([

package/dist/line-chart/root/line-chart-root.d.ts

@@ -27,6 +27,9 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * `<svg>` that fills its box scales with the box, so the same `font-size` can
  * render at 10px in a narrow chart and 43px in a wide one.
  *
+ * `value-axis` draws the scale's numbers beside the plot, at the levels
+ * `gridlines` rules, written in `locale`.
+ *
  * The table is the accessible representation, and the drawing is hidden from
  * screen readers, who get the numbers. The `summary` part names the chart, from
  * `label` or the table's caption, and gives each series' latest reading.
@@ -37,13 +40,22 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * a reading. The tooltip follows, the `live` part says the reading in words,
  * and Escape puts the tooltip away.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
+ * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
+ * pressed with Enter or Space, for a page that opens what a reading stands for.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
  *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
  * @csspart area - The wash under one line, where `area` is set.
+ * @csspart axis - The numbers of the scale beside the plot, under `value-axis`.
  * @csspart band - The band around the reading under the pointer.
  * @csspart baseline - The rule at zero, where zero is inside the range.
  * @csspart gridline - One rule across the plot, under `gridlines`.
@@ -60,6 +72,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart summary - The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the lines and areas sit on.
  * @csspart terminus - The mark on one series' last reading.
+ * @csspart tick - One number on the axis, placed with `inset-block-start` at its level.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -79,6 +92,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  *
  * @cssproperty --chart-terminus-x - Where a series' last reading sits horizontally, as a percentage. Written by the component.
  * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
+ * @cssproperty --line-chart-axis - The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
     /**
@@ -86,6 +100,13 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * `registerWords('de', { 'helix-line-chart': { positionLabel: '{position} von {count}' } })`.
      */
     static words: string;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, which the pointer hears. Here and not in a
+     * constructor, where the manifest's analyzer reads the assignment as a
+     * member of this class.
+     */
+    connectedCallback(): void;
     /**
      * Draws a wash under each line, down to the floor of the plot. The washes
      * overlap and do not add up, so for parts that make a total, use
@@ -202,6 +223,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * layers; a single `mask-image` would only ever cut the last one.
      */
     terminus?: 'none' | 'ring' | 'square' | 'triangle';
+    /**
+     * Draws the scale's numbers beside the plot, the `axis` part, at the levels
+     * `gridlines` rules, so a reading can be measured off the drawing as well
+     * as read from the tooltip.
+     *
+     * Absent draws none: a line read for its shape needs no numbers beside it,
+     * and the tooltip and the table hold every reading.
+     */
+    valueAxis: boolean;
     /** The domain every series is drawn against, which the tooltip also needs. */
     private range;
     /**
@@ -223,6 +253,12 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      */
     private ends;
     protected render(): TemplateResult;
+    /**
+     * The scale's numbers beside the plot, under `value-axis`, written in the
+     * chart's locale. A seam, so a subclass can write the numbers its own way,
+     * such as a currency.
+     */
+    protected renderAxis(y: (value: number) => number, domain: [number, number]): TemplateResult;
     /**
      * What a reader who cannot see the lines is told: the chart's name and the
      * latest reading of each series.

package/dist/line-chart/root/line-chart-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 { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, drawValueAxis, extent, formatNumbers, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -14,9 +14,16 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         this.area = false;
         this.dashed = '';
         this.markers = false;
+        this.valueAxis = false;
         this.zero = false;
     }
     static { this.words = 'helix-line-chart'; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
+    }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -58,7 +65,10 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / readings.length;
         const x = linear([0, Math.max(readings.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
-        return html `${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}`;
+        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(series, x, y, domain)} ${this.renderLabels(readings)}${this.renderSummary(series)}`;
+    }
+    renderAxis(y, domain) {
+        return drawValueAxis(domain, (value) => (y(value) / PLOT_HEIGHT) * 100, formatNumbers(wordsLocale(this)), (widest) => `--line-chart-axis: ${widest}ch`);
     }
     renderSummary(series) {
         const rows = this.sourceRows;
@@ -254,6 +264,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "terminus", void 0);
+__decorate([
+    property({ attribute: 'value-axis', reflect: true, type: Boolean })
+], HelixHeadlessLineChart.prototype, "valueAxis", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLineChart.prototype, "zero", void 0);

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

@@ -66,12 +66,20 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * reads in its own direction. The summary and the tooltip bubble follow the
  * page's direction.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
+ * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
+ * pressed with Enter or Space, for a page that opens what a reading stands for.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot
  * @documentation https://fusion.dev/helix/components/scatter-chart
  *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
  * @csspart gridline - One line across the plot, drawn when `gridlines` is set.
  * @csspart live - The readout: a polite live region that says the row the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
@@ -238,6 +246,16 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * rest on a point with.
      */
     private readonly handleMove;
+    /**
+     * The point a tap lands nearest, within twice a pointer's reach, a finger
+     * being broader than a cursor. It stays shown until a tap lands elsewhere.
+     */
+    private readonly handleTap;
+    /**
+     * The drawn point nearest a pointer, within `reach` pixels, `undefined` for
+     * none in reach, and `null` with no plot to measure.
+     */
+    private pointNear;
     private readonly handleLeave;
 }
 declare global {

package/dist/scatter-chart/root/scatter-chart-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 { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -47,28 +47,27 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             if (event.pointerType !== 'mouse' && event.pointerType !== 'pen') {
                 return;
             }
-            const box = this.partNamed('plot')?.getBoundingClientRect();
-            if (!box || box.width === 0 || box.height === 0) {
+            const found = this.pointNear(event, REACH);
+            if (found === null) {
                 return;
             }
-            const across = event.clientX - box.left;
-            const up = event.clientY - box.top;
-            let found;
-            let best = REACH ** 2;
-            for (const point of this.drawn) {
-                const distance = ((point.x / PLOT_WIDTH) * box.width - across) ** 2 +
-                    ((point.y / PLOT_HEIGHT) * box.height - up) ** 2;
-                if (distance <= best) {
-                    best = distance;
-                    found = point;
-                }
-            }
             if (found !== this.nearest) {
                 this.nearest = found;
                 this.pointer.set(found?.row ?? -1);
                 this.requestUpdate();
             }
         };
+        this.handleTap = (event) => {
+            if (event.pointerType !== 'touch') {
+                return;
+            }
+            const found = this.pointNear(event, REACH * 2);
+            if (found) {
+                this.nearest = found;
+                this.pointer.tapTo(found.row);
+                this.requestUpdate();
+            }
+        };
         this.handleLeave = () => {
             this.nearest = undefined;
         };
@@ -77,13 +76,18 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
         this.addEventListener('pointermove', this.handleMove);
         this.addEventListener('pointerleave', this.handleLeave);
+        this.addEventListener('pointerup', this.handleTap);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('pointermove', this.handleMove);
         this.removeEventListener('pointerleave', this.handleLeave);
+        this.removeEventListener('pointerup', this.handleTap);
     }
     seriesOf(cell) {
         const depth = this.measures.ups.indexOf(cell);
@@ -253,6 +257,25 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             y: `${point.y}%`,
         }, (cell) => this.seriesOf(cell), this.pointer);
     }
+    pointNear(event, reach) {
+        const box = this.partNamed('plot')?.getBoundingClientRect();
+        if (!box || box.width === 0 || box.height === 0) {
+            return null;
+        }
+        const across = event.clientX - box.left;
+        const up = event.clientY - box.top;
+        let found;
+        let best = reach ** 2;
+        for (const point of this.drawn) {
+            const distance = ((point.x / PLOT_WIDTH) * box.width - across) ** 2 +
+                ((point.y / PLOT_HEIGHT) * box.height - up) ** 2;
+            if (distance <= best) {
+                best = distance;
+                found = point;
+            }
+        }
+        return found;
+    }
 };
 __decorate([
     words,

package/dist/table/column/table-column.js

@@ -174,6 +174,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         const named = { name, named: name ? 'yes' : 'no' };
         const grid = this.gridCell;
         const control = grid ? '-1' : nothing;
+        const width = Math.min(4096, Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn));
         return html `<span
       part="column"
       role=${grid ? 'columnheader' : nothing}
@@ -197,8 +198,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             aria-orientation="vertical"
             aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
             aria-valuemax="4096"
-            aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
-            aria-valuetext=${formatWords(this, 'widthLabel', { width: this.drawn })}
+            aria-valuenow=${width}
+            aria-valuetext=${formatWords(this, 'widthLabel', { width })}
             @keydown=${this.handleResizeKey}
             @pointerdown=${this.handleResizeStart}
             @pointermove=${this.handleResizeMove}