@material/web 1.0.0-pre.8 → 1.0.0

package/common.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fileoverview A convenience bundle import that includes common components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * It is smaller than `@material/web/all.js` and includes the most common
+ * components for starting a project. Import only the individual components used
+ * for production.
+ */
+// LINT.IfChange(imports)
+// go/keep-sorted start
+import './button/filled-button.js';
+import './button/outlined-button.js';
+import './button/text-button.js';
+import './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './dialog/dialog.js';
+import './icon/icon.js';
+import './iconbutton/icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/sub-menu.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './tabs/primary-tab.js';
+import './tabs/tabs.js';
+import './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:exports)
+// LINT.IfChange(exports)
+// go/keep-sorted start
+export * from './button/filled-button.js';
+export * from './button/outlined-button.js';
+export * from './button/text-button.js';
+export * from './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './dialog/dialog.js';
+export * from './icon/icon.js';
+export * from './iconbutton/icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/sub-menu.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './tabs/primary-tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:imports)
+//# sourceMappingURL=common.js.map

package/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["common.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,yBAAyB;AACzB,uBAAuB;AACvB,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,6BAA6B,CAAC;AACrC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,qBAAqB;AACrB,4BAA4B;AAE5B,yBAAyB;AACzB,uBAAuB;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oCAAoC,CAAC;AACnD,qBAAqB;AACrB,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/primary-tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/primary-tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}

package/dialog/_dialog.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/dialog' show theme;
+@forward './internal/dialog' show theme;

package/dialog/dialog.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Dialog } from './lib/dialog.js';
+import { Dialog } from './internal/dialog.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-dialog': MdDialog;

package/dialog/dialog.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Dialog } from './lib/dialog.js';
-import { styles } from './lib/dialog-styles.css.js';
+import { Dialog } from './internal/dialog.js';
+import { styles } from './internal/dialog-styles.css.js';
 /**
  * @summary Dialogs can require an action, communicate information, or help
  * users accomplish a task. There are two types of dialogs: basic and
@@ -31,11 +31,10 @@ import { styles } from './lib/dialog-styles.css.js';
  * to complete. One example is creating a calendar entry with the event title,
  * date, location, and time.
  */
-let MdDialog = class MdDialog extends Dialog {
+export let MdDialog = class MdDialog extends Dialog {
 };
 MdDialog.styles = [styles];
 MdDialog = __decorate([
     customElement('md-dialog')
 ], MdDialog);
-export { MdDialog };
 //# sourceMappingURL=dialog.js.map

package/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Dialog} from './lib/dialog.js';\nimport {styles} from './lib/dialog-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-dialog': MdDialog;\n  }\n}\n\n/**\n * @summary Dialogs can require an action, communicate information, or help\n * users accomplish a task. There are two types of dialogs: basic and\n * full-screen.\n *\n * @description\n * A dialog is a modal window that appears in front of app content to provide\n * critical information or ask for a decision. Dialogs disable all app\n * functionality when they appear, and remain on screen until confirmed,\n * dismissed, or a required action has been taken.\n *\n * Dialogs are purposefully interruptive, so they should be used sparingly.\n * A less disruptive alternative is to use a menu, which provides options\n * without interrupting a user’s experience.\n *\n * On mobile devices only, complex dialogs should be displayed fullscreen.\n *\n * __Example usages:__\n * - Common use cases for basic dialogs include alerts, quick selection, and\n * confirmation.\n * - More complex dialogs may contain actions that require a series of tasks\n * to complete. One example is creating a calendar entry with the event title,\n * date, location, and time.\n */\n@customElement('md-dialog')\nexport class MdDialog extends Dialog {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AAQvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,WAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Dialog} from './internal/dialog.js';\nimport {styles} from './internal/dialog-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-dialog': MdDialog;\n  }\n}\n\n/**\n * @summary Dialogs can require an action, communicate information, or help\n * users accomplish a task. There are two types of dialogs: basic and\n * full-screen.\n *\n * @description\n * A dialog is a modal window that appears in front of app content to provide\n * critical information or ask for a decision. Dialogs disable all app\n * functionality when they appear, and remain on screen until confirmed,\n * dismissed, or a required action has been taken.\n *\n * Dialogs are purposefully interruptive, so they should be used sparingly.\n * A less disruptive alternative is to use a menu, which provides options\n * without interrupting a user’s experience.\n *\n * On mobile devices only, complex dialogs should be displayed fullscreen.\n *\n * __Example usages:__\n * - Common use cases for basic dialogs include alerts, quick selection, and\n * confirmation.\n * - More complex dialogs may contain actions that require a series of tasks\n * to complete. One example is creating a calendar entry with the event title,\n * date, location, and time.\n */\n@customElement('md-dialog')\nexport class MdDialog extends Dialog {\n  static override styles = [styles];\n}\n"]}

