@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/dist/Slider/Slider.js

@@ -24,6 +24,7 @@ import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
+import { isRtlElement } from "../hooks/isRtlElement.js";
 import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
@@ -48,12 +49,37 @@ const THUMB_SIZE = 20;
 function clamp(val, min, max) {
   return Math.min(Math.max(val, min), max);
 }
+
+/**
+ * Number of decimal places a value carries, including values in exponent
+ * notation (e.g. 1e-7 → 7). Used to round away binary floating-point error
+ * after step arithmetic.
+ */
+function getDecimalPrecision(num) {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    if (parts.length === 2) {
+      const mantissaDecimals = parts[0].split('.')[1]?.length ?? 0;
+      return mantissaDecimals + parseInt(parts[1], 10);
+    }
+  }
+  const decimalPart = String(num).split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
 function snapToStep(val, min, step) {
   if (step <= 0) {
     return val;
   }
   const steps = Math.round((val - min) / step);
-  return min + steps * step;
+  const snapped = min + steps * step;
+  // `min + steps * step` accumulates binary floating-point error with
+  // fractional steps (0 + 3 * 0.1 → 0.30000000000000004), which leaks into
+  // onChange/onChangeEnd payloads, aria-valuenow, and the value tooltip.
+  // Snapped values can never carry more decimals than min/step combined, so
+  // rounding to that precision removes only the error.
+  const precision = Math.min(Math.max(getDecimalPrecision(min), getDecimalPrecision(step)), 20 // toFixed() throws past 20 digits
+  );
+  return Number(snapped.toFixed(precision));
 }
 function getPercent(val, min, max) {
   if (max === min) {
@@ -110,6 +136,7 @@ export function Slider({
   const minStepsBetweenThumbs = isRange && 'minStepsBetweenThumbs' in props ? props.minStepsBetweenThumbs ?? 0 : 0;
   const isHorizontal = orientation === 'horizontal';
   const id = useId();
+  const labelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const requiredID = useId();
@@ -169,7 +196,10 @@ export function Slider({
     const rect = track.getBoundingClientRect();
     let percent;
     if (isHorizontal) {
-      percent = (clientX - rect.left) / rect.width;
+      // In RTL the inline-start (value = min) is the right edge, so measure
+      // the pointer fraction from the right instead of the left. Detected
+      // from the track's computed direction (lazy, only on pointer move).
+      percent = isRtlElement(track) ? (rect.right - clientX) / rect.width : (clientX - rect.left) / rect.width;
     } else {
       // Vertical: bottom = min, top = max
       percent = 1 - (clientY - rect.top) / rect.height;
@@ -334,12 +364,25 @@ export function Slider({
     const val = values[thumbIndex];
     const percent = getPercent(val, min, max);
     const positionStyle = isHorizontal ? {
-      left: `${percent}%`
+      insetInlineStart: `${percent}%`
     } : {
       bottom: `${percent}%`,
       left: '50%'
     };
-    const thumbLabel = isRange ? thumbIndex === 0 ? `${label}, minimum value` : `${label}, maximum value` : label;
+
+    // In range mode each thumb keeps a short individual name that composes
+    // with the group label (announced via the group's aria-labelledby), per
+    // the APG multi-thumb slider pattern. In single mode the thumb takes its
+    // name from the visible label element via aria-labelledby.
+    const thumbLabel = isRange ? thumbIndex === 0 ? 'Minimum value' : 'Maximum value' : undefined;
+
+    // ARIA bounds must agree with the movement clamping in updateValue: in
+    // range mode a thumb can't cross its sibling (minus the
+    // minStepsBetweenThumbs gap), and the result is always clamped to
+    // [min, max].
+    const minGap = minStepsBetweenThumbs * step;
+    const ariaValueMin = isRange && thumbIndex === 1 ? clamp(values[0] + minGap, min, max) : min;
+    const ariaValueMax = isRange && thumbIndex === 0 ? clamp(values[1] - minGap, min, max) : max;
 
     // Suppress the per-thumb value bubble while the disabled-message tooltip is
     // showing, so a disabled slider surfaces the *reason* on hover/focus rather
@@ -354,14 +397,15 @@ export function Slider({
       // guards in the pointer/keyboard handlers.
       ,
       tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
-      "aria-valuemin": min,
-      "aria-valuemax": max,
+      "aria-valuemin": ariaValueMin,
+      "aria-valuemax": ariaValueMax,
       "aria-valuenow": val,
       "aria-valuetext": formatValue ? formatValue(val) : undefined,
       "aria-orientation": orientation,
       "aria-disabled": isDisabled || undefined,
       "aria-invalid": status?.type === 'error' ? true : undefined,
       "aria-label": thumbLabel,
+      "aria-labelledby": !isRange ? labelID : undefined,
       "aria-describedby": ariaDescribedBy,
       onKeyDown: e => handleKeyDown(thumbIndex, e),
       ...mergeProps(themeProps('slider-thumb', {
@@ -369,52 +413,52 @@ export function Slider({
         disabled: isDisabled ? 'disabled' : null
       }), {
         0: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm x1nrll8i x1m9mm8y"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xbudbmw x1m9mm8y"
         },
         8: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xwa60dl"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xwa60dl x11lhmoz xoffwj3"
         },
         4: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm x1nrll8i x1m9mm8y x1ewilqj xyxu9wt"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xbudbmw x1m9mm8y x1ewilqj xyxu9wt"
         },
         12: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xwa60dl x1ewilqj xyxu9wt"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xwa60dl x11lhmoz xoffwj3 x1ewilqj xyxu9wt"
         },
         2: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm x1nrll8i x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xbudbmw x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
         },
         10: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xwa60dl x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xwa60dl x11lhmoz xoffwj3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
         },
         6: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm x1nrll8i x1m9mm8y x1ewilqj xyxu9wt x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xbudbmw x1m9mm8y x1ewilqj xyxu9wt x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
         },
         14: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xwa60dl x1ewilqj xyxu9wt x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xwa60dl x11lhmoz xoffwj3 x1ewilqj xyxu9wt x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
         },
         1: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm x1nrll8i x1m9mm8y xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xbudbmw x1m9mm8y xwmxj5m x1h6gzvc"
         },
         9: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xwa60dl xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xwa60dl x11lhmoz xoffwj3 xwmxj5m x1h6gzvc"
         },
         5: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm x1nrll8i x1m9mm8y xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xbudbmw x1m9mm8y xwmxj5m x1h6gzvc"
         },
         13: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xwa60dl xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xwa60dl x11lhmoz xoffwj3 xwmxj5m x1h6gzvc"
         },
         3: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm x1nrll8i x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xbudbmw x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
         },
         11: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xwa60dl x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xwa60dl x11lhmoz xoffwj3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
         },
         7: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm x1nrll8i x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xbudbmw x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
         },
         15: {
-          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xwa60dl x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xwa60dl x11lhmoz xoffwj3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
         }
       }[!!isHorizontal << 3 | !!!isDisabled << 2 | !!!isDisabled << 1 | !!isDisabled << 0], undefined, positionStyle)
     }, thumbIndex);
@@ -439,7 +483,7 @@ export function Slider({
       const p1 = getPercent(v1, min, max);
       if (isHorizontal) {
         return {
-          left: `${p0}%`,
+          insetInlineStart: `${p0}%`,
           width: `${p1 - p0}%`
         };
       }
@@ -451,7 +495,7 @@ export function Slider({
     const p = getPercent(values[0], min, max);
     if (isHorizontal) {
       return {
-        left: '0%',
+        insetInlineStart: '0%',
         width: `${p}%`
       };
     }
@@ -474,6 +518,15 @@ export function Slider({
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: id,
+    labelID: labelID
+    // The thumb is a div[role="slider"], which a <label htmlFor> can't
+    // name (only form-associated elements are labelable). Render the label
+    // as a group label and associate it via aria-labelledby instead: the
+    // single thumb references it directly, and in range mode the
+    // role="group" container references it while each thumb keeps its own
+    // "Minimum value"/"Maximum value" name.
+    ,
+    isGroupLabel: true,
     descriptionID: description ? descriptionID : undefined,
     isOptional: isOptional,
     isRequired: isRequired,
@@ -508,7 +561,7 @@ export function Slider({
         ref: mergeRefs(ref, trackRef, disabledMessageTooltip.ref),
         ...(isRange ? {
           role: 'group',
-          'aria-label': label
+          'aria-labelledby': labelID
         } : undefined),
         onPointerDown: handlePointerDown,
         onPointerMove: handlePointerMove,
@@ -534,17 +587,17 @@ export function Slider({
             orientation
           }), {
             0: {
-              className: "x10l6tqk xdsb6cv xjspbzw x13vifvy x1ey2m1c x51ohtg x1nrll8i xuuh30"
+              className: "x10l6tqk xdsb6cv xjspbzw x13vifvy x1ey2m1c x51ohtg xbudbmw xuuh30"
             },
             1: {
-              className: "x10l6tqk xdsb6cv xjspbzw xu96u03 x3m8u43 xqu0tyb xwa60dl x1cb1t30"
+              className: "x10l6tqk xdsb6cv xjspbzw x1o0tod xtijo5x xqu0tyb xwa60dl x1cb1t30"
             }
           }[!!isHorizontal << 0])
         }), /*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
           ...mergeProps({
             0: {
-              className: "x10l6tqk x1ewilqj xjspbzw x51ohtg x1nrll8i xuuh30"
+              className: "x10l6tqk x1ewilqj xjspbzw x51ohtg xbudbmw xuuh30"
             },
             1: {
               className: "x10l6tqk x1ewilqj xjspbzw xqu0tyb xwa60dl x1cb1t30"
@@ -556,16 +609,16 @@ export function Slider({
           "aria-hidden": "true",
           ...{
             0: {
-              className: "x10l6tqk x13vifvy x1ey2m1c x1nrll8i"
+              className: "x10l6tqk x13vifvy x1ey2m1c xbudbmw"
             },
             1: {
-              className: "x10l6tqk xu96u03 x3m8u43 xwa60dl"
+              className: "x10l6tqk x1o0tod xtijo5x xwa60dl"
             }
           }[!!isHorizontal << 0],
           children: marks.map(mark => {
             const percent = getPercent(mark.value, min, max);
             const markPos = isHorizontal ? {
-              left: `${percent}%`
+              insetInlineStart: `${percent}%`
             } : {
               bottom: `${percent}%`
             };
@@ -578,7 +631,7 @@ export function Slider({
                     className: "x10l6tqk x7njt3n xjspbzw x36qwtl x1xc55vz x1m9mm8y"
                   },
                   1: {
-                    className: "x10l6tqk x7njt3n xjspbzw xfo62xy xdk7pt x11lhmoz"
+                    className: "x10l6tqk x7njt3n xjspbzw xfo62xy xdk7pt x11lhmoz xoffwj3"
                   }
                 }[!!isHorizontal << 0], {
                   style: markPos
@@ -588,10 +641,10 @@ export function Slider({
                 "data-mark-value": mark.value,
                 ...mergeProps({
                   0: {
-                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft x131p8rn x1trqr8e"
+                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft x131p8rn x9p6ekw"
                   },
                   1: {
-                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft xuuh30 xuivejd"
+                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft xuuh30 x1nyx83j xuivejd"
                   }
                 }[!!isHorizontal << 0], {
                   style: markPos

package/dist/Spinner/Spinner.d.ts

@@ -60,8 +60,9 @@ export interface SpinnerProps extends BaseProps<HTMLSpanElement> {
      * Visible content displayed below the spinner.
      * Accepts a string or ReactNode for rich content.
      *
-     * When `label` is a string, it is also used as the accessible name
-     * (aria-label) unless `aria-label` is explicitly set.
+     * When `label` is a string, the visible text also provides the accessible
+     * name of the status element (via aria-labelledby, avoiding a duplicate
+     * announcement) unless `aria-label` is explicitly set.
      *
      * @example
      * ```

package/dist/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AAiDF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BA4Id;yBAvJe,OAAO"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AAiDF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BAqJd;yBAhKe,OAAO"}

package/dist/Spinner/Spinner.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/templates/blocks/components/Spinner/ (showcase blocks)
  */
-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { durationVars, spacingVars } from "../theme/tokens.stylex.js";
@@ -183,13 +183,21 @@ export function Spinner({
   } = SIZES[size];
   const frameSize = diameter + border * 2;
   const hasLabel = label != null;
+  const labelId = useId();
+
+  // When a visible string label renders (and no explicit aria-label is set),
+  // name the status element from the visible Text via aria-labelledby instead
+  // of duplicating the same string as aria-label — the duplicate would be
+  // announced twice by screen readers (WCAG 4.1.2).
+  const namedByVisibleLabel = hasLabel && typeof label === 'string' && ariaLabel == null;
 
   // Resolve accessible name: explicit aria-label > string label > "Loading"
   const resolvedAriaLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined) ?? 'Loading';
   const spinner = /*#__PURE__*/_jsx("span", {
     ref: hasLabel ? undefined : ref,
     role: "status",
-    "aria-label": resolvedAriaLabel,
+    "aria-label": namedByVisibleLabel ? undefined : resolvedAriaLabel,
+    "aria-labelledby": namedByVisibleLabel ? labelId : undefined,
     "data-testid": hasLabel ? undefined : testId,
     ...(hasLabel ? {} : restProps),
     ...mergeProps(hasLabel ? '' : themeProps('spinner', {
@@ -219,6 +227,7 @@ export function Spinner({
       shade
     }), stylex.props(styles.wrapper, xstyle), className, style),
     children: [spinner, typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+      id: labelId,
       type: "body",
       weight: "bold",
       children: label

package/dist/Switch/Switch.d.ts

@@ -137,6 +137,13 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
      * When set with a message, displays a colored message box below the switch.
      */
     status?: InputStatus;
+    /**
+     * Size variant controlling track and thumb dimensions.
+     * - 'sm': 34x20px (matches sm checkbox/radio vertical rhythm)
+     * - 'md': 40x24px (default, matches md checkbox/radio vertical rhythm)
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
 }
 /**
  * A toggle switch component for boolean values.
@@ -156,7 +163,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
  * />
  * ```
  */
-export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, width, xstyle, className, style, ref, ...rest }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isOptional, isRequired, onFocus, onBlur, labelIcon, labelTooltip, labelPosition, labelSpacing, status, size, width, xstyle, className, style, ref, ...rest }: SwitchProps): import("react").JSX.Element;
 export declare namespace Switch {
     var displayName: string;
 }

package/dist/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}