bits-ui 1.0.0-next.90 → 1.0.0-next.92

package/dist/bits/navigation-menu/navigation-menu.svelte.js

@@ -1,20 +1,24 @@
+/**
+ * Based on Radix UI's Navigation Menu
+ * https://www.radix-ui.com/docs/primitives/components/navigation-menu
+ */
+import { afterSleep, afterTick, box, useRefById, } from "svelte-toolbelt";
+import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
-import { afterTick, box, useRefById } from "svelte-toolbelt";
-import { Context, Previous } from "runed";
+import { SvelteMap } from "svelte/reactivity";
+import { useId } from "../../shared/index.js";
+import { getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
+import { noop } from "../../internal/noop.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
-import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
-import { useId } from "../../internal/use-id.js";
 import { kbd } from "../../internal/kbd.js";
+import { CustomEventDispatcher } from "../../internal/events.js";
+import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { useArrowNavigation } from "../../internal/use-arrow-navigation.js";
 import { boxAutoReset } from "../../internal/box-auto-reset.svelte.js";
-import { noop } from "../../internal/noop.js";
-import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
-const NavigationMenuRootContext = new Context("NavigationMenu.Root");
-const NavigationMenuMenuContext = new Context("NavigationMenu.Root | NavigationMenu.Sub");
-const NavigationMenuListContext = new Context("NavigationMenu.List");
-const NavigationMenuItemContext = new Context("NavigationMenu.Item");
-const NavigationMenuContentContext = new Context("NavigationMenu.Content");
+import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
+import { isElement } from "../../internal/is.js";
 const NAVIGATION_MENU_ROOT_ATTR = "data-navigation-menu-root";
+const NAVIGATION_MENU_ATTR = "data-navigation-menu";
 const NAVIGATION_MENU_SUB_ATTR = "data-navigation-menu-sub";
 const NAVIGATION_MENU_ITEM_ATTR = "data-navigation-menu-item";
 const NAVIGATION_MENU_INDICATOR_ATTR = "data-navigation-menu-indicator";
@@ -22,517 +26,407 @@ const NAVIGATION_MENU_LIST_ATTR = "data-navigation-menu-list";
 const NAVIGATION_MENU_TRIGGER_ATTR = "data-navigation-menu-trigger";
 const NAVIGATION_MENU_CONTENT_ATTR = "data-navigation-menu-content";
 const NAVIGATION_MENU_LINK_ATTR = "data-navigation-menu-link";
-class NavigationMenuRootState {
-    id;
-    rootRef;
-    delayDuration;
-    skipDelayDuration;
-    orientation;
-    dir;
-    value;
-    previousValue = new Previous(() => this.value.current);
-    openTimer = 0;
-    closeTimer = 0;
-    skipDelayTimer = 0;
-    isOpenDelayed = $state(false);
-    #setValue(v) {
-        this.value.current = v;
-    }
-    constructor(props) {
-        this.id = props.id;
-        this.delayDuration = props.delayDuration;
-        this.skipDelayDuration = props.skipDelayDuration;
-        this.orientation = props.orientation;
-        this.dir = props.dir;
-        this.value = props.value;
-        this.rootRef = props.ref;
-        this.onTriggerEnter = this.onTriggerEnter.bind(this);
-        this.onTriggerLeave = this.onTriggerLeave.bind(this);
-        this.onContentEnter = this.onContentEnter.bind(this);
-        this.onContentLeave = this.onContentLeave.bind(this);
-        this.onItemSelect = this.onItemSelect.bind(this);
-        this.onItemDismiss = this.onItemDismiss.bind(this);
-        useRefById({
-            id: this.id,
-            ref: this.rootRef,
-        });
-        $effect(() => {
-            this.value.current;
-            untrack(() => {
-                const curr = this.value.current;
-                const isOpen = curr !== "";
-                const hasSkipDelayDuration = this.skipDelayDuration.current > 0;
-                if (isOpen) {
-                    window.clearTimeout(this.skipDelayTimer);
-                    if (hasSkipDelayDuration)
-                        this.isOpenDelayed = false;
-                }
-                else {
-                    window.clearTimeout(this.skipDelayTimer);
-                    this.skipDelayTimer = window.setTimeout(() => (this.isOpenDelayed = true), this.skipDelayDuration.current);
-                }
-            });
-        });
-        $effect(() => {
-            return () => {
-                window.clearTimeout(this.openTimer);
-                window.clearTimeout(this.closeTimer);
-                window.clearTimeout(this.skipDelayTimer);
-            };
-        });
-    }
-    #startCloseTimer() {
-        window.clearTimeout(this.closeTimer);
-        this.closeTimer = window.setTimeout(() => this.#setValue(""), 150);
-    }
-    #handleOpen(itemValue) {
-        window.clearTimeout(this.closeTimer);
-        this.#setValue(itemValue);
-    }
-    handleClose() {
-        this.onItemDismiss();
-        this.onContentLeave();
+class NavigationMenuProviderState {
+    opts;
+    indicatorTrackRef = box(null);
+    viewportRef = box(null);
+    viewportContent = new SvelteMap();
+    onTriggerEnter;
+    onTriggerLeave = noop;
+    onContentEnter = noop;
+    onContentLeave = noop;
+    onItemSelect;
+    onItemDismiss;
+    constructor(opts) {
+        this.opts = opts;
+        this.onTriggerEnter = opts.onTriggerEnter;
+        this.onTriggerLeave = opts.onTriggerLeave ?? noop;
+        this.onContentEnter = opts.onContentEnter ?? noop;
+        this.onContentLeave = opts.onContentLeave ?? noop;
+        this.onItemDismiss = opts.onItemDismiss;
+        this.onItemSelect = opts.onItemSelect;
     }
-    #handleDelayedOpen(itemValue) {
-        const isOpenItem = this.value.current === itemValue;
-        if (isOpenItem) {
-            // If the item is already open (e.g. we're transitioning from the content to the trigger)
-            // then we want to clear the close timer immediately.
-            window.clearTimeout(this.closeTimer);
+}
+class NavigationMenuRootState {
+    opts;
+    provider;
+    previousValue = box("");
+    isDelaySkipped;
+    #derivedDelay = $derived.by(() => {
+        const isOpen = this.opts?.value?.current !== "";
+        if (isOpen || this.isDelaySkipped.current) {
+            // 150 for user to switch trigger or move into content view
+            return 100;
         }
         else {
-            this.openTimer = window.setTimeout(() => {
-                window.clearTimeout(this.closeTimer);
-                this.#setValue(itemValue);
-            }, this.delayDuration.current);
+            return this.opts.delayDuration.current;
         }
+    });
+    constructor(opts) {
+        this.opts = opts;
+        this.isDelaySkipped = boxAutoReset(false, this.opts.skipDelayDuration.current);
+        useRefById(opts);
+        this.provider = useNavigationMenuProvider({
+            value: this.opts.value,
+            previousValue: this.previousValue,
+            dir: this.opts.dir,
+            orientation: this.opts.orientation,
+            rootNavigationMenuRef: this.opts.ref,
+            isRootMenu: true,
+            onTriggerEnter: (itemValue) => {
+                this.#onTriggerEnter(itemValue);
+            },
+            onTriggerLeave: this.#onTriggerLeave,
+            onContentEnter: this.#onContentEnter,
+            onContentLeave: this.#onContentLeave,
+            onItemSelect: this.#onItemSelect,
+            onItemDismiss: this.#onItemDismiss,
+        });
     }
-    onTriggerEnter(itemValue) {
-        window.clearTimeout(this.openTimer);
-        if (this.isOpenDelayed) {
-            this.#handleDelayedOpen(itemValue);
-        }
-        else {
-            this.#handleOpen(itemValue);
+    #debouncedFn = useDebounce((val) => {
+        // passing `undefined` meant to reset the debounce timer
+        if (typeof val === "string") {
+            this.setValue(val);
         }
-    }
-    onTriggerLeave() {
-        window.clearTimeout(this.openTimer);
-        this.#startCloseTimer();
-    }
-    onContentEnter() {
-        window.clearTimeout(this.closeTimer);
-    }
-    onContentLeave() {
-        this.#startCloseTimer();
-    }
-    onItemSelect(itemValue) {
-        const prevValue = this.value.current;
-        this.#setValue(prevValue === itemValue ? "" : itemValue);
-    }
-    onItemDismiss() {
-        this.#setValue("");
-    }
+    }, () => this.#derivedDelay);
+    #onTriggerEnter = (itemValue) => {
+        this.#debouncedFn(itemValue);
+    };
+    #onTriggerLeave = () => {
+        this.isDelaySkipped.current = false;
+        this.#debouncedFn("");
+    };
+    #onContentEnter = () => {
+        this.#debouncedFn();
+    };
+    #onContentLeave = () => {
+        this.#debouncedFn("");
+    };
+    #onItemSelect = (itemValue) => {
+        this.setValue(itemValue);
+    };
+    #onItemDismiss = () => {
+        this.setValue("");
+    };
+    setValue = (newValue) => {
+        this.previousValue.current = this.opts.value.current;
+        this.opts.value.current = newValue;
+    };
     props = $derived.by(() => ({
-        id: this.id.current,
-        "aria-label": "Main",
-        "data-orientation": getDataOrientation(this.orientation.current),
-        dir: this.dir.current,
+        id: this.opts.id.current,
+        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        dir: this.opts.dir.current,
         [NAVIGATION_MENU_ROOT_ATTR]: "",
+        [NAVIGATION_MENU_ATTR]: "",
     }));
 }
