@stevederico/skateboard-ui 4.0.0 → 4.3.0

package/dist/ui/navigation-menu.js

@@ -63,15 +63,56 @@ function NavigationMenuList({ className, ...props }) {
 }
 function NavigationMenuItem({ className, ...props }) {
     const value = React.useId();
+    // One id + content ref per item so multiple triggers/panels don't collide
+    // when wiring aria-controls and focusing into the right portaled panel.
+    const contentId = React.useId();
     const triggerRef = React.useRef(null);
-    return (_jsx(NavigationMenuItemContext.Provider, { value: { value, triggerRef }, children: _jsx("li", { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }) }));
+    const contentRef = React.useRef(null);
+    return (_jsx(NavigationMenuItemContext.Provider, { value: { value, triggerRef, contentId, contentRef }, children: _jsx("li", { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }) }));
 }
+// Tabbable descendants, in DOM order, used to move focus into the open content
+// panel. Kept local (not imported) so this file stays self-contained.
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 const navigationMenuTriggerStyle = cva("cursor-pointer group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
-function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onClick, ...props }) {
+function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onClick, onKeyDown, ...props }) {
     const { value, setValue, open } = useNavigationMenu();
-    const { value: itemValue, triggerRef } = useNavigationMenuItem();
+    const { value: itemValue, triggerRef, contentId, contentRef } = useNavigationMenuItem();
     const isOpen = value === itemValue;
-    return (_jsxs("button", { ref: triggerRef, type: "button", "data-slot": "navigation-menu-trigger", "aria-expanded": isOpen, "data-state": isOpen ? "open" : "closed", "data-popup-open": isOpen ? "" : undefined, "data-open": isOpen ? "" : undefined, className: cn(navigationMenuTriggerStyle(), "group", className), onMouseEnter: (e) => {
+    /**
+     * Move keyboard focus into the open content panel so its links are
+     * reachable. The panel is portaled and opens on focus/hover, but without
+     * this a keyboard user can never enter it (WCAG 2.1.1 keyboard trap-out).
+     * ArrowDown (and Enter) open if needed, then focus the first focusable child.
+     */
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (e.key !== "ArrowDown" && e.key !== "Enter")
+            return;
+        // Enter still toggles via onClick; only intercept it to enter an open panel.
+        if (e.key === "Enter" && !isOpen)
+            return;
+        e.preventDefault();
+        open(itemValue);
+        // The panel mounts this tick and is positioned a frame or two later (it
+        // starts visibility:hidden until useFloating measures it, and focus() on a
+        // hidden node is a no-op). Retry across a few frames until it is visible,
+        // bounded so a panel that never opens can't spin forever.
+        let frames = 0;
+        const focusFirst = () => {
+            const node = contentRef.current;
+            if (!node || getComputedStyle(node).visibility === "hidden") {
+                if (frames++ < 20)
+                    requestAnimationFrame(focusFirst);
+                return;
+            }
+            const first = node.querySelector(FOCUSABLE_SELECTOR);
+            (first ?? node).focus();
+        };
+        requestAnimationFrame(focusFirst);
+    };
+    return (_jsxs("button", { ref: triggerRef, type: "button", "data-slot": "navigation-menu-trigger", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? contentId : undefined, "data-state": isOpen ? "open" : "closed", "data-popup-open": isOpen ? "" : undefined, "data-open": isOpen ? "" : undefined, className: cn(navigationMenuTriggerStyle(), "group", className), onMouseEnter: (e) => {
             onMouseEnter?.(e);
             if (!e.defaultPrevented)
                 open(itemValue);
@@ -83,11 +124,11 @@ function NavigationMenuTrigger({ className, children, onMouseEnter, onFocus, onC
             onClick?.(e);
             if (!e.defaultPrevented)
                 setValue(isOpen ? null : itemValue);
-        }, ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-open:rotate-180", "aria-hidden": "true" })] }));
+        }, onKeyDown: handleKeyDown, ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-open:rotate-180", "aria-hidden": "true" })] }));
 }
-function NavigationMenuContent({ className, children, onMouseEnter, ...props }) {
-    const { value, cancelClose, scheduleClose } = useNavigationMenu();
-    const { value: itemValue, triggerRef } = useNavigationMenuItem();
+function NavigationMenuContent({ className, children, onMouseEnter, onKeyDown, ...props }) {
+    const { value, setValue, cancelClose, scheduleClose } = useNavigationMenu();
+    const { value: itemValue, triggerRef, contentId, contentRef } = useNavigationMenuItem();
     const isOpen = value === itemValue;
     const [mounted, presenceRef] = usePresence(isOpen);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
@@ -99,16 +140,44 @@ function NavigationMenuContent({ className, children, onMouseEnter, ...props })
     const setRef = React.useCallback((node) => {
         floatingRef.current = node;
         presenceRef.current = node;
-    }, [floatingRef, presenceRef]);
+        contentRef.current = node;
+    }, [floatingRef, presenceRef, contentRef]);
+    /**
+     * Restore focus to the trigger whenever the panel closes while focus is still
+     * inside it (root-level Escape, mouse-leave timeout, etc.). Without this the
+     * panel unmounts and keyboard focus is stranded on a detached node (a11y).
+     * If focus already moved elsewhere (e.g. an outside click), leave it alone.
+     */
+    React.useEffect(() => {
+        if (isOpen)
+            return;
+        const node = contentRef.current;
+        const trigger = triggerRef.current;
+        if (trigger && node && node.contains(document.activeElement))
+            trigger.focus();
+    }, [isOpen, contentRef, triggerRef]);
+    /**
+     * Escape closes the menu and returns focus to the trigger. The root already
+     * listens for Escape to clear the value, but only this panel knows to restore
+     * focus — otherwise keyboard focus would be stranded on a now-unmounted node.
+     */
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || e.key !== "Escape")
+            return;
+        e.preventDefault();
+        setValue(null);
+        triggerRef.current?.focus();
+    };
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: setRef, "data-slot": "navigation-menu-content", "data-state": isOpen ? "open" : "closed", "data-open": isOpen ? "" : undefined, "data-closed": isOpen ? undefined : "", "data-side": pos?.side ?? "bottom", style: {
+    return (_jsx(Portal, { children: _jsx("div", { ref: setRef, id: contentId, role: "menu", tabIndex: -1, "data-slot": "navigation-menu-content", "data-state": isOpen ? "open" : "closed", "data-open": isOpen ? "" : undefined, "data-closed": isOpen ? undefined : "", "data-side": pos?.side ?? "bottom", style: {
                 position: "fixed",
                 left: pos?.x ?? 0,
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
-            }, onMouseEnter: (e) => {
+            }, onKeyDown: handleKeyDown, onMouseEnter: (e) => {
                 onMouseEnter?.(e);
                 cancelClose();
             }, onMouseLeave: scheduleClose, className: cn("z-50 w-auto origin-(--transform-origin) rounded-md bg-popover p-2 text-popover-foreground shadow ring-1 ring-foreground/10 duration-200 outline-none 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props, children: children }) }));

package/dist/ui/popover.d.ts

@@ -18,7 +18,7 @@ export interface PopoverContentProps extends React.ComponentProps<"div"> {
     sideOffset?: number;
     alignOffset?: number;
 }
-declare function PopoverContent({ className, style, ref, align, alignOffset, side, sideOffset, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverContent({ className, style, ref, align, alignOffset, side, sideOffset, onKeyDown, ...props }: PopoverContentProps): React.JSX.Element | null;
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
 declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;

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();
@@ -35,8 +48,10 @@ function PopoverTrigger({ asChild = false, render, nativeButton: _nativeButton,
                 setOpen(!open);
         }, ...props, children: slotChild }));
 }
-function PopoverContent({ className, style, ref, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
-    const { open, setOpen, triggerRef, contentId } = usePopover();
+// 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, labelledBy, describedBy } = usePopover();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -44,10 +59,66 @@ function PopoverContent({ className, style, ref, align = "center", alignOffset =
         sideOffset,
         alignOffset,
     });
+    const contentRef = React.useRef(null);
     useDismiss(open, () => setOpen(false), [triggerRef, floatingRef]);
+    // Move focus into the popover when it opens and restore it to the trigger on
+    // close — a role="dialog" must manage focus (native <dialog> does this for
+    // free; this portaled div does not).
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const trigger = triggerRef.current;
+        let raf = 0;
+        // Retry across frames until the content is mounted AND visible: presence
+        // 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.
+        const focusIn = () => {
+            const node = contentRef.current;
+            if (!node || getComputedStyle(node).visibility === "hidden") {
+                raf = requestAnimationFrame(focusIn);
+                return;
+            }
+            const first = node.querySelector(FOCUSABLE_SELECTOR);
+            (first ?? node).focus();
+        };
+        raf = requestAnimationFrame(focusIn);
+        return () => {
+            cancelAnimationFrame(raf);
+            // Only reclaim focus if it is still inside the popover (an outside click
+            // already moved it elsewhere — don't yank it back).
+            const node = contentRef.current;
+            if (trigger && node && node.contains(document.activeElement))
+                trigger.focus();
+        };
+    }, [open, triggerRef]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, ref), id: contentId, role: "dialog", "data-slot": "popover-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, 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;
+                const node = contentRef.current;
+                if (!node)
+                    return;
+                const focusables = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+                if (focusables.length === 0) {
+                    e.preventDefault();
+                    node.focus();
+                    return;
+                }
+                const first = focusables[0];
+                const last = focusables[focusables.length - 1];
+                const activeEl = document.activeElement;
+                if (e.shiftKey && (activeEl === first || activeEl === node)) {
+                    e.preventDefault();
+                    last.focus();
+                }
+                else if (!e.shiftKey && activeEl === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }, style: {
                 ...style,
                 position: "fixed",
                 left: pos?.x ?? 0,
@@ -60,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/radio-group.d.ts

@@ -13,5 +13,5 @@ declare function RadioGroup({ className, value, defaultValue, onValueChange, nam
 export interface RadioGroupItemProps extends Omit<React.ComponentProps<"button">, "value"> {
     value: string;
 }
-declare function RadioGroupItem({ className, value, onClick, disabled, ...props }: RadioGroupItemProps): React.JSX.Element;
+declare function RadioGroupItem({ className, value, onClick, disabled, ref, ...props }: RadioGroupItemProps): React.JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/ui/radio-group.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
+import { mergeRefs } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
 const RadioGroupContext = React.createContext(null);
 function useRadioGroup() {
@@ -39,13 +40,24 @@ function RadioGroup({ className, value, defaultValue, onValueChange, name, onKey
                     radios[next].click();
                 }, ...props }), name ? (_jsx("input", { type: "hidden", name: name, value: selected ?? "" })) : null] }));
 }
-function RadioGroupItem({ className, value, onClick, disabled, ...props }) {
+function RadioGroupItem({ className, value, onClick, disabled, ref, ...props }) {
     const { value: selected, setValue } = useRadioGroup();
     const checked = selected === value;
-    // Roving tab index: the checked radio is tabbable; if none checked, the first
-    // item is reachable (handled by Base UI semantics via tabIndex below).
-    const tabbable = checked || selected === undefined;
-    return (_jsx("button", { 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) => {
+    const btnRef = React.useRef(null);
+    // Roving tab index: the checked radio is the single tab stop. When nothing is
+    // checked, only the first enabled radio is tabbable — making every radio
+    // tabbable would put multiple stops in Tab order, breaking the radiogroup
+    // pattern.
+    const [isFirstEnabled, setIsFirstEnabled] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (selected !== undefined)
+            return;
+        const el = btnRef.current;
+        const first = el?.parentElement?.querySelector('[role="radio"]:not([disabled]):not([data-disabled])');
+        setIsFirstEnabled(first === el);
+    });
+    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) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setValue(value);

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

@@ -7,6 +7,8 @@ import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { usePointerMoved } from "./use-pointer-moved.js";
 import { ChevronDownIcon, CheckIcon } from "../icons/index.js";
 const SelectContext = React.createContext(null);
 function useSelect() {
@@ -28,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) => {
@@ -46,6 +49,7 @@ function Select({ value, defaultValue, onValueChange, open, defaultOpen = false,
             setValue,
             triggerRef,
             contentId,
+            triggerId,
             labels,
             registerLabel,
             unregisterLabel,
@@ -59,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);
@@ -79,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,
@@ -88,6 +96,8 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
         alignOffset,
     });
     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(() => {
@@ -134,14 +144,24 @@ 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,
                 minWidth: triggerWidth,
                 visibility: pos ? "visible" : "hidden",
                 ["--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();
@@ -180,6 +200,13 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
                         active.click();
                     }
                 }
+                else {
+                    const match = onTypeaheadKeyDown(e, opts, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("relative isolate 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 duration-100 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 SelectLabel({ className, ...props }) {
@@ -195,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);

package/dist/ui/sheet.js

@@ -3,10 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
 import { Button } from "./button.js";
-import { Slot, resolveRender } from "./slot.js";
+import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { XIcon } from "../icons/index.js";
 import { useControllableState } from "./use-controllable-state.js";
 import { usePresence } from "./use-presence.js";
+import { useScrollLock } from "./use-scroll-lock.js";
+import { useDialogLabelling } from "./use-labelling.js";
 const SheetContext = React.createContext(null);
 function useSheet() {
     const ctx = React.useContext(SheetContext);
@@ -22,9 +24,20 @@ function Sheet({ open, defaultOpen = false, onOpenChange, children }) {
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const titleId = React.useId();
-    const descriptionId = React.useId();
-    return (_jsx(SheetContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+    // Conditional labelling: only advertise aria-labelledby/aria-describedby when a
+    // Title/Description part is actually rendered, so the dialog never points at a
+    // missing element (a dangling IDREF that screen readers announce as broken).
+    const { titleId, descriptionId, registerTitle, registerDescription, labelledBy, describedBy } = useDialogLabelling();
+    return (_jsx(SheetContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            titleId,
+            descriptionId,
+            registerTitle,
+            registerDescription,
+            labelledBy,
+            describedBy,
+        }, children: children }));
 }
 function SheetTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen } = useSheet();
@@ -67,10 +80,10 @@ const SIDE_OUT = {
     bottom: "slide-out-to-bottom-52",
 };
 function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
-    const { open, setOpen, titleId, descriptionId } = useSheet();
+    const { open, setOpen, labelledBy, describedBy } = useSheet();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
-    const [mounted] = usePresence(open);
+    const [mounted, presenceRef] = usePresence(open);
     React.useEffect(() => {
         const node = ref.current;
         if (!node)
@@ -80,18 +93,12 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
         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 scroll lock so stacked overlays don't unlock the
+    // body while another is still open (a plain per-instance effect would).
+    useScrollLock(mounted);
     if (!mounted)
         return null;
-    return (_jsxs("dialog", { ...props, ref: ref, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "sheet-content", "data-side": side, "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": "sheet-content", "data-side": side, "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onPointerDown: (e) => {
@@ -111,11 +118,15 @@ function SheetFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
 }
 function SheetTitle({ className, ...props }) {
-    const { titleId } = useSheet();
+    const { titleId, registerTitle } = useSheet();
+    // Register so the dialog only sets aria-labelledby while this title is mounted.
+    React.useEffect(registerTitle, [registerTitle]);
     return (_jsx("h2", { id: titleId, "data-slot": "sheet-title", className: cn("font-medium text-foreground", className), ...props }));
 }
 function SheetDescription({ className, ...props }) {
-    const { descriptionId } = useSheet();
+    const { descriptionId, registerDescription } = useSheet();
+    // Register so the dialog only sets aria-describedby while this description is mounted.
+    React.useEffect(registerDescription, [registerDescription]);
     return (_jsx("p", { id: descriptionId, "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
 }
 export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/ui/slider.d.ts

@@ -8,11 +8,12 @@ export interface SliderProps extends Omit<React.ComponentProps<"div">, "defaultV
     step?: number;
     orientation?: "horizontal" | "vertical";
     disabled?: boolean;
+    name?: string;
 }
 /**
  * Self-contained slider with pointer drag and keyboard control. Supports one or
  * more thumbs (the nearest thumb to the pointer is the one that moves). Track,
  * range, and thumbs mirror the shadcn structure/classes.
  */
-declare function Slider({ className, value, defaultValue, onValueChange, min, max, step, orientation, disabled, ...props }: SliderProps): React.JSX.Element;
+declare function Slider({ className, value, defaultValue, onValueChange, min, max, step, orientation, disabled, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SliderProps): React.JSX.Element;
 export { Slider };

package/dist/ui/slider.js

@@ -9,7 +9,10 @@ const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
  * more thumbs (the nearest thumb to the pointer is the one that moves). Track,
  * range, and thumbs mirror the shadcn structure/classes.
  */
-function Slider({ className, value, defaultValue, onValueChange, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, ...props }) {
+function Slider({ className, value, defaultValue, onValueChange, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, name, 
+// Pull the accessible-name props off so they don't land on the outer wrapper
+// div; the thumb (role="slider") is the element that needs them.
+"aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
     const [values, setValues] = useControllableState({
         value,
         defaultValue: defaultValue ?? [min],
@@ -85,10 +88,12 @@ function Slider({ className, value, defaultValue, onValueChange, min = 0, max =
     };
     const rangeStart = values.length > 1 ? Math.min(...values.map(percent)) : 0;
     const rangeEnd = Math.max(...values.map(percent));
-    return (_jsx("div", { "data-slot": "slider", "data-orientation": orientation, "data-disabled": disabled ? "" : undefined, className: cn("data-horizontal:w-full data-vertical:h-full", className), ...props, children: _jsxs("div", { "data-orientation": orientation, onPointerDown: onPointerDown, className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx("div", { ref: trackRef, "data-slot": "slider-track", "data-orientation": orientation, className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5", children: _jsx("div", { "data-slot": "slider-range", "data-orientation": orientation, className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full", style: vertical
-                            ? { bottom: `${rangeStart}%`, height: `${rangeEnd - rangeStart}%` }
-                            : { left: `${rangeStart}%`, width: `${rangeEnd - rangeStart}%` } }) }), values.map((v, index) => (_jsx("span", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": v, "aria-orientation": orientation, "aria-disabled": disabled || undefined, "data-slot": "slider-thumb", onKeyDown: onThumbKeyDown(index), className: "absolute block size-4 shrink-0 -translate-x-1/2 cursor-pointer rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-vertical:translate-x-0 data-vertical:-translate-y-1/2", "data-orientation": orientation, style: vertical
-                        ? { bottom: `${percent(v)}%` }
-                        : { left: `${percent(v)}%` } }, index)))] }) }));
+    return (_jsxs("div", { "data-slot": "slider", "data-orientation": orientation, "data-disabled": disabled ? "" : undefined, className: cn("data-horizontal:w-full data-vertical:h-full", className), ...props, children: [_jsxs("div", { "data-orientation": orientation, onPointerDown: onPointerDown, className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx("div", { ref: trackRef, "data-slot": "slider-track", "data-orientation": orientation, className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5", children: _jsx("div", { "data-slot": "slider-range", "data-orientation": orientation, className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full", style: vertical
+                                ? { bottom: `${rangeStart}%`, height: `${rangeEnd - rangeStart}%` }
+                                : { left: `${rangeStart}%`, width: `${rangeEnd - rangeStart}%` } }) }), values.map((v, index) => (_jsx("span", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": v, "aria-orientation": orientation, "aria-disabled": disabled || undefined, "data-slot": "slider-thumb", "data-disabled": disabled ? "" : undefined, onKeyDown: onThumbKeyDown(index), className: "absolute block size-4 shrink-0 -translate-x-1/2 cursor-pointer rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 data-vertical:translate-x-0 data-vertical:-translate-y-1/2", "data-orientation": orientation, style: vertical
+                            ? { bottom: `${percent(v)}%` }
+                            : { left: `${percent(v)}%` } }, index)))] }), name
+                ? values.map((v, i) => (_jsx("input", { type: "hidden", name: name, value: v }, i)))
+                : null] }));
 }
 export { Slider };

package/dist/ui/tabs.d.ts

@@ -21,7 +21,7 @@ declare function TabsList({ className, variant, onKeyDown, ...props }: React.Com
 export interface TabsTriggerProps extends Omit<React.ComponentProps<"button">, "value"> {
     value: string;
 }
-declare function TabsTrigger({ className, value, onClick, ...props }: TabsTriggerProps): React.JSX.Element;
+declare function TabsTrigger({ className, value, onClick, ref, ...props }: TabsTriggerProps): React.JSX.Element;
 export interface TabsContentProps extends Omit<React.ComponentProps<"div">, "value"> {
     value: string;
 }