@stevederico/skateboard-ui 4.1.0 → 4.5.0

package/dist/ui/drawer.js

@@ -4,7 +4,9 @@ import * as React from "react";
 import { cn } from "../shadcn/lib/utils.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,7 +94,7 @@ 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, presenceRef] = usePresence(open);
@@ -103,15 +113,11 @@ 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) {
@@ -207,7 +213,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
     };
     if (!mounted)
         return null;
-    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), "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) => {
@@ -233,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

@@ -8,6 +8,7 @@ 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() {
@@ -43,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);
@@ -68,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,
@@ -78,6 +82,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
     });
     const containerRef = React.useRef(null);
     const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -128,7 +133,7 @@ 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,
@@ -136,6 +141,10 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                 ["--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();
@@ -186,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);
@@ -195,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);
@@ -213,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);
@@ -237,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) => {
@@ -259,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, {
@@ -270,6 +292,7 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
     });
     const containerRef = React.useRef(null);
     const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -301,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();

package/dist/ui/menubar.js

@@ -7,6 +7,7 @@ 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() {
@@ -52,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) => {
@@ -65,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 });
@@ -75,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);
@@ -117,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,
@@ -127,6 +132,7 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
     });
     const containerRef = React.useRef(null);
     const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -177,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();
@@ -247,8 +258,8 @@ 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);
@@ -256,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);
@@ -274,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);
@@ -298,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) => {
@@ -320,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, {
@@ -330,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)
@@ -361,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/popover.js

@@ -8,6 +8,7 @@ import { useFloating } from "./use-floating.js";
 import { useDismiss } from "./use-dismiss.js";
 import { usePresence } from "./use-presence.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useDialogLabelling } from "./use-labelling.js";
 const PopoverContext = React.createContext(null);
 function usePopover() {
     const ctx = React.useContext(PopoverContext);
@@ -23,7 +24,19 @@ function Popover({ open, defaultOpen = false, onOpenChange, children }) {
     });
     const triggerRef = React.useRef(null);
     const contentId = React.useId();
-    return (_jsx(PopoverContext.Provider, { value: { open: isOpen, setOpen, triggerRef, contentId }, children: children }));
+    const labelling = useDialogLabelling();
+    return (_jsx(PopoverContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            triggerRef,
+            contentId,
+            titleId: labelling.titleId,
+            descriptionId: labelling.descriptionId,
+            registerTitle: labelling.registerTitle,
+            registerDescription: labelling.registerDescription,
+            labelledBy: labelling.labelledBy,
+            describedBy: labelling.describedBy,
+        }, children: children }));
 }
 function PopoverTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen, triggerRef, contentId } = usePopover();
