bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,95 +1,37 @@
-import { box } from "svelte-toolbelt";
-import { tick, untrack } from "svelte";
-import { IsFocusWithin } from "runed";
+import { afterTick, box, mergeProps, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { Context, IsFocusWithin, watch } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
-import { addEventListener } from "../../internal/events.js";
-import { executeCallbacks } from "../../internal/executeCallbacks.js";
-import { useTypeahead } from "../../internal/useTypeahead.svelte.js";
+import { CustomEventDispatcher } from "../../internal/events.js";
+import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
+import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
-import { mergeProps } from "../../internal/mergeProps.js";
-import { createContext } from "../../internal/createContext.js";
-import { afterTick } from "../../internal/afterTick.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 import { isPointerInGraceArea, makeHullFromElements } from "../../internal/polygon.js";
-import { onDestroyEffect } from "../../internal/onDestroyEffect.svelte.js";
-// const TRIGGER_ATTR = "data-menu-trigger";
-// const CONTENT_ATTR = "data-menu-content";
-// const ITEM_ATTR = "data-menu-item";
-// const SEPARATOR_ATTR = "data-menu-separator";
-// const SUB_TRIGGER_ATTR = "data-menu-sub-trigger";
-// const CHECKBOX_ITEM_ATTR = "data-menu-checkbox-item";
-// const GROUP_ATTR = "data-menu-group";
-// const LABEL_ATTR = "data-menu-group-heading";
-// const RADIO_GROUP_ATTR = "data-menu-radio-group";
-// const RADIO_ITEM_ATTR = "data-menu-radio-item";
-// const ARROW_ATTR = "data-menu-arrow";
+import { IsUsingKeyboard } from "../../index.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
-const [setMenuRootContext, getMenuRootContext] = createContext("Menu.Root");
-const [setMenuMenuContext, getMenuMenuContext] = createContext(["Menu.Root", "Menu.Sub"], "MenuContext");
-const [setMenuContentContext, getMenuContentContext] = createContext("Menu.Content");
-const [setMenuGroupContext, getMenuGroupContext] = createContext("Menu.Group");
-const [setMenuRadioGroupContext, getMenuRadioGroupContext] = createContext("Menu.RadioGroup");
-function createAttrs(variant) {
-    return {
-        trigger: `data-${variant}-trigger`,
-        content: `data-${variant}-content`,
-        item: `data-${variant}-item`,
-        separator: `data-${variant}-separator`,
-        subTrigger: `data-${variant}-sub-trigger`,
-        checkboxItem: `data-${variant}-checkbox-item`,
-        group: `data-${variant}-group`,
-        groupHeading: `data-${variant}-group-heading`,
-        radioGroup: `data-${variant}-radio-group`,
-        radioItem: `data-${variant}-radio-item`,
-        arrow: `data-${variant}-arrow`,
-        subContent: `data-${variant}-sub-content`,
-    };
-}
+const MenuRootContext = new Context("Menu.Root");
+const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
+const MenuContentContext = new Context("Menu.Content");
+const MenuGroupContext = new Context("Menu.Group | Menu.RadioGroup");
+const MenuRadioGroupContext = new Context("Menu.RadioGroup");
+export const MenuOpenEvent = new CustomEventDispatcher("bitsmenuopen", {
+    bubbles: false,
+    cancelable: true,
+});
 class MenuRootState {
     onClose;
     variant;
-    isUsingKeyboard = box(false);
+    isUsingKeyboard = new IsUsingKeyboard();
     dir;
-    attrs = $derived.by(() => createAttrs(this.variant.current));
     constructor(props) {
         this.onClose = props.onClose;
         this.dir = props.dir;
         this.variant = props.variant;
-        $effect(() => {
-            const callbacksToDispose = [];
-            const handlePointer = (_) => {
-                this.isUsingKeyboard.current = false;
-            };
-            const handleKeydown = (_) => {
-                this.isUsingKeyboard.current = true;
-                const disposePointerDown = addEventListener(document, "pointerdown", handlePointer, { capture: true, once: true });
-                const disposePointerMove = addEventListener(document, "pointermove", handlePointer, { capture: true, once: true });
-                callbacksToDispose.push(disposePointerDown, disposePointerMove);
-            };
-            const disposeKeydown = addEventListener(document, "keydown", handleKeydown, {
-                capture: true,
-            });
-            callbacksToDispose.push(disposeKeydown);
-            return () => {
-                executeCallbacks(callbacksToDispose);
-            };
-        });
-    }
-    createMenu(props) {
-        return new MenuMenuState(props, this);
     }
-    createGroup(props) {
-        return new MenuGroupState(props, this);
-    }
-    createSeparator(props) {
-        return new MenuSeparatorState(props, this);
-    }
-    createArrow() {
-        return new MenuArrowState(this);
+    getAttr(name) {
+        return `data-${this.variant.current}-${name}`;
     }
 }
 class MenuMenuState {
@@ -104,35 +46,21 @@ class MenuMenuState {
         this.open = props.open;
         this.parentMenu = parentMenu;
         if (parentMenu) {
-            $effect(() => {
-                parentMenu.open;
-                untrack(() => {
-                    if (!this.parentMenu?.open)
-                        this.open.current = false;
-                });
+            watch(() => parentMenu.open, (isOpen) => {
+                if (isOpen)
+                    return;
+                this.open.current = false;
             });
         }
     }
-    toggleOpen = () => {
+    toggleOpen() {
         this.open.current = !this.open.current;
-    };
-    onOpen = () => {
-        this.open.current = true;
-    };
-    onClose = () => {
-        this.open.current = false;
-    };
-    createContent(props) {
-        return new MenuContentState(props, this);
-    }
-    createSubmenu(props) {
-        return new MenuMenuState(props, this.root, this);
     }
-    createDropdownTrigger(props) {
-        return new DropdownMenuTriggerState(props, this);
+    onOpen() {
+        this.open.current = true;
     }
-    createContextTrigger(props) {
-        return new ContextMenuTriggerState(props, this);
+    onClose() {
+        this.open.current = false;
     }
 }
 class MenuContentState {
@@ -157,10 +85,15 @@ class MenuContentState {
         this.parentMenu.contentId = props.id;
         this.contentRef = props.ref;
         this.isMounted = props.isMounted;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onblur = this.onblur.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onfocus = this.onfocus.bind(this);
+        this.handleInteractOutside = this.handleInteractOutside.bind(this);
         useRefById({
             id: this.#id,
             ref: this.contentRef,
-            condition: () => this.parentMenu.open.current,
+            deps: () => this.parentMenu.open.current,
             onRefChange: (node) => {
                 if (this.parentMenu.contentNode !== node) {
                     this.parentMenu.contentNode = node;
@@ -170,36 +103,48 @@ class MenuContentState {
         onDestroyEffect(() => {
             window.clearTimeout(this.#timer);
         });
-        this.#handleTypeaheadSearch = useTypeahead().handleTypeaheadSearch;
+        this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
             rootNodeId: this.parentMenu.contentId,
-            candidateAttr: this.parentMenu.root.attrs.item,
+            candidateAttr: this.parentMenu.root.getAttr("item"),
             loop: this.#loop,
             orientation: box.with(() => "vertical"),
         });
+        watch(() => this.parentMenu.contentNode, (contentNode) => {
+            if (!contentNode)
+                return;
+            const handler = () => {
+                afterTick(() => {
+                    if (!this.parentMenu.root.isUsingKeyboard.current)
+                        return;
+                    this.rovingFocusGroup.focusFirstCandidate();
+                });
+            };
+            return MenuOpenEvent.listen(contentNode, handler);
+        });
     }
-    getCandidateNodes = () => {
+    #getCandidateNodes() {
         const node = this.parentMenu.contentNode;
         if (!node)
             return [];
-        const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.attrs.item}]:not([data-disabled])`));
+        const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.getAttr("item")}]:not([data-disabled])`));
         return candidates;
-    };
-    isPointerMovingToSubmenu = (e) => {
+    }
+    #isPointerMovingToSubmenu(e) {
         const isMovingTowards = this.#pointerDir === this.#pointerGraceIntent?.side;
         return isMovingTowards && isPointerInGraceArea(e, this.#pointerGraceIntent?.area);
-    };
-    onPointerGraceIntentChange = (intent) => {
+    }
+    onPointerGraceIntentChange(intent) {
         this.#pointerGraceIntent = intent;
-    };
-    #onkeydown = (e) => {
+    }
+    onkeydown(e) {
         if (e.defaultPrevented)
             return;
         const target = e.target;
         const currentTarget = e.currentTarget;
         if (!isHTMLElement(target) || !isHTMLElement(currentTarget))
             return;
-        const isKeydownInside = target.closest(`[${this.parentMenu.root.attrs.content}]`)?.id ===
+        const isKeydownInside = target.closest(`[${this.parentMenu.root.getAttr("content")}]`)?.id ===
             this.parentMenu.contentId.current;
         const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
         const isCharacterKey = e.key.length === 1;
@@ -209,7 +154,7 @@ class MenuContentState {
         // prevent space from being considered with typeahead
         if (e.code === "Space")
             return;
-        const candidateNodes = this.getCandidateNodes();
+        const candidateNodes = this.#getCandidateNodes();
         if (isKeydownInside) {
             // menus do not respect the tab key
             if (e.key === kbd.TAB)
@@ -228,8 +173,8 @@ class MenuContentState {
             candidateNodes.reverse();
         }
         focusFirst(candidateNodes);
-    };
-    #onblur = (e) => {
+    }
+    onblur(e) {
         if (!isElement(e.currentTarget))
             return;
         if (!isElement(e.target))
@@ -239,13 +184,13 @@ class MenuContentState {
             window.clearTimeout(this.#timer);
             this.search = "";
         }
-    };
-    #onfocus = () => {
+    }
+    onfocus(_) {
         if (!this.parentMenu.root.isUsingKeyboard.current)
             return;
         afterTick(() => this.rovingFocusGroup.focusFirstCandidate());
-    };
-    #onpointermove = (e) => {
+    }
+    onpointermove(e) {
         if (!isMouseEvent(e))
             return;
         const target = e.target;
@@ -262,24 +207,24 @@ class MenuContentState {
             this.#pointerDir = newDir;
             this.#lastPointerX = e.clientX;
         }
-    };
-    onItemEnter = (e) => {
-        if (this.isPointerMovingToSubmenu(e))
+    }
+    onItemEnter(e) {
+        if (this.#isPointerMovingToSubmenu(e))
             return true;
         return false;
-    };
-    onItemLeave = (e) => {
-        if (this.isPointerMovingToSubmenu(e))
+    }
+    onItemLeave(e) {
+        if (this.#isPointerMovingToSubmenu(e))
             return;
         const contentNode = this.parentMenu.contentNode;
         contentNode?.focus();
         this.rovingFocusGroup.setCurrentTabStopId("");
-    };
-    onTriggerLeave = (e) => {
-        if (this.isPointerMovingToSubmenu(e))
+    }
+    onTriggerLeave(e) {
+        if (this.#isPointerMovingToSubmenu(e))
             return true;
         return false;
-    };
+    }
     onOpenAutoFocus = (e) => {
         if (e.defaultPrevented)
             return;
@@ -287,7 +232,7 @@ class MenuContentState {
         const contentNode = this.parentMenu.contentNode;
         contentNode?.focus();
     };
-    handleInteractOutside = (e) => {
+    handleInteractOutside(e) {
         if (!isElementOrSVGElement(e.target))
             return;
         const triggerId = this.parentMenu.triggerNode?.id;
@@ -298,39 +243,23 @@ class MenuContentState {
         if (e.target.closest(`#${triggerId}`)) {
             e.preventDefault();
         }
-    };
+    }
     snippetProps = $derived.by(() => ({ open: this.parentMenu.open.current }));
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "menu",
         "aria-orientation": getAriaOrientation("vertical"),
-        [this.parentMenu.root.attrs.content]: "",
+        [this.parentMenu.root.getAttr("content")]: "",
         "data-state": getDataOpenClosed(this.parentMenu.open.current),
-        onkeydown: this.#onkeydown,
-        onblur: this.#onblur,
-        onpointermove: this.#onpointermove,
-        onfocus: this.#onfocus,
+        onkeydown: this.onkeydown,
+        onblur: this.onblur,
+        onpointermove: this.onpointermove,
+        onfocus: this.onfocus,
         dir: this.parentMenu.root.dir.current,
         style: {
             pointerEvents: "auto",
         },
     }));
-    createItem(props) {
-        const item = new MenuItemSharedState(props, this);
-        return new MenuItemState(props, item);
-    }
-    createCheckboxItem(props) {
-        const item = new MenuItemState(props, new MenuItemSharedState(props, this));
-        return new MenuCheckboxItemState(props, item);
-    }
-    createRadioGroup(props) {
-        return new MenuRadioGroupState(props, this);
-    }
-    createSubTrigger(props) {
-        const item = new MenuItemSharedState(props, this);
-        const submenu = getMenuMenuContext();
-        return new MenuSubTriggerState(item, this, submenu);
-    }
 }
 class MenuItemSharedState {
     content;
@@ -343,13 +272,17 @@ class MenuItemSharedState {
         this.id = props.id;
         this.disabled = props.disabled;
         this.ref = props.ref;
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        this.onfocus = this.onfocus.bind(this);
+        this.onblur = this.onblur.bind(this);
         useRefById({
             id: this.id,
             ref: this.ref,
-            condition: () => this.content.isMounted.current,
+            deps: () => this.content.isMounted.current,
         });
     }
-    #onpointermove = (e) => {
+    onpointermove(e) {
         if (e.defaultPrevented)
             return;
         if (!isMouseEvent(e))
@@ -366,8 +299,8 @@ class MenuItemSharedState {
                 return;
             item.focus();
         }
-    };
-    #onpointerleave = async (e) => {
+    }
+    onpointerleave(e) {
         afterTick(() => {
             if (e.defaultPrevented)
                 return;
@@ -375,21 +308,21 @@ class MenuItemSharedState {
                 return;
             this.content.onItemLeave(e);
         });
-    };
-    #onfocus = async (e) => {
+    }
+    onfocus(e) {
         afterTick(() => {
             if (e.defaultPrevented || this.disabled.current)
                 return;
             this.#isFocused = true;
         });
-    };
-    #onblur = async (e) => {
+    }
+    onblur(e) {
         afterTick(() => {
             if (e.defaultPrevented)
                 return;
             this.#isFocused = false;
         });
-    };
+    }
     props = $derived.by(() => ({
         id: this.id.current,
         tabindex: -1,
@@ -397,25 +330,46 @@ class MenuItemSharedState {
         "aria-disabled": getAriaDisabled(this.disabled.current),
         "data-disabled": getDataDisabled(this.disabled.current),
         "data-highlighted": this.#isFocused ? "" : undefined,
-        [this.content.parentMenu.root.attrs.item]: "",
+        [this.content.parentMenu.root.getAttr("item")]: "",
         //
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
-        onfocus: this.#onfocus,
-        onblur: this.#onblur,
+        onpointermove: this.onpointermove,
+        onpointerleave: this.onpointerleave,
+        onfocus: this.onfocus,
+        onblur: this.onblur,
     }));
 }
 class MenuItemState {
     #item;
     #onSelect;
+    #closeOnSelect;
     #isPointerDown = $state(false);
     root;
     constructor(props, item) {
         this.#item = item;
         this.root = item.content.parentMenu.root;
         this.#onSelect = props.onSelect;
+        this.#closeOnSelect = props.closeOnSelect;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
     }
-    #onkeydown = (e) => {
+    #handleSelect() {
+        if (this.#item.disabled.current)
+            return;
+        const selectEvent = new CustomEvent("menuitemselect", { bubbles: true, cancelable: true });
+        this.#onSelect.current(selectEvent);
+        afterTick(() => {
+            if (selectEvent.defaultPrevented) {
+                this.#item.content.parentMenu.root.isUsingKeyboard.current = false;
+                return;
+            }
+            if (this.#closeOnSelect.current) {
+                this.#item.content.parentMenu.root.onClose();
+            }
+        });
+    }
+    onkeydown(e) {
         const isTypingAhead = this.#item.content.search !== "";
         if (this.#item.disabled.current || (isTypingAhead && e.key === kbd.SPACE))
             return;
@@ -431,26 +385,13 @@ class MenuItemState {
              */
             e.preventDefault();
         }
-    };
-    #handleSelect = async () => {
-        if (this.#item.disabled.current)
-            return;
-        const selectEvent = new CustomEvent("menuitemselect", { bubbles: true, cancelable: true });
-        this.#onSelect.current(selectEvent);
-        await tick();
-        if (selectEvent.defaultPrevented) {
-            this.#item.content.parentMenu.root.isUsingKeyboard.current = false;
-        }
-        else {
-            this.#item.content.parentMenu.root.onClose();
-        }
-    };
-    #onclick = () => {
+    }
+    onclick(_) {
         if (this.#item.disabled.current)
             return;
         this.#handleSelect();
-    };
-    #onpointerup = async (e) => {
+    }
+    onpointerup(e) {
         if (e.defaultPrevented)
             return;
         if (!this.#isPointerDown) {
@@ -458,15 +399,15 @@ class MenuItemState {
                 return;
             e.currentTarget?.click();
         }
-    };
-    #onpointerdown = () => {
+    }
+    onpointerdown(_) {
         this.#isPointerDown = true;
-    };
+    }
     props = $derived.by(() => mergeProps(this.#item.props, {
-        onclick: this.#onclick,
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
-        onkeydown: this.#onkeydown,
+        onclick: this.onclick,
+        onpointerdown: this.onpointerdown,
+        onpointerup: this.onpointerup,
+        onkeydown: this.onkeydown,
     }));
 }
 class MenuSubTriggerState {
@@ -480,6 +421,10 @@ class MenuSubTriggerState {
         this.#item = item;
         this.#content = content;
         this.#submenu = submenu;
+        this.onpointerleave = this.onpointerleave.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
         onDestroyEffect(() => {
             this.#clearOpenTimer();
         });
@@ -491,13 +436,13 @@ class MenuSubTriggerState {
             },
         });
     }
-    #clearOpenTimer = () => {
+    #clearOpenTimer() {
         if (this.#openTimer === null)
             return;
         window.clearTimeout(this.#openTimer);
         this.#openTimer = null;
-    };
-    #onpointermove = (e) => {
+    }
+    onpointermove(e) {
         if (!isMouseEvent(e))
             return;
         const defaultPrevented = this.#content.onItemEnter(e);
@@ -510,8 +455,8 @@ class MenuSubTriggerState {
                 this.#clearOpenTimer();
             }, 100);
         }
-    };
-    #onpointerleave = (e) => {
+    }
+    onpointerleave(e) {
         if (!isMouseEvent(e))
             return;
         this.#clearOpenTimer();
@@ -534,19 +479,23 @@ class MenuSubTriggerState {
             // There's 100ms where the user may leave an item before the submenu was opened.
             this.#content.onPointerGraceIntentChange(null);
         }
-    };
-    #onkeydown = (e) => {
+    }
+    onkeydown(e) {
         const isTypingAhead = this.#content.search !== "";
         if (this.#item.disabled.current || (isTypingAhead && e.key === kbd.SPACE))
             return;
         if (SUB_OPEN_KEYS[this.#submenu.root.dir.current].includes(e.key)) {
             this.#submenu.onOpen();
-            const contentNode = this.#submenu.contentNode;
-            contentNode?.focus();
+            afterTick(() => {
+                const contentNode = this.#submenu.contentNode;
+                if (!contentNode)
+                    return;
+                MenuOpenEvent.dispatch(contentNode);
+            });
             e.preventDefault();
         }
-    };
-    #onclick = (e) => {
+    }
+    onclick(e) {
         if (this.#item.disabled.current)
             return;
         /**
@@ -560,7 +509,7 @@ class MenuSubTriggerState {
         if (!this.#submenu.open.current) {
             this.#submenu.onOpen();
         }
-    };
+    }
     props = $derived.by(() => mergeProps({
         "aria-haspopup": "menu",
         "aria-expanded": getAriaExpanded(this.#submenu.open.current),
@@ -568,37 +517,41 @@ class MenuSubTriggerState {
         "aria-controls": this.#submenu.open.current
             ? this.#submenu.contentId.current
             : undefined,
-        [this.#submenu.root.attrs.subTrigger]: "",
-        onclick: this.#onclick,
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
-        onkeydown: this.#onkeydown,
+        [this.#submenu.root.getAttr("sub-trigger")]: "",
+        onclick: this.onclick,
+        onpointermove: this.onpointermove,
+        onpointerleave: this.onpointerleave,
+        onkeydown: this.onkeydown,
     }, this.#item.props));
 }
 class MenuCheckboxItemState {
     #item;
     #checked;
+    #indeterminate;
     constructor(props, item) {
         this.#item = item;
         this.#checked = props.checked;
+        this.#indeterminate = props.indeterminate;
     }
-    toggleChecked = () => {
-        if (this.#checked.current === true) {
-            this.#checked.current = false;
-        }
-        else if (this.#checked.current === false) {
+    toggleChecked() {
+        if (this.#indeterminate.current) {
+            this.#indeterminate.current = false;
             this.#checked.current = true;
         }
-        else if (this.#checked.current === "indeterminate") {
-            this.#checked.current = true;
+        else {
+            this.#checked.current = !this.#checked.current;
         }
-    };
+    }
+    snippetProps = $derived.by(() => ({
+        checked: this.#checked.current,
+        indeterminate: this.#indeterminate.current,
+    }));
     props = $derived.by(() => ({
         ...this.#item.props,
         role: "menuitemcheckbox",
-        "aria-checked": getAriaChecked(this.#checked.current),
+        "aria-checked": getAriaChecked(this.#checked.current, this.#indeterminate.current),
         "data-state": getCheckedState(this.#checked.current),
-        [this.#item.root.attrs.checkboxItem]: "",
+        [this.#item.root.getAttr("checkbox-item")]: "",
     }));
 }
 class MenuGroupState {
@@ -619,11 +572,8 @@ class MenuGroupState {
         id: this.#id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        [this.root.attrs.group]: "",
+        [this.root.getAttr("group")]: "",
     }));
-    createGroupHeading(props) {
-        return new MenuGroupHeadingState(props, this);
-    }
 }
 class MenuGroupHeadingState {
     #id;
@@ -644,7 +594,7 @@ class MenuGroupHeadingState {
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "group",
-        [this.#group.root.attrs.groupHeading]: "",
+        [this.#group.root.getAttr("group-heading")]: "",
     }));
 }
 class MenuSeparatorState {
@@ -663,7 +613,7 @@ class MenuSeparatorState {
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "group",
-        [this.#root.attrs.separator]: "",
+        [this.#root.getAttr("separator")]: "",
     }));
 }
 class MenuArrowState {
@@ -672,40 +622,33 @@ class MenuArrowState {
         this.#root = root;
     }
     props = $derived.by(() => ({
-        [this.#root.attrs.arrow]: "",
+        [this.#root.getAttr("arrow")]: "",
     }));
 }
 class MenuRadioGroupState {
     #id;
     value;
     #ref;
-    #content;
+    content;
     groupHeadingId = $state(null);
     root;
     constructor(props, content) {
         this.value = props.value;
         this.#id = props.id;
         this.#ref = props.ref;
-        this.#content = content;
+        this.content = content;
         this.root = content.parentMenu.root;
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
     }
-    setValue = (v) => {
+    setValue(v) {
         this.value.current = v;
-    };
-    createRadioItem(props) {
-        const item = this.#content.createItem(props);
-        return new MenuRadioItemState(props, item, this);
-    }
-    createGroupHeading(props) {
-        return new MenuGroupHeadingState(props, this);
     }
     props = $derived.by(() => ({
         id: this.#id.current,
-        [this.root.attrs.radioGroup]: "",
+        [this.root.getAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
     }));
@@ -728,14 +671,14 @@ class MenuRadioItemState {
             ref: this.#ref,
         });
     }
-    selectValue = () => {
+    selectValue() {
         this.#group.setValue(this.#value.current);
-    };
+    }
     props = $derived.by(() => ({
-        [this.#group.root.attrs.radioItem]: "",
+        [this.#group.root.getAttr("radio-item")]: "",
         ...this.#item.props,
         role: "menuitemradio",
-        "aria-checked": getAriaChecked(this.isChecked),
+        "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
     }));
 }
@@ -749,6 +692,9 @@ class DropdownMenuTriggerState {
         this.#id = props.id;
         this.#parentMenu = parentMenu;
         this.#disabled = props.disabled;
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -757,16 +703,28 @@ class DropdownMenuTriggerState {
             },
         });
     }
-    #onpointerdown = (e) => {
-        if (!this.#disabled.current && e.button === 0 && e.ctrlKey === false) {
+    onpointerdown(e) {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button === 0 && e.ctrlKey === false) {
             this.#parentMenu.toggleOpen();
             // prevent trigger focusing when opening to allow
             // the content to be given focus without competition
             if (!this.#parentMenu.open.current)
                 e.preventDefault();
         }
-    };
-    #onkeydown = (e) => {
+    }
+    onpointerup(e) {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#parentMenu.toggleOpen();
+        }
+    }
+    onkeydown(e) {
         if (this.#disabled.current)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
@@ -778,7 +736,7 @@ class DropdownMenuTriggerState {
             this.#parentMenu.onOpen();
             e.preventDefault();
         }
-    };
+    }
     #ariaControls = $derived.by(() => {
         if (this.#parentMenu.open.current && this.#parentMenu.contentId.current)
             return this.#parentMenu.contentId.current;
@@ -792,10 +750,11 @@ class DropdownMenuTriggerState {
         "aria-controls": this.#ariaControls,
         "data-disabled": getDataDisabled(this.#disabled.current),
         "data-state": getDataOpenClosed(this.#parentMenu.open.current),
-        [this.#parentMenu.root.attrs.trigger]: "",
+        [this.#parentMenu.root.getAttr("trigger")]: "",
         //
-        onpointerdown: this.#onpointerdown,
-        onkeydown: this.#onkeydown,
+        onpointerdown: this.onpointerdown,
+        onpointerup: this.onpointerup,
+        onkeydown: this.onkeydown,
     }));
 }
 class ContextMenuTriggerState {
@@ -813,18 +772,22 @@ class ContextMenuTriggerState {
         this.#disabled = props.disabled;
         this.#id = props.id;
         this.#ref = props.ref;
+        this.oncontextmenu = this.oncontextmenu.bind(this);
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onpointercancel = this.onpointercancel.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
             onRefChange: (node) => {
                 this.#parentMenu.triggerNode = node;
             },
-            condition: () => this.#parentMenu.open.current,
+            deps: () => this.#parentMenu.open.current,
         });
-        $effect(() => {
-            this.#point;
+        watch(() => this.#point, (point) => {
             this.virtualElement.current = {
-                getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
+                getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...point }),
             };
         });
         $effect(() => {
@@ -832,50 +795,46 @@ class ContextMenuTriggerState {
                 this.#clearLongPressTimer();
             }
         });
-        $effect(() => {
-            return () => {
-                this.#clearLongPressTimer();
-            };
-        });
+        onDestroyEffect(() => this.#clearLongPressTimer());
     }
-    #clearLongPressTimer = () => {
+    #clearLongPressTimer() {
         if (this.#longPressTimer === null)
             return;
         window.clearTimeout(this.#longPressTimer);
-    };
-    #handleOpen = (e) => {
+    }
+    #handleOpen(e) {
         this.#point = { x: e.clientX, y: e.clientY };
         this.#parentMenu.onOpen();
-    };
-    #oncontextmenu = (e) => {
+    }
+    oncontextmenu(e) {
         if (this.#disabled.current)
             return;
         this.#clearLongPressTimer();
         this.#handleOpen(e);
         e.preventDefault();
         this.#parentMenu.contentNode?.focus();
-    };
-    #onpointerdown = (e) => {
+    }
+    onpointerdown(e) {
         if (this.#disabled.current || isMouseEvent(e))
             return;
         this.#clearLongPressTimer();
         this.#longPressTimer = window.setTimeout(() => this.#handleOpen(e), 700);
-    };
-    #onpointermove = (e) => {
+    }
+    onpointermove(e) {
         if (this.#disabled.current || isMouseEvent(e))
             return;
         this.#clearLongPressTimer();
-    };
-    #onpointercancel = (e) => {
+    }
+    onpointercancel(e) {
         if (this.#disabled.current || isMouseEvent(e))
             return;
         this.#clearLongPressTimer();
-    };
-    #onpointerup = (e) => {
+    }
+    onpointerup(e) {
         if (this.#disabled.current || isMouseEvent(e))
             return;
         this.#clearLongPressTimer();
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         disabled: this.#disabled.current,
@@ -883,61 +842,64 @@ class ContextMenuTriggerState {
         "data-state": getDataOpenClosed(this.#parentMenu.open.current),
         [CONTEXT_MENU_TRIGGER_ATTR]: "",
         //
-        onpointerdown: this.#onpointerdown,
-        onpointermove: this.#onpointermove,
-        onpointercancel: this.#onpointercancel,
-        onpointerup: this.#onpointerup,
-        oncontextmenu: this.#oncontextmenu,
+        onpointerdown: this.onpointerdown,
+        onpointermove: this.onpointermove,
+        onpointercancel: this.onpointercancel,
+        onpointerup: this.onpointerup,
+        oncontextmenu: this.oncontextmenu,
     }));
 }
-//
-// CONTEXT METHODS
-//
 export function useMenuRoot(props) {
-    return setMenuRootContext(new MenuRootState(props));
+    return MenuRootContext.set(new MenuRootState(props));
 }
 export function useMenuMenu(root, props) {
-    return setMenuMenuContext(root.createMenu(props));
+    return MenuMenuContext.set(new MenuMenuState(props, root));
 }
 export function useMenuSubmenu(props) {
-    return setMenuMenuContext(getMenuMenuContext().createSubmenu(props));
+    const menu = MenuMenuContext.get();
+    return MenuMenuContext.set(new MenuMenuState(props, menu.root, menu));
 }
 export function useMenuSubTrigger(props) {
-    return getMenuContentContext().createSubTrigger(props);
+    const content = MenuContentContext.get();
+    const item = new MenuItemSharedState(props, content);
+    const submenu = MenuMenuContext.get();
+    return new MenuSubTriggerState(item, content, submenu);
 }
 export function useMenuDropdownTrigger(props) {
-    return getMenuMenuContext().createDropdownTrigger(props);
-}
-export function useMenuPortal() {
-    return getMenuMenuContext();
+    return new DropdownMenuTriggerState(props, MenuMenuContext.get());
 }
 export function useMenuContextTrigger(props) {
-    return getMenuMenuContext().createContextTrigger(props);
+    return new ContextMenuTriggerState(props, MenuMenuContext.get());
 }
 export function useMenuContent(props) {
-    return setMenuContentContext(getMenuMenuContext().createContent(props));
+    return MenuContentContext.set(new MenuContentState(props, MenuMenuContext.get()));
 }
 export function useMenuItem(props) {
-    return getMenuContentContext().createItem(props);
+    const item = new MenuItemSharedState(props, MenuContentContext.get());
+    return new MenuItemState(props, item);
 }
 export function useMenuCheckboxItem(props) {
-    return getMenuContentContext().createCheckboxItem(props);
+    const item = new MenuItemState(props, new MenuItemSharedState(props, MenuContentContext.get()));
+    return new MenuCheckboxItemState(props, item);
 }
 export function useMenuRadioGroup(props) {
-    return setMenuGroupContext(setMenuRadioGroupContext(getMenuContentContext().createRadioGroup(props)));
+    return MenuGroupContext.set(MenuRadioGroupContext.set(new MenuRadioGroupState(props, MenuContentContext.get())));
 }
 export function useMenuRadioItem(props) {
-    return getMenuRadioGroupContext().createRadioItem(props);
+    const radioGroup = MenuRadioGroupContext.get();
+    const sharedItem = new MenuItemSharedState(props, radioGroup.content);
+    const item = new MenuItemState(props, sharedItem);
+    return new MenuRadioItemState(props, item, radioGroup);
 }
 export function useMenuGroup(props) {
-    return setMenuGroupContext(getMenuRootContext().createGroup(props));
+    return MenuGroupContext.set(new MenuGroupState(props, MenuRootContext.get()));
 }
 export function useMenuGroupHeading(props) {
-    return getMenuGroupContext().createGroupHeading(props);
+    return new MenuGroupHeadingState(props, MenuGroupContext.get());
 }
 export function useMenuSeparator(props) {
-    return getMenuRootContext().createSeparator(props);
+    return new MenuSeparatorState(props, MenuRootContext.get());
 }
 export function useMenuArrow() {
-    return getMenuRootContext().createArrow();
+    return new MenuArrowState(MenuRootContext.get());
 }