@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/list/selection.js

@@ -0,0 +1,30 @@
+import { commaList, pressedValue, rangeAdd } from '@fusion.dev/helix-core';
+export const choiceValue = ({ anchor, arrived = false, behavior, extend = false, mode, pressed, shown, toggle = false, value, }) => {
+    if (mode === 'none') {
+        return null;
+    }
+    const now = commaList(value);
+    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;
+    }
+    if (behavior === 'replace' && !toggle) {
+        return now.length === 1 && now[0] === pressed ? null : pressed;
+    }
+    if (arrived) {
+        return null;
+    }
+    const next = pressedValue(mode, value, pressed);
+    return next === value ? null : next;
+};
+export const rowStop = (count, at, step) => {
+    if (count <= 1) {
+        return 0;
+    }
+    const next = at + step;
+    if (next >= count) {
+        return 0;
+    }
+    return next < 0 ? count - 1 : next;
+};

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

@@ -44,18 +44,22 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  *
  * @slot - The options, and any groups of them.
  * @slot empty - What the list shows when it has no options to show, for content richer than `empty-text`.
+ * @slot error - What the list shows while `load-error` is set, for content richer than its text.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot filter-icon - The icon in the filter field. Defaults to a magnifying glass.
  * @slot hint - The hint, for content richer than plain text.
  * @slot label - The label, for content richer than plain text.
  * @slot loading - What the list shows while its options load, for content richer than `loading-text`.
+ * @slot no-results - What the list shows when a filter hides every option, for content richer than `no-results-text`.
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
  * @event {HelixFilterEvent} helix-filter - Fired before the list is filtered, and cancelable.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page of options and set `loading` while you fetch it.
  * @event {Event} input - Fired after the value changes.
  *
- * @csspart empty - The text shown when the filter hides every option.
+ * @csspart empty - The text shown when the list has no options to show, or the filter hides every one. `:state(no-results)` is set for the second.
+ * @csspart error - The text shown while `load-error` is set.
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart filter-icon - The icon beside the filter field.
  * @csspart filter-mark - The default icon beside the filter field, shown when none is slotted.
@@ -68,8 +72,10 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart search-field - The filter field.
  *
  * @cssstate empty - The list has no options to show: none were given, or the filter hid every one.
+ * @cssstate error - While `load-error` is set.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate loading - While `loading` is set.
+ * @cssstate no-results - A filter hid every option of a list that has some.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;
@@ -130,6 +136,14 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Placeholder text for the filter field.
      */
     filterLabel: string;
+    /**
+     * What the list says when its options could not be loaded, such as after a
+     * request to a server fails. Empty is no error.
+     *
+     * Set, it shows under any options there are, in place of `empty-text` and
+     * `loading-text`, and a screen reader hears it. Clear it when you ask again.
+     */
+    loadError: string;
     /**
      * Stops the arrow keys from choosing each option they move to. Enter, Space
      * or a click chooses the highlighted option.
@@ -143,6 +157,13 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Whether more than one option can be chosen.
      */
     multiple: boolean;
+    /**
+     * The text shown when a filter hides every option of a list that has some.
+     *
+     * Absent, the list says `empty-text` in both cases. Set it to tell "nothing
+     * matches what you typed" from "there is nothing here".
+     */
+    noResultsText?: string;
     /**
      * What a screen reader hears when a filter leaves one option. `{count}` is
      * the count.
@@ -430,6 +451,14 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private takeFilter;
     /** Filters at once on a filter still waiting out `filterDelay`. */
     private flushFilter;
+    /** The number of options the list last asked for more at. */
+    private askedAt;
+    /**
+     * Asks for more once the reader is within a screen of the end, React Aria's
+     * `onLoadMore`: once for each number of options, so a scroll that goes on
+     * asks again only after the next page arrived, and never while loading.
+     */
+    private readonly handleScroll;
     /** Requests a new filter, and returns whether the request went through. */
     requestFilter(next: string): boolean;
     /**
@@ -485,6 +514,13 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * the live region still says it.
      */
     protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
+    /**
+     * Whether a filter hid every option of a list that has some, which is a
+     * different thing to say from a list that has none.
+     */
+    private get noResults();
+    /** The error, or what a filter that hid everything says, before the shared words. */
+    protected renderLive(hasContent: boolean): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,14 +4,13 @@ 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, countLabel, customElement, DelayController, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, countLabel, customElement, DelayController, DisabledCascadeController, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessOptionGroup } from '../../option/group/option-group.js';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
-import { rangeAdd } from '../range.js';
 const MOVES = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp']);
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 const PAGE = 10;
@@ -71,6 +70,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.filterable = false;
         this.filterDelay = 0;
         this.filterLabel = 'Filter';
