@pithyjs/ui-kit 0.1.0-beta.0

package/dist/organisms/navigation/Navbar.js

@@ -0,0 +1,881 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.navbar",
+  "title": "<Navbar> Organism",
+  "category": "feature",
+  "risk": "high"
+}
+*/
+import { captureChildren } from '@pithyjs/core';
+import { isSafeHref } from '@pithyjs/shared';
+import { getGlobalRouter, routerLink, cleanupRouterDirectives, PREFETCH_STRATEGIES, } from '@pithyjs/router';
+import { nextUid } from '../../shared/common';
+import { captureSlot, extractSlot } from '../../shared/slots';
+import { validateEnum } from '../../shared/section';
+import { HAMBURGER_ICON, CLOSE_ICON } from '../../shared/icons';
+function isItemActive(current, target, exact) {
+    if (!current || !target)
+        return false;
+    if (exact)
+        return current === target;
+    if (target === '/')
+        return current === '/';
+    return current === target || current.startsWith(target + '/');
+}
+// Ref-counted global state so concurrent drawers don't clobber each other's
+// snapshots. Last releaser restores the body overflow; each element's inert
+// count only drops to zero when every drawer that requested it has released.
+let scrollLockRefs = 0;
+let originalBodyOverflow = '';
+const inertRefs = new WeakMap();
+function acquireScrollLock() {
+    if (scrollLockRefs === 0) {
+        originalBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    scrollLockRefs += 1;
+}
+function releaseScrollLock() {
+    if (scrollLockRefs === 0)
+        return;
+    scrollLockRefs -= 1;
+    if (scrollLockRefs === 0) {
+        document.body.style.overflow = originalBodyOverflow;
+    }
+}
+function acquireInert(el) {
+    const count = inertRefs.get(el) ?? 0;
+    if (count === 0)
+        el.setAttribute('inert', '');
+    inertRefs.set(el, count + 1);
+}
+function releaseInert(el) {
+    const count = inertRefs.get(el) ?? 0;
+    if (count <= 1) {
+        inertRefs.delete(el);
+        el.removeAttribute('inert');
+    }
+    else {
+        inertRefs.set(el, count - 1);
+    }
+}
+/**
+ * Test-only: reset the module-level ref counters so one test's leaked state
+ * (e.g. a nav that opened but never closed) can't skew the next test's
+ * acquire logic. Not exported from the public barrel.
+ */
+export function __resetNavbarGlobalLocksForTest() {
+    scrollLockRefs = 0;
+    originalBodyOverflow = '';
+}
+/** @codexApi {"parent":"pithy.ui-kit.navbar","name":"Navbar","stability":"stable","signature":"(props: NavbarProps) => { el: HTMLElement; destroy: () => void }"} */
+export function Navbar(props) {
+    const { label, brand, brandImageSrc, brandImageAlt, brandHref = '/', items, sticky = false, transparent = false, density = 'comfortable', skipToContentTarget = 'main-content', id, } = props;
+    if (import.meta.env?.DEV) {
+        if (typeof label !== 'string' || label.length === 0) {
+            console.warn('[<Navbar>] `label` is required — <nav> needs an accessible name. A page may contain multiple <nav> elements.');
+        }
+        if (brandImageSrc && !brandImageAlt) {
+            console.warn('[<Navbar>] `brandImageAlt` is required when `brandImageSrc` is set — screen readers need an accessible name for the logo image.');
+        }
+    }
+    const safeDensity = validateEnum('Navbar', 'density', density, ['comfortable', 'compact'], 'comfortable');
+    const menuId = nextUid('ui-navbar-menu');
+    const disposers = [];
+    // Capture projected children BEFORE calling any inner components, per the
+    // section-template pattern. We re-home nodes into the correct slot below
+    // based on their `data-slot` attribute.
+    const { el: childFragment, destroy: destroyChildren } = captureChildren();
+    disposers.push(destroyChildren);
+    const nav = document.createElement('nav');
+    nav.classList.add('ui-navbar');
+    const safeLabel = typeof label === 'string' && label.length > 0 ? label : 'Navigation';
+    nav.setAttribute('aria-label', safeLabel);
+    nav.style.viewTransitionName = `pithy-${menuId}`;
+    nav.dataset.density = safeDensity;
+    if (sticky)
+        nav.dataset.sticky = 'true';
+    if (transparent)
+        nav.dataset.transparent = 'true';
+    if (id)
+        nav.id = id;
+    // Must stay the first focusable element so Tab lands on it before anything.
+    const skip = document.createElement('a');
+    skip.classList.add('ui-navbar-skip');
+    skip.href = `#${skipToContentTarget}`;
+    skip.textContent = 'Skip to content';
+    nav.appendChild(skip);
+    // Mounted after the skip link so skip stays the first tab stop.
+    const projectedAnnouncement = extractSlot(childFragment, 'announcement');
+    if (projectedAnnouncement) {
+        const bar = document.createElement('div');
+        bar.classList.add('ui-navbar-announcement');
+        captureSlot(bar, 'announcement');
+        bar.appendChild(projectedAnnouncement);
+        nav.appendChild(bar);
+    }
+    const container = document.createElement('div');
+    container.classList.add('ui-navbar-container');
+    nav.appendChild(container);
+    const brandHasImage = typeof brandImageSrc === 'string' && brandImageSrc.length > 0;
+    const brandHasText = typeof brand === 'string' && brand.length > 0;
+    const safeBrandHref = typeof brandHref === 'string' && isSafeHref(brandHref) ? brandHref : '/';
+    // Shared creation logic for the brand mark. Called once for the main brand
+    // link and once for the drawer brand so both sites emit identical markup
+    // and attributes (the DOM does contain two <img> elements by design).
+    const appendBrandContent = (parent) => {
+        if (brandHasImage) {
+            const img = document.createElement('img');
+            img.classList.add('ui-navbar-brand-logo');
+            img.src = brandImageSrc;
+            // Alt is required when image is set; fall back to empty string so the
+            // image is treated as decorative rather than announced as the URL.
+            img.alt = typeof brandImageAlt === 'string' ? brandImageAlt : '';
+            img.setAttribute('loading', 'eager');
+            img.setAttribute('decoding', 'async');
+            parent.appendChild(img);
+        }
+        if (brandHasText) {
+            const wordmark = document.createElement('span');
+            wordmark.classList.add('ui-navbar-brand-text');
+            wordmark.textContent = brand;
+            parent.appendChild(wordmark);
+        }
+    };
+    const projectedBrand = extractSlot(childFragment, 'brand');
+    if (brandHasImage || brandHasText || projectedBrand) {
+        const brandLink = document.createElement('a');
+        brandLink.classList.add('ui-navbar-brand');
+        captureSlot(brandLink, 'brand');
+        brandLink.href = safeBrandHref;
+        if (projectedBrand) {
+            brandLink.appendChild(projectedBrand);
+        }
+        else {
+            appendBrandContent(brandLink);
+        }
+        container.appendChild(brandLink);
+    }
+    const toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.classList.add('ui-navbar-toggle');
+    toggle.setAttribute('aria-label', 'Open menu');
+    // Native Invoker Commands: the button opens/closes the menu popover,
+    // and the browser syncs aria-expanded/aria-controls for us.
+    toggle.setAttribute('commandfor', menuId);
+    toggle.setAttribute('command', 'toggle-popover');
+    // aria-controls pairs with commandfor but also provides a fallback for
+    // AT that don't yet surface Invoker Command relationships.
+    toggle.setAttribute('aria-controls', menuId);
+    toggle.innerHTML = HAMBURGER_ICON;
+    container.appendChild(toggle);
+    const menu = document.createElement('div');
+    menu.id = menuId;
+    menu.classList.add('ui-navbar-menu');
+    menu.setAttribute('popover', 'auto');
+    container.appendChild(menu);
+    // Close affordance mirrored inside the drawer because on mobile the outer
+    // hamburger sits below the popover ::backdrop and can't be tapped.
+    const drawerHeader = document.createElement('div');
+    drawerHeader.classList.add('ui-navbar-drawer-header');
+    if (brandHasImage || brandHasText) {
+        const drawerBrand = document.createElement('a');
+        drawerBrand.classList.add('ui-navbar-drawer-brand');
+        drawerBrand.href = safeBrandHref;
+        appendBrandContent(drawerBrand);
+        drawerHeader.appendChild(drawerBrand);
+    }
+    const closeInDrawer = document.createElement('button');
+    closeInDrawer.type = 'button';
+    closeInDrawer.classList.add('ui-navbar-close');
+    closeInDrawer.setAttribute('aria-label', 'Close menu');
+    closeInDrawer.setAttribute('commandfor', menuId);
+    closeInDrawer.setAttribute('command', 'hide-popover');
+    closeInDrawer.innerHTML = CLOSE_ICON;
+    drawerHeader.appendChild(closeInDrawer);
+    menu.appendChild(drawerHeader);
+    // popover=auto doesn't auto-close on internal activation, and routerLink
+    // calls stopPropagation(), so a bubble-phase listener here never fires on
+    // link clicks. Capture-phase runs before the anchor's handler; we defer
+    // hidePopover() one microtask so navigation still wins.
+    const closeMenuOnClick = (event) => {
+        const target = event.target;
+        if (!target)
+            return;
+        if (!target.closest('a, button'))
+            return;
+        if (target.closest('.ui-navbar-close'))
+            return;
+        if (!isMenuOpen)
+            return;
+        queueMicrotask(() => {
+            try {
+                menu.hidePopover();
+            }
+            catch {
+                /* already closed */
+            }
+        });
+    };
+    menu.addEventListener('click', closeMenuOnClick, true);
+    disposers.push(() => menu.removeEventListener('click', closeMenuOnClick, true));
+    // Long-press on a drawer link in touch mode opens the browser's context
+    // menu, which can leave the popover/body-scroll state inconsistent when
+    // dismissed. Suppress it for link items only so desktop right-click on
+    // chrome (close button, brand) still works normally.
+    const suppressLinkContextMenu = (event) => {
+        const target = event.target;
+        if (target?.closest('.ui-navbar-link'))
+            event.preventDefault();
+    };
+    menu.addEventListener('contextmenu', suppressLinkContextMenu);
+    disposers.push(() => menu.removeEventListener('contextmenu', suppressLinkContextMenu));
+    const list = document.createElement('ul');
+    list.classList.add('ui-navbar-list', 'u-list-reset');
+    // Safari/VoiceOver strips list semantics when list-style:none is applied
+    // via CSS. Explicit role restores "list, N items" announcement.
+    list.setAttribute('role', 'list');
+    menu.appendChild(list);
+    // Wrap the decorative indicator in an <li> so the <ul> contains only valid
+    // children. role="presentation" prevents it from inflating the list count.
+    const indicatorLi = document.createElement('li');
+    indicatorLi.setAttribute('role', 'presentation');
+    indicatorLi.setAttribute('aria-hidden', 'true');
+    const indicator = document.createElement('span');
+    indicator.classList.add('ui-navbar-indicator');
+    indicatorLi.appendChild(indicator);
+    list.appendChild(indicatorLi);
+    const positionIndicator = () => {
+        const active = list.querySelector('a[aria-current="page"], a.router-link-active');
+        if (!active || active.offsetParent === null) {
+            indicator.style.setProperty('--_indicator-opacity', '0');
+            return;
+        }
+        const listRect = list.getBoundingClientRect();
+        const activeRect = active.getBoundingClientRect();
+        const isRtl = resolveDirection(nav) === 'rtl';
+        // In LTR inset-inline-start is physical left → positive translate moves right.
+        // In RTL inset-inline-start is physical right → negative translate moves left.
+        const offset = isRtl
+            ? activeRect.right - listRect.right
+            : activeRect.left - listRect.left;
+        indicator.style.setProperty('--_indicator-x', `${offset}px`);
+        indicator.style.setProperty('--_indicator-w', `${activeRect.width}px`);
+        indicator.style.setProperty('--_indicator-opacity', '1');
+    };
+    const indicatorObserver = typeof MutationObserver !== 'undefined'
+        ? new MutationObserver(() => positionIndicator())
+        : null;
+    indicatorObserver?.observe(list, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['aria-current', 'class'],
+    });
+    if (indicatorObserver)
+        disposers.push(() => indicatorObserver.disconnect());
+    if (typeof window !== 'undefined') {
+        const onResize = () => positionIndicator();
+        window.addEventListener('resize', onResize);
+        disposers.push(() => window.removeEventListener('resize', onResize));
+        // Initial position after layout settles (fonts, container queries).
+        const indicatorRafId = requestAnimationFrame(positionIndicator);
+        disposers.push(() => cancelAnimationFrame(indicatorRafId));
+    }
+    const safeItems = Array.isArray(items) ? items : [];
+    // Router may not be mounted yet when Navbar constructs (App template renders
+    // Navbar before @routerOutlet runs). Re-resolve right before use — and always
+    // tag anchors with `data-router-link` so `setGlobalRouter → bindExistingRouterLinks`
+    // hooks them up on late router mount.
+    const resolveRouter = () => {
+        try {
+            return getGlobalRouter();
+        }
+        catch {
+            return null;
+        }
+    };
+    const currentPath = typeof window !== 'undefined' && window.location
+        ? window.location.pathname || '/'
+        : '/';
+    // Populated for the popstate fallback — used only if no router ever mounts.
+    const anchorHandles = [];
+    for (let i = 0; i < safeItems.length; i++) {
+        const item = safeItems[i];
+        if (!item ||
+            typeof item.label !== 'string' ||
+            typeof item.href !== 'string')
+            continue;
+        if (!isSafeHref(item.href))
+            continue;
+        const li = document.createElement('li');
+        li.classList.add('ui-navbar-item');
+        li.style.setProperty('--_i', String(i));
+        const anchor = document.createElement('a');
+        anchor.classList.add('ui-nav-link', 'ui-navbar-link');
+        anchor.href = item.href;
+        anchor.textContent = item.label;
+        const prefetchStrategy = item.prefetch === undefined
+            ? 'none'
+            : validateEnum('Navbar', `items[${i}].prefetch`, item.prefetch, PREFETCH_STRATEGIES, 'none');
+        anchor.setAttribute('data-router-link', '');
+        anchor.setAttribute('data-prefetch', prefetchStrategy);
+        if (item.exactActive === true)
+            anchor.setAttribute('exact-match', '');
+        const syncDataCurrent = () => {
+            if (anchor.getAttribute('aria-current') === 'page') {
+                anchor.dataset.current = 'page';
+            }
+            else {
+                delete anchor.dataset.current;
+            }
+        };
+        if (typeof MutationObserver !== 'undefined') {
+            const mo = new MutationObserver(syncDataCurrent);
+            mo.observe(anchor, {
+                attributes: true,
+                attributeFilter: ['aria-current'],
+            });
+            disposers.push(() => mo.disconnect());
+        }
+        disposers.push(() => cleanupRouterDirectives(anchor));
+        const router = resolveRouter();
+        if (router) {
+            anchor.setAttribute('data-router-bound', 'true');
+            routerLink(anchor, router, {
+                exactMatch: item.exactActive === true,
+                prefetch: prefetchStrategy,
+            });
+            syncDataCurrent();
+        }
+        else {
+            const active = isItemActive(currentPath, item.href, item.exactActive === true);
+            if (active) {
+                anchor.classList.add('router-link-active');
+                anchor.setAttribute('aria-current', 'page');
+            }
+            syncDataCurrent();
+            anchorHandles.push({ anchor, item });
+        }
+        li.appendChild(anchor);
+        list.appendChild(li);
+    }
+    // Search slot sits between items and actions so a ⌘K trigger reads as a
+    // peer of the nav, not a trailing action. Extracted before fall-through.
+    const projectedSearch = extractSlot(childFragment, 'search');
+    if (projectedSearch) {
+        const searchSlot = document.createElement('div');
+        searchSlot.classList.add('ui-navbar-search');
+        captureSlot(searchSlot, 'search');
+        searchSlot.appendChild(projectedSearch);
+        menu.appendChild(searchSlot);
+    }
+    const actionsSlot = document.createElement('div');
+    actionsSlot.classList.add('ui-navbar-actions');
+    captureSlot(actionsSlot, 'actions');
+    const projectedActions = extractSlot(childFragment, 'actions');
+    if (projectedActions)
+        actionsSlot.appendChild(projectedActions);
+    for (const node of Array.from(childFragment.childNodes)) {
+        if (node.nodeType === Node.ELEMENT_NODE)
+            actionsSlot.appendChild(node);
+    }
+    menu.appendChild(actionsSlot);
+    // A sticky nav keeps any in-nav sentinel pinned, so IntersectionObserver
+    // can't tell us we've scrolled — a passive scroll listener is the fallback.
+    /** Max time to wait for transitionend before clearing inline menu styles. */
+    const CLOSE_TRANSITION_TIMEOUT = 600;
+    const SCROLL_THRESHOLD = 8;
+    let scrollRafQueued = false;
+    let scrollRafId = 0;
+    const applyScrollFrame = () => {
+        scrollRafQueued = false;
+        const y = typeof window !== 'undefined'
+            ? window.scrollY || window.pageYOffset || 0
+            : 0;
+        if (y > SCROLL_THRESHOLD) {
+            nav.dataset.scrolled = 'true';
+        }
+        else {
+            delete nav.dataset.scrolled;
+        }
+        if (isMenuOpen)
+            positionMenu();
+    };
+    const onWindowScroll = () => {
+        if (scrollRafQueued)
+            return;
+        scrollRafQueued = true;
+        scrollRafId = requestAnimationFrame(applyScrollFrame);
+    };
+    // Tracked from the `toggle` event so we never call
+    // `menu.matches(":popover-open")`, which throws a SyntaxError in browsers
+    // that don't recognise the `:popover-open` pseudo-class (Firefox <125, Safari <17).
+    let isMenuOpen = false;
+    // Sync aria-expanded ourselves in case Invoker Commands haven't shipped yet.
+    // Initial focus lands inside the menu only when the keyboard opened it;
+    // pointer opens leave focus on the trigger so no unasked-for focus ring appears.
+    let toggleLastInput = 'pointer';
+    const onTogglePointerDown = () => {
+        toggleLastInput = 'pointer';
+    };
+    const onToggleKeyDown = (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ' || ev.key === 'Spacebar') {
+            toggleLastInput = 'keyboard';
+        }
+    };
+    toggle.addEventListener('pointerdown', onTogglePointerDown);
+    toggle.addEventListener('keydown', onToggleKeyDown);
+    disposers.push(() => {
+        toggle.removeEventListener('pointerdown', onTogglePointerDown);
+        toggle.removeEventListener('keydown', onToggleKeyDown);
+    });
+    // All focusables inside the drawer — drives the Tab focus trap so every
+    // control (links, buttons, form fields in the actions/search slots,
+    // explicit tabindex) is reachable via Tab.
+    const MENU_FOCUSABLE_SELECTOR = [
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(',');
+    const getMenuFocusables = () => Array.from(menu.querySelectorAll(MENU_FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('inert') && !el.closest('[inert]') && !el.hidden);
+    // Arrow/Home/End/initial-focus walk the primary nav links only — chrome
+    // (drawer brand, close button) and slot content (actions/search) stay
+    // reachable via Tab but shouldn't receive arrow navigation.
+    const getMenuNavItems = () => Array.from(menu.querySelectorAll('.ui-navbar-list .ui-navbar-link'));
+    const onMenuToggle = (e) => {
+        const ev = e;
+        const open = ev.newState === 'open';
+        isMenuOpen = open;
+        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+        toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+        if (open && toggleLastInput === 'keyboard') {
+            const items = getMenuNavItems();
+            if (items.length > 0)
+                items[0].focus();
+        }
+        // When the drawer closes via light-dismiss (backdrop click) or
+        // programmatic hidePopover(), focus falls to <body>. Restore it to the
+        // toggle so keyboard users aren't stranded at the top of the page.
+        // Skip if navigation already moved focus to a heading (activeElement
+        // won't be body in that case).
+        if (!open) {
+            toggleLastInput = 'pointer';
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body ||
+                    document.activeElement === document.documentElement) {
+                    toggle.focus({ preventScroll: true });
+                }
+            });
+        }
+    };
+    toggle.setAttribute('aria-expanded', 'false');
+    menu.addEventListener('toggle', onMenuToggle);
+    disposers.push(() => menu.removeEventListener('toggle', onMenuToggle));
+    // True only when the navbar is in mobile layout (hamburger mode). Driven by
+    // the ResizeObserver-based overflow detection below — `data-layout="mobile"`
+    // is set when nav items don't fit in a single row.
+    const isMobileLayout = () => nav.dataset.layout === 'mobile';
+    const onMenuKeyDown = (ev) => {
+        if (ev.key !== 'ArrowDown' &&
+            ev.key !== 'ArrowUp' &&
+            ev.key !== 'Home' &&
+            ev.key !== 'End' &&
+            ev.key !== 'Tab') {
+            return;
+        }
+        if (ev.key === 'Tab') {
+            // Mobile-only focus trap — cycle across every focusable in the drawer
+            // (including the in-drawer close button).
+            if (!isMobileLayout() || !isMenuOpen)
+                return;
+            const focusables = getMenuFocusables();
+            if (focusables.length === 0)
+                return;
+            const active = document.activeElement;
+            const idx = active ? focusables.indexOf(active) : -1;
+            if (ev.shiftKey && idx === 0) {
+                ev.preventDefault();
+                focusables[focusables.length - 1].focus();
+            }
+            else if (!ev.shiftKey && idx === focusables.length - 1) {
+                ev.preventDefault();
+                focusables[0].focus();
+            }
+            return;
+        }
+        // Arrow/Home/End operate on nav items only — close button is chrome.
+        const items = getMenuNavItems();
+        if (items.length === 0)
+            return;
+        const active = document.activeElement;
+        const idx = active ? items.indexOf(active) : -1;
+        let nextIdx = idx;
+        if (ev.key === 'ArrowDown')
+            nextIdx = idx < 0 ? 0 : (idx + 1) % items.length;
+        else if (ev.key === 'ArrowUp')
+            nextIdx =
+                idx < 0 ? items.length - 1 : (idx - 1 + items.length) % items.length;
+        else if (ev.key === 'Home')
+            nextIdx = 0;
+        else if (ev.key === 'End')
+            nextIdx = items.length - 1;
+        if (nextIdx !== idx) {
+            ev.preventDefault();
+            items[nextIdx].focus();
+        }
+    };
+    menu.addEventListener('keydown', onMenuKeyDown);
+    disposers.push(() => menu.removeEventListener('keydown', onMenuKeyDown));
+    // Satisfies WCAG 2.4.11 when the menu overflows. Mutates `scrollTop` directly
+    // rather than calling `scrollIntoView` so no ancestor can scroll by surprise.
+    const FOCUS_EDGE_MARGIN = 8;
+    const onMenuFocusIn = (ev) => {
+        const target = ev.target;
+        if (!target || target === menu || !menu.contains(target))
+            return;
+        if (menu.scrollHeight <= menu.clientHeight)
+            return;
+        const menuRect = menu.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const topDelta = targetRect.top - menuRect.top - FOCUS_EDGE_MARGIN;
+        const bottomDelta = targetRect.bottom - menuRect.bottom + FOCUS_EDGE_MARGIN;
+        if (topDelta < 0) {
+            menu.scrollTop += topDelta;
+        }
+        else if (bottomDelta > 0) {
+            menu.scrollTop += bottomDelta;
+        }
+    };
+    menu.addEventListener('focusin', onMenuFocusIn);
+    disposers.push(() => menu.removeEventListener('focusin', onMenuFocusIn));
+    // Popovers in the top layer aren't implicitly anchored to their invoker, and
+    // CSS Anchor Positioning is Chromium-only — so we pin the menu with JS on
+    // open and clear the inline styles on close (so desktop's container query
+    // can retake the layout).
+    const POPOVER_GAP = 8;
+    // Attribute walk first so the resolver is deterministic across runtimes;
+    // jsdom/happy-dom return "ltr" from getComputedStyle regardless of inheritance.
+    const resolveDirection = (el) => {
+        let cur = el;
+        while (cur) {
+            const dir = cur.getAttribute?.('dir');
+            if (dir === 'rtl')
+                return 'rtl';
+            if (dir === 'ltr')
+                return 'ltr';
+            cur = cur.parentElement;
+        }
+        if (typeof window !== 'undefined' && window.getComputedStyle) {
+            const computed = window.getComputedStyle(el).direction;
+            if (computed === 'rtl')
+                return 'rtl';
+        }
+        return 'ltr';
+    };
+    const positionMenu = () => {
+        if (isMobileLayout())
+            return;
+        const r = toggle.getBoundingClientRect();
+        const topPx = r.bottom + POPOVER_GAP;
+        menu.style.insetBlockStart = `${topPx}px`;
+        const isRtl = resolveDirection(nav) === 'rtl';
+        const viewportInlineEnd = isRtl ? r.left : window.innerWidth - r.right;
+        menu.style.insetInlineEnd = `${Math.max(0, viewportInlineEnd)}px`;
+        menu.style.insetInlineStart = 'auto';
+        menu.style.insetBlockEnd = 'auto';
+        menu.style.setProperty('--_menu-top', `${topPx}px`);
+    };
+    let heldScrollLock = false;
+    // Elements this instance has incremented an inert ref on. Instance-local so
+    // destroy only decrements what it acquired; the global ref map ensures other
+    // concurrent drawers keep the `inert` attribute while they still need it.
+    let inertedSiblings = [];
+    // Walk from nav up to <body>, inerting siblings at every ancestor level.
+    // This ensures <main> inside a wrapper like <div id="app"> is also inerted,
+    // not just direct body children.
+    const applyInertSiblings = () => {
+        if (inertedSiblings.length > 0 || typeof document === 'undefined')
+            return;
+        let cur = nav;
+        while (cur && cur !== document.body) {
+            const parentEl = cur.parentElement;
+            if (!parentEl)
+                break;
+            for (const child of Array.from(parentEl.children)) {
+                if (!(child instanceof HTMLElement))
+                    continue;
+                if (child === cur)
+                    continue;
+                // Skip elements that were inert before any drawer touched them — those
+                // belong to someone else (a modal, a permanently disabled panel, etc.).
+                if (child.hasAttribute('inert') && !inertRefs.has(child))
+                    continue;
+                acquireInert(child);
+                inertedSiblings.push(child);
+            }
+            cur = parentEl;
+        }
+    };
+    const releaseInertSiblings = () => {
+        for (const el of inertedSiblings)
+            releaseInert(el);
+        inertedSiblings = [];
+    };
+    // Clearing inline position before the close transition finishes snaps the
+    // still-visible popover to the viewport's top-left, so we defer the clear
+    // to the opacity transitionend (with a timeout fallback).
+    let pendingCloseCleanup = null;
+    const clearMenuPosition = () => {
+        menu.style.insetBlockStart = '';
+        menu.style.insetInlineEnd = '';
+        menu.style.insetInlineStart = '';
+        menu.style.insetBlockEnd = '';
+        menu.style.removeProperty('--_menu-top');
+    };
+    const cancelPendingClose = () => {
+        if (pendingCloseCleanup) {
+            pendingCloseCleanup();
+            pendingCloseCleanup = null;
+        }
+    };
+    const onBeforeToggle = (e) => {
+        const ev = e;
+        if (ev.newState === 'open') {
+            cancelPendingClose();
+            positionMenu();
+            // Only lock scroll when the layout is mobile (hamburger mode); desktop
+            // renders the menu inline so no overlay or scroll lock is needed.
+            if (isMobileLayout() && !heldScrollLock) {
+                acquireScrollLock();
+                heldScrollLock = true;
+                applyInertSiblings();
+            }
+        }
+        else {
+            // Defer scroll-lock and inert release until the close transition
+            // finishes — releasing immediately would re-enable background scroll
+            // and focus while the drawer is still visually present.
+            const finalizeClose = () => {
+                if (heldScrollLock) {
+                    releaseScrollLock();
+                    heldScrollLock = false;
+                }
+                releaseInertSiblings();
+                clearMenuPosition();
+            };
+            const prefersReducedMotion = typeof window !== 'undefined' &&
+                window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+            if (prefersReducedMotion) {
+                finalizeClose();
+            }
+            else {
+                const onEnd = (te) => {
+                    if (te.target !== menu)
+                        return;
+                    if (te.propertyName !== 'opacity')
+                        return;
+                    cleanup();
+                };
+                const timeoutId = window.setTimeout(() => cleanup(), CLOSE_TRANSITION_TIMEOUT);
+                const cleanup = () => {
+                    menu.removeEventListener('transitionend', onEnd);
+                    window.clearTimeout(timeoutId);
+                    pendingCloseCleanup = null;
+                    finalizeClose();
+                };
+                pendingCloseCleanup = cleanup;
+                menu.addEventListener('transitionend', onEnd);
+            }
+        }
+    };
+    disposers.push(() => {
+        if (heldScrollLock) {
+            releaseScrollLock();
+            heldScrollLock = false;
+        }
+        releaseInertSiblings();
+        cancelPendingClose();
+    });
+    menu.addEventListener('beforetoggle', onBeforeToggle);
+    disposers.push(() => menu.removeEventListener('beforetoggle', onBeforeToggle));
+    if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', onWindowScroll, { passive: true });
+        window.addEventListener('resize', onWindowScroll, { passive: true });
+        // Catch hydration mid-page (user already scrolled).
+        applyScrollFrame();
+        disposers.push(() => {
+            window.removeEventListener('scroll', onWindowScroll);
+            window.removeEventListener('resize', onWindowScroll);
+            if (scrollRafId !== 0)
+                cancelAnimationFrame(scrollRafId);
+        });
+    }
+    // Content-aware responsive layout — switch to hamburger only when items
+    // don't fit in a single row. ResizeObserver fires before paint so there's
+    // no visible flash on initial render.
+    let layoutDestroyed = false;
+    /** Temporarily set overflow:hidden for accurate list width measurement,
+     *  then restore the previous inline value. This avoids persistent clipping
+     *  of focus rings and keeps measurement side-effect free. */
+    const measureListWidths = () => {
+        const prev = list.style.overflow;
+        list.style.overflow = 'hidden';
+        const scrollWidth = list.scrollWidth;
+        const clientWidth = list.clientWidth;
+        list.style.overflow = prev;
+        return { scrollWidth, clientWidth };
+    };
+    // Track the nav width at the moment we switched to mobile.  Only attempt
+    // switching back to desktop when the nav has actually grown — this prevents
+    // oscillation where toggling data-layout changes the list dimensions, which
+    // re-triggers the ResizeObserver, which toggles again, ad infinitum.
+    let mobileAtNavWidth = 0;
+    const goMobile = () => {
+        mobileAtNavWidth = nav.clientWidth;
+        nav.dataset.layout = 'mobile';
+    };
+    // Layout flips reuse the popover's display/overlay transitions — without
+    // suppression, desktop→mobile plays the hide animation and flashes items.
+    let transitionUnlockId = 0;
+    const runWithoutTransitions = (fn) => {
+        nav.dataset.layoutTransitioning = 'true';
+        fn();
+        if (typeof requestAnimationFrame === 'undefined') {
+            delete nav.dataset.layoutTransitioning;
+            return;
+        }
+        if (transitionUnlockId !== 0)
+            cancelAnimationFrame(transitionUnlockId);
+        transitionUnlockId = requestAnimationFrame(() => {
+            transitionUnlockId = requestAnimationFrame(() => {
+                transitionUnlockId = 0;
+                delete nav.dataset.layoutTransitioning;
+            });
+        });
+    };
+    const checkLayout = () => {
+        if (layoutDestroyed)
+            return;
+        if (nav.dataset.layout !== 'mobile') {
+            // Desktop: measure the list directly for overflow
+            const { scrollWidth, clientWidth } = measureListWidths();
+            if (scrollWidth > clientWidth + 1)
+                runWithoutTransitions(goMobile); // +1 subpixel guard
+        }
+        else {
+            // Body scroll-lock (set synchronously in beforetoggle) removes the
+            // scrollbar, which widens nav.clientWidth past mobileAtNavWidth.
+            // Check the module-level ref count so another Navbar's open drawer
+            // also pauses this instance's probe.
+            if (scrollLockRefs > 0)
+                return;
+            // Mobile: only attempt desktop when the nav has grown wider than
+            // when we last switched.  This gates out the self-triggered callbacks
+            // from the layout toggle below.
+            if (nav.clientWidth <= mobileAtNavWidth)
+                return;
+            runWithoutTransitions(() => {
+                // Temporarily flip to desktop to get real measurements, then decide.
+                delete nav.dataset.layout;
+                const { scrollWidth, clientWidth } = measureListWidths();
+                if (scrollWidth > clientWidth + 1) {
+                    // Items still overflow — revert and update the cached nav width
+                    // so we don't try again until the viewport grows further.
+                    goMobile();
+                }
+                else if (isMenuOpen) {
+                    // Genuinely wider viewport — close the popover so stale
+                    // scroll-lock / inert doesn't linger on the desktop layout.
+                    try {
+                        menu.hidePopover();
+                    }
+                    catch {
+                        /* already closed */
+                    }
+                }
+            });
+        }
+    };
+    if (typeof ResizeObserver !== 'undefined') {
+        const layoutObserver = new ResizeObserver(checkLayout);
+        layoutObserver.observe(nav);
+        // Also observe the list — internal content changes (slot content, label
+        // text) can change scrollWidth without resizing the nav container itself.
+        layoutObserver.observe(list);
+        disposers.push(() => {
+            layoutDestroyed = true;
+            layoutObserver.disconnect();
+        });
+    }
+    else if (typeof window !== 'undefined') {
+        // Fallback for environments without ResizeObserver — listen for window
+        // resize events so items don't overflow/clip on small screens.
+        checkLayout();
+        const onResize = () => {
+            if (!layoutDestroyed)
+                checkLayout();
+        };
+        window.addEventListener('resize', onResize);
+        disposers.push(() => {
+            layoutDestroyed = true;
+            window.removeEventListener('resize', onResize);
+        });
+    }
+    // Always push a disposer for the destroyed flag so fonts.ready (and any
+    // future async paths) are gated even when neither branch above ran.
+    disposers.push(() => {
+        layoutDestroyed = true;
+    });
+    // Re-check after fonts finish loading — web fonts can change text metrics
+    // and cause scrollWidth to differ without triggering a resize on nav.
+    if (typeof document !== 'undefined' && document.fonts?.ready) {
+        document.fonts.ready.then(() => {
+            if (!layoutDestroyed)
+                checkLayout();
+        });
+    }
+    // No-router fallback: if no router is mounted, back/forward still fires
+    // popstate and we re-sync active-state. Safe if the router binds later via
+    // bindExistingRouterLinks — both paths agree on prefix-match semantics.
+    if (resolveRouter() === null &&
+        typeof window !== 'undefined' &&
+        anchorHandles.length > 0) {
+        const onPopState = () => {
+            const path = window.location.pathname || '/';
+            for (const { anchor, item } of anchorHandles) {
+                const active = isItemActive(path, item.href, item.exactActive === true);
+                anchor.classList.toggle('router-link-active', active);
+                if (active) {
+                    anchor.setAttribute('aria-current', 'page');
+                    anchor.dataset.current = 'page';
+                }
+                else {
+                    anchor.removeAttribute('aria-current');
+                    delete anchor.dataset.current;
+                }
+            }
+        };
+        window.addEventListener('popstate', onPopState);
+        disposers.push(() => window.removeEventListener('popstate', onPopState));
+    }
+    return {
+        el: nav,
+        destroy: () => {
+            for (const dispose of disposers) {
+                try {
+                    dispose();
+                }
+                catch (err) {
+                    if (import.meta.env?.DEV) {
+                        console.error('[<Navbar>] disposer threw:', err);
+                    }
+                }
+            }
+            nav.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=Navbar.js.map