@rific/auto-paper 0.12.2 → 0.12.3

package/dist/index.js

@@ -750,6 +750,8 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
+var AnimatedBlurView = import_react_native5.Animated.createAnimatedComponent(BlurView);
+var AnimatedPressable = import_react_native5.Animated.createAnimatedComponent(import_react_native5.Pressable);
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
@@ -793,9 +795,16 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  const web = import_react_native5.Platform.OS === "web";
+  const fade = { opacity };
+  const styleOpacity = import_react_native5.StyleSheet.flatten(style)?.opacity;
+  const cardFade = typeof styleOpacity === "number" ? { opacity: import_react_native5.Animated.multiply(opacity, styleOpacity) } : fade;
+  const Backdrop = web ? AnimatedPressable : import_react_native5.Pressable;
+  const Card = web ? AnimatedBlurView : BlurView;
+  const card = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { blur, style: [styles2.card, { borderRadius }, style, web && cardFade], testID: `${testID}-surface`, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, !web && fade], testID, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Backdrop, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }, web && fade], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: card }) : card })
   ] }) });
 }
 DialogComponent.Title = import_react_native_paper6.Dialog.Title;
@@ -1036,25 +1045,45 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 }
 
 // src/components/Menu.tsx
+var import_react11 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var ANIMATION_DURATION2 = 250;
+var EASING = import_react_native9.Easing.bezier(0.4, 0, 0.2, 1);
+var DEFAULT_ELEVATION = 2;
+var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
+var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
+var AnimatedBlurView2 = import_react_native9.Animated.createAnimatedComponent(BlurView);
+var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
+  const { animation, roundness } = (0, import_react_native_paper15.useTheme)(themeOverrides);
+  const [opacity] = (0, import_react11.useState)(() => new import_react_native9.Animated.Value(0));
+  const [closing, setClosing] = (0, import_react11.useState)(false);
+  if (!visible && !closing) setClosing(true);
+  (0, import_react11.useEffect)(() => {
+    import_react_native9.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  }, [animation.scale, closing, opacity]);
+  const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+};
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
+  const web = import_react_native9.Platform.OS === "web";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: import_react_native_paper15.Menu.Item
 });
 var styles5 = import_react_native9.StyleSheet.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
