@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -24,10 +24,18 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * letters move it to the next option whose words start with them. In a
  * single-choice list the highlight is the choice unless `manual` is set; then
  * Enter, Space or a click chooses. With `multiple`, Space toggles the
- * highlighted option, Shift with an arrow adds the option it moves to, and
+ * highlighted option, Shift with an arrow adds the option it moves to, Shift
+ * with Home or End adds every option from the highlight to that end, and
  * Control+A or Command+A chooses every option, or none where all are chosen.
  * In a filter field, Space, Home, End and letters edit the text.
  *
+ * An option with `href` is a link: Enter or a press follows it and selects
+ * nothing, and moving onto it with the arrows does not follow it.
+ *
+ * As a filter narrows the list, a screen reader hears how many options are
+ * left, such as "3 results", from `result-label` and `results-label`. A filter
+ * that leaves none says `empty-text`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -35,10 +43,12 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @documentation https://fusion.dev/helix/components/listbox
  *
  * @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 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`.
  *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired when the value is about to change, and cancelable.
@@ -52,12 +62,14 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart hint - Help under the list.
  * @csspart items - The list of options.
  * @csspart label - The label above the list.
- * @csspart live - A copy of the empty and loading text, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty and loading text, and how many options a filter left, in a region that screen readers announce when it changes. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the options load.
  * @csspart search - The region that holds the filter field.
  * @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 invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;
@@ -104,6 +116,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * own search boxes would be three copies of one field.
      */
     filterable: boolean;
+    /**
+     * How long typing in the filter field rests before the list is filtered, in
+     * milliseconds. `0` filters on every keystroke.
+     *
+     * For a list filtered on a server, where `helix-filter` starts a request: a
+     * reader typing a word sends one request for the word, not one for each
+     * letter. Enter and the arrow keys filter at once on what is typed, so they
+     * act on the list the reader expects.
+     */
+    filterDelay: number;
     /**
      * Placeholder text for the filter field.
      */
@@ -121,6 +143,20 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Whether more than one option can be chosen.
      */
     multiple: boolean;
+    /**
+     * What a screen reader hears when a filter leaves one option. `{count}` is
+     * the count.
+     */
+    resultLabel: string;
+    /**
+     * What a screen reader hears when a filter leaves any other number of
+     * options. `{count}` is the count.
+     *
+     * **Two sentences, chosen by `Intl.PluralRules`**, which is Data Table's
+     * pair: a language with more forms than two picks the one for its `one` and
+     * writes the rest here.
+     */
+    resultsLabel: string;
     /**
      * Which option the keyboard is on, which is not what is chosen.
      */
@@ -189,6 +225,18 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * ArrowUp, and Combobox moves the highlight off the list onto its create row.
      */
     highlight(where: 'first' | 'last' | 'none' | 'selected'): void;
+    /**
+     * Says how many options a filter left, in the live region.
+     *
+     * **A reader typing into a filter cannot see the list narrow**, and React
+     * Aria and Web Awesome both say the count as it changes. Only "No matches"
+     * was said here, so a query that left forty options and one that left one
+     * sounded the same. Said when the filter changes and the count with it, so
+     * a keystroke that leaves the same options says nothing new. An empty filter
+     * says nothing, being the list as it was given; no matches is `empty-text`,
+     * which the region says in place of this.
+     */
+    private tell;
     /**
      * @internal Moves the highlight to the option whose words start with the
      * letters typed, and returns its value, or nothing where none matches.
@@ -376,6 +424,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * their answer moved when it did not is worse than telling them nothing.
      */
     private readonly handleFilter;
+    /** The filter waiting out `filterDelay`, if any. */
+    private readonly filtering;
+    /** Filters on what the field holds, and puts the field back where that was refused. */
+    private takeFilter;
+    /** Filters at once on a filter still waiting out `filterDelay`. */
+    private flushFilter;
     /** Requests a new filter, and returns whether the request went through. */
     requestFilter(next: string): boolean;
     /**
@@ -414,6 +468,23 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * cannot change.
      */
     protected renderFilterIcon(): TemplateResult;
+    /**
+     * Whether there is anything to show.
+     *
+     * Showing nothing is not the same as empty. A filter that hides every option
+     * is empty, and one with no filter and no options is empty too, but a list
+     * still waiting on its options is neither.
+     */
+    private get showsOptions();
+    /**
+     * The empty or loading line, with a slot for each so either can be richer
+     * than its text.
+     *
+     * **The text is the slot's fallback**, which is this library's rule for a
+     * content property, so `empty-text` still shows where nothing is slotted and
+     * the live region still says it.
+     */
+    protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, 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, 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';
@@ -68,9 +68,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.emptyText = 'No matches';
         this.filterState = undefined;
         this.filterable = false;
+        this.filterDelay = 0;
         this.filterLabel = 'Filter';
         this.manual = false;
         this.multiple = false;
+        this.resultLabel = '{count} result';
+        this.resultsLabel = '{count} results';
         this.activeValue = '';
         this.parked = false;
         this.typeahead = new Typeahead();
@@ -82,6 +85,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             items: () => this.options,
         });
         this.handleSelection = (event) => {
+            if (event.detail.href !== undefined) {
+                return;
+            }
             event.stopPropagation();
             if (event.defaultPrevented) {
                 return;
@@ -96,7 +102,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             }
             const typing = this.forwarded || event.composedPath()[0] === this.partNamed('search-field');
             if (event.key === 'Enter' || (event.key === ' ' && !typing && !this.typeahead.typing())) {
-                if (this.activeValue !== '') {
+                const link = shown.find((option) => option.value === this.activeValue && Boolean(option.href));
+                if (link !== undefined) {
+                    event.preventDefault();
+                    if (event.key === 'Enter') {
+                        link.select(event);
+                    }
+                }
+                else if (this.activeValue !== '') {
                     event.preventDefault();
                     this.choose(this.activeValue);
                 }
@@ -155,6 +168,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             const target = shown[next];
             if (target) {
                 this.arrive(target.value);
+                const ranged = event.key === 'Home' || event.key === 'End';
+                if (this.multiple && !typing && event.shiftKey && ranged) {
+                    const taken = rangeAdd(this.values, shown.map((option) => option.value), at, next);
+                    if (taken) {
+                        this.requestValue(taken.join(','));
+                    }
+                    return;
+                }
                 if (this.multiple && !typing && event.shiftKey && !this.values.includes(target.value)) {
                     this.choose(target.value);
                 }
@@ -163,16 +184,27 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.handleFilter = (event) => {
             event.stopPropagation();
             const control = event.target;
-            this.requestFilter(control.value);
-            if (control.value !== this.filter) {
-                control.value = this.filter;
+            this.filtering.cancel();
+            if (this.filterDelay > 0) {
+                this.filtering.start(this.filterDelay, () => this.takeFilter(control));
+                return;
             }
+            this.takeFilter(control);
         };
+        this.filtering = new DelayController(this, { renders: false });
         this.handleFilterKeydown = (event) => {
-            if (event.key === 'Escape' && this.filter !== '') {
+            if (event.key === 'Enter' || FIELD_MOVES.has(event.key)) {
+                this.flushFilter();
+            }
+            if (event.key === 'Escape' && (this.filter !== '' || this.filtering.pending)) {
                 event.stopPropagation();
                 event.preventDefault();
+                this.filtering.cancel();
                 this.requestFilter('');
+                const control = this.partNamed('search-field');
+                if (control && control.value !== this.filter) {
+                    control.value = this.filter;
+                }
                 return;
             }
             if (!FIELD_MOVES.has(event.key)) {
@@ -218,6 +250,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             this.place();
         }
     }
+    tell(changed) {
+        if (!changed.has('filter') || !this.hasUpdated) {
+            return;
+        }
+        const count = this.shown.length;
+        if (this.filter.trim() === '' || count === 0) {
+            this.announced = '';
+            return;
+        }
+        this.announced = countLabel(count, this.resultLabel, this.resultsLabel, this.lang);
+    }
     typeaheadTo(key) {
         const shown = this.shown.filter((option) => !option.disabled);
         const from = shown.findIndex((option) => option.value === this.currentValue);
@@ -294,7 +337,8 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     arrive(value) {
         this.parked = false;
         this.activeValue = value;
-        if (!this.multiple && !this.manual && !this.forwarded) {
+        const link = this.options.some((option) => option.value === value && Boolean(option.href));
+        if (!this.multiple && !this.manual && !this.forwarded && !link) {
             this.choose(value);
         }
     }
@@ -423,7 +467,10 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
         if (this.childrenKnown) {
             this.place();
+            this.tell(changed);
         }
+        this.toggleState('empty', !this.showsOptions);
+        this.toggleState('loading', this.loading);
     }
     seedDeclared() {
         if (this.owned || this.defaultValue !== '' || this.hasAttribute('default-value')) {
@@ -453,6 +500,16 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.sync();
         this.linkActive();
     }
+    takeFilter(control) {
+        this.filtering.cancel();
+        this.requestFilter(control.value);
+        if (control.value !== this.filter) {
+            control.value = this.filter;
+        }
+    }
+    flushFilter() {
+        this.filtering.flush();
+    }
     requestFilter(next) {
         if (next === this.filter) {
             return true;
@@ -480,12 +537,23 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
       </svg>
     </slot>`;
     }
-    render() {
-        const shown = this.counted && !this.loading
+    get showsOptions() {
+        return this.counted && !this.loading
             ? this.filter === ''
                 ? this.options.length > 0
                 : this.hasMatches
             : true;
+    }
+    renderStatus(hasContent) {
+        if (!this.loading && hasContent) {
+            return nothing;
+        }
+        return this.loading
+            ? html `<p part="loading"><slot name="loading">${this.loadingText}</slot></p>`
+            : html `<p part="empty"><slot name="empty">${this.emptyText}</slot></p>`;
+    }
+    render() {
+        const shown = this.showsOptions;
         return html `${this.renderGroupLabel()}
       ${this.filterable
             ? html `<div part="search">
@@ -542,6 +610,9 @@ __decorate([
 __decorate([
     property({ attribute: 'filterable', reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: 'filter-delay', type: Number })
+], HelixHeadlessListbox.prototype, "filterDelay", void 0);
 __decorate([
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
@@ -551,6 +622,12 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessListbox.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessListbox.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessListbox.prototype, "resultsLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessListbox.prototype, "activeValue", void 0);

package/dist/loader/busy.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Marks a region busy for as long as something is loading into it, and
+ * counts, so two loaders in one region do not clear each other.
+ *
+ * Beside the family's `index.ts`, because which element is busy and how many
+ * claims it holds is bookkeeping about elements, not about a loader's
+ * template.
+ */
+/**
+ * Adds a claim on the region, setting `aria-busy="true"` on the first.
+ *
+ * Only an `aria-busy` this file wrote is ever taken off again: a region the
+ * page marked busy itself keeps its own attribute.
+ */
+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;

package/dist/loader/busy.js

@@ -0,0 +1,24 @@
+const CLAIMS = new WeakMap();
+export const claimBusy = (region) => {
+    const held = CLAIMS.get(region) ?? 0;
+    if (held === 0 && region.getAttribute('aria-busy') === 'true') {
+        return;
+    }
+    CLAIMS.set(region, held + 1);
+    if (held === 0) {
+        region.setAttribute('aria-busy', 'true');
+    }
+};
+export const releaseBusy = (region) => {
+    const held = CLAIMS.get(region);
+    if (held === undefined) {
+        return;
+    }
+    if (held <= 1) {
+        CLAIMS.delete(region);
+        region.removeAttribute('aria-busy');
+    }
+    else {
+        CLAIMS.set(region, held - 1);
+    }
+};

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

@@ -19,6 +19,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * a `role` attribute on the host would be missing from React server-rendered
  * markup.
  *
+ * **`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.
+ *
+ * **`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.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -33,11 +42,39 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart track - The full circle behind the indicator.
  */
 export declare class HelixHeadlessLoader extends HelixElement {
+    /**
+     * How long the loader waits before it shows, in milliseconds, so work that
+     * finishes quickly never flashes one.
+     *
+     * Absent shows it at once. Hidden in the served markup too, so a page that
+     * loads quickly never draws it.
+     */
+    delay: number;
+    /**
+     * The id of the region being loaded, which is marked `aria-busy` while the
+     * loader is on the page.
+     *
+     * Names an element in the same tree. In React it arrives as a property, the
+     * way `Tooltip.for` does.
+     */
+    for: string;
     /**
      * The loader's name, announced by screen readers while the work is in
      * progress.
      */
     label: string;
+    /** The wait `delay` asks for, and whether it has run out. */
+    private readonly due;
+    /** The region this loader marked busy, so it is the one released. */
+    private region;
+    /** Whether the loader is still waiting out its `delay`. */
+    private get waiting();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Marks the region `for` names busy, releasing one it named before. */
+    private mark;
+    private release;
+    protected updated(changed: PropertyValues<this>): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -4,27 +4,76 @@ 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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, DelayController, elementById, HelixElement, hostAria, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { claimBusy, releaseBusy } from '../busy.js';
 let HelixHeadlessLoader = class HelixHeadlessLoader extends HelixElement {
     constructor() {
         super(...arguments);
+        this.delay = 0;
+        this.for = '';
         this.label = 'Loading';
+        this.due = new DelayController(this);
+        this.region = null;
+    }
+    get waiting() {
+        return this.delay > 0 && !this.due.elapsed;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.delay > 0 && !this.due.elapsed) {
+            this.due.start(this.delay);
+        }
+        requestAnimationFrame(() => this.mark());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.release();
+    }
+    mark() {
+        const region = this.isConnected && this.for !== '' ? elementById(this, this.for) : null;
+        if (region === this.region) {
+            return;
+        }
+        this.release();
+        if (region) {
+            claimBusy(region);
+            this.region = region;
+        }
+    }
+    release() {
+        if (this.region) {
+            releaseBusy(this.region);
+            this.region = null;
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('for') && changed.get('for') !== undefined) {
+            this.mark();
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'progressbar' });
         this.internals.ariaBusy = 'true';
+        this.internals.ariaHidden = this.waiting ? 'true' : null;
     }
     render() {
-        return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true">
+        return html `<svg part="svg" viewBox="0 0 24 24" aria-hidden="true" ?hidden=${this.waiting}>
         <circle part="track" cx="12" cy="12" r="10" fill="none" />
         <circle part="indicator" cx="12" cy="12" r="10" fill="none" />
       </svg>
-      <span part="mark" aria-hidden="true"><slot></slot></span>`;
+      <span part="mark" aria-hidden="true" ?hidden=${this.waiting}><slot></slot></span>`;
     }
 };
+__decorate([
+    property({ type: Number })
+], HelixHeadlessLoader.prototype, "delay", void 0);
+__decorate([
+    property()
+], HelixHeadlessLoader.prototype, "for", void 0);
 __decorate([
     property()
 ], HelixHeadlessLoader.prototype, "label", void 0);

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,13 @@ 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: the one opening is
+ * `:state(from-start)` or `:state(from-end)`, by where the one closing sits in
+ * the bar, and the one closing is `:state(to-start)` or `:state(to-end)`. A
+ * stylesheet slides them on that. Put megamenus in a `Navigation` with
+ * `arrows` and the arrow keys move between their triggers.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -38,8 +45,12 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  *
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
  *
+ * @cssstate from-end - The panel opened in place of one later in the bar, so it can enter from that side.
+ * @cssstate from-start - The panel opened in place of one earlier in the bar.
  * @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 later in the bar opened, so it can leave toward it.
+ * @cssstate to-start - The panel closed because one earlier in the bar opened.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     /**
@@ -119,6 +130,11 @@ 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;
     /** Shuts it and puts the reader back where they were. */
     private close;
     /**
@@ -241,6 +257,11 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
      * overruled.
      */
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Says which way the reader moved when one panel took over from another.
+     * Nothing clears all four, for a panel opened on its own.
+     */
+    private motion;
     protected updated(changed: PropertyValues): void;
     /**
      * The control that opens it, behind a seam the styled tier can move.

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

@@ -117,6 +117,9 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
     get trigger() {
         return anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this.partNamed('trigger') ?? this);
     }
+    get navigationControl() {
+        return this.trigger;
+    }
     close() {
         if (!this.requestOpen(false)) {
             return;
@@ -184,8 +187,13 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             return;
         }
         if (this.open) {
-            if (showing && showing !== this) {
-                showing.requestOpen(false);
+            const previous = showing && showing !== this ? showing : undefined;
+            const forward = previous !== undefined &&
+                (previous.compareDocumentPosition(this) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+            this.motion(previous ? (forward ? 'from-end' : 'from-start') : undefined);
+            if (previous) {
+                previous.motion(forward ? 'to-end' : 'to-start');
+                previous.requestOpen(false);
             }
             showing = this;
         }
@@ -193,6 +201,12 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
             showing = undefined;
         }
     }
+    motion(to) {
+        this.toggleState('from-end', to === 'from-end');
+        this.toggleState('from-start', to === 'from-start');
+        this.toggleState('to-end', to === 'to-end');
+        this.toggleState('to-start', to === 'to-start');
+    }
     updated(changed) {
         super.updated?.(changed);
         if (changed.has('bandBelow')) {