@fusion.dev/helix-headless 0.150.0 → 0.152.0

package/dist/lightbox/zoom-controller.d.ts

@@ -41,6 +41,11 @@ export declare class ZoomController implements ReactiveController {
     hostDisconnected(): void;
     /** Zooms to `scale` about the middle of the box, held to the range. */
     zoomTo(scale: number, at?: Offset): void;
+    /**
+     * Moves a zoomed item by `by`, in pixels, never so far that an edge comes
+     * inside the box. Returns whether it moved.
+     */
+    panBy(by: Offset): boolean;
     /** Back to the item at its own size, in the middle. */
     reset(): void;
     private set;

package/dist/lightbox/zoom-controller.js

@@ -79,6 +79,14 @@ export class ZoomController {
         const next = clampScale(scale, this.options.max());
         this.set(next, zoomAt(at, this.scale, next, this.pan));
     }
+    panBy(by) {
+        if (this.scale <= 1) {
+            return false;
+        }
+        const before = this.pan;
+        this.set(this.scale, { x: before.x + by.x, y: before.y + by.y });
+        return this.pan.x !== before.x || this.pan.y !== before.y;
+    }
     reset() {
         if (this.scale !== 1 || this.pan.x !== 0 || this.pan.y !== 0) {
             this.set(1, { x: 0, y: 0 });

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/menu/root/menu-root.js

@@ -288,6 +288,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 <button
                   part="back"
                   type="button"
+                  role="menuitem"
+                  tabindex="-1"
                   aria-label=${this.backLabel}
                   @click=${() => this.leave()}
                 >

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

@@ -19,6 +19,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * one page can mark the section in view with `aria-current="location"`. Where
  * several are marked, `page` wins.
  *
+ * **The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`
+ * elements, each holding a link, and a screen reader says how many there are
+ * and where each one is, as in Radix's `NavigationMenu.List`. The marker and
+ * the arrow keys work on the list items as they do on bare links. Give the
+ * list `role="list"` as well, since Safari drops the semantics of a list drawn
+ * without bullets.
+ *
  * Set `orientation="vertical"` to stack the destinations in a column, for a
  * sidebar.
  *
@@ -73,7 +80,10 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      */
     orientation?: 'vertical';
     private current;
-    /** The destinations the consumer slotted. */
+    /**
+     * The destinations the consumer slotted, and the items of a slotted list in
+     * place of the list.
+     */
     private get items();
     /** Re-measures when the links change or hand over the current page. */
     private watch;

package/dist/navigation/root/navigation-root.js

@@ -8,6 +8,10 @@ import { AriaForwardController, customElement, focusableElements, focusItemOf, H
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const isList = (element) => element.localName === 'ul' ||
+    element.localName === 'ol' ||
+    element.getAttribute('role') === 'list';
+const markOf = (item) => item.hasAttribute('aria-current') ? item : item.querySelector('[aria-current]');
 const navigable = (item) => {
     const control = () => item.navigationControl ??
         (item.matches(FOCUSABLE) ? item : focusableElements(item)[0]);
@@ -26,10 +30,11 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
             active: () => {
                 const items = this.items;
                 const marked = (item) => {
-                    const current = item.getAttribute('aria-current');
-                    return current !== null && current !== 'false';
+                    const current = markOf(item)?.getAttribute('aria-current');
+                    return current !== null && current !== undefined && current !== 'false';
                 };
-                return (items.find((item) => item.getAttribute('aria-current') === 'page') ?? items.find(marked));
+                return (items.find((item) => markOf(item)?.getAttribute('aria-current') === 'page') ??
+                    items.find(marked));
             },
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
@@ -52,14 +57,14 @@ let HelixHeadlessNavigation = class HelixHeadlessNavigation extends HelixElement
     static { this.words = 'helix-navigation'; }
     get items() {
         const slot = this.renderRoot.querySelector('slot:not([name])');
-        return (slot?.assignedElements() ?? []);
+        return (slot?.assignedElements() ?? []).flatMap((one) => isList(one) ? [...one.children] : [one]);
     }
     watch() {
         this.current?.disconnect();
         this.indicator.place();
         this.current = new MutationObserver(() => this.indicator.place());
         for (const item of this.items) {
-            this.current.observe(item, { attributeFilter: ['aria-current'] });
+            this.current.observe(item, { attributeFilter: ['aria-current'], subtree: true });
         }
     }
     connectedCallback() {

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

@@ -29,6 +29,17 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * the feed holds one page of a longer list, and each row says its place in the
  * whole of it.
  *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | On a row, moves to the next or the previous row. |
+ * | Home, End | On a row, moves to the first or the last row. |
+ * | Page Down, Page Up | From anywhere in a row, moves to the next or the previous row. |
+ * | Control+End | From anywhere in the feed, moves to the first control after it on the page. |
+ * | Control+Home | From anywhere in the feed, moves to the nearest control before it on the page. |
+ * | Tab | Moves through the controls in a row, and on out of the feed. |
+ *
  * **`load-more` adds a button after the list** that sends `helix-load-more`,
  * for a feed that holds one page of a longer list. Append the next page, set
  * `loading` while it is on its way, and take `load-more` off once there is
@@ -246,6 +257,12 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * is how the APG feed pattern moves on from inside an article.
      */
     private readonly handleKeydown;
+    /**
+     * `Control+End` and `Control+Home`, which leave the feed for the first
+     * control after it or the nearest one before it, as the APG feed pattern
+     * does. A feed of many rows is otherwise a long walk to get past.
+     */
+    private leave;
     /**
      * Tells each row whether it is the stop, and where it sits in the feed.
      *

package/dist/notifications/root/notifications-root.js

@@ -34,7 +34,11 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             }
         };
         this.handleKeydown = (event) => {
-            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+            if (event.defaultPrevented || event.altKey || event.metaKey) {
+                return;
+            }
+            if (event.ctrlKey) {
+                this.leave(event);
                 return;
             }
             const rows = this.reachable;
@@ -151,6 +155,22 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
     rowFocused(target) {
         return this.reachable.find((row) => rowBox(row) === target);
     }
+    leave(event) {
+        if (event.key !== 'End' && event.key !== 'Home') {
+            return;
+        }
+        const after = event.key === 'End';
+        const outside = focusableElements(document.body).filter((one) => one.tabIndex >= 0 &&
+            !deepContains(this, one) &&
+            (this.compareDocumentPosition(one) &
+                (after ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING)) !==
+                0);
+        const next = after ? outside[0] : outside.at(-1);
+        if (next) {
+            event.preventDefault();
+            next.focus();
+        }
+    }
     rove() {
         const rows = this.reachable;
         const stop = rovingStop(rows, this.stopRow);

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

@@ -11,9 +11,10 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * The trigger is slotted and stays your own element. A Helix trigger is told
  * whether the popover is open inside its own shadow root. On a plain element,
- * such as a `<button>`, the popover writes `aria-expanded` only once a reader
- * has pressed it, which is after any hydration, and never where you wrote
- * `aria-expanded` yourself. It writes nothing else onto your markup.
+ * such as a `<button>`, the popover writes `aria-expanded`, from a frame after
+ * its own first render, or from the first press where that comes sooner. It
+ * never writes it where you wrote `aria-expanded` yourself, and writes nothing
+ * else onto your markup.
  *
  * The panel is in the top layer through the popover API, so it needs no
  * `z-index`, and an ancestor with `overflow: hidden`, `transform`, `filter`, or
@@ -36,6 +37,17 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * The panel's name is `label` when you set it. Otherwise it is the first
  * heading in the panel, or the elements an `aria-labelledby` on the host names.
+ * A development build warns when a popover opens with nothing but
+ * `fallback-label` to name it.
+ *
+ * **Keyboard.** Opening moves focus to the first control in the panel, or to
+ * the panel where it holds none.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter, Space | On the trigger, opens the panel, or closes it while it is open. |
+ * | Escape | Closes the panel and puts focus back on the trigger. |
+ * | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With `modal`, moves from the last control round to the first and from the first round to the last. |
  *
  * `arrow` draws a point on the panel's edge facing the trigger. The side the
  * panel landed on is on the host as `:state(placed-top)` and its kin, and the
@@ -198,7 +210,7 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     private readonly notePress;
     disconnectedCallback(): void;
     private readonly handleTriggerClick;
-    /** Whether a reader has pressed the trigger, which is after any hydration. */
+    /** Whether the trigger may be told, from a frame after the first render or a reader's press. */
     private pressed;
     /** The plain trigger this popover writes `aria-expanded` on, once it may. */
     private told;
@@ -207,9 +219,8 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      *
      * A Helix trigger by property, through `tellDisclosure`. A plain element,
      * which has no shadow root to keep the state out of the markup, by
-     * `aria-expanded`, and only from a reader's first press on: by then a server
-     * or a framework has long finished writing the element, so the write cannot
-     * be a hydration mismatch. One that already carries `aria-expanded` is the
+     * `aria-expanded`, from a frame after the first render or a reader's first
+     * press on, so a closed panel is said to be closed before anyone presses. One that already carries `aria-expanded` is the
      * consumer's to keep, and is left alone.
      */
     private tellTrigger;

package/dist/popover/root/popover-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 { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, arrowReach, auditName, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
@@ -144,6 +144,10 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         super.connectedCallback();
         this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('click', this.notePress, { capture: true });
+        void this.whenSettled.then(() => {
+            this.pressed = true;
+            this.tellTrigger();
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -180,6 +184,9 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         super.updated(changed);
         this.tellTrigger();
         this.nameByHeading();
+        if (changed.has('open') && this.open) {
+            auditName(this, () => null, 'Give it a `label`, or a heading in the panel.', () => this.label !== '' || this.namedByHeading || headingIn(this.slotted) != null);
+        }
         if (this.settled) {
             this.hideAround();
         }

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/splitter/root/splitter-root.d.ts

@@ -30,6 +30,21 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `collapsed-size` keeps a sliver of the pane visible, such as a tab strip.
  * Collapsing overrides `min` and `max`.
  *
+ * Set `primary` to the pane that keeps its size when the splitter's own size
+ * changes, such as a sidebar beside a window being resized. The other pane
+ * takes all of the change, as Web Awesome's split panel does. Without it,
+ * both panes keep their share.
+ *
+ * **Keyboard.** The divider is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |
+ * | Up, Down | Moves a stacked divider by `step`. |
+ * | Home, End | Moves the divider to its bounds. |
+ * | Enter | Collapses the start pane, and opens it again. |
+ * | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -191,6 +206,32 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get position(): number;
     set position(next: number);
+    /**
+     * The pane that keeps its size when the splitter's own size changes. The
+     * other pane takes all of the change. Unset, both keep their share.
+     */
+    primary?: 'end' | 'start';
+    /** Watches this element's length along its axis while `primary` is set. */
+    private lengths;
+    /** The length along the axis last seen, in pixels. */
+    private length;
+    /**
+     * Starts or stops watching the length, according to `primary`, and holds
+     * the primary pane's size in pixels as the length changes.
+     */
+    private watchLength;
+    /**
+     * Moves the divider so the primary pane keeps the pixels it had, as the
+     * splitter's length goes from the one last seen to `length`. Not while a
+     * pane is shut or a drag holds the divider.
+     */
+    private holdPrimary;
+    /**
+     * F6, which moves focus between the panes, as the window splitter pattern
+     * allows: from the start pane to the end pane, and from the end pane or the
+     * divider to the start pane. Only a pane that holds a control takes focus.
+     */
+    private readonly handlePaneKeys;
     /**
      * Where a dragged divider snaps, comma separated, as Web Awesome's split
      * panel does: a bare number is a percentage and a length such as `240px` is