Use param map and one ha-button

Cleanup
Migrate config-zwave_js dialog(s) to wa
2026-02-12 20:48:00 +00:00 · 2026-02-12 08:36:35 +00:00 · 2026-02-12 08:36:35 +00:00 · 2026-02-12 08:36:35 +00:00
11 changed files with 469 additions and 403 deletions
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts
@@ -5,12 +5,12 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import "../../../../../components/ha-select";
 import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import { changeZHANetworkChannel } from "../../../../../data/zha";
 import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
-import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../../../../../types";
 import type { ZHAChangeChannelDialogParams } from "./show-dialog-zha-change-channel";

@@ -35,7 +35,7 @@ const VALID_CHANNELS = [
 ];

@customElement("dialog-zha-change-channel")
-class DialogZHAChangeChannel extends LitElement implements HassDialog {
+class DialogZHAChangeChannel extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _migrationInProgress = false;
@@ -44,16 +44,22 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog {

  @state() private _newChannel?: "auto" | number;

+  @state() private _open = false;
+
  public async showDialog(params: ZHAChangeChannelDialogParams): Promise<void> {
    this._params = params;
    this._newChannel = "auto";
+    this._open = true;
  }

  public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
    this._params = undefined;
    this._newChannel = undefined;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
  }

  protected render(): TemplateResult | typeof nothing {
@@ -62,15 +68,13 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog {
    }

    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.zha.change_channel_dialog.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.zha.change_channel_dialog.title"
        )}
+        @closed=${this._dialogClosed}
      >
        <ha-alert alert-type="warning">
          ${this.hass.localize(
@@ -109,26 +113,27 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog {
          >
          </ha-select>
        </p>
-
-        <ha-progress-button
-          slot="primaryAction"
-          .progress=${this._migrationInProgress}
-          .disabled=${this._migrationInProgress}
-          @click=${this._changeNetworkChannel}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.zha.change_channel_dialog.change_channel"
-          )}
-        </ha-progress-button>
-
-        <ha-button
-          slot="secondaryAction"
-          appearance="plain"
-          @click=${this.closeDialog}
-          .disabled=${this._migrationInProgress}
-          >${this.hass.localize("ui.common.cancel")}</ha-button
-        >
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+            .disabled=${this._migrationInProgress}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-progress-button
+            slot="primaryAction"
+            .progress=${this._migrationInProgress}
+            .disabled=${this._migrationInProgress}
+            @click=${this._changeNetworkChannel}
+          >
+            ${this.hass.localize(
+              "ui.panel.config.zha.change_channel_dialog.change_channel"
+            )}
+          </ha-progress-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
    `;
  }

--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
@@ -6,10 +6,10 @@ import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-code-editor";
-import "../../../../../components/ha-dialog";
 import "../../../../../components/ha-dialog-header";
 import "../../../../../components/ha-tab-group";
 import "../../../../../components/ha-tab-group-tab";
+import "../../../../../components/ha-wa-dialog";
 import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
 import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
 import {
@@ -44,6 +44,8 @@ class DialogZHAManageZigbeeDevice extends LitElement {

  @state() private _groups: ZHAGroup[] = [];

+  @state() private _open = false;
+
  public async showDialog(
    params: ZHAManageZigbeeDeviceDialogParams
  ): Promise<void> {
@@ -54,9 +56,14 @@ class DialogZHAManageZigbeeDevice extends LitElement {
    }
    this._currTab = params.tab || "clusters";
    this.large = false;
+    this._open = true;
  }

  public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
    this._device = undefined;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }
@@ -88,18 +95,17 @@ class DialogZHAManageZigbeeDevice extends LitElement {
    const tabs = this._getTabs(this._device);

    return html`
-      <ha-dialog
-        open
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        @closed=${this._dialogClosed}
      >
-        <ha-dialog-header show-border slot="heading">
+        <ha-dialog-header show-border slot="header">
          <ha-icon-button
            slot="navigationIcon"
-            dialogAction="cancel"
            .label=${this.hass.localize("ui.common.close")}
            .path=${mdiClose}
+            @click=${this.closeDialog}
          ></ha-icon-button>
          <span
            slot="title"
@@ -124,7 +130,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
            )}
          </ha-tab-group>
        </ha-dialog-header>
-        <div class="content" tabindex="-1" dialogInitialFocus>
+        <div class="content" tabindex="-1" autofocus>
          ${cache(
            this._currTab === "clusters"
              ? html`
@@ -170,7 +176,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
                    `
          )}
        </div>
-      </ha-dialog>
+      </ha-wa-dialog>
    `;
  }

@@ -216,11 +222,6 @@ class DialogZHAManageZigbeeDevice extends LitElement {
      haStyleDialog,
      haStyleDialogFixedTop,
      css`
