Update .devcontainer.json

.devcontainer.json

@@ -1,13 +1,20 @@
 {
   "name": "Home Assistant Frontend",
-  "build": {
+  "image": "mcr.microsoft.com/devcontainers/python:0-3.10",
-    "dockerfile": "Dockerfile",
-    "context": ".."
-  },
   "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": {

.devcontainer/Dockerfile

@@ -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"

.eslintrc.json

@@ -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-template-map": "off"
-    "lit/no-native-attributes": "warn",
-    "lit/no-this-assign-in-render": "warn",
-    "lit/prefer-nothing": "warn",
-    "lit-a11y/click-events-have-key-events": ["off"],
-    "lit-a11y/no-autofocus": "off",
-    "lit-a11y/alt-text": "warn",
-    "lit-a11y/anchor-is-valid": "warn",
-    "lit-a11y/role-has-required-aria-attrs": "warn"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

.github/dependabot.yml

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

.github/workflows/cast_deployment.yaml

@@ -33,7 +33,9 @@ jobs:
           cache: yarn
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
 
       - name: Build Cast
         run: ./node_modules/.bin/gulp build-cast
@@ -69,7 +71,9 @@ jobs:
           cache: yarn
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
 
       - name: Build Cast
         run: ./node_modules/.bin/gulp build-cast
@@ -83,4 +87,4 @@ jobs:
           args: deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -15,13 +15,8 @@ env:
   NODE_OPTIONS: --max_old_space_size=6144
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
 jobs:
   lint:
-    name: Lint and check format
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -32,19 +27,20 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
-      - name: Check for duplicate dependencies
+        env:
-        run: yarn dedupe --check
+          CI: true
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Run eslint
-        run: yarn run lint:eslint --quiet
+        run: yarn run lint:eslint
       - name: Run tsc
         run: yarn run lint:types
       - name: Run prettier
         run: yarn run lint:prettier
+      - name: Check for duplicate dependencies
+        run: yarn dedupe --check
   test:
-    name: Run tests
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -55,15 +51,16 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
       - name: Build resources
         run: ./node_modules/.bin/gulp build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
-    name: Build frontend
-    needs: [lint, test]
     runs-on: ubuntu-latest
+    needs: [lint, test]
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v3.3.0
@@ -73,15 +70,16 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
       - name: Build Application
         run: ./node_modules/.bin/gulp build-app
         env:
           IS_TEST: "true"
   supervisor:
-    name: Build supervisor
-    needs: [lint, test]
     runs-on: ubuntu-latest
+    needs: [lint, test]
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v3.3.0
@@ -91,7 +89,9 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
       - name: Build Application
         run: ./node_modules/.bin/gulp build-hassio
         env:

.github/workflows/demo_deployment.yaml

@@ -34,7 +34,9 @@ jobs:
           cache: yarn
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
 
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
@@ -70,7 +72,9 @@ jobs:
           cache: yarn
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
 
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
@@ -84,4 +88,4 @@ jobs:
           args: deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -26,7 +26,9 @@ jobs:
           cache: yarn
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
 
       - name: Build Gallery
         run: ./node_modules/.bin/gulp build-gallery

.github/workflows/design_preview.yaml

@@ -31,7 +31,9 @@ jobs:
           cache: yarn
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
 
       - name: Build Gallery
         run: ./node_modules/.bin/gulp build-gallery

build-scripts/bundle.js

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

demo/src/ha-demo.ts

@@ -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";
@@ -71,7 +71,6 @@ class HaDemo extends HomeAssistantAppEl {
         entity_category: null,
         has_entity_name: false,
         unique_id: "co2_intensity",
-        options: null,
       },
       {
         config_entry_id: "co2signal",
@@ -87,7 +86,6 @@ class HaDemo extends HomeAssistantAppEl {
         entity_category: null,
         has_entity_name: false,
         unique_id: "grid_fossil_fuel_percentage",
-        options: null,
       },
     ]);
 

demo/src/stubs/recorder.ts

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

gallery/src/pages/components/ha-alert.markdown

@@ -156,6 +156,18 @@ The `title ` option should not be used without a description.
 
 *Documentation coming soon*
 
+**Right to left**
+
+<ha-alert alert-type="success" rtl>
+  This is an info alert — check it out!
+</ha-alert>
+
+```html
+<ha-alert alert-type="success" rtl>
+  This is an info alert — check it out!
+</ha-alert>
+```
+
 ### API
 **Properties/Attributes**
 

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

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

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

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

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

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

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

@@ -138,10 +138,7 @@ export class DialogHassioNetwork
         )}
         ${this._interface?.type === "wireless"
           ? html`
-              <ha-expansion-panel
+              <ha-expansion-panel header="Wi-Fi" outlined>
-                .header=${this.supervisor.localize("dialog.network.wifi")}
-                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} -
+                                    ${ap.mac} - Strength: ${ap.signal}
-                                    ${this.supervisor.localize(
-                                      "dialog.network.signal_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(
+                              label="Password"
-                                "dialog.network.wifi_password"
-                              )}
                               version="wifi"
                               @value-changed=${this
                                 ._handleInputValueChangedWifi}

lint-staged.config.js

@@ -5,5 +5,5 @@ module.exports = {
     'printf "%s\n" "Translation files should not be added or modified here. Instead, make the necessary modifications in src/translations/en.json. Other languages are managed externally. Please see https://developers.home-assistant.io/docs/translations/ for details." ' +
     files.join(" ") +
     " >&2 && exit 1",
-  "yarn.lock": () => "yarn dedupe",
+  "/yarn.lock": () => "yarn dedupe",
 };

package.json

@@ -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.1",
+    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^6.2.1",
+    "@codemirror/commands": "^6.1.3",
-    "@codemirror/language": "^6.6.0",
+    "@codemirror/language": "^6.4.0",
     "@codemirror/legacy-modes": "^6.3.1",
     "@codemirror/search": "^6.2.3",
     "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.9.0",
+    "@codemirror/view": "^6.7.1",
-    "@formatjs/intl-datetimeformat": "^6.4.3",
+    "@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-numberformat": "^7.2.5",
-    "@formatjs/intl-pluralrules": "^5.1.8",
+    "@formatjs/intl-pluralrules": "^4.1.5",
-    "@formatjs/intl-relativetimeformat": "^11.1.8",
+    "@formatjs/intl-relativetimeformat": "^9.3.2",
-    "@fullcalendar/core": "^6.1.4",
+    "@fullcalendar/common": "5.9.0",
-    "@fullcalendar/daygrid": "^6.1.4",
+    "@fullcalendar/core": "5.9.0",
-    "@fullcalendar/interaction": "^6.1.4",
+    "@fullcalendar/daygrid": "5.9.0",
-    "@fullcalendar/list": "^6.1.4",
+    "@fullcalendar/interaction": "5.9.0",
-    "@fullcalendar/timegrid": "^6.1.4",
+    "@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,57 +88,55 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "^23.3.7",
+    "@vaadin/combo-box": "^23.3.5",
-    "@vaadin/vaadin-themable-mixin": "^23.3.7",
+    "@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.8",
+    "@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.4.1",
+    "comlink": "^4.3.1",
-    "core-js": "^3.28.0",
+    "core-js": "^3.15.2",
     "cropperjs": "^1.5.13",
     "date-fns": "^2.29.3",
-    "date-fns-tz": "^2.0.0",
+    "date-fns-tz": "^1.3.7",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.6.2",
     "google-timezones-json": "^1.0.2",
     "hammerjs": "^2.0.8",
-    "hls.js": "^1.3.3",
+    "hls.js": "^1.3.1",
     "home-assistant-js-websocket": "^8.0.1",
-    "idb-keyval": "^6.2.0",
+    "idb-keyval": "^5.1.3",
-    "intl-messageformat": "^10.3.0",
+    "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.2.12",
+    "marked": "^4.0.12",
     "memoize-one": "^6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
     "punycode": "^2.3.0",
-    "qr-scanner": "^1.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.2",
+    "rrule": "^2.7.1",
-    "sortablejs": "^1.15.0",
+    "sortablejs": "^1.14.0",
     "superstruct": "^1.0.3",
-    "tinykeys": "^1.4.0",
+    "tinykeys": "^1.1.3",
-    "tsparticles-engine": "^2.9.3",
+    "tsparticles": "^1.34.0",
-    "tsparticles-preset-links": "^2.9.3",
+    "unfetch": "^4.1.0",
-    "unfetch": "^5.0.0",
+    "vis-data": "^7.1.2",
-    "vis-data": "^7.1.4",
+    "vis-network": "^8.5.4",
-    "vis-network": "^9.1.2",
+    "vue": "^2.6.12",
-    "vue": "^2.7.14",
+    "vue2-daterange-picker": "^0.5.1",
-    "vue2-daterange-picker": "^0.6.8",
     "weekstart": "^1.1.0",
-    "wicg-inert": "^3.1.2",
     "workbox-cacheable-response": "^6.5.4",
     "workbox-core": "^6.5.4",
     "workbox-expiration": "^6.5.4",
@@ -147,56 +146,55 @@
     "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-object-rest-spread": "^7.20.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
+    "@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",
+    "@koa/cors": "^3.1.0",
-    "@octokit/auth-oauth-device": "^4.0.4",
+    "@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",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
     "@types/marked": "^4",
-    "@types/mocha": "^10",
+    "@types/mocha": "^8",
     "@types/qrcode": "^1.5.0",
     "@types/sortablejs": "^1",
     "@types/tar": "^6",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.0",
-    "chai": "^4.3.7",
+    "chai": "^4.3.4",
     "del": "^7.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-plugin-disable": "^2.0.3",
+    "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-lit": "^1.8.2",
+    "eslint-plugin-lit": "^1.6.1",
-    "eslint-plugin-lit-a11y": "^2.3.0",
     "eslint-plugin-unused-imports": "^1.1.5",
     "eslint-plugin-wc": "^1.4.0",
     "fancy-log": "^2.0.0",
@@ -204,25 +202,25 @@
     "glob": "^8.1.0",
     "gulp": "^4.0.2",
     "gulp-flatmap": "^1.0.2",
-    "gulp-json-transform": "^0.4.8",
+    "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^2.1.2",
     "gulp-rename": "^2.0.0",
-    "gulp-zopfli-green": "^6.0.1",
+    "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.1",
+    "lint-staged": "^13.1.0",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
-    "magic-string": "^0.29.0",
+    "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
-    "merge-stream": "^2.0.0",
+    "merge-stream": "^1.0.1",
-    "mocha": "^10.2.0",
+    "mocha": "^8.4.0",
     "object-hash": "^3.0.0",
-    "open": "^8.4.1",
+    "open": "^8.4.0",
     "pinst": "^3.0.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.3",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
@@ -230,24 +228,25 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "serve": "^11.3.2",
     "sinon": "^15.0.1",
-    "source-map-url": "^0.4.1",
+    "source-map-url": "^0.4.0",
-    "systemjs": "^6.13.0",
+    "systemjs": "^6.3.2",
-    "tar": "^6.1.13",
+    "tar": "^6.1.11",
-    "terser-webpack-plugin": "^5.3.6",
+    "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": {

pyproject.toml

@@ -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"

src/common/config/version.ts

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

src/common/datetime/first_weekday.ts

@@ -1,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",

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

@@ -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);

src/common/entity/compute_state_display.ts

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

src/common/integrations/protocolIntegrationPicked.ts

@@ -4,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);
   }
 };

src/common/number/format_number.ts

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

src/common/translations/localize.ts

@@ -65,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
   }
 };

src/common/util/select-unit.ts

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

src/components/chart/ha-chart-base.ts

@@ -233,11 +233,7 @@ export default class HaChartBase extends LitElement {
       {
         id: "afterRenderHook",
         afterRender: (chart) => {
-          const change = chart.height - (this._chartHeight ?? 0);
+          this._chartHeight = chart.height;
-          if (!this._chartHeight || change > 0 || change < -12) {
-            // hysteresis to prevent infinite render loops
-            this._chartHeight = chart.height;
-          }
         },
         legend: {
           ...this.options?.plugins?.legend,

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

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

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

@@ -19,7 +19,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @property() public names?: 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)

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

@@ -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">

src/components/chart/statistics-chart.ts

@@ -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;
 

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

@@ -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 {

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

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

src/components/entity/state-badge.ts

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

src/components/ha-alert.ts

@@ -37,10 +37,13 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
+  @property({ type: Boolean }) public rtl = false;
+
   public render() {
     return html`
       <div
         class="issue-type ${classMap({
+          rtl: this.rtl,
           [this.alertType]: true,
         })}"
         role="alert"
@@ -81,6 +84,9 @@ class HaAlert extends LitElement {
       padding: 8px;
       display: flex;
     }
+    .issue-type.rtl {
+      flex-direction: row-reverse;
+    }
     .issue-type::after {
       position: absolute;
       top: 0;
@@ -98,12 +104,15 @@ class HaAlert extends LitElement {
     .icon.no-title {
       align-self: center;
     }
+    .issue-type.rtl > .content {
+      flex-direction: row-reverse;
+      text-align: right;
+    }
     .content {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      text-align: var(--float-start);
     }
     .action {
       z-index: 1;
@@ -115,9 +124,10 @@ class HaAlert extends LitElement {
       word-break: break-word;
       margin-left: 8px;
       margin-right: 0;
-      margin-inline-start: 8px;
+    }
-      margin-inline-end: 0;
+    .issue-type.rtl > .content > .main-content {
-      direction: var(--direction);
+      margin-left: 0;
+      margin-right: 8px;
     }
     .title {
       margin-top: 2px;

src/components/ha-blueprint-picker.ts

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

src/components/ha-button.ts

@@ -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;
-  }
-}

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

@@ -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);
-      }
     `,
   ];
 }

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

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

src/components/ha-combo-box.ts

@@ -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();

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

@@ -24,7 +24,7 @@ export class HaDialogDatePicker extends LitElement {
   @state() private _value?: string;
 
   public async showDialog(params: datePickerDialogParams): Promise<void> {
-    // app-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;

src/components/ha-dialog.ts

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

src/components/ha-file-upload.ts

@@ -75,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"

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

@@ -1,33 +1,22 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-alert";
 import "../ha-selector/ha-selector";
+import "./ha-form-boolean";
+import "./ha-form-constant";
+import "./ha-form-float";
+import "./ha-form-grid";
+import "./ha-form-expandable";
+import "./ha-form-integer";
+import "./ha-form-multi_select";
+import "./ha-form-positive_time_period_dict";
+import "./ha-form-select";
+import "./ha-form-string";
 import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
 
-const LOAD_ELEMENTS = {
-  boolean: () => import("./ha-form-boolean"),
-  constant: () => import("./ha-form-constant"),
-  float: () => import("./ha-form-float"),
-  grid: () => import("./ha-form-grid"),
-  expandable: () => import("./ha-form-expandable"),
-  integer: () => import("./ha-form-integer"),
-  multi_select: () => import("./ha-form-multi_select"),
-  positive_time_period_dict: () =>
-    import("./ha-form-positive_time_period_dict"),
-  select: () => import("./ha-form-select"),
-  string: () => import("./ha-form-string"),
-};
-
 const getValue = (obj, item) =>
   obj ? (!item.name ? obj : obj[item.name]) : null;
 
@@ -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">

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

@@ -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}
+        .fallbackPath=${this.selector.icon?.fallbackPath}
-        .placeholder=${this.selector.icon?.placeholder ?? placeholder}
+        .placeholder=${this.selector.icon?.placeholder}
         @value-changed=${this._valueChanged}
       ></ha-icon-picker>
     `;

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

@@ -8,7 +8,7 @@ import { getSignedPath } from "../../data/auth";
 import {
   MediaClassBrowserSettings,
   MediaPickedEvent,
-  MediaPlayerEntityFeature,
+  SUPPORT_BROWSE_MEDIA,
 } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
@@ -80,8 +80,7 @@ export class HaMediaSelector extends LitElement {
 
     const supportsBrowse =
       !this.value?.entity_id ||
-      (stateObj &&
+      (stateObj && supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA));
-        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
     return html`<ha-entity-picker
         .hass=${this.hass}

src/components/ha-textarea.ts

@@ -8,12 +8,6 @@ import { customElement, property } from "lit/decorators";
 export class HaTextArea extends TextAreaBase {
   @property({ type: Boolean, reflect: true }) autogrow = false;
 
-  firstUpdated() {
-    super.firstUpdated();
-
-    this.setAttribute("dir", document.dir);
-  }
-
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (this.autogrow && changedProperties.has("value")) {
@@ -53,10 +47,6 @@ export class HaTextArea extends TextAreaBase {
         margin-top: 16px;
         margin-bottom: 16px;
       }
-      :host([dir="rtl"]) .mdc-floating-label {
-        right: 16px;
-        left: initial;
-      }
     `,
   ];
 }

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

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

src/data/alarm_control_panel.ts

@@ -3,15 +3,6 @@ import { HomeAssistant } from "../types";
 export const FORMAT_TEXT = "text";
 export const FORMAT_NUMBER = "number";
 
-export const enum AlarmControlPanelEntityFeature {
-  ARM_HOME = 1,
-  ARM_AWAY = 2,
-  ARM_NIGHT = 4,
-  TRIGGER = 8,
-  ARM_CUSTOM_BYPASS = 16,
-  ARM_VACATION = 32,
-}
-
 export const callAlarmAction = (
   hass: HomeAssistant,
   entity: string,

src/data/blueprint.ts

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

src/data/energy.ts

@@ -406,28 +406,24 @@ const getEnergyData = async (
   };
 
   const stats = {
-    ...(energyStatIds.length
+    ...(await fetchStatistics(
-      ? await fetchStatistics(
+      hass!,
-          hass!,
+      startMinHour,
-          startMinHour,
+      end,
-          end,
+      energyStatIds,
-          energyStatIds,
+      period,
-          period,
+      energyUnits,
-          energyUnits,
+      ["sum"]
-          ["sum"]
+    )),
-        )
+    ...(await fetchStatistics(
-      : {}),
+      hass!,
-    ...(waterStatIds.length
+      startMinHour,
-      ? await fetchStatistics(
+      end,
-          hass!,
+      waterStatIds,
-          startMinHour,
+      period,
-          end,
+      waterUnits,
-          waterStatIds,
+      ["sum"]
-          period,
+    )),
-          waterUnits,
-          ["sum"]
-        )
-      : {}),
   };
 
   let statsCompare;
@@ -445,28 +441,24 @@ const getEnergyData = async (
     endCompare = addMilliseconds(start, -1);
 
     statsCompare = {
-      ...(energyStatIds.length
+      ...(await fetchStatistics(
-        ? await fetchStatistics(
+        hass!,
-            hass!,
+        compareStartMinHour,
-            compareStartMinHour,
+        endCompare,
-            endCompare,
+        energyStatIds,
-            energyStatIds,
+        period,
-            period,
+        energyUnits,
-            energyUnits,
+        ["sum"]
-            ["sum"]
+      )),
-          )
+      ...(await fetchStatistics(
-        : {}),
+        hass!,
-      ...(waterStatIds.length
+        compareStartMinHour,
-        ? await fetchStatistics(
+        endCompare,
-            hass!,
+        waterStatIds,
-            compareStartMinHour,
+        period,
-            endCompare,
+        waterUnits,
-            waterStatIds,
+        ["sum"]
-            period,
+      )),
-            waterUnits,
-            ["sum"]
-          )
-        : {}),
     };
   }
 

src/data/entity_registry.ts

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

src/data/history.ts

@@ -117,7 +117,7 @@ export const fetchDateWS = (
 
 export const subscribeHistory = (
   hass: HomeAssistant,
-  callbackFunction: (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
+    const purgeBeforePythonTime =
-      ? (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000
+      (new Date().getTime() - 60 * 60 * this.hoursToShow * 1000) / 1000;
-      : undefined;
     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
         );

src/data/matter.ts

@@ -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,

src/data/media-player.ts

@@ -76,28 +76,23 @@ export interface MediaPlayerEntity extends HassEntityBase {
     | "unknown";
 }
 
-export const enum MediaPlayerEntityFeature {
+export const SUPPORT_PAUSE = 1;
-  PAUSE = 1,
+export const SUPPORT_SEEK = 2;
-  SEEK = 2,
+export const SUPPORT_VOLUME_SET = 4;
-  VOLUME_SET = 4,
+export const SUPPORT_VOLUME_MUTE = 8;
-  VOLUME_MUTE = 8,
+export const SUPPORT_PREVIOUS_TRACK = 16;
-  PREVIOUS_TRACK = 16,
+export const SUPPORT_NEXT_TRACK = 32;
-  NEXT_TRACK = 32,
+export const SUPPORT_TURN_ON = 128;
-
+export const SUPPORT_TURN_OFF = 256;
-  TURN_ON = 128,
+export const SUPPORT_PLAY_MEDIA = 512;
-  TURN_OFF = 256,
+export const SUPPORT_VOLUME_BUTTONS = 1024;
-  PLAY_MEDIA = 512,
+export const SUPPORT_SELECT_SOURCE = 2048;
-  VOLUME_BUTTONS = 1024,
+export const SUPPORT_STOP = 4096;
-  SELECT_SOURCE = 2048,
+export const SUPPORT_PLAY = 16384;
-  STOP = 4096,
+export const SUPPORT_REPEAT_SET = 262144;
-  CLEAR_PLAYLIST = 8192,
+export const SUPPORT_SELECT_SOUND_MODE = 65536;
-  PLAY = 16384,
+export const SUPPORT_SHUFFLE_SET = 32768;
-  SHUFFLE_SET = 32768,
+export const SUPPORT_BROWSE_MEDIA = 131072;
-  SELECT_SOUND_MODE = 65536,
-  BROWSE_MEDIA = 131072,
-  REPEAT_SET = 262144,
-  GROUPING = 524288,
-}
 
 export type MediaPlayerBrowseAction = "pick" | "play";
 
@@ -269,7 +264,7 @@ export const computeMediaControls = (
   }
 
   if (state === "off") {
-    return supportsFeature(stateObj, MediaPlayerEntityFeature.TURN_ON)
+    return supportsFeature(stateObj, SUPPORT_TURN_ON)
       ? [
           {
             icon: mdiPower,
@@ -281,7 +276,7 @@ export const computeMediaControls = (
 
   const buttons: ControlButton[] = [];
 
-  if (supportsFeature(stateObj, MediaPlayerEntityFeature.TURN_OFF)) {
+  if (supportsFeature(stateObj, SUPPORT_TURN_OFF)) {
     buttons.push({
       icon: mdiPower,
       action: "turn_off",
@@ -293,7 +288,7 @@ export const computeMediaControls = (
 
   if (
     (state === "playing" || state === "paused" || assumedState) &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.SHUFFLE_SET) &&
+    supportsFeature(stateObj, SUPPORT_SHUFFLE_SET) &&
     useExtendedControls
   ) {
     buttons.push({
@@ -304,7 +299,7 @@ export const computeMediaControls = (
 
   if (
     (state === "playing" || state === "paused" || assumedState) &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.PREVIOUS_TRACK)
+    supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
   ) {
     buttons.push({
       icon: mdiSkipPrevious,
@@ -315,13 +310,13 @@ export const computeMediaControls = (
   if (
     !assumedState &&
     ((state === "playing" &&
-      (supportsFeature(stateObj, MediaPlayerEntityFeature.PAUSE) ||
+      (supportsFeature(stateObj, SUPPORT_PAUSE) ||
-        supportsFeature(stateObj, MediaPlayerEntityFeature.STOP))) ||
+        supportsFeature(stateObj, SUPPORT_STOP))) ||
       ((state === "paused" || state === "idle") &&
-        supportsFeature(stateObj, MediaPlayerEntityFeature.PLAY)) ||
+        supportsFeature(stateObj, SUPPORT_PLAY)) ||
       (state === "on" &&
-        (supportsFeature(stateObj, MediaPlayerEntityFeature.PLAY) ||
+        (supportsFeature(stateObj, SUPPORT_PLAY) ||
-          supportsFeature(stateObj, MediaPlayerEntityFeature.PAUSE))))
+          supportsFeature(stateObj, SUPPORT_PAUSE))))
   ) {
     buttons.push({
       icon:
@@ -329,42 +324,33 @@ export const computeMediaControls = (
           ? mdiPlayPause
           : state !== "playing"
           ? mdiPlay
-          : supportsFeature(stateObj, MediaPlayerEntityFeature.PAUSE)
+          : supportsFeature(stateObj, SUPPORT_PAUSE)
           ? mdiPause
           : mdiStop,
       action:
         state !== "playing"
           ? "media_play"
-          : supportsFeature(stateObj, MediaPlayerEntityFeature.PAUSE)
+          : supportsFeature(stateObj, SUPPORT_PAUSE)
           ? "media_pause"
           : "media_stop",
     });
   }
 
-  if (
+  if (assumedState && supportsFeature(stateObj, SUPPORT_PLAY)) {
-    assumedState &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.PLAY)
-  ) {
     buttons.push({
       icon: mdiPlay,
       action: "media_play",
     });
   }
 
-  if (
+  if (assumedState && supportsFeature(stateObj, SUPPORT_PAUSE)) {
-    assumedState &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.PAUSE)
-  ) {
     buttons.push({
       icon: mdiPause,
       action: "media_pause",
     });
   }
 
-  if (
+  if (assumedState && supportsFeature(stateObj, SUPPORT_STOP)) {
-    assumedState &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.STOP)
-  ) {
     buttons.push({
       icon: mdiStop,
       action: "media_stop",
@@ -373,7 +359,7 @@ export const computeMediaControls = (
 
   if (
     (state === "playing" || state === "paused" || assumedState) &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.NEXT_TRACK)
+    supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
   ) {
     buttons.push({
       icon: mdiSkipNext,
@@ -383,7 +369,7 @@ export const computeMediaControls = (
 
   if (
     (state === "playing" || state === "paused" || assumedState) &&
-    supportsFeature(stateObj, MediaPlayerEntityFeature.REPEAT_SET) &&
+    supportsFeature(stateObj, SUPPORT_REPEAT_SET) &&
     useExtendedControls
   ) {
     buttons.push({

src/data/thread.ts

@@ -1,66 +0,0 @@
-import { HomeAssistant } from "../types";
-
-export interface ThreadRouter {
-  brand: "google" | "apple" | "homeassistant";
-  server: string;
-  extended_pan_id: string;
-  model_name: string | null;
-  network_name: string;
-  vendor_name: string;
-}
-
-export interface ThreadDataSet {
-  created;
-  dataset_id;
-  extended_pan_id;
-  network_name: string;
-  pan_id;
-  preferred: boolean;
-  source;
-}
-
-export interface ThreadRouterDiscoveryEvent {
-  key: string;
-  type: "router_discovered" | "router_removed";
-  data: ThreadRouter;
-}
-
-class DiscoveryStream {
-  hass: HomeAssistant;
-
-  routers: { [key: string]: ThreadRouter };
-
-  constructor(hass: HomeAssistant) {
-    this.hass = hass;
-    this.routers = {};
-  }
-
-  processEvent(streamMessage: ThreadRouterDiscoveryEvent): ThreadRouter[] {
-    if (streamMessage.type === "router_discovered") {
-      this.routers[streamMessage.key] = streamMessage.data;
-    } else if (streamMessage.type === "router_removed") {
-      delete this.routers[streamMessage.key];
-    }
-    return Object.values(this.routers);
-  }
-}
-
-export const subscribeDiscoverThreadRouters = (
-  hass: HomeAssistant,
-  callbackFunction: (routers: ThreadRouter[]) => void
-) => {
-  const stream = new DiscoveryStream(hass);
-  return hass.connection.subscribeMessage<ThreadRouterDiscoveryEvent>(
-    (message) => callbackFunction(stream.processEvent(message)),
-    {
-      type: "thread/discover_routers",
-    }
-  );
-};
-
-export const listThreadDataSets = (
-  hass: HomeAssistant
-): Promise<{ datasets: ThreadDataSet[] }> =>
-  hass.callWS({
-    type: "thread/list_datasets",
-  });

src/data/zwave_js.ts

@@ -700,17 +700,21 @@ 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,
   });
 
 export const uploadFirmwareAndBeginUpdate = async (
   hass: HomeAssistant,
   device_id: string,
-  file: File
+  file: File,
+  target?: number
 ) => {
   const fd = new FormData();
   fd.append("file", file);
+  if (target !== undefined) {
+    fd.append("target", target.toString());
+  }
   const resp = await hass.fetchWithAuth(
     `/api/zwave_js/firmware/upload/${device_id}`,
     {

src/dialogs/more-info/controls/more-info-alarm_control_panel.ts

@@ -1,19 +1,18 @@
 import "@material/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../components/ha-textfield";
-import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { HaTextField } from "../../../components/ha-textfield";
 import {
   callAlarmAction,
   FORMAT_NUMBER,
-  AlarmControlPanelEntityFeature,
 } from "../../../data/alarm_control_panel";
 import type { HomeAssistant } from "../../../types";
 
 const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"];
+const ARM_ACTIONS = ["arm_home", "arm_away"];
 const DISARM_ACTIONS = ["disarm"];
 
 @customElement("more-info-alarm_control_panel")
@@ -22,51 +21,8 @@ export class MoreInfoAlarmControlPanel extends LitElement {
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _armActions: string[] = [];
-
   @query("#alarmCode") private _input?: HaTextField;
 
-  public willUpdate(changedProps: PropertyValues<this>) {
-    super.willUpdate(changedProps);
-
-    if (!this.stateObj || !changedProps.has("stateObj")) {
-      return;
-    }
-
-    this._armActions = [];
-    if (
-      supportsFeature(this.stateObj, AlarmControlPanelEntityFeature.ARM_HOME)
-    ) {
-      this._armActions.push("arm_home");
-    }
-    if (
-      supportsFeature(this.stateObj, AlarmControlPanelEntityFeature.ARM_AWAY)
-    ) {
-      this._armActions.push("arm_away");
-    }
-    if (
-      supportsFeature(this.stateObj, AlarmControlPanelEntityFeature.ARM_NIGHT)
-    ) {
-      this._armActions.push("arm_night");
-    }
-    if (
-      supportsFeature(
-        this.stateObj,
-        AlarmControlPanelEntityFeature.ARM_CUSTOM_BYPASS
-      )
-    ) {
-      this._armActions.push("arm_custom_bypass");
-    }
-    if (
-      supportsFeature(
-        this.stateObj,
-        AlarmControlPanelEntityFeature.ARM_VACATION
-      )
-    ) {
-      this._armActions.push("arm_vacation");
-    }
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
       return html``;
@@ -116,7 +72,7 @@ export class MoreInfoAlarmControlPanel extends LitElement {
           `}
       <div class="actions">
         ${(this.stateObj.state === "disarmed"
-          ? this._armActions
+          ? ARM_ACTIONS
           : DISARM_ACTIONS
         ).map(
           (stateAction) => html`

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -25,8 +25,13 @@ import {
   handleMediaControlClick,
   MediaPickedEvent,
   MediaPlayerEntity,
-  MediaPlayerEntityFeature,
   mediaPlayerPlayMedia,
+  SUPPORT_BROWSE_MEDIA,
+  SUPPORT_SELECT_SOUND_MODE,
+  SUPPORT_SELECT_SOURCE,
+  SUPPORT_VOLUME_BUTTONS,
+  SUPPORT_VOLUME_MUTE,
+  SUPPORT_VOLUME_SET,
 } from "../../../data/media-player";
 import { HomeAssistant } from "../../../types";
 
@@ -63,7 +68,7 @@ class MoreInfoMediaPlayer extends LitElement {
                 `
               )}
         </div>
-        ${supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)
+        ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
           ? html`
               <mwc-button
                 .label=${this.hass.localize(
@@ -80,12 +85,12 @@ class MoreInfoMediaPlayer extends LitElement {
             `
           : ""}
       </div>
-      ${(supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET) ||
+      ${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) ||
-        supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_BUTTONS)) &&
+        supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) &&
       ![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state)
         ? html`
             <div class="volume">
-              ${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_MUTE)
+              ${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE)
                 ? html`
                     <ha-icon-button
                       .path=${stateObj.attributes.is_volume_muted
@@ -102,10 +107,7 @@ class MoreInfoMediaPlayer extends LitElement {
                     ></ha-icon-button>
                   `
                 : ""}
-              ${supportsFeature(
+              ${supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)
-                stateObj,
-                MediaPlayerEntityFeature.VOLUME_BUTTONS
-              )
                 ? html`
                     <ha-icon-button
                       action="volume_down"
@@ -125,7 +127,7 @@ class MoreInfoMediaPlayer extends LitElement {
                     ></ha-icon-button>
                   `
                 : ""}
-              ${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
+              ${supportsFeature(stateObj, SUPPORT_VOLUME_SET)
                 ? html`
                     <ha-slider
                       id="input"
@@ -141,7 +143,7 @@ class MoreInfoMediaPlayer extends LitElement {
           `
         : ""}
       ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) &&
-      supportsFeature(stateObj, MediaPlayerEntityFeature.SELECT_SOURCE) &&
+      supportsFeature(stateObj, SUPPORT_SELECT_SOURCE) &&
       stateObj.attributes.source_list?.length
         ? html`
             <div class="source-input">
@@ -166,7 +168,7 @@ class MoreInfoMediaPlayer extends LitElement {
           `
         : ""}
       ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) &&
-      supportsFeature(stateObj, MediaPlayerEntityFeature.SELECT_SOUND_MODE) &&
+      supportsFeature(stateObj, SUPPORT_SELECT_SOUND_MODE) &&
       stateObj.attributes.sound_mode_list?.length
         ? html`
             <div class="sound-input">

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

@@ -273,7 +273,6 @@ export class MoreInfoDialog extends LitElement {
           --dialog-surface-position: static;
           --dialog-content-position: static;
           --vertical-align-dialog: flex-start;
-          --dialog-content-padding: 0;
         }
 
         ha-header-bar {
@@ -298,12 +297,8 @@ export class MoreInfoDialog extends LitElement {
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
-        ha-dialog .content {
+        :host([tab="settings"]) ha-dialog {
-          padding: 24px;
+          --dialog-content-padding: 0px;
-        }
-
-        :host([tab="settings"]) ha-dialog .content {
-          padding: 0px;
         }
 
         @media all and (min-width: 600px) and (min-height: 501px) {
@@ -326,8 +321,8 @@ export class MoreInfoDialog extends LitElement {
           }
         }
 
-        :host([tab="info"]) ha-dialog[data-domain="camera"] .content {
+        :host([tab="info"]) ha-dialog[data-domain="camera"] {
-          padding: 0;
+          --dialog-content-padding: 0;
           /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */
           --video-max-height: calc(100vh - 113px - 72px);
         }

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

@@ -113,15 +113,20 @@ export class MoreInfoHistory extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._unsubscribeHistory();
+    this._unsubscribeHistoryTimeWindow();
   }
 
-  private _unsubscribeHistory() {
+  private _unsubscribeHistoryTimeWindow() {
-    clearInterval(this._interval);
+    if (!this._subscribed) {
-    if (this._subscribed) {
+      return;
-      this._subscribed.then((unsub) => unsub?.());
-      this._subscribed = undefined;
     }
+    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!,

src/dialogs/restart/dialog-restart.ts

@@ -1,382 +0,0 @@
-import "@material/mwc-list/mwc-list";
-import { mdiAutoFix, mdiPower, mdiPowerCycle, mdiRefresh } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { fireEvent } from "../../common/dom/fire_event";
-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 {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../data/hassio/common";
-import {
-  fetchHassioHostInfo,
-  HassioHostInfo,
-  rebootHost,
-  shutdownHost,
-} from "../../data/hassio/host";
-import { haStyle, haStyleDialog } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
-import { showToast } from "../../util/toast";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../generic/show-dialog-box";
-
-@customElement("dialog-restart")
-class DialogRestart extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _open = false;
-
-  @state()
-  private _loadingHostInfo = false;
-
-  @state()
-  private _hostInfo?: HassioHostInfo;
-
-  public async showDialog(): Promise<void> {
-    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
-
-    this._open = true;
-
-    if (isHassioLoaded && !this._hostInfo) {
-      this._loadingHostInfo = true;
-      try {
-        this._hostInfo = await fetchHassioHostInfo(this.hass);
-      } catch (_err) {
-        // Do nothing
-      } finally {
-        this._loadingHostInfo = false;
-      }
-    }
-
-    const showReload = this.hass.userData?.showAdvanced;
-    const showRebootShutdown = !!this._hostInfo;
-
-    // Present restart core dialog if no host actions and not advanced mode as it's the only option
-    if (!showReload && !showRebootShutdown) {
-      this._open = false;
-      this._showRestartDialog().then(() => this.closeDialog());
-      return;
-    }
-
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._open = false;
-    this._loadingHostInfo = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._open) {
-      return html``;
-    }
-
-    const showReload = this.hass.userData?.showAdvanced;
-    const showRebootShutdown = !!this._hostInfo;
-
-    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        hideActions
-        .heading=${!this._loadingHostInfo
-          ? createCloseHeading(
-              this.hass,
-              this.hass.localize("ui.dialogs.restart.heading")
-            )
-          : undefined}
-      >
-        ${this._loadingHostInfo
-          ? html`
-              <div class="loader">
-                <ha-circular-progress active></ha-circular-progress>
-              </div>
-            `
-          : html`
-              <mwc-list dialogInitialFocus>
-                ${showReload
-                  ? html`
-                      <ha-list-item
-                        graphic="avatar"
-                        twoline
-                        hasMeta
-                        @request-selected=${this._reload}
-                      >
-                        <div slot="graphic" class="icon-background reload">
-                          <ha-svg-icon .path=${mdiAutoFix}></ha-svg-icon>
-                        </div>
-                        <span>
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.reload.title"
-                          )}
-                        </span>
-                        <span slot="secondary">
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.reload.description"
-                          )}
-                        </span>
-                      </ha-list-item>
-                    `
-                  : null}
-                <ha-list-item
-                  graphic="avatar"
-                  twoline
-                  hasMeta
-                  @request-selected=${this._restart}
-                >
-                  <div slot="graphic" class="icon-background restart">
-                    <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
-                  </div>
-                  <span>
-                    ${this.hass.localize("ui.dialogs.restart.restart.title")}
-                  </span>
-                  <span slot="secondary">
-                    ${this.hass.localize(
-                      "ui.dialogs.restart.restart.description"
-                    )}
-                  </span>
-                </ha-list-item>
-                ${showRebootShutdown
-                  ? html`
-                      <div class="divider"></div>
-                      <p class="section">
-                        ${this.hass.localize(
-                          "ui.dialogs.restart.advanced_options"
-                        )}
-                      </p>
-                      <ha-list-item
-                        graphic="avatar"
-                        twoline
-                        hasMeta
-                        @request-selected=${this._hostReboot}
-                      >
-                        <div slot="graphic" class="icon-background reboot">
-                          <ha-svg-icon .path=${mdiPowerCycle}></ha-svg-icon>
-                        </div>
-                        <span>
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.reboot.title"
-                          )}
-                        </span>
-                        <span slot="secondary">
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.reboot.description"
-                          )}
-                        </span>
-                      </ha-list-item>
-                      <ha-list-item
-                        graphic="avatar"
-                        twoline
-                        hasMeta
-                        @request-selected=${this._hostShutdown}
-                      >
-                        <div slot="graphic" class="icon-background shutdown">
-                          <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
-                        </div>
-                        <span>
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.shutdown.title"
-                          )}
-                        </span>
-                        <span slot="secondary">
-                          ${this.hass.localize(
-                            "ui.dialogs.restart.shutdown.description"
-                          )}
-                        </span>
-                      </ha-list-item>
-                    `
-                  : null}
-              </mwc-list>
-            `}
-      </ha-dialog>
-    `;
-  }
-
-  private async _reload(ev) {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-
-    this.closeDialog();
-
-    showToast(this, {
-      message: this.hass.localize("ui.dialogs.restart.reload.reloading"),
-      duration: 1000,
-    });
-
-    await this.hass.callService("homeassistant", "reload_all");
-  }
-
-  private async _restart(ev) {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-    this._showRestartDialog();
-  }
-
-  private async _showRestartDialog() {
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize("ui.dialogs.restart.restart.confirm_title"),
-      text: this.hass.localize(
-        "ui.dialogs.restart.restart.confirm_description"
-      ),
-      confirmText: this.hass.localize(
-        "ui.dialogs.restart.restart.confirm_action"
-      ),
-      destructive: true,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    this.closeDialog();
-
-    try {
-      await this.hass.callService("homeassistant", "restart");
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.hass.localize("ui.dialogs.restart.restart.failed"),
-        text: err.message,
-      });
-    }
-  }
-
-  private async _hostReboot(ev): Promise<void> {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize("ui.dialogs.restart.reboot.confirm_title"),
-      text: this.hass.localize("ui.dialogs.restart.reboot.confirm_description"),
-      confirmText: this.hass.localize(
-        "ui.dialogs.restart.reboot.confirm_action"
-      ),
-      destructive: true,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    this.closeDialog();
-
-    showToast(this, {
-      message: this.hass.localize("ui.dialogs.restart.reboot.rebooting"),
-      duration: 0,
-    });
-
-    try {
-      await rebootHost(this.hass);
-    } catch (err: any) {
-      // Ignore connection errors, these are all expected
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        showAlertDialog(this, {
-          title: this.hass.localize("ui.dialogs.restart.reboot.failed"),
-          text: extractApiErrorMessage(err),
-        });
-      }
-    }
-  }
-
-  private async _hostShutdown(ev): Promise<void> {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.hass.localize("ui.dialogs.restart.shutdown.confirm_title"),
-      text: this.hass.localize(
-        "ui.dialogs.restart.shutdown.confirm_description"
-      ),
-      confirmText: this.hass.localize(
-        "ui.dialogs.restart.shutdown.confirm_action"
-      ),
-      destructive: true,
-    });
-
-    if (!confirmed) {
-      return;
-    }
-
-    this.closeDialog();
-
-    showToast(this, {
-      message: this.hass.localize("ui.dialogs.restart.shutdown.shutting_down"),
-      duration: 0,
-    });
-
-    try {
-      await shutdownHost(this.hass);
-    } catch (err: any) {
-      // Ignore connection errors, these are all expected
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        showAlertDialog(this, {
-          title: this.hass.localize("ui.dialogs.restart.shutdown.failed"),
-          text: extractApiErrorMessage(err),
-        });
-      }
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --dialog-content-padding: 0;
-        }
-        .icon-background {
-          border-radius: 50%;
-          color: #fff;
-        }
-        .reload {
-          background-color: #5f8a49;
-        }
-        .restart {
-          background-color: #ffd500;
-          color: #665500;
-        }
-        .reboot {
-          background-color: #ba1b1b;
-          color: #fff;
-        }
-        .shutdown {
-          background-color: #0b1d29;
-          color: #fff;
-        }
-        .divider {
-          height: 1px;
-          background-color: var(--divider-color);
-        }
-        .section {
-          font-weight: 500;
-          font-size: 14px;
-          line-height: 20px;
-          margin: 8px 0 4px 0;
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
-        }
-        .loader {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 24px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-restart": DialogRestart;
-  }
-}

src/dialogs/restart/show-dialog-restart.ts

@@ -1,14 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface RestartDialogParams {}
-
-export const loadRestartDialog = () => import("./dialog-restart");
-
-export const showRestartDialog = (element: HTMLElement): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-restart",
-    dialogImport: loadRestartDialog,
-    dialogParams: {},
-  });
-};

src/html/authorize.html.template

@@ -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>
 

src/html/index.html.template

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

src/html/onboarding.html.template

@@ -13,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>
 

src/onboarding/ha-onboarding.ts

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

src/onboarding/particles.ts

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

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

@@ -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;

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

@@ -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">

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

@@ -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 {

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

@@ -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">

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

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

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

@@ -39,7 +39,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
-import { computeRTL } from "../../../common/util/compute_rtl";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -177,9 +176,7 @@ export class HaAutomationTrace extends LitElement {
                   .label=${this.hass!.localize(
                     "ui.panel.config.automation.trace.older_trace"
                   )}
-                  .path=${computeRTL(this.hass!)
+                  .path=${mdiRayEndArrow}
-                    ? mdiRayStartArrow
-                    : mdiRayEndArrow}
                   .disabled=${this._traces[this._traces.length - 1].run_id ===
                   this._runId}
                   @click=${this._pickOlderTrace}
@@ -201,9 +198,7 @@ export class HaAutomationTrace extends LitElement {
                   .label=${this.hass!.localize(
                     "ui.panel.config.automation.trace.newer_trace"
                   )}
-                  .path=${computeRTL(this.hass!)
+                  .path=${mdiRayStartArrow}
-                    ? mdiRayEndArrow
-                    : mdiRayStartArrow}
                   .disabled=${this._traces[0].run_id === this._runId}
                   @click=${this._pickNewerTrace}
                 ></ha-icon-button>

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

@@ -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">

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -14,7 +14,7 @@ import "../../../../components/ha-select";
 import "../../../../components/ha-textarea";
 import type { HaTextArea } from "../../../../components/ha-textarea";
 import { showAutomationEditor } from "../../../../data/automation";
-import { MediaPlayerEntityFeature } from "../../../../data/media-player";
+import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
 import { convertTextToSpeech } from "../../../../data/tts";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -94,7 +94,7 @@ export class DialogTryTts extends LitElement {
               .filter(
                 (entity) =>
                   computeStateDomain(entity) === "media_player" &&
-                  supportsFeature(entity, MediaPlayerEntityFeature.PLAY_MEDIA)
+                  supportsFeature(entity, SUPPORT_PLAY_MEDIA)
               )
               .map(
                 (entity) => html`

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

@@ -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,

src/panels/config/core/ha-config-system-navigation.ts

@@ -1,4 +1,3 @@
-import { mdiPower } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { canShowPage } from "../../../common/config/can_show_page";
@@ -6,7 +5,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-card";
-import "../../../components/ha-icon-button";
 import "../../../components/ha-navigation-list";
 import "../../../components/ha-tip";
 import { BackupContent, fetchBackupInfo } from "../../../data/backup";
@@ -19,7 +17,10 @@ import {
   HassioHassOSInfo,
   HassioHostInfo,
 } from "../../../data/hassio/host";
-import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -120,14 +121,13 @@ class HaConfigSystemNavigation extends LitElement {
         back-path="/config"
         .header=${this.hass.localize("ui.panel.config.dashboard.system.main")}
       >
-        <ha-icon-button
+        <mwc-button
           slot="toolbar-icon"
-          .path=${mdiPower}
           .label=${this.hass.localize(
-            "ui.panel.config.system_dashboard.restart_homeassistant"
+            "ui.panel.config.system_dashboard.restart_homeassistant_short"
           )}
-          @click=${this._showRestartDialog}
+          @click=${this._restart}
-        ></ha-icon-button>
+        ></mwc-button>
         <ha-config-section
           .narrow=${this.narrow}
           .isWide=${this.isWide}
@@ -161,6 +161,31 @@ class HaConfigSystemNavigation extends LitElement {
     }
   }
 
+  private _restart() {
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.system_dashboard.confirm_restart_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.system_dashboard.confirm_restart_text"
+      ),
+      confirmText: this.hass.localize(
+        "ui.panel.config.system_dashboard.restart_homeassistant_short"
+      ),
+      confirm: () => {
+        this.hass.callService("homeassistant", "restart").catch((reason) => {
+          showAlertDialog(this, {
+            title: this.hass.localize(
+              "ui.panel.config.system_dashboard.restart_error"
+            ),
+            text: reason.message,
+          });
+        });
+      },
+      destructive: true,
+    });
+  }
+
   private async _fetchBackupInfo(isHassioLoaded: boolean) {
     const backups: BackupContent[] | HassioBackup[] = isHassioLoaded
       ? await fetchHassioBackups(this.hass)
@@ -213,10 +238,6 @@ class HaConfigSystemNavigation extends LitElement {
     this._externalAccess = this.hass.config.external_url !== null;
   }
 
-  private async _showRestartDialog() {
-    showRestartDialog(this);
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -248,14 +269,6 @@ class HaConfigSystemNavigation extends LitElement {
           padding-bottom: 0;
         }
 
-        .restart-section {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-          justify-content: center;
-          margin-bottom: 24px;
-        }
-
         @media all and (max-width: 600px) {
           ha-card {
             border-width: 1px 0;

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

@@ -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);
   }
 

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

@@ -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;
 

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

@@ -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}

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

@@ -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",
+            `ui.panel.config.energy.device_consumption.dialog.selected_stat_intro`
-            { unit: pickableUnit }
           )}
         </div>
 

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

@@ -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._pickableUnit ||
-        ? [...(this._gas_units || []), ...(this._energy_units || [])].join(", ")
+      (this._params.allowedGasUnitClass === undefined
+        ? "ft³, m³, Wh, kWh, MWh or GJ"
         : this._params.allowedGasUnitClass === "energy"
-        ? this._energy_units?.join(", ") || ""
+        ? "Wh, kWh, MWh or GJ"
-        : this._gas_units?.join(", ") || "";
+        : "ft³ or m³");
-
-    const unitPrice = this._pickedDisplayUnit
-      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
-      : undefined;
 
     const externalSource =
-      this._source.stat_energy_from &&
+      this._source.stat_cost && isExternalStatistic(this._source.stat_cost);
-      isExternalStatistic(this._source.stat_energy_from);
 
     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(
+              .label=${this.hass.localize(
-                "ui.panel.config.energy.gas.dialog.cost_stat_input"
+                `ui.panel.config.energy.gas.dialog.cost_stat_input`
-              )} (${this.hass.config.currency})`}
+              )}
               @value-changed=${this._priceStatChanged}
             ></ha-statistic-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            "ui.panel.config.energy.gas.dialog.cost_entity"
+            `ui.panel.config.energy.gas.dialog.cost_entity`
           )}
         >
           <ha-radio
@@ -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(
+              .label=${this.hass.localize(
-                "ui.panel.config.energy.gas.dialog.cost_entity_input"
+                `ui.panel.config.energy.gas.dialog.cost_entity_input`,
-              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
+                { 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(
+              .label=${this.hass.localize(
-                "ui.panel.config.energy.gas.dialog.cost_number_input"
+                `ui.panel.config.energy.gas.dialog.cost_number_input`,
-              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
+                { 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>`
           : ""}

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

@@ -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(
-            ${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
-              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+          )}
-            )}
-          </p>
-          <p>
-            ${this.hass.localize(
-              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
-              { unit: pickableUnit }
-            )}
-          </p>
         </div>
 
         <ha-statistic-picker
@@ -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 }>) {
+  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (ev.detail.value) {
-      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
-      this._pickedDisplayUnit = getDisplayUnit(
-        this.hass,
-        ev.detail.value,
-        metadata[0]
-      );
-    } else {
-      this._pickedDisplayUnit = undefined;
-    }
     this._source = {
       ...this._source!,
       [this._params!.direction === "from"

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

@@ -21,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}

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

@@ -14,16 +14,11 @@ import {
   emptyWaterEnergyPreference,
   WaterSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import {
+import { isExternalStatistic } from "../../../../data/recorder";
-  getStatisticMetadata,
-  getDisplayUnit,
-  isExternalStatistic,
-} from "../../../../data/recorder";
 import { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { EnergySettingsWaterDialogParams } from "./show-dialogs-energy";
-import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 
 @customElement("dialog-energy-water-settings")
 export class DialogEnergyWaterSettings
@@ -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 &&
+      this._source.stat_cost && isExternalStatistic(this._source.stat_cost);
-      isExternalStatistic(this._source.stat_energy_from);
 
     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(
+              .label=${this.hass.localize(
-                "ui.panel.config.energy.water.dialog.cost_stat_input"
+                `ui.panel.config.energy.water.dialog.cost_stat_input`
-              )} (${this.hass.config.currency})`}
+              )}
               @value-changed=${this._priceStatChanged}
             ></ha-statistic-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            "ui.panel.config.energy.water.dialog.cost_entity"
+            `ui.panel.config.energy.water.dialog.cost_entity`
           )}
         >
           <ha-radio
@@ -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(
+              .label=${this.hass.localize(
-                "ui.panel.config.energy.water.dialog.cost_entity_input"
+                `ui.panel.config.energy.water.dialog.cost_entity_input`
-              )}${unitPrice ? ` (${unitPrice})` : ""}`}
+              )}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
         <ha-formfield
           .label=${this.hass.localize(
-            "ui.panel.config.energy.water.dialog.cost_number"
+            `ui.panel.config.energy.water.dialog.cost_number`
           )}
         >
           <ha-radio
             value="number"
             name="costs"
             .checked=${this._costs === "number"}
-            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
         ${this._costs === "number"
           ? html`<ha-textfield
-              .label=${`${this.hass.localize(
+              .label=${this.hass.localize(
-                "ui.panel.config.energy.water.dialog.cost_number_input"
+                `ui.panel.config.energy.water.dialog.cost_number_input`
-              )}${unitPrice ? ` (${unitPrice})` : ""}`}
+              )}
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
               @change=${this._numberPriceChanged}
-              .suffix=${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";
     }

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

@@ -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>;
 }
 

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

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

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

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

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

@@ -1,6 +1,6 @@
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiPower } from "@mdi/js";
+import { mdiDotsVertical } from "@mdi/js";
 import type { ChartOptions } from "chart.js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
@@ -13,9 +13,9 @@ import { blankBeforePercent } from "../../../common/translations/blank_before_pe
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/chart/ha-chart-base";
 import "../../../components/ha-alert";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-clickable-list-item";
-import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-settings-row";
 import {
@@ -27,19 +27,31 @@ import {
   HardwareInfo,
   SystemStatusStreamMessage,
 } from "../../../data/hardware";
+import {
+  extractApiErrorMessage,
+  ignoreSupervisorError,
+} from "../../../data/hassio/common";
 import {
   fetchHassioHassOsInfo,
+  fetchHassioHostInfo,
   HassioHassOSInfo,
+  HassioHostInfo,
+  rebootHost,
+  shutdownHost,
 } from "../../../data/hassio/host";
 import { scanUSBDevices } from "../../../data/usb";
 import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
-import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { DEFAULT_PRIMARY_COLOR } from "../../../resources/ha-style";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { hardwareBrandsUrl } from "../../../util/brands-url";
+import { showToast } from "../../../util/toast";
 import { showhardwareAvailableDialog } from "./show-dialog-hardware-available";
 
 const DATASAMPLES = 60;
@@ -63,6 +75,8 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
 
   @state() private _OSData?: HassioHassOSInfo;
 
+  @state() private _hostData?: HassioHostInfo;
+
   @state() private _hardwareInfo?: HardwareInfo;
 
   @state() private _chartOptions?: ChartOptions;
@@ -89,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;
-                const newEntry = message.entry;
+              this._configEntries![message.entry.entry_id] = newEntry;
-                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 } = {};
@@ -210,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;
@@ -226,14 +240,14 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         (!hw.config_entries.length ||
           hw.config_entries.some(
             (entryId) =>
-              this._configEntries?.[entryId] &&
+              this._configEntries![entryId] &&
-              !this._configEntries[entryId].disabled_by
+              !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[];
@@ -259,16 +273,32 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         .header=${this.hass.localize("ui.panel.config.hardware.caption")}
       >
         ${isComponentLoaded(this.hass, "hassio")
-          ? html`
+          ? html`<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
               <ha-icon-button
-                slot="toolbar-icon"
+                .label=${this.hass.localize("ui.common.menu")}
-                .path=${mdiPower}
+                .path=${mdiDotsVertical}
-                .label=${this.hass.localize(
+                slot="trigger"
-                  "ui.panel.config.hardware.restart_homeassistant"
-                )}
-                @click=${this._showRestartDialog}
               ></ha-icon-button>
-            `
+              <mwc-list-item @click=${this._openHardware}
+                >${this.hass.localize(
+                  "ui.panel.config.hardware.available_hardware.title"
+                )}</mwc-list-item
+              >
+              ${this._hostData
+                ? html`
+                    <mwc-list-item class="warning" @click=${this._hostReboot}
+                      >${this.hass.localize(
+                        "ui.panel.config.hardware.reboot_host"
+                      )}</mwc-list-item
+                    >
+                    <mwc-list-item class="warning" @click=${this._hostShutdown}
+                      >${this.hass.localize(
+                        "ui.panel.config.hardware.shutdown_host"
+                      )}</mwc-list-item
+                    >
+                  `
+                : ""}
+            </ha-button-menu>`
           : ""}
         ${this._error
           ? html`
@@ -337,15 +367,6 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                             "ui.panel.config.hardware.configure"
                           )}
                         </mwc-button>
-                        ${isComponentLoaded(this.hass, "hassio")
-                          ? html`
-                              <mwc-button @click=${this._openHardware}>
-                                ${this.hass.localize(
-                                  "ui.panel.config.hardware.available_hardware.title"
-                                )}
-                              </mwc-button>
-                            `
-                          : null}
                       </div>`
                     : ""}
                 </ha-card>
@@ -355,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];
@@ -454,6 +475,10 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
       if (isHassioLoaded && !this._hardwareInfo?.hardware.length) {
         this._OSData = await fetchHassioHassOsInfo(this.hass);
       }
+
+      if (isHassioLoaded) {
+        this._hostData = await fetchHassioHostInfo(this.hass);
+      }
     } catch (err: any) {
       this._error = err.message || err;
     }
@@ -471,8 +496,72 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
     showhardwareAvailableDialog(this);
   }
 
-  private async _showRestartDialog() {
+  private async _hostReboot(): Promise<void> {
-    showRestartDialog(this);
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize("ui.panel.config.hardware.reboot_host_title"),
+      text: this.hass.localize("ui.panel.config.hardware.reboot_host_text"),
+      confirmText: this.hass.localize("ui.panel.config.hardware.reboot"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    showToast(this, {
+      message: this.hass.localize("ui.panel.config.hardware.rebooting_host"),
+      duration: 0,
+    });
+
+    try {
+      await rebootHost(this.hass);
+    } catch (err: any) {
+      // Ignore connection errors, these are all expected
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.hardware.failed_to_reboot_host"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+      }
+    }
+  }
+
+  private async _hostShutdown(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize("ui.panel.config.hardware.shutdown_host_title"),
+      text: this.hass.localize("ui.panel.config.hardware.shutdown_host_text"),
+      confirmText: this.hass.localize("ui.panel.config.hardware.shutdown"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.hardware.host_shutting_down"
+      ),
+      duration: 0,
+    });
+
+    try {
+      await shutdownHost(this.hass);
+    } catch (err: any) {
+      // Ignore connection errors, these are all expected
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.hardware.failed_to_shutdown_host"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+      }
+    }
   }
 
   static styles = [
@@ -498,6 +587,10 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         flex-direction: column;
         padding: 16px;
       }
+      ha-button-menu {
+        color: var(--secondary-text-color);
+        --mdc-menu-min-width: 200px;
+      }
 
       .primary-text {
         font-size: 16px;
@@ -527,10 +620,6 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         height: 48px;
         padding: 8px 16px;
       }
-      .card-actions {
-        display: flex;
-        justify-content: space-between;
-      }
     `,
   ];
 }

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

@@ -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-dialog";
-import "../../../components/ha-list-item";
 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>
+              </mwc-list-item>
-              </ha-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=${this._domain
-        .heading=${createCloseHeading(
+          ? this.hass.localize(
-          this.hass,
+              "ui.panel.config.helpers.dialog.create_platform",
-          this._domain
+              "platform",
-            ? this.hass.localize(
+              this.hass.localize(
-                "ui.panel.config.helpers.dialog.create_platform",
+                `ui.panel.config.helpers.types.${this._domain}`
-                "platform",
+              ) || this._domain
-                this.hass.localize(
+            )
-                  `ui.panel.config.helpers.types.${this._domain}`
+          : this.hass.localize("ui.panel.config.helpers.dialog.create_helper")}
-                ) || 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;
-        }
       `,
     ];
   }

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

@@ -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);
         }

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

@@ -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 {
+import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
-  protocolIntegrationPicked,
-  PROTOCOL_INTEGRATIONS,
-} 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(
+      const addDeviceRows: IntegrationListItem[] = (
-        (domain) => components.includes(domain)
+        ["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(
+      ["zha", "zwave_js"].includes(integration.domain) &&
-        integration.domain
-      ) &&
       isComponentLoaded(this.hass, integration.domain)
     ) {
       this._pickedBrand = integration.domain;

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

@@ -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 {
+import { protocolIntegrationPicked } from "../../../common/integrations/protocolIntegrationPicked";
-  protocolIntegrationPicked,
-  PROTOCOL_INTEGRATIONS,
-} from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
@@ -764,11 +761,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           }
         ),
         confirm: async () => {
-          if (
+          if (["zha", "zwave_js"].includes(integration.supported_by!)) {
-            (PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).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: 2px 2px 2px 8px;
-          padding-bottom: 2px;
-          padding-right: 2px;
-          padding-left: 8px;
-          padding-inline-start: 8px;
-          padding-inline-end: 2px;
           font-size: 14px;
           width: max-content;
           cursor: initial;
-          direction: var(--direction);
         }
         .active-filters mwc-button {
           margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-          direction: var(--direction);
         }
         .active-filters::before {
           background-color: var(--primary-color);

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

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

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

@@ -73,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 in integrationsWithPanel
-              (item.domain !== "matter" ||
-                isDevVersion(this.hass.config.version))
             ? html`<a
                 href=${`${integrationsWithPanel[item.domain]}?config_entry=${
                   item.entry_id

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

@@ -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;
-  }
-}

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

@@ -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;
-  }
-}