+
Action chip
+
+ ${chips.map(
+ (chip) => html`
+
+ ${chip.icon
+ ? html`
+ `
+ : nothing}
+
+ `
+ )}
+ ${chips.map(
+ (chip) => html`
+
+ ${chip.icon
+ ? html`
+ `
+ : nothing}
+
+ `
+ )}
+
+
Filter chip
+
+ ${chips.map(
+ (chip) => html`
+
+ ${chip.icon
+ ? html`
+ `
+ : nothing}
+
+ `
+ )}
+ ${chips.map(
+ (chip) => html`
+
+ ${chip.icon
+ ? html`
+ `
+ : nothing}
+
+ `
+ )}
+
+
Input chip
${chips.map(
(chip) => html`
-
+
${chip.icon
? html`
`
: ""}
${chip.content}
-
+
+ `
+ )}
+ ${chips.map(
+ (chip) => html`
+
+ ${chip.icon
+ ? html`
+ `
+ : nothing}
+
`
)}
@@ -68,12 +108,10 @@ export class DemoHaChips extends LitElement {
max-width: 600px;
margin: 24px auto;
}
- ha-chip {
- margin-bottom: 4px;
- }
.card-content {
display: flex;
flex-direction: column;
+ align-items: flex-start;
}
`;
}
diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts
index 9e62a6ae91d0..1ab1d7df159f 100644
--- a/gallery/src/pages/misc/entity-state.ts
+++ b/gallery/src/pages/misc/entity-state.ts
@@ -10,7 +10,6 @@ import { computeStateDisplay } from "../../../../src/common/entity/compute_state
import "../../../../src/components/data-table/ha-data-table";
import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
import "../../../../src/components/entity/state-badge";
-import "../../../../src/components/ha-chip";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index f602ad24d898..074b8e08daee 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -31,8 +31,8 @@ import { navigate } from "../../../../src/common/navigate";
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/chips/ha-chip-set";
+import "../../../../src/components/chips/ha-assist-chip";
import "../../../../src/components/ha-markdown";
import "../../../../src/components/ha-settings-row";
import "../../../../src/components/ha-svg-icon";
@@ -78,6 +78,7 @@ import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-has
import { hassioStyle } from "../../resources/hassio-style";
import "../../update-available/update-available-card";
import { addonArchIsSupported, extractChangelog } from "../../util/addon";
+import { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter";
const STAGE_ICON = {
stable: mdiCheckCircle,
@@ -234,28 +235,32 @@ class HassioAddonInfo extends LitElement {
${this.addon.stage !== "stable"
- ? html`
-
-
- ${this.supervisor.localize(
- `addon.dashboard.capability.stages.${this.addon.stage}`
- )}
- `
+
+
+
+ `
: ""}
- = 6,
yellow: [3, 4, 5].includes(Number(this.addon.rating)),
@@ -263,138 +268,183 @@ class HassioAddonInfo extends LitElement {
})}
@click=${this._showMoreInfo}
id="rating"
+ .label=${capitalizeFirstLetter(
+ this.supervisor.localize(
+ "addon.dashboard.capability.label.rating"
+ )
+ )}
>
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.rating"
- )}
-
+
${this.addon.host_network
? html`
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.host"
- )}
-
+
`
: ""}
${this.addon.full_access
? html`
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.hardware"
- )}
-
+
`
: ""}
${this.addon.homeassistant_api
? html`
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.core"
- )}
-
+
`
: ""}
${this._computeHassioApi
? html`
-
+
- ${this.supervisor.localize(
- `addon.dashboard.capability.role.${this.addon.hassio_role}`
- ) || this.addon.hassio_role}
-
+
`
: ""}
${this.addon.docker_api
? html`
-
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.docker"
+
+ >
+
+
`
: ""}
${this.addon.host_pid
? html`
-
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.host_pid"
+
+ >
+
+
`
: ""}
${this.addon.apparmor !== "default"
? html`
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.apparmor"
- )}
-
+
`
: ""}
${this.addon.auth_api
? html`
-
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.auth"
+
+ >
+
+
`
: ""}
${this.addon.ingress
? html`
-
+
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.ingress"
- )}
-
+
`
: ""}
${this.addon.signed
? html`
-
-
- ${this.supervisor.localize(
- "addon.dashboard.capability.label.signed"
+
+ >
+
+
`
: ""}
@@ -1185,23 +1235,35 @@ class HassioAddonInfo extends LitElement {
.description a {
color: var(--primary-color);
}
- ha-chip {
- text-transform: capitalize;
- --ha-chip-text-color: var(--text-primary-color);
- --ha-chip-background-color: var(--primary-color);
+ ha-assist-chip {
+ --md-sys-color-primary: var(--text-primary-color);
+ --md-sys-color-on-surface: var(--text-primary-color);
+ --ha-assist-chip-filled-container-color: var(--primary-color);
}
.red {
- --ha-chip-background-color: var(--label-badge-red, #df4c1e);
+ --ha-assist-chip-filled-container-color: var(
+ --label-badge-red,
+ #df4c1e
+ );
}
.blue {
- --ha-chip-background-color: var(--label-badge-blue, #039be5);
+ --ha-assist-chip-filled-container-color: var(
+ --label-badge-blue,
+ #039be5
+ );
}
.green {
- --ha-chip-background-color: var(--label-badge-green, #0da035);
+ --ha-assist-chip-filled-container-color: var(
+ --label-badge-green,
+ #0da035
+ );
}
.yellow {
- --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
+ --ha-assist-chip-filled-container-color: var(
+ --label-badge-yellow,
+ #f4b400
+ );
}
.capabilities {
margin-bottom: 16px;
@@ -1260,9 +1322,6 @@ class HassioAddonInfo extends LitElement {
}
@media (max-width: 720px) {
- ha-chip {
- line-height: 36px;
- }
.addon-options {
max-width: 100%;
}
diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts
new file mode 100644
index 000000000000..98d03bb886d4
--- /dev/null
+++ b/src/components/chips/ha-assist-chip.ts
@@ -0,0 +1,53 @@
+import { MdAssistChip } from "@material/web/chips/assist-chip";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-assist-chip")
+export class HaAssistChip extends MdAssistChip {
+ @property({ type: Boolean, reflect: true }) filled = false;
+
+ static override styles = [
+ ...super.styles,
+ css`
+ :host {
+ --md-sys-color-primary: var(--primary-text-color);
+ --md-sys-color-on-surface: var(--primary-text-color);
+ --md-assist-chip-container-shape: 16px;
+ --md-assist-chip-outline-color: var(--outline-color);
+ --md-assist-chip-label-text-weight: 400;
+ --ha-assist-chip-filled-container-color: rgba(
+ var(--rgb-primary-text-color),
+ 0.15
+ );
+ }
+ /** Material 3 doesn't have a filled chip, so we have to make our own **/
+ .filled {
+ display: flex;
+ pointer-events: none;
+ border-radius: inherit;
+ inset: 0;
+ position: absolute;
+ background-color: var(--ha-assist-chip-filled-container-color);
+ }
+ /** Set the size of mdc icons **/
+ ::slotted([slot="icon"]) {
+ display: flex;
+ --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+ }
+ `,
+ ];
+
+ protected override renderOutline() {
+ if (this.filled) {
+ return html`
`;
+ }
+
+ return super.renderOutline();
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-assist-chip": HaAssistChip;
+ }
+}
diff --git a/src/components/chips/ha-chip-set.ts b/src/components/chips/ha-chip-set.ts
new file mode 100644
index 000000000000..e82b49eeaf16
--- /dev/null
+++ b/src/components/chips/ha-chip-set.ts
@@ -0,0 +1,11 @@
+import { MdChipSet } from "@material/web/chips/chip-set";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-chip-set")
+export class HaChipSet extends MdChipSet {}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-chip-set": HaChipSet;
+ }
+}
diff --git a/src/components/chips/ha-filter-chip.ts b/src/components/chips/ha-filter-chip.ts
new file mode 100644
index 000000000000..accd3c5f2313
--- /dev/null
+++ b/src/components/chips/ha-filter-chip.ts
@@ -0,0 +1,41 @@
+import { MdFilterChip } from "@material/web/chips/filter-chip";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-filter-chip")
+export class HaFilterChip extends MdFilterChip {
+ @property({ type: Boolean, reflect: true, attribute: "no-leading-icon" })
+ noLeadingIcon = false;
+
+ static override styles = [
+ ...super.styles,
+ css`
+ :host {
+ --md-sys-color-primary: var(--primary-text-color);
+ --md-sys-color-on-surface: var(--primary-text-color);
+ --md-sys-color-on-surface-variant: var(--primary-text-color);
+ --md-sys-color-on-secondary-container: var(--primary-text-color);
+ --md-filter-chip-container-shape: 16px;
+ --md-filter-chip-outline-color: var(--outline-color);
+ --md-filter-chip-selected-container-color: rgba(
+ var(--rgb-primary-text-color),
+ 0.15
+ );
+ }
+ `,
+ ];
+
+ protected renderLeadingIcon() {
+ if (this.noLeadingIcon) {
+ // eslint-disable-next-line lit/prefer-nothing
+ return html``;
+ }
+ return super.renderLeadingIcon();
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-filter-chip": HaFilterChip;
+ }
+}
diff --git a/src/components/chips/ha-input-chip.ts b/src/components/chips/ha-input-chip.ts
new file mode 100644
index 000000000000..cdaa980351a0
--- /dev/null
+++ b/src/components/chips/ha-input-chip.ts
@@ -0,0 +1,35 @@
+import { MdInputChip } from "@material/web/chips/input-chip";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-input-chip")
+export class HaInputChip extends MdInputChip {
+ static override styles = [
+ ...super.styles,
+ css`
+ :host {
+ --md-sys-color-primary: var(--primary-text-color);
+ --md-sys-color-on-surface: var(--primary-text-color);
+ --md-sys-color-on-surface-variant: var(--primary-text-color);
+ --md-sys-color-on-secondary-container: var(--primary-text-color);
+ --md-input-chip-container-shape: 16px;
+ --md-input-chip-outline-color: var(--outline-color);
+ --md-input-chip-selected-container-color: rgba(
+ var(--rgb-primary-text-color),
+ 0.15
+ );
+ }
+ /** Set the size of mdc icons **/
+ ::slotted([slot="icon"]) {
+ display: flex;
+ --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+ }
+ `,
+ ];
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-input-chip": HaInputChip;
+ }
+}
diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts
deleted file mode 100644
index 699f1b0a730d..000000000000
--- a/src/components/ha-chip-set.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import {
- css,
- CSSResultGroup,
- html,
- LitElement,
- TemplateResult,
- unsafeCSS,
-} from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-chip-set")
-export class HaChipSet extends LitElement {
- protected render(): TemplateResult {
- return html`
-
-
-
- `;
- }
-
- static get styles(): CSSResultGroup {
- return css`
- ${unsafeCSS(chipStyles)}
-
- slot::slotted(ha-chip) {
- margin: 4px 4px 4px 0;
- }
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "ha-chip-set": HaChipSet;
- }
-}
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
deleted file mode 100644
index fc427fd93d8d..000000000000
--- a/src/components/ha-chip.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-chip")
-export class HaChip extends LitElement {
- @property({ type: Boolean }) public hasIcon = false;
-
- @property({ type: Boolean }) public hasTrailingIcon = false;
-
- @property({ type: Boolean }) public noText = false;
-
- protected render() {
- return html`
-
- ${this.hasIcon
- ? html`
-
-
`
- : nothing}
-
-
-
-
-
-
- ${this.hasTrailingIcon
- ? html`
-
-
`
- : nothing}
-
- `;
- }
-
- 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));
- }
-
- .mdc-chip.no-text {
- padding: 0 10px;
- }
-
- .mdc-chip:hover {
- color: var(--ha-chip-text-color, var(--primary-text-color));
- }
-
- .mdc-chip__icon--leading,
- .mdc-chip__icon--trailing {
- --mdc-icon-size: 18px;
- line-height: 14px;
- color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
- }
- .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
- .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
- margin-right: -4px;
- margin-inline-start: -4px;
- margin-inline-end: 4px;
- direction: var(--direction);
- }
-
- span[role="gridcell"] {
- line-height: 14px;
- }
-
- :host {
- outline: none;
- }
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "ha-chip": HaChip;
- }
-}
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
new file mode 100644
index 000000000000..ffb4d0612649
--- /dev/null
+++ b/src/components/ha-label.ts
@@ -0,0 +1,60 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-label")
+class HaLabel extends LitElement {
+ protected render(): TemplateResult {
+ return html`
+
+
+
+