@fusion.dev/helix-headless 0.170.0 → 0.172.0

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[];

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

@@ -21,9 +21,13 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
+        this.chips = false;
         this.clearable = false;
         this.clearLabel = 'Clear';
         this.filterSuggestions = false;
+        this.loading = false;
+        this.loadingText = 'Loading';
+        this.noResultsText = '';
         this.placeholder = '';
         this.suggestionsLabel = '{count, plural, one {# suggestion} other {# suggestions}}';
         this.status = new StatusController(this);
@@ -59,6 +63,17 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             event.stopPropagation();
             this.announceChange();
         };
+        this.handleFacet = (event) => {
+            if (!this.chips) {
+                return;
+            }
+            const facet = event.detail;
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    this.drawChip(facet);
+                }
+            });
+        };
         this.handleDismiss = (event) => {
             const chip = event.composedPath()[0];
             if (!(chip instanceof HTMLElement) || chip.slot !== 'tags') {
@@ -161,6 +176,20 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         };
         this.handleTokens = () => {
             this.over = this.hideOverflow(this.tokens);
+            for (const token of this.tokenElements()) {
+                const quiet = () => {
+                    if ('dismissTabStop' in token) {
+                        ;
+                        token.dismissTabStop = false;
+                    }
+                };
+                if (token.localName.includes('-') && !customElements.get(token.localName)) {
+                    void customElements.whenDefined(token.localName).then(quiet);
+                }
+                else {
+                    quiet();
+                }
+            }
         };
     }
     static { this.words = 'helix-filter-input'; }
@@ -181,14 +210,22 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         }
     }
     sayCount() {
-        const count = this.open && this.suggesting ? this.suggestions.length : -1;
+        const count = this.open && this.suggesting ? (this.loading ? -2 : this.suggestions.length) : -1;
         if (count === this.saidCount) {
             return;
         }
         this.saidCount = count;
+        if (count === -2) {
+            this.status.sayNow(this.loadingText);
+            return;
+        }
         if (count < 0) {
             return;
         }
+        if (count === 0 && this.noResultsText !== '') {
+            this.status.sayNow(this.noResultsText);
+            return;
+        }
         this.status.sayNow(this.suggestionLabel
             ? countLabel(count, this.suggestionLabel, this.suggestionsLabel, wordsLocale(this))
             : formatWords(this, 'suggestionsLabel', { count }));
@@ -259,6 +296,25 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             ? menu.apply(facet.field, facet.values, facet.operator)
             : this.dispatchEvent(new HelixFacetEvent(facet));
     }
+    drawChip(facet) {
+        const tag = `${this.constructor.tier}filter-chip`;
+        const held = [...this.children].find((child) => child.localName === tag && child.getAttribute('name') === facet.field);
+        if (facet.values.length === 0 && facet.arity !== 'none') {
+            held?.remove();
+            return;
+        }
+        const chip = held ?? document.createElement(tag);
+        chip.slot = 'tags';
+        chip.dismissible = true;
+        chip.label = facet.label;
+        chip.setAttribute('name', facet.field);
+        chip.operator = facet.operator;
+        chip.operatorLabel = facet.operatorLabel;
+        chip.textContent = facet.values.join(', ');
+        if (!held) {
+            this.append(chip);
+        }
+    }
     readFilters() {
         const fields = this.fields;
         if (fields.length === 0) {
@@ -310,9 +366,13 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     refreshSuggesting() {
         this.narrow();
         const options = this.suggestions;
-        this.suggesting = options.length > 0;
+        this.suggesting = options.length > 0 || this.loading || this.unmatched;
         this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
     }
+    get unmatched() {
+        const said = this.noResultsText !== '' || this.knownChildren.some((child) => child.slot === 'no-results');
+        return said && !this.loading && this.options.length > 0 && this.suggestions.length === 0;
+    }
     tokenElements() {
         return (this.tokens?.assignedElements({ flatten: true }) ?? []);
     }
@@ -328,10 +388,12 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-dismiss', this.handleDismiss);
+        this.addEventListener(HelixFacetEvent.eventName, this.handleFacet);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-dismiss', this.handleDismiss);
+        this.removeEventListener(HelixFacetEvent.eventName, this.handleFacet);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -348,6 +410,8 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         }
         this.handleTokens();
         this.refreshSuggesting();
+        this.toggleState('loading', this.loading);
+        this.toggleState('no-results', this.unmatched);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -443,11 +507,22 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
       ?hidden=${!this.open}
     >
       <slot name="suggestions" @slotchange=${this.handleSuggestions}></slot>
+      <!-- Hidden from the tree, which a listbox keeps for its options: the
+           live region says these. -->
+      <div part="loading" aria-hidden="true" ?hidden=${!this.loading}>
+        <slot name="loading">${this.loadingText}</slot>
+      </div>
+      <div part="empty" aria-hidden="true" ?hidden=${!this.unmatched}>
+        <slot name="no-results">${this.noResultsText}</slot>
+      </div>
     </div>
     ${drawStatus(this.status)}
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFilterInput.prototype, "chips", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFilterInput.prototype, "clearable", void 0);
@@ -458,6 +533,16 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-suggestions', type: Boolean })
 ], HelixHeadlessFilterInput.prototype, "filterSuggestions", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessFilterInput.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-text' })
