@fusion.dev/helix-headless 0.155.0 → 0.156.0

package/dist/canvas/node/canvas-node.js

@@ -77,7 +77,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
       aria-describedby=${this.status || this.meaning || this.links ? 'about' : nothing}
       aria-label=${this.label || nothing}
       aria-labelledby=${this.label || this.group ? nothing : 'content'}
-      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
+      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Control+ArrowDown Control+ArrowUp Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
       role=${this.group ? 'group' : 'article'}
       tabindex=${this.current ? '0' : '-1'}
     >

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

@@ -46,6 +46,10 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * - One card holds the board's tab stop.
  * - The arrow keys move through the cards in reading order. The card you land
  *   on scrolls into view, and its connections are announced with it.
+ * - The card you land on is selected. Control or Command with an arrow key,
+ *   Home, or End moves without changing the selection, and Space adds the card
+ *   to the selection or takes it out, so you can select cards that are not
+ *   next to each other.
  * - Shift with an arrow key moves the card: by 16 units, or to the next
  *   multiple of `snap` where it is set. Alt with an arrow key resizes it from
  *   its bottom right corner the same way.
@@ -143,6 +147,8 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart zoom-in - The button that zooms in.
  * @csspart zoom-out - The button that zooms out.
  *
+ * @cssproperty --canvas-zoom - The board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at `calc(1px / var(--canvas-zoom))`.
+ *
  * @cssstate connecting - While you draw a connection.
  * @cssstate direct - The board moves without easing, while you drag it or while it settles into its box.
  * @cssstate empty - While the document has no nodes.
@@ -271,14 +277,21 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * units.
      */
     resizedLabel: string;
+    /**
+     * What a screen reader calls the board in place of its role, after its
+     * name: "Release plan, canvas". Said only where the board has a name of its
+     * own, since the fallback name is the same word. Empty leaves the role.
+     */
+    roleLabel: string;
     /**
      * The names of the selected cards and connections, comma separated. Empty
      * when nothing is selected.
      *
      * **Comma separated, the way `Listbox` writes a multiple value**, so a page
      * reads one selection the same way wherever it comes from. A click, or a key
-     * that lands on one, selects it alone; Shift, Command or Control with a click
-     * adds or takes one away, and so does Space; Command or Control with A
+     * that lands on one, selects it alone; Command or Control with an arrow key
+     * moves without selecting; Shift, Command or Control with a click adds or
+     * takes one away, and so does Space; Command or Control with A
      * selects everything; Shift and a drag across the empty board selects the
      * cards the box touches. A click on the empty board, or Escape, selects
      * nothing. Dragging, Shift with an arrow, and Delete act on the whole
@@ -882,6 +895,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * asks for it and Escape stops.
      */
     private readonly handleStopKeydown;
