@fusion.dev/helix-headless 0.156.0 → 0.158.0

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

@@ -74,6 +74,7 @@ import '../../menu/index.js';
  * @csspart entry-shortcut-key - One key of the shortcut's chord.
  * @csspart entry-shortcut-separator - The `+` between two keys of the shortcut, where the platform writes one.
  * @csspart entry-start - The leading column.
+ * @csspart entry-surface - The panel a row's submenu opens in beside it. The filter menu's rows have none.
  * @csspart menu - The menu the fields are offered in.
  * @csspart menu-back - The button that goes back from a field's page.
  * @csspart menu-back-mark - The icon on the back button.

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

@@ -141,7 +141,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
           exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
           data-facet="field"
           data-field=${name}
         >
@@ -152,7 +152,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
                   slot="submenu"
                   data-facet="comparison"
                   data-field=${name}
@@ -163,7 +163,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
                       slot="submenu"
                       checkable
                       exclusive
@@ -188,7 +188,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
               exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}

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

@@ -63,6 +63,7 @@ export type ListItemMove = 'dragging' | 'drop-after' | 'drop-before';
  * @cssstate dragging - The row is being moved, in a `reorderable` list.
  * @cssstate drop-after - The row being moved goes after this one when it is dropped.
  * @cssstate drop-before - The row being moved goes before this one when it is dropped.
+ * @cssstate focus-visible - The row's cell has keyboard focus that the browser shows, in a list with `selection-mode`.
  * @cssstate selected - The row is selected, in a list that selects.
  */
 export declare class HelixHeadlessListItem extends HelixElement {
@@ -78,7 +79,9 @@ export declare class HelixHeadlessListItem extends HelixElement {
     current?: ListItemCurrent;
     /**
      * Takes the row out of reach in a list with `selection-mode`: the arrow keys
-     * pass over it and it cannot be selected or acted on.
+     * pass over it and it cannot be selected or acted on. In a list with
+     * `disabled-behavior="selection"`, it cannot be selected and is reached and
+     * acted on as any row is.
      */
     disabled: boolean;
     /**
@@ -121,6 +124,12 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * selected, which keeps `aria-selected` off a list that does not select.
      */
     selected?: boolean | undefined;
+    /**
+     * Whether `disabled` takes the row out of selection alone, written by a list
+     * with `disabled-behavior="selection"`. No attribute: it is coordination
+     * between elements, as `focusable` is.
+     */
+    selectionOnly: boolean;
     /**
      * Where the link opens. Use it for a row that leaves the site.
      */
@@ -137,6 +146,11 @@ export declare class HelixHeadlessListItem extends HelixElement {
     private get described();
     /** Whether a list with `selection-mode` holds this row, which makes it a row of a grid. */
     private get grouped();
+    /**
+     * Says whether the cell shows keyboard focus, as `:focus-visible` does, so a
+     * sheet outside can draw the ring on the row by the host.
+     */
+    private readonly handleCellFocus;
     /** @internal The cell a list with `selection-mode` moves focus to. */
     get cell(): HTMLElement | null;
     /**

package/dist/list/item/list-item.js

@@ -16,8 +16,19 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
         this.disabled = false;
         this.href = '';
         this.rel = '';
+        this.selectionOnly = false;
         this.target = '';
         this.value = '';
+        this.handleCellFocus = (event) => {
+            const cell = event.currentTarget;
+            let shown = false;
+            try {
+                shown = event.type === 'focus' && cell.matches(':focus-visible');
+            }
+            catch {
+            }
+            this.toggleState('focus-visible', shown);
+        };
     }
     get words() {
         return this.childrenKnown ? slottedWords(this, ['']) : '';
@@ -56,7 +67,8 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: this.grouped ? 'row' : 'listitem' });
         this.internals.ariaSelected = this.selected === undefined ? null : String(this.selected);
-        this.internals.ariaDisabled = this.grouped && this.disabled ? 'true' : null;
+        this.internals.ariaDisabled =
+            this.grouped && this.disabled && !this.selectionOnly ? 'true' : null;
         this.internals.ariaCurrent =
             this.current !== undefined && this.href === '' ? this.current : null;
         this.toggleState('selected', this.selected === true);
@@ -91,6 +103,8 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
           tabindex=${tabindex}
           aria-labelledby=${labelledby}
           aria-describedby=${describedby}
+          @focus=${this.handleCellFocus}
+          @blur=${this.handleCellFocus}
         >${content}<slot name="end"></slot>${this.renderGrip()}</div>`
             : html `<div
           part="row${this.current === undefined ? '' : ' row-current'}"
@@ -98,6 +112,8 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
           tabindex=${tabindex}
           aria-labelledby=${labelledby}
           aria-describedby=${describedby}
+          @focus=${this.handleCellFocus}
+          @blur=${this.handleCellFocus}
         ><a
           part="link"
           href=${this.href}
@@ -137,6 +153,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessListItem.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListItem.prototype, "selectionOnly", void 0);
 __decorate([
     property()
 ], HelixHeadlessListItem.prototype, "target", void 0);

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

@@ -14,7 +14,9 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * `multiple` any number, and `value` holds the selected rows' values,
  * separated by commas. A change asks with `helix-before-change` and tells
  * with `change`. `none` selects nothing, so a press acts on the row. A
- * `disabled` row is passed over. Each row is named by its label and described
+ * `disabled` row is passed over. With `disabled-behavior="selection"`, a
+ * `disabled` row cannot be selected, and is reached and acted on as any row
+ * is, as React Aria's GridList has it. Each row is named by its label and described
  * by its description, so the words of the controls in `end` are not read as
  * part of its name.
  *
@@ -125,6 +127,15 @@ export declare class HelixHeadlessList extends HelixElement {
      * refused, in a `reorderable` list.
      */
     canceledLabel: string;
+    /**
+     * What `disabled` takes from a row, in a list that selects: `all`, which
+     * passes over the row, or `selection`, which keeps the row out of the
+     * selection and lets the keys reach it and Enter or a press act on it, as
+     * React Aria's GridList takes `disabledBehavior`.
+     *
+     * Absent is `all`.
+     */
+    disabledBehavior?: 'all' | 'selection' | undefined;
     /** What screen readers hear when a row is dropped, in a `reorderable` list. */
     droppedLabel: string;
     /**
@@ -203,6 +214,10 @@ export declare class HelixHeadlessList extends HelixElement {
      * lets the arrow keys carry the selection.
      */
     selectionBehavior: ListSelectionBehavior;
+    /** Whether the row is out of reach of the keys and of actions, past selection. */
+    private blocked;
+    /** The rows a key can land on that can also be selected. */
+    private get selectable();
     /**
      * Makes the list interactive: `single` selects one row, `multiple` any
      * number, and `none` moves and acts without selecting. Unset is a list a
@@ -235,6 +250,8 @@ export declare class HelixHeadlessList extends HelixElement {
     value: string;
     /** The row the reader was last on, which keeps the tab stop. */
     private last;
+    /** The rows in order on the last `sync`, so a removed row's place is known. */
+    private placed;
     /** The value of the row a Shift range runs from: the last row pressed. */
     private anchor;
     /**
@@ -295,6 +312,17 @@ export declare class HelixHeadlessList extends HelixElement {
      * row a server rendered draws its served markup first.
      */
     private sync;
+    /**
+     * Moves the tab stop off a row the page removed, to the next row a key can
+     * reach or, at the end, the one before it, and moves focus there where
+     * removing the row dropped it to the body.
+     *
+     * **Focus went to the body**, and the arrow keys did nothing until the
+     * reader tabbed back into the list. React Aria's GridList moves focus to a
+     * neighbor the same way. Focus anywhere but the body is where you put it,
+     * and is left there.
+     */
+    private followRemoved;
     /** The row a press or a key came from, read off the event's path. */
     private rowOf;
     /**

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

@@ -27,6 +27,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         this.reversed = false;
         this.selectionBehavior = 'toggle';
         this.value = '';
+        this.placed = [];
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((row) => this.navigable(row)),
             origin: 'focus',
@@ -67,12 +68,12 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         };
         this.handleKeydown = (event) => {
             const row = this.interactive ? this.rowOf(event) : undefined;
-            if (row && !row.disabled && !event.altKey && /^Page(Down|Up)$/.test(event.key)) {
+            if (row && !this.blocked(row) && !event.altKey && /^Page(Down|Up)$/.test(event.key)) {
                 event.preventDefault();
                 this.page(row, event.key === 'PageDown' ? 1 : -1);
             }
             this.moving = undefined;
-            if (!row || row.disabled || event.altKey) {
+            if (!row || this.blocked(row) || event.altKey) {
                 return;
             }
             const toggle = event.ctrlKey || event.metaKey;
@@ -85,7 +86,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             }
             if (selectsAll(event) && this.selectionMode === 'multiple') {
                 event.preventDefault();
-                const every = this.reachable.map((one) => this.valueFor(one)).join(',');
+                const every = this.selectable.map((one) => this.valueFor(one)).join(',');
                 this.choose(every === this.value ? null : every);
             }
             else if (event.key === 'Escape' && this.value !== '' && this.selectionMode !== 'none') {
@@ -111,7 +112,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             if (pressedOwnControl(event, cell && event.composedPath().includes(cell) ? cell : row)) {
                 return;
             }
-            if (this.selectionMode === 'none') {
+            if (this.selectionMode === 'none' || row.disabled) {
                 this.act(row);
             }
             else {
@@ -139,6 +140,12 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         };
     }
     static { this.words = 'helix-list'; }
+    blocked(row) {
+        return row.disabled && this.disabledBehavior !== 'selection';
+    }
+    get selectable() {
+        return this.reachable.filter((row) => !row.disabled);
+    }
     get interactive() {
         return this.selectionMode !== undefined;
     }
@@ -146,11 +153,11 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessListItem);
     }
     get reachable() {
-        return this.interactive ? this.rows.filter((row) => !row.disabled) : [];
+        return this.interactive ? this.rows.filter((row) => !this.blocked(row)) : [];
     }
     navigable(row) {
         return focusItemOf(row, {
-            disabled: row.disabled,
+            disabled: this.blocked(row),
             focus: () => row.focusItem(),
             words: row.words,
         });
@@ -210,20 +217,41 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         const mode = this.selectionMode;
         const chosen = new Set(commaList(this.value));
         const rows = this.rows;
+        if (mode) {
+            this.followRemoved(rows);
+        }
+        this.placed = rows;
         const holder = mode
             ? rovingStop(rows, this.last, {
-                disabled: (row) => row.disabled,
+                disabled: (row) => this.blocked(row),
                 selected: (row) => chosen.has(this.valueFor(row)),
             })
             : undefined;
         for (const row of rows) {
             whenHydrated(row, () => {
                 row.focusable = mode ? row === holder : undefined;
+                row.selectionOnly = this.disabledBehavior === 'selection';
                 row.selected =
                     mode === undefined || mode === 'none' ? undefined : chosen.has(this.valueFor(row));
             });
         }
     }
+    followRemoved(rows) {
+        const last = this.last;
+        const at = last ? this.placed.indexOf(last) : -1;
+        if (!last || at < 0 || rows.includes(last)) {
+            return;
+        }
+        const present = new Set(rows);
+        const reachable = (row) => present.has(row) && !this.blocked(row);
+        const next = this.placed.slice(at + 1).find(reachable) ??
+            this.placed.slice(0, at).reverse().find(reachable);
+        this.last = next;
+        const active = deepActiveElement();
+        if (next && (active === null || active === document.body)) {
+            whenHydrated(next, () => next.focusItem());
+        }
+    }
     rowOf(event) {
         return event
             .composedPath()
@@ -245,7 +273,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             extend,
             mode: this.selectionMode ?? 'none',
             pressed: this.valueFor(row),
-            shown: this.reachable.map((one) => this.valueFor(one)),
+            shown: this.selectable.map((one) => this.valueFor(one)),
             toggle,
             value: this.value,
         };
@@ -263,7 +291,10 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     }
     arrive(row, from) {
         const moving = this.moving;
-        if (!moving || this.selectionMode === undefined || this.selectionMode === 'none') {
+        if (!moving ||
+            this.selectionMode === undefined ||
+            this.selectionMode === 'none' ||
+            row.disabled) {
             return;
         }
         if (moving.extend && this.anchor === undefined && from) {
@@ -287,7 +318,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         }
     }
     act(row) {
-        if (row.disabled) {
+        if (this.blocked(row)) {
             return;
         }
         if (row.href !== '') {
@@ -420,6 +451,9 @@ __decorate([
     words,
     property({ attribute: 'canceled-label' })
 ], HelixHeadlessList.prototype, "canceledLabel", void 0);
+__decorate([
+    property({ attribute: 'disabled-behavior' })
+], HelixHeadlessList.prototype, "disabledBehavior", void 0);
 __decorate([
     words,
     property({ attribute: 'dropped-label' })

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

@@ -14,7 +14,9 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * With `multiple` set, `value` is a comma-separated string, like
  * `Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form
  * receives one entry per selected option, as a native `<select multiple>` sends
- * it, so your server does not split on commas.
+ * it, so your server does not split on commas. An option's value may hold a
+ * comma: a run of the string that is an option's value is read as that one
+ * value, and the form sends it as one entry.
  *
  * Selected and active are separate. The selected option is the value. The
  * active option is where the keyboard is: the arrow keys move it, and
@@ -185,6 +187,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Placeholder text for the filter field.
      */
     filterLabel: string;
+    /**
+     * Whether an option is kept by the filter: a function given the option's
+     * words and the filter, trimmed, that returns `true` to keep it showing, as
+     * React Aria's `Autocomplete` takes `filter`. For matching that ignores
+     * accents, matches the start of each word, or matches out of order.
+     *
+     * Absent, an option is kept where its words hold the filter, in any case. A
+     * property only, there being no way to write a function in markup.
+     */
+    filterMatch?: ((text: string, filter: string) => boolean) | undefined;
     /**
      * The options as data, for a list too long to draw whole: each a value,
      * which is also its words, or a record with a `value`, a `label` and
@@ -447,7 +459,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private get elements();
     /** The options a filter has left showing. */
     private get shown();
-    /** The chosen values, as an array whether or not `multiple` is set. */
+    /**
+     * The chosen values, as an array whether or not `multiple` is set.
+     *
+     * Read against the options' values, so an option whose value holds a comma
+     * is one value. See `chosenValues`.
+     */
     get values(): string[];
     /**
      * Applies a choice, announcing first so a listener can refuse it.

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, 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, words, wordsLocale, } from '@fusion.dev/helix-core';
+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, 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';
@@ -326,7 +326,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.entries.filter((option) => !option.hidden);
     }
     get values() {
-        return this.value === '' ? [] : this.value.split(',');
+        return chosenValues(this.value, new Set(this.entries.map((option) => option.value)), this.multiple);
     }
     choose(value) {
         const chosen = this.values;
@@ -392,10 +392,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     place() {
         this.forgetRemoved();
-        const needle = this.filter.trim().toLowerCase();
+        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 !== '' && !option.text.toLowerCase().includes(needle);
+            option.hidden =
+                needle !== '' &&
+                    !(match ? match(option.text, typed) : option.text.toLowerCase().includes(needle));
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
@@ -425,10 +429,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             return;
         }
         const present = new Set(this.entries.map((option) => option.value));
-        const gone = this.values.filter((value) => this.seen.has(value) && !present.has(value));
+        const held = chosenValues(this.value, new Set([...present, ...this.seen]), this.multiple);
+        const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
-            this.value = this.values.filter((value) => !gone.includes(value)).join(',');
+            this.value = held.filter((value) => !gone.includes(value)).join(',');
         }
     }
     followActive(changed) {
@@ -444,7 +449,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     sync() {
         if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+            reportValues(this.internals, this.name, this.values);
         }
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
@@ -498,7 +503,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     get currentValue() {
-        return this.activeValue || (this.value.split(',')[0] ?? '');
+        return this.activeValue || (this.values[0] ?? '');
     }
     linkActive() {
         const list = this.renderRoot.querySelector(this.filterable ? '[part="search-field"]' : '[part="items"]');
@@ -666,6 +671,9 @@ __decorate([
     words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "filterMatch", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessListbox.prototype, "items", void 0);

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

@@ -358,6 +358,10 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     /**
      * A route or area renamed, or its description changed, which the list says
      * and a slot change does not report.
+     *
+     * Not the map's own `gestures` news, which it sends from `updated` and which
+     * changes nothing it draws: an update asked for there ran every map's
+     * update twice, and Lit's development build warned about it.
      */
     private readonly handlePartChange;
     /**

package/dist/map/root/map-root.js

@@ -90,7 +90,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             }
         };
         this.handlePartChange = (event) => {
-            if (event.detail.kind !== 'place') {
+            if (event.detail.kind !== 'place' && event.detail.kind !== 'gestures') {
                 this.requestUpdate();
             }
         };

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController, PopoverController } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, type Placement, PopoverController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -18,7 +18,10 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  *
  * It opens on hover by default, and a press always opens it too. `open-on` sets
  * which. Hover is the default because in a navigation bar people expect to move
- * along the row and see each section.
+ * along the row and see each section. A pointer resting on the trigger opens
+ * the panel after `open-delay`, and leaving closes it after `close-delay`. Moving
+ * from one open panel's trigger to another's opens the next at once, as Radix's
+ * `skipDelayDuration` does.
  *
  * When one panel opens in place of another, each says which way the reader
  * moved, as Radix's `data-motion` does. Moving toward the end of the bar, the
@@ -36,6 +39,10 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * navigation menu publishes the same pair from its shared viewport, so a
  * stylesheet can grow or shrink one panel into the next.
  *
+ * While a link in the panel carries `aria-current="page"`, the host has
+ * `:state(current)`, so the trigger of the section holding the page you are
+ * on can say so, as Radix's navigation menu marks its active link.
+ *
  * The panel's default slot is the `columns` part and draws no box, so a sheet
  * can give the columns one of their own. While a panel is open, an
  * `indicator` slot is rendered beside its trigger, as Radix's indicator
@@ -52,6 +59,12 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * way out. The trigger says `aria-expanded`, and the panel is a group named by
  * `label`.
  *
+ * A Helix trigger, such as `helix-button`, is told whether the panel is open
+ * inside its own shadow root. On a plain element, such as a `<button>`, the
+ * megamenu writes `aria-expanded`, from a frame after its own first render, so
+ * a server's markup is never changed while a framework hydrates it. It never
+ * writes it where you wrote `aria-expanded` yourself.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -77,6 +90,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @cssproperty --megamenu-surface-inline-size - The panel's own width, written on the surface while it is open.
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
  *
+ * @cssstate current - A link in the panel carries `aria-current="page"`, so the trigger can show the section you are in.
  * @cssstate from-end - The panel opened in place of one earlier in the bar, so it can enter from the end side.
  * @cssstate from-start - The panel opened in place of one later in the bar, so it can enter from the start side.
  * @cssstate narrow - The page is narrower than `band-below`, so the panel is shown as a band whatever its variant.
@@ -114,10 +128,22 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * paint is the opposite case. See `MixinControllerOpen` on `open`.
      */
     bandBelow: number;
+    /**
+     * How long a pointer leaving the trigger and the panel waits before the panel
+     * closes, in milliseconds. The pointer needs the time to cross from the
+     * trigger to the panel.
+     */
+    closeDelay: number;
     /**
      * The section's name, used for the default trigger and the panel.
      */
     label: string;
+    /**
+     * How long a pointer rests on the trigger before the panel opens, in
+     * milliseconds, under `open-on="hover"`. A pointer crossing the bar on its
+     * way somewhere else opens nothing.
+     */
+    openDelay: number;
     /**
      * Whether hovering over the trigger opens the panel (`hover`), or only a press
      * does (`click`).
@@ -128,6 +154,12 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * heavy enough that opening it on the way past is rude.
      */
     openOn: 'click' | 'hover';
+    /**
+     * The side of the trigger a card panel opens on, when there is room. It
+     * moves if that side does not fit. A band ignores it, since a band spans the
+     * page under its bar.
+     */
+    placement: Placement;
     /**
      * Whether the panel is a card under the trigger or a band across the page.
      *
@@ -158,8 +190,19 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     private readonly handleWidth;
     private watchWidth;
     protected readonly panel: PopoverController;
-    /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
+    /**
+     * Tells a slotted trigger the disclosure state.
+     *
+     * A Helix trigger by property, through `tellDisclosure`. A plain element,
+     * which has no shadow root to keep the state out of the markup, by
+     * `aria-expanded`, from a frame after the first render, as `Popover` writes
+     * it. One that already carries `aria-expanded` is the consumer's to keep.
+     */
     private tellTrigger;
+    /** Whether a frame has passed since the first render, after which a plain trigger may be told. */
+    private settledOnce;
+    /** The plain trigger this megamenu writes `aria-expanded` on. */
+    private told;
     /** What the consumer slotted, if they slotted anything. */
     private get slotted();
     /** Whatever the consumer slotted, or the button rendered in its place. */
@@ -185,6 +228,10 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * link or control, as Radix's navigation menu does.
      */
     private readonly handleKeyDown;
+    /** Watches the panel's links for the one that is the page you are on. */
+    private currentWatch;
+    /** Records whether a link in the panel is the page you are on. */
+    private markCurrent;
     /** Shuts it and puts the reader back where they were. */
     private close;
     /**
@@ -223,16 +270,6 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * the trigger is the honest answer again.
      */
     private bar;
-    /**
-     * How long a pointer has to mean it, in milliseconds.
-     *
-     * Opening is the shorter wait: too long and the panel feels stuck, too short
-     * and crossing the bar opens things. Closing is longer because the pointer
-     * has to get from the trigger to the panel, and the straight line between
-     * them is not the line anybody moves along.
-     */
-    private static readonly OPEN_DELAY;
-    private static readonly CLOSE_DELAY;
     private timer;
     private pointer;
     private schedule;