Add active property

gallery/src/demos/demo-ha-chip.ts

@@ -1,55 +1,177 @@
-import { mdiHomeAssistant } from "@mdi/js";
+import "../../../src/components/ha-switch";
+import "../../../src/components/ha-formfield";
+import { mdiClose, mdiHomeAssistant } from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-chip";
+import "../../../src/components/ha-chip-set";
+import type { HaChipSetItem } from "../../../src/components/ha-chip-set";
 import "../../../src/components/ha-svg-icon";
 
-const chips: {
-  icon?: string;
-  content?: string;
-}[] = [
+const chips: HaChipSetItem[] = [
+  {
+    leadingIcon: mdiHomeAssistant,
+  },
+  {
+    label: "Demo chip",
+  },
+  {
+    leadingIcon: mdiHomeAssistant,
+    label: "Demo chip",
+  },
+  {
+    leadingIcon: mdiHomeAssistant,
+    label: "Demo chip",
+    active: true,
+  },
   {},
   {
-    icon: mdiHomeAssistant,
+    trailingIcon: mdiClose,
+    label: "Demo chip",
   },
   {
-    content: "Content",
+    label: "Automation",
   },
   {
-    icon: mdiHomeAssistant,
-    content: "Content",
+    label: "Blueprint",
+  },
+  {
+    label: "Script",
+  },
+  {
+    label: "Scene",
+  },
+  {
+    label: "Person",
   },
 ];
 
 @customElement("demo-ha-chip")
 export class DemoHaChip extends LitElement {
+  @state() standaloneIsDisabled = false;
+
+  @state() standaloneIsOutlined = false;
+
+  @state() standaloneIsActive = false;
+
   protected render(): TemplateResult {
     return html`
-      <ha-card header="ha-chip demo">
+      <div class="filters">
+        <ha-formfield label="Disable standalone chips">
+          <ha-switch @change=${this._toggleDisable}></ha-switch>
+        </ha-formfield>
+        <ha-formfield label="Outline standalone chips">
+          <ha-switch @change=${this._toggleOutline}></ha-switch>
+        </ha-formfield>
+        <ha-formfield label="Activate standalone chips">
+          <ha-switch @change=${this._toggleActive}></ha-switch>
+        </ha-formfield>
+      </div>
+      <ha-card header="Standalone ha-chip demo">
         <div class="card-content">
-          ${chips.map(
-            (chip) => html`
-              <ha-chip .hasIcon=${chip.icon !== undefined}>
-                ${chip.icon
-                  ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                    </ha-svg-icon>`
-                  : ""}
-                ${chip.content}
-              </ha-chip>
-            `
-          )}
+          <div class="standalone">
+            <span>Simple:</span>
+            <ha-chip
+              .active=${this.standaloneIsActive}
+              .outlined=${this.standaloneIsOutlined}
+              ?disabled=${this.standaloneIsDisabled}
+              >Demo chip</ha-chip
+            >
+          </div>
+
+          <div class="standalone">
+            <span>Label property:</span>
+            <ha-chip
+              .active=${this.standaloneIsActive}
+              .outlined=${this.standaloneIsOutlined}
+              ?disabled=${this.standaloneIsDisabled}
+              label="Demo chip"
+            ></ha-chip>
+          </div>
+
+          <div class="standalone">
+            <span>With leadingIcon:</span>
+            <ha-chip
+              .active=${this.standaloneIsActive}
+              .leadingIcon=${mdiHomeAssistant}
+              .outlined=${this.standaloneIsOutlined}
+              ?disabled=${this.standaloneIsDisabled}
+              >Demo chip</ha-chip
+            >
+          </div>
+
+          <div class="standalone">
+            <span>With trailingIcon property:</span>
+            <ha-chip
+              .active=${this.standaloneIsActive}
+              .trailingIcon=${mdiHomeAssistant}
+              .outlined=${this.standaloneIsOutlined}
+              ?disabled=${this.standaloneIsDisabled}
+              >Demo chip</ha-chip
+            >
+          </div>
+
+          <div class="standalone">
+            <span>With trailing-icon slot:</span>
+            <ha-chip
+              .active=${this.standaloneIsActive}
+              .outlined=${this.standaloneIsOutlined}
+              ?disabled=${this.standaloneIsDisabled}
+            >
+              Demo chip
+              <ha-svg-icon
+                slot="trailing-icon"
+                class="trailing"
+                .path=${mdiHomeAssistant}
+              ></ha-svg-icon>
+            </ha-chip>
+          </div>
+        </div>
+      </ha-card>
+
+      <ha-card header="ha-chip-set demo">
+        <div class="card-content">
+          <ha-chip-set .items=${chips}> </ha-chip-set>
+          <ha-chip-set
+            .items=${chips.map((chip) => ({ ...chip, outlined: true }))}
+          >
+          </ha-chip-set>
         </div>
       </ha-card>
     `;
   }
 
+  private _toggleActive() {
+    this.standaloneIsActive = !this.standaloneIsActive;
+  }
+
+  private _toggleDisable() {
+    this.standaloneIsDisabled = !this.standaloneIsDisabled;
+  }
+
+  private _toggleOutline() {
+    this.standaloneIsOutlined = !this.standaloneIsOutlined;
+  }
+
   static get styles() {
     return css`
       ha-card {
         max-width: 600px;
         margin: 24px auto;
       }
+      .standalone {
+        margin: 4px 0;
+        display: flex;
+        justify-content: space-between;
+      }
+      .filters {
+        margin: 16px;
+      }
+      ha-formfield {
+        margin: 12px 0;
+        display: block;
+      }
     `;
   }
 }

gallery/src/ha-gallery.js

@@ -181,6 +181,24 @@ class HaGallery extends PolymerElement {
       this.$.notifications.showDialog({ message: "Alert action clicked" })
     );
 
+    this.addEventListener("chip-clicked", (ev) =>
+      this.$.notifications.showDialog({
+        message: `Chip ${ev.detail.index} clicked `,
+      })
+    );
+
+    this.addEventListener("chip-clicked", () =>
+      this.$.notifications.showDialog({
+        message: "Chip clicked",
+      })
+    );
+
+    this.addEventListener("chip-clicked-trailing", () =>
+      this.$.notifications.showDialog({
+        message: "Chip trailing icon clicked",
+      })
+    );
+
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
         this.$.notifications.showDialog({

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -31,7 +31,7 @@ import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-chip";
+import "../../../../src/components/ha-chip-set";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -125,6 +125,137 @@ class HassioAddonInfo extends LitElement {
         )}`,
       },
     ];
