@bug-on/m3-expressive 1.2.2 → 1.2.4

package/dist/index.mjs

@@ -6724,6 +6724,7 @@ var ButtonComponent = React61.forwardRef(
       loading = false,
       loadingVariant = "loading-indicator",
       asChild = false,
+      fullWidth = false,
       outlineWidth,
       children,
       onClick,
@@ -6746,6 +6747,7 @@ var ButtonComponent = React61.forwardRef(
       "loading",
       "loadingVariant",
       "asChild",
+      "fullWidth",
       "outlineWidth",
       "children",
       "onClick",
@@ -6825,7 +6827,8 @@ var ButtonComponent = React61.forwardRef(
       [loading, onClick, onKeyDown]
     );
     const buttonClassName = cn(
-      "relative w-fit shrink-0 inline-flex flex-row items-center justify-center",
+      "relative inline-flex flex-row items-center justify-center",
+      fullWidth ? "w-full" : "w-fit shrink-0",
       "whitespace-nowrap select-none cursor-pointer",
       "transition-[background-color,color,border-color,box-shadow,opacity,filter] duration-200",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
@@ -8011,7 +8014,9 @@ var FABComponent = React61.forwardRef(
       asChild = false,
       onClick,
       onKeyDown,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      layout,
+      layoutId
     } = _b, restProps = __objRest(_b, [
       "className",
       "style",
@@ -8027,7 +8032,9 @@ var FABComponent = React61.forwardRef(
       "asChild",
       "onClick",
       "onKeyDown",
-      "aria-label"
+      "aria-label",
+      "layout",
+      "layoutId"
     ]);
     var _a2, _b2, _c, _d;
     const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
@@ -8068,7 +8075,9 @@ var FABComponent = React61.forwardRef(
       /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
       /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: loading ? /* @__PURE__ */ jsx(
         m.span,
-        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+        __spreadProps(__spreadValues({
+          layout: "position"
+        }, ICON_SPAN_VARIANTS), {
           transition: SPRING_TRANSITION,
           className: cn(
             "flex items-center justify-center shrink-0",
@@ -8095,7 +8104,9 @@ var FABComponent = React61.forwardRef(
         "loading"
       ) : /* @__PURE__ */ jsx(
         m.span,
-        __spreadProps(__spreadValues({}, ICON_SPAN_VARIANTS), {
+        __spreadProps(__spreadValues({
+          layout: "position"
+        }, ICON_SPAN_VARIANTS), {
           transition: SPRING_TRANSITION,
           "aria-hidden": "true",
           className: cn(
@@ -8109,10 +8120,15 @@ var FABComponent = React61.forwardRef(
       /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: extended && labelContent && /* @__PURE__ */ jsx(
         m.span,
         {
+          layout: "position",
           initial: { width: 0, opacity: 0 },
           animate: { width: "auto", opacity: 1 },
           exit: { width: 0, opacity: 0 },
-          transition: SPRING_TRANSITION,
+          transition: {
+            opacity: { duration: 0.15, ease: "linear" },
+            width: SPRING_TRANSITION,
+            layout: SPRING_TRANSITION
+          },
           className: "overflow-hidden whitespace-nowrap ml-3",
           children: labelContent
         },
@@ -8129,7 +8145,7 @@ var FABComponent = React61.forwardRef(
       colors.text,
       lowered ? "shadow-sm" : colors.shadow,
       (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-      extended && "w-auto px-6",
+      extended && "w-auto pl-4 pr-6",
       SIZE_TEXT_CLASS[size],
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
@@ -8160,6 +8176,8 @@ var FABComponent = React61.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
+        layout: layout !== void 0 ? layout : true,
+        layoutId,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
@@ -8178,7 +8196,8 @@ var FABComponent = React61.forwardRef(
         transition: {
           borderRadius: SPRING_TRANSITION_FAST,
           scale: SPRING_TRANSITION,
-          opacity: { duration: 0.25, ease: "easeOut" }
+          opacity: { duration: 0.25, ease: "easeOut" },
+          layout: SPRING_TRANSITION
         },
         className: containerClassName
       }, restProps), {
@@ -15757,6 +15776,23 @@ var ListItemImpl = React61.forwardRef(
 );
 ListItemImpl.displayName = "ListItem";
 var ListItem = React61.memo(ListItemImpl);
+
+// src/ui/navigation/navigation-shape-utils.ts
+function getNavigationShapeStyle(shape, width = 56, height = 56) {
+  if (!shape || shape === "pill" || shape === "circle") {
+    return void 0;
+  }
+  const polygon = MD3Shapes[shape];
+  if (!polygon) {
+    return void 0;
+  }
+  return {
+    clipPath: toClipPath(polygon, width, height)
+  };
+}
+function isSquareShape(shape) {
+  return Boolean(shape && shape !== "pill");
+}
 var NavigationBarContext = React61.createContext({ variant: "flexible" });
 function cloneIconWithFill(icon, selected) {
   if (!React61.isValidElement(icon)) return icon;
@@ -15768,16 +15804,23 @@ function cloneIconWithFill(icon, selected) {
   }
   return icon;
 }
-function ActivePill() {
+function ActivePill({
+  shape = "pill",
+  width = 56,
+  height = 32
+}) {
   const { activeIndicatorTransition } = React61.useContext(NavigationBarContext);
+  const shapeStyle = getNavigationShapeStyle(shape, width, height);
   return /* @__PURE__ */ jsx(
     m.div,
     {
-      className: "absolute inset-0 bg-m3-secondary-container pointer-events-none",
-      style: {
-        borderRadius: 9999,
+      className: cn(
+        "bg-m3-secondary-container pointer-events-none",
+        shapeStyle ? "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-none" : shape === "circle" ? "absolute inset-0 rounded-full" : "absolute inset-0 rounded-full"
+      ),
+      style: __spreadValues(__spreadValues({
         zIndex: 0
-      },
+      }, shapeStyle ? { width, height } : {}), shapeStyle),
       initial: { opacity: 0, scale: 0.5 },
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0.5 },
@@ -15785,11 +15828,42 @@ function ActivePill() {
     }
   );
 }
-function HoverStateLayer() {
-  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-m3-on-surface opacity-0 group-hover:opacity-[0.08] group-focus-visible:opacity-[0.10] active:opacity-[0.10] transition-opacity duration-200 pointer-events-none z-0" });
+function HoverStateLayer({
+  shape = "pill",
+  width = 56,
+  height = 32
+}) {
+  const shapeStyle = getNavigationShapeStyle(shape, width, height);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-m3-on-surface opacity-0 group-hover:opacity-[0.08] group-focus-visible:opacity-[0.10] active:opacity-[0.10] transition-opacity duration-200 pointer-events-none z-0",
+        shapeStyle ? "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-none" : shape === "circle" ? "absolute inset-0 rounded-full" : "absolute inset-0 rounded-[16px]"
+      ),
+      style: __spreadValues(__spreadValues({}, shapeStyle ? { width, height } : {}), shapeStyle)
+    }
+  );
 }
-function RippleLayer({ ripples, onRippleDone }) {
-  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full overflow-hidden pointer-events-none z-0", children: /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone }) });
+function RippleLayer({
+  ripples,
+  onRippleDone,
+  shape = "pill",
+  width = 56,
+  height = 32
+}) {
+  const shapeStyle = getNavigationShapeStyle(shape, width, height);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden pointer-events-none z-0",
+        shapeStyle ? "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-none" : shape === "circle" ? "absolute inset-0 rounded-full" : "absolute inset-0 rounded-[16px]"
+      ),
+      style: __spreadValues(__spreadValues({}, shapeStyle ? { width, height } : {}), shapeStyle),
+      children: /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone })
+    }
+  );
 }
 function IconContainer({ selected, badge, children }) {
   return /* @__PURE__ */ jsxs(
@@ -15815,16 +15889,33 @@ var NavigationBarItemComponent = React61.forwardRef(
     onClick,
     disabled = false,
     badge,
+    shape: shapeProp,
+    shapeSize: shapeSizeProp,
+    hideLabel = false,
     className,
-    "aria-label": ariaLabelProp
+    "aria-label": ariaLabelProp,
+    asChild = false,
+    children
   }, ref) => {
+    var _a, _b, _c;
     const {
       variant,
       itemLayout,
+      shape: contextShape,
+      labelVisibility: contextLabelVisibility,
+      shapeSize: contextShapeSize,
       itemClassName: contextItemClassName
     } = React61.useContext(NavigationBarContext);
+    const activeShape = (_a = shapeProp != null ? shapeProp : contextShape) != null ? _a : "pill";
+    const isSquare = isSquareShape(activeShape);
+    const resolvedShapeSize = (_b = shapeSizeProp != null ? shapeSizeProp : contextShapeSize) != null ? _b : 56;
     const isForcedHorizontal = itemLayout === "horizontal";
     const isResponsiveHorizontal = (variant === "flexible" || variant === "xr") && itemLayout === void 0;
+    const shouldShowLabel = !hideLabel && (() => {
+      if (contextLabelVisibility === "unlabeled") return false;
+      if (contextLabelVisibility === "auto") return selected;
+      return true;
+    })();
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
     });
@@ -15845,6 +15936,145 @@ var NavigationBarItemComponent = React61.forwardRef(
       [disabled, selected, onClick]
     );
     const filledIcon = cloneIconWithFill(icon, selected);
+    const itemClassName = cn(
+      "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
+    );
+    const iconPillWidth = isSquare ? resolvedShapeSize : 56;
+    const iconPillHeight = isSquare ? resolvedShapeSize : 32;
+    if (asChild && children) {
+      const child = React61.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "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",
+              // When label is hidden and not horizontal, remove bottom gap
+              !shouldShowLabel && !isForcedHorizontal && "gap-y-0"
+            ),
+            children: [
+              !isSquare && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-0 z-0 hidden",
+                    isResponsiveHorizontal && "min-[600px]:block",
+                    isForcedHorizontal && "block!"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill, { shape: activeShape, width: 56, height: 40 }) }),
+                    /* @__PURE__ */ jsx(HoverStateLayer, { shape: activeShape, width: 56, height: 40 }),
+                    /* @__PURE__ */ jsx(
+                      RippleLayer,
+                      {
+                        ripples,
+                        onRippleDone: removeRipple,
+                        shape: activeShape,
+                        width: 56,
+                        height: 40
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative flex items-center justify-center shrink-0 z-10",
+                    isSquare ? "mx-auto" : "h-8 w-14 mx-auto rounded-[16px]",
+                    !isSquare && isResponsiveHorizontal && "min-[600px]:size-6 min-[600px]:w-auto min-[600px]:h-auto",
+                    !isSquare && isForcedHorizontal && "size-6 w-auto h-auto"
+                  ),
+                  style: isSquare ? { width: resolvedShapeSize, height: resolvedShapeSize } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute inset-0 z-0",
+                          !isSquare && isResponsiveHorizontal && "min-[600px]:hidden",
+                          !isSquare && isForcedHorizontal && "hidden"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                            ActivePill,
+                            {
+                              shape: activeShape,
+                              width: iconPillWidth,
+                              height: iconPillHeight
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            HoverStateLayer,
+                            {
+                              shape: activeShape,
+                              width: iconPillWidth,
+                              height: iconPillHeight
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            RippleLayer,
+                            {
+                              ripples,
+                              onRippleDone: removeRipple,
+                              shape: activeShape,
+                              width: iconPillWidth,
+                              height: iconPillHeight
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-6 items-center justify-center text-current", children: /* @__PURE__ */ jsx(IconContainer, { selected, badge, children: filledIcon }) })
+                  ]
+                }
+              ),
+              label && /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: shouldShowLabel && /* @__PURE__ */ jsx(
+                m.span,
+                {
+                  initial: { opacity: 0, height: 0, scale: 0.85, y: -2 },
+                  animate: { opacity: 1, height: "auto", scale: 1, y: 0 },
+                  exit: { opacity: 0, height: 0, scale: 0.85, y: -2 },
+                  transition: SPRING_TRANSITION_EXPRESSIVE,
+                  className: cn(
+                    "z-10 transition-colors duration-200 truncate px-1 inline-block overflow-hidden",
+                    selected ? "text-m3-on-surface font-medium" : "text-m3-on-surface-variant font-medium",
+                    "text-[12px] leading-4 tracking-[0.5px]"
+                  ),
+                  children: (_c = child.props.children) != null ? _c : label
+                },
+                "nav-label"
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(TouchTarget, {})
+      ] });
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          role: "menuitem",
+          "aria-current": selected ? "page" : void 0,
+          "aria-disabled": disabled ? true : void 0,
+          "aria-label": (
+            // Always provide aria-label even when label is visually hidden
+            ariaLabelProp || (typeof label === "string" ? label : void 0)
+          ),
+          onClick: handleClick,
+          onPointerDown,
+          className: itemClassName,
+          children: React61.cloneElement(child, { children: innerContent })
+        }
+      );
+    }
     return /* @__PURE__ */ jsxs(
       m.button,
       {
@@ -15853,16 +16083,13 @@ var NavigationBarItemComponent = React61.forwardRef(
         role: "menuitem",
         "aria-current": selected ? "page" : void 0,
         "aria-disabled": disabled ? true : void 0,
-        "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
+        "aria-label": (
+          // Always provide aria-label even when label is visually hidden
+          ariaLabelProp || (typeof label === "string" ? label : void 0)
+        ),
         onClick: handleClick,
         onPointerDown,
-        className: cn(
-          "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
-        ),
+        className: itemClassName,
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -15870,10 +16097,12 @@ var NavigationBarItemComponent = React61.forwardRef(
               className: cn(
                 "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"
+                isForcedHorizontal && "flex-row gap-y-0 gap-x-1.5 h-10 px-4 py-0 rounded-full w-auto",
+                // When label is hidden and not horizontal, remove bottom gap
+                !shouldShowLabel && !isForcedHorizontal && "gap-y-0"
               ),
               children: [
-                /* @__PURE__ */ jsxs(
+                !isSquare && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
@@ -15882,9 +16111,18 @@ var NavigationBarItemComponent = React61.forwardRef(
                       isForcedHorizontal && "block!"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill, {}) }),
-                      /* @__PURE__ */ jsx(HoverStateLayer, {}),
-                      /* @__PURE__ */ jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill, { shape: activeShape, width: 56, height: 40 }) }),
+                      /* @__PURE__ */ jsx(HoverStateLayer, { shape: activeShape, width: 56, height: 40 }),
+                      /* @__PURE__ */ jsx(
+                        RippleLayer,
+                        {
+                          ripples,
+                          onRippleDone: removeRipple,
+                          shape: activeShape,
+                          width: 56,
+                          height: 40
+                        }
+                      )
                     ]
                   }
                 ),
@@ -15893,23 +16131,47 @@ var NavigationBarItemComponent = React61.forwardRef(
                   {
                     className: cn(
                       "relative flex items-center justify-center shrink-0 z-10",
-                      "h-8 w-16 mx-auto rounded-full",
-                      isResponsiveHorizontal && "min-[600px]:size-6 min-[600px]:w-auto min-[600px]:h-auto",
-                      isForcedHorizontal && "size-6 w-auto h-auto"
+                      isSquare ? "mx-auto" : "h-8 w-14 mx-auto rounded-[16px]",
+                      !isSquare && isResponsiveHorizontal && "min-[600px]:size-6 min-[600px]:w-auto min-[600px]:h-auto",
+                      !isSquare && isForcedHorizontal && "size-6 w-auto h-auto"
                     ),
+                    style: isSquare ? { width: resolvedShapeSize, height: resolvedShapeSize } : void 0,
                     children: [
                       /* @__PURE__ */ jsxs(
                         "div",
                         {
                           className: cn(
                             "absolute inset-0 z-0",
-                            isResponsiveHorizontal && "min-[600px]:hidden",
-                            isForcedHorizontal && "hidden"
+                            !isSquare && isResponsiveHorizontal && "min-[600px]:hidden",
+                            !isSquare && isForcedHorizontal && "hidden"
                           ),
                           children: [
-                            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill, {}) }),
-                            /* @__PURE__ */ jsx(HoverStateLayer, {}),
-                            /* @__PURE__ */ jsx(RippleLayer, { ripples, onRippleDone: removeRipple })
+                            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                              ActivePill,
+                              {
+                                shape: activeShape,
+                                width: iconPillWidth,
+                                height: iconPillHeight
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(
+                              HoverStateLayer,
+                              {
+                                shape: activeShape,
+                                width: iconPillWidth,
+                                height: iconPillHeight
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              RippleLayer,
+                              {
+                                ripples,
+                                onRippleDone: removeRipple,
+                                shape: activeShape,
+                                width: iconPillWidth,
+                                height: iconPillHeight
+                              }
+                            )
                           ]
                         }
                       ),
@@ -15917,13 +16179,17 @@ var NavigationBarItemComponent = React61.forwardRef(
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
-                  "span",
+                label && /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: shouldShowLabel && /* @__PURE__ */ jsx(
+                  m.span,
                   {
+                    initial: { opacity: 0, height: 0, scale: 0.85, y: -2 },
+                    animate: { opacity: 1, height: "auto", scale: 1, y: 0 },
+                    exit: { opacity: 0, height: 0, scale: 0.85, y: -2 },
+                    transition: SPRING_TRANSITION_EXPRESSIVE,
                     className: cn(
-                      "z-10 transition-all duration-200 truncate px-1",
-                      selected ? "text-m3-on-surface" : "text-m3-on-surface-variant",
-                      "font-medium text-[12px] leading-4 tracking-[0.5px]"
+                      "z-10 transition-colors duration-200 truncate px-1 inline-block overflow-hidden",
+                      selected ? "text-m3-on-surface font-medium" : "text-m3-on-surface-variant font-medium",
+                      "text-[12px] leading-4 tracking-[0.5px]"
                     ),
                     children: label
                   },
@@ -15945,9 +16211,9 @@ var navContainerVariants = cva(
   {
     variants: {
       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-[calc(100%-2rem)] min-[600px]:max-w-fit h-20 min-[600px]:h-16 rounded-[48px] px-2"
+        flexible: "bottom-0 left-0 right-0 w-full min-h-16 py-1 pb-safe",
+        baseline: "bottom-0 left-0 right-0 w-full min-h-20 py-1 pb-safe",
+        xr: "bottom-6 left-1/2 -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] min-[600px]:max-w-fit min-h-20 min-[600px]:min-h-16 rounded-[48px] px-2 py-1"
       },
       position: {
         fixed: "fixed",
@@ -15969,6 +16235,9 @@ var NavigationBarComponent = React61.forwardRef(
   ({
     variant = "flexible",
     itemLayout,
+    shape,
+    labelVisibility,
+    shapeSize,
     hideOnScroll = false,
     elevated = false,
     fixed = true,
@@ -15983,6 +16252,13 @@ var NavigationBarComponent = React61.forwardRef(
     const lastScrollY = React61.useRef(
       typeof window !== "undefined" ? window.scrollY : 0
     );
+    const isSquare = isSquareShape(shape);
+    const effectiveShapeSize = shapeSize != null ? shapeSize : isSquare ? 56 : 32;
+    const computedMinHeight = React61.useMemo(() => {
+      const baseHeight = variant === "baseline" ? 80 : 64;
+      const requiredHeight = itemLayout === "horizontal" || labelVisibility === "unlabeled" ? effectiveShapeSize + 16 : effectiveShapeSize + 32;
+      return Math.max(baseHeight, requiredHeight);
+    }, [variant, itemLayout, labelVisibility, effectiveShapeSize]);
     React61.useEffect(() => {
       if (typeof window === "undefined" || !hideOnScroll) {
         setIsVisible(true);
@@ -16029,6 +16305,9 @@ var NavigationBarComponent = React61.forwardRef(
         value: {
           variant,
           itemLayout,
+          shape,
+          labelVisibility,
+          shapeSize,
           activeIndicatorTransition,
           itemClassName
         },
@@ -16039,7 +16318,7 @@ var NavigationBarComponent = React61.forwardRef(
             role: "navigation",
             "aria-label": "Main navigation",
             className: navBaseClasses,
-            style,
+            style: __spreadValues({ minHeight: computedMinHeight }, style),
             initial: false,
             animate: {
               y: isVisible ? "0%" : variant === "xr" ? "calc(100% + 40px)" : "100%"
@@ -16051,8 +16330,8 @@ var NavigationBarComponent = React61.forwardRef(
                 role: "menubar",
                 "aria-orientation": "horizontal",
                 className: cn(
-                  "flex w-full h-full mx-auto",
-                  variant === "xr" ? "gap-0 min-[600px]:gap-1.5 items-center justify-center px-1" : "max-w-7xl gap-1.5"
+                  "flex w-full h-full mx-auto items-center justify-center",
+                  variant === "xr" ? "gap-0 min-[600px]:gap-1.5 px-1" : "max-w-7xl gap-1.5"
                 ),
                 children
               }
@@ -16065,7 +16344,11 @@ var NavigationBarComponent = React61.forwardRef(
 );
 NavigationBarComponent.displayName = "NavigationBar";
 var NavigationBar = React61.memo(NavigationBarComponent);
-var NavigationRailContext = React61.createContext({ variant: "collapsed", labelVisibility: "labeled" });
+var NavigationRailContext = React61.createContext({
+  variant: "collapsed",
+  labelVisibility: "labeled",
+  activeIndicatorWidth: "hug"
+});
 var MD3_MODAL_TRANSITION = {
   type: "tween",
   ease: [0.05, 0.7, 0.1, 1],
@@ -16076,9 +16359,9 @@ var railContainerVariants = cva(
   {
     variants: {
       variant: {
-        collapsed: "items-center h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
-        expanded: "items-start h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
-        modal: "bg-m3-surface shadow-lg rounded-r-[var(--m3-shape-corner-large)] h-full pt-11 pb-4",
+        collapsed: "items-center h-full pt-11 pb-14 shadow-none bg-m3-surface rounded-none",
+        expanded: "items-start h-full pt-11 pb-14 shadow-none bg-m3-surface rounded-none",
+        modal: "bg-m3-surface shadow-lg rounded-r-[var(--m3-shape-corner-large)] h-full pt-11 pb-14",
         xr: "h-fit py-5 rounded-[48px] shadow-xl bg-m3-surface border border-white/5"
       },
       narrow: {
@@ -16121,14 +16404,28 @@ function setFocusedItem(items, index) {
     target.focus();
   }
 }
-function ActivePill2({ layoutId, disableInitial = false }) {
+function ActivePill2({
+  layoutId,
+  disableInitial = false,
+  shape = "pill",
+  width = 56,
+  height = 32
+}) {
   const { activeIndicatorTransition } = React61.useContext(NavigationRailContext);
+  const shapeStyle = getNavigationShapeStyle(shape, width, height);
   return /* @__PURE__ */ jsx(
     m.div,
     {
       layoutId,
-      className: "absolute inset-0 bg-m3-secondary-container pointer-events-none",
-      style: { borderRadius: 9999, zIndex: 0, originX: 0.5, originY: 0.5 },
+      className: cn(
+        "bg-m3-secondary-container pointer-events-none",
+        shapeStyle ? "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-none" : "absolute inset-0 rounded-full"
+      ),
+      style: __spreadValues(__spreadValues({
+        zIndex: 0,
+        originX: 0.5,
+        originY: 0.5
+      }, shapeStyle ? { width, height } : {}), shapeStyle),
       initial: disableInitial ? false : { opacity: 0, scale: 0.5 },
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0.5, transition: { duration: 0.15 } },
@@ -16136,11 +16433,42 @@ function ActivePill2({ layoutId, disableInitial = false }) {
     }
   );
 }
-function HoverStateLayer2() {
-  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-m3-on-surface opacity-0 group-hover:opacity-[0.08] transition-opacity duration-200 pointer-events-none z-0" });
+function HoverStateLayer2({
+  shape = "pill",
+  width = 56,
+  height = 32
+}) {
+  const shapeStyle = getNavigationShapeStyle(shape, width, height);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-m3-on-surface opacity-0 group-hover:opacity-[0.08] transition-opacity duration-200 pointer-events-none z-0",
+        shapeStyle ? "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-none" : "absolute inset-0 rounded-full"
+      ),
+      style: __spreadValues(__spreadValues({}, shapeStyle ? { width, height } : {}), shapeStyle)
+    }
+  );
 }
-function RippleLayer2({ ripples, onRippleDone }) {
-  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full overflow-hidden pointer-events-none z-0", children: /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone }) });
+function RippleLayer2({
+  ripples,
+  onRippleDone,
+  shape = "pill",
+  width = 56,
+  height = 32
+}) {
+  const shapeStyle = getNavigationShapeStyle(shape, width, height);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden pointer-events-none z-0",
+        shapeStyle ? "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-none" : "absolute inset-0 rounded-full"
+      ),
+      style: __spreadValues(__spreadValues({}, shapeStyle ? { width, height } : {}), shapeStyle),
+      children: /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone })
+    }
+  );
 }
 function IconContainer2({ selected, badge, children }) {
   return /* @__PURE__ */ jsxs(
@@ -16166,15 +16494,31 @@ var NavigationRailItemComponent = React61.forwardRef(
     onClick,
     disabled = false,
     badge,
+    shape: shapeProp,
+    shapeSize: shapeSizeProp,
+    activeIndicatorWidth: activeIndicatorWidthProp,
     className,
-    "aria-label": ariaLabelProp
+    "aria-label": ariaLabelProp,
+    asChild = false,
+    children
   }, ref) => {
-    const { variant, labelVisibility } = React61.useContext(
-      NavigationRailContext
-    );
+    var _a, _b, _c, _d;
+    const {
+      variant,
+      labelVisibility,
+      shape: contextShape,
+      shapeSize: contextShapeSize,
+      activeIndicatorWidth: contextActiveIndicatorWidth
+    } = React61.useContext(NavigationRailContext);
+    const activeShape = (_a = shapeProp != null ? shapeProp : contextShape) != null ? _a : "pill";
+    const isSquare = isSquareShape(activeShape);
+    const resolvedShapeSize = (_b = shapeSizeProp != null ? shapeSizeProp : contextShapeSize) != null ? _b : 56;
+    const activeIndicatorWidth = (_c = activeIndicatorWidthProp != null ? activeIndicatorWidthProp : contextActiveIndicatorWidth) != null ? _c : "hug";
     const isExpanded = variant === "expanded" || variant === "modal";
     const isModal = variant === "modal";
     const enableLayout = !isModal;
+    const isExpandedPill = isExpanded && !isSquare;
+    const expandedPillWidthClass = activeIndicatorWidth === "fill" ? "w-full" : "w-fit";
     const activePillId = `rail-pill-${React61.useId()}`;
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
@@ -16192,6 +16536,138 @@ var NavigationRailItemComponent = React61.forwardRef(
     );
     const filledIcon = cloneIconWithFill2(icon, selected);
     const labelInitial = isModal ? false : { opacity: 0, x: isExpanded ? -12 : 0, y: isExpanded ? 0 : -8 };
+    const itemClassName = cn(
+      "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none",
+      "focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2 rounded-full",
+      disabled && "pointer-events-none opacity-[0.38]",
+      isExpanded ? "w-full flex-row items-center px-3 h-14" : "w-full flex-col justify-center h-14",
+      className
+    );
+    const iconPillWidth = isSquare ? resolvedShapeSize : 56;
+    const iconPillHeight = isSquare ? resolvedShapeSize : 32;
+    if (asChild && children) {
+      const child = React61.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            layout: enableLayout,
+            className: cn(
+              "relative flex z-10",
+              isExpanded ? cn(
+                "flex-row items-center h-14 px-4 gap-x-3 rounded-full",
+                expandedPillWidthClass
+              ) : "flex-col items-center justify-center w-full gap-y-1 rounded-full"
+            ),
+            children: [
+              isExpandedPill && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                  ActivePill2,
+                  {
+                    layoutId: activePillId,
+                    disableInitial: isModal,
+                    shape: activeShape
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(HoverStateLayer2, { shape: activeShape }),
+                /* @__PURE__ */ jsx(
+                  RippleLayer2,
+                  {
+                    ripples,
+                    onRippleDone: removeRipple,
+                    shape: activeShape
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                m.div,
+                {
+                  layout: enableLayout,
+                  className: cn(
+                    "relative flex items-center justify-center shrink-0 z-10",
+                    isSquare ? "mx-auto" : isExpandedPill ? "size-6" : "h-8 w-14 mx-auto rounded-full"
+                  ),
+                  style: isSquare ? { width: resolvedShapeSize, height: resolvedShapeSize } : void 0,
+                  children: [
+                    !isExpandedPill && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                        ActivePill2,
+                        {
+                          layoutId: activePillId,
+                          disableInitial: isModal,
+                          shape: activeShape,
+                          width: iconPillWidth,
+                          height: iconPillHeight
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        HoverStateLayer2,
+                        {
+                          shape: activeShape,
+                          width: iconPillWidth,
+                          height: iconPillHeight
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        RippleLayer2,
+                        {
+                          ripples,
+                          onRippleDone: removeRipple,
+                          shape: activeShape,
+                          width: iconPillWidth,
+                          height: iconPillHeight
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      m.div,
+                      {
+                        layout: enableLayout ? "position" : false,
+                        className: "relative z-10 flex size-6 items-center justify-center text-current",
+                        children: /* @__PURE__ */ jsx(IconContainer2, { selected, badge, children: filledIcon })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: showLabel && (label || child.props.children) && /* @__PURE__ */ jsx(
+                m.span,
+                {
+                  layout: enableLayout ? "position" : false,
+                  initial: labelInitial,
+                  animate: { opacity: 1, x: 0, y: 0 },
+                  exit: { opacity: 0, transition: { duration: 0.1 } },
+                  transition: SPRING_TRANSITION,
+                  className: cn(
+                    "z-10 transition-colors duration-200 whitespace-nowrap",
+                    selected ? isExpandedPill ? "text-m3-on-secondary-container font-medium" : "text-m3-on-surface font-medium" : "text-m3-on-surface-variant font-medium",
+                    isExpanded ? "text-sm tracking-wide text-left" : "text-xs tracking-wide"
+                  ),
+                  children: (_d = child.props.children) != null ? _d : label
+                },
+                "rail-label"
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(TouchTarget, {})
+      ] });
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          role: "menuitem",
+          "aria-current": selected ? "page" : void 0,
+          "aria-disabled": disabled ? true : void 0,
+          "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
+          onClick: handleClick,
+          onPointerDown,
+          className: itemClassName,
+          tabIndex: -1,
+          children: React61.cloneElement(child, { children: innerContent })
+        }
+      ) });
+    }
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       m.button,
       {
@@ -16204,13 +16680,7 @@ var NavigationRailItemComponent = React61.forwardRef(
         "aria-label": ariaLabelProp || (typeof label === "string" ? label : void 0),
         onClick: handleClick,
         onPointerDown,
-        className: cn(
-          "group relative flex cursor-pointer transition-colors duration-200 outline-none select-none",
-          "focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2 rounded-full",
-          disabled && "pointer-events-none opacity-[0.38]",
-          isExpanded ? "w-full flex-row items-center px-3 h-14" : "w-full flex-col justify-center h-14",
-          className
-        ),
+        className: itemClassName,
         tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxs(
@@ -16219,31 +16689,71 @@ var NavigationRailItemComponent = React61.forwardRef(
               layout: enableLayout,
               className: cn(
                 "relative flex z-10",
-                isExpanded ? "flex-row items-center w-fit h-14 px-4 gap-x-3 rounded-full" : "flex-col items-center justify-center w-full gap-y-1 rounded-full"
+                isExpanded ? cn(
+                  "flex-row items-center h-14 px-4 gap-x-3 rounded-full",
+                  expandedPillWidthClass
+                ) : "flex-col items-center justify-center w-full gap-y-1 rounded-full"
               ),
               children: [
-                isExpanded && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
-                  ActivePill2,
-                  {
-                    layoutId: activePillId,
-                    disableInitial: isModal
-                  }
-                ) }),
-                isExpanded && /* @__PURE__ */ jsx(HoverStateLayer2, {}),
-                isExpanded && /* @__PURE__ */ jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
+                isExpandedPill && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                    ActivePill2,
+                    {
+                      layoutId: activePillId,
+                      disableInitial: isModal,
+                      shape: activeShape
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(HoverStateLayer2, { shape: activeShape }),
+                  /* @__PURE__ */ jsx(
+                    RippleLayer2,
+                    {
+                      ripples,
+                      onRippleDone: removeRipple,
+                      shape: activeShape
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxs(
                   m.div,
                   {
                     layout: enableLayout,
                     className: cn(
                       "relative flex items-center justify-center shrink-0 z-10",
-                      isExpanded ? "size-6" : "h-8 w-14 mx-auto"
+                      isSquare ? "mx-auto" : isExpandedPill ? "size-6" : "h-8 w-14 mx-auto rounded-full"
                     ),
-                    style: { borderRadius: 9999 },
+                    style: isSquare ? { width: resolvedShapeSize, height: resolvedShapeSize } : void 0,
                     children: [
-                      !isExpanded && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(ActivePill2, { layoutId: activePillId }) }),
-                      !isExpanded && /* @__PURE__ */ jsx(HoverStateLayer2, {}),
-                      !isExpanded && /* @__PURE__ */ jsx(RippleLayer2, { ripples, onRippleDone: removeRipple }),
+                      !isExpandedPill && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: selected && /* @__PURE__ */ jsx(
+                          ActivePill2,
+                          {
+                            layoutId: activePillId,
+                            disableInitial: isModal,
+                            shape: activeShape,
+                            width: iconPillWidth,
+                            height: iconPillHeight
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(
+                          HoverStateLayer2,
+                          {
+                            shape: activeShape,
+                            width: iconPillWidth,
+                            height: iconPillHeight
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          RippleLayer2,
+                          {
+                            ripples,
+                            onRippleDone: removeRipple,
+                            shape: activeShape,
+                            width: iconPillWidth,
+                            height: iconPillHeight
+                          }
+                        )
+                      ] }),
                       /* @__PURE__ */ jsx(
                         m.div,
                         {
@@ -16265,8 +16775,8 @@ var NavigationRailItemComponent = React61.forwardRef(
                     transition: SPRING_TRANSITION,
                     className: cn(
                       "z-10 transition-colors duration-200 whitespace-nowrap",
-                      selected ? "text-m3-on-surface" : "text-m3-on-surface-variant",
-                      isExpanded ? "text-sm font-medium tracking-wide text-left" : "text-xs font-medium tracking-wide"
+                      selected ? isExpandedPill ? "text-m3-on-secondary-container font-medium" : "text-m3-on-surface font-medium" : "text-m3-on-surface-variant font-medium",
+                      isExpanded ? "text-sm tracking-wide text-left" : "text-xs tracking-wide"
                     ),
                     children: label
                   },
@@ -16326,6 +16836,9 @@ var NavigationRailComponent = React61.forwardRef(
   ({
     variant = "collapsed",
     labelVisibility = "labeled",
+    shape,
+    shapeSize,
+    activeIndicatorWidth = "hug",
     header,
     fab,
     fabPlacement = "contained",
@@ -16339,6 +16852,7 @@ var NavigationRailComponent = React61.forwardRef(
     style
   }, ref) => {
     const isModal = variant === "modal";
+    const isExpanded = variant === "expanded" || variant === "modal";
     const isXr = variant === "xr";
     const isSpatial = isXr && fabPlacement === "spatialized";
     const applyAnimation = !isXr || !isSpatial;
@@ -16380,10 +16894,12 @@ var NavigationRailComponent = React61.forwardRef(
         transition: isModal ? MD3_MODAL_TRANSITION : SPRING_TRANSITION,
         children: [
           (header || fab && !isSpatial) && /* @__PURE__ */ jsxs(
-            "div",
+            m.div,
             {
+              layout: true,
               className: cn(
-                "flex w-full flex-col items-center justify-start shrink-0 empty:hidden",
+                "flex w-full flex-col justify-start shrink-0 empty:hidden",
+                isExpanded ? "items-start px-3" : "items-center",
                 navHeaderSpacing
               ),
               children: [
@@ -16449,6 +16965,9 @@ var NavigationRailComponent = React61.forwardRef(
     const contextValue = {
       variant,
       labelVisibility,
+      shape,
+      shapeSize,
+      activeIndicatorWidth,
       activeIndicatorTransition
     };
     if (isModal) {
@@ -23186,6 +23705,12 @@ var BottomDockedToolbar = React61.forwardRef(
 BottomDockedToolbar.displayName = "BottomDockedToolbar";
 
 // src/ui/toolbar/toolbar-tokens.ts
+var TOOLBAR_SPRING_TRANSITION = {
+  type: "spring",
+  stiffness: 300,
+  damping: 30,
+  mass: 0.8
+};
 var FloatingToolbarTokens = {
   ContainerBetweenSpace: 4,
   ContainerHeight: 64};
@@ -23215,6 +23740,10 @@ var ToolbarToggleButtonTokens = {
   PaddingX: 16,
   Gap: 8
 };
+var ToolbarToggleButtonRadiusTokens = {
+  pillRadius: 24,
+  pressedRadius: 12
+};
 var ALIGNMENT_CLASS = {
   start: "justify-start",
   center: "justify-center",
@@ -23617,13 +24146,17 @@ var ToolbarIconButton = React61.forwardRef(
       toolbarSize = "default",
       selected,
       asChild,
-      className
+      className,
+      transition,
+      whileTap
     } = _b, props = __objRest(_b, [
       "emphasis",
       "toolbarSize",
       "selected",
       "asChild",
-      "className"
+      "className",
+      "transition",
+      "whileTap"
     ]);
     const context = useToolbarContext();
     const widthClass = TOOLBAR_ICON_BUTTON_WIDTH[toolbarSize];
@@ -23634,16 +24167,20 @@ var ToolbarIconButton = React61.forwardRef(
     } : {
       variant: "default"
     };
+    const motionProps = asChild ? __spreadValues(__spreadValues({}, transition !== void 0 && { transition }), whileTap !== void 0 && { whileTap }) : {
+      transition: transition != null ? transition : TOOLBAR_SPRING_TRANSITION,
+      whileTap: whileTap != null ? whileTap : { scale: 0.95 }
+    };
     return /* @__PURE__ */ jsx(
       IconButton,
-      __spreadValues(__spreadProps(__spreadValues({
+      __spreadValues(__spreadProps(__spreadValues(__spreadValues({
         ref,
         asChild,
         colorStyle,
         size: "md",
         shape: "round",
         iconSize: ToolbarIconButtonTokens.IconSize
-      }, iconButtonProps), {
+      }, motionProps), iconButtonProps), {
         className: cn(
           "h-[48px]",
           widthClass,
@@ -23753,29 +24290,34 @@ var ToolbarToggleButton = React61.forwardRef(
       selected = false,
       icon,
       children,
-      pressScale = 0.95,
-      pressBounceOffset = 6,
+      pressExpand = true,
+      pressExpandRatio = 0.06,
       ripple = true,
       asChild = false,
       className,
       type = "button",
       disabled,
-      onPointerDown: onPointerDownProp
+      onPointerDown: onPointerDownProp,
+      onPointerUp: onPointerUpProp,
+      onPointerLeave: onPointerLeaveProp
     } = _b, props = __objRest(_b, [
       "emphasis",
       "selected",
       "icon",
       "children",
-      "pressScale",
-      "pressBounceOffset",
+      "pressExpand",
+      "pressExpandRatio",
       "ripple",
       "asChild",
       "className",
       "type",
       "disabled",
-      "onPointerDown"
+      "onPointerDown",
+      "onPointerUp",
+      "onPointerLeave"
     ]);
     const context = useToolbarContext();
+    const [isPressed, setIsPressed] = React61.useState(false);
     const {
       ripples,
       onPointerDown: handleRipplePointerDown,
@@ -23785,6 +24327,7 @@ var ToolbarToggleButton = React61.forwardRef(
     });
     const handlePointerDown = React61.useCallback(
       (e) => {
+        setIsPressed(true);
         if (!disabled && ripple) {
           handleRipplePointerDown(e);
         }
@@ -23792,7 +24335,21 @@ var ToolbarToggleButton = React61.forwardRef(
       },
       [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 handlePointerUp = React61.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerUpProp == null ? void 0 : onPointerUpProp(e);
+      },
+      [onPointerUpProp]
+    );
+    const handlePointerLeave = React61.useCallback(
+      (e) => {
+        setIsPressed(false);
+        onPointerLeaveProp == null ? void 0 : onPointerLeaveProp(e);
+      },
+      [onPointerLeaveProp]
+    );
+    const baseClasses = "relative overflow-hidden inline-flex items-center justify-center min-w-[95px] h-[48px] px-4 text-sm font-medium 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",
@@ -23804,27 +24361,17 @@ var ToolbarToggleButton = React61.forwardRef(
       context == null ? void 0 : context.itemClassName,
       className
     );
-    const whileTapConfig = React61.useMemo(
+    const animateConfig = React61.useMemo(
       () => ({
-        scale: pressScale,
-        x: pressBounceOffset ? [
-          0,
-          -pressBounceOffset,
-          pressBounceOffset,
-          -pressBounceOffset / 2,
-          pressBounceOffset / 2,
-          0
-        ] : 0
+        scaleX: pressExpand && isPressed ? 1 + pressExpandRatio : 1,
+        borderRadius: isPressed ? ToolbarToggleButtonRadiusTokens.pressedRadius : ToolbarToggleButtonRadiusTokens.pillRadius
       }),
-      [pressScale, pressBounceOffset]
+      [pressExpand, pressExpandRatio, isPressed]
     );
     const transitionConfig = React61.useMemo(
       () => ({
-        scale: FAST_SPATIAL_SPRING,
-        x: {
-          duration: 0.35,
-          ease: "easeInOut"
-        }
+        scaleX: FAST_SPATIAL_SPRING,
+        borderRadius: BUTTON_RADIUS_SPRING
       }),
       []
     );
@@ -23878,7 +24425,9 @@ var ToolbarToggleButton = React61.forwardRef(
           ref,
           "aria-pressed": selected,
           className: combinedClassName,
-          onPointerDown: handlePointerDown
+          onPointerDown: handlePointerDown,
+          onPointerUp: handlePointerUp,
+          onPointerLeave: handlePointerLeave
         }, strippedProps), {
           children: React61.cloneElement(child, { children: innerChildContent })
         })
@@ -23891,9 +24440,13 @@ var ToolbarToggleButton = React61.forwardRef(
         type,
         "aria-pressed": selected,
         disabled,
-        whileTap: whileTapConfig,
+        animate: animateConfig,
         transition: transitionConfig,
+        initial: false,
+        style: { transformOrigin: "center" },
         onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
         className: combinedClassName
       }, props), {
         children: [