@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -67,8 +67,20 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  *
  * @slot - The element your renderer draws the map in, and the map's markers, routes, areas, positions, and points layers.
  * @slot attribution - The map credit, which most tile licenses require.
+ * @slot face-north-icon - Replaces the compass needle. It inherits `--map-needle-turn`, so `rotate: var(--map-needle-turn)` keeps it pointing north.
  * @slot footer - Content below the map, such as a legend or a scale.
+ * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the map, such as a title or a search field.
+ * @slot layers-icon - Replaces the glyph inside the layers button.
+ * @slot pan-down-icon - Replaces the glyph inside the pan down button.
+ * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
+ * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
+ * @slot pan-up-icon - Replaces the glyph inside the pan up button.
+ * @slot rotate-left-icon - Replaces the glyph inside the rotate left button.
+ * @slot rotate-right-icon - Replaces the glyph inside the rotate right button.
+ * @slot tilt-icon - Replaces the "3D" inside the 3D button.
+ * @slot zoom-in-icon - Replaces the glyph inside the zoom-in button.
+ * @slot zoom-out-icon - Replaces the glyph inside the zoom-out button.
  *
  * @event {Event} change - The layers menu changed the map type, which `map-type` now holds.
  * @event {HelixActivateEvent} helix-activate - A marker was pressed. The value is the marker's `name`, or its `label` if it has no name. A cluster sends `helix-map-cluster` instead.
@@ -122,8 +134,11 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  *
  * @cssstate fullscreen - The map fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate layers-open - The layers menu is open.
  * @cssstate ready - The map has been drawn whole, after `helix-map-ready`.
+ * @cssstate rotated - The map is turned away from north, by `bearing`.
  * @cssstate sharing - The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a map with `gestures="activate"` waits to be pressed.
+ * @cssstate tilted - The map is tilted by `pitch`, so it no longer looks straight down.
  * @cssstate using - A map with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
@@ -323,8 +338,31 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     protected readonly keys: KeyboardNavigationController;
     /** The marker a press or a click came from, where it came from one. */
     private markerOf;
+    /**
+     * The marker focus is on, while it is.
+     *
+     * **Kept so a marker the page takes away hands focus on.** A delivery done
+     * or a filter changed removes a marker, and the one a reader was on went
+     * with focus still in it: the browser dropped focus to the page, and the
+     * reader was put back at its top with nothing said.
+     */
+    private focused;
     /** Moves the tab stop to the marker focus arrived at. */
     private readonly handleFocusIn;
+    /**
+     * Forgets the marker focus left, unless the page took it away.
+     *
+     * Focus leaving for nothing is a press on the page or the marker removed,
+     * and which one is known once the removal has finished: a marker still in
+     * the page was left, and one gone is owed a place for focus to land.
+     */
+    private readonly handleFocusOut;
+    /**
+     * Gives focus to the marker that took the stop of one the page took away
+     * with focus on it: the next, the last where it was the last, its cluster
+     * where it is gathered, and the region where none is left.
+     */
+    private refocus;
     /**
      * Says a marker was pressed, by click, Enter or Space: a place by its name,
      * and a cluster as a cluster, from the marker it is drawn as.
@@ -376,7 +414,7 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * order they are written, with its picture and name, pressed while it is
      * shown. A group's tile is pressed while any of its layers is shown.
      */
-    private renderLayersMenu;
+    protected renderLayersMenu(): TemplateResult | typeof nothing;
     /**
      * The map types, as cards with a picture of the map in each: Standard,
      * Hybrid, and Satellite. One is chosen, so they are radio buttons, and the
@@ -392,7 +430,7 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * arrows around it are the way to move and turn the map without dragging,
      * which a pointer otherwise needs.
      */
-    private renderCompass;
+    protected renderCompass(pan: boolean, rotate: boolean): TemplateResult;
     /**
      * The controls, in one column in the order they are read: fullscreen, the
      * layers, 3D, zoom, and the compass with the arrows round it, last, where

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, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, focusItemOf, 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';
@@ -89,15 +89,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         };
         this.stop = 0;
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.markers.map((marker, at) => ({
-                contains: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
+            items: () => this.markers.map((marker, at) => focusItemOf(marker, {
                 disabled: marker.gatheredBy !== undefined || !placed(marker),
-                focusItem: () => {
+                focus: () => {
                     this.stop = at;
                     marker.focus();
                 },
-                select: () => { },
-                selected: false,
+                owns: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
             })),
             origin: 'focus',
             selects: () => false,
@@ -105,10 +103,26 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.handleFocusIn = (event) => {
             const marker = this.markerOf(event);
             const at = marker ? this.markers.indexOf(marker) : -1;
+            this.focused = at === -1 ? undefined : marker;
             if (at !== -1) {
                 this.stop = at;
             }
         };
+        this.handleFocusOut = (event) => {
+            const marker = this.markerOf(event);
+            if (!marker || marker !== this.focused) {
+                return;
+            }
+            if (event.relatedTarget) {
+                this.focused = undefined;
+                return;
+            }
+            queueMicrotask(() => {
+                if (marker.isConnected && this.focused === marker) {
+                    this.focused = undefined;
+                }
+            });
+        };
         this.handleClick = (event) => {
             const marker = this.markerOf(event);
             if (marker) {
@@ -267,6 +281,23 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             .composedPath()
             .find((one) => one.isMapMarker === true);
     }
+    refocus(stop) {
+        const gone = this.focused;
+        if (!gone || this.markers.includes(gone)) {
+            return;
+        }
+        this.focused = undefined;
+        const active = document.activeElement;
+        if (active !== null && active !== document.body) {
+            return;
+        }
+        if (stop) {
+            stop.focus();
+        }
+        else {
+            this.partNamed('region')?.focus();
+        }
+    }
     activate(marker) {
         if (marker.gathered.length > 1) {
             marker.dispatchEvent(new HelixMapClusterEvent({ labels: [...marker.gathered] }));
@@ -290,6 +321,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.addEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('keydown', this.handleMarkerKeydown);
         this.addEventListener('keyup', this.handleMarkerKeyup);
         this.hiding = new MutationObserver(() => this.requestUpdate());
@@ -304,6 +336,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.removeEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('keydown', this.handleMarkerKeydown);
         this.removeEventListener('keyup', this.handleMarkerKeyup);
     }
@@ -331,6 +364,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         for (const marker of markers) {
             marker.current = marker === stop;
         }
+        this.refocus(stop);
         if (changed.has('cluster')) {
             this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'place' }));
         }
@@ -371,9 +405,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }}
         @keydown=${this.handleMenuKeydown}
       >
-        <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
-          ${unsafeSVG(stack.content)}
-        </svg>
+        <slot name="layers-icon">
+          <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
+            ${unsafeSVG(stack.content)}
+          </svg>
+        </slot>
       </button>
       <div
         part="layers-menu"
@@ -431,38 +467,40 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         return html `<div part="compass">
       ${rotate
             ? html `<button part="rotate-left" aria-label=${this.rotateLeftLabel} type="button" @click=${() => this.rotate(-ROTATE_STEP)}>
-              ↺
+              <slot name="rotate-left-icon">↺</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
-              ${this.panGlyph('up')}
+              <slot name="pan-up-icon">${this.panGlyph('up')}</slot>
             </button>`
             : nothing}
       ${rotate
             ? html `<button part="rotate-right" aria-label=${this.rotateRightLabel} type="button" @click=${() => this.rotate(ROTATE_STEP)}>
-              ↻
+              <slot name="rotate-right-icon">↻</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
-              ${this.panGlyph('start')}
+              <slot name="pan-start-icon">${this.panGlyph('start')}</slot>
             </button>`
             : nothing}
       <button part="face-north" aria-label=${this.faceNorthLabel} type="button" style=${`--map-needle-turn: ${-this.bearing}deg`} @click=${() => this.faceNorth()}>
-        <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
-          <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
-          <path data-end="south" d="M8 14.5 5.5 8h5Z" />
-        </svg>
+        <slot name="face-north-icon">
+          <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
+            <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
+            <path data-end="south" d="M8 14.5 5.5 8h5Z" />
+          </svg>
+        </slot>
       </button>
       ${pan
             ? html `<button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
-              ${this.panGlyph('end')}
+              <slot name="pan-end-icon">${this.panGlyph('end')}</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
-              ${this.panGlyph('down')}
+              <slot name="pan-down-icon">${this.panGlyph('down')}</slot>
             </button>`
             : nothing}
     </div>`;
@@ -486,7 +524,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               type="button"
               @click=${this.toggleFullscreen}
             >
-              ⤢
+              <slot name="fullscreen-icon">⤢</slot>
             </button>`
             : nothing}
       ${menu}
@@ -498,15 +536,15 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               type="button"
               @click=${() => this.tiltTo(this.pitch > 0 ? 0 : TILTED)}
             >
-              3D
+              <slot name="tilt-icon">3D</slot>
             </button>`
             : nothing}
       ${zoom
             ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-                +
+                <slot name="zoom-in-icon">+</slot>
               </button>
               <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-                −
+                <slot name="zoom-out-icon">−</slot>
               </button>`
             : nothing}
       ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
@@ -558,6 +596,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         hostAria(this.internals, { label: this.label });
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('layers-open', this.layersOpen);
+        this.toggleState('rotated', Math.round(this.bearing) % 360 !== 0);
+        this.toggleState('tilted', Math.round(this.pitch) !== 0);
     }
     renderLayers() {
         const layers = this.layers.filter((layer) => this.shown(layer));

package/dist/megamenu/hand-over.d.ts

@@ -0,0 +1,75 @@
+/** Which way a panel moved when another took its place along the bar. */
+export type Motion = 'from-end' | 'from-start' | 'to-end' | 'to-start';
+/** What a hand-over asks of a megamenu. */
+export interface Handed extends Node {
+    /** Asks the panel to open or close, and returns whether it did. */
+    requestOpen(open: boolean): boolean;
+}
+/**
+ * The bar's one open panel, handed from one megamenu to the next.
+ *
+ * A page has one panel open at a time: a nav bar whose Products panel is still
+ * down while Solutions opens is a nav bar with two panels over the page. Module
+ * scope rather than a coordinating parent, because there is nothing to
+ * coordinate through: megamenus sit in whatever container the consumer used,
+ * which is usually `Navigation` and is not required to be. `Video` holds the
+ * media session the same way and for the same reason.
+ *
+ * When one panel opens in place of another, each is told which way the reader
+ * moved, as Radix's `data-motion` does: toward the end of the bar where the
+ * one opening comes after the one closing in the document. The one opening
+ * enters from the side the reader moved toward, and the one closing leaves
+ * toward the side they came from. Only the latest move is ever described.
+ */
+export declare class HandOver<T extends Handed> {
+    private readonly motion;
+    /**
+     * Every megamenu on the page, so a press on another one's trigger counts as
+     * moving along the bar. Closing on that press would close this panel before
+     * the other opens, and the hand-over would have no direction.
+     */
+    readonly connected: Set<T>;
+    /** The panel showing now, so opening one closes the last. */
+    showing: T | undefined;
+    /**
+     * The megamenu a pointer is pressing, from the press until the click that
+     * ends it. A press moves focus before the click opens anything, and the open
+     * panel must not close on that focus move, or the hand-over has no direction.
+     */
+    pressed: T | undefined;
+    /** The panels closing because another opened in their place. */
+    private readonly handed;
+    /** @param motion Writes a megamenu's direction, and clears it for `undefined`. */
+    constructor(motion: (megamenu: T, to: Motion | undefined) => void);
+    /** Counts a megamenu as part of the bar. */
+    add(megamenu: T): void;
+    /** Stops counting a megamenu that left the page. */
+    remove(megamenu: T): void;
+    /**
+     * Forgets the press a task after it ends, so the click it makes still finds
+     * it. One function for every press, so a listener added again is the same
+     * listener and never a second one.
+     */
+    private readonly release;
+    /**
+     * The megamenus that share this one's parent, in document order: the bar it
+     * is one trigger of.
+     */
+    alongside(megamenu: T): T[];
+    /** Notes a press on a megamenu, until the press ends. */
+    press(megamenu: T): void;
+    /**
+     * Opens one panel in place of the one showing, and returns that one, if
+     * there was one. The other closes through `requestOpen`, so a consumer
+     * holding it open is asked rather than overruled, and a refusal clears its
+     * direction again.
+     */
+    open(opening: T): T | undefined;
+    /**
+     * Notes a panel closing. One that closed on its own moved nowhere, and
+     * neither did any other, so every direction clears.
+     */
+    close(closing: T): void;
+    /** Clears the direction of every megamenu but the ones moving. */
+    private settle;
+}

