@lo-tek/interfaces 0.0.0 → 0.37.0

package/dist/components/frame/popover/lt-popover.d.ts

@@ -0,0 +1,132 @@
+import { HostElement } from "../../host-element.js";
+import { type PopoverPlacement } from "./popover.js";
+export declare const LT_POPOVER_TAG: "lt-popover";
+/**
+ * The parts the popover finds, as selectors relative to the element. The
+ * component finds the parts with these, and the manifest describes them for
+ * whoever assembles the markup by hand, so the two cannot say different things.
+ */
+export declare const LT_POPOVER_PARTS: {
+    readonly trigger: "button, [role='button']";
+    readonly panel: "[popover], .lt-popover";
+};
+/**
+ * A panel that hangs below a button, and closes itself.
+ *
+ * The panel uses the browser's own `popover`, so it goes into the top layer
+ * and lies above everything else without `z-index`. `lt.popover()` writes
+ * `popover="manual"`, so Escape and clicks outside are handled by the
+ * component: with `auto` the browser closed the panel before the button got
+ * its click, and the button could not be used to close it again. Handwritten
+ * markup with a bare `popover` is `auto`, and then the component follows along
+ * when the browser closes it.
+ *
+ * What the top layer does not do is place the panel. `position-anchor` is not
+ * yet in every browser, so the position is worked out here.
+ *
+ * When the markup is made with JavaScript, `lt.popover()` writes the wiring:
+ * `aria-controls` on the button, and the class, the id and `popover` on the
+ * panel. When the markup comes from a template without JavaScript, the
+ * template writes a button and a panel with the class `lt-popover` and an id:
+ * the component sets `popover="manual"` and writes `aria-controls` on the
+ * button from the id. Only what is missing, so what the server wrote stays.
+ * The component sets `open` on the host, `aria-expanded` on the button and the
+ * position on the panel, and puts back everything it has written when a patch
+ * removes it. The template needs no `data-preserve-attr`.
+ *
+ * The component never writes an id on the panel. Datastar and idiomorph
+ * recognise an element by its id, and a panel with an id the server did not
+ * send was replaced on the next patch, along with focus and what the user had
+ * done in it. Without an id the panel is kept, but the button cannot be
+ * connected to it with `aria-controls`, and the component says so in the
+ * console.
+ *
+ * The repair works one way: if someone has asked for the popover to be open,
+ * it stays open through a patch. If the server sends `open`, it opens, since
+ * that is something the server actually said.
+ *
+ * For the server to decide the state, set `server-controlled` on the host.
+ * That is also the answer when the page controls `open` with an attribute from
+ * outside, as with Datastar's `data-attr:open`: a removed attribute cannot be
+ * told apart from a morph, while `menu.open = false` is a message the
+ * component can see.
+ *
+ * ```html
+ * <lt-popover placement="bottom-end">
+ *   <button class="lt-button" aria-controls="menu" aria-expanded="false">Actions</button>
+ *   <ul id="menu" class="lt-popover" popover="manual">…</ul>
+ * </lt-popover>
+ * ```
+ */
+export declare class LtPopover extends HostElement {
+    static observedAttributes: readonly ["open", "placement", "server-controlled"];
+    private panel?;
+    private triggerElement?;
+    private observer?;
+    /**
+     * What the component was last asked for, through the `open` property.
+     *
+     * `open` lives on the host, and a morph removes everything that is not in
+     * the server's HTML. Without anything more, every single patch closed a
+     * popover the user had just opened.
+     *
+     * A removed attribute looks the same whoever removed it, so the component
+     * cannot tell a morph from an app. The distinction is instead **how** the app
+     * says it: if it goes through the property, as in `menu.open = false`,
+     * `hide()` or `toggle()`, that is a message, and it is followed. If something
+     * sets the attribute directly, as Datastar's `data-attr:open` does, it cannot
+     * be told apart from a morph, and then the page should say
+     * `server-controlled` and let the server decide the state.
+     */
+    private wantsOpen;
+    /** Whether the panel is open. Mirrored, so CSS can match the state. */
+    get open(): boolean;
+    set open(value: boolean);
+    /** Which edge the panel hangs from. Default: `bottom-start`. */
+    get placement(): PopoverPlacement;
+    set placement(value: PopoverPlacement);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private sync;
+    /**
+     * Says so when a patch replaced the open panel because the id from the
+     * server changed.
+     *
+     * Datastar and idiomorph recognise an element by its id, and a new id is a
+     * new element to them. The component opens the new panel again, but focus,
+     * and what the user typed in a field in it, are gone. It happens when the
+     * template builds the id from something that changes between renders, such
+     * as a random number or a counter.
+     *
+     * The message comes only when the popover was open and both panels had an id
+     * from the server, with different values. A panel without an id is kept by
+     * the morph, and a server that deliberately sends another panel while the
+     * popover is closed has nothing to fix.
+     */
+    private warnAboutReplacedPanel;
+    /** The panel: the one with `popover`, otherwise the one with the class. */
+    private findPanel;
+    /**
+     * The button: the one pointing to the panel with `aria-controls`, otherwise
+     * the first button outside the panel that does not point to anything else. A
+     * button with an `aria-controls` pointing elsewhere is not a fallback: then
+     * the server has said something else, and that is not to be guessed around.
+     */
+    private findTrigger;
+    private handleTriggerClick;
+    private handlePanelToggle;
+    private handleOutsideClick;
+    private handleKeydown;
+    /** Works out where the panel goes, against the button's place on screen. */
+    private reposition;
+    private emit;
+    /** Opens the panel. */
+    show(): void;
+    /** Closes the panel. */
+    hide(): void;
+    /** Opens or closes. */
+    toggle(): void;
+}
+export declare function defineLtPopover(tagName?: string): void;
+//# sourceMappingURL=lt-popover.d.ts.map

