@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-dialog.js

@@ -1,7 +1,55 @@
 import { createDialog } from '@chromvoid/headless-ui/dialog';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 let cvDialogNonce = 0;
+let hasWarnedAboutTriggerSlot = false;
+function getDeepActiveElement() {
+    let activeElement = document.activeElement;
+    while (activeElement instanceof HTMLElement &&
+        activeElement.shadowRoot?.activeElement instanceof HTMLElement) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement instanceof HTMLElement ? activeElement : null;
+}
+function getFocusRestoreTarget() {
+    const activeElement = getDeepActiveElement();
+    if (!activeElement || activeElement === document.body || activeElement === document.documentElement) {
+        return null;
+    }
+    return activeElement;
+}
+function getIdSelector(id) {
+    return `[id="${id.replace(/["\\]/g, '\\$&')}"]`;
+}
+function findComposedElementById(root, id) {
+    const direct = root.querySelector?.(getIdSelector(id));
+    if (direct instanceof HTMLElement)
+        return direct;
+    const elements = Array.from(root.querySelectorAll?.('*') ?? []);
+    for (const element of elements) {
+        if (element.shadowRoot) {
+            const shadowMatch = findComposedElementById(element.shadowRoot, id);
+            if (shadowMatch)
+                return shadowMatch;
+        }
+        if (typeof HTMLSlotElement === 'undefined' || !(element instanceof HTMLSlotElement))
+            continue;
+        for (const assigned of element.assignedElements({ flatten: true })) {
+            if (assigned.id === id && assigned instanceof HTMLElement)
+                return assigned;
+            const assignedMatch = findComposedElementById(assigned, id);
+            if (assignedMatch)
+                return assignedMatch;
+            if (assigned.shadowRoot) {
+                const assignedShadowMatch = findComposedElementById(assigned.shadowRoot, id);
+                if (assignedShadowMatch)
+                    return assignedShadowMatch;
+            }
+        }
+    }
+    return null;
+}
 export class CVDialog extends ReatomLitElement {
     static elementName = 'cv-dialog';
     static get properties() {
@@ -10,7 +58,11 @@ export class CVDialog extends ReatomLitElement {
             modal: { type: Boolean, reflect: true },
             type: { type: String, reflect: true },
             closeOnEscape: { type: Boolean, attribute: 'close-on-escape', reflect: true },
-            closeOnOutsidePointer: { type: Boolean, attribute: 'close-on-outside-pointer', reflect: true },
+            closeOnOutsidePointer: {
+                type: Boolean,
+                attribute: 'close-on-outside-pointer',
+                reflect: true,
+            },
             closeOnOutsideFocus: { type: Boolean, attribute: 'close-on-outside-focus', reflect: true },
             initialFocusId: { type: String, attribute: 'initial-focus-id' },
             noHeader: { type: Boolean, attribute: 'no-header', reflect: true },
@@ -23,6 +75,15 @@ export class CVDialog extends ReatomLitElement {
     previousBodyOverflow = '';
     suppressLifecycleFromUpdate = false;
     lifecycleToken = 0;
+    focusRestoreTarget = null;
+    portalVisible = false;
+    presenceState = 'closed';
+    presenceAnimationTimeout = 0;
+    pendingFocusRestoreTargetId = null;
+    shouldAnimatePresence = false;
+    suppressNextNativeCancel = false;
+    lastTouchClientY = 0;
+    handleDocumentFocusInBound = (event) => this.handleDocumentFocusIn(event);
     constructor() {
         super();
         this.open = false;
@@ -35,11 +96,44 @@ export class CVDialog extends ReatomLitElement {
         this.noHeader = false;
         this.closable = true;
         this.model = this.createModel();
+        this.portalVisible = this.open;
+        this.presenceState = this.open ? 'open' : 'closed';
     }
     static styles = [
         css `
       :host {
         display: inline-block;
+        --cv-dialog-viewport-inset-top: var(--safe-area-top, env(safe-area-inset-top, 0px));
+        --cv-dialog-viewport-inset-right: var(--safe-area-right, env(safe-area-inset-right, 0px));
+        --cv-dialog-viewport-inset-bottom: calc(
+          var(--safe-area-bottom-active, var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))) +
+            var(--visual-viewport-bottom-inset, 0px)
+        );
+        --cv-dialog-viewport-inset-left: var(--safe-area-left, env(safe-area-inset-left, 0px));
+        --cv-dialog-overlay-padding-block-start: calc(
+          var(--cv-dialog-padding-block, var(--cv-space-4, 16px)) + var(--cv-dialog-viewport-inset-top)
+        );
+        --cv-dialog-overlay-padding-inline-end: calc(
+          var(--cv-dialog-padding-inline, var(--cv-space-4, 16px)) + var(--cv-dialog-viewport-inset-right)
+        );
+        --cv-dialog-overlay-padding-block-end: calc(
+          var(--cv-dialog-padding-block, var(--cv-space-4, 16px)) + var(--cv-dialog-viewport-inset-bottom)
+        );
+        --cv-dialog-overlay-padding-inline-start: calc(
+          var(--cv-dialog-padding-inline, var(--cv-space-4, 16px)) + var(--cv-dialog-viewport-inset-left)
+        );
+        --cv-dialog-available-inline-size: calc(
+          100vw - var(--cv-dialog-overlay-padding-inline-start) - var(--cv-dialog-overlay-padding-inline-end)
+        );
+        --cv-dialog-available-block-size: calc(
+          100dvh - var(--cv-dialog-overlay-padding-block-start) - var(--cv-dialog-overlay-padding-block-end)
+        );
+        --cv-dialog-transition-duration: var(--cv-duration-fast, 120ms);
+        --cv-dialog-transition-easing-open: var(--cv-easing-decelerate, cubic-bezier(0, 0, 0.2, 1));
+        --cv-dialog-transition-easing-close: var(--cv-easing-accelerate, cubic-bezier(0.4, 0, 1, 1));
+        --cv-dialog-content-transition-property: opacity, transform;
+        --cv-dialog-content-closed-transform: translate3d(0, 8px, 0) scale(0.98);
+        --cv-dialog-content-open-transform: translate3d(0, 0, 0) scale(1);
       }
 
       [part='trigger'] {
@@ -60,25 +154,90 @@ export class CVDialog extends ReatomLitElement {
         outline-offset: 1px;
       }
 
+      .portal-shell {
+        position: fixed;
+        inset: 0;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+        inline-size: 100vw;
+        max-inline-size: none;
+        block-size: 100dvh;
+        max-block-size: none;
+        overflow: visible;
+        transition:
+          display var(--cv-dialog-transition-duration) allow-discrete,
+          overlay var(--cv-dialog-transition-duration) allow-discrete;
+        transition-behavior: allow-discrete;
+      }
+
+      .portal-shell::backdrop {
+        background: transparent;
+      }
+
+      .portal-shell[hidden] {
+        display: none;
+      }
+
+      .popover-shell {
+        position: fixed;
+        inset: 0;
+      }
+
       [part='overlay'] {
         position: fixed;
         inset: 0;
         z-index: var(--cv-dialog-z-index, 40);
         display: grid;
         place-items: center;
-        background: var(--cv-dialog-overlay-color, color-mix(in oklab, black 56%, transparent));
-        padding: var(--cv-space-4, 16px);
+        background: transparent;
+        padding-block: var(--cv-dialog-overlay-padding-block-start) var(--cv-dialog-overlay-padding-block-end);
+        padding-inline: var(--cv-dialog-overlay-padding-inline-start)
+          var(--cv-dialog-overlay-padding-inline-end);
+        overscroll-behavior: contain;
+        transition: display var(--cv-dialog-transition-duration) allow-discrete;
+        transition-behavior: allow-discrete;
+      }
+
+      [part='overlay']::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        background: var(--cv-dialog-overlay-color, var(--cv-color-overlay));
+        opacity: 0;
+        transition: opacity var(--cv-dialog-transition-duration) var(--cv-dialog-transition-easing-open);
+        pointer-events: none;
       }
 
       [part='overlay'][hidden] {
         display: none;
       }
 
+      [part='overlay'][data-state='opening']::before,
+      [part='overlay'][data-state='open']::before {
+        opacity: 1;
+      }
+
+      [part='overlay'][data-state='closing']::before {
+        opacity: 0;
+        transition-timing-function: var(--cv-dialog-transition-easing-close);
+      }
+
       [part='content'] {
+        position: relative;
+        z-index: 1;
         box-sizing: border-box;
-        inline-size: var(--cv-dialog-width, min(560px, calc(100vw - 32px)));
-        max-block-size: var(--cv-dialog-max-height, calc(100dvh - 32px));
+        inline-size: var(--cv-dialog-width, var(--cv-dialog-width-m, min(560px, calc(100vw - 32px))));
+        max-inline-size: min(var(--cv-dialog-width, 100%), var(--cv-dialog-available-inline-size));
+        max-block-size: min(
+          var(--cv-dialog-max-height, var(--cv-dialog-available-block-size)),
+          var(--cv-dialog-available-block-size)
+        );
         overflow: auto;
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
         display: grid;
         gap: var(--cv-space-3, 12px);
         padding: var(--cv-space-4, 16px);
@@ -86,6 +245,24 @@ export class CVDialog extends ReatomLitElement {
         border: 1px solid var(--cv-color-border, #2a3245);
         background: var(--cv-color-surface-elevated, #1d2432);
         color: var(--cv-color-text, #e8ecf6);
+        opacity: 0;
+        transform: var(--cv-dialog-content-closed-transform);
+        transition-property: var(--cv-dialog-content-transition-property);
+        transition-duration: var(--cv-dialog-transition-duration);
+        transition-timing-function: var(--cv-dialog-transition-easing-open);
+        will-change: opacity, transform;
+      }
+
+      [part='content'][data-state='opening'],
+      [part='content'][data-state='open'] {
+        opacity: 1;
+        transform: var(--cv-dialog-content-open-transform);
+      }
+
+      [part='content'][data-state='closing'] {
+        opacity: 0;
+        transform: var(--cv-dialog-content-closed-transform);
+        transition-timing-function: var(--cv-dialog-transition-easing-close);
       }
 
       [part='content']:focus-visible {
@@ -101,6 +278,12 @@ export class CVDialog extends ReatomLitElement {
         align-items: start;
       }
 
+      [part='header'],
+      [part='body'],
+      [part='footer'] {
+        min-inline-size: 0;
+      }
+
       [part='title'] {
         grid-column: 1;
         margin: 0;
@@ -139,7 +322,7 @@ export class CVDialog extends ReatomLitElement {
 
       [part='header-close']:hover {
         color: var(--cv-color-text, #e8ecf6);
-        background: color-mix(in oklab, var(--cv-color-text, #e8ecf6) 8%, transparent);
+        background: var(--cv-color-surface-highlight);
       }
 
       [part='header-close']:focus-visible {
@@ -164,6 +347,31 @@ export class CVDialog extends ReatomLitElement {
         gap: var(--cv-space-2, 8px);
         justify-content: flex-end;
       }
+
+      @starting-style {
+        [part='overlay'][data-state='opening']::before,
+        [part='overlay'][data-state='open']::before {
+          opacity: 0;
+        }
+
+        [part='content'][data-state='opening'],
+        [part='content'][data-state='open'] {
+          opacity: 0;
+          transform: var(--cv-dialog-content-closed-transform);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          --cv-dialog-transition-duration: 0ms;
+          --cv-dialog-content-closed-transform: none;
+          --cv-dialog-content-open-transform: none;
+        }
+
+        [part='content'] {
+          transform: none;
+        }
+      }
     `,
     ];
     static define() {
@@ -173,10 +381,13 @@ export class CVDialog extends ReatomLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.warnAboutDeprecatedTriggerSlot();
         this.syncOutsideFocusListener();
         this.syncScrollLock();
     }
     disconnectedCallback() {
+        this.clearPresenceAnimationQueue();
+        this.closeNativeShells();
         super.disconnectedCallback();
         this.syncOutsideFocusListener(true);
         this.releaseScrollLock();
@@ -192,6 +403,9 @@ export class CVDialog extends ReatomLitElement {
             const wasOpen = this.model.state.isOpen();
             this.model = this.createModel(wasOpen);
         }
+        if (changedProperties.has('open') && this.open && changedProperties.get('open') !== true) {
+            this.captureFocusRestoreTarget();
+        }
         if (changedProperties.has('open') && this.model.state.isOpen() !== this.open) {
             if (this.open) {
                 this.model.actions.open();
@@ -200,21 +414,57 @@ export class CVDialog extends ReatomLitElement {
                 this.model.actions.close();
             }
         }
+        if (changedProperties.has('open')) {
+            this.clearPresenceAnimationQueue();
+            if (this.open) {
+                this.portalVisible = true;
+                this.presenceState = this.hasUpdated ? 'opening' : 'open';
+            }
+            else {
+                this.presenceState = 'closing';
+                if (!this.hasUpdated) {
+                    this.portalVisible = false;
+                    this.presenceState = 'closed';
+                }
+            }
+            this.shouldAnimatePresence = this.hasUpdated;
+        }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
+        this.warnAboutDeprecatedTriggerSlot();
+        this.syncTopLayerVisibility();
         this.syncOutsideFocusListener();
         this.syncScrollLock();
+        this.syncRenderedPresenceState();
         if (changedProperties.has('open')) {
             const previousOpen = changedProperties.get('open');
+            const hasLogicalTransition = previousOpen !== undefined && previousOpen !== this.open;
             if (this.suppressLifecycleFromUpdate) {
                 this.suppressLifecycleFromUpdate = false;
             }
-            else if (previousOpen !== undefined && previousOpen !== this.open) {
+            else if (hasLogicalTransition) {
                 this.dispatchLifecycleTransition(this.open);
             }
+            if (hasLogicalTransition && previousOpen === true && this.open === false) {
+                this.queueFocusRestore(this.model.state.restoreTargetId());
+            }
+            if (hasLogicalTransition) {
+                if (this.shouldAnimatePresence) {
+                    if (this.open) {
+                        this.startOpenPresenceTransition();
+                    }
+                    else {
+                        this.startClosePresenceTransition();
+                    }
+                }
+                else {
+                    this.finishPresenceTransition(this.open);
+                }
+            }
+            this.shouldAnimatePresence = false;
             if (this.open) {
-                this.focusInitialTarget();
+                queueMicrotask(() => this.focusInitialTarget());
             }
         }
     }
@@ -230,6 +480,112 @@ export class CVDialog extends ReatomLitElement {
             initialFocusId: this.initialFocusId || undefined,
         });
     }
+    clearPresenceAnimationQueue() {
+        if (this.presenceAnimationTimeout) {
+            window.clearTimeout(this.presenceAnimationTimeout);
+            this.presenceAnimationTimeout = 0;
+        }
+    }
+    startOpenPresenceTransition() {
+        if (!this.open)
+            return;
+        this.presenceState = 'open';
+        this.syncRenderedPresenceState();
+        const duration = this.getPresenceTransitionDuration();
+        if (duration === 0) {
+            this.finishPresenceTransition(true);
+            return;
+        }
+        const token = this.lifecycleToken;
+        this.presenceAnimationTimeout = window.setTimeout(() => {
+            this.presenceAnimationTimeout = 0;
+            if (!this.open || token !== this.lifecycleToken)
+                return;
+            this.finishPresenceTransition(true);
+        }, duration);
+    }
+    startClosePresenceTransition() {
+        const duration = this.getPresenceTransitionDuration();
+        if (duration === 0) {
+            this.finishPresenceTransition(false);
+            return;
+        }
+        const token = this.lifecycleToken;
+        this.presenceAnimationTimeout = window.setTimeout(() => {
+            this.presenceAnimationTimeout = 0;
+            if (this.open || token !== this.lifecycleToken)
+                return;
+            this.finishPresenceTransition(false);
+        }, duration);
+    }
+    finishPresenceTransition(open) {
+        if (this.open !== open)
+            return;
+        if (open) {
+            this.portalVisible = true;
+            this.presenceState = 'open';
+            this.syncRenderedPresenceState();
+            this.dispatchLifecycleEvent('cv-after-show');
+            return;
+        }
+        this.portalVisible = false;
+        this.presenceState = 'closed';
+        this.syncTopLayerVisibility();
+        this.syncScrollLock();
+        this.syncRenderedPresenceState();
+        this.restoreQueuedFocus();
+        this.dispatchLifecycleEvent('cv-after-hide');
+    }
+    syncRenderedPresenceState() {
+        const shell = this.getCurrentPortalShell();
+        const overlay = this.getPortalOverlay();
+        const content = this.getContentElement();
+        if (shell) {
+            shell.dataset['state'] = this.presenceState;
+            shell.hidden = !this.portalVisible;
+        }
+        if (overlay) {
+            overlay.hidden = !this.portalVisible;
+            overlay.dataset['state'] = this.presenceState;
+        }
+        if (content) {
+            content.dataset['state'] = this.presenceState;
+        }
+    }
+    shouldLockScrollForPresence() {
+        return this.portalVisible && this.modal;
+    }
+    getPresenceTransitionDuration() {
+        return Math.max(this.readTransitionDuration(this.getPortalOverlay()), this.readTransitionDuration(this.getContentElement()));
+    }
+    readTransitionDuration(element) {
+        if (!element)
+            return 0;
+        const styles = getComputedStyle(element);
+        const durations = this.parseTimeValues(styles.transitionDuration);
+        const delays = this.parseTimeValues(styles.transitionDelay);
+        const transitionCount = Math.max(durations.length, delays.length);
+        let maxDuration = 0;
+        for (let index = 0; index < transitionCount; index += 1) {
+            const duration = durations[index] ?? durations[durations.length - 1] ?? 0;
+            const delay = delays[index] ?? delays[delays.length - 1] ?? 0;
+            maxDuration = Math.max(maxDuration, duration + delay);
+        }
+        return maxDuration;
+    }
+    parseTimeValues(value) {
+        return value
+            .split(',')
+            .map((entry) => entry.trim())
+            .filter(Boolean)
+            .map((entry) => {
+            if (entry.endsWith('ms'))
+                return Number.parseFloat(entry);
+            if (entry.endsWith('s'))
+                return Number.parseFloat(entry) * 1000;
+            return Number.parseFloat(entry) || 0;
+        });
+    }
     captureState() {
         return {
             open: this.model.state.isOpen(),
@@ -257,13 +613,8 @@ export class CVDialog extends ReatomLitElement {
         }));
     }
     dispatchLifecycleTransition(open) {
-        const token = ++this.lifecycleToken;
+        ++this.lifecycleToken;
         this.dispatchLifecycleEvent(open ? 'cv-show' : 'cv-hide');
-        this.updateComplete.then(() => {
-            if (this.lifecycleToken !== token)
-                return;
-            this.dispatchLifecycleEvent(open ? 'cv-after-show' : 'cv-after-hide');
-        });
     }
     applyInteractionResult(previous) {
         const nextOpen = this.model.state.isOpen();
@@ -278,23 +629,149 @@ export class CVDialog extends ReatomLitElement {
         else {
             this.open = nextOpen;
         }
-        const restoreTargetId = this.model.state.restoreTargetId();
-        if (restoreTargetId && previous.restoreTargetId !== restoreTargetId) {
-            const trigger = this.shadowRoot?.querySelector(`[id="${restoreTargetId}"]`);
-            trigger?.focus();
+        if (!nextOpen) {
+            this.queueFocusRestore(previous.restoreTargetId);
+        }
+    }
+    captureFocusRestoreTarget() {
+        this.focusRestoreTarget = getFocusRestoreTarget();
+    }
+    queueFocusRestore(restoreTargetId) {
+        this.pendingFocusRestoreTargetId = restoreTargetId;
+    }
+    restoreQueuedFocus() {
+        this.restoreFocus(this.pendingFocusRestoreTargetId);
+        this.pendingFocusRestoreTargetId = null;
+    }
+    restoreFocus(restoreTargetId) {
+        const target = (this.focusRestoreTarget?.isConnected ? this.focusRestoreTarget : null) ??
+            (restoreTargetId
+                ? (this.shadowRoot?.querySelector(`[id="${restoreTargetId}"]`) ?? null)
+                : null);
+        target?.focus({ preventScroll: true });
+        this.focusRestoreTarget = null;
+    }
+    getPortalOverlay() {
+        return this.shadowRoot?.querySelector('[part="overlay"]');
+    }
+    getContentElement() {
+        return this.shadowRoot?.querySelector('[part="content"]');
+    }
+    getModalShell() {
+        return this.shadowRoot?.querySelector('dialog.portal-shell');
+    }
+    getPopoverShell() {
+        return this.shadowRoot?.querySelector('.popover-shell');
+    }
+    getCurrentPortalShell() {
+        return this.modal ? this.getModalShell() : this.getPopoverShell();
+    }
+    isPopoverOpen(shell) {
+        return shell.dataset['popoverOpen'] === 'true';
+    }
+    openPopoverShell(shell) {
+        shell.hidden = false;
+        if (typeof shell.showPopover === 'function') {
+            try {
+                shell.showPopover();
+            }
+            catch {
+                // noop fallback for tests or unsupported environments
+            }
+        }
+        shell.dataset['popoverOpen'] = 'true';
+    }
+    closePopoverShell(shell) {
+        if (typeof shell.hidePopover === 'function' && this.isPopoverOpen(shell)) {
+            try {
+                shell.hidePopover();
+            }
+            catch {
+                // noop fallback for tests or unsupported environments
+            }
+        }
+        delete shell.dataset['popoverOpen'];
+        shell.hidden = true;
+    }
+    syncTopLayerVisibility() {
+        const modalShell = this.getModalShell();
+        const popoverShell = this.getPopoverShell();
+        if (this.modal) {
+            if (popoverShell) {
+                this.closePopoverShell(popoverShell);
+            }
+            if (!modalShell)
+                return;
+            if (this.portalVisible) {
+                modalShell.hidden = false;
+                if (!modalShell.open) {
+                    try {
+                        modalShell.showModal();
+                    }
+                    catch {
+                        modalShell.setAttribute('open', '');
+                    }
+                }
+            }
+            else {
+                if (modalShell.open) {
+                    try {
+                        modalShell.close();
+                    }
+                    catch {
+                        modalShell.removeAttribute('open');
+                    }
+                }
+                modalShell.hidden = true;
+            }
+            return;
+        }
+        if (modalShell?.open) {
+            try {
+                modalShell.close();
+            }
+            catch {
+                modalShell.removeAttribute('open');
+            }
+        }
+        if (modalShell) {
+            modalShell.hidden = true;
+        }
+        if (!popoverShell)
+            return;
+        if (this.portalVisible) {
+            this.openPopoverShell(popoverShell);
+        }
+        else {
+            this.closePopoverShell(popoverShell);
+        }
+    }
+    closeNativeShells() {
+        const modalShell = this.getModalShell();
+        const popoverShell = this.getPopoverShell();
+        if (modalShell?.open) {
+            try {
+                modalShell.close();
+            }
+            catch {
+                modalShell.removeAttribute('open');
+            }
+        }
+        if (popoverShell) {
+            this.closePopoverShell(popoverShell);
         }
     }
     syncOutsideFocusListener(forceOff = false) {
         const shouldListen = !forceOff && this.open;
         if (shouldListen) {
-            document.addEventListener('focusin', this.handleDocumentFocusIn);
+            document.addEventListener('focusin', this.handleDocumentFocusInBound);
         }
         else {
-            document.removeEventListener('focusin', this.handleDocumentFocusIn);
+            document.removeEventListener('focusin', this.handleDocumentFocusInBound);
         }
     }
     syncScrollLock() {
-        if (!this.model.state.shouldLockScroll()) {
+        if (!this.shouldLockScrollForPresence()) {
             this.releaseScrollLock();
             return;
         }
@@ -314,27 +791,87 @@ export class CVDialog extends ReatomLitElement {
         const contentProps = this.model.contracts.getContentProps();
         const requestedId = contentProps['data-initial-focus'];
         if (requestedId) {
-            const explicit = this.querySelector(`#${requestedId}`) ??
-                this.shadowRoot?.querySelector(`#${requestedId}`);
+            const explicit = findComposedElementById(this, requestedId) ?? findComposedElementById(this.renderRoot, requestedId);
             if (explicit) {
                 explicit.focus();
                 return;
             }
         }
-        const content = this.shadowRoot?.querySelector('[part="content"]');
-        content?.focus();
+        this.getContentElement()?.focus();
+    }
+    getTouchClientY(event) {
+        const touch = event.touches[0] ?? event.changedTouches[0];
+        return touch?.clientY ?? null;
     }
-    handleDocumentFocusIn = (event) => {
+    isVerticallyScrollable(element) {
+        const styles = window.getComputedStyle(element);
+        const overflowY = styles.overflowY || styles.overflow;
+        return /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;
+    }
+    collectScrollableContentAncestors(event, content) {
+        const path = event.composedPath();
+        const contentIndex = path.indexOf(content);
+        if (contentIndex >= 0) {
+            return path
+                .slice(0, contentIndex + 1)
+                .filter((node) => node instanceof HTMLElement);
+        }
+        const { target } = event;
+        const eventTarget = target instanceof HTMLElement
+            ? target
+            : target instanceof Node && target.parentElement instanceof HTMLElement
+                ? target.parentElement
+                : null;
+        if (!eventTarget || !content.contains(eventTarget))
+            return [];
+        const ancestors = [];
+        let current = eventTarget;
+        while (current) {
+            ancestors.push(current);
+            if (current === content)
+                return ancestors;
+            current = current.parentElement;
+        }
+        return [];
+    }
+    canScrollDialogContent(event, deltaY) {
+        const content = this.getContentElement();
+        if (!content)
+            return false;
+        for (const current of this.collectScrollableContentAncestors(event, content)) {
+            if (!this.isVerticallyScrollable(current))
+                continue;
+            const maxScrollTop = current.scrollHeight - current.clientHeight;
+            if (deltaY < 0 && current.scrollTop > 0)
+                return true;
+            if (deltaY > 0 && current.scrollTop < maxScrollTop)
+                return true;
+            if (deltaY === 0)
+                return true;
+        }
+        return false;
+    }
+    warnAboutDeprecatedTriggerSlot() {
+        if (hasWarnedAboutTriggerSlot)
+            return;
+        if (!this.querySelector('[slot="trigger"]'))
+            return;
+        hasWarnedAboutTriggerSlot = true;
+        globalThis['console']?.warn?.('[cv-dialog] slot="trigger" is deprecated. Control dialog visibility with `.open` or use createDialogController/dialogService.');
+    }
+    handleDocumentFocusIn(event) {
         if (!this.open)
             return;
         const path = event.composedPath();
-        if (path.includes(this))
+        const overlay = this.getPortalOverlay();
+        if (path.includes(this) || (overlay && path.includes(overlay)))
             return;
         const previous = this.captureState();
         this.model.actions.handleOutsideFocus();
         this.applyInteractionResult(previous);
-    };
+    }
     handleTriggerClick() {
+        this.captureFocusRestoreTarget();
         const previous = this.captureState();
         this.model.contracts.getTriggerProps().onClick();
         this.applyInteractionResult(previous);
@@ -343,6 +880,7 @@ export class CVDialog extends ReatomLitElement {
         if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
             event.preventDefault();
         }
+        this.captureFocusRestoreTarget();
         const previous = this.captureState();
         this.model.contracts.getTriggerProps().onKeyDown({ key: event.key });
         this.applyInteractionResult(previous);
@@ -354,60 +892,93 @@ export class CVDialog extends ReatomLitElement {
         this.model.contracts.getOverlayProps().onPointerDownOutside();
         this.applyInteractionResult(previous);
     }
+    handleOverlayTouchStart(event) {
+        const clientY = this.getTouchClientY(event);
+        if (clientY !== null) {
+            this.lastTouchClientY = clientY;
+        }
+    }
+    handleOverlayTouchMove(event) {
+        if (!this.open || !this.modal)
+            return;
+        const clientY = this.getTouchClientY(event);
+        if (clientY === null) {
+            event.preventDefault();
+            return;
+        }
+        const deltaY = this.lastTouchClientY - clientY;
+        this.lastTouchClientY = clientY;
+        if (this.canScrollDialogContent(event, deltaY))
+            return;
+        event.preventDefault();
+    }
+    handleOverlayWheel(event) {
+        if (!this.open || !this.modal)
+            return;
+        if (this.canScrollDialogContent(event, event.deltaY))
+            return;
+        event.preventDefault();
+    }
     handleContentKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
+            this.suppressNextNativeCancel = true;
         }
         const previous = this.captureState();
         this.model.contracts.getContentProps().onKeyDown({ key: event.key });
         this.applyInteractionResult(previous);
     }
+    handleNativeCancel(event) {
+        event.preventDefault();
+        if (this.suppressNextNativeCancel) {
+            this.suppressNextNativeCancel = false;
+            return;
+        }
+        if (!this.closeOnEscape)
+            return;
+        const previous = this.captureState();
+        this.model.contracts.getContentProps().onKeyDown({ key: 'Escape' });
+        this.applyInteractionResult(previous);
+    }
     handleHeaderCloseClick() {
         const previous = this.captureState();
         this.model.contracts.getHeaderCloseButtonProps().onClick();
         this.applyInteractionResult(previous);
     }
-    render() {
-        const triggerProps = this.model.contracts.getTriggerProps();
-        const overlayProps = this.model.contracts.getOverlayProps();
+    renderContent() {
         const contentProps = this.model.contracts.getContentProps();
         const titleProps = this.model.contracts.getTitleProps();
         const descriptionProps = this.model.contracts.getDescriptionProps();
         const headerCloseProps = this.model.contracts.getHeaderCloseButtonProps();
         return html `
-      <button
-        id=${triggerProps.id}
-        role=${triggerProps.role}
-        tabindex=${triggerProps.tabindex}
-        aria-haspopup=${triggerProps['aria-haspopup']}
-        aria-expanded=${triggerProps['aria-expanded']}
-        aria-controls=${triggerProps['aria-controls']}
-        part="trigger"
-        type="button"
-        @click=${this.handleTriggerClick}
-        @keydown=${this.handleTriggerKeyDown}
-      >
-        <slot name="trigger">Open dialog</slot>
-      </button>
-
       <div
-        id=${overlayProps.id}
-        data-open=${overlayProps['data-open']}
-        ?hidden=${overlayProps.hidden}
+        id=${this.model.contracts.getOverlayProps().id}
+        class="cv-u-discrete-presence"
+        data-open=${this.model.contracts.getOverlayProps()['data-open']}
+        data-state=${this.presenceState}
+        ?hidden=${!this.portalVisible}
         part="overlay"
         @mousedown=${this.handleOverlayPointerDown}
+        @click=${this.handleOverlayPointerDown}
+        @touchstart=${this.handleOverlayTouchStart}
+        @touchmove=${this.handleOverlayTouchMove}
+        @wheel=${this.handleOverlayWheel}
       >
         <section
           id=${contentProps.id}
+          class="cv-u-discrete-presence"
           role=${contentProps.role}
           tabindex=${contentProps.tabindex}
           aria-modal=${contentProps['aria-modal']}
           aria-labelledby=${contentProps['aria-labelledby'] ?? nothing}
           aria-describedby=${contentProps['aria-describedby'] ?? nothing}
           data-initial-focus=${contentProps['data-initial-focus'] ?? nothing}
+          data-state=${this.presenceState}
           part="content"
           @keydown=${this.handleContentKeyDown}
         >
+          <slot name="before-header"></slot>
+
           <header part="header" ?hidden=${this.noHeader}>
             <h2 id=${titleProps.id} part="title">
               <slot name="title">Dialog</slot>
@@ -417,31 +988,31 @@ export class CVDialog extends ReatomLitElement {
             </p>
             ${this.closable
             ? html `
-                  <button
-                    id=${headerCloseProps.id}
-                    role=${headerCloseProps.role}
-                    tabindex=${headerCloseProps.tabindex}
-                    aria-label=${headerCloseProps['aria-label']}
-                    type="button"
-                    part="header-close"
-                    @click=${this.handleHeaderCloseClick}
-                  >
-                    <slot name="header-close"
-                      ><svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                        stroke-linecap="round"
-                      >
-                        <line x1="4" y1="4" x2="12" y2="12" />
-                        <line x1="12" y1="4" x2="4" y2="12" />
-                      </svg></slot
+                    <button
+                      id=${headerCloseProps.id}
+                      role=${headerCloseProps.role}
+                      tabindex=${headerCloseProps.tabindex}
+                      aria-label=${headerCloseProps['aria-label']}
+                      type="button"
+                      part="header-close"
+                      @click=${this.handleHeaderCloseClick}
                     >
-                  </button>
-                `
+                      <slot name="header-close"
+                        ><svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                        >
+                          <line x1="4" y1="4" x2="12" y2="12" />
+                          <line x1="12" y1="4" x2="4" y2="12" />
+                        </svg></slot
+                      >
+                    </button>
+                  `
             : nothing}
           </header>
 
@@ -456,4 +1027,45 @@ export class CVDialog extends ReatomLitElement {
       </div>
     `;
     }
+    render() {
+        const triggerProps = this.model.contracts.getTriggerProps();
+        return html `
+      <button
+        id=${triggerProps.id}
+        role=${triggerProps.role}
+        tabindex=${triggerProps.tabindex}
+        aria-haspopup=${triggerProps['aria-haspopup']}
+        aria-expanded=${triggerProps['aria-expanded']}
+        aria-controls=${triggerProps['aria-controls']}
+        part="trigger"
+        type="button"
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeyDown}
+      >
+        <slot name="trigger">Open dialog</slot>
+      </button>
+
+      ${this.modal
+            ? html `
+              <dialog
+                class="portal-shell cv-u-discrete-presence"
+                data-state=${this.presenceState}
+                ?hidden=${!this.portalVisible}
+                @cancel=${this.handleNativeCancel}
+              >
+                ${this.renderContent()}
+              </dialog>
+            `
+            : html `
+              <div
+                class="portal-shell popover-shell cv-u-discrete-presence"
+                popover="manual"
+                data-state=${this.presenceState}
+                ?hidden=${!this.portalVisible}
+              >
+                ${this.renderContent()}
+              </div>
+            `}
+    `;
+    }
 }