chore: add context to viz

Author: segunadebayo

examples/next-ts/pages/bottom-sheet.tsx

@@ -37,7 +37,7 @@ export default function Page() {
       </main>
 
       <Toolbar controls={controls.ui} viz>
-        <StateVisualizer state={service} />
+        <StateVisualizer state={service} context={["snapPointOffset", "dragOffset"]} />
       </Toolbar>
     </>
   )

shared/src/css/bottom-sheet.css

@@ -14,7 +14,7 @@
 
 [data-scope="bottom-sheet"][data-part="content"] {
   background: white;
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, -100%, 0);
   transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
   display: flex;
   flex-direction: column;
@@ -31,6 +31,10 @@
   &[data-state="open"] {
     transform: translate3d(0, var(--snap-point-height, 0), 0);
   }
+
+  &[data-state="closed"] {
+    transform: translate3d(0, -100%, 0);
+  }
 }
 
 [data-scope="bottom-sheet"][data-part="grabber"] {