@stevederico/skateboard-ui 4.0.0 → 4.3.0

package/dist/ui/dialog.js

@@ -6,6 +6,8 @@ import { Button } from "./button.js";
 import { Slot, resolveRender } from "./slot.js";
 import { XIcon } from "../icons/index.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useDialogLabelling } from "./use-labelling.js";
+import { useScrollLock } from "./use-scroll-lock.js";
 const DialogContext = React.createContext(null);
 function useDialog() {
     const ctx = React.useContext(DialogContext);
@@ -24,9 +26,10 @@ function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const titleId = React.useId();
-    const descriptionId = React.useId();
-    return (_jsx(DialogContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+    // Track which labelling parts actually render so DialogContent can reference
+    // them only when present, avoiding a dangling aria-labelledby/-describedby IDREF.
+    const labelling = useDialogLabelling();
+    return (_jsx(DialogContext.Provider, { value: { open: isOpen, setOpen, ...labelling }, children: children }));
 }
 function DialogTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen } = useDialog();
@@ -57,7 +60,7 @@ function DialogOverlay() {
     return null;
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    const { open, setOpen, titleId, descriptionId } = useDialog();
+    const { open, setOpen, labelledBy, describedBy } = useDialog();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
     React.useEffect(() => {
@@ -69,17 +72,11 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
         else if (!open && node.open)
             node.close();
     }, [open]);
-    // Lock background scroll while open.
-    React.useEffect(() => {
-        if (!open)
-            return;
-        const prev = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = prev;
-        };
-    }, [open]);
-    return (_jsx("dialog", { ref: ref, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+    // Reentrant, reference-counted scroll lock so stacked overlays don't clobber
+    // each other's overflow restore (an inner close would otherwise unlock scroll
+    // while an outer dialog is still open).
+    useScrollLock(open);
+    return (_jsx("dialog", { ref: ref, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "data-slot": "dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onPointerDown: (e) => {
@@ -99,11 +96,15 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
     return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }))] }));
 }
 function DialogTitle({ className, ...props }) {
-    const { titleId } = useDialog();
+    const { titleId, registerTitle } = useDialog();
+    // Register presence so the container wires aria-labelledby only when a title exists.
+    React.useEffect(registerTitle, [registerTitle]);
     return (_jsx("h2", { id: titleId, "data-slot": "dialog-title", className: cn("leading-none font-medium", className), ...props }));
 }
 function DialogDescription({ className, ...props }) {
-    const { descriptionId } = useDialog();
+    const { descriptionId, registerDescription } = useDialog();
+    // Register presence so the container wires aria-describedby only when a description exists.
+    React.useEffect(registerDescription, [registerDescription]);
     return (_jsx("p", { id: descriptionId, "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
 }
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/ui/drawer.js

@@ -2,9 +2,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
-import { Slot, resolveRender } from "./slot.js";
+import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useDialogLabelling } from "./use-labelling.js";
 import { usePresence } from "./use-presence.js";
+import { useScrollLock } from "./use-scroll-lock.js";
 // Drag thresholds and animation timing ported from vaul (MIT — Emil Kowalski).
 // https://github.com/emilkowalski/vaul/blob/main/src/constants.ts
 const VELOCITY_THRESHOLD = 0.4;
@@ -51,9 +53,17 @@ function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const titleId = React.useId();
-    const descriptionId = React.useId();
-    return (_jsx(DrawerContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+    const { titleId, descriptionId, registerTitle, registerDescription, labelledBy, describedBy } = useDialogLabelling();
+    return (_jsx(DrawerContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            titleId,
+            descriptionId,
+            registerTitle,
+            registerDescription,
+            labelledBy,
+            describedBy,
+        }, children: children }));
 }
 function DrawerTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen } = useDrawer();
@@ -84,11 +94,16 @@ function DrawerOverlay() {
     return null;
 }
 function DrawerContent({ className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
-    const { open, setOpen, titleId, descriptionId } = useDrawer();
+    const { open, setOpen, labelledBy, describedBy } = useDrawer();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
-    const [mounted] = usePresence(open);
+    const [mounted, presenceRef] = usePresence(open);
     const dragState = React.useRef({ dragging: false, startY: 0, height: 0, startTime: 0 });
+    // A drag-dismiss already slides the panel out via an inline transform, so the
+    // CSS `animate-out` slide must be suppressed for that path — otherwise its
+    // keyframes would override the transform and snap the panel back into view.
+    // Programmatic closes (backdrop, Escape, controlled) keep the CSS animation.
+    const dismissingByDrag = React.useRef(false);
     React.useEffect(() => {
         const node = ref.current;
         if (!node)
@@ -98,20 +113,17 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
         else if (!mounted && node.open)
             node.close();
     }, [mounted]);
-    React.useEffect(() => {
-        if (!mounted)
-            return;
-        const prev = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = prev;
-        };
-    }, [mounted]);
+    // Reentrant, reference-counted body scroll lock: when drawers stack with other
+    // overlays, the inline overflow effect would let an inner overlay's cleanup
+    // unlock scroll while an outer overlay is still open. useScrollLock shares one
+    // lock so only the last overlay to close restores the original overflow.
+    useScrollLock(mounted);
     // Clear any drag-leftover inline transform whenever we (re)open.
     React.useEffect(() => {
         if (open && ref.current) {
             ref.current.style.transition = "";
             ref.current.style.transform = "";
+            dismissingByDrag.current = false;
         }
     }, [open]);
     const snapBack = React.useCallback(() => {
@@ -127,6 +139,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
             setOpen(false);
             return;
         }
+        dismissingByDrag.current = true;
         el.style.transition = TRANSITION;
         el.style.transform = "translate3d(0, 100%, 0)";
         window.setTimeout(() => setOpen(false), 500);
@@ -200,7 +213,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
     };
     if (!mounted)
         return null;
-    return (_jsxs("dialog", { ...props, ref: ref, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "drawer-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), "aria-labelledby": labelledBy, "aria-describedby": describedBy, "data-slot": "drawer-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onClick: (e) => {
@@ -215,7 +228,9 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
         // sizing so the drawer pins to the bottom edge at full width.
         "fixed inset-x-0 top-auto bottom-0 z-50 m-0 flex max-h-[80vh] w-full max-w-none touch-none flex-col rounded-t-xl border-t border-border bg-background p-0 text-sm outline-none backdrop:bg-black/10 backdrop:transition-opacity backdrop:duration-250 supports-backdrop-filter:backdrop:backdrop-blur-xs", open
             ? "animate-in fade-in-0 slide-in-from-bottom-52 duration-300"
-            : "animate-out fade-out-0 slide-out-to-bottom-52 duration-300", className), children: [_jsx("div", { className: "mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full bg-muted" }), children] }));
+            : dismissingByDrag.current
+                ? ""
+                : "animate-out fade-out-0 slide-out-to-bottom-52 duration-300", className), children: [_jsx("div", { className: "mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full bg-muted" }), children] }));
 }
 function DrawerHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left", className), ...props }));
