Force editor rebuild on stack card switch

.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
@@ -27,7 +27,9 @@ jobs:
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
       - name: Deploy to Netlify
-        run: npx netlify-cli deploy --dir=demo/dist --prod
+        uses: netlify/actions/cli@master
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
+        with:
+          args: deploy --dir=demo/dist --prod

.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,73 +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: Archive translations
-        run: tar -czvf translations.tar.gz translations
-
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: wheels
-          path: dist/home_assistant_frontend*.whl
-          if-no-files-found: error
-
-      - name: Upload translations
-        uses: actions/upload-artifact@v3
-        with:
-          name: translations
-          path: translations.tar.gz
-          if-no-files-found: error

.github/workflows/release.yaml

@@ -6,8 +6,8 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.10"
-  NODE_VERSION: 16
+  PYTHON_VERSION: 3.8
+  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
-        uses: home-assistant/wheels@2022.10.1
+      - name: Upload requirements.txt
+        uses: actions/upload-artifact@v2
         with:
-          abi: cp310
-          tag: musllinux_1_2
-          arch: amd64
+          name: requirements
+          path: ./requirements.txt
+
+  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@v6.0.1
+        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: |

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-yarn run lint-staged --relative --shell "/bin/bash"

.nvmrc

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

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

build-scripts/env.js

@@ -27,7 +27,7 @@ module.exports = {
   version() {
     const version = fs
       .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "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/download_translations.js

@@ -1,12 +1,17 @@
+const del = require("del");
 const gulp = require("gulp");
 const fs = require("fs");
 const mapStream = require("map-stream");
 
 const inDirFrontend = "translations/frontend";
 const inDirBackend = "translations/backend";
+const downloadDir = "translations/downloads";
 const srcMeta = "src/translations/translationMetadata.json";
+
 const encoding = "utf8";
 
+const tasks = [];
+
 function hasHtml(data) {
   return /<[a-z][\s\S]*>/i.test(data);
 }
@@ -41,12 +46,20 @@ function checkHtml() {
   });
 }
 
-// Backend translations do not currently pass HTML check so are excluded here for now
-gulp.task("check-translations-html", function () {
-  return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
+let taskName = "clean-downloaded-translations";
+gulp.task(taskName, function () {
+  return del([`${downloadDir}/**`]);
 });
+tasks.push(taskName);
 
-gulp.task("check-all-files-exist", function () {
+taskName = "check-translations-html";
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(checkHtml());
+});
+tasks.push(taskName);
+
+taskName = "check-all-files-exist";
+gulp.task(taskName, function () {
   const file = fs.readFileSync(srcMeta, { encoding });
   const meta = JSON.parse(file);
   Object.keys(meta).forEach((lang) => {
@@ -59,8 +72,24 @@ gulp.task("check-all-files-exist", function () {
   });
   return Promise.resolve();
 });
+tasks.push(taskName);
 
+taskName = "move-downloaded-translations";
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDirFrontend));
+});
+tasks.push(taskName);
+
+taskName = "check-downloaded-translations";
 gulp.task(
-  "check-downloaded-translations",
-  gulp.series("check-translations-html", "check-all-files-exist")
+  taskName,
+  gulp.series(
+    "check-translations-html",
+    "move-downloaded-translations",
+    "check-all-files-exist",
+    "clean-downloaded-translations"
+  )
 );
+tasks.push(taskName);
+
+module.exports = tasks;

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"
-  }
-]
+[]

build-scripts/webpack.js

@@ -76,7 +76,7 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
+      new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),

demo/src/configs/arsaboo/entities.ts

@@ -508,7 +508,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "us_customary",
+        units: "imperial",
         duration_in_traffic: "41 mins",
         duration: "44 mins",
         distance: "34.3 mi",
@@ -527,7 +527,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "us_customary",
+        units: "imperial",
         duration_in_traffic: "37 mins",
         duration: "37 mins",
         distance: "30.2 mi",

demo/src/configs/jimpower/lovelace.ts

@@ -1196,7 +1196,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "15%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     prefix: "Kitchen: ",
@@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "32%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     style: {
@@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "60%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     prefix: "Bathroom: ",
@@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "77%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                 ],
                 type: "picture-elements",

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/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,25 +7,22 @@ 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";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
-import { mockRecorder } from "./stubs/recorder";
 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() {
@@ -46,7 +44,6 @@ class HaDemo extends HomeAssistantAppEl {
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
-    mockRecorder(hass);
     mockShoppingList(hass);
     mockSystemLog(hass);
     mockTemplate(hass);
@@ -54,40 +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",
-        id: "sensor.co2_intensity",
-        name: null,
-        icon: null,
-        platform: "co2signal",
-        hidden_by: null,
-        entity_category: null,
-        has_entity_name: false,
-        unique_id: "co2_intensity",
-      },
-      {
-        config_entry_id: "co2signal",
-        device_id: "co2signal",
-        area_id: null,
-        disabled_by: null,
-        entity_id: "sensor.grid_fossil_fuel_percentage",
-        id: "sensor.co2_intensity",
-        name: null,
-        icon: null,
-        platform: "co2signal",
-        hidden_by: null,
-        entity_category: null,
-        has_entity_name: false,
-        unique_id: "grid_fossil_fuel_percentage",
-      },
-    ]);
 
     hass.addEntities(energyEntities());
 
@@ -122,9 +87,3 @@ class HaDemo extends HomeAssistantAppEl {
 }
 
 customElements.define("ha-demo", HaDemo);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-demo": HaDemo;
-  }
-}

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,101 +1,90 @@
 import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
-import {
-  EnergyInfo,
-  EnergyPreferences,
-  EnergySolarForecasts,
-  FossilEnergyConsumption,
-} from "../../../src/data/energy";
+import { EnergySolarForecasts } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "energy/get_prefs",
-    (): EnergyPreferences => ({
-      energy_sources: [
-        {
-          type: "grid",
-          flow_from: [
-            {
-              stat_energy_from: "sensor.energy_consumption_tarif_1",
-              stat_cost: "sensor.energy_consumption_tarif_1_cost",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-            {
-              stat_energy_from: "sensor.energy_consumption_tarif_2",
-              stat_cost: "sensor.energy_consumption_tarif_2_cost",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-          ],
-          flow_to: [
-            {
-              stat_energy_to: "sensor.energy_production_tarif_1",
-              stat_compensation:
-                "sensor.energy_production_tarif_1_compensation",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-            {
-              stat_energy_to: "sensor.energy_production_tarif_2",
-              stat_compensation:
-                "sensor.energy_production_tarif_2_compensation",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-          ],
-          cost_adjustment_day: 0,
-        },
-        {
-          type: "solar",
-          stat_energy_from: "sensor.solar_production",
-          config_entry_solar_forecast: ["solar_forecast"],
-        },
-        /*         {
-          type: "battery",
-          stat_energy_from: "sensor.battery_output",
-          stat_energy_to: "sensor.battery_input",
-        }, */
-        {
-          type: "gas",
-          stat_energy_from: "sensor.energy_gas",
-          stat_cost: "sensor.energy_gas_cost",
-          entity_energy_price: null,
-          number_energy_price: null,
-        },
-      ],
-      device_consumption: [
-        {
-          stat_consumption: "sensor.energy_car",
-        },
-        {
-          stat_consumption: "sensor.energy_ac",
-        },
-        {
-          stat_consumption: "sensor.energy_washing_machine",
-        },
-        {
-          stat_consumption: "sensor.energy_dryer",
-        },
-        {
-          stat_consumption: "sensor.energy_heat_pump",
-        },
-        {
-          stat_consumption: "sensor.energy_boiler",
-        },
-      ],
-    })
-  );
-  hass.mockWS(
-    "energy/info",
-    (): EnergyInfo => ({ cost_sensors: {}, solar_forecast_domains: [] })
-  );
-  hass.mockWS(
-    "energy/fossil_energy_consumption",
-    ({ period }): FossilEnergyConsumption => ({
-      start: period === "month" ? 250 : period === "day" ? 10 : 2,
-    })
-  );
+  hass.mockWS("energy/get_prefs", () => ({
+    energy_sources: [
+      {
+        type: "grid",
+        flow_from: [
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_1",
+            stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_2",
+            stat_cost: "sensor.energy_consumption_tarif_2_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        flow_to: [
+          {
+            stat_energy_to: "sensor.energy_production_tarif_1",
+            stat_compensation: "sensor.energy_production_tarif_1_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_to: "sensor.energy_production_tarif_2",
+            stat_compensation: "sensor.energy_production_tarif_2_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        cost_adjustment_day: 0,
+      },
+      {
+        type: "solar",
+        stat_energy_from: "sensor.solar_production",
+        config_entry_solar_forecast: ["solar_forecast"],
+      },
+      /* {
+        type: "battery",
+        stat_energy_from: "sensor.battery_output",
+        stat_energy_to: "sensor.battery_input",
+      }, */
+      {
+        type: "gas",
+        stat_energy_from: "sensor.energy_gas",
+        stat_cost: "sensor.energy_gas_cost",
+        entity_energy_from: "sensor.energy_gas",
+        entity_energy_price: null,
+        number_energy_price: null,
+      },
+    ],
+    device_consumption: [
+      {
+        stat_consumption: "sensor.energy_car",
+      },
+      {
+        stat_consumption: "sensor.energy_ac",
+      },
+      {
+        stat_consumption: "sensor.energy_washing_machine",
+      },
+      {
+        stat_consumption: "sensor.energy_dryer",
+      },
+      {
+        stat_consumption: "sensor.energy_heat_pump",
+      },
+      {
+        stat_consumption: "sensor.energy_boiler",
+      },
+    ],
+  }));
+  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
+  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
+    start: period === "month" ? 250 : period === "day" ? 10 : 2,
+  }));
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
   hass.mockWS(

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

@@ -1,4 +1,12 @@
+import {
+  addDays,
+  addHours,
+  addMonths,
+  differenceInHours,
+  endOfDay,
+} from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
+import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {
@@ -64,6 +72,331 @@ const generateHistory = (state, deltas) => {
 
 const incrementalUnits = ["clients", "queries", "ads"];
 
+const generateMeanStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
+  maxDiff: number
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const delta = Math.random() * maxDiff;
+    const mean = lastVal + delta;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean,
+      min: mean - Math.random() * maxDiff,
+      max: mean + Math.random() * maxDiff,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: mean,
+      sum: null,
+    });
+    lastVal = mean;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateSumStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
+  maxDiff: number
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum,
+    });
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateCurvedStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
+  maxDiff: number,
+  metered: boolean
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const hours = differenceInHours(end, start) - 1;
+  let i = 0;
+  let half = false;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += i * add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum: metered ? sum : null,
+    });
+    currentDate = addHours(currentDate, 1);
+    if (!half && i > hours / 2) {
+      half = true;
+    }
+    i += half ? -1 : 1;
+  }
+  return statistics;
+};
+
+const statisticsFunctions: Record<
+  string,
+  (
+    id: string,
+    start: Date,
+    end: Date,
+    period: "5minute" | "hour" | "day" | "month"
+  ) => StatisticValue[]
+> = {
+  "sensor.energy_consumption_tarif_1": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
+    const morningLow = generateSumStatistics(
+      id,
+      start,
+      morningEnd,
+      period,
+      0,
+      0.7
+    );
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const morningFinalVal = morningLow.length
+      ? morningLow[morningLow.length - 1].sum!
+      : 0;
+    const empty = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      period,
+      morningFinalVal,
+      0
+    );
+    const eveningLow = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      period,
+      morningFinalVal,
+      0.7
+    );
+    return [...morningLow, ...empty, ...eveningLow];
+  },
+  "sensor.energy_consumption_tarif_2": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const highTarif = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      period,
+      0,
+      0.3
+    );
+    const highTarifFinalVal = highTarif.length
+      ? highTarif[highTarif.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      period,
+      highTarifFinalVal,
+      0
+    );
+    return [...morning, ...highTarif, ...evening];
+  },
+  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
+    generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (
+    id,
+    start,
+    end,
+    period = "hour"
+  ) => generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      period,
+      0,
+      0.15,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      period,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      1
+    );
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.solar_production": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      period,
+      0,
+      0.3,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      period,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      2
+    );
+    return [...morning, ...production, ...evening, ...rest];
+  },
+};
+
 export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockAPI(
     new RegExp("history/period/.+"),
@@ -133,4 +466,42 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
       return results;
     }
   );
