@webqit/webflo 0.20.31 → 0.20.33

package/package.json

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

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

@@ -35,6 +35,9 @@ export class WebfloClient extends AppRuntime {
     #background;
     get background() { return this.#background; }
 
+    #viewport;
+    get viewport() { return this.#viewport; }
+
     get isClientSide() { return true; }
 
     constructor(bootstrap, host) {
@@ -56,6 +59,68 @@ export class WebfloClient extends AppRuntime {
             phase: 0
         };
         this.#background = new StarPort({ handshake: 1, autoClose: false });
+
+        // ---------------------
+        // Dynamic viewport styling
+
+        const oskToken = 'interactive-widget=resizes-content';
+        const hasOsk = (content) => content?.includes(oskToken);
+        const removeOsk = (content) => {
+            if (content?.includes('interactive-widget')) {
+                return content
+                    .split(',')
+                    .filter((s) => !s.includes('interactive-widget'))
+                    .map((s) => s.trim())
+                    .join(', ');
+            }
+            return content;
+        };
+        const addOsk = (content) => {
+            if (content?.includes('interactive-widget')) {
+                return content
+                    .split(',')
+                    .map((s) => s.includes('interactive-widget') ? oskToken : s.trim())
+                    .join(', ');
+            }
+            return content + ', ' + oskToken;
+        };
+
+        const viewportMeta = document.querySelector('meta[name="viewport"]');
+        const viewportMetaInitialContent = viewportMeta?.content;
+        const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+        const renderViewportMetas = (entry) => {
+            viewportMeta?.setAttribute('content', entry.osk ? addOsk(viewportMetaInitialContent) : removeOsk(viewportMetaInitialContent));
+            themeColorMeta?.setAttribute('content', entry.themeColor);
+        };
+
+        const initial = {
+            themeColor: themeColorMeta?.content,
+            osk: hasOsk(viewportMetaInitialContent),
+        };
+        const viewportStack = [initial];
+
+        this.#viewport = {
+            push(entryId, { themeColor = viewportStack[0].themeColor, osk = viewportStack[0].osk }) {
+                if (typeof entryId !== 'string' || !entryId?.trim()) {
+                    throw new Error('entryId cannot be ommited');
+                }
+                if (viewportStack.find((e) => e.entryId === entryId)) return;
+                viewportStack.unshift({ entryId, themeColor, osk });
+                renderViewportMetas(viewportStack[0]);
+            },
+            pop(entryId) {
+                if (typeof entryId !== 'string' || !entryId?.trim()) {
+                    throw new Error('entryId cannot be ommited');
+                }
+                const index = viewportStack.findIndex((e) => e.entryId === entryId);
+                if (index === -1) return;
+                viewportStack.splice(index, 1);
+                renderViewportMetas(viewportStack[0]);
+            },
+            current() {
+                return viewportStack[0];
+            }
+        };
     }
 
     async initialize() {
@@ -600,6 +665,7 @@ export class WebfloClient extends AppRuntime {
                     state: {},
                     data: $response.body,
                     env: 'client',
+                    viewport: this.viewport,
                     navigator: this.navigator,
                     location: this.location,
                     network: this.network, // request, redirect, error, status, remote

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

@@ -42,12 +42,12 @@ export class WebfloRootClientA extends WebfloClient {
 	async initialize() {
 		// INITIALIZATIONS
 		const instanceController = await super.initialize();
-		
+
 		// Bind network status handlers
 		const onlineHandler = () => Observer.set(this.network, 'status', window.navigator.onLine);
 		window.addEventListener('online', onlineHandler, { signal: instanceController.signal });
 		window.addEventListener('offline', onlineHandler, { signal: instanceController.signal });
-		
+
 		// Window opener pinging
 		if (window.opener) {
 			const beforeunloadHandler = () => window.opener.postMessage('close');
@@ -93,7 +93,7 @@ export class WebfloRootClientA extends WebfloClient {
 			scopeObj.data = JSON.parse(this.host.querySelector(`script[rel="hydration"][type="application/json"]`)?.textContent?.trim() || 'null');
 		} catch (e) { }
 		scopeObj.response = new LiveResponse(scopeObj.data, { headers: { 'Content-Type': 'application/json' } });
-		
+
 		for (const name of ['X-Message-Port', 'X-Webflo-Dev-Mode']) {
 			const metaElement = this.host.querySelector(`meta[name="${name}"]`);
 			if (!metaElement) continue;
@@ -136,7 +136,7 @@ export class WebfloRootClientA extends WebfloClient {
 			try { window.history.pushState({}, '', newHref); } catch (e) { }
 		};
 		const instanceController = super.controlClassic/*IMPORTANT*/(locationCallback);
-		
+
 		// ONPOPSTATE
 		const popstateHandler = (e) => {
 			if (this.isHashChange(location)) {
@@ -158,7 +158,7 @@ export class WebfloRootClientA extends WebfloClient {
 			this.navigate(location.href, {}, detail);
 		};
 		window.addEventListener('popstate', popstateHandler, { signal: instanceController.signal });
-		
+
 		return instanceController;
 	}
 

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

@@ -18,6 +18,8 @@ export class WebfloSubClient extends WebfloClient {
 
 	get capabilities() { return this.#superRuntime.capabilities; }
 
+	get viewport() { return this.#superRuntime.viewport; }
+
 	get withViewTransitions() { return this.host.hasAttribute('viewtransitions'); }
 
 	constructor(superRuntime, host) {

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

@@ -1,6 +1,18 @@
 // ---------------- ToastElement
 
-export class ToastElement extends HTMLElement {
+class ToastElement extends HTMLElement {
+
+    set type(value) {
+        if ([undefined, null].includes(value)) {
+            this.removeAttribute('type');
+        } else this.setAttribute('type', value);
+    }
+
+    get type() { return this.getAttribute('type'); }
+
+    get contentHTML() { return ''; }
+
+    get css() { return ''; }
 
     #childToast = null;
 
@@ -21,12 +33,6 @@ export class ToastElement extends HTMLElement {
         }
     }
 
-    connectedCallback() {
-        if (!this.popover) {
-            this.popover = 'auto';
-        }
-    }
-
     render({ content, context }, childToast = null, recursion = 1) {
         if (context && recursion > 0) {
             const directChildToast = document.createElement(this.tagName);
@@ -54,18 +60,12 @@ export class ToastElement extends HTMLElement {
         this.innerHTML = content.message;
     }
 
-    set type(value) {
-        if ([undefined, null].includes(value)) {
-            this.removeAttribute('type');
-        } else this.setAttribute('type', value);
+    connectedCallback() {
+        if (!this.popover) {
+            this.popover = 'auto';
+        }
     }
 
-    get type() { return this.getAttribute('type'); }
-
-    get contentHTML() { return ''; }
-
-    get css() { return ''; }
-
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -315,7 +315,7 @@ export class ToastElement extends HTMLElement {
 
 // ---------------- ModalElement
 
-export class ModalMinmaxEvent extends Event {
+class ModalMinmaxEvent extends Event {
 
     #ratio;
     get ratio() { return this.#ratio; }
@@ -326,64 +326,108 @@ export class ModalMinmaxEvent extends Event {
     }
 }
 
-export class ModalElement extends HTMLElement {
+class ModalElement extends HTMLElement {
 
-    updateScrollViewDimensions() {
-        const viewElement = this.shadowRoot.querySelector('.view');
-        const beaderBoxElement = this.shadowRoot.querySelector('.header-box');
-        const beaderBarElement = this.shadowRoot.querySelector('.header-bar');
-        const footerBarElement = this.shadowRoot.querySelector('.footer-bar');
-        requestAnimationFrame(() => {
-            viewElement.style.setProperty('--header-box-height', beaderBoxElement.offsetHeight + 'px');
-            viewElement.style.setProperty('--header-bar-height', beaderBarElement.offsetHeight + 'px');
-            viewElement.style.setProperty('--footer-bar-height', footerBarElement.offsetHeight + 'px');
-            if (this.classList.contains('_container')) return;
-            viewElement.style.setProperty('--view-width', viewElement.clientWidth/* instead of offsetHeight; safari reasons */ + 'px');
-            viewElement.style.setProperty('--view-height', viewElement.clientHeight/* instead of offsetHeight; safari reasons */ + 'px');
-        });
-    }
+    #onminmaxHandler = null;
 
-    connectedCallback() {
-        if (!this.popover) {
-            this.popover = 'manual';
+    set onminmax(handler) {
+        if (this.#onminmaxHandler) {
+            this.removeEventListener('onminmax', this.#onminmaxHandler);
         }
-        this.bindMinmaxWorker();
-
-        if (this.hasAttribute('open')) {
-            this.showPopover();
+        if (typeof handler === 'function') {
+            this.addEventListener('minmax', this.#onminmaxHandler);
+        } else if (handler !== null && handler !== undefined) {
+            throw new Error('onminmax must be null or a function');
         }
+        this.#onminmaxHandler = handler;
+    }
 
-        if (this.matches(':popover-open')) {
-            this.updateScrollViewDimensions();
-        }
+    get onminmax() { return this.#onminmaxHandler; }
+
+    set type(value) {
+        if ([undefined, null].includes(value)) {
+            this.removeAttribute('type');
+        } else this.setAttribute('type', value);
     }
 
-    disconnectedCallback() {
-        this.#unbindMinmaxWorker?.();
-        this.#unbindMinmaxWorker = null;
+    get type() { return this.getAttribute('type'); }
+
+    get headerBoxHTML() { return ''; }
+
+    get headerHTML() { return ''; }
+
+    get mainHTML() { return ''; }
+
+    get contentHTML() { return ''; }
+
+    get footerHTML() { return ''; }
+
+    get css() { return ''; }
+
+    #viewElement;
+    #sentinelElement;
+    #spacingElement;
+    #headerElement;
+    #headerBoxElement;
+    #footerElement;
+
+    updateScrollViewDimensions() {
+        requestAnimationFrame(() => {
+            let viewWidth, viewHeight;
+
+            const swipeDismiss = this.classList.contains('_swipe-dismiss');
+            const minmaxScroll = !!window.getComputedStyle(this).getPropertyValue('--modal-minmax-length');
+
+            if (swipeDismiss || minmaxScroll) {
+                requestAnimationFrame(() => {
+                    let left = 0, top = 0;
+                    if (!this.matches('._left._horz, ._top:not(._horz)')) {
+                        if (this.classList.contains('_horz')) {
+                            viewWidth = this.#viewElement.clientWidth/* instead of offsetHeight; safari reasons */;
+                            left = viewWidth - this.#spacingElement.clientWidth;
+                        } else {
+                            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 });
+                    }
+                });
+            }
+
+            this.#viewElement.style.setProperty('--header-box-height', this.#headerBoxElement.offsetHeight + 'px');
+            this.#viewElement.style.setProperty('--header-max-height', this.#headerElement.offsetHeight + 'px');
+            this.#viewElement.style.setProperty('--footer-max-height', this.#footerElement.offsetHeight + 'px');
+
+            if (this.classList.contains('_container')) return;
+            if (viewWidth === undefined) viewWidth = this.#viewElement.clientWidth;
+            if (viewHeight === undefined) viewHeight = this.#viewElement.clientHeight;
+
+            this.#viewElement.style.setProperty('--view-width', viewWidth + 'px');
+            this.#viewElement.style.setProperty('--view-height', viewHeight + 'px');
+        });
     }
 
     #unbindMinmaxWorker = null;
 
     bindMinmaxWorker() {
         const swipeDismiss = this.classList.contains('_swipe-dismiss');
-        const minmaxEvents = this.classList.contains('_minmax');
+        const minmaxEvents = this.classList.contains('_minmax-events');
 
         if (!swipeDismiss && !minmaxEvents) return;
 
-        const viewElement = this.shadowRoot.querySelector('.view');
-        const sentinelElement = this.shadowRoot.querySelector('.sentinel');
-        const spacingElement = viewElement.querySelector('.spacing');
-
         const options = {
-            root: viewElement,
+            root: this.#viewElement,
             threshold: [0, 1]
         };
 
         const observer = new IntersectionObserver((entries) => {
+            if (!this.#userScrolled) return;
+
             for (const entry of entries) {
                 // Minmax events
-                if (entry.target === spacingElement) {
+                if (entry.target === this.#spacingElement) {
                     const event = new ModalMinmaxEvent(1 - entry.intersectionRatio);
                     this.dispatchEvent(event);
 
@@ -394,65 +438,80 @@ export class ModalElement extends HTMLElement {
                 }
 
                 // For auto-closing
-                if (entry.target === sentinelElement && entry.isIntersecting) {
+                if (entry.target === this.#sentinelElement
+                    && entry.isIntersecting
+                    && entry.intersectionRatio >= 0.8) {
                     this.hidePopover();
-                    setTimeout(() => spacingElement.scrollIntoView(), 300);
                 }
             }
         }, options);
 
-        if (minmaxEvents) observer.observe(spacingElement);
-        if (swipeDismiss) observer.observe(sentinelElement);
-        this.#unbindMinmaxWorker = () => observer.disconnect();
-    }
-
-    #onminmaxHandler = null;
+        setTimeout(() => {
+            if (minmaxEvents) observer.observe(this.#spacingElement);
+            if (swipeDismiss) observer.observe(this.#sentinelElement);
+        }, 200);
 
-    set onminmax(handler) {
-        if (this.#onminmaxHandler) {
-            this.removeEventListener('onminmax', this.#onminmaxHandler);
-        }
-        if (typeof handler === 'function') {
-            this.addEventListener('minmax', this.#onminmaxHandler);
-        } else if (handler !== null && handler !== undefined) {
-            throw new Error('onminmax must be null or a function');
-        }
-        this.#onminmaxHandler = handler;
+        this.#unbindMinmaxWorker = () => observer.disconnect();
     }
 
-    get onminmax() { return this.#onminmaxHandler; }
+    #userScrolled = false;
+    #unbindDimensionsWorker;
 
-    set type(value) {
-        if ([undefined, null].includes(value)) {
-            this.removeAttribute('type');
-        } else this.setAttribute('type', value);
-    }
+    #bindDimensionsWorker() {
+        this.#userScrolled = false;
+        const handleUserScroll = () => this.#userScrolled = true;
+        this.#viewElement.addEventListener('scroll', handleUserScroll);
 
-    get type() { return this.getAttribute('type'); }
 
-    get headerBoxHTML() { return ''; }
+        this.updateScrollViewDimensions();
+        const handleResize = () => this.updateScrollViewDimensions();
+        window.addEventListener('resize', handleResize);
 
-    get headerHTML() { return ''; }
+        this.#unbindDimensionsWorker?.();
+        this.#unbindDimensionsWorker = () => {
+            window.removeEventListener('resize', handleResize);
+            this.#viewElement.removeEventListener('scroll', handleUserScroll);
+        };
+    }
 
-    get mainHTML() { return ''; }
+    connectedCallback() {
+        if (!this.popover) {
+            this.popover = 'manual';
+        }
+        if (this.hasAttribute('open')) {
+            this.showPopover();
+        }
+    }
 
-    get contentHTML() { return ''; }
+    disconnectedCallback() {
+        this.#unbindDimensionsWorker?.();
+        this.#unbindDimensionsWorker = null;
+        this.#unbindMinmaxWorker?.();
+        this.#unbindMinmaxWorker = null;
+    }
 
-    get footerHTML() { return ''; }
+    static get observedAttributes() {
+        return ['class'];
+    }
 
-    get css() { return ''; }
+    attributeChangedCallback(name, old, _new) {
+        if (name === 'class') this.#bindDimensionsWorker();
+    }
 
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
 
         this.addEventListener('toggle', (e) => {
-            if (e.newState !== 'open') return;
-            this.updateScrollViewDimensions();
-        });
-
-        window.addEventListener('resize', () => {
-            this.updateScrollViewDimensions();
+            if (e.newState === 'open') {
+                this.#bindDimensionsWorker();
+                this.bindMinmaxWorker();
+            } else if (e.newState === 'closed') {
+                this.#unbindDimensionsWorker?.();
+                this.#unbindDimensionsWorker = null;
+                this.#unbindMinmaxWorker?.();
+                this.#unbindMinmaxWorker = null;
+            }
         });
 
         this.shadowRoot.innerHTML = `
@@ -480,7 +539,7 @@ export class ModalElement extends HTMLElement {
                             <div class="_content" style="flex-grow: 1">
                                 <slot
                                     name="header"
-                                    onslotchange="this.closest('.view').style.setProperty('--header-bar-height', this.closest('.header-bar').offsetHeight + 'px');"
+                                    onslotchange="this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');"
                                 >${this.headerHTML}</slot>
                             </div>
                         </div>
@@ -489,31 +548,24 @@ export class ModalElement extends HTMLElement {
                         </button>
                     </div>
 
-                    <div class="scrollport-anchor">
-                        <div class="scrollport">
-                            <div class="scrollbar-track">
-                                <div class="scrollbar-thumb"></div>
-                            </div>
+                </header>
+
+                <div class="scrollport-anchor">
+                    <div class="scrollport">
+                        <div class="scrollbar-track">
+                            <div class="scrollbar-thumb"></div>
                         </div>
                     </div>
-                </header>
+                </div>
 
                 ${this.mainHTML || `<div class="main" part="main">${this.contentHTML || `<slot></slot>`
             }</div>`}
 
                 <footer part="footer">
-                    <div class="scrollport-anchor">
-                        <div class="scrollport">
-                            <div class="scrollbar-track">
-                                <div class="scrollbar-thumb"></div>
-                            </div>
-                        </div>
-                    </div>
-
                     <div class="footer-bar" part="footer-bar">
                         <slot
                             name="footer"
-                            onslotchange="this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-bar-height', this.closest('.footer-bar').offsetHeight + 'px');"
+                            onslotchange="this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-max-height', this.closest('footer').offsetHeight + 'px');"
                         >${this.footerHTML}</slot>
                     </div>
                 </footer>
@@ -586,7 +638,6 @@ export class ModalElement extends HTMLElement {
 
                 --expanse-length: var(--modal-expanse-length, 0px);
                 --minmax-length: var(--modal-minmax-length, 0px);
-                --swipe-dismiss-length: var(--modal-swipe-dismiss-length, 0px);
 
                 --scrollbar-thumb-color: var(--modal-scrollbar-thumb-color, black);
                 --scrollbar-thumb-width: var(--modal-scrollbar-thumb-width, 4px);
@@ -603,6 +654,14 @@ export class ModalElement extends HTMLElement {
                 --entry-transform: translateY(var(--translation));
                 --exit-transform: translateY(calc(var(--translation) * var(--exit-factor)));
             }
+
+            :host(._swipe-dismiss) .view {
+                --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-height) - var(--minmax-length)));
+            }
+
+            :host(._horz._swipe-dismiss) .view {
+                --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-width) - var(--minmax-length)));
+            }
             
             /* transform reversal */
 
@@ -620,11 +679,14 @@ export class ModalElement extends HTMLElement {
             /* -------- internal, dynamic props (view) -------- */
 
             .view {
+                --header-max-height: 1.6rem;
                 --header-box-height: 0px;
-                --header-bar-height: 1.6rem;
-                --footer-bar-height: 0px;
+                --footer-max-height: 0px;
 
-                --view-inner-height: calc(var(--view-height) - var(--header-bar-height) - var(--footer-bar-height));
+                --header-min-height: calc(var(--header-max-height) - var(--header-box-height));
+                --footer-min-height: var(--footer-max-height);
+
+                --view-inner-height: calc(var(--view-height) - var(--header-min-height) - var(--footer-min-height));
                 --total-minmax-length: calc(var(--minmax-length) + var(--swipe-dismiss-length));
                 
                 --y-scroll-effect-exclude: var(--total-minmax-length);
@@ -645,6 +707,11 @@ export class ModalElement extends HTMLElement {
                 --view-width: 100cqw;
             }
 
+            :host(._container._horz) .view {
+                --view-height: 100cqh;
+                --view-width: calc(100cqw - var(--expanse-length));
+            }
+
             /* transform reversal */
 
             :host(:is(._top:not(._horz), ._left._horz)) .view {
@@ -721,9 +788,8 @@ export class ModalElement extends HTMLElement {
 
             /* flex orientation */
 
-            :host(:popover-open),
+            :host,
             .view {
-                display: flex;
                 flex-direction: column;
                 align-items: stretch;
             }
@@ -745,7 +811,8 @@ export class ModalElement extends HTMLElement {
             /* spacing */
 
             :host>.spacing,
-            .view>.spacing {
+            .view>.spacing,
+            .view>.sentinel {
                 position: relative;
                 display: block;
                 flex-shrink: 0;
@@ -766,17 +833,15 @@ export class ModalElement extends HTMLElement {
             :host(:not(._horz)) .view>.spacing { height: var(--minmax-length); }
             :host(._horz) .view>.spacing { width: var(--minmax-length); }
 
-            :host(:not(._top, ._horz)) .view>.spacing { margin-top: var(--swipe-dismiss-length); }
-            :host(._top:not(._horz)) .view>.spacing { margin-bottom: var(--swipe-dismiss-length); }
-
-            :host(._horz:not(._left)) .view>.spacing { margin-left: var(--swipe-dismiss-length); }
-            :host(._horz._left) .view>.spacing { margin-right: var(--swipe-dismiss-length); }
+            :host(:not(._horz)) .view>.sentinel { height: var(--swipe-dismiss-length); }
+            :host(._horz) .view>.sentinel { width: var(--swipe-dismiss-length); }
 
             /* ----------- */
 
             .view {
                 position: relative;
                 flex-grow: 1;
+                display: flex;
 
                 pointer-events: none;
 
@@ -830,16 +895,13 @@ export class ModalElement extends HTMLElement {
                 position: relative;
                 flex-grow: 1;
 
-                min-height: 100%;
-                min-width: 100%;
-
                 pointer-events: auto;
 
                 display: flex;
                 flex-direction: column;
             }
 
-            :host(._swipe-dismiss) .container {
+            :host(._swipe-dismiss-fadeout) .container {
                 animation-timing-function: linear;
                 animation-fill-mode: both;
                 animation-name: appear;
@@ -847,7 +909,7 @@ export class ModalElement extends HTMLElement {
                 animation-range: 0 var(--swipe-dismiss-length);
             }
 
-            :host(._swipe-dismiss:is(._top:not(._horz), ._left._horz)) .container {
+            :host(._swipe-dismiss-fadeout:is(._top:not(._horz), ._left._horz)) .container {
                 animation-name: disappear;
                 animation-range: calc(100% - var(--swipe-dismiss-length)) 100%;
             }
@@ -857,7 +919,7 @@ export class ModalElement extends HTMLElement {
             header {
                 position: sticky;
                 top: calc(var(--header-box-height) * -1);
-                z-index: 1;
+                z-index: 2;
 
                 display: flex;
                 flex-direction: column;
@@ -867,6 +929,8 @@ export class ModalElement extends HTMLElement {
 
                 border-top-left-radius: var(--radius-top-left);
                 border-top-right-radius: var(--radius-top-right);
+
+                order: 1;
             }
 
             :host(:not(._horz)) header {
@@ -959,6 +1023,8 @@ export class ModalElement extends HTMLElement {
 
                 color: var(--footer-color-default);
                 background: var(--footer-background);
+
+                order: 5;
             }
 
             :host([type="info"]) footer {
@@ -983,23 +1049,26 @@ export class ModalElement extends HTMLElement {
 
             /* ----------- */
 
-            :host(:popover-open) .view {
+            .view {
                 scroll-snap-type: y mandatory;
             }
 
-            :host(._horz:popover-open) .view {
+            :host(._horz) .view {
                 scroll-snap-type: x mandatory;
             }
 
-            .view>.spacing {
+            .view>.spacing,
+            .view>.sentinel {
                 scroll-snap-align: var(--scroll-snap-start);
             }
 
             .main {
                 flex-grow: 1;
-                scroll-margin-top: var(--header-bar-height);
-                scroll-margin-bottom: var(--footer-bar-height);
+                scroll-margin-top: var(--header-min-height);
+                scroll-margin-bottom: var(--footer-min-height);
                 scroll-snap-align: var(--scroll-snap-start);
+
+                order: 3;
             }
 
             :host(:is(._top, ._left._horz)) .main {
@@ -1021,42 +1090,108 @@ export class ModalElement extends HTMLElement {
             /* ----------- */
 
             .scrollport-anchor {
-                position: relative;
+                order: 2;
+
+                position: sticky;
+                top: var(--header-min-height);
+                bottom: var(--footer-min-height);
+                left: 0;
+                right: 0;
+                display: flex;
+                flex-direction: column;
+
                 height: 0;
+                width: var(--view-width);
             }
 
-            :host(:not(._top:not(._horz))) footer .scrollport-anchor,
-            :host(._top:not(._horz)) header .scrollport-anchor {
-                display: none;
+            :host(:is(._left._horz, ._top:not(._horz))) .scrollport-anchor {
+                justify-content: end;
+                order: 4;
             }
 
             .scrollport {
-                position: sticky;
-                top: var(--header-bar-height);
-                left: 0;
-                right: 0;
-                
-                container-type: size;
+                position: relative;
+
                 height: var(--view-inner-height);
                 width: var(--view-width);
+                flex-shrink: 0;
 
                 pointer-events: none;
             }
 
-            footer .scrollport {
+            :host(._top:not(._horz)) .scrollport {
+                height: calc(var(--view-inner-height) - var(--header-box-height));
+            }
+
+            /* -- scroll unfold -- */
+
+            :host(._scroll-unfold) .scrollport {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: stretch;
+            }
+
+            :host(._scroll-unfold._horz) .scrollport {
+                flex-direction: row;
+            }
+            
+            :host(._scroll-unfold) .scrollport::before,
+            :host(._scroll-unfold) .scrollport::after {
+                position: sticky;
+                display: block;
+                content: "";
+                opacity: 0;
+
+                background: var(--background);
+
+                mask-repeat: no-repeat;
+                mask-size: 100% 100%;
+
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+                animation-name: appear;
+                animation-timeline: --view-scroll;
+
+                animation-range: var(--scrollbar-progress-range);
+            }
+
+            :host(._scroll-unfold:not(._horz)) .scrollport::before,
+            :host(._scroll-unfold:not(._horz)) .scrollport::after {
+                top: var(--header-min-height);
+                height: 25%;
+
+                mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+                -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+            }
+
+            :host(._scroll-unfold:not(._horz)) .scrollport::after {
+                bottom: var(--footer-min-height);
                 top: auto;
-                position: absolute;
-                bottom: 0;
+                opacity: 1;
+                animation-name: disappear;
+                transform: scaleY(-1);
             }
 
-            :host(._scrollbars._top:not(._horz)) .scrollport {
-                height: calc(var(--view-inner-height) - var(--header-box-height));
+            :host(._scroll-unfold._horz) .scrollport::before,
+            :host(._scroll-unfold._horz) .scrollport::after {
+                left: 0;
+                width: 25%;
+
+                mask-image: linear-gradient(to right, black 0%, transparent 100%);
+                -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
             }
 
-            :host(._scrollbars._left._horz) .scrollport {
-                width: calc(var(--view-width) - var(--minmax-length));
+            :host(._scroll-unfold._horz) .scrollport::after {
+                right: 0;
+                left: auto;
+                opacity: 1;
+                animation-name: disappear;
+                transform: scaleX(-1);
             }
 
+            /* -- scrollbar -- */
+
             :host(._scrollbars) .scrollbar-track {
                 position: absolute;
                 display: block;
@@ -1067,6 +1202,8 @@ export class ModalElement extends HTMLElement {
                 right: 0;
                 padding: 6px;
 
+                container-type: size;
+
                 opacity: 0;
 
                 animation: appear linear;
@@ -1101,6 +1238,7 @@ export class ModalElement extends HTMLElement {
             :host(._scrollbars._horz) .scrollbar-thumb {
                 height: var(--scrollbar-thumb-width);
                 width: var(--scrollbar-thumb-height);
+
                 --scrollbar-thumb-start: translateX(0);
                 --scrollbar-thumb-length: translateX(calc(100cqw - 100%));
             }
@@ -1182,7 +1320,7 @@ export class ModalElement extends HTMLElement {
 
             .main {
                 color: var(--color-default);
-                background-color: var(--background);
+                background: var(--background);
             }
 
             .view:not(:has(footer slot:is(.has-slotted, :not(:empty)))) .main {
@@ -1224,12 +1362,19 @@ export class ModalElement extends HTMLElement {
             ${this.css}
         </style>
         `;
+
+        this.#viewElement = this.shadowRoot.querySelector('.view');
+        this.#sentinelElement = this.#viewElement.querySelector('.sentinel');
+        this.#spacingElement = this.#viewElement.querySelector('.spacing');
+        this.#headerElement = this.#viewElement.querySelector('header');
+        this.#headerBoxElement = this.#viewElement.querySelector('.header-box');
+        this.#footerElement = this.#viewElement.querySelector('footer');
     }
 }
 
 // ---------------- DialogElement
 
-export class DialogResponseEvent extends Event {
+class DialogResponseEvent extends Event {
 
     #data;
     get data() { return this.#data; }
@@ -1240,7 +1385,7 @@ export class DialogResponseEvent extends Event {
     }
 }
 
-export class DialogElement extends ModalElement {
+class DialogElement extends ModalElement {
 
     constructor() {
         super();
@@ -1333,6 +1478,7 @@ export class DialogElement extends ModalElement {
             }
 
             .main {
+                flex-shrink: 0;
                 display: flex;
                 flex-direction: column;
                 gap: 1rem;
@@ -1391,7 +1537,7 @@ export class DialogElement extends ModalElement {
 
 // ---------------- PromptElement
 
-export class PromptElement extends DialogElement {
+class PromptElement extends DialogElement {
 
     static get observedAttributes() {
         return ['value', 'placeholder'].concat(super.observedAttributes || []);
@@ -1400,8 +1546,8 @@ export class PromptElement extends DialogElement {
     attributeChangedCallback(name, old, _new) {
         super.attributeChangedCallback?.(...arguments);
         const input = this.shadowRoot.querySelector('input');
-        if (name === 'value') { input.value = _new; }
-        if (name === 'placeholder') { input.placeholder = _new; }
+        if (name === 'value') input.value = _new;
+        if (name === 'placeholder') input.placeholder = _new;
     }
 
     set placeholder(value) {
@@ -1470,7 +1616,7 @@ export class PromptElement extends DialogElement {
 
 // ---------------- ConfirmElement
 
-export class ConfirmElement extends DialogElement {
+class ConfirmElement extends DialogElement {
     get actionTexts() { return ['No', 'Yes']; }
 
     respondWith(response) { super.respondWith(!!response); }
@@ -1480,7 +1626,7 @@ export class ConfirmElement extends DialogElement {
 
 // ---------------- AlertElement
 
-export class AlertElement extends DialogElement {
+class AlertElement extends DialogElement {
     get actionTexts() { return ['', 'Got it']; }
 }