@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/dist/lightbox/zoom.js

@@ -0,0 +1,16 @@
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high) || 0;
+export const clampScale = (scale, max) => clamp(scale, 1, Math.max(max, 1));
+export const clampPan = (pan, scale, width, height) => {
+    const x = ((scale - 1) * width) / 2;
+    const y = ((scale - 1) * height) / 2;
+    return { x: clamp(pan.x, -x, x), y: clamp(pan.y, -y, y) };
+};
+export const zoomAt = (at, from, to, pan) => ({
+    x: at.x - ((at.x - pan.x) * to) / from,
+    y: at.y - ((at.y - pan.y) * to) / from,
+});
+export const spread = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+export const between = (a, b) => ({
+    x: (a.x + b.x) / 2,
+    y: (a.y + b.y) / 2,
+});

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

@@ -49,6 +49,8 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart line - The line for one series.
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart marker - The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
+ * @csspart marker-lone - A `marker` on a reading with a blank on either side, which no line reaches. Set alongside `marker`.
  * @csspart plot - The drawing, which takes focus to be read by key.
  * @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.
@@ -138,6 +140,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
     protected get rulesValue(): boolean;
     /** Whether each reading is ruled, which only two values ask for. */
     protected get rulesCategory(): boolean;
+    /**
+     * Draws a mark on every reading, the `marker` part, so a reader sees where
+     * the readings are, as well as the line between them.
+     *
+     * Absent draws none, except on a reading with a blank on either side: it
+     * has no line to be part of, so it takes a mark, the `marker` part with
+     * `marker-lone` beside it, or it would not be drawn at all.
+     */
+    markers: boolean;
     /**
      * The shape of the mark on each series' last reading.
      *
@@ -200,7 +211,8 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * The latest, because where a series ended is the question a line over time
      * is asked first, which is what `AreaChart` gives too. Each series' own last
      * reading, so a series with a blank in the last row still says where it was.
-     * Written the way the table writes it, such as `$128k` for `128000`.
+     * Written the way the table writes it, such as `$128k` for `128000`. A
+     * series a legend hid is not drawn and is not said.
      */
     protected renderSummary(series: Series[]): TemplateResult;
     /**
@@ -255,6 +267,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
         x: number;
         y: number;
     }>): TemplateResult | typeof nothing;
+    /**
+     * The marks on the readings: every one under `markers`, and otherwise only
+     * a reading no line reaches, which has a blank on either side.
+     *
+     * Elements beside the drawing, as the termini are, so a mark is round in a
+     * drawing `preserveAspectRatio="none"` stretches. Placed from the inline
+     * start, as the drawing is mirrored.
+     */
+    protected renderMarkers(series: Series[], x: (value: number) => number, y: (value: number) => number): TemplateResult | typeof nothing;
     /**
      * One series, its wash first so the line is drawn over its own fill.
      *

package/dist/line-chart/root/line-chart-root.js

@@ -12,6 +12,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
     constructor() {
         super(...arguments);
         this.area = false;
+        this.markers = false;
         this.zero = false;
     }
     get rulesValue() {
@@ -62,7 +63,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         const columns = this.plottedColumns;
         const latest = series.flatMap((one, depth) => {
             const last = one.points.at(-1);
-            if (last === undefined) {
+            if (last === undefined || !this.showsSeries(one.name)) {
                 return [];
             }
             const text = rows[last.at]?.cells[columns[depth] ?? -1]?.text ?? String(last.value);
@@ -109,6 +110,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         ${series.map((one, depth) => this.renderSeries(one, depth, x, y))}
       </svg>
       ${this.renderTermini(ends)}
+      ${this.renderMarkers(series, x, y)}
       ${this.renderTooltip()}
     </div>`;
     }
@@ -149,6 +151,21 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
           style=${`--chart-series: var(--chart-series-${end.index}); --chart-terminus-x: ${end.x}%; --chart-terminus-y: ${end.y}%`}
         ></span>`)}`;
     }
+    renderMarkers(series, x, y) {
+        const marks = series.flatMap((one, depth) => this.showsSeries(one.name)
+            ? unbroken(one).flatMap((run) => run.length > 1 && !this.markers
+                ? []
+                : run.map((point) => ({ depth, lone: run.length === 1, point })))
+            : []);
+        if (marks.length === 0) {
+            return nothing;
+        }
+        return html `${marks.map(({ depth, lone, point }) => html `<span
+          aria-hidden="true"
+          part="marker${lone ? ' marker-lone' : ''}"
+          style=${`--chart-series: var(--chart-series-${seriesIndex(depth)}); inset-inline-start: ${(x(point.at) / PLOT_WIDTH) * 100}%; inset-block-start: ${(y(point.value) / PLOT_HEIGHT) * 100}%`}
+        ></span>`)}`;
+    }
     renderSeries(one, depth, x, y) {
         if (!this.showsSeries(one.name)) {
             return html `${nothing}`;
@@ -221,6 +238,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLineChart.prototype, "gridlines", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessLineChart.prototype, "markers", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "terminus", void 0);

package/dist/list/item/list-item.d.ts

@@ -109,6 +109,8 @@ export declare class HelixHeadlessListItem extends HelixElement {
     value: string;
     /** The row's words, or none where the children are not known yet. */
     get words(): string;