package/dialog/harness.d.ts

@@ -4,15 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Dialog } from './lib/dialog.js';
+import { Dialog } from './internal/dialog.js';
 /**
  * Test harness for dialog.
  */
 export declare class DialogHarness extends Harness<Dialog> {
-    getInteractiveElement(): Promise<HTMLDialogElement>;
-    isOpening(): boolean;
-    isClosing(): boolean;
-    transitionComplete(): Promise<void>;
-    isDialogVisible(): Promise<boolean>;
-    isScrimVisible(): Promise<boolean>;
+    getInteractiveElement(): Promise<HTMLElement>;
 }

package/dialog/harness.js

@@ -10,49 +10,8 @@ import { Harness } from '../testing/harness.js';
 export class DialogHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.dialog');
-    }
-    isOpening() {
-        // Test access to state
-        // tslint:disable-next-line:no-dict-access-on-struct-type
-        return Boolean(this.element.open && this.element['opening']);
-    }
-    isClosing() {
-        // Test access to state
-        // tslint:disable-next-line:no-dict-access-on-struct-type
-        return Boolean(!this.element.open && this.element['closing']);
-    }
-    async transitionComplete() {
-        await this.element.updateComplete;
-        let resolve = () => { };
-        const doneTransitioning = new Promise(resolver => {
-            resolve = () => {
-                resolver();
-            };
-        });
-        if (this.isOpening()) {
-            this.element.addEventListener('opened', resolve, { once: true });
-        }
-        else if (this.isClosing()) {
-            this.element.addEventListener('closed', resolve, { once: true });
-        }
-        else {
-            resolve();
-        }
-        await doneTransitioning;
-    }
-    async isDialogVisible() {
-        await this.transitionComplete();
-        const dialogElement = await this.getInteractiveElement();
-        const { display } = getComputedStyle(dialogElement);
-        return display !== 'none';
-    }
-    async isScrimVisible() {
-        await this.transitionComplete();
-        const dialogElement = await this.getInteractiveElement();
-        const { backgroundColor, display } = getComputedStyle(dialogElement, '::before');
-        const hiddenBg = `rgba(0, 0, 0, 0)`;
-        return backgroundColor !== hiddenBg && display !== 'none';
+        return this.element.querySelector('[autocomplete]') ??
+            this.element;
     }
 }
 //# sourceMappingURL=harness.js.map

package/dialog/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAK9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CACjC,CAAC;IACxB,CAAC;IAED,SAAS;QACP,uBAAuB;QACvB,yDAAyD;QACzD,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,SAAS;QACP,uBAAuB;QACvB,yDAAyD;QACzD,OAAO,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACvB,MAAM,iBAAiB,GAAG,IAAI,OAAO,CAAO,QAAQ,CAAC,EAAE;YACrD,OAAO,GAAG,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC;YACb,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;SAChE;aAAM,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YAC3B,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;SAChE;aAAM;YACL,OAAO,EAAE,CAAC;SACX;QACD,MAAM,iBAAiB,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAChC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,MAAM,EAAC,OAAO,EAAC,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAClD,OAAO,OAAO,KAAK,MAAM,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAChC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,MAAM,EAAC,eAAe,EAAE,OAAO,EAAC,GAC5B,gBAAgB,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,kBAAkB,CAAC;QACpC,OAAO,eAAe,KAAK,QAAQ,IAAI,OAAO,KAAK,MAAM,CAAC;IAC5D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Dialog} from './lib/dialog.js';\n\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.dialog') as\n        HTMLDialogElement;\n  }\n\n  isOpening() {\n    // Test access to state\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return Boolean(this.element.open && this.element['opening']);\n  }\n\n  isClosing() {\n    // Test access to state\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return Boolean(!this.element.open && this.element['closing']);\n  }\n\n  async transitionComplete() {\n    await this.element.updateComplete;\n    let resolve = () => {};\n    const doneTransitioning = new Promise<void>(resolver => {\n      resolve = () => {\n        resolver();\n      };\n    });\n    if (this.isOpening()) {\n      this.element.addEventListener('opened', resolve, {once: true});\n    } else if (this.isClosing()) {\n      this.element.addEventListener('closed', resolve, {once: true});\n    } else {\n      resolve();\n    }\n    await doneTransitioning;\n  }\n\n  async isDialogVisible() {\n    await this.transitionComplete();\n    const dialogElement = await this.getInteractiveElement();\n    const {display} = getComputedStyle(dialogElement);\n    return display !== 'none';\n  }\n\n  async isScrimVisible() {\n    await this.transitionComplete();\n    const dialogElement = await this.getInteractiveElement();\n    const {backgroundColor, display} =\n        getComputedStyle(dialogElement, '::before');\n    const hiddenBg = `rgba(0, 0, 0, 0)`;\n    return backgroundColor !== hiddenBg && display !== 'none';\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,gBAAgB,CAAC;YAC5D,IAAI,CAAC,OAAO,CAAC;IACnB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Dialog} from './internal/dialog.js';\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('[autocomplete]') ??\n        this.element;\n  }\n}\n"]}

