@stevederico/skateboard-ui 4.10.0 → 4.12.0

package/dist/ui/context-menu.js

@@ -8,6 +8,7 @@ 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 { registerLayer } from "./layer-stack.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -116,12 +117,36 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
         };
     }, [mounted, point]);
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the menu fails the contains() check and
+        // is treated as an outside click — closing the menu before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        let off = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+            // Register in the shared cross-overlay stack so an outer popover's
+            // outside-press dismiss doesn't fire when a nested context menu is clicked.
+            off = registerLayer(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
+            off?.();
         };
     }, [mounted, layers]);
     // Focus the first item once the popup is actually visible — a
@@ -181,6 +206,8 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                 if (e.defaultPrevented)
                     return;
                 const c = containerRef.current;
+                if (!c)
+                    return;
                 if (e.key === "ArrowDown")
                     (e.preventDefault(), moveFocus(c, "next"));
                 else if (e.key === "ArrowUp")
@@ -213,7 +240,7 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                         match.focus();
                     }
                 }
-            }, className: cn("z-50 max-h-(--available-height) 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 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 }) }));
+            }, className: cn("z-50 max-h-(--available-height) 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 transition-none 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 ContextMenuGroup({ className, ...props }) {
     return _jsx("div", { role: "group", "data-slot": "context-menu-group", className: className, ...props });
@@ -317,12 +344,36 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
     const containerRef = React.useRef(null);
     const { onTypeaheadKeyDown } = useTypeahead();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the submenu fails the contains() check
+        // and is treated as an outside click — closing it before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        let off = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+            // Register in the shared cross-overlay stack so an outer popover's
+            // outside-press dismiss doesn't fire when this nested submenu is clicked.
+            off = registerLayer(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
+            off?.();
         };
     }, [mounted, layers]);
     const didFocus = React.useRef(false);
@@ -361,6 +412,8 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
                 if (e.defaultPrevented)
                     return;
                 const c = containerRef.current;
+                if (!c)
+                    return;
                 if (e.key === "ArrowDown")
                     (e.preventDefault(), moveFocus(c, "next"));
                 else if (e.key === "ArrowUp")

package/dist/ui/dialog.js

@@ -29,13 +29,15 @@ function Dialog({ open, defaultOpen = false, onOpenChange, 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 }));
+    // Stable id wiring the trigger's aria-controls to the content's id.
+    const contentId = React.useId();
+    return (_jsx(DialogContext.Provider, { value: { open: isOpen, setOpen, contentId, ...labelling }, children: children }));
 }
 function DialogTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
-    const { open, setOpen } = useDialog();
+    const { open, setOpen, contentId } = useDialog();
     const { useSlot, slotChild } = resolveRender(asChild, render, children);
     const Comp = useSlot ? Slot : "button";
-    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "dialog-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "data-state": open ? "open" : "closed", onClick: (e) => {
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "dialog-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(true);
@@ -60,7 +62,7 @@ function DialogOverlay() {
     return null;
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    const { open, setOpen, labelledBy, describedBy } = useDialog();
+    const { open, setOpen, contentId, labelledBy, describedBy } = useDialog();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
     React.useEffect(() => {
@@ -87,7 +89,7 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
             if (e.target === ref.current && pointerDownOnBackdrop.current) {
                 setOpen(false);
             }
-        }, className: "group/dialog m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsxs("div", { "data-slot": "dialog-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("relative grid w-full max-w-[calc(100%-2rem)] gap-6 rounded-xl bg-background p-6 text-sm text-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: [children, showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })) : null }));
+        }, className: "group/dialog m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsxs("div", { id: contentId, "data-slot": "dialog-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("relative grid w-full max-w-[calc(100%-2rem)] gap-6 rounded-xl bg-background p-6 text-sm text-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: [children, showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })) : null }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));

package/dist/ui/drawer.js

@@ -54,9 +54,12 @@ function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
         onChange: onOpenChange,
     });
     const { titleId, descriptionId, registerTitle, registerDescription, labelledBy, describedBy } = useDialogLabelling();
+    // Stable id wiring the trigger's aria-controls to the content's id.
+    const contentId = React.useId();
     return (_jsx(DrawerContext.Provider, { value: {
             open: isOpen,
             setOpen,
+            contentId,
             titleId,
             descriptionId,
             registerTitle,
@@ -66,10 +69,10 @@ function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
         }, children: children }));
 }
 function DrawerTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
-    const { open, setOpen } = useDrawer();
+    const { open, setOpen, contentId } = useDrawer();
     const { useSlot, slotChild } = resolveRender(asChild, render, children);
     const Comp = useSlot ? Slot : "button";
