Migrate all paper dialogs to mwc (#10333)

2025-07-26 02:36:37 +00:00 · 2021-10-19 22:56:49 +02:00 · 2021-10-19 22:56:49 +02:00 · 7488eb782d
commit 7488eb782d
parent b1e6935df9
27 changed files with 230 additions and 691 deletions
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
@ -47,11 +47,6 @@ class HassioMarkdownDialog extends LitElement {
      haStyleDialog,
      hassioStyle,
      css`
-        ha-paper-dialog {
-          min-width: 350px;
-          font-size: 14px;
-          border-radius: 2px;
-        }
        app-toolbar {
          margin: 0;
          padding: 0 16px;
@ -62,19 +57,6 @@ class HassioMarkdownDialog extends LitElement {
          margin-left: 16px;
        }
        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-paper-dialog {
-            max-height: 100%;
-          }
-          ha-paper-dialog::before {
-            content: "";
-            position: fixed;
-            z-index: -1;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            bottom: 0px;
-            background-color: inherit;
-          }
          app-toolbar {
            color: var(--text-primary-color);
            background-color: var(--primary-color);
--- a/package.json
+++ b/package.json
@ -75,9 +75,6 @@
    "@polymer/iron-input": "^3.0.1",
    "@polymer/iron-overlay-behavior": "^3.0.3",
    "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-dialog": "^3.0.1",
-    "@polymer/paper-dialog-behavior": "^3.0.1",
-    "@polymer/paper-dialog-scrollable": "^3.0.1",
    "@polymer/paper-dropdown-menu": "^3.2.0",
    "@polymer/paper-input": "^3.2.1",
    "@polymer/paper-item": "^3.0.1",
--- a/src/components/dialog/ha-iron-focusables-helper.js
+++ b/src/components/dialog/ha-iron-focusables-helper.js
@ -1,89 +0,0 @@
-/**
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at
-http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
-http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
-found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
-part of the polymer project is also subject to an additional IP rights grant
-found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-  Fixes issue with not using shadow dom properly in iron-overlay-behavior/icon-focusables-helper.js
-*/
-import { IronFocusablesHelper } from "@polymer/iron-overlay-behavior/iron-focusables-helper";
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-
-export const HaIronFocusablesHelper = {
-  /**
-   * Returns a sorted array of tabbable nodes, including the root node.
-   * It searches the tabbable nodes in the light and shadow dom of the chidren,
-   * sorting the result by tabindex.
-   * @param {!Node} node
-   * @return {!Array<!HTMLElement>}
-   */
-  getTabbableNodes: function (node) {
-    const result = [];
-    // If there is at least one element with tabindex > 0, we need to sort
-    // the final array by tabindex.
-    const needsSortByTabIndex = this._collectTabbableNodes(node, result);
-    if (needsSortByTabIndex) {
-      return IronFocusablesHelper._sortByTabIndex(result);
-    }
-    return result;
-  },
-
-  /**
-   * Searches for nodes that are tabbable and adds them to the `result` array.
-   * Returns if the `result` array needs to be sorted by tabindex.
-   * @param {!Node} node The starting point for the search; added to `result`
-   * if tabbable.
-   * @param {!Array<!HTMLElement>} result
-   * @return {boolean}
-   * @private
-   */
-  _collectTabbableNodes: function (node, result) {
-    // If not an element or not visible, no need to explore children.
-    if (
-      node.nodeType !== Node.ELEMENT_NODE ||
-      !IronFocusablesHelper._isVisible(node)
-    ) {
-      return false;
-    }
-    const element = /** @type {!HTMLElement} */ (node);
-    const tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
-    let needsSort = tabIndex > 0;
-    if (tabIndex >= 0) {
-      result.push(element);
-    }
-
-    // In ShadowDOM v1, tab order is affected by the order of distrubution.
-    // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B];
-    // in ShadowDOM v0 tab order is not affected by the distrubution order,
-    // in fact getTabbableNodes(#root) returns [#B, #A].
-    //  <div id="root">
-    //   <!-- shadow -->
-    //     <slot name="a">
-    //     <slot name="b">
-    //   <!-- /shadow -->
-    //   <input id="A" slot="a">
-    //   <input id="B" slot="b" tabindex="1">
-    //  </div>
-    // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
-    let children;
-    if (element.localName === "content" || element.localName === "slot") {
-      children = dom(element).getDistributedNodes();
-    } else {
-      // /////////////////////////
-      // Use shadow root if possible, will check for distributed nodes.
-      // THIS IS THE CHANGED LINE
-      children = dom(element.shadowRoot || element.root || element).children;
-      // /////////////////////////
-    }
-    for (let i = 0; i < children.length; i++) {
-      // Ensure method is always invoked to collect tabbable children.
-      needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
-    }
-    return needsSort;
-  },
-};
--- a/src/components/dialog/ha-paper-dialog.ts
+++ b/src/components/dialog/ha-paper-dialog.ts
@ -1,31 +0,0 @@
-import "@polymer/paper-dialog/paper-dialog";
-import type { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import type { Constructor } from "../../types";
-import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper";
-
-const paperDialogClass = customElements.get(
-  "paper-dialog"
-) as Constructor<PaperDialogElement>;
-
-// behavior that will override existing iron-overlay-behavior and call the fixed implementation
-const haTabFixBehaviorImpl = {
-  get _focusableNodes() {
-    return HaIronFocusablesHelper.getTabbableNodes(this);
-  },
-};
-
-// paper-dialog that uses the haTabFixBehaviorImpl behavior
-// export class HaPaperDialog extends paperDialogClass {}
-// @ts-ignore
-export class HaPaperDialog
-  extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass)
-  implements PaperDialogElement {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-dialog": HaPaperDialog;
-  }
-}
-// @ts-ignore
-customElements.define("ha-paper-dialog", HaPaperDialog);
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@ -24,7 +24,7 @@ export const createCloseHeading = (
 // @ts-expect-error
 export class HaDialog extends Dialog {
  public scrollToPos(x: number, y: number) {
-    this.contentElement.scrollTo(x, y);
+    this.contentElement?.scrollTo(x, y);
  }

  protected renderHeading() {
@ -44,6 +44,12 @@ export class HaDialog extends Dialog {
          justify-content: var(--justify-action-buttons, flex-end);
          padding-bottom: max(env(safe-area-inset-bottom), 8px);
        }
+        .mdc-dialog__actions span:nth-child(1) {
+          flex: var(--secondary-action-button-flex, unset);
+        }
+        .mdc-dialog__actions span:nth-child(2) {
+          flex: var(--primary-action-button-flex, unset);
+        }
        .mdc-dialog__container {
          align-items: var(--vertial-align-dialog, center);
        }
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import { mdiClose } from "@mdi/js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
  css,
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@ -1,7 +1,5 @@
 /* eslint-disable lit/prefer-static-styles */
 import { mdiMicrophone } from "@mdi/js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
@ -17,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { SpeechRecognition } from "../../common/dom/speech-recognition";
 import { uid } from "../../common/util/uid";
-import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-icon-button";
 import {
  AgentInfo,
@ -27,6 +24,9 @@ import {
 } from "../../data/conversation";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import "../../components/ha-dialog";
+import type { HaDialog } from "../../components/ha-dialog";
+import "@material/mwc-button/mwc-button";

 interface Message {
  who: string;
@ -56,7 +56,7 @@ export class HaVoiceCommandDialog extends LitElement {

  @state() private _agentInfo?: AgentInfo;

-  @query("#messages", true) private messages!: PaperDialogScrollableElement;
+  @query("ha-dialog", true) private _dialog!: HaDialog;

  private recognition!: SpeechRecognition;

@ -70,74 +70,42 @@ export class HaVoiceCommandDialog extends LitElement {
    this._agentInfo = await getAgentInfo(this.hass);
  }

+  public async closeDialog(): Promise<void> {
+    this._opened = false;
+    if (this.recognition) {
+      this.recognition.abort();
+    }
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
  protected render(): TemplateResult {
-    // CSS custom property mixins only work in render https://github.com/Polymer/lit-element/issues/633
+    if (!this._opened) {
+      return html``;
+    }
    return html`
-      <style>
-        paper-dialog-scrollable {
-          --paper-dialog-scrollable: {
-            -webkit-overflow-scrolling: auto;
-            max-height: 50vh !important;
-          }
-        }
-
-        paper-dialog-scrollable.can-scroll {
-          --paper-dialog-scrollable: {
-            -webkit-overflow-scrolling: touch;
-            max-height: 50vh !important;
-          }
-        }
-
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog-scrollable {
-            --paper-dialog-scrollable: {
-              -webkit-overflow-scrolling: auto;
-              max-height: calc(100vh - 175px) !important;
-            }
-          }
-
-          paper-dialog-scrollable.can-scroll {
-            --paper-dialog-scrollable: {
-              -webkit-overflow-scrolling: touch;
-              max-height: calc(100vh - 175px) !important;
-            }
-          }
-        }
-      </style>
-      <ha-paper-dialog
-        with-backdrop
-        .opened=${this._opened}
-        @opened-changed=${this._openedChanged}
-      >
-        ${this._agentInfo && this._agentInfo.onboarding
-          ? html`
-              <div class="onboarding">
-                ${this._agentInfo.onboarding.text}
-                <div class="side-by-side" @click=${this._completeOnboarding}>
-                  <a
-                    class="button"
-                    href=${this._agentInfo.onboarding.url}
-                    target="_blank"
-                    rel="noreferrer"
-                    ><mwc-button unelevated
-                      >${this.hass.localize("ui.common.yes")}!</mwc-button
-                    ></a
-                  >
-                  <mwc-button outlined
-                    >${this.hass.localize("ui.common.no")}</mwc-button
-                  >
+      <ha-dialog open @closed=${this.closeDialog}>
+        <div>
+          ${this._agentInfo && this._agentInfo.onboarding
+            ? html`
+                <div class="onboarding">
+                  ${this._agentInfo.onboarding.text}
+                  <div class="side-by-side" @click=${this._completeOnboarding}>
+                    <a
+                      class="button"
+                      href=${this._agentInfo.onboarding.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      ><mwc-button unelevated
+                        >${this.hass.localize("ui.common.yes")}!</mwc-button
+                      ></a
+                    >
+                    <mwc-button outlined
+                      >${this.hass.localize("ui.common.no")}</mwc-button
+                    >
+                  </div>
                </div>
-              </div>
-            `
-          : ""}
-        <paper-dialog-scrollable
-          id="messages"
-          class=${classMap({
-            "top-border": Boolean(
-              this._agentInfo && this._agentInfo.onboarding
-            ),
-          })}
-        >
+              `
+            : ""}
          ${this._conversation.map(
            (message) => html`
              <div class=${this._computeMessageClasses(message)}>
@ -157,8 +125,8 @@ export class HaVoiceCommandDialog extends LitElement {
                </div>
              `
            : ""}
-        </paper-dialog-scrollable>
-        <div class="input">
+        </div>
+        <div class="input" slot="primaryAction">
          <paper-input
            @keyup=${this._handleKeyUp}
            .label=${this.hass.localize(
@ -200,7 +168,7 @@ export class HaVoiceCommandDialog extends LitElement {
              `
            : ""}
        </div>
-      </ha-paper-dialog>
+      </ha-dialog>
    `;
  }

@ -346,18 +314,7 @@ export class HaVoiceCommandDialog extends LitElement {
  }

  private _scrollMessagesBottom() {
-    this.messages.scrollTarget.scrollTop =
-      this.messages.scrollTarget.scrollHeight;
-    if (this.messages.scrollTarget.scrollTop === 0) {
-      fireEvent(this.messages, "iron-resize");
-    }
-  }
-
-  private _openedChanged(ev: CustomEvent) {
-    this._opened = ev.detail.value;
-    if (!this._opened && this.recognition) {
-      this.recognition.abort();
-    }
+    this._dialog.scrollToPos(0, 99999);
  }

  private _computeMessageClasses(message: Message) {
@ -368,10 +325,6 @@ export class HaVoiceCommandDialog extends LitElement {
    return [
      haStyleDialog,
      css`
-        :host {
-          z-index: 103;
-        }
-
        ha-icon-button {
          color: var(--secondary-text-color);
        }
@ -380,13 +333,12 @@ export class HaVoiceCommandDialog extends LitElement {
          color: var(--primary-color);
        }

-        .input {
-          margin: 0 0 16px 0;
+        ha-dialog {
+          --primary-action-button-flex: 1;
+          --secondary-action-button-flex: 0;
+          --mdc-dialog-max-width: 450px;
        }

-        ha-paper-dialog {
-          width: 450px;
-        }
        a.button {
          text-decoration: none;
        }
@ -394,16 +346,7 @@ export class HaVoiceCommandDialog extends LitElement {
          width: 100%;
        }
        .onboarding {
-          padding: 0 24px;
-        }
-        paper-dialog-scrollable.top-border::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: 1px;
-          background: var(--divider-color);
+          border-bottom: 1px solid var(--divider-color);
        }
        .side-by-side {
          display: flex;
--- a/src/mixins/dialog-mixin.js
+++ b/src/mixins/dialog-mixin.js
@ -1,25 +0,0 @@
-import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
-import { EventsMixin } from "./events-mixin";
-/**
- * @polymerMixin
- * @appliesMixin EventsMixin
- * @appliesMixin PaperDialogBehavior
- */
-export default dedupingMixin(
-  (superClass) =>
-    class extends mixinBehaviors(
-      [EventsMixin, PaperDialogBehavior],
-      superClass
-    ) {
-      static get properties() {
-        return {
-          withBackdrop: {
-            type: Boolean,
-            value: true,
-          },
-        };
-      }
-    }
-);
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@ -1,20 +1,18 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
 import type { AutomationConfig } from "../../../../data/automation";
 import { convertThingTalk } from "../../../../data/cloud";
-import type { PolymerChangedEvent } from "../../../../polymer-types";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./ha-thingtalk-placeholders";
 import type { PlaceholderValues } from "./ha-thingtalk-placeholders";
 import type { ThingtalkDialogParams } from "./show-dialog-thingtalk";
+import "../../../../components/ha-dialog";

 export interface Placeholder {
  name: string;
@ -38,8 +36,6 @@ class DialogThingtalk extends LitElement {

  @state() private _submitting = false;

-  @state() private _opened = false;
-
  @state() private _placeholders?: PlaceholderContainer;

  @query("#input") private _input?: PaperInputElement;
@ -51,7 +47,6 @@ class DialogThingtalk extends LitElement {
  public async showDialog(params: ThingtalkDialogParams): Promise<void> {
    this._params = params;
    this._error = undefined;
-    this._opened = true;
    if (params.input) {
      this._value = params.input;
      await this.updateComplete;
@ -61,10 +56,10 @@ class DialogThingtalk extends LitElement {

  public closeDialog() {
    this._placeholders = undefined;
+    this._params = undefined;
    if (this._input) {
      this._input.value = null;
    }
-    this._opened = false;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

@ -77,26 +72,22 @@ class DialogThingtalk extends LitElement {
        <ha-thingtalk-placeholders
          .hass=${this.hass}
          .placeholders=${this._placeholders}
-          .opened=${this._opened}
          .skip=${this._skip}
-          @opened-changed=${this._openedChanged}
+          @closed=${this.closeDialog}
          @placeholders-filled=${this._handlePlaceholders}
        >
        </ha-thingtalk-placeholders>
      `;
    }
    return html`
-      <ha-paper-dialog
-        with-backdrop
-        .opened=${this._opened}
-        @opened-changed=${this._openedChanged}
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${this.hass.localize(
+          `ui.panel.config.automation.thingtalk.task_selection.header`
+        )}
      >
-        <h2>
-          ${this.hass.localize(
-            `ui.panel.config.automation.thingtalk.task_selection.header`
-          )}
-        </h2>
-        <paper-dialog-scrollable>
+        <div>
          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
          ${this.hass.localize(
            `ui.panel.config.automation.thingtalk.task_selection.introduction`
@ -143,23 +134,25 @@ class DialogThingtalk extends LitElement {
            class="attribution"
            >Powered by Almond</a
          >
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          <mwc-button class="left" @click=${this._skip}>
-            ${this.hass.localize(`ui.common.skip`)}
-          </mwc-button>
-          <mwc-button @click=${this._generate} .disabled=${this._submitting}>
-            ${this._submitting
-              ? html`<ha-circular-progress
-                  active
-                  size="small"
-                  title="Creating your automation..."
-                ></ha-circular-progress>`
-              : ""}
-            ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
-          </mwc-button>
        </div>
-      </ha-paper-dialog>
+        <mwc-button class="left" @click=${this._skip} slot="secondaryAction">
+          ${this.hass.localize(`ui.common.skip`)}
+        </mwc-button>
+        <mwc-button
+          @click=${this._generate}
+          .disabled=${this._submitting}
+          slot="primaryAction"
+        >
+          ${this._submitting
+            ? html`<ha-circular-progress
+                active
+                size="small"
+                title="Creating your automation..."
+              ></ha-circular-progress>`
+            : ""}
+          ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
+        </mwc-button>
+      </ha-dialog>
    `;
  }

@ -234,12 +227,6 @@ class DialogThingtalk extends LitElement {
    this.closeDialog();
  };

-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    if (!ev.detail.value) {
-      this.closeDialog();
-    }
-  }
-
  private _handleKeyUp(ev: KeyboardEvent) {
    if (ev.keyCode === 13) {
      this._generate();
@ -255,7 +242,7 @@ class DialogThingtalk extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-paper-dialog {
+        ha-dialog {
          max-width: 500px;
        }
        mwc-button.left {
--- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
+++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
@ -25,7 +25,6 @@ import {
 import { subscribeEntityRegistry } from "../../../../data/entity_registry";
 import { domainToName } from "../../../../data/integration";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
-import { PolymerChangedEvent } from "../../../../polymer-types";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { Placeholder, PlaceholderContainer } from "./dialog-thingtalk";
@ -124,18 +123,14 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {

  protected render(): TemplateResult {
    return html`
-      <ha-paper-dialog
-        modal
-        with-backdrop
-        .opened=${this.opened}
-        @opened-changed=${this._openedChanged}
+      <ha-dialog
+        open
+        scrimClickAction
+        .heading=${this.hass.localize(
+          `ui.panel.config.automation.thingtalk.link_devices.header`
+        )}
      >
-        <h2>
-          ${this.hass.localize(
-            `ui.panel.config.automation.thingtalk.link_devices.header`
-          )}
-        </h2>
-        <paper-dialog-scrollable>
+        <div>
          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
          ${Object.entries(this.placeholders).map(
            ([type, placeholders]) =>
@ -243,16 +238,18 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
                })}
              `
          )}
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          <mwc-button class="left" @click=${this.skip}>
-            ${this.hass.localize(`ui.common.skip`)}
-          </mwc-button>
-          <mwc-button @click=${this._done} .disabled=${!this._isDone}>
-            ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
-          </mwc-button>
        </div>
-      </ha-paper-dialog>
+        <mwc-button @click=${this.skip} slot="secondaryAction">
+          ${this.hass.localize(`ui.common.skip`)}
+        </mwc-button>
+        <mwc-button
+          @click=${this._done}
+          .disabled=${!this._isDone}
+          slot="primaryAction"
+        >
+          ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
+        </mwc-button>
+      </ha-dialog>
    `;
  }

@ -440,11 +437,6 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
        this.requestUpdate("_placeholderValues");
      }
    });
-
-    fireEvent(
-      this.shadowRoot!.querySelector("ha-paper-dialog")! as HTMLElement,
-      "iron-resize"
-    );
  }

  private _entityPicked(ev: Event): void {
@ -465,24 +457,16 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
    fireEvent(this, "placeholders-filled", { value: this._placeholderValues });
  }

-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    // The opened-changed event doesn't leave the shadowdom so we re-dispatch it
-    this.dispatchEvent(new CustomEvent(ev.type, ev));
-  }
-
  static get styles(): CSSResultGroup {
    return [
      haStyleDialog,
      css`
-        ha-paper-dialog {
+        ha-dialog {
          max-width: 500px;
        }
        mwc-button.left {
          margin-right: auto;
        }
-        paper-dialog-scrollable {
-          margin-top: 10px;
-        }
        h3 {
          margin: 10px 0 0 0;
          font-weight: 500;
--- a/src/panels/config/blueprint/dialog-import-blueprint.ts
+++ b/src/panels/config/blueprint/dialog-import-blueprint.ts
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
--- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
@ -2,8 +2,7 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
@ -15,11 +14,13 @@ class DialogCloudCertificate extends LitElement {
  @property()
  private _params?: CloudCertificateDialogParams;

-  public async showDialog(params: CloudCertificateDialogParams) {
+  public showDialog(params: CloudCertificateDialogParams) {
    this._params = params;
-    // Wait till dialog is rendered.
-    await this.updateComplete;
-    this._dialog.open();
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

  protected render() {
@ -29,12 +30,12 @@ class DialogCloudCertificate extends LitElement {
    const { certificateInfo } = this._params;

    return html`
-      <ha-paper-dialog with-backdrop>
-        <h2>
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_certificate.certificate_information"
-          )}
-        </h2>
+      <ha-dialog
+        open
+        .heading=${this.hass!.localize(
+          "ui.panel.config.cloud.dialog_certificate.certificate_information"
+        )}
+      >
        <div>
          <p>
            ${this.hass!.localize(
@ -56,31 +57,21 @@ class DialogCloudCertificate extends LitElement {
          </p>
        </div>

-        <div class="paper-dialog-buttons">
-          <mwc-button @click=${this._closeDialog}
-            >${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_certificate.close"
-            )}</mwc-button
-          >
-        </div>
-      </ha-paper-dialog>
+        <mwc-button @click=${this.closeDialog} slot="primaryAction">
+          ${this.hass!.localize(
+            "ui.panel.config.cloud.dialog_certificate.close"
+          )}
+        </mwc-button>
+      </ha-dialog>
    `;
  }

-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
-  }
-
-  private _closeDialog() {
-    this._dialog.close();
-  }
-
  static get styles(): CSSResultGroup {
    return [
      haStyle,
      css`
-        ha-paper-dialog {
-          width: 535px;
+        ha-dialog {
+          --mdc-dialog-max-width: 535px;
        }
        .break-word {
          overflow-wrap: break-word;
--- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
+++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
@ -1,11 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { state } from "lit/decorators";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@ -19,11 +17,13 @@ export class DialogManageCloudhook extends LitElement {

  @state() private _params?: WebhookDialogParams;

-  public async showDialog(params: WebhookDialogParams) {
+  public showDialog(params: WebhookDialogParams) {
    this._params = params;
-    // Wait till dialog is rendered.
-    await this.updateComplete;
-    this._dialog.open();
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

  protected render() {
@ -39,14 +39,14 @@ export class DialogManageCloudhook extends LitElement {
          )
        : documentationUrl(this.hass!, `/integrations/${webhook.domain}/`);
    return html`
-      <ha-paper-dialog with-backdrop>
-        <h2>
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
-            "name",
-            webhook.name
-          )}
-        </h2>
+      <ha-dialog
+        open
+        .heading=${this.hass!.localize(
+          "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
+          "name",
+          webhook.name
+        )}
+      >
        <div>
          <p>
            ${this.hass!.localize(
@ -79,36 +79,29 @@ export class DialogManageCloudhook extends LitElement {
          </p>
        </div>

-        <div class="paper-dialog-buttons">
-          <a href=${docsUrl} target="_blank" rel="noreferrer">
-            <mwc-button
-              >${this.hass!.localize(
-                "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
-              )}</mwc-button
-            >
-          </a>
-          <mwc-button @click=${this._closeDialog}
-            >${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_cloudhook.close"
-            )}</mwc-button
-          >
-        </div>
-      </ha-paper-dialog>
+        <a
+          href=${docsUrl}
+          target="_blank"
+          rel="noreferrer"
+          slot="secondaryAction"
+        >
+          <mwc-button>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+            )}
+          </mwc-button>
+        </a>
+        <mwc-button @click=${this.closeDialog} slot="primaryAction">
+          ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
+        </mwc-button>
+      </ha-dialog>
    `;
  }

-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
-  }
-
  private get _paperInput(): PaperInputElement {
    return this.shadowRoot!.querySelector("paper-input")!;
  }

-  private _closeDialog() {
-    this._dialog.close();
-  }
-
  private async _disableWebhook() {
    showConfirmationDialog(this, {
      text: this.hass!.localize(
@ -118,7 +111,7 @@ export class DialogManageCloudhook extends LitElement {
      confirmText: this.hass!.localize("ui.common.disable"),
      confirm: () => {
        this._params!.disableHook();
-        this._closeDialog();
+        this.closeDialog();
      },
    });
  }
@ -147,7 +140,7 @@ export class DialogManageCloudhook extends LitElement {
    return [
      haStyle,
      css`
-        ha-paper-dialog {
+        ha-dialog {
          width: 650px;
        }
        paper-input {
@ -156,7 +149,7 @@ export class DialogManageCloudhook extends LitElement {
        button.link {
          color: var(--primary-color);
        }
-        .paper-dialog-buttons a {
+        a {
          text-decoration: none;
        }
      `,
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@ -90,7 +90,7 @@ export class ZHAAddGroupPage extends LitElement {
          >
          </zha-device-endpoint-data-table>

-          <div class="paper-dialog-buttons">
+          <div class="buttons">
            <mwc-button
              .disabled=${!this._groupName ||
              this._groupName === "" ||
@ -168,11 +168,11 @@ export class ZHAAddGroupPage extends LitElement {
        ha-config-section *:last-child {
          padding-bottom: 24px;
        }
-        .paper-dialog-buttons {
+        .buttons {
          align-items: flex-end;
          padding: 8px;
        }
-        .paper-dialog-buttons .warning {
+        .buttons .warning {
          --mdc-theme-primary: var(--error-color);
        }
      `,
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@ -155,7 +155,7 @@ export class ZHAGroupPage extends LitElement {
                >
                </zha-device-endpoint-data-table>

-                <div class="paper-dialog-buttons">
+                <div class="buttons">
                  <mwc-button
                    .disabled=${!this._selectedDevicesToRemove.length ||
                    this._processingRemove}
@ -190,7 +190,7 @@ export class ZHAGroupPage extends LitElement {
          >
          </zha-device-endpoint-data-table>

-          <div class="paper-dialog-buttons">
+          <div class="buttons">
            <mwc-button
              .disabled=${!this._selectedDevicesToAdd.length ||
              this._processingAdd}
@ -304,11 +304,11 @@ export class ZHAGroupPage extends LitElement {
          color: var(--primary-color);
          text-decoration: none;
        }
-        .paper-dialog-buttons {
+        .buttons {
          align-items: flex-end;
          padding: 8px;
        }
-        .paper-dialog-buttons .warning {
+        .buttons .warning {
          --mdc-theme-primary: var(--error-color);
        }
      `,
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-log-dialog.js
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-log-dialog.js
@ -1,10 +1,9 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../../components/dialog/ha-paper-dialog";
 import { EventsMixin } from "../../../../../mixins/events-mixin";
 import "../../../../../styles/polymer-ha-style-dialog";
+import "../../../../../components/ha-dialog";

 class ZwaveLogDialog extends EventsMixin(PolymerElement) {
  static get template() {
@ -14,12 +13,11 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
        font-family: var(--code-font-family, monospace);
      }
    </style>
-      <ha-paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
-        <h2>OpenZwave internal logfile</h2>
-        <paper-dialog-scrollable>
+      <ha-dialog open="[[_opened]]" heading="OpenZwave internal logfile" on-closed="closeDialog">
+        <div>
          <pre>[[_ozwLog]]</pre>
-        <paper-dialog-scrollable>
-      </ha-paper-dialog>
+        <div>
+      </ha-dialog>
      `;
  }

@ -56,7 +54,6 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
    this._opened = true;
    this._dialogClosedCallback = dialogClosedCallback;
    this._numLogLines = _numLogLines;
-    setTimeout(() => this.$.pwaDialog.center(), 0);
    if (_tail) {
      this.setProperties({
        _intervalId: setInterval(() => {
@ -66,6 +63,14 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
    }
  }

+  closeDialog() {
+    clearInterval(this._intervalId);
+    this._opened = false;
+    const closedEvent = true;
+    this._dialogClosedCallback({ closedEvent });
+    this._dialogClosedCallback = null;
+  }
+
  async _refreshLog() {
    const info = await this.hass.callApi(
      "GET",
@ -73,16 +78,6 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
    );
    this.setProperties({ _ozwLog: info });
  }
-
-  _dialogClosed(ev) {
-    if (ev.target.nodeName === "ZWAVE-LOG-DIALOG") {
-      clearInterval(this._intervalId);
-      this._opened = false;
-      const closedEvent = true;
-      this._dialogClosedCallback({ closedEvent });
-      this._dialogClosedCallback = null;
-    }
-  }
 }

 customElements.define("zwave-log-dialog", ZwaveLogDialog);
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts
@ -1,9 +1,7 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import deepFreeze from "deep-freeze";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
 import type { LovelaceCardConfig } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
@ -1,9 +1,7 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import deepFreeze from "deep-freeze";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@ -197,21 +197,6 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
    return [
      haStyleDialog,
      css`
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          /* overrule the ha-style-dialog max-height on small screens */
-          ha-paper-dialog {
-            max-height: 100%;
-            height: 100%;
-          }
-        }
-        @media all and (min-width: 660px) {
-          ha-paper-dialog {
-            width: 650px;
-          }
-        }
-        ha-paper-dialog {
-          max-width: 650px;
-        }
        ha-switch {
          padding-bottom: 16px;
        }
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@ -1,16 +1,14 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
 import type { LovelaceConfig } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { Lovelace } from "../../types";
 import "./hui-lovelace-editor";
+import "../../../../components/ha-dialog";

@customElement("hui-dialog-edit-lovelace")
 export class HuiDialogEditLovelace extends LitElement {
@ -20,44 +18,31 @@ export class HuiDialogEditLovelace extends LitElement {

  private _config?: LovelaceConfig;

-  private _saving: boolean;
+  private _saving = false;

-  public constructor() {
-    super();
-    this._saving = false;
-  }
-
-  public async showDialog(lovelace: Lovelace): Promise<void> {
+  public showDialog(lovelace: Lovelace): void {
    this._lovelace = lovelace;
-    if (this._dialog == null) {
-      await this.updateComplete;
-    }
-
    const { views, ...lovelaceConfig } = this._lovelace!.config;
    this._config = lovelaceConfig as LovelaceConfig;
-
-    this._dialog.open();
  }

  public closeDialog(): void {
    this._config = undefined;
-    this._dialog.close();
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
-  }
-
  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
    return html`
-      <ha-paper-dialog with-backdrop modal>
-        <h2>
-          ${this.hass!.localize(
-            "ui.panel.lovelace.editor.edit_lovelace.header"
-          )}
-        </h2>
-        <paper-dialog-scrollable>
+      <ha-dialog
+        open
+        .heading=${this.hass!.localize(
+          "ui.panel.lovelace.editor.edit_lovelace.header"
+        )}
+      >
+        <div>
          ${this.hass!.localize(
            "ui.panel.lovelace.editor.edit_lovelace.explanation"
          )}
@ -65,27 +50,26 @@ export class HuiDialogEditLovelace extends LitElement {
            .hass=${this.hass}
            .config=${this._config}
            @lovelace-config-changed=${this._ConfigChanged}
-          ></hui-lovelace-editor
-        ></paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          <mwc-button @click=${this.closeDialog}
-            >${this.hass!.localize("ui.common.cancel")}</mwc-button
-          >
-          <mwc-button
-            ?disabled=${!this._config || this._saving}
-            @click=${this._save}
-          >
-            ${this._saving
-              ? html`<ha-circular-progress
-                  active
-                  size="small"
-                  title="Saving"
-                ></ha-circular-progress>`
-              : ""}
-            ${this.hass!.localize("ui.common.save")}</mwc-button
-          >
+          ></hui-lovelace-editor>
        </div>
-      </ha-paper-dialog>
+        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+          ${this.hass!.localize("ui.common.cancel")}
+        </mwc-button>
+        <mwc-button
+          .disabled=${!this._config || this._saving}
+          @click=${this._save}
+          slot="primaryAction"
+        >
+          ${this._saving
+            ? html`<ha-circular-progress
+                active
+                size="small"
+                title="Saving"
+              ></ha-circular-progress>`
+            : ""}
+          ${this.hass!.localize("ui.common.save")}</mwc-button
+        >
+      </ha-dialog>
    `;
  }

@ -128,26 +112,7 @@ export class HuiDialogEditLovelace extends LitElement {
  }

  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          /* overrule the ha-style-dialog max-height on small screens */
-          ha-paper-dialog {
-            max-height: 100%;
-            height: 100%;
-          }
-        }
-        @media all and (min-width: 660px) {
-          ha-paper-dialog {
-            width: 650px;
-          }
-        }
-        ha-paper-dialog {
-          max-width: 650px;
-        }
-      `,
-    ];
+    return haStyleDialog;
  }
 }

--- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
+++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
@ -5,7 +5,6 @@ import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-paper-dropdown-menu";
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-dialog";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon";
 import "../../components/ha-icon-button";
@ -19,41 +19,19 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
        .error {
          color: red;
        }
-        @media all and (max-width: 500px) {
-          ha-paper-dialog {
-            margin: 0;
-            width: 100%;
-            max-height: calc(100% - var(--header-height));
-
-            position: fixed !important;
-            bottom: 0px;
-            left: 0px;
-            right: 0px;
-            overflow: scroll;
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-          }
-        }
-
-        ha-paper-dialog {
-          border-radius: 2px;
-        }
-        ha-paper-dialog p {
+        p {
          color: var(--secondary-text-color);
        }
-
        .icon {
-          float: right;
+          text-align: right;
        }
      </style>
-      <ha-paper-dialog
-        id="mp3dialog"
-        with-backdrop
-        opened="{{_opened}}"
-        on-opened-changed="_openedChanged"
+      <ha-dialog
+        open="[[_opened]]"
+        on-closed="closeDialog"
+        heading="[[localize('ui.panel.mailbox.playback_title')]]"
      >
-        <h2>
-          [[localize('ui.panel.mailbox.playback_title')]]
+        <div>
          <div class="icon">
            <template is="dom-if" if="[[_loading]]">
              <ha-circular-progress active></ha-circular-progress>
@ -62,17 +40,17 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
              <ha-icon icon="hass:delete"></ha-icon>
            </ha-icon-button>
          </div>
-        </h2>
-        <div id="transcribe"></div>
-        <div>
-          <template is="dom-if" if="[[_errorMsg]]">
-            <div class="error">[[_errorMsg]]</div>
-          </template>
-          <audio id="mp3" preload="none" controls>
-            <source id="mp3src" src="" type="audio/mpeg" />
-          </audio>
+          <div id="transcribe"></div>
+          <div>
+            <template is="dom-if" if="[[_errorMsg]]">
+              <div class="error">[[_errorMsg]]</div>
+            </template>
+            <audio id="mp3" preload="none" controls>
+              <source id="mp3src" src="" type="audio/mpeg" />
+            </audio>
+          </div>
        </div>
-      </ha-paper-dialog>
+      </ha-dialog>
    `;
  }

@ -161,13 +139,8 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
    });
  }

-  _openedChanged(ev) {
-    // Closed dialog by clicking on the overlay
-    // Check against dialogClosedCallback to make sure we didn't change
-    // programmatically
-    if (!ev.detail.value) {
-      this._dialogDone();
-    }
+  closeDialog() {
+    this._dialogDone();
  }

  _showLoading(displayed) {
--- a/src/panels/profile/ha-change-password-card.ts
+++ b/src/panels/profile/ha-change-password-card.ts
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-input/paper-input";
 import {
  css,
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@ -136,25 +136,6 @@ documentContainer.innerHTML = `<custom-style>
        .map(([key, value]) => `--${key}: ${value};`)
        .join("")}
    }
-
-    /*
-      prevent clipping of positioned elements in a small scrollable
-      force smooth scrolling if can scroll
-      use non-shady selectors so this only targets iOS 9
-      conditional mixin set in ha-style-dialog does not work with shadyCSS
-    */
-    paper-dialog-scrollable:not(.can-scroll) > .scrollable {
-      -webkit-overflow-scrolling: auto !important;
-    }
-
-    paper-dialog-scrollable.can-scroll > .scrollable {
-      -webkit-overflow-scrolling: touch !important;
-    }
-
-    /* for paper-dialog */
-    iron-overlay-backdrop {
-      backdrop-filter: var(--dialog-backdrop-filter, none);
-    }
  </style>
 </custom-style>`;

--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@ -302,57 +302,6 @@ export const haStyle = css`
 `;

 export const haStyleDialog = css`
-  /* prevent clipping of positioned elements */
-  paper-dialog-scrollable {
-    --paper-dialog-scrollable: {
-      -webkit-overflow-scrolling: auto;
-    }
-  }
-
-  /* force smooth scrolling for iOS 10 */
-  paper-dialog-scrollable.can-scroll {
-    --paper-dialog-scrollable: {
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-  .paper-dialog-buttons {
-    align-items: flex-end;
-    padding: 8px;
-    padding-bottom: max(env(safe-area-inset-bottom), 8px);
-  }
-
-  @media all and (min-width: 450px) and (min-height: 500px) {
-    ha-paper-dialog {
-      min-width: 400px;
-    }
-  }
-
-  @media all and (max-width: 450px), all and (max-height: 500px) {
-    paper-dialog,
-    ha-paper-dialog {
-      margin: 0;
-      width: calc(
-        100% - env(safe-area-inset-right) - env(safe-area-inset-left)
-      ) !important;
-      min-width: calc(
-        100% - env(safe-area-inset-right) - env(safe-area-inset-left)
-      ) !important;
-      max-width: calc(
-        100% - env(safe-area-inset-right) - env(safe-area-inset-left)
-      ) !important;
-      max-height: calc(100% - var(--header-height));
-
-      position: fixed !important;
-      bottom: 0px;
-      left: env(safe-area-inset-left);
-      right: env(safe-area-inset-right);
-      overflow: scroll;
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-  }
-
  /* mwc-dialog (ha-dialog) styles */
  ha-dialog {
    --mdc-dialog-min-width: 400px;
--- a/yarn.lock
+++ b/yarn.lock
@ -3246,41 +3246,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@polymer/paper-dialog-behavior@npm:^3.0.0-pre.26, @polymer/paper-dialog-behavior@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-dialog-behavior@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-overlay-behavior": ^3.0.0-pre.27
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 0f010c5528ed607eb35b437b3c478f67f9562fe3b24d10e9f7337423e077cf34807c4ad2ce98205441b7699d6330503d96ae74d8bf02809e30676a73eaa4e0c9
-  languageName: node
-  linkType: hard
-
-"@polymer/paper-dialog-scrollable@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-dialog-scrollable@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-flex-layout": ^3.0.0-pre.26
-    "@polymer/paper-dialog-behavior": ^3.0.0-pre.26
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 20a6f1725887e94b4766dc3ed26ef7e7140bad2a678c5edb743d17c9c19e95957719e6934ef95b380246c770424cb73d52e3df43b80e1533b56fad73aa29c2ff
-  languageName: node
-  linkType: hard
-
-"@polymer/paper-dialog@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-dialog@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-overlay-behavior": ^3.0.0-pre.27
-    "@polymer/neon-animation": ^3.0.0-pre.26
-    "@polymer/paper-dialog-behavior": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 3b832c7ccf18fb99869c1479390700525983686e9497c261170352e591b78c0ffcd9bc76e9863723c0d525c119fe5c78336d3c9b3eff87e1d23187d775235c3d
-  languageName: node
-  linkType: hard
-
 "@polymer/paper-dropdown-menu@npm:^3.2.0":
  version: 3.2.0
  resolution: "@polymer/paper-dropdown-menu@npm:3.2.0"
@ -9070,9 +9035,6 @@ fsevents@^1.2.7:
    "@polymer/iron-input": ^3.0.1
    "@polymer/iron-overlay-behavior": ^3.0.3
    "@polymer/iron-resizable-behavior": ^3.0.1
-    "@polymer/paper-dialog": ^3.0.1
-    "@polymer/paper-dialog-behavior": ^3.0.1
-    "@polymer/paper-dialog-scrollable": ^3.0.1
    "@polymer/paper-dropdown-menu": ^3.2.0
    "@polymer/paper-input": ^3.2.1
    "@polymer/paper-item": ^3.0.1