Merge pull request #10415 from home-assistant/dev (#10415)

* Use MWC components for ha-form (#10120)

* Dont create icon for supervisor (#10191)

* Fix import (#10206)

* Add "gas" device_class to customize (and sort existing ones) (#10196)

* Make zone names readable on map in dark mode (#10195)

* Tweak ha-form (#10194)

* Extract black/white row into component (#10212)

* Extract black/white row into component

* Remove unused import

* Fix dirty check/leaving automation editor (#10211)

* Add selector demo to gallery (#10213)

* Fix icon overlay for person badges (#10201)

* Convert iframe panel to Lit (#10216)

* Allow disabling an ha-form (#10218)

* Fix alarm panel badge (#10221)

* Add missing validation text (#10225)

* Apply flat polyfill globally (#10222)

* Add ha-bar to gallery (#10242)

* Handle text overflow for tabs (#10239)

* Remove "battery" device class from fixed icon list (#10246)

* Add ha-chip to gallery (#10252)

* Add netlify build script for gallery (#10253)

* Add ha-label-badge to gallery (#10248)

* Use correct build url (#10258)

* Remove "Hass.io" from translation (#10257)

* Update demo template (#10256)

* Add WebRTC stream player (#10193)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Add tamper device class for binary sensor (#10268)

* Fix missing translatable energy texts (#10230)

* Consolidate all icon button logic into `<ha-icon-button>` + ensure tooltip (#9230)

* Fix sizing / positioning error for trace graph node with subsequent branches (#10049)

* Initial support for entity category (#10266)

* Add support for device configuration URL (#10251)

* Add support for device configuration URL

* Lint

* Tweak text

* Bump mdc/mwc to 0.25.2 (#10271)

* Bumped version to 20211014.0

* Warn if iframe won't be able to load the website (#10217)

* Disable ha-form while submitting entry flow (#10290)

* Convert all warning classes to ha-alert (#10289)

* ABC automation types + use MWC (#10287)

* Add "capitalize" option to `hui-timestamp-display` (#10280)

* Add additional binary device classes to inversion list (#10152)

* Fix energy onboarding `add_solar_production` button (#10275) (#10286)

* Unify default dashboard name (#10254)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix icon buttons in Safari (#10293)

* Only render badge value if there is no icon and no image (#10310)

* Update MDI to v6.3.95 (#10313)

* Rename `stream_type` to `frontend_stream_type` (#10298)

* Fix translation key energy distribution solar (#10316)

* Prevent mwc-list-item from opening up quick-bar (#10317)

* Remove element resize hook (#10300)

* Improve WebRTC stream error handling and cleanup (#10302)

* Fix formatting of weather extrema temperatures (#10306)

* Ensure current active dark modes gets used for manually set themes (#10307)

* Add views dropdown and footer actions to the "move to view" dialog (#10172)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Icon Picker (#10161)

* Use maxLiveSyncPlaybackRate in ha-hls-player (#10323)

* Revise grid neutrality energy dashboard card, modify energy dashboard presentation to match (#10054)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix `ha-icon-button` in `ha-file-upload` (#10328)

* Use error for protection mode alert (#10315)

* Change unsupported reason container to software (#10325)

* Migrate all paper checkbox elements to mwc (#10329)

* Migrate all paper-radio elements to mwc-radio (#10327)

* Correct grid neutrality card tooltip, make consistent with new colors (#10326)

* Fix select options for add-on config (#10330)

* Migrate all paper dialogs to mwc (#10333)

* Stack gas and solar sources (#10244)

* Set default value when enabling optional value (#10247)

* Fix overflow icon color in backup dialog (#10331)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Convert default state icons (#10223)

* Convert default state icons

* update

* Update cast/src/launcher/layout/hc-cast.ts

Co-authored-by: Philip Allgaier <mail@spacegaier.de>

* Update ha-config-core.js

* Update

* Finish

* Add siren icon

* FIx

* Add curtain icons

Co-authored-by: Philip Allgaier <mail@spacegaier.de>

* Use secondary-text-color for trailing icon (#10340)

* Use svg icons for default panels (#10342)

* Tweak icon picker a bit (#10319)

* Add support for `no-state` and `entity-no-longer-available` statistic… (#10345)

* Change dark mode input fill color (#10341)

* Replace paper progress with mwc-linear-progess (#10339)

* Bumped version to 20211020.0

* Add auto slider/box mode to number entity (#10272)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

* Correct automation editor event action translation (#10355)

* Convert cloud account config to Lit (#10350)

* Restore proper state badge image behavior (#10369)

* Add to do list support to markdown (#10129)

* Catch error if input_datetime state is incorrect (#10237)

* Update MDI to v6.4.95 (#10389)

* Remove deprecated icons that where replaced (#10371)

* Make all automation type pickers use natural width to be able to show… (#10391)

* Trim device name from entities on device page (#10285)

* Update markdown card to allow word to be broken (#10387)

* Fix Full Calendar Background color (#10373)

* Add additional properties to zwave_js device info panel (#10132)

* Fix various `slugify()` issues + add tests (#10383)

* Add stopPropagation to move click handlers (#10379)

* Use ha-chip for alarm control panel card (#10393)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix timezone issues with date formatting for ES5 (#10370)

* Add automation editor to gallery (#10392)

* Use ha-chip instead of ha-label-badge for add-on capabilities (#10398)

* Do not close edit dialog when more info is escaped (#10249)

* Ensure Sortable is recreated when card editors are reopened (#10382)

* Ensure explicit `false` values from customize form get stored (#10381)

* Add running device class to binary sensor (#10400)

* Ensure consistent card look on device config page (#10386)

* Add "Keep me logged in" checkbox within login flow (#10226)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update delay label (#10284)

* Introduced ha-icon-overflow-menu component (#10352)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Use ha-alert to warn about logs from custom integrations (#10396)

* Add support for hiding current weather in forecast card (#10267)

* Allow configuration_url to point to an internal panel (#10395)

* Bump Lit (#10409)

* Bump format js (#10405)

* Bump codemirror (#10404)

* Bump and patch material elements (#10406)

* Add blueprint scripts (#9504)

* Make device classes in logbook translatable (#10376)

* Improve device info add to Lovelace (#10413)

* Add navigation option from more-info to history (#9717)

* Move entities to center column on device page (#10412)

* Bumped version to 20211026.0

* Shrink new section titles in more-info dialog a bit (#10414)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
Co-authored-by: Philip Allgaier <mail@spacegaier.de>
Co-authored-by: Jack Wilsdon <jack.wilsdon@gmail.com>
Co-authored-by: Josh McCarty <josh@joshmccarty.com>
Co-authored-by: Erik Montnemery <erik@montnemery.com>
Co-authored-by: Allen Porter <allen.porter@gmail.com>
Co-authored-by: Franck Nijhof <git@frenck.dev>
Co-authored-by: chriss158 <edgi@arcor.de>
Co-authored-by: Kyle Niewiada <aav7fl@users.noreply.github.com>
Co-authored-by: MartinT <44962077+MartinTuroci@users.noreply.github.com>
Co-authored-by: Michael Irigoyen <michael@irigoyen.dev>
Co-authored-by: Allen Porter <allen@thebends.org>
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
Co-authored-by: uvjustin <46082645+uvjustin@users.noreply.github.com>
Co-authored-by: Will Adler <will@wtadler.com>
Co-authored-by: Rogério Ribeiro <zroger499@gmail.com>
Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
Co-authored-by: Raman Gupta <7243222+raman325@users.noreply.github.com>
Co-authored-by: Nathan Orick <cnathanorick@gmail.com>
Co-authored-by: Tobias Kündig <tobias@offline.ch>
Co-authored-by: Marc Hörsken <mback2k@users.noreply.github.com>

.yarn/patches/@material/mwc-icon-button/remove-icon.patch

@@ -0,0 +1,12 @@
+diff --git a/mwc-icon-button-base.js b/mwc-icon-button-base.js
+index 45cdaab93ccc0a6daaaaabc01266dcdc32e46bfd..b3ea5b541597308d85f86ce6c23fd00785fda835 100644
+--- a/mwc-icon-button-base.js
++++ b/mwc-icon-button-base.js
+@@ -63,7 +63,6 @@ export class IconButtonBase extends LitElement {
+         @touchend="${this.handleRippleDeactivate}"
+         @touchcancel="${this.handleRippleDeactivate}"
+     >${this.renderRipple()}
+-    <i class="material-icons">${this.icon}</i>
+     <span
+       ><slot></slot
+     ></span>

build-scripts/bundle.js

@@ -210,6 +210,9 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
+      defineOverlay: {
+        __DEMO__: true,
+      },
     };
   },
 };

build-scripts/gulp/gen-icons-json.js

@@ -22,17 +22,38 @@ const getMeta = () => {
     const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
       encoding,
     });
-    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
+    return {
+      path: svg.match(/ d="([^"]+)"/)[1],
+      name: icon.name,
+      tags: icon.tags,
+    };
   });
 };
 
 const addRemovedMeta = (meta) => {
   const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
   const removed = JSON.parse(file);
-  const combinedMeta = [...meta, ...removed];
+  const removedMeta = removed.map((removeIcon) => ({
+    path: removeIcon.path,
+    name: removeIcon.name,
+    tags: [],
+  }));
+  const combinedMeta = [...meta, ...removedMeta];
   return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
 };
 
+const homeAutomationTag = "Home Automation";
+
+const orderMeta = (meta) => {
+  const homeAutomationMeta = meta.filter((icon) =>
+    icon.tags.includes(homeAutomationTag)
+  );
+  const otherMeta = meta.filter(
+    (icon) => !icon.tags.includes(homeAutomationTag)
+  );
+  return [...homeAutomationMeta, ...otherMeta];
+};
+
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -77,8 +98,10 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = addRemovedMeta(getMeta());
-  const split = splitBySize(meta);
+  const meta = getMeta();
+
+  const metaAndRemoved = addRemovedMeta(meta);
+  const split = splitBySize(metaAndRemoved);
 
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
@@ -116,5 +139,10 @@ gulp.task("gen-icons-json", (done) => {
     JSON.stringify({ version: package.version, parts })
   );
 
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "iconList.json"),
+    JSON.stringify(orderMeta(meta).map((icon) => icon.name))
+  );
+
   done();
 });

build-scripts/gulp/hassio.js

@@ -17,7 +17,6 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
@@ -34,7 +33,6 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",

build-scripts/gulp/webpack.js

@@ -173,6 +173,7 @@ gulp.task("webpack-dev-server-gallery", () =>
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
     contentBase: paths.gallery_output_root,
     port: 8100,
+    listenHost: "0.0.0.0",
   })
 );
 

cast/src/launcher/layout/hc-cast.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button/mwc-button";
+import { mdiCast, mdiCastConnected } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
@@ -17,6 +18,7 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
@@ -73,7 +75,7 @@ class HcCast extends LitElement {
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast"></ha-icon>
+                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -111,7 +113,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast-connected"></ha-icon>
+                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
                   Manage
                 </mwc-button>
               `
@@ -233,7 +235,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-right: 8px;
         height: 18px;
       }

cast/src/launcher/layout/hc-connect.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiCastConnected, mdiCast } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   Auth,
@@ -19,7 +20,7 @@ import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
-import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -127,11 +128,11 @@ export class HcConnect extends LitElement {
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <ha-icon
-                .icon=${this.castManager.castState === "CONNECTED"
-                  ? "hass:cast-connected"
-                  : "hass:cast"}
-              ></ha-icon>
+              <ha-svg-icon
+                .path=${this.castManager.castState === "CONNECTED"
+                  ? mdiCastConnected
+                  : mdiCast}
+              ></ha-svg-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -307,7 +308,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-left: 8px;
       }
 

demo/src/custom-cards/cast-demo-row.ts

@@ -1,3 +1,4 @@
+import { mdiTelevision } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -27,7 +28,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
       return html``;
     }
     return html`
-      <ha-icon icon="hademo:television"></ha-icon>
+      <ha-svg-icon .path=${mdiTelevision}></ha-svg-icon>
       <div class="flex">
         <div class="name">Show Chromecast interface</div>
         <google-cast-launcher></google-cast-launcher>
@@ -72,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
         display: flex;
         align-items: center;
       }
-      ha-icon {
+      ha-svg-icon {
         padding: 8px;
         color: var(--paper-item-icon-color);
       }

demo/src/stubs/area_registry.ts

@@ -0,0 +1,7 @@
+import { AreaRegistryEntry } from "../../../src/data/area_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockAreaRegistry = (
+  hass: MockHomeAssistant,
+  data: AreaRegistryEntry[] = []
+) => hass.mockWS("config/area_registry/list", () => data);

demo/src/stubs/device_registry.ts

@@ -0,0 +1,7 @@
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockDeviceRegistry = (
+  hass: MockHomeAssistant,
+  data: DeviceRegistryEntry[] = []
+) => hass.mockWS("config/device_registry/list", () => data);

demo/src/stubs/entity_registry.ts

@@ -0,0 +1,7 @@
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEntityRegistry = (
+  hass: MockHomeAssistant,
+  data: EntityRegistryEntry[] = []
+) => hass.mockWS("config/entity_registry/list", () => data);

demo/src/stubs/hassio_supervisor.ts

@@ -0,0 +1,59 @@
+import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
+  hass.config.components.push("hassio");
+  hass.mockWS("supervisor/api", (msg) => {
+    if (msg.endpoint === "/supervisor/info") {
+      const data: HassioSupervisorInfo = {
+        version: "2021.10.dev0805",
+        version_latest: "2021.10.dev0806",
+        update_available: true,
+        channel: "dev",
+        arch: "aarch64",
+        supported: true,
+        healthy: true,
+        ip_address: "172.30.32.2",
+        wait_boot: 5,
+        timezone: "America/Los_Angeles",
+        logging: "info",
+        debug: false,
+        debug_block: false,
+        diagnostics: true,
+        addons: [
+          {
+            name: "Visual Studio Code",
+            slug: "a0d7b954_vscode",
+            description:
+              "Fully featured VSCode experience, to edit your HA config in the browser, including auto-completion!",
+            state: "started",
+            version: "3.6.2",
+            version_latest: "3.6.2",
+            update_available: false,
+            repository: "a0d7b954",
+            icon: true,
+            logo: true,
+          },
+          {
+            name: "Z-Wave JS",
+            slug: "core_zwave_js",
+            description:
+              "Control a ZWave network with Home Assistant Z-Wave JS",
+            state: "started",
+            version: "0.1.45",
+            version_latest: "0.1.45",
+            update_available: false,
+            repository: "core",
+            icon: true,
+            logo: true,
+          },
+        ] as any,
+        addons_repositories: [
+          "https://github.com/hassio-addons/repository",
+        ] as any,
+      };
+      return data;
+    }
+    return Promise.reject(`${msg.method} ${msg.endpoint} is not implemented`);
+  });
+};

gallery/script/netlify_build_gallery

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+TARGET_LABEL="Needs gallery preview"
+
+if [[ "$NETLIFY" != "true" ]]; then
+  echo "This script can only be run on Netlify"
+  exit 1
+fi
+
+function createStatus() {
+  state="$1"
+  description="$2"
+  target_url="$3"
+  curl -X POST -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
+    "https://api.github.com/repos/home-assistant/frontend/statuses/$COMMIT_REF" \
+    -d '{"state": "'"${state}"'", "context": "Netlify/Gallery Preview Build", "description": "'"$description"'", "target_url":  "'"$target_url"'"}'
+}
+
+
+if [[ "${PULL_REQUEST}" == "false" ]]; then
+  gulp build-gallery
+else
+  if [[ "$(curl -sSLf -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
+    "https://api.github.com/repos/home-assistant/frontend/pulls/${REVIEW_ID}" | jq '.labels[].name' -r)" =~ "$TARGET_LABEL" ]]; then
+    createStatus "pending" "Building gallery preview" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
+    gulp build-gallery
+    if [ $? -eq 0 ]; then
+      createStatus "success" "Build complete" "$DEPLOY_URL"
+    else
+      createStatus "error" "Build failed" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
+    fi
+  else
+    createStatus "success" "Build was not requested by PR label"
+  fi
+fi

gallery/src/components/demo-black-white-row.ts

@@ -0,0 +1,143 @@
+import { Button } from "@material/mwc-button";
+import { html, LitElement, css, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+
+@customElement("demo-black-white-row")
+class DemoBlackWhiteRow extends LitElement {
+  @property() title!: string;
+
+  @property() value!: any;
+
+  @property() disabled = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="row">
+        <div class="content light">
+          <ha-card .header=${this.title}>
+            <div class="card-content">
+              <slot name="light"></slot>
+            </div>
+            <div class="card-actions">
+              <mwc-button
+                .disabled=${this.disabled}
+                @click=${this.handleSubmit}
+              >
+                Submit
+              </mwc-button>
+            </div>
+          </ha-card>
+        </div>
+        <div class="content dark">
+          <ha-card .header=${this.title}>
+            <div class="card-content">
+              <slot name="dark"></slot>
+            </div>
+            <div class="card-actions">
+              <mwc-button
+                .disabled=${this.disabled}
+                @click=${this.handleSubmit}
+              >
+                Submit
+              </mwc-button>
+            </div>
+          </ha-card>
+          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: false,
+      },
+      "default",
+      { dark: true }
+    );
+  }
+
+  handleSubmit(ev) {
+    const content = (ev.target as Button).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
+  static styles = css`
+    .row {
+      display: flex;
+    }
+    .content {
+      padding: 50px 0;
+      background-color: var(--primary-background-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
+      display: flex;
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+    }
+    ha-card {
+      width: 400px;
+    }
+    pre {
+      width: 300px;
+      margin: 0 16px 0;
+      overflow: auto;
+      color: var(--primary-text-color);
+    }
+    .card-actions {
+      display: flex;
+      flex-direction: row-reverse;
+      border-top: none;
+    }
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
+      }
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
+        padding: 16px;
+      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
+      ha-card {
+        margin: 0 auto;
+        width: 100%;
+        max-width: 400px;
+      }
+      pre {
+        margin: 16px auto;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-black-white-row": DemoBlackWhiteRow;
+  }
+}

gallery/src/demos/demo-automation-editor-action.ts

@@ -0,0 +1,91 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import "../../../src/panels/config/automation/action/ha-automation-action";
+import { HaChooseAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-choose";
+import { HaDelayAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-delay";
+import { HaDeviceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
+import { HaEventAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-event";
+import { HaRepeatAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
+import { HaSceneAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-scene";
+import { HaServiceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-service";
+import { HaWaitForTriggerAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
+import { HaWaitAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
+import { Action } from "../../../src/data/script";
+import { HaConditionAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+
+const SCHEMAS: { name: string; actions: Action[] }[] = [
+  { name: "Event", actions: [HaEventAction.defaultConfig] },
+  { name: "Device", actions: [HaDeviceAction.defaultConfig] },
+  { name: "Service", actions: [HaServiceAction.defaultConfig] },
+  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
+  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
+  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
+  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
+  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
+  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
+  { name: "Choose", actions: [HaChooseAction.defaultConfig] },
+  { name: "Variables", actions: [{ variables: { hello: "1" } }] },
+];
+
+@customElement("demo-automation-editor-action")
+class DemoHaAutomationEditorAction extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.actions);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-action
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .actions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-action>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
+  }
+}

gallery/src/demos/demo-automation-editor-condition.ts

@@ -0,0 +1,127 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import type { Condition } from "../../../src/data/automation";
+import "../../../src/panels/config/automation/condition/ha-automation-condition";
+import { HaDeviceCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
+import { HaLogicalCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
+import HaNumericStateCondition from "../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
+import { HaStateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
+import { HaSunCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
+import { HaTemplateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
+import { HaTimeCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
+import { HaTriggerCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
+import { HaZoneCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
+
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
+  {
+    name: "State",
+    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
+  },
+  {
+    name: "Numeric State",
+    conditions: [
+      { condition: "numeric_state", ...HaNumericStateCondition.defaultConfig },
+    ],
+  },
+  {
+    name: "Sun",
+    conditions: [{ condition: "sun", ...HaSunCondition.defaultConfig }],
+  },
+  {
+    name: "Zone",
+    conditions: [{ condition: "zone", ...HaZoneCondition.defaultConfig }],
+  },
+  {
+    name: "Time",
+    conditions: [{ condition: "time", ...HaTimeCondition.defaultConfig }],
+  },
+  {
+    name: "Template",
+    conditions: [
+      { condition: "template", ...HaTemplateCondition.defaultConfig },
+    ],
+  },
+  {
+    name: "Device",
+    conditions: [{ condition: "device", ...HaDeviceCondition.defaultConfig }],
+  },
+  {
+    name: "And",
+    conditions: [{ condition: "and", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Or",
+    conditions: [{ condition: "or", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Not",
+    conditions: [{ condition: "not", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Trigger",
+    conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
+  },
+];
+
+@customElement("demo-automation-editor-condition")
+class DemoHaAutomationEditorCondition extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.conditions);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-condition
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .conditions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-condition>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
+  }
+}

gallery/src/demos/demo-automation-editor-trigger.ts

@@ -0,0 +1,159 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import type { Trigger } from "../../../src/data/automation";
+import { HaGeolocationTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
+import { HaEventTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
+import { HaHassTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
+import { HaNumericStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
+import { HaSunTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun";
+import { HaTagTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag";
+import { HaTemplateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template";
+import { HaTimeTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
+import { HaTimePatternTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
+import { HaWebhookTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
+import { HaZoneTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
+import { HaDeviceTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
+import { HaStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
+import { HaMQTTTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
+import "../../../src/panels/config/automation/trigger/ha-automation-trigger";
+
+const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
+  {
+    name: "State",
+    triggers: [{ platform: "state", ...HaStateTrigger.defaultConfig }],
+  },
+
+  {
+    name: "MQTT",
+    triggers: [{ platform: "mqtt", ...HaMQTTTrigger.defaultConfig }],
+  },
+
+  {
+    name: "GeoLocation",
+    triggers: [
+      { platform: "geo_location", ...HaGeolocationTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Home Assistant",
+    triggers: [{ platform: "homeassistant", ...HaHassTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Numeric State",
+    triggers: [
+      { platform: "numeric_state", ...HaNumericStateTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Sun",
+    triggers: [{ platform: "sun", ...HaSunTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Time Pattern",
+    triggers: [
+      { platform: "time_pattern", ...HaTimePatternTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Webhook",
+    triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Zone",
+    triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Tag",
+    triggers: [{ platform: "tag", ...HaTagTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Time",
+    triggers: [{ platform: "time", ...HaTimeTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Template",
+    triggers: [{ platform: "template", ...HaTemplateTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Event",
+    triggers: [{ platform: "event", ...HaEventTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Device Trigger",
+    triggers: [{ platform: "device", ...HaDeviceTrigger.defaultConfig }],
+  },
+];
+
+@customElement("demo-automation-editor-trigger")
+class DemoHaAutomationEditorTrigger extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.triggers);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-trigger
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .triggers=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-trigger>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-trigger": DemoHaAutomationEditorTrigger;
+  }
+}

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

@@ -0,0 +1,85 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import "../../../src/components/ha-bar";
+import "../../../src/components/ha-card";
+
+const bars: {
+  min?: number;
+  max?: number;
+  value: number;
+  warning?: number;
+  error?: number;
+}[] = [
+  {
+    value: 33,
+  },
+  {
+    value: 150,
+  },
+  {
+    min: -10,
+    value: 0,
+  },
+  {
+    value: 80,
+  },
+  {
+    value: 200,
+    max: 13,
+  },
+  {
+    value: 4,
+    min: 13,
+  },
+];
+
+@customElement("demo-ha-bar")
+export class DemoHaBar extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${bars
+        .map((bar) => ({ min: 0, max: 100, warning: 70, error: 90, ...bar }))
+        .map(
+          (bar) => html`
+            <ha-card>
+              <div class="card-content">
+                <pre>Config: ${JSON.stringify(bar)}</pre>
+                <ha-bar
+                  class=${classMap({
+                    warning: bar.value > bar.warning,
+                    error: bar.value > bar.error,
+                  })}
+                  .min=${bar.min}
+                  .max=${bar.max}
+                  .value=${bar.value}
+                >
+                </ha-bar>
+              </div>
+            </ha-card>
+          `
+        )}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .warning {
+        --ha-bar-primary-color: var(--warning-color);
+      }
+      .error {
+        --ha-bar-primary-color: var(--error-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-bar": DemoHaBar;
+  }
+}

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

@@ -0,0 +1,61 @@
+import { mdiHomeAssistant } from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-chip";
+import "../../../src/components/ha-svg-icon";
+
+const chips: {
+  icon?: string;
+  content?: string;
+}[] = [
+  {},
+  {
+    icon: mdiHomeAssistant,
+  },
+  {
+    content: "Content",
+  },
+  {
+    icon: mdiHomeAssistant,
+    content: "Content",
+  },
+];
+
+@customElement("demo-ha-chip")
+export class DemoHaChip extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="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>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-chip": DemoHaChip;
+  }
+}

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

@@ -1,23 +1,25 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, css, html } from "lit";
+import "@material/mwc-button";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators";
+import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
+import type { HaFormSchema } from "../../../src/components/ha-form/types";
 import "../../../src/components/ha-form/ha-form";
-import "../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import type { HaFormSchema } from "../../../src/components/ha-form/ha-form";
+import "../components/demo-black-white-row";
 
 const SCHEMAS: {
   title: string;
   translations?: Record<string, string>;
   error?: Record<string, string>;
   schema: HaFormSchema[];
+  data?: Record<string, any>;
 }[] = [
   {
     title: "Authentication",
     translations: {
       username: "Username",
       password: "Password",
-      invalid_login: "Invalid login",
+      invalid_login: "Invalid username or password",
     },
     error: {
       base: "invalid_login",
@@ -57,6 +59,11 @@ const SCHEMAS: {
         optional: true,
         default: 10,
       },
+      {
+        type: "float",
+        name: "float",
+        required: true,
+      },
       {
         type: "string",
         name: "string",
@@ -83,6 +90,80 @@ const SCHEMAS: {
         optional: true,
         default: ["default"],
       },
+      {
+        type: "positive_time_period_dict",
+        name: "time",
+        required: true,
+      },
+    ],
+  },
+  {
+    title: "Numbers",
+    schema: [
+      {
+        type: "integer",
+        name: "int",
+        required: true,
+      },
+      {
+        type: "integer",
+        name: "int with default",
+        optional: true,
+        default: 10,
+      },
+      {
+        type: "integer",
+        name: "int range required",
+        required: true,
+        default: 5,
+        valueMin: 0,
+        valueMax: 10,
+      },
+      {
+        type: "integer",
+        name: "int range optional",
+        optional: true,
+        valueMin: 0,
+        valueMax: 10,
+      },
+    ],
+  },
+  {
+    title: "select",
+    schema: [
+      {
+        type: "select",
+        options: [
+          ["default", "Default"],
+          ["other", "Other"],
+        ],
+        name: "select",
+        required: true,
+        default: "default",
+      },
+      {
+        type: "select",
+        options: [
+          ["default", "Default"],
+          ["other", "Other"],
+        ],
+        name: "select optional",
+        optional: true,
+      },
+      {
+        type: "select",
+        options: [
+          ["default", "Default"],
+          ["other", "Other"],
+          ["uno", "mas"],
+          ["one", "more"],
+          ["and", "another_one"],
+          ["option", "1000"],
+        ],
+        name: "select many otions",
+        optional: true,
+        default: "default",
+      },
     ],
   },
   {
@@ -95,7 +176,7 @@ const SCHEMAS: {
           other: "Other",
         },
         name: "multi",
-        optional: true,
+        required: true,
         default: ["default"],
       },
       {
@@ -108,101 +189,90 @@ const SCHEMAS: {
           and: "another_one",
           option: "1000",
         },
-        name: "multi",
+        name: "multi many otions",
         optional: true,
         default: ["default"],
       },
     ],
   },
+  {
+    title: "Field specific error",
+    data: {
+      new_password: "hello",
+      new_password_2: "bye",
+    },
+    translations: {
+      new_password: "New Password",
+      new_password_2: "Re-type Password",
+      not_match: "The passwords do not match",
+    },
+    error: {
+      new_password_2: "not_match",
+    },
+    schema: [
+      {
+        type: "string",
+        name: "new_password",
+        required: true,
+      },
+      {
+        type: "string",
+        name: "new_password_2",
+        required: true,
+      },
+    ],
+  },
 ];
 
 @customElement("demo-ha-form")
 class DemoHaForm extends LitElement {
-  private lightModeData: any = [];
+  private data = SCHEMAS.map(
+    ({ schema, data }) => data || computeInitialHaFormData(schema)
+  );
 
-  private darkModeData: any = [];
+  private disabled = SCHEMAS.map(() => false);
 
   protected render(): TemplateResult {
     return html`
       ${SCHEMAS.map((info, idx) => {
         const translations = info.translations || {};
-        const computeLabel = (schema) =>
-          translations[schema.name] || schema.name;
-        const computeError = (error) => translations[error] || error;
-
-        return [
-          [this.lightModeData, "light"],
-          [this.darkModeData, "dark"],
-        ].map(
-          ([data, type]) => html`
-            <div class="row" data-type=${type}>
-              <ha-card .header=${info.title}>
-                <div class="card-content">
-                  <ha-form
-                    .data=${data[idx]}
-                    .schema=${info.schema}
-                    .error=${info.error}
-                    .computeError=${computeError}
-                    .computeLabel=${computeLabel}
-                    @value-changed=${(e) => {
-                      data[idx] = e.detail.value;
-                      this.requestUpdate();
-                    }}
-                  ></ha-form>
-                </div>
-              </ha-card>
-              <pre>${JSON.stringify(data[idx], undefined, 2)}</pre>
-            </div>
-          `
-        );
+        return html`
+          <demo-black-white-row
+            .title=${info.title}
+            .value=${this.data[idx]}
+            .disabled=${this.disabled[idx]}
+            @submitted=${() => {
+              this.disabled[idx] = true;
+              this.requestUpdate();
+              setTimeout(() => {
+                this.disabled[idx] = false;
+                this.requestUpdate();
+              }, 2000);
+            }}
+          >
+            ${["light", "dark"].map(
+              (slot) => html`
+                <ha-form
+                  slot=${slot}
+                  .data=${this.data[idx]}
+                  .schema=${info.schema}
+                  .error=${info.error}
+                  .disabled=${this.disabled[idx]}
+                  .computeError=${(error) => translations[error] || error}
+                  .computeLabel=${(schema) =>
+                    translations[schema.name] || schema.name}
+                  @value-changed=${(e) => {
+                    this.data[idx] = e.detail.value;
+                    this.requestUpdate();
+                  }}
+                ></ha-form>
+              `
+            )}
+          </demo-black-white-row>
+        `;
       })}
     `;
   }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this.shadowRoot!.querySelectorAll("[data-type=dark]").forEach((el) => {
-      applyThemesOnElement(
-        el,
-        {
-          default_theme: "default",
-          default_dark_theme: "default",
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
-    });
-  }
-
-  static styles = css`
-    .row {
-      margin: 0 auto;
-      max-width: 800px;
-      display: flex;
-      padding: 50px;
-      background-color: var(--primary-background-color);
-    }
-    ha-card {
-      width: 100%;
-      max-width: 384px;
-    }
-    pre {
-      width: 400px;
-      margin: 0 16px;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    @media only screen and (max-width: 800px) {
-      .row {
-        flex-direction: column;
-      }
-      pre {
-        margin: 16px 0;
-      }
-    }
-  `;
 }
 
 declare global {

gallery/src/demos/demo-ha-label-badge.ts

@@ -0,0 +1,122 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-label-badge";
+import "../../../src/components/ha-card";
+
+const colors = ["#03a9f4", "#ffa600", "#43a047"];
+
+const badges: {
+  label?: string;
+  description?: string;
+  image?: string;
+}[] = [
+  {
+    label: "label",
+  },
+  {
+    label: "label",
+    description: "Description",
+  },
+  {
+    description: "Description",
+  },
+  {
+    label: "label",
+    description: "Description",
+    image: "/images/living_room.png",
+  },
+  {
+    description: "Description",
+    image: "/images/living_room.png",
+  },
+  {
+    label: "label",
+    image: "/images/living_room.png",
+  },
+  {
+    image: "/images/living_room.png",
+  },
+  {
+    label: "big label",
+  },
+  {
+    label: "big label",
+    description: "Description",
+  },
+  {
+    label: "big label",
+    description: "Description",
+    image: "/images/living_room.png",
+  },
+];
+
+@customElement("demo-ha-label-badge")
+export class DemoHaLabelBadge extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          ${badges.map(
+            (badge) => html`
+              <ha-label-badge
+                style="--ha-label-badge-color: ${colors[
+                  Math.floor(Math.random() * colors.length)
+                ]}"
+                .label=${badge.label}
+                .description=${badge.description}
+                .image=${badge.image}
+              >
+              </ha-label-badge>
+            `
+          )}
+        </div>
+      </ha-card>
+      <ha-card>
+        <div class="card-content">
+          ${badges.map(
+            (badge) => html`
+              <div class="badge">
+                <ha-label-badge
+                  style="--ha-label-badge-color: ${colors[
+                    Math.floor(Math.random() * colors.length)
+                  ]}"
+                  .label=${badge.label}
+                  .description=${badge.description}
+                  .image=${badge.image}
+                >
+                </ha-label-badge>
+                <pre>${JSON.stringify(badge, null, 2)}</pre>
+              </div>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-left: 16px;
+        background-color: var(--markdown-code-background-color);
+        padding: 8px;
+      }
+      .badge {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 16px;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-label-badge": DemoHaLabelBadge;
+  }
+}

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

@@ -0,0 +1,131 @@
+/* eslint-disable lit/no-template-arrow */
+import "@material/mwc-button";
+import { LitElement, TemplateResult, css, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import "../../../src/components/ha-selector/ha-selector";
+import "../../../src/components/ha-settings-row";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { BlueprintInput } from "../../../src/data/blueprint";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+
+const SCHEMAS: {
+  name: string;
+  input: Record<string, BlueprintInput | null>;
+}[] = [
+  {
+    name: "One of each",
+    input: {
+      entity: { name: "Entity", selector: { entity: {} } },
+      device: { name: "Device", selector: { device: {} } },
+      addon: { name: "Addon", selector: { addon: {} } },
+      area: { name: "Area", selector: { area: {} } },
+      target: { name: "Target", selector: { target: {} } },
+      number_box: {
+        name: "Number Box",
+        selector: {
+          number: {
+            min: 0,
+            max: 10,
+            mode: "box",
+          },
+        },
+      },
+      number_slider: {
+        name: "Number Slider",
+        selector: {
+          number: {
+            min: 0,
+            max: 10,
+            mode: "slider",
+          },
+        },
+      },
+      boolean: { name: "Boolean", selector: { boolean: {} } },
+      time: { name: "Time", selector: { time: {} } },
+      action: { name: "Action", selector: { action: {} } },
+      text: { name: "Text", selector: { text: { multiline: false } } },
+      text_multiline: {
+        name: "Text multiline",
+        selector: { text: { multiline: true } },
+      },
+      object: { name: "Object", selector: { object: {} } },
+      select: {
+        name: "Select",
+        selector: { select: { options: ["Option 1", "Option 2"] } },
+      },
+    },
+  },
+];
+
+@customElement("demo-ha-selector")
+class DemoHaSelector extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data = SCHEMAS.map(() => ({}));
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${SCHEMAS.map((info, idx) => {
+        const data = this.data[idx];
+        const valueChanged = (ev) => {
+          this.data[idx] = {
+            ...data,
+            [ev.target.key]: ev.detail.value,
+          };
+          this.requestUpdate();
+        };
+        return html`
+          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
+            ${["light", "dark"].map((slot) =>
+              Object.entries(info.input).map(
+                ([key, value]) =>
+                  html`
+                    <ha-settings-row narrow slot=${slot}>
+                      <span slot="heading">${value?.name || key}</span>
+                      <span slot="description">${value?.description}</span>
+                      <ha-selector
+                        .hass=${this.hass}
+                        .selector=${value!.selector}
+                        .key=${key}
+                        .value=${data[key] ?? value!.default}
+                        @value-changed=${valueChanged}
+                      ></ha-selector>
+                    </ha-settings-row>
+                  `
+              )
+            )}
+          </demo-black-white-row>
+        `;
+      })}
+    `;
+  }
+
+  static styles = css`
+    paper-input,
+    ha-selector {
+      width: 60;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-selector": DemoHaSelector;
+  }
+}

gallery/src/demos/demo-integration-card.ts

@@ -187,6 +187,7 @@ const createEntityRegistryEntries = (
     device_id: "mock-device-id",
     area_id: null,
     disabled_by: null,
+    entity_category: null,
     entity_id: "binary_sensor.updater",
     name: null,
     icon: null,
@@ -211,6 +212,7 @@ const createDeviceRegistryEntries = (
     area_id: null,
     name_by_user: null,
     disabled_by: null,
+    configuration_url: null,
   },
 ];
 

gallery/src/ha-gallery.js

@@ -65,10 +65,11 @@ class HaGallery extends PolymerElement {
         <app-header slot="header" fixed>
           <app-toolbar>
             <ha-icon-button
-              icon="hass:arrow-left"
               on-click="_backTapped"
               class$="[[_computeHeaderButtonClass(_demo)]]"
-            ></ha-icon-button>
+            >
+              <ha-icon icon="hass:arrow-left"></ha-icon>
+            </ha-icon-button>
             <div main-title>
               [[_withDefault(_demo, "Home Assistant Gallery")]]
             </div>

hassio/src/addon-store/hassio-addon-store.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
@@ -18,7 +17,7 @@ import { navigate } from "../../../src/common/navigate";
 import "../../../src/common/search/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-icon-button";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -92,9 +91,11 @@ class HassioAddonStore extends LitElement {
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
-          <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-          </mwc-icon-button>
+          <ha-icon-button
+            .label=${this.supervisor.localize("common.menu")}
+            .path=${mdiDotsVertical}
+            slot="trigger"
+          ></ha-icon-button>
           <mwc-list-item>
             ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
@@ -113,6 +114,7 @@ class HassioAddonStore extends LitElement {
           : html`
               <div class="search">
                 <search-input
+                  .hass=${this.hass}
                   no-label-float
                   no-underline
                   .filter=${this._filter}

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

@@ -15,12 +15,13 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -77,6 +78,18 @@ class HassioAddonConfig extends LitElement {
     this.addon.translations.en?.configuration?.[entry.name].name ||
     entry.name;
 
+  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
+    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
+    schema.map((entry) =>
+      entry.type === "select"
+        ? {
+            ...entry,
+            options: entry.options.map((option) => [option, option]),
+          }
+        : entry
+    )
+  );
+
   private _filteredShchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
@@ -100,9 +113,11 @@ class HassioAddonConfig extends LitElement {
           </h2>
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-              <mwc-icon-button slot="trigger">
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-              </mwc-icon-button>
+              <ha-icon-button
+                .label=${this.hass.localize("common.menu")}
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
               <mwc-list-item .disabled=${!this._canShowSchema}>
                 ${this._yamlMode
                   ? this.supervisor.localize(
@@ -125,12 +140,14 @@ class HassioAddonConfig extends LitElement {
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
-                .schema=${this._showOptional
-                  ? this.addon.schema!
-                  : this._filteredShchema(
-                      this.addon.options,
-                      this.addon.schema!
-                    )}
+                .schema=${this._schema(
+                  this._showOptional
+                    ? this.addon.schema!
+                    : this._filteredShchema(
+                        this.addon.options,
+                        this.addon.schema!
+                      )
+                )}
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}

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

@@ -11,6 +11,12 @@ import {
   mdiHomeAssistant,
   mdiKey,
   mdiNetwork,
+  mdiNumeric1,
+  mdiNumeric2,
+  mdiNumeric3,
+  mdiNumeric4,
+  mdiNumeric5,
+  mdiNumeric6,
   mdiPound,
   mdiShield,
 } from "@mdi/js";
@@ -25,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-label-badge";
+import "../../../../src/components/ha-chip";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -73,6 +79,15 @@ const STAGE_ICON = {
   deprecated: mdiExclamationThick,
 };
 
+const RATING_ICON = {
+  1: mdiNumeric1,
+  2: mdiNumeric2,
+  3: mdiNumeric3,
+  4: mdiNumeric4,
+  5: mdiNumeric5,
+  6: mdiNumeric6,
+};
+
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
   @property({ type: Boolean }) public narrow!: boolean;
@@ -180,24 +195,21 @@ class HassioAddonInfo extends LitElement {
         : ""}
       ${!this.addon.protected
         ? html`
-        <ha-card class="warning">
-          <h1 class="card-header">${this.supervisor.localize(
-            "addon.dashboard.protection_mode.title"
-          )}
-          </h1>
-          <div class="card-content">
-          ${this.supervisor.localize("addon.dashboard.protection_mode.content")}
-          </div>
-          <div class="card-actions protection-enable">
-              <mwc-button @click=${this._protectionToggled}>
-              ${this.supervisor.localize(
+            <ha-alert
+              alert-type="error"
+              .title=${this.supervisor.localize(
+                "addon.dashboard.protection_mode.title"
+              )}
+              .actionText=${this.supervisor.localize(
                 "addon.dashboard.protection_mode.enable"
               )}
-              </mwc-button>
-            </div>
-          </div>
-        </ha-card>
-      `
+              @alert-action-clicked=${this._protectionToggled}
+            >
+              ${this.supervisor.localize(
+                "addon.dashboard.protection_mode.content"
+              )}
+            </ha-alert>
+          `
         : ""}
 
       <ha-card>
@@ -249,6 +261,163 @@ 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",
+                  })}
+                  @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"
+              )}
+            </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>
+                `
+              : ""}
+          </div>
+
           <div class="description light-color">
             ${this.addon.description}.<br />
             ${this.supervisor.localize(
@@ -269,172 +438,6 @@ class HassioAddonInfo extends LitElement {
                     />
                   `
                 : ""}
-              <div class="security">
-                ${this.addon.stage !== "stable"
-                  ? html` <ha-label-badge
-                      class=${classMap({
-                        yellow: this.addon.stage === "experimental",
-                        red: this.addon.stage === "deprecated",
-                      })}
-                      @click=${this._showMoreInfo}
-                      id="stage"
-                      .label=${this.supervisor.localize(
-                        "addon.dashboard.capability.label.stage"
-                      )}
-                      description=""
-                    >
-                      <ha-svg-icon
-                        .path=${STAGE_ICON[this.addon.stage]}
-                      ></ha-svg-icon>
-                    </ha-label-badge>`
-                  : ""}
-
-                <ha-label-badge
-                  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"
-                  label="rating"
-                  description=""
-                >
-                  ${this.addon.rating}
-                </ha-label-badge>
-                ${this.addon.host_network
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="host_network"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.host"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.full_access
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="full_access"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hardware"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.homeassistant_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="homeassistant_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hass"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this._computeHassioApi
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="hassio_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hassio"
-                        )}
-                        .description=${this.supervisor.localize(
-                          `addon.dashboard.capability.role.${this.addon.hassio_role}`
-                        ) || this.addon.hassio_role}
-                      >
-                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.docker_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="docker_api"
-                        .label=".${this.supervisor.localize(
-                          "addon.dashboard.capability.label.docker"
-                        )}"
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.host_pid
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="host_pid"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.host_pid"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.apparmor
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        class=${this._computeApparmorClassName}
-                        id="apparmor"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.apparmor"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.auth_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="auth_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.auth"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.ingress
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="ingress"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.ingress"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon
-                          .path=${mdiCursorDefaultClickOutline}
-                        ></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-              </div>
-
               ${this.addon.version
                 ? html`
                     <div
@@ -1178,34 +1181,31 @@ 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);
+        }
+
         .red {
-          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+          --ha-chip-background-color: var(--label-badge-red, #df4c1e);
         }
         .blue {
-          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+          --ha-chip-background-color: var(--label-badge-blue, #039be5);
         }
         .green {
-          --ha-label-badge-color: var(--label-badge-green, #0da035);
+          --ha-chip-background-color: var(--label-badge-green, #0da035);
         }
         .yellow {
-          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+          --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
         }
-        .security {
+        .capabilities {
           margin-bottom: 16px;
         }
         .card-actions {
           justify-content: space-between;
           display: flex;
         }
-        .security h3 {
-          margin-bottom: 8px;
-          font-weight: normal;
-        }
-        .security ha-label-badge {
-          cursor: pointer;
-          margin-right: 4px;
-          --ha-label-badge-padding: 8px 0 0 0;
-        }
         .changelog {
           display: contents;
         }
@@ -1245,6 +1245,9 @@ class HassioAddonInfo extends LitElement {
         }
 
         @media (max-width: 720px) {
+          ha-chip {
+            line-height: 36px;
+          }
           .addon-options {
             max-width: 100%;
           }

hassio/src/backups/hassio-backups.ts

@@ -23,7 +23,8 @@ import {
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-svg-icon";
 import {
   fetchHassioBackups,
   friendlyFolderName,
@@ -31,6 +32,7 @@ import {
   reloadHassioBackups,
   removeBackup,
 } from "../../../src/data/hassio/backup";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -40,9 +42,9 @@ import "../../../src/layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
-import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
 import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload";
+import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
+import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 
@@ -179,9 +181,11 @@ export class HassioBackups extends LitElement {
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
-          <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-          </mwc-icon-button>
+          <ha-icon-button
+            .label=${this.hass.localize("common.menu")}
+            .path=${mdiDotsVertical}
+            slot="trigger"
+          ></ha-icon-button>
           <mwc-list-item>
             ${this.supervisor?.localize("common.reload")}
           </mwc-list-item>
@@ -216,13 +220,15 @@ export class HassioBackups extends LitElement {
                       </mwc-button>
                     `
                   : html`
-                      <mwc-icon-button
+                      <ha-icon-button
+                        .label=${this.supervisor.localize(
+                          "snapshot.delete_selected"
+                        )}
+                        .path=${mdiDelete}
                         id="delete-btn"
                         class="warning"
                         @click=${this._deleteSelected}
-                      >
-                        <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                      </mwc-icon-button>
+                      ></ha-icon-button>
                       <paper-tooltip animation-delay="0" for="delete-btn">
                         ${this.supervisor.localize("backup.delete_selected")}
                       </paper-tooltip>
@@ -368,7 +374,7 @@ export class HassioBackups extends LitElement {
           margin-right: -12px;
         }
         .header-btns > mwc-button,
-        .header-btns > mwc-icon-button {
+        .header-btns > ha-icon-button {
           margin: 8px;
         }
       `,

hassio/src/components/hassio-upload-backup.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
@@ -6,9 +5,8 @@ import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
-import "../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { HassioBackup, uploadBackup } from "../../../src/data/hassio/backup";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../src/types";
 
@@ -31,6 +29,7 @@ export class HassioUploadBackup extends LitElement {
   public render(): TemplateResult {
     return html`
       <ha-file-upload
+        .hass=${this.hass}
         .uploading=${this._uploading}
         .icon=${mdiFolderUpload}
         accept="application/x-tar"

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-icon-button";
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -52,9 +53,12 @@ export class DialogHassioBackupUpload
         <div slot="heading">
           <ha-header-bar>
             <span slot="title"> Upload backup </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
+            <ha-icon-button
+              .label=${this.hass.localize("common.close")}
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
         </div>
         <hassio-upload-backup

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -9,7 +9,7 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
@@ -76,9 +76,12 @@ class HassioBackupDialog
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
+            <ha-icon-button
+              .label=${this.hass.localize("common.close")}
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
         </div>
         ${this._restoringBackup
@@ -110,9 +113,11 @@ class HassioBackupDialog
               @action=${this._handleMenuAction}
               @closed=${stopPropagation}
             >
-              <mwc-icon-button slot="trigger" alt="menu">
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-              </mwc-icon-button>
+              <ha-icon-button
+                .label=${this.hass.localize("common.menu")}
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
               <mwc-list-item>Download Backup</mwc-list-item>
               <mwc-list-item class="error">Delete Backup</mwc-list-item>
             </ha-button-menu>`
@@ -126,9 +131,6 @@ class HassioBackupDialog
       haStyle,
       haStyleDialog,
       css`
-        ha-svg-icon {
-          color: var(--primary-text-color);
-        }
         ha-circular-progress {
           display: block;
           text-align: center;
@@ -139,6 +141,9 @@ class HassioBackupDialog
           flex-shrink: 0;
           display: block;
         }
+        ha-icon-button {
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -7,6 +7,7 @@ import "../../../../src/common/search/search-input";
 import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
+import "../../../../src/components/ha-icon-button";
 import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
 import { dump } from "../../../../src/resources/js-yaml-dump";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
@@ -70,10 +71,13 @@ class HassioHardwareDialog extends LitElement {
           <h2>
             ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
           </h2>
-          <mwc-icon-button dialogAction="close">
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-          </mwc-icon-button>
+          <ha-icon-button
+            .label=${this.hass.localize("common.close")}
+            .path=${mdiClose}
+            dialogAction="close"
+          ></ha-icon-button>
           <search-input
+            .hass=${this.hass}
             autofocus
             no-label-float
             .filter=${this._filter}
@@ -141,7 +145,7 @@ class HassioHardwareDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        mwc-icon-button {
+        ha-icon-button {
           position: absolute;
           right: 16px;
           top: 10px;

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -47,11 +47,6 @@ class HassioMarkdownDialog extends LitElement {
       haStyleDialog,
       hassioStyle,
       css`
-        ha-paper-dialog {
-          min-width: 350px;
-          font-size: 14px;
-          border-radius: 2px;
-        }
         app-toolbar {
           margin: 0;
           padding: 0 16px;
@@ -62,19 +57,6 @@ class HassioMarkdownDialog extends LitElement {
           margin-left: 16px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-paper-dialog {
-            max-height: 100%;
-          }
-          ha-paper-dialog::before {
-            content: "";
-            position: fixed;
-            z-index: -1;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            bottom: 0px;
-            background-color: inherit;
-          }
           app-toolbar {
             color: var(--text-primary-color);
             background-color: var(--primary-color);

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
@@ -16,9 +15,9 @@ import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-radio";
 import "../../../../src/components/ha-related-items";
-import "../../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   AccessPoints,
@@ -104,9 +103,12 @@ export class DialogHassioNetwork
             <span slot="title">
               ${this.supervisor.localize("dialog.network.title")}
             </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
+            <ha-icon-button
+              .label=${this.hass.localize("common.close")}
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
             ? html`<mwc-tab-bar

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDelete } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -7,7 +6,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   addHassioDockerRegistry,
@@ -110,16 +109,15 @@ class HassioRegistriesDialog extends LitElement {
                             )}:
                             ${entry.username}</span
                           >
-                          <mwc-icon-button
+                          <ha-icon-button
                             .entry=${entry}
-                            .title=${this.supervisor.localize(
+                            .label=${this.supervisor.localize(
                               "dialog.registries.remove"
                             )}
+                            .path=${mdiDelete}
                             slot="meta"
                             @click=${this._removeRegistry}
-                          >
-                            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                          </mwc-icon-button>
+                          ></ha-icon-button>
                         </mwc-list-item>
                       `
                     )
@@ -234,7 +232,7 @@ class HassioRegistriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        mwc-icon-button {
+        ha-icon-button {
           color: var(--error-color);
           margin: -10px;
         }

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -13,7 +12,7 @@ import { caseInsensitiveStringCompare } from "../../../../src/common/string/comp
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonsInfo,
   HassioAddonRepository,
@@ -90,15 +89,14 @@ class HassioRepositoriesDialog extends LitElement {
                       <div secondary>${repo.maintainer}</div>
                       <div secondary>${repo.url}</div>
                     </paper-item-body>
-                    <mwc-icon-button
+                    <ha-icon-button
                       .slug=${repo.slug}
-                      .title=${this._dialogParams!.supervisor.localize(
+                      .label=${this._dialogParams!.supervisor.localize(
                         "dialog.repositories.remove"
                       )}
+                      .path=${mdiDelete}
                       @click=${this._removeRepository}
-                    >
-                      <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                    </mwc-icon-button>
+                    ></ha-icon-button>
                   </paper-item>
                 `
               )

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -6,7 +6,6 @@ import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   extractApiErrorMessage,

hassio/src/hassio-main.ts

@@ -113,12 +113,6 @@ export class HassioMain extends SupervisorBaseElement {
           : this.hass.themes.default_theme);
 
       themeSettings = this.hass.selectedTheme;
-      if (themeSettings?.dark === undefined) {
-        themeSettings = {
-          ...this.hass.selectedTheme,
-          dark: this.hass.themes.darkMode,
-        };
-      }
     } else {
       themeName =
         (this.hass.selectedTheme as unknown as string) ||

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -12,6 +12,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import { nextRender } from "../../../src/common/util/render-status";
+import "../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
@@ -72,12 +73,11 @@ class HassioIngressView extends LitElement {
 
     return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
       ? html`<div class="header">
-            <mwc-icon-button
-              aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+            <ha-icon-button
+              .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+              .path=${mdiMenu}
               @click=${this._toggleMenu}
-            >
-              <ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
-            </mwc-icon-button>
+            ></ha-icon-button>
             <div class="main-title">${this._addon.name}</div>
           </div>
           ${iframe}`
@@ -241,7 +241,7 @@ class HassioIngressView extends LitElement {
         flex-grow: 1;
       }
 
-      mwc-icon-button {
+      ha-icon-button {
         pointer-events: auto;
       }
 

hassio/src/system/hassio-host-info.ts

@@ -9,6 +9,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
@@ -181,9 +182,11 @@ class HassioHostInfo extends LitElement {
             : ""}
 
           <ha-button-menu corner="BOTTOM_START">
-            <mwc-icon-button slot="trigger">
-              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-            </mwc-icon-button>
+            <ha-icon-button
+              .label=${this.hass.localize("common.menu")}
+              .path=${mdiDotsVertical}
+              slot="trigger"
+            ></ha-icon-button>
             <mwc-list-item
               .action=${"hardware"}
               @click=${this._handleMenuAction}

hassio/src/system/hassio-supervisor-info.ts

@@ -31,29 +31,9 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
-const UNSUPPORTED_REASON_URL = {
-  apparmor: "/more-info/unsupported/apparmor",
-  container: "/more-info/unsupported/container",
-  content_trust: "/more-info/unsupported/content_trust",
-  dbus: "/more-info/unsupported/dbus",
-  docker_configuration: "/more-info/unsupported/docker_configuration",
-  docker_version: "/more-info/unsupported/docker_version",
-  job_conditions: "/more-info/unsupported/job_conditions",
-  lxc: "/more-info/unsupported/lxc",
-  network_manager: "/more-info/unsupported/network_manager",
-  os_agent: "/more-info/unsupported/os_agent",
-  os: "/more-info/unsupported/os",
-  privileged: "/more-info/unsupported/privileged",
-  source_mods: "/more-info/unsupported/source_mods",
-  systemd: "/more-info/unsupported/systemd",
-};
-
+const UNSUPPORTED_REASON_URL = {};
 const UNHEALTHY_REASON_URL = {
   privileged: "/more-info/unsupported/privileged",
-  supervisor: "/more-info/unhealthy/supervisor",
-  setup: "/more-info/unhealthy/setup",
-  docker: "/more-info/unhealthy/docker",
-  untrusted: "/more-info/unhealthy/untrusted",
 };
 
 @customElement("hassio-supervisor-info")
@@ -425,20 +405,19 @@ class HassioSupervisorInfo extends LitElement {
           ${this.supervisor.resolution.unsupported.map(
             (reason) => html`
               <li>
-                ${UNSUPPORTED_REASON_URL[reason]
-                  ? html`<a
-                      href=${documentationUrl(
-                        this.hass,
-                        UNSUPPORTED_REASON_URL[reason]
-                      )}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      ${this.supervisor.localize(
-                        `system.supervisor.unsupported_reason.${reason}`
-                      ) || reason}
-                    </a>`
-                  : reason}
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    UNSUPPORTED_REASON_URL[reason] ||
+                      `/more-info/unsupported/${reason}`
+                  )}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.supervisor.localize(
+                    `system.supervisor.unsupported_reason.${reason}`
+                  ) || reason}
+                </a>
               </li>
             `
           )}
@@ -456,20 +435,19 @@ class HassioSupervisorInfo extends LitElement {
           ${this.supervisor.resolution.unhealthy.map(
             (reason) => html`
               <li>
-                ${UNHEALTHY_REASON_URL[reason]
-                  ? html`<a
-                      href=${documentationUrl(
-                        this.hass,
-                        UNHEALTHY_REASON_URL[reason]
-                      )}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      ${this.supervisor.localize(
-                        `system.supervisor.unhealthy_reason.${reason}`
-                      ) || reason}
-                    </a>`
-                  : reason}
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    UNHEALTHY_REASON_URL[reason] ||
+                      `/more-info/unhealthy/${reason}`
+                  )}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.supervisor.localize(
+                    `system.supervisor.unhealthy_reason.${reason}`
+                  ) || reason}
+                </a>
               </li>
             `
           )}

package.json

@@ -22,23 +22,23 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.2",
-    "@codemirror/commands": "^0.19.2",
-    "@codemirror/gutter": "^0.19.1",
-    "@codemirror/highlight": "^0.19.2",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/gutter": "^0.19.3",
+    "@codemirror/highlight": "^0.19.6",
     "@codemirror/history": "^0.19.0",
     "@codemirror/legacy-modes": "^0.19.0",
-    "@codemirror/rectangular-selection": "^0.19.0",
-    "@codemirror/search": "^0.19.0",
-    "@codemirror/state": "^0.19.1",
-    "@codemirror/stream-parser": "^0.19.1",
-    "@codemirror/text": "^0.19.2",
-    "@codemirror/view": "^0.19.4",
-    "@formatjs/intl-datetimeformat": "^4.2.4",
-    "@formatjs/intl-getcanonicallocales": "^1.7.3",
-    "@formatjs/intl-locale": "^2.4.38",
-    "@formatjs/intl-numberformat": "^7.2.4",
-    "@formatjs/intl-pluralrules": "^4.1.4",
-    "@formatjs/intl-relativetimeformat": "^9.3.1",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
+    "@codemirror/state": "^0.19.2",
+    "@codemirror/stream-parser": "^0.19.2",
+    "@codemirror/text": "^0.19.4",
+    "@codemirror/view": "^0.19.9",
+    "@formatjs/intl-datetimeformat": "^4.2.5",
+    "@formatjs/intl-getcanonicallocales": "^1.8.0",
+    "@formatjs/intl-locale": "^2.4.40",
+    "@formatjs/intl-numberformat": "^7.2.5",
+    "@formatjs/intl-pluralrules": "^4.1.5",
+    "@formatjs/intl-relativetimeformat": "^9.3.2",
     "@formatjs/intl-utils": "^3.8.4",
     "@fullcalendar/common": "5.9.0",
     "@fullcalendar/core": "5.9.0",
@@ -46,45 +46,38 @@
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
     "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
-    "@material/chips": "13.0.0-canary.65125b3a6.0",
-    "@material/data-table": "13.0.0-canary.65125b3a6.0",
-    "@material/mwc-button": "0.25.1",
-    "@material/mwc-checkbox": "0.25.1",
-    "@material/mwc-circular-progress": "0.25.1",
-    "@material/mwc-dialog": "0.25.1",
-    "@material/mwc-fab": "0.25.1",
-    "@material/mwc-formfield": "0.25.1",
-    "@material/mwc-icon-button": "0.25.1",
-    "@material/mwc-linear-progress": "0.25.1",
-    "@material/mwc-list": "0.25.1",
-    "@material/mwc-menu": "0.25.1",
-    "@material/mwc-radio": "0.25.1",
-    "@material/mwc-ripple": "0.25.1",
-    "@material/mwc-switch": "0.25.1",
-    "@material/mwc-tab": "0.25.1",
-    "@material/mwc-tab-bar": "0.25.1",
-    "@material/top-app-bar": "13.0.0-canary.65125b3a6.0",
-    "@mdi/js": "6.2.95",
-    "@mdi/svg": "6.2.95",
+    "@material/chips": "14.0.0-canary.261f2db59.0",
+    "@material/data-table": "14.0.0-canary.261f2db59.0",
+    "@material/mwc-button": "0.25.3",
+    "@material/mwc-checkbox": "0.25.3",
+    "@material/mwc-circular-progress": "0.25.3",
+    "@material/mwc-dialog": "0.25.3",
+    "@material/mwc-fab": "0.25.3",
+    "@material/mwc-formfield": "0.25.3",
+    "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch",
+    "@material/mwc-linear-progress": "0.25.3",
+    "@material/mwc-list": "0.25.3",
+    "@material/mwc-menu": "0.25.3",
+    "@material/mwc-radio": "0.25.3",
+    "@material/mwc-ripple": "0.25.3",
+    "@material/mwc-select": "0.25.3",
+    "@material/mwc-slider": "0.25.3",
+    "@material/mwc-switch": "0.25.3",
+    "@material/mwc-tab": "0.25.3",
+    "@material/mwc-tab-bar": "0.25.3",
+    "@material/mwc-textfield": "0.25.3",
+    "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
+    "@mdi/js": "6.4.95",
+    "@mdi/svg": "6.4.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-overlay-behavior": "^3.0.3",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-checkbox": "^3.1.0",
-    "@polymer/paper-dialog": "^3.0.1",
-    "@polymer/paper-dialog-behavior": "^3.0.1",
-    "@polymer/paper-dialog-scrollable": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
-    "@polymer/paper-menu-button": "^3.1.0",
-    "@polymer/paper-progress": "^3.0.1",
-    "@polymer/paper-radio-button": "^3.0.1",
-    "@polymer/paper-radio-group": "^3.0.1",
-    "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.1.0",
@@ -115,7 +108,7 @@
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.0",
+    "lit": "^2.0.2",
     "lit-vaadin-helpers": "^0.2.1",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
@@ -187,7 +180,7 @@
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-lit": "^1.5.1",
+    "eslint-plugin-lit": "^1.6.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-unused-imports": "^1.1.5",
     "eslint-plugin-wc": "^1.3.2",
@@ -237,10 +230,10 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.0.0",
-    "lit-html": "2.0.0",
-    "lit-element": "3.0.0",
-    "@lit/reactive-element": "1.0.0"
+    "lit": "^2.0.2",
+    "lit-html": "2.0.1",
+    "lit-element": "3.0.1",
+    "@lit/reactive-element": "1.0.1"
   },
   "main": "src/home-assistant.js",
   "husky": {

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20211007.1",
+    version="20211026.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",

src/auth/ha-auth-flow.ts

@@ -7,16 +7,20 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import "./ha-password-manager-polyfill";
 import { property, state } from "lit/decorators";
+import "../components/ha-checkbox";
 import "../components/ha-form/ha-form";
+import "../components/ha-formfield";
 import "../components/ha-markdown";
+import "../components/ha-alert";
 import { AuthProvider } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
+import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
+import "./ha-password-manager-polyfill";
 
 type State = "loading" | "error" | "step";
 
@@ -31,12 +35,44 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _state: State = "loading";
 
-  @state() private _stepData: any = {};
+  @state() private _stepData?: Record<string, any>;
 
   @state() private _step?: DataEntryFlowStep;
 
   @state() private _errorMessage?: string;
 
+  @state() private _submitting = false;
+
+  @state() private _storeToken = false;
+
+  willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!changedProps.has("_step")) {
+      return;
+    }
+
+    if (!this._step) {
+      this._stepData = undefined;
+      return;
+    }
+
+    const oldStep = changedProps.get("_step") as HaAuthFlow["_step"];
+
+    if (
+      !oldStep ||
+      this._step.flow_id !== oldStep.flow_id ||
+      (this._step.type === "form" &&
+        oldStep.type === "form" &&
+        this._step.step_id !== oldStep.step_id)
+    ) {
+      this._stepData =
+        this._step.type === "form"
+          ? computeInitialHaFormData(this._step.data_schema)
+          : undefined;
+    }
+  }
+
   protected render() {
     return html`
       <form>${this._renderForm()}</form>
@@ -76,6 +112,24 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     if (changedProps.has("authProvider")) {
       this._providerChanged(this.authProvider);
     }
+
+    if (!changedProps.has("_step") || this._step?.type !== "form") {
+      return;
+    }
+
+    // 100ms to give all the form elements time to initialize.
+    setTimeout(() => {
+      const form = this.renderRoot.querySelector("ha-form");
+      if (form) {
+        (form as any).focus();
+      }
+    }, 100);
+
+    setTimeout(() => {
+      this.renderRoot.querySelector(
+        "ha-password-manager-polyfill"
+      )!.boundingRect = this.getBoundingClientRect();
+    }, 500);
   }
 
   private _renderForm(): TemplateResult {
@@ -87,27 +141,33 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         return html`
           ${this._renderStep(this._step)}
           <div class="action">
-            <mwc-button raised @click=${this._handleSubmit}
-              >${this._step.type === "form"
-                ? this.localize("ui.panel.page-authorize.form.next")
-                : this.localize(
-                    "ui.panel.page-authorize.form.start_over"
-                  )}</mwc-button
+            <mwc-button
+              raised
+              @click=${this._handleSubmit}
+              .disabled=${this._submitting}
             >
+              ${this._step.type === "form"
+                ? this.localize("ui.panel.page-authorize.form.next")
+                : this.localize("ui.panel.page-authorize.form.start_over")}
+            </mwc-button>
           </div>
         `;
       case "error":
         return html`
-          <div class="error">
+          <ha-alert alert-type="error">
             ${this.localize(
               "ui.panel.page-authorize.form.error",
               "error",
               this._errorMessage
             )}
-          </div>
+          </ha-alert>
         `;
       case "loading":
-        return html` ${this.localize("ui.panel.page-authorize.form.working")} `;
+        return html`
+          <ha-alert alert-type="info">
+            ${this.localize("ui.panel.page-authorize.form.working")}
+          </ha-alert>
+        `;
       default:
         return html``;
     }
@@ -140,16 +200,34 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             .data=${this._stepData}
             .schema=${step.data_schema}
             .error=${step.errors}
+            .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}
             .computeError=${this._computeErrorCallback(step)}
             @value-changed=${this._stepDataChanged}
           ></ha-form>
+          ${this.clientId === window.location.origin && step.step_id !== "mfa"
+            ? html`
+                <ha-formfield
+                  class="store-token"
+                  .label=${this.localize("ui.panel.page-authorize.store_token")}
+                >
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
+                  ></ha-checkbox>
+                </ha-formfield>
+              `
+            : ""}
         `;
       default:
         return html``;
     }
   }
 
+  private _storeTokenChanged(e: CustomEvent<HTMLInputElement>) {
+    this._storeToken = (e.currentTarget as HTMLInputElement).checked;
+  }
+
   private async _providerChanged(newProvider?: AuthProvider) {
     if (this._step && this._step.type === "form") {
       fetch(`/auth/login_flow/${this._step.flow_id}`, {
@@ -189,7 +267,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
           return;
         }
 
-        await this._updateStep(data);
+        this._step = data;
+        this._state = "step";
       } else {
         this._state = "error";
         this._errorMessage = data.message;
@@ -216,43 +295,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     if (this.oauth2State) {
       url += `&state=${encodeURIComponent(this.oauth2State)}`;
     }
+    if (this._storeToken) {
+      url += `&storeToken=true`;
+    }
 
     document.location.assign(url);
   }
 
-  private async _updateStep(step: DataEntryFlowStep) {
-    let stepData: any = null;
-    if (
-      this._step &&
-      (step.flow_id !== this._step.flow_id ||
-        (step.type === "form" &&
-          this._step.type === "form" &&
-          step.step_id !== this._step.step_id))
-    ) {
-      stepData = {};
-    }
-    this._step = step;
-    this._state = "step";
-    if (stepData != null) {
-      this._stepData = stepData;
-    }
-
-    await this.updateComplete;
-    // 100ms to give all the form elements time to initialize.
-    setTimeout(() => {
-      const form = this.renderRoot.querySelector("ha-form");
-      if (form) {
-        (form as any).focus();
-      }
-    }, 100);
-
-    setTimeout(() => {
-      this.renderRoot.querySelector(
-        "ha-password-manager-polyfill"
-      )!.boundingRect = this.getBoundingClientRect();
-    }, 500);
-  }
-
   private _stepDataChanged(ev: CustomEvent) {
     this._stepData = ev.detail.value;
   }
@@ -297,9 +346,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
       this._providerChanged(this.authProvider);
       return;
     }
-    this._state = "loading";
-    // To avoid a jumping UI.
-    this.style.setProperty("min-height", `${this.offsetHeight}px`);
+    this._submitting = true;
 
     const postData = { ...this._stepData, client_id: this.clientId };
 
@@ -316,29 +363,28 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         this._redirect(newStep.result);
         return;
       }
-      await this._updateStep(newStep);
+      this._step = newStep;
+      this._state = "step";
     } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error("Error submitting step", err);
       this._state = "error";
       this._errorMessage = this._unknownError();
     } finally {
-      this.style.setProperty("min-height", "");
+      this._submitting = false;
     }
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        /* So we can set min-height to avoid jumping during loading */
-        display: block;
-      }
       .action {
         margin: 24px 0 8px;
         text-align: center;
       }
-      .error {
-        color: red;
+      /* Align with the rest of the form. */
+      .store-token {
+        margin-top: 10px;
+        margin-left: -16px;
       }
     `;
   }

src/auth/ha-authorize.ts

@@ -174,6 +174,10 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         display: block;
         margin-top: 48px;
       }
+      ha-auth-flow {
+        display: block;
+        margin-top: 24px;
+      }
     `;
   }
 }

src/auth/ha-password-manager-polyfill.ts

@@ -2,8 +2,8 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { HaFormSchema } from "../components/ha-form/ha-form";
-import { DataEntryFlowStep } from "../data/data_entry_flow";
+import type { HaFormSchema } from "../components/ha-form/types";
+import type { DataEntryFlowStep } from "../data/data_entry_flow";
 
 declare global {
   interface HTMLElementTagNameMap {

src/common/auth/token_storage.ts

@@ -30,6 +30,14 @@ export function askWrite() {
 
 export function saveTokens(tokens: AuthData | null) {
   tokenCache.tokens = tokens;
+
+  if (
+    !tokenCache.writeEnabled &&
+    new URLSearchParams(window.location.search).get("storeToken") === "true"
+  ) {
+    tokenCache.writeEnabled = true;
+  }
+
   if (tokenCache.writeEnabled) {
     try {
       storage.hassTokens = JSON.stringify(tokens);
@@ -45,7 +53,6 @@ export function enableWrite() {
     saveTokens(tokenCache.tokens);
   }
 }
-
 export function loadTokens() {
   if (tokenCache.tokens === undefined) {
     try {

src/common/config/version.ts

@@ -4,6 +4,10 @@ export const atLeastVersion = (
   minor: number,
   patch?: number
 ): boolean => {
+  if (__DEMO__) {
+    return true;
+  }
+
   const [haMajor, haMinor, haPatch] = version.split(".", 3);
 
   return (

src/common/const.ts

@@ -1,88 +1,146 @@
 /** Constants to be used in the frontend. */
 
+import {
+  mdiAccount,
+  mdiAirFilter,
+  mdiAlert,
+  mdiAngleAcute,
+  mdiAppleSafari,
+  mdiBell,
+  mdiBookmark,
+  mdiBrightness5,
+  mdiBullhorn,
+  mdiCalendar,
+  mdiCalendarClock,
+  mdiCash,
+  mdiClock,
+  mdiCloudUpload,
+  mdiCog,
+  mdiCommentAlert,
+  mdiCounter,
+  mdiCurrentAc,
+  mdiEye,
+  mdiFan,
+  mdiFlash,
+  mdiFlower,
+  mdiFormatListBulleted,
+  mdiFormTextbox,
+  mdiGasCylinder,
+  mdiGauge,
+  mdiGoogleAssistant,
+  mdiGoogleCirclesCommunities,
+  mdiHomeAssistant,
+  mdiHomeAutomation,
+  mdiImageFilterFrames,
+  mdiLightbulb,
+  mdiLightningBolt,
+  mdiMailbox,
+  mdiMapMarkerRadius,
+  mdiMolecule,
+  mdiMoleculeCo,
+  mdiMoleculeCo2,
+  mdiPalette,
+  mdiRayVertex,
+  mdiRemote,
+  mdiRobot,
+  mdiRobotVacuum,
+  mdiScriptText,
+  mdiSineWave,
+  mdiTextToSpeech,
+  mdiThermometer,
+  mdiThermostat,
+  mdiTimerOutline,
+  mdiToggleSwitchOutline,
+  mdiVideo,
+  mdiWaterPercent,
+  mdiWeatherCloudy,
+  mdiWhiteBalanceSunny,
+  mdiWifi,
+} from "@mdi/js";
+
 // Constants should be alphabetically sorted by name.
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.
 
 /** Icon to use when no icon specified for domain. */
-export const DEFAULT_DOMAIN_ICON = "hass:bookmark";
+export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
-  alert: "hass:alert",
-  alexa: "hass:amazon-alexa",
-  air_quality: "hass:air-filter",
-  automation: "hass:robot",
-  calendar: "hass:calendar",
-  camera: "hass:video",
-  climate: "hass:thermostat",
-  configurator: "hass:cog",
-  conversation: "hass:text-to-speech",
-  counter: "hass:counter",
-  device_tracker: "hass:account",
-  fan: "hass:fan",
-  google_assistant: "hass:google-assistant",
-  group: "hass:google-circles-communities",
-  homeassistant: "hass:home-assistant",
-  homekit: "hass:home-automation",
-  image_processing: "hass:image-filter-frames",
-  input_boolean: "hass:toggle-switch-outline",
-  input_datetime: "hass:calendar-clock",
-  input_number: "hass:ray-vertex",
-  input_select: "hass:format-list-bulleted",
-  input_text: "hass:form-textbox",
-  light: "hass:lightbulb",
-  mailbox: "hass:mailbox",
-  notify: "hass:comment-alert",
-  number: "hass:ray-vertex",
-  persistent_notification: "hass:bell",
-  person: "hass:account",
-  plant: "hass:flower",
-  proximity: "hass:apple-safari",
-  remote: "hass:remote",
-  scene: "hass:palette",
-  script: "hass:script-text",
-  select: "hass:format-list-bulleted",
-  sensor: "hass:eye",
-  simple_alarm: "hass:bell",
-  sun: "hass:white-balance-sunny",
-  switch: "hass:flash",
-  timer: "hass:timer-outline",
-  updater: "hass:cloud-upload",
-  vacuum: "hass:robot-vacuum",
-  water_heater: "hass:thermometer",
-  weather: "hass:weather-cloudy",
-  zone: "hass:map-marker-radius",
+  alert: mdiAlert,
+  air_quality: mdiAirFilter,
+  automation: mdiRobot,
+  calendar: mdiCalendar,
+  camera: mdiVideo,
+  climate: mdiThermostat,
+  configurator: mdiCog,
+  conversation: mdiTextToSpeech,
+  counter: mdiCounter,
+  device_tracker: mdiAccount,
+  fan: mdiFan,
+  google_assistant: mdiGoogleAssistant,
+  group: mdiGoogleCirclesCommunities,
+  homeassistant: mdiHomeAssistant,
+  homekit: mdiHomeAutomation,
+  image_processing: mdiImageFilterFrames,
+  input_boolean: mdiToggleSwitchOutline,
+  input_datetime: mdiCalendarClock,
+  input_number: mdiRayVertex,
+  input_select: mdiFormatListBulleted,
+  input_text: mdiFormTextbox,
+  light: mdiLightbulb,
+  mailbox: mdiMailbox,
+  notify: mdiCommentAlert,
+  number: mdiRayVertex,
+  persistent_notification: mdiBell,
+  person: mdiAccount,
+  plant: mdiFlower,
+  proximity: mdiAppleSafari,
+  remote: mdiRemote,
+  scene: mdiPalette,
+  script: mdiScriptText,
+  select: mdiFormatListBulleted,
+  sensor: mdiEye,
+  siren: mdiBullhorn,
+  simple_alarm: mdiBell,
+  sun: mdiWhiteBalanceSunny,
+  switch: mdiFlash,
+  timer: mdiTimerOutline,
+  updater: mdiCloudUpload,
+  vacuum: mdiRobotVacuum,
+  water_heater: mdiThermometer,
+  weather: mdiWeatherCloudy,
+  zone: mdiMapMarkerRadius,
 };
 
 export const FIXED_DEVICE_CLASS_ICONS = {
-  aqi: "hass:air-filter",
-  battery: "hass:battery",
-  carbon_dioxide: "mdi:molecule-co2",
-  carbon_monoxide: "mdi:molecule-co",
-  current: "hass:current-ac",
-  date: "hass:calendar",
-  energy: "hass:lightning-bolt",
-  gas: "hass:gas-cylinder",
-  humidity: "hass:water-percent",
-  illuminance: "hass:brightness-5",
-  monetary: "mdi:cash",
-  nitrogen_dioxide: "mdi:molecule",
-  nitrogen_monoxide: "mdi:molecule",
-  nitrous_oxide: "mdi:molecule",
-  ozone: "mdi:molecule",
-  pm1: "mdi:molecule",
-  pm10: "mdi:molecule",
-  pm25: "mdi:molecule",
-  power: "hass:flash",
-  power_factor: "hass:angle-acute",
-  pressure: "hass:gauge",
-  signal_strength: "hass:wifi",
-  sulphur_dioxide: "mdi:molecule",
-  temperature: "hass:thermometer",
-  timestamp: "hass:clock",
-  volatile_organic_compounds: "mdi:molecule",
-  voltage: "hass:sine-wave",
+  aqi: mdiAirFilter,
+  // battery: mdiBattery, => not included by design since `sensorIcon()` will dynamically determine the icon
+  carbon_dioxide: mdiMoleculeCo2,
+  carbon_monoxide: mdiMoleculeCo,
+  current: mdiCurrentAc,
+  date: mdiCalendar,
+  energy: mdiLightningBolt,
+  gas: mdiGasCylinder,
+  humidity: mdiWaterPercent,
+  illuminance: mdiBrightness5,
+  monetary: mdiCash,
+  nitrogen_dioxide: mdiMolecule,
+  nitrogen_monoxide: mdiMolecule,
+  nitrous_oxide: mdiMolecule,
+  ozone: mdiMolecule,
+  pm1: mdiMolecule,
+  pm10: mdiMolecule,
+  pm25: mdiMolecule,
+  power: mdiFlash,
+  power_factor: mdiAngleAcute,
+  pressure: mdiGauge,
+  signal_strength: mdiWifi,
+  sulphur_dioxide: mdiMolecule,
+  temperature: mdiThermometer,
+  timestamp: mdiClock,
+  volatile_organic_compounds: mdiMolecule,
+  voltage: mdiSineWave,
 };
 
 /** Domains that have a state card. */

src/common/dom/apply_themes_on_element.ts

@@ -36,55 +36,62 @@ export const applyThemesOnElement = (
   let cacheKey = selectedTheme;
   let themeRules: Partial<ThemeVars> = {};
 
-  if (themeSettings) {
-    if (themeSettings.dark) {
-      cacheKey = `${cacheKey}__dark`;
-      themeRules = { ...darkStyles };
+  // If there is no explicitly desired dark mode provided, we automatically
+  // use the active one from hass.themes.
+  if (!themeSettings || themeSettings?.dark === undefined) {
+    themeSettings = {
+      ...themeSettings,
+      dark: themes.darkMode,
+    };
+  }
+
+  if (themeSettings.dark) {
+    cacheKey = `${cacheKey}__dark`;
+    themeRules = { ...darkStyles };
+  }
+
+  if (selectedTheme === "default") {
+    // Determine the primary and accent colors from the current settings.
+    // Fallbacks are implicitly the HA default blue and orange or the
+    // derived "darkStyles" values, depending on the light vs dark mode.
+    const primaryColor = themeSettings.primaryColor;
+    const accentColor = themeSettings.accentColor;
+
+    if (themeSettings.dark && primaryColor) {
+      themeRules["app-header-background-color"] = hexBlend(
+        primaryColor,
+        "#121212",
+        8
+      );
     }
 
-    if (selectedTheme === "default") {
-      // Determine the primary and accent colors from the current settings.
-      // Fallbacks are implicitly the HA default blue and orange or the
-      // derived "darkStyles" values, depending on the light vs dark mode.
-      const primaryColor = themeSettings.primaryColor;
-      const accentColor = themeSettings.accentColor;
+    if (primaryColor) {
+      cacheKey = `${cacheKey}__primary_${primaryColor}`;
+      const rgbPrimaryColor = hex2rgb(primaryColor);
+      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
+      themeRules["primary-color"] = primaryColor;
+      const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
+      themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
+      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
+      themeRules["text-primary-color"] =
+        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+      themeRules["text-light-primary-color"] =
+        rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
+          ? "#fff"
+          : "#212121";
+      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
+    }
+    if (accentColor) {
+      cacheKey = `${cacheKey}__accent_${accentColor}`;
+      themeRules["accent-color"] = accentColor;
+      const rgbAccentColor = hex2rgb(accentColor);
+      themeRules["text-accent-color"] =
+        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+    }
 
-      if (themeSettings.dark && primaryColor) {
-        themeRules["app-header-background-color"] = hexBlend(
-          primaryColor,
-          "#121212",
-          8
-        );
-      }
-
-      if (primaryColor) {
-        cacheKey = `${cacheKey}__primary_${primaryColor}`;
-        const rgbPrimaryColor = hex2rgb(primaryColor);
-        const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-        themeRules["primary-color"] = primaryColor;
-        const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-        themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
-        themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
-        themeRules["text-primary-color"] =
-          rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-        themeRules["text-light-primary-color"] =
-          rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
-            ? "#fff"
-            : "#212121";
-        themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-      }
-      if (accentColor) {
-        cacheKey = `${cacheKey}__accent_${accentColor}`;
-        themeRules["accent-color"] = accentColor;
-        const rgbAccentColor = hex2rgb(accentColor);
-        themeRules["text-accent-color"] =
-          rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-      }
-
-      // Nothing was changed
-      if (element._themes?.cacheKey === cacheKey) {
-        return;
-      }
+    // Nothing was changed
+    if (element._themes?.cacheKey === cacheKey) {
+      return;
     }
   }
 

src/common/entity/alarm_panel_icon.ts

@@ -1,24 +1,36 @@
 /** Return an icon representing a alarm panel state. */
 
+import {
+  mdiShieldLock,
+  mdiShieldAirplane,
+  mdiShieldHome,
+  mdiShieldMoon,
+  mdiSecurity,
+  mdiShieldOutline,
+  mdiBellRing,
+  mdiShieldOff,
+  mdiShield,
+} from "@mdi/js";
+
 export const alarmPanelIcon = (state?: string) => {
   switch (state) {
     case "armed_away":
-      return "hass:shield-lock";
+      return mdiShieldLock;
     case "armed_vacation":
-      return "hass:shield-airplane";
+      return mdiShieldAirplane;
     case "armed_home":
-      return "hass:shield-home";
+      return mdiShieldHome;
     case "armed_night":
-      return "hass:shield-moon";
+      return mdiShieldMoon;
     case "armed_custom_bypass":
-      return "hass:security";
+      return mdiSecurity;
     case "pending":
-      return "hass:shield-outline";
+      return mdiShieldOutline;
     case "triggered":
-      return "hass:bell-ring";
+      return mdiBellRing;
     case "disarmed":
-      return "hass:shield-off";
+      return mdiShieldOff;
     default:
-      return "hass:shield";
+      return mdiShield;
   }
 };

src/common/entity/battery_icon.ts

@@ -1,35 +1,92 @@
 /** Return an icon representing a battery state. */
+import {
+  mdiBattery,
+  mdiBattery10,
+  mdiBattery20,
+  mdiBattery30,
+  mdiBattery40,
+  mdiBattery50,
+  mdiBattery60,
+  mdiBattery70,
+  mdiBattery80,
+  mdiBattery90,
+  mdiBatteryAlert,
+  mdiBatteryAlertVariantOutline,
+  mdiBatteryCharging,
+  mdiBatteryCharging10,
+  mdiBatteryCharging20,
+  mdiBatteryCharging30,
+  mdiBatteryCharging40,
+  mdiBatteryCharging50,
+  mdiBatteryCharging60,
+  mdiBatteryCharging70,
+  mdiBatteryCharging80,
+  mdiBatteryCharging90,
+  mdiBatteryChargingOutline,
+  mdiBatteryUnknown,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
-export const batteryIcon = (
+const BATTERY_ICONS = {
+  10: mdiBattery10,
+  20: mdiBattery20,
+  30: mdiBattery30,
+  40: mdiBattery40,
+  50: mdiBattery50,
+  60: mdiBattery60,
+  70: mdiBattery70,
+  80: mdiBattery80,
+  90: mdiBattery90,
+  100: mdiBattery,
+};
+const BATTERY_CHARGING_ICONS = {
+  10: mdiBatteryCharging10,
+  20: mdiBatteryCharging20,
+  30: mdiBatteryCharging30,
+  40: mdiBatteryCharging40,
+  50: mdiBatteryCharging50,
+  60: mdiBatteryCharging60,
+  70: mdiBatteryCharging70,
+  80: mdiBatteryCharging80,
+  90: mdiBatteryCharging90,
+  100: mdiBatteryCharging,
+};
+
+export const batteryStateIcon = (
   batteryState: HassEntity,
   batteryChargingState?: HassEntity
 ) => {
-  const battery = Number(batteryState.state);
-  const battery_charging =
+  const battery = batteryState.state;
+  const batteryCharging =
     batteryChargingState && batteryChargingState.state === "on";
-  let icon = "hass:battery";
 
-  if (isNaN(battery)) {
-    if (batteryState.state === "off") {
-      icon += "-full";
-    } else if (batteryState.state === "on") {
-      icon += "-alert";
-    } else {
-      icon += "-unknown";
-    }
-    return icon;
-  }
-
-  const batteryRound = Math.round(battery / 10) * 10;
-  if (battery_charging && battery > 10) {
-    icon += `-charging-${batteryRound}`;
-  } else if (battery_charging) {
-    icon += "-outline";
-  } else if (battery <= 5) {
-    icon += "-alert";
-  } else if (battery > 5 && battery < 95) {
-    icon += `-${batteryRound}`;
-  }
-  return icon;
+  return batteryIcon(battery, batteryCharging);
+};
+
+export const batteryIcon = (
+  batteryState: number | string,
+  batteryCharging?: boolean
+) => {
+  const batteryValue = Number(batteryState);
+  if (isNaN(batteryValue)) {
+    if (batteryState === "off") {
+      return mdiBattery;
+    }
+    if (batteryState === "on") {
+      return mdiBatteryAlert;
+    }
+    return mdiBatteryUnknown;
+  }
+
+  const batteryRound = Math.round(batteryValue / 10) * 10;
+  if (batteryCharging && batteryValue >= 10) {
+    return BATTERY_CHARGING_ICONS[batteryRound];
+  }
+  if (batteryCharging) {
+    return mdiBatteryChargingOutline;
+  }
+  if (batteryValue <= 5) {
+    return mdiBatteryAlertVariantOutline;
+  }
+  return BATTERY_ICONS[batteryRound];
 };

src/common/entity/binary_sensor_icon.ts

@@ -1,3 +1,46 @@
+import {
+  mdiAlertCircle,
+  mdiBattery,
+  mdiBatteryCharging,
+  mdiBatteryOutline,
+  mdiBrightness5,
+  mdiBrightness7,
+  mdiCheckboxMarkedCircle,
+  mdiCheckCircle,
+  mdiCropPortrait,
+  mdiDoorClosed,
+  mdiDoorOpen,
+  mdiFire,
+  mdiGarage,
+  mdiGarageOpen,
+  mdiHome,
+  mdiHomeOutline,
+  mdiLock,
+  mdiLockOpen,
+  mdiMusicNote,
+  mdiMusicNoteOff,
+  mdiPackage,
+  mdiPackageUp,
+  mdiPlay,
+  mdiPowerPlug,
+  mdiPowerPlugOff,
+  mdiRadioboxBlank,
+  mdiRun,
+  mdiServerNetwork,
+  mdiServerNetworkOff,
+  mdiSmoke,
+  mdiSnowflake,
+  mdiSquare,
+  mdiSquareOutline,
+  mdiStop,
+  mdiThermometer,
+  mdiVibrate,
+  mdiWalk,
+  mdiWater,
+  mdiWaterOff,
+  mdiWindowClosed,
+  mdiWindowOpen,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
 /** Return an icon representing a binary sensor state. */
@@ -6,52 +49,55 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
   const is_off = state === "off";
   switch (stateObj?.attributes.device_class) {
     case "battery":
-      return is_off ? "hass:battery" : "hass:battery-outline";
+      return is_off ? mdiBattery : mdiBatteryOutline;
     case "battery_charging":
-      return is_off ? "hass:battery" : "hass:battery-charging";
+      return is_off ? mdiBattery : mdiBatteryCharging;
     case "cold":
-      return is_off ? "hass:thermometer" : "hass:snowflake";
+      return is_off ? mdiThermometer : mdiSnowflake;
     case "connectivity":
-      return is_off ? "hass:server-network-off" : "hass:server-network";
+      return is_off ? mdiServerNetworkOff : mdiServerNetwork;
     case "door":
-      return is_off ? "hass:door-closed" : "hass:door-open";
+      return is_off ? mdiDoorClosed : mdiDoorOpen;
     case "garage_door":
-      return is_off ? "hass:garage" : "hass:garage-open";
+      return is_off ? mdiGarage : mdiGarageOpen;
     case "power":
-      return is_off ? "hass:power-plug-off" : "hass:power-plug";
+      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
     case "gas":
     case "problem":
     case "safety":
-      return is_off ? "hass:check-circle" : "hass:alert-circle";
+    case "tamper":
+      return is_off ? mdiCheckCircle : mdiAlertCircle;
     case "smoke":
-      return is_off ? "hass:check-circle" : "hass:smoke";
+      return is_off ? mdiCheckCircle : mdiSmoke;
     case "heat":
-      return is_off ? "hass:thermometer" : "hass:fire";
+      return is_off ? mdiThermometer : mdiFire;
     case "light":
-      return is_off ? "hass:brightness-5" : "hass:brightness-7";
+      return is_off ? mdiBrightness5 : mdiBrightness7;
     case "lock":
-      return is_off ? "hass:lock" : "hass:lock-open";
+      return is_off ? mdiLock : mdiLockOpen;
     case "moisture":
-      return is_off ? "hass:water-off" : "hass:water";
+      return is_off ? mdiWaterOff : mdiWater;
     case "motion":
-      return is_off ? "hass:walk" : "hass:run";
+      return is_off ? mdiWalk : mdiRun;
     case "occupancy":
-      return is_off ? "hass:home-outline" : "hass:home";
+      return is_off ? mdiHomeOutline : mdiHome;
     case "opening":
-      return is_off ? "hass:square" : "hass:square-outline";
+      return is_off ? mdiSquare : mdiSquareOutline;
     case "plug":
-      return is_off ? "hass:power-plug-off" : "hass:power-plug";
+      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
     case "presence":
-      return is_off ? "hass:home-outline" : "hass:home";
+      return is_off ? mdiHomeOutline : mdiHome;
+    case "running":
+      return is_off ? mdiStop : mdiPlay;
     case "sound":
-      return is_off ? "hass:music-note-off" : "hass:music-note";
+      return is_off ? mdiMusicNoteOff : mdiMusicNote;
     case "update":
-      return is_off ? "mdi:package" : "mdi:package-up";
+      return is_off ? mdiPackage : mdiPackageUp;
     case "vibration":
-      return is_off ? "hass:crop-portrait" : "hass:vibrate";
+      return is_off ? mdiCropPortrait : mdiVibrate;
     case "window":
-      return is_off ? "hass:window-closed" : "hass:window-open";
+      return is_off ? mdiWindowClosed : mdiWindowOpen;
     default:
-      return is_off ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
+      return is_off ? mdiRadioboxBlank : mdiCheckboxMarkedCircle;
   }
 };

src/common/entity/compute_state_display.ts

@@ -39,7 +39,7 @@ export const computeStateDisplay = (
   const domain = computeStateDomain(stateObj);
 
   if (domain === "input_datetime") {
-    if (state) {
+    if (state !== undefined) {
       // If trying to display an explicit state, need to parse the explict state to `Date` then format.
       // Attributes aren't available, we have to use `state`.
       try {
@@ -63,7 +63,7 @@ export const computeStateDisplay = (
           }
         }
         return state;
-      } catch {
+      } catch (_e) {
         // Formatting methods may throw error if date parsing doesn't go well,
         // just return the state string in that case.
         return state;
@@ -71,7 +71,17 @@ export const computeStateDisplay = (
     } else {
       // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
       let date: Date;
-      if (!stateObj.attributes.has_time) {
+      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day,
+          stateObj.attributes.hour,
+          stateObj.attributes.minute
+        );
+        return formatDateTime(date, locale);
+      }
+      if (stateObj.attributes.has_date) {
         date = new Date(
           stateObj.attributes.year,
           stateObj.attributes.month - 1,
@@ -79,20 +89,12 @@ export const computeStateDisplay = (
         );
         return formatDate(date, locale);
       }
-      if (!stateObj.attributes.has_date) {
+      if (stateObj.attributes.has_time) {
         date = new Date();
         date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
         return formatTime(date, locale);
       }
-
-      date = new Date(
-        stateObj.attributes.year,
-        stateObj.attributes.month - 1,
-        stateObj.attributes.day,
-        stateObj.attributes.hour,
-        stateObj.attributes.minute
-      );
-      return formatDateTime(date, locale);
+      return stateObj.state;
     }
   }
 

src/common/entity/cover_icon.ts

@@ -1,4 +1,30 @@
 /** Return an icon representing a cover state. */
+import {
+  mdiArrowUpBox,
+  mdiArrowDownBox,
+  mdiGarage,
+  mdiGarageOpen,
+  mdiGateArrowRight,
+  mdiGate,
+  mdiGateOpen,
+  mdiDoorOpen,
+  mdiDoorClosed,
+  mdiCircle,
+  mdiWindowShutter,
+  mdiWindowShutterOpen,
+  mdiBlinds,
+  mdiBlindsOpen,
+  mdiWindowClosed,
+  mdiWindowOpen,
+  mdiArrowExpandHorizontal,
+  mdiArrowUp,
+  mdiArrowCollapseHorizontal,
+  mdiArrowDown,
+  mdiCircleSlice8,
+  mdiArrowSplitVertical,
+  mdiCurtains,
+  mdiCurtainsClosed,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 
 export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
@@ -8,74 +34,84 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
     case "garage":
       switch (state) {
         case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
         case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
         case "closed":
-          return "hass:garage";
+          return mdiGarage;
         default:
-          return "hass:garage-open";
+          return mdiGarageOpen;
       }
     case "gate":
       switch (state) {
         case "opening":
         case "closing":
-          return "hass:gate-arrow-right";
+          return mdiGateArrowRight;
         case "closed":
-          return "hass:gate";
+          return mdiGate;
         default:
-          return "hass:gate-open";
+          return mdiGateOpen;
       }
     case "door":
-      return open ? "hass:door-open" : "hass:door-closed";
+      return open ? mdiDoorOpen : mdiDoorClosed;
     case "damper":
-      return open ? "hass:circle" : "hass:circle-slice-8";
+      return open ? mdiCircle : mdiCircleSlice8;
     case "shutter":
       switch (state) {
         case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
         case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
         case "closed":
-          return "hass:window-shutter";
+          return mdiWindowShutter;
         default:
-          return "hass:window-shutter-open";
+          return mdiWindowShutterOpen;
+      }
+    case "curtain":
+      switch (state) {
+        case "opening":
+          return mdiArrowSplitVertical;
+        case "closing":
+          return mdiArrowCollapseHorizontal;
+        case "closed":
+          return mdiCurtainsClosed;
+        default:
+          return mdiCurtains;
       }
     case "blind":
-    case "curtain":
     case "shade":
       switch (state) {
         case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
         case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
         case "closed":
-          return "hass:blinds";
+          return mdiBlinds;
         default:
-          return "hass:blinds-open";
+          return mdiBlindsOpen;
       }
     case "window":
       switch (state) {
         case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
         case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
         case "closed":
-          return "hass:window-closed";
+          return mdiWindowClosed;
         default:
-          return "hass:window-open";
+          return mdiWindowOpen;
       }
   }
 
   switch (state) {
     case "opening":
-      return "hass:arrow-up-box";
+      return mdiArrowUpBox;
     case "closing":
-      return "hass:arrow-down-box";
+      return mdiArrowDownBox;
     case "closed":
-      return "hass:window-closed";
+      return mdiWindowClosed;
     default:
-      return "hass:window-open";
+      return mdiWindowOpen;
   }
 };
 
@@ -84,9 +120,9 @@ export const computeOpenIcon = (stateObj: HassEntity): string => {
     case "awning":
     case "door":
     case "gate":
-      return "hass:arrow-expand-horizontal";
+      return mdiArrowExpandHorizontal;
     default:
-      return "hass:arrow-up";
+      return mdiArrowUp;
   }
 };
 
@@ -95,8 +131,8 @@ export const computeCloseIcon = (stateObj: HassEntity): string => {
     case "awning":
     case "door":
     case "gate":
-      return "hass:arrow-collapse-horizontal";
+      return mdiArrowCollapseHorizontal;
     default:
-      return "hass:arrow-down";
+      return mdiArrowDown;
   }
 };

src/common/entity/domain_icon.ts

@@ -1,3 +1,20 @@
+import {
+  mdiAirHumidifierOff,
+  mdiAirHumidifier,
+  mdiLockOpen,
+  mdiLockAlert,
+  mdiLockClock,
+  mdiLock,
+  mdiCastConnected,
+  mdiCast,
+  mdiEmoticonDead,
+  mdiSleep,
+  mdiTimerSand,
+  mdiZWave,
+  mdiClock,
+  mdiCalendar,
+  mdiWeatherNight,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 /**
  * Return the icon to be used for a domain.
@@ -28,36 +45,34 @@ export const domainIcon = (
       return coverIcon(compareState, stateObj);
 
     case "humidifier":
-      return state && state === "off"
-        ? "hass:air-humidifier-off"
-        : "hass:air-humidifier";
+      return state && state === "off" ? mdiAirHumidifierOff : mdiAirHumidifier;
 
     case "lock":
       switch (compareState) {
         case "unlocked":
-          return "hass:lock-open";
+          return mdiLockOpen;
         case "jammed":
-          return "hass:lock-alert";
+          return mdiLockAlert;
         case "locking":
         case "unlocking":
-          return "hass:lock-clock";
+          return mdiLockClock;
         default:
-          return "hass:lock";
+          return mdiLock;
       }
 
     case "media_player":
-      return compareState === "playing" ? "hass:cast-connected" : "hass:cast";
+      return compareState === "playing" ? mdiCastConnected : mdiCast;
 
     case "zwave":
       switch (compareState) {
         case "dead":
-          return "hass:emoticon-dead";
+          return mdiEmoticonDead;
         case "sleeping":
-          return "hass:sleep";
+          return mdiSleep;
         case "initializing":
-          return "hass:timer-sand";
+          return mdiTimerSand;
         default:
-          return "hass:z-wave";
+          return mdiZWave;
       }
 
     case "sensor": {
@@ -71,17 +86,17 @@ export const domainIcon = (
 
     case "input_datetime":
       if (!stateObj?.attributes.has_date) {
-        return "hass:clock";
+        return mdiClock;
       }
       if (!stateObj.attributes.has_time) {
-        return "hass:calendar";
+        return mdiCalendar;
       }
       break;
 
     case "sun":
       return stateObj?.state === "above_horizon"
         ? FIXED_DOMAIN_ICONS[domain]
-        : "hass:weather-night";
+        : mdiWeatherNight;
   }
 
   if (domain in FIXED_DOMAIN_ICONS) {

src/common/entity/sensor_icon.ts

@@ -1,8 +1,9 @@
 /** Return an icon representing a sensor state. */
+import { mdiBattery, mdiThermometer } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const";
-import { batteryIcon } from "./battery_icon";
 import { SENSOR_DEVICE_CLASS_BATTERY } from "../../data/sensor";
+import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const";
+import { batteryStateIcon } from "./battery_icon";
 
 export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
   const dclass = stateObj?.attributes.device_class;
@@ -12,12 +13,12 @@ export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
   }
 
   if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
-    return stateObj ? batteryIcon(stateObj) : "hass:battery";
+    return stateObj ? batteryStateIcon(stateObj) : mdiBattery;
   }
 
   const unit = stateObj?.attributes.unit_of_measurement;
   if (unit === UNIT_C || unit === UNIT_F) {
-    return "hass:thermometer";
+    return mdiThermometer;
   }
 
   return undefined;

src/common/entity/state_icon_path.ts

@@ -4,13 +4,9 @@ import { DEFAULT_DOMAIN_ICON } from "../const";
 import { computeDomain } from "./compute_domain";
 import { domainIcon } from "./domain_icon";
 
-export const stateIcon = (state?: HassEntity) => {
+export const stateIconPath = (state?: HassEntity) => {
   if (!state) {
     return DEFAULT_DOMAIN_ICON;
   }
-  if (state.attributes.icon) {
-    return state.attributes.icon;
-  }
-
   return domainIcon(computeDomain(state.entity_id), state);
 };

src/common/entity/strip_prefix_from_entity_name.ts

@@ -0,0 +1,24 @@
+/**
+ * Strips a device name from an entity name.
+ * @param entityName the entity name
+ * @param lowerCasedPrefixWithSpaceSuffix the prefix to strip, lower cased with a space suffix
+ * @returns
+ */
+export const stripPrefixFromEntityName = (
+  entityName: string,
+  lowerCasedPrefixWithSpaceSuffix: string
+) => {
+  if (!entityName.toLowerCase().startsWith(lowerCasedPrefixWithSpaceSuffix)) {
+    return undefined;
+  }
+
+  const newName = entityName.substring(lowerCasedPrefixWithSpaceSuffix.length);
+
+  // If first word already has an upper case letter (e.g. from brand name)
+  // leave as-is, otherwise capitalize the first word.
+  return hasUpperCase(newName.substr(0, newName.indexOf(" ")))
+    ? newName
+    : newName[0].toUpperCase() + newName.slice(1);
+};
+
+const hasUpperCase = (str: string): boolean => str.toLowerCase() !== str;

src/common/search/search-input.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -11,11 +10,15 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import "../../components/ha-icon-button";
 import "../../components/ha-svg-icon";
+import { HomeAssistant } from "../../types";
 import { fireEvent } from "../dom/fire_event";
 
 @customElement("search-input")
 class SearchInput extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public filter?: string;
 
   @property({ type: Boolean, attribute: "no-label-float" })
@@ -50,13 +53,12 @@ class SearchInput extends LitElement {
         </slot>
         ${this.filter &&
         html`
-          <mwc-icon-button
+          <ha-icon-button
             slot="suffix"
             @click=${this._clearSearch}
-            title="Clear"
-          >
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-          </mwc-icon-button>
+            .label=${this.hass.localize("ui.common.clear")}
+            .path=${mdiClose}
+          ></ha-icon-button>
         `}
       </paper-input>
     `;
@@ -90,10 +92,10 @@ class SearchInput extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon,
-      mwc-icon-button {
+      ha-icon-button {
         color: var(--primary-text-color);
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
       }
       ha-svg-icon.prefix {

src/common/string/slugify.ts

@@ -12,8 +12,8 @@ export const slugify = (value: string, delimiter = "_") => {
     .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
     .replace(/&/g, `${delimiter}and${delimiter}`) // Replace & with 'and'
     .replace(/[^\w-]+/g, "") // Remove all non-word characters
-    .replace(/-/, delimiter) // Replace - with delimiter
-    .replace(new RegExp(`/${delimiter}${delimiter}+/`, "g"), delimiter) // Replace multiple delimiters with single delimiter
-    .replace(new RegExp(`/^${delimiter}+/`), "") // Trim delimiter from start of text
-    .replace(new RegExp(`/-+$/`), ""); // Trim delimiter from end of text
+    .replace(/-/g, delimiter) // Replace - with delimiter
+    .replace(new RegExp(`(${delimiter})\\1+`, "g"), "$1") // Replace multiple delimiters with single delimiter
+    .replace(new RegExp(`^${delimiter}+`), "") // Trim delimiter from start of text
+    .replace(new RegExp(`${delimiter}+$`), ""); // Trim delimiter from end of text
 };

src/common/style/icon_color_css.ts

@@ -1,57 +1,57 @@
 import { css } from "lit";
 
 export const iconColorCSS = css`
-  ha-icon[data-domain="alert"][data-state="on"],
-  ha-icon[data-domain="automation"][data-state="on"],
-  ha-icon[data-domain="binary_sensor"][data-state="on"],
-  ha-icon[data-domain="calendar"][data-state="on"],
-  ha-icon[data-domain="camera"][data-state="streaming"],
-  ha-icon[data-domain="cover"][data-state="open"],
-  ha-icon[data-domain="fan"][data-state="on"],
-  ha-icon[data-domain="humidifier"][data-state="on"],
-  ha-icon[data-domain="light"][data-state="on"],
-  ha-icon[data-domain="input_boolean"][data-state="on"],
-  ha-icon[data-domain="lock"][data-state="unlocked"],
-  ha-icon[data-domain="media_player"][data-state="on"],
-  ha-icon[data-domain="media_player"][data-state="paused"],
-  ha-icon[data-domain="media_player"][data-state="playing"],
-  ha-icon[data-domain="script"][data-state="on"],
-  ha-icon[data-domain="sun"][data-state="above_horizon"],
-  ha-icon[data-domain="switch"][data-state="on"],
-  ha-icon[data-domain="timer"][data-state="active"],
-  ha-icon[data-domain="vacuum"][data-state="cleaning"],
-  ha-icon[data-domain="group"][data-state="on"],
-  ha-icon[data-domain="group"][data-state="home"],
-  ha-icon[data-domain="group"][data-state="open"],
-  ha-icon[data-domain="group"][data-state="locked"],
-  ha-icon[data-domain="group"][data-state="problem"] {
+  ha-state-icon[data-domain="alert"][data-state="on"],
+  ha-state-icon[data-domain="automation"][data-state="on"],
+  ha-state-icon[data-domain="binary_sensor"][data-state="on"],
+  ha-state-icon[data-domain="calendar"][data-state="on"],
+  ha-state-icon[data-domain="camera"][data-state="streaming"],
+  ha-state-icon[data-domain="cover"][data-state="open"],
+  ha-state-icon[data-domain="fan"][data-state="on"],
+  ha-state-icon[data-domain="humidifier"][data-state="on"],
+  ha-state-icon[data-domain="light"][data-state="on"],
+  ha-state-icon[data-domain="input_boolean"][data-state="on"],
+  ha-state-icon[data-domain="lock"][data-state="unlocked"],
+  ha-state-icon[data-domain="media_player"][data-state="on"],
+  ha-state-icon[data-domain="media_player"][data-state="paused"],
+  ha-state-icon[data-domain="media_player"][data-state="playing"],
+  ha-state-icon[data-domain="script"][data-state="on"],
+  ha-state-icon[data-domain="sun"][data-state="above_horizon"],
+  ha-state-icon[data-domain="switch"][data-state="on"],
+  ha-state-icon[data-domain="timer"][data-state="active"],
+  ha-state-icon[data-domain="vacuum"][data-state="cleaning"],
+  ha-state-icon[data-domain="group"][data-state="on"],
+  ha-state-icon[data-domain="group"][data-state="home"],
+  ha-state-icon[data-domain="group"][data-state="open"],
+  ha-state-icon[data-domain="group"][data-state="locked"],
+  ha-state-icon[data-domain="group"][data-state="problem"] {
     color: var(--paper-item-icon-active-color, #fdd835);
   }
 
-  ha-icon[data-domain="climate"][data-state="cooling"] {
+  ha-state-icon[data-domain="climate"][data-state="cooling"] {
     color: var(--cool-color, var(--state-climate-cool-color));
   }
 
-  ha-icon[data-domain="climate"][data-state="heating"] {
+  ha-state-icon[data-domain="climate"][data-state="heating"] {
     color: var(--heat-color, var(--state-climate-heat-color));
   }
 
-  ha-icon[data-domain="climate"][data-state="drying"] {
+  ha-state-icon[data-domain="climate"][data-state="drying"] {
     color: var(--dry-color, var(--state-climate-dry-color));
   }
 
-  ha-icon[data-domain="alarm_control_panel"] {
+  ha-state-icon[data-domain="alarm_control_panel"] {
     color: var(--alarm-color-armed, var(--label-badge-red));
   }
-  ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
     color: var(--alarm-color-disarmed, var(--label-badge-green));
   }
-  ha-icon[data-domain="alarm_control_panel"][data-state="pending"],
-  ha-icon[data-domain="alarm_control_panel"][data-state="arming"] {
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="pending"],
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="arming"] {
     color: var(--alarm-color-pending, var(--label-badge-yellow));
     animation: pulse 1s infinite;
   }
-  ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
     color: var(--alarm-color-triggered, var(--label-badge-red));
     animation: pulse 1s infinite;
   }
@@ -68,13 +68,13 @@ export const iconColorCSS = css`
     }
   }
 
-  ha-icon[data-domain="plant"][data-state="problem"],
-  ha-icon[data-domain="zwave"][data-state="dead"] {
+  ha-state-icon[data-domain="plant"][data-state="problem"],
+  ha-state-icon[data-domain="zwave"][data-state="dead"] {
     color: var(--state-icon-error-color);
   }
 
   /* Color the icon if unavailable */
-  ha-icon[data-state="unavailable"] {
+  ha-state-icon[data-state="unavailable"] {
     color: var(--state-unavailable-color);
   }
 `;

src/components/chart/state-history-chart-timeline.ts

@@ -12,21 +12,19 @@ import { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 
-/** Binary sensor device classes for which the static colors for on/off need to be inverted.
- *  List the ones were "off" = good or normal state = should be rendered "green".
+/** Binary sensor device classes for which the static colors for on/off are NOT inverted.
+ *  List the ones were "on" = good or normal state => should be rendered "green".
+ *  Note: It is now a "not inverted" list (compared to the past) since we now have more inverted ones.
  */
-const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
-  "battery",
-  "door",
-  "garage_door",
-  "gas",
-  "lock",
-  "motion",
-  "opening",
-  "problem",
-  "safety",
-  "smoke",
-  "window",
+const BINARY_SENSOR_DEVICE_CLASS_COLOR_NOT_INVERTED = new Set([
+  "battery_charging",
+  "connectivity",
+  "light",
+  "moving",
+  "plug",
+  "power",
+  "presence",
+  "update",
 ]);
 
 const STATIC_STATE_COLORS = new Set([
@@ -47,7 +45,7 @@ const invertOnOff = (entityState?: HassEntity) =>
   entityState &&
   computeDomain(entityState.entity_id) === "binary_sensor" &&
   "device_class" in entityState.attributes &&
-  BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED.has(
+  !BINARY_SENSOR_DEVICE_CLASS_COLOR_NOT_INVERTED.has(
     entityState.attributes.device_class!
   );
 

src/components/data-table/ha-data-table.ts

@@ -30,6 +30,7 @@ import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import { filterData, sortData } from "./sort-filter";
+import { HomeAssistant } from "../../types";
 
 declare global {
   // for fire event
@@ -69,7 +70,7 @@ export interface DataTableSortColumnData {
 
 export interface DataTableColumnData extends DataTableSortColumnData {
   title: TemplateResult | string;
-  type?: "numeric" | "icon" | "icon-button";
+  type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
   template?: <T>(data: any, row: T) => TemplateResult | string;
   width?: string;
   maxWidth?: string;
@@ -93,6 +94,8 @@ export interface SortableColumnContainer {
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
 
   @property({ type: Array }) public data: DataTableRowData[] = [];
@@ -232,6 +235,7 @@ export class HaDataTable extends LitElement {
             ? html`
                 <div class="table-header">
                   <search-input
+                    .hass=${this.hass}
                     @value-changed=${this._handleSearchChange}
                     .label=${this.searchLabel}
                     .noLabelFloat=${this.noLabelFloat}
@@ -277,15 +281,13 @@ export class HaDataTable extends LitElement {
               }
               const sorted = key === this._sortColumn;
               const classes = {
-                "mdc-data-table__header-cell--numeric": Boolean(
-                  column.type === "numeric"
-                ),
-                "mdc-data-table__header-cell--icon": Boolean(
-                  column.type === "icon"
-                ),
-                "mdc-data-table__header-cell--icon-button": Boolean(
-                  column.type === "icon-button"
-                ),
+                "mdc-data-table__header-cell--numeric":
+                  column.type === "numeric",
+                "mdc-data-table__header-cell--icon": column.type === "icon",
+                "mdc-data-table__header-cell--icon-button":
+                  column.type === "icon-button",
+                "mdc-data-table__header-cell--overflow-menu":
+                  column.type === "overflow-menu",
                 sortable: Boolean(column.sortable),
                 "not-sorted": Boolean(column.sortable && !sorted),
                 grows: Boolean(column.grows),
@@ -401,14 +403,14 @@ export class HaDataTable extends LitElement {
                                 <div
                                   role="cell"
                                   class="mdc-data-table__cell ${classMap({
-                                    "mdc-data-table__cell--numeric": Boolean(
-                                      column.type === "numeric"
-                                    ),
-                                    "mdc-data-table__cell--icon": Boolean(
-                                      column.type === "icon"
-                                    ),
+                                    "mdc-data-table__cell--numeric":
+                                      column.type === "numeric",
+                                    "mdc-data-table__cell--icon":
+                                      column.type === "icon",
                                     "mdc-data-table__cell--icon-button":
-                                      Boolean(column.type === "icon-button"),
+                                      column.type === "icon-button",
+                                    "mdc-data-table__cell--overflow-menu":
+                                      column.type === "overflow-menu",
                                     grows: Boolean(column.grows),
                                     forceLTR: Boolean(column.forceLTR),
                                   })}"
@@ -743,10 +745,16 @@ export class HaDataTable extends LitElement {
           text-align: right;
         }
 
-        .mdc-data-table__cell--icon:first-child ha-icon {
+        .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child ha-state-icon,
+        .mdc-data-table__cell--icon:first-child ha-svg-icon {
           margin-left: 8px;
         }
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon {
+        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon,
+        :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          ha-state-icon,
+        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon {
           margin-left: auto;
           margin-right: 8px;
         }
@@ -759,40 +767,65 @@ export class HaDataTable extends LitElement {
           margin-left: -8px;
         }
 
+        .mdc-data-table__cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow-menu,
         .mdc-data-table__header-cell--icon-button,
         .mdc-data-table__cell--icon-button {
-          width: 56px;
           padding: 8px;
         }
 
+        .mdc-data-table__header-cell--icon-button,
+        .mdc-data-table__cell--icon-button {
+          width: 56px;
+        }
+
+        .mdc-data-table__cell--overflow-menu,
         .mdc-data-table__cell--icon-button {
           color: var(--secondary-text-color);
           text-overflow: clip;
         }
 
         .mdc-data-table__header-cell--icon-button:first-child,
-        .mdc-data-table__cell--icon-button:first-child {
-          width: 64px;
-          padding-left: 16px;
-        }
-        :host([dir="rtl"])
-          .mdc-data-table__header-cell--icon-button:first-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child {
-          padding-left: auto;
-          padding-right: 16px;
-        }
-
+        .mdc-data-table__cell--icon-button:first-child,
         .mdc-data-table__header-cell--icon-button:last-child,
         .mdc-data-table__cell--icon-button:last-child {
           width: 64px;
-          padding-right: 16px;
-        }
-        :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
-          padding-right: auto;
-          padding-left: 16px;
         }
 
+        .mdc-data-table__cell--overflow-menu:first-child,
+        .mdc-data-table__header-cell--overflow-menu:first-child,
+        .mdc-data-table__header-cell--icon-button:first-child,
+        .mdc-data-table__cell--icon-button:first-child {
+          padding-left: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child {
+          padding-left: 8px;
+          padding-right: 16px;
+        }
+
+        .mdc-data-table__cell--overflow-menu:last-child,
+        .mdc-data-table__header-cell--overflow-menu:last-child,
+        .mdc-data-table__header-cell--icon-button:last-child,
+        .mdc-data-table__cell--icon-button:last-child {
+          padding-right: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:last-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:last-child,
+        :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
+          padding-right: 8px;
+          padding-left: 16px;
+        }
+        .mdc-data-table__cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow-menu {
+          overflow: initial;
+        }
         .mdc-data-table__cell--icon-button a {
           color: var(--secondary-text-color);
         }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -37,6 +36,7 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-devices-picker";
 
@@ -324,29 +324,25 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
         >
           <div class="suffix" slot="suffix">
             ${this.value
-              ? html`<mwc-icon-button
+              ? html`<ha-icon-button
                   class="clear-button"
                   .label=${this.hass.localize(
                     "ui.components.device-picker.clear"
                   )}
+                  .path=${mdiClose}
                   @click=${this._clearValue}
                   no-ripple
-                >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button> `
+                ></ha-icon-button> `
               : ""}
             ${areas.length > 0
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.components.device-picker.show_devices"
                     )}
+                    .path=${this._opened ? mdiMenuUp : mdiMenuDown}
                     class="toggle-button"
-                  >
-                    <ha-svg-icon
-                      .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-                    ></ha-svg-icon>
-                  </mwc-icon-button>
+                  ></ha-icon-button>
                 `
               : ""}
           </div>
@@ -408,7 +404,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
       .suffix {
         display: flex;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

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

@@ -338,7 +338,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/dialog/ha-iron-focusables-helper.js

@@ -1,89 +0,0 @@
-/**
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at
-http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
-http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
-found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
-part of the polymer project is also subject to an additional IP rights grant
-found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-  Fixes issue with not using shadow dom properly in iron-overlay-behavior/icon-focusables-helper.js
-*/
-import { IronFocusablesHelper } from "@polymer/iron-overlay-behavior/iron-focusables-helper";
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-
-export const HaIronFocusablesHelper = {
-  /**
-   * Returns a sorted array of tabbable nodes, including the root node.
-   * It searches the tabbable nodes in the light and shadow dom of the chidren,
-   * sorting the result by tabindex.
-   * @param {!Node} node
-   * @return {!Array<!HTMLElement>}
-   */
-  getTabbableNodes: function (node) {
-    const result = [];
-    // If there is at least one element with tabindex > 0, we need to sort
-    // the final array by tabindex.
-    const needsSortByTabIndex = this._collectTabbableNodes(node, result);
-    if (needsSortByTabIndex) {
-      return IronFocusablesHelper._sortByTabIndex(result);
-    }
-    return result;
-  },
-
-  /**
-   * Searches for nodes that are tabbable and adds them to the `result` array.
-   * Returns if the `result` array needs to be sorted by tabindex.
-   * @param {!Node} node The starting point for the search; added to `result`
-   * if tabbable.
-   * @param {!Array<!HTMLElement>} result
-   * @return {boolean}
-   * @private
-   */
-  _collectTabbableNodes: function (node, result) {
-    // If not an element or not visible, no need to explore children.
-    if (
-      node.nodeType !== Node.ELEMENT_NODE ||
-      !IronFocusablesHelper._isVisible(node)
-    ) {
-      return false;
-    }
-    const element = /** @type {!HTMLElement} */ (node);
-    const tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
-    let needsSort = tabIndex > 0;
-    if (tabIndex >= 0) {
-      result.push(element);
-    }
-
-    // In ShadowDOM v1, tab order is affected by the order of distrubution.
-    // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B];
-    // in ShadowDOM v0 tab order is not affected by the distrubution order,
-    // in fact getTabbableNodes(#root) returns [#B, #A].
-    //  <div id="root">
-    //   <!-- shadow -->
-    //     <slot name="a">
-    //     <slot name="b">
-    //   <!-- /shadow -->
-    //   <input id="A" slot="a">
-    //   <input id="B" slot="b" tabindex="1">
-    //  </div>
-    // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
-    let children;
-    if (element.localName === "content" || element.localName === "slot") {
-      children = dom(element).getDistributedNodes();
-    } else {
-      // /////////////////////////
-      // Use shadow root if possible, will check for distributed nodes.
-      // THIS IS THE CHANGED LINE
-      children = dom(element.shadowRoot || element.root || element).children;
-      // /////////////////////////
-    }
-    for (let i = 0; i < children.length; i++) {
-      // Ensure method is always invoked to collect tabbable children.
-      needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
-    }
-    return needsSort;
-  },
-};

src/components/dialog/ha-paper-dialog.ts

@@ -1,31 +0,0 @@
-import "@polymer/paper-dialog/paper-dialog";
-import type { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import type { Constructor } from "../../types";
-import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper";
-
-const paperDialogClass = customElements.get(
-  "paper-dialog"
-) as Constructor<PaperDialogElement>;
-
-// behavior that will override existing iron-overlay-behavior and call the fixed implementation
-const haTabFixBehaviorImpl = {
-  get _focusableNodes() {
-    return HaIronFocusablesHelper.getTabbableNodes(this);
-  },
-};
-
-// paper-dialog that uses the haTabFixBehaviorImpl behavior
-// export class HaPaperDialog extends paperDialogClass {}
-// @ts-ignore
-export class HaPaperDialog
-  extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass)
-  implements PaperDialogElement {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-dialog": HaPaperDialog;
-  }
-}
-// @ts-ignore
-customElements.define("ha-paper-dialog", HaPaperDialog);

src/components/entity/ha-battery-icon.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { batteryIcon } from "../../common/entity/battery_icon";
-import "../ha-icon";
+import { batteryStateIcon } from "../../common/entity/battery_icon";
+import "../ha-svg-icon";
 
 @customElement("ha-battery-icon")
 export class HaBatteryIcon extends LitElement {
@@ -11,9 +11,18 @@ export class HaBatteryIcon extends LitElement {
 
   protected render() {
     return html`
-      <ha-icon
-        .icon=${batteryIcon(this.batteryStateObj, this.batteryChargingStateObj)}
-      ></ha-icon>
+      <ha-svg-icon
+        .path=${batteryStateIcon(
+          this.batteryStateObj,
+          this.batteryChargingStateObj
+        )}
+      ></ha-svg-icon>
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-battery-icon": HaBatteryIcon;
+  }
+}

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

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -18,6 +17,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { formatAttributeName } from "../../util/hass-attributes-util";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 
@@ -114,31 +114,27 @@ class HaEntityAttributePicker extends LitElement {
           <div class="suffix" slot="suffix">
             ${this.value
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.components.entity.entity-picker.clear"
                     )}
+                    .path=${mdiClose}
                     class="clear-button"
                     tabindex="-1"
                     @click=${this._clearValue}
                     no-ripple
-                  >
-                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                  </mwc-icon-button>
+                  ></ha-icon-button>
                 `
               : ""}
 
-            <mwc-icon-button
+            <ha-icon-button
               .label=${this.hass.localize(
                 "ui.components.entity.entity-attribute-picker.show_attributes"
               )}
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
               class="toggle-button"
               tabindex="-1"
-            >
-              <ha-svg-icon
-                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-              ></ha-svg-icon>
-            </mwc-icon-button>
+            ></ha-icon-button>
           </div>
         </paper-input>
       </vaadin-combo-box-light>
@@ -178,7 +174,7 @@ class HaEntityAttributePicker extends LitElement {
       .suffix {
         display: flex;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

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

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -21,6 +20,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 
@@ -267,31 +267,27 @@ export class HaEntityPicker extends LitElement {
           <div class="suffix" slot="suffix">
             ${this.value && !this.hideClearIcon
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.components.entity.entity-picker.clear"
                     )}
+                    .path=${mdiClose}
                     class="clear-button"
                     tabindex="-1"
                     @click=${this._clearValue}
                     no-ripple
-                  >
-                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                  </mwc-icon-button>
+                  ></ha-icon-button>
                 `
               : ""}
 
-            <mwc-icon-button
+            <ha-icon-button
               .label=${this.hass.localize(
                 "ui.components.entity.entity-picker.show_entities"
               )}
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
               class="toggle-button"
               tabindex="-1"
-            >
-              <ha-svg-icon
-                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-              ></ha-svg-icon>
-            </mwc-icon-button>
+            ></ha-icon-button>
           </div>
         </paper-input>
       </vaadin-combo-box-light>
@@ -340,7 +336,7 @@ export class HaEntityPicker extends LitElement {
       .suffix {
         display: flex;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

src/components/entity/ha-entity-toggle.ts

@@ -1,3 +1,4 @@
+import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -41,15 +42,15 @@ export class HaEntityToggle extends LitElement {
     if (this.stateObj.attributes.assumed_state) {
       return html`
         <ha-icon-button
-          aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
-          icon="hass:flash-off"
+          .label=${`Turn ${computeStateName(this.stateObj)} off`}
+          .path=${mdiFlashOff}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOff}
           ?state-active=${!this._isOn}
         ></ha-icon-button>
         <ha-icon-button
-          aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
-          icon="hass:flash"
+          .label=${`Turn ${computeStateName(this.stateObj)} on`}
+          .path=${mdiFlash}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOn}
           ?state-active=${this._isOn}

src/components/entity/ha-state-label-badge.ts

@@ -14,19 +14,18 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { stateIcon } from "../../common/entity/state_icon";
 import { formatNumber } from "../../common/number/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { timerTimeRemaining } from "../../data/timer";
 import { HomeAssistant } from "../../types";
 import "../ha-label-badge";
-import "../ha-icon";
+import "../ha-state-icon";
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public state?: HassEntity;
+  @property({ attribute: false }) public state?: HassEntity;
 
   @property() public name?: string;
 
@@ -69,16 +68,23 @@ export class HaStateLabelBadge extends LitElement {
       `;
     }
 
+    // Rendering priority inside badge:
+    // 1. Icon directly defined in badge config
+    // 2. Image directly defined in badge config
+    // 3. Image taken from entity picture
+    // 4. Icon determined via entity state
+    // 5. Value string as fallback
     const domain = computeStateDomain(entityState);
 
-    const value = this._computeValue(domain, entityState);
-    const icon = this.icon ? this.icon : this._computeIcon(domain, entityState);
+    const showIcon = this.icon || this._computeShowIcon(domain, entityState);
     const image = this.icon
       ? ""
       : this.image
       ? this.image
       : entityState.attributes.entity_picture_local ||
         entityState.attributes.entity_picture;
+    const value =
+      !image && !showIcon ? this._computeValue(domain, entityState) : undefined;
 
     return html`
       <ha-label-badge
@@ -95,8 +101,13 @@ export class HaStateLabelBadge extends LitElement {
         )}
         .description=${this.name ?? computeStateName(entityState)}
       >
-        ${!image && icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
-        ${value && (this.icon || !this.image)
+        ${!image && showIcon
+          ? html`<ha-state-icon
+              .icon=${this.icon}
+              .state=${entityState}
+            ></ha-state-icon>`
+          : ""}
+        ${value && !image && !showIcon
           ? html`<span class=${value && value.length > 4 ? "big" : ""}
               >${value}</span
             >`
@@ -144,9 +155,9 @@ export class HaStateLabelBadge extends LitElement {
     }
   }
 
-  private _computeIcon(domain: string, entityState: HassEntity) {
+  private _computeShowIcon(domain: string, entityState: HassEntity): boolean {
     if (entityState.state === UNAVAILABLE) {
-      return null;
+      return false;
     }
     switch (domain) {
       case "alarm_control_panel":
@@ -156,17 +167,13 @@ export class HaStateLabelBadge extends LitElement {
       case "person":
       case "scene":
       case "sun":
-        return stateIcon(entityState);
+        return true;
       case "timer":
-        return entityState.state === "active"
-          ? "hass:timer-outline"
-          : "hass:timer-off-outline";
+        return true;
       case "sensor":
-        return entityState.attributes.device_class === "moon__phase"
-          ? stateIcon(entityState)
-          : null;
+        return entityState.attributes.device_class === "moon__phase";
       default:
-        return null;
+        return false;
     }
   }
 

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

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -289,7 +288,7 @@ export class HaStatisticPicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/entity/state-badge.ts

@@ -1,3 +1,4 @@
+import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -12,10 +13,9 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { stateIcon } from "../../common/entity/state_icon";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import type { HomeAssistant } from "../../types";
-import "../ha-icon";
+import "../ha-state-icon";
 
 export class StateBadge extends LitElement {
   public hass?: HomeAssistant;
@@ -39,7 +39,7 @@ export class StateBadge extends LitElement {
     // We either need a `stateObj` or one override
     if (!stateObj && !this.overrideIcon && !this.overrideImage) {
       return html`<div class="missing">
-        <ha-icon icon="hass:alert"></ha-icon>
+        <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
       </div>`;
     }
 
@@ -49,18 +49,17 @@ export class StateBadge extends LitElement {
 
     const domain = stateObj ? computeStateDomain(stateObj) : undefined;
 
-    return html`
-      <ha-icon
-        style=${styleMap(this._iconStyle)}
-        data-domain=${ifDefined(
-          this.stateColor || (domain === "light" && this.stateColor !== false)
-            ? domain
-            : undefined
-        )}
-        data-state=${stateObj ? computeActiveState(stateObj) : ""}
-        .icon=${this.overrideIcon || (stateObj ? stateIcon(stateObj) : "")}
-      ></ha-icon>
-    `;
+    return html`<ha-state-icon
+      style=${styleMap(this._iconStyle)}
+      data-domain=${ifDefined(
+        this.stateColor || (domain === "light" && this.stateColor !== false)
+          ? domain
+          : undefined
+      )}
+      data-state=${stateObj ? computeActiveState(stateObj) : ""}
+      .icon=${this.overrideIcon}
+      .state=${stateObj}
+    ></ha-state-icon>`;
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -154,7 +153,7 @@ export class StateBadge extends LitElement {
         :host([icon]:focus) {
           background: var(--divider-color);
         }
-        ha-icon {
+        ha-state-icon {
           transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
         }
         .missing {

src/components/entity/state-info.ts

@@ -53,6 +53,7 @@ class StateInfo extends LitElement {
                     <ha-relative-time
                       .hass=${this.hass}
                       .datetime=${this.stateObj.last_changed}
+                      capitalize
                     ></ha-relative-time>
                   </div>
                   <div class="row">
@@ -64,6 +65,7 @@ class StateInfo extends LitElement {
                     <ha-relative-time
                       .hass=${this.hass}
                       .datetime=${this.stateObj.last_updated}
+                      capitalize
                     ></ha-relative-time>
                   </div>
                 </div>

src/components/ha-alert.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import {
   mdiAlertCircleOutline,
   mdiAlertOutline,
@@ -11,6 +10,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import "./ha-icon-button";
 import "./ha-svg-icon";
 
 const ALERT_ICONS = {
@@ -66,12 +66,11 @@ class HaAlert extends LitElement {
                   .label=${this.actionText}
                 ></mwc-button>`
               : this.dismissable
-              ? html`<mwc-icon-button
+              ? html`<ha-icon-button
                   @click=${this._dismiss_clicked}
-                  aria-label="Dismiss alert"
-                >
-                  <ha-svg-icon .path=${mdiClose}> </ha-svg-icon>
-                </mwc-icon-button> `
+                  label="Dismiss alert"
+                  .path=${mdiClose}
+                ></ha-icon-button>`
               : ""}
           </div>
         </div>
@@ -140,7 +139,7 @@ class HaAlert extends LitElement {
     mwc-button {
       --mdc-theme-primary: var(--primary-text-color);
     }
-    mwc-icon-button {
+    ha-icon-button {
       --mdc-icon-button-size: 36px;
     }
     .issue-type.info > .icon {

src/components/ha-area-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -42,6 +41,7 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./ha-icon-button";
 import "./ha-svg-icon";
 
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
@@ -362,28 +362,24 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         >
           ${this.value
             ? html`
-                <mwc-icon-button
+                <ha-icon-button
                   .label=${this.hass.localize(
                     "ui.components.area-picker.clear"
                   )}
+                  .path=${mdiClose}
                   slot="suffix"
                   class="clear-button"
                   @click=${this._clearValue}
-                >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button>
+                ></ha-icon-button>
               `
             : ""}
 
-          <mwc-icon-button
+          <ha-icon-button
             .label=${this.hass.localize("ui.components.area-picker.toggle")}
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
             slot="suffix"
             class="toggle-button"
-          >
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
+          ></ha-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -457,7 +453,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/ha-button-related-filter-menu.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import type { Corner } from "@material/mwc-menu";
 import "@material/mwc-menu/mwc-menu-surface";
 import { mdiFilterVariant } from "@mdi/js";
@@ -12,7 +11,7 @@ import type { HomeAssistant } from "../types";
 import "./device/ha-device-picker";
 import "./entity/ha-entity-picker";
 import "./ha-area-picker";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 declare global {
   // for fire event
@@ -55,9 +54,10 @@ export class HaRelatedFilterButtonMenu extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-icon-button @click=${this._handleClick}>
-        <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-      </mwc-icon-button>
+      <ha-icon-button
+        @click=${this._handleClick}
+        .path=${mdiFilterVariant}
+      ></ha-icon-button>
       <mwc-menu-surface
         .open=${this._open}
         .anchor=${this}

src/components/ha-button-toggle-group.ts

@@ -1,12 +1,10 @@
-import "@material/mwc-button/mwc-button";
-import type { Button } from "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
+import { Button } from "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-button-toggle-group")
 export class HaButtonToggleGroup extends LitElement {
@@ -25,14 +23,13 @@ export class HaButtonToggleGroup extends LitElement {
       <div>
         ${this.buttons.map((button) =>
           button.iconPath
-            ? html`<mwc-icon-button
+            ? html`<ha-icon-button
                 .label=${button.label}
+                .path=${button.iconPath}
                 .value=${button.value}
                 ?active=${this.active === button.value}
                 @click=${this._handleClick}
-              >
-                <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
-              </mwc-icon-button>`
+              ></ha-icon-button>`
             : html`<mwc-button
                 style=${styleMap({
                   width: this.fullWidth
@@ -77,16 +74,16 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-shape-small: 0;
         --mdc-button-outline-width: 1px 0 1px 1px;
       }
-      mwc-icon-button {
+      ha-icon-button {
         border: 1px solid var(--primary-color);
         border-right-width: 0px;
       }
-      mwc-icon-button,
+      ha-icon-button,
       mwc-button {
         position: relative;
         cursor: pointer;
       }
-      mwc-icon-button::before,
+      ha-icon-button::before,
       mwc-button::before {
         top: 0;
         left: 0;
@@ -99,23 +96,23 @@ export class HaButtonToggleGroup extends LitElement {
         content: "";
         transition: opacity 15ms linear, background-color 15ms linear;
       }
-      mwc-icon-button[active]::before,
+      ha-icon-button[active]::before,
       mwc-button[active]::before {
         opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
       }
-      mwc-icon-button:first-child,
+      ha-icon-button:first-child,
       mwc-button:first-child {
         --mdc-shape-small: 4px 0 0 4px;
         border-radius: 4px 0 0 4px;
       }
-      mwc-icon-button:last-child,
+      ha-icon-button:last-child,
       mwc-button:last-child {
         border-radius: 0 4px 4px 0;
         border-right-width: 1px;
         --mdc-shape-small: 0 4px 4px 0;
         --mdc-button-outline-width: 1px;
       }
-      mwc-icon-button:only-child,
+      ha-icon-button:only-child,
       mwc-button:only-child {
         --mdc-shape-small: 4px;
         border-right-width: 1px;

src/components/ha-camera-stream.ts

@@ -15,9 +15,12 @@ import {
   CAMERA_SUPPORT_STREAM,
   computeMJPEGStreamUrl,
   fetchStreamUrl,
+  STREAM_TYPE_HLS,
+  STREAM_TYPE_WEB_RTC,
 } from "../data/camera";
 import { HomeAssistant } from "../types";
 import "./ha-hls-player";
+import "./ha-web-rtc-player";
 
 @customElement("ha-camera-stream")
 class HaCameraStream extends LitElement {
@@ -34,8 +37,8 @@ class HaCameraStream extends LitElement {
   @property({ type: Boolean, attribute: "allow-exoplayer" })
   public allowExoPlayer = false;
 
-  // We keep track if we should force MJPEG with a string
-  // that way it automatically resets if we change entity.
+  // We keep track if we should force MJPEG if there was a failure
+  // to get the HLS stream url. This is reset if we change entities.
   @state() private _forceMJPEG?: string;
 
   @state() private _url?: string;
@@ -48,7 +51,8 @@ class HaCameraStream extends LitElement {
       !this._shouldRenderMJPEG &&
       this.stateObj &&
       (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
-        this.stateObj.entity_id
+        this.stateObj.entity_id &&
+      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS
     ) {
       this._forceMJPEG = undefined;
       this._url = undefined;
@@ -70,43 +74,64 @@ class HaCameraStream extends LitElement {
     if (!this.stateObj) {
       return html``;
     }
-
-    return html`
-      ${__DEMO__ || this._shouldRenderMJPEG
-        ? html`
-            <img
-              .src=${__DEMO__
-                ? this.stateObj!.attributes.entity_picture!
-                : this._connected
-                ? computeMJPEGStreamUrl(this.stateObj)
-                : ""}
-              .alt=${`Preview of the ${computeStateName(
-                this.stateObj
-              )} camera.`}
-            />
-          `
-        : this._url
-        ? html`
-            <ha-hls-player
-              autoplay
-              playsinline
-              .allowExoPlayer=${this.allowExoPlayer}
-              .muted=${this.muted}
-              .controls=${this.controls}
-              .hass=${this.hass}
-              .url=${this._url}
-            ></ha-hls-player>
-          `
-        : ""}
-    `;
+    if (__DEMO__ || this._shouldRenderMJPEG) {
+      return html` <img
+        .src=${__DEMO__
+          ? this.stateObj.attributes.entity_picture!
+          : this._connected
+          ? computeMJPEGStreamUrl(this.stateObj)
+          : ""}
+        .alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
+      />`;
+    }
+    if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
+      return this._url
+        ? html` <ha-hls-player
+            autoplay
+            playsinline
+            .allowExoPlayer=${this.allowExoPlayer}
+            .muted=${this.muted}
+            .controls=${this.controls}
+            .hass=${this.hass}
+            .url=${this._url}
+          ></ha-hls-player>`
+        : html``;
+    }
+    if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC) {
+      return html` <ha-web-rtc-player
+        autoplay
+        playsinline
+        .muted=${this.muted}
+        .controls=${this.controls}
+        .hass=${this.hass}
+        .entityid=${this.stateObj.entity_id}
+      ></ha-web-rtc-player>`;
+    }
+    return html``;
   }
 
   private get _shouldRenderMJPEG() {
-    return (
-      this._forceMJPEG === this.stateObj!.entity_id ||
+    if (this._forceMJPEG === this.stateObj!.entity_id) {
+      // Fallback when unable to fetch stream url
+      return true;
+    }
+    if (
       !isComponentLoaded(this.hass!, "stream") ||
       !supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)
-    );
+    ) {
+      // Steaming is not supported by the camera so fallback to MJPEG stream
+      return true;
+    }
+    if (
+      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC &&
+      typeof RTCPeerConnection === "undefined"
+    ) {
+      // Stream requires WebRTC but browser does not support, so fallback to
+      // MJPEG stream.
+      return true;
+    }
+    // Render stream
+    return false;
   }
 
   private async _getStreamUrl(): Promise<void> {

src/components/ha-climate-control.js

@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon";
 import "./ha-icon-button";
 
 /*
@@ -40,16 +41,14 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
       <div id="target_temperature">[[value]] [[units]]</div>
       <div class="control-buttons">
         <div>
-          <ha-icon-button
-            icon="hass:chevron-up"
-            on-click="incrementValue"
-          ></ha-icon-button>
+          <ha-icon-button on-click="incrementValue">
+            <ha-icon icon="hass:chevron-up"></ha-icon>
+          </ha-icon-button>
         </div>
         <div>
-          <ha-icon-button
-            icon="hass:chevron-down"
-            on-click="decrementValue"
-          ></ha-icon-button>
+          <ha-icon-button on-click="decrementValue">
+            <ha-icon icon="hass:chevron-down"></ha-icon>
+          </ha-icon-button>
         </div>
       </div>
     `;

src/components/ha-combo-box.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -11,7 +10,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 // eslint-disable-next-line lit/prefer-static-styles
 const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
@@ -94,26 +93,22 @@ export class HaComboBox extends LitElement {
         >
           ${this.value
             ? html`
-                <mwc-icon-button
+                <ha-icon-button
                   .label=${this.hass.localize("ui.components.combo-box.clear")}
+                  .path=${mdiClose}
                   slot="suffix"
                   class="clear-button"
                   @click=${this._clearValue}
-                >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button>
+                ></ha-icon-button>
               `
             : ""}
 
-          <mwc-icon-button
+          <ha-icon-button
             .label=${this.hass.localize("ui.components.combo-box.show")}
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
             slot="suffix"
             class="toggle-button"
-          >
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
+          ></ha-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -146,7 +141,7 @@ export class HaComboBox extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/ha-cover-controls.ts

@@ -1,3 +1,4 @@
+import { mdiStop } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -45,10 +46,11 @@ class HaCoverControls extends LitElement {
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.open_cover"
           )}
-          .icon=${computeOpenIcon(this.stateObj)}
           @click=${this._onOpenTap}
           .disabled=${this._computeOpenDisabled()}
-        ></ha-icon-button>
+          .path=${computeOpenIcon(this.stateObj)}
+        >
+        </ha-icon-button>
         <ha-icon-button
           class=${classMap({
             hidden: !this._entityObj.supportsStop,
@@ -56,7 +58,7 @@ class HaCoverControls extends LitElement {
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.stop_cover"
           )}
-          icon="hass:stop"
+          .path=${mdiStop}
           @click=${this._onStopTap}
           .disabled=${this.stateObj.state === UNAVAILABLE}
         ></ha-icon-button>
@@ -67,10 +69,11 @@ class HaCoverControls extends LitElement {
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.close_cover"
           )}
-          .icon=${computeCloseIcon(this.stateObj)}
           @click=${this._onCloseTap}
           .disabled=${this._computeClosedDisabled()}
-        ></ha-icon-button>
+          .path=${computeCloseIcon(this.stateObj)}
+        >
+        </ha-icon-button>
       </div>
     `;
   }

src/components/ha-cover-tilt-controls.ts

@@ -1,3 +1,4 @@
+import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -39,10 +40,10 @@ class HaCoverTiltControls extends LitElement {
         class=${classMap({
           invisible: !this._entityObj.supportsOpenTilt,
         })}
-        label=${this.hass.localize(
+        .label=${this.hass.localize(
           "ui.dialogs.more_info_control.open_tilt_cover"
         )}
-        icon="hass:arrow-top-right"
+        .path=${mdiArrowTopRight}
         @click=${this._onOpenTiltTap}
         .disabled=${this._computeOpenDisabled()}
       ></ha-icon-button>
@@ -50,8 +51,8 @@ class HaCoverTiltControls extends LitElement {
         class=${classMap({
           invisible: !this._entityObj.supportsStopTilt,
         })}
-        label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
-        icon="hass:stop"
+        .label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
+        .path=${mdiStop}
         @click=${this._onStopTiltTap}
         .disabled=${this.stateObj.state === UNAVAILABLE}
       ></ha-icon-button>
@@ -59,10 +60,10 @@ class HaCoverTiltControls extends LitElement {
         class=${classMap({
           invisible: !this._entityObj.supportsCloseTilt,
         })}
-        label=${this.hass.localize(
+        .label=${this.hass.localize(
           "ui.dialogs.more_info_control.close_tilt_cover"
         )}
-        icon="hass:arrow-bottom-left"
+        .path=${mdiArrowBottomLeft}
         @click=${this._onCloseTiltTap}
         .disabled=${this._computeClosedDisabled()}
       ></ha-icon-button>`;

src/components/ha-dialog.ts

@@ -4,29 +4,27 @@ import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
-import "@material/mwc-icon-button/mwc-icon-button";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 export const createCloseHeading = (
   hass: HomeAssistant,
   title: string | TemplateResult
 ) => html`
   <span class="header_title">${title}</span>
-  <mwc-icon-button
-    aria-label=${hass.localize("ui.dialogs.generic.close")}
+  <ha-icon-button
+    .label=${hass.localize("ui.dialogs.generic.close")}
+    .path=${mdiClose}
     dialogAction="close"
     class="header_button"
     dir=${computeRTLDirection(hass)}
-  >
-    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-  </mwc-icon-button>
+  ></ha-icon-button>
 `;
 
 @customElement("ha-dialog")
 // @ts-expect-error
 export class HaDialog extends Dialog {
   public scrollToPos(x: number, y: number) {
-    this.contentElement.scrollTo(x, y);
+    this.contentElement?.scrollTo(x, y);
   }
 
   protected renderHeading() {
@@ -46,6 +44,12 @@ export class HaDialog extends Dialog {
           justify-content: var(--justify-action-buttons, flex-end);
           padding-bottom: max(env(safe-area-inset-bottom), 8px);
         }
+        .mdc-dialog__actions span:nth-child(1) {
+          flex: var(--secondary-action-button-flex, unset);
+        }
+        .mdc-dialog__actions span:nth-child(2) {
+          flex: var(--primary-action-button-flex, unset);
+        }
         .mdc-dialog__container {
           align-items: var(--vertial-align-dialog, center);
         }

src/components/ha-duration-input.ts

@@ -16,12 +16,12 @@ class HaDurationInput extends LitElement {
 
   @property() public label?: string;
 
-  @property() public suffix?: string;
-
   @property({ type: Boolean }) public required?: boolean;
 
   @property({ type: Boolean }) public enableMillisecond?: boolean;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @query("paper-time-input", true) private _input?: HTMLElement;
 
   public focus() {
@@ -36,6 +36,7 @@ class HaDurationInput extends LitElement {
         .label=${this.label}
         .required=${this.required}
         .autoValidate=${this.required}
+        .disabled=${this.disabled}
         error-message="Required"
         enable-second
         .enableMillisecond=${this.enableMillisecond}

src/components/ha-file-upload.ts

@@ -1,13 +1,13 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { HomeAssistant } from "../types";
 import "./ha-circular-progress";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 declare global {
   interface HASSDomEvents {
@@ -17,6 +17,8 @@ declare global {
 
 @customElement("ha-file-upload")
 export class HaFileUpload extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public accept!: string;
 
   @property() public icon!: string;
@@ -82,15 +84,20 @@ export class HaFileUpload extends LitElement {
                   ${this.value}
                 </iron-input>
                 ${this.value
-                  ? html`<mwc-icon-button
-                      slot="suffix"
-                      @click=${this._clearValue}
-                    >
-                      <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                    </mwc-icon-button>`
-                  : html`<mwc-icon-button slot="suffix">
-                      <ha-svg-icon .path=${this.icon}></ha-svg-icon>
-                    </mwc-icon-button>`}
+                  ? html`
+                      <ha-icon-button
+                        slot="suffix"
+                        @click=${this._clearValue}
+                        .label=${this.hass.localize("ui.common.close")}
+                        .path=${mdiClose}
+                      ></ha-icon-button>
+                    `
+                  : html`
+                      <ha-icon-button
+                        slot="suffix"
+                        .path=${this.icon}
+                      ></ha-icon-button>
+                    `}
               </paper-input-container>
             </label>
           `}
@@ -154,7 +161,7 @@ export class HaFileUpload extends LitElement {
         max-width: 125px;
         max-height: 125px;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         --mdc-icon-size: 20px;
       }

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -0,0 +1,37 @@
+import { HaFormSchema } from "./types";
+
+export const computeInitialHaFormData = (
+  schema: HaFormSchema[]
+): Record<string, any> => {
+  const data = {};
+  schema.forEach((field) => {
+    if (field.description?.suggested_value) {
+      data[field.name] = field.description.suggested_value;
+    } else if ("default" in field) {
+      data[field.name] = field.default;
+    } else if (!field.required) {
+      // Do nothing.
+    } else if (field.type === "boolean") {
+      data[field.name] = false;
+    } else if (field.type === "string") {
+      data[field.name] = "";
+    } else if (field.type === "integer") {
+      data[field.name] = "valueMin" in field ? field.valueMin : 0;
+    } else if (field.type === "constant") {
+      data[field.name] = field.value;
+    } else if (field.type === "float") {
+      data[field.name] = 0.0;
+    } else if (field.type === "select") {
+      if (field.options.length) {
+        data[field.name] = field.options[0][0];
+      }
+    } else if (field.type === "positive_time_period_dict") {
+      data[field.name] = {
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      };
+    }
+  });
+  return data;
+};

src/components/ha-form/ha-form-boolean.ts

@@ -1,13 +1,14 @@
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "@material/mwc-formfield";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   HaFormBooleanData,
   HaFormBooleanSchema,
   HaFormElement,
-} from "./ha-form";
+} from "./types";
+import type { HaCheckbox } from "../ha-checkbox";
+import "../ha-checkbox";
 
 @customElement("ha-form-boolean")
 export class HaFormBoolean extends LitElement implements HaFormElement {
@@ -17,9 +18,9 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public suffix!: string;
+  @property({ type: Boolean }) public disabled = false;
 
-  @query("paper-checkbox", true) private _input?: HTMLElement;
+  @query("ha-checkbox", true) private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -29,26 +30,21 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-checkbox .checked=${this.data} @change=${this._valueChanged}>
-        ${this.label}
-      </paper-checkbox>
+      <mwc-formfield .label=${this.label}>
+        <ha-checkbox
+          .checked=${this.data}
+          .disabled=${this.disabled}
+          @change=${this._valueChanged}
+        ></ha-checkbox>
+      </mwc-formfield>
     `;
   }
 
   private _valueChanged(ev: Event) {
     fireEvent(this, "value-changed", {
-      value: (ev.target as PaperCheckboxElement).checked,
+      value: (ev.target as HaCheckbox).checked,
     });
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      paper-checkbox {
-        display: block;
-        padding: 22px 0;
-      }
-    `;
-  }
 }
 
 declare global {

src/components/ha-form/ha-form-constant.ts

@@ -1,14 +1,6 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HaFormConstantSchema, HaFormElement } from "./ha-form";
+import { HaFormConstantSchema, HaFormElement } from "./types";
 
 @customElement("ha-form-constant")
 export class HaFormConstant extends LitElement implements HaFormElement {
@@ -16,13 +8,6 @@ export class HaFormConstant extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    fireEvent(this, "value-changed", {
-      value: this.schema.value,
-    });
-  }
-
   protected render(): TemplateResult {
     return html`<span class="label">${this.label}</span>: ${this.schema.value}`;
   }

src/components/ha-form/ha-form-float.ts

@@ -1,9 +1,9 @@
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import { html, LitElement, TemplateResult } from "lit";
+import "@material/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield";
+import { css, html, LitElement, TemplateResult, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./ha-form";
+import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./types";
 
 @customElement("ha-form-float")
 export class HaFormFloat extends LitElement implements HaFormElement {
@@ -13,9 +13,9 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public suffix!: string;
+  @property({ type: Boolean }) public disabled = false;
 
-  @query("paper-input", true) private _input?: HTMLElement;
+  @query("mwc-textfield") private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -25,33 +25,60 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-input
+      <mwc-textfield
+        inputMode="decimal"
         .label=${this.label}
-        .value=${this._value}
+        .value=${this.data !== undefined ? this.data : ""}
+        .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
-        @value-changed=${this._valueChanged}
-      >
-        <span suffix slot="suffix">${this.suffix}</span>
-      </paper-input>
+        .suffix=${this.schema.description?.suffix}
+        .validationMessage=${this.schema.required ? "Required" : undefined}
+        @input=${this._valueChanged}
+      ></mwc-textfield>
     `;
   }
 
-  private get _value() {
-    return this.data;
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("schema")) {
+      this.toggleAttribute("own-margin", !!this.schema.required);
+    }
   }
 
   private _valueChanged(ev: Event) {
-    const value: number | undefined = (ev.target as PaperInputElement).value
-      ? Number((ev.target as PaperInputElement).value)
-      : undefined;
-    if (this._value === value) {
+    const source = ev.target as TextField;
+    const rawValue = source.value;
+
+    let value: number | undefined;
+
+    if (rawValue !== "") {
+      value = parseFloat(rawValue);
+    }
+
+    // Detect anything changed
+    if (this.data === value) {
+      // parseFloat will drop invalid text at the end, in that case update textfield
+      const newRawValue = value === undefined ? "" : String(value);
+      if (source.value !== newRawValue) {
+        source.value = newRawValue;
+        return;
+      }
       return;
     }
+
     fireEvent(this, "value-changed", {
       value,
     });
   }
+
+  static styles = css`
+    :host([own-margin]) {
+      margin-bottom: 5px;
+    }
+    mwc-textfield {
+      display: block;
+    }
+  `;
 }
 
 declare global {

src/components/ha-form/ha-form-integer.ts

@@ -1,16 +1,19 @@
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "@material/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield";
+import "@material/mwc-slider";
+import type { Slider } from "@material/mwc-slider";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  PropertyValues,
+} from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
-import "../ha-slider";
-import type { HaSlider } from "../ha-slider";
-import {
-  HaFormElement,
-  HaFormIntegerData,
-  HaFormIntegerSchema,
-} from "./ha-form";
+import { HaFormElement, HaFormIntegerData, HaFormIntegerSchema } from "./types";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
@@ -20,10 +23,12 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   @property() public label?: string;
 
-  @property() public suffix?: string;
+  @property({ type: Boolean }) public disabled = false;
 
   @query("paper-input ha-slider") private _input?: HTMLElement;
 
+  private _lastValue?: HaFormIntegerData;
+
   public focus() {
     if (this._input) {
       this._input.focus();
@@ -31,66 +36,116 @@ export class HaFormInteger extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    return "valueMin" in this.schema && "valueMax" in this.schema
-      ? html`
-          <div>
-            ${this.label}
-            <div class="flex">
-              ${this.schema.optional && this.schema.default === undefined
-                ? html`
-                    <ha-checkbox
-                      @change=${this._handleCheckboxChange}
-                      .checked=${this.data !== undefined}
-                    ></ha-checkbox>
-                  `
-                : ""}
-              <ha-slider
-                pin
-                editable
-                .value=${this._value}
-                .min=${this.schema.valueMin}
-                .max=${this.schema.valueMax}
-                .disabled=${this.data === undefined &&
-                this.schema.optional &&
-                this.schema.default === undefined}
-                @value-changed=${this._valueChanged}
-              ></ha-slider>
-            </div>
+    if ("valueMin" in this.schema && "valueMax" in this.schema) {
+      return html`
+        <div>
+          ${this.label}
+          <div class="flex">
+            ${this.schema.optional
+              ? html`
+                  <ha-checkbox
+                    @change=${this._handleCheckboxChange}
+                    .checked=${this.data !== undefined}
+                    .disabled=${this.disabled}
+                  ></ha-checkbox>
+                `
+              : ""}
+            <mwc-slider
+              discrete
+              .value=${this._value}
+              .min=${this.schema.valueMin}
+              .max=${this.schema.valueMax}
+              .disabled=${this.disabled ||
+              (this.data === undefined && this.schema.optional)}
+              @change=${this._valueChanged}
+            ></mwc-slider>
           </div>
-        `
-      : html`
-          <paper-input
-            type="number"
-            .label=${this.label}
-            .value=${this._value}
-            .required=${this.schema.required}
-            .autoValidate=${this.schema.required}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-        `;
+        </div>
+      `;
+    }
+
+    return html`
+      <mwc-textfield
+        type="number"
+        inputMode="numeric"
+        .label=${this.label}
+        .value=${this.data !== undefined ? this.data : ""}
+        .disabled=${this.disabled}
+        .required=${this.schema.required}
+        .autoValidate=${this.schema.required}
+        .suffix=${this.schema.description?.suffix}
+        .validationMessage=${this.schema.required ? "Required" : undefined}
+        @input=${this._valueChanged}
+      ></mwc-textfield>
+    `;
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("schema")) {
+      this.toggleAttribute(
+        "own-margin",
+        !("valueMin" in this.schema && "valueMax" in this.schema) &&
+          !!this.schema.required
+      );
+    }
   }
 
   private get _value() {
-    return (
-      this.data ||
-      this.schema.description?.suggested_value ||
-      this.schema.default ||
-      0
-    );
+    if (this.data !== undefined) {
+      return this.data;
+    }
+
+    if (this.schema.optional) {
+      return 0;
+    }
+
+    return this.schema.description?.suggested_value || this.schema.default || 0;
   }
 
   private _handleCheckboxChange(ev: Event) {
     const checked = (ev.target as HaCheckbox).checked;
+    let value: HaFormIntegerData | undefined;
+    if (checked) {
+      for (const candidate of [
+        this._lastValue,
+        this.schema.description?.suggested_value as HaFormIntegerData,
+        this.schema.default,
+        0,
+      ]) {
+        if (candidate !== undefined) {
+          value = candidate;
+          break;
+        }
+      }
+    } else {
+      // We track last value so user can disable and enable a field without losing
+      // their value.
+      this._lastValue = this.data;
+    }
     fireEvent(this, "value-changed", {
-      value: checked ? this._value : undefined,
+      value,
     });
   }
 
   private _valueChanged(ev: Event) {
-    const value = Number((ev.target as PaperInputElement | HaSlider).value);
-    if (this._value === value) {
+    const source = ev.target as TextField | Slider;
+    const rawValue = source.value;
+
+    let value: number | undefined;
+
+    if (rawValue !== "") {
+      value = parseInt(String(rawValue));
+    }
+
+    if (this.data === value) {
+      // parseInt will drop invalid text at the end, in that case update textfield
+      const newRawValue = value === undefined ? "" : String(value);
+      if (source.value !== newRawValue) {
+        source.value = newRawValue;
+      }
       return;
     }
+
     fireEvent(this, "value-changed", {
       value,
     });
@@ -98,12 +153,17 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host([own-margin]) {
+        margin-bottom: 5px;
+      }
       .flex {
         display: flex;
       }
-      ha-slider {
-        width: 100%;
-        margin-right: 16px;
+      mwc-slider {
+        flex: 1;
+      }
+      mwc-textfield {
+        display: block;
       }
     `;
   }

src/components/ha-form/ha-form-multi_select.ts

@@ -1,19 +1,35 @@
-import { mdiMenuDown } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-menu-button/paper-menu-button";
-import "@polymer/paper-ripple/paper-ripple";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@material/mwc-textfield";
+import "@material/mwc-formfield";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  PropertyValues,
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-button-menu";
 import "../ha-svg-icon";
 import {
   HaFormElement,
   HaFormMultiSelectData,
   HaFormMultiSelectSchema,
-} from "./ha-form";
+} from "./types";
+import "../ha-checkbox";
+import type { HaCheckbox } from "../ha-checkbox";
+
+function optionValue(item: string | string[]): string {
+  return Array.isArray(item) ? item[0] : item;
+}
+
+function optionLabel(item: string | string[]): string {
+  return Array.isArray(item) ? item[1] || item[0] : item;
+}
+
+const SHOW_ALL_ENTRIES_LIMIT = 6;
 
 @customElement("ha-form-multi_select")
 export class HaFormMultiSelect extends LitElement implements HaFormElement {
@@ -23,11 +39,11 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public suffix!: string;
+  @property({ type: Boolean }) public disabled = false;
 
-  @state() private _init = false;
+  @state() private _opened = false;
 
-  @query("paper-menu-button", true) private _input?: HTMLElement;
+  @query("ha-button-menu") private _input?: HTMLElement;
 
   public focus(): void {
     if (this._input) {
@@ -36,118 +52,144 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    const options = Array.isArray(this.schema.options)
-      ? this.schema.options
-      : Object.entries(this.schema.options!);
-
+    const options = Object.entries(this.schema.options);
     const data = this.data || [];
+
+    const renderedOptions = options.map((item: string | [string, string]) => {
+      const value = optionValue(item);
+      return html`
+        <mwc-formfield .label=${optionLabel(item)}>
+          <ha-checkbox
+            .checked=${data.includes(value)}
+            .value=${value}
+            .disabled=${this.disabled}
+            @change=${this._valueChanged}
+          ></ha-checkbox>
+        </mwc-formfield>
+      `;
+    });
+
+    // We will just render all checkboxes.
+    if (options.length < SHOW_ALL_ENTRIES_LIMIT) {
+      return html`<div>${this.label}${renderedOptions}</div> `;
+    }
+
     return html`
-      <paper-menu-button horizontal-align="right" vertical-offset="8">
-        <div class="dropdown-trigger" slot="dropdown-trigger">
-          <paper-ripple></paper-ripple>
-          <paper-input
-            id="input"
-            type="text"
-            readonly
-            value=${data
-              .map((value) => this.schema.options![value] || value)
-              .join(", ")}
-            label=${this.label}
-            input-role="button"
-            input-aria-haspopup="listbox"
-            autocomplete="off"
-          >
-            <ha-svg-icon
-              .path=${mdiMenuDown}
-              suffix
-              slot="suffix"
-            ></ha-svg-icon>
-          </paper-input>
-        </div>
-        <paper-listbox
-          multi
-          slot="dropdown-content"
-          attr-for-selected="item-value"
-          .selectedValues=${data}
-          @selected-items-changed=${this._valueChanged}
-          @iron-select=${this._onSelect}
-        >
-          ${
-            // TS doesn't work with union array types https://github.com/microsoft/TypeScript/issues/36390
-            // @ts-ignore
-            options.map((item: string | [string, string]) => {
-              const value = this._optionValue(item);
-              return html`
-                <paper-icon-item .itemValue=${value}>
-                  <paper-checkbox
-                    .checked=${data.includes(value)}
-                    slot="item-icon"
-                  ></paper-checkbox>
-                  ${this._optionLabel(item)}
-                </paper-icon-item>
-              `;
-            })
-          }
-        </paper-listbox>
-      </paper-menu-button>
+      <ha-button-menu
+        .disabled=${this.disabled}
+        fixed
+        corner="BOTTOM_START"
+        @opened=${this._handleOpen}
+        @closed=${this._handleClose}
+      >
+        <mwc-textfield
+          slot="trigger"
+          .label=${this.label}
+          .value=${data
+            .map((value) => this.schema.options![value] || value)
+            .join(", ")}
+          .disabled=${this.disabled}
+          tabindex="-1"
+        ></mwc-textfield>
+        <ha-svg-icon
+          slot="trigger"
+          .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+        ></ha-svg-icon>
+        ${renderedOptions}
+      </ha-button-menu>
     `;
   }
 
   protected firstUpdated() {
     this.updateComplete.then(() => {
-      const input = (
-        this.shadowRoot?.querySelector("paper-input")?.inputElement as any
-      )?.inputElement;
-      if (input) {
-        input.style.textOverflow = "ellipsis";
+      const { formElement, mdcRoot } =
+        this.shadowRoot?.querySelector("mwc-textfield") || ({} as any);
+      if (formElement) {
+        formElement.style.textOverflow = "ellipsis";
+      }
+      if (mdcRoot) {
+        mdcRoot.style.cursor = "pointer";
       }
     });
   }
 
-  private _optionValue(item: string | string[]): string {
-    return Array.isArray(item) ? item[0] : item;
-  }
-
-  private _optionLabel(item: string | string[]): string {
-    return Array.isArray(item) ? item[1] || item[0] : item;
-  }
-
-  private _onSelect(ev: Event) {
-    ev.stopPropagation();
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("schema")) {
+      this.toggleAttribute(
+        "own-margin",
+        Object.keys(this.schema.options).length >= SHOW_ALL_ENTRIES_LIMIT &&
+          !!this.schema.required
+      );
+    }
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    if (!ev.detail.value || !this._init) {
-      // ignore first call because that is the init of the component
-      this._init = true;
-      return;
+    const { value, checked } = ev.target as HaCheckbox;
+
+    let newValue: string[];
+
+    if (checked) {
+      if (!this.data) {
+        newValue = [value];
+      } else if (this.data.includes(value)) {
+        return;
+      } else {
+        newValue = [...this.data, value];
+      }
+    } else {
+      if (!this.data.includes(value)) {
+        return;
+      }
+      newValue = this.data.filter((v) => v !== value);
     }
 
-    fireEvent(
-      this,
-      "value-changed",
-      {
-        value: ev.detail.value.map((element) => element.itemValue),
-      },
-      { bubbles: false }
-    );
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  private _handleOpen(ev: Event): void {
+    ev.stopPropagation();
+    this._opened = true;
+    this.toggleAttribute("opened", true);
+  }
+
+  private _handleClose(ev: Event): void {
+    ev.stopPropagation();
+    this._opened = false;
+    this.toggleAttribute("opened", false);
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-menu-button {
+      :host([own-margin]) {
+        margin-bottom: 5px;
+      }
+      ha-button-menu {
         display: block;
-        padding: 0;
-        --paper-item-icon-width: 34px;
+        cursor: pointer;
       }
-      paper-ripple {
-        top: 12px;
-        left: 0px;
-        bottom: 8px;
-        right: 0px;
+      mwc-formfield {
+        display: block;
+        padding-right: 16px;
       }
-      paper-input {
-        text-overflow: ellipsis;
+      mwc-textfield {
+        display: block;
+        pointer-events: none;
+      }
+      ha-svg-icon {
+        color: var(--input-dropdown-icon-color);
+        position: absolute;
+        right: 1em;
+        top: 1em;
+        cursor: pointer;
+      }
+      :host([opened]) ha-svg-icon {
+        color: var(--primary-color);
+      }
+      :host([opened]) ha-button-menu {
+        --mdc-text-field-idle-line-color: var(--input-hover-line-color);
+        --mdc-text-field-label-ink-color: var(--primary-color);
       }
     `;
   }

src/components/ha-form/ha-form-positive_time_period_dict.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../ha-duration-input";
-import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./ha-form";
+import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./types";
 
 @customElement("ha-form-positive_time_period_dict")
 export class HaFormTimePeriod extends LitElement implements HaFormElement {
@@ -11,7 +11,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public suffix!: string;
+  @property({ type: Boolean }) public disabled = false;
 
   @query("ha-time-input", true) private _input?: HTMLElement;
 
@@ -27,6 +27,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
         .label=${this.label}
         .required=${this.schema.required}
         .data=${this.data}
+        .disabled=${this.disabled}
       ></ha-duration-input>
     `;
   }

src/components/ha-form/ha-form-select.ts

@@ -1,15 +1,14 @@
-import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiMenuDown } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-menu-button/paper-menu-button";
-import "@polymer/paper-ripple/paper-ripple";
+import "@material/mwc-select";
+import type { Select } from "@material/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
-import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";
+import "../ha-radio";
+import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
+
+import { stopPropagation } from "../../common/dom/stop_propagation";
+import type { HaRadio } from "../ha-radio";
 
 @customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
@@ -19,9 +18,9 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public suffix!: string;
+  @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-paper-dropdown-menu", true) private _input?: HTMLElement;
+  @query("mwc-select", true) private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -30,90 +29,70 @@ export class HaFormSelect extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    return html`
-      <paper-menu-button horizontal-align="right" vertical-offset="8">
-        <div class="dropdown-trigger" slot="dropdown-trigger">
-          <paper-ripple></paper-ripple>
-          <paper-input
-            id="input"
-            type="text"
-            readonly
-            value=${this.data}
-            label=${this.label}
-            input-role="button"
-            input-aria-haspopup="listbox"
-            autocomplete="off"
-          >
-            ${this.data && this.schema.optional
-              ? html`<mwc-icon-button
-                  slot="suffix"
-                  class="clear-button"
-                  @click=${this._clearValue}
-                >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button>`
-              : ""}
-            <mwc-icon-button slot="suffix">
-              <ha-svg-icon .path=${mdiMenuDown}></ha-svg-icon>
-            </mwc-icon-button>
-          </paper-input>
+    if (!this.schema.optional && this.schema.options!.length < 6) {
+      return html`
+        <div>
+          ${this.label}
+          ${this.schema.options.map(
+            ([value, label]) => html`
+              <mwc-formfield .label=${label}>
+                <ha-radio
+                  .checked=${value === this.data}
+                  .value=${value}
+                  .disabled=${this.disabled}
+                  @change=${this._valueChanged}
+                ></ha-radio>
+              </mwc-formfield>
+            `
+          )}
         </div>
-        <paper-listbox
-          slot="dropdown-content"
-          attr-for-selected="item-value"
-          .selected=${this.data}
-          @selected-item-changed=${this._valueChanged}
-        >
-          ${
-            // TS doesn't work with union array types https://github.com/microsoft/TypeScript/issues/36390
-            // @ts-ignore
-            this.schema.options!.map(
-              (item: string | [string, string]) => html`
-                <paper-item .itemValue=${this._optionValue(item)}>
-                  ${this._optionLabel(item)}
-                </paper-item>
-              `
-            )
-          }
-        </paper-listbox>
-      </paper-menu-button>
+      `;
+    }
+
+    return html`
+      <mwc-select
+        fixedMenuPosition
+        naturalMenuWidth
+        .label=${this.label}
+        .value=${this.data}
+        .disabled=${this.disabled}
+        @closed=${stopPropagation}
+        @selected=${this._valueChanged}
+      >
+        ${this.schema.optional
+          ? html`<mwc-list-item value=""></mwc-list-item>`
+          : ""}
+        ${this.schema.options!.map(
+          ([value, label]) => html`
+            <mwc-list-item .value=${value}>${label}</mwc-list-item>
+          `
+        )}
+      </mwc-select>
     `;
   }
 
-  private _optionValue(item: string | [string, string]) {
-    return Array.isArray(item) ? item[0] : item;
-  }
-
-  private _optionLabel(item: string | [string, string]) {
-    return Array.isArray(item) ? item[1] || item[0] : item;
-  }
-
-  private _clearValue(ev: CustomEvent) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
   private _valueChanged(ev: CustomEvent) {
-    if (!ev.detail.value) {
+    ev.stopPropagation();
+    let value: string | undefined = (ev.target as Select | HaRadio).value;
+
+    if (value === this.data) {
       return;
     }
+
+    if (value === "") {
+      value = undefined;
+    }
+
     fireEvent(this, "value-changed", {
-      value: ev.detail.value.itemValue,
+      value,
     });
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-menu-button {
+      mwc-select,
+      mwc-formfield {
         display: block;
-        padding: 0;
-      }
-      paper-input > mwc-icon-button {
-        --mdc-icon-button-size: 24px;
-        padding: 2px;
-      }
-      .clear-button {
-        color: var(--secondary-text-color);
       }
     `;
   }

src/components/ha-form/ha-form-string.ts

@@ -1,16 +1,22 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "@material/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  PropertyValues,
+} from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
+import "../ha-icon-button";
 import type {
   HaFormElement,
   HaFormStringData,
   HaFormStringSchema,
-} from "./ha-form";
+} from "./types";
 
 const MASKED_FIELDS = ["password", "secret", "token"];
 
@@ -22,11 +28,11 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public suffix!: string;
+  @property({ type: Boolean }) public disabled = false;
 
   @state() private _unmaskedPassword = false;
 
-  @query("paper-input") private _input?: HTMLElement;
+  @query("mwc-textfield") private _input?: HTMLElement;
 
   public focus(): void {
     if (this._input) {
@@ -35,40 +41,44 @@ export class HaFormString extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    return MASKED_FIELDS.some((field) => this.schema.name.includes(field))
-      ? html`
-          <paper-input
-            .type=${this._unmaskedPassword ? "text" : "password"}
-            .label=${this.label}
-            .value=${this.data}
-            .required=${this.schema.required}
-            .autoValidate=${this.schema.required}
-            @value-changed=${this._valueChanged}
-          >
-            <mwc-icon-button
-              toggles
-              slot="suffix"
-              id="iconButton"
-              title="Click to toggle between masked and clear password"
-              @click=${this._toggleUnmaskedPassword}
-              tabindex="-1"
-              ><ha-svg-icon
-                .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-              ></ha-svg-icon>
-            </mwc-icon-button>
-          </paper-input>
-        `
-      : html`
-          <paper-input
-            .type=${this._stringType}
-            .label=${this.label}
-            .value=${this.data}
-            .required=${this.schema.required}
-            .autoValidate=${this.schema.required}
-            error-message="Required"
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-        `;
+    const isPassword = MASKED_FIELDS.some((field) =>
+      this.schema.name.includes(field)
+    );
+    return html`
+      <mwc-textfield
+        .type=${!isPassword
+          ? this._stringType
+          : this._unmaskedPassword
+          ? "text"
+          : "password"}
+        .label=${this.label}
+        .value=${this.data || ""}
+        .disabled=${this.disabled}
+        .required=${this.schema.required}
+        .autoValidate=${this.schema.required}
+        .suffix=${isPassword
+          ? // reserve some space for the icon.
+            html`<div style="width: 24px"></div>`
+          : this.schema.description?.suffix}
+        .validationMessage=${this.schema.required ? "Required" : undefined}
+        @input=${this._valueChanged}
+      ></mwc-textfield>
+      ${isPassword
+        ? html`<ha-icon-button
+            toggles
+            .label="Click to toggle between masked and clear password"
+            @click=${this._toggleUnmaskedPassword}
+            tabindex="-1"
+            .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
+          ></ha-icon-button>`
+        : ""}
+    `;
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("schema")) {
+      this.toggleAttribute("own-margin", !!this.schema.required);
+    }
   }
 
   private _toggleUnmaskedPassword(): void {
@@ -76,10 +86,13 @@ export class HaFormString extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event): void {
-    const value = (ev.target as PaperInputElement).value;
+    let value: string | undefined = (ev.target as TextField).value;
     if (this.data === value) {
       return;
     }
+    if (value === "" && this.schema.optional) {
+      value = undefined;
+    }
     fireEvent(this, "value-changed", {
       value,
     });
@@ -99,7 +112,20 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-icon-button {
+      :host {
+        display: block;
+        position: relative;
+      }
+      :host([own-margin]) {
+        margin-bottom: 5px;
+      }
+      mwc-textfield {
+        display: block;
+      }
+      ha-icon-button {
+        position: absolute;
+        top: 1em;
+        right: 12px;
         --mdc-icon-button-size: 24px;
         color: var(--secondary-text-color);
       }

src/components/ha-form/ha-form.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HaDurationData } from "../ha-duration-input";
+import "../ha-alert";
 import "./ha-form-boolean";
 import "./ha-form-constant";
 import "./ha-form-float";
@@ -11,160 +11,82 @@ import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";
 import "./ha-form-select";
 import "./ha-form-string";
+import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
 
-export type HaFormSchema =
-  | HaFormConstantSchema
-  | HaFormStringSchema
-  | HaFormIntegerSchema
-  | HaFormFloatSchema
-  | HaFormBooleanSchema
-  | HaFormSelectSchema
-  | HaFormMultiSelectSchema
-  | HaFormTimeSchema;
-
-export interface HaFormBaseSchema {
-  name: string;
-  default?: HaFormData;
-  required?: boolean;
-  optional?: boolean;
-  description?: { suffix?: string; suggested_value?: HaFormData };
-}
-
-export interface HaFormConstantSchema extends HaFormBaseSchema {
-  type: "constant";
-  value: string;
-}
-
-export interface HaFormIntegerSchema extends HaFormBaseSchema {
-  type: "integer";
-  default?: HaFormIntegerData;
-  valueMin?: number;
-  valueMax?: number;
-}
-
-export interface HaFormSelectSchema extends HaFormBaseSchema {
-  type: "select";
-  options?: string[] | Array<[string, string]>;
-}
-
-export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
-  type: "multi_select";
-  options?: Record<string, string> | string[] | Array<[string, string]>;
-}
-
-export interface HaFormFloatSchema extends HaFormBaseSchema {
-  type: "float";
-}
-
-export interface HaFormStringSchema extends HaFormBaseSchema {
-  type: "string";
-  format?: string;
-}
-
-export interface HaFormBooleanSchema extends HaFormBaseSchema {
-  type: "boolean";
-}
-
-export interface HaFormTimeSchema extends HaFormBaseSchema {
-  type: "positive_time_period_dict";
-}
-
-export interface HaFormDataContainer {
-  [key: string]: HaFormData;
-}
-
-export type HaFormData =
-  | HaFormStringData
-  | HaFormIntegerData
-  | HaFormFloatData
-  | HaFormBooleanData
-  | HaFormSelectData
-  | HaFormMultiSelectData
-  | HaFormTimeData;
-
-export type HaFormStringData = string;
-export type HaFormIntegerData = number;
-export type HaFormFloatData = number;
-export type HaFormBooleanData = boolean;
-export type HaFormSelectData = string;
-export type HaFormMultiSelectData = string[];
-export type HaFormTimeData = HaDurationData;
-
-export interface HaFormElement extends LitElement {
-  schema: HaFormSchema | HaFormSchema[];
-  data?: HaFormDataContainer | HaFormData;
-  label?: string;
-  suffix?: string;
-}
+const getValue = (obj, item) => (obj ? obj[item.name] : null);
 
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
-  @property() public data!: HaFormDataContainer | HaFormData;
+  @property() public data!: HaFormDataContainer;
 
-  @property() public schema!: HaFormSchema | HaFormSchema[];
+  @property() public schema!: HaFormSchema[];
 
-  @property() public error;
+  @property() public error?: Record<string, string>;
+
+  @property({ type: Boolean }) public disabled = false;
 
   @property() public computeError?: (schema: HaFormSchema, error) => string;
 
   @property() public computeLabel?: (schema: HaFormSchema) => string;
 
-  @property() public computeSuffix?: (schema: HaFormSchema) => string;
-
   public focus() {
-    const input =
-      this.shadowRoot!.getElementById("child-form") ||
-      this.shadowRoot!.querySelector("ha-form");
-    if (!input) {
+    const root = this.shadowRoot?.querySelector(".root");
+    if (!root) {
       return;
     }
-    (input as HTMLElement).focus();
+    for (const child of root.children) {
+      if (child.tagName !== "HA-ALERT") {
+        (child as HTMLElement).focus();
+        break;
+      }
+    }
   }
 
   protected render() {
-    if (Array.isArray(this.schema)) {
-      return html`
+    return html`
+      <div class="root">
         ${this.error && this.error.base
           ? html`
-              <div class="error">
+              <ha-alert alert-type="error">
                 ${this._computeError(this.error.base, this.schema)}
-              </div>
+              </ha-alert>
             `
           : ""}
-        ${this.schema.map(
-          (item) => html`
-            <ha-form
-              .data=${this._getValue(this.data, item)}
-              .schema=${item}
-              .error=${this._getValue(this.error, item)}
-              @value-changed=${this._valueChanged}
-              .computeError=${this.computeError}
-              .computeLabel=${this.computeLabel}
-              .computeSuffix=${this.computeSuffix}
-            ></ha-form>
-          `
-        )}
-      `;
-    }
-
-    return html`
-      ${this.error
-        ? html`
-            <div class="error">
-              ${this._computeError(this.error, this.schema)}
-            </div>
-          `
-        : ""}
-      ${dynamicElement(`ha-form-${this.schema.type}`, {
-        schema: this.schema,
-        data: this.data,
-        label: this._computeLabel(this.schema),
-        suffix: this._computeSuffix(this.schema),
-        id: "child-form",
-      })}
+        ${this.schema.map((item) => {
+          const error = getValue(this.error, item);
+          return html`
+            ${error
+              ? html`
+                  <ha-alert own-margin alert-type="error">
+                    ${this._computeError(error, item)}
+                  </ha-alert>
+                `
+              : ""}
+            ${dynamicElement(`ha-form-${item.type}`, {
+              schema: item,
+              data: getValue(this.data, item),
+              label: this._computeLabel(item),
+              disabled: this.disabled,
+            })}
+          `;
+        })}
+      </div>
     `;
   }
 
+  protected createRenderRoot() {
+    const root = super.createRenderRoot();
+    // attach it as soon as possible to make sure we fetch all events.
+    root.addEventListener("value-changed", (ev) => {
+      ev.stopPropagation();
+      const schema = (ev.target as HaFormElement).schema as HaFormSchema;
+      fireEvent(this, "value-changed", {
+        value: { ...this.data, [schema.name]: ev.detail.value },
+      });
+    });
+    return root;
+  }
+
   private _computeLabel(schema: HaFormSchema) {
     return this.computeLabel
       ? this.computeLabel(schema)
@@ -173,38 +95,25 @@ export class HaForm extends LitElement implements HaFormElement {
       : "";
   }
 
-  private _computeSuffix(schema: HaFormSchema) {
-    return this.computeSuffix
-      ? this.computeSuffix(schema)
-      : schema && schema.description
-      ? schema.description.suffix
-      : "";
-  }
-
   private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
     return this.computeError ? this.computeError(error, schema) : error;
   }
 
-  private _getValue(obj, item) {
-    if (obj) {
-      return obj[item.name];
-    }
-    return null;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const schema = (ev.target as HaFormElement).schema as HaFormSchema;
-    const data = this.data as HaFormDataContainer;
-    fireEvent(this, "value-changed", {
-      value: { ...data, [schema.name]: ev.detail.value },
-    });
-  }
-
   static get styles(): CSSResultGroup {
+    // .root has overflow: auto to avoid margin collapse
     return css`
-      .error {
-        color: var(--error-color);
+      .root {
+        margin-bottom: -24px;
+        overflow: auto;
+      }
+      .root > * {
+        display: block;
+      }
+      .root > *:not([own-margin]) {
+        margin-bottom: 24px;
+      }
+      ha-alert[own-margin] {
+        margin-bottom: 4px;
       }
     `;
   }

src/components/ha-form/types.ts

@@ -0,0 +1,86 @@
+import type { LitElement } from "lit";
+import type { HaDurationData } from "../ha-duration-input";
+
+export type HaFormSchema =
+  | HaFormConstantSchema
+  | HaFormStringSchema
+  | HaFormIntegerSchema
+  | HaFormFloatSchema
+  | HaFormBooleanSchema
+  | HaFormSelectSchema
+  | HaFormMultiSelectSchema
+  | HaFormTimeSchema;
+
+export interface HaFormBaseSchema {
+  name: string;
+  default?: HaFormData;
+  required?: boolean;
+  optional?: boolean;
+  description?: { suffix?: string; suggested_value?: HaFormData };
+}
+
+export interface HaFormConstantSchema extends HaFormBaseSchema {
+  type: "constant";
+  value: string;
+}
+
+export interface HaFormIntegerSchema extends HaFormBaseSchema {
+  type: "integer";
+  default?: HaFormIntegerData;
+  valueMin?: number;
+  valueMax?: number;
+}
+
+export interface HaFormSelectSchema extends HaFormBaseSchema {
+  type: "select";
+  options: Array<[string, string]>;
+}
+
+export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
+  type: "multi_select";
+  options: Record<string, string>;
+}
+
+export interface HaFormFloatSchema extends HaFormBaseSchema {
+  type: "float";
+}
+
+export interface HaFormStringSchema extends HaFormBaseSchema {
+  type: "string";
+  format?: string;
+}
+
+export interface HaFormBooleanSchema extends HaFormBaseSchema {
+  type: "boolean";
+}
+
+export interface HaFormTimeSchema extends HaFormBaseSchema {
+  type: "positive_time_period_dict";
+}
+
+export interface HaFormDataContainer {
+  [key: string]: HaFormData;
+}
+
+export type HaFormData =
+  | HaFormStringData
+  | HaFormIntegerData
+  | HaFormFloatData
+  | HaFormBooleanData
+  | HaFormSelectData
+  | HaFormMultiSelectData
+  | HaFormTimeData;
+
+export type HaFormStringData = string;
+export type HaFormIntegerData = number;
+export type HaFormFloatData = number;
+export type HaFormBooleanData = boolean;
+export type HaFormSelectData = string;
+export type HaFormMultiSelectData = string[];
+export type HaFormTimeData = HaDurationData;
+
+export interface HaFormElement extends LitElement {
+  schema: HaFormSchema | HaFormSchema[];
+  data?: HaFormDataContainer | HaFormData;
+  label?: string;
+}

src/components/ha-hls-player.ts

@@ -8,7 +8,6 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
@@ -65,7 +64,6 @@ class HaHLSPlayer extends LitElement {
         .muted=${this.muted}
         ?playsinline=${this.playsInline}
         ?controls=${this.controls}
-        @loadeddata=${this._elementResized}
       ></video>
     `;
   }
@@ -191,6 +189,7 @@ class HaHLSPlayer extends LitElement {
       fragLoadingTimeOut: 30000,
       manifestLoadingTimeOut: 30000,
       levelLoadingTimeOut: 30000,
+      maxLiveSyncPlaybackRate: 2,
     });
     this._hlsPolyfillInstance = hls;
     hls.attachMedia(videoEl);
@@ -206,10 +205,6 @@ class HaHLSPlayer extends LitElement {
     });
   }
 
-  private _elementResized() {
-    fireEvent(this, "iron-resize");
-  }
-
   private _cleanUp() {
     if (this._hlsPolyfillInstance) {
       this._hlsPolyfillInstance.destroy();