+    const capabilities = [
+      {
+        id: "rating",
+        icon: RATING_ICON[this.addon.rating],
+        class: [6, 5].includes(Number(this.addon.rating))
+          ? "green"
+          : [3, 4].includes(Number(this.addon.rating))
+          ? "yellow"
+          : "red",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.rating"
+        ),
+      },
+    ];
+
+    if (this.addon.stage !== "stable") {
+      capabilities.push({
+        id: "rating",
+        icon: STAGE_ICON[this.addon.stage],
+        class:
+          this.addon.stage === "experimental"
+            ? "yellow"
+            : this.addon.stage === "deprecated"
+            ? "red"
+            : "",
+        label: this.supervisor.localize(
+          `addon.dashboard.capability.stages.${this.addon.stage}`
+        ),
+      });
+    }
+
+    if (this.addon.host_network) {
+      capabilities.push({
+        id: "host_network",
+        icon: mdiNetwork,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.host"
+        ),
+      });
+    }
+
+    if (this.addon.full_access) {
+      capabilities.push({
+        id: "full_access",
+        icon: mdiChip,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.hardware"
+        ),
+      });
+    }
+
+    if (this.addon.homeassistant_api) {
+      capabilities.push({
+        id: "homeassistant_api",
+        icon: mdiHomeAssistant,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.core"
+        ),
+      });
+    }
+
+    if (this._computeHassioApi) {
+      capabilities.push({
+        id: "hassio_api",
+        icon: mdiHomeAssistant,
+        class: "",
+        label:
+          this.supervisor.localize(
+            `addon.dashboard.capability.role.${this.addon.hassio_role}`
+          ) || this.addon.hassio_role,
+      });
+    }
+
+    if (this.addon.docker_api) {
+      capabilities.push({
+        id: "docker_api",
+        icon: mdiDocker,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.docker"
+        ),
+      });
+    }
+
+    if (this.addon.host_pid) {
+      capabilities.push({
+        id: "host_pid",
+        icon: mdiPound,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.host_pid"
+        ),
+      });
+    }
+
+    if (this.addon.apparmor !== "default") {
+      capabilities.push({
+        id: "apparmor",
+        icon: mdiShield,
+        class: this._computeApparmorClassName,
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.apparmor"
+        ),
+      });
+    }
+
+    if (this.addon.auth_api) {
+      capabilities.push({
+        id: "auth_api",
+        icon: mdiKey,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.auth"
+        ),
+      });
+    }
+
+    if (this.addon.ingress) {
+      capabilities.push({
+        id: "ingress",
+        icon: mdiCursorDefaultClickOutline,
+        class: "",
+        label: this.supervisor.localize(
+          "addon.dashboard.capability.label.ingress"
+        ),
+      });
+    }
+
     return html`
       ${this.addon.update_available
         ? html`
