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

package/common.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @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.
+ */
+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/standard-icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './list/list-item-link.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/menu-item-link.js';
+import './menu/sub-menu-item.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/tab.js';
+import './tabs/tabs.js';
+import './textfield/outlined-text-field.js';
+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/standard-icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './list/list-item-link.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/menu-item-link.js';
+export * from './menu/sub-menu-item.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/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/outlined-text-field.js';

package/common.js

@@ -0,0 +1,70 @@
+/**
+ * @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/standard-icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './list/list-item-link.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/menu-item-link.js';
+import './menu/sub-menu-item.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/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/standard-icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './list/list-item-link.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/menu-item-link.js';
+export * from './menu/sub-menu-item.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/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,sCAAsC,CAAC;AAC9C,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,eAAe,CAAC;AACvB,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,sCAAsC,CAAC;AACrD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,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/standard-icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './list/list-item-link.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/menu-item-link.js';\nimport './menu/sub-menu-item.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/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/standard-icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './list/list-item-link.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/menu-item-link.js';\nexport * from './menu/sub-menu-item.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/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

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,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 './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,7 +4,7 @@
  * 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.
  */

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;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 './internal/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"]}

package/dialog/internal/_dialog.scss

@@ -0,0 +1,376 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// PUBLIC PROPERTIES
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../internal/sass/theme';
+@use './tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  $tokens: tokens.md-comp-dialog-values();
+  $tokens: theme.create-theme-vars($tokens, 'dialog');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    // Private properties for drag data.
+    --_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: transparent;
+    padding: 0;
+    margin: 0;
+    overflow: clip;
+  }
+
+  // stylelint-disable-next-line selector-pseudo-class-no-unknown --
+  // New platform pseudo-class
+  .dialog:not(:modal) {
+    z-index: 10000;
+    pointer-events: none;
+  }
+
+  .dialog[open] {
+    display: flex;
+  }
+
+  .dialog::backdrop {
+    // Per spec, custom properties don't inherit to backdrop so we avoid using it.
+    background: none;
+  }
+
+  // Note, using ::before as scrim because ::backdrop cannot inherit custom properties.
+  .dialog::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    block-size: 100dvh;
+    inline-size: 100dvw;
+    pointer-events: none;
+  }
+
+  // Hide scrim when modeless.
+  :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 {
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+      )
+    );
+  }
+
+  .container > * {
+    box-sizing: border-box;
+    // Apply pad left/right here so scrollbar is not indented.
+    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 transparent;
+    border-block-end: var(--_with-divider-divider-height) solid transparent;
+  }
+
+  .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;
+  }
+
+  // Transitions for open/closed states
+  .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: transparent;
+  }
+
+  :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;
+  }
+
+  // fullscreen
+  :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);
+    // TODO: should there be explicit tokens for these?
+    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);
+  }
+
+  // Hide bottom divider on fullscreen since it's common not to have footer actions.
+  :host([showing-fullscreen]) .scroll-divider-footer .content {
+    border-block-end-color: transparent;
+  }
+
+  // High contrast mode
+  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+    .container {
+      outline: windowtext solid 2px;
+    }
+  }
+
+  // Slot styling
+  [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;
+  }
+}

package/dialog/internal/_tokens.scss

@@ -0,0 +1,66 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../internal/sass/string-ext';
+@use '../../internal/sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+$_md-sys-color: tokens.md-sys-color-values-light();
+
+$_tokens: (
+  // Container size
+  container-max-inline-size: min(560px, calc(100% - 48px)),
+  container-min-inline-size: 280px,
+  container-max-block-size: min(560px, calc(100% - 48px)),
+  container-min-block-size: 140px,
+  // Container position
+  container-inset-inline-start: auto,
+  container-inset-inline-end: auto,
+  container-inset-block-start: auto,
+  container-inset-block-end: auto,
+
+  // Transition
+  // Basing on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#27a05b8b-02b1-4695-a7e4-70797f205222
+  opening-transition-duration: map.get($_md-sys-motion, 'duration-medium4'),
+  opening-transition-easing:
+    map.get($_md-sys-motion, 'easing-emphasized-decelerate'),
+  closing-transition-duration: map.get($_md-sys-motion, 'duration-short4'),
+  closing-transition-easing:
+    map.get($_md-sys-motion, 'easing-emphasized-accelerate'),
+  // Scrim
+  scrim-color: rgba(0, 0, 0, 0.32),
+  // Content
+  container-block-padding: 24px,
+  container-inline-padding: 24px,
+  header-spacing: 16px,
+  action-spacing: 8px,
+  content-block-start-spacing: 16px,
+  content-block-end-spacing: 24px,
+  // Divider
+  with-divider-divider-height: 1px,
+  with-divider-divider-color: map.get($_md-sys-color, 'outline')
+);
+
+$_fullscreen-tokens: (
+  fullscreen-header-block-size: 56px,
+  fullscreen-footer-block-size: 56px,
+  // Note, the 8px here is not per spec, but needed to make the explicit 56px not be cramped.
+  fullscreen-container-block-padding: 8px,
+);
+
+// Extended token set for dialog.
+@function md-comp-dialog-values() {
+  @return map.merge(
+    map.merge(tokens.md-comp-dialog-values(), $_tokens),
+    $_fullscreen-tokens
+  );
+}