+  content: { backgroundColor: "transparent", paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextInput = (0, import_react11.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
@@ -1085,10 +1114,10 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeBridgeProps.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return (0, import_react12.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return (0, import_react13.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
 }
 
 // src/utils/getThirdColor.ts

package/dist/index.mjs

@@ -416,7 +416,7 @@ import { Icon, TouchableRipple, useTheme as useTheme4 } from "react-native-paper
 
 // src/components/Dialog.tsx
 import React, { useEffect as useEffect3, useState as useState3 } from "react";
-import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Animated, BackHandler, Easing, Platform as Platform2, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Dialog as PaperDialog, Portal as Portal2, useTheme as useTheme3 } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -667,6 +667,8 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
+var AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
@@ -710,9 +712,16 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ jsx6(Portal2, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ jsx6(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ jsx6(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  const web = Platform2.OS === "web";
+  const fade = { opacity };
+  const styleOpacity = StyleSheet3.flatten(style)?.opacity;
+  const cardFade = typeof styleOpacity === "number" ? { opacity: Animated.multiply(opacity, styleOpacity) } : fade;
+  const Backdrop = web ? AnimatedPressable : Pressable;
+  const Card = web ? AnimatedBlurView : BlurView;
+  const card = /* @__PURE__ */ jsx6(Card, { blur, style: [styles2.card, { borderRadius }, style, web && cardFade], testID: `${testID}-surface`, children: content });
+  return /* @__PURE__ */ jsx6(Portal2, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, !web && fade], testID, children: [
+    /* @__PURE__ */ jsx6(Backdrop, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }, web && fade], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ jsx6(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: card }) : card })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -881,7 +890,7 @@ var AutoPalettePicker = (props) => {
 
 // src/components/BottomNavigation.tsx
 import { useEffect as useEffect4 } from "react";
-import { Platform as Platform2 } from "react-native";
+import { Platform as Platform3 } from "react-native";
 import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme6 } from "react-native-paper";
 
 // src/navigation-bar.ts
@@ -896,7 +905,7 @@ function useNavigationBarSync() {
   const theme = useTheme6();
   const { navigationBar, onNavBarChange } = useNavBarContext();
   useEffect4(() => {
-    if (Platform2.OS !== "android") return;
+    if (Platform3.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
     else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
   }, [theme, onNavBarChange, navigationBar]);
@@ -953,18 +962,38 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 }
 
 // src/components/Menu.tsx
-import { StyleSheet as StyleSheet6 } from "react-native";
-import { Menu as PaperMenu } from "react-native-paper";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { Animated as Animated2, Easing as Easing2, Platform as Platform4, StyleSheet as StyleSheet6 } from "react-native";
+import { Menu as PaperMenu, useTheme as useTheme9 } from "react-native-paper";
 import { jsx as jsx16 } from "react/jsx-runtime";
+var ANIMATION_DURATION2 = 250;
+var EASING = Easing2.bezier(0.4, 0, 0.2, 1);
+var DEFAULT_ELEVATION = 2;
+var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
+var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
+var AnimatedBlurView2 = Animated2.createAnimatedComponent(BlurView);
+var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
+  const { animation, roundness } = useTheme9(themeOverrides);
+  const [opacity] = useState6(() => new Animated2.Value(0));
+  const [closing, setClosing] = useState6(false);
+  if (!visible && !closing) setClosing(true);
+  useEffect5(() => {
+    Animated2.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  }, [animation.scale, closing, opacity]);
+  const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
+  return /* @__PURE__ */ jsx16(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+};
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
+  const web = Platform4.OS === "web";
+  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ jsx16(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: PaperMenu.Item
 });
 var styles5 = StyleSheet6.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
+  content: { backgroundColor: "transparent", paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",

package/src/components/Dialog.tsx

@@ -1,5 +1,5 @@
 import React, { type ComponentType, type ReactNode, useEffect, useState } from 'react'
-import { Animated, BackHandler, Easing, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Animated, BackHandler, Easing, Platform, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Dialog as PaperDialog, type DialogActionsProps, type DialogContentProps, type DialogProps as PaperDialogProps, type DialogScrollAreaProps, type DialogTitleProps, Portal, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -39,6 +39,9 @@ const ANIMATION_DURATION = 220
 // Minimum breathing room between the card and the screen edge, clamped up from safe-area insets.
 const DIALOG_MARGIN = 32
 
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
   const blur = useBlur(blurProp)
   const reanimated = useReanimatedModule()
@@ -93,21 +96,34 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
 
   const borderRadius = (isV3 ? 7 : 1) * roundness
 
+  // On web, an ancestor below opacity 1 cuts the card's CSS backdrop-filter off from the page behind
+  // it, and Chromium doesn't restore the blur once that ancestor fades back up to 1, so fading the
+  // whole layer would leave the open card see-through. There the fade runs on the backdrop and on the
+  // card (the backdrop-filter element) itself instead, off the same value. A numeric opacity in the
+  // card's own style still applies there, multiplied into the fade.
+  const web = Platform.OS === 'web'
+  const fade = { opacity }
+  const styleOpacity = StyleSheet.flatten(style)?.opacity
+  const cardFade = typeof styleOpacity === 'number' ? { opacity: Animated.multiply(opacity, styleOpacity) } : fade
+  const Backdrop = web ? AnimatedPressable : Pressable
+  const Card = web ? AnimatedBlurView : BlurView
+  const card = (
+    <Card blur={blur} style={[styles.card, { borderRadius }, style, web && cardFade]} testID={`${testID}-surface`}>
+      {content}
+    </Card>
+  )
+
   return (
     <Portal>
-      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]} testID={testID}>
-        <Pressable accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }]} testID={`${testID}-backdrop`} />
+      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, !web && fade]} testID={testID}>
+        <Backdrop accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }, web && fade]} testID={`${testID}-backdrop`} />
         <View pointerEvents='box-none' style={[styles.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }]} testID={`${testID}-wrapper`}>
           {reanimated && animatedStyle ? (
             <reanimated.View style={animatedStyle} testID={`${testID}-animated-wrapper`}>
-              <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-                {content}
-              </BlurView>
+              {card}
             </reanimated.View>
           ) : (
-            <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-              {content}
-            </BlurView>
+            card
           )}
         </View>
       </Animated.View>

