@bug-on/m3-expressive 1.2.0 → 1.2.2

package/dist/navigation.js

@@ -2601,7 +2601,10 @@ function useRippleState(options = {}) {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      const rippleSize = Math.max(
+        Math.hypot(rect.width, rect.height) * 2.5,
+        320
+      );
       setRipples((prev) => [
         ...prev,
         { id: Date.now(), x, y, size: rippleSize }
@@ -2684,7 +2687,11 @@ var NavigationBarItemComponent = React36__namespace.forwardRef(
     className,
     "aria-label": ariaLabelProp
   }, ref) => {
-    const { variant, itemLayout } = React36__namespace.useContext(NavigationBarContext);
+    const {
+      variant,
+      itemLayout,
+      itemClassName: contextItemClassName
+    } = React36__namespace.useContext(NavigationBarContext);
     const isForcedHorizontal = itemLayout === "horizontal";
     const isResponsiveHorizontal = (variant === "flexible" || variant === "xr") && itemLayout === void 0;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
@@ -2719,9 +2726,10 @@ var NavigationBarItemComponent = React36__namespace.forwardRef(
         onClick: handleClick,
         onPointerDown,
         className: cn(
-          "group relative flex flex-1 cursor-pointer transition-colors duration-200 outline-none select-none h-full",
-          variant === "xr" ? "items-center justify-center max-[599px]:min-w-28 max-[599px]:max-w-28 max-[599px]:items-start max-[599px]:pt-3 max-[599px]:pb-4" : "items-center justify-center",
+          "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none h-full items-center justify-center min-w-0",
+          variant === "xr" ? isResponsiveHorizontal ? "flex-1 min-[600px]:flex-initial min-[600px]:w-auto" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1" : isForcedHorizontal ? "flex-initial w-auto" : "flex-1",
           disabled && "pointer-events-none opacity-[0.38]",
+          contextItemClassName,
           className
         ),
         children: [
@@ -2729,9 +2737,9 @@ var NavigationBarItemComponent = React36__namespace.forwardRef(
             "div",
             {
               className: cn(
-                "relative flex items-center justify-center flex-col gap-y-1 w-full",
-                isResponsiveHorizontal && "min-[600px]:flex-row min-[600px]:gap-y-0 min-[600px]:gap-x-1 min-[600px]:h-10 min-[600px]:px-4 min-[600px]:rounded-full min-[600px]:w-auto min-[600px]:max-w-42",
-                isForcedHorizontal && "flex-row gap-y-0 gap-x-1 h-10 px-4 rounded-full w-auto max-w-42"
+                "relative flex items-center justify-center flex-col gap-y-1 w-full px-1 py-1.5",
+                isResponsiveHorizontal && "min-[600px]:flex-row min-[600px]:gap-y-0 min-[600px]:gap-x-1.5 min-[600px]:h-10 min-[600px]:px-4 min-[600px]:py-0 min-[600px]:rounded-full min-[600px]:w-auto",
+                isForcedHorizontal && "flex-row gap-y-0 gap-x-1.5 h-10 px-4 py-0 rounded-full w-auto"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2808,7 +2816,7 @@ var navContainerVariants = classVarianceAuthority.cva(
       variant: {
         flexible: "bottom-0 left-0 right-0 w-full h-16 pb-safe",
         baseline: "bottom-0 left-0 right-0 w-full h-20 pb-safe",
-        xr: "bottom-6 left-1/2 -translate-x-1/2 w-auto max-w-fit h-20 min-[600px]:h-16 rounded-[48px] px-2"
+        xr: "bottom-6 left-1/2 -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] min-[600px]:max-w-fit h-20 min-[600px]:h-16 rounded-[48px] px-2"
       },
       position: {
         fixed: "fixed",
@@ -2836,6 +2844,7 @@ var NavigationBarComponent = React36__namespace.forwardRef(
     scrollContainerRef,
     activeIndicatorTransition,
     children,
+    itemClassName,
     className,
     style
   }, ref) => {
@@ -2886,7 +2895,12 @@ var NavigationBarComponent = React36__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       NavigationBarContext.Provider,
       {
-        value: { variant, itemLayout, activeIndicatorTransition },
+        value: {
+          variant,
+          itemLayout,
+          activeIndicatorTransition,
+          itemClassName
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           react.m.nav,
           {
@@ -2907,7 +2921,7 @@ var NavigationBarComponent = React36__namespace.forwardRef(
                 "aria-orientation": "horizontal",
                 className: cn(
                   "flex w-full h-full mx-auto",
-                  variant === "xr" ? "gap-0 min-[600px]:gap-1.5" : "max-w-7xl gap-1.5"
+                  variant === "xr" ? "gap-0 min-[600px]:gap-1.5 items-center justify-center px-1" : "max-w-7xl gap-1.5"
                 ),
                 children
               }
@@ -4650,12 +4664,39 @@ var ProgressIndicator = React36__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
 });
 ProgressIndicator.displayName = "ProgressIndicator";
-var SIZE_STYLES = {
-  xs: "h-8 w-8",
-  sm: "h-10 w-10",
-  md: "h-14 w-14",
-  lg: "h-24 w-24",
-  xl: "h-[8.5rem] w-[8.5rem]"
+var SIZE_HEIGHT_STYLES = {
+  xs: "h-8",
+  sm: "h-10",
+  md: "h-14",
+  lg: "h-24",
+  xl: "h-[8.5rem]"
+};
+var WIDTH_SIZE_STYLES = {
+  xs: {
+    default: "w-8",
+    narrow: "w-8",
+    wide: "w-12"
+  },
+  sm: {
+    default: "w-10",
+    narrow: "w-12",
+    wide: "w-[3.25rem]"
+  },
+  md: {
+    default: "w-14",
+    narrow: "w-12",
+    wide: "w-[4.5rem]"
+  },
+  lg: {
+    default: "w-24",
+    narrow: "w-16",
+    wide: "w-32"
+  },
+  xl: {
+    default: "w-[8.5rem]",
+    narrow: "w-[6.5rem]",
+    wide: "w-[11.5rem]"
+  }
 };
 var SIZE_ICON = {
   xs: { cls: "size-5", px: 20 },
@@ -4756,11 +4797,14 @@ var IconButtonComponent = React36__namespace.forwardRef(
       variant = "default",
       colorStyle = "standard",
       size = "sm",
+      widthVariant = "default",
       shape = "round",
       selected,
+      selectedIcon,
       loading = false,
       loadingVariant = "loading-indicator",
       iconSize,
+      asChild = false,
       children,
       onClick,
       onKeyDown,
@@ -4771,17 +4815,20 @@ var IconButtonComponent = React36__namespace.forwardRef(
       "variant",
       "colorStyle",
       "size",
+      "widthVariant",
       "shape",
       "selected",
+      "selectedIcon",
       "loading",
       "loadingVariant",
       "iconSize",
+      "asChild",
       "children",
       "onClick",
       "onKeyDown",
       "aria-label"
     ]);
-    var _a2, _b2;
+    var _a2, _b2, _c, _d, _e;
     const isToggle = variant === "toggle";
     const isSelected = isToggle && !!selected;
     const resolvedColorClass = React36__namespace.useMemo(
@@ -4812,6 +4859,8 @@ var IconButtonComponent = React36__namespace.forwardRef(
     const defaultIconPx = sizeIcon.px;
     const iconPx = iconSize != null ? iconSize : defaultIconPx;
     const isCustomSize = iconSize != null && iconSize !== "inherit";
+    const heightClass = (_c = SIZE_HEIGHT_STYLES[size]) != null ? _c : SIZE_HEIGHT_STYLES.sm;
+    const widthClass = (_e = ((_d = WIDTH_SIZE_STYLES[size]) != null ? _d : WIDTH_SIZE_STYLES.sm)[widthVariant]) != null ? _e : WIDTH_SIZE_STYLES.sm.default;
     const needsTouchTarget = size === "xs" || size === "sm";
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
@@ -4837,7 +4886,90 @@ var IconButtonComponent = React36__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: isSelected && selectedIcon ? selectedIcon : asChild ? React36__namespace.Children.only(children).props.children : children
+        }),
+        isSelected && selectedIcon ? "selected-content" : "content"
+      ) })
+    ] });
+    const containerClassName = cn(
+      baseIconButtonClasses,
+      resolvedColorClass,
+      outlineWidthClass,
+      disabledBgClass,
+      "overflow-hidden",
+      heightClass,
+      widthClass,
+      loading && "pointer-events-none opacity-75 cursor-not-allowed",
+      className
+    );
+    if (asChild) {
+      const child = React36__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: React36__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,
@@ -4853,67 +4985,9 @@ var IconButtonComponent = React36__namespace.forwardRef(
         animate: { borderRadius: animateRadius },
         whileTap: { borderRadius: pressedRadius },
         transition: { borderRadius: SPRING_TRANSITION_FAST },
-        className: cn(
-          baseIconButtonClasses,
-          resolvedColorClass,
-          outlineWidthClass,
-          disabledBgClass,
-          "overflow-hidden",
-          SIZE_STYLES[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
       })
     ) });
   }
@@ -5987,6 +6061,47 @@ var vibrantFloatingToolbarColors = {
   fabContainerColor: "var(--md-sys-color-tertiary-container)",
   fabContentColor: "var(--md-sys-color-on-tertiary-container)"
 };
+var surfaceContainerHighFloatingToolbarColors = {
+  toolbarContainerColor: "var(--md-sys-color-surface-container-high)",
+  toolbarContentColor: "var(--md-sys-color-on-surface)",
+  fabContainerColor: "var(--md-sys-color-secondary-container)",
+  fabContentColor: "var(--md-sys-color-on-secondary-container)"
+};
+var surfaceContainerHighestFloatingToolbarColors = {
+  toolbarContainerColor: "var(--md-sys-color-surface-container-highest)",
+  toolbarContentColor: "var(--md-sys-color-on-surface)",
+  fabContainerColor: "var(--md-sys-color-secondary-container)",
+  fabContentColor: "var(--md-sys-color-on-secondary-container)"
+};
+var tertiaryContainerFloatingToolbarColors = {
+  toolbarContainerColor: "var(--md-sys-color-tertiary-container)",
+  toolbarContentColor: "var(--md-sys-color-on-tertiary-container)",
+  fabContainerColor: "var(--md-sys-color-primary-container)",
+  fabContentColor: "var(--md-sys-color-on-primary-container)"
+};
+var xrFloatingToolbarColors = {
+  toolbarContainerColor: "color-mix(in srgb, var(--md-sys-color-surface-container-high) 80%, transparent)",
+  toolbarContentColor: "var(--md-sys-color-on-surface)",
+  fabContainerColor: "color-mix(in srgb, var(--md-sys-color-secondary-container) 85%, transparent)",
+  fabContentColor: "var(--md-sys-color-on-secondary-container)"
+};
+function getToolbarColors(variant = "standard", customColors) {
+  if (customColors) return customColors;
+  switch (variant) {
+    case "vibrant":
+      return vibrantFloatingToolbarColors;
+    case "surface-high":
+      return surfaceContainerHighFloatingToolbarColors;
+    case "surface-highest":
+      return surfaceContainerHighestFloatingToolbarColors;
+    case "tertiary":
+      return tertiaryContainerFloatingToolbarColors;
+    case "xr":
+      return xrFloatingToolbarColors;
+    default:
+      return standardFloatingToolbarColors;
+  }
+}
 var ToolbarContext = React36__namespace.createContext(
   null
 );
@@ -6022,7 +6137,7 @@ var BottomDockedToolbar = React36__namespace.forwardRef(
       "className",
       "aria-label"
     ]);
-    const colors = customColors || (variant === "vibrant" ? vibrantFloatingToolbarColors : standardFloatingToolbarColors);
+    const colors = getToolbarColors(variant, customColors);
     const { scrollY } = react.useScroll(
       scrollContainerRef ? { container: scrollContainerRef } : void 0
     );
@@ -6051,6 +6166,7 @@ var BottomDockedToolbar = React36__namespace.forwardRef(
       full: "rounded-full"
     };
     const justifyClass = justify === "center" ? "justify-center gap-4" : "justify-between";
+    const isXr = variant === "xr";
     return /* @__PURE__ */ jsxRuntime.jsx(ToolbarContext.Provider, { value: { orientation: "horizontal" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
       react.m.div,
       __spreadProps(__spreadValues({
@@ -6071,11 +6187,12 @@ var BottomDockedToolbar = React36__namespace.forwardRef(
           paddingRight: paddingX
         }),
         className: cn(
-          "fixed bottom-0 left-0 right-0 w-full z-40",
+          "fixed bottom-0 left-0 right-0 w-full z-40 text-(--toolbar-color) [&_.text-m3-on-surface-variant]:text-current",
           "flex items-center h-16",
           justifyClass,
           SHAPE_CLASSES[shape],
-          "shadow-[0_-1px_3px_rgba(0,0,0,0.1)] pointer-events-auto",
+          isXr ? "backdrop-blur-md border-t border-white/10 shadow-lg" : "shadow-[0_-1px_3px_rgba(0,0,0,0.1)]",
+          "pointer-events-auto",
           className
         )
       }, props), {
@@ -6122,6 +6239,13 @@ var ToolbarIconButtonTokens = {
   /** Icon size in dp — larger than standard 24dp to fill the 48dp button properly */
   IconSize: 28
 };
+var ToolbarToggleButtonTokens = {
+  Height: 48,
+  MinWidth: 95,
+  IconSize: 24,
+  PaddingX: 16,
+  Gap: 8
+};
 var ALIGNMENT_CLASS = {
   start: "justify-start",
   center: "justify-center",
@@ -6180,7 +6304,8 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
     var _b = _a, {
       expanded,
       orientation = "horizontal",
-      colors = standardFloatingToolbarColors,
+      variant = "standard",
+      colors: customColors,
       shape = "full",
       contentPadding,
       scrollBehavior,
@@ -6198,6 +6323,7 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
     } = _b, props = __objRest(_b, [
       "expanded",
       "orientation",
+      "variant",
       "colors",
       "shape",
       "contentPadding",
@@ -6214,6 +6340,7 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
       "style",
       "aria-label"
     ]);
+    const colors = getToolbarColors(variant, customColors);
     const isHorizontal = orientation === "horizontal";
     const isStringPadding = typeof contentPadding === "string";
     const cssVars = __spreadValues(__spreadValues({
@@ -6222,7 +6349,8 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
       "--toolbar-size": `${FloatingToolbarTokens.ContainerHeight}px`
     }, isStringPadding ? {} : contentPadding), style);
     const isScrolledOff = scrollBehavior && scrollBehavior.offset < 0;
-    const shadowClass = expanded ? "shadow-md" : "shadow-sm";
+    const isXr = variant === "xr";
+    const shadowClass = isXr ? "shadow-lg border border-white/10 backdrop-blur-md" : expanded ? "shadow-md" : "shadow-sm";
     const containerShapeClass = shape === "full" ? "rounded-full" : "rounded-2xl";
     const leadingVariants = buildSlotVariants(
       isHorizontal ? "-100%" : 0,
@@ -6239,7 +6367,7 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
       scrollBehavior,
       disableScrollTranslation
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(ToolbarContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ToolbarContext.Provider, { value: { orientation, itemClassName }, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.m.div,
       {
         ref,
@@ -6261,8 +6389,8 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
               color: "var(--toolbar-color)"
             }),
             className: cn(
-              "flex pointer-events-auto relative",
-              isHorizontal ? "max-w-[90vw] h-(--toolbar-size)" : "max-h-[90vh] w-(--toolbar-size) h-fit",
+              "flex pointer-events-auto relative text-(--toolbar-color) [&_.text-m3-on-surface-variant]:text-current",
+              isHorizontal ? "max-w-[min(90vw,100%)] h-(--toolbar-size)" : "max-h-[min(90vh,100%)] w-(--toolbar-size) h-fit",
               containerShapeClass,
               shadowClass,
               className
@@ -6279,11 +6407,13 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-1 min-w-0 min-h-0",
+                      "flex items-center min-w-0 min-h-0",
                       isHorizontal ? "flex-row h-full" : "flex-col w-full",
-                      isStringPadding ? contentPadding : isHorizontal ? "px-4" : "py-6"
+                      isStringPadding ? contentPadding : isHorizontal ? "px-2" : "py-2"
                     ),
-                    style: isStringPadding ? void 0 : contentPadding,
+                    style: __spreadValues({
+                      gap: itemGap
+                    }, isStringPadding ? {} : contentPadding),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: expanded && startContent && /* @__PURE__ */ jsxRuntime.jsx(
                         react.m.div,
@@ -6293,9 +6423,10 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
                           animate: "visible",
                           exit: "hidden",
                           className: cn(
-                            "flex shrink-0 overflow-hidden",
+                            "flex shrink-0 items-center overflow-hidden",
                             isHorizontal ? "flex-row" : "flex-col"
                           ),
+                          style: { gap: itemGap },
                           children: processNodes(startContent)
                         },
                         "start"
@@ -6320,9 +6451,10 @@ var FloatingToolbarBase = React36__namespace.forwardRef(
                           animate: "visible",
                           exit: "hidden",
                           className: cn(
-                            "flex shrink-0 overflow-hidden",
+                            "flex shrink-0 items-center overflow-hidden",
                             isHorizontal ? "flex-row" : "flex-col"
                           ),
+                          style: { gap: itemGap },
                           children: processNodes(endContent)
                         },
                         "end"
@@ -6348,7 +6480,8 @@ var FloatingToolbarWithFabBase = React36__namespace.forwardRef(
     var _b = _a, {
       expanded,
       orientation = "horizontal",
-      colors = standardFloatingToolbarColors,
+      variant = "standard",
+      colors: customColors,
       floatingActionButton,
       fabPosition = orientation === "horizontal" ? "end" : "bottom",
       animationDuration = 0.3,
@@ -6359,6 +6492,7 @@ var FloatingToolbarWithFabBase = React36__namespace.forwardRef(
     } = _b, props = __objRest(_b, [
       "expanded",
       "orientation",
+      "variant",
       "colors",
       "floatingActionButton",
       "fabPosition",
@@ -6368,6 +6502,7 @@ var FloatingToolbarWithFabBase = React36__namespace.forwardRef(
       "className",
       "style"
     ]);
+    const colors = getToolbarColors(variant, customColors);
     const isHorizontal = orientation === "horizontal";
     const effectiveExpanded = expanded && (!scrollBehavior || scrollBehavior.isExpanded);
     const isFabBefore = fabPosition === "start" || fabPosition === "top";
@@ -6445,7 +6580,8 @@ var FloatingToolbarWithFabBase = React36__namespace.forwardRef(
                   expanded,
                   colors,
                   disableScrollTranslation: true,
-                  disableLayoutAnimation: true
+                  disableLayoutAnimation: true,
+                  className: className ? cn("h-full", className) : void 0
                 }, props)
               ) : /* @__PURE__ */ jsxRuntime.jsx(
                 VerticalFloatingToolbar,
@@ -6453,7 +6589,8 @@ var FloatingToolbarWithFabBase = React36__namespace.forwardRef(
                   expanded,
                   colors,
                   disableScrollTranslation: true,
-                  disableLayoutAnimation: true
+                  disableLayoutAnimation: true,
+                  className: className ? cn("w-full", className) : void 0
                 }, props)
               )
             },
@@ -6483,7 +6620,7 @@ var ToolbarDivider = ({
       "aria-orientation": isHorizontalToolbar ? "vertical" : "horizontal",
       className: cn(
         "shrink-0 bg-current opacity-30 border-none",
-        isHorizontalToolbar ? "w-px h-8 self-center mx-2" : "h-px w-8 self-center my-2",
+        isHorizontalToolbar ? "w-px h-8 self-center mx-1" : "h-px w-8 self-center my-1",
         className
       ),
       style: {
@@ -6506,20 +6643,47 @@ var VARIANT_TO_COLOR_STYLE = {
 };
 var ToolbarIconButton = React36__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { emphasis = "standard", toolbarSize = "default", className } = _b, props = __objRest(_b, ["emphasis", "toolbarSize", "className"]);
+    var _b = _a, {
+      emphasis = "standard",
+      toolbarSize = "default",
+      selected,
+      asChild,
+      className
+    } = _b, props = __objRest(_b, [
+      "emphasis",
+      "toolbarSize",
+      "selected",
+      "asChild",
+      "className"
+    ]);
+    const context = useToolbarContext();
     const widthClass = TOOLBAR_ICON_BUTTON_WIDTH[toolbarSize];
     const colorStyle = VARIANT_TO_COLOR_STYLE[emphasis];
+    const iconButtonProps = selected !== void 0 ? {
+      variant: "toggle",
+      selected: Boolean(selected)
+    } : {
+      variant: "default"
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       IconButton,
-      __spreadValues({
+      __spreadValues(__spreadProps(__spreadValues({
         ref,
-        variant: "default",
+        asChild,
         colorStyle,
         size: "md",
         shape: "round",
-        iconSize: ToolbarIconButtonTokens.IconSize,
-        className: cn("h-[48px]", widthClass, className)
-      }, props)
+        iconSize: ToolbarIconButtonTokens.IconSize
+      }, iconButtonProps), {
+        className: cn(
+          "h-[48px]",
+          widthClass,
+          emphasis === "standard" && !selected && "text-current hover:bg-current/8 active:bg-current/12",
+          emphasis === "standard" && selected && "bg-current/16 text-current hover:bg-current/20 active:bg-current/24",
+          context == null ? void 0 : context.itemClassName,
+          className
+        )
+      }), props)
     );
   }
 );
@@ -6590,6 +6754,195 @@ function useFloatingToolbarScrollBehavior(options = {}) {
     exitDirection
   };
 }
+var MOTION_PROP_KEYS = [
+  "animate",
+  "exit",
+  "initial",
+  "transition",
+  "variants",
+  "whileHover",
+  "whileTap",
+  "whileFocus",
+  "whileDrag",
+  "whileInView",
+  "onAnimationStart",
+  "onAnimationComplete",
+  "onUpdate",
+  "onDragStart",
+  "onDragEnd",
+  "onDrag",
+  "onDirectionLock",
+  "onDragTransitionEnd",
+  "layout",
+  "layoutId",
+  "onLayoutAnimationComplete"
+];
+var ToolbarToggleButton = React36__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      emphasis = "standard",
+      selected = false,
+      icon,
+      children,
+      pressScale = 0.95,
+      pressBounceOffset = 6,
+      ripple = true,
+      asChild = false,
+      className,
+      type = "button",
+      disabled,
+      onPointerDown: onPointerDownProp
+    } = _b, props = __objRest(_b, [
+      "emphasis",
+      "selected",
+      "icon",
+      "children",
+      "pressScale",
+      "pressBounceOffset",
+      "ripple",
+      "asChild",
+      "className",
+      "type",
+      "disabled",
+      "onPointerDown"
+    ]);
+    const context = useToolbarContext();
+    const {
+      ripples,
+      onPointerDown: handleRipplePointerDown,
+      removeRipple
+    } = useRippleState({
+      disabled: Boolean(disabled) || !ripple
+    });
+    const handlePointerDown = React36__namespace.useCallback(
+      (e) => {
+        if (!disabled && ripple) {
+          handleRipplePointerDown(e);
+        }
+        onPointerDownProp == null ? void 0 : onPointerDownProp(e);
+      },
+      [disabled, ripple, handleRipplePointerDown, onPointerDownProp]
+    );
+    const baseClasses = "relative overflow-hidden inline-flex items-center justify-center min-w-[95px] h-[48px] px-4 rounded-full text-sm font-medium transition-colors select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/40 disabled:pointer-events-none disabled:opacity-38";
+    const variantClasses = {
+      standard: selected ? "bg-current/16 text-current hover:bg-current/20 active:bg-current/24" : "bg-transparent text-current hover:bg-current/8 active:bg-current/12",
+      tonal: selected ? "bg-m3-secondary-container text-m3-on-secondary-container hover:shadow-sm" : "bg-m3-surface-container-high text-m3-on-surface hover:bg-m3-surface-container-highest",
+      filled: selected ? "bg-m3-primary text-m3-on-primary hover:shadow-sm" : "bg-m3-surface-container-highest text-m3-on-surface hover:bg-m3-surface-container-high"
+    };
+    const combinedClassName = cn(
+      baseClasses,
+      variantClasses[emphasis],
+      context == null ? void 0 : context.itemClassName,
+      className
+    );
+    const whileTapConfig = React36__namespace.useMemo(
+      () => ({
+        scale: pressScale,
+        x: pressBounceOffset ? [
+          0,
+          -pressBounceOffset,
+          pressBounceOffset,
+          -pressBounceOffset / 2,
+          pressBounceOffset / 2,
+          0
+        ] : 0
+      }),
+      [pressScale, pressBounceOffset]
+    );
+    const transitionConfig = React36__namespace.useMemo(
+      () => ({
+        scale: FAST_SPATIAL_SPRING,
+        x: {
+          duration: 0.35,
+          ease: "easeInOut"
+        }
+      }),
+      []
+    );
+    const mainContent = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center justify-center h-full gap-2", children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "shrink-0 inline-flex items-center justify-center",
+          style: {
+            width: ToolbarToggleButtonTokens.IconSize,
+            height: ToolbarToggleButtonTokens.IconSize
+          },
+          children: icon
+        }
+      ),
+      children && (typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : children)
+    ] });
+    if (asChild) {
+      const child = React36__namespace.Children.only(children);
+      const childContent = child.props.children;
+      const innerChildContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        ripple && /* @__PURE__ */ jsxRuntime.jsx(
+          Ripple,
+          {
+            ripples,
+            onRippleDone: removeRipple,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center h-full gap-2", children: icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "shrink-0 inline-flex items-center justify-center",
+              style: {
+                width: ToolbarToggleButtonTokens.IconSize,
+                height: ToolbarToggleButtonTokens.IconSize
+              },
+              children: icon
+            }
+          ),
+          typeof childContent === "string" || typeof childContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: childContent }) : childContent
+        ] }) : childContent })
+      ] });
+      const strippedProps = __spreadValues({}, props);
+      for (const key of MOTION_PROP_KEYS) delete strippedProps[key];
+      delete strippedProps.children;
+      return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-pressed": selected,
+          className: combinedClassName,
+          onPointerDown: handlePointerDown
+        }, strippedProps), {
+          children: React36__namespace.cloneElement(child, { children: innerChildContent })
+        })
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      react.m.button,
+      __spreadProps(__spreadValues({
+        ref,
+        type,
+        "aria-pressed": selected,
+        disabled,
+        whileTap: whileTapConfig,
+        transition: transitionConfig,
+        onPointerDown: handlePointerDown,
+        className: combinedClassName
+      }, props), {
+        children: [
+          ripple && /* @__PURE__ */ jsxRuntime.jsx(
+            Ripple,
+            {
+              ripples,
+              onRippleDone: removeRipple,
+              disabled
+            }
+          ),
+          mainContent
+        ]
+      })
+    ) });
+  }
+);
+ToolbarToggleButton.displayName = "ToolbarToggleButton";
 
 exports.APP_BAR_BOTTOM_SPRING = APP_BAR_BOTTOM_SPRING;
 exports.APP_BAR_COLORS = APP_BAR_COLORS;
@@ -6665,6 +7018,8 @@ exports.ToolbarDivider = ToolbarDivider;
 exports.ToolbarDividerTokens = ToolbarDividerTokens;
 exports.ToolbarIconButton = ToolbarIconButton;
 exports.ToolbarIconButtonTokens = ToolbarIconButtonTokens;
+exports.ToolbarToggleButton = ToolbarToggleButton;
+exports.ToolbarToggleButtonTokens = ToolbarToggleButtonTokens;
 exports.VIBRANT_COLORS = VIBRANT_COLORS;
 exports.VerticalFloatingToolbar = VerticalFloatingToolbar;
 exports.VerticalFloatingToolbarWithFab = VerticalFloatingToolbarWithFab;
@@ -6673,12 +7028,17 @@ exports.VerticalMenuContent = VerticalMenuContent;
 exports.VerticalMenuDivider = VerticalMenuDivider;
 exports.VerticalMenuGroup = VerticalMenuGroup;
 exports.appBarTypography = appBarTypography;
+exports.getToolbarColors = getToolbarColors;
 exports.standardFloatingToolbarColors = standardFloatingToolbarColors;
+exports.surfaceContainerHighFloatingToolbarColors = surfaceContainerHighFloatingToolbarColors;
+exports.surfaceContainerHighestFloatingToolbarColors = surfaceContainerHighestFloatingToolbarColors;
+exports.tertiaryContainerFloatingToolbarColors = tertiaryContainerFloatingToolbarColors;
 exports.useAppBarScroll = useAppBarScroll;
 exports.useFloatingToolbarScrollBehavior = useFloatingToolbarScrollBehavior;
 exports.useMenuContext = useMenuContext;
 exports.useSearch = useSearch;
 exports.useSearchKeyboard = useSearchKeyboard;
 exports.vibrantFloatingToolbarColors = vibrantFloatingToolbarColors;
+exports.xrFloatingToolbarColors = xrFloatingToolbarColors;
 //# sourceMappingURL=navigation.js.map
 //# sourceMappingURL=navigation.js.map