@rak200/ui 0.2.16 → 0.2.18

package/dist/menu.js

@@ -0,0 +1,597 @@
+import { LitElement, css, html } from 'lit';
+import { place } from './placement.js';
+import { reference } from './reference.js';
+/**
+ * The panel's id, and it needs no counter behind it.
+ *
+ * `src/tooltip.ts` and `src/field.ts` both number theirs, because the elements they point
+ * at are the host's and share the document's tree scope. Both ends of this reference are
+ * rendered here, so the id is scoped to one shadow root and two menus on a page cannot
+ * collide — which is the same property that lets `aria-controls` resolve at all.
+ */
+const panelId = 'menu';
+/** Which way the panel went, for a host that wants to select on it. */
+const side = 'data-side';
+/**
+ * How long a typeahead buffer survives a pause, in milliseconds.
+ *
+ * Not a token, for the reason the dwell in `src/toast.ts` is not one: every
+ * `--ui-duration-*` name collapses under reduced motion, and this is a reader's typing
+ * rhythm rather than a movement. Half a second is the interval the platform's own
+ * `<select>` typeahead uses.
+ */
+const rhythm = 500;
+/** The namespace an svg has to be created in, which `document.createElement` does not use. */
+const svgNS = 'http://www.w3.org/2000/svg';
+/** One of the component's slots — named, or the default one when the name is empty. */
+function slot(name = '') {
+    return Object.assign(document.createElement('slot'), { name });
+}
+/**
+ * The chevron, drawn here rather than imported from `src/icons/`.
+ *
+ * A component may not require a host to import a glyph module in order for its own control
+ * to have a mark — the argument `src/toast.ts` makes beside its dismiss cross. It is the
+ * adopted set's geometry on the adopted set's grid, so it reads as one of them, and it
+ * turns over when the menu opens because a caret that never moves says nothing.
+ */
+function caret() {
+    const mark = document.createElementNS(svgNS, 'svg');
+    const stroke = document.createElementNS(svgNS, 'path');
+    stroke.setAttribute('d', 'm6 9 6 6 6-6');
+    mark.setAttribute('viewBox', '0 0 24 24');
+    mark.setAttribute('fill', 'none');
+    mark.setAttribute('stroke', 'currentColor');
+    mark.setAttribute('stroke-linecap', 'round');
+    mark.setAttribute('stroke-linejoin', 'round');
+    // The name is the trigger's own text; a mark repeating it is a second thing to hear.
+    mark.setAttribute('aria-hidden', 'true');
+    mark.append(stroke);
+    return mark;
+}
+/**
+ * A menu button: one trigger, one menu, and the ARIA relationship between them.
+ *
+ * **The trigger is rendered here rather than slotted, which is the opposite of every other
+ * component in this kit** — and the reason is the one issue #23 gave: the relationship
+ * cannot be miswired by a consumer if the consumer never writes it. `aria-haspopup`,
+ * `aria-expanded` and `aria-controls` all live on an element this file owns, pointing at
+ * another element this file owns, inside one tree scope where an IDREF resolves.
+ *
+ * **The items stay yours.** They are native `<button>`s and `<a href>`s in your tree, so
+ * activation, the accessible name and the disabled state are the platform's; this file
+ * writes `role="menuitem"` and a tabindex on them and nothing else. Containment is what
+ * crosses the boundary here — a slotted item really is inside the `role="menu"` panel,
+ * which `ARCHITECTURE.md` records under `<ui-toaster>` and which a reference could not do.
+ *
+ * ## What the platform does, and what is left
+ *
+ * The panel is `popover="auto"`, and that is most of the pattern. Measured, in this
+ * component's own arrangement: it takes the top layer, it light-dismisses on a click
+ * elsewhere, and **Escape closes it** — which is where `<ui-tooltip>` had to write a key
+ * handler, because a `manual` popover does not. An `auto` popover also closes any other
+ * open one, which is right for a menu and was exactly wrong for a tip.
+ *
+ * What the platform does **not** give, measured in the same run:
+ *
+ * - **Focus does not come back.** With the trigger in this shadow root and the focus on a
+ *   slotted item, Escape leaves the focus on `<body>` rather than returning it — the same
+ *   arrangement in one flat tree does return it. So the return trip is written here, and
+ *   only where the reader did not choose to go elsewhere: a click outside the menu has
+ *   already put the focus where it belongs.
+ * - **`aria-expanded`, `role` and the tabindex.** An invoker gets no attribute of its own.
+ * - **The single tab stop, and the keys inside it.** Every item is a real button, so
+ *   without a tabindex the menu is a row of tab stops rather than an APG menu.
+ *
+ * ## Why this did not bring Zag either
+ *
+ * RFC 0016 adopted Zag for behaviour, `ROADMAP.md` named this component as the nearest
+ * candidate, and Zag ships a menu machine — so this is a refusal rather than an absence of
+ * an option, and it is the fourth. `ARCHITECTURE.md` carries it; the short form is that the
+ * test asks where the **accessible behaviour** is the expensive part, and the measurement
+ * above splits it: the layer, the dismissal, Escape and the ordering against other open
+ * layers are all the platform's. What is left is a roving tabindex and four keys, which the
+ * `<ui-radio-group>` refusal already named as not the trigger.
+ *
+ * The second reason is the issue's own: Zag's menu positions through `@zag-js/popper`,
+ * which is Floating UI. Adopting it would put a second placement in a package whose first
+ * one is measured, documented and shared — and *two answers to one problem is one too
+ * many* is the issue's sentence, not this file's.
+ *
+ * @example
+ * ```html
+ * <ui-menu>
+ *   <span slot="trigger">Actions</span>
+ *   <button type="button">Rename</button>
+ *   <hr />
+ *   <button type="button" disabled>Delete</button>
+ * </ui-menu>
+ * ```
+ */
+export class UiMenu extends LitElement {
+    static { this.styles = css `
+        :host {
+            display: inline-block;
+        }
+
+        /* The trigger is a secondary ui-button, written out rather than shared — the same
+           trade src/select.ts made against ui-input's box, and answered the same way: the
+           duplication is real, and tests/menu.test.ts measures this box against that one
+           rather than trusting the two to stay in step. Sharing would mean either slotting
+           a ui-button, which puts the ARIA relationship back in the consumer's hands, or a
+           mixin, which is a second inheritance axis for one rule set. */
+        button {
+            display: inline-flex;
+            align-items: center;
+            gap: calc(${reference('--ui-space')} / 2);
+            font: inherit;
+            font-family: ${reference('--ui-font')};
+            border: 1px solid currentcolor;
+            border-radius: ${reference('--ui-radius')};
+            padding: ${reference('--ui-space')} calc(${reference('--ui-space')} * 2);
+            background: ${reference('--ui-color-surface')};
+            color: ${reference('--ui-color-text')};
+            cursor: pointer;
+            -webkit-tap-highlight-color: transparent;
+            transition: background-color ${reference('--ui-duration-state')}
+                ${reference('--ui-easing-state')};
+        }
+
+        button:hover {
+            background: ${reference('--ui-color-hover')};
+        }
+
+        /* Zero rather than a second token, for the reason src/button.ts states beside its
+           own: a press is over in about 100ms, so an entering transition of 150ms would
+           land after the finger has left. */
+        button:active {
+            background: ${reference('--ui-color-pressed')};
+            transition-duration: 0s;
+        }
+
+        button:focus-visible {
+            outline: 2px solid ${reference('--ui-color-focus')};
+            outline-offset: 2px;
+        }
+
+        /* One dimension, not two: an svg carrying a viewBox is a replaced element with an
+           intrinsic ratio, so a square glyph given a width takes the same height from it.
+           src/toast.ts carries the measurement that made this a rule. */
+        svg {
+            flex: none;
+            inline-size: ${reference('--ui-icon-size')};
+            stroke-width: ${reference('--ui-icon-stroke')};
+            color: ${reference('--ui-color-text-muted')};
+            transition: rotate ${reference('--ui-duration-state')} ${reference('--ui-easing-state')};
+        }
+
+        :host([open]) svg {
+            rotate: 180deg;
+        }
+
+        /* The panel's own box. position: fixed is what the popover already is; it is
+           restated because the script writes the two insets against the viewport, and a
+           reader of those lines should not have to know which stylesheet made them mean
+           that. */
+        [popover] {
+            position: fixed;
+            margin: 0;
+            inset: auto;
+            box-sizing: border-box;
+            min-inline-size: max-content;
+            max-inline-size: calc(${reference('--ui-space')} * 44);
+            padding: calc(${reference('--ui-space')} / 2);
+            border: 1px solid ${reference('--ui-color-border')};
+            border-radius: ${reference('--ui-radius')};
+            background: ${reference('--ui-color-surface')};
+            color: ${reference('--ui-color-text')};
+            font-family: ${reference('--ui-font')};
+            /* Lifted and bounded both, for the reason src/card.ts gives: a shadow is one
+               value in both schemes and does almost nothing on a dark page, where the
+               derived boundary is what separates the surface from what is under it. */
+            box-shadow: ${reference('--ui-elevation-raised')};
+        }
+
+        /* display is named under :popover-open and nowhere else, and that is the trap
+           src/dialog.ts fell into once: the user agent hides a closed popover with
+           display: none, and an author rule naming display unconditionally outranks it. */
+        [popover]:popover-open {
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* The gap between the panel and its trigger, in CSS because it is a token and the
+           script has no way to resolve one: a custom property reads back as it was
+           written, so 0.5rem would arrive at a function that needs pixels. */
+        [popover][data-side='block-end'] {
+            translate: 0 calc(${reference('--ui-space')} / 2);
+        }
+
+        [popover][data-side='block-start'] {
+            translate: 0 calc(${reference('--ui-space')} / -2);
+        }
+
+        /* An item is the host's own control, reached through ::slotted — so what is set
+           here is the only thing this component decides about it: that it fills the row,
+           reads left to right, and answers a pointer. */
+        ::slotted(button),
+        ::slotted(a) {
+            display: block;
+            inline-size: 100%;
+            box-sizing: border-box;
+            text-align: start;
+            font: inherit;
+            border: none;
+            border-radius: ${reference('--ui-radius')};
+            padding: calc(${reference('--ui-space')} / 2) ${reference('--ui-space')};
+            background: none;
+            color: inherit;
+            text-decoration: none;
+            cursor: pointer;
+            transition: background-color ${reference('--ui-duration-state')}
+                ${reference('--ui-easing-state')};
+        }
+
+        /* The :not() guards are measured rather than assumed, the same way src/button.ts
+           measured its own: a disabled control still matches :hover, so without them an
+           item that cannot be chosen would light up under a pointer. */
+        ::slotted(button:not(:disabled):hover),
+        ::slotted(a:not([aria-disabled='true']):hover) {
+            background: ${reference('--ui-color-hover')};
+        }
+
+        ::slotted(button:focus-visible),
+        ::slotted(a:focus-visible) {
+            outline: 2px solid ${reference('--ui-color-focus')};
+            outline-offset: -2px;
+        }
+
+        ::slotted(button:disabled),
+        ::slotted([aria-disabled='true']) {
+            color: ${reference('--ui-color-text-muted')};
+            cursor: not-allowed;
+        }
+
+        /* An hr already claims role="separator" — measured — so the platform owns what it
+           means and this owns only what it looks like. */
+        ::slotted(hr) {
+            border: none;
+            border-block-start: 1px solid ${reference('--ui-color-border')};
+            margin: calc(${reference('--ui-space')} / 2) 0;
+        }
+    `; }
+    static { this.properties = {
+        open: { type: Boolean, reflect: true },
+    }; }
+    /** The button this component owns, so the relationship below cannot be miswired. */
+    #trigger;
+    /** The menu itself, in the same tree scope as the trigger that names it. */
+    #panel;
+    /** What a pending typeahead has collected, and the clock that forgets it. */
+    #typed;
+    #forgetting;
+    /** Whether the next open should land on the last item rather than the first. */
+    #fromEnd;
+    /**
+     * Whether the close should hand the focus back.
+     *
+     * Set only by the two ways out that leave the reader inside the menu — Escape, and
+     * choosing an item. A click elsewhere is the third way out and deliberately does not
+     * set it: the reader has already said where they want to be, and moving them to the
+     * trigger would take it away from them.
+     */
+    #returning;
+    /** Re-places the panel under anything that moves the trigger while it is open. */
+    #reflow;
+    /** What is watching while the menu is open, dropped in one call when it closes. */
+    #watching;
+    constructor() {
+        super();
+        /**
+         * Whether the menu is showing.
+         *
+         * Reflected, so a host stylesheet can select on it — and so the caret above can turn
+         * without this file writing a class. Settable: the platform's own state is the source
+         * of truth and {@link UiMenu.updated} reconciles the two, which is the shape
+         * `src/dialog.ts` uses and for the same reason.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * states beside its own.
+         */
+        this.open = false;
+        /** The button this component owns, so the relationship below cannot be miswired. */
+        this.#trigger = document.createElement('button');
+        /** The menu itself, in the same tree scope as the trigger that names it. */
+        this.#panel = document.createElement('div');
+        /** What a pending typeahead has collected, and the clock that forgets it. */
+        this.#typed = '';
+        this.#forgetting = 0;
+        /** Whether the next open should land on the last item rather than the first. */
+        this.#fromEnd = false;
+        /**
+         * Whether the close should hand the focus back.
+         *
+         * Set only by the two ways out that leave the reader inside the menu — Escape, and
+         * choosing an item. A click elsewhere is the third way out and deliberately does not
+         * set it: the reader has already said where they want to be, and moving them to the
+         * trigger would take it away from them.
+         */
+        this.#returning = false;
+        /** Re-places the panel under anything that moves the trigger while it is open. */
+        this.#reflow = () => {
+            this.#place();
+        };
+        /** What is watching while the menu is open, dropped in one call when it closes. */
+        this.#watching = new AbortController();
+        /**
+         * Makes each item a menu item, and makes the menu one tab stop.
+         *
+         * On `slotchange` as well as at first render, because a framework re-render replaces
+         * the element rather than mutating it — and an item that is only wired the first time
+         * is one that silently stops being reachable.
+         *
+         * `tabindex="-1"` on every item, not a roving `0`: a popup menu is only reachable while
+         * it is open, so the tab stop is the trigger and the items are moved between by the
+         * keys below. That is also what makes Tab leave rather than walk the menu, which is
+         * what the APG pattern asks for and what the platform does with real buttons otherwise.
+         */
+        this.#wire = () => {
+            for (const item of this.#items()) {
+                item.setAttribute('role', 'menuitem');
+                item.setAttribute('tabindex', '-1');
+            }
+        };
+        /** Opens onto an end of the list, which is the one thing a click cannot ask for. */
+        this.#onTriggerKey = (event) => {
+            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+                return;
+            }
+            // Or the page scrolls under the menu that just opened.
+            event.preventDefault();
+            this.#fromEnd = event.key === 'ArrowUp';
+            this.open = true;
+        };
+        this.#onMenuKey = (event) => {
+            switch (event.key) {
+                case 'ArrowDown':
+                    this.#step(1);
+                    break;
+                case 'ArrowUp':
+                    this.#step(-1);
+                    break;
+                case 'Home':
+                    this.#edge(false);
+                    break;
+                case 'End':
+                    this.#edge(true);
+                    break;
+                case 'Escape':
+                    // The platform closes it; this only says where the focus should land.
+                    this.#returning = true;
+                    return;
+                case 'Tab':
+                    // The focus is already leaving and the default is what carries it there.
+                    // Closing without preventing is the whole of the APG rule.
+                    this.open = false;
+                    return;
+                default:
+                    if (event.key.length !== 1) {
+                        return;
+                    }
+                    this.#type(event.key);
+                    break;
+            }
+            event.preventDefault();
+        };
+        /** Choosing an item closes the menu, which is what makes it a menu rather than a panel. */
+        this.#onChoose = (event) => {
+            const chosen = event.target;
+            if (!(chosen instanceof HTMLElement) || !this.#enabled().includes(chosen)) {
+                return;
+            }
+            this.#returning = true;
+            this.open = false;
+        };
+        /**
+         * Follows the platform's own state, whichever way it moved.
+         *
+         * The invoker, a click elsewhere and Escape all close the panel without going through
+         * {@link UiMenu.open}, so this is where the property learns what happened rather than
+         * the other way round.
+         */
+        this.#onToggle = (event) => {
+            this.open = event.newState === 'open';
+            if (!this.open) {
+                this.#watching.abort();
+                this.#give();
+                return;
+            }
+            this.#place();
+            this.#edge(this.#fromEnd);
+            this.#fromEnd = false;
+            this.#watching = new AbortController();
+            const watched = { signal: this.#watching.signal };
+            // Capturing, because the thing that scrolls is rarely the window: a scroll inside
+            // any ancestor moves the trigger and no event reaches the window from it.
+            window.addEventListener('scroll', this.#reflow, { capture: true, ...watched });
+            window.addEventListener('resize', this.#reflow, watched);
+        };
+        const trigger = this.#trigger;
+        const panel = this.#panel;
+        // No `type` is set here, and that is measured rather than forgotten: a `<button>`
+        // in a shadow root has no form owner — `.form` is null and a click submits nothing —
+        // so `type="button"` would defend against a submission the shadow boundary already
+        // makes impossible. The platform is the guarantee; a line restating it is one more
+        // thing that can rot.
+        trigger.setAttribute('part', 'trigger');
+        trigger.setAttribute('aria-haspopup', 'menu');
+        trigger.setAttribute('aria-controls', panelId);
+        // The platform's own invoker, rather than a click handler that opens it. A click on
+        // the trigger of an open `auto` popover light-dismisses it *and* reaches the
+        // handler, so a hand-rolled toggle closes and reopens in one click — the platform's
+        // invoker logic is written for exactly that and this file should not have a second
+        // copy of it.
+        trigger.setAttribute('popovertarget', panelId);
+        trigger.addEventListener('keydown', this.#onTriggerKey);
+        trigger.append(slot('trigger'), caret());
+        panel.id = panelId;
+        panel.setAttribute('part', 'menu');
+        panel.setAttribute('role', 'menu');
+        panel.setAttribute('popover', 'auto');
+        panel.addEventListener('toggle', this.#onToggle);
+        panel.addEventListener('keydown', this.#onMenuKey);
+        panel.addEventListener('click', this.#onChoose);
+        const items = slot();
+        items.addEventListener('slotchange', this.#wire);
+        panel.append(items);
+    }
+    disconnectedCallback() {
+        // Removed while open, the panel takes the window listeners with it. A menu a
+        // framework unmounted would otherwise keep re-placing an element that is no longer
+        // in a document.
+        this.#watching.abort();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.#trigger.setAttribute('aria-expanded', String(this.open));
+        // Compared against the platform's own state rather than against Lit's changed
+        // properties, and it has to be: on the first update Lit reports every initialised
+        // property as changed, so a menu that has never been open would run the closing
+        // path. It is also what makes the invoker's own toggle a no-op here rather than a
+        // second `showPopover()` on a panel that is already open.
+        //
+        // Stryker disable next-line ConditionalExpression,BlockStatement: measured in the
+        // engine the suite runs — a redundant `showPopover()` or `hidePopover()` RETURNS
+        // rather than throwing, so with this guard gone nothing a test here can reach
+        // behaves differently. It stays anyway, because the engine is not the contract:
+        // the invoker sets `open` to what the platform has ALREADY done, so every click
+        // would make one redundant call, and an engine that refuses one would throw on the
+        // most ordinary interaction this component has. Marked rather than deleted so the
+        // next reader finds the measurement instead of taking it again.
+        if (this.open === this.#panel.matches(':popover-open')) {
+            return;
+        }
+        if (this.open) {
+            this.#panel.showPopover();
+        }
+        else {
+            this.#panel.hidePopover();
+        }
+    }
+    render() {
+        return html `${this.#trigger}${this.#panel}`;
+    }
+    /** The items, which are the host's own controls rather than anything rendered here. */
+    #items() {
+        return [
+            ...this.querySelectorAll(':scope > button:not([slot]), :scope > a[href]:not([slot])'),
+        ];
+    }
+    /** The ones a reader can actually land on, which is what every key below moves over. */
+    #enabled() {
+        return this.#items().filter((item) => !item.matches('[disabled], [aria-disabled="true"]'));
+    }
+    /**
+     * Makes each item a menu item, and makes the menu one tab stop.
+     *
+     * On `slotchange` as well as at first render, because a framework re-render replaces
+     * the element rather than mutating it — and an item that is only wired the first time
+     * is one that silently stops being reachable.
+     *
+     * `tabindex="-1"` on every item, not a roving `0`: a popup menu is only reachable while
+     * it is open, so the tab stop is the trigger and the items are moved between by the
+     * keys below. That is also what makes Tab leave rather than walk the menu, which is
+     * what the APG pattern asks for and what the platform does with real buttons otherwise.
+     */
+    #wire;
+    /** Opens onto an end of the list, which is the one thing a click cannot ask for. */
+    #onTriggerKey;
+    #onMenuKey;
+    /** Choosing an item closes the menu, which is what makes it a menu rather than a panel. */
+    #onChoose;
+    /**
+     * Follows the platform's own state, whichever way it moved.
+     *
+     * The invoker, a click elsewhere and Escape all close the panel without going through
+     * {@link UiMenu.open}, so this is where the property learns what happened rather than
+     * the other way round.
+     */
+    #onToggle;
+    /**
+     * Hands the focus back to the trigger, where the platform does not.
+     *
+     * Measured, in this component's own arrangement: with the trigger in this shadow root
+     * and the focus on a slotted item, closing leaves the focus on `<body>` — the same
+     * markup in one flat tree returns it to the invoker. So this is a gap rather than a
+     * duplication of something the platform already did.
+     */
+    #give() {
+        if (!this.#returning) {
+            return;
+        }
+        this.#returning = false;
+        this.#trigger.focus();
+    }
+    /** Moves by one, wrapping at either end, which is what the APG pattern asks for. */
+    #step(offset) {
+        const items = this.#enabled();
+        const at = items.findIndex((item) => item === document.activeElement);
+        // A menu with no enabled item leaves the modulo undefined and the lookup empty,
+        // which is the same nothing a guard would return — so there is no guard.
+        items[(at + offset + items.length) % items.length]?.focus();
+    }
+    /** Jumps to one end, which is Home and End and also where an opening menu lands. */
+    #edge(last) {
+        const items = this.#enabled();
+        (last ? items[items.length - 1] : items[0])?.focus();
+    }
+    /**
+     * Moves to the next item whose label starts with what has been typed.
+     *
+     * The search starts *after* the current item and wraps, which is what makes a repeated
+     * letter cycle through the items that share it — and what lets a growing buffer still
+     * find the item it is already on, by coming back round to it.
+     */
+    #type(character) {
+        window.clearTimeout(this.#forgetting);
+        this.#typed += character.toLowerCase();
+        this.#forgetting = window.setTimeout(() => {
+            this.#typed = '';
+        }, rhythm);
+        const items = this.#enabled();
+        const at = items.findIndex((item) => item === document.activeElement);
+        const after = items.slice(at + 1);
+        // Stryker disable next-line MethodExpression: dropping the arguments makes this the
+        // whole list, and the search cannot tell the difference — `order` would then be the
+        // original array followed by entries the `find` has already rejected, so it stops at
+        // the same item or at none. Provably equivalent, which is the only reason to ignore
+        // one; the argument itself is NOT ignored, and `tests/menu.test.ts` kills a mutant on
+        // it by searching backwards past the item under the focus.
+        const wrapped = items.slice(0, at + 1);
+        const order = [...after, ...wrapped];
+        order
+            .find((item) => item.textContent.trim().toLowerCase().startsWith(this.#typed))
+            ?.focus();
+    }
+    /**
+     * Hangs the panel from its trigger, above it when there is no room below, and inside
+     * the viewport either way.
+     *
+     * The arithmetic is `src/placement.ts`, which `<ui-tooltip>` reads as well — the issue
+     * behind this component asked for one answer rather than two, and what differs between
+     * the two callers is a preferred side and an alignment.
+     */
+    #place() {
+        const root = document.documentElement;
+        const placement = place(this.#trigger.getBoundingClientRect(), this.#panel.getBoundingClientRect(), { width: root.clientWidth, height: root.clientHeight }, 'block-end', 'inline-start');
+        this.#panel.setAttribute(side, placement.side);
+        this.#panel.style.insetBlockStart = `${String(placement.blockStart)}px`;
+        this.#panel.style.insetInlineStart = `${String(placement.inlineStart)}px`;
+    }
+}
+// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
+// the warm process Stryker switches mutants in — so by the time a mutant on this line is
+// active the element is already defined under the original name, and no test can observe
+// the change. Outside the runner's reach, not an equivalent mutant.
+customElements.define('ui-menu', UiMenu);
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../src/menu.ts"],"names":[],"mappings":"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"}

