@material/web 1.0.0-pre.14 → 1.0.0-pre.15

package/dialog/internal/dialog.js

@@ -4,559 +4,335 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '../../elevation/elevation.js';
-import { html, LitElement } from 'lit';
+import '../../divider/divider.js';
+import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../internal/controller/events.js';
-import { createThrottle, msFromTimeCSSValue } from '../../internal/motion/animation.js';
-// This is required for decorators.
-// tslint:disable:no-new-decorators
-/**
- * Default close action.
- */
-export const CLOSE_ACTION = 'close';
-const OPENING_TRANSITION_PROP = '--_opening-transition-duration';
-const CLOSING_TRANSITION_PROP = '--_closing-transition-duration';
+import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION } from './animations.js';
 /**
  * A dialog component.
  *
- * @fires opening Dispatched when the dialog is opening before any animations.
+ * @fires open Dispatched when the dialog is opening before any animations.
  * @fires opened Dispatched when the dialog has opened after any animations.
- * @fires closing Dispatched when the dialog is closing before any animations.
+ * @fires close Dispatched when the dialog is closing before any animations.
  * @fires closed Dispatched when the dialog has closed after any animations.
- * @fires cancel The native HTMLDialogElement cancel event.
+ * @fires cancel Dispatched when the dialog has been canceled by clicking on the
+ *     scrim or pressing Escape.
  */
 export class Dialog extends LitElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open() {
+        return this.isOpen;
+    }
+    set open(open) {
+        if (open === this.isOpen) {
+            return;
+        }
+        this.isOpen = open;
+        if (open) {
+            this.setAttribute('open', '');
+            this.show();
+        }
+        else {
+            this.removeAttribute('open');
+            this.close();
+        }
+    }
     constructor() {
-        super(...arguments);
-        /**
-         * Opens the dialog when set to `true` and closes it when set to `false`.
-         */
-        this.open = false;
-        /**
-         * Setting fullscreen displays the dialog fullscreen on small screens.
-         * This can be customized via the `fullscreenBreakpoint` property.
-         * When showing fullscreen, the header will take up less vertical space, and
-         * the dialog will have a `showing-fullscreen`attribute, allowing content to
-         * be styled in this state.
-         *
-         * Dialogs can be sized by setting:
-         *
-         * * --md-dialog-container-min-block-size
-         * * --md-dialog-container-max-block-size
-         * * --md-dialog-container-min-inline-size
-         * * --md-dialog-container-max-inline-size
-         *
-         * These are typically configured via media queries and are independent of the
-         * fullscreen setting.
-         */
-        this.fullscreen = false;
-        /**
-         * A media query string specifying the breakpoint at which the dialog
-         * should be shown fullscreen. Note, this only applies when the `fullscreen`
-         * property is set.
-         *
-         * By default, the dialog is shown fullscreen on screens less than 600px wide
-         * or 400px tall.
-         */
-        this.fullscreenBreakpoint = '(max-width: 600px), (max-height: 400px)';
-        /**
-         * Hides the dialog footer, making any content slotted into the footer
-         * inaccessible.
-         */
-        this.footerHidden = false;
-        /**
-         * Renders footer content in a vertically stacked alignment rather than the
-         * normal horizontal alignment.
-         */
-        this.stacked = false;
-        /**
-         * When the dialog is closed it disptaches `closing` and `closed` events.
-         * These events have an action property which has a default value of
-         * the value of this property. Specific actions have explicit values but when
-         * a value is not specified, the default is used. For example, clicking the
-         * scrim, pressing escape, or clicking a button with an action attribute set
-         * produce an explicit action.
-         *
-         * Defaults to `close`.
-         */
-        this.defaultAction = CLOSE_ACTION;
+        super();
         /**
-         * The name of an attribute which can be placed on any element slotted into
-         * the dialog. If an element has an action attribute set, clicking it will
-         * close the dialog and the `closing` and `closed` events dispatched will
-         * have their action property set the value of this attribute on the
-         * clicked element.The default value is `dialog-action`. For example,
+         * Gets or sets the dialog's return value, usually to indicate which button
+         * a user pressed to close it.
          *
-         *   <md-dialog>
-         *    Content
-         *     <md-filled-button slot="footer" dialog-action="buy">
-         *       Buy
-         *     </md-filled-button>
-         *   </md-dialog>
-         */
-        this.actionAttribute = 'dialog-action';
-        /**
-         * When the dialog is opened, it will focus the first element which has
-         * an attribute name matching this property. The default value is
-         * `dialogFocus`. For example:
-         *
-         *  <md-dialog>
-         *    <md-filled-text-field
-         *      label="Enter some text"
-         *      dialog-focus
-         *    >
-         *    </md-filled-text-field>
-         *  </md-dialog>
-         */
-        this.focusAttribute = 'dialog-focus';
-        /**
-         * Clicking on the scrim surrounding the dialog closes the dialog.
-         * The `closing` and `closed` events this produces have an `action` property
-         * which is the value of this property and defaults to `close`.
+         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
          */
-        this.scrimClickAction = CLOSE_ACTION;
+        this.returnValue = '';
         /**
-         * Pressing the `escape` key while the dialog is open closes the dialog.
-         * The `closing` and `closed` events this produces have an `action` property
-         * which is the value of this property and defaults to `close`.
+         * Gets the opening animation for a dialog. Set to a new function to customize
+         * the animation.
          */
-        this.escapeKeyAction = CLOSE_ACTION;
+        this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;
         /**
-         * When opened, the dialog is displayed modeless or non-modal. This
-         * allows users to interact with content outside the dialog without
-         * closing the dialog and does not display the scrim around the dialog.
-         */
-        this.modeless = false;
-        /**
-         * Set to make the dialog position draggable.
-         */
-        this.draggable = false;
-        this.throttle = createThrottle();
-        /**
-         * Private properties that reflect for styling manually in `updated`.
-         */
-        this.showingFullscreen = false;
-        this.showingOpen = false;
-        this.opening = false;
-        this.closing = false;
-        /**
-         * Transition kind. Supported options include: grow, shrink, grow-down,
-         * grow-up, grow-left, and grow-right.
-         *
-         * Defaults to grow-down.
+         * Gets the closing animation for a dialog. Set to a new function to customize
+         * the animation.
          */
-        this.transition = 'grow-down';
-        this.dragging = false;
-        this.dragMargin = 8;
-        this.fullscreenQueryListener = undefined;
-    }
-    static setDocumentScrollingDisabled(disabled = false) {
-        let { preventedScrollingCount, scrollbarTester } = Dialog;
-        Dialog.preventedScrollingCount = preventedScrollingCount =
-            Math.max(preventedScrollingCount + (Number(disabled) || -1), 0);
-        const shouldPrevent = Boolean(preventedScrollingCount);
-        const { style } = document.body;
-        if (shouldPrevent && style.overflow === 'hidden') {
-            return;
+        this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;
+        this.isOpen = false;
+        this.isAtScrollTop = false;
+        this.isAtScrollBottom = false;
+        this.nextClickIsFromContent = false;
+        // Dialogs should not be SSR'd while open, so we can just use runtime checks.
+        this.hasHeadline = false;
+        this.hasActions = false;
+        this.hasIcon = false;
+        if (!isServer) {
+            this.addEventListener('submit', this.handleSubmit);
         }
-        if (scrollbarTester === undefined) {
-            Dialog.scrollbarTester = scrollbarTester = document.createElement('div');
-            scrollbarTester.style.cssText =
-                `position: absolute; height: 0; width: 100%; visibility: hidden; pointer-events: none;`;
-        }
-        // Appends an element to see if its offsetWidth changes when overflow is
-        // altered. If it does, then add end inline padding to restore the width to
-        // avoid a visible layout shift.
-        document.body.append(scrollbarTester);
-        const { offsetWidth } = scrollbarTester;
-        style.overflow = shouldPrevent ? 'hidden' : '';
-        const scrollbarWidth = scrollbarTester.offsetWidth - offsetWidth;
-        scrollbarTester.remove();
-        style.paddingInlineEnd = shouldPrevent ? `${scrollbarWidth}px` : '';
     }
     /**
-     * Opens and shows the dialog. This is equivalent to setting the `open`
-     * property to true.
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
      */
-    show() {
+    async show() {
+        const { dialog, container } = this;
+        if (!dialog || !container || dialog.open) {
+            return;
+        }
+        const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
+        if (preventOpen) {
+            this.open = false;
+            return;
+        }
+        // All Material dialogs are modal.
+        dialog.showModal();
         this.open = true;
+        // Reset scroll position if re-opening a dialog with the same content.
+        if (this.scroller) {
+            this.scroller.scrollTop = 0;
+        }
+        // Native modal dialogs ignore autofocus and instead force focus to the
+        // first focusable child. Override this behavior if there is a child with
+        // an autofocus attribute.
+        this.querySelector('[autofocus]')?.focus();
+        await this.animateDialog(this.getOpenAnimation());
+        this.dispatchEvent(new Event('opened'));
     }
     /**
-     * Closes the dialog. This is equivalent to setting the `open`
-     * property to false.
-     */
-    close(action = '') {
-        this.currentAction = action;
-        this.open = false;
-    }
-    /**
-     * Opens and shows the dialog if it is closed; otherwise closes it.
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
      */
-    toggleShow() {
-        if (this.open) {
-            this.close(this.currentAction);
-        }
-        else {
-            this.show();
+    async close(returnValue = this.returnValue) {
+        const { dialog, container } = this;
+        if (!dialog || !container || !dialog.open) {
+            return;
         }
-    }
-    getContentScrollInfo() {
-        if (!this.hasUpdated || !this.contentElement) {
-            return { isScrollable: false, isAtScrollTop: true, isAtScrollBottom: true };
+        const prevReturnValue = this.returnValue;
+        this.returnValue = returnValue;
+        const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
+        if (preventClose) {
+            this.returnValue = prevReturnValue;
+            return;
         }
-        const { scrollTop, scrollHeight, offsetHeight, clientHeight } = this.contentElement;
-        return {
-            isScrollable: scrollHeight > offsetHeight,
-            isAtScrollTop: scrollTop === 0,
-            isAtScrollBottom: Math.abs(Math.round(scrollHeight - scrollTop) - clientHeight) <= 2
-        };
+        await this.animateDialog(this.getCloseAnimation());
+        dialog.close(returnValue);
+        this.open = false;
+        this.dispatchEvent(new Event('closed'));
     }
     render() {
-        const { isScrollable, isAtScrollTop, isAtScrollBottom } = this.getContentScrollInfo();
+        const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
+        const classes = {
+            'has-headline': this.hasHeadline,
+            'has-actions': this.hasActions,
+            'has-icon': this.hasIcon,
+            'scrollable': scrollable,
+            'show-top-divider': scrollable && !this.isAtScrollTop,
+            'show-bottom-divider': scrollable && !this.isAtScrollBottom,
+        };
+        const { ariaLabel } = this;
         return html `
-    <dialog
-      @close=${this.handleDialogDismiss}
-      @cancel=${this.handleDialogDismiss}
-      @click=${this.handleDialogClick}
-      class="dialog ${classMap({
-            'stacked': this.stacked,
-            'scrollable': isScrollable,
-            'scroll-divider-header': !isAtScrollTop,
-            'scroll-divider-footer': !isAtScrollBottom,
-            'footerHidden': this.footerHidden
-        })}"
-      aria-labelledby="header"
-      aria-describedby="content"
-    >
-      <div class="container ${classMap({
-            'dragging': this.dragging
-        })}"
-        @pointermove=${this.handlePointerMove}
-        @pointerup=${this.handleDragEnd}
+      <div class="scrim"></div>
+      <dialog
+        class=${classMap(classes)}
+        aria-label=${ariaLabel || nothing}
+        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}
+        role=${this.type === 'alert' ? 'alertdialog' : nothing}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+        .returnValue=${this.returnValue || nothing}
       >
-        <md-elevation></md-elevation>
-        <header class="header">
-          <slot name="header">
-            <slot name="headline-prefix"></slot>
-            <slot name="headline"></slot>
-            <slot name="headline-suffix"></slot>
-          </slot>
-        </header>
-        <section class="content" @scroll=${this.handleContentScroll}>
-          <slot></slot>
-        </section>
-        <footer class="footer">
-          <slot name="footer"></slot>
-        </footer>
-      </div>
-    </dialog>`;
-    }
-    willUpdate(changed) {
-        if (changed.has('open')) {
-            this.opening = this.open;
-            // only closing if was opened previously...
-            this.closing = !this.open && changed.get('open');
-        }
-        if (changed.has('fullscreen') || changed.has('fullscreenBreakpoint')) {
-            this.updateFullscreen();
-        }
+        <div class="container"
+          @click=${this.handleContentClick}
+        >
+          <div class="headline">
+            <div class="icon" aria-hidden="true">
+              <slot name="icon" @slotchange=${this.handleIconChange}></slot>
+            </div>
+            <h2 id="headline" aria-hidden=${!this.hasHeadline || nothing}>
+              <slot name="headline"
+                  @slotchange=${this.handleHeadlineChange}></slot>
+            </h2>
+            <md-divider></md-divider>
+          </div>
+          <div class="scroller">
+            <div class="content">
+              <div class="top anchor"></div>
+              <slot name="content"></slot>
+              <div class="bottom anchor"></div>
+            </div>
+          </div>
+          <div class="actions">
+            <md-divider></md-divider>
+            <slot name="actions"
+              @slotchange=${this.handleActionsChange}></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
     }
     firstUpdated() {
-        // Update when content size changes to show/hide scroll dividers.
-        new ResizeObserver(() => {
-            if (this.showingOpen) {
-                this.requestUpdate();
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                this.handleAnchorIntersection(entry);
             }
-        }).observe(this.contentElement);
+        }, { root: this.scroller });
+        this.intersectionObserver.observe(this.topAnchor);
+        this.intersectionObserver.observe(this.bottomAnchor);
     }
-    updated(changed) {
-        if (changed.get('draggable') && !this.draggable) {
-            this.style.removeProperty('--_container-drag-inline-start');
-            this.style.removeProperty('--_container-drag-block-start');
-        }
-        // Reflect internal state to facilitate styling.
-        this.reflectStateProp(changed, 'opening', this.opening);
-        this.reflectStateProp(changed, 'closing', this.closing);
-        this.reflectStateProp(changed, 'showingFullscreen', this.showingFullscreen, 'showing-fullscreen');
-        this.reflectStateProp(changed, 'showingOpen', this.showingOpen, 'showing-open');
-        if (!changed.has('open')) {
+    handleDialogClick() {
+        if (this.nextClickIsFromContent) {
+            // Avoid doing a layout calculation below if we know the click came from
+            // content.
+            this.nextClickIsFromContent = false;
             return;
         }
-        // prevent body scrolling early only when opening to avoid layout
-        // shift when closing.
-        if (!this.modeless && this.open) {
-            Dialog.setDocumentScrollingDisabled(this.open);
-        }
-        if (this.open) {
-            this.contentElement.scrollTop = 0;
-            if (this.modeless) {
-                this.dialogElement.show();
-            }
-            else {
-                // Note, native focus handling fails when focused element is in an
-                // overflow: auto container.
-                this.dialogElement.showModal();
-            }
-        }
-        // Avoids dispatching initial state.
-        const shouldDispatchAction = changed.get('open') !== undefined;
-        this.performTransition(shouldDispatchAction);
-    }
-    /**
-     * Internal state is reflected here as attributes to effect styling. This
-     * could be done via internal classes, but it's published on the host
-     * to facilitate the (currently undocumented) possibility of customizing
-     * styling of user content based on these states.
-     * Note, in the future this could be done with `:state(...)` when browser
-     * support improves.
-     */
-    reflectStateProp(changed, key, value, attribute) {
-        attribute ?? (attribute = key);
-        if (!changed.has(key)) {
+        // Click originated on the backdrop. Native `<dialog>`s will not cancel,
+        // but Material dialogs do.
+        const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+        if (preventDefault) {
             return;
         }
-        if (value) {
-            this.setAttribute(attribute, '');
-        }
-        else {
-            this.removeAttribute(attribute);
-        }
-    }
-    async performTransition(shouldDispatchAction) {
-        // TODO: pause here only to avoid a double update warning.
-        await this.updateComplete;
-        // Focus initial element.
-        if (this.open) {
-            this.focus();
-        }
-        this.showingOpen = this.open;
-        if (shouldDispatchAction) {
-            this.dispatchActionEvent(this.open ? 'opening' : 'closing');
-        }
-        // Compute desired transition duration.
-        const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));
-        let promise = this.updateComplete;
-        if (duration > 0) {
-            promise = new Promise((r) => {
-                setTimeout(r, duration);
-            });
-        }
-        await promise;
-        this.opening = false;
-        this.closing = false;
-        if (!this.open && this.dialogElement?.open) {
-            // Closing the dialog triggers an asynchronous `close` event.
-            // It's important to wait for this event to fire since it changes the
-            // state of `open` to false.
-            // Without waiting, this element's `closed` event can be called before
-            // the dialog's `close` event, which is problematic since the user
-            // can set `open` in the `closed` event.
-            // The timing of the event appears to vary via browser and does *not*
-            // seem to resolve by "task" timing; therefore an explicit promise is
-            // used.
-            const closedPromise = new Promise(resolve => {
-                this.dialogClosedResolver = resolve;
-            });
-            this.dialogElement?.close(this.currentAction || this.defaultAction);
-            await closedPromise;
-            // enable scrolling late to avoid layout shift when closing
-            if (!this.modeless) {
-                Dialog.setDocumentScrollingDisabled(this.open);
-            }
-        }
-        if (shouldDispatchAction) {
-            this.dispatchActionEvent(this.open ? 'opened' : 'closed');
-        }
-        this.currentAction = undefined;
+        this.close();
     }
-    dispatchActionEvent(type) {
-        const detail = { action: this.open ? 'none' : this.currentAction };
-        this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true }));
+    handleContentClick() {
+        this.nextClickIsFromContent = true;
     }
-    updateFullscreen() {
-        if (this.fullscreenQuery !== undefined) {
-            this.fullscreenQuery.removeEventListener('change', this.fullscreenQueryListener);
-            this.fullscreenQuery = this.fullscreenQueryListener = undefined;
-        }
-        if (!this.fullscreen) {
-            this.showingFullscreen = false;
+    handleSubmit(event) {
+        const form = event.target;
+        const { submitter } = event;
+        if (form.method !== 'dialog' || !submitter) {
             return;
         }
-        this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint);
-        this.fullscreenQuery.addEventListener('change', (this.fullscreenQueryListener = (event) => {
-            this.showingFullscreen = event.matches;
-        }));
-        this.showingFullscreen = this.fullscreenQuery.matches;
+        // Close reason is the submitter's value attribute, or the dialog's
+        // `returnValue` if there is no attribute.
+        this.close(submitter.getAttribute('value') ?? this.returnValue);
     }
-    // handles native close/cancel events and we just ensure
-    // internal state is in sync.
-    handleDialogDismiss(event) {
-        if (event.type === 'cancel') {
-            this.currentAction = this.escapeKeyAction;
-            // Prevents the <dialog> element from closing when
-            // `escapeKeyAction` is set to an empty string.
-            // It also early returns and avoids <md-dialog> internal state
-            // changes.
-            if (this.escapeKeyAction === '') {
-                event.preventDefault();
-                return;
-            }
-        }
-        this.dialogClosedResolver?.();
-        this.dialogClosedResolver = undefined;
-        this.open = false;
-        this.opening = false;
-        this.closing = false;
-        redispatchEvent(this, event);
-    }
-    handleDialogClick(event) {
-        if (!this.open) {
+    handleCancel(event) {
+        if (event.target !== this.dialog) {
+            // Ignore any cancel events dispatched by content.
             return;
         }
-        this.currentAction =
-            event.target.getAttribute(this.actionAttribute) ??
-                (!this.modeless && this.containerElement &&
-                    !event.composedPath().includes(this.containerElement) ?
-                    this.scrimClickAction :
-                    '');
-        if (this.currentAction !== '') {
-            this.close(this.currentAction);
+        const preventDefault = !redispatchEvent(this, event);
+        // We always prevent default on the original dialog event since we'll
+        // animate closing it before it actually closes.
+        event.preventDefault();
+        if (preventDefault) {
+            return;
         }
+        this.close();
     }
-    /* This allows the dividers to dynamically show based on scrolling. */
-    handleContentScroll() {
-        this.throttle('scroll', () => {
-            this.requestUpdate();
-        });
-    }
-    getFocusElement() {
-        const selector = `[${this.focusAttribute}]`;
-        const slotted = [this.footerSlot, this.contentSlot].flatMap(slot => slot.assignedElements({ flatten: true }));
-        for (const el of slotted) {
-            const focusEl = el.matches(selector) ? el : el.querySelector(selector);
-            if (focusEl) {
-                return focusEl;
+    async animateDialog(animation) {
+        const { dialog, scrim, container, headline, content, actions } = this;
+        if (!dialog || !scrim || !container || !headline || !content || !actions) {
+            return;
+        }
+        const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate } = animation;
+        const elementAndAnimation = [
+            [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []],
+            [container, containerAnimate ?? []], [headline, headlineAnimate ?? []],
+            [content, contentAnimate ?? []], [actions, actionsAnimate ?? []]
+        ];
+        const animations = [];
+        for (const [element, animation] of elementAndAnimation) {
+            for (const animateArgs of animation) {
+                animations.push(element.animate(...animateArgs));
             }
         }
-        return null;
+        await Promise.all(animations.map(animation => animation.finished));
     }
-    focus() {
-        this.getFocusElement()?.focus();
+    handleHeadlineChange(event) {
+        const slot = event.target;
+        this.hasHeadline = slot.assignedElements().length > 0;
     }
-    blur() {
-        this.getFocusElement()?.blur();
+    handleActionsChange(event) {
+        const slot = event.target;
+        this.hasActions = slot.assignedElements().length > 0;
     }
-    canStartDrag(event) {
-        if (this.draggable === false || event.defaultPrevented ||
-            !(event.buttons & 1) || !this.headerElement ||
-            !event.composedPath().includes(this.headerElement)) {
-            return false;
-        }
-        return true;
+    handleIconChange(event) {
+        const slot = event.target;
+        this.hasIcon = slot.assignedElements().length > 0;
     }
-    handlePointerMove(event) {
-        if (!this.dragging && !this.canStartDrag(event) || !this.containerElement) {
-            return;
+    handleAnchorIntersection(entry) {
+        const { target, isIntersecting } = entry;
+        if (target === this.topAnchor) {
+            this.isAtScrollTop = isIntersecting;
         }
-        const { top, left, height, width } = this.containerElement.getBoundingClientRect();
-        if (!this.dragging) {
-            this.containerElement.setPointerCapture(event.pointerId);
-            this.dragging = true;
-            const { x, y } = event;
-            this.dragInfo = [x, y, top, left];
-        }
-        const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];
-        const dx = event.x - sx;
-        const dy = event.y - sy;
-        const ml = window.innerWidth - width - this.dragMargin;
-        const mt = window.innerHeight - height - this.dragMargin;
-        const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));
-        const t = Math.max(this.dragMargin, Math.min(mt, dy + st));
-        this.style.setProperty('--_container-drag-inline-start', `${l}px`);
-        this.style.setProperty('--_container-drag-block-start', `${t}px`);
-    }
-    handleDragEnd(event) {
-        if (!this.dragging) {
-            return;
+        if (target === this.bottomAnchor) {
+            this.isAtScrollBottom = isIntersecting;
         }
-        this.containerElement?.releasePointerCapture(event.pointerId);
-        this.dragging = false;
-        this.dragInfo = undefined;
     }
 }
-Dialog.preventedScrollingCount = 0;
+(() => {
+    requestUpdateOnAriaChange(Dialog);
+})();
+Dialog.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
 __decorate([
     property({ type: Boolean })
-], Dialog.prototype, "open", void 0);
+], Dialog.prototype, "open", null);
 __decorate([
-    property({ type: Boolean })
-], Dialog.prototype, "fullscreen", void 0);
-__decorate([
-    property({ attribute: 'fullscreen-breakpoint' })
-], Dialog.prototype, "fullscreenBreakpoint", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'footer-hidden' })
-], Dialog.prototype, "footerHidden", void 0);
-__decorate([
-    property({ type: Boolean })
-], Dialog.prototype, "stacked", void 0);
-__decorate([
-    property({ attribute: 'default-action' })
-], Dialog.prototype, "defaultAction", void 0);
-__decorate([
-    property({ attribute: 'action-attribute' })
-], Dialog.prototype, "actionAttribute", void 0);
+    property({ attribute: false })
+], Dialog.prototype, "returnValue", void 0);
 __decorate([
-    property({ attribute: 'focus-attribute' })
-], Dialog.prototype, "focusAttribute", void 0);
+    property()
+], Dialog.prototype, "type", void 0);
 __decorate([
-    property({ attribute: 'scrim-click-action' })
-], Dialog.prototype, "scrimClickAction", void 0);
+    query('dialog')
+], Dialog.prototype, "dialog", void 0);
 __decorate([
-    property({ attribute: 'escape-key-action' })
-], Dialog.prototype, "escapeKeyAction", void 0);
+    query('.scrim')
+], Dialog.prototype, "scrim", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], Dialog.prototype, "modeless", void 0);
+    query('.container')
+], Dialog.prototype, "container", void 0);
 __decorate([
-    property({ type: Boolean })
-], Dialog.prototype, "draggable", void 0);
+    query('.headline')
+], Dialog.prototype, "headline", void 0);
 __decorate([
-    query('.dialog', true)
-], Dialog.prototype, "dialogElement", void 0);
+    query('.content')
+], Dialog.prototype, "content", void 0);
 __decorate([
-    query('slot[name=footer]', true)
-], Dialog.prototype, "footerSlot", void 0);
+    query('.actions')
+], Dialog.prototype, "actions", void 0);
 __decorate([
-    query('slot:not([name])', true)
-], Dialog.prototype, "contentSlot", void 0);
+    state()
+], Dialog.prototype, "isAtScrollTop", void 0);
 __decorate([
-    query(`.content`, true)
-], Dialog.prototype, "contentElement", void 0);
+    state()
+], Dialog.prototype, "isAtScrollBottom", void 0);
 __decorate([
-    query(`.container`, true)
-], Dialog.prototype, "containerElement", void 0);
+    query('.scroller')
+], Dialog.prototype, "scroller", void 0);
 __decorate([
-    query(`.header`, true)
-], Dialog.prototype, "headerElement", void 0);
+    query('.top.anchor')
+], Dialog.prototype, "topAnchor", void 0);
 __decorate([
-    state()
-], Dialog.prototype, "showingFullscreen", void 0);
+    query('.bottom.anchor')
+], Dialog.prototype, "bottomAnchor", void 0);
 __decorate([
     state()
-], Dialog.prototype, "showingOpen", void 0);
+], Dialog.prototype, "hasHeadline", void 0);
 __decorate([
     state()
-], Dialog.prototype, "opening", void 0);
-__decorate([
-    state()
-], Dialog.prototype, "closing", void 0);
-__decorate([
-    property({ reflect: true })
-], Dialog.prototype, "transition", void 0);
+], Dialog.prototype, "hasActions", void 0);
 __decorate([
     state()
-], Dialog.prototype, "dragging", void 0);
+], Dialog.prototype, "hasIcon", void 0);
 //# sourceMappingURL=dialog.js.map