@stevederico/skateboard-ui 4.0.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # CHANGELOG
 
+4.3.0
+
+  Submenu aria-controls wiring
+  Menu labelled by trigger
+  Tooltip dismiss on outside tap
+  Checkbox indeterminate mixed state
+  Replace catch any narrowing
+  Match DOMException error names
+  Fix relative-time date casts
+  Add a11y regression tests
+
+4.2.0
+
+  Restore menu focus on select
+  Guard menu pointer focus-steal
+  Add menu keyboard focus ring
+  Conditional dialog aria labelling
+  Reentrant overlay scroll lock
+  Name popover dialog
+  Slider name and form
+  Fix dead slider classes
+  Add a11y regression tests
+
+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/components/core/Context.js

@@ -43,7 +43,7 @@ function isLocalStorageAvailable() {
         return true;
     }
     catch (e) {
-        console.warn('localStorage not available:', e.message);
+        console.warn('localStorage not available:', e instanceof Error ? e.message : String(e));
         return false;
     }
 }
@@ -58,7 +58,7 @@ function safeLSSetItem(key, value) {
         return true;
     }
     catch (error) {
-        console.error('localStorage setItem error:', error.message);
+        console.error('localStorage setItem error:', error instanceof Error ? error.message : String(error));
         return false;
     }
 }
@@ -69,7 +69,7 @@ function safeLSGetItem(key) {
         return localStorage.getItem(key);
     }
     catch (error) {
-        console.error('localStorage getItem error:', error.message);
+        console.error('localStorage getItem error:', error instanceof Error ? error.message : String(error));
         return null;
     }
 }
@@ -81,7 +81,7 @@ function safeLSRemoveItem(key) {
         return true;
     }
     catch (error) {
-        console.error('localStorage removeItem error:', error.message);
+        console.error('localStorage removeItem error:', error instanceof Error ? error.message : String(error));
         return false;
     }
 }
@@ -99,7 +99,7 @@ export function ContextProvider({ children, constants }) {
             return JSON.parse(storedUser);
         }
         catch (e) {
-            console.error('Error parsing user data:', e.message);
+            console.error('Error parsing user data:', e instanceof Error ? e.message : String(e));
             return null;
         }
     };
@@ -126,7 +126,7 @@ export function ContextProvider({ children, constants }) {
                     }
                 }
                 catch (error) {
-                    console.error('Error setting user:', error.message);
+                    console.error('Error setting user:', error instanceof Error ? error.message : String(error));
                 }
                 return { ...state, user: action.payload };
             }

package/dist/components/core/Utilities.js

@@ -21,7 +21,7 @@ function isLocalStorageAvailable() {
         return true;
     }
     catch (e) {
-        console.warn('localStorage not available (private mode or quota exceeded):', e.message);
+        console.warn('localStorage not available (private mode or quota exceeded):', e instanceof Error ? e.message : String(e));
         _localStorageAvailable = false;
         return false;
     }
@@ -37,11 +37,13 @@ function safeSetItem(key, value) {
         return true;
     }
     catch (error) {
-        if (error.name === 'QuotaExceededError') {
+        // DOMException (browser storage/abort errors) does not extend Error in
+        // the browser, so match either to read `.name` safely without a cast.
+        if ((error instanceof DOMException || error instanceof Error) && error.name === 'QuotaExceededError') {
             console.error('localStorage quota exceeded - data not persisted');
         }
         else {
-            console.error('localStorage setItem error:', error.message);
+            console.error('localStorage setItem error:', error instanceof Error ? error.message : String(error));
         }
         return false;
     }
@@ -53,7 +55,7 @@ function safeGetItem(key) {
         return localStorage.getItem(key);
     }
     catch (error) {
-        console.error('localStorage getItem error:', error.message);
+        console.error('localStorage getItem error:', error instanceof Error ? error.message : String(error));
         return null;
     }
 }
@@ -65,7 +67,7 @@ function safeRemoveItem(key) {
         return true;
     }
     catch (error) {
-        console.error('localStorage removeItem error:', error.message);
+        console.error('localStorage removeItem error:', error instanceof Error ? error.message : String(error));
         return false;
     }
 }