@@ -224,11 +239,17 @@ function DrawerFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
 }
 function DrawerTitle({ className, ...props }) {
-    const { titleId } = useDrawer();
+    const { titleId, registerTitle } = useDrawer();
+    // Register on mount so the container knows a title exists and can wire
+    // aria-labelledby; the returned cleanup unregisters on unmount.
+    React.useEffect(registerTitle, [registerTitle]);
     return (_jsx("h2", { id: titleId, "data-slot": "drawer-title", className: cn("font-medium text-foreground", className), ...props }));
 }
 function DrawerDescription({ className, ...props }) {
-    const { descriptionId } = useDrawer();
+    const { descriptionId, registerDescription } = useDrawer();
+    // Register on mount so the container knows a description exists and can wire
+    // aria-describedby; the returned cleanup unregisters on unmount.
+    React.useEffect(registerDescription, [registerDescription]);
     return (_jsx("p", { id: descriptionId, "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
 }
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/ui/dropdown-menu.js

@@ -7,6 +7,8 @@ import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { usePointerMoved } from "./use-pointer-moved.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -42,17 +44,20 @@ function DropdownMenu({ open, defaultOpen = false, onOpenChange, children, }) {
     });
     const triggerRef = React.useRef(null);
     const contentId = React.useId();
+    const triggerId = React.useId();
     const layers = React.useRef(new Set());
-    return (_jsx(MenuContext.Provider, { value: { open: isOpen, setOpen, triggerRef, contentId, layers }, children: children }));
+    return (_jsx(MenuContext.Provider, { value: { open: isOpen, setOpen, triggerRef, contentId, triggerId, layers }, children: children }));
 }
 function DropdownMenuPortal({ children }) {
     return _jsx(_Fragment, { children: children });
 }
 function DropdownMenuTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, onKeyDown, ...props }) {
-    const { open, setOpen, triggerRef, contentId } = useMenu();
+    const { open, setOpen, triggerRef, contentId, triggerId } = useMenu();
     const { useSlot, slotChild } = resolveRender(asChild, render, children);
     const Comp = useSlot ? Slot : "button";
-    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", "data-slot": "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
+    // Give the trigger a stable id so the menu can name itself via aria-labelledby.
+    // Honor a consumer-supplied id when present so we don't clobber their wiring.
+    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", id: props.id ?? triggerId, "data-slot": "dropdown-menu-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(!open);
@@ -67,7 +72,7 @@ function DropdownMenuTrigger({ asChild = false, render, nativeButton: _nativeBut
         }, ...props, children: slotChild }));
 }
 function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, children, onKeyDown, ...props }) {
-    const { open, setOpen, triggerRef, contentId, layers } = useMenu();
+    const { open, setOpen, triggerRef, contentId, triggerId, layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -76,6 +81,8 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
         alignOffset,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -126,13 +133,18 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
     }, [open, setOpen, triggerRef, layers]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "menu", "aria-orientation": "vertical", tabIndex: -1, "data-slot": "dropdown-menu-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "menu", "aria-labelledby": triggerRef.current?.id ?? triggerId, "aria-orientation": "vertical", tabIndex: -1, "data-slot": "dropdown-menu-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
                 position: "fixed",
                 left: pos?.x ?? 0,
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
+                ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
             }, onPointerMove: (e) => {
+                // Ignore synthetic pointermoves fired when keyboard nav scrolls the list
+                // under a stationary pointer — they'd yank focus off the keyboard target.
+                if (!hasPointerMoved(e))
+                    return;
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
                     item.focus();
@@ -164,6 +176,16 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                         active.click();
                     }
                 }
+                else {
+                    // WAI-ARIA typeahead: printable chars jump to the matching item.
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function DropdownMenuGroup({ className, ...props }) {
@@ -173,8 +195,11 @@ function DropdownMenuLabel({ className, inset, ...props }) {
     return (_jsx("div", { "data-slot": "dropdown-menu-label", "data-inset": inset ? "" : undefined, className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className), ...props }));
 }
 function DropdownMenuItem({ className, inset, variant = "default", disabled, onSelect, onClick, ...props }) {
-    const { setOpen } = useMenu();
-    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/dropdown-menu-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), onClick: (e) => {
+    const { setOpen, triggerRef } = useMenu();
+    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn(
+        // focus-visible ring: focus:bg-accent alone is ~1.12:1 against the popover
+        // bg (below WCAG 3:1), so add a keyboard-only ring for a visible focus target.
+        "group/dropdown-menu-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -182,11 +207,16 @@ function DropdownMenuItem({ className, inset, variant = "default", disabled, onS
                 return;
             onSelect?.();
             setOpen(false);
+            // Selecting a plain item closes the menu; without this, focus is left on
+            // <body> instead of returning to the trigger (Escape already restores it).
+            triggerRef.current?.focus();
         }, ...props }));
 }
 const RadioGroupContext = React.createContext({});
 function DropdownMenuCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }) {
-    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn(
+        // focus-visible ring: keyboard-only focus target (focus:bg-accent is below WCAG 3:1).
+        "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -200,7 +230,9 @@ function DropdownMenuRadioGroup({ value, onValueChange, ...props }) {
 function DropdownMenuRadioItem({ className, children, value, disabled, inset, onClick, ...props }) {
     const { value: groupValue, onValueChange } = React.useContext(RadioGroupContext);
     const checked = groupValue === value;
-    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "dropdown-menu-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn(
+        // focus-visible ring: keyboard-only focus target (focus:bg-accent is below WCAG 3:1).
+        "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -224,11 +256,14 @@ function useSub() {
 function DropdownMenuSub({ defaultOpen = false, children, }) {
     const [open, setOpen] = React.useState(defaultOpen);
     const triggerRef = React.useRef(null);
-    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef }, children: children }));
+    const subContentId = React.useId();
+    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef, subContentId }, children: children }));
 }
 function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }) {
-    const { open, setOpen, triggerRef } = useSub();
-    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn("flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
+    const { open, setOpen, triggerRef, subContentId } = useSub();
+    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? subContentId : undefined, "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn(
+        // focus-visible ring: keyboard-only focus target (focus:bg-accent is below WCAG 3:1).
+        "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
             onMouseEnter?.(e);
             setOpen(true);
         }, onClick: (e) => {
@@ -246,7 +281,7 @@ function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown
         }, ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
 function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
-    const { open, setOpen, triggerRef } = useSub();
+    const { open, setOpen, triggerRef, subContentId } = useSub();
     const { layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
@@ -256,6 +291,8 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
         alignOffset: -3,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -287,13 +324,20 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
     }, [open]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), role: "menu", tabIndex: -1, "data-slot": "dropdown-menu-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), 