package/dist/components/frame/popover/lt-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lt-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/frame/popover/lt-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAMZ,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,cAAc,EAAG,YAAqB,CAAA;AAEnD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,kBAAkB,sDAAoD;IAE7E,OAAO,CAAC,KAAK,CAAC,CAAa;IAC3B,OAAO,CAAC,cAAc,CAAC,CAAa;IACpC,OAAO,CAAC,QAAQ,CAAC,CAAkB;IACnC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,SAAS,CAAQ;IAEzB,uEAAuE;IACvE,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAStB;IAED,gEAAgE;IAChE,IAAI,SAAS,IAAI,gBAAgB,CAGhC;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,gBAAgB,EAEpC;IAED,iBAAiB,IAAI,IAAI;IAuCzB,oBAAoB,IAAI,IAAI;IAgB5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAU5C,OAAO,CAAC,IAAI;IAqJZ;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,sBAAsB;IAkB9B,2EAA2E;IAC3E,OAAO,CAAC,SAAS;IAIjB;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,kBAAkB,CAEzB;IAED,OAAO,CAAC,iBAAiB,CAkBxB;IAED,OAAO,CAAC,kBAAkB,CAOzB;IAED,OAAO,CAAC,aAAa,CA2CpB;IAED,4EAA4E;IAC5E,OAAO,CAAC,UAAU,CA0CjB;IAED,OAAO,CAAC,IAAI;IAUZ,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAMZ,wBAAwB;IACxB,IAAI,IAAI,IAAI;IAMZ,uBAAuB;IACvB,MAAM,IAAI,IAAI;CAIf;AAED,wBAAgB,eAAe,CAAC,OAAO,GAAE,MAAuB,GAAG,IAAI,CAEtE"}

package/dist/components/frame/popover/lt-popover.js

