@tinybigui/react 0.19.0 → 0.21.0

package/dist/index.js

@@ -6555,7 +6555,6 @@ var snackbarBaseVariants = 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
@@ -6566,25 +6565,27 @@ var snackbarBaseVariants = 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: {
@@ -6610,53 +6611,211 @@ cva("", {
 var snackbarAnimationVariants = 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"
-  }
-});
-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"
   }
 });
+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 = cva([
+  "flex",
+  "flex-col",
+  "flex-1",
+  "min-w-0",
+  "py-3",
+  "pr-2"
+]);
 var snackbarMessageVariants = cva([
   "flex-1",
   "text-body-medium",
@@ -6665,15 +6824,83 @@ var snackbarMessageVariants = cva([
 var snackbarSupportingTextVariants = cva([
   "text-body-medium",
   "text-inverse-on-surface",
-  "opacity-80"
+  "mt-1"
 ]);
-var snackbarActionVariants = cva(["shrink-0", "text-inverse-primary"]);
-var snackbarCloseVariants = cva(["shrink-0", "text-inverse-on-surface"]);
-var snackbarContentVariants = cva(["flex", "flex-col", "flex-1", "min-w-0 py-2 pr-2"]);
-cva(["scale-75", "opacity-0"]);
+cva(["opacity-0"]);
 function getEnterDirection(position) {
   return position.startsWith("top") ? "down" : "up";
 }
+var snackbarActionVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva([
+  "relative z-10 inline-flex shrink-0 items-center justify-center",
+  "size-6"
+]);
 function CloseIcon() {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -6688,6 +6915,52 @@ function CloseIcon() {
     }
   );
 }
+function SnackbarActionButton({ label, onAction }) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton({ onPress: onAction }, ref);
+  const { isHovered, hoverProps } = useHover({});
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...mergeProps$1(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarActionVariants(), "group/snackbar-action"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsx("span", { className: snackbarActionStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: snackbarActionFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label })
+      ]
+    }
+  );
+}
+function SnackbarCloseButton({ onPress }) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton({ onPress, "aria-label": "Close" }, ref);
+  const { isHovered, hoverProps } = useHover({});
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { onMouseDown, ripples } = useRipple();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...mergeProps$1(buttonProps, hoverProps, focusProps, { onMouseDown }),
+      ref,
+      className: cn(snackbarCloseVariants(), "group/snackbar-close"),
+      ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+      children: [
+        ripples,
+        /* @__PURE__ */ jsx("span", { className: snackbarCloseStateLayerVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: snackbarCloseFocusRingVariants(), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: snackbarCloseIconVariants(), "aria-hidden": "true", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
 var Snackbar = forwardRef(function Snackbar2({
   message,
   supportingText,
@@ -6700,6 +6973,7 @@ var Snackbar = forwardRef(function Snackbar2({
   className
 }, ref) {
   const isTwoLine = Boolean(supportingText);
+  const reducedMotion = useReducedMotion();
   const baseClassName = cn(snackbarBaseVariants({ twoLine: isTwoLine }), className);
   return /* @__PURE__ */ jsx(
     SnackbarHeadless,
@@ -6714,31 +6988,22 @@ var Snackbar = 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__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: snackbarContentVariants(), children: [
           /* @__PURE__ */ jsx("span", { className: snackbarMessageVariants(), children: message }),
           supportingText && /* @__PURE__ */ jsx("span", { className: snackbarSupportingTextVariants(), children: supportingText })
         ] }),
-        action && /* @__PURE__ */ jsx("span", { className: snackbarActionVariants(), children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "text",
-            onPress: action.onAction,
-            className: "text-inverse-primary hover:text-inverse-primary px-3",
-            children: action.label
-          }
-        ) }),
-        showClose && /* @__PURE__ */ jsx("span", { className: snackbarCloseVariants(), children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            variant: "standard",
-            "aria-label": "Close",
-            onPress: triggerClose,
-            className: "text-inverse-on-surface hover:text-inverse-on-surface",
-            children: /* @__PURE__ */ jsx(CloseIcon, {})
-          }
-        ) })
+        action && /* @__PURE__ */ jsx(SnackbarActionButton, { label: action.label, onAction: action.onAction }),
+        showClose && /* @__PURE__ */ jsx(SnackbarCloseButton, { onPress: triggerClose })
       ] })
     }
   );
@@ -9362,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,
@@ -9468,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) => {
@@ -9509,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) => {
@@ -9548,7 +10101,7 @@ var SplitButton = forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -9573,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",
@@ -9602,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" })
                     }
                   ),
-                  dropdownRipples,
-                  /* @__PURE__ */ jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsx(ChevronIcon, { isOpen: menuState.isOpen }) })
+                  trailingRipples,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: splitButtonFocusRingVariants({ groupScope: "trailing" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: splitButtonIconVariants({ size }), children: /* @__PURE__ */ jsx(ChevronIcon, { isOpen: menuState.isOpen, reducedMotion }) })
                 ]
               }
             )
@@ -9672,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",
             {
@@ -9684,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
@@ -9708,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) => {
@@ -9749,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) => {
@@ -9788,7 +10328,7 @@ var SplitButtonHeadless = forwardRef(
           }
           case "Escape": {
             menuState.close();
-            dropdownRef.current?.focus();
+            trailingRef.current?.focus();
             break;
           }
         }
@@ -9824,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",
@@ -15877,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