+            // id matches the sub-trigger's aria-controls so AT can follow the
+            // disclosure relationship from the trigger to this open submenu panel.
+            id: subContentId, role: "menu", tabIndex: -1, "data-slot": "dropdown-menu-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
                 position: "fixed",
                 left: pos?.x ?? 0,
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
             }, onPointerMove: (e) => {
+                // Ignore synthetic pointermoves fired when keyboard nav scrolls the list
+                // under a stationary pointer — they'd yank focus off the keyboard target.
+                if (!hasPointerMoved(e))
+                    return;
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
                     item.focus();
@@ -318,6 +362,16 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
                         active.click();
                     }
                 }
+                else {
+                    // WAI-ARIA typeahead: printable chars jump to the matching item.
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/menubar.js

@@ -6,6 +6,8 @@ import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { usePointerMoved } from "./use-pointer-moved.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenubarRootContext = React.createContext(null);
 function useMenubarRoot() {
@@ -51,6 +53,7 @@ function MenubarMenu({ value: valueProp, children, }) {
     const value = valueProp ?? generatedId;
     const triggerRef = React.useRef(null);
     const contentId = React.useId();
+    const triggerId = React.useId();
     const layers = React.useRef(new Set());
     const open = root.value === value;
     const setOpen = React.useCallback((next) => {
@@ -64,7 +67,7 @@ function MenubarMenu({ value: valueProp, children, }) {
             root.setActive(false);
         }
     }, [root, value]);
-    return (_jsx(MenuContext.Provider, { value: { value, open, setOpen, triggerRef, contentId, layers }, children: children }));
+    return (_jsx(MenuContext.Provider, { value: { value, open, setOpen, triggerRef, contentId, triggerId, layers }, children: children }));
 }
 function MenubarPortal({ children }) {
     return _jsx(_Fragment, { children: children });
@@ -74,10 +77,13 @@ function MenubarGroup({ className, ...props }) {
 }
 function MenubarTrigger({ asChild = false, render, nativeButton: _nativeButton, children, className, onClick, onKeyDown, onMouseEnter, ...props }) {
     const root = useMenubarRoot();
-    const { value, open, setOpen, triggerRef, contentId } = useMenu();
+    const { value, open, setOpen, triggerRef, contentId, triggerId } = useMenu();
     const { useSlot, slotChild } = resolveRender(asChild, render, children);
     const Comp = useSlot ? Slot : "button";
-    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", "data-slot": "menubar-trigger", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", className: cn("cursor-pointer flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className), onClick: (e) => {
+    return (_jsx(Comp, { ref: triggerRef, type: useSlot ? undefined : "button", "data-slot": "menubar-trigger", 
+        // a11y: give the trigger a stable id so its menu can reference it via
+        // aria-labelledby; a consumer-supplied id in ...props overrides this.
+        id: triggerId, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", className: cn("cursor-pointer flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className), onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(!open);
@@ -116,7 +122,7 @@ function MenubarTrigger({ asChild = false, render, nativeButton: _nativeButton,
 }
 function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", sideOffset = 8, className, children, onKeyDown, ...props }) {
     const root = useMenubarRoot();
-    const { open, setOpen, triggerRef, contentId, layers } = useMenu();
+    const { open, setOpen, triggerRef, contentId, triggerId, layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -125,6 +131,8 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
         alignOffset,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -175,13 +183,18 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
     }, [open, setOpen, triggerRef, layers]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "menu", "aria-orientation": "vertical", tabIndex: -1, "data-slot": "menubar-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "menu", "aria-labelledby": triggerRef.current?.id ?? triggerId, "aria-orientation": "vertical", tabIndex: -1, "data-slot": "menubar-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
                 position: "fixed",
                 left: pos?.x ?? 0,
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
             }, onPointerMove: (e) => {
+                // a11y: ignore synthetic pointermove events fired when keyboard nav
+                // scrolls the focused item into view — those report unchanged
+                // coordinates and would otherwise steal focus from the keyboard target.
+                if (!hasPointerMoved(e))
+                    return;
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
                     item.focus();
@@ -228,14 +241,25 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
                         active.click();
                     }
                 }
+                else {
+                    // Printable-character typeahead: jump to the menu item whose label
+                    // matches the typed buffer (WAI-ARIA menu pattern).
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function MenubarLabel({ className, inset, ...props }) {
     return (_jsx("div", { "data-slot": "menubar-label", "data-inset": inset ? "" : undefined, className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className), ...props }));
 }
 function MenubarItem({ className, inset, variant = "default", disabled, onSelect, onClick, ...props }) {
-    const { setOpen } = useMenu();
-    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "menubar-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/menubar-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), onClick: (e) => {
+    const { setOpen, triggerRef } = useMenu();
+    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "menubar-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/menubar-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -243,11 +267,15 @@ function MenubarItem({ className, inset, variant = "default", disabled, onSelect
                 return;
             onSelect?.();
             setOpen(false);
+            // a11y: selecting an item closes the menu, which would otherwise drop
+            // focus to <body>; restore it to the trigger so keyboard users keep
+            // their place in the bar.
+            triggerRef.current?.focus();
         }, ...props }));
 }
 const RadioGroupContext = React.createContext({});
 function MenubarCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }) {
-    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "menubar-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "menubar-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -261,7 +289,7 @@ function MenubarRadioGroup({ value, onValueChange, ...props }) {
 function MenubarRadioItem({ className, children, value, disabled, inset, onClick, ...props }) {
     const { value: groupValue, onValueChange } = React.useContext(RadioGroupContext);
     const checked = groupValue === value;
-    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "menubar-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "menubar-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -285,11 +313,12 @@ function useSub() {
 function MenubarSub({ defaultOpen = false, children, }) {
     const [open, setOpen] = React.useState(defaultOpen);
     const triggerRef = React.useRef(null);
-    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef }, children: children }));
+    const subContentId = React.useId();
+    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef, subContentId }, children: children }));
 }
 function MenubarSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }) {
-    const { open, setOpen, triggerRef } = useSub();
-    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "data-slot": "menubar-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn("flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
+    const { open, setOpen, triggerRef, subContentId } = useSub();
+    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? subContentId : undefined, "data-slot": "menubar-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn("flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
             onMouseEnter?.(e);
             setOpen(true);
         }, onClick: (e) => {
@@ -307,7 +336,7 @@ function MenubarSubTrigger({ className, inset, children, onClick, onKeyDown, onM
         }, ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
 function MenubarSubContent({ className, children, onKeyDown, ...props }) {
-    const { open, setOpen, triggerRef } = useSub();
+    const { open, setOpen, triggerRef, subContentId } = useSub();
     const { layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
@@ -317,6 +346,7 @@ function MenubarSubContent({ className, children, onKeyDown, ...props }) {
         alignOffset: -3,
     });
     const containerRef = React.useRef(null);
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -348,13 +378,17 @@ function MenubarSubContent({ className, children, onKeyDown, ...props }) {
     }, [open]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), role: "menu", tabIndex: -1, "data-slot": "menubar-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: subContentId, role: "menu", tabIndex: -1, "data-slot": "menubar-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
                 position: "fixed",
                 left: pos?.x ?? 0,
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
             }, onPointerMove: (e) => {
+                // Ignore synthetic same-coordinate pointermoves (from keyboard-nav
+                // scroll) so they don't steal focus off the keyboard target.
+                if (!hasPointerMoved(e))
+                    return;
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
                     item.focus();

package/dist/ui/navigation-menu.d.ts

@@ -5,8 +5,8 @@ declare function NavigationMenuItem({ className, ...props }: React.ComponentProp
 declare const navigationMenuTriggerStyle: (props?: import("../shadcn/lib/cva.js").CvaProps<{
     [x: string]: Record<string, string>;
 }> | undefined) => string;
-declare function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onClick, ...props }: React.ComponentProps<"button">): React.JSX.Element;
-declare function NavigationMenuContent({ className, children, onMouseEnter, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+declare function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onClick, onKeyDown, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function NavigationMenuContent({ className, children, onMouseEnter, onKeyDown, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
 declare function NavigationMenuLink({ className, active, ...props }: React.ComponentProps<"a"> & {
     active?: boolean;
 }): React.JSX.Element;