@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

package/dist/esm/components/core/Radio.js

@@ -1,16 +1,11 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useState } from 'react';
+import { forwardRef, useId, useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from '../../_vendor/prop-types/index.js';
+import { cn } from '../../utils/cn.js';
 
 var _excluded = ["id", "name", "value", "checked", "defaultChecked", "onChange", "disabled", "required", "label", "size", "labelPosition", "radioColor", "className", "ariaLabel"];
-var cn = function cn() {
-  for (var _len = arguments.length, vals = new Array(_len), _key = 0; _key < _len; _key++) {
-    vals[_key] = arguments[_key];
-  }
-  return vals.filter(Boolean).join(" ");
-};
 var SIZE_MAP = {
   sm: {
     outer: "h-4 w-4",
@@ -74,6 +69,32 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
     if (checked === undefined) setInternalChecked(!!defaultChecked);
   }
   var isChecked = checked !== undefined ? checked : internalChecked;
+  // Merge the forwarded ref with our own so we can read the native state.
+  var inputRef = useRef(null);
+  var setRefs = useCallback(function (node) {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+  }, [ref]);
+  // DTUI-17: browsers never fire `change` on the radio being *unchecked*
+  // when a sibling in the same group is selected. In uncontrolled mode,
+  // listen for changes on any same-name radio and re-sync our visual state
+  // from the native input, so only one dot shows at a time.
+  useEffect(function () {
+    if (checked !== undefined || !name) return undefined;
+    var doc = inputRef.current && inputRef.current.ownerDocument;
+    if (!doc) return undefined;
+    var sync = function sync(e) {
+      var t = e.target;
+      var el = inputRef.current;
+      if (!el || t === el || !t || t.type !== "radio" || t.name !== name) return;
+      if (t.form !== el.form) return;
+      setInternalChecked(el.checked);
+    };
+    doc.addEventListener("change", sync, true);
+    return function () {
+      return doc.removeEventListener("change", sync, true);
+    };
+  }, [checked, name]);
   function handleChange(e) {
     if (checked === undefined) setInternalChecked(e.target.checked);
     if (typeof onChange === "function") onChange(e);
@@ -82,16 +103,19 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
   var showLabelLeft = label && labelPosition === "left";
   return jsxs("label", {
     htmlFor: inputId,
-    className: cn("relative inline-flex items-center select-none gap-2", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
+    className: cn(
+    // The invisible input covers the whole label, so the row is the hit
+    // area; on coarse pointers it is at least 44px tall.
+    "relative inline-flex items-center select-none gap-2 [@media(pointer:coarse)]:min-h-11", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
     "aria-disabled": disabled ? "true" : undefined,
     children: [showLabelLeft && jsxs("span", {
-      className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400"),
+      className: cn(sizeClasses.label, "leading-none text-foreground", disabled && "text-primary-400"),
       children: [label, required ? jsx("span", {
         "aria-hidden": "true",
         children: " *"
       }) : null]
     }), jsx("input", _objectSpread2({
-      ref: ref,
+      ref: setRefs,
       id: inputId,
       type: "radio",
       name: name,
@@ -102,18 +126,22 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
       disabled: disabled,
       required: required,
       "aria-label": ariaLabel,
-      className: "absolute inset-0 w-full h-full opacity-0 appearance-none m-0 z-10 cursor-pointer"
+      className: "peer absolute inset-0 w-full h-full opacity-0 appearance-none m-0 z-10 cursor-pointer disabled:cursor-not-allowed"
     }, props)), jsx("span", {
       "aria-hidden": true,
-      className: cn("inline-flex items-center justify-center rounded-full transition-all"),
+      "data-state": isChecked ? "checked" : "unchecked",
+      className: cn("inline-flex shrink-0 items-center justify-center rounded-full transition-shadow duration-fast motion-reduce:transition-none",
+      // Visible focus indicator: the native input is opacity-0, so the
+      // ring is drawn on the visual circle when the input has focus.
+      "peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 dark:peer-focus-visible:ring-offset-gray-900"),
       style: {
         "--radio-accent": accentColor
       },
       children: jsx("span", {
-        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-slate-100 dark:bg-gray-800" : "bg-white dark:bg-gray-900", isChecked ? "shadow-inner" : ""),
+        className: cn("flex items-center justify-center rounded-full border transition-colors duration-fast ease-standard motion-reduce:transition-none", isChecked ? "border-[color:var(--radio-accent)]" : "border-gray-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-gray-100 dark:bg-gray-800" : "bg-surface", isChecked ? "shadow-inner" : ""),
         children: jsx("span", {
           "aria-hidden": true,
-          className: cn("rounded-full transform transition-all duration-200 ease-out", sizeClasses.dot),
+          className: cn("rounded-full transform transition-[opacity,transform] duration-base ease-spring-out motion-reduce:transition-none", sizeClasses.dot),
           style: {
             backgroundColor: isChecked ? accentColor : "transparent",
             opacity: isChecked ? 1 : 0,
@@ -122,7 +150,7 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
         })
       })
     }), !showLabelLeft && label && jsxs("span", {
-      className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400"),
+      className: cn(sizeClasses.label, "leading-none text-foreground", disabled && "text-primary-400"),
       children: [label, required ? jsx("span", {
         "aria-hidden": "true",
         children: " *"

package/dist/esm/components/core/Rate.js

@@ -1,8 +1,9 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["count", "value", "defaultValue", "readOnly", "icon", "toggledIcon", "activeColor", "inactiveColor", "size", "onChange", "onClick", "text", "className", "id", "name"];
 function StarFilled(_ref) {
@@ -69,44 +70,98 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     hoverValue = _useState4[0],
     setHoverValue = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    focusValue = _useState6[0],
-    setFocusValue = _useState6[1];
+  var starRefs = useRef([]);
+  // Touch drag (DTUI-42): { pointerId, moved, value } while a finger is down.
+  var drag = useRef(null);
+  var suppressClick = useRef(false);
   var isControlled = value != null;
   var selectedValue = isControlled ? value : internalValue;
-  var displayValue = hoverValue != null ? hoverValue : focusValue != null ? focusValue : selectedValue;
+  // Hover preview (pointer devices only) wins over the committed value.
+  var displayValue = hoverValue != null ? hoverValue : selectedValue;
+  // Roving tabindex (DTUI-23): the group is a single tab stop — the star
+  // equal to the value, or the first star when nothing is selected.
+  var tabStop = selectedValue >= 1 ? Math.min(count, selectedValue) : 1;
   var InactiveIcon = icon !== null && icon !== void 0 ? icon : jsx(StarOutline, {
     size: size
   });
   var ActiveIcon = toggledIcon !== null && toggledIcon !== void 0 ? toggledIcon : jsx(StarFilled, {
     size: size
   });
-  var commit = function commit(n) {
-    if (readOnly) return;
+  var setValue = function setValue(n) {
     if (!isControlled) setInternalValue(n);
     if (typeof onChange === "function") onChange(n);
-    if (typeof onClick === "function") onClick(n);
   };
-  var handleMouseEnter = function handleMouseEnter(n) {
+  var commit = function commit(n) {
     if (readOnly) return;
-    setHoverValue(n);
+    setValue(n);
+    if (typeof onClick === "function") onClick(n);
   };
-  var handleMouseMove = function handleMouseMove(n) {
-    if (readOnly) return;
+  // Touch taps emit pointer/compat-mouse events with no matching "leave",
+  // which used to leave the preview stuck. Only real hover devices preview.
+  var handlePointerHover = function handlePointerHover(e, n) {
+    if (readOnly || e.pointerType === "touch") return;
     setHoverValue(n);
   };
-  var handleMouseLeave = function handleMouseLeave() {
+  var clearHover = function clearHover() {
     if (readOnly) return;
     setHoverValue(null);
   };
-  var handleFocus = function handleFocus(n) {
-    if (readOnly) return;
-    setFocusValue(n);
+  // Star under clientX: the last star whose left edge is at or before the finger,
+  // clamped to 1..count so sliding off either end keeps a valid rating.
+  var starAt = function starAt(clientX) {
+    var n = 1;
+    starRefs.current.slice(0, count).forEach(function (el, i) {
+      if (el && el.getBoundingClientRect().left <= clientX) n = i + 1;
+    });
+    return n;
   };
-  var handleBlur = function handleBlur() {
-    if (readOnly) return;
-    setFocusValue(null);
+  var handleDragStart = function handleDragStart(e) {
+    var _e$currentTarget$setP, _e$currentTarget;
+    if (readOnly || e.pointerType !== "touch") return;
+    var start = starAt(e.clientX);
+    drag.current = {
+      pointerId: e.pointerId,
+      moved: false,
+      value: start,
+      startX: e.clientX
+    };
+    (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
+  };
+  var handleDragMove = function handleDragMove(e) {
+    var d = drag.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    if (!d.moved && Math.abs(e.clientX - d.startX) < 4) return;
+    d.moved = true;
+    d.value = starAt(e.clientX);
+    setHoverValue(d.value);
+  };
+  var handleDragEnd = function handleDragEnd(e) {
+    var _e$currentTarget$rele, _e$currentTarget2, _starRefs$current;
+    var d = drag.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    drag.current = null;
+    (_e$currentTarget$rele = (_e$currentTarget2 = e.currentTarget).releasePointerCapture) === null || _e$currentTarget$rele === void 0 || _e$currentTarget$rele.call(_e$currentTarget2, e.pointerId);
+    setHoverValue(null);
+    if (!d.moved) return; // a plain tap: the star's click commits it
+    // The compat click that follows a drag must not re-commit the start star.
+    suppressClick.current = true;
+    setTimeout(function () {
+      suppressClick.current = false;
+    }, 400);
+    commit(d.value);
+    (_starRefs$current = starRefs.current[d.value - 1]) === null || _starRefs$current === void 0 || _starRefs$current.focus();
+  };
+  var handleDragCancel = function handleDragCancel(e) {
+    if (!drag.current || drag.current.pointerId !== e.pointerId) return;
+    drag.current = null;
+    setHoverValue(null);
+  };
+  var handleStarClick = function handleStarClick(n) {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    commit(n);
   };
   var handleKeyDown = function handleKeyDown(e, n) {
     if (readOnly) return;
@@ -115,22 +170,16 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
       commit(n);
       return;
     }
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setFocusValue(function (prev) {
-        var base = prev != null ? prev : selectedValue || 0;
-        return Math.max(0, base - 1);
-      });
-      return;
-    }
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setFocusValue(function (prev) {
-        var base = prev != null ? prev : selectedValue || 0;
-        return Math.min(count, base + 1);
-      });
-      return;
-    }
+    var next = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = n + 1;else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = n - 1;else if (e.key === "Home") next = 1;else if (e.key === "End") next = count;
+    if (next == null) return;
+    e.preventDefault();
+    next = Math.max(1, Math.min(count, next));
+    // Radio-group semantics: arrows move real focus AND the selection.
+    setHoverValue(null);
+    var target = starRefs.current[next - 1];
+    if (target) target.focus();
+    if (next !== selectedValue) setValue(next);
   };
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
@@ -141,41 +190,51 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     children: [jsx("div", {
       role: "radiogroup",
       "aria-label": name || "Rating",
-      className: "inline-flex gap-1",
-      onMouseLeave: handleMouseLeave,
+      "aria-readonly": readOnly ? "true" : undefined,
+      className: cn("inline-flex gap-1", !readOnly && "touch-pan-y select-none"),
+      onPointerLeave: function onPointerLeave(e) {
+        if (!drag.current) clearHover();
+      },
+      onPointerCancel: function onPointerCancel(e) {
+        handleDragCancel(e);
+        clearHover();
+      },
+      onPointerDown: handleDragStart,
+      onPointerMove: handleDragMove,
+      onPointerUp: handleDragEnd,
       children: Array.from({
         length: count
       }, function (_, i) {
         var starNumber = i + 1;
         var filled = starNumber <= (displayValue || 0);
+        var checked = starNumber === selectedValue;
         var color = filled ? activeColor : inactiveColor;
         // Token classes unless a colour override is passed, so brands and dark mode apply (STUDIO-59).
         var colorClass = color ? "" : filled ? " text-warning-400" : " text-gray-200";
         return jsx("button", {
+          ref: function ref(el) {
+            starRefs.current[i] = el;
+          },
           type: "button",
           role: "radio",
-          "aria-checked": filled,
+          "aria-checked": checked,
           "aria-label": "".concat(starNumber, " star").concat(starNumber > 1 ? "s" : ""),
-          tabIndex: readOnly ? -1 : 0,
+          tabIndex: !readOnly && starNumber === tabStop ? 0 : -1,
           onClick: function onClick() {
-            return commit(starNumber);
+            return handleStarClick(starNumber);
           },
           onKeyDown: function onKeyDown(e) {
             return handleKeyDown(e, starNumber);
           },
-          onMouseEnter: function onMouseEnter() {
-            return handleMouseEnter(starNumber);
-          },
-          onMouseMove: function onMouseMove() {
-            return handleMouseMove(starNumber);
+          onPointerEnter: function onPointerEnter(e) {
+            return handlePointerHover(e, starNumber);
           },
-          onFocus: function onFocus() {
-            return handleFocus(starNumber);
+          onPointerMove: function onPointerMove(e) {
+            return handlePointerHover(e, starNumber);
           },
-          onBlur: handleBlur,
           disabled: readOnly,
           title: "".concat(starNumber, " of ").concat(count),
-          className: "p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-300 rounded".concat(colorClass),
+          className: cn("p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 rounded", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "transition-colors motion-reduce:transition-none", TOUCH_TARGET, colorClass.trim()),
           style: color ? {
             color: color
           } : undefined,

package/dist/esm/components/core/RoundedTag.js

@@ -3,8 +3,9 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
-var _excluded = ["label", "avatarSrc", "avatarAlt", "initials", "size", "onRemove", "onClick", "className", "closeClass", "ariaLabel", "avatarPosition", "avatarClassname", "initialClassname"];
+var _excluded = ["label", "avatarSrc", "avatarAlt", "initials", "size", "onRemove", "onClick", "className", "closeClass", "ariaLabel", "onKeyDown", "avatarPosition", "avatarClassname", "initialClassname"];
 var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
   var label = _ref.label,
     _ref$avatarSrc = _ref.avatarSrc,
@@ -23,8 +24,8 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$closeClass = _ref.closeClass,
     closeClass = _ref$closeClass === void 0 ? "" : _ref$closeClass,
-    _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? "tag" : _ref$ariaLabel,
+    ariaLabel = _ref.ariaLabel,
+    onKeyDown = _ref.onKeyDown,
     _ref$avatarPosition = _ref.avatarPosition,
     avatarPosition = _ref$avatarPosition === void 0 ? "left" : _ref$avatarPosition,
     _ref$avatarClassname = _ref.avatarClassname,
@@ -63,12 +64,25 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
     e && e.stopPropagation();
     onRemove && onRemove({});
   }
+  var clickable = typeof _onClick === "function";
+  // Enter / Space activate a clickable tag like a native button. Keys from
+  // nested controls (the remove button) are left alone.
+  function handleKeyDown(e) {
+    onKeyDown && onKeyDown(e);
+    if (!clickable || e.defaultPrevented || e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      _onClick(e);
+    }
+  }
+  var labelText = typeof label === "string" || typeof label === "number" ? String(label) : "";
+  var removeLabel = labelText ? "Remove ".concat(labelText) : "Remove";
   var s = sizes[size] || sizes.md;
   var paddingClass = showAvatar ? s.paddingWithAvatar : s.paddingNoAvatar;
   var gapClass = showAvatar ? s.gapWithAvatar : s.gapNoAvatar;
   var AvatarNode = showAvatar && jsx(Fragment, {
     children: avatarSrc ? jsx("div", {
-      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 flex items-center justify-center ".concat(s.avatar, " ").concat(avatarClassname),
+      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 dark:bg-gray-600 dark:text-gray-100 flex items-center justify-center ".concat(s.avatar, " ").concat(avatarClassname),
       "aria-hidden": avatarSrc ? undefined : "true",
       children: jsx("img", {
         src: avatarSrc,
@@ -76,29 +90,32 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
         className: "w-full h-full object-cover"
       })
     }) : jsx("div", {
-      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 flex items-center justify-center ".concat(s.avatar, " ").concat(initialClassname),
+      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 dark:bg-gray-600 dark:text-gray-100 flex items-center justify-center ".concat(s.avatar, " ").concat(initialClassname),
       "aria-hidden": avatarSrc ? undefined : "true",
       children: initials
     })
   });
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("inline-flex items-center rounded-full bg-gray-100 text-primary-800", paddingClass, gapClass, s.text, className),
-    role: "group",
+    className: cn("inline-flex items-center rounded-full bg-gray-100 text-primary-800 dark:bg-gray-800 dark:text-gray-100", paddingClass, gapClass, s.text, clickable && ["cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900", PRESS_FEEDBACK], className),
+    role: clickable ? "button" : "group",
+    tabIndex: clickable ? 0 : undefined,
     "aria-label": ariaLabel,
     onClick: function onClick(e) {
       return _onClick && _onClick(e);
-    }
+    },
+    onKeyDown: handleKeyDown
   }, rest), {}, {
     children: [avatarPosition === "left" && AvatarNode, jsx("div", {
       className: "truncate max-w-[10rem]",
       children: label
     }), avatarPosition === "right" && AvatarNode, onRemove && jsx("button", {
       type: "button",
-      "aria-label": "Remove",
+      "aria-label": removeLabel,
       onClick: handleRemove,
-      className: "inline-flex items-center justify-center rounded-full p-1 hover:bg-gray-200 focus:outline-none ".concat(closeClass),
+      className: cn("inline-flex items-center justify-center rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-fast motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET, closeClass),
       children: jsx("svg", {
+        "aria-hidden": "true",
         className: "w-3 h-3",
         viewBox: "0 0 24 24",
         fill: "none",

package/dist/esm/components/core/Skeleton.js

@@ -1,6 +1,6 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 
@@ -21,6 +21,11 @@ var _excluded = ["count", "circle", "height", "width", "rounded", "animated", "a
  * - className (string) - extra wrapper classes
  * - children - optional children to render when active === false
  */
+var BONE_CLASSES = "relative inline-block overflow-hidden bg-gray-200 dark:bg-gray-700";
+// Shimmer (DTUI-48): a Tailwind animation, no per-instance <style> tag. The
+// highlight is a soft white in light mode and a faint one in dark mode (no white
+// streak); under prefers-reduced-motion the bone is static and plain.
+var SHIMMER_CLASSES = ["bg-gradient-to-r from-transparent via-white/50 to-transparent dark:via-white/10", "bg-[length:200%_100%] bg-no-repeat animate-shimmer", "motion-reduce:animate-none motion-reduce:bg-none"].join(" ");
 function toPxOrUnit(value) {
   if (typeof value === "number") return "".concat(value, "px");
   if (typeof value === "string") return value;
@@ -61,8 +66,7 @@ var Skeleton = /*#__PURE__*/forwardRef(function Skeleton(_ref, ref) {
   var items = Array.from({
     length: Math.max(1, Math.floor(count))
   });
-  var shimmerOverlay = animated ? "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%)" : "none";
-  return jsxs("div", _objectSpread2(_objectSpread2({
+  return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn("skeleton-wrapper", className),
     role: "status",
@@ -75,24 +79,19 @@ var Skeleton = /*#__PURE__*/forwardRef(function Skeleton(_ref, ref) {
       alignItems: "center"
     }, style)
   }, rest), {}, {
-    children: [jsx("style", {
-      children: "\n        @keyframes skeleton-shimmer {\n          0% { background-position: -150% 0; }\n          100% { background-position: 150% 0; }\n        }\n        .skeleton-wrapper .skeleton-item {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n        }\n      "
-    }), items.map(function (_, i) {
+    children: items.map(function (_, i) {
       return jsx("div", {
         // Token classes rather than an inline hex, so brands and dark mode apply (STUDIO-59).
-        className: "skeleton-item bg-gray-200 dark:bg-gray-700",
+        // Plain join, not cn(): tailwind-merge would treat the gradient / bg-size
+        // utilities as conflicts of the bg-gray-200 colour and drop it.
+        className: ["skeleton-item", BONE_CLASSES, animated && SHIMMER_CLASSES].filter(Boolean).join(" "),
         style: {
           height: resolvedHeight,
           width: resolvedWidth,
-          borderRadius: borderRadius,
-          backgroundImage: shimmerOverlay,
-          backgroundSize: animated ? "200% 100%" : undefined,
-          backgroundRepeat: "no-repeat",
-          animation: animated ? "skeleton-shimmer 1.2s linear infinite" : undefined,
-          willChange: animated ? "background-position" : undefined
+          borderRadius: borderRadius
         }
       }, i);
-    })]
+    })
   }));
 });
 Skeleton.displayName = "Skeleton";

package/dist/esm/components/core/Slider.js

@@ -1,11 +1,11 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useMemo } from 'react';
+import { forwardRef, useId, useRef, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useSliderValues, useSliderPointer, toPercent, keyToValue } from '../../hooks/useSliderValues.js';
 
-var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "formatValue", "thumbLabels", "name", "className", "aria-label"];
+var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "showBubble", "formatValue", "thumbLabels", "name", "className", "aria-label"];
 var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
 var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
@@ -24,6 +24,8 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label = _ref.label,
     _ref$showValue = _ref.showValue,
     showValue = _ref$showValue === void 0 ? false : _ref$showValue,
+    _ref$showBubble = _ref.showBubble,
+    showBubble = _ref$showBubble === void 0 ? true : _ref$showBubble,
     _ref$formatValue = _ref.formatValue,
     formatValue = _ref$formatValue === void 0 ? String : _ref$formatValue,
     _ref$thumbLabels = _ref.thumbLabels,
@@ -52,12 +54,18 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     values = _useSliderValues.values,
     isRange = _useSliderValues.isRange,
     setThumb = _useSliderValues.setThumb;
+  // Index of the thumb being dragged (drives the value bubble), else null.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
   var pointer = useSliderPointer({
     trackRef: trackRef,
     values: values,
     setThumb: setThumb,
     bounds: bounds,
-    disabled: disabled
+    disabled: disabled,
+    onActiveChange: setDragging
   });
   var handleKeyDown = function handleKeyDown(index) {
     return function (e) {
@@ -90,7 +98,9 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
       })]
     }), jsxs("div", _objectSpread2(_objectSpread2({
       ref: trackRef,
-      className: cn("relative flex h-5 touch-none select-none items-center", disabled ? "cursor-not-allowed" : "cursor-pointer")
+      className: cn(
+      // 44px tall row on coarse pointers so the whole strip is easy to grab.
+      "relative flex h-5 touch-none select-none items-center [@media(pointer:coarse)]:h-11", disabled ? "cursor-not-allowed" : "cursor-pointer")
     }, pointer), {}, {
       children: [jsx("div", {
         className: "h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700"
@@ -117,7 +127,15 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           style: {
             left: "".concat(toPercent(v, min, max), "%")
           },
-          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-white shadow", "transition-shadow motion-reduce:transition-none", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "dark:border-primary-500 dark:bg-gray-900 dark:focus:ring-offset-gray-900")
+          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-surface shadow", "transition-shadow duration-fast motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "dark:border-primary-500 dark:focus-visible:ring-offset-gray-900",
+          // Grow the hit area to 44px on touch without changing the visual size.
+          "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2", "[@media(pointer:coarse)]:before:h-11 [@media(pointer:coarse)]:before:w-11 before:content-['']"),
+          children: showBubble && dragging === i && jsx("span", {
+            "aria-hidden": "true",
+            "data-slider-bubble": "",
+            className: cn("pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-line", "bg-surface px-2 py-1 text-xs tabular-nums text-foreground shadow-sm", "animate-scale-in motion-reduce:animate-none"),
+            children: formatValue(v)
+          })
         }, i);
       })]
     })), name && values.map(function (v, i) {