@fusion.dev/helix-headless 0.215.3 → 0.216.0

package/dist/time-input/root/time-input-root.d.ts

@@ -106,6 +106,9 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-column-loading - The text shown while the options load.
  * @csspart picker-column-search - The region that holds the filter field.
  * @csspart picker-column-search-field - The filter field.
+ * @csspart picker-column-voice - The dictation button in the filter field.
+ * @csspart picker-column-voice-listening - The dictation button while it listens.
+ * @csspart picker-column-voice-status - What a screen reader hears as dictation starts and stops.
  * @csspart picker-columns - The row of columns, in `wheels`.
  * @csspart picker-feedback - The picker's own message, under the times, while the picker's `feedback` is set.
  * @csspart picker-hint - The picker's hint, which Time Input never sets: help under the field is the field's own `hint`.
@@ -123,6 +126,9 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-list-loading - The text shown while the options load.
  * @csspart picker-list-search - The region that holds the filter field.
  * @csspart picker-list-search-field - The filter field.
+ * @csspart picker-list-voice - The dictation button in the filter field.
+ * @csspart picker-list-voice-listening - The dictation button while it listens.
+ * @csspart picker-list-voice-status - What a screen reader hears as dictation starts and stops.
  * @csspart picker-now - The picker's button that chooses the current time, which Time Input does not draw.
  * @csspart picker-option - One time in the picker. Carries `data-between` inside a range.
  * @csspart picker-option-between - A time inside a chosen range, between its two ends. Set together with `picker-option`.

package/dist/time-input/root/time-input-root.js

@@ -227,13 +227,15 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         column-filter-mark: picker-column-filter-mark, column-hint: picker-column-hint,
         column-items: picker-column-items, column-label: picker-column-label,
         column-live: picker-column-live, column-loading: picker-column-loading, column-search: picker-column-search,
-        column-search-field: picker-column-search-field, columns: picker-columns, feedback: picker-feedback, hint: picker-hint,
+        column-search-field: picker-column-search-field, column-voice: picker-column-voice,
+        column-voice-listening: picker-column-voice-listening, column-voice-status: picker-column-voice-status, columns: picker-columns, feedback: picker-feedback, hint: picker-hint,
         label: picker-label, list: picker-list,
         list-empty: picker-list-empty, list-error: picker-list-error, list-feedback: picker-list-feedback,
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
         list-live: picker-list-live, list-loading: picker-list-loading, list-search: picker-list-search,
-        list-search-field: picker-list-search-field, now: picker-now, option: picker-option,
+        list-search-field: picker-list-search-field, list-voice: picker-list-voice,
+        list-voice-listening: picker-list-voice-listening, list-voice-status: picker-list-voice-status, now: picker-now, option: picker-option,
         option-between: picker-option-between, option-item-active: picker-option-item-active,
         option-item-selected: picker-option-item-selected,
         option-description: picker-option-description, option-item: picker-option-item,

package/dist/time-picker/root/time-picker-root.d.ts

@@ -88,6 +88,9 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart column-loading - The text shown while the options load.
  * @csspart column-search - The region that holds the filter field.
  * @csspart column-search-field - The filter field.
+ * @csspart column-voice - The dictation button in the filter field.
+ * @csspart column-voice-listening - The dictation button while it listens.
+ * @csspart column-voice-status - What a screen reader hears as dictation starts and stops.
  * @csspart columns - The row of columns, in `wheels`.
  * @csspart feedback - The message under the times, while `feedback` is set.
  * @csspart hint - Help under the times, shown while there is no message in `feedback`.
@@ -105,6 +108,9 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-loading - The text shown while the options load.
  * @csspart list-search - The region that holds the filter field.
  * @csspart list-search-field - The filter field.
+ * @csspart list-voice - The dictation button in the filter field.
+ * @csspart list-voice-listening - The dictation button while it listens.
+ * @csspart list-voice-status - What a screen reader hears as dictation starts and stops.
  * @csspart now - The button that chooses the current time, drawn with `show-now`.
  * @csspart option - One time in the list. It carries `data-between` inside a range, and inside the run to the time under the pointer while a range waits for its second end.
  * @csspart option-between - A time inside a chosen range, excluding its ends, beside `option`.

package/dist/time-picker/root/time-picker-root.js

