Fix zwave js handling multiple config entries

.github/ISSUE_TEMPLATE.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Settings -> About.
+  Home Assistant frontend: Configuration -> Info.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -64,7 +64,7 @@ body:
       label: What version of Home Assistant Core has the issue?
       placeholder: core-
       description: >
-        Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/info/).
+        Can be found in the Configuration panel -> Info.
   - type: input
     attributes:
       label: What was the last working version of Home Assistant Core?

.github/dependabot.yml

@@ -1,8 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: weekly
-      time: "06:00"
-    open-pull-requests-limit: 10

.github/workflows/ci.yaml

@@ -11,7 +11,7 @@ on:
       - master
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 14
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -19,9 +19,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -43,9 +43,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -62,9 +62,9 @@ jobs:
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -81,9 +81,9 @@ jobs:
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v2
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v1
       with:
         languages: ${{ matrix.language }}
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v1
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v1

.github/workflows/demo.yaml

@@ -6,7 +6,7 @@ on:
       - dev
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 14
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -14,9 +14,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v3.0.0
+      - uses: dessant/lock-threads@v2.0.1
         with:
           github-token: ${{ github.token }}
           issue-lock-inactive-days: "30"

.github/workflows/nightly.yaml

@@ -1,63 +0,0 @@
-name: Nightly
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 1 * * *"
-
-env:
-  PYTHON_VERSION: "3.10"
-  NODE_VERSION: 16
-  NODE_OPTIONS: --max_old_space_size=6144
-
-permissions:
-  actions: none
-
-jobs:
-  nightly:
-    name: Nightly
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3
-
-      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
-        with:
-          python-version: ${{ env.PYTHON_VERSION }}
-
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Download translations
-        run: ./script/translations_download
-        env:
-          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
-      - name: Bump version
-        run: script/version_bump.js nightly
-
-      - name: Build nightly Python wheels
-        run: |
-          pip install build
-          yarn install
-
-          script/build_frontend
-
-          rm -rf dist home_assistant_frontend.egg-info
-          python3 -m build
-
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: wheels
-          path: dist/home_assistant_frontend*.whl
-          if-no-files-found: error

.github/workflows/release.yaml

@@ -6,8 +6,8 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.10"
+  PYTHON_VERSION: 3.8
-  NODE_VERSION: 16
+  NODE_VERSION: 14
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -21,21 +21,21 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     permissions:
-      contents: write # Required to upload release assets
+      contents: write  # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v2
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -74,11 +74,33 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
-      - name: Build wheels
+      - name: Upload requirements.txt
-        uses: home-assistant/wheels@2022.06.7
+        uses: actions/upload-artifact@v2
         with:
-          abi: cp310
+          name: requirements
-          tag: musllinux_1_2
+          path: ./requirements.txt
-          arch: amd64
+
+  build-wheels:
+    name: Build wheels for ${{ matrix.arch }}
+    needs: wheels-init
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.9-alpine3.14"
+    steps:
+      - name: Download requirements.txt
+        uses: actions/download-artifact@v2
+        with:
+          name: requirements
+
+      - name: Build wheels
+        uses: home-assistant/wheels@master
+        with:
+          tag: ${{ matrix.tag }}
+          arch: ${{ matrix.arch }}
+          wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}
+          wheels-user: wheels
           requirements: "requirements.txt"

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v5.1.0
+        uses: actions/stale@v3.0.13
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -8,7 +8,7 @@ on:
       - src/translations/en.json
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 14
 
 jobs:
   upload:
@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
 
       - name: Upload Translations
         run: |

.nvmrc

@@ -1 +1 @@
-16
+14

.vscode/tasks.json

@@ -181,7 +181,7 @@
     {
       "label": "Run HA Core for Supervisor in devcontainer",
       "type": "shell",
-      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
+      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
       "isBackground": true,
       "group": {
         "kind": "build",

build-scripts/env.js

@@ -26,8 +26,8 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
-      .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
+      .match(/version\W+=\W(\d{8}\.\d)/);
     if (!version) {
       throw Error("Version not found");
     }

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

@@ -156,12 +156,3 @@ gulp.task("gen-icons-json", (done) => {
 
   done();
 });
-
-gulp.task("gen-dummy-icons-json", (done) => {
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-  }
-
-  fs.writeFileSync(path.resolve(OUTPUT_DIR, "iconList.json"), "[]");
-  done();
-});

build-scripts/gulp/hassio.js

@@ -9,7 +9,6 @@ require("./compress.js");
 require("./rollup.js");
 require("./gather-static.js");
 require("./translations.js");
-require("./gen-icons-json.js");
 
 gulp.task(
   "develop-hassio",
@@ -18,7 +17,6 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-dummy-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
@@ -35,7 +33,6 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-dummy-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",

build-scripts/removedIcons.json

@@ -1,30 +1 @@
-[
+[]
-  {
-    "path": "M20,20H7A2,2 0 0,1 5,18V8.94L2.23,5.64C2.09,5.47 2,5.24 2,5A1,1 0 0,1 3,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20M8.5,7A0.5,0.5 0 0,0 8,7.5V8.5A0.5,0.5 0 0,0 8.5,9H18.5A0.5,0.5 0 0,0 19,8.5V7.5A0.5,0.5 0 0,0 18.5,7H8.5M8.5,11A0.5,0.5 0 0,0 8,11.5V12.5A0.5,0.5 0 0,0 8.5,13H18.5A0.5,0.5 0 0,0 19,12.5V11.5A0.5,0.5 0 0,0 18.5,11H8.5M8.5,15A0.5,0.5 0 0,0 8,15.5V16.5A0.5,0.5 0 0,0 8.5,17H13.5A0.5,0.5 0 0,0 14,16.5V15.5A0.5,0.5 0 0,0 13.5,15H8.5Z",
-    "name": "android-messages"
-  },
-  {
-    "path": "M4,6H2V20A2,2 0 0,0 4,22H18V20H4V6M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M20,12L17.5,10.5L15,12V4H20V12Z",
-    "name": "book-variant-multiple"
-  },
-  {
-    "path": "M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z",
-    "name": "desktop-mac"
-  },
-  {
-    "path": "M21,14V4H3V14H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14L16,21V22H8V21L10,18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M4,5H15V10H4V5M16,5H20V7H16V5M20,8V13H16V8H20M4,11H9V13H4V11M10,11H15V13H10V11Z",
-    "name": "desktop-mac-dashboard"
-  },
-  {
-    "path": "M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z",
-    "name": "discord"
-  },
-  {
-    "path": "M8.06,7.78C7.5,7.78 7.17,7.73 7.08,7.64L6.66,13.73C7.19,14.05 7.88,14.3 8.72,14.5C9.56,14.71 10.78,14.77 12.38,14.67C13.97,14.58 15.63,14.23 17.34,13.64L16.55,4.22C15.67,5.09 14.38,5.91 12.66,6.66C11.13,7.31 9.81,7.69 8.72,7.78H8.06M7.97,5.34C7.28,5.94 7,6.34 7.13,6.56C7.22,6.78 7.7,6.84 8.58,6.75C9.67,6.66 10.91,6.31 12.28,5.72C13.22,5.31 14.03,4.88 14.72,4.41C15.41,3.94 15.88,3.55 16.13,3.23C16.38,2.92 16.47,2.7 16.41,2.58C16.34,2.42 16.03,2.34 15.47,2.34C14.34,2.34 12.94,2.7 11.25,3.42C9.81,4.05 8.72,4.69 7.97,5.34M17.34,2.2C17.41,2.33 17.44,2.47 17.44,2.63L18.61,17C18.61,18.73 18,20.09 16.83,21.07C15.64,22.05 14.03,22.55 12,22.55C10,22.55 8.4,22.04 7.2,21C6,20 5.39,18.64 5.39,16.92L6.09,6.47C6.09,6.22 6.2,5.94 6.42,5.63C6.64,5.31 6.84,5.06 7.03,4.88L7.36,4.59C8.33,3.78 9.5,3.08 10.88,2.5C11.81,2.08 12.73,1.77 13.62,1.57C14.5,1.37 15.3,1.3 16,1.38C16.71,1.46 17.16,1.73 17.34,2.2Z",
-    "name": "google-home"
-  },
-  {
-    "path": "M19.25,19H4.75V3H19.25M14,22H10V21H14M18,0H6A3,3 0 0,0 3,3V21A3,3 0 0,0 6,24H18A3,3 0 0,0 21,21V3A3,3 0 0,0 18,0Z",
-    "name": "tablet-android"
-  }
-]

cast/public/_redirects

@@ -1,9 +0,0 @@
-# These redirects are handled by Netlify
-#
-
-# Some custom cards are not prefixing the instance URL when fetching data
-# and can end up fetching the data from the Cast domain instead of HA.
-# This will make sure that some common ones are replaced with a placeholder.
-/api/camera_proxy/* /images/google-nest-hub.png
-/api/camera_proxy_stream/* /images/google-nest-hub.png
-/api/media_player_proxy/* /images/google-nest-hub.png

demo/src/configs/jimpower/lovelace.ts

@@ -194,7 +194,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     type: "state-icon",
                     tap_action: {
                       action: "call-service",
-                      data: {
+                      service_data: {
                         entity_id: "group.downstairs_lights",
                       },
                       service: "homeassistant.toggle",

demo/src/configs/kernehed/entities.ts

@@ -59,7 +59,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         hidden: true,
         radius: 50,
-        friendly_name: "School",
+        friendly_name: "Skolan",
         icon: "mdi:school",
       },
     },
@@ -137,7 +137,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "73",
       attributes: {
         unit_of_measurement: "%",
-        friendly_name: "Oskar battery",
+        friendly_name: "oskar batteri",
         device_class: "battery",
       },
     },
@@ -146,7 +146,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "88",
       attributes: {
         unit_of_measurement: "%",
-        friendly_name: "Bella battery",
+        friendly_name: "bella batteri",
         device_class: "battery",
       },
     },
@@ -154,7 +154,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       entity_id: "binary_sensor.unifi_camera",
       state: "off",
       attributes: {
-        friendly_name: "Motion sensor camera",
+        friendly_name: "R\u00f6relsesensor kamera",
         icon: "mdi:walk",
       },
     },
@@ -707,7 +707,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
           },
         ],
         cloudiness: 25,
-        friendly_name: "Weather",
+        friendly_name: "V\u00e4der",
       },
     },
     "binary_sensor.ubiquiti_switch": {
@@ -731,7 +731,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         round_trip_time_max: "0.626",
         round_trip_time_mdev: "",
         round_trip_time_min: "0.358",
-        friendly_name: "Entrance camera",
+        friendly_name: "Entr\u00e9 kamera",
         device_class: "connectivity",
         icon: "mdi:cctv",
       },
@@ -797,7 +797,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 34,
         on: true,
-        friendly_name: "Porch motion sensor",
+        friendly_name: "altan_motion_sensor",
         device_class: "motion",
       },
     },
@@ -807,7 +807,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 88,
         on: true,
-        friendly_name: "Back door sensor",
+        friendly_name: "Altand\u00f6rren sensor",
         device_class: "opening",
         icon: "mdi:door",
       },
@@ -818,7 +818,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 74,
         on: true,
-        friendly_name: "Bathroom motion sensor",
+        friendly_name: "badrumssensor",
         device_class: "motion",
       },
     },
@@ -829,7 +829,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 47,
         on: true,
         dark: true,
-        friendly_name: "Basement motion sensor",
+        friendly_name: "R\u00f6relsesensor k\u00e4llaren 1",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -841,7 +841,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 60,
         on: true,
         dark: true,
-        friendly_name: "Laundy room motion sensor",
+        friendly_name: "R\u00f6relsesensor tv\u00e4ttstugan",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -863,7 +863,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 60,
         on: true,
-        friendly_name: "Pantry motion sensor",
+        friendly_name: "R\u00f6relsesensor skafferiet",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -875,7 +875,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 60,
         on: true,
         dark: true,
-        friendly_name: "Stair motion sensor",
+        friendly_name: "R\u00f6relsesensor k\u00e4llaren 2",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -887,7 +887,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 47,
         on: true,
         dark: true,
-        friendly_name: "Bench sensor",
+        friendly_name: "B\u00e4nksensor",
         device_class: "motion",
       },
     },

demo/src/configs/kernehed/lovelace.ts

@@ -277,7 +277,7 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
           ],
           show_header_toggle: false,
           type: "entities",
-          title: "Bandwidth",
+          title: "Bandbredd",
         },
         // {
         //   title: "Updater",

demo/src/configs/teachingbirds/lovelace.ts

@@ -377,7 +377,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_quiet",
                 },
                 service: "script.turn_on",
@@ -390,7 +390,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_auto",
                 },
                 service: "script.turn_on",
@@ -403,7 +403,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_turbo",
                 },
                 service: "script.turn_on",
@@ -416,7 +416,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_off",
                 },
                 service: "script.turn_on",
@@ -429,7 +429,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_on",
                 },
                 service: "script.turn_on",
@@ -629,7 +629,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.morning_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.morning_lights",
                     },
                     service: "scene.turn_on",
@@ -641,7 +641,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.movie_time",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.movie_time",
                     },
                     service: "scene.turn_on",
@@ -702,7 +702,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.downstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.downstairs_lights",
                     },
                     service: "light.toggle",
@@ -714,7 +714,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.upstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.upstairs_lights",
                     },
                     service: "light.toggle",

demo/src/ha-demo.ts

@@ -1,4 +1,5 @@
 // Compat needs to be first import
+import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {
@@ -6,14 +7,9 @@ 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";
-import { mockConfigEntries } from "./stubs/config_entries";
-import { mockEnergy } from "./stubs/energy";
-import { energyEntities } from "./stubs/entities";
-import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFrontend } from "./stubs/frontend";
 import { mockHistory } from "./stubs/history";
@@ -24,6 +20,9 @@ import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
+import { mockEnergy } from "./stubs/energy";
+import { mockConfig } from "./stubs/config";
+import { energyEntities } from "./stubs/entities";
 
 class HaDemo extends HomeAssistantAppEl {
   protected async _initializeHass() {
@@ -52,36 +51,8 @@ class HaDemo extends HomeAssistantAppEl {
     mockMediaPlayer(hass);
     mockFrontend(hass);
     mockEnergy(hass);
+    mockConfig(hass);
     mockPersistentNotification(hass);
-    mockConfigEntries(hass);
-    mockEntityRegistry(hass, [
-      {
-        config_entry_id: "co2signal",
-        device_id: "co2signal",
-        area_id: null,
-        disabled_by: null,
-        entity_id: "sensor.co2_intensity",
-        name: null,
-        icon: null,
-        platform: "co2signal",
-        hidden_by: null,
-        entity_category: null,
-        has_entity_name: false,
-      },
-      {
-        config_entry_id: "co2signal",
-        device_id: "co2signal",
-        area_id: null,
-        disabled_by: null,
-        entity_id: "sensor.grid_fossil_fuel_percentage",
-        name: null,
-        icon: null,
-        platform: "co2signal",
-        hidden_by: null,
-        entity_category: null,
-        has_entity_name: false,
-      },
-    ]);
 
     hass.addEntities(energyEntities());
 

demo/src/stubs/config.ts

@@ -0,0 +1,41 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockConfig = (hass: MockHomeAssistant) => {
+  hass.mockAPI("config/config_entries/entry", () => [
+    {
+      entry_id: "co2signal",
+      domain: "co2signal",
+      title: "CO2 Signal",
+      source: "user",
+      state: "loaded",
+      supports_options: false,
+      supports_unload: true,
+      pref_disable_new_entities: false,
+      pref_disable_polling: false,
+      disabled_by: null,
+      reason: null,
+    },
+  ]);
+  hass.mockWS("config/entity_registry/list", () => [
+    {
+      config_entry_id: "co2signal",
+      device_id: "co2signal",
+      area_id: null,
+      disabled_by: null,
+      entity_id: "sensor.co2_intensity",
+      name: null,
+      icon: null,
+      platform: "co2signal",
+    },
+    {
+      config_entry_id: "co2signal",
+      device_id: "co2signal",
+      area_id: null,
+      disabled_by: null,
+      entity_id: "sensor.grid_fossil_fuel_percentage",
+      name: null,
+      icon: null,
+      platform: "co2signal",
+    },
+  ]);
+};

demo/src/stubs/config_entries.ts

@@ -1,20 +0,0 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS("config_entries/get", () => [
-    {
-      entry_id: "co2signal",
-      domain: "co2signal",
-      title: "CO2 Signal",
-      source: "user",
-      state: "loaded",
-      supports_options: false,
-      supports_remove_device: false,
-      supports_unload: true,
-      pref_disable_new_entities: false,
-      pref_disable_polling: false,
-      disabled_by: null,
-      reason: null,
-    },
-  ]);
-};

demo/src/stubs/energy.ts

@@ -1,4 +1,4 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
+import { format, startOfToday, startOfTomorrow } from "date-fns";
 import { EnergySolarForecasts } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 

demo/src/stubs/entity_registry.ts

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

demo/src/stubs/history.ts

@@ -4,7 +4,7 @@ import {
   addMonths,
   differenceInHours,
   endOfDay,
-} from "date-fns/esm";
+} from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -466,7 +466,6 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
       return results;
     }
   );
-  mockHass.mockWS("recorder/get_statistics_metadata", () => []);
   mockHass.mockWS("history/list_statistic_ids", () => []);
   mockHass.mockWS(
     "history/statistics_during_period",

gallery/sidebar.js

@@ -8,7 +8,7 @@ module.exports = [
   {
     category: "lovelace",
     // Label for in the sidebar
-    header: "Dashboards",
+    header: "Lovelace",
     // Specify order of pages. Any pages in the category folder but not listed here will
     // automatically be added after the pages listed here.
     pages: ["introduction"],
@@ -34,7 +34,7 @@ module.exports = [
   },
   {
     category: "misc",
-    header: "Miscellaneous",
+    header: "Miscelaneous",
   },
   {
     category: "brand",

gallery/src/data/traces/basic_trace.ts

@@ -119,7 +119,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -164,7 +164,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_2"],
               },
@@ -182,7 +182,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_3"],
               },
@@ -200,7 +200,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -298,11 +298,11 @@ export const basicTrace: DemoTrace = {
       source: "state of input_boolean.toggle_1",
       entity_id: "automation.toggle_toggles",
       context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      when: 1616647011.240832,
+      when: "2021-03-25T04:36:51.240832+00:00",
       domain: "automation",
     },
     {
-      when: 1616647011.249828,
+      when: "2021-03-25T04:36:51.249828+00:00",
       name: "Toggle 4",
       state: "on",
       entity_id: "input_boolean.toggle_4",
@@ -313,7 +313,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.258947,
+      when: "2021-03-25T04:36:51.258947+00:00",
       name: "Toggle 2",
       state: "on",
       entity_id: "input_boolean.toggle_2",
@@ -324,7 +324,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.261806,
+      when: "2021-03-25T04:36:51.261806+00:00",
       name: "Toggle 3",
       state: "off",
       entity_id: "input_boolean.toggle_3",
@@ -335,7 +335,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.265246,
+      when: "2021-03-25T04:36:51.265246+00:00",
       name: "Toggle 4",
       state: "off",
       entity_id: "input_boolean.toggle_4",

gallery/src/data/traces/motion-light-trace.ts

@@ -185,11 +185,11 @@ export const motionLightTrace: DemoTrace = {
         "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       entity_id: "automation.auto_elgato",
-      when: 1615702021.768492,
+      when: "2021-03-14T06:07:01.768492+00:00",
       domain: "automation",
     },
     {
-      when: 1615702021.872187,
+      when: "2021-03-14T06:07:01.872187+00:00",
       name: "Elgato Key Light Air",
       state: "on",
       entity_id: "light.elgato_key_light_air",
@@ -200,7 +200,7 @@ export const motionLightTrace: DemoTrace = {
       context_name: "Auto Elgato",
     },
     {
-      when: 1615702073.284505,
+      when: "2021-03-14T06:07:53.284505+00:00",
       name: "Elgato Key Light Air",
       state: "off",
       entity_id: "light.elgato_key_light_air",

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

@@ -31,7 +31,7 @@ const ENTITIES = [
     friendly_name: "Office Light",
   }),
   getEntity("fan", "kitchen", "on", {
-    friendly_name: "Kitchen Fan",
+    friendly_name: "Second Office Fan",
   }),
   getEntity("binary_sensor", "kitchen_door", "on", {
     friendly_name: "Office Door",
@@ -102,7 +102,7 @@ class DemoArea extends LitElement {
         picture: "/images/office.jpg",
       },
       {
-        name: "Kitchen",
+        name: "Second Office",
         area_id: "kitchen",
         picture: "/images/kitchen.png",
       },

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

@@ -249,7 +249,7 @@ const CONFIGS = [
       name: Bed light
       action_name: Toggle light
       service: light.toggle
-      data:
+      service_data:
         entity_id: light.bed_light
     - type: section
       label: Links

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

@@ -199,7 +199,7 @@ const CONFIGS = [
       tap_action:
         action: call-service
         service: light.turn_on
-        data:
+        service_data:
           entity_id: light.ceiling_lights
     - entity: sun.sun
       name: Regular

gallery/src/pages/lovelace/introduction.markdown

@@ -1,11 +1,11 @@
 ---
 title: Introduction
 ---
-Dashboards have many different cards. Each card allows the user to tell
+Lovelace has many different cards. Each card allows the user to tell
 a different story about what is going on in their house. These cards
 are very customizable, as no household is the same.
 
 This gallery helps our developers and designers to see all the
 different states that each card can be in.
 
-Check [the Dashboards documentation](https://www.home-assistant.io/dashboards/) for instructions on how to get started with Dashboards.
+Check [the Lovelace documentation](https://www.home-assistant.io/lovelace) for instructions on how to get started with Lovelace.

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -40,7 +40,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      data:
+      service_data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
@@ -88,7 +88,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      data:
+      service_data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv

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

@@ -194,7 +194,6 @@ const createEntityRegistryEntries = (
     name: null,
     icon: null,
     platform: "updater",
-    has_entity_name: false,
   },
 ];
 

gallery/src/pages/more-info/light.ts

@@ -69,7 +69,7 @@ const ENTITIES = [
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_RGB_light", "on", {
-    friendly_name: "Color Effects Light",
+    friendly_name: "Color Effets Light",
     brightness: 255,
     rgb_color: [30, 100, 255],
     supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,

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

@@ -6,8 +6,10 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
 import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
-import { HassioAddonRepository } from "../../../src/data/hassio/addon";
+import {
-import { StoreAddon } from "../../../src/data/supervisor/store";
+  HassioAddonInfo,
+  HassioAddonRepository,
+} from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
@@ -21,16 +23,20 @@ class HassioAddonRepositoryEl extends LitElement {
 
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property({ attribute: false }) public addons!: StoreAddon[];
+  @property({ attribute: false }) public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
-  private _getAddons = memoizeOne((addons: StoreAddon[], filter?: string) => {
+  private _getAddons = memoizeOne(
-    if (filter) {
+    (addons: HassioAddonInfo[], filter?: string) => {
-      return filterAndSort(addons, filter);
+      if (filter) {
+        return filterAndSort(addons, filter);
+      }
+      return addons.sort((a, b) =>
+        caseInsensitiveStringCompare(a.name, b.name)
+      );
     }
-    return addons.sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
+  );
-  });
 
   protected render(): TemplateResult {
     const repo = this.repo;
@@ -81,10 +87,10 @@ class HassioAddonRepositoryEl extends LitElement {
                         ? this.supervisor.localize(
                             "common.new_version_available"
                           )
-                        : this.supervisor.localize("addon.state.installed")
+                        : this.supervisor.localize("addon.installed")
                       : addon.available
-                      ? this.supervisor.localize("addon.state.not_installed")
+                      ? this.supervisor.localize("addon.not_installed")
-                      : this.supervisor.localize("addon.state.not_available")}
+                      : this.supervisor.localize("addon.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"

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

@@ -14,15 +14,15 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
-import "../../../src/components/search-input";
 import {
+  HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
@@ -66,10 +66,10 @@ class HassioAddonStore extends LitElement {
   protected render(): TemplateResult {
     let repos: TemplateResult[] = [];
 
-    if (this.supervisor.store.repositories) {
+    if (this.supervisor.addon.repositories) {
       repos = this.addonRepositories(
-        this.supervisor.store.repositories,
+        this.supervisor.addon.repositories,
-        this.supervisor.store.addons,
+        this.supervisor.addon.addons,
         this._filter
       );
     }
@@ -145,7 +145,7 @@ class HassioAddonStore extends LitElement {
   private addonRepositories = memoizeOne(
     (
       repositories: HassioAddonRepository[],
-      addons: StoreAddon[],
+      addons: HassioAddonInfo[],
       filter?: string
     ) =>
       repositories.sort(sortRepos).map((repo) => {

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

@@ -336,7 +336,7 @@ class HassioAddonConfig extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
       this._error = this.supervisor.localize(
-        "addon.failed_to_reset",
+        "addon.common.update_available",
         "error",
         extractApiErrorMessage(err)
       );

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -81,7 +81,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
       );
     } catch (err: any) {
       this._error = this.supervisor.localize(
-        "addon.documentation.get_documentation",
+        "addon.documentation.get_logs",
         "error",
         extractApiErrorMessage(err)
       );

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

@@ -12,17 +12,12 @@ import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-circular-progress";
 import {
-  fetchAddonInfo,
   fetchHassioAddonInfo,
   fetchHassioAddonsInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import {
+import { setSupervisorOption } from "../../../src/data/hassio/supervisor";
-  addStoreRepository,
-  fetchSupervisorStore,
-  StoreAddonDetails,
-} from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
@@ -47,9 +42,7 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) public addon?:
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
-    | HassioAddonDetails
-    | StoreAddonDetails;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
@@ -176,35 +169,38 @@ class HassioAddonDashboard extends LitElement {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
       const requestedAddonRepository = extractSearchParam("repository_url");
-      if (requestedAddonRepository) {
+      if (
-        const storeInfo = await fetchSupervisorStore(this.hass);
+        requestedAddonRepository &&
+        !this.supervisor.supervisor.addons_repositories.find(
+          (repo) => repo === requestedAddonRepository
+        )
+      ) {
         if (
-          !storeInfo.repositories.find(
+          !(await showConfirmationDialog(this, {
-            (repo) => repo.source === requestedAddonRepository
+            title: this.supervisor.localize("my.add_addon_repository_title"),
-          )
+            text: this.supervisor.localize(
+              "my.add_addon_repository_description",
+              { addon: requestedAddon, repository: requestedAddonRepository }
+            ),
+            confirmText: this.supervisor.localize("common.add"),
+            dismissText: this.supervisor.localize("common.cancel"),
+          }))
         ) {
-          if (
+          this._error = this.supervisor.localize(
-            !(await showConfirmationDialog(this, {
+            "my.error_repository_not_found"
-              title: this.supervisor.localize("my.add_addon_repository_title"),
+          );
-              text: this.supervisor.localize(
+          return;
-                "my.add_addon_repository_description",
+        }
-                { addon: requestedAddon, repository: requestedAddonRepository }
-              ),
-              confirmText: this.supervisor.localize("common.add"),
-              dismissText: this.supervisor.localize("common.cancel"),
-            }))
-          ) {
-            this._error = this.supervisor.localize(
-              "my.error_repository_not_found"
-            );
-            return;
-          }
 
-          try {
+        try {
-            await addStoreRepository(this.hass, requestedAddonRepository);
+          await setSupervisorOption(this.hass, {
-          } catch (err: any) {
+            addons_repositories: [
-            this._error = extractApiErrorMessage(err);
+              ...this.supervisor.supervisor.addons_repositories,
-          }
+              requestedAddonRepository,
+            ],
+          });
+        } catch (err: any) {
+          this._error = extractApiErrorMessage(err);
         }
       }
 
@@ -244,8 +240,6 @@ class HassioAddonDashboard extends LitElement {
 
     if (path === "uninstall") {
       window.history.back();
-    } else if (path === "install") {
-      this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
     } else {
       await this._routeDataChanged();
     }
@@ -263,7 +257,8 @@ class HassioAddonDashboard extends LitElement {
       return;
     }
     try {
-      this.addon = await fetchAddonInfo(this.hass, this.supervisor, addon);
+      const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
+      this.addon = addoninfo;
     } catch (err: any) {
       this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;

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

@@ -1,6 +1,5 @@
 import { customElement, property } from "lit/decorators";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
-import { StoreAddonDetails } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
@@ -21,9 +20,7 @@ class HassioAddonRouter extends HassRouterPage {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ attribute: false }) public addon!:
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
-    | HassioAddonDetails
-    | StoreAddonDetails;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "info",

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

@@ -59,10 +59,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
-import {
+import { StoreAddon } from "../../../../src/data/supervisor/store";
-  StoreAddon,
-  StoreAddonDetails,
-} from "../../../../src/data/supervisor/store";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -103,9 +100,7 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public addon!:
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
-    | HassioAddonDetails
-    | StoreAddonDetails;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
@@ -148,7 +143,7 @@ class HassioAddonInfo extends LitElement {
             ></update-available-card>
           `
         : ""}
-      ${"protected" in this.addon && !this.addon.protected
+      ${!this.addon.protected
         ? html`
             <ha-alert
               alert-type="error"
@@ -523,7 +518,7 @@ class HassioAddonInfo extends LitElement {
                 : ""}
             </div>
             <div>
-              ${this.addon.version && this.addon.state === "started"
+              ${this.addon.state === "started"
                 ? html`<ha-settings-row ?three-line=${this.narrow}>
                       <span slot="heading">
                         ${this.supervisor.localize("addon.dashboard.hostname")}
@@ -674,7 +669,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _loadData(): Promise<void> {
-    if ("state" in this.addon && this.addon.state === "started") {
+    if (this.addon.state === "started") {
       this._metrics = await fetchHassioStats(
         this.hass,
         `addons/${this.addon.slug}`
@@ -722,22 +717,18 @@ class HassioAddonInfo extends LitElement {
   }
 
   private get _computeIsRunning(): boolean {
-    return (this.addon as HassioAddonDetails)?.state === "started";
+    return this.addon?.state === "started";
   }
 
   private get _pathWebui(): string | null {
-    return (this.addon as HassioAddonDetails).webui!.replace(
+    return (
-      "[HOST]",
+      this.addon.webui &&
-      document.location.hostname
+      this.addon.webui.replace("[HOST]", document.location.hostname)
     );
   }
 
   private get _computeShowWebUI(): boolean | "" | null {
-    return (
+    return !this.addon.ingress && this.addon.webui && this._computeIsRunning;
-      !this.addon.ingress &&
-      (this.addon as HassioAddonDetails).webui &&
-      this._computeIsRunning
-    );
   }
 
   private _openIngress(): void {
@@ -763,8 +754,7 @@ class HassioAddonInfo extends LitElement {
   private async _startOnBootToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      boot:
+      boot: this.addon.boot === "auto" ? "manual" : "auto",
-        (this.addon as HassioAddonDetails).boot === "auto" ? "manual" : "auto",
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -786,7 +776,7 @@ class HassioAddonInfo extends LitElement {
   private async _watchdogToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      watchdog: !(this.addon as HassioAddonDetails).watchdog,
+      watchdog: !this.addon.watchdog,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -808,7 +798,7 @@ class HassioAddonInfo extends LitElement {
   private async _autoUpdateToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      auto_update: !(this.addon as HassioAddonDetails).auto_update,
+      auto_update: !this.addon.auto_update,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -830,7 +820,7 @@ class HassioAddonInfo extends LitElement {
   private async _protectionToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetSecurityParams = {
-      protected: !(this.addon as HassioAddonDetails).protected,
+      protected: !this.addon.protected,
     };
     try {
       await setHassioAddonSecurity(this.hass, this.addon.slug, data);
@@ -852,7 +842,7 @@ class HassioAddonInfo extends LitElement {
   private async _panelToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      ingress_panel: !(this.addon as HassioAddonDetails).ingress_panel,
+      ingress_panel: !this.addon.ingress_panel,
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -880,7 +870,7 @@ class HassioAddonInfo extends LitElement {
 
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("addon.dashboard.changelog"),
-        content: extractChangelog(this.addon as HassioAddonDetails, content),
+        content: extractChangelog(this.addon, content),
       });
     } catch (err: any) {
       showAlertDialog(this, {

hassio/src/backups/hassio-backups.ts

@@ -98,8 +98,9 @@ export class HassioBackups extends LitElement {
     if (backup.content.addons.length !== 0) {
       for (const addon of backup.content.addons) {
         content.push(
-          this.supervisor.addon.addons.find((entry) => entry.slug === addon)
+          this.supervisor.supervisor.addons.find(
-            ?.name || addon
+            (entry) => entry.slug === addon
+          )?.name || addon
         );
       }
     }

hassio/src/components/hassio-filter-addons.ts

@@ -1,8 +1,8 @@
 import Fuse from "fuse.js";
-import { StoreAddon } from "../../../src/data/supervisor/store";
+import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 
-export function filterAndSort(addons: StoreAddon[], filter: string) {
+export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
-  const options: Fuse.IFuseOptions<StoreAddon> = {
+  const options: Fuse.IFuseOptions<HassioAddonInfo> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
     minMatchCharLength: 2,

hassio/src/components/supervisor-backup-content.ts

@@ -96,7 +96,7 @@ export class SupervisorBackupContent extends LitElement {
           : ["ssl", "share", "media", "addons/local"]
       );
       this.addons = _computeAddons(
-        this.backup ? this.backup.addons : this.supervisor?.addon.addons
+        this.backup ? this.backup.addons : this.supervisor?.supervisor.addons
       );
       this.backupType = this.backup?.type || "full";
       this.backupName = this.backup?.name || "";
@@ -168,24 +168,23 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupType === "partial"
         ? html`<div class="partial-picker">
-            ${this.backup?.homeassistant
+            <ha-formfield
-              ? html`<ha-formfield
+              .label=${html`<supervisor-formfield-label
-                  .label=${html`<supervisor-formfield-label
+                label="Home Assistant"
-                    label="Home Assistant"
+                .iconPath=${mdiHomeAssistant}
-                    .iconPath=${mdiHomeAssistant}
+                .version=${this.backup
-                    .version=${this.backup
+                  ? this.backup.homeassistant
-                      ? this.backup.homeassistant
+                  : this.hass.config.version}
-                      : this.hass.config.version}
+              >
-                  >
+              </supervisor-formfield-label>`}
-                  </supervisor-formfield-label>`}
+            >
-                >
+              <ha-checkbox
-                  <ha-checkbox
+                .checked=${this.homeAssistant}
-                    .checked=${this.homeAssistant}
+                @change=${this.toggleHomeAssistant}
-                    @change=${this.toggleHomeAssistant}
+              >
-                  >
+              </ha-checkbox>
-                  </ha-checkbox>
+            </ha-formfield>
-                </ha-formfield>`
+
-              : ""}
             ${foldersSection?.templates.length
               ? html`
                   <ha-formfield

hassio/src/dashboard/hassio-addons.ts

@@ -24,7 +24,7 @@ class HassioAddons extends LitElement {
           ? html` <h1>${this.supervisor.localize("dashboard.addons")}</h1> `
           : ""}
         <div class="card-group">
-          ${!this.supervisor.addon.addons.length
+          ${!this.supervisor.supervisor.addons?.length
             ? html`
                 <ha-card outlined>
                   <div class="card-content">
@@ -34,7 +34,7 @@ class HassioAddons extends LitElement {
                   </div>
                 </ha-card>
               `
-            : this.supervisor.addon.addons
+            : this.supervisor.supervisor.addons
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`

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

@@ -201,24 +201,26 @@ class HassioBackupDialog
     }
 
     if (!this._dialogParams?.onboarding) {
-      try {
+      this.hass!.callApi(
-        await this.hass!.callApi(
+        "POST",
-          "POST",
 
-          `hassio/${
+        `hassio/${
-            atLeastVersion(this.hass!.config.version, 2021, 9)
+          atLeastVersion(this.hass!.config.version, 2021, 9)
-              ? "backups"
+            ? "backups"
-              : "snapshots"
+            : "snapshots"
-          }/${this._backup!.slug}/restore/partial`,
+        }/${this._backup!.slug}/restore/partial`,
-          backupDetails
+        backupDetails
-        );
+      ).then(
-        this.closeDialog();
+        () => {
-      } catch (error: any) {
+          this.closeDialog();
-        this._error = error.body.message;
+        },
-      }
+        (error) => {
+          this._error = error.body.message;
+        }
+      );
     } else {
       fireEvent(this, "restoring");
-      await fetch(`/api/hassio/backups/${this._backup!.slug}/restore/partial`, {
+      fetch(`/api/hassio/backups/${this._backup!.slug}/restore/partial`, {
         method: "POST",
         body: JSON.stringify(backupDetails),
       });

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

@@ -15,18 +15,15 @@ import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import {
+  fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
-import {
-  addStoreRepository,
-  fetchStoreRepositories,
-  removeStoreRepository,
-} from "../../../../src/data/supervisor/store";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -61,13 +58,7 @@ class HassioRepositoriesDialog extends LitElement {
 
   private _filteredRepositories = memoizeOne((repos: HassioAddonRepository[]) =>
     repos
-      .filter(
+      .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
-        (repo) =>
-          repo.slug !== "core" && // The core add-ons repository
-          repo.slug !== "local" && // Locally managed add-ons
-          repo.slug !== "a0d7b954" && // Home Assistant Community Add-ons
-          repo.slug !== "5c53de3b" // The ESPHome repository
-      )
       .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
   );
 
@@ -87,7 +78,7 @@ class HassioRepositoriesDialog extends LitElement {
     const repositories = this._filteredRepositories(this._repositories);
     const usedRepositories = this._filteredUsedRepositories(
       repositories,
-      this._dialogParams.supervisor.addon.addons
+      this._dialogParams.supervisor.supervisor.addons
     );
     return html`
       <ha-dialog
@@ -224,7 +215,9 @@ class HassioRepositoriesDialog extends LitElement {
 
   private async _loadData(): Promise<void> {
     try {
-      this._repositories = await fetchStoreRepositories(this.hass);
+      const addonsinfo = await fetchHassioAddonsInfo(this.hass);
+
+      this._repositories = addonsinfo.repositories;
 
       fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
     } catch (err: any) {
@@ -238,9 +231,14 @@ class HassioRepositoriesDialog extends LitElement {
       return;
     }
     this._processing = true;
+    const repositories = this._filteredRepositories(this._repositories!);
+    const newRepositories = repositories.map((repo) => repo.source);
+    newRepositories.push(input.value);
 
     try {
-      await addStoreRepository(this.hass, input.value);
+      await setSupervisorOption(this.hass, {
+        addons_repositories: newRepositories,
+      });
       await this._loadData();
 
       input.value = "";
@@ -252,8 +250,19 @@ class HassioRepositoriesDialog extends LitElement {
 
   private async _removeRepository(ev: Event) {
     const slug = (ev.currentTarget as any).slug;
+    const repositories = this._filteredRepositories(this._repositories!);
+    const repository = repositories.find((repo) => repo.slug === slug);
+    if (!repository) {
+      return;
+    }
+    const newRepositories = repositories
+      .map((repo) => repo.source)
+      .filter((repo) => repo !== repository.source);
+
     try {
-      await removeStoreRepository(this.hass, slug);
+      await setSupervisorOption(this.hass, {
+        addons_repositories: newRepositories,
+      });
       await this._loadData();
     } catch (err: any) {
       this._error = extractApiErrorMessage(err);

hassio/src/supervisor-base-element.ts

@@ -25,7 +25,7 @@ import {
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
-import { HomeAssistant, Route, TranslationDict } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";
 
 declare global {
@@ -124,13 +124,9 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
     this.supervisor = {
       ...this.supervisor,
-      localize: await computeLocalize<TranslationDict["supervisor"]>(
+      localize: await computeLocalize(this.constructor.prototype, language, {
-        this.constructor.prototype,
+        [language]: data,
-        language,
+      }),
-        {
-          [language]: data,
-        }
-      ),
     };
   }
 

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

@@ -26,7 +26,7 @@ import {
 import {
   UNHEALTHY_REASON_URL,
   UNSUPPORTED_REASON_URL,
-} from "../../../src/panels/config/repairs/dialog-system-information";
+} from "../../../src/panels/config/system-health/ha-config-system-health";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";

package.json

@@ -72,8 +72,8 @@
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
-    "@mdi/js": "7.0.96",
+    "@mdi/js": "6.6.95",
-    "@mdi/svg": "7.0.96",
+    "@mdi/svg": "6.6.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -89,8 +89,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.0.10",
+    "@vaadin/combo-box": "^22.0.4",
-    "@vaadin/vaadin-themable-mixin": "^23.0.10",
+    "@vaadin/vaadin-themable-mixin": "^22.0.4",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -108,7 +108,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
-    "home-assistant-js-websocket": "^7.1.0",
+    "home-assistant-js-websocket": "^7.0.3",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",

pyproject.toml

@@ -1,25 +1,3 @@
 [build-system]
-requires = ["setuptools~=62.3", "wheel~=0.37.1"]
+requires = ["setuptools~=60.5", "wheel~=0.37.1"]
 build-backend = "setuptools.build_meta"
-
-[project]
-name         = "home-assistant-frontend"
-version      = "20220728.0"
-license      = {text = "Apache-2.0"}
-description  = "The Home Assistant frontend"
-readme       = "README.md"
-authors      = [
-    {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
-]
-requires-python = ">=3.4.0"
-
-[project.urls]
-"Homepage" = "https://github.com/home-assistant/frontend"
-
-[tool.setuptools]
-platforms = ["any"]
-zip-safe  = false
-include-package-data = true
-
-[tool.setuptools.packages.find]
-include = ["hass_frontend*"]

script/version_bump.js

@@ -24,15 +24,10 @@ function auto(version) {
   return patch(version);
 }
 
-function nightly() {
-  return `${today()}.dev`;
-}
-
 const methods = {
   patch,
   today,
   auto,
-  nightly,
 };
 
 async function main(args) {
@@ -55,18 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("pyproject.toml", "utf8");
+  const setup = fs.readFileSync("setup.cfg", "utf8");
-  const version = setup.match(/version\W+=\W"(\d{8}\.\d)"/)[1];
+  const version = setup.match(/\d{8}\.\d+/)[0];
   const newVersion = method(version);
 
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync(
+  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
-    "pyproject.toml",
-    setup.replace(version, newVersion),
-    "utf-8"
-  );
 
   if (!commit) {
     return;

setup.cfg

@@ -1,2 +1,26 @@
-# Setuptools v62.3 doesn't support editable installs with just 'pyproject.toml' (PEP 660).
+[metadata]
-# Keep this file until it does!
+name         = home-assistant-frontend
+version      = 20220504.0
+author       = The Home Assistant Authors
+author_email = hello@home-assistant.io
+license      = Apache-2.0
+platforms    = any
+description  = The Home Assistant frontend
+long_description = file: README.md
+long_description_content_type = text/markdown
+url          = https://github.com/home-assistant/frontend
+
+[options]
+packages = find:
+zip_safe = False
+include_package_data = True
+python_requires = >= 3.4.0
+
+[options.packages.find]
+include =
+    hass_frontend*
+
+[mypy]
+python_version = 3.4
+show_error_codes = True
+strict = True

src/common/const.ts

@@ -47,7 +47,7 @@ import {
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
-  mdiMicrophoneMessage,
+  mdiTextToSpeech,
   mdiThermometer,
   mdiThermostat,
   mdiTimerOutline,
@@ -74,9 +74,8 @@ export const FIXED_DOMAIN_ICONS = {
   camera: mdiVideo,
   climate: mdiThermostat,
   configurator: mdiCog,
-  conversation: mdiMicrophoneMessage,
+  conversation: mdiTextToSpeech,
   counter: mdiCounter,
-  demo: mdiHomeAssistant,
   fan: mdiFan,
   google_assistant: mdiGoogleAssistant,
   group: mdiGoogleCirclesCommunities,

src/common/decorators/local-storage.ts

@@ -76,11 +76,7 @@ class Storage {
   public setValue(storageKey: string, value: any): any {
     this._storage[storageKey] = value;
     try {
-      if (value === undefined) {
+      window.localStorage.setItem(storageKey, JSON.stringify(value));
-        window.localStorage.removeItem(storageKey);
-      } else {
-        window.localStorage.setItem(storageKey, JSON.stringify(value));
-      }
     } catch (err: any) {
       // Safari in private mode doesn't allow localstorage
     }

src/common/dom/ancestors-with-property.ts

@@ -1,41 +0,0 @@
-const DEFAULT_OWN = true;
-
-// Finds the closest ancestor of an element that has a specific optionally owned property,
-// traversing slot and shadow root boundaries until the body element is reached
-export const closestWithProperty = (
-  element: Element | null,
-  property: string | symbol,
-  own = DEFAULT_OWN
-) => {
-  if (!element || element === document.body) return null;
-
-  element = element.assignedSlot ?? element;
-  if (element.parentElement) {
-    element = element.parentElement;
-  } else {
-    const root = element.getRootNode();
-    element = root instanceof ShadowRoot ? root.host : null;
-  }
-
-  if (
-    own
-      ? Object.prototype.hasOwnProperty.call(element, property)
-      : element && property in element
-  )
-    return element;
-  return closestWithProperty(element, property, own);
-};
-
-// Finds the set of all such ancestors and includes starting element as first in the set
-export const ancestorsWithProperty = (
-  element: Element | null,
-  property: string | symbol,
-  own = DEFAULT_OWN
-) => {
-  const ancestors: Set<Element> = new Set();
-  while (element) {
-    ancestors.add(element);
-    element = closestWithProperty(element, property, own);
-  }
-  return ancestors;
-};

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

@@ -5,7 +5,8 @@ export type LeafletModuleType = typeof import("leaflet");
 export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
-  mapElement: HTMLElement
+  mapElement: HTMLElement,
+  darkMode?: boolean
 ): Promise<[Map, LeafletModuleType, TileLayer]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -22,7 +23,7 @@ export const setupLeafletMap = async (
   mapElement.parentNode.appendChild(style);
   map.setView([52.3731339, 4.8903147], 13);
 
-  const tileLayer = createTileLayer(Leaflet).addTo(map);
+  const tileLayer = createTileLayer(Leaflet, Boolean(darkMode)).addTo(map);
 
   return [map, Leaflet, tileLayer];
 };
@@ -30,19 +31,23 @@ export const setupLeafletMap = async (
 export const replaceTileLayer = (
   leaflet: LeafletModuleType,
   map: Map,
-  tileLayer: TileLayer
+  tileLayer: TileLayer,
+  darkMode: boolean
 ): TileLayer => {
   map.removeLayer(tileLayer);
-  tileLayer = createTileLayer(leaflet);
+  tileLayer = createTileLayer(leaflet, darkMode);
   tileLayer.addTo(map);
   return tileLayer;
 };
 
-const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
+const createTileLayer = (
+  leaflet: LeafletModuleType,
+  darkMode: boolean
+): TileLayer =>
   leaflet.tileLayer(
-    `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
+    `https://{s}.basemaps.cartocdn.com/${
-      leaflet.Browser.retina ? "@2x.png" : ".png"
+      darkMode ? "dark_all" : "light_all"
-    }`,
+    }/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x.png" : ".png"}`,
     {
       attribution:
         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',

src/common/entity/compute_active_state.ts

@@ -1,11 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE_STATES } from "../../data/entity";
 
 export const computeActiveState = (stateObj: HassEntity): string => {
-  if (UNAVAILABLE_STATES.includes(stateObj.state)) {
-    return stateObj.state;
-  }
-
   const domain = stateObj.entity_id.split(".")[0];
   let state = stateObj.state;
 

src/common/entity/compute_state_display.ts

@@ -2,74 +2,67 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
+  updateIsInstalling,
+  UpdateEntity,
   UPDATE_SUPPORT_PROGRESS,
-  updateIsInstallingFromAttributes,
 } from "../../data/update";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
+import { computeStateDomain } from "./compute_state_domain";
+import { supportsFeature } from "./supports-feature";
 import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
-import { computeDomain } from "./compute_domain";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
   state?: string
-): string =>
-  computeStateDisplayFromEntityAttributes(
-    localize,
-    locale,
-    stateObj.entity_id,
-    stateObj.attributes,
-    state !== undefined ? state : stateObj.state
-  );
-
-export const computeStateDisplayFromEntityAttributes = (
-  localize: LocalizeFunc,
-  locale: FrontendLocaleData,
-  entityId: string,
-  attributes: any,
-  state: string
 ): string => {
-  if (state === UNKNOWN || state === UNAVAILABLE) {
+  const compareState = state !== undefined ? state : stateObj.state;
-    return localize(`state.default.${state}`);
+
+  if (compareState === UNKNOWN || compareState === UNAVAILABLE) {
+    return localize(`state.default.${compareState}`);
   }
 
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
-  if (isNumericFromAttributes(attributes)) {
+  if (isNumericState(stateObj)) {
     // state is duration
     if (
-      attributes.device_class === "duration" &&
+      stateObj.attributes.device_class === "duration" &&
-      attributes.unit_of_measurement &&
+      stateObj.attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[attributes.unit_of_measurement]
+      UNIT_TO_SECOND_CONVERT[stateObj.attributes.unit_of_measurement]
     ) {
       try {
-        return formatDuration(state, attributes.unit_of_measurement);
+        return formatDuration(
+          compareState,
+          stateObj.attributes.unit_of_measurement
+        );
       } catch (_err) {
         // fallback to default
       }
     }
-    if (attributes.device_class === "monetary") {
+    if (stateObj.attributes.device_class === "monetary") {
       try {
-        return formatNumber(state, locale, {
+        return formatNumber(compareState, locale, {
           style: "currency",
-          currency: attributes.unit_of_measurement,
+          currency: stateObj.attributes.unit_of_measurement,
           minimumFractionDigits: 2,
         });
       } catch (_err) {
         // fallback to default
       }
     }
-    return `${formatNumber(state, locale)}${
+    return `${formatNumber(compareState, locale)}${
-      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
+      stateObj.attributes.unit_of_measurement
+        ? " " + stateObj.attributes.unit_of_measurement
+        : ""
     }`;
   }
 
-  const domain = computeDomain(entityId);
+  const domain = computeStateDomain(stateObj);
 
   if (domain === "input_datetime") {
     if (state !== undefined) {
@@ -104,32 +97,36 @@ export const computeStateDisplayFromEntityAttributes = (
     } else {
       // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
       let date: Date;
-      if (attributes.has_date && attributes.has_time) {
+      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
         date = new Date(
-          attributes.year,
+          stateObj.attributes.year,
-          attributes.month - 1,
+          stateObj.attributes.month - 1,
-          attributes.day,
+          stateObj.attributes.day,
-          attributes.hour,
+          stateObj.attributes.hour,
-          attributes.minute
+          stateObj.attributes.minute
         );
         return formatDateTime(date, locale);
       }
-      if (attributes.has_date) {
+      if (stateObj.attributes.has_date) {
-        date = new Date(attributes.year, attributes.month - 1, attributes.day);
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day
+        );
         return formatDate(date, locale);
       }
-      if (attributes.has_time) {
+      if (stateObj.attributes.has_time) {
         date = new Date();
-        date.setHours(attributes.hour, attributes.minute);
+        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
         return formatTime(date, locale);
       }
-      return state;
+      return stateObj.state;
     }
   }
 
   if (domain === "humidifier") {
-    if (state === "on" && attributes.humidity) {
+    if (compareState === "on" && stateObj.attributes.humidity) {
-      return `${attributes.humidity} %`;
+      return `${stateObj.attributes.humidity} %`;
     }
   }
 
@@ -139,7 +136,7 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "number" ||
     domain === "input_number"
   ) {
-    return formatNumber(state, locale);
+    return formatNumber(compareState, locale);
   }
 
   // state of button is a timestamp
@@ -147,12 +144,12 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "button" ||
     domain === "input_button" ||
     domain === "scene" ||
-    (domain === "sensor" && attributes.device_class === "timestamp")
+    (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
   ) {
     try {
-      return formatDateTime(new Date(state), locale);
+      return formatDateTime(new Date(compareState), locale);
     } catch (_err) {
-      return state;
+      return compareState;
     }
   }
 
@@ -163,28 +160,30 @@ export const computeStateDisplayFromEntityAttributes = (
     // When the latest version is skipped, show the latest version
     // When update is not available, show "Up-to-date"
     // When update is not available and there is no latest_version show "Unavailable"
-    return state === "on"
+    return compareState === "on"
-      ? updateIsInstallingFromAttributes(attributes)
+      ? updateIsInstalling(stateObj as UpdateEntity)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
+        ? supportsFeature(stateObj, UPDATE_SUPPORT_PROGRESS)
           ? localize("ui.card.update.installing_with_progress", {
-              progress: attributes.in_progress,
+              progress: stateObj.attributes.in_progress,
             })
           : localize("ui.card.update.installing")
-        : attributes.latest_version
+        : stateObj.attributes.latest_version
-      : attributes.skipped_version === attributes.latest_version
+      : stateObj.attributes.skipped_version ===
-      ? attributes.latest_version ?? localize("state.default.unavailable")
+        stateObj.attributes.latest_version
+      ? stateObj.attributes.latest_version ??
+        localize("state.default.unavailable")
       : localize("ui.card.update.up_to_date");
   }
 
   return (
     // Return device class translation
-    (attributes.device_class &&
+    (stateObj.attributes.device_class &&
       localize(
-        `component.${domain}.state.${attributes.device_class}.${state}`
+        `component.${domain}.state.${stateObj.attributes.device_class}.${compareState}`
       )) ||
     // Return default translation
-    localize(`component.${domain}.state._.${state}`) ||
+    localize(`component.${domain}.state._.${compareState}`) ||
     // We don't know! Return the raw state.
-    state
+    compareState
   );
 };

src/common/entity/compute_state_name.ts

@@ -1,13 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeObjectId } from "./compute_object_id";
 
-export const computeStateNameFromEntityAttributes = (
-  entityId: string,
-  attributes: { [key: string]: any }
-): string =>
-  attributes.friendly_name === undefined
-    ? computeObjectId(entityId).replace(/_/g, " ")
-    : attributes.friendly_name || "";
-
 export const computeStateName = (stateObj: HassEntity): string =>
-  computeStateNameFromEntityAttributes(stateObj.entity_id, stateObj.attributes);
+  stateObj.attributes.friendly_name === undefined
+    ? computeObjectId(stateObj.entity_id).replace(/_/g, " ")
+    : stateObj.attributes.friendly_name || "";

src/common/entity/domain_icon.ts

@@ -8,8 +8,6 @@ import {
   mdiCalendar,
   mdiCast,
   mdiCastConnected,
-  mdiCastOff,
-  mdiChartSankey,
   mdiCheckCircleOutline,
   mdiClock,
   mdiCloseCircleOutline,
@@ -26,22 +24,12 @@ import {
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRestart,
-  mdiSpeaker,
-  mdiSpeakerOff,
-  mdiSpeakerPause,
-  mdiSpeakerPlay,
-  mdiSwapHorizontal,
-  mdiTelevision,
-  mdiTelevisionOff,
-  mdiTelevisionPause,
-  mdiTelevisionPlay,
   mdiToggleSwitchVariant,
   mdiToggleSwitchVariantOff,
   mdiWeatherNight,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { UpdateEntity, updateIsInstalling } from "../../data/update";
+import { updateIsInstalling, UpdateEntity } from "../../data/update";
-import { weatherIcon } from "../../data/weather";
 /**
  * Return the icon to be used for a domain.
  *
@@ -58,20 +46,6 @@ export const domainIcon = (
   stateObj?: HassEntity,
   state?: string
 ): string => {
-  const icon = domainIconWithoutDefault(domain, stateObj, state);
-  if (icon) {
-    return icon;
-  }
-  // eslint-disable-next-line
-  console.warn(`Unable to find icon for domain ${domain}`);
-  return DEFAULT_DOMAIN_ICON;
-};
-
-export const domainIconWithoutDefault = (
-  domain: string,
-  stateObj?: HassEntity,
-  state?: string
-): string | undefined => {
   const compareState = state !== undefined ? state : stateObj?.state;
 
   switch (domain) {
@@ -113,15 +87,6 @@ export const domainIconWithoutDefault = (
         ? mdiCheckCircleOutline
         : mdiCloseCircleOutline;
 
-    case "input_datetime":
-      if (!stateObj?.attributes.has_date) {
-        return mdiClock;
-      }
-      if (!stateObj.attributes.has_time) {
-        return mdiCalendar;
-      }
-      break;
-
     case "lock":
       switch (compareState) {
         case "unlocked":
@@ -136,40 +101,7 @@ export const domainIconWithoutDefault = (
       }
 
     case "media_player":
-      switch (stateObj?.attributes.device_class) {
+      return compareState === "playing" ? mdiCastConnected : mdiCast;
-        case "speaker":
-          switch (compareState) {
-            case "playing":
-              return mdiSpeakerPlay;
-            case "paused":
-              return mdiSpeakerPause;
-            case "off":
-              return mdiSpeakerOff;
-            default:
-              return mdiSpeaker;
-          }
-        case "tv":
-          switch (compareState) {
-            case "playing":
-              return mdiTelevisionPlay;
-            case "paused":
-              return mdiTelevisionPause;
-            case "off":
-              return mdiTelevisionOff;
-            default:
-              return mdiTelevision;
-          }
-        default:
-          switch (compareState) {
-            case "playing":
-            case "paused":
-              return mdiCastConnected;
-            case "off":
-              return mdiCastOff;
-            default:
-              return mdiCast;
-          }
-      }
 
     case "switch":
       switch (stateObj?.attributes.device_class) {
@@ -192,31 +124,33 @@ export const domainIconWithoutDefault = (
       break;
     }
 
+    case "input_datetime":
+      if (!stateObj?.attributes.has_date) {
+        return mdiClock;
+      }
+      if (!stateObj.attributes.has_time) {
+        return mdiCalendar;
+      }
+      break;
+
     case "sun":
       return stateObj?.state === "above_horizon"
         ? FIXED_DOMAIN_ICONS[domain]
         : mdiWeatherNight;
 
-    case "switch_as_x":
-      return mdiSwapHorizontal;
-
-    case "threshold":
-      return mdiChartSankey;
-
     case "update":
       return compareState === "on"
         ? updateIsInstalling(stateObj as UpdateEntity)
           ? mdiPackageDown
           : mdiPackageUp
         : mdiPackage;
-
-    case "weather":
-      return weatherIcon(stateObj?.state);
   }
 
   if (domain in FIXED_DOMAIN_ICONS) {
     return FIXED_DOMAIN_ICONS[domain];
   }
 
-  return undefined;
+  // eslint-disable-next-line
+  console.warn(`Unable to find icon for domain ${domain}`);
+  return DEFAULT_DOMAIN_ICON;
 };

src/common/entity/supports-feature.ts

@@ -3,13 +3,6 @@ import { HassEntity } from "home-assistant-js-websocket";
 export const supportsFeature = (
   stateObj: HassEntity,
   feature: number
-): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
-
-export const supportsFeatureFromAttributes = (
-  attributes: {
-    [key: string]: any;
-  },
-  feature: number
 ): boolean =>
   // eslint-disable-next-line no-bitwise
-  (attributes.supported_features! & feature) !== 0;
+  (stateObj.attributes.supported_features! & feature) !== 0;

src/common/integrations/protocolIntegrationPicked.ts

@@ -1,88 +0,0 @@
-import { html } from "lit";
-import { getConfigEntries } from "../../data/config_entries";
-import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
-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 { fireEvent } from "../dom/fire_event";
-import { navigate } from "../navigate";
-
-export const protocolIntegrationPicked = async (
-  element: HTMLElement,
-  hass: HomeAssistant,
-  slug: string
-) => {
-  if (slug === "zwave_js") {
-    const entries = await getConfigEntries(hass, {
-      domain: "zwave_js",
-    });
-
-    if (!entries.length) {
-      // If the component isn't loaded, ask them to load the integration first
-      showConfirmationDialog(element, {
-        text: hass.localize(
-          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
-          {
-            integration: "Z-Wave",
-            supported_hardware_link: html`<a
-              href=${documentationUrl(hass, "/docs/z-wave/controllers")}
-              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: () => {
-          fireEvent(element, "handler-picked", {
-            handler: "zwave_js",
-          });
-        },
-      });
-      return;
-    }
-
-    showZWaveJSAddNodeDialog(element, {
-      entry_id: entries[0].entry_id,
-    });
-  } else if (slug === "zha") {
-    // If the component isn't loaded, ask them to load the integration first
-    if (!isComponentLoaded(hass, "zha")) {
-      showConfirmationDialog(element, {
-        text: hass.localize(
-          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
-          {
-            integration: "Zigbee",
-            supported_hardware_link: html`<a
-              href=${documentationUrl(
-                hass,
-                "/integrations/zha/#known-working-zigbee-radio-modules"
-              )}
-              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: () => {
-          fireEvent(element, "handler-picked", {
-            handler: "zha",
-          });
-        },
-      });
-      return;
-    }
-
-    navigate("/config/zha/add");
-  }
-};

src/common/number/clamp.ts

@@ -5,6 +5,6 @@ export const clamp = (value: number, min: number, max: number) =>
 export const conditionalClamp = (value: number, min?: number, max?: number) => {
   let result: number;
   result = min ? Math.max(value, min) : value;
-  result = max ? Math.min(result, max) : result;
+  result = max ? Math.min(value, max) : value;
   return result;
 };

src/common/number/format_number.ts

@@ -7,11 +7,8 @@ import { round } from "./round";
  * @param stateObj The entity state object
  */
 export const isNumericState = (stateObj: HassEntity): boolean =>
-  isNumericFromAttributes(stateObj.attributes);
+  !!stateObj.attributes.unit_of_measurement ||
-
+  !!stateObj.attributes.state_class;
-export const isNumericFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData

src/common/style/icon_color_css.ts

@@ -70,9 +70,7 @@ export const iconColorCSS = css`
     }
   }
 
-  ha-state-icon[data-domain="plant"][data-state="problem"] {
+  ha-state-icon[data-domain="plant"][data-state="problem"],
-    color: var(--state-icon-error-color);
-  }
 
   /* Color the icon if unavailable */
   ha-state-icon[data-state="unavailable"] {

src/common/translations/localize.ts

@@ -3,39 +3,10 @@ import { shouldPolyfill as shouldPolyfillPluralRules } from "@formatjs/intl-plur
 import { shouldPolyfill as shouldPolyfillRelativeTime } from "@formatjs/intl-relativetimeformat/lib/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDateTime } from "@formatjs/intl-datetimeformat/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
-import { Resources, TranslationDict } from "../../types";
+import { Resources } from "../../types";
 import { getLocalLanguage } from "../../util/common-translation";
 
-// Exclude some patterns from key type checking for now
+export type LocalizeFunc = (key: string, ...args: any[]) => string;
-// These are intended to be removed as errors are fixed
-// Fixing component category will require tighter definition of types from backend and/or web socket
-type LocalizeKeyExceptions =
-  | `${string}`
-  | `panel.${string}`
-  | `state.${string}`
-  | `state_attributes.${string}`
-  | `state_badge.${string}`
-  | `ui.${string}`
-  | `${keyof TranslationDict["supervisor"]}.${string}`
-  | `component.${string}`;
-
-// Tweaked from https://www.raygesualdo.com/posts/flattening-object-keys-with-typescript-types
-type FlattenObjectKeys<
-  T extends Record<string, any>,
-  Key extends keyof T = keyof T
-> = Key extends string
-  ? T[Key] extends Record<string, unknown>
-    ? `${Key}.${FlattenObjectKeys<T[Key]>}`
-    : `${Key}`
-  : never;
-
-export type LocalizeFunc<
-  Dict extends Record<string, unknown> = TranslationDict
-> = (
-  key: FlattenObjectKeys<Dict> | LocalizeKeyExceptions,
-  ...args: any[]
-) => string;
-
 interface FormatType {
   [format: string]: any;
 }
@@ -94,14 +65,12 @@ export const polyfillsLoaded =
  * }
  */
 
-export const computeLocalize = async <
+export const computeLocalize = async (
-  Dict extends Record<string, unknown> = TranslationDict
->(
   cache: any,
   language: string,
   resources: Resources,
   formats?: FormatsType
-): Promise<LocalizeFunc<Dict>> => {
+): Promise<LocalizeFunc> => {
   if (polyfillsLoaded) {
     await polyfillsLoaded;
   }

src/common/util/compute_rtl.ts

@@ -1,4 +1,3 @@
-import { LitElement } from "lit";
 import { HomeAssistant } from "../../types";
 
 export function computeRTL(hass: HomeAssistant) {
@@ -16,21 +15,3 @@ export function computeRTLDirection(hass: HomeAssistant) {
 export function emitRTLDirection(rtl: boolean) {
   return rtl ? "rtl" : "ltr";
 }
-
-export function computeDirectionStyles(isRTL: boolean, element: LitElement) {
-  const direction: string = emitRTLDirection(isRTL);
-  setDirectionStyles(direction, element);
-}
-
-export function setDirectionStyles(direction: string, element: LitElement) {
-  element.style.direction = direction;
-  element.style.setProperty("--direction", direction);
-  element.style.setProperty(
-    "--float-start",
-    direction === "ltr" ? "left" : "right"
-  );
-  element.style.setProperty(
-    "--float-end",
-    direction === "ltr" ? "right" : "left"
-  );
-}

src/common/util/throttle.ts

@@ -13,7 +13,7 @@ export const throttle = <T extends any[]>(
 ) => {
   let timeout: number | undefined;
   let previous = 0;
-  const throttledFunc = (...args: T): void => {
+  return (...args: T): void => {
     const later = () => {
       previous = leading === false ? 0 : Date.now();
       timeout = undefined;
@@ -35,10 +35,4 @@ export const throttle = <T extends any[]>(
       timeout = window.setTimeout(later, remaining);
     }
   };
-  throttledFunc.cancel = () => {
-    clearTimeout(timeout);
-    timeout = undefined;
-    previous = 0;
-  };
-  return throttledFunc;
 };

src/components/chart/chart-date-adapter.ts

@@ -34,7 +34,7 @@ import {
   endOfMonth,
   endOfQuarter,
   endOfYear,
-} from "date-fns/esm";
+} from "date-fns";
 import {
   formatDate,
   formatDateMonth,

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

@@ -11,8 +11,6 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { clamp } from "../../common/number/clamp";
 
-export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
-
 interface Tooltip extends TooltipModel<any> {
   top: string;
   left: string;
@@ -39,26 +37,6 @@ export default class HaChartBase extends LitElement {
 
   @state() private _hiddenDatasets: Set<number> = new Set();
 
-  private _releaseCanvas() {
-    // release the canvas memory to prevent
-    // safari from running out of memory.
-    if (this.chart) {
-      this.chart.destroy();
-    }
-  }
-
-  public disconnectedCallback() {
-    this._releaseCanvas();
-    super.disconnectedCallback();
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this._setupChart();
-    }
-  }
-
   protected firstUpdated() {
     this._setupChart();
     this.data.datasets.forEach((dataset, index) => {
@@ -188,10 +166,6 @@ export default class HaChartBase extends LitElement {
     ChartConstructor.defaults.color = computedStyles.getPropertyValue(
       "--secondary-text-color"
     );
-    ChartConstructor.defaults.font.family =
-      computedStyles.getPropertyValue("--mdc-typography-body1-font-family") ||
-      computedStyles.getPropertyValue("--mdc-typography-font-family") ||
-      "Roboto, Noto, sans-serif";
 
     this.chart = new ChartConstructor(ctx, {
       type: this.chartType,
@@ -330,9 +304,6 @@ export default class HaChartBase extends LitElement {
         width: 16px;
         flex-shrink: 0;
         box-sizing: border-box;
-        margin-inline-end: 6px;
-        margin-inline-start: initial;
-        direction: var(--direction);
       }
       .chartTooltip .bullet {
         align-self: baseline;
@@ -341,9 +312,6 @@ export default class HaChartBase extends LitElement {
       :host([rtl]) .chartTooltip .bullet {
         margin-right: inherit;
         margin-left: 6px;
-        margin-inline-end: inherit;
-        margin-inline-start: 6px;
-        direction: var(--direction);
       }
       .chartTooltip {
         padding: 8px;
@@ -380,7 +348,6 @@ export default class HaChartBase extends LitElement {
       .chartTooltip .title {
         text-align: center;
         font-weight: 500;
-        direction: ltr;
       }
       .chartTooltip .footer {
         font-weight: 500;

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

@@ -8,7 +8,7 @@ import {
 } from "../../common/number/format_number";
 import { LineChartEntity, LineChartState } from "../../data/history";
 import { HomeAssistant } from "../../types";
-import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import "./ha-chart-base";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -28,13 +28,11 @@ class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public isSingleDevice = false;
 
-  @property({ attribute: false }) public endTime!: Date;
+  @property({ attribute: false }) public endTime?: Date;
 
   @state() private _chartData?: ChartData<"line">;
 
-  @state() private _chartOptions?: ChartOptions;
+  @state() private _chartOptions?: ChartOptions<"line">;
-
-  private _chartTime: Date = new Date();
 
   protected render() {
     return html`
@@ -59,7 +57,6 @@ class StateHistoryChartLine extends LitElement {
                 locale: this.hass.locale,
               },
             },
-            suggestedMax: this.endTime,
             ticks: {
               maxRotation: 0,
               sampleSize: 5,
@@ -123,13 +120,7 @@ class StateHistoryChartLine extends LitElement {
         locale: numberFormatToLocale(this.hass.locale),
       };
     }
-    if (
+    if (changedProps.has("data")) {
-      changedProps.has("data") ||
-      this._chartTime <
-        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
-    ) {
-      // If the line is more than 5 minutes old, re-gen it
-      // so the X axis grows even if there is no new data
       this._generateData();
     }
   }
@@ -139,12 +130,28 @@ class StateHistoryChartLine extends LitElement {
     const computedStyles = getComputedStyle(this);
     const entityStates = this.data;
     const datasets: ChartDataset<"line">[] = [];
+    let endTime: Date;
+
     if (entityStates.length === 0) {
       return;
     }
 
-    this._chartTime = new Date();
+    endTime =
-    const endTime = this.endTime;
+      this.endTime ||
+      // Get the highest date from the last date of each device
+      new Date(
+        Math.max(
+          ...entityStates.map((devSts) =>
+            new Date(
+              devSts.states[devSts.states.length - 1].last_changed
+            ).getTime()
+          )
+        )
+      );
+    if (endTime > new Date()) {
+      endTime = new Date();
+    }
+
     const names = this.names || {};
     entityStates.forEach((states) => {
       const domain = states.domain;

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

@@ -9,7 +9,7 @@ import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { TimelineEntity } from "../../data/history";
 import { HomeAssistant } from "../../types";
-import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 
 /** Binary sensor device classes for which the static colors for on/off are NOT inverted.
@@ -83,8 +83,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public data: TimelineEntity[] = [];
 
-  @property() public narrow!: boolean;
-
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
@@ -93,18 +91,12 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ type: Boolean }) public isSingleDevice = false;
 
-  @property({ type: Boolean }) public chunked = false;
+  @property({ attribute: false }) public endTime?: Date;
-
-  @property({ attribute: false }) public startTime!: Date;
-
-  @property({ attribute: false }) public endTime!: Date;
 
   @state() private _chartData?: ChartData<"timeline">;
 
   @state() private _chartOptions?: ChartOptions<"timeline">;
 
-  private _chartTime: Date = new Date();
-
   protected render() {
     return html`
       <ha-chart-base
@@ -118,7 +110,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   public willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
-      const narrow = this.narrow;
       this._chartOptions = {
         maintainAspectRatio: false,
         parsing: false,
@@ -132,8 +123,6 @@ export class StateHistoryChartTimeline extends LitElement {
                 locale: this.hass.locale,
               },
             },
-            suggestedMin: this.startTime,
-            suggestedMax: this.endTime,
             ticks: {
               autoSkip: true,
               maxRotation: 0,
@@ -164,18 +153,11 @@ export class StateHistoryChartTimeline extends LitElement {
               drawTicks: false,
             },
             ticks: {
-              display:
+              display: this.data.length !== 1,
-                this.chunked || !this.isSingleDevice || this.data.length !== 1,
             },
             afterSetDimensions: (y) => {
               y.maxWidth = y.chart.width * 0.18;
             },
-            afterFit: (scaleInstance) => {
-              if (this.chunked) {
-                // ensure all the chart labels are the same width
-                scaleInstance.width = narrow ? 105 : 185;
-              }
-            },
             position: computeRTL(this.hass) ? "right" : "left",
           },
         },
@@ -213,13 +195,7 @@ export class StateHistoryChartTimeline extends LitElement {
         locale: numberFormatToLocale(this.hass.locale),
       };
     }
-    if (
+    if (changedProps.has("data")) {
-      changedProps.has("data") ||
-      this._chartTime <
-        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
-    ) {
-      // If the line is more than 5 minutes old, re-gen it
-      // so the X axis grows even if there is no new data
       this._generateData();
     }
   }
@@ -232,9 +208,34 @@ export class StateHistoryChartTimeline extends LitElement {
       stateHistory = [];
     }
 
-    this._chartTime = new Date();
+    const startTime = new Date(
-    const startTime = this.startTime;
+      stateHistory.reduce(
-    const endTime = this.endTime;
+        (minTime, stateInfo) =>
+          Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
+        new Date().getTime()
+      )
+    );
+
+    // end time is Math.max(startTime, last_event)
+    let endTime =
+      this.endTime ||
+      new Date(
+        stateHistory.reduce(
+          (maxTime, stateInfo) =>
+            Math.max(
+              maxTime,
+              new Date(
+                stateInfo.data[stateInfo.data.length - 1].last_changed
+              ).getTime()
+            ),
+          startTime.getTime()
+        )
+      );
+
+    if (endTime > new Date()) {
+      endTime = new Date();
+    }
+
     const labels: string[] = [];
     const datasets: ChartDataset<"timeline">[] = [];
     const names = this.names || {};

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

@@ -1,4 +1,3 @@
-import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -7,29 +6,12 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, eventOptions } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import {
+import { HistoryResult } from "../../data/history";
-  HistoryResult,
-  LineChartUnit,
-  TimelineEntity,
-} from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
-import { restoreScroll } from "../../common/decorators/restore-scroll";
-
-const CANVAS_TIMELINE_ROWS_CHUNK = 10; // Split up the canvases to avoid hitting the render limit
-
-const chunkData = (inputArray: any[], chunks: number) =>
-  inputArray.reduce((results, item, idx) => {
-    const chunkIdx = Math.floor(idx / chunks);
-    if (!results[chunkIdx]) {
-      results[chunkIdx] = [];
-    }
-    results[chunkIdx].push(item);
-    return results;
-  }, []);
 
 @customElement("state-history-charts")
 class StateHistoryCharts extends LitElement {
@@ -37,13 +19,8 @@ class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public historyData!: HistoryResult;
 
-  @property() public narrow!: boolean;
-
   @property({ type: Boolean }) public names = false;
 
-  @property({ type: Boolean, attribute: "virtualize", reflect: true })
-  public virtualize = false;
-
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
@@ -52,104 +29,59 @@ class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
-  @state() private _computedStartTime!: Date;
-
-  @state() private _computedEndTime!: Date;
-
-  // @ts-ignore
-  @restoreScroll(".container") private _savedScrollPos?: number;
-
-  @eventOptions({ passive: true })
   protected render(): TemplateResult {
     if (!isComponentLoaded(this.hass, "history")) {
-      return html`<div class="info">
+      return html` <div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
     }
 
     if (this.isLoadingData && !this.historyData) {
-      return html`<div class="info">
+      return html` <div class="info">
         ${this.hass.localize("ui.components.history_charts.loading_history")}
       </div>`;
     }
 
     if (this._isHistoryEmpty()) {
-      return html`<div class="info">
+      return html` <div class="info">
         ${this.hass.localize("ui.components.history_charts.no_history_found")}
       </div>`;
     }
 
-    const now = new Date();
+    const computedEndTime = this.upToNow
+      ? new Date()
+      : this.endTime || new Date();
 
-    this._computedEndTime =
+    return html`
-      this.upToNow || !this.endTime || this.endTime > now ? now : this.endTime;
+      ${this.historyData.timeline.length
-
+        ? html`
-    this._computedStartTime = new Date(
+            <state-history-chart-timeline
-      this.historyData.timeline.reduce(
+              .hass=${this.hass}
-        (minTime, stateInfo) =>
+              .data=${this.historyData.timeline}
-          Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
+              .endTime=${computedEndTime}
-        new Date().getTime()
+              .noSingle=${this.noSingle}
-      )
+              .names=${this.names}
-    );
+            ></state-history-chart-timeline>
-
+          `
-    const combinedItems = this.historyData.timeline.length
+        : html``}
-      ? (this.virtualize
+      ${this.historyData.line.map(
-          ? chunkData(this.historyData.timeline, CANVAS_TIMELINE_ROWS_CHUNK)
+        (line) => html`
-          : [this.historyData.timeline]
+          <state-history-chart-line
-        ).concat(this.historyData.line)
+            .hass=${this.hass}
-      : this.historyData.line;
+            .unit=${line.unit}
-
+            .data=${line.data}
-    return this.virtualize
+            .identifier=${line.identifier}
-      ? html`<div class="container ha-scrollbar" @scroll=${this._saveScrollPos}>
+            .isSingleDevice=${!this.noSingle &&
-          <lit-virtualizer
+            line.data &&
-            scroller
+            line.data.length === 1}
-            class="ha-scrollbar"
+            .endTime=${computedEndTime}
-            .items=${combinedItems}
+            .names=${this.names}
-            .renderItem=${this._renderHistoryItem}
+          ></state-history-chart-line>
-          >
+        `
-          </lit-virtualizer>
+      )}
-        </div>`
+    `;
-      : html`${combinedItems.map((item, index) =>
-          this._renderHistoryItem(item, index)
-        )}`;
   }
 
-  private _renderHistoryItem = (
-    item: TimelineEntity[] | LineChartUnit,
-    index: number
-  ): TemplateResult => {
-    if (!item || index === undefined) {
-      return html``;
-    }
-    if (!Array.isArray(item)) {
-      return html`<div class="entry-container">
-        <state-history-chart-line
-          .hass=${this.hass}
-          .unit=${item.unit}
-          .data=${item.data}
-          .identifier=${item.identifier}
-          .isSingleDevice=${!this.noSingle &&
-          this.historyData.line?.length === 1}
-          .endTime=${this._computedEndTime}
-          .names=${this.names}
-        ></state-history-chart-line>
-      </div> `;
-    }
-    return html`<div class="entry-container">
-      <state-history-chart-timeline
-        .hass=${this.hass}
-        .data=${item}
-        .startTime=${this._computedStartTime}
-        .endTime=${this._computedEndTime}
-        .isSingleDevice=${!this.noSingle &&
-        this.historyData.timeline?.length === 1}
-        .names=${this.names}
-        .narrow=${this.narrow}
-        .chunked=${this.virtualize}
-      ></state-history-chart-timeline>
-    </div> `;
-  };
-
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     return !(changedProps.size === 1 && changedProps.has("hass"));
   }
@@ -164,11 +96,6 @@ class StateHistoryCharts extends LitElement {
     return !this.isLoadingData && historyDataEmpty;
   }
 
-  @eventOptions({ passive: true })
-  private _saveScrollPos(e: Event) {
-    this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -176,48 +103,11 @@ class StateHistoryCharts extends LitElement {
         /* height of single timeline chart = 60px */
         min-height: 60px;
       }
-
-      :host([virtualize]) {
-        height: 100%;
-      }
-
       .info {
         text-align: center;
         line-height: 60px;
         color: var(--secondary-text-color);
       }
-
-      .container {
-        max-height: var(--history-max-height);
-      }
-
-      .entry-container {
-        width: 100%;
-      }
-
-      .entry-container:hover {
-        z-index: 1;
-      }
-
-      :host([virtualize]) .entry-container {
-        padding-left: 1px;
-        padding-right: 1px;
-      }
-
-      .container,
-      lit-virtualizer {
-        height: 100%;
-        width: 100%;
-      }
-
-      lit-virtualizer {
-        contain: size layout !important;
-      }
-
-      state-history-chart-timeline,
-      state-history-chart-line {
-        width: 100%;
-      }
     `;
   }
 }

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

@@ -269,8 +269,8 @@ export class HaDataTable extends LitElement {
                       @change=${this._handleHeaderRowCheckboxClick}
                       .indeterminate=${this._checkedRows.length &&
                       this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length &&
+                      .checked=${this._checkedRows.length ===
-                      this._checkedRows.length === this._checkableRowsCount}
+                      this._checkableRowsCount}
                     >
                     </ha-checkbox>
                   </div>

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

@@ -20,7 +20,7 @@ interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
 }
 
-export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
@@ -31,7 +31,6 @@ const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
     <span>${item.friendly_name}</span>
     <span slot="secondary">${item.entity_id}</span>
   </mwc-list-item>`;
-
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/components/entity/state-badge.ts

@@ -12,10 +12,8 @@ import { property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeActiveState } from "../../common/entity/compute_active_state";
-import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { iconColorCSS } from "../../common/style/icon_color_css";
-import { cameraUrlWithWidthHeight } from "../../data/camera";
 import type { HomeAssistant } from "../../types";
 import "../ha-state-icon";
 
@@ -95,9 +93,6 @@ export class StateBadge extends LitElement {
         if (this.hass) {
           imageUrl = this.hass.hassUrl(imageUrl);
         }
-        if (computeDomain(stateObj.entity_id) === "camera") {
-          imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
-        }
         hostStyle.backgroundImage = `url(${imageUrl})`;
         this._showIcon = false;
       } else if (stateObj.state === "on") {

src/components/ha-addon-picker.ts

@@ -4,7 +4,8 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
-import { fetchHassioAddonsInfo, HassioAddonInfo } from "../data/hassio/addon";
+import { HassioAddonInfo } from "../data/hassio/addon";
+import { fetchHassioSupervisorInfo } from "../data/hassio/supervisor";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
@@ -77,27 +78,27 @@ class HaAddonPicker extends LitElement {
   private async _getAddons() {
     try {
       if (isComponentLoaded(this.hass, "hassio")) {
-        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-        this._addons = addonsInfo.addons
+        this._addons = supervisorInfo.addons.sort((a, b) =>
-          .filter((addon) => addon.version)
+          stringCompare(a.name, b.name)
-          .sort((a, b) => stringCompare(a.name, b.name));
+        );
       } else {
         showAlertDialog(this, {
           title: this.hass.localize(
-            "ui.components.addon-picker.error.no_supervisor.title"
+            "ui.componencts.addon-picker.error.no_supervisor.title"
           ),
           text: this.hass.localize(
-            "ui.components.addon-picker.error.no_supervisor.description"
+            "ui.componencts.addon-picker.error.no_supervisor.description"
           ),
         });
       }
     } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize(
-          "ui.components.addon-picker.error.fetch_addons.title"
+          "ui.componencts.addon-picker.error.fetch_addons.title"
         ),
         text: this.hass.localize(
-          "ui.components.addon-picker.error.fetch_addons.description"
+          "ui.componencts.addon-picker.error.fetch_addons.description"
         ),
       });
     }

src/components/ha-attributes.ts

@@ -76,7 +76,6 @@ class HaAttributes extends LitElement {
       css`
         .attribute-container {
           margin-bottom: 8px;
-          direction: ltr;
         }
         .data-entry {
           display: flex;

src/components/ha-blueprint-picker.ts

@@ -51,7 +51,7 @@ class HaBluePrintPicker extends LitElement {
     return html`
       <ha-select
         .label=${this.label ||
-        this.hass.localize("ui.components.blueprint-picker.select_blueprint")}
+        this.hass.localize("ui.components.blueprint-picker.label")}
         fixedMenuPosition
         naturalMenuWidth
         .value=${this.value}

src/components/ha-button-menu.ts

@@ -1,22 +1,17 @@
-import type { Button } from "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
-import type { HaIconButton } from "./ha-icon-button";
 
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
-  protected readonly [FOCUS_TARGET];
-
   @property() public corner: Corner = "TOP_START";
 
   @property() public menuCorner: MenuCorner = "START";
 
-  @property({ type: Number }) public x: number | null = null;
+  @property({ type: Number }) public x?: number;
 
-  @property({ type: Number }) public y: number | null = null;
+  @property({ type: Number }) public y?: number;
 
   @property({ type: Boolean }) public multi = false;
 
@@ -36,18 +31,10 @@ export class HaButtonMenu extends LitElement {
     return this._menu?.selected;
   }
 
-  public override focus() {
-    if (this._menu?.open) {
-      this._menu.focusItemAtIndex(0);
-    } else {
-      this._triggerButton?.focus();
-    }
-  }
-
   protected render(): TemplateResult {
     return html`
       <div @click=${this._handleClick}>
-        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
+        <slot name="trigger"></slot>
       </div>
       <mwc-menu
         .corner=${this.corner}
@@ -63,21 +50,6 @@ export class HaButtonMenu extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps): void {
-    super.firstUpdated(changedProps);
-
-    if (document.dir === "rtl") {
-      this.updateComplete.then(() => {
-        this.querySelectorAll("mwc-list-item").forEach((item) => {
-          const style = document.createElement("style");
-          style.innerHTML =
-            "span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}";
-          item!.shadowRoot!.appendChild(style);
-        });
-      });
-    }
-  }
-
   private _handleClick(): void {
     if (this.disabled) {
       return;
@@ -86,18 +58,6 @@ export class HaButtonMenu extends LitElement {
     this._menu!.show();
   }
 
-  private get _triggerButton() {
-    return this.querySelector(
-      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"]'
-    ) as HaIconButton | Button | null;
-  }
-
-  private _setTriggerAria() {
-    if (this._triggerButton) {
-      this._triggerButton.ariaHasPopup = "menu";
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {

src/components/ha-chip.ts

@@ -66,12 +66,9 @@ export class HaChip extends LitElement {
         line-height: 14px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
-      .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
+      .mdc-chip.no-text
-      .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
+        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
-        margin-inline-start: -4px;
-        margin-inline-end: 4px;
-        direction: var(--direction);
       }
 
       span[role="gridcell"] {

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

@@ -1,13 +1,17 @@
-import { css, CSSResultGroup, html } from "lit";
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+import { css, CSSResult, html } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { HaListItem } from "./ha-list-item";
 
 @customElement("ha-clickable-list-item")
-export class HaClickableListItem extends HaListItem {
+export class HaClickableListItem extends ListItemBase {
   @property() public href?: string;
 
   @property({ type: Boolean }) public disableHref = false;
 
+  // property used only in css
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
   @property({ type: Boolean, reflect: true }) public openNewTab = false;
 
   @query("a") private _anchor!: HTMLAnchorElement;
@@ -35,10 +39,22 @@ export class HaClickableListItem extends HaListItem {
     });
   }
 
-  static get styles(): CSSResultGroup {
+  static get styles(): CSSResult[] {
     return [
-      super.styles,
+      styles,
       css`
+        :host {
+          padding-left: 0px;
+          padding-right: 0px;
+        }
+        :host([rtl]) span {
+          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
+          margin-right: 0px !important;
+        }
+        :host([graphic="avatar"]:not([twoLine])),
+        :host([graphic="icon"]:not([twoLine])) {
+          height: 48px;
+        }
         a {
           width: 100%;
           height: 100%;

src/components/ha-climate-state.ts

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatNumber } from "../common/number/format_number";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
-import { UNAVAILABLE_STATES } from "../data/entity";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-climate-state")
@@ -16,22 +15,22 @@ class HaClimateState extends LitElement {
     const currentStatus = this._computeCurrentStatus();
 
     return html`<div class="target">
-        ${!UNAVAILABLE_STATES.includes(this.stateObj.state)
+        ${this.stateObj.state !== "unknown"
           ? html`<span class="state-label">
-                ${this._localizeState()}
+              ${this._localizeState()}
-                ${this.stateObj.attributes.preset_mode &&
+              ${this.stateObj.attributes.preset_mode &&
-                this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
+              this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
-                  ? html`-
+                ? html`-
-                    ${this.hass.localize(
+                  ${this.hass.localize(
-                      `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
+                    `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
-                    ) || this.stateObj.attributes.preset_mode}`
+                  ) || this.stateObj.attributes.preset_mode}`
-                  : ""}
+                : ""}
-              </span>
+            </span>`
-              <div class="unit">${this._computeTarget()}</div>`
+          : ""}
-          : this._localizeState()}
+        <div class="unit">${this._computeTarget()}</div>
       </div>
 
-      ${currentStatus && !UNAVAILABLE_STATES.includes(this.stateObj.state)
+      ${currentStatus
         ? html`<div class="current">
             ${this.hass.localize("ui.card.climate.currently")}:
             <div class="unit">${currentStatus}</div>
@@ -109,10 +108,6 @@ class HaClimateState extends LitElement {
   }
 
   private _localizeState(): string {
-    if (UNAVAILABLE_STATES.includes(this.stateObj.state)) {
-      return this.hass.localize(`state.default.${this.stateObj.state}`);
-    }
-
     const stateString = this.hass.localize(
       `component.climate.state._.${this.stateObj.state}`
     );

src/components/ha-code-editor.ts

@@ -2,7 +2,6 @@ import type {
   Completion,
   CompletionContext,
   CompletionResult,
-  CompletionSource,
 } from "@codemirror/autocomplete";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import { HassEntities } from "home-assistant-js-websocket";
@@ -12,7 +11,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
 import { HomeAssistant } from "../types";
-import "./ha-icon";
 
 declare global {
   interface HASSDomEvents {
@@ -28,12 +26,6 @@ const saveKeyBinding: KeyBinding = {
   },
 };
 
-const renderIcon = (completion: Completion) => {
-  const icon = document.createElement("ha-icon");
-  icon.icon = completion.label;
-  return icon;
-};
-
 @customElement("ha-code-editor")
 export class HaCodeEditor extends ReactiveElement {
   public codemirror?: EditorView;
@@ -49,17 +41,12 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "autocomplete-entities" })
   public autocompleteEntities = false;
 
-  @property({ type: Boolean, attribute: "autocomplete-icons" })
-  public autocompleteIcons = false;
-
   @property() public error = false;
 
   @state() private _value = "";
 
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
-  private _iconList?: Completion[];
-
   public set value(value: string) {
     this._value = value;
   }
@@ -164,22 +151,13 @@ export class HaCodeEditor extends ReactiveElement {
       ),
     ];
 
-    if (!this.readOnly) {
+    if (!this.readOnly && this.autocompleteEntities && this.hass) {
-      const completionSources: CompletionSource[] = [];
+      extensions.push(
-      if (this.autocompleteEntities && this.hass) {
+        this._loadedCodeMirror.autocompletion({
-        completionSources.push(this._entityCompletions.bind(this));
+          override: [this._entityCompletions.bind(this)],
-      }
+          maxRenderedOptions: 10,
-      if (this.autocompleteIcons) {
+        })
-        completionSources.push(this._mdiCompletions.bind(this));
+      );
-      }
-      if (completionSources.length > 0) {
-        extensions.push(
-          this._loadedCodeMirror.autocompletion({
-            override: completionSources,
-            maxRenderedOptions: 10,
-          })
-        );
-      }
     }
 
     this.codemirror = new this._loadedCodeMirror.EditorView({
@@ -209,7 +187,7 @@ export class HaCodeEditor extends ReactiveElement {
   private _entityCompletions(
     context: CompletionContext
   ): CompletionResult | null | Promise<CompletionResult | null> {
-    const entityWord = context.matchBefore(/[a-z_]{3,}\.\w*/);
+    const entityWord = context.matchBefore(/[a-z_]{3,}\./);
 
     if (
       !entityWord ||
@@ -227,48 +205,7 @@ export class HaCodeEditor extends ReactiveElement {
     return {
       from: Number(entityWord.from),
       options: states,
-      span: /^[a-z_]{3,}\.\w*$/,
+      span: /^\w*.\w*$/,
-    };
-  }
-
-  private _getIconItems = async (): Promise<Completion[]> => {
-    if (!this._iconList) {
-      let iconList: {
-        name: string;
-        keywords: string[];
-      }[];
-      if (__SUPERVISOR__) {
-        iconList = [];
-      } else {
-        iconList = (await import("../../build/mdi/iconList.json")).default;
-      }
-
-      this._iconList = iconList.map((icon) => ({
-        type: "variable",
-        label: `mdi:${icon.name}`,
-        detail: icon.keywords.join(", "),
-        info: renderIcon,
-      }));
-    }
-
-    return this._iconList;
-  };
-
-  private async _mdiCompletions(
-    context: CompletionContext
-  ): Promise<CompletionResult | null> {
-    const match = context.matchBefore(/mdi:\S*/);
-
-    if (!match || (match.from === match.to && !context.explicit)) {
-      return null;
-    }
-
-    const iconItems = await this._getIconItems();
-
-    return {
-      from: Number(match.from),
-      options: iconItems,
-      span: /^mdi:\S*$/,
     };
   }
 

src/components/ha-combo-box.ts

@@ -1,17 +1,13 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
-import type {
+import type { ComboBoxLight } from "@vaadin/combo-box/vaadin-combo-box-light";
-  ComboBoxLight,
-  ComboBoxLightFilterChangedEvent,
-  ComboBoxLightOpenedChangedEvent,
-  ComboBoxLightValueChangedEvent,
-} from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
@@ -100,8 +96,6 @@ export class HaComboBox extends LitElement {
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
-  private _overlayMutationObserver?: MutationObserver;
-
   public open() {
     this.updateComplete.then(() => {
       this._comboBox?.open();
@@ -114,14 +108,6 @@ export class HaComboBox extends LitElement {
     });
   }
 
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._overlayMutationObserver) {
-      this._overlayMutationObserver.disconnect();
-      this._overlayMutationObserver = undefined;
-    }
-  }
-
   public get selectedItem() {
     return this._comboBox.selectedItem;
   }
@@ -207,64 +193,21 @@ export class HaComboBox extends LitElement {
     }
   }
 
-  private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
-    const opened = ev.detail.value;
     // delay this so we can handle click event before setting _opened
     setTimeout(() => {
-      this._opened = opened;
+      this._opened = ev.detail.value;
     }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
-
-    if (
-      opened &&
-      "MutationObserver" in window &&
-      !this._overlayMutationObserver
-    ) {
-      const overlay = document.querySelector<HTMLElement>(
-        "vaadin-combo-box-overlay"
-      );
-
-      if (!overlay) {
-        return;
-      }
-
-      this._overlayMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (
-            mutation.type === "attributes" &&
-            mutation.attributeName === "inert"
-          ) {
-            this._overlayMutationObserver?.disconnect();
-            this._overlayMutationObserver = undefined;
-            // @ts-expect-error
-            overlay.inert = false;
-          } else if (mutation.type === "childList") {
-            mutation.removedNodes.forEach((node) => {
-              if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-                this._overlayMutationObserver?.disconnect();
-                this._overlayMutationObserver = undefined;
-              }
-            });
-          }
-        });
-      });
-
-      this._overlayMutationObserver.observe(overlay, {
-        attributes: true,
-      });
-      this._overlayMutationObserver.observe(document.body, {
-        childList: true,
-      });
-    }
   }
 
-  private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
+  private _filterChanged(ev: PolymerChangedEvent<string>) {
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail, { composed: false });
   }
 
-  private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
 
@@ -298,9 +241,6 @@ export class HaComboBox extends LitElement {
       .toggle-button {
         right: 12px;
         top: -10px;
-        inset-inline-start: initial;
-        inset-inline-end: 12px;
-        direction: var(--direction);
       }
       :host([opened]) .toggle-button {
         color: var(--primary-color);
@@ -309,9 +249,18 @@ export class HaComboBox extends LitElement {
         --mdc-icon-size: 20px;
         top: -7px;
         right: 36px;
-        inset-inline-start: initial;
+      }
-        inset-inline-end: 36px;
+
-        direction: var(--direction);
+      :host-context([style*="direction: rtl;"]) .toggle-button {
+        left: 12px;
+        right: auto;
+        top: -10px;
+      }
+      :host-context([style*="direction: rtl;"]) .clear-button {
+        --mdc-icon-size: 20px;
+        top: -7px;
+        left: 36px;
+        right: auto;
       }
     `;
   }

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

@@ -140,9 +140,6 @@ export class HaDateRangePicker extends LitElement {
     return css`
       ha-svg-icon {
         margin-right: 8px;
-        margin-inline-end: 8px;
-        margin-inline-start: initial;
-        direction: var(--direction);
       }
 
       .date-range-inputs {
@@ -169,9 +166,6 @@ export class HaDateRangePicker extends LitElement {
 
       ha-textfield:last-child {
         margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
-        direction: var(--direction);
       }
 
       @media only screen and (max-width: 800px) {

src/components/ha-dialog.ts

@@ -3,27 +3,26 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
-import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import "./ha-icon-button";
 
 export const createCloseHeading = (
   hass: HomeAssistant,
   title: string | TemplateResult
 ) => html`
-  <div class="header_title">${title}</div>
+  <span class="header_title">${title}</span>
   <ha-icon-button
     .label=${hass.localize("ui.dialogs.generic.close")}
     .path=${mdiClose}
     dialogAction="close"
     class="header_button"
+    dir=${computeRTLDirection(hass)}
   ></ha-icon-button>
 `;
 
 @customElement("ha-dialog")
 export class HaDialog extends DialogBase {
-  protected readonly [FOCUS_TARGET];
-
   public scrollToPos(x: number, y: number) {
     this.contentElement?.scrollTo(x, y);
   }
@@ -40,13 +39,10 @@ export class HaDialog extends DialogBase {
         z-index: var(--dialog-z-index, 7);
         -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
         backdrop-filter: var(--dialog-backdrop-filter, none);
-        --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
-        --mdc-typography-headline6-font-weight: 400;
-        --mdc-typography-headline6-font-size: 1.574rem;
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding-bottom: max(env(safe-area-inset-bottom), 24px);
+        padding-bottom: max(env(safe-area-inset-bottom), 8px);
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -57,23 +53,17 @@ export class HaDialog extends DialogBase {
       .mdc-dialog__container {
         align-items: var(--vertial-align-dialog, center);
       }
-      .mdc-dialog__title {
-        padding: 24px 24px 0 24px;
-      }
-      .mdc-dialog__actions {
-        padding: 0 24px 24px 24px;
-      }
       .mdc-dialog__title::before {
         display: block;
-        height: 0px;
+        height: 20px;
       }
       .mdc-dialog .mdc-dialog__content {
         position: var(--dialog-content-position, relative);
-        padding: var(--dialog-content-padding, 24px);
+        padding: var(--dialog-content-padding, 20px 24px);
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
         padding-bottom: max(
-          var(--dialog-content-padding, 24px),
+          var(--dialog-content-padding, 20px),
           env(safe-area-inset-bottom)
         );
       }
@@ -81,7 +71,10 @@ export class HaDialog extends DialogBase {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
         min-height: var(--mdc-dialog-min-height, auto);
-        border-radius: var(--ha-dialog-border-radius, 28px);
+        border-radius: var(
+          --ha-dialog-border-radius,
+          var(--ha-card-border-radius, 4px)
+        );
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;
@@ -95,20 +88,19 @@ export class HaDialog extends DialogBase {
         color: inherit;
       }
       .header_title {
-        margin-right: 32px;
+        margin-right: 40px;
-        margin-inline-end: 32px;
-        margin-inline-start: initial;
-        direction: var(--direction);
       }
-      .header_button {
+      [dir="rtl"].header_button {
-        inset-inline-start: initial;
+        right: auto;
-        inset-inline-end: 16px;
+        left: 16px;
-        direction: var(--direction);
       }
-      .dialog-actions {
+      [dir="rtl"].header_title {
-        inset-inline-start: initial !important;
+        margin-left: 40px;
-        inset-inline-end: 0px !important;
+        margin-right: 0px;
-        direction: var(--direction);
+      }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
       }
     `,
   ];

src/components/ha-expansion-panel.ts

@@ -133,9 +133,6 @@ class HaExpansionPanel extends LitElement {
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
         margin-left: auto;
-        margin-inline-start: auto;
-        margin-inline-end: initial;
-        direction: var(--direction);
       }
 
       .summary-icon.expanded {

src/components/ha-fab.ts

@@ -1,33 +1,24 @@
-import { FabBase } from "@material/mwc-fab/mwc-fab-base";
+import { Fab } from "@material/mwc-fab";
-import { styles } from "@material/mwc-fab/mwc-fab.css";
 import { customElement } from "lit/decorators";
 import { css } from "lit";
 
 @customElement("ha-fab")
-export class HaFab extends FabBase {
+export class HaFab extends Fab {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
 
-  static override styles = [
+  static override styles = Fab.styles.concat([
-    styles,
     css`
-      :host .mdc-fab--extended .mdc-fab__icon {
+      :host-context([style*="direction: rtl;"])
-        margin-inline-start: -8px;
+        .mdc-fab--extended
-        margin-inline-end: 12px;
+        .mdc-fab__icon {
-        direction: var(--direction);
+        margin-left: 12px !important;
+        margin-right: calc(12px - 20px) !important;
       }
     `,
-    // safari workaround - must be explicit
+  ]);
-    document.dir === "rtl"
-      ? css`
-          :host .mdc-fab--extended .mdc-fab__icon {
-            direction: rtl;
-          }
-        `
-      : css``,
-  ];
 }
 
 declare global {