@@ -523,7 +525,7 @@ export async function showUpgradeSheet(upgradeSheetRef) {
                 (!user?.subscription?.expires || user?.subscription?.expires > Math.floor(Date.now() / 1000));
         }
         catch (error) {
-            console.error('Error parsing user data from storage:', error.message);
+            console.error('Error parsing user data from storage:', error instanceof Error ? error.message : String(error));
             subscriber = false;
         }
     }
@@ -580,7 +582,7 @@ export function timestampToString(input, format = "DOB") {
             return date.toLocaleString();
         case "ago": {
             const now = new Date();
-            const diffInSeconds = Math.floor((now - date) / 1000);
+            const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
             const minute = 60, hour = minute * 60, day = hour * 24;
             const week = day * 7, month = day * 30, year = day * 365;
             if (diffInSeconds < minute)
@@ -703,10 +705,12 @@ export async function apiRequest(endpoint, options = {}) {
         });
     }
     catch (error) {
-        if (error.name === 'AbortError') {
+        // fetch() aborts throw a DOMException, which does not extend Error in
+        // the browser — match either so abort detection still works.
+        if ((error instanceof DOMException || error instanceof Error) && error.name === 'AbortError') {
             throw error; // Re-throw abort errors for useListData to handle
         }
-        throw new Error(`Network error: ${error.message}`);
+        throw new Error(`Network error: ${error instanceof Error ? error.message : String(error)}`);
     }
     finally {
         clearTimeout(timeoutId);
@@ -787,7 +791,7 @@ export async function apiRequest(endpoint, options = {}) {
         return await response.json();
     }
     catch (error) {
-        throw new Error(`Invalid JSON response from server: ${error.message}`);
+        throw new Error(`Invalid JSON response from server: ${error instanceof Error ? error.message : String(error)}`);
     }
 }
 /**
@@ -861,10 +865,10 @@ export function useListData(endpoint, sortFn = null) {
             setError(null);
         }
         catch (err) {
-            // Ignore abort errors
-            if (err.name === 'AbortError')
+            // Ignore abort errors (DOMException in the browser, not an Error)
+            if ((err instanceof DOMException || err instanceof Error) && err.name === 'AbortError')
                 return;
-            setError(err.message);
+            setError(err instanceof Error ? err.message : String(err));
         }
         finally {
             setLoading(false);
@@ -899,7 +903,7 @@ export function useForm(initialValues, onSubmit) {
             setValues(initialValues);
         }
         catch (err) {
-            setError(err.message);
+            setError(err instanceof Error ? err.message : String(err));
         }
         finally {
             setSubmitting(false);

package/dist/ui/alert-dialog.js

@@ -5,6 +5,8 @@ import { cn } from "../shadcn/lib/utils.js";
 import { Button } from "./button.js";
 import { Slot, resolveRender } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useDialogLabelling } from "./use-labelling.js";
+import { useScrollLock } from "./use-scroll-lock.js";
 const AlertDialogContext = React.createContext(null);
 function useAlertDialog() {
     const ctx = React.useContext(AlertDialogContext);
@@ -20,9 +22,17 @@ function AlertDialog({ open, defaultOpen = false, onOpenChange, children, }) {
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const titleId = React.useId();
-    const descriptionId = React.useId();
-    return (_jsx(AlertDialogContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+    const { titleId, descriptionId, registerTitle, registerDescription, labelledBy, describedBy, } = useDialogLabelling();
+    return (_jsx(AlertDialogContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            titleId,
+            descriptionId,
+            registerTitle,
+            registerDescription,
+            labelledBy,
+            describedBy,
+        }, children: children }));
 }
 function AlertDialogTrigger({ className, asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen } = useAlertDialog();
@@ -41,7 +51,7 @@ function AlertDialogOverlay() {
     return null;
 }
 function AlertDialogContent({ className, size = "default", children, ...props }) {
-    const { open, setOpen, titleId, descriptionId } = useAlertDialog();
+    const { open, setOpen, labelledBy, describedBy } = useAlertDialog();
     const ref = React.useRef(null);
     React.useEffect(() => {
         const node = ref.current;
@@ -52,16 +62,10 @@ function AlertDialogContent({ className, size = "default", children, ...props })
         else if (!open && node.open)
             node.close();
     }, [open]);
-    React.useEffect(() => {
-        if (!open)
-            return;
-        const prev = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = prev;
-        };
-    }, [open]);
-    return (_jsx("dialog", { ref: ref, role: "alertdialog", "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "alert-dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+    // Lock background scroll while open via the shared reentrant helper so stacked
+    // overlays don't unlock each other when one closes.
+    useScrollLock(open);
+    return (_jsx("dialog", { ref: ref, role: "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy, "data-slot": "alert-dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), className: "m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsx("div", { "data-slot": "alert-dialog-content", "data-size": size, "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("group/alert-dialog-content relative grid w-full gap-6 rounded-xl bg-background p-6 text-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: children })) : null }));
@@ -76,11 +80,15 @@ function AlertDialogMedia({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className), ...props }));
 }
 function AlertDialogTitle({ className, ...props }) {
-    const { titleId } = useAlertDialog();
+    const { titleId, registerTitle } = useAlertDialog();
+    // Signal that a title exists so the content wires `aria-labelledby` to it.
+    React.useEffect(registerTitle, [registerTitle]);
     return (_jsx("h2", { id: titleId, "data-slot": "alert-dialog-title", className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
 }
 function AlertDialogDescription({ className, ...props }) {
-    const { descriptionId } = useAlertDialog();
+    const { descriptionId, registerDescription } = useAlertDialog();
+    // Signal that a description exists so the content wires `aria-describedby`.
+    React.useEffect(registerDescription, [registerDescription]);
     return (_jsx("p", { id: descriptionId, "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
 }
 function AlertDialogAction({ className, onClick, ...props }) {

package/dist/ui/checkbox.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
-export interface CheckboxProps extends Omit<React.ComponentProps<"button">, "onChange" | "value"> {
-    checked?: boolean;
-    defaultChecked?: boolean;
+/** Checked state of a checkbox: a real boolean, or the tri-state "mixed" value. */
+type CheckedState = boolean | "indeterminate";
+export interface CheckboxProps extends Omit<React.ComponentProps<"button">, "onChange" | "value" | "checked" | "defaultChecked"> {
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
     onCheckedChange?: (checked: boolean) => void;
     /** When set, a hidden checkbox of this name mirrors the state for form posts. */
     name?: string;
@@ -9,9 +11,10 @@ export interface CheckboxProps extends Omit<React.ComponentProps<"button">, "onC
 }
 /**
  * Self-contained checkbox: a `role="checkbox"` button with controlled/
- * uncontrolled checked state. Emits `data-checked`/`data-unchecked`/
- * `data-disabled` so the shared classes apply. Pass `name` to include a
- * hidden checkbox for forms.
+ * uncontrolled checked state. Supports a tri-state `"indeterminate"` (mixed)
+ * value for incoming controlled/default state. Emits `data-checked`/
+ * `data-unchecked`/`data-indeterminate`/`data-disabled` so the shared classes
+ * apply. Pass `name` to include a hidden checkbox for forms.
  */
 declare function Checkbox({ className, checked, defaultChecked, onCheckedChange, disabled, name, value, onClick, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };

package/dist/ui/checkbox.js

@@ -2,24 +2,36 @@
 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 { CheckIcon } from "../icons/index.js";
+import { CheckIcon, MinusIcon } from "../icons/index.js";
 import { useControllableState } from "./use-controllable-state.js";
 /**
  * Self-contained checkbox: a `role="checkbox"` button with controlled/
- * uncontrolled checked state. Emits `data-checked`/`data-unchecked`/
- * `data-disabled` so the shared classes apply. Pass `name` to include a
- * hidden checkbox for forms.
+ * uncontrolled checked state. Supports a tri-state `"indeterminate"` (mixed)
+ * value for incoming controlled/default state. Emits `data-checked`/
+ * `data-unchecked`/`data-indeterminate`/`data-disabled` so the shared classes
+ * apply. Pass `name` to include a hidden checkbox for forms.
  */
 function Checkbox({ className, checked, defaultChecked = false, onCheckedChange, disabled, name, value = "on", onClick, ...props }) {
+    // The hook tracks the full tri-state so an incoming "indeterminate" survives;
+    // onCheckedChange is fired separately in onClick where the value is always a
+    // boolean, keeping the public callback signature unchanged.
     const [on, setOn] = useControllableState({
         value: checked,
         defaultValue: defaultChecked,
-        onChange: onCheckedChange,
     });
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", role: "checkbox", "aria-checked": on, disabled: disabled, "data-slot": "checkbox", "data-state": on ? "checked" : "unchecked", "data-checked": on ? "" : undefined, "data-unchecked": on ? undefined : "", "data-disabled": disabled ? "" : undefined, className: cn("cursor-pointer peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 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 isIndeterminate = on === "indeterminate";
+    // a11y: a tri-state checkbox must report "mixed" so assistive tech announces
+    // the partial selection instead of a plain checked/unchecked state.
+    const ariaChecked = isIndeterminate ? "mixed" : on;
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", role: "checkbox", "aria-checked": ariaChecked, disabled: disabled, "data-slot": "checkbox", "data-state": isIndeterminate ? "indeterminate" : on ? "checked" : "unchecked", "data-checked": on === true || isIndeterminate ? "" : undefined, "data-unchecked": on === false ? "" : undefined, "data-indeterminate": isIndeterminate ? "" : undefined, "data-disabled": disabled ? "" : undefined, className: cn("cursor-pointer peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 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)
-                        setOn(!on);
-                }, ...props, children: on ? (_jsx("span", { "data-slot": "checkbox-indicator", "data-checked": "", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) })) : null }), name ? (_jsx("input", { type: "checkbox", "aria-hidden": true, tabIndex: -1, name: name, value: value, checked: on, disabled: disabled, readOnly: true, className: "sr-only" })) : null] }));
+                    if (e.defaultPrevented)
+                        return;
+                    // A user click always resolves to a real boolean: indeterminate and
+                    // unchecked both become checked, checked becomes unchecked.
+                    const next = on === true ? false : true;
+                    setOn(next);
+                    onCheckedChange?.(next);
+                }, ...props, children: on === true ? (_jsx("span", { "data-slot": "checkbox-indicator", "data-checked": "", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) })) : isIndeterminate ? (_jsx("span", { "data-slot": "checkbox-indicator", "data-indeterminate": "", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(MinusIcon, {}) })) : null }), name ? (_jsx("input", { type: "checkbox", "aria-hidden": true, tabIndex: -1, name: name, value: value, checked: on === true, disabled: disabled, readOnly: true, className: "sr-only" })) : null] }));
 }
 export { Checkbox };

package/dist/ui/context-menu.js

@@ -6,6 +6,8 @@ import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
+import { useTypeahead } from "./use-typeahead.js";
+import { usePointerMoved } from "./use-pointer-moved.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -63,8 +65,14 @@ 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();
+    // Pointer-move focus follows the cursor, but keyboard arrow nav scrolls the
+    // list and fires a synthetic pointermove at the same coordinates — guard it
+    // so scrolling doesn't yank focus off the keyboard target.
+    const hasPointerMoved = usePointerMoved();
     // 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 +102,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,7 +169,10 @@ 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) => {
+                if (!hasPointerMoved(e))
+                    return;
                 const item = e.target.closest('[role^="menuitem"]:not([data-disabled])');
                 if (item && item !== document.activeElement)
                     item.focus();
@@ -190,6 +203,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 }) {
@@ -200,7 +223,10 @@ function ContextMenuLabel({ className, inset, ...props }) {
 }
 function ContextMenuItem({ className, inset, variant = "default", disabled, onSelect, onClick, ...props }) {
     const { setOpen } = useMenu();
-    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "context-menu-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn("group/context-menu-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), onClick: (e) => {
+    return (_jsx("div", { role: "menuitem", tabIndex: -1, "aria-disabled": disabled || undefined, "data-slot": "context-menu-item", "data-inset": inset ? "" : undefined, "data-variant": variant, "data-disabled": disabled ? "" : undefined, className: cn(
+        // focus-visible ring gives keyboard roving focus a visible indicator
+        // (outline-hidden removes the native one); pointer focus stays ring-free.
+        "group/context-menu-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -212,7 +238,9 @@ function ContextMenuItem({ className, inset, variant = "default", disabled, onSe
 }
 const RadioGroupContext = React.createContext({});
 function ContextMenuCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }) {
-    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "context-menu-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+    return (_jsxs("div", { role: "menuitemcheckbox", tabIndex: -1, "aria-checked": !!checked, "aria-disabled": disabled || undefined, "data-slot": "context-menu-checkbox-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn(
+        // focus-visible ring gives keyboard roving focus a visible indicator.
+        "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -226,7 +254,9 @@ function ContextMenuRadioGroup({ value, onValueChange, ...props }) {
 function ContextMenuRadioItem({ className, children, value, disabled, inset, onClick, ...props }) {
     const { value: groupValue, onValueChange } = React.useContext(RadioGroupContext);
     const checked = groupValue === value;
-    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "context-menu-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn("relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
+    return (_jsxs("div", { role: "menuitemradio", tabIndex: -1, "aria-checked": checked, "aria-disabled": disabled || undefined, "data-slot": "context-menu-radio-item", "data-disabled": disabled ? "" : undefined, "data-inset": inset ? "" : undefined, className: cn(
+        // focus-visible ring gives keyboard roving focus a visible indicator.
+        "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onClick: (e) => {
             if (disabled)
                 return;
             onClick?.(e);
@@ -250,11 +280,14 @@ function useSub() {
 function ContextMenuSub({ defaultOpen = false, children, }) {
     const [open, setOpen] = React.useState(defaultOpen);
     const triggerRef = React.useRef(null);
-    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef }, children: children }));
+    const subContentId = React.useId();
+    return (_jsx(SubContext.Provider, { value: { open, setOpen, triggerRef, subContentId }, children: children }));
 }
 function ContextMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }) {
-    const { open, setOpen, triggerRef } = useSub();
-    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "data-slot": "context-menu-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn("flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
+    const { open, setOpen, triggerRef, subContentId } = useSub();
+    return (_jsxs("div", { ref: triggerRef, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? subContentId : undefined, "data-slot": "context-menu-sub-trigger", "data-inset": inset ? "" : undefined, "data-popup-open": open ? "" : undefined, "data-open": open ? "" : undefined, className: cn(
+        // focus-visible ring gives keyboard roving focus a visible indicator.
+        "flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), onMouseEnter: (e) => {
             onMouseEnter?.(e);
             setOpen(true);
         }, onClick: (e) => {
@@ -272,7 +305,7 @@ function ContextMenuSubTrigger({ className, inset, children, onClick, onKeyDown,
         }, ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
 }
 function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
-    const { open, setOpen, triggerRef } = useSub();
+    const { open, setOpen, triggerRef, subContentId } = useSub();
     const { layers } = useMenu();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
@@ -282,6 +315,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)
@@ -313,7 +347,10 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
     }, [open]);
     if (!mounted)
         return null;
-    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), role: "menu", tabIndex: -1, "data-slot": "context-menu-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
+    return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, containerRef), 
+            // Matches the SubTrigger's aria-controls target so the trigger->submenu
+            // relationship is exposed to assistive tech.
+            id: subContentId, role: "menu", tabIndex: -1, "data-slot": "context-menu-sub-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? "right", style: {
                 position: "fixed",
                 left: pos?.x ?? 0,
                 top: pos?.y ?? 0,
@@ -340,6 +377,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, };