@@ -406,7 +406,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       aria-required=${this.required ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
-        live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
+        live: column-live, loading: column-loading, search: column-search, search-field: column-search-field,
+        voice: column-voice, voice-listening: column-voice-listening, voice-status: column-voice-status"
       aria-label=${label}
       ?disabled=${this.isDisabled}
       .value=${value}
@@ -459,7 +460,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       aria-required=${this.required ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
-        live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"
+        live: list-live, loading: list-loading, search: list-search, search-field: list-search-field,
+        voice: list-voice, voice-listening: list-voice-listening, voice-status: list-voice-status"
       aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import '../../button/index.js';
 /**
  * @summary The region that holds toast messages, and the only element that announces them.
  *
@@ -37,6 +38,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * or a pen swipes a message away toward the end of the line, or toward the
  * edge `swipe-direction` names.
  *
+ * **`undoable()` offers to take an action back**, which replaces a
+ * confirmation dialog for an action that can be undone: do the action, then
+ * call it. The message holds an Undo button and shows for 8 seconds, Command+Z
+ * (Control+Z elsewhere) undoes it while it shows, and a screen reader hears
+ * which keys do. Keep a confirmation for an action that cannot be taken back or
+ * that reaches someone else, such as sending or paying.
+ *
  * **Every message's timer waits while a pointer or focus is in the stack**, as
  * React Aria's and Radix's regions do, so a reader moving from one message to
  * the next does not lose the one behind them.
@@ -63,6 +71,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * | Key | What it does |
  * |---|---|
+ * | Command+Z, or Control+Z elsewhere, or your `undo-keys` | Undoes the newest message `undoable()` made, while it shows, while focus is not in a text field, and where the app has not handled the key. |
  * | F8, or your `hotkey` | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. |
  * | Tab, Shift+Tab | Moves between the controls of the messages. |
  * | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. |
@@ -94,6 +103,8 @@ export declare class HelixHeadlessToast extends HelixElement {
      * Empty turns it off.
      */
     hotkey: string;
+    /** What the hotkey does, as a list of the page's shortcuts says it. */
+    hotkeyLabel: string;
     /**
      * Accessible name for the region, with `{hotkey}` filled in. Translate it with
      * the rest of your interface.
@@ -173,6 +184,57 @@ export declare class HelixHeadlessToast extends HelixElement {
     private readonly scope;
     /** Takes focus to the stack and back, on `hotkey`. */
     private readonly handleHotkey;
+    /**
+     * What a message `undoable()` made says after its own words, with `{keys}`
+     * for the chord that undoes it, spoken as words.
+     */
+    undoHint: string;
+    /**
+     * The keys that undo the newest message `undoable()` made, as `hotkey`
+     * reads them. Empty turns them off, for an app whose own undo holds them,
+     * and leaves the Undo button. A key the app already handled, by calling
+     * `preventDefault()`, is left to it.
+     */
+    undoKeys: string;
+    /** The words on the Undo button of a message `undoable()` made. */
+    undoLabel: string;
+    /** The words said after each message `undoable()` made: the key that undoes it. */
+    private readonly hints;
+    /** The undoable messages showing, oldest first, each with what undoes it and what keeps it. */
+    private readonly undoables;
+    /**
+     * Shows that an action happened and offers to undo it, which is the pattern
+     * that replaces a confirmation dialog for an action that can be taken back.
+     *
+     * Do the action first, then call this. The message holds an Undo button,
+     * shows for `duration` (8 seconds by default, and paused while a pointer or
+     * focus is in the stack), and `undo-keys`, Command+Z or Control+Z by
+     * default, does what the button does while it shows, unless a text field
+     * has focus. A screen reader hears the message and then which keys undo it.
+     *
+     * `undo` runs if the reader undoes, and `commit` runs if the message closes
+     * any other way, for an app that holds the real deletion back until then.
+     * The promise settles to `undone` or `kept` accordingly.
+     *
+     * **A message that is never closed is kept.** `commit` runs as the region
+     * leaves the page, as on a route change, and as the page itself is hidden
+     * to be closed or reloaded. A browser can end a page without either, so a
+     * server holding a deletion back finishes it on a timeout of its own too.
+     */
+    undoable(message: string, options: {
+        commit?: () => void;
+        duration?: number;
+        heading?: string;
+        tone?: 'danger' | 'info' | 'success' | 'warning';
+        undo: () => void;
+    }): Promise<'kept' | 'undone'>;
+    /** Keeps every undoable message still showing, as the region or the page goes. */
+    private keepAll;
+    private readonly handlePageHide;
+    /** Undoes the newest undoable message on `undo-keys`, unless a field or the app has the keystroke. */
+    private readonly handleUndo;
+    /** What a message says as it arrives, with the key that undoes it where it has one. */
+    private wordsOf;
     /** Messages `add()` made, which are the region's to remove. */
     private readonly made;
     /**
@@ -267,6 +329,8 @@ export declare class HelixHeadlessToast extends HelixElement {
      */
     private readonly handleDismiss;
     connectedCallback(): void;
+    /** Takes the hotkey off the page's list of shortcuts. */
+    private unregister;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;

package/dist/toast/root/toast-root.js

@@ -1,12 +1,14 @@
 import { __decorate } from "tslib";
-import { animationsFinished, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, focusableElements, formatWords, HelixElement, hostAria, matchesChord, numberConverter, onApple, scrollHolders, words, } from '@fusion.dev/helix-core';
+import { animationsFinished, ariaChord, chordParts, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, focusableElements, formatWords, HelixElement, hostAria, keyClaimed, keyNames, matchesChord, numberConverter, onApple, registerShortcut, scrollHolders, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import '../../button/index.js';
 import { joinSaid, messageWords } from '../words.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
         this.hotkey = 'F8';
+        this.hotkeyLabel = 'Go to notifications';
         this.label = 'Notifications ({hotkey})';
         this.said = '';
         this.urgent = '';
@@ -34,6 +36,26 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
                 this.scope.enter();
             }
         };
+        this.undoHint = 'Press {keys} to undo.';
+        this.undoKeys = 'mod+z';
+        this.undoLabel = 'Undo';
+        this.hints = new WeakMap();
+        this.undoables = [];
+        this.handlePageHide = () => {
+            this.keepAll();
+        };
+        this.handleUndo = (event) => {
+            const newest = this.undoables.at(-1);
+            if (!newest ||
+                this.undoKeys === '' ||
+                event.defaultPrevented ||
+                keyClaimed(event) ||
+                !matchesChord(event, this.undoKeys, onApple())) {
+                return;
+            }
+            event.preventDefault();
+            newest.undo();
+        };
         this.made = new WeakSet();
         this.pointerIn = false;
         this.focusIn = false;
@@ -112,7 +134,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     }
     announce(arrived) {
         for (const one of arrived) {
-            const words = messageWords(one);
+            const words = this.wordsOf(one);
             if (words !== '') {
                 ;
                 (isDanger(one) ? this.pending.urgent : this.pending.said).push(words);
@@ -155,6 +177,83 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             this.announce(arrived);
         }
     }
+    undoable(message, options) {
+        const tier = this.constructor.tier;
+        const apple = onApple();
+        const keys = this.undoKeys;
+        const button = document.createElement(`${tier}button`);
+        button.textContent = this.undoLabel;
+        if (keys !== '') {
+            button.setAttribute('aria-keyshortcuts', ariaChord(keys, apple));
+        }
+        const item = this.add(message, {
+            action: button,
+            duration: options.duration ?? 8000,
+            ...(options.heading === undefined ? {} : { heading: options.heading }),
+            ...(options.tone === undefined ? {} : { tone: options.tone }),
+        });
+        if (keys !== '') {
+            const names = keyNames(chordParts(keys), apple);
+            this.hints.set(item, formatWords(this, 'undoHint', { keys: names.spoken || names.keys.join(names.separator) }));
+        }
+        return new Promise((resolve) => {
+            let settled = false;
+            const unregister = keys === ''
+                ? () => { }
+                : registerShortcut({
+                    keys: () => keys,
+                    label: () => this.undoLabel,
+                    owner: item,
+                });
+            const finish = (how) => {
+                settled = true;
+                unregister();
+                button.removeEventListener('click', undo);
+                item.removeEventListener('helix-dismiss', closed);
+                const at = this.undoables.findIndex((one) => one.item === item);
+                if (at >= 0) {
+                    this.undoables.splice(at, 1);
+                }
+                resolve(how);
+            };
+            const undo = () => {
+                if (settled) {
+                    return;
+                }
+                options.undo();
+                finish('undone');
+                item.dismiss?.();
+            };
+            const keep = () => {
+                if (!settled) {
+                    options.commit?.();
+                    finish('kept');
+                }
+            };
+            const closed = (event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                queueMicrotask(() => {
+                    if (!event.defaultPrevented) {
+                        keep();
+                    }
+                });
+            };
+            button.addEventListener('click', undo);
+            item.addEventListener('helix-dismiss', closed);
+            this.undoables.push({ item, keep, undo });
+        });
+    }
+    keepAll() {
+        for (const one of [...this.undoables]) {
+            one.keep();
+        }
+    }
+    wordsOf(item) {
+        const hint = this.hints.get(item);
+        return hint ? joinSaid([messageWords(item), hint]) : messageWords(item);
+    }
     add(message, options = {}) {
         const tier = this.constructor.tier;
         const item = document.createElement(`${tier}toast-item`);
@@ -291,7 +390,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             return;
         }
         for (const one of arrived) {
-            const words = messageWords(one);
+            const words = this.wordsOf(one);
             if (words !== '') {
                 speaker.ariaNotify(words, { priority: isDanger(one) ? 'high' : 'normal' });
             }
@@ -305,6 +404,13 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.addEventListener('pointerleave', this.handlePointerLeave);
         this.addEventListener('helix-dismiss', this.handleDismiss);
         document.addEventListener('keydown', this.handleHotkey);
+        document.addEventListener('keydown', this.handleUndo);
+        window.addEventListener('pagehide', this.handlePageHide);
+        this.unregister = registerShortcut({
+            keys: () => this.hotkey,
+            label: () => this.hotkeyLabel,
+            owner: this,
+        });
         this.watcher = new MutationObserver((records) => {
             const added = records.flatMap((record) => [...record.addedNodes]);
             this.restack();
@@ -325,6 +431,10 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.unregister?.();
+        this.keepAll();
+        document.removeEventListener('keydown', this.handleUndo);
+        window.removeEventListener('pagehide', this.handlePageHide);
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('pointerenter', this.handlePointerEnter);
@@ -359,6 +469,10 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessToast.prototype, "hotkey", void 0);
+__decorate([
+    words,
+    property({ attribute: 'hotkey-label' })
+], HelixHeadlessToast.prototype, "hotkeyLabel", void 0);
 __decorate([
     words,
     property()
@@ -378,6 +492,17 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessToast.prototype, "urgent", void 0);
+__decorate([
+    words,
+    property({ attribute: 'undo-hint' })
+], HelixHeadlessToast.prototype, "undoHint", void 0);
+__decorate([
+    property({ attribute: 'undo-keys' })
+], HelixHeadlessToast.prototype, "undoKeys", void 0);
+__decorate([
+    words,
+    property({ attribute: 'undo-label' })
+], HelixHeadlessToast.prototype, "undoLabel", void 0);
 HelixHeadlessToast = __decorate([
     customElement('helix-headless-toast')
 ], HelixHeadlessToast);

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

@@ -1,4 +1,4 @@
-import { HelixElement, HostClickController } from '@fusion.dev/helix-core';
+import { HelixElement, HostClickController, ListedController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
@@ -39,6 +39,8 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  * @interactive button
  */
 export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
+    /** On the page's list of controls, where a command palette and a shortcut overlay find it. */
+    protected readonly listed: ListedController;
     /** A click on the element itself, `click()` included, chooses it, as on `Radio`. */
     protected readonly clicks: HostClickController;
     /**

package/dist/toggle/root/toggle-root.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { auditName, customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
+import { auditName, customElement, HelixElement, HostClickController, ListedController, MixinSelectableItem, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
+        this.listed = new ListedController(this, 'press', () => this.internals?.ariaKeyShortcuts);
         this.clicks = new HostClickController(this, () => this.partNamed('item'));
     }
     get defaultSelected() {

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

@@ -409,6 +409,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private filledFrom;
     /** The function the drawn rows were filled by, so a new one draws them again. */
     private filledBy;
+    /** Whether the drawn rows were cloned from the template or drawn for `renderItem`. */
+    private drawnBy;
     /** The script the rows were read from, which the watcher follows. */
     private source;
     /**
@@ -702,8 +704,13 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * **A row that stays in the window keeps its element.** Clearing and
      * cloning every row on every move replaced the node a reader had focused,
      * so a link in a row lost focus to the body on any scroll, even with its row
-     * still on screen. Rows are keyed by item: the ones leaving go, the ones
-     * arriving are drawn in their place, and the ones staying are not moved.
+     * still on screen. Rows are keyed by item: a row that stays keeps its
+     * element, and a row that leaves gives its element to a row that arrives.
+     *
+     * **A slotted row added or taken out while the box is moving ends the
+     * touch on iOS.** Safari reads a change to what a slot holds as a change to
+     * the box. The same nodes, filled with the arriving items, leave the slot
+     * as it was. Extra nodes stay in the tree hidden until the box is still.
      *
      * **The row holding focus is drawn outside the window too**, beside it on the
      * side it belongs, and the spacer on that side gives up its room.
@@ -718,6 +725,15 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private placedSections;
     /** Whether the rows were last placed in a waterfall. */
     private placedWaterfall;
+    /**
+     * Row elements taken out of the window while the box is still moving, so
+     * the slot keeps the same nodes. Filled again when a row arrives.
+     */
+    private pooled;
+    /** Hides a row group that has left the window, and leaves it in the tree. */
+    private parkRows;
+    /** Takes a row group out of the tree. */
+    private dropRows;
     /** The lines of a grid drawn on the last pass, each a `row` the render draws a slot in. */
     private drawnLines;
     /** The function the drawn headers were drawn by, so a new one draws them again. */

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

@@ -188,6 +188,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         };
         this.visited = false;
         this.placedWaterfall = false;
+        this.pooled = [];
         this.drawnLines = [];
         this.sectionId = nextSectionId();
     }
@@ -575,12 +576,16 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const lined = this.lined;
         element.setAttribute('role', this.selectionMode ? 'option' : lined ? 'gridcell' : 'listitem');
         const across = this.across;
+        const keepSlot = lined && this.virtualize.holdsSlot();
         for (const [name, value] of [
             ['aria-colindex', lined ? (at % across) + 1 : undefined],
             ['aria-posinset', lined ? undefined : at + 1],
             ['aria-setsize', lined ? undefined : this.data.length],
-            ['slot', lined ? `${LINE}${Math.floor(at / across)}` : undefined],
+            ['slot', lined && !keepSlot ? `${LINE}${Math.floor(at / across)}` : undefined],
         ]) {
+            if (name === 'slot' && keepSlot) {
+                continue;
+            }
             if (value === undefined) {
                 element.removeAttribute(name);
             }
@@ -656,10 +661,13 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const children = [
             ...[...this.children].filter((child) => child !== template &&
                 child instanceof HTMLElement &&
+                child.dataset.virtualPool === undefined &&
                 (child.dataset.index !== undefined || !child.hasAttribute('slot')) &&
                 !child.hasAttribute('data-section')),
             ...this.querySelectorAll(':scope > [data-section] > [data-index]'),
         ];
+        const redraw = regroup ||
+            (this.drawnBy !== undefined && this.drawnBy !== (this.renderItem ? 'function' : 'template'));
         const plan = drawPlan({
             across: this.across,
             count,
@@ -667,24 +675,38 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             first,
             kept: this.keptIndex(),
             last,
-            redraw: regroup || (this.filledBy === undefined) !== (this.renderItem === undefined),
+            redraw,
         });
         const drawn = new Map();
+        const reusable = [...this.pooled];
+        this.pooled = [];
+        const leaving = new Map();
         for (const child of children) {
             const index = Number(child.dataset.index);
             if (plan.remove.has(index)) {
                 this.sizes?.unobserve(child);
-                child.remove();
+                leaving.set(index, [...(leaving.get(index) ?? []), child]);
                 continue;
             }
             drawn.set(index, [...(drawn.get(index) ?? []), child]);
         }
+        if (redraw) {
+            for (const group of [...reusable, ...leaving.values()]) {
+                this.dropRows(group);
+            }
+            reusable.length = 0;
+            leaving.clear();
+        }
+        else {
+            reusable.push(...leaving.values());
+        }
         const refill = this.filledFrom !== this.data ||
             this.filledBy !== this.renderItem ||
             this.headedBy !== this.renderSection;
         this.filledFrom = this.data;
         this.filledBy = this.renderItem;
         this.headedBy = this.renderSection;
+        this.drawnBy = this.renderItem ? 'function' : 'template';
         const groups = this.groups(sections, plan.wanted, regroup, refill);
         const fresh = new Set();
         const anchors = new Map();
@@ -699,15 +721,67 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                     this.fill(group, at);
                     fresh.add(at);
                 }
+                if (!this.waterfall && this.virtualize.holdsSlot()) {
+                    for (const element of group) {
+                        ;
+                        element.style.order = String(at);
+                    }
+                }
                 anchors.set(parent, group.at(-1).nextElementSibling);
                 continue;
             }
+            const width = this.renderItem ? 1 : (template?.content.childElementCount ?? 1);
+            const recycledAt = reusable.findIndex((one) => one.length === width);
+            const recycled = recycledAt === -1 ? undefined : reusable.splice(recycledAt, 1)[0];
+            if (recycled) {
+                for (const element of recycled) {
+                    element.hidden = false;
+                    element.removeAttribute('aria-hidden');
+                    element.removeAttribute('data-virtual-pool');
+                }
+                this.fill(recycled, at);
+                this.watchSize(recycled);
+                drawn.set(at, recycled);
+                fresh.add(at);
+                if (!this.waterfall && this.virtualize.holdsSlot()) {
+                    for (const element of recycled) {
+                        element.style.order = String(at);
+                    }
+                }
+                if (recycled[0]?.parentElement !== parent || !this.virtualize.holdsSlot()) {
+                    for (const element of recycled) {
+                        parent.insertBefore(element, anchors.get(parent) ?? null);
+                    }
+                }
+                anchors.set(parent, recycled.at(-1).nextElementSibling);
+                continue;
+            }
+            if (this.virtualize.holdsSlot()) {
+                continue;
+            }
             const fragment = this.draw(template, at);
             drawn.set(at, [...fragment.children]);
             this.watchSize([...fragment.children]);
             fresh.add(at);
+            if (!this.waterfall && this.virtualize.holdsSlot()) {
+                for (const element of fragment.children) {
+                    ;
+                    element.style.order = String(at);
+                }
+            }
             parent.insertBefore(fragment, anchors.get(parent) ?? null);
         }
+        if (this.virtualize.holdsSlot()) {
+            for (const group of reusable) {
+                this.parkRows(group);
+                this.pooled.push(group);
+            }
+        }
+        else {
+            for (const group of reusable) {
+                this.dropRows(group);
+            }
+        }
         this.active = stopAfter(this.active, plan.wanted, {
             count,
             first,
@@ -717,7 +791,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const chosen = this.chosen;
         const off = this.disabled;
         const lines = this.lined ? [...new Set(plan.wanted.map((at) => this.lineOf(at)))] : [];
-        if (lines.join() !== this.drawnLines.join()) {
+        if (lines.join() !== this.drawnLines.join() && !this.virtualize.holdsSlot()) {
             this.drawnLines = lines;
             this.requestUpdate();
         }
@@ -726,13 +800,22 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         for (const [at, group] of drawn) {
             for (const element of group) {
                 this.mark(element, at, chosen, off);
+                const style = element.style;
+                if (!this.waterfall && !this.virtualize.holdsSlot()) {
+                    style.removeProperty('order');
+                }
                 if (this.waterfall) {
-                    const style = element.style;
                     style.setProperty('position', 'absolute');
                     style.setProperty('inset-block-start', `${this.virtualize.offsetOf(at)}px`);
                     style.setProperty('inset-inline-start', `calc((100% + ${gap}px) * ${this.lanes.lane(at)} / ${columns})`);
                     style.setProperty('inline-size', `calc((100% - ${gap * (columns - 1)}px) / ${columns})`);
                 }
+                else {
+                    style.removeProperty('position');
+                    style.removeProperty('inset-block-start');
+                    style.removeProperty('inset-inline-start');
+                    style.removeProperty('inline-size');
+                }
             }
             const stop = at === this.active;
             group[0]?.setAttribute('tabindex', stop ? '0' : '-1');
@@ -755,6 +838,21 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }, 0);
         }
     }
+    parkRows(group) {
+        for (const element of group) {
+            element.hidden = true;
+            element.setAttribute('aria-hidden', 'true');
+            element.setAttribute('data-virtual-pool', '');
+            element.removeAttribute('data-index');
+            element.style.removeProperty('order');
+        }
+    }
+    dropRows(group) {
+        for (const element of group) {
+            this.sizes?.unobserve(element);
+            element.remove();
+        }
+    }
     groups(sections, wanted, regroup, refill) {
         const keep = new Set(sections ? wanted.map((at) => sectionAt(sections, at)) : []);
         const groups = new Map();