@tinybigui/react 0.19.0 → 0.21.0

package/dist/index.cjs

@@ -6560,7 +6560,6 @@ var snackbarBaseVariants = classVarianceAuthority.cva(
     "min-w-72",
     "max-w-snackbar-max",
     "w-max",
-    "min-h-12",
     // Restore pointer events so hover/focus timer pause works
     "pointer-events-auto",
     // Surface
@@ -6571,25 +6570,27 @@ var snackbarBaseVariants = classVarianceAuthority.cva(
     "shadow-elevation-3",
     // Layout
     "flex",
-    "items-center",
     "gap-x-1",
-    "pl-4 pr-2",
-    // Typography
+    "pl-4",
+    // Typography base (inherited by message/supporting-text slots)
     "text-body-medium",
     "text-inverse-on-surface",
-    // Transition (properties used by both entry and exit)
+    // Slide + fade transition — spring-standard effects tokens (no overshoot).
+    // The translate offset is small (12px), so using the effects token pair for
+    // BOTH opacity AND transform is safe: no visible overshoot at this scale.
     "transition-[opacity,transform]",
     "will-change-[opacity,transform]"
   ],
   {
     variants: {
       /**
-       * Whether the Snackbar has supporting text (two-line layout).
-       * Adjusts vertical padding to MD3 spec for two-line configuration.
+       * Two-line density mode.
+       *   false — 48dp, items centered (single-line message)
+       *   true  — 68dp, items top-aligned (message + supporting text)
        */
       twoLine: {
-        true: "py-1",
-        false: "py-1"
+        false: ["min-h-12", "items-center", "pr-1"],
+        true: ["min-h-[4.25rem]", "items-start", "pr-1"]
       }
     },
     defaultVariants: {
@@ -6615,53 +6616,211 @@ classVarianceAuthority.cva("", {
 var snackbarAnimationVariants = classVarianceAuthority.cva("", {
   variants: {
     animationState: {
-      entering: ["opacity-0", "scale-75"],
-      visible: ["scale-100", "opacity-100", "duration-medium1", "ease-emphasized-decelerate"],
-      exiting: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"],
-      exited: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"]
+      entering: [],
+      visible: [],
+      exiting: [],
+      exited: []
     },
     enterDirection: {
-      up: ["origin-bottom"],
-      down: ["origin-top"]
+      up: [],
+      down: []
     }
   },
-  defaultVariants: {
-    animationState: "entering",
-    enterDirection: "up"
-  }
-});
-classVarianceAuthority.cva([...snackbarBaseVariants()], {
-  variants: {
-    animationState: {
-      entering: ["opacity-0", "scale-75"],
-      visible: ["scale-100", "opacity-100", "duration-medium1", "ease-emphasized-decelerate"],
-      exiting: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"],
-      exited: ["scale-75", "opacity-0", "duration-short4", "ease-standard-accelerate"]
+  compoundVariants: [
+    // ── entering ──────────────────────────────────────────────────────────────
+    // No transition duration — instant jump to offset state before first paint.
+    {
+      animationState: "entering",
+      enterDirection: "up",
+      className: ["opacity-0", "translate-y-3"]
     },
-    enterDirection: {
-      up: ["origin-bottom"],
-      down: ["origin-top"]
+    {
+      animationState: "entering",
+      enterDirection: "down",
+      className: ["opacity-0", "-translate-y-3"]
     },
-    position: {
-      "bottom-center": ["bottom-4", "left-1/2", "-translate-x-1/2"],
-      "bottom-left": ["bottom-4", "left-4"],
-      "bottom-right": ["bottom-4", "right-4"],
-      "top-center": ["top-4", "left-1/2", "-translate-x-1/2"],
-      "top-left": ["top-4", "left-4"],
-      "top-right": ["top-4", "right-4"]
+    // ── visible ───────────────────────────────────────────────────────────────
+    // spring-standard default effects = 200ms, no overshoot.
+    {
+      animationState: "visible",
+      enterDirection: "up",
+      className: [
+        "opacity-100",
+        "translate-y-0",
+        "duration-spring-standard-default-effects",
+        "ease-spring-standard-default-effects"
+      ]
+    },
+    {
+      animationState: "visible",
+      enterDirection: "down",
+      className: [
+        "opacity-100",
+        "translate-y-0",
+        "duration-spring-standard-default-effects",
+        "ease-spring-standard-default-effects"
+      ]
+    },
+    // ── exiting ───────────────────────────────────────────────────────────────
+    // spring-standard fast effects = 150ms (quicker exit).
+    {
+      animationState: "exiting",
+      enterDirection: "up",
+      className: [
+        "opacity-0",
+        "translate-y-3",
+        "duration-spring-standard-fast-effects",
+        "ease-spring-standard-fast-effects"
+      ]
+    },
+    {
+      animationState: "exiting",
+      enterDirection: "down",
+      className: [
+        "opacity-0",
+        "-translate-y-3",
+        "duration-spring-standard-fast-effects",
+        "ease-spring-standard-fast-effects"
+      ]
+    },
+    // ── exited ────────────────────────────────────────────────────────────────
+    // Hold final position — element is removed from DOM shortly after.
+    {
+      animationState: "exited",
+      enterDirection: "up",
+      className: ["opacity-0", "translate-y-3"]
     },
-    twoLine: {
-      true: "py-1",
-      false: "py-1"
+    {
+      animationState: "exited",
+      enterDirection: "down",
+      className: ["opacity-0", "-translate-y-3"]
     }
-  },
+  ],
   defaultVariants: {
     animationState: "entering",
-    enterDirection: "up",
-    position: "bottom-center",
-    twoLine: false
+    enterDirection: "up"
   }
 });
+classVarianceAuthority.cva(
+  [
+    "min-w-72",
+    "max-w-snackbar-max",
+    "w-max",
+    "pointer-events-auto",
+    "bg-inverse-surface",
+    "rounded-xs",
+    "shadow-elevation-3",
+    "flex",
+    "gap-x-1",
+    "pl-4",
+    "text-body-medium",
+    "text-inverse-on-surface",
+    "transition-[opacity,transform]",
+    "will-change-[opacity,transform]"
+  ],
+  {
+    variants: {
+      twoLine: {
+        false: ["min-h-12", "items-center", "pr-1"],
+        true: ["min-h-[4.25rem]", "items-start", "pr-1"]
+      },
+      animationState: {
+        entering: [],
+        visible: [],
+        exiting: [],
+        exited: []
+      },
+      enterDirection: {
+        up: [],
+        down: []
+      },
+      position: {
+        "bottom-center": ["bottom-4", "left-1/2", "-translate-x-1/2"],
+        "bottom-left": ["bottom-4", "left-4"],
+        "bottom-right": ["bottom-4", "right-4"],
+        "top-center": ["top-4", "left-1/2", "-translate-x-1/2"],
+        "top-left": ["top-4", "left-4"],
+        "top-right": ["top-4", "right-4"]
+      }
+    },
+    compoundVariants: [
+      {
+        animationState: "entering",
+        enterDirection: "up",
+        className: ["opacity-0", "translate-y-3"]
+      },
+      {
+        animationState: "entering",
+        enterDirection: "down",
+        className: ["opacity-0", "-translate-y-3"]
+      },
+      {
+        animationState: "visible",
+        enterDirection: "up",
+        className: [
+          "opacity-100",
+          "translate-y-0",
+          "duration-spring-standard-default-effects",
+          "ease-spring-standard-default-effects"
+        ]
+      },
+      {
+        animationState: "visible",
+        enterDirection: "down",
+        className: [
+          "opacity-100",
+          "translate-y-0",
+          "duration-spring-standard-default-effects",
+          "ease-spring-standard-default-effects"
+        ]
+      },
+      {
+        animationState: "exiting",
+        enterDirection: "up",
+        className: [
+          "opacity-0",
+          "translate-y-3",
+          "duration-spring-standard-fast-effects",
+          "ease-spring-standard-fast-effects"
+        ]
+      },
+      {
+        animationState: "exiting",
+        enterDirection: "down",
+        className: [
+          "opacity-0",
+          "-translate-y-3",
+          "duration-spring-standard-fast-effects",
+          "ease-spring-standard-fast-effects"
+        ]
+      },
+      {
+        animationState: "exited",
+        enterDirection: "up",
+        className: ["opacity-0", "translate-y-3"]
+      },
+      {
+        animationState: "exited",
+        enterDirection: "down",
+        className: ["opacity-0", "-translate-y-3"]
+      }
+    ],
+    defaultVariants: {
+      animationState: "entering",
+      enterDirection: "up",
+      position: "bottom-center",
+      twoLine: false
+    }
+  }
+);
+var snackbarContentVariants = classVarianceAuthority.cva([
+  "flex",
+  "flex-col",
+  "flex-1",
+  "min-w-0",
+  "py-3",
+  "pr-2"
+]);
 var snackbarMessageVariants = classVarianceAuthority.cva([
   "flex-1",
   "text-body-medium",
@@ -6670,15 +6829,83 @@ var snackbarMessageVariants = classVarianceAuthority.cva([
 var snackbarSupportingTextVariants = classVarianceAuthority.cva([
   "text-body-medium",
   "text-inverse-on-surface",
-  "opacity-80"
+  "mt-1"
 ]);
-var snackbarActionVariants = classVarianceAuthority.cva(["shrink-0", "text-inverse-primary"]);
-var snackbarCloseVariants = classVarianceAuthority.cva(["shrink-0", "text-inverse-on-surface"]);
-var snackbarContentVariants = classVarianceAuthority.cva(["flex", "flex-col", "flex-1", "min-w-0 py-2 pr-2"]);
-classVarianceAuthority.cva(["scale-75", "opacity-0"]);
+classVarianceAuthority.cva(["opacity-0"]);
 function getEnterDirection(position) {
   return position.startsWith("top") ? "down" : "up";
 }
+var snackbarActionVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative inline-flex items-center justify-center shrink-0",
+  "h-9 px-3",
+  "rounded-full cursor-pointer select-none",
+  // Typography (MD3 text button: label-large)
+  "text-label-large",
+  "text-inverse-primary",
+  // Effects transition (color)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:text-on-surface/38"
+]);
+var snackbarActionStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+  "bg-inverse-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/snackbar-action:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/snackbar-action:opacity-10",
+  // Pressed: 10%, doubled selector wins over hover
+  "group-data-[pressed]/snackbar-action:group-data-[pressed]/snackbar-action:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/snackbar-action:hidden"
+]);
+var snackbarActionFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-2 outline-offset-0 outline-inverse-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/snackbar-action:opacity-100"
+]);
+var snackbarCloseVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative inline-flex items-center justify-center shrink-0",
+  "size-8",
+  "rounded-full cursor-pointer select-none",
+  // Color
+  "text-inverse-on-surface",
+  // Effects transition (color)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:text-on-surface/38"
+]);
+var snackbarCloseStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+  "bg-inverse-on-surface",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/snackbar-close:opacity-8",
+  // Focus: 10%
+  "group-data-[focus-visible]/snackbar-close:opacity-10",
+  // Pressed: 10%, doubled selector wins over hover
+  "group-data-[pressed]/snackbar-close:group-data-[pressed]/snackbar-close:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/snackbar-close:hidden"
+]);
+var snackbarCloseFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-2 outline-offset-0 outline-inverse-on-surface",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/snackbar-close:opacity-100"
+]);
+var snackbarCloseIconVariants = classVarianceAuthority.cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center",
+  "size-6"
+]);
 function CloseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -6693,6 +6920,52 @@ function CloseIcon() {
     }
   );
 }
