npm - @webqit/webflo - Versions diffs - 0.20.33 → 0.20.35 - Mend

@webqit/webflo 0.20.33 → 0.20.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/test/browser/elements.src.build.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/webflo-runtime/webflo-client/webflo-elements.js", "elements.src.js"],
+  "sourcesContent": ["// ---------------- BaseElement\n\nexport class BaseElement extends HTMLElement {\n\n    static get events() {\n        return [];\n    }\n\n    static get observedAttributes() {\n        return this.events.map((e) => `on${e}`);\n    }\n\n    // ----------------\n\n    #compiledEventHandlers = {};\n\n    #compileAttrEventsIfNeeded(attrName, attrValue) {\n        for (const eventName of this.constructor.events) {\n\n            if (attrName !== `on${eventName}`) continue;\n\n            if (this.#compiledEventHandlers[attrName]) {\n                this.removeEventListener(eventName, this.#compiledEventHandlers[attrName]);\n                this.#compiledEventHandlers[attrName] = null;\n            }\n\n            if (attrValue) {\n                this.#compiledEventHandlers[attrName] = Function('event', attrValue).bind(this);\n                this.addEventListener(eventName, this.#compiledEventHandlers[attrName]);\n            }\n        }\n    }\n\n    #initPropEventsSystem() {\n        for (const eventName of this.constructor.events) {\n\n            const attrName = `on${eventName}`;\n            let _handler = null;\n\n            Object.defineProperty(this, attrName, {\n                get: () => _handler,\n                set: (handler) => {\n                    if (_handler) {\n                        this.removeEventListener(eventName, _handler);\n                        _handler = null;\n                    }\n\n                    if (typeof handler === 'function') {\n                        this.addEventListener(eventName, handler);\n                    } else if (handler !== null && handler !== undefined) {\n                        throw new Error(`[${attrName}] handler must be null or a function`);\n                    }\n\n                    _handler = handler;\n                }\n            });\n        }\n    }\n\n    // ----------------\n\n    attributeChangedCallback(name, old, _new) {\n        this.#compileAttrEventsIfNeeded(name, _new);\n    }\n\n    constructor() {\n        super();\n        this.#initPropEventsSystem();\n    }\n}\n\n// ---------------- ToastElement\n\nexport class ToastElement extends BaseElement {\n\n    set type(value) {\n        if ([undefined, null].includes(value)) {\n            this.removeAttribute('type');\n        } else this.setAttribute('type', value);\n    }\n\n    get type() { return this.getAttribute('type'); }\n\n    get contentHTML() { return ''; }\n\n    get css() { return ''; }\n\n    #childToast = null;\n\n    #addNested() {\n        if (this.#childToast) {\n            this.shadowRoot.appendChild(this.#childToast);\n            if (this.matches(':popover-open')) {\n                this.#childToast.showPopover();\n            }\n        }\n    }\n\n    _processVisibility(slot) {\n        if (this.hasAttribute('oncontent')) {\n            if (slot.assignedNodes().find((n) => n.nodeName !== '#text' || n.textContent.trim())) {\n                this.showPopover();\n            } else this.hidePopover();\n        }\n    }\n\n    render({ content, context }, childToast = null, recursion = 1) {\n        if (context && recursion > 0) {\n            const directChildToast = document.createElement(this.tagName);\n\n            directChildToast.setAttribute('popover', this.getAttribute('popover') || 'auto');\n            if (this.classList.contains('_top')) {\n                directChildToast.classList.add('_top');\n            }\n            directChildToast.render({ content }, childToast, 0);\n\n            this.render(context, directChildToast, recursion + 1);\n            return;\n        }\n\n        this.#childToast?.remove();\n        this.#childToast = childToast;\n        // In case \"this\" is already connected\n        this.#addNested();\n\n        const childStartDelay = parseFloat(childToast?.style.getPropertyValue('--start-delay') || '0');\n        this.style.setProperty('--start-delay', (childStartDelay + 0.1) + 's');\n\n        // Render now\n        this.type = content.type;\n        this.innerHTML = content.message;\n    }\n\n    connectedCallback() {\n        if (!this.popover) {\n            this.popover = 'auto';\n        }\n    }\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n\n        this.addEventListener('toggle', (e) => {\n            if (e.newState === 'open') {\n                this.#childToast?.showPopover();\n            } else if (e.newState === 'closed') {\n                this.#childToast?.hidePopover();\n                if (this.getAttribute('oncontent') === 'always') {\n                    this.innerHTML = '';\n                }\n            }\n        });\n\n        this.shadowRoot.innerHTML = `\n        <div class=\"container\">\n\n            <svg class=\"icon _info\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M444-296h72v-228h-72v228Zm36-312q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm0 528q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n            <svg class=\"icon _success\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M390-298 246-442l72-72 72 72 252-252 72 72-324 324Zm90 218q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n            <svg class=\"icon _error\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n            <svg class=\"icon _warning\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n            <div class=\"_content\" part=\"content\">\n                <slot\n                    onslotchange=\"this.getRootNode().host?._processVisibility(this);\"\n                >${this.contentHTML}</slot>\n            </div>\n            <button class=\"close-button\" part=\"close-button\" onclick=\"this.getRootNode().host.hidePopover();\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n            </button>\n\n        </div>\n        <style>\n            * {\n                box-sizing: border-box;\n            }\n            \n            @keyframes flash {\n                from {\n                    background-color: transparent;\n                }\n\n                50% {\n                    background-color: rgba(125, 125, 125, 0.2);\n                }\n\n                to {\n                    background-color: transparent;\n                }\n            }\n\n            :host {\n                --color-default: var(--toast-color-default, whitesmoke);\n                --color-info: var(--toast-color-info, skyblue);\n                --color-success: var(--toast-color-success, lightgreen);\n                --color-error: var(--toast-color-error, coral);\n                --color-warning: var(--toast-color-warning, coral);\n\n                --wq-radius: var(--toast-radius, 1rem);\n                --background: var(--toast-background, rgb(30, 30, 30));\n                --shadow: var(--toast-shadow, rgb(30, 30, 30));\n\n                --dir: 1;\n                --translation: calc(var(--toast-translation, 50px) * var(--dir));\n                --exit-factor: var(--toast-exit-factor, -1);\n\n                --entry-transform: translateY(var(--translation));\n                --exit-transform: translateY(calc(var(--translation) * var(--exit-factor)));\n            }\n\n            :host {\n                border: none;\n                background: none;\n\n                margin-bottom: 0;\n                padding: 1rem;\n\n                /* Transition */\n                transition:\n                    opacity 0.2s,\n                    transform 0.2s,\n                    bottom 0.1s,\n                    top 0.1s,\n                    overlay 0.2s allow-discrete,\n                    display 0.2s allow-discrete;\n                \n                /* Exit state */\n                transform: var(--exit-transform);\n                transition-delay: var(--start-delay, 0s);\n                opacity: 0;\n            }\n            \n            :host(._top) {\n                margin-bottom: auto;\n                margin-top: 0;\n                --dir: -1;\n            }\n\n            /* ----------- */\n\n            .container {\n                position: relative;\n\n                display: flex;\n                align-items: start;\n                gap: 0.6rem;\n\n                padding-block: 0.8rem;\n                padding-inline: 1.2rem;\n                border-radius: var(--wq-radius);\n\n                color: var(--color-default);\n                background-color: var(--background);\n                box-shadow: var(--shadow);\n\n                anchor-name: --container;\n            }\n\n            /* ----------- */\n\n            :host(:popover-open) {\n                display: block;\n                opacity: 1;\n                transform: none;\n            }\n\n            @starting-style {\n                :host(:popover-open) {\n                    opacity: 0;\n                    transform: var(--entry-transform);\n                }\n            }\n\n            /* ----------- */\n\n            :host(:not([popover=\"manual\"]):popover-open)::backdrop {\n                animation: flash 0.3s ease-in;\n                animation-iteration-count: 3;\n            }\n\n            :host([popover=\"manual\"])::backdrop {\n                /* Transition */\n                transition:\n                    display 0.2s allow-discrete,\n                    overlay 0.2s allow-discrete,\n                    backdrop-filter 0.2s;\n            }\n\n            :host([popover=\"manual\"]:popover-open)::backdrop {\n                backdrop-filter: blur(3px);\n            }\n\n            @starting-style {\n                :host([popover=\"manual\"]:popover-open)::backdrop {\n                    backdrop-filter: none;\n                }\n            }\n            \n            :host([popover=\"manual\"]:popover-open)::before {\n                position: fixed;\n                inset: 0;\n                display: block;\n                content: \"\";\n                z-index: -1;\n            }\n\n            .icon {\n                display: none;\n                opacity: 0.6;\n            }\n\n            :host([type=\"info\"]) .icon._info,\n            :host([type=\"success\"]) .icon._success,\n            :host([type=\"error\"]) .icon._error,\n            :host([type=\"warning\"]) .icon._warning {\n                display: block;\n            }\n            \n            :host([type=\"info\"]) .container {\n                color: var(--color-info);\n            }\n            \n            :host([type=\"success\"]) .container {\n                color: var(--color-success);\n            }\n\n            :host([type=\"error\"]) .container {\n                color: var(--color-error);\n            }\n\n            :host([type=\"warning\"]) .container {\n                color: var(--color-warning);\n            }\n\n            .close-button {\n                padding-inline: 0;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                appearance: none;\n                font-size: inherit;\n                color: gray;\n                cursor: pointer;\n                border: none;\n                background: none;\n                transform: translateX(0.1rem);\n            }\n\n            :host(:not([popover=\"manual\"])) .close-button {\n                display: none;\n            }\n\n            .close-button:hover {\n                opacity: 0.8;\n            }\n\n            /* ----------- */\n\n            :host(:not(._top)) wq-toast {\n                position-anchor: --container;\n                bottom: calc(anchor(bottom) - 0.5rem);\n            }\n\n            :host(:not(._top)) wq-toast:hover,\n            :host(:not(._top)) .container:hover ~ wq-toast {\n                bottom: calc(anchor(top) - 0.75rem);\n                transition-delay: 0;\n            }\n\n            :host(._top) wq-toast {\n                position-anchor: --container;\n                top: calc(anchor(top) - 0.5rem);\n            }\n\n            :host(._top) wq-toast:hover,\n            :host(._top) .container:hover ~ wq-toast {\n                top: calc(anchor(bottom) - 0.75rem);\n                transition-delay: 0;\n            }\n            \n            ${this.css}\n        </style>`;\n\n        this.#addNested();\n    }\n}\n\n// ---------------- ModalElement\n\nexport class ModalMinmaxEvent extends Event {\n\n    #ratio;\n    get ratio() { return this.#ratio; }\n\n    constructor(ratio) {\n        super('minmax');\n        this.#ratio = ratio;\n    }\n}\n\nexport class ModalElement extends BaseElement {\n\n    static get events() {\n        return super.events.concat(['minmax']);\n    }\n\n    static get observedAttributes() {\n        return super.observedAttributes.concat(['class']);\n    }\n\n    get delegatesFocus() { return false; }\n\n    // ----------------\n\n    set type(value) {\n        if ([undefined, null].includes(value)) {\n            this.removeAttribute('type');\n        } else this.setAttribute('type', value);\n    }\n\n    get type() { return this.getAttribute('type'); }\n\n    get headerBoxHTML() { return ''; }\n\n    get headerHTML() { return ''; }\n\n    get headerExtendedHTML() { return ''; }\n\n    get mainHTML() { return ''; }\n\n    get contentHTML() { return ''; }\n\n    get footerHTML() { return ''; }\n\n    get css() { return ''; }\n\n    #viewElement;\n    #sentinelElement;\n    #spacingElement;\n    #headerElement;\n    #headerBoxElement;\n    #footerElement;\n\n    updateScrollViewDimensions() {\n        requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n                let viewWidth, viewHeight;\n\n                const swipeDismiss = this.classList.contains('_swipe-dismiss');\n                const minmaxScroll = !!window.getComputedStyle(this).getPropertyValue('--modal-minmax-length');\n\n                if (swipeDismiss || minmaxScroll) {\n                    requestAnimationFrame(() => {\n                        let left = 0, top = 0;\n                        if (this.matches('._left._horz, ._top:not(._horz)')) {\n                            this.#viewElement.scrollTo({ top, left });\n                        } else {\n                            if (this.classList.contains('_horz')) {\n                                viewWidth = this.#viewElement.offsetWidth;\n                                left = viewWidth - this.#spacingElement.offsetWidth;\n                            } else {\n                                viewHeight = this.#viewElement.offsetHeight;\n                                top = viewHeight - this.#spacingElement.offsetHeight;\n                            }\n                            if (this.#viewElement.scrollTop < top || this.#viewElement.scrollLeft < left) {\n                                this.#viewElement.scrollTo({ top, left });\n                            }\n                        }\n                    });\n                }\n\n                this.#viewElement.style.setProperty('--header-box-height', this.#headerBoxElement.offsetHeight + 'px');\n                this.#viewElement.style.setProperty('--header-max-height', this.#headerElement.offsetHeight + 'px');\n                this.#viewElement.style.setProperty('--footer-max-height', this.#footerElement.offsetHeight + 'px');\n\n                if (this.classList.contains('_container')) return;\n                if (viewWidth === undefined) viewWidth = this.#viewElement.offsetWidth;\n                if (viewHeight === undefined) viewHeight = this.#viewElement.offsetHeight;\n\n                this.#viewElement.style.setProperty('--view-width', viewWidth + 'px');\n                this.#viewElement.style.setProperty('--view-height', viewHeight + 'px');\n            });\n        });\n    }\n\n    #unbindMinmaxWorker = null;\n\n    bindMinmaxWorker() {\n        const swipeDismiss = this.classList.contains('_swipe-dismiss');\n        const minmaxEvents = this.classList.contains('_minmax-events');\n\n        if (!swipeDismiss && !minmaxEvents) return;\n\n        const options = {\n            root: this.#viewElement,\n            threshold: [0, 1]\n        };\n\n        const observer = new IntersectionObserver((entries) => {\n            if (!this.#userScrolled) return;\n\n            for (const entry of entries) {\n                // Minmax events\n                if (entry.target === this.#spacingElement) {\n                    const event = new ModalMinmaxEvent(1 - entry.intersectionRatio);\n                    this.dispatchEvent(event);\n                }\n\n                // For auto-closing\n                if (entry.target === this.#sentinelElement\n                    && entry.isIntersecting\n                    && entry.intersectionRatio >= 0.8) {\n                    this.hidePopover();\n                }\n            }\n        }, options);\n\n        setTimeout(() => {\n            if (minmaxEvents) observer.observe(this.#spacingElement);\n            if (swipeDismiss) observer.observe(this.#sentinelElement);\n        }, 200);\n\n        this.#unbindMinmaxWorker = () => observer.disconnect();\n    }\n\n    #userScrolled = false;\n    #unbindDimensionsWorker;\n\n    #bindDimensionsWorker() {\n        this.#userScrolled = false;\n        const handleUserScroll = () => this.#userScrolled = true;\n        this.#viewElement.addEventListener('scroll', handleUserScroll);\n\n\n        this.updateScrollViewDimensions();\n        const handleResize = () => this.updateScrollViewDimensions();\n        window.addEventListener('resize', handleResize);\n\n        this.#unbindDimensionsWorker?.();\n        this.#unbindDimensionsWorker = () => {\n            window.removeEventListener('resize', handleResize);\n            this.#viewElement.removeEventListener('scroll', handleUserScroll);\n        };\n    }\n\n    // ----------------\n\n    attributeChangedCallback(name, old, _new) {\n        super.attributeChangedCallback?.(name, old, _new);\n\n        if (name === 'class') this.#bindDimensionsWorker();\n    }\n\n    connectedCallback() {\n        super.connectedCallback?.();\n\n        if (!this.popover) {\n            this.popover = 'manual';\n        }\n        if (this.hasAttribute('open')) {\n            this.showPopover();\n        }\n    }\n\n    disconnectedCallback() {\n        super.disconnectedCallback?.();\n\n        this.#unbindDimensionsWorker?.();\n        this.#unbindDimensionsWorker = null;\n        this.#unbindMinmaxWorker?.();\n        this.#unbindMinmaxWorker = null;\n    }\n\n    constructor() {\n        super();\n\n        this.attachShadow({ mode: 'open', delegatesFocus: this.delegatesFocus });\n\n        this.addEventListener('toggle', (e) => {\n            if (e.newState === 'open') {\n                this.#bindDimensionsWorker();\n                this.bindMinmaxWorker();\n            } else if (e.newState === 'closed') {\n                this.#unbindDimensionsWorker?.();\n                this.#unbindDimensionsWorker = null;\n                this.#unbindMinmaxWorker?.();\n                this.#unbindMinmaxWorker = null;\n            }\n        });\n\n        this.shadowRoot.innerHTML = `\n        <div class=\"spacing\"></div>\n        <div class=\"view\" part=\"view\">\n\n            <div class=\"sentinel\"></div>\n            <div class=\"spacing\"></div>\n\n            <div class=\"container\" part=\"container\">\n                <header part=\"header\">\n                    <div class=\"header-box\" part=\"header-box\">\n                        <slot\n                            name=\"header-box\"\n                            onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--header-box-height', this.closest('.header-box').offsetHeight + 'px');\"\n                        >${this.headerBoxHTML}</slot>\n                    </div>\n\n                    <div class=\"header-bar\" part=\"header-bar\">\n                        <div class=\"header-left\">\n                            <svg class=\"icon _info\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M444-296h72v-228h-72v228Zm36-312q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm0 528q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n                            <svg class=\"icon _success\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M390-298 246-442l72-72 72 72 252-252 72 72-324 324Zm90 218q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n                            <svg class=\"icon _error\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n                            <svg class=\"icon _warning\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M480-292q20 0 33-13t13-33q0-20-13-33t-33-13q-20 0-33 13t-13 33q0 20 13 33t33 13Zm-36-156h72v-240h-72v240Zm36 368q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z\"/></svg>\n                            <div class=\"_content\" style=\"flex-grow: 1\">\n                                <slot\n                                    name=\"header\"\n                                    onslotchange=\"this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');\"\n                                >${this.headerHTML}</slot>\n                            </div>\n                        </div>\n                        <button class=\"close-button\" part=\"close-button\" onclick=\"this.getRootNode().host.hidePopover();\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n                        </button>\n                    </div>\n\n                    ${this.headerExtendedHTML || `\n                        <slot\n                            name=\"header-extended\"\n                            onslotchange=\"this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');\"\n                        ></slot>`}\n\n                </header>\n\n                <div class=\"scrollport-anchor\">\n                    <div class=\"scrollport\">\n                        <div class=\"scroll-fold scroll-fold-start\" part=\"scroll-fold scroll-fold-start\"></div>\n                        <div class=\"scroll-fold scroll-fold-end\" part=\"scroll-fold scroll-fold-end\"></div>\n                        <div class=\"scrollbar-track\">\n                            <div class=\"scrollbar-thumb\"></div>\n                        </div>\n                    </div>\n                </div>\n\n                ${this.mainHTML || `<div class=\"main\" part=\"main\">${this.contentHTML || `<slot></slot>`\n            }</div>`}\n\n                <footer part=\"footer\">\n                    <div class=\"footer-bar\" part=\"footer-bar\">\n                        <slot\n                            name=\"footer\"\n                            onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-max-height', this.closest('footer').offsetHeight + 'px');\"\n                        >${this.footerHTML}</slot>\n                    </div>\n                </footer>\n\n            </div>\n        </div>\n        <span class=\"spacing-b\"></span>\n\n        <style>\n            * {\n                box-sizing: border-box;\n            }\n\n            @keyframes untransform {\n                to { transform: none; }\n            }\n\n            @keyframes transform-n {\n                to { transform: var(--transform); }\n            }\n\n            @keyframes appear {\n                from { opacity: 0; }\n                to { opacity: 1; }\n            }\n\n            @keyframes disappear {\n                from { opacity: 1; }\n                to { opacity: 0; }\n            }\n\n            @keyframes header-chrome {\n                from { background: var(--header-open-background); }\n                to { background: var(--header-background); }\n            }\n\n            @keyframes move-scrollbar-thumb {\n                from { transform: var(--scrollbar-thumb-start); }\n                to { transform: var(--scrollbar-thumb-length); }\n            }\n\n            @keyframes radius0 {\n                to { --wq-radius: 0; }\n            }\n\n            :host {\n                --wq-radius: var(--modal-radius, 1rem);\n                --aero-blur: var(--modal-aero-blur, 10px);\n                --background: var(--modal-background, rgba(80, 80, 80, 1));\n\n                --color-default: var(--modal-color-default, whitesmoke);\n                --color-info: var(--modal-color-info, whitesmoke);\n                --color-success: var(--modal-color-success, whitesmoke);\n                --color-error: var(--modal-color-error, whitesmoke);\n                --color-warning: var(--modal-color-warning, whitesmoke);\n\n                --header-color-default: var(--modal-header-color-default, var(--color-default));\n                --header-color-info: var(--modal-header-color-info, skyblue);\n                --header-color-success: var(--modal-header-color-success, lightgreen);\n                --header-color-error: var(--modal-header-color-error, coral);\n                --header-background: var(--modal-header-background, var(--background));\n\n                --header-open-background: var(--modal-header-open-background, var(--header-background));\n\n                --footer-color-default: var(--modal-footer-color-default, var(--color-default));\n                --footer-color-info: var(--modal-footer-color-info, skyblue);\n                --footer-color-success: var(--modal-footer-color-success, lightgreen);\n                --footer-color-error: var(--modal-footer-color-error, coral);\n                --footer-background: var(--modal-footer-background, var(--background));\n\n                --expanse-length: var(--modal-expanse-length, 0px);\n                --minmax-length: var(--modal-minmax-length, 0px);\n\n                --scrollbar-thumb-color: var(--modal-scrollbar-thumb-color, black);\n                --scrollbar-thumb-width: var(--modal-scrollbar-thumb-width, 4px);\n                --scrollbar-thumb-height: var(--modal-scrollbar-thumb-height, 30px);\n\n                --translation: calc(var(--modal-translation, 50px) * var(--dir));\n                --exit-factor: var(--modal-exit-factor, -1);\n            }\n\n            /* -------- internal, dynamic props (root) -------- */\n\n            :host {\n                --dir: 1;\n                --entry-transform: translateY(var(--translation));\n                --exit-transform: translateY(calc(var(--translation) * var(--exit-factor)));\n            }\n\n            :host(._swipe-dismiss) .view {\n                --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-height) - var(--minmax-length)));\n            }\n\n            :host(._horz._swipe-dismiss) .view {\n                --swipe-dismiss-length: var(--modal-swipe-dismiss-length, calc(var(--view-width) - var(--minmax-length)));\n            }\n            \n            /* transform reversal */\n\n            :host(:is(._top, ._left)) { --dir: -1; }\n\n            /* horizontal axis */\n\n            :host(:is(._left, ._right, ._horz)) {                \n                --entry-transform: translateX(var(--translation));\n                --exit-transform: translateX(calc(var(--translation) * var(--exit-factor)));\n            }\n\n            :host(._edge-tight) { --exit-factor: var(--modal-exit-factor, 1); }\n\n            /* -------- internal, dynamic props (view) -------- */\n\n            .view {\n                --header-max-height: 1.6rem;\n                --header-box-height: 0px;\n                --footer-max-height: 0px;\n\n                --header-min-height: calc(var(--header-max-height) - var(--header-box-height));\n                --footer-min-height: var(--footer-max-height);\n\n                --view-inner-height: calc(var(--view-height) - var(--header-min-height) - var(--footer-min-height));\n                --total-minmax-length: var(--minmax-length);\n                \n                --y-scroll-effect-exclude: var(--total-minmax-length);\n                --scrollbar-appear-range: calc(var(--total-minmax-length) - 25px) var(--total-minmax-length);\n                \n                --scrollbar-progress-range-start: calc(var(--total-minmax-length) + var(--header-box-height));\n                --scrollbar-progress-range-end: 100%;\n                --scrollbar-progress-range: var(--scrollbar-progress-range-start) var(--scrollbar-progress-range-end);\n\n                --scroll-snap-start: start;\n                --scroll-snap-end: end;\n\n                --radius-top-left: var(--wq-radius);\n                --radius-top-right: var(--wq-radius);\n                --radius-bottom-left: var(--wq-radius);\n                --radius-bottom-right: var(--wq-radius);\n            }\n\n            :host(._container) .view {\n                --view-height: calc(100cqh - var(--expanse-length));\n                --view-width: 100cqw;\n            }\n\n            :host(._container._horz) .view {\n                --view-height: 100cqh;\n                --view-width: calc(100cqw - var(--expanse-length));\n            }\n\n            :host(._swipe-dismiss:not(._horz)) .view {\n                --total-minmax-length: var(--view-height);\n            }\n\n            :host(._swipe-dismiss._horz) .view {\n                --total-minmax-length: var(--view-width);\n            }\n\n            /* transform reversal */\n\n            :host(:is(._top:not(._horz), ._left._horz)) .view {\n                --scroll-snap-start: end;\n                --scroll-snap-end: start;\n\n                --y-scroll-effect-exclude: 0px;\n                --scrollbar-appear-range: -25px 0;\n            }\n\n            :host(._top:not(._horz)) .view {\n                --scrollbar-progress-range-start: var(--header-box-height);\n                --scrollbar-progress-range-end: calc(100% - var(--total-minmax-length));\n            }\n\n            :host(._left._horz) .view {\n                --scrollbar-progress-range-start: 0;\n                --scrollbar-progress-range-end: calc(100% - var(--total-minmax-length));\n            }\n\n            /* curves */\n\n            :host(._top._edge-tight) .view {\n                --radius-top-left: 0px;\n                --radius-top-right: 0px;\n            }\n\n            :host(._bottom._edge-tight) .view {\n                --radius-bottom-left: 0px;\n                --radius-bottom-right: 0px;\n            }\n\n            :host(._left._edge-tight) .view {\n                --radius-top-left: 0px;\n                --radius-bottom-left: 0px;\n            }\n\n            :host(._right._edge-tight) .view {\n                --radius-top-right: 0px;\n                --radius-bottom-right: 0px;\n            }\n\n            /* --------- actual styling -------- */\n\n            :host {\n                background: none;\n                border: none;\n                padding: 0;\n\n                max-height: 100vh;\n                max-width: 100vw;\n                \n                /* Transition */\n                transition:\n                    opacity 0.2s,\n                    transform 0.2s,\n                    overlay 0.2s allow-discrete,\n                    display 0.2s allow-discrete;\n                transition-timing-function: ease-out;\n                \n                /* Exit state */\n                transform: var(--exit-transform);\n                opacity: 0;\n            }\n            \n            :host(:not(._horz, ._left, ._right, ._top, ._bottom)) {\n                max-width: 800px;\n            }\n\n            /* edge alignment */\n\n            :host(._top) { margin-top: 0; }\n            :host(._bottom) { margin-bottom: 0; }\n            :host(._left) { margin-left: 0; }\n            :host(._right) { margin-right: 0; }\n\n            /* flex orientation */\n\n            :host,\n            .view {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            :host(._horz),\n            :host(._horz) .view {\n                flex-direction: row;\n            }\n\n            :host(:is(._top:not(._horz), ._left._horz)) .view,\n            :host(:is(._top:not(._horz), ._left._horz)) .view .container {\n                order: -1;\n            }\n\n            :host(:is(._top:not(._horz), ._left._horz)) .view .sentinel {\n                order: 1000;\n            }\n\n            /* spacing */\n\n            :host>.spacing,\n            .view>.spacing,\n            .view>.sentinel {\n                position: relative;\n                display: block;\n                flex-shrink: 0;\n            }\n\n            :host(:not(._horz))>.spacing { height: var(--expanse-length); }\n            :host(:not(._horz, ._top, ._bottom))>:is(.spacing, .spacing-b) {\n                height: calc(var(--expanse-length) / 2);\n                flex-shrink: 0;\n            }\n\n            :host(._horz)>.spacing { width: var(--expanse-length); }\n            :host(._horz:not(._left, ._right))>:is(.spacing, .spacing-b) {\n                width: calc(var(--expanse-length) / 2);\n                flex-shrink: 0;\n            }\n\n            :host(:not(._horz)) .view>.spacing { height: var(--minmax-length); }\n            :host(._horz) .view>.spacing { width: var(--minmax-length); }\n\n            :host(:not(._horz)) .view>.sentinel { height: var(--swipe-dismiss-length); }\n            :host(._horz) .view>.sentinel { width: var(--swipe-dismiss-length); }\n\n            /* ----------- */\n\n            .view {\n                position: relative;\n                flex-grow: 1;\n                display: flex;\n\n                pointer-events: none;\n\n                overflow-y: auto;\n                scrollbar-width: none;\n\n                border-top-left-radius: var(--radius-top-left);\n                border-top-right-radius: var(--radius-top-right);\n                border-bottom-left-radius: var(--radius-bottom-left);\n                border-bottom-right-radius: var(--radius-bottom-right);\n\n                scroll-timeline-name: --view-scroll;\n\n                animation-timing-function: linear;\n                animation-fill-mode: forwards;\n                animation-name: untransform;\n                animation-timeline: --view-scroll;\n\n                animation-range: 0 var(--total-minmax-length);\n            }\n\n            :host(:not(._horz, ._top, ._bottom, ._edge-tight._alt-edge-tight)) .view {\n                transform: translateY(calc(var(--total-minmax-length) / -2));\n            }\n\n            :host(._horz:not(._left, ._right, ._edge-tight._alt-edge-tight)) .view {\n                transform: translateX(calc(var(--total-minmax-length) / -2));\n            }\n\n            :host(._edge-tight._alt-edge-tight) .view {\n                animation-timing-function: linear;\n                animation-fill-mode: forwards;\n                animation-name: radius0;\n                animation-timeline: --view-scroll;\n\n                animation-range: calc(var(--total-minmax-length) - var(--wq-radius)) var(--total-minmax-length);\n            }\n\n            :host(._horz) .view {\n                overflow-y: hidden;\n                overflow-x: auto;\n\n                scroll-timeline-axis: inline;\n            }\n\n            .view::-webkit-scrollbar { display: none; }\n\n            /* ----------- */\n\n            .container {\n                position: relative;\n                flex-grow: 1;\n\n                pointer-events: auto;\n\n                display: flex;\n                flex-direction: column;\n            }\n\n            :host(._swipe-dismiss-fadeout) .container {\n                animation-timing-function: linear;\n                animation-fill-mode: both;\n                animation-name: appear;\n                animation-timeline: --view-scroll;\n                animation-range: 0 var(--swipe-dismiss-length);\n            }\n\n            :host(._swipe-dismiss-fadeout:is(._top:not(._horz), ._left._horz)) .container {\n                animation-name: disappear;\n                animation-range: calc(100% - var(--swipe-dismiss-length)) 100%;\n            }\n\n            /* ------------ */\n            \n            header {\n                position: sticky;\n                top: calc(var(--header-box-height) * -1);\n                z-index: 2;\n\n                display: flex;\n                flex-direction: column;\n\n                color: var(--header-color-default);\n                background: var(--header-background);\n\n                border-top-left-radius: var(--radius-top-left);\n                border-top-right-radius: var(--radius-top-right);\n\n                order: 1;\n            }\n\n            :host(:not(._horz)) header {\n                animation-timing-function: linear;\n                animation-fill-mode: both;\n                animation-name: header-chrome;\n                animation-timeline: --view-scroll;\n                animation-range: var(--y-scroll-effect-exclude) calc(var(--y-scroll-effect-exclude) + var(--header-box-height));\n            }\n\n            :host(._aero) :is(header, .main, footer) {\n                backdrop-filter: blur(var(--aero-blur));\n            } \n\n            .header-box {\n                position: relative;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                --transform: translateY(35%);\n\n                animation-timing-function: linear;\n                animation-fill-mode: forwards;\n                animation-name: disappear, transform-n;\n                animation-timeline: --view-scroll;\n                animation-range: var(--y-scroll-effect-exclude) calc(var(--y-scroll-effect-exclude) + (var(--header-box-height) / 2));\n            }\n\n            :host(._horz) .header-box {\n                display: none;\n            }\n\n            .header-bar {\n                position: relative;\n                z-index: 1;\n\n                display: flex;\n                align-items: start;\n                justify-content: space-between;\n            }\n\n            .header-bar {\n                gap: 0.6rem;\n                padding-block: 0.8rem;\n                padding-inline: 1.2rem;\n            }\n\n            .header-left {\n                display: flex;\n                align-items: start;\n                gap: 0.6rem;\n\n                opacity: 0;\n\n                animation-timing-function: linear;\n                animation-fill-mode: forwards;\n                animation-name: appear;\n                animation-timeline: --view-scroll;\n                animation-range: calc(var(--y-scroll-effect-exclude) + (var(--header-box-height) / 2)) calc(var(--y-scroll-effect-exclude) + var(--header-box-height));\n            }\n\n            :host(._horz) .header-left,\n            header:not(:has(slot[name=\"header-box\"]:is(.has-slotted, :not(:empty)))) .header-left {\n                opacity: 1;\n            }\n\n            :host([type=\"info\"]) header {\n                color: var(--header-color-info);\n            }\n            \n            :host([type=\"success\"]) header {\n                color: var(--header-color-success);\n            }\n\n            :host([type=\"error\"]) header {\n                color: var(--header-color-error);\n            }\n            \n            /* ----------- */\n\n            footer {\n                position: sticky;\n                bottom: 0;\n                z-index: 1;\n\n                border-bottom-left-radius: var(--radius-bottom-left);\n                border-bottom-right-radius: var(--radius-bottom-right);\n\n                color: var(--footer-color-default);\n                background: var(--footer-background);\n\n                order: 5;\n            }\n\n            :host([type=\"info\"]) footer {\n                color: var(--footer-color-info);\n            }\n            \n            :host([type=\"success\"]) footer {\n                color: var(--footer-color-success);\n            }\n\n            :host([type=\"error\"]) footer {\n                color: var(--footer-color-error);\n            }\n\n            /* ------------ */\n\n            footer .footer-bar {\n                position: sticky;\n                left: 0;\n                right: 0;\n            }\n\n            /* ----------- */\n\n            .view {\n                scroll-snap-type: y mandatory;\n            }\n\n            :host(._horz) .view {\n                scroll-snap-type: x mandatory;\n            }\n\n            .view>.spacing,\n            .view>.sentinel {\n                scroll-snap-align: var(--scroll-snap-start);\n            }\n\n            .main {\n                flex-grow: 1;\n\n                min-width: var(--view-width);\n                min-height: var(--view-inner-height);\n\n                scroll-margin-top: var(--header-min-height);\n                scroll-margin-bottom: var(--footer-min-height);\n                scroll-snap-align: var(--scroll-snap-start);\n\n                order: 3;\n            }\n\n            :host(:is(._top, ._left._horz)) .main {\n                scroll-snap-align: none;\n            }\n\n            :host(:is(._top, ._left._horz)) .container {\n                scroll-snap-align: var(--scroll-snap-start);\n            }\n\n            header {\n                scroll-snap-align: start;\n            }\n\n            .header-bar {\n                scroll-snap-align: start;\n            }\n\n            /* ----------- */\n\n            .scrollport-anchor {\n                order: 2;\n\n                position: sticky;\n                top: var(--header-min-height);\n                bottom: var(--footer-min-height);\n                left: 0;\n                right: 0;\n                display: flex;\n                flex-direction: column;\n\n                height: 0;\n                width: var(--view-width);\n\n                z-index: 1;\n            }\n\n            :host(:is(._left._horz, ._top:not(._horz))) .scrollport-anchor {\n                justify-content: end;\n                order: 4;\n            }\n\n            .scrollport {\n                position: relative;\n\n                height: var(--view-inner-height);\n                width: var(--view-width);\n                flex-shrink: 0;\n\n                pointer-events: none;\n            }\n\n            :host(._top:not(._horz)) .scrollport {\n                height: calc(var(--view-inner-height) - var(--header-box-height));\n            }\n\n            /* -- scroll unfold -- */\n\n            :host(._scroll-unfold) .scrollport {\n                display: flex;\n                flex-direction: column;\n                justify-content: space-between;\n                align-items: stretch;\n            }\n\n            :host(._scroll-unfold._horz) .scrollport {\n                flex-direction: row;\n            }\n            \n            :host(._scroll-unfold) .scrollport .scroll-fold {\n                position: sticky;\n                opacity: 0;\n\n                background: var(--background);\n\n                mask-repeat: no-repeat;\n                mask-size: 100% 100%;\n\n                animation-timing-function: linear;\n                animation-fill-mode: forwards;\n                animation-name: appear;\n                animation-timeline: --view-scroll;\n\n                animation-range-start: var(--scrollbar-progress-range-start);\n                animation-range-end: calc(var(--scrollbar-progress-range-end) + 1px);\n            }\n\n            :host(._scroll-unfold) .scrollport .scroll-fold-end {\n                animation-range-start: calc(var(--scrollbar-progress-range-start) - 1px);\n                animation-range-end: var(--scrollbar-progress-range-end);\n            }\n\n            :host(._scroll-unfold:not(._horz)) .scrollport .scroll-fold {\n                top: var(--header-min-height);\n                height: 25%;\n\n                mask-image: linear-gradient(to bottom, black 0%, transparent 100%);\n                -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);\n            }\n\n            :host(._scroll-unfold:not(._horz)) .scrollport .scroll-fold-end {\n                bottom: var(--footer-min-height);\n                top: auto;\n                opacity: 1;\n                animation-name: disappear;\n                transform: scaleY(-1);\n            }\n\n            :host(._scroll-unfold._horz) .scrollport .scroll-fold {\n                left: 0;\n                width: 25%;\n\n                mask-image: linear-gradient(to right, black 0%, transparent 100%);\n                -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);\n            }\n\n            :host(._scroll-unfold._horz) .scrollport .scroll-fold-end {\n                right: 0;\n                left: auto;\n                opacity: 1;\n                animation-name: disappear;\n                transform: scaleX(-1);\n            }\n\n            /* -- scrollbar -- */\n\n            :host(._scrollbars) .scrollbar-track {\n                position: absolute;\n                display: block;\n                overflow: hidden;\n\n                height: 100%;\n                top: 0;\n                right: 0;\n                padding-inline: 2px;\n\n                opacity: 0;\n\n                animation: appear linear;\n                animation-timeline: --view-scroll;\n                animation-range: var(--scrollbar-appear-range);\n                animation-fill-mode: forwards;\n            }\n\n            :host(._scrollbars._horz) .scrollbar-track {\n                height: unset;\n                width: 100%;\n                top: auto;\n                bottom: 0;\n                padding-inline: 0;\n                padding-block: 2px;\n            }\n\n            :host(._scrollbars) .scrollbar-thumb {\n                width: var(--scrollbar-thumb-width);\n                height: var(--scrollbar-thumb-height);\n                background: var(--scrollbar-thumb-color);\n                border-radius: 10px;\n\n                --scrollbar-thumb-start: translateY(0);\n                --scrollbar-thumb-length: translateY(calc(var(--view-inner-height) - 100%));\n\n                animation: move-scrollbar-thumb linear both;\n                animation-timeline: --view-scroll;\n                animation-range: var(--scrollbar-progress-range);\n            }\n\n            :host(._scrollbars._horz) .scrollbar-thumb {\n                height: var(--scrollbar-thumb-width);\n                width: var(--scrollbar-thumb-height);\n\n                --scrollbar-thumb-start: translateX(0);\n                --scrollbar-thumb-length: translateX(calc(var(--view-width) - 100%));\n            }\n\n            /* ----------- */\n\n            :host(:popover-open) {\n                display: flex;\n                opacity: 1;\n                transform: none;\n            }\n\n            @starting-style {\n                :host(:popover-open) {\n                    opacity: 0;\n                    transform: var(--entry-transform);\n                }\n            }\n\n            /* ----------- */\n\n            :host::backdrop {\n                /* Transition */\n                transition:\n                    display 0.2s allow-discrete,\n                    overlay 0.2s allow-discrete,\n                    backdrop-filter 0.2s;\n            }\n\n            :host(._swipe-dismiss._container) {\n                timeline-scope: --view-scroll;\n            }\n\n            :host(._swipe-dismiss._container)::backdrop {\n                opacity: 0;\n\n                animation-timing-function: linear;\n                animation-fill-mode: forwards;\n                animation-name: appear;\n                animation-timeline: --view-scroll;\n\n                animation-range: 0 calc(100cqh - var(--expanse-length) - var(--minmax-length));\n            }\n\n            :host(._swipe-dismiss._container._horz)::backdrop {\n                animation-range: 0 calc(100cqw - var(--expanse-length) - var(--minmax-length));\n            }\n\n            :host(._swipe-dismiss._container._top:not(._horz))::backdrop,\n            :host(._swipe-dismiss._container._left._horz)::backdrop {\n                opacity: 1;\n                animation-name: disappear;\n            }\n\n            :host(._swipe-dismiss._container._top:not(._horz))::backdrop {\n                animation-range: calc(100% - (100cqh - var(--expanse-length) - var(--minmax-length))) 100%;\n            }\n\n            :host(._swipe-dismiss._container._left._horz)::backdrop {\n                animation-range: calc(100% - (100cqw - var(--expanse-length) - var(--minmax-length))) 100%;\n            }\n\n            :host(:popover-open)::backdrop {\n                backdrop-filter: blur(3px);\n            }\n\n            :host(:not([popover=\"manual\"]):popover-open)::backdrop {\n                backdrop-filter: blur(0px);\n            }\n\n            @starting-style {\n                :host(:popover-open)::backdrop {\n                    backdrop-filter: none;\n                }\n            }\n                \n            :host(:popover-open)::before {\n                position: fixed;\n                inset: 0;\n                display: block;\n                content: \"\";\n                z-index: -1;\n            }\n\n            .icon {\n                display: none;\n                opacity: 0.6;\n            }\n\n            :host([type=\"info\"]) .icon._info,\n            :host([type=\"success\"]) .icon._success,\n            :host([type=\"error\"]) .icon._error,\n            :host([type=\"warning\"]) .icon._warning {\n                display: block;\n            }\n\n            :host([type=\"info\"]) .container {\n                color: var(--color-info);\n            }\n            \n            :host([type=\"success\"]) .container {\n                color: var(--color-success);\n            }\n\n            :host([type=\"error\"]) .container {\n                color: var(--color-error);\n            }\n\n            :host([type=\"warning\"]) .container {\n                color: var(--color-warning);\n            }\n\n            .main {\n                color: var(--color-default);\n                background: var(--background);\n            }\n\n            .view:not(:has(footer slot:is(.has-slotted, :not(:empty)))) .main {\n                border-bottom-left-radius: var(--radius-bottom-left);\n                border-bottom-right-radius: var(--radius-bottom-right);\n            }\n\n            .close-button {\n                padding-inline: 0;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                appearance: none;\n                font-size: inherit;\n                color: gray;\n                cursor: pointer;\n                border: none;\n                background: none;\n            }\n            \n            :host(:not([popover=\"manual\"])) {\n                pointer-events: none;\n            }\n\n            :host(:not([popover=\"manual\"])) .close-button {\n                display: none;\n            }\n\n            .close-button:hover {\n                opacity: 0.8;\n            }\n\n            :host(._horz) :is(.header-left, .close-button) {\n                position: sticky;\n                left: 1.2rem;\n                right: 1.2rem;\n            }\n            \n            ${this.css}\n        </style>\n        `;\n\n        this.#viewElement = this.shadowRoot.querySelector('.view');\n        this.#sentinelElement = this.#viewElement.querySelector('.sentinel');\n        this.#spacingElement = this.#viewElement.querySelector('.spacing');\n        this.#headerElement = this.#viewElement.querySelector('header');\n        this.#headerBoxElement = this.#viewElement.querySelector('.header-box');\n        this.#footerElement = this.#viewElement.querySelector('footer');\n    }\n}\n\n// ---------------- DialogElement\n\nexport class DialogResponseEvent extends Event {\n\n    #data;\n    get data() { return this.#data; }\n\n    constructor(data) {\n        super('response');\n        this.#data = data;\n    }\n}\n\nexport class DialogElement extends ModalElement {\n\n    static get events() {\n        return super.events.concat(['response']);\n    }\n\n    get delegatesFocus() { return true; }\n\n    // ----------------\n\n    hidePopover() { this.respondWith(null); }\n\n    respondWith(response) {\n        const event = new DialogResponseEvent(response);\n        super.hidePopover();\n        this.dispatchEvent(event);\n    }\n\n    respondWithData() {\n        const data = this.querySelector('form')\n            || this.shadowRoot.querySelector('form');\n        this.respondWith(data);\n    }\n\n    render(data = {}) {\n        this.type = data.type;\n\n        const html = [data.message];\n        if (data.actions?.[0]) {\n            html.push(`<span slot=\"action-0\">${data.actions[0]}</span>`);\n        }\n        if (data.actions?.[1]) {\n            html.push(`<span slot=\"action-1\">${data.actions[1]}</span>`);\n        }\n\n        this.innerHTML = html.join('\\n');\n    }\n\n    get actionTexts() { return ['Cancel', 'Submit']; }\n\n    get footerHTML() {\n        return `                    \n            <button\n                part=\"action-0\"\n                class=\"action _secondary\"\n                onclick=\"this.getRootNode().host.hidePopover()\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M256-176 176-256l224-224-224-224 80-80 224 224 224-224 80 80-224 224 224 224-80 80-224-224-224 224Z\"/></svg>\n                <slot name=\"action-0\" onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length);\">${this.actionTexts[0]}</slot>\n            </button>\n\n            <button\n                part=\"action-1\"\n                class=\"action _primary\"\n                onclick=\"this.getRootNode().host.respondWithData()\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1.4em\" width=\"1.4em\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M369-222 128-463l84-84 157 157 379-379 84 84-463 463Z\"/></svg>\n                <slot name=\"action-1\" onslotchange=\"this.classList.toggle('has-slotted', !!this.assignedElements().length);\">${this.actionTexts[1]}</slot>\n            </button>\n        `;\n    }\n\n    get css() {\n        return super.css + `\n            :host {\n                --primary-button-color: var(--dialog-primary-button-color, black);\n                --primary-button-background: var(--dialog-primary-button-background, white);\n                --secondary-button-color: var(--dialog-secondary-button-color, white);\n                --secondary-button-background: var(--dialog-secondary-button-background, black);\n                --button-radius: var(--dialog-button-radius, 10px);\n            }\n\n            .main {\n                flex-shrink: 0;\n                display: flex;\n                flex-direction: column;\n                gap: 1rem;\n                padding: 1rem;\n            }\n\n            .footer-bar {\n                display: flex;\n                align-items: center;\n                gap: 0.5rem;\n                padding: 1rem;\n            }\n\n            button.action {\n                whitespace: nowrap;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 0.5rem;\n                border: none;\n                border-radius: var(--button-radius);\n                padding: 0.5rem 1rem;\n                cursor: pointer;\n                transition: all 0.2s;\n                font-size: inherit;\n                font-weight: bold;\n                flex-grow: 1;\n            }\n\n            button.action:hover {\n                opacity: 0.8;\n            }\n            \n            button.action:is(:focus, :active, .active) {\n                outline: none;\n                box-shadow: none;\n                opacity: 0.5;\n            }\n\n            button.action._primary {\n                background-color: var(--primary-button-background);\n                color: var(--primary-button-color);\n            }\n\n            button.action._secondary {\n                background-color: var(--secondary-button-background);\n                color: var(--secondary-button-color);\n            }\n\n            button.action:not(:has(slot:is(.has-slotted, :not(:empty)))) {\n                display: none;\n            }\n        `;\n    }\n}\n\n// ---------------- PromptElement\n\nexport class PromptElement extends DialogElement {\n\n    static get observedAttributes() {\n        return super.observedAttributes.concat(['value', 'placeholder']);\n    }\n\n    // ----------------\n\n    attributeChangedCallback(name, old, _new) {\n        super.attributeChangedCallback?.(name, old, _new);\n\n        const input = this.shadowRoot.querySelector('input');\n        if (name === 'value') input.value = _new;\n        if (name === 'placeholder') input.placeholder = _new;\n    }\n\n    set placeholder(value) {\n        if ([undefined, null].includes(value)) {\n            this.removeAttribute('placeholder');\n        } else this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() { return this.getAttribute('placeholder'); }\n\n    set value(value) {\n        if ([undefined, null].includes(value)) {\n            this.removeAttribute('value');\n        } else this.setAttribute('value', value);\n    }\n\n    get value() { return this.getAttribute('value'); }\n\n    respondWithData() {\n        const data = this.shadowRoot.querySelector('input').value;\n        this.respondWith(data);\n    }\n\n    render(data = {}) {\n        this.value = data.value;\n        this.placeholder = data.placeholder;\n        super.render(data);\n    }\n\n    get mainHTML() {\n        return `\n            <form class=\"main\" part=\"main\" onsubmit=\"this.getRootNode().host.respondWithData(); event.preventDefault();\">\n                <slot></slot>\n                <slot name=\"input\">\n                    <input part=\"input\" type=\"text\" autocomplete=\"off\" autofocus placeholder=\"Enter response\">\n                </slot>\n            </form>\n        `;\n    }\n\n    get actionTexts() { return ['Cancel', 'Submit']; }\n\n    get css() {\n        return super.css + `\n            :host {\n                --input-color: var(--prompt-input-color, inherit);\n                --input-background: var(--prompt-input-background, rgba(255, 255, 255, 0.2));\n                --input-radius: var(--prompt-input-radius, 10px);\n            }\n\n            input {\n                width: 100%;\n                border: none;\n                border-radius: var(--input-radius);\n                padding: 0.6rem 1rem;\n                color: var(--input-color);\n                background-color: var(--input-background);\n            }\n\n            input::placeholder {\n                color: currentColor;\n            }\n        `;\n    }\n}\n\n// ---------------- ConfirmElement\n\nexport class ConfirmElement extends DialogElement {\n    get actionTexts() { return ['No', 'Yes']; }\n\n    respondWith(response) { super.respondWith(!!response); }\n\n    respondWithData() { super.respondWith(true); }\n}\n\n// ---------------- AlertElement\n\nexport class AlertElement extends DialogElement {\n    get actionTexts() { return ['', 'Got it']; }\n}\n\n// ---------------- define\n\nexport function defineElements() {\n    try {\n        CSS.registerProperty({\n            name: '--wq-radius',\n            syntax: '<length-percentage>',\n            inherits: true,\n            initialValue: '0'\n        });\n    } catch (e) { }\n    customElements.define('wq-toast', ToastElement);\n    customElements.define('wq-modal', ModalElement);\n    customElements.define('wq-dialog', DialogElement);\n    customElements.define('wq-prompt', PromptElement);\n    customElements.define('wq-confirm', ConfirmElement);\n    customElements.define('wq-alert', AlertElement);\n}", "import { defineElements } from '../../src/webflo-runtime/webflo-client/webflo-elements.js';\n\ndefineElements();"],
+  "mappings": "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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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",
+  "names": ["BaseElement", "e", "#compiledEventHandlers", "#compileAttrEventsIfNeeded", "attrName", "attrValue", "eventName", "#initPropEventsSystem", "_handler", "handler", "name", "old", "_new", "ToastElement", "value", "#childToast", "#addNested", "slot", "n", "content", "context", "childToast", "recursion", "directChildToast", "childStartDelay", "ModalMinmaxEvent", "#ratio", "ratio", "ModalElement", "#viewElement", "#sentinelElement", "#spacingElement", "#headerElement", "#headerBoxElement", "#footerElement", "viewWidth", "viewHeight", "swipeDismiss", "minmaxScroll", "left", "top", "#unbindMinmaxWorker", "minmaxEvents", "options", "observer", "entries", "#userScrolled", "entry", "event", "#unbindDimensionsWorker", "#bindDimensionsWorker", "handleUserScroll", "handleResize", "DialogResponseEvent", "#data", "data", "DialogElement", "response", "html", "PromptElement", "input", "ConfirmElement", "AlertElement", "defineElements", "defineElements"]
+}

package/test/browser/elements.src.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { defineElements } from '../../src/webflo-runtime/webflo-client/webflo-elements.js';
+defineElements();

package/test/browser/index.html ADDED Viewed

@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Webflo Browser Tests</title>
+    <script src="./elements.src.build.js"></script>
+</head>
+<body>
+    <wq-toast oncontent></wq-toast>
+    <wq-modal type="success" id="pop1" style="width: 200px; text-align: center;" popover="manual" open
+        onminmax="console.log('1------', event.ratio)"
+        class="_bottom _scroll-unfold _minmax-events _swipe-dismiss _edge-tight _alt-edge-tight _scrollbars">
+        <span slot="header-box" style="display: flex; flex-direction: column; align-items: center; padding-top: 1rem;">
+            <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+                <!-- Background Circle -->
+                <circle cx="60" cy="60" r="40" stroke="#4CAF50" stroke-width="8" fill="none" stroke-dasharray="251.2"
+                    stroke-dashoffset="251.2">
+                    <animate attributeName="stroke-dashoffset" from="251.2" to="0" dur="0.8s" fill="freeze" />
+                    <!--
+                    <animate attributeName="fill" from="none" to="#4CAF50" begin="0.8s" dur="0.3s" fill="freeze"/>
+                    -->
+                </circle>
+                <!-- Checkmark -->
+                <g transform="translate(60,60)">
+                    <polyline points="-15,5 -5,15 15,-10" stroke="white" stroke-width="8" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round" transform="scale(0)">
+                        <animateTransform attributeName="transform" type="scale" from="0" to="1" begin="1s" dur="0.3s"
+                            fill="freeze" />
+                    </polyline>
+                </g>
+            </svg>
+            <span>Success</span>
+        </span>
+        <span slot="header">Success</span>
+        <span>JJjdj djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
+            djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
+            djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
+            djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+        </span>
+        <div slot="footer" style="padding: 1rem;">Footer</div>
+    </wq-modal>
+    <wq-dialog type="success" id="pop2" popover="manual" style="width: 600px; height: 700px; container-type: size;"
+        class="_bottom _container _minmax-events _scroll-unfold _swipe-dismiss _edge-tight _scrollbars"
+        onminmax="console.log('2------', event.ratio)">
+        <span slot="header">Success</span>
+        <span>JJjdj djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
+            djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
+            djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd
+            djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+            djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd djdjdndjd djdjd
+        </span>
+        <div slot="foot-er" style="padding: 1rem;">Success</div>
+    </wq-dialog>
+    <wq-prompt id="pop3" class="  _minmax-events" type="warning" popover="manual" value="dd"
+        onresponse="console.log(event.data)">
+        <span slot="header">Success</span>
+        Throw success
+    </wq-prompt>
+    <script>
+        const toast = document.querySelector('wq-toast');
+        toast.render({
+            content: {
+                type: 'success',
+                message: 'Success Toast'
+            },
+            context: {
+                content: {
+                    type: 'error',
+                    message: 'Error Toast'
+                },
+                context: {
+                    content: {
+                        type: 'info',
+                        message: 'Info Toast'
+                    },
+                }
+            }
+        });
+    </script>
+    <div class="container multi">
+        <div class="view" style="--sticky-header-shrink-height: 100px; --sticky-header-shrink-background: dimgray">
+            <div class="sticky-header shrinks" style="anchor-name: --a; ">
+                <div class="sticky-header-content">
+                    <div class="_shrinks-to-center">Sticky Header 1</div>
+                    <div class="_shrinks-out">Sticky Header 1</div>
+                    <div class="_shrinks-in">Sticky Header 1</div>
+                </div>
+                <div class="sticky-header-window">
+                    <div class="scrollbar-track">
+                        <div class="scrollbar-thumb"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="content" style="anchor-name: --b;">
+                <button popovertarget="pop1">Show Modal 1</button>
+                <button popovertarget="pop2">Show Modal 2</button>
+                <button popovertarget="pop3">Show Modal 3</button>
+                Content Block 1
+            </div>
+        </div>
+        <div class="view">
+            <div class="sticky-header">
+                <div class="sticky-header-content">Sticky Header 2</div>
+                <div class="sticky-header-window">
+                    <div class="scrollbar-track">
+                        <div class="scrollbar-thumb"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="content">Content Block 2</div>
+        </div>
+    </div>
+    <style>
+        /* reset */
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        * {
+            box-sizing: border-box;
+        }
+        :is(#pop1, #pop2) {
+            --modal-minmax-length: 300px;
+            --modal-expanse-length: 100px;
+            --modal-header-open-background: blue;
+            --modal-header-background: black;
+        }
+        :is(#pop1, #pop2):not(._horz)::part(main) {
+            /*height: 150vh;*/
+        }
+        :is(#pop1, #pop2)._horz::part(main) {
+            width: 150vw;/**/
+        }
+        /* ----------- */
+        /* 1 */
+        .container {
+            height: 100vh;
+        }
+        /* 1.1 */
+        .view {
+            position: relative;
+            background: gray;
+        }
+        /* 1.2 */
+        .content {
+            min-height: 200vh;
+            padding: 20px;
+        }
+        /* 1.1.1 */
+        .sticky-header {
+            background-color: dimgray;
+        }
+        /* 1.1.1.1 */
+        .sticky-header-content {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            padding: 1rem;
+        }
+        .sticky-header.shrinks :is(._shrinks-in, ._shrinks-out) {
+            position: absolute;
+            bottom: 1rem;
+            right: 1rem;
+        }
+        .sticky-header.shrinks ._shrinks-out {
+            left: 1rem;
+        }
+        /* ----------- */
+        /* 1 */
+        .container {
+            /* overrideable styles */
+            position: relative;
+            /* styles */
+            overflow-y: auto;
+            /* measurements */
+            container-type: size;
+            --sticky-header-height: 25cqh;
+            --sticky-header-window-height: calc(100cqh - var(--sticky-header-height));
+        }
+        /* 1.1 */
+        .view:has(.sticky-header.shrinks, .scrollbar-track) {
+            /* scroll-tracking */
+            view-timeline: --view-scroll block;
+            /* vars */
+            --header-shrink-range: contain 0% contain var(--sticky-header-shrink-height, 0px);
+            --scrollbar-appear-range: contain var(--sticky-header-shrink-height, 0px) contain 10px;
+            --scrollbar-progress-range: contain var(--sticky-header-shrink-height, 0px) contain 100%;
+        }
+        /* 1.1.1 */
+        .sticky-header {
+            /* styles */
+            position: sticky;
+            top: calc(var(--sticky-header-shrink-height, 0px) * -1);
+            z-index: 1;
+            /* measurements */
+            margin-bottom: var(--sticky-header-window-height);
+        }
+        /* 1.1.2 */
+        .content {
+            /* measurements */
+            margin-top: calc(var(--sticky-header-window-height) * -1);
+        }
+        /* ----------- */
+        /* 1.1.1.1 */
+        .sticky-header-content {
+            /* measurements */
+            height: var(--sticky-header-height);
+        }
+        /* 1.1.1.1 */
+        .sticky-header.shrinks .sticky-header-content {
+            /* measurements */
+            height: calc(var(--sticky-header-height) + var(--sticky-header-shrink-height, 0px));
+            /* styles */
+            overflow: hidden;
+        }
+        /* 1.1.1.1.1 */
+        .sticky-header.shrinks,
+        .sticky-header.shrinks :is(._shrinks-to-center, ._shrinks-in, ._shrinks-out) {
+            /* scroll-animation */
+            animation-timing-function: linear;
+            animation-timeline: --view-scroll;
+            animation-range: var(--header-shrink-range);
+            animation-fill-mode: forwards;
+        }
+        /* 1.1.1.1.1 */
+        .sticky-header.shrinks {
+            /* scroll-animation */
+            animation-name: header-shrink-to-background;
+        }
+        .sticky-header.shrinks ._shrinks-to-center {
+            /* scroll-animation */
+            animation-name: header-shrink-to-center-effect;
+        }
+        .sticky-header.shrinks ._shrinks-in {
+            /* scroll-animation */
+            animation-name: header-shrink-in-effect;
+        }
+        .sticky-header.shrinks ._shrinks-out {
+            /* scroll-animation */
+            animation-name: header-shrink-out-effect;
+        }
+        /* 1.1.1.2 */
+        .sticky-header-window {
+            /* styles */
+            position: absolute;
+            width: 100%;
+            pointer-events: none;
+            display: flex;
+            justify-content: flex-end;
+            /* measurements */
+            height: var(--sticky-header-window-height);
+        }
+        /* 1.1.1.2.1 */
+        .scrollbar-track {
+            /* styles */
+            position: relative;
+            height: 100%;
+            opacity: 0;
+            /* default styles */
+            padding: 5px;
+            /* scroll-animation */
+            animation: appear linear;
+            animation-timeline: --view-scroll;
+            animation-range: var(--scrollbar-appear-range);
+            animation-fill-mode: forwards;
+        }
+        /* 1.1.1.2.1.1 */
+        .scrollbar-thumb {
+            /* overrideable styles */
+            width: 8px;
+            height: 40px;
+            background: #00d4ff;
+            border-radius: 4px;
+            /* scroll-animation */
+            animation: move-scrollbar-thumb linear both;
+            animation-timeline: --view-scroll;
+            animation-range: var(--scrollbar-progress-range);
+        }
+        /* ----------- */
+        @keyframes header-shrink-to-background {
+            from {
+                background-color: transparent;
+            }
+            to {
+                background-color: var(--sticky-header-shrink-background);
+            }
+        }
+        @keyframes header-shrink-to-center-effect {
+            from {
+                transform: translateY(0);
+                opacity: 1;
+            }
+            to {
+                transform: translateY(calc(var(--sticky-header-shrink-height, 0px) / 2));
+                opacity: 0;
+            }
+        }
+        @keyframes header-shrink-in-effect {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        @keyframes header-shrink-out-effect {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0;
+            }
+        }
+        @keyframes appear {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        @keyframes move-scrollbar-thumb {
+            from {
+                transform: translateY(0);
+            }
+            to {
+                transform: translateY(calc(var(--sticky-header-window-height) - 40px - 20px));
+            }
+        }
+    </style>
+</body>
+</html>