@fusion.dev/helix-headless 0.145.0 → 0.147.0

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, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -12,6 +12,8 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
     constructor() {
         super(...arguments);
         this.area = false;
+        this.dashed = '';
+        this.markers = false;
         this.zero = false;
     }
     get rulesValue() {
@@ -62,7 +64,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 +111,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 +152,25 @@ 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>`)}`;
+    }
+    dashes(name) {
+        const key = seriesKey(name);
+        return this.dashed !== '' && commaList(this.dashed).some((one) => seriesKey(one) === key);
+    }
     renderSeries(one, depth, x, y) {
         if (!this.showsSeries(one.name)) {
             return html `${nothing}`;
@@ -182,7 +204,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
       d=${path}
       data-series=${index}
       fill="none"
-      part="line"
+      part="line${this.dashes(one.name) ? ' line-dashed' : ''}"
       style="--chart-series: var(--chart-series-${index})"
     />`;
     }
@@ -218,9 +240,15 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "curve", void 0);
+__decorate([
+    property()
+], HelixHeadlessLineChart.prototype, "dashed", void 0);
 __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,35 @@ 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. |
+ * | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under `replace`, selects the row it lands on. |
+ * | 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, Page Down, Page Up or Space | Selects every row from the last one pressed, in `multiple`. |
+ * | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under `replace`. |
+ * | Control or Command with A | Selects every row, in `multiple`. |
+ * | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. |
+ * | 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 +100,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 +138,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 +169,39 @@ 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;
+    /**
+     * Page Down or Page Up from the row: focus moves a box's height of rows, the
+     * list's own where it scrolls and the window's where it does not, and lands
+     * the way an arrow does, so `replace` and Shift choose as they do there.
+     */
+    private page;
     /** 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,66 @@ 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, selectsAll, typeaheadByWords, 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, pageReach, 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: typeaheadByWords(),
             wrap: false,
         });
+        this.handleKeyCapture = (event) => {
+            this.moving = { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey };
+        };
         this.handleKeydown = (event) => {
             const row = this.interactive ? this.rowOf(event) : undefined;
-            if (!row || row.disabled || event.altKey || event.ctrlKey || event.metaKey) {
+            if (row && !row.disabled && !event.altKey && /^Page(Down|Up)$/.test(event.key)) {
+                event.preventDefault();
+                this.page(row, event.key === 'PageDown' ? 1 : -1);
+            }
+            this.moving = undefined;
+            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 (selectsAll(event) && 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 === 'Escape' && this.value !== '' && this.selectionMode !== 'none') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.choose('');
+            }
+            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 +82,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 +145,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 +156,59 @@ 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);
+    }
+    page(row, step) {
+        const rows = this.reachable;
+        const edges = rows.map((one) => {
+            const box = one.getBoundingClientRect();
+            return { bottom: box.bottom, top: box.top };
+        });
+        const room = this.scrollHeight > this.clientHeight + 1 ? this.clientHeight : window.innerHeight;
+        const target = rows[pageReach(edges, rows.indexOf(row), room, step)];
+        if (target && target !== row) {
+            target.focusItem();
+        }
+    }
     act(row) {
         if (row.disabled) {
             return;
@@ -160,12 +233,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 +277,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
@@ -17,3 +47,20 @@ export declare const pressedValue: (mode: ListSelectionMode, value: string, pres
  * and from the cell going back reaches the last control.
  */
 export declare const rowStop: (count: number, at: number, step: -1 | 1) => number;
+/** Where a row sits along the list, in pixels, as the page keys measure it. */
+export interface RowEdges {
+    /** The row's top edge. */
+    top: number;
+    /** The row's bottom edge. */
+    bottom: number;
+}
+/**
+ * Where Page Down (`step` 1) or Page Up (`step` -1) goes from row `at`: the
+ * farthest row that fits whole in `room` pixels together with row `at`, so the
+ * row at one edge of the box lands at the other, and at least the next row.
+ *
+ * Measured rather than counted, because a list's rows differ in height. Rows of
+ * one height `h` move `floor(room / h) - 1` rows, which is what Data Table and
+ * Virtual List move. At either end it stays on row `at`.
+ */
+export declare const pageReach: (rows: readonly RowEdges[], at: number, room: number, step: -1 | 1) => number;

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) {
@@ -19,3 +28,19 @@ export const rowStop = (count, at, step) => {
     }
     return next < 0 ? count - 1 : next;
 };
+export const pageReach = (rows, at, room, step) => {
+    const from = rows[at];
+    if (!from) {
+        return at;
+    }
+    let reach = at;
+    for (let next = at + step; next >= 0 && next < rows.length; next += step) {
+        const row = rows[next];
+        const span = step === 1 ? row.bottom - from.top : from.bottom - row.top;
+        if (span > room && next !== at + step) {
+            break;
+        }
+        reach = next;
+    }
+    return reach;
+};