+    /** Whether the stop focus is moving to keeps the selection as it is. */
+    private walkingApart;
     /**
      * A stop a reader landed on becomes the tab stop, and a card comes into view.
      *

package/dist/canvas/root/canvas-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 { assignSlots, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
+import { assignSlots, auditName, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { descriptionOf } from '../describe.js';
@@ -57,6 +57,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.readOnly = false;
         this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
         this.resizedLabel = '{name} resized to {width} by {height}';
+        this.roleLabel = 'canvas';
         this.selected = '';
         this.selectedLabel = 'selected';
         this.selectionLabel = '{count} selected';
@@ -592,8 +593,15 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 return;
             }
             event.preventDefault();
-            this.focusStop(walk[to]?.key);
+            this.walkingApart = event.ctrlKey || event.metaKey;
+            try {
+                this.focusStop(walk[to]?.key);
+            }
+            finally {
+                this.walkingApart = false;
+            }
         };
+        this.walkingApart = false;
         this.handleFocusIn = (event) => {
             const edge = this.edgeOf(event);
             const card = edge === undefined ? this.cardOf(event) : undefined;
@@ -603,7 +611,10 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.refocus = undefined;
             this.focusedCard = card;
             this.stop = edge ?? card?.name;
-            if (!this.pointing && this.stop !== undefined && !this.picked.includes(this.stop)) {
+            if (!this.pointing &&
+                !this.walkingApart &&
+                this.stop !== undefined &&
+                !this.picked.includes(this.stop)) {
                 this.choose(this.stop);
             }
             if (card) {
@@ -1650,6 +1661,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        auditName(this, () => null, 'Give it a `label` that says what the board holds, such as "Release plan".', () => this.label !== '');
         if (this.waiting) {
             this.measured = this.box;
             this.view = this.waiting;
@@ -1941,7 +1953,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         d=${drawn.d}
         data-edge=${key}
         fill="none"
-        aria-keyshortcuts="Enter F2 C Delete"
+        aria-keyshortcuts="Enter F2 Space Control+ArrowDown Control+ArrowUp C Delete"
         role="button"
         tabindex=${key === stop ? '0' : '-1'}
       />
@@ -2050,7 +2062,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return html `<div
       part="region"
       role="group"
-      aria-label=${this.label || this.fallbackLabel}
+      aria-label=${this.label || this.getAttribute?.('aria-label') || this.fallbackLabel}
+      aria-roledescription=${(this.label || this.getAttribute?.('aria-label')) && this.roleLabel ? this.roleLabel : nothing}
       aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -2063,7 +2076,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
       </div>
       <div
         part="viewport"
-        style=${`--_canvas-x: ${this.at.x}px; --_canvas-y: ${this.at.y}px; --_canvas-zoom: ${this.at.zoom}; --_canvas-rule-x: ${this.at.x - origin.x * this.at.zoom}px; --_canvas-rule-y: ${this.at.y - origin.y * this.at.zoom}px; --_canvas-rule-zoom: ${ruling(this.at.zoom)}`}
+        style=${`--_canvas-x: ${this.at.x}px; --_canvas-y: ${this.at.y}px; --_canvas-zoom: ${this.at.zoom}; --canvas-zoom: ${this.at.zoom}; --_canvas-rule-x: ${this.at.x - origin.x * this.at.zoom}px; --_canvas-rule-y: ${this.at.y - origin.y * this.at.zoom}px; --_canvas-rule-zoom: ${ruling(this.at.zoom)}`}
         @wheel=${this.handleWheel}
       >
         <!-- **One shape, whatever the board holds**, which is what hydration
@@ -2175,6 +2188,10 @@ __decorate([
     words,
     property({ attribute: 'resized-label' })
 ], HelixHeadlessCanvas.prototype, "resizedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessCanvas.prototype, "roleLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "selected", void 0);

package/dist/chat/composer/chat-composer.js

@@ -105,7 +105,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         super.updated(changed);
         this.markEmpty();
         if (changed.has('value')) {
-            this.internals.setFormValue(this.value === '' ? null : this.value);
+            this.internals.setFormValue(this.value === '' ? null : this.value, this.value);
         }
         const field = this.partNamed('field');
         if (field?.validity) {

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

@@ -40,7 +40,8 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * The log is `aria-live="off"`. A separate status region announces each new
  * turn once, when it has finished arriving. It skips the user's own turns
  * unless they failed to send, turns loaded as history, and the turns already
- * there when the transcript opened.
+ * there when the transcript opened. A turn is said with its author first, such
+ * as "Ada: It ships today" (`arrival-label`), where its author can be named.
  *
  * Pass the turns as children or as `turns` data. Do not use both. Children
  * render from the server and suit most conversations. `turns` draws a long
@@ -145,6 +146,13 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     static shadowRootOptions: ShadowRootInit;
     /** How tall a turn is assumed to be before it has been drawn, in pixels. */
     static readonly ESTIMATE = 72;
