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

package/dist/elements/nav.js

@@ -0,0 +1,791 @@
+import { base } from "./shared.js";
+import { buttonControlCss } from "./button.js";
+let nextNavId = 0;
+export function defineNav() {
+    defineNavItem();
+    defineAppItem();
+    defineAppItemStatic();
+    defineSplitNavItem();
+    defineHamburger();
+    defineNavDrawer();
+    defineNavDrawerHeader();
+    defineNavDrawerBody();
+    defineNavDrawerFooter();
+    defineNavCategory();
+    defineNavCategoryItem();
+    defineNavSubItemGroup();
+    defineNavSubItem();
+    defineNavDivider();
+    defineNavSectionHeader();
+    if (customElements.get("spui-nav"))
+        return;
+    class SpuiNav extends HTMLElement {
+        static observedAttributes = ["label", "aria-label", "density", "multiple", "tabbable", "open", "open-label", "close-label", "collapsible", "collapsed", "expand-label", "collapse-label"];
+        observer;
+        events;
+        breakpoint;
+        current = null;
+        currentCategory = null;
+        currentControlled = false;
+        currentCategoryControlled = false;
+        categoriesOpen = new Set();
+        categoriesOpenControlled = false;
+        drawerOpenControlled = false;
+        drawerOpen = false;
+        reflectingOpen = false;
+        collapsedControlled = false;
+        reflectingCollapsed = false;
+        nextGroupId = 0;
+        get open() { return this.drawerOpen; }
+        set open(value) { this.drawerOpenControlled = true; this.setDrawerOpen(Boolean(value)); }
+        get defaultOpen() { return this.drawerOpen; }
+        set defaultOpen(value) { if (!this.drawerOpenControlled)
+            this.setDrawerOpen(Boolean(value)); }
+        get collapsed() { return this.hasAttribute("collapsed"); }
+        set collapsed(value) { this.collapsedControlled = true; this.setCollapsed(Boolean(value)); }
+        get defaultCollapsed() { return this.collapsed; }
+        set defaultCollapsed(value) { if (!this.collapsedControlled)
+            this.setCollapsed(Boolean(value)); }
+        connectedCallback() {
+            if (!this.shadowRoot)
+                this.render();
+            this.observer = new MutationObserver(() => this.sync());
+            this.observer.observe(this, { childList: true, subtree: true });
+            this.events?.abort();
+            this.events = new AbortController();
+            this.breakpoint?.removeEventListener("change", this.onBreakpointChange);
+            this.breakpoint = window.matchMedia("(max-width: 640px)");
+            this.breakpoint.addEventListener("change", this.onBreakpointChange);
+            window.addEventListener("resize", this.onBreakpointChange);
+            this.addEventListener("click", event => this.onClick(event), { signal: this.events.signal });
+            this.addEventListener("keydown", event => {
+                if (this.handleRovingKeydown(event))
+                    return;
+                if (event.key !== "Escape" || !this.drawerOpen)
+                    return;
+                if (this.getAttribute("data-drawer-type") === "inline")
+                    this.requestOpen(false);
+                requestAnimationFrame(() => this.shadowRoot?.querySelector(".mobile-toggle")?.focus());
+            }, { signal: this.events.signal });
+            this.addEventListener("focusin", event => this.syncTabStops(event.composedPath().find(node => node instanceof HTMLElement && this.navControl(node))), { signal: this.events.signal });
+            const nav = this.shadowRoot?.querySelector("nav");
+            nav?.addEventListener("toggle", () => this.onPopoverToggle(), { signal: this.events.signal });
+            this.sync();
+            this.syncResponsive();
+        }
+        disconnectedCallback() { this.observer?.disconnect(); this.events?.abort(); this.breakpoint?.removeEventListener("change", this.onBreakpointChange); window.removeEventListener("resize", this.onBreakpointChange); }
+        attributeChangedCallback(name) {
+            if (name === "open" && !this.reflectingOpen) {
+                this.drawerOpenControlled = true;
+                this.drawerOpen = this.hasAttribute("open");
+            }
+            if (name === "collapsed" && !this.reflectingCollapsed)
+                this.syncResponsive();
+            if (!this.isConnected)
+                return;
+            if (name === "label" || name === "aria-label")
+                this.shadowRoot?.querySelector("nav")?.setAttribute("aria-label", this.getAttribute("aria-label") ?? this.getAttribute("label") ?? "Navigation");
+            this.sync();
+        }
+        get selectedValue() { return this.current; }
+        set selectedValue(value) { this.currentControlled = true; this.current = value; this.sync(); }
+        get defaultSelectedValue() { return this.current; }
+        set defaultSelectedValue(value) { if (!this.currentControlled) {
+            this.current = value;
+            this.sync();
+        } }
+        get selectedCategoryValue() { return this.currentCategory; }
+        set selectedCategoryValue(value) { this.currentCategoryControlled = true; this.currentCategory = value; this.sync(); }
+        get defaultSelectedCategoryValue() { return this.currentCategory; }
+        set defaultSelectedCategoryValue(value) { if (!this.currentCategoryControlled) {
+            this.currentCategory = value;
+            this.sync();
+        } }
+        get openCategories() { return [...this.categoriesOpen]; }
+        set openCategories(values) { this.categoriesOpenControlled = true; this.categoriesOpen = new Set(values); this.sync(); }
+        get defaultOpenCategories() { return [...this.categoriesOpen]; }
+        set defaultOpenCategories(values) { if (!this.categoriesOpenControlled) {
+            this.categoriesOpen = new Set(this.allowsMultipleCategories() ? values : values.slice(0, 1));
+            this.sync();
+        } }
+        allowsMultipleCategories() { return this.getAttribute("multiple") !== "false"; }
+        onBreakpointChange = () => {
+            if (!this.breakpoint?.matches && this.drawerOpen)
+                this.requestOpen(false);
+            this.syncResponsive();
+        };
+        navControls() {
+            return [...this.querySelectorAll("spui-nav-item, spui-app-item, spui-nav-sub-item, spui-nav-category-item")].filter(host => {
+                if (host.hasAttribute("disabled") || host.closest("spui-nav-sub-item-group")?.hidden)
+                    return false;
+                return Boolean(this.navControl(host));
+            });
+        }
+        navControl(host) { return host.shadowRoot?.querySelector("a,button") ?? null; }
+        syncTabStops(preferred) {
+            const items = this.navControls();
+            const roving = this.getAttribute("tabbable") === "false";
+            const active = preferred ?? items.find(item => item.shadowRoot?.activeElement) ?? items.find(item => item.hasAttribute("selected")) ?? items[0];
+            for (const item of items)
+                this.navControl(item)?.setAttribute("tabindex", String(!roving || item === active ? 0 : -1));
+        }
+        handleRovingKeydown(event) {
+            if (this.getAttribute("tabbable") !== "false")
+                return false;
+            const host = event.composedPath().find(node => node instanceof HTMLElement && this.navControl(node));
+            if (!host)
+                return false;
+            const items = this.navControls();
+            const current = items.indexOf(host);
+            if (current < 0)
+                return false;
+            let next = current;
+            if (event.key === "ArrowDown")
+                next = Math.min(items.length - 1, current + 1);
+            else if (event.key === "ArrowUp")
+                next = Math.max(0, current - 1);
+            else if (event.key === "Home")
+                next = 0;
+            else if (event.key === "End")
+                next = items.length - 1;
+            else
+                return false;
+            event.preventDefault();
+            this.syncTabStops(items[next]);
+            this.navControl(items[next])?.focus();
+            return true;
+        }
+        setDrawerOpen(value, notify = false) {
+            if (value === this.drawerOpen) {
+                this.syncResponsive();
+                return;
+            }
+            this.drawerOpen = value;
+            this.reflectingOpen = true;
+            this.toggleAttribute("open", value);
+            this.reflectingOpen = false;
+            this.syncResponsive();
+            if (notify)
+                this.dispatchEvent(new CustomEvent("spui-nav-open-change", { bubbles: true, composed: true, detail: { open: value } }));
+        }
+        requestOpen(value) {
+            if (this.drawerOpenControlled) {
+                if (value !== this.drawerOpen)
+                    this.dispatchEvent(new CustomEvent("spui-nav-open-change", { bubbles: true, composed: true, detail: { open: value } }));
+            }
+            else
+                this.setDrawerOpen(value, true);
+        }
+        onPopoverToggle() {
+            const nav = this.shadowRoot?.querySelector("nav");
+            const value = nav?.matches(":popover-open") ?? false;
+            if (value === this.drawerOpen)
+                return;
+            if (this.drawerOpenControlled)
+                this.dispatchEvent(new CustomEvent("spui-nav-open-change", { bubbles: true, composed: true, detail: { open: value } }));
+            else
+                this.setDrawerOpen(value, true);
+        }
+        syncResponsive() {
+            const nav = this.shadowRoot?.querySelector("nav");
+            const toggle = this.shadowRoot?.querySelector(".mobile-toggle");
+            const close = this.shadowRoot?.querySelector(".mobile-close");
+            const railToggle = this.shadowRoot?.querySelector(".rail-toggle");
+            if (!nav || !toggle || !close || !railToggle)
+                return;
+            const mobile = this.breakpoint?.matches ?? window.matchMedia("(max-width: 640px)").matches;
+            const inlineDrawer = this.getAttribute("data-drawer-type") === "inline";
+            this.toggleAttribute("data-mobile", mobile);
+            this.toggleAttribute("data-collapsed", !mobile && this.collapsed);
+            this.dataset.direction = getComputedStyle(this).direction;
+            toggle.hidden = !mobile;
+            toggle.setAttribute("aria-expanded", String(mobile && this.drawerOpen));
+            toggle.setAttribute("aria-label", this.drawerOpen ? this.getAttribute("close-label") ?? "Close navigation" : this.getAttribute("open-label") ?? "Open navigation");
+            close.setAttribute("aria-label", this.getAttribute("close-label") ?? "Close navigation");
+            close.hidden = !mobile;
+            railToggle.hidden = mobile || !this.hasAttribute("collapsible");
+            railToggle.setAttribute("aria-expanded", String(!this.collapsed));
+            railToggle.setAttribute("aria-label", this.getAttribute(this.collapsed ? "expand-label" : "collapse-label") ?? (this.collapsed ? "Expand navigation" : "Collapse navigation"));
+            railToggle.title = this.getAttribute(this.collapsed ? "expand-label" : "collapse-label") ?? (this.collapsed ? "Expand navigation" : "Collapse navigation");
+            for (const item of this.querySelectorAll("spui-nav-item, spui-app-item, spui-nav-sub-item, spui-nav-category-item, spui-nav-sub-item-group, spui-nav-divider, spui-nav-section-header"))
+                item.toggleAttribute("compact", !mobile && this.collapsed);
+            if (!mobile) {
+                if (nav.matches(":popover-open"))
+                    nav.hidePopover();
+                nav.removeAttribute("popover");
+                nav.hidden = false;
+            }
+            else if (inlineDrawer) {
+                if (nav.matches(":popover-open"))
+                    nav.hidePopover();
+                nav.removeAttribute("popover");
+                nav.hidden = !this.drawerOpen;
+            }
+            else if (typeof nav.showPopover === "function") {
+                nav.hidden = false;
+                if (!nav.hasAttribute("popover"))
+                    nav.setAttribute("popover", "auto");
+                if (this.drawerOpen && !nav.matches(":popover-open"))
+                    nav.showPopover();
+                else if (!this.drawerOpen && nav.matches(":popover-open"))
+                    nav.hidePopover();
+            }
+            else {
+                this.toggleAttribute("data-popover-fallback", true);
+                nav.hidden = !this.drawerOpen;
+            }
+        }
+        onClick(event) {
+            const path = event.composedPath();
+            const mobile = this.breakpoint?.matches ?? false;
+            if (mobile && this.getAttribute("data-drawer-type") === "inline" && path.some(node => node instanceof HTMLElement && node.classList.contains("mobile-toggle"))) {
+                event.preventDefault();
+                this.requestOpen(!this.drawerOpen);
+                return;
+            }
+            if (mobile && this.getAttribute("data-drawer-type") === "inline" && path.some(node => node instanceof HTMLElement && node.classList.contains("mobile-close"))) {
+                event.preventDefault();
+                this.requestOpen(false);
+                this.shadowRoot?.querySelector(".mobile-toggle")?.focus();
+                return;
+            }
+            if (path.some(node => node instanceof HTMLElement && node.classList.contains("rail-toggle"))) {
+                const collapsed = !this.collapsed;
+                if (this.collapsedControlled)
+                    this.dispatchEvent(new CustomEvent("spui-nav-collapsed-change", { bubbles: true, composed: true, detail: { collapsed } }));
+                else
+                    this.setCollapsed(collapsed, true);
+                return;
+            }
+            const categoryItem = path.find(node => node instanceof HTMLElement && node.localName === "spui-nav-category-item");
+            if (categoryItem) {
+                const category = categoryItem.parentElement?.closest("spui-nav-category");
+                const value = category?.getAttribute("value") ?? "";
+                if (!value || category?.hasAttribute("disabled"))
+                    return;
+                if (!this.currentCategoryControlled)
+                    this.currentCategory = value;
+                const next = new Set(this.categoriesOpen);
+                if (next.has(value))
+                    next.delete(value);
+                else {
+                    if (!this.allowsMultipleCategories())
+                        next.clear();
+                    next.add(value);
+                }
+                if (!this.categoriesOpenControlled)
+                    this.categoriesOpen = next;
+                this.sync();
+                const categoryIndex = path.indexOf(category);
+                const parentCategory = categoryIndex >= 0 ? path.slice(categoryIndex + 1).find((node) => node instanceof HTMLElement && node.localName === "spui-nav-category") ?? null : null;
+                this.dispatchEvent(new CustomEvent("spui-nav-category-toggle", { bubbles: true, composed: true, detail: { value, categoryValue: parentCategory?.getAttribute("value") ?? undefined, open: next.has(value), openCategories: [...next], event, type: "click" } }));
+                return;
+            }
+            const item = path.find(node => node instanceof HTMLElement && (node.localName === "spui-nav-item" || node.localName === "spui-app-item" || node.localName === "spui-nav-sub-item"));
+            if (!item)
+                return;
+            if (item.hasAttribute("disabled")) {
+                event.preventDefault();
+                return;
+            }
+            const value = item.getAttribute("value") ?? "";
+            if (!value)
+                return;
+            if (!this.currentControlled)
+                this.current = value;
+            this.sync();
+            const category = path.find((node) => node instanceof HTMLElement && node.localName === "spui-nav-category") ?? null;
+            this.dispatchEvent(new CustomEvent("spui-nav-item-select", { bubbles: true, composed: true, detail: { value, href: item.getAttribute("href"), label: item.textContent?.trim() ?? "", categoryValue: category?.getAttribute("value") ?? undefined, event, type: "click" } }));
+            if (this.breakpoint?.matches && this.drawerOpen)
+                this.requestOpen(false);
+        }
+        setCollapsed(value, notify = false) {
+            if (value === this.collapsed)
+                return;
+            this.reflectingCollapsed = true;
+            this.toggleAttribute("collapsed", value);
+            this.reflectingCollapsed = false;
+            this.sync();
+            if (notify)
+                this.dispatchEvent(new CustomEvent("spui-nav-collapsed-change", { bubbles: true, composed: true, detail: { collapsed: value } }));
+        }
+        sync() {
+            const nav = this.shadowRoot?.querySelector("nav");
+            if (!nav)
+                return;
+            nav.setAttribute("aria-label", this.getAttribute("aria-label") ?? this.getAttribute("label") ?? "Navigation");
+            let categories = 0;
+            for (const category of this.querySelectorAll("spui-nav-category")) {
+                const value = category.getAttribute("value") ?? "";
+                const categoryItem = category.querySelector("spui-nav-category-item");
+                const group = category.querySelector("spui-nav-sub-item-group");
+                if (!category.dataset.spuiGroupId)
+                    category.dataset.spuiGroupId = `spui-nav-group-${++this.nextGroupId}`;
+                const isOpen = this.categoriesOpen.has(value);
+                if (categoryItem) {
+                    categoryItem.toggleAttribute("expanded", isOpen);
+                    categoryItem.toggleAttribute("disabled", category.hasAttribute("disabled"));
+                    categoryItem.setAttribute("controls", category.dataset.spuiGroupId);
+                }
+                if (group) {
+                    group.id = category.dataset.spuiGroupId;
+                    const navGroup = group;
+                    if (navGroup.setExpanded)
+                        navGroup.setExpanded(isOpen);
+                    else
+                        group.hidden = !isOpen;
+                }
+                categories++;
+            }
+            for (const item of this.querySelectorAll("spui-nav-item, spui-app-item, spui-nav-sub-item")) {
+                const selected = item.getAttribute("value") === this.current;
+                item.toggleAttribute("selected", selected);
+            }
+            for (const category of this.querySelectorAll("spui-nav-category")) {
+                const selected = category.getAttribute("value") === this.currentCategory;
+                category.toggleAttribute("selected", selected);
+                category.querySelector("spui-nav-category-item")?.toggleAttribute("selected", selected);
+            }
+            this.dataset.density = this.getAttribute("density") ?? "medium";
+            this.toggleAttribute("data-has-categories", categories > 0);
+            this.syncTabStops();
+            this.syncResponsive();
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const nav = document.createElement("nav");
+            nav.setAttribute("aria-label", this.getAttribute("aria-label") ?? this.getAttribute("label") ?? "Navigation");
+            nav.part.add("navigation");
+            nav.id = this.id ? `${this.id}-panel` : `spui-nav-panel-${++nextNavId}`;
+            const mobileHeader = document.createElement("div");
+            mobileHeader.className = "mobile-header";
+            mobileHeader.part.add("mobile-header");
+            const mobileTitle = document.createElement("span");
+            mobileTitle.textContent = this.getAttribute("label") ?? "Navigation";
+            const closeButton = document.createElement("button");
+            closeButton.type = "button";
+            closeButton.className = "mobile-close";
+            closeButton.part.add("mobile-close");
+            closeButton.setAttribute("popovertarget", nav.id);
+            closeButton.setAttribute("popovertargetaction", "hide");
+            closeButton.setAttribute("aria-label", this.getAttribute("close-label") ?? "Close navigation");
+            const closeIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            closeIcon.setAttribute("viewBox", "0 0 24 24");
+            closeIcon.setAttribute("width", "20");
+            closeIcon.setAttribute("height", "20");
+            closeIcon.setAttribute("aria-hidden", "true");
+            const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            closePath.setAttribute("d", "M5 5l14 14M19 5 5 19");
+            closePath.setAttribute("fill", "none");
+            closePath.setAttribute("stroke", "currentColor");
+            closePath.setAttribute("stroke-width", "1.8");
+            closePath.setAttribute("stroke-linecap", "round");
+            closeIcon.append(closePath);
+            closeButton.append(closeIcon);
+            mobileHeader.append(mobileTitle, closeButton);
+            const slot = document.createElement("slot");
+            nav.append(slot);
+            nav.prepend(mobileHeader);
+            const railToggle = document.createElement("button");
+            railToggle.type = "button";
+            railToggle.className = "rail-toggle";
+            railToggle.part.add("rail-toggle");
+            railToggle.setAttribute("aria-controls", nav.id);
+            railToggle.setAttribute("aria-expanded", String(!this.collapsed));
+            railToggle.setAttribute("aria-label", this.getAttribute("collapse-label") ?? "Collapse navigation");
+            const railIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            railIcon.setAttribute("viewBox", "0 0 24 24");
+            railIcon.setAttribute("width", "18");
+            railIcon.setAttribute("height", "18");
+            railIcon.setAttribute("aria-hidden", "true");
+            const railPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            railPath.setAttribute("d", "M14 5 7 12l7 7");
+            railPath.setAttribute("fill", "none");
+            railPath.setAttribute("stroke", "currentColor");
+            railPath.setAttribute("stroke-width", "2");
+            railPath.setAttribute("stroke-linecap", "round");
+            railPath.setAttribute("stroke-linejoin", "round");
+            railIcon.append(railPath);
+            railToggle.append(railIcon);
+            const toggle = document.createElement("button");
+            toggle.type = "button";
+            toggle.className = "mobile-toggle";
+            toggle.part.add("mobile-toggle");
+            toggle.setAttribute("popovertarget", nav.id);
+            toggle.setAttribute("popovertargetaction", "toggle");
+            toggle.setAttribute("aria-controls", nav.id);
+            toggle.setAttribute("aria-expanded", "false");
+            toggle.setAttribute("aria-label", this.getAttribute("open-label") ?? "Open navigation");
+            const menuIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            menuIcon.setAttribute("viewBox", "0 0 24 24");
+            menuIcon.setAttribute("width", "22");
+            menuIcon.setAttribute("height", "22");
+            menuIcon.setAttribute("aria-hidden", "true");
+            const menuPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            menuPath.setAttribute("d", "M4 6h16M4 12h16M4 18h16");
+            menuPath.setAttribute("fill", "none");
+            menuPath.setAttribute("stroke", "currentColor");
+            menuPath.setAttribute("stroke-width", "1.8");
+            menuPath.setAttribute("stroke-linecap", "round");
+            menuIcon.append(menuPath);
+            toggle.append(menuIcon);
+            const style = document.createElement("style");
+            style.textContent = `${base}
+        :host{display:block;width:var(--spui-nav-width,260px);max-width:100%;min-width:0;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:inherit}:host([data-collapsed]){width:var(--spui-nav-collapsed-width,64px)}
+        nav{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;width:100%;min-width:0;font-family:var(--spui-font-family,inherit);font-size:var(--spui-nav-font-size,14px);color:inherit}nav[hidden]{display:none}nav slot{min-width:0}
+        :host([density=small]) nav{--spui-nav-item-block:5px;--spui-nav-font-size:13px}
+        :host([density=large]) nav{--spui-nav-item-block:10px;--spui-nav-font-size:15px}
+        .mobile-toggle,.mobile-header{display:none}.rail-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:36px;padding:6px 12px;border:0;border-radius:var(--spui-control-radius,6px);background:transparent;color:inherit;cursor:pointer}.rail-toggle:hover{background:var(--spui-ui-surface-hover,var(--spui-semantic-subtle-background,#f5f5f5))}.rail-toggle:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}.rail-toggle[hidden]{display:none}.rail-toggle svg{transition:transform var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}:host([data-collapsed]) .rail-toggle{justify-content:center;padding-inline:4px}:host([data-collapsed][data-direction=ltr]) .rail-toggle svg,:host([data-direction=rtl]) .rail-toggle svg{transform:rotate(180deg)}:host([data-collapsed][data-direction=rtl]) .rail-toggle svg{transform:none}
+        .mobile-toggle[hidden],.mobile-close[hidden]{display:none}
+        .mobile-toggle,.mobile-close{box-sizing:border-box;place-items:center;width:44px;height:44px;border:0;border-radius:var(--spui-control-radius,6px);background:transparent;color:inherit;cursor:pointer}
+        .mobile-toggle:hover,.mobile-close:hover{background:var(--spui-ui-surface-hover,var(--spui-semantic-subtle-background,#f5f5f5))}
+        .mobile-toggle:focus-visible,.mobile-close:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}
+        .mobile-header{align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0 0 8px;padding-block-end:8px;border-block-end:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));font-weight:600}
+        .mobile-header[part]{min-width:0}
+        .mobile-header span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+        ::slotted(spui-nav-item),::slotted(spui-nav-category),::slotted(spui-nav-divider),::slotted(spui-nav-section-header){min-width:0}
+        @media(max-width:640px){
+          :host{width:auto;max-width:none}
+          .mobile-toggle{display:grid}
+          :host([data-drawer-type=inline]) nav{box-sizing:border-box;width:100%;padding:8px 12px;border:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));border-radius:var(--spui-surface-radius,var(--spui-card-radius,8px));background:var(--spui-ui-surface,var(--spui-semantic-card-background,#fff))}
+          :host([data-drawer-type=inline]) .mobile-header{display:flex}
+          nav[popover]:popover-open{position:fixed;inset-block:0;inset-inline:0 auto;box-sizing:border-box;display:grid;align-content:start;gap:2px;width:min(var(--spui-nav-width,260px),calc(100vw - 32px));height:100dvh;max-height:none;margin:0;padding:8px 12px;overflow:auto;border:0;border-inline-end:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));background:var(--spui-card-background,var(--spui-ui-surface,#fff));color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));box-shadow:0 12px 36px color-mix(in srgb,var(--spui-ui-text,#242424) 20%,transparent)}
+          nav[popover]:popover-open .mobile-header{display:flex}
+          nav[popover]::backdrop{background:color-mix(in srgb,var(--spui-ui-text,#242424) 36%,transparent);backdrop-filter:blur(1px)}
+          :host([data-direction=rtl]) nav[popover]:popover-open{border-inline-end:0;border-inline-start:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))}
+        }
+        @media(prefers-reduced-motion:reduce){.rail-toggle svg{transition:none}}
+        @media(forced-colors:active){nav{color:CanvasText}nav[popover]:popover-open{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}nav[popover]::backdrop{background:Canvas}}
+      `;
+            shadow.append(style, toggle, railToggle, nav);
+        }
+    }
+    customElements.define("spui-nav", SpuiNav);
+}
+function defineNavItemElement(tag) {
+    if (customElements.get(tag))
+        return;
+    class SpuiNavItem extends HTMLElement {
+        static observedAttributes = ["href", "disabled", "selected", "value", "compact", "aria-label"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.sync(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() {
+            const action = this.shadowRoot?.querySelector("a,button");
+            if (!action)
+                return;
+            const href = this.getAttribute("href");
+            if (href && action.localName === "a")
+                action.setAttribute("href", href);
+            else if (href && action.localName === "button") {
+                const anchor = document.createElement("a");
+                anchor.setAttribute("href", href);
+                anchor.part.add("action");
+                anchor.innerHTML = "<slot name=avatar></slot><slot name=icon></slot><span part=label><slot></slot></span><span part=compact-fallback aria-hidden=true></span>";
+                action.replaceWith(anchor);
+            }
+            else if (!href && action.localName === "a") {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.part.add("action");
+                button.innerHTML = "<slot name=avatar></slot><slot name=icon></slot><span part=label><slot></slot></span><span part=compact-fallback aria-hidden=true></span>";
+                action.replaceWith(button);
+            }
+            const control = this.shadowRoot?.querySelector("a,button");
+            if (!control)
+                return;
+            if (control.localName === "button")
+                control.disabled = this.hasAttribute("disabled");
+            else {
+                if (this.hasAttribute("disabled")) {
+                    control.setAttribute("aria-disabled", "true");
+                    control.setAttribute("tabindex", "-1");
+                }
+                else {
+                    control.removeAttribute("aria-disabled");
+                    control.removeAttribute("tabindex");
+                }
+            }
+            if (this.hasAttribute("selected"))
+                control.setAttribute("aria-current", "page");
+            else
+                control.removeAttribute("aria-current");
+            const label = this.getAttribute("aria-label") ?? this.textContent?.trim() ?? "";
+            control.setAttribute("aria-label", label);
+            control.title = this.hasAttribute("compact") ? label : "";
+            const fallback = control.querySelector("[part=compact-fallback]");
+            if (fallback) {
+                fallback.textContent = Array.from(label)[0] ?? "";
+                fallback.hidden = Boolean(this.querySelector('[slot="icon"],[slot="avatar"]'));
+            }
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const control = this.hasAttribute("href") ? document.createElement("a") : document.createElement("button");
+            if (control.localName === "button")
+                control.type = "button";
+            control.part.add("action");
+            control.innerHTML = "<slot name=avatar></slot><slot name=icon></slot><span part=label><slot></slot></span><span part=compact-fallback aria-hidden=true></span>";
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0}a,button{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:var(--spui-nav-item-block,7px) 12px;border:0;border-radius:var(--spui-nav-item-radius,5px);background:transparent;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:inherit;text-align:start;text-decoration:none;cursor:pointer}a:hover,button:hover{background:var(--spui-ui-surface-hover,var(--spui-semantic-subtle-background,#f5f5f5))}:host([selected]) a,:host([selected]) button{background:color-mix(in srgb,var(--spui-ui-accent,#78716c) 12%,var(--spui-ui-surface,#fff));font-weight:600}:host([disabled]) a,:host([disabled]) button{opacity:.55;cursor:not-allowed}a:focus-visible,button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}::slotted([slot=icon]){inline-size:20px;block-size:20px;flex:none}::slotted([slot=avatar]){inline-size:28px;block-size:28px;flex:none}[part=compact-fallback]{display:none}:host([compact]) a,:host([compact]) button{justify-content:center;gap:0;padding-inline:4px}:host([compact]) [part=label]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([compact]) [part=compact-fallback]:not([hidden]){display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--spui-ui-surface-hover,var(--spui-semantic-subtle-background,#f5f5f5));font-size:12px;font-weight:600}:host(spui-nav-sub-item){padding-inline-start:14px}:host(spui-app-item) a,:host(spui-app-item) button{font-weight:600}:host(spui-app-item) [part=label]{font-size:var(--spui-nav-app-item-font-size,15px)}@media(forced-colors:active){a,button{color:LinkText}:host([selected]) a,:host([selected]) button{outline:1px solid Highlight}}`;
+            shadow.append(style, control);
+        }
+    }
+    customElements.define(tag, SpuiNavItem);
+}
+export function defineNavItem() { defineNavItemElement("spui-nav-item"); }
+export function defineNavSubItem() { defineNavItemElement("spui-nav-sub-item"); }
+export function defineAppItem() { defineNavItemElement("spui-app-item"); }
+function defineNavPart(tag, styleText, role) {
+    if (customElements.get(tag))
+        return;
+    class SpuiNavPart extends HTMLElement {
+        connectedCallback() {
+            if (role)
+                this.setAttribute("role", role);
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}${styleText}`;
+            shadow.append(style, document.createElement("slot"));
+        }
+    }
+    customElements.define(tag, SpuiNavPart);
+}
+export function defineAppItemStatic() {
+    defineNavPart("spui-app-item-static", ":host{box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:600 15px/1.3 var(--spui-font-family,inherit)}::slotted([slot=icon]){inline-size:20px;block-size:20px;flex:none}");
+}
+export function defineSplitNavItem() {
+    if (customElements.get("spui-split-nav-item"))
+        return;
+    class SpuiSplitNavItem extends HTMLElement {
+        connectedCallback() { if (this.shadowRoot)
+            return; const shadow = this.attachShadow({ mode: "open" }); const style = document.createElement("style"); style.textContent = `${base}:host{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;min-width:0}slot[name=action],slot[name=menu-button],slot[name=toggle-button]{display:grid;place-items:center}::slotted(spui-nav-item),::slotted(spui-nav-sub-item){min-width:0}::slotted([slot=action]),::slotted([slot=menu-button]),::slotted([slot=toggle-button]){min-width:36px;min-height:36px}`; shadow.append(style, document.createElement("slot"), Object.assign(document.createElement("slot"), { name: "action" }), Object.assign(document.createElement("slot"), { name: "menu-button" }), Object.assign(document.createElement("slot"), { name: "toggle-button" })); }
+    }
+    customElements.define("spui-split-nav-item", SpuiSplitNavItem);
+}
+export function defineHamburger() {
+    if (customElements.get("spui-hamburger"))
+        return;
+    class SpuiHamburger extends HTMLElement {
+        static observedAttributes = ["disabled", "disabled-focusable", "aria-label", "aria-expanded", "appearance", "size", "shape", "icon-position", "type", "title"];
+        connectedCallback() { if (!this.hasAttribute("aria-label"))
+            this.setAttribute("aria-label", "Toggle navigation"); this.render(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.render(); }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open", delegatesFocus: true });
+            const previous = shadow.querySelector("button");
+            const restoreFocus = previous !== null && shadow.activeElement === previous;
+            const button = document.createElement("button");
+            button.className = this.getAttribute("appearance") || "secondary";
+            button.type = this.getAttribute("type") === "submit" || this.getAttribute("type") === "reset" ? this.getAttribute("type") : "button";
+            const disabled = this.hasAttribute("disabled");
+            const disabledFocusable = this.hasAttribute("disabled-focusable");
+            button.disabled = disabled && !disabledFocusable;
+            if (disabledFocusable) {
+                button.tabIndex = 0;
+                button.setAttribute("aria-disabled", "true");
+            }
+            for (const attribute of this.attributes) {
+                if (attribute.name.startsWith("aria-") || attribute.name === "title")
+                    button.setAttribute(attribute.name, attribute.value);
+            }
+            button.setAttribute("aria-label", this.getAttribute("aria-label") || "Toggle navigation");
+            if (disabledFocusable)
+                button.addEventListener("click", event => { event.preventDefault(); event.stopImmediatePropagation(); });
+            const iconSlot = document.createElement("slot");
+            iconSlot.name = "icon";
+            const icon = document.createElement("span");
+            icon.className = "icon";
+            icon.append(iconSlot);
+            const content = document.createElement("span");
+            content.className = "content";
+            content.append(document.createElement("slot"));
+            const style = document.createElement("style");
+            style.textContent = `${base}${buttonControlCss}:host{display:inline-flex;vertical-align:middle}button{min-width:44px;min-height:44px;padding:8px}::slotted([slot=icon]){display:inline-flex;align-items:center;justify-content:center;line-height:0}::slotted([slot=icon]) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}@media(forced-colors:active){button:focus-visible{outline-color:Highlight}}`;
+            button.append(icon, content);
+            shadow.replaceChildren(style, button);
+            if (restoreFocus)
+                button.focus();
+        }
+    }
+    customElements.define("spui-hamburger", SpuiHamburger);
+}
+export function defineNavDrawer() { defineNavPart("spui-nav-drawer", ":host{display:block;min-width:0}"); }
+export function defineNavDrawerHeader() { defineNavPart("spui-nav-drawer-header", ":host{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-block-end:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));font-weight:600}"); }
+export function defineNavDrawerBody() { defineNavPart("spui-nav-drawer-body", ":host{display:grid;align-content:start;gap:2px;min-width:0}"); }
+export function defineNavDrawerFooter() { defineNavPart("spui-nav-drawer-footer", ":host{display:grid;gap:4px;margin-block-start:auto;padding:8px 0;border-block-start:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1))}"); }
+export function defineNavCategory() {
+    if (customElements.get("spui-nav-category"))
+        return;
+    class SpuiNavCategory extends HTMLElement {
+        connectedCallback() { if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0}`;
+            shadow.append(style, document.createElement("slot"));
+        } }
+    }
+    customElements.define("spui-nav-category", SpuiNavCategory);
+}
+export function defineNavCategoryItem() {
+    if (customElements.get("spui-nav-category-item"))
+        return;
+    class SpuiNavCategoryItem extends HTMLElement {
+        static observedAttributes = ["expanded", "controls", "disabled", "compact", "selected", "aria-label"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.sync(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() { const button = this.shadowRoot?.querySelector("button"); if (!button)
+            return; button.setAttribute("aria-expanded", String(this.hasAttribute("expanded"))); if (this.hasAttribute("selected"))
+            button.setAttribute("aria-current", "page");
+        else
+            button.removeAttribute("aria-current"); const controls = this.getAttribute("controls"); if (controls)
+            button.setAttribute("aria-controls", controls); button.disabled = this.hasAttribute("disabled"); const defaultSlot = button.querySelector("slot:not([name])"); const label = this.getAttribute("aria-label") ?? defaultSlot?.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join("").trim() ?? ""; button.setAttribute("aria-label", label); button.title = this.hasAttribute("compact") ? label : ""; const fallback = button.querySelector("[part=compact-fallback]"); if (fallback) {
+            fallback.textContent = Array.from(label)[0] ?? "";
+            fallback.hidden = Boolean(this.querySelector('[slot="icon"],[slot="avatar"]'));
+        } }
+        render() { const shadow = this.attachShadow({ mode: "open" }); const button = document.createElement("button"); button.type = "button"; button.part.add("action"); button.innerHTML = "<slot name=avatar></slot><slot name=icon></slot><span part=label><slot></slot></span><span part=compact-fallback aria-hidden=true></span><span aria-hidden=true part=chevron><slot name=expand-icon></slot></span>"; const chevron = button.querySelector("[part=chevron]"); const expandIconSlot = button.querySelector('slot[name="expand-icon"]'); expandIconSlot.addEventListener("slotchange", () => chevron.classList.toggle("custom", expandIconSlot.assignedNodes({ flatten: true }).length > 0)); button.querySelector("slot:not([name])")?.addEventListener("slotchange", () => this.sync()); const style = document.createElement("style"); style.textContent = `${base}:host{display:block}button{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:var(--spui-nav-item-block,7px) 12px;border:0;border-radius:var(--spui-nav-item-radius,5px);background:transparent;color:var(--spui-ui-text,var(--spui-semantic-body-text,#242424));font:inherit;text-align:start;cursor:pointer}button:hover{background:var(--spui-ui-hover,var(--spui-semantic-subtle-background,#f5f5f5))}button[aria-current=page]{background:color-mix(in srgb,var(--spui-ui-accent,#78716c) 12%,var(--spui-ui-surface,#fff));font-weight:600}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-semantic-focus-border,#005a9e));outline-offset:2px}::slotted([slot=avatar]){inline-size:28px;block-size:28px;flex:none}[part=compact-fallback]{display:none}:host([compact]) button{justify-content:center;gap:0;padding-inline:4px}:host([compact]) [part=label]{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([compact]) [part=compact-fallback]:not([hidden]){display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--spui-ui-surface-hover,var(--spui-semantic-subtle-background,#f5f5f5));font-size:12px;font-weight:600}:host([compact]) [part=chevron]{display:none}span[part=chevron]:not(.custom){box-sizing:border-box;width:7px;height:7px;margin-inline-start:auto;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform var(--spui-motion-duration-fast,.12s) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}:host([expanded]) span[part=chevron]:not(.custom){transform:translateY(2px) rotate(225deg)}span[part=chevron].custom{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-inline-start:auto}:host([disabled]) button{opacity:.55;cursor:not-allowed}@media(prefers-reduced-motion:reduce){span[part=chevron]:not(.custom){transition:none}}@media(forced-colors:active){button{color:ButtonText}}`; shadow.append(style, button); }
+    }
+    customElements.define("spui-nav-category-item", SpuiNavCategoryItem);
+}
+export function defineNavSubItemGroup() {
+    if (customElements.get("spui-nav-sub-item-group"))
+        return;
+    class SpuiNavSubItemGroup extends HTMLElement {
+        expanded = false;
+        exitPending = false;
+        exitGeneration = 0;
+        hasSynced = false;
+        connectedCallback() {
+            if (!this.shadowRoot) {
+                const shadow = this.attachShadow({ mode: "open" });
+                const style = document.createElement("style");
+                style.textContent = `${base}:host{display:grid;gap:2px;padding-inline-start:16px}:host([compact]){padding-inline-start:0}:host([hidden]){display:none}`;
+                shadow.append(style, document.createElement("slot"));
+            }
+        }
+        setExpanded(open) {
+            if (!this.hasSynced) {
+                this.hasSynced = true;
+                this.expanded = open;
+                this.hidden = !open;
+                this.inert = !open;
+                if (open)
+                    this.removeAttribute("aria-hidden");
+                else
+                    this.setAttribute("aria-hidden", "true");
+                this.toggleAttribute("motion-visible", open);
+                return;
+            }
+            this.expanded = open;
+            this.toggleAttribute("motion-visible", open);
+            if (open) {
+                this.exitGeneration++;
+                this.exitPending = false;
+                this.hidden = false;
+                this.inert = false;
+                this.removeAttribute("aria-hidden");
+                return;
+            }
+            if (!this.hasAttribute("motion") || this.hidden) {
+                this.exitPending = false;
+                this.hidden = true;
+                return;
+            }
+            this.exitPending = true;
+            this.hidden = false;
+            this.inert = true;
+            this.setAttribute("aria-hidden", "true");
+            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);
+                    if (element instanceof HTMLSlotElement)
+                        for (const child of element.assignedElements({ flatten: true }))
+                            visit(child);
+                    for (const child of element.children)
+                        visit(child);
+                };
+                visit(this);
+                const finish = () => {
+                    if (generation !== this.exitGeneration || this.expanded || !this.exitPending)
+                        return;
+                    this.exitPending = false;
+                    this.hidden = true;
+                };
+                if (animations.size)
+                    void Promise.allSettled([...animations].map(animation => animation.finished)).then(finish);
+                else
+                    finish();
+            }));
+        }
+    }
+    customElements.define("spui-nav-sub-item-group", SpuiNavSubItemGroup);
+}
+export function defineNavDivider() {
+    if (customElements.get("spui-nav-divider"))
+        return;
+    class SpuiNavDivider extends HTMLElement {
+        static observedAttributes = ["align-content", "appearance", "inset", "vertical", "aria-label", "aria-labelledby"];
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.sync(); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.sync(); }
+        sync() {
+            const vertical = this.hasAttribute("vertical");
+            this.dataset.orientation = vertical ? "vertical" : "horizontal";
+            this.dataset.alignContent = this.getAttribute("align-content") ?? "center";
+            this.dataset.dividerAppearance = this.getAttribute("appearance") ?? "default";
+            this.setAttribute("role", "separator");
+            this.setAttribute("aria-orientation", vertical ? "vertical" : "horizontal");
+            const wrapper = this.shadowRoot?.querySelector('slot[name="wrapper"]');
+            const hasWrapper = Boolean(wrapper?.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim())));
+            this.dataset.hasLabel = String(hasWrapper);
+        }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const before = document.createElement("span");
+            before.className = "line";
+            before.part.add("line");
+            before.setAttribute("aria-hidden", "true");
+            const wrapper = document.createElement("slot");
+            wrapper.name = "wrapper";
+            wrapper.addEventListener("slotchange", () => this.sync());
+            const after = document.createElement("span");
+            after.className = "line";
+            after.part.add("line");
+            after.setAttribute("aria-hidden", "true");
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{box-sizing:border-box;display:flex;align-items:center;gap:var(--spui-divider-gap,12px);min-width:0;margin-block:var(--spui-divider-margin-block,12px);color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font:inherit}:host([data-orientation=vertical]){display:inline-flex;flex-direction:column;align-self:stretch;min-height:1em;width:1px;margin-inline:var(--spui-divider-margin-inline,12px);margin-block:0}:host([data-has-label=false]) slot{display:none}:host([data-has-label=false]) .line:last-child{display:none}:host([data-has-label=true]) slot{min-width:0;font-size:.875em;line-height:1.25;text-align:center}.line{flex:1;min-height:1px;background:var(--spui-divider-color,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)))}:host([data-orientation=vertical]) .line{min-width:1px;min-height:0;width:1px;height:auto;background:var(--spui-divider-color,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)))}:host([data-divider-appearance=brand]) .line{background:var(--spui-divider-color,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)))}:host([data-divider-appearance=strong]) .line{background:var(--spui-divider-color,color-mix(in srgb,var(--spui-ui-text,#242424) 44%,var(--spui-ui-stroke,#d1d1d1)))}:host([data-divider-appearance=subtle]) .line{background:var(--spui-divider-color,color-mix(in srgb,var(--spui-ui-stroke,#d1d1d1) 56%,transparent))}:host([data-align-content=start]) .line:first-child{flex:0}:host([data-align-content=end]) .line:last-child{flex:0}:host([data-align-content=center]) .line{flex:1}:host([inset]){margin-inline:var(--spui-divider-inset,16px)}@media(forced-colors:active){.line{background:CanvasText}}`;
+            shadow.append(style, before, wrapper, after);
+        }
+    }
+    customElements.define("spui-nav-divider", SpuiNavDivider);
+}
+export function defineNavSectionHeader() {
+    if (customElements.get("spui-nav-section-header"))
+        return;
+    class SpuiNavSectionHeader extends HTMLElement {
+        connectedCallback() { if (!this.hasAttribute("role"))
+            this.setAttribute("role", "heading"); if (!this.hasAttribute("aria-level"))
+            this.setAttribute("aria-level", "3"); if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            const label = document.createElement("slot");
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;padding:12px 12px 4px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161));font:600 12px/1.3 var(--spui-font-family,inherit);letter-spacing:.02em;text-transform:uppercase}:host([compact]){display:none}`;
+            shadow.append(style, label);
+        } }
+    }
+    customElements.define("spui-nav-section-header", SpuiNavSectionHeader);
+}