From c0043af4c986b17a85ab2ddd978e1a5e8bbba553 Mon Sep 17 00:00:00 2001
From: Simon Lamon <32477463+silamon@users.noreply.github.com>
Date: Wed, 18 Sep 2024 10:28:05 +0200
Subject: [PATCH] Rename ha-list-new into ha-md-list (#22015)

ha-list-new => ha-md-list
---
 .../dialog-hassio-repositories.ts             | 16 ++++-----
 ...ha-list-item-new.ts => ha-md-list-item.ts} |  6 ++--
 .../{ha-list-new.ts => ha-md-list.ts}         |  6 ++--
 .../add-automation-element-dialog.ts          | 22 ++++++------
 .../dialog-automation-mode.ts                 | 12 +++----
 .../ha-config-integration-page.ts             | 36 +++++++++----------
 .../matter-add-device-apple-home.ts           |  4 +--
 .../matter-add-device-existing.ts             | 20 +++++------
 .../matter-add-device-generic.ts              |  4 +--
 .../matter-add-device-google-home-fallback.ts |  4 +--
 .../matter-add-device-google-home.ts          |  4 +--
 .../matter-add-device-main.ts                 | 16 ++++-----
 .../matter-add-device-shared-styles.ts        |  2 +-
 13 files changed, 76 insertions(+), 76 deletions(-)
 rename src/components/{ha-list-item-new.ts => ha-md-list-item.ts} (84%)
 rename src/components/{ha-list-new.ts => ha-md-list.ts} (77%)

diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index f61dcf8070..c37bcf2179 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -25,8 +25,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-list-new";
-import "../../../../src/components/ha-list-item-new";
+import "../../../../src/components/ha-md-list";
+import "../../../../src/components/ha-md-list-item";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -107,11 +107,11 @@ class HassioRepositoriesDialog extends LitElement {
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="form">
-          <ha-list-new>
+          <ha-md-list>
             ${repositories.length
               ? repositories.map(
                   (repo) => html`
-                    <ha-list-item-new class="option">
+                    <ha-md-list-item class="option">
                       ${repo.name}
                       <div slot="supporting-text">
                         <div>${repo.maintainer}</div>
@@ -142,11 +142,11 @@ class HassioRepositoriesDialog extends LitElement {
                           )}
                         </simple-tooltip>
                       </div>
-                    </ha-list-item-new>
+                    </ha-md-list-item>
                   `
                 )
-              : html`<ha-list-item-new> No repositories </ha-list-item-new>`}
-          </ha-list-new>
+              : html`<ha-md-list-item> No repositories </ha-md-list-item>`}
+          </ha-md-list>
           <div class="layout horizontal bottom">
             <ha-textfield
               class="flex-auto"