-        ha-dialog {
-          --dialog-surface-position: static;
-          --dialog-content-position: static;
-        }
-
        .content {
          outline: none;
          display: flex;
@@ -228,16 +229,6 @@ class DialogZHAManageZigbeeDevice extends LitElement {
          gap: var(--ha-space-2);
        }

-        @media all and (min-width: 600px) and (min-height: 501px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 560px;
-            --mdc-dialog-max-width: 560px;
-            --mdc-dialog-max-height: calc(
-              100vh - var(--ha-space-18) - var(--safe-area-inset-y)
-            );
-          }
-        }
-
        ha-tab-group-tab {
          flex: 1;
        }
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
@@ -5,10 +5,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-spinner";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-tooltip";
 import "../../../../../components/ha-button";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import type {
  AttributeConfigurationStatus,
  Cluster,
@@ -46,15 +47,22 @@ class DialogZHAReconfigureDevice extends LitElement {

  @state() private _showDetails = false;

+  @state() private _open = false;
+
  private _subscribed?: Promise<UnsubscribeFunc>;

  public showDialog(params: ZHAReconfigureDeviceDialogParams): void {
    this._params = params;
    this._clusterConfigurationStatuses = new Map();
    this._stages = undefined;
+    this._open = true;
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this._unsubscribe();
    this._params = undefined;
    this._status = undefined;
@@ -71,15 +79,16 @@ class DialogZHAReconfigureDevice extends LitElement {
    }

    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(`ui.dialogs.zha_reconfigure_device.heading`) +
-            ": " +
-            (this._params.device.user_given_name || this._params.device.name)
-        )}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        width="large"
+        header-title=${this.hass.localize(
+          `ui.dialogs.zha_reconfigure_device.heading`
+        ) +
+        ": " +
+        (this._params.device.user_given_name || this._params.device.name)}
+        @closed=${this._dialogClosed}
      >
        ${!this._status
          ? html`
@@ -95,14 +104,6 @@ class DialogZHAReconfigureDevice extends LitElement {
                  )}
                </em>
              </p>
-              <ha-button
-                slot="primaryAction"
-                @click=${this._startReconfiguration}
-              >
-                ${this.hass.localize(
-                  "ui.dialogs.zha_reconfigure_device.start_reconfiguration"
-                )}
-              </ha-button>
            `
          : ``}
        ${this._status === "started"
@@ -124,22 +125,6 @@ class DialogZHAReconfigureDevice extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button
-                appearance="plain"
-                slot="secondaryAction"
-                @click=${this._toggleDetails}
-              >
-                ${this._showDetails
-                  ? this.hass.localize(
-                      `ui.dialogs.zha_reconfigure_device.button_hide`
-                    )
-                  : this.hass.localize(
-                      `ui.dialogs.zha_reconfigure_device.button_show`
-                    )}
-              </ha-button>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "failed"
@@ -157,22 +142,6 @@ class DialogZHAReconfigureDevice extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
-              <ha-button
-                appearance="plain"
-                slot="secondaryAction"
-                @click=${this._toggleDetails}
-              >
-                ${this._showDetails
-                  ? this.hass.localize(
-                      `ui.dialogs.zha_reconfigure_device.button_hide`
-                    )
-                  : this.hass.localize(
-                      `ui.dialogs.zha_reconfigure_device.button_show`
-                    )}
-              </ha-button>
            `
          : ``}
        ${this._status === "finished"
@@ -190,22 +159,6 @@ class DialogZHAReconfigureDevice extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
-              <ha-button
-                appearance="plain"
-                slot="secondaryAction"
-                @click=${this._toggleDetails}
-              >
-                ${this._showDetails
-                  ? this.hass.localize(
-                      `ui.dialogs.zha_reconfigure_device.button_hide`
-                    )
-                  : this.hass.localize(
-                      `ui.dialogs.zha_reconfigure_device.button_show`
-                    )}
-              </ha-button>
            `
          : ``}
        ${this._stages
@@ -339,7 +292,38 @@ class DialogZHAReconfigureDevice extends LitElement {
              </div>
            `
          : ""}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${!this._status
+            ? html`
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._startReconfiguration}
+                >
+                  ${this.hass.localize(
+                    "ui.dialogs.zha_reconfigure_device.start_reconfiguration"
+                  )}
+                </ha-button>
+              `
+            : html`
+                <ha-button
+                  slot="secondaryAction"
+                  appearance="plain"
+                  @click=${this._toggleDetails}
+                >
+                  ${this._showDetails
+                    ? this.hass.localize(
+                        `ui.dialogs.zha_reconfigure_device.button_hide`
+                      )
+                    : this.hass.localize(
+                        `ui.dialogs.zha_reconfigure_device.button_show`
+                      )}
+                </ha-button>
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                  ${this.hass.localize("ui.common.close")}
+                </ha-button>
+              `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
    `;
  }

@@ -426,10 +410,6 @@ class DialogZHAReconfigureDevice extends LitElement {
    return [
      haStyleDialog,
      css`
-        ha-dialog {
-          --mdc-dialog-max-width: 800px;
-        }
-
        .wrapper {
          display: grid;
          grid-template-columns: 3fr 1fr 2fr;
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
@@ -2,10 +2,9 @@ import { mdiChevronLeft, mdiClose } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
-import type { HaDialog } from "../../../../../../components/ha-dialog";
 import { updateDeviceRegistryEntry } from "../../../../../../data/device/device_registry";
 import type {
  QRProvisioningInformation,
@@ -42,11 +41,12 @@ import {
 import type { ZWaveJSAddNodeDialogParams } from "./show-dialog-zwave_js-add-node";

 import "../../../../../../components/ha-button";
-import "../../../../../../components/ha-dialog";
 import "../../../../../../components/ha-dialog-header";
+import "../../../../../../components/ha-dialog-footer";
 import "../../../../../../components/ha-fade-in";
 import "../../../../../../components/ha-icon-button";
 import "../../../../../../components/ha-qr-scanner";
+import "../../../../../../components/ha-wa-dialog";

 import { navigate } from "../../../../../../common/navigate";
 import type { EntityRegistryEntry } from "../../../../../../data/entity/entity_registry";
@@ -67,6 +67,12 @@ import "./zwave-js-add-node-select-security-strategy";

 const INCLUSION_TIMEOUT_MINUTES = 5;

+interface ButtonParams {
+  disabled?: boolean;
+  label: string;
+  onClick: () => void;
+}
+
@customElement("dialog-zwave_js-add-node")
 class DialogZWaveJSAddNode extends LitElement {
  // #region variables
@@ -106,8 +112,6 @@ class DialogZWaveJSAddNode extends LitElement {

  @state() private _codeInput = "";

-  @query("ha-dialog") private _dialog?: HaDialog;
-
  private _qrProcessing = false;

  private _addNodeTimeoutHandle?: number;
@@ -130,36 +134,38 @@ class DialogZWaveJSAddNode extends LitElement {
    // Prevent accidentally closing the dialog in certain stages
    const preventClose = !!this._step && this._shouldPreventClose(this._step);

-    const { headerText, headerHtml } = this._renderHeader();
+    const headerHtml = this._renderHeader();
+
+    const content = this._renderStepContent();
+    const actions = this._renderStepActions();

    return html`
-      <ha-dialog
+      <ha-wa-dialog
+        .hass=${this.hass}
        .open=${this._open}
+        ?prevent-scrim-close=${preventClose}
        @closed=${this._dialogClosed}
-        .scrimClickAction=${preventClose ? "" : "close"}
-        .escapeKeyAction=${preventClose ? "" : "close"}
-        .heading=${headerText}
      >
-        <ha-dialog-header slot="heading"> ${headerHtml} </ha-dialog-header>
-        ${this._renderStep()}
-      </ha-dialog>
+        <ha-dialog-header slot="header"> ${headerHtml} </ha-dialog-header>
+        ${content}
+        ${actions === nothing
+          ? nothing
+          : html`<ha-dialog-footer slot="footer">${actions}</ha-dialog-footer>`}
+      </ha-wa-dialog>
    `;
  }

-  private _renderHeader(): { headerText: string; headerHtml: TemplateResult } {
+  private _renderHeader(): TemplateResult {
    let headerText = this.hass.localize(
      `ui.panel.config.zwave_js.add_node.title`
    );

    if (this._step === "loading") {
-      return {
-        headerText,
-        headerHtml: html`
-          <ha-fade-in slot="title" .delay=${1000}>
-            <span>${headerText}</span>
-          </ha-fade-in>
-        `,
-      };
+      return html`
+        <ha-fade-in slot="title" .delay=${1000}>
+          <span>${headerText}</span>
+        </ha-fade-in>
+      `;
    }

    let icon: string | undefined;
@@ -219,23 +225,20 @@ class DialogZWaveJSAddNode extends LitElement {
      `ui.panel.config.zwave_js.add_node.${titleTranslationKey}`
    );

-    return {
-      headerText,
-      headerHtml: html`
-        ${icon
-          ? html`<ha-icon-button
-              slot="navigationIcon"
-              @click=${this._handleCloseOrBack}
-              .label=${this.hass.localize("ui.common.close")}
-              .path=${icon}
-            ></ha-icon-button>`
-          : nothing}
-        <span slot="title">${headerText}</span>
-      `,
-    };
+    return html`
+      ${icon
+        ? html`<ha-icon-button
+            slot="navigationIcon"
+            @click=${this._handleCloseOrBack}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${icon}
+          ></ha-icon-button>`
+        : nothing}
+      <span slot="title">${headerText}</span>
+    `;
  }

-  private _renderStep() {
+  private _renderStepContent() {
    if (["select_method", "select_other_method"].includes(this._step!)) {
      return html`<zwave-js-add-node-select-method
        .hass=${this.hass}
@@ -271,13 +274,6 @@ class DialogZWaveJSAddNode extends LitElement {
          @value-changed=${this._manualQrCodeInputChange}
          @zwave-submit=${this._qrCodeScanned}
        ></zwave-js-add-node-code-input>
-        <ha-button
-          slot="primaryAction"
-          .disabled=${!this._codeInput}
-          @click=${this._qrCodeScanned}
-        >
-          ${this.hass.localize("ui.common.next")}
-        </ha-button>
      `;
    }

@@ -297,52 +293,25 @@ class DialogZWaveJSAddNode extends LitElement {
            ._searchDevicesShowSecurityOptions}
          @add-another-z-wave-device=${this._addAnotherDevice}
        ></zwave-js-add-node-searching-devices>
-        ${this._step === "search_smart_start_device"
-          ? html`
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
-            `
-          : nothing}
      `;
    }

    if (this._step === "choose_security_strategy") {
      return html`<zwave-js-add-node-select-security-strategy
-          .hass=${this.hass}
-          @z-wave-strategy-selected=${this._setSecurityStrategy}
-        ></zwave-js-add-node-select-security-strategy>
-        <ha-button
-          slot="primaryAction"
-          .disabled=${this._inclusionStrategy === undefined}
-          @click=${this._searchDevicesWithStrategy}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.zwave_js.add_node.select_method.search_device"
-          )}
-        </ha-button>`;
+        .hass=${this.hass}
+        @z-wave-strategy-selected=${this._setSecurityStrategy}
+      ></zwave-js-add-node-select-security-strategy>`;
    }

    if (this._step === "configure_device") {
      return html`<zwave-js-add-node-configure-device
-          .hass=${this.hass}
-          .deviceName=${this._device?.name ?? ""}
-          .longRangeSupported=${!!this._device?.provisioningInfo?.supportedProtocols?.includes(
-            Protocols.ZWaveLongRange
-          ) && this._controllerSupportsLongRange}
-          @value-changed=${this._setDeviceOptions}
-        ></zwave-js-add-node-configure-device>
-        <ha-button
-          slot="primaryAction"
-          .disabled=${!this._deviceOptions?.name}
-          @click=${this._saveDevice}
-        >
-          ${this.hass.localize(
-            this._device?.id
-              ? "ui.common.save"
-              : "ui.panel.config.zwave_js.add_node.configure_device.add_device"
-          )}
-        </ha-button>`;
+        .hass=${this.hass}
+        .deviceName=${this._device?.name ?? ""}
+        .longRangeSupported=${!!this._device?.provisioningInfo?.supportedProtocols?.includes(
+          Protocols.ZWaveLongRange
+        ) && this._controllerSupportsLongRange}
+        @value-changed=${this._setDeviceOptions}
+      ></zwave-js-add-node-configure-device> `;
    }

    if (this._step === "validate_dsk_enter_pin") {
@@ -361,15 +330,6 @@ class DialogZWaveJSAddNode extends LitElement {
          numeric
          .error=${this._error}
        ></zwave-js-add-node-code-input>
-        <ha-button
-          slot="primaryAction"
-          .disabled=${!this._dskPin || this._dskPin.length !== 5}
-          @click=${this._validateDskAndEnterPin}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.zwave_js.add_node.configure_device.add_device"
-          )}
-        </ha-button>
      `;
    }

@@ -394,11 +354,6 @@ class DialogZWaveJSAddNode extends LitElement {
          .deviceName=${this._device?.name}
          .reason=${this._lowSecurityReason?.toString()}
        ></zwave-js-add-node-added-insecure>
-        <ha-button slot="primaryAction" @click=${this._navigateToDevice}>
-          ${this.hass.localize(
-            "ui.panel.config.zwave_js.add_node.added_insecure.view_device"
-          )}
-        </ha-button>
      `;
    }

@@ -411,9 +366,6 @@ class DialogZWaveJSAddNode extends LitElement {
          .selectedSecurityClasses=${this._securityClasses}
          @value-changed=${this._securityClassChange}
        ></zwave-js-add-node-grant-security-classes>
-        <ha-button slot="primaryAction" @click=${this._grantSecurityClasses}>
-          ${this.hass.localize("ui.common.submit")}
-        </ha-button>
      `;
    }

@@ -432,6 +384,86 @@ class DialogZWaveJSAddNode extends LitElement {
    ></zwave-js-add-node-loading>`;
  }

+  private _renderStepActions() {
+    const buttonParams: ButtonParams | undefined =
+      new Map<ZWaveJSAddNodeStage, ButtonParams | undefined>([
+        [
+          "qr_code_input",
+          {
+            label: this.hass.localize("ui.common.next"),
+            onClick: this._qrCodeScanned,
+          },
+        ],
+        [
+          "search_smart_start_device",
+          {
+            label: this.hass.localize("ui.common.close"),
+            onClick: this.closeDialog,
+          },
+        ],
+        [
+          "choose_security_strategy",
+          {
+            label: this.hass.localize(
+              "ui.panel.config.zwave_js.add_node.select_method.search_device"
+            ),
+            onClick: this._searchDevicesWithStrategy,
+          },
+        ],
+        [
+          "configure_device",
+          {
+            label: this.hass.localize(
+              this._device?.id
+                ? "ui.common.save"
+                : "ui.panel.config.zwave_js.add_node.configure_device.add_device"
+            ),
+            onClick: this._saveDevice,
+          },
+        ],
+        [
+          "validate_dsk_enter_pin",
+          {
+            disabled: !this._dskPin || this._dskPin.length !== 5,
+            label: this.hass.localize(
+              "ui.panel.config.zwave_js.add_node.configure_device.add_device"
+            ),
+            onClick: this._validateDskAndEnterPin,
+          },
+        ],
+        [
+          "added_insecure",
+          {
+            label: this.hass.localize(
+              "ui.panel.config.zwave_js.add_node.added_insecure.view_device"
+            ),
+            onClick: this._navigateToDevice,
+          },
+        ],
+        [
+          "grant_security_classes",
+          {
+            label: this.hass.localize("ui.common.submit"),
+            onClick: this._grantSecurityClasses,
+          },
+        ],
+      ]).get(this._step!) ?? undefined;
+
+    if (!buttonParams) {
+      return nothing;
+    }
+
+    return html`
+      <ha-button
+        slot="primaryAction"
+        .disabled=${buttonParams.disabled ?? false}
+        @click=${buttonParams.onClick}
+      >
+        ${buttonParams.label}
+      </ha-button>
+    `;
+  }
+
  private _onBeforeUnload = (event: BeforeUnloadEvent) => {
    if (this._step && this._shouldPreventClose(this._step)) {
      event.preventDefault();
@@ -1095,10 +1127,10 @@ class DialogZWaveJSAddNode extends LitElement {
    }

    if (this._open) {
-      this._dialog?.close();
-    } else {
-      this._dialogClosed();
+      this._open = false;
+      return;
    }
+    this._dialogClosed();
  }

  public disconnectedCallback(): void {
@@ -1112,19 +1144,6 @@ class DialogZWaveJSAddNode extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      css`
-        ha-dialog {
-          --mdc-dialog-min-width: 512px;
-        }
-        @media all and (max-width: 500px), all and (max-height: 500px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 100vw;
-            --mdc-dialog-max-width: 100vw;
-            --mdc-dialog-min-height: 100%;
-            --mdc-dialog-max-height: 100%;
-            --vertical-align-dialog: flex-end;
-            --ha-dialog-border-radius: var(--ha-border-radius-square);
-          }
-        }
        ha-fade-in {
          display: block;
        }
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts
@@ -3,9 +3,10 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-button";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import { hardResetController } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -33,11 +34,18 @@ class DialogZWaveJSHardResetController extends LitElement {

  @state() private _resetStatus = ResetStatus.NotStarted;

+  @state() private _open = false;
+
  public showDialog(params: ZWaveJSHardResetControllerDialogParams): void {
    this._entryId = params.entryId;
+    this._open = true;
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this._entryId = undefined;
    this._resetStatus = ResetStatus.NotStarted;

@@ -49,17 +57,15 @@ class DialogZWaveJSHardResetController extends LitElement {
      return nothing;
    }

-    return html`<ha-dialog
-      open
-      @closed=${this.closeDialog}
-      .heading=${createCloseHeading(
-        this.hass,
-        this.hass.localize(
-          `ui.panel.config.zwave_js.hard_reset_controller.${
-            ResetStatus[this._resetStatus]
-          }.title`
-        )
+    return html`<ha-wa-dialog
+      .hass=${this.hass}
+      .open=${this._open}
+      header-title=${this.hass.localize(
+        `ui.panel.config.zwave_js.hard_reset_controller.${
+          ResetStatus[this._resetStatus]
+        }.title`
      )}
+      @closed=${this._dialogClosed}
    >
      <div class="flex-container">
        <div>
@@ -77,18 +83,20 @@ class DialogZWaveJSHardResetController extends LitElement {
        </p>
      </div>
      ${this._resetStatus === ResetStatus.NotStarted
-        ? html`<ha-button
+        ? html`<ha-dialog-footer slot="footer">
+            <ha-button
+              slot="secondaryAction"
              appearance="plain"
-              slot="primaryAction"
              @click=${this.closeDialog}
            >
              ${this.hass.localize("ui.common.cancel")}
            </ha-button>
            <ha-button slot="primaryAction" @click=${this._hardResetController}>
              ${this.hass.localize("ui.common.continue")}
-            </ha-button>`
+            </ha-button>
+          </ha-dialog-footer>`
        : nothing}
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
  }

  private async _hardResetController(): Promise<void> {
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts
@@ -5,12 +5,12 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-help-tooltip";
 import "../../../../../components/ha-list";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-svg-icon";
+import "../../../../../components/ha-wa-dialog";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import { subscribeDeviceRegistry } from "../../../../../data/device/device_registry";
 import type {
@@ -51,17 +51,24 @@ class DialogZWaveJSNodeStatistics extends LitElement {
    nlwr?: WorkingRouteStatistics;
  } = {};

+  @state() private _open = false;
+
  private _subscribedNodeStatistics?: Promise<UnsubscribeFunc>;

  private _subscribedDeviceRegistry?: UnsubscribeFunc;

  public showDialog(params: ZWaveJSNodeStatisticsDialogParams): void {
    this.device = params.device;
+    this._open = true;
    this._subscribeDeviceRegistry();
    this._subscribeNodeStatistics();
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this._nodeStatistics = undefined;
    this.device = undefined;

@@ -76,13 +83,13 @@ class DialogZWaveJSNodeStatistics extends LitElement {
    }

    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.zwave_js.node_statistics.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.zwave_js.node_statistics.title"
        )}
+        @closed=${this._dialogClosed}
      >
        <ha-list noninteractive>
          <ha-list-item twoline hasmeta>
@@ -307,7 +314,7 @@ class DialogZWaveJSNodeStatistics extends LitElement {
              `
            : ``
        )}
-      </ha-dialog>
+      </ha-wa-dialog>
    `;
  }

--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts
@@ -6,7 +6,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import type {
  ZWaveJSNetwork,
  ZWaveJSRebuildRoutesStatusMessage,
@@ -37,13 +38,20 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

  private _subscribed?: Promise<UnsubscribeFunc>;

+  @state() private _open = false;
+
  public showDialog(params: ZWaveJSRebuildNetworkRoutesDialogParams): void {
    this._progress_total = 0;
    this.entry_id = params.entry_id;
+    this._open = true;
    this._fetchData();
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this.entry_id = undefined;
    this._status = undefined;
    this._progress_total = 0;
@@ -59,15 +67,13 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
    }

    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.zwave_js.rebuild_network_routes.title"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.zwave_js.rebuild_network_routes.title"
        )}
+        @closed=${this._dialogClosed}
      >
        ${!this._status
          ? html`
@@ -91,14 +97,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                  )}
                </em>
              </p>
-              <ha-button
-                slot="primaryAction"
-                @click=${this._startRebuildingRoutes}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes"
-                )}
-              </ha-button>
            `
          : ``}
        ${this._status === "started"
@@ -122,19 +120,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                    <mwc-linear-progress indeterminate> </mwc-linear-progress>
                  `
                : ""}