+    /** Whether something is slotted into `description`, or false where the children are not known yet. */
+    private get described();
     /** Whether a list with `selection-mode` holds this row, which makes it a row of a grid. */
     private get grouped();
     /** @internal The cell a list with `selection-mode` moves focus to. */

package/dist/list/item/list-item.js

@@ -20,6 +20,9 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
     get words() {
         return this.childrenKnown ? slottedWords(this, ['']) : '';
     }
+    get described() {
+        return this.childrenKnown && this.knownChildren.some((child) => child.slot === 'description');
+    }
     get grouped() {
         return this.focusable !== undefined;
     }
@@ -54,20 +57,26 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
     }
     render() {
         const content = html `${this.renderRail()}<slot name="start"></slot>
-      <slot></slot>
-      <slot name="description"></slot>`;
+      <slot id="label"></slot>
+      <slot name="description" id="description"></slot>`;
         const role = this.grouped ? 'gridcell' : nothing;
         const tabindex = this.grouped ? (this.focusable ? '0' : '-1') : nothing;
+        const labelledby = this.grouped && this.words !== '' ? 'label' : nothing;
+        const describedby = this.grouped && this.described ? 'description' : nothing;
         return this.href === ''
             ? html `<div
           part="row${this.current === undefined ? '' : ' row-current'}"
           role=${role}
           tabindex=${tabindex}
+          aria-labelledby=${labelledby}
+          aria-describedby=${describedby}
         >${content}<slot name="end"></slot></div>`
             : html `<div
           part="row${this.current === undefined ? '' : ' row-current'}"
           role=${role}
           tabindex=${tabindex}
+          aria-labelledby=${labelledby}
+          aria-describedby=${describedby}
         ><a
           part="link"
           href=${this.href}

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

@@ -1,7 +1,7 @@
 import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessListItem } from '../item/list-item.js';
