sheer-ui 0.4.2 → 0.5.0

package/dist/components/menu/menu.svelte.js

@@ -0,0 +1,1281 @@
+import { attachRef, DOMContext, getWindow, boxWith, } from '../../internal/tools/index.js';
+import { mergeProps } from '../../internal/merge-props.js';
+import { createContext, onDestroy, tick, untrack } from 'svelte';
+import { SUB_OPEN_KEYS, getCheckedState, isMouseEvent } from './utils.js';
+import { focusFirst } from '../../internal/focus.js';
+import { isElement, isElementOrSVGElement, isHTMLElement } from '../../internal/tools/utils/dom.js';
+import { kbd, FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS } from '../../internal/kbd.js';
+import { createBitsAttrs, getAriaChecked, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, } from '../../internal/attrs.js';
+import { getTabbableFrom, isTabbable } from '../../internal/tabbable.js';
+import { Typeahead, textContentOf } from '../../internal/typeahead.svelte.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { useOpenChangeComplete } from '../../internal/animations-settled.svelte.js';
+import { joinGroup } from '../../internal/group-value.svelte.js';
+import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
+import { on } from 'svelte/events';
+import { AXIS_VERTICAL, DIR_POS, TARGET_CONTENT, TARGET_NONE, TARGET_TRIGGER, flipSide, getCorridorPolygon, getSide, isInsideRect, isPointInPolygon, } from '../../internal/hover-intent-geometry.js';
+export const CONTEXT_MENU_TRIGGER_ATTR = 'data-context-menu-trigger';
+export const CONTEXT_MENU_CONTENT_ATTR = 'data-context-menu-content';
+const [getMenuRoot, setMenuRoot] = createContext();
+const [getMenuMenu, setMenuMenu] = createContext();
+const [getMenuContent, setMenuContent] = createContext();
+const [getMenuGroup, setMenuGroup] = createContext();
+const [getMenuRadioGroup, setMenuRadioGroup] = createContext();
+const [getMenuCheckboxGroup, setMenuCheckboxGroup, hasMenuCheckboxGroup] = createContext();
+export const menuAttrs = createBitsAttrs({
+    component: 'menu',
+    parts: [
+        'trigger',
+        'content',
+        'sub-trigger',
+        'item',
+        'group',
+        'group-heading',
+        'checkbox-group',
+        'checkbox-item',
+        'radio-group',
+        'radio-item',
+        'separator',
+        'sub-content',
+        'arrow',
+    ],
+});
+export class MenuSubmenuIntent {
+    #opts;
+    #cleanupDocMove = null;
+    // Every `#active = false` write stops this timer first, so the callback only ever fires while active.
+    #fallbackTimer = createEffectTimeout(() => this.#intentExit(), () => 500);
+    #disengageTimer = createEffectTimeout(() => this.#opts.setIsPointerInTransit(false), () => 100);
+    #active = false;
+    #target = TARGET_NONE;
+    #apex = null;
+    #pointerPoint = null;
+    #launchPoint = null;
+    constructor(opts) {
+        this.#opts = opts;
+        $effect(() => {
+            const triggerNode = opts.triggerNode();
+            const contentNode = opts.contentNode();
+            const enabled = opts.enabled();
+            return untrack(() => {
+                this.#reset();
+                if (!triggerNode || !contentNode || !enabled)
+                    return;
+                const onTriggerMove = (e) => {
+                    if (!isMouseEvent(e))
+                        return;
+                    this.#launchPoint = [e.clientX, e.clientY];
+                    if (!this.#active)
+                        this.#preview(e, TARGET_CONTENT);
+                };
+                const onTriggerLeave = (e) => {
+                    if (!isMouseEvent(e))
+                        return;
+                    this.#engage(e, TARGET_CONTENT);
+                };
+                const onContentMove = (e) => {
+                    if (!isMouseEvent(e))
+                        return;
+                    if (!this.#active)
+                        this.#preview(e, TARGET_TRIGGER);
+                };
+                const onContentLeave = (e) => {
+                    if (!isMouseEvent(e))
+                        return;
+                    if (isElement(e.relatedTarget)) {
+                        const selector = this.#opts.subContentSelector();
+                        const matchedSubContent = e.relatedTarget.closest(selector);
+                        if (matchedSubContent && matchedSubContent !== contentNode && matchedSubContent.id) {
+                            const isChild = !!contentNode.querySelector(`[aria-controls="${matchedSubContent.id}"]`);
+                            if (isChild) {
+                                return;
+                            }
+                        }
+                    }
+                    this.#engage(e, TARGET_TRIGGER);
+                };
+                const onTriggerEnter = (e) => {
+                    if (!isMouseEvent(e))
+                        return;
+                    this.#disengage();
+                };
+                const onContentEnter = (e) => {
+                    if (!isMouseEvent(e))
+                        return;
+                    this.#disengage();
+                };
+                const cleanup = [
+                    on(triggerNode, 'pointermove', onTriggerMove),
+                    on(triggerNode, 'pointerleave', onTriggerLeave),
+                    on(triggerNode, 'pointerenter', onTriggerEnter),
+                    on(contentNode, 'pointermove', onContentMove),
+                    on(contentNode, 'pointerleave', onContentLeave),
+                    on(contentNode, 'pointerenter', onContentEnter),
+                ];
+                return () => {
+                    cleanup.forEach((remove) => remove());
+                    this.#reset();
+                };
+            });
+        });
+        onDestroy(() => {
+            this.#reset();
+        });
+    }
+    #parentTargetRect() {
+        const parent = this.#opts.parentContentNode();
+        if (parent)
+            return parent.getBoundingClientRect();
+        return this.#opts.triggerNode()?.getBoundingClientRect() ?? null;
+    }
+    #computePolygons(pointerPt, target) {
+        const triggerNode = this.#opts.triggerNode();
+        const contentNode = this.#opts.contentNode();
+        if (!triggerNode || !contentNode)
+            return null;
+        const triggerRect = triggerNode.getBoundingClientRect();
+        const contentRect = contentNode.getBoundingClientRect();
+        const side = getSide(triggerRect, contentRect);
+        let apex;
+        let targetRect;
+        let sourceRect;
+        if (target & TARGET_CONTENT) {
+            apex = this.#active ? (this.#apex ?? pointerPt) : pointerPt;
+            targetRect = contentRect;
+        }
+        else {
+            apex = this.#launchPoint ?? pointerPt;
+            targetRect = this.#parentTargetRect() ?? triggerRect;
+            sourceRect = contentRect;
+        }
+        this.#apex = apex;
+        return {
+            // this file's corridor has always used a fixed buffer of 2 (distinct from
+            // SafePolygon's configurable buffer), preserved explicitly here
+            corridor: getCorridorPolygon(triggerRect, contentRect, side, 2),
+            intent: getIntentPolygon(apex, targetRect, side, target, sourceRect),
+            targetRect,
+            side,
+        };
+    }
+    #isInSafeZone(pt, corridor, intent) {
+        return isPointInPolygon(pt, corridor) || isPointInPolygon(pt, intent);
+    }
+    #preview(e, target) {
+        const pt = [e.clientX, e.clientY];
+        const geo = this.#computePolygons(pt, target);
+        if (!geo)
+            return;
+        this.#target = target;
+        this.#pointerPoint = pt;
+    }
+    #engage(e, target) {
+        if (!this.#opts.enabled())
+            return;
+        const triggerNode = this.#opts.triggerNode();
+        const contentNode = this.#opts.contentNode();
+        if (!triggerNode || !contentNode)
+            return;
+        const related = e.relatedTarget;
+        if (isElement(related)) {
+            if (target & TARGET_CONTENT && contentNode.contains(related))
+                return;
+            if (target & TARGET_TRIGGER && triggerNode.contains(related))
+                return;
+        }
+        const pt = [e.clientX, e.clientY];
+        const geo = this.#computePolygons(pt, target);
+        if (!geo)
+            return;
+        if (!isInsideRect(pt, geo.targetRect) && !this.#isInSafeZone(pt, geo.corridor, geo.intent)) {
+            this.#clearVisuals();
+            return;
+        }
+        this.#active = true;
+        this.#target = target;
+        this.#pointerPoint = pt;
+        this.#opts.setIsPointerInTransit(true);
+        this.#attachDocMove();
+        this.#fallbackTimer.start();
+    }
+    #disengage() {
+        if (!this.#active)
+            return;
+        const wasReturning = (this.#target & TARGET_TRIGGER) !== 0;
+        this.#detachDocMove();
+        this.#fallbackTimer.stop();
+        this.#active = false;
+        this.#clearVisuals();
+        if (wasReturning) {
+            this.#disengageTimer.start();
+        }
+        else {
+            this.#opts.setIsPointerInTransit(false);
+        }
+    }
+    #intentExit() {
+        const pointerPoint = this.#pointerPoint;
+        this.#detachDocMove();
+        this.#fallbackTimer.stop();
+        this.#disengageTimer.stop();
+        this.#active = false;
+        this.#opts.setIsPointerInTransit(false);
+        this.#clearVisuals();
+        this.#opts.onIntentExit(pointerPoint);
+    }
+    #reset() {
+        this.#detachDocMove();
+        this.#fallbackTimer.stop();
+        this.#disengageTimer.stop();
+        if (this.#active)
+            this.#opts.setIsPointerInTransit(false);
+        this.#active = false;
+        this.#target = TARGET_NONE;
+        this.#apex = null;
+        this.#pointerPoint = null;
+        this.#launchPoint = null;
+    }
+    #isPointerInDescendantSubContent(pt) {
+        const contentNode = this.#opts.contentNode();
+        if (!contentNode)
+            return false;
+        const doc = contentNode.ownerDocument;
+        const el = doc.elementFromPoint(pt[0], pt[1]);
+        if (!el)
+            return false;
+        const selector = this.#opts.subContentSelector();
+        const subContent = el.closest(selector);
+        if (!subContent || subContent === contentNode)
+            return false;
+        if (subContent.id)
+            return !!contentNode.querySelector(`[aria-controls="${subContent.id}"]`);
+        return false;
+    }
+    #onDocMove = (e) => {
+        if (!this.#active || !this.#target)
+            return;
+        if (!isMouseEvent(e))
+            return;
+        const triggerNode = this.#opts.triggerNode();
+        const contentNode = this.#opts.contentNode();
+        if (!triggerNode || !contentNode) {
+            this.#intentExit();
+            return;
+        }
+        this.#fallbackTimer.stop();
+        const pt = [e.clientX, e.clientY];
+        this.#pointerPoint = pt;
+        const triggerRect = triggerNode.getBoundingClientRect();
+        const contentRect = contentNode.getBoundingClientRect();
+        if (this.#target & TARGET_CONTENT && isInsideRect(pt, contentRect)) {
+            this.#disengage();
+            return;
+        }
+        if (this.#target & TARGET_TRIGGER && isInsideInsetRect(pt, triggerRect, 4)) {
+            this.#disengage();
+            return;
+        }
+        if (this.#isPointerInDescendantSubContent(pt)) {
+            this.#fallbackTimer.start();
+            return;
+        }
+        const geo = this.#computePolygons(pt, this.#target);
+        if (!geo) {
+            this.#intentExit();
+            return;
+        }
+        if (this.#isInSafeZone(pt, geo.corridor, geo.intent)) {
+            this.#fallbackTimer.start();
+            return;
+        }
+        this.#intentExit();
+    };
+    #attachDocMove() {
+        if (this.#cleanupDocMove)
+            return;
+        const doc = (this.#opts.triggerNode() ?? this.#opts.contentNode())?.ownerDocument ?? document;
+        const remove = on(doc, 'pointermove', this.#onDocMove, { capture: true });
+        this.#cleanupDocMove = () => {
+            remove();
+            this.#cleanupDocMove = null;
+        };
+    }
+    #detachDocMove() {
+        this.#cleanupDocMove?.();
+    }
+    #clearVisuals() {
+        this.#target = TARGET_NONE;
+        this.#apex = null;
+        this.#pointerPoint = null;
+    }
+}
+function isInsideInsetRect(point, rect, inset) {
+    return point[0] >= rect.left + inset && point[0] <= rect.right - inset && point[1] >= rect.top + inset && point[1] <= rect.bottom - inset;
+}
+/**
+ * The submenu-chain "intent" safe zone: a precise triangular cone from the exit point to the
+ * target's near edge (optionally widened to also cover `sourceRect`, e.g. the content rect when
+ * aiming back at a parent trigger). Deliberately narrower than SafePolygon's hexagonal safe zone —
+ * densely-packed sibling menu items need more precision than a single floating trigger/content pair.
+ */
+function getIntentPolygon(exitPoint, targetRect, side, target, sourceRect) {
+    const edgeBuffer = 8;
+    const effectiveSide = target & TARGET_TRIGGER ? flipSide(side) : side;
+    const top = sourceRect ? Math.min(targetRect.top, sourceRect.top) - edgeBuffer : targetRect.top - edgeBuffer;
+    const bottom = sourceRect ? Math.max(targetRect.bottom, sourceRect.bottom) + edgeBuffer : targetRect.bottom + edgeBuffer;
+    const left = sourceRect ? Math.min(targetRect.left, sourceRect.left) - edgeBuffer : targetRect.left - edgeBuffer;
+    const right = sourceRect ? Math.max(targetRect.right, sourceRect.right) + edgeBuffer : targetRect.right + edgeBuffer;
+    const dir = effectiveSide & DIR_POS;
+    if (effectiveSide & AXIS_VERTICAL) {
+        // dir 0 = top (target is below the apex; cone opens toward targetRect.bottom), 1 = bottom
+        const edgeY = dir === 0 ? targetRect.bottom : targetRect.top;
+        return [exitPoint, [left, edgeY], [right, edgeY]];
+    }
+    // dir 0 = left (target is to the right; cone opens toward targetRect.right), 1 = right
+    const edgeX = dir === 0 ? targetRect.right : targetRect.left;
+    return [exitPoint, [edgeX, top], [edgeX, bottom]];
+}
+export class MenuRootState {
+    static create(opts) {
+        const root = new MenuRootState(opts);
+        return setMenuRoot(root);
+    }
+    opts;
+    isKeyboard = $state(false);
+    ignoreCloseAutoFocus = $state(false);
+    isPointerInTransit = $state(false);
+    constructor(opts) {
+        this.opts = opts;
+    }
+    getBitsAttr = (part) => {
+        return menuAttrs.getAttr(part, this.opts.variant.current);
+    };
+}
+export class MenuMenuState {
+    static create(opts, root) {
+        return setMenuMenu(new MenuMenuState(opts, root, null));
+    }
+    opts;
+    root;
+    parentMenu;
+    contentId = boxWith(() => '');
+    contentNode = $state(null);
+    triggerNode = $state(null);
+    #completion;
+    /** Rendered: open, or closing with the exit still settling — the window the popper layer's scroll lock covers. */
+    present = $derived.by(() => this.opts.open.current || this.#completion.pending);
+    /** Registered by the mounted content: keyboard-driven opens land focus on the first item. */
+    focusFirstItem = null;
+    constructor(opts, root, parentMenu) {
+        this.opts = opts;
+        this.root = root;
+        this.parentMenu = parentMenu;
+        // Content stays mounted through its exit transition (CSS owns the motion; the closed state
+        // is the content's `contentStyle`); completion is settle-based on the content node.
+        this.#completion = useOpenChangeComplete(() => this.opts.open.current, () => this.contentNode, (open) => this.opts.onOpenChangeComplete.current(open), (open) => !open && this.shouldSkipExitAnimation());
+        if (parentMenu) {
+            $effect(() => {
+                parentMenu.opts.open.current;
+                untrack(() => {
+                    if (parentMenu.opts.open.current)
+                        return;
+                    this.opts.open.current = false;
+                });
+            });
+        }
+    }
+    /** A menubar swap between top-level menus closes the outgoing one without its exit transition. */
+    shouldSkipExitAnimation() {
+        if (this.root.opts.variant.current !== 'menubar' || this.parentMenu !== null)
+            return false;
+        return this.root.opts.shouldSkipExitAnimation?.() ?? false;
+    }
+    toggleOpen() {
+        this.opts.open.current = !this.opts.open.current;
+    }
+    onOpen() {
+        this.opts.open.current = true;
+    }
+    onClose() {
+        this.opts.open.current = false;
+    }
+}
+export class MenuContentState {
+    static create(opts) {
+        return setMenuContent(new MenuContentState(opts, getMenuMenu()));
+    }
+    opts;
+    parentMenu;
+    rovingFocusGroup;
+    domContext;
+    attachment;
+    #typeahead;
+    #isSub;
+    #isStatic;
+    /** Items of a closed (still mounted) sub-content are hidden, not candidates. */
+    #candidateSelector;
+    constructor(opts, parentMenu) {
+        this.opts = opts;
+        this.parentMenu = parentMenu;
+        this.domContext = new DOMContext(opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => {
+            if (this.parentMenu.contentNode !== v) {
+                this.parentMenu.contentNode = v;
+            }
+        });
+        parentMenu.contentId = opts.id;
+        this.#isSub = opts.isSub ?? false;
+        this.#isStatic = opts.isStatic ?? false;
+        const root = parentMenu.root;
+        this.#candidateSelector = `[${root.getBitsAttr('item')}]:not([data-disabled]):not([${root.getBitsAttr('sub-content')}][data-state='closed'] *)`;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onblur = this.onblur.bind(this);
+        this.onfocus = this.onfocus.bind(this);
+        this.handleInteractOutside = this.handleInteractOutside.bind(this);
+        new MenuSubmenuIntent({
+            contentNode: () => this.parentMenu.contentNode,
+            triggerNode: () => this.parentMenu.triggerNode,
+            parentContentNode: () => this.parentMenu.parentMenu?.contentNode ?? null,
+            subContentSelector: () => `[${this.parentMenu.root.getBitsAttr('sub-content')}]`,
+            enabled: () => this.parentMenu.opts.open.current &&
+                Boolean(this.parentMenu.triggerNode?.hasAttribute(this.parentMenu.root.getBitsAttr('sub-trigger'))),
+            onIntentExit: (pointerPoint) => {
+                this.parentMenu.opts.open.current = false;
+                this.#dispatchPointerMoveToHoveredSubTrigger(pointerPoint);
+            },
+            setIsPointerInTransit: (value) => {
+                this.parentMenu.root.isPointerInTransit = value;
+            },
+        });
+        this.#typeahead = new Typeahead({
+            getSearchText: textContentOf,
+            getCurrentCandidate: () => this.domContext.getActiveElement(),
+            onMatch: (node) => node.focus(),
+            getWindow: () => this.domContext.getWindow(),
+        });
+        this.rovingFocusGroup = new RovingFocusGroup({
+            rootNode: () => this.parentMenu.contentNode,
+            candidateSelector: this.#candidateSelector,
+            loop: () => this.opts.loop.current,
+            orientation: () => 'vertical',
+        });
+        $effect(() => {
+            this.parentMenu.focusFirstItem = () => {
+                tick().then(() => {
+                    if (!this.parentMenu.root.isKeyboard)
+                        return;
+                    this.rovingFocusGroup.focusFirstCandidate();
+                });
+            };
+            return () => {
+                this.parentMenu.focusFirstItem = null;
+            };
+        });
+        $effect(() => {
+            if (!this.parentMenu.opts.open.current)
+                this.#typeahead.reset();
+        });
+    }
+    #getCandidateNodes() {
+        const node = this.parentMenu.contentNode;
+        if (!node)
+            return [];
+        return Array.from(node.querySelectorAll(this.#candidateSelector));
+    }
+    #isPointerMovingToSubmenu() {
+        return this.parentMenu.root.isPointerInTransit;
+    }
+    #dispatchPointerMoveToHoveredSubTrigger(pointerPoint) {
+        if (!pointerPoint)
+            return;
+        const parentContentNode = this.parentMenu.parentMenu?.contentNode;
+        if (!parentContentNode)
+            return;
+        const hoveredNode = this.domContext.getDocument().elementFromPoint(pointerPoint[0], pointerPoint[1]);
+        if (!isElement(hoveredNode))
+            return;
+        const hoveredSubTrigger = hoveredNode.closest(`[${this.parentMenu.root.getBitsAttr('sub-trigger')}]`);
+        if (!hoveredSubTrigger || !parentContentNode.contains(hoveredSubTrigger))
+            return;
+        if (hoveredSubTrigger === this.parentMenu.triggerNode)
+            return;
+        hoveredSubTrigger.dispatchEvent(new PointerEvent('pointermove', {
+            bubbles: true,
+            cancelable: true,
+            pointerType: 'mouse',
+            clientX: pointerPoint[0],
+            clientY: pointerPoint[1],
+        }));
+    }
+    onCloseAutoFocus = (e) => {
+        this.opts.onCloseAutoFocus.current?.(e);
+        if (e.defaultPrevented || this.#isSub)
+            return;
+        if (this.parentMenu.root.ignoreCloseAutoFocus) {
+            e.preventDefault();
+            return;
+        }
+        if (this.parentMenu.triggerNode && isTabbable(this.parentMenu.triggerNode)) {
+            e.preventDefault();
+            this.parentMenu.triggerNode.focus();
+        }
+    };
+    handleTabKeyDown(e) {
+        /**
+         * We locate the root `menu`'s trigger by going up the tree until
+         * we find a menu that has no parent. This will allow us to focus the next
+         * tabbable element before/after the root trigger.
+         */
+        let rootMenu = this.parentMenu;
+        while (rootMenu.parentMenu !== null) {
+            rootMenu = rootMenu.parentMenu;
+        }
+        if (!rootMenu.triggerNode)
+            return;
+        e.preventDefault();
+        const nodeToFocus = getTabbableFrom(rootMenu.triggerNode, e.shiftKey ? 'prev' : 'next');
+        if (nodeToFocus) {
+            /**
+             * We set a flag to ignore the `onCloseAutoFocus` event handler
+             * as well as the fallbacks inside the focus scope to prevent
+             * race conditions causing focus to fall back to the body even
+             * though we're trying to focus the next tabbable element.
+             */
+            this.parentMenu.root.ignoreCloseAutoFocus = true;
+            rootMenu.onClose();
+            tick().then(() => {
+                nodeToFocus.focus();
+                tick().then(() => {
+                    this.parentMenu.root.ignoreCloseAutoFocus = false;
+                });
+            });
+        }
+        else {
+            this.domContext.getDocument().body.focus();
+        }
+    }
+    onkeydown(e) {
+        if (e.defaultPrevented)
+            return;
+        if (e.key === kbd.TAB) {
+            this.handleTabKeyDown(e);
+            return;
+        }
+        const target = e.target;
+        const currentTarget = e.currentTarget;
+        if (!isHTMLElement(target) || !isHTMLElement(currentTarget))
+            return;
+        const isKeydownInside = target.closest(`[${this.parentMenu.root.getBitsAttr('content')}]`)?.id === this.parentMenu.contentId.current;
+        const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
+        const isCharacterKey = e.key.length === 1;
+        const kbdFocusedEl = this.rovingFocusGroup.handleKeydown(target, e);
+        if (kbdFocusedEl)
+            return;
+        // prevent space from being considered with typeahead
+        if (e.code === 'Space')
+            return;
+        const candidateNodes = this.#getCandidateNodes();
+        if (isKeydownInside) {
+            if (!isModifierKey && isCharacterKey) {
+                this.#typeahead.handleKey(e.key, candidateNodes);
+            }
+        }
+        // focus first/last based on key pressed
+        if (e.target?.id !== this.parentMenu.contentId.current)
+            return;
+        if (!FIRST_LAST_KEYS.includes(e.key))
+            return;
+        e.preventDefault();
+        if (LAST_KEYS.includes(e.key)) {
+            candidateNodes.reverse();
+        }
+        focusFirst(candidateNodes, () => this.domContext.getActiveElement());
+    }
+    get isTypingAhead() {
+        return this.#typeahead.search !== '';
+    }
+    onblur(e) {
+        if (!isElement(e.currentTarget))
+            return;
+        if (!isElement(e.target))
+            return;
+        // clear search buffer when leaving the menu
+        if (!e.currentTarget.contains?.(e.target))
+            this.#typeahead.reset();
+    }
+    onfocus(_) {
+        if (!this.parentMenu.root.isKeyboard)
+            return;
+        tick().then(() => this.rovingFocusGroup.focusFirstCandidate());
+    }
+    onItemEnter() {
+        return this.#isPointerMovingToSubmenu();
+    }
+    onItemLeave(e) {
+        if (e.currentTarget.hasAttribute(this.parentMenu.root.getBitsAttr('sub-trigger')))
+            return;
+        if (this.#isPointerMovingToSubmenu() || this.parentMenu.root.isKeyboard)
+            return;
+        const contentNode = this.parentMenu.contentNode;
+        contentNode?.focus({ preventScroll: true });
+        this.rovingFocusGroup.setCurrentTabStopId('');
+    }
+    onTriggerLeave() {
+        return this.#isPointerMovingToSubmenu();
+    }
+    handleInteractOutside(e) {
+        if (!isElementOrSVGElement(e.target))
+            return;
+        const triggerId = this.parentMenu.triggerNode?.id;
+        if (e.target.id === triggerId) {
+            e.preventDefault();
+            return;
+        }
+        if (e.target.closest(`#${triggerId}`)) {
+            e.preventDefault();
+            return;
+        }
+        /**
+         * when the menu closes due to an outside pointer interaction (for example,
+         * clicking another dropdown trigger), avoid focusing this menu's trigger
+         * to prevent stealing focus from the new interaction target.
+         */
+        this.parentMenu.root.ignoreCloseAutoFocus = true;
+        tick().then(() => {
+            this.parentMenu.root.ignoreCloseAutoFocus = false;
+        });
+    }
+    snippetProps = $derived.by(() => ({ open: this.parentMenu.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'menu',
+        'aria-orientation': 'vertical',
+        [this.parentMenu.root.getBitsAttr('content')]: '',
+        'data-state': getDataOpenClosed(this.parentMenu.opts.open.current),
+        onkeydown: this.onkeydown,
+        onblur: this.onblur,
+        onfocus: this.onfocus,
+        dir: this.parentMenu.root.opts.dir.current,
+        // no `contain: layout` (upstream had it): layout containment makes this element the
+        // containing block of its fixed sub-content, shrinking the sub's anchor position area
+        // to this box; floating-ui compensated for containing blocks, CSS anchor cannot.
+        style: {
+            pointerEvents: 'auto',
+        },
+        ...this.attachment,
+    }));
+    /**
+     * Inline style for the content element alone — `props.style` also reaches the floating wrapper
+     * through PopperLayer, and hiding the wrapper would cancel the content's exit transition.
+     * Always mounted: closed floating content is visibility:hidden (out of the a11y tree, not
+     * focusable, and transitionable in every engine — see `popup-surface` in ui.css); closed static
+     * content is display:none since it must leave the flow. The `popup-surface` utilities add the
+     * motion; a menubar swap zeroes the exit.
+     */
+    contentStyle = $derived.by(() => {
+        if (this.parentMenu.opts.open.current)
+            return {};
+        return {
+            ...(this.#isStatic ? { display: 'none' } : { visibility: 'hidden' }),
+            ...(this.parentMenu.shouldSkipExitAnimation() ? { transitionDuration: '0s', transitionDelay: '0s' } : {}),
+        };
+    });
+    popperProps = {
+        onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
+    };
+}
+class MenuItemSharedState {
+    opts;
+    content;
+    attachment;
+    #isFocused = $state(false);
+    constructor(opts, content) {
+        this.opts = opts;
+        this.content = content;
+        this.attachment = attachRef(this.opts.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);
+    }
+    onpointermove(e) {
+        if (e.defaultPrevented)
+            return;
+        if (!isMouseEvent(e))
+            return;
+        if (this.opts.disabled.current) {
+            this.content.onItemLeave(e);
+        }
+        else {
+            const defaultPrevented = this.content.onItemEnter();
+            if (defaultPrevented)
+                return;
+            const item = e.currentTarget;
+            if (!isHTMLElement(item))
+                return;
+            item.focus({ preventScroll: true });
+        }
+    }
+    onpointerleave(e) {
+        if (e.defaultPrevented)
+            return;
+        if (!isMouseEvent(e))
+            return;
+        this.content.onItemLeave(e);
+    }
+    onfocus(e) {
+        tick().then(() => {
+            if (e.defaultPrevented || this.opts.disabled.current)
+                return;
+            this.#isFocused = true;
+        });
+    }
+    onblur(e) {
+        tick().then(() => {
+            if (e.defaultPrevented)
+                return;
+            this.#isFocused = false;
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        tabindex: -1,
+        role: 'menuitem',
+        'aria-disabled': boolToStr(this.opts.disabled.current),
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+        'data-highlighted': this.#isFocused ? '' : undefined,
+        [this.content.parentMenu.root.getBitsAttr('item')]: '',
+        //
+        onpointermove: this.onpointermove,
+        onpointerleave: this.onpointerleave,
+        onfocus: this.onfocus,
+        onblur: this.onblur,
+        ...this.attachment,
+    }));
+}
+export class MenuItemState {
+    static create(opts) {
+        const item = new MenuItemSharedState(opts, getMenuContent());
+        return new MenuItemState(opts, item, { closes: true });
+    }
+    opts;
+    item;
+    root;
+    #select;
+    #isPointerDown = false;
+    constructor(opts, item, select) {
+        this.opts = opts;
+        this.item = item;
+        this.root = item.content.parentMenu.root;
+        this.#select = select;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
+    }
+    // The consumer's onSelect runs first; preventDefault only keeps the menu open, the item's own action always runs.
+    #handleSelect() {
+        if (this.item.opts.disabled.current)
+            return;
+        const selectEvent = new CustomEvent('menuitemselect', { bubbles: true, cancelable: true });
+        this.opts.onSelect.current(selectEvent);
+        this.#select.act?.();
+        if (this.#select.closes && !selectEvent.defaultPrevented)
+            this.root.opts.onClose();
+    }
+    onkeydown(e) {
+        const isTypingAhead = this.item.content.isTypingAhead;
+        if (this.item.opts.disabled.current || (isTypingAhead && e.key === kbd.SPACE))
+            return;
+        if (SELECTION_KEYS.includes(e.key)) {
+            if (!isHTMLElement(e.currentTarget))
+                return;
+            e.currentTarget.click();
+            /**
+             * We prevent default browser behavior for selection keys as they should trigger
+             * a selection only:
+             * - prevents space from scrolling the page.
+             * - if keydown causes focus to move, prevents keydown from firing on the new target.
+             */
+            e.preventDefault();
+        }
+    }
+    onclick(_) {
+        if (this.item.opts.disabled.current)
+            return;
+        this.#handleSelect();
+    }
+    // A press that started elsewhere (on the trigger, dragged here) gets its click synthesised; a
+    // press that started here gets the native one. The content stays mounted across openings and
+    // a checkbox item outlives many selects, so the flag resets per press.
+    onpointerup(e) {
+        if (e.defaultPrevented)
+            return;
+        const pressedHere = this.#isPointerDown;
+        this.#isPointerDown = false;
+        if (!pressedHere && isHTMLElement(e.currentTarget))
+            e.currentTarget.click();
+    }
+    onpointerdown(_) {
+        this.#isPointerDown = true;
+    }
+    props = $derived.by(() => mergeProps(this.item.props, {
+        onclick: this.onclick,
+        onpointerdown: this.onpointerdown,
+        onpointerup: this.onpointerup,
+        onkeydown: this.onkeydown,
+    }));
+}
+export class MenuSubTriggerState {
+    static create(opts) {
+        const content = getMenuContent();
+        const item = new MenuItemSharedState(opts, content);
+        const submenu = getMenuMenu();
+        return new MenuSubTriggerState(opts, item, content, submenu);
+    }
+    opts;
+    item;
+    content;
+    submenu;
+    attachment;
+    #openTimer = createEffectTimeout(() => {
+        if (this.submenu.root.isPointerInTransit)
+            return;
+        this.submenu.onOpen();
+    }, () => this.opts.openDelay.current);
+    constructor(opts, item, content, submenu) {
+        this.opts = opts;
+        this.item = item;
+        this.content = content;
+        this.submenu = submenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.submenu.triggerNode = v));
+        this.onpointerleave = this.onpointerleave.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
+    }
+    onpointermove(e) {
+        if (!isMouseEvent(e))
+            return;
+        if (this.submenu.root.isPointerInTransit) {
+            this.#openTimer.stop();
+            return;
+        }
+        if (!this.item.opts.disabled.current && !this.submenu.opts.open.current && !this.#openTimer.pending) {
+            if (this.opts.openDelay.current <= 0) {
+                this.submenu.onOpen();
+                return;
+            }
+            this.#openTimer.start();
+        }
+    }
+    onpointerleave(e) {
+        if (!isMouseEvent(e))
+            return;
+        this.#openTimer.stop();
+    }
+    onkeydown(e) {
+        const isTypingAhead = this.content.isTypingAhead;
+        if (this.item.opts.disabled.current || (isTypingAhead && e.key === kbd.SPACE))
+            return;
+        if (SUB_OPEN_KEYS[this.submenu.root.opts.dir.current].includes(e.key)) {
+            e.currentTarget.click();
+            e.preventDefault();
+        }
+    }
+    onclick(e) {
+        if (this.item.opts.disabled.current)
+            return;
+        /**
+         * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
+         * and we rely heavily on `onFocusOutside` for submenus to close when switching
+         * between separate submenus.
+         */
+        if (!isHTMLElement(e.currentTarget))
+            return;
+        e.currentTarget.focus();
+        const selectEvent = new CustomEvent('menusubtriggerselect', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this.opts.onSelect.current(selectEvent);
+        if (!this.submenu.opts.open.current) {
+            this.submenu.onOpen();
+            tick().then(() => {
+                if (!this.submenu.contentNode)
+                    return;
+                this.submenu.focusFirstItem?.();
+            });
+        }
+    }
+    props = $derived.by(() => mergeProps({
+        'aria-haspopup': 'menu',
+        'aria-expanded': boolToStr(this.submenu.opts.open.current),
+        'data-state': getDataOpenClosed(this.submenu.opts.open.current),
+        'aria-controls': this.submenu.opts.open.current ? this.submenu.contentId.current : undefined,
+        [this.submenu.root.getBitsAttr('sub-trigger')]: '',
+        onclick: this.onclick,
+        onpointermove: this.onpointermove,
+        onpointerleave: this.onpointerleave,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }, this.item.props));
+}
+export class MenuCheckboxItemState {
+    static create(opts) {
+        return new MenuCheckboxItemState(opts, new MenuItemSharedState(opts, getMenuContent()));
+    }
+    opts;
+    item;
+    groupChecked;
+    constructor(opts, shared) {
+        this.opts = opts;
+        this.item = new MenuItemState(opts, shared, { closes: false, act: () => this.#toggle() });
+        // Accessor views over the boxed options until the menu engine converts.
+        const group = hasMenuCheckboxGroup() ? getMenuCheckboxGroup() : null;
+        this.groupChecked = joinGroup(group && {
+            get value() {
+                return group.opts.value.current;
+            },
+            set value(v) {
+                group.opts.value.current = v;
+            },
+        }, {
+            get value() {
+                return opts.value.current;
+            },
+            get checked() {
+                return opts.checked.current;
+            },
+        });
+    }
+    #toggle() {
+        if (this.opts.indeterminate.current) {
+            this.opts.indeterminate.current = false;
+            this.opts.checked.current = true;
+        }
+        else {
+            this.opts.checked.current = !this.opts.checked.current;
+        }
+    }
+    snippetProps = $derived.by(() => ({
+        checked: this.opts.checked.current,
+        indeterminate: this.opts.indeterminate.current,
+    }));
+    props = $derived.by(() => ({
+        ...this.item.props,
+        role: 'menuitemcheckbox',
+        'aria-checked': getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
+        'data-state': getCheckedState(this.opts.checked.current),
+        [this.item.root.getBitsAttr('checkbox-item')]: '',
+    }));
+}
+export class MenuGroupState {
+    static create(opts) {
+        return setMenuGroup(new MenuGroupState(opts, getMenuRoot()));
+    }
+    opts;
+    root;
+    attachment;
+    groupHeadingId = $state(undefined);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'group',
+        'aria-labelledby': this.groupHeadingId,
+        [this.root.getBitsAttr('group')]: '',
+        ...this.attachment,
+    }));
+}
+export class MenuGroupHeadingState {
+    static create(opts) {
+        return new MenuGroupHeadingState(opts, getMenuGroup());
+    }
+    opts;
+    group;
+    attachment;
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id));
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'group',
+        [this.group.root.getBitsAttr('group-heading')]: '',
+        ...this.attachment,
+    }));
+}
+export class MenuSeparatorState {
+    static create(opts) {
+        return new MenuSeparatorState(opts, getMenuRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'group',
+        [this.root.getBitsAttr('separator')]: '',
+        ...this.attachment,
+    }));
+}
+export class MenuArrowState {
+    static create() {
+        return new MenuArrowState(getMenuRoot());
+    }
+    root;
+    constructor(root) {
+        this.root = root;
+    }
+    props = $derived.by(() => ({
+        [this.root.getBitsAttr('arrow')]: '',
+    }));
+}
+export class MenuRadioGroupState {
+    static create(opts) {
+        return setMenuGroup(setMenuRadioGroup(new MenuRadioGroupState(opts, getMenuContent())));
+    }
+    opts;
+    content;
+    attachment;
+    groupHeadingId = $state(null);
+    root;
+    constructor(opts, content) {
+        this.opts = opts;
+        this.content = content;
+        this.root = content.parentMenu.root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    setValue(v) {
+        if (this.opts.value.current === v)
+            return;
+        this.opts.value.current = v;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr('radio-group')]: '',
+        role: 'group',
+        'aria-labelledby': this.groupHeadingId,
+        ...this.attachment,
+    }));
+}
+export class MenuRadioItemState {
+    static create(opts) {
+        return new MenuRadioItemState(opts, getMenuRadioGroup());
+    }
+    opts;
+    item;
+    group;
+    isChecked = $derived.by(() => this.group.opts.value.current === this.opts.value.current);
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.item = new MenuItemState(opts, new MenuItemSharedState(opts, group.content), {
+            closes: true,
+            act: () => group.setValue(opts.value.current),
+        });
+    }
+    props = $derived.by(() => ({
+        [this.group.root.getBitsAttr('radio-item')]: '',
+        ...this.item.props,
+        role: 'menuitemradio',
+        'aria-checked': getAriaChecked(this.isChecked, false),
+        'data-state': getCheckedState(this.isChecked),
+    }));
+}
+export class DropdownMenuTriggerState {
+    static create(opts) {
+        return new DropdownMenuTriggerState(opts, getMenuMenu());
+    }
+    opts;
+    parentMenu;
+    attachment;
+    constructor(opts, parentMenu) {
+        this.opts = opts;
+        this.parentMenu = parentMenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
+    }
+    onclick = (e) => {
+        /**
+         * MacOS VoiceOver sends a click in Safari/Firefox bypassing the keydown event
+         * when V0+Space is pressed. Since we already handle the keydown event and the
+         * pointerdown events separately, we ignore it if the detail is not 0.
+         */
+        if (this.opts.disabled.current || e.detail !== 0)
+            return;
+        this.parentMenu.toggleOpen();
+        e.preventDefault();
+    };
+    onpointerdown = (e) => {
+        if (this.opts.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.opts.open.current)
+                e.preventDefault();
+        }
+    };
+    onpointerup = (e) => {
+        if (this.opts.disabled.current)
+            return;
+        if (e.pointerType === 'touch') {
+            e.preventDefault();
+            this.parentMenu.toggleOpen();
+        }
+    };
+    onkeydown = (e) => {
+        if (this.opts.disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            this.parentMenu.toggleOpen();
+            e.preventDefault();
+            return;
+        }
+        if (e.key === kbd.ARROW_DOWN) {
+            this.parentMenu.onOpen();
+            e.preventDefault();
+        }
+    };
+    #ariaControls = $derived.by(() => {
+        if (this.parentMenu.opts.open.current && this.parentMenu.contentId.current)
+            return this.parentMenu.contentId.current;
+        return undefined;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        disabled: this.opts.disabled.current,
+        'aria-haspopup': 'menu',
+        'aria-expanded': boolToStr(this.parentMenu.opts.open.current),
+        'aria-controls': this.#ariaControls,
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+        'data-state': getDataOpenClosed(this.parentMenu.opts.open.current),
+        [this.parentMenu.root.getBitsAttr('trigger')]: '',
+        //
+        onclick: this.onclick,
+        onpointerdown: this.onpointerdown,
+        onpointerup: this.onpointerup,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class ContextMenuTriggerState {
+    static create(opts) {
+        return new ContextMenuTriggerState(opts, getMenuMenu());
+    }
+    opts;
+    parentMenu;
+    attachment;
+    #point = $state.raw({ x: 0, y: 0 });
+    // One stable Measurable: readers that measure inside a derived track `#point` through it.
+    virtualElement = {
+        getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
+    };
+    #longPressTimer = createEffectTimeout((e) => this.#handleOpen(e), () => 700);
+    constructor(opts, parentMenu) {
+        this.opts = opts;
+        this.parentMenu = parentMenu;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.parentMenu.triggerNode = v));
+        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);
+        $effect(() => {
+            const isDisabled = this.opts.disabled.current;
+            untrack(() => {
+                if (isDisabled) {
+                    this.#longPressTimer.stop();
+                }
+            });
+        });
+    }
+    #handleOpen(e) {
+        this.#point = { x: e.clientX, y: e.clientY };
+        this.parentMenu.onOpen();
+    }
+    oncontextmenu(e) {
+        if (e.defaultPrevented || this.opts.disabled.current)
+            return;
+        this.#longPressTimer.stop();
+        this.#handleOpen(e);
+        e.preventDefault();
+        this.parentMenu.contentNode?.focus();
+    }
+    onpointerdown(e) {
+        if (this.opts.disabled.current || isMouseEvent(e))
+            return;
+        this.#longPressTimer.start(e);
+    }
+    onpointermove(e) {
+        if (this.opts.disabled.current || isMouseEvent(e))
+            return;
+        this.#longPressTimer.stop();
+    }
+    onpointercancel(e) {
+        if (this.opts.disabled.current || isMouseEvent(e))
+            return;
+        this.#longPressTimer.stop();
+    }
+    onpointerup(e) {
+        if (this.opts.disabled.current || isMouseEvent(e))
+            return;
+        this.#longPressTimer.stop();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        disabled: this.opts.disabled.current,
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+        'data-state': getDataOpenClosed(this.parentMenu.opts.open.current),
+        [CONTEXT_MENU_TRIGGER_ATTR]: '',
+        tabindex: -1,
+        onpointerdown: this.onpointerdown,
+        onpointermove: this.onpointermove,
+        onpointercancel: this.onpointercancel,
+        onpointerup: this.onpointerup,
+        oncontextmenu: this.oncontextmenu,
+        ...this.attachment,
+    }));
+}
+export class MenuCheckboxGroupState {
+    static create(opts) {
+        return setMenuGroup(setMenuCheckboxGroup(new MenuCheckboxGroupState(opts, getMenuContent())));
+    }
+    opts;
+    content;
+    root;
+    attachment;
+    groupHeadingId = $state(null);
+    constructor(opts, content) {
+        this.opts = opts;
+        this.content = content;
+        this.root = content.parentMenu.root;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getBitsAttr('checkbox-group')]: '',
+        role: 'group',
+        'aria-labelledby': this.groupHeadingId,
+        ...this.attachment,
+    }));
+}
+export class MenuSubmenuState {
+    static create(opts) {
+        const menu = getMenuMenu();
+        return setMenuMenu(new MenuMenuState(opts, menu.root, menu));
+    }
+}