@fusion.dev/helix-headless 0.169.0 → 0.171.0

package/dist/combobox/root/combobox-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, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -69,6 +69,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
+        this.created = new Set();
         this.handleInput = (event) => {
             event.stopPropagation();
             const typed = event.target.value;
@@ -252,7 +253,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.partNamed('listbox');
     }
     get values() {
-        return this.value === '' ? [] : this.value.split(',');
+        const known = new Set(this.created);
+        for (const option of optionsAmong(this.knownChildren)) {
+            known.add(option.value);
+        }
+        return chosenValues(this.value, known, this.multiple);
     }
     get chosen() {
         const options = optionsAmong(this.knownChildren);
@@ -296,6 +301,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             return;
         }
         const next = this.multiple ? [...this.values, wanted].join(',') : wanted;
+        this.created.add(wanted);
         if (!this.requestValue(next)) {
             return;
         }
@@ -343,6 +349,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
         const named = (this.listbox?.options ?? []).find((option) => option.text.trim().toLowerCase() === typed.toLowerCase());
         const answer = named?.value ?? typed;
+        this.created.add(answer);
         if (this.multiple) {
             if (!this.values.includes(answer)) {
                 this.requestValue([...this.values, answer].join(','));

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

@@ -55,7 +55,8 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * | `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. |
+ * | Home, End | Move the caret in the filter field. With `home-end="list"`, move the highlight to the first or the last command. |
+ * | 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. |
@@ -144,6 +145,14 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * property only, there being no way to write a function in markup.
      */
     filterMatch?: ((text: string, filter: string) => boolean) | undefined;
+    /**
+     * Where Home and End go from the filter field.
+     *
+     * Absent, they move the caret, as APG's combobox has them. `list` moves the
+     * highlight to the first or the last command, as React Aria's Autocomplete
+     * does, and Shift with either still selects the text.
+     */
+    homeEnd?: 'list';
     /**
      * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
      * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
@@ -178,6 +187,12 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * Accessible name for the overlay, which has no visible heading.
      */
     label: string;
+    /**
+     * How the commands are laid out, as Listbox's `layout`: `grid` draws them in
+     * rows and columns, for a palette of icons or emoji, and the arrow keys
+     * follow the rows and the columns. Absent is one command under another.
+     */
+    layout?: 'grid' | 'stack';
     /**
      * What the list says when its commands could not be loaded, such as after a
      * request to a server fails. Empty, null or no attribute is no error, so

package/dist/command/root/command-root.js

@@ -246,6 +246,8 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         results-label=${this.resultsLabel}
         ?loading=${this.loading}
         .items=${this.items}
+        .fieldHomeEnd=${this.homeEnd === 'list'}
+        layout=${this.layout ?? nothing}
         filterable
         @helix-before-change=${this.handleChange}
         @helix-filter=${this.handleFilter}
@@ -299,6 +301,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCommand.prototype, "filterMatch", void 0);
+__decorate([
+    property({ attribute: 'home-end' })
+], HelixHeadlessCommand.prototype, "homeEnd", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
@@ -312,6 +317,9 @@ __decorate([
     words,
     property()
 ], HelixHeadlessCommand.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCommand.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'load-error' })
 ], HelixHeadlessCommand.prototype, "loadError", void 0);

package/dist/data-table/root/data-table-root.d.ts

@@ -24,10 +24,15 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * Sort and filter apply to the whole set, including the rows on other pages.
  *
- * **The cell values do not server-render.** The headings and the row elements
- * do. Reading a cell needs the columns, and Lit SSR does not pass the column
- * children to this element, so a crawler sees an empty table of the right
- * shape. Use `Table` when the served HTML has to carry the values.
+ * **Write the first page as rows, so the served HTML carries the values.** The
+ * table reads each cell from its column, and a server does not pass the column
+ * children to this element, so on its own it serves the headings and no values.
+ * Write the first page under the columns as `TableRow` and `TableCell`
+ * elements, in the table's sort and page size and formatted as its columns draw
+ * them. The table shows your rows until `rows` holds a row, then draws its own
+ * in their place and leaves yours in the page, unshown. A development build
+ * warns when the two differ. In React, map the first page of the same array in
+ * the same server component.
  *
  * `selectable` adds a column of checkboxes, keyed on `row-key`:
  *
@@ -132,7 +137,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @aliases Grid, Result table, Data grid
  * @documentation https://fusion.dev/helix/components/data-table
  *
- * @slot - The columns, as `TableColumn` elements.
+ * @slot - The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.
  * @slot empty - Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
  * @slot footer - Content below the grid. It replaces the built-in pagination.
@@ -610,6 +615,15 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private drawnPage;
     /** Whether the last render drew the `more` row, which follows the page's rows. */
     private moreDrawn;
+    /**
+     * Whether `rows` has held a row, after which the rows the page served are
+     * never shown again, whatever `rows` holds later.
+     */
+    private drewRows;
+    /** Whether the last render showed the rows the page served. */
+    private serving;
+    /** Whether the render before the last showed them, so the change is checked once. */
+    private servedLast;
     /** The letters typed at the grid, which move to the row whose header they start. */
     private readonly typeahead;
     /**
@@ -841,6 +855,27 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * what this replaced.
      */
     protected get hasRows(): boolean;
+    /**
+     * The rows the page served: the first page, written as `TableRow` children.
+     *
+     * By tag, because the page may not register `Table`, and an element that is
+     * not defined has no `isTableRow` to find it by.
+     */
+    private get servedRows();
+    /**
+     * Whether this render shows the rows the page served in place of drawing its
+     * own.
+     *
+     * **Until `rows` has held a row, and never after.** A server cannot tell
+     * whether the page served any, and a render hydrating what one sent has to
+     * render the same, so both show the slot that would hold them. In a browser
+     * the rows are shown while `rows` is empty, which is how a framework that
+     * renders on a server leaves the property until it hydrates. Once the table
+     * has drawn its own rows it stops showing the served ones and never removes
+     * them: they are the page's markup, and a framework that rendered them owns
+     * them.
+     */
+    private serves;
     /**
      * Whether this render can tell a result with no rows from one not yet handed
      * over.

package/dist/data-table/root/data-table-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
+import { anchorAt, arranged, auditServed, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -86,6 +86,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.focusWanted = false;
         this.drawnPage = [];
         this.moreDrawn = false;
+        this.drewRows = false;
+        this.serving = false;
+        this.servedLast = false;
         this.typeahead = new Typeahead();
         this.anchorKey = undefined;
         this.shiftPressed = false;
@@ -656,7 +659,17 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         })).length;
     }
     get hasRows() {
-        return this.view.available > 0 || !this.sourceKnown;
+        return this.view.available > 0 || !this.sourceKnown || this.serving;
+    }
+    get servedRows() {
+        return this.knownChildren.filter((child) => /^helix-(headless-)?table-row$/.test(child.localName));
+    }
+    serves() {
+        if (!this.sourceKnown) {
+            return true;
+        }
+        this.drewRows ||= this.rows.length > 0;
+        return !this.drewRows && this.servedRows.length > 0;
     }
     get sourceKnown() {
         return this.childrenKnown;
@@ -909,6 +922,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
         const columns = this.orderedColumns;
         head.assign(...columns);
+        root
+            .querySelector('[part="table"] > slot:not([name])')
+            ?.assign(...(this.serving ? this.servedRows : []));
         const rest = [...this.children].filter((child) => !columns.includes(child));
         for (const [name, wanted] of [
             ['toolbar', true],
@@ -986,6 +1002,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.toggleState('empty', !this.loading && !this.hasRows);
         this.toggleState('loading', this.loading);
         this.assign();
+        if (this.servedLast && !this.serving) {
+            auditServed(this, this.servedRows, [...this.renderRoot.querySelectorAll('[part~="row"]')], this.drawnPage.length);
+        }
+        this.servedLast = this.serving;
         this.announceSort();
         this.quietControls();
         this.placeFocus();
@@ -1186,7 +1206,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     render() {
         const { available, matched, page } = this.view;
-        this.drawnPage = page;
+        const serving = this.serves();
+        this.serving = serving;
+        this.drawnPage = serving ? [] : page;
         this.moreDrawn = this.loadMore && !this.loading && this.errorText === '' && page.length > 0;
         const rows = this.windowOf(page);
         const kept = this.keptRow(page);
@@ -1196,7 +1218,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const columns = this.shownColumns;
         const pagination = this.tag('pagination');
         const counted = this.mode === 'server' ? Math.max(this.total, available) : matched;
-        const countKnown = counted > 0 || this.sourceKnown;
+        const countKnown = counted > 0 || (this.sourceKnown && !serving);
         this.counts = {
             columns: columns.length ? columns.length + this.lead : undefined,
             rows: countKnown ? counted + 1 + (this.moreDrawn ? 1 : 0) : undefined,
@@ -1210,13 +1232,19 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         @scroll=${this.handleScroll}
       >
         <div part="head" role="row" aria-rowindex="1">
-          ${this.rowGrips ? this.renderGripHead(headStop && this.currentColumn === 0) : nothing}${this.selectable
+          ${this.rowGrips && this.sourceKnown
+            ? this.renderGripHead(headStop && this.currentColumn === 0)
+            : nothing}${this.selectable && this.sourceKnown
             ? this.renderSelectAll(headStop && this.currentColumn === this.selectAt)
             : nothing}${this.assignsByName && !this.hydrating
             ? this.orderedColumns.map((_, index) => html `<slot name=${`column-${index + 1}`} @slotchange=${this.handleSlotChange}></slot>`)
-            : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
+            : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}${this.sourceKnown ? nothing : html `<slot @slotchange=${this.handleSlotChange}></slot>`}
         </div>
-        ${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}
+        ${serving
+            ? this.sourceKnown
+                ? html `<slot @slotchange=${this.handleSlotChange}></slot>`
+                : nothing
+            : html `${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}`}
         ${this.renderMore(page)}${this.errorText === '' ? this.renderStatus(filled, 'gridcell') : this.renderError()}
       </div>
       ${this.errorText === '' ? this.renderLive(filled) : html `<span part="live" role="status">${this.errorText}</span>`}

package/dist/filter-input/chip/filter-chip.d.ts

@@ -28,9 +28,10 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * press. `requestChange` documents the pattern.
  *
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
- * field asks to remove the last chip, the arrow keys move between the field
- * and the chips, and Delete or Backspace on a chip asks to remove it.
+ * on it asks to remove the filter. In a `FilterInput`, the field's text is the
+ * one tab stop: Backspace in the empty field asks to remove the last chip, the
+ * arrow keys move between the field and the chips, and Delete or Backspace on
+ * a chip asks to remove it.
  *
  * The remove button is named `dismiss-label` followed by the chip's words,
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -78,6 +79,15 @@ export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_bas
      * closing a message.
      */
     dismissLabel: string;
+    /**
+     * Whether the remove button is a tab stop of its own.
+     *
+     * `FilterInput` writes `false` on the chips in its `tags` slot: the field's
+     * text is its one tab stop, and the arrow keys move from the text to the
+     * chips, as in a `multiple` Combobox. No attribute: it is coordination
+     * between elements, as `Tag.dismissTabStop` is.
+     */
+    dismissTabStop: boolean;
     /**
      * The name of the field the filter is on, as shown on the chip.
      *

package/dist/filter-input/chip/filter-chip.js

@@ -13,6 +13,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Remove filter';
+        this.dismissTabStop = true;
         this.label = '';
         this.operatorLabel = '';
     }
@@ -43,6 +44,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
               part="dismiss"
               type="button"
               aria-label=${this.removeName}
+              tabindex=${this.dismissTabStop ? nothing : '-1'}
               @click=${() => this.dismiss()}
             >
               <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
@@ -56,6 +58,9 @@ __decorate([
     words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessFilterChip.prototype, "dismissLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFilterChip.prototype, "dismissTabStop", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterChip.prototype, "label", void 0);

package/dist/filter-input/menu/filter-menu.js

@@ -180,7 +180,6 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   part="divider"
                   exportparts="content: divider-content, line: divider-line"
                   slot="submenu"
-                  announced
                 ></${divider}>`
                 : nothing}
           ${offered.map((option) => html `<${item}

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

@@ -33,8 +33,9 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * first colon, reads a leading `-` as the negation, and reads a word in
  * brackets before the colon as the comparison.
  *
- * **Keyboard.** Focus stays in the text. The text names the highlighted
- * suggestion as its `aria-activedescendant`.
+ * **Keyboard.** Focus stays in the text, which is the field's one tab stop. The
+ * text names the highlighted suggestion as its `aria-activedescendant`, and the
+ * arrow keys reach the tokens.
  *
  * | Key | What it does |
  * |---|---|
@@ -92,7 +93,8 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  *   and removing the chip alone would leave its value ticked in the hidden
  *   menu. Its dismissal is treated as the field being filtered by nothing, so
  *   it fires `helix-facet` like every other change, and the chip goes when the
- *   filter goes.
+ *   filter goes. Set `chips` and the field adds, updates, and removes those
+ *   chips itself, from every `helix-facet` you do not cancel.
  *
  * @since 0.1.0
  * @status stable
@@ -105,6 +107,8 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
  * @slot label - The label, for content richer than the `label` text.
+ * @slot loading - What the panel shows while `loading` is set, for content richer than `loading-text`.
+ * @slot no-results - What the panel shows when `filter-suggestions` hides every suggestion, for content richer than `no-results-text`.
  * @slot start - Content before the text, such as a search icon.
  * @slot suggestions - Suggestions for what to type next, as `Option`s and `Option.Group`s.
  * @slot tags - The active filters, as `FilterChip`s or `Tag`s.
@@ -121,17 +125,21 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  *
  * @csspart clear - The button that empties the field.
  * @csspart control - The input itself.
+ * @csspart empty - Shown in the panel when `filter-suggestions` hides every suggestion.
  * @csspart feedback - The error message under the field.
  * @csspart field - The box that holds everything.
  * @csspart hint - The help text under the field, shown while there is no error.
  * @csspart label - The label above the field.
  * @csspart lead - The box before the text that holds the `start` slot.
  * @csspart live - The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
+ * @csspart loading - Shown in the panel while the suggestions load.
  * @csspart rest - The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
  * @csspart surface - The floating panel the suggestions sit in.
  * @csspart tags - The row the tokens sit in.
  *
  * @cssstate invalid - The field has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate loading - While `loading` is set.
+ * @cssstate no-results - `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
  * @cssstate open - The suggestions are open.
  */
 export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_base {
@@ -143,6 +151,20 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     protected readonly aria: AriaForwardController;
     /** Typed, so every keystroke is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * Whether the field keeps a `FilterChip` for each filter in its `tags` slot,
+     * from the `helix-facet` events it hears.
+     *
+     * Off, you build the chips, which is what you do when your own model holds
+     * the filters. On, a filter typed, picked, or changed adds or updates the
+     * chip for its field, one with no values takes it away (unless its
+     * comparison takes none, such as "is empty"), and removing the chip clears
+     * the filter. A `helix-facet` you cancel changes no chip.
+     *
+     * The chips are elements the field adds to its own children, so leave this
+     * off where a framework renders those children and would remove them.
+     */
+    chips: boolean;
     /**
      * Shows a button that empties the field.
      *
@@ -163,6 +185,27 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * what you slot and you narrow it.
      */
     filterSuggestions: boolean;
+    /**
+     * Whether the suggestions are still loading, such as while a request for the
+     * values of a typed key is out.
+     *
+     * The panel opens on `loading-text`, or the `loading` slot, while the field
+     * has focus, and a screen reader hears it. Slot the options and clear this
+     * when they arrive.
+     */
+    loading: boolean;
+    /**
+     * Text the panel shows while the suggestions load.
+     */
+    loadingText: string;
+    /**
+     * Text the panel shows when `filter-suggestions` hides every suggestion, such
+     * as "No matching filters".
+     *
+     * Empty, or no `no-results` slot, and the panel closes instead, as it does
+     * when it has nothing to offer.
+     */
+    noResultsText: string;
     /**
      * The text shown while the field is empty.
      *
@@ -341,6 +384,16 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * else could have said it.
      */
     private announceFacet;
+    /**
+     * Keeps the chip for a filter in step with it, under `chips`.
+     *
+     * After every listener has had its turn, so a consumer's `preventDefault()`
+     * on the same event, on this element or above it, is read: `dispatchEvent`
+     * runs them all before the microtask does.
+     */
+    private readonly handleFacet;
+    /** Adds, updates or removes the chip for one filter. See `chips`. */
+    private drawChip;
     /**
      * A chip asking to go, answered as the filter going.
      *
@@ -413,6 +466,12 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * is why `settleOpen` is not called from here.
      */
     private refreshSuggesting;
+    /**
+     * Whether `filter-suggestions` has hidden every suggestion there is, where a
+     * `no-results-text` or a `no-results` slot says so. The panel stays open on
+     * it, and `:state(no-results)` is on the host.
+     */
+    private get unmatched();
     /** The panel again, whenever what is in it changes. */
     private readonly handleSuggestions;
     /** Focus arriving in the field is a reader asking what they can type. */
@@ -426,7 +485,15 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     private readonly handleFocusOut;
     /** The leading box again, whenever what is in front of the text changes. */
     private readonly handleLeading;
-    /** The row again, whenever what is in it changes. */
+    /**
+     * The row again, whenever what is in it changes.
+     *
+     * **And the text is the field's one tab stop.** Each token's remove button
+     * was a stop of its own, so Tab through a field with five filters took six
+     * presses. A `Tag` or `FilterChip` takes `dismissTabStop` for this, as the
+     * tags of a `multiple` Combobox do, and the arrow keys still reach every one.
+     * A token not yet defined is told once it is.
+     */
     private readonly handleTokens;
     /** The tokens slotted in `tags`, which the arrow keys reach from the text. */
     protected tokenElements(): HTMLElement[];