@@ -0,0 +1,490 @@
+import { addClass, defineElement, HostElement, isServerControlled, SERVER_CONTROLLED, setAttr, setFlag, warnAboutMarkup, } from "../../host-element.js";
+import { isPopoverPlacement, POPOVER_CLASS, } from "./popover.js";
+export const LT_POPOVER_TAG = "lt-popover";
+/**
+ * The parts the popover finds, as selectors relative to the element. The
+ * component finds the parts with these, and the manifest describes them for
+ * whoever assembles the markup by hand, so the two cannot say different things.
+ */
+export const LT_POPOVER_PARTS = {
+    trigger: "button, [role='button']",
+    panel: `[popover], .${POPOVER_CLASS}`,
+};
+/**
+ * A panel that hangs below a button, and closes itself.
+ *
+ * The panel uses the browser's own `popover`, so it goes into the top layer
+ * and lies above everything else without `z-index`. `lt.popover()` writes
+ * `popover="manual"`, so Escape and clicks outside are handled by the
+ * component: with `auto` the browser closed the panel before the button got
+ * its click, and the button could not be used to close it again. Handwritten
+ * markup with a bare `popover` is `auto`, and then the component follows along
+ * when the browser closes it.
+ *
+ * What the top layer does not do is place the panel. `position-anchor` is not
+ * yet in every browser, so the position is worked out here.
+ *
+ * When the markup is made with JavaScript, `lt.popover()` writes the wiring:
+ * `aria-controls` on the button, and the class, the id and `popover` on the
+ * panel. When the markup comes from a template without JavaScript, the
+ * template writes a button and a panel with the class `lt-popover` and an id:
+ * the component sets `popover="manual"` and writes `aria-controls` on the
+ * button from the id. Only what is missing, so what the server wrote stays.
+ * The component sets `open` on the host, `aria-expanded` on the button and the
+ * position on the panel, and puts back everything it has written when a patch
+ * removes it. The template needs no `data-preserve-attr`.
+ *
+ * The component never writes an id on the panel. Datastar and idiomorph
+ * recognise an element by its id, and a panel with an id the server did not
+ * send was replaced on the next patch, along with focus and what the user had
+ * done in it. Without an id the panel is kept, but the button cannot be
+ * connected to it with `aria-controls`, and the component says so in the
+ * console.
+ *
+ * The repair works one way: if someone has asked for the popover to be open,
+ * it stays open through a patch. If the server sends `open`, it opens, since
+ * that is something the server actually said.
+ *
+ * For the server to decide the state, set `server-controlled` on the host.
+ * That is also the answer when the page controls `open` with an attribute from
+ * outside, as with Datastar's `data-attr:open`: a removed attribute cannot be
+ * told apart from a morph, while `menu.open = false` is a message the
+ * component can see.
+ *
+ * ```html
+ * <lt-popover placement="bottom-end">
+ *   <button class="lt-button" aria-controls="menu" aria-expanded="false">Actions</button>
+ *   <ul id="menu" class="lt-popover" popover="manual">…</ul>
+ * </lt-popover>
+ * ```
+ */
+export class LtPopover extends HostElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * What the component was last asked for, through the `open` property.
+         *
+         * `open` lives on the host, and a morph removes everything that is not in
+         * the server's HTML. Without anything more, every single patch closed a
+         * popover the user had just opened.
+         *
+         * A removed attribute looks the same whoever removed it, so the component
+         * cannot tell a morph from an app. The distinction is instead **how** the app
+         * says it: if it goes through the property, as in `menu.open = false`,
+         * `hide()` or `toggle()`, that is a message, and it is followed. If something
+         * sets the attribute directly, as Datastar's `data-attr:open` does, it cannot
+         * be told apart from a morph, and then the page should say
+         * `server-controlled` and let the server decide the state.
+         */
+        this.wantsOpen = false;
+        this.handleTriggerClick = () => {
+            this.toggle();
+        };
+        this.handlePanelToggle = (event) => {
+            const state = event.newState;
+            /*
+             * The event applies only when it matches the panel. `toggle` is delivered as
+             * a separate task, after everything that happened in the same round, and can
+             * describe a state that has already changed. A patch that takes `open` on
+             * the host and `popover` on the panel in the same morph closes the panel
+             * here in `sync()`, reopens it in the microtask afterwards, and only then
+             * does "closed" arrive from the close. Before, it was taken as the user's,
+             * and the popover the user had open stayed closed after a patch that said
+             * nothing about it.
+             *
+             * The component's own `showPopover()` and `hidePopover()` also fire the
+             * event, but then `open` already matches, and nothing happens.
+             */
+            const showing = event.currentTarget.matches(":popover-open");
+            if (state === "closed" && this.open && !showing)
+                this.hide();
+            else if (state === "open" && !this.open && showing)
+                this.show();
+        };
+        this.handleOutsideClick = (event) => {
+            // `composedPath()` and not `target`: when the component is in a shadow
+            // root, `target` is retargeted to the shadow host, and a click in the panel
+            // itself looked like a click outside.
+            const target = event.composedPath()[0];
+            if (this.contains(target) || this.panel?.contains(target))
+                return;
+            this.hide();
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== "Escape" || !this.open)
+                return;
+            // Something else has already used the key press, such as a suggestion list
+            // that closed. Without this one press closed both the list and the popover.
+            if (event.defaultPrevented)
+                return;
+            // `composedPath()` and not `contains`: a field in a shadow root in the
+            // panel is not in the tree `contains` sees, and a press there closed nothing.
+            const path = event.composedPath();
+            for (const node of path) {
+                if (node === this)
+                    break;
+                // An open popover inside this one is closer. It takes the press, and this
+                // one closes on the next. The listeners are both on `document`, and the
+                // outer one came first: before, it closed and left the inner one open.
+                if (node instanceof LtPopover && node.open)
+                    return;
+                // A modal dialog opened on top of the popover is closed by its own press.
+                if (node instanceof HTMLDialogElement &&
+                    node.matches(":modal") &&
+                    !node.contains(this)) {
+                    return;
+                }
+            }
+            /*
+             * Focus is moved back only when it was in the popover, or nowhere else: on
+             * `body`, or on a dialog or a `<main tabindex="-1">` the popover is in. A
+             * mouse click does not give the button focus in Safari, and inside a modal
+             * dialog the dialog gets the focus. If focus was in another field, it stays
+             * there. Before, it jumped to the button.
+             */
+            const target = path[0];
+            const fromWindow = path.includes(this) || (target instanceof Node && target.contains(this));
+            // Used here. Without this it also closed a modal dialog the popover was
+            // in: one press took both, and the user lost the dialog.
+            event.preventDefault();
+            this.hide();
+            // Without this focus is on a panel that no longer exists, and the next
+            // key press starts at the top of the page.
+            if (fromWindow)
+                this.triggerElement?.focus();
+        };
+        /** Works out where the panel goes, against the button's place on screen. */
+        this.reposition = () => {
+            if (!this.open || !this.panel || !this.triggerElement)
+                return;
+            const anchor = this.triggerElement.getBoundingClientRect();
+            const panel = this.panel.getBoundingClientRect();
+            const space = 4;
+            const below = this.placement.startsWith("bottom");
+            // `start` and `end` follow the reading direction: in a right-to-left
+            // document `start` is the button's right edge. Without this the panel was on
+            // the wrong side of the button in RTL. `:dir(rtl)` and not `direction` from
+            // `getComputedStyle`: the stylesheet flips the value with `:dir(rtl)`, so
+            // both read the HTML direction from `dir`. A page that sets
+            // `direction: rtl` in CSS without `dir` is not flipped, neither here nor in
+            // the stylesheet, as with the background icons.
+            const rtl = this.panel.matches(":dir(rtl)");
+            const alignRight = this.placement.endsWith("end") !== rtl;
+            let top = below ? anchor.bottom + space : anchor.top - panel.height - space;
+            let left = alignRight ? anchor.right - panel.width : anchor.left;
+            // The panel must not end up off screen. If it goes out at the side, it is
+            // moved in. If there is no room on the side of the button the placement asks
+            // for, it goes on the other side, and is then clamped into the viewport
+            // either way. `top-*` lacked the last part, and a panel at the top of the
+            // page lay entirely off screen, with no way to scroll it into view.
+            left = Math.max(space, Math.min(left, window.innerWidth - panel.width - space));
+            if (below && top + panel.height > window.innerHeight) {
+                top = anchor.top - panel.height - space;
+            }
+            else if (!below && top < space) {
+                top = anchor.bottom + space;
+            }
+            top = Math.max(space, Math.min(top, window.innerHeight - panel.height - space));
+            this.panel.style.setProperty("--lt-popover-top", `${Math.round(top)}px`);
+            this.panel.style.setProperty("--lt-popover-left", `${Math.round(left)}px`);
+        };
+    }
+    /** Whether the panel is open. Mirrored, so CSS can match the state. */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        // The message is noted here, and not in `show()` and `hide()`. Both go
+        // through the setter, but so does `menu.open = false` from an app, and
+        // without this the component set the attribute straight back again.
+        //
+        // No memory when the server decides the state. Without that guard the
+        // popover popped open by itself the moment `server-controlled` was removed.
+        this.wantsOpen = isServerControlled(this) ? false : value;
+        setFlag(this, "open", value);
+    }
+    /** Which edge the panel hangs from. Default: `bottom-start`. */
+    get placement() {
+        const value = this.getAttribute("placement");
+        return isPopoverPlacement(value) ? value : "bottom-start";
+    }
+    set placement(value) {
+        setAttr(this, "placement", value);
+    }
+    connectedCallback() {
+        window.addEventListener("resize", this.reposition);
+        window.addEventListener("scroll", this.reposition, true);
+        /*
+         * The attributes are included, not only the children. `aria-expanded` on the
+         * button and the position on the panel are something the component works
+         * out, so if a patch removes them, they must come back. Every write in
+         * `sync()` compares first, or the observer would trigger itself.
+         */
+        this.observer = new MutationObserver((records) => {
+            // `type` concerns only the button. A password field in the panel that
+            // switches between `password` and `text` must not run all of `sync()`.
+            const onlyOtherTypes = records.every((record) => record.attributeName === "type" &&
+                record.target !== this.triggerElement);
+            if (!onlyOtherTypes)
+                this.sync();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                "aria-expanded",
+                "style",
+                // The wiring the component fills in when the markup came without it.
+                "popover",
+                "id",
+                "aria-controls",
+                "class",
+                // A patch from a template without `type` removes it, and then the
+                // button submits the form again.
+                "type",
+            ],
+        });
+        this.sync();
+    }
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.reposition);
+        window.removeEventListener("scroll", this.reposition, true);
+        document.removeEventListener("click", this.handleOutsideClick, true);
+        document.removeEventListener("keydown", this.handleKeydown);
+        this.observer?.disconnect();
+        this.observer = undefined;
+        this.triggerElement?.removeEventListener("click", this.handleTriggerClick);
+        this.panel?.removeEventListener("toggle", this.handlePanelToggle);
+        // The reference must be reset, or `sync()` sees that the button is the
+        // same when the element is inserted again, and skips attaching the listener
+        // again. Then the panel can no longer be opened.
+        this.triggerElement = undefined;
+        this.panel = undefined;
+    }
+    attributeChangedCallback(name) {
+        // `server-controlled` turned on midway: the component lets go, and the
+        // next patch decides.
+        if (name === SERVER_CONTROLLED && isServerControlled(this)) {
+            this.wantsOpen = false;
+        }
+        if (this.isConnected)
+            this.sync();
+    }
+    sync() {
+        /*
+         * Puts `open` back when a patch took it.
+         *
+         * One way only: if `open` is there, the popover is open, and then either the
+         * user or the server has said so. If it is gone while the user opened it, the
+         * morph took it, and then it comes back.
+         */
+        if (this.wantsOpen && !this.open && !isServerControlled(this)) {
+            /*
+             * Wait until the whole patch has landed before opening the popover again.
+             *
+             * A morph sets one attribute at a time, and `open` comes before
+             * `server-controlled` in document order. When the component repaired at
+             * once, it put `open` back while the server was in the middle of saying it
+             * was taking over the state, and the popover stayed open afterwards.
+             * `queueMicrotask` runs after the whole patch is done, and the condition is
+             * checked again there.
+             */
+            queueMicrotask(() => {
+                if (!this.isConnected || isServerControlled(this))
+                    return;
+                if (this.wantsOpen && !this.open)
+                    setFlag(this, "open", true);
+            });
+        }
+        // The parts are recognised by the wiring that must be there anyway: the
+        // panel is the one with `popover`, and the button is the one pointing to the
+        // panel with `aria-controls`. Before, the button had `slot="trigger"`, a
+        // leftover from the time the component had shadow DOM. Without a shadow
+        // root `slot` does nothing in HTML, so the attribute was a label that looked
+        // like something it was not.
+        const panel = this.findPanel();
+        if (panel) {
+            // Only what is missing. A template may have written `popover` without a
+            // value, and that is `auto`; then the component follows along when the
+            // browser closes it.
+            addClass(panel, POPOVER_CLASS);
+            if (!panel.hasAttribute("popover"))
+                setAttr(panel, "popover", "manual");
+            // Never an id on the panel: see the comment at the top. Without an id there
+            // is nothing for `aria-controls` to point to.
+            warnAboutMarkup(this, "the panel has no id, so the button cannot be connected to it " +
+                "with aria-controls. Write an id on the panel in the template, " +
+                'such as id="menu", and the same value in aria-controls on the ' +
+                "button.", () => {
+                const found = this.findPanel();
+                return found !== null && !found.id;
+            });
+        }
+        const trigger = panel ? this.findTrigger(panel) : null;
+        if (panel?.id && trigger && !trigger.hasAttribute("aria-controls")) {
+            setAttr(trigger, "aria-controls", panel.id);
+        }
+        // A `<button>` without `type` is a submit button, and so is one with an
+        // empty or unknown `type`, which a template can write. A help popover next
+        // to a field sits inside the form, and a click to open it submitted the
+        // form, or brought up the error summary, instead of showing the panel. A
+        // button that says `submit` itself is left alone.
+        if (trigger instanceof HTMLButtonElement &&
+            trigger.type === "submit" &&
+            trigger.getAttribute("type")?.toLowerCase() !== "submit") {
+            setAttr(trigger, "type", "button");
+        }
+        if (!trigger || !panel) {
+            /*
+             * Two different faults, and a message for each, so the developer looks in
+             * the right place. An empty element is a region the server has not filled
+             * yet, and that is not a fault in the markup.
+             */
+            const isEmpty = () => this.childElementCount === 0;
+            if (!panel) {
+                warnAboutMarkup(this, "found no panel: an element with popover or the class " +
+                    "lt-popover. Without one there is nothing to open or position.", () => !isEmpty() && this.findPanel() === null);
+            }
+            else {
+                warnAboutMarkup(this, "found no button: neither one with aria-controls pointing to " +
+                    "the panel nor a <button> outside the panel. Without it the " +
+                    "component does not know what opens the popover.", () => {
+                    const found = this.findPanel();
+                    return !isEmpty() && found !== null && !this.findTrigger(found);
+                });
+            }
+            /*
+             * Let go of what we had. When a patch removed the panel, the component
+             * otherwise held on to a detached node, and `reposition()` kept working out
+             * the position of something that is not on the page.
+             *
+             * The listeners on `document` must go too. Without that they stayed in the
+             * capture phase for as long as the markup was broken, and a click anywhere
+             * on the page gave the app a `popover-toggle` it had not asked for.
+             */
+            this.triggerElement?.removeEventListener("click", this.handleTriggerClick);
+            this.triggerElement = undefined;
+            this.panel?.removeEventListener("toggle", this.handlePanelToggle);
+            this.panel = undefined;
+            document.removeEventListener("click", this.handleOutsideClick, true);
+            document.removeEventListener("keydown", this.handleKeydown);
+            return;
+        }
+        if (this.triggerElement !== trigger) {
+            this.triggerElement?.removeEventListener("click", this.handleTriggerClick);
+            trigger.addEventListener("click", this.handleTriggerClick);
+            this.triggerElement = trigger;
+        }
+        if (this.panel !== panel) {
+            if (this.panel)
+                this.warnAboutReplacedPanel(this.panel, panel);
+            /*
+             * The state is in the markup as `:popover-open`, and is read from there.
+             * When the browser closes a `popover="auto"` itself, because another one
+             * opens or the user clicks outside, `toggle` reports it. Without the
+             * listener the host kept `open` and the button `aria-expanded="true"` over a
+             * closed panel, and the next click did nothing visible.
+             */
+            this.panel?.removeEventListener("toggle", this.handlePanelToggle);
+            panel.addEventListener("toggle", this.handlePanelToggle);
+            this.panel = panel;
+        }
+        // Written by the component, and set again if a patch took it.
+        setAttr(trigger, "aria-expanded", String(this.open));
+        if (this.open) {
+            if (!panel.matches(":popover-open"))
+                panel.showPopover();
+            this.reposition();
+            document.addEventListener("click", this.handleOutsideClick, true);
+            document.addEventListener("keydown", this.handleKeydown);
+        }
+        else {
+            if (panel.matches(":popover-open"))
+                panel.hidePopover();
+            document.removeEventListener("click", this.handleOutsideClick, true);
+            document.removeEventListener("keydown", this.handleKeydown);
+        }
+    }
+    /**
+     * Says so when a patch replaced the open panel because the id from the
+     * server changed.
+     *
+     * Datastar and idiomorph recognise an element by its id, and a new id is a
+     * new element to them. The component opens the new panel again, but focus,
+     * and what the user typed in a field in it, are gone. It happens when the
+     * template builds the id from something that changes between renders, such
+     * as a random number or a counter.
+     *
+     * The message comes only when the popover was open and both panels had an id
+     * from the server, with different values. A panel without an id is kept by
+     * the morph, and a server that deliberately sends another panel while the
+     * popover is closed has nothing to fix.
+     */
+    warnAboutReplacedPanel(lost, panel) {
+        if (lost.isConnected || !this.wantsOpen)
+            return;
+        if (!lost.id || !panel.id || lost.id === panel.id)
+            return;
+        warnAboutMarkup(this, "a server update replaced the panel while it was open, because " +
+            "the panel's id was different from last time and the update did " +
+            "not recognise it. The panel is opened again, but focus and " +
+            "what the user did in it are lost; build the id from something " +
+            "that is the same every time, not from a random number or a " +
+            "counter.", 
+        // The replacement has happened and cannot undo itself, unless a new
+        // update has already replaced the panel again.
+        () => !lost.isConnected && this.findPanel() === panel);
+    }
+    /** The panel: the one with `popover`, otherwise the one with the class. */
+    findPanel() {
+        return this.querySelector(LT_POPOVER_PARTS.panel);
+    }
+    /**
+     * The button: the one pointing to the panel with `aria-controls`, otherwise
+     * the first button outside the panel that does not point to anything else. A
+     * button with an `aria-controls` pointing elsewhere is not a fallback: then
+     * the server has said something else, and that is not to be guessed around.
+     */
+    findTrigger(panel) {
+        if (panel.id) {
+            const pointing = this.querySelector(`[aria-controls="${CSS.escape(panel.id)}"]`);
+            if (pointing)
+                return pointing;
+        }
+        return ([...this.querySelectorAll(LT_POPOVER_PARTS.trigger)].find((button) => !panel.contains(button) && !button.hasAttribute("aria-controls")) ?? null);
+    }
+    emit(open) {
+        this.dispatchEvent(new CustomEvent("popover-toggle", {
+            detail: { open },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /** Opens the panel. */
+    show() {
+        if (this.open)
+            return;
+        this.open = true;
+        this.emit(true);
+    }
+    /** Closes the panel. */
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit(false);
+    }
+    /** Opens or closes. */
+    toggle() {
+        if (this.open)
+            this.hide();
+        else
+            this.show();
+    }
+}
+LtPopover.observedAttributes = ["open", "placement", SERVER_CONTROLLED];
+export function defineLtPopover(tagName = LT_POPOVER_TAG) {
+    defineElement(tagName, LtPopover);
+}
+//# sourceMappingURL=lt-popover.js.map

package/dist/components/frame/popover/lt-popover.js.map

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