package/dialog/internal/_dialog.scss

@@ -0,0 +1,278 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-dialog-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-dialog-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-dialog-values();
+  $md-sys-color: tokens.md-sys-color-values-light();
+  $md-sys-motion: tokens.md-sys-motion-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-dialog-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_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, calc(100% - 48px));
+    max-width: min(560px, calc(100% - 48px));
+    min-height: 140px;
+    min-width: 280px;
+    position: fixed;
+    height: fit-content;
+    width: fit-content;
+  }
+
+  dialog {
+    background: transparent;
+    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 {
+    // Can't use ::backdrop since Firefox does not allow animations on it.
+    background: none;
+  }
+
+  .scrim {
+    background: map.get($md-sys-color, 'scrim');
+    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-family: var(--_headline-font);
+    font-size: var(--_headline-size);
+    line-height: var(--_headline-line-height);
+    font-weight: var(--_headline-weight);
+    position: relative;
+  }
+
+  slot[name='headline']::slotted(*) {
+    align-items: center;
+    align-self: stretch;
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    padding: 24px 24px 0;
+  }
+
+  .icon {
+    display: flex;
+  }
+
+  slot[name='icon']::slotted(*) {
+    color: var(--_icon-color);
+    fill: currentColor;
+    font-size: var(--_icon-size);
+    padding-top: 24px;
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+  }
+
+  .has-icon slot[name='headline']::slotted(*) {
+    justify-content: center;
+    padding-top: 16px;
+  }
+
+  .scrollable slot[name='headline']::slotted(*) {
+    padding-bottom: 16px;
+  }
+
+  .scrollable.has-headline slot[name='content']::slotted(*) {
+    padding-top: 8px;
+  }
+
+  .container {
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    // Safari won't show content with "flex: 1", but container needs to grow if
+    // height is set on the dialog, so use flex-grow instead.
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+    transform-origin: top;
+  }
+
+  .container::before {
+    background: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+
+  .scroller {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    // needed to display scrollbars on Chrome linux. Also needs to be > 0 so
+    // that content that is position: fixed in the content can render above the
+    // actions bar. e.g. <md-select positioning="menu-fixed">
+    z-index: 1;
+  }
+
+  .scrollable .scroller {
+    // Only add scrollbars if the content is overflowing. This prevents extra
+    // space from appearing on platforms that reserve scrollbar space.
+    // Note: we only scroll vertically. Horizontal scrolling should be handled
+    // by the content.
+    overflow-y: scroll;
+  }
+
+  .content {
+    color: var(--_supporting-text-color);
+    font-family: var(--_supporting-text-font);
+    font-size: var(--_supporting-text-size);
+    line-height: var(--_supporting-text-line-height);
+    font-weight: var(--_supporting-text-weight);
+    height: min-content; // Needed for Safari
+    position: relative;
+  }
+
+  slot[name='content']::slotted(*) {
+    box-sizing: border-box;
+    padding: 24px;
+  }
+
+  // Anchors are used with an IntersectionObserver to determine when the content
+  // has scrolled.
+  .anchor {
+    position: absolute;
+  }
+
+  .top.anchor {
+    top: 0;
+  }
+
+  .bottom.anchor {
+    bottom: 0;
+  }
+
+  .actions {
+    position: relative;
+  }
+
+  slot[name='actions']::slotted(*) {
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 16px 24px 24px;
+  }
+
+  .has-actions slot[name='content']::slotted(*) {
+    padding-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;
+    }
+  }
+}

package/dialog/internal/animations.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A dialog animation's arguments. See `Element.prototype.animate`.
+ */
+export type DialogAnimationArgs = Parameters<Element['animate']>;
+/**
+ * A collection of dialog animations. Each element of a dialog may have multiple
+ * animations.
+ */
+export interface DialogAnimation {
+    /**
+     * Animations for the dialog itself.
+     */
+    dialog?: DialogAnimationArgs[];
+    /**
+     * Animations for the scrim backdrop.
+     */
+    scrim?: DialogAnimationArgs[];
+    /**
+     * Animations for the container of the dialog.
+     */
+    container?: DialogAnimationArgs[];
+    /**
+     * Animations for the headline section.
+     */
+    headline?: DialogAnimationArgs[];
+    /**
+     * Animations for the contents section.
+     */
+    content?: DialogAnimationArgs[];
+    /**
+     * Animations for the actions section.
+     */
+    actions?: DialogAnimationArgs[];
+}
+/**
+ * The default dialog open animation.
+ */
+export declare const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation;
+/**
+ * The default dialog close animation.
+ */
+export declare const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation;

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"]}