@@ -262,160 +393,18 @@ class HassioAddonInfo extends LitElement {
           </div>
 
           <div class="capabilities">
-            ${this.addon.stage !== "stable"
-              ? html` <ha-chip
-                  hasIcon
-                  class=${classMap({
-                    yellow: this.addon.stage === "experimental",
-                    red: this.addon.stage === "deprecated",
-                  })}
+            <ha-chip-set>
+              ${capabilities.map(
+                (capability) => html`<ha-chip
                   @click=${this._showMoreInfo}
-                  id="stage"
-                >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${STAGE_ICON[this.addon.stage]}
-                  >
-                  </ha-svg-icon>
-                  ${this.supervisor.localize(
-                    `addon.dashboard.capability.stages.${this.addon.stage}`
-                  )}
-                </ha-chip>`
-              : ""}
-
-            <ha-chip
-              hasIcon
-              class=${classMap({
-                green: [5, 6].includes(Number(this.addon.rating)),
-                yellow: [3, 4].includes(Number(this.addon.rating)),
-                red: [1, 2].includes(Number(this.addon.rating)),
-              })}
-              @click=${this._showMoreInfo}
-              id="rating"
-            >
-              <ha-svg-icon slot="icon" .path=${RATING_ICON[this.addon.rating]}>
-              </ha-svg-icon>
-
-              ${this.supervisor.localize(
-                "addon.dashboard.capability.label.rating"
+                  .leadingIcon=${capability.icon}
+                  .label=${capability.label}
+                  .id=${capability.id}
+                  class=${capability.class}
+                  outlined
+                ></ha-chip>`
               )}
-            </ha-chip>
-            ${this.addon.host_network
-              ? html`
-                  <ha-chip
-                    hasIcon
-                    @click=${this._showMoreInfo}
-                    id="host_network"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiNetwork}> </ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.host"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.full_access
-              ? html`
-                  <ha-chip
-                    hasIcon
-                    @click=${this._showMoreInfo}
-                    id="full_access"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiChip}></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.hardware"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.homeassistant_api
-              ? html`
-                  <ha-chip
-                    hasIcon
-                    @click=${this._showMoreInfo}
-                    id="homeassistant_api"
-                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiHomeAssistant}
-                    ></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.core"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this._computeHassioApi
-              ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="hassio_api">
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiHomeAssistant}
-                    ></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      `addon.dashboard.capability.role.${this.addon.hassio_role}`
-                    ) || this.addon.hassio_role}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.docker_api
-              ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="docker_api">
-                    <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.docker"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.host_pid
-              ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="host_pid">
-                    <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.host_pid"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.apparmor !== "default"
-              ? html`
-                  <ha-chip
-                    hasIcon
-                    @click=${this._showMoreInfo}
-                    class=${this._computeApparmorClassName}
-                    id="apparmor"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiShield}></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.apparmor"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.auth_api
-              ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="auth_api">
-                    <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.auth"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
-            ${this.addon.ingress
-              ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="ingress">
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiCursorDefaultClickOutline}
-                    ></ha-svg-icon>
-                    ${this.supervisor.localize(
-                      "addon.dashboard.capability.label.ingress"
-                    )}
-                  </ha-chip>
-                `
-              : ""}
+            </ha-chip-set>
           </div>
 
           <div class="description light-color">
@@ -1183,8 +1172,6 @@ class HassioAddonInfo extends LitElement {
         }
         ha-chip {
           text-transform: capitalize;
-          --ha-chip-text-color: var(--text-primary-color);
-          --ha-chip-background-color: var(--primary-color);
         }
 
         .red {
@@ -1200,7 +1187,7 @@ class HassioAddonInfo extends LitElement {
           --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
         }
         .capabilities {
-          margin-bottom: 16px;
+          margin: -16px 0 8px;
         }
         .card-actions {
           justify-content: space-between;

src/components/ha-chip-set.ts

@@ -9,49 +9,47 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 import "./ha-chip";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
+export interface HaChipSetItem {
+  label?: string;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  outlined?: boolean;
+  active?: boolean;
 }
 
 @customElement("ha-chip-set")
 export class HaChipSet extends LitElement {
-  @property() public items = [];
+  @property({ attribute: false }) public items?: HaChipSetItem[];
 
   protected render(): TemplateResult {
-    if (this.items.length === 0) {
-      return html``;
-    }
     return html`
       <div class="mdc-chip-set">
-        ${this.items.map(
-          (item, idx) =>
-            html`
-              <ha-chip .index=${idx} @click=${this._handleClick}>
-                ${item}
-              </ha-chip>
-            `
-        )}
+        ${this.items
+          ? this.items.map(
+              (item, idx) =>
+                html`
+                  <ha-chip
+                    .index=${idx}
+                    .active=${item.active || false}
+                    .label=${item.label}
+                    .leadingIcon=${item.leadingIcon}
+                    .trailingIcon=${item.trailingIcon}
+                    ?outlined=${item.outlined}
+                  >
+                  </ha-chip>
+                `
+            )
+          : html`<slot></slot>`}
       </div>
     `;
   }
 
-  private _handleClick(ev): void {
-    fireEvent(this, "chip-clicked", {
-      index: ev.currentTarget.index,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
-
-      ha-chip {
+      .mdc-chip-set > ha-chip, slot::slotted(ha-chip) {
         margin: 4px;
       }
     `;

src/components/ha-chip.ts

@@ -1,4 +1,5 @@
-// @ts-ignore
+import "./ha-circular-progress";
+import "./ha-svg-icon"; // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import {
   css,
