@stevederico/skateboard-ui 4.1.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # CHANGELOG
 
+4.5.0
+
+  Toggle uses resolvedTheme
+  ThemeProvider owns dark
+  Drop dark-mode stripping
+  Slot render child fallback
+
+4.4.0
+
+  Document a11y releases
+  Fix peer-dep naming
+
+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

package/README.md

@@ -6,6 +6,8 @@ React component library for rapid application development. Built with TypeScript
 
 **Self-contained components (v4.0).** Every component is now hand-written with no primitive framework underneath — the previously-vendored `@base-ui/react` bundle (~31k lines) is gone. Floating positioning, focus trapping, dismiss layers, and animations are small in-house hooks; modals use the native `<dialog>` element. The legacy `shadcn/ui/*` import paths still work — they re-export the new `ui/*` components — so existing apps need no changes.
 
+**Accessibility-hardened (v4.1–4.3).** The self-contained tier was put through three rounds of a11y work: menu/select typeahead, correct keyboard focus management and tab-stops (menus, tabs, radios, popovers, navigation menu), ARIA wiring (`aria-controls`, labelled-by, indeterminate checkbox mixed state, named popover/slider dialogs), scroll-lock and exit-animation fixes, plus matching DOMException error names. Each release adds to a Playwright a11y regression suite that runs `workers: 1`.
+
 **TypeScript with full type declarations.** Source is TypeScript, compiled to plain JavaScript + `.d.ts` in `dist/` (`npm run build`). JavaScript apps consume the compiled JS exactly as before — import paths are unchanged — and TypeScript apps get real types for every export (`SkateboardConstants`, `User`, component props, `VariantProps`, typed icons).
 
 **Node.js 24+** is required in the app repo for build tooling and backend (see `engines` in `package.json`). The UI package itself runs in the browser.
@@ -1309,7 +1311,7 @@ All components support dark mode automatically and accept a `className` prop for
 ### Required peer dependencies
 - React 19.1+
 - react-dom 19.1+
-- react-router-dom 7.0+
+- react-router 7.0+
 
 ### Hard dependencies
 

package/dist/components/ThemeToggle.js

@@ -5,14 +5,14 @@ import { Sun, Moon } from '../icons/index.js';
 import { Button } from '../shadcn/ui/button.js';
 import { cn } from '../shadcn/lib/utils.js';
 export default function ThemeToggle({ className = "", iconSize = 16, variant = "settings", ...props }) {
-    const { theme, setTheme } = useTheme();
+    const { resolvedTheme, setTheme } = useTheme();
     const [mounted, setMounted] = React.useState(false);
     React.useEffect(() => {
         setMounted(true);
     }, []);
     if (!mounted)
         return null;
-    const isDarkMode = theme === 'dark';
+    const isDarkMode = resolvedTheme === 'dark';
     const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');
     return (_jsx(Button, { variant: variant === "landing" ? "outline" : "ghost", size: "icon", onClick: toggleTheme, className: cn(className), "aria-label": "Toggle dark mode", ...props, children: isDarkMode
             ? _jsx(Sun, { size: iconSize })

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.d.ts

@@ -321,7 +321,8 @@ export declare function showUpgradeSheet(upgradeSheetRef: RefObject<{
  */
 export declare function timestampToString(input: number | Date, format?: string): string | number | Date;
 /**
- * Hook that sets the document title and removes dark mode on non-app pages.
+ * Hook that sets the document title on navigation.
+ * Dark mode is owned by ThemeProvider — never touch the class here.
  *
  * @param {Object} location - react-router location object
  */

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)
@@ -655,17 +657,14 @@ export function timestampToString(input, format = "DOB") {
     }
 }
 /**
- * Hook that sets the document title and removes dark mode on non-app pages.
+ * Hook that sets the document title on navigation.
+ * Dark mode is owned by ThemeProvider — never touch the class here.
  *
  * @param {Object} location - react-router location object
  */
 export function useAppSetup(location) {
     useEffect(() => {
         document.title = getConstants().appName;
-        if (!location.pathname.toLowerCase().includes('app')) {
-            document.documentElement.classList.remove('dark');
-            document.body.classList.remove('dark');
-        }
     }, [location.pathname]);
 }
 // ===== API REQUEST UTILITIES =====
@@ -703,10 +702,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 +788,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 +862,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 +900,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

@@ -7,6 +7,7 @@ import { Portal } from "./portal.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
 import { useTypeahead } from "./use-typeahead.js";
+import { usePointerMoved } from "./use-pointer-moved.js";
 import { ChevronRightIcon, CheckIcon } from "../icons/index.js";
 const MenuContext = React.createContext(null);
 function useMenu() {
@@ -65,6 +66,10 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
     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. availableHeight caps the menu so long
     // lists scroll inside the viewport instead of overflowing it.
@@ -166,6 +171,8 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                 ["--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();
@@ -216,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);
@@ -228,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);
@@ -242,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);
@@ -266,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) => {
@@ -288,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, {
@@ -330,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,

package/dist/ui/dialog.js

@@ -6,6 +6,8 @@ import { Button } from "./button.js";
 import { Slot, resolveRender } from "./slot.js";
 import { XIcon } from "../icons/index.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useDialogLabelling } from "./use-labelling.js";
+import { useScrollLock } from "./use-scroll-lock.js";
 const DialogContext = React.createContext(null);
 function useDialog() {
     const ctx = React.useContext(DialogContext);
@@ -24,9 +26,10 @@ function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const titleId = React.useId();
-    const descriptionId = React.useId();
-    return (_jsx(DialogContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+    // Track which labelling parts actually render so DialogContent can reference
+    // them only when present, avoiding a dangling aria-labelledby/-describedby IDREF.
+    const labelling = useDialogLabelling();
+    return (_jsx(DialogContext.Provider, { value: { open: isOpen, setOpen, ...labelling }, children: children }));
 }
 function DialogTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen } = useDialog();
@@ -57,7 +60,7 @@ function DialogOverlay() {
     return null;
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    const { open, setOpen, titleId, descriptionId } = useDialog();
+    const { open, setOpen, labelledBy, describedBy } = useDialog();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
     React.useEffect(() => {
@@ -69,17 +72,11 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
         else if (!open && node.open)
             node.close();
     }, [open]);
-    // Lock background scroll while 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, "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-slot": "dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
+    // Reentrant, reference-counted scroll lock so stacked overlays don't clobber
+    // each other's overflow restore (an inner close would otherwise unlock scroll
+    // while an outer dialog is still open).
+    useScrollLock(open);
+    return (_jsx("dialog", { ref: ref, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "data-slot": "dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onPointerDown: (e) => {
@@ -99,11 +96,15 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
     return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }))] }));
 }
 function DialogTitle({ className, ...props }) {
-    const { titleId } = useDialog();
+    const { titleId, registerTitle } = useDialog();
+    // Register presence so the container wires aria-labelledby only when a title exists.
+    React.useEffect(registerTitle, [registerTitle]);
     return (_jsx("h2", { id: titleId, "data-slot": "dialog-title", className: cn("leading-none font-medium", className), ...props }));
 }
 function DialogDescription({ className, ...props }) {
-    const { descriptionId } = useDialog();
+    const { descriptionId, registerDescription } = useDialog();
+    // Register presence so the container wires aria-describedby only when a description exists.
+    React.useEffect(registerDescription, [registerDescription]);
     return (_jsx("p", { id: descriptionId, "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
 }
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };