@tinybigui/react 0.20.0 → 0.21.0

package/dist/index.js

@@ -9627,105 +9627,354 @@ var Badge = forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var splitButtonContainerVariants = cva(
-  ["inline-flex items-center rounded-full overflow-hidden"],
+var splitButtonContainerVariants = cva([
+  "relative inline-flex items-stretch",
+  "gap-0.5"
+  // MD3 2dp gap between segments
+]);
+var splitButtonLeadingVariants = 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 = cva(
+var splitButtonTrailingVariants = 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 = cva(
+var splitButtonStateLayerVariants = 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 = 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 = cva(["relative z-10 inline-flex items-center"]);
+var splitButtonIconVariants = 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 = 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 = 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__ */ jsx(
+var ChevronIcon = ({
+  isOpen,
+  reducedMotion
+}) => /* @__PURE__ */ 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__ */ jsx("path", { d: "M7 10l5 5 5-5H7z", fill: "currentColor" })
   }
 );
 var SplitButton = forwardRef(
   ({
     variant = "filled",
-    size = "medium",
+    size = "sm",
     primaryLabel,
     onPrimaryAction,
     items,
@@ -9733,32 +9982,73 @@ var SplitButton = forwardRef(
     "aria-label": ariaLabel,
     className
   }, forwardedRef) => {
-    const primaryRef = useRef(null);
-    const dropdownRef = useRef(null);
+    const leadingRef = useRef(null);
+    const trailingRef = useRef(null);
     const menuRef = useRef(null);
+    const reducedMotion = useReducedMotion();
     const menuState = useMenuTriggerState({});
-    const { buttonProps: primaryButtonProps } = useButton(
+    const [isLeadingPressed, setIsLeadingPressed] = useState(false);
+    const handleLeadingPressStart = useCallback(() => setIsLeadingPressed(true), []);
+    const handleLeadingPressEnd = useCallback(() => setIsLeadingPressed(false), []);
+    const { isHovered: isLeadingHovered, hoverProps: leadingHoverProps } = useHover({
+      isDisabled
+    });
+    const { isFocusVisible: isLeadingFocusVisible, focusProps: leadingFocusProps } = useFocusRing();
+    const { buttonProps: leadingButtonProps } = useButton(
       {
         isDisabled,
         onPress: onPrimaryAction,
+        onPressStart: handleLeadingPressStart,
+        onPressEnd: handleLeadingPressEnd,
         elementType: "button"
       },
-      primaryRef
+      leadingRef
     );
-    const handleDropdownPress = useCallback(() => {
+    const [isTrailingPressed, setIsTrailingPressed] = useState(false);
+    const handleTrailingPressStart = useCallback(() => setIsTrailingPressed(true), []);
+    const handleTrailingPressEnd = useCallback(() => setIsTrailingPressed(false), []);
+    const { isHovered: isTrailingHovered, hoverProps: trailingHoverProps } = useHover({
+      isDisabled
+    });
+    const { isFocusVisible: isTrailingFocusVisible, focusProps: trailingFocusProps } = useFocusRing();
+    const handleTrailingPress = useCallback(() => {
       if (menuState.isOpen) {
         menuState.close();
       } else {
         menuState.open();
       }
     }, [menuState]);
-    const { buttonProps: dropdownButtonProps } = useButton(
+    const { buttonProps: trailingButtonProps } = 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 = useCallback(
+      (e) => {
+        const ariaHandler = leadingButtonProps.onMouseDown;
+        ariaHandler?.(e);
+        handleLeadingRipple(e);
+      },
+      [leadingButtonProps, handleLeadingRipple]
+    );
+    const onTrailingMouseDown = useCallback(
+      (e) => {
+        const ariaHandler = trailingButtonProps.onMouseDown;
+        ariaHandler?.(e);
+        handleTrailingRipple(e);
+      },
+      [trailingButtonProps, handleTrailingRipple]
     );
     const handleMenuItemSelect = useCallback(
       (item) => {
@@ -9774,13 +10064,11 @@ var SplitButton = 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 = useCallback(
       (e) => {
@@ -9813,7 +10101,7 @@ var SplitButton = forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -9838,28 +10126,6 @@ var SplitButton = forwardRef(
       },
       [menuState]
     );
-    const { onMouseDown: handlePrimaryRipple, ripples: primaryRipples } = useRipple({
-      disabled: isDisabled
-    });
-    const { onMouseDown: handleDropdownRipple, ripples: dropdownRipples } = useRipple({
-      disabled: isDisabled
-    });
-    const onPrimaryMouseDown = useCallback(
-      (e) => {
-        const ariaHandler = primaryButtonProps.onMouseDown;
-        ariaHandler?.(e);
-        handlePrimaryRipple(e);
-      },
-      [primaryButtonProps, handlePrimaryRipple]
-    );
-    const onDropdownMouseDown = useCallback(
-      (e) => {
-        const ariaHandler = dropdownButtonProps.onMouseDown;
-        ariaHandler?.(e);
-        handleDropdownRipple(e);
-      },
-      [dropdownButtonProps, handleDropdownRipple]
-    );
     return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
       /* @__PURE__ */ jsxs(
         "div",
@@ -9867,63 +10133,81 @@ var SplitButton = forwardRef(
           ref: forwardedRef,
           role: "group",
           "aria-label": ariaLabel ?? `${primaryLabel} split button`,
-          className: cn(splitButtonContainerVariants({ variant, size, isDisabled }), className),
+          className: cn(splitButtonContainerVariants(), className),
           children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
-                ...primaryButtonProps,
-                ref: primaryRef,
+                ...mergeProps$1(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__ */ 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__ */ jsx("span", { className: "relative z-10", children: primaryLabel })
+                  leadingRipples,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: splitButtonFocusRingVariants({ groupScope: "leading" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: splitButtonLabelVariants(), children: primaryLabel })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("span", { "data-testid": "split-button-divider", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxs(
               "button",
               {
-                ...dropdownButtonProps,
-                ref: dropdownRef,
+                ...mergeProps$1(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__ */ 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__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: splitButtonFocusRingVariants({ groupScope: "trailing" })
                     }
                   ),
-                  dropdownRipples,
-                  /* @__PURE__ */ jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsx(ChevronIcon, { isOpen: menuState.isOpen }) })
+                  /* @__PURE__ */ jsx("span", { className: splitButtonIconVariants({ size }), children: /* @__PURE__ */ jsx(ChevronIcon, { isOpen: menuState.isOpen, reducedMotion }) })
                 ]
               }
             )
@@ -9937,10 +10221,7 @@ var SplitButton = 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__ */ jsx(
             "li",
             {
@@ -9949,11 +10230,7 @@ var SplitButton = 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
@@ -9973,32 +10250,32 @@ var SplitButtonHeadless = forwardRef(
     "aria-label": ariaLabel,
     className
   }, forwardedRef) => {
-    const primaryRef = useRef(null);
-    const dropdownRef = useRef(null);
+    const leadingRef = useRef(null);
+    const trailingRef = useRef(null);
     const menuRef = useRef(null);
     const menuState = useMenuTriggerState({});
-    const { buttonProps: primaryButtonProps } = useButton(
+    const { buttonProps: leadingButtonProps } = useButton(
       {
         isDisabled,
         onPress: onPrimaryAction,
         elementType: "button"
       },
-      primaryRef
+      leadingRef
     );
-    const handleDropdownPress = useCallback(() => {
+    const handleTrailingPress = useCallback(() => {
       if (menuState.isOpen) {
         menuState.close();
       } else {
         menuState.open();
       }
     }, [menuState]);
-    const { buttonProps: dropdownButtonProps } = useButton(
+    const { buttonProps: trailingButtonProps } = useButton(
       {
         isDisabled,
-        onPress: handleDropdownPress,
+        onPress: handleTrailingPress,
         elementType: "button"
       },
-      dropdownRef
+      trailingRef
     );
     const handleMenuItemSelect = useCallback(
       (item) => {
@@ -10014,13 +10291,11 @@ var SplitButtonHeadless = 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 = useCallback(
       (e) => {
@@ -10053,7 +10328,7 @@ var SplitButtonHeadless = forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -10089,19 +10364,18 @@ var SplitButtonHeadless = forwardRef(
           /* @__PURE__ */ jsx(
             "button",
             {
-              ...primaryButtonProps,
-              ref: primaryRef,
+              ...leadingButtonProps,
+              ref: leadingRef,
               type: "button",
               tabIndex: isDisabled ? -1 : 0,
               children: primaryLabel
             }
           ),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx(
             "button",
             {
-              ...dropdownButtonProps,
-              ref: dropdownRef,
+              ...trailingButtonProps,
+              ref: trailingRef,
               type: "button",
               tabIndex: isDisabled ? -1 : 0,
               "aria-haspopup": "menu",
@@ -16142,6 +16416,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map