@stevederico/skateboard-ui 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGELOG
 
+4.1.0
+
+  Add menu/select typeahead
+  Fix popover focus management
+  Fix navigation-menu keyboard entry
+  Fix Command combobox ARIA
+  Fix tabs first tab-stop
+  Fix radio single tab-stop
+  Set menu available-height
+  Fix sheet/drawer exit animations
+  Reset floating position on close
+  Add a11y regression tests
+
 4.0.0
 
   Self-contained ui/ component tier (47 components, zero base-ui)

package/dist/components/core/Command.js

@@ -10,6 +10,9 @@ function useCommand() {
 export function Command({ className, children, ...props }) {
     const [filter, setFilter] = useState('');
     const [selectedId, setSelectedId] = useState(null);
+    // Stable base id shared by the listbox container and every option, so the
+    // input's aria-controls / aria-activedescendant can reference them.
+    const listboxId = useId();
     const itemsRef = useRef(new Map()); // id -> { value, onSelect, disabled }
     const register = useCallback((id, meta) => {
         itemsRef.current.set(id, meta);
@@ -55,12 +58,18 @@ export function Command({ className, children, ...props }) {
     }, [selectedId]);
     const isVisible = useCallback((id) => visibleIds().includes(id), [visibleIds]);
     const visibleCount = visibleIds().length;
-    const value = useMemo(() => ({ filter, setFilter, selectedId, setSelectedId, register, unregister, isVisible, visibleCount, move, triggerSelected }), [filter, selectedId, register, unregister, isVisible, visibleCount, move, triggerSelected]);
-    return (_jsx(CommandContext.Provider, { value: value, children: _jsx("div", { role: "combobox", "aria-expanded": "true", className: className, ...props, children: children }) }));
+    const value = useMemo(() => ({ filter, setFilter, selectedId, setSelectedId, listboxId, register, unregister, isVisible, visibleCount, move, triggerSelected }), [filter, selectedId, listboxId, register, unregister, isVisible, visibleCount, move, triggerSelected]);
+    return (_jsx(CommandContext.Provider, { value: value, children: _jsx("div", { className: className, ...props, children: children }) }));
 }
 export function CommandInput({ className, placeholder, value: controlledValue, onValueChange, ...props }) {
-    const { filter, setFilter, move, triggerSelected } = useCommand();
+    const { filter, setFilter, move, triggerSelected, selectedId, listboxId, visibleCount } = useCommand();
     const value = controlledValue ?? filter;
+    // The listbox is considered "shown"/expanded whenever it has visible options.
+    const isExpanded = visibleCount > 0;
+    // aria-activedescendant points at the DOM id of the active option (selectedId
+    // is rendered verbatim as each CommandItem's id). Undefined when nothing is
+    // active, so screen readers don't reference a missing element.
+    const activeDescendant = isExpanded && selectedId ? selectedId : undefined;
     const handleChange = (e) => {
         const v = e.target.value;
         setFilter(v);
@@ -80,10 +89,16 @@ export function CommandInput({ className, placeholder, value: controlledValue, o
             triggerSelected();
         }
     };
-    return (_jsx("input", { role: "searchbox", autoComplete: "off", autoCorrect: "off", spellCheck: "false", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: className, ...props }));
+    return (
+    // The input is the combobox. Real DOM focus stays here during arrow
+    // navigation; only aria-activedescendant moves so screen readers announce
+    // the active option (WAI-ARIA combobox + activedescendant pattern).
+    _jsx("input", { role: "combobox", "aria-autocomplete": "list", "aria-expanded": isExpanded, "aria-controls": listboxId, "aria-activedescendant": activeDescendant, autoComplete: "off", autoCorrect: "off", spellCheck: "false", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: className, ...props }));
 }
 export function CommandList({ className, children, ...props }) {
-    return (_jsx("div", { role: "listbox", className: className, ...props, children: children }));
+    const { listboxId } = useCommand();
+    // id matches the input's aria-controls so the combobox owns this listbox.
+    return (_jsx("div", { role: "listbox", id: listboxId, className: className, ...props, children: children }));
 }
 export function CommandEmpty({ className, children, ...props }) {
     const { visibleCount } = useCommand();
@@ -95,23 +110,34 @@ export function CommandGroup({ className, heading, children, ...props }) {
     return (_jsxs("div", { role: "group", className: className, ...props, children: [heading && (_jsx("div", { "cmdk-group-heading": "", role: "presentation", children: heading })), children] }));
 }
 export function CommandItem({ className, value, onSelect, disabled = false, children, ...props }) {
+    // This id is both the value tracked in selectedId and the option's DOM id,
+    // which is what the input's aria-activedescendant references.
     const id = useId();
     const { register, unregister, selectedId, setSelectedId, isVisible } = useCommand();
+    const optionRef = useRef(null);
     // Resolve a usable value string — fall back to children text if no value prop
     const resolvedValue = value ?? (typeof children === 'string' ? children : id);
     useEffect(() => {
         register(id, { value: String(resolvedValue), onSelect, disabled });
         return () => unregister(id);
     }, [id, resolvedValue, onSelect, disabled, register, unregister]);
+    const isSelected = selectedId === id;
+    // Focus stays on the input under the activedescendant model, so scroll the
+    // active option into view manually when it becomes active.
+    useEffect(() => {
+        if (isSelected)
+            optionRef.current?.scrollIntoView({ block: 'nearest' });
+    }, [isSelected]);
     if (!isVisible(id))
         return null;
-    const isSelected = selectedId === id;
     const handleClick = () => {
         if (disabled)
             return;
         onSelect?.(String(resolvedValue));
     };
-    return (_jsx("div", { role: "option", "aria-selected": isSelected, "data-selected": isSelected ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, onMouseEnter: () => !disabled && setSelectedId(id), onClick: handleClick, className: className, ...props, children: children }));
+    return (_jsx("div", { 
+        // Stable DOM id targeted by aria-activedescendant when this option is active.
+        id: id, ref: optionRef, role: "option", "aria-selected": isSelected, "data-selected": isSelected ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, onMouseEnter: () => !disabled && setSelectedId(id), onClick: handleClick, className: className, ...props, children: children }));
 }
 export function CommandSeparator({ className, ...props }) {
     return _jsx("div", { role: "separator", className: className, ...props });

package/dist/ui/context-menu.js

@@ -6,6 +6,7 @@ import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
+import { useTypeahead } from "./use-typeahead.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -63,8 +64,10 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
     const { open, setOpen, point, contentId, layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
     // Position the menu at the cursor, clamped into the viewport once the
-    // popup has measurable dimensions.
+    // popup has measurable dimensions. availableHeight caps the menu so long
+    // lists scroll inside the viewport instead of overflowing it.
     const [pos, setPos] = React.useState(null);
     React.useLayoutEffect(() => {
         if (!mounted) {
@@ -94,7 +97,9 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                 y = Math.max(PAD, point.y - h);
             x = Math.max(PAD, Math.min(x, vw - w - PAD));
             y = Math.max(PAD, Math.min(y, vh - h - PAD));
-            setPos({ x, y });
+            // Space from the menu's top to the bottom of the viewport, minus padding.
+            const availableHeight = Math.max(0, vh - y - PAD);
+            setPos({ x, y, availableHeight });
         };
         measure();
         window.addEventListener("scroll", measure, true);
@@ -159,6 +164,7 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                 top: pos?.y ?? point.y,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: "top left",
+                ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
             }, onPointerMove: (e) => {
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
@@ -190,6 +196,16 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                         active.click();
                     }
                 }
+                else {
+                    // Printable-character typeahead: jump to the matching item.
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=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 }) }));
 }
 function ContextMenuGroup({ className, ...props }) {
@@ -282,6 +298,7 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
         alignOffset: -3,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -340,6 +357,16 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
                         active.click();
                     }
                 }
+                else {
+                    // Printable-character typeahead: jump to the matching item.
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/ui/drawer.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
-import { Slot, resolveRender } from "./slot.js";
+import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
 import { usePresence } from "./use-presence.js";
 // Drag thresholds and animation timing ported from vaul (MIT — Emil Kowalski).
@@ -87,8 +87,13 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
     const { open, setOpen, titleId, descriptionId } = useDrawer();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
-    const [mounted] = usePresence(open);
+    const [mounted, presenceRef] = usePresence(open);
     const dragState = React.useRef({ dragging: false, startY: 0, height: 0, startTime: 0 });
+    // A drag-dismiss already slides the panel out via an inline transform, so the
+    // CSS `animate-out` slide must be suppressed for that path — otherwise its
+    // keyframes would override the transform and snap the panel back into view.
+    // Programmatic closes (backdrop, Escape, controlled) keep the CSS animation.
+    const dismissingByDrag = React.useRef(false);
     React.useEffect(() => {
         const node = ref.current;
         if (!node)
@@ -112,6 +117,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
         if (open && ref.current) {
             ref.current.style.transition = "";
             ref.current.style.transform = "";
+            dismissingByDrag.current = false;
         }
     }, [open]);
     const snapBack = React.useCallback(() => {
@@ -127,6 +133,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
             setOpen(false);
             return;
         }
+        dismissingByDrag.current = true;
         el.style.transition = TRANSITION;
         el.style.transform = "translate3d(0, 100%, 0)";
         window.setTimeout(() => setOpen(false), 500);
@@ -200,7 +207,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
     };
     if (!mounted)
         return null;
-    return (_jsxs("dialog", { ...props, ref: ref, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "drawer-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "drawer-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onClick: (e) => {
@@ -215,7 +222,9 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
         // sizing so the drawer pins to the bottom edge at full width.
         "fixed inset-x-0 top-auto bottom-0 z-50 m-0 flex max-h-[80vh] w-full max-w-none touch-none flex-col rounded-t-xl border-t border-border bg-background p-0 text-sm outline-none backdrop:bg-black/10 backdrop:transition-opacity backdrop:duration-250 supports-backdrop-filter:backdrop:backdrop-blur-xs", open
             ? "animate-in fade-in-0 slide-in-from-bottom-52 duration-300"
-            : "animate-out fade-out-0 slide-out-to-bottom-52 duration-300", className), children: [_jsx("div", { className: "mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full bg-muted" }), children] }));
+            : dismissingByDrag.current
+                ? ""
+                : "animate-out fade-out-0 slide-out-to-bottom-52 duration-300", className), children: [_jsx("div", { className: "mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full bg-muted" }), children] }));
 }
 function DrawerHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left", className), ...props }));