package/dist/megamenu/hand-over.js

@@ -0,0 +1,67 @@
+export class HandOver {
+    constructor(motion) {
+        this.motion = motion;
+        this.connected = new Set();
+        this.handed = new Set();
+        this.release = () => {
+            setTimeout(() => {
+                this.pressed = undefined;
+            });
+        };
+    }
+    add(megamenu) {
+        this.connected.add(megamenu);
+    }
+    remove(megamenu) {
+        this.connected.delete(megamenu);
+        this.handed.delete(megamenu);
+        if (this.showing === megamenu) {
+            this.showing = undefined;
+        }
+        if (this.pressed === megamenu) {
+            this.pressed = undefined;
+        }
+    }
+    alongside(megamenu) {
+        return [...this.connected]
+            .filter((other) => other.parentNode === megamenu.parentNode)
+            .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    }
+    press(megamenu) {
+        this.pressed = megamenu;
+        window.addEventListener('pointerup', this.release, { capture: true, once: true });
+        window.addEventListener('pointercancel', this.release, { capture: true, once: true });
+    }
+    open(opening) {
+        const previous = this.showing !== opening ? this.showing : undefined;
+        const forward = previous !== undefined &&
+            (previous.compareDocumentPosition(opening) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+        this.motion(opening, previous ? (forward ? 'from-end' : 'from-start') : undefined);
+        this.settle(opening, previous);
+        if (previous) {
+            this.motion(previous, forward ? 'to-start' : 'to-end');
+            this.handed.add(previous);
+            if (!previous.requestOpen(false)) {
+                this.handed.delete(previous);
+                this.motion(previous, undefined);
+            }
+        }
+        this.showing = opening;
+        return previous;
+    }
+    close(closing) {
+        if (this.showing === closing) {
+            this.showing = undefined;
+        }
+        if (!this.handed.delete(closing)) {
+            this.settle();
+        }
+    }
+    settle(...moving) {
+        for (const megamenu of this.connected) {
+            if (!moving.includes(megamenu)) {
+                this.motion(megamenu, undefined);
+            }
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
-import { HelixElement, PopoverController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { HelixElement, KeyboardNavigationController, 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;
 /**
  * @summary A section of a navigation with a trigger that opens a panel of links.
@@ -36,8 +36,17 @@ 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.
  *
- * 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
+ * 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
+ * marks the open one: slot a mark of your own, such as a bar or an arrow
+ * pointing at the panel, and it shows only while the panel is open. The styled
+ * tier rests it on the trigger's bottom edge.
+ *
+ * Left and Right Arrow move between the triggers of the megamenus beside this
+ * one, and Home and End go to the first and the last, as Radix's navigation
+ * menu does. In a `Navigation`, which holds them in a slot, the arrows are the
+ * navigation's, and move between its destinations under its `arrows`. 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
@@ -50,12 +59,15 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/megamenu
  *
  * @slot - The panel's contents, such as your own lists of links and their headings.
+ * @slot indicator - A mark for the open trigger, shown while the panel is open, such as a bar or an arrow pointing at the panel.
  * @slot trigger - The control that opens the panel. When it is empty, a button named by `label` is shown.
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - The panel is about to close. Cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - The panel is about to open. Cancelable.
  * @event {ToggleEvent} toggle - The panel opened or closed. Carries `newState` and `oldState`.
  *
+ * @csspart columns - The panel's default slot. It draws no box until a sheet gives it a `display`.
+ * @csspart indicator - The `indicator` slot, rendered while the panel is open.
  * @csspart surface - The floating panel that opens.
  * @csspart trigger - The default trigger button, shown when the `trigger` slot is empty.
  *
@@ -73,6 +85,8 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @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 {
+    /** The bar's one open panel, shared by every megamenu on the page. */
+    private static readonly bar;
     /**
      * The page width, in pixels, below which a card panel is shown as a band. At
      * zero, it never is.
@@ -155,6 +169,17 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * the consumer slotted, or the button drawn in its place.
      */
     get navigationControl(): HTMLElement;
+    /**
+     * The arrows along a bar of megamenus that no component holds in a slot.
+     *
+     * Each megamenu's trigger is one stop, and a press counts only from a
+     * trigger, so an arrow among an open panel's links stays with the panel.
+     * Down and Up are reserved: Down enters an open panel. A megamenu whose
+     * parent is a component, and so holds it in a slot, passes no stops, so a
+     * `Navigation` around it decides the arrows, on or off, for every
+     * destination at once.
+     */
+    protected readonly keys: KeyboardNavigationController;
     /**
      * 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.
@@ -277,18 +302,10 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      *
      * Before the render rather than after it, because the popover controller
      * raises the panel from its own `hostUpdated`, which runs before `updated`:
-     * settled there, the two would be up together for a frame. The other closes
-     * through `requestOpen`, so a consumer holding it open is asked rather than
-     * overruled.
+     * settled there, the two would be up together for a frame. The bookkeeping
+     * is `HandOver`'s.
      */
     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. */
@@ -312,6 +329,13 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * has one reaches this without reimplementing the panel below it.
      */
     protected renderTrigger(): TemplateResult;
+    /**
+     * The mark under the trigger, while the panel is open. Rendered only then,
+     * so a mark of your own needs no rule to hide it while the panel is closed,
+     * and hidden from the accessibility tree: the trigger's `aria-expanded`
+     * already says the panel is open.
+     */
+    protected renderIndicator(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {