@lo-tek/interfaces 0.0.0 → 0.38.0

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

@@ -0,0 +1,1265 @@
+import { defineElement, derivedParts, HostElement, isServerControlled, markWritten, SERVER_CONTROLLED, setAttr, setFlag, stillMarked, uniqueId, WRITTEN, warnAboutCopiedMark, warnAboutMarkup, } from "../../host-element.js";
+export const LT_TABS_TAG = "lt-tabs";
+/**
+ * The parts the tabs look for, as selectors relative to the element. The
+ * web component finds its parts with these, and the manifest describes them
+ * for anyone writing the markup by hand, so the two cannot disagree.
+ */
+export const LT_TABS_PARTS = {
+    /** The tab list: the one the server gave the role, or the class from `tabs.css`. */
+    list: "[role='tablist'], .lt-tabs__list",
+    /**
+     * A tab is a link to a panel in the tab list. A link is the only tab
+     * pattern that works without JavaScript: without the script the tab list is
+     * a table of contents, and the links lead to the panels. If the server has
+     * written the roles, only the links with `role="tab"` are tabs.
+     */
+    tab: "a[role='tab'][href^='#'], .lt-tabs__list a[href^='#']:not([role])",
+    /** A panel: the role when it is there, otherwise the class without a role. */
+    panel: "[role='tabpanel'], .lt-tabs__panel:not([role])",
+};
+const LIST_SELECTOR = LT_TABS_PARTS.list;
+const TAB_SELECTOR = LT_TABS_PARTS.tab;
+/** What the server has called a tab, including what is not a link. */
+const ANY_TAB_SELECTOR = "[role='tab']";
+/** The heading in a panel, which gives the panel its name. */
+const HEADING_SELECTOR = ":scope > :is(h1, h2, h3, h4, h5, h6)";
+/**
+ * The id a tab points to, or `null` when it is not a link to a fragment.
+ * `href="#"` on its own points to nothing.
+ *
+ * `href` is the truth, and `aria-controls` is written from it. The fragment
+ * is looked up the way the browser does: as written, and otherwise decoded,
+ * so both `#attachments` and `#s%C3%B8knaden` find their panel.
+ */
+function linkTarget(tab) {
+    if (tab.localName !== "a")
+        return null;
+    const href = tab.getAttribute("href") ?? "";
+    if (!href.startsWith("#") || href.length < 2)
+        return null;
+    return href.slice(1);
+}
+function decoded(fragment) {
+    try {
+        const plain = decodeURIComponent(fragment);
+        return plain === fragment ? null : plain;
+    }
+    catch {
+        return null;
+    }
+}
+/** Text as a name is computed: whitespace collapsed, and trimmed. */
+function flat(text) {
+    return text.replace(/\s+/g, " ").trim();
+}
+/** Is the element hidden from assistive technology: `hidden`, `aria-hidden` or CSS? */
+function hiddenFromAT(element) {
+    if (element.getAttribute("aria-hidden") === "true")
+        return true;
+    if (element.hasAttribute("hidden"))
+        return true;
+    if (!(element instanceof HTMLElement) || !element.isConnected)
+        return false;
+    const style = getComputedStyle(element);
+    return style.display === "none" || style.visibility === "hidden";
+}
+/**
+ * The text an element contributes to a name, as AccName 1.2 computes it from
+ * step 2.
+ *
+ * `aria-labelledby` (2B), `aria-label` on something inside, `alt` on an
+ * image, and the text, but not what is hidden from assistive technology.
+ * `textContent` included hidden text, such as "Messages (3)", and gave an
+ * empty name to a tab with only an icon and `aria-label`.
+ *
+ * - `includeHidden`: when a hidden element is pointed to directly with
+ *   `aria-labelledby`, it is included anyway, with everything inside it (2A).
+ * - `inReference`: the node is inside an `aria-labelledby` that is already
+ *   being followed, and then another one is not followed (2B).
+ *
+ * Text from CSS, `::before` and `::after` (2F.ii), is not included. LO-TEK's
+ * tabs do not use it, and reading `content` correctly is a lot of code for
+ * something nobody needs (decided by the maintainer on 23 October).
+ */
+function textOf(node, includeHidden = false, inReference = false) {
+    if (node.nodeType === Node.TEXT_NODE)
+        return node.textContent ?? "";
+    if (!(node instanceof Element))
+        return "";
+    if (!includeHidden && hiddenFromAT(node))
+        return "";
+    if (!inReference) {
+        const referenced = referencedText(node);
+        if (referenced !== "")
+            return ` ${referenced} `;
+    }
+    const label = node.getAttribute("aria-label");
+    if (label && flat(label) !== "")
+        return ` ${label} `;
+    if (node.localName === "img")
+        return ` ${node.getAttribute("alt") ?? ""} `;
+    let text = "";
+    for (const child of node.childNodes)
+        text += textOf(child, includeHidden, inReference);
+    return text;
+}
+/** The text from the elements `aria-labelledby` points to, or empty (AccName 2B). */
+function referencedText(element) {
+    const ids = element.getAttribute("aria-labelledby");
+    if (!ids)
+        return "";
+    const root = element.getRootNode();
+    return flat(ids
+        .split(/\s+/)
+        .map((id) => (id === "" ? null : root.getElementById?.(id)))
+        .filter((e) => Boolean(e))
+        .map((e) => textOf(e, hiddenFromAT(e), true))
+        .join(" "));
+}
+/** The name of an element, as a screen reader computes it. */
+function accessibleName(element) {
+    const referenced = referencedText(element);
+    if (referenced !== "")
+        return referenced;
+    const label = element.getAttribute("aria-label");
+    if (label && flat(label) !== "")
+        return flat(label);
+    let text = "";
+    for (const child of element.childNodes)
+        text += textOf(child);
+    if (flat(text) !== "")
+        return flat(text);
+    return flat(element.getAttribute("title") ?? "");
+}
+/**
+ * The name a panel gets when it points to the element with `aria-labelledby`.
+ *
+ * Not the same as the element's name: inside an `aria-labelledby`, the
+ * element's `aria-labelledby` is not followed (AccName 2B), and a hidden
+ * element is included (2A). A heading with `aria-labelledby` pointing to
+ * "Attachments" and the text "Enclosures" gave the panel the name
+ * "Enclosures", while the web component thought it was "Attachments".
+ */
+function nameAsReferenced(element) {
+    return flat(textOf(element, hiddenFromAT(element), true));
+}
+/**
+ * Whether a morph from the server has been there since the web component
+ * wrote the attribute: the mark it wrote is gone. Only a value that differed
+ * from the server's word was marked (`markWritten`); one that did not has
+ * no mark to lose, and its absence says nothing. Read as a sign of the
+ * server, every unmarked tab in a row of three released a click under
+ * `server-controlled` at once.
+ */
+function markGone(element, name, word) {
+    return word.written !== word.server && !stillMarked(element, name);
+}
+/**
+ * Keyboard behaviour in a tab list, and the wiring when the markup comes
+ * without it.
+ *
+ * The tabs are links to their panels, the way GOV.UK does it:
+ *
+ * ```html
+ * <lt-tabs>
+ *   <ul class="lt-tabs__list" aria-label="Parts of the case">
+ *     <li><a href="#application">Application</a></li>
+ *     <li><a href="#attachments">Attachments</a></li>
+ *   </ul>
+ *   <section class="lt-tabs__panel" id="application"><h2>Application</h2>…</section>
+ *   <section class="lt-tabs__panel" id="attachments"><h2>Attachments</h2>…</section>
+ * </lt-tabs>
+ * ```
+ *
+ * Without JavaScript this is a table of contents with all the panels one
+ * after another, and the links work. What the template writes is an id on
+ * the panels, and it needs the links anyway.
+ *
+ * The web component never writes an id on a tab or a panel. Datastar and
+ * idiomorph recognise an element by its id, and an element with an id the
+ * server did not send is replaced at the next update, along with the tab
+ * selection and focus. The panels' ids come from the server, so they are
+ * kept. What the web component fills in, it computes from the markup: the
+ * roles, `aria-controls` from `href`, `role="presentation"` on the list
+ * items, and the panel's name, which is the tab's. The heading in the panel
+ * is the name when it says the same as the tab. Only the selected panel is a
+ * tab stop.
+ *
+ * The panels that are not selected are hidden with `hidden="until-found"`, so
+ * find in page and a link to something in a panel reach them, and the
+ * browser fires `beforematch`, which the web component selects the tab from.
+ * If the server wrote `hidden` itself, it is written back in the server's
+ * form, across the whole tab list: `lt.tabs()` from
+ * `@lo-tek/interfaces/react` gives `hidden=""`, because React cannot write
+ * `until-found`. The address selects the tab when the page loads and when it
+ * changes, and each selection is written to the address, unless it already
+ * points to the selected panel or something in it. On load the server's
+ * `aria-selected` comes before the address, and under `server-controlled`
+ * the address never selects.
+ *
+ * What the server has written stays. Which tab is selected is read from
+ * `aria-selected`, and when that is missing, from which panel is not hidden;
+ * if nothing is said, it is the first. Before the web component is
+ * registered, `tabs.css` shows only the panel the web component is going to
+ * select: the first visible one, or the one the address points to, so the
+ * content does not jump when the rest are hidden.
+ *
+ * What the web component then does is what the browser does not do by
+ * itself: Tab skips past the whole tab list and into the panel, while the
+ * arrow keys move between the tabs. With `activation="manual"` the arrow keys
+ * only move focus, and Enter or Space selects.
+ *
+ * The tab selection belongs to the user, and the web component restores it
+ * when a patch strips it. If the server needs to move the tab, as in
+ * "continue to step 2", set `server-controlled` on the host, and then every
+ * patch decides.
+ */
+export class LtTabs extends HostElement {
+    constructor() {
+        super(...arguments);
+        /** The tab list as it was when the user's tab was last found. */
+        this.chosenRow = [];
+        /**
+         * Roles the web component set itself. Tells a bare tab list, where every
+         * link is a tab, from one where the server wrote the roles, where a link
+         * without a role is something else, such as a help link.
+         */
+        this.roledByMe = new WeakSet();
+        this.selectedMemory = new WeakMap();
+        this.hiddenMemory = new WeakMap();
+        /**
+         * The form the server hides panels in, the last time it hid something:
+         * `""` from `lt.tabs()`, `"until-found"` or something else. The web
+         * component writes `hidden` in that form on every panel in the tab list,
+         * including a panel the server never hid. Otherwise one panel got
+         * `until-found` and the others `""` in the same tab list. If the server has
+         * never hidden anything, it is `until-found`, so find in page reaches the
+         * panel.
+         */
+        this.hiddenForm = "until-found";
+        /**
+         * The id the web component gave the heading in a panel, per panel. A morph
+         * strips the id from the heading and `aria-labelledby` from the panel,
+         * since neither was in the server's HTML, and the panel must get the same
+         * one back, so a screen reader does not follow a reference that changes
+         * under it.
+         */
+        this.headingIds = new WeakMap();
+        /** The name the web component wrote in `aria-label` on a panel without a heading. */
+        this.labelByMe = new WeakMap();
+        /**
+         * Whether the tab list has loaded: whether the address or the server's
+         * selection has been read. That happens the first time the tab list has
+         * tabs and the address can be resolved, see `sync()`, not when the element
+         * is connected. An `<lt-tabs>` the server fills in later otherwise always
+         * got the first tab.
+         */
+        this.started = false;
+        this.handleClick = (event) => {
+            const index = this.tabIndexOf(event);
+            if (index < 0)
+                return;
+            const tab = this.tabs[index];
+            // With a modifier the browser opens the link somewhere else, and that is
+            // the user's choice, not a tab selection.
+            if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+                return;
+            }
+            // Without this the page jumped to the panel.
+            event.preventDefault();
+            if (this.isDisabled(tab))
+                return;
+            this.select(index);
+        };
+        /** Find in page or a link revealed a hidden panel. */
+        this.handleBeforematch = (event) => {
+            // Also under `server-controlled`, like a click: the selection stands until
+            // the server answers, and `tab-select` tells the app. Otherwise the web
+            // component hid the match again in the next round.
+            const panel = event.target;
+            const index = this.tabs.findIndex((tab) => this.panelFor(tab) === panel);
+            if (index < 0 || !(panel instanceof Element))
+                return;
+            // The browser removes `hidden` on the panel itself, see `revealing`.
+            this.revealing = panel;
+            try {
+                this.select(index);
+            }
+            finally {
+                // After an event from a script, the browser reveals nothing.
+                if (event.isTrusted)
+                    setTimeout(() => this.revealed(panel), 0);
+                else
+                    this.revealing = undefined;
+            }
+        };
+        this.handleHashchange = () => {
+            this.selectFromAddress();
+        };
+        this.handleKeydown = (event) => {
+            // Every keystroke in a field in a panel comes here. The cheap checks first.
+            if (!(event.target instanceof Element))
+                return;
+            if (!event.target.closest("[role='tab']"))
+                return;
+            const tabs = this.tabs;
+            const current = this.tabIndexOf(event);
+            if (current < 0)
+                return;
+            // Alt+Left is "back" in the browser, and Cmd+arrow moves through the
+            // history on macOS. With a modifier the key is not for the tabs.
+            if (event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            // Space selects with manual activation. A link does nothing on Space by
+            // itself, and Enter sends a click, which `handleClick` handles.
+            if (this.manual && event.key === " ") {
+                event.preventDefault();
+                this.select(current);
+                return;
+            }
+            // On a page read from right to left the next tab is to the left. Without
+            // this the right arrow moved focus visually backwards.
+            const rtl = getComputedStyle(this).direction === "rtl";
+            // Up and down arrows stole page scrolling in a horizontal tab list and
+            // departed from WAI-ARIA. They apply only when the tab list says it is
+            // vertical.
+            const vertical = tabs[current]
+                .closest("[role='tablist']")
+                ?.getAttribute("aria-orientation") === "vertical";
+            const steps = vertical
+                ? { ArrowDown: 1, ArrowUp: -1 }
+                : { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 };
+            let next;
+            if (event.key in steps) {
+                next = this.nextEnabled(current, steps[event.key]);
+            }
+            else if (event.key === "Home") {
+                next = this.nextEnabled(-1, 1);
+            }
+            else if (event.key === "End") {
+                next = this.nextEnabled(tabs.length, -1);
+            }
+            if (next === undefined)
+                return;
+            event.preventDefault();
+            if (!this.manual)
+                this.select(next);
+            tabs[next].focus();
+        };
+    }
+    connectedCallback() {
+        /*
+         * The attributes are included, not just the children. A morph strips what
+         * is not in the server's HTML, and the tab selection is exactly that:
+         * something the user did after the page arrived. Every write compares
+         * first, or the observer would trigger itself.
+         */
+        // One listener on the host, not one per tab. Capture phase, so a listener
+        // on the tab list that stops the event does not take clicks and arrow
+        // keys from the tabs.
+        this.addEventListener("click", this.handleClick, true);
+        this.addEventListener("keydown", this.handleKeydown, true);
+        // Find in page, or a link to something in a panel hidden with
+        // `until-found`. On the document, not on the host: a panel can be outside
+        // `<lt-tabs>`, and then the event never reaches the host.
+        document.addEventListener("beforematch", this.handleBeforematch, true);
+        const root = this.getRootNode();
+        if (root !== document) {
+            this.root = root;
+            root.addEventListener("beforematch", this.handleBeforematch, true);
+        }
+        window.addEventListener("hashchange", this.handleHashchange);
+        this.observer = new MutationObserver((records) => {
+            if (this.concerns(records))
+                this.sync();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            // The panel's name is the tab's. idiomorph changes the text in a text
+            // node, with nothing else the observer sees.
+            characterData: true,
+            // `disabled` is included because the web component reads it: if a patch
+            // disables the selected tab, the tab stop moves to one that can take
+            // focus. `alt`, `aria-hidden` and `title` change the name of a tab.
+            attributeFilter: [
+                // A morph from the server removes the mark, and the web component
+                // puts it back: the same markup must give the same page.
+                WRITTEN,
+                "aria-selected",
+                "tabindex",
+                "hidden",
+                "disabled",
+                "aria-disabled",
+                // The wiring the web component sets when the markup came without it,
+                // and restores when a patch removes it.
+                "role",
+                "id",
+                "href",
+                "aria-controls",
+                "aria-labelledby",
+                "aria-label",
+                "alt",
+                "aria-hidden",
+                "title",
+            ],
+        });
+        this.sync();
+    }
+    attributeChangedCallback(name) {
+        // `server-controlled` switched on midway: the web component lets go, and
+        // the next patch decides.
+        if (name === SERVER_CONTROLLED && isServerControlled(this)) {
+            this.choose(undefined);
+            // What is there now is the starting point. Without this the tab list
+            // jumped back to the tab the server last named, before the user chose
+            // another. But as when the server answers a click: `aria-selected` the
+            // web component wrote is not the server's. When everything counted as
+            // the server's, it took precedence over `hidden`, and a server that
+            // moves the tab with `hidden` alone was not heard.
+            this.releasePending();
+        }
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+        this.removeEventListener("click", this.handleClick, true);
+        this.removeEventListener("keydown", this.handleKeydown, true);
+        document.removeEventListener("beforematch", this.handleBeforematch, true);
+        this.root?.removeEventListener("beforematch", this.handleBeforematch, true);
+        this.root = undefined;
+        window.removeEventListener("hashchange", this.handleHashchange);
+        // If the element is connected again, the address is read again.
+        this.started = false;
+    }
+    /**
+     * The tabs that belong to this tab list, and only those.
+     *
+     * Tabs inside tabs are ordinary markup. Without the boundary an inner tab
+     * list became part of the outer one: a click on an inner tab hid the outer
+     * panel it was in, and both web components attached listeners to the same
+     * tabs.
+     */
+    get tabs() {
+        return derivedParts(this, TAB_SELECTOR, "tab", this.roledByMe).filter((tab) => linkTarget(tab) !== null);
+    }
+    /** Remembers the user's tab: the link, and the panel it points to. */
+    choose(tab) {
+        this.chosenTab = tab;
+        this.chosenTarget = tab ? (linkTarget(tab) ?? undefined) : undefined;
+        this.chosenRow = tab ? this.tabs : [];
+    }
+    /**
+     * Where the user's tab is now, or -1: the link while it points to the same
+     * panel; the tab that points to that panel when a morph has turned the
+     * link into another tab, or dropped it and kept others (the morphers match
+     * links without ids by position, and look ahead when one is removed);
+     * none when the links were replaced, with nothing of the row left.
+     */
+    chosenIndex() {
+        const tabs = this.tabs;
+        const link = this.chosenTab;
+        if (!link || this.chosenTarget === undefined)
+            return -1;
+        const at = tabs.indexOf(link);
+        if (at >= 0 && linkTarget(link) === this.chosenTarget) {
+            this.chosenRow = tabs;
+            return at;
+        }
+        const morphed = at >= 0 || this.chosenRow.some((tab) => tabs.includes(tab));
+        if (!morphed)
+            return -1;
+        const moved = tabs.findIndex((tab) => linkTarget(tab) === this.chosenTarget);
+        if (moved >= 0) {
+            this.chosenTab = tabs[moved];
+            this.chosenRow = tabs;
+        }
+        return moved;
+    }
+    /** The server's word about an attribute, against what the web component last wrote. */
+    serverWord(memory, element, name) {
+        const now = element.getAttribute(name);
+        const known = memory.get(element);
+        if (!known) {
+            warnAboutCopiedMark(this, element);
+            return now;
+        }
+        // The server's when the value is another, or when a morph from the
+        // server has been there since the web component wrote it (`WRITTEN`).
+        return now !== known.written || !stillMarked(element, name)
+            ? now
+            : known.server;
+    }
+    /** Is there something on a tab or a panel other than what the web component wrote? */
+    touchedByOthers() {
+        return this.tabs.some((tab) => {
+            const selected = this.selectedMemory.get(tab);
+            if (!selected ||
+                tab.getAttribute("aria-selected") !== selected.written ||
+                markGone(tab, "aria-selected", selected)) {
+                return true;
+            }
+            const panel = this.panelFor(tab);
+            if (!panel)
+                return false;
+            const hidden = this.hiddenMemory.get(panel);
+            return (!hidden ||
+                panel.getAttribute("hidden") !== hidden.written ||
+                markGone(panel, "hidden", hidden));
+        });
+    }
+    /**
+     * Releases the click, and makes what is in the markup now the server's
+     * word.
+     *
+     * The memory holds the server's word from before the click, and it is
+     * stale: the server has answered. An attribute the server wrote the same as
+     * the web component cannot be told from one it did not touch, so the old
+     * words won, and the tab list jumped back to the tab from before the click
+     * just as the server confirmed the new one.
+     *
+     * `hidden` on the panels is therefore read as it is. `aria-selected` is read
+     * as it is when the server has touched at least one tab, that is, when the
+     * server speaks through `aria-selected`. If it has not, the values are the
+     * ones the web component wrote for the click, and then the panels say which
+     * tab applies.
+     */
+    releasePending() {
+        this.pendingTab = undefined;
+        const tabs = this.tabs;
+        const serverSpoke = tabs.some((tab) => {
+            const now = tab.getAttribute("aria-selected");
+            const known = this.selectedMemory.get(tab);
+            // A new, bare tab has said nothing. Had it counted, the click's
+            // `aria-selected` was read as the server's, and a later move with
+            // `hidden` alone was undone.
+            return known
+                ? now !== known.written || markGone(tab, "aria-selected", known)
+                : now !== null;
+        });
+        this.hiddenMemory = new WeakMap();
+        if (serverSpoke) {
+            this.selectedMemory = new WeakMap();
+            return;
+        }
+        for (const tab of tabs) {
+            const written = tab.getAttribute("aria-selected");
+            this.selectedMemory.set(tab, { written, server: null });
+            markWritten(tab, "aria-selected", written !== null);
+        }
+    }
+    serverSelected(tab) {
+        return this.serverWord(this.selectedMemory, tab, "aria-selected");
+    }
+    /** The server's word about `hidden` on the panel: the form, or `null` for visible. */
+    serverHidden(panel) {
+        return this.serverWord(this.hiddenMemory, panel, "hidden");
+    }
+    /**
+     * Can any of the changes concern the tab list?
+     *
+     * The observer sees the whole tree, and a suggestion field, a counter or an
+     * inner tab list in a panel changes `aria-selected`, `hidden` and text on
+     * every keystroke. Each of them gave a full round, with styles read for the
+     * names. Only what is deep inside one of the tab list's panels is skipped,
+     * and only when it is neither a heading in the panel, something
+     * `aria-labelledby` points to, nor an id, which can make an element
+     * something a tab points to. Everything else gives a round, as before.
+     */
+    concerns(records) {
+        let panels;
+        let names;
+        for (const record of records) {
+            if (record.type === "attributes" && record.attributeName === "id")
+                return true;
+            const target = record.target instanceof Element
+                ? record.target
+                : record.target.parentElement;
+            if (!target)
+                return true;
+            panels ??= this.tabs.flatMap((tab) => this.panelFor(tab) ?? []);
+            const panel = panels.find((p) => p !== target && p.contains(target));
+            if (!panel)
+                return true;
+            const heading = target.closest("h1, h2, h3, h4, h5, h6");
+            if (heading && heading.parentElement === panel)
+                return true;
+            names ??= this.watchedIds(panels);
+            if (this.within(target, names))
+                return true;
+            if (record.type === "childList") {
+                for (const node of [...record.addedNodes, ...record.removedNodes])
+                    if (this.carries(node, names))
+                        return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * The ids `aria-labelledby` points to from the tabs, what is inside them,
+     * and the panels. Before the tab list has loaded, also the id the address
+     * points to: the tab list waits for that element, see `sync()`, and it can
+     * arrive deep inside a panel.
+     */
+    watchedIds(panels) {
+        const ids = new Set();
+        if (!this.started) {
+            const hash = location.hash.slice(1);
+            if (hash !== "")
+                ids.add(hash);
+            const plain = decoded(hash);
+            if (plain !== null)
+                ids.add(plain);
+        }
+        const from = (element) => {
+            for (const id of (element.getAttribute("aria-labelledby") ?? "").split(/\s+/))
+                if (id !== "")
+                    ids.add(id);
+        };
+        for (const tab of this.tabs) {
+            from(tab);
+            for (const inner of tab.querySelectorAll("[aria-labelledby]"))
+                from(inner);
+        }
+        for (const panel of panels)
+            from(panel);
+        return ids;
+    }
+    /** Is the element inside an element with one of the ids, or is it one itself? */
+    within(element, ids) {
+        if (ids.size === 0)
+            return false;
+        for (let e = element; e; e = e.parentElement)
+            if (e.id && ids.has(e.id))
+                return true;
+        return false;
+    }
+    /** Does an added or removed node carry one of the ids, itself or inside it? */
+    carries(node, ids) {
+        if (!(node instanceof Element) || ids.size === 0)
+            return false;
+        if (node.id && ids.has(node.id))
+            return true;
+        for (const inner of node.querySelectorAll("[id]"))
+            if (ids.has(inner.id))
+                return true;
+        return false;
+    }
+    /** The tab list the tabs are in, when it belongs to this web component. */
+    get list() {
+        // The first tab list that belongs to this web component, not the first in
+        // the tree: when the panels with an inner tab list come before the outer
+        // tab list, the inner one was first.
+        for (const list of this.querySelectorAll(LIST_SELECTOR))
+            if (list.closest(this.localName) === this)
+                return list;
+        return null;
+    }
+    /**
+     * The panel a tab controls, through the id it points to.
+     *
+     * The panel can be outside the host. It is then not in what the web
+     * component observes, so if a patch strips `hidden` from it, it does not
+     * come back by itself. If the tab points to nothing, the answer is nothing,
+     * and the web component warns. The order is not a fallback: two tabs could
+     * then have got the same panel, and the two wrote opposite `hidden` on it in
+     * every single round.
+     */
+    panelFor(tab) {
+        const target = linkTarget(tab);
+        return target === null ? null : this.byFragment(target);
+    }
+    /** The element a fragment points to, as written or decoded. */
+    byFragment(fragment) {
+        const root = this.getRootNode();
+        const found = root.getElementById?.(fragment);
+        if (found)
+            return found;
+        // A fragment can be encoded, such as `#s%C3%B8knaden`.
+        const plain = decoded(fragment);
+        return plain === null ? null : (root.getElementById?.(plain) ?? null);
+    }
+    /**
+     * A tab that cannot be selected, with either mouse or keyboard: disabled,
+     * or hidden with `hidden`. A hidden tab cannot take focus, so when an arrow
+     * key selected it, the tab stop was left on something Tab never reaches.
+     */
+    isDisabled(tab) {
+        return (tab.hasAttribute("disabled") ||
+            tab.getAttribute("aria-disabled") === "true" ||
+            tab.hasAttribute("hidden"));
+    }
+    /** The arrow keys only move focus, and Enter or Space selects. */
+    get manual() {
+        return this.getAttribute("activation") === "manual";
+    }
+    /**
+     * The index of the marked tab, or `-1` when none is.
+     *
+     * `selected` answers 0 in that case, because it is public API and a tab
+     * list in practice always has a selected tab. But that lie cannot be used
+     * internally: when it said 0 with nothing marked, `select(0)` returned at
+     * once, and the tab list did not respond to a click at all.
+     */
+    get markedIndex() {
+        return this.tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+    }
+    /** The index of the selected tab. */
+    get selected() {
+        const index = this.markedIndex;
+        return index < 0 ? 0 : index;
+    }
+    set selected(index) {
+        // React 19 writes the property when it exists, and the documentation
+        // shows `tabs.selected` as API. A getter alone threw on assignment.
+        this.select(index);
+    }
+    sync() {
+        /*
+         * The first time the tab list has tabs, it has loaded. If the server has
+         * said which tab is selected, that applies: the server cannot see the
+         * address, and the React entry's `lt.tabs()` writes `aria-selected`.
+         * When the web component selected from the address before React
+         * hydrated, React reported a mismatch for every attribute it changed.
+         * Otherwise the address selects. The server's word is read before the
+         * web component writes anything.
+         */
+        // Loaded when the tab list has tabs and the address can be resolved: it
+        // is empty, or the element it points to exists. When the tab list came
+        // before the panels, or the content after the panel, the address
+        // otherwise found nothing, and the first tab was selected over the one
+        // the user asked for. Waiting for every tab to have a panel was not
+        // enough: with one link pointing to nothing, the tab list never loaded.
+        // If the address points to something that never comes, such as
+        // `#/case/1`, there is nothing to select either. The server's word is read
+        // through the memory, so a new connection does not take the web
+        // component's writes for the server's.
+        const tabs = this.tabs;
+        const hash = location.hash.slice(1);
+        const loading = !this.started &&
+            tabs.length > 0 &&
+            (hash === "" || this.byFragment(hash) !== null);
+        const serverChose = loading && tabs.some((tab) => this.serverSelected(tab) === "true");
+        this.wire();
+        this.bind();
+        this.repair();
+        if (!loading)
+            return;
+        this.started = true;
+        if (serverChose)
+            this.alignAddress(this.markedIndex);
+        else
+            this.selectFromAddress();
+    }
+    /**
+     * Fills in the wiring where the markup came without it.
+     *
+     * Only what is missing, with one exception: `aria-controls` is written from
+     * `href`, since the two are the same information and `href` is the one that
+     * works without JavaScript. Any other attribute the server has written is
+     * the server's word, even when it says something other than the web
+     * component would have said.
+     */
+    wire() {
+        const list = this.list;
+        if (list && !list.hasAttribute("role"))
+            setAttr(list, "role", "tablist");
+        // In a list each list item is only a wrapper around the tab. Without the
+        // role a screen reader says "list, 2 items" before each tab.
+        if (list && (list.localName === "ul" || list.localName === "ol")) {
+            for (const item of list.children) {
+                if (item.localName === "li" && !item.hasAttribute("role")) {
+                    setAttr(item, "role", "presentation");
+                }
+            }
+        }
+        /*
+         * Each panel gets its name once, from the first tab that points to it.
+         * When two tabs pointed to the same one, through a mistake in the markup,
+         * each of them gave the panel its name in every round, and the observer
+         * called itself forever.
+         */
+        const named = new Set();
+        for (const tab of this.tabs) {
+            if (!tab.hasAttribute("role")) {
+                setAttr(tab, "role", "tab");
+                this.roledByMe.add(tab);
+            }
+            const panel = this.panelFor(tab);
+            setAttr(tab, "aria-controls", panel?.id ?? linkTarget(tab));
+            if (!panel)
+                continue;
+            if (!panel.hasAttribute("role")) {
+                setAttr(panel, "role", "tabpanel");
+                this.roledByMe.add(panel);
+            }
+            if (named.has(panel))
+                continue;
+            named.add(panel);
+            this.name(panel, tab);
+        }
+    }
+    /**
+     * Gives the panel a name, when the server has not given it one.
+     *
+     * The panel is named what the tab is named, as the APG does it. The APG
+     * lets the panel point to the tab, but the tab has no id here, and the web
+     * component writes none. If the heading in the panel says the same as the
+     * tab, the heading is the name, and it can get an id from the web
+     * component: it has no state the user can lose. Otherwise the name is the
+     * tab's, as `aria-label`.
+     *
+     * An `aria-label` or `aria-labelledby` the server wrote is never changed,
+     * even when the reference points to something that does not exist yet.
+     * Until it arrives, the tab's name stands as `aria-label`: a reference
+     * without a match is ignored when the name is computed, and then
+     * `aria-label` applies.
+     */
+    name(panel, tab) {
+        const ownLabel = this.labelByMe.get(panel);
+        const label = panel.getAttribute("aria-label");
+        if (label !== null && label !== ownLabel)
+            return;
+        const tabName = accessibleName(tab);
+        const named = panel.getAttribute("aria-labelledby");
+        const remembered = this.headingIds.get(panel);
+        if (named !== null && named !== remembered) {
+            if (this.resolves(named))
+                this.dropOwnLabel(panel);
+            else
+                this.setOwnLabel(panel, tabName);
+            return;
+        }
+        // Without a name on the tab there is nothing to give the panel. An empty
+        // `aria-label` would also have taken the name from the heading.
+        if (tabName === "") {
+            this.dropOwnLabel(panel);
+            return;
+        }
+        const heading = panel.querySelector(HEADING_SELECTOR);
+        if (heading && nameAsReferenced(heading) === tabName) {
+            this.dropOwnLabel(panel);
+            // If the reference is the web component's, and the heading lost its id
+            // in a morph, it gets the same one back.
+            let id = heading.id;
+            if (!id) {
+                id = remembered ?? uniqueId("lt-tabs-heading");
+                setAttr(heading, "id", id);
+            }
+            this.headingIds.set(panel, id);
+            setAttr(panel, "aria-labelledby", id);
+            return;
+        }
+        if (named !== null) {
+            setAttr(panel, "aria-labelledby", null);
+            this.headingIds.delete(panel);
+        }
+        this.setOwnLabel(panel, tabName);
+    }
+    /** Writes the tab's name as `aria-label`, and remembers that the web component wrote it. */
+    setOwnLabel(panel, text) {
+        setAttr(panel, "aria-label", text);
+        this.labelByMe.set(panel, text);
+    }
+    /** Removes the fallback, when a name that exists has taken over. */
+    dropOwnLabel(panel) {
+        if (!this.labelByMe.has(panel))
+            return;
+        setAttr(panel, "aria-label", null);
+        this.labelByMe.delete(panel);
+    }
+    /** Does at least one of the ids point to an element that exists? */
+    resolves(ids) {
+        const root = this.getRootNode();
+        return ids
+            .split(/\s+/)
+            .some((id) => id !== "" && (root.getElementById?.(id) ?? null) !== null);
+    }
+    /**
+     * The tab the server says is selected, when the user has not selected
+     * anything.
+     *
+     * The server's word, not what is there: what the web component wrote does
+     * not count, see `Word`. `aria-selected` first. When that is missing, as in
+     * markup written without JavaScript, `hidden` on the panels says the same:
+     * the first panel the server shows belongs to the selected tab. If the
+     * markup says nothing, or hides every panel, it is the first, which is what
+     * a tab list starts on anyway.
+     */
+    get derivedIndex() {
+        const tabs = this.tabs;
+        const marked = tabs.findIndex((tab) => this.serverSelected(tab) === "true");
+        if (marked >= 0)
+            return marked;
+        const shown = tabs.findIndex((tab) => {
+            const panel = this.panelFor(tab);
+            return panel !== null && this.serverHidden(panel) === null;
+        });
+        return shown < 0 ? 0 : shown;
+    }
+    /**
+     * Restores the user's selection after a patch.
+     *
+     * Without this the template had to write
+     * `data-preserve-attr="aria-selected tabindex"` on every tab and `hidden` on
+     * every panel, that is, list the attributes the web component was going to
+     * touch. No compiler looked at that list.
+     *
+     * `apply()` is called whether or not the tabs look right, because a patch
+     * may have touched only the panels. That is the narrow patch the
+     * documentation itself recommends, and a check on `aria-selected` alone did
+     * not see it: the tab said one thing and the screen another.
+     */
+    repair() {
+        if (this.pendingTab) {
+            const index = this.tabs.indexOf(this.pendingTab);
+            if (isServerControlled(this) && index >= 0 && !this.touchedByOthers()) {
+                this.apply(index);
+                return;
+            }
+            this.releasePending();
+        }
+        if (this.chosenTarget === undefined || isServerControlled(this)) {
+            /*
+             * No user selection to restore, so the server's word decides, and it
+             * is written out in full: `aria-selected`, the tab stop and `hidden` in
+             * step. Bare structure without `aria-selected` thus gets the first tab
+             * selected and the other panels hidden, and a patch that only touched
+             * the panels also moves the selection. That applies under
+             * `server-controlled` too: the web component does not restore the
+             * user's selection there, but still writes out what the server's
+             * markup says. If everything already matches, `apply()` writes nothing.
+             */
+            if (this.tabs.length > 0) {
+                const index = this.derivedIndex;
+                this.apply(index);
+                if (this.started)
+                    this.alignAddress(index);
+            }
+            return;
+        }
+        const chosen = this.chosenTarget;
+        const index = this.chosenIndex();
+        if (index < 0) {
+            /*
+             * The tab no longer exists. The server has sent something else, and
+             * then the server's markup applies.
+             *
+             * With one exception: the markup must hang together afterwards. When
+             * the patch removed the marked tab, the tab list is left without a
+             * single `aria-selected="true"`, every panel is hidden, and a click
+             * does nothing. The web component then selects what the server's
+             * markup says, the same way as when the user had not selected
+             * anything: `aria-selected`, then the first panel the server shows,
+             * then the first tab.
+             *
+             * The selection is announced with an event, because it was made by the
+             * web component and not by the user. Without the event an app that
+             * loads the panel's content or writes the selection to the address
+             * would never learn that it moved.
+             */
+            const lostPanel = chosen === undefined ? null : this.byFragment(chosen);
+            this.choose(undefined);
+            // The server marked a tab itself. Then that applies, and the panels and
+            // the tab stop are written to match it, even when nothing else gave the
+            // observer another round.
+            if (this.markedIndex >= 0) {
+                const marked = this.derivedIndex;
+                this.apply(marked);
+                this.alignAddress(marked);
+                return;
+            }
+            if (this.tabs.length > 0) {
+                // The address says which tab the user was on, and is the only thing
+                // that survives the links being replaced. If it is the same panel as
+                // before, the selection has not changed, only the links, and then
+                // nothing is announced.
+                const fromAddress = this.addressIndex;
+                const index = fromAddress >= 0 ? fromAddress : this.derivedIndex;
+                const tab = this.tabs[index];
+                this.apply(index);
+                if (this.panelFor(tab) === lostPanel) {
+                    this.choose(tab);
+                    return;
+                }
+                if (fromAddress >= 0)
+                    this.choose(tab);
+                this.showInAddress(index);
+                this.notify(index);
+            }
+            return;
+        }
+        this.apply(index);
+    }
+    bind() {
+        const tabs = this.tabs;
+        if (tabs.length === 0) {
+            warnAboutMarkup(this, "found no tabs. The tab list needs a .lt-tabs__list with links " +
+                'to the panels, such as <a href="#attachments">; without them a ' +
+                'screen reader says "link" where it should say "tab, 2 of 3, ' +
+                'selected", and the arrow keys do nothing.', 
+            // An empty `<lt-tabs>` is a region the server has not filled yet,
+            // and that is not a mistake in the markup.
+            () => this.childElementCount > 0 && this.tabs.length === 0);
+            return;
+        }
+        // Without the numbers in the message. If it interpolates a number, every
+        // round is a new message, and the warning comes again for every panel
+        // that appears instead of once.
+        warnAboutMarkup(this, "has tabs without a panel: a link points to an id that does not " +
+            "exist. Write an id on each .lt-tabs__panel, the same one the " +
+            "link points to, or the tabs without a panel can be selected " +
+            "without anything being shown.", () => this.tabs.some((tab) => this.panelFor(tab) === null));
+        warnAboutMarkup(this, 'has a tab without href: role="tab" is on something that is not ' +
+            "a link to a panel. Tabs are links, such as <a " +
+            'href="#attachments">, so they work without JavaScript, and the ' +
+            "component leaves anything that is not a link alone.", () => this.nonLinkTabs().length > 0);
+        warnAboutMarkup(this, "has a tab list without a name. Write aria-label on " +
+            '.lt-tabs__list, such as aria-label="Parts of the case", or ' +
+            "aria-labelledby pointing to a heading; without a name a screen " +
+            'reader only says "tab list".', () => {
+            const list = this.list;
+            if (!list || this.tabs.length === 0)
+                return false;
+            const label = list.getAttribute("aria-label");
+            const labelledby = list.getAttribute("aria-labelledby");
+            return ((label === null || flat(label) === "") &&
+                (labelledby === null || !this.resolves(labelledby)));
+        });
+    }
+    /** What the server has called a tab in the tab list, but is not a link to a panel. */
+    nonLinkTabs() {
+        const list = this.list;
+        if (!list)
+            return [];
+        const tabs = new Set(this.tabs);
+        return [...list.querySelectorAll(ANY_TAB_SELECTOR)].filter((e) => e.closest(this.localName) === this && !tabs.has(e));
+    }
+    /**
+     * The tab in this tab list the event came from, or -1.
+     *
+     * `indexOf` and not just `closest`: a tab list inside a panel bubbles its
+     * clicks up here too, and they do not belong to this tab list.
+     */
+    tabIndexOf(event) {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return -1;
+        const tab = target.closest("[role='tab']");
+        return tab ? this.tabs.indexOf(tab) : -1;
+    }
+    /**
+     * Releases the panel after `beforematch`, in the task after the browser has
+     * finished revealing, and writes the tab list.
+     *
+     * Usually the browser has removed `hidden` by then. It has not when the
+     * panel was taken out of the document during the event, and without this
+     * round the panel stayed hidden even though the tab was selected.
+     */
+    revealed(panel) {
+        if (this.revealing !== panel)
+            return;
+        this.revealing = undefined;
+        if (this.isConnected)
+            this.sync();
+    }
+    /**
+     * The index of the tab the address points to, or -1: the panel itself, such
+     * as `#attachments`, or something inside it, such as a heading in the panel.
+     */
+    get addressIndex() {
+        const hash = location.hash.slice(1);
+        if (!hash)
+            return -1;
+        const target = this.byFragment(hash);
+        if (!target)
+            return -1;
+        return this.tabs.findIndex((tab) => {
+            const panel = this.panelFor(tab);
+            return panel !== null && (panel === target || panel.contains(target));
+        });
+    }
+    /**
+     * Corrects the address when it points to another tab in the tab list than
+     * the selected one, as when the server has moved the selection. An address
+     * to something outside the tab list stays.
+     */
+    alignAddress(index) {
+        const pointsAt = this.addressIndex;
+        if (pointsAt >= 0 && pointsAt !== index)
+            this.showInAddress(index);
+    }
+    /**
+     * Writes the tab to the address, so it can be shared, and so the selection
+     * survives the server replacing the links.
+     *
+     * If the address already points to the selected panel or something in it,
+     * it stays: a link into the content must not be lost. `replaceState`, so
+     * the selection does not become an entry in the history.
+     */
+    showInAddress(index) {
+        const tab = this.tabs[index];
+        const panel = tab ? this.panelFor(tab) : null;
+        if (!tab || !panel)
+            return;
+        if (this.addressIndex === index)
+            return;
+        // Resolved against the page's address, not against `<base>`: with
+        // `<base href="/">`, which Angular has, the path was replaced silently,
+        // and with a `<base>` to another origin `replaceState` threw.
+        const url = new URL(tab.getAttribute("href") ?? "", location.href).href;
+        try {
+            history.replaceState(history.state, "", url);
+        }
+        catch {
+            // Safari throws after a hundred calls in ten seconds. The address is an
+            // extra, so the selection applies anyway.
+        }
+    }
+    /**
+     * Selects the tab the address points to.
+     *
+     * On load, on `hashchange`, and when the server replaces the links without
+     * saying which one is selected: the selection is then still in the
+     * address. Not under `server-controlled`, where the server decides.
+     */
+    selectFromAddress() {
+        if (isServerControlled(this))
+            return;
+        const index = this.addressIndex;
+        if (index >= 0)
+            this.select(index);
+    }
+    /**
+     * The next tab that can be selected, in one direction, wrapping round if
+     * needed.
+     *
+     * A tab that cannot be selected is skipped. When a hidden tab was selected,
+     * it got the tab stop, and Tab never reached the tab list. The keyboard
+     * user was locked out.
+     */
+    nextEnabled(from, step) {
+        const tabs = this.tabs;
+        for (let i = 1; i <= tabs.length; i++) {
+            const index = (from + step * i + tabs.length * i) % tabs.length;
+            if (!this.isDisabled(tabs[index]))
+                return index;
+        }
+        return undefined;
+    }
+    /** Selects a tab and fires the event. */
+    select(index) {
+        const tabs = this.tabs;
+        if (index < 0 || index >= tabs.length)
+            return;
+        if (this.isDisabled(tabs[index]))
+            return;
+        // `markedIndex` and not `selected`: the latter answers 0 also when nothing
+        // is marked, and then the first tab could never be selected.
+        if (index === this.markedIndex)
+            return;
+        // No memory when the server decides the selection. Without this a
+        // selection made while the attribute was there would be restored the
+        // moment someone removed it again.
+        if (!isServerControlled(this))
+            this.choose(tabs[index]);
+        this.apply(index);
+        if (isServerControlled(this))
+            this.pendingTab = tabs[index];
+        this.showInAddress(index);
+        this.notify(index);
+    }
+    /** Announces which tab is selected now. */
+    notify(index) {
+        this.dispatchEvent(new CustomEvent("tab-select", {
+            detail: { index },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Writes the selection out into the markup.
+     *
+     * Every write compares first. The web component observes the same
+     * attributes it sets, so a write without a comparison would trigger the
+     * observer, which would write again, forever.
+     */
+    apply(index) {
+        const tabs = this.tabs;
+        /*
+         * The tab stop is the selected tab, unless a patch has disabled or hidden
+         * it. Then the next tab that can be selected gets it, or Tab skips past
+         * the whole tab list.
+         */
+        const stop = this.isDisabled(tabs[index])
+            ? (this.nextEnabled(index, 1) ?? index)
+            : index;
+        /*
+         * A panel is visible when any tab pointing to it is selected, and is
+         * written once. When two tabs point to the same one, through a mistake in
+         * the markup, they would otherwise write opposite `hidden` on it in every
+         * round, and the page would freeze.
+         */
+        const panels = new Map();
+        tabs.forEach((tab, i) => {
+            const chosen = i === index;
+            // The server's word is noted before the write, or the write was read as
+            // the server's in the next round.
+            const server = this.serverSelected(tab);
+            setAttr(tab, "aria-selected", String(chosen));
+            this.selectedMemory.set(tab, { written: String(chosen), server });
+            markWritten(tab, "aria-selected", String(chosen) !== server);
+            setAttr(tab, "tabindex", i === stop ? "0" : "-1");
+            const panel = this.panelFor(tab);
+            if (panel)
+                panels.set(panel, (panels.get(panel) ?? false) || chosen);
+        });
+        // The form is read from a panel the server hides before anything is
+        // written, or a panel to be hidden first in the tab list was written in a
+        // different form from the ones the server hides.
+        for (const panel of panels.keys()) {
+            const form = this.serverHidden(panel);
+            if (form !== null) {
+                this.hiddenForm = form;
+                break;
+            }
+        }
+        for (const [panel, shown] of panels) {
+            const server = this.serverHidden(panel);
+            const written = shown ? null : this.hiddenForm;
+            if (panel !== this.revealing) {
+                if (written === null)
+                    setFlag(panel, "hidden", false);
+                else
+                    setAttr(panel, "hidden", written);
+                this.hiddenMemory.set(panel, { written, server });
+                markWritten(panel, "hidden", written !== server);
+            }
+            /*
+             * Only the selected panel is a tab stop, so Tab from the tab list goes
+             * straight into the content that was just shown. A panel with
+             * `hidden="until-found"` keeps its box, so with `tabindex="0"` it was
+             * an invisible stop for the keyboard. Another value the server wrote,
+             * such as `-1`, stays.
+             */
+            const tabindex = panel.getAttribute("tabindex");
+            if (shown && tabindex === null)
+                setAttr(panel, "tabindex", "0");
+            else if (!shown && tabindex === "0")
+                setAttr(panel, "tabindex", null);
+        }
+    }
+}
+/**
+ * `server-controlled` and `activation`. Which tab is selected is in the
+ * markup the server sent, as `aria-selected` on the tab and `hidden` on the
+ * panels, and is read from there. A separate `selected` would have been a
+ * parallel copy of the same thing.
+ */
+LtTabs.observedAttributes = [SERVER_CONTROLLED, "activation"];
+export function defineLtTabs(tagName = LT_TABS_TAG) {
+    defineElement(tagName, LtTabs);
+}
+//# sourceMappingURL=lt-tabs.js.map