-              <ha-button
-                slot="secondaryAction"
-                appearance="plain"
-                @click=${this._stopRebuildingRoutes}
-                variant="danger"
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes"
-                )}
-              </ha-button>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "failed"
@@ -152,9 +137,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "finished"
@@ -172,9 +154,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "cancelled"
@@ -192,9 +171,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._progress_total && this._status !== "finished"
@@ -207,7 +183,41 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
              </mwc-linear-progress>
            `
          : ""}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${!this._status
+            ? html`
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._startRebuildingRoutes}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes"
+                  )}
+                </ha-button>
+              `
+            : this._status === "started"
+              ? html`
+                  <ha-button
+                    slot="secondaryAction"
+                    appearance="plain"
+                    @click=${this._stopRebuildingRoutes}
+                    variant="danger"
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes"
+                    )}
+                  </ha-button>
+                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                    ${this.hass.localize("ui.common.close")}
+                  </ha-button>
+                `
+              : html`
+                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                    ${this.hass.localize("ui.common.close")}
+                  </ha-button>
+                `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
    `;
  }

--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts
@@ -5,8 +5,9 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type { ZWaveJSNetwork } from "../../../../../data/zwave_js";
 import {
@@ -27,12 +28,19 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

  @state() private _error?: string;

+  @state() private _open = false;
+
  public showDialog(params: ZWaveJSRebuildNodeRoutesDialogParams): void {
    this.device = params.device;
+    this._open = true;
    this._fetchData();
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this._status = undefined;
    this.device = undefined;
    this._error = undefined;
@@ -46,15 +54,13 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
    }

    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.zwave_js.rebuild_node_routes.title"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.zwave_js.rebuild_node_routes.title"
        )}
