Simplify config

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.11
+FROM mcr.microsoft.com/devcontainers/python:3.12
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.eslintrc.json

@@ -115,6 +115,7 @@
       }
     ],
     "unused-imports/no-unused-imports": "error",
+    "lit/attribute-names": "warn",
     "lit/attribute-value-entities": "off",
     "lit/no-template-map": "off",
     "lit/no-native-attributes": "warn",

.github/workflows/cast_deployment.yaml

@@ -21,7 +21,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
         with:
           ref: dev
 
@@ -57,7 +57,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
         with:
           ref: master
 

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
       - name: Setup Node
         uses: actions/setup-node@v4.0.2
         with:
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.0.0
+        uses: actions/cache@v4.0.2
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,7 +58,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
       - name: Setup Node
         uses: actions/setup-node@v4.0.2
         with:
@@ -76,7 +76,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
       - name: Setup Node
         uses: actions/setup-node@v4.0.2
         with:
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v4.3.3
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -100,7 +100,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
       - name: Setup Node
         uses: actions/setup-node@v4.0.2
         with:
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v4.3.3
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.

.github/workflows/demo_deployment.yaml

@@ -22,7 +22,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
         with:
           ref: dev
 
@@ -58,7 +58,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
         with:
           ref: master
 

.github/workflows/design_deployment.yaml

@@ -16,7 +16,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
 
       - name: Setup Node
         uses: actions/setup-node@v4.0.2

.github/workflows/design_preview.yaml

@@ -21,7 +21,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
 
       - name: Setup Node
         uses: actions/setup-node@v4.0.2

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v5
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v4.3.3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v4.3.3
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -23,7 +23,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v0.1.15
+        uses: softprops/action-gh-release@v2.0.5
         with:
           files: |
             dist/*.whl

.github/workflows/translations.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.1.6
 
       - name: Upload Translations
         run: |

.yarn/patches/@lrnwebcomponents-simple-tooltip-npm-8.0.0-77591f2e0c.patch

@@ -1,13 +0,0 @@
-diff --git a/simple-tooltip.js b/simple-tooltip.js
-index 78a87f6a223925f0e29fbedb268c85a142ec6985..3d686dd6a3d5a93342b4b01408089fc316b408ca 100644
---- a/simple-tooltip.js
-+++ b/simple-tooltip.js
-@@ -195,6 +195,8 @@ class SimpleTooltip extends LitElement {
-         .hidden {
-           position: absolute;
-           left: -10000px;
-+          inset-inline-start: -10000px;
-+          inset-inline-end: initial;
-           top: auto;
-           width: 1px;
-           height: 1px;

.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch

@@ -0,0 +1,18 @@
+diff --git a/dist/hls.light.mjs b/dist/hls.light.mjs
+index eed9d788fafdb159975e1a2eb08ac88ba9c9ac33..ace881935e6665946f1c8110ebd2f739cde4427e 100644
+--- a/dist/hls.light.mjs
++++ b/dist/hls.light.mjs
+@@ -20523,9 +20523,9 @@ class Hls {
+ }
+ Hls.defaultConfig = void 0;
+ 
+-var KeySystemFormats = empty.KeySystemFormats;
+-var KeySystems = empty.KeySystems;
+-var SubtitleStreamController = empty.SubtitleStreamController;
+-var TimelineController = empty.TimelineController;
++var KeySystemFormats = empty;
++var KeySystems = empty;
++var SubtitleStreamController = empty;
++var TimelineController = empty;
+ export { AbrController, AttrList, Cues as AudioStreamController, Cues as AudioTrackController, BasePlaylistController, BaseSegment, BaseStreamController, BufferController, Cues as CMCDController, CapLevelController, ChunkMetadata, ContentSteeringController, DateRange, Cues as EMEController, ErrorActionFlags, ErrorController, ErrorDetails, ErrorTypes, Events, FPSController, Fragment, Hls, HlsSkip, HlsUrlParameters, KeySystemFormats, KeySystems, Level, LevelDetails, LevelKey, LoadStats, MetadataSchema, NetworkErrorAction, Part, PlaylistLevelType, SubtitleStreamController, Cues as SubtitleTrackController, TimelineController, Hls as default, getMediaSource, isMSESupported, isSupported };
+ //# sourceMappingURL=hls.light.mjs.map

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -1,7 +1,23 @@
 import defineProvider from "@babel/helper-define-polyfill-provider";
+import { join } from "node:path";
+import paths from "../paths.cjs";
+
+const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
 const PolyfillSupport = {
+  // Note states and shadowRoot properties should be supported.
+  "element-internals": {
+    android: 90,
+    chrome: 90,
+    edge: 90,
+    firefox: 126,
+    ios: 17.4,
+    opera: 76,
+    opera_mobile: 64,
+    safari: 17.4,
+    samsung: 15.0,
+  },
   fetch: {
     android: 42,
     chrome: 42,
@@ -24,16 +40,36 @@ const PolyfillSupport = {
     safari: 10.0,
     samsung: 5.0,
   },
+  "resize-observer": {
+    android: 64,
+    chrome: 64,
+    edge: 79,
+    firefox: 69,
+    ios: 13.4,
+    opera: 51,
+    opera_mobile: 47,
+    safari: 13.1,
+    samsung: 9.0,
+  },
 };
 
 // Map of global variables and/or instance and static properties to the
 // corresponding polyfill key and actual module to import
 const polyfillMap = {
   global: {
-    Proxy: { key: "proxy", module: "proxy-polyfill" },
     fetch: { key: "fetch", module: "unfetch/polyfill" },
+    Proxy: { key: "proxy", module: "proxy-polyfill" },
+    ResizeObserver: {
+      key: "resize-observer",
+      module: join(POLYFILL_DIR, "resize-observer.ts"),
+    },
+  },
+  instance: {
+    attachInternals: {
+      key: "element-internals",
+      module: "element-internals-polyfill",
+    },
   },
-  instance: {},
   static: {},
 };
 
@@ -49,7 +85,9 @@ export default defineProvider(
         if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
           debug(polyfill.desc.key);
           utils.injectGlobalImport(polyfill.desc.module);
+          return true;
         }
+        return false;
       },
     };
   }

build-scripts/bundle.cjs

@@ -3,6 +3,8 @@ const env = require("./env.cjs");
 const paths = require("./paths.cjs");
 const { dependencies } = require("../package.json");
 
+const BABEL_PLUGINS = path.join(__dirname, "babel-plugins");
+
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
 module.exports.sourceMapURL = () => {
@@ -100,22 +102,12 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   ],
   plugins: [
     [
-      path.resolve(
-        paths.polymer_dir,
-        "build-scripts/babel-plugins/inline-constants-plugin.cjs"
-      ),
+      path.join(BABEL_PLUGINS, "inline-constants-plugin.cjs"),
       {
         modules: ["@mdi/js"],
         ignoreModuleNotFound: true,
       },
     ],
-    [
-      path.resolve(
-        paths.polymer_dir,
-        "build-scripts/babel-plugins/custom-polyfill-plugin.js"
-      ),
-      { method: "usage-global" },
-    ],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
@@ -153,6 +145,26 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   ],
   sourceMaps: !isTestBuild,
   overrides: [
+    {
+      // Add plugin to inject various polyfills, excluding the polyfills
+      // themselves to prevent self-injection.
+      plugins: [
+        [
+          path.join(BABEL_PLUGINS, "custom-polyfill-plugin.js"),
+          { method: "usage-global" },
+        ],
+      ],
+      exclude: [
+        path.join(paths.polymer_dir, "src/resources/polyfills"),
+        ...[
+          "@lit-labs/virtualizer/polyfills",
+          "@webcomponents/scoped-custom-element-registry",
+          "element-internals-polyfill",
+          "proxy-polyfill",
+          "unfetch",
+        ].map((p) => new RegExp(`/node_modules/${p}/`)),
+      ],
+    },
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
       // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills

build-scripts/gulp/compress.js

@@ -1,26 +1,19 @@
 // Tasks to compress
 
-import { deleteAsync } from "del";
 import gulp from "gulp";
-import gulpIf from "gulp-if";
-import vinylPaths from "vinyl-paths";
 import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
 const zopfliOptions = { threshold: 150 };
 
-const compressedExt = /\.gz$/;
-const deleteUncompressed = (p) => deleteAsync(p.replace(compressedExt, ""));
-
 const compressDist = (rootDir) =>
   gulp
     .src([
-      `${rootDir}/**/*.{js?(.map),json,css,svg,xml}`,
+      `${rootDir}/**/*.{js,json,css,svg,xml}`,
       `${rootDir}/{authorize,onboarding}.html`,
     ])
     .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(rootDir))
-    .pipe(gulpIf(compressedExt, vinylPaths(deleteUncompressed)));
+    .pipe(gulp.dest(rootDir));
 
 gulp.task("compress-app", () => compressDist(paths.app_output_root));
 gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));

build-scripts/gulp/fetch-nightly-translations.js

@@ -9,7 +9,7 @@ import gulp from "gulp";
 import jszip from "jszip";
 import path from "path";
 import process from "process";
-import tar from "tar";
+import { extract } from "tar";
 
 const MAX_AGE = 24; // hours
 const OWNER = "home-assistant";
@@ -156,7 +156,7 @@ gulp.task("fetch-nightly-translations", async function () {
   console.log("Unpacking downloaded translations...");
   const zip = await jszip.loadAsync(downloadResponse.data);
   await deleteCurrent;
-  const extractStream = zip.file(/.*/)[0].nodeStream().pipe(tar.extract());
+  const extractStream = zip.file(/.*/)[0].nodeStream().pipe(extract());
   await new Promise((resolve, reject) => {
     extractStream.on("close", resolve).on("error", reject);
   });

build-scripts/gulp/translations.js

@@ -1,92 +1,111 @@
-import { createHash } from "crypto";
-import { deleteSync } from "del";
-import { mkdirSync, readdirSync, readFileSync, renameSync } from "fs";
-import { writeFile } from "node:fs/promises";
+/* eslint-disable max-classes-per-file */
+
+import { deleteAsync } from "del";
+import { glob } from "glob";
 import gulp from "gulp";
-import flatmap from "gulp-flatmap";
-import transform from "gulp-json-transform";
-import merge from "gulp-merge-json";
 import rename from "gulp-rename";
-import path from "path";
-import vinylBuffer from "vinyl-buffer";
-import source from "vinyl-source-stream";
+import merge from "lodash.merge";
+import { createHash } from "node:crypto";
+import { mkdir, readFile } from "node:fs/promises";
+import { basename, join } from "node:path";
+import { PassThrough, Transform } from "node:stream";
+import { finished } from "node:stream/promises";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
-import { mapFiles } from "../util.cjs";
 import "./fetch-nightly-translations.js";
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
 const workDir = "build/translations";
-const fullDir = workDir + "/full";
-const coreDir = workDir + "/core";
-const outDir = workDir + "/output";
+const outDir = join(workDir, "output");
+const EN_SRC = join(paths.translations_src, "en.json");
+
 let mergeBackend = false;
 
 gulp.task(
   "translations-enable-merge-backend",
-  gulp.parallel((done) => {
+  gulp.parallel(async () => {
     mergeBackend = true;
-    done();
   }, "allow-setup-fetch-nightly-translations")
 );
 
-// Panel translations which should be split from the core translations.
-const TRANSLATION_FRAGMENTS = Object.keys(
-  JSON.parse(
-    readFileSync(
-      path.resolve(paths.polymer_dir, "src/translations/en.json"),
-      "utf-8"
-    )
-  ).ui.panel
-);
+// Transform stream to apply a function on Vinyl JSON files (buffer mode only).
+// The provided function can either return a new object, or an array of
+// [object, subdirectory] pairs for fragmentizing the JSON.
+class CustomJSON extends Transform {
+  constructor(func, reviver = null) {
+    super({ objectMode: true });
+    this._func = func;
+    this._reviver = reviver;
+  }
 
-function recursiveFlatten(prefix, data) {
-  let output = {};
-  Object.keys(data).forEach((key) => {
-    if (typeof data[key] === "object") {
-      output = {
-        ...output,
-        ...recursiveFlatten(prefix + key + ".", data[key]),
-      };
+  async _transform(file, _, callback) {
+    try {
+      let obj = JSON.parse(file.contents.toString(), this._reviver);
+      if (this._func) obj = this._func(obj, file.path);
+      for (const [outObj, dir] of Array.isArray(obj) ? obj : [[obj, ""]]) {
+        const outFile = file.clone({ contents: false });
+        outFile.contents = Buffer.from(JSON.stringify(outObj));
+        outFile.dirname += `/${dir}`;
+        this.push(outFile);
+      }
+      callback(null);
+    } catch (err) {
+      callback(err);
+    }
+  }
+}
+
+// Transform stream to merge Vinyl JSON files (buffer mode only).
+class MergeJSON extends Transform {
+  _objects = [];
+
+  constructor(stem, startObj = {}, reviver = null) {
+    super({ objectMode: true, allowHalfOpen: false });
+    this._stem = stem;
+    this._startObj = structuredClone(startObj);
+    this._reviver = reviver;
+  }
+
+  async _transform(file, _, callback) {
+    try {
+      this._objects.push(JSON.parse(file.contents.toString(), this._reviver));
+      if (!this._outFile) this._outFile = file.clone({ contents: false });
+      callback(null);
+    } catch (err) {
+      callback(err);
+    }
+  }
+
+  async _flush(callback) {
+    try {
+      const mergedObj = merge(this._startObj, ...this._objects);
+      this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
+      this._outFile.stem = this._stem;
+      callback(null, this._outFile);
+    } catch (err) {
+      callback(err);
+    }
+  }
+}
+
+// Utility to flatten object keys to single level using separator
+const flatten = (data, prefix = "", sep = ".") => {
+  const output = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (typeof value === "object") {
+      Object.assign(output, flatten(value, prefix + key + sep, sep));
     } else {
-      output[prefix + key] = data[key];
+      output[prefix + key] = value;
     }
-  });
+  }
   return output;
-}
+};
 
-function flatten(data) {
-  return recursiveFlatten("", data);
-}
-
-function emptyFilter(data) {
-  const newData = {};
-  Object.keys(data).forEach((key) => {
-    if (data[key]) {
-      if (typeof data[key] === "object") {
-        newData[key] = emptyFilter(data[key]);
-      } else {
-        newData[key] = data[key];
-      }
-    }
-  });
-  return newData;
-}
-
-function recursiveEmpty(data) {
-  const newData = {};
-  Object.keys(data).forEach((key) => {
-    if (data[key]) {
-      if (typeof data[key] === "object") {
-        newData[key] = recursiveEmpty(data[key]);
-      } else {
-        newData[key] = "TRANSLATED";
-      }
-    }
-  });
-  return newData;
-}
+// Filter functions that can be passed directly to JSON.parse()
+const emptyReviver = (_key, value) => value || undefined;
+const testReviver = (_key, value) =>
+  value && typeof value === "string" ? "TRANSLATED" : value;
 
 /**
  * Replace Lokalise key placeholders with their actual values.
@@ -95,60 +114,44 @@ function recursiveEmpty(data) {
  * be included in src/translations/en.json, but still be usable while
  * developing locally.
  *
- * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
+ * @link https://docs.lokalise.com/en/articles/1400528-key-referencing
  */
-const re_key_reference = /\[%key:([^%]+)%\]/;
-function lokaliseTransform(data, original, file) {
+const KEY_REFERENCE = /\[%key:([^%]+)%\]/;
+const lokaliseTransform = (data, path, original = data) => {
   const output = {};
-  Object.entries(data).forEach(([key, value]) => {
-    if (value instanceof Object) {
-      output[key] = lokaliseTransform(value, original, file);
+  for (const [key, value] of Object.entries(data)) {
+    if (typeof value === "object") {
+      output[key] = lokaliseTransform(value, path, original);
     } else {
-      output[key] = value.replace(re_key_reference, (_match, lokalise_key) => {
+      output[key] = value.replace(KEY_REFERENCE, (_match, lokalise_key) => {
         const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
-            throw Error(
-              `Invalid key placeholder ${lokalise_key} in ${file.path}`
-            );
+            throw Error(`Invalid key placeholder ${lokalise_key} in ${path}`);
           }
           return tr[k];
         }, original);
         if (typeof replace !== "string") {
-          throw Error(
-            `Invalid key placeholder ${lokalise_key} in ${file.path}`
-          );
+          throw Error(`Invalid key placeholder ${lokalise_key} in ${path}`);
         }
         return replace;
       });
     }
-  });
+  }
   return output;
-}
+};
 
-gulp.task("clean-translations", async () => deleteSync([workDir]));
+gulp.task("clean-translations", () => deleteAsync([workDir]));
 
-gulp.task("ensure-translations-build-dir", async () => {
-  mkdirSync(workDir, { recursive: true });
-});
+const makeWorkDir = () => mkdir(workDir, { recursive: true });
 
-gulp.task("create-test-metadata", () =>
-  env.isProdBuild()
-    ? Promise.resolve()
-    : writeFile(
-        workDir + "/testMetadata.json",
-        JSON.stringify({ test: { nativeName: "Test" } })
-      )
-);
-
-gulp.task("create-test-translation", () =>
+const createTestTranslation = () =>
   env.isProdBuild()
     ? Promise.resolve()
     : gulp
-        .src(path.join(paths.translations_src, "en.json"))
-        .pipe(transform((data, _file) => recursiveEmpty(data)))
+        .src(EN_SRC)
+        .pipe(new CustomJSON(null, testReviver))
         .pipe(rename("test.json"))
-        .pipe(gulp.dest(workDir))
-);
+        .pipe(gulp.dest(workDir));
 
 /**
  * This task will build a master translation file, to be used as the base for
@@ -159,279 +162,164 @@ gulp.task("create-test-translation", () =>
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", () => {
-  const src = [path.join(paths.translations_src, "en.json")];
+const createMasterTranslation = () =>
+  gulp
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
+    .pipe(new CustomJSON(lokaliseTransform))
+    .pipe(new MergeJSON("en"))
+    .pipe(gulp.dest(workDir));
 
-  if (mergeBackend) {
-    src.push(path.join(inBackendDir, "en.json"));
+const FRAGMENTS = ["base"];
+
+const toggleSupervisorFragment = async () => {
+  FRAGMENTS[0] = "supervisor";
+};
+
+const panelFragment = (fragment) =>
+  fragment !== "base" && fragment !== "supervisor";
+
+const HASHES = new Map();
+
+const createTranslations = async () => {
+  // Parse and store the master to avoid repeating this for each locale, then
+  // add the panel fragments when processing the app.
+  const enMaster = JSON.parse(await readFile(`${workDir}/en.json`, "utf-8"));
+  if (FRAGMENTS[0] === "base") {
+    FRAGMENTS.push(...Object.keys(enMaster.ui.panel));
   }
 
-  return gulp
-    .src(src)
-    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
+  // The downstream pipeline is setup first.  It hashes the merged data for
+  // each locale, then fragmentizes and flattens the data for final output.
+  const translationFiles = await glob([
+    `${inFrontendDir}/!(en).json`,
+    ...(env.isProdBuild() ? [] : [`${workDir}/test.json`]),
+  ]);
+  const hashStream = new Transform({
+    objectMode: true,
+    transform: async (file, _, callback) => {
+      const hash = env.isProdBuild()
+        ? createHash("md5").update(file.contents).digest("hex")
+        : "dev";
+      HASHES.set(file.stem, hash);
+      file.stem += `-${hash}`;
+      callback(null, file);
+    },
+  }).setMaxListeners(translationFiles.length + 1);
+  const fragmentsStream = hashStream
     .pipe(
-      merge({
-        fileName: "en.json",
-      })
-    )
-    .pipe(gulp.dest(fullDir));
-});
-
-gulp.task("build-merged-translations", () =>
-  gulp
-    .src([
-      inFrontendDir + "/*.json",
-      "!" + inFrontendDir + "/en.json",
-      ...(env.isProdBuild() ? [] : [workDir + "/test.json"]),
-    ])
-    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
-    .pipe(
-      flatmap((stream, file) => {
-        // For each language generate a merged json file. It begins with the master
-        // translation as a failsafe for untranslated strings, and merges all parent
-        // tags into one file for each specific subtag
-        //
-        // TODO: This is a naive interpretation of BCP47 that should be improved.
-        //       Will be OK for now as long as we don't have anything more complicated
-        //       than a base translation + region.
-        const tr = path.basename(file.history[0], ".json");
-        const subtags = tr.split("-");
-        const src = [fullDir + "/en.json"];
-        for (let i = 1; i <= subtags.length; i++) {
-          const lang = subtags.slice(0, i).join("-");
-          if (lang === "test") {
-            src.push(workDir + "/test.json");
-          } else if (lang !== "en") {
-            src.push(inFrontendDir + "/" + lang + ".json");
-            if (mergeBackend) {
-              src.push(inBackendDir + "/" + lang + ".json");
-            }
+      new CustomJSON((data) =>
+        FRAGMENTS.map((fragment) => {
+          switch (fragment) {
+            case "base":
+              // Remove the panels and supervisor to create the base translations
+              return [
+                flatten({
+                  ...data,
+                  ui: { ...data.ui, panel: undefined },
+                  supervisor: undefined,
+                }),
+                "",
+              ];
+            case "supervisor":
+              // Supervisor key is at the top level
+              return [flatten(data.supervisor), ""];
+            default:
+              // Create a fragment with only the given panel
+              return [
+                flatten(data.ui.panel[fragment], `ui.panel.${fragment}.`),
+                fragment,
+              ];
           }
-        }
-        return gulp
-          .src(src, { allowEmpty: true })
-          .pipe(transform((data) => emptyFilter(data)))
-          .pipe(
-            merge({
-              fileName: tr + ".json",
-            })
-          )
-          .pipe(gulp.dest(fullDir));
-      })
-    )
-);
-
-let taskName;
-
-const splitTasks = [];
-TRANSLATION_FRAGMENTS.forEach((fragment) => {
-  taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, () =>
-    // Return only the translations for this fragment.
-    gulp
-      .src(fullDir + "/*.json")
-      .pipe(
-        transform((data) => ({
-          ui: {
-            panel: {
-              [fragment]: data.ui.panel[fragment],
-            },
-          },
-        }))
-      )
-      .pipe(gulp.dest(workDir + "/" + fragment))
-  );
-  splitTasks.push(taskName);
-});
-
-taskName = "build-translation-core";
-gulp.task(taskName, () =>
-  // Remove the fragment translations from the core translation.
-  gulp
-    .src(fullDir + "/*.json")
-    .pipe(
-      transform((data, _file) => {
-        TRANSLATION_FRAGMENTS.forEach((fragment) => {
-          delete data.ui.panel[fragment];
-        });
-        delete data.supervisor;
-        return data;
-      })
-    )
-    .pipe(gulp.dest(coreDir))
-);
-
-splitTasks.push(taskName);
-
-gulp.task("build-flattened-translations", () =>
-  // Flatten the split versions of our translations, and move them into outDir
-  gulp
-    .src(
-      TRANSLATION_FRAGMENTS.map(
-        (fragment) => workDir + "/" + fragment + "/*.json"
-      ).concat(coreDir + "/*.json"),
-      { base: workDir }
-    )
-    .pipe(
-      transform((data) =>
-        // Polymer.AppLocalizeBehavior requires flattened json
-        flatten(data)
+        })
       )
     )
-    .pipe(
-      rename((filePath) => {
-        if (filePath.dirname === "core") {
-          filePath.dirname = "";
+    .pipe(gulp.dest(outDir));
+
+  // Send the English master downstream first, then for each other locale
+  // generate merged JSON data to continue piping. It begins with the master
+  // translation as a failsafe for untranslated strings, and merges all parent
+  // tags into one file for each specific subtag
+  //
+  // TODO: This is a naive interpretation of BCP47 that should be improved.
+  //       Will be OK for now as long as we don't have anything more complicated
+  // than a base translation + region.
+  gulp
+    .src(`${workDir}/en.json`)
+    .pipe(new PassThrough({ objectMode: true }))
+    .pipe(hashStream, { end: false });
+  const mergesFinished = [];
+  for (const translationFile of translationFiles) {
+    const locale = basename(translationFile, ".json");
+    const subtags = locale.split("-");
+    const mergeFiles = [];
+    for (let i = 1; i <= subtags.length; i++) {
+      const lang = subtags.slice(0, i).join("-");
+      if (lang === "test") {
+        mergeFiles.push(`${workDir}/test.json`);
+      } else if (lang !== "en") {
+        mergeFiles.push(`${inFrontendDir}/${lang}.json`);
+        if (mergeBackend) {
+          mergeFiles.push(`${inBackendDir}/${lang}.json`);
         }
-        // In dev we create the file with the fake hash in the filename
-        if (!env.isProdBuild()) {
-          filePath.basename += "-dev";
-        }
-      })
-    )
-    .pipe(gulp.dest(outDir))
-);
-
-const fingerprints = {};
-
-gulp.task("build-translation-fingerprints", () => {
-  // Fingerprint full file of each language
-  const files = readdirSync(fullDir);
-
-  for (let i = 0; i < files.length; i++) {
-    fingerprints[files[i].split(".")[0]] = {
-      // In dev we create fake hashes
-      hash: env.isProdBuild()
-        ? createHash("md5")
-            .update(readFileSync(path.join(fullDir, files[i]), "utf-8"))
-            .digest("hex")
-        : "dev",
-    };
-  }
-
-  // In dev we create the file with the fake hash in the filename
-  if (env.isProdBuild()) {
-    mapFiles(outDir, ".json", (filename) => {
-      const parsed = path.parse(filename);
-
-      // nl.json -> nl-<hash>.json
-      if (!(parsed.name in fingerprints)) {
-        throw new Error(`Unable to find hash for ${filename}`);
       }
-
-      renameSync(
-        filename,
-        `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
-          parsed.ext
-        }`
-      );
-    });
+    }
+    const mergeStream = gulp
+      .src(mergeFiles, { allowEmpty: true })
+      .pipe(new MergeJSON(locale, enMaster, emptyReviver));
+    mergesFinished.push(finished(mergeStream));
+    mergeStream.pipe(hashStream, { end: false });
   }
 
-  const stream = source("translationFingerprints.json");
-  stream.write(JSON.stringify(fingerprints));
-  process.nextTick(() => stream.end());
-  return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
-});
+  // Wait for all merges to finish, then it's safe to end writing to the
+  // downstream pipeline and wait for all fragments to finish writing.
+  await Promise.all(mergesFinished);
+  hashStream.end();
+  await finished(fragmentsStream);
+};
 
-gulp.task("build-translation-fragment-supervisor", () =>
+const writeTranslationMetaData = () =>
   gulp
-    .src(fullDir + "/*.json")
-    .pipe(transform((data) => data.supervisor))
+    .src([`${paths.translations_src}/translationMetadata.json`])
     .pipe(
-      rename((filePath) => {
-        // In dev we create the file with the fake hash in the filename
+      new CustomJSON((meta) => {
+        // Add the test translation in development.
         if (!env.isProdBuild()) {
-          filePath.basename += "-dev";
+          meta.test = { nativeName: "Test" };
         }
-      })
-    )
-    .pipe(gulp.dest(workDir + "/supervisor"))
-);
-
-gulp.task("build-translation-flatten-supervisor", () =>
-  gulp
-    .src(workDir + "/supervisor/*.json")
-    .pipe(
-      transform((data) =>
-        // Polymer.AppLocalizeBehavior requires flattened json
-        flatten(data)
-      )
-    )
-    .pipe(gulp.dest(outDir))
-);
-
-gulp.task("build-translation-write-metadata", () =>
-  gulp
-    .src([
-      path.join(paths.translations_src, "translationMetadata.json"),
-      ...(env.isProdBuild() ? [] : [workDir + "/testMetadata.json"]),
-      workDir + "/translationFingerprints.json",
-    ])
-    .pipe(merge({}))
-    .pipe(
-      transform((data) => {
-        const newData = {};
-        Object.entries(data).forEach(([key, value]) => {
-          // Filter out translations without native name.
-          if (value.nativeName) {
-            newData[key] = value;
-          } else {
+        // Filter out locales without a native name, and add the hashes.
+        for (const locale of Object.keys(meta)) {
+          if (!meta[locale].nativeName) {
+            meta[locale] = undefined;
             console.warn(
-              `Skipping language ${key}. Native name was not translated.`
+              `Skipping locale ${locale} because native name is not translated.`
             );
+          } else {
+            meta[locale].hash = HASHES.get(locale);
           }
-        });
-        return newData;
+        }
+        return {
+          fragments: FRAGMENTS.filter(panelFragment),
+          translations: meta,
+        };
       })
     )
-    .pipe(
-      transform((data) => ({
-        fragments: TRANSLATION_FRAGMENTS,
-        translations: data,
-      }))
-    )
-    .pipe(rename("translationMetadata.json"))
-    .pipe(gulp.dest(workDir))
-);
-
-gulp.task(
-  "create-translations",
-  gulp.series(
-    gulp.parallel("create-test-metadata", "create-test-translation"),
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations"
-  )
-);
+    .pipe(gulp.dest(workDir));
 
 gulp.task(
   "build-translations",
   gulp.series(
     gulp.parallel(
       "fetch-nightly-translations",
-      gulp.series("clean-translations", "ensure-translations-build-dir")
+      gulp.series("clean-translations", makeWorkDir)
     ),
-    "create-translations",
-    "build-translation-fingerprints",
-    "build-translation-write-metadata"
+    createTestTranslation,
+    createMasterTranslation,
+    createTranslations,
+    writeTranslationMetaData
   )
 );
 
 gulp.task(
   "build-supervisor-translations",
-  gulp.series(
-    gulp.parallel(
-      "fetch-nightly-translations",
-      gulp.series("clean-translations", "ensure-translations-build-dir")
-    ),
-    gulp.parallel("create-test-metadata", "create-test-translation"),
-    "build-master-translation",
-    "build-merged-translations",
-    "build-translation-fragment-supervisor",
-    "build-translation-flatten-supervisor",
-    "build-translation-fingerprints",
-    "build-translation-write-metadata"
-  )
+  gulp.series(toggleSupervisorFragment, "build-translations")
 );

build-scripts/gulp/webpack.js

@@ -99,7 +99,7 @@ gulp.task("webpack-watch-app", () => {
   ).watch({ poll: isWsl }, doneHandler());
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("create-translations", "copy-translations-app")
+    gulp.series("build-translations", "copy-translations-app")
   );
 });
 

build-scripts/util.cjs

@@ -1,16 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-
-// Helper function to map recursively over files in a folder and it's subfolders
-module.exports.mapFiles = function mapFiles(startPath, filter, mapFunc) {
-  const files = fs.readdirSync(startPath);
-  for (let i = 0; i < files.length; i++) {
-    const filename = path.join(startPath, files[i]);
-    const stat = fs.lstatSync(filename);
-    if (stat.isDirectory()) {
-      mapFiles(filename, filter, mapFunc);
-    } else if (filename.indexOf(filter) >= 0) {
-      mapFunc(filename);
-    }
-  }
-};

build-scripts/webpack.cjs

@@ -10,6 +10,7 @@ const WebpackBar = require("webpackbar");
 const {
   TransformAsyncModulesPlugin,
 } = require("transform-async-modules-webpack-plugin");
+const { dependencies } = require("../package.json");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -156,11 +157,15 @@ const createWebpackConfig = ({
           transform: (stats) => JSON.stringify(filterStats(stats)),
         }),
       !latestBuild &&
-        new TransformAsyncModulesPlugin({ browserslistEnv: "legacy" }),
+        new TransformAsyncModulesPlugin({
+          browserslistEnv: "legacy",
+          runtime: { version: dependencies["@babel/runtime"] },
+        }),
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
       alias: {
+        "lit/static-html$": "lit/static-html.js",
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
         "lit/directives/until$": "lit/directives/until.js",

cast/src/receiver/layout/hc-launch-screen.ts

@@ -28,7 +28,7 @@ class HcLaunchScreen extends LitElement {
       :host {
         display: block;
         height: 100vh;
-        background-color: white;
+        background-color: #f2f4f9;
         font-size: 24px;
       }
       .container {
@@ -43,6 +43,9 @@ class HcLaunchScreen extends LitElement {
         max-width: 80%;
         object-fit: cover;
       }
+      .status {
+        color: #1d2126;
+      }
     `;
   }
 }

cast/src/receiver/layout/hc-main.ts

@@ -270,7 +270,7 @@ export class HcMain extends HassElement {
     }
 
     this._error = undefined;
-    if (msg.urlPath === "lovelace") {
+    if (msg.urlPath === "lovelace" || msg.urlPath === undefined) {
       msg.urlPath = null;
     }
     this._lovelacePath = msg.viewPath;

demo/src/configs/demo-configs.ts

@@ -4,6 +4,7 @@ import { energyEntities } from "../stubs/entities";
 import { DemoConfig } from "./types";
 
 export const demoConfigs: Array<() => Promise<DemoConfig>> = [
+  () => import("./sections").then((mod) => mod.demoSections),
   () => import("./arsaboo").then((mod) => mod.demoArsaboo),
   () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
   () => import("./kernehed").then((mod) => mod.demoKernehed),

demo/src/configs/sections/description.ts

@@ -0,0 +1,16 @@
+import { html } from "lit";
+import { DemoConfig } from "../types";
+
+export const demoLovelaceDescription: DemoConfig["description"] = (
+  localize
+) => html`
+  <p>
+    ${localize("ui.panel.page-demo.config.sections.description", {
+      blog_post: html`<a
+        href="https://www.home-assistant.io/blog/2024/03/04/dashboard-chapter-1/"
+        target="_blank"
+        >${localize("ui.panel.page-demo.config.sections.description_blog_post")}
+      </a>`,
+    })}
+  </p>
+`;

demo/src/configs/sections/entities.ts

@@ -0,0 +1,474 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
+import { DemoConfig } from "../types";
+
+export const demoEntitiesSections: DemoConfig["entities"] = () =>
+  convertEntities({
+    "cover.living_room_garden_shutter": {
+      entity_id: "cover.living_room_garden_shutter",
+      state: "open",
+      attributes: {
+        current_position: 100,
+        device_class: "shutter",
+        friendly_name: "Living room garden shutter",
+        supported_features: 15,
+      },
+    },
+    "cover.living_room_graveyard_shutter": {
+      entity_id: "cover.living_room_graveyard_shutter",
+      state: "open",
+      attributes: {
+        current_position: 100,
+        device_class: "shutter",
+        friendly_name: "Living room graveyard shutter",
+        supported_features: 15,
+      },
+    },
+    "cover.living_room_left_shutter": {
+      entity_id: "cover.living_room_left_shutter",
+      state: "open",
+      attributes: {
+        current_position: 100,
+        device_class: "shutter",
+        friendly_name: "Living room left shutter",
+        supported_features: 15,
+      },
+    },
+    "cover.living_room_right_shutter": {
+      entity_id: "cover.living_room_right_shutter",
+      state: "open",
+      attributes: {
+        current_position: 100,
+        device_class: "shutter",
+        friendly_name: "Living room right shutter",
+        supported_features: 15,
+      },
+    },
+    "light.floor_lamp": {
+      entity_id: "light.floor_lamp",
+      state: "on",
+      attributes: {
+        min_color_temp_kelvin: 2000,
+        max_color_temp_kelvin: 6535,
+        min_mireds: 153,
+        max_mireds: 500,
+        supported_color_modes: ["color_temp", "xy"],
+        color_mode: "color_temp",
+        brightness: 178,
+        color_temp_kelvin: 2583,
+        color_temp: 387,
+        hs_color: [28.664, 69.597],
+        rgb_color: [255, 162, 77],
+        xy_color: [0.538, 0.389],
+        icon: "mdi:floor-lamp",
+        friendly_name: "Floor lamp",
+        supported_features: 44,
+      },
+    },
+    "light.living_room_spotlights": {
+      entity_id: "light.living_room_spotlights",
+      state: "on",
+      attributes: {
+        supported_color_modes: ["brightness"],
+        color_mode: "brightness",
+        brightness: 126,
+        icon: "mdi:ceiling-light-multiple",
+        friendly_name: "Living room spotlights",
+        supported_features: 32,
+      },
+    },
+    "light.bar_lamp": {
+      entity_id: "light.bar_lamp",
+      state: "on",
+      attributes: {
+        min_color_temp_kelvin: 2202,
+        max_color_temp_kelvin: 4504,
+        min_mireds: 222,
+        max_mireds: 454,
+        effect_list: ["None", "candle"],
+        supported_color_modes: ["color_temp"],
+        effect: null,
+        color_mode: null,
+        brightness: null,
+        color_temp_kelvin: null,
+        color_temp: null,
+        hs_color: null,
+        rgb_color: null,
+        xy_color: null,
+        mode: "normal",
+        dynamics: "none",
+        icon: "mdi:lightbulb-variant",
+        friendly_name: "Bar lamp",
+        supported_features: 44,
+      },
+    },
+    "sensor.living_room_temperature": {
+      entity_id: "sensor.living_room_temperature",
+      state: "22.8",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "°C",
+        device_class: "temperature",
+        friendly_name: "Living room Temperature",
+      },
+    },
+    "media_player.living_room_nest_mini": {
+      entity_id: "media_player.living_room_nest_mini",
+      state: "off",
+      attributes: {
+        device_class: "speaker",
+        friendly_name: "Living room Nest Mini",
+        supported_features: 152461,
+      },
+    },
+    "cover.kitchen_shutter": {
+      entity_id: "cover.kitchen_shutter",
+      state: "open",
+      attributes: {
+        current_position: 100,
+        device_class: "shutter",
+        friendly_name: "Kitchen shutter ",
+        supported_features: 15,
+      },
+    },
+    "light.kitchen_spotlights": {
+      entity_id: "light.kitchen_spotlights",
+      state: "off",
+      attributes: {
+        supported_color_modes: ["brightness"],
+        color_mode: null,
+        brightness: null,
+        icon: "mdi:ceiling-light-multiple",
+        friendly_name: "Kitchen spotlights ",
+        supported_features: 32,
+      },
+    },
+    "light.worktop_spotlights": {
+      entity_id: "light.worktop_spotlights",
+      state: "off",
+      attributes: {
+        supported_color_modes: ["brightness"],
+        color_mode: null,
+        brightness: null,
+        icon: "mdi:ceiling-light-multiple",
+        friendly_name: "Worktop spotlights ",
+        supported_features: 32,
+      },
+    },
+    "binary_sensor.fridge_door": {
+      entity_id: "binary_sensor.fridge_door",
+      state: "off",
+      attributes: {
+        device_class: "door",
+        icon: "mdi:fridge",
+        friendly_name: "Fridge door",
+      },
+    },
+    "media_player.kitchen_nest_audio": {
+      entity_id: "media_player.kitchen_nest_audio",
+      state: "on",
+      attributes: {
+        device_class: "speaker",
+        friendly_name: "Kitchen Nest Audio",
+        supported_features: 152461,
+      },
+    },
+    "binary_sensor.tesla_wall_connector_vehicle_connected": {
+      entity_id: "binary_sensor.tesla_wall_connector_vehicle_connected",
+      state: "off",
+      attributes: {
+        device_class: "plug",
+        friendly_name: "Wall Connector Vehicle connected",
+      },
+    },
+    "sensor.tesla_wall_connector_session_energy": {
+      entity_id: "sensor.tesla_wall_connector_session_energy",
+      state: "16.3",
+      attributes: {
+        state_class: "total_increasing",
+        unit_of_measurement: "kWh",
+        device_class: "energy",
+        friendly_name: "Tesla Wall Connector Session energy",
+      },
+    },
+    "sensor.electric_meter_power": {
+      entity_id: "sensor.electric_meter_power",
+      state: "797.86",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "W",
+        device_class: "power",
+        icon: "mdi:meter-electric",
+        friendly_name: "Electric meter Power",
+      },
+    },
+    "sensor.eletric_meter_voltage": {
+      entity_id: "sensor.eletric_meter_voltage",
+      state: "232.19",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "V",
+        device_class: "voltage",
+        friendly_name: "Electric meter voltage",
+      },
+    },
+    "sensor.electricity_maps_grid_fossil_fuel_percentage": {
+      entity_id: "sensor.electricity_maps_grid_fossil_fuel_percentage",
+      state: "9.84",
+      attributes: {
+        state_class: "measurement",
+        country_code: "FR",
+        unit_of_measurement: "%",
+        attribution: "Data provided by Electricity Maps",
+        icon: "mdi:barrel",
+        friendly_name: "Electricity Maps Grid fossil fuel percentage",
+      },
+    },
+    "sensor.electricity_maps_co2_intensity": {
+      entity_id: "sensor.electricity_maps_co2_intensity",
+      state: "62.0",
+      attributes: {
+        state_class: "measurement",
+        country_code: "FR",
+        unit_of_measurement: "gCO2eq/kWh",
+        attribution: "Data provided by Electricity Maps",
+        friendly_name: "Electricity Maps CO2 intensity",
+        icon: "mdi:molecule-co2",
+      },
+    },
+    "sun.sun": {
+      entity_id: "sun.sun",
+      state: "above_horizon",
+      attributes: {
+        next_dawn: "2024-03-05T05:50:21.964405+00:00",
+        next_dusk: "2024-03-04T18:08:54.311334+00:00",
+        next_midnight: "2024-03-05T00:00:00+00:00",
+        next_noon: "2024-03-05T12:00:05+00:00",
+        next_rising: "2024-03-05T06:23:42.739159+00:00",
+        next_setting: "2024-03-04T17:35:26.271171+00:00",
+        elevation: 30.38,
+        azimuth: 204.42,
+        rising: false,
+        friendly_name: "Sun",
+      },
+    },
+    "sensor.rain": {
+      entity_id: "sensor.moon_phase",
+      state: "7.2",
+      attributes: {
+        state_class: "total_increasing",
+        unit_of_measurement: "mm",
+        device_class: "precipitation",
+        friendly_name: "Rain",
+      },
+    },
+    "climate.ground_floor": {
+      entity_id: "climate.ground_floor",
+      state: "heat",
+      attributes: {
+        hvac_modes: ["auto", "heat", "off"],
+        min_temp: 7,
+        max_temp: 35,
+        preset_modes: [
+          "comfort",
+          "away",
+          "eco",
+          "frost_protection",
+          "external",
+          "home",
+        ],
+        current_temperature: 20.8,
+        temperature: 21,
+        preset_mode: "comfort",
+        icon: "mdi:home-floor-0",
+        friendly_name: "Ground floor Thermostat",
+        supported_features: 401,
+      },
+    },
+    "climate.first_floor": {
+      entity_id: "climate.first_floor",
+      state: "heat",
+      attributes: {
+        hvac_modes: ["auto", "heat", "off"],
+        min_temp: 7,
+        max_temp: 35,
+        preset_modes: [
+          "comfort",
+          "away",
+          "eco",
+          "frost_protection",
+          "external",
+          "home",
+        ],
+        current_temperature: 21.7,
+        temperature: 21,
+        preset_mode: "comfort",
+        icon: "mdi:home-floor-1",
+        friendly_name: "First floor Thermostat",
+        supported_features: 401,
+      },
+    },
+    "cover.study_shutter": {
+      entity_id: "cover.study_shutter",
+      state: "open",
+      attributes: {
+        current_position: 100,
+        device_class: "shutter",
+        friendly_name: "Study shutter",
+        supported_features: 15,
+      },
+    },
+    "light.study_spotlights": {
+      entity_id: "light.study_spotlights",
+      state: "off",
+      attributes: {
+        supported_color_modes: ["brightness"],
+        color_mode: null,
+        brightness: null,
+        icon: "mdi:ceiling-light-multiple",
+        friendly_name: "Study spotlights",
+        supported_features: 32,
+      },
+    },
+    "media_player.study_nest_hub": {
+      entity_id: "media_player.study_nest_hub",
+      state: "off",
+      attributes: {
+        friendly_name: "Study Nest Hub",
+        supported_features: 152461,
+      },
+    },
+    "sensor.standing_desk_height": {
+      entity_id: "sensor.standing_desk_height",
+      state: "72",
+      attributes: {
+        unit_of_measurement: "cm",
+        icon: "mdi:tape-measure",
+        friendly_name: "Standing desk Height",
+      },
+    },
+    "light.outdoor_light": {
+      entity_id: "light.outdoor_light",
+      state: "on",
+      attributes: {
+        supported_color_modes: ["brightness"],
+        color_mode: null,
+        brightness: 255,
+        icon: "mdi:outdoor-lamp",
+        friendly_name: "Outdoor light",
+        supported_features: 32,
+      },
+    },
+    "light.flood_light": {
+      entity_id: "light.flood_light",
+      state: "off",
+      attributes: {
+        effect_list: ["None", "candle"],
+        supported_color_modes: ["brightness"],
+        effect: null,
+        color_mode: null,
+        brightness: null,
+        mode: "normal",
+        dynamics: "none",
+        icon: "mdi:light-flood-down",
+        friendly_name: "Flood light",
+        supported_features: 44,
+      },
+    },
+    "sensor.outdoor_motion_sensor_temperature": {
+      entity_id: "sensor.outdoor_motion_sensor_temperature",
+      state: "10.2",
+      attributes: {
+        state_class: "measurement",
+        unit_of_measurement: "°C",
+        device_class: "temperature",
+        friendly_name: "Outdoor motion sensor Temperature",
+      },
+    },
+    "binary_sensor.outdoor_motion_sensor_motion": {
+      entity_id: "binary_sensor.outdoor_motion_sensor_motion",
+      state: "off",
+      attributes: {
+        device_class: "motion",
+        friendly_name: "Outdoor motion sensor Motion",
+      },
+    },
+    "sensor.outdoor_motion_sensor_illuminance": {
+      entity_id: "sensor.outdoor_motion_sensor_illuminance",
+      state: "555",
+      attributes: {
+        state_class: "measurement",
+        light_level: 27444,
+        unit_of_measurement: "lx",
+        device_class: "illuminance",
+        friendly_name: "Outdoor motion sensor Illuminance",
+      },
+    },
+    "automation.home_assistant_auto_update": {
+      entity_id: "automation.home_assistant_auto_update",
+      state: "off",
+      attributes: {
+        id: "1700669321947",
+        last_triggered: "2024-02-29T18:02:05.343139+00:00",
+        mode: "queued",
+        current: 0,
+        max: 50,
+        icon: "mdi:auto-mode",
+        friendly_name: "Home Assistant Auto-update",
+      },
+    },
+    "update.home_assistant_operating_system_update": {
+      entity_id: "update.home_assistant_operating_system_update",
+      state: "off",
+      attributes: {
+        auto_update: false,
+        installed_version: "12.1",
+        in_progress: false,
+        latest_version: "12.1",
+        release_summary: null,
+        release_url:
+          "https://github.com/home-assistant/operating-system/commits/dev",
+        skipped_version: null,
+        title: "Home Assistant Operating System",
+        entity_picture:
+          "https://brands.home-assistant.io/homeassistant/icon.png",
+        friendly_name: "Home Assistant Operating System Update",
+        supported_features: 3,
+      },
+    },
+    "update.home_assistant_supervisor_update": {
+      entity_id: "update.home_assistant_supervisor_update",
+      state: "off",
+      attributes: {
+        auto_update: true,
+        installed_version: "2024.02.2",
+        in_progress: false,
+        latest_version: "2024.02.2",
+        release_summary: null,
+        release_url:
+          "https://github.com/home-assistant/supervisor/commits/main",
+        skipped_version: null,
+        title: "Home Assistant Supervisor",
+        entity_picture: "https://brands.home-assistant.io/hassio/icon.png",
+        friendly_name: "Home Assistant Supervisor Update",
+        supported_features: 1,
+      },
+    },
+    "update.home_assistant_core_update": {
+      entity_id: "update.home_assistant_supervisor_update",
+      state: "off",
+      attributes: {
+        auto_update: false,
+        installed_version: "2024.4.0",
+        in_progress: false,
+        latest_version: "2024.4.0",
+        release_summary: null,
+        release_url: "https://github.com/home-assistant/core/commits/dev",
+        skipped_version: null,
+        title: "Home Assistant Core",
+        entity_picture:
+          "https://brands.home-assistant.io/homeassistant/icon.png",
+        friendly_name: "Home Assistant Core Update",
+        supported_features: 11,
+      },
+    },
+  });

demo/src/configs/sections/index.ts

@@ -0,0 +1,14 @@
+import { DemoConfig } from "../types";
+import { demoLovelaceDescription } from "./description";
+import { demoEntitiesSections } from "./entities";
+import { demoLovelaceSections } from "./lovelace";
+
+export const demoSections: DemoConfig = {
+  authorName: "Home Assistant",
+  authorUrl: "https://github.com/home-assistant/frontend/",
+  name: "Home Demo",
+  description: demoLovelaceDescription,
+  lovelace: demoLovelaceSections,
+  entities: demoEntitiesSections,
+  theme: () => ({}),
+};

demo/src/configs/sections/lovelace.ts

@@ -0,0 +1,281 @@
+import { DemoConfig } from "../types";
+
+export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
+  title: "Home Assistant Demo",
+  views: [
+    {
+      type: "sections",
+      title: "Demo",
+      path: "home",
+      icon: "mdi:home-assistant",
+      sections: [
+        {
+          title: "Welcome 👋",
+          cards: [{ type: "custom:ha-demo-card" }],
+        },
+        {
+          cards: [
+            {
+              type: "tile",
+              entity: "cover.living_room_garden_shutter",
+              name: "Garden",
+            },
+            {
+              type: "tile",
+              entity: "cover.living_room_graveyard_shutter",
+              name: "Rear",
+            },
+            {
+              type: "tile",
+              entity: "cover.living_room_left_shutter",
+              name: "Left",
+            },
+            {
+              type: "tile",
+              entity: "cover.living_room_right_shutter",
+              name: "Right",
+            },
+            {
+              type: "tile",
+              entity: "light.floor_lamp",
+            },
+            {
+              type: "tile",
+              entity: "light.living_room_spotlights",
+              name: "Spotlights",
+              features: [
+                {
+                  type: "light-brightness",
+                },
+              ],
+            },
+            {
+              type: "tile",
+              entity: "light.bar_lamp",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.living_room_temperature",
+              detail: 1,
+              name: "Temperature",
+            },
+            {
+              type: "tile",
+              entity: "media_player.living_room_nest_mini",
+              name: "Nest Mini",
+            },
+          ],
+          title: "🛋️ Living room ",
+        },
+        {
+          type: "grid",
+          cards: [
+            {
+              type: "tile",
+              entity: "cover.kitchen_shutter",
+              name: "Shutter",
+            },
+            {
+              type: "tile",
+              entity: "light.kitchen_spotlights",
+              name: "Spotlights",
+              features: [
+                {
+                  type: "light-brightness",
+                },
+              ],
+            },
+            {
+              type: "tile",
+              entity: "light.worktop_spotlights",
+              name: "Worktop",
+            },
+            {
+              type: "tile",
+              entity: "binary_sensor.fridge_door",
+              name: "Fridge",
+            },
+            {
+              type: "tile",
+              entity: "media_player.kitchen_nest_audio",
+              name: "Nest Audio",
+            },
+          ],
+          title: "👩‍🍳 Kitchen",
+        },
+        {
+          type: "grid",
+          cards: [
+            {
+              type: "tile",
+              entity: "binary_sensor.tesla_wall_connector_vehicle_connected",
+              name: "EV",
+              icon: "mdi:car",
+            },
+            {
+              type: "tile",
+              entity: "sensor.tesla_wall_connector_session_energy",
+              name: "Last charge",
+              color: "green",
+            },
+            {
+              type: "tile",
+              entity: "sensor.electric_meter_power",
+              color: "deep-orange",
+              name: "Home power",
+            },
+            {
+              type: "tile",
+              entity: "sensor.eletric_meter_voltage",
+              name: "Voltage",
+              color: "deep-orange",
+            },
+            {
+              type: "tile",
+              entity: "sensor.electricity_maps_grid_fossil_fuel_percentage",
+              name: "Fossil fuel",
+              color: "brown",
+            },
+            {
+              type: "tile",
+              entity: "sensor.electricity_maps_co2_intensity",
+              name: "CO2 Intensity",
+              color: "dark-grey",
+            },
+          ],
+          title: "⚡️ Energy",
+        },
+        {
+          type: "grid",
+          cards: [
+            {
+              type: "tile",
+              entity: "sun.sun",
+            },
+            {
+              type: "tile",
+              entity: "sensor.rain",
+              color: "blue",
+            },
+            {
+              features: [
+                {
+                  type: "target-temperature",
+                },
+              ],
+              type: "tile",
+              name: "Downstairs",
+              entity: "climate.ground_floor",
+              state_content: ["preset_mode", "current_temperature"],
+            },
+            {
+              features: [
+                {
+                  type: "target-temperature",
+                },
+              ],
+              type: "tile",
+              name: "Upstairs",
+              entity: "climate.first_floor",
+              state_content: ["preset_mode", "current_temperature"],
+            },
+          ],
+          title: "🌤️ Climate",
+        },
+        {
+          type: "grid",
+          cards: [
+            {
+              type: "tile",
+              entity: "cover.study_shutter",
+              name: "Shutter",
+            },
+            {
+              type: "tile",
+              entity: "light.study_spotlights",
+              name: "Spotlights",
+            },
+            {
+              type: "tile",
+              entity: "media_player.study_nest_hub",
+              name: "Nest Hub",
+            },
+            {
+              type: "tile",
+              entity: "sensor.standing_desk_height",
+              name: "Desk",
+              color: "brown",
+              icon: "mdi:desk",
+            },
+          ],
+          title: "🧑‍💻 Study",
+        },
+        {
+          type: "grid",
+          cards: [
+            {
+              type: "tile",
+              entity: "light.outdoor_light",
+              name: "Door light",
+            },
+            {
+              type: "tile",
+              entity: "light.flood_light",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.outdoor_motion_sensor_temperature",
+              detail: 1,
+              name: "Temperature",
+            },
+            {
+              type: "tile",
+              entity: "binary_sensor.outdoor_motion_sensor_motion",
+              name: "Motion",
+              color: "blue",
+            },
+            {
+              type: "tile",
+              entity: "sensor.outdoor_motion_sensor_illuminance",
+              color: "amber",
+              name: "Illuminance",
+            },
+          ],
+          title: "🌳 Outdoor",
+        },
+        {
+          type: "grid",
+          cards: [
+            {
+              type: "tile",
+              entity: "automation.home_assistant_auto_update",
+              name: "Auto-update",
+              color: "green",
+            },
+            {
+              type: "tile",
+              entity: "update.home_assistant_operating_system_update",
+              name: "OS",
+              icon: "mdi:home-assistant",
+            },
+            {
+              type: "tile",
+              entity: "update.home_assistant_supervisor_update",
+              icon: "mdi:home-assistant",
+              name: "Supervisor",
+            },
+            {
+              type: "tile",
+              entity: "update.home_assistant_core_update",
+              name: "Core",
+              icon: "mdi:home-assistant",
+            },
+          ],
+          title: "🎉 Updates",
+        },
+      ],
+    },
+  ],
+});

demo/src/configs/types.ts

@@ -1,3 +1,4 @@
+import { TemplateResult } from "lit";
 import { LocalizeFunc } from "../../../src/common/translations/localize";
 import { LovelaceConfig } from "../../../src/data/lovelace/config/types";
 import { Entity } from "../../../src/fake_data/entity";
@@ -7,6 +8,9 @@ export interface DemoConfig {
   name: string;
   authorName: string;
   authorUrl: string;
+  description?:
+    | string
+    | ((localize: LocalizeFunc) => string | TemplateResult<1>);
   lovelace: (localize: LocalizeFunc) => LovelaceConfig;
   entities: (localize: LocalizeFunc) => Entity[];
   theme: () => Record<string, string> | null;

demo/src/custom-cards/ha-demo-card.ts

@@ -39,32 +39,51 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`<ha-circular-progress
-                  indeterminate
-                ></ha-circular-progress>`
+              ? html`
+                  <ha-circular-progress indeterminate></ha-circular-progress>
+                `
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`
                       ${conf.name}
                       <small>
-                        <a target="_blank" href=${conf.authorUrl}>
-                          ${this.hass.localize(
-                            "ui.panel.page-demo.cards.demo.demo_by",
-                            { name: conf.authorName }
-                          )}
-                        </a>
+                        ${this.hass.localize(
+                          "ui.panel.page-demo.cards.demo.demo_by",
+                          {
+                            name: html`
+                              <a target="_blank" href=${conf.authorUrl}>
+                                ${conf.authorName}
+                              </a>
+                            `,
+                          }
+                        )}
                       </small>
                     `
                   ),
                   ""
                 )}
           </div>
+
           <mwc-button @click=${this._nextConfig} .disabled=${this._switching}>
             ${this.hass.localize("ui.panel.page-demo.cards.demo.next_demo")}
           </mwc-button>
         </div>
-        <div class="content small-hidden">
-          ${this.hass.localize("ui.panel.page-demo.cards.demo.introduction")}
+        <div class="content">
+          <p class="small-hidden">
+            ${this.hass.localize("ui.panel.page-demo.cards.demo.introduction")}
+          </p>
+          ${until(
+            selectedDemoConfig.then((conf) => {
+              if (typeof conf.description === "function") {
+                return conf.description(this.hass.localize);
+              }
+              if (conf.description) {
+                return html`<p>${conf.description}</p>`;
+              }
+              return nothing;
+            }),
+            nothing
+          )}
         </div>
         <div class="actions small-hidden">
           <a href="https://www.home-assistant.io" target="_blank">
@@ -108,6 +127,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
       css`
         a {
           color: var(--primary-color);
+          display: inline-block;
         }
 
         .actions a {
@@ -115,7 +135,11 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         }
 
         .content {
-          padding: 16px;
+          padding: 0 16px;
+        }
+
+        .content p {
+          margin: 16px 0;
         }
 
         .picker {
@@ -138,9 +162,8 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         }
 
         .actions {
-          padding-left: 8px;
+          padding: 0px 8px 4px 8px;
         }
-
         @media only screen and (max-width: 500px) {
           .small-hidden {
             display: none;

demo/src/ha-demo.ts

@@ -10,6 +10,7 @@ import {
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
+import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { mockConfigEntries } from "./stubs/config_entries";
 import { mockEnergy } from "./stubs/energy";
@@ -23,10 +24,10 @@ import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
 import { mockRecorder } from "./stubs/recorder";
-import { mockTodo } from "./stubs/todo";
 import { mockSensor } from "./stubs/sensor";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
+import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";
 
 @customElement("ha-demo")
@@ -62,6 +63,7 @@ export class HaDemo extends HomeAssistantAppEl {
     mockEnergy(hass);
     mockPersistentNotification(hass);
     mockConfigEntries(hass);
+    mockAreaRegistry(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",
@@ -72,6 +74,8 @@ export class HaDemo extends HomeAssistantAppEl {
         id: "sensor.co2_intensity",
         name: null,
         icon: null,
+        labels: [],
+        categories: {},
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,
@@ -88,6 +92,8 @@ export class HaDemo extends HomeAssistantAppEl {
         id: "sensor.co2_intensity",
         name: null,
         icon: null,
+        labels: [],
+        categories: {},
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,

demo/src/stubs/area_registry.ts

@@ -4,4 +4,11 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAreaRegistry = (
   hass: MockHomeAssistant,
   data: AreaRegistryEntry[] = []
-) => hass.mockWS("config/area_registry/list", () => data);
+) => {
+  hass.mockWS("config/area_registry/list", () => data);
+  const areas = {};
+  data.forEach((area) => {
+    areas[area.area_id] = area;
+  });
+  hass.updateHass({ areas });
+};

demo/src/stubs/config_entries.ts

@@ -10,6 +10,7 @@ export const mockConfigEntries = (hass: MockHomeAssistant) => {
     supports_options: false,
     supports_remove_device: false,
     supports_unload: true,
+    supports_reconfigure: true,
     pref_disable_new_entities: false,
     pref_disable_polling: false,
     disabled_by: null,

demo/src/stubs/device_registry.ts

@@ -4,4 +4,11 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockDeviceRegistry = (
   hass: MockHomeAssistant,
   data: DeviceRegistryEntry[] = []
-) => hass.mockWS("config/device_registry/list", () => data);
+) => {
+  hass.mockWS("config/device_registry/list", () => data);
+  const devices = {};
+  data.forEach((device) => {
+    devices[device.id] = device;
+  });
+  hass.updateHass({ devices });
+};

demo/src/stubs/energy.ts

@@ -1,4 +1,4 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
+import { format, startOfToday, startOfTomorrow } from "date-fns";
 import {
   EnergyInfo,
   EnergyPreferences,

demo/src/stubs/floor_registry.ts

@@ -0,0 +1,7 @@
+import { FloorRegistryEntry } from "../../../src/data/floor_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockFloorRegistry = (
+  hass: MockHomeAssistant,
+  data: FloorRegistryEntry[] = []
+) => hass.mockWS("config/floor_registry/list", () => data);

demo/src/stubs/label_registry.ts

@@ -0,0 +1,7 @@
+import { LabelRegistryEntry } from "../../../src/data/label_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockLabelRegistry = (
+  hass: MockHomeAssistant,
+  data: LabelRegistryEntry[] = []
+) => hass.mockWS("config/label_registry/list", () => data);

gallery/src/data/traces/basic_trace.ts

@@ -17,6 +17,7 @@ export const basicTrace: DemoTrace = {
         {
           path: "trigger/0",
           timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
         },
       ],
       "condition/0": [

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

@@ -17,6 +17,7 @@ export const motionLightTrace: DemoTrace = {
         {
           path: "trigger/0",
           timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
         },
       ],
       "action/0": [

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

@@ -64,6 +64,12 @@ const ACTIONS = [
       entity_id: "input_boolean.toggle_4",
     },
   },
+  {
+    sequence: [
+      { scene: "scene.kitchen_morning" },
+      { service: "light.turn_off", target: { entity_id: "light.kitchen" } },
+    ],
+  },
   {
     parallel: [
       { scene: "scene.kitchen_morning" },
@@ -136,7 +142,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         <div class="action">
           <span>
             ${this._action
-              ? describeAction(this.hass, [], this._action)
+              ? describeAction(this.hass, [], [], [], this._action)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -149,7 +155,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
-              <span>${describeAction(this.hass, [], conf as any)}</span>
+              <span>${describeAction(this.hass, [], [], [], conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `

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

@@ -21,10 +21,10 @@ const ENTITIES = [
   }),
 ];
 
-const conditions = [
-  { condition: "and" },
-  { condition: "not" },
-  { condition: "or" },
+const conditions: Condition[] = [
+  { condition: "and", conditions: [] },
+  { condition: "not", conditions: [] },
+  { condition: "or", conditions: [] },
   { condition: "state", entity_id: "light.kitchen", state: "on" },
   {
     condition: "numeric_state",
@@ -34,11 +34,11 @@ const conditions = [
     above: 20,
   },
   { condition: "sun", after: "sunset" },
-  { condition: "sun", after: "sunrise", offset: "-01:00" },
+  { condition: "sun", after: "sunrise", before_offset: 3600 },
   { condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
   { condition: "trigger", id: "motion" },
   { condition: "time" },
-  { condition: "template" },
+  { condition: "template", value_template: "" },
 ];
 
 const initialCondition: Condition = {

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

@@ -20,6 +20,7 @@ import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
 import { Action } from "../../../../src/data/script";
 import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
 import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
 import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
@@ -39,6 +40,7 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "If-Then", actions: [HaIfAction.defaultConfig] },
   { name: "Choose", actions: [HaChooseAction.defaultConfig] },
   { name: "Variables", actions: [{ variables: { hello: "1" } }] },
+  { name: "Sequence", actions: [HaSequenceAction.defaultConfig] },
   { name: "Parallel", actions: [HaParallelAction.defaultConfig] },
   { name: "Stop", actions: [HaStopAction.defaultConfig] },
 ];

gallery/src/pages/automation/trace-timeline.ts

@@ -55,6 +55,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
   }
 
   static get styles() {

gallery/src/pages/automation/trace.ts

@@ -60,6 +60,7 @@ export class DemoAutomationTrace extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
   }
 
   static get styles() {

gallery/src/pages/components/ha-control-button.ts

@@ -162,7 +162,7 @@ export class DemoHaBarButton extends LitElement {
       }
       .custom-group {
         --control-button-group-thickness: 100px;
-        --control-button-group-border-radius: 18px;
+        --control-button-group-border-radius: 36px;
         --control-button-group-spacing: 20px;
       }
       .custom-group ha-control-button {

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement {
         --control-number-buttons-background-color: #2196f3;
         --control-number-buttons-background-opacity: 0.1;
         --control-number-buttons-thickness: 100px;
-        --control-number-buttons-border-radius: 24px;
+        --control-number-buttons-border-radius: 36px;
       }
     `;
   }

gallery/src/pages/components/ha-control-select.ts

@@ -186,8 +186,8 @@ export class DemoHaControlSelect extends LitElement {
       .custom {
         --mdc-icon-size: 24px;
         --control-select-color: var(--state-fan-active-color);
-        --control-select-thickness: 100px;
-        --control-select-border-radius: 24px;
+        --control-select-thickness: 130px;
+        --control-select-border-radius: 36px;
       }
       .vertical-selects {
         height: 300px;

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

@@ -150,8 +150,8 @@ export class DemoHaBarSlider extends LitElement {
         --control-slider-color: #ffcf4c;
         --control-slider-background: #ffcf4c;
         --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 100px;
-        --control-slider-border-radius: 24px;
+        --control-slider-thickness: 130px;
+        --control-slider-border-radius: 36px;
       }
       .vertical-sliders {
         height: 300px;

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

@@ -117,8 +117,8 @@ export class DemoHaControlSwitch extends LitElement {
       .custom {
         --control-switch-on-color: var(--green-color);
         --control-switch-off-color: var(--red-color);
-        --control-switch-thickness: 100px;
-        --control-switch-border-radius: 24px;
+        --control-switch-thickness: 130px;
+        --control-switch-border-radius: 36px;
         --control-switch-padding: 6px;
         --mdc-icon-size: 24px;
       }

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

@@ -59,6 +59,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: "backyard",
@@ -77,6 +78,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: null,
@@ -95,30 +97,37 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
 ];
 
 const AREAS: AreaRegistryEntry[] = [
   {
     area_id: "backyard",
+    floor_id: null,
     name: "Backyard",
     icon: null,
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "bedroom",
+    floor_id: null,
     name: "Bedroom",
     icon: "mdi:bed",
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "livingroom",
+    floor_id: null,
     name: "Livingroom",
     icon: "mdi:sofa",
     picture: null,
     aliases: [],
+    labels: [],
   },
 ];
 

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

@@ -17,6 +17,10 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
+import { FloorRegistryEntry } from "../../../../src/data/floor_registry";
+import { LabelRegistryEntry } from "../../../../src/data/label_registry";
+import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
+import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -55,6 +59,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: "backyard",
@@ -73,6 +78,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: null,
@@ -91,30 +97,78 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
 ];
 
 const AREAS: AreaRegistryEntry[] = [
   {
     area_id: "backyard",
+    floor_id: "ground",
     name: "Backyard",
     icon: null,
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "bedroom",
+    floor_id: "first",
     name: "Bedroom",
     icon: "mdi:bed",
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "livingroom",
+    floor_id: "ground",
     name: "Livingroom",
     icon: "mdi:sofa",
     picture: null,
     aliases: [],
+    labels: [],
+  },
+];
+
+const FLOORS: FloorRegistryEntry[] = [
+  {
+    floor_id: "ground",
+    name: "Ground floor",
+    level: 0,
+    icon: null,
+    aliases: [],
+  },
+  {
+    floor_id: "first",
+    name: "First floor",
+    level: 1,
+    icon: "mdi:numeric-1",
+    aliases: [],
+  },
+  {
+    floor_id: "second",
+    name: "Second floor",
+    level: 2,
+    icon: "mdi:numeric-2",
+    aliases: [],
+  },
+];
+
+const LABELS: LabelRegistryEntry[] = [
+  {
+    label_id: "energy",
+    name: "Energy",
+    icon: null,
+    color: "yellow",
+    description: null,
+  },
+  {
+    label_id: "entertainment",
+    name: "Entertainment",
+    icon: "mdi:popcorn",
+    color: "blue",
+    description: null,
   },
 ];
 
@@ -125,7 +179,12 @@ const SCHEMAS: {
   {
     name: "One of each",
     input: {
+      label: { name: "Label", selector: { label: {} } },
+      floor: { name: "Floor", selector: { floor: {} } },
+      area: { name: "Area", selector: { area: {} } },
+      device: { name: "Device", selector: { device: {} } },
       entity: { name: "Entity", selector: { entity: {} } },
+      target: { name: "Target", selector: { target: {} } },
       state: {
         name: "State",
         selector: { state: { entity_id: "alarm_control_panel.alarm" } },
@@ -134,15 +193,12 @@ const SCHEMAS: {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
       },
-      device: { name: "Device", selector: { device: {} } },
       config_entry: {
         name: "Integration",
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
-      area: { name: "Area", selector: { area: {} } },
-      target: { name: "Target", selector: { target: {} } },
       number_box: {
         name: "Number Box",
         selector: {
@@ -291,6 +347,8 @@ const SCHEMAS: {
       entity: { name: "Entity", selector: { entity: { multiple: true } } },
       device: { name: "Device", selector: { device: { multiple: true } } },
       area: { name: "Area", selector: { area: { multiple: true } } },
+      floor: { name: "Floor", selector: { floor: { multiple: true } } },
+      label: { name: "Label", selector: { label: { multiple: true } } },
       select: {
         name: "Select Multiple",
         selector: {
@@ -347,6 +405,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     mockDeviceRegistry(hass, DEVICES);
     mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
+    mockFloorRegistry(hass, FLOORS);
+    mockLabelRegistry(hass, LABELS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);
     hass.mockWS("media_player/browse_media", this._browseMedia);

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -11,7 +11,7 @@ const ENTITIES = [
     latitude: 32.877105,
     longitude: 117.232185,
     gps_accuracy: 91,
-    battery: 71,
+    battery: 25,
     friendly_name: "Paulus",
   }),
   getEntity("device_tracker", "demo_anne_therese", "school", {
@@ -19,7 +19,7 @@ const ENTITIES = [
     latitude: 32.877105,
     longitude: 117.232185,
     gps_accuracy: 91,
-    battery: 71,
+    battery: 50,
     friendly_name: "Anne Therese",
   }),
   getEntity("device_tracker", "demo_home_boy", "home", {
@@ -27,7 +27,7 @@ const ENTITIES = [
     latitude: 32.877105,
     longitude: 117.232185,
     gps_accuracy: 91,
-    battery: 71,
+    battery: 75,
     friendly_name: "Home Boy",
   }),
   getEntity("light", "bed_light", "on", {
@@ -39,21 +39,53 @@ const ENTITIES = [
   getEntity("light", "ceiling_lights", "off", {
     friendly_name: "Ceiling Lights",
   }),
+  getEntity("sensor", "battery_1", 20, {
+    device_class: "battery",
+    friendly_name: "Battery 1",
+    unit_of_measurement: "%",
+  }),
+  getEntity("sensor", "battery_2", 35, {
+    device_class: "battery",
+    friendly_name: "Battery 2",
+    unit_of_measurement: "%",
+  }),
+  getEntity("sensor", "battery_3", 40, {
+    device_class: "battery",
+    friendly_name: "Battery 3",
+    unit_of_measurement: "%",
+  }),
+  getEntity("sensor", "battery_4", 80, {
+    device_class: "battery",
+    friendly_name: "Battery 4",
+    unit_of_measurement: "%",
+  }),
+  getEntity("input_number", "min_battery_level", 30, {
+    mode: "slider",
+    step: 10,
+    min: 0,
+    max: 100,
+    icon: "mdi:battery-alert-variant",
+    friendly_name: "Minimum Battery Level",
+    unit_of_measurement: "%",
+  }),
 ];
 
 const CONFIGS = [
   {
-    heading: "Unfiltered controller",
+    heading: "Unfiltered entities",
     config: `
 - type: entities
   entities:
-  - light.bed_light
-  - light.ceiling_lights
-  - light.kitchen_lights
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+    - device_tracker.demo_paulus
+    - light.bed_light
+    - light.ceiling_lights
+    - light.kitchen_lights
     `,
   },
   {
-    heading: "Filtered entities card",
+    heading: "On and home entities",
     config: `
 - type: entity-filter
   entities:
@@ -63,9 +95,28 @@ const CONFIGS = [
     - light.bed_light
     - light.ceiling_lights
     - light.kitchen_lights
-  state_filter:
-    - "on"
-    - home
+  conditions:
+    - condition: state
+      state:
+        - "on"
+        - home
+    `,
+  },
+  {
+    heading: "Same state as Bed Light",
+    config: `
+- type: entity-filter
+  entities:
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+    - device_tracker.demo_paulus
+    - light.bed_light
+    - light.ceiling_lights
+    - light.kitchen_lights
+  conditions:
+    - condition: state
+      state:
+        - light.bed_light
     `,
   },
   {
@@ -79,9 +130,11 @@ const CONFIGS = [
     - light.bed_light
     - light.ceiling_lights
     - light.kitchen_lights
-  state_filter:
-    - "on"
-    - not_home
+  conditions:
+    - condition: state
+      state:
+        - "on"
+        - home
   card:
     type: entities
     title: Custom Title
@@ -99,15 +152,101 @@ const CONFIGS = [
     - light.bed_light
     - light.ceiling_lights
     - light.kitchen_lights
-  state_filter:
-    - "on"
-    - not_home
+  conditions:
+    - condition: state
+      state:
+        - "on"
+        - home
   card:
     type: glance
     show_state: true
     title: Custom Title
     `,
   },
+  {
+    heading:
+      "Filtered entities by battery attribute (< '30') using state filter",
+    config: `
+- type: entity-filter
+  entities:
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+    - device_tracker.demo_paulus
+  state_filter:
+    - operator: <
+      attribute: battery
+      value: "30"
+    `,
+  },
+  {
+    heading: "Unfiltered number entities",
+    config: `
+- type: entities
+  entities:
+    - input_number.min_battery_level
+    - sensor.battery_1
+    - sensor.battery_3
+    - sensor.battery_2
+    - sensor.battery_4
+    `,
+  },
+  {
+    heading: "Battery lower than 50%",
+    config: `
+- type: entity-filter
+  entities:
+    - sensor.battery_1
+    - sensor.battery_3
+    - sensor.battery_2
+    - sensor.battery_4
+  conditions:
+    - condition: numeric_state
+      below: 50
+    `,
+  },
+  {
+    heading: "Battery lower than min battery level",
+    config: `
+- type: entity-filter
+  entities:
+    - sensor.battery_1
+    - sensor.battery_3
+    - sensor.battery_2
+    - sensor.battery_4
+  conditions:
+    - condition: numeric_state
+      below: input_number.min_battery_level
+    `,
+  },
+  {
+    heading: "Battery between min battery level and 70%",
+    config: `
+- type: entity-filter
+  entities:
+    - sensor.battery_1
+    - sensor.battery_3
+    - sensor.battery_2
+    - sensor.battery_4
+  conditions:
+    - condition: numeric_state
+      above: input_number.min_battery_level
+      below: 70
+    `,
+  },
+  {
+    heading: "Error: Entities must be specified",
+    config: `
+- type: entity-filter
+    `,
+  },
+  {
+    heading: "Error: Incorrect filter config",
+    config: `
+- type: entity-filter
+  entities:
+    - sensor.gas_station_lowest_price
+    `,
+  },
 ];
 
 @customElement("demo-lovelace-entity-filter-card")

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

@@ -36,6 +36,45 @@ const ENTITIES = [
     friendly_name: "Nest",
     supported_features: 43,
   }),
+  getEntity("climate", "overkiz_radiator", "heat", {
+    current_temperature: 18,
+    min_temp: 7,
+    max_temp: 35,
+    temperature: 20,
+    hvac_modes: ["heat", "auto", "off"],
+    friendly_name: "Overkiz radiator",
+    supported_features: 17,
+    preset_mode: "comfort",
+    preset_modes: [
+      "none",
+      "frost_protection",
+      "eco",
+      "comfort",
+      "comfort-1",
+      "comfort-2",
+      "auto",
+      "boost",
+      "external",
+      "prog",
+    ],
+  }),
+  getEntity("climate", "overkiz_towel_dryer", "heat", {
+    current_temperature: null,
+    min_temp: 7,
+    max_temp: 35,
+    hvac_modes: ["heat", "off"],
+    friendly_name: "Overkiz towel dryer",
+    supported_features: 16,
+    preset_mode: "eco",
+    preset_modes: [
+      "none",
+      "frost_protection",
+      "eco",
+      "comfort",
+      "comfort-1",
+      "comfort-2",
+    ],
+  }),
   getEntity("climate", "sensibo", "fan_only", {
     current_temperature: null,
     temperature: null,
@@ -46,7 +85,9 @@ const ENTITIES = [
     friendly_name: "Sensibo purifier",
     fan_modes: ["low", "high"],
     fan_mode: "low",
-    supported_features: 9,
+    swing_modes: ["on", "off", "both", "vertical", "horizontal"],
+    swing_mode: "vertical",
+    supported_features: 41,
   }),
   getEntity("climate", "unavailable", "unavailable", {
     supported_features: 43,
@@ -59,8 +100,6 @@ const CONFIGS = [
     config: `
 - type: thermostat
   entity: climate.ecobee
-- type: thermostat
-  entity: climate.nest
     `,
   },
   {
@@ -70,6 +109,66 @@ const CONFIGS = [
   entity: climate.nest
     `,
   },
+  {
+    heading: "Feature example",
+    config: `
+- type: thermostat
+  entity: climate.overkiz_radiator
+  features:
+    - type: climate-hvac-modes
+      hvac_modes:
+        - heat
+        - 'off'
+        - auto
+    - type: climate-preset-modes
+      style: icons
+      preset_modes:
+        - none
+        - frost_protection
+        - eco
+        - comfort
+        - comfort-1
+        - comfort-2
+        - auto
+        - boost
+        - external
+        - prog
+    - type: climate-preset-modes
+      style: dropdown
+      preset_modes:
+        - none
+        - frost_protection
+        - eco
+        - comfort
+        - comfort-1
+        - comfort-2
+        - auto
+        - boost
+        - external
+        - prog
+    `,
+  },
+  {
+    heading: "Preset only example",
+    config: `
+- type: thermostat
+  entity: climate.overkiz_towel_dryer
+  features:
+    - type: climate-hvac-modes
+      hvac_modes:
+        - heat
+        - 'off'
+    - type: climate-preset-modes
+      style: icons
+      preset_modes:
+        - none
+        - frost_protection
+        - eco
+        - comfort
+        - comfort-1
+        - comfort-2
+    `,
+  },
   {
     heading: "Fan only example",
     config: `
@@ -85,6 +184,14 @@ const CONFIGS = [
       fan_modes:
         - low
         - high
+    - type: climate-swing-modes
+      style: icons
+      swing_modes:
+        - 'on'
+        - 'off'
+        - 'both'
+        - 'vertical'
+        - 'horizontal'
     `,
   },
   {

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

@@ -2,6 +2,7 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
 import { CoverEntityFeature } from "../../../../src/data/cover";
 import { LightColorMode } from "../../../../src/data/light";
+import { LockEntityFeature } from "../../../../src/data/lock";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -20,6 +21,11 @@ const ENTITIES = [
   getEntity("light", "unavailable", "unavailable", {
     friendly_name: "Unavailable entity",
   }),
+  getEntity("lock", "front_door", "locked", {
+    friendly_name: "Front Door Lock",
+    device_class: "lock",
+    supported_features: LockEntityFeature.OPEN,
+  }),
   getEntity("climate", "thermostat", "heat", {
     current_temperature: 73,
     min_temp: 45,
@@ -138,6 +144,24 @@ const CONFIGS = [
     - type: "color-temp"
     `,
   },
+  {
+    heading: "Lock commands feature",
+    config: `
+- type: tile
+  entity: lock.front_door
+  features:
+    - type: "lock-commands"
+    `,
+  },
+  {
+    heading: "Lock open door feature",
+    config: `
+- type: tile
+  entity: lock.front_door
+  features:
+    - type: "lock-open-door"
+    `,
+  },
   {
     heading: "Vacuum commands feature",
     config: `

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

@@ -368,6 +368,7 @@ export class DemoEntityState extends LitElement {
               hass.localize,
               entry.stateObj,
               hass.locale,
+              [], // numericDeviceClasses
               hass.config,
               hass.entities
             )}`,
@@ -406,6 +407,7 @@ export class DemoEntityState extends LitElement {
           entity_id: "select.speed",
           translation_key: "speed",
           platform: "demo",
+          labels: [],
         },
       },
     });

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

@@ -31,10 +31,13 @@ const createConfigEntry = (
   supports_options: false,
   supports_remove_device: false,
   supports_unload: true,
+  supports_reconfigure: true,
   disabled_by: null,
   pref_disable_new_entities: false,
   pref_disable_polling: false,
   reason: null,
+  error_reason_translation_key: null,
+  error_reason_translation_placeholders: null,
   ...override,
 });
 
@@ -198,6 +201,8 @@ const createEntityRegistryEntries = (
     has_entity_name: false,
     unique_id: "updater",
     options: null,
+    labels: [],
+    categories: {},
   },
 ];
 
@@ -221,6 +226,7 @@ const createDeviceRegistryEntries = (
     name_by_user: null,
     disabled_by: null,
     configuration_url: null,
+    labels: [],
   },
 ];
 

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

@@ -11,7 +11,7 @@ import "../../components/demo-more-infos";
 import { ClimateEntityFeature } from "../../../../src/data/climate";
 
 const ENTITIES = [
-  getEntity("climate", "thermostat", "heat", {
+  getEntity("climate", "radiator", "heat", {
     friendly_name: "Basic heater",
     hvac_modes: ["heat", "off"],
     hvac_mode: "heat",
@@ -80,6 +80,24 @@ const ENTITIES = [
     max_humidity: 100,
     humidity: 50,
   }),
+  getEntity("climate", "towel_dryer", "heat", {
+    friendly_name: "Preset only heater",
+    hvac_modes: ["heat", "off"],
+    hvac_mode: "heat",
+    preset_modes: [
+      "none",
+      "frost_protection",
+      "eco",
+      "comfort",
+      "comfort-1",
+      "comfort-2",
+    ],
+    preset_mode: "eco",
+    current_temperature: null,
+    min_temp: 7,
+    max_temp: 35,
+    supported_features: ClimateEntityFeature.PRESET_MODE,
+  }),
   getEntity("climate", "unavailable", "unavailable", {
     friendly_name: "Unavailable heater",
     hvac_modes: ["heat", "off"],

gulpfile.js

@@ -1,4 +1,7 @@
 import { globIterate } from "glob";
+import { availableParallelism } from "node:os";
+
+process.env.UV_THREADPOOL_SIZE = availableParallelism();
 
 const gulpImports = [];
 

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

@@ -1263,6 +1263,7 @@ class HassioAddonInfo extends LitElement {
         .card-actions {
           justify-content: space-between;
           display: flex;
+          direction: var(--direction);
         }
         .changelog {
           display: contents;

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,19 +1,19 @@
-import { mdiStorePlus, mdiUpdate } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { mdiRefresh, mdiStorePlus } from "@mdi/js";
+import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-fab";
+import { reloadHassioAddons } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import "../../../src/layouts/hass-subpage";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
-import "../../../src/layouts/hass-subpage";
-import { reloadHassioAddons } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
@@ -43,7 +43,7 @@ class HassioDashboard extends LitElement {
         <ha-icon-button
           slot="toolbar-icon"
           @click=${this._handleCheckUpdates}
-          .path=${mdiUpdate}
+          .path=${mdiRefresh}
           .label=${this.supervisor.localize("store.check_updates")}
         ></ha-icon-button>
         <hassio-addons

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

@@ -154,12 +154,16 @@ class HassioHardwareDialog extends LitElement {
         ha-icon-button {
           position: absolute;
           right: 16px;
+          inset-inline-end: 16px;
+          inset-inline-start: initial;
           top: 10px;
           text-decoration: none;
           color: var(--primary-text-color);
         }
         h2 {
           margin: 18px 42px 0 18px;
+          margin-inline-start: 18px;
+          margin-inline-end: 42px;
           color: var(--primary-text-color);
         }
 

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

@@ -1,7 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDeleteOff } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -27,6 +25,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-list-new";
+import "../../../../src/components/ha-list-item-new";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -106,44 +106,46 @@ class HassioRepositoriesDialog extends LitElement {
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="form">
-          ${repositories.length
-            ? repositories.map(
-                (repo) => html`
-                  <paper-item class="option">
-                    <paper-item-body three-line>
-                      <div>${repo.name}</div>
-                      <div secondary>${repo.maintainer}</div>
-                      <div secondary>${repo.url}</div>
-                    </paper-item-body>
-                    <div class="delete">
-                      <ha-icon-button
-                        .label=${this._dialogParams!.supervisor.localize(
-                          "dialog.repositories.remove"
-                        )}
-                        .disabled=${usedRepositories.includes(repo.slug)}
-                        .slug=${repo.slug}
-                        .path=${usedRepositories.includes(repo.slug)
-                          ? mdiDeleteOff
-                          : mdiDelete}
-                        @click=${this._removeRepository}
-                      >
-                      </ha-icon-button>
-                      <simple-tooltip
-                        animation-delay="0"
-                        position="bottom"
-                        offset="1"
-                      >
-                        ${this._dialogParams!.supervisor.localize(
-                          usedRepositories.includes(repo.slug)
-                            ? "dialog.repositories.used"
-                            : "dialog.repositories.remove"
-                        )}
-                      </simple-tooltip>
-                    </div>
-                  </paper-item>
-                `
-              )
-            : html`<paper-item> No repositories </paper-item>`}
+          <ha-list-new>
+            ${repositories.length
+              ? repositories.map(
+                  (repo) => html`
+                    <ha-list-item-new class="option">
+                      ${repo.name}
+                      <div slot="supporting-text">
+                        <div>${repo.maintainer}</div>
+                        <div>${repo.url}</div>
+                      </div>
+                      <div class="delete" slot="end">
+                        <ha-icon-button
+                          .label=${this._dialogParams!.supervisor.localize(
+                            "dialog.repositories.remove"
+                          )}
+                          .disabled=${usedRepositories.includes(repo.slug)}
+                          .slug=${repo.slug}
+                          .path=${usedRepositories.includes(repo.slug)
+                            ? mdiDeleteOff
+                            : mdiDelete}
+                          @click=${this._removeRepository}
+                        >
+                        </ha-icon-button>
+                        <simple-tooltip
+                          animation-delay="0"
+                          position="bottom"
+                          offset="1"
+                        >
+                          ${this._dialogParams!.supervisor.localize(
+                            usedRepositories.includes(repo.slug)
+                              ? "dialog.repositories.used"
+                              : "dialog.repositories.remove"
+                          )}
+                        </simple-tooltip>
+                      </div>
+                    </ha-list-item-new>
+                  `
+                )
+              : html`<ha-list-item-new> No repositories </ha-list-item-new>`}
+          </ha-list-new>
           <div class="layout horizontal bottom">
             <ha-textfield
               class="flex-auto"
@@ -206,6 +208,9 @@ class HassioRepositoriesDialog extends LitElement {
         div.delete ha-icon-button {
           color: var(--error-color);
         }
+        ha-list-item-new {
+          position: relative;
+        }
       `,
     ];
   }

package.json

@@ -25,36 +25,36 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.9",
-    "@braintree/sanitize-url": "7.0.0",
-    "@codemirror/autocomplete": "6.12.0",
-    "@codemirror/commands": "6.3.3",
+    "@babel/runtime": "7.24.5",
+    "@braintree/sanitize-url": "7.0.2",
+    "@codemirror/autocomplete": "6.16.0",
+    "@codemirror/commands": "6.5.0",
     "@codemirror/language": "6.10.1",
-    "@codemirror/legacy-modes": "6.3.3",
+    "@codemirror/legacy-modes": "6.4.0",
     "@codemirror/search": "6.5.6",
-    "@codemirror/state": "6.4.0",
-    "@codemirror/view": "6.24.0",
+    "@codemirror/state": "6.4.1",
+    "@codemirror/view": "6.26.3",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.12.2",
-    "@formatjs/intl-displaynames": "6.6.6",
+    "@formatjs/intl-datetimeformat": "6.12.5",
+    "@formatjs/intl-displaynames": "6.6.8",
     "@formatjs/intl-getcanonicallocales": "2.3.0",
-    "@formatjs/intl-listformat": "7.5.5",
-    "@formatjs/intl-locale": "3.4.5",
-    "@formatjs/intl-numberformat": "8.10.0",
-    "@formatjs/intl-pluralrules": "5.2.12",
-    "@formatjs/intl-relativetimeformat": "11.2.12",
-    "@fullcalendar/core": "6.1.10",
-    "@fullcalendar/daygrid": "6.1.10",
-    "@fullcalendar/interaction": "6.1.10",
-    "@fullcalendar/list": "6.1.10",
-    "@fullcalendar/luxon3": "6.1.10",
-    "@fullcalendar/timegrid": "6.1.10",
+    "@formatjs/intl-listformat": "7.5.7",
+    "@formatjs/intl-locale": "4.0.0",
+    "@formatjs/intl-numberformat": "8.10.3",
+    "@formatjs/intl-pluralrules": "5.2.14",
+    "@formatjs/intl-relativetimeformat": "11.2.14",
+    "@fullcalendar/core": "6.1.13",
+    "@fullcalendar/daygrid": "6.1.13",
+    "@fullcalendar/interaction": "6.1.13",
+    "@fullcalendar/list": "6.1.13",
+    "@fullcalendar/luxon3": "6.1.13",
+    "@fullcalendar/timegrid": "6.1.13",
     "@lezer/highlight": "1.2.0",
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.7",
     "@lit-labs/observers": "2.0.2",
     "@lit-labs/virtualizer": "2.0.12",
-    "@lrnwebcomponents/simple-tooltip": "patch:@lrnwebcomponents/simple-tooltip@npm%3A8.0.0#~/.yarn/patches/@lrnwebcomponents-simple-tooltip-npm-8.0.0-77591f2e0c.patch",
+    "@lrnwebcomponents/simple-tooltip": "8.0.2",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
@@ -70,8 +70,8 @@
     "@material/mwc-list": "0.27.0",
     "@material/mwc-menu": "0.27.0",
     "@material/mwc-radio": "0.27.0",
-    "@material/mwc-ripple": "0.27.0",
     "@material/mwc-select": "0.27.0",
+    "@material/mwc-snackbar": "0.27.0",
     "@material/mwc-switch": "0.27.0",
     "@material/mwc-tab": "0.27.0",
     "@material/mwc-tab-bar": "0.27.0",
@@ -80,17 +80,16 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.2.0",
+    "@material/web": "1.4.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
-    "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.6",
-    "@vaadin/vaadin-themable-mixin": "24.3.6",
+    "@vaadin/combo-box": "24.3.13",
+    "@vaadin/vaadin-themable-mixin": "24.3.13",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -98,27 +97,28 @@
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "chart.js": "4.4.1",
+    "chart.js": "4.4.3",
+    "color-name": "2.0.0",
     "comlink": "4.4.1",
-    "core-js": "3.36.0",
-    "cropperjs": "1.6.1",
-    "date-fns": "2.30.0",
-    "date-fns-tz": "2.0.0",
+    "core-js": "3.37.1",
+    "cropperjs": "1.6.2",
+    "date-fns": "3.6.0",
+    "date-fns-tz": "3.1.3",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
-    "element-internals-polyfill": "1.3.10",
+    "element-internals-polyfill": "1.3.11",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
-    "hls.js": "1.5.5",
-    "home-assistant-js-websocket": "9.1.0",
+    "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
+    "home-assistant-js-websocket": "9.3.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.11",
+    "intl-messageformat": "10.5.14",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "12.0.0",
+    "marked": "12.0.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -129,7 +129,7 @@
     "rrule": "2.8.1",
     "sortablejs": "1.15.2",
     "stacktrace-js": "2.0.2",
-    "superstruct": "1.0.3",
+    "superstruct": "1.0.4",
     "tinykeys": "2.1.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
@@ -140,91 +140,90 @@
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
-    "workbox-cacheable-response": "7.0.0",
-    "workbox-core": "7.0.0",
-    "workbox-expiration": "7.0.0",
-    "workbox-precaching": "7.0.0",
-    "workbox-routing": "7.0.0",
-    "workbox-strategies": "7.0.0",
-    "xss": "1.0.14"
+    "workbox-cacheable-response": "7.1.0",
+    "workbox-core": "7.1.0",
+    "workbox-expiration": "7.1.0",
+    "workbox-precaching": "7.1.0",
+    "workbox-routing": "7.1.0",
+    "workbox-strategies": "7.1.0",
+    "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
-    "@babel/helper-define-polyfill-provider": "0.5.0",
-    "@babel/plugin-proposal-decorators": "7.23.9",
-    "@babel/plugin-transform-runtime": "7.23.9",
-    "@babel/preset-env": "7.23.9",
-    "@babel/preset-typescript": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.10.0",
+    "@babel/core": "7.24.5",
+    "@babel/helper-define-polyfill-provider": "0.6.2",
+    "@babel/plugin-proposal-decorators": "7.24.1",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.5",
+    "@babel/preset-typescript": "7.24.1",
+    "@bundle-stats/plugin-webpack-filter": "4.12.2",
     "@koa/cors": "5.0.0",
-    "@lokalise/node-api": "12.1.0",
-    "@octokit/auth-oauth-device": "6.0.1",
-    "@octokit/plugin-retry": "6.0.1",
-    "@octokit/rest": "20.0.2",
+    "@lokalise/node-api": "12.5.0",
+    "@octokit/auth-oauth-device": "7.1.1",
+    "@octokit/plugin-retry": "7.1.1",
+    "@octokit/rest": "20.1.1",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "25.0.7",
+    "@rollup/plugin-commonjs": "25.0.8",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.13",
-    "@types/chromecast-caf-sender": "1.0.8",
+    "@types/chromecast-caf-receiver": "6.0.14",
+    "@types/chromecast-caf-sender": "1.0.10",
+    "@types/color-name": "1.1.4",
     "@types/glob": "8.1.0",
-    "@types/gulp-if": "^3",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.8",
+    "@types/leaflet": "1.9.12",
     "@types/leaflet-draw": "1.0.11",
+    "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.4.2",
     "@types/mocha": "10.0.6",
     "@types/qrcode": "1.5.5",
     "@types/serve-handler": "6.1.4",
-    "@types/sortablejs": "1.15.7",
-    "@types/tar": "6.1.11",
+    "@types/sortablejs": "1.15.8",
+    "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.0.1",
-    "@typescript-eslint/parser": "7.0.1",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
+    "@typescript-eslint/parser": "7.10.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "5.1.0",
+    "chai": "5.1.1",
     "del": "7.1.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-airbnb-typescript": "17.1.0",
+    "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-lit": "1.11.0",
+    "eslint-plugin-lit": "1.13.0",
     "eslint-plugin-lit-a11y": "4.1.2",
-    "eslint-plugin-unused-imports": "3.1.0",
-    "eslint-plugin-wc": "2.0.4",
+    "eslint-plugin-unused-imports": "3.2.0",
+    "eslint-plugin-wc": "2.1.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
-    "glob": "10.3.10",
-    "gulp": "4.0.2",
-    "gulp-flatmap": "1.0.2",
-    "gulp-if": "3.0.0",
-    "gulp-json-transform": "0.4.8",
-    "gulp-merge-json": "2.1.2",
+    "glob": "10.4.1",
+    "gulp": "5.0.0",
+    "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
     "html-minifier-terser": "7.2.0",
     "husky": "9.0.11",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.4",
     "lit-analyzer": "2.0.3",
+    "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
-    "magic-string": "0.30.7",
+    "magic-string": "0.30.10",
     "map-stream": "0.0.7",
-    "mocha": "10.3.0",
+    "mocha": "10.4.0",
     "object-hash": "3.0.0",
-    "open": "10.0.3",
+    "open": "10.1.0",
     "pinst": "3.0.0",
     "prettier": "3.2.5",
     "rollup": "2.79.1",
@@ -232,24 +231,21 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.12.0",
     "serve-handler": "6.1.5",
-    "sinon": "17.0.1",
+    "sinon": "18.0.0",
     "source-map-url": "0.4.1",
-    "systemjs": "6.14.3",
-    "tar": "6.2.0",
+    "systemjs": "6.15.1",
+    "tar": "7.1.0",
     "terser-webpack-plugin": "5.3.10",
-    "transform-async-modules-webpack-plugin": "1.0.2",
+    "transform-async-modules-webpack-plugin": "1.1.1",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.3.3",
-    "vinyl-buffer": "1.0.1",
-    "vinyl-paths": "5.0.0",
-    "vinyl-source-stream": "2.0.0",
-    "webpack": "5.90.2",
+    "typescript": "5.4.5",
+    "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
-    "webpackbar": "6.0.0",
-    "workbox-build": "7.0.0"
+    "webpackbar": "6.0.1",
+    "workbox-build": "7.1.0"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
@@ -261,5 +257,5 @@
     "sortablejs@1.15.2": "patch:sortablejs@npm%3A1.15.2#~/.yarn/patches/sortablejs-npm-1.15.2-73347ae85a.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
   },
-  "packageManager": "yarn@4.1.0"
+  "packageManager": "yarn@4.2.2"
 }

pyproject.toml

@@ -4,14 +4,14 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240207.0"
+version      = "20240501.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
 authors      = [
     {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
 ]
-requires-python = ">=3.10.0"
+requires-python = ">=3.11.0"
 
 [project.urls]
 "Homepage" = "https://github.com/home-assistant/frontend"

renovate.json

@@ -40,6 +40,11 @@
       "matchPackageNames": ["tsparticles-engine"],
       "matchPackagePrefixes": ["tsparticles-preset-"]
     },
+    {
+      "description": "Group date-fns with dependent timezone package",
+      "groupName": "date-fns",
+      "matchPackageNames": ["date-fns", "date-fns-tz"]
+    },
     {
       "description": "Group and temporarily disable WDS packages",
       "groupName": "Web Dev Server",

src/common/color/colors.ts

@@ -1,3 +1,5 @@
+import { theme2hex } from "./convert-color";
+
 export const COLORS = [
   "#44739e",
   "#984ea3",
@@ -65,10 +67,10 @@ export function getColorByIndex(index: number) {
 export function getGraphColorByIndex(
   index: number,
   style: CSSStyleDeclaration
-) {
+): string {
   // The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
-  return (
+  const themeColor =
     style.getPropertyValue(`--graph-color-${index + 1}`) ||
-    getColorByIndex(index)
-  );
+    getColorByIndex(index);
+  return theme2hex(themeColor);
 }

src/common/color/convert-color.ts

@@ -1,3 +1,4 @@
+import colors from "color-name";
 import { expandHex } from "./hex";
 
 const rgb_hex = (component: number): string => {
@@ -126,3 +127,18 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
 
 export const hs2rgb = (hs: [number, number]): [number, number, number] =>
   hsv2rgb([hs[0], hs[1], 255]);
+
+export function theme2hex(themeColor: string): string {
+  if (themeColor.startsWith("#")) {
+    return themeColor;
+  }
+
+  const rgbFromColorName = colors[themeColor];
+  if (!rgbFromColorName) {
+    // We have a named color, and there's nothing in the table,
+    // so nothing further we can do with it.
+    // Compare/border/background color will all be the same.
+    return themeColor;
+  }
+  return rgb2hex(rgbFromColorName);
+}

src/common/config/can_show_page.ts

@@ -1,19 +1,25 @@
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../types";
+import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   (isCore(page) || isLoadedIntegration(hass, page)) &&
-  !hideAdvancedPage(hass, page);
+  !hideAdvancedPage(hass, page) &&
+  isNotLoadedIntegration(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  page.component
-    ? isComponentLoaded(hass, page.component)
-    : page.components
-      ? page.components.some((integration) =>
-          isComponentLoaded(hass, integration)
-        )
-      : true;
+  !page.component ||
+  ensureArray(page.component).some((integration) =>
+    isComponentLoaded(hass, integration)
+  );
+
+const isNotLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
+  !page.not_component ||
+  !ensureArray(page.not_component).some((integration) =>
+    isComponentLoaded(hass, integration)
+  );
+
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;

src/common/const.ts

@@ -231,6 +231,7 @@ export const SENSOR_ENTITIES = [
   "calendar",
   "camera",
   "device_tracker",
+  "image",
   "weather",
 ];
 

src/common/datetime/calc_date.ts

@@ -1,4 +1,4 @@
-import { utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
+import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import { HassConfig } from "home-assistant-js-websocket";
 import { FrontendLocaleData, TimeZone } from "../../data/translation";
 
@@ -8,10 +8,10 @@ const calcZonedDate = (
   fn: (date: Date, options?: any) => Date | number | boolean,
   options?
 ) => {
-  const inputZoned = utcToZonedTime(date, tz);
+  const inputZoned = toZonedTime(date, tz);
   const fnZoned = fn(inputZoned, options);
   if (fnZoned instanceof Date) {
-    return zonedTimeToUtc(fnZoned, tz) as Date;
+    return fromZonedTime(fnZoned, tz) as Date;
   }
   return fnZoned;
 };
@@ -37,3 +37,20 @@ export const calcDateProperty = (
   locale.time_zone === TimeZone.server
     ? (calcZonedDate(date, config.time_zone, fn, options) as number | boolean)
     : fn(date, options);
+
+export const calcDateDifferenceProperty = (
+  endDate: Date,
+  startDate: Date,
+  fn: (date: Date, options?: any) => boolean | number,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) =>
+  calcDateProperty(
+    endDate,
+    fn,
+    locale,
+    config,
+    locale.time_zone === TimeZone.server
+      ? toZonedTime(startDate, config.time_zone)
+      : startDate
+  );

src/common/dom/get_main_window.ts

@@ -1,8 +1,13 @@
 import { MAIN_WINDOW_NAME } from "../../data/main_window";
 
-export const mainWindow =
-  window.name === MAIN_WINDOW_NAME
-    ? window
-    : parent.name === MAIN_WINDOW_NAME
-      ? parent
-      : top!;
+export const mainWindow = (() => {
+  try {
+    return window.name === MAIN_WINDOW_NAME
+      ? window
+      : parent.name === MAIN_WINDOW_NAME
+        ? parent
+        : top!;
+  } catch {
+    return window;
+  }
+})();

src/common/dom/media_query.ts

@@ -1,3 +1,5 @@
+export type MediaQueriesListener = () => void;
+
 /**
  * Attach a media query. Listener is called right away and when it matches.
  * @param mediaQuery media query to match.
@@ -7,7 +9,7 @@
 export const listenMediaQuery = (
   mediaQuery: string,
   matchesChanged: (matches: boolean) => void
-) => {
+): MediaQueriesListener => {
   const mql = matchMedia(mediaQuery);
   const listener = (e) => matchesChanged(e.matches);
   mql.addListener(listener);

src/common/entity/compute_state_display.ts

@@ -19,28 +19,11 @@ import { blankBeforeUnit } from "../translations/blank_before_unit";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 
-export const computeStateDisplaySingleEntity = (
-  localize: LocalizeFunc,
-  stateObj: HassEntity,
-  locale: FrontendLocaleData,
-  config: HassConfig,
-  entity: EntityRegistryDisplayEntry | undefined,
-  state?: string
-): string =>
-  computeStateDisplayFromEntityAttributes(
-    localize,
-    locale,
-    config,
-    entity,
-    stateObj.entity_id,
-    stateObj.attributes,
-    state !== undefined ? state : stateObj.state
-  );
-
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
   config: HassConfig,
   entities: HomeAssistant["entities"],
   state?: string
@@ -52,6 +35,7 @@ export const computeStateDisplay = (
   return computeStateDisplayFromEntityAttributes(
     localize,
     locale,
+    sensorNumericDeviceClasses,
     config,
     entity,
     stateObj.entity_id,
@@ -63,6 +47,7 @@ export const computeStateDisplay = (
 export const computeStateDisplayFromEntityAttributes = (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
   config: HassConfig,
   entity: EntityRegistryDisplayEntry | undefined,
   entityId: string,
@@ -73,8 +58,15 @@ export const computeStateDisplayFromEntityAttributes = (
     return localize(`state.default.${state}`);
   }
 
+  const domain = computeDomain(entityId);
+
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
-  if (isNumericFromAttributes(attributes)) {
+  if (
+    isNumericFromAttributes(
+      attributes,
+      domain === "sensor" ? sensorNumericDeviceClasses : []
+    )
+  ) {
     // state is duration
     if (
       attributes.device_class === "duration" &&
@@ -120,8 +112,6 @@ export const computeStateDisplayFromEntityAttributes = (
     return value;
   }
 
-  const domain = computeDomain(entityId);
-
   if (domain === "datetime") {
     const time = new Date(state);
     return formatDateTime(time, locale, config);
@@ -187,11 +177,14 @@ export const computeStateDisplayFromEntityAttributes = (
   if (
     [
       "button",
+      "conversation",
       "event",
       "image",
       "input_button",
+      "notify",
       "scene",
       "stt",
+      "tag",
       "tts",
       "wake_word",
     ].includes(domain) ||

src/common/entity/get_states.ts

@@ -28,7 +28,15 @@ export const FIXED_DOMAIN_STATES = {
   input_button: [],
   lawn_mower: ["error", "paused", "mowing", "docked"],
   light: ["on", "off"],
-  lock: ["jammed", "locked", "locking", "unlocked", "unlocking"],
+  lock: [
+    "jammed",
+    "locked",
+    "locking",
+    "unlocked",
+    "unlocking",
+    "opening",
+    "open",
+  ],
   media_player: [
     "off",
     "on",

src/common/number/format_number.ts

@@ -14,8 +14,12 @@ export const isNumericState = (stateObj: HassEntity): boolean =>
   isNumericFromAttributes(stateObj.attributes);
 
 export const isNumericFromAttributes = (
-  attributes: HassEntityAttributeBase
-): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+  attributes: HassEntityAttributeBase,
+  numericDeviceClasses?: string[]
+): boolean =>
+  !!attributes.unit_of_measurement ||
+  !!attributes.state_class ||
+  (numericDeviceClasses || []).includes(attributes.device_class || "");
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData

src/common/translations/entity-state.ts

@@ -21,7 +21,8 @@ export const computeFormatFunctions = async (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
   config: HassConfig,
-  entities: HomeAssistant["entities"]
+  entities: HomeAssistant["entities"],
+  sensorNumericDeviceClasses: string[]
 ): Promise<{
   formatEntityState: FormatEntityStateFunc;
   formatEntityAttributeValue: FormatEntityAttributeValueFunc;
@@ -35,7 +36,15 @@ export const computeFormatFunctions = async (
 
   return {
     formatEntityState: (stateObj, state) =>
-      computeStateDisplay(localize, stateObj, locale, config, entities, state),
+      computeStateDisplay(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
     formatEntityAttributeValue: (stateObj, attribute, value) =>
       computeAttributeValueDisplay(
         localize,

src/common/translations/localize.ts

@@ -2,6 +2,7 @@ import IntlMessageFormat from "intl-messageformat";
 import type { HTMLTemplateResult } from "lit";
 import { polyfillLocaleData } from "../../resources/locale-data-polyfill";
 import { Resources, TranslationDict } from "../../types";
+import { fireEvent } from "../dom/fire_event";
 
 // Exclude some patterns from key type checking for now
 // These are intended to be removed as errors are fixed
@@ -81,7 +82,9 @@ export interface FormatsType {
  */
 
 export const computeLocalize = async <Keys extends string = LocalizeKeys>(
-  cache: any,
+  cache: HTMLElement & {
+    _localizationCache?: Record<string, IntlMessageFormat>;
+  },
   language: string,
   resources: Resources,
   formats?: FormatsType
@@ -107,7 +110,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
     }
 
     const messageKey = key + translatedValue;
-    let translatedMessage = cache._localizationCache[messageKey] as
+    let translatedMessage = cache._localizationCache![messageKey] as
       | IntlMessageFormat
       | undefined;
 
@@ -121,7 +124,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
       } catch (err: any) {
         return "Translation error: " + err.message;
       }
-      cache._localizationCache[messageKey] = translatedMessage;
+      cache._localizationCache![messageKey] = translatedMessage;
     }
 
     let argObject = {};
@@ -137,6 +140,12 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
     try {
       return translatedMessage.format<string>(argObject) as string;
     } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error("Translation error", key, language, err);
+      fireEvent(cache, "write_log", {
+        level: "error",
+        message: `Failed to format translation for key '${key}' in language '${language}'. ${err}`,
+      });
       return "Translation " + err;
     }
   };

src/common/util/array-move.ts

@@ -20,14 +20,14 @@ function findNestedItem(
   }, obj);
 }
 
-export function nestedArrayMove<T>(
-  obj: T | T[],
+export function nestedArrayMove<A>(
+  obj: A,
   oldIndex: number,
   newIndex: number,
   oldPath?: ItemPath,
   newPath?: ItemPath
-): T | T[] {
-  const newObj = Array.isArray(obj) ? [...obj] : { ...obj };
+): A {
+  const newObj = (Array.isArray(obj) ? [...obj] : { ...obj }) as A;
   const from = oldPath ? findNestedItem(newObj, oldPath) : newObj;
   const to = newPath ? findNestedItem(newObj, newPath, true) : newObj;
 

src/common/util/promise-all-settled-results.ts

@@ -0,0 +1,9 @@
+export const hasRejectedItems = <T = any>(results: PromiseSettledResult<T>[]) =>
+  results.some((result) => result.status === "rejected");
+
+export const rejectedItems = <T = any>(
+  results: PromiseSettledResult<T>[]
+): PromiseRejectedResult[] =>
+  results.filter(
+    (result) => result.status === "rejected"
+  ) as PromiseRejectedResult[];

src/common/util/select-unit.ts

@@ -1,4 +1,4 @@
-import { differenceInDays, differenceInWeeks, startOfWeek } from "date-fns/esm";
+import { differenceInDays, differenceInWeeks, startOfWeek } from "date-fns";
 import { FrontendLocaleData } from "../../data/translation";
 import { firstWeekdayIndex } from "../datetime/first_weekday";
 

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

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

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

@@ -75,6 +75,8 @@ export class HaChartBase extends LitElement {
 
   private _paddingYAxisInternal = 0;
 
+  private _datasetOrder: number[] = [];
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._releaseCanvas();
@@ -165,7 +167,17 @@ export class HaChartBase extends LitElement {
       }
     }
 
+    // put the legend labels in sorted order if provided
     if (changedProps.has("data")) {
+      this._datasetOrder = this.data.datasets.map((_, index) => index);
+      if (this.data?.datasets.some((dataset) => dataset.order)) {
+        this._datasetOrder.sort(
+          (a, b) =>
+            (this.data.datasets[a].order || 0) -
+            (this.data.datasets[b].order || 0)
+        );
+      }
+
       if (this.externalHidden) {
         this._hiddenDatasets = new Set();
         if (this.data?.datasets) {
@@ -205,8 +217,9 @@ export class HaChartBase extends LitElement {
       ${this.options?.plugins?.legend?.display === true
         ? html`<div class="chartLegend">
             <ul>
-              ${this.data.datasets.map((dataset, index) =>
-                this.extraData?.[index]?.show_legend === false
+              ${this._datasetOrder.map((index) => {
+                const dataset = this.data.datasets[index];
+                return this.extraData?.[index]?.show_legend === false
                   ? nothing
                   : html`<li
                       .datasetIndex=${index}
@@ -228,8 +241,8 @@ export class HaChartBase extends LitElement {
                         ${this.extraData?.[index]?.legend_label ??
                         dataset.label}
                       </div>
-                    </li>`
-              )}
+                    </li>`;
+              })}
             </ul>
           </div>`
         : ""}
@@ -300,31 +313,38 @@ export class HaChartBase extends LitElement {
     `;
   }
 
+  private _loading = false;
+
   private async _setupChart() {
+    if (this._loading) return;
     const ctx: CanvasRenderingContext2D = this.renderRoot
       .querySelector("canvas")!
       .getContext("2d")!;
+    this._loading = true;
+    try {
+      const ChartConstructor = (await import("../../resources/chartjs")).Chart;
 
-    const ChartConstructor = (await import("../../resources/chartjs")).Chart;
+      const computedStyles = getComputedStyle(this);
 
-    const computedStyles = getComputedStyle(this);
+      ChartConstructor.defaults.borderColor =
+        computedStyles.getPropertyValue("--divider-color");
+      ChartConstructor.defaults.color = computedStyles.getPropertyValue(
+        "--secondary-text-color"
+      );
+      ChartConstructor.defaults.font.family =
+        computedStyles.getPropertyValue("--mdc-typography-body1-font-family") ||
+        computedStyles.getPropertyValue("--mdc-typography-font-family") ||
+        "Roboto, Noto, sans-serif";
 
-    ChartConstructor.defaults.borderColor =
-      computedStyles.getPropertyValue("--divider-color");
-    ChartConstructor.defaults.color = computedStyles.getPropertyValue(
-      "--secondary-text-color"
-    );
-    ChartConstructor.defaults.font.family =
-      computedStyles.getPropertyValue("--mdc-typography-body1-font-family") ||
-      computedStyles.getPropertyValue("--mdc-typography-font-family") ||
-      "Roboto, Noto, sans-serif";
-
-    this.chart = new ChartConstructor(ctx, {
-      type: this.chartType,
-      data: this.data,
-      options: this._createOptions(),
-      plugins: this._createPlugins(),
-    });
+      this.chart = new ChartConstructor(ctx, {
+        type: this.chartType,
+        data: this.data,
+        options: this._createOptions(),
+        plugins: this._createPlugins(),
+      });
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _createOptions() {

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

@@ -111,7 +111,7 @@ export class StateHistoryChartLine extends LitElement {
                 config: this.hass.config,
               },
             },
-            suggestedMin: this.startTime,
+            min: this.startTime,
             suggestedMax: this.endTime,
             ticks: {
               maxRotation: 0,

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

@@ -114,7 +114,7 @@ export class StateHistoryChartTimeline extends LitElement {
               config: this.hass.config,
             },
           },
-          suggestedMin: this.startTime,
+          min: this.startTime,
           suggestedMax: this.endTime,
           ticks: {
             autoSkip: true,

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

@@ -233,16 +233,32 @@ export class StateHistoryCharts extends LitElement {
           new Date().getTime() - 60 * 60 * this.hoursToShow * 1000
         );
       } else {
-        this._computedStartTime = new Date(
-          (this.historyData?.timeline ?? []).reduce(
-            (minTime, stateInfo) =>
-              Math.min(
-                minTime,
-                new Date(stateInfo.data[0].last_changed).getTime()
-              ),
-            new Date().getTime()
-          )
+        let minTimeAll = (this.historyData?.timeline ?? []).reduce(
+          (minTime, stateInfo) =>
+            Math.min(
+              minTime,
+              new Date(stateInfo.data[0].last_changed).getTime()
+            ),
+          new Date().getTime()
         );
+
+        minTimeAll = (this.historyData?.line ?? []).reduce(
+          (minTimeLine, line) =>
+            Math.min(
+              minTimeLine,
+              line.data.reduce(
+                (minTimeData, data) =>
+                  Math.min(
+                    minTimeData,
+                    new Date(data.states[0].last_changed).getTime()
+                  ),
+                minTimeLine
+              )
+            ),
+          minTimeAll
+        );
+
+        this._computedStartTime = new Date(minTimeAll);
       }
     }
   }

src/components/chart/statistics-chart.ts

@@ -16,6 +16,7 @@ import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { fireEvent } from "../../common/dom/fire_event";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -25,6 +26,7 @@ import {
   getDisplayUnit,
   getStatisticLabel,
   getStatisticMetadata,
+  isExternalStatistic,
   Statistics,
   statisticsHaveType,
   StatisticsMetaData,
@@ -79,6 +81,8 @@ export class StatisticsChart extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
+  @property({ type: Boolean }) public clickForMoreInfo = true;
+
   @property() public period?: string;
 
   @state() private _chartData: ChartData = { datasets: [] };
@@ -273,6 +277,33 @@ export class StatisticsChart extends LitElement {
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (
+          !this.clickForMoreInfo ||
+          !(e.native instanceof MouseEvent) ||
+          (e.native instanceof PointerEvent && e.native.pointerType !== "mouse")
+        ) {
+          return;
+        }
+
+        const chart = e.chart;
+
+        const points = chart.getElementsAtEventForMode(
+          e,
+          "nearest",
+          { intersect: true },
+          true
+        );
+
+        if (points.length) {
+          const firstPoint = points[0];
+          const statisticId = this._statisticIds[firstPoint.datasetIndex];
+          if (!isExternalStatistic(statisticId)) {
+            fireEvent(this, "hass-more-info", { entityId: statisticId });
+            chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
+          }
+        }
+      },
     };
   }
 

src/components/chart/timeline-chart/timeline-controller.ts

@@ -205,7 +205,9 @@ export class TimelineController extends BarController {
 
       const y = vScale.getPixelForValue(this.index);
 
-      const xStart = iScale.getPixelForValue(data.start.getTime());
+      const xStart = iScale.getPixelForValue(
+        Math.max(iScale.min, data.start.getTime())
+      );
       const xEnd = iScale.getPixelForValue(data.end.getTime());
       const width = xEnd - xStart;
 

src/components/chart/timeline-chart/timeline-scale.ts

@@ -49,7 +49,7 @@ export class TimeLineScale extends TimeScale {
     max = isFinite(max) && !isNaN(max) ? max : +adapter.endOf(Date.now(), unit);
 
     // Make sure that max is strictly higher than min (required by the lookup table)
-    this.min = Math.min(min, max - 1);
-    this.max = Math.max(min + 1, max);
+    this.min = adapter.parse(options.min, this) ?? Math.min(min, max - 1);
+    this.max = adapter.parse(options.max, this) ?? Math.max(min + 1, max);
   }
 }

src/components/chips/ha-assist-chip.ts

@@ -1,25 +1,26 @@
-import "element-internals-polyfill";
 import { MdAssistChip } from "@material/web/chips/assist-chip";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-assist-chip")
+// @ts-ignore
 export class HaAssistChip extends MdAssistChip {
   @property({ type: Boolean, reflect: true }) filled = false;
 
+  @property({ type: Boolean }) active = false;
+
   static override styles = [
     ...super.styles,
     css`
       :host {
         --md-sys-color-primary: var(--primary-text-color);
         --md-sys-color-on-surface: var(--primary-text-color);
-        --md-assist-chip-container-shape: 16px;
+        --md-assist-chip-container-shape: var(
+          --ha-assist-chip-container-shape,
+          16px
+        );
         --md-assist-chip-outline-color: var(--outline-color);
         --md-assist-chip-label-text-weight: 400;
-        --ha-assist-chip-filled-container-color: rgba(
-          var(--rgb-primary-text-color),
-          0.15
-        );
       }
       /** Material 3 doesn't have a filled chip, so we have to make our own **/
       .filled {
@@ -31,10 +32,28 @@ export class HaAssistChip extends MdAssistChip {
         background-color: var(--ha-assist-chip-filled-container-color);
       }
       /** Set the size of mdc icons **/
-      ::slotted([slot="icon"]) {
+      ::slotted([slot="icon"]),
+      ::slotted([slot="trailingIcon"]) {
         display: flex;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
+
+      .trailing.icon ::slotted(*),
+      .trailing.icon svg {
+        margin-inline-end: unset;
+        margin-inline-start: var(--_icon-label-space);
+      }
+      ::before {
+        background: var(--ha-assist-chip-container-color, transparent);
+        opacity: var(--ha-assist-chip-container-opacity, 1);
+      }
+      :where(.active)::before {
+        background: var(--ha-assist-chip-active-container-color);
+        opacity: var(--ha-assist-chip-active-container-opacity);
+      }
+      .label {
+        font-family: Roboto, sans-serif;
+      }
     `,
   ];
 
@@ -45,6 +64,30 @@ export class HaAssistChip extends MdAssistChip {
 
     return super.renderOutline();
   }
+
+  protected override getContainerClasses() {
+    return {
+      ...super.getContainerClasses(),
+      active: this.active,
+    };
+  }
+
+  protected override renderPrimaryContent() {
+    return html`
+      <span class="leading icon" aria-hidden="true">
+        ${this.renderLeadingIcon()}
+      </span>
+      <span class="label">${this.label}</span>
+      <span class="touch"></span>
+      <span class="trailing leading icon" aria-hidden="true">
+        ${this.renderTrailingIcon()}
+      </span>
+    `;
+  }
+
+  protected renderTrailingIcon() {
+    return html`<slot name="trailing-icon"></slot>`;
+  }
 }
 
 declare global {

src/components/chips/ha-chip-set.ts

@@ -1,4 +1,3 @@
-import "element-internals-polyfill";
 import { MdChipSet } from "@material/web/chips/chip-set";
 import { customElement } from "lit/decorators";
 

src/components/chips/ha-filter-chip.ts

@@ -1,4 +1,3 @@
-import "element-internals-polyfill";
 import { MdFilterChip } from "@material/web/chips/filter-chip";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/chips/ha-input-chip.ts

@@ -1,4 +1,3 @@
-import "element-internals-polyfill";
 import { MdInputChip } from "@material/web/chips/input-chip";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
@@ -19,12 +18,17 @@ export class HaInputChip extends MdInputChip {
           var(--rgb-primary-text-color),
           0.15
         );
+        --ha-input-chip-selected-container-opacity: 1;
+        --md-input-chip-label-text-font: Roboto, sans-serif;
       }
       /** Set the size of mdc icons **/
       ::slotted([slot="icon"]) {
         display: flex;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
+      .selected::before {
+        opacity: var(--ha-input-chip-selected-container-opacity);
+      }
     `,
   ];
 }