@fusion.dev/helix-headless 0.145.0 → 0.147.0

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

@@ -27,7 +27,9 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * 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.
+ * In a filter field, Space, Home, End and letters edit the text, and with
+ * `multiple`, Control with Shift and Home or End adds every option from the
+ * highlight to that end.
  *
  * 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.
@@ -44,18 +46,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 +74,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 +138,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 +159,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.
@@ -265,7 +288,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     get options(): HelixHeadlessOption[];
     /**
-     * Walks the tree, and walks *through* a slot when it meets one.
+     * The elements of one kind in the list: its options, its groups or its
+     * rules. Walks the tree, and walks *through* a slot when it meets one.
      *
      * Through a slot because that is how this gets composed. `Select` renders a
      * listbox in its own shadow root with a slot inside it, so the options are
@@ -273,7 +297,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * `querySelectorAll` finds the slot and no options at all, and the whole
      * component comes up empty.
      */
-    private collect;
+    private among;
     /** The groups, found the same way and for the same reason. */
     private get groups();
     /** The options a filter has left showing. */
@@ -430,6 +454,15 @@ 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`, by core's `endInSight`, the rule Virtual List asks too: 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 +518,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,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, countLabel, customElement, DelayController, DisabledCascadeController, HelixFilterEvent, HelixFormElement, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, countLabel, customElement, DelayController, DisabledCascadeController, endInSight, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, 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';
@@ -70,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';
@@ -118,11 +119,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 return;
             }
-            if (this.multiple &&
-                !typing &&
-                event.key.toLowerCase() === 'a' &&
-                (event.ctrlKey || event.metaKey) &&
-                !event.altKey) {
+            if (this.multiple && !typing && selectsAll(event)) {
                 event.preventDefault();
                 const reachable = shown.map((option) => option.value);
                 const all = reachable.every((value) => this.values.includes(value));
@@ -138,7 +135,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 return;
             }
-            if (!(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const fieldRange = typing &&
+                this.multiple &&
+                event.shiftKey &&
+                (event.ctrlKey || event.metaKey) &&
+                (event.key === 'Home' || event.key === 'End');
+            if (!fieldRange && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
@@ -169,7 +171,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             if (target) {
                 this.arrive(target.value);
                 const ranged = event.key === 'Home' || event.key === 'End';
-                if (this.multiple && !typing && event.shiftKey && ranged) {
+                if (this.multiple && (!typing || fieldRange) && event.shiftKey && ranged) {
                     const taken = rangeAdd(this.values, shown.map((option) => option.value), at, next);
                     if (taken) {
                         this.requestValue(taken.join(','));
@@ -192,6 +194,22 @@ 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 ||
+                !endInSight({
+                    askedAt: this.askedAt,
+                    count,
+                    remaining: items.scrollHeight - items.scrollTop - items.clientHeight,
+                    screen: items.clientHeight,
+                })) {
+                return;
+            }
+            this.askedAt = count;
+            this.dispatchEvent(new HelixLoadMoreEvent());
+        };
         this.handleFilterKeydown = (event) => {
             if (event.key === 'Enter' || FIELD_MOVES.has(event.key)) {
                 this.flushFilter();
@@ -280,40 +298,24 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.multiple ? 'select-multiple' : 'select-one';
     }
     get options() {
-        return this.collect(this.children);
+        return this.among((node) => node instanceof HelixHeadlessOption, this.children);
     }
-    collect(nodes) {
+    among(is, nodes) {
         const found = [];
         for (const node of nodes) {
-            if (node instanceof HelixHeadlessOption) {
+            if (is(node)) {
                 found.push(node);
             }
-            else if (node instanceof HTMLSlotElement) {
-                found.push(...this.collect(node.assignedElements({ flatten: true })));
-            }
             else {
-                found.push(...this.collect(node.children));
+                found.push(...this.among(is, node instanceof HTMLSlotElement
+                    ? node.assignedElements({ flatten: true })
+                    : node.children));
             }
         }
         return found;
     }
     get groups() {
-        const found = [];
-        const walk = (nodes) => {
-            for (const node of nodes) {
-                if (node instanceof HelixHeadlessOptionGroup) {
-                    found.push(node);
-                }
-                if (node instanceof HTMLSlotElement) {
-                    walk(node.assignedElements({ flatten: true }));
-                }
-                else {
-                    walk(node.children);
-                }
-            }
-        };
-        walk(this.children);
-        return found;
+        return this.among((node) => node instanceof HelixHeadlessOptionGroup, this.children);
     }
     get shown() {
         return this.options.filter((option) => !option.hidden);
@@ -385,9 +387,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
-            const inside = this.collect(group.children);
+            const inside = this.among((node) => node instanceof HelixHeadlessOption, group.children);
             group.hidden = inside.length > 0 && inside.every((option) => option.hidden);
         }
+        for (const rule of this.among((node) => node.localName.endsWith('-option-separator'), this.children)) {
+            rule.hidden = needle !== '';
+        }
         const shown = this.shown;
         const rescue = !this.parked && (needle !== '' || this.activeValue !== '');
         if (rescue && !shown.some((option) => option.value === this.activeValue)) {
@@ -471,6 +476,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')) {
@@ -545,13 +552,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()}
@@ -588,6 +619,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)}
@@ -616,12 +648,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/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);
+            }
+        }
+    }
+}