@bug-on/m3-expressive 1.1.0 → 1.2.1

package/dist/buttons.js

@@ -3,7 +3,7 @@
 
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('motion/react');
-var React11 = require('react');
+var React14 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
+var React14__namespace = /*#__PURE__*/_interopNamespace(React14);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -109,11 +109,11 @@ var ROTATE_KEY_SPLINES = [
 var ROTATE_VALUES = "0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24";
 var DETERMINATE_CIRCLE = "M24 7 C34.49 7 41 13.51 41 24 C41 34.49 34.49 41 24 41 C13.51 41 7 34.49 7 24 C7 13.51 13.51 7 24 7 Z";
 var DETERMINATE_SOFT_BURST = "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z";
-var IndeterminateSvg = React11__namespace.memo(function IndeterminateSvg2({
+var IndeterminateSvg = React14__namespace.memo(function IndeterminateSvg2({
   size
 }) {
-  const [ready, setReady] = React11__namespace.useState(false);
-  React11__namespace.useEffect(() => {
+  const [ready, setReady] = React14__namespace.useState(false);
+  React14__namespace.useEffect(() => {
     const raf = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(raf);
   }, []);
@@ -158,7 +158,7 @@ var IndeterminateSvg = React11__namespace.memo(function IndeterminateSvg2({
     }
   );
 });
-var DeterminateSvg = React11__namespace.memo(function DeterminateSvg2({
+var DeterminateSvg = React14__namespace.memo(function DeterminateSvg2({
   size,
   progress
 }) {
@@ -183,7 +183,7 @@ var DeterminateSvg = React11__namespace.memo(function DeterminateSvg2({
     }
   );
 });
-var LoadingIndicator = React11__namespace.forwardRef(
+var LoadingIndicator = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       variant = "uncontained",
@@ -298,7 +298,7 @@ function getSinePath(startX, endX, phase, wl, amp) {
   d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
   return d;
 }
-var CircularProgress = React11__namespace.forwardRef(
+var CircularProgress = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -336,15 +336,15 @@ var CircularProgress = React11__namespace.forwardRef(
     const isWavy = shape === "wavy";
     const BASELINE_SIZE = 48;
     const scaleFactor = size / BASELINE_SIZE;
-    const effectiveAmplitude = React11__namespace.useMemo(
+    const effectiveAmplitude = React14__namespace.useMemo(
       () => amplitude != null ? amplitude : 1.6 * scaleFactor,
       [amplitude, scaleFactor]
     );
-    const effectiveWavelength = React11__namespace.useMemo(
+    const effectiveWavelength = React14__namespace.useMemo(
       () => wavelength != null ? wavelength : 15 * scaleFactor,
       [wavelength, scaleFactor]
     );
-    const wavyActivePath = React11__namespace.useMemo(
+    const wavyActivePath = React14__namespace.useMemo(
       () => isWavy ? generateWavyCircularPath(
         center,
         radius,
@@ -353,8 +353,8 @@ var CircularProgress = React11__namespace.forwardRef(
       ) : null,
       [isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
     );
-    const circumference = React11__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
-    const gapForTrack = React11__namespace.useMemo(
+    const circumference = React14__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
+    const gapForTrack = React14__namespace.useMemo(
       () => (gapSize + trackHeight) / circumference,
       [gapSize, trackHeight, circumference]
     );
@@ -543,9 +543,9 @@ var CircularProgress = React11__namespace.forwardRef(
 );
 CircularProgress.displayName = "CircularProgress";
 function useContainerWidth() {
-  const [width, setWidth] = React11__namespace.useState(0);
-  const observerRef = React11__namespace.useRef(null);
-  const ref = React11__namespace.useCallback((node) => {
+  const [width, setWidth] = React14__namespace.useState(0);
+  const observerRef = React14__namespace.useRef(null);
+  const ref = React14__namespace.useCallback((node) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -559,7 +559,7 @@ function useContainerWidth() {
       observerRef.current = obs;
     }
   }, []);
-  React11__namespace.useEffect(() => {
+  React14__namespace.useEffect(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -569,7 +569,7 @@ function useContainerWidth() {
   return [ref, width];
 }
 function useMergedRef(...refs) {
-  return React11__namespace.useCallback(
+  return React14__namespace.useCallback(
     (node) => {
       for (const ref of refs) {
         if (typeof ref === "function") {
@@ -583,7 +583,7 @@ function useMergedRef(...refs) {
     [refs]
   );
 }
-var FlatLinearTrack = React11__namespace.memo(function FlatLinearTrack2({
+var FlatLinearTrack = React14__namespace.memo(function FlatLinearTrack2({
   trackHeight,
   activeColor,
   trackColor,
@@ -659,7 +659,7 @@ var FlatLinearTrack = React11__namespace.memo(function FlatLinearTrack2({
     }
   );
 });
-var WavyLinearTrack = React11__namespace.memo(function WavyLinearTrack2({
+var WavyLinearTrack = React14__namespace.memo(function WavyLinearTrack2({
   trackHeight,
   svgHeight,
   amplitude,
@@ -678,13 +678,13 @@ var WavyLinearTrack = React11__namespace.memo(function WavyLinearTrack2({
 }) {
   const isDeterminate = typeof value === "number";
   const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
-  const titleId = React11__namespace.useId();
+  const titleId = React14__namespace.useId();
   const [containerRef, width] = useContainerWidth();
-  const activePathRef = React11__namespace.useRef(null);
-  const trackPathRef = React11__namespace.useRef(null);
+  const activePathRef = React14__namespace.useRef(null);
+  const trackPathRef = React14__namespace.useRef(null);
   const amplitudeMV = react.useMotionValue(amplitude);
   const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
-  React11__namespace.useEffect(() => {
+  React14__namespace.useEffect(() => {
     if (isDeterminate) {
       const fraction = clampedValue / 100;
       let targetAmp = amplitude;
@@ -855,7 +855,7 @@ var WavyLinearTrack = React11__namespace.memo(function WavyLinearTrack2({
     }
   );
 });
-var LinearProgress = React11__namespace.forwardRef(
+var LinearProgress = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -896,10 +896,10 @@ var LinearProgress = React11__namespace.forwardRef(
     ]);
     const isDeterminate = value !== void 0;
     const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
-    const containerRef = React11__namespace.useRef(null);
+    const containerRef = React14__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
-    const [isRtl, setIsRtl] = React11__namespace.useState(false);
-    React11__namespace.useEffect(() => {
+    const [isRtl, setIsRtl] = React14__namespace.useState(false);
+    React14__namespace.useEffect(() => {
       if (containerRef.current) {
         const dir = getComputedStyle(containerRef.current).direction;
         setIsRtl(dir === "rtl");
@@ -907,16 +907,16 @@ var LinearProgress = React11__namespace.forwardRef(
     }, []);
     const isWavy = shape === "wavy";
     const resolvedTrackShape = trackShape != null ? trackShape : shape;
-    const effectiveAmplitude = React11__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
-    const svgHeight = React11__namespace.useMemo(
+    const effectiveAmplitude = React14__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
+    const svgHeight = React14__namespace.useMemo(
       () => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
       [isWavy, trackHeight, effectiveAmplitude]
     );
-    const shouldShowStop = React11__namespace.useMemo(
+    const shouldShowStop = React14__namespace.useMemo(
       () => isDeterminate && resolvedTrackShape === "flat" && (showStopIndicator === true || showStopIndicator === "auto" && isDeterminate),
       [isDeterminate, resolvedTrackShape, showStopIndicator]
     );
-    const stopSize = React11__namespace.useMemo(
+    const stopSize = React14__namespace.useMemo(
       () => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
       [trackHeight]
     );
@@ -989,14 +989,14 @@ var LinearProgress = React11__namespace.forwardRef(
   }
 );
 LinearProgress.displayName = "LinearProgress";
-var ProgressIndicator = React11__namespace.forwardRef((props, ref) => {
+var ProgressIndicator = React14__namespace.forwardRef((props, ref) => {
   if (props.variant === "circular") {
     return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
   }
   return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var RippleItem = React11__namespace.memo(function RippleItem2({
+var RippleItem = React14__namespace.memo(function RippleItem2({
   ripple,
   onDone
 }) {
@@ -1040,8 +1040,8 @@ function Ripple({
 }
 function useRippleState(options = {}) {
   const { disabled = false } = options;
-  const [ripples, setRipples] = React11__namespace.useState([]);
-  const onPointerDown = React11__namespace.useCallback(
+  const [ripples, setRipples] = React14__namespace.useState([]);
+  const onPointerDown = React14__namespace.useCallback(
     (e) => {
       if (disabled) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -1055,7 +1055,7 @@ function useRippleState(options = {}) {
     },
     [disabled]
   );
-  const removeRipple = React11__namespace.useCallback((id) => {
+  const removeRipple = React14__namespace.useCallback((id) => {
     setRipples((prev) => prev.filter((r) => r.id !== id));
   }, []);
   return { ripples, onPointerDown, removeRipple };
@@ -1231,6 +1231,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [
@@ -1282,7 +1311,7 @@ function AnimatedIconSlot({
     }
   );
 }
-var ButtonComponent = React11__namespace.forwardRef(
+var ButtonComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1344,9 +1373,9 @@ var ButtonComponent = React11__namespace.forwardRef(
       borderWidth: outlineWidth != null ? outlineWidth : colorStyle === "outlined" ? sizeTokens.outlineWidth : 0,
       borderStyle: colorStyle === "outlined" ? "solid" : void 0
     }, style);
-    const labelText = React11__namespace.useMemo(() => {
+    const labelText = React14__namespace.useMemo(() => {
       if (asChild) {
-        const child = React11__namespace.Children.only(children);
+        const child = React14__namespace.Children.only(children);
         return child.props.children;
       }
       return children;
@@ -1354,8 +1383,8 @@ var ButtonComponent = React11__namespace.forwardRef(
     const computedAriaLabel = ariaLabelProp || (typeof children === "string" ? children : void 0);
     const needsTouchTarget = size === "xs" || size === "sm";
     const motionRadius = react.useMotionValue(animateRadius);
-    const asChildRef = React11__namespace.useRef(null);
-    const mergedRef = React11__namespace.useCallback(
+    const asChildRef = React14__namespace.useRef(null);
+    const mergedRef = React14__namespace.useCallback(
       (node) => {
         asChildRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -1364,14 +1393,14 @@ var ButtonComponent = React11__namespace.forwardRef(
       },
       [ref]
     );
-    React11__namespace.useEffect(() => {
+    React14__namespace.useEffect(() => {
       if (!asChild) return;
       return motionRadius.on("change", (v) => {
         if (asChildRef.current)
           asChildRef.current.style.borderRadius = `${v}px`;
       });
     }, [motionRadius, asChild]);
-    React11__namespace.useEffect(() => {
+    React14__namespace.useEffect(() => {
       if (!asChild) return;
       const controls = springAnimate(motionRadius, animateRadius);
       return () => controls.stop();
@@ -1379,14 +1408,14 @@ var ButtonComponent = React11__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11__namespace.useCallback(
+    const handleClick = React14__namespace.useCallback(
       (e) => {
         if (loading) return e.preventDefault();
         onClick == null ? void 0 : onClick(e);
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11__namespace.useCallback(
+    const handleKeyDown = React14__namespace.useCallback(
       (e) => {
         if (loading) return;
         if (onClick && (e.key === "Enter" || e.key === " ")) {
@@ -1461,17 +1490,17 @@ var ButtonComponent = React11__namespace.forwardRef(
         }
       ) })
     ] });
-    const handleAsChildPointerDown = React11__namespace.useCallback(
+    const handleAsChildPointerDown = React14__namespace.useCallback(
       (e) => {
         springAnimate(motionRadius, pressedRadius);
         onPointerDown == null ? void 0 : onPointerDown(e);
       },
       [motionRadius, pressedRadius, onPointerDown]
     );
-    const handleAsChildPointerUp = React11__namespace.useCallback(() => {
+    const handleAsChildPointerUp = React14__namespace.useCallback(() => {
       springAnimate(motionRadius, animateRadius);
     }, [motionRadius, animateRadius]);
-    const handlePointerDown = React11__namespace.useCallback(
+    const handlePointerDown = React14__namespace.useCallback(
       (e) => {
         onPointerDown(e);
       },
@@ -1481,7 +1510,7 @@ var ButtonComponent = React11__namespace.forwardRef(
       const strippedProps = __spreadValues({}, restProps);
       for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
       const htmlProps = strippedProps;
-      const child = React11__namespace.Children.only(children);
+      const child = React14__namespace.Children.only(children);
       return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactSlot.Slot,
         __spreadProps(__spreadValues({
@@ -1498,7 +1527,7 @@ var ButtonComponent = React11__namespace.forwardRef(
           }),
           className: buttonClassName
         }, htmlProps), {
-          children: React11__namespace.cloneElement(child, { children: innerContent })
+          children: React14__namespace.cloneElement(child, { children: innerContent })
         })
       ) });
     }
@@ -1527,13 +1556,13 @@ var ButtonComponent = React11__namespace.forwardRef(
   }
 );
 ButtonComponent.displayName = "Button";
-var Button = React11__namespace.memo(ButtonComponent);
+var Button = React14__namespace.memo(ButtonComponent);
 var VARIANT_FONT = {
   outlined: "'Material Symbols Outlined'",
   rounded: "'Material Symbols Rounded'",
   sharp: "'Material Symbols Sharp'"
 };
-var IconComponent = React11__namespace.forwardRef(
+var IconComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1599,7 +1628,7 @@ var IconComponent = React11__namespace.forwardRef(
   }
 );
 IconComponent.displayName = "Icon";
-var Icon = React11__namespace.memo(IconComponent);
+var Icon = React14__namespace.memo(IconComponent);
 var BUTTON_GROUP_TOKENS = {
   standard: {
     betweenSpace: 12,
@@ -1687,7 +1716,7 @@ var PILL_BORDER_RADIUS = 9999;
 var MIN_FLEX_GROW = 0.01;
 var PADDING_EXPAND_MULTIPLIER = 4;
 var CHECK_ICON_SIZE = 24;
-var CHECK_ICON = /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", size: CHECK_ICON_SIZE, weight: 700 });
+var CHECK_ICON = /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", variant: "rounded", size: CHECK_ICON_SIZE, weight: 700 });
 var CHECK_ICON_GAP_MAP = {
   xs: 6,
   sm: 8,
@@ -1707,13 +1736,7 @@ var WIDTH_MORPH_SPRING = {
   damping: 38,
   mass: 0.85
 };
-var NAVBAR_EXPRESSIVE_SPRING = {
-  type: "spring",
-  stiffness: 430,
-  damping: 38,
-  mass: 0.8
-};
-var AnimatedCheckLabel = React11__namespace.memo(function AnimatedCheckLabel2({
+var AnimatedCheckLabel = React14__namespace.memo(function AnimatedCheckLabel2({
   selected,
   size,
   children
@@ -1750,23 +1773,6 @@ var AnimatedCheckLabel = React11__namespace.memo(function AnimatedCheckLabel2({
     }
   );
 });
-var AnimatedNavbarLabel = React11__namespace.memo(function AnimatedNavbarLabel2({
-  show,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "popLayout", children: show && /* @__PURE__ */ jsxRuntime.jsx(
-    react.m.span,
-    {
-      initial: { width: 0, opacity: 0, scale: 0.8 },
-      animate: { width: "auto", opacity: 1, scale: 1 },
-      exit: { width: 0, opacity: 0, scale: 0.8 },
-      transition: NAVBAR_EXPRESSIVE_SPRING,
-      className: "overflow-hidden whitespace-nowrap text-sm font-semibold tracking-[0.01em] ml-1.5",
-      children
-    },
-    "navbar-label"
-  ) });
-});
 function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize) {
   const defaults = ButtonGroupDefaults.connectedLeadingButtonShapes(itemSize);
   if (variant !== "connected") return defaults;
@@ -1787,7 +1793,7 @@ function resolveConnectedShapes(variant, orientation, isFirst, isLast, itemSize)
   }
   return defaults;
 }
-function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck, iconBehavior, labelBehavior) {
+function resolveIconAndLabel(element, isSelected, itemSize, showCheck, iconBehavior, labelBehavior) {
   let icon = element.props.icon;
   let label = element.props.children;
   const animateCheckInLabel = showCheck && iconBehavior !== "none" && iconBehavior !== "selected" && label !== void 0;
@@ -1803,9 +1809,6 @@ function resolveIconAndLabel(element, isSelected, itemSize, variant, showCheck,
   }
   if (animateCheckInLabel && label !== void 0) {
     label = /* @__PURE__ */ jsxRuntime.jsx(AnimatedCheckLabel, { selected: isSelected, size: itemSize, children: label });
-  } else if (variant === "navbar" && label !== void 0) {
-    const showLabel = !labelBehavior || labelBehavior === "all" || labelBehavior === "selected" && isSelected;
-    label = /* @__PURE__ */ jsxRuntime.jsx(AnimatedNavbarLabel, { show: showLabel, children: label });
   }
   return { icon, label };
 }
@@ -1840,13 +1843,11 @@ function resolveFlexTargets(variant, orientation, isSelected, isPressed, hasSele
 function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex, existingAnimate, existingWhileTap) {
   var _a, _b;
   const props = { animate: __spreadValues({}, existingAnimate) };
-  if (variant !== "navbar") {
-    if (flex.flexGrow !== void 0) {
-      props.animate.flexGrow = flex.flexGrow;
-    }
-    if (flex.paddingInline !== void 0) {
-      props.animate.paddingInline = flex.paddingInline;
-    }
+  if (flex.flexGrow !== void 0) {
+    props.animate.flexGrow = flex.flexGrow;
+  }
+  if (flex.paddingInline !== void 0) {
+    props.animate.paddingInline = flex.paddingInline;
   }
   if (variant === "standard") {
     const pressedRadius = (_a = PRESSED_RADIUS_MAP[itemSize]) != null ? _a : PRESSED_RADIUS_MAP.sm;
@@ -1897,16 +1898,9 @@ function buildMotionProps(variant, isSelected, isPressed, itemSize, shapes, flex
     });
     props.layout = true;
   }
-  if (variant === "navbar") {
-    props.layout = true;
-    props.transition = {
-      layout: WIDTH_MORPH_SPRING,
-      default: BUTTON_SHAPE_MORPH_SPRING
-    };
-  }
   return props;
 }
-var ButtonGroupComponent = React11__namespace.forwardRef(
+var ButtonGroupComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -1939,13 +1933,12 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
       "labelBehavior",
       "style"
     ]);
-    const [pressedIndex, setPressedIndex] = React11__namespace.useState(null);
-    const [lockedGroupSize, setLockedGroupSize] = React11__namespace.useState(
+    const [pressedIndex, setPressedIndex] = React14__namespace.useState(null);
+    const [lockedGroupSize, setLockedGroupSize] = React14__namespace.useState(
       null
     );
-    const layoutIdGroup = React11__namespace.useId();
-    const rootRef = React11__namespace.useRef(null);
-    const setRootRef = React11__namespace.useCallback(
+    const rootRef = React14__namespace.useRef(null);
+    const setRootRef = React14__namespace.useCallback(
       (node) => {
         rootRef.current = node;
         if (typeof ref === "function") {
@@ -1956,12 +1949,12 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
       },
       [ref]
     );
-    const childrenArray = React11__namespace.useMemo(
-      () => React11__namespace.Children.toArray(children).filter(React11__namespace.isValidElement),
+    const childrenArray = React14__namespace.useMemo(
+      () => React14__namespace.Children.toArray(children).filter(React14__namespace.isValidElement),
       [children]
     );
     const count = childrenArray.length;
-    const groupSizeSignature = React11__namespace.useMemo(
+    const groupSizeSignature = React14__namespace.useMemo(
       () => `${childrenArray.map((child, index) => {
         var _a2, _b2, _c, _d, _e;
         const element = child;
@@ -1976,8 +1969,8 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
       }).join("|")}|${variant}|${orientation}|${showCheck}`,
       [childrenArray, orientation, showCheck, size, variant]
     );
-    const groupSizeSignatureRef = React11__namespace.useRef(groupSizeSignature);
-    React11__namespace.useLayoutEffect(() => {
+    const groupSizeSignatureRef = React14__namespace.useRef(groupSizeSignature);
+    React14__namespace.useLayoutEffect(() => {
       if (groupSizeSignatureRef.current !== groupSizeSignature) {
         groupSizeSignatureRef.current = groupSizeSignature;
         setLockedGroupSize(null);
@@ -1985,7 +1978,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
     }, [groupSizeSignature]);
     const hasExplicitGroupSize = orientation === "horizontal" ? (style == null ? void 0 : style.width) !== void 0 || (style == null ? void 0 : style.inlineSize) !== void 0 : (style == null ? void 0 : style.height) !== void 0 || (style == null ? void 0 : style.blockSize) !== void 0;
     const shouldLockGroupSize = activeMorphing && !fullWidth && !hasExplicitGroupSize && count > 1;
-    React11__namespace.useLayoutEffect(() => {
+    React14__namespace.useLayoutEffect(() => {
       if (!shouldLockGroupSize) {
         if (lockedGroupSize !== null) setLockedGroupSize(null);
         return;
@@ -1999,7 +1992,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
         setLockedGroupSize(Math.ceil(nextSize * 100) / 100);
       }
     }, [lockedGroupSize, orientation, shouldLockGroupSize]);
-    const groupStyle = React11__namespace.useMemo(() => {
+    const groupStyle = React14__namespace.useMemo(() => {
       const nextStyle = __spreadValues({}, style);
       if (shouldLockGroupSize && lockedGroupSize !== null) {
         if (orientation === "horizontal") {
@@ -2010,13 +2003,13 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
       }
       return nextStyle;
     }, [lockedGroupSize, orientation, shouldLockGroupSize, style]);
-    const hasSelected = React11__namespace.useMemo(
+    const hasSelected = React14__namespace.useMemo(
       () => childrenArray.some(
         (child) => child.props.selected
       ),
       [childrenArray]
     );
-    const handlePointerLeaveAndUp = React11__namespace.useCallback(() => {
+    const handlePointerLeaveAndUp = React14__namespace.useCallback(() => {
       setPressedIndex(null);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2026,7 +2019,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
         className: cn(
           "inline-flex p-0 m-0 border-none max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
           orientation === "vertical" ? "flex-col items-stretch overflow-y-auto overflow-x-hidden" : "flex-row overflow-x-auto overflow-y-hidden",
-          variant === "standard" ? "gap-3" : variant === "navbar" ? "gap-1.5 h-full" : "gap-0.5",
+          variant === "standard" ? "gap-3" : "gap-0.5",
           fullWidth && "w-full",
           fullWidth && orientation === "vertical" && "h-full",
           className
@@ -2036,7 +2029,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
         onPointerUp: handlePointerLeaveAndUp
       }, props), {
         children: childrenArray.map((child, index) => {
-          var _a2, _b2, _c;
+          var _a2, _b2;
           const element = child;
           const isSelected = element.props.selected === true;
           const isFirst = index === 0;
@@ -2048,7 +2041,6 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
             element,
             isSelected,
             itemSize,
-            variant,
             showCheck,
             iconBehavior,
             labelBehavior
@@ -2074,7 +2066,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
             basePx
           );
           const dynamicStyle = __spreadValues({}, element.props.style);
-          if (variant !== "navbar" && flex.flexGrow !== void 0 && fullWidth) {
+          if (flex.flexGrow !== void 0 && fullWidth) {
             dynamicStyle.flexBasis = 0;
             dynamicStyle.flexShrink = 1;
             dynamicStyle.minWidth = 0;
@@ -2092,13 +2084,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
             existingWhileTap
           );
           const connectedClasses = variant === "connected" && isSelected ? "z-20" : "";
-          const navbarFlexStyle = flex.flexGrow !== void 0 ? {
-            flexBasis: fullWidth && labelBehavior !== "selected" ? 0 : "auto",
-            flexShrink: fullWidth ? 1 : 0,
-            flexGrow: flex.flexGrow,
-            minWidth: labelBehavior !== "selected" ? 0 : "fit-content"
-          } : {};
-          const clonedElement = React11__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
+          const clonedElement = React14__namespace.cloneElement(element, __spreadValues(__spreadProps(__spreadValues({
             key: (_b2 = element.key) != null ? _b2 : index,
             tabIndex: isFirst ? 0 : -1,
             size: size || element.props.size,
@@ -2107,71 +2093,20 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
           }, variant === "connected" && {
             colorStyle: element.props.colorStyle || "tonal",
             selectedColorStyle: element.props.selectedColorStyle || "filled"
-          }), variant === "navbar" && {
-            colorStyle: "text",
-            selectedColorStyle: "text",
-            className: cn(
-              element.props.className,
-              "w-full! h-full! px-3! min-w-0! relative z-20 flex items-center justify-center",
-              isSelected ? "text-m3-on-secondary-container! hover:bg-transparent! active:bg-transparent!" : "text-m3-on-surface-variant! hover:bg-transparent! active:bg-transparent!",
-              itemClassName
-            )
-          }), variant !== "navbar" && {
+          }), {
             className: cn(
               element.props.className,
               connectedClasses,
               "focus-visible:z-10 hover:z-10 relative min-w-0",
               orientation === "vertical" && "w-full",
               itemClassName
-            )
-          }), {
-            style: variant === "navbar" ? __spreadProps(__spreadValues({}, dynamicStyle), { minWidth: 0 }) : dynamicStyle,
+            ),
+            style: dynamicStyle,
             onPointerDown: (e) => {
               setPressedIndex(index);
               if (element.props.onPointerDown) element.props.onPointerDown(e);
             }
           }), motionProps));
-          if (variant === "navbar") {
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              react.m.div,
-              {
-                layout: true,
-                whileTap: { scale: 0.96 },
-                transition: NAVBAR_EXPRESSIVE_SPRING,
-                className: "group relative h-full flex items-center justify-center min-w-0",
-                style: navbarFlexStyle,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "absolute inset-x-1 inset-y-0 m-auto flex items-center justify-center pointer-events-none",
-                      style: { zIndex: 1 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            className: "w-full h-[40px] bg-m3-on-surface-variant/8 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
-                            style: { borderRadius: PILL_BORDER_RADIUS }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                          react.m.div,
-                          {
-                            layoutId: `navbar-active-indicator-${layoutIdGroup}`,
-                            className: "absolute inset-0 m-auto w-full h-[40px] bg-m3-secondary-container",
-                            style: { borderRadius: PILL_BORDER_RADIUS },
-                            transition: NAVBAR_EXPRESSIVE_SPRING
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  clonedElement
-                ]
-              },
-              (_c = element.key) != null ? _c : index
-            );
-          }
           return clonedElement;
         })
       })
@@ -2179,7 +2114,7 @@ var ButtonGroupComponent = React11__namespace.forwardRef(
   }
 );
 ButtonGroupComponent.displayName = "ButtonGroup";
-var ButtonGroup = React11__namespace.memo(ButtonGroupComponent);
+var ButtonGroup = React14__namespace.memo(ButtonGroupComponent);
 var SIZE_HEIGHT = {
   sm: "h-14",
   md: "h-20",
@@ -2234,9 +2169,9 @@ var COLOR_CLASSES = {
   }
 };
 function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
-  const [collapsed, setCollapsed] = React11__namespace.useState(false);
-  const lastScrollY = React11__namespace.useRef(0);
-  React11__namespace.useEffect(() => {
+  const [collapsed, setCollapsed] = React14__namespace.useState(false);
+  const lastScrollY = React14__namespace.useRef(0);
+  React14__namespace.useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
     lastScrollY.current = window.scrollY;
     const handleScroll = () => {
@@ -2259,7 +2194,7 @@ function useScrollCollapse(enabled, scrollThreshold, onCollapsedChange) {
   }, [enabled, scrollThreshold, collapsed, onCollapsedChange]);
   return collapsed;
 }
-var ExtendedFABComponent = React11__namespace.forwardRef(
+var ExtendedFABComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2276,6 +2211,8 @@ var ExtendedFABComponent = React11__namespace.forwardRef(
       scrollThreshold = 50,
       collapsed,
       onCollapsedChange,
+      asChild = false,
+      children,
       onClick,
       onKeyDown,
       layoutId,
@@ -2295,16 +2232,18 @@ var ExtendedFABComponent = React11__namespace.forwardRef(
       "scrollThreshold",
       "collapsed",
       "onCollapsedChange",
+      "asChild",
+      "children",
       "onClick",
       "onKeyDown",
       "layoutId",
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
-    const localRef = React11__namespace.useRef(null);
-    React11__namespace.useImperativeHandle(ref, () => localRef.current);
-    const [dir, setDir] = React11__namespace.useState("ltr");
-    React11__namespace.useEffect(() => {
+    const localRef = React14__namespace.useRef(null);
+    React14__namespace.useImperativeHandle(ref, () => localRef.current);
+    const [dir, setDir] = React14__namespace.useState("ltr");
+    React14__namespace.useEffect(() => {
       var _a3;
       if (!localRef.current) return;
       const closestDir = (_a3 = localRef.current.closest("[dir]")) == null ? void 0 : _a3.getAttribute("dir");
@@ -2325,7 +2264,7 @@ var ExtendedFABComponent = React11__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11__namespace.useCallback(
+    const handleClick = React14__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2335,7 +2274,7 @@ var ExtendedFABComponent = React11__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11__namespace.useCallback(
+    const handleKeyDown = React14__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2346,7 +2285,109 @@ var ExtendedFABComponent = React11__namespace.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && /* @__PURE__ */ jsxRuntime.jsxs(
+    const containerClassName = cn(
+      "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
+      "transition-[box-shadow,filter] duration-200",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+      colors.bg,
+      colors.text,
+      lowered ? "shadow-sm" : "shadow-md",
+      (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
+      SIZE_TEXT[size],
+      isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
+        hasIcon ? "justify-start" : "justify-center",
+        SIZE_PADDING[size],
+        hasIcon && SIZE_GAP[size]
+      ),
+      dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        {
+          layout: "position",
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            sizeIcon.cls
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+            react.m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              className: "flex items-center justify-center shrink-0 w-full h-full",
+              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
+                LoadingIndicator,
+                {
+                  size: sizeIcon.px,
+                  color: "currentColor",
+                  "aria-label": "Loading"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ProgressIndicator,
+                {
+                  variant: "circular",
+                  size: sizeIcon.px,
+                  color: "currentColor",
+                  trackColor: "transparent",
+                  "aria-label": "Loading"
+                }
+              )
+            }),
+            "loading"
+          ) : icon && /* @__PURE__ */ jsxRuntime.jsx(
+            react.m.span,
+            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+              transition: SPRING_TRANSITION,
+              "aria-hidden": "true",
+              className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              children: icon
+            }),
+            "icon"
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        {
+          layout: "position",
+          initial: { opacity: 0, width: 0 },
+          animate: { opacity: 1, width: "auto" },
+          exit: { opacity: 0, width: 0 },
+          transition: {
+            opacity: { duration: 0.15, ease: "linear" },
+            width: SPRING_TRANSITION
+          },
+          className: "overflow-hidden whitespace-nowrap",
+          children: label
+        },
+        "label"
+      ) })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && !(isCollapsed && !hasIcon) && (asChild ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      __spreadProps(__spreadValues({
+        ref: localRef,
+        "aria-label": ariaLabel || label,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: `${radiusConfig.default}px`
+        }),
+        className: containerClassName
+      }, restProps), {
+        children: React14__namespace.cloneElement(
+          React14__namespace.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref: localRef,
@@ -2378,95 +2419,15 @@ var ExtendedFABComponent = React11__namespace.forwardRef(
           opacity: { duration: 0.2, ease: "linear" },
           layout: SPRING_TRANSITION
         },
-        className: cn(
-          "relative shrink-0 inline-flex items-center select-none cursor-pointer overflow-hidden",
-          "transition-[box-shadow,filter] duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
-          colors.bg,
-          colors.text,
-          lowered ? "shadow-sm" : "shadow-md",
-          (_d = SIZE_HEIGHT[size]) != null ? _d : "h-14",
-          SIZE_TEXT[size],
-          isCollapsed ? cn("px-0 justify-center", SIZE_WIDTH_COLLAPSED[size]) : cn(
-            hasIcon ? "justify-start" : "justify-center",
-            SIZE_PADDING[size],
-            hasIcon && SIZE_GAP[size]
-          ),
-          dir === "rtl" || restProps.dir === "rtl" ? "flex-row-reverse" : "flex-row",
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          hasIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            {
-              layout: "position",
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                sizeIcon.cls
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-                react.m.span,
-                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-                  transition: SPRING_TRANSITION,
-                  className: "flex items-center justify-center shrink-0 w-full h-full",
-                  children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    LoadingIndicator,
-                    {
-                      size: sizeIcon.px,
-                      color: "currentColor",
-                      "aria-label": "Loading"
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
-                    ProgressIndicator,
-                    {
-                      variant: "circular",
-                      size: sizeIcon.px,
-                      color: "currentColor",
-                      trackColor: "transparent",
-                      "aria-label": "Loading"
-                    }
-                  )
-                }),
-                "loading"
-              ) : icon && /* @__PURE__ */ jsxRuntime.jsx(
-                react.m.span,
-                __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-                  transition: SPRING_TRANSITION,
-                  "aria-hidden": "true",
-                  className: "flex items-center justify-center shrink-0 w-full h-full [&>svg]:w-full [&>svg]:h-full",
-                  children: icon
-                }),
-                "icon"
-              ) })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            {
-              layout: "position",
-              initial: { opacity: 0, width: 0 },
-              animate: { opacity: 1, width: "auto" },
-              exit: { opacity: 0, width: 0 },
-              transition: {
-                opacity: { duration: 0.15, ease: "linear" },
-                width: SPRING_TRANSITION
-              },
-              className: "overflow-hidden whitespace-nowrap",
-              children: label
-            },
-            "label"
-          ) })
-        ]
+        children: innerContent
       })
-    ) }) });
+    )) }) });
   }
 );
 ExtendedFABComponent.displayName = "ExtendedFAB";
-var ExtendedFAB = React11__namespace.memo(ExtendedFABComponent);
+var ExtendedFAB = React14__namespace.memo(ExtendedFABComponent);
 var SIZE_STYLES = {
   sm: "h-10 w-10",
   md: "h-14 w-14",
@@ -2537,7 +2498,7 @@ function FABPosition({
     }
   );
 }
-var FABComponent = React11__namespace.forwardRef(
+var FABComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -2551,6 +2512,7 @@ var FABComponent = React11__namespace.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       visible = true,
+      asChild = false,
       onClick,
       onKeyDown,
       "aria-label": ariaLabel
@@ -2566,6 +2528,7 @@ var FABComponent = React11__namespace.forwardRef(
       "loading",
       "loadingVariant",
       "visible",
+      "asChild",
       "onClick",
       "onKeyDown",
       "aria-label"
@@ -2582,7 +2545,7 @@ var FABComponent = React11__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11__namespace.useCallback(
+    const handleClick = React14__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -2592,7 +2555,7 @@ var FABComponent = React11__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11__namespace.useCallback(
+    const handleKeyDown = React14__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -2603,19 +2566,116 @@ var FABComponent = React11__namespace.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && /* @__PURE__ */ jsxRuntime.jsxs(
+    const labelContent = asChild ? React14__namespace.Children.only(children).props.children : children;
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconClass
+          ),
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
+            LoadingIndicator,
+            {
+              size: iconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: iconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
+            iconClass
+          ),
+          children: icon
+        }),
+        "icon"
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: extended && labelContent && /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        {
+          initial: { width: 0, opacity: 0 },
+          animate: { width: "auto", opacity: 1 },
+          exit: { width: 0, opacity: 0 },
+          transition: SPRING_TRANSITION,
+          className: "overflow-hidden whitespace-nowrap ml-3",
+          children: labelContent
+        },
+        "label"
+      ) })
+    ] });
+    const containerClassName = cn(
+      "relative shrink-0 inline-flex items-center justify-center",
+      "select-none cursor-pointer overflow-hidden",
+      "transition-[box-shadow,opacity,filter] duration-200",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
+      colors.bg,
+      colors.text,
+      lowered ? "shadow-sm" : colors.shadow,
+      (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
+      extended && "w-auto px-6",
+      SIZE_TEXT_CLASS[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": computedAriaLabel,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || restProps.disabled,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: `${animateRadius}px`
+        }),
+        className: containerClassName
+      }, restProps), {
+        children: React14__namespace.cloneElement(
+          React14__namespace.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-label": ariaLabel || (typeof children === "string" ? children : void 0),
+        "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
         style,
-        initial: { scale: 0.5, opacity: 0, borderRadius: animateRadius },
+        initial: {
+          scale: 0.5,
+          opacity: 0,
+          borderRadius: animateRadius
+        },
         animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
         exit: { scale: 0.5, opacity: 0 },
         whileTap: { borderRadius: pressedRadius },
@@ -2624,84 +2684,15 @@ var FABComponent = React11__namespace.forwardRef(
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.25, ease: "easeOut" }
         },
-        className: cn(
-          "relative shrink-0 inline-flex items-center justify-center",
-          "select-none cursor-pointer overflow-hidden",
-          "transition-[box-shadow,opacity,filter] duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
-          "disabled:pointer-events-none disabled:opacity-[0.38] disabled:shadow-none",
-          colors.bg,
-          colors.text,
-          lowered ? "shadow-sm" : colors.shadow,
-          (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-          extended && "w-auto px-6",
-          SIZE_TEXT_CLASS[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconClass
-              ),
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
-                LoadingIndicator,
-                {
-                  size: iconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: iconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full",
-                iconClass
-              ),
-              children: icon
-            }),
-            "icon"
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: extended && children && /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            {
-              initial: { width: 0, opacity: 0 },
-              animate: { width: "auto", opacity: 1 },
-              exit: { width: 0, opacity: 0 },
-              transition: SPRING_TRANSITION,
-              className: "overflow-hidden whitespace-nowrap ml-3",
-              children
-            },
-            "label"
-          ) })
-        ]
+        children: innerContent
       })
-    ) }) });
+    )) }) });
   }
 );
 FABComponent.displayName = "FAB";
-var FAB = React11__namespace.memo(FABComponent);
+var FAB = React14__namespace.memo(FABComponent);
 var SPRING_NORMAL = { stiffness: 700, damping: 40 };
 var SPRING_REDUCED = { stiffness: 1e4, damping: 100 };
 var FOCUS_DELAY_MS = 50;
@@ -2809,7 +2800,7 @@ function CloseIcon() {
 function defaultFabIcon(progress) {
   return progress > 0.5 ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {});
 }
-var ToggleFABComponent = React11__namespace.forwardRef(
+var ToggleFABComponent = React14__namespace.forwardRef(
   ({
     expanded,
     onToggle,
@@ -2827,7 +2818,7 @@ var ToggleFABComponent = React11__namespace.forwardRef(
     const sizeTokens = (_b = TOGGLE_FAB_SIZES[fabSize]) != null ? _b : TOGGLE_FAB_SIZES.baseline;
     const springConfig = prefersReduced ? SPRING_REDUCED : SPRING_NORMAL;
     const checkedProgress = react.useSpring(expanded ? 1 : 0, springConfig);
-    React11__namespace.useEffect(() => {
+    React14__namespace.useEffect(() => {
       checkedProgress.set(expanded ? 1 : 0);
     }, [expanded, checkedProgress]);
     const borderRadius = react.useTransform(
@@ -2835,12 +2826,12 @@ var ToggleFABComponent = React11__namespace.forwardRef(
       [0, 1],
       [`${sizeTokens.initialRadius}px`, `${sizeTokens.finalRadius}px`]
     );
-    const [iconProgress, setIconProgress] = React11__namespace.useState(expanded ? 1 : 0);
-    React11__namespace.useEffect(() => {
+    const [iconProgress, setIconProgress] = React14__namespace.useState(expanded ? 1 : 0);
+    React14__namespace.useEffect(() => {
       return checkedProgress.on("change", setIconProgress);
     }, [checkedProgress]);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
-    const handleClick = React11__namespace.useCallback(() => {
+    const handleClick = React14__namespace.useCallback(() => {
       onToggle(!expanded);
     }, [expanded, onToggle]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2889,7 +2880,7 @@ var ToggleFABComponent = React11__namespace.forwardRef(
   }
 );
 ToggleFABComponent.displayName = "ToggleFAB";
-var ToggleFAB = React11__namespace.memo(ToggleFABComponent);
+var ToggleFAB = React14__namespace.memo(ToggleFABComponent);
 function FABMenuItem({
   icon,
   label,
@@ -2897,12 +2888,14 @@ function FABMenuItem({
   disabled = false,
   colorVariant = "primary",
   className,
-  tabIndex = 0
+  tabIndex = 0,
+  asChild = false,
+  children
 }) {
   var _a;
   const colors = (_a = MENU_ITEM_COLORS[colorVariant]) != null ? _a : MENU_ITEM_COLORS.primary;
   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
-  const handleClick = React11__namespace.useCallback(
+  const handleClick = React14__namespace.useCallback(
     (e) => {
       if (disabled) {
         e.preventDefault();
@@ -2912,7 +2905,7 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  const handleKeyDown = React11__namespace.useCallback(
+  const handleKeyDown = React14__namespace.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -2922,7 +2915,55 @@ function FABMenuItem({
     },
     [disabled, onClick]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
+        children: icon
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
+  ] });
+  const containerClassName = cn(
+    "relative inline-flex flex-row items-center",
+    "select-none cursor-pointer overflow-hidden",
+    "whitespace-nowrap",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
+    MENU_ITEM_STYLES.size,
+    MENU_ITEM_STYLES.gap,
+    label ? MENU_ITEM_STYLES.padding : "px-4",
+    !label && "justify-center",
+    colors.bg,
+    colors.text,
+    disabled && "opacity-[0.38] pointer-events-none",
+    className
+  );
+  const containerStyle = {
+    transformOrigin: "right",
+    borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
+  };
+  if (asChild) {
+    const child = React14__namespace.Children.only(children);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.m.div, { variants: MENU_ITEM_VARIANTS, style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      {
+        role: "menuitem",
+        tabIndex,
+        "aria-disabled": disabled ? "true" : void 0,
+        "data-disabled": disabled ? "true" : void 0,
+        onClick: handleClick,
+        onPointerDown,
+        onKeyDown: handleKeyDown,
+        className: containerClassName,
+        children: React14__namespace.cloneElement(child, { children: innerContent })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
     react.m.div,
     {
       role: "menuitem",
@@ -2933,37 +2974,9 @@ function FABMenuItem({
       onPointerDown,
       onKeyDown: handleKeyDown,
       variants: MENU_ITEM_VARIANTS,
-      style: {
-        transformOrigin: "right",
-        borderRadius: `${MENU_ITEM_STYLES.cornerRadius}px`
-      },
-      className: cn(
-        "relative inline-flex flex-row items-center",
-        "select-none cursor-pointer overflow-hidden",
-        "whitespace-nowrap",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-1",
-        MENU_ITEM_STYLES.size,
-        MENU_ITEM_STYLES.gap,
-        label ? MENU_ITEM_STYLES.padding : "px-4",
-        !label && "justify-center",
-        colors.bg,
-        colors.text,
-        disabled && "opacity-[0.38] pointer-events-none",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "relative z-10 flex items-center justify-center size-6 shrink-0 [&>svg]:w-full [&>svg]:h-full pointer-events-none",
-            children: icon
-          }
-        ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 text-base font-medium leading-none pointer-events-none", children: label })
-      ]
+      style: containerStyle,
+      className: containerClassName,
+      children: innerContent
     }
   );
 }
@@ -2979,13 +2992,13 @@ function FABMenu({
   focusLast = true,
   "aria-label": ariaLabel
 }) {
-  const fabId = React11__namespace.useId();
-  const menuId = React11__namespace.useId();
-  const toggleRef = React11__namespace.useRef(null);
-  const itemRefs = React11__namespace.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React11__namespace.useState(-1);
-  const reversedItems = React11__namespace.useMemo(() => [...items].reverse(), [items]);
-  const focusItem = React11__namespace.useCallback((index) => {
+  const fabId = React14__namespace.useId();
+  const menuId = React14__namespace.useId();
+  const toggleRef = React14__namespace.useRef(null);
+  const itemRefs = React14__namespace.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React14__namespace.useState(-1);
+  const reversedItems = React14__namespace.useMemo(() => [...items].reverse(), [items]);
+  const focusItem = React14__namespace.useCallback((index) => {
     var _a;
     const clampedIndex = Math.max(
       0,
@@ -2994,8 +3007,8 @@ function FABMenu({
     setFocusedIndex(clampedIndex);
     (_a = itemRefs.current[clampedIndex]) == null ? void 0 : _a.focus();
   }, []);
-  const wasExpandedRef = React11__namespace.useRef(false);
-  React11__namespace.useEffect(() => {
+  const wasExpandedRef = React14__namespace.useRef(false);
+  React14__namespace.useEffect(() => {
     var _a;
     if (expanded) {
       wasExpandedRef.current = true;
@@ -3010,7 +3023,7 @@ function FABMenu({
     wasExpandedRef.current = false;
     setFocusedIndex(-1);
   }, [expanded, focusLast, items.length, focusItem]);
-  const handleMenuKeyDown = React11__namespace.useCallback(
+  const handleMenuKeyDown = React14__namespace.useCallback(
     (e) => {
       if (!expanded) return;
       const lastIndex = items.length - 1;
@@ -3232,7 +3245,7 @@ function resolveDisabledBgClass(colorStyle) {
   }
   return "disabled:text-m3-on-surface/[0.38]";
 }
-var IconButtonComponent = React11__namespace.forwardRef(
+var IconButtonComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3245,6 +3258,7 @@ var IconButtonComponent = React11__namespace.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -3260,6 +3274,7 @@ var IconButtonComponent = React11__namespace.forwardRef(
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
@@ -3268,18 +3283,18 @@ var IconButtonComponent = React11__namespace.forwardRef(
     var _a2, _b2;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
-    const resolvedColorClass = React11__namespace.useMemo(
+    const resolvedColorClass = React14__namespace.useMemo(
       () => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
       [isSelected, colorStyle]
     );
-    const outlineWidthClass = React11__namespace.useMemo(
+    const outlineWidthClass = React14__namespace.useMemo(
       () => {
         var _a3;
         return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
       },
       [colorStyle, isSelected, size]
     );
-    const disabledBgClass = React11__namespace.useMemo(
+    const disabledBgClass = React14__namespace.useMemo(
       () => resolveDisabledBgClass(colorStyle),
       [colorStyle]
     );
@@ -3300,7 +3315,7 @@ var IconButtonComponent = React11__namespace.forwardRef(
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
-    const handleClick = React11__namespace.useCallback(
+    const handleClick = React14__namespace.useCallback(
       (e) => {
         if (loading) {
           e.preventDefault();
@@ -3310,7 +3325,7 @@ var IconButtonComponent = React11__namespace.forwardRef(
       },
       [loading, onClick]
     );
-    const handleKeyDown = React11__namespace.useCallback(
+    const handleKeyDown = React14__namespace.useCallback(
       (e) => {
         if (loading) return;
         if ((e.key === "Enter" || e.key === " ") && onClick) {
@@ -3321,7 +3336,87 @@ var IconButtonComponent = React11__namespace.forwardRef(
       },
       [loading, onClick, onKeyDown]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          className: cn(
+            "flex items-center justify-center shrink-0",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
+          children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
+            LoadingIndicator,
+            {
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              "aria-label": "Loading"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressIndicator,
+            {
+              variant: "circular",
+              size: typeof iconPx === "number" ? iconPx : defaultIconPx,
+              color: "currentColor",
+              trackColor: "transparent",
+              "aria-label": "Loading"
+            }
+          )
+        }),
+        "loading"
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.span,
+        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+          transition: SPRING_TRANSITION,
+          "aria-hidden": "true",
+          className: cn(
+            "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
+            iconSize != null ? void 0 : iconClass
+          ),
+          style: {
+            fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
+            width: isCustomSize ? `${iconSize}px` : void 0,
+            height: isCustomSize ? `${iconSize}px` : void 0
+          },
+          children: asChild ? React14__namespace.Children.only(children).props.children : children
+        }),
+        "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      SIZE_STYLES2[size],
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React14__namespace.Children.only(children);
+      return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": isToggle ? isSelected : void 0,
+          "aria-label": ariaLabel,
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || restProps.disabled,
+          onClick: handleClick,
+          onPointerDown,
+          onKeyDown: handleKeyDown,
+          style: __spreadProps(__spreadValues({}, style), { borderRadius: `${animateRadius}px` }),
+          className: containerClassName
+        }, restProps), {
+          children: React14__namespace.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref,
@@ -3337,78 +3432,20 @@ var IconButtonComponent = React11__namespace.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES2[size],
-          loading && "pointer-events-none opacity-75 cursor-not-allowed",
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              className: cn(
-                "flex items-center justify-center shrink-0",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: isCustomSize ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0,
-              children: loadingVariant === "loading-indicator" ? /* @__PURE__ */ jsxRuntime.jsx(
-                LoadingIndicator,
-                {
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  "aria-label": "Loading"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ProgressIndicator,
-                {
-                  variant: "circular",
-                  size: typeof iconPx === "number" ? iconPx : defaultIconPx,
-                  color: "currentColor",
-                  trackColor: "transparent",
-                  "aria-label": "Loading"
-                }
-              )
-            }),
-            "loading"
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.span,
-            __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
-              transition: SPRING_TRANSITION,
-              "aria-hidden": "true",
-              className: cn(
-                "flex items-center justify-center shrink-0 [&_svg]:w-full [&_svg]:h-full [&_.md-icon]:text-[length:inherit]!",
-                iconSize != null ? void 0 : iconClass
-              ),
-              style: {
-                fontSize: typeof iconPx === "number" ? `${iconPx}px` : iconPx,
-                width: isCustomSize ? `${iconSize}px` : void 0,
-                height: isCustomSize ? `${iconSize}px` : void 0
-              },
-              children
-            }),
-            "content"
-          ) })
-        ]
+        children: innerContent
       })
     ) });
   }
 );
 IconButtonComponent.displayName = "IconButton";
-var IconButton = React11__namespace.memo(IconButtonComponent);
-var SplitButtonContext = React11__namespace.createContext(null);
+var IconButton = React14__namespace.memo(IconButtonComponent);
+var SplitButtonContext = React14__namespace.createContext(null);
 function useSplitButtonContext() {
-  return React11__namespace.useContext(SplitButtonContext);
+  return React14__namespace.useContext(SplitButtonContext);
 }
-var SplitButtonLayoutComponent = React11__namespace.forwardRef(
+var SplitButtonLayoutComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       leadingButton,
@@ -3425,10 +3462,10 @@ var SplitButtonLayoutComponent = React11__namespace.forwardRef(
       "variant",
       "size"
     ]);
-    const leadingProps = React11__namespace.isValidElement(leadingButton) ? leadingButton.props : {};
+    const leadingProps = React14__namespace.isValidElement(leadingButton) ? leadingButton.props : {};
     const size = layoutSize || leadingProps.size;
     const variant = layoutVariant || leadingProps.variant;
-    const contextValue = React11__namespace.useMemo(
+    const contextValue = React14__namespace.useMemo(
       () => ({
         size,
         variant
@@ -3454,8 +3491,8 @@ var SplitButtonLayoutComponent = React11__namespace.forwardRef(
   }
 );
 SplitButtonLayoutComponent.displayName = "SplitButtonLayout";
-var SplitButtonLayout = React11__namespace.memo(SplitButtonLayoutComponent);
-var StateLayer = React11__namespace.forwardRef(
+var SplitButtonLayout = React14__namespace.memo(SplitButtonLayoutComponent);
+var StateLayer = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, hovered, focused, pressed } = _b, props = __objRest(_b, ["className", "hovered", "focused", "pressed"]);
     let opacity = 0;
@@ -3707,7 +3744,7 @@ var splitButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SplitButtonLeadingComponent = React11__namespace.forwardRef(
+var SplitButtonLeadingComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3717,6 +3754,7 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
       icon,
       children,
       disabled,
+      asChild = false,
       onClick,
       onPointerDown,
       onPointerUp,
@@ -3732,6 +3770,7 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
       "icon",
       "children",
       "disabled",
+      "asChild",
       "onClick",
       "onPointerDown",
       "onPointerUp",
@@ -3744,9 +3783,9 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
     const context = useSplitButtonContext();
     const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
     const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
-    const [isHovered, setIsHovered] = React11__namespace.useState(false);
-    const [isFocused, setIsFocused] = React11__namespace.useState(false);
-    const [isPressed, setIsPressed] = React11__namespace.useState(false);
+    const [isHovered, setIsHovered] = React14__namespace.useState(false);
+    const [isFocused, setIsFocused] = React14__namespace.useState(false);
+    const [isPressed, setIsPressed] = React14__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const typographyClass = (_c = BUTTON_TYPOGRAPHY_TOKENS[actualSize]) != null ? _c : BUTTON_TYPOGRAPHY_TOKENS.sm;
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -3758,7 +3797,7 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
     const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
     const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
     const borderRadius = `${outerRadius}px ${innerCornerRadius}px ${innerCornerRadius}px ${outerRadius}px`;
-    const handleClick = React11__namespace.useCallback(
+    const handleClick = React14__namespace.useCallback(
       (e) => {
         if (disabled) {
           e.preventDefault();
@@ -3768,7 +3807,7 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
       },
       [disabled, onClick]
     );
-    const handlePointerDown = React11__namespace.useCallback(
+    const handlePointerDown = React14__namespace.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3776,19 +3815,19 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11__namespace.useCallback(
+    const handlePointerUp = React14__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11__namespace.useCallback(() => {
+    const handlePointerEnter = React14__namespace.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11__namespace.useCallback(
+    const handlePointerLeave = React14__namespace.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3796,21 +3835,21 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11__namespace.useCallback(
+    const handlePointerCancel = React14__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11__namespace.useCallback(
+    const handleFocus = React14__namespace.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11__namespace.useCallback(
+    const handleBlur = React14__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -3818,12 +3857,73 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
       [onBlur]
     );
     const leadingIconSize = LEADING_ICON_SIZE_FOR_SIZE[actualSize];
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    const labelContent = asChild ? React14__namespace.Children.only(children).props.children : children;
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StateLayer,
+        {
+          hovered: isHovered,
+          focused: isFocused,
+          pressed: isPressed
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      icon && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
+          style: {
+            fontSize: leadingIconSize,
+            width: leadingIconSize,
+            height: leadingIconSize
+          },
+          children: icon
+        }
+      ),
+      labelContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children: labelContent })
+    ] });
+    const containerClassName = cn(
+      splitButtonVariants({
+        variant: actualVariant,
+        size: actualSize,
+        disabled
+      }),
+      typographyClass,
+      className
+    );
+    const mergedStyle = __spreadValues({
+      paddingInlineStart: tokens.leadingPadding.start,
+      paddingInlineEnd: tokens.leadingPadding.end,
+      gap: "8px",
+      borderRadius
+    }, style);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: asChild ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-disabled": disabled || void 0,
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: mergedStyle,
+        className: containerClassName
+      }, restProps), {
+        children: React14__namespace.cloneElement(
+          React14__namespace.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-disabled": disabled,
         disabled,
         onClick: handleClick,
         onPointerDown: handlePointerDown,
@@ -3840,56 +3940,24 @@ var SplitButtonLeadingComponent = React11__namespace.forwardRef(
           paddingInlineEnd: tokens.leadingPadding.end,
           gap: "8px"
         }, style),
-        className: cn(
-          splitButtonVariants({
-            variant: actualVariant,
-            size: actualSize,
-            disabled
-          }),
-          typographyClass,
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StateLayer,
-            {
-              hovered: isHovered,
-              focused: isFocused,
-              pressed: isPressed
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          icon && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full overflow-hidden [&_.md-icon]:text-[length:inherit]!",
-              style: {
-                fontSize: leadingIconSize,
-                width: leadingIconSize,
-                height: leadingIconSize
-              },
-              children: icon
-            }
-          ),
-          children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center h-full gap-[inherit]", children })
-        ]
+        children: innerContent
       })
     ) });
   }
 );
 SplitButtonLeadingComponent.displayName = "SplitButtonLeading";
-var SplitButtonLeading = React11__namespace.memo(SplitButtonLeadingComponent);
-var FilledSplitButtonLeading = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonLeading = React14__namespace.memo(SplitButtonLeadingComponent);
+var FilledSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonLeading.displayName = "FilledSplitButtonLeading";
-var TonalSplitButtonLeading = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonLeading.displayName = "TonalSplitButtonLeading";
-var ElevatedSplitButtonLeading = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonLeading.displayName = "ElevatedSplitButtonLeading";
-var OutlinedSplitButtonLeading = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonLeading = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonLeading, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonLeading.displayName = "OutlinedSplitButtonLeading";
-var SplitButtonTrailingComponent = React11__namespace.forwardRef(
+var SplitButtonTrailingComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3906,6 +3974,8 @@ var SplitButtonTrailingComponent = React11__namespace.forwardRef(
       onPointerCancel,
       onFocus,
       onBlur,
+      asChild = false,
+      children,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -3922,15 +3992,17 @@ var SplitButtonTrailingComponent = React11__namespace.forwardRef(
       "onPointerCancel",
       "onFocus",
       "onBlur",
+      "asChild",
+      "children",
       "aria-label"
     ]);
     var _a2, _b2;
     const context = useSplitButtonContext();
     const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
     const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
-    const [isHovered, setIsHovered] = React11__namespace.useState(false);
-    const [isFocused, setIsFocused] = React11__namespace.useState(false);
-    const [isPressed, setIsPressed] = React11__namespace.useState(false);
+    const [isHovered, setIsHovered] = React14__namespace.useState(false);
+    const [isFocused, setIsFocused] = React14__namespace.useState(false);
+    const [isPressed, setIsPressed] = React14__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const prefersReducedMotion = react.useReducedMotion();
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
@@ -3942,12 +4014,12 @@ var SplitButtonTrailingComponent = React11__namespace.forwardRef(
     const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
     const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
     const borderRadius = checked ? `${outerRadius}px ${outerRadius}px ${outerRadius}px ${outerRadius}px` : `${innerCornerRadius}px ${outerRadius}px ${outerRadius}px ${innerCornerRadius}px`;
-    const handleToggle = React11__namespace.useCallback(() => {
+    const handleToggle = React14__namespace.useCallback(() => {
       if (!disabled) {
         onCheckedChange(!checked);
       }
     }, [disabled, checked, onCheckedChange]);
-    const handlePointerDown = React11__namespace.useCallback(
+    const handlePointerDown = React14__namespace.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -3955,19 +4027,19 @@ var SplitButtonTrailingComponent = React11__namespace.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11__namespace.useCallback(
+    const handlePointerUp = React14__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11__namespace.useCallback(() => {
+    const handlePointerEnter = React14__namespace.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11__namespace.useCallback(
+    const handlePointerLeave = React14__namespace.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -3975,35 +4047,102 @@ var SplitButtonTrailingComponent = React11__namespace.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11__namespace.useCallback(
+    const handlePointerCancel = React14__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11__namespace.useCallback(
+    const handleFocus = React14__namespace.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11__namespace.useCallback(
+    const handleBlur = React14__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
       },
       [onBlur]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StateLayer,
+        {
+          hovered: isHovered,
+          focused: isFocused,
+          pressed: isPressed
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.div,
+        {
+          animate: {
+            rotate: checked ? 180 : 0,
+            x: checked ? 0 : tokens.opticalCenterOffset
+          },
+          transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
+          className: "flex items-center justify-center shrink-0",
+          children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(
+            Icon,
+            {
+              name: "arrow_drop_down",
+              size: tokens.trailingIconSize,
+              opticalSize: 24
+            }
+          )
+        }
+      )
+    ] });
+    const containerClassName = cn(
+      splitButtonVariants({
+        variant: actualVariant,
+        size: actualSize,
+        disabled
+      }),
+      className
+    );
+    const mergedStyle = __spreadValues({
+      paddingInlineStart: tokens.trailingPadding.start,
+      paddingInlineEnd: tokens.trailingPadding.end,
+      borderRadius
+    }, style);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: asChild ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      __spreadProps(__spreadValues({
+        ref,
+        "aria-label": ariaLabel,
+        "aria-expanded": checked,
+        "aria-disabled": disabled,
+        onClick: handleToggle,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: mergedStyle,
+        className: containerClassName
+      }, restProps), {
+        children: React14__namespace.cloneElement(
+          React14__namespace.Children.only(children),
+          { children: innerContent }
+        )
+      })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       react.m.button,
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        "aria-pressed": checked,
-        "aria-expanded": checked,
         "aria-label": ariaLabel,
+        "aria-expanded": checked,
+        "aria-disabled": disabled,
         disabled,
         onClick: handleToggle,
         onPointerDown: handlePointerDown,
@@ -4019,61 +4158,24 @@ var SplitButtonTrailingComponent = React11__namespace.forwardRef(
           paddingInlineStart: tokens.trailingPadding.start,
           paddingInlineEnd: tokens.trailingPadding.end
         }, style),
-        className: cn(
-          splitButtonVariants({
-            variant: actualVariant,
-            size: actualSize,
-            disabled
-          }),
-          className
-        )
+        className: containerClassName
       }, restProps), {
-        children: [
-          needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StateLayer,
-            {
-              hovered: isHovered,
-              focused: isFocused,
-              pressed: isPressed
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.m.div,
-            {
-              animate: {
-                rotate: checked ? 180 : 0,
-                x: checked ? 0 : tokens.opticalCenterOffset
-              },
-              transition: prefersReducedMotion ? { duration: 0 } : SPLIT_BUTTON_CHEVRON_SPRING,
-              className: "flex items-center justify-center shrink-0",
-              children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(
-                Icon,
-                {
-                  name: "arrow_drop_down",
-                  size: tokens.trailingIconSize,
-                  opticalSize: 24
-                }
-              )
-            }
-          )
-        ]
+        children: innerContent
       })
     ) });
   }
 );
 SplitButtonTrailingComponent.displayName = "SplitButtonTrailing";
-var SplitButtonTrailing = React11__namespace.memo(SplitButtonTrailingComponent);
-var FilledSplitButtonTrailing = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
+var SplitButtonTrailing = React14__namespace.memo(SplitButtonTrailingComponent);
+var FilledSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailing.displayName = "FilledSplitButtonTrailing";
-var TonalSplitButtonTrailing = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailing.displayName = "TonalSplitButtonTrailing";
-var ElevatedSplitButtonTrailing = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailing.displayName = "ElevatedSplitButtonTrailing";
-var OutlinedSplitButtonTrailing = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailing = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailing, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailing.displayName = "OutlinedSplitButtonTrailing";
-var SplitButtonTrailingUncheckableComponent = React11__namespace.forwardRef(
+var SplitButtonTrailingUncheckableComponent = React14__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -4110,9 +4212,9 @@ var SplitButtonTrailingUncheckableComponent = React11__namespace.forwardRef(
     const context = useSplitButtonContext();
     const actualSize = (_a2 = context == null ? void 0 : context.size) != null ? _a2 : size;
     const actualVariant = (_b2 = context == null ? void 0 : context.variant) != null ? _b2 : variant;
-    const [isHovered, setIsHovered] = React11__namespace.useState(false);
-    const [isFocused, setIsFocused] = React11__namespace.useState(false);
-    const [isPressed, setIsPressed] = React11__namespace.useState(false);
+    const [isHovered, setIsHovered] = React14__namespace.useState(false);
+    const [isFocused, setIsFocused] = React14__namespace.useState(false);
+    const [isPressed, setIsPressed] = React14__namespace.useState(false);
     const tokens = SPLIT_BUTTON_TOKENS[actualSize];
     const needsTouchTarget = actualSize === "xs" || actualSize === "sm";
     const {
@@ -4123,7 +4225,7 @@ var SplitButtonTrailingUncheckableComponent = React11__namespace.forwardRef(
     const innerCornerRadius = isPressed || isFocused ? tokens.innerCorner.pressed : isHovered ? tokens.innerCorner.hovered : tokens.innerCorner.default;
     const outerRadius = tokens.containerHeight * tokens.outerCornerPercent / 100;
     const borderRadius = `${innerCornerRadius}px ${outerRadius}px ${outerRadius}px ${innerCornerRadius}px`;
-    const handlePointerDown = React11__namespace.useCallback(
+    const handlePointerDown = React14__namespace.useCallback(
       (e) => {
         onRipplePointerDown(e);
         setIsPressed(true);
@@ -4131,19 +4233,19 @@ var SplitButtonTrailingUncheckableComponent = React11__namespace.forwardRef(
       },
       [onRipplePointerDown, onPointerDown]
     );
-    const handlePointerUp = React11__namespace.useCallback(
+    const handlePointerUp = React14__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerUp == null ? void 0 : onPointerUp(e);
       },
       [onPointerUp]
     );
-    const handlePointerEnter = React11__namespace.useCallback(() => {
+    const handlePointerEnter = React14__namespace.useCallback(() => {
       if (!disabled) {
         setIsHovered(true);
       }
     }, [disabled]);
-    const handlePointerLeave = React11__namespace.useCallback(
+    const handlePointerLeave = React14__namespace.useCallback(
       (e) => {
         setIsHovered(false);
         setIsPressed(false);
@@ -4151,21 +4253,21 @@ var SplitButtonTrailingUncheckableComponent = React11__namespace.forwardRef(
       },
       [onPointerLeave]
     );
-    const handlePointerCancel = React11__namespace.useCallback(
+    const handlePointerCancel = React14__namespace.useCallback(
       (e) => {
         setIsPressed(false);
         onPointerCancel == null ? void 0 : onPointerCancel(e);
       },
       [onPointerCancel]
     );
-    const handleFocus = React11__namespace.useCallback(
+    const handleFocus = React14__namespace.useCallback(
       (e) => {
         if (!disabled) setIsFocused(true);
         onFocus == null ? void 0 : onFocus(e);
       },
       [disabled, onFocus]
     );
-    const handleBlur = React11__namespace.useCallback(
+    const handleBlur = React14__namespace.useCallback(
       (e) => {
         setIsFocused(false);
         onBlur == null ? void 0 : onBlur(e);
@@ -4232,16 +4334,16 @@ var SplitButtonTrailingUncheckableComponent = React11__namespace.forwardRef(
   }
 );
 SplitButtonTrailingUncheckableComponent.displayName = "SplitButtonTrailingUncheckable";
-var SplitButtonTrailingUncheckable = React11__namespace.memo(
+var SplitButtonTrailingUncheckable = React14__namespace.memo(
   SplitButtonTrailingUncheckableComponent
 );
-var FilledSplitButtonTrailingUncheckable = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
+var FilledSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "filled" }, props)));
 FilledSplitButtonTrailingUncheckable.displayName = "FilledSplitButtonTrailingUncheckable";
-var TonalSplitButtonTrailingUncheckable = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
+var TonalSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "tonal" }, props)));
 TonalSplitButtonTrailingUncheckable.displayName = "TonalSplitButtonTrailingUncheckable";
-var ElevatedSplitButtonTrailingUncheckable = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
+var ElevatedSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "elevated" }, props)));
 ElevatedSplitButtonTrailingUncheckable.displayName = "ElevatedSplitButtonTrailingUncheckable";
-var OutlinedSplitButtonTrailingUncheckable = React11__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
+var OutlinedSplitButtonTrailingUncheckable = React14__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(SplitButtonTrailingUncheckable, __spreadValues({ ref, variant: "outlined" }, props)));
 OutlinedSplitButtonTrailingUncheckable.displayName = "OutlinedSplitButtonTrailingUncheckable";
 
 exports.BUTTON_COLOR_TOKENS = BUTTON_COLOR_TOKENS;