+function SnackbarActionButton({ label, onAction }) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton({ onPress: onAction }, ref);
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ...reactAria.mergeProps(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarActionVariants(), "group/snackbar-action"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarActionStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarActionFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: label })
+      ]
+    }
+  );
+}
+function SnackbarCloseButton({ onPress }) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton({ onPress, "aria-label": "Close" }, ref);
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      ...reactAria.mergeProps(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarCloseVariants(), "group/snackbar-close"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseIconVariants(), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
 var Snackbar = React.forwardRef(function Snackbar2({
   message,
   supportingText,
@@ -6705,6 +6978,7 @@ var Snackbar = React.forwardRef(function Snackbar2({
   className
 }, ref) {
   const isTwoLine = Boolean(supportingText);
+  const reducedMotion = useReducedMotion();
   const baseClassName = cn(snackbarBaseVariants({ twoLine: isTwoLine }), className);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SnackbarHeadless,
@@ -6719,31 +6993,22 @@ var Snackbar = React.forwardRef(function Snackbar2({
       position,
       ...onClose !== void 0 && { onClose },
       className: baseClassName,
-      getAnimationClassName: (state, pos) => snackbarAnimationVariants({ animationState: state, enterDirection: getEnterDirection(pos) }),
+      getAnimationClassName: (state, pos) => {
+        if (reducedMotion) {
+          return state === "visible" ? "opacity-100 duration-spring-standard-default-effects ease-spring-standard-default-effects" : "opacity-0";
+        }
+        return snackbarAnimationVariants({
+          animationState: state,
+          enterDirection: getEnterDirection(pos)
+        });
+      },
       children: ({ onClose: triggerClose }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: snackbarContentVariants(), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarMessageVariants(), children: message }),
           supportingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarSupportingTextVariants(), children: supportingText })
         ] }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarActionVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "text",
-            onPress: action.onAction,
-            className: "text-inverse-primary hover:text-inverse-primary px-3",
-            children: action.label
-          }
-        ) }),
-        showClose && /* @__PURE__ */ jsxRuntime.jsx("span", { className: snackbarCloseVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton,
-          {
-            variant: "standard",
-            "aria-label": "Close",
-            onPress: triggerClose,
-            className: "text-inverse-on-surface hover:text-inverse-on-surface",
-            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
-          }
-        ) })
+        action && /* @__PURE__ */ jsxRuntime.jsx(SnackbarActionButton, { label: action.label, onAction: action.onAction }),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(SnackbarCloseButton, { onPress: triggerClose })
       ] })
     }
   );
@@ -9367,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,
@@ -9473,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) => {
@@ -9514,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) => {
@@ -9553,7 +10106,7 @@ var SplitButton = React.forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -9578,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",
@@ -9607,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" })
                     }
                   ),
-                  dropdownRipples,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen: menuState.isOpen }) })
+                  trailingRipples,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: splitButtonFocusRingVariants({ groupScope: "trailing" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: splitButtonIconVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen: menuState.isOpen, reducedMotion }) })
                 ]
               }
             )
@@ -9677,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",
             {
@@ -9689,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
@@ -9713,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) => {
@@ -9754,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) => {
@@ -9793,7 +10333,7 @@ var SplitButtonHeadless = React.forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -9829,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",
@@ -16111,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;