@fusion.dev/helix-headless 0.145.0 → 0.146.0

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

@@ -1,23 +1,30 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary An indicator that shows which way a measurement moved, and whether the change is good.
  *
  * @description
- * A trend has three parts: a direction of up, down, or neutral, the metric that
- * moved, and a label for the period it moved over. The arrow shows the
- * direction and its color shows whether the change is good. Direction and
+ * A trend has three parts: a `movement` of up, down, or neutral, the metric
+ * that moved, and a label for the period it moved over. The arrow shows the
+ * movement and its color shows whether the change is good. Movement and
  * judgment are separate properties because they are separate facts.
  *
  * `good` is unset by default, so a trend with no judgment is gray. For churn,
  * latency, error rate, cost, and bounce rate, up is bad. Set the metric's
  * polarity once with `good`, and the component picks the color from the
- * direction.
+ * movement. The judgment is also a custom state, `better` or `worse`, for a
+ * sheet of your own.
  *
- * The direction is also written as a word, so a screen reader reads it. The
+ * The movement is also written as a word, so a screen reader reads it. The
  * styled tier hides `part="direction"` visually and keeps it in the
  * accessibility tree. The words are properties, `up-label` through
- * `worse-label`, so a page in another language can set its own.
+ * `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.
+ *
+ * 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
+ * read with the figure it qualifies.
  *
  * The metric and the label are bare slots. An element that assigned its own
  * slot on connect would add an attribute to its host after upgrade, which the
@@ -30,11 +37,17 @@ import { type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/trend
  *
  * @slot - The metric that moved.
- * @slot icon - Replaces the arrow, such as with a glyph of your own set. Slot the one for the current direction.
+ * @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.
+ * @slot neutral-icon - Replaces the bar while the trend has not moved. Hidden from screen readers.
+ * @slot up-icon - Replaces the arrow while `movement` is `up`. Hidden from screen readers.
  *
- * @csspart direction - The direction as a word, for people who cannot see the arrow.
+ * @csspart direction - The movement as a word, for people who cannot see the arrow.
  * @csspart icon - The arrow.
+ *
+ * @cssstate better - The trend moved the way `good` names.
+ * @cssstate worse - The trend moved against the way `good` names.
  */
 export declare class HelixHeadlessTrend extends HelixElement {
     /**
@@ -42,14 +55,11 @@ export declare class HelixHeadlessTrend extends HelixElement {
      */
     betterLabel: string;
     /**
-     * Which way the measurement moved.
+     * Which way the measurement moved, as `movement` says it.
      *
-     * Absent is neutral, so a trend with nothing to report draws a bar rather
-     * than picking a direction. Optional rather than defaulted for the reason
-     * `Stat.direction` is: a reflecting property with a default writes its
-     * attribute onto the host the moment the element upgrades, and the host is
-     * markup the consumer rendered, which React compares against what it rendered
-     * and reports as a hydration mismatch.
+     * @deprecated Use `movement`. `direction` is a layout on `Stat` and `Flex`,
+     * which are written beside a trend, so one word meant two things. Still read
+     * when `movement` is absent.
      */
     direction?: 'down' | 'neutral' | 'up';
     /**
@@ -57,14 +67,24 @@ export declare class HelixHeadlessTrend extends HelixElement {
      */
     downLabel: string;
     /**
-     * Which direction counts as an improvement for this metric.
+     * Which movement counts as an improvement for this metric.
      *
      * Absent states the movement without judging it, which is the honest default:
      * revenue up is good news and latency up is bad news, and only the consumer
      * knows which one this is. Set it once per metric and it holds while the
-     * direction changes underneath.
+     * movement changes underneath.
      */
     good?: 'down' | 'up';
+    /**
+     * Which way the measurement moved.
+     *
+     * Absent is neutral, so a trend with nothing to report draws a bar rather
+     * than picking a direction. Optional rather than defaulted: a reflecting
+     * property with a default writes its attribute onto the host the moment the
+     * element upgrades, and the host is markup the consumer rendered, which React
+     * compares against what it rendered and reports as a hydration mismatch.
+     */
+    movement?: 'down' | 'neutral' | 'up';
     /**
      * The word read out for no move, or for a direction that is not one of the
      * three.
@@ -90,6 +110,11 @@ export declare class HelixHeadlessTrend extends HelixElement {
         content: string;
         viewBox: string;
     }): TemplateResult;
+    /** The movement, read from `movement` and then from the old `direction`. */
+    private get moved();
+    /** Better or worse, or neither when `good` is unset or nothing moved. */
+    private get judged();
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -25,7 +25,7 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
         this.worseLabel = 'worse';
     }
     renderIcon(icon) {
-        return html `<slot name="icon"
+        return html `<slot aria-hidden="true" name="icon"
       ><svg
         aria-hidden="true"
         data-glyph
@@ -37,12 +37,34 @@ let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
       </svg></slot
     >`;
     }