+        @closed=${this._dialogClosed}
      >
        ${!this._status
          ? html`
@@ -83,14 +89,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                  )}
                </em>
              </p>
-              <ha-button
-                slot="primaryAction"
-                @click=${this._startRebuildingRoutes}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes"
-                )}
-              </ha-button>
            `
          : ``}
        ${this._status === "started"
@@ -110,9 +108,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "failed"
@@ -147,9 +142,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "finished"
@@ -172,9 +164,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "rebuilding-routes"
@@ -192,12 +181,27 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${!this._status
+            ? html`
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._startRebuildingRoutes}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes"
+                  )}
+                </ha-button>
+              `
+            : html`
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                  ${this.hass.localize("ui.common.close")}
+                </ha-button>
+              `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
    `;
  }

--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
@@ -6,7 +6,8 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import { reinterviewZwaveNode } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -22,6 +23,8 @@ class DialogZWaveJSReinterviewNode extends LitElement {

  @state() private _stages?: string[];

+  @state() private _open = false;
+
  private _subscribed?: Promise<UnsubscribeFunc>;

  public async showDialog(
@@ -29,6 +32,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
  ): Promise<void> {
    this._stages = undefined;
    this.device_id = params.device_id;
+    this._open = true;
  }

  protected render() {
@@ -37,13 +41,13 @@ class DialogZWaveJSReinterviewNode extends LitElement {
    }

    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.zwave_js.reinterview_node.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.zwave_js.reinterview_node.title"
        )}
+        @closed=${this._dialogClosed}
      >
        ${!this._status
          ? html`
@@ -59,11 +63,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                  )}
                </em>
              </p>
