@stevederico/skateboard-ui 4.1.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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

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

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

package/dist/ui/drawer.js

@@ -4,7 +4,9 @@ import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
 import { Slot, mergeRefs, resolveRender } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
+import { useDialogLabelling } from "./use-labelling.js";
 import { usePresence } from "./use-presence.js";
+import { useScrollLock } from "./use-scroll-lock.js";
 // Drag thresholds and animation timing ported from vaul (MIT — Emil Kowalski).
 // https://github.com/emilkowalski/vaul/blob/main/src/constants.ts
 const VELOCITY_THRESHOLD = 0.4;
@@ -51,9 +53,17 @@ function Drawer({ open, defaultOpen = false, onOpenChange, children }) {
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const titleId = React.useId();
-    const descriptionId = React.useId();
-    return (_jsx(DrawerContext.Provider, { value: { open: isOpen, setOpen, titleId, descriptionId }, children: children }));
+    const { titleId, descriptionId, registerTitle, registerDescription, labelledBy, describedBy } = useDialogLabelling();
+    return (_jsx(DrawerContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            titleId,
+            descriptionId,
+            registerTitle,
+            registerDescription,
+            labelledBy,
+            describedBy,
+        }, children: children }));
 }
 function DrawerTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
     const { open, setOpen } = useDrawer();
@@ -84,7 +94,7 @@ function DrawerOverlay() {
     return null;
 }
 function DrawerContent({ className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
-    const { open, setOpen, titleId, descriptionId } = useDrawer();
+    const { open, setOpen, labelledBy, describedBy } = useDrawer();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
     const [mounted, presenceRef] = usePresence(open);
@@ -103,15 +113,11 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
         else if (!mounted && node.open)
             node.close();
     }, [mounted]);
-    React.useEffect(() => {
-        if (!mounted)
-            return;
-        const prev = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = prev;
-        };
-    }, [mounted]);
+    // Reentrant, reference-counted body scroll lock: when drawers stack with other
+    // overlays, the inline overflow effect would let an inner overlay's cleanup
+    // unlock scroll while an outer overlay is still open. useScrollLock shares one
+    // lock so only the last overlay to close restores the original overflow.
+    useScrollLock(mounted);
     // Clear any drag-leftover inline transform whenever we (re)open.
     React.useEffect(() => {
         if (open && ref.current) {
@@ -207,7 +213,7 @@ function DrawerContent({ className, children, onPointerDown, onPointerMove, onPo
     };
     if (!mounted)
         return null;
-    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) => {
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), "aria-labelledby": labelledBy, "aria-describedby": describedBy, "data-slot": "drawer-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
         }, onClose: () => setOpen(false), onClick: (e) => {
@@ -233,11 +239,17 @@ function DrawerFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
 }
 function DrawerTitle({ className, ...props }) {
-    const { titleId } = useDrawer();
+    const { titleId, registerTitle } = useDrawer();
+    // Register on mount so the container knows a title exists and can wire
+    // aria-labelledby; the returned cleanup unregisters on unmount.
+    React.useEffect(registerTitle, [registerTitle]);
     return (_jsx("h2", { id: titleId, "data-slot": "drawer-title", className: cn("font-medium text-foreground", className), ...props }));
 }
 function DrawerDescription({ className, ...props }) {
-    const { descriptionId } = useDrawer();
+    const { descriptionId, registerDescription } = useDrawer();
+    // Register on mount so the container knows a description exists and can wire
+    // aria-describedby; the returned cleanup unregisters on unmount.
+    React.useEffect(registerDescription, [registerDescription]);
     return (_jsx("p", { id: descriptionId, "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
 }
 export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };