Update .devcontainer.json

Restructure devcontainer
2026-06-23 16:51:49 +00:00 · 2023-01-29 10:14:40 +01:00 · 2023-01-29 09:12:41 +00:00
97 changed files with 1916 additions and 2953 deletions
@@ -1,13 +1,20 @@
 {
  "name": "Home Assistant Frontend",
-  "build": {
-    "dockerfile": "Dockerfile",
-    "context": ".."
-  },
+  "image": "mcr.microsoft.com/devcontainers/python:0-3.10",
  "appPort": "8124:8123",
  "postCreateCommand": "script/bootstrap",
  "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
+    "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"
+    }
  },
  "customizations": {
    "vscode": {
@@ -1,13 +0,0 @@
-# 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"
@@ -5,7 +5,6 @@
    "plugin:@typescript-eslint/recommended",
    "plugin:wc/recommended",
    "plugin:lit/all",
-    "plugin:lit-a11y/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
@@ -66,10 +65,7 @@
    "import/extensions": [
      "error",
      "ignorePackages",
-      {
-        "ts": "never",
-        "js": "never"
-      }
+      { "ts": "never", "js": "never" }
    ],
    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
    "object-curly-newline": "off",
@@ -116,15 +112,7 @@
    ],
    "unused-imports/no-unused-imports": "error",
    "lit/attribute-value-entities": "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"
+    "lit/no-template-map": "off"
  },
  "plugins": ["disable", "unused-imports"],
  "processor": "disable/disable"
@@ -10,12 +10,9 @@ updates:
    directory: "/"
    schedule:
      interval: "daily"
-      time: "03:00"
-    open-pull-requests-limit: 10
-    labels:
-      - "dependencies"
+      time: "06:00"
+    open-pull-requests-limit: 5
    ignore:
      # Ignore rollup and plugins until everything else is updated
      - dependency-name: "*rollup*"
      - dependency-name: "@rollup/*"
-      - dependency-name: "serve"
@@ -67,7 +67,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
-        corejs: { version: "3.27", proposals: true },
+        corejs: "3.15",
        bugfixes: true,
      },
    ],
@@ -1,5 +1,4 @@
 // 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 {
@@ -7,6 +6,7 @@ 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";
@@ -138,10 +138,7 @@ export class DialogHassioNetwork
        )}
        ${this._interface?.type === "wireless"
          ? html`
-              <ha-expansion-panel
-                .header=${this.supervisor.localize("dialog.network.wifi")}
-                outlined
-              >
+              <ha-expansion-panel header="Wi-Fi" outlined>
                ${this._interface?.wifi?.ssid
                  ? html`<p>
                      ${this.supervisor.localize(
@@ -180,11 +177,7 @@ export class DialogHassioNetwork
                                >
                                  <span>${ap.ssid}</span>
                                  <span slot="secondary">
-                                    ${ap.mac} -
-                                    ${this.supervisor.localize(
-                                      "dialog.network.signal_strength"
-                                    )}:
-                                    ${ap.signal}
+                                    ${ap.mac} - Strength: ${ap.signal}
                                  </span>
                                </mwc-list-item>
                              `
@@ -248,9 +241,7 @@ export class DialogHassioNetwork
                              class="flex-auto"
                              type="password"
                              id="psk"
-                              .label=${this.supervisor.localize(
-                                "dialog.network.wifi_password"
-                              )}
+                              label="Password"
                              version="wifi"
                              @value-changed=${this
                                ._handleInputValueChangedWifi}
@@ -24,25 +24,26 @@
  "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
  "license": "Apache-2.0",
  "dependencies": {
-    "@braintree/sanitize-url": "^6.0.2",
+    "@braintree/sanitize-url": "^6.0.0",
    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^6.2.0",
+    "@codemirror/commands": "^6.1.3",
    "@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.3",
-    "@formatjs/intl-datetimeformat": "^6.4.3",
+    "@codemirror/view": "^6.7.1",
+    "@formatjs/intl-datetimeformat": "^4.2.5",
    "@formatjs/intl-getcanonicallocales": "^2.0.5",
    "@formatjs/intl-locale": "^3.0.11",
-    "@formatjs/intl-numberformat": "^8.3.3",
-    "@formatjs/intl-pluralrules": "^5.1.8",
-    "@formatjs/intl-relativetimeformat": "^11.1.8",
-    "@fullcalendar/core": "^6.1.1",
-    "@fullcalendar/daygrid": "^6.1.1",
-    "@fullcalendar/interaction": "^6.1.1",
-    "@fullcalendar/list": "^6.1.1",
-    "@fullcalendar/timegrid": "^6.1.1",
+    "@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",
    "@lezer/highlight": "^1.1.3",
    "@lit-labs/motion": "^1.0.3",
    "@lit-labs/virtualizer": "^1.0.1",
@@ -87,18 +88,18 @@
    "@polymer/paper-tooltip": "^3.0.1",
    "@polymer/polymer": "3.4.1",
    "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "^23.3.6",
-    "@vaadin/vaadin-themable-mixin": "^23.3.6",
+    "@vaadin/combo-box": "^23.3.5",
+    "@vaadin/vaadin-themable-mixin": "^23.3.5",
    "@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.7.0",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
    "app-datepicker": "^5.1.0",
    "chart.js": "^3.3.2",
    "comlink": "^4.3.1",
-    "core-js": "^3.27.2",
+    "core-js": "^3.15.2",
    "cropperjs": "^1.5.13",
    "date-fns": "^2.29.3",
    "date-fns-tz": "^1.3.7",
@@ -109,10 +110,10 @@
    "hammerjs": "^2.0.8",
    "hls.js": "^1.3.1",
    "home-assistant-js-websocket": "^8.0.1",
-    "idb-keyval": "^6.2.0",
-    "intl-messageformat": "^10.3.0",
+    "idb-keyval": "^5.1.3",
+    "intl-messageformat": "^10.2.5",
    "js-yaml": "^4.1.0",
-    "leaflet": "^1.9.3",
+    "leaflet": "^1.7.1",
    "leaflet-draw": "^1.0.4",
    "lit": "^2.6.1",
    "marked": "^4.0.12",
@@ -120,18 +121,17 @@
    "node-vibrant": "3.2.1-alpha.1",
    "proxy-polyfill": "^0.3.2",
    "punycode": "^2.3.0",
-    "qr-scanner": "^1.4.2",
+    "qr-scanner": "^1.3.0",
    "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.15.0",
+    "sortablejs": "^1.14.0",
    "superstruct": "^1.0.3",
    "tinykeys": "^1.1.3",
-    "tsparticles-engine": "^2.8.0",
-    "tsparticles-preset-links": "^2.8.0",
-    "unfetch": "^5.0.0",
+    "tsparticles": "^1.34.0",
+    "unfetch": "^4.1.0",
    "vis-data": "^7.1.2",
    "vis-network": "^8.5.4",
    "vue": "^2.6.12",
@@ -146,29 +146,29 @@
    "xss": "^1.0.14"
  },
  "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.20.2",
    "@babel/plugin-external-helpers": "^7.18.6",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.20.13",
+    "@babel/plugin-proposal-decorators": "^7.20.7",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
    "@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": "^4.0.0",
-    "@octokit/auth-oauth-device": "^4.0.4",
+    "@koa/cors": "^3.1.0",
+    "@octokit/auth-oauth-device": "^4.0.2",
    "@octokit/rest": "^19.0.7",
-    "@open-wc/dev-server-hmr": "^0.1.3",
+    "@open-wc/dev-server-hmr": "^0.0.2",
    "@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.5",
+    "@types/chromecast-caf-sender": "^1.0.3",
    "@types/glob": "^8",
    "@types/hammerjs": "^2.0.41",
    "@types/js-yaml": "^4",
@@ -180,22 +180,21 @@
    "@types/sortablejs": "^1",
    "@types/tar": "^6",
    "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
    "@typescript-eslint/parser": "^5.49.0",
    "@web/dev-server": "^0.0.24",
    "@web/dev-server-rollup": "^0.2.11",
-    "babel-loader": "^9.1.2",
-    "chai": "^4.3.7",
+    "babel-loader": "^9.1.0",
+    "chai": "^4.3.4",
    "del": "^7.0.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^14.0.0",
    "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-disable": "^2.0.3",
+    "eslint-import-resolver-webpack": "^0.13.1",
+    "eslint-plugin-disable": "^2.0.1",
    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-lit": "^1.8.2",
-    "eslint-plugin-lit-a11y": "^2.3.0",
+    "eslint-plugin-lit": "^1.6.1",
    "eslint-plugin-unused-imports": "^1.1.5",
    "eslint-plugin-wc": "^1.4.0",
    "fancy-log": "^2.0.0",
@@ -209,14 +208,14 @@
    "gulp-zopfli-green": "^3.0.1",
    "html-minifier": "^4.0.0",
    "husky": "^8.0.3",
-    "instant-mocha": "^1.5.0",
+    "instant-mocha": "^1.3.1",
    "jszip": "^3.10.1",
    "lint-staged": "^13.1.0",
    "lit-analyzer": "^1.2.1",
    "lodash.template": "^4.5.0",
    "magic-string": "^0.25.7",
    "map-stream": "^0.0.7",
-    "merge-stream": "^2.0.0",
+    "merge-stream": "^1.0.1",
    "mocha": "^8.4.0",
    "object-hash": "^3.0.0",
    "open": "^8.4.0",
@@ -229,24 +228,25 @@
    "rollup-plugin-visualizer": "^5.9.0",
    "serve": "^11.3.2",
    "sinon": "^15.0.1",
-    "source-map-url": "^0.4.1",
-    "systemjs": "^6.13.0",
-    "tar": "^6.1.13",
+    "source-map-url": "^0.4.0",
+    "systemjs": "^6.3.2",
+    "tar": "^6.1.11",
    "terser-webpack-plugin": "^5.2.4",
    "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.9.5",
+    "typescript": "^4.9.4",
    "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": "^5.0.0",
+    "webpack-manifest-plugin": "^4.0.2",
    "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"
+    "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
+    "@webcomponents/webcomponentsjs": "^2.2.10"
  },
  "main": "src/home-assistant.js",
  "prettier": {
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20230202.0"
+version      = "20230128.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
@@ -22,11 +22,3 @@ export const atLeastVersion = (
      Number(haPatch) >= patch)
  );
 };
-
-export const isDevVersion = (version: string): boolean => {
-  if (__DEMO__) {
-    return false;
-  }
-
-  return version.includes("dev");
-};
@@ -1,12 +1,6 @@
 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",
@@ -11,7 +11,8 @@ export const setupLeafletMap = async (
    throw new Error("Cannot setup Leaflet map on disconnected element");
  }
  // eslint-disable-next-line
-  const Leaflet = (await import("leaflet")).default as LeafletModuleType;
+  const Leaflet = ((await import("leaflet")) as any)
+    .default as LeafletModuleType;
  Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";

  const map = Leaflet.map(mapElement);
@@ -4,15 +4,12 @@ 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,
@@ -116,43 +113,5 @@ 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);
  }
 };
@@ -65,21 +65,19 @@ export interface FormatsType {

 const loadedPolyfillLocale = new Set();

-const locale = getLocalLanguage();
-
 const polyfills: Promise<any>[] = [];
 if (__BUILD__ === "latest") {
  if (shouldPolyfillLocale()) {
-    await import("@formatjs/intl-locale/polyfill");
+    polyfills.push(import("@formatjs/intl-locale/polyfill"));
  }
-  if (shouldPolyfillPluralRules(locale)) {
+  if (shouldPolyfillPluralRules()) {
    polyfills.push(import("@formatjs/intl-pluralrules/polyfill"));
    polyfills.push(import("@formatjs/intl-pluralrules/locale-data/en"));
  }
-  if (shouldPolyfillRelativeTime(locale)) {
+  if (shouldPolyfillRelativeTime()) {
    polyfills.push(import("@formatjs/intl-relativetimeformat/polyfill"));
  }
-  if (shouldPolyfillDateTime(locale)) {
+  if (shouldPolyfillDateTime()) {
    polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
    polyfills.push(import("@formatjs/intl-datetimeformat/add-all-tz"));
  }
@@ -90,7 +88,7 @@ export const polyfillsLoaded =
    ? undefined
    : Promise.all(polyfills).then(() =>
        // Load the default language
-        loadPolyfillLocales(locale)
+        loadPolyfillLocales(getLocalLanguage())
      );

 /**
@@ -216,7 +214,7 @@ export const loadPolyfillLocales = async (language: string) => {
      // @ts-ignore
      Intl.DateTimeFormat.__addLocaleData(await result.json());
    }
-  } catch (e) {
+  } catch (_e) {
    // Ignore
  }
 };
@@ -22,7 +22,7 @@ class StateHistoryChartLine extends LitElement {

  @property({ attribute: false }) public data: LineChartEntity[] = [];

-  @property() public names?: Record<string, string>;
+  @property() public names: boolean | Record<string, string> = false;

  @property() public unit?: string;

@@ -19,7 +19,7 @@ export class StateHistoryChartTimeline extends LitElement {

  @property() public narrow!: boolean;

-  @property() public names?: Record<string, string>;
+  @property() public names: boolean | Record<string, string> = false;

  @property() public unit?: string;

@@ -64,8 +64,6 @@ 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)
@@ -38,14 +38,14 @@ declare global {
 }

@customElement("state-history-charts")
-export class StateHistoryCharts extends LitElement {
+class StateHistoryCharts extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public historyData!: HistoryResult;

  @property() public narrow!: boolean;

-  @property() public names?: Record<string, string>;
+  @property({ type: Boolean }) public names = false;

  @property({ type: Boolean, attribute: "virtualize", reflect: true })
  public virtualize = false;
@@ -71,6 +71,7 @@ export 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">
@@ -66,7 +66,7 @@ class StatisticsChart extends LitElement {
    StatisticsMetaData
  >;

-  @property() public names?: Record<string, string>;
+  @property() public names: boolean | Record<string, string> = false;

  @property() public unit?: string;

@@ -1,4 +1,4 @@
-import "../ha-list-item";
+import "@material/mwc-list/mwc-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`<ha-list-item graphic="avatar" .twoline=${!!item.entity_id}>
+  html`<mwc-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>
-  </ha-list-item>`;
+  </mwc-list-item>`;

@customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
@@ -133,7 +133,7 @@ export class StateBadge extends LitElement {
        }
        if (stateObj.attributes.hvac_action) {
          const hvacAction = stateObj.attributes.hvac_action;
-          if (hvacAction in HVAC_ACTION_TO_MODE) {
+          if (["heating", "cooling", "drying", "fan"].includes(hvacAction)) {
            iconStyle.color = stateColorCss(
              stateObj,
              HVAC_ACTION_TO_MODE[hvacAction]
@@ -1,24 +0,0 @@
-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;
-  }
-}
@@ -13,15 +13,6 @@ 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);
-      }
    `,
  ];
 }
@@ -17,8 +17,11 @@ export class HaClickableListItem extends HaListItem {
    const href = this.href || "";

    return html`${this.disableHref
-      ? html`<a>${r}</a>`
-      : html`<a target=${this.openNewTab ? "_blank" : ""} href=${href}
+      ? html`<a aria-role="option">${r}</a>`
+      : html`<a
+          aria-role="option"
+          target=${this.openNewTab ? "_blank" : ""}
+          href=${href}
          >${r}</a
        >`}`;
  }
@@ -1,3 +1,4 @@
+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";
@@ -14,15 +15,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 !important;
+      padding: 0;
    }
    :host([focused]:not([disabled])) {
      background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
@@ -210,9 +211,9 @@ export class HaComboBox extends LitElement {
  private _defaultRowRenderer: ComboBoxLitRenderer<
    string | Record<string, any>
  > = (item) =>
-    html`<ha-list-item>
+    html`<mwc-list-item>
      ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </ha-list-item>`;
+    </mwc-list-item>`;

  private _clearValue(ev: Event) {
    ev.stopPropagation();
@@ -24,7 +24,7 @@ export class HaDialogDatePicker extends LitElement {
  @state() private _value?: string;

  public async showDialog(params: datePickerDialogParams): Promise<void> {
-    // app-datepicker has a bug, that it removes its handlers when disconnected, but doesn't add them back when reconnected.
+    // app-datpicker has a bug, that it removes its handlers when disconnected, but doesnt 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;
@@ -46,10 +46,7 @@ export class HaDialog extends DialogBase {
    styles,
    css`
      .mdc-dialog {
-        --mdc-dialog-scroll-divider-color: var(
-          --dialog-scroll-divider-color,
-          var(--divider-color)
-        );
+        --mdc-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);
@@ -75,6 +75,7 @@ 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}
@@ -94,6 +95,7 @@ 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"
@@ -1,33 +1,22 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, 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;

@@ -69,17 +58,6 @@ 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">
@@ -1,8 +1,6 @@
 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";
@@ -23,22 +21,7 @@ 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}
@@ -47,8 +30,8 @@ export class HaIconSelector extends LitElement {
        .required=${this.required}
        .disabled=${this.disabled}
        .helper=${this.helper}
-        .fallbackPath=${this.selector.icon?.fallbackPath ?? fallbackPath}
-        .placeholder=${this.selector.icon?.placeholder ?? placeholder}
+        .fallbackPath=${this.selector.icon?.fallbackPath}
+        .placeholder=${this.selector.icon?.placeholder}
        @value-changed=${this._valueChanged}
      ></ha-icon-picker>
    `;
@@ -30,6 +30,7 @@ export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
  device_class?: string;
  original_device_class?: string;
  aliases: string[];
+  options: EntityRegistryOptions | null;
 }

 export interface UpdateEntityRegistryEntryResult {
@@ -39,6 +40,7 @@ export interface UpdateEntityRegistryEntryResult {
 }

 export interface SensorEntityOptions {
+  precision?: number | null;
  unit_of_measurement?: string | null;
 }

@@ -54,6 +56,12 @@ export interface WeatherEntityOptions {
  wind_speed_unit?: string | null;
 }

+export interface EntityRegistryOptions {
+  number?: NumberEntityOptions;
+  sensor?: SensorEntityOptions;
+  weather?: WeatherEntityOptions;
+}
+
 export interface EntityRegistryEntryUpdateParams {
  name?: string | null;
  icon?: string | null;
@@ -117,7 +117,7 @@ export const fetchDateWS = (

 export const subscribeHistory = (
  hass: HomeAssistant,
-  callbackFunction: (data: HistoryStates) => void,
+  callbackFunction: (message: HistoryStreamMessage) => void,
  startTime: Date,
  endTime: Date,
  entityIds: string[]
@@ -132,9 +132,8 @@ export const subscribeHistory = (
      entityIdHistoryNeedsAttributes(hass, entityId)
    ),
  };
-  const stream = new HistoryStream(hass);
  return hass.connection.subscribeMessage<HistoryStreamMessage>(
-    (message) => callbackFunction(stream.processMessage(message)),
+    (message) => callbackFunction(message),
    params
  );
 };
@@ -142,11 +141,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 = {};
@@ -162,9 +161,8 @@ class HistoryStream {
      // indicate no more historical events
      return this.combinedHistory;
    }
-    const purgeBeforePythonTime = this.hoursToShow
-      ? (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000
-      : undefined;
+    const purgeBeforePythonTime =
+      (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000;
    const newHistory: HistoryStates = {};
    for (const entityId of Object.keys(this.combinedHistory)) {
      newHistory[entityId] = [];
@@ -197,7 +195,7 @@ class HistoryStream {
        newHistory[entityId] = streamMessage.states[entityId];
      }
      // Remove old history
-      if (purgeBeforePythonTime && entityId in this.combinedHistory) {
+      if (entityId in this.combinedHistory) {
        const expiredStates = newHistory[entityId].filter(
          (state) => state.lu < purgeBeforePythonTime
        );
@@ -1,53 +1,4 @@
-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,
@@ -700,7 +700,7 @@ export const fetchZwaveNodeFirmwareUpdateCapabilities = (
  device_id: string
 ): Promise<ZWaveJSNodeFirmwareUpdateCapabilities> =>
  hass.callWS({
-    type: "zwave_js/get_node_firmware_update_capabilities",
+    type: "zwave_js/get_firmware_update_capabilities",
    device_id,
  });

@@ -113,15 +113,20 @@ export class MoreInfoHistory extends LitElement {

  public disconnectedCallback() {
    super.disconnectedCallback();
-    this._unsubscribeHistory();
+    this._unsubscribeHistoryTimeWindow();
  }

-  private _unsubscribeHistory() {
-    clearInterval(this._interval);
-    if (this._subscribed) {
-      this._subscribed.then((unsub) => unsub?.());
-      this._subscribed = undefined;
+  private _unsubscribeHistoryTimeWindow() {
+    if (!this._subscribed) {
+      return;
    }
+    clearInterval(this._interval);
+    this._subscribed.then((unsubscribe) => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      this._subscribed = undefined;
+    });
  }

  private _redrawGraph() {
@@ -160,7 +165,7 @@ export class MoreInfoHistory extends LitElement {
      return;
    }
    if (this._subscribed) {
-      this._unsubscribeHistory();
+      this._unsubscribeHistoryTimeWindow();
    }
    this._subscribed = subscribeHistoryStatesTimeWindow(
      this.hass!,
@@ -43,9 +43,6 @@
    <%= 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 %>");
@@ -53,6 +50,9 @@
        window.providersPromise = fetch("/auth/providers", {
          credentials: "same-origin",
        });
+        if (!window.globalThis) {
+          window.globalThis = window;
+        }
      }
    </script>

@@ -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>
@@ -13,9 +13,6 @@
        color: var(--primary-text-color, #212121);
        background-color: #0277bd !important;
      }
-      body {
-        height: auto;
-      }
      .content {
        box-sizing: border-box;
        padding: 20px 16px;
@@ -78,9 +75,6 @@
    <%= 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 %>");
@@ -88,6 +82,9 @@
        window.stepsPromise = fetch("/api/onboarding", {
          credentials: "same-origin",
        });
+        if (!window.globalThis) {
+          window.globalThis = window;
+        }
      }
    </script>

@@ -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`
@@ -1,88 +1,82 @@
-import { tsParticles } from "tsparticles-engine";
-import { loadLinksPreset } from "tsparticles-preset-links";
+import { tsParticles } from "tsparticles";

-loadLinksPreset(tsParticles).then(() => {
-  tsParticles.load("particles", {
-    preset: "links",
-    background: {
-      opacity: 0,
+tsParticles.load("particles", {
+  // autoPlay: true,
+  fullScreen: {
+    enable: true,
+    zIndex: -1,
+  },
+  detectRetina: true,
+  fpsLimit: 60,
+  motion: {
+    disable: false,
+    reduce: {
+      factor: 4,
+      value: true,
    },
-    fullScreen: {
-      enable: true,
-      zIndex: -1,
-    },
-    detectRetina: true,
-    fpsLimit: 60,
-    motion: {
-      disable: false,
-      reduce: {
-        factor: 4,
-        value: true,
+  },
+  particles: {
+    color: {
+      value: "#fff",
+      animation: {
+        enable: true,
+        speed: 50,
+        sync: false,
      },
    },
-    particles: {
+    links: {
      color: {
-        value: "#fff",
-        animation: {
-          enable: true,
-          speed: 50,
-          sync: false,
-        },
+        value: "random",
      },
-      links: {
-        color: {
-          value: "random",
-        },
-        distance: 100,
+      distance: 100,
+      enable: true,
+      frequency: 1,
+      opacity: 0.7,
+      width: 1,
+    },
+    move: {
+      enable: true,
+      speed: 0.5,
+    },
+    number: {
+      density: {
        enable: true,
-        frequency: 1,
-        opacity: 0.7,
-        width: 1,
+        area: 800,
+        factor: 1000,
      },
-      move: {
+      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,
-      },
-      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,
-        },
+        startValue: "random",
+        sync: false,
      },
    },
-    pauseOnBlur: true,
-  });
+    size: {
+      random: {
+        enable: true,
+        minimumValue: 1,
+      },
+      value: 3,
+      animation: {
+        destroy: "none",
+        enable: true,
+        minimumValue: 1,
+        speed: 3,
+        startValue: "random",
+        sync: false,
+      },
+    },
+  },
+  pauseOnBlur: true,
 });
@@ -1,9 +1,15 @@
+// @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,
@@ -19,6 +25,7 @@ import {
  LitElement,
  PropertyValues,
  TemplateResult,
+  unsafeCSS,
 } from "lit";
 import { property, state } from "lit/decorators";
 import memoize from "memoize-one";
@@ -399,6 +406,10 @@ export class HAFullCalendar extends LitElement {
    return [
      haStyle,
      css`
+        ${unsafeCSS(fullcalendarStyle)}
+        ${unsafeCSS(daygridStyle)}
+        ${unsafeCSS(listStyle)}
+
        :host {
          display: flex;
          flex-direction: column;
@@ -11,7 +11,6 @@ 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";
@@ -133,7 +132,7 @@ export default class HaAutomationAction extends LitElement {
        @action=${this._addAction}
        .disabled=${this.disabled}
      >
-        <ha-button
+        <mwc-button
          slot="trigger"
          outlined
          .disabled=${this.disabled}
@@ -142,7 +141,7 @@ export default class HaAutomationAction extends LitElement {
          )}
        >
          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </ha-button>
+        </mwc-button>
        ${this._processedTypes(this.hass.localize).map(
          ([opt, label, icon]) => html`
            <mwc-list-item .value=${opt} graphic="icon">
@@ -4,7 +4,6 @@ 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";
@@ -81,7 +80,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
          </div>
        </ha-card>`
      )}
-      <ha-button
+      <mwc-button
        outlined
        .label=${this.hass.localize(
          "ui.panel.config.automation.editor.actions.type.choose.add_option"
@@ -90,7 +89,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
        @click=${this._addOption}
      >
        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
+      </mwc-button>
      ${this._showDefault || action.default
        ? html`
            <h2>
@@ -197,9 +196,6 @@ 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 {
@@ -8,7 +8,6 @@ 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";
@@ -178,7 +177,7 @@ export default class HaAutomationCondition extends LitElement {
        @action=${this._addCondition}
        .disabled=${this.disabled}
      >
-        <ha-button
+        <mwc-button
          slot="trigger"
          outlined
          .disabled=${this.disabled}
@@ -187,7 +186,7 @@ export default class HaAutomationCondition extends LitElement {
          )}
        >
          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </ha-button>
+        </mwc-button>
        ${this._processedTypes(this.hass.localize).map(
          ([opt, label, icon]) => html`
            <mwc-list-item .value=${opt} graphic="icon">
@@ -11,7 +11,6 @@ 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";
@@ -126,7 +125,7 @@ export default class HaAutomationTrigger extends LitElement {
        )}
        </div>
        <ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
-          <ha-button
+          <mwc-button
            slot="trigger"
            outlined
            .label=${this.hass.localize(
@@ -135,7 +134,7 @@ export default class HaAutomationTrigger extends LitElement {
            .disabled=${this.disabled}
          >
            <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-          </ha-button>
+          </mwc-button>
          ${this._processedTypes(this.hass.localize).map(
            ([opt, label, icon]) => html`
              <mwc-list-item .value=${opt} graphic="icon">
@@ -26,9 +26,6 @@ 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 {
@@ -58,8 +55,6 @@ 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
@@ -179,32 +174,6 @@ 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
@@ -315,21 +284,17 @@ class HaConfigSectionGeneral extends LitElement {
    `;
  }

-  private _configuredUnitSystem() {
-    return this.hass.config.unit_system.temperature === UNIT_C
-      ? "metric"
-      : "us_customary";
-  }
-
  protected firstUpdated(): void {
-    this._unitSystem = this._configuredUnitSystem();
+    this._unitSystem =
+      this.hass.config.unit_system.temperature === UNIT_C
+        ? "metric"
+        : "us_customary";
    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();
  }

@@ -370,10 +335,6 @@ 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;
  }
@@ -383,25 +344,6 @@ 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;
@@ -420,7 +362,6 @@ 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,
@@ -39,7 +39,6 @@ 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";

@@ -544,10 +543,6 @@ export class HaConfigDeviceDashboard extends LitElement {
      this._showZJSAddDeviceDialog(filteredConfigEntry);
      return;
    }
-    if (filteredConfigEntry?.domain === "matter") {
-      showMatterAddDeviceDialog(this);
-      return;
-    }
    showAddIntegrationDialog(this);
  }

@@ -366,7 +366,6 @@ 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;
@@ -394,7 +393,6 @@ 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;

@@ -13,7 +13,6 @@ 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"];

@@ -28,8 +27,6 @@ export class DialogEnergyBatterySettings

  @state() private _source?: BatterySourceTypeEnergyPreference;

-  @state() private _energy_units?: string[];
-
  @state() private _error?: string;

  public async showDialog(
@@ -39,9 +36,6 @@ export class DialogEnergyBatterySettings
    this._source = params.source
      ? { ...params.source }
      : emptyBatteryEnergyPreference();
-    this._energy_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
-    ).units;
  }

  public closeDialog(): void {
@@ -56,8 +50,6 @@ export class DialogEnergyBatterySettings
      return html``;
    }

-    const pickableUnit = this._energy_units?.join(", ") || "";
-
    return html`
      <ha-dialog
        open
@@ -71,12 +63,6 @@ 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}
@@ -13,7 +13,6 @@ 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"];

@@ -28,17 +27,12 @@ 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 {
@@ -53,8 +47,6 @@ export class DialogEnergyDeviceSettings
      return html``;
    }

-    const pickableUnit = this._energy_units?.join(", ") || "";
-
    return html`
      <ha-dialog
        open
@@ -70,8 +62,7 @@ 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",
-            { unit: pickableUnit }
+            `ui.panel.config.energy.device_consumption.dialog.selected_stat_intro`
          )}
        </div>

@@ -23,7 +23,6 @@ import {
  getDisplayUnit,
  isExternalStatistic,
 } from "../../../../data/recorder";
-import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";

 const gasDeviceClasses = ["gas", "energy"];
 const gasUnitClasses = ["volume", "energy"];
@@ -41,12 +40,10 @@ 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(
@@ -68,17 +65,12 @@ 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 });
@@ -90,19 +82,15 @@ export class DialogEnergyGasSettings
    }

    const pickableUnit =
-      this._params.allowedGasUnitClass === undefined
-        ? [...(this._gas_units || []), ...(this._energy_units || [])].join(", ")
+      this._pickableUnit ||
+      (this._params.allowedGasUnitClass === undefined
+        ? "ft³, m³, Wh, kWh, MWh or GJ"
        : this._params.allowedGasUnitClass === "energy"
-        ? this._energy_units?.join(", ") || ""
-        : this._gas_units?.join(", ") || "";
-
-    const unitPrice = this._pickedDisplayUnit
-      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
-      : undefined;
+        ? "Wh, kWh, MWh or GJ"
+        : "ft³ or m³");

    const externalSource =
-      this._source.stat_energy_from &&
-      isExternalStatistic(this._source.stat_energy_from);
+      this._source.stat_cost && isExternalStatistic(this._source.stat_cost);

    return html`
      <ha-dialog
@@ -115,20 +103,6 @@ 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}
@@ -136,20 +110,26 @@ 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
@@ -161,13 +141,14 @@ 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>
@@ -177,15 +158,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"
-              )} (${this.hass.config.currency})`}
+              .label=${this.hass.localize(
+                `ui.panel.config.energy.gas.dialog.cost_stat_input`
+              )}
              @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
@@ -202,36 +183,39 @@ 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"
-              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
+              .label=${this.hass.localize(
+                `ui.panel.config.energy.gas.dialog.cost_entity_input`,
+                { unit: this._pickedDisplayUnit || pickableUnit }
+              )}
              @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"
-              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
+              .label=${this.hass.localize(
+                `ui.panel.config.energy.gas.dialog.cost_number_input`,
+                { unit: this._pickedDisplayUnit || pickableUnit }
+              )}
              class="price-options"
              step=".01"
              type="number"
              .value=${this._source.number_energy_price}
              @change=${this._numberPriceChanged}
-              .suffix=${unitPrice || ""}
+              .suffix=${`${this.hass.config.currency}/${
+                this._pickedDisplayUnit || pickableUnit
+              }`}
            >
            </ha-textfield>`
          : ""}
@@ -19,12 +19,6 @@ 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"];

@@ -43,10 +37,6 @@ 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(
@@ -67,24 +57,11 @@ 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 });
  }
@@ -94,26 +71,6 @@ 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
@@ -128,17 +85,9 @@ export class DialogEnergyGridFlowSettings
      >
        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
        <div>
-          <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>
+          ${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+          )}
        </div>

        <ha-statistic-picker
@@ -196,9 +145,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>`
          : ""}
@@ -211,7 +160,6 @@ export class DialogEnergyGridFlowSettings
            value="entity"
            name="costs"
            .checked=${this._costs === "entity"}
-            .disabled=${externalSource}
            @change=${this._handleCostChanged}
          ></ha-radio>
        </ha-formfield>
@@ -221,9 +169,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>`
          : ""}
@@ -236,20 +184,22 @@ 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=${unitPrice || ""}
+              .suffix=${this.hass.localize(
+                `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_number_suffix`,
+                { currency: this.hass.config.currency }
+              )}
              @change=${this._numberPriceChanged}
            >
            </ha-textfield>`
@@ -311,17 +261,7 @@ export class DialogEnergyGridFlowSettings
    };
  }

-  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;
-    }
+  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
    this._source = {
      ...this._source!,
      [this._params!.direction === "from"
@@ -21,7 +21,6 @@ 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"];

@@ -40,8 +39,6 @@ export class DialogEnergySolarSettings

  @state() private _forecast?: boolean;

-  @state() private _energy_units?: string[];
-
  @state() private _error?: string;

  public async showDialog(
@@ -53,9 +50,6 @@ 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 {
@@ -70,8 +64,6 @@ export class DialogEnergySolarSettings
      return html``;
    }

-    const pickableUnit = this._energy_units?.join(", ") || "";
-
    return html`
      <ha-dialog
        open
@@ -83,12 +75,6 @@ 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}
@@ -14,16 +14,11 @@ import {
  emptyWaterEnergyPreference,
  WaterSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import {
-  getStatisticMetadata,
-  getDisplayUnit,
-  isExternalStatistic,
-} from "../../../../data/recorder";
+import { 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
@@ -38,10 +33,6 @@ 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(
@@ -51,11 +42,6 @@ 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
@@ -63,16 +49,12 @@ 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 });
  }

@@ -81,15 +63,8 @@ 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_energy_from &&
-      isExternalStatistic(this._source.stat_energy_from);
+      this._source.stat_cost && isExternalStatistic(this._source.stat_cost);

    return html`
      <ha-dialog
@@ -102,19 +77,6 @@ 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}
@@ -129,12 +91,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
@@ -146,13 +108,14 @@ 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>
@@ -162,15 +125,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"
-              )} (${this.hass.config.currency})`}
+              .label=${this.hass.localize(
+                `ui.panel.config.energy.water.dialog.cost_stat_input`
+              )}
              @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
@@ -187,36 +150,35 @@ 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"
-              )}${unitPrice ? ` (${unitPrice})` : ""}`}
+              .label=${this.hass.localize(
+                `ui.panel.config.energy.water.dialog.cost_entity_input`
+              )}
              @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"
-              )}${unitPrice ? ` (${unitPrice})` : ""}`}
+              .label=${this.hass.localize(
+                `ui.panel.config.energy.water.dialog.cost_number_input`
+              )}
              class="price-options"
              step=".01"
              type="number"
              .value=${this._source.number_energy_price}
              @change=${this._numberPriceChanged}
-              .suffix=${unitPrice || ""}
+              .suffix=${`${this.hass.config.currency}/m³`}
            >
            </ha-textfield>`
          : ""}
@@ -268,16 +230,6 @@ 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";
    }
@@ -16,7 +16,6 @@ export interface EnergySettingsGridFlowDialogParams {
  source?:
    | FlowFromGridSourceEnergyPreference
    | FlowToGridSourceEnergyPreference;
-  metadata?: StatisticsMetaData;
  direction: "from" | "to";
  saveCallback: (
    source:
@@ -27,13 +26,11 @@ 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>;
 }

@@ -63,6 +63,7 @@ import {
  EntityRegistryEntry,
  EntityRegistryEntryUpdateParams,
  ExtEntityRegistryEntry,
+  SensorEntityOptions,
  fetchEntityRegistry,
  removeEntityRegistryEntry,
  updateEntityRegistryEntry,
@@ -126,6 +127,16 @@ const OVERRIDE_WEATHER_UNITS = {

 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;
@@ -154,6 +165,8 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {

  @state() private _unit_of_measurement?: string | null;

+  @state() private _precision?: number | null;
+
  @state() private _precipitation_unit?: string | null;

  @state() private _pressure_unit?: string | null;
@@ -204,9 +217,6 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
        this._helperConfigEntry = entries.find(
          (ent) => ent.entry_id === this.entry.config_entry_id
        );
-        if (this._helperConfigEntry?.domain === "switch_as_x") {
-          this._switchAs = computeDomain(this.entry.entity_id);
-        }
      });
    }
  }
@@ -254,6 +264,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
      this._unit_of_measurement = stateObj?.attributes?.unit_of_measurement;
    }

+    if (domain === "sensor") {
+      this._precision = this.entry.options?.sensor?.precision;
+    }
+
    if (domain === "weather") {
      const stateObj: HassEntity | undefined =
        this.hass.states[this.entry.entity_id];
@@ -471,6 +485,44 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
              </ha-select>
            `
          : ""}
+        ${domain === "sensor" &&
+        // Allow customizing the precision for a sensor with numerical device class,
+        // a unit of measurement or state class
+        ((this._deviceClass &&
+          !["date", "enum", "timestamp"].includes(this._deviceClass)) ||
+          stateObj?.attributes.unit_of_measurement ||
+          stateObj?.attributes.state_class)
+          ? html`
+              <ha-select
+                .label=${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.precision"
+                )}
+                .value=${this._precision == null
+                  ? "default"
+                  : this._precision.toString()}
+                naturalMenuWidth
+                fixedMenuPosition
+                @selected=${this._precisionChanged}
+                @closed=${stopPropagation}
+              >
+                <mwc-list-item .value=${"default"}
+                  >${this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.precision_default"
+                  )}</mwc-list-item
+                >
+                ${PRECISIONS.map(
+                  (precision) => html`
+                    <mwc-list-item .value=${precision.toString()}>
+                      ${precisionLabel(
+                        precision,
+                        this.hass.states[this.entry.entity_id]?.state
+                      )}
+                    </mwc-list-item>
+                  `
+                )}
+              </ha-select>
+            `
+          : ""}
        ${domain === "weather"
          ? html`
              <ha-select
@@ -555,8 +607,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
              </ha-select>
            `
          : ""}
-        ${domain === "switch" ||
-        this._helperConfigEntry?.domain === "switch_as_x"
+        ${domain === "switch"
          ? html`<ha-select
              .label=${this.hass.localize(
                "ui.dialogs.entity_registry.editor.device_class"
@@ -566,56 +617,37 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
              @selected=${this._switchAsChanged}
              @closed=${stopPropagation}
            >
-              ${domain === "switch"
-                ? html`<mwc-list-item
-                      value="switch"
-                      .selected=${!this._deviceClass ||
-                      this._deviceClass === "switch"}
-                    >
-                      ${this.hass.localize(
-                        "ui.dialogs.entity_registry.editor.device_classes.switch.switch"
-                      )}
-                    </mwc-list-item>
-                    <mwc-list-item
-                      value="outlet"
-                      .selected=${this._deviceClass === "outlet"}
-                    >
-                      ${this.hass.localize(
-                        "ui.dialogs.entity_registry.editor.device_classes.switch.outlet"
-                      )}
-                    </mwc-list-item>
-                    <li divider role="separator"></li>
-                    ${this._switchAsDomainsSorted(
-                      SWITCH_AS_DOMAINS,
-                      this.hass.localize
-                    ).map(
-                      (entry) => html`
-                        <mwc-list-item
-                          .value=${entry.domain}
-                          .selected=${this._switchAs === entry.domain}
-                        >
-                          ${entry.label}
-                        </mwc-list-item>
-                      `
-                    )}`
-                : html`<mwc-list-item
-                      value="switch"
-                      .selected=${this._switchAs === "switch"}
-                      >${domainToName(
-                        this.hass.localize,
-                        "switch"
-                      )}</mwc-list-item
-                    ><mwc-list-item
-                      value="switch"
-                      .selected=${this._switchAs === domain}
-                      >${domainToName(
-                        this.hass.localize,
-                        domain
-                      )}</mwc-list-item
-                    >`}
+              <mwc-list-item
+                value="switch"
+                .selected=${!this._deviceClass ||
+                this._deviceClass === "switch"}
+              >
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.device_classes.switch.switch"
+                )}
+              </mwc-list-item>
+              <mwc-list-item
+                value="outlet"
+                .selected=${this._deviceClass === "outlet"}
+              >
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.device_classes.switch.outlet"
+                )}
+              </mwc-list-item>
+              <li divider role="separator"></li>
+              ${this._switchAsDomainsSorted(
+                SWITCH_AS_DOMAINS,
+                this.hass.localize
+              ).map(
+                (entry) => html`
+                  <mwc-list-item .value=${entry.domain}>
+                    ${entry.label}
+                  </mwc-list-item>
+                `
+              )}
            </ha-select>`
          : ""}
-        ${this._helperConfigEntry && this._helperConfigEntry.supports_options
+        ${this._helperConfigEntry
          ? html`
              <div class="row">
                <mwc-button
@@ -872,9 +904,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
          class="warning"
          @click=${this._confirmDeleteEntry}
          .disabled=${this._submitting ||
-          ((!this._helperConfigEntry ||
-            this._helperConfigEntry.domain === "switch_as_x") &&
-            !stateObj?.attributes.restored)}
+          (!this._helperConfigEntry && !stateObj?.attributes.restored)}
        >
          ${this.hass.localize("ui.dialogs.entity_registry.editor.delete")}
        </mwc-button>
@@ -918,6 +948,12 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
    this._precipitation_unit = ev.target.value;
  }

+  private _precisionChanged(ev): void {
+    this._error = undefined;
+    this._precision =
+      ev.target.value === "default" ? null : Number(ev.target.value);
+  }
+
  private _pressureUnitChanged(ev): void {
    this._error = undefined;
    this._pressure_unit = ev.target.value;
@@ -948,10 +984,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
    const switchAs = ev.target.value === "outlet" ? "switch" : ev.target.value;
    this._switchAs = switchAs;

-    if (
-      computeDomain(this.entry.entity_id) === "switch" &&
-      (ev.target.value === "outlet" || ev.target.value === "switch")
-    ) {
+    if (ev.target.value === "outlet" || ev.target.value === "switch") {
      this._deviceClass = ev.target.value;
    }
  }
@@ -1116,7 +1149,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
      stateObj?.attributes?.unit_of_measurement !== this._unit_of_measurement
    ) {
      params.options_domain = domain;
-      params.options = { unit_of_measurement: this._unit_of_measurement };
+      params.options = this.entry.options?.[domain] || {};
+      params.options.unit_of_measurement = this._unit_of_measurement;
+    }
+    if (
+      domain === "sensor" &&
+      this.entry.options?.[domain]?.precision !== this._precision
+    ) {
+      params.options_domain = domain;
+      params.options = params.options || this.entry.options?.[domain] || {};
+      (params.options as SensorEntityOptions).precision = this._precision;
    }
    if (
      domain === "weather" &&
@@ -1164,41 +1206,24 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
      this._submitting = false;
    }

-    if (this._switchAs !== computeDomain(this._entityId)) {
+    if (this._switchAs !== "switch") {
      if (
        !(await showConfirmationDialog(this, {
          text: this.hass!.localize(
-            `ui.dialogs.entity_registry.editor.${
-              this._helperConfigEntry?.domain === "switch_as_x"
-                ? "switch_as_x_remove_confirm"
-                : "switch_as_x_confirm"
-            }`,
+            "ui.dialogs.entity_registry.editor.switch_as_x_confirm",
            "domain",
-            domainToName(
-              this.hass.localize,
-              this._helperConfigEntry?.domain === "switch_as_x"
-                ? domain
-                : this._switchAs
-            ).toLowerCase()
+            this._switchAs
          ),
        }))
      ) {
        return;
      }
-      const entityId = this._entityId.trim();
-      if (this._helperConfigEntry?.domain === "switch_as_x") {
-        // remove current helper
-        await deleteConfigEntry(this.hass, this._helperConfigEntry.entry_id);
-        if (this._switchAs === "switch") {
-          return;
-        }
-      }
      const configFlow = await createConfigFlow(this.hass, "switch_as_x");
      const result = (await handleConfigFlowStep(
        this.hass,
        configFlow.flow_id,
        {
-          entity_id: entityId,
+          entity_id: this._entityId.trim(),
          target_domain: this._switchAs,
        }
      )) as DataEntryFlowStepCreateEntry;
@@ -1255,9 +1280,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
  private _switchAsDomainsSorted = memoizeOne(
    (domains: string[], localize: LocalizeFunc) =>
      domains
-        .map((domain) => ({
-          domain,
-          label: domainToName(localize, domain),
+        .map((entry) => ({
+          domain: entry,
+          label: domainToName(localize, entry),
        }))
        .sort((a, b) =>
          stringCompare(a.label, b.label, this.hass.locale.language)
@@ -103,21 +103,17 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                fullUpdate = true;
              }
            } else if (message.type === "removed") {
-              if (this._configEntries) {
-                delete this._configEntries[message.entry.entry_id];
-              }
+              delete this._configEntries![message.entry.entry_id];
            } else if (message.type === "updated") {
-              if (this._configEntries) {
-                const newEntry = message.entry;
-                this._configEntries[message.entry.entry_id] = newEntry;
-              }
+              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 } = {};
@@ -224,6 +220,10 @@ 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];
@@ -9,8 +9,7 @@ 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 { createCloseHeading } from "../../../components/ha-dialog";
-import "../../../components/ha-list-item";
+import "../../../components/ha-dialog";
 import { getConfigFlowHandlers } from "../../../data/config_flow";
 import { createCounter } from "../../../data/counter";
 import { createInputBoolean } from "../../../data/input_boolean";
@@ -168,9 +167,8 @@ export class DialogHelperDetail extends LitElement {
            const isLoaded =
              !(domain in HELPERS) || isComponentLoaded(this.hass, domain);
            return html`
-              <ha-list-item
+              <mwc-list-item
                .disabled=${!isLoaded}
-                hasmeta
                .domain=${domain}
                @request-selected=${this._domainPicked}
                graphic="icon"
@@ -188,8 +186,7 @@ export class DialogHelperDetail extends LitElement {
                  referrerpolicy="no-referrer"
                />
                <span class="item-text"> ${label} </span>
-                <ha-icon-next slot="meta"></ha-icon-next>
-              </ha-list-item>
+              </mwc-list-item>
              ${!isLoaded
                ? html`
                    <paper-tooltip animation-delay="0"
@@ -204,6 +201,9 @@ export class DialogHelperDetail extends LitElement {
            `;
          })}
        </mwc-list>
+        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+          ${this.hass!.localize("ui.common.cancel")}
+        </mwc-button>
      `;
    }

@@ -214,19 +214,15 @@ export class DialogHelperDetail extends LitElement {
        class=${classMap({ "button-left": !this._domain })}
        scrimClickAction
        escapeKeyAction
-        .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")
-        )}
+        .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")}
      >
        ${content}
      </ha-dialog>
@@ -289,22 +285,6 @@ 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;
-        }
      `,
    ];
  }
@@ -1,7 +1,11 @@
+// @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,
@@ -10,6 +14,7 @@ import {
  LitElement,
  PropertyValues,
  TemplateResult,
+  unsafeCSS,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { firstWeekdayIndex } from "../../../../common/datetime/first_weekday";
@@ -404,6 +409,8 @@ class HaScheduleForm extends LitElement {
    return [
      haStyle,
      css`
+        ${unsafeCSS(fullcalendarStyle)}
+        ${unsafeCSS(timegridStyle)}
        .form {
          color: var(--primary-text-color);
        }
@@ -7,10 +7,7 @@ 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,
-  PROTOCOL_INTEGRATIONS,
-} from "../../../common/integrations/protocolIntegrationPicked";
+import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
@@ -139,9 +136,10 @@ class AddIntegrationDialog extends LitElement {
      localize: LocalizeFunc,
      filter?: string
    ): IntegrationListItem[] => {
-      const addDeviceRows: IntegrationListItem[] = PROTOCOL_INTEGRATIONS.filter(
-        (domain) => components.includes(domain)
+      const addDeviceRows: IntegrationListItem[] = (
+        ["zha", "zwave_js"] as const
      )
+        .filter((domain) => components.includes(domain))
        .map((domain) => ({
          name: localize(`ui.panel.config.integrations.add_${domain}_device`),
          domain,
@@ -373,7 +371,7 @@ class AddIntegrationDialog extends LitElement {
      ),
      confirm: () => {
        this.closeDialog();
-        if (PROTOCOL_INTEGRATIONS.includes(integration.supported_by)) {
+        if (["zha", "zwave_js"].includes(integration.supported_by)) {
          protocolIntegrationPicked(this, this.hass, integration.supported_by);
          return;
        }
@@ -521,9 +519,7 @@ class AddIntegrationDialog extends LitElement {
    }

    if (
-      (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
-        integration.domain
-      ) &&
+      ["zha", "zwave_js"].includes(integration.domain) &&
      isComponentLoaded(this.hass, integration.domain)
    ) {
      this._pickedBrand = integration.domain;
@@ -14,10 +14,7 @@ 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,
-  PROTOCOL_INTEGRATIONS,
-} from "../../../common/integrations/protocolIntegrationPicked";
+import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
@@ -764,11 +761,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
          }
        ),
        confirm: async () => {
-          if (
-            (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
-              integration.supported_by!
-            )
-          ) {
+          if (["zha", "zwave_js"].includes(integration.supported_by!)) {
            protocolIntegrationPicked(
              this,
              this.hass,
@@ -829,9 +822,6 @@ 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;
@@ -860,9 +850,6 @@ 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 {
@@ -887,22 +874,13 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
          position: relative;
          display: flex;
          align-items: center;
-          padding-top: 2px;
-          padding-bottom: 2px;
-          padding-right: 2px;
-          padding-left: 8px;
-          padding-inline-start: 8px;
-          padding-inline-end: 2px;
+          padding: 2px 2px 2px 8px;
          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);
@@ -3,10 +3,7 @@ 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,
-  PROTOCOL_INTEGRATIONS,
-} from "../../../common/integrations/protocolIntegrationPicked";
+import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -80,41 +77,38 @@ class HaDomainIntegrations extends LitElement {
              : ""}`
        : ""}
      ${this.integration?.iot_standards
-        ? 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
+        ? (
+            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
              >
-                <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>`;
-            })
+              <ha-icon-next slot="meta"></ha-icon-next>
+            </mwc-list-item>`;
+          })
        : ""}
      ${this.integration &&
      "integrations" in this.integration &&
@@ -150,7 +144,7 @@ class HaDomainIntegrations extends LitElement {
                </ha-integration-list-item>`
            )
        : ""}
-      ${(PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(this.domain)
+      ${this.domain === "zha" || this.domain === "zwave_js"
        ? html`<mwc-list-item
            graphic="medium"
            .domain=${this.domain}
@@ -171,9 +165,7 @@ class HaDomainIntegrations extends LitElement {
            />
            <span
              >${this.hass.localize(
-                `ui.panel.config.integrations.add_${
-                  this.domain as (typeof PROTOCOL_INTEGRATIONS)[number]
-                }_device`
+                `ui.panel.config.integrations.add_${this.domain}_device`
              )}</span
            >
            <ha-icon-next slot="meta"></ha-icon-next>
@@ -73,7 +73,6 @@ 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",
@@ -347,9 +346,7 @@ 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 !== "matter" ||
-                isDevVersion(this.hass.config.version))
+            : item.domain in integrationsWithPanel
            ? html`<a
                href=${`${integrationsWithPanel[item.domain]}?config_entry=${
                  item.entry_id
@@ -1,87 +0,0 @@
-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;
-  }
-}
@@ -1,22 +0,0 @@
-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;
-  }
-}
@@ -1,212 +0,0 @@
-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;
-      }
-    `,
-  ];
-}
@@ -1,58 +1,227 @@
-import { mdiMathLog, mdiServerNetwork } from "@mdi/js";
-import { customElement, property } from "lit/decorators";
+import "@material/mwc-button";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../../../components/ha-card";
 import {
-  HassRouterPage,
-  RouterOptions,
-} from "../../../../../layouts/hass-router-page";
-import { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
+  acceptSharedMatterDevice,
+  commissionMatterDevice,
+  matterSetThread,
+  matterSetWifi,
+} from "../../../../../data/matter";
+import "../../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
-
-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,
-  },
-];
+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";

@customElement("matter-config-panel")
-class MatterConfigRouter extends HassRouterPage {
+export class MatterConfigPanel extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;

-  @property() public narrow!: boolean;
+  @state() private _error?: 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 _curMatterDevices?: Set<string>;

-  protected updatePageEl(el): void {
-    el.route = this.routeTail;
-    el.hass = this.hass;
-    el.isWide = this.isWide;
-    el.narrow = this.narrow;
+  private get _canCommissionMatter() {
+    return this.hass.auth.external?.config.canCommissionMatter;
  }
-}

-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;
+      }
+    `,
+  ];
 }
@@ -1,11 +0,0 @@
-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: {},
-  });
-};
@@ -4,7 +4,6 @@ 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";
@@ -116,7 +115,7 @@ export class HaConfigLogs extends LitElement {
        this.hass.userData?.showAdvanced
          ? html`
              <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-                <ha-button
+                <mwc-button
                  slot="trigger"
                  .label=${this._logProviders.find(
                    (p) => p.key === this._selectedLogProvider
@@ -126,7 +125,7 @@ export class HaConfigLogs extends LitElement {
                    slot="trailingIcon"
                    .path=${mdiChevronDown}
                  ></ha-svg-icon>
-                </ha-button>
+                </mwc-button>
                ${this._logProviders.map(
                  (provider) => html`
                    <mwc-list-item
@@ -106,12 +106,7 @@ export class HassioNetwork extends LitElement {
        )}
        ${this._interface?.type === "wireless"
          ? html`
-              <ha-expansion-panel
-                .header=${this.hass.localize(
-                  "ui.panel.config.network.supervisor.wifi"
-                )}
-                outlined
-              >
+              <ha-expansion-panel header="Wi-Fi" outlined>
                ${this._interface?.wifi?.ssid
                  ? html`<p>
                      ${this.hass.localize(
@@ -152,11 +147,7 @@ export class HassioNetwork extends LitElement {
                                >
                                  <span>${ap.ssid}</span>
                                  <span slot="secondary">
-                                    ${ap.mac} -
-                                    ${this.hass.localize(
-                                      "ui.panel.config.network.supervisor.signal_strength"
-                                    )}:
-                                    ${ap.signal}
+                                    ${ap.mac} - Strength: ${ap.signal}
                                  </span>
                                </mwc-list-item>
                              `
@@ -220,9 +211,7 @@ export class HassioNetwork extends LitElement {
                              class="flex-auto"
                              type="password"
                              id="psk"
-                              .label=${this.hass.localize(
-                                "ui.panel.config.network.supervisor.wifi_password"
-                              )}
+                              label="Password"
                              version="wifi"
                              @value-changed=${this
                                ._handleInputValueChangedWifi}
@@ -3,7 +3,6 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
  addDays,
-  differenceInHours,
  endOfToday,
  endOfWeek,
  endOfYesterday,
@@ -16,19 +15,17 @@ import {
  UnsubscribeFunc,
 } from "home-assistant-js-websocket/dist/types";
 import { css, html, LitElement, PropertyValues } from "lit";
-import { property, query, state } from "lit/decorators";
-import { ensureArray } from "../../common/array/ensure-array";
+import { property, state } from "lit/decorators";
 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";
@@ -47,11 +44,7 @@ import {
  subscribeDeviceRegistry,
 } from "../../data/device_registry";
 import { subscribeEntityRegistry } from "../../data/entity_registry";
-import {
-  computeHistory,
-  HistoryResult,
-  subscribeHistory,
-} from "../../data/history";
+import { computeHistory, fetchDateWS } from "../../data/history";
 import "../../layouts/ha-app-layout";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
@@ -73,7 +66,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {

  @state() private _isLoading = false;

-  @state() private _stateHistory?: HistoryResult;
+  @state() private _stateHistory?;

  @state() private _ranges?: DateRangePickerRanges;

@@ -83,37 +76,18 @@ 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() - 1, 0, 0, 0);
+    start.setHours(start.getHours() - 2, 0, 0, 0);
    this._startDate = start;

    const end = new Date();
-    end.setHours(end.getHours() + 2, 0, 0, 0);
+    end.setHours(end.getHours() + 1, 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) => {
@@ -296,63 +270,24 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {

    if (entityIds.length === 0) {
      this._isLoading = false;
-      this._stateHistory = { line: [], timeline: [] };
+      this._stateHistory = [];
      return;
    }
+    try {
+      const dateHistory = await fetchDateWS(
+        this.hass,
+        this._startDate,
+        this._endDate,
+        entityIds
+      );

-    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._stateHistory = computeHistory(
+        this.hass,
+        dateHistory,
+        this.hass.localize
+      );
+    } finally {
      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;
    }
  }

@@ -563,7 +563,7 @@ export class HuiAreaCard
        --mdc-icon-button-size: 44px;
      }
      .on {
-        color: var(--state-light-active-color);
+        color: var(--state-light-color);
      }
    `;
  }
@@ -323,7 +323,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
    }
    if (stateObj.attributes.hvac_action) {
      const hvacAction = stateObj.attributes.hvac_action;
-      if (hvacAction in HVAC_ACTION_TO_MODE) {
+      if (["heating", "cooling", "drying", "fan"].includes(hvacAction)) {
        return stateColorCss(stateObj, HVAC_ACTION_TO_MODE[hvacAction]);
      }
      return undefined;
@@ -195,7 +195,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 (hvacAction in HVAC_ACTION_TO_MODE) {
+      if (["heating", "cooling", "drying", "fan"].includes(hvacAction)) {
        return stateColorCss(stateObj, HVAC_ACTION_TO_MODE[hvacAction]);
      }
      return undefined;
@@ -8,17 +8,18 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import "../../../components/chart/state-history-charts";
 import "../../../components/ha-card";
+import "../../../components/chart/state-history-charts";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 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";

@@ -40,7 +41,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {

  @state() private _config?: HistoryGraphCardConfig;

-  @state() private _error?: { code: string; message: string };
+  private _configEntities?: EntityConfig[];

  private _names: Record<string, string> = {};

@@ -48,12 +49,16 @@ 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._entityIds?.length || 1);
+    return this._config?.title
+      ? 2
+      : 0 + 2 * (this._configEntities?.length || 1);
  }

  public setConfig(config: HistoryGraphCardConfig): void {
@@ -65,12 +70,11 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
      throw new Error("You must include at least one entity");
    }

-    const configEntities = config.entities
+    this._configEntities = config.entities
      ? processConfigEntities(config.entities)
      : [];

-    this._entityIds = [];
-    configEntities.forEach((entity) => {
+    this._configEntities.forEach((entity) => {
      this._entityIds.push(entity.entity);
      if (entity.name) {
        this._names[entity.entity] = entity.name;
@@ -85,16 +89,16 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
  public connectedCallback() {
    super.connectedCallback();
    if (this.hasUpdated) {
-      this._subscribeHistory();
+      this._subscribeHistoryTimeWindow();
    }
  }

  public disconnectedCallback() {
    super.disconnectedCallback();
-    this._unsubscribeHistory();
+    this._unsubscribeHistoryTimeWindow();
  }

-  private _subscribeHistory() {
+  private _subscribeHistoryTimeWindow() {
    if (!isComponentLoaded(this.hass!, "history") || this._subscribed) {
      return;
    }
@@ -132,12 +136,17 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
    this._interval = window.setInterval(() => this._redrawGraph(), 1000 * 60);
  }

-  private _unsubscribeHistory() {
-    clearInterval(this._interval);
-    if (this._subscribed) {
-      this._subscribed.then((unsub) => unsub?.());
-      this._subscribed = undefined;
+  private _unsubscribeHistoryTimeWindow() {
+    if (!this._subscribed) {
+      return;
    }
+    clearInterval(this._interval);
+    this._subscribed.then((unsubscribe) => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      this._subscribed = undefined;
+    });
  }

  protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -168,11 +177,12 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {

    if (
      changedProps.has("_config") &&
-      (oldConfig?.entities !== this._config.entities ||
-        oldConfig?.hours_to_show !== this._config.hours_to_show)
+      (!this._subscribed ||
+        oldConfig?.entities !== this._config.entities ||
+        oldConfig?.hours_to_show !== this._hoursToShow)
    ) {
-      this._unsubscribeHistory();
-      this._subscribeHistory();
+      this._unsubscribeHistoryTimeWindow();
+      this._subscribeHistoryTimeWindow();
    }
  }

@@ -181,6 +191,10 @@ 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
@@ -188,25 +202,16 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
            "has-header": !!this._config.title,
          })}"
        >
-          ${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>
-              `}
+          <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>
    `;
@@ -330,11 +330,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
      }

      .light-button.state-on {
-        color: var(--state-light-active-color);
+        color: var(--state-light-color);
      }

      .light-button.state-unavailable {
-        color: var(--state-unavailable-color);
+        color: var(--state-icon-unavailable-color);
      }

      #info {
@@ -40,7 +40,7 @@ import {
  formatTimeWeekday,
 } from "../../../common/datetime/format_time";

-const DEFAULT_HOURS_TO_SHOW = 0;
+const DEFAULT_HOURS_TO_SHOW = 24;
@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._subscribeHistory();
+      this._subscribeHistoryTimeWindow();
    }
  }

  public disconnectedCallback() {
    super.disconnectedCallback();
-    this._unsubscribeHistory();
+    this._unsubscribeHistoryTimeWindow();
  }

-  private _subscribeHistory() {
+  private _subscribeHistoryTimeWindow() {
    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,21 +223,26 @@ class HuiMapCard extends LitElement implements LovelaceCard {
    });
  }

-  private _unsubscribeHistory() {
-    if (this._subscribed) {
-      this._subscribed.then((unsub) => unsub?.());
-      this._subscribed = undefined;
+  private _unsubscribeHistoryTimeWindow() {
+    if (!this._subscribed) {
+      return;
    }
+    this._subscribed.then((unsubscribe) => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      this._subscribed = undefined;
+    });
  }

  protected updated(changedProps: PropertyValues): void {
    if (this._configEntities?.length) {
      if (!this._subscribed || changedProps.has("_config")) {
-        this._unsubscribeHistory();
-        this._subscribeHistory();
+        this._unsubscribeHistoryTimeWindow();
+        this._subscribeHistoryTimeWindow();
      }
    } else {
-      this._unsubscribeHistory();
+      this._unsubscribeHistoryTimeWindow();
    }
    if (changedProps.has("_config")) {
      this._computePadding();
@@ -341,7 +346,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);
@@ -1,3 +1,4 @@
+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";
@@ -12,7 +13,6 @@ 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";
@@ -139,44 +139,42 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
    return imageUrl;
  }

-  private _computeStateColor = memoizeOne(
-    (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;
-          }
-        }
-        return rgb2hex(hsv2rgb(hsvColor));
-      }
-
-      // Fallback to state color
-      return stateColorCss(entity);
+  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;
+        }
+      }
+      return rgb2hex(hsv2rgb(hsvColor));
+    }
+
+    // Fallback to state color
+    return stateColorCss(entity);
+  });

  private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
    const domain = computeDomain(stateObj.entity_id);
@@ -1,7 +1,11 @@
+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";
@@ -28,52 +32,6 @@ 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
@@ -88,11 +46,76 @@ 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,
@@ -107,7 +130,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}
@@ -125,7 +148,9 @@ export class HuiButtonCardEditor
    fireEvent(this, "config-changed", { config });
  }

-  private _computeHelperCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeHelperCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    switch (schema.name) {
      case "tap_action":
      case "hold_action":
@@ -137,7 +162,9 @@ export class HuiButtonCardEditor
    }
  };

-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    switch (schema.name) {
      case "theme":
      case "tap_action":
@@ -1,7 +1,11 @@
+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";
@@ -25,38 +29,6 @@ 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
@@ -71,16 +43,58 @@ 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>
@@ -93,7 +107,9 @@ export class HuiEntityCardEditor
    fireEvent(this, "config-changed", { config });
  }

-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    if (schema.name === "entity") {
      return this.hass!.localize(
        "ui.panel.lovelace.editor.card.generic.entity"
@@ -1,11 +1,13 @@
+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";
@@ -37,56 +39,73 @@ export class HuiGenericEntityRowEditor
    this._config = config;
  }

-  private _schema = memoizeOne((entity: string, localize: LocalizeFunc) => {
-    const domain = computeDomain(entity);
+  private _schema = memoizeOne(
+    (
+      entity: string,
+      icon: string | undefined,
+      entityState: HassEntity,
+      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: {},
+      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,
+                },
+              },
            },
-            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}`
+                ),
+              })),
            },
          },
-        ],
-      },
-      {
-        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 schema = this._schema(this._config.entity, this.hass.localize);
+    const entityState = this.hass.states[this._config.entity];
+
+    const schema = this._schema(
+      this._config.entity,
+      this._config.icon,
+      entityState,
+      this.hass.localize
+    );

    return html`
      <ha-form
@@ -1,7 +1,11 @@
+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";
@@ -24,39 +28,6 @@ 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
@@ -71,16 +42,62 @@ 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>
@@ -91,7 +108,9 @@ export class HuiLightCardEditor
    fireEvent(this, "config-changed", { config: ev.detail.value });
  }

-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    switch (schema.name) {
      case "theme":
      case "hold_action":
@@ -1,5 +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,
@@ -11,6 +13,8 @@ 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";
@@ -34,55 +38,6 @@ 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
@@ -97,11 +52,74 @@ 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",
@@ -113,7 +131,7 @@ export class HuiSensorCardEditor
      <ha-form
        .hass=${this.hass}
        .data=${data}
-        .schema=${SCHEMA}
+        .schema=${schema}
        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
      ></ha-form>
@@ -126,7 +144,9 @@ export class HuiSensorCardEditor
    fireEvent(this, "config-changed", { config });
  }

-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    switch (schema.name) {
      case "theme":
        return `${this.hass!.localize(
@@ -1,8 +1,11 @@
+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";
@@ -87,9 +90,9 @@ export class HuiStatisticCardEditor
    if (!config || !config.period) {
      return config;
    }
-    for (const [periodKey, period] of Object.entries(periods)) {
+    for (const period of Object.values(periods)) {
      if (deepEqual(period, config.period)) {
-        return { ...config, period: periodKey };
+        return { ...config, period };
      }
    }
    return config;
@@ -97,7 +100,10 @@ export class HuiStatisticCardEditor

  private _schema = memoizeOne(
    (
-      selectedPeriodKey: string | undefined,
+      entity: string,
+      icon: string,
+      periodVal: any,
+      entityState: HassEntity,
      localize: LocalizeFunc,
      metadata?: StatisticsMetaData
    ) =>
@@ -124,22 +130,22 @@ export class HuiStatisticCardEditor
        {
          name: "period",
          required: true,
-          selector:
-            selectedPeriodKey &&
-            Object.keys(periods).includes(selectedPeriodKey)
-              ? {
-                  select: {
-                    multiple: false,
-                    options: Object.keys(periods).map((periodKey) => ({
-                      value: periodKey,
+          selector: Object.values(periods).includes(periodVal)
+            ? {
+                select: {
+                  multiple: false,
+                  options: Object.entries(periods).map(
+                    ([periodKey, period]) => ({
+                      value: period,
                      label:
                        localize(
                          `ui.panel.lovelace.editor.card.statistic.periods.${periodKey}`
                        ) || periodKey,
-                    })),
-                  },
-                }
-              : { object: {} },
+                    })
+                  ),
+                },
+              }
+            : { object: {} },
        },
        {
          type: "grid",
@@ -149,10 +155,13 @@ export class HuiStatisticCardEditor
            {
              name: "icon",
              selector: {
-                icon: {},
-              },
-              context: {
-                icon_entity: "entity",
+                icon: {
+                  placeholder: icon || entityState?.attributes.icon,
+                  fallbackPath:
+                    !icon && !entityState?.attributes.icon && entityState
+                      ? domainIcon(computeDomain(entity), entityState)
+                      : undefined,
+                },
              },
            },
            { name: "unit", selector: { text: {} } },
@@ -167,10 +176,15 @@ export class HuiStatisticCardEditor
      return html``;
    }

+    const entityState = this.hass.states[this._config.entity];
+
    const data = this._data(this._config);

    const schema = this._schema(
-      typeof data.period === "string" ? data.period : undefined,
+      this._config.entity,
+      this._config.icon,
+      data.period,
+      entityState,
      this.hass.localize,
      this._metadata
    );
@@ -198,14 +212,6 @@ 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 &&
@@ -221,14 +227,12 @@ 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 });
  }

@@ -14,8 +14,9 @@ import {
  string,
 } from "superstruct";
 import { fireEvent, HASSDomEvent } 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 { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
@@ -64,14 +65,16 @@ export class HuiTileCardEditor
  }

  private _schema = memoizeOne(
-    (localize: LocalizeFunc) =>
+    (entity: string, icon?: string, stateObj?: HassEntity) =>
      [
        { name: "entity", selector: { entity: {} } },
        {
          name: "",
          type: "expandable",
          iconPath: mdiPalette,
-          title: localize(`ui.panel.lovelace.editor.card.tile.appearance`),
+          title: this.hass!.localize(
+            `ui.panel.lovelace.editor.card.tile.appearance`
+          ),
          schema: [
            {
              name: "",
@@ -81,9 +84,14 @@ export class HuiTileCardEditor
                {
                  name: "icon",
                  selector: {
-                    icon: {},
+                    icon: {
+                      placeholder: icon || stateObj?.attributes.icon,
+                      fallbackPath:
+                        !icon && !stateObj?.attributes.icon && stateObj
+                          ? domainIcon(computeDomain(entity), stateObj)
+                          : undefined,
+                    },
                  },
-                  context: { icon_entity: "entity" },
                },
                {
                  name: "color",
@@ -110,7 +118,9 @@ export class HuiTileCardEditor
        {
          name: "",
          type: "expandable",
-          title: localize(`ui.panel.lovelace.editor.card.tile.actions`),
+          title: this.hass!.localize(
+            `ui.panel.lovelace.editor.card.tile.actions`
+          ),
          iconPath: mdiGestureTap,
          schema: [
            {
@@ -143,7 +153,11 @@ export class HuiTileCardEditor
      | HassEntity
      | undefined;

-    const schema = this._schema(this.hass!.localize);
+    const schema = this._schema(
+      this._config.entity,
+      this._config.icon,
+      stateObj
+    );

    if (this._subElementEditorConfig) {
      return html`
@@ -15,7 +15,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
 import { sortableStyles } from "../../../../resources/ha-sortable-style";
 import {
@@ -161,7 +160,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                  @action=${this._addFeature}
                  @closed=${stopPropagation}
                >
-                  <ha-button
+                  <mwc-button
                    slot="trigger"
                    outlined
                    .label=${this.hass!.localize(
@@ -169,7 +168,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                    )}
                  >
                    <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-                  </ha-button>
+                  </mwc-button>
                  ${this._supportedFeatureTypes.map(
                    (featureType) => html`<mwc-list-item .value=${featureType}>
                      <ha-svg-icon
@@ -1,6 +1,6 @@
+import { memoize } from "@fullcalendar/common";
 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 { entityId } from "../../../../common/structs/is-entity-id";
@@ -66,7 +66,7 @@ export class HuiWeatherForecastCardEditor
    return undefined;
  }

-  private _schema = memoizeOne(
+  private _schema = memoize(
    (entity: string, localize: LocalizeFunc, hasForecast?: boolean) =>
      [
        {
@@ -61,7 +61,7 @@ export class HuiCreateDialogHeaderFooter
                <ha-card
                  role="button"
                  tabindex="0"
-                  aria-labelledby=${"card-name-" + index}
+                  aria-labeledby=${"card-name-" + index}
                  outlined
                  .type=${headerFooter.type}
                  @click=${this._handleHeaderFooterPicked}
@@ -1,6 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-select";
@@ -16,7 +16,6 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceRow } from "./types";
-import type { HaSelect } from "../../../components/ha-select";

@customElement("hui-input-select-entity-row")
 class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
@@ -24,8 +23,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {

  @state() private _config?: EntitiesCardEntityConfig;

-  @query("ha-select") private _haSelect!: HaSelect;
-
  public setConfig(config: EntitiesCardEntityConfig): void {
    if (!config || !config.entity) {
      throw new Error("Entity must be specified");
@@ -38,22 +35,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
    return hasConfigOrEntityChanged(this, changedProps);
  }

-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass");
-      if (
-        this.hass &&
-        oldHass &&
-        this._config?.entity &&
-        this.hass.states[this._config.entity].attributes.options !==
-          oldHass.states[this._config.entity].attributes.options
-      ) {
-        this._haSelect.layoutOptions();
-      }
-    }
-  }
-
  protected render(): TemplateResult {
    if (!this.hass || !this._config) {
      return html``;
@@ -81,7 +62,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
          .label=${this._config.name || computeStateName(stateObj)}
          .value=${stateObj.state}
          .disabled=${
-            stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
+            stateObj.state === UNAVAILABLE /* UNKNWON state is allowed */
          }
          naturalMenuWidth
          @selected=${this._selectedChanged}
@@ -131,42 +131,38 @@ export class HuiGraphHeaderFooter

  public connectedCallback() {
    super.connectedCallback();
-    if (this.hasUpdated && this._config) {
-      this._subscribeHistory();
+    if (this.hasUpdated) {
+      this._subscribeHistoryTimeWindow();
    }
  }

  public disconnectedCallback() {
    super.disconnectedCallback();
-    this._unsubscribeHistory();
+    this._unsubscribeHistoryTimeWindow();
  }

-  private _subscribeHistory() {
-    if (
-      !isComponentLoaded(this.hass!, "history") ||
-      this._subscribed ||
-      !this._config
-    ) {
+  private _subscribeHistoryTimeWindow() {
+    if (!isComponentLoaded(this.hass!, "history") || this._subscribed) {
      return;
    }
    this._subscribed = subscribeHistoryStatesTimeWindow(
      this.hass!,
      (combinedHistory) => {
-        if (!this._subscribed || !this._config) {
+        if (!this._subscribed) {
          // Message came in before we had a chance to unload
          return;
        }
        this._coordinates =
          coordinatesMinimalResponseCompressedState(
-            combinedHistory[this._config.entity],
-            this._config.hours_to_show!,
+            combinedHistory[this._config!.entity],
+            this._config!.hours_to_show!,
            500,
-            this._config.detail!,
-            this._config.limits
+            this._config!.detail!,
+            this._config!.limits
          ) || [];
      },
-      this._config.hours_to_show!,
-      [this._config.entity]
+      this._config!.hours_to_show!,
+      [this._config!.entity]
    ).catch((err) => {
      this._subscribed = undefined;
      this._error = err;
@@ -189,12 +185,17 @@ export class HuiGraphHeaderFooter
    );
  }

-  private _unsubscribeHistory() {
+  private _unsubscribeHistoryTimeWindow() {
    clearInterval(this._interval);
-    if (this._subscribed) {
-      this._subscribed.then((unsub) => unsub?.());
-      this._subscribed = undefined;
+    if (!this._subscribed) {
+      return;
    }
+    this._subscribed.then((unsubscribe) => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+      this._subscribed = undefined;
+    });
  }

  protected updated(changedProps: PropertyValues) {
@@ -208,8 +209,8 @@ export class HuiGraphHeaderFooter
      !this._subscribed ||
      oldConfig.entity !== this._config.entity
    ) {
-      this._unsubscribeHistory();
-      this._subscribeHistory();
+      this._unsubscribeHistoryTimeWindow();
+      this._subscribeHistoryTimeWindow();
    }
  }

@@ -30,7 +30,6 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-button-menu";
-import "../../components/ha-button";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon-button";
 import { UNAVAILABLE } from "../../data/entity";
@@ -324,7 +323,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                    ></ha-icon-button>
                  `
                : html`
-                    <ha-button
+                    <mwc-button
                      slot="trigger"
                      .label=${this.narrow
                        ? ""
@@ -345,7 +344,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                        slot="trailingIcon"
                        .path=${mdiChevronDown}
                      ></ha-svg-icon>
-                    </ha-button>
+                    </mwc-button>
                  `
            }
            <mwc-list-item
@@ -721,6 +720,11 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
        font-weight: bold;
      }

+      ha-svg-icon[slot="icon"] {
+        margin-inline-start: 8px !important;
+        margin-inline-end: 8px !important;
+        direction: var(--direction);
+      }
      ha-svg-icon[slot="trailingIcon"] {
        margin-inline-start: 8px !important;
        margin-inline-end: 0px !important;
@@ -2,10 +2,7 @@ import { sanitizeUrl } from "@braintree/sanitize-url";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import {
-  protocolIntegrationPicked,
-  PROTOCOL_INTEGRATIONS,
-} from "../../common/integrations/protocolIntegrationPicked";
+import { protocolIntegrationPicked } from "../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../common/navigate";
 import {
  createSearchParam,
@@ -90,10 +87,6 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
    component: "zwave_js",
    redirect: "/config/zwave_js/add",
  },
-  add_matter_device: {
-    component: "matter",
-    redirect: "/config/matter/add",
-  },
  config_energy: {
    component: "energy",
    redirect: "/config/energy/dashboard",
@@ -317,11 +310,9 @@ class HaPanelMy extends LitElement {
    ) {
      this.hass.loadBackendTranslation("title", this._redirect.component);
      this._error = "no_component";
-      const component = this._redirect.component;
-      if (
-        (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(component)
-      ) {
+      if (["add_zwave_device", "add_zigbee_device"].includes(path)) {
        const params = extractSearchParamsObject();
+        const component = this._redirect.component;
        this.hass
          .loadFragmentTranslation("config")
          .then()
@@ -20,12 +20,6 @@ import "@formatjs/intl-datetimeformat/add-all-tz";
 import "proxy-polyfill";
 import "unfetch/polyfill";

-import ResizeObserver from "resize-observer-polyfill";
-
-if (!window.ResizeObserver) {
-  window.ResizeObserver = ResizeObserver;
-}
-
 // Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
 (function (arr) {
  arr.forEach((item) => {
@@ -135,9 +135,9 @@ documentContainer.innerHTML = `<custom-style>
      --state-alarm_control_panel-triggered-color: var(--red-color);
      --state-alert-off-color: var(--orange-color);
      --state-alert-on-color: var(--red-color);
-      --state-binary_sensor-active-color: var(--amber-color);
      --state-binary_sensor-battery-on-color: var(--red-color);
      --state-binary_sensor-carbon_monoxide-on-color: var(--red-color);
+      --state-binary_sensor-color: var(--amber-color);
      --state-binary_sensor-gas-on-color: var(--red-color);
      --state-binary_sensor-heat-on-color: var(--red-color);
      --state-binary_sensor-lock-on-color: var(--red-color);
@@ -1,21 +1,13 @@
 import "@material/mwc-list/mwc-list-item";
 import "../components/ha-select";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  TemplateResult,
-  PropertyValues,
-} from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/entity/state-badge";
 import { UNAVAILABLE } from "../data/entity";
 import { InputSelectEntity, setInputSelectOption } from "../data/input_select";
 import type { HomeAssistant } from "../types";
-import type { HaSelect } from "../components/ha-select";

@customElement("state-card-input_select")
 class StateCardInputSelect extends LitElement {
@@ -23,21 +15,6 @@ class StateCardInputSelect extends LitElement {

  @property() public stateObj!: InputSelectEntity;

-  @query("ha-select", true) private _haSelect!: HaSelect;
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("stateObj")) {
-      const oldState = changedProps.get("stateObj");
-      if (
-        oldState &&
-        this.stateObj.attributes.options !== oldState.attributes.options
-      ) {
-        this._haSelect.layoutOptions();
-      }
-    }
-  }
-
  protected render(): TemplateResult {
    return html`
      <state-badge .stateObj=${this.stateObj}></state-badge>
@@ -45,7 +22,7 @@ class StateCardInputSelect extends LitElement {
        .label=${computeStateName(this.stateObj)}
        .value=${this.stateObj.state}
        .disabled=${
-          this.stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
+          this.stateObj.state === UNAVAILABLE /* UNKNWON state is allowed */
        }
        naturalMenuWidth
        fixedMenuPosition
@@ -2,6 +2,7 @@ import type { PropertyValues } from "lit";
 import tinykeys from "tinykeys";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { mainWindow } from "../common/dom/get_main_window";
+import { HaSelect } from "../components/ha-select";
 import {
  QuickBarParams,
  showQuickBar,
@@ -133,21 +134,21 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
    }

    private _canOverrideAlphanumericInput(e: KeyboardEvent) {
-      const el = e.composedPath()[0] as Element;
+      const el = e.composedPath()[0];

-      if (el.tagName === "TEXTAREA") {
+      if (el instanceof HTMLTextAreaElement) {
        return false;
      }

-      if (el.parentElement?.tagName === "HA-SELECT") {
+      if (el instanceof Element && el.parentElement instanceof HaSelect) {
        return false;
      }

-      if (el.tagName !== "INPUT") {
+      if (!(el instanceof HTMLInputElement)) {
        return true;
      }

-      switch ((el as HTMLInputElement).type) {
+      switch (el.type) {
        case "button":
        case "checkbox":
        case "hidden":
@@ -488,8 +488,7 @@
      "history_charts": {
        "history_disabled": "History integration disabled",
        "loading_history": "Loading state history…",
-        "no_history_found": "No state history found.",
-        "error": "Unable to load history"
+        "no_history_found": "No state history found."
      },
      "statistics_charts": {
        "loading_statistics": "Loading statistics…",
@@ -906,6 +905,8 @@
          "entity_id": "Entity ID",
          "unit_of_measurement": "Unit of Measurement",
          "precipitation_unit": "Precipitation unit",
+          "precision": "Precision",
+          "precision_default": "Use default",
          "pressure_unit": "Barometric pressure unit",
          "temperature_unit": "Temperature unit",
          "visibility_unit": "Visibility unit",
@@ -972,7 +973,6 @@
          "enable_entity": "Enable",
          "open_device_settings": "Open device settings",
          "switch_as_x_confirm": "This switch will be hidden and a new {domain} will be added. Your existing configurations using the switch will continue to work.",
-          "switch_as_x_remove_confirm": "This {domain} will be removed and the original switch will be visible again. Your existing configurations using the {domain} will no longer work!",
          "enabled_description": "Disabled entities will not be added to Home Assistant.",
          "enabled_delay_confirm": "The enabled entities will be added to Home Assistant in {delay} seconds",
          "enabled_restart_confirm": "Restart Home Assistant to finish enabling the entities",
@@ -1520,30 +1520,30 @@
              "from": {
                "header": "Configure grid consumption",
                "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",
-                "entity_para": "Pick a sensor which measures grid consumption in either of {unit}.",
-                "energy_stat": "Consumed Energy",
+                "energy_stat": "Consumed Energy (kWh)",
                "cost_para": "Select how Home Assistant should keep track of the costs of the consumed energy.",
                "no_cost": "Do not track costs",
                "cost_stat": "Use an entity tracking the total costs",
-                "cost_stat_input": "Entity with the total costs",
+                "cost_stat_input": "Total Costs Entity",
                "cost_entity": "Use an entity with current price",
                "cost_entity_input": "Entity with the current price",
                "cost_number": "Use a static price",
-                "cost_number_input": "Price"
+                "cost_number_input": "Price per kWh",
+                "cost_number_suffix": "{currency}/kWh"
              },
              "to": {
                "header": "Configure grid production",
                "paragraph": "Grid production is the energy that flows from your solar panels to the grid.",
-                "entity_para": "Pick a sensor which measures grid production in either of {unit}.",
-                "energy_stat": "Energy returned to the grid",
+                "energy_stat": "Energy returned to the grid (kWh)",
                "cost_para": "Do you get money back when you return energy to the grid?",
                "no_cost": "I do not get money back",
                "cost_stat": "Use an entity tracking the total recieved money",
-                "cost_stat_input": "Entity with the total compensation",
+                "cost_stat_input": "Total Compensation Entity",
                "cost_entity": "Use an entity with current rate",
                "cost_entity_input": "Entity with the current rate",
                "cost_number": "Use a static rate",
-                "cost_number_input": "Rate"
+                "cost_number_input": "Rate per kWh",
+                "cost_number_suffix": "{currency}/kWh"
              }
            }
          },
@@ -1560,8 +1560,7 @@
            "stat_predicted_production": "Prediction of your solar energy production",
            "dialog": {
              "header": "Configure solar panels",
-              "entity_para": "Pick a sensor which measures solar energy production in either of {unit}.",
-              "solar_production_energy": "Solar production energy",
+              "solar_production_energy": "Solar production energy (kWh)",
              "solar_production_forecast": "Solar production forecast",
              "solar_production_forecast_description": "Adding solar production forecast information will allow you to quickly see your expected production for today.",
              "dont_forecast_production": "Don't forecast production",
@@ -1579,9 +1578,8 @@
            "add_battery_system": "Add battery system",
            "dialog": {
              "header": "Configure battery system",
-              "entity_para": "Pick sensors which measure energy going in to and out of the battery in either of {unit}.",
-              "energy_into_battery": "Energy going in to the battery",
-              "energy_out_of_battery": "Energy coming out of the battery"
+              "energy_into_battery": "Energy going in to the battery (kWh)",
+              "energy_out_of_battery": "Energy coming out of the battery (kWh)"
            }
          },
          "gas": {
@@ -1594,18 +1592,18 @@
            "add_gas_source": "Add gas source",
            "dialog": {
              "header": "Configure gas consumption",
-              "paragraph": "Gas consumption is measured either as the volume of gas that flows to your home or as the amount of energy contained in the gas.",
-              "entity_para": "Pick a sensor which measures gas consumption in either of {unit}.",
-              "note_para": "Note: It is not possible to add both sensors measuring a volume of gas and sensors measuring the amount of energy contained in the gas.",
-              "cost_para": "Select how Home Assistant should keep track of the costs of the consumed gas.",
-              "no_cost": "[%key:ui::panel::config::energy::grid::flow_dialog::from::no_cost%]",
-              "cost_stat": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_stat%]",
-              "cost_stat_input": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_stat_input%]",
-              "cost_entity": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_entity%]",
-              "cost_entity_input": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_entity_input%]",
-              "cost_number": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_number%]",
-              "cost_number_input": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_number%]",
-              "gas_usage": "Gas usage"
+              "paragraph": "Gas consumption is the volume of gas that flows to your home.",
+              "energy_stat": "Consumed Energy (m³)",
+              "cost_para": "Select how Home Assistant should keep track of the costs of the consumed energy.",
+              "no_cost": "Do not track costs",
+              "cost_stat": "Use an entity tracking the total costs",
+              "cost_stat_input": "Total Costs Entity",
+              "cost_entity": "Use an entity with current price",
+              "cost_entity_input": "Entity with the current price per {unit}",
+              "cost_number": "Use a static price",
+              "cost_number_input": "Price per {unit}",
+              "gas_usage": "Gas usage",
+              "m3_or_kWh": "ft³, m³, Wh, kWh, MWh or GJ"
            }
          },
          "water": {
@@ -1619,16 +1617,16 @@
            "dialog": {
              "header": "Configure water consumption",
              "paragraph": "Water consumption is the volume of water that flows to your home.",
-              "entity_para": "Pick a sensor which measures gas consumption in either of {unit}.",
+              "energy_stat": "Consumed water (m³ or gl)",
              "cost_para": "Select how Home Assistant should keep track of the costs of the consumed water.",
-              "no_cost": "[%key:ui::panel::config::energy::grid::flow_dialog::from::no_cost%]",
-              "cost_stat": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_stat%]",
-              "cost_stat_input": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_stat_input%]",
-              "cost_entity": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_entity%]",
-              "cost_entity_input": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_entity_input%]",
-              "cost_number": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_number%]",
-              "cost_number_input": "[%key:ui::panel::config::energy::grid::flow_dialog::from::cost_number%]",
-              "water_usage": "Water usage"
+              "no_cost": "Do not track costs",
+              "cost_stat": "Use an entity tracking the total costs",
+              "cost_stat_input": "Total Costs Entity",
+              "cost_entity": "Use an entity with current price",
+              "cost_entity_input": "Entity with the current price per m³ or gl",
+              "cost_number": "Use a static price",
+              "cost_number_input": "Price per m³ or gl",
+              "water_usage": "Water usage (m³ or gl)"
            }
          },
          "device_consumption": {
@@ -1641,8 +1639,8 @@
            "add_device": "Add device",
            "dialog": {
              "header": "Add a device",
-              "device_consumption_energy": "Device consumption energy",
-              "selected_stat_intro": "Select the energy sensor that measures the device's energy usage in either of {unit}."
+              "device_consumption_energy": "Device consumption energy (kWh)",
+              "selected_stat_intro": "Select the entity that represents the device energy usage."
            }
          }
        },
@@ -1703,14 +1701,7 @@
                "save_button": "Save",
                "currency": "Currency",
                "edit_location": "Edit location",
-                "edit_location_description": "Location can be changed in zone settings",
-                "update_units_label": "Update the unit of all sensors",
-                "update_units_text_1": "The unit system has been changed, and the unit of some sensors like distance and speed can be updated.",
-                "update_units_text_2": "The unit of sensors where the unit has been edited from the UI or which can't be edited from the UI will not be updated.",
-                "update_units_text_3": "Note: The unit of temperature sensors is always updated.",
-                "update_units_confirm_title": "The unit of sensors will be updated",
-                "update_units_confirm_text": "The unit system has been changed, and the unit of some sensors like distance and speed will be updated.",
-                "update_units_confirm_update": "Update"
+                "edit_location_description": "Location can be changed in zone settings"
              }
            }
          }
@@ -3001,7 +2992,6 @@
          "search_brand": "Search for a brand name",
          "add_zwave_js_device": "Add Z-Wave device",
          "add_zha_device": "Add Zigbee device",
-          "add_matter_device": "Add Matter device",
          "disable": {
            "show_disabled": "Show disabled integrations",
            "disabled_integrations": "{number} disabled",
@@ -3115,10 +3105,8 @@
            "could_not_load": "Config flow could not be loaded",
            "not_loaded": "The integration could not be loaded, try to restart Home Assistant.",
            "supported_brand_flow": "Support for {supported_brand} devices is provided by {flow_domain_name}. Do you want to continue?",
-            "missing_zwave_zigbee_title": "{integration} is not setup",
            "missing_zwave_zigbee": "To add a {brand} device, you first need {supported_hardware_link} and the {integration} integration set up. If you already have the hardware then you can proceed with the setup of {integration}.",
-            "missing_matter": "To add a {brand} device, you first need the {integration} integration and {supported_hardware_link}. Do you want to proceed with the setup of {integration}?",
-            "matter_mobile_app": "You need to use the Home Assistant Companion app on your mobile phone to commission Matter devices.",
+            "missing_zwave_zigbee_title": "{integration} is not setup",
            "supported_hardware": "supported hardware",
            "proceed": "Proceed"
          }
@@ -3690,12 +3678,9 @@
            "title": "Configure network interfaces",
            "connected_to": "Connected to {ssid}",
            "scan_ap": "Scan for access points",
-            "signal_strength": "Signal strength",
            "open": "Open",
            "wep": "WEP",
            "wpa": "wpa-psk",
-            "wifi": "Wi-Fi",
-            "wifi_password": "Wi-Fi password",
            "warning": "If you are changing the Wi-Fi, IP or gateway addresses, you might lose the connection!",
            "static": "Static",
            "dhcp": "DHCP",
@@ -5390,12 +5375,9 @@
        "title": "Network settings",
        "connected_to": "Connected to {ssid}",
        "scan_ap": "Scan for access points",
-        "signal_strength": "[%key:ui::panel::config::network::supervisor::signal_strength%]",
        "open": "Open",
        "wep": "WEP",
        "wpa": "wpa-psk",
-        "wifi": "[%key:ui::panel::config::network::supervisor::wifi%]",
-        "wifi_password": "[%key:ui::panel::config::network::supervisor::wifi_password%]",
        "warning": "If you are changing the Wi-Fi, IP or gateway addresses, you might lose the connection!",
        "static": "Static",
        "dhcp": "DHCP",
Author	SHA1	Message	Date
Joakim Sørensen	d60639f99d	Update .devcontainer.json	2023-01-29 10:14:40 +01:00
ludeeus	693b621dd5	Restructure devcontainer	2023-01-29 09:12:41 +00:00