-    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "drawer-trigger", "aria-haspopup": "dialog", "data-state": open ? "open" : "closed", onClick: (e) => {
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "drawer-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(true);
@@ -94,7 +97,7 @@ function DrawerOverlay() {
     return null;
 }
 function DrawerContent({ className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
-    const { open, setOpen, labelledBy, describedBy } = useDrawer();
+    const { open, setOpen, contentId, labelledBy, describedBy } = useDrawer();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
     const [mounted, presenceRef] = usePresence(open);
@@ -213,7 +216,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
     };
     if (!mounted)
         return null;
-    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) => {
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), id: contentId, "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) => {

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

@@ -54,8 +54,8 @@ declare function DropdownMenuSub({ defaultOpen, children, }: {
     defaultOpen?: boolean;
     children?: React.ReactNode;
 }): React.JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }: React.ComponentProps<"div"> & {
+declare function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, onPointerLeave, ...props }: React.ComponentProps<"div"> & {
     inset?: boolean;
 }): React.JSX.Element;
-declare function DropdownMenuSubContent({ className, children, onKeyDown, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+declare function DropdownMenuSubContent({ className, children, onKeyDown, onPointerLeave, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/dropdown-menu.js

@@ -9,6 +9,7 @@ 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 { registerLayer } from "./layer-stack.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -95,6 +96,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
         // fires (real mouse only; a synthetic click with no pointerdown masks it).
         let raf = 0;
         let added = null;
+        let off = null;
         const attach = () => {
             const node = containerRef.current;
             if (!node) {
@@ -103,12 +105,16 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
             }
             added = node;
             layers.current.add(node);
+            // Also register in the shared cross-overlay stack so a dropdown nested in a
+            // popover doesn't trip the popover's outside-press dismiss.
+            off = registerLayer(node);
         };
         attach();
         return () => {
             cancelAnimationFrame(raf);
             if (added)
                 layers.current.delete(added);
+            off?.();
         };
     }, [mounted, layers]);
     // Focus the first item once the popup is actually visible — a
@@ -172,6 +178,8 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                 if (e.defaultPrevented)
                     return;
                 const c = containerRef.current;
+                if (!c)
+                    return;
                 if (e.key === "ArrowDown")
                     (e.preventDefault(), moveFocus(c, "next"));
                 else if (e.key === "ArrowUp")
@@ -186,7 +194,10 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                     triggerRef.current?.focus();
                 }
                 else if (e.key === "Tab") {
+                    // Restore focus to the trigger so the browser's default Tab advances
+                    // from there — content is portaled to end of body, orphaning focus.
                     setOpen(false);
+                    triggerRef.current?.focus();
                 }
                 else if (e.key === "Enter" || e.key === " ") {
                     const active = document.activeElement;
@@ -278,13 +289,24 @@ function DropdownMenuSub({ defaultOpen = false, 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 }) {
+function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, onPointerLeave, ...props }) {
     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);
+        }, onPointerLeave: (e) => {
+            onPointerLeave?.(e);
+            if (e.defaultPrevented)
+                return;
+            // Close when the pointer leaves the trigger toward anything that isn't the
+            // open submenu panel (keeps it open while moving into the sub-content).
+            const related = e.relatedTarget;
+            const subContent = document.getElementById(subContentId);
+            if (related instanceof Node && subContent?.contains(related))
+                return;
+            setOpen(false);
         }, onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
@@ -299,7 +321,7 @@ function DropdownMenuSubTrigger({ className, inset, children, onClick, onKeyDown
             }
         }, ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
-function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
+function DropdownMenuSubContent({ className, children, onKeyDown, onPointerLeave, ...props }) {
     const { open, setOpen, triggerRef, subContentId } = useSub();
     const { layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
@@ -324,6 +346,7 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
         // fires (real mouse only; a synthetic click with no pointerdown masks it).
         let raf = 0;
         let added = null;
+        let off = null;
         const attach = () => {
             const node = containerRef.current;
             if (!node) {
@@ -332,12 +355,16 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
             }
             added = node;
             layers.current.add(node);
+            // Also register in the shared cross-overlay stack so a dropdown nested in a
+            // popover doesn't trip the popover's outside-press dismiss.
+            off = registerLayer(node);
         };
         attach();
         return () => {
             cancelAnimationFrame(raf);
             if (added)
                 layers.current.delete(added);
+            off?.();
         };
     }, [mounted, layers]);
     const didFocus = React.useRef(false);
@@ -379,11 +406,23 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
                     item.focus();
