@fusion.dev/helix-headless 0.165.0 → 0.166.0

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

@@ -1,5 +1,5 @@
-import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type HelixDismissEvent, HelixElement } from '@fusion.dev/helix-core';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A passage set apart as a note, information, a warning, or an error.
@@ -52,6 +52,7 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * @cssstate has-icon - An icon of your own is slotted into `icon`, in place of the tone's.
  */
 export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
+    static styles: CSSResultGroup;
     /**
      * The key this family's words are registered under, its styled tag:
      * `registerWords('de', { 'helix-callout': { toneLabels: { danger: 'Fehler' } } })`.
@@ -141,6 +142,11 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * heading.
      */
     private dismissName;
+    /**
+     * The event a dismissal sends, naming the note by its heading where it has
+     * one, the words its dismiss button is named by, and otherwise by its text.
+     */
+    protected dismissEvent(): HelixDismissEvent;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/callout/root/callout-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;
 };
 import { animationsSettled, customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
@@ -32,6 +32,11 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
             this.toggleState('has-icon', filled('icon'));
         };
     }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+  `; }
     static { this.words = 'helix-callout'; }
     get present() {
         return this.isConnected && !this.hasAttribute('hidden');
@@ -66,6 +71,14 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
             ? formatWords(this, 'dismissLabel', { label: heading || tone }).trim()
             : this.dismissLabel;
     }
+    dismissEvent() {
+        const event = super.dismissEvent();
+        const heading = slottedWords(this, ['heading']);
+        if (heading) {
+            event.detail.label = heading;
+        }
+        return event;
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();

package/dist/code-block/root/code-block-root.d.ts

@@ -71,6 +71,18 @@ import '../../copy-button/index.js';
  * keeps hydration clean, and draws the diff once it can read the content. Diff
  * mode is experimental. The rest of the family is stable.
  *
+ * **Several blocks are files**, one shown at a time under a row of tabs, as
+ * Sandbox shows its source panes. Put Code Blocks in the default slot of a
+ * Code Block, and each is a file named on its tab by its `label` or, without
+ * one, its `language`. `file` holds the name of the file shown. The tabs are a
+ * tab list: the arrow keys move to a tab and show its file, the two swapping
+ * on a right-to-left page, and Home and End go to the first and the last.
+ * Choosing one sends `helix-before-change` with the file's name, which you can
+ * cancel, and `change` once `file` holds it. The files not shown carry
+ * `hidden`, and the one shown draws no name of its own, its tab naming it. One
+ * block draws no tabs. A server cannot see the blocks inside, so the client
+ * draws the tabs once it upgrades.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -82,7 +94,11 @@ import '../../copy-button/index.js';
  * @slot copied-icon - The copy button's icon after a copy. Defaults to a check mark.
  * @slot copy-icon - The copy button's icon before a copy. Defaults to a clipboard.
  *
+ * @event {Event} change - A file tab showed its file, whose name `file` now holds.
+ * @event {HelixBeforeChangeEvent} helix-before-change - A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
  * @event {HelixBeforeToggleEvent} helix-before-toggle - The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
+ * @event {HelixCopyEvent} helix-copy - The copy button put the code on the clipboard, with the text in `detail.value`.
+ * @event {HelixCopyErrorEvent} helix-copy-error - A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
  * @event {HelixToggleEvent} helix-toggle - Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
  *
  * @csspart actions - The box in the header that holds the `actions` slot, drawn while something is slotted there.
@@ -109,6 +125,8 @@ import '../../copy-button/index.js';
  * @csspart copy-tooltip-top - The tooltip while it is above the copy button. Applied with `copy-tooltip`.
  * @csspart expand - The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
  * @csspart file - In a diff, one file's header and block.
+ * @csspart file-tab - One file tab, `aria-selected` while its file is shown.
+ * @csspart files - The file tabs over the blocks a block holds, where there are several.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
  * @csspart fold - In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
  * @csspart frame - The code, and the copy button beside it where there is no header.
@@ -132,6 +150,7 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-mark-start - Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it.
  *
  * @cssstate expanded - The expand button has shown every line of a capped block.
+ * @cssstate tabbed - The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
     /**
@@ -198,6 +217,17 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the cap hides lines.
      */
     expandLabel: string;
+    /**
+     * The name of the file shown, where the block holds several Code Blocks:
+     * the `label` of one, or its `language` without one.
+     *
+     * Unset, or a name no file has, shows the first.
+     */
+    file?: string;
+    /**
+     * The name of the file tabs, read by screen readers.
+     */
+    filesLabel: string;
     /**
      * The words of a button that hides a run of unchanged lines it showed, in a
      * diff with `context-lines`. `{count}` is how many, and each language
@@ -395,6 +425,39 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * block computed and CSS cannot, and no render follows from them.
      */
     private placeLines;
+    /** The Code Blocks this block holds as its code, once its children can be read. */
+    private get blocks();
+    /**
+     * Whether the block is one of several files under another block's tabs,
+     * which name it. Read from the parent, so a block needs no telling.
+     */
+    private get tabbed();
+    /** The file shown among several: the one `file` names, or the first. */
+    private shownFile;
+    /** Shows the file a tab names, once nobody refused. */
+    private chooseFile;
+    /**
+     * Arrow keys, `Home` and `End` on the file tabs, which move to a tab and
+     * show its file, as a tab list that follows focus does and as Sandbox's file
+     * tabs do. Left and Right swap on a right-to-left page.
+     */
+    private readonly handleFileKey;
+    /** The blocks this element hid, to show them again. */
+    private readonly hid;
+    /** How many files the block last held, so each is told when that changes. */
+    private fileCount;
+    /**
+     * Hides the files not shown, shows any this element hid that is now, and
+     * tells each file when how many there are changes, since a file draws its
+     * own name only while it is alone.
+     */
+    private showFile;
+    /**
+     * The tabs over several files, and the file shown under them. One file
+     * draws no tabs, only itself.
+     */
+    private renderFiles;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/code-block/root/code-block-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 { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, requestChange, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -13,6 +13,17 @@ import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
 import { foldContext, pairLines, parsePatch, } from '../patch.js';
+const stopPress = (event) => event.stopPropagation();
+const isBlock = (element) => element?.localName.endsWith('code-block') === true;
+const blocksIn = (host) => [...host.children].filter((child) => child.slot === '' && isBlock(child));
+const nameOf = (block) => {
+    const { label, language } = block;
+    return ((typeof label === 'string' && label) ||
+        block.getAttribute('label') ||
+        (typeof language === 'string' && language) ||
+        block.getAttribute('language') ||
+        '');
+};
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
@@ -25,6 +36,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
+        this.filesLabel = 'Files';
         this.hideUnchangedLabel = '{count, plural, one {Hide # unchanged line} other {Hide # unchanged lines}}';
         this.label = '';
         this.language = '';
@@ -49,6 +61,30 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
                         [...this.renderRoot.querySelectorAll('[part="block"], [part="code"]')].some((box) => box.scrollHeight > box.clientHeight + 1);
             }
         };
+        this.handleFileKey = (event) => {
+            const blocks = this.blocks;
+            const count = blocks.length;
+            const at = blocks.indexOf(this.shownFile(blocks));
+            const step = inlineStep(this, event.key);
+            const to = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? count - 1
+                    : step === 0
+                        ? -1
+                        : (at + step + count) % count;
+            const block = blocks[to];
+            if (!block) {
+                return;
+            }
+            event.preventDefault();
+            this.chooseFile(block);
+            void this.updateComplete.then(() => {
+                this.renderRoot.querySelector('[part="file-tab"][aria-selected="true"]')?.focus();
+            });
+        };
+        this.hid = new Set();
+        this.fileCount = 0;
     }
     static { this.words = 'helix-code-block'; }
     toggleWrap() {
@@ -213,6 +249,67 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         });
     }
+    get blocks() {
+        return this.childrenKnown ? blocksIn(this) : [];
+    }
+    get tabbed() {
+        const parent = this.childrenKnown ? this.parentElement : null;
+        return this.slot === '' && isBlock(parent) && blocksIn(parent).length > 1;
+    }
+    shownFile(blocks) {
+        return blocks.find((block) => nameOf(block) === this.file) ?? blocks[0];
+    }
+    chooseFile(block) {
+        if (block !== this.shownFile(this.blocks)) {
+            requestValue(this, nameOf(block), (name) => {
+                this.file = name;
+            });
+        }
+    }
+    showFile() {
+        const blocks = this.blocks;
+        const files = blocks.length > 1 ? blocks : [];
+        const shown = this.shownFile(files);
+        for (const block of files) {
+            if (block !== shown && !block.hidden) {
+                block.hidden = true;
+                this.hid.add(block);
+            }
+        }
+        for (const block of this.hid) {
+            if (block === shown || !files.includes(block)) {
+                ;
+                block.hidden = false;
+                this.hid.delete(block);
+            }
+        }
+        if (blocks.length !== this.fileCount) {
+            this.fileCount = blocks.length;
+            for (const block of blocks) {
+                block.requestUpdate?.();
+            }
+        }
+    }
+    renderFiles(blocks) {
+        const slot = html `<slot @slotchange=${() => this.requestUpdate()}></slot>`;
+        if (blocks.length < 2) {
+            return slot;
+        }
+        const shown = this.shownFile(blocks);
+        return html `<div part="files" role="tablist" aria-label=${this.filesLabel} @keydown=${this.handleFileKey}>
+        ${blocks.map((block, at) => {
+            const selected = block === shown;
+            return html `<button part="file-tab" id=${`file-${at}`} role="tab" type="button"
+            aria-controls="files-panel" aria-selected=${selected ? 'true' : 'false'}
+            tabindex=${selected ? '0' : '-1'} @click=${() => this.chooseFile(block)}>${nameOf(block)}</button>`;
+        })}
+      </div>
+      <div id="files-panel" role="tabpanel" aria-labelledby=${`file-${blocks.indexOf(shown)}`}>${slot}</div>`;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('tabbed', this.tabbed);
+    }
     updated(changed) {
         super.updated(changed);
         if (typeof ResizeObserver !== 'undefined') {
@@ -220,6 +317,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             this.sizes.observe(this);
         }
         this.measure();
+        this.showFile();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -239,6 +337,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.finishHydration();
     }
     render() {
+        const blocks = this.blocks;
+        if (blocks.length > 0) {
+            return this.renderFiles(blocks);
+        }
         const files = this.files;
         if (files.length > 0) {
             return this.renderDiff(files);
@@ -273,10 +375,11 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             ? html `<span part="gutter" aria-hidden="true">${numbers}</span>`
             : nothing;
         const name = this.label || this.language;
-        return html `${this.renderHeader(name)}
+        const drawn = this.tabbed ? '' : name;
+        return html `${this.renderHeader(name, undefined, drawn)}
       <div part="frame">
         <pre id="block" part="block" translate="no">${gutter}${code}</pre>
-        ${this.headed(name) ? nothing : this.renderCopy()}
+        ${this.headed(drawn) ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -299,10 +402,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     headed(name) {
         return name !== '' || (this.wrappable && !this.diff) || this.slotted('actions');
     }
-    renderHeader(name, value) {
+    renderHeader(name, value, drawn = name) {
         const acting = this.slotted('actions');
-        return this.headed(name)
-            ? html `<div part="header">${name ? html `<span part="label">${name}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
+        return this.headed(drawn)
+            ? html `<div part="header">${drawn ? html `<span part="label">${drawn}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
             : nothing;
     }
     renderWrapToggle() {
@@ -331,6 +434,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       copied-label=${this.copiedLabel}
+      @helix-press=${stopPress}
       label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
     >${this.renderCopyIcons()}</${this.tag('copy-button')}>`;
@@ -434,6 +538,13 @@ __decorate([
     words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCodeBlock.prototype, "file", void 0);
+__decorate([
+    words,
+    property({ attribute: 'files-label' })
+], HelixHeadlessCodeBlock.prototype, "filesLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'hide-unchanged-label' })

package/dist/element-events.generated.js

@@ -36,7 +36,14 @@ registerElementEvents({
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
-    'helix-headless-code-block': ['helix-before-toggle', 'helix-toggle'],
+    'helix-headless-code-block': [
+        'change',
+        'helix-before-change',
+        'helix-before-toggle',
+        'helix-copy',
+        'helix-copy-error',
+        'helix-toggle',
+    ],
     'helix-headless-color-input': [
         'change',
         'helix-before-change',
@@ -186,7 +193,13 @@ registerElementEvents({
     'helix-headless-map-route': ['helix-map-part-change'],
     'helix-headless-map-terrain': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-headless-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-headless-menu': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-filter',
+        'helix-select',
+        'toggle',
+    ],
     'helix-headless-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-headless-meter': ['helix-band'],
     'helix-headless-notification': ['helix-dismiss', 'helix-read'],

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

@@ -82,6 +82,7 @@ import '../../menu/index.js';
  * @csspart menu-header - The bar above a field's page, with the back button and the field's name.
  * @csspart menu-live - The inner menu's `live` part: the region that screen readers announce the empty and loading messages from.
  * @csspart menu-loading - Shown while the fields are loading.
+ * @csspart menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the field whose page is showing.
  */

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

@@ -126,7 +126,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
         return html `<${menu}
       part="menu"
       exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-        live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title"
+        live: menu-live, loading: menu-loading, search-field: menu-search-field, surface: menu-surface, title: menu-title"
       label=${this.label}
       @helix-select=${this.handleSelect}
     >

package/dist/listbox/root/listbox-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, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -400,12 +400,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.forgetRemoved();
         const typed = this.filter.trim();
         const needle = typed.toLowerCase();
-        const match = this.filterMatch;
         const chosen = new Set(this.values);
         for (const option of this.entries) {
-            option.hidden =
-                needle !== '' &&
-                    !(match ? match(option.text, typed) : option.text.toLowerCase().includes(needle));
+            option.hidden = !filterKeeps(option.text, typed, this.filterMatch);
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {

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

@@ -47,6 +47,12 @@ import '../../kbd/index.js';
  * slots, so a mark of your own replaces either by being slotted. Neither is
  * read as part of the row's name.
  *
+ * In a menu with `filterable`, focus stays in the menu's filter field and the
+ * row the arrow keys reach is highlighted: the field names it with
+ * `aria-activedescendant`, the row carries its role on its host so the field
+ * can point at it, and `:state(highlighted)` says which row it is. A row with
+ * an `href` then follows its link without an anchor, as `Option` does.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Menu option, Menu row
@@ -75,6 +81,7 @@ 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 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.
  */
@@ -144,6 +151,11 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * `submenus="flyout"`. Written by the menu.
      */
     flyout: boolean;
+    /**
+     * @internal Whether the row is the one the keys reached in a menu that keeps
+     * focus in its filter field. Written by the menu.
+     */
+    highlighted: boolean;
     /**
      * The URL the row links to. Setting it renders the row as a link.
      *
@@ -200,6 +212,12 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * The row's value, sent in `helix-select` when the row is chosen.
      */
     value: string;
+    /**
+     * @internal Whether the menu keeps focus in its filter field, so the row is
+     * highlighted rather than focused and says what it is from its host, where
+     * the field's `aria-activedescendant` can reach it. Written by the menu.
+     */
+    virtual: boolean;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -414,6 +432,8 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * still line up without every row carrying an empty box to line them up with.
      */
     protected renderMark(submenu: boolean): TemplateResult | typeof nothing;
+    /** Whether the row says what it is from its host, for a field's `aria-activedescendant`. */
+    private get onHost();
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {