@fusion.dev/helix-headless 0.105.0 → 0.106.0

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

@@ -4,15 +4,67 @@ 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, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
+import { customElement, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } 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';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
+const iconOf = (layer) => {
+    switch (layer?.layerKind) {
+        case 'route':
+            return path;
+        case 'area':
+            return polygon;
+        case 'points':
+            return dotsNine;
+        case 'buildings':
+            return buildings;
+        case 'terrain':
+            return mountains;
+        case 'contours':
+            return target;
+        case 'landcover':
+            return leaf;
+        case 'raster':
+            return cloudRain;
+        default:
+            return stack;
+    }
+};
+const ROTATE_STEP = 15;
+const TILT_STEP = 10;
+const TILTED = 50;
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
+        this.bearing = 0;
         this.cluster = false;
+        this.faceNorthLabel = 'Face north';
+        this.hybridLabel = 'Hybrid';
         this.label = '';
-        this.layersLabel = 'Routes, areas, and points';
+        this.layersLabel = 'Map layers';
+        this.mapPreviews = {};
+        this.mapTypeLabel = 'Map type';
+        this.pitch = 0;
+        this.rotateLeftLabel = 'Rotate left';
+        this.rotateRightLabel = 'Rotate right';
+        this.satelliteLabel = 'Satellite';
+        this.standardLabel = 'Standard';
+        this.tiltLabel = 'Show in 3D';
+        this.layersOpen = false;
+        this.handleOutside = (event) => {
+            if (!event.composedPath().includes(this)) {
+                this.layersOpen = false;
+            }
+        };
+        this.handleMenuKeydown = (event) => {
+            event.stopPropagation();
+            if (event.key === 'Escape' && this.layersOpen) {
+                this.layersOpen = false;
+                this.renderRoot.querySelector('[part="layers-toggle"]')?.focus();
+            }
+        };
         this.handlePartChange = (event) => {
             if (event.detail.kind !== 'place') {
                 this.requestUpdate();
@@ -70,6 +122,40 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     get layers() {
         return this.knownChildren.filter((child) => child.isMapLayer === true);
     }
+    get imagery() {
+        return this.layers.filter((layer) => layer.layerKind === 'raster' && layer.ground === true);
+    }
+    nameOf(type) {
+        return type === 'hybrid'
+            ? this.hybridLabel
+            : type === 'satellite'
+                ? this.satelliteLabel
+                : this.standardLabel;
+    }
+    showLayers(layers, shown) {
+        for (const layer of layers) {
+            layer.hidden = !shown;
+        }
+        this.requestUpdate();
+    }
+    get layerEntries() {
+        const entries = [];
+        const groups = new Map();
+        const imagery = this.imagery;
+        for (const layer of this.layers.filter((one) => !imagery.includes(one))) {
+            const had = layer.group ? groups.get(layer.group) : undefined;
+            if (had) {
+                had.push(layer);
+                continue;
+            }
+            const entry = [layer];
+            entries.push(entry);
+            if (layer.group) {
+                groups.set(layer.group, entry);
+            }
+        }
+        return entries;
+    }
     get markers() {
         return this.knownChildren.filter((child) => child.isMapMarker === true);
     }
@@ -92,9 +178,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('keydown', this.handleMarkerKeydown);
         this.addEventListener('keyup', this.handleMarkerKeyup);
+        this.hiding = new MutationObserver(() => this.requestUpdate());
+        this.hiding.observe(this, { attributeFilter: ['hidden'], attributes: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.hiding?.disconnect();
+        document.removeEventListener('pointerdown', this.handleOutside);
         this.removeEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusIn);
@@ -103,6 +193,23 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     }
     updated(changed) {
         super.updated(changed);
+        const photographed = this.mapType !== undefined;
+        for (const layer of this.imagery) {
+            if (layer.hidden === photographed) {
+                layer.hidden = !photographed;
+            }
+        }
+        if (changed.has('mapType')) {
+            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+        }
+        if (changed.has('layersOpen')) {
+            if (this.layersOpen) {
+                document.addEventListener('pointerdown', this.handleOutside);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.handleOutside);
+            }
+        }
         const markers = this.markers;
         const on = markers[Math.min(this.stop, markers.length - 1)];
         const stop = on?.gatheredBy ?? on;
@@ -113,6 +220,208 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'place' }));
         }
     }
+    rotate(by) {
+        this.dispatchEvent(new HelixMapRotateEvent({ by }));
+    }
+    faceNorth() {
+        this.dispatchEvent(new HelixMapRotateEvent({ to: 0 }));
+    }
+    tilt(by) {
+        this.dispatchEvent(new HelixMapTiltEvent({ by }));
+    }
+    tiltTo(to) {
+        this.dispatchEvent(new HelixMapTiltEvent({ to }));
+    }
+    renderLayersMenu() {
+        const layers = this.layers;
+        if (!this.drawsControls('layers') || layers.length === 0) {
+            return nothing;
+        }
+        const entries = this.layerEntries;
+        return html `<button
+        part="layers-toggle"
+        aria-controls="layers-menu"
+        aria-expanded=${this.layersOpen ? 'true' : 'false'}
+        aria-label=${this.layersLabel}
+        type="button"
+        @click=${() => {
+            this.layersOpen = !this.layersOpen;
+            if (this.layersOpen) {
+                this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'menu' }));
+            }
+        }}
+        @keydown=${this.handleMenuKeydown}
+      >
+        <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
+          ${unsafeSVG(stack.content)}
+        </svg>
+      </button>
+      <div
+        part="layers-menu"
+        id="layers-menu"
+        role="group"
+        aria-label=${this.layersLabel}
+        ?hidden=${!this.layersOpen}
+        @keydown=${this.handleMenuKeydown}
+      >
+        ${this.imagery.length > 0 ? this.renderMapTypes() : nothing}
+        ${entries.length > 0
+            ? html `<div part="layer-choices">
+                ${entries.map((entry) => {
+                const shown = entry.some((layer) => !layer.hidden);
+                return html `<button
+                    part="layer-choice"
+                    aria-pressed=${shown ? 'true' : 'false'}
+                    type="button"
+                    @click=${() => this.showLayers(entry, !shown)}
+                  >
+                    <svg part="layer-icon" aria-hidden="true" fill="currentColor" viewBox=${iconOf(entry[0]).viewBox}>
+                      ${unsafeSVG(iconOf(entry[0]).content)}
+                    </svg>
+                    <span part="layer-name">${entry[0]?.label ?? ''}</span>
+                  </button>`;
+            })}
+              </div>`
+            : nothing}
+      </div>`;
+    }
+    renderMapTypes() {
+        const chosen = this.mapType ?? 'standard';
+        return html `<div part="map-types" role="radiogroup" aria-label=${this.mapTypeLabel}>
+      ${MAP_TYPES.map((type) => {
+            const preview = this.mapPreviews[type];
+            return html `<label part="map-type">
+          <input
+            type="radio"
+            name="map-type"
+            .checked=${chosen === type}
+            @change=${() => {
+                this.mapType = type === 'standard' ? undefined : type;
+            }}
+          />
+          ${preview
+                ? html `<img part="map-type-preview" alt="" src=${preview} />`
+                : html `<span part="map-type-preview"></span>`}
+          <span part="map-type-name">${this.nameOf(type)}</span>
+        </label>`;
+        })}
+    </div>`;
+    }
+    renderCompass(pan, rotate) {
+        return html `<div part="compass">
+      ${rotate
+            ? html `<button part="rotate-left" aria-label=${this.rotateLeftLabel} type="button" @click=${() => this.rotate(-ROTATE_STEP)}>
+              ↺
+            </button>`
+            : nothing}
+      ${pan
+            ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+              ${this.panGlyph('up')}
+            </button>`
+            : nothing}
+      ${rotate
+            ? html `<button part="rotate-right" aria-label=${this.rotateRightLabel} type="button" @click=${() => this.rotate(ROTATE_STEP)}>
+              ↻
+            </button>`
+            : nothing}
+      ${pan
+            ? html `<button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+              ${this.panGlyph('start')}
+            </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>
+      </button>
+      ${pan
+            ? html `<button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+              ${this.panGlyph('end')}
+            </button>`
+            : nothing}
+      ${pan
+            ? html `<button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+              ${this.panGlyph('down')}
+            </button>`
+            : nothing}
+    </div>`;
+    }
+    renderControls() {
+        const pan = this.drawsControls('pan');
+        const zoom = this.drawsControls('zoom');
+        const rotate = this.drawsControls('rotate');
+        const tilt = this.drawsControls('tilt');
+        const fullscreen = this.drawsControls('fullscreen');
+        const menu = this.renderLayersMenu();
+        if (!pan && !zoom && !rotate && !tilt && !fullscreen && menu === nothing) {
+            return nothing;
+        }
+        return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
+      ${fullscreen
+            ? html `<button
+              part="fullscreen"
+              aria-label=${this.fullscreenLabel}
+              aria-pressed=${this.filled ? 'true' : 'false'}
+              type="button"
+              @click=${this.toggleFullscreen}
+            >
+              ⤢
+            </button>`
+            : nothing}
+      ${menu}
+      ${tilt
+            ? html `<button
+              part="tilt"
+              aria-label=${this.tiltLabel}
+              aria-pressed=${this.pitch > 0 ? 'true' : 'false'}
+              type="button"
+              @click=${() => this.tiltTo(this.pitch > 0 ? 0 : TILTED)}
+            >
+              3D
+            </button>`
+            : nothing}
+      ${zoom
+            ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
+                +
+              </button>
+              <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
+                −
+              </button>`
+            : nothing}
+      ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
+    </div>`;
+    }
+    get restingControls() {
+        return 'zoom compass fullscreen';
+    }
+    get drawsCompass() {
+        return ['compass', 'pan', 'rotate'].some((group) => this.drawsControls(group));
+    }
+    get keyShortcuts() {
+        const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Plus', 'Minus'];
+        if (this.drawsCompass) {
+            keys.push('Shift+ArrowLeft', 'Shift+ArrowRight');
+        }
+        if (this.drawsControls('tilt')) {
+            keys.push('Shift+ArrowUp', 'Shift+ArrowDown');
+        }
+        return keys.join(' ');
+    }
+    handleMoreKeys(event) {
+        if (!event.shiftKey) {
+            return false;
+        }
+        if (this.drawsCompass && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            this.rotate(event.key === 'ArrowLeft' ? -ROTATE_STEP : ROTATE_STEP);
+            return true;
+        }
+        if (this.drawsControls('tilt') && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            this.tilt(event.key === 'ArrowUp' ? TILT_STEP : -TILT_STEP);
+            return true;
+        }
+        return false;
+    }
     panEvent(detail) {
         return new HelixMapPanEvent(detail);
     }
@@ -129,7 +438,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.toggleState('idle', this.resting);
     }
     renderLayers() {
-        const layers = this.layers;
+        const layers = this.layers.filter((layer) => !layer.hidden);
         if (layers.length === 0) {
             return nothing;
         }
@@ -142,7 +451,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
       part="region"
       role="group"
       aria-label=${this.label || 'Map'}
-      aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
+      aria-keyshortcuts=${this.keyShortcuts}
       tabindex="0"
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
@@ -166,15 +475,54 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     </div>`;
     }
 };
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMap.prototype, "bearing", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMap.prototype, "cluster", void 0);
+__decorate([
+    property({ attribute: 'face-north-label' })
+], HelixHeadlessMap.prototype, "faceNorthLabel", void 0);
+__decorate([
+    property({ attribute: 'hybrid-label' })
+], HelixHeadlessMap.prototype, "hybridLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessMap.prototype, "label", void 0);
 __decorate([
     property({ attribute: 'layers-label' })
 ], HelixHeadlessMap.prototype, "layersLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessMap.prototype, "mapPreviews", void 0);
+__decorate([
+    property({ attribute: 'map-type', reflect: true })
+], HelixHeadlessMap.prototype, "mapType", void 0);
+__decorate([
+    property({ attribute: 'map-type-label' })
+], HelixHeadlessMap.prototype, "mapTypeLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMap.prototype, "pitch", void 0);
+__decorate([
+    property({ attribute: 'rotate-left-label' })
+], HelixHeadlessMap.prototype, "rotateLeftLabel", void 0);
+__decorate([
+    property({ attribute: 'rotate-right-label' })
+], HelixHeadlessMap.prototype, "rotateRightLabel", void 0);
+__decorate([
+    property({ attribute: 'satellite-label' })
+], HelixHeadlessMap.prototype, "satelliteLabel", void 0);
+__decorate([
+    property({ attribute: 'standard-label' })
+], HelixHeadlessMap.prototype, "standardLabel", void 0);
+__decorate([
+    property({ attribute: 'tilt-label' })
+], HelixHeadlessMap.prototype, "tiltLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessMap.prototype, "layersOpen", void 0);
 __decorate([
     state()
 ], HelixHeadlessMap.prototype, "stop", void 0);

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

@@ -39,6 +39,12 @@ export declare class HelixHeadlessMapRoute extends HelixElement {
      * in the frame's list.
      */
     description?: string;
+    /**
+     * A name this layer shares with other layers, such as a route and its
+     * dotted legs. The layers menu shows layers in the same group as one entry,
+     * named by the first of them, and its checkbox shows or hides them all.
+     */
+    group?: string;
     /** Marks this as a layer for the frame and the connector, whatever its tag. */
     readonly isMapLayer = true;
     /** @internal Which kind of layer, which is how the connector draws it. */

package/dist/map/route/map-route.js

@@ -34,6 +34,9 @@ let HelixHeadlessMapRoute = class HelixHeadlessMapRoute extends HelixElement {
 __decorate([
     property()
 ], HelixHeadlessMapRoute.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapRoute.prototype, "group", void 0);
 __decorate([
     property()
 ], HelixHeadlessMapRoute.prototype, "label", void 0);

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

@@ -0,0 +1,68 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+/** How an elevation tile stores its heights in its colors. */
+export type MapTerrainEncoding = 'mapbox' | 'terrarium';
+/**
+ * @summary Hills and mountains on a map, shaded and raised in 3D.
+ *
+ * @description
+ * `connectMap` shades the land by its slopes, from elevation tiles, so hills
+ * and valleys show on a flat map. Set `raised` to raise the ground to its real
+ * height as well, and tilt the map to see it. Routes, areas, and buildings lie
+ * on the raised ground.
+ *
+ * Set `src` to an elevation tile URL with `{z}`, `{x}`, and `{y}` in it, and
+ * `encoding` to how its tiles store heights: `terrarium`, the default, or
+ * `mapbox`. Set `max-zoom` to the deepest zoom the provider has tiles for.
+ * Put the provider's credit in `attribution`.
+ *
+ * MapLibre draws the terrain. Leaflet draws maps flat, so a Leaflet map shows
+ * none. The frame lists the layer by its `label` for screen readers.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Terrain, Hillshade, Elevation, Relief
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The tiles, how the ground is raised, or the layer's name or colors changed. Used by `connectMap`; pages do not need to listen for it.
+ */
+export declare class HelixHeadlessMapTerrain extends HelixElement {
+    /** The elevation provider's credit, shown in the frame's footer. Links in it stay links. */
+    attribution?: string;
+    /** More about the terrain. Read after the label in the frame's list. */
+    description?: string;
+    /** How the tiles store heights in their colors: `terrarium` or `mapbox`. */
+    encoding: MapTerrainEncoding;
+    /** How many times its real height the ground is raised, where `raised` is set. */
+    exaggeration: number;
+    /**
+     * A name this layer shares with other layers, such as a route and its
+     * dotted legs. The layers menu shows layers in the same group as one entry,
+     * named by the first of them, and its checkbox shows or hides them all.
+     */
+    group?: string;
+    /** Marks this as a layer for the frame and the connector, whatever its tag. */
+    readonly isMapLayer = true;
+    /** @internal Which kind of layer, which is how the connector draws it. */
+    readonly layerKind: 'terrain';
+    /** The layer's name in the frame's list. */
+    label: string;
+    /**
+     * The deepest zoom the provider has tiles for. The map enlarges those tiles
+     * at deeper zooms, where it would otherwise ask for tiles that do not exist.
+     */
+    maxZoom?: number;
+    /** Raises the ground to its real height in 3D. Tilt the map to see it. */
+    raised: boolean;
+    /** One elevation tile URL with `{z}`, `{x}`, and `{y}` in it. */
+    src?: string;
+    /** Tells the frame and the connector the layer changed. */
+    protected updated(changed: PropertyValues): void;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-terrain': HelixHeadlessMapTerrain;
+    }
+}

package/dist/map/terrain/map-terrain.js

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+let HelixHeadlessMapTerrain = class HelixHeadlessMapTerrain extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.encoding = 'terrarium';
+        this.exaggeration = 1;
+        this.isMapLayer = true;
+        this.layerKind = 'terrain';
+        this.label = 'Terrain';
+        this.raised = false;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMapTerrain.prototype, "attribution", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapTerrain.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapTerrain.prototype, "encoding", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMapTerrain.prototype, "exaggeration", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapTerrain.prototype, "group", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapTerrain.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'max-zoom', type: Number })
+], HelixHeadlessMapTerrain.prototype, "maxZoom", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMapTerrain.prototype, "raised", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapTerrain.prototype, "src", void 0);
+HelixHeadlessMapTerrain = __decorate([
+    customElement('helix-headless-map-terrain')
+], HelixHeadlessMapTerrain);
+export { HelixHeadlessMapTerrain };

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

@@ -2,23 +2,23 @@ import { HelixElement, PopoverController } from '@fusion.dev/helix-core';
 import { 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 that opens a panel of destinations.
+ * @summary A section of a navigation with a trigger that opens a panel of links.
  *
  * @description
- * **A disclosure, not a menu, and that is the whole design.** `role="menu"` and
- * `menuitem` are for an application's commands: they take over the arrow keys,
- * announce "menu" to a reader who asked for navigation, and put every link
- * inside a role that is not a link. This is a button that shows and hides a
- * region of the consumer's own anchors, which leaves a middle click, a modified
- * click and the status bar working. `Menu` remains right for a row of commands.
+ * A disclosure: a button that shows and hides a region of your own links. It
+ * does not use `role="menu"` or `menuitem`, which are for application commands.
+ * Those roles take over the arrow keys, announce "menu" to someone looking for
+ * navigation, and put every link inside a role that is not a link. As a
+ * disclosure, middle clicks, modified clicks, and the status bar keep working.
+ * Use `Menu` for a row of commands.
  *
- * **It renders no links.** A router renders its own anchor and cannot render
- * one inside this shadow root, so the panel is a slot and what goes in it is
- * the lists and headings the consumer wrote.
+ * It renders no links. A router renders its own anchors and cannot render them
+ * inside this shadow root, so the panel is a slot for the lists and headings
+ * you write.
  *
- * **It opens on hover, and a press is always the fallback.** `open-on` says
- * which, and hover is the resting value because a nav bar is where a reader
- * expects to sweep along a row and see each section.
+ * 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.
  *
  * @since 0.1.0
  * @status stable
@@ -26,24 +26,25 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @aliases Mega menu, Flyout, Nav panel
  * @documentation https://fusion.dev/helix/components/megamenu
  *
- * @slot - The panel's contents: the consumer's own lists and headings.
- * @slot trigger - The control that opens it. Falls back to a button named by `label`.
+ * @slot - The panel's contents, such as your own lists of links and their headings.
+ * @slot trigger - The control that opens the panel. When it is empty, a button named by `label` is shown.
  *
- * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
- * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ * @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 {Event} toggle - The panel opened or closed. Carries `newState` and `oldState`.
  *
- * @csspart surface - The floating panel, which is what opens.
- * @csspart trigger - The default trigger, where none was slotted.
+ * @csspart surface - The floating panel that opens.
+ * @csspart trigger - The default trigger button, shown when the `trigger` slot is empty.
  *
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
  *
- * @cssstate narrow - While the page is under `band-below`, so the panel is a band whether or not one was asked for.
- * @cssstate open - While the panel is open, which is when the trigger reads as current.
+ * @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.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     /**
-     * The width, in pixels, under which a card becomes a band. Zero never does.
+     * The page width, in pixels, below which a card panel is shown as a band. At
+     * zero, it never is.
      *
      * A card is a panel hung off one word, and there is no room to hang anything
      * off a word on a phone: the columns do not shrink past
@@ -69,11 +70,12 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      */
     bandBelow: number;
     /**
-     * The section's name, which names the default trigger and the panel.
+     * The section's name, used for the default trigger and the panel.
      */
     label: string;
     /**
-     * Whether hovering the trigger opens the panel, or only a press does.
+     * Whether hovering over the trigger opens the panel (`hover`), or only a press
+     * does (`click`).
      *
      * A press always works. This says whether a mouse also opens it by resting on
      * the trigger, and it is the default because that is what a navigation bar