package/src/components/Menu.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps } from 'react-native-paper'
+import React, { type ReactNode, useEffect, useState } from 'react'
+import { Animated, Easing, Platform, StyleSheet } from 'react-native'
+import { type MD2Theme, type MD3Theme, Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps, useTheme } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
 import { BlurView } from './BlurView'
@@ -9,11 +9,61 @@ export type MenuProps = PaperMenuProps & {
   blur?: boolean
 }
 
+// Mirror react-native-paper's Menu: its fade (ANIMATION_DURATION * theme.animation.scale, eased with
+// EASING), its default elevation, and the MD3 shadow its Surface draws at each elevation level.
+const ANIMATION_DURATION = 250
+const EASING = Easing.bezier(0.4, 0, 0.2, 1)
+const DEFAULT_ELEVATION = 2
+const SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8]
+const SHADOW_RADIUS = [0, 3, 6, 8, 10, 12]
+
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
+
+type FadingBlurViewProps = {
+  blur: boolean
+  children: ReactNode
+  elevation: number
+  theme: PaperMenuProps['theme']
+  visible: boolean
+}
+
+// Paper fades the menu's Surface in and out. On web, an ancestor below opacity 1 cuts BlurView's CSS
+// backdrop-filter off from the page behind it, and Chromium doesn't restore the blur once the Surface
+// reaches 1, so the open menu stays see-through until something else repaints it. So on web the Surface
+// is pinned at opacity 1 with its shadow hidden, and BlurView itself (the backdrop-filter element) runs
+// Paper's fades and draws that shadow, so the two still fade together.
+const FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }: FadingBlurViewProps) => {
+  const { animation, roundness } = useTheme<MD2Theme | MD3Theme>(themeOverrides)
+  const [opacity] = useState(() => new Animated.Value(0))
+  // Once Paper starts hiding the menu it unmounts this content when that fade-out ends, even if visible
+  // turns back on first, so a close is final here too rather than fading back in only to vanish.
+  const [closing, setClosing] = useState(false)
+  if (!visible && !closing) setClosing(true)
+
+  useEffect(() => {
+    Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start()
+  }, [animation.scale, closing, opacity])
+
+  const shadow = elevation > 0 ? { shadowColor: '#000000', shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null
+  return (
+    <AnimatedBlurView blur={blur} style={[{ borderRadius: roundness, opacity }, shadow]}>
+      {children}
+    </AnimatedBlurView>
+  )
+}
+
 const MenuComponent = ({ blur: blurProp, children, ...props }: MenuProps) => {
   const blur = useBlur(blurProp)
+  const web = Platform.OS === 'web'
   return (
-    <PaperMenu {...props} contentStyle={[styles.content, props.contentStyle]}>
-      <BlurView blur={blur}>{children}</BlurView>
+    <PaperMenu {...props} contentStyle={[styles.content, web && styles.webSurface, props.contentStyle]}>
+      {web ? (
+        <FadingBlurView blur={blur} elevation={props.mode === 'flat' ? 0 : (props.elevation ?? DEFAULT_ELEVATION)} theme={props.theme} visible={props.visible}>
+          {children}
+        </FadingBlurView>
+      ) : (
+        <BlurView blur={blur}>{children}</BlurView>
+      )}
     </PaperMenu>
   )
 }
@@ -23,5 +73,6 @@ export const Menu = Object.assign(MenuComponent, {
 })
 
 const styles = StyleSheet.create({
-  content: { backgroundColor: 'transparent', paddingVertical: 0 }
+  content: { backgroundColor: 'transparent', paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 })