@@ -209,7 +209,7 @@ class HassioRepositoriesDialog extends LitElement {
         div.delete ha-icon-button {
           color: var(--error-color);
         }
-        ha-list-item-new {
+        ha-md-list-item {
           position: relative;
         }
       `,
diff --git a/src/components/ha-list-item-new.ts b/src/components/ha-md-list-item.ts
similarity index 84%
rename from src/components/ha-list-item-new.ts
rename to src/components/ha-md-list-item.ts
index a3d317f82a..24f7c2930b 100644
--- a/src/components/ha-list-item-new.ts
+++ b/src/components/ha-md-list-item.ts
@@ -2,8 +2,8 @@ import { MdListItem } from "@material/web/list/list-item";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 
-@customElement("ha-list-item-new")
-export class HaListItemNew extends MdListItem {
+@customElement("ha-md-list-item")
+export class HaMdListItem extends MdListItem {
   static override styles = [
     ...super.styles,
     css`
@@ -21,6 +21,6 @@ export class HaListItemNew extends MdListItem {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-list-item-new": HaListItemNew;
+    "ha-md-list-item": HaMdListItem;
   }
 }
diff --git a/src/components/ha-list-new.ts b/src/components/ha-md-list.ts
similarity index 77%
rename from src/components/ha-list-new.ts
rename to src/components/ha-md-list.ts
index 9723269a48..0ab2b5b2d5 100644
--- a/src/components/ha-list-new.ts
+++ b/src/components/ha-md-list.ts
@@ -2,8 +2,8 @@ import { MdList } from "@material/web/list/list";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 
-@customElement("ha-list-new")
-export class HaListNew extends MdList {
+@customElement("ha-md-list")
+export class HaMdList extends MdList {
   static override styles = [
     ...super.styles,
     css`
@@ -16,6 +16,6 @@ export class HaListNew extends MdList {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-list-new": HaListNew;
+    "ha-md-list": HaMdList;
   }
 }
diff --git a/src/panels/config/automation/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts
index a18822216b..bfbb4b7974 100644
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -28,8 +28,8 @@ import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-list-item-new";
-import "../../../components/ha-list-new";
+import "../../../components/ha-md-list-item";
+import "../../../components/ha-md-list";
 import "../../../components/ha-service-icon";
 import "../../../components/search-input";
 import {
@@ -434,7 +434,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
   protected _opened(): void {
     // Store the width and height so that when we search, box doesn't jump
     const boundingRect =
-      this.shadowRoot!.querySelector("ha-list-new")?.getBoundingClientRect();
+      this.shadowRoot!.querySelector("ha-md-list")?.getBoundingClientRect();
     this._width = boundingRect?.width;
     this._height = boundingRect?.height;
   }
@@ -526,7 +526,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                 )}
           ></search-input>
         </div>
-        <ha-list-new
+        <ha-md-list
           dialogInitialFocus=${ifDefined(this._fullScreen ? "" : undefined)}
           style=${styleMap({
             width: this._width ? `${this._width}px` : "auto",
@@ -537,7 +537,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           !this._filter &&
           (!this._group ||
             items.find((item) => item.key === this._params!.clipboardItem))
-            ? html`<ha-list-item-new
+            ? html`<ha-md-list-item
                   interactive
                   type="button"
                   class="paste"
@@ -558,14 +558,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                     .path=${mdiContentPaste}
                   ></ha-svg-icon
                   ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
-                </ha-list-item-new>
+                </ha-md-list-item>
                 <md-divider role="separator" tabindex="-1"></md-divider>`
             : ""}
           ${repeat(
             items,
             (item) => item.key,
             (item) => html`
-              <ha-list-item-new
+              <ha-md-list-item
                 interactive
                 type="button"
                 .value=${item.key}
@@ -588,10 +588,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                       slot="end"
                       .path=${mdiPlus}
                     ></ha-svg-icon>`}
-              </ha-list-item-new>
+              </ha-md-list-item>
             `
           )}
-        </ha-list-new>
+        </ha-md-list>
       </ha-dialog>
     `;
   }
@@ -643,13 +643,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         ha-icon-next {
           width: 24px;
         }
-        ha-list-new {
+        ha-md-list {
           max-height: 468px;
           max-width: 100vw;
           --md-list-item-leading-space: 24px;
           --md-list-item-trailing-space: 24px;
         }
-        ha-list-item-new img {
+        ha-md-list-item img {
           width: 24px;
         }
         search-input {
diff --git a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
index 3b51d985db..e050283c7e 100644
--- a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
+++ b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
@@ -6,8 +6,8 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-list-item-new";
-import "../../../../components/ha-list-new";
+import "../../../../components/ha-md-list-item";
+import "../../../../components/ha-md-list";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-textfield";
 
@@ -90,7 +90,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
             ></ha-icon-button>
           </a>
         </ha-dialog-header>
-        <ha-list-new
+        <ha-md-list
           role="listbox"
           tabindex="0"
           aria-activedescendant="option-${this._newMode}"
@@ -103,7 +103,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
               `ui.panel.config.automation.editor.modes.${mode}`
             );
             return html`
-              <ha-list-item-new
+              <ha-md-list-item
                 class="option"
                 type="button"
                 @click=${this._modeChanged}
@@ -132,10 +132,10 @@ class DialogAutomationMode extends LitElement implements HassDialog {
                     `ui.panel.config.automation.editor.modes.${mode}_description`
                   )}
                 </div>
-              </ha-list-item-new>
+              </ha-md-list-item>
             `;
           })}
-        </ha-list-new>
+        </ha-md-list>
 
         ${isMaxMode(this._newMode)
           ? html`
diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index bf57644363..178850dadd 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -48,8 +48,8 @@ import "../../../components/ha-button";
 import "../../../components/ha-button-menu-new";
 import "../../../components/ha-card";
 import "../../../components/ha-list-item";
-import "../../../components/ha-list-item-new";
-import "../../../components/ha-list-new";
+import "../../../components/ha-md-list-item";
+import "../../../components/ha-md-list";
 import "../../../components/ha-menu-item";
 import {
   deleteApplicationCredential,
@@ -474,10 +474,10 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                       "ui.panel.config.integrations.discovered"
                     )}
                   </h1>
-                  <ha-list-new>
+                  <ha-md-list>
                     ${discoveryFlows.map(
                       (flow) =>
-                        html`<ha-list-item-new class="discovered">
+                        html`<ha-md-list-item class="discovered">
                           ${flow.localized_title}
                           <ha-button
                             slot="end"
@@ -488,9 +488,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                               "ui.panel.config.integrations.configure"
                             )}
                           ></ha-button>
-                        </ha-list-item-new>`
+                        </ha-md-list-item>`
                     )}
-                  </ha-list-new>
+                  </ha-md-list>
                 </ha-card>`
               : ""}
             ${attentionFlows.length || attentionEntries.length
@@ -500,12 +500,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                       `ui.panel.config.integrations.integration_page.attention_entries`
                     )}
                   </h1>
-                  <ha-list-new>
+                  <ha-md-list>
                     ${attentionFlows.map((flow) => {
                       const attention = ATTENTION_SOURCES.includes(
                         flow.context.source
                       );
-                      return html` <ha-list-item-new
+                      return html` <ha-md-list-item
                         class="config_entry ${attention ? "attention" : ""}"
                       >
                         ${flow.localized_title}
@@ -527,7 +527,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                             }`
                           )}
                         ></ha-button>
-                      </ha-list-item-new>`;
+                      </ha-md-list-item>`;
                     })}
                     ${attentionEntries.map(
                       (item, index) =>
@@ -539,7 +539,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                             ></md-divider>`
                           : ""} `
                     )}
-                  </ha-list-new>
+                  </ha-md-list>
                 </ha-card>`
               : ""}
 
@@ -568,7 +568,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                         )}
                   </div>`
                 : nothing}
-              <ha-list-new>
+              <ha-md-list>
                 ${normalEntries.map(
                   (item, index) =>
                     html`${this._renderConfigEntry(item)}
@@ -579,7 +579,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                         ></md-divider>`
                       : ""} `
                 )}
-              </ha-list-new>
+              </ha-md-list>
               <div class="card-actions">
                 <ha-button @click=${this._addIntegration}>
                   ${this._manifest?.integration_type
@@ -743,7 +743,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
 
     const configPanel = this._configPanel(item.domain, this.hass.panels);
 
-    return html`<ha-list-item-new
+    return html`<ha-md-list-item
       class=${classMap({
         config_entry: true,
         "state-not-loaded": item!.state === "not_loaded",
@@ -958,7 +958,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
             `
           : nothing}
       </ha-button-menu-new>
-    </ha-list-item-new>`;
+    </ha-md-list-item>`;
   }
 
   private async _highlightEntry() {
@@ -1485,13 +1485,13 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         ha-alert:first-of-type {
           margin-top: 16px;
         }
-        ha-list-item-new {
+        ha-md-list-item {
           position: relative;
         }
-        ha-list-item-new.discovered {
+        ha-md-list-item.discovered {
           height: 72px;
         }
-        ha-list-item-new.config_entry::after {
+        ha-md-list-item.config_entry::after {
           position: absolute;
           top: 0;
           right: 0;
@@ -1561,7 +1561,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .state-disabled [slot="supporting-text"] {
           opacity: var(--md-list-item-disabled-opacity, 0.3);
         }
-        ha-list-new {
+        ha-md-list {
           margin-top: 8px;
           margin-bottom: 8px;
         }
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-apple-home.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-apple-home.ts
index b294c275e8..15e4c4d58b 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-apple-home.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-apple-home.ts
@@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import "../../../../../../components/ha-icon-next";
-import "../../../../../../components/ha-list-item-new";
-import "../../../../../../components/ha-list-new";
+import "../../../../../../components/ha-md-list-item";
+import "../../../../../../components/ha-md-list";
 import { HomeAssistant } from "../../../../../../types";
 import { sharedStyles } from "./matter-add-device-shared-styles";
 
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts
index bbef0c0e94..55263bd76a 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-existing.ts
@@ -3,8 +3,8 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import "../../../../../../components/ha-icon-next";
-import "../../../../../../components/ha-list-item-new";
-import "../../../../../../components/ha-list-new";
+import "../../../../../../components/ha-md-list-item";
+import "../../../../../../components/ha-md-list";
 import { HomeAssistant } from "../../../../../../types";
 import { MatterAddDeviceStep } from "../dialog-matter-add-device";
 import { sharedStyles } from "./matter-add-device-shared-styles";
@@ -23,8 +23,8 @@ class MatterAddDeviceExisting extends LitElement {
         </p>
       </div>
 
-      <ha-list-new>
-        <ha-list-item-new
+      <ha-md-list>
+        <ha-md-list-item
           interactive
           type="button"
           .step=${"google_home"}
@@ -43,8 +43,8 @@ class MatterAddDeviceExisting extends LitElement {
             )}
           </span>
           <ha-icon-next slot="end"></ha-icon-next>
-        </ha-list-item-new>
-        <ha-list-item-new
+        </ha-md-list-item>
+        <ha-md-list-item
           interactive
           type="button"
           .step=${"apple_home"}
@@ -63,8 +63,8 @@ class MatterAddDeviceExisting extends LitElement {
             )}
           </span>
           <ha-icon-next slot="end"></ha-icon-next>
-        </ha-list-item-new>
-        <ha-list-item-new
+        </ha-md-list-item>
+        <ha-md-list-item
           interactive
           type="button"
           .step=${"generic"}
@@ -80,8 +80,8 @@ class MatterAddDeviceExisting extends LitElement {
             )}
           </span>
           <ha-icon-next slot="end"></ha-icon-next>
-        </ha-list-item-new>
-      </ha-list-new>
+        </ha-md-list-item>
+      </ha-md-list>
     `;
   }
 
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-generic.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-generic.ts
index c48c149823..a00e4d3f33 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-generic.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-generic.ts
@@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import "../../../../../../components/ha-icon-next";
-import "../../../../../../components/ha-list-item-new";
-import "../../../../../../components/ha-list-new";
+import "../../../../../../components/ha-md-list-item";
+import "../../../../../../components/ha-md-list";
 import { HomeAssistant } from "../../../../../../types";
 import { sharedStyles } from "./matter-add-device-shared-styles";
 
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
index 4009f30da3..2bfa12e730 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home-fallback.ts
@@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import "../../../../../../components/ha-icon-next";
-import "../../../../../../components/ha-list-item-new";
-import "../../../../../../components/ha-list-new";
+import "../../../../../../components/ha-md-list-item";
+import "../../../../../../components/ha-md-list";
 import { HomeAssistant } from "../../../../../../types";
 import { sharedStyles } from "./matter-add-device-shared-styles";
 
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home.ts
index 1c528cf524..ad8b666393 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-google-home.ts
@@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import "../../../../../../components/ha-icon-next";
-import "../../../../../../components/ha-list-item-new";
-import "../../../../../../components/ha-list-new";
+import "../../../../../../components/ha-md-list-item";
+import "../../../../../../components/ha-md-list";
 import { HomeAssistant } from "../../../../../../types";
 import { sharedStyles } from "./matter-add-device-shared-styles";
 
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-main.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-main.ts
index dc5b699034..4fb5adca95 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-main.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-main.ts
@@ -2,8 +2,8 @@ import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import "../../../../../../components/ha-icon-next";
-import "../../../../../../components/ha-list-item-new";
-import "../../../../../../components/ha-list-new";
+import "../../../../../../components/ha-md-list-item";
+import "../../../../../../components/ha-md-list";
 import { HomeAssistant } from "../../../../../../types";
 import { sharedStyles } from "./matter-add-device-shared-styles";
 
@@ -18,8 +18,8 @@ class MatterAddDeviceMain extends LitElement {
           ${this.hass.localize(`ui.dialogs.matter-add-device.main.question`)}
         </p>
       </div>
-      <ha-list-new>
-        <ha-list-item-new
+      <ha-md-list>
+        <ha-md-list-item
           interactive
           type="button"
           .step=${"new"}
@@ -37,8 +37,8 @@ class MatterAddDeviceMain extends LitElement {
             )}
           </span>
           <ha-icon-next slot="end"></ha-icon-next>
-        </ha-list-item-new>
-        <ha-list-item-new
+        </ha-md-list-item>
+        <ha-md-list-item
           interactive
           type="button"
           .step=${"existing"}
@@ -56,8 +56,8 @@ class MatterAddDeviceMain extends LitElement {
             )}
           </span>
           <ha-icon-next slot="end"></ha-icon-next>
-        </ha-list-item-new>
-      </ha-list-new>
+        </ha-md-list-item>
+      </ha-md-list>
     `;
   }
 
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
index ca36a5f36b..721e8514be 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-shared-styles.ts
@@ -23,7 +23,7 @@ export const sharedStyles = css`
     cursor: pointer;
     text-decoration: underline;
   }
-  ha-list-new {
+  ha-md-list {
     padding: 0;
     --md-list-item-leading-space: var(--horizontal-padding, 16px);
     --md-list-item-trailing-space: var(--horizontal-padding, 16px);