+            }, onPointerLeave: (e) => {
+                onPointerLeave?.(e);
+                if (e.defaultPrevented)
+                    return;
+                // Close when the pointer leaves the panel toward anything that isn't the
+                // sub-trigger (keeps it open while moving back onto the trigger).
+                const related = e.relatedTarget;
+                if (related instanceof Node && triggerRef.current?.contains(related))
+                    return;
+                setOpen(false);
             }, onKeyDown: (e) => {
                 onKeyDown?.(e);
                 if (e.defaultPrevented)
                     return;
                 const c = containerRef.current;
+                if (!c)
+                    return;
                 if (e.key === "ArrowDown")
                     (e.preventDefault(), moveFocus(c, "next"));
                 else if (e.key === "ArrowUp")
@@ -395,7 +434,7 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
                 }
                 else if (e.key === "Enter" || e.key === " ") {
                     const active = document.activeElement;
-                    if (active && c.contains(active)) {
+                    if (active && c.contains(active) && active.getAttribute("role")?.startsWith("menuitem")) {
                         e.preventDefault();
                         active.click();
                     }

package/dist/ui/field.d.ts

@@ -1,10 +1,11 @@
+import * as React from "react";
 import { type VariantProps } from "../shadcn/lib/cva.js";
 import { Label } from "./label.js";
-declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React.JSX.Element;
 declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
     variant?: "legend" | "label";
-}): import("react").JSX.Element;
-declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+}): React.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const fieldVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
     orientation: {
         vertical: string;
@@ -12,17 +13,17 @@ declare const fieldVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
         responsive: string;
     };
 }> | undefined) => string;
-declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
-declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
-declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
     children?: React.ReactNode;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
     errors?: Array<{
         message?: string;
     } | undefined>;
-}): import("react").JSX.Element | null;
+}): React.JSX.Element | null;
 export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/ui/field.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import * as React from "react";
 import { cva } from "../shadcn/lib/cva.js";
 import { cn } from "../shadcn/lib/utils.js";
 import { Label } from "./label.js";
@@ -45,7 +45,7 @@ function FieldSeparator({ children, className, ...props }) {
     return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
 }
 function FieldError({ className, children, errors, ...props }) {
-    const content = useMemo(() => {
+    const content = React.useMemo(() => {
         if (children) {
             return children;
         }

package/dist/ui/hover-card.js

@@ -114,6 +114,6 @@ function HoverCardContent({ className, style, ref, side = "bottom", sideOffset =
             }, onMouseLeave: (e) => {
                 onMouseLeave?.(e);
                 scheduleClose();
-            }, className: cn("isolate z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 }) }));
+            }, className: cn("isolate z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden transition-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 }) }));
 }
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/ui/input-group.js

@@ -27,7 +27,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
             if (e.target.closest("button")) {
                 return;
             }
-            e.currentTarget.parentElement?.querySelector("input")?.focus();
+            e.currentTarget.parentElement
+                ?.querySelector("input, textarea")
+                ?.focus();
         }, ...props }));
 }
 const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {

package/dist/ui/layer-stack.d.ts

@@ -0,0 +1,2 @@
+export declare function registerLayer(node: HTMLElement): () => void;
+export declare function isInLayer(target: Node | null): boolean;

package/dist/ui/layer-stack.js

@@ -0,0 +1,16 @@
+const layers = new Set();
+export function registerLayer(node) {
+    layers.add(node);
+    return () => {
+        layers.delete(node);
+    };
+}
+export function isInLayer(target) {
+    if (!target)
+        return false;
+    for (const node of layers) {
+        if (node.contains(target))
+            return true;
+    }
+    return false;
+}

package/dist/ui/menubar.js

@@ -8,6 +8,7 @@ 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 { registerLayer } from "./layer-stack.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenubarRootContext = React.createContext(null);
 function useMenubarRoot() {
@@ -134,12 +135,34 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
     const { onTypeaheadKeyDown } = useTypeahead();
     const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the menu fails the contains() check and
+        // is treated as an outside click — closing the menu before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        let off = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+            off = registerLayer(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
+            off?.();
         };
     }, [mounted, layers]);
     // Focus the first item once the popup is actually visible — a
@@ -348,12 +371,32 @@ function MenubarSubContent({ className, children, onKeyDown, ...props }) {
     const containerRef = React.useRef(null);
     const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The sub-popup is portaled and attaches a frame late, so containerRef.current
+        // is null when this effect first runs and the deps don't change once it
+        // attaches. Retry each frame until the node exists, then register it — without
+        // this the dismiss handler's `layers` set stays empty and a real-mouse click
+        // inside the submenu reads as an outside click, closing it before onClick fires.
+        let raf = 0;
+        let added = null;
+        let off = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+            off = registerLayer(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
+            off?.();
         };
     }, [mounted, layers]);
     const didFocus = React.useRef(false);

