TootComposer: stops propagation of touch and wheel

src/material/BottomSheet.css

@@ -17,7 +17,10 @@
 
 
   &::backdrop {
-    background: none;
+    background: transparent;
+
+    transition: background-color 120ms var(--tutu-anim-curve-std);
+    transition-behavior: allow-discrete;
   }
 
   box-shadow: var(--tutu-shadow-e16);
@@ -53,7 +56,7 @@
   }
 
   &.animated {
-    position: absolute;
+    position: fixed;
     overflow: hidden;
     will-change: width, height, top, left;
 
@@ -66,16 +69,25 @@
     top: unset;
     transform: translateX(-50%);
     bottom: 0;
-    content: content;
-    height: unset;
+    height: auto;
     contain: content;
     contain-intrinsic-size: unset;
 
+    &[open]::backdrop {
+      background: var(--tutu-color-shadow-l1);
+    }
+
     @media (max-width: 560px) {
       & {
         transform: none;
-        height: unset;
+        height: auto;
       }
     }
   }
-}
+}
+
+@starting-style {
+  .BottomSheet::backdrop {
+    background: transparent;
+  }
+}

src/material/BottomSheet.tsx

@@ -4,6 +4,7 @@ import {
   createSignal,
   onCleanup,
   useTransition,
+  type JSX,
   type ParentComponent,
   type ResolvedChildren,
 } from "solid-js";
@@ -14,6 +15,7 @@ import material from "./material.module.css";
 export type BottomSheetProps = {
   open?: boolean;
   bottomUp?: boolean;
+  class?: JSX.HTMLAttributes<HTMLElement>["class"];
   onClose?(reason: "backdrop"): void;
 };
 
@@ -219,10 +221,8 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog
-      class={`BottomSheet ${material.surface}`}
+      class={`BottomSheet ${material.surface} ${props.class || ""}`}
       classList={{
-        ["BottomSheet"]: true,
-        [material.surface]: true,
         ["bottom"]: props.bottomUp,
       }}
       onClick={onDialogClick}