@playpilot/tpi 6.2.10-beta.4 → 6.2.10-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.2.10-beta.4",
+	"version": "6.2.10-beta.6",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/routes/components/Modal.svelte

@@ -83,7 +83,7 @@
   function scaleOrFly(node: Element): TransitionConfig {
     if (prefersReducedMotion.current) return fade(node, { duration: 0 })
 
-    if (isMobile) return fly(node, { duration: 250, y: window.innerHeight })
+    if (isMobile) return fly(node, { duration: 250, y: window.innerHeight, opacity: 1 })
     return scale(node, { duration: 150, start: 0.85 })
   }
 
@@ -158,14 +158,14 @@
       </div>
     {/if}
 
-    <div class="close {closeButtonStyle}" bind:this={closeElement}>
-      <RoundButton onclick={close} aria-label="Close">
-        <IconClose />
-      </RoundButton>
-    </div>
-
     {@render children()}
   </div>
+
+  <div class="close {closeButtonStyle}" transition:scaleOrFly|global bind:this={closeElement}>
+    <RoundButton onclick={close} aria-label="Close">
+      <IconClose />
+    </RoundButton>
+  </div>
 </div>
 
 <style lang="scss">
@@ -272,9 +272,11 @@
     margin-top: calc(var(--dialog-offset) + margin(1));
     top: 0;
     right: margin(1);
+    transition: top 200ms;
 
     @include desktop() {
       position: absolute;
+      margin-top: 0;
       top: margin(1);
     }
 
@@ -302,6 +304,7 @@
 
     .transitioning & {
       top: margin(1);
+      transition: none;
     }
   }
 

package/src/routes/components/SwipeHandle.svelte

@@ -35,7 +35,6 @@
     movementStartY = event.touches[0].pageY
 
     for (const target of targets) {
-      console.log(targets, target)
       target.style.transitionDuration = '0ms'
     }
   }
@@ -67,7 +66,7 @@
 
       for (const target of targets) {
         target.style.removeProperty('transition')
-        target.style.removeProperty('top')
+        requestAnimationFrame(() => target.style.top = '0px')
       }
     }