@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.0

package/dist/elements/menu.js

@@ -0,0 +1,1103 @@
+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);
+}