Use ha-combox-box-list-item in all combo box components (#25096)

src/components/device/ha-device-picker.ts

@@ -1,7 +1,7 @@
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -19,7 +19,7 @@ import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
-import "../ha-list-item";
+import "../ha-combo-box-item";
 
 interface Device {
   name: string;
@@ -35,11 +35,14 @@ export type HaDevicePickerDeviceFilterFunc = (
 
 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
-const rowRenderer: ComboBoxLitRenderer<Device> = (item) =>
-  html`<ha-list-item .twoline=${!!item.area}>
-    <span>${item.name}</span>
-    <span slot="secondary">${item.area}</span>
-  </ha-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`
+  <ha-combo-box-item type="button">
+    <span slot="headline">${item.name}</span>
+    ${item.area
+      ? html`<span slot="supporting-text">${item.area}</span>`
+      : nothing}
+  </ha-combo-box-item>
+`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends LitElement {

src/components/entity/ha-statistic-picker.ts

@@ -1,23 +1,23 @@
-import "@material/mwc-list/mwc-list-item";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
+import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
+import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 import type { StatisticsMetaData } from "../../data/recorder";
 import { getStatisticIds, getStatisticLabel } from "../../data/recorder";
-import type { ValueChangedEvent, HomeAssistant } from "../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
+import "../ha-combo-box-item";
 import "../ha-svg-icon";
 import "./state-badge";
-import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
-import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 
 interface StatisticItem extends ScorableTextItem {
   id: string;
@@ -99,16 +99,18 @@ export class HaStatisticPicker extends LitElement {
   @state() private _filteredItems?: StatisticItem[] = undefined;
 
   private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (item) =>
-    html`<mwc-list-item graphic="avatar" twoline>
+    html`<ha-combo-box-item type="button">
       ${item.state
-        ? html`<state-badge
-            slot="graphic"
+        ? html`
+            <state-badge
+              slot="start"
               .stateObj=${item.state}
               .hass=${this.hass}
-          ></state-badge>`
-        : ""}
-      <span>${item.name}</span>
-      <span slot="secondary"
+            ></state-badge>
+          `
+        : html`<span slot="start" style="width: 32px"></span>`}
+      <span slot="headline">${item.name}</span>
+      <span slot="supporting-text"
         >${item.id === "" || item.id === "__missing"
           ? html`<a
               target="_blank"
@@ -120,7 +122,7 @@ export class HaStatisticPicker extends LitElement {
             >`
           : item.id}</span
       >
-    </mwc-list-item>`;
+    </ha-combo-box-item>`;
 
   private _getStatistics = memoizeOne(
     (

src/components/ha-addon-picker.ts

@@ -10,20 +10,23 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./ha-alert";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
-import "./ha-list-item";
+import "./ha-combo-box-item";
 
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) =>
-  html`<ha-list-item twoline graphic="icon">
-    <span>${item.name}</span>
-    <span slot="secondary">${item.slug}</span>
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`
+  <ha-combo-box-item type="button">
+    <span slot="headline">${item.name}</span>
+    <span slot="supporting-text">${item.slug}</span>
     ${item.icon
-      ? html`<img
+      ? html`
+          <img
             alt=""
-          slot="graphic"
+            slot="start"
             .src="/api/hassio/addons/${item.slug}/icon"
-        />`
-      : ""}
-  </ha-list-item>`;
+          />
+        `
+      : nothing}
+  </ha-combo-box-item>
+`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {

src/components/ha-area-floor-picker.ts

@@ -25,6 +25,7 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 import "./ha-floor-icon";
 import "./ha-icon-button";
 import "./ha-list-item";
@@ -125,38 +126,38 @@ export class HaAreaFloorPicker extends LitElement {
   private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
     const rtl = computeRTL(this.hass);
     return html`
-      <ha-list-item
-        graphic="icon"
+      <ha-combo-box-item
+        type="button"
         style=${item.type === "area" && item.hasFloor
-          ? rtl
-            ? "--mdc-list-side-padding-right: 48px;"
-            : "--mdc-list-side-padding-left: 48px;"
+          ? "--md-list-item-leading-space: 48px;"
           : ""}
       >
         ${item.type === "area" && item.hasFloor
-          ? html`<ha-tree-indicator
+          ? html`
+              <ha-tree-indicator
                 style=${styleMap({
                   width: "48px",
                   position: "absolute",
                   top: "0px",
-                left: rtl ? undefined : "8px",
-                right: rtl ? "8px" : undefined,
+                  left: rtl ? undefined : "4px",
+                  right: rtl ? "4px" : undefined,
                   transform: rtl ? "scaleX(-1)" : "",
                 })}
                 .end=${item.lastArea}
-              slot="graphic"
-            ></ha-tree-indicator>`
+                slot="start"
+              ></ha-tree-indicator>
+            `
           : nothing}
         ${item.type === "floor"
-          ? html`<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>`
+          ? html`<ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>`
           : item.icon
-            ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
+            ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
             : html`<ha-svg-icon
-                slot="graphic"
+                slot="start"
                 .path=${mdiTextureBox}
               ></ha-svg-icon>`}
         ${item.name}
-      </ha-list-item>
+      </ha-combo-box-item>
     `;
   };
 

src/components/ha-area-picker.ts

@@ -4,7 +4,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -24,22 +23,21 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 import "./ha-icon-button";
 import "./ha-list-item";
 import "./ha-svg-icon";
 
 type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 
-const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
-  html`<ha-list-item
-    graphic="icon"
-    class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
-  >
+const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) => html`
+  <ha-combo-box-item type="button">
     ${item.icon
-      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`}
+      ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+      : html`<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>`}
     ${item.name}
-  </ha-list-item>`;
+  </ha-combo-box-item>
+`;
 
 const ADD_NEW_ID = "___ADD_NEW___";
 const NO_ITEMS_ID = "___NO_ITEMS___";

src/components/ha-combo-box-item.ts

@@ -11,6 +11,7 @@ export class HaComboBoxItem extends HaMdListItem {
     ...super.styles,
     css`
       :host {
+        --md-list-item-one-line-container-height: 48px;
         --md-list-item-two-line-container-height: 64px;
       }
       :host([border-top]) md-item {
@@ -29,7 +30,8 @@ export class HaComboBoxItem extends HaMdListItem {
         font-size: 12px;
         white-space: nowrap;
       }
-      ::slotted(state-badge) {
+      ::slotted(state-badge),
+      ::slotted(img) {
         width: 32px;
         height: 32px;
       }

src/components/ha-combo-box.ts

@@ -16,8 +16,8 @@ import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
+import "./ha-combo-box-item";
 import "./ha-icon-button";
-import "./ha-list-item";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
@@ -216,10 +216,11 @@ export class HaComboBox extends LitElement {
 
   private _defaultRowRenderer: ComboBoxLitRenderer<
     string | Record<string, any>
-  > = (item) =>
-    html`<ha-list-item>
+  > = (item) => html`
+    <ha-combo-box-item type="button">
       ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </ha-list-item>`;
+    </ha-combo-box-item>
+  `;
 
   private _clearValue(ev: Event) {
     ev.stopPropagation();

src/components/ha-config-entry-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-list/mwc-list-item";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -11,6 +10,7 @@ import type { ValueChangedEvent, HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 
 export interface ConfigEntryExtended extends ConfigEntry {
   localized_domain_name?: string;
@@ -48,18 +48,20 @@ class HaConfigEntryPicker extends LitElement {
     this._getConfigEntries();
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (item) =>
-    html`<mwc-list-item twoline graphic="icon">
-      <span
-        >${item.title ||
+  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
+    item
+  ) => html`
+    <ha-combo-box-item type="button">
+      <span slot="headline">
+        ${item.title ||
         this.hass.localize(
           "ui.panel.config.integrations.config_entry.unnamed_entry"
-        )}</span
-      >
-      <span slot="secondary">${item.localized_domain_name}</span>
+        )}
+      </span>
+      <span slot="supporting-text">${item.localized_domain_name}</span>
       <img
         alt=""
-        slot="graphic"
+        slot="start"
         src=${brandsUrl({
           domain: item.domain,
           type: "icon",
@@ -70,7 +72,8 @@ class HaConfigEntryPicker extends LitElement {
         @error=${this._onImageError}
         @load=${this._onImageLoad}
       />
-    </mwc-list-item>`;
+    </ha-combo-box-item>
+  `;
 
   protected render() {
     if (!this._configEntries) {

src/components/ha-floor-picker.ts

@@ -3,7 +3,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -28,9 +27,9 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 import "./ha-floor-icon";
 import "./ha-icon-button";
-import "./ha-list-item";
 
 type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
 
@@ -38,14 +37,12 @@ const ADD_NEW_ID = "___ADD_NEW___";
 const NO_FLOORS_ID = "___NO_FLOORS___";
 const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
 
-const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) =>
-  html`<ha-list-item
-    graphic="icon"
-    class=${classMap({ "add-new": item.floor_id === ADD_NEW_ID })}
-  >
-    <ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>
+const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) => html`
+  <ha-combo-box-item type="button">
+    <ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>
     ${item.name}
-  </ha-list-item>`;
+  </ha-combo-box-item>
+`;
 
 @customElement("ha-floor-picker")
 export class HaFloorPicker extends LitElement {

src/components/ha-icon-picker.ts

@@ -11,8 +11,8 @@ import { fireEvent } from "../common/dom/fire_event";
 import { customIcons } from "../data/custom_icons";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./ha-combo-box";
-import "./ha-list-item";
 import "./ha-icon";
+import "./ha-combo-box-item";
 
 interface IconItem {
   icon: string;
@@ -67,11 +67,12 @@ const loadCustomIconItems = async (iconsetPrefix: string) => {
   }
 };
 
-const rowRenderer: ComboBoxLitRenderer<IconItem | RankedIcon> = (item) =>
-  html`<ha-list-item graphic="avatar">
-    <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
+const rowRenderer: ComboBoxLitRenderer<IconItem | RankedIcon> = (item) => html`
+  <ha-combo-box-item type="button">
+    <ha-icon .icon=${item.icon} slot="start"></ha-icon>
     ${item.icon}
-  </ha-list-item>`;
+  </ha-combo-box-item>
+`;
 
 @customElement("ha-icon-picker")
 export class HaIconPicker extends LitElement {

src/components/ha-label-picker.ts

@@ -3,7 +3,6 @@ import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -26,8 +25,8 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 import "./ha-icon-button";
-import "./ha-list-item";
 import "./ha-svg-icon";
 
 type ScorableLabelItem = ScorableTextItem & LabelRegistryEntry;
@@ -36,16 +35,14 @@ const ADD_NEW_ID = "___ADD_NEW___";
 const NO_LABELS_ID = "___NO_LABELS___";
 const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
 
-const rowRenderer: ComboBoxLitRenderer<LabelRegistryEntry> = (item) =>
-  html`<ha-list-item
-    graphic="icon"
-    class=${classMap({ "add-new": item.label_id === ADD_NEW_ID })}
-  >
+const rowRenderer: ComboBoxLitRenderer<LabelRegistryEntry> = (item) => html`
+  <ha-combo-box-item type="button">
     ${item.icon
-      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
+      ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
       : nothing}
     ${item.name}
-  </ha-list-item>`;
+  </ha-combo-box-item>
+`;
 
 @customElement("ha-label-picker")
 export class HaLabelPicker extends SubscribeMixin(LitElement) {

src/components/ha-navigation-picker.ts

@@ -1,7 +1,6 @@
-import "@material/mwc-list/mwc-list-item";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
@@ -10,6 +9,7 @@ import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
 import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
 import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 import "./ha-icon";
 
 interface NavigationItem {
@@ -21,11 +21,13 @@ interface NavigationItem {
 const DEFAULT_ITEMS: NavigationItem[] = [];
 
 const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
-  <mwc-list-item graphic="icon" .twoline=${!!item.title}>
-    <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
-    <span>${item.title || item.path}</span>
-    <span slot="secondary">${item.path}</span>
-  </mwc-list-item>
+  <ha-combo-box-item type="button">
+    <ha-icon .icon=${item.icon} slot="start"></ha-icon>
+    <span slot="headline">${item.title || item.path}</span>
+    ${item.title
+      ? html`<span slot="supporting-text">${item.path}</span>`
+      : nothing}
+  </ha-combo-box-item>
 `;
 
 const createViewNavigationItem = (

src/components/ha-service-picker.ts

@@ -7,7 +7,7 @@ import type { LocalizeFunc } from "../common/translations/localize";
 import { domainToName } from "../data/integration";
 import type { HomeAssistant } from "../types";
 import "./ha-combo-box";
-import "./ha-list-item";
+import "./ha-combo-box-item";
 import "./ha-service-icon";
 import { getServiceIcons } from "../data/icons";
 
@@ -29,18 +29,19 @@ class HaServicePicker extends LitElement {
   }
 
   private _rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> =
-    (item) =>
-      html`<ha-list-item twoline graphic="icon">
+    (item) => html`
+      <ha-combo-box-item type="button">
         <ha-service-icon
-          slot="graphic"
+          slot="start"
           .hass=${this.hass}
           .service=${item.service}
         ></ha-service-icon>
-        <span>${item.name}</span>
-        <span slot="secondary"
+        <span slot="headline">${item.name}</span>
+        <span slot="supporting-text"
           >${item.name === item.service ? "" : item.service}</span
         >
-      </ha-list-item>`;
+      </ha-combo-box-item>
+    `;
 
   protected render() {
     return html`

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -1,17 +1,15 @@
-import "@material/mwc-list/mwc-list-item";
 import { mdiOpenInNew } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-spinner";
 import "../../../components/ha-combo-box";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-password-field";
+import "../../../components/ha-spinner";
 import "../../../components/ha-textfield";
 import type {
   ApplicationCredential,
@@ -33,11 +31,6 @@ interface Domain {
   name: string;
 }
 
-const rowRenderer: ComboBoxLitRenderer<Domain> = (item) =>
-  html`<mwc-list-item>
-    <span>${item.name}</span>
-  </mwc-list-item>`;
-
 @customElement("dialog-add-application-credential")
 export class DialogAddApplicationCredential extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -171,7 +164,6 @@ export class DialogAddApplicationCredential extends LitElement {
                   "ui.panel.config.application_credentials.editor.domain"
                 )}
                 .value=${this._domain}
-                .renderer=${rowRenderer}
                 .items=${this._domains}
                 item-id-path="id"
                 item-value-path="id"

src/panels/config/category/ha-category-picker.ts

@@ -4,15 +4,14 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { ScorableTextItem } from "../../../common/string/filter/sequence-matching";
 import { fuzzyFilterSort } from "../../../common/string/filter/sequence-matching";
 import "../../../components/ha-combo-box";
 import type { HaComboBox } from "../../../components/ha-combo-box";
+import "../../../components/ha-combo-box-item";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import type { CategoryRegistryEntry } from "../../../data/category_registry";
 import {
@@ -29,16 +28,14 @@ const ADD_NEW_ID = "___ADD_NEW___";
 const NO_CATEGORIES_ID = "___NO_CATEGORIES___";
 const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
 
-const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) =>
-  html`<ha-list-item
-    graphic="icon"
-    class=${classMap({ "add-new": item.category_id === ADD_NEW_ID })}
-  >
+const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) => html`
+  <ha-combo-box-item type="button">
     ${item.icon
-      ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : html`<ha-svg-icon .path=${mdiTag} slot="graphic"></ha-svg-icon>`}
+      ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+      : html`<ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>`}
     ${item.name}
-  </ha-list-item>`;
+  </ha-combo-box-item>
+`;
 
 @customElement("ha-category-picker")
 export class HaCategoryPicker extends SubscribeMixin(LitElement) {