@fusion.dev/helix-headless 0.155.0 → 0.157.0

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

@@ -69,6 +69,23 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * no `start` counts down from the number of rows, which a server cannot know,
  * so served markup counts from one until the list runs.
  *
+ * **An empty list.** Set `empty-label`, or put your own content in the `empty`
+ * slot, for a row shown while the list has no rows and none are loading, such
+ * as "No files yet" and a link to add one. Without either, an empty list shows
+ * nothing. The list takes the `empty` state while it has no rows, whatever it
+ * shows.
+ *
+ * **Loading more.** `load-more` sends `helix-load-more` once the end of the
+ * list comes within a screen of view, in the box that scrolls it or the page,
+ * once for each number of rows: add rows and it can send it again. While you
+ * fetch, set `loading`: the list is busy, and a row after the last says
+ * "Loading more" (`loading-label`, or your own content in the `loading`
+ * slot). The list asks for nothing while `loading` is set.
+ *
+ * An interactive list with no name is reported once in a development build,
+ * since a screen reader announces it as a grid and nothing more. Name it with
+ * `label` or `aria-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -76,18 +93,26 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * @documentation https://fusion.dev/helix/components/list
  *
  * @slot - The rows.
+ * @slot empty - Content for the row shown while the list has no rows and none are loading. Falls back to `empty-label`.
+ * @slot loading - Content for the row after the last while `loading` is set. Falls back to `loading-label`.
  *
  * @event {Event} change - Fired once a press has changed which rows are selected.
  * @event {HelixActionEvent} helix-action - Sent from a row when the reader acts on it: Enter, or a press in a list that selects nothing. Read the row from `target`. A row with `href` follows its link instead.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes which rows are selected, with the `value` it would leave. Cancelable.
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` list, with every row's value in the new order. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired, in a list with `load-more`, when the end of the list comes within a screen of view, once for each number of rows.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  *
  * @csspart drag-preview - A copy of the row a pointer drags, which follows the pointer in the top layer until the row is let go, in a `reorderable` list. Hidden from assistive technology.
+ * @csspart empty - The row shown while the list has no rows and none are loading, where `empty-label` or the `empty` slot gives it content. A grid row with one cell in a list that selects.
  * @csspart live - The region that says each step of a move to screen readers, in a `reorderable` list. Drawn from the first move. Visually hidden in the styled tier.
+ * @csspart loading - The row after the last while `loading` is set. A grid row with one cell in a list that selects.
  *
  * @cssproperty --list-first - The number of the first row, written where `start` or `reversed` moves it.
  * @cssproperty --list-step - What each row adds to the number before it: `1`, or `-1` where `reversed`.
+ *
+ * @cssstate empty - While the list has no rows.
+ * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessList extends HelixElement {
     /**
@@ -102,6 +127,11 @@ export declare class HelixHeadlessList extends HelixElement {
     canceledLabel: string;
     /** What screen readers hear when a row is dropped, in a `reorderable` list. */
     droppedLabel: string;
+    /**
+     * The text of the row shown while the list has no rows, where the `empty`
+     * slot is empty. Empty, the default, shows no row.
+     */
+    emptyLabel: string;
     /**
      * The kind of list, which follows from the content.
      *
@@ -129,6 +159,18 @@ export declare class HelixHeadlessList extends HelixElement {
      * The list's name, read by screen readers.
      */
     label: string;
+    /**
+     * Marks the list as busy fetching more rows, and draws a row after the last
+     * that says so. The list asks for no more while it is set.
+     */
+    loading: boolean;
+    /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+    loadingLabel: string;
+    /**
+     * Sends `helix-load-more` once the end of the list comes within a screen of
+     * view, so you can add the next rows as a reader nears them.
+     */
+    loadMore: boolean;
     /**
      * What screen readers hear each time an arrow key moves a held row, in a
      * `reorderable` list. `{name}` is the row's words, `{position}` the place it
@@ -185,7 +227,7 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     type?: '1' | 'a' | 'A' | 'i' | 'I';
     /**
-     * The selected rows' values, separated by commas, in a list that selects.
+     * The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
      *
      * Set it to start with rows selected. A row's value is its `value`, or its
      * words where it has none.
@@ -303,6 +345,37 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     private get numbers();
     protected render(): TemplateResult;
+    /**
+     * The row shown while the list has no rows: a list item, or a grid row with
+     * one cell in a list that selects. Drawn only once the children are known,
+     * so a server and a hydrating render never claim an empty list, and hidden
+     * while it has neither `empty-label` nor content in the `empty` slot.
+     */
+    private drawEmpty;
+    /**
+     * The row after the last while `loading` is set: a list item, or a grid row
+     * with one cell in a list that selects. It is not one of the rows, so it
+     * carries no value and a key never lands on it.
+     */
+    private drawLoading;
+    /** Watches the end of a `load-more` list coming near the box that scrolls it. */
+    private endWatcher;
+    /** The end being watched, so a new one is watched again. */
+    private watchedEnd;
+    /** Whether the end of the list was in reach when last measured. */
+    private endInView;
+    /** The number of rows `helix-load-more` was last sent for. */
+    private askedAt;
+    /**
+     * Starts or stops watching the end of the list. The box it is measured
+     * against is the one that scrolls the list, or the page, and a screen of
+     * room is added below it, so the next rows are asked for before a reader
+     * reaches the last.
+     */
+    private watchEnd;
+    /** Sends `helix-load-more`, once for each number of rows, and never while loading. */
+    private askForMore;
+    private readonly handleEmptyChange;
     private readonly handleSlotChange;
 }
 declare global {

package/dist/list/root/list-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 { commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -15,7 +15,11 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         super(...arguments);
         this.canceledLabel = 'Canceled';
         this.droppedLabel = 'Dropped';
+        this.emptyLabel = '';
         this.label = '';
+        this.loading = false;
+        this.loadingLabel = 'Loading more';
+        this.loadMore = false;
         this.movedLabel = '{name} moved to position {position} of {count}';
         this.moveLabel = 'Move {name}';
         this.pickedUpLabel = 'Picked up {name}';
@@ -81,7 +85,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.reachable.map((one) => this.valueFor(one)).join(',');
                 this.choose(every === this.value ? null : every);
             }
             else if (event.key === 'Escape' && this.value !== '' && this.selectionMode !== 'none') {
@@ -125,6 +129,10 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
                 this.sync();
             }
         };
+        this.endInView = false;
+        this.handleEmptyChange = () => {
+            this.requestUpdate();
+        };
         this.handleSlotChange = () => {
             this.rowsChanged = true;
             this.requestUpdate();
@@ -306,9 +314,15 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusin);
+        if (this.hasUpdated) {
+            this.watchEnd();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.endWatcher?.disconnect();
+        this.endWatcher = undefined;
+        this.watchedEnd = undefined;
         this.removeEventListener('keydown', this.handleKeyCapture, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleClick);
@@ -323,6 +337,17 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (this.interactive || changed.get('selectionMode') !== undefined) {
             this.sync();
         }
+        if (this.interactive) {
+            auditName(this, () => null, 'Give it a `label`, or an `aria-label` that says what the rows are.', () => this.label !== '');
+        }
+        if (this.childrenKnown) {
+            this.toggleState('empty', this.rows.length === 0);
+        }
+        this.toggleState('loading', this.loading);
+        this.watchEnd();
+        if (this.endInView) {
+            this.askForMore();
+        }
         if (this.reorderable || changed.get('reorderable') !== undefined) {
             this.syncMoves();
             this.refocus();
@@ -331,14 +356,64 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: this.interactive ? 'grid' : 'list' });
+        this.internals.ariaBusy = this.loading ? 'true' : null;
         this.internals.ariaMultiSelectable = this.selectionMode === 'multiple' ? 'true' : null;
     }
     get numbers() {
-        const counted = numbering(this.start, this.reversed, this.childrenKnown ? this.knownChildren.length : undefined);
+        const counted = numbering(this.start, this.reversed, this.childrenKnown
+            ? this.knownChildren.filter((child) => !child.hasAttribute('slot')).length
+            : undefined);
         return counted ? `--list-first: ${counted.first}; --list-step: ${counted.step}` : nothing;
     }
     render() {
-        return html `<slot style=${this.numbers} @slotchange=${this.handleSlotChange}></slot>${drawStatus(this.status)}${this.reorder.drawDragPreview()}`;
+        return html `<slot style=${this.numbers} @slotchange=${this.handleSlotChange}></slot>${this.drawLoading()}${this.drawEmpty()}${this.loadMore ? html `<span data-end aria-hidden="true"></span>` : nothing}${drawStatus(this.status)}${this.reorder.drawDragPreview()}`;
+    }
+    drawEmpty() {
+        if (!this.childrenKnown || this.rows.length > 0 || this.loading) {
+            return nothing;
+        }
+        const shown = this.emptyLabel !== '' || this.querySelector(':scope > [slot="empty"]') !== null;
+        const content = html `<slot name="empty" @slotchange=${this.handleEmptyChange}>${this.emptyLabel}</slot>`;
+        return this.interactive
+            ? html `<div part="empty" role="row" ?hidden=${!shown}><div role="gridcell">${content}</div></div>`
+            : html `<div part="empty" role="listitem" ?hidden=${!shown}>${content}</div>`;
+    }
+    drawLoading() {
+        if (!this.loading) {
+            return nothing;
+        }
+        const content = html `<slot name="loading">${this.loadingLabel}</slot>`;
+        return this.interactive
+            ? html `<div part="loading" role="row"><div role="gridcell">${content}</div></div>`
+            : html `<div part="loading" role="listitem">${content}</div>`;
+    }
+    watchEnd() {
+        const end = this.loadMore ? this.renderRoot.querySelector('[data-end]') : null;
+        if (end === this.watchedEnd) {
+            return;
+        }
+        this.endWatcher?.disconnect();
+        this.endWatcher = undefined;
+        this.endInView = false;
+        this.watchedEnd = end ?? undefined;
+        if (!end || typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.endWatcher = new IntersectionObserver((entries) => {
+            this.endInView = entries.some((entry) => entry.isIntersecting);
+            if (this.endInView) {
+                this.askForMore();
+            }
+        }, { root: scrollingAncestor(this, { axis: 'y' }), rootMargin: '0px 0px 100% 0px' });
+        this.endWatcher.observe(end);
+    }
+    askForMore() {
+        const count = this.rows.length;
+        if (!this.loadMore || this.loading || this.askedAt === count) {
+            return;
+        }
+        this.askedAt = count;
+        this.dispatchEvent(new HelixLoadMoreEvent());
     }
 };
 __decorate([
@@ -349,12 +424,25 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessList.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessList.prototype, "emptyLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessList.prototype, "kind", void 0);
 __decorate([
     property()
 ], HelixHeadlessList.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessList.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-label' })
+], HelixHeadlessList.prototype, "loadingLabel", void 0);
+__decorate([
+    property({ attribute: 'load-more', type: Boolean })
+], HelixHeadlessList.prototype, "loadMore", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-label' })

package/dist/list/selection.js

@@ -7,7 +7,7 @@ export const choiceValue = ({ anchor, arrived = false, behavior, extend = false,
     if (extend && mode === 'multiple') {
         const from = anchor === undefined ? -1 : shown.indexOf(anchor);
         const range = rangeAdd(now, shown, from, shown.indexOf(pressed));
-        return range ? range.join(', ') : null;
+        return range ? range.join(',') : null;
     }
     if (behavior === 'replace' && !toggle) {
         return now.length === 1 && now[0] === pressed ? null : pressed;
@@ -15,8 +15,8 @@ export const choiceValue = ({ anchor, arrived = false, behavior, extend = false,
     if (arrived) {
         return null;
     }
-    const next = pressedValue(mode, value, pressed);
-    return next === value ? null : next;
+    const next = commaList(pressedValue(mode, value, pressed)).join(',');
+    return next === commaList(value).join(',') ? null : next;
 };
 export const rowStop = (count, at, step) => {
     if (count <= 1) {

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

@@ -214,6 +214,12 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * above `0`.
      */
     pitch: number;
+    /**
+     * What a screen reader calls the map in place of its role, after its
+     * name: "Edinburgh, map". Said only where the map has a name of its
+     * own, since the fallback name is the same word. Empty leaves the role.
+     */
+    roleLabel: string;
     /** The rotate left button's label. */
     rotateLeftLabel: string;
     /** The rotate right button's label. */

package/dist/map/root/map-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, focusItemOf, formatWords, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, words, } from '@fusion.dev/helix-core';
+import { auditName, customElement, focusItemOf, formatWords, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, words, } from '@fusion.dev/helix-core';
 import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -60,6 +60,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.movedUpLabel = 'Moved up';
         this.northLabel = 'Facing north';
         this.pitch = 0;
+        this.roleLabel = 'map';
         this.rotateLeftLabel = 'Rotate left';
         this.rotateRightLabel = 'Rotate right';
         this.satelliteLabel = 'Satellite';
@@ -340,6 +341,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        auditName(this, () => null, 'Give it a `label` that says what the map shows, such as "Stores in Edinburgh".', () => this.label !== '');
     }
     updated(changed) {
         super.updated(changed);
@@ -609,6 +611,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
       part="region"
       role="group"
       aria-label=${this.label || this.getAttribute('aria-label') || this.fallbackLabel}
+      aria-roledescription=${(this.label || this.getAttribute('aria-label')) && this.roleLabel ? this.roleLabel : nothing}
       aria-keyshortcuts=${this.keyShortcuts}
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -705,6 +708,10 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMap.prototype, "pitch", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessMap.prototype, "roleLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'rotate-left-label' })

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;

package/dist/megamenu/root/megamenu-root.js

@@ -13,8 +13,11 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     constructor() {
         super(...arguments);
         this.bandBelow = 640;
+        this.closeDelay = 220;
         this.label = '';
+        this.openDelay = 120;
         this.openOn = 'hover';
+        this.placement = 'bottom-start';
         this.narrow = false;
         this.handleWidth = (event) => {
             this.narrow = event.matches;
@@ -25,9 +28,10 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             onDismiss: () => this.close(),
             open: () => this.open,
             place: () => !this.banded,
-            placement: () => 'bottom-start',
+            placement: () => this.placement,
             surface: () => this.partNamed('surface'),
         });
+        this.settledOnce = false;
         this.keys = new KeyboardNavigationController(this, {
             items: () => !this.parentElement?.shadowRoot
                 ? HelixHeadlessMegamenu_1.bar
@@ -72,7 +76,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
                 return;
             }
             const showing = HelixHeadlessMegamenu_1.bar.showing;
-            this.schedule(showing && showing !== this ? 0 : HelixHeadlessMegamenu_1.OPEN_DELAY, () => {
+            this.schedule(showing && showing !== this ? 0 : this.openDelay, () => {
                 this.requestOpen(true);
             });
         };
@@ -80,7 +84,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             if (this.openOn !== 'hover' || event.pointerType !== 'mouse') {
                 return;
             }
-            this.schedule(HelixHeadlessMegamenu_1.CLOSE_DELAY, () => {
+            this.schedule(this.closeDelay, () => {
                 this.requestOpen(false);
             });
         };
@@ -142,9 +146,17 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     }
     tellTrigger() {
         const slotted = this.slotted;
-        if (slotted) {
+        if (!slotted || slotted.localName.includes('-')) {
             tellDisclosure(slotted, this.open);
+            return;
+        }
+        if (slotted !== this.told) {
+            if (!this.settledOnce || slotted.hasAttribute('aria-expanded')) {
+                return;
+            }
+            this.told = slotted;
         }
+        slotted.setAttribute('aria-expanded', String(this.open));
     }
     get slotted() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
@@ -156,6 +168,10 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     get navigationControl() {
         return this.trigger;
     }
+    markCurrent() {
+        const current = [...this.querySelectorAll('[aria-current="page"]')].some((link) => !link.closest('[slot="trigger"]'));
+        this.toggleState('current', current);
+    }
     close() {
         if (!this.requestOpen(false)) {
             return;
@@ -180,8 +196,6 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         }
         return this.trigger.getBoundingClientRect().bottom;
     }
-    static { this.OPEN_DELAY = 120; }
-    static { this.CLOSE_DELAY = 220; }
     schedule(delay, then) {
         this.stop();
         this.timer = setTimeout(then, delay);
@@ -203,6 +217,19 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.addEventListener('pointerleave', this.handlePointerLeave);
         this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('keydown', this.handleKeyDown);
+        this.markCurrent();
+        if (typeof MutationObserver === 'function') {
+            this.currentWatch = new MutationObserver(() => this.markCurrent());
+            this.currentWatch.observe(this, {
+                attributeFilter: ['aria-current'],
+                childList: true,
+                subtree: true,
+            });
+        }
+        void this.whenSettled.then(() => {
+            this.settledOnce = true;
+            this.tellTrigger();
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -215,6 +242,8 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.removeEventListener('pointerleave', this.handlePointerLeave);
         this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('keydown', this.handleKeyDown);
+        this.currentWatch?.disconnect();
+        this.currentWatch = undefined;
         HelixHeadlessMegamenu_1.bar.remove(this);
         this.stop();
     }
@@ -297,12 +326,21 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
 __decorate([
     property({ attribute: 'band-below', type: Number })
 ], HelixHeadlessMegamenu.prototype, "bandBelow", void 0);
+__decorate([
+    property({ attribute: 'close-delay', type: Number })
+], HelixHeadlessMegamenu.prototype, "closeDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessMegamenu.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'open-delay', type: Number })
+], HelixHeadlessMegamenu.prototype, "openDelay", void 0);
 __decorate([
     property({ attribute: 'open-on' })
 ], HelixHeadlessMegamenu.prototype, "openOn", void 0);
+__decorate([
+    property()
+], HelixHeadlessMegamenu.prototype, "placement", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessMegamenu.prototype, "variant", void 0);