-              <ha-button slot="primaryAction" @click=${this._startReinterview}>
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.reinterview_node.start_reinterview"
-                )}
-              </ha-button>
            `
          : ``}
        ${this._status === "started"
@@ -85,9 +84,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "failed"
@@ -105,9 +101,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._status === "finished"
@@ -125,9 +118,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                  </p>
                </div>
              </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
            `
          : ``}
        ${this._stages
@@ -147,7 +137,25 @@ class DialogZWaveJSReinterviewNode extends LitElement {
              </div>
            `
          : ""}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${!this._status
+            ? html`
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._startReinterview}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.zwave_js.reinterview_node.start_reinterview"
+                  )}
+                </ha-button>
+              `
+            : html`
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                  ${this.hass.localize("ui.common.close")}
+                </ha-button>
+              `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
    `;
  }

@@ -191,6 +199,10 @@ class DialogZWaveJSReinterviewNode extends LitElement {
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this.device_id = undefined;
    this._status = undefined;
    this._stages = undefined;
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
@@ -12,11 +12,11 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
-import "../../../../../components/ha-dialog";
-import "../../../../../components/ha-dialog-header";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import {
  fetchZwaveNodeStatus,
@@ -65,6 +65,8 @@ class DialogZWaveJSRemoveNode extends LitElement {

  @state() private _error?: string;

+  @state() private _open = false;
+
  public disconnectedCallback(): void {
    super.disconnectedCallback();
    this._unsubscribe();
@@ -76,6 +78,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
    this._entryId = params.entryId;
    this._deviceId = params.deviceId;
    this._onClose = params.onClose;
+    this._open = true;
    if (this._deviceId) {
      const nodeStatus = await fetchZwaveNodeStatus(this.hass, this._deviceId!);
      this._device = this.hass.devices[this._deviceId];
@@ -98,24 +101,25 @@ class DialogZWaveJSRemoveNode extends LitElement {
    );

    return html`
-      <ha-dialog
-        open
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${dialogTitle}
        @closed=${this.handleDialogClosed}
-        .heading=${dialogTitle}
-        .hideActions=${this._step === "start"}
      >
-        <ha-dialog-header slot="heading">
-          <ha-icon-button
-            slot="navigationIcon"
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-            .label=${this.hass.localize("ui.common.close")}
-          ></ha-icon-button>
-          <span slot="title">${dialogTitle}</span>
-        </ha-dialog-header>
+        <ha-icon-button
+          slot="headerNavigationIcon"
+          .path=${mdiClose}
+          @click=${this.closeDialog}
+          .label=${this.hass.localize("ui.common.close")}
+        ></ha-icon-button>
        <div class="content">${this._renderStepContent()}</div>
-        ${this._renderAction()}
-      </ha-dialog>
+        ${this._step === "start"
+          ? nothing
+          : html`<ha-dialog-footer slot="footer">
+              ${this._renderAction()}
+            </ha-dialog-footer>`}
+      </ha-wa-dialog>
    `;
  }

@@ -340,14 +344,18 @@ class DialogZWaveJSRemoveNode extends LitElement {
  };

  public closeDialog(): void {
-    this._unsubscribe();
-    this._entryId = undefined;
+    if (this._open) {
+      this._open = false;
+      return;
+    }
+    this.handleDialogClosed();
  }

  public handleDialogClosed(): void {
    this._unsubscribe();
    this._entryId = undefined;
    this._step = "start";
+    this._open = false;
    if (this._onClose) {
      this._onClose();
    }
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
@@ -7,7 +7,8 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import "../../../../../components/ha-file-upload";
 import "../../../../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
@@ -71,6 +72,8 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {

  @state() private _firmwareTarget?: number;

+  @state() private _open = false;
+
  private _subscribedNodeStatus?: Promise<UnsubscribeFunc>;

  private _subscribedNodeFirmwareUpdate?: Promise<UnsubscribeFunc>;
@@ -82,11 +85,16 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
  public showDialog(params: ZWaveJSUpdateFirmwareNodeDialogParams): void {
    this._deviceName = computeDeviceNameDisplay(params.device, this.hass!);
    this.device = params.device;
+    this._open = true;
    this._fetchData();
    this._subscribeNodeStatus();
  }

  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
    this._unsubscribeNodeFirmwareUpdate();
    this._unsubscribeNodeStatus();
    this.device = undefined;
@@ -136,16 +144,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
              .schema=${firmwareTargetSchema}
              @value-changed=${this._firmwareTargetChanged}
              .disabled=${this._uploading}
-            ></ha-form>`}
-      <ha-button
-        slot="primaryAction"
-        @click=${this._beginFirmwareUpdate}
-        .disabled=${this._firmwareFile === undefined || this._uploading}
-      >
-        ${this.hass.localize(
-          "ui.panel.config.zwave_js.update_firmware.begin_update"
-        )}
-      </ha-button>`;
+            ></ha-form>`} `;

    const status = this._updateFinishedMessage
      ? this._updateFinishedMessage.success
@@ -157,11 +156,24 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
      ? "_controller"
      : "";

+    const beginFirmwareUpdateButton = html`
+      <ha-button
+        slot="primaryAction"
+        @click=${this._beginFirmwareUpdate}
+        .disabled=${this._firmwareFile === undefined || this._uploading}
+      >
+        ${this.hass.localize(
+          "ui.panel.config.zwave_js.update_firmware.begin_update"
+        )}
+      </ha-button>
+    `;
+
    const abortFirmwareUpdateButton = this._nodeStatus.is_controller_node
      ? nothing
      : html`
          <ha-button
-            slot="primaryAction"
+            slot="secondaryAction"
+            appearance="plain"
            @click=${this._abortFirmwareUpdate}
            variant="danger"
          >
@@ -178,13 +190,13 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
    `;

    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.zwave_js.update_firmware.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.zwave_js.update_firmware.title"
        )}
+        @closed=${this._dialogClosed}
      >
        ${!this._updateProgressMessage && !this._updateFinishedMessage
          ? !this._updateInProgress
@@ -206,7 +218,6 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                      )}
                    </p>`
                  : nothing}
-                ${this._uploading ? abortFirmwareUpdateButton : nothing}
              `
            : html`
                <p>
@@ -239,7 +250,6 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                        }
                      )}
                </p>
-                ${abortFirmwareUpdateButton} ${closeButton}
              `
          : this._updateProgressMessage && !this._updateFinishedMessage
            ? html`
@@ -268,7 +278,6 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                    }
                  )}
                </p>
-                ${abortFirmwareUpdateButton} ${closeButton}
              `
            : html`
                <div class="flex-container">
@@ -302,11 +311,10 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                </div>
                ${this._updateFinishedMessage!.success
                  ? html`<p>
-                        ${this.hass.localize(
-                          `ui.panel.config.zwave_js.update_firmware.finished_status.done${localizationKeySuffix}`
-                        )}
-                      </p>
-                      ${closeButton}`
+                      ${this.hass.localize(
+                        `ui.panel.config.zwave_js.update_firmware.finished_status.done${localizationKeySuffix}`
+                      )}
+                    </p>`
                  : html`<p>
                        ${this.hass.localize(
                          "ui.panel.config.zwave_js.update_firmware.finished_status.try_again"
@@ -314,7 +322,21 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
                      </p>
                      ${beginFirmwareUpdateHTML}`}
              `}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${!this._updateProgressMessage && !this._updateFinishedMessage
+            ? !this._updateInProgress
+              ? html`
+                  ${this._uploading ? abortFirmwareUpdateButton : nothing}
+                  ${beginFirmwareUpdateButton}
+                `
+              : html` ${abortFirmwareUpdateButton} ${closeButton} `
+            : this._updateProgressMessage && !this._updateFinishedMessage
+              ? html` ${abortFirmwareUpdateButton} ${closeButton} `
+              : this._updateFinishedMessage!.success
+                ? html` ${closeButton} `
+                : html` ${beginFirmwareUpdateButton} `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
    `;
  }
Author	SHA1	Message	Date
Aidan Timson	b0854e9fef	Use param map and one ha-button	2026-02-12 08:36:35 +00:00
Aidan Timson	e904fe432f	Cleanup	2026-02-12 08:36:35 +00:00
Aidan Timson	2d68e32efa	Migrate config-zwave_js dialog(s) to wa	2026-02-12 08:36:35 +00:00