-class NavigationMenuMenuState {
-    isRoot = $state(false);
-    rootNavigationId;
-    dir;
-    orientation;
-    value;
-    previousValue;
-    onTriggerEnter;
-    onTriggerLeave;
-    onContentEnter;
-    onContentLeave;
-    onItemSelect;
-    onItemDismiss;
-    viewportNode = $state(null);
-    indicatorTrackNode = $state(null);
-    viewportContentId = box.with(() => undefined);
-    root;
-    triggerRefs = new Set();
-    constructor(props, root) {
-        this.isRoot = props.isRoot;
-        this.rootNavigationId = props.rootNavigationId;
-        this.dir = props.dir;
-        this.orientation = props.orientation;
-        this.value = props.value;
-        this.onTriggerEnter = props.onTriggerEnter;
-        this.onTriggerLeave = props.onTriggerLeave;
-        this.onContentEnter = props.onContentEnter;
-        this.onContentLeave = props.onContentLeave;
-        this.onItemSelect = props.onItemSelect;
-        this.onItemDismiss = props.onItemDismiss;
-        this.root = root;
-        this.previousValue = props.previousValue;
-    }
-    registerTrigger(ref) {
-        this.triggerRefs.add(ref);
-    }
-    deRegisterTrigger(ref) {
-        this.triggerRefs.delete(ref);
-    }
-    getTriggerNodes() {
-        return Array.from(this.triggerRefs)
-            .map((ref) => ref.current)
-            .filter((node) => Boolean(node));
-    }
-}
 class NavigationMenuSubState {
-    id;
-    isRoot = false;
-    rootNavigationId;
-    dir;
-    orientation;
-    value;
-    previousValue = new Previous(() => this.value.current);
-    onTriggerLeave;
-    onContentEnter;
-    onContentLeave;
-    viewportNode = $state(null);
-    indicatorTrackNode = $state(null);
-    viewportContentId = box.with(() => undefined);
-    root;
-    triggerRefs = new Set();
-    ref;
-    constructor(props, root) {
-        this.id = props.id;
-        this.rootNavigationId = root.id;
-        this.dir = root.dir;
-        this.orientation = props.orientation;
-        this.value = props.value;
-        this.root = root;
-        this.ref = props.ref;
-        useRefById({
-            id: this.id,
-            ref: this.ref,
+    opts;
+    context;
+    previousValue = box("");
+    constructor(opts, context) {
+        this.opts = opts;
+        this.context = context;
+        useRefById(opts);
+        useNavigationMenuProvider({
+            isRootMenu: false,
+            value: this.opts.value,
+            dir: this.context.opts.dir,
+            orientation: this.opts.orientation,
+            rootNavigationMenuRef: this.opts.ref,
+            onTriggerEnter: this.setValue,
+            onItemSelect: this.setValue,
+            onItemDismiss: () => this.setValue(""),
+            previousValue: this.previousValue,
         });
     }
-    onTriggerEnter(itemValue) {
-        this.value.current = itemValue;
-    }
-    onItemSelect(itemValue) {
-        this.value.current = itemValue;
-    }
-    registerTrigger(ref) {
-        this.triggerRefs.add(ref);
-    }
-    deRegisterTrigger(ref) {
-        this.triggerRefs.delete(ref);
-    }
-    getTriggerNodes() {
-        return Array.from(this.triggerRefs)
-            .map((ref) => ref.current)
-            .filter((node) => Boolean(node));
-    }
+    setValue = (newValue) => {
+        this.opts.value.current = newValue;
+    };
     props = $derived.by(() => ({
-        id: this.id.current,
-        "data-orientation": getDataOrientation(this.orientation.current),
+        id: this.opts.id.current,
+        "data-orientation": getDataOrientation(this.opts.orientation.current),
         [NAVIGATION_MENU_SUB_ATTR]: "",
+        [NAVIGATION_MENU_ATTR]: "",
     }));
 }
 class NavigationMenuListState {
-    menu;
-    #id;
-    #ref;
-    indicatorTrackRef;
-    indicatorTrackId = box(useId());
+    opts;
+    context;
+    wrapperId = box(useId());
+    wrapperRef = box(null);
+    listTriggers = $state.raw([]);
     rovingFocusGroup;
-    constructor(props, menu) {
-        this.menu = menu;
-        this.#id = props.id;
-        this.#ref = props.ref;
-        this.indicatorTrackRef = props.indicatorTrackRef;
-        this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.#id,
-            candidateAttr: NAVIGATION_MENU_TRIGGER_ATTR,
-            candidateSelector: `:is([${NAVIGATION_MENU_TRIGGER_ATTR}], [data-list-link]):not([data-disabled])`,
-            loop: box.with(() => false),
-            orientation: this.menu.orientation,
-        });
+    wrapperMounted = $state(false);
+    constructor(opts, context) {
+        this.opts = opts;
+        this.context = context;
+        useRefById(opts);
         useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-        useRefById({
-            id: this.indicatorTrackId,
-            ref: this.indicatorTrackRef,
+            id: this.wrapperId,
+            ref: this.wrapperRef,
             onRefChange: (node) => {
-                this.menu.indicatorTrackNode = node;
+                this.context.indicatorTrackRef.current = node;
             },
-            deps: () => Boolean(this.menu.root.value.current),
+            deps: () => this.wrapperMounted,
+        });
+        this.rovingFocusGroup = useRovingFocus({
+            rootNodeId: opts.id,
+            candidateAttr: NAVIGATION_MENU_ITEM_ATTR,
+            candidateSelector: `:is([${NAVIGATION_MENU_TRIGGER_ATTR}], [data-list-link]):not([data-disabled])`,
+            loop: box.with(() => false),
+            orientation: this.context.opts.orientation,
         });
     }
-    indicatorTrackProps = $derived.by(() => ({
-        id: this.indicatorTrackId.current,
-        style: {
-            position: "relative",
-        },
+    registerTrigger(trigger) {
+        if (trigger)
+            this.listTriggers.push(trigger);
+        return () => {
+            this.listTriggers = this.listTriggers.filter((t) => t.id !== trigger.id);
+        };
+    }
+    wrapperProps = $derived.by(() => ({
+        id: this.wrapperId.current,
     }));
     props = $derived.by(() => ({
-        id: this.#id.current,
-        "data-orientation": getDataOrientation(this.menu.orientation.current),
+        id: this.opts.id.current,
+        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         [NAVIGATION_MENU_LIST_ATTR]: "",
     }));
 }
-class NavigationMenuItemState {
-    id;
-    #ref;
-    value;
+export class NavigationMenuItemState {
+    opts;
+    listContext;
     contentNode = $state(null);
     triggerNode = $state(null);
-    focusProxyRef = box(null);
     focusProxyNode = $state(null);
-    focusProxyId = box(useId());
     restoreContentTabOrder = noop;
-    wasEscapeClose = $state(false);
-    menu;
-    list;
-    constructor(props, list, menu) {
-        this.id = props.id;
-        this.#ref = props.ref;
-        this.value = props.value;
-        this.menu = menu;
-        this.list = list;
-        this.handleContentEntry = this.handleContentEntry.bind(this);
-        this.handleContentExit = this.handleContentExit.bind(this);
-        useRefById({
-            id: this.id,
-            ref: this.#ref,
-        });
-    }
-    handleContentEntry(side = "start") {
+    wasEscapeClose = false;
+    contentId = $derived.by(() => this.contentNode?.id);
+    triggerId = $derived.by(() => this.triggerNode?.id);
+    contentChildren = box(undefined);
+    contentChild = box(undefined);
+    contentProps = box({});
+    constructor(opts, listContext) {
+        this.opts = opts;
+        this.listContext = listContext;
+    }
+    #handleContentEntry = (side = "start") => {
         if (!this.contentNode)
             return;
         this.restoreContentTabOrder();
         const candidates = getTabbableCandidates(this.contentNode);
-        if (candidates.length) {
-            if (side === "start") {
-                candidates[0]?.focus();
-            }
-            else {
-                candidates[candidates.length - 1]?.focus();
-            }
-        }
-    }
-    handleContentExit() {
+        if (candidates.length)
+            focusFirst(side === "start" ? candidates : candidates.reverse());
+    };
+    #handleContentExit = () => {
         if (!this.contentNode)
             return;
         const candidates = getTabbableCandidates(this.contentNode);
-        if (candidates.length) {
+        if (candidates.length)
             this.restoreContentTabOrder = removeFromTabOrder(candidates);
-        }
-    }
-    onEntryKeydown = this.handleContentEntry;
-    onFocusProxyEnter = this.handleContentEntry;
-    onContentFocusOutside = this.handleContentExit;
-    onRootContentClose = this.handleContentExit;
+    };
+    onEntryKeydown = this.#handleContentEntry;
+    onFocusProxyEnter = this.#handleContentEntry;
+    onRootContentClose = this.#handleContentExit;
+    onContentFocusOutside = this.#handleContentExit;
     props = $derived.by(() => ({
-        id: this.id.current,
+        id: this.opts.id.current,
         [NAVIGATION_MENU_ITEM_ATTR]: "",
     }));
 }
 class NavigationMenuTriggerState {
-    #id;
-    #ref;
+    opts;
+    focusProxyId = box(useId());
+    focusProxyRef = box(null);
+    context;
+    itemContext;
+    listContext;
+    hasPointerMoveOpened = box(false);
+    wasClickClose = false;
+    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
     focusProxyMounted = $state(false);
-    menu;
-    item;
-    disabled;
-    hasPointerMoveOpened = boxAutoReset(false, 150);
-    wasClickClose = $state(false);
-    open = $derived.by(() => this.item.value.current === this.menu.value.current);
-    constructor(props, item) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        this.item = item;
-        this.menu = item.menu;
-        this.disabled = props.disabled;
+    constructor(opts, context) {
+        this.opts = opts;
+        this.hasPointerMoveOpened = boxAutoReset(false, 300);
+        this.context = context.provider;
+        this.itemContext = context.item;
+        this.listContext = context.list;
         useRefById({
-            id: this.#id,
-            ref: this.#ref,
+            ...opts,
             onRefChange: (node) => {
-                this.item.triggerNode = node;
+                this.itemContext.triggerNode = node;
             },
         });
         useRefById({
-            id: this.item.focusProxyId,
-            ref: this.item.focusProxyRef,
+            id: this.focusProxyId,
+            ref: this.focusProxyRef,
             onRefChange: (node) => {
-                this.item.focusProxyNode = node;
+                this.itemContext.focusProxyNode = node;
             },
             deps: () => this.focusProxyMounted,
         });
-        $effect(() => {
-            this.menu.registerTrigger(this.#ref);
-            return () => {
-                this.menu.deRegisterTrigger(this.#ref);
-            };
+        watch(() => this.opts.ref.current, () => {
+            const node = this.opts.ref.current;
+            if (!node)
+                return;
+            return this.listContext.registerTrigger(node);
         });
-        this.onpointerenter = this.onpointerenter.bind(this);
-        this.onpointermove = this.onpointermove.bind(this);
-        this.onpointerleave = this.onpointerleave.bind(this);
-        this.onclick = this.onclick.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
     }
-    onpointerenter(_) {
+    onpointerenter = (_) => {
         this.wasClickClose = false;
-        this.item.wasEscapeClose = false;
-    }
-    onpointermove(e) {
-        if (e.pointerType !== "mouse")
-            return;
-        if (this.disabled.current ||
+        this.itemContext.wasEscapeClose = false;
+    };
+    onpointermove = whenMouse(() => {
+        if (this.opts.disabled.current ||
             this.wasClickClose ||
-            this.item.wasEscapeClose ||
-            this.hasPointerMoveOpened.current)
+            this.itemContext.wasEscapeClose ||
+            this.hasPointerMoveOpened.current) {
             return;
-        this.menu.onTriggerEnter(this.item.value.current);
+        }
+        this.context.onTriggerEnter(this.itemContext.opts.value.current);
         this.hasPointerMoveOpened.current = true;
-    }
-    onpointerleave(e) {
-        if (e.pointerType !== "mouse" || this.disabled.current)
+    });
+    onpointerleave = whenMouse(() => {
+        if (this.opts.disabled.current)
             return;
-        this.menu.onTriggerLeave?.();
+        this.context.onTriggerLeave();
         this.hasPointerMoveOpened.current = false;
-    }
-    onclick(_) {
-        // if opened via pointer move, we prevent clicked event
+    });
+    onclick = (_) => {
+        // if opened via pointer move, we prevent the click event
         if (this.hasPointerMoveOpened.current)
             return;
         if (this.open) {
-            this.menu.onItemSelect("");
+            this.context.onItemSelect("");
         }
         else {
-            this.menu.onItemSelect(this.item.value.current);
+            this.context.onItemSelect(this.itemContext.opts.value.current);
         }
         this.wasClickClose = this.open;
-    }
-    onkeydown(e) {
-        const verticalEntryKey = this.menu.dir.current === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;
-        const entryKey = {
-            horizontal: kbd.ARROW_DOWN,
-            vertical: verticalEntryKey,
-        }[this.menu.orientation.current];
+    };
+    onkeydown = (e) => {
+        const verticalEntryKey = this.context.opts.dir.current === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;
+        const entryKey = { horizontal: kbd.ARROW_DOWN, vertical: verticalEntryKey }[this.context.opts.orientation.current];
         if (this.open && e.key === entryKey) {
-            this.item.onEntryKeydown();
+            this.itemContext.onEntryKeydown();
+            // prevent focus group from handling the event
             e.preventDefault();
             return;
         }
-        this.item.list.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    }
+        this.itemContext.listContext.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    };
+    focusProxyOnFocus = (e) => {
+        const content = this.itemContext.contentNode;
+        const prevFocusedElement = e.relatedTarget;
+        const wasTriggerFocused = this.opts.ref.current && prevFocusedElement === this.opts.ref.current;
+        const wasFocusFromContent = content?.contains(prevFocusedElement);
+        if (wasTriggerFocused || !wasFocusFromContent) {
+            this.itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
+        }
+    };
     props = $derived.by(() => ({
-        id: this.#id.current,
-        disabled: getDisabled(this.disabled.current),
-        "data-disabled": getDataDisabled(this.disabled.current),
+        id: this.opts.id.current,
+        disabled: this.opts.disabled.current,
+        "data-disabled": getDataDisabled(Boolean(this.opts.disabled.current)),
         "data-state": getDataOpenClosed(this.open),
+        "data-value": this.itemContext.opts.value.current,
         "aria-expanded": getAriaExpanded(this.open),
-        "aria-controls": this.item.contentNode ? this.item.contentNode.id : undefined,
-        "data-value": this.item.value.current,
-        onpointerenter: this.onpointerenter,
+        "aria-controls": this.itemContext.contentId,
+        [NAVIGATION_MENU_TRIGGER_ATTR]: "",
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
+        onpointerenter: this.onpointerenter,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        [NAVIGATION_MENU_TRIGGER_ATTR]: "",
     }));
-    visuallyHiddenProps = $derived.by(() => ({
-        id: this.item.focusProxyId.current,
-        "aria-hidden": "true",
-        tabIndex: 0,
-        onfocus: (e) => {
-            const prevFocusedElement = e.relatedTarget;
-            const wasTriggerFocused = prevFocusedElement === this.item.triggerNode;
-            const wasFocusFromContent = this.item.contentNode?.contains(prevFocusedElement);
-            if (wasTriggerFocused || !wasFocusFromContent) {
-                e.preventDefault();
-                this.item.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
-            }
-        },
+    focusProxyProps = $derived.by(() => ({
+        id: this.focusProxyId.current,
+        tabindex: 0,
+        onfocus: this.focusProxyOnFocus,
+    }));
+    restructureSpanProps = $derived.by(() => ({
+        "aria-owns": this.itemContext.contentId,
     }));
 }
+const LINK_SELECT_EVENT = new CustomEventDispatcher("bitsLinkSelect", {
+    bubbles: true,
+    cancelable: true,
+});
+const ROOT_CONTENT_DISMISS_EVENT = new CustomEventDispatcher("bitsRootContentDismiss", {
+    cancelable: true,
+    bubbles: true,
+});
 class NavigationMenuLinkState {
-    #id;
-    #ref;
-    active;
-    onSelect;
-    content;
-    item;
-    constructor(props, item, content) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        this.active = props.active;
-        this.onSelect = props.onSelect;
-        this.content = content;
-        this.item = item;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-        this.onclick = this.onclick.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
-    }
-    onclick(e) {
-        const linkSelectEvent = new CustomEvent("navigationMenu.linkSelect", {
-            bubbles: true,
-            cancelable: true,
-        });
-        this.onSelect.current(linkSelectEvent);
+    opts;
+    context;
+    isFocused = $state(false);
+    constructor(opts, context) {
+        this.opts = opts;
+        this.context = context;
+        useRefById(opts);
+    }
+    onclick = (e) => {
+        const currTarget = e.currentTarget;
+        LINK_SELECT_EVENT.listen(currTarget, (e) => this.opts.onSelect.current(e), { once: true });
+        const linkSelectEvent = LINK_SELECT_EVENT.dispatch(currTarget);
         if (!linkSelectEvent.defaultPrevented && !e.metaKey) {
-            //
+            ROOT_CONTENT_DISMISS_EVENT.dispatch(currTarget);
         }
-    }
-    onkeydown(e) {
-        this.item.list.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    }
+    };
+    onkeydown = (e) => {
+        if (this.context.item.contentNode)
+            return;
+        this.context.item.listContext.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    };
+    onfocus = (_) => {
+        this.isFocused = true;
+    };
+    onblur = (_) => {
+        this.isFocused = false;
+    };
     props = $derived.by(() => ({
-        id: this.#id.current,
-        "data-active": this.active.current ? "" : undefined,
-        "aria-current": this.active.current ? "page" : undefined,
-        "data-list-link": this.content ? undefined : "",
+        id: this.opts.id.current,
+        "data-active": this.opts.active.current ? "" : undefined,
+        "aria-current": this.opts.active.current ? "page" : undefined,
+        "data-focused": this.isFocused ? "" : undefined,
         onclick: this.onclick,
-        onfocus: (_) => { },
-        onkeydown: this.content ? undefined : this.onkeydown,
+        onkeydown: this.onkeydown,
+        onfocus: this.onfocus,
+        onblur: this.onblur,
+        [NAVIGATION_MENU_LINK_ATTR]: "",
     }));
 }
 class NavigationMenuIndicatorState {
-    id;
-    menu;
-    activeTrigger = $state(null);
-    position = $state(null);
-    isHorizontal = $derived.by(() => this.menu.orientation.current === "horizontal");
-    isVisible = $derived.by(() => Boolean(this.menu.value.current));
-    indicatorRef;
-    constructor(props, menu) {
-        this.id = props.id;
-        this.indicatorRef = props.ref;
-        this.menu = menu;
+    context;
+    isVisible = $derived.by(() => Boolean(this.context.opts.value.current));
+    constructor(context) {
+        this.context = context;
+    }
+}
+class NavigationMenuIndicatorImplState {
+    opts;
+    context;
+    listContext;
+    position = $state.raw(null);
+    isHorizontal = $derived.by(() => this.context.opts.orientation.current === "horizontal");
+    isVisible = $derived.by(() => !!this.context.opts.value.current);
+    activeTrigger = $derived.by(() => {
+        const items = this.listContext.listTriggers;
+        const triggerNode = items.find((item) => item.getAttribute("data-value") === this.context.opts.value.current);
+        return triggerNode ?? null;
+    });
+    shouldRender = $derived.by(() => this.position !== null);
+    constructor(opts, context) {
+        this.opts = opts;
+        this.context = context.provider;
+        this.listContext = context.list;
+        useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
+        useResizeObserver(() => this.context.indicatorTrackRef.current, this.handlePositionChange);
         useRefById({
-            id: this.id,
-            ref: this.indicatorRef,
-            onRefChange: (node) => {
-                this.menu.viewportNode = node;
-            },
-        });
-        $effect(() => {
-            const triggerNodes = this.menu.getTriggerNodes();
-            const triggerNode = triggerNodes.find((node) => node.dataset.value === this.menu.value.current);
-            if (triggerNode) {
-                untrack(() => {
-                    this.activeTrigger = triggerNode;
-                });
-            }
+            ...opts,
+            deps: () => this.context.opts.value.current,
         });
-        useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
-        useResizeObserver(() => this.menu.indicatorTrackNode, this.handlePositionChange);
     }
     handlePositionChange = () => {
         if (!this.activeTrigger)
@@ -547,127 +441,160 @@ class NavigationMenuIndicatorState {
         };
     };
     props = $derived.by(() => ({
-        "aria-hidden": getAriaHidden(true),
+        id: this.opts.id.current,
         "data-state": this.isVisible ? "visible" : "hidden",
-        "data-orientation": getDataOrientation(this.menu.orientation.current),
+        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         style: {
             position: "absolute",
             ...(this.isHorizontal
                 ? {
                     left: 0,
-                    width: this.position ? `${this.position.size}px` : undefined,
-                    transform: this.position
-                        ? `translateX(${this.position.offset}px)`
-                        : undefined,
+                    width: `${this.position?.size}px`,
+                    transform: `translateX(${this.position?.offset}px)`,
                 }
                 : {
                     top: 0,
-                    height: this.position ? `${this.position.size}px` : undefined,
-                    transform: this.position
-                        ? `translateY(${this.position.offset}px)`
-                        : undefined,
+                    height: `${this.position?.size}px`,
+                    transform: `translateY(${this.position?.offset}px)`,
                 }),
         },
         [NAVIGATION_MENU_INDICATOR_ATTR]: "",
     }));
 }
 class NavigationMenuContentState {
-    id;
-    forceMount;
-    isMounted;
-    contentRef;
-    menu;
-    item;
-    prevMotionAttribute = $state(null);
-    motionAttribute = $state(null);
-    open = $derived.by(() => this.menu.value.current === this.item.value.current);
-    isPresent = $derived.by(() => this.open || this.forceMount.current);
-    constructor(props, item) {
-        this.id = props.id;
-        this.forceMount = props.forceMount;
-        this.isMounted = props.isMounted;
-        this.item = item;
-        this.menu = item.menu;
-        this.contentRef = props.ref;
+    opts;
+    context;
+    itemContext;
+    listContext;
+    open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
+    mounted = $state(false);
+    value = $derived.by(() => this.itemContext.opts.value.current);
+    // We persist the last active content value as the viewport may be animating out
+    // and we want the content to remain mounted for the lifecycle of the viewport.
+    isLastActiveValue = $derived.by(() => {
+        if (this.context.viewportRef.current) {
+            if (!this.context.opts.value.current && this.context.opts.previousValue.current) {
+                return (this.context.opts.previousValue.current === this.itemContext.opts.value.current);
+            }
+        }
+        return false;
+    });
+    constructor(opts, context) {
+        this.opts = opts;
+        this.context = context.provider;
+        this.itemContext = context.item;
+        this.listContext = context.list;
         useRefById({
-            id: this.id,
-            ref: this.contentRef,
+            ...opts,
             onRefChange: (node) => {
-                this.item.contentNode = node;
+                this.itemContext.contentNode = node;
             },
-            deps: () => this.isMounted.current,
+            deps: () => this.mounted,
         });
-        $effect(() => {
-            const items = this.menu.getTriggerNodes();
-            const prev = this.menu.previousValue.current;
-            const values = items
-                .map((item) => item.dataset.value)
-                .filter((v) => Boolean(v));
-            if (this.menu.dir.current === "rtl")
-                values.reverse();
-            const index = values.indexOf(this.menu.value.current);
-            const prevIndex = values.indexOf(prev ?? "");
-            const isSelected = this.item.value.current === this.menu.value.current;
-            const wasSelected = prevIndex === values.indexOf(this.item.value.current);
-            // We only want to update selected and the last selected content
-            // this avoids animations being interrupted outside of that range
-            if (!isSelected && !wasSelected) {
-                this.motionAttribute = this.prevMotionAttribute;
+    }
+    onpointerenter = (_) => {
+        this.context.onContentEnter();
+    };
+    onpointerleave = whenMouse(() => {
+        this.context.onContentLeave();
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+    }));
+}
+class NavigationMenuContentImplState {
+    opts;
+    itemContext;
+    context;
+    listContext;
+    prevMotionAttribute = $state(null);
+    motionAttribute = $derived.by(() => {
+        const items = this.listContext.listTriggers;
+        const values = items.map((item) => item.getAttribute("data-value")).filter(Boolean);
+        if (this.context.opts.dir.current === "rtl")
+            values.reverse();
+        const index = values.indexOf(this.context.opts.value.current);
+        const prevIndex = values.indexOf(this.context.opts.previousValue.current);
+        const isSelected = this.itemContext.opts.value.current === this.context.opts.value.current;
+        const wasSelected = prevIndex === values.indexOf(this.itemContext.opts.value.current);
+        // We only want to update selected and the last selected content
+        // this avoids animations being interrupted outside of that range
+        if (!isSelected && !wasSelected)
+            return untrack(() => this.prevMotionAttribute);
+        const attribute = (() => {
+            // Don't provide a direction on the initial open
+            if (index !== prevIndex) {
+                // If we're moving to this item from another
+                if (isSelected && prevIndex !== -1)
+                    return index > prevIndex ? "from-end" : "from-start";
+                // If we're leaving this item for another
+                if (wasSelected && index !== -1)
+                    return index > prevIndex ? "to-start" : "to-end";
             }
-            const attribute = (() => {
-                // Don't provide a direction on the initial open
-                if (index !== prevIndex) {
-                    // If we're moving to this item from another
-                    if (isSelected && prevIndex !== -1) {
-                        return index > prevIndex ? "from-end" : "from-start";
-                    }
-                    // If we're leaving this item for another
-                    if (wasSelected && index !== -1) {
-                        return index > prevIndex ? "to-start" : "to-end";
-                    }
+            // Otherwise we're entering from closed or leaving the list
+            // entirely and should not animate in any direction
+            return null;
+        })();
+        untrack(() => (this.prevMotionAttribute = attribute));
+        return attribute;
+    });
+    constructor(opts, itemContext) {
+        this.opts = opts;
+        this.itemContext = itemContext;
+        this.listContext = itemContext.listContext;
+        this.context = itemContext.listContext.context;
+        useRefById({
+            ...opts,
+            deps: () => this.context.opts.value.current,
+        });
+        watch([
+            () => this.itemContext.opts.value.current,
+            () => this.itemContext.triggerNode,
+            () => this.opts.ref.current,
+        ], () => {
+            const content = this.opts.ref.current;
+            if (!(content && this.context.opts.isRootMenu))
+                return;
+            const handleClose = () => {
+                this.context.onItemDismiss();
+                this.itemContext.onRootContentClose();
+                if (content.contains(document.activeElement)) {
+                    this.itemContext.triggerNode?.focus();
                 }
-                // Otherwise we're entering from closed or leaving the list
-                // entirely and should not animate in any direction
-                return null;
-            })();
-            this.prevMotionAttribute = attribute;
-            this.motionAttribute = attribute;
+            };
+            const removeListener = ROOT_CONTENT_DISMISS_EVENT.listen(content, handleClose);
+            return () => {
+                removeListener();
+            };
         });
-        this.onFocusOutside = this.onFocusOutside.bind(this);
-        this.onInteractOutside = this.onInteractOutside.bind(this);
-        this.onEscapeKeydown = this.onEscapeKeydown.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
     }
-    onFocusOutside(e) {
-        this.item.onContentFocusOutside();
+    onFocusOutside = (e) => {
+        this.itemContext.onContentFocusOutside();
         const target = e.target;
-        // only dismiss content when focus moves outside the menu
-        if (this.menu.root.rootRef.current?.contains(target)) {
+        // only dismiss content when focus moves outside of the menu
+        if (this.context.opts.rootNavigationMenuRef.current?.contains(target)) {
             e.preventDefault();
-        }
-        else {
-            this.menu.root.handleClose();
-        }
-    }
-    onInteractOutside(e) {
-        if (e.defaultPrevented)
             return;
-        const target = e.target;
-        const isTrigger = this.menu.getTriggerNodes().some((node) => node.contains(target));
-        const isRootViewport = this.menu.isRoot && this.menu.viewportNode?.contains(target);
-        if (isTrigger || isRootViewport || !this.menu.isRoot) {
-            e.preventDefault();
         }
-    }
-    onEscapeKeydown = (e) => {
-        this.menu.root.handleClose();
+        this.context.onItemDismiss();
+    };
+    onInteractOutside = (e) => {
         const target = e.target;
-        if (this.contentRef.current?.contains(target)) {
-            this.item.triggerNode?.focus();
-        }
-        this.item.wasEscapeClose = true;
+        const isTrigger = this.listContext.listTriggers.some((trigger) => trigger.contains(target));
+        const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef.current?.contains(target);
+        if (isTrigger || isRootViewport || !this.context.opts.isRootMenu)
+            e.preventDefault();
     };
-    onkeydown(e) {
+    onkeydown = (e) => {
+        // prevent parent menus handling sub-menu keydown events
+        const target = e.target;
+        if (!isElement(target))
+            return;
+        if (target.closest(`[${NAVIGATION_MENU_ATTR}]`) !==
+            this.context.opts.rootNavigationMenuRef.current)
+            return;
         const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
         const isTabKey = e.key === kbd.TAB && !isMetaKey;
         const candidates = getTabbableCandidates(e.currentTarget);
@@ -687,63 +614,78 @@ class NavigationMenuContentState {
                 // If we can't focus that means we're at the edges
                 // so focus the proxy and let browser handle
                 // tab/shift+tab keypress on the proxy instead
-                this.item.focusProxyNode?.focus();
+                handleProxyFocus(this.itemContext.focusProxyNode);
                 return;
             }
         }
-        const newSelectedElement = useArrowNavigation(e, document.activeElement, undefined, {
+        let activeEl = document.activeElement;
+        if (this.itemContext.contentNode) {
+            const focusedNode = this.itemContext.contentNode.querySelector("[data-focused]");
+            if (focusedNode) {
+                activeEl = focusedNode;
+            }
+        }
+        if (activeEl === this.itemContext.triggerNode)
+            return;
+        const newSelectedElement = useArrowNavigation(e, activeEl, undefined, {
             itemsArray: candidates,
             attributeName: `[${NAVIGATION_MENU_LINK_ATTR}]`,
             loop: false,
             enableIgnoredElement: true,
         });
         newSelectedElement?.focus();
-    }
+    };
+    onEscapeKeydown = (_) => {
+        this.context.onItemDismiss();
+        this.itemContext.triggerNode?.focus();
+        // prevent the dropdown from reopening after the escape key has been pressed
+        this.itemContext.wasEscapeClose = true;
+    };
     props = $derived.by(() => ({
-        id: this.id.current,
-        "aria-labelledby": this.item.triggerNode?.id ?? undefined,
-        "data-motion": this.motionAttribute,
-        "data-state": getDataOpenClosed(this.menu.value.current === this.item.value.current),
-        "data-orientation": getDataOrientation(this.menu.orientation.current),
-        [NAVIGATION_MENU_CONTENT_ATTR]: "",
-        style: {
-            pointerEvents: !this.open && this.menu.isRoot ? "none" : undefined,
-        },
+        id: this.opts.id.current,
+        "aria-labelledby": this.itemContext.triggerId,
+        "data-motion": this.motionAttribute ?? undefined,
+        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
+        "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
+        [NAVIGATION_MENU_CONTENT_ATTR]: "",
     }));
 }
 class NavigationMenuViewportState {
-    id;
-    menu;
+    opts;
+    context;
+    open = $derived.by(() => !!this.context.opts.value.current);
     size = $state(null);
-    open = $derived.by(() => this.menu.value.current !== "");
-    activeContentValue = $derived.by(() => this.menu.value.current);
-    viewportRef;
-    contentNode = $state();
-    constructor(props, menu) {
-        this.id = props.id;
-        this.menu = menu;
-        this.viewportRef = props.ref;
+    contentNode = $state(null);
+    viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
+    viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
+    activeContentValue = $derived.by(() => this.context.opts.value.current);
+    constructor(opts, context) {
+        this.opts = opts;
+        this.context = context;
         useRefById({
-            id: this.id,
-            ref: this.viewportRef,
+            ...opts,
             onRefChange: (node) => {
-                this.menu.viewportNode = node;
+                this.context.viewportRef.current = node;
             },
             deps: () => this.open,
         });
-        $effect(() => {
-            this.open;
-            this.activeContentValue;
-            const currentNode = untrack(() => this.viewportRef.current);
-            if (!currentNode)
-                return;
+        watch([() => this.activeContentValue, () => this.open], () => {
             afterTick(() => {
-                const contentNode = currentNode.querySelector("[data-state=open]")
-                    ?.children?.[0];
-                this.contentNode = contentNode;
+                const currNode = this.context.viewportRef.current;
+                if (!currNode)
+                    return;
+                const el = currNode.querySelector("[data-state=open]")
+                    ?.children?.[0] ?? null;
+                this.contentNode = el;
             });
         });
+        /**
+         * Update viewport size to match the active content node.
+         * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.
+         * For example, if content animates in from `scale(0.5)` the dimensions would be anything
+         * from `0.5` to `1` of the intended size.
+         */
         useResizeObserver(() => this.contentNode, () => {
             if (this.contentNode) {
                 this.size = {
@@ -752,80 +694,75 @@ class NavigationMenuViewportState {
                 };
             }
         });
-        this.onpointerenter = this.onpointerenter.bind(this);
-        this.onpointerleave = this.onpointerleave.bind(this);
-    }
-    onpointerenter(_) {
-        this.menu.onContentEnter?.();
-    }
-    onpointerleave(e) {
-        if (e.pointerType !== "mouse")
-            return;
-        this.menu.onContentLeave?.();
     }
     props = $derived.by(() => ({
-        id: this.id.current,
+        id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.open),
-        "data-orientation": getDataOrientation(this.menu.orientation.current),
+        "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         style: {
-            pointerEvents: !this.open && this.menu.isRoot ? "none" : undefined,
-            "--bits-navigation-menu-viewport-width": this.size
-                ? `${this.size.width}px`
-                : undefined,
-            "--bits-navigation-menu-viewport-height": this.size
-                ? `${this.size.height}px`
-                : undefined,
+            pointerEvents: !this.open && this.context.opts.isRootMenu ? "none" : undefined,
+            "--bits-navigation-menu-viewport-width": this.viewportWidth,
+            "--bits-navigation-menu-viewport-height": this.viewportHeight,
         },
-        onpointerenter: this.onpointerenter,
-        onpointerleave: this.onpointerleave,
+        onpointerenter: this.context.onContentEnter,
+        onpointerleave: this.context.onContentLeave,
     }));
 }
+const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
+export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
+const NavigationMenuListContext = new Context("NavigationMenu.List");
+const NavigationMenuContentContext = new Context("NavigationMenu.Content");
 export function useNavigationMenuRoot(props) {
-    const rootState = new NavigationMenuRootState(props);
-    const menuState = new NavigationMenuMenuState({
-        rootNavigationId: rootState.id,
-        dir: rootState.dir,
-        orientation: rootState.orientation,
-        value: rootState.value,
-        isRoot: true,
-        onTriggerEnter: rootState.onTriggerEnter,
-        onItemSelect: rootState.onItemSelect,
-        onItemDismiss: rootState.onItemDismiss,
-        onContentEnter: rootState.onContentEnter,
-        onContentLeave: rootState.onContentLeave,
-        onTriggerLeave: rootState.onTriggerLeave,
-        previousValue: rootState.previousValue,
-    }, rootState);
-    NavigationMenuMenuContext.set(menuState);
-    return NavigationMenuRootContext.set(rootState);
+    return new NavigationMenuRootState(props);
+}
+export function useNavigationMenuProvider(props) {
+    return NavigationMenuProviderContext.set(new NavigationMenuProviderState(props));
+}
+export function useNavigationMenuSub(props) {
+    return new NavigationMenuSubState(props, NavigationMenuProviderContext.get());
 }
 export function useNavigationMenuList(props) {
-    return NavigationMenuListContext.set(new NavigationMenuListState(props, NavigationMenuMenuContext.get()));
+    return NavigationMenuListContext.set(new NavigationMenuListState(props, NavigationMenuProviderContext.get()));
 }
 export function useNavigationMenuItem(props) {
-    const listState = NavigationMenuListContext.get();
-    return NavigationMenuItemContext.set(new NavigationMenuItemState(props, listState, listState.menu));
+    return NavigationMenuItemContext.set(new NavigationMenuItemState(props, NavigationMenuListContext.get()));
+}
+export function useNavigationMenuIndicatorImpl(props) {
+    return new NavigationMenuIndicatorImplState(props, {
+        provider: NavigationMenuProviderContext.get(),
+        list: NavigationMenuListContext.get(),
+    });
 }
 export function useNavigationMenuTrigger(props) {
-    return new NavigationMenuTriggerState(props, NavigationMenuItemContext.get());
+    return new NavigationMenuTriggerState(props, {
+        provider: NavigationMenuProviderContext.get(),
+        item: NavigationMenuItemContext.get(),
+        list: NavigationMenuListContext.get(),
+    });
 }
 export function useNavigationMenuContent(props) {
-    return NavigationMenuContentContext.set(new NavigationMenuContentState(props, NavigationMenuItemContext.get()));
+    return NavigationMenuContentContext.set(new NavigationMenuContentState(props, {
+        provider: NavigationMenuProviderContext.get(),
+        item: NavigationMenuItemContext.get(),
+        list: NavigationMenuListContext.get(),
+    }));
 }
-export function useNavigationMenuViewport(props) {
-    return new NavigationMenuViewportState(props, NavigationMenuMenuContext.get());
+export function useNavigationMenuLink(props) {
+    return new NavigationMenuLinkState(props, {
+        provider: NavigationMenuProviderContext.get(),
+        item: NavigationMenuItemContext.get(),
+    });
 }
-export function useNavigationMenuIndicator(props) {
-    return new NavigationMenuIndicatorState(props, NavigationMenuMenuContext.get());
+export function useNavigationMenuContentImpl(props, itemState) {
+    return new NavigationMenuContentImplState(props, itemState ?? NavigationMenuItemContext.get());
 }
-export function useNavigationMenuLink(props) {
-    const content = NavigationMenuContentContext.getOr(null);
-    if (content) {
-        return new NavigationMenuLinkState(props, content.item, content);
-    }
-    return new NavigationMenuLinkState(props, NavigationMenuItemContext.get());
+export function useNavigationMenuViewport(props) {
+    return new NavigationMenuViewportState(props, NavigationMenuProviderContext.get());
+}
+export function useNavigationMenuIndicator() {
+    return new NavigationMenuIndicatorState(NavigationMenuProviderContext.get());
 }
-/// Utils
+//
 function focusFirst(candidates) {
     const previouslyFocusedElement = document.activeElement;
     return candidates.some((candidate) => {
@@ -848,20 +785,34 @@ function removeFromTabOrder(candidates) {
         });
     };
 }
-function useResizeObserver(element, onResize) {
-    $effect(() => {
-        let rAF = 0;
-        const node = element();
-        if (node) {
-            const resizeObserver = new ResizeObserver(() => {
-                cancelAnimationFrame(rAF);
-                rAF = window.requestAnimationFrame(onResize);
-            });
-            resizeObserver.observe(node);
-            return () => {
-                window.cancelAnimationFrame(rAF);
-                resizeObserver.unobserve(node);
-            };
+function whenMouse(handler) {
+    return (e) => (e.pointerType === "mouse" ? handler(e) : undefined);
+}
+/**
+ *
+ * We apply the `aria-hidden` attribute to elements that should not be visible to screen readers
+ * under specific circumstances, mostly when in a "modal" context or when they are strictly for
+ * utility purposes, like the focus guards.
+ *
+ * When these elements receive focus before we can remove the aria-hidden attribute, we need to
+ * handle the focus in a way that does not cause an error to be logged.
+ *
+ * This function handles the focus of the guard element first by momentary removing the
+ * `aria-hidden` attribute, focusing the guard (which will cause something else to focus), and then
+ * restoring the attribute.
+ */
+function handleProxyFocus(guard, focusOptions) {
+    if (!guard)
+        return;
+    const ariaHidden = guard.getAttribute("aria-hidden");
+    guard.removeAttribute("aria-hidden");
+    guard.focus(focusOptions);
+    afterSleep(0, () => {
+        if (ariaHidden === null) {
+            guard.setAttribute("aria-hidden", "");
+        }
+        else {
+            guard.setAttribute("aria-hidden", ariaHidden);
         }
     });
 }