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

package/dialog/internal/animations.js

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { EASING } from '../../internal/motion/animation.js';
+/**
+ * The default dialog open animation.
+ */
+export const DIALOG_DEFAULT_OPEN_ANIMATION = {
+    dialog: [
+        [
+            // Dialog slide down
+            [{ 'transform': 'translateY(-50px)' }, { 'transform': 'translateY(0)' }],
+            { duration: 500, easing: EASING.EMPHASIZED }
+        ],
+    ],
+    scrim: [
+        [
+            // Scrim fade in
+            [{ 'opacity': 0 }, { 'opacity': 0.32 }], { duration: 500, easing: 'linear' }
+        ],
+    ],
+    container: [
+        [
+            // Container fade in
+            [{ 'opacity': 0 }, { 'opacity': 1 }],
+            { duration: 50, easing: 'linear', pseudoElement: '::before' }
+        ],
+        [
+            // Container grow
+            // Note: current spec says to grow from 0dp->100% and shrink from
+            // 100%->35%. We change this to 35%->100% to simplify the animation that
+            // is supposed to clip content as it grows. From 0dp it's possible to see
+            // text/actions appear before the container has fully grown.
+            [{ 'height': '35%' }, { 'height': '100%' }],
+            { duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before' },
+        ],
+    ],
+    headline: [
+        [
+            // Headline fade in
+            [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
+            { duration: 250, easing: 'linear', fill: 'forwards' }
+        ],
+    ],
+    content: [
+        [
+            // Content fade in
+            [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }],
+            { duration: 250, easing: 'linear', fill: 'forwards' }
+        ],
+    ],
+    actions: [
+        [
+            // Actions fade in
+            [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.5 }, { 'opacity': 1 }],
+            { duration: 300, easing: 'linear', fill: 'forwards' }
+        ],
+    ],
+};
+/**
+ * The default dialog close animation.
+ */
+export const DIALOG_DEFAULT_CLOSE_ANIMATION = {
+    dialog: [
+        [
+            // Dialog slide up
+            [{ 'transform': 'translateY(0)' }, { 'transform': 'translateY(-50px)' }],
+            { duration: 150, easing: EASING.EMPHASIZED_ACCELERATE }
+        ],
+    ],
+    scrim: [
+        [
+            // Scrim fade out
+            [{ 'opacity': 0.32 }, { 'opacity': 0 }], { duration: 150, easing: 'linear' }
+        ],
+    ],
+    container: [
+        [
+            // Container shrink
+            [{ 'height': '100%' }, { 'height': '35%' }],
+            {
+                duration: 150,
+                easing: EASING.EMPHASIZED_ACCELERATE,
+                pseudoElement: '::before',
+            },
+        ],
+        [
+            // Container fade out
+            [{ 'opacity': '1' }, { 'opacity': '0' }],
+            { delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' },
+        ]
+    ],
+    headline: [
+        [
+            // Headline fade out
+            [{ 'opacity': 1 }, { 'opacity': 0 }],
+            { duration: 100, easing: 'linear', fill: 'forwards' }
+        ],
+    ],
+    content: [
+        [
+            // Content fade out
+            [{ 'opacity': 1 }, { 'opacity': 0 }],
+            { duration: 100, easing: 'linear', fill: 'forwards' }
+        ],
+    ],
+    actions: [
+        [
+            // Actions fade out
+            [{ 'opacity': 1 }, { 'opacity': 0 }],
+            { duration: 100, easing: 'linear', fill: 'forwards' }
+        ],
+    ],
+};
+//# sourceMappingURL=animations.js.map

package/dialog/internal/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["animations.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A dialog animation's arguments. See `Element.prototype.animate`.\n */\nexport type DialogAnimationArgs = Parameters<Element['animate']>;\n\n/**\n * A collection of dialog animations. Each element of a dialog may have multiple\n * animations.\n */\nexport interface DialogAnimation {\n  /**\n   * Animations for the dialog itself.\n   */\n  dialog?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the scrim backdrop.\n   */\n  scrim?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the container of the dialog.\n   */\n  container?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the headline section.\n   */\n  headline?: DialogAnimationArgs[];\n\n  /**\n   * Animations for the contents section.\n   */\n  content?: DialogAnimationArgs[];\n  /**\n   * Animations for the actions section.\n   */\n  actions?: DialogAnimationArgs[];\n}\n\n/**\n * The default dialog open animation.\n */\nexport const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {\n  dialog: [\n    [\n      // Dialog slide down\n      [{'transform': 'translateY(-50px)'}, {'transform': 'translateY(0)'}],\n      {duration: 500, easing: EASING.EMPHASIZED}\n    ],\n  ],\n  scrim: [\n    [\n      // Scrim fade in\n      [{'opacity': 0}, {'opacity': 0.32}], {duration: 500, easing: 'linear'}\n    ],\n  ],\n  container: [\n    [\n      // Container fade in\n      [{'opacity': 0}, {'opacity': 1}],\n      {duration: 50, easing: 'linear', pseudoElement: '::before'}\n    ],\n    [\n      // Container grow\n      // Note: current spec says to grow from 0dp->100% and shrink from\n      // 100%->35%. We change this to 35%->100% to simplify the animation that\n      // is supposed to clip content as it grows. From 0dp it's possible to see\n      // text/actions appear before the container has fully grown.\n      [{'height': '35%'}, {'height': '100%'}],\n      {duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before'},\n    ],\n  ],\n  headline: [\n    [\n      // Headline fade in\n      [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n      {duration: 250, easing: 'linear', fill: 'forwards'}\n    ],\n  ],\n  content: [\n    [\n      // Content fade in\n      [{'opacity': 0}, {'opacity': 0, offset: 0.2}, {'opacity': 1}],\n      {duration: 250, easing: 'linear', fill: 'forwards'}\n    ],\n  ],\n  actions: [\n    [\n      // Actions fade in\n      [{'opacity': 0}, {'opacity': 0, offset: 0.5}, {'opacity': 1}],\n      {duration: 300, easing: 'linear', fill: 'forwards'}\n    ],\n  ],\n};\n\n/**\n * The default dialog close animation.\n */\nexport const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {\n  dialog: [\n    [\n      // Dialog slide up\n      [{'transform': 'translateY(0)'}, {'transform': 'translateY(-50px)'}],\n      {duration: 150, easing: EASING.EMPHASIZED_ACCELERATE}\n    ],\n  ],\n  scrim: [\n    [\n      // Scrim fade out\n      [{'opacity': 0.32}, {'opacity': 0}], {duration: 150, easing: 'linear'}\n    ],\n  ],\n  container: [\n    [\n      // Container shrink\n      [{'height': '100%'}, {'height': '35%'}],\n      {\n        duration: 150,\n        easing: EASING.EMPHASIZED_ACCELERATE,\n        pseudoElement: '::before',\n      },\n    ],\n    [\n      // Container fade out\n      [{'opacity': '1'}, {'opacity': '0'}],\n      {delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before'},\n    ]\n  ],\n  headline: [\n    [\n      // Headline fade out\n      [{'opacity': 1}, {'opacity': 0}],\n      {duration: 100, easing: 'linear', fill: 'forwards'}\n    ],\n  ],\n  content: [\n    [\n      // Content fade out\n      [{'opacity': 1}, {'opacity': 0}],\n      {duration: 100, easing: 'linear', fill: 'forwards'}\n    ],\n  ],\n  actions: [\n    [\n      // Actions fade out\n      [{'opacity': 1}, {'opacity': 0}],\n      {duration: 100, easing: 'linear', fill: 'forwards'}\n    ],\n  ],\n};\n"]}

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

@@ -4,6 +4,6 @@
   * 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 */
+export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_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-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font:var(--_headline-type);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;display:flex;gap:8px;margin:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);margin-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;margin-top:16px}.scrollable slot[name=headline]::slotted(*){margin-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){margin-top:8px}.container{border-radius:inherit;display:flex;flex:1;flex-direction:column;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);content:"";inset:0;position:absolute}.scroller{flex:1;overflow:hidden;z-index:0}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font:var(--_supporting-text-type);position:relative}slot[name=content]::slotted(*){margin:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){display:flex;gap:8px;justify-content:flex-end;margin:16px 24px 24px}.has-actions slot[name=content]::slotted(*){margin-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */
 `;
 //# sourceMappingURL=dialog-styles.css.js.map

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

@@ -1 +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 "]}
+{"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-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-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font:var(--_headline-type);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;display:flex;gap:8px;margin:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);margin-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;margin-top:16px}.scrollable slot[name=headline]::slotted(*){margin-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){margin-top:8px}.container{border-radius:inherit;display:flex;flex:1;flex-direction:column;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);content:\"\";inset:0;position:absolute}.scroller{flex:1;overflow:hidden;z-index:0}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font:var(--_supporting-text-type);position:relative}slot[name=content]::slotted(*){margin:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){display:flex;gap:8px;justify-content:flex-end;margin:16px 24px 24px}.has-actions slot[name=content]::slotted(*){margin-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}

package/dialog/internal/dialog.d.ts

@@ -3,194 +3,101 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../elevation/elevation.js';
-import { LitElement, PropertyValues } from 'lit';
-/**
- * Default close action.
- */
-export declare const CLOSE_ACTION = "close";
+import '../../divider/divider.js';
+import { LitElement } from 'lit';
+import { DialogAnimation } 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 declare class Dialog extends LitElement {
-    private static preventedScrollingCount;
-    private static scrollbarTester;
-    private static setDocumentScrollingDisabled;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /**
      * Opens the dialog when set to `true` and closes it when set to `false`.
      */
-    open: boolean;
-    /**
-     * 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.
-     */
-    fullscreen: boolean;
-    /**
-     * 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.
-     */
-    fullscreenBreakpoint: string;
-    /**
-     * Hides the dialog footer, making any content slotted into the footer
-     * inaccessible.
-     */
-    footerHidden: boolean;
-    /**
-     * Renders footer content in a vertically stacked alignment rather than the
-     * normal horizontal alignment.
-     */
-    stacked: boolean;
+    get open(): boolean;
+    set open(open: boolean);
     /**
-     * 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.
+     * Gets or sets the dialog's return value, usually to indicate which button
+     * a user pressed to close it.
      *
-     * Defaults to `close`.
-     */
-    defaultAction: string;
-    /**
-     * 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,
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+     */
+    returnValue: string;
+    /**
+     * The type of dialog for accessibility. Set this to `alert` to announce a
+     * dialog as an alert dialog.
+     */
+    type?: 'alert';
+    /**
+     * Gets the opening animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    getOpenAnimation: () => DialogAnimation;
+    /**
+     * Gets the closing animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    getCloseAnimation: () => DialogAnimation;
+    private isOpen;
+    private readonly dialog;
+    private readonly scrim;
+    private readonly container;
+    private readonly headline;
+    private readonly content;
+    private readonly actions;
+    private isAtScrollTop;
+    private isAtScrollBottom;
+    private readonly scroller;
+    private readonly topAnchor;
+    private readonly bottomAnchor;
+    private nextClickIsFromContent;
+    private intersectionObserver?;
+    private hasHeadline;
+    private hasActions;
+    private hasIcon;
+    constructor();
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
      *
-     *   <md-dialog>
-     *    Content
-     *     <md-filled-button slot="footer" dialog-action="buy">
-     *       Buy
-     *     </md-filled-button>
-     *   </md-dialog>
-     */
-    actionAttribute: string;
-    /**
-     * 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:
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
      *
-     *  <md-dialog>
-     *    <md-filled-text-field
-     *      label="Enter some text"
-     *      dialog-focus
-     *    >
-     *    </md-filled-text-field>
-     *  </md-dialog>
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
      */
-    focusAttribute: string;
+    show(): Promise<void>;
     /**
-     * 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`.
-     */
-    scrimClickAction: string;
-    /**
-     * 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`.
-     */
-    escapeKeyAction: string;
-    /**
-     * 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.
-     */
-    modeless: boolean;
-    /**
-     * Set to make the dialog position draggable.
-     */
-    draggable: boolean;
-    private readonly throttle;
-    private readonly dialogElement;
-    private readonly footerSlot;
-    private readonly contentSlot;
-    private readonly contentElement;
-    private readonly containerElement;
-    private readonly headerElement;
-    /**
-     * Private properties that reflect for styling manually in `updated`.
-     */
-    private showingFullscreen;
-    private showingOpen;
-    private opening;
-    private closing;
-    /**
-     * Transition kind. Supported options include: grow, shrink, grow-down,
-     * grow-up, grow-left, and grow-right.
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
      *
-     * Defaults to grow-down.
-     */
-    transition: string;
-    private currentAction;
-    private dragging;
-    private readonly dragMargin;
-    private dragInfo?;
-    /**
-     * Opens and shows the dialog. This is equivalent to setting the `open`
-     * property to true.
-     */
-    show(): void;
-    /**
-     * Closes the dialog. This is equivalent to setting the `open`
-     * property to false.
+     * @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.
      */
-    close(action?: string): void;
-    /**
-     * Opens and shows the dialog if it is closed; otherwise closes it.
-     */
-    toggleShow(): void;
-    private getContentScrollInfo;
+    close(returnValue?: string): Promise<void>;
     protected render(): import("lit-html").TemplateResult<1>;
-    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(): void;
-    protected updated(changed: PropertyValues): void;
-    /**
-     * 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.
-     */
-    private reflectStateProp;
-    private dialogClosedResolver?;
-    private performTransition;
-    private dispatchActionEvent;
-    private fullscreenQuery?;
-    private fullscreenQueryListener;
-    private updateFullscreen;
-    private handleDialogDismiss;
     private handleDialogClick;
-    private handleContentScroll;
-    private getFocusElement;
-    focus(): void;
-    blur(): void;
-    private canStartDrag;
-    private handlePointerMove;
-    private handleDragEnd;
+    private handleContentClick;
+    private handleSubmit;
+    private handleCancel;
+    private animateDialog;
+    private handleHeadlineChange;
+    private handleActionsChange;
+    private handleIconChange;
+    private handleAnchorIntersection;
 }