@bug-on/m3-expressive 1.2.7 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bug-on/m3-expressive
 
+## 1.3.1
+
+### Patch Changes
+
+- ac2e09e: Refactor Slider & Progress APIs, update docs
+
+## 1.3.0
+
+### Minor Changes
+
+- dbcb09f: Add fading blur mask & API refinements
+
 ## 1.2.7
 
 ### Patch Changes

package/dist/buttons.d.mts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DPJL3bO6.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CIVEYgjY.mjs';
 import { Transition } from 'motion/react';
-import { b as MD3Size } from './md3-Dty-Qcad.mjs';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.mjs';
+import { c as MD3Size } from './md3-D0_Z7IXj.mjs';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-USJo7AqO.mjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.d.ts

@@ -1,7 +1,7 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable--BhNTEJw.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonDistribute, e as ButtonDistributeProps, f as ButtonGroup, g as ButtonGroupOrientation, h as ButtonGroupProps, i as ButtonGroupVariant, j as ButtonProps, D as DistributeMode, E as ElevatedSplitButtonLeading, k as ElevatedSplitButtonTrailing, l as ElevatedSplitButtonTrailingUncheckable, m as ExtendedFAB, n as ExtendedFABProps, F as FAB, o as FABMenu, p as FABMenuItem, q as FABMenuItemData, r as FABMenuItemProps, s as FABMenuProps, t as FABPosition, u as FABPositionProps, v as FABProps, w as FilledSplitButtonLeading, x as FilledSplitButtonTrailing, y as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, z as OutlinedSplitButtonTrailing, A as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, C as SplitButtonLayoutProps, G as SplitButtonLeading, H as SplitButtonLeadingProps, I as SplitButtonSize, V as SplitButtonSizeTokens, J as SplitButtonTrailing, K as SplitButtonTrailingProps, L as SplitButtonTrailingUncheckable, M as SplitButtonTrailingUncheckableProps, N as SplitButtonVariant, T as ToggleFAB, P as ToggleFABProps, Q as TonalSplitButtonLeading, R as TonalSplitButtonTrailing, U as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-DTQJjzsB.js';
 import { Transition } from 'motion/react';
-import { b as MD3Size } from './md3-Dty-Qcad.js';
-export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CSsDmuQC.js';
+import { c as MD3Size } from './md3-D0_Z7IXj.js';
+export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-CqdQBsRe.js';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import 'react';
 import 'react/jsx-runtime';

package/dist/buttons.js

@@ -251,7 +251,7 @@ LoadingIndicator.displayName = "LoadingIndicator";
 function easeInOutCubic(x) {
   return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
 }
-function generateWavyCircularPath(center, radius, amplitude, wavelength) {
+function generateWavyCircularPath(center, radius, amplitude, wavelength, phase = 0) {
   const circumference = 2 * Math.PI * radius;
   const numWaves = Math.max(
     3,
@@ -259,8 +259,8 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
   );
   const steps = numWaves * 4;
   const dt = 2 * Math.PI / steps;
-  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t);
-  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t);
+  const rAt = (t) => radius + amplitude * Math.sin(numWaves * t + phase);
+  const drAt = (t) => amplitude * numWaves * Math.cos(numWaves * t + phase);
   const xAt = (t) => center + rAt(t) * Math.cos(t);
   const yAt = (t) => center + rAt(t) * Math.sin(t);
   const dxAt = (t) => drAt(t) * Math.cos(t) - rAt(t) * Math.sin(t);
@@ -325,15 +325,18 @@ var CircularProgress = React16__namespace.forwardRef(
       size = 48,
       trackHeight = 4,
       shape = "flat",
+      trackShape = "flat",
       amplitude,
       wavelength,
       gapSize = 4,
+      waveSpeed = 1,
       crawlerSpeed = 1,
       color,
       trackColor,
       showTrack = "auto",
       minProgress = DEFAULT_MIN_PROGRESS,
       maxProgress = DEFAULT_MAX_PROGRESS,
+      determinateAnimation = "md3",
       amplitudeRange,
       className,
       "aria-label": ariaLabel
@@ -342,15 +345,18 @@ var CircularProgress = React16__namespace.forwardRef(
       "size",
       "trackHeight",
       "shape",
+      "trackShape",
       "amplitude",
       "wavelength",
       "gapSize",
+      "waveSpeed",
       "crawlerSpeed",
       "color",
       "trackColor",
       "showTrack",
       "minProgress",
       "maxProgress",
+      "determinateAnimation",
       "amplitudeRange",
       "className",
       "aria-label"
@@ -363,6 +369,7 @@ var CircularProgress = React16__namespace.forwardRef(
     const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
     const isWavy = shape === "wavy";
     const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
+    const shouldShowDeterminateTrack = showTrack === "auto" ? true : showTrack;
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
     const effectiveAmplitude = React16__namespace.useMemo(
@@ -395,19 +402,50 @@ var CircularProgress = React16__namespace.forwardRef(
     const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
     const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
     const ActiveCircleElem = react.m.circle;
-    const ActivePathElem = react.m.path;
     const indeterminateSvgRef = React16__namespace.useRef(null);
     const indeterminateTrackRef = React16__namespace.useRef(null);
     const indeterminateActiveRef = React16__namespace.useRef(null);
     const indeterminateWavyTrackPathRef = React16__namespace.useRef(null);
     const indeterminateWavyActivePathRef = React16__namespace.useRef(null);
+    const determinateWavyActivePathRef = React16__namespace.useRef(null);
+    const determinateWavyTrackPathRef = React16__namespace.useRef(null);
     const cachedPathLengthRef = React16__namespace.useRef(0);
+    const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 0);
+    const amplitudeMV = react.useMotionValue(isWavy ? effectiveAmplitude : 0);
+    React16__namespace.useEffect(() => {
+      if (isDeterminate) {
+        react.animate(fractionMV, clampedValue / 100, {
+          duration: 0.4,
+          ease: [0.2, 0, 0, 1]
+        });
+      }
+    }, [clampedValue, isDeterminate, fractionMV]);
+    React16__namespace.useEffect(() => {
+      if (!isDeterminate || !isWavy) return;
+      const fraction = clampedValue / 100;
+      let targetAmp = effectiveAmplitude;
+      if (determinateAnimation === "md3") {
+        targetAmp = fraction <= 0.1 || fraction >= 0.95 ? 0 : effectiveAmplitude;
+      }
+      react.animate(amplitudeMV, targetAmp, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.5
+      });
+    }, [
+      clampedValue,
+      isDeterminate,
+      isWavy,
+      effectiveAmplitude,
+      amplitudeMV,
+      determinateAnimation
+    ]);
     React16__namespace.useLayoutEffect(() => {
       if (!isWavy || !wavyActivePath) {
         cachedPathLengthRef.current = circumference;
         return;
       }
-      const el = indeterminateActiveRef.current;
+      const el = indeterminateActiveRef.current || determinateWavyActivePathRef.current;
       if (el && "getTotalLength" in el) {
         try {
           const len = el.getTotalLength();
@@ -421,7 +459,65 @@ var CircularProgress = React16__namespace.forwardRef(
       cachedPathLengthRef.current = circumference;
     }, [isWavy, circumference, wavyActivePath]);
     react.useAnimationFrame((time) => {
-      if (isDeterminate) return;
+      const safeWaveSpeed = Math.max(0.1, waveSpeed);
+      const wavePhase = time / 1e3 * safeWaveSpeed * 2 * Math.PI;
+      if (isDeterminate) {
+        if (isWavy) {
+          const currentAmp = amplitudeMV.get();
+          const dynamicPath = generateWavyCircularPath(
+            center,
+            radius,
+            currentAmp,
+            effectiveWavelength,
+            wavePhase
+          );
+          if (determinateWavyActivePathRef.current) {
+            determinateWavyActivePathRef.current.setAttribute("d", dynamicPath);
+          }
+          if (trackShape === "wavy" && determinateWavyTrackPathRef.current) {
+            determinateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
+          }
+          const pathEl = determinateWavyActivePathRef.current;
+          let totalLen = cachedPathLengthRef.current || circumference;
+          if (pathEl) {
+            try {
+              const len = pathEl.getTotalLength();
+              if (len > 0) totalLen = len;
+            } catch (e) {
+            }
+          }
+          const activeFrac = Math.max(0, Math.min(1, fractionMV.get()));
+          const activeLen = totalLen * activeFrac;
+          if (determinateWavyActivePathRef.current) {
+            determinateWavyActivePathRef.current.setAttribute(
+              "stroke-dasharray",
+              `${activeLen} ${totalLen}`
+            );
+            determinateWavyActivePathRef.current.setAttribute(
+              "stroke-dashoffset",
+              "0"
+            );
+          }
+          if (shouldShowDeterminateTrack && trackShape === "wavy" && determinateWavyTrackPathRef.current) {
+            const gapFrac = (gapSize + trackHeight) / totalLen;
+            const trackStartFrac = activeFrac + gapFrac;
+            const trackLen = Math.max(
+              1e-3,
+              totalLen * (1 - activeFrac - 2 * gapFrac)
+            );
+            const trackOff = -totalLen * trackStartFrac;
+            determinateWavyTrackPathRef.current.setAttribute(
+              "stroke-dasharray",
+              `${trackLen} ${totalLen}`
+            );
+            determinateWavyTrackPathRef.current.setAttribute(
+              "stroke-dashoffset",
+              `${trackOff}`
+            );
+          }
+        }
+        return;
+      }
       const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
       const scaledTime = time * safeCrawlerSpeed;
       const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
@@ -456,7 +552,8 @@ var CircularProgress = React16__namespace.forwardRef(
           center,
           radius,
           currentAmplitude,
-          effectiveWavelength
+          effectiveWavelength,
+          wavePhase
         );
         if (indeterminateWavyActivePathRef.current) {
           indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
@@ -551,7 +648,7 @@ var CircularProgress = React16__namespace.forwardRef(
         style: { width: size, height: size }
       }, restProps), {
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.LazyMotion, { features: react.domMax, strict: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
               width: size,
@@ -559,8 +656,18 @@ var CircularProgress = React16__namespace.forwardRef(
               viewBox: `0 0 ${size} ${size}`,
               "aria-hidden": "true",
               style: { transform: "rotate(-90deg)", overflow: "visible" },
-              children: [
-                isDeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+              children: isDeterminate ? isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowDeterminateTrack && (trackShape === "wavy" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    ref: determinateWavyTrackPathRef,
+                    d: wavyActivePath != null ? wavyActivePath : "",
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    strokeLinecap: "round"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
                   react.m.circle,
                   {
                     cx: center,
@@ -569,28 +676,52 @@ var CircularProgress = React16__namespace.forwardRef(
                     fill: "none",
                     stroke: bgTrackColor,
                     strokeWidth: trackHeight,
-                    initial: { pathLength: trackLength, pathOffset: trackOffset },
-                    animate: { pathLength: trackLength, pathOffset: trackOffset },
+                    initial: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    animate: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
                     transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
                     strokeLinecap: "round"
                   }
-                ) : null,
-                isDeterminate && (isWavy ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ActivePathElem,
+                )),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
                   {
+                    ref: determinateWavyActivePathRef,
                     d: wavyActivePath != null ? wavyActivePath : "",
                     fill: "none",
                     stroke: activeColor,
                     strokeWidth: trackHeight,
-                    strokeLinecap: "round",
-                    initial: { pathLength: 0 },
-                    animate: { pathLength: clampedValue / 100 },
-                    transition: {
-                      duration: 0.4,
-                      ease: [0.2, 0, 0, 1]
-                    }
+                    strokeLinecap: "round"
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.m.circle,
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: bgTrackColor,
+                    strokeWidth: trackHeight,
+                    initial: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    animate: {
+                      pathLength: trackLength,
+                      pathOffset: trackOffset
+                    },
+                    transition: { duration: 0.4, ease: [0.2, 0, 0, 1] },
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
                   ActiveCircleElem,
                   {
                     cx: center,
@@ -607,8 +738,8 @@ var CircularProgress = React16__namespace.forwardRef(
                       ease: [0.2, 0, 0, 1]
                     }
                   }
-                ))
-              ]
+                )
+              ] }) : null
             }
           ),
           !isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3090,9 +3221,9 @@ var TOGGLE_FAB_COLORS = {
   }
 };
 var TOGGLE_FAB_SIZES = {
-  baseline: { sizeClass: "h-14 w-14", initialRadius: 16, finalRadius: 28 },
-  medium: { sizeClass: "h-20 w-20", initialRadius: 20, finalRadius: 40 },
-  large: { sizeClass: "h-24 w-24", initialRadius: 28, finalRadius: 48 }
+  sm: { sizeClass: "h-14 w-14", initialRadius: 16, finalRadius: 28 },
+  md: { sizeClass: "h-20 w-20", initialRadius: 20, finalRadius: 40 },
+  lg: { sizeClass: "h-24 w-24", initialRadius: 28, finalRadius: 48 }
 };
 var MENU_ITEM_STYLES = {
   padding: "ps-4 pe-6",
@@ -3179,7 +3310,7 @@ var ToggleFABComponent = React16__namespace.forwardRef(
     onToggle,
     icon,
     colorVariant = "primary",
-    fabSize = "baseline",
+    size = "sm",
     className,
     id,
     "aria-label": ariaLabel,
@@ -3188,7 +3319,7 @@ var ToggleFABComponent = React16__namespace.forwardRef(
     var _a, _b;
     const prefersReduced = react.useReducedMotion();
     const colors = (_a = TOGGLE_FAB_COLORS[colorVariant]) != null ? _a : TOGGLE_FAB_COLORS.primary;
-    const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
+    const sizeTokens = (_b = TOGGLE_FAB_SIZES[size]) != null ? _b : TOGGLE_FAB_SIZES.sm;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = react.useSpring(expanded ? 1 : 0, springConfig);
     React16__namespace.useEffect(() => {
@@ -3358,7 +3489,7 @@ function FABMenu({
   onToggle,
   items,
   colorVariant = "primary",
-  fabSize = "baseline",
+  size = "sm",
   alignment = "end",
   className,
   closeOnBackdropClick = true,
@@ -3509,7 +3640,7 @@ function FABMenu({
               expanded,
               onToggle,
               colorVariant,
-              fabSize,
+              size,
               "aria-label": ariaLabel != null ? ariaLabel : expanded ? "Close actions menu" : "Open actions menu",
               "aria-controls": menuId,
               icon: defaultFabIcon
@@ -3653,7 +3784,7 @@ var IconButtonComponent = React16__namespace.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
-      widthVariant = "default",
+      width = "default",
       shape = "round",
       selected,
       selectedIcon,
@@ -3671,7 +3802,7 @@ var IconButtonComponent = React16__namespace.forwardRef(
       "variant",
       "colorStyle",
       "size",
-      "widthVariant",
+      "width",
       "shape",
       "selected",
       "selectedIcon",
@@ -3716,7 +3847,7 @@ var IconButtonComponent = React16__namespace.forwardRef(
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
     const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
-    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[width]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
@@ -3885,11 +4016,12 @@ var SplitButtonLayoutComponent = React16__namespace.forwardRef(
       "div",
       __spreadProps(__spreadValues({
         ref,
+        role: "group",
         className: cn(
           "inline-flex flex-row items-stretch justify-center w-fit shrink-0 relative",
           className
         ),
-        style: { gap: `${spacing}px` }
+        style: __spreadValues({ gap: `${spacing}px` }, restProps.style)
       }, restProps), {
         children: [
           leadingButton,
@@ -4102,11 +4234,11 @@ var LEADING_ICON_SIZE_FOR_SIZE = {
   xl: 40
 };
 var splitButtonSizeVariants = {
-  xs: "min-h-[32px]",
-  sm: "min-h-[40px]",
-  md: "min-h-[56px]",
-  lg: "min-h-[96px]",
-  xl: "min-h-[136px]"
+  xs: "h-[32px] min-h-[32px]",
+  sm: "h-[40px] min-h-[40px]",
+  md: "h-[56px] min-h-[56px]",
+  lg: "h-[96px] min-h-[96px]",
+  xl: "h-[136px] min-h-[136px]"
 };
 var splitButtonVariants = classVarianceAuthority.cva(
   "group relative w-fit shrink-0 inline-flex flex-row items-center justify-center whitespace-nowrap select-none cursor-pointer transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-m3-primary z-10 overflow-hidden",
@@ -4290,7 +4422,7 @@ var SplitButtonLeadingComponent = React16__namespace.forwardRef(
           children: icon
         }
       ),
-      labelContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children: labelContent })
+      labelContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center gap-[inherit]", children: labelContent })
     ] });
     const containerClassName = cn(
       splitButtonVariants({
@@ -4298,19 +4430,20 @@ var SplitButtonLeadingComponent = React16__namespace.forwardRef(
         size: actualSize,
         disabled
       }),
+      "gap-2",
       typographyClass,
       className
     );
     const mergedStyle = __spreadValues({
       paddingInlineStart: tokens.leadingPadding.start,
       paddingInlineEnd: tokens.leadingPadding.end,
-      gap: "8px",
       borderRadius
     }, style);
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: asChild ? /* @__PURE__ */ jsxRuntime.jsx(
       reactSlot.Slot,
       __spreadProps(__spreadValues({
         ref,
+        "data-split-button-part": "leading",
         "aria-disabled": disabled || void 0,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -4333,6 +4466,7 @@ var SplitButtonLeadingComponent = React16__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        "data-split-button-part": "leading",
         disabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -4346,8 +4480,7 @@ var SplitButtonLeadingComponent = React16__namespace.forwardRef(
         transition: SPLIT_BUTTON_RADIUS_SPRING,
         style: __spreadValues({
           paddingInlineStart: tokens.leadingPadding.start,
-          paddingInlineEnd: tokens.leadingPadding.end,
-          gap: "8px"
+          paddingInlineEnd: tokens.leadingPadding.end
         }, style),
         className: containerClassName
       }, restProps), {
@@ -4385,7 +4518,8 @@ var SplitButtonTrailingComponent = React16__namespace.forwardRef(
       onBlur,
       asChild = false,
       children,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHaspopup = "menu"
     } = _b, restProps = __objRest(_b, [
       "className",
       "style",
@@ -4403,7 +4537,8 @@ var SplitButtonTrailingComponent = React16__namespace.forwardRef(
       "onBlur",
       "asChild",
       "children",
-      "aria-label"
+      "aria-label",
+      "aria-haspopup"
     ]);
     var _a2, _b2;
     const context = useSplitButtonContext();
@@ -4496,7 +4631,11 @@ var SplitButtonTrailingComponent = React16__namespace.forwardRef(
             x: checked ? 0 : tokens.opticalCenterOffset
           },
           transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
-          className: "flex items-center justify-center shrink-0",
+          className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
+          style: {
+            width: tokens.trailingIconSize,
+            height: tokens.trailingIconSize
+          },
           children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(
             Icon,
             {
@@ -4525,8 +4664,10 @@ var SplitButtonTrailingComponent = React16__namespace.forwardRef(
       reactSlot.Slot,
       __spreadProps(__spreadValues({
         ref,
+        "data-split-button-part": "trailing",
         "aria-label": ariaLabel,
         "aria-expanded": checked,
+        "aria-haspopup": ariaHaspopup,
         "aria-disabled": disabled,
         onClick: handleToggle,
         onPointerDown: handlePointerDown,
@@ -4549,8 +4690,10 @@ var SplitButtonTrailingComponent = React16__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        "data-split-button-part": "trailing",
         "aria-label": ariaLabel,
         "aria-expanded": checked,
+        "aria-haspopup": ariaHaspopup,
         "aria-disabled": disabled,
         disabled,
         onClick: handleToggle,
@@ -4625,6 +4768,7 @@ var SplitButtonTrailingUncheckableComponent = React16__namespace.forwardRef(
     const [isFocused, setIsFocused] = React16__namespace.useState(false);
     const [isPressed, setIsPressed] = React16__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
+    const prefersReducedMotion = react.useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
       ripples,
@@ -4688,6 +4832,7 @@ var SplitButtonTrailingUncheckableComponent = React16__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        "data-split-button-part": "trailing",
         "aria-label": ariaLabel,
         disabled,
         onClick,
@@ -4699,7 +4844,7 @@ var SplitButtonTrailingUncheckableComponent = React16__namespace.forwardRef(
         onFocus: handleFocus,
         onBlur: handleBlur,
         animate: { borderRadius },
-        transition: SPLIT_BUTTON_RADIUS_SPRING,
+        transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_RADIUS_SPRING,
         style: __spreadValues({
           paddingInlineStart: tokens.trailingPadding.start,
           paddingInlineEnd: tokens.trailingPadding.end
@@ -4728,7 +4873,7 @@ var SplitButtonTrailingUncheckableComponent = React16__namespace.forwardRef(
             react.m.div,
             {
               animate: { x: tokens.opticalCenterOffset },
-              transition: SPLIT_BUTTON_RADIUS_SPRING,
+              transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_RADIUS_SPRING,
               className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
               style: {
                 width: tokens.trailingIconSize,