@tinybigui/react 0.20.0 → 0.21.0

package/dist/index.cjs

@@ -9632,105 +9632,354 @@ var Badge = React.forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var splitButtonContainerVariants = classVarianceAuthority.cva(
-  ["inline-flex items-center rounded-full overflow-hidden"],
+var splitButtonContainerVariants = classVarianceAuthority.cva([
+  "relative inline-flex items-stretch",
+  "gap-0.5"
+  // MD3 2dp gap between segments
+]);
+var splitButtonLeadingVariants = classVarianceAuthority.cva(
+  [
+    // Layout
+    "group/sb-leading relative inline-flex items-center justify-center",
+    "cursor-pointer select-none",
+    // Shape — asymmetric corners via CSS variable
+    "rounded-tl-full rounded-bl-full",
+    "rounded-tr-[var(--sb-inner-radius,var(--radius-xs))]",
+    "rounded-br-[var(--sb-inner-radius,var(--radius-xs))]",
+    // Inner-corner morph — xs/sm/md defaults; lg/xl override in size variants below.
+    // Specificity ladder: rest (0,0,0) < hover (0,1,0) < focus (0,2,0) < pressed (0,3,0)
+    "[--sb-inner-radius:var(--radius-xs)]",
+    "data-[hovered]:[--sb-inner-radius:var(--radius-sm)]",
+    "data-[focus-visible]:data-[focus-visible]:[--sb-inner-radius:var(--radius-sm)]",
+    // Pressed morphs stronger than hover/focus — tripled selector → (0,3,0)
+    "data-[pressed]:data-[pressed]:data-[pressed]:[--sb-inner-radius:var(--radius-lg)]",
+    // Spatial transition for border-radius morphing
+    "transition-[border-radius]",
+    "duration-expressive-fast-spatial ease-expressive-fast-spatial",
+    // Disabled — self-targeting
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+  ],
   {
     variants: {
+      /**
+       * Visual variant — controls container color, text color, and elevation.
+       * State layer color is handled in splitButtonStateLayerVariants.
+       */
       variant: {
-        filled: "bg-primary shadow-elevation-0 hover:shadow-elevation-1",
-        tonal: "bg-secondary-container",
-        outlined: "border border-outline bg-transparent"
+        /**
+         * Filled — highest emphasis.
+         * container=primary, label=on-primary
+         * Elevation: 0 base → 1 hover → 0 focus/pressed
+         */
+        filled: [
+          "bg-primary text-on-primary shadow-none",
+          "group-data-[hovered]/sb-leading:shadow-elevation-1",
+          "group-data-[focus-visible]/sb-leading:shadow-none",
+          "group-data-[pressed]/sb-leading:group-data-[pressed]/sb-leading:shadow-none",
+          // Disabled
+          "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+        ],
+        /**
+         * Tonal — secondary emphasis.
+         * container=secondary-container, label=on-secondary-container
+         * Elevation: 0 base → 1 hover → 0 focus/pressed
+         */
+        tonal: [
+          "bg-secondary-container text-on-secondary-container shadow-none",
+          "group-data-[hovered]/sb-leading:shadow-elevation-1",
+          "group-data-[focus-visible]/sb-leading:shadow-none",
+          "group-data-[pressed]/sb-leading:group-data-[pressed]/sb-leading:shadow-none",
+          // Disabled
+          "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+        ],
+        /**
+         * Outlined — medium emphasis. Transparent with border.
+         * container=transparent, border=outline, label=primary
+         * Elevation: always 0
+         */
+        outlined: [
+          "bg-transparent border border-outline text-primary",
+          // Disabled
+          "data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38"
+        ],
+        /**
+         * Elevated — uses surface-container-low with a level-1 shadow base.
+         * container=surface-container-low, label=primary
+         * Elevation: 1 base → 2 hover → 1 focus/pressed
+         */
+        elevated: [
+          "bg-surface-container-low text-primary shadow-elevation-1",
+          "group-data-[hovered]/sb-leading:shadow-elevation-2",
+          "group-data-[focus-visible]/sb-leading:shadow-elevation-1",
+          "group-data-[pressed]/sb-leading:group-data-[pressed]/sb-leading:shadow-elevation-1",
+          // Disabled
+          "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+        ]
       },
+      /**
+       * Size — governs height, horizontal padding, typography, and inner-corner rest/morph values.
+       * lg/xl need larger rest radii so their morph steps differ from xs/sm/md.
+       */
       size: {
-        small: "h-8",
-        medium: "h-10",
-        large: "h-12"
-      },
-      isDisabled: {
-        true: "opacity-38 pointer-events-none",
-        false: ""
+        xs: "h-8 pl-4 pr-3 text-label-large",
+        sm: "h-10 pl-6 pr-4 text-label-large",
+        md: "h-14 pl-8 pr-6 text-title-medium",
+        lg: [
+          "h-24 pl-10 pr-8 text-headline-small",
+          // lg rest=sm, hover/focus→lg, pressed→xl
+          "[--sb-inner-radius:var(--radius-sm)]",
+          "data-[hovered]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[focus-visible]:data-[focus-visible]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[pressed]:data-[pressed]:data-[pressed]:[--sb-inner-radius:var(--radius-xl)]"
+        ],
+        xl: [
+          "h-[8.5rem] pl-12 pr-10 text-headline-large",
+          // xl rest=md, hover/focus→lg, pressed→xl
+          "[--sb-inner-radius:var(--radius-md)]",
+          "data-[hovered]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[focus-visible]:data-[focus-visible]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[pressed]:data-[pressed]:data-[pressed]:[--sb-inner-radius:var(--radius-xl)]"
+        ]
       }
     },
     defaultVariants: {
       variant: "filled",
-      size: "medium",
-      isDisabled: false
+      size: "sm"
     }
   }
 );
-var splitButtonPrimaryVariants = classVarianceAuthority.cva(
+var splitButtonTrailingVariants = classVarianceAuthority.cva(
   [
-    "group/primary relative inline-flex items-center justify-center cursor-pointer",
-    "h-full font-medium tracking-[0.1px]",
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2"
+    // Layout — square so that selected (rounded-full on all corners) = perfect circle
+    "group/sb-trailing relative inline-flex items-center justify-center shrink-0",
+    "cursor-pointer select-none",
+    // Shape — asymmetric corners, inner on the left side
+    "rounded-tr-full rounded-br-full",
+    "rounded-tl-[var(--sb-inner-radius,var(--radius-xs))]",
+    "rounded-bl-[var(--sb-inner-radius,var(--radius-xs))]",
+    // Inner-corner morph — xs/sm/md defaults; lg/xl override in size variants below.
+    // Specificity ladder: rest (0,0,0) < hover (0,1,0) < focus (0,2,0) < pressed (0,3,0) < selected (0,4,0)
+    "[--sb-inner-radius:var(--radius-xs)]",
+    "data-[hovered]:[--sb-inner-radius:var(--radius-sm)]",
+    "data-[focus-visible]:data-[focus-visible]:[--sb-inner-radius:var(--radius-sm)]",
+    // Pressed morphs stronger than hover/focus — tripled → (0,3,0)
+    "data-[pressed]:data-[pressed]:data-[pressed]:[--sb-inner-radius:var(--radius-lg)]",
+    // Selected (menu open) → full circle; quadrupled → (0,4,0) always wins
+    "data-[selected]:data-[selected]:data-[selected]:data-[selected]:[--sb-inner-radius:var(--radius-full)]",
+    // Spatial transition for border-radius morphing
+    "transition-[border-radius]",
+    "duration-expressive-fast-spatial ease-expressive-fast-spatial",
+    // Disabled — self-targeting
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
   ],
   {
     variants: {
       variant: {
-        filled: "text-on-primary",
-        tonal: "text-on-secondary-container",
-        outlined: "text-primary"
+        filled: [
+          "bg-primary text-on-primary shadow-none",
+          "group-data-[hovered]/sb-trailing:shadow-elevation-1",
+          "group-data-[focus-visible]/sb-trailing:shadow-none",
+          "group-data-[pressed]/sb-trailing:group-data-[pressed]/sb-trailing:shadow-none",
+          "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+        ],
+        tonal: [
+          "bg-secondary-container text-on-secondary-container shadow-none",
+          "group-data-[hovered]/sb-trailing:shadow-elevation-1",
+          "group-data-[focus-visible]/sb-trailing:shadow-none",
+          "group-data-[pressed]/sb-trailing:group-data-[pressed]/sb-trailing:shadow-none",
+          "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+        ],
+        outlined: [
+          "bg-transparent border border-outline text-primary",
+          "data-[disabled]:border-on-surface/12 data-[disabled]:text-on-surface/38"
+        ],
+        elevated: [
+          "bg-surface-container-low text-primary shadow-elevation-1",
+          "group-data-[hovered]/sb-trailing:shadow-elevation-2",
+          "group-data-[focus-visible]/sb-trailing:shadow-elevation-1",
+          "group-data-[pressed]/sb-trailing:group-data-[pressed]/sb-trailing:shadow-elevation-1",
+          "data-[disabled]:bg-on-surface/12 data-[disabled]:text-on-surface/38 data-[disabled]:shadow-none"
+        ]
       },
       size: {
-        small: "pl-4 pr-3 text-xs",
-        medium: "pl-6 pr-4 text-sm",
-        large: "pl-8 pr-5 text-base"
+        // Square dimensions (width = height) so selected state = perfect circle.
+        // Per-size inner-radius rest/morph values mirror the leading segment.
+        xs: "h-8 w-8",
+        sm: "h-10 w-10",
+        md: "h-14 w-14",
+        lg: [
+          "h-24 w-24",
+          // lg rest=sm, hover/focus→lg, pressed→xl; selected→full handled in base classes
+          "[--sb-inner-radius:var(--radius-sm)]",
+          "data-[hovered]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[focus-visible]:data-[focus-visible]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[pressed]:data-[pressed]:data-[pressed]:[--sb-inner-radius:var(--radius-xl)]"
+        ],
+        xl: [
+          "h-[8.5rem] w-[8.5rem]",
+          // xl rest=md, hover/focus→lg, pressed→xl; selected→full handled in base classes
+          "[--sb-inner-radius:var(--radius-md)]",
+          "data-[hovered]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[focus-visible]:data-[focus-visible]:[--sb-inner-radius:var(--radius-lg)]",
+          "data-[pressed]:data-[pressed]:data-[pressed]:[--sb-inner-radius:var(--radius-xl)]"
+        ]
       }
     },
     defaultVariants: {
       variant: "filled",
-      size: "medium"
+      size: "sm"
     }
   }
 );
-var splitButtonDropdownVariants = classVarianceAuthority.cva(
+var splitButtonStateLayerVariants = classVarianceAuthority.cva(
   [
-    "group/dropdown relative inline-flex items-center justify-center cursor-pointer",
-    "h-full",
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2"
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       variant: {
-        filled: "text-on-primary border-l border-on-primary/38",
-        tonal: "text-on-secondary-container border-l border-on-secondary-container/38",
-        outlined: "text-primary border-l border-outline"
+        filled: "bg-on-primary",
+        tonal: "bg-on-secondary-container",
+        outlined: "bg-primary",
+        elevated: "bg-primary"
       },
-      size: {
-        small: "px-1.5",
-        medium: "px-2",
-        large: "px-3"
+      /**
+       * groupScope identifies which segment this state layer belongs to so it
+       * reads from the correct group-data-[x]/<scope> selectors.
+       */
+      groupScope: {
+        leading: [
+          "group-data-[hovered]/sb-leading:opacity-8",
+          "group-data-[focus-visible]/sb-leading:opacity-10",
+          "group-data-[pressed]/sb-leading:group-data-[pressed]/sb-leading:opacity-10",
+          "group-data-[disabled]/sb-leading:hidden"
+        ],
+        trailing: [
+          "group-data-[hovered]/sb-trailing:opacity-8",
+          "group-data-[focus-visible]/sb-trailing:opacity-10",
+          "group-data-[pressed]/sb-trailing:group-data-[pressed]/sb-trailing:opacity-10",
+          "group-data-[disabled]/sb-trailing:hidden"
+        ]
       }
     },
     defaultVariants: {
       variant: "filled",
-      size: "medium"
+      groupScope: "leading"
     }
   }
 );
+var splitButtonFocusRingVariants = classVarianceAuthority.cva(
+  [
+    "pointer-events-none absolute inset-[-3px]",
+    "outline outline-2 outline-offset-0 outline-secondary",
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    "opacity-0"
+  ],
+  {
+    variants: {
+      /**
+       * Corner shape must match the segment it wraps.
+       * Leading: full-left, inner-right follows --sb-inner-radius.
+       * Trailing: full-right, inner-left follows --sb-inner-radius.
+       */
+      groupScope: {
+        leading: [
+          "rounded-tl-full rounded-bl-full",
+          "rounded-tr-[calc(var(--sb-inner-radius,var(--radius-xs))+3px)]",
+          "rounded-br-[calc(var(--sb-inner-radius,var(--radius-xs))+3px)]",
+          "group-data-[focus-visible]/sb-leading:opacity-100"
+        ],
+        trailing: [
+          "rounded-tr-full rounded-br-full",
+          "rounded-tl-[calc(var(--sb-inner-radius,var(--radius-xs))+3px)]",
+          "rounded-bl-[calc(var(--sb-inner-radius,var(--radius-xs))+3px)]",
+          "group-data-[focus-visible]/sb-trailing:opacity-100"
+        ]
+      }
+    },
+    defaultVariants: { groupScope: "leading" }
+  }
+);
+var splitButtonLabelVariants = classVarianceAuthority.cva(["relative z-10 inline-flex items-center"]);
+var splitButtonIconVariants = classVarianceAuthority.cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center",
+    // Spatial spring motion for the optical-offset translate
+    "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+    // Reset offset when the trailing segment is in selected state (menu open)
+    "group-data-[selected]/sb-trailing:translate-x-0"
+  ],
+  {
+    variants: {
+      size: {
+        // Include per-size icon dimension + unselected optical offset
+        xs: ["size-5", "-translate-x-px"],
+        sm: ["size-5", "-translate-x-px"],
+        md: ["size-6", "-translate-x-0.5"],
+        lg: ["size-8", "-translate-x-[3px]"],
+        xl: ["size-10", "-translate-x-[6px]"]
+      }
+    },
+    defaultVariants: { size: "sm" }
+  }
+);
+var splitButtonMenuVariants = classVarianceAuthority.cva([
+  "absolute top-full right-0 z-50 mt-1 min-w-40",
+  "bg-surface-container rounded-md py-2",
+  "shadow-elevation-2",
+  "animate-md-scale-in"
+]);
+var splitButtonMenuItemVariants = classVarianceAuthority.cva(
+  [
+    "text-body-large text-on-surface cursor-pointer px-4 py-2",
+    "hover:bg-on-surface/8",
+    "focus:bg-on-surface/10 focus:outline-none"
+  ],
+  {
+    variants: {
+      isDisabled: {
+        true: "text-on-surface/38 pointer-events-none cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: { isDisabled: false }
+  }
+);
 var splitButtonVariants = {
   container: splitButtonContainerVariants,
-  primary: splitButtonPrimaryVariants,
-  dropdown: splitButtonDropdownVariants
+  leading: splitButtonLeadingVariants,
+  trailing: splitButtonTrailingVariants,
+  stateLayer: splitButtonStateLayerVariants,
+  focusRing: splitButtonFocusRingVariants,
+  label: splitButtonLabelVariants,
+  icon: splitButtonIconVariants,
+  menu: splitButtonMenuVariants,
+  menuItem: splitButtonMenuItemVariants
 };
-var ChevronIcon = ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsx(
+var ChevronIcon = ({
+  isOpen,
+  reducedMotion
+}) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     "aria-hidden": "true",
     "data-testid": "split-button-chevron",
-    width: "18",
-    height: "18",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: cn("duration-short4 ease-standard transition-transform", isOpen && "rotate-180"),
+    className: cn(
+      "size-full",
+      !reducedMotion && "duration-expressive-fast-spatial ease-expressive-fast-spatial transition-transform",
+      isOpen && "rotate-180"
+    ),
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5H7z", fill: "currentColor" })
   }
 );
 var SplitButton = React.forwardRef(
   ({
     variant = "filled",
-    size = "medium",
+    size = "sm",
     primaryLabel,
     onPrimaryAction,
     items,
@@ -9738,32 +9987,73 @@ var SplitButton = React.forwardRef(
     "aria-label": ariaLabel,
     className
   }, forwardedRef) => {
-    const primaryRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
+    const leadingRef = React.useRef(null);
+    const trailingRef = React.useRef(null);
     const menuRef = React.useRef(null);
+    const reducedMotion = useReducedMotion();
     const menuState = reactStately.useMenuTriggerState({});
-    const { buttonProps: primaryButtonProps } = reactAria.useButton(
+    const [isLeadingPressed, setIsLeadingPressed] = React.useState(false);
+    const handleLeadingPressStart = React.useCallback(() => setIsLeadingPressed(true), []);
+    const handleLeadingPressEnd = React.useCallback(() => setIsLeadingPressed(false), []);
+    const { isHovered: isLeadingHovered, hoverProps: leadingHoverProps } = reactAria.useHover({
+      isDisabled
+    });
+    const { isFocusVisible: isLeadingFocusVisible, focusProps: leadingFocusProps } = reactAria.useFocusRing();
+    const { buttonProps: leadingButtonProps } = reactAria.useButton(
       {
         isDisabled,
         onPress: onPrimaryAction,
+        onPressStart: handleLeadingPressStart,
+        onPressEnd: handleLeadingPressEnd,
         elementType: "button"
       },
-      primaryRef
+      leadingRef
     );
-    const handleDropdownPress = React.useCallback(() => {
+    const [isTrailingPressed, setIsTrailingPressed] = React.useState(false);
+    const handleTrailingPressStart = React.useCallback(() => setIsTrailingPressed(true), []);
+    const handleTrailingPressEnd = React.useCallback(() => setIsTrailingPressed(false), []);
+    const { isHovered: isTrailingHovered, hoverProps: trailingHoverProps } = reactAria.useHover({
+      isDisabled
+    });
+    const { isFocusVisible: isTrailingFocusVisible, focusProps: trailingFocusProps } = reactAria.useFocusRing();
+    const handleTrailingPress = React.useCallback(() => {
       if (menuState.isOpen) {
         menuState.close();
       } else {
         menuState.open();
       }
     }, [menuState]);
-    const { buttonProps: dropdownButtonProps } = reactAria.useButton(
+    const { buttonProps: trailingButtonProps } = reactAria.useButton(
       {
         isDisabled,
-        onPress: handleDropdownPress,
+        onPress: handleTrailingPress,
+        onPressStart: handleTrailingPressStart,
+        onPressEnd: handleTrailingPressEnd,
         elementType: "button"
       },
-      dropdownRef
+      trailingRef
+    );
+    const { onMouseDown: handleLeadingRipple, ripples: leadingRipples } = useRipple({
+      disabled: isDisabled
+    });
+    const { onMouseDown: handleTrailingRipple, ripples: trailingRipples } = useRipple({
+      disabled: isDisabled
+    });
+    const onLeadingMouseDown = React.useCallback(
+      (e) => {
+        const ariaHandler = leadingButtonProps.onMouseDown;
+        ariaHandler?.(e);
+        handleLeadingRipple(e);
+      },
+      [leadingButtonProps, handleLeadingRipple]
+    );
+    const onTrailingMouseDown = React.useCallback(
+      (e) => {
+        const ariaHandler = trailingButtonProps.onMouseDown;
+        ariaHandler?.(e);
+        handleTrailingRipple(e);
+      },
+      [trailingButtonProps, handleTrailingRipple]
     );
     const handleMenuItemSelect = React.useCallback(
       (item) => {
@@ -9779,13 +10069,11 @@ var SplitButton = React.forwardRef(
       const handleGlobalKeyDown = (e) => {
         if (e.key === "Escape") {
           menuState.close();
-          dropdownRef.current?.focus();
+          trailingRef.current?.focus();
         }
       };
       document.addEventListener("keydown", handleGlobalKeyDown);
-      return () => {
-        document.removeEventListener("keydown", handleGlobalKeyDown);
-      };
+      return () => document.removeEventListener("keydown", handleGlobalKeyDown);
     }, [menuState, menuState.isOpen]);
     const handleMenuKeyDown = React.useCallback(
       (e) => {
@@ -9818,7 +10106,7 @@ var SplitButton = React.forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -9843,28 +10131,6 @@ var SplitButton = React.forwardRef(
       },
       [menuState]
     );
-    const { onMouseDown: handlePrimaryRipple, ripples: primaryRipples } = useRipple({
-      disabled: isDisabled
-    });
-    const { onMouseDown: handleDropdownRipple, ripples: dropdownRipples } = useRipple({
-      disabled: isDisabled
-    });
-    const onPrimaryMouseDown = React.useCallback(
-      (e) => {
-        const ariaHandler = primaryButtonProps.onMouseDown;
-        ariaHandler?.(e);
-        handlePrimaryRipple(e);
-      },
-      [primaryButtonProps, handlePrimaryRipple]
-    );
-    const onDropdownMouseDown = React.useCallback(
-      (e) => {
-        const ariaHandler = dropdownButtonProps.onMouseDown;
-        ariaHandler?.(e);
-        handleDropdownRipple(e);
-      },
-      [dropdownButtonProps, handleDropdownRipple]
-    );
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -9872,63 +10138,81 @@ var SplitButton = React.forwardRef(
           ref: forwardedRef,
           role: "group",
           "aria-label": ariaLabel ?? `${primaryLabel} split button`,
-          className: cn(splitButtonContainerVariants({ variant, size, isDisabled }), className),
+          className: cn(splitButtonContainerVariants(), className),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
-                ...primaryButtonProps,
-                ref: primaryRef,
+                ...reactAria.mergeProps(leadingButtonProps, leadingHoverProps, leadingFocusProps),
+                ref: leadingRef,
                 type: "button",
                 tabIndex: isDisabled ? -1 : 0,
-                onMouseDown: onPrimaryMouseDown,
-                className: splitButtonPrimaryVariants({ variant, size }),
+                onMouseDown: onLeadingMouseDown,
+                ...getInteractionDataAttributes({
+                  isHovered: isLeadingHovered,
+                  isFocusVisible: isLeadingFocusVisible,
+                  isPressed: isLeadingPressed,
+                  isDisabled
+                }),
+                className: splitButtonLeadingVariants({ variant, size }),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       "data-testid": "primary-state-layer",
                       "aria-hidden": "true",
-                      className: cn(
-                        "pointer-events-none absolute inset-0 bg-current opacity-0",
-                        "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity",
-                        "group-hover/primary:opacity-8"
-                      )
+                      className: splitButtonStateLayerVariants({ variant, groupScope: "leading" })
                     }
                   ),
-                  primaryRipples,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: primaryLabel })
+                  leadingRipples,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: splitButtonFocusRingVariants({ groupScope: "leading" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: splitButtonLabelVariants(), children: primaryLabel })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "split-button-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
-                ...dropdownButtonProps,
-                ref: dropdownRef,
+                ...reactAria.mergeProps(trailingButtonProps, trailingHoverProps, trailingFocusProps),
+                ref: trailingRef,
                 type: "button",
                 tabIndex: isDisabled ? -1 : 0,
                 "aria-haspopup": "menu",
                 "aria-expanded": menuState.isOpen,
                 "aria-label": `${primaryLabel} options, expand`,
-                onMouseDown: onDropdownMouseDown,
-                className: splitButtonDropdownVariants({ variant, size }),
+                onMouseDown: onTrailingMouseDown,
+                ...getInteractionDataAttributes({
+                  isHovered: isTrailingHovered,
+                  isFocusVisible: isTrailingFocusVisible,
+                  isPressed: isTrailingPressed,
+                  isSelected: menuState.isOpen,
+                  isDisabled
+                }),
+                className: splitButtonTrailingVariants({ variant, size }),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
                       "data-testid": "dropdown-state-layer",
                       "aria-hidden": "true",
-                      className: cn(
-                        "pointer-events-none absolute inset-0 bg-current opacity-0",
-                        "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity",
-                        "group-hover/dropdown:opacity-8"
-                      )
+                      className: splitButtonStateLayerVariants({ variant, groupScope: "trailing" })
+                    }
+                  ),
+                  trailingRipples,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: splitButtonFocusRingVariants({ groupScope: "trailing" })
                     }
                   ),
-                  dropdownRipples,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen: menuState.isOpen }) })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: splitButtonIconVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen: menuState.isOpen, reducedMotion }) })
                 ]
               }
             )
@@ -9942,10 +10226,7 @@ var SplitButton = React.forwardRef(
           role: "menu",
           "aria-label": `${primaryLabel} options`,
           onKeyDown: handleMenuKeyDown,
-          className: cn(
-            "bg-surface-container absolute top-full right-0 z-50 mt-1 min-w-40 rounded-md py-2",
-            "shadow-elevation-2"
-          ),
+          className: splitButtonMenuVariants(),
           children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             "li",
             {
@@ -9954,11 +10235,7 @@ var SplitButton = React.forwardRef(
               "aria-disabled": item.isDisabled ?? void 0,
               onClick: () => handleMenuItemSelect(item),
               onKeyDown: (e) => handleMenuItemKeyDown(e, item),
-              className: cn(
-                "text-body-large text-on-surface cursor-pointer px-4 py-2",
-                "hover:bg-on-surface/8",
-                item.isDisabled && "text-on-surface/38 pointer-events-none"
-              ),
+              className: splitButtonMenuItemVariants({ isDisabled: item.isDisabled ?? false }),
               children: item.label
             },
             item.label
@@ -9978,32 +10255,32 @@ var SplitButtonHeadless = React.forwardRef(
     "aria-label": ariaLabel,
     className
   }, forwardedRef) => {
-    const primaryRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
+    const leadingRef = React.useRef(null);
+    const trailingRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const menuState = reactStately.useMenuTriggerState({});
-    const { buttonProps: primaryButtonProps } = reactAria.useButton(
+    const { buttonProps: leadingButtonProps } = reactAria.useButton(
       {
         isDisabled,
         onPress: onPrimaryAction,
         elementType: "button"
       },
-      primaryRef
+      leadingRef
     );
-    const handleDropdownPress = React.useCallback(() => {
+    const handleTrailingPress = React.useCallback(() => {
       if (menuState.isOpen) {
         menuState.close();
       } else {
         menuState.open();
       }
     }, [menuState]);
-    const { buttonProps: dropdownButtonProps } = reactAria.useButton(
+    const { buttonProps: trailingButtonProps } = reactAria.useButton(
       {
         isDisabled,
-        onPress: handleDropdownPress,
+        onPress: handleTrailingPress,
         elementType: "button"
       },
-      dropdownRef
+      trailingRef
     );
     const handleMenuItemSelect = React.useCallback(
       (item) => {
@@ -10019,13 +10296,11 @@ var SplitButtonHeadless = React.forwardRef(
       const handleGlobalKeyDown = (e) => {
         if (e.key === "Escape") {
           menuState.close();
-          dropdownRef.current?.focus();
+          trailingRef.current?.focus();
         }
       };
       document.addEventListener("keydown", handleGlobalKeyDown);
-      return () => {
-        document.removeEventListener("keydown", handleGlobalKeyDown);
-      };
+      return () => document.removeEventListener("keydown", handleGlobalKeyDown);
     }, [menuState, menuState.isOpen]);
     const handleMenuKeyDown = React.useCallback(
       (e) => {
@@ -10058,7 +10333,7 @@ var SplitButtonHeadless = React.forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -10094,19 +10369,18 @@ var SplitButtonHeadless = React.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              ...primaryButtonProps,
-              ref: primaryRef,
+              ...leadingButtonProps,
+              ref: leadingRef,
               type: "button",
               tabIndex: isDisabled ? -1 : 0,
               children: primaryLabel
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              ...dropdownButtonProps,
-              ref: dropdownRef,
+              ...trailingButtonProps,
+              ref: trailingRef,
               type: "button",
               tabIndex: isDisabled ? -1 : 0,
               "aria-haspopup": "menu",
@@ -16376,8 +16650,14 @@ exports.sliderHandleVariants = sliderHandleVariants;
 exports.sliderInactiveTrackVariants = sliderInactiveTrackVariants;
 exports.sliderTrackLayoutVariants = sliderTrackLayoutVariants;
 exports.splitButtonContainerVariants = splitButtonContainerVariants;
-exports.splitButtonDropdownVariants = splitButtonDropdownVariants;
-exports.splitButtonPrimaryVariants = splitButtonPrimaryVariants;
+exports.splitButtonFocusRingVariants = splitButtonFocusRingVariants;
+exports.splitButtonIconVariants = splitButtonIconVariants;
+exports.splitButtonLabelVariants = splitButtonLabelVariants;
+exports.splitButtonLeadingVariants = splitButtonLeadingVariants;
+exports.splitButtonMenuItemVariants = splitButtonMenuItemVariants;
+exports.splitButtonMenuVariants = splitButtonMenuVariants;
+exports.splitButtonStateLayerVariants = splitButtonStateLayerVariants;
+exports.splitButtonTrailingVariants = splitButtonTrailingVariants;
 exports.splitButtonVariants = splitButtonVariants;
 exports.supportingTextVariants = supportingTextVariants;
 exports.timeInputFieldVariants = timeInputFieldVariants;