+        this.loadError = '';
         this.manual = false;
         this.multiple = false;
         this.resultLabel = '{count} result';
@@ -193,6 +193,18 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             this.takeFilter(control);
         };
         this.filtering = new DelayController(this, { renders: false });
+        this.askedAt = -1;
+        this.handleScroll = (event) => {
+            const items = event.currentTarget;
+            const count = this.options.length;
+            if (this.loading || count === this.askedAt || items.clientHeight === 0) {
+                return;
+            }
+            if (items.scrollHeight - items.scrollTop - items.clientHeight <= items.clientHeight) {
+                this.askedAt = count;
+                this.dispatchEvent(new HelixLoadMoreEvent());
+            }
+        };
         this.handleFilterKeydown = (event) => {
             if (event.key === 'Enter' || FIELD_MOVES.has(event.key)) {
                 this.flushFilter();
@@ -472,6 +484,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         this.toggleState('empty', !this.showsOptions);
         this.toggleState('loading', this.loading);
+        this.toggleState('error', this.loadError !== '');
+        this.toggleState('no-results', this.noResults);
     }
     seedDeclared() {
         if (this.owned || this.defaultValue !== '' || this.hasAttribute('default-value')) {
@@ -546,13 +560,37 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             : true;
     }
     renderStatus(hasContent) {
+        if (this.loadError !== '') {
+            return html `<p part="error"><slot name="error">${this.loadError}</slot></p>`;
+        }
         if (!this.loading && hasContent) {
             return nothing;
         }
-        return this.loading
-            ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
+        if (this.loading) {
+            return html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`;
+        }
+        const given = this.noResultsText !== undefined ||
+            this.querySelector?.(':scope > [slot="no-results"]') != null;
+        return this.noResults && given
+            ? html `<p part="empty"><slot name="no-results">${this.noResultsText ?? this.emptyText}</slot></p>`
             : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
     }
+    get noResults() {
+        return (this.counted &&
+            !this.loading &&
+            this.filter !== '' &&
+            this.options.length > 0 &&
+            !this.hasMatches);
+    }
+    renderLive(hasContent) {
+        if (this.loadError !== '') {
+            return html `<span part="live" role="status">${this.loadError}</span>`;
+        }
+        if (this.noResults && this.noResultsText !== undefined) {
+            return html `<span part="live" role="status">${this.noResultsText}</span>`;
+        }
+        return super.renderLive(hasContent);
+    }
     render() {
         const shown = this.showsOptions;
         return html `${this.renderGroupLabel()}
@@ -589,6 +627,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         aria-required=${this.required ? 'true' : nothing}
         ${''}
         tabindex=${this.filterable ? nothing : this.isDisabled ? -1 : 0}
+        @scroll=${this.handleScroll}
       >
         <slot @slotchange=${() => this.place()}></slot>
         ${this.renderStatus(shown)}
@@ -617,12 +656,18 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: 'load-error' })
+], HelixHeadlessListbox.prototype, "loadError", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessListbox.prototype, "manual", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessListbox.prototype, "noResultsText", void 0);
 __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessListbox.prototype, "resultLabel", void 0);

package/dist/loader/busy.d.ts

@@ -15,3 +15,13 @@
 export declare const claimBusy: (region: Element) => void;
 /** Takes a claim back, and the attribute with the last one. */
 export declare const releaseBusy: (region: Element) => void;
+/**
+ * Calls `found` with the region `find` answers once it is in `root`, and
+ * returns the call that stops waiting.
+ *
+ * For a loader whose region is not on the page yet: a framework often draws
+ * the loader before the list it stands for, and a region looked up once, a
+ * frame after connecting, was never marked. Watches for children and ids being
+ * written, and stops at the first answer.
+ */
+export declare const awaitRegion: (root: Node, find: () => Element | null, found: (region: Element) => void) => (() => void);

package/dist/loader/busy.js

@@ -22,3 +22,14 @@ export const releaseBusy = (region) => {
         CLAIMS.set(region, held - 1);
     }
 };
+export const awaitRegion = (root, find, found) => {
+    const observer = new MutationObserver(() => {
+        const region = find();
+        if (region) {
+            observer.disconnect();
+            found(region);
+        }
+    });
+    observer.observe(root, { attributeFilter: ['id'], childList: true, subtree: true });
+    return () => observer.disconnect();
+};

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

@@ -22,11 +22,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **`for` names the region being loaded**, and the loader sets
  * `aria-busy="true"` on it for as long as the loader is on the page, so a
  * screen reader waits for the region rather than reading it half filled. Two
- * loaders in one region hold it busy until the last one leaves.
+ * loaders in one region hold it busy until the last one leaves. A region drawn
+ * after the loader is marked when it arrives.
  *
  * **`delay` keeps a quick load from flashing a loader.** The loader stays
  * hidden, and silent, for that many milliseconds, and appears only if the work
- * is still going.
+ * is still going. While it waits it carries `:state(waiting)`.
  *
  * @since 0.1.0
  * @status stable
@@ -40,6 +41,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart mark - The region that holds the slotted content at the center.
  * @csspart svg - The rotating circle pair.
  * @csspart track - The full circle behind the indicator.
+ *
+ * @cssstate waiting - The loader is waiting out its `delay`, hidden and silent.
  */
 export declare class HelixHeadlessLoader extends HelixElement {
     /**
@@ -67,6 +70,10 @@ export declare class HelixHeadlessLoader extends HelixElement {
     private readonly due;
     /** The region this loader marked busy, so it is the one released. */
     private region;
+    /** Stops waiting for a region `for` names that is not on the page yet. */
+    private stopAwaiting;
+    /** Whether `for` has named an element while the loader was on the page. */
+    private found;
     /** Whether the loader is still waiting out its `delay`. */
     private get waiting();
     connectedCallback(): void;

package/dist/loader/root/loader-root.js

@@ -4,10 +4,10 @@ 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, DelayController, elementById, HelixElement, hostAria, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, elementById, HelixElement, hostAria, reportRuntime, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { claimBusy, releaseBusy } from '../busy.js';
+import { awaitRegion, claimBusy, releaseBusy } from '../busy.js';
 let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     constructor() {
         super(...arguments);
@@ -16,6 +16,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
         this.label = 'Loading';
         this.due = new DelayController(this);
         this.region = null;
+        this.found = false;
     }
     get waiting() {
         return this.delay > 0 && !this.due.elapsed;
@@ -29,10 +30,26 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        if (this.stopAwaiting && !this.found) {
+            reportRuntime({
+                kind: 'missing-target',
+                message: `<${this.localName} for="${this.for}"> named no element in its tree while it was on ` +
+                    'the page, so no region was marked busy. Give the region that id.',
+                tag: this.localName,
+            });
+        }
+        this.stopAwaiting?.();
+        this.stopAwaiting = undefined;
         this.release();
     }
     mark() {
-        const region = this.isConnected && this.for !== '' ? elementById(this, this.for) : null;
+        this.stopAwaiting?.();
+        this.stopAwaiting = undefined;
+        const named = this.isConnected && this.for !== '';
+        const region = named ? elementById(this, this.for) : null;
+        if (named && !region) {
+            this.stopAwaiting = awaitRegion(this.getRootNode(), () => elementById(this, this.for), () => this.mark());
+        }
         if (region === this.region) {
             return;
         }
@@ -40,6 +57,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
         if (region) {
             claimBusy(region);
             this.region = region;
+            this.found = true;
         }
     }
     release() {
@@ -51,6 +69,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     updated(changed) {
         super.updated(changed);
         if (changed.has('for') && changed.get('for') !== undefined) {
+            this.found = false;
             this.mark();
         }
     }
@@ -59,6 +78,7 @@ let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
         hostAria(this.internals, { label: this.label, role: 'progressbar' });
         this.internals.ariaBusy = 'true';
         this.internals.ariaHidden = this.waiting ? 'true' : null;
+        this.toggleState('waiting', this.waiting);
     }
     render() {
         return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true" ?hidden=${this.waiting}>

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

@@ -45,7 +45,8 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * for each layer, which sets the layer's `hidden` attribute. Layers with the
  * same `group`, such as a route and its dotted legs, share one tile. A tile
  * sends `helix-before-toggle` from the layer first, so you can store the
- * choice or refuse it.
+ * choice or refuse it, and `helix-toggle` from it once `hidden` holds the
+ * choice.
  *
  * Imagery, a `helix-map-raster` with `ground`, is a map type and not a tile.
  * The menu opens with a card for each type, Standard, Hybrid, and Satellite,
@@ -80,6 +81,7 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @event {HelixMapRotateEvent} helix-map-rotate - A rotate or Face north button, or Shift with Left or Right, was pressed. Turn your map in response.
  * @event {HelixMapTiltEvent} helix-map-tilt - The 3D button, or Shift with Up or Down, was pressed. Tilt your map in response.
  * @event {HelixMapZoomEvent} helix-map-zoom - A zoom button or key was pressed, with a direction. Zoom your map in response.
+ * @event {HelixToggleEvent} helix-toggle - A layer's tile in the layers menu showed or hid it. Sent from the layer once its `hidden` attribute holds the choice, with `checked` true when it is shown.
  *
  * @csspart attribution - The strip under the map that holds the credit.
  * @csspart compass - The compass and the pan and rotate buttons around it.
@@ -291,7 +293,9 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * **Asked first, from the layer.** The tile wrote `hidden` onto the
      * consumer's element and said nothing, so a page could neither keep the
      * choice nor keep its own state in step. The request comes from the first
-     * layer of the tile, which is the element the page wrote.
+     * layer of the tile, which is the element the page wrote. Once `hidden`
+     * holds the answer, the same layer sends `helix-toggle`, the request's verb
+     * without `before`, since the platform has no word for a layer shown.
      */
     private showLayers;
     /** Asks for a map type, and sends `change` once it holds. */

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, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } 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';
@@ -210,7 +210,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         if (!first) {
             return;
         }
-        requestChange({
+        const applied = requestChange({
             apply: () => {
                 for (const layer of layers) {
                     layer.hidden = !shown;
@@ -221,6 +221,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             host: first,
             next: shown,
         });
+        if (applied) {
+            first.dispatchEvent(new HelixToggleEvent({ checked: shown }));
+        }
     }
     chooseMapType(type) {
         const applied = requestChange({

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

@@ -20,6 +20,29 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * which. Hover is the default because in a navigation bar people expect to move
  * along the row and see each section.
  *
+ * 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
+ * one opening is `:state(from-end)` and the one closing is `:state(to-start)`;
+ * moving back, they are `:state(from-start)` and `:state(to-end)`. A
+ * stylesheet slides them on that. Start and end follow the reading direction,
+ * so on a right-to-left page the end is on the left. A panel that opens or
+ * closes on its own carries none of the four. A press on another megamenu's
+ * trigger hands over the same way as hovering it.
+ *
+ * While a panel is open its surface carries its own size, as
+ * `--megamenu-surface-inline-size` and `--megamenu-surface-block-size`, and a
+ * panel that took over from another also carries that one's size, as
+ * `--megamenu-from-inline-size` and `--megamenu-from-block-size`. Radix's
+ * navigation menu publishes the same pair from its shared viewport, so a
+ * stylesheet can grow or shrink one panel into the next.
+ *
+ * Put megamenus in a `Navigation` with `arrows` and the arrow keys move
+ * between their triggers. Down Arrow on the trigger of an open panel moves
+ * focus to the panel's first link, Escape closes the panel and returns focus
+ * to its trigger, and Tab moves through the panel's links and closes it on the
+ * way out. The trigger says `aria-expanded`, and the panel is a group named by
+ * `label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -36,10 +59,18 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @csspart surface - The floating panel that opens.
  * @csspart trigger - The default trigger button, shown when the `trigger` slot is empty.
  *
+ * @cssproperty --megamenu-from-block-size - The height of the panel this one took over from, written on the surface while it is open.
+ * @cssproperty --megamenu-from-inline-size - The width of the panel this one took over from, written on the surface while it is open.
+ * @cssproperty --megamenu-surface-block-size - The panel's own height, written on the surface while it is open.
+ * @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 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.
  * @cssstate open - The panel is open, and the trigger is shown as current.
+ * @cssstate to-end - The panel closed because one earlier in the bar opened, so it can leave toward the end.
+ * @cssstate to-start - The panel closed because one later in the bar opened, so it can leave toward the start.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     /**
@@ -119,6 +150,16 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     private get slotted();
     /** Whatever the consumer slotted, or the button rendered in its place. */
     private get trigger();
+    /**
+     * @internal The control a `Navigation`'s arrow keys move to: the trigger
+     * the consumer slotted, or the button drawn in its place.
+     */
+    get navigationControl(): HTMLElement;
+    /**
+     * Down Arrow on the trigger of an open panel moves focus to the panel's first
+     * link or control, as Radix's navigation menu does.
+     */
+    private readonly handleKeyDown;
     /** Shuts it and puts the reader back where they were. */
     private close;
     /**
@@ -241,6 +282,27 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * overruled.
      */
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Clears the direction of every panel but the two in a hand-over, so only
+     * the latest move is ever described.
+     */
+    private static settle;
+    /** Whether the panel is closing because another one opened in its place. */
+    private handedOver;
+    /** The panel's size the last time it was open, in pixels. */
+    private size;
+    /** The size of the panel this one took over from, if it took over. */
+    private from;
+    /**
+     * Writes the panel's size onto its surface, and the size of the panel it
+     * took over from, for a stylesheet that grows one into the next.
+     */
+    private measure;
+    /**
+     * Says which way the reader moved when one panel took over from another.
+     * Nothing clears all four, for a panel opened or closed on its own.
+     */
+    private motion;
     protected updated(changed: PropertyValues): void;
     /**
      * The control that opens it, behind a seam the styled tier can move.