@@ -9,56 +10,173 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
 
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "chip-clicked": { index: string };
+    "chip-clicked": { index: number | undefined };
+    "chip-clicked-trailing": { index: number | undefined };
   }
 }
 
 @customElement("ha-chip")
 export class HaChip extends LitElement {
-  @property() public index = 0;
+  @property({ type: Number }) public index?: number;
 
-  @property({ type: Boolean }) public hasIcon = false;
+  @property({ type: Boolean }) public outlined = false;
+
+  @property({ type: Boolean }) public active = false;
+
+  @property() public label?: string;
+
+  @property() public leadingIcon?: string;
+
+  @property() public trailingIcon?: string;
 
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip" .index=${this.index}>
-        ${this.hasIcon
-          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
-              <slot name="icon"></slot>
-            </div>`
-          : null}
+      <div
+        class="mdc-chip ${this.outlined ? "outlined" : ""}"
+        @click=${this._handleClick}
+      >
+        ${this.leadingIcon
+          ? html`<span role="gridcell">
+              <span role="button" tabindex="0" class="mdc-chip__primary-action">
+                ${this.active
+                  ? html`<ha-circular-progress alt="active" size="tiny" active>
+                    </ha-circular-progress>`
+                  : html`<ha-svg-icon
+                      class="mdc-chip__icon mdc-chip__icon--leading"
+                      .path=${this.leadingIcon}
+                    >
+                    </ha-svg-icon>`}
+              </span>
+            </span>`
+          : ""}
         <div class="mdc-chip__ripple"></div>
         <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span class="mdc-chip__text"><slot></slot></span>
+          <span role="row" tabindex="0" class="mdc-chip__primary-action">
+            <span class="mdc-chip__text">
+              ${this.label || html`<slot></slot>`}
+            </span>
+          </span>
+        </span>
+        <span role="gridcell">
+          <span role="button" tabindex="-1" class="mdc-chip__primary-action">
+            ${this.trailingIcon
+              ? html`<ha-svg-icon
+                  @click=${this._handleTrailingClick}
+                  class="mdc-chip__icon mdc-chip__icon--trailing"
+                  .path=${this.trailingIcon}
+                >
+                </ha-svg-icon>`
+              : html`<slot name="trailing-icon"></slot>`}
           </span>
         </span>
       </div>
     `;
   }
 
+  private _handleClick(): void {
+    fireEvent(this, "chip-clicked", { index: this.index });
+  }
+
+  private _handleTrailingClick(): void {
+    fireEvent(this, "chip-clicked-trailing", {
+      index: this.index,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
       .mdc-chip {
-        background-color: var(
-          --ha-chip-background-color,
-          rgba(var(--rgb-primary-text-color), 0.15)
-        );
-        color: var(--ha-chip-text-color, var(--primary-text-color));
+        background-color: var(--ha-chip-background-color, var(--primary-color));
+        color: var(--ha-chip-text-color, var(--text-primary-color));
       }
 
       .mdc-chip:hover {
-        color: var(--ha-chip-text-color, var(--primary-text-color));
+        color: var(--ha-chip-text-color, var(--text-primary-color));
+      }
+
+      .mdc-chip.outlined {
+        margin: 0 -1px !important;
+        border: 1px solid var(--ha-chip-background-color, var(--primary-color));
+        background-color: var(
+          --ha-chip-outlined-background-color,
+          var(--card-background-color)
+        );
+        color: var(--ha-chip-outlined-text-color, var(--primary-text-color));
+      }
+
+      .mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
+        margin-left: -12px !important;
+        margin-right: -2px;
+        color: var(--ha-chip-icon-color, var(--text-primary-color));
+      }
+
+      ha-circular-progress {
+        --mdc-theme-primary: var(
+          --ha-chip-icon-color,
+          var(--text-primary-color)
+        );
+        padding: 8px;
+        margin-left: -12px !important;
+        margin-right: -2px;
+      }
+
+      .mdc-chip.outlined ha-circular-progress {
+        border-radius: 50%;
+        margin-right: 4px;
+        background-color: var(--ha-chip-background-color, var(--primary-color));
+        --mdc-theme-primary: var(
+          --ha-chip-icon-color,
+          var(--text-primary-color)
+        );
+      }
+
+      .mdc-chip.outlined ha-svg-icon,
+      slot[name="trailing-icon"]::slotted(ha-svg-icon) {
+        border-radius: 50%;
+        background-color: var(--ha-chip-background-color, var(--primary-color));
+        color: var(--ha-chip-icon-color, var(--text-primary-color));
+      }
+
+      .mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading {
+        margin-left: -13px !important;
+        color: var(--ha-chip-icon-color, var(--text-primary-color));
+      }
+
+      .mdc-chip__icon.mdc-chip__icon--trailing,
+      slot[name="trailing-icon"]::slotted(ha-svg-icon) {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+        padding: 2px;
+        color: var(--ha-chip-icon-color, var(--text-primary-color));
+        margin-right: -8px;
+        display: inline-flex;
+        align-items: center;
+        --mdc-icon-size: 12px;
+      }
+
+      slot[name="trailing-icon"]::slotted(ha-svg-icon) {
+        margin-left: 4px;
       }
 
       .mdc-chip__icon--leading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: inherit;
+        border-radius: 50%;
+        padding: 6px;
         --mdc-icon-size: 20px;
-        color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
+      }
+      :host([disabled]) .mdc-chip {
+        opacity: var(--light-disabled-opacity);
+        pointer-events: none;
       }
     `;
   }

src/components/ha-target-picker.ts

@@ -1,5 +1,3 @@
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import "@material/mwc-button/mwc-button";
 import {
   mdiClose,
@@ -14,13 +12,13 @@ import {
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { ensureArray } from "../common/ensure-array";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
+import { stateIconPath } from "../common/entity/state_icon_path";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -41,6 +39,7 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./entity/ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-picker";
+import "./ha-chip-set";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 
@@ -114,7 +113,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     if (!this._areas || !this._devices || !this._entities) {
       return html``;
     }
-    return html`<div class="mdc-chip-set items">
+    return html`<ha-chip-set>
         ${this.value?.area_id
           ? ensureArray(this.value.area_id).map((area_id) => {
               const area = this._areas![area_id];
@@ -150,70 +149,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               );
             })
           : ""}
-      </div>
+      </ha-chip-set>
       ${this._renderPicker()}
-      <div class="mdc-chip-set">
-        <div
-          class="mdc-chip area_id add"
+      <ha-chip-set>
+        <ha-chip
+          class="area_id add"
           .type=${"area_id"}
           @click=${this._showPicker}
+          .leadingIcon=${mdiPlus}
+          .label=${this.hass.localize(
+            "ui.components.target-picker.add_area_id"
+          )}
         >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_area_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-        <div
-          class="mdc-chip device_id add"
+        </ha-chip>
+        <ha-chip
+          class="device_id add"
           .type=${"device_id"}
           @click=${this._showPicker}
+          .leadingIcon=${mdiPlus}
+          .label=${this.hass.localize(
+            "ui.components.target-picker.add_device_id"
+          )}
         >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_device_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-        <div
-          class="mdc-chip entity_id add"
+        </ha-chip>
+        <ha-chip
+          class="entity_id add"
           .type=${"entity_id"}
           @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_entity_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-      </div>`;
+          .leadingIcon=${mdiPlus}
+          .label=${this.hass.localize(
+            "ui.components.target-picker.add_entity_id"
+          )}
+        ></ha-chip>
+      </ha-chip-set>`;
   }
 
   private async _showPicker(ev) {
@@ -233,69 +201,59 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     iconPath?: string
   ) {
     return html`
-      <div
-        class="mdc-chip ${classMap({
-          [type]: true,
-        })}"
+      <ha-chip
+        class=${type}
+        .id=${id}
+        .leadingIcon=${iconPath ||
+        entityState?.attributes.icon ||
+        stateIconPath(entityState)}
+        .label=${name}
+        outlined
       >
-        ${iconPath
-          ? html`<ha-svg-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .path=${iconPath}
-            ></ha-svg-icon>`
-          : ""}
-        ${entityState
-          ? html`<ha-state-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .state=${entityState}
-            ></ha-state-icon>`
-          : ""}
-        <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span class="mdc-chip__text">${name}</span>
+        <div slot="trailing-icon">
+          ${type === "entity_id"
+            ? ""
+            : html`
+                <span>
+                  <ha-icon-button
+                    class="expand-btn"
+                    tabindex="-1"
+                    role="button"
+                    .label=${this.hass.localize(
+                      "ui.components.target-picker.expand"
+                    )}
+                    .path=${mdiUnfoldMoreVertical}
+                    hideTitle
+                    .id=${id}
+                    .type=${type}
+                    @click=${this._handleExpand}
+                  ></ha-icon-button>
+                  <paper-tooltip class="expand" animation-delay="0"
+                    >${this.hass.localize(
+                      `ui.components.target-picker.expand_${type}`
+                    )}</paper-tooltip
+                  >
+                </span>
+              `}
+          <span>
+            <ha-icon-button
+              tabindex="-1"
+              role="button"
+              .label=${this.hass.localize("ui.components.target-picker.expand")}
+              .path=${mdiClose}
+              hideTitle
+              .id=${id}
+              .type=${type}
+              @click=${this._handleRemove}
+            ></ha-icon-button>
+            <paper-tooltip animation-delay="0"
+              >${this.hass.localize(
+                `ui.components.target-picker.remove_${type}`
+              )}</paper-tooltip
+            >
           </span>
-        </span>
-        ${type === "entity_id"
-          ? ""
-          : html` <span role="gridcell">
-              <ha-icon-button
-                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
-                tabindex="-1"
-                role="button"
-                .label=${this.hass.localize(
-                  "ui.components.target-picker.expand"
-                )}
-                .path=${mdiUnfoldMoreVertical}
-                hideTooltip
-                .id=${id}
-                .type=${type}
-                @click=${this._handleExpand}
-              ></ha-icon-button>
-              <paper-tooltip class="expand" animation-delay="0"
-                >${this.hass.localize(
-                  `ui.components.target-picker.expand_${type}`
-                )}</paper-tooltip
-              >
-            </span>`}
-        <span role="gridcell">
-          <ha-icon-button
-            class="mdc-chip__icon mdc-chip__icon--trailing"
-            tabindex="-1"
-            role="button"
-            .label=${this.hass.localize("ui.components.target-picker.expand")}
-            .path=${mdiClose}
-            hideTooltip
-            .id=${id}
-            .type=${type}
-            @click=${this._handleRemove}
-          ></ha-icon-button>
-          <paper-tooltip animation-delay="0"
-            >${this.hass.localize(
-              `ui.components.target-picker.remove_${type}`
-            )}</paper-tooltip
-          >
-        </span>
-      </div>
+        </div>
+      </ha-chip>
     `;
   }
 
@@ -528,84 +486,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      ${unsafeCSS(chipStyles)}
-      .mdc-chip {
-        color: var(--primary-text-color);
-      }
-      .items {
-        z-index: 2;
-      }
-      .mdc-chip-set {
-        padding: 4px 0;
-      }
-      .mdc-chip.add {
-        color: rgba(0, 0, 0, 0.87);
-      }
-      .mdc-chip:not(.add) {
-        cursor: default;
-      }
-      .mdc-chip ha-icon-button {
-        --mdc-icon-button-size: 24px;
-        display: flex;
-        align-items: center;
-        outline: none;
-      }
-      .mdc-chip ha-icon-button ha-svg-icon {
-        border-radius: 50%;
-        background: var(--secondary-text-color);
-      }
-      .mdc-chip__icon.mdc-chip__icon--trailing {
-        width: 16px;
-        height: 16px;
-        --mdc-icon-size: 14px;
-        color: var(--secondary-text-color);
-      }
-      .mdc-chip__icon--leading {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        --mdc-icon-size: 20px;
-        border-radius: 50%;
-        padding: 6px;
-        margin-left: -14px !important;
-      }
       .expand-btn {
         margin-right: 0;
       }
-      .mdc-chip.area_id:not(.add) {
-        border: 2px solid #fed6a4;
-        background: var(--card-background-color);
+      ha-chip {
+        --ha-chip-icon-color: var(--secondary-text-color);
+        --ha-chip-text-color: var(--primary-text-color);
       }
-      .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.area_id.add {
-        background: #fed6a4;
-      }
-      .mdc-chip.device_id:not(.add) {
-        border: 2px solid #a8e1fb;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.device_id.add {
-        background: #a8e1fb;
-      }
-      .mdc-chip.entity_id:not(.add) {
-        border: 2px solid #d2e7b9;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.entity_id.add {
-        background: #d2e7b9;
-      }
-      .mdc-chip:hover {
+      ha-chip:hover {
         z-index: 5;
       }
+      ha-icon-button {
+        --mdc-icon-size: 18px;
+        --mdc-icon-button-size: 24px;
+        color: var(--secondary-text-color);
+        outline: none;
+      }
+      ha-chip > div {
+        margin-right: -8px;
+        display: inline-flex;
+        align-items: center;
+      }
+      ha-chip.area_id {
+        --ha-chip-background-color: #fed6a4;
+      }
+      ha-chip.device_id {
+        --ha-chip-background-color: #a8e1fb;
+      }
+      ha-chip.entity_id {
+        --ha-chip-background-color: #d2e7b9;
+      }
       paper-tooltip.expand {
         min-width: 200px;
       }
-      :host([disabled]) .mdc-chip {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
     `;
   }
 }

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -269,23 +269,15 @@ export class QuickBar extends LitElement {
         class="command-item"
         hasMeta
       >
-        <span>
+        <span class="command-entry">
           <ha-chip
             .label=${item.categoryText}
-            hasIcon
+            .leadingIcon=${item.iconPath}
             class="command-category ${item.categoryKey}"
           >
-            ${item.iconPath
-              ? html`<ha-svg-icon
-                  .path=${item.iconPath}
-                  slot="icon"
-                ></ha-svg-icon>`
-              : ""}
-            ${item.categoryText}</ha-chip
-          >
+          </ha-chip>
+          ${item.primaryText}
         </span>
-
-        <span class="command-text">${item.primaryText}</span>
       </mwc-list-item>
     `;
   }
@@ -607,6 +599,10 @@ export class QuickBar extends LitElement {
           }
         }
 
+        ha-chip {
+          margin-right: 8px;
+        }
+
         ha-icon.entity,
         ha-svg-icon.entity {
           margin-left: 20px;
@@ -623,7 +619,6 @@ export class QuickBar extends LitElement {
         }
 
         .command-category {
-          --ha-chip-icon-color: #585858;
           --ha-chip-text-color: #212121;
         }
 
@@ -639,8 +634,9 @@ export class QuickBar extends LitElement {
           --ha-chip-background-color: var(--warning-color);
         }
 
-        span.command-text {
-          margin-left: 8px;
+        span.command-entry {
+          display: flex;
+          align-items: center;
         }
 
         mwc-list-item {

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -57,9 +57,9 @@ export abstract class HaDeviceAutomationCard<
       <div class="content">
         <ha-chip-set
           @chip-clicked=${this._handleAutomationClicked}
-          .items=${this.automations.map((automation) =>
-            this._localizeDeviceAutomation(this.hass, automation)
-          )}
+          .items=${this.automations.map((automation) => ({
+            label: this._localizeDeviceAutomation(this.hass, automation),
+          }))}
         >
         </ha-chip-set>
       </div>

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -154,13 +154,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           stateObj.attributes.friendly_name ||
           stateLabel}
           <ha-chip
-            hasIcon
+            .leadingIcon=${alarmPanelIcon(stateObj.state)}
+            .label=${stateLabel}
             class=${classMap({ [stateObj.state]: true })}
             @click=${this._handleMoreInfo}
           >
-            <ha-svg-icon slot="icon" .path=${alarmPanelIcon(stateObj.state)}>
-            </ha-svg-icon>
-            ${stateLabel}
           </ha-chip>
         </h1>
         <div id="armActions" class="actions">