20221205.0 (#14562)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.github/workflows/ci.yaml

@@ -13,6 +13,7 @@ on:
 env:
   NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
 jobs:
   lint:

.github/workflows/demo.yaml

@@ -26,6 +26,8 @@ jobs:
           CI: true
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Deploy to Netlify
         run: npx netlify-cli deploy --dir=demo/dist --prod
         env:

.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@v4.0.0
         with:
           github-token: ${{ github.token }}
           issue-lock-inactive-days: "30"

.github/workflows/nightly.yaml

@@ -49,9 +49,8 @@ jobs:
         run: |
           pip install build
           yarn install
-
+          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/build_frontend
-
           rm -rf dist home_assistant_frontend.egg-info
           python3 -m build
 

.github/workflows/release.yaml

@@ -52,11 +52,11 @@ jobs:
           python3 -m pip install twine build
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
-
+          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v0.1.14
+        uses: softprops/action-gh-release@v0.1.15
         with:
           files: |
             dist/*.whl
@@ -75,7 +75,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2022.06.7
+        uses: home-assistant/wheels@2022.10.1
         with:
           abi: cp310
           tag: musllinux_1_2

.github/workflows/stale.yml

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

.gitignore

@@ -5,6 +5,7 @@
 build
 hass_frontend/*
 dist
+translations
 
 # yarn
 .yarn/*

.vscode/tasks.json

@@ -191,7 +191,13 @@
       "runOptions": {
         "instanceLimit": 1
       }
-    }
+    },
+    {
+      "label": "Setup and fetch nightly translations",
+      "type": "gulp",
+      "task": "setup-and-fetch-nightly-translations",
+      "problemMatcher": []
+          }
   ],
   "inputs": [
     {

.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.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

build-scripts/.eslintrc

@@ -1,7 +0,0 @@
-{
-  "rules": {
-    "import/no-extraneous-dependencies": 0,
-    "no-restricted-syntax": 0,
-    "no-console": 0
-  }
-}

build-scripts/.eslintrc.json

@@ -1,7 +1,12 @@
 {
   "extends": "../.eslintrc.json",
   "rules": {
-    "import/no-extraneous-dependencies": 0,
-    "global-require": 0
+    "no-console": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
+    "global-require": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "prefer-arrow-callback": "off"
   }
 }

build-scripts/babel-plugins/inline-constants-plugin.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 // Currently only supports CommonJS modules, as require is synchronous. `import` would need babel running asynchronous.
@@ -29,7 +28,6 @@ module.exports = function inlineConstants(babel, options, cwd) {
       const absolute = module.startsWith(".")
         ? require.resolve(module, { paths: [cwd] })
         : module;
-      // eslint-disable-next-line import/no-dynamic-require
       return [absolute, require(absolute)];
     })
   );

build-scripts/bundle.js

@@ -1,9 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const env = require("./env.js");
 const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
+// eslint-disable-next-line unused-imports/no-unused-vars
 module.exports.ignorePackages = ({ latestBuild }) => [
   // Part of yaml.js and only used for !!js functions that we don't use
   require.resolve("esprima"),

build-scripts/env.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.js");

build-scripts/gulp/download_translations.js

@@ -1,17 +1,12 @@
-const del = require("del");
 const gulp = require("gulp");
-const fs = require("fs");
+const fs = require("fs/promises");
 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);
 }
@@ -46,50 +41,29 @@ function checkHtml() {
   });
 }
 
-let taskName = "clean-downloaded-translations";
-gulp.task(taskName, function () {
-  return del([`${downloadDir}/**`]);
+// 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());
 });
-tasks.push(taskName);
 
-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 });
+gulp.task("check-all-files-exist", async function () {
+  const file = await fs.readFile(srcMeta, { encoding });
   const meta = JSON.parse(file);
+  const writings = [];
   Object.keys(meta).forEach((lang) => {
-    if (!fs.existsSync(`${inDirFrontend}/${lang}.json`)) {
-      fs.writeFileSync(`${inDirFrontend}/${lang}.json`, JSON.stringify({}));
-    }
-    if (!fs.existsSync(`${inDirBackend}/${lang}.json`)) {
-      fs.writeFileSync(`${inDirBackend}/${lang}.json`, JSON.stringify({}));
-    }
+    writings.push(
+      fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
+        flag: "wx",
+      }),
+      fs.writeFile(`${inDirBackend}/${lang}.json`, JSON.stringify({}), {
+        flag: "wx",
+      })
+    );
   });
-  return Promise.resolve();
+  await Promise.allSettled(writings);
 });
-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(
-  taskName,
-  gulp.series(
-    "check-translations-html",
-    "move-downloaded-translations",
-    "check-all-files-exist",
-    "clean-downloaded-translations"
-  )
+  "check-downloaded-translations",
+  gulp.series("check-translations-html", "check-all-files-exist")
 );
-tasks.push(taskName);
-
-module.exports = tasks;

build-scripts/gulp/entry-html.js

@@ -1,6 +1,4 @@
 // Tasks to generate entry HTML
-/* eslint-disable import/no-dynamic-require */
-/* eslint-disable global-require */
 const gulp = require("gulp");
 const fs = require("fs-extra");
 const path = require("path");
@@ -91,7 +89,9 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
-  let latestAppJS, latestCoreJS, latestCustomPanelJS;
+  let latestAppJS;
+  let latestCoreJS;
+  let latestCustomPanelJS;
 
   if (env.useWDS()) {
     latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";

build-scripts/gulp/fetch-nightly_translations.js

@@ -0,0 +1,170 @@
+// Task to download the latest Lokalise translations from the nightly workflow artifacts
+
+const fs = require("fs/promises");
+const path = require("path");
+const process = require("process");
+const del = require("del");
+const gulp = require("gulp");
+const jszip = require("jszip");
+const tar = require("tar");
+const { Octokit } = require("@octokit/rest");
+const { createOAuthDeviceAuth } = require("@octokit/auth-oauth-device");
+
+const MAX_AGE = 24; // hours
+const OWNER = "home-assistant";
+const REPO = "frontend";
+const WORKFLOW_NAME = "nightly.yaml";
+const ARTIFACT_NAME = "translations";
+const CLIENT_ID = "Iv1.3914e28cb27834d1";
+const EXTRACT_DIR = "translations";
+const TOKEN_FILE = path.join(EXTRACT_DIR, "token.json");
+const ARTIFACT_FILE = path.join(EXTRACT_DIR, "artifact.json");
+
+let allowTokenSetup = false;
+gulp.task("allow-setup-fetch-nightly-translations", (done) => {
+  allowTokenSetup = true;
+  done();
+});
+
+gulp.task("fetch-nightly-translations", async function () {
+  // Skip all when environment flag is set (assumes translations are already in place)
+  if (process.env?.SKIP_FETCH_NIGHTLY_TRANSLATIONS) {
+    console.log("Skipping fetch due to environment signal");
+    return;
+  }
+
+  // Read current translations artifact info if it exists,
+  // and stop if they are not old enough
+  let currentArtifact;
+  try {
+    currentArtifact = JSON.parse(await fs.readFile(ARTIFACT_FILE, "utf-8"));
+    const currentAge =
+      (Date.now() - Date.parse(currentArtifact.created_at)) / 3600000;
+    if (currentAge < MAX_AGE) {
+      console.log(
+        "Keeping current translations (only %s hours old)",
+        currentAge.toFixed(1)
+      );
+      return;
+    }
+  } catch {
+    currentArtifact = null;
+  }
+
+  // To store file writing promises
+  const createExtractDir = fs.mkdir(EXTRACT_DIR, { recursive: true });
+  const writings = [];
+
+  // Authenticate to GitHub using GitHub action token if it exists,
+  // otherwise look for a saved user token or generate a new one if none
+  let tokenAuth;
+  if (process.env.GITHUB_TOKEN) {
+    tokenAuth = { token: process.env.GITHUB_TOKEN };
+  } else {
+    try {
+      tokenAuth = JSON.parse(await fs.readFile(TOKEN_FILE, "utf-8"));
+    } catch {
+      if (!allowTokenSetup) {
+        console.log("No token found so  build wil continue with English only");
+        return;
+      }
+      const auth = createOAuthDeviceAuth({
+        clientType: "github-app",
+        clientId: CLIENT_ID,
+        onVerification: (verification) => {
+          console.log(
+            "Task needs to authenticate to GitHub to fetch the translations from nightly workflow\n" +
+              "Please go to %s to authorize this task\n" +
+              "\nEnter user code: %s\n\n" +
+              "This code will expire in %s minutes\n" +
+              "Task will automatically continue after authorization and token will be saved for future use",
+            verification.verification_uri,
+            verification.user_code,
+            (verification.expires_in / 60).toFixed(0)
+          );
+        },
+      });
+      tokenAuth = await auth({ type: "oauth" });
+      writings.push(
+        createExtractDir.then(
+          fs.writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
+        )
+      );
+    }
+  }
+
+  // Authenticate with token and request workflow runs from GitHub
+  console.log("Fetching new translations...");
+  const octokit = new Octokit({
+    userAgent: "Fetch Nightly Translations",
+    auth: tokenAuth.token,
+  });
+
+  const workflowRunsResponse = await octokit.rest.actions.listWorkflowRuns({
+    owner: OWNER,
+    repo: REPO,
+    workflow_id: WORKFLOW_NAME,
+    status: "success",
+    event: "schedule",
+    per_page: 1,
+    exclude_pull_requests: true,
+  });
+  if (workflowRunsResponse.data.total_count === 0) {
+    throw Error("No successful nightly workflow runs found");
+  }
+  const latestNightlyRun = workflowRunsResponse.data.workflow_runs[0];
+
+  // Stop if current is already the latest, otherwise Find the translations artifact
+  if (currentArtifact?.workflow_run.id === latestNightlyRun.id) {
+    console.log("Stopping because current translations are still the latest");
+    return;
+  }
+  const latestArtifact = (
+    await octokit.actions.listWorkflowRunArtifacts({
+      owner: OWNER,
+      repo: REPO,
+      run_id: latestNightlyRun.id,
+    })
+  ).data.artifacts.find((artifact) => artifact.name === ARTIFACT_NAME);
+  if (!latestArtifact) {
+    throw Error("Latest nightly workflow run has no translations artifact");
+  }
+  writings.push(
+    createExtractDir.then(
+      fs.writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
+    )
+  );
+
+  // Remove the current translations
+  const deleteCurrent = Promise.all(writings).then(
+    del([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
+  );
+
+  // Get the download URL and follow the redirect to download (stored as ArrayBuffer)
+  const downloadResponse = await octokit.actions.downloadArtifact({
+    owner: OWNER,
+    repo: REPO,
+    artifact_id: latestArtifact.id,
+    archive_format: "zip",
+  });
+  if (downloadResponse.status !== 200) {
+    throw Error("Failure downloading translations artifact");
+  }
+
+  // Artifact is a tarball, but GitHub adds it to a zip file
+  console.log("Unpacking downloaded translations...");
+  const zip = await jszip.loadAsync(downloadResponse.data);
+  await deleteCurrent;
+  const extractStream = zip.file(/.*/)[0].nodeStream().pipe(tar.extract());
+  await new Promise((resolve, reject) => {
+    extractStream.on("close", resolve).on("error", reject);
+  });
+});
+
+gulp.task(
+  "setup-and-fetch-nightly-translations",
+  gulp.series(
+    "allow-setup-fetch-nightly-translations",
+    "fetch-nightly-translations"
+  )
+);

build-scripts/gulp/gallery.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 // Run demo develop mode
 const gulp = require("gulp");
 const fs = require("fs");
@@ -41,7 +40,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
     }
     processed.add(pageId);
 
-    const [category, name] = pageId.split("/", 2);
+    const [category] = pageId.split("/", 2);
 
     const demoFile = path.resolve(pageDir, `${pageId}.ts`);
     const descriptionFile = path.resolve(pageDir, `${pageId}.markdown`);

build-scripts/gulp/locale-data.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
 const del = require("del");
 const path = require("path");
 const gulp = require("gulp");

build-scripts/gulp/rollup.js

@@ -5,9 +5,9 @@ const rollup = require("rollup");
 const handler = require("serve-handler");
 const http = require("http");
 const log = require("fancy-log");
+const open = require("open");
 const rollupConfig = require("../rollup");
 const paths = require("../paths");
-const open = require("open");
 
 const bothBuilds = (createConfigFunc, params) =>
   gulp.series(
@@ -30,11 +30,11 @@ const bothBuilds = (createConfigFunc, params) =>
   );
 
 function createServer(serveOptions) {
-  const server = http.createServer((request, response) => {
-    return handler(request, response, {
+  const server = http.createServer((request, response) =>
+    handler(request, response, {
       public: serveOptions.root,
-    });
-  });
+    })
+  );
 
   server.listen(
     serveOptions.port,

build-scripts/gulp/service-worker.js

@@ -1,7 +1,5 @@
 // Generate service worker.
 // Based on manifest, create a file with the content as service_worker.js
-/* eslint-disable import/no-dynamic-require */
-/* eslint-disable global-require */
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs-extra");

build-scripts/gulp/translations.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
 const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
@@ -15,6 +13,8 @@ const { mapFiles } = require("../util");
 const env = require("../env");
 const paths = require("../paths");
 
+require("./fetch-nightly_translations");
+
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
 const workDir = "build/translations";
@@ -23,10 +23,13 @@ const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
 let mergeBackend = false;
 
-gulp.task("translations-enable-merge-backend", (done) => {
-  mergeBackend = true;
-  done();
-});
+gulp.task(
+  "translations-enable-merge-backend",
+  gulp.parallel((done) => {
+    mergeBackend = true;
+    done();
+  }, "allow-setup-fetch-nightly-translations")
+);
 
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
@@ -170,17 +173,24 @@ gulp.task("build-master-translation", () => {
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       merge({
-        fileName: "translationMaster.json",
+        fileName: "en.json",
       })
     )
-    .pipe(gulp.dest(workDir));
+    .pipe(gulp.dest(fullDir));
 });
 
 gulp.task("build-merged-translations", () =>
   gulp
-    .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
-      allowEmpty: true,
-    })
+    .src(
+      [
+        inFrontendDir + "/*.json",
+        "!" + inFrontendDir + "/en.json",
+        workDir + "/test.json",
+      ],
+      {
+        allowEmpty: true,
+      }
+    )
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       flatmap((stream, file) => {
@@ -193,7 +203,7 @@ gulp.task("build-merged-translations", () =>
         //       than a base translation + region.
         const tr = path.basename(file.history[0], ".json");
         const subtags = tr.split("-");
-        const src = [workDir + "/translationMaster.json"];
+        const src = [fullDir + "/en.json"];
         for (let i = 1; i <= subtags.length; i++) {
           const lang = subtags.slice(0, i).join("-");
           if (lang === "test") {
@@ -378,7 +388,6 @@ gulp.task("build-translation-write-metadata", () =>
           if (value.nativeName) {
             newData[key] = value;
           } else {
-            // eslint-disable-next-line no-console
             console.warn(
               `Skipping language ${key}. Native name was not translated.`
             );
@@ -411,8 +420,10 @@ gulp.task(
 gulp.task(
   "build-translations",
   gulp.series(
-    "clean-translations",
-    "ensure-translations-build-dir",
+    gulp.parallel(
+      "fetch-nightly-translations",
+      gulp.series("clean-translations", "ensure-translations-build-dir")
+    ),
     "create-translations",
     "build-translation-fingerprints",
     "build-translation-write-metadata"
@@ -422,8 +433,10 @@ gulp.task(
 gulp.task(
   "build-supervisor-translations",
   gulp.series(
-    "clean-translations",
-    "ensure-translations-build-dir",
+    gulp.parallel(
+      "fetch-nightly-translations",
+      gulp.series("clean-translations", "ensure-translations-build-dir")
+    ),
     "build-master-translation",
     "build-merged-translations",
     "build-translation-fragment-supervisor",

build-scripts/gulp/webpack.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // Tasks to run webpack.
 const fs = require("fs");
 const gulp = require("gulp");
@@ -69,7 +68,6 @@ const doneHandler = (done) => (err, stats) => {
   }
 
   if (stats.hasErrors() || stats.hasWarnings()) {
-    // eslint-disable-next-line no-console
     console.log(stats.toString("minimal"));
   }
 

build-scripts/paths.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 module.exports = {

build-scripts/rollup-plugins/worker-plugin.js

@@ -81,13 +81,13 @@ module.exports = function (opts = {}) {
         opts.workerRegexp.flags
       );
       if (!workerRegexp.test(code)) {
-        return;
+        return undefined;
       }
 
       const ms = new MagicString(code);
       // Reset the regexp
       workerRegexp.lastIndex = 0;
-      while (true) {
+      for (;;) {
         const match = workerRegexp.exec(code);
         if (!match) {
           break;
@@ -98,6 +98,7 @@ module.exports = function (opts = {}) {
         // Parse the optional options object
         if (match[3] && match[3].length > 0) {
           // FIXME: ooooof!
+          // eslint-disable-next-line @typescript-eslint/no-implied-eval
           optionsObject = new Function(`return ${match[3].slice(1)};`)();
         }
         delete optionsObject.type;
@@ -110,12 +111,14 @@ module.exports = function (opts = {}) {
         }
 
         // Find worker file and store it as a chunk with ID prefixed for our loader
+        // eslint-disable-next-line no-await-in-loop
         const resolvedWorkerFile = (await this.resolve(workerFile, id)).id;
         let chunkRefId;
         if (resolvedWorkerFile in refIds) {
           chunkRefId = refIds[resolvedWorkerFile];
         } else {
           this.addWatchFile(resolvedWorkerFile);
+          // eslint-disable-next-line no-await-in-loop
           const source = await getBundledWorker(
             resolvedWorkerFile,
             rollupOptions

build-scripts/rollup.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 const commonjs = require("@rollup/plugin-commonjs");

build-scripts/util.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const fs = require("fs");
 

build-scripts/webpack.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -103,7 +102,6 @@ const createWebpackConfig = ({
               ? path.resolve(context, resource)
               : require.resolve(resource);
           } catch (err) {
-            // eslint-disable-next-line no-console
             console.error(
               "Error in Home Assistant ignore plugin",
               resource,

cast/src/html/launcher-faq.html.template

@@ -213,7 +213,7 @@
         </p>
         <ul>
           <li>Google Chrome (all platforms except iOS)</li>
-          <li>Microsoft Edge (all platforms)</li>
+          <li>Microsoft Edge (all platforms except iOS)</li>
         </ul>
       </div>
 

cast/src/launcher/layout/hc-cast.ts

@@ -88,7 +88,7 @@ class HcCast extends LitElement {
               >
                 ${(this.lovelaceConfig
                   ? this.lovelaceConfig.views
-                  : [generateDefaultViewConfig([], [], [], {}, () => "")]
+                  : [generateDefaultViewConfig({}, {}, {}, {}, () => "")]
                 ).map(
                   (view, idx) => html`
                     <paper-icon-item

cast/src/launcher/layout/hc-layout.ts

@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
       <div class="footer">
         <a href="./faq.html">Frequently Asked Questions</a> – Found a bug?
         <a
-          href="https://github.com/home-assistant/home-assistant-polymer/issues"
+          href="https://github.com/home-assistant/frontend/issues"
           target="_blank"
           >Let us know!</a
         >

demo/src/configs/arsaboo/entities.ts

@@ -508,7 +508,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "imperial",
+        units: "us_customary",
         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: "imperial",
+        units: "us_customary",
         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_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     prefix: "Kitchen: ",
@@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "32%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     style: {
@@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "60%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     prefix: "Bathroom: ",
@@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "77%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                 ],
                 type: "picture-elements",

demo/src/custom-cards/card-tools.js

@@ -138,7 +138,7 @@ if (!window.cardTools) {
       return cardTools.createThing("row", config);
 
     const domain = config.entity.split(".", 1)[0];
-    Object.assign(config, { type: DEFAULT_ROWS[domain] || "text" });
+    Object.assign(config, { type: DEFAULT_ROWS[domain] || "simple" });
     return cardTools.createThing("entity-row", config);
   };
 

demo/src/stubs/recorder.ts

@@ -13,7 +13,6 @@ import {
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const generateMeanStatistics = (
-  id: string,
   start: Date,
   end: Date,
   period: "5minute" | "hour" | "day" | "month" = "hour",
@@ -29,13 +28,12 @@ const generateMeanStatistics = (
     const delta = Math.random() * maxDiff;
     const mean = lastVal + delta;
     statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
+      start: currentDate.getTime(),
+      end: currentDate.getTime(),
       mean,
       min: mean - Math.random() * maxDiff,
       max: mean + Math.random() * maxDiff,
-      last_reset: "1970-01-01T00:00:00+00:00",
+      last_reset: 0,
       state: mean,
       sum: null,
     });
@@ -51,7 +49,6 @@ const generateMeanStatistics = (
 };
 
 const generateSumStatistics = (
-  id: string,
   start: Date,
   end: Date,
   period: "5minute" | "hour" | "day" | "month" = "hour",
@@ -67,13 +64,12 @@ const generateSumStatistics = (
     const add = Math.random() * maxDiff;
     sum += add;
     statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
+      start: currentDate.getTime(),
+      end: currentDate.getTime(),
       mean: null,
       min: null,
       max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
+      last_reset: 0,
       state: initValue + sum,
       sum,
     });
@@ -88,7 +84,6 @@ const generateSumStatistics = (
 };
 
 const generateCurvedStatistics = (
-  id: string,
   start: Date,
   end: Date,
   _period: "5minute" | "hour" | "day" | "month" = "hour",
@@ -108,13 +103,12 @@ const generateCurvedStatistics = (
     const add = Math.random() * maxDiff;
     sum += i * add;
     statistics.push({
-      statistic_id: id,
-      start: currentDate.toISOString(),
-      end: currentDate.toISOString(),
+      start: currentDate.getTime(),
+      end: currentDate.getTime(),
       mean: null,
       min: null,
       max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
+      last_reset: 0,
       state: initValue + sum,
       sum: metered ? sum : null,
     });
@@ -137,14 +131,13 @@ const statisticsFunctions: Record<
   ) => StatisticValue[]
 > = {
   "sensor.energy_consumption_tarif_1": (
-    id: string,
+    _id: string,
     start: Date,
     end: Date,
     period = "hour"
   ) => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -153,20 +146,12 @@ const statisticsFunctions: Record<
       );
     }
     const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(
-      id,
-      start,
-      morningEnd,
-      period,
-      0,
-      0.7
-    );
+    const morningLow = generateSumStatistics(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,
@@ -174,7 +159,6 @@ const statisticsFunctions: Record<
       0
     );
     const eveningLow = generateSumStatistics(
-      id,
       eveningStart,
       end,
       period,
@@ -184,14 +168,13 @@ const statisticsFunctions: Record<
     return [...morningLow, ...empty, ...eveningLow];
   },
   "sensor.energy_consumption_tarif_2": (
-    id: string,
+    _id: string,
     start: Date,
     end: Date,
     period = "hour"
   ) => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -202,7 +185,6 @@ const statisticsFunctions: Record<
     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,
@@ -212,9 +194,8 @@ const statisticsFunctions: Record<
     const highTarifFinalVal = highTarif.length
       ? highTarif[highTarif.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
+    const morning = generateSumStatistics(start, morningEnd, period, 0, 0);
     const evening = generateSumStatistics(
-      id,
       eveningStart,
       end,
       period,
@@ -223,18 +204,17 @@ const statisticsFunctions: Record<
     );
     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": (_id, start, end, period = "hour") =>
+    generateSumStatistics(start, end, period, 0, 0),
   "sensor.energy_production_tarif_1_compensation": (
-    id,
+    _id,
     start,
     end,
     period = "hour"
-  ) => generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+  ) => generateSumStatistics(start, end, period, 0, 0),
+  "sensor.energy_production_tarif_2": (_id, start, end, period = "hour") => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -246,7 +226,6 @@ const statisticsFunctions: Record<
     const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
     const production = generateCurvedStatistics(
-      id,
       productionStart,
       productionEnd,
       period,
@@ -257,16 +236,8 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
+    const morning = generateSumStatistics(start, productionStart, period, 0, 0);
     const evening = generateSumStatistics(
-      id,
       productionEnd,
       dayEnd,
       period,
@@ -274,7 +245,6 @@ const statisticsFunctions: Record<
       0
     );
     const rest = generateSumStatistics(
-      id,
       dayEnd,
       end,
       period,
@@ -283,10 +253,9 @@ const statisticsFunctions: Record<
     );
     return [...morning, ...production, ...evening, ...rest];
   },
-  "sensor.solar_production": (id, start, end, period = "hour") => {
+  "sensor.solar_production": (_id, start, end, period = "hour") => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -298,7 +267,6 @@ const statisticsFunctions: Record<
     const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
     const production = generateCurvedStatistics(
-      id,
       productionStart,
       productionEnd,
       period,
@@ -309,16 +277,8 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
+    const morning = generateSumStatistics(start, productionStart, period, 0, 0);
     const evening = generateSumStatistics(
-      id,
       productionEnd,
       dayEnd,
       period,
@@ -326,7 +286,6 @@ const statisticsFunctions: Record<
       0
     );
     const rest = generateSumStatistics(
-      id,
       dayEnd,
       end,
       period,
@@ -362,7 +321,6 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
           statistics[id] =
             entityState && "last_reset" in entityState.attributes
               ? generateSumStatistics(
-                  id,
                   start,
                   end,
                   period,
@@ -370,7 +328,6 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                   state * (state > 80 ? 0.01 : 0.05)
                 )
               : generateMeanStatistics(
-                  id,
                   start,
                   end,
                   period,

gallery/src/pages/brand/logo.markdown

@@ -2,8 +2,6 @@
 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/ha-bar-slider.markdown

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

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

@@ -0,0 +1,169 @@
+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" | "cursor";
+  class?: string;
+}[] = [
+  {
+    id: "slider-start",
+    label: "Slider (start mode)",
+    mode: "start",
+  },
+  {
+    id: "slider-end",
+    label: "Slider (end mode)",
+    mode: "end",
+  },
+  {
+    id: "slider-cursor",
+    label: "Slider (cursor mode)",
+    mode: "cursor",
+  },
+  {
+    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-cursor-custom",
+    label: "Slider (cursor mode) and custom style",
+    mode: "cursor",
+    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-bar-switch.markdown

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

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

@@ -0,0 +1,145 @@
+import {
+  mdiGarage,
+  mdiGarageOpen,
+  mdiLightbulb,
+  mdiLightbulbOff,
+} from "@mdi/js";
+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-switch";
+import "../../../../src/components/ha-card";
+
+const switches: {
+  id: string;
+  label: string;
+  class?: string;
+  reversed?: boolean;
+  disabled?: boolean;
+}[] = [
+  {
+    id: "switch",
+    label: "Switch",
+  },
+  {
+    id: "switch-reversed",
+    label: "Switch Reversed",
+    reversed: true,
+  },
+  {
+    id: "switch-custom",
+    label: "Switch and custom style",
+    class: "custom",
+  },
+  {
+    id: "switch-disabled",
+    label: "Disabled Switch",
+    disabled: true,
+  },
+];
+
+@customElement("demo-components-ha-bar-switch")
+export class DemoHaBarSwitch extends LitElement {
+  @state() private checked = false;
+
+  handleValueChanged(e: any) {
+    this.checked = e.target.checked as boolean;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${repeat(switches, (sw) => {
+        const { id, label, ...config } = sw;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <pre>Config: ${JSON.stringify(config)}</pre>
+              <ha-bar-switch
+                .checked=${this.checked}
+                class=${ifDefined(config.class)}
+                @change=${this.handleValueChanged}
+                .pathOn=${mdiLightbulb}
+                .pathOff=${mdiLightbulbOff}
+                aria-labelledby=${id}
+                disabled=${ifDefined(config.disabled)}
+                reversed=${ifDefined(config.reversed)}
+              >
+              </ha-bar-switch>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Vertical</b></p>
+          <div class="vertical-switches">
+            ${repeat(switches, (sw) => {
+              const { id, label, ...config } = sw;
+              return html`
+                <ha-bar-switch
+                  .checked=${this.checked}
+                  vertical
+                  class=${ifDefined(config.class)}
+                  @change=${this.handleValueChanged}
+                  aria-label=${label}
+                  .pathOn=${mdiGarageOpen}
+                  .pathOff=${mdiGarage}
+                  disabled=${ifDefined(config.disabled)}
+                  reversed=${ifDefined(config.reversed)}
+                >
+                </ha-bar-switch>
+              `;
+            })}
+          </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 {
+        --switch-bar-color-on: var(--rgb-green-color);
+        --switch-bar-color-off: var(--rgb-red-color);
+        --switch-bar-thickness: 100px;
+        --switch-bar-border-radius: 24px;
+        --switch-bar-padding: 6px;
+        --mdc-icon-size: 24px;
+      }
+      .vertical-switches {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-switches > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-bar-switch": DemoHaBarSwitch;
+  }
+}

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

@@ -1,3 +1,3 @@
 ---
-title: Chips
+title: Chip
 ---

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

@@ -1,11 +1,11 @@
 ---
-title: Dialogs
+title: Dialog
 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). 
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview). 
 
 # Highlighted guidelines
 

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

@@ -0,0 +1,61 @@
+---
+title: Gauge
+---
+
+<style>
+  ha-gauge {
+    display: block;
+    width: 200px;
+    margin-top: 15px;
+    margin-bottom: 50px;
+  }
+</style>
+
+# Gauge `<ha-gauge>`
+
+A gauge that can be used to represent sensor data and provide visual feedback about the value and the corresponding severity (success, warning, error).
+
+## Examples
+
+Info color gauge
+<ha-gauge value="75" style="--gauge-color: var(--info-color)"></ha-gauge>
+
+Success color gauge
+<ha-gauge value="25" style="--gauge-color: var(--success-color)" label="°C"></ha-gauge>
+
+Warning color gauge
+<ha-gauge value="50" style="--gauge-color: var(--warning-color)" label="°C"></ha-gauge>
+
+Error color gauge
+<ha-gauge value="75" style="--gauge-color: var(--error-color)" label="°C"></ha-gauge>
+
+Gauge with background color
+<ha-gauge value="75" style="--gauge-color: var(--info-color); --primary-background-color: lightgray"></ha-gauge>
+
+
+## CSS variables
+
+### Gauge
+
+`primary-background-color`  
+Background color of the dial (rounded arch)
+
+`primary-text-color`  
+Text color below dial (value and unit of measurement) plus needle color (if gauge is in needle mode)
+
+#### Dial colors
+
+`gauge-color`  
+Used in the coding to control what color the gauge value is rendered with, but cannot be set via theme since its value will dynamically be set (either to `info-color` or to the matching severity variable if the severity color mode is used). To control the used colors, adjust the following variables.
+
+`success-color`  
+Dial color for the "green" severity level
+
+`warning-color`  
+Dial color for the "yellow" severity level
+
+`error-color`  
+Dial color for the "red" severity level
+
+`info-color`  
+Static dial color if not in severity color mode

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

@@ -0,0 +1 @@
+import "../../../../src/components/ha-gauge";

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

@@ -0,0 +1,39 @@
+---
+title: Switch / Toggle
+---
+
+<style>
+  ha-switch {
+    display: block;
+  }
+</style>
+
+# Switch `<ha-switch>`
+
+A toggle switch can represent two states: on and off.
+
+## Examples
+
+Switch in on state
+<ha-switch checked></ha-switch>
+
+Switch in off state
+<ha-switch></ha-switch>
+
+Disabled switch
+<ha-switch disabled></ha-switch>
+
+## CSS variables
+
+For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
+
+The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
+
+`switch-checked-color` / `switch-unchecked-color`  
+Set both the color of the round handle  and the track behind it. If you want to control them separately, use the variables below instead.
+
+`switch-checked-button-color` / `switch-unchecked-button-color`  
+Color of the round handle
+
+`switch-checked-track-color` / `switch-unchecked-track-color`  
+Color of the track behind the round handle

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

@@ -0,0 +1 @@
+import "../../../../src/components/ha-switch";

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

@@ -1,3 +1,3 @@
 ---
-title: Tips
+title: Tip
 ---

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

@@ -98,6 +98,9 @@ const ENTITIES = [
     minimum: 0,
     maximum: 10,
   }),
+  getEntity("text", "message", "Hello!", {
+    friendly_name: "Message",
+  }),
 
   getEntity("light", "unavailable", "unavailable", {
     friendly_name: "Bed Light",
@@ -129,6 +132,9 @@ const ENTITIES = [
     friendly_name: "Who cooks",
     icon: "mdi:cheff",
   }),
+  getEntity("text", "unavailable", "unavailable", {
+    friendly_name: "Message",
+  }),
 ];
 
 const CONFIGS = [
@@ -147,6 +153,7 @@ const CONFIGS = [
     - climate.ecobee
     - input_number.number
     - sensor.humidity
+    - text.message
     `,
   },
   {
@@ -219,6 +226,7 @@ const CONFIGS = [
     - climate.unavailable
     - input_number.unavailable
     - input_select.unavailable
+    - text.unavailable
     `,
   },
   {

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

@@ -23,13 +23,12 @@ const CONFIGS = [
     heading: "Basic example",
     config: `
 - type: gauge
-  title: Humidity
   entity: sensor.outside_humidity
   name: Outside Humidity
     `,
   },
   {
-    heading: "Custom Unit of Measurement",
+    heading: "Custom unit of measurement",
     config: `
 - type: gauge
   entity: sensor.outside_temperature
@@ -38,7 +37,16 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Rendering needle",
+    config: `
+- type: gauge
+  entity: sensor.outside_humidity
+  name: Outside Humidity
+  needle: true
+    `,
+  },
+  {
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness
@@ -50,7 +58,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness_medium
@@ -62,7 +70,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness_high
@@ -74,7 +82,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Min (0) and Max (15) Values",
+    heading: "Setting min (0) and mx (15) values",
     config: `
 - type: gauge
   entity: sensor.brightness
@@ -84,14 +92,14 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Invalid Entity",
+    heading: "Invalid entity",
     config: `
 - type: gauge
   entity: sensor.invalid_entity
     `,
   },
   {
-    heading: "Non-Numeric Value",
+    heading: "Non-numeric value",
     config: `
 - type: gauge
   entity: plant.bonsai

gallery/src/pages/misc/entity-state.markdown

@@ -0,0 +1,3 @@
+---
+title: Entity State
+---

gallery/src/pages/misc/entity-state.ts

@@ -0,0 +1,377 @@
+import {
+  HassEntity,
+  HassEntityAttributeBase,
+} from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
+import { computeDomain } from "../../../../src/common/entity/compute_domain";
+import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display";
+import { stateColorCss } from "../../../../src/common/entity/state_color";
+import { stateIconPath } from "../../../../src/common/entity/state_icon_path";
+import "../../../../src/components/data-table/ha-data-table";
+import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
+import "../../../../src/components/ha-chip";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+
+const SENSOR_DEVICE_CLASSES = [
+  "apparent_power",
+  "aqi",
+  // "battery"
+  "carbon_dioxide",
+  "carbon_monoxide",
+  "current",
+  "date",
+  "distance",
+  "duration",
+  "energy",
+  "frequency",
+  "gas",
+  "humidity",
+  "illuminance",
+  "moisture",
+  "monetary",
+  "nitrogen_dioxide",
+  "nitrogen_monoxide",
+  "nitrous_oxide",
+  "ozone",
+  "pm1",
+  "pm10",
+  "pm25",
+  "power_factor",
+  "power",
+  "precipitation",
+  "precipitation_intensity",
+  "pressure",
+  "reactive_power",
+  "signal_strength",
+  "speed",
+  "sulphur_dioxide",
+  "temperature",
+  "timestamp",
+  "volatile_organic_compounds",
+  "voltage",
+  "volume",
+  "water",
+  "weight",
+  "wind_speed",
+];
+
+const BINARY_SENSOR_DEVICE_CLASSES = [
+  "battery",
+  "battery_charging",
+  "carbon_monoxide",
+  "cold",
+  "connectivity",
+  "door",
+  "garage_door",
+  "gas",
+  "heat",
+  "light",
+  "lock",
+  "moisture",
+  "motion",
+  "moving",
+  "occupancy",
+  "opening",
+  "plug",
+  "power",
+  "presence",
+  "problem",
+  "running",
+  "safety",
+  "smoke",
+  "sound",
+  "tamper",
+  "update",
+  "vibration",
+  "window",
+];
+
+const ENTITIES: HassEntity[] = [
+  // Alarm control panel
+  createEntity("alarm_control_panel.disarmed", "disarmed"),
+  createEntity("alarm_control_panel.armed_home", "armed_home"),
+  createEntity("alarm_control_panel.armed_away", "armed_away"),
+  createEntity("alarm_control_panel.armed_night", "armed_night"),
+  createEntity("alarm_control_panel.armed_vacation", "armed_vacation"),
+  createEntity(
+    "alarm_control_panel.armed_custom_bypass",
+    "armed_custom_bypass"
+  ),
+  createEntity("alarm_control_panel.pending", "pending"),
+  createEntity("alarm_control_panel.arming", "arming"),
+  createEntity("alarm_control_panel.disarming", "disarming"),
+  createEntity("alarm_control_panel.triggered", "triggered"),
+  // Binary Sensor
+  ...BINARY_SENSOR_DEVICE_CLASSES.map((dc) =>
+    createEntity(`binary_sensor.${dc}`, "on", dc)
+  ),
+  // Button
+  createEntity("button.restart", "unknown", "restart"),
+  createEntity("button.update", "unknown", "update"),
+  // Calendar
+  createEntity("calendar.on", "on"),
+  createEntity("calendar.off", "off"),
+  // Climate
+  createEntity("climate.off", "off"),
+  createEntity("climate.heat", "heat"),
+  createEntity("climate.cool", "cool"),
+  createEntity("climate.heat_cool", "heat_cool"),
+  createEntity("climate.auto", "auto"),
+  createEntity("climate.dry", "dry"),
+  createEntity("climate.fan_only", "fan_only"),
+  // Cover
+  createEntity("cover.opening", "opening"),
+  createEntity("cover.open", "open"),
+  createEntity("cover.closing", "closing"),
+  createEntity("cover.closed", "closed"),
+  createEntity("cover.awning", "open", "awning"),
+  createEntity("cover.blind", "open", "blind"),
+  createEntity("cover.curtain", "open", "curtain"),
+  createEntity("cover.damper", "open", "damper"),
+  createEntity("cover.door", "open", "door"),
+  createEntity("cover.garage", "open", "garage"),
+  createEntity("cover.gate", "open", "gate"),
+  createEntity("cover.shade", "open", "shade"),
+  createEntity("cover.shutter", "open", "shutter"),
+  createEntity("cover.window", "open", "window"),
+  // Device tracker/person
+  createEntity("device_tracker.home", "home"),
+  createEntity("device_tracker.not_home", "not_home"),
+  createEntity("device_tracker.work", "work"),
+  createEntity("person.home", "home"),
+  createEntity("person.not_home", "not_home"),
+  createEntity("person.work", "work"),
+  // Fan
+  createEntity("fan.on", "on"),
+  createEntity("fan.off", "off"),
+  // Humidifier
+  createEntity("humidifier.on", "on"),
+  createEntity("humidifier.off", "off"),
+  // Light
+  createEntity("light.on", "on"),
+  createEntity("light.off", "off"),
+  // Locks
+  createEntity("lock.locked", "locked"),
+  createEntity("lock.unlocked", "unlocked"),
+  createEntity("lock.locking", "locking"),
+  createEntity("lock.unlocking", "unlocking"),
+  createEntity("lock.jammed", "jammed"),
+  // Media Player
+  createEntity("media_player.off", "off"),
+  createEntity("media_player.on", "on"),
+  createEntity("media_player.idle", "idle"),
+  createEntity("media_player.playing", "playing"),
+  createEntity("media_player.paused", "paused"),
+  createEntity("media_player.standby", "standby"),
+  createEntity("media_player.buffering", "buffering"),
+  createEntity("media_player.tv_off", "off", "tv"),
+  createEntity("media_player.tv_playing", "playing", "tv"),
+  createEntity("media_player.tv_paused", "paused", "tv"),
+  createEntity("media_player.tv_standby", "standby", "tv"),
+  createEntity("media_player.receiver_off", "off", "receiver"),
+  createEntity("media_player.receiver_playing", "playing", "receiver"),
+  createEntity("media_player.receiver_paused", "paused", "receiver"),
+  createEntity("media_player.receiver_standby", "standby", "receiver"),
+  createEntity("media_player.speaker_off", "off", "speaker"),
+  createEntity("media_player.speaker_playing", "playing", "speaker"),
+  createEntity("media_player.speaker_paused", "paused", "speaker"),
+  createEntity("media_player.speaker_standby", "standby", "speaker"),
+  // Sensor
+  ...SENSOR_DEVICE_CLASSES.map((dc) => createEntity(`sensor.${dc}`, "10", dc)),
+  // Battery sensor
+  ...[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((value) =>
+    createEntity(`sensor.battery_${value}`, value.toString(), "battery")
+  ),
+  // Siren
+  createEntity("siren.off", "off"),
+  createEntity("siren.on", "on"),
+  // Switch
+  createEntity("switch.off", "off"),
+  createEntity("switch.on", "on"),
+  createEntity("switch.outlet_off", "off", "outlet"),
+  createEntity("switch.outlet_on", "on", "outlet"),
+  createEntity("switch.switch_off", "off", "switch"),
+  createEntity("switch.switch_on", "on", "switch"),
+  // Vacuum
+  createEntity("vacuum.cleaning", "cleaning"),
+  createEntity("vacuum.docked", "docked"),
+  createEntity("vacuum.paused", "paused"),
+  createEntity("vacuum.idle", "idle"),
+  createEntity("vacuum.returning", "returning"),
+  createEntity("vacuum.error", "error"),
+  createEntity("vacuum.cleaning", "cleaning"),
+  createEntity("vacuum.off", "off"),
+  createEntity("vacuum.on", "on"),
+  // Update
+  createEntity("update.off", "off", undefined, {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+  createEntity("update.on", "on", undefined, {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+  createEntity("update.installing", "on", undefined, {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+    in_progress: true,
+  }),
+  createEntity("update.off", "off", "firmware", {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+  createEntity("update.on", "on", "firmware", {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+];
+
+function createEntity(
+  entity_id: string,
+  state: string,
+  device_class?: string,
+  attributes?: HassEntityAttributeBase | HassEntity["attributes"]
+): HassEntity {
+  return {
+    entity_id,
+    state,
+    attributes: {
+      ...attributes,
+      device_class: device_class,
+    },
+    last_changed: new Date().toString(),
+    last_updated: new Date().toString(),
+    context: {
+      id: "1",
+      parent_id: null,
+      user_id: null,
+    },
+  };
+}
+
+type EntityRowData = {
+  stateObj: HassEntity;
+  entity_id: string;
+  state: string;
+  device_class?: string;
+  domain: string;
+};
+
+function createRowData(stateObj: HassEntity): EntityRowData {
+  return {
+    stateObj,
+    entity_id: stateObj.entity_id,
+    state: stateObj.state,
+    device_class: stateObj.attributes.device_class,
+    domain: computeDomain(stateObj.entity_id),
+  };
+}
+
+@customElement("demo-misc-entity-state")
+export class DemoEntityState extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  private _columns = memoizeOne(
+    (hass: HomeAssistant): DataTableColumnContainer => {
+      const columns: DataTableColumnContainer<EntityRowData> = {
+        icon: {
+          title: "Icon",
+          template: (_, entry) => {
+            const cssColor = stateColorCss(entry.stateObj);
+            return html`
+              <ha-svg-icon
+                style=${styleMap({
+                  color: `rgb(${cssColor})`,
+                })}
+                .path=${stateIconPath(entry.stateObj)}
+              >
+              </ha-svg-icon>
+            `;
+          },
+        },
+        entity_id: {
+          title: "Entity id",
+          width: "30%",
+          filterable: true,
+          sortable: true,
+        },
+        state: {
+          title: "State",
+          width: "20%",
+          sortable: true,
+          template: (_, entry) =>
+            html`${computeStateDisplay(
+              hass.localize,
+              entry.stateObj,
+              hass.locale,
+              hass.entities
+            )}`,
+        },
+        device_class: {
+          title: "Device class",
+          template: (dc) => html`${dc ?? "-"}`,
+          width: "20%",
+          filterable: true,
+          sortable: true,
+        },
+        domain: {
+          title: "Domain",
+          template: (_, entry) => html`${computeDomain(entry.entity_id)}`,
+          width: "20%",
+          filterable: true,
+          sortable: true,
+        },
+      };
+
+      return columns;
+    }
+  );
+
+  private _rows = memoizeOne((): EntityRowData[] =>
+    ENTITIES.map(createRowData)
+  );
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <ha-data-table
+        .hass=${this.hass}
+        .columns=${this._columns(this.hass)}
+        .data=${this._rows()}
+        auto-height
+      ></ha-data-table>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .color {
+        display: block;
+        height: 20px;
+        width: 20px;
+        border-radius: 10px;
+        background-color: rgb(--color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-entity-state": DemoEntityState;
+  }
+}

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

@@ -283,7 +283,7 @@ export class DemoIntegrationCard extends LitElement {
               .deviceRegistryEntries=${createDeviceRegistryEntries(
                 info.items[0]
               )}
-              ?disabled=${info.disabled}
+              ?entryDisabled=${info.disabled}
               .selectedConfigEntryId=${info.highlight}
             ></ha-integration-card>
           `

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

@@ -139,6 +139,13 @@ 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

@@ -118,7 +118,7 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}?store=true`);
   }
 
   static get styles(): CSSResultGroup {

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

@@ -53,7 +53,13 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() _error?: string;
+  @state() private _error?: string;
+
+  private _backPath = new URLSearchParams(window.parent.location.search).get(
+    "store"
+  )
+    ? "/hassio/store"
+    : "/hassio/dashboard";
 
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
@@ -119,6 +125,7 @@ class HassioAddonDashboard extends LitElement {
         .narrow=${this.narrow}
         .route=${route}
         .tabs=${addonTabs}
+        .backPath=${this._backPath}
         supervisor
       >
         <span slot="header">${this.addon.name}</span>

hassio/src/dashboard/hassio-dashboard.ts

@@ -28,6 +28,7 @@ class HassioDashboard extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        back-path="/config"
         .header=${this.supervisor.localize("panel.addons")}
       >
         <hassio-addons

lint-staged.config.js

@@ -1,11 +1,8 @@
 module.exports = {
-  "*.{js,ts}": [
-    "prettier --write",
-    'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
-  ],
+  "*.{js,ts}": ["prettier --write", "eslint --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." ' +
+    'printf "%s\n" "Translation files should not be added or modified here. Instead, make the necessary modifications in src/translations/en.json. Other languages are managed externally. Please see https://developers.home-assistant.io/docs/translations/ for details." ' +
     files.join(" ") +
     " >&2 && exit 1",
 };

package.json

@@ -24,7 +24,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.2",
+    "@braintree/sanitize-url": "^6.0.0",
     "@codemirror/autocomplete": "^0.19.12",
     "@codemirror/commands": "^0.19.8",
     "@codemirror/gutter": "^0.19.9",
@@ -43,7 +43,6 @@
     "@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",
@@ -93,8 +92,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.2.9",
+    "@vaadin/vaadin-themable-mixin": "^23.2.9",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -111,8 +110,9 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.3",
-    "home-assistant-js-websocket": "^8.0.0",
+    "hammerjs": "^2.0.8",
+    "hls.js": "^1.2.5",
+    "home-assistant-js-websocket": "^8.0.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
@@ -129,6 +129,7 @@
     "regenerator-runtime": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
+    "rrule": "^2.7.1",
     "sortablejs": "^1.14.0",
     "superstruct": "^0.15.2",
     "tinykeys": "^1.1.3",
@@ -138,6 +139,7 @@
     "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",
@@ -147,19 +149,21 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-external-helpers": "^7.14.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.15.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-external-helpers": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.20.2",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-typescript": "^7.15.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
     "@koa/cors": "^3.1.0",
+    "@octokit/auth-oauth-device": "^4.0.2",
+    "@octokit/rest": "^19.0.4",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -169,6 +173,7 @@
     "@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",
@@ -176,12 +181,13 @@
     "@types/mocha": "^8",
     "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
+    "@types/tar": "^6",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.0",
     "chai": "^4.3.4",
     "del": "^4.0.0",
     "eslint": "^7.32.0",
@@ -207,6 +213,7 @@
     "html-minifier": "^4.0.0",
     "husky": "^8.0.1",
     "instant-mocha": "^1.3.1",
+    "jszip": "^3.10.1",
     "lint-staged": "^13.0.3",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
@@ -227,9 +234,10 @@
     "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
+    "tar": "^6.1.11",
     "terser-webpack-plugin": "^5.2.4",
     "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.4.3",
+    "typescript": "^4.9.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "^5.55.1",
@@ -253,5 +261,5 @@
     "trailingComma": "es5",
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.3"
 }

pyproject.toml

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

script/bootstrap

@@ -7,4 +7,4 @@ set -e
 cd "$(dirname "$0")/.."
 
 # Install node modules
-yarn install
+yarn install

script/setup_translations

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Setup translation fetching during development
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+./node_modules/.bin/gulp setup-and-fetch-nightly-translations

script/translations_download

@@ -20,24 +20,28 @@ fi
 # Load token from file if not already in the environment
 [ -z "${LOKALISE_TOKEN-}" ] && LOKALISE_TOKEN="$(<.lokalise_token)"
 
-PROJECT_ID="3420425759f6d6d241f598.13594006"
-LOCAL_DIR="$(pwd)/translations/downloads"
-FILE_FORMAT=json
+declare -A PROJECT_ID=( \
+    [frontend]="3420425759f6d6d241f598.13594006" \
+    [backend]="130246255a974bd3b5e8a1.51616605" \
+    )
 
-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
+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
 
 ./node_modules/.bin/gulp check-downloaded-translations

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 } from "../data/auth";
+import { AuthProvider, autocompleteLoginFields } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -204,7 +204,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             : html``}
           <ha-form
             .data=${this._stepData}
-            .schema=${step.data_schema}
+            .schema=${autocompleteLoginFields(step.data_schema)}
             .error=${step.errors}
             .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}

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

@@ -3,6 +3,7 @@ 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 {
@@ -69,7 +70,9 @@ export class HaPasswordManagerPolyfill extends LitElement {
           aria-hidden="true"
           @submit=${this._handleSubmit}
         >
-          ${this.step.data_schema.map((input) => this.render_input(input))}
+          ${autocompleteLoginFields(this.step.data_schema).map((input) =>
+            this.render_input(input)
+          )}
           <input type="submit" />
           <style>
             ${this.styles}
@@ -89,8 +92,10 @@ 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/array/literal-includes.ts

@@ -0,0 +1,5 @@
+// Creates a type predicate function for determining if an array literal includes a given value
+export const arrayLiteralIncludes =
+  <T extends readonly unknown[]>(array: T) =>
+  (searchElement: unknown, fromIndex?: number): searchElement is T[number] =>
+    array.includes(searchElement as T[number], fromIndex);

src/common/color/compute-color.ts

@@ -0,0 +1,42 @@
+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

@@ -13,6 +13,7 @@ import {
   mdiBullhorn,
   mdiCalendar,
   mdiCalendarClock,
+  mdiCarCoolantLevel,
   mdiCash,
   mdiClock,
   mdiCloudUpload,
@@ -55,8 +56,12 @@ import {
   mdiThermostat,
   mdiTimerOutline,
   mdiVideo,
+  mdiWater,
   mdiWaterPercent,
   mdiWeatherCloudy,
+  mdiWeatherPouring,
+  mdiWeatherRainy,
+  mdiWeatherWindy,
   mdiWeight,
   mdiWhiteBalanceSunny,
   mdiWifi,
@@ -109,6 +114,7 @@ export const FIXED_DOMAIN_ICONS = {
   siren: mdiBullhorn,
   simple_alarm: mdiBell,
   sun: mdiWhiteBalanceSunny,
+  text: mdiFormTextbox,
   timer: mdiTimerOutline,
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
@@ -143,6 +149,8 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   pm25: mdiMolecule,
   power: mdiFlash,
   power_factor: mdiAngleAcute,
+  precipitation: mdiWeatherRainy,
+  precipitation_intensity: mdiWeatherPouring,
   pressure: mdiGauge,
   reactive_power: mdiFlash,
   signal_strength: mdiWifi,
@@ -152,8 +160,10 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   timestamp: mdiClock,
   volatile_organic_compounds: mdiMolecule,
   voltage: mdiSineWave,
-  // volume: TBD, => no well matching icon found
+  volume: mdiCarCoolantLevel,
+  water: mdiWater,
   weight: mdiWeight,
+  wind_speed: mdiWeatherWindy,
 };
 
 /** Domains that have a state card. */
@@ -173,6 +183,7 @@ export const DOMAINS_WITH_CARD = [
   "script",
   "select",
   "timer",
+  "text",
   "vacuum",
   "water_heater",
 ];
@@ -205,6 +216,7 @@ export const DOMAINS_INPUT_ROW = [
   "script",
   "select",
   "switch",
+  "text",
   "vacuum",
 ];
 

src/common/datetime/first_weekday.ts

@@ -0,0 +1,33 @@
+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.ts

@@ -7,10 +7,12 @@ if (__BUILD__ === "latest" && polyfillsLoaded) {
 }
 
 // Tuesday, August 10
-export const formatDateWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
-  formatDateWeekdayMem(locale).format(dateObj);
+export const formatDateWeekdayDay = (
+  dateObj: Date,
+  locale: FrontendLocaleData
+) => formatDateWeekdayDayMem(locale).format(dateObj);
 
-const formatDateWeekdayMem = memoizeOne(
+const formatDateWeekdayDayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       weekday: "long",
@@ -92,3 +94,14 @@ const formatDateYearMem = memoizeOne(
       year: "numeric",
     })
 );
+
+// Monday
+export const formatDateWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateWeekdayMem(locale).format(dateObj);
+
+const formatDateWeekdayMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
+    })
+);

src/common/datetime/format_duration.ts

@@ -10,7 +10,7 @@ export const formatDuration = (duration: HaDurationData) => {
   const ms = duration.milliseconds || 0;
 
   if (d > 0) {
-    return `${d} days ${h}:${leftPad(m)}:${leftPad(s)}`;
+    return `${d} day${d === 1 ? "" : "s"} ${h}:${leftPad(m)}:${leftPad(s)}`;
   }
   if (h > 0) {
     return `${h}:${leftPad(m)}:${leftPad(s)}`;
@@ -19,10 +19,10 @@ export const formatDuration = (duration: HaDurationData) => {
     return `${m}:${leftPad(s)}`;
   }
   if (s > 0) {
-    return `${s} seconds`;
+    return `${s} second${s === 1 ? "" : "s"}`;
   }
   if (ms > 0) {
-    return `${ms} milliseconds`;
+    return `${ms} millisecond${ms === 1 ? "" : "s"}`;
   }
   return null;
 };

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;
@@ -9,7 +9,6 @@ if (__BUILD__ === "latest" && polyfillsLoaded) {
 
 const formatRelTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    // @ts-expect-error
     new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
 );
 
@@ -25,7 +24,6 @@ export const relativeTime = (
   }
   return Intl.NumberFormat(locale.language, {
     style: "unit",
-    // @ts-expect-error
     unit: diff.unit,
     unitDisplay: "long",
   }).format(Math.abs(diff.value));

src/common/entity/color/alarm_control_panel_color.ts

@@ -0,0 +1,19 @@
+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 "arming":
+    case "disarming":
+      return "alarm-arming";
+    case "triggered":
+      return "alarm-triggered";
+    default:
+      return undefined;
+  }
+};

src/common/entity/color/battery_color.ts

@@ -0,0 +1,15 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const batteryStateColor = (stateObj: HassEntity) => {
+  const value = Number(stateObj.state);
+  if (isNaN(value)) {
+    return "sensor-battery-unknown";
+  }
+  if (value >= 70) {
+    return "sensor-battery-high";
+  }
+  if (value >= 30) {
+    return "sensor-battery-medium";
+  }
+  return "sensor-battery-low";
+};

src/common/entity/color/binary_sensor_color.ts

@@ -0,0 +1,21 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+const ALERTING_DEVICE_CLASSES = new Set([
+  "battery",
+  "carbon_monoxide",
+  "gas",
+  "heat",
+  "moisture",
+  "problem",
+  "safety",
+  "smoke",
+  "tamper",
+]);
+
+export const binarySensorColor = (stateObj: HassEntity): string | undefined => {
+  const deviceClass = stateObj?.attributes.device_class;
+
+  return deviceClass && ALERTING_DEVICE_CLASSES.has(deviceClass)
+    ? "binary-sensor-alerting"
+    : "binary-sensor";
+};

src/common/entity/color/climate_color.ts

@@ -0,0 +1,18 @@
+export const climateColor = (state: string): string | undefined => {
+  switch (state) {
+    case "auto":
+      return "climate-auto";
+    case "cool":
+      return "climate-cool";
+    case "dry":
+      return "climate-dry";
+    case "fan_only":
+      return "climate-fan-only";
+    case "heat":
+      return "climate-heat";
+    case "heat_cool":
+      return "climate-heat-cool";
+    default:
+      return undefined;
+  }
+};

src/common/entity/color/lock_color.ts

@@ -0,0 +1,13 @@
+export const lockColor = (state?: string): string | undefined => {
+  switch (state) {
+    case "locked":
+      return "lock-locked";
+    case "jammed":
+      return "lock-jammed";
+    case "locking":
+    case "unlocking":
+      return "lock-pending";
+    default:
+      return undefined;
+  }
+};

src/common/entity/color/sensor_color.ts

@@ -0,0 +1,12 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { batteryStateColor } from "./battery_color";
+
+export const sensorColor = (stateObj: HassEntity): string | undefined => {
+  const deviceClass = stateObj?.attributes.device_class;
+
+  if (deviceClass === "battery") {
+    return batteryStateColor(stateObj);
+  }
+
+  return undefined;
+};

src/common/entity/compute_active_state.ts

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

src/common/entity/compute_state_display.ts

@@ -1,15 +1,21 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
+import { EntityRegistryEntry } from "../../data/entity_registry";
 import { FrontendLocaleData } from "../../data/translation";
 import {
   updateIsInstallingFromAttributes,
   UPDATE_SUPPORT_PROGRESS,
 } from "../../data/update";
+import { HomeAssistant } from "../../types";
 import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import {
+  formatNumber,
+  getNumberFormatOptions,
+  isNumericFromAttributes,
+} from "../number/format_number";
 import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
@@ -19,11 +25,13 @@ export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
+  entities: HomeAssistant["entities"],
   state?: string
 ): string =>
   computeStateDisplayFromEntityAttributes(
     localize,
     locale,
+    entities,
     stateObj.entity_id,
     stateObj.attributes,
     state !== undefined ? state : stateObj.state
@@ -32,6 +40,7 @@ export const computeStateDisplay = (
 export const computeStateDisplayFromEntityAttributes = (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
+  entities: HomeAssistant["entities"],
   entityId: string,
   attributes: any,
   state: string
@@ -70,7 +79,11 @@ export const computeStateDisplayFromEntityAttributes = (
       : attributes.unit_of_measurement === "%"
       ? blankBeforePercent(locale) + "%"
       : ` ${attributes.unit_of_measurement}`;
-    return `${formatNumber(state, locale)}${unit}`;
+    return `${formatNumber(
+      state,
+      locale,
+      getNumberFormatOptions({ state, attributes } as HassEntity)
+    )}${unit}`;
   }
 
   const domain = computeDomain(entityId);
@@ -143,7 +156,12 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "number" ||
     domain === "input_number"
   ) {
-    return formatNumber(state, locale);
+    // Format as an integer if the value and step are integers
+    return formatNumber(
+      state,
+      locale,
+      getNumberFormatOptions({ state, attributes } as HassEntity)
+    );
   }
 
   // state of button is a timestamp
@@ -169,7 +187,8 @@ export const computeStateDisplayFromEntityAttributes = (
     // When update is not available and there is no latest_version show "Unavailable"
     return state === "on"
       ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
+        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS) &&
+          typeof attributes.in_progress === "number"
           ? localize("ui.card.update.installing_with_progress", {
               progress: attributes.in_progress,
             })
@@ -180,7 +199,13 @@ export const computeStateDisplayFromEntityAttributes = (
       : localize("ui.card.update.up_to_date");
   }
 
+  const entity = entities[entityId] as EntityRegistryEntry | undefined;
+
   return (
+    (entity?.translation_key &&
+      localize(
+        `component.${entity.platform}.entity.${domain}.${entity.translation_key}.state.${state}`
+      )) ||
     // Return device class translation
     (attributes.device_class &&
       localize(

src/common/entity/cover_icon.ts

@@ -12,8 +12,10 @@ import {
   mdiCircle,
   mdiWindowShutter,
   mdiWindowShutterOpen,
-  mdiBlinds,
-  mdiBlindsOpen,
+  mdiBlindsHorizontal,
+  mdiBlindsHorizontalClosed,
+  mdiRollerShade,
+  mdiRollerShadeClosed,
   mdiWindowClosed,
   mdiWindowOpen,
   mdiArrowExpandHorizontal,
@@ -79,6 +81,16 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
           return mdiCurtains;
       }
     case "blind":
+      switch (state) {
+        case "opening":
+          return mdiArrowUpBox;
+        case "closing":
+          return mdiArrowDownBox;
+        case "closed":
+          return mdiBlindsHorizontalClosed;
+        default:
+          return mdiBlindsHorizontal;
+      }
     case "shade":
       switch (state) {
         case "opening":
@@ -86,9 +98,9 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
         case "closing":
           return mdiArrowDownBox;
         case "closed":
-          return mdiBlinds;
+          return mdiRollerShadeClosed;
         default:
-          return mdiBlindsOpen;
+          return mdiRollerShade;
       }
     case "window":
       switch (state) {

src/common/entity/domain_icon.ts

@@ -25,6 +25,8 @@ import {
   mdiPackageUp,
   mdiPowerPlug,
   mdiPowerPlugOff,
+  mdiAudioVideo,
+  mdiAudioVideoOff,
   mdiRestart,
   mdiSpeaker,
   mdiSpeakerOff,
@@ -159,6 +161,13 @@ export const domainIconWithoutDefault = (
             default:
               return mdiTelevision;
           }
+        case "receiver":
+          switch (compareState) {
+            case "off":
+              return mdiAudioVideoOff;
+            default:
+              return mdiAudioVideo;
+          }
         default:
           switch (compareState) {
             case "playing":

src/common/entity/get_states.ts

@@ -261,6 +261,11 @@ export const getStates = (
         result.push(...state.attributes.activity_list);
       }
       break;
+    case "sensor":
+      if (!attribute && state.attributes.device_class === "enum") {
+        result.push(...state.attributes.options);
+      }
+      break;
     case "vacuum":
       if (attribute === "fan_speed") {
         result.push(...state.attributes.fan_speed_list);

src/common/entity/state_active.ts

@@ -0,0 +1,39 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { OFF_STATES, UNAVAILABLE } from "../../data/entity";
+import { computeDomain } from "./compute_domain";
+
+export function stateActive(stateObj: HassEntity, state?: string): boolean {
+  const domain = computeDomain(stateObj.entity_id);
+  const compareState = state !== undefined ? state : stateObj?.state;
+
+  if (["button", "input_button", "scene"].includes(domain)) {
+    return compareState !== UNAVAILABLE;
+  }
+
+  if (OFF_STATES.includes(compareState)) {
+    return false;
+  }
+
+  // Custom cases
+  switch (domain) {
+    case "cover":
+      return !["closed", "closing"].includes(compareState);
+    case "device_tracker":
+    case "person":
+      return compareState !== "not_home";
+    case "alarm_control_panel":
+      return compareState !== "disarmed";
+    case "lock":
+      return compareState !== "unlocked";
+    case "media_player":
+      return compareState !== "standby";
+    case "vacuum":
+      return !["idle", "docked", "paused"].includes(compareState);
+    case "plant":
+      return compareState === "problem";
+    case "group":
+      return ["on", "home", "open", "locked", "problem"].includes(compareState);
+    default:
+      return true;
+  }
+}

src/common/entity/state_color.ts

@@ -0,0 +1,80 @@
+/** Return an color representing a state. */
+import { HassEntity } from "home-assistant-js-websocket";
+import { UpdateEntity, updateIsInstalling } from "../../data/update";
+import { alarmControlPanelColor } from "./color/alarm_control_panel_color";
+import { binarySensorColor } from "./color/binary_sensor_color";
+import { climateColor } from "./color/climate_color";
+import { lockColor } from "./color/lock_color";
+import { sensorColor } from "./color/sensor_color";
+import { computeDomain } from "./compute_domain";
+import { stateActive } from "./state_active";
+
+export const stateColorCss = (stateObj?: HassEntity, state?: string) => {
+  if (!stateObj || !stateActive(stateObj, state)) {
+    return `var(--rgb-disabled-color)`;
+  }
+
+  const color = stateColor(stateObj, state);
+
+  if (color) {
+    return `var(--rgb-state-${color}-color)`;
+  }
+
+  return `var(--rgb-state-default-color)`;
+};
+
+export const stateColor = (stateObj: HassEntity, state?: string) => {
+  const compareState = state !== undefined ? state : stateObj?.state;
+  const domain = computeDomain(stateObj.entity_id);
+
+  switch (domain) {
+    case "alarm_control_panel":
+      return alarmControlPanelColor(compareState);
+
+    case "binary_sensor":
+      return binarySensorColor(stateObj);
+
+    case "cover":
+      return "cover";
+
+    case "climate":
+      return climateColor(compareState);
+
+    case "fan":
+      return "fan";
+
+    case "lock":
+      return lockColor(compareState);
+
+    case "light":
+      return "light";
+
+    case "humidifier":
+      return "humidifier";
+
+    case "media_player":
+      return "media-player";
+
+    case "sensor":
+      return sensorColor(stateObj);
+
+    case "vacuum":
+      return "vacuum";
+
+    case "siren":
+      return "siren";
+
+    case "sun":
+      return compareState === "above_horizon" ? "sun-day" : "sun-night";
+
+    case "switch":
+      return "switch";
+
+    case "update":
+      return updateIsInstalling(stateObj as UpdateEntity)
+        ? "update-installing"
+        : "update";
+  }
+
+  return undefined;
+};

src/common/integrations/protocolIntegrationPicked.ts

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { getConfigEntries } from "../../data/config_entries";
+import { domainToName } from "../../data/integration";
+import { getIntegrationDescriptions } from "../../data/integrations";
 import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
@@ -11,20 +13,38 @@ import { navigate } from "../navigate";
 export const protocolIntegrationPicked = async (
   element: HTMLElement,
   hass: HomeAssistant,
-  slug: string
+  domain: string,
+  options?: { brand?: string; domain?: string }
 ) => {
-  if (slug === "zwave_js") {
+  if (options?.domain) {
+    const localize = await hass.loadBackendTranslation("title", options.domain);
+    options.domain = domainToName(localize, options.domain);
+  }
+
+  if (options?.brand) {
+    const integrationDescriptions = await getIntegrationDescriptions(hass);
+    options.brand =
+      integrationDescriptions.core.integration[options.brand]?.name ||
+      options.brand;
+  }
+
+  if (domain === "zwave_js") {
     const entries = await getConfigEntries(hass, {
-      domain: "zwave_js",
+      domain,
     });
 
     if (!isComponentLoaded(hass, "zwave_js") || !entries.length) {
       // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Z-Wave" }
+        ),
         text: hass.localize(
           "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
           {
             integration: "Z-Wave",
+            brand: options?.brand || options?.domain || "Z-Wave",
             supported_hardware_link: html`<a
               href=${documentationUrl(hass, "/docs/z-wave/controllers")}
               target="_blank"
@@ -50,14 +70,23 @@ export const protocolIntegrationPicked = async (
     showZWaveJSAddNodeDialog(element, {
       entry_id: entries[0].entry_id,
     });
-  } else if (slug === "zha") {
-    // If the component isn't loaded, ask them to load the integration first
-    if (!isComponentLoaded(hass, "zha")) {
+  } else if (domain === "zha") {
+    const entries = await getConfigEntries(hass, {
+      domain,
+    });
+
+    if (!isComponentLoaded(hass, "zha") || !entries.length) {
+      // If the component isn't loaded, ask them to load the integration first
       showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Zigbee" }
+        ),
         text: hass.localize(
           "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
           {
             integration: "Zigbee",
+            brand: options?.brand || options?.domain || "Z-Wave",
             supported_hardware_link: html`<a
               href=${documentationUrl(
                 hass,

src/common/number/format_number.ts

@@ -1,4 +1,7 @@
-import { HassEntity } from "home-assistant-js-websocket";
+import {
+  HassEntity,
+  HassEntityAttributeBase,
+} from "home-assistant-js-websocket";
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 import { round } from "./round";
 
@@ -9,9 +12,9 @@ import { round } from "./round";
 export const isNumericState = (stateObj: HassEntity): boolean =>
   isNumericFromAttributes(stateObj.attributes);
 
-export const isNumericFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+export const isNumericFromAttributes = (
+  attributes: HassEntityAttributeBase
+): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData
@@ -34,7 +37,7 @@ export const numberFormatToLocale = (
  * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
  *
  * @param num The number to format
- * @param locale The user-selected language and number format, from `hass.locale`
+ * @param localeOptions The user-selected language and formatting, from `hass.locale`
  * @param options Intl.NumberFormatOptions to use
  */
 export const formatNumber = (
@@ -81,12 +84,29 @@ export const formatNumber = (
   }`;
 };
 
+/**
+ * Checks if the current entity state should be formatted as an integer based on the `state` and `step` attribute and returns the appropriate `Intl.NumberFormatOptions` object with `maximumFractionDigits` set
+ * @param entityState The state object of the entity
+ * @returns An `Intl.NumberFormatOptions` object with `maximumFractionDigits` set to 0, or `undefined`
+ */
+export const getNumberFormatOptions = (
+  entityState: HassEntity
+): Intl.NumberFormatOptions | undefined => {
+  if (
+    Number.isInteger(Number(entityState.attributes?.step)) &&
+    Number.isInteger(Number(entityState.state))
+  ) {
+    return { maximumFractionDigits: 0 };
+  }
+  return undefined;
+};
+
 /**
  * Generates default options for Intl.NumberFormat
  * @param num The number to be formatted
  * @param options The Intl.NumberFormatOptions that should be included in the returned options
  */
-const getDefaultFormatOptions = (
+export const getDefaultFormatOptions = (
   num: string | number,
   options?: Intl.NumberFormatOptions
 ): Intl.NumberFormatOptions => {
@@ -102,7 +122,8 @@ const getDefaultFormatOptions = (
   // Keep decimal trailing zeros if they are present in a string numeric value
   if (
     !options ||
-    (!options.minimumFractionDigits && !options.maximumFractionDigits)
+    (options.minimumFractionDigits === undefined &&
+      options.maximumFractionDigits === undefined)
   ) {
     const digits = num.indexOf(".") > -1 ? num.split(".")[1].length : 0;
     defaultOptions.minimumFractionDigits = digits;

src/common/style/icon_color_css.ts

@@ -1,60 +1,32 @@
 import { css } from "lit";
 
 export const iconColorCSS = css`
-  ha-state-icon[data-domain="alert"][data-state="on"],
-  ha-state-icon[data-domain="automation"][data-state="on"],
-  ha-state-icon[data-domain="binary_sensor"][data-state="on"],
-  ha-state-icon[data-domain="calendar"][data-state="on"],
-  ha-state-icon[data-domain="camera"][data-state="streaming"],
-  ha-state-icon[data-domain="cover"][data-state="open"],
-  ha-state-icon[data-domain="device_tracker"][data-state="home"],
-  ha-state-icon[data-domain="fan"][data-state="on"],
-  ha-state-icon[data-domain="humidifier"][data-state="on"],
-  ha-state-icon[data-domain="light"][data-state="on"],
-  ha-state-icon[data-domain="input_boolean"][data-state="on"],
-  ha-state-icon[data-domain="lock"][data-state="unlocked"],
-  ha-state-icon[data-domain="media_player"][data-state="on"],
-  ha-state-icon[data-domain="media_player"][data-state="paused"],
-  ha-state-icon[data-domain="media_player"][data-state="playing"],
-  ha-state-icon[data-domain="remote"][data-state="on"],
-  ha-state-icon[data-domain="script"][data-state="on"],
-  ha-state-icon[data-domain="sun"][data-state="above_horizon"],
-  ha-state-icon[data-domain="switch"][data-state="on"],
-  ha-state-icon[data-domain="timer"][data-state="active"],
-  ha-state-icon[data-domain="vacuum"][data-state="cleaning"],
-  ha-state-icon[data-domain="group"][data-state="on"],
-  ha-state-icon[data-domain="group"][data-state="home"],
-  ha-state-icon[data-domain="group"][data-state="open"],
-  ha-state-icon[data-domain="group"][data-state="locked"],
-  ha-state-icon[data-domain="group"][data-state="problem"] {
+  ha-state-icon[data-active][data-domain="alert"],
+  ha-state-icon[data-active][data-domain="automation"],
+  ha-state-icon[data-active][data-domain="binary_sensor"],
+  ha-state-icon[data-active][data-domain="calendar"],
+  ha-state-icon[data-active][data-domain="camera"],
+  ha-state-icon[data-active][data-domain="cover"],
+  ha-state-icon[data-active][data-domain="device_tracker"],
+  ha-state-icon[data-active][data-domain="fan"],
+  ha-state-icon[data-active][data-domain="humidifier"],
+  ha-state-icon[data-active][data-domain="light"],
+  ha-state-icon[data-active][data-domain="input_boolean"],
+  ha-state-icon[data-active][data-domain="lock"],
+  ha-state-icon[data-active][data-domain="media_player"],
+  ha-state-icon[data-active][data-domain="remote"],
+  ha-state-icon[data-active][data-domain="script"],
+  ha-state-icon[data-active][data-domain="sun"],
+  ha-state-icon[data-active][data-domain="switch"],
+  ha-state-icon[data-active][data-domain="timer"],
+  ha-state-icon[data-active][data-domain="vacuum"],
+  ha-state-icon[data-active][data-domain="group"] {
     color: var(--paper-item-icon-active-color, #fdd835);
   }
 
-  ha-state-icon[data-domain="climate"][data-state="cooling"] {
-    color: var(--cool-color, var(--state-climate-cool-color));
-  }
-
-  ha-state-icon[data-domain="climate"][data-state="heating"] {
-    color: var(--heat-color, var(--state-climate-heat-color));
-  }
-
-  ha-state-icon[data-domain="climate"][data-state="drying"] {
-    color: var(--dry-color, var(--state-climate-dry-color));
-  }
-
-  ha-state-icon[data-domain="alarm_control_panel"] {
-    color: var(--alarm-color-armed, var(--label-badge-red));
-  }
-  ha-state-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
-    color: var(--alarm-color-disarmed, var(--label-badge-green));
-  }
-  ha-state-icon[data-domain="alarm_control_panel"][data-state="pending"],
-  ha-state-icon[data-domain="alarm_control_panel"][data-state="arming"] {
-    color: var(--alarm-color-pending, var(--label-badge-yellow));
-    animation: pulse 1s infinite;
-  }
-  ha-state-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
-    color: var(--alarm-color-triggered, var(--label-badge-red));
+  ha-state-icon[data-active][data-domain="alarm_control_panel"][data-state="pending"],
+  ha-state-icon[data-active][data-domain="alarm_control_panel"][data-state="arming"],
+  ha-state-icon[data-active][data-domain="alarm_control_panel"][data-state="triggered"] {
     animation: pulse 1s infinite;
   }
 
@@ -70,10 +42,6 @@ export const iconColorCSS = css`
     }
   }
 
-  ha-state-icon[data-domain="plant"][data-state="problem"] {
-    color: var(--state-icon-error-color);
-  }
-
   /* Color the icon if unavailable */
   ha-state-icon[data-state="unavailable"] {
     color: var(--state-unavailable-color);

src/common/translations/day_names.ts

@@ -0,0 +1,10 @@
+import { addDays, startOfWeek } from "date-fns";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
+import { formatDateWeekday } from "../datetime/format_date";
+
+export const dayNames = memoizeOne((locale: FrontendLocaleData): string[] =>
+  Array.from({ length: 7 }, (_, d) =>
+    formatDateWeekday(addDays(startOfWeek(new Date()), d), locale)
+  )
+);

src/common/translations/localize.ts

@@ -18,13 +18,12 @@ export type LocalizeKeys =
   | `ui.card.alarm_control_panel.${string}`
   | `ui.card.weather.attributes.${string}`
   | `ui.card.weather.cardinal_direction.${string}`
+  | `ui.components.calendar.event.rrule.${string}`
   | `ui.components.logbook.${string}`
   | `ui.components.selectors.file.${string}`
   | `ui.dialogs.entity_registry.editor.${string}`
   | `ui.dialogs.more_info_control.vacuum.${string}`
-  | `ui.dialogs.options_flow.loading.${string}`
   | `ui.dialogs.quick-bar.commands.${string}`
-  | `ui.dialogs.repair_flow.loading.${string}`
   | `ui.dialogs.unhealthy.reason.${string}`
   | `ui.dialogs.unsupported.reason.${string}`
   | `ui.panel.config.${string}.${"caption" | "description"}`
@@ -32,9 +31,7 @@ export type LocalizeKeys =
   | `ui.panel.config.dashboard.${string}`
   | `ui.panel.config.devices.${string}`
   | `ui.panel.config.energy.${string}`
-  | `ui.panel.config.helpers.${string}`
   | `ui.panel.config.info.${string}`
-  | `ui.panel.config.integrations.${string}`
   | `ui.panel.config.logs.${string}`
   | `ui.panel.config.lovelace.${string}`
   | `ui.panel.config.network.${string}`
@@ -42,7 +39,6 @@ export type LocalizeKeys =
   | `ui.panel.config.url.${string}`
   | `ui.panel.config.zha.${string}`
   | `ui.panel.config.zwave_js.${string}`
-  | `ui.panel.developer-tools.tabs.${string}`
   | `ui.panel.lovelace.card.${string}`
   | `ui.panel.lovelace.editor.${string}`
   | `ui.panel.page-authorize.form.${string}`
@@ -202,7 +198,6 @@ export const loadPolyfillLocales = async (language: string) => {
       Intl.NumberFormat.__addLocaleData(await result.json());
     }
     if (
-      // @ts-expect-error
       Intl.RelativeTimeFormat &&
       // @ts-ignore
       typeof Intl.RelativeTimeFormat.__addLocaleData === "function"

src/common/translations/month_names.ts

@@ -0,0 +1,10 @@
+import { addMonths, startOfYear } from "date-fns";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
+import { formatDateMonth } from "../datetime/format_date";
+
+export const monthNames = memoizeOne((locale: FrontendLocaleData): string[] =>
+  Array.from({ length: 12 }, (_, m) =>
+    formatDateMonth(addMonths(startOfYear(new Date()), m), locale)
+  )
+);

src/common/util/select-unit.ts

@@ -0,0 +1,97 @@
+export type Unit =
+  | "second"
+  | "minute"
+  | "hour"
+  | "day"
+  | "week"
+  | "month"
+  | "quarter"
+  | "year";
+
+const MS_PER_SECOND = 1e3;
+const SECS_PER_MIN = 60;
+const SECS_PER_HOUR = SECS_PER_MIN * 60;
+const SECS_PER_DAY = SECS_PER_HOUR * 24;
+const SECS_PER_WEEK = SECS_PER_DAY * 7;
+
+// Adapted from https://github.com/formatjs/formatjs/blob/186cef62f980ec66252ee232f438a42d0b51b9f9/packages/intl-utils/src/diff.ts
+export function selectUnit(
+  from: Date | number,
+  to: Date | number = Date.now(),
+  thresholds: Partial<Thresholds> = {}
+): { value: number; unit: Unit } {
+  const resolvedThresholds: Thresholds = {
+    ...DEFAULT_THRESHOLDS,
+    ...(thresholds || {}),
+  };
+
+  const secs = (+from - +to) / MS_PER_SECOND;
+  if (Math.abs(secs) < resolvedThresholds.second) {
+    return {
+      value: Math.round(secs),
+      unit: "second",
+    };
+  }
+
+  const mins = secs / SECS_PER_MIN;
+  if (Math.abs(mins) < resolvedThresholds.minute) {
+    return {
+      value: Math.round(mins),
+      unit: "minute",
+    };
+  }
+
+  const hours = secs / SECS_PER_HOUR;
+  if (Math.abs(hours) < resolvedThresholds.hour) {
+    return {
+      value: Math.round(hours),
+      unit: "hour",
+    };
+  }
+
+  const days = secs / SECS_PER_DAY;
+  if (Math.abs(days) < resolvedThresholds.day) {
+    return {
+      value: Math.round(days),
+      unit: "day",
+    };
+  }
+
+  const weeks = secs / SECS_PER_WEEK;
+  if (Math.abs(weeks) < resolvedThresholds.week) {
+    return {
+      value: Math.round(weeks),
+      unit: "week",
+    };
+  }
+
+  const fromDate = new Date(from);
+  const toDate = new Date(to);
+  const years = fromDate.getFullYear() - toDate.getFullYear();
+  const months = years * 12 + fromDate.getMonth() - toDate.getMonth();
+  if (Math.round(Math.abs(months)) < resolvedThresholds.month) {
+    return {
+      value: Math.round(months),
+      unit: "month",
+    };
+  }
+
+  return {
+    value: Math.round(years),
+    unit: "year",
+  };
+}
+
+type Thresholds = Record<
+  "second" | "minute" | "hour" | "day" | "week" | "month",
+  number
+>;
+
+export const DEFAULT_THRESHOLDS: Thresholds = {
+  second: 45, // seconds to minute
+  minute: 45, // minutes to hour
+  hour: 22, // hour to day
+  day: 5, // day to week
+  week: 4, // week to months
+  month: 11, // month to years
+};

src/components/buttons/ha-call-service-button.js

@@ -14,6 +14,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       <ha-progress-button
         id="progress"
         progress="[[progress]]"
+        disabled="[[disabled]]"
         on-click="buttonTapped"
         tabindex="0"
         ><slot></slot
@@ -48,6 +49,10 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       confirmation: {
         type: String,
       },
+
+      disabled: {
+        type: Boolean,
+      },
     };
   }
 

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

@@ -40,7 +40,7 @@ import {
   formatDateMonth,
   formatDateMonthYear,
   formatDateShort,
-  formatDateWeekday,
+  formatDateWeekdayDay,
   formatDateYear,
 } from "../../common/datetime/format_date";
 import {
@@ -92,7 +92,7 @@ _adapters._date.override({
       case "hour":
         return formatTime(new Date(time), this.options.locale);
       case "weekday":
-        return formatDateWeekday(new Date(time), this.options.locale);
+        return formatDateWeekdayDay(new Date(time), this.options.locale);
       case "date":
         return formatDate(new Date(time), this.options.locale);
       case "day":

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

@@ -3,8 +3,10 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { getGraphColorByIndex } from "../../common/color/colors";
+import { rgb2hex } from "../../common/color/convert-color";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import { computeDomain } from "../../common/entity/compute_domain";
+import { stateActive } from "../../common/entity/state_active";
+import { stateColor } from "../../common/entity/state_color";
 import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { TimelineEntity } from "../../data/history";
@@ -12,65 +14,55 @@ import { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 
-/** Binary sensor device classes for which the static colors for on/off are NOT inverted.
- *  List the ones were "on" = good or normal state => should be rendered "green".
- *  Note: It is now a "not inverted" list (compared to the past) since we now have more inverted ones.
- */
-const BINARY_SENSOR_DEVICE_CLASS_COLOR_NOT_INVERTED = new Set([
-  "battery_charging",
-  "connectivity",
-  "light",
-  "moving",
-  "plug",
-  "power",
-  "presence",
-  "running",
-]);
-
-const STATIC_STATE_COLORS = new Set([
-  "on",
-  "off",
-  "home",
-  "not_home",
-  "unavailable",
-  "unknown",
-  "idle",
-]);
-
+const stateColorTokenMap: Map<string, string> = new Map();
 const stateColorMap: Map<string, string> = new Map();
 
 let colorIndex = 0;
 
-const invertOnOff = (entityState?: HassEntity) =>
-  entityState &&
-  computeDomain(entityState.entity_id) === "binary_sensor" &&
-  "device_class" in entityState.attributes &&
-  !BINARY_SENSOR_DEVICE_CLASS_COLOR_NOT_INVERTED.has(
-    entityState.attributes.device_class!
-  );
+export const getStateColorToken = (
+  stateString: string,
+  entityState?: HassEntity
+) => {
+  if (!entityState || !stateActive(entityState, stateString)) {
+    return `disabled`;
+  }
+  const color = stateColor(entityState, stateString);
+  if (color) {
+    return `state-${color}`;
+  }
+  return undefined;
+};
 
 const getColor = (
   stateString: string,
-  entityState: HassEntity,
-  computedStyles: CSSStyleDeclaration
+  computedStyles: CSSStyleDeclaration,
+  entityState?: HassEntity
 ) => {
-  // Inversion is only valid for "on" or "off" state
-  if (
-    (stateString === "on" || stateString === "off") &&
-    invertOnOff(entityState)
-  ) {
-    stateString = stateString === "on" ? "off" : "on";
+  const stateColorToken = getStateColorToken(stateString, entityState);
+
+  if (stateColorToken) {
+    if (stateColorTokenMap.has(stateColorToken)) {
+      return stateColorTokenMap.get(stateColorToken);
+    }
+    const value = computedStyles.getPropertyValue(
+      `--rgb-${stateColorToken}-color`
+    );
+
+    if (value) {
+      const parsedValue = value.split(",").map((v) => Number(v)) as [
+        number,
+        number,
+        number
+      ];
+      const hexValue = rgb2hex(parsedValue);
+      stateColorTokenMap.set(stateColorToken, hexValue);
+      return hexValue;
+    }
   }
+
   if (stateColorMap.has(stateString)) {
     return stateColorMap.get(stateString);
   }
-  if (STATIC_STATE_COLORS.has(stateString)) {
-    const color = computedStyles.getPropertyValue(
-      `--state-${stateString}-color`
-    );
-    stateColorMap.set(stateString, color);
-    return color;
-  }
   const color = getGraphColorByIndex(colorIndex, computedStyles);
   colorIndex++;
   stateColorMap.set(stateString, color);
@@ -118,101 +110,9 @@ export class StateHistoryChartTimeline extends LitElement {
 
   public willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
-      const narrow = this.narrow;
-      this._chartOptions = {
-        maintainAspectRatio: false,
-        parsing: false,
-        animation: false,
-        scales: {
-          x: {
-            type: "timeline",
-            position: "bottom",
-            adapters: {
-              date: {
-                locale: this.hass.locale,
-              },
-            },
-            suggestedMin: this.startTime,
-            suggestedMax: this.endTime,
-            ticks: {
-              autoSkip: true,
-              maxRotation: 0,
-              sampleSize: 5,
-              autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
-              font: (context) =>
-                context.tick && context.tick.major
-                  ? ({ weight: "bold" } as any)
-                  : {},
-            },
-            grid: {
-              offset: false,
-            },
-            time: {
-              tooltipFormat: "datetimeseconds",
-            },
-          },
-          y: {
-            type: "category",
-            barThickness: 20,
-            offset: true,
-            grid: {
-              display: false,
-              drawBorder: false,
-              drawTicks: false,
-            },
-            ticks: {
-              display:
-                this.chunked || !this.isSingleDevice || this.data.length !== 1,
-            },
-            afterSetDimensions: (y) => {
-              y.maxWidth = y.chart.width * 0.18;
-            },
-            afterFit: (scaleInstance) => {
-              if (this.chunked) {
-                // ensure all the chart labels are the same width
-                scaleInstance.width = narrow ? 105 : 185;
-              }
-            },
-            position: computeRTL(this.hass) ? "right" : "left",
-          },
-        },
-        plugins: {
-          tooltip: {
-            mode: "nearest",
-            callbacks: {
-              title: (context) =>
-                context![0].chart!.data!.labels![
-                  context[0].datasetIndex
-                ] as string,
-              beforeBody: (context) => context[0].dataset.label || "",
-              label: (item) => {
-                const d = item.dataset.data[item.dataIndex] as TimeLineData;
-                return [
-                  d.label || "",
-                  formatDateTimeWithSeconds(d.start, this.hass.locale),
-                  formatDateTimeWithSeconds(d.end, this.hass.locale),
-                ];
-              },
-              labelColor: (item) => ({
-                borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
-                  .color!,
-                backgroundColor: (
-                  item.dataset.data[item.dataIndex] as TimeLineData
-                ).color!,
-              }),
-            },
-          },
-          filler: {
-            propagate: true,
-          },
-        },
-        // @ts-expect-error
-        locale: numberFormatToLocale(this.hass.locale),
-      };
+      this._createOptions();
     }
+
     if (
       changedProps.has("data") ||
       this._chartTime <
@@ -222,6 +122,107 @@ export class StateHistoryChartTimeline extends LitElement {
       // so the X axis grows even if there is no new data
       this._generateData();
     }
+
+    if (changedProps.has("startTime") || changedProps.has("endTime")) {
+      this._createOptions();
+    }
+  }
+
+  private _createOptions() {
+    const narrow = this.narrow;
+    this._chartOptions = {
+      maintainAspectRatio: false,
+      parsing: false,
+      animation: false,
+      scales: {
+        x: {
+          type: "timeline",
+          position: "bottom",
+          adapters: {
+            date: {
+              locale: this.hass.locale,
+            },
+          },
+          suggestedMin: this.startTime,
+          suggestedMax: this.endTime,
+          ticks: {
+            autoSkip: true,
+            maxRotation: 0,
+            sampleSize: 5,
+            autoSkipPadding: 20,
+            major: {
+              enabled: true,
+            },
+            font: (context) =>
+              context.tick && context.tick.major
+                ? ({ weight: "bold" } as any)
+                : {},
+          },
+          grid: {
+            offset: false,
+          },
+          time: {
+            tooltipFormat: "datetimeseconds",
+          },
+        },
+        y: {
+          type: "category",
+          barThickness: 20,
+          offset: true,
+          grid: {
+            display: false,
+            drawBorder: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display:
+              this.chunked || !this.isSingleDevice || this.data.length !== 1,
+          },
+          afterSetDimensions: (y) => {
+            y.maxWidth = y.chart.width * 0.18;
+          },
+          afterFit: (scaleInstance) => {
+            if (this.chunked) {
+              // ensure all the chart labels are the same width
+              scaleInstance.width = narrow ? 105 : 185;
+            }
+          },
+          position: computeRTL(this.hass) ? "right" : "left",
+        },
+      },
+      plugins: {
+        tooltip: {
+          mode: "nearest",
+          callbacks: {
+            title: (context) =>
+              context![0].chart!.data!.labels![
+                context[0].datasetIndex
+              ] as string,
+            beforeBody: (context) => context[0].dataset.label || "",
+            label: (item) => {
+              const d = item.dataset.data[item.dataIndex] as TimeLineData;
+              return [
+                d.label || "",
+                formatDateTimeWithSeconds(d.start, this.hass.locale),
+                formatDateTimeWithSeconds(d.end, this.hass.locale),
+              ];
+            },
+            labelColor: (item) => ({
+              borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
+                .color!,
+              backgroundColor: (
+                item.dataset.data[item.dataIndex] as TimeLineData
+              ).color!,
+            }),
+          },
+        },
+        filler: {
+          propagate: true,
+        },
+      },
+      // @ts-expect-error
+      locale: numberFormatToLocale(this.hass.locale),
+    };
   }
 
   private _generateData() {
@@ -272,8 +273,8 @@ export class StateHistoryChartTimeline extends LitElement {
             label: locState,
             color: getColor(
               prevState,
-              this.hass.states[stateInfo.entity_id],
-              computedStyles
+              computedStyles,
+              this.hass.states[stateInfo.entity_id]
             ),
           });
 
@@ -290,8 +291,8 @@ export class StateHistoryChartTimeline extends LitElement {
           label: locState,
           color: getColor(
             prevState,
-            this.hass.states[stateInfo.entity_id],
-            computedStyles
+            computedStyles,
+            this.hass.states[stateInfo.entity_id]
           ),
         });
       }

src/components/chart/statistics-chart.ts

@@ -26,12 +26,13 @@ import {
   getStatisticMetadata,
   Statistics,
   statisticsHaveType,
+  StatisticsMetaData,
   StatisticType,
 } from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 
-export type ExtendedStatisticType = StatisticType | "state";
+export type ExtendedStatisticType = StatisticType | "state" | "change";
 
 export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
   mean: "mean",
@@ -39,13 +40,20 @@ export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
   max: "max",
   sum: "sum",
   state: "sum",
+  change: "sum",
 };
+
 @customElement("statistics-chart")
 class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public statisticsData!: Statistics;
 
+  @property({ attribute: false }) public metadata?: Record<
+    string,
+    StatisticsMetaData
+  >;
+
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
@@ -61,6 +69,8 @@ class StatisticsChart extends LitElement {
 
   @property() public chartType: ChartType = "line";
 
+  @property({ type: Boolean }) public hideLegend = false;
+
   @property({ type: Boolean }) public isLoadingData = false;
 
   @state() private _chartData: ChartData = { datasets: [] };
@@ -74,7 +84,7 @@ class StatisticsChart extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues) {
-    if (!this.hasUpdated) {
+    if (!this.hasUpdated || changedProps.has("unit")) {
       this._createOptions();
     }
     if (changedProps.has("statisticsData") || changedProps.has("statTypes")) {
@@ -118,7 +128,7 @@ class StatisticsChart extends LitElement {
     `;
   }
 
-  private _createOptions() {
+  private _createOptions(unit?: string) {
     this._chartOptions = {
       parsing: false,
       animation: false,
@@ -152,8 +162,8 @@ class StatisticsChart extends LitElement {
             maxTicksLimit: 7,
           },
           title: {
-            display: this.unit,
-            text: this.unit,
+            display: unit || this.unit,
+            text: unit || this.unit,
           },
         },
       },
@@ -175,7 +185,7 @@ class StatisticsChart extends LitElement {
           propagate: true,
         },
         legend: {
-          display: true,
+          display: !this.hideLegend,
           labels: {
             usePointStyle: true,
           },
@@ -187,6 +197,7 @@ class StatisticsChart extends LitElement {
       elements: {
         line: {
           tension: 0.4,
+          cubicInterpolationMode: "monotone",
           borderWidth: 1.5,
         },
         bar: { borderWidth: 1.5, borderRadius: 4 },
@@ -218,12 +229,12 @@ class StatisticsChart extends LitElement {
       return;
     }
 
-    const statisticsMetaData = await this._getStatisticsMetaData(
-      Object.keys(this.statisticsData)
-    );
+    const statisticsMetaData =
+      this.metadata ||
+      (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));
 
     let colorIndex = 0;
-    const statisticsData = Object.values(this.statisticsData);
+    const statisticsData = Object.entries(this.statisticsData);
     const totalDataSets: ChartDataset<"line">[] = [];
     let endTime: Date;
 
@@ -236,7 +247,7 @@ class StatisticsChart extends LitElement {
       // Get the highest date from the last date of each statistic
       new Date(
         Math.max(
-          ...statisticsData.map((stats) =>
+          ...statisticsData.map(([_, stats]) =>
             new Date(stats[stats.length - 1].start).getTime()
           )
         )
@@ -249,19 +260,19 @@ class StatisticsChart extends LitElement {
     let unit: string | undefined | null;
 
     const names = this.names || {};
-    statisticsData.forEach((stats) => {
-      const firstStat = stats[0];
-      const meta = statisticsMetaData?.[firstStat.statistic_id];
-      let name = names[firstStat.statistic_id];
-      if (!name) {
-        name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
+    statisticsData.forEach(([statistic_id, stats]) => {
+      const meta = statisticsMetaData?.[statistic_id];
+      let name = names[statistic_id];
+      if (name === undefined) {
+        name = getStatisticLabel(this.hass, statistic_id, meta);
       }
 
       if (!this.unit) {
         if (unit === undefined) {
-          unit = getDisplayUnit(this.hass, firstStat.statistic_id, meta);
+          unit = getDisplayUnit(this.hass, statistic_id, meta);
         } else if (
-          unit !== getDisplayUnit(this.hass, firstStat.statistic_id, meta)
+          unit !== null &&
+          unit !== getDisplayUnit(this.hass, statistic_id, meta)
         ) {
           // Clear unit if not all statistics have same unit
           unit = null;
@@ -270,33 +281,38 @@ class StatisticsChart extends LitElement {
 
       // array containing [value1, value2, etc]
       let prevValues: Array<number | null> | null = null;
+      let prevEndTime: Date | undefined;
 
       // The datasets for the current statistic
       const statDataSets: ChartDataset<"line">[] = [];
 
       const pushData = (
-        timestamp: Date,
+        start: Date,
+        end: Date,
         dataValues: Array<number | null> | null
       ) => {
         if (!dataValues) return;
-        if (timestamp > endTime) {
+        if (start > end) {
           // Drop data points that are after the requested endTime. This could happen if
           // endTime is "now" and client time is not in sync with server time.
           return;
         }
         statDataSets.forEach((d, i) => {
-          if (dataValues[i] === null && prevValues && prevValues[i] !== null) {
-            // null data values show up as gaps in the chart.
-            // If the current value for the dataset is null and the previous
-            // value of the data set is not null, then add an 'end' point
-            // to the chart for the previous value. Otherwise the gap will
-            // be too big. It will go from the start of the previous data
-            // value until the start of the next data value.
-            d.data.push({ x: timestamp.getTime(), y: prevValues[i]! });
+          if (
+            prevEndTime &&
+            prevValues &&
+            prevEndTime.getTime() !== start.getTime()
+          ) {
+            // if the end of the previous data doesn't match the start of the current data,
+            // we have to draw a gap so add a value at the end time, and then an empty value.
+            d.data.push({ x: prevEndTime.getTime(), y: prevValues[i]! });
+            // @ts-expect-error
+            d.data.push({ x: prevEndTime.getTime(), y: null });
           }
-          d.data.push({ x: timestamp.getTime(), y: dataValues[i]! });
+          d.data.push({ x: start.getTime(), y: dataValues[i]! });
         });
         prevValues = dataValues;
+        prevEndTime = end;
       };
 
       const color = getGraphColorByIndex(colorIndex, this._computedStyle!);
@@ -324,10 +340,14 @@ class StatisticsChart extends LitElement {
           const band = drawBands && (type === "min" || type === "max");
           statTypes.push(type);
           statDataSets.push({
-            label: `${name} (${this.hass.localize(
-              `ui.components.statistics_charts.statistic_types.${type}`
-            )})
-            `,
+            label: name
+              ? `${name} (${this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                )})
+            `
+              : this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                ),
             fill: drawBands
               ? type === "min"
                 ? "+1"
@@ -335,7 +355,7 @@ class StatisticsChart extends LitElement {
                 ? "-1"
                 : false
               : false,
-            borderColor: band ? color + "7F" : color,
+            borderColor: band ? color + (this.hideLegend ? "00" : "7F") : color,
             backgroundColor: band ? color + "3F" : color + "7F",
             pointRadius: 0,
             data: [],
@@ -348,49 +368,49 @@ class StatisticsChart extends LitElement {
 
       let prevDate: Date | null = null;
       // Process chart data.
-      let prevSum: number | null = null;
+      let firstSum: number | null | undefined = null;
+      let prevSum: number | null | undefined = null;
       stats.forEach((stat) => {
-        const date = new Date(stat.start);
-        if (prevDate === date) {
+        const startDate = new Date(stat.start);
+        if (prevDate === startDate) {
           return;
         }
-        prevDate = date;
+        prevDate = startDate;
         const dataValues: Array<number | null> = [];
         statTypes.forEach((type) => {
-          let val: number | null;
+          let val: number | null | undefined;
           if (type === "sum") {
-            if (prevSum === null) {
+            if (firstSum === null || firstSum === undefined) {
               val = 0;
-              prevSum = stat.sum;
+              firstSum = stat.sum;
             } else {
-              val = (stat.sum || 0) - prevSum;
+              val = (stat.sum || 0) - firstSum;
             }
+          } else if (type === "change") {
+            if (prevSum === null || prevSum === undefined) {
+              prevSum = stat.sum;
+              return;
+            }
+            val = (stat.sum || 0) - prevSum;
+            prevSum = stat.sum;
           } else {
             val = stat[type];
           }
-          dataValues.push(val !== null ? Math.round(val * 100) / 100 : null);
+          dataValues.push(
+            val !== null && val !== undefined
+              ? Math.round(val * 100) / 100
+              : null
+          );
         });
-        pushData(date, dataValues);
+        pushData(startDate, new Date(stat.end), dataValues);
       });
 
-      // Add an entry for final values
-      pushData(endTime, prevValues);
-
       // Concat two arrays
       Array.prototype.push.apply(totalDataSets, statDataSets);
     });
 
-    if (unit !== null) {
-      this._chartOptions = {
-        ...this._chartOptions,
-        scales: {
-          ...this._chartOptions!.scales,
-          y: {
-            ...(this._chartOptions!.scales!.y as Record<string, unknown>),
-            title: { display: unit, text: unit },
-          },
-        },
-      };
+    if (unit) {
+      this._createOptions(unit);
     }
 
     this._chartData = {

src/components/country-datalist.ts

@@ -0,0 +1,284 @@
+import memoizeOne from "memoize-one";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+
+export const COUNTRIES = [
+  "AD",
+  "AE",
+  "AF",
+  "AG",
+  "AI",
+  "AL",
+  "AM",
+  "AO",
+  "AQ",
+  "AR",
+  "AS",
+  "AT",
+  "AU",
+  "AW",
+  "AX",
+  "AZ",
+  "BA",
+  "BB",
+  "BD",
+  "BE",
+  "BF",
+  "BG",
+  "BH",
+  "BI",
+  "BJ",
+  "BL",
+  "BM",
+  "BN",
+  "BO",
+  "BQ",
+  "BR",
+  "BS",
+  "BT",
+  "BV",
+  "BW",
+  "BY",
+  "BZ",
+  "CA",
+  "CC",
+  "CD",
+  "CF",
+  "CG",
+  "CH",
+  "CI",
+  "CK",
+  "CL",
+  "CM",
+  "CN",
+  "CO",
+  "CR",
+  "CU",
+  "CV",
+  "CW",
+  "CX",
+  "CY",
+  "CZ",
+  "DE",
+  "DJ",
+  "DK",
+  "DM",
+  "DO",
+  "DZ",
+  "EC",
+  "EE",
+  "EG",
+  "EH",
+  "ER",
+  "ES",
+  "ET",
+  "FI",
+  "FJ",
+  "FK",
+  "FM",
+  "FO",
+  "FR",
+  "GA",
+  "GB",
+  "GD",
+  "GE",
+  "GF",
+  "GG",
+  "GH",
+  "GI",
+  "GL",
+  "GM",
+  "GN",
+  "GP",
+  "GQ",
+  "GR",
+  "GS",
+  "GT",
+  "GU",
+  "GW",
+  "GY",
+  "HK",
+  "HM",
+  "HN",
+  "HR",
+  "HT",
+  "HU",
+  "ID",
+  "IE",
+  "IL",
+  "IM",
+  "IN",
+  "IO",
+  "IQ",
+  "IR",
+  "IS",
+  "IT",
+  "JE",
+  "JM",
+  "JO",
+  "JP",
+  "KE",
+  "KG",
+  "KH",
+  "KI",
+  "KM",
+  "KN",
+  "KP",
+  "KR",
+  "KW",
+  "KY",
+  "KZ",
+  "LA",
+  "LB",
+  "LC",
+  "LI",
+  "LK",
+  "LR",
+  "LS",
+  "LT",
+  "LU",
+  "LV",
+  "LY",
+  "MA",
+  "MC",
+  "MD",
+  "ME",
+  "MF",
+  "MG",
+  "MH",
+  "MK",
+  "ML",
+  "MM",
+  "MN",
+  "MO",
+  "MP",
+  "MQ",
+  "MR",
+  "MS",
+  "MT",
+  "MU",
+  "MV",
+  "MW",
+  "MX",
+  "MY",
+  "MZ",
+  "NA",
+  "NC",
+  "NE",
+  "NF",
+  "NG",
+  "NI",
+  "NL",
+  "NO",
+  "NP",
+  "NR",
+  "NU",
+  "NZ",
+  "OM",
+  "PA",
+  "PE",
+  "PF",
+  "PG",
+  "PH",
+  "PK",
+  "PL",
+  "PM",
+  "PN",
+  "PR",
+  "PS",
+  "PT",
+  "PW",
+  "PY",
+  "QA",
+  "RE",
+  "RO",
+  "RS",
+  "RU",
+  "RW",
+  "SA",
+  "SB",
+  "SC",
+  "SD",
+  "SE",
+  "SG",
+  "SH",
+  "SI",
+  "SJ",
+  "SK",
+  "SL",
+  "SM",
+  "SN",
+  "SO",
+  "SR",
+  "SS",
+  "ST",
+  "SV",
+  "SX",
+  "SY",
+  "SZ",
+  "TC",
+  "TD",
+  "TF",
+  "TG",
+  "TH",
+  "TJ",
+  "TK",
+  "TL",
+  "TM",
+  "TN",
+  "TO",
+  "TR",
+  "TT",
+  "TV",
+  "TW",
+  "TZ",
+  "UA",
+  "UG",
+  "UM",
+  "US",
+  "UY",
+  "UZ",
+  "VA",
+  "VC",
+  "VE",
+  "VG",
+  "VI",
+  "VN",
+  "VU",
+  "WF",
+  "WS",
+  "YE",
+  "YT",
+  "ZA",
+  "ZM",
+  "ZW",
+];
+
+export const getCountryOptions = memoizeOne((language?: string) => {
+  const countryDisplayNames =
+    Intl && "DisplayNames" in Intl
+      ? new Intl.DisplayNames(language, {
+          type: "region",
+          fallback: "code",
+        })
+      : undefined;
+
+  const options = COUNTRIES.map((country) => ({
+    value: country,
+    label: countryDisplayNames ? countryDisplayNames.of(country)! : country,
+  }));
+  options.sort((a, b) => caseInsensitiveStringCompare(a.label, b.label));
+  return options;
+});
+
+export const createCountryListEl = () => {
+  const list = document.createElement("datalist");
+  list.id = "countries";
+  const options = getCountryOptions();
+  for (const country of options) {
+    const option = document.createElement("option");
+    option.value = country.value;
+    option.innerText = country.label;
+    list.appendChild(option);
+  }
+  return list;
+};