+  mockHass.mockWS("history/list_statistic_ids", () => []);
+  mockHass.mockWS(
+    "history/statistics_during_period",
+    ({ statistic_ids, start_time, end_time, period }, hass) => {
+      const start = new Date(start_time);
+      const end = end_time ? new Date(end_time) : new Date();
+
+      const statistics: Record<string, StatisticValue[]> = {};
+
+      statistic_ids.forEach((id: string) => {
+        if (id in statisticsFunctions) {
+          statistics[id] = statisticsFunctions[id](id, start, end, period);
+        } else {
+          const entityState = hass.states[id];
+          const state = entityState ? Number(entityState.state) : 1;
+          statistics[id] =
+            entityState && "last_reset" in entityState.attributes
+              ? generateSumStatistics(
+                  id,
+                  start,
+                  end,
+                  period,
+                  state,
+                  state * (state > 80 ? 0.01 : 0.05)
+                )
+              : generateMeanStatistics(
+                  id,
+                  start,
+                  end,
+                  period,
+                  state,
+                  state * (state > 80 ? 0.05 : 0.1)
+                );
+        }
+      });
+      return statistics;
+    }
+  );
 };

demo/src/stubs/recorder.ts

@@ -1,385 +0,0 @@
-import {
-  addDays,
-  addHours,
-  addMonths,
-  differenceInHours,
-  endOfDay,
-} from "date-fns";
-import {
-  Statistics,
-  StatisticsMetaData,
-  StatisticValue,
-} from "../../../src/data/recorder";
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const generateMeanStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number
-): StatisticValue[] => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let lastVal = initValue;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const delta = Math.random() * maxDiff;
-    const mean = lastVal + delta;
-    statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
-      mean,
-      min: mean - Math.random() * maxDiff,
-      max: mean + Math.random() * maxDiff,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: mean,
-      sum: null,
-    });
-    lastVal = mean;
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateSumStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number
-): StatisticValue[] => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let sum = initValue;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const add = Math.random() * maxDiff;
-    sum += add;
-    statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: initValue + sum,
-      sum,
-    });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateCurvedStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  _period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number,
-  metered: boolean
-): StatisticValue[] => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let sum = initValue;
-  const hours = differenceInHours(end, start) - 1;
-  let i = 0;
-  let half = false;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const add = Math.random() * maxDiff;
-    sum += i * add;
-    statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: initValue + sum,
-      sum: metered ? sum : null,
-    });
-    currentDate = addHours(currentDate, 1);
-    if (!half && i > hours / 2) {
-      half = true;
-    }
-    i += half ? -1 : 1;
-  }
-  return statistics;
-};
-
-const statisticsFunctions: Record<
-  string,
-  (
-    id: string,
-    start: Date,
-    end: Date,
-    period: "5minute" | "hour" | "day" | "month"
-  ) => StatisticValue[]
-> = {
-  "sensor.energy_consumption_tarif_1": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(
-      id,
-      start,
-      morningEnd,
-      period,
-      0,
-      0.7
-    );
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const morningFinalVal = morningLow.length
-      ? morningLow[morningLow.length - 1].sum!
-      : 0;
-    const empty = generateSumStatistics(
-      id,
-      morningEnd,
-      eveningStart,
-      period,
-      morningFinalVal,
-      0
-    );
-    const eveningLow = generateSumStatistics(
-      id,
-      eveningStart,
-      end,
-      period,
-      morningFinalVal,
-      0.7
-    );
-    return [...morningLow, ...empty, ...eveningLow];
-  },
-  "sensor.energy_consumption_tarif_2": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const highTarif = generateSumStatistics(
-      id,
-      morningEnd,
-      eveningStart,
-      period,
-      0,
-      0.3
-    );
-    const highTarifFinalVal = highTarif.length
-      ? highTarif[highTarif.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
-    const evening = generateSumStatistics(
-      id,
-      eveningStart,
-      end,
-      period,
-      highTarifFinalVal,
-      0
-    );
-    return [...morning, ...highTarif, ...evening];
-  },
-  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
-    generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (
-    id,
-    start,
-    end,
-    period = "hour"
-  ) => generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
-    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
-    const dayEnd = new Date(endOfDay(productionEnd));
-    const production = generateCurvedStatistics(
-      id,
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.15,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
-    const evening = generateSumStatistics(
-      id,
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      1
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-  "sensor.solar_production": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
-    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
-    const dayEnd = new Date(endOfDay(productionEnd));
-    const production = generateCurvedStatistics(
-      id,
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.3,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
-    const evening = generateSumStatistics(
-      id,
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      2
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-};
-export const mockRecorder = (mockHass: MockHomeAssistant) => {
-  mockHass.mockWS(
-    "recorder/get_statistics_metadata",
-    (): StatisticsMetaData[] => []
-  );
-  mockHass.mockWS(
-    "recorder/list_statistic_ids",
-    (): StatisticsMetaData[] => []
-  );
-  mockHass.mockWS(
-    "recorder/statistics_during_period",
-    ({ statistic_ids, start_time, end_time, period }, hass): Statistics => {
-      const start = new Date(start_time);
-      const end = end_time ? new Date(end_time) : new Date();
-
-      const statistics: Record<string, StatisticValue[]> = {};
-
-      statistic_ids.forEach((id: string) => {
-        if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end, period);
-        } else {
-          const entityState = hass.states[id];
-          const state = entityState ? Number(entityState.state) : 1;
-          statistics[id] =
-            entityState && "last_reset" in entityState.attributes
-              ? generateSumStatistics(
-                  id,
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.01 : 0.05)
-                )
-              : generateMeanStatistics(
-                  id,
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.05 : 0.1)
-                );
-        }
-      });
-      return statistics;
-    }
-  );
-};

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/ha-gallery.ts

@@ -5,7 +5,7 @@ import { html, css, LitElement, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
-import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
+import "../../src/components/ha-expansion-panel";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
@@ -174,10 +174,9 @@ class HaGallery extends LitElement {
     const menuItem = this.shadowRoot!.querySelector(
       `a[href="#${this._page}"]`
     )!;
-
     // Make sure section is expanded
-    if (menuItem.parentElement instanceof HaExpansionPanel) {
-      menuItem.parentElement.expanded = true;
+    if (menuItem.parentElement instanceof HTMLDetailsElement) {
+      menuItem.parentElement.open = true;
     }
   }
 

gallery/src/pages/Text/remove-delete-add-create.markdown

@@ -1,56 +0,0 @@
----
-title: When to use remove, delete, add and create
-subtitle: The difference between remove/delete and add/create.
----
-
-# Remove vs Delete
-Remove and Delete are quite similar, but can be frustrating if used inconsistently.
-
-## Remove
-Take away and set aside, but kept in existence.
-
-For example:
-* Removing a user's permission
-* Removing a user from a group
-* Removing links between items
-* Removing a widget
-* Removing a link
-* Removing an item from a cart
-
-## Delete
-Erase, rendered nonexistent or nonrecoverable.
-
-For example:
-* Deleting a field
-* Deleting a value in a field
-* Deleting a task
-* Deleting a group
-* Deleting a permission
-* Deleting a calendar event
-
-# Add vs Create
-In most cases, Create can be paired with Delete, and Add can be paired with Remove.
-
-## Add
-An already-exisiting item.
-
-For example:
-* Adding a permission to a user
-* Adding a user to a group
-* Adding links between items
-* Adding a widget
-* Adding a link
-* Adding an item to a cart
-
-## Create
-Something made from scratch.
-
-For example:
-* Creating a new field
-* Creating a new value in a field
-* Creating a new task
-* Creating a new group
-* Creating a new permission
-* Creating a new calendar event
-
-Based on this is [UX magazine article](https://uxmag.com/articles/ui-copy-remove-vs-delete2-banner).

gallery/src/pages/automation/describe-action.ts

@@ -1,9 +1,7 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-yaml-editor";
-import { Action } from "../../../../src/data/script";
 import { describeAction } from "../../../../src/data/script_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -90,15 +88,6 @@ const ACTIONS = [
     then: [{ delay: "00:00:01" }],
     else: [{ delay: "00:00:05" }],
   },
-  {
-    if: [{ condition: "state" }],
-    then: [{ delay: "00:00:01" }],
-  },
-  {
-    if: [{ condition: "state" }, { condition: "state" }],
-    then: [{ delay: "00:00:01" }],
-    else: [{ delay: "00:00:05" }],
-  },
   {
     choose: [
       {
@@ -114,38 +103,16 @@ const ACTIONS = [
   },
 ];
 
-const initialAction: Action = {
-  service: "light.turn_on",
-  target: {
-    entity_id: "light.kitchen",
-  },
-};
-
 @customElement("demo-automation-describe-action")
 export class DemoAutomationDescribeAction extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
-  @state() _action = initialAction;
-
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
     return html`
       <ha-card header="Actions">
-        <div class="action">
-          <span>
-            ${this._action
-              ? describeAction(this.hass, this._action)
-              : "<invalid YAML>"}
-          </span>
-          <ha-yaml-editor
-            label="Action Config"
-            .defaultValue=${initialAction}
-            @value-changed=${this._dataChanged}
-          ></ha-yaml-editor>
-        </div>
-
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
@@ -165,11 +132,6 @@ export class DemoAutomationDescribeAction extends LitElement {
     hass.addEntities(ENTITIES);
   }
 
-  private _dataChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    this._action = ev.detail.isValid ? ev.detail.value : undefined;
-  }
-
   static get styles() {
     return css`
       ha-card {
@@ -185,9 +147,6 @@ export class DemoAutomationDescribeAction extends LitElement {
       span {
         margin-right: 16px;
       }
-      ha-yaml-editor {
-        width: 50%;
-      }
     `;
   }
 }

gallery/src/pages/automation/describe-condition.ts

@@ -1,82 +1,31 @@
 import { dump } from "js-yaml";
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-yaml-editor";
-import { Condition } from "../../../../src/data/automation";
 import { describeCondition } from "../../../../src/data/automation_i18n";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
-
-const ENTITIES = [
-  getEntity("light", "kitchen", "on", {
-    friendly_name: "Kitchen Light",
-  }),
-  getEntity("device_tracker", "person", "home", {
-    friendly_name: "Person",
-  }),
-  getEntity("zone", "home", "", {
-    friendly_name: "Home",
-  }),
-];
 
 const conditions = [
   { condition: "and" },
   { condition: "not" },
   { condition: "or" },
-  { condition: "state", entity_id: "light.kitchen", state: "on" },
-  {
-    condition: "numeric_state",
-    entity_id: "light.kitchen",
-    attribute: "brightness",
-    below: 80,
-    above: 20,
-  },
+  { condition: "state" },
+  { condition: "numeric_state" },
   { condition: "sun", after: "sunset" },
-  { condition: "sun", after: "sunrise", offset: "-01:00" },
-  { condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
-  { condition: "trigger", id: "motion" },
+  { condition: "sun", after: "sunrise" },
+  { condition: "zone" },
   { condition: "time" },
   { condition: "template" },
 ];
 
-const initialCondition: Condition = {
-  condition: "state",
-  entity_id: "light.kitchen",
-  state: "on",
-};
-
 @customElement("demo-automation-describe-condition")
 export class DemoAutomationDescribeCondition extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  @state() _condition = initialCondition;
-
   protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-
     return html`
       <ha-card header="Conditions">
-        <div class="condition">
-          <span>
-            ${this._condition
-              ? describeCondition(this._condition, this.hass)
-              : "<invalid YAML>"}
-          </span>
-          <ha-yaml-editor
-            label="Condition Config"
-            .defaultValue=${initialCondition}
-            @value-changed=${this._dataChanged}
-          ></ha-yaml-editor>
-        </div>
-
         ${conditions.map(
           (conf) => html`
             <div class="condition">
-              <span>${describeCondition(conf as any, this.hass)}</span>
+              <span>${describeCondition(conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -85,18 +34,6 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.addEntities(ENTITIES);
-  }
-
-  private _dataChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    this._condition = ev.detail.isValid ? ev.detail.value : undefined;
-  }
-
   static get styles() {
     return css`
       ha-card {
@@ -112,9 +49,6 @@ export class DemoAutomationDescribeCondition extends LitElement {
       span {
         margin-right: 16px;
       }
-      ha-yaml-editor {
-        width: 50%;
-      }
     `;
   }
 }

gallery/src/pages/automation/describe-trigger.ts

@@ -1,92 +1,34 @@
 import { dump } from "js-yaml";
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-yaml-editor";
-import { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
-
-const ENTITIES = [
-  getEntity("light", "kitchen", "on", {
-    friendly_name: "Kitchen Light",
-  }),
-  getEntity("person", "person", "", {
-    friendly_name: "Person",
-  }),
-  getEntity("zone", "home", "", {
-    friendly_name: "Home",
-  }),
-];
 
 const triggers = [
-  { platform: "state", entity_id: "light.kitchen", from: "off", to: "on" },
+  { platform: "state" },
   { platform: "mqtt" },
-  {
-    platform: "geo_location",
-    source: "test_source",
-    zone: "zone.home",
-    event: "enter",
-  },
-  { platform: "homeassistant", event: "start" },
-  {
-    platform: "numeric_state",
-    entity_id: "light.kitchen",
-    attribute: "brightness",
-    below: 80,
-    above: 20,
-  },
-  { platform: "sun", event: "sunset" },
+  { platform: "geo_location" },
+  { platform: "homeassistant" },
+  { platform: "numeric_state" },
+  { platform: "sun" },
   { platform: "time_pattern" },
   { platform: "webhook" },
-  {
-    platform: "zone",
-    entity_id: "person.person",
-    zone: "zone.home",
-    event: "enter",
-  },
+  { platform: "zone" },
   { platform: "tag" },
-  { platform: "time", at: "15:32" },
+  { platform: "time" },
   { platform: "template" },
-  { platform: "event", event_type: "homeassistant_started" },
+  { platform: "event" },
 ];
 
-const initialTrigger: Trigger = {
-  platform: "state",
-  entity_id: "light.kitchen",
-};
-
 @customElement("demo-automation-describe-trigger")
 export class DemoAutomationDescribeTrigger extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  @state() _trigger = initialTrigger;
-
   protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-
     return html`
       <ha-card header="Triggers">
-        <div class="trigger">
-          <span>
-            ${this._trigger
-              ? describeTrigger(this._trigger, this.hass)
-              : "<invalid YAML>"}
-          </span>
-          <ha-yaml-editor
-            label="Trigger Config"
-            .defaultValue=${initialTrigger}
-            @value-changed=${this._dataChanged}
-          ></ha-yaml-editor>
-        </div>
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
-              <span>${describeTrigger(conf as any, this.hass)}</span>
+              <span>${describeTrigger(conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -95,18 +37,6 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.addEntities(ENTITIES);
-  }
-
-  private _dataChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
-  }
-
   static get styles() {
     return css`
       ha-card {
@@ -122,9 +52,6 @@ export class DemoAutomationDescribeTrigger extends LitElement {
       span {
         margin-right: 16px;
       }
-      ha-yaml-editor {
-        width: 50%;
-      }
     `;
   }
 }

gallery/src/pages/automation/editor-action.ts

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html, css } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -47,8 +47,6 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
 class DemoHaAutomationEditorAction extends LitElement {
   @state() private hass!: HomeAssistant;
 
-  @state() private _disabled = false;
-
   private data: any = SCHEMAS.map((info) => info.actions);
 
   constructor() {
@@ -69,15 +67,6 @@ class DemoHaAutomationEditorAction extends LitElement {
       this.requestUpdate();
     };
     return html`
-      <div class="options">
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -92,7 +81,6 @@ class DemoHaAutomationEditorAction extends LitElement {
                     .hass=${this.hass}
                     .actions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-action>
                 `
@@ -102,20 +90,6 @@ class DemoHaAutomationEditorAction extends LitElement {
       )}
     `;
   }
-
-  private _handleOptionChange(ev) {
-    this[`_${ev.target.name}`] = ev.target.checked;
-  }
-
-  static styles = css`
-    .options {
-      max-width: 800px;
-      margin: 16px auto;
-    }
-    .options ha-formfield {
-      margin-right: 16px;
-    }
-  `;
 }
 
 declare global {

gallery/src/pages/automation/editor-condition.ts

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html, css } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -83,8 +83,6 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
 class DemoHaAutomationEditorCondition extends LitElement {
   @state() private hass!: HomeAssistant;
 
-  @state() private _disabled = false;
-
   private data: any = SCHEMAS.map((info) => info.conditions);
 
   constructor() {
@@ -105,15 +103,6 @@ class DemoHaAutomationEditorCondition extends LitElement {
       this.requestUpdate();
     };
     return html`
-      <div class="options">
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -128,7 +117,6 @@ class DemoHaAutomationEditorCondition extends LitElement {
                     .hass=${this.hass}
                     .conditions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-condition>
                 `
@@ -138,20 +126,6 @@ class DemoHaAutomationEditorCondition extends LitElement {
       )}
     `;
   }
-
-  private _handleOptionChange(ev) {
-    this[`_${ev.target.name}`] = ev.target.checked;
-  }
-
-  static styles = css`
-    .options {
-      max-width: 800px;
-      margin: 16px auto;
-    }
-    .options ha-formfield {
-      margin-right: 16px;
-    }
-  `;
 }
 
 declare global {

gallery/src/pages/automation/editor-trigger.ts

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html, css } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -107,8 +107,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 class DemoHaAutomationEditorTrigger extends LitElement {
   @state() private hass!: HomeAssistant;
 
-  @state() private _disabled = false;
-
   private data: any = SCHEMAS.map((info) => info.triggers);
 
   constructor() {
@@ -129,15 +127,6 @@ class DemoHaAutomationEditorTrigger extends LitElement {
       this.requestUpdate();
     };
     return html`
-      <div class="options">
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -152,7 +141,6 @@ class DemoHaAutomationEditorTrigger extends LitElement {
                     .hass=${this.hass}
                     .triggers=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-trigger>
                 `
@@ -162,20 +150,6 @@ class DemoHaAutomationEditorTrigger extends LitElement {
       )}
     `;
   }
-
-  private _handleOptionChange(ev) {
-    this[`_${ev.target.name}`] = ev.target.checked;
-  }
-
-  static styles = css`
-    .options {
-      max-width: 800px;
-      margin: 16px auto;
-    }
-    .options ha-formfield {
-      margin-right: 16px;
-    }
-  `;
 }
 
 declare global {

gallery/src/pages/brand/logo.markdown

@@ -2,6 +2,8 @@
 title: "Logo"
 ---
 
+![Using our logo](/images/using-our-logo.png)
+
 # Using our logo
 
 As a community, we are proud of our logo. Follow these guidelines to ensure it always looks its best. Our logo follows Google's material design spec and uses the blue interface color.

gallery/src/pages/components/dialogs.markdown

@@ -1,32 +0,0 @@
----
-title: Dialogs
-subtitle: Dialogs provide important prompts in a user flow.
----
-
-# Material Design 3
-
-Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
-
-# Highlighted guidelines
-
-## Content
-* A best practice is to always use a title, even if it is optional by Material guidelines.
-* People mainly read the title and a button. Put the most important information in those two.
-* Try to avoid user generated content in the title, this could make the title unreadable long.
-* If users become unsure, they read the description. Make sure this explains what will happen.
-* Strive for minimalism.
-
-## Buttons and X-icon
-* Keep the labels short, for example `Save`, `Delete`, `Enable`.
-* Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
-* Destructive actions should be a red warning button.
-* Alert or confirmation dialogs only have buttons and no X-icon.
-* Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
-
-## Example
-### Confirmation dialog
-> **Delete dashboard?**
-> 
-> Dashboard [dashboard name] will be permanently deleted from Home Assistant.
-> 
-> Cancel / Delete

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

@@ -3,13 +3,6 @@ title: Alerts
 subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 ---
 
-<style>
-  ha-alert {
-    display: block;
-    margin: 4px 0;
-  }
-</style>
-
 # Alert `<ha-alert>`
 The alert offers four severity levels that set a distinctive icon and color.
 

gallery/src/pages/components/ha-bar-slider.markdown

@@ -1,3 +0,0 @@
----
-title: Bar Sliders
----

gallery/src/pages/components/ha-bar-slider.ts

@@ -1,169 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-bar-slider";
-import "../../../../src/components/ha-card";
-
-const sliders: {
-  id: string;
-  label: string;
-  mode?: "start" | "end" | "indicator";
-  class?: string;
-}[] = [
-  {
-    id: "slider-start",
-    label: "Slider (start mode)",
-    mode: "start",
-  },
-  {
-    id: "slider-end",
-    label: "Slider (end mode)",
-    mode: "end",
-  },
-  {
-    id: "slider-indicator",
-    label: "Slider (indicator mode)",
-    mode: "indicator",
-  },
-  {
-    id: "slider-start-custom",
-    label: "Slider (start mode) and custom style",
-    mode: "start",
-    class: "custom",
-  },
-  {
-    id: "slider-end-custom",
-    label: "Slider (end mode) and custom style",
-    mode: "end",
-    class: "custom",
-  },
-  {
-    id: "slider-indicator-custom",
-    label: "Slider (indicator mode) and custom style",
-    mode: "indicator",
-    class: "custom",
-  },
-];
-
-@customElement("demo-components-ha-bar-slider")
-export class DemoHaBarSlider extends LitElement {
-  @state() private value = 50;
-
-  @state() private sliderPosition?: number;
-
-  handleValueChanged(e: CustomEvent) {
-    this.value = e.detail.value as number;
-  }
-
-  handleSliderMoved(e: CustomEvent) {
-    this.sliderPosition = e.detail.value as number;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-card>
-        <div class="card-content">
-          <p><b>Slider values</b></p>
-          <table>
-            <tbody>
-              <tr>
-                <td>position</td>
-                <td>${this.sliderPosition ?? "-"}</td>
-              </tr>
-              <tr>
-                <td>value</td>
-                <td>${this.value ?? "-"}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </ha-card>
-      ${repeat(sliders, (slider) => {
-        const { id, label, ...config } = slider;
-        return html`
-          <ha-card>
-            <div class="card-content">
-              <label id=${id}>${label}</label>
-              <pre>Config: ${JSON.stringify(config)}</pre>
-              <ha-bar-slider
-                .value=${this.value}
-                .mode=${config.mode}
-                class=${ifDefined(config.class)}
-                @value-changed=${this.handleValueChanged}
-                @slider-moved=${this.handleSliderMoved}
-                aria-labelledby=${id}
-              >
-              </ha-bar-slider>
-            </div>
-          </ha-card>
-        `;
-      })}
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Vertical</b></p>
-          <div class="vertical-sliders">
-            ${repeat(sliders, (slider) => {
-              const { id, label, ...config } = slider;
-              return html`
-                <ha-bar-slider
-                  .value=${this.value}
-                  .mode=${config.mode}
-                  vertical
-                  class=${ifDefined(config.class)}
-                  @value-changed=${this.handleValueChanged}
-                  @slider-moved=${this.handleSliderMoved}
-                  aria-label=${label}
-                >
-                </ha-bar-slider>
-              `;
-            })}
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        --slider-bar-color: #ffcf4c;
-        --slider-bar-background: #ffcf4c64;
-        --slider-bar-thickness: 100px;
-        --slider-bar-border-radius: 24px;
-      }
-      .vertical-sliders {
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      .vertical-sliders > *:not(:last-child) {
-        margin-right: 4px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-bar-slider": DemoHaBarSlider;
-  }
-}

gallery/src/pages/components/ha-expansion-panel.markdown

@@ -1,5 +0,0 @@
----
-title: Expansion Panel
----
-
-Expansion panel following all the ARIA guidelines.

gallery/src/pages/components/ha-expansion-panel.ts

@@ -1,157 +0,0 @@
-import { mdiPacMan } from "@mdi/js";
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-expansion-panel";
-import "../../../../src/components/ha-markdown";
-import "../../components/demo-black-white-row";
-import { LONG_TEXT } from "../../data/text";
-
-const SHORT_TEXT = LONG_TEXT.substring(0, 113);
-
-const SAMPLES: {
-  template: (slot: string, leftChevron: boolean) => TemplateResult;
-}[] = [
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          header="Attr header"
-        >
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          header="Attr header"
-          secondary="Attr secondary"
-        >
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          .header=${"Prop header"}
-        >
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          .header=${"Prop header"}
-          .secondary=${"Prop secondary"}
-        >
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          .header=${"Prop header"}
-        >
-          <span slot="secondary">Slot Secondary</span>
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
-          <span slot="header">Slot header</span>
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
-          <span slot="header">Slot header with actions</span>
-          <ha-icon-button
-            slot="icons"
-            label="Some Action"
-            .path=${mdiPacMan}
-          ></ha-icon-button>
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          header="Attr Header with actions"
-        >
-          <ha-icon-button
-            slot="icons"
-            label="Some Action"
-            .path=${mdiPacMan}
-          ></ha-icon-button>
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
-];
-
-@customElement("demo-components-ha-expansion-panel")
-export class DemoHaExpansionPanel extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${SAMPLES.map(
-        (sample) => html`
-          <demo-black-white-row>
-            ${["light", "dark"].map((slot) =>
-              sample.template(slot, slot === "dark")
-            )}
-          </demo-black-white-row>
-        `
-      )}
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-expansion-panel {
-        margin: -16px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-expansion-panel": DemoHaExpansionPanel;
-  }
-}

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

@@ -3,7 +3,6 @@ import "@material/mwc-button";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@@ -21,22 +20,16 @@ const ENTITIES = [
   }),
   getEntity("media_player", "livingroom", "playing", {
     friendly_name: "Livingroom",
-    media_content_type: "music",
-    device_class: "tv",
   }),
   getEntity("media_player", "lounge", "idle", {
     friendly_name: "Lounge",
     supported_features: 444983,
-    device_class: "speaker",
   }),
   getEntity("light", "bedroom", "on", {
     friendly_name: "Bedroom",
-    effect: "colorloop",
-    effect_list: ["colorloop", "random"],
   }),
   getEntity("switch", "coffee", "off", {
     friendly_name: "Coffee",
-    device_class: "switch",
   }),
 ];
 
@@ -148,13 +141,7 @@ const SCHEMAS: {
         selector: { attribute: { entity_id: "" } },
         context: { filter_entity: "entity" },
       },
-      {
-        name: "State",
-        selector: { state: { entity_id: "" } },
-        context: { filter_entity: "entity", filter_attribute: "Attribute" },
-      },
       { name: "Device", selector: { device: {} } },
-      { name: "Config entry", selector: { config_entry: {} } },
       { name: "Duration", selector: { duration: {} } },
       { name: "area", selector: { area: {} } },
       { name: "target", selector: { target: {} } },
@@ -436,7 +423,6 @@ class DemoHaForm extends LitElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
-    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
   }

gallery/src/pages/components/ha-selector.ts

@@ -3,7 +3,6 @@ import "@material/mwc-button";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@@ -116,19 +115,11 @@ const SCHEMAS: {
     name: "One of each",
     input: {
       entity: { name: "Entity", selector: { entity: {} } },
-      state: {
-        name: "State",
-        selector: { state: { entity_id: "alarm_control_panel.alarm" } },
-      },
       attribute: {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
       },
       device: { name: "Device", selector: { device: {} } },
-      config_entry: {
-        name: "Integration",
-        selector: { config_entry: {} },
-      },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
       area: { name: "Area", selector: { area: {} } },
@@ -195,48 +186,6 @@ const SCHEMAS: {
           },
         },
       },
-      select_disabled_list: {
-        name: "Select disabled option",
-        selector: {
-          select: {
-            options: [
-              { label: "Option 1", value: "Option 1" },
-              { label: "Option 2", value: "Option 2" },
-              { label: "Option 3", value: "Option 3", disabled: true },
-            ],
-            mode: "list",
-          },
-        },
-      },
-      select_disabled_multiple: {
-        name: "Select disabled option",
-        selector: {
-          select: {
-            multiple: true,
-            options: [
-              { label: "Option 1", value: "Option 1" },
-              { label: "Option 2", value: "Option 2" },
-              { label: "Option 3", value: "Option 3", disabled: true },
-            ],
-            mode: "list",
-          },
-        },
-      },
-      select_disabled: {
-        name: "Select disabled option",
-        selector: {
-          select: {
-            options: [
-              { label: "Option 1", value: "Option 1" },
-              { label: "Option 2", value: "Option 2" },
-              { label: "Option 3", value: "Option 3", disabled: true },
-              { label: "Option 4", value: "Option 4", disabled: true },
-              { label: "Option 5", value: "Option 5", disabled: true },
-              { label: "Option 6", value: "Option 6" },
-            ],
-          },
-        },
-      },
       select_custom: {
         name: "Select (Custom)",
         selector: {
@@ -327,7 +276,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
-    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);

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

@@ -75,10 +75,6 @@ const ENTITIES = [
     timestamp: 1641801600,
     friendly_name: "Date and Time",
   }),
-  getEntity("sensor", "humidity", "23.2", {
-    friendly_name: "Humidity",
-    unit_of_measurement: "%",
-  }),
   getEntity("input_select", "dropdown", "Soda", {
     friendly_name: "Dropdown",
     options: ["Soda", "Beer", "Wine"],
@@ -146,7 +142,6 @@ const CONFIGS = [
     - light.non_existing
     - climate.ecobee
     - input_number.number
-    - sensor.humidity
     `,
   },
   {

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/misc/integration-card.ts

@@ -191,12 +191,9 @@ const createEntityRegistryEntries = (
     hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
-    id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",
-    has_entity_name: false,
-    unique_id: "updater",
   },
 ];
 

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

@@ -1,7 +1,16 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { CoverEntityFeature } from "../../../../src/data/cover";
+import {
+  SUPPORT_OPEN,
+  SUPPORT_STOP,
+  SUPPORT_CLOSE,
+  SUPPORT_SET_POSITION,
+  SUPPORT_OPEN_TILT,
+  SUPPORT_STOP_TILT,
+  SUPPORT_CLOSE_TILT,
+  SUPPORT_SET_TILT_POSITION,
+} from "../../../../src/data/cover";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -13,127 +22,113 @@ import "../../components/demo-more-infos";
 const ENTITIES = [
   getEntity("cover", "position_buttons", "on", {
     friendly_name: "Position Buttons",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE,
+    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
   }),
   getEntity("cover", "position_slider_half", "on", {
     friendly_name: "Position Half-Open",
     supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
     current_position: 50,
   }),
   getEntity("cover", "position_slider_open", "on", {
     friendly_name: "Position Open",
     supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
     current_position: 100,
   }),
   getEntity("cover", "position_slider_closed", "on", {
     friendly_name: "Position Closed",
     supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
     current_position: 0,
   }),
   getEntity("cover", "tilt_buttons", "on", {
     friendly_name: "Tilt Buttons",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
   }),
   getEntity("cover", "tilt_slider_half", "on", {
     friendly_name: "Tilt Half-Open",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 50,
   }),
   getEntity("cover", "tilt_slider_open", "on", {
     friendly_name: "Tilt Open",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 100,
   }),
   getEntity("cover", "tilt_slider_closed", "on", {
     friendly_name: "Tilt Closed",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 0,
   }),
   getEntity("cover", "position_slider_tilt_slider", "on", {
     friendly_name: "Both Sliders",
     supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_tilt_slider", "on", {
     friendly_name: "Position & Tilt Slider",
     supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_slider_tilt", "on", {
     friendly_name: "Position Slider & Tilt",
     supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt_slider", "on", {
     friendly_name: "Position Slider Only & Tilt Buttons",
     supported_features:
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt", "on", {
     friendly_name: "Position Slider Only & Tilt",
     supported_features:
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),

gallery/src/pages/more-info/input-number.markdown

@@ -1,3 +0,0 @@
----
-title: Input Number
----

gallery/src/pages/more-info/input-number.ts

@@ -1,60 +0,0 @@
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
-import {
-  MockHomeAssistant,
-  provideHass,
-} from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-more-infos";
-
-const ENTITIES = [
-  getEntity("input_number", "box1", 0, {
-    friendly_name: "Box1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "box",
-    unit_of_measurement: "items",
-  }),
-  getEntity("input_number", "slider1", 0, {
-    friendly_name: "Slider1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "slider",
-    unit_of_measurement: "items",
-  }),
-];
-
-@customElement("demo-more-info-input-number")
-class DemoMoreInfoInputNumber extends LitElement {
-  @property() public hass!: MockHomeAssistant;
-
-  @query("demo-more-infos") private _demoRoot!: HTMLElement;
-
-  protected render(): TemplateResult {
-    return html`
-      <demo-more-infos
-        .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
-      ></demo-more-infos>
-    `;
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    const hass = provideHass(this._demoRoot);
-    hass.updateTranslations(null, "en");
-    hass.addEntities(ENTITIES);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-info-input-number": DemoMoreInfoInputNumber;
-  }
-}

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

@@ -1,7 +1,12 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
+import {
+  LightColorModes,
+  SUPPORT_EFFECT,
+  SUPPORT_FLASH,
+  SUPPORT_TRANSITION,
+} from "../../../../src/data/light";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -17,8 +22,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_color_modes: [LightColorMode.BRIGHTNESS],
-    color_mode: LightColorMode.BRIGHTNESS,
+    supported_color_modes: [LightColorModes.BRIGHTNESS],
+    color_mode: LightColorModes.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -27,10 +32,10 @@ const ENTITIES = [
     min_mireds: 30,
     max_mireds: 150,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
     ],
-    color_mode: LightColorMode.COLOR_TEMP,
+    color_mode: LightColorModes.COLOR_TEMP,
   }),
   getEntity("light", "color_hs_light", "on", {
     friendly_name: "Color HS Light",
@@ -39,16 +44,13 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.HS,
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.HS,
     ],
-    color_mode: LightColorMode.HS,
+    color_mode: LightColorModes.HS,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgb_ct_light", "on", {
@@ -57,28 +59,22 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.RGB,
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGB,
     ],
-    color_mode: LightColorMode.COLOR_TEMP,
+    color_mode: LightColorModes.COLOR_TEMP,
     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:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
-    color_mode: LightColorMode.RGB,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
+    color_mode: LightColorModes.RGB,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbw_light", "on", {
@@ -87,16 +83,13 @@ const ENTITIES = [
     rgbw_color: [30, 100, 255, 125],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.RGBW,
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGBW,
     ],
-    color_mode: LightColorMode.RGBW,
+    color_mode: LightColorModes.RGBW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbww_light", "on", {
@@ -105,16 +98,13 @@ const ENTITIES = [
     rgbww_color: [30, 100, 255, 125, 10],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.RGBWW,
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGBWW,
     ],
-    color_mode: LightColorMode.RGBWW,
+    color_mode: LightColorModes.RGBWW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_xy_light", "on", {
@@ -124,16 +114,13 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.XY,
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.XY,
     ],
-    color_mode: LightColorMode.XY,
+    color_mode: LightColorModes.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];

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

@@ -139,13 +139,6 @@ const ENTITIES = [
     title: undefined,
     friendly_name: "Installing without title",
   }),
-  getEntity("update", "update21", "on", {
-    ...base_attributes,
-    in_progress: true,
-    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
-    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
-  }),
 ];
 
 @customElement("demo-more-info-update")

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 { StoreAddon } from "../../../src/data/supervisor/store";
+import {
+  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) => {
-    if (filter) {
-      return filterAndSort(addons, filter);
+  private _getAddons = memoizeOne(
+    (addons: HassioAddonInfo[], filter?: string) => {
+      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.state.not_available")}
+                      ? this.supervisor.localize("addon.not_installed")
+                      : this.supervisor.localize("addon.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"
@@ -118,7 +124,7 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}?store=true`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
   static get styles(): CSSResultGroup {

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

@@ -14,18 +14,16 @@ 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 { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -61,24 +59,17 @@ class HassioAddonStore extends LitElement {
   @state() private _filter?: string;
 
   public async refreshData() {
-    try {
-      await reloadHassioAddons(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      await this._loadData();
-    }
+    await reloadHassioAddons(this.hass);
+    await this._loadData();
   }
 
   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.store.addons,
+        this.supervisor.addon.repositories,
+        this.supervisor.addon.addons,
         this._filter
       );
     }
@@ -154,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,15 @@ 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 {
-  addStoreRepository,
-  fetchSupervisorStore,
-  StoreAddonDetails,
-} from "../../../src/data/supervisor/store";
+  fetchHassioSupervisorInfo,
+  setSupervisorOption,
+} from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
@@ -47,19 +45,11 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) public addon?:
-    | HassioAddonDetails
-    | StoreAddonDetails;
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() private _error?: string;
-
-  private _backPath = new URLSearchParams(window.parent.location.search).get(
-    "store"
-  )
-    ? "/hassio/store"
-    : "/hassio/dashboard";
+  @state() _error?: string;
 
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
@@ -81,7 +71,7 @@ class HassioAddonDashboard extends LitElement {
       ></hass-error-screen>`;
     }
 
-    if (!this.addon || !this.supervisor?.addon) {
+    if (!this.addon) {
       return html`<hass-loading-screen></hass-loading-screen>`;
     }
 
@@ -125,7 +115,6 @@ class HassioAddonDashboard extends LitElement {
         .narrow=${this.narrow}
         .route=${route}
         .tabs=${addonTabs}
-        .backPath=${this._backPath}
         supervisor
       >
         <span slot="header">${this.addon.name}</span>
@@ -184,10 +173,10 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       const requestedAddonRepository = extractSearchParam("repository_url");
       if (requestedAddonRepository) {
-        const storeInfo = await fetchSupervisorStore(this.hass);
+        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
         if (
-          !storeInfo.repositories.find(
-            (repo) => repo.source === requestedAddonRepository
+          !supervisorInfo.addons_repositories.find(
+            (repo) => repo === requestedAddonRepository
           )
         ) {
           if (
@@ -208,7 +197,12 @@ class HassioAddonDashboard extends LitElement {
           }
 
           try {
-            await addStoreRepository(this.hass, requestedAddonRepository);
+            await setSupervisorOption(this.hass, {
+              addons_repositories: [
+                ...supervisorInfo.addons_repositories,
+                requestedAddonRepository,
+              ],
+            });
           } catch (err: any) {
             this._error = extractApiErrorMessage(err);
           }
@@ -216,8 +210,8 @@ class HassioAddonDashboard extends LitElement {
       }
 
       if (requestedAddon) {
-        const store = await fetchSupervisorStore(this.hass);
-        const validAddon = store.addons.some(
+        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+        const validAddon = addonsInfo.addons.some(
           (addon) => addon.slug === requestedAddon
         );
         if (!validAddon) {
@@ -245,14 +239,12 @@ class HassioAddonDashboard extends LitElement {
 
     if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
       fireEvent(this, "supervisor-collection-refresh", {
-        collection: "addon",
+        collection: "supervisor",
       });
     }
 
     if (path === "uninstall") {
       window.history.back();
-    } else if (path === "install") {
-      this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
     } else {
       await this._routeDataChanged();
     }
@@ -270,11 +262,8 @@ class HassioAddonDashboard extends LitElement {
       return;
     }
     try {
-      if (!this.supervisor.addon) {
-        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        fireEvent(this, "supervisor-update", { addon: addonsInfo });
-      }
-      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!:
-    | HassioAddonDetails
-    | StoreAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "info",

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

@@ -40,7 +40,6 @@ import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
-  AddonCapability,
   fetchHassioAddonChangelog,
   fetchHassioAddonInfo,
   HassioAddonDetails,
@@ -60,10 +59,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../../src/data/hassio/common";
-import {
-  StoreAddon,
-  StoreAddonDetails,
-} from "../../../../src/data/supervisor/store";
+import { StoreAddon } from "../../../../src/data/supervisor/store";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -104,9 +100,7 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public addon!:
-    | HassioAddonDetails
-    | StoreAddonDetails;
+  @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
@@ -149,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"
@@ -524,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")}
@@ -675,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}`
@@ -702,7 +696,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _showMoreInfo(ev): void {
-    const id = ev.currentTarget.id as AddonCapability;
+    const id = ev.currentTarget.id;
     showHassioMarkdownDialog(this, {
       title: this.supervisor.localize(`addon.dashboard.capability.${id}.title`),
       content:
@@ -723,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(
-      "[HOST]",
-      document.location.hostname
+    return (
+      this.addon.webui &&
+      this.addon.webui.replace("[HOST]", document.location.hostname)
     );
   }
 
   private get _computeShowWebUI(): boolean | "" | null {
-    return (
-      !this.addon.ingress &&
-      (this.addon as HassioAddonDetails).webui &&
-      this._computeIsRunning
-    );
+    return !this.addon.ingress && this.addon.webui && this._computeIsRunning;
   }
 
   private _openIngress(): void {
@@ -764,8 +754,7 @@ class HassioAddonInfo extends LitElement {
   private async _startOnBootToggled(): Promise<void> {
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
-      boot:
-        (this.addon as HassioAddonDetails).boot === "auto" ? "manual" : "auto",
+      boot: this.addon.boot === "auto" ? "manual" : "auto",
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
@@ -787,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);
@@ -809,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);
@@ -831,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);
@@ -853,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);
@@ -881,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, {
@@ -1024,13 +1013,10 @@ class HassioAddonInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("dialog.uninstall_addon.title", {
-        name: this.addon.name,
-      }),
-      text: this.supervisor.localize("dialog.uninstall_addon.text"),
-      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
-      dismissText: this.supervisor.localize("common.cancel"),
-      destructive: true,
+      title: this.addon.name,
+      text: "Are you sure you want to uninstall this add-on?",
+      confirmText: "uninstall add-on",
+      dismissText: "no",
     });
 
     if (!confirmed) {

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)
-            ?.name || addon
+          this.supervisor.supervisor.addons.find(
+            (entry) => entry.slug === addon
+          )?.name || addon
         );
       }
     }
@@ -119,7 +120,6 @@ export class HassioBackups extends LitElement {
     (narrow: boolean): DataTableColumnContainer => ({
       name: {
         title: this.supervisor.localize("backup.name"),
-        main: true,
         sortable: true,
         filterable: true,
         grows: true,
@@ -177,7 +177,7 @@ export class HassioBackups extends LitElement {
           : supervisorTabs(this.hass)}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
-        .searchLabel=${this.supervisor.localize("backup.search")}
+        .searchLabel=${this.supervisor.localize("search")}
         .noDataText=${this.supervisor.localize("backup.no_backups")}
         .narrow=${this.narrow}
         .route=${this.route}
@@ -241,7 +241,7 @@ export class HassioBackups extends LitElement {
                   : html`
                       <ha-icon-button
                         .label=${this.supervisor.localize(
-                          "backup.delete_selected"
+                          "snapshot.delete_selected"
                         )}
                         .path=${mdiDelete}
                         id="delete-btn"

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) {
-  const options: Fuse.IFuseOptions<StoreAddon> = {
+export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
+  const options: Fuse.IFuseOptions<HassioAddonInfo> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
     minMatchCharLength: 2,

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

@@ -17,12 +17,9 @@ import {
 } from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
-import { HomeAssistant, TranslationDict } from "../../../src/types";
+import { HomeAssistant } from "../../../src/types";
 import "./supervisor-formfield-label";
 
-type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
-  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
-
 interface CheckboxItem {
   slug: string;
   checked: boolean;
@@ -99,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 || "";
@@ -111,9 +108,9 @@ export class SupervisorBackupContent extends LitElement {
     this._focusTarget?.focus();
   }
 
-  private _localize = (key: BackupOrRestoreKey) =>
-    this.supervisor?.localize(`backup.${key}`) ||
-    this.localize!(`ui.panel.page-onboarding.restore.${key}`);
+  private _localize = (string: string) =>
+    this.supervisor?.localize(`backup.${string}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${string}`);
 
   protected render(): TemplateResult {
     if (!this.onboarding && !this.supervisor) {
@@ -171,24 +168,23 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupType === "partial"
         ? html`<div class="partial-picker">
-            ${!this.backup || this.backup.homeassistant
-              ? html`<ha-formfield
-                  .label=${html`<supervisor-formfield-label
-                    label="Home Assistant"
-                    .iconPath=${mdiHomeAssistant}
-                    .version=${this.backup
-                      ? this.backup.homeassistant
-                      : this.hass.config.version}
-                  >
-                  </supervisor-formfield-label>`}
-                >
-                  <ha-checkbox
-                    .checked=${this.homeAssistant}
-                    @change=${this.toggleHomeAssistant}
-                  >
-                  </ha-checkbox>
-                </ha-formfield>`
-              : ""}
+            <ha-formfield
+              .label=${html`<supervisor-formfield-label
+                label="Home Assistant"
+                .iconPath=${mdiHomeAssistant}
+                .version=${this.backup
+                  ? this.backup.homeassistant
+                  : this.hass.config.version}
+              >
+              </supervisor-formfield-label>`}
+            >
+              <ha-checkbox
+                .checked=${this.homeAssistant}
+                @change=${this.toggleHomeAssistant}
+              >
+              </ha-checkbox>
+            </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 {
-        await this.hass!.callApi(
-          "POST",
+      this.hass!.callApi(
+        "POST",
 
-          `hassio/${
-            atLeastVersion(this.hass!.config.version, 2021, 9)
-              ? "backups"
-              : "snapshots"
-          }/${this._backup!.slug}/restore/partial`,
-          backupDetails
-        );
-        this.closeDialog();
-      } catch (error: any) {
-        this._error = error.body.message;
-      }
+        `hassio/${
+          atLeastVersion(this.hass!.config.version, 2021, 9)
+            ? "backups"
+            : "snapshots"
+        }/${this._backup!.slug}/restore/partial`,
+        backupDetails
+      ).then(
+        () => {
+          this.closeDialog();
+        },
+        (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/registries/dialog-hassio-registries.ts

@@ -4,7 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../src/components/ha-form/types";
+import { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-settings-row";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -19,7 +19,7 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { RegistriesDialogParams } from "./show-dialog-registries";
 
-const SCHEMA = [
+const SCHEMA: HaFormSchema[] = [
   {
     name: "registry",
     required: true,
@@ -35,7 +35,7 @@ const SCHEMA = [
     required: true,
     selector: { text: { type: "password" } },
   },
-] as const;
+];
 
 @customElement("dialog-hassio-registries")
 class HassioRegistriesDialog extends LitElement {
@@ -135,8 +135,8 @@ class HassioRegistriesDialog extends LitElement {
     `;
   }
 
-  private _computeLabel = (schema: SchemaUnion<typeof SCHEMA>) =>
-    this.supervisor.localize(`dialog.registries.${schema.name}`);
+  private _computeLabel = (schema: HaFormSchema) =>
+    this.supervisor.localize(`dialog.registries.${schema.name}`) || schema.name;
 
   private _valueChanged(ev: CustomEvent) {
     this._input = ev.detail.value;

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(
-        (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
-      )
+      .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
       .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/dialogs/suggestAddonRestart.ts

@@ -18,11 +18,9 @@ export const suggestAddonRestart = async (
   addon: HassioAddonDetails
 ): Promise<void> => {
   const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("dialog.restart_addon.title", {
-      name: addon.name,
-    }),
+    title: supervisor.localize("common.restart_name", "name", addon.name),
     text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.restart"),
+    confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
     dismissText: supervisor.localize("common.cancel"),
   });
   if (confirmed) {
@@ -30,9 +28,11 @@ export const suggestAddonRestart = async (
       await restartHassioAddon(hass, addon.slug);
     } catch (err: any) {
       showAlertDialog(element, {
-        title: supervisor.localize("common.failed_to_restart_name", {
-          name: addon.name,
-        }),
+        title: supervisor.localize(
+          "common.failed_to_restart_name",
+          "name",
+          addon.name
+        ),
         text: extractApiErrorMessage(err),
       });
     }

hassio/src/supervisor-base-element.ts

@@ -22,7 +22,6 @@ import {
   Supervisor,
   SupervisorObject,
   supervisorCollection,
-  SupervisorKeys,
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
@@ -125,13 +124,9 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
     this.supervisor = {
       ...this.supervisor,
-      localize: await computeLocalize<SupervisorKeys>(
-        this.constructor.prototype,
-        language,
-        {
-          [language]: data,
-        }
-      ),
+      localize: await computeLocalize(this.constructor.prototype, language, {
+        [language]: data,
+      }),
     };
   }
 

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

@@ -23,11 +23,10 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
-import { showJoinBetaDialog } from "../../../src/panels/config/core/updates/show-dialog-join-beta";
 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";
@@ -231,27 +230,36 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     if (this.supervisor.supervisor.channel === "stable") {
-      showJoinBetaDialog(this, {
-        join: async () => {
-          await this._setChannel("beta");
-          button.progress = false;
-        },
-        cancel: () => {
-          button.progress = false;
-        },
+      const confirmed = await showConfirmationDialog(this, {
+        title: this.supervisor.localize("system.supervisor.warning"),
+        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
+          <br />
+          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
+          <br /><br />
+          ${this.supervisor.localize("system.supervisor.beta_release_items")}
+          <ul>
+            <li>Home Assistant Core</li>
+            <li>Home Assistant Supervisor</li>
+            <li>Home Assistant Operating System</li>
+          </ul>
+          <br />
+          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
+        confirmText: this.supervisor.localize(
+          "system.supervisor.join_beta_action"
+        ),
+        dismissText: this.supervisor.localize("common.cancel"),
       });
-    } else {
-      await this._setChannel("stable");
-      button.progress = false;
-    }
-  }
 
-  private async _setChannel(
-    channel: SupervisorOptions["channel"]
-  ): Promise<void> {
+      if (!confirmed) {
+        button.progress = false;
+        return;
+      }
+    }
+
     try {
       const data: Partial<SupervisorOptions> = {
-        channel,
+        channel:
+          this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
@@ -262,6 +270,8 @@ class HassioSupervisorInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
+    } finally {
+      button.progress = false;
     }
   }
 

lint-staged.config.js

@@ -1,11 +1,4 @@
 module.exports = {
-  "*.{js,ts}": [
-    "prettier --write",
-    'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
-  ],
-  "!(/translations)*.{json,css,md,html}": "prettier --write",
-  "translations/*/*.json": (files) =>
-    'printf "%s\n" "These files should not be modified.  Instead, make the necessary modifications in src/translations/en.json.  Please see translations/README.md for details." ' +
-    files.join(" ") +
-    " >&2 && exit 1",
+  "*.{js,ts}": 'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
+  "!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
 };

package.json

@@ -16,9 +16,6 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "postinstall": "husky install",
-    "prepack": "pinst --disable",
-    "postpack": "pinst --enable",
     "test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.js \"test/**/*.ts\""
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
@@ -43,12 +40,12 @@
     "@formatjs/intl-numberformat": "^7.2.5",
     "@formatjs/intl-pluralrules": "^4.1.5",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
+    "@formatjs/intl-utils": "^3.8.4",
     "@fullcalendar/common": "5.9.0",
     "@fullcalendar/core": "5.9.0",
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
-    "@fullcalendar/timegrid": "5.9.0",
     "@lit-labs/motion": "^1.0.2",
     "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
     "@material/chips": "14.0.0-canary.261f2db59.0",
@@ -75,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/svg": "7.0.96",
+    "@mdi/js": "6.7.96",
+    "@mdi/svg": "6.7.96",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -92,8 +89,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.2.0",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0",
+    "@vaadin/combo-box": "^23.0.10",
+    "@vaadin/vaadin-themable-mixin": "^23.0.10",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -110,15 +107,15 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hammerjs": "^2.0.8",
-    "hls.js": "^1.2.3",
-    "home-assistant-js-websocket": "^8.0.0",
+    "hls.js": "^1.1.5",
+    "home-assistant-js-websocket": "^7.1.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
+    "lit-vaadin-helpers": "^0.3.0",
     "marked": "^4.0.12",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
@@ -138,7 +135,6 @@
     "vis-network": "^8.5.4",
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
-    "weekstart": "^1.1.0",
     "workbox-cacheable-response": "^6.4.2",
     "workbox-core": "^6.4.2",
     "workbox-expiration": "^6.4.2",
@@ -170,7 +166,6 @@
     "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
     "@types/glob": "^7",
-    "@types/hammerjs": "^2.0.41",
     "@types/js-yaml": "^4",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
@@ -207,9 +202,9 @@
     "gulp-rename": "^2.0.0",
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
-    "husky": "^8.0.1",
+    "husky": "^1.3.1",
     "instant-mocha": "^1.3.1",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^11.1.2",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
@@ -218,7 +213,6 @@
     "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
-    "pinst": "^3.0.0",
     "prettier": "^2.4.1",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
@@ -251,9 +245,14 @@
     "@lit/reactive-element": "1.2.1"
   },
   "main": "src/home-assistant.js",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "prettier": {
     "trailingComma": "es5",
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.3"
+  "packageManager": "yarn@3.2.0"
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20221102.1"
+version      = "20220526.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
@@ -23,3 +23,8 @@ include-package-data = true
 
 [tool.setuptools.packages.find]
 include = ["hass_frontend*"]
+
+[tool.mypy]
+python_version = 3.4
+show_error_codes = true
+strict = true

script/core

@@ -46,14 +46,6 @@ frontend:
 #   development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
   fi
 
-  if [ ! -z "${CODESPACES}" ]; then
-  echo "
-http:
-  use_x_forwarded_for: true
-  trusted_proxies:
-    - 127.0.0.1
-" >> "${WD}/config/configuration.yaml"
-  fi
 fi
 
 hass -c "${WD}/config"

script/translations_download

@@ -20,28 +20,24 @@ fi
 # Load token from file if not already in the environment
 [ -z "${LOKALISE_TOKEN-}" ] && LOKALISE_TOKEN="$(<.lokalise_token)"
 
-declare -A PROJECT_ID=( \
-    [frontend]="3420425759f6d6d241f598.13594006" \
-    [backend]="130246255a974bd3b5e8a1.51616605" \
-    )
+PROJECT_ID="3420425759f6d6d241f598.13594006"
+LOCAL_DIR="$(pwd)/translations/downloads"
+FILE_FORMAT=json
 
-for project in ${!PROJECT_ID[*]}; do
-LOCAL_DIR=`pwd`/translations/${project}
-rm -f ${LOCAL_DIR}/* || mkdir -p ${LOCAL_DIR}
-    docker run \
-        -v ${LOCAL_DIR}:/opt/dest/locale \
-        --rm \
-        lokalise/lokalise-cli-2@sha256:f1860b26be22fa73b8c93bc5f8690f2afc867610a42de6fc27adc790e5d4425d \
-        lokalise2 \
-            --token ${LOKALISE_TOKEN} \
-            --project-id ${PROJECT_ID[${project}]} \
-            file download \
-            --export-empty-as skip \
-            --format json \
-            --json-unescaped-slashes=true \
-            --replace-breaks=false \
-            --original-filenames=false \
-            --unzip-to /opt/dest
-done
+mkdir -p ${LOCAL_DIR}
+
+docker run \
+     -v ${LOCAL_DIR}:/opt/dest/locale \
+     --rm \
+     lokalise/lokalise-cli-2@sha256:f1860b26be22fa73b8c93bc5f8690f2afc867610a42de6fc27adc790e5d4425d lokalise2 \
+     --token ${LOKALISE_TOKEN} \
+     --project-id ${PROJECT_ID} \
+     file download \
+     --export-empty-as skip \
+     --format json \
+     --json-unescaped-slashes=true \
+     --replace-breaks=false \
+     --original-filenames=false \
+     --unzip-to /opt/dest
 
 ./node_modules/.bin/gulp check-downloaded-translations

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) {
@@ -62,11 +57,7 @@ async function main(args) {
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync(
-    "pyproject.toml",
-    setup.replace(version, newVersion),
-    "utf-8"
-  );
+  fs.writeFileSync("pyproject.toml", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -1,2 +0,0 @@
-# Setuptools v62.3 doesn't support editable installs with just 'pyproject.toml' (PEP 660).
-# Keep this file until it does!

src/auth/ha-auth-flow.ts

@@ -15,7 +15,7 @@ import { computeInitialHaFormData } from "../components/ha-form/compute-initial-
 import "../components/ha-form/ha-form";
 import "../components/ha-formfield";
 import "../components/ha-markdown";
-import { AuthProvider, autocompleteLoginFields } from "../data/auth";
+import { AuthProvider } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -204,7 +204,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             : html``}
           <ha-form
             .data=${this._stepData}
-            .schema=${autocompleteLoginFields(step.data_schema)}
+            .schema=${step.data_schema}
             .error=${step.errors}
             .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}
@@ -314,8 +314,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   }
 
   private _computeStepDescription(step: DataEntryFlowStepForm) {
-    const resourceKey =
-      `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description` as const;
+    const resourceKey = `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description`;
     const args: string[] = [];
     const placeholders = step.description_placeholders || {};
     Object.keys(placeholders).forEach((key) => {

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

@@ -3,7 +3,6 @@ import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HaFormSchema } from "../components/ha-form/types";
-import { autocompleteLoginFields } from "../data/auth";
 import type { DataEntryFlowStep } from "../data/data_entry_flow";
 
 declare global {
@@ -70,9 +69,7 @@ export class HaPasswordManagerPolyfill extends LitElement {
           aria-hidden="true"
           @submit=${this._handleSubmit}
         >
-          ${autocompleteLoginFields(this.step.data_schema).map((input) =>
-            this.render_input(input)
-          )}
+          ${this.step.data_schema.map((input) => this.render_input(input))}
           <input type="submit" />
           <style>
             ${this.styles}
@@ -92,10 +89,8 @@ export class HaPasswordManagerPolyfill extends LitElement {
       <input
         tabindex="-1"
         .id=${schema.name}
-        .name=${schema.name}
         .type=${inputType}
         .value=${this.stepData[schema.name] || ""}
-        .autocomplete=${schema.autocomplete}
         @input=${this._valueChanged}
       />
     `;

src/common/color/compute-color.ts

@@ -1,42 +0,0 @@
-import { hex2rgb } from "./convert-color";
-
-export const THEME_COLORS = new Set([
-  "primary",
-  "accent",
-  "disabled",
-  "red",
-  "pink",
-  "purple",
-  "deep-purple",
-  "indigo",
-  "blue",
-  "light-blue",
-  "cyan",
-  "teal",
-  "green",
-  "light-green",
-  "lime",
-  "yellow",
-  "amber",
-  "orange",
-  "deep-orange",
-  "brown",
-  "grey",
-  "blue-grey",
-  "black",
-  "white",
-]);
-
-export function computeRgbColor(color: string): string {
-  if (THEME_COLORS.has(color)) {
-    return `var(--rgb-${color}-color)`;
-  }
-  if (color.startsWith("#")) {
-    try {
-      return hex2rgb(color).join(", ");
-    } catch (err) {
-      return "";
-    }
-  }
-  return color;
-}

src/common/const.ts

@@ -6,14 +6,12 @@ import {
   mdiAlert,
   mdiAngleAcute,
   mdiAppleSafari,
-  mdiArrowLeftRight,
   mdiBell,
   mdiBookmark,
   mdiBrightness5,
   mdiBullhorn,
   mdiCalendar,
   mdiCalendarClock,
-  mdiCarCoolantLevel,
   mdiCash,
   mdiClock,
   mdiCloudUpload,
@@ -27,6 +25,7 @@ import {
   mdiFlower,
   mdiFormatListBulleted,
   mdiFormTextbox,
+  mdiGasCylinder,
   mdiGauge,
   mdiGestureTapButton,
   mdiGoogleAssistant,
@@ -38,30 +37,23 @@ import {
   mdiLightningBolt,
   mdiMailbox,
   mdiMapMarkerRadius,
-  mdiMeterGas,
-  mdiMicrophoneMessage,
   mdiMolecule,
   mdiMoleculeCo,
   mdiMoleculeCo2,
   mdiPalette,
-  mdiProgressClock,
   mdiRayVertex,
   mdiRemote,
   mdiRobot,
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
-  mdiSpeedometer,
+  mdiTextToSpeech,
   mdiThermometer,
   mdiThermostat,
   mdiTimerOutline,
   mdiVideo,
-  mdiWater,
   mdiWaterPercent,
   mdiWeatherCloudy,
-  mdiWeatherPouring,
-  mdiWeatherWindy,
-  mdiWeight,
   mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
@@ -82,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,
@@ -106,7 +97,6 @@ export const FIXED_DOMAIN_ICONS = {
   proximity: mdiAppleSafari,
   remote: mdiRemote,
   scene: mdiPalette,
-  schedule: mdiCalendarClock,
   script: mdiScriptText,
   select: mdiFormatListBulleted,
   sensor: mdiEye,
@@ -129,14 +119,11 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   carbon_monoxide: mdiMoleculeCo,
   current: mdiCurrentAc,
   date: mdiCalendar,
-  distance: mdiArrowLeftRight,
-  duration: mdiProgressClock,
   energy: mdiLightningBolt,
   frequency: mdiSineWave,
-  gas: mdiMeterGas,
+  gas: mdiGasCylinder,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
-  moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
   nitrogen_monoxide: mdiMolecule,
@@ -147,20 +134,14 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   pm25: mdiMolecule,
   power: mdiFlash,
   power_factor: mdiAngleAcute,
-  precipitation_intensity: mdiWeatherPouring,
   pressure: mdiGauge,
   reactive_power: mdiFlash,
   signal_strength: mdiWifi,
-  speed: mdiSpeedometer,
   sulphur_dioxide: mdiMolecule,
   temperature: mdiThermometer,
   timestamp: mdiClock,
   volatile_organic_compounds: mdiMolecule,
   voltage: mdiSineWave,
-  volume: mdiCarCoolantLevel,
-  water: mdiWater,
-  weight: mdiWeight,
-  wind_speed: mdiWeatherWindy,
 };
 
 /** Domains that have a state card. */
@@ -184,6 +165,46 @@ export const DOMAINS_WITH_CARD = [
   "water_heater",
 ];
 
+/** Domains with separate more info dialog. */
+export const DOMAINS_WITH_MORE_INFO = [
+  "alarm_control_panel",
+  "automation",
+  "camera",
+  "climate",
+  "configurator",
+  "counter",
+  "cover",
+  "fan",
+  "group",
+  "humidifier",
+  "input_datetime",
+  "light",
+  "lock",
+  "media_player",
+  "person",
+  "remote",
+  "script",
+  "scene",
+  "sun",
+  "timer",
+  "update",
+  "vacuum",
+  "water_heater",
+  "weather",
+];
+
+/** Domains that do not show the default more info dialog content (e.g. the attribute section)
+ *  and do not have a separate more info (so not in DOMAINS_WITH_MORE_INFO). */
+export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
+  "input_number",
+  "input_select",
+  "input_text",
+  "number",
+  "scene",
+  "update",
+  "select",
+];
+
 /** Domains that render an input element instead of a text value when displayed in a row.
  *  Those rows should then not show a cursor pointer when hovered (which would normally
  *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
@@ -215,6 +236,9 @@ export const DOMAINS_INPUT_ROW = [
   "vacuum",
 ];
 
+/** Domains that should have the history hidden in the more info dialog. */
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator"];
+
 /** States that we consider "off". */
 export const STATES_OFF = ["closed", "locked", "off"];
 

src/common/datetime/first_weekday.ts

@@ -1,33 +0,0 @@
-import { getWeekStartByLocale } from "weekstart";
-import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
-
-export const weekdays = [
-  "sunday",
-  "monday",
-  "tuesday",
-  "wednesday",
-  "thursday",
-  "friday",
-  "saturday",
-] as const;
-
-type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
-  if (locale.first_weekday === FirstWeekday.language) {
-    // @ts-ignore
-    if ("weekInfo" in Intl.Locale.prototype) {
-      // @ts-ignore
-      return new Intl.Locale(locale.language).weekInfo.firstDay % 7;
-    }
-    return (getWeekStartByLocale(locale.language) % 7) as WeekdayIndex;
-  }
-  return weekdays.includes(locale.first_weekday)
-    ? (weekdays.indexOf(locale.first_weekday) as WeekdayIndex)
-    : 1;
-};
-
-export const firstWeekday = (locale: FrontendLocaleData) => {
-  const index = firstWeekdayIndex(locale);
-  return weekdays[index];
-};

src/common/datetime/format_date_time.ts

@@ -1,7 +1,7 @@
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { polyfillsLoaded } from "../translations/localize";
 import { useAmPm } from "./use_am_pm";
+import { polyfillsLoaded } from "../translations/localize";
 
 if (__BUILD__ === "latest" && polyfillsLoaded) {
   await polyfillsLoaded;
@@ -28,28 +28,6 @@ const formatDateTimeMem = memoizeOne(
     )
 );
 
-// Aug 9, 8:23 AM
-export const formatShortDateTime = (
-  dateObj: Date,
-  locale: FrontendLocaleData
-) => formatShortDateTimeMem(locale).format(dateObj);
-
-const formatShortDateTimeMem = memoizeOne(
-  (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        month: "short",
-        day: "numeric",
-        hour: useAmPm(locale) ? "numeric" : "2-digit",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
-);
-
 // August 9, 2021, 8:23:15 AM
 export const formatDateTimeWithSeconds = (
   dateObj: Date,

src/common/datetime/format_duration.ts

@@ -1,28 +0,0 @@
-import { HaDurationData } from "../../components/ha-duration-input";
-
-const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
-
-export const formatDuration = (duration: HaDurationData) => {
-  const d = duration.days || 0;
-  const h = duration.hours || 0;
-  const m = duration.minutes || 0;
-  const s = duration.seconds || 0;
-  const ms = duration.milliseconds || 0;
-
-  if (d > 0) {
-    return `${d} day${d === 1 ? "" : "s"} ${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (h > 0) {
-    return `${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (m > 0) {
-    return `${m}:${leftPad(s)}`;
-  }
-  if (s > 0) {
-    return `${s} second${s === 1 ? "" : "s"}`;
-  }
-  if (ms > 0) {
-    return `${ms} millisecond${ms === 1 ? "" : "s"}`;
-  }
-  return null;
-};

src/common/datetime/format_time.ts

@@ -1,7 +1,7 @@
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { polyfillsLoaded } from "../translations/localize";
 import { useAmPm } from "./use_am_pm";
+import { polyfillsLoaded } from "../translations/localize";
 
 if (__BUILD__ === "latest" && polyfillsLoaded) {
   await polyfillsLoaded;
@@ -64,17 +64,3 @@ const formatTimeWeekdayMem = memoizeOne(
       }
     )
 );
-
-// 21:15
-export const formatTime24h = (dateObj: Date) =>
-  formatTime24hMem().format(dateObj);
-
-const formatTime24hMem = memoizeOne(
-  () =>
-    // en-GB to fix Chrome 24:59 to 0:59 https://stackoverflow.com/a/60898146
-    new Intl.DateTimeFormat("en-GB", {
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: false,
-    })
-);

src/common/datetime/relative_time.ts

@@ -1,7 +1,7 @@
+import { selectUnit } from "@formatjs/intl-utils";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import { polyfillsLoaded } from "../translations/localize";
-import { selectUnit } from "../util/select-unit";
 
 if (__BUILD__ === "latest" && polyfillsLoaded) {
   await polyfillsLoaded;

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.removeItem(storageKey);
-      } else {
-        window.localStorage.setItem(storageKey, JSON.stringify(value));
-      }
+      window.localStorage.setItem(storageKey, JSON.stringify(value));
     } catch (err: any) {
       // Safari in private mode doesn't allow localstorage
     }

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}${
-      leaflet.Browser.retina ? "@2x.png" : ".png"
-    }`,
+    `https://{s}.basemaps.cartocdn.com/${
+      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/color/alarm_control_panel_color.ts

@@ -1,18 +0,0 @@
-export const alarmControlPanelColor = (state?: string): string | undefined => {
-  switch (state) {
-    case "armed_away":
-    case "armed_vacation":
-    case "armed_home":
-    case "armed_night":
-    case "armed_custom_bypass":
-      return "alarm-armed";
-    case "pending":
-      return "alarm-pending";
-    case "triggered":
-      return "alarm-triggered";
-    case "disarmed":
-      return "alarm-disarmed";
-    default:
-      return undefined;
-  }
-};