@webqit/webflo 0.20.33 → 0.20.34

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.20.33",
+  "version": "0.20.34",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/runtime-pi/webflo-client/webflo-elements.js

@@ -381,7 +381,9 @@ class ModalElement extends HTMLElement {
             if (swipeDismiss || minmaxScroll) {
                 requestAnimationFrame(() => {
                     let left = 0, top = 0;
-                    if (!this.matches('._left._horz, ._top:not(._horz)')) {
+                    if (this.matches('._left._horz, ._top:not(._horz)')) {
+                        this.#viewElement.scrollTo({ top, left });
+                    } else {
                         if (this.classList.contains('_horz')) {
                             viewWidth = this.#viewElement.clientWidth/* instead of offsetHeight; safari reasons */;
                             left = viewWidth - this.#spacingElement.clientWidth;
@@ -389,9 +391,9 @@ class ModalElement extends HTMLElement {
                             viewHeight = this.#viewElement.clientHeight/* instead of offsetHeight; safari reasons */;
                             top = viewHeight - this.#spacingElement.clientHeight;
                         }
-                    }
-                    if (this.#viewElement.scrollTop < top || this.#viewElement.scrollLeft < left) {
-                        this.#viewElement.scrollTo({ top, left });
+                        if (this.#viewElement.scrollTop < top || this.#viewElement.scrollLeft < left) {
+                            this.#viewElement.scrollTo({ top, left });
+                        }
                     }
                 });
             }
@@ -1268,6 +1270,39 @@ class ModalElement extends HTMLElement {
                     backdrop-filter 0.2s;
             }
 
+            :host(._swipe-dismiss._container) {
+                timeline-scope: --view-scroll;
+            }
+
+            :host(._swipe-dismiss._container)::backdrop {
+                opacity: 0;
+
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-name: appear;
+                animation-timeline: --view-scroll;
+
+                animation-range: 0 calc(100cqh - var(--expanse-length) - var(--minmax-length));
+            }
+
+            :host(._swipe-dismiss._container._horz)::backdrop {
+                animation-range: 0 calc(100cqw - var(--expanse-length) - var(--minmax-length));
+            }
+
+            :host(._swipe-dismiss._container._top:not(._horz))::backdrop,
+            :host(._swipe-dismiss._container._left._horz)::backdrop {
+                opacity: 1;
+                animation-name: disappear;
+            }
+
+            :host(._swipe-dismiss._container._top:not(._horz))::backdrop {
+                animation-range: calc(100% - (100cqh - var(--expanse-length) - var(--minmax-length))) 100%;
+            }
+
+            :host(._swipe-dismiss._container._left._horz)::backdrop {
+                animation-range: calc(100% - (100cqw - var(--expanse-length) - var(--minmax-length))) 100%;
+            }
+
             :host(:popover-open)::backdrop {
                 backdrop-filter: blur(3px);
             }