+    get moved() {
+        return this.movement ?? this.direction;
+    }
+    get judged() {
+        const moved = this.moved;
+        if (!this.good || !moved || !(moved in DIRECTIONS) || moved === 'neutral') {
+            return undefined;
+        }
+        return this.good === moved ? 'better' : 'worse';
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const judged = this.judged;
+        this.toggleState('better', judged === 'better');
+        this.toggleState('worse', judged === 'worse');
+    }
     render() {
-        const direction = readDirection(this.direction);
-        const judgment = this.good && this.direction && this.direction !== 'neutral'
-            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
-            : '';
-        return html `${this.renderIcon(direction.icon)}
+        const moved = this.moved;
+        const direction = readDirection(moved);
+        const judged = this.judged;
+        const judgment = judged ? `, ${judged === 'better' ? this.betterLabel : this.worseLabel}` : '';
+        const icon = this.renderIcon(direction.icon);
+        const glyph = moved === 'up'
+            ? html `<slot aria-hidden="true" name="up-icon">${icon}</slot>`
+            : moved === 'down'
+                ? html `<slot aria-hidden="true" name="down-icon">${icon}</slot>`
+                : html `<slot aria-hidden="true" name="neutral-icon">${icon}</slot>`;
+        return html `${glyph}
       <span part="direction">${`${this[direction.word]}${judgment}`}</span>
       <slot></slot>
       <slot name="label"></slot>`;
@@ -60,6 +82,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTrend.prototype, "movement", void 0);
 __decorate([
     property({ attribute: 'unchanged-label' })
 ], HelixHeadlessTrend.prototype, "unchangedLabel", void 0);

package/dist/video/media-events.d.ts

@@ -22,28 +22,23 @@ export declare const MEDIA_EVENTS: readonly ['abort', 'canplay', 'canplaythrough
 /** One of the media events the player relays. */
 export type MediaEventName = (typeof MEDIA_EVENTS)[number];
 /**
- * The copy the host sends: the same name, neither bubbling nor composed.
+ * Hands each media event the video fires to `relay`, and returns what stops
+ * it. The player relays through `relayNativeEvent`, which sends the same name
+ * with the same `bubbles`, `cancelable` and `composed`.
  *
- * **As the platform sends it, which is what makes it reach a React consumer at
- * all.** These names are in react-dom's `nonDelegatedEvents`, which React wires
- * on a `<video>` and never on a custom element, so its root listener hears none
- * of them. `bindReactHandler` closes that for an event that does not bubble,
- * and skips one that does, on the grounds that a bubbling relay already reaches
- * React's delegated listener and binding it again would double every call. A
- * copy sent with `bubbles: true` lands in the branch that refuses to bind, and
- * `onPlay` on the player is silent.
- *
- * Not cancelable, as the platform's are not: the media has already moved by the
- * time the event is sent, and a refusal would have nothing to stop.
- */
-export declare const relayedCopy: (event: Event) => Event;
-/**
- * Sends each media event the video fires on from the host, and returns what
- * stops it.
+ * **As the platform sends it, neither bubbling nor composed, which is what
+ * makes it reach a React consumer at all.** These names are in react-dom's
+ * `nonDelegatedEvents`, which React wires on a `<video>` and never on a custom
+ * element, so its root listener hears none of them. `bindReactHandler` closes
+ * that for an event that does not bubble, and skips one that does, on the
+ * grounds that a bubbling relay already reaches React's delegated listener and
+ * binding it again would double every call. A copy sent with `bubbles: true`
+ * would land in the branch that refuses to bind, and `onPlay` on the player
+ * would be silent.
  *
  * Bound once, after the first render, so the player's own listeners in its
  * template are ahead of it on the same video: what a consumer reads off the
  * player in a handler (`paused`, `volume`, `currentTime`) is already the
  * player's state by the time the copy reaches them.
  */
-export declare const relayMedia: (video: EventTarget, host: EventTarget) => (() => void);
+export declare const relayMedia: (video: EventTarget, relay: (event: Event) => void) => (() => void);

package/dist/video/media-events.js

@@ -23,11 +23,7 @@ export const MEDIA_EVENTS = [
     'volumechange',
     'waiting',
 ];
-export const relayedCopy = (event) => new Event(event.type, { bubbles: false, cancelable: false, composed: false });
-export const relayMedia = (video, host) => {
-    const relay = (event) => {
-        host.dispatchEvent(relayedCopy(event));
-    };
+export const relayMedia = (video, relay) => {
     for (const name of MEDIA_EVENTS) {
         video.addEventListener(name, relay);
     }

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

@@ -17,11 +17,22 @@ import '../../menu/index.js';
  * not drawn, and the keys below are not bound, so a key press does not seek
  * twice.
  *
- * The keys match other players, and they are bound on the element only:
- * - Space and `k` play or pause.
- * - The arrow keys seek and change the volume.
- * - `m` mutes.
- * - `f` toggles fullscreen.
+ * **Keyboard.** The keys match other players, and they are bound on the
+ * element only, so they work while focus is on the player.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Space, `k` | Plays or pauses. Space on a button presses the button. |
+ * | Right, Left | Moves 5 seconds forward or back. |
+ * | Shift with Right or Left | Moves 10 seconds forward or back. |
+ * | `l`, `j` | Moves 10 seconds forward or back, as the skip buttons do. |
+ * | Up, Down | Raises or lowers the volume by a tenth. |
+ * | `m` | Mutes or unmutes. |
+ * | `f` | Enters or leaves fullscreen. |
+ * | Tab | Moves through the controls on the bar. |
+ *
+ * On the scrubber and the volume slider, the arrow keys, Page Up, Page Down,
+ * Home, and End move the slider, as on any range input.
  *
  * `<source>` and `<track>` children are copied into the video. A media element
  * selects resources from its own child nodes, and a slot is one node, so
@@ -107,6 +118,8 @@ import '../../menu/index.js';
  * @csspart entry-mark - The trailing mark: a check mark when the row is checked, or a caret when it opens a submenu.
  * @csspart entry-shortcut - The key drawn for a row's shortcut. The player's rows set none.
  * @csspart entry-shortcut-kbd - The key inside `entry-shortcut`.
+ * @csspart entry-shortcut-key - One key of a row's shortcut chord, inside `entry-shortcut`. The player's rows set none.
+ * @csspart entry-shortcut-separator - The `+` between two keys of a row's shortcut, where the platform writes one.
  * @csspart entry-start - The leading column that holds the `start` slot. It is always rendered.
  * @csspart failure - The message shown when the source cannot be played.
  * @csspart forward - The button that skips forward ten seconds.

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

@@ -431,7 +431,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.silent = video.muted;
             this.loudness = video.volume;
             void this.remote.attach(video);
-            relayMedia(video, this);
+            relayMedia(video, (event) => this.relayNativeEvent(event));
         }
     }
     updated(changed) {
@@ -560,7 +560,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <${this.tag('menu-item')}
         part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         value="off"
         checkable
         exclusive
@@ -572,7 +573,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       </${this.tag('menu-item')}>
       ${tracks.map((track, at) => html `<${this.tag('menu-item')} part="entry"
         exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
           value=${track.language || String(at)}
           checkable
           exclusive
@@ -600,7 +602,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'remote') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         value="remote"
         @helix-select=${() => void this.remote.prompt()}
       >
@@ -611,7 +614,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'speed') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="speed" @helix-select=${() => this.cycleSpeed()}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="speed" @helix-select=${() => this.cycleSpeed()}>
         <slot name="speed-icon" slot="start">${drawIcon(gauge)}</slot>
         ${this.speedLabel}: ${this.rate}x
       </${this.tag('menu-item')}>`;
@@ -620,7 +624,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             const back = one === 'rewind';
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         value=${one}
         @helix-select=${() => this.skipBy(back ? -SKIP_SECONDS : SKIP_SECONDS)}
       >
@@ -633,7 +638,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'previous') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="previous" @helix-select=${() => this.skip(true)}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="previous" @helix-select=${() => this.skip(true)}>
         <slot name="previous-icon" slot="start">${drawIcon(skipBack)}</slot>
         ${this.previousLabel}
       </${this.tag('menu-item')}>`;
@@ -641,7 +647,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'next') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="next" @helix-select=${() => this.skip(false)}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="next" @helix-select=${() => this.skip(false)}>
         <slot name="next-icon" slot="start">${drawIcon(skipForward)}</slot>
         ${this.nextLabel}
       </${this.tag('menu-item')}>`;
@@ -650,7 +657,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             const local = ownFile(this.src);
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         ?download=${local}
         href=${this.src}
         rel=${local ? nothing : 'noreferrer'}
@@ -663,7 +671,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return html `<${this.tag('menu-item')} part="entry"
     exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="pip" @helix-select=${() => void this.togglePip()}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="pip" @helix-select=${() => void this.togglePip()}>
       <slot name="pip-icon" slot="start">${drawIcon(pictureInPicture)}</slot>
       ${this.pipLabel}
     </${this.tag('menu-item')}>`;

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

@@ -27,6 +27,8 @@ import '../../menu/index.js';
  * @csspart entry-mark - The mark at the end of an entry: a check mark when it is checked, or a caret when it opens a submenu.
  * @csspart entry-shortcut - The key drawn for an entry's shortcut. The playlist's entries set none.
  * @csspart entry-shortcut-kbd - The key inside `entry-shortcut`.
+ * @csspart entry-shortcut-key - One key of an entry's shortcut chord, inside `entry-shortcut`. The playlist's entries set none.
+ * @csspart entry-shortcut-separator - The `+` between two keys of an entry's shortcut, where the platform writes one.
  * @csspart entry-start - The column at the start of an entry. It is a slot and is always present.
  * @csspart menu - The menu that holds the entries.
  * @csspart menu-back - The button that goes back from a submenu.

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

@@ -86,7 +86,8 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
       ${this.entries.map((entry) => html `<${this.tag('menu-item')}
           part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
           value=${entry.value}
           checkable
           ?checked=${entry.current}

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

@@ -29,6 +29,12 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * sends `helix-end`. `shuffle` plays the entries in a random order, starting
  * from the one that is current, and `previous` retraces that order.
  *
+ * **Keyboard.** Each entry is a button in the tab order, and Enter or Space
+ * plays it. The current entry carries `aria-current`. While focus is on the
+ * player, the player's own keys work, and `Video` lists them. Its previous
+ * and next controls move through the entries in the same order the playlist
+ * does.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -38,7 +44,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.
+ * @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 {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.
  *

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

@@ -11,14 +11,6 @@
  *
  * A field is a key, or a path of keys joined by dots (`author.name`).
  */
-/**
- * The value at `path` in `item`, or `undefined` where the path leads nowhere.
- *
- * A dot separates keys, so `author.name` reads `item.author.name`. A key that
- * holds a dot itself is read whole first, which keeps a flat record with a key
- * such as `"v1.2"` working.
- */
-export declare const valueAt: (item: unknown, path: string) => unknown;
 /**
  * The text a value takes in a row.
  *

package/dist/virtual-list/fill.js

@@ -1,20 +1,4 @@
-export const valueAt = (item, path) => {
-    if (item === null || typeof item !== 'object') {
-        return undefined;
-    }
-    const record = item;
-    if (path in record) {
-        return record[path];
-    }
-    let value = record;
-    for (const key of path.split('.')) {
-        if (value === null || typeof value !== 'object') {
-            return undefined;
-        }
-        value = value[key];
-    }
-    return value;
-};
+import { valueAt } from '@fusion.dev/helix-core';
 export const textOf = (value) => value === undefined || value === null || typeof value === 'object' ? '' : String(value);
 const ATTRIBUTE = 'data-field-';
 const writeAttribute = (element, name, value) => {

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

@@ -0,0 +1,49 @@
+/**
+ * What one pass of a virtual list draws, worked out before any element moves.
+ *
+ * The list keeps the element of a row that stays in the window, so a pass
+ * compares what is drawn with what is wanted and changes only the difference.
+ * These are that comparison and the tab-stop rule that follows it, as
+ * arithmetic over item indices.
+ */
+/** What a pass does to the rows in the tree. */
+export interface DrawPlan {
+    /** The items the pass draws, in order: the window, and a kept item outside it. */
+    wanted: number[];
+    /** The items whose rows leave the tree. */
+    remove: Set<number>;
+}
+/** The window, the set's length, the item kept outside the window, and the rows drawn. */
+export interface DrawInput {
+    /** The first item of the window. */
+    first: number;
+    /** One past the last item of the window. */
+    last: number;
+    /** How many items the set holds. */
+    count: number;
+    /** The item drawn outside the window to keep or take focus, where there is one. */
+    kept?: number | undefined;
+    /** The item each drawn row element holds, `NaN` for an element that holds none. */
+    drawn: readonly number[];
+    /** Whether every drawn row is drawn again from nothing, as for a new way of drawing. */
+    redraw?: boolean;
+}
+/**
+ * Which items a pass draws, and which drawn rows leave.
+ *
+ * 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;
+/**
+ * Which item holds the list's tab stop after a pass.
+ *
+ * The item that held it, while its row is drawn. Otherwise the first item on
+ * screen, held inside the window and the set.
+ */
+export declare const stopAfter: (active: number, wanted: readonly number[], { count, first, last, onScreen, }: {
+    count: number;
+    first: number;
+    last: number;
+    onScreen: number;
+}) => number;

package/dist/virtual-list/plan.js

@@ -0,0 +1,16 @@
+export const drawPlan = ({ 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);
+        wanted.sort((a, b) => a - b);
+    }
+    const keep = new Set(wanted);
+    const remove = new Set(drawn.filter((index) => redraw || !Number.isInteger(index) || !keep.has(index)));
+    return { remove, wanted };
+};
+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);