package/dist/ui/dropdown-menu.js

@@ -7,6 +7,7 @@ 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 { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -76,6 +77,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
         alignOffset,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -132,6 +134,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
+                ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
             }, onPointerMove: (e) => {
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
@@ -164,6 +167,16 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                         active.click();
                     }
                 }
+                else {
+                    // WAI-ARIA typeahead: printable chars jump to the matching item.
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function DropdownMenuGroup({ className, ...props }) {
@@ -256,6 +269,7 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
         alignOffset: -3,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -318,6 +332,16 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
                         active.click();
                     }
                 }
+                else {
+                    // WAI-ARIA typeahead: printable chars jump to the matching item.
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/menubar.js

@@ -6,6 +6,7 @@ import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
+import { useTypeahead } from "./use-typeahead.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenubarRootContext = React.createContext(null);
 function useMenubarRoot() {
@@ -125,6 +126,7 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
         alignOffset,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
     React.useEffect(() => {
         const node = containerRef.current;
         if (!node)
@@ -228,6 +230,17 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
                         active.click();
                     }
                 }
+                else {
+                    // Printable-character typeahead: jump to the menu item whose label
+                    // matches the typed buffer (WAI-ARIA menu pattern).
+                    const items = itemsOf(c);
+                    const idx = items.indexOf(document.activeElement);
+                    const match = onTypeaheadKeyDown(e, items, idx);
+                    if (match) {
+                        e.preventDefault();
+                        match.focus();
+                    }
+                }
             }, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function MenubarLabel({ className, inset, ...props }) {

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

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

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

@@ -35,7 +35,9 @@ 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 }) {
+// 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 [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
@@ -44,10 +46,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", 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,

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.js

@@ -7,6 +7,7 @@ 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 { ChevronDownIcon, CheckIcon } from "../icons/index.js";
 const SelectContext = React.createContext(null);
 function useSelect() {
@@ -88,6 +89,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
         alignOffset,
     });
     const containerRef = React.useRef(null);
+    const { onTypeaheadKeyDown } = useTypeahead();
     // Focus the selected (or first) option once the popup is actually visible.
     const didFocus = React.useRef(false);
     React.useEffect(() => {
@@ -141,6 +143,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
                 minWidth: triggerWidth,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
+                ["--available-height"]: pos ? `${pos.availableHeight}px` : undefined,
             }, onPointerMove: (e) => {
                 const opt = e.target.closest('[role="option"]:not([data-disabled])');
                 if (opt && opt !== document.activeElement)
@@ -180,6 +183,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 }) {

package/dist/ui/sheet.js

@@ -3,7 +3,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 { 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";
@@ -70,7 +70,7 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
     const { open, setOpen, titleId, descriptionId } = 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)
@@ -91,7 +91,7 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
     }, [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": 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) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onPointerDown: (e) => {

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;
 }

package/dist/ui/tabs.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "../shadcn/lib/cva.js";
 import { cn } from "../shadcn/lib/utils.js";
+import { mergeRefs } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
 const TabsContext = React.createContext(null);
 function useTabs() {
@@ -65,10 +66,23 @@ function TabsList({ className, variant = "default", onKeyDown, ...props }) {
             }
         }, ...props }));
 }
-function TabsTrigger({ className, value, onClick, ...props }) {
+function TabsTrigger({ className, value, onClick, ref, ...props }) {
     const { value: active, setValue, idBase } = useTabs();
     const selected = active === value;
-    return (_jsx("button", { type: "button", role: "tab", id: `${idBase}-tab-${idify(value)}`, "aria-selected": selected, "aria-controls": `${idBase}-panel-${idify(value)}`, tabIndex: selected ? 0 : -1, "data-slot": "tabs-trigger", "data-active": selected ? "" : undefined, className: cn("cursor-pointer relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), onClick: (e) => {
+    const btnRef = React.useRef(null);
+    // Roving tab index: the selected tab is tabbable. When nothing is selected the
+    // first enabled tab must still be reachable so the tablist stays in Tab order
+    // (WAI-ARIA: a tablist always has exactly one tab stop).
+    const [isFirstEnabled, setIsFirstEnabled] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (active !== undefined)
+            return;
+        const el = btnRef.current;
+        const first = el?.parentElement?.querySelector('[role="tab"]:not([disabled]):not([data-disabled])');
+        setIsFirstEnabled(first === el);
+    });
+    const tabbable = selected || (active === undefined && isFirstEnabled);
+    return (_jsx("button", { ref: mergeRefs(btnRef, ref), type: "button", role: "tab", id: `${idBase}-tab-${idify(value)}`, "aria-selected": selected, "aria-controls": `${idBase}-panel-${idify(value)}`, tabIndex: tabbable ? 0 : -1, "data-slot": "tabs-trigger", "data-active": selected ? "" : undefined, className: cn("cursor-pointer relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setValue(value);

package/dist/ui/use-floating.d.ts

@@ -13,6 +13,10 @@ export interface FloatingResult {
     side: Side;
     align: Align;
     transformOrigin: string;
+    /** Usable height (px) between the anchor and the viewport edge on the chosen
+     * side, less offsets/padding. Exposed as `--available-height` so scrollable
+     * popups (menus, selects) can clamp with `max-h-(--available-height)`. */
+    availableHeight: number;
 }
 /**
  * Pure positioning math: place a floating box relative to an anchor on the given

package/dist/ui/use-floating.js

@@ -74,7 +74,11 @@ export function computePosition(anchor, floating, opts, viewport) {
             : align === "end"
                 ? "bottom"
                 : "center";
-    return { x, y, side, align, transformOrigin: `${originX} ${originY}` };
+    // Space left for the popup on its final side, so it can clamp + scroll
+    // instead of overflowing the viewport. For left/right placements the popup
+    // spans the cross axis, so the usable height is the full viewport less padding.
+    const availableHeight = Math.max(0, (vertical ? space[side] - sideOffset : viewport.height) - PAD);
+    return { x, y, side, align, transformOrigin: `${originX} ${originY}`, availableHeight };
 }
 /**
  * Position a floating element against an anchor, recomputing on scroll, resize,
@@ -95,8 +99,12 @@ export function useFloating(anchorRef, open, options = {}) {
         setPos(computePosition(a.getBoundingClientRect(), { width: f.offsetWidth, height: f.offsetHeight }, { side, align, sideOffset, alignOffset }, { width: window.innerWidth, height: window.innerHeight }));
     }, [anchorRef, side, align, sideOffset, alignOffset]);
     React.useLayoutEffect(() => {
-        if (!open)
+        // Drop the last position on close so a reopen stays visibility:hidden until
+        // it is re-measured, rather than flashing one frame at stale coordinates.
+        if (!open) {
+            setPos(null);
             return;
+        }
         const ro = new ResizeObserver(update);
         window.addEventListener("scroll", update, true);
         window.addEventListener("resize", update);

package/dist/ui/use-typeahead.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * WAI-ARIA typeahead for listbox/menu widgets. Collects printable keystrokes
+ * into a buffer that resets after a short pause, then resolves the item whose
+ * label matches the buffer (prefix match). Repeating a single character cycles
+ * through the items starting with it. The caller owns the items and decides how
+ * to focus/activate the returned match.
+ *
+ * Usage inside a keydown handler, after handling Arrow/Home/End/Enter/Escape/Tab:
+ *   const match = onTypeaheadKeyDown(e, items, currentIndex)
+ *   if (match) { e.preventDefault(); match.focus() }
+ *
+ * @returns `onTypeaheadKeyDown(event, items, activeIndex)` → matched element or null.
+ *   `items` must be the enabled item elements in DOM order; `activeIndex` is the
+ *   index of the currently focused item within `items` (-1 if none).
+ */
+export declare function useTypeahead(): {
+    onTypeaheadKeyDown: (event: React.KeyboardEvent, items: HTMLElement[], activeIndex: number) => HTMLElement | null;
+};

package/dist/ui/use-typeahead.js

@@ -0,0 +1,64 @@
+"use client";
+import * as React from "react";
+// How long a typeahead buffer survives between keystrokes before resetting, per
+// the WAI-ARIA typeahead pattern (a short pause starts a fresh search).
+const RESET_MS = 500;
+/** The visible, trimmed, lower-cased label of an item, used for prefix matching. */
+function labelOf(el) {
+    return (el.textContent ?? "").trim().toLowerCase();
+}
+/**
+ * WAI-ARIA typeahead for listbox/menu widgets. Collects printable keystrokes
+ * into a buffer that resets after a short pause, then resolves the item whose
+ * label matches the buffer (prefix match). Repeating a single character cycles
+ * through the items starting with it. The caller owns the items and decides how
+ * to focus/activate the returned match.
+ *
+ * Usage inside a keydown handler, after handling Arrow/Home/End/Enter/Escape/Tab:
+ *   const match = onTypeaheadKeyDown(e, items, currentIndex)
+ *   if (match) { e.preventDefault(); match.focus() }
+ *
+ * @returns `onTypeaheadKeyDown(event, items, activeIndex)` → matched element or null.
+ *   `items` must be the enabled item elements in DOM order; `activeIndex` is the
+ *   index of the currently focused item within `items` (-1 if none).
+ */
+export function useTypeahead() {
+    const bufferRef = React.useRef("");
+    const timerRef = React.useRef(0);
+    React.useEffect(() => () => window.clearTimeout(timerRef.current), []);
+    const onTypeaheadKeyDown = React.useCallback((event, items, activeIndex) => {
+        const key = event.key;
+        // Single printable char only. Space is reserved for activation, and any
+        // modifier combo (Ctrl/Meta/Alt) is a command, not text.
+        if (key.length !== 1 ||
+            key === " " ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey)
+            return null;
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            bufferRef.current = "";
+        }, RESET_MS);
+        const prev = bufferRef.current;
+        bufferRef.current += key.toLowerCase();
+        const buffer = bufferRef.current;
+        // A repeated single character cycles through items starting with it rather
+        // than searching for the literal repetition (e.g. "aa" → next "a…" item).
+        const allSame = buffer.length > 1 && [...buffer].every((c) => c === buffer[0]);
+        const query = allSame ? buffer[0] : buffer;
+        const n = items.length;
+        if (n === 0)
+            return null;
+        // Extending an in-progress match keeps resolving from the current item;
+        // a fresh search or a cycle advances past it.
+        const start = allSame || prev === "" ? Math.max(0, activeIndex) + 1 : Math.max(0, activeIndex);
+        for (let i = 0; i < n; i++) {
+            const item = items[(start + i) % n];
+            if (labelOf(item).startsWith(query))
+                return item;
+        }
+        return null;
+    }, []);
+    return { onTypeaheadKeyDown };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "4.0.0",
+  "version": "4.1.0",
   "type": "module",
   "exports": {
     ".": {