@@ -38,7 +51,7 @@ function PopoverTrigger({ asChild = false, render, nativeButton: _nativeButton,
 // Tabbable descendants, in DOM order, for focus-in and the Tab trap.
 const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function PopoverContent({ className, style, ref, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, onKeyDown, ...props }) {
-    const { open, setOpen, triggerRef, contentId } = usePopover();
+    const { open, setOpen, triggerRef, contentId, labelledBy, describedBy } = usePopover();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -81,7 +94,7 @@ function PopoverContent({ className, style, ref, align = "center", alignOffset =
     }, [open, triggerRef]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, contentRef, ref), id: contentId, role: "dialog", tabIndex: -1, "data-slot": "popover-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, onKeyDown: (e) => {
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, contentRef, ref), id: contentId, role: "dialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy, tabIndex: -1, "data-slot": "popover-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, onKeyDown: (e) => {
                 onKeyDown?.(e);
                 if (e.defaultPrevented || e.key !== "Tab")
                     return;
@@ -118,9 +131,15 @@ function PopoverHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
 }
 function PopoverTitle({ className, ...props }) {
-    return (_jsx("h2", { "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
+    // Register this title's id so PopoverContent can point aria-labelledby at it.
+    const { titleId, registerTitle } = usePopover();
+    React.useEffect(registerTitle, [registerTitle]);
+    return (_jsx("h2", { id: titleId, "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
 }
 function PopoverDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
+    // Register this description's id so PopoverContent can point aria-describedby at it.
+    const { descriptionId, registerDescription } = usePopover();
+    React.useEffect(registerDescription, [registerDescription]);
+    return (_jsx("p", { id: descriptionId, "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
 }
 export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/ui/select.d.ts

@@ -14,7 +14,7 @@ declare function SelectGroup({ className, ...props }: React.ComponentProps<"div"
 declare function SelectValue({ className, placeholder, ...props }: React.ComponentProps<"span"> & {
     placeholder?: React.ReactNode;
 }): React.JSX.Element;
-declare function SelectTrigger({ className, size, children, onClick, onKeyDown, ...props }: React.ComponentProps<"button"> & {
+declare function SelectTrigger({ className, size, children, id, onClick, onKeyDown, ...props }: React.ComponentProps<"button"> & {
     size?: "sm" | "default";
 }): React.JSX.Element;
 export interface SelectContentProps extends React.ComponentProps<"div"> {

package/dist/ui/select.js

@@ -8,6 +8,7 @@ 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 { ChevronDownIcon, CheckIcon } from "../icons/index.js";
 const SelectContext = React.createContext(null);
 function useSelect() {
@@ -29,6 +30,7 @@ function Select({ value, defaultValue, onValueChange, open, defaultOpen = false,
     });
     const triggerRef = React.useRef(null);
     const contentId = React.useId();
+    const triggerId = React.useId();
     const [labels, setLabels] = React.useState({});
     const registerLabel = React.useCallback((v, label) => setLabels((prev) => ({ ...prev, [v]: label })), []);
     const unregisterLabel = React.useCallback((v) => setLabels((prev) => {
@@ -47,6 +49,7 @@ function Select({ value, defaultValue, onValueChange, open, defaultOpen = false,
             setValue,
             triggerRef,
             contentId,
+            triggerId,
             labels,
             registerLabel,
             unregisterLabel,
@@ -60,9 +63,13 @@ function SelectValue({ className, placeholder, ...props }) {
     const label = value !== undefined ? labels[value] : undefined;
     return (_jsx("span", { "data-slot": "select-value", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex flex-1 text-left", className), ...props, children: label ?? placeholder ?? null }));
 }
-function SelectTrigger({ className, size = "default", children, onClick, onKeyDown, ...props }) {
-    const { open, setOpen, value, triggerRef, contentId } = useSelect();
-    return (_jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-slot": "select-trigger", "data-size": size, "data-state": open ? "open" : "closed", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+function SelectTrigger({ className, size = "default", children, id, onClick, onKeyDown, ...props }) {
+    const { open, setOpen, value, triggerRef, contentId, triggerId } = useSelect();
+    // Give the trigger a stable id so the listbox can point back at it via
+    // aria-labelledby — naming the popup with its combobox. Honor a consumer id
+    // when supplied so an existing label association isn't clobbered.
+    const resolvedTriggerId = id ?? triggerId;
+    return (_jsxs("button", { ref: triggerRef, type: "button", id: resolvedTriggerId, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-slot": "select-trigger", "data-size": size, "data-state": open ? "open" : "closed", "data-placeholder": value === undefined ? "" : undefined, className: cn("flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(!open);
@@ -80,7 +87,7 @@ function optionsOf(container) {
     return Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
 }
 function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, onKeyDown, ...props }) {
-    const { open, setOpen, value, triggerRef, contentId } = useSelect();
+    const { open, setOpen, value, triggerRef, contentId, triggerId } = useSelect();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -90,6 +97,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
     });
     const containerRef = React.useRef(null);
     const { onTypeaheadKeyDown } = useTypeahead();
+    const hasPointerMoved = usePointerMoved();
     // Focus the selected (or first) option once the popup is actually visible.
     const didFocus = React.useRef(false);
     React.useEffect(() => {
@@ -136,7 +144,11 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
         return (_jsx("div", { hidden: true, "aria-hidden": true, "data-slot": "select-content-registry", children: children }));
     }
     const triggerWidth = triggerRef.current?.offsetWidth;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "listbox", tabIndex: -1, "data-slot": "select-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {
+    // Name the listbox after its combobox trigger for screen readers. Prefer the
+    // trigger's live DOM id (which reflects any consumer-supplied id) and fall
+    // back to the context-generated triggerId.
+    const labelledById = triggerRef.current?.id || triggerId;
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), id: contentId, role: "listbox", "aria-labelledby": labelledById, tabIndex: -1, "data-slot": "select-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,
@@ -145,6 +157,11 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
                 ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
             }, onPointerMove: (e) => {
+                // Ignore synthetic pointermoves fired by keyboard arrow scrolling
+                // (same coords) — otherwise pointer focus yanks focus off the
+                // keyboard-navigated option right after it scrolls into view.
+                if (!hasPointerMoved(e))
+                    return;
                 const opt = e.target.closest('[role="option"]:not([data-disabled])');
                 if (opt && opt !== document.activeElement)
                     opt.focus();
@@ -205,7 +222,11 @@ function SelectItem({ className, children, value, disabled, onClick, ...props })
     React.useEffect(() => {
         registerLabel(value, children);
     }, [value, children, registerLabel]);
-    return (_jsxs("div", { role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": disabled || undefined, "data-slot": "select-item", "data-value": value, "data-disabled": disabled ? "" : undefined, className: cn("relative flex w-full 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 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: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": disabled || undefined, "data-slot": "select-item", "data-value": value, "data-disabled": disabled ? "" : undefined, className: cn(
+        // focus-visible ring gives keyboard users a clear focus indicator;
+        // focus:bg-accent alone is a weak signal and fails when accent contrast
+        // is low, so pair it with a visible ring for arrow-key navigation.
+        "relative flex w-full 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 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);