+], HelixHeadlessFilterInput.prototype, "loadingText", void 0);
+__decorate([
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessFilterInput.prototype, "noResultsText", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterInput.prototype, "placeholder", void 0);

package/dist/format-date/root/format-date-root.d.ts

@@ -15,7 +15,9 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * **`relative` shows the same reading in words**, such as "3 hours ago" at
  * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
  * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
- * default says "yesterday".
+ * default says "yesterday". Both readings round the count, as
+ * `sl-relative-time` does: 100 seconds ago is "2 minutes ago", and 59.6
+ * minutes is "1 hour".
  *
  * **`date-style` and `time-style` take each locale's own pattern**, such as
  * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,

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

@@ -209,6 +209,12 @@ export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     /** Where the selection starts, as an offset into the value. */
     get selectionStart(): number;
     set selectionStart(at: number);
+    /**
+     * Replaces a range of the text, as the native method does: the selection
+     * where `start` and `end` are left out, and `selectMode` says what is
+     * selected after. It sends no event, as the native method sends none.
+     */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: SelectionMode): void;
     /**
      * Selects the range from `start` to `end` in one call, which setting
      * `selectionStart` and `selectionEnd` one at a time cannot always do.

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

@@ -97,6 +97,19 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             control.selectionStart = at;
         }
     }
+    setRangeText(replacement, start, end, selectMode) {
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        if (start === undefined || end === undefined) {
+            control.setRangeText(replacement);
+        }
+        else {
+            control.setRangeText(replacement, start, end, selectMode);
+        }
+        this.value = control.value;
+    }
     setSelectionRange(start, end, direction) {
         this.control?.setSelectionRange(start, end, direction);
     }

package/dist/lightbox/root/lightbox-root.js

@@ -91,6 +91,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                 '--show': () => this.show(),
                 '--toggle': () => this.toggleOpen(),
             },
+            expanded: () => this.open,
         });
         this.handleSlotChange = () => {
             this.requestUpdate();

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

@@ -154,6 +154,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     emptyText: string;
     /** What the list is narrowed to, whoever set it. */
     private filterState;
