@stevederico/skateboard-ui 4.1.0 → 4.5.0

package/dist/ui/sheet.js

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

package/dist/ui/slider.d.ts

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

package/dist/ui/slider.js

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

package/dist/ui/slot.d.ts

@@ -19,6 +19,10 @@ declare function Slot({ children, className, style, ref, ...props }: SlotProps):
  * element to `render` to control the rendered element; here that maps onto the
  * `asChild` + Slot mechanism. Returns whether to use the Slot and what child to
  * render through it, so `render={<Button/>}` keeps working on the new components.
+ * Matching Base UI's render-prop semantics, the component's children become the
+ * render element's children when the element has none of its own — so
+ * `<Trigger render={<Button/>}>Columns</Trigger>` renders the label, while
+ * `render={<Button>Sign Out</Button>}` keeps the element's own children.
  */
 declare function resolveRender(asChild: boolean | undefined, render: React.ReactElement | undefined, children: React.ReactNode): {
     useSlot: boolean;

package/dist/ui/slot.js

@@ -53,10 +53,28 @@ function Slot({ children, className, style, ref, ...props }) {
  * element to `render` to control the rendered element; here that maps onto the
  * `asChild` + Slot mechanism. Returns whether to use the Slot and what child to
  * render through it, so `render={<Button/>}` keeps working on the new components.
+ * Matching Base UI's render-prop semantics, the component's children become the
+ * render element's children when the element has none of its own — so
+ * `<Trigger render={<Button/>}>Columns</Trigger>` renders the label, while
+ * `render={<Button>Sign Out</Button>}` keeps the element's own children.
  */
 function resolveRender(asChild, render, children) {
-    if (React.isValidElement(render))
+    if (React.isValidElement(render)) {
+        const renderProps = render.props;
+        const ownChildren = typeof renderProps === "object" &&
+            renderProps !== null &&
+            "children" in renderProps
+            ? renderProps.children
+            : undefined;
+        // != null, not truthiness: 0 and "" are renderable children to keep.
+        if (ownChildren == null && children != null) {
+            return {
+                useSlot: true,
+                slotChild: React.cloneElement(render, undefined, children),
+            };
+        }
         return { useSlot: true, slotChild: render };
+    }
     return { useSlot: !!asChild, slotChild: children };
 }
 export { Slot, mergeRefs, resolveRender };

package/dist/ui/tooltip.js

@@ -68,7 +68,7 @@ function TooltipTrigger({ asChild = false, render, nativeButton: _nativeButton,
         }, ...props, children: slotChild }));
 }
 function TooltipContent({ className, style, ref, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    const { open, contentId, triggerRef } = useTooltip();
+    const { open, contentId, triggerRef, hide } = useTooltip();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -76,6 +76,32 @@ function TooltipContent({ className, style, ref, side = "top", sideOffset = 4, a
         sideOffset,
         alignOffset,
     });
+    // Touch dismissal: on touch devices a tooltip can open via tap/long-press
+    // (which focuses the trigger) with no pointer-leave/blur to close it again.
+    // While open, close it when the user points outside both the trigger and the
+    // content, and on scroll — so it can never get stuck on screen. Capture phase
+    // ensures we observe the pointerdown even if inner handlers stop propagation.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (e) => {
+            const target = e.target;
+            if (!(target instanceof Node))
+                return;
+            const trigger = triggerRef.current;
+            const content = presenceRef.current;
+            if (trigger?.contains(target) || content?.contains(target))
+                return;
+            hide();
+        };
+        const onScroll = () => hide();
+        document.addEventListener("pointerdown", onPointerDown, true);
+        window.addEventListener("scroll", onScroll, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+            window.removeEventListener("scroll", onScroll, true);
+        };
+    }, [open, hide, triggerRef, presenceRef]);
     if (!mounted)
         return null;
     return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, ref), id: contentId, role: "tooltip", "data-slot": "tooltip-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {

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

@@ -0,0 +1,21 @@
+export interface DialogLabelling {
+    titleId: string;
+    descriptionId: string;
+    /** Call from the title element's effect; returns the unregister cleanup. */
+    registerTitle: () => () => void;
+    /** Call from the description element's effect; returns the unregister cleanup. */
+    registerDescription: () => () => void;
+    /** `aria-labelledby` value — undefined when no title is rendered, so the
+     * attribute is omitted instead of pointing at a missing element. */
+    labelledBy: string | undefined;
+    /** `aria-describedby` value — undefined when no description is rendered. */
+    describedBy: string | undefined;
+}
+/**
+ * Tracks whether a title/description part is actually rendered inside an overlay
+ * so the container can wire `aria-labelledby`/`aria-describedby` only when the
+ * referenced element exists. An unconditional IDREF to an absent node is an
+ * accessibility defect (dangling reference) that assistive tech may announce as
+ * an empty or broken label. Reference-counted so it is robust to remounting.
+ */
+export declare function useDialogLabelling(): DialogLabelling;

package/dist/ui/use-labelling.js

@@ -0,0 +1,43 @@
+"use client";
+import * as React from "react";
+/**
+ * Tracks whether a title/description part is actually rendered inside an overlay
+ * so the container can wire `aria-labelledby`/`aria-describedby` only when the
+ * referenced element exists. An unconditional IDREF to an absent node is an
+ * accessibility defect (dangling reference) that assistive tech may announce as
+ * an empty or broken label. Reference-counted so it is robust to remounting.
+ */
+export function useDialogLabelling() {
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    const titleCount = React.useRef(0);
+    const descriptionCount = React.useRef(0);
+    const [hasTitle, setHasTitle] = React.useState(false);
+    const [hasDescription, setHasDescription] = React.useState(false);
+    const registerTitle = React.useCallback(() => {
+        titleCount.current += 1;
+        setHasTitle(true);
+        return () => {
+            titleCount.current -= 1;
+            if (titleCount.current === 0)
+                setHasTitle(false);
+        };
+    }, []);
+    const registerDescription = React.useCallback(() => {
+        descriptionCount.current += 1;
+        setHasDescription(true);
+        return () => {
+            descriptionCount.current -= 1;
+            if (descriptionCount.current === 0)
+                setHasDescription(false);
+        };
+    }, []);
+    return {
+        titleId,
+        descriptionId,
+        registerTitle,
+        registerDescription,
+        labelledBy: hasTitle ? titleId : undefined,
+        describedBy: hasDescription ? descriptionId : undefined,
+    };
+}

package/dist/ui/use-pointer-moved.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Guard against synthetic `pointermove` events that fire when content scrolls
+ * under a stationary pointer (e.g. keyboard arrow navigation scrolls the focused
+ * item into view). Those events report the SAME client coordinates as the last,
+ * so pointer-driven focus would otherwise yank focus off the keyboard target.
+ *
+ * Returns a predicate that is true only when the pointer's client position
+ * actually changed since the previous call — wire it at the top of a menu's
+ * `onPointerMove` and bail when it returns false.
+ */
+export declare function usePointerMoved(): (event: React.PointerEvent) => boolean;

package/dist/ui/use-pointer-moved.js

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+/**
+ * Guard against synthetic `pointermove` events that fire when content scrolls
+ * under a stationary pointer (e.g. keyboard arrow navigation scrolls the focused
+ * item into view). Those events report the SAME client coordinates as the last,
+ * so pointer-driven focus would otherwise yank focus off the keyboard target.
+ *
+ * Returns a predicate that is true only when the pointer's client position
+ * actually changed since the previous call — wire it at the top of a menu's
+ * `onPointerMove` and bail when it returns false.
+ */
+export function usePointerMoved() {
+    const last = React.useRef(null);
+    return React.useCallback((event) => {
+        const prev = last.current;
+        const moved = !prev || prev.x !== event.clientX || prev.y !== event.clientY;
+        last.current = { x: event.clientX, y: event.clientY };
+        return moved;
+    }, []);
+}

package/dist/ui/use-scroll-lock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lock background scroll while `active` is true, reentrant across any number of
+ * simultaneously-open overlays. The original `body` overflow is captured on the
+ * first lock and restored only when the last lock releases.
+ */
+export declare function useScrollLock(active: boolean): void;

package/dist/ui/use-scroll-lock.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+// Module-level reference count so stacked overlays share one lock: the first to
+// open saves and replaces `body` overflow, and only the last to close restores
+// it. Without this, an inner overlay's cleanup would unlock scroll while an
+// outer overlay is still open (or vice-versa).
+let lockCount = 0;
+let previousOverflow = "";
+/**
+ * Lock background scroll while `active` is true, reentrant across any number of
+ * simultaneously-open overlays. The original `body` overflow is captured on the
+ * first lock and restored only when the last lock releases.
+ */
+export function useScrollLock(active) {
+    React.useEffect(() => {
+        if (!active)
+            return;
+        if (lockCount === 0) {
+            previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        lockCount++;
+        return () => {
+            lockCount--;
+            if (lockCount === 0)
+                document.body.style.overflow = previousOverflow;
+        };
+    }, [active]);
+}

package/package.json

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