-import { type ListSelectionMode } from '../selection.js';
+import { type ListSelectionBehavior, type ListSelectionMode } from '../selection.js';
 /**
  * @summary A set of rows, announced as a list.
  *
@@ -10,15 +10,33 @@ import { type ListSelectionMode } from '../selection.js';
  * announces each one's position, such as "1 of 7".
  *
  * **`selection-mode` makes the list interactive**, in the way of a grid list:
- * a grid of rows that is one tab stop. Up and Down move between rows, Home
- * and End go to the first and the last, and a typed letter goes to the next
- * row starting with it. Left and Right move between the row and the controls
- * in its `end` slot. `single` selects one row at a time and `multiple` any
- * number, with Space or a press, and `value` holds the selected rows' values,
+ * a grid of rows that is one tab stop. `single` selects one row at a time and
+ * `multiple` any number, and `value` holds the selected rows' values,
  * separated by commas. A change asks with `helix-before-change` and tells
- * with `change`. Enter acts on the row: it follows the row's link, or sends
- * `helix-action` from the row. `none` selects nothing, so a press acts too. A
- * `disabled` row is passed over.
+ * with `change`. `none` selects nothing, so a press acts on the row. A
+ * `disabled` row is passed over. Each row is named by its label and described
+ * by its description, so the words of the controls in `end` are not read as
+ * part of its name.
+ *
+ * `selection-behavior` says what a press does to the rows already selected.
+ * `toggle`, the default, adds or takes out the row. `replace` selects the row
+ * alone, as a file list does, and the arrow keys carry the selection with
+ * them. Control or Command with a press then adds or takes out one row.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | Moves to the next or the previous row. Under `replace`, selects it. |
+ * | Home, End | Moves to the first or the last row. Under `replace`, selects it. |
+ * | A letter or a word | Moves to the next row whose words start with what you typed. |
+ * | Left, Right | Moves between the row and the controls in its `end` slot. |
+ * | Space | Selects the row, or lets it go. |
+ * | Shift with Down, Up, Home, End or Space | Selects every row from the last one pressed, in `multiple`. |
+ * | Control or Command with Down, Up, Home or End | Moves without selecting, under `replace`. |
+ * | Control or Command with A | Selects every row, in `multiple`. |
+ * | Enter | Acts on the row: follows its link, or sends `helix-action` from it. |
+ *
+ * A press with Shift selects every row from the last one pressed, and a press
+ * with Control or Command adds or takes out one row under `replace`.
  *
  * **Leave `selection-mode` unset for a list a reader reads**, and set it for
  * one a reader chooses from or acts on. The rows of an interactive list are
@@ -80,6 +98,12 @@ export declare class HelixHeadlessList extends HelixElement {
      * its last row, as `<ol reversed>` does.
      */
     reversed: boolean;
+    /**
+     * What a press does to the rows already selected, in a list that selects:
+     * `toggle` adds or takes out the row, and `replace` selects it alone and
+     * lets the arrow keys carry the selection.
+     */
+    selectionBehavior: ListSelectionBehavior;
     /**
      * Makes the list interactive: `single` selects one row, `multiple` any
      * number, and `none` moves and acts without selecting. Unset is a list a
@@ -112,6 +136,13 @@ export declare class HelixHeadlessList extends HelixElement {
     value: string;
     /** The row the reader was last on, which keeps the tab stop. */
     private last;
+    /** The value of the row a Shift range runs from: the last row pressed. */
+    private anchor;
+    /**
+     * Shift and Control or Command on the key that is moving focus, read when
+     * focus arrives on a row and cleared once the key has been answered.
+     */
+    private moving;
     /**
      * Up, Down, Home, End and typed letters, moving focus and choosing nothing,
      * from the focused row and without wrapping. Left and Right are the row's.
@@ -136,15 +167,33 @@ export declare class HelixHeadlessList extends HelixElement {
     /** The row a press or a key came from, read off the event's path. */
     private rowOf;
     /**
-     * Selects the row, or lets it go, asking first. `helix-before-change`
-     * carries the `value` the press would leave, and `change` follows once it
-     * has moved.
+     * Selects what a press or a key leaves, asking first. `helix-before-change`
+     * carries the `value` it would leave, and `change` follows once it has moved.
      */
-    protected press(row: HelixHeadlessListItem): void;
+    private choose;
+    /** What `choiceValue` needs of this list for a row. */
+    private choice;
+    /**
+     * Selects the row, or lets it go, by `selection-behavior`: Shift takes in
+     * the rows from the last one pressed, and Control or Command toggles one row
+     * under `replace`. The row is where the next range runs from.
+     */
+    protected press(row: HelixHeadlessListItem, extend?: boolean, toggle?: boolean): void;
+    /**
+     * A key moved focus onto the row: under `replace` it is selected alone, and
+     * with Shift the rows from the anchor are taken in, from `from` where
+     * nothing was pressed yet.
+     */
+    private arrive;
     /** Acts on the row: follows its link, or says it was acted on. */
     protected act(row: HelixHeadlessListItem): void;
     /** Left and Right inside a row: the cell, then each control in `end`, and back. */
     private moveInRow;
+    /**
+     * Notes the modifiers of a key before the keyboard controller moves focus
+     * with it, which happens first, in the same dispatch.
+     */
+    private readonly handleKeyCapture;
     private readonly handleKeydown;
     private readonly handleClick;
     private readonly handleFocusin;

package/dist/list/root/list-root.js

@@ -4,46 +4,57 @@ 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 { commaList, customElement, HelixActionEvent, HelixBeforeChangeEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, requestChange, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, HelixActionEvent, HelixBeforeChangeEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, requestChange, rovingStop, typeaheadBy, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
 import { numbering } from '../numbering.js';
-import { pressedValue, rowStop } from '../selection.js';
+import { choiceValue, rowStop, } from '../selection.js';
 const PRESSABLE = 'a[href], button, input, label, select, textarea, [tabindex]';
 let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
         this.reversed = false;
+        this.selectionBehavior = 'toggle';
         this.value = '';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((row) => this.navigable(row)),
             origin: 'focus',
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
-            typeahead: (item) => item.words,
+            typeahead: typeaheadBy((item) => item.words),
             wrap: false,
         });
+        this.handleKeyCapture = (event) => {
+            this.moving = { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey };
+        };
         this.handleKeydown = (event) => {
+            this.moving = undefined;
             const row = this.interactive ? this.rowOf(event) : undefined;
-            if (!row || row.disabled || event.altKey || event.ctrlKey || event.metaKey) {
+            if (!row || row.disabled || event.altKey) {
                 return;
             }
-            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            const toggle = event.ctrlKey || event.metaKey;
+            if (!toggle && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
                 this.moveInRow(row, event);
                 return;
             }
             if (event.composedPath()[0] !== row.cell) {
                 return;
             }
-            if (event.key === 'Enter') {
+            if (toggle && event.key.toLowerCase() === 'a' && this.selectionMode === 'multiple') {
+                event.preventDefault();
+                const every = this.reachable.map((one) => this.valueFor(one)).join(', ');
+                this.choose(every === this.value ? null : every);
+            }
+            else if (event.key === 'Enter' && !toggle) {
                 event.preventDefault();
                 this.act(row);
             }
-            else if (event.key === ' ') {
+            else if (event.key === ' ' && !event.defaultPrevented) {
                 event.preventDefault();
-                this.press(row);
+                this.press(row, event.shiftKey, toggle);
             }
         };
         this.handleClick = (event) => {
@@ -62,13 +73,17 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
                 this.act(row);
             }
             else {
-                this.press(row);
+                this.press(row, event.shiftKey, event.ctrlKey || event.metaKey);
             }
         };
         this.handleFocusin = (event) => {
             const row = this.interactive ? this.rowOf(event) : undefined;
             if (row && row !== this.last) {
+                const from = this.last;
                 this.last = row;
+                if (event.composedPath()[0] === row.cell) {
+                    this.arrive(row, from);
+                }
                 this.sync();
             }
         };
@@ -121,9 +136,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             .composedPath()
             .find((node) => node instanceof HelixHeadlessListItem && node.parentElement === this);
     }
-    press(row) {
-        const mode = this.selectionMode;
-        if (mode === undefined || mode === 'none' || row.disabled) {
+    choose(next) {
+        if (next === null) {
             return;
         }
         requestChange({
@@ -133,9 +147,47 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             },
             event: (value) => new HelixBeforeChangeEvent({ value }),
             host: this,
-            next: pressedValue(mode, this.value, this.valueFor(row)),
+            next,
         });
     }
+    choice(row, extend, toggle, arrived) {
+        return {
+            anchor: this.anchor,
+            arrived,
+            behavior: this.selectionBehavior,
+            extend,
+            mode: this.selectionMode ?? 'none',
+            pressed: this.valueFor(row),
+            shown: this.reachable.map((one) => this.valueFor(one)),
+            toggle,
+            value: this.value,
+        };
+    }
+    press(row, extend = false, toggle = false) {
+        const mode = this.selectionMode;
+        if (mode === undefined || mode === 'none' || row.disabled) {
+            return;
+        }
+        const next = choiceValue(this.choice(row, extend, toggle, false));
+        if (!extend) {
+            this.anchor = this.valueFor(row);
+        }
+        this.choose(next);
+    }
+    arrive(row, from) {
+        const moving = this.moving;
+        if (!moving || this.selectionMode === undefined || this.selectionMode === 'none') {
+            return;
+        }
+        if (moving.extend && this.anchor === undefined && from) {
+            this.anchor = this.valueFor(from);
+        }
+        const next = choiceValue(this.choice(row, moving.extend, moving.toggle, true));
+        if (!moving.extend && next !== null) {
+            this.anchor = this.valueFor(row);
+        }
+        this.choose(next);
+    }
     act(row) {
         if (row.disabled) {
             return;
@@ -160,12 +212,14 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeyCapture, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusin);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeyCapture, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusin);
@@ -202,6 +256,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessList.prototype, "reversed", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessList.prototype, "selectionBehavior", void 0);
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessList.prototype, "selectionMode", void 0);

package/dist/list/selection.d.ts

@@ -1,13 +1,43 @@
-/** How many rows a reader can select in an interactive list. */
-export type ListSelectionMode = 'multiple' | 'none' | 'single';
+import { type SelectionMode } from '@fusion.dev/helix-core';
+/** How many rows a reader can select in an interactive list: core's `SelectionMode`. */
+export type ListSelectionMode = SelectionMode;
 /**
- * The `value` a press on the row carrying `pressed` leaves.
+ * What a press does to the rows already selected: `toggle` adds or takes out
+ * the row, and `replace` selects it alone, as a file list does.
+ */
+export type ListSelectionBehavior = 'replace' | 'toggle';
+/** A press on a row, or a key arriving on one, and what the list held then. */
+export interface ListChoice {
+    /** The list's `selection-mode`. */
+    mode: ListSelectionMode;
+    /** The list's `selection-behavior`. */
+    behavior: ListSelectionBehavior;
+    /** The list's `value`, before the press. */
+    value: string;
+    /** The value of the row pressed or arrived on. */
+    pressed: string;
+    /** The values of the rows a reader can reach, in order. */
+    shown: readonly string[];
+    /** The value of the row a range runs from, where there is one. */
+    anchor?: string | undefined;
+    /** Whether Shift was held, which takes in the rows from the anchor. */
+    extend?: boolean;
+    /** Whether Control or Command was held, which toggles under `replace` and moves without choosing. */
+    toggle?: boolean;
+    /** Whether a key moved focus onto the row, where a press is false. */
+    arrived?: boolean;
+}
+/**
+ * The `value` a press or an arrival leaves, or `null` where it changes nothing.
  *
- * `single` selects that row alone, or none where it was the one selected.
- * `multiple` adds it, or takes it out. `none` selects nothing and leaves the
- * value as it was. Tag Group answers the same question for its tags.
+ * - With Shift, in a list that selects many, every row from the anchor to this
+ *   one is added, as Data Table and Listbox add a range.
+ * - Under `replace`, the row is selected alone, by a press or by a key moving
+ *   onto it. Control or Command toggles it under a press, and moves without
+ *   choosing under a key.
+ * - Under `toggle`, a press adds or takes out the row, and a key only moves.
  */
