@stevederico/skateboard-ui 4.9.0 → 4.11.0

package/dist/ui/radio-group.js

@@ -53,8 +53,19 @@ function RadioGroupItem({ className, value, onClick, disabled, ref, ...props })
         if (selected !== undefined)
             return;
         const el = btnRef.current;
-        const first = el?.parentElement?.querySelector('[role="radio"]:not([disabled]):not([data-disabled])');
+        // Scope to the radiogroup (not the immediate parent) so per-item wrappers
+        // like <label>/<div> don't change which radio counts as "first enabled" —
+        // this matches the arrow-key handler, which queries the group element.
+        const group = el?.closest('[role="radiogroup"]');
+        const first = (group ?? el)?.querySelector('[role="radio"]:not([disabled]):not([data-disabled])');
         setIsFirstEnabled(first === el);
+        // No dependency array on purpose: "first enabled" depends on the whole
+        // sibling set, so an item must recompute when ANY sibling's disabled state
+        // or order changes — a per-item dep list ([selected, value, disabled])
+        // misses those cross-sibling changes and can leave the group with zero tab
+        // stops. The body is cheap (two querySelectors) and setIsFirstEnabled bails
+        // out of re-render when the value is unchanged, so running every render is
+        // negligible.
     });
     const tabbable = checked || (selected === undefined && isFirstEnabled);
     return (_jsx("button", { ref: mergeRefs(btnRef, ref), type: "button", role: "radio", "aria-checked": checked, disabled: disabled, tabIndex: tabbable ? 0 : -1, "data-slot": "radio-group-item", "data-state": checked ? "checked" : "unchecked", "data-checked": checked ? "" : undefined, className: cn("cursor-pointer group/radio-group-item peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), onClick: (e) => {

package/dist/ui/select.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
 import { mergeRefs } from "./slot.js";
 import { Portal } from "./portal.js";
+import { registerLayer } from "./layer-stack.js";
 import { useFloating } from "./use-floating.js";
 import { usePresence } from "./use-presence.js";
 import { useControllableState } from "./use-controllable-state.js";
@@ -33,10 +34,6 @@ function Select({ value, defaultValue, onValueChange, open, defaultOpen = false,
     const triggerId = React.useId();
     const [labels, setLabels] = React.useState({});
     const registerLabel = React.useCallback((v, label) => setLabels((prev) => ({ ...prev, [v]: label })), []);
-    const unregisterLabel = React.useCallback((v) => setLabels((prev) => {
-        const { [v]: _, ...rest } = prev;
-        return rest;
-    }), []);
     const setValue = React.useCallback((v) => {
         setSelected(v);
         setOpen(false);
@@ -52,7 +49,6 @@ function Select({ value, defaultValue, onValueChange, open, defaultOpen = false,
             triggerId,
             labels,
             registerLabel,
-            unregisterLabel,
         }, children: children }));
 }
 function SelectGroup({ className, ...props }) {
@@ -124,6 +120,8 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
     React.useEffect(() => {
         if (!open)
             return;
+        const node = containerRef.current;
+        const off = node ? registerLayer(node) : undefined;
         const onPointerDown = (e) => {
             const t = e.target;
             if (triggerRef.current?.contains(t))
@@ -135,6 +133,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
         document.addEventListener("pointerdown", onPointerDown, true);
         return () => {
             document.removeEventListener("pointerdown", onPointerDown, true);
+            off?.();
         };
     }, [open, setOpen, triggerRef]);
     // While closed, render the items into a hidden tree so their value→label

package/dist/ui/sheet.js

@@ -28,9 +28,12 @@ function Sheet({ open, defaultOpen = false, onOpenChange, children }) {
     // 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();
+    // Stable id wiring the trigger's aria-controls to the content's id.
+    const contentId = React.useId();
     return (_jsx(SheetContext.Provider, { value: {
             open: isOpen,
             setOpen,
+            contentId,
             titleId,
             descriptionId,
             registerTitle,
@@ -40,10 +43,10 @@ function Sheet({ open, defaultOpen = false, onOpenChange, children }) {
         }, children: children }));
 }
 function SheetTrigger({ asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
-    const { open, setOpen } = useSheet();
+    const { open, setOpen, contentId } = useSheet();
     const { useSlot, slotChild } = resolveRender(asChild, render, children);
     const Comp = useSlot ? Slot : "button";
-    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "sheet-trigger", "aria-haspopup": "dialog", "data-state": open ? "open" : "closed", onClick: (e) => {
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "sheet-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(true);
@@ -80,7 +83,7 @@ const SIDE_OUT = {
     bottom: "slide-out-to-bottom-52",
 };
 function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
-    const { open, setOpen, labelledBy, describedBy } = useSheet();
+    const { open, setOpen, contentId, labelledBy, describedBy } = useSheet();
     const ref = React.useRef(null);
     const pointerDownOnBackdrop = React.useRef(false);
     const [mounted, presenceRef] = usePresence(open);
@@ -98,7 +101,7 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
     useScrollLock(mounted);
     if (!mounted)
         return null;
-    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) => {
+    return (_jsxs("dialog", { ...props, ref: mergeRefs(ref, presenceRef), id: contentId, "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) => {

package/dist/ui/slider.js

@@ -4,6 +4,17 @@ import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
 import { useControllableState } from "./use-controllable-state.js";
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+// Snap a value to the step grid relative to `min`, then round away the
+// floating-point drift that `Math.round(x / step) * step` introduces (e.g.
+// 0.1 * 3 === 0.30000000000000004) so value/aria-valuenow stay clean.
+const snapToStep = (v, min, step) => {
+    if (step <= 0)
+        return v;
+    const snapped = min + Math.round((v - min) / step) * step;
+    // Derive the decimal precision from the step (e.g. 0.1 -> 1, 0.25 -> 2).
+    const decimals = (String(step).split(".")[1] ?? "").length;
+    return decimals > 0 ? Number(snapped.toFixed(decimals)) : snapped;
+};
 /**
  * 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,
@@ -21,6 +32,12 @@ function Slider({ className, value, defaultValue, onValueChange, min = 0, max =
     const trackRef = React.useRef(null);
     const activeThumb = React.useRef(0);
     const vertical = orientation === "vertical";
+    // Track the latest values so pointer-move handlers (which close over the
+    // pointerdown-time render) read fresh state — otherwise, in controlled mode,
+    // a parent correction (e.g. min-gap push between thumbs) gets overwritten on
+    // the next move.
+    const valuesRef = React.useRef(values);
+    valuesRef.current = values;
     const percent = (v) => ((v - min) / (max - min)) * 100;
     const valueFromPointer = (clientX, clientY) => {
         const track = trackRef.current;
@@ -31,17 +48,28 @@ function Slider({ className, value, defaultValue, onValueChange, min = 0, max =
             ? (rect.bottom - clientY) / rect.height
             : (clientX - rect.left) / rect.width;
         const raw = min + clamp(ratio, 0, 1) * (max - min);
-        return clamp(Math.round(raw / step) * step, min, max);
+        return clamp(snapToStep(raw, min, step), min, max);
     };
     const updateThumb = (index, next) => {
-        setValues(values.map((v, i) => (i === index ? next : v)));
+        const current = valuesRef.current;
+        // Clamp the moving thumb against its immediate neighbors so values stay
+        // ordered. When neighbors share this thumb's value (overlap), only the
+        // actively-dragged thumb is allowed to move away — clamping against the
+        // neighbor on the side it's heading lets it pass instead of pinning it.
+        const lower = index > 0 ? current[index - 1] : min;
+        const upper = index < current.length - 1 ? current[index + 1] : max;
+        const clamped = clamp(next, lower, upper);
+        setValues(current.map((v, i) => (i === index ? clamped : v)));
     };
     const nearestThumb = (v) => {
         let best = 0;
         let bestDist = Infinity;
-        values.forEach((tv, i) => {
+        valuesRef.current.forEach((tv, i) => {
             const d = Math.abs(tv - v);
-            if (d < bestDist) {
+            // On exact ties prefer the thumb whose move direction matches the
+            // pointer, so overlapping thumbs don't both resolve to the lowest index
+            // (which would leave the higher-index thumb unmovable).
+            if (d < bestDist || (d === bestDist && v > tv)) {
                 bestDist = d;
                 best = i;
             }
@@ -56,27 +84,39 @@ function Slider({ className, value, defaultValue, onValueChange, min = 0, max =
         activeThumb.current = idx;
         updateThumb(idx, v);
         const target = e.currentTarget;
-        target.setPointerCapture(e.pointerId);
+        const pointerId = e.pointerId;
+        target.setPointerCapture(pointerId);
         const onMove = (ev) => {
             updateThumb(activeThumb.current, valueFromPointer(ev.clientX, ev.clientY));
         };
-        const onUp = (ev) => {
-            target.releasePointerCapture(ev.pointerId);
+        // Single teardown for every drag-ending event so a cancelled or lost
+        // pointer (pointercancel/lostpointercapture) doesn't leak the move/up
+        // listeners and leave the drag stuck.
+        const teardown = () => {
+            if (target.hasPointerCapture(pointerId)) {
+                target.releasePointerCapture(pointerId);
+            }
             target.removeEventListener("pointermove", onMove);
-            target.removeEventListener("pointerup", onUp);
+            target.removeEventListener("pointerup", teardown);
+            target.removeEventListener("pointercancel", teardown);
+            target.removeEventListener("lostpointercapture", teardown);
         };
         target.addEventListener("pointermove", onMove);
-        target.addEventListener("pointerup", onUp);
+        target.addEventListener("pointerup", teardown);
+        target.addEventListener("pointercancel", teardown);
+        target.addEventListener("lostpointercapture", teardown);
     };
     const onThumbKeyDown = (index) => (e) => {
         if (disabled)
             return;
         let next = null;
         const cur = values[index];
+        // Round each step back onto the grid so repeated arrow presses don't
+        // accumulate float drift in value/aria-valuenow.
         if (e.key === "ArrowRight" || e.key === "ArrowUp")
-            next = cur + step;
+            next = snapToStep(cur + step, min, step);
         else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
-            next = cur - step;
+            next = snapToStep(cur - step, min, step);
         else if (e.key === "Home")
             next = min;
         else if (e.key === "End")

package/dist/ui/slot.js

@@ -24,7 +24,9 @@ function Slot({ children, className, style, ref, ...props }) {
     const childProps = child.props;
     // Child props win on plain values, but event handlers (on*) are COMPOSED so
     // the slot-injected behavior (open/close/etc.) runs alongside the child's own
-    // handler — matching Radix Slot / Base UI mergeProps instead of clobbering it.
+    // handler — matching Radix composeEventHandlers instead of clobbering it. The
+    // child's own handler runs FIRST; the forwarded slot handler runs ONLY IF the
+    // child hasn't called preventDefault, so a child can opt out of slot behavior.
     const merged = { ...props, ...childProps };
     for (const key of Object.keys(props)) {
         const slotHandler = props[key];
@@ -34,11 +36,11 @@ function Slot({ children, className, style, ref, ...props }) {
             typeof childHandler === "function") {
             merged[key] = (...args) => {
                 ;
-                slotHandler(...args);
+                childHandler(...args);
                 const event = args[0];
                 if (!event?.defaultPrevented) {
                     ;
-                    childHandler(...args);
+                    slotHandler(...args);
                 }
             };
         }

package/dist/ui/tabs.js

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

package/dist/ui/use-dismiss.js

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { isInLayer } from "./layer-stack.js";
 // Shared stack of open dismissable layers (most-recently-opened last). Escape
 // only closes the topmost layer, so a popover opened inside a dialog doesn't
 // close both at once.
@@ -35,6 +36,8 @@ export function useDismiss(open, onDismiss, refs) {
                 return;
             if (refs.some((r) => r.current && r.current.contains(target)))
                 return;
+            if (isInLayer(target))
+                return;
             onDismissRef.current();
         };
         document.addEventListener("keydown", onKeyDown, true);

package/package.json

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