@bug-on/m3-expressive 1.3.4 → 1.3.5

package/dist/index.mjs

@@ -256,7 +256,8 @@ function schemeToCssVariables(scheme) {
   return result;
 }
 function MaterialSymbolsPreconnect({
-  variants = ["outlined"]
+  variants = ["rounded"],
+  display = "block"
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
@@ -271,7 +272,7 @@ function MaterialSymbolsPreconnect({
     variants.includes("outlined") && /* @__PURE__ */ jsx(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=${display}`,
         rel: "stylesheet",
         precedence: "default"
       }
@@ -279,7 +280,7 @@ function MaterialSymbolsPreconnect({
     variants.includes("rounded") && /* @__PURE__ */ jsx(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=${display}`,
         rel: "stylesheet",
         precedence: "default"
       }
@@ -287,7 +288,7 @@ function MaterialSymbolsPreconnect({
     variants.includes("sharp") && /* @__PURE__ */ jsx(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=${display}`,
         rel: "stylesheet",
         precedence: "default"
       }
@@ -2835,7 +2836,7 @@ function getMaskGradient(direction) {
     case "bottom":
       return "linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
     case "both":
-      return "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0) 100%)";
+      return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 85%, rgba(0, 0, 0, 1) 100%)";
     default:
       return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
   }
@@ -2852,11 +2853,16 @@ function FadingBlurMask({
   const shouldReduceMotion = useReducedMotion();
   const activeBlur = shouldReduceMotion ? 0 : blurIntensity;
   const maskGradient = getMaskGradient(direction);
+  const isFullHeight = direction === "both" || blurHeight === "100%";
+  const computedHeight = isFullHeight ? "100%" : typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight;
   const maskStyle = __spreadValues({
     position: "absolute",
-    inset: 0,
+    top: direction === "bottom" && !isFullHeight ? "auto" : 0,
+    bottom: direction === "top" && !isFullHeight ? "auto" : 0,
+    left: 0,
+    right: 0,
     pointerEvents: "none",
-    height: typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight,
+    height: computedHeight,
     backdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
     WebkitBackdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
     maskImage: maskGradient,
@@ -2868,7 +2874,7 @@ function FadingBlurMask({
     {
       "aria-hidden": "true",
       className: cn(
-        "absolute inset-0 pointer-events-none z-0 rounded-[inherit]",
+        "absolute pointer-events-none z-10 rounded-[inherit]",
         className
       ),
       style: maskStyle,
@@ -3996,7 +4002,7 @@ var IconComponent = React67.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -8331,6 +8337,7 @@ var ExtendedFABComponent = React67.forwardRef(
       onClick,
       onKeyDown,
       layoutId,
+      layout,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -8352,6 +8359,7 @@ var ExtendedFABComponent = React67.forwardRef(
       "onClick",
       "onKeyDown",
       "layoutId",
+      "layout",
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
@@ -8376,6 +8384,13 @@ var ExtendedFABComponent = React67.forwardRef(
     const colors = (_a2 = COLOR_CLASSES[colorStyle]) != null ? _a2 : COLOR_CLASSES.primary;
     const radiusConfig = (_b2 = MORPH_RADIUS[size]) != null ? _b2 : MORPH_RADIUS.sm;
     const sizeIcon = (_c = SIZE_ICON[size]) != null ? _c : SIZE_ICON.sm;
+    const motionRadius = useMotionValue(radiusConfig.default);
+    React67.useEffect(() => {
+      const controls = animate(motionRadius, radiusConfig.default, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
+        type: "spring"
+      }));
+      return () => controls.stop();
+    }, [radiusConfig.default, motionRadius]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
@@ -8470,13 +8485,25 @@ var ExtendedFABComponent = React67.forwardRef(
         {
           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
+          animate: {
+            opacity: 1,
+            width: "auto",
+            transition: {
+              width: SPRING_TRANSITION,
+              opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
+              layout: SPRING_TRANSITION
+            }
           },
-          className: "overflow-hidden whitespace-nowrap",
+          exit: {
+            opacity: 0,
+            width: 0,
+            transition: {
+              opacity: { duration: 0.1, ease: "linear" },
+              width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              layout: SPRING_TRANSITION
+            }
+          },
+          className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
           children: label
         },
         "label"
@@ -8507,7 +8534,7 @@ var ExtendedFABComponent = React67.forwardRef(
       __spreadProps(__spreadValues({
         ref: localRef,
         type: "button",
-        layout: true,
+        layout: layout !== void 0 ? layout : "position",
         layoutId,
         "aria-label": ariaLabel || label,
         "aria-busy": loading || void 0,
@@ -8515,21 +8542,23 @@ var ExtendedFABComponent = React67.forwardRef(
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
-        style,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: motionRadius
+        }),
         initial: {
           scale: 0.6,
-          opacity: 0,
-          borderRadius: radiusConfig.default
+          opacity: 0
         },
         animate: {
           scale: 1,
-          opacity: 1,
-          borderRadius: radiusConfig.default
+          opacity: 1
         },
         exit: { scale: 0.6, opacity: 0 },
-        whileTap: { borderRadius: radiusConfig.pressed },
+        whileTap: {
+          borderRadius: radiusConfig.pressed,
+          transition: { borderRadius: SPRING_TRANSITION_FAST }
+        },
         transition: {
-          borderRadius: { type: "spring", stiffness: 500, damping: 30 },
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.2, ease: "linear" },
           layout: SPRING_TRANSITION
@@ -8561,6 +8590,18 @@ var SIZE_TEXT_CLASS = {
   lg: "text-xl  font-semibold",
   xl: "text-2xl font-semibold"
 };
+var SIZE_PADDING_COLLAPSED = {
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-8",
+  xl: "px-12"
+};
+var SIZE_PADDING_EXTENDED = {
+  sm: "pl-2 pr-4",
+  md: "pl-4 pr-6",
+  lg: "pl-8 pr-8",
+  xl: "pl-12 pr-10"
+};
 var MORPH_RADIUS2 = {
   sm: { default: 12, pressed: 8, extended: 12, extended_pressed: 8 },
   md: { default: 16, pressed: 10, extended: 16, extended_pressed: 10 },
@@ -8652,7 +8693,7 @@ var FABComponent = React67.forwardRef(
       "layout",
       "layoutId"
     ]);
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c, _d, _e, _f;
     const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
     const radiusConfig = (_b2 = MORPH_RADIUS2[size]) != null ? _b2 : MORPH_RADIUS2.md;
     const animateRadius = extended ? radiusConfig.extended : radiusConfig.default;
@@ -8737,22 +8778,37 @@ var FABComponent = React67.forwardRef(
         m.span,
         {
           layout: "position",
-          initial: { width: 0, opacity: 0 },
-          animate: { width: "auto", opacity: 1 },
-          exit: { width: 0, opacity: 0 },
-          transition: {
-            opacity: { duration: 0.15, ease: "linear" },
-            width: SPRING_TRANSITION,
-            layout: SPRING_TRANSITION
+          initial: { width: 0, opacity: 0, marginLeft: 0 },
+          animate: {
+            width: "auto",
+            opacity: 1,
+            marginLeft: 12,
+            transition: {
+              width: SPRING_TRANSITION,
+              marginLeft: SPRING_TRANSITION,
+              opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
+              layout: SPRING_TRANSITION
+            }
+          },
+          exit: {
+            width: 0,
+            opacity: 0,
+            marginLeft: 0,
+            transition: {
+              opacity: { duration: 0.1, ease: "linear" },
+              width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              marginLeft: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              layout: SPRING_TRANSITION
+            }
           },
-          className: "overflow-hidden whitespace-nowrap ml-3",
+          className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
           children: labelContent
         },
         "label"
       ) })
     ] });
     const containerClassName = cn(
-      "relative shrink-0 inline-flex items-center justify-center",
+      "relative shrink-0 inline-flex items-center justify-start",
       "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",
@@ -8761,21 +8817,62 @@ var FABComponent = React67.forwardRef(
       colors.text,
       lowered ? "shadow-sm" : colors.shadow,
       (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-      extended && "w-auto pl-4 pr-6",
+      extended ? cn("w-auto", (_e = SIZE_PADDING_EXTENDED[size]) != null ? _e : "pl-4 pr-6") : (_f = SIZE_PADDING_COLLAPSED[size]) != null ? _f : "px-4",
       SIZE_TEXT_CLASS[size],
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
+    const motionRadius = useMotionValue(animateRadius);
+    const asChildRef = React67.useRef(null);
+    const mergedRef = React67.useCallback(
+      (node) => {
+        asChildRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    React67.useEffect(() => {
+      if (!asChild) return;
+      return motionRadius.on("change", (v) => {
+        if (asChildRef.current)
+          asChildRef.current.style.borderRadius = `${v}px`;
+      });
+    }, [motionRadius, asChild]);
+    React67.useEffect(() => {
+      const controls = animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
+        type: "spring"
+      }));
+      return () => controls.stop();
+    }, [animateRadius, motionRadius]);
+    const handleAsChildPointerDown = React67.useCallback(
+      (e) => {
+        onPointerDown(e);
+        animate(motionRadius, pressedRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
+          type: "spring"
+        }));
+      },
+      [onPointerDown, motionRadius, pressedRadius]
+    );
+    const handleAsChildPointerUp = React67.useCallback(() => {
+      animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
+        type: "spring"
+      }));
+    }, [motionRadius, animateRadius]);
     const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsx(
       Slot,
       __spreadProps(__spreadValues({
-        ref,
+        ref: mergedRef,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
         onClick: handleClick,
-        onPointerDown,
+        onPointerDown: handleAsChildPointerDown,
+        onPointerUp: handleAsChildPointerUp,
+        onPointerLeave: handleAsChildPointerUp,
+        onPointerCancel: handleAsChildPointerUp,
         onKeyDown: handleKeyDown,
         style: __spreadProps(__spreadValues({}, style), {
           borderRadius: `${animateRadius}px`
@@ -8792,7 +8889,7 @@ var FABComponent = React67.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        layout: layout !== void 0 ? layout : true,
+        layout: layout !== void 0 ? layout : "position",
         layoutId,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
@@ -8800,17 +8897,20 @@ var FABComponent = React67.forwardRef(
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
-        style,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: motionRadius
+        }),
         initial: {
           scale: 0.5,
-          opacity: 0,
-          borderRadius: animateRadius
+          opacity: 0
         },
-        animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
+        animate: { scale: 1, opacity: 1 },
         exit: { scale: 0.5, opacity: 0 },
-        whileTap: { borderRadius: pressedRadius },
+        whileTap: {
+          borderRadius: pressedRadius,
+          transition: { borderRadius: SPRING_TRANSITION_FAST }
+        },
         transition: {
-          borderRadius: SPRING_TRANSITION_FAST,
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.25, ease: "easeOut" },
           layout: SPRING_TRANSITION
@@ -13287,7 +13387,7 @@ var CalendarGrid = ({
   ] });
 };
 CalendarGrid.displayName = "CalendarGrid";
-var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary";
+var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary whitespace-nowrap select-none min-w-0";
 var CalendarHeader = ({
   displayedMonthMs,
   activeSelector,
@@ -13313,57 +13413,70 @@ var CalendarHeader = ({
     timeZone: "UTC"
   }).format(date);
   const yearLabel = String(date.getUTCFullYear());
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-6 pb-4 pt-5", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "mb-2 leading-tight text-(length:--md-typescale-headline-large-size,32px) font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant", children: headline }),
-    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-10 items-center gap-0.5", children: [
-      activeSelector === null && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: onPrev,
-          "aria-label": "Previous month",
-          disabled: !canNavigatePrev,
-          size: "xs",
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onToggleSelector("month"),
-          "aria-expanded": activeSelector === "month",
-          "aria-controls": "date-picker-selection",
-          className: cn(
-            selectorClassName,
-            activeSelector === "month" && "bg-m3-on-surface/8"
-          ),
-          children: [
-            monthLabel,
-            /* @__PURE__ */ jsx(
-              Icon,
-              {
-                name: "arrow_drop_down",
-                className: cn(
-                  "text-[20px] transition-transform duration-200",
-                  activeSelector === "month" && "rotate-180"
-                )
-              }
-            )
-          ]
-        }
-      ),
-      activeSelector === null && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: onNext,
-          "aria-label": "Next month",
-          disabled: !canNavigateNext,
-          size: "xs",
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 sm:px-6 pb-3 pt-5 w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant truncate", children: title }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mb-2 leading-tight text-[26px] sm:text-[32px] font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant truncate",
+        title: typeof headline === "string" ? headline : void 0,
+        children: headline
+      }
+    ),
+    displayMode === "picker" && /* @__PURE__ */ jsxs("div", { className: "flex min-h-10 items-center justify-between gap-0.5 w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 min-w-0 shrink", children: [
+        activeSelector === null && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onPrev,
+            "aria-label": "Previous month",
+            disabled: !canNavigatePrev,
+            size: "xs",
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleSelector("month"),
+            "aria-expanded": activeSelector === "month",
+            "aria-controls": "date-picker-selection",
+            className: cn(
+              selectorClassName,
+              "min-w-0 max-w-[125px] shrink",
+              activeSelector === "month" && "bg-m3-on-surface/8"
+            ),
+            title: monthLabel,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: monthLabel }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "arrow_drop_down",
+                  className: cn(
+                    "text-[20px] shrink-0 transition-transform duration-200",
+                    activeSelector === "month" && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        activeSelector === null && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onNext,
+            "aria-label": "Next month",
+            disabled: !canNavigateNext,
+            size: "xs",
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5 shrink-0", children: [
         activeSelector === null && /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -13371,6 +13484,7 @@ var CalendarHeader = ({
             "aria-label": "Previous year",
             disabled: !canNavigatePreviousYear,
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left" })
           }
         ),
@@ -13383,16 +13497,18 @@ var CalendarHeader = ({
             "aria-controls": "date-picker-selection",
             className: cn(
               selectorClassName,
+              "shrink-0",
               activeSelector === "year" && "bg-m3-on-surface/8"
             ),
+            title: yearLabel,
             children: [
-              yearLabel,
+              /* @__PURE__ */ jsx("span", { children: yearLabel }),
               /* @__PURE__ */ jsx(
                 Icon,
                 {
                   name: "arrow_drop_down",
                   className: cn(
-                    "text-[20px] transition-transform duration-200",
+                    "text-[20px] shrink-0 transition-transform duration-200",
                     activeSelector === "year" && "rotate-180"
                   )
                 }
@@ -13407,6 +13523,7 @@ var CalendarHeader = ({
             "aria-label": "Next year",
             disabled: !canNavigateNextYear,
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right" })
           }
         ),
@@ -13416,6 +13533,7 @@ var CalendarHeader = ({
             onClick: onToggleMode,
             "aria-label": "Switch to text input",
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsx(Icon, { name: "keyboard" })
           }
         )
@@ -13427,7 +13545,7 @@ var CalendarHeader = ({
         onClick: onToggleMode,
         "aria-label": "Switch to calendar",
         size: "xs",
-        className: "self-end",
+        className: "self-end shrink-0",
         children: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" })
       }
     ),
@@ -13474,14 +13592,14 @@ var MonthPickerList = ({
             onClick: () => onMonthSelect(month),
             className: cn(
               "flex min-h-12 w-full items-center gap-4 px-6 text-left",
-              "text-[length:var(--md-typescale-body-large-size,16px)]",
+              "text-(length:--md-typescale-body-large-size,16px)",
               "text-m3-on-surface transition-m3-fast-effects",
               "hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary",
               isSelected && "bg-m3-secondary-container text-m3-on-secondary-container"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "w-6", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-[20px]" }) }),
-              getMonthLabel(month, locale.locale)
+              /* @__PURE__ */ jsx("span", { className: "w-6 shrink-0", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-[20px]" }) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: getMonthLabel(month, locale.locale) })
             ]
           },
           month
@@ -13559,7 +13677,9 @@ var DatePicker = ({
   showModeToggle = true,
   title,
   headline,
-  className
+  className,
+  width,
+  maxWidth
 }) => {
   const {
     selectedDateMs,
@@ -13640,7 +13760,10 @@ var DatePicker = ({
     "fieldset",
     {
       className: cn("flex flex-col select-none", className),
-      style: { width: "min(100%, 360px)" },
+      style: {
+        width: typeof width === "number" ? `${width}px` : width != null ? width : "min(100%, 360px)",
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
       "aria-label": computedAriaLabel,
       children: [
         /* @__PURE__ */ jsx("legend", { className: "sr-only", children: computedAriaLabel }),
@@ -14081,7 +14204,9 @@ var DatePickerDialog = ({
   dismissButton,
   children,
   className,
-  title = "Select date"
+  title = "Select date",
+  width,
+  maxWidth
 }) => {
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => !v && onDismiss(), children: /* @__PURE__ */ jsxs(DialogPortal, { open, children: [
     /* @__PURE__ */ jsx(RadixDialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
@@ -14117,7 +14242,10 @@ var DatePickerDialog = ({
               "elevation-3",
               className
             ),
-            style: { width: "min(calc(100vw - 32px), 360px)" },
+            style: {
+              width: typeof width === "number" ? `${width}px` : width != null ? width : "min(calc(100vw - 32px), 360px)",
+              maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+            },
             initial: PICKER_CONTENT_ANIM.initial,
             animate: PICKER_CONTENT_ANIM.animate,
             exit: PICKER_CONTENT_ANIM.exit,
@@ -14141,7 +14269,9 @@ var DateRangePicker = ({
   state,
   showModeToggle = false,
   title,
-  className
+  className,
+  width,
+  maxWidth
 }) => {
   const {
     selectedStartMs,
@@ -14213,7 +14343,10 @@ var DateRangePicker = ({
     "fieldset",
     {
       className: cn("flex flex-col select-none", className),
-      style: { width: "min(100%, 360px)" },
+      style: {
+        width: typeof width === "number" ? `${width}px` : width != null ? width : "min(100%, 360px)",
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
       "aria-label": computedAriaLabel,
       children: [
         /* @__PURE__ */ jsx("legend", { className: "sr-only", children: computedAriaLabel }),
@@ -15560,13 +15693,16 @@ var useTimePickerState = (options) => {
 };
 function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4) {
   if (startX >= endX) return "";
+  const totalWidth = endX - startX;
   const halfCycle = wavelength / 2;
-  const numHalfCycles = Math.ceil((endX - startX) / halfCycle);
-  const cpDistanceY = amplitude * (4 / 3);
+  const numHalfCycles = Math.max(1, Math.round(totalWidth / halfCycle));
+  const actualHalfCycle = totalWidth / numHalfCycles;
+  const scale = Math.min(1, actualHalfCycle / halfCycle);
+  const cpDistanceY = amplitude * (4 / 3) * scale;
   let d = `M ${startX},${yCenter}`;
   for (let i = 0; i < numHalfCycles; i++) {
-    const x0 = startX + i * halfCycle;
-    const x1 = Math.min(startX + (i + 1) * halfCycle, endX);
+    const x0 = startX + i * actualHalfCycle;
+    const x1 = i === numHalfCycles - 1 ? endX : startX + (i + 1) * actualHalfCycle;
     const peak = i % 2 === 0 ? yCenter - cpDistanceY : yCenter + cpDistanceY;
     const segLen = x1 - x0;
     const cp1x = x0 + segLen / 3;
@@ -15584,7 +15720,7 @@ var DividerImpl = React67.forwardRef(
       insetStart = "standard",
       waveConfig,
       decorative = false,
-      animate: animate5 = true,
+      animate: animate7 = true,
       className,
       style
     } = _b, props = __objRest(_b, [
@@ -15600,7 +15736,7 @@ var DividerImpl = React67.forwardRef(
     ]);
     var _a2, _b2, _c;
     const reducedMotion = useReducedMotion();
-    const shouldAnimate = animate5 && !reducedMotion;
+    const shouldAnimate = animate7 && !reducedMotion;
     const effectiveShape = shape === "wavy" && orientation === "vertical" ? "flat" : shape;
     if (shape === "wavy" && orientation === "vertical") {
       console.warn(
@@ -17341,7 +17477,7 @@ var ListItemImpl = React67.forwardRef(
               "cursor-grab active:cursor-grabbing text-m3-on-surface-variant p-2 -mr-2"
             )
           }, attributes), listeners), {
-            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-[24px]", children: "drag_handle" })
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[24px]", children: "drag_handle" })
           })
         );
       }
@@ -18694,6 +18830,7 @@ var NavigationRailComponent = React67.forwardRef(
             m.div,
             {
               layout: true,
+              transition: SPRING_TRANSITION,
               className: cn(
                 "flex w-full flex-col justify-start shrink-0 empty:hidden",
                 isExpanded ? "items-start px-3" : "items-center",
@@ -19000,6 +19137,7 @@ function SearchBar({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19062,7 +19200,7 @@ function SearchBar({
         layoutId: shouldReduceMotion ? void 0 : searchId,
         transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
         className: cn(
-          "relative group select-none",
+          "relative group select-none rounded-full",
           SEARCH_ELEVATION.level3,
           className
         ),
@@ -19102,7 +19240,7 @@ function SearchBar({
               "aria-label": ariaLabel,
               className: "relative flex h-full items-center gap-2 rounded-full px-4",
               children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsx(
+                showLeadingIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "flex shrink-0 items-center justify-center",
@@ -19309,6 +19447,7 @@ function SearchViewDocked({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19365,7 +19504,7 @@ function SearchViewDocked({
               className: "flex items-center gap-2 px-4",
               style: { height: SearchTokens.heights.dockedHeader },
               children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsx(
+                showLeadingIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "flex shrink-0 items-center justify-center",
@@ -19460,6 +19599,7 @@ function SearchViewFullScreen({
   onSearch,
   active,
   onActiveChange,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19526,7 +19666,7 @@ function SearchViewFullScreen({
               className: "flex shrink-0 items-center gap-2 px-4",
               style: { height: SearchTokens.heights.fullScreenHeader },
               children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsx(
+                showCloseButton && /* @__PURE__ */ jsx(
                   IconButton,
                   {
                     size: "sm",
@@ -19627,6 +19767,8 @@ function SearchComponent({
   variant = "docked",
   styleType = "contained",
   hasGap = false,
+  showLeadingIcon = true,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19655,6 +19797,7 @@ function SearchComponent({
     onSearch,
     active,
     onActiveChange,
+    showLeadingIcon,
     leadingIcon,
     trailingIcon,
     avatar,
@@ -19671,6 +19814,7 @@ function SearchComponent({
     variant === "fullscreen" ? /* @__PURE__ */ jsx(
       SearchViewFullScreen,
       __spreadProps(__spreadValues({}, sharedProps), {
+        showCloseButton,
         styleType,
         viewClassName,
         children
@@ -20966,7 +21110,7 @@ function useShapeMorph({
     currentProgressRef.current = p;
     setClipPath(interpolatePath(morph, p, width, height));
   }, [scrollProgress, morphOn, morph, width, height]);
-  const animate5 = useCallback(
+  const animate7 = useCallback(
     (timestamp) => {
       if (!morph) return;
       const elapsed = timestamp - startTimeRef.current;
@@ -20977,7 +21121,7 @@ function useShapeMorph({
       currentProgressRef.current = progress;
       setClipPath(interpolatePath(morph, progress, width, height));
       if (rawT < 1) {
-        animRef.current = requestAnimationFrame(animate5);
+        animRef.current = requestAnimationFrame(animate7);
       } else {
         animRef.current = null;
       }
@@ -20996,9 +21140,9 @@ function useShapeMorph({
       startProgressRef.current = currentProgressRef.current;
       targetProgressRef.current = toProgress;
       startTimeRef.current = performance.now();
-      animRef.current = requestAnimationFrame(animate5);
+      animRef.current = requestAnimationFrame(animate7);
     },
-    [morph, animate5, width, height]
+    [morph, animate7, width, height]
   );
   useEffect(() => {
     return () => {