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

package/dialog/internal/dialog-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100dvh;inline-size:100dvw;max-block-size:100dvh;max-inline-size:100dvw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:"";position:absolute;z-index:-1;inset:0;block-size:100dvh;inline-size:100dvw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{--md-elevation-level:var(--_container-elevation)}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100dvh;inline-size:100dvw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_icon-color);font-size:var(--_icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */
+`;
+//# sourceMappingURL=dialog-styles.css.js.map

package/dialog/internal/dialog-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100dvh;inline-size:100dvw;max-block-size:100dvh;max-inline-size:100dvw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:\"\";position:absolute;z-index:-1;inset:0;block-size:100dvh;inline-size:100dvw;pointer-events:none}:host([modeless]) .dialog:before{display:none}.container{position:absolute;inset-inline-start:var(--_container-drag-inline-start, var(--_container-inset-inline-start));inset-inline-end:var(--_container-inset-inline-end);inset-block-start:var(--_container-drag-block-start, var(--_container-inset-block-start));inset-block-end:var(--_container-inset-block-end);background-color:var(--_container-color);border-radius:var(--_container-shape);display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;min-block-size:var(--_container-min-block-size);max-block-size:var(--_container-max-block-size);min-inline-size:var(--_container-min-inline-size);max-inline-size:var(--_container-max-inline-size);padding-block-start:var(--_container-block-padding);padding-block-end:var(--_container-block-padding)}md-elevation{--md-elevation-level:var(--_container-elevation)}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font:var(--_headline-type)}.content{flex:1;overflow:auto;margin-block-start:var(--_content-block-start-spacing);margin-block-end:var(--_content-block-end-spacing);-webkit-font-smoothing:antialiased;color:var(--_supporting-text-color);font:var(--_supporting-text-type)}.footer{display:flex;position:relative;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;gap:var(--_action-spacing)}.footerHidden{--_content-block-end-spacing: 0px}.footerHidden .footer{display:none}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.container>*{transition-timing-function:inherit;transition-duration:inherit;transition-property:opacity,transform;will-change:transform,opacity;opacity:0}:host([transition][showing-open]) .container>*{opacity:1;transform:none}:host([transition][showing-open]) .container{opacity:1;transform:none}.dialog::before{transition:background-color linear;background-color:rgba(0,0,0,0)}:host([showing-open]) .dialog::before{background-color:var(--_scrim-color)}:host([opening]) .dialog::before{transition-duration:calc(var(--_opening-transition-duration)/2)}:host([closing]) .dialog::before{transition-duration:calc(var(--_closing-transition-duration)/2)}:host([opening]) .container{transition-duration:var(--_opening-transition-duration);transition-timing-function:var(--_opening-transition-easing)}:host([closing]) .container{transition-duration:var(--_closing-transition-duration);transition-timing-function:var(--_closing-transition-easing)}:host([trasition][closing]) .container>*{transform:none;opacity:0}:host([transition=grow-down]){--_opening-transform: scale(1, 0.1) translateY(-20%);--_closing-transform: scale(1, 0.9) translateY(-10%);--_origin: top;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-up]){--_opening-transform: scale(1, 0.1) translateY(20%);--_closing-transform: scale(1, 0.9) translateY(10%);--_origin: bottom;--_opening-content-transform: scale(1, 2);--_origin-footer: bottom}:host([transition=grow-left]){--_opening-transform: scale(0.1, 1) translateX(20%);--_closing-transform: scale(0.9, 1) translateX(10%);--_origin: right;--_opening-content-transform: none;--_origin-footer: none}:host([transition=grow-right]){--_opening-transform: scale(0.1, 1) translateX(-20%);--_closing-transform: scale(0.9, 1) translateX(-10%);--_origin: left;--_opening-content-transform: none;--_origin-footer: none}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100dvh;inline-size:100dvw;border-radius:0px;padding-block-start:0;padding-block-end:0}:host([showing-fullscreen]) .header{justify-content:space-between;flex-direction:row;max-block-size:var(--_fullscreen-header-block-size);padding-block-start:var(--_fullscreen-container-block-padding);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_icon-color);font-size:var(--_icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}

package/dialog/internal/dialog.js

@@ -0,0 +1,562 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.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';
+/**
+ * A dialog component.
+ *
+ * @fires opening 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 closed Dispatched when the dialog has closed after any animations.
+ * @fires cancel The native HTMLDialogElement cancel event.
+ */
+export class Dialog extends LitElement {
+    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;
+        /**
+         * 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,
+         *
+         *   <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`.
+         */
+        this.scrimClickAction = CLOSE_ACTION;
+        /**
+         * 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`.
+         */
+        this.escapeKeyAction = CLOSE_ACTION;
+        /**
+         * 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.
+         */
+        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;
+        }
+        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.
+     */
+    show() {
+        this.open = true;
+    }
+    /**
+     * 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.
+     */
+    toggleShow() {
+        if (this.open) {
+            this.close(this.currentAction);
+        }
+        else {
+            this.show();
+        }
+    }
+    getContentScrollInfo() {
+        if (!this.hasUpdated || !this.contentElement) {
+            return { isScrollable: false, isAtScrollTop: true, isAtScrollBottom: true };
+        }
+        const { scrollTop, scrollHeight, offsetHeight, clientHeight } = this.contentElement;
+        return {
+            isScrollable: scrollHeight > offsetHeight,
+            isAtScrollTop: scrollTop === 0,
+            isAtScrollBottom: Math.abs(Math.round(scrollHeight - scrollTop) - clientHeight) <= 2
+        };
+    }
+    render() {
+        const { isScrollable, isAtScrollTop, isAtScrollBottom } = this.getContentScrollInfo();
+        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}
+      >
+        <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();
+        }
+    }
+    firstUpdated() {
+        // Update when content size changes to show/hide scroll dividers.
+        new ResizeObserver(() => {
+            if (this.showingOpen) {
+                this.requestUpdate();
+            }
+        }).observe(this.contentElement);
+    }
+    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')) {
+            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)) {
+            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;
+    }
+    dispatchActionEvent(type) {
+        const detail = { action: this.open ? 'none' : this.currentAction };
+        this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true }));
+    }
+    updateFullscreen() {
+        if (this.fullscreenQuery !== undefined) {
+            this.fullscreenQuery.removeEventListener('change', this.fullscreenQueryListener);
+            this.fullscreenQuery = this.fullscreenQueryListener = undefined;
+        }
+        if (!this.fullscreen) {
+            this.showingFullscreen = false;
+            return;
+        }
+        this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint);
+        this.fullscreenQuery.addEventListener('change', (this.fullscreenQueryListener = (event) => {
+            this.showingFullscreen = event.matches;
+        }));
+        this.showingFullscreen = this.fullscreenQuery.matches;
+    }
+    // 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) {
+            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);
+        }
+    }
+    /* 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;
+            }
+        }
+        return null;
+    }
+    focus() {
+        this.getFocusElement()?.focus();
+    }
+    blur() {
+        this.getFocusElement()?.blur();
+    }
+    canStartDrag(event) {
+        if (this.draggable === false || event.defaultPrevented ||
+            !(event.buttons & 1) || !this.headerElement ||
+            !event.composedPath().includes(this.headerElement)) {
+            return false;
+        }
+        return true;
+    }
+    handlePointerMove(event) {
+        if (!this.dragging && !this.canStartDrag(event) || !this.containerElement) {
+            return;
+        }
+        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;
+        }
+        this.containerElement?.releasePointerCapture(event.pointerId);
+        this.dragging = false;
+        this.dragInfo = undefined;
+    }
+}
+Dialog.preventedScrollingCount = 0;
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "open", void 0);
+__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);
+__decorate([
+    property({ attribute: 'focus-attribute' })
+], Dialog.prototype, "focusAttribute", void 0);
+__decorate([
+    property({ attribute: 'scrim-click-action' })
+], Dialog.prototype, "scrimClickAction", void 0);
+__decorate([
+    property({ attribute: 'escape-key-action' })
+], Dialog.prototype, "escapeKeyAction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Dialog.prototype, "modeless", void 0);
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "draggable", void 0);
+__decorate([
+    query('.dialog', true)
+], Dialog.prototype, "dialogElement", void 0);
+__decorate([
+    query('slot[name=footer]', true)
+], Dialog.prototype, "footerSlot", void 0);
+__decorate([
+    query('slot:not([name])', true)
+], Dialog.prototype, "contentSlot", void 0);
+__decorate([
+    query(`.content`, true)
+], Dialog.prototype, "contentElement", void 0);
+__decorate([
+    query(`.container`, true)
+], Dialog.prototype, "containerElement", void 0);
+__decorate([
+    query(`.header`, true)
+], Dialog.prototype, "headerElement", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "showingFullscreen", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "showingOpen", 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);
+__decorate([
+    state()
+], Dialog.prototype, "dragging", void 0);
+//# sourceMappingURL=dialog.js.map