Migrate ha-outlined-icon-button to ha-icon-button

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_014hhDP1ptcLi4we8fC4ZKam

src/components/ha-items-display-editor.ts

@@ -16,10 +16,10 @@ import type { LocalizeFunc } from "../common/translations/localize";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-icon-next";
-import "./ha-md-list";
-import "./ha-md-list-item";
 import "./ha-sortable";
 import "./ha-svg-icon";
+import "./item/ha-list-item-button";
+import "./list/ha-list-base";
 
 export interface DisplayItem {
   icon?: string | Promise<string | undefined>;
@@ -92,7 +92,7 @@ export class HaItemDisplayEditor extends LitElement {
         handle-selector=".handle"
         @item-moved=${this._itemMoved}
       >
-        <ha-md-list>
+        <ha-list-base>
           ${repeat(
             allItems,
             (item) => item.value,
@@ -108,8 +108,7 @@ export class HaItemDisplayEditor extends LitElement {
                 disableHiding,
               } = item;
               return html`
-                <ha-md-list-item
-                  type="button"
+                <ha-list-item-button
                   @click=${
                     this.showNavigationButton ? this._navigate : undefined
                   }
@@ -207,11 +206,11 @@ export class HaItemDisplayEditor extends LitElement {
                         `
                       : html`<ha-svg-icon slot="end"></ha-svg-icon>`
                   }
-                </ha-md-list-item>
+                </ha-list-item-button>
               `;
             }
           )}
-        </ha-md-list>
+        </ha-list-base>
       </ha-sortable>
     `;
   }
@@ -335,7 +334,7 @@ export class HaItemDisplayEditor extends LitElement {
       await this.updateComplete;
       // eslint-disable-next-line lit/prefer-query-decorators
       const selectedElement = this.shadowRoot?.querySelector(
-        `ha-md-list-item:nth-child(${this._dragIndex! + 1})`
+        `ha-list-item-button:nth-child(${this._dragIndex! + 1})`
       ) as HTMLElement | null;
       selectedElement?.focus();
       if (clearDragIndex) {
@@ -406,19 +405,18 @@ export class HaItemDisplayEditor extends LitElement {
       height: 21px;
       margin: 0 -4px;
     }
-    ha-md-list {
-      padding: 0;
+    ha-list-item-button {
+      --ha-row-item-padding-block: 0;
+      --ha-row-item-padding-inline: var(--ha-space-2);
     }
-    ha-md-list-item {
-      --md-list-item-top-space: 0;
-      --md-list-item-bottom-space: 0;
-      --md-list-item-leading-space: 8px;
-      --md-list-item-trailing-space: 8px;
-      --md-list-item-two-line-container-height: 48px;
-      --md-list-item-one-line-container-height: 48px;
+    ha-list-item-button::part(start),
+    ha-list-item-button::part(end) {
+      color: var(--ha-color-text-secondary);
     }
-    ha-md-list-item.drag-selected {
-      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
+    ha-list-item-button::part(end) {
+      gap: var(--ha-space-4);
+    }
+    ha-list-item-button.drag-selected {
       border-radius: var(--ha-border-radius-md);
       outline: solid;
       outline-color: rgba(var(--rgb-accent-color), 0.6);
@@ -426,15 +424,13 @@ export class HaItemDisplayEditor extends LitElement {
       outline-width: 2px;
       background-color: rgba(var(--rgb-accent-color), 0.08);
     }
-    ha-md-list-item ha-icon-button {
+    ha-list-item-button ha-icon-button {
       margin-left: -12px;
       margin-right: -12px;
     }
-    ha-md-list-item.hidden {
-      --md-list-item-label-text-color: var(--disabled-text-color);
-      --md-list-item-supporting-text-color: var(--disabled-text-color);
-    }
-    ha-md-list-item.hidden .icon {
+    ha-list-item-button.hidden,
+    ha-list-item-button.hidden::part(supporting-text),
+    ha-list-item-button.hidden .icon {
       color: var(--disabled-text-color);
     }
   `;

src/components/ha-md-list-item.ts

@@ -1,47 +0,0 @@
-import { ListItemEl } from "@material/web/list/internal/listitem/list-item";
-import { styles } from "@material/web/list/internal/listitem/list-item-styles.cssresult.js";
-import { css, html, nothing, type TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-import "./ha-ripple";
-
-export const haMdListStyles = [
-  styles,
-  css`
-    :host {
-      --ha-icon-display: block;
-      --md-sys-color-primary: var(--primary-text-color);
-      --md-sys-color-secondary: var(--secondary-text-color);
-      --md-sys-color-surface: var(--card-background-color);
-      --md-sys-color-on-surface: var(--primary-text-color);
-      --md-sys-color-on-surface-variant: var(--secondary-text-color);
-    }
-    md-item {
-      overflow: var(--md-item-overflow, hidden);
-      align-items: var(--md-item-align-items, center);
-      gap: var(--ha-md-list-item-gap, 16px);
-    }
-  `,
-];
-
-@customElement("ha-md-list-item")
-export class HaMdListItem extends ListItemEl {
-  static override styles = haMdListStyles;
-
-  protected renderRipple(): TemplateResult | typeof nothing {
-    if (this.type === "text") {
-      return nothing;
-    }
-
-    return html`<ha-ripple
-      part="ripple"
-      for="item"
-      ?disabled=${this.disabled && this.type !== "link"}
-    ></ha-ripple>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-md-list-item": HaMdListItem;
-  }
-}

src/components/ha-md-list.ts

@@ -1,22 +0,0 @@
-import { List } from "@material/web/list/internal/list";
-import { styles } from "@material/web/list/internal/list-styles.cssresult.js";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-md-list")
-export class HaMdList extends List {
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --md-sys-color-surface: var(--card-background-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-md-list": HaMdList;
-  }
-}

src/components/ha-outlined-icon-button.ts

@@ -1,38 +1,38 @@
-import { IconButton } from "@material/web/iconbutton/internal/icon-button";
-import { styles } from "@material/web/iconbutton/internal/outlined-styles.cssresult.js";
-import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.cssresult.js";
+import type { CSSResultGroup } from "lit";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
+import { HaIconButton } from "./ha-icon-button";
 
+/**
+ * @element ha-outlined-icon-button
+ * @extends {HaIconButton}
+ *
+ * @summary
+ * Icon button with a circular outline.
+ *
+ * @cssprop --ha-icon-button-size - Size of the button. Defaults to `40px`.
+ * @cssprop --ha-outlined-icon-button-outline-color - Color of the outline. Defaults to `--secondary-text-color`.
+ */
 @customElement("ha-outlined-icon-button")
-export class HaOutlinedIconButton extends IconButton {
-  protected override getRenderClasses() {
-    return {
-      ...super.getRenderClasses(),
-      outlined: true,
-    };
-  }
-
-  static override styles = [
-    css`
-      .icon-button {
-        border-radius: var(--_container-shape);
-      }
-    `,
-    sharedStyles,
-    styles,
+export class HaOutlinedIconButton extends HaIconButton {
+  static styles: CSSResultGroup = [
+    HaIconButton.styles,
     css`
       :host {
-        --ha-icon-display: block;
-        --md-sys-color-on-surface: var(--secondary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
-        --md-sys-color-outline: var(--secondary-text-color);
+        color: var(--secondary-text-color);
+        --ha-button-height: var(--ha-icon-button-size, 40px);
       }
-      :host([no-ripple]) .outlined {
-        --md-ripple-focus-opacity: 0;
-        --md-ripple-hover-opacity: 0;
-        --md-ripple-pressed-opacity: 0;
+      ha-button::part(base) {
+        box-sizing: border-box;
+        border: 1px solid
+          var(
+            --ha-outlined-icon-button-outline-color,
+            var(--secondary-text-color)
+          );
+        border-radius: 50%;
+      }
+      :host([disabled]) ha-button::part(base) {
+        border-color: var(--ha-color-on-disabled-quiet);
       }
     `,
   ];

src/components/ha-selector/ha-selector-object.ts

@@ -17,10 +17,10 @@ import type { HomeAssistant } from "../../types";
 import { computeInitialHaFormData } from "../ha-form/compute-initial-ha-form-data";
 import type { HaFormSchema } from "../ha-form/types";
 import "../ha-input-helper-text";
-import "../ha-md-list";
-import "../ha-md-list-item";
 import "../ha-sortable";
 import "../ha-yaml-editor";
+import "../item/ha-list-item-base";
+import "../list/ha-list-base";
 import type { HaYamlEditor } from "../ha-yaml-editor";
 import { deepEqual } from "../../common/util/deep-equal";
 
@@ -115,7 +115,7 @@ export class HaObjectSelector extends LitElement {
     const reorderable = this.selector.object!.multiple || false;
     const multiple = this.selector.object!.multiple || false;
     return html`
-      <ha-md-list-item class="item">
+      <ha-list-item-base class="item">
         ${
           reorderable
             ? html`
@@ -150,7 +150,7 @@ export class HaObjectSelector extends LitElement {
           .path=${multiple ? mdiDelete : mdiClose}
           @click=${this._deleteItem}
         ></ha-icon-button>
-      </ha-md-list-item>
+      </ha-list-item-base>
     `;
   }
 
@@ -166,9 +166,9 @@ export class HaObjectSelector extends LitElement {
               draggable-selector=".item"
               @item-moved=${this._itemMoved}
             >
-              <ha-md-list>
+              <ha-list-base>
                 ${items.map((item, index) => this._renderItem(item, index))}
-              </ha-md-list>
+              </ha-list-base>
             </ha-sortable>
             <ha-button appearance="filled" @click=${this._addItem}>
               ${this.hass.localize("ui.common.add")}
@@ -182,9 +182,9 @@ export class HaObjectSelector extends LitElement {
         <div class="items-container">
           ${
             this.value
-              ? html`<ha-md-list>
+              ? html`<ha-list-base>
                   ${this._renderItem(this.value, 0)}
-                </ha-md-list>`
+                </ha-list-base>`
               : html`
                   <ha-button appearance="filled" @click=${this._addItem}>
                     ${this.hass.localize("ui.common.add")}
@@ -346,19 +346,20 @@ export class HaObjectSelector extends LitElement {
   static get styles() {
     return [
       css`
-        ha-md-list {
-          gap: var(--ha-space-2);
+        ha-list-base {
+          --ha-list-gap: var(--ha-space-2);
+          --ha-list-padding: var(--ha-space-2) 0;
         }
-        ha-md-list-item {
+        ha-list-item-base {
           border: 1px solid var(--divider-color);
           border-radius: var(--ha-border-radius-md);
-          --ha-md-list-item-gap: 0;
-          --md-list-item-top-space: 0;
-          --md-list-item-bottom-space: 0;
-          --md-list-item-leading-space: 12px;
-          --md-list-item-trailing-space: 4px;
-          --md-list-item-two-line-container-height: 48px;
-          --md-list-item-one-line-container-height: 48px;
+          --ha-row-item-gap: 0;
+          --ha-row-item-padding-block: 0;
+          --ha-row-item-padding-inline: var(--ha-space-3) var(--ha-space-1);
+        }
+        ha-list-item-base::part(start),
+        ha-list-item-base::part(end) {
+          color: var(--ha-color-text-secondary);
         }
         .handle {
           cursor: move;
@@ -369,8 +370,8 @@ export class HaObjectSelector extends LitElement {
           margin-bottom: 8px;
           display: block;
         }
-        ha-md-list-item .label,
-        ha-md-list-item .description {
+        ha-list-item-base .label,
+        ha-list-item-base .description {
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;

src/components/target-picker/ha-target-picker-item-row.ts

@@ -802,14 +802,6 @@ export class HaTargetPickerItemRow extends LitElement {
 
   static styles = [
     css`
-      :host {
-        --md-list-item-top-space: 0;
-        --md-list-item-bottom-space: 0;
-        --md-list-item-leading-space: var(--ha-space-2);
-        --md-list-item-trailing-space: var(--ha-space-2);
-        --md-list-item-two-line-container-height: 56px;
-      }
-
       .error {
         background: var(--ha-color-fill-warning-quiet-resting);
       }

src/panels/config/areas/dialog-areas-floors-order.ts

@@ -14,11 +14,11 @@ import "../../../components/ha-button";
 import "../../../components/ha-dialog-footer";
 import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon";
-import "../../../components/ha-md-list";
-import "../../../components/ha-md-list-item";
 import "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-dialog";
+import "../../../components/item/ha-list-item-base";
+import "../../../components/list/ha-list-base";
 import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import {
   reorderAreaRegistryEntries,
@@ -169,13 +169,13 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
         </div>
         <ha-sortable
           handle-selector=".area-handle"
-          draggable-selector="ha-md-list-item"
+          draggable-selector="ha-list-item-base"
           @item-moved=${this._areaMoved}
           @item-added=${this._areaAdded}
           group="areas"
           .floor=${floor.id}
         >
-          <ha-md-list>
+          <ha-list-base>
             ${
               floor.areas.length > 0
                 ? floor.areas.map((areaId) => this._renderArea(areaId))
@@ -185,7 +185,7 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
                     )}
                   </p>`
             }
-          </ha-md-list>
+          </ha-list-base>
         </ha-sortable>
       </div>
     `;
@@ -209,13 +209,13 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
         }
         <ha-sortable
           handle-selector=".area-handle"
-          draggable-selector="ha-md-list-item"
+          draggable-selector="ha-list-item-base"
           @item-moved=${this._areaMoved}
           @item-added=${this._areaAdded}
           group="areas"
           .floor=${UNASSIGNED_FLOOR}
         >
-          <ha-md-list>
+          <ha-list-base>
             ${
               this._hierarchy!.areas.length > 0
                 ? this._hierarchy!.areas.map((areaId) =>
@@ -227,7 +227,7 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
                     )}
                   </p>`
             }
-          </ha-md-list>
+          </ha-list-base>
         </ha-sortable>
       </div>
     `;
@@ -240,7 +240,7 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
     }
 
     return html`
-      <ha-md-list-item .sortableData=${area}>
+      <ha-list-item-base .sortableData=${area}>
         ${
           area.icon
             ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -255,7 +255,7 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
           slot="end"
           .path=${mdiDragHorizontalVariant}
         ></ha-svg-icon>
-      </ha-md-list-item>
+      </ha-list-item-base>
     `;
   }
 
@@ -477,20 +477,11 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
           color: var(--secondary-text-color);
         }
 
-        ha-md-list {
-          padding: 0;
-          --md-list-item-leading-space: 16px;
-          --md-list-item-trailing-space: 16px;
-          display: flex;
-          flex-direction: column;
+        ha-list-item-base::part(start) {
+          color: var(--ha-color-text-secondary);
         }
 
-        ha-md-list-item {
-          --md-list-item-one-line-container-height: 48px;
-          --md-list-item-container-shape: 0;
-        }
-
-        ha-md-list-item.sortable-ghost {
+        ha-list-item-base.sortable-ghost {
           border-radius: calc(
             var(--ha-card-border-radius, var(--ha-border-radius-lg)) - 1px
           );
@@ -511,7 +502,7 @@ class DialogAreasFloorsOrder extends DirtyStateProviderMixin<OrderState>()(
           order: 1;
         }
 
-        ha-md-list:has(ha-md-list-item) .empty {
+        ha-list-base:has(ha-list-item-base) .empty {
           display: none;
         }
 

src/panels/config/automation/add-automation-element-dialog.ts

@@ -2420,21 +2420,12 @@ class DialogAddAutomationElement
           display: none;
         }
 
-        .groups {
-          --md-list-item-leading-space: var(--ha-space-3);
-          --md-list-item-trailing-space: var(--md-list-item-leading-space);
-          --md-list-item-bottom-space: var(--ha-space-1);
-          --md-list-item-top-space: var(--md-list-item-bottom-space);
-          --md-list-item-supporting-text-font: var(--ha-font-family-body);
-          --md-list-item-one-line-container-height: var(--ha-space-10);
-        }
         ha-bottom-sheet .groups,
         ha-bottom-sheet ha-automation-add-from-target {
           margin: var(--ha-space-3);
         }
         .groups .selected {
           background-color: var(--ha-color-fill-primary-normal-active);
-          --md-list-item-label-text-color: var(--ha-color-on-primary-normal);
           --icon-primary-color: var(--ha-color-on-primary-normal);
         }
         .groups .selected ha-svg-icon {

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -1635,7 +1635,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
 
     ha-list-item-button.selected {
       background-color: var(--ha-color-fill-primary-normal-active);
-      --md-list-item-label-text-color: var(--ha-color-on-primary-normal);
       --icon-primary-color: var(--ha-color-on-primary-normal);
     }
 

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

@@ -171,9 +171,6 @@ class HaConfigUpdates extends LitElement {
   static get styles(): CSSResultGroup[] {
     return [
       css`
-        ha-list-item-button {
-          --md-list-item-leading-icon-size: 40px;
-        }
         ha-list-item-button ha-icon-next {
           color: var(--secondary-text-color);
           height: 24px;

src/panels/config/integrations/ha-config-entry-row.ts

@@ -890,10 +890,7 @@ export class HaConfigEntryRow extends LitElement {
         color: var(--ha-color-fill-neutral-loud-resting);
       }
       ha-icon-button.link {
-        color: var(
-          --md-list-item-trailing-icon-color,
-          var(--md-sys-color-on-surface-variant, #49454f)
-        );
+        color: var(--ha-color-text-secondary);
       }
       .toggle-devices-row {
         overflow: hidden;

src/panels/config/integrations/ha-config-integration-page.ts

@@ -1601,7 +1601,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         }
         .state-disabled [slot="headline"],
         .state-disabled [slot="supporting-text"] {
-          opacity: var(--md-list-item-disabled-opacity, 0.3);
+          opacity: 0.3;
         }
         ha-list-base {
           margin-top: 8px;

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-entry-picker.ts

@@ -131,11 +131,6 @@ class ZWaveJSConfigEntryPicker extends LitElement {
           text-decoration: none;
           color: inherit;
         }
-
-        ha-list {
-          --md-list-item-leading-space: var(--ha-space-4);
-          --md-list-item-trailing-space: var(--ha-space-4);
-        }
       `,
     ];
   }

src/panels/lovelace/cards/map/hui-map-overview.ts

@@ -33,11 +33,11 @@ import type {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button-prev";
 import "../../../../components/ha-resizable-bottom-sheet";
-import "../../../../components/ha-md-list";
-import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-relative-time";
 import "../../../../components/ha-spinner";
 import "../../../../components/ha-state-icon";
+import "../../../../components/item/ha-list-item-button";
+import "../../../../components/list/ha-list-base";
 import "../../../../components/ha-svg-icon";
 import type { HaMapEntity } from "../../../../components/map/ha-map";
 import "../../../../components/ha-button";
@@ -144,7 +144,7 @@ export class HuiMapOverview extends LitElement {
 
   @query(".detail-name") private _detailName?: HTMLElement;
 
-  @queryAll("ha-md-list-item")
+  @queryAll("ha-list-item-button")
   private _listItems!: NodeListOf<HTMLElement>;
 
   private _peekObserver?: ResizeObserver;
@@ -726,13 +726,13 @@ export class HuiMapOverview extends LitElement {
         role="tabpanel"
         aria-labelledby="tab-${tab}"
       >
-        <ha-md-list>
+        <ha-list-base>
           ${items.map((stateObj) =>
             tab === "zones"
               ? this._renderZone(stateObj)
               : this._renderEntity(stateObj)
           )}
-        </ha-md-list>
+        </ha-list-base>
       </div>
     `;
   }
@@ -743,8 +743,7 @@ export class HuiMapOverview extends LitElement {
     const picture = stateObj.attributes.entity_picture;
 
     return html`
-      <ha-md-list-item
-        type="button"
+      <ha-list-item-button
         data-entity-id=${stateObj.entity_id}
         class=${classMap({ "no-location": !location })}
         @click=${this._handleItemClick}
@@ -772,7 +771,7 @@ export class HuiMapOverview extends LitElement {
             format="short"
           ></ha-relative-time>
         </span>
-      </ha-md-list-item>
+      </ha-list-item-button>
     `;
   }
 
@@ -787,8 +786,7 @@ export class HuiMapOverview extends LitElement {
     );
 
     return html`
-      <ha-md-list-item
-        type="button"
+      <ha-list-item-button
         data-entity-id=${stateObj.entity_id}
         @click=${this._handleItemClick}
       >
@@ -813,7 +811,7 @@ export class HuiMapOverview extends LitElement {
                 )
           }
         </span>
-      </ha-md-list-item>
+      </ha-list-item-button>
     `;
   }
 
@@ -987,30 +985,28 @@ export class HuiMapOverview extends LitElement {
       flex-direction: column;
     }
 
-    ha-md-list {
+    ha-list-base {
       flex: 1;
       min-height: 0;
       overflow-y: auto;
-      padding: 0;
       margin-top: var(--ha-space-2);
-      background: none;
       margin-bottom: calc(-1 * var(--sheet-bottom-space, 0px));
       padding-bottom: var(--sheet-bottom-space, 0px);
-      --md-list-item-leading-space: var(--ha-space-2);
-      --md-list-item-trailing-space: var(--ha-space-2);
-      --md-list-item-one-line-container-height: 56px;
-      --md-list-item-two-line-container-height: 64px;
     }
 
-    ha-md-list-item {
+    ha-list-item-button {
       border-radius: var(--ha-border-radius-lg);
-      --md-list-item-supporting-text-size: var(--ha-font-size-s);
-      --md-list-item-label-text-weight: var(--ha-font-weight-medium);
-      --ha-md-list-item-gap: var(--ha-space-3);
+      --ha-list-item-focus-radius: var(--ha-border-radius-lg);
+      --ha-row-item-gap: var(--ha-space-3);
+      --ha-row-item-padding-inline: var(--ha-space-2);
     }
 
-    ha-md-list-item.no-location {
-      --md-sys-color-on-surface: var(--secondary-text-color);
+    ha-list-item-button::part(headline) {
+      font-weight: var(--ha-font-weight-medium);
+    }
+
+    ha-list-item-button.no-location {
+      color: var(--secondary-text-color);
     }
 
     .avatar {

src/panels/lovelace/components/hui-entity-editor.ts

@@ -8,6 +8,8 @@ import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-sortable";
+import "../../../components/item/ha-list-item-base";
+import "../../../components/list/ha-list-base";
 import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity/entity";
 import type { HomeAssistant } from "../../../types";
 import type { EntityConfig } from "../entity-rows/types";
@@ -45,7 +47,7 @@ export class HuiEntityEditor extends LitElement {
       : { primary: item.entity, secondary: undefined };
 
     return html`
-      <ha-md-list-item class="item">
+      <ha-list-item-base class="item">
         <ha-svg-icon
           class="handle"
           .path=${mdiDragHorizontalVariant}
@@ -75,7 +77,7 @@ export class HuiEntityEditor extends LitElement {
           .path=${mdiClose}
           @click=${this._deleteItem}
         ></ha-icon-button>
-      </ha-md-list-item>
+      </ha-list-item-base>
     `;
   }
 
@@ -123,11 +125,11 @@ export class HuiEntityEditor extends LitElement {
                   draggable-selector=".item"
                   @item-moved=${this._entityMoved}
                 >
-                  <ha-md-list>
+                  <ha-list-base>
                     ${this.entities.map((item, index) =>
                       this._renderItem(item, index)
                     )}
-                  </ha-md-list>
+                  </ha-list-base>
                 </ha-sortable>
               </div>
             `
@@ -230,25 +232,23 @@ export class HuiEntityEditor extends LitElement {
       margin-inline-start: var(--ha-space-1);
       margin-bottom: var(--ha-space-1);
     }
-    ha-md-list {
-      gap: 8px;
-      padding-top: 0;
-      display: flex;
-      flex-direction: column;
+    ha-list-base {
+      --ha-list-gap: var(--ha-space-2);
+      --ha-list-padding: 0 0 var(--ha-space-2);
     }
-    ha-md-list:has(> *) {
+    ha-list-base:has(> *) {
       margin-bottom: var(--ha-space-2);
     }
-    ha-md-list-item {
+    ha-list-item-base {
       border: 1px solid var(--divider-color);
-      border-radius: 8px;
-      --ha-md-list-item-gap: 0;
-      --md-list-item-top-space: 0;
-      --md-list-item-bottom-space: 0;
-      --md-list-item-leading-space: 12px;
-      --md-list-item-trailing-space: 4px;
-      --md-list-item-two-line-container-height: 48px;
-      --md-list-item-one-line-container-height: 48px;
+      border-radius: var(--ha-border-radius-md);
+      --ha-row-item-gap: 0;
+      --ha-row-item-padding-block: 0;
+      --ha-row-item-padding-inline: var(--ha-space-3) var(--ha-space-1);
+    }
+    ha-list-item-base::part(start),
+    ha-list-item-base::part(end) {
+      color: var(--ha-color-text-secondary);
     }
     .handle {
       cursor: move;
@@ -259,8 +259,8 @@ export class HuiEntityEditor extends LitElement {
       margin-bottom: 8px;
       display: block;
     }
-    ha-md-list-item .label,
-    ha-md-list-item .description {
+    ha-list-item-base .label,
+    ha-list-item-base .description {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;

src/resources/theme/typography.globals.ts

@@ -35,11 +35,6 @@ export const typographyStyles = css`
 
     --ha-font-smoothing: antialiased;
     --ha-moz-osx-font-smoothing: grayscale;
-
-    /* Add font to lists since default does not handle non-latin characters */
-    --md-list-item-label-text-font: var(--ha-font-family-body);
-    --md-list-item-supporting-text-font: var(--ha-font-family-body);
-    --md-list-item-trailing-supporting-text-font: var(--ha-font-family-body);
   }
 `;
 

src/state-control/climate/ha-state-control-climate-temperature.ts

@@ -154,7 +154,7 @@ export class HaStateControlClimateTemperature extends LitElement {
   }
 
   private _handleButton(ev) {
-    const target = ev.currentTarget.target as Target;
+    const target = ev.currentTarget.dataset.target as Target;
     const step = ev.currentTarget.step as number;
 
     const defaultValue = target === "high" ? this._max : this._min;
@@ -230,9 +230,9 @@ export class HaStateControlClimateTemperature extends LitElement {
       <div class="buttons">
         <ha-outlined-icon-button
           style=${styleMap({
-            "--md-sys-color-outline": color,
+            "--ha-outlined-icon-button-outline-color": color,
           })}
-          .target=${target}
+          data-target=${target}
           .step=${-this._step}
           @click=${this._handleButton}
         >
@@ -240,9 +240,9 @@ export class HaStateControlClimateTemperature extends LitElement {
         </ha-outlined-icon-button>
         <ha-outlined-icon-button
           style=${styleMap({
-            "--md-sys-color-outline": color,
+            "--ha-outlined-icon-button-outline-color": color,
           })}
-          .target=${target}
+          data-target=${target}
           .step=${this._step}
           @click=${this._handleButton}
         >

src/state-control/state-control-circular-slider-style.ts

@@ -75,9 +75,7 @@ export const stateControlCircularSliderStyle = css`
     font-size: 36px;
   }
   .buttons ha-outlined-icon-button {
-    --md-outlined-icon-button-container-width: 48px;
-    --md-outlined-icon-button-container-height: 48px;
-    --md-outlined-icon-button-icon-size: 24px;
+    --ha-icon-button-size: 48px;
   }
   .container.md ha-big-number {
     font-size: 44px;

test/components/ha-selector/ha-selector-object.test.ts

@@ -13,13 +13,13 @@ vi.mock("../../../src/components/ha-input-helper-text", () => {
   return {};
 });
 
-vi.mock("../../../src/components/ha-md-list", () => {
-  customElements.define("ha-md-list", class extends HTMLElement {});
+vi.mock("../../../src/components/list/ha-list-base", () => {
+  customElements.define("ha-list-base", class extends HTMLElement {});
   return {};
 });
 
-vi.mock("../../../src/components/ha-md-list-item", () => {
-  customElements.define("ha-md-list-item", class extends HTMLElement {});
+vi.mock("../../../src/components/item/ha-list-item-base", () => {
+  customElements.define("ha-list-item-base", class extends HTMLElement {});
   return {};
 });