@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/menu.js

@@ -1,1103 +0,0 @@
-import { base, findFocusable } from "./shared.js";
-const nextId = (() => { let value = 0; return () => `spui-menu-${++value}`; })();
-export function defineMenuItem() {
-    if (customElements.get("spui-menu-item"))
-        return;
-    class SpuiMenuItem extends HTMLElement {
-        static observedAttributes = ["disabled", "kind", "checked", "value", "name", "aria-haspopup", "aria-controls", "aria-expanded", "persist-on-click", "has-submenu"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render();
-        else
-            this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        get checked() { return this.hasAttribute("checked"); }
-        set checked(value) { this.toggleAttribute("checked", Boolean(value)); }
-        focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
-        refreshMenuListState() { this.sync(); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}button{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:var(--spui-menu-item-radius,4px);background:transparent;color:inherit;text-align:start;font:inherit;line-height:1.35;cursor:pointer}button:hover:not([aria-disabled=true]),button:focus-visible{background:var(--spui-menu-item-hover,var(--spui-ui-surface-hover,#f5f5f5))}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}button[aria-disabled=true]{opacity:.5;cursor:not-allowed}.check,.icon{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;color:var(--spui-ui-accent,var(--spui-semantic-accent,#0078d4));font-size:14px}.label{display:grid;min-width:0;flex:1}.content{min-width:0}.subtext,.secondary{color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#605e5c));font-size:.85em}.secondary{margin-inline-start:auto;white-space:nowrap}.submenu-indicator{display:inline-grid;place-items:center;flex:none;margin-inline-start:auto;font-size:1.25em;line-height:1}.submenu-indicator[hidden]{display:none!important}slot[name=checkmark],slot[name=content],slot[name=submenuIndicator]{display:contents}:host([kind=switch]) .check{position:relative;width:30px;height:18px;border-radius:999px;background:var(--spui-ui-stroke,#8a8886);color:transparent}:host([kind=switch][checked]) .check{background:var(--spui-ui-accent,#0078d4)}:host([kind=switch]) .check::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:var(--spui-ui-surface,#fff);transition:inset-inline-start var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,ease)}:host([kind=switch][checked]) .check::after{inset-inline-start:14px}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.check::after{transition:none}}@media(forced-colors:active){button:focus-visible{outline-color:Highlight}:host([kind=switch]) .check{border:1px solid ButtonText}}`;
-            style.textContent += ":host([kind=switch][has-switch-indicator]) .check::after{display:none}:host([kind=switch]) slot[name=switch-indicator]{display:contents}";
-            const button = document.createElement("button");
-            button.type = "button";
-            const marker = document.createElement("span");
-            marker.className = "check";
-            marker.setAttribute("aria-hidden", "true");
-            const markerText = document.createElement("span");
-            markerText.className = "checkmark";
-            const checkmarkSlot = document.createElement("slot");
-            checkmarkSlot.name = "checkmark";
-            checkmarkSlot.append(markerText);
-            checkmarkSlot.addEventListener("slotchange", () => this.sync());
-            const switchIndicator = document.createElement("slot");
-            switchIndicator.name = "switch-indicator";
-            switchIndicator.addEventListener("slotchange", () => this.toggleAttribute("has-switch-indicator", switchIndicator.assignedNodes({ flatten: true }).length > 0));
-            marker.append(checkmarkSlot, switchIndicator);
-            const icon = document.createElement("span");
-            icon.className = "icon";
-            icon.setAttribute("aria-hidden", "true");
-            const iconSlot = document.createElement("slot");
-            iconSlot.name = "icon";
-            icon.append(iconSlot);
-            const label = document.createElement("span");
-            label.className = "label";
-            const content = document.createElement("span");
-            content.className = "content";
-            const contentSlot = document.createElement("slot");
-            contentSlot.name = "content";
-            contentSlot.append(document.createElement("slot"));
-            contentSlot.addEventListener("slotchange", () => this.sync());
-            content.append(contentSlot);
-            const subtext = document.createElement("span");
-            subtext.className = "subtext";
-            const subtextSlot = document.createElement("slot");
-            subtextSlot.name = "subtext";
-            subtext.append(subtextSlot);
-            label.append(content, subtext);
-            const secondary = document.createElement("span");
-            secondary.className = "secondary";
-            const secondarySlot = document.createElement("slot");
-            secondarySlot.name = "secondary-content";
-            secondary.append(secondarySlot);
-            const submenuIndicator = document.createElement("span");
-            submenuIndicator.className = "submenu-indicator";
-            submenuIndicator.hidden = true;
-            submenuIndicator.setAttribute("aria-hidden", "true");
-            const submenuSlot = document.createElement("slot");
-            submenuSlot.name = "submenuIndicator";
-            const defaultSubmenuIndicator = document.createElement("span");
-            defaultSubmenuIndicator.textContent = "›";
-            submenuSlot.append(defaultSubmenuIndicator);
-            submenuIndicator.append(submenuSlot);
-            for (const slot of [iconSlot, subtextSlot, secondarySlot, submenuSlot])
-                slot.addEventListener("slotchange", () => this.sync());
-            button.append(marker, icon, label, secondary, submenuIndicator);
-            button.addEventListener("click", (event) => {
-                if (this.hasAttribute("disabled"))
-                    return;
-                if (this.getAttribute("aria-haspopup") === "menu")
-                    return;
-                const kind = this.getAttribute("kind");
-                if (kind === "checkbox" || kind === "switch")
-                    this.checked = !this.checked;
-                else if (kind === "radio")
-                    this.checked = true;
-                this.dispatchEvent(new CustomEvent("spui-select", { bubbles: true, composed: true, detail: { value: this.getAttribute("value") ?? "", name: this.getAttribute("name") ?? "", label: this.textContent?.trim() ?? "", checked: this.checked, kind, persistOnClick: this.hasAttribute("persist-on-click"), event } }));
-            });
-            shadow.append(style, button);
-            this.sync();
-        }
-        sync() {
-            const button = this.shadowRoot?.querySelector("button");
-            if (!button)
-                return;
-            const kind = this.getAttribute("kind");
-            button.disabled = false;
-            button.setAttribute("aria-disabled", String(this.hasAttribute("disabled")));
-            button.setAttribute("role", kind === "checkbox" || kind === "switch" ? "menuitemcheckbox" : kind === "radio" ? "menuitemradio" : "menuitem");
-            button.tabIndex = -1;
-            if (kind === "checkbox" || kind === "radio" || kind === "switch")
-                button.setAttribute("aria-checked", String(this.checked));
-            else
-                button.removeAttribute("aria-checked");
-            if (this.hasAttribute("has-submenu")) {
-                button.setAttribute("aria-haspopup", "menu");
-                button.setAttribute("aria-expanded", this.getAttribute("aria-expanded") ?? "false");
-            }
-            const submenuIndicator = this.shadowRoot?.querySelector(".submenu-indicator");
-            if (submenuIndicator)
-                submenuIndicator.hidden = !this.hasAttribute("has-submenu");
-            for (const name of ["aria-haspopup", "aria-controls", "aria-expanded"]) {
-                const value = this.getAttribute(name);
-                if (value === null) {
-                    if (!(name === "aria-haspopup" && this.hasAttribute("has-submenu")) && !(name === "aria-expanded" && this.hasAttribute("has-submenu")))
-                        button.removeAttribute(name);
-                }
-                else
-                    button.setAttribute(name, value);
-            }
-            const marker = this.shadowRoot?.querySelector(".check");
-            if (marker)
-                marker.hidden = !(kind === "switch" || this.checked && (kind === "checkbox" || kind === "radio"));
-            const markerText = this.shadowRoot?.querySelector(".checkmark");
-            if (markerText)
-                markerText.textContent = kind === "radio" ? "●" : kind === "switch" ? "" : "✓";
-            const list = this.closest("[has-checkmarks], spui-menu-list[has-checkmarks]");
-            if (marker && list?.hasAttribute("has-checkmarks") && kind !== "switch")
-                marker.hidden = false;
-            const icon = this.shadowRoot?.querySelector(".icon");
-            const iconSlot = this.shadowRoot?.querySelector("slot[name=icon]");
-            if (icon && iconSlot)
-                icon.hidden = !this.closest("[has-icons], spui-menu-list[has-icons]")?.hasAttribute("has-icons") && iconSlot.assignedNodes().length === 0;
-            for (const slotName of ["subtext", "secondary-content"]) {
-                const slot = this.shadowRoot?.querySelector(`slot[name=${slotName}]`);
-                const host = slot?.parentElement;
-                if (host && slot)
-                    host.hidden = slot.assignedNodes().length === 0;
-            }
-        }
-    }
-    customElements.define("spui-menu-item", SpuiMenuItem);
-}
-export function defineMenuDivider() {
-    if (customElements.get("spui-menu-divider"))
-        return;
-    class SpuiMenuDivider extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            if (!this.hasAttribute("role"))
-                this.setAttribute("role", "presentation");
-            if (!this.hasAttribute("aria-hidden"))
-                this.setAttribute("aria-hidden", "true");
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;height:1px;margin-block:5px;background:var(--spui-menu-divider,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#e1dfdd)))}`;
-            const divider = document.createElement("div");
-            divider.setAttribute("aria-hidden", "true");
-            shadow.append(style, divider);
-        }
-    }
-    customElements.define("spui-menu-divider", SpuiMenuDivider);
-}
-export function defineMenuGroup() {
-    if (customElements.get("spui-menu-group"))
-        return;
-    class SpuiMenuGroup extends HTMLElement {
-        observer;
-        managedHeaderId;
-        connectedCallback() {
-            if (!this.shadowRoot) {
-                const shadow = this.attachShadow({ mode: "open" });
-                const style = document.createElement("style");
-                style.textContent = `${base}:host{display:block;min-width:0}:host([label]){padding-block:4px}:host([label])::before{content:attr(label);display:block;padding:4px 10px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#605e5c));font-size:12px;font-weight:600}`;
-                shadow.append(style, document.createElement("slot"));
-            }
-            if (!this.hasAttribute("role"))
-                this.setAttribute("role", "group");
-            this.updateAccessibleName();
-            this.observer = new MutationObserver(() => this.updateAccessibleName());
-            this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["id"] });
-        }
-        disconnectedCallback() {
-            this.observer?.disconnect();
-            this.observer = undefined;
-        }
-        updateAccessibleName() {
-            const header = this.querySelector("spui-menu-group-header");
-            if (header) {
-                if (!header.id)
-                    header.id = `spui-menu-group-header-${crypto.randomUUID()}`;
-                if (!this.hasAttribute("aria-labelledby") || this.getAttribute("aria-labelledby") === this.managedHeaderId) {
-                    this.setAttribute("aria-labelledby", header.id);
-                    this.managedHeaderId = header.id;
-                }
-                return;
-            }
-            if (this.managedHeaderId && this.getAttribute("aria-labelledby") === this.managedHeaderId) {
-                this.removeAttribute("aria-labelledby");
-                this.managedHeaderId = undefined;
-            }
-            if (!this.hasAttribute("aria-labelledby") && !this.hasAttribute("aria-label") && this.hasAttribute("label")) {
-                this.setAttribute("aria-label", this.getAttribute("label") ?? "");
-            }
-        }
-    }
-    customElements.define("spui-menu-group", SpuiMenuGroup);
-}
-export function defineMenuGroupHeader() {
-    if (customElements.get("spui-menu-group-header"))
-        return;
-    class SpuiMenuGroupHeader extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;padding:5px 10px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#605e5c));font-size:12px;font-weight:600}`;
-            const slot = document.createElement("slot");
-            shadow.append(style, slot);
-        }
-    }
-    customElements.define("spui-menu-group-header", SpuiMenuGroupHeader);
-}
-export function defineMenuItemLink() {
-    if (customElements.get("spui-menu-item-link"))
-        return;
-    class SpuiMenuItemLink extends HTMLElement {
-        static observedAttributes = ["href", "target", "rel", "download", "disabled", "aria-label"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render();
-        else
-            this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        focus(options) { this.shadowRoot?.querySelector("a")?.focus(options); }
-        refreshMenuListState() { this.sync(); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}a{box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border-radius:var(--spui-menu-item-radius,4px);color:inherit;text-decoration:none;line-height:1.35}a:hover:not([aria-disabled=true]),a:focus-visible{background:var(--spui-menu-item-hover,var(--spui-ui-surface-hover,#f5f5f5))}a:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}a[aria-disabled=true]{opacity:.5;cursor:not-allowed}.checkmark,.icon{display:inline-grid;place-items:center;flex:none;width:16px;height:16px}.checkmark{color:var(--spui-ui-accent,var(--spui-semantic-accent,#0078d4))}.icon{color:inherit}.content{min-width:0;flex:1}.secondary{margin-inline-start:auto;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#605e5c));font-size:.85em;white-space:nowrap}slot[name=checkmark],slot[name=content]{display:contents}[hidden]{display:none!important}@media(forced-colors:active){a:focus-visible{outline-color:Highlight}}`;
-            const anchor = document.createElement("a");
-            anchor.setAttribute("role", "menuitem");
-            const checkmark = document.createElement("span");
-            checkmark.className = "checkmark";
-            checkmark.setAttribute("aria-hidden", "true");
-            const checkmarkSlot = document.createElement("slot");
-            checkmarkSlot.name = "checkmark";
-            checkmark.append(checkmarkSlot);
-            const icon = document.createElement("span");
-            icon.className = "icon";
-            icon.setAttribute("aria-hidden", "true");
-            const iconSlot = document.createElement("slot");
-            iconSlot.name = "icon";
-            icon.append(iconSlot);
-            const content = document.createElement("span");
-            content.className = "content";
-            const contentSlot = document.createElement("slot");
-            contentSlot.name = "content";
-            contentSlot.append(document.createElement("slot"));
-            content.append(contentSlot);
-            const secondary = document.createElement("span");
-            secondary.className = "secondary";
-            const secondarySlot = document.createElement("slot");
-            secondarySlot.name = "secondary-content";
-            secondary.append(secondarySlot);
-            anchor.append(checkmark, icon, content, secondary);
-            checkmarkSlot.addEventListener("slotchange", () => this.sync());
-            contentSlot.addEventListener("slotchange", () => this.sync());
-            for (const [slot, wrapper] of [[iconSlot, icon], [secondarySlot, secondary]])
-                slot.addEventListener("slotchange", () => { wrapper.hidden = slot.assignedNodes().length === 0 && !(slot.name === "icon" && this.closest("[has-icons], spui-menu-list[has-icons]")?.hasAttribute("has-icons")); });
-            anchor.addEventListener("click", event => {
-                if (this.hasAttribute("disabled")) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                this.dispatchEvent(new CustomEvent("spui-select", { bubbles: true, composed: true, detail: { value: this.getAttribute("href") ?? "", label: this.textContent?.trim() ?? "", checked: false, kind: "link", event } }));
-            });
-            shadow.append(style, anchor);
-            this.sync();
-        }
-        sync() {
-            const anchor = this.shadowRoot?.querySelector("a");
-            if (!anchor)
-                return;
-            for (const name of ["href", "target", "rel", "download", "aria-label"]) {
-                const value = this.getAttribute(name);
-                if (value === null)
-                    anchor.removeAttribute(name);
-                else
-                    anchor.setAttribute(name, value);
-            }
-            const icon = this.shadowRoot?.querySelector(".icon");
-            const iconSlot = this.shadowRoot?.querySelector("slot[name=icon]");
-            if (icon && iconSlot)
-                icon.hidden = iconSlot.assignedNodes().length === 0 && !this.closest("[has-icons], spui-menu-list[has-icons]")?.hasAttribute("has-icons");
-            const checkmark = this.shadowRoot?.querySelector(".checkmark");
-            const checkmarkSlot = this.shadowRoot?.querySelector("slot[name=checkmark]");
-            if (checkmark && checkmarkSlot)
-                checkmark.hidden = checkmarkSlot.assignedNodes({ flatten: true }).length === 0 && !this.closest("[has-checkmarks], spui-menu-list[has-checkmarks]")?.hasAttribute("has-checkmarks");
-            const secondary = this.shadowRoot?.querySelector(".secondary");
-            const secondarySlot = this.shadowRoot?.querySelector("slot[name=secondary-content]");
-            if (secondary && secondarySlot)
-                secondary.hidden = secondarySlot.assignedNodes().length === 0;
-            if (this.hasAttribute("disabled")) {
-                anchor.removeAttribute("href");
-                anchor.setAttribute("aria-disabled", "true");
-                anchor.tabIndex = -1;
-            }
-            else {
-                anchor.removeAttribute("aria-disabled");
-                anchor.tabIndex = -1;
-                if (this.hasAttribute("href"))
-                    anchor.setAttribute("href", this.getAttribute("href"));
-            }
-        }
-    }
-    customElements.define("spui-menu-item-link", SpuiMenuItemLink);
-}
-export function defineMenuList() {
-    if (customElements.get("spui-menu-list"))
-        return;
-    class SpuiMenuList extends HTMLElement {
-        static observedAttributes = ["has-icons", "has-checkmarks"];
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}:host([has-icons]) spui-menu-item, :host([has-checkmarks]) spui-menu-item{--spui-menu-reserve-leading:24px}`;
-            const slot = document.createElement("slot");
-            slot.addEventListener("slotchange", this.syncItems);
-            shadow.append(style, slot);
-            this.setAttribute("role", "group");
-            this.syncItems();
-        }
-        attributeChangedCallback() { this.syncItems(); }
-        syncItems = () => { for (const item of this.querySelectorAll("spui-menu-item,spui-menu-item-link"))
-            item.refreshMenuListState?.(); };
-    }
-    customElements.define("spui-menu-list", SpuiMenuList);
-}
-export function defineMenuPopover() {
-    if (customElements.get("spui-menu-popover"))
-        return;
-    class SpuiMenuPopover extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}`;
-            const slot = document.createElement("slot");
-            shadow.append(style, slot);
-        }
-    }
-    customElements.define("spui-menu-popover", SpuiMenuPopover);
-}
-export function defineMenuSplitGroup() {
-    if (customElements.get("spui-menu-split-group"))
-        return;
-    class SpuiMenuSplitGroup extends HTMLElement {
-        connectedCallback() {
-            if (this.shadowRoot)
-                return;
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;align-items:stretch;gap:4px}:host([orientation=vertical]){flex-direction:column}`;
-            const slot = document.createElement("slot");
-            shadow.append(style, slot);
-            this.setAttribute("role", "group");
-            this.addEventListener("keydown", this.onKeyDown);
-        }
-        disconnectedCallback() { this.removeEventListener("keydown", this.onKeyDown); }
-        onKeyDown = (event) => {
-            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
-                return;
-            const items = [...this.querySelectorAll("spui-menu-item,spui-menu-item-link")];
-            const active = items.findIndex(item => item === event.composedPath()[0] || item.shadowRoot?.activeElement === this.ownerDocument.activeElement || item.shadowRoot?.activeElement === event.composedPath()[0]);
-            if (active < 0 || !items.length)
-                return;
-            const rtl = getComputedStyle(this).direction === "rtl";
-            const delta = (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
-            event.preventDefault();
-            event.stopPropagation();
-            items[(active + delta + items.length) % items.length].focus();
-        };
-    }
-    customElements.define("spui-menu-split-group", SpuiMenuSplitGroup);
-}
-export function defineMenuTrigger() {
-    if (customElements.get("spui-menu-trigger"))
-        return;
-    class SpuiMenuTrigger extends HTMLElement {
-        static observedAttributes = ["aria-haspopup", "aria-controls", "aria-expanded", "disabled"];
-        connectedCallback() {
-            if (!this.shadowRoot) {
-                const shadow = this.attachShadow({ mode: "open" });
-                const style = document.createElement("style");
-                style.textContent = `${base}:host{display:inline-flex;cursor:pointer}:host([disabled]){opacity:.55;cursor:not-allowed}:host(:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}slot{display:contents}`;
-                const slot = document.createElement("slot");
-                shadow.append(style, slot);
-                this.setAttribute("role", "button");
-                this.tabIndex = this.hasAttribute("disabled") ? -1 : this.tabIndex < 0 ? 0 : this.tabIndex;
-            }
-            this.addEventListener("keydown", this.onKeyDown);
-            this.addEventListener("click", this.onClick);
-            this.sync();
-        }
-        disconnectedCallback() { this.removeEventListener("keydown", this.onKeyDown); this.removeEventListener("click", this.onClick); }
-        focus(options) { HTMLElement.prototype.focus.call(this, options); }
-        sync() { for (const name of ["aria-haspopup", "aria-controls", "aria-expanded"]) {
-            const value = this.getAttribute(name);
-            if (value === null)
-                this.removeAttribute(name);
-        } this.setAttribute("aria-haspopup", "menu"); if (this.hasAttribute("disabled"))
-            this.setAttribute("aria-disabled", "true");
-        else
-            this.removeAttribute("aria-disabled"); }
-        onKeyDown = (event) => { if (this.hasAttribute("disabled") || event.repeat || (event.key !== "Enter" && event.key !== " "))
-            return; event.preventDefault(); this.click(); };
-        onClick = (event) => { if (!this.hasAttribute("disabled"))
-            return; event.preventDefault(); event.stopPropagation(); };
-    }
-    customElements.define("spui-menu-trigger", SpuiMenuTrigger);
-}
-export function defineMenu() {
-    if (customElements.get("spui-menu"))
-        return;
-    defineMenuItem();
-    defineMenuItemLink();
-    defineMenuDivider();
-    defineMenuGroup();
-    defineMenuGroupHeader();
-    defineMenuList();
-    defineMenuPopover();
-    defineMenuSplitGroup();
-    defineMenuTrigger();
-    class SpuiMenu extends HTMLElement {
-        static observedAttributes = ["open", "default-open", "motion", "label", "placement", "positioning", "position-offset", "context-menu", "open-on-context", "open-on-hover", "hover-delay", "close-on-scroll", "persist-on-item-click", "inline"];
-        events;
-        surfaceEvents;
-        panel;
-        internalPanel;
-        externalPanel;
-        parentElementOverride;
-        trigger;
-        triggerState;
-        isOpen = false;
-        typeahead = "";
-        typeaheadTimer;
-        contextPoint;
-        hoverTimer;
-        motionExitPending = false;
-        exitGeneration = 0;
-        get open() { return this.isOpen; }
-        set open(value) { this.setOpen(Boolean(value)); }
-        get menuTrigger() { return this.trigger; }
-        set menuSurface(value) {
-            const previousPanel = this.panel;
-            this.externalPanel = value ?? undefined;
-            this.panel = this.externalPanel ?? this.internalPanel;
-            if (previousPanel && previousPanel !== this.panel) {
-                previousPanel.hidePopover?.();
-                previousPanel.hidden = true;
-            }
-            if (this.panel) {
-                this.panel.id ||= nextId();
-                this.panel.setAttribute("role", "menu");
-                this.panel.setAttribute("aria-orientation", "vertical");
-                this.panel.setAttribute("popover", "manual");
-                this.panel.addEventListener("toggle", this.onNativeToggle);
-            }
-            this.bindSurfaceEvents();
-            if (this.isConnected) {
-                this.syncLabel();
-                this.syncVisibility();
-            }
-            this.syncTrigger();
-        }
-        get menuSurface() { return this.externalPanel ?? null; }
-        set parentMenuElement(value) { this.parentElementOverride = value ?? undefined; }
-        get parentMenuElement() { return this.parentElementOverride; }
-        connectedCallback() {
-            this.style.display ||= "contents";
-            if (!this.shadowRoot)
-                this.render();
-            this.events?.abort();
-            this.events = new AbortController();
-            const options = { signal: this.events.signal };
-            this.addEventListener("click", this.onClick, options);
-            this.addEventListener("keydown", this.onKeyDown, options);
-            this.addEventListener("spui-select", this.onItemSelect, options);
-            this.addEventListener("contextmenu", this.onContextMenu, options);
-            this.addEventListener("keydown", this.onContextMenuKeyDown, options);
-            this.addEventListener("pointerover", this.onPointerOver, options);
-            this.addEventListener("pointerout", this.onPointerOut, options);
-            this.addEventListener("mouseover", this.onPanelMouseOver, options);
-            this.ownerDocument.addEventListener("pointerdown", this.onOutsidePointerDown, { ...options, capture: true });
-            this.ownerDocument.addEventListener("spui-menu-enter", this.onMenuEnter, options);
-            this.ownerDocument.addEventListener("wheel", this.onScrollOutside, { ...options, capture: true });
-            this.ownerDocument.addEventListener("touchmove", this.onScrollOutside, { ...options, capture: true });
-            window.addEventListener("resize", this.position, options);
-            window.addEventListener("scroll", this.position, { ...options, capture: true });
-            this.shadowRoot?.querySelector("slot[name=trigger]")?.addEventListener("slotchange", this.syncTrigger, options);
-            this.internalPanel = this.shadowRoot?.querySelector(".surface");
-            this.panel = this.externalPanel ?? this.internalPanel;
-            this.bindSurfaceEvents();
-            if (!this.hasAttribute("placement"))
-                this.setAttribute("placement", this.parentMenu() ? "end" : "bottom");
-            this.isOpen = this.hasAttribute("open") || this.hasAttribute("default-open");
-            if (this.isOpen)
-                this.toggleAttribute("open", true);
-            this.syncTrigger();
-            this.syncLabel();
-            this.syncVisibility();
-        }
-        disconnectedCallback() {
-            this.events?.abort();
-            this.surfaceEvents?.abort();
-            this.clearTypeahead();
-            this.clearHoverTimer();
-            this.restoreTrigger();
-            this.panel?.hidePopover?.();
-        }
-        attributeChangedCallback(name) {
-            if (!this.isConnected)
-                return;
-            if (name === "open") {
-                const next = this.hasAttribute("open");
-                if (next !== this.isOpen) {
-                    this.isOpen = next;
-                    this.syncVisibility();
-                    this.emitOpenChange();
-                }
-            }
-            else if (name === "label")
-                this.syncLabel();
-            else if (name === "inline") {
-                this.syncPopoverMode();
-                this.syncVisibility();
-            }
-            else
-                this.position();
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:contents}.surface{position:fixed;inset:auto;margin:0;z-index:var(--spui-layer-popover,10000);box-sizing:border-box;width:max-content;min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:min(70vh,calc(100dvh - 24px));overflow:auto;padding:4px;border:1px solid var(--spui-menu-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-menu-radius,var(--spui-card-radius,8px));background:var(--spui-menu-background,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff)));color:var(--spui-menu-color,var(--spui-ui-text,var(--colorNeutralForeground1,#242424)));box-shadow:var(--spui-menu-shadow,0 8px 24px rgb(0 0 0 / 18%));font:var(--spui-font-family,inherit);line-height:1.45}.surface:not(:popover-open){display:none}:host([inline]) .surface:not([hidden]){display:block!important}.surface[hidden]{display:none!important}slot[name=trigger]{display:contents}@media(forced-colors:active){.surface{border-color:CanvasText;box-shadow:none}}`;
-            const triggerSlot = document.createElement("slot");
-            triggerSlot.name = "trigger";
-            const panel = document.createElement("div");
-            panel.className = "surface";
-            panel.part.add("surface");
-            panel.setAttribute("popover", "manual");
-            panel.setAttribute("role", "menu");
-            panel.setAttribute("aria-orientation", "vertical");
-            panel.id = nextId();
-            const items = document.createElement("slot");
-            items.name = "menu";
-            panel.append(items);
-            panel.addEventListener("toggle", this.onNativeToggle);
-            shadow.append(style, triggerSlot, panel);
-            this.internalPanel = panel;
-            this.panel = this.externalPanel ?? panel;
-        }
-        bindSurfaceEvents() {
-            this.surfaceEvents?.abort();
-            this.surfaceEvents = undefined;
-            if (!this.isConnected || !this.externalPanel)
-                return;
-            const events = new AbortController();
-            const options = { signal: events.signal };
-            const listeners = [["click", this.onClick], ["keydown", this.onKeyDown], ["spui-select", this.onItemSelect], ["pointerover", this.onPointerOver], ["pointerout", this.onPointerOut], ["mouseover", this.onPanelMouseOver]];
-            for (const [type, listener] of listeners)
-                this.externalPanel.addEventListener(type, listener, options);
-            this.externalPanel.addEventListener("spui-select", event => {
-                const selection = event;
-                this.dispatchEvent(new CustomEvent("spui-select", { bubbles: true, composed: true, detail: selection.detail }));
-            }, options);
-            this.surfaceEvents = events;
-        }
-        assignedTriggers() { return this.shadowRoot?.querySelector("slot[name=trigger]")?.assignedElements({ flatten: true }).filter((node) => node instanceof HTMLElement) ?? []; }
-        syncTrigger = () => {
-            const slotted = this.assignedTriggers()[0];
-            const next = slotted ? findFocusable(slotted.shadowRoot ?? slotted) ?? slotted : undefined;
-            if (next !== this.trigger) {
-                this.restoreTrigger();
-                this.trigger = next;
-                this.triggerState = next ? { haspopup: next.getAttribute("aria-haspopup"), controls: next.getAttribute("aria-controls"), expanded: next.getAttribute("aria-expanded") } : undefined;
-            }
-            if (this.trigger && this.panel) {
-                this.trigger.setAttribute("aria-haspopup", "menu");
-                if (this.trigger.getRootNode() === this.panel.getRootNode())
-                    this.trigger.setAttribute("aria-controls", this.panel.id);
-                else
-                    this.trigger.removeAttribute("aria-controls");
-                this.trigger.setAttribute("aria-expanded", String(this.isOpen));
-            }
-            this.dispatchEvent(new CustomEvent("spui-menu-trigger-change", { bubbles: true, composed: true }));
-        };
-        restoreTrigger() {
-            if (!this.trigger || !this.triggerState)
-                return;
-            for (const [name, value] of [["aria-haspopup", this.triggerState.haspopup], ["aria-expanded", this.triggerState.expanded]]) {
-                if (value === null)
-                    this.trigger.removeAttribute(name);
-                else
-                    this.trigger.setAttribute(name, value);
-            }
-            if (this.triggerState.controls === null)
-                this.trigger.removeAttribute("aria-controls");
-            else
-                this.trigger.setAttribute("aria-controls", this.triggerState.controls);
-            this.trigger = undefined;
-            this.triggerState = undefined;
-        }
-        syncLabel() { if (this.panel)
-            this.panel.setAttribute("aria-label", this.getAttribute("label") || "Menu"); }
-        syncPopoverMode() {
-            if (!this.panel)
-                return;
-            if (this.hasAttribute("inline")) {
-                this.panel.removeAttribute("popover");
-                this.panel.hidden = !this.isOpen && !this.motionExitPending;
-            }
-            else {
-                this.panel.setAttribute("popover", "manual");
-                this.panel.hidden = false;
-            }
-        }
-        syncVisibility() {
-            if (!this.panel)
-                return;
-            if (this.isOpen) {
-                this.exitGeneration++;
-                this.motionExitPending = false;
-                this.panel.inert = false;
-                this.panel.removeAttribute("aria-hidden");
-            }
-            else if (this.hasAttribute("motion")) {
-                this.motionExitPending = true;
-                this.panel.inert = true;
-                this.panel.setAttribute("aria-hidden", "true");
-            }
-            this.syncPopoverMode();
-            if (this.hasAttribute("inline"))
-                this.panel.hidden = !this.isOpen && !this.motionExitPending;
-            else if (this.isOpen) {
-                try {
-                    this.panel.showPopover?.();
-                }
-                catch { /* The open attribute remains the fallback state. */ }
-            }
-            else if (!this.motionExitPending)
-                this.panel.hidePopover?.();
-            if (this.motionExitPending) {
-                if (!this.hasAttribute("inline") && !this.panel.matches(":popover-open")) {
-                    try {
-                        this.panel.showPopover?.();
-                    }
-                    catch { /* Keep the closed state if the browser cannot restore the top layer. */ }
-                }
-                const generation = ++this.exitGeneration;
-                requestAnimationFrame(() => requestAnimationFrame(() => {
-                    const animations = new Set();
-                    const visit = (element) => {
-                        for (const animation of element.getAnimations())
-                            if (animation.playState === "running")
-                                animations.add(animation);
-                        if (element.shadowRoot)
-                            for (const child of element.shadowRoot.children)
-                                visit(child);
-                        for (const child of element.children)
-                            visit(child);
-                    };
-                    visit(this);
-                    const finish = () => {
-                        if (generation !== this.exitGeneration || this.isOpen || !this.panel)
-                            return;
-                        this.motionExitPending = false;
-                        if (!this.hasAttribute("inline"))
-                            this.panel.hidePopover?.();
-                        this.panel.hidden = true;
-                    };
-                    if (animations.size)
-                        void Promise.allSettled([...animations].map(animation => animation.finished)).then(finish);
-                    else
-                        finish();
-                }));
-            }
-            if (this.isOpen)
-                requestAnimationFrame(this.position);
-            this.syncTrigger();
-        }
-        position = () => {
-            if (!this.isOpen || !this.trigger || !this.panel)
-                return;
-            const anchor = this.trigger.getBoundingClientRect();
-            const panel = this.panel.getBoundingClientRect();
-            const offsetValue = this.getAttribute("position-offset");
-            const offset = Number(offsetValue);
-            const gap = offsetValue === null ? 4 : Number.isFinite(offset) ? Math.max(0, Math.min(64, offset)) : 4;
-            const direction = this.getAttribute("dir") || getComputedStyle(this).direction;
-            if (this.hasAttribute("context-menu")) {
-                const point = this.contextPoint ?? { x: direction === "rtl" ? anchor.right : anchor.left, y: anchor.bottom };
-                const left = Math.max(gap, Math.min(point.x, innerWidth - panel.width - gap));
-                const top = Math.max(gap, Math.min(point.y, innerHeight - panel.height - gap));
-                this.panel.style.left = `${left}px`;
-                this.panel.style.top = `${top}px`;
-                return;
-            }
-            const value = this.getAttribute("positioning") || this.getAttribute("placement") || "bottom";
-            const side = value.startsWith("above") ? "top" : value.startsWith("below") ? "bottom" : value === "before" ? "start" : value === "after" ? "end" : value.split("-")[0];
-            const alignment = value.endsWith("-end") ? "end" : "start";
-            let top = side === "top" ? anchor.top - panel.height - gap : side === "bottom" ? anchor.bottom + gap : alignment === "end" ? anchor.bottom - panel.height : anchor.top;
-            let left = side === "start" ? (direction === "rtl" ? anchor.right + gap : anchor.left - panel.width - gap) : side === "end" ? (direction === "rtl" ? anchor.left - panel.width - gap : anchor.right + gap) : alignment === "end" ? (direction === "rtl" ? anchor.left : anchor.right - panel.width) : (direction === "rtl" ? anchor.right - panel.width : anchor.left);
-            if (side === "bottom" && top + panel.height > innerHeight - gap)
-                top = anchor.top - panel.height - gap;
-            if (side === "top" && top < gap)
-                top = anchor.bottom + gap;
-            left = Math.max(gap, Math.min(left, innerWidth - panel.width - gap));
-            top = Math.max(gap, Math.min(top, innerHeight - panel.height - gap));
-            this.panel.style.left = `${left}px`;
-            this.panel.style.top = `${top}px`;
-        };
-        contextEnabled() { return this.hasAttribute("context-menu") || this.hasAttribute("open-on-context"); }
-        onContextMenu = (event) => {
-            if (!this.contextEnabled() || !this.trigger || !event.composedPath().includes(this.trigger))
-                return;
-            event.preventDefault();
-            this.contextPoint = { x: event.clientX, y: event.clientY };
-            this.setOpen(true, { event, type: "menuTriggerContextMenu" });
-            requestAnimationFrame(() => this.focusItem(0));
-        };
-        onContextMenuKeyDown = (event) => {
-            if (!this.contextEnabled() || !this.trigger || !event.composedPath().includes(this.trigger))
-                return;
-            if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey))
-                return;
-            event.preventDefault();
-            const rect = this.trigger.getBoundingClientRect();
-            this.contextPoint = { x: getComputedStyle(this).direction === "rtl" ? rect.right : rect.left, y: rect.bottom };
-            this.setOpen(true, { event, type: "menuTriggerKeyDown", keyboard: true });
-            requestAnimationFrame(() => this.focusItem(0));
-        };
-        items() { return [...(this.externalPanel ?? this).querySelectorAll("spui-menu-item,spui-menu-item-link")]; }
-        menuItems() {
-            return this.items().filter(item => {
-                const owner = item.closest("spui-menu");
-                if (owner === this || !owner && this.externalPanel?.contains(item))
-                    return item.getAttribute("slot") !== "trigger";
-                const ownerMenu = owner;
-                return item.getAttribute("slot") === "trigger" && (ownerMenu?.parentMenuElement ?? ownerMenu?.parentElement?.closest("spui-menu")) === this;
-            });
-        }
-        focusItem(index) { const items = this.menuItems(); if (!items.length)
-            return; items[(index + items.length) % items.length].focus(); }
-        focusItemAfterOpen(index) { requestAnimationFrame(() => requestAnimationFrame(() => { if (this.isOpen)
-            this.focusItem(index); })); }
-        activeIndex() { return this.menuItems().findIndex(item => item.matches(":focus-within") || item.shadowRoot?.activeElement != null); }
-        onClick = (event) => {
-            const target = event.target;
-            if (!(target instanceof Node))
-                return;
-            const path = event.composedPath();
-            if (this.trigger && (target === this.trigger || this.trigger.contains(target) || path.includes(this.trigger))) {
-                if (path.some(node => node instanceof HTMLElement && (node.hasAttribute("disabled") || node.getAttribute("aria-disabled") === "true")))
-                    return;
-                if (this.contextEnabled() && !this.hasAttribute("open-on-hover"))
-                    return;
-                this.setOpen(!this.isOpen, { event, type: "menuTriggerClick" });
-                if (this.isOpen)
-                    requestAnimationFrame(() => this.focusItem(0));
-            }
-        };
-        onOutsidePointerDown = (event) => {
-            if (!this.isOpen || event.composedPath().some(target => target === this || target === this.panel || target instanceof Node && (this.contains(target) || this.shadowRoot?.contains(target) || this.panel?.contains(target))))
-                return;
-            this.setOpen(false, { event, type: "clickOutside" });
-        };
-        hoverDelay() { const raw = this.getAttribute("hover-delay"); if (raw === null)
-            return 300; const value = Number(raw); return Number.isFinite(value) ? Math.max(0, Math.min(2000, value)) : 300; }
-        onPointerOver = (event) => {
-            if (!this.hasAttribute("open-on-hover") || !this.trigger || !event.composedPath().includes(this.trigger))
-                return;
-            this.clearHoverTimer();
-            this.hoverTimer = setTimeout(() => this.setOpen(true, { event, type: "menuTriggerMouseEnter" }), this.hoverDelay());
-        };
-        onPointerOut = (event) => {
-            if (!this.hasAttribute("open-on-hover") || !this.isOpen || !this.trigger || !event.composedPath().includes(this.trigger))
-                return;
-            const target = event.relatedTarget;
-            if (target instanceof Node && (this.contains(target) || this.shadowRoot?.contains(target) || this.panel?.contains(target)))
-                return;
-            this.clearHoverTimer();
-            this.hoverTimer = setTimeout(() => this.setOpen(false, { event, type: "menuTriggerMouseLeave" }), this.hoverDelay());
-        };
-        onPanelMouseOver = (event) => {
-            if (!this.panel || !event.composedPath().includes(this.panel))
-                return;
-            this.dispatchEvent(new CustomEvent("spui-menu-enter", { bubbles: true, composed: true, detail: { nativeEvent: event } }));
-        };
-        onMenuEnter = (event) => {
-            const target = event.target;
-            const path = event.composedPath();
-            if (!this.isOpen || target === this || path.includes(this.panel) || target instanceof Node && (this.contains(target) || this.shadowRoot?.contains(target) || this.panel?.contains(target)))
-                return;
-            const targetMenu = path.find((node) => node instanceof HTMLElement && node.localName === "spui-menu");
-            for (let ancestor = this.parentMenu(); ancestor; ancestor = ancestor.parentMenu())
-                if (ancestor === targetMenu)
-                    return;
-            if (targetMenu?.contains(this))
-                return;
-            const nativeEvent = event.detail?.nativeEvent;
-            if (nativeEvent instanceof MouseEvent)
-                this.setOpen(false, { event: nativeEvent, type: "menuMouseEnter" });
-        };
-        onScrollOutside = (event) => {
-            if (!(this.hasAttribute("close-on-scroll") || this.contextEnabled()) || !this.isOpen)
-                return;
-            if (!event.composedPath().some(target => target === this || target === this.panel || target instanceof Node && (this.contains(target) || this.shadowRoot?.contains(target) || this.panel?.contains(target)))) {
-                this.setOpen(false, { event, type: "scrollOutside" });
-            }
-        };
-        onKeyDown = (event) => {
-            const direction = getComputedStyle(this).direction;
-            const forwardKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
-            const backwardKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
-            if (event.key === backwardKey && this.isOpen && this.parentMenu()) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.setOpen(false, { event, type: "menuPopoverKeyDown", keyboard: true });
-                this.focusTrigger();
-                return;
-            }
-            if (event.key === forwardKey && this.isOpen) {
-                const active = this.menuItems()[this.activeIndex()];
-                const submenu = active?.parentElement?.localName === "spui-menu" ? active.parentElement : undefined;
-                if (submenu && submenu !== this) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    submenu.setOpen(true, { event, type: "menuTriggerKeyDown", keyboard: true });
-                    requestAnimationFrame(() => submenu.focusFirstItem());
-                    return;
-                }
-            }
-            if (event.key === "Escape" && this.isOpen) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.setOpen(false, { event, type: "menuPopoverKeyDown", keyboard: true });
-                this.focusTrigger();
-                return;
-            }
-            if (event.key === "Tab" && this.isOpen) {
-                this.setOpen(false, { event, type: "menuPopoverKeyDown", keyboard: true });
-                return;
-            }
-            if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") {
-                event.preventDefault();
-                const items = this.menuItems();
-                if (!items.length)
-                    return;
-                if (!this.isOpen) {
-                    const inTrigger = event.composedPath().includes(this.trigger);
-                    this.setOpen(true, { event, type: inTrigger ? "menuTriggerKeyDown" : "menuPopoverKeyDown", keyboard: true });
-                    this.focusItemAfterOpen(event.key === "ArrowUp" || event.key === "End" ? items.length - 1 : 0);
-                    return;
-                }
-                const index = this.activeIndex();
-                this.focusItem(event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : index + (event.key === "ArrowDown" ? 1 : -1));
-                return;
-            }
-            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-                const character = event.key.toLocaleLowerCase(this.lang || undefined);
-                this.typeahead = this.typeahead === character ? character : this.typeahead + character;
-                this.clearTypeahead();
-                this.typeaheadTimer = setTimeout(() => { this.typeahead = ""; }, 500);
-                const items = this.menuItems();
-                const start = (this.activeIndex() + 1 + items.length) % items.length;
-                for (let offset = 0; offset < items.length; offset++) {
-                    const index = (start + offset) % items.length;
-                    const content = items[index].shadowRoot?.querySelector('slot[name="content"]');
-                    const visibleText = content?.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join("") || items[index].textContent || "";
-                    const label = visibleText.trim().toLocaleLowerCase(this.lang || undefined);
-                    if (label.startsWith(this.typeahead)) {
-                        event.preventDefault();
-                        this.focusItem(index);
-                        return;
-                    }
-                }
-            }
-        };
-        focusFirstItem() { this.focusItem(0); }
-        parentMenu() { return this.parentElementOverride ?? this.parentElement?.closest("spui-menu"); }
-        onItemSelect = (event) => {
-            const item = event.target;
-            if (item?.getAttribute("kind") === "radio") {
-                const name = item.getAttribute("name");
-                if (name)
-                    for (const option of (this.externalPanel ?? this).querySelectorAll(`spui-menu-item[kind=radio][name="${CSS.escape(name)}"]`))
-                        option.toggleAttribute("checked", option === item);
-            }
-            if (event.detail?.persistOnClick || item?.hasAttribute("persist-on-click") || this.hasAttribute("persist-on-item-click"))
-                return;
-            this.setOpen(false, { event: event.detail?.event ?? new MouseEvent("click"), type: "menuItemClick" });
-            this.focusTrigger();
-        };
-        onNativeToggle = (event) => {
-            const next = event.newState === "open";
-            if (next === this.isOpen)
-                return;
-            this.isOpen = next;
-            this.toggleAttribute("open", next);
-            this.syncTrigger();
-            this.emitOpenChange({ event, type: "programmatic" });
-        };
-        focusTrigger() { const inner = this.trigger?.shadowRoot?.querySelector("button,[tabindex]"); if (inner)
-            inner.focus();
-        else
-            this.trigger?.focus(); }
-        setOpen(value, source = { event: new Event("programmatic"), type: "programmatic" }) {
-            const next = Boolean(value);
-            if (next === this.isOpen)
-                return;
-            this.isOpen = next;
-            if (!next)
-                for (const child of new Set([...this.querySelectorAll("spui-menu"), ...(this.externalPanel?.querySelectorAll("spui-menu") ?? [])]))
-                    if (child.isOpen)
-                        child.setOpen(false, source);
-            if (this.hasAttribute("open") !== next)
-                this.toggleAttribute("open", next);
-            this.syncVisibility();
-            this.emitOpenChange(source);
-        }
-        emitOpenChange(source = { event: new Event("programmatic"), type: "programmatic" }) { const detail = { open: this.isOpen, ...source, keyboard: source.keyboard ?? false, bubble: Boolean(this.parentMenu()) }; this.dispatchEvent(new CustomEvent("spui-open-change", { bubbles: true, composed: true, detail })); }
-        clearTypeahead() { if (this.typeaheadTimer !== undefined)
-            clearTimeout(this.typeaheadTimer); this.typeaheadTimer = undefined; }
-        clearHoverTimer() { if (this.hoverTimer !== undefined)
-            clearTimeout(this.hoverTimer); this.hoverTimer = undefined; }
-    }
-    customElements.define("spui-menu", SpuiMenu);
-}
-export function defineMenuBarItem() {
-    if (customElements.get("spui-menu-bar-item"))
-        return;
-    class SpuiMenuBarItem extends HTMLElement {
-        static observedAttributes = ["disabled", "aria-label", "aria-haspopup", "aria-controls", "aria-expanded"];
-        button;
-        connectedCallback() { if (!this.shadowRoot)
-            this.render();
-        else
-            this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        get tabStop() { return this.button?.tabIndex === 0; }
-        set tabStop(value) { if (this.button)
-            this.button.tabIndex = value ? 0 : -1; }
-        focus(options) { this.button?.focus(options); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-flex;min-width:0}button{box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px;border:1px solid transparent;border-radius:var(--spui-menu-bar-item-radius,var(--spui-control-radius,6px));background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}button:hover:not(:disabled),button:focus-visible{background:var(--spui-menu-bar-item-hover,var(--spui-ui-surface-hover,#f5f5f5))}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:1px}button[aria-expanded=true]{background:var(--spui-menu-bar-item-open,var(--spui-ui-surface-secondary,#f0f0f0));border-color:var(--spui-menu-bar-item-border,var(--spui-ui-stroke,#d1d1d1))}button:disabled{opacity:.5;cursor:not-allowed}button[aria-haspopup=menu]::after{content:"▾";margin-inline-start:4px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#605e5c));font-size:.8em}[hidden]{display:none!important}@media(forced-colors:active){button:focus-visible{outline-color:Highlight}button[aria-expanded=true]{border-color:Highlight}}`;
-            this.button = document.createElement("button");
-            this.button.type = "button";
-            this.button.tabIndex = -1;
-            const slot = document.createElement("slot");
-            this.button.append(slot);
-            shadow.append(style, this.button);
-            this.sync();
-        }
-        sync() {
-            if (!this.button)
-                return;
-            this.button.disabled = this.hasAttribute("disabled");
-            this.button.setAttribute("role", "menuitem");
-            this.button.tabIndex = this.button.tabIndex < 0 ? -1 : this.button.tabIndex;
-            for (const name of ["aria-label", "aria-haspopup", "aria-controls", "aria-expanded"]) {
-                const value = this.getAttribute(name);
-                if (value === null)
-                    this.button.removeAttribute(name);
-                else
-                    this.button.setAttribute(name, value);
-            }
-            if (this.hasAttribute("disabled"))
-                this.button.setAttribute("aria-disabled", "true");
-            else
-                this.button.removeAttribute("aria-disabled");
-        }
-    }
-    customElements.define("spui-menu-bar-item", SpuiMenuBarItem);
-}
-export function defineMenuBar() {
-    if (customElements.get("spui-menu-bar"))
-        return;
-    defineMenu();
-    defineMenuBarItem();
-    class SpuiMenuBar extends HTMLElement {
-        slotElement;
-        activeIndex = 0;
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.setAttribute("role", "menubar");
-            this.setAttribute("aria-orientation", "horizontal");
-            if (!this.hasAttribute("aria-label"))
-                this.setAttribute("aria-label", "Menu bar");
-            this.slotElement.addEventListener("slotchange", this.syncItems);
-            this.addEventListener("keydown", this.onKeyDown);
-            this.addEventListener("focusin", this.onFocusIn);
-            this.addEventListener("spui-open-change", this.onOpenChange);
-            this.addEventListener("spui-menu-trigger-change", this.syncItems);
-            this.syncItems();
-        }
-        disconnectedCallback() {
-            this.slotElement?.removeEventListener("slotchange", this.syncItems);
-            this.removeEventListener("keydown", this.onKeyDown);
-            this.removeEventListener("focusin", this.onFocusIn);
-            this.removeEventListener("spui-open-change", this.onOpenChange);
-            this.removeEventListener("spui-menu-trigger-change", this.syncItems);
-        }
-        menus() {
-            return [...this.querySelectorAll("spui-menu")].filter(menu => !menu.parentElement?.closest("spui-menu") && menu.parentElement?.closest("spui-menu-bar") === this);
-        }
-        items() { return this.menus().map(menu => menu.menuTrigger).filter((item) => Boolean(item)); }
-        syncItems = () => {
-            const items = this.items();
-            const focused = items.findIndex(item => item === this.ownerDocument.activeElement || item.contains(this.ownerDocument.activeElement));
-            if (focused >= 0)
-                this.activeIndex = focused;
-            else
-                this.activeIndex = Math.min(this.activeIndex, Math.max(0, items.length - 1));
-            items.forEach((item, index) => this.setTabStop(item, index === this.activeIndex));
-        };
-        setTabStop(item, value) {
-            if ("tabStop" in item)
-                item.tabStop = value;
-            else {
-                const focusTarget = item.shadowRoot?.querySelector("button,[tabindex]");
-                if (focusTarget)
-                    focusTarget.tabIndex = value ? 0 : -1;
-                else
-                    item.tabIndex = value ? 0 : -1;
-            }
-        }
-        setActive(index, focus) {
-            const items = this.items();
-            if (!items.length)
-                return;
-            this.activeIndex = (index + items.length) % items.length;
-            items.forEach((item, itemIndex) => this.setTabStop(item, itemIndex === this.activeIndex));
-            if (focus)
-                items[this.activeIndex].focus();
-        }
-        focusedIndex(event) { const active = this.ownerDocument.activeElement; const path = event?.composedPath() ?? []; return this.items().findIndex(item => path.includes(item) || item === active || item.contains(active)); }
-        onFocusIn = (event) => {
-            const path = event.composedPath();
-            const index = this.items().findIndex(item => path.includes(item));
-            if (index >= 0)
-                this.setActive(index, false);
-        };
-        onKeyDown = (event) => {
-            const index = this.focusedIndex(event);
-            if (index < 0)
-                return;
-            const direction = getComputedStyle(this).direction;
-            const forward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
-            const backward = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
-            if (event.key === "Home" || event.key === "End") {
-                event.preventDefault();
-                this.setActive(event.key === "Home" ? 0 : this.items().length - 1, true);
-                return;
-            }
-            if (event.key !== forward && event.key !== backward)
-                return;
-            event.preventDefault();
-            const currentMenu = this.menus()[index];
-            if (currentMenu?.open)
-                currentMenu.open = false;
-            this.setActive(index + (event.key === forward ? 1 : -1), true);
-        };
-        onOpenChange = (event) => {
-            if (!event.detail?.open)
-                return;
-            const opened = event.target;
-            if (!this.menus().includes(opened))
-                return;
-            for (const menu of this.menus())
-                if (menu !== opened && menu.open)
-                    menu.open = false;
-        };
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;align-items:center;gap:var(--spui-menu-bar-gap,4px);min-width:0;padding:var(--spui-menu-bar-padding,4px);border:1px solid var(--spui-menu-bar-border,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)));border-radius:var(--spui-menu-bar-radius,var(--spui-control-radius,8px));background:var(--spui-menu-bar-background,var(--spui-ui-surface,#fff));color:var(--spui-menu-bar-color,var(--spui-ui-text,#242424));font:inherit}slot{display:contents}@media(forced-colors:active){:host{border-color:CanvasText;color:CanvasText}}`;
-            this.slotElement = document.createElement("slot");
-            shadow.append(style, this.slotElement);
-        }
-    }
-    customElements.define("spui-menu-bar", SpuiMenuBar);
-}