@bug-on/m3-expressive 1.3.3 → 1.3.5

package/dist/navigation.mjs

@@ -52,7 +52,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%)";
   }
@@ -69,11 +69,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,
@@ -85,7 +90,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,
@@ -1133,7 +1138,7 @@ var IconComponent = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -5947,6 +5952,7 @@ var NavigationRailComponent = React39.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",
@@ -6281,6 +6287,7 @@ function SearchBar({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -6343,7 +6350,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
         ),
@@ -6383,7 +6390,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",
@@ -8145,6 +8152,7 @@ function SearchViewDocked({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -8201,7 +8209,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",
@@ -8296,6 +8304,7 @@ function SearchViewFullScreen({
   onSearch,
   active,
   onActiveChange,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -8362,7 +8371,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",
@@ -8463,6 +8472,8 @@ function SearchComponent({
   variant = "docked",
   styleType = "contained",
   hasGap = false,
+  showLeadingIcon = true,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -8491,6 +8502,7 @@ function SearchComponent({
     onSearch,
     active,
     onActiveChange,
+    showLeadingIcon,
     leadingIcon,
     trailingIcon,
     avatar,
@@ -8507,6 +8519,7 @@ function SearchComponent({
     variant === "fullscreen" ? /* @__PURE__ */ jsx(
       SearchViewFullScreen,
       __spreadProps(__spreadValues({}, sharedProps), {
+        showCloseButton,
         styleType,
         viewClassName,
         children