+    /**
+     * @internal Set by `Command` under `home-end="list"`: whether Home and End
+     * in the filter field move the highlight, without Shift, rather than the
+     * caret. A property, as coordination between elements.
+     */
+    fieldHomeEnd: boolean;
     /**
      * The text the list is filtered by, if any.
      *
@@ -388,7 +394,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * sounded the same. Said when the filter changes and the count with it, so
      * a keystroke that leaves the same options says nothing new. An empty filter
      * says nothing, being the list as it was given; no matches is `empty-text`,
-     * which the region says in place of this.
+     * which the region says in place of this. A load that ends says the count
+     * too, whatever the filter.
      */
     private tell;
     /**

package/dist/listbox/root/listbox-root.js

@@ -23,6 +23,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.defaultFilter = '';
         this.emptyText = 'No matches';
         this.filterState = undefined;
+        this.fieldHomeEnd = false;
         this.filterable = false;
         this.filterDelay = 0;
         this.filterLabel = 'Filter';
@@ -127,7 +128,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 (event.key === 'Home' || event.key === 'End');
             const grid = this.layout === 'grid' && !this.data.records;
             const along = grid && !typing ? inlineStep(this, event.key) : 0;
-            if (!fieldRange && !along && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const fieldMoves = this.fieldHomeEnd && !event.shiftKey ? MOVES : FIELD_MOVES;
+            if (!fieldRange && !along && !(typing ? fieldMoves : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
@@ -258,13 +260,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (!this.hasUpdated) {
             return;
         }
-        if (!changed.has('filter')) {
+        const loaded = changed.get('loading') === true && !this.loading;
+        if (!changed.has('filter') && !loaded) {
             this.tellActive(changed);
             return;
         }
         const count = this.shown.length;
         this.announced =
-            this.filter.trim() && count
+            (this.filter.trim() || loaded) && count
                 ? this.resultLabel
                     ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
                     : formatWords(this, 'resultsLabel', { count })
@@ -673,6 +676,9 @@ __decorate([
     words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessListbox.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "fieldHomeEnd", void 0);
 __decorate([
     property()
 ], HelixHeadlessListbox.prototype, "filter", null);

package/dist/menu/item/menu-item.d.ts

@@ -81,6 +81,8 @@ import '../../kbd/index.js';
  * @csspart surface - The panel a submenu opens in beside the row, under the menu's `submenus="flyout"`.
  *
  * @cssstate checked - The row is checked.
+ * @cssstate disabled - The row is disabled.
+ * @cssstate expanded - Under `submenus="flyout"`, the row's submenu is open beside it.
  * @cssstate highlighted - In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
  * @cssstate submenu-mark - Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
  * @cssstate submenu-start - Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.

package/dist/menu/item/menu-item.js

@@ -93,6 +93,8 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         super.willUpdate(changed);
         this.toggleState('checked', this.checked);
         this.toggleState('highlighted', this.virtual && this.highlighted);
+        this.toggleState('disabled', this.disabled);
+        this.toggleState('expanded', this.expanded);
         if (!this.childrenKnown) {
             return;
         }

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement, KeyboardNavigationController, type Placement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController, OpenPhaseController, type Placement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -18,7 +18,9 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  *
  * Submenus drill down by default. A submenu replaces the panel's content, and a
  * back row returns to the previous page. One panel stays inside a narrow
- * window, and works on touch screens, which have no hover.
+ * window, and works on touch screens, which have no hover. Focus follows a
+ * mouse resting on a row in either mode, and a drilled page is a `menu` named
+ * by the row that opened it.
  *
  * **`submenus="flyout"` opens each submenu in a panel of its own beside its
  * row**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the
@@ -52,6 +54,11 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * trigger's width, for a menu as wide as its trigger:
  * `helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.
  *
+ * **The choices in one place.** `checkedValues` holds the values of the rows
+ * that are checked, anywhere in the menu, and setting it checks exactly
+ * those rows, as React Aria's `selectedKeys` does. `change` is sent on the
+ * menu when a reader's choice changes it.
+ *
  * With `context`, the trigger is an area and the menu is its context menu: a
  * right-click, a long press, Shift+F10 or the menu key over the area opens it
  * at the pointer, or at the area's corner from the keyboard, as Radix's context
@@ -74,7 +81,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * field: Up and Down Arrow move the highlight through the rows that are left,
  * Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow
  * on a submenu goes back, and Escape clears the filter and then closes the
- * menu. Home, End and the other keys move the caret and type. The field names
+ * menu. A screen reader hears how many rows the filter keeps
+ * (`results-label`). Home, End and the other keys move the caret and type. The field names
  * the highlighted row with `aria-activedescendant`, and the rows are a `menu`
  * after the field. Cancel `helix-filter` to keep every row
  * showing and narrow the rows yourself, such as by replacing them with rows
@@ -87,9 +95,12 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @documentation https://fusion.dev/helix/components/menu
  *
  * @slot - The items.
+ * @slot empty - What the menu shows when it has no items, for content richer than `empty-text`.
+ * @slot loading - What the menu shows while its items load, for content richer than `loading-text`.
  * @slot no-results - What the menu shows when the filter keeps no rows, for content richer than `no-results-text`.
  * @slot trigger - The control that opens the menu, or with `context` the area a context menu opens over.
  *
+ * @event {Event} change - A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now.
  * @event {HelixBeforeCloseEvent} helix-before-close - The menu is about to close. Cancelable: cancel it to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The menu is about to open. Cancelable: cancel it to keep it closed.
  * @event {HelixFilterEvent} helix-filter - The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself.
@@ -110,6 +121,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
  *
  * @cssstate drilled - A submenu's page is showing, so content that is not a row can hide with the top page.
+ * @cssstate entering - From the moment the panel shows until its entrance has finished.
+ * @cssstate exiting - From the moment the panel hides until its exit has finished.
  * @cssstate mark - A row on the current page has a checkbox or a link, so every row keeps the trailing column.
  * @cssstate open - While the menu is open.
  * @cssstate placed-bottom - While the open panel sits below its trigger.
@@ -124,6 +137,7 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * `registerWords('de', { 'helix-menu': { backLabel: 'Zurück' } })`.
      */
     static words: string;
+    protected statusSlots: boolean;
     /**
      * The text of the row that returns from a submenu.
      */
@@ -204,6 +218,12 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * Space between the trigger and the surface, in pixels.
      */
     offset: number;