package/dist/ui/popover.js

@@ -6,6 +6,7 @@ import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { useDismiss } from "./use-dismiss.js";
+import { registerLayer } from "./layer-stack.js";
 import { usePresence } from "./use-presence.js";
 import { useControllableState } from "./use-controllable-state.js";
 import { useDialogLabelling } from "./use-labelling.js";
@@ -73,14 +74,35 @@ function PopoverContent({ className, style, ref, align = "center", alignOffset =
         // mounts it a tick after `open` flips, and it stays visibility:hidden until
         // useFloating positions it — focus() on a missing or hidden node is a silent
         // no-op. The effect cleanup cancels this when the popover closes.
+        let tries = 0;
         const focusIn = () => {
+            // Safety bound (~1.5s of frames) so a popover that can never take focus
+            // doesn't spin forever.
+            if (tries++ > 90)
+                return;
             const node = contentRef.current;
+            // Wait while the content is still mounting (presence renders it a tick
+            // after `open` flips) or still positioning (it stays visibility:hidden
+            // until useFloating measures it) — focus() on a missing/hidden node is a
+            // silent no-op.
             if (!node || getComputedStyle(node).visibility === "hidden") {
                 raf = requestAnimationFrame(focusIn);
                 return;
             }
+            // Focus is already where it belongs.
+            if (node.contains(document.activeElement))
+                return;
+            // Don't fight the user: if focus moved somewhere that isn't the trigger or
+            // <body>, they placed it deliberately — stop chasing.
+            const active = document.activeElement;
+            if (active && active !== trigger && active !== document.body)
+                return;
             const first = node.querySelector(FOCUSABLE_SELECTOR);
             (first ?? node).focus();
+            // Even once visible, the target can be a frame away from being focusable,
+            // so focus() may no-op — retry until focus genuinely lands inside.
+            if (!node.contains(document.activeElement))
+                raf = requestAnimationFrame(focusIn);
         };
         raf = requestAnimationFrame(focusIn);
         return () => {
@@ -92,6 +114,18 @@ function PopoverContent({ className, style, ref, align = "center", alignOffset =
                 trigger.focus();
         };
     }, [open, triggerRef]);
+    // Register the floating content as an open dismissable layer while mounted, so
+    // an outer overlay's outside-press dismiss ignores clicks landing inside this
+    // popover (e.g. a popover nested in another popover). Keyed on `mounted` so it
+    // runs once contentRef attaches.
+    React.useEffect(() => {
+        if (!mounted)
+            return;
+        const node = contentRef.current;
+        if (!node)
+            return;
+        return registerLayer(node);
+    }, [mounted]);
     if (!mounted)
         return null;
     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) => {

package/dist/ui/radio-group.js

@@ -53,8 +53,19 @@ function RadioGroupItem({ className, value, onClick, disabled, ref, ...props })
         if (selected !== undefined)
             return;
         const el = btnRef.current;
-        const first = el?.parentElement?.querySelector('[role="radio"]:not([disabled]):not([data-disabled])');
+        // Scope to the radiogroup (not the immediate parent) so per-item wrappers
+        // like <label>/<div> don't change which radio counts as "first enabled" —
+        // this matches the arrow-key handler, which queries the group element.
+        const group = el?.closest('[role="radiogroup"]');
+        const first = (group ?? el)?.querySelector('[role="radio"]:not([disabled]):not([data-disabled])');
         setIsFirstEnabled(first === el);
+        // No dependency array on purpose: "first enabled" depends on the whole
+        // sibling set, so an item must recompute when ANY sibling's disabled state
+        // or order changes — a per-item dep list ([selected, value, disabled])
+        // misses those cross-sibling changes and can leave the group with zero tab
+        // stops. The body is cheap (two querySelectors) and setIsFirstEnabled bails
+        // out of re-render when the value is unchanged, so running every render is
+        // negligible.
     });
     const tabbable = checked || (selected === undefined && isFirstEnabled);
     return (_jsx("button", { ref: mergeRefs(btnRef, ref), type: "button", role: "radio", "aria-checked": checked, disabled: disabled, tabIndex: tabbable ? 0 : -1, "data-slot": "radio-group-item", "data-state": checked ? "checked" : "unchecked", "data-checked": checked ? "" : undefined, className: cn("cursor-pointer group/radio-group-item peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), onClick: (e) => {