@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -40,6 +40,12 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * you have moved it somewhere else on the page. A stop does not trap focus, so
  * you can still `Tab` out to the element it describes.
  *
+ * **The arrow keys move between stops** while focus is in one: the arrow that
+ * points the way the line runs goes on, and the other goes back, so on a
+ * right-to-left page `ArrowLeft` goes on. Neither finishes the tour at the last
+ * stop, and a text field in a stop keeps its own arrows. `Escape` skips the
+ * tour.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -159,6 +165,15 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     private finish;
     private move;
     private readonly handleAsk;
+    /**
+     * The arrow along the line, from inside a stop: on, or back.
+     *
+     * A move and never a finish, so a reader walking the stops with the arrows
+     * cannot end the tour by going one too far; that is Next on the last stop.
+     */
+    private readonly handleArrows;
+    /** Whether `back()` would move, there being a stop that shows before this one. */
+    private get canGoBack();
     private readonly handleKeydown;
     private readonly handleViewport;
     connectedCallback(): void;

package/dist/tour/root/tour-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 { controlsIn, customElement, deepActiveElement, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
+import { controlsIn, customElement, deepActiveElement, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, inlineStep, keyClaimed, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import { stopBefore } from '../back.js';
@@ -36,6 +36,20 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
                 this.skip();
             }
         };
+        this.handleArrows = (event) => {
+            if (!this.open || keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const along = inlineStep(this, event.key);
+            if (along === 1 && this.index < this.length - 1) {
+                event.preventDefault();
+                this.next();
+            }
+            else if (along === -1 && this.canGoBack) {
+                event.preventDefault();
+                this.back();
+            }
+        };
         this.handleKeydown = (event) => {
             if (this.open && event.key === 'Escape' && !event.defaultPrevented) {
                 event.preventDefault();
@@ -99,9 +113,13 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
             this.dispatchEvent(new HelixActivateEvent({ value: String(this.index) }));
         }
     }
+    get canGoBack() {
+        return (stopBefore(this.stops.map((stop) => stop.type), this.index) !== undefined);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-tour-ask', this.handleAsk);
+        this.addEventListener('keydown', this.handleArrows);
         document.addEventListener('keydown', this.handleKeydown);
         window.addEventListener('resize', this.handleViewport, { passive: true });
         window.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
@@ -112,6 +130,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-tour-ask', this.handleAsk);
+        this.removeEventListener('keydown', this.handleArrows);
         document.removeEventListener('keydown', this.handleKeydown);
         window.removeEventListener('resize', this.handleViewport);
         window.removeEventListener('scroll', this.handleViewport, { capture: true });

package/dist/tour/stop/tour-stop.d.ts

@@ -62,6 +62,7 @@ import '../../button/index.js';
  * @csspart back - The control that goes to the previous stop.
  * @csspart back-button - The button inside `back`.
  * @csspart back-live - The live region inside `back`.
+ * @csspart back-spinner - The ring `back` turns while it is pending.
  * @csspart back-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart bubble - The panel that points at the target.
  * @csspart content - The region holding the slotted content.
@@ -70,11 +71,13 @@ import '../../button/index.js';
  * @csspart next - The control that goes to the next stop, and finishes the tour on the last stop.
  * @csspart next-button - The button inside `next`.
  * @csspart next-live - The live region inside `next`.
+ * @csspart next-spinner - The ring `next` turns while it is pending.
  * @csspart next-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart progress - The stop's place in the tour, such as "2 of 5". It describes the panel, and is shown when the tour has `progress`.
  * @csspart skip - The control that ends the tour early.
  * @csspart skip-button - The button inside `skip`.
  * @csspart skip-live - The live region inside `skip`.
+ * @csspart skip-spinner - The ring `skip` turns while it is pending.
  * @csspart skip-text - The words on that button, trimmed to their capitals and baseline.
  *
  * @cssstate placed-bottom - The panel sits below its target.

package/dist/tour/stop/tour-stop.js

@@ -86,14 +86,14 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
         return html `<slot name="actions">
       <${this.tag('button')}
         part="skip"
-      exportparts="button: skip-button, live: skip-live, text: skip-text" emphasis="ghost" @click=${() => this.ask('skip')}>
+      exportparts="button: skip-button, live: skip-live, spinner: skip-spinner, text: skip-text" emphasis="ghost" @click=${() => this.ask('skip')}>
         ${this.skipLabel}
       </${this.tag('button')}>
       ${this.first
             ? ''
             : html `<${this.tag('button')}
               part="back"
-      exportparts="button: back-button, live: back-live, text: back-text"
+      exportparts="button: back-button, live: back-live, spinner: back-spinner, text: back-text"
               emphasis="outlined"
               @click=${() => this.ask('back')}
             >
@@ -101,7 +101,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
             </${this.tag('button')}>`}
       <${this.tag('button')}
         part="next"
-      exportparts="button: next-button, live: next-live, text: next-text"
+      exportparts="button: next-button, live: next-live, spinner: next-spinner, text: next-text"
         emphasis="solid"
         tone="primary"
         @click=${() => this.ask('next')}

package/dist/tree/root/tree-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, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
@@ -217,7 +217,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         return true;
     }
     handleMultiple(current, event) {
-        if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 'a') {
+        if (selectsAll(event)) {
             const leaves = this.items
                 .filter((item) => !this.holds(item) && !item.disabled && item.value !== '')
                 .map((item) => item.value);

package/dist/trend/figure.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The movement a signed change makes: `up` above zero, `down` below it and
+ * `neutral` at zero. Nothing for a value that is no number, so a trend with
+ * none falls back to what its attributes say.
+ */
+export declare const movementOf: (value: number | undefined) => 'down' | 'neutral' | 'up' | undefined;
+/**
+ * A change written in a locale with `Intl.NumberFormat` options, such as
+ * `12%` for 0.12 with `{ style: 'percent' }`.
+ *
+ * **The size of the change, with no sign**, because the movement is already
+ * said by the arrow and the word: "Down, worse 8%" rather than "Down, worse
+ * -8%". Options that set `signDisplay` ask for the sign, and get the value as
+ * it is.
+ */
+export declare const figureOf: (value: number, locale?: string, options?: Intl.NumberFormatOptions) => string;

package/dist/trend/figure.js

@@ -0,0 +1,8 @@
+import { formatNumber } from '@fusion.dev/helix-core';
+export const movementOf = (value) => {
+    if (value === undefined || !Number.isFinite(value)) {
+        return undefined;
+    }
+    return value > 0 ? 'up' : value < 0 ? 'down' : 'neutral';
+};
+export const figureOf = (value, locale = '', options) => formatNumber(options?.signDisplay === undefined ? Math.abs(value) : value, locale, options);

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

@@ -21,6 +21,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `worse-label`, so a page in another language can set its own. The arrow and
  * any glyph slotted in its place are hidden from screen readers.
  *
+ * **Or give the change as a number.** `value` is the signed change, such as
+ * `0.12` or `-8`: its sign is the movement, and its size is written as the
+ * metric with `Intl.NumberFormat`, in `locale` and with `format-options`,
+ * such as `{"style":"percent"}` for `12%`. `movement` still wins when it is
+ * written. Without `value` the metric is what the page slots.
+ *
  * Slot one glyph per movement into `up-icon`, `down-icon` and `neutral-icon`,
  * and the trend shows the one that matches; a glyph in `icon` stands in for
  * all three. Inside a `Stat`, put the trend in the stat's `trend` slot so it is
@@ -36,7 +42,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Delta, Change, Movement
  * @documentation https://fusion.dev/helix/components/trend
  *
- * @slot - The metric that moved.
+ * @slot - The metric that moved. Not needed with `value`, which writes it.
  * @slot down-icon - Replaces the arrow while `movement` is `down`. Hidden from screen readers.
  * @slot icon - Replaces the arrow for every movement, such as with a glyph of your own set. Hidden from screen readers, since the movement is also a word.
  * @slot label - The period the metric moved over.
@@ -45,6 +51,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart direction - The movement as a word, for people who cannot see the arrow.
  * @csspart icon - The arrow.
+ * @csspart value - The change written from `value`, hidden while `value` is no number.
  *
  * @cssstate better - The trend moved the way `good` names.
  * @cssstate worse - The trend moved against the way `good` names.
@@ -66,6 +73,20 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * The word read out for a move down.
      */
     downLabel: string;
+    /**
+     * `Intl.NumberFormat` options `value` is written with, as React Aria's
+     * NumberField takes them: a percent, a currency, a unit or a number of
+     * decimals. Written as JSON in the attribute.
+     *
+     * ```html
+     * <helix-trend value="-0.084" format-options='{"style":"percent","maximumFractionDigits":1}'></helix-trend>
+     * ```
+     *
+     * The example says "Down 8.4%". The size is written without a sign, since
+     * the arrow and the word say which way; set `signDisplay` for one. Absent
+     * writes the number as the locale writes any number.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
     /**
      * Which movement counts as an improvement for this metric.
      *
@@ -75,6 +96,13 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * movement changes underneath.
      */
     good?: 'down' | 'up';
+    /**
+     * The locale `value` is written in, such as `de` for `1.234,5`.
+     *
+     * Absent uses the runtime's own. Set it on a page rendered on a server, so
+     * the server and the browser write the figure alike.
+     */
+    locale: string;
     /**
      * Which way the measurement moved.
      *
@@ -94,6 +122,16 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * The word read out for a move up.
      */
     upLabel: string;
+    /**
+     * The change as a signed number, such as `0.12` or `-8`, which sets the
+     * movement by its sign and is written as the metric.
+     *
+     * Above zero is up, below is down, and zero is neutral; `movement` wins when
+     * both are written. The size is written in the `value` part with
+     * `format-options` and `locale`, in place of a slotted metric. Absent leaves
+     * the movement to `movement` and the metric to the slot.
+     */
+    value?: number;
     /**
      * The word read out after the direction when the move is a setback.
      */
@@ -110,10 +148,11 @@ export declare class HelixHeadlessTrend extends HelixElement {
         content: string;
         viewBox: string;
     }): TemplateResult;
-    /** The movement, read from `movement` and then from the old `direction`. */
+    /** The movement, read from `movement`, then from the old `direction`, then from the sign of `value`. */
     private get moved();
     /** Better or worse, or neither when `good` is unset or nothing moved. */
     private get judged();
+    protected updated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/trend/root/trend-root.js

@@ -4,11 +4,12 @@ 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 } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { arrowDown, arrowUp, minus } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { figureOf, movementOf } from '../figure.js';
 const DIRECTIONS = {
     down: { icon: arrowDown, word: 'downLabel' },
     neutral: { icon: minus, word: 'unchangedLabel' },
@@ -20,6 +21,7 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         super(...arguments);
         this.betterLabel = 'better';
         this.downLabel = 'Down';
+        this.locale = '';
         this.unchangedLabel = 'Unchanged';
         this.upLabel = 'Up';
         this.worseLabel = 'worse';
@@ -38,7 +40,7 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
     >`;
     }
     get moved() {
-        return this.movement ?? this.direction;
+        return this.movement ?? this.direction ?? movementOf(this.value);
     }
     get judged() {
         const moved = this.moved;
@@ -47,6 +49,17 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         }
         return this.good === moved ? 'better' : 'worse';
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('direction') && this.direction && changed.get('direction') === undefined) {
+            reportRuntime({
+                kind: 'deprecated',
+                message: `<${this.localName} direction="${this.direction}"> is deprecated: write ` +
+                    `movement="${this.direction}", which says the same. \`direction\` is a layout on Stat and Flex.`,
+                tag: this.localName,
+            });
+        }
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         const judged = this.judged;
@@ -64,9 +77,13 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
             : moved === 'down'
                 ? html `<slot aria-hidden="true" name="down-icon">${icon}</slot>`
                 : html `<slot aria-hidden="true" name="neutral-icon">${icon}</slot>`;
+        const value = this.value;
+        const figure = value === undefined || !Number.isFinite(value)
+            ? ''
+            : figureOf(value, this.locale, this.formatOptions);
         return html `${glyph}
       <span part="direction">${`${this[direction.word]}${judgment}`}</span>
-      <slot></slot>
+      <span part="value" ?hidden=${figure === ''}>${figure}</span><slot></slot>
       <slot name="label"></slot>`;
     }
 };
@@ -79,9 +96,15 @@ __decorate([
 __decorate([
     property({ attribute: 'down-label' })
 ], HelixHeadlessTrend.prototype, "downLabel", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessTrend.prototype, "formatOptions", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    property()
+], HelixHeadlessTrend.prototype, "locale", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "movement", void 0);
@@ -91,6 +114,9 @@ __decorate([
 __decorate([
     property({ attribute: 'up-label' })
 ], HelixHeadlessTrend.prototype, "upLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessTrend.prototype, "value", void 0);
 __decorate([
     property({ attribute: 'worse-label' })
 ], HelixHeadlessTrend.prototype, "worseLabel", void 0);

package/dist/video/root/extra-controls.d.ts

@@ -20,6 +20,18 @@ export interface Conditions {
 }
 /** Whether this platform can do a named control at all. */
 export declare const offers: (one: string, player: Conditions) => boolean;
+/**
+ * What `full` stands for in a list of controls: every control that does
+ * something to the video by itself, as Web Awesome's `full` preset adds speed
+ * and picture in picture to its standard bar.
+ *
+ * `download`, `previous` and `next` are left out. Offering the file is a
+ * decision about the content, and the other two move a set the player cannot
+ * see, so each is named where it is wanted.
+ */
+export declare const FULL_CONTROLS: readonly ['rewind', 'forward', 'speed', 'pip', 'remote'];
+/** The names in a written list, with `full` read as the controls it stands for, each once. */
+export declare const controlNames: (written: string) => string[];
 /** The extras asked for, in order, and only the ones this platform can do. */
 export declare const barControls: (written: string, player: Conditions) => string[];
 /**

package/dist/video/root/extra-controls.js

@@ -20,10 +20,14 @@ export const offers = (one, player) => {
     }
     return one === 'speed';
 };
-export const barControls = (written, player) => writtenList(written).filter((one) => offers(one, player));
+export const FULL_CONTROLS = ['rewind', 'forward', 'speed', 'pip', 'remote'];
+export const controlNames = (written) => [
+    ...new Set(writtenList(written).flatMap((one) => one === 'full' ? FULL_CONTROLS : [one])),
+];
+export const barControls = (written, player) => controlNames(written).filter((one) => offers(one, player));
 export const menuControls = (written, onBar, player) => {
     const bar = new Set(onBar);
-    return writtenList(written).filter((one) => !bar.has(one) && offers(one, player));
+    return controlNames(written).filter((one) => !bar.has(one) && offers(one, player));
 };
 export const ownFile = (src) => {
     if (src === '') {

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

@@ -242,7 +242,11 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * that cannot work is worse than one that is not there.
      *
      * The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
-     * `previous` and `next`.
+     * `previous` and `next`. `full` stands for `rewind`, `forward`, `speed`,
+     * `pip` and `remote` in that order, the controls that act on the video by
+     * themselves, as Web Awesome's `full` preset does, and a name it already
+     * holds is drawn once. `extra-controls="full"` is the whole bar, and
+     * `overflow-controls="full"` puts all of it behind one button.
      *
      * **`previous` and `next` do nothing to the video, and are offered anyway.**
      * They announce `helix-previous` and `helix-next` and stop there, so what

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
 import { type Repeat } from '../order.js';
 declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -44,7 +45,7 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * @slot - The entries.
  * @slot player - The player that plays the entries.
  *
- * @event {HelixActivateEvent} helix-activate - The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left.
+ * @event {HelixActivateEvent} helix-activate - The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name.
  * @event {HelixBeforeActivateEvent} helix-before-activate - The current entry is about to change. Cancelable: cancel it to keep the current entry.
  * @event {HelixEndEvent} helix-end - The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
  *
@@ -137,6 +138,15 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * under `repeat="one"` asks for, and a list of one under `repeat="all"`.
      */
     private replay;
+    /**
+     * The entry that is current, with the `src`, `poster`, `value` and name the
+     * player was given, or `undefined` in an empty playlist.
+     *
+     * Read it in a `helix-activate` listener for the clip the playlist moved to,
+     * which Web Awesome's change event carries: the event says which entry by
+     * value, and this is the entry.
+     */
+    get currentEntry(): HelixHeadlessVideoPlaylistItem | undefined;
     /**
      * Moves to the next entry and plays it, as the player's next control does.
      * Follows `shuffle`, goes round under `repeat="all"`, and stays on the last

package/dist/video-playlist/root/video-playlist-root.js

@@ -81,6 +81,9 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         player.currentTime = 0;
         void Promise.resolve(player.play()).catch(() => { });
     }
+    get currentEntry() {
+        return this.resolveActive(this.items);
+    }
     next() {
         this.step(1);
     }

package/dist/virtual-list/fill.d.ts

@@ -20,3 +20,14 @@
 export declare const textOf: (value: unknown) => string;
 /** Fills one element's holes, its own and those below it, from an item. */
 export declare const fillHoles: (root: Element, item: unknown) => void;
+/**
+ * The key of item `at` in a selecting list's `value`: its `keyField` where it
+ * is an object and one is named, a string or a number item itself, and its
+ * place in the set otherwise.
+ */
+export declare const keyOf: (item: unknown, at: number, keyField: string) => string;
+/**
+ * The text typing matches for each item: its `field`, or a string or number
+ * item itself, and nothing where an object has no `field` to read.
+ */
+export declare const textsOf: (data: readonly unknown[], field: string) => string[];

package/dist/virtual-list/fill.js

@@ -21,3 +21,12 @@ export const fillHoles = (root, item) => {
         }
     }
 };
+export const keyOf = (item, at, keyField) => {
+    if (keyField !== '' && item !== null && typeof item === 'object') {
+        return textOf(valueAt(item, keyField));
+    }
+    return typeof item === 'string' || typeof item === 'number' ? String(item) : String(at);
+};
+export const textsOf = (data, field) => data.map((item) => field === '' || item === null || typeof item !== 'object'
+    ? textOf(item)
+    : textOf(valueAt(item, field)));

package/dist/virtual-list/keys.d.ts

@@ -1,15 +1,24 @@
 /**
- * Which item a key moves to in a vertical list of `count` items, from `at`.
+ * Which item a key moves to in a list of `count` items laid out `across`
+ * items to a line, from `at`.
  *
  * Index arithmetic, because most of the items are not drawn: the list moves to
  * an index, scrolls it into view, and focuses the row once it is there. The
- * keys are the ones a listbox answers:
+ * keys are the ones a listbox answers, and in a grid the ones a grid of
+ * options answers:
  *
- * - Up and Down move one item.
- * - Home and End move to the first and the last.
- * - Page Up and Page Down move by `page`, the number of items on screen less
- *   one, so the item at one edge of the box lands at the other.
+ * - Up and Down move one line, to the item in the same column. Down from the
+ *   line above a shorter last line goes to the last item.
+ * - Left and Right move one item, in a grid only, with `forward` naming the
+ *   one that moves ahead along the line: Right, or Left on a right-to-left
+ *   page. In a list they move nothing, and are left to the row.
+ * - Home and End move to the first and the last item.
+ * - Page Up and Page Down move by `page` lines, the number of lines on screen
+ *   less one, so the line at one edge of the box lands at the other.
  *
  * `undefined` for a key the list does not take, and for an empty list.
  */
-export declare const stepIndex: (key: string, at: number, count: number, page: number) => number | undefined;
+export declare const stepIndex: (key: string, at: number, count: number, page: number, { across, forward }?: {
+    across?: number;
+    forward?: string;
+}) => number | undefined;

package/dist/virtual-list/keys.js

@@ -1,23 +1,34 @@
-export const stepIndex = (key, at, count, page) => {
+export const stepIndex = (key, at, count, page, { across = 1, forward = 'ArrowRight' } = {}) => {
     if (count <= 0) {
         return undefined;
     }
+    const width = Math.max(1, Math.trunc(across));
     const last = count - 1;
     const from = Math.max(0, Math.min(at, last));
-    const jump = Math.max(1, page);
+    const line = Math.floor(from / width);
+    const along = (lines) => {
+        const to = Math.max(0, Math.min(line + lines, Math.floor(last / width)));
+        return Math.min(last, to * width + (from % width));
+    };
     switch (key) {
         case 'ArrowDown':
-            return Math.min(last, from + 1);
+            return along(1);
         case 'ArrowUp':
-            return Math.max(0, from - 1);
+            return along(-1);
+        case 'ArrowLeft':
+        case 'ArrowRight':
+            if (width === 1) {
+                return undefined;
+            }
+            return Math.max(0, Math.min(last, from + (key === forward ? 1 : -1)));
         case 'End':
             return last;
         case 'Home':
             return 0;
         case 'PageDown':
-            return Math.min(last, from + jump);
+            return along(Math.max(1, page));
         case 'PageUp':
-            return Math.max(0, from - jump);
+            return along(-Math.max(1, page));
         default:
             return undefined;
     }

package/dist/virtual-list/plan.d.ts

@@ -27,6 +27,11 @@ export interface DrawInput {
     drawn: readonly number[];
     /** Whether every drawn row is drawn again from nothing, as for a new way of drawing. */
     redraw?: boolean;
+    /**
+     * How many items a line holds, in a grid. The kept item brings its whole
+     * line, so the columns of the lines around it stay where they are.
+     */
+    across?: number;
 }
 /**
  * Which items a pass draws, and which drawn rows leave.
@@ -34,7 +39,7 @@ export interface DrawInput {
  * A drawn row leaves when its item is not wanted, when it holds no item, or
  * when everything is drawn again. A wanted item with no row left is drawn new.
  */
-export declare const drawPlan: ({ count, drawn, first, kept, last, redraw, }: DrawInput) => DrawPlan;
+export declare const drawPlan: ({ across, count, drawn, first, kept, last, redraw, }: DrawInput) => DrawPlan;
 /**
  * Which item holds the list's tab stop after a pass.
  *
@@ -47,3 +52,14 @@ export declare const stopAfter: (active: number, wanted: readonly number[], { co
     last: number;
     onScreen: number;
 }) => number;
+/**
+ * The items a span of lines holds, `across` items to a line: what a window of
+ * lines draws, or which items a reader sees.
+ */
+export declare const itemsOf: (lines: {
+    first: number;
+    last: number;
+}, across: number, count: number) => {
+    first: number;
+    last: number;
+};

package/dist/virtual-list/plan.js

@@ -1,10 +1,14 @@
-export const drawPlan = ({ count, drawn, first, kept, last, redraw = false, }) => {
+export const drawPlan = ({ across = 1, count, drawn, first, kept, last, redraw = false, }) => {
     const wanted = [];
     for (let at = first; at < Math.min(last, count); at += 1) {
         wanted.push(at);
     }
     if (kept !== undefined && !wanted.includes(kept)) {
-        wanted.push(kept);
+        const width = Math.max(1, across);
+        const start = kept - (kept % width);
+        for (let at = start; at < Math.min(start + width, count); at += 1) {
+            wanted.push(at);
+        }
         wanted.sort((a, b) => a - b);
     }
     const keep = new Set(wanted);
@@ -14,3 +18,10 @@ export const drawPlan = ({ count, drawn, first, kept, last, redraw = false, }) =
 export const stopAfter = (active, wanted, { count, first, last, onScreen, }) => wanted.includes(active)
     ? active
     : Math.max(Math.min(onScreen, Math.min(last, count) - 1), first, 0);
+export const itemsOf = (lines, across, count) => {
+    const width = Math.max(1, across);
+    return {
+        first: Math.min(lines.first * width, count),
+        last: Math.min(lines.last * width, count),
+    };
+};