Combine energy and water api calls to reduce overhead

* Fix stats data being fetched for all entities when there are no energy/water stat ids

I noticed the following query was being sent
to the stats api since there were no water
stat ids. Since it sent an empty list it
enumerated everything

```
{
type: "recorder/statistics_during_period",
start_time: "2023-02-05T05:00:00.000Z",
end_time: "2023-02-12T05:59:59.999Z"
....
statistic_ids: [],
type: "recorder/statistics_during_period"
types: ["sum"]
units: {volume: "gal"}
}
```

* not python

.devcontainer/Dockerfile

@@ -0,0 +1,13 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.10
+
+ENV \
+  DEBIAN_FRONTEND=noninteractive \
+  DEVCONTAINER=true \
+  PATH=$PATH:./node_modules/.bin
+
+# Install nvm
+COPY .nvmrc /tmp/.nvmrc
+RUN \
+  su vscode -c \
+    "source /usr/local/share/nvm/nvm.sh && nvm install $(cat /tmp/.nvmrc) 2>&1"

.devcontainer/devcontainer.json

@@ -1,20 +1,13 @@
 {
   "name": "Home Assistant Frontend",
-  "image": "mcr.microsoft.com/devcontainers/python:0-3.10",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
   "appPort": "8124:8123",
   "postCreateCommand": "script/bootstrap",
   "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}",
-    "DEVCONTAINER": "true"
-  },
-  "remoteUser": "vscode",
-  "remoteEnv": {
-    "PATH": "${containerEnv:PATH}:${containerWorkspaceFolder}/node_modules/.bin:/home/vscode/.local/bin"
-  },
-  "features": {
-    "ghcr.io/devcontainers/features/node:1": {
-      "version": "16"
-    }
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
   "customizations": {
     "vscode": {

.eslintrc.json

@@ -5,6 +5,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/all",
+    "plugin:lit-a11y/recommended",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
@@ -65,7 +66,10 @@
     "import/extensions": [
       "error",
       "ignorePackages",
-      { "ts": "never", "js": "never" }
+      {
+        "ts": "never",
+        "js": "never"
+      }
     ],
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "object-curly-newline": "off",
@@ -112,7 +116,15 @@
     ],
     "unused-imports/no-unused-imports": "error",
     "lit/attribute-value-entities": "off",
-    "lit/no-template-map": "off"
+    "lit/no-template-map": "off",
+    "lit/no-native-attributes": "warn",
+    "lit/no-this-assign-in-render": "warn",
+    "lit/prefer-nothing": "warn",
+    "lit-a11y/click-events-have-key-events": ["off"],
+    "lit-a11y/no-autofocus": "off",
+    "lit-a11y/alt-text": "warn",
+    "lit-a11y/anchor-is-valid": "warn",
+    "lit-a11y/role-has-required-aria-attrs": "warn"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

.github/dependabot.yml

@@ -10,9 +10,12 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
-      time: "06:00"
-    open-pull-requests-limit: 5
+      time: "03:00"
+    open-pull-requests-limit: 10
+    labels:
+      - "dependencies"
     ignore:
       # Ignore rollup and plugins until everything else is updated
       - dependency-name: "*rollup*"
       - dependency-name: "@rollup/*"
+      - dependency-name: "serve"

build-scripts/bundle.js

@@ -67,7 +67,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       "@babel/preset-env",
       {
         useBuiltIns: "entry",
-        corejs: "3.15",
+        corejs: { version: "3.27", proposals: true },
         bugfixes: true,
       },
     ],

demo/src/ha-demo.ts

@@ -1,4 +1,5 @@
 // Compat needs to be first import
+import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {
@@ -6,7 +7,6 @@ import {
   provideHass,
 } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
-import "../../src/resources/compatibility";
 import { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAuth } from "./stubs/auth";
@@ -71,6 +71,7 @@ class HaDemo extends HomeAssistantAppEl {
         entity_category: null,
         has_entity_name: false,
         unique_id: "co2_intensity",
+        options: null,
       },
       {
         config_entry_id: "co2signal",
@@ -86,6 +87,7 @@ class HaDemo extends HomeAssistantAppEl {
         entity_category: null,
         has_entity_name: false,
         unique_id: "grid_fossil_fuel_percentage",
+        options: null,
       },
     ]);
 

demo/src/stubs/recorder.ts

@@ -15,6 +15,7 @@ import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 const generateMeanStatistics = (
   start: Date,
   end: Date,
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
@@ -51,6 +52,7 @@ const generateMeanStatistics = (
 const generateSumStatistics = (
   start: Date,
   end: Date,
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
@@ -86,6 +88,7 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
   start: Date,
   end: Date,
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,

gallery/src/pages/lovelace/tile-card.markdown

@@ -0,0 +1,3 @@
+---
+title: Tile Card
+---

gallery/src/pages/lovelace/tile-card.ts

@@ -0,0 +1,173 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
+import { CoverEntityFeature } from "../../../../src/data/cover";
+import { LightColorMode } from "../../../../src/data/light";
+import { VacuumEntityFeature } from "../../../../src/data/vacuum";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("switch", "tv_outlet", "on", {
+    friendly_name: "TV outlet",
+    device_class: "outlet",
+  }),
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+    supported_color_modes: [LightColorMode.HS],
+  }),
+  getEntity("light", "unavailable", "unavailable", {
+    friendly_name: "Unavailable entity",
+  }),
+  getEntity("climate", "thermostat", "heat", {
+    current_temperature: 73,
+    min_temp: 45,
+    max_temp: 95,
+    temperature: 80,
+    hvac_modes: ["heat", "cool", "auto", "off"],
+    friendly_name: "Thermostat",
+    hvac_action: "heating",
+  }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+  }),
+  getEntity("vacuum", "first_floor_vacuum", "docked", {
+    friendly_name: "First floor vacuum",
+    supported_features:
+      VacuumEntityFeature.START +
+      VacuumEntityFeature.STOP +
+      VacuumEntityFeature.RETURN_HOME,
+  }),
+  getEntity("cover", "kitchen_shutter", "open", {
+    friendly_name: "Kitchen shutter",
+    device_class: "shutter",
+    supported_features:
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP,
+  }),
+  getEntity("cover", "pergola_roof", "open", {
+    friendly_name: "Pergola Roof",
+    supported_features:
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT,
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+    `,
+  },
+  {
+    heading: "Vertical example",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+  vertical: true
+    `,
+  },
+  {
+    heading: "Custom color",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+  color: pink
+    `,
+  },
+  {
+    heading: "Unknown entity",
+    config: `
+- type: tile
+  entity: light.unknown
+    `,
+  },
+  {
+    heading: "Unavailable entity",
+    config: `
+- type: tile
+  entity: light.unavailable
+    `,
+  },
+  {
+    heading: "Climate",
+    config: `
+- type: tile
+  entity: climate.thermostat
+    `,
+  },
+  {
+    heading: "Person",
+    config: `
+- type: tile
+  entity: person.paulus
+    `,
+  },
+  {
+    heading: "Light brightness feature",
+    config: `
+- type: tile
+  entity: light.bed_light
+  features:
+    - type: "light-brightness"
+    `,
+  },
+  {
+    heading: "Vacuum commands feature",
+    config: `
+- type: tile
+  entity: vacuum.first_floor_vacuum
+  features:
+    - type: "vacuum-commands"
+      commands:
+        - start_pause
+        - stop
+        - return_home
+    `,
+  },
+  {
+    heading: "Cover open close feature",
+    config: `
+- type: tile
+  entity: cover.kitchen_shutter
+  features:
+    - type: "cover-open-close"
+    `,
+  },
+  {
+    heading: "Cover tilt feature",
+    config: `
+- type: tile
+  entity: cover.pergola_roof
+  features:
+  - type: "cover-tilt"
+    `,
+  },
+];
+
+@customElement("demo-lovelace-tile-card")
+class DemoTile extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-lovelace-tile-card": DemoTile;
+  }
+}

gallery/src/pages/misc/integration-card.ts

@@ -197,6 +197,7 @@ const createEntityRegistryEntries = (
     platform: "updater",
     has_entity_name: false,
     unique_id: "updater",
+    options: null,
   },
 ];
 

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

@@ -138,7 +138,10 @@ export class DialogHassioNetwork
         )}
         ${this._interface?.type === "wireless"
           ? html`
-              <ha-expansion-panel header="Wi-Fi" outlined>
+              <ha-expansion-panel
+                .header=${this.supervisor.localize("dialog.network.wifi")}
+                outlined
+              >
                 ${this._interface?.wifi?.ssid
                   ? html`<p>
                       ${this.supervisor.localize(
@@ -177,7 +180,11 @@ export class DialogHassioNetwork
                                 >
                                   <span>${ap.ssid}</span>
                                   <span slot="secondary">
-                                    ${ap.mac} - Strength: ${ap.signal}
+                                    ${ap.mac} -
+                                    ${this.supervisor.localize(
+                                      "dialog.network.signal_strength"
+                                    )}:
+                                    ${ap.signal}
                                   </span>
                                 </mwc-list-item>
                               `
@@ -241,7 +248,9 @@ export class DialogHassioNetwork
                               class="flex-auto"
                               type="password"
                               id="psk"
-                              label="Password"
+                              .label=${this.supervisor.localize(
+                                "dialog.network.wifi_password"
+                              )}
                               version="wifi"
                               @value-changed=${this
                                 ._handleInputValueChangedWifi}

package.json

@@ -24,26 +24,25 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.0",
+    "@braintree/sanitize-url": "^6.0.2",
     "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^6.1.3",
+    "@codemirror/commands": "^6.2.0",
     "@codemirror/language": "^6.4.0",
     "@codemirror/legacy-modes": "^6.3.1",
     "@codemirror/search": "^6.2.3",
     "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.7.1",
-    "@formatjs/intl-datetimeformat": "^4.2.5",
+    "@codemirror/view": "^6.8.1",
+    "@formatjs/intl-datetimeformat": "^6.4.3",
     "@formatjs/intl-getcanonicallocales": "^2.0.5",
     "@formatjs/intl-locale": "^3.0.11",
-    "@formatjs/intl-numberformat": "^7.2.5",
-    "@formatjs/intl-pluralrules": "^4.1.5",
-    "@formatjs/intl-relativetimeformat": "^9.3.2",
-    "@fullcalendar/common": "5.9.0",
-    "@fullcalendar/core": "5.9.0",
-    "@fullcalendar/daygrid": "5.9.0",
-    "@fullcalendar/interaction": "5.9.0",
-    "@fullcalendar/list": "5.9.0",
-    "@fullcalendar/timegrid": "5.9.0",
+    "@formatjs/intl-numberformat": "^8.3.3",
+    "@formatjs/intl-pluralrules": "^5.1.8",
+    "@formatjs/intl-relativetimeformat": "^11.1.8",
+    "@fullcalendar/core": "^6.1.4",
+    "@fullcalendar/daygrid": "^6.1.4",
+    "@fullcalendar/interaction": "^6.1.4",
+    "@fullcalendar/list": "^6.1.4",
+    "@fullcalendar/timegrid": "^6.1.4",
     "@lezer/highlight": "^1.1.3",
     "@lit-labs/motion": "^1.0.3",
     "@lit-labs/virtualizer": "^1.0.1",
@@ -88,51 +87,52 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "^23.3.5",
-    "@vaadin/vaadin-themable-mixin": "^23.3.5",
+    "@vaadin/combo-box": "^23.3.6",
+    "@vaadin/vaadin-themable-mixin": "^23.3.6",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.3.0",
-    "@webcomponents/scoped-custom-element-registry": "^0.0.5",
-    "@webcomponents/webcomponentsjs": "^2.2.10",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.8",
+    "@webcomponents/webcomponentsjs": "^2.7.0",
     "app-datepicker": "^5.1.0",
     "chart.js": "^3.3.2",
-    "comlink": "^4.3.1",
-    "core-js": "^3.15.2",
+    "comlink": "^4.4.1",
+    "core-js": "^3.27.2",
     "cropperjs": "^1.5.13",
     "date-fns": "^2.29.3",
-    "date-fns-tz": "^1.3.7",
+    "date-fns-tz": "^2.0.0",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.6.2",
     "google-timezones-json": "^1.0.2",
     "hammerjs": "^2.0.8",
-    "hls.js": "^1.3.1",
+    "hls.js": "^1.3.3",
     "home-assistant-js-websocket": "^8.0.1",
-    "idb-keyval": "^5.1.3",
-    "intl-messageformat": "^10.2.5",
+    "idb-keyval": "^6.2.0",
+    "intl-messageformat": "^10.3.0",
     "js-yaml": "^4.1.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.3",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.6.1",
-    "marked": "^4.0.12",
+    "marked": "^4.2.12",
     "memoize-one": "^6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
     "punycode": "^2.3.0",
-    "qr-scanner": "^1.3.0",
+    "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.1",
     "regenerator-runtime": "^0.13.11",
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "rrule": "^2.7.1",
-    "sortablejs": "^1.14.0",
+    "sortablejs": "^1.15.0",
     "superstruct": "^1.0.3",
-    "tinykeys": "^1.1.3",
-    "tsparticles": "^1.34.0",
-    "unfetch": "^4.1.0",
-    "vis-data": "^7.1.2",
+    "tinykeys": "^1.4.0",
+    "tsparticles-engine": "^2.8.0",
+    "tsparticles-preset-links": "^2.8.0",
+    "unfetch": "^5.0.0",
+    "vis-data": "^7.1.4",
     "vis-network": "^8.5.4",
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
@@ -146,29 +146,29 @@
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.12",
     "@babel/plugin-external-helpers": "^7.18.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.20.7",
+    "@babel/plugin-proposal-decorators": "^7.20.13",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@koa/cors": "^3.1.0",
-    "@octokit/auth-oauth-device": "^4.0.2",
+    "@koa/cors": "^4.0.0",
+    "@octokit/auth-oauth-device": "^4.0.4",
     "@octokit/rest": "^19.0.7",
-    "@open-wc/dev-server-hmr": "^0.0.2",
+    "@open-wc/dev-server-hmr": "^0.1.3",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
     "@types/chromecast-caf-receiver": "5.0.12",
-    "@types/chromecast-caf-sender": "^1.0.3",
+    "@types/chromecast-caf-sender": "^1.0.5",
     "@types/glob": "^8",
     "@types/hammerjs": "^2.0.41",
     "@types/js-yaml": "^4",
@@ -180,21 +180,22 @@
     "@types/sortablejs": "^1",
     "@types/tar": "^6",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.49.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
-    "babel-loader": "^9.1.0",
-    "chai": "^4.3.4",
+    "babel-loader": "^9.1.2",
+    "chai": "^4.3.7",
     "del": "^7.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-lit": "^1.6.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-disable": "^2.0.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-lit": "^1.8.2",
+    "eslint-plugin-lit-a11y": "^2.3.0",
     "eslint-plugin-unused-imports": "^1.1.5",
     "eslint-plugin-wc": "^1.4.0",
     "fancy-log": "^2.0.0",
@@ -202,20 +203,20 @@
     "glob": "^8.1.0",
     "gulp": "^4.0.2",
     "gulp-flatmap": "^1.0.2",
-    "gulp-json-transform": "^0.4.6",
+    "gulp-json-transform": "^0.4.8",
     "gulp-merge-json": "^2.1.2",
     "gulp-rename": "^2.0.0",
-    "gulp-zopfli-green": "^3.0.1",
+    "gulp-zopfli-green": "^6.0.1",
     "html-minifier": "^4.0.0",
     "husky": "^8.0.3",
-    "instant-mocha": "^1.3.1",
+    "instant-mocha": "^1.5.0",
     "jszip": "^3.10.1",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.1",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
-    "merge-stream": "^1.0.1",
+    "merge-stream": "^2.0.0",
     "mocha": "^8.4.0",
     "object-hash": "^3.0.0",
     "open": "^8.4.0",
@@ -228,25 +229,24 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "serve": "^11.3.2",
     "sinon": "^15.0.1",
-    "source-map-url": "^0.4.0",
-    "systemjs": "^6.3.2",
-    "tar": "^6.1.11",
+    "source-map-url": "^0.4.1",
+    "systemjs": "^6.13.0",
+    "tar": "^6.1.13",
     "terser-webpack-plugin": "^5.2.4",
     "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "^5.55.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
-    "webpack-manifest-plugin": "^4.0.2",
+    "webpack-manifest-plugin": "^5.0.0",
     "webpackbar": "^5.0.2",
     "workbox-build": "^6.5.4"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
-    "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
-    "@webcomponents/webcomponentsjs": "^2.2.10"
+    "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch"
   },
   "main": "src/home-assistant.js",
   "prettier": {

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230128.0"
+version      = "20230202.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/common/config/version.ts

@@ -22,3 +22,11 @@ export const atLeastVersion = (
       Number(haPatch) >= patch)
   );
 };
+
+export const isDevVersion = (version: string): boolean => {
+  if (__DEMO__) {
+    return false;
+  }
+
+  return version.includes("dev");
+};

src/common/datetime/first_weekday.ts

@@ -1,6 +1,12 @@
 import { getWeekStartByLocale } from "weekstart";
 import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
 
+import { polyfillsLoaded } from "../translations/localize";
+
+if (__BUILD__ === "latest" && polyfillsLoaded) {
+  await polyfillsLoaded;
+}
+
 export const weekdays = [
   "sunday",
   "monday",

src/common/dom/setup-leaflet-map.ts

@@ -11,8 +11,7 @@ export const setupLeafletMap = async (
     throw new Error("Cannot setup Leaflet map on disconnected element");
   }
   // eslint-disable-next-line
-  const Leaflet = ((await import("leaflet")) as any)
-    .default as LeafletModuleType;
+  const Leaflet = (await import("leaflet")).default as LeafletModuleType;
   Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";
 
   const map = Leaflet.map(mapElement);

src/common/entity/compute_state_display.ts

@@ -49,6 +49,8 @@ export const computeStateDisplayFromEntityAttributes = (
     return localize(`state.default.${state}`);
   }
 
+  const entity = entities[entityId] as EntityRegistryEntry | undefined;
+
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
   if (isNumericFromAttributes(attributes)) {
     // state is duration
@@ -82,7 +84,7 @@ export const computeStateDisplayFromEntityAttributes = (
     return `${formatNumber(
       state,
       locale,
-      getNumberFormatOptions({ state, attributes } as HassEntity)
+      getNumberFormatOptions({ state, attributes } as HassEntity, entity)
     )}${unit}`;
   }
 
@@ -160,7 +162,7 @@ export const computeStateDisplayFromEntityAttributes = (
     return formatNumber(
       state,
       locale,
-      getNumberFormatOptions({ state, attributes } as HassEntity)
+      getNumberFormatOptions({ state, attributes } as HassEntity, entity)
     );
   }
 
@@ -199,8 +201,6 @@ export const computeStateDisplayFromEntityAttributes = (
       : localize("ui.card.update.up_to_date");
   }
 
-  const entity = entities[entityId] as EntityRegistryEntry | undefined;
-
   return (
     (entity?.translation_key &&
       localize(

src/common/integrations/protocolIntegrationPicked.ts

@@ -4,12 +4,15 @@ import { domainToName } from "../../data/integration";
 import { getIntegrationDescriptions } from "../../data/integrations";
 import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
+import { showMatterAddDeviceDialog } from "../../panels/config/integrations/integration-panels/matter/show-dialog-add-matter-device";
 import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { isComponentLoaded } from "../config/is_component_loaded";
 import { navigate } from "../navigate";
 
+export const PROTOCOL_INTEGRATIONS = ["zha", "zwave_js", "matter"] as const;
+
 export const protocolIntegrationPicked = async (
   element: HTMLElement,
   hass: HomeAssistant,
@@ -113,5 +116,43 @@ export const protocolIntegrationPicked = async (
     }
 
     navigate("/config/zha/add");
+  } else if (domain === "matter") {
+    const entries = await getConfigEntries(hass, {
+      domain,
+    });
+    if (!isComponentLoaded(hass, domain) || !entries.length) {
+      // If the component isn't loaded, ask them to load the integration first
+      showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Matter" }
+        ),
+        text: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_matter",
+          {
+            integration: "Matter",
+            brand: options?.brand || options?.domain || "Matter",
+            supported_hardware_link: html`<a
+              href=${documentationUrl(hass, "/integrations/matter")}
+              target="_blank"
+              rel="noreferrer"
+              >${hass.localize(
+                "ui.panel.config.integrations.config_flow.supported_hardware"
+              )}</a
+            >`,
+          }
+        ),
+        confirmText: hass.localize(
+          "ui.panel.config.integrations.config_flow.proceed"
+        ),
+        confirm: () => {
+          showConfigFlowDialog(element, {
+            startFlowHandler: "matter",
+          });
+        },
+      });
+      return;
+    }
+    showMatterAddDeviceDialog(element);
   }
 };

src/common/number/format_number.ts

@@ -2,6 +2,7 @@ import {
   HassEntity,
   HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
+import { EntityRegistryEntry } from "../../data/entity_registry";
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 import { round } from "./round";
 
@@ -90,8 +91,18 @@ export const formatNumber = (
  * @returns An `Intl.NumberFormatOptions` object with `maximumFractionDigits` set to 0, or `undefined`
  */
 export const getNumberFormatOptions = (
-  entityState: HassEntity
+  entityState: HassEntity,
+  entity?: EntityRegistryEntry
 ): Intl.NumberFormatOptions | undefined => {
+  const precision =
+    entity?.options?.sensor?.display_precision ??
+    entity?.options?.sensor?.suggested_display_precision;
+  if (precision != null) {
+    return {
+      maximumFractionDigits: precision,
+      minimumFractionDigits: precision,
+    };
+  }
   if (
     Number.isInteger(Number(entityState.attributes?.step)) &&
     Number.isInteger(Number(entityState.state))

src/common/translations/localize.ts

@@ -65,19 +65,21 @@ export interface FormatsType {
 
 const loadedPolyfillLocale = new Set();
 
+const locale = getLocalLanguage();
+
 const polyfills: Promise<any>[] = [];
 if (__BUILD__ === "latest") {
   if (shouldPolyfillLocale()) {
-    polyfills.push(import("@formatjs/intl-locale/polyfill"));
+    await import("@formatjs/intl-locale/polyfill");
   }
-  if (shouldPolyfillPluralRules()) {
+  if (shouldPolyfillPluralRules(locale)) {
     polyfills.push(import("@formatjs/intl-pluralrules/polyfill"));
     polyfills.push(import("@formatjs/intl-pluralrules/locale-data/en"));
   }
-  if (shouldPolyfillRelativeTime()) {
+  if (shouldPolyfillRelativeTime(locale)) {
     polyfills.push(import("@formatjs/intl-relativetimeformat/polyfill"));
   }
-  if (shouldPolyfillDateTime()) {
+  if (shouldPolyfillDateTime(locale)) {
     polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
     polyfills.push(import("@formatjs/intl-datetimeformat/add-all-tz"));
   }
@@ -88,7 +90,7 @@ export const polyfillsLoaded =
     ? undefined
     : Promise.all(polyfills).then(() =>
         // Load the default language
-        loadPolyfillLocales(getLocalLanguage())
+        loadPolyfillLocales(locale)
       );
 
 /**
@@ -214,7 +216,7 @@ export const loadPolyfillLocales = async (language: string) => {
       // @ts-ignore
       Intl.DateTimeFormat.__addLocaleData(await result.json());
     }
-  } catch (_e) {
+  } catch (e) {
     // Ignore
   }
 };

src/common/util/select-unit.ts

@@ -19,6 +19,7 @@ const SECS_PER_HOUR = SECS_PER_MIN * 60;
 // Adapted from https://github.com/formatjs/formatjs/blob/186cef62f980ec66252ee232f438a42d0b51b9f9/packages/intl-utils/src/diff.ts
 export function selectUnit(
   from: Date | number,
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   to: Date | number = Date.now(),
   locale: FrontendLocaleData,
   thresholds: Partial<Thresholds> = {}

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

@@ -22,7 +22,7 @@ class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public data: LineChartEntity[] = [];
 
-  @property() public names: boolean | Record<string, string> = false;
+  @property() public names?: Record<string, string>;
 
   @property() public unit?: string;
 

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

@@ -19,7 +19,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @property() public names: boolean | Record<string, string> = false;
+  @property() public names?: Record<string, string>;
 
   @property() public unit?: string;
 
@@ -64,6 +64,8 @@ export class StateHistoryChartTimeline extends LitElement {
     }
 
     if (
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
       changedProps.has("data") ||
       this._chartTime <
         new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)

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

@@ -38,14 +38,14 @@ declare global {
 }
 
 @customElement("state-history-charts")
-class StateHistoryCharts extends LitElement {
+export class StateHistoryCharts extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public historyData!: HistoryResult;
 
   @property() public narrow!: boolean;
 
-  @property({ type: Boolean }) public names = false;
+  @property() public names?: Record<string, string>;
 
   @property({ type: Boolean, attribute: "virtualize", reflect: true })
   public virtualize = false;
@@ -71,7 +71,6 @@ class StateHistoryCharts extends LitElement {
   // @ts-ignore
   @restoreScroll(".container") private _savedScrollPos?: number;
 
-  @eventOptions({ passive: true })
   protected render(): TemplateResult {
     if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">

src/components/chart/statistics-chart.ts

@@ -66,7 +66,7 @@ class StatisticsChart extends LitElement {
     StatisticsMetaData
   >;
 
-  @property() public names: boolean | Record<string, string> = false;
+  @property() public names?: Record<string, string>;
 
   @property() public unit?: string;
 

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

@@ -1,4 +1,4 @@
-import "@material/mwc-list/mwc-list-item";
+import "../ha-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@@ -24,13 +24,13 @@ export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
-  html`<mwc-list-item graphic="avatar" .twoline=${!!item.entity_id}>
+  html`<ha-list-item graphic="avatar" .twoline=${!!item.entity_id}>
     ${item.state
       ? html`<state-badge slot="graphic" .stateObj=${item}></state-badge>`
       : ""}
     <span>${item.friendly_name}</span>
     <span slot="secondary">${item.entity_id}</span>
-  </mwc-list-item>`;
+  </ha-list-item>`;
 
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {

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

@@ -186,7 +186,7 @@ export class HaStateLabelBadge extends LitElement {
           ? formatNumber(
               entityState.state,
               this.hass!.locale,
-              getNumberFormatOptions(entityState)
+              getNumberFormatOptions(entityState, entry)
             )
           : computeStateDisplay(
               this.hass!.localize,

src/components/entity/state-badge.ts

@@ -133,7 +133,7 @@ export class StateBadge extends LitElement {
         }
         if (stateObj.attributes.hvac_action) {
           const hvacAction = stateObj.attributes.hvac_action;
-          if (["heating", "cooling", "drying", "fan"].includes(hvacAction)) {
+          if (hvacAction in HVAC_ACTION_TO_MODE) {
             iconStyle.color = stateColorCss(
               stateObj,
               HVAC_ACTION_TO_MODE[hvacAction]

src/components/ha-blueprint-picker.ts

@@ -41,9 +41,9 @@ class HaBluePrintPicker extends LitElement {
       return [];
     }
     const result = Object.entries(blueprints)
-      .filter(([_path, blueprint]) => !("error" in blueprint))
+      .filter((entry): entry is [string, Blueprint] => !("error" in entry[1]))
       .map(([path, blueprint]) => ({
-        ...(blueprint as Blueprint).metadata,
+        ...blueprint.metadata,
         path,
       }));
     return result.sort((a, b) =>

src/components/ha-button.ts

@@ -0,0 +1,24 @@
+import { Button } from "@material/mwc-button";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { styles } from "@material/mwc-button/styles.css";
+
+@customElement("ha-button")
+export class HaButton extends Button {
+  static override styles = [
+    styles,
+    css`
+      ::slotted([slot="icon"]) {
+        margin-inline-start: 0px;
+        margin-inline-end: 8px;
+        direction: var(--direction);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button": HaButton;
+  }
+}

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

@@ -13,6 +13,15 @@ export class HaCheckListItem extends CheckListItemBase {
       :host {
         --mdc-theme-secondary: var(--primary-color);
       }
+
+      :host([graphic="avatar"]) .mdc-deprecated-list-item__graphic,
+      :host([graphic="medium"]) .mdc-deprecated-list-item__graphic,
+      :host([graphic="large"]) .mdc-deprecated-list-item__graphic,
+      :host([graphic="control"]) .mdc-deprecated-list-item__graphic {
+        margin-inline-end: var(--mdc-list-item-graphic-margin, 16px);
+        margin-inline-start: 0px;
+        direction: var(--direction);
+      }
     `,
   ];
 }

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

@@ -17,11 +17,8 @@ export class HaClickableListItem extends HaListItem {
     const href = this.href || "";
 
     return html`${this.disableHref
-      ? html`<a aria-role="option">${r}</a>`
-      : html`<a
-          aria-role="option"
-          target=${this.openNewTab ? "_blank" : ""}
-          href=${href}
+      ? html`<a>${r}</a>`
+      : html`<a target=${this.openNewTab ? "_blank" : ""} href=${href}
           >${r}</a
         >`}`;
   }

src/components/ha-combo-box.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
@@ -15,15 +14,15 @@ import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
+import "./ha-list-item";
 import "./ha-icon-button";
-import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 registerStyles(
   "vaadin-combo-box-item",
   css`
     :host {
-      padding: 0;
+      padding: 0 !important;
     }
     :host([focused]:not([disabled])) {
       background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
@@ -211,9 +210,9 @@ export class HaComboBox extends LitElement {
   private _defaultRowRenderer: ComboBoxLitRenderer<
     string | Record<string, any>
   > = (item) =>
-    html`<mwc-list-item>
+    html`<ha-list-item>
       ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </mwc-list-item>`;
+    </ha-list-item>`;
 
   private _clearValue(ev: Event) {
     ev.stopPropagation();

src/components/ha-dialog-date-picker.ts

@@ -24,7 +24,7 @@ export class HaDialogDatePicker extends LitElement {
   @state() private _value?: string;
 
   public async showDialog(params: datePickerDialogParams): Promise<void> {
-    // app-datpicker has a bug, that it removes its handlers when disconnected, but doesnt add them back when reconnected.
+    // app-datepicker has a bug, that it removes its handlers when disconnected, but doesn't add them back when reconnected.
     // So we need to wait for the next render to make sure the element is removed and re-created so the handlers are added.
     await nextRender();
     this._params = params;

src/components/ha-dialog.ts

@@ -46,7 +46,10 @@ export class HaDialog extends DialogBase {
     styles,
     css`
       .mdc-dialog {
-        --mdc-dialog-scroll-divider-color: var(--divider-color);
+        --mdc-dialog-scroll-divider-color: var(
+          --dialog-scroll-divider-color,
+          var(--divider-color)
+        );
         z-index: var(--dialog-z-index, 7);
         -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
         backdrop-filter: var(--dialog-backdrop-filter, none);

src/components/ha-file-upload.ts

@@ -75,7 +75,6 @@ export class HaFileUpload extends LitElement {
               ${this.icon
                 ? html`<span
                     class="mdc-text-field__icon mdc-text-field__icon--leading"
-                    tabindex="-1"
                   >
                     <ha-icon-button
                       @click=${this._openFilePicker}
@@ -95,7 +94,6 @@ export class HaFileUpload extends LitElement {
               ${this.value
                 ? html`<span
                     class="mdc-text-field__icon mdc-text-field__icon--trailing"
-                    tabindex="1"
                   >
                     <ha-icon-button
                       slot="suffix"

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

@@ -1,22 +1,33 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-alert";
 import "../ha-selector/ha-selector";
-import "./ha-form-boolean";
-import "./ha-form-constant";
-import "./ha-form-float";
-import "./ha-form-grid";
-import "./ha-form-expandable";
-import "./ha-form-integer";
-import "./ha-form-multi_select";
-import "./ha-form-positive_time_period_dict";
-import "./ha-form-select";
-import "./ha-form-string";
 import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
 
+const LOAD_ELEMENTS = {
+  boolean: () => import("./ha-form-boolean"),
+  constant: () => import("./ha-form-constant"),
+  float: () => import("./ha-form-float"),
+  grid: () => import("./ha-form-grid"),
+  expandable: () => import("./ha-form-expandable"),
+  integer: () => import("./ha-form-integer"),
+  multi_select: () => import("./ha-form-multi_select"),
+  positive_time_period_dict: () =>
+    import("./ha-form-positive_time_period_dict"),
+  select: () => import("./ha-form-select"),
+  string: () => import("./ha-form-string"),
+};
+
 const getValue = (obj, item) =>
   obj ? (!item.name ? obj : obj[item.name]) : null;
 
@@ -58,6 +69,17 @@ export class HaForm extends LitElement implements HaFormElement {
     }
   }
 
+  protected willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("schema") && this.schema) {
+      this.schema.forEach((item) => {
+        if ("selector" in item) {
+          return;
+        }
+        LOAD_ELEMENTS[item.type]?.();
+      });
+    }
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="root" part="root">

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

@@ -1,6 +1,8 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { domainIcon } from "../../common/entity/domain_icon";
 import { IconSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-picker";
@@ -21,7 +23,22 @@ export class HaIconSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @property() public context?: {
+    icon_entity?: string;
+  };
+
   protected render() {
+    const iconEntity = this.context?.icon_entity;
+
+    const stateObj = iconEntity ? this.hass.states[iconEntity] : undefined;
+
+    const placeholder =
+      this.selector.icon?.placeholder || stateObj?.attributes.icon;
+    const fallbackPath =
+      !placeholder && stateObj
+        ? domainIcon(computeDomain(iconEntity!), stateObj)
+        : undefined;
+
     return html`
       <ha-icon-picker
         .hass=${this.hass}
@@ -30,8 +47,8 @@ export class HaIconSelector extends LitElement {
         .required=${this.required}
         .disabled=${this.disabled}
         .helper=${this.helper}
-        .fallbackPath=${this.selector.icon?.fallbackPath}
-        .placeholder=${this.selector.icon?.placeholder}
+        .fallbackPath=${this.selector.icon?.fallbackPath ?? fallbackPath}
+        .placeholder=${this.selector.icon?.placeholder ?? placeholder}
         @value-changed=${this._valueChanged}
       ></ha-icon-picker>
     `;

src/components/tile/ha-tile-info.ts

@@ -25,6 +25,8 @@ export class HaTileInfo extends LitElement {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
+        justify-content: center;
+        min-height: 40px;
       }
       span {
         text-overflow: ellipsis;

src/data/blueprint.ts

@@ -16,6 +16,7 @@ export interface BlueprintMetaData {
   input?: Record<string, BlueprintInput | null>;
   description?: string;
   source_url?: string;
+  author?: string;
 }
 
 export interface BlueprintInput {
@@ -63,3 +64,19 @@ export const deleteBlueprint = (
     domain,
     path,
   });
+
+export type BlueprintSourceType = "local" | "community" | "homeassistant";
+
+export const getBlueprintSourceType = (
+  blueprint: Blueprint
+): BlueprintSourceType => {
+  const sourceUrl = blueprint.metadata.source_url;
+
+  if (!sourceUrl) {
+    return "local";
+  }
+  if (sourceUrl.includes("github.com/home-assistant")) {
+    return "homeassistant";
+  }
+  return "community";
+};

src/data/energy.ts

@@ -405,26 +405,18 @@ const getEnergyData = async (
     volume: lengthUnit === "km" ? "L" : "gal",
   };
 
-  const stats = {
-    ...(await fetchStatistics(
-      hass!,
-      startMinHour,
-      end,
-      energyStatIds,
-      period,
-      energyUnits,
-      ["sum"]
-    )),
-    ...(await fetchStatistics(
-      hass!,
-      startMinHour,
-      end,
-      waterStatIds,
-      period,
-      waterUnits,
-      ["sum"]
-    )),
-  };
+  const stats =
+    energyStatIds.length || waterStatIds.length
+      ? await fetchStatistics(
+          hass!,
+          startMinHour,
+          end,
+          [...energyStatIds, ...waterStatIds],
+          period,
+          { ...energyUnits, ...waterUnits },
+          ["sum"]
+        )
+      : {};
 
   let statsCompare;
   let startCompare;
@@ -440,28 +432,19 @@ const getEnergyData = async (
     const compareStartMinHour = addHours(startCompare, -1);
     endCompare = addMilliseconds(start, -1);
 
-    statsCompare = {
-      ...(await fetchStatistics(
-        hass!,
-        compareStartMinHour,
-        endCompare,
-        energyStatIds,
-        period,
-        energyUnits,
-        ["sum"]
-      )),
-      ...(await fetchStatistics(
-        hass!,
-        compareStartMinHour,
-        endCompare,
-        waterStatIds,
-        period,
-        waterUnits,
-        ["sum"]
-      )),
-    };
+    statsCompare =
+      energyStatIds.length || waterStatIds.length
+        ? await fetchStatistics(
+            hass!,
+            compareStartMinHour,
+            endCompare,
+            [...energyStatIds, ...waterStatIds],
+            period,
+            { ...energyUnits, ...waterUnits },
+            ["sum"]
+          )
+        : {};
   }
-
   let fossilEnergyConsumption: FossilEnergyConsumption | undefined;
   let fossilEnergyConsumptionCompare: FossilEnergyConsumption | undefined;
 

src/data/entity_registry.ts

@@ -22,6 +22,7 @@ export interface EntityRegistryEntry {
   original_name?: string;
   unique_id: string;
   translation_key?: string;
+  options: EntityRegistryOptions | null;
 }
 
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
@@ -30,7 +31,6 @@ export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
   device_class?: string;
   original_device_class?: string;
   aliases: string[];
-  options: EntityRegistryOptions | null;
 }
 
 export interface UpdateEntityRegistryEntryResult {
@@ -40,7 +40,8 @@ export interface UpdateEntityRegistryEntryResult {
 }
 
 export interface SensorEntityOptions {
-  precision?: number | null;
+  display_precision?: number | null;
+  suggested_display_precision?: number | null;
   unit_of_measurement?: string | null;
 }
 

src/data/history.ts

@@ -117,7 +117,7 @@ export const fetchDateWS = (
 
 export const subscribeHistory = (
   hass: HomeAssistant,
-  callbackFunction: (message: HistoryStreamMessage) => void,
+  callbackFunction: (data: HistoryStates) => void,
   startTime: Date,
   endTime: Date,
   entityIds: string[]
@@ -132,8 +132,9 @@ export const subscribeHistory = (
       entityIdHistoryNeedsAttributes(hass, entityId)
     ),
   };
+  const stream = new HistoryStream(hass);
   return hass.connection.subscribeMessage<HistoryStreamMessage>(
-    (message) => callbackFunction(message),
+    (message) => callbackFunction(stream.processMessage(message)),
     params
   );
 };
@@ -141,11 +142,11 @@ export const subscribeHistory = (
 class HistoryStream {
   hass: HomeAssistant;
 
-  hoursToShow: number;
+  hoursToShow?: number;
 
   combinedHistory: HistoryStates;
 
-  constructor(hass: HomeAssistant, hoursToShow: number) {
+  constructor(hass: HomeAssistant, hoursToShow?: number) {
     this.hass = hass;
     this.hoursToShow = hoursToShow;
     this.combinedHistory = {};
@@ -161,8 +162,9 @@ class HistoryStream {
       // indicate no more historical events
       return this.combinedHistory;
     }
-    const purgeBeforePythonTime =
-      (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000;
+    const purgeBeforePythonTime = this.hoursToShow
+      ? (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000
+      : undefined;
     const newHistory: HistoryStates = {};
     for (const entityId of Object.keys(this.combinedHistory)) {
       newHistory[entityId] = [];
@@ -195,7 +197,7 @@ class HistoryStream {
         newHistory[entityId] = streamMessage.states[entityId];
       }
       // Remove old history
-      if (entityId in this.combinedHistory) {
+      if (purgeBeforePythonTime && entityId in this.combinedHistory) {
         const expiredStates = newHistory[entityId].filter(
           (state) => state.lu < purgeBeforePythonTime
         );

src/data/matter.ts

@@ -1,4 +1,53 @@
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
+import { subscribeDeviceRegistry } from "./device_registry";
+
+export const canCommissionMatterExternal = (hass: HomeAssistant) =>
+  hass.auth.external?.config.canCommissionMatter;
+
+export const startExternalCommissioning = (hass: HomeAssistant) =>
+  hass.auth.external!.fireMessage({
+    type: "matter/commission",
+  });
+
+export const redirectOnNewMatterDevice = (
+  hass: HomeAssistant,
+  callback?: () => void
+): UnsubscribeFunc => {
+  let curMatterDevices: Set<string> | undefined;
+  const unsubDeviceReg = subscribeDeviceRegistry(hass.connection, (entries) => {
+    if (!curMatterDevices) {
+      curMatterDevices = new Set(
+        Object.values(entries)
+          .filter((device) =>
+            device.identifiers.find((identifier) => identifier[0] === "matter")
+          )
+          .map((device) => device.id)
+      );
+      return;
+    }
+    const newMatterDevices = Object.values(entries).filter(
+      (device) =>
+        device.identifiers.find((identifier) => identifier[0] === "matter") &&
+        !curMatterDevices!.has(device.id)
+    );
+    if (newMatterDevices.length) {
+      unsubDeviceReg();
+      curMatterDevices = undefined;
+      callback?.();
+      navigate(`/config/devices/device/${newMatterDevices[0].id}`);
+    }
+  });
+  return () => {
+    unsubDeviceReg();
+    curMatterDevices = undefined;
+  };
+};
+
+export const addMatterDevice = (hass: HomeAssistant) => {
+  startExternalCommissioning(hass);
+};
 
 export const commissionMatterDevice = (
   hass: HomeAssistant,

src/data/zwave_js.ts

@@ -700,7 +700,7 @@ export const fetchZwaveNodeFirmwareUpdateCapabilities = (
   device_id: string
 ): Promise<ZWaveJSNodeFirmwareUpdateCapabilities> =>
   hass.callWS({
-    type: "zwave_js/get_firmware_update_capabilities",
+    type: "zwave_js/get_node_firmware_update_capabilities",
     device_id,
   });
 

src/dialogs/more-info/ha-more-info-history.ts

@@ -113,20 +113,15 @@ export class MoreInfoHistory extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._unsubscribeHistoryTimeWindow();
+    this._unsubscribeHistory();
   }
 
-  private _unsubscribeHistoryTimeWindow() {
-    if (!this._subscribed) {
-      return;
-    }
+  private _unsubscribeHistory() {
     clearInterval(this._interval);
-    this._subscribed.then((unsubscribe) => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
+    if (this._subscribed) {
+      this._subscribed.then((unsub) => unsub?.());
       this._subscribed = undefined;
-    });
+    }
   }
 
   private _redrawGraph() {
@@ -165,7 +160,7 @@ export class MoreInfoHistory extends LitElement {
       return;
     }
     if (this._subscribed) {
-      this._unsubscribeHistoryTimeWindow();
+      this._unsubscribeHistory();
     }
     this._subscribed = subscribeHistoryStatesTimeWindow(
       this.hass!,

src/html/authorize.html.template

@@ -43,6 +43,9 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script crossorigin="use-credentials">
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
         import("<%= latestPageJS %>");
@@ -50,9 +53,6 @@
         window.providersPromise = fetch("/auth/providers", {
           credentials: "same-origin",
         });
-        if (!window.globalThis) {
-          window.globalThis = window;
-        }
       }
     </script>
 

src/html/index.html.template

@@ -90,15 +90,15 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
         import("<%= latestCoreJS %>");
         import("<%= latestAppJS %>");
         window.customPanelJS = "<%= latestCustomPanelJS %>";
         window.latestJS = true;
-        if (!window.globalThis) {
-          window.globalThis = window;
-        }
       }
     </script>
     <script>

src/html/onboarding.html.template

@@ -13,6 +13,9 @@
         color: var(--primary-text-color, #212121);
         background-color: #0277bd !important;
       }
+      body {
+        height: auto;
+      }
       .content {
         box-sizing: border-box;
         padding: 20px 16px;
@@ -75,6 +78,9 @@
     <%= renderTemplate('_preload_roboto') %>
 
     <script crossorigin="use-credentials">
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
         import("<%= latestPageJS %>");
@@ -82,9 +88,6 @@
         window.stepsPromise = fetch("/api/onboarding", {
           credentials: "same-origin",
         });
-        if (!window.globalThis) {
-          window.globalThis = window;
-        }
       }
     </script>
 

src/onboarding/ha-onboarding.ts

@@ -72,7 +72,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
     const step = this._curStep()!;
 
     if (this._loading || !step) {
-      return html` <onboarding-loading></onboarding-loading> `;
+      return html`<onboarding-loading></onboarding-loading> `;
     }
     if (step.step === "user") {
       return html`

src/onboarding/particles.ts

@@ -1,82 +1,88 @@
-import { tsParticles } from "tsparticles";
+import { tsParticles } from "tsparticles-engine";
+import { loadLinksPreset } from "tsparticles-preset-links";
 
-tsParticles.load("particles", {
-  // autoPlay: true,
-  fullScreen: {
-    enable: true,
-    zIndex: -1,
-  },
-  detectRetina: true,
-  fpsLimit: 60,
-  motion: {
-    disable: false,
-    reduce: {
-      factor: 4,
-      value: true,
+loadLinksPreset(tsParticles).then(() => {
+  tsParticles.load("particles", {
+    preset: "links",
+    background: {
+      opacity: 0,
     },
-  },
-  particles: {
-    color: {
-      value: "#fff",
-      animation: {
-        enable: true,
-        speed: 50,
-        sync: false,
+    fullScreen: {
+      enable: true,
+      zIndex: -1,
+    },
+    detectRetina: true,
+    fpsLimit: 60,
+    motion: {
+      disable: false,
+      reduce: {
+        factor: 4,
+        value: true,
       },
     },
-    links: {
+    particles: {
       color: {
-        value: "random",
+        value: "#fff",
+        animation: {
+          enable: true,
+          speed: 50,
+          sync: false,
+        },
       },
-      distance: 100,
-      enable: true,
-      frequency: 1,
-      opacity: 0.7,
-      width: 1,
-    },
-    move: {
-      enable: true,
-      speed: 0.5,
-    },
-    number: {
-      density: {
+      links: {
+        color: {
+          value: "random",
+        },
+        distance: 100,
         enable: true,
-        area: 800,
-        factor: 1000,
+        frequency: 1,
+        opacity: 0.7,
+        width: 1,
       },
-      limit: 0,
-      value: 50,
-    },
-    opacity: {
-      random: {
+      move: {
         enable: true,
-        minimumValue: 0.3,
-      },
-      value: 0.5,
-      animation: {
-        destroy: "none",
-        enable: true,
-        minimumValue: 0.3,
         speed: 0.5,
-        startValue: "random",
-        sync: false,
+      },
+      number: {
+        density: {
+          enable: true,
+          area: 800,
+          factor: 1000,
+        },
+        limit: 0,
+        value: 50,
+      },
+      opacity: {
+        random: {
+          enable: true,
+          minimumValue: 0.3,
+        },
+        value: 0.5,
+        animation: {
+          destroy: "none",
+          enable: true,
+          minimumValue: 0.3,
+          speed: 0.5,
+          startValue: "random",
+          sync: false,
+        },
+      },
+      size: {
+        random: {
+          enable: true,
+          minimumValue: 1,
+        },
+        value: 3,
+        animation: {
+          destroy: "none",
+          enable: true,
+          minimumValue: 1,
+          speed: 3,
+          startValue: "random",
+          sync: false,
+        },
       },
     },
-    size: {
-      random: {
-        enable: true,
-        minimumValue: 1,
-      },
-      value: 3,
-      animation: {
-        destroy: "none",
-        enable: true,
-        minimumValue: 1,
-        speed: 3,
-        startValue: "random",
-        sync: false,
-      },
-    },
-  },
-  pauseOnBlur: true,
+    pauseOnBlur: true,
+  });
 });

src/panels/calendar/ha-full-calendar.ts

@@ -1,15 +1,9 @@
-// @ts-ignore
-import fullcalendarStyle from "@fullcalendar/common/main.css";
 import type { CalendarOptions } from "@fullcalendar/core";
 import { Calendar } from "@fullcalendar/core";
 import allLocales from "@fullcalendar/core/locales-all";
 import dayGridPlugin from "@fullcalendar/daygrid";
-// @ts-ignore
-import daygridStyle from "@fullcalendar/daygrid/main.css";
 import interactionPlugin from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
-// @ts-ignore
-import listStyle from "@fullcalendar/list/main.css";
 import "@material/mwc-button";
 import {
   mdiPlus,
@@ -25,7 +19,6 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS,
 } from "lit";
 import { property, state } from "lit/decorators";
 import memoize from "memoize-one";
@@ -406,10 +399,6 @@ export class HAFullCalendar extends LitElement {
     return [
       haStyle,
       css`
-        ${unsafeCSS(fullcalendarStyle)}
-        ${unsafeCSS(daygridStyle)}
-        ${unsafeCSS(listStyle)}
-
         :host {
           display: flex;
           flex-direction: column;

src/panels/config/automation/action/ha-automation-action.ts

@@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-button";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { ACTION_TYPES } from "../../../../data/action";
@@ -132,7 +133,7 @@ export default class HaAutomationAction extends LitElement {
         @action=${this._addAction}
         .disabled=${this.disabled}
       >
-        <mwc-button
+        <ha-button
           slot="trigger"
           outlined
           .disabled=${this.disabled}
@@ -141,7 +142,7 @@ export default class HaAutomationAction extends LitElement {
           )}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </mwc-button>
+        </ha-button>
         ${this._processedTypes(this.hass.localize).map(
           ([opt, label, icon]) => html`
             <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-button";
 import { Condition } from "../../../../../data/automation";
 import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
@@ -80,7 +81,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <mwc-button
+      <ha-button
         outlined
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.choose.add_option"
@@ -89,7 +90,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
         @click=${this._addOption}
       >
         <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </mwc-button>
+      </ha-button>
       ${this._showDefault || action.default
         ? html`
             <h2>
@@ -196,6 +197,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
         ha-icon-button {
           position: absolute;
           right: 0;
+          inset-inline-start: initial;
+          inset-inline-end: 0;
+          direction: var(--direction);
           padding: 4px;
         }
         ha-svg-icon {

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -8,6 +8,7 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import type { SortableEvent } from "sortablejs";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-svg-icon";
 import type { Condition } from "../../../../data/automation";
@@ -177,7 +178,7 @@ export default class HaAutomationCondition extends LitElement {
         @action=${this._addCondition}
         .disabled=${this.disabled}
       >
-        <mwc-button
+        <ha-button
           slot="trigger"
           outlined
           .disabled=${this.disabled}
@@ -186,7 +187,7 @@ export default class HaAutomationCondition extends LitElement {
           )}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </mwc-button>
+        </ha-button>
         ${this._processedTypes(this.hass.localize).map(
           ([opt, label, icon]) => html`
             <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/automation/dialog-new-automation.ts

@@ -1,17 +1,40 @@
-import "@material/mwc-button";
+import "@material/mwc-list/mwc-list";
+import {
+  mdiAccount,
+  mdiFile,
+  mdiHomeAssistant,
+  mdiOpenInNew,
+  mdiPencilOutline,
+  mdiWeb,
+} from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-blueprint-picker";
-import "../../../components/ha-circular-progress";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
+import { stringCompare } from "../../../common/string/compare";
 import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-icon-next";
+import "../../../components/ha-list-item";
+import "../../../components/ha-tip";
 import { showAutomationEditor } from "../../../data/automation";
+import {
+  Blueprint,
+  Blueprints,
+  BlueprintSourceType,
+  fetchBlueprints,
+  getBlueprintSourceType,
+} from "../../../data/blueprint";
 import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import "@material/mwc-list/mwc-list-item";
-import "../../../components/ha-icon-next";
-import "@material/mwc-list/mwc-list";
+import { documentationUrl } from "../../../util/documentation-url";
+
+const SOURCE_TYPE_ICONS: Record<BlueprintSourceType, string> = {
+  local: mdiFile,
+  community: mdiAccount,
+  homeassistant: mdiHomeAssistant,
+};
 
 @customElement("ha-dialog-new-automation")
 class DialogNewAutomation extends LitElement implements HassDialog {
@@ -19,8 +42,13 @@ class DialogNewAutomation extends LitElement implements HassDialog {
 
   @state() private _opened = false;
 
+  @state() public blueprints?: Blueprints;
+
   public showDialog(): void {
     this._opened = true;
+    fetchBlueprints(this.hass!, "automation").then((blueprints) => {
+      this.blueprints = blueprints;
+    });
   }
 
   public closeDialog(): void {
@@ -30,10 +58,33 @@ class DialogNewAutomation extends LitElement implements HassDialog {
     this._opened = false;
   }
 
+  private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
+    if (!blueprints) {
+      return [];
+    }
+    const result = Object.entries(blueprints)
+      .filter((entry): entry is [string, Blueprint] => !("error" in entry[1]))
+      .map(([path, blueprint]) => {
+        const sourceType = getBlueprintSourceType(blueprint);
+
+        return {
+          ...blueprint.metadata,
+          sourceType,
+          path,
+        };
+      });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass!.locale.language)
+    );
+  });
+
   protected render(): TemplateResult {
     if (!this._opened) {
       return html``;
     }
+
+    const processedBlueprints = this._processedBlueprints(this.blueprints);
+
     return html`
       <ha-dialog
         open
@@ -41,48 +92,117 @@ class DialogNewAutomation extends LitElement implements HassDialog {
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
-          this.hass.localize("ui.panel.config.automation.dialog_new.how")
+          this.hass.localize("ui.panel.config.automation.dialog_new.header")
         )}
       >
-        <mwc-list>
-          <mwc-list-item twoline class="blueprint" @click=${this._blueprint}>
+        <mwc-list
+          innerRole="listbox"
+          itemRoles="option"
+          innerAriaLabel=${this.hass.localize(
+            "ui.panel.config.automation.dialog_new.header"
+          )}
+          rootTabbable
+          dialogInitialFocus
+        >
+          <ha-list-item
+            hasmeta
+            twoline
+            graphic="icon"
+            @request-selected=${this._blank}
+          >
+            <ha-svg-icon slot="graphic" .path=${mdiPencilOutline}></ha-svg-icon>
             ${this.hass.localize(
-              "ui.panel.config.automation.dialog_new.blueprint.use_blueprint"
-            )}
-            <span slot="secondary">
-              <ha-blueprint-picker
-                @value-changed=${this._blueprintPicked}
-                .hass=${this.hass}
-              ></ha-blueprint-picker>
-            </span>
-          </mwc-list-item>
-          <li divider role="separator"></li>
-          <mwc-list-item hasmeta twoline @click=${this._blank}>
-            ${this.hass.localize(
-              "ui.panel.config.automation.dialog_new.start_empty"
+              "ui.panel.config.automation.dialog_new.create_empty"
             )}
             <span slot="secondary">
               ${this.hass.localize(
-                "ui.panel.config.automation.dialog_new.start_empty_description"
+                "ui.panel.config.automation.dialog_new.create_empty_description"
               )}
             </span>
             <ha-icon-next slot="meta"></ha-icon-next>
-          </mwc-list-item>
+          </ha-list-item>
+          <li divider role="separator"></li>
+          ${processedBlueprints.map(
+            (blueprint) => html`
+              <ha-list-item
+                hasmeta
+                twoline
+                graphic="icon"
+                @request-selected=${this._blueprint}
+                .path=${blueprint.path}
+              >
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${SOURCE_TYPE_ICONS[blueprint.sourceType]}
+                ></ha-svg-icon>
+                ${blueprint.name}
+                <span slot="secondary">
+                  ${blueprint.author
+                    ? this.hass.localize(
+                        `ui.panel.config.automation.dialog_new.blueprint_source.author`,
+                        { author: blueprint.author }
+                      )
+                    : this.hass.localize(
+                        `ui.panel.config.automation.dialog_new.blueprint_source.${blueprint.sourceType}`
+                      )}
+                </span>
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            `
+          )}
+          ${processedBlueprints.length === 0
+            ? html`
+                <a
+                  href=${documentationUrl(this.hass, "/get-blueprints")}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  class="item"
+                >
+                  <ha-list-item hasmeta twoline graphic="icon">
+                    <ha-svg-icon slot="graphic" .path=${mdiWeb}></ha-svg-icon>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.dialog_new.create_blueprint"
+                    )}
+                    <span slot="secondary">
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.dialog_new.create_blueprint_description"
+                      )}
+                    </span>
+                    <ha-svg-icon slot="meta" path=${mdiOpenInNew}></ha-svg-icon>
+                  </ha-list-item>
+                </a>
+              `
+            : html`
+                <ha-tip>
+                  <a
+                    href=${documentationUrl(this.hass, "/get-blueprints")}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.dialog_new.discover_blueprint_tip"
+                    )}
+                  </a>
+                </ha-tip>
+              `}
         </mwc-list>
       </ha-dialog>
     `;
   }
 
-  private async _blueprintPicked(ev: CustomEvent) {
+  private async _blueprint(ev) {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    const path = (ev.currentTarget! as any).path;
     this.closeDialog();
-    showAutomationEditor({ use_blueprint: { path: ev.detail.value } });
+    showAutomationEditor({ use_blueprint: { path } });
   }
 
-  private async _blueprint() {
-    this.shadowRoot!.querySelector("ha-blueprint-picker")!.open();
-  }
-
-  private async _blank() {
+  private async _blank(ev) {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
     this.closeDialog();
     showAutomationEditor();
   }
@@ -92,14 +212,24 @@ class DialogNewAutomation extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        mwc-list-item.blueprint {
-          height: 110px;
-        }
-        ha-blueprint-picker {
-          margin-top: 8px;
-        }
         ha-dialog {
           --dialog-content-padding: 0;
+          --mdc-dialog-max-height: 60vh;
+        }
+        @media all and (min-width: 550px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 500px;
+          }
+        }
+        ha-icon-next {
+          width: 24px;
+        }
+        ha-tip {
+          margin-top: 8px;
+          margin-bottom: 4px;
+        }
+        a.item {
+          text-decoration: unset;
         }
       `,
     ];

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-button";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { Trigger } from "../../../../data/automation";
@@ -125,7 +126,7 @@ export default class HaAutomationTrigger extends LitElement {
         )}
         </div>
         <ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
-          <mwc-button
+          <ha-button
             slot="trigger"
             outlined
             .label=${this.hass.localize(
@@ -134,7 +135,7 @@ export default class HaAutomationTrigger extends LitElement {
             .disabled=${this.disabled}
           >
             <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-          </mwc-button>
+          </ha-button>
           ${this._processedTypes(this.hass.localize).map(
             ([opt, label, icon]) => html`
               <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/core/ha-config-section-general.ts

@@ -26,6 +26,9 @@ import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import "../../../components/ha-alert";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import type { HaCheckbox } from "../../../components/ha-checkbox";
+import "../../../components/ha-checkbox";
 
 @customElement("ha-config-section-general")
 class HaConfigSectionGeneral extends LitElement {
@@ -55,6 +58,8 @@ class HaConfigSectionGeneral extends LitElement {
 
   @state() private _error?: string;
 
+  @state() private _updateUnits?: boolean;
+
   protected render(): TemplateResult {
     const canEdit = ["storage", "default"].includes(
       this.hass.config.config_source
@@ -174,6 +179,32 @@ class HaConfigSectionGeneral extends LitElement {
                     .disabled=${this._submitting}
                   ></ha-radio>
                 </ha-formfield>
+                ${this._unitSystem !== this._configuredUnitSystem()
+                  ? html`
+                      <ha-formfield
+                        .label=${this.hass.localize(
+                          "ui.panel.config.core.section.core.core_config.update_units_label"
+                        )}
+                      >
+                        <ha-checkbox
+                          .checked=${this._updateUnits}
+                          .disabled=${this._submitting}
+                          @change=${this._updateUnitsChanged}
+                        ></ha-checkbox>
+                      </ha-formfield>
+                      <div class="secondary">
+                        ${this.hass.localize(
+                          "ui.panel.config.core.section.core.core_config.update_units_text_1"
+                        )}
+                        ${this.hass.localize(
+                          "ui.panel.config.core.section.core.core_config.update_units_text_2"
+                        )} <br /><br />
+                        ${this.hass.localize(
+                          "ui.panel.config.core.section.core.core_config.update_units_text_3"
+                        )}
+                      </div>
+                    `
+                  : ""}
               </div>
               <div>
                 <ha-select
@@ -284,17 +315,21 @@ class HaConfigSectionGeneral extends LitElement {
     `;
   }
 
+  private _configuredUnitSystem() {
+    return this.hass.config.unit_system.temperature === UNIT_C
+      ? "metric"
+      : "us_customary";
+  }
+
   protected firstUpdated(): void {
-    this._unitSystem =
-      this.hass.config.unit_system.temperature === UNIT_C
-        ? "metric"
-        : "us_customary";
+    this._unitSystem = this._configuredUnitSystem();
     this._currency = this.hass.config.currency;
     this._country = this.hass.config.country;
     this._language = this.hass.config.language;
     this._elevation = this.hass.config.elevation;
     this._timeZone = this.hass.config.time_zone || "Etc/GMT";
     this._name = this.hass.config.location_name;
+    this._updateUnits = true;
     this._computeLanguages();
   }
 
@@ -335,6 +370,10 @@ class HaConfigSectionGeneral extends LitElement {
       | "us_customary";
   }
 
+  private _updateUnitsChanged(ev: CustomEvent) {
+    this._updateUnits = (ev.target as HaCheckbox).checked;
+  }
+
   private _locationChanged(ev: CustomEvent) {
     this._location = ev.detail.location;
   }
@@ -344,6 +383,25 @@ class HaConfigSectionGeneral extends LitElement {
     if (button.progress) {
       return;
     }
+    const unitSystemChanged = this._unitSystem !== this._configuredUnitSystem();
+    if (unitSystemChanged && this._updateUnits) {
+      if (
+        !(await showConfirmationDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.core.section.core.core_config.update_units_confirm_title"
+          ),
+          text: this.hass.localize(
+            "ui.panel.config.core.section.core.core_config.update_units_confirm_text"
+          ),
+          confirmText: this.hass!.localize(
+            "ui.panel.config.core.section.core.core_config.update_units_confirm_update"
+          ),
+          dismissText: this.hass!.localize("ui.common.cancel"),
+        }))
+      ) {
+        return;
+      }
+    }
     button.progress = true;
 
     let locationConfig;
@@ -362,6 +420,7 @@ class HaConfigSectionGeneral extends LitElement {
         currency: this._currency,
         elevation: Number(this._elevation),
         unit_system: this._unitSystem,
+        update_units: this._updateUnits && unitSystemChanged,
         time_zone: this._timeZone,
         location_name: this._name,
         language: this._language,

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

@@ -39,6 +39,7 @@ import { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
+import { showMatterAddDeviceDialog } from "../integrations/integration-panels/matter/show-dialog-add-matter-device";
 import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 
@@ -543,6 +544,10 @@ export class HaConfigDeviceDashboard extends LitElement {
       this._showZJSAddDeviceDialog(filteredConfigEntry);
       return;
     }
+    if (filteredConfigEntry?.domain === "matter") {
+      showMatterAddDeviceDialog(this);
+      return;
+    }
     showAddIntegrationDialog(this);
   }
 

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -366,6 +366,7 @@ export class EnergyGridSettings extends LitElement {
       ev.currentTarget.closest(".row").source;
     showEnergySettingsGridFlowFromDialog(this, {
       source: { ...origSource },
+      metadata: this.statsMetadata?.[origSource.stat_energy_from],
       saveCallback: async (source) => {
         const flowFrom = energySourcesByType(this.preferences).grid![0]
           .flow_from;
@@ -393,6 +394,7 @@ export class EnergyGridSettings extends LitElement {
       ev.currentTarget.closest(".row").source;
     showEnergySettingsGridFlowToDialog(this, {
       source: { ...origSource },
+      metadata: this.statsMetadata?.[origSource.stat_energy_to],
       saveCallback: async (source) => {
         const flowTo = energySourcesByType(this.preferences).grid![0].flow_to;
 

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -13,6 +13,7 @@ import { HomeAssistant } from "../../../../types";
 import { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
 import "@material/mwc-button/mwc-button";
 import "../../../../components/entity/ha-statistic-picker";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 const energyUnitClasses = ["energy"];
 
@@ -27,6 +28,8 @@ export class DialogEnergyBatterySettings
 
   @state() private _source?: BatterySourceTypeEnergyPreference;
 
+  @state() private _energy_units?: string[];
+
   @state() private _error?: string;
 
   public async showDialog(
@@ -36,6 +39,9 @@ export class DialogEnergyBatterySettings
     this._source = params.source
       ? { ...params.source }
       : emptyBatteryEnergyPreference();
+    this._energy_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
+    ).units;
   }
 
   public closeDialog(): void {
@@ -50,6 +56,8 @@ export class DialogEnergyBatterySettings
       return html``;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -63,6 +71,12 @@ export class DialogEnergyBatterySettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -13,6 +13,7 @@ import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-formfield";
 import "../../../../components/entity/ha-entity-picker";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 const energyUnitClasses = ["energy"];
 
@@ -27,12 +28,17 @@ export class DialogEnergyDeviceSettings
 
   @state() private _device?: DeviceConsumptionEnergyPreference;
 
+  @state() private _energy_units?: string[];
+
   @state() private _error?: string;
 
   public async showDialog(
     params: EnergySettingsDeviceDialogParams
   ): Promise<void> {
     this._params = params;
+    this._energy_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
+    ).units;
   }
 
   public closeDialog(): void {
@@ -47,6 +53,8 @@ export class DialogEnergyDeviceSettings
       return html``;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -62,7 +70,8 @@ export class DialogEnergyDeviceSettings
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
         <div>
           ${this.hass.localize(
-            `ui.panel.config.energy.device_consumption.dialog.selected_stat_intro`
+            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
+            { unit: pickableUnit }
           )}
         </div>
 

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -23,6 +23,7 @@ import {
   getDisplayUnit,
   isExternalStatistic,
 } from "../../../../data/recorder";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 const gasDeviceClasses = ["gas", "energy"];
 const gasUnitClasses = ["volume", "energy"];
@@ -40,10 +41,12 @@ export class DialogEnergyGasSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
-  @state() private _pickableUnit?: string;
-
   @state() private _pickedDisplayUnit?: string | null;
 
+  @state() private _energy_units?: string[];
+
+  @state() private _gas_units?: string[];
+
   @state() private _error?: string;
 
   public async showDialog(
@@ -65,12 +68,17 @@ export class DialogEnergyGasSettings
       : this._source.stat_cost
       ? "statistic"
       : "no-costs";
+    this._energy_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
+    ).units;
+    this._gas_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "gas")
+    ).units;
   }
 
   public closeDialog(): void {
     this._params = undefined;
     this._source = undefined;
-    this._pickableUnit = undefined;
     this._pickedDisplayUnit = undefined;
     this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -82,15 +90,19 @@ export class DialogEnergyGasSettings
     }
 
     const pickableUnit =
-      this._pickableUnit ||
-      (this._params.allowedGasUnitClass === undefined
-        ? "ft³, m³, Wh, kWh, MWh or GJ"
+      this._params.allowedGasUnitClass === undefined
+        ? [...(this._gas_units || []), ...(this._energy_units || [])].join(", ")
         : this._params.allowedGasUnitClass === "energy"
-        ? "Wh, kWh, MWh or GJ"
-        : "ft³ or m³");
+        ? this._energy_units?.join(", ") || ""
+        : this._gas_units?.join(", ") || "";
+
+    const unitPrice = this._pickedDisplayUnit
+      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
+      : undefined;
 
     const externalSource =
-      this._source.stat_cost && isExternalStatistic(this._source.stat_cost);
+      this._source.stat_energy_from &&
+      isExternalStatistic(this._source.stat_energy_from);
 
     return html`
       <ha-dialog
@@ -103,6 +115,20 @@ export class DialogEnergyGasSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          <p>
+            ${this.hass.localize("ui.panel.config.energy.gas.dialog.paragraph")}
+          </p>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.energy.gas.dialog.entity_para",
+              { unit: pickableUnit }
+            )}
+          </p>
+          <p>
+            ${this.hass.localize("ui.panel.config.energy.gas.dialog.note_para")}
+          </p>
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -110,26 +136,20 @@ export class DialogEnergyGasSettings
           gasUnitClasses}
           .includeDeviceClass=${gasDeviceClasses}
           .value=${this._source.stat_energy_from}
-          .label=${`${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.config.energy.gas.dialog.gas_usage"
-          )} (${
-            this._params.allowedGasUnitClass === undefined
-              ? this.hass.localize(
-                  "ui.panel.config.energy.gas.dialog.m3_or_kWh"
-                )
-              : pickableUnit
-          })`}
+          )}
           @value-changed=${this._statisticChanged}
           dialogInitialFocus
         ></ha-statistic-picker>
 
         <p>
-          ${this.hass.localize(`ui.panel.config.energy.gas.dialog.cost_para`)}
+          ${this.hass.localize("ui.panel.config.energy.gas.dialog.cost_para")}
         </p>
 
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.gas.dialog.no_cost`
+            "ui.panel.config.energy.gas.dialog.no_cost"
           )}
         >
           <ha-radio
@@ -141,14 +161,13 @@ export class DialogEnergyGasSettings
         </ha-formfield>
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.gas.dialog.cost_stat`
+            "ui.panel.config.energy.gas.dialog.cost_stat"
           )}
         >
           <ha-radio
             value="statistic"
             name="costs"
             .checked=${this._costs === "statistic"}
-            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -158,15 +177,15 @@ export class DialogEnergyGasSettings
               .hass=${this.hass}
               statistic-types="sum"
               .value=${this._source.stat_cost}
-              .label=${this.hass.localize(
-                `ui.panel.config.energy.gas.dialog.cost_stat_input`
-              )}
+              .label=${`${this.hass.localize(
+                "ui.panel.config.energy.gas.dialog.cost_stat_input"
+              )} (${this.hass.config.currency})`}
               @value-changed=${this._priceStatChanged}
             ></ha-statistic-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.gas.dialog.cost_entity`
+            "ui.panel.config.energy.gas.dialog.cost_entity"
           )}
         >
           <ha-radio
@@ -183,39 +202,36 @@ export class DialogEnergyGasSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${this.hass.localize(
-                `ui.panel.config.energy.gas.dialog.cost_entity_input`,
-                { unit: this._pickedDisplayUnit || pickableUnit }
-              )}
+              .label=${`${this.hass.localize(
+                "ui.panel.config.energy.gas.dialog.cost_entity_input"
+              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.gas.dialog.cost_number`
+            "ui.panel.config.energy.gas.dialog.cost_number"
           )}
         >
           <ha-radio
             value="number"
             name="costs"
             .checked=${this._costs === "number"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
         ${this._costs === "number"
           ? html`<ha-textfield
-              .label=${this.hass.localize(
-                `ui.panel.config.energy.gas.dialog.cost_number_input`,
-                { unit: this._pickedDisplayUnit || pickableUnit }
-              )}
+              .label=${`${this.hass.localize(
+                "ui.panel.config.energy.gas.dialog.cost_number_input"
+              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
               @change=${this._numberPriceChanged}
-              .suffix=${`${this.hass.config.currency}/${
-                this._pickedDisplayUnit || pickableUnit
-              }`}
+              .suffix=${unitPrice || ""}
             >
             </ha-textfield>`
           : ""}

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -19,6 +19,12 @@ import "../../../../components/ha-radio";
 import "../../../../components/ha-formfield";
 import type { HaRadio } from "../../../../components/ha-radio";
 import "../../../../components/entity/ha-entity-picker";
+import {
+  getStatisticMetadata,
+  getDisplayUnit,
+  isExternalStatistic,
+} from "../../../../data/recorder";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 const energyUnitClasses = ["energy"];
 
@@ -37,6 +43,10 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
+  @state() private _pickedDisplayUnit?: string | null;
+
+  @state() private _energy_units?: string[];
+
   @state() private _error?: string;
 
   public async showDialog(
@@ -57,11 +67,24 @@ export class DialogEnergyGridFlowSettings
         ]
       ? "statistic"
       : "no-costs";
+    this._pickedDisplayUnit = getDisplayUnit(
+      this.hass,
+      this._source[
+        this._params.direction === "from"
+          ? "stat_energy_from"
+          : "stat_energy_to"
+      ],
+      params.metadata
+    );
+    this._energy_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
+    ).units;
   }
 
   public closeDialog(): void {
     this._params = undefined;
     this._source = undefined;
+    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -71,6 +94,26 @@ export class DialogEnergyGridFlowSettings
       return html``;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
+    const unitPrice = this._pickedDisplayUnit
+      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
+      : undefined;
+
+    const externalSource =
+      this._source[
+        this._params.direction === "from"
+          ? "stat_energy_from"
+          : "stat_energy_to"
+      ] &&
+      isExternalStatistic(
+        this._source[
+          this._params.direction === "from"
+            ? "stat_energy_from"
+            : "stat_energy_to"
+        ]
+      );
+
     return html`
       <ha-dialog
         open
@@ -85,9 +128,17 @@ export class DialogEnergyGridFlowSettings
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
         <div>
-          ${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
-          )}
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+            )}
+          </p>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
+              { unit: pickableUnit }
+            )}
+          </p>
         </div>
 
         <ha-statistic-picker
@@ -145,9 +196,9 @@ export class DialogEnergyGridFlowSettings
                   ? "stat_cost"
                   : "stat_compensation"
               ]}
-              .label=${this.hass.localize(
+              .label=${`${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_stat_input`
-              )}
+              )} (${this.hass.config.currency})`}
               @value-changed=${this._priceStatChanged}
             ></ha-statistic-picker>`
           : ""}
@@ -160,6 +211,7 @@ export class DialogEnergyGridFlowSettings
             value="entity"
             name="costs"
             .checked=${this._costs === "entity"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -169,9 +221,9 @@ export class DialogEnergyGridFlowSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${this.hass.localize(
+              .label=${`${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_entity_input`
-              )}
+              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
@@ -184,22 +236,20 @@ export class DialogEnergyGridFlowSettings
             value="number"
             name="costs"
             .checked=${this._costs === "number"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
         ${this._costs === "number"
           ? html`<ha-textfield
-              .label=${this.hass.localize(
+              .label=${`${this.hass.localize(
                 `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_input`
-              )}
+              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
-              .suffix=${this.hass.localize(
-                `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_suffix`,
-                { currency: this.hass.config.currency }
-              )}
+              .suffix=${unitPrice || ""}
               @change=${this._numberPriceChanged}
             >
             </ha-textfield>`
@@ -261,7 +311,17 @@ export class DialogEnergyGridFlowSettings
     };
   }
 
-  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
+  private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (ev.detail.value) {
+      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
+      this._pickedDisplayUnit = getDisplayUnit(
+        this.hass,
+        ev.detail.value,
+        metadata[0]
+      );
+    } else {
+      this._pickedDisplayUnit = undefined;
+    }
     this._source = {
       ...this._source!,
       [this._params!.direction === "from"

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -21,6 +21,7 @@ import type { HaRadio } from "../../../../components/ha-radio";
 import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
 import { ConfigEntry, getConfigEntries } from "../../../../data/config_entries";
 import { brandsUrl } from "../../../../util/brands-url";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 const energyUnitClasses = ["energy"];
 
@@ -39,6 +40,8 @@ export class DialogEnergySolarSettings
 
   @state() private _forecast?: boolean;
 
+  @state() private _energy_units?: string[];
+
   @state() private _error?: string;
 
   public async showDialog(
@@ -50,6 +53,9 @@ export class DialogEnergySolarSettings
       ? { ...params.source }
       : emptySolarEnergyPreference();
     this._forecast = this._source.config_entry_solar_forecast !== null;
+    this._energy_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
+    ).units;
   }
 
   public closeDialog(): void {
@@ -64,6 +70,8 @@ export class DialogEnergySolarSettings
       return html``;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -75,6 +83,12 @@ export class DialogEnergySolarSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}

src/panels/config/energy/dialogs/dialog-energy-water-settings.ts

@@ -14,11 +14,16 @@ import {
   emptyWaterEnergyPreference,
   WaterSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import { isExternalStatistic } from "../../../../data/recorder";
+import {
+  getStatisticMetadata,
+  getDisplayUnit,
+  isExternalStatistic,
+} from "../../../../data/recorder";
 import { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { EnergySettingsWaterDialogParams } from "./show-dialogs-energy";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 @customElement("dialog-energy-water-settings")
 export class DialogEnergyWaterSettings
@@ -33,6 +38,10 @@ export class DialogEnergyWaterSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
+  @state() private _pickedDisplayUnit?: string | null;
+
+  @state() private _water_units?: string[];
+
   @state() private _error?: string;
 
   public async showDialog(
@@ -42,6 +51,11 @@ export class DialogEnergyWaterSettings
     this._source = params.source
       ? { ...params.source }
       : emptyWaterEnergyPreference();
+    this._pickedDisplayUnit = getDisplayUnit(
+      this.hass,
+      params.source?.stat_energy_from,
+      params.metadata
+    );
     this._costs = this._source.entity_energy_price
       ? "entity"
       : this._source.number_energy_price
@@ -49,12 +63,16 @@ export class DialogEnergyWaterSettings
       : this._source.stat_cost
       ? "statistic"
       : "no-costs";
+    this._water_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "water")
+    ).units;
   }
 
   public closeDialog(): void {
     this._params = undefined;
     this._source = undefined;
     this._error = undefined;
+    this._pickedDisplayUnit = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -63,8 +81,15 @@ export class DialogEnergyWaterSettings
       return html``;
     }
 
+    const pickableUnit = this._water_units?.join(", ") || "";
+
+    const unitPrice = this._pickedDisplayUnit
+      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
+      : undefined;
+
     const externalSource =
-      this._source.stat_cost && isExternalStatistic(this._source.stat_cost);
+      this._source.stat_energy_from &&
+      isExternalStatistic(this._source.stat_energy_from);
 
     return html`
       <ha-dialog
@@ -77,6 +102,19 @@ export class DialogEnergyWaterSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.energy.water.dialog.paragraph"
+            )}
+          </p>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.energy.water.dialog.entity_para",
+              { unit: pickableUnit }
+            )}
+          </p>
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -91,12 +129,12 @@ export class DialogEnergyWaterSettings
         ></ha-statistic-picker>
 
         <p>
-          ${this.hass.localize(`ui.panel.config.energy.water.dialog.cost_para`)}
+          ${this.hass.localize("ui.panel.config.energy.water.dialog.cost_para")}
         </p>
 
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.water.dialog.no_cost`
+            "ui.panel.config.energy.water.dialog.no_cost"
           )}
         >
           <ha-radio
@@ -108,14 +146,13 @@ export class DialogEnergyWaterSettings
         </ha-formfield>
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.water.dialog.cost_stat`
+            "ui.panel.config.energy.water.dialog.cost_stat"
           )}
         >
           <ha-radio
             value="statistic"
             name="costs"
             .checked=${this._costs === "statistic"}
-            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -125,15 +162,15 @@ export class DialogEnergyWaterSettings
               .hass=${this.hass}
               statistic-types="sum"
               .value=${this._source.stat_cost}
-              .label=${this.hass.localize(
-                `ui.panel.config.energy.water.dialog.cost_stat_input`
-              )}
+              .label=${`${this.hass.localize(
+                "ui.panel.config.energy.water.dialog.cost_stat_input"
+              )} (${this.hass.config.currency})`}
               @value-changed=${this._priceStatChanged}
             ></ha-statistic-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.water.dialog.cost_entity`
+            "ui.panel.config.energy.water.dialog.cost_entity"
           )}
         >
           <ha-radio
@@ -150,35 +187,36 @@ export class DialogEnergyWaterSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${this.hass.localize(
-                `ui.panel.config.energy.water.dialog.cost_entity_input`
-              )}
+              .label=${`${this.hass.localize(
+                "ui.panel.config.energy.water.dialog.cost_entity_input"
+              )}${unitPrice ? ` (${unitPrice})` : ""}`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            `ui.panel.config.energy.water.dialog.cost_number`
+            "ui.panel.config.energy.water.dialog.cost_number"
           )}
         >
           <ha-radio
             value="number"
             name="costs"
             .checked=${this._costs === "number"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
         ${this._costs === "number"
           ? html`<ha-textfield
-              .label=${this.hass.localize(
-                `ui.panel.config.energy.water.dialog.cost_number_input`
-              )}
+              .label=${`${this.hass.localize(
+                "ui.panel.config.energy.water.dialog.cost_number_input"
+              )}${unitPrice ? ` (${unitPrice})` : ""}`}
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
               @change=${this._numberPriceChanged}
-              .suffix=${`${this.hass.config.currency}/m³`}
+              .suffix=${unitPrice || ""}
             >
             </ha-textfield>`
           : ""}
@@ -230,6 +268,16 @@ export class DialogEnergyWaterSettings
   }
 
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (ev.detail.value) {
+      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
+      this._pickedDisplayUnit = getDisplayUnit(
+        this.hass,
+        ev.detail.value,
+        metadata[0]
+      );
+    } else {
+      this._pickedDisplayUnit = undefined;
+    }
     if (isExternalStatistic(ev.detail.value) && this._costs !== "statistic") {
       this._costs = "no-costs";
     }

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -16,6 +16,7 @@ export interface EnergySettingsGridFlowDialogParams {
   source?:
     | FlowFromGridSourceEnergyPreference
     | FlowToGridSourceEnergyPreference;
+  metadata?: StatisticsMetaData;
   direction: "from" | "to";
   saveCallback: (
     source:
@@ -26,11 +27,13 @@ export interface EnergySettingsGridFlowDialogParams {
 
 export interface EnergySettingsGridFlowFromDialogParams {
   source?: FlowFromGridSourceEnergyPreference;
+  metadata?: StatisticsMetaData;
   saveCallback: (source: FlowFromGridSourceEnergyPreference) => Promise<void>;
 }
 
 export interface EnergySettingsGridFlowToDialogParams {
   source?: FlowToGridSourceEnergyPreference;
+  metadata?: StatisticsMetaData;
   saveCallback: (source: FlowToGridSourceEnergyPreference) => Promise<void>;
 }
 

src/panels/config/entities/entity-registry-settings.ts

@@ -82,6 +82,7 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
 import { showAliasesDialog } from "../../../dialogs/aliases/show-dialog-aliases";
+import { formatNumber } from "../../../common/number/format_number";
 
 const OVERRIDE_DEVICE_CLASSES = {
   cover: [
@@ -129,14 +130,6 @@ const SWITCH_AS_DOMAINS = ["cover", "fan", "light", "lock", "siren"];
 
 const PRECISIONS = [0, 1, 2, 3, 4, 5, 6];
 
-function precisionLabel(precision: number, _state?: string) {
-  const state_float =
-    _state === undefined || isNaN(parseFloat(_state))
-      ? 0.0
-      : parseFloat(_state);
-  return state_float.toFixed(precision);
-}
-
 @customElement("entity-registry-settings")
 export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -265,7 +258,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     }
 
     if (domain === "sensor") {
-      this._precision = this.entry.options?.sensor?.precision;
+      this._precision = this.entry.options?.sensor?.display_precision;
     }
 
     if (domain === "weather") {
@@ -294,6 +287,14 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     }
   }
 
+  private precisionLabel(precision?: number, stateValue?: string) {
+    const value = stateValue ?? 0;
+    return formatNumber(value, this.hass.locale, {
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    });
+  }
+
   protected async updated(changedProps: PropertyValues): Promise<void> {
     if (changedProps.has("_deviceClass")) {
       const domain = computeDomain(this.entry.entity_id);
@@ -330,6 +331,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
     const invalidDomainUpdate = computeDomain(this._entityId.trim()) !== domain;
 
+    const defaultPrecision =
+      this.entry.options?.sensor?.suggested_display_precision ?? undefined;
+
     return html`
       ${!stateObj
         ? html`
@@ -505,18 +509,21 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                 @selected=${this._precisionChanged}
                 @closed=${stopPropagation}
               >
-                <mwc-list-item .value=${"default"}
+                <mwc-list-item value="default"
                   >${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.precision_default"
+                    "ui.dialogs.entity_registry.editor.precision_default",
+                    {
+                      value: this.precisionLabel(
+                        defaultPrecision,
+                        stateObj?.state
+                      ),
+                    }
                   )}</mwc-list-item
                 >
                 ${PRECISIONS.map(
                   (precision) => html`
                     <mwc-list-item .value=${precision.toString()}>
-                      ${precisionLabel(
-                        precision,
-                        this.hass.states[this.entry.entity_id]?.state
-                      )}
+                      ${this.precisionLabel(precision, stateObj?.state)}
                     </mwc-list-item>
                   `
                 )}
@@ -1154,11 +1161,12 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     }
     if (
       domain === "sensor" &&
-      this.entry.options?.[domain]?.precision !== this._precision
+      this.entry.options?.[domain]?.display_precision !== this._precision
     ) {
       params.options_domain = domain;
       params.options = params.options || this.entry.options?.[domain] || {};
-      (params.options as SensorEntityOptions).precision = this._precision;
+      (params.options as SensorEntityOptions).display_precision =
+        this._precision;
     }
     if (
       domain === "weather" &&

src/panels/config/entities/ha-config-entities.ts

@@ -728,6 +728,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           selectable: false,
           entity_category: null,
           has_entity_name: false,
+          options: null,
         });
       }
       if (changed) {

src/panels/config/hardware/ha-config-hardware.ts

@@ -103,17 +103,21 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                 fullUpdate = true;
               }
             } else if (message.type === "removed") {
-              delete this._configEntries![message.entry.entry_id];
+              if (this._configEntries) {
+                delete this._configEntries[message.entry.entry_id];
+              }
             } else if (message.type === "updated") {
-              const newEntry = message.entry;
-              this._configEntries![message.entry.entry_id] = newEntry;
+              if (this._configEntries) {
+                const newEntry = message.entry;
+                this._configEntries[message.entry.entry_id] = newEntry;
+              }
             }
           });
           if (!newEntries.length && !fullUpdate) {
             return;
           }
           const entries = [
-            ...(fullUpdate ? [] : Object.values(this._configEntries!)),
+            ...(fullUpdate ? [] : Object.values(this._configEntries || {})),
             ...newEntries,
           ];
           const configEntries: { [id: string]: ConfigEntry } = {};
@@ -220,10 +224,6 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
   }
 
   protected render(): TemplateResult {
-    if (!this._configEntries) {
-      return html``;
-    }
-
     let boardId: string | undefined;
     let boardName: string | undefined;
     let imageURL: string | undefined;
@@ -240,14 +240,14 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         (!hw.config_entries.length ||
           hw.config_entries.some(
             (entryId) =>
-              this._configEntries![entryId] &&
-              !this._configEntries![entryId].disabled_by
+              this._configEntries?.[entryId] &&
+              !this._configEntries[entryId].disabled_by
           ))
     );
 
     if (boardData) {
       boardConfigEntries = boardData.config_entries
-        .map((id) => this._configEntries![id])
+        .map((id) => this._configEntries?.[id])
         .filter(
           (entry) => entry?.supports_options && !entry.disabled_by
         ) as ConfigEntry[];
@@ -376,7 +376,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
             ? html`<ha-card>
                 ${dongles.map((dongle) => {
                   const configEntry = dongle.config_entries
-                    .map((id) => this._configEntries![id])
+                    .map((id) => this._configEntries?.[id])
                     .filter(
                       (entry) => entry?.supports_options && !entry.disabled_by
                     )[0];

src/panels/config/helpers/dialog-helper-detail.ts

@@ -9,7 +9,8 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-list-item";
 import { getConfigFlowHandlers } from "../../../data/config_flow";
 import { createCounter } from "../../../data/counter";
 import { createInputBoolean } from "../../../data/input_boolean";
@@ -167,8 +168,9 @@ export class DialogHelperDetail extends LitElement {
             const isLoaded =
               !(domain in HELPERS) || isComponentLoaded(this.hass, domain);
             return html`
-              <mwc-list-item
+              <ha-list-item
                 .disabled=${!isLoaded}
+                hasmeta
                 .domain=${domain}
                 @request-selected=${this._domainPicked}
                 graphic="icon"
@@ -186,7 +188,8 @@ export class DialogHelperDetail extends LitElement {
                   referrerpolicy="no-referrer"
                 />
                 <span class="item-text"> ${label} </span>
-              </mwc-list-item>
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
               ${!isLoaded
                 ? html`
                     <paper-tooltip animation-delay="0"
@@ -201,9 +204,6 @@ export class DialogHelperDetail extends LitElement {
             `;
           })}
         </mwc-list>
-        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-          ${this.hass!.localize("ui.common.cancel")}
-        </mwc-button>
       `;
     }
 
@@ -214,15 +214,19 @@ export class DialogHelperDetail extends LitElement {
         class=${classMap({ "button-left": !this._domain })}
         scrimClickAction
         escapeKeyAction
-        .heading=${this._domain
-          ? this.hass.localize(
-              "ui.panel.config.helpers.dialog.create_platform",
-              "platform",
-              this.hass.localize(
-                `ui.panel.config.helpers.types.${this._domain}`
-              ) || this._domain
-            )
-          : this.hass.localize("ui.panel.config.helpers.dialog.create_helper")}
+        .hideActions=${!this._domain}
+        .heading=${createCloseHeading(
+          this.hass,
+          this._domain
+            ? this.hass.localize(
+                "ui.panel.config.helpers.dialog.create_platform",
+                "platform",
+                this.hass.localize(
+                  `ui.panel.config.helpers.types.${this._domain}`
+                ) || this._domain
+              )
+            : this.hass.localize("ui.panel.config.helpers.dialog.create_helper")
+        )}
       >
         ${content}
       </ha-dialog>
@@ -285,6 +289,22 @@ export class DialogHelperDetail extends LitElement {
         ha-dialog.button-left {
           --justify-action-buttons: flex-start;
         }
+        ha-dialog {
+          --dialog-content-padding: 0;
+          --dialog-scroll-divider-color: transparent;
+          --mdc-dialog-max-height: 60vh;
+        }
+        @media all and (min-width: 550px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 500px;
+          }
+        }
+        ha-icon-next {
+          width: 24px;
+        }
+        .form {
+          padding: 24px;
+        }
       `,
     ];
   }

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -1,11 +1,7 @@
-// @ts-ignore
-import fullcalendarStyle from "@fullcalendar/common/main.css";
 import { Calendar, CalendarOptions } from "@fullcalendar/core";
 import allLocales from "@fullcalendar/core/locales-all";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-// @ts-ignore
-import timegridStyle from "@fullcalendar/timegrid/main.css";
 import { addDays, isSameDay, isSameWeek, nextDay } from "date-fns";
 import {
   css,
@@ -14,7 +10,6 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { firstWeekdayIndex } from "../../../../common/datetime/first_weekday";
@@ -409,8 +404,6 @@ class HaScheduleForm extends LitElement {
     return [
       haStyle,
       css`
-        ${unsafeCSS(fullcalendarStyle)}
-        ${unsafeCSS(timegridStyle)}
         .form {
           color: var(--primary-text-color);
         }

src/panels/config/integrations/dialog-add-integration.ts

@@ -7,7 +7,10 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
+import {
+  protocolIntegrationPicked,
+  PROTOCOL_INTEGRATIONS,
+} from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
@@ -136,10 +139,9 @@ class AddIntegrationDialog extends LitElement {
       localize: LocalizeFunc,
       filter?: string
     ): IntegrationListItem[] => {
-      const addDeviceRows: IntegrationListItem[] = (
-        ["zha", "zwave_js"] as const
+      const addDeviceRows: IntegrationListItem[] = PROTOCOL_INTEGRATIONS.filter(
+        (domain) => components.includes(domain)
       )
-        .filter((domain) => components.includes(domain))
         .map((domain) => ({
           name: localize(`ui.panel.config.integrations.add_${domain}_device`),
           domain,
@@ -371,7 +373,7 @@ class AddIntegrationDialog extends LitElement {
       ),
       confirm: () => {
         this.closeDialog();
-        if (["zha", "zwave_js"].includes(integration.supported_by)) {
+        if (PROTOCOL_INTEGRATIONS.includes(integration.supported_by)) {
           protocolIntegrationPicked(this, this.hass, integration.supported_by);
           return;
         }
@@ -519,7 +521,9 @@ class AddIntegrationDialog extends LitElement {
     }
 
     if (
-      ["zha", "zwave_js"].includes(integration.domain) &&
+      (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
+        integration.domain
+      ) &&
       isComponentLoaded(this.hass, integration.domain)
     ) {
       this._pickedBrand = integration.domain;

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

@@ -14,7 +14,10 @@ import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
+import {
+  protocolIntegrationPicked,
+  PROTOCOL_INTEGRATIONS,
+} from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
@@ -761,7 +764,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           }
         ),
         confirm: async () => {
-          if (["zha", "zwave_js"].includes(integration.supported_by!)) {
+          if (
+            (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
+              integration.supported_by!
+            )
+          ) {
             protocolIntegrationPicked(
               this,
               this.hass,
@@ -822,6 +829,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         }
         ha-button-menu {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
         .container {
           display: grid;
@@ -850,6 +860,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           display: block;
           color: var(--secondary-text-color);
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
           --mdc-ripple-color: transparant;
         }
         .search {
@@ -874,13 +887,22 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           position: relative;
           display: flex;
           align-items: center;
-          padding: 2px 2px 2px 8px;
+          padding-top: 2px;
+          padding-bottom: 2px;
+          padding-right: 2px;
+          padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: 2px;
           font-size: 14px;
           width: max-content;
           cursor: initial;
+          direction: var(--direction);
         }
         .active-filters mwc-button {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
         }
         .active-filters::before {
           background-color: var(--primary-color);

src/panels/config/integrations/ha-domain-integrations.ts

@@ -3,7 +3,10 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
+import {
+  protocolIntegrationPicked,
+  PROTOCOL_INTEGRATIONS,
+} from "../../../common/integrations/protocolIntegrationPicked";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -77,38 +80,41 @@ class HaDomainIntegrations extends LitElement {
               : ""}`
         : ""}
       ${this.integration?.iot_standards
-        ? (
-            this.integration.iot_standards.filter(
-              (standard) => standard in standardToDomain
-            ) as (keyof typeof standardToDomain)[]
-          ).map((standard) => {
-            const domain = standardToDomain[standard];
-            return html`<mwc-list-item
-              graphic="medium"
-              .domain=${domain}
-              @request-selected=${this._standardPicked}
-              hasMeta
-            >
-              <img
-                slot="graphic"
-                loading="lazy"
-                alt=""
-                src=${brandsUrl({
-                  domain,
-                  type: "icon",
-                  useFallback: true,
-                  darkOptimized: this.hass.themes?.darkMode,
-                })}
-                referrerpolicy="no-referrer"
-              />
-              <span
-                >${this.hass.localize(
-                  `ui.panel.config.integrations.add_${domain}_device`
-                )}</span
+        ? this.integration.iot_standards
+            .filter((standard) =>
+              (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
+                standardToDomain[standard] || standard
+              )
+            )
+            .map((standard) => {
+              const domain: (typeof PROTOCOL_INTEGRATIONS)[number] =
+                standardToDomain[standard] || standard;
+              return html`<mwc-list-item
+                graphic="medium"
+                .domain=${domain}
+                @request-selected=${this._standardPicked}
+                hasMeta
               >
-              <ha-icon-next slot="meta"></ha-icon-next>
-            </mwc-list-item>`;
-          })
+                <img
+                  slot="graphic"
+                  loading="lazy"
+                  alt=""
+                  src=${brandsUrl({
+                    domain,
+                    type: "icon",
+                    useFallback: true,
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                />
+                <span
+                  >${this.hass.localize(
+                    `ui.panel.config.integrations.add_${domain}_device`
+                  )}</span
+                >
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </mwc-list-item>`;
+            })
         : ""}
       ${this.integration &&
       "integrations" in this.integration &&
@@ -144,7 +150,7 @@ class HaDomainIntegrations extends LitElement {
                 </ha-integration-list-item>`
             )
         : ""}
-      ${this.domain === "zha" || this.domain === "zwave_js"
+      ${(PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(this.domain)
         ? html`<mwc-list-item
             graphic="medium"
             .domain=${this.domain}
@@ -165,7 +171,9 @@ class HaDomainIntegrations extends LitElement {
             />
             <span
               >${this.hass.localize(
-                `ui.panel.config.integrations.add_${this.domain}_device`
+                `ui.panel.config.integrations.add_${
+                  this.domain as (typeof PROTOCOL_INTEGRATIONS)[number]
+                }_device`
               )}</span
             >
             <ha-icon-next slot="meta"></ha-icon-next>

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

@@ -73,6 +73,7 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { fileDownload } from "../../../util/file_download";
 import type { ConfigEntryExtended } from "./ha-config-integrations";
 import "./ha-integration-header";
+import { isDevVersion } from "../../../common/config/version";
 
 const integrationsWithPanel = {
   matter: "/config/matter",
@@ -346,7 +347,9 @@ export class HaIntegrationCard extends LitElement {
             ? html`<mwc-button unelevated @click=${this._handleEnable}>
                 ${this.hass.localize("ui.common.enable")}
               </mwc-button>`
-            : item.domain in integrationsWithPanel
+            : item.domain in integrationsWithPanel &&
+              (item.domain !== "matter" ||
+                isDevVersion(this.hass.config.version))
             ? html`<a
                 href=${`${integrationsWithPanel[item.domain]}?config_entry=${
                   item.entry_id

src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts

@@ -0,0 +1,87 @@
+import "@material/mwc-button/mwc-button";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-circular-progress";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
+import {
+  addMatterDevice,
+  canCommissionMatterExternal,
+  redirectOnNewMatterDevice,
+} from "../../../../../data/matter";
+import { haStyleDialog } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+
+@customElement("dialog-matter-add-device")
+class DialogMatterAddDevice extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _open = false;
+
+  private _unsub?: UnsubscribeFunc;
+
+  public showDialog(): void {
+    this._open = true;
+    if (!canCommissionMatterExternal(this.hass)) {
+      return;
+    }
+    this._unsub = redirectOnNewMatterDevice(this.hass, () =>
+      this.closeDialog()
+    );
+    addMatterDevice(this.hass);
+  }
+
+  public closeDialog(): void {
+    this._open = false;
+    this._unsub?.();
+    this._unsub = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._open) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, "Add Matter device")}
+      >
+        <div>
+          ${!canCommissionMatterExternal(this.hass)
+            ? this.hass.localize(
+                "ui.panel.config.integrations.config_flow.matter_mobile_app"
+              )
+            : html`<ha-circular-progress
+                size="large"
+                active
+              ></ha-circular-progress>`}
+        </div>
+        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+          ${this.hass.localize("ui.common.cancel")}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = [
+    haStyleDialog,
+    css`
+      div {
+        display: grid;
+      }
+      ha-circular-progress {
+        justify-self: center;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-matter-add-device": DialogMatterAddDevice;
+  }
+}

src/panels/config/integrations/integration-panels/matter/matter-add-device.ts

@@ -0,0 +1,22 @@
+import { customElement } from "lit/decorators";
+import { navigate } from "../../../../../common/navigate";
+import { HomeAssistant } from "../../../../../types";
+import { showMatterAddDeviceDialog } from "./show-dialog-add-matter-device";
+
+@customElement("matter-add-device")
+export class MatterAddDevice extends HTMLElement {
+  public hass!: HomeAssistant;
+
+  connectedCallback() {
+    showMatterAddDeviceDialog(this);
+    navigate(`/config/devices`, {
+      replace: true,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "matter-add-device": MatterAddDevice;
+  }
+}

src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts

@@ -0,0 +1,212 @@
+import "@material/mwc-button";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
+import "../../../../../components/ha-alert";
+import "../../../../../components/ha-card";
+import {
+  acceptSharedMatterDevice,
+  canCommissionMatterExternal,
+  commissionMatterDevice,
+  matterSetThread,
+  matterSetWifi,
+  redirectOnNewMatterDevice,
+  startExternalCommissioning,
+} from "../../../../../data/matter";
+import { showPromptDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import "../../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+
+@customElement("matter-config-dashboard")
+export class MatterConfigDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @state() private _error?: string;
+
+  private _unsub?: UnsubscribeFunc;
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopRedirect();
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Matter">
+        ${isComponentLoaded(this.hass, "otbr")
+          ? html`
+              <a href="/config/thread" slot="toolbar-icon">
+                <mwc-button>Visit Thread Panel</mwc-button>
+              </a>
+            `
+          : ""}
+        <div class="content">
+          <ha-card header="Matter">
+            <ha-alert alert-type="warning"
+              >Matter is still in the early phase of development, it is not
+              meant to be used in production. This panel is for development
+              only.</ha-alert
+            >
+            <div class="card-content">
+              ${this._error
+                ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+                : ""}
+              You can add Matter devices by commissing them if they are not
+              setup yet, or share them from another controller and enter the
+              share code.
+            </div>
+            <div class="card-actions">
+              ${canCommissionMatterExternal(this.hass)
+                ? html`<mwc-button @click=${this._startMobileCommissioning}
+                    >Commission device with mobile app</mwc-button
+                  >`
+                : ""}
+              <mwc-button @click=${this._commission}
+                >Commission device</mwc-button
+              >
+              <mwc-button @click=${this._acceptSharedDevice}
+                >Add shared device</mwc-button
+              >
+              <mwc-button @click=${this._setWifi}
+                >Set WiFi Credentials</mwc-button
+              >
+              <mwc-button @click=${this._setThread}
+                >Set Thread Credentials</mwc-button
+              >
+            </div>
+          </ha-card>
+        </div>
+      </hass-subpage>
+    `;
+  }
+
+  private _redirectOnNewMatterDevice() {
+    if (this._unsub) {
+      return;
+    }
+    this._unsub = redirectOnNewMatterDevice(this.hass, () => {
+      this._unsub = undefined;
+    });
+  }
+
+  private _stopRedirect() {
+    this._unsub?.();
+    this._unsub = undefined;
+  }
+
+  private _startMobileCommissioning() {
+    this._redirectOnNewMatterDevice();
+    startExternalCommissioning(this.hass);
+  }
+
+  private async _setWifi(): Promise<void> {
+    this._error = undefined;
+    const networkName = await showPromptDialog(this, {
+      title: "Network name",
+      inputLabel: "Network name",
+      inputType: "string",
+      confirmText: "Continue",
+    });
+    if (!networkName) {
+      return;
+    }
+    const psk = await showPromptDialog(this, {
+      title: "Passcode",
+      inputLabel: "Code",
+      inputType: "password",
+      confirmText: "Set Wifi",
+    });
+    if (!psk) {
+      return;
+    }
+    try {
+      await matterSetWifi(this.hass, networkName, psk);
+    } catch (err: any) {
+      this._error = err.message;
+    }
+  }
+
+  private async _commission(): Promise<void> {
+    const code = await showPromptDialog(this, {
+      title: "Commission device",
+      inputLabel: "Code",
+      inputType: "string",
+      confirmText: "Commission",
+    });
+    if (!code) {
+      return;
+    }
+    this._error = undefined;
+    this._redirectOnNewMatterDevice();
+    try {
+      await commissionMatterDevice(this.hass, code);
+    } catch (err: any) {
+      this._error = err.message;
+      this._stopRedirect();
+    }
+  }
+
+  private async _acceptSharedDevice(): Promise<void> {
+    const code = await showPromptDialog(this, {
+      title: "Add shared device",
+      inputLabel: "Pin",
+      inputType: "number",
+      confirmText: "Accept device",
+    });
+    if (!code) {
+      return;
+    }
+    this._error = undefined;
+    this._redirectOnNewMatterDevice();
+    try {
+      await acceptSharedMatterDevice(this.hass, Number(code));
+    } catch (err: any) {
+      this._error = err.message;
+      this._stopRedirect();
+    }
+  }
+
+  private async _setThread(): Promise<void> {
+    const code = await showPromptDialog(this, {
+      title: "Set Thread operation",
+      inputLabel: "Dataset",
+      inputType: "string",
+      confirmText: "Set Thread",
+    });
+    if (!code) {
+      return;
+    }
+    this._error = undefined;
+    try {
+      await matterSetThread(this.hass, code);
+    } catch (err: any) {
+      this._error = err.message;
+    }
+  }
+
+  static styles = [
+    haStyle,
+    css`
+      ha-alert[alert-type="warning"] {
+        position: relative;
+        top: -16px;
+      }
+      .content {
+        padding: 24px 0 32px;
+        max-width: 600px;
+        margin: 0 auto;
+        direction: ltr;
+      }
+      ha-card:first-child {
+        margin-bottom: 16px;
+      }
+      a[slot="toolbar-icon"] {
+        text-decoration: none;
+      }
+    `,
+  ];
+}

src/panels/config/integrations/integration-panels/matter/matter-config-panel.ts

@@ -1,227 +1,58 @@
-import "@material/mwc-button";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import "../../../../../components/ha-card";
+import { mdiMathLog, mdiServerNetwork } from "@mdi/js";
+import { customElement, property } from "lit/decorators";
 import {
-  acceptSharedMatterDevice,
-  commissionMatterDevice,
-  matterSetThread,
-  matterSetWifi,
-} from "../../../../../data/matter";
-import "../../../../../layouts/hass-subpage";
-import { haStyle } from "../../../../../resources/styles";
+  HassRouterPage,
+  RouterOptions,
+} from "../../../../../layouts/hass-router-page";
+import { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../../../../types";
-import "../../../../../components/ha-alert";
-import { showPromptDialog } from "../../../../../dialogs/generic/show-dialog-box";
-import { navigate } from "../../../../../common/navigate";
-import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
+
+export const configTabs: PageNavigation[] = [
+  {
+    translationKey: "ui.panel.config.zwave_js.navigation.network",
+    path: `/config/zwave_js/dashboard`,
+    iconPath: mdiServerNetwork,
+  },
+  {
+    translationKey: "ui.panel.config.zwave_js.navigation.logs",
+    path: `/config/zwave_js/logs`,
+    iconPath: mdiMathLog,
+  },
+];
 
 @customElement("matter-config-panel")
-export class MatterConfigPanel extends LitElement {
+class MatterConfigRouter extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow!: boolean;
+  @property() public isWide!: boolean;
 
-  @state() private _error?: string;
+  @property() public narrow!: boolean;
 
-  private _curMatterDevices?: Set<string>;
+  protected routerOptions: RouterOptions = {
+    defaultPage: "dashboard",
+    showLoading: true,
+    routes: {
+      dashboard: {
+        tag: "matter-config-dashboard",
+        load: () => import("./matter-config-dashboard"),
+      },
+      add: {
+        tag: "matter-add-device",
+        load: () => import("./matter-add-device"),
+      },
+    },
+  };
 
-  private get _canCommissionMatter() {
-    return this.hass.auth.external?.config.canCommissionMatter;
+  protected updatePageEl(el): void {
+    el.route = this.routeTail;
+    el.hass = this.hass;
+    el.isWide = this.isWide;
+    el.narrow = this.narrow;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "matter-config-panel": MatterConfigRouter;
   }
-
-  protected render(): TemplateResult {
-    return html`
-      <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Matter">
-        ${isComponentLoaded(this.hass, "otbr")
-          ? html`
-              <a href="/config/thread" slot="toolbar-icon">
-                <mwc-button>Visit Thread Panel</mwc-button>
-              </a>
-            `
-          : ""}
-        <div class="content">
-          <ha-card header="Matter">
-            <ha-alert alert-type="warning"
-              >Matter is still in the early phase of development, it is not
-              meant to be used in production. This panel is for development
-              only.</ha-alert
-            >
-            <div class="card-content">
-              ${this._error
-                ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-                : ""}
-              You can add Matter devices by commissing them if they are not
-              setup yet, or share them from another controller and enter the
-              share code.
-            </div>
-            <div class="card-actions">
-              ${this._canCommissionMatter
-                ? html`<mwc-button @click=${this._startMobileCommissioning}
-                    >Commission device with mobile app</mwc-button
-                  >`
-                : ""}
-              <mwc-button @click=${this._setWifi}
-                >Set WiFi Credentials</mwc-button
-              >
-              <mwc-button @click=${this._setThread}>Set Thread</mwc-button>
-              <mwc-button @click=${this._commission}
-                >Commission device</mwc-button
-              >
-              <mwc-button @click=${this._acceptSharedDevice}
-                >Add shared device</mwc-button
-              >
-            </div>
-          </ha-card>
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  protected override updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (!this._curMatterDevices || !changedProps.has("hass")) {
-      return;
-    }
-
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.devices === this.hass.devices) {
-      return;
-    }
-
-    const newMatterDevices = Object.values(this.hass.devices).filter(
-      (device) =>
-        device.identifiers.find((identifier) => identifier[0] === "matter") &&
-        !this._curMatterDevices!.has(device.id)
-    );
-    if (newMatterDevices.length) {
-      navigate(`/config/devices/device/${newMatterDevices[0].id}`);
-    }
-  }
-
-  private _startMobileCommissioning() {
-    this._redirectOnNewDevice();
-    this.hass.auth.external!.fireMessage({
-      type: "matter/commission",
-    });
-  }
-
-  private async _setWifi(): Promise<void> {
-    this._error = undefined;
-    const networkName = await showPromptDialog(this, {
-      title: "Network name",
-      inputLabel: "Network name",
-      inputType: "string",
-      confirmText: "Continue",
-    });
-    if (!networkName) {
-      return;
-    }
-    const psk = await showPromptDialog(this, {
-      title: "Passcode",
-      inputLabel: "Code",
-      inputType: "password",
-      confirmText: "Set Wifi",
-    });
-    if (!psk) {
-      return;
-    }
-    try {
-      await matterSetWifi(this.hass, networkName, psk);
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private async _commission(): Promise<void> {
-    const code = await showPromptDialog(this, {
-      title: "Commission device",
-      inputLabel: "Code",
-      inputType: "string",
-      confirmText: "Commission",
-    });
-    if (!code) {
-      return;
-    }
-    this._error = undefined;
-    this._redirectOnNewDevice();
-    try {
-      await commissionMatterDevice(this.hass, code);
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private async _acceptSharedDevice(): Promise<void> {
-    const code = await showPromptDialog(this, {
-      title: "Add shared device",
-      inputLabel: "Pin",
-      inputType: "number",
-      confirmText: "Accept device",
-    });
-    if (!code) {
-      return;
-    }
-    this._error = undefined;
-    this._redirectOnNewDevice();
-    try {
-      await acceptSharedMatterDevice(this.hass, Number(code));
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private async _setThread(): Promise<void> {
-    const code = await showPromptDialog(this, {
-      title: "Set Thread operation",
-      inputLabel: "Dataset",
-      inputType: "string",
-      confirmText: "Set Thread",
-    });
-    if (!code) {
-      return;
-    }
-    this._error = undefined;
-    try {
-      await matterSetThread(this.hass, code);
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  private _redirectOnNewDevice() {
-    if (this._curMatterDevices) {
-      return;
-    }
-    this._curMatterDevices = new Set(
-      Object.values(this.hass.devices)
-        .filter((device) =>
-          device.identifiers.find((identifier) => identifier[0] === "matter")
-        )
-        .map((device) => device.id)
-    );
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      ha-alert[alert-type="warning"] {
-        position: relative;
-        top: -16px;
-      }
-      .content {
-        padding: 24px 0 32px;
-        max-width: 600px;
-        margin: 0 auto;
-        direction: ltr;
-      }
-      ha-card:first-child {
-        margin-bottom: 16px;
-      }
-      a[slot="toolbar-icon"] {
-        text-decoration: none;
-      }
-    `,
-  ];
 }

src/panels/config/integrations/integration-panels/matter/show-dialog-add-matter-device.ts

@@ -0,0 +1,11 @@
+import { fireEvent } from "../../../../../common/dom/fire_event";
+
+export const loadAddDeviceDialog = () => import("./dialog-matter-add-device");
+
+export const showMatterAddDeviceDialog = (element: HTMLElement): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-matter-add-device",
+    dialogImport: loadAddDeviceDialog,
+    dialogParams: {},
+  });
+};

src/panels/config/logs/error-log-card.ts

@@ -36,6 +36,8 @@ class ErrorLogCard extends LitElement {
 
   @property() public filter = "";
 
+  @property() public header?: string;
+
   @property() public provider!: string;
 
   @property({ type: Boolean, attribute: true }) public show = false;
@@ -56,9 +58,10 @@ class ErrorLogCard extends LitElement {
           ? html`
               <ha-card outlined>
                 <div class="header">
-                  <h2>
-                    ${this.hass.localize("ui.panel.config.logs.show_full_logs")}
-                  </h2>
+                  <h1 class="card-header">
+                    ${this.header ||
+                    this.hass.localize("ui.panel.config.logs.show_full_logs")}
+                  </h1>
                   <div>
                     <ha-icon-button
                       .path=${mdiRefresh}
@@ -225,10 +228,26 @@ class ErrorLogCard extends LitElement {
       margin: 16px;
     }
 
+    ha-card {
+      padding-top: 16px;
+    }
+
     .header {
       display: flex;
       justify-content: space-between;
-      padding: 16px;
+      padding: 0 16px;
+    }
+
+    .card-header {
+      color: var(--ha-card-header-color, --primary-text-color);
+      font-family: var(--ha-card-header-font-family, inherit);
+      font-size: var(--ha-card-header-font-size, 24px);
+      letter-spacing: -0.012em;
+      line-height: 48px;
+      display: block;
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+      font-weight: normal;
     }
 
     ha-select {

src/panels/config/logs/ha-config-logs.ts

@@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
 import "../../../components/search-input";
 import { LogProvider } from "../../../data/error_log";
 import { fetchHassioAddonsInfo } from "../../../data/hassio/addon";
@@ -115,7 +116,7 @@ export class HaConfigLogs extends LitElement {
         this.hass.userData?.showAdvanced
           ? html`
               <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-                <mwc-button
+                <ha-button
                   slot="trigger"
                   .label=${this._logProviders.find(
                     (p) => p.key === this._selectedLogProvider
@@ -125,7 +126,7 @@ export class HaConfigLogs extends LitElement {
                     slot="trailingIcon"
                     .path=${mdiChevronDown}
                   ></ha-svg-icon>
-                </mwc-button>
+                </ha-button>
                 ${this._logProviders.map(
                   (provider) => html`
                     <mwc-list-item
@@ -146,12 +147,18 @@ export class HaConfigLogs extends LitElement {
             ? html`
                 <system-log-card
                   .hass=${this.hass}
+                  .header=${this._logProviders.find(
+                    (p) => p.key === this._selectedLogProvider
+                  )!.name}
                   .filter=${this._filter}
                 ></system-log-card>
               `
             : ""}
           <error-log-card
             .hass=${this.hass}
+            .header=${this._logProviders.find(
+              (p) => p.key === this._selectedLogProvider
+            )!.name}
             .filter=${this._filter}
             .provider=${this._selectedLogProvider}
             .show=${this._selectedLogProvider !== "core"}

src/panels/config/logs/system-log-card.ts

@@ -1,3 +1,4 @@
+import { mdiRefresh } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -25,6 +26,8 @@ export class SystemLogCard extends LitElement {
 
   @property() public filter = "";
 
+  @property() public header?: string;
+
   public loaded = false;
 
   @state() private _items?: LoggedError[];
@@ -83,6 +86,14 @@ export class SystemLogCard extends LitElement {
                 </div>
               `
             : html`
+                <div class="header">
+                  <h1 class="card-header">${this.header || "Logs"}</h1>
+                  <ha-icon-button
+                    .path=${mdiRefresh}
+                    @click=${this.fetchData}
+                    .label=${this.hass.localize("ui.common.refresh")}
+                  ></ha-icon-button>
+                </div>
                 ${this._items.length === 0
                   ? html`
                       <div class="card-content empty-content">
@@ -139,11 +150,6 @@ export class SystemLogCard extends LitElement {
                       "ui.panel.config.logs.clear"
                     )}</ha-call-service-button
                   >
-                  <ha-progress-button @click=${this.fetchData}
-                    >${this.hass.localize(
-                      "ui.panel.config.logs.refresh"
-                    )}</ha-progress-button
-                  >
                 </div>
               `}
         </ha-card>
@@ -181,6 +187,24 @@ export class SystemLogCard extends LitElement {
         padding-top: 16px;
       }
 
+      .header {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 16px;
+      }
+
+      .card-header {
+        color: var(--ha-card-header-color, --primary-text-color);
+        font-family: var(--ha-card-header-font-family, inherit);
+        font-size: var(--ha-card-header-font-size, 24px);
+        letter-spacing: -0.012em;
+        line-height: 48px;
+        display: block;
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+        font-weight: normal;
+      }
+
       paper-item {
         cursor: pointer;
       }

src/panels/config/network/supervisor-network.ts

@@ -106,7 +106,12 @@ export class HassioNetwork extends LitElement {
         )}
         ${this._interface?.type === "wireless"
           ? html`
-              <ha-expansion-panel header="Wi-Fi" outlined>
+              <ha-expansion-panel
+                .header=${this.hass.localize(
+                  "ui.panel.config.network.supervisor.wifi"
+                )}
+                outlined
+              >
                 ${this._interface?.wifi?.ssid
                   ? html`<p>
                       ${this.hass.localize(
@@ -147,7 +152,11 @@ export class HassioNetwork extends LitElement {
                                 >
                                   <span>${ap.ssid}</span>
                                   <span slot="secondary">
-                                    ${ap.mac} - Strength: ${ap.signal}
+                                    ${ap.mac} -
+                                    ${this.hass.localize(
+                                      "ui.panel.config.network.supervisor.signal_strength"
+                                    )}:
+                                    ${ap.signal}
                                   </span>
                                 </mwc-list-item>
                               `
@@ -211,7 +220,9 @@ export class HassioNetwork extends LitElement {
                               class="flex-auto"
                               type="password"
                               id="psk"
-                              label="Password"
+                              .label=${this.hass.localize(
+                                "ui.panel.config.network.supervisor.wifi_password"
+                              )}
                               version="wifi"
                               @value-changed=${this
                                 ._handleInputValueChangedWifi}

src/panels/history/ha-panel-history.ts

@@ -3,6 +3,7 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
   addDays,
+  differenceInHours,
   endOfToday,
   endOfWeek,
   endOfYesterday,
@@ -15,17 +16,19 @@ import {
   UnsubscribeFunc,
 } from "home-assistant-js-websocket/dist/types";
 import { css, html, LitElement, PropertyValues } from "lit";
-import { property, state } from "lit/decorators";
+import { property, query, state } from "lit/decorators";
+import { ensureArray } from "../../common/array/ensure-array";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { LocalStorage } from "../../common/decorators/local-storage";
-import { ensureArray } from "../../common/array/ensure-array";
 import { navigate } from "../../common/navigate";
 import {
   createSearchParam,
   extractSearchParamsObject,
 } from "../../common/url/search-params";
 import { computeRTL } from "../../common/util/compute_rtl";
+import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
+import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
 import "../../components/ha-circular-progress";
 import "../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
@@ -44,7 +47,11 @@ import {
   subscribeDeviceRegistry,
 } from "../../data/device_registry";
 import { subscribeEntityRegistry } from "../../data/entity_registry";
-import { computeHistory, fetchDateWS } from "../../data/history";
+import {
+  computeHistory,
+  HistoryResult,
+  subscribeHistory,
+} from "../../data/history";
 import "../../layouts/ha-app-layout";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
@@ -66,7 +73,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
   @state() private _isLoading = false;
 
-  @state() private _stateHistory?;
+  @state() private _stateHistory?: HistoryResult;
 
   @state() private _ranges?: DateRangePickerRanges;
 
@@ -76,18 +83,37 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
   @state() private _areaDeviceLookup?: AreaDeviceLookup;
 
+  @query("state-history-charts")
+  private _stateHistoryCharts?: StateHistoryCharts;
+
+  private _subscribed?: Promise<UnsubscribeFunc>;
+
+  private _interval?: number;
+
   public constructor() {
     super();
 
     const start = new Date();
-    start.setHours(start.getHours() - 2, 0, 0, 0);
+    start.setHours(start.getHours() - 1, 0, 0, 0);
     this._startDate = start;
 
     const end = new Date();
-    end.setHours(end.getHours() + 1, 0, 0, 0);
+    end.setHours(end.getHours() + 2, 0, 0, 0);
     this._endDate = end;
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this._getHistory();
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubscribeHistory();
+  }
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
@@ -270,24 +296,63 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
     if (entityIds.length === 0) {
       this._isLoading = false;
-      this._stateHistory = [];
+      this._stateHistory = { line: [], timeline: [] };
       return;
     }
-    try {
-      const dateHistory = await fetchDateWS(
-        this.hass,
-        this._startDate,
-        this._endDate,
-        entityIds
-      );
 
-      this._stateHistory = computeHistory(
-        this.hass,
-        dateHistory,
-        this.hass.localize
-      );
-    } finally {
+    if (this._subscribed) {
+      this._unsubscribeHistory();
+    }
+
+    const now = new Date();
+
+    this._subscribed = subscribeHistory(
+      this.hass,
+      (history) => {
+        this._isLoading = false;
+        this._stateHistory = computeHistory(
+          this.hass,
+          history,
+          this.hass.localize
+        );
+      },
+      this._startDate,
+      this._endDate,
+      entityIds
+    );
+    this._subscribed.catch(() => {
       this._isLoading = false;
+      this._unsubscribeHistory();
+    });
+    if (this._endDate > now) {
+      this._setRedrawTimer();
+    }
+  }
+
+  private _setRedrawTimer() {
+    clearInterval(this._interval);
+    const now = new Date();
+    const end = this._endDate > now ? now : this._endDate;
+    const timespan = differenceInHours(this._startDate, end);
+    this._interval = window.setInterval(
+      () => this._stateHistoryCharts?.requestUpdate(),
+      // if timespan smaller than 1 hour, update every 10 seconds, smaller than 5 hours, redraw every minute, otherwise every 5 minutes
+      timespan < 2
+        ? 10000
+        : timespan < 10
+        ? 60 * 1000
+        : MIN_TIME_BETWEEN_UPDATES
+    );
+  }
+
+  private _unsubscribeHistory() {
+    if (this._interval) {
+      clearInterval(this._interval);
+      this._interval = undefined;
+    }
+    if (this._subscribed) {
+      this._subscribed.then((unsub) => unsub?.());
+      this._subscribed = undefined;
     }
   }
 

src/panels/lovelace/cards/hui-area-card.ts

@@ -563,7 +563,7 @@ export class HuiAreaCard
         --mdc-icon-button-size: 44px;
       }
       .on {
-        color: var(--state-light-color);
+        color: var(--state-light-active-color);
       }
     `;
   }

src/panels/lovelace/cards/hui-button-card.ts

@@ -323,7 +323,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     }
     if (stateObj.attributes.hvac_action) {
       const hvacAction = stateObj.attributes.hvac_action;
-      if (["heating", "cooling", "drying", "fan"].includes(hvacAction)) {
+      if (hvacAction in HVAC_ACTION_TO_MODE) {
         return stateColorCss(stateObj, HVAC_ACTION_TO_MODE[hvacAction]);
       }
       return undefined;

src/panels/lovelace/cards/hui-entity-card.ts

@@ -168,7 +168,10 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
               ? formatNumber(
                   stateObj.state,
                   this.hass.locale,
-                  getNumberFormatOptions(stateObj)
+                  getNumberFormatOptions(
+                    stateObj,
+                    this.hass.entities[this._config.entity]
+                  )
                 )
               : computeStateDisplay(
                   this.hass.localize,
@@ -195,7 +198,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
   private _computeColor(stateObj: HassEntity): string | undefined {
     if (stateObj.attributes.hvac_action) {
       const hvacAction = stateObj.attributes.hvac_action;
-      if (["heating", "cooling", "drying", "fan"].includes(hvacAction)) {
+      if (hvacAction in HVAC_ACTION_TO_MODE) {
         return stateColorCss(stateObj, HVAC_ACTION_TO_MODE[hvacAction]);
       }
       return undefined;

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -8,18 +8,17 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import "../../../components/ha-card";
-import "../../../components/chart/state-history-charts";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import "../../../components/chart/state-history-charts";
+import "../../../components/ha-card";
 import {
+  computeHistory,
   HistoryResult,
   subscribeHistoryStatesTimeWindow,
-  computeHistory,
 } from "../../../data/history";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntitiesChanged } from "../common/has-changed";
 import { processConfigEntities } from "../common/process-config-entities";
-import { EntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 import { HistoryGraphCardConfig } from "./types";
 
@@ -41,7 +40,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   @state() private _config?: HistoryGraphCardConfig;
 
-  private _configEntities?: EntityConfig[];
+  @state() private _error?: { code: string; message: string };
 
   private _names: Record<string, string> = {};
 
@@ -49,16 +48,12 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   private _hoursToShow = 24;
 
-  private _error?: string;
-
   private _interval?: number;
 
   private _subscribed?: Promise<(() => Promise<void>) | void>;
 
   public getCardSize(): number {
-    return this._config?.title
-      ? 2
-      : 0 + 2 * (this._configEntities?.length || 1);
+    return this._config?.title ? 2 : 0 + 2 * (this._entityIds?.length || 1);
   }
 
   public setConfig(config: HistoryGraphCardConfig): void {
@@ -70,11 +65,12 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       throw new Error("You must include at least one entity");
     }
 
-    this._configEntities = config.entities
+    const configEntities = config.entities
       ? processConfigEntities(config.entities)
       : [];
 
-    this._configEntities.forEach((entity) => {
+    this._entityIds = [];
+    configEntities.forEach((entity) => {
       this._entityIds.push(entity.entity);
       if (entity.name) {
         this._names[entity.entity] = entity.name;
@@ -89,16 +85,16 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
   public connectedCallback() {
     super.connectedCallback();
     if (this.hasUpdated) {
-      this._subscribeHistoryTimeWindow();
+      this._subscribeHistory();
     }
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._unsubscribeHistoryTimeWindow();
+    this._unsubscribeHistory();
   }
 
-  private _subscribeHistoryTimeWindow() {
+  private _subscribeHistory() {
     if (!isComponentLoaded(this.hass!, "history") || this._subscribed) {
       return;
     }
@@ -136,17 +132,12 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     this._interval = window.setInterval(() => this._redrawGraph(), 1000 * 60);
   }
 
-  private _unsubscribeHistoryTimeWindow() {
-    if (!this._subscribed) {
-      return;
-    }
+  private _unsubscribeHistory() {
     clearInterval(this._interval);
-    this._subscribed.then((unsubscribe) => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
+    if (this._subscribed) {
+      this._subscribed.then((unsub) => unsub?.());
       this._subscribed = undefined;
-    });
+    }
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -177,12 +168,11 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
     if (
       changedProps.has("_config") &&
-      (!this._subscribed ||
-        oldConfig?.entities !== this._config.entities ||
-        oldConfig?.hours_to_show !== this._hoursToShow)
+      (oldConfig?.entities !== this._config.entities ||
+        oldConfig?.hours_to_show !== this._config.hours_to_show)
     ) {
-      this._unsubscribeHistoryTimeWindow();
-      this._subscribeHistoryTimeWindow();
+      this._unsubscribeHistory();
+      this._subscribeHistory();
     }
   }
 
@@ -191,10 +181,6 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       return html``;
     }
 
-    if (this._error) {
-      return html`<div class="errors">${this._error}</div>`;
-    }
-
     return html`
       <ha-card .header=${this._config.title}>
         <div
@@ -202,16 +188,25 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
             "has-header": !!this._config.title,
           })}"
         >
-          <state-history-charts
-            .hass=${this.hass}
-            .isLoadingData=${!this._stateHistory}
-            .historyData=${this._stateHistory}
-            .names=${this._names}
-            up-to-now
-            .showNames=${this._config.show_names !== undefined
-              ? this._config.show_names
-              : true}
-          ></state-history-charts>
+          ${this._error
+            ? html`
+                <div>
+                  ${this.hass.localize("ui.components.history_charts.error")} :
+                  ${this._error.message || this._error.code}
+                </div>
+              `
+            : html`
+                <state-history-charts
+                  .hass=${this.hass}
+                  .isLoadingData=${!this._stateHistory}
+                  .historyData=${this._stateHistory}
+                  .names=${this._names}
+                  up-to-now
+                  .showNames=${this._config.show_names !== undefined
+                    ? this._config.show_names
+                    : true}
+                ></state-history-charts>
+              `}
         </div>
       </ha-card>
     `;

src/panels/lovelace/cards/hui-light-card.ts

@@ -330,11 +330,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       }
 
       .light-button.state-on {
-        color: var(--state-light-color);
+        color: var(--state-light-active-color);
       }
 
       .light-button.state-unavailable {
-        color: var(--state-icon-unavailable-color);
+        color: var(--state-unavailable-color);
       }
 
       #info {

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

@@ -40,7 +40,7 @@ import {
   formatTimeWeekday,
 } from "../../../common/datetime/format_time";
 
-const DEFAULT_HOURS_TO_SHOW = 24;
+const DEFAULT_HOURS_TO_SHOW = 0;
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -191,16 +191,16 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   public connectedCallback() {
     super.connectedCallback();
     if (this.hasUpdated && this._configEntities?.length) {
-      this._subscribeHistoryTimeWindow();
+      this._subscribeHistory();
     }
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._unsubscribeHistoryTimeWindow();
+    this._unsubscribeHistory();
   }
 
-  private _subscribeHistoryTimeWindow() {
+  private _subscribeHistory() {
     if (!isComponentLoaded(this.hass!, "history") || this._subscribed) {
       return;
     }
@@ -213,7 +213,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         }
         this._stateHistory = combinedHistory;
       },
-      this._config!.hours_to_show! || DEFAULT_HOURS_TO_SHOW,
+      this._config!.hours_to_show! ?? DEFAULT_HOURS_TO_SHOW,
       this._configEntities!,
       false,
       false
@@ -223,26 +223,21 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     });
   }
 
-  private _unsubscribeHistoryTimeWindow() {
-    if (!this._subscribed) {
-      return;
-    }
-    this._subscribed.then((unsubscribe) => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
+  private _unsubscribeHistory() {
+    if (this._subscribed) {
+      this._subscribed.then((unsub) => unsub?.());
       this._subscribed = undefined;
-    });
+    }
   }
 
   protected updated(changedProps: PropertyValues): void {
     if (this._configEntities?.length) {
       if (!this._subscribed || changedProps.has("_config")) {
-        this._unsubscribeHistoryTimeWindow();
-        this._subscribeHistoryTimeWindow();
+        this._unsubscribeHistory();
+        this._subscribeHistory();
       }
     } else {
-      this._unsubscribeHistoryTimeWindow();
+      this._unsubscribeHistory();
     }
     if (changedProps.has("_config")) {
       this._computePadding();
@@ -346,7 +341,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
           const p = {} as HaMapPathPoint;
           p.point = [latitude, longitude] as LatLngTuple;
           const t = new Date(entityState.lu * 1000);
-          if (config.hours_to_show! || DEFAULT_HOURS_TO_SHOW > 144) {
+          if ((config.hours_to_show! ?? DEFAULT_HOURS_TO_SHOW) > 144) {
             // if showing > 6 days in the history trail, show the full
             // date and time
             p.tooltip = formatDateTime(t, this.hass.locale);

src/panels/lovelace/cards/hui-tile-card.ts

@@ -1,4 +1,3 @@
-import { memoize } from "@fullcalendar/common";
 import { Ripple } from "@material/mwc-ripple";
 import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
 import { mdiExclamationThick, mdiHelp } from "@mdi/js";
@@ -13,10 +12,10 @@ import {
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { DOMAINS_TOGGLE } from "../../../common/const";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { stateActive } from "../../../common/entity/state_active";
@@ -139,42 +138,44 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     return imageUrl;
   }
 
-  private _computeStateColor = memoize((entity: HassEntity, color?: string) => {
-    // Use custom color if active
-    if (color) {
-      return stateActive(entity) ? computeCssColor(color) : undefined;
-    }
-
-    // Use default color for person/device_tracker because color is on the badge
-    if (
-      computeDomain(entity.entity_id) === "person" ||
-      computeDomain(entity.entity_id) === "device_tracker"
-    ) {
-      return undefined;
-    }
-
-    // Use light color if the light support rgb
-    if (
-      computeDomain(entity.entity_id) === "light" &&
-      entity.attributes.rgb_color
-    ) {
-      const hsvColor = rgb2hsv(entity.attributes.rgb_color);
-
-      // Modify the real rgb color for better contrast
-      if (hsvColor[1] < 0.4) {
-        // Special case for very light color (e.g: white)
-        if (hsvColor[1] < 0.1) {
-          hsvColor[2] = 225;
-        } else {
-          hsvColor[1] = 0.4;
-        }
+  private _computeStateColor = memoizeOne(
+    (entity: HassEntity, color?: string) => {
+      // Use custom color if active
+      if (color) {
+        return stateActive(entity) ? computeCssColor(color) : undefined;
       }
-      return rgb2hex(hsv2rgb(hsvColor));
-    }
 
-    // Fallback to state color
-    return stateColorCss(entity);
-  });
+      // Use default color for person/device_tracker because color is on the badge
+      if (
+        computeDomain(entity.entity_id) === "person" ||
+        computeDomain(entity.entity_id) === "device_tracker"
+      ) {
+        return undefined;
+      }
+
+      // Use light color if the light support rgb
+      if (
+        computeDomain(entity.entity_id) === "light" &&
+        entity.attributes.rgb_color
+      ) {
+        const hsvColor = rgb2hsv(entity.attributes.rgb_color);
+
+        // Modify the real rgb color for better contrast
+        if (hsvColor[1] < 0.4) {
+          // Special case for very light color (e.g: white)
+          if (hsvColor[1] < 0.1) {
+            hsvColor[2] = 225;
+          } else {
+            hsvColor[1] = 0.4;
+          }
+        }
+        return rgb2hex(hsv2rgb(hsvColor));
+      }
+
+      // Fallback to state color
+      return stateColorCss(entity);
+    }
+  );
 
   private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
     const domain = computeDomain(stateObj.entity_id);
@@ -261,27 +262,29 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     const entityId = this._config.entity;
     const stateObj = entityId ? this.hass.states[entityId] : undefined;
 
-    const tileClasses = { vertical: Boolean(this._config.vertical) };
+    const contentClasses = { vertical: Boolean(this._config.vertical) };
 
     if (!stateObj) {
       return html`
-        <ha-card class="disabled">
-          <div class="tile ${classMap(tileClasses)}">
-            <div class="icon-container">
-              <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
-              <ha-tile-badge
-                class="badge"
-                .iconPath=${mdiExclamationThick}
-                style=${styleMap({
-                  "--tile-badge-background-color": `var(--red-color)`,
-                })}
-              ></ha-tile-badge>
+        <ha-card>
+          <div class="tile">
+            <div class="content ${classMap(contentClasses)}">
+              <div class="icon-container">
+                <ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
+                <ha-tile-badge
+                  class="badge"
+                  .iconPath=${mdiExclamationThick}
+                  style=${styleMap({
+                    "--tile-badge-background-color": `var(--red-color)`,
+                  })}
+                ></ha-tile-badge>
+              </div>
+              <ha-tile-info
+                class="info"
+                .primary=${entityId}
+                secondary=${this.hass.localize("ui.card.tile.not_found")}
+              ></ha-tile-info>
             </div>
-            <ha-tile-info
-              class="info"
-              .primary=${entityId}
-              secondary=${this.hass.localize("ui.card.tile.not_found")}
-            ></ha-tile-info>
           </div>
         </ha-card>
       `;
@@ -313,66 +316,62 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
         ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : null}
-        <div
-          class="tile ${classMap(tileClasses)}"
-          @action=${this._handleAction}
-          .actionHandler=${actionHandler()}
-          role="button"
-          tabindex="0"
-          @mousedown=${this.handleRippleActivate}
-          @mouseup=${this.handleRippleDeactivate}
-          @mouseenter=${this.handleRippleMouseEnter}
-          @mouseleave=${this.handleRippleMouseLeave}
-          @touchstart=${this.handleRippleActivate}
-          @touchend=${this.handleRippleDeactivate}
-          @touchcancel=${this.handleRippleDeactivate}
-        >
+        <div class="tile">
           <div
-            class="icon-container"
+            class="background"
+            @action=${this._handleAction}
+            .actionHandler=${actionHandler()}
             role="button"
             tabindex="0"
-            @action=${this._handleIconAction}
-            .actionHandler=${actionHandler()}
-            @mousedown=${stopPropagation}
-            @mouseup=${stopPropagation}
-            @mouseenter=${stopPropagation}
-            @mouseleave=${stopPropagation}
-            @touchstart=${stopPropagation}
-            @touchend=${stopPropagation}
-            @touchcancel=${stopPropagation}
-          >
-            ${imageUrl
-              ? html`
-                  <ha-tile-image
-                    class="icon"
-                    .imageUrl=${imageUrl}
-                  ></ha-tile-image>
-                `
-              : html`
-                  <ha-tile-icon
-                    class="icon"
-                    .icon=${icon}
-                    .iconPath=${iconPath}
-                  ></ha-tile-icon>
-                `}
-            ${badge
-              ? html`
-                  <ha-tile-badge
-                    class="badge"
-                    .icon=${badge.icon}
-                    .iconPath=${badge.iconPath}
-                    style=${styleMap({
-                      "--tile-badge-background-color": badge.color,
-                    })}
-                  ></ha-tile-badge>
-                `
-              : null}
+            @mousedown=${this.handleRippleActivate}
+            @mouseup=${this.handleRippleDeactivate}
+            @mouseenter=${this.handleRippleMouseEnter}
+            @mouseleave=${this.handleRippleMouseLeave}
+            @touchstart=${this.handleRippleActivate}
+            @touchend=${this.handleRippleDeactivate}
+            @touchcancel=${this.handleRippleDeactivate}
+          ></div>
+          <div class="content ${classMap(contentClasses)}">
+            <div
+              class="icon-container"
+              role="button"
+              tabindex="0"
+              @action=${this._handleIconAction}
+              .actionHandler=${actionHandler()}
+            >
+              ${imageUrl
+                ? html`
+                    <ha-tile-image
+                      class="icon"
+                      .imageUrl=${imageUrl}
+                    ></ha-tile-image>
+                  `
+                : html`
+                    <ha-tile-icon
+                      class="icon"
+                      .icon=${icon}
+                      .iconPath=${iconPath}
+                    ></ha-tile-icon>
+                  `}
+              ${badge
+                ? html`
+                    <ha-tile-badge
+                      class="badge"
+                      .icon=${badge.icon}
+                      .iconPath=${badge.iconPath}
+                      style=${styleMap({
+                        "--tile-badge-background-color": badge.color,
+                      })}
+                    ></ha-tile-badge>
+                  `
+                : null}
+            </div>
+            <ha-tile-info
+              class="info"
+              .primary=${name}
+              .secondary=${stateDisplay}
+            ></ha-tile-info>
           </div>
-          <ha-tile-info
-            class="info"
-            .primary=${name}
-            .secondary=${stateDisplay}
-          ></ha-tile-info>
         </div>
         ${supportedFeatures?.length
           ? html`
@@ -422,16 +421,15 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         --tile-color: var(--state-inactive-color);
         -webkit-tap-highlight-color: transparent;
       }
-      ha-card:has(.tile:focus-visible) {
+      ha-card:has(.background:focus-visible) {
         border-color: var(--tile-color);
         box-shadow: 0 0 0 1px var(--tile-color);
       }
       ha-card {
         --mdc-ripple-color: var(--tile-color);
         height: 100%;
-        overflow: hidden;
-        // For safari overflow hidden
         z-index: 0;
+        overflow: hidden;
       }
       ha-card.active {
         --tile-color: var(--state-icon-color);
@@ -442,7 +440,14 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       [role="button"]:focus {
         outline: none;
       }
-      .tile {
+      .background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+      .content {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -471,6 +476,10 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       }
       .icon-container .icon {
         --tile-icon-color: var(--tile-color);
+        user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
       }
       .icon-container .badge {
         position: absolute;
@@ -486,9 +495,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         padding: 12px;
         flex: 1;
         min-width: 0;
-        min-height: 40px;
         transition: background-color 180ms ease-in-out;
         box-sizing: border-box;
+        pointer-events: none;
       }
     `;
   }

src/panels/lovelace/common/has-changed.ts

@@ -1,4 +1,6 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { PropertyValues } from "lit";
+import { EntityRegistryEntry } from "../../../data/entity_registry";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "./process-config-entities";
 
@@ -24,6 +26,37 @@ function hasConfigChanged(element: any, changedProps: PropertyValues): boolean {
   return false;
 }
 
+function compareEntityState(
+  oldHass: HomeAssistant,
+  newHass: HomeAssistant,
+  entityId: string
+) {
+  const oldState = oldHass.states[entityId] as HassEntity | undefined;
+  const newState = newHass.states[entityId] as HassEntity | undefined;
+
+  return oldState !== newState;
+}
+
+function compareEntityEntryOptions(
+  oldHass: HomeAssistant,
+  newHass: HomeAssistant,
+  entityId: string
+) {
+  const oldEntry = oldHass.entities[entityId] as
+    | EntityRegistryEntry
+    | undefined;
+  const newEntry = newHass.entities[entityId] as
+    | EntityRegistryEntry
+    | undefined;
+
+  return (
+    oldEntry?.options?.sensor?.display_precision !==
+      newEntry?.options?.sensor?.display_precision ||
+    oldEntry?.options?.sensor?.suggested_display_precision !==
+      newEntry?.options?.sensor?.suggested_display_precision
+  );
+}
+
 // Check if config or Entity changed
 export function hasConfigOrEntityChanged(
   element: any,
@@ -34,10 +67,11 @@ export function hasConfigOrEntityChanged(
   }
 
   const oldHass = changedProps.get("hass") as HomeAssistant;
+  const newHass = element.hass as HomeAssistant;
 
   return (
-    oldHass.states[element._config!.entity] !==
-    element.hass!.states[element._config!.entity]
+    compareEntityState(oldHass, newHass, element._config!.entity) ||
+    compareEntityEntryOptions(oldHass, newHass, element._config!.entity)
   );
 }
 
@@ -51,12 +85,18 @@ export function hasConfigOrEntitiesChanged(
   }
 
   const oldHass = changedProps.get("hass") as HomeAssistant;
+  const newHass = element.hass as HomeAssistant;
 
   const entities = processConfigEntities(element._config!.entities, false);
 
-  return entities.some(
-    (entity) =>
-      "entity" in entity &&
-      oldHass.states[entity.entity] !== element.hass!.states[entity.entity]
-  );
+  return entities.some((entity) => {
+    if (!("entity" in entity)) {
+      return false;
+    }
+
+    return (
+      compareEntityState(oldHass, newHass, entity.entity) ||
+      compareEntityEntryOptions(oldHass, newHass, entity.entity)
+    );
+  });
 }

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -1,11 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -32,6 +28,52 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  { name: "entity", selector: { entity: {} } },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      { name: "name", selector: { text: {} } },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+        context: {
+          icon_entity: "entity",
+        },
+      },
+    ],
+  },
+  {
+    name: "",
+    type: "grid",
+    column_min_width: "100px",
+    schema: [
+      { name: "show_name", selector: { boolean: {} } },
+      { name: "show_state", selector: { boolean: {} } },
+      { name: "show_icon", selector: { boolean: {} } },
+    ],
+  },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      { name: "icon_height", selector: { text: { suffix: "px" } } },
+      { name: "theme", selector: { theme: {} } },
+    ],
+  },
+  {
+    name: "tap_action",
+    selector: { "ui-action": {} },
+  },
+  {
+    name: "hold_action",
+    selector: { "ui-action": {} },
+  },
+] as const;
+
 @customElement("hui-button-card-editor")
 export class HuiButtonCardEditor
   extends LitElement
@@ -46,76 +88,11 @@ export class HuiButtonCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity?: string, icon?: string, entityState?: HassEntity) =>
-      [
-        { name: "entity", selector: { entity: {} } },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon &&
-                    !entityState?.attributes.icon &&
-                    entityState &&
-                    entity
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
-              },
-            },
-          ],
-        },
-        {
-          name: "",
-          type: "grid",
-          column_min_width: "100px",
-          schema: [
-            { name: "show_name", selector: { boolean: {} } },
-            { name: "show_state", selector: { boolean: {} } },
-            { name: "show_icon", selector: { boolean: {} } },
-          ],
-        },
-        {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "icon_height", selector: { text: { suffix: "px" } } },
-            { name: "theme", selector: { theme: {} } },
-          ],
-        },
-        {
-          name: "tap_action",
-          selector: { "ui-action": {} },
-        },
-        {
-          name: "hold_action",
-          selector: { "ui-action": {} },
-        },
-      ] as const
-  );
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this._config.entity
-      ? this.hass.states[this._config.entity]
-      : undefined;
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     const data = {
       show_name: true,
       show_icon: true,
@@ -130,7 +107,7 @@ export class HuiButtonCardEditor
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
@@ -148,9 +125,7 @@ export class HuiButtonCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeHelperCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeHelperCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "tap_action":
       case "hold_action":
@@ -162,9 +137,7 @@ export class HuiButtonCardEditor
     }
   };
 
-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "theme":
       case "tap_action":

src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts

@@ -1,11 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -29,6 +25,38 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  { name: "entity", required: true, selector: { entity: {} } },
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      { name: "name", selector: { text: {} } },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+        context: {
+          icon_entity: "entity",
+        },
+      },
+      {
+        name: "attribute",
+        selector: {
+          attribute: {},
+        },
+        context: {
+          filter_entity: "entity",
+        },
+      },
+      { name: "unit", selector: { text: {} } },
+      { name: "theme", selector: { theme: {} } },
+      { name: "state_color", selector: { boolean: {} } },
+    ],
+  },
+] as const;
+
 @customElement("hui-entity-card-editor")
 export class HuiEntityCardEditor
   extends LitElement
@@ -43,58 +71,16 @@ export class HuiEntityCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity: string, icon: string, entityState: HassEntity) =>
-      [
-        { name: "entity", required: true, selector: { entity: {} } },
-        {
-          type: "grid",
-          name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
-              },
-            },
-
-            {
-              name: "attribute",
-              selector: { attribute: { entity_id: entity } },
-            },
-            { name: "unit", selector: { text: {} } },
-            { name: "theme", selector: { theme: {} } },
-            { name: "state_color", selector: { boolean: {} } },
-          ],
-        },
-      ] as const
-  );
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -107,9 +93,7 @@ export class HuiEntityCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     if (schema.name === "entity") {
       return this.hass!.localize(
         "ui.panel.lovelace.editor.card.generic.entity"

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -1,13 +1,11 @@
-import "../../../../components/ha-form/ha-form";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardEntityConfig } from "../../cards/types";
@@ -39,73 +37,56 @@ export class HuiGenericEntityRowEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (
-      entity: string,
-      icon: string | undefined,
-      entityState: HassEntity,
-      localize: LocalizeFunc
-    ) => {
-      const domain = computeDomain(entity);
+  private _schema = memoizeOne((entity: string, localize: LocalizeFunc) => {
+    const domain = computeDomain(entity);
 
-      return [
-        { name: "entity", required: true, selector: { entity: {} } },
-        {
-          type: "grid",
-          name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(domain, entityState)
-                      : undefined,
-                },
-              },
+    return [
+      { name: "entity", required: true, selector: { entity: {} } },
+      {
+        type: "grid",
+        name: "",
+        schema: [
+          { name: "name", selector: { text: {} } },
+          {
+            name: "icon",
+            selector: {
+              icon: {},
             },
-          ],
-        },
-        {
-          name: "secondary_info",
-          selector: {
-            select: {
-              options: (
-                Object.keys(SecondaryInfoValues).filter(
-                  (info) =>
-                    !("domains" in SecondaryInfoValues[info]) ||
-                    ("domains" in SecondaryInfoValues[info] &&
-                      SecondaryInfoValues[info].domains!.includes(domain))
-                ) as Array<keyof typeof SecondaryInfoValues>
-              ).map((info) => ({
-                value: info,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
-                ),
-              })),
+            context: {
+              icon_entity: "entity",
             },
           },
+        ],
+      },
+      {
+        name: "secondary_info",
+        selector: {
+          select: {
+            options: (
+              Object.keys(SecondaryInfoValues).filter(
+                (info) =>
+                  !("domains" in SecondaryInfoValues[info]) ||
+                  ("domains" in SecondaryInfoValues[info] &&
+                    SecondaryInfoValues[info].domains!.includes(domain))
+              ) as Array<keyof typeof SecondaryInfoValues>
+            ).map((info) => ({
+              value: info,
+              label: localize(
+                `ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
+              ),
+            })),
+          },
         },
-      ] as const;
-    }
-  );
+      },
+    ] as const;
+  });
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState,
-      this.hass.localize
-    );
+    const schema = this._schema(this._config.entity, this.hass.localize);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -1,11 +1,7 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -28,6 +24,39 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  {
+    name: "entity",
+    required: true,
+    selector: { entity: { domain: "light" } },
+  },
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      { name: "name", selector: { text: {} } },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+        context: {
+          icon_entity: "entity",
+        },
+      },
+    ],
+  },
+  { name: "theme", selector: { theme: {} } },
+  {
+    name: "hold_action",
+    selector: { "ui-action": {} },
+  },
+  {
+    name: "double_tap_action",
+    selector: { "ui-action": {} },
+  },
+] as const;
+
 @customElement("hui-light-card-editor")
 export class HuiLightCardEditor
   extends LitElement
@@ -42,62 +71,16 @@ export class HuiLightCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity: string, icon: string | undefined, entityState: HassEntity) =>
-      [
-        {
-          name: "entity",
-          required: true,
-          selector: { entity: { domain: "light" } },
-        },
-        {
-          type: "grid",
-          name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
-              },
-            },
-          ],
-        },
-        { name: "theme", selector: { theme: {} } },
-        {
-          name: "hold_action",
-          selector: { "ui-action": {} },
-        },
-        {
-          name: "double_tap_action",
-          selector: { "ui-action": {} },
-        },
-      ] as const
-  );
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -108,9 +91,7 @@ export class HuiLightCardEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "theme":
       case "hold_action":

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -1,7 +1,5 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import {
   assert,
   assign,
@@ -13,8 +11,6 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { entityId } from "../../../../common/structs/is-entity-id";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
@@ -38,6 +34,55 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  {
+    name: "entity",
+    selector: {
+      entity: { domain: ["counter", "input_number", "number", "sensor"] },
+    },
+  },
+  { name: "name", selector: { text: {} } },
+  {
+    type: "grid",
+    name: "",
+    schema: [
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+        context: {
+          icon_entity: "entity",
+        },
+      },
+      {
+        name: "graph",
+        selector: {
+          select: {
+            options: [
+              {
+                value: "none",
+                label: "None",
+              },
+              {
+                value: "line",
+                label: "Line",
+              },
+            ],
+          },
+        },
+      },
+      { name: "unit", selector: { text: {} } },
+      { name: "detail", selector: { boolean: {} } },
+      { name: "theme", selector: { theme: {} } },
+      {
+        name: "hours_to_show",
+        selector: { number: { min: 1, mode: "box" } },
+      },
+    ],
+  },
+] as const;
+
 @customElement("hui-sensor-card-editor")
 export class HuiSensorCardEditor
   extends LitElement
@@ -52,74 +97,11 @@ export class HuiSensorCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (entity: string, icon: string | undefined, entityState: HassEntity) =>
-      [
-        {
-          name: "entity",
-          selector: {
-            entity: { domain: ["counter", "input_number", "number", "sensor"] },
-          },
-        },
-        { name: "name", selector: { text: {} } },
-        {
-          type: "grid",
-          name: "",
-          schema: [
-            {
-              name: "icon",
-              selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
-              },
-            },
-            {
-              name: "graph",
-              selector: {
-                select: {
-                  options: [
-                    {
-                      value: "none",
-                      label: "None",
-                    },
-                    {
-                      value: "line",
-                      label: "Line",
-                    },
-                  ],
-                },
-              },
-            },
-            { name: "unit", selector: { text: {} } },
-            { name: "detail", selector: { boolean: {} } },
-            { name: "theme", selector: { theme: {} } },
-            {
-              name: "hours_to_show",
-              selector: { number: { min: 1, mode: "box" } },
-            },
-          ],
-        },
-      ] as const
-  );
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      entityState
-    );
-
     const data = {
       hours_to_show: 24,
       graph: "none",
@@ -131,7 +113,7 @@ export class HuiSensorCardEditor
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${SCHEMA}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -144,9 +126,7 @@ export class HuiSensorCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     switch (schema.name) {
       case "theme":
         return `${this.hass!.localize(

src/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts

@@ -1,11 +1,8 @@
-import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { any, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import "../../../../components/ha-form/ha-form";
@@ -90,9 +87,9 @@ export class HuiStatisticCardEditor
     if (!config || !config.period) {
       return config;
     }
-    for (const period of Object.values(periods)) {
+    for (const [periodKey, period] of Object.entries(periods)) {
       if (deepEqual(period, config.period)) {
-        return { ...config, period };
+        return { ...config, period: periodKey };
       }
     }
     return config;
@@ -100,10 +97,7 @@ export class HuiStatisticCardEditor
 
   private _schema = memoizeOne(
     (
-      entity: string,
-      icon: string,
-      periodVal: any,
-      entityState: HassEntity,
+      selectedPeriodKey: string | undefined,
       localize: LocalizeFunc,
       metadata?: StatisticsMetaData
     ) =>
@@ -130,22 +124,22 @@ export class HuiStatisticCardEditor
         {
           name: "period",
           required: true,
-          selector: Object.values(periods).includes(periodVal)
-            ? {
-                select: {
-                  multiple: false,
-                  options: Object.entries(periods).map(
-                    ([periodKey, period]) => ({
-                      value: period,
+          selector:
+            selectedPeriodKey &&
+            Object.keys(periods).includes(selectedPeriodKey)
+              ? {
+                  select: {
+                    multiple: false,
+                    options: Object.keys(periods).map((periodKey) => ({
+                      value: periodKey,
                       label:
                         localize(
                           `ui.panel.lovelace.editor.card.statistic.periods.${periodKey}`
                         ) || periodKey,
-                    })
-                  ),
-                },
-              }
-            : { object: {} },
+                    })),
+                  },
+                }
+              : { object: {} },
         },
         {
           type: "grid",
@@ -155,13 +149,10 @@ export class HuiStatisticCardEditor
             {
               name: "icon",
               selector: {
-                icon: {
-                  placeholder: icon || entityState?.attributes.icon,
-                  fallbackPath:
-                    !icon && !entityState?.attributes.icon && entityState
-                      ? domainIcon(computeDomain(entity), entityState)
-                      : undefined,
-                },
+                icon: {},
+              },
+              context: {
+                icon_entity: "entity",
               },
             },
             { name: "unit", selector: { text: {} } },
@@ -176,15 +167,10 @@ export class HuiStatisticCardEditor
       return html``;
     }
 
-    const entityState = this.hass.states[this._config.entity];
-
     const data = this._data(this._config);
 
     const schema = this._schema(
-      this._config.entity,
-      this._config.icon,
-      data.period,
-      entityState,
+      typeof data.period === "string" ? data.period : undefined,
       this.hass.localize,
       this._metadata
     );
@@ -212,6 +198,14 @@ export class HuiStatisticCardEditor
   private async _valueChanged(ev: CustomEvent) {
     const config = ev.detail.value as StatisticCardConfig;
     Object.keys(config).forEach((k) => config[k] === "" && delete config[k]);
+
+    if (typeof config.period === "string") {
+      const period = periods[config.period];
+      if (period) {
+        config.period = period;
+      }
+    }
+
     if (
       config.stat_type &&
       config.entity &&
@@ -227,12 +221,14 @@ export class HuiStatisticCardEditor
         config.stat_type = "change";
       }
     }
+
     if (!config.stat_type && config.entity) {
       const metadata = (
         await getStatisticMetadata(this.hass!, [config.entity])
       )?.[0];
       config.stat_type = metadata?.has_sum ? "change" : "mean";
     }
+
     fireEvent(this, "config-changed", { config });
   }