package/dist/placement.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Where an overlay lands, as arithmetic rather than as a rendering.
+ *
+ * **One answer to one problem, which is what issue #23 asked for.** `<ui-tooltip>` settled
+ * how this package places a `popover` — by hand, over the top layer, with CSS anchor
+ * positioning measured as present in this engine and deliberately declined; its docblock
+ * carries the whole argument. `<ui-menu>` needs the same thing pointing the other way, so
+ * the answer moved here rather than being written twice. A component with two placements is
+ * a component that is wrong in one of them.
+ *
+ * **Taken as numbers rather than as elements, and that is the floors talking** — the same
+ * reason `reservedGutter` in `src/dialog.ts` is handed two widths instead of a window. A
+ * function of four boxes is decided here and checked directly, at the edges that a rendered
+ * page can only reach by luck: an anchor with exactly the tip's height above it, a box wider
+ * than the viewport, a menu at the last pixel of the screen. The callers keep no branch of
+ * their own.
+ *
+ * Internal — not re-exported from `src/index.ts`, because what a consumer positions is their
+ * own element, and this is how two of ours find each other.
+ */
+/** Which way an overlay went, which is also what a component writes for a host to select on. */
+export type Side = 'block-start' | 'block-end';
+/** How the overlay lines up with its anchor along the inline axis. */
+export type Align = 'center' | 'inline-start';
+/** As much of a box as a placement needs, which is what makes this checkable without one. */
+export interface Box {
+    readonly top: number;
+    readonly left: number;
+    readonly width: number;
+    readonly height: number;
+}
+/** Where the overlay goes: the side it took, and the two insets to write. */
+export interface Placement {
+    readonly side: Side;
+    readonly blockStart: number;
+    readonly inlineStart: number;
+}
+/**
+ * Puts `box` beside `anchor` on the side it asked for, on the other side when there is no
+ * room, and inside the viewport either way.
+ *
+ * @param anchor - The element being pointed at, in viewport coordinates.
+ * @param box - The overlay, measured **after** it is shown: its height depends on how its
+ * text wrapped at this width in this font, which no caller can know and none should guess.
+ * @param viewport - The visible area, scrollbar excluded — `document.documentElement`'s
+ * client size rather than `window.inner*`, so a reserved scrollbar is not counted as room.
+ * @param prefer - Where it goes when it fits. A tip goes above its trigger; a menu hangs
+ * below its button.
+ * @param align - `center` for something that points at the anchor, `inline-start` for
+ * something that hangs from it.
+ */
+export declare function place(anchor: Box, box: Box, viewport: {
+    readonly width: number;
+    readonly height: number;
+}, prefer: Side, align: Align): Placement;
+//# sourceMappingURL=placement.d.ts.map