+    /**
+     * What a screen reader hears when a turn arrives. `{author}` is who wrote
+     * it, as its name says it, and `{text}` its words. A turn with no author a
+     * reader can be told, a turn by `them` with no `author-label`, says its
+     * words alone.
+     */
+    arrivalLabel: string;
     /**
      * Declarations for the turns from `turns` by each author, keyed by `author`,
      * as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
@@ -430,6 +438,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     private announce;
     /** The turns after the newest one already accounted for, by the rules above. */
     private arrived;
+    /**
+     * What is said for a turn: a failed one with `failed-turn-label`, and
+     * another with `arrival-label` where its author can be named, so a reader
+     * in a conversation of several knows who spoke.
+     */
     private phrase;
     /** Watches what is drawn for size, re-observing only when that changed. */
     private watchSizes;

package/dist/chat/root/chat-root.js

@@ -11,7 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import { TURN_WORDS } from '../naming.js';
+import { authorWords, TURN_WORDS } from '../naming.js';
 const REGIONS = ['header', 'actions', 'resume', 'status', 'composer'];
 const SECOND_NAMES = {
     author: {
@@ -40,6 +40,7 @@ const drawnInFull = ({ element }) => element.firstElementChild?.hasUpdated !== f
 let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.arrivalLabel = '{author}: {text}';
         this.authorStyles = {};
         this.defaultPinned = true;
         this.failedLabel = 'Not sent';
@@ -180,6 +181,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (this.fed) {
             return this.turns.map((turn) => ({
                 author: turn.author,
+                by: authorWords(turn.author, turn.authorLabel ?? '', this.words),
                 failed: this.failedLabel,
                 id: this.identity(turn),
                 state: turn.state,
@@ -188,6 +190,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         }
         return this.messages.map((message) => ({
             author: message.author,
+            by: authorWords(message.author, message.authorLabel, this.words),
             failed: message.failedLabel,
             id: message,
             state: message.state,
@@ -349,9 +352,12 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return at < 0 ? [] : turns.slice(at + 1);
     }
     phrase(turn) {
-        return turn.state === 'failed'
-            ? formatWords(this, 'failedTurnLabel', { failed: turn.failed, text: turn.text })
-            : turn.text;
+        if (turn.state === 'failed') {
+            return formatWords(this, 'failedTurnLabel', { failed: turn.failed, text: turn.text });
+        }
+        return turn.by === ''
+            ? turn.text
+            : formatWords(this, 'arrivalLabel', { author: turn.by, text: turn.text });
     }
     watchSizes() {
         if (typeof ResizeObserver === 'undefined') {
@@ -509,6 +515,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
       </div>`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'arrival-label' })
+], HelixHeadlessChat.prototype, "arrivalLabel", void 0);
 __decorate([
     property({ attribute: 'author-styles', converter: wordsConverter })
 ], HelixHeadlessChat.prototype, "authorStyles", void 0);

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

@@ -198,6 +198,16 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * every keystroke. See Listbox's `filter-delay`.
      */
     filterDelay: number;
+    /**
+     * What the form receives for each chosen option: `key`, its `value`, or
+     * `text`, its words, as React Aria's ComboBox `formValue` offers.
+     *
+     * `text` is for a server that wants what the reader saw, such as a city's
+     * name. A value no option carries, typed with `allows-custom-value` or made
+     * with `creatable`, is sent as it is either way. Absent is `key`, and the
+     * host carries no attribute for it.
+     */
+    formValue?: 'key' | 'text';
     /**
      * The list's name, read by screen readers. The list has no visible name.
      */

package/dist/combobox/root/combobox-root.js

@@ -453,11 +453,23 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.partNamed('control') ?? super.focusTarget;
     }
     sync() {
-        if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+        const values = this.multiple ? this.values : this.value === '' ? [] : [this.value];
+        const words = this.formValue === 'text'
+            ? new Map(optionsAmong(this.knownChildren).map((option) => [option.value, option.text]))
+            : undefined;
+        const answers = words ? values.map((value) => words.get(value) ?? value) : values;
+        if (!this.multiple) {
+            this.internals.setFormValue(answers[0] ?? null, this.value);
+        }
+        else if (words && this.name !== '' && answers.length > 0) {
+            const data = new FormData();
+            for (const answer of answers) {
+                data.append(this.name, answer);
+            }
+            this.internals.setFormValue(data, this.value);
         }
         else {
-            this.internals.setFormValue(this.value === '' ? null : this.value);
+            reportValues(this.internals, this.name, answers);
         }
         this.reportRequired(this.value === '', this.valueMissingMessage, 'control');
     }
@@ -677,6 +689,9 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-delay', type: Number })
 ], HelixHeadlessCombobox.prototype, "filterDelay", void 0);
+__decorate([
+    property({ attribute: 'form-value' })
+], HelixHeadlessCombobox.prototype, "formValue", void 0);
 __decorate([
     words,
     property({ attribute: 'list-label' })

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { type DataOptionItem, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
@@ -22,10 +22,51 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * palette is open. `mod` means Command on a Mac and Control elsewhere, so you
  * write one binding.
  *
+ * With `inline`, the palette is drawn in the page with no dialog, as a search
+ * over a list that is always shown.
+ *
+ * **Pages.** A command can open a page of commands of its own, as a palette
+ * offers "Change theme" and then the themes. Give the option `opens` with a
+ * name, and slot the page's commands as `page:` and that name:
+ *
+ * ```html
+ * <helix-command>
+ *   <helix-option value="theme" opens="theme">Change theme</helix-option>
+ *   <helix-option value="dark" slot="page:theme">Dark</helix-option>
+ *   <helix-option value="light" slot="page:theme">Light</helix-option>
+ * </helix-command>
+ * ```
+ *
+ * Choosing the opener says `helix-select` with its value, and canceling it
+ * keeps the page that is shown. The list then shows the page, named by the
+ * opener's words, and Backspace in an empty filter goes back. `page` says
+ * which page is shown.
+ *
  * The filter is cleared when the palette closes, so each opening starts from
  * the full list. Combobox and Select do the same. As typing narrows the list, a
  * screen reader hears how many commands are left, such as "3 commands".
  *
+ * **Keyboard.** Focus goes to the filter field as the palette opens, and the
+ * highlight moves through the commands while you type.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |
+ * | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
+ * | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
+ * | Home, End, Left, Right | Move the caret in the filter field. |
+ * | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |
+ * | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
+ * | Backspace | In an empty filter on a page, goes back to the page before. |
+ * | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. |
+ * | Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |
+ *
+ * **ARIA.** The palette is a modal `dialog` named by `label`, or with
+ * `inline` no dialog at all. Inside it the filter field is a `combobox` with
+ * `aria-activedescendant` on the highlighted command, and the commands are a
+ * `listbox` of `option`s. How many commands typing left, the empty text and
+ * the loading text are said in a polite live region.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -35,7 +76,9 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @slot - The commands, and any groups of them.
  * @slot empty - What the palette shows when typing matches no commands, for content richer than `empty-text`.
  * @slot error - What the palette shows while `load-error` is set, for content richer than its text.
+ * @slot filter-icon - Replaces the magnifying glass in the filter field.
  * @slot footer - Content under the list, such as the keys that work in the palette.
+ * @slot header - Content above the filter field, such as a title or the scope being searched. A heading here does not rename the palette, which `label` names.
  * @slot loading - What the palette shows while the commands load, for content richer than `loading-text`.
  * @slot no-results - What the palette shows when typing matches no commands, for content richer than `no-results-text`.
  *
@@ -67,6 +110,10 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @csspart listbox-search - The region that holds the filter field.
  * @csspart listbox-search-field - The filter field.
  *
+ * @cssstate empty - The list shows no commands: there are none, or typing hid every one.
+ * @cssstate error - While `load-error` is set.
+ * @cssstate loading - While `loading` is set.
+ * @cssstate no-results - Typing hid every one of the commands, where there are some.
  * @cssstate open - While the palette is open.
  */
 export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
@@ -95,6 +142,26 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * with: one key, said once.
      */
     hotkey: string;
+    /**
+     * Draws the palette in the page, where it stands, with no dialog: a search
+     * over a list of commands, as React Aria's Autocomplete is drawn.
+     *
+     * The list is always shown, and `hotkey` puts focus in its filter field.
+     * Choosing a command says `helix-select` and leaves the list where it is,
+     * and `open`, `toggle` and the dialog's parts do nothing.
+     */
+    inline: boolean;
+    /**
+     * The commands as data, for a palette too long to draw whole: each a value,
+     * which is also its words, or a record with a `value`, a `label` and
+     * `disabled`. Handed to the list, which draws only the commands in sight and
+     * reads no children while it is set. See Listbox's `items`.
+     *
+     * Choosing one says `helix-select` with its value, as a child option does.
+     * A command that is a link, or that has an `alternate`, is an option you
+     * write as a child.
+     */
+    items: readonly DataOptionItem[] | undefined;
     /**
      * Accessible name for the overlay, which has no visible heading.
      */
@@ -122,6 +189,19 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * some. Absent, `empty-text` shows. See Listbox's `no-results-text`.
      */
     noResultsText?: string;
+    /**
+     * The page of commands shown, by name: empty for the commands you write
+     * with no `slot`, or a name for the commands slotted as `page:` and the
+     * name, such as `slot="page:theme"`.
+     *
+     * An option with `opens` set to a name goes to that page when it is chosen,
+     * in place of running, and Backspace in an empty filter goes back to the
+     * page before. Closing the palette goes back to the first page. Set it to
+     * open the palette on a page of your choosing.
+     */
+    page: string;
+    /** The pages gone through to reach this one, which Backspace walks back. */
+    private trail;
     /**
      * The text shown in the filter field before anything is typed.
      */
@@ -169,6 +249,8 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * palette the reader never sees.
      */
     private readonly handleHotkey;
+    /** The list's filter field, where a reader types. */
+    private get searchField();
     /**
      * Takes what the list announced and says it under this element's name.
      *
@@ -183,6 +265,18 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * could not be run again: Enter did nothing and the palette stayed open.
      */
     private readonly handleChange;
+    /**
+     * Shows a page of commands, with the trail that leads back from it. The
+     * filter starts empty, as it does on opening, and the field keeps focus.
+     */
+    private goTo;
+    /** Backspace in an empty filter, on a page, goes back to the page before. */
+    private readonly handleBack;
+    /**
+     * The list's name: the palette's, or on a page, the words of the command
+     * that opens it.
+     */
+    private get listName();
     /**
      * The row under the keyboard, read from the `active` property the listbox
      * writes on each option.
@@ -217,6 +311,20 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * The list's loading, error and empty states on the host too, so a page
+     * styles the whole palette from them, as Combobox does. Read once the list
+     * has drawn its filter, since `hidden` is what the filter writes onto a
+     * command.
+     */
+    private markStatus;
+    /**
+     * After the list has filtered on what was typed. The event comes before the
+     * filter is applied, so the list's update is waited for a turn later.
+     */
+    private readonly handleFilter;
+    /** Whether a child fills the named slot, so it is handed on to the dialog or the list. */
+    private fills;
     protected updated(changed: PropertyValues): void;
     /**
      * The surface the palette opens in, behind a seam the styled tier can move.
@@ -229,6 +337,13 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * from the same template.
      */
     protected renderDialog(): TemplateResult;
+    /**
+     * The filterable list of commands, which the dialog holds, or the page with
+     * `inline`, behind a seam the styled tier can move.
+     */
+    protected renderListbox(): TemplateResult;
+    /** The row under the list, in the dialog's footer or, `inline`, under the list itself. */
+    private renderFooter;
     protected render(): TemplateResult;
 }
 declare global {