+    /**
+     * What opens the menu from its trigger. `long-press` leaves a press to the
+     * trigger's own action and opens the menu on a press held for half a second,
+     * or on Alt+Down or Alt+Up.
+     */
+    openOn: 'click' | 'long-press';
     /** Whether the trigger opens the menu only on a held press. */
     private get pressHeld();
     /**
@@ -213,18 +233,18 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private readonly longPress;
     /** Where a held press on a context menu's area is, to open the menu there. */
     private heldAt;
-    /**
-     * What opens the menu from its trigger. `long-press` leaves a press to the
-     * trigger's own action and opens the menu on a press held for half a second,
-     * or on Alt+Down or Alt+Up.
-     */
-    openOn: 'click' | 'long-press';
     /**
      * The side the menu opens on, when there is room.
      *
      * It moves if that side does not fit.
      */
     placement: Placement;
+    /**
+     * What a screen reader hears when the filter narrows the rows. `{count}` is
+     * how many rows are left, written in the locale, and each language writes
+     * the forms it has, as Listbox's `results-label` does.
+     */
+    resultsLabel: string;
     /**
      * How a submenu opens. `drill` shows it in place of the page showing, with
      * a way back. `flyout` opens it in a panel of its own beside its row.
@@ -257,6 +277,7 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * menu that drills, so those keys are spoken for here rather than unhandled.
      */
     protected readonly keys: KeyboardNavigationController;
+    protected readonly phases: OpenPhaseController;
     /** Carries a host `aria-label` and `aria-labelledby` to the surface. */
     protected readonly aria: AriaForwardController;
     /** Where a context menu was asked for, in the viewport, while it is open. */
@@ -310,6 +331,21 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * it, the one direction a reference crosses.
      */
     private reach;
+    /** Watches for rows taken away while the menu is open. */
+    private rowWatch;
+    /**
+     * Moves the reader to a neighbor when the page takes away the row they were
+     * on: the row that took its place, or the one before it where it was the
+     * last. A menu with no rows left closes and gives focus to its trigger.
+     *
+     * **Focus went to the body**, and the menu then ignored every key, its
+     * listener being on the host: measured in Chromium, removing the focused
+     * row and pressing ArrowUp did nothing. List and Virtual List move focus to
+     * a neighbor the same way, as React Aria's collections do. With `filterable`,
+     * focus stays in the field and the highlight moves. Focus a reader put
+     * anywhere but the body is left there.
+     */
+    private readonly followRemoved;
     /** Opens the menu. */
     show(): void;
     /** Opens the menu with focus on its first or its last row. */
@@ -327,6 +363,23 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private enter;
     /** Returns to the page above, or closes when there is none. */
     private leave;
+    /** The choice rows anywhere in the menu, in document order. */
+    private get choiceRows();
+    /**
+     * The values of the choice rows that are checked, anywhere in the menu, in
+     * document order.
+     *
+     * Set it to check exactly those rows and uncheck every other choice row, as
+     * React Aria's `selectedKeys` controls a menu's selection from one place.
+     * Each row keeps its own `checked` too, which this reads and writes. `change`
+     * is sent on the menu when a reader's choice changes it.
+     */
+    get checkedValues(): string[];
+    set checkedValues(values: readonly string[]);
+    /** The checked values `change` last said, joined, so a choice that moved nothing says nothing. */
+    private toldChecked;
+    /** Sends `change` when a reader's choice has changed which rows are checked. */
+    private tellChecked;
     private readonly handleSelect;
     /**
      * Keeps whatever has focus in sight, however it got there.
@@ -390,9 +443,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private grace;
     private stopHover;
     /**
-     * A mouse resting on a row, under `flyout`: focus follows it, and after a
-     * moment the row's submenu opens, or the submenus below the row's own page
+     * A mouse resting on a row: focus follows it, and under `flyout`, after a
+     * moment, the row's submenu opens, or the submenus below the row's own page
      * close. Not while the pointer is crossing toward an open submenu.
+     *
+     * **In every mode**, as the APG's menus, React Aria's and Radix's have it.
+     * Under `drill` the pointer did not move focus, so the row under the
+     * pointer and the row the keys moved from were two rows, measured in
+     * Chromium: hovering Delete left focus on Cut.
      */
     private readonly handleHover;
     /** The pointer leaving a row whose submenu is open, which starts the grace area. */
@@ -402,8 +460,11 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /** Whether the surface is named by a submenu's page, which `nameSurface` undoes at the top. */
+    private namedByPage;
     /**
-     * Names the surface by its trigger, where nothing else names it.
+     * Names the surface by its trigger, where nothing else names it, and a
+     * submenu's page by its title.
      *
      * By element reference, which is the one direction that crosses: the surface
      * is in this shadow root and the trigger is in the tree around it. A host