Migrate ha-md-list to ha-list-base

src/components/ha-analytics.ts

@@ -5,10 +5,10 @@ import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import "./ha-md-list-item";
 import "./ha-switch";
-import "./ha-tooltip";
 import type { HaSwitch } from "./ha-switch";
+import "./ha-tooltip";
+import "./item/ha-row-item";
 
 const ADDITIONAL_PREFERENCES = ["usage", "statistics"] as const;
 
@@ -33,7 +33,7 @@ export class HaAnalytics extends LitElement {
     const baseEnabled = !loading && this.analytics!.preferences.base;
 
     return html`
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.title`
@@ -52,10 +52,10 @@ export class HaAnalytics extends LitElement {
           .disabled=${loading}
           name="base"
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
       ${ADDITIONAL_PREFERENCES.map(
         (preference) => html`
-          <ha-md-list-item>
+          <ha-row-item>
             <span slot="headline"
               >${this.localize(
                 `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
@@ -81,10 +81,10 @@ export class HaAnalytics extends LitElement {
                     `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                   )}
                 </ha-tooltip>`}
-          </ha-md-list-item>
+          </ha-row-item>
         `
       )}
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.title`
@@ -103,7 +103,7 @@ export class HaAnalytics extends LitElement {
           .disabled=${loading}
           name="diagnostics"
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 
@@ -139,10 +139,8 @@ export class HaAnalytics extends LitElement {
           color: var(--error-color);
         }
 
-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-item-overflow: visible;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
       `,
     ];

src/components/target-picker/dialog/dialog-target-details.ts

@@ -22,8 +22,6 @@ import "../../ha-dialog";
 import "../../ha-dialog-header";
 import "../../ha-icon-button";
 import "../../ha-icon-next";
-import "../../ha-md-list";
-import "../../ha-md-list-item";
 import "../../ha-svg-icon";
 import "../../list/ha-list-base";
 import "../ha-target-picker-item-row";

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -28,8 +28,6 @@ import "../ha-domain-icon";
 import { floorDefaultIconPath } from "../ha-floor-icon";
 import "../ha-icon";
 import "../ha-icon-button";
-import "../ha-md-list";
-import "../ha-md-list-item";
 import "../ha-state-icon";
 import "../ha-tooltip";
 

src/dialogs/dialog-list-items/dialog-list-items.ts

@@ -2,11 +2,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-bottom-sheet";
-import "../../components/ha-icon";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
-import "../../components/ha-svg-icon";
 import "../../components/ha-dialog";
+import "../../components/ha-icon";
+import "../../components/ha-svg-icon";
+import "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
 import type { ListItemsDialogParams } from "./show-list-items-dialog";
@@ -51,41 +51,30 @@ export class ListItemsDialog
 
     const content = html`
       <div class="container">
-        <ha-md-list>
+        <ha-list-base>
           ${this._params.items.map(
             (item) => html`
-              <ha-md-list-item
-                type="button"
-                @click=${this._itemClicked}
-                .item=${item}
-              >
+              <ha-list-item-button @click=${this._itemClicked} .item=${item}>
                 ${item.iconPath
                   ? html`
                       <ha-svg-icon
                         .path=${item.iconPath}
                         slot="start"
-                        class="item-icon"
                       ></ha-svg-icon>
                     `
                   : item.icon
-                    ? html`
-                        <ha-icon
-                          icon=${item.icon}
-                          slot="start"
-                          class="item-icon"
-                        ></ha-icon>
-                      `
+                    ? html` <ha-icon icon=${item.icon} slot="start"></ha-icon> `
                     : nothing}
-                <span class="headline">${item.label}</span>
+                <span slot="headline">${item.label}</span>
                 ${item.description
                   ? html`
-                      <span class="supporting-text">${item.description}</span>
+                      <span slot="supporting-text">${item.description}</span>
                     `
                   : nothing}
-              </ha-md-list-item>
+              </ha-list-item-button>
             `
           )}
-        </ha-md-list>
+        </ha-list-base>
       </div>
     `;
 
@@ -113,12 +102,16 @@ export class ListItemsDialog
   }
 
   static styles = css`
-    ha-dialog {
+    ha-dialog,
+    ha-bottom-sheet {
       /* Place above other dialogs */
       --dialog-z-index: 104;
       --dialog-content-padding: 0;
-      --md-list-item-leading-space: 24px;
-      --md-list-item-trailing-space: 24px;
+      --ha-row-item-padding-inline: var(--ha-space-6);
+    }
+
+    ha-bottom-sheet {
+      --ha-bottom-sheet-content-padding: var(--ha-space-4) 0 0;
     }
   `;
 }

src/dialogs/more-info/controls/more-info-update.ts

@@ -9,10 +9,9 @@ import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-faded";
 import "../../../components/ha-markdown";
-import "../../../components/ha-md-list";
-import "../../../components/ha-md-list-item";
 import "../../../components/ha-spinner";
 import "../../../components/ha-switch";
+import "../../../components/item/ha-row-item";
 import "../../../components/progress/ha-progress-bar";
 import type { BackupConfig } from "../../../data/backup";
 import { fetchBackupConfig } from "../../../data/backup";
@@ -274,24 +273,22 @@ class MoreInfoUpdate extends LitElement {
       <div class="footer">
         ${createBackupTexts
           ? html`
-              <ha-md-list>
-                <ha-md-list-item>
-                  <span slot="headline">${createBackupTexts.title}</span>
-                  ${createBackupTexts.description
-                    ? html`
-                        <span slot="supporting-text">
-                          ${createBackupTexts.description}
-                        </span>
-                      `
-                    : nothing}
-                  <ha-switch
-                    slot="end"
-                    .checked=${this._createBackup}
-                    @change=${this._createBackupChanged}
-                    .disabled=${updateIsInstalling(this.stateObj)}
-                  ></ha-switch>
-                </ha-md-list-item>
-              </ha-md-list>
+              <ha-row-item>
+                <span slot="headline">${createBackupTexts.title}</span>
+                ${createBackupTexts.description
+                  ? html`
+                      <span slot="supporting-text">
+                        ${createBackupTexts.description}
+                      </span>
+                    `
+                  : nothing}
+                <ha-switch
+                  slot="end"
+                  .checked=${this._createBackup}
+                  @change=${this._createBackupChanged}
+                  .disabled=${updateIsInstalling(this.stateObj)}
+                ></ha-switch>
+              </ha-row-item>
             `
           : nothing}
         <div class="actions">
@@ -484,20 +481,9 @@ class MoreInfoUpdate extends LitElement {
       z-index: 10;
     }
 
-    ha-md-list {
+    ha-row-item {
       width: 100%;
-      box-sizing: border-box;
-      margin-bottom: calc(var(--ha-space-4) * -1);
-      margin-top: calc(var(--ha-space-1) * -1);
-      --md-sys-color-surface: var(
-        --ha-dialog-surface-background,
-        var(--mdc-theme-surface, #fff)
-      );
-    }
-
-    ha-md-list-item {
-      --md-list-item-leading-space: var(--ha-space-6);
-      --md-list-item-trailing-space: var(--ha-space-6);
+      --ha-row-item-padding-inline: var(--ha-space-6);
     }
 
     .actions {

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -2,8 +2,9 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-alert";
 import "../../components/ha-icon";
-import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
+import "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
 import type {
   ExternalEntityAddToAction,
   ExternalEntityAddToActions,
@@ -90,24 +91,23 @@ export class HaMoreInfoAddTo extends LitElement {
     }
 
     return html`
-      <div class="actions-list">
-        ${this._externalActions.actions.map(
+      <ha-list-base>
+        ${this._externalActions?.actions.map(
           (action) => html`
-            <ha-md-list-item
-              type="button"
+            <ha-list-item-button
               .disabled=${!action.enabled}
               .action=${action}
               @click=${this._actionSelected}
             >
               <ha-icon slot="start" .icon=${action.mdi_icon}></ha-icon>
-              <span>${action.name}</span>
+              <span slot="headline">${action.name}</span>
               ${action.details
                 ? html`<span slot="supporting-text">${action.details}</span>`
                 : nothing}
-            </ha-md-list-item>
+            </ha-list-item-button>
           `
         )}
-      </div>
+      </ha-list-base>
     `;
   }
 
@@ -125,11 +125,6 @@ export class HaMoreInfoAddTo extends LitElement {
       padding: var(--ha-space-8);
     }
 
-    .actions-list {
-      display: flex;
-      flex-direction: column;
-    }
-
     ha-icon {
       display: flex;
       align-items: center;

src/dialogs/restart/dialog-restart.ts

@@ -10,14 +10,15 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/animation/ha-fade-in";
 import "../../components/ha-adaptive-dialog";
 import "../../components/ha-alert";
 import "../../components/ha-expansion-panel";
-import "../../components/animation/ha-fade-in";
 import "../../components/ha-icon-next";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
+import "../../components/item/ha-list-item-button";
+import type { HaListItemButton } from "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
 import "../../components/progress/ha-progress-bar";
 import { fetchBackupInfo } from "../../data/backup";
 import type { BackupManagerState } from "../../data/backup_manager";
@@ -130,9 +131,8 @@ class DialogRestart extends LitElement {
                 </div>
               `
             : html`
-                <ha-md-list dialogInitialFocus>
-                  <ha-md-list-item
-                    type="button"
+                <ha-list-base dialogInitialFocus>
+                  <ha-list-item-button
                     @click=${this._reload}
                     .disabled=${this._loadingBackupInfo}
                   >
@@ -148,9 +148,8 @@ class DialogRestart extends LitElement {
                       <ha-svg-icon .path=${mdiAutoFix}></ha-svg-icon>
                     </div>
                     <ha-icon-next slot="end"></ha-icon-next>
-                  </ha-md-list-item>
-                  <ha-md-list-item
-                    type="button"
+                  </ha-list-item-button>
+                  <ha-list-item-button
                     .action=${"restart"}
                     @click=${this._handleAction}
                     .disabled=${this._loadingBackupInfo}
@@ -167,18 +166,17 @@ class DialogRestart extends LitElement {
                       )}
                     </div>
                     <ha-icon-next slot="end"></ha-icon-next>
-                  </ha-md-list-item>
-                </ha-md-list>
+                  </ha-list-item-button>
+                </ha-list-base>
                 <ha-expansion-panel
                   .header=${this.hass.localize(
                     "ui.dialogs.restart.advanced_options"
                   )}
                 >
-                  <ha-md-list>
+                  <ha-list-base>
                     ${showRebootShutdown
                       ? html`
-                          <ha-md-list-item
-                            type="button"
+                          <ha-list-item-button
                             .action=${"reboot"}
                             @click=${this._handleAction}
                             .disabled=${this._loadingBackupInfo}
@@ -197,9 +195,8 @@ class DialogRestart extends LitElement {
                               )}
                             </div>
                             <ha-icon-next slot="end"></ha-icon-next>
-                          </ha-md-list-item>
-                          <ha-md-list-item
-                            type="button"
+                          </ha-list-item-button>
+                          <ha-list-item-button
                             .action=${"shutdown"}
                             @click=${this._handleAction}
                             .disabled=${this._loadingBackupInfo}
@@ -218,11 +215,10 @@ class DialogRestart extends LitElement {
                               )}
                             </div>
                             <ha-icon-next slot="end"></ha-icon-next>
-                          </ha-md-list-item>
+                          </ha-list-item-button>
                         `
                       : nothing}
-                    <ha-md-list-item
-                      type="button"
+                    <ha-list-item-button
                       .action=${"restart-safe-mode"}
                       @click=${this._handleAction}
                       .disabled=${this._loadingBackupInfo}
@@ -244,8 +240,8 @@ class DialogRestart extends LitElement {
                         )}
                       </div>
                       <ha-icon-next slot="end"></ha-icon-next>
-                    </ha-md-list-item>
-                  </ha-md-list>
+                    </ha-list-item-button>
+                  </ha-list-base>
                 </ha-expansion-panel>
               `}
         </div>
@@ -324,16 +320,13 @@ class DialogRestart extends LitElement {
       }
     };
 
-  private async _handleAction(ev) {
+  private async _handleAction(ev: Event) {
     if (this._loadingBackupInfo) {
       return;
     }
     this._loadingBackupInfo = true;
-    const action = ev.currentTarget.action as
-      | "restart"
-      | "reboot"
-      | "shutdown"
-      | "restart-safe-mode";
+    const action = (ev.currentTarget as HaListItemButton & { action: string })
+      .action as "restart" | "reboot" | "shutdown" | "restart-safe-mode";
 
     const backupState = await this._loadBackupState();
 

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts

@@ -1,8 +1,9 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
+import "../../components/item/ha-list-item-button";
+import type { HaListItemButton } from "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
 import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
 import { setWakeWords } from "../../data/assist_satellite";
 import type { HomeAssistant } from "../../types";
@@ -35,28 +36,28 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
           )}
         </p>
       </div>
-      <ha-md-list>
+      <ha-list-base>
         ${this.assistConfiguration!.available_wake_words.map(
           (wakeWord) =>
-            html`<ha-md-list-item
-              interactive
-              type="button"
+            html`<ha-list-item-button
               @click=${this._wakeWordPicked}
               .value=${wakeWord.id}
             >
               ${wakeWord.wake_word}
               <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>`
+            </ha-list-item-button>`
         )}
-      </ha-md-list>`;
+      </ha-list-base>`;
   }
 
-  private async _wakeWordPicked(ev) {
+  private async _wakeWordPicked(ev: Event) {
     if (!this.assistEntityId) {
       return;
     }
 
-    const wakeWordId = ev.currentTarget.value;
+    const wakeWordId = (
+      ev.currentTarget as HaListItemButton & { value: string }
+    ).value;
 
     await setWakeWords(this.hass, this.assistEntityId, [wakeWordId]);
     this._nextStep();
@@ -75,7 +76,7 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
       .padding {
         padding: 24px;
       }
-      ha-md-list {
+      ha-list-base {
         width: 100%;
         text-align: initial;
         margin-bottom: 24px;

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -363,9 +363,6 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
   static styles = [
     AssistantSetupStyles,
     css`
-      ha-md-list-item {
-        text-align: initial;
-      }
       ha-tts-voice-picker {
         display: block;
       }

src/onboarding/onboarding-welcome.ts

@@ -5,9 +5,9 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-button";
-import "../components/ha-icon-button-next";
-import "../components/ha-md-list";
-import "../components/ha-md-list-item";
+import "../components/ha-icon-next";
+import "../components/item/ha-list-item-button";
+import "../components/list/ha-list-base";
 import type { HomeAssistant } from "../types";
 import { onBoardingStyles } from "./styles";
 
@@ -37,8 +37,8 @@ class OnboardingWelcome extends LitElement {
         </div>
       </div>
 
-      <ha-md-list>
-        <ha-md-list-item type="button" @click=${this._restoreBackupUpload}>
+      <ha-list-base>
+        <ha-list-item-button @click=${this._restoreBackupUpload}>
           <div slot="headline">
             ${this.localize("ui.panel.page-onboarding.restore.upload_backup")}
           </div>
@@ -47,18 +47,18 @@ class OnboardingWelcome extends LitElement {
               "ui.panel.page-onboarding.restore.options.upload_description"
             )}
           </div>
-          <ha-icon-button-next slot="end"></ha-icon-button-next>
-        </ha-md-list-item>
-        <ha-md-list-item type="button" @click=${this._restoreBackupCloud}>
+          <ha-icon-next slot="end"></ha-icon-next>
+        </ha-list-item-button>
+        <ha-list-item-button @click=${this._restoreBackupCloud}>
           <div slot="headline">Home Assistant Cloud</div>
           <div slot="supporting-text">
             ${this.localize(
               "ui.panel.page-onboarding.restore.ha-cloud.description"
             )}
           </div>
-          <ha-icon-button-next slot="end"></ha-icon-button-next>
-        </ha-md-list-item>
-      </ha-md-list>
+          <ha-icon-next slot="end"></ha-icon-next>
+        </ha-list-item-button>
+      </ha-list-base>
     `;
   }
 
@@ -123,11 +123,10 @@ class OnboardingWelcome extends LitElement {
           padding: 0 var(--ha-space-4);
         }
 
-        ha-md-list {
+        ha-list-base {
           width: 100%;
           padding-bottom: 0;
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
+          --ha-row-item-padding-inline: 0;
         }
       `,
     ];

src/onboarding/restore-backup/onboarding-restore-backup-restore.ts

@@ -8,9 +8,8 @@ import type { HaProgressButton } from "../../components/buttons/ha-progress-butt
 import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-icon-button-arrow-prev";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
 import "../../components/input/ha-input";
+import "../../components/item/ha-row-item";
 import {
   getPreferredAgentForDownload,
   type BackupContentExtended,
@@ -92,33 +91,30 @@ class OnboardingRestoreBackupRestore extends LitElement {
           </ha-alert>`
         : nothing}
 
-      <ha-md-list>
-        <ha-md-list-item>
-          <span slot="headline">
-            ${this.localize(
-              "ui.panel.page-onboarding.restore.details.summary.created"
-            )}
-          </span>
-          <span slot="supporting-text">${formattedDate}</span>
-        </ha-md-list-item>
-        ${onlyHomeAssistantBackup
-          ? html`<ha-md-list-item>
-              <span slot="headline">
-                ${this.localize(
-                  "ui.panel.page-onboarding.restore.details.summary.content"
-                )}
-              </span>
-              <ha-backup-formfield-label
-                slot="supporting-text"
-                .version=${this.backup.homeassistant_version}
-                .label=${this.localize(
-                  `ui.panel.page-onboarding.restore.data_picker.${this.backup.database_included ? "settings_and_history" : "settings"}`
-                )}
-              ></ha-backup-formfield-label>
-            </ha-md-list-item>`
-          : nothing}
-      </ha-md-list>
-
+      <ha-row-item>
+        <span slot="headline">
+          ${this.localize(
+            "ui.panel.page-onboarding.restore.details.summary.created"
+          )}
+        </span>
+        <span slot="supporting-text">${formattedDate}</span>
+      </ha-row-item>
+      ${onlyHomeAssistantBackup
+        ? html`<ha-row-item>
+            <span slot="headline">
+              ${this.localize(
+                "ui.panel.page-onboarding.restore.details.summary.content"
+              )}
+            </span>
+            <ha-backup-formfield-label
+              slot="supporting-text"
+              .version=${this.backup.homeassistant_version}
+              .label=${this.localize(
+                `ui.panel.page-onboarding.restore.data_picker.${this.backup.database_included ? "settings_and_history" : "settings"}`
+              )}
+            ></ha-backup-formfield-label>
+          </ha-row-item>`
+        : nothing}
       ${!onlyHomeAssistantBackup
         ? html`<h2>
             ${this.localize("ui.panel.page-onboarding.restore.select_type")}
@@ -312,26 +308,8 @@ class OnboardingRestoreBackupRestore extends LitElement {
           display: block;
           margin-top: 16px;
         }
-        ha-md-list {
-          background: none;
-          padding: 0;
-        }
-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-list-item-two-line-container-height: 64px;
-          --md-list-item-supporting-text-size: 1rem;
-          --md-list-item-label-text-size: 0.875rem;
-
-          --md-list-item-label-text-color: var(--secondary-text-color);
-          --md-list-item-supporting-text-color: var(--primary-text-color);
-        }
-        ha-md-list-item [slot="supporting-text"] {
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-          gap: var(--ha-space-2);
-          line-height: var(--ha-line-height-condensed);
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
         h2 {
           font-size: var(--ha-font-size-xl);

src/panels/config/backup/components/ha-backup-formfield-label.ts

@@ -42,7 +42,6 @@ class SupervisorFormfieldLabel extends LitElement {
       margin-right: 4px;
       margin-inline-end: 4px;
       margin-inline-start: initial;
-      font-size: var(--ha-font-size-m);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-normal);
       letter-spacing: 0.5px;

src/panels/config/core/ha-config-analytics.ts

@@ -7,18 +7,17 @@ import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-analytics";
 import "../../../components/ha-button";
 import "../../../components/ha-card";
-import "../../../components/ha-md-list";
-import "../../../components/ha-md-list-item";
 import "../../../components/ha-spinner";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
-import { getSignedPath } from "../../../data/auth";
 import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/item/ha-row-item";
 import type { Analytics } from "../../../data/analytics";
 import {
   getAnalyticsDetails,
   setAnalyticsPreferences,
 } from "../../../data/analytics";
+import { getSignedPath } from "../../../data/auth";
 import { getConfigEntries } from "../../../data/config_entries";
 import type { LabPreviewFeature } from "../../../data/labs";
 import { subscribeLabFeature } from "../../../data/labs";
@@ -103,26 +102,24 @@ class ConfigAnalytics extends SubscribeMixin(LitElement) {
                   }
                 )}
               </p>
-              <ha-md-list>
-                <ha-md-list-item>
-                  <span slot="headline">
-                    ${this.hass.localize(
-                      `ui.panel.config.analytics.preferences.snapshots.title`
-                    )}
-                  </span>
-                  <span slot="supporting-text">
-                    ${this.hass.localize(
-                      `ui.panel.config.analytics.preferences.snapshots.description`
-                    )}
-                  </span>
-                  <ha-switch
-                    slot="end"
-                    @change=${this._handleDeviceRowClick}
-                    .checked=${!!this._analyticsDetails?.preferences.snapshots}
-                    .disabled=${this._analyticsDetails === undefined}
-                  ></ha-switch>
-                </ha-md-list-item>
-              </ha-md-list>
+              <ha-row-item>
+                <span slot="headline">
+                  ${this.hass.localize(
+                    `ui.panel.config.analytics.preferences.snapshots.title`
+                  )}
+                </span>
+                <span slot="supporting-text">
+                  ${this.hass.localize(
+                    `ui.panel.config.analytics.preferences.snapshots.description`
+                  )}
+                </span>
+                <ha-switch
+                  slot="end"
+                  @change=${this._handleDeviceRowClick}
+                  .checked=${!!this._analyticsDetails?.preferences.snapshots}
+                  .disabled=${this._analyticsDetails === undefined}
+                ></ha-switch>
+              </ha-row-item>
             </div>
             <div class="card-actions">
               <ha-button
@@ -163,29 +160,27 @@ class ConfigAnalytics extends SubscribeMixin(LitElement) {
                   }
                 )}
               </p>
-              <ha-md-list>
-                <ha-md-list-item>
-                  <span slot="headline">
-                    ${this.hass.localize(
-                      "ui.panel.config.zwave_js.dashboard.data_collection.toggle_title"
-                    )}
-                  </span>
-                  <span slot="supporting-text">
-                    ${this.hass.localize(
-                      "ui.panel.config.zwave_js.dashboard.data_collection.toggle_description"
-                    )}
-                  </span>
-                  ${this._zwaveDataCollectionOptIn !== undefined
-                    ? html`
-                        <ha-switch
-                          slot="end"
-                          @change=${this._zwaveDataCollectionToggled}
-                          .checked=${this._zwaveDataCollectionOptIn === true}
-                        ></ha-switch>
-                      `
-                    : html`<ha-spinner slot="end" size="small"></ha-spinner>`}
-                </ha-md-list-item>
-              </ha-md-list>
+              <ha-row-item>
+                <span slot="headline">
+                  ${this.hass.localize(
+                    "ui.panel.config.zwave_js.dashboard.data_collection.toggle_title"
+                  )}
+                </span>
+                <span slot="supporting-text">
+                  ${this.hass.localize(
+                    "ui.panel.config.zwave_js.dashboard.data_collection.toggle_description"
+                  )}
+                </span>
+                ${this._zwaveDataCollectionOptIn !== undefined
+                  ? html`
+                      <ha-switch
+                        slot="end"
+                        @change=${this._zwaveDataCollectionToggled}
+                        .checked=${this._zwaveDataCollectionOptIn === true}
+                      ></ha-switch>
+                    `
+                  : html`<ha-spinner slot="end" size="small"></ha-spinner>`}
+              </ha-row-item>
             </div>
           </ha-card>`
         : nothing}
@@ -326,13 +321,8 @@ class ConfigAnalytics extends SubscribeMixin(LitElement) {
         ha-card:not(:first-of-type) {
           margin-top: 24px;
         }
-        ha-md-list {
-          background: none;
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-        }
-        ha-md-list-item {
-          --md-item-overflow: visible;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
         ha-card {
           transition: box-shadow 0.3s ease;

src/panels/config/dashboard/ha-config-updates.ts

@@ -193,9 +193,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
           outline: none;
           text-decoration: underline;
         }
-        ha-md-list-item {
-          font-size: var(--ha-font-size-l);
-        }
         div[slot="start"] {
           position: relative;
         }

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-select-security-strategy.ts

@@ -89,9 +89,6 @@ export class ZWaveJsAddNodeSelectMethod extends LitElement {
       display: block;
       padding: 16px;
     }
-    ha-md-list {
-      padding: 0;
-    }
   `;
 }
 

src/panels/config/person/dialog-person-detail.ts

@@ -6,13 +6,13 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-button";
+import "../../../components/ha-dialog";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
-import "../../../components/ha-md-list-item";
 import "../../../components/input/ha-input";
-import "../../../components/ha-dialog";
+import "../../../components/item/ha-row-item";
 import { adminChangeUsername } from "../../../data/auth";
 import type { PersonMutableParams } from "../../../data/person";
 import type { User } from "../../../data/user";
@@ -163,7 +163,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
               @change=${this._pictureChanged}
             ></ha-picture-upload>
 
-            <ha-md-list-item>
+            <ha-row-item>
               <span slot="headline"
                 >${this.hass!.localize(
                   "ui.panel.config.person.detail.allow_login"
@@ -183,7 +183,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
                   this._user.is_owner)}
                 .checked=${this._userId}
               ></ha-switch>
-            </ha-md-list-item>
+            </ha-row-item>
 
             ${this._renderUserFields()}
             ${this._deviceTrackersAvailable(this.hass)
@@ -279,7 +279,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
     return html`
       ${!user.system_generated
         ? html`
-            <ha-md-list-item>
+            <ha-row-item>
               <span slot="headline"
                 >${this.hass.localize(
                   "ui.panel.config.person.detail.username"
@@ -299,12 +299,12 @@ class DialogPersonDetail extends LitElement implements HassDialog {
                     </ha-icon-button>
                   `
                 : nothing}
-            </ha-md-list-item>
+            </ha-row-item>
           `
         : nothing}
       ${!user.system_generated && this.hass.user?.is_owner
         ? html`
-            <ha-md-list-item>
+            <ha-row-item>
               <span slot="headline"
                 >${this.hass.localize(
                   "ui.panel.config.person.detail.password"
@@ -324,10 +324,10 @@ class DialogPersonDetail extends LitElement implements HassDialog {
                     </ha-icon-button>
                   `
                 : nothing}
-            </ha-md-list-item>
+            </ha-row-item>
           `
         : nothing}
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize(
             "ui.panel.config.person.detail.local_access_only"
@@ -344,8 +344,8 @@ class DialogPersonDetail extends LitElement implements HassDialog {
           .checked=${this._localOnly}
           @change=${this._localOnlyChanged}
         ></ha-switch>
-      </ha-md-list-item>
-      <ha-md-list-item>
+      </ha-row-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize("ui.panel.config.person.detail.admin")}</span
         >
@@ -360,7 +360,7 @@ class DialogPersonDetail extends LitElement implements HassDialog {
           .checked=${this._isAdmin}
           @change=${this._adminChanged}
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 
@@ -560,10 +560,8 @@ class DialogPersonDetail extends LitElement implements HassDialog {
           margin-bottom: 16px;
           --file-upload-image-border-radius: var(--ha-border-radius-circle);
         }
-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-item-overflow: visible;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
         a {
           color: var(--primary-color);

src/panels/config/users/dialog-add-user.ts

@@ -7,11 +7,11 @@ import "../../../components/ha-button";
 import "../../../components/ha-dialog";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-list-item";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
 import "../../../components/input/ha-input";
 import type { HaInput } from "../../../components/input/ha-input";
+import "../../../components/item/ha-row-item";
 import { createAuthForUser } from "../../../data/auth";
 import type { User } from "../../../data/user";
 import {
@@ -157,7 +157,7 @@ export class DialogAddUser extends LitElement {
               "ui.panel.config.users.add_user.password_not_match"
             )}
           ></ha-input>
-          <ha-md-list-item>
+          <ha-row-item>
             <span slot="headline"
               >${this.hass.localize(
                 "ui.panel.config.users.editor.local_access_only"
@@ -173,8 +173,8 @@ export class DialogAddUser extends LitElement {
               .checked=${this._localOnly}
               @change=${this._localOnlyChanged}
             ></ha-switch>
-          </ha-md-list-item>
-          <ha-md-list-item>
+          </ha-row-item>
+          <ha-row-item>
             <span slot="headline"
               >${this.hass.localize("ui.panel.config.users.editor.admin")}</span
             >
@@ -188,7 +188,7 @@ export class DialogAddUser extends LitElement {
               .checked=${this._isAdmin}
               @change=${this._adminChanged}
             ></ha-switch>
-          </ha-md-list-item>
+          </ha-row-item>
           ${!this._isAdmin
             ? html`
                 <ha-alert alert-type="info">
@@ -320,10 +320,8 @@ export class DialogAddUser extends LitElement {
           display: flex;
           padding: 8px 0;
         }
-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-item-overflow: visible;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
       `,
     ];

src/panels/config/users/dialog-user-detail.ts

@@ -9,11 +9,11 @@ import "../../../components/ha-dialog";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-label";
-import "../../../components/ha-md-list-item";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import "../../../components/input/ha-input";
 import type { HaInput } from "../../../components/input/ha-input";
+import "../../../components/item/ha-row-item";
 import { adminChangeUsername } from "../../../data/auth";
 import {
   computeUserBadges,
@@ -111,7 +111,7 @@ class DialogUserDetail extends LitElement {
                         "ui.panel.config.users.editor.name"
                       )}
                     ></ha-input>
-                    <ha-md-list-item>
+                    <ha-row-item>
                       <span slot="headline"
                         >${this.hass.localize(
                           "ui.panel.config.users.editor.username"
@@ -131,14 +131,14 @@ class DialogUserDetail extends LitElement {
                             </ha-icon-button>
                           `
                         : nothing}
-                    </ha-md-list-item>
+                    </ha-row-item>
                   `
                 : nothing
             }
             ${
               !user.system_generated && this.hass.user?.is_owner
                 ? html`
-                    <ha-md-list-item>
+                    <ha-row-item>
                       <span slot="headline"
                         >${this.hass.localize(
                           "ui.panel.config.users.editor.password"
@@ -158,11 +158,11 @@ class DialogUserDetail extends LitElement {
                             </ha-icon-button>
                           `
                         : nothing}
-                    </ha-md-list-item>
+                    </ha-row-item>
                   `
                 : nothing
             }
-              <ha-md-list-item>
+              <ha-row-item>
                 <span slot="headline"
                   >${this.hass.localize(
                     "ui.panel.config.users.editor.active"
@@ -179,8 +179,8 @@ class DialogUserDetail extends LitElement {
                   .checked=${this._isActive}
                   @change=${this._activeChanged}
                 ></ha-switch>
-              </ha-md-list-item>
-              <ha-md-list-item>
+              </ha-row-item>
+              <ha-row-item>
                 <span slot="headline"
                   >${this.hass.localize(
                     "ui.panel.config.users.editor.local_access_only"
@@ -197,8 +197,8 @@ class DialogUserDetail extends LitElement {
                   .checked=${this._localOnly}
                   @change=${this._localOnlyChanged}
                 ></ha-switch>
-              </ha-md-list-item>
-              <ha-md-list-item>
+              </ha-row-item>
+              <ha-row-item>
                 <span slot="headline"
                   >${this.hass.localize(
                     "ui.panel.config.users.editor.admin"
@@ -216,7 +216,7 @@ class DialogUserDetail extends LitElement {
                   @change=${this._adminChanged}
                 ></ha-switch>
                 </ha-switch>
-              </ha-md-list-item>
+              </ha-row-item>
             ${
               !this._isAdmin && !user.system_generated
                 ? html`
@@ -398,10 +398,8 @@ class DialogUserDetail extends LitElement {
         .secondary {
           color: var(--secondary-text-color);
         }
-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-item-overflow: visible;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
         .badge-container {
           margin-top: 4px;

src/panels/profile/ha-advanced-mode-row.ts

@@ -3,12 +3,12 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-alert";
 import "../../components/ha-card";
-import "../../components/ha-md-list-item";
 import "../../components/ha-switch";
+import "../../components/item/ha-row-item";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { saveFrontendUserData } from "../../data/frontend";
-import { documentationUrl } from "../../util/documentation-url";
 import type { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 
 @customElement("ha-advanced-mode-row")
 class AdvancedModeRow extends LitElement {
@@ -23,7 +23,7 @@ class AdvancedModeRow extends LitElement {
       ${this._error
         ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
         : nothing}
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize("ui.panel.profile.advanced_mode.title")}</span
         >
@@ -45,7 +45,7 @@ class AdvancedModeRow extends LitElement {
           .disabled=${this.coreUserData === undefined}
           @change=${this._advancedToggled}
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 

src/panels/profile/ha-enable-shortcuts-row.ts

@@ -2,9 +2,9 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-md-list-item";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
+import "../../components/item/ha-row-item";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-enable-shortcuts-row")
@@ -13,7 +13,7 @@ class HaEnableShortcutsRow extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize(
             "ui.panel.profile.enable_shortcuts.header"
@@ -29,7 +29,7 @@ class HaEnableShortcutsRow extends LitElement {
           .checked=${this.hass.enableShortcuts}
           @change=${this._checkedChanged}
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 

src/panels/profile/ha-entity-id-picker-row.ts

@@ -3,8 +3,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-alert";
 import "../../components/ha-card";
-import "../../components/ha-md-list-item";
 import "../../components/ha-switch";
+import "../../components/item/ha-row-item";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { saveFrontendUserData } from "../../data/frontend";
 import type { HomeAssistant } from "../../types";
@@ -21,7 +21,7 @@ class EntityIdPickerRow extends LitElement {
     return html`${this._error
         ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
         : nothing}
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize(
             "ui.panel.profile.entity_id_picker.title"
@@ -40,7 +40,7 @@ class EntityIdPickerRow extends LitElement {
           .disabled=${this.coreUserData === undefined}
           @change=${this._toggled}
         ></ha-switch>
-      </ha-md-list-item>`;
+      </ha-row-item>`;
   }
 
   private async _toggled(ev) {

src/panels/profile/ha-force-narrow-row.ts

@@ -2,9 +2,9 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-md-list-item";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
+import "../../components/item/ha-row-item";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-force-narrow-row")
@@ -13,7 +13,7 @@ class HaForcedNarrowRow extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize("ui.panel.profile.force_narrow.header")}</span
         >
@@ -27,7 +27,7 @@ class HaForcedNarrowRow extends LitElement {
           .checked=${this.hass.dockedSidebar === "always_hidden"}
           @change=${this._checkedChanged}
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 

src/panels/profile/ha-profile-section-general.ts

@@ -1,14 +1,12 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { nextRender } from "../../common/util/render-status";
 import "../../components/ha-button";
 import "../../components/ha-card";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
 import "../../components/item/ha-row-item";
 import { isExternal } from "../../data/external";
 import type { CoreFrontendUserData } from "../../data/frontend";
@@ -168,24 +166,22 @@ class HaProfileSectionGeneral extends LitElement {
                 )}
               </ha-button>
             </ha-row-item>
-            <ha-md-list>
-              ${this.hass.user!.is_admin
-                ? html`
-                    <ha-advanced-mode-row
-                      .hass=${this.hass}
-                      .coreUserData=${this._coreUserData}
-                    ></ha-advanced-mode-row>
-                  `
-                : ""}
-              ${this.hass.user!.is_admin
-                ? html`
-                    <ha-entity-id-picker-row
-                      .hass=${this.hass}
-                      .coreUserData=${this._coreUserData}
-                    ></ha-entity-id-picker-row>
-                  `
-                : ""}
-            </ha-md-list>
+            ${this.hass.user!.is_admin
+              ? html`
+                  <ha-advanced-mode-row
+                    .hass=${this.hass}
+                    .coreUserData=${this._coreUserData}
+                  ></ha-advanced-mode-row>
+                `
+              : nothing}
+            ${this.hass.user!.is_admin
+              ? html`
+                  <ha-entity-id-picker-row
+                    .hass=${this.hass}
+                    .coreUserData=${this._coreUserData}
+                  ></ha-entity-id-picker-row>
+                `
+              : nothing}
           </ha-card>
           <ha-card
             .header=${this.hass.localize(
@@ -226,37 +222,32 @@ class HaProfileSectionGeneral extends LitElement {
             <div class="card-content">
               ${this.hass.localize("ui.panel.profile.client_settings_detail")}
             </div>
-            <ha-md-list>
-              ${this.hass.dockedSidebar !== "auto" || !this.narrow
-                ? html`
-                    <ha-force-narrow-row
-                      .hass=${this.hass}
-                    ></ha-force-narrow-row>
-                  `
-                : ""}
-              ${"vibrate" in navigator
-                ? html`
-                    <ha-set-vibrate-row .hass=${this.hass}></ha-set-vibrate-row>
-                  `
-                : ""}
-              ${!isExternal &&
-              isComponentLoaded(this.hass.config, "html5.notify")
-                ? html`
-                    <ha-push-notifications-row
-                      .hass=${this.hass}
-                    ></ha-push-notifications-row>
-                  `
-                : ""}
-              <ha-set-suspend-row .hass=${this.hass}></ha-set-suspend-row>
-              ${!isMobileClient
-                ? html`
-                    <ha-enable-shortcuts-row
-                      id="shortcuts"
-                      .hass=${this.hass}
-                    ></ha-enable-shortcuts-row>
-                  `
-                : ""}
-            </ha-md-list>
+            ${this.hass.dockedSidebar !== "auto" || !this.narrow
+              ? html`
+                  <ha-force-narrow-row .hass=${this.hass}></ha-force-narrow-row>
+                `
+              : nothing}
+            ${"vibrate" in navigator
+              ? html`
+                  <ha-set-vibrate-row .hass=${this.hass}></ha-set-vibrate-row>
+                `
+              : nothing}
+            ${!isExternal && isComponentLoaded(this.hass.config, "html5.notify")
+              ? html`
+                  <ha-push-notifications-row
+                    .hass=${this.hass}
+                  ></ha-push-notifications-row>
+                `
+              : nothing}
+            <ha-set-suspend-row .hass=${this.hass}></ha-set-suspend-row>
+            ${!isMobileClient
+              ? html`
+                  <ha-enable-shortcuts-row
+                    id="shortcuts"
+                    .hass=${this.hass}
+                  ></ha-enable-shortcuts-row>
+                `
+              : nothing}
           </ha-card>
         </div>
       </hass-tabs-subpage>
@@ -303,12 +294,6 @@ class HaProfileSectionGeneral extends LitElement {
           text-align: center;
           color: var(--secondary-text-color);
         }
-
-        ha-md-list {
-          background: none;
-          padding-top: 0;
-          padding-bottom: 0;
-        }
       `,
     ];
   }

src/panels/profile/ha-push-notifications-row.ts

@@ -3,9 +3,9 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { pushSupported } from "../../components/ha-push-notifications-toggle";
-import "../../components/ha-md-list-item";
-import { documentationUrl } from "../../util/documentation-url";
+import "../../components/item/ha-row-item";
 import type { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 
 @customElement("ha-push-notifications-row")
 class HaPushNotificationsRow extends LitElement {
@@ -28,7 +28,7 @@ class HaPushNotificationsRow extends LitElement {
     const isDisabled = !platformLoaded || !pushSupported;
 
     return html`
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize(
             "ui.panel.profile.push_notifications.header"
@@ -52,7 +52,7 @@ class HaPushNotificationsRow extends LitElement {
           .hass=${this.hass}
           .disabled=${isDisabled}
         ></ha-push-notifications-toggle>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 

src/panels/profile/ha-refresh-tokens-card.ts

@@ -18,7 +18,8 @@ import "../../components/ha-card";
 import "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
-import "../../components/ha-settings-row";
+import "../../components/item/ha-list-item-base";
+import "../../components/list/ha-list-base";
 import { deleteAllRefreshTokens } from "../../data/auth";
 import type { RefreshToken } from "../../data/refresh_token";
 import {
@@ -78,73 +79,76 @@ class HaRefreshTokens extends LitElement {
       >
         <div class="card-content">
           ${this.hass.localize("ui.panel.profile.refresh_tokens.description")}
-          ${refreshTokens.length
-            ? refreshTokens.map(
-                (token) => html`
-                  <ha-settings-row three-line>
-                    <ha-svg-icon
-                      slot="prefix"
-                      .path=${token.client_id === iOSclientId
-                        ? mdiApple
-                        : token.client_id === androidClientId
-                          ? mdiAndroid
-                          : mdiWeb}
-                    ></ha-svg-icon>
-                    <span slot="heading" class="primary">
-                      ${this._formatTokenName(token)}
-                    </span>
-                    <div slot="description">
-                      ${this.hass.localize(
-                        "ui.panel.profile.refresh_tokens.created_at",
-                        {
-                          date: relativeTime(
-                            new Date(token.created_at),
-                            this.hass.locale
-                          ),
-                        }
-                      )}
-                    </div>
-                    <div slot="description">
-                      ${token.is_current
-                        ? html`
-                            <span class="current-session">
-                              <span class="dot"></span> ${this.hass.localize(
-                                "ui.panel.profile.refresh_tokens.current_session"
+          <ha-list-base>
+            ${refreshTokens.length
+              ? refreshTokens.map(
+                  (token) => html`
+                    <ha-list-item-base>
+                      <ha-svg-icon
+                        slot="start"
+                        .path=${token.client_id === iOSclientId
+                          ? mdiApple
+                          : token.client_id === androidClientId
+                            ? mdiAndroid
+                            : mdiWeb}
+                      ></ha-svg-icon>
+                      <span slot="headline" class="primary">
+                        ${this._formatTokenName(token)}
+                      </span>
+                      <div slot="supporting-text">
+                        ${this.hass.localize(
+                          "ui.panel.profile.refresh_tokens.created_at",
+                          {
+                            date: relativeTime(
+                              new Date(token.created_at),
+                              this.hass.locale
+                            ),
+                          }
+                        )}
+                      </div>
+                      <div slot="supporting-text">
+                        ${token.is_current
+                          ? html`
+                              <span class="current-session">
+                                <span class="dot"></span> ${this.hass.localize(
+                                  "ui.panel.profile.refresh_tokens.current_session"
+                                )}
+                              </span>
+                            `
+                          : token.last_used_at
+                            ? this.hass.localize(
+                                "ui.panel.profile.refresh_tokens.last_used",
+                                {
+                                  date: relativeTime(
+                                    new Date(token.last_used_at),
+                                    this.hass.locale
+                                  ),
+                                  location: token.last_used_ip,
+                                }
+                              )
+                            : this.hass.localize(
+                                "ui.panel.profile.refresh_tokens.not_used"
                               )}
-                            </span>
-                          `
-                        : token.last_used_at
+                      </div>
+                      <div slot="supporting-text">
+                        ${token.expire_at
                           ? this.hass.localize(
-                              "ui.panel.profile.refresh_tokens.last_used",
+                              "ui.panel.profile.refresh_tokens.expires_in",
                               {
                                 date: relativeTime(
-                                  new Date(token.last_used_at),
+                                  new Date(token.expire_at),
                                   this.hass.locale
                                 ),
-                                location: token.last_used_ip,
                               }
                             )
                           : this.hass.localize(
-                              "ui.panel.profile.refresh_tokens.not_used"
+                              "ui.panel.profile.refresh_tokens.never_expires"
                             )}
-                    </div>
-                    <div slot="description">
-                      ${token.expire_at
-                        ? this.hass.localize(
-                            "ui.panel.profile.refresh_tokens.expires_in",
-                            {
-                              date: relativeTime(
-                                new Date(token.expire_at),
-                                this.hass.locale
-                              ),
-                            }
-                          )
-                        : this.hass.localize(
-                            "ui.panel.profile.refresh_tokens.never_expires"
-                          )}
-                    </div>
-                    <div>
-                      <ha-dropdown @wa-select=${this._handleDropdownSelect}>
+                      </div>
+                      <ha-dropdown
+                        slot="end"
+                        @wa-select=${this._handleDropdownSelect}
+                      >
                         <ha-icon-button
                           slot="trigger"
                           .label=${this.hass.localize("ui.common.menu")}
@@ -181,11 +185,11 @@ class HaRefreshTokens extends LitElement {
                           ${this.hass.localize("ui.common.delete")}
                         </ha-dropdown-item>
                       </ha-dropdown>
-                    </div>
-                  </ha-settings-row>
-                `
-              )
-            : nothing}
+                    </ha-list-item-base>
+                  `
+                )
+              : nothing}
+          </ha-list-base>
         </div>
         <div class="card-actions">
           <ha-button
@@ -318,23 +322,13 @@ class HaRefreshTokens extends LitElement {
     return [
       haStyle,
       css`
-        ha-settings-row {
-          padding: 0;
-          --settings-row-prefix-display: contents;
-          --settings-row-content-display: contents;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
         }
         ha-icon-button {
           color: var(--primary-text-color);
         }
-        ha-md-list-item[disabled],
-        ha-md-list-item[disabled] ha-svg-icon {
-          color: var(--disabled-text-color) !important;
-        }
-        ha-settings-row .current-session {
-          display: inline-flex;
-          align-items: center;
-        }
-        ha-settings-row .dot {
+        ha-row-item .dot {
           display: inline-block;
           width: 8px;
           height: 8px;
@@ -342,11 +336,6 @@ class HaRefreshTokens extends LitElement {
           border-radius: var(--ha-border-radius-circle);
           margin-right: 6px;
         }
-        ha-settings-row > ha-svg-icon {
-          margin-right: 12px;
-          margin-inline-start: initial;
-          margin-inline-end: 12px;
-        }
       `,
     ];
   }

src/panels/profile/ha-set-suspend-row.ts

@@ -3,9 +3,9 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-md-list-item";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
+import "../../components/item/ha-row-item";
 import type { HomeAssistant } from "../../types";
 
 declare global {
@@ -27,7 +27,7 @@ class HaSetSuspendRow extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize("ui.panel.profile.suspend.header")}</span
         >
@@ -39,7 +39,7 @@ class HaSetSuspendRow extends LitElement {
           .checked=${this.hass.suspendWhenHidden}
           @change=${this._checkedChanged}
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }
 

src/panels/profile/ha-set-vibrate-row.ts

@@ -2,9 +2,9 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-md-list-item";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
+import "../../components/item/ha-row-item";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
 
@@ -14,7 +14,7 @@ class HaSetVibrateRow extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-md-list-item>
+      <ha-row-item>
         <span slot="headline"
           >${this.hass.localize("ui.panel.profile.vibrate.header")}</span
         >
@@ -26,7 +26,7 @@ class HaSetVibrateRow extends LitElement {
           .checked=${this.hass.vibrate}
           @change=${this._checkedChanged}
         ></ha-switch>
-      </ha-md-list-item>
+      </ha-row-item>
     `;
   }