-export declare const pressedValue: (mode: ListSelectionMode, value: string, pressed: string) => string;
+export declare const choiceValue: ({ anchor, arrived, behavior, extend, mode, pressed, shown, toggle, value, }: ListChoice) => string | null;
 /**
  * Where Left or Right goes inside a row: `at` is the row's place among its
  * `count` stops, the cell first and its controls after it, and `step` is the

package/dist/list/selection.js

@@ -1,13 +1,22 @@
-import { commaList, toggleValue } from '@fusion.dev/helix-core';
-export const pressedValue = (mode, value, pressed) => {
+import { commaList, pressedValue, rangeAdd } from '@fusion.dev/helix-core';
+export const choiceValue = ({ anchor, arrived = false, behavior, extend = false, mode, pressed, shown, toggle = false, value, }) => {
+    if (mode === 'none') {
+        return null;
+    }
     const now = commaList(value);
-    if (mode === 'single') {
-        return now.includes(pressed) ? '' : pressed;
+    if (extend && mode === 'multiple') {
+        const from = anchor === undefined ? -1 : shown.indexOf(anchor);
+        const range = rangeAdd(now, shown, from, shown.indexOf(pressed));
+        return range ? range.join(', ') : null;
+    }
+    if (behavior === 'replace' && !toggle) {
+        return now.length === 1 && now[0] === pressed ? null : pressed;
     }
-    if (mode === 'multiple') {
-        return toggleValue(now, pressed).join(', ');
+    if (arrived) {
+        return null;
     }
-    return value;
+    const next = pressedValue(mode, value, pressed);
+    return next === value ? null : next;
 };
 export const rowStop = (count, at, step) => {
     if (count <= 1) {

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

@@ -44,18 +44,22 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  *
  * @slot - The options, and any groups of them.
  * @slot empty - What the list shows when it has no options to show, for content richer than `empty-text`.
+ * @slot error - What the list shows while `load-error` is set, for content richer than its text.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot filter-icon - The icon in the filter field. Defaults to a magnifying glass.
  * @slot hint - The hint, for content richer than plain text.
  * @slot label - The label, for content richer than plain text.
  * @slot loading - What the list shows while its options load, for content richer than `loading-text`.
+ * @slot no-results - What the list shows when a filter hides every option, for content richer than `no-results-text`.
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
  * @event {HelixFilterEvent} helix-filter - Fired before the list is filtered, and cancelable.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page of options and set `loading` while you fetch it.
  * @event {Event} input - Fired after the value changes.
  *
- * @csspart empty - The text shown when the filter hides every option.
+ * @csspart empty - The text shown when the list has no options to show, or the filter hides every one. `:state(no-results)` is set for the second.
+ * @csspart error - The text shown while `load-error` is set.
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart filter-icon - The icon beside the filter field.
  * @csspart filter-mark - The default icon beside the filter field, shown when none is slotted.
@@ -68,8 +72,10 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart search-field - The filter field.
  *
  * @cssstate empty - The list has no options to show: none were given, or the filter hid every one.
+ * @cssstate error - While `load-error` is set.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate loading - While `loading` is set.
+ * @cssstate no-results - A filter hid every option of a list that has some.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;
@@ -130,6 +136,14 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Placeholder text for the filter field.
      */
     filterLabel: string;
+    /**
+     * What the list says when its options could not be loaded, such as after a
+     * request to a server fails. Empty is no error.
+     *
+     * Set, it shows under any options there are, in place of `empty-text` and
+     * `loading-text`, and a screen reader hears it. Clear it when you ask again.
+     */
+    loadError: string;
     /**
      * Stops the arrow keys from choosing each option they move to. Enter, Space
      * or a click chooses the highlighted option.
@@ -143,6 +157,13 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Whether more than one option can be chosen.
      */
     multiple: boolean;
+    /**
+     * The text shown when a filter hides every option of a list that has some.
+     *
+     * Absent, the list says `empty-text` in both cases. Set it to tell "nothing
+     * matches what you typed" from "there is nothing here".
+     */
+    noResultsText?: string;
     /**
      * What a screen reader hears when a filter leaves one option. `{count}` is
      * the count.
@@ -430,6 +451,14 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private takeFilter;
     /** Filters at once on a filter still waiting out `filterDelay`. */
     private flushFilter;
+    /** The number of options the list last asked for more at. */
+    private askedAt;
+    /**
+     * Asks for more once the reader is within a screen of the end, React Aria's
+     * `onLoadMore`: once for each number of options, so a scroll that goes on
+     * asks again only after the next page arrived, and never while loading.
+     */
+    private readonly handleScroll;
     /** Requests a new filter, and returns whether the request went through. */
     requestFilter(next: string): boolean;
     /**
@@ -485,6 +514,13 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * the live region still says it.
      */
     protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
+    /**
+     * Whether a filter hid every option of a list that has some, which is a
+     * different thing to say from a list that has none.
+     */
+    private get noResults();
+    /** The error, or what a filter that hid everything says, before the shared words. */
+    protected renderLive(hasContent: boolean): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {