Merge branch 'dev' into picture-elements-editor

.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 \

.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.3
         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.3
         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.3
       - 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.3
       - 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.3
       - 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.2
         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.3
       - 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.2
         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.3
         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.3
         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.3
         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.3
 
       - 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.3
 
       - 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.3
 
       - 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.2
         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.2
         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.3
 
       - 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.4
         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.3
 
       - 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.1.1.cjs

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,76 @@
-import { createHash } from "crypto";
-import { deleteSync } from "del";
-import { mkdirSync, readdirSync, readFileSync, renameSync } from "fs";
-import { writeFile } from "node:fs/promises";
+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 { createHash } from "node:crypto";
+import { mkdir, readFile } from "node:fs/promises";
+import { basename, join } from "node:path";
+import { 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);
+    }
+  }
+}
+
+// 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 +79,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 +127,171 @@ 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")];
-
-  if (mergeBackend) {
-    src.push(path.join(inBackendDir, "en.json"));
-  }
-
-  return gulp
-    .src(src)
-    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
+const createMasterTranslation = () =>
+  gulp
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
+    .pipe(new CustomJSON(lokaliseTransform))
     .pipe(
       merge({
         fileName: "en.json",
+        jsonSpace: undefined,
       })
     )
-    .pipe(gulp.dest(fullDir));
-});
+    .pipe(gulp.dest(workDir));
 
-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");
-            }
-          }
-        }
-        return gulp
-          .src(src, { allowEmpty: true })
-          .pipe(transform((data) => emptyFilter(data)))
-          .pipe(
-            merge({
-              fileName: tr + ".json",
-            })
-          )
-          .pipe(gulp.dest(fullDir));
-      })
-    )
-);
+const FRAGMENTS = ["base"];
 
-let taskName;
+const toggleSupervisorFragment = async () => {
+  FRAGMENTS[0] = "supervisor";
+};
 
-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);
-});
+const panelFragment = (fragment) =>
+  fragment !== "base" && fragment !== "supervisor";
 
-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))
-);
+const HASHES = new Map();
 
-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 = "";
-        }
-        // 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",
-    };
+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));
   }
 
-  // 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);
+  // 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(
+      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,
+              ];
+          }
+        })
+      )
+    )
+    .pipe(gulp.dest(outDir));
 
-      // nl.json -> nl-<hash>.json
-      if (!(parsed.name in fingerprints)) {
-        throw new Error(`Unable to find hash for ${filename}`);
+  // 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(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`);
+        }
       }
-
-      renameSync(
-        filename,
-        `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
-          parsed.ext
-        }`
-      );
-    });
+    }
+    const mergeStream = gulp.src(mergeFiles, { allowEmpty: true }).pipe(
+      merge({
+        fileName: `${locale}.json`,
+        startObj: enMaster,
+        jsonReviver: emptyReviver,
+        jsonSpace: undefined,
+      })
+    );
+    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;
+      }
     `;
   }
 }

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/pages/automation/describe-action.ts

@@ -136,7 +136,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 +149,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/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

@@ -406,6 +406,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 = [];
 

package.json

@@ -25,22 +25,22 @@
   "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.4",
+    "@braintree/sanitize-url": "7.0.1",
+    "@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.1",
-    "@codemirror/view": "6.24.1",
+    "@codemirror/view": "6.26.3",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.12.2",
+    "@formatjs/intl-datetimeformat": "6.12.3",
     "@formatjs/intl-displaynames": "6.6.6",
     "@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-numberformat": "8.10.1",
     "@formatjs/intl-pluralrules": "5.2.12",
     "@formatjs/intl-relativetimeformat": "11.2.12",
     "@fullcalendar/core": "6.1.11",
@@ -54,7 +54,7 @@
     "@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",
@@ -81,7 +81,7 @@
     "@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.3.0",
+    "@material/web": "1.4.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
@@ -89,8 +89,8 @@
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.7",
-    "@vaadin/vaadin-themable-mixin": "24.3.7",
+    "@vaadin/combo-box": "24.3.11",
+    "@vaadin/vaadin-themable-mixin": "24.3.11",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -98,20 +98,20 @@
     "@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.2",
     "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.0",
+    "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.6",
-    "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",
     "js-yaml": "4.1.0",
@@ -119,7 +119,7 @@
     "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",
@@ -130,7 +130,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",
@@ -147,21 +147,21 @@
     "workbox-precaching": "7.0.0",
     "workbox-routing": "7.0.0",
     "workbox-strategies": "7.0.0",
-    "xss": "1.0.14"
+    "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.1",
+    "@babel/core": "7.24.4",
+    "@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.4",
+    "@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": "7.0.0",
-    "@octokit/plugin-retry": "7.0.1",
-    "@octokit/rest": "20.0.2",
+    "@lokalise/node-api": "12.4.0",
+    "@octokit/auth-oauth-device": "7.1.1",
+    "@octokit/plugin-retry": "7.1.0",
+    "@octokit/rest": "20.1.0",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
@@ -169,24 +169,24 @@
     "@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/color-name": "1.1.3",
+    "@types/chromecast-caf-receiver": "6.0.14",
+    "@types/chromecast-caf-sender": "1.0.9",
+    "@types/color-name": "1.1.4",
     "@types/glob": "8.1.0",
     "@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/luxon": "3.4.2",
     "@types/mocha": "10.0.6",
     "@types/qrcode": "1.5.5",
     "@types/serve-handler": "6.1.4",
     "@types/sortablejs": "1.15.8",
-    "@types/tar": "6.1.11",
+    "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@typescript-eslint/parser": "7.0.2",
+    "@typescript-eslint/eslint-plugin": "7.7.1",
+    "@typescript-eslint/parser": "7.7.1",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
@@ -195,7 +195,7 @@
     "del": "7.1.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",
@@ -203,14 +203,13 @@
     "eslint-plugin-lit": "1.11.0",
     "eslint-plugin-lit-a11y": "4.1.2",
     "eslint-plugin-unused-imports": "3.1.0",
-    "eslint-plugin-wc": "2.0.4",
+    "eslint-plugin-wc": "2.1.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
-    "glob": "10.3.10",
+    "glob": "10.3.12",
     "gulp": "4.0.2",
-    "gulp-flatmap": "1.0.2",
     "gulp-json-transform": "0.5.0",
-    "gulp-merge-json": "2.1.2",
+    "gulp-merge-json": "2.2.1",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
     "html-minifier-terser": "7.2.0",
@@ -220,11 +219,11 @@
     "lint-staged": "15.2.2",
     "lit-analyzer": "2.0.3",
     "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.4",
+    "open": "10.1.0",
     "pinst": "3.0.0",
     "prettier": "3.2.5",
     "rollup": "2.79.1",
@@ -235,16 +234,14 @@
     "sinon": "17.0.1",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.3",
-    "tar": "6.2.0",
+    "tar": "7.0.1",
     "terser-webpack-plugin": "5.3.10",
-    "transform-async-modules-webpack-plugin": "1.0.2",
+    "transform-async-modules-webpack-plugin": "1.1.0",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.3.3",
-    "vinyl-buffer": "1.0.1",
-    "vinyl-source-stream": "2.0.0",
-    "webpack": "5.90.3",
+    "typescript": "5.4.5",
+    "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.2",
+    "webpack-dev-server": "5.0.4",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "6.0.1",
@@ -260,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.1.1"
 }

pyproject.toml

@@ -4,14 +4,14 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240228.0"
+version      = "20240426.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/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/entity/compute_state_display.ts

@@ -187,11 +187,14 @@ export const computeStateDisplayFromEntityAttributes = (
   if (
     [
       "button",
+      "conversation",
       "event",
       "image",
       "input_button",
+      "notify",
       "scene",
       "stt",
+      "tag",
       "tts",
       "wake_word",
     ].includes(domain) ||

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/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/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/chips/ha-assist-chip.ts

@@ -4,22 +4,24 @@ 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 +33,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 +65,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-input-chip.ts

@@ -19,12 +19,16 @@ export class HaInputChip extends MdInputChip {
           var(--rgb-primary-text-color),
           0.15
         );
+        --ha-input-chip-selected-container-opacity: 1;
       }
       /** 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);
+      }
     `,
   ];
 }

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

@@ -0,0 +1,130 @@
+import { css, html, LitElement, nothing, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import { LabelRegistryEntry } from "../../data/label_registry";
+import { computeCssColor } from "../../common/color/compute-color";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-label";
+import { stringCompare } from "../../common/string/compare";
+
+@customElement("ha-data-table-labels")
+class HaDataTableLabels extends LitElement {
+  @property({ attribute: false }) public labels!: LabelRegistryEntry[];
+
+  protected render(): TemplateResult {
+    const labels = this.labels.sort((a, b) => stringCompare(a.name, b.name));
+    return html`
+      <ha-chip-set>
+        ${repeat(
+          labels.slice(0, 2),
+          (label) => label.label_id,
+          (label) => this._renderLabel(label, true)
+        )}
+        ${labels.length > 2
+          ? html`<ha-button-menu
+              absolute
+              role="button"
+              tabindex="0"
+              @click=${this._handleIconOverflowMenuOpened}
+              @closed=${this._handleIconOverflowMenuClosed}
+            >
+              <ha-label slot="trigger" class="plus" dense>
+                +${labels.length - 2}
+              </ha-label>
+              ${repeat(
+                labels.slice(2),
+                (label) => label.label_id,
+                (label) => html`
+                  <ha-list-item @click=${this._labelClicked} .item=${label}>
+                    ${this._renderLabel(label, false)}
+                  </ha-list-item>
+                `
+              )}
+            </ha-button-menu>`
+          : nothing}
+      </ha-chip-set>
+    `;
+  }
+
+  private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
+    const color = label?.color ? computeCssColor(label.color) : undefined;
+    return html`
+      <ha-label
+        dense
+        role="button"
+        tabindex="0"
+        .item=${label}
+        @click=${clickAction ? this._labelClicked : undefined}
+        @keydown=${clickAction ? this._labelClicked : undefined}
+        style=${color ? `--color: ${color}` : ""}
+      >
+        ${label?.icon
+          ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
+          : nothing}
+        ${label.name}
+      </ha-label>
+    `;
+  }
+
+  private _labelClicked(ev) {
+    ev.stopPropagation();
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    const label = (ev.currentTarget as any).item as LabelRegistryEntry;
+    fireEvent(this, "label-clicked", { label });
+  }
+
+  protected _handleIconOverflowMenuOpened(e) {
+    e.stopPropagation();
+    // If this component is used inside a data table, the z-index of the row
+    // needs to be increased. Otherwise the ha-button-menu would be displayed
+    // underneath the next row in the table.
+    const row = this.closest(".mdc-data-table__row") as HTMLDivElement | null;
+    if (row) {
+      row.style.zIndex = "1";
+    }
+  }
+
+  protected _handleIconOverflowMenuClosed() {
+    const row = this.closest(".mdc-data-table__row") as HTMLDivElement | null;
+    if (row) {
+      row.style.zIndex = "";
+    }
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        flex-grow: 1;
+        margin-top: 4px;
+        height: 22px;
+      }
+      ha-chip-set {
+        position: fixed;
+        flex-wrap: nowrap;
+      }
+      ha-label {
+        --ha-label-background-color: var(--color, var(--grey-color));
+        --ha-label-background-opacity: 0.5;
+      }
+      ha-button-menu {
+        border-radius: 10px;
+      }
+      .plus {
+        --ha-label-background-color: transparent;
+        border: 1px solid var(--divider-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-data-table-labels": HaDataTableLabels;
+  }
+  interface HASSDomEvents {
+    "label-clicked": { label: LabelRegistryEntry };
+  }
+}

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

@@ -1,13 +1,13 @@
-import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
+import { mdiArrowDown, mdiArrowUp, mdiChevronUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
+  nothing,
 } from "lit";
 import {
   customElement,
@@ -22,7 +22,9 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stringCompare } from "../../common/string/compare";
 import { debounce } from "../../common/util/debounce";
+import { groupBy } from "../../common/util/group-by";
 import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
@@ -33,15 +35,6 @@ import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "selection-changed": SelectionChangedEvent;
-    "row-click": RowClickedEvent;
-    "sorting-changed": SortingChangedEvent;
-  }
-}
-
 export interface RowClickedEvent {
   id: string;
 }
@@ -50,6 +43,10 @@ export interface SelectionChangedEvent {
   value: string[];
 }
 
+export interface CollapsedChangedEvent {
+  value: string[];
+}
+
 export interface SortingChangedEvent {
   column: string;
   direction: SortingDirection;
@@ -67,13 +64,20 @@ export interface DataTableSortColumnData {
   filterKey?: string;
   valueColumn?: string;
   direction?: SortingDirection;
+  groupable?: boolean;
 }
 
 export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   main?: boolean;
   title: TemplateResult | string;
   label?: TemplateResult | string;
-  type?: "numeric" | "icon" | "icon-button" | "overflow-menu" | "flex";
+  type?:
+    | "numeric"
+    | "icon"
+    | "icon-button"
+    | "overflow"
+    | "overflow-menu"
+    | "flex";
   template?: (row: T) => TemplateResult | string | typeof nothing;
   width?: string;
   maxWidth?: string;
@@ -95,6 +99,8 @@ export interface SortableColumnContainer {
   [key: string]: ClonedDataTableColumnData;
 }
 
+const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
+
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -129,14 +135,20 @@ export class HaDataTable extends LitElement {
 
   @property({ type: String }) public filter = "";
 
+  @property() public groupColumn?: string;
+
+  @property({ attribute: false }) public groupOrder?: string[];
+
+  @property() public sortColumn?: string;
+
+  @property() public sortDirection: SortingDirection = null;
+
+  @property({ attribute: false }) public initialCollapsedGroups?: string[];
+
   @state() private _filterable = false;
 
   @state() private _filter = "";
 
-  @state() private _sortColumn?: string;
-
-  @state() private _sortDirection: SortingDirection = null;
-
   @state() private _filteredData: DataTableRowData[] = [];
 
   @state() private _headerHeight = 0;
@@ -145,6 +157,8 @@ export class HaDataTable extends LitElement {
 
   @state() private _items: DataTableRowData[] = [];
 
+  @state() private _collapsedGroups: string[] = [];
+
   private _checkableRowsCount?: number;
 
   private _checkedRows: string[] = [];
@@ -169,6 +183,13 @@ export class HaDataTable extends LitElement {
     this._checkedRowsChanged();
   }
 
+  public selectAll(): void {
+    this._checkedRows = this._filteredData
+      .filter((data) => data.selectable !== false)
+      .map((data) => data[this.id]);
+    this._checkedRowsChanged();
+  }
+
   public connectedCallback() {
     super.connectedCallback();
     if (this._items.length) {
@@ -193,11 +214,19 @@ export class HaDataTable extends LitElement {
         (column) => column.filterable
       );
 
-      for (const columnId in this.columns) {
-        if (this.columns[columnId].direction) {
-          this._sortDirection = this.columns[columnId].direction!;
-          this._sortColumn = columnId;
-          break;
+      if (!this.sortColumn) {
+        for (const columnId in this.columns) {
+          if (this.columns[columnId].direction) {
+            this.sortDirection = this.columns[columnId].direction!;
+            this.sortColumn = columnId;
+
+            fireEvent(this, "sorting-changed", {
+              column: columnId,
+              direction: this.sortDirection,
+            });
+
+            break;
+          }
         }
       }
 
@@ -222,15 +251,30 @@ export class HaDataTable extends LitElement {
       ).length;
     }
 
+    if (!this.hasUpdated && this.initialCollapsedGroups) {
+      this._collapsedGroups = this.initialCollapsedGroups;
+      fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
+    } else if (properties.has("groupColumn")) {
+      this._collapsedGroups = [];
+      fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
+    }
+
     if (
       properties.has("data") ||
       properties.has("columns") ||
       properties.has("_filter") ||
-      properties.has("_sortColumn") ||
-      properties.has("_sortDirection")
+      properties.has("sortColumn") ||
+      properties.has("sortDirection") ||
+      properties.has("groupColumn") ||
+      properties.has("groupOrder") ||
+      properties.has("_collapsedGroups")
     ) {
       this._sortFilterData();
     }
+
+    if (properties.has("selectable")) {
+      this._items = [...this._items];
+    }
   }
 
   protected render() {
@@ -263,75 +307,79 @@ export class HaDataTable extends LitElement {
           })}
         >
           <div class="mdc-data-table__header-row" role="row" aria-rowindex="1">
-            ${this.selectable
-              ? html`
-                  <div
-                    class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
-                    role="columnheader"
-                  >
-                    <ha-checkbox
-                      class="mdc-data-table__row-checkbox"
-                      @change=${this._handleHeaderRowCheckboxClick}
-                      .indeterminate=${this._checkedRows.length &&
-                      this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length &&
-                      this._checkedRows.length === this._checkableRowsCount}
+            <slot name="header-row">
+              ${this.selectable
+                ? html`
+                    <div
+                      class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
+                      role="columnheader"
                     >
-                    </ha-checkbox>
+                      <ha-checkbox
+                        class="mdc-data-table__row-checkbox"
+                        @change=${this._handleHeaderRowCheckboxClick}
+                        .indeterminate=${this._checkedRows.length &&
+                        this._checkedRows.length !== this._checkableRowsCount}
+                        .checked=${this._checkedRows.length &&
+                        this._checkedRows.length === this._checkableRowsCount}
+                      >
+                      </ha-checkbox>
+                    </div>
+                  `
+                : ""}
+              ${Object.entries(this.columns).map(([key, column]) => {
+                if (column.hidden) {
+                  return "";
+                }
+                const sorted = key === this.sortColumn;
+                const classes = {
+                  "mdc-data-table__header-cell--numeric":
+                    column.type === "numeric",
+                  "mdc-data-table__header-cell--icon": column.type === "icon",
+                  "mdc-data-table__header-cell--icon-button":
+                    column.type === "icon-button",
+                  "mdc-data-table__header-cell--overflow-menu":
+                    column.type === "overflow-menu",
+                  "mdc-data-table__header-cell--overflow":
+                    column.type === "overflow",
+                  sortable: Boolean(column.sortable),
+                  "not-sorted": Boolean(column.sortable && !sorted),
+                  grows: Boolean(column.grows),
+                };
+                return html`
+                  <div
+                    aria-label=${ifDefined(column.label)}
+                    class="mdc-data-table__header-cell ${classMap(classes)}"
+                    style=${column.width
+                      ? styleMap({
+                          [column.grows ? "minWidth" : "width"]: column.width,
+                          maxWidth: column.maxWidth || "",
+                        })
+                      : ""}
+                    role="columnheader"
+                    aria-sort=${ifDefined(
+                      sorted
+                        ? this.sortDirection === "desc"
+                          ? "descending"
+                          : "ascending"
+                        : undefined
+                    )}
+                    @click=${this._handleHeaderClick}
+                    .columnId=${key}
+                  >
+                    ${column.sortable
+                      ? html`
+                          <ha-svg-icon
+                            .path=${sorted && this.sortDirection === "desc"
+                              ? mdiArrowDown
+                              : mdiArrowUp}
+                          ></ha-svg-icon>
+                        `
+                      : ""}
+                    <span>${column.title}</span>
                   </div>
-                `
-              : ""}
-            ${Object.entries(this.columns).map(([key, column]) => {
-              if (column.hidden) {
-                return "";
-              }
-              const sorted = key === this._sortColumn;
-              const classes = {
-                "mdc-data-table__header-cell--numeric":
-                  column.type === "numeric",
-                "mdc-data-table__header-cell--icon": column.type === "icon",
-                "mdc-data-table__header-cell--icon-button":
-                  column.type === "icon-button",
-                "mdc-data-table__header-cell--overflow-menu":
-                  column.type === "overflow-menu",
-                sortable: Boolean(column.sortable),
-                "not-sorted": Boolean(column.sortable && !sorted),
-                grows: Boolean(column.grows),
-              };
-              return html`
-                <div
-                  aria-label=${ifDefined(column.label)}
-                  class="mdc-data-table__header-cell ${classMap(classes)}"
-                  style=${column.width
-                    ? styleMap({
-                        [column.grows ? "minWidth" : "width"]: column.width,
-                        maxWidth: column.maxWidth || "",
-                      })
-                    : ""}
-                  role="columnheader"
-                  aria-sort=${ifDefined(
-                    sorted
-                      ? this._sortDirection === "desc"
-                        ? "descending"
-                        : "ascending"
-                      : undefined
-                  )}
-                  @click=${this._handleHeaderClick}
-                  .columnId=${key}
-                >
-                  ${column.sortable
-                    ? html`
-                        <ha-svg-icon
-                          .path=${sorted && this._sortDirection === "desc"
-                            ? mdiArrowDown
-                            : mdiArrowUp}
-                        ></ha-svg-icon>
-                      `
-                    : ""}
-                  <span>${column.title}</span>
-                </div>
-              `;
-            })}
+                `;
+              })}
+            </slot>
           </div>
           ${!this._filteredData.length
             ? html`
@@ -359,7 +407,7 @@ export class HaDataTable extends LitElement {
     `;
   }
 
-  private _keyFunction = (row: DataTableRowData) => row[this.id] || row;
+  private _keyFunction = (row: DataTableRowData) => row?.[this.id] || row;
 
   private _renderRow = (row: DataTableRowData, index: number) => {
     // not sure how this happens...
@@ -408,10 +456,12 @@ export class HaDataTable extends LitElement {
           : ""}
         ${Object.entries(this.columns).map(([key, column]) => {
           if (column.hidden) {
-            return "";
+            return nothing;
           }
           return html`
             <div
+              @mouseover=${this._setTitle}
+              @focus=${this._setTitle}
               role=${column.main ? "rowheader" : "cell"}
               class="mdc-data-table__cell ${classMap({
                 "mdc-data-table__cell--flex": column.type === "flex",
@@ -421,6 +471,7 @@ export class HaDataTable extends LitElement {
                   column.type === "icon-button",
                 "mdc-data-table__cell--overflow-menu":
                   column.type === "overflow-menu",
+                "mdc-data-table__cell--overflow": column.type === "overflow",
                 grows: Boolean(column.grows),
                 forceLTR: Boolean(column.forceLTR),
               })}"
@@ -453,12 +504,12 @@ export class HaDataTable extends LitElement {
       );
     }
 
-    const prom = this._sortColumn
+    const prom = this.sortColumn
       ? sortData(
           filteredData,
-          this._sortColumns[this._sortColumn],
-          this._sortDirection,
-          this._sortColumn,
+          this._sortColumns[this.sortColumn],
+          this.sortDirection,
+          this.sortColumn,
           this.hass.locale.language
         )
       : filteredData;
@@ -477,8 +528,75 @@ export class HaDataTable extends LitElement {
       return;
     }
 
-    if (this.appendRow || this.hasFab) {
-      const items = [...data];
+    if (this.appendRow || this.hasFab || this.groupColumn) {
+      let items = [...data];
+
+      if (this.groupColumn) {
+        const grouped = groupBy(items, (item) => item[this.groupColumn!]);
+        if (grouped.undefined) {
+          // make sure ungrouped items are at the bottom
+          grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
+          delete grouped.undefined;
+        }
+        const sorted: {
+          [key: string]: DataTableRowData[];
+        } = Object.keys(grouped)
+          .sort((a, b) => {
+            const orderA = this.groupOrder?.indexOf(a) ?? -1;
+            const orderB = this.groupOrder?.indexOf(b) ?? -1;
+            if (orderA !== orderB) {
+              if (orderA === -1) {
+                return 1;
+              }
+              if (orderB === -1) {
+                return -1;
+              }
+              return orderA - orderB;
+            }
+            return stringCompare(
+              ["", "-", "—"].includes(a) ? "zzz" : a,
+              ["", "-", "—"].includes(b) ? "zzz" : b,
+              this.hass.locale.language
+            );
+          })
+          .reduce((obj, key) => {
+            obj[key] = grouped[key];
+            return obj;
+          }, {});
+        const groupedItems: DataTableRowData[] = [];
+        Object.entries(sorted).forEach(([groupName, rows]) => {
+          if (
+            groupName !== UNDEFINED_GROUP_KEY ||
+            Object.keys(sorted).length > 1
+          ) {
+            groupedItems.push({
+              append: true,
+              content: html`<div
+                class="mdc-data-table__cell group-header"
+                role="cell"
+                .group=${groupName}
+                @click=${this._collapseGroup}
+              >
+                <ha-icon-button
+                  .path=${mdiChevronUp}
+                  class=${this._collapsedGroups.includes(groupName)
+                    ? "collapsed"
+                    : ""}
+                >
+                </ha-icon-button>
+                ${groupName === UNDEFINED_GROUP_KEY
+                  ? this.hass.localize("ui.components.data-table.ungrouped")
+                  : groupName || ""}
+              </div>`,
+            });
+          }
+          if (!this._collapsedGroups.includes(groupName)) {
+            groupedItems.push(...rows);
+          }
+        });
+
+        items = groupedItems;
+      }
 
       if (this.appendRow) {
         items.push({ append: true, content: this.appendRow });
@@ -487,6 +605,7 @@ export class HaDataTable extends LitElement {
       if (this.hasFab) {
         items.push({ empty: true });
       }
+
       this._items = items;
     } else {
       this._items = data;
@@ -507,29 +626,26 @@ export class HaDataTable extends LitElement {
     if (!this.columns[columnId].sortable) {
       return;
     }
-    if (!this._sortDirection || this._sortColumn !== columnId) {
-      this._sortDirection = "asc";
-    } else if (this._sortDirection === "asc") {
-      this._sortDirection = "desc";
+    if (!this.sortDirection || this.sortColumn !== columnId) {
+      this.sortDirection = "asc";
+    } else if (this.sortDirection === "asc") {
+      this.sortDirection = "desc";
     } else {
-      this._sortDirection = null;
+      this.sortDirection = null;
     }
 
-    this._sortColumn = this._sortDirection === null ? undefined : columnId;
+    this.sortColumn = this.sortDirection === null ? undefined : columnId;
 
     fireEvent(this, "sorting-changed", {
       column: columnId,
-      direction: this._sortDirection,
+      direction: this.sortDirection,
     });
   }
 
   private _handleHeaderRowCheckboxClick(ev: Event) {
     const checkbox = ev.target as HaCheckbox;
     if (checkbox.checked) {
-      this._checkedRows = this._filteredData
-        .filter((data) => data.selectable !== false)
-        .map((data) => data[this.id]);
-      this._checkedRowsChanged();
+      this.selectAll();
     } else {
       this._checkedRows = [];
       this._checkedRowsChanged();
@@ -552,14 +668,32 @@ export class HaDataTable extends LitElement {
   };
 
   private _handleRowClick = (ev: Event) => {
-    const target = ev.target as HTMLElement;
-    if (["HA-CHECKBOX", "MWC-BUTTON"].includes(target.tagName)) {
+    if (
+      ev
+        .composedPath()
+        .find((el) =>
+          [
+            "ha-checkbox",
+            "mwc-button",
+            "ha-button",
+            "ha-icon-button",
+            "ha-assist-chip",
+          ].includes((el as HTMLElement).localName)
+        )
+    ) {
       return;
     }
     const rowId = (ev.currentTarget as any).rowId;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   };
 
+  private _setTitle(ev: Event) {
+    const target = ev.currentTarget as HTMLElement;
+    if (target.scrollWidth > target.offsetWidth) {
+      target.setAttribute("title", target.innerText);
+    }
+  }
+
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
     if (this._items.length) {
@@ -590,6 +724,18 @@ export class HaDataTable extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
+  private _collapseGroup = (ev: Event) => {
+    const groupName = (ev.currentTarget as any).group;
+    if (this._collapsedGroups.includes(groupName)) {
+      this._collapsedGroups = this._collapsedGroups.filter(
+        (grp) => grp !== groupName
+      );
+    } else {
+      this._collapsedGroups = [...this._collapsedGroups, groupName];
+    }
+    fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
+  };
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -629,7 +775,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__row {
           display: flex;
           width: 100%;
-          height: 52px;
+          height: var(--data-table-row-height, 52px);
         }
 
         .mdc-data-table__row ~ .mdc-data-table__row {
@@ -655,7 +801,6 @@ export class HaDataTable extends LitElement {
           display: flex;
           width: 100%;
           border-bottom: 1px solid var(--divider-color);
-          overflow-x: auto;
         }
 
         .mdc-data-table__header-row::-webkit-scrollbar {
@@ -809,7 +954,9 @@ export class HaDataTable extends LitElement {
           padding-inline-start: initial;
         }
         .mdc-data-table__cell--overflow-menu,
-        .mdc-data-table__header-cell--overflow-menu {
+        .mdc-data-table__cell--overflow,
+        .mdc-data-table__header-cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow {
           overflow: initial;
         }
         .mdc-data-table__cell--icon-button a {
@@ -839,6 +986,25 @@ export class HaDataTable extends LitElement {
 
         /* custom from here */
 
+        .group-header {
+          padding-top: 12px;
+          padding-left: 12px;
+          padding-inline-start: 12px;
+          width: 100%;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        .group-header ha-icon-button {
+          transition: transform 0.2s ease;
+        }
+
+        .group-header ha-icon-button.collapsed {
+          transform: rotate(180deg);
+        }
+
         :host {
           display: block;
         }
@@ -935,4 +1101,12 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-data-table": HaDataTable;
   }
+
+  // for fire event
+  interface HASSDomEvents {
+    "selection-changed": SelectionChangedEvent;
+    "row-click": RowClickedEvent;
+    "sorting-changed": SortingChangedEvent;
+    "collapsed-changed": CollapsedChangedEvent;
+  }
 }

src/components/date-range-picker.ts

@@ -11,10 +11,10 @@ import {
 } from "../common/datetime/localize_date";
 import { mainWindow } from "../common/dom/get_main_window";
 
-// Set the current date to the left picker instead of the right picker because the right is hidden
 const CustomDateRangePicker = Vue.extend({
   mixins: [DateRangePicker],
   methods: {
+    // Set the current date to the left picker instead of the right picker because the right is hidden
     selectMonthDate() {
       const dt: Date = this.end || new Date();
       // @ts-ignore
@@ -23,6 +23,33 @@ const CustomDateRangePicker = Vue.extend({
         month: dt.getMonth() + 1,
       });
     },
+    // Fix the start/end date calculation when selecting a date range. The
+    // original code keeps track of the first clicked date (in_selection) but it
+    // never sets it to either the start or end date variables, so if the
+    // in_selection date is between the start and end date that were set by the
+    // hover the selection will enter a broken state that's counter-intuitive
+    // when hovering between weeks and leads to a random date when selecting a
+    // range across months. This bug doesn't seem to be present on v0.6.7 of the
+    // lib
+    hoverDate(value: Date) {
+      if (this.readonly) return;
+
+      if (this.in_selection) {
+        const pickA = this.in_selection as Date;
+        const pickB = value;
+
+        this.start = this.normalizeDatetime(
+          Math.min(pickA.valueOf(), pickB.valueOf()),
+          this.start
+        );
+        this.end = this.normalizeDatetime(
+          Math.max(pickA.valueOf(), pickB.valueOf()),
+          this.end
+        );
+      }
+
+      this.$emit("hover-date", value);
+    },
   },
 });
 

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

@@ -18,6 +18,12 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
+import { domainToName } from "../../data/integration";
+import {
+  isHelperDomain,
+  HelperDomain,
+} from "../../panels/config/helpers/const";
 
 interface HassEntityWithCachedName extends HassEntity, ScorableTextItem {
   friendly_name: string;
@@ -25,6 +31,8 @@ interface HassEntityWithCachedName extends HassEntity, ScorableTextItem {
 
 export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
+const CREATE_ID = "___create-new-entity___";
+
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -44,6 +52,8 @@ export class HaEntityPicker extends LitElement {
 
   @property() public helper?: string;
 
+  @property({ type: Array }) public createDomains?: string[];
+
   /**
    * Show entities from specific domains.
    * @type {Array}
@@ -130,7 +140,11 @@ export class HaEntityPicker extends LitElement {
           ></state-badge>`
         : ""}
       <span>${item.friendly_name}</span>
-      <span slot="secondary">${item.entity_id}</span>
+      <span slot="secondary"
+        >${item.entity_id.startsWith(CREATE_ID)
+          ? this.hass.localize("ui.components.entity.entity-picker.new_entity")
+          : item.entity_id}</span
+      >
     </ha-list-item>`;
 
   private _getStates = memoizeOne(
@@ -143,7 +157,8 @@ export class HaEntityPicker extends LitElement {
       includeDeviceClasses: this["includeDeviceClasses"],
       includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
       includeEntities: this["includeEntities"],
-      excludeEntities: this["excludeEntities"]
+      excludeEntities: this["excludeEntities"],
+      createDomains: this["createDomains"]
     ): HassEntityWithCachedName[] => {
       let states: HassEntityWithCachedName[] = [];
 
@@ -152,6 +167,34 @@ export class HaEntityPicker extends LitElement {
       }
       let entityIds = Object.keys(hass.states);
 
+      const createItems = createDomains?.length
+        ? createDomains.map((domain) => {
+            const newFriendlyName = hass.localize(
+              "ui.components.entity.entity-picker.create_helper",
+              {
+                domain: isHelperDomain(domain)
+                  ? hass.localize(
+                      `ui.panel.config.helpers.types.${domain as HelperDomain}`
+                    )
+                  : domainToName(hass.localize, domain),
+              }
+            );
+
+            return {
+              entity_id: CREATE_ID + domain,
+              state: "on",
+              last_changed: "",
+              last_updated: "",
+              context: { id: "", user_id: null, parent_id: null },
+              friendly_name: newFriendlyName,
+              attributes: {
+                icon: "mdi:plus",
+              },
+              strings: [domain, newFriendlyName],
+            };
+          })
+        : [];
+
       if (!entityIds.length) {
         return [
           {
@@ -171,6 +214,7 @@ export class HaEntityPicker extends LitElement {
             },
             strings: [],
           },
+          ...createItems,
         ];
       }
 
@@ -281,9 +325,14 @@ export class HaEntityPicker extends LitElement {
             },
             strings: [],
           },
+          ...createItems,
         ];
       }
 
+      if (createItems?.length) {
+        states.push(...createItems);
+      }
+
       return states;
     }
   );
@@ -310,13 +359,18 @@ export class HaEntityPicker extends LitElement {
         this.includeDeviceClasses,
         this.includeUnitOfMeasurement,
         this.includeEntities,
-        this.excludeEntities
+        this.excludeEntities,
+        this.createDomains
       );
       if (this._initedStates) {
         this.comboBox.filteredItems = this._states;
       }
       this._initedStates = true;
     }
+
+    if (changedProps.has("createDomains") && this.createDomains?.length) {
+      this.hass.loadFragmentTranslation("config");
+    }
   }
 
   protected render(): TemplateResult {
@@ -354,6 +408,18 @@ export class HaEntityPicker extends LitElement {
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
+
+    if (newValue && newValue.startsWith(CREATE_ID)) {
+      const domain = newValue.substring(CREATE_ID.length);
+      showHelperDetailDialog(this, {
+        domain,
+        dialogClosedCallback: (item) => {
+          if (item.entityId) this._setValue(item.entityId);
+        },
+      });
+      return;
+    }
+
     if (newValue !== this._value) {
       this._setValue(newValue);
     }

src/components/ha-area-filter.ts

@@ -1,12 +1,12 @@
-import { mdiSofa } from "@mdi/js";
+import { mdiTextureBox } from "@mdi/js";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-dialog";
 import { HomeAssistant } from "../types";
+import "./ha-icon-next";
 import "./ha-svg-icon";
 import "./ha-textfield";
-import "./ha-icon-next";
 
 export type AreaFilterValue = {
   hidden?: string[];
@@ -51,7 +51,7 @@ export class HaAreaPicker extends LitElement {
         @keydown=${this._edit}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
+        <ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>
         <span>${this.label}</span>
         <span slot="secondary">${description}</span>
         <ha-icon-next

src/components/ha-area-floor-picker.ts

@@ -0,0 +1,529 @@
+import { mdiTextureBox } from "@mdi/js";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { LitElement, PropertyValues, TemplateResult, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
+import { stringCompare } from "../common/string/compare";
+import {
+  ScorableTextItem,
+  fuzzyFilterSort,
+} from "../common/string/filter/sequence-matching";
+import { computeRTL } from "../common/util/compute_rtl";
+import { AreaRegistryEntry } from "../data/area_registry";
+import {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+  getDeviceEntityDisplayLookup,
+} from "../data/device_registry";
+import { EntityRegistryDisplayEntry } from "../data/entity_registry";
+import {
+  FloorRegistryEntry,
+  getFloorAreaLookup,
+  subscribeFloorRegistry,
+} from "../data/floor_registry";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
+import "./ha-floor-icon";
+import "./ha-icon-button";
+import "./ha-list-item";
+import "./ha-svg-icon";
+import "./ha-tree-indicator";
+
+type ScorableAreaFloorEntry = ScorableTextItem & FloorAreaEntry;
+
+interface FloorAreaEntry {
+  id: string | null;
+  name: string;
+  icon: string | null;
+  strings: string[];
+  type: "floor" | "area";
+  level: number | null;
+  hasFloor?: boolean;
+  lastArea?: boolean;
+}
+
+@customElement("ha-area-floor-picker")
+export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  /**
+   * Show only areas with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show no areas with entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
+
+  /**
+   * Show only areas with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  /**
+   * List of areas to be excluded.
+   * @type {Array}
+   * @attr exclude-areas
+   */
+  @property({ type: Array, attribute: "exclude-areas" })
+  public excludeAreas?: string[];
+
+  /**
+   * List of floors to be excluded.
+   * @type {Array}
+   * @attr exclude-floors
+   */
+  @property({ type: Array, attribute: "exclude-floors" })
+  public excludeFloors?: string[];
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: (entity: HassEntity) => boolean;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() private _floors?: FloorRegistryEntry[];
+
+  @state() private _opened?: boolean;
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  private _init = false;
+
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeFloorRegistry(this.hass.connection, (floors) => {
+        this._floors = floors;
+      }),
+    ];
+  }
+
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
+  }
+
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
+  }
+
+  private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
+    const rtl = computeRTL(this.hass);
+    return html`
+      <ha-list-item
+        graphic="icon"
+        style=${item.type === "area" && item.hasFloor
+          ? rtl
+            ? "--mdc-list-side-padding-right: 48px;"
+            : "--mdc-list-side-padding-left: 48px;"
+          : ""}
+      >
+        ${item.type === "area" && item.hasFloor
+          ? html`<ha-tree-indicator
+              style=${styleMap({
+                width: "48px",
+                position: "absolute",
+                top: "0px",
+                left: rtl ? undefined : "8px",
+                right: rtl ? "8px" : undefined,
+                transform: rtl ? "scaleX(-1)" : "",
+              })}
+              .end=${item.lastArea}
+              slot="graphic"
+            ></ha-tree-indicator>`
+          : nothing}
+        ${item.type === "floor"
+          ? html`<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>`
+          : item.icon
+            ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
+            : html`<ha-svg-icon
+                slot="graphic"
+                .path=${mdiTextureBox}
+              ></ha-svg-icon>`}
+        ${item.name}
+      </ha-list-item>
+    `;
+  };
+
+  private _getAreas = memoizeOne(
+    (
+      floors: FloorRegistryEntry[],
+      areas: AreaRegistryEntry[],
+      devices: DeviceRegistryEntry[],
+      entities: EntityRegistryDisplayEntry[],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeAreas: this["excludeAreas"],
+      excludeFloors: this["excludeFloors"]
+    ): FloorAreaEntry[] => {
+      if (!areas.length && !floors.length) {
+        return [
+          {
+            id: "no_areas",
+            type: "area",
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
+            icon: null,
+            strings: [],
+            level: null,
+          },
+        ];
+      }
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.area_id);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputAreas = areas;
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+      }
+
+      if (areaIds) {
+        outputAreas = outputAreas.filter((area) =>
+          areaIds!.includes(area.area_id)
+        );
+      }
+
+      if (excludeAreas) {
+        outputAreas = outputAreas.filter(
+          (area) => !excludeAreas!.includes(area.area_id)
+        );
+      }
+
+      if (excludeFloors) {
+        outputAreas = outputAreas.filter(
+          (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
+        );
+      }
+
+      if (!outputAreas.length) {
+        return [
+          {
+            id: "no_areas",
+            type: "area",
+            name: this.hass.localize("ui.components.area-picker.no_match"),
+            icon: null,
+            strings: [],
+            level: null,
+          },
+        ];
+      }
+
+      const floorAreaLookup = getFloorAreaLookup(outputAreas);
+      const unassisgnedAreas = Object.values(outputAreas).filter(
+        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
+      );
+
+      // @ts-ignore
+      const floorAreaEntries: Array<
+        [FloorRegistryEntry | undefined, AreaRegistryEntry[]]
+      > = Object.entries(floorAreaLookup)
+        .map(([floorId, floorAreas]) => {
+          const floor = floors.find((fl) => fl.floor_id === floorId)!;
+          return [floor, floorAreas] as const;
+        })
+        .sort(([floorA], [floorB]) => {
+          if (floorA.level !== floorB.level) {
+            return (floorA.level ?? 0) - (floorB.level ?? 0);
+          }
+          return stringCompare(floorA.name, floorB.name);
+        });
+
+      const output: FloorAreaEntry[] = [];
+
+      floorAreaEntries.forEach(([floor, floorAreas]) => {
+        if (floor) {
+          output.push({
+            id: floor.floor_id,
+            type: "floor",
+            name: floor.name,
+            icon: floor.icon,
+            strings: [floor.floor_id, ...floor.aliases, floor.name],
+            level: floor.level,
+          });
+        }
+        output.push(
+          ...floorAreas.map((area, index, array) => ({
+            id: area.area_id,
+            type: "area" as const,
+            name: area.name,
+            icon: area.icon,
+            strings: [area.area_id, ...area.aliases, area.name],
+            hasFloor: true,
+            level: null,
+            lastArea: index === array.length - 1,
+          }))
+        );
+      });
+
+      if (!output.length && !unassisgnedAreas.length) {
+        output.push({
+          id: "no_areas",
+          type: "area",
+          name: this.hass.localize(
+            "ui.components.area-picker.unassigned_areas"
+          ),
+          icon: null,
+          strings: [],
+          level: null,
+        });
+      }
+
+      output.push(
+        ...unassisgnedAreas.map((area) => ({
+          id: area.area_id,
+          type: "area" as const,
+          name: area.name,
+          icon: area.icon,
+          strings: [area.area_id, ...area.aliases, area.name],
+          level: null,
+        }))
+      );
+
+      return output;
+    }
+  );
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      (!this._init && this.hass && this._floors) ||
+      (this._init && changedProps.has("_opened") && this._opened)
+    ) {
+      this._init = true;
+      const areas = this._getAreas(
+        this._floors!,
+        Object.values(this.hass.areas),
+        Object.values(this.hass.devices),
+        Object.values(this.hass.entities),
+        this.includeDomains,
+        this.excludeDomains,
+        this.includeDeviceClasses,
+        this.deviceFilter,
+        this.entityFilter,
+        this.excludeAreas,
+        this.excludeFloors
+      );
+      this.comboBox.items = areas;
+      this.comboBox.filteredItems = areas;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .helper=${this.helper}
+        item-value-path="id"
+        item-id-path="id"
+        item-label-path="name"
+        .value=${this._value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.area-picker.area")
+          : this.label}
+        .placeholder=${this.placeholder
+          ? this.hass.areas[this.placeholder]?.name
+          : undefined}
+        .renderer=${this._rowRenderer}
+        @filter-changed=${this._filterChanged}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._areaChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const target = ev.target as HaComboBox;
+    const filterString = ev.detail.value;
+    if (!filterString) {
+      this.comboBox.filteredItems = this.comboBox.items;
+      return;
+    }
+
+    const filteredItems = fuzzyFilterSort<ScorableAreaFloorEntry>(
+      filterString,
+      target.items || []
+    );
+
+    this.comboBox.filteredItems = filteredItems;
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private async _areaChanged(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (newValue === "no_areas") {
+      return;
+    }
+
+    const selected = this.comboBox.selectedItem;
+
+    fireEvent(this, "value-changed", {
+      value: {
+        id: selected.id,
+        type: selected.type,
+      },
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-area-floor-picker": HaAreaFloorPicker;
+  }
+}

src/components/ha-area-picker.ts

@@ -1,14 +1,15 @@
+import { mdiTextureBox } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import {
-  fuzzyFilterSort,
   ScorableTextItem,
+  fuzzyFilterSort,
 } from "../common/string/filter/sequence-matching";
 import {
   AreaRegistryEntry,
@@ -20,10 +21,8 @@ import {
   getDeviceEntityDisplayLookup,
 } from "../data/device_registry";
 import { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import {
-  showAlertDialog,
-  showPromptDialog,
-} from "../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box";
@@ -37,14 +36,18 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
   html`<ha-list-item
     graphic="icon"
-    class=${classMap({ "add-new": item.area_id === "add_new" })}
+    class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
   >
     ${item.icon
       ? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
-      : nothing}
+      : html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`}
     ${item.name}
   </ha-list-item>`;
 
+const ADD_NEW_ID = "___ADD_NEW___";
+const NO_ITEMS_ID = "___NO_ITEMS___";
+const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
+
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -133,18 +136,6 @@ export class HaAreaPicker extends LitElement {
       noAdd: this["noAdd"],
       excludeAreas: this["excludeAreas"]
     ): AreaRegistryEntry[] => {
-      if (!areas.length) {
-        return [
-          {
-            area_id: "no_areas",
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-            picture: null,
-            icon: null,
-            aliases: [],
-          },
-        ];
-      }
-
       let deviceEntityLookup: DeviceEntityDisplayLookup = {};
       let inputDevices: DeviceRegistryEntry[] | undefined;
       let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -281,11 +272,13 @@ export class HaAreaPicker extends LitElement {
       if (!outputAreas.length) {
         outputAreas = [
           {
-            area_id: "no_areas",
-            name: this.hass.localize("ui.components.area-picker.no_match"),
+            area_id: NO_ITEMS_ID,
+            floor_id: null,
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
             icon: null,
             aliases: [],
+            labels: [],
           },
         ];
       }
@@ -295,11 +288,13 @@ export class HaAreaPicker extends LitElement {
         : [
             ...outputAreas,
             {
-              area_id: "add_new",
+              area_id: ADD_NEW_ID,
+              floor_id: null,
               name: this.hass.localize("ui.components.area-picker.add_new"),
               picture: null,
               icon: "mdi:plus",
               aliases: [],
+              labels: [],
             },
           ];
     }
@@ -367,20 +362,40 @@ export class HaAreaPicker extends LitElement {
 
     const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
       filterString,
-      target.items || []
+      target.items?.filter(
+        (item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
+      ) || []
     );
-    if (!this.noAdd && filteredItems?.length === 0) {
-      this._suggestion = filterString;
-      this.comboBox.filteredItems = [
-        {
-          area_id: "add_new_suggestion",
-          name: this.hass.localize(
-            "ui.components.area-picker.add_new_sugestion",
-            { name: this._suggestion }
-          ),
-          picture: null,
-        },
-      ];
+    if (filteredItems.length === 0) {
+      if (!this.noAdd) {
+        this.comboBox.filteredItems = [
+          {
+            area_id: NO_ITEMS_ID,
+            floor_id: null,
+            name: this.hass.localize("ui.components.area-picker.no_match"),
+            icon: null,
+            picture: null,
+            labels: [],
+            aliases: [],
+          },
+        ] as AreaRegistryEntry[];
+      } else {
+        this._suggestion = filterString;
+        this.comboBox.filteredItems = [
+          {
+            area_id: ADD_NEW_SUGGESTION_ID,
+            floor_id: null,
+            name: this.hass.localize(
+              "ui.components.area-picker.add_new_sugestion",
+              { name: this._suggestion }
+            ),
+            icon: "mdi:plus",
+            picture: null,
+            labels: [],
+            aliases: [],
+          },
+        ] as AreaRegistryEntry[];
+      }
     } else {
       this.comboBox.filteredItems = filteredItems;
     }
@@ -398,11 +413,13 @@ export class HaAreaPicker extends LitElement {
     ev.stopPropagation();
     let newValue = ev.detail.value;
 
-    if (newValue === "no_areas") {
+    if (newValue === NO_ITEMS_ID) {
       newValue = "";
+      this.comboBox.setInputValue("");
+      return;
     }
 
-    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
+    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
@@ -410,25 +427,14 @@ export class HaAreaPicker extends LitElement {
     }
 
     (ev.target as any).value = this._value;
-    showPromptDialog(this, {
-      title: this.hass.localize("ui.components.area-picker.add_dialog.title"),
-      text: this.hass.localize("ui.components.area-picker.add_dialog.text"),
-      confirmText: this.hass.localize(
-        "ui.components.area-picker.add_dialog.add"
-      ),
-      inputLabel: this.hass.localize(
-        "ui.components.area-picker.add_dialog.name"
-      ),
-      defaultValue:
-        newValue === "add_new_suggestion" ? this._suggestion : undefined,
-      confirm: async (name) => {
-        if (!name) {
-          return;
-        }
+
+    this.hass.loadFragmentTranslation("config");
+
+    showAreaRegistryDetailDialog(this, {
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
+      createEntry: async (values) => {
         try {
-          const area = await createAreaRegistryEntry(this.hass, {
-            name,
-          });
+          const area = await createAreaRegistryEntry(this.hass, values);
           const areas = [...Object.values(this.hass.areas), area];
           this.comboBox.filteredItems = this._getAreas(
             areas,
@@ -448,18 +454,16 @@ export class HaAreaPicker extends LitElement {
         } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
-              "ui.components.area-picker.add_dialog.failed_create_area"
+              "ui.components.area-picker.failed_create_area"
             ),
             text: err.message,
           });
         }
       },
-      cancel: () => {
-        this._setValue(undefined);
-        this._suggestion = undefined;
-        this.comboBox.setInputValue("");
-      },
     });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

src/components/ha-button-menu-new.ts

@@ -0,0 +1,89 @@
+import { Button } from "@material/mwc-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
+import type { HaIconButton } from "./ha-icon-button";
+import "./ha-menu";
+import type { HaMenu } from "./ha-menu";
+
+@customElement("ha-button-menu-new")
+export class HaButtonMenuNew extends LitElement {
+  protected readonly [FOCUS_TARGET];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public positioning?: "fixed" | "absolute" | "popover";
+
+  @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
+    false;
+
+  @query("ha-menu", true) private _menu!: HaMenu;
+
+  public get items() {
+    return this._menu.items;
+  }
+
+  public override focus() {
+    if (this._menu.open) {
+      this._menu.focus();
+    } else {
+      this._triggerButton?.focus();
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div @click=${this._handleClick}>
+        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
+      </div>
+      <ha-menu
+        .positioning=${this.positioning}
+        .hasOverflow=${this.hasOverflow}
+      >
+        <slot></slot>
+      </ha-menu>
+    `;
+  }
+
+  private _handleClick(): void {
+    if (this.disabled) {
+      return;
+    }
+    this._menu.anchorElement = this;
+    if (this._menu.open) {
+      this._menu.close();
+    } else {
+      this._menu.show();
+    }
+  }
+
+  private get _triggerButton() {
+    return this.querySelector(
+      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]'
+    ) as HaIconButton | Button | null;
+  }
+
+  private _setTriggerAria() {
+    if (this._triggerButton) {
+      this._triggerButton.ariaHasPopup = "menu";
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      ::slotted([disabled]) {
+        color: var(--disabled-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button-menu-new": HaButtonMenuNew;
+  }
+}

src/components/ha-button-related-filter-menu.ts

@@ -1,221 +0,0 @@
-import type { Corner } from "@material/mwc-menu";
-import "@material/mwc-menu/mwc-menu-surface";
-import { mdiFilterVariant } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
-import { computeStateName } from "../common/entity/compute_state_name";
-import { computeDeviceName } from "../data/device_registry";
-import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
-import "./device/ha-device-picker";
-import "./entity/ha-entity-picker";
-import "./ha-area-picker";
-import "./ha-icon-button";
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "related-changed": {
-      value?: FilterValue;
-      items?: RelatedResult;
-      filter?: string;
-    };
-  }
-}
-
-interface FilterValue {
-  area?: string;
-  device?: string;
-  entity?: string;
-}
-
-@customElement("ha-button-related-filter-menu")
-export class HaRelatedFilterButtonMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public corner: Corner = "BOTTOM_START";
-
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ attribute: false }) public value?: FilterValue;
-
-  /**
-   * Show no entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  @state() private _open = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-icon-button
-        @click=${this._handleClick}
-        .label=${this.hass.localize("ui.components.related-filter-menu.filter")}
-        .path=${mdiFilterVariant}
-      ></ha-icon-button>
-      <mwc-menu-surface
-        .open=${this._open}
-        .anchor=${this}
-        .fullwidth=${this.narrow}
-        .corner=${this.corner}
-        @closed=${this._onClosed}
-        @input=${stopPropagation}
-      >
-        <ha-area-picker
-          .label=${this.hass.localize(
-            "ui.components.related-filter-menu.filter_by_area"
-          )}
-          .hass=${this.hass}
-          .value=${this.value?.area}
-          no-add
-          @value-changed=${this._areaPicked}
-          @click=${this._preventDefault}
-        ></ha-area-picker>
-        <ha-device-picker
-          .label=${this.hass.localize(
-            "ui.components.related-filter-menu.filter_by_device"
-          )}
-          .hass=${this.hass}
-          .value=${this.value?.device}
-          @value-changed=${this._devicePicked}
-          @click=${this._preventDefault}
-        ></ha-device-picker>
-        <ha-entity-picker
-          .label=${this.hass.localize(
-            "ui.components.related-filter-menu.filter_by_entity"
-          )}
-          .hass=${this.hass}
-          .value=${this.value?.entity}
-          .excludeDomains=${this.excludeDomains}
-          @value-changed=${this._entityPicked}
-          @click=${this._preventDefault}
-        ></ha-entity-picker>
-      </mwc-menu-surface>
-    `;
-  }
-
-  private _handleClick(): void {
-    if (this.disabled) {
-      return;
-    }
-    this._open = true;
-  }
-
-  private _onClosed(ev): void {
-    ev.stopPropagation();
-    this._open = false;
-  }
-
-  private _preventDefault(ev) {
-    ev.preventDefault();
-  }
-
-  private async _entityPicked(ev: CustomEvent) {
-    ev.stopPropagation();
-    const entityId = ev.detail.value;
-    if (!entityId) {
-      fireEvent(this, "related-changed", { value: undefined });
-      return;
-    }
-    const filter = this.hass.localize(
-      "ui.components.related-filter-menu.filtered_by_entity",
-      {
-        entity_name: computeStateName(
-          (ev.currentTarget as any).comboBox.selectedItem
-        ),
-      }
-    );
-    const items = await findRelated(this.hass, "entity", entityId);
-    fireEvent(this, "related-changed", {
-      value: { entity: entityId },
-      filter,
-      items,
-    });
-  }
-
-  private async _devicePicked(ev: CustomEvent) {
-    ev.stopPropagation();
-    const deviceId = ev.detail.value;
-    if (!deviceId) {
-      fireEvent(this, "related-changed", { value: undefined });
-      return;
-    }
-    const filter = this.hass.localize(
-      "ui.components.related-filter-menu.filtered_by_device",
-      {
-        device_name: computeDeviceName(
-          (ev.currentTarget as any).comboBox.selectedItem,
-          this.hass
-        ),
-      }
-    );
-    const items = await findRelated(this.hass, "device", deviceId);
-
-    fireEvent(this, "related-changed", {
-      value: { device: deviceId },
-      filter,
-      items,
-    });
-  }
-
-  private async _areaPicked(ev: CustomEvent) {
-    ev.stopPropagation();
-    const areaId = ev.detail.value;
-    if (!areaId) {
-      fireEvent(this, "related-changed", { value: undefined });
-      return;
-    }
-    const filter = this.hass.localize(
-      "ui.components.related-filter-menu.filtered_by_area",
-      { area_name: (ev.currentTarget as any).comboBox.selectedItem.name }
-    );
-    const items = await findRelated(this.hass, "area", areaId);
-    fireEvent(this, "related-changed", {
-      value: { area: areaId },
-      filter,
-      items,
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: inline-block;
-        position: relative;
-        --mdc-menu-min-width: 250px;
-      }
-      ha-area-picker,
-      ha-device-picker,
-      ha-entity-picker {
-        display: block;
-        width: 300px;
-        padding: 4px 16px;
-        box-sizing: border-box;
-      }
-      ha-area-picker {
-        padding-top: 16px;
-      }
-      ha-entity-picker {
-        padding-bottom: 16px;
-      }
-      :host([narrow]) ha-area-picker,
-      :host([narrow]) ha-device-picker,
-      :host([narrow]) ha-entity-picker {
-        width: 100%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-button-related-filter-menu": HaRelatedFilterButtonMenu;
-  }
-}

src/components/ha-card.ts

@@ -14,6 +14,8 @@ export class HaCard extends LitElement {
           --ha-card-background,
           var(--card-background-color, white)
         );
+        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
+        backdrop-filter: var(--ha-card-backdrop-filter, none);
         box-shadow: var(--ha-card-box-shadow, none);
         box-sizing: border-box;
         border-radius: var(--ha-card-border-radius, 12px);

src/components/ha-circular-progress.ts

@@ -1,6 +1,6 @@
 import "element-internals-polyfill";
 import { MdCircularProgress } from "@material/web/progress/circular-progress";
-import { CSSResult, PropertyValues, css } from "lit";
+import { PropertyValues, css } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
@@ -32,17 +32,15 @@ export class HaCircularProgress extends MdCircularProgress {
     }
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      ...super.styles,
-      css`
-        :host {
-          --md-sys-color-primary: var(--primary-color);
-          --md-circular-progress-size: 48px;
-        }
-      `,
-    ];
-  }
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-color);
+        --md-circular-progress-size: 48px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-color-picker.ts

@@ -2,17 +2,16 @@ import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import {
-  computeCssColor,
-  THEME_COLORS,
-} from "../../../common/color/compute-color";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
-import "../../../components/ha-select";
-import { HomeAssistant } from "../../../types";
+import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import "./ha-select";
+import "./ha-list-item";
+import { HomeAssistant } from "../types";
+import { LocalizeKeys } from "../common/translations/localize";
 
-@customElement("hui-color-picker")
-export class HuiColorPicker extends LitElement {
+@customElement("ha-color-picker")
+export class HaColorPicker extends LitElement {
   @property() public label?: string;
 
   @property() public helper?: string;
@@ -21,6 +20,8 @@ export class HuiColorPicker extends LitElement {
 
   @property() public value?: string;
 
+  @property({ type: Boolean }) public defaultColor = false;
+
   @property({ type: Boolean }) public disabled = false;
 
   _valueSelected(ev) {
@@ -52,19 +53,19 @@ export class HuiColorPicker extends LitElement {
               </span>
             `
           : nothing}
-        <mwc-list-item value="default">
-          ${this.hass.localize(
-            `ui.panel.lovelace.editor.color-picker.default_color`
-          )}
-        </mwc-list-item>
+        ${this.defaultColor
+          ? html` <ha-list-item value="default">
+              ${this.hass.localize(`ui.components.color-picker.default_color`)}
+            </ha-list-item>`
+          : nothing}
         ${Array.from(THEME_COLORS).map(
           (color) => html`
-            <mwc-list-item .value=${color} graphic="icon">
+            <ha-list-item .value=${color} graphic="icon">
               ${this.hass.localize(
-                `ui.panel.lovelace.editor.color-picker.colors.${color}`
+                `ui.components.color-picker.colors.${color}` as LocalizeKeys
               ) || color}
               <span slot="graphic">${this.renderColorCircle(color)}</span>
-            </mwc-list-item>
+            </ha-list-item>
           `
         )}
       </ha-select>
@@ -100,6 +101,6 @@ export class HuiColorPicker extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-color-picker": HuiColorPicker;
+    "ha-color-picker": HaColorPicker;
   }
 }

src/components/ha-control-button.ts

@@ -84,6 +84,7 @@ export class HaControlButton extends LitElement {
         --control-button-background-color: var(--disabled-color);
         --control-button-background-opacity: 0.2;
         --control-button-border-radius: 10px;
+        --control-button-padding: 8px;
         --mdc-icon-size: 20px;
         color: var(--primary-text-color);
         width: 40px;
@@ -95,16 +96,20 @@ export class HaControlButton extends LitElement {
         position: relative;
         cursor: pointer;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
+        text-align: center;
         width: 100%;
         height: 100%;
         border-radius: var(--control-button-border-radius);
         border: none;
         margin: 0;
-        padding: 0;
+        padding: var(--control-button-padding);
         box-sizing: border-box;
-        line-height: 0;
+        line-height: inherit;
+        font-family: Roboto;
+        font-weight: 500;
         outline: none;
         overflow: hidden;
         background: none;
@@ -126,6 +131,8 @@ export class HaControlButton extends LitElement {
           background-color 180ms ease-in-out,
           opacity 180ms ease-in-out;
         opacity: var(--control-button-background-opacity);
+        pointer-events: none;
+        white-space: normal;
       }
       .button {
         transition: color 180ms ease-in-out;
@@ -133,6 +140,7 @@ export class HaControlButton extends LitElement {
       }
       .button ::slotted(*) {
         pointer-events: none;
+        opacity: 0.95;
       }
       .button:disabled {
         cursor: not-allowed;

src/components/ha-control-slider.ts

@@ -67,6 +67,9 @@ export class HaControlSlider extends LitElement {
   @property({ attribute: "tooltip-mode" })
   public tooltipMode: TooltipMode = "interaction";
 
+  @property({ attribute: "touch-action" })
+  public touchAction?: string;
+
   @property({ type: Number })
   public value?: number;
 
@@ -152,7 +155,7 @@ export class HaControlSlider extends LitElement {
   setupListeners() {
     if (this.slider && !this._mc) {
       this._mc = new Manager(this.slider, {
-        touchAction: this.vertical ? "pan-x" : "pan-y",
+        touchAction: this.touchAction ?? (this.vertical ? "pan-x" : "pan-y"),
       });
       this._mc.add(
         new Pan({
@@ -529,7 +532,7 @@ export class HaControlSlider extends LitElement {
           0,
           0
         );
-        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        border-radius: 0 8px 8px 0;
       }
       .slider .slider-track-bar:after {
         top: 0;
@@ -546,7 +549,7 @@ export class HaControlSlider extends LitElement {
           0,
           0
         );
-        border-radius: var(--border-radius) 0 0 var(--border-radius);
+        border-radius: 8px 0 0 8px;
       }
       .slider .slider-track-bar.end::after {
         right: initial;
@@ -561,7 +564,7 @@ export class HaControlSlider extends LitElement {
           calc((1 - var(--value, 0)) * var(--slider-size)),
           0
         );
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
+        border-radius: 8px 8px 0 0;
       }
       :host([vertical]) .slider .slider-track-bar:after {
         top: var(--handle-margin);
@@ -579,7 +582,7 @@ export class HaControlSlider extends LitElement {
           calc((0 - var(--value, 0)) * var(--slider-size)),
           0
         );
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
+        border-radius: 0 0 8px 8px;
       }
       :host([vertical]) .slider .slider-track-bar.end::after {
         top: initial;

src/components/ha-control-switch.ts

@@ -33,6 +33,9 @@ export class HaControlSwitch extends LitElement {
   // SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in)
   @property({ type: String }) pathOff?: string;
 
+  @property({ attribute: "touch-action" })
+  public touchAction?: string;
+
   private _mc?: HammerManager;
 
   protected firstUpdated(changedProperties: PropertyValues): void {
@@ -73,7 +76,7 @@ export class HaControlSwitch extends LitElement {
   setupListeners() {
     if (this.switch && !this._mc) {
       this._mc = new Manager(this.switch, {
-        touchAction: this.vertical ? "pan-x" : "pan-y",
+        touchAction: this.touchAction ?? (this.vertical ? "pan-x" : "pan-y"),
       });
       this._mc.add(
         new Swipe({

src/components/ha-dialog.ts

@@ -75,8 +75,14 @@ export class HaDialog extends DialogBase {
           var(--divider-color)
         );
         z-index: var(--dialog-z-index, 8);
-        -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
-        backdrop-filter: var(--dialog-backdrop-filter, none);
+        -webkit-backdrop-filter: var(
+          --ha-dialog-scrim-backdrop-filter,
+          var(--dialog-backdrop-filter, none)
+        );
+        backdrop-filter: var(
+          --ha-dialog-scrim-backdrop-filter,
+          var(--dialog-backdrop-filter, none)
+        );
         --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
         --mdc-typography-headline6-font-weight: 400;
         --mdc-typography-headline6-font-size: 1.574rem;
@@ -119,6 +125,8 @@ export class HaDialog extends DialogBase {
         margin-top: var(--dialog-surface-margin-top);
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 28px);
+        -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
+        backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;
@@ -139,12 +147,12 @@ export class HaDialog extends DialogBase {
       }
       .header_button {
         position: absolute;
-        right: -8px;
-        top: -8px;
+        right: -12px;
+        top: -12px;
         text-decoration: none;
         color: inherit;
         inset-inline-start: initial;
-        inset-inline-end: -8px;
+        inset-inline-end: -12px;
         direction: var(--direction);
       }
       .dialog-actions {

src/components/ha-expansion-panel.ts

@@ -83,13 +83,11 @@ export class HaExpansionPanel extends LitElement {
 
   protected willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
-    if (changedProps.has("expanded") && this.expanded) {
+    if (changedProps.has("expanded")) {
       this._showContent = this.expanded;
       setTimeout(() => {
         // Verify we're still expanded
-        if (this.expanded) {
-          this._container.style.overflow = "initial";
-        }
+        this._container.style.overflow = this.expanded ? "initial" : "hidden";
       }, 300);
     }
   }

src/components/ha-filter-blueprints.ts

@@ -0,0 +1,193 @@
+import { SelectedDetail } from "@material/mwc-list";
+import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariantRemove } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { Blueprints, fetchBlueprints } from "../data/blueprint";
+import { findRelated, RelatedResult } from "../data/search";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+
+@customElement("ha-filter-blueprints")
+export class HaFilterBlueprints extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property() public type?: "automation" | "script";
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _blueprints?: Blueprints;
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.blueprint.caption")}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._blueprints && this._shouldRender
+          ? html`
+              <mwc-list
+                @selected=${this._blueprintsSelected}
+                multi
+                class="ha-scrollbar"
+              >
+                ${Object.entries(this._blueprints).map(([id, blueprint]) =>
+                  "error" in blueprint
+                    ? nothing
+                    : html`<ha-check-list-item
+                        .value=${id}
+                        .selected=${(this.value || []).includes(id)}
+                      >
+                        ${blueprint.metadata.name || id}
+                      </ha-check-list-item>`
+                )}
+              </mwc-list>
+            `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  protected async firstUpdated() {
+    if (!this.type) {
+      return;
+    }
+    this._blueprints = await fetchBlueprints(this.hass, this.type);
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (this.narrow || !this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49}px`;
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private async _blueprintsSelected(
+    ev: CustomEvent<SelectedDetail<Set<number>>>
+  ) {
+    const blueprints = this._blueprints!;
+    const relatedPromises: Promise<RelatedResult>[] = [];
+
+    if (!ev.detail.index.size) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const value: string[] = [];
+
+    for (const index of ev.detail.index) {
+      const blueprintId = Object.keys(blueprints)[index];
+      value.push(blueprintId);
+      if (this.type) {
+        relatedPromises.push(
+          findRelated(this.hass, `${this.type}_blueprint`, blueprintId)
+        );
+      }
+    }
+    this.value = value;
+    const results = await Promise.all(relatedPromises);
+    const items: Set<string> = new Set();
+    for (const result of results) {
+      if (result[this.type!]) {
+        result[this.type!]!.forEach((item) => items.add(item));
+      }
+    }
+
+    fireEvent(this, "data-table-filter-changed", {
+      value,
+      items: this.type ? items : undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-blueprints": HaFilterBlueprints;
+  }
+}

src/components/ha-filter-categories.ts

@@ -0,0 +1,334 @@
+import { ActionDetail, SelectedDetail } from "@material/mwc-list";
+import {
+  mdiDelete,
+  mdiDotsVertical,
+  mdiFilterVariantRemove,
+  mdiPencil,
+  mdiPlus,
+  mdiTag,
+} from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import {
+  CategoryRegistryEntry,
+  createCategoryRegistryEntry,
+  deleteCategoryRegistryEntry,
+  subscribeCategoryRegistry,
+  updateCategoryRegistryEntry,
+} from "../data/category_registry";
+import { showConfirmationDialog } from "../dialogs/generic/show-dialog-box";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-expansion-panel";
+import "./ha-icon";
+import "./ha-list-item";
+import { stopPropagation } from "../common/dom/stop_propagation";
+
+@customElement("ha-filter-categories")
+export class HaFilterCategories extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property() public scope?: string;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _categories: CategoryRegistryEntry[] = [];
+
+  @state() private _shouldRender = false;
+
+  protected hassSubscribeRequiredHostProps = ["scope"];
+
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeCategoryRegistry(
+        this.hass.connection,
+        this.scope!,
+        (categories) => {
+          this._categories = categories;
+        }
+      ),
+    ];
+  }
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.category.caption")}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`
+              <mwc-list
+                @selected=${this._categorySelected}
+                class="ha-scrollbar"
+                activatable
+              >
+                ${this._categories.length > 0
+                  ? html`<ha-list-item
+                      .selected=${!this.value?.length}
+                      .activated=${!this.value?.length}
+                      >${this.hass.localize(
+                        "ui.panel.config.category.filter.show_all"
+                      )}</ha-list-item
+                    >`
+                  : nothing}
+                ${this._categories.map(
+                  (category) =>
+                    html`<ha-list-item
+                      .value=${category.category_id}
+                      .selected=${this.value?.includes(category.category_id)}
+                      .activated=${this.value?.includes(category.category_id)}
+                      graphic="icon"
+                      hasMeta
+                    >
+                      ${category.icon
+                        ? html`<ha-icon
+                            slot="graphic"
+                            .icon=${category.icon}
+                          ></ha-icon>`
+                        : html`<ha-svg-icon
+                            .path=${mdiTag}
+                            slot="graphic"
+                          ></ha-svg-icon>`}
+                      ${category.name}
+                      <ha-button-menu
+                        @click=${stopPropagation}
+                        @action=${this._handleAction}
+                        slot="meta"
+                        fixed
+                        .categoryId=${category.category_id}
+                      >
+                        <ha-icon-button
+                          .path=${mdiDotsVertical}
+                          slot="trigger"
+                        ></ha-icon-button>
+                        <mwc-list-item graphic="icon"
+                          ><ha-svg-icon
+                            .path=${mdiPencil}
+                            slot="graphic"
+                          ></ha-svg-icon
+                          >${this.hass.localize(
+                            "ui.panel.config.category.editor.edit"
+                          )}</mwc-list-item
+                        >
+                        <mwc-list-item graphic="icon" class="warning"
+                          ><ha-svg-icon
+                            class="warning"
+                            .path=${mdiDelete}
+                            slot="graphic"
+                          ></ha-svg-icon
+                          >${this.hass.localize(
+                            "ui.panel.config.category.editor.delete"
+                          )}</mwc-list-item
+                        >
+                      </ha-button-menu>
+                    </ha-list-item>`
+                )}
+              </mwc-list>
+            `
+          : nothing}
+      </ha-expansion-panel>
+      ${this.expanded
+        ? html`<ha-list-item
+            graphic="icon"
+            @click=${this._addCategory}
+            class="add"
+          >
+            <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
+            ${this.hass.localize("ui.panel.config.category.editor.add")}
+          </ha-list-item>`
+        : nothing}
+    `;
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - (49 + 48)}px`;
+      }, 300);
+    }
+  }
+
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    const categoryId = (ev.currentTarget as any).categoryId;
+    switch (ev.detail.index) {
+      case 0:
+        this._editCategory(categoryId);
+        break;
+      case 1:
+        this._deleteCategory(categoryId);
+        break;
+    }
+  }
+
+  private _editCategory(id: string) {
+    showCategoryRegistryDetailDialog(this, {
+      scope: this.scope!,
+      entry: this._categories.find((cat) => cat.category_id === id),
+      updateEntry: (updates) =>
+        updateCategoryRegistryEntry(this.hass, this.scope!, id, updates),
+    });
+  }
+
+  private async _deleteCategory(id: string) {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.category.editor.confirm_delete"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.category.editor.confirm_delete_text"
+      ),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+    });
+    if (!confirm) {
+      return;
+    }
+    try {
+      await deleteCategoryRegistryEntry(this.hass, this.scope!, id);
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+    } catch (err: any) {
+      alert(`Failed to delete: ${err.message}`);
+    }
+  }
+
+  private _addCategory() {
+    if (!this.scope) {
+      return;
+    }
+    showCategoryRegistryDetailDialog(this, {
+      scope: this.scope,
+      createEntry: (values) =>
+        createCategoryRegistryEntry(this.hass, this.scope!, values),
+    });
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private async _categorySelected(ev: CustomEvent<SelectedDetail<number>>) {
+    if (!ev.detail.index) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+    const index = ev.detail.index - 1;
+
+    const val = this._categories![index]?.category_id;
+    if (!val) {
+      return;
+    }
+    this.value = [val];
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+          position: relative;
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        mwc-list {
+          --mdc-list-item-meta-size: auto;
+          --mdc-list-side-padding-right: 4px;
+          --mdc-icon-button-size: 36px;
+        }
+        .warning {
+          color: var(--error-color);
+        }
+        .add {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-categories": HaFilterCategories;
+  }
+}

src/components/ha-filter-devices.ts

@@ -0,0 +1,258 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { stringCompare } from "../common/string/compare";
+import { computeDeviceName } from "../data/device_registry";
+import { findRelated, RelatedResult } from "../data/search";
+import { haStyleScrollbar } from "../resources/styles";
+import { loadVirtualizer } from "../resources/virtualizer";
+import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
+import "./ha-expansion-panel";
+import "./search-input-outlined";
+
+@customElement("ha-filter-devices")
+export class HaFilterDevices extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property() public type?: keyof RelatedResult;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _filter?: string;
+
+  public willUpdate(properties: PropertyValues) {
+    super.willUpdate(properties);
+
+    if (!this.hasUpdated) {
+      loadVirtualizer();
+    }
+  }
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.devices.caption")}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`<search-input-outlined
+                .hass=${this.hass}
+                .filter=${this._filter}
+                @value-changed=${this._handleSearchChange}
+              >
+              </search-input-outlined>
+              <mwc-list class="ha-scrollbar" multi>
+                <lit-virtualizer
+                  .items=${this._devices(
+                    this.hass.devices,
+                    this._filter || "",
+                    this.value
+                  )}
+                  .keyFunction=${this._keyFunction}
+                  .renderItem=${this._renderItem}
+                  @click=${this._handleItemClick}
+                >
+                </lit-virtualizer>
+              </mwc-list>`
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  private _keyFunction = (device) => device?.id;
+
+  private _renderItem = (device) =>
+    !device
+      ? nothing
+      : html`<ha-check-list-item
+          .value=${device.id}
+          .selected=${this.value?.includes(device.id) ?? false}
+        >
+          ${computeDeviceName(device, this.hass)}
+        </ha-check-list-item>`;
+
+  private _handleItemClick(ev) {
+    const listItem = ev.target.closest("ha-check-list-item");
+    const value = listItem?.value;
+    if (!value) {
+      return;
+    }
+    if (this.value?.includes(value)) {
+      this.value = this.value?.filter((val) => val !== value);
+    } else {
+      this.value = [...(this.value || []), value];
+    }
+    listItem.selected = this.value?.includes(value);
+    this._findRelated();
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value.toLowerCase();
+  }
+
+  private _devices = memoizeOne(
+    (devices: HomeAssistant["devices"], filter: string, _value) => {
+      const values = Object.values(devices);
+      return values
+        .filter(
+          (device) =>
+            !filter ||
+            computeDeviceName(device, this.hass).toLowerCase().includes(filter)
+        )
+        .sort((a, b) =>
+          stringCompare(
+            computeDeviceName(a, this.hass),
+            computeDeviceName(b, this.hass),
+            this.hass.locale.language
+          )
+        );
+    }
+  );
+
+  private async _findRelated() {
+    const relatedPromises: Promise<RelatedResult>[] = [];
+
+    if (!this.value?.length) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const value: string[] = [];
+
+    for (const deviceId of this.value) {
+      value.push(deviceId);
+      if (this.type) {
+        relatedPromises.push(findRelated(this.hass, "device", deviceId));
+      }
+    }
+    this.value = value;
+    const results = await Promise.all(relatedPromises);
+    const items: Set<string> = new Set();
+    for (const result of results) {
+      if (result[this.type!]) {
+        result[this.type!]!.forEach((item) => items.add(item));
+      }
+    }
+
+    fireEvent(this, "data-table-filter-changed", {
+      value,
+      items: this.type ? items : undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-check-list-item {
+          width: 100%;
+        }
+        search-input-outlined {
+          display: block;
+          padding: 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-devices": HaFilterDevices;
+  }
+}

src/components/ha-filter-domains.ts

@@ -0,0 +1,198 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { stringCompare } from "../common/string/compare";
+import { domainToName } from "../data/integration";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-domain-icon";
+import "./search-input-outlined";
+import { computeDomain } from "../common/entity/compute_domain";
+
+@customElement("ha-filter-domains")
+export class HaFilterDomains extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _filter?: string;
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize(
+            "ui.panel.config.entities.picker.headers.domain"
+          )}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`<search-input-outlined
+                .hass=${this.hass}
+                .filter=${this._filter}
+                @value-changed=${this._handleSearchChange}
+              >
+              </search-input-outlined>
+              <mwc-list
+                class="ha-scrollbar"
+                @click=${this._handleItemClick}
+                multi
+              >
+                ${repeat(
+                  this._domains(this.hass.states, this._filter),
+                  (i) => i,
+                  (domain) =>
+                    html`<ha-check-list-item
+                      .value=${domain}
+                      .selected=${(this.value || []).includes(domain)}
+                      graphic="icon"
+                    >
+                      <ha-domain-icon
+                        slot="graphic"
+                        .hass=${this.hass}
+                        .domain=${domain}
+                        brandFallback
+                      ></ha-domain-icon>
+                      ${domainToName(this.hass.localize, domain)}
+                    </ha-check-list-item>`
+                )}
+              </mwc-list> `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  private _domains = memoizeOne((states, filter) => {
+    const domains = new Set<string>();
+    Object.keys(states).forEach((entityId) => {
+      domains.add(computeDomain(entityId));
+    });
+    return Array.from(domains)
+      .filter((domain) => !filter || domain.toLowerCase().includes(filter))
+      .sort((a, b) => stringCompare(a, b, this.hass.locale.language));
+  });
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private _handleItemClick(ev) {
+    const listItem = ev.target.closest("ha-check-list-item");
+    const value = listItem?.value;
+    if (!value) {
+      return;
+    }
+    if (this.value?.includes(value)) {
+      this.value = this.value?.filter((val) => val !== value);
+    } else {
+      this.value = [...(this.value || []), value];
+    }
+
+    listItem.selected = this.value.includes(value);
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value.toLowerCase();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        search-input-outlined {
+          display: block;
+          padding: 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-domains": HaFilterDomains;
+  }
+}

src/components/ha-filter-entities.ts

@@ -0,0 +1,277 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { stringCompare } from "../common/string/compare";
+import { findRelated, RelatedResult } from "../data/search";
+import { haStyleScrollbar } from "../resources/styles";
+import { loadVirtualizer } from "../resources/virtualizer";
+import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
+import "./ha-state-icon";
+import "./search-input-outlined";
+
+@customElement("ha-filter-entities")
+export class HaFilterEntities extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property() public type?: keyof RelatedResult;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _filter?: string;
+
+  public willUpdate(properties: PropertyValues) {
+    super.willUpdate(properties);
+
+    if (!this.hasUpdated) {
+      loadVirtualizer();
+    }
+  }
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.entities.caption")}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`
+              <search-input-outlined
+                .hass=${this.hass}
+                .filter=${this._filter}
+                @value-changed=${this._handleSearchChange}
+              >
+              </search-input-outlined>
+              <mwc-list class="ha-scrollbar" multi>
+                <lit-virtualizer
+                  .items=${this._entities(
+                    this.hass.states,
+                    this.type,
+                    this._filter || "",
+                    this.value
+                  )}
+                  .keyFunction=${this._keyFunction}
+                  .renderItem=${this._renderItem}
+                  @click=${this._handleItemClick}
+                >
+                </lit-virtualizer>
+              </mwc-list>
+            `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+      }, 300);
+    }
+  }
+
+  private _keyFunction = (entity) => entity?.entity_id;
+
+  private _renderItem = (entity) =>
+    !entity
+      ? nothing
+      : html`<ha-check-list-item
+          .value=${entity.entity_id}
+          .selected=${this.value?.includes(entity.entity_id) ?? false}
+          graphic="icon"
+        >
+          <ha-state-icon
+            slot="graphic"
+            .hass=${this.hass}
+            .stateObj=${entity}
+          ></ha-state-icon>
+          ${computeStateName(entity)}
+        </ha-check-list-item>`;
+
+  private _handleItemClick(ev) {
+    const listItem = ev.target.closest("ha-check-list-item");
+    const value = listItem?.value;
+    if (!value) {
+      return;
+    }
+    if (this.value?.includes(value)) {
+      this.value = this.value?.filter((val) => val !== value);
+    } else {
+      this.value = [...(this.value || []), value];
+    }
+    listItem.selected = this.value?.includes(value);
+    this._findRelated();
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value.toLowerCase();
+  }
+
+  private _entities = memoizeOne(
+    (
+      states: HomeAssistant["states"],
+      type: this["type"],
+      filter: string,
+      _value
+    ) => {
+      const values = Object.values(states);
+      return values
+        .filter(
+          (entityState) =>
+            (!type || computeStateDomain(entityState) !== type) &&
+            (!filter ||
+              entityState.entity_id.toLowerCase().includes(filter) ||
+              entityState.attributes.friendly_name
+                ?.toLowerCase()
+                .includes(filter))
+        )
+        .sort((a, b) =>
+          stringCompare(
+            computeStateName(a),
+            computeStateName(b),
+            this.hass.locale.language
+          )
+        );
+    }
+  );
+
+  private async _findRelated() {
+    const relatedPromises: Promise<RelatedResult>[] = [];
+
+    if (!this.value?.length) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const value: string[] = [];
+
+    for (const entityId of this.value) {
+      value.push(entityId);
+      if (this.type) {
+        relatedPromises.push(findRelated(this.hass, "entity", entityId));
+      }
+    }
+    this.value = value;
+    const results = await Promise.all(relatedPromises);
+    const items: Set<string> = new Set();
+    for (const result of results) {
+      if (result[this.type!]) {
+        result[this.type!]!.forEach((item) => items.add(item));
+      }
+    }
+
+    fireEvent(this, "data-table-filter-changed", {
+      value,
+      items: this.type ? items : undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
+          width: 100%;
+        }
+        search-input-outlined {
+          display: block;
+          padding: 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-entities": HaFilterEntities;
+  }
+}

src/components/ha-filter-floor-areas.ts

@@ -0,0 +1,348 @@
+import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { computeRTL } from "../common/util/compute_rtl";
+import {
+  FloorRegistryEntry,
+  getFloorAreaLookup,
+  subscribeFloorRegistry,
+} from "../data/floor_registry";
+import { RelatedResult, findRelated } from "../data/search";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
+import "./ha-floor-icon";
+import "./ha-icon";
+import "./ha-svg-icon";
+import "./ha-tree-indicator";
+
+@customElement("ha-filter-floor-areas")
+export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: {
+    floors?: string[];
+    areas?: string[];
+  };
+
+  @property() public type?: keyof RelatedResult;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  @state() private _floors?: FloorRegistryEntry[];
+
+  protected render() {
+    const areas = this._areas(this.hass.areas, this._floors);
+
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.areas.caption")}
+          ${this.value?.areas?.length || this.value?.floors?.length
+            ? html`<div class="badge">
+                  ${(this.value?.areas?.length || 0) +
+                  (this.value?.floors?.length || 0)}
+                </div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`
+              <mwc-list class="ha-scrollbar">
+                ${repeat(
+                  areas?.floors || [],
+                  (floor) => floor.floor_id,
+                  (floor) => html`
+                    <ha-check-list-item
+                      .value=${floor.floor_id}
+                      .type=${"floors"}
+                      .selected=${this.value?.floors?.includes(
+                        floor.floor_id
+                      ) || false}
+                      graphic="icon"
+                      @request-selected=${this._handleItemClick}
+                    >
+                      <ha-floor-icon
+                        slot="graphic"
+                        .floor=${floor}
+                      ></ha-floor-icon>
+                      ${floor.name}
+                    </ha-check-list-item>
+                    ${repeat(
+                      floor.areas,
+                      (area, index) =>
+                        `${area.area_id}${index === floor.areas.length - 1 ? "___last" : ""}`,
+                      (area, index) =>
+                        this._renderArea(area, index === floor.areas.length - 1)
+                    )}
+                  `
+                )}
+                ${repeat(
+                  areas?.unassisgnedAreas,
+                  (area) => area.area_id,
+                  (area) => this._renderArea(area)
+                )}
+              </mwc-list>
+            `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  private _renderArea(area, last: boolean = false) {
+    const hasFloor = !!area.floor_id;
+    return html`
+      <ha-check-list-item
+        .value=${area.area_id}
+        .selected=${this.value?.areas?.includes(area.area_id) || false}
+        .type=${"areas"}
+        graphic="icon"
+        @request-selected=${this._handleItemClick}
+        class=${classMap({
+          rtl: computeRTL(this.hass),
+          floor: hasFloor,
+        })}
+      >
+        ${hasFloor
+          ? html`
+              <ha-tree-indicator
+                .end=${last}
+                slot="graphic"
+              ></ha-tree-indicator>
+            `
+          : nothing}
+        ${area.icon
+          ? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
+          : html`<ha-svg-icon
+              slot="graphic"
+              .path=${mdiTextureBox}
+            ></ha-svg-icon>`}
+        ${area.name}
+      </ha-check-list-item>
+    `;
+  }
+
+  private _handleItemClick(ev) {
+    ev.stopPropagation();
+
+    const listItem = ev.currentTarget;
+    const type = listItem?.type;
+    const value = listItem?.value;
+
+    if (ev.detail.selected === listItem.selected || !value) {
+      return;
+    }
+
+    if (this.value?.[type]?.includes(value)) {
+      this.value = {
+        ...this.value,
+        [type]: this.value[type].filter((val) => val !== value),
+      };
+    } else {
+      if (!this.value) {
+        this.value = {};
+      }
+      this.value = {
+        ...this.value,
+        [type]: [...(this.value[type] || []), value],
+      };
+    }
+
+    listItem.selected = this.value[type]?.includes(value);
+
+    this._findRelated();
+  }
+
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeFloorRegistry(this.hass.connection, (floors) => {
+        this._floors = floors;
+      }),
+    ];
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49}px`;
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private _areas = memoizeOne(
+    (areaReg: HomeAssistant["areas"], floors?: FloorRegistryEntry[]) => {
+      const areas = Object.values(areaReg);
+
+      const floorAreaLookup = getFloorAreaLookup(areas);
+
+      const unassisgnedAreas = areas.filter(
+        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
+      );
+      return {
+        floors: floors?.map((floor) => ({
+          ...floor,
+          areas: floorAreaLookup[floor.floor_id] || [],
+        })),
+        unassisgnedAreas: unassisgnedAreas,
+      };
+    }
+  );
+
+  private async _findRelated() {
+    const relatedPromises: Promise<RelatedResult>[] = [];
+
+    if (
+      !this.value ||
+      (!this.value.areas?.length && !this.value.floors?.length)
+    ) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: {},
+        items: undefined,
+      });
+      return;
+    }
+
+    if (this.value.areas) {
+      for (const areaId of this.value.areas) {
+        if (this.type) {
+          relatedPromises.push(findRelated(this.hass, "area", areaId));
+        }
+      }
+    }
+
+    if (this.value.floors) {
+      for (const floorId of this.value.floors) {
+        if (this.type) {
+          relatedPromises.push(findRelated(this.hass, "floor", floorId));
+        }
+      }
+    }
+
+    const results = await Promise.all(relatedPromises);
+    const items: Set<string> = new Set();
+    for (const result of results) {
+      if (result[this.type!]) {
+        result[this.type!]!.forEach((item) => items.add(item));
+      }
+    }
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value,
+      items: this.type ? items : undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
+        }
+        .floor {
+          padding-left: 48px;
+          padding-inline-start: 48px;
+          padding-inline-end: 16px;
+        }
+        ha-tree-indicator {
+          width: 56px;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+        }
+        .rtl ha-tree-indicator {
+          right: 0px;
+          left: initial;
+          transform: scaleX(-1);
+        }
+        .subdir {
+          margin-inline-end: 8px;
+          opacity: .6;
+        }
+        .
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-floor-areas": HaFilterFloorAreas;
+  }
+  interface HASSDomEvents {
+    "data-table-filter-changed": { value: any; items: Set<string> | undefined };
+  }
+}

src/components/ha-filter-integrations.ts

@@ -0,0 +1,217 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { stringCompare } from "../common/string/compare";
+import {
+  fetchIntegrationManifests,
+  IntegrationManifest,
+} from "../data/integration";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-domain-icon";
+import "./search-input-outlined";
+
+@customElement("ha-filter-integrations")
+export class HaFilterIntegrations extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _manifests?: IntegrationManifest[];
+
+  @state() private _shouldRender = false;
+
+  @state() private _filter?: string;
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.integrations.caption")}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._manifests && this._shouldRender
+          ? html`<search-input-outlined
+                .hass=${this.hass}
+                .filter=${this._filter}
+                @value-changed=${this._handleSearchChange}
+              >
+              </search-input-outlined>
+              <mwc-list
+                class="ha-scrollbar"
+                @click=${this._handleItemClick}
+                multi
+              >
+                ${repeat(
+                  this._integrations(this._manifests, this._filter, this.value),
+                  (i) => i.domain,
+                  (integration) =>
+                    html`<ha-check-list-item
+                      .value=${integration.domain}
+                      .selected=${(this.value || []).includes(
+                        integration.domain
+                      )}
+                      graphic="icon"
+                    >
+                      <ha-domain-icon
+                        slot="graphic"
+                        .hass=${this.hass}
+                        .domain=${integration.domain}
+                        brandFallback
+                      ></ha-domain-icon>
+                      ${integration.name || integration.domain}
+                    </ha-check-list-item>`
+                )}
+              </mwc-list> `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  protected async firstUpdated() {
+    this._manifests = await fetchIntegrationManifests(this.hass);
+  }
+
+  private _integrations = memoizeOne(
+    (manifest: IntegrationManifest[], filter: string | undefined, _value) =>
+      manifest
+        .filter(
+          (mnfst) =>
+            (!mnfst.integration_type ||
+              !["entity", "system", "hardware"].includes(
+                mnfst.integration_type
+              )) &&
+            (!filter ||
+              mnfst.name.toLowerCase().includes(filter) ||
+              mnfst.domain.toLowerCase().includes(filter))
+        )
+        .sort((a, b) =>
+          stringCompare(
+            a.name || a.domain,
+            b.name || b.domain,
+            this.hass.locale.language
+          )
+        )
+  );
+
+  private _handleItemClick(ev) {
+    const listItem = ev.target.closest("ha-check-list-item");
+    const value = listItem?.value;
+    if (!value) {
+      return;
+    }
+    if (this.value?.includes(value)) {
+      this.value = this.value?.filter((val) => val !== value);
+    } else {
+      this.value = [...(this.value || []), value];
+    }
+    listItem.selected = this.value?.includes(value);
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value.toLowerCase();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        search-input-outlined {
+          display: block;
+          padding: 0 8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-integrations": HaFilterIntegrations;
+  }
+}

src/components/ha-filter-labels.ts

@@ -0,0 +1,228 @@
+import { SelectedDetail } from "@material/mwc-list";
+import "@material/mwc-menu/mwc-menu-surface";
+import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import { computeCssColor } from "../common/color/compute-color";
+import { fireEvent } from "../common/dom/fire_event";
+import { navigate } from "../common/navigate";
+import {
+  LabelRegistryEntry,
+  subscribeLabelRegistry,
+} from "../data/label_registry";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
+import "./ha-expansion-panel";
+import "./ha-icon";
+import "./ha-label";
+
+@customElement("ha-filter-labels")
+export class HaFilterLabels extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _labels: LabelRegistryEntry[] = [];
+
+  @state() private _shouldRender = false;
+
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection, (labels) => {
+        this._labels = labels;
+      }),
+    ];
+  }
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize("ui.panel.config.labels.caption")}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`
+              <mwc-list
+                @selected=${this._labelSelected}
+                class="ha-scrollbar"
+                multi
+              >
+                ${repeat(
+                  this._labels,
+                  (label) => label.label_id,
+                  (label) => {
+                    const color = label.color
+                      ? computeCssColor(label.color)
+                      : undefined;
+                    return html`<ha-check-list-item
+                      .value=${label.label_id}
+                      .selected=${(this.value || []).includes(label.label_id)}
+                      hasMeta
+                    >
+                      <ha-label style=${color ? `--color: ${color}` : ""}>
+                        ${label.icon
+                          ? html`<ha-icon
+                              slot="icon"
+                              .icon=${label.icon}
+                            ></ha-icon>`
+                          : nothing}
+                        ${label.name}
+                      </ha-label>
+                    </ha-check-list-item>`;
+                  }
+                )}
+              </mwc-list>
+            `
+          : nothing}
+      </ha-expansion-panel>
+      ${this.expanded
+        ? html`<ha-list-item
+            graphic="icon"
+            @click=${this._manageLabels}
+            class="add"
+          >
+            <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+            ${this.hass.localize("ui.panel.config.labels.manage_labels")}
+          </ha-list-item>`
+        : nothing}
+    `;
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - (49 + 48)}px`;
+      }, 300);
+    }
+  }
+
+  private _manageLabels() {
+    navigate("/config/labels");
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private async _labelSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+    if (!ev.detail.index.size) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const value: string[] = [];
+
+    for (const index of ev.detail.index) {
+      const labelId = this._labels[index].label_id;
+      value.push(labelId);
+    }
+    this.value = value;
+
+    fireEvent(this, "data-table-filter-changed", {
+      value,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          position: relative;
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        .warning {
+          color: var(--error-color);
+        }
+        ha-label {
+          --ha-label-background-color: var(--color, var(--grey-color));
+          --ha-label-background-opacity: 0.5;
+        }
+        .add {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-labels": HaFilterLabels;
+  }
+}

src/components/ha-filter-states.ts

@@ -0,0 +1,183 @@
+import { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
+import "./ha-expansion-panel";
+import "./ha-icon";
+
+@customElement("ha-filter-states")
+export class HaFilterStates extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ attribute: false }) public states?: {
+    value: any;
+    label?: string;
+    icon?: string;
+  }[];
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _shouldRender = false;
+
+  protected render() {
+    if (!this.states) {
+      return nothing;
+    }
+    const hasIcon = this.states.find((item) => item.icon);
+    return html`
+      <ha-expansion-panel
+        leftChevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.label}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`
+              <mwc-list
+                @selected=${this._statesSelected}
+                multi
+                class="ha-scrollbar"
+              >
+                ${this.states.map(
+                  (item) =>
+                    html`<ha-check-list-item
+                      .value=${item.value}
+                      .selected=${this.value?.includes(item.value) ?? false}
+                      .graphic=${hasIcon ? "icon" : null}
+                    >
+                      ${item.icon
+                        ? html`<ha-icon
+                            slot="graphic"
+                            .icon=${item.icon}
+                          ></ha-icon>`
+                        : nothing}
+                      ${item.label}
+                    </ha-check-list-item>`
+                )}
+              </mwc-list>
+            `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("mwc-list")!.style.height =
+          `${this.clientHeight - 49}px`;
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private async _statesSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+    if (!ev.detail.index.size) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const value: string[] = [];
+
+    for (const index of ev.detail.index) {
+      const val = this.states![index].value;
+      value.push(val);
+    }
+    this.value = value;
+
+    fireEvent(this, "data-table-filter-changed", {
+      value,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: 0;
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          font-size: 11px;
+          background-color: var(--primary-color);
+          line-height: 16px;
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-states": HaFilterStates;
+  }
+}

src/components/ha-floor-icon.ts

@@ -0,0 +1,56 @@
+import {
+  mdiHome,
+  mdiHomeFloor0,
+  mdiHomeFloor1,
+  mdiHomeFloor2,
+  mdiHomeFloor3,
+  mdiHomeFloorNegative1,
+} from "@mdi/js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { FloorRegistryEntry } from "../data/floor_registry";
+import "./ha-icon";
+import "./ha-svg-icon";
+
+export const floorDefaultIconPath = (
+  floor: Pick<FloorRegistryEntry, "level">
+) => {
+  switch (floor.level) {
+    case 0:
+      return mdiHomeFloor0;
+    case 1:
+      return mdiHomeFloor1;
+    case 2:
+      return mdiHomeFloor2;
+    case 3:
+      return mdiHomeFloor3;
+    case -1:
+      return mdiHomeFloorNegative1;
+  }
+  return mdiHome;
+};
+
+@customElement("ha-floor-icon")
+export class HaFloorIcon extends LitElement {
+  @property({ attribute: false }) public floor!: Pick<
+    FloorRegistryEntry,
+    "icon" | "level"
+  >;
+
+  @property() public icon?: string;
+
+  protected render() {
+    if (this.floor.icon) {
+      return html`<ha-icon .icon=${this.floor.icon}></ha-icon>`;
+    }
+    const defaultPath = floorDefaultIconPath(this.floor);
+
+    return html`<ha-svg-icon .path=${defaultPath}></ha-svg-icon>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-floor-icon": HaFloorIcon;
+  }
+}

src/components/ha-floor-picker.ts

@@ -0,0 +1,500 @@
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
+import {
+  ScorableTextItem,
+  fuzzyFilterSort,
+} from "../common/string/filter/sequence-matching";
+import {
+  AreaRegistryEntry,
+  updateAreaRegistryEntry,
+} from "../data/area_registry";
+import {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+  getDeviceEntityDisplayLookup,
+} from "../data/device_registry";
+import { EntityRegistryDisplayEntry } from "../data/entity_registry";
+import {
+  FloorRegistryEntry,
+  createFloorRegistryEntry,
+  getFloorAreaLookup,
+  subscribeFloorRegistry,
+} from "../data/floor_registry";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
+import { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
+import "./ha-floor-icon";
+import "./ha-icon-button";
+import "./ha-list-item";
+
+type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
+
+const ADD_NEW_ID = "___ADD_NEW___";
+const NO_FLOORS_ID = "___NO_FLOORS___";
+const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
+
+const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) =>
+  html`<ha-list-item
+    graphic="icon"
+    class=${classMap({ "add-new": item.floor_id === ADD_NEW_ID })}
+  >
+    <ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>
+    ${item.name}
+  </ha-list-item>`;
+
+@customElement("ha-floor-picker")
+export class HaFloorPicker extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ type: Boolean, attribute: "no-add" })
+  public noAdd = false;
+
+  /**
+   * Show only floors with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show no floors with entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
+
+  /**
+   * Show only floors with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  /**
+   * List of floors to be excluded.
+   * @type {Array}
+   * @attr exclude-floors
+   */
+  @property({ type: Array, attribute: "exclude-floor" })
+  public excludeFloors?: string[];
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: (entity: HassEntity) => boolean;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() private _opened?: boolean;
+
+  @state() private _floors?: FloorRegistryEntry[];
+
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  private _suggestion?: string;
+
+  private _init = false;
+
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
+  }
+
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
+  }
+
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeFloorRegistry(this.hass.connection, (floors) => {
+        this._floors = floors;
+      }),
+    ];
+  }
+
+  private _getFloors = memoizeOne(
+    (
+      floors: FloorRegistryEntry[],
+      areas: AreaRegistryEntry[],
+      devices: DeviceRegistryEntry[],
+      entities: EntityRegistryDisplayEntry[],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      noAdd: this["noAdd"],
+      excludeFloors: this["excludeFloors"]
+    ): FloorRegistryEntry[] => {
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.area_id);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputFloors = floors;
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+      }
+
+      if (areaIds) {
+        const floorAreaLookup = getFloorAreaLookup(areas);
+        outputFloors = outputFloors.filter((floor) =>
+          floorAreaLookup[floor.floor_id]?.some((area) =>
+            areaIds!.includes(area.area_id)
+          )
+        );
+      }
+
+      if (excludeFloors) {
+        outputFloors = outputFloors.filter(
+          (floor) => !excludeFloors!.includes(floor.floor_id)
+        );
+      }
+
+      if (!outputFloors.length) {
+        outputFloors = [
+          {
+            floor_id: NO_FLOORS_ID,
+            name: this.hass.localize("ui.components.floor-picker.no_floors"),
+            icon: null,
+            level: null,
+            aliases: [],
+          },
+        ];
+      }
+
+      return noAdd
+        ? outputFloors
+        : [
+            ...outputFloors,
+            {
+              floor_id: ADD_NEW_ID,
+              name: this.hass.localize("ui.components.floor-picker.add_new"),
+              icon: "mdi:plus",
+              level: null,
+              aliases: [],
+            },
+          ];
+    }
+  );
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      (!this._init && this.hass && this._floors) ||
+      (this._init && changedProps.has("_opened") && this._opened)
+    ) {
+      this._init = true;
+      const floors = this._getFloors(
+        this._floors!,
+        Object.values(this.hass.areas),
+        Object.values(this.hass.devices),
+        Object.values(this.hass.entities),
+        this.includeDomains,
+        this.excludeDomains,
+        this.includeDeviceClasses,
+        this.deviceFilter,
+        this.entityFilter,
+        this.noAdd,
+        this.excludeFloors
+      ).map((floor) => ({
+        ...floor,
+        strings: [floor.floor_id, floor.name, ...floor.aliases],
+      }));
+      this.comboBox.items = floors;
+      this.comboBox.filteredItems = floors;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .helper=${this.helper}
+        item-value-path="floor_id"
+        item-id-path="floor_id"
+        item-label-path="name"
+        .value=${this._value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.floor-picker.floor")
+          : this.label}
+        .placeholder=${this.placeholder
+          ? this._floors?.find((floor) => floor.floor_id === this.placeholder)
+              ?.name
+          : undefined}
+        .renderer=${rowRenderer}
+        @filter-changed=${this._filterChanged}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._floorChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const target = ev.target as HaComboBox;
+    const filterString = ev.detail.value;
+    if (!filterString) {
+      this.comboBox.filteredItems = this.comboBox.items;
+      return;
+    }
+
+    const filteredItems = fuzzyFilterSort<ScorableFloorRegistryEntry>(
+      filterString,
+      target.items?.filter(
+        (item) => ![NO_FLOORS_ID, ADD_NEW_ID].includes(item.label_id)
+      ) || []
+    );
+    if (filteredItems.length === 0) {
+      if (this.noAdd) {
+        this.comboBox.filteredItems = [
+          {
+            floor_id: NO_FLOORS_ID,
+            name: this.hass.localize("ui.components.floor-picker.no_match"),
+            icon: null,
+            level: null,
+            aliases: [],
+          },
+        ] as FloorRegistryEntry[];
+      } else {
+        this._suggestion = filterString;
+        this.comboBox.filteredItems = [
+          {
+            floor_id: ADD_NEW_SUGGESTION_ID,
+            name: this.hass.localize(
+              "ui.components.floor-picker.add_new_sugestion",
+              { name: this._suggestion }
+            ),
+            icon: "mdi:plus",
+            level: null,
+            aliases: [],
+          },
+        ] as FloorRegistryEntry[];
+      }
+    } else {
+      this.comboBox.filteredItems = filteredItems;
+    }
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private _floorChanged(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    let newValue = ev.detail.value;
+
+    if (newValue === NO_FLOORS_ID) {
+      newValue = "";
+      this.comboBox.setInputValue("");
+      return;
+    }
+
+    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
+      if (newValue !== this._value) {
+        this._setValue(newValue);
+      }
+      return;
+    }
+
+    (ev.target as any).value = this._value;
+
+    this.hass.loadFragmentTranslation("config");
+
+    showFloorRegistryDetailDialog(this, {
+      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
+      createEntry: async (values, addedAreas) => {
+        try {
+          const floor = await createFloorRegistryEntry(this.hass, values);
+          addedAreas.forEach((areaId) => {
+            updateAreaRegistryEntry(this.hass, areaId, {
+              floor_id: floor.floor_id,
+            });
+          });
+          const floors = [...this._floors!, floor];
+          this.comboBox.filteredItems = this._getFloors(
+            floors,
+            Object.values(this.hass.areas)!,
+            Object.values(this.hass.devices)!,
+            Object.values(this.hass.entities)!,
+            this.includeDomains,
+            this.excludeDomains,
+            this.includeDeviceClasses,
+            this.deviceFilter,
+            this.entityFilter,
+            this.noAdd,
+            this.excludeFloors
+          );
+          await this.updateComplete;
+          await this.comboBox.updateComplete;
+          this._setValue(floor.floor_id);
+        } catch (err: any) {
+          showAlertDialog(this, {
+            title: this.hass.localize(
+              "ui.components.floor-picker.failed_create_floor"
+            ),
+            text: err.message,
+          });
+        }
+      },
+    });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
+  }
+
+  private _setValue(value?: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-floor-picker": HaFloorPicker;
+  }
+}

src/components/ha-floors-picker.ts

@@ -0,0 +1,169 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../types";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./ha-floor-picker";
+
+@customElement("ha-floors-picker")
+export class HaFloorsPicker extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property({ type: Array }) public value?: string[];
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ type: Boolean, attribute: "no-add" })
+  public noAdd = false;
+
+  /**
+   * Show only floors with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show no floors with entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
+
+  /**
+   * Show only floors with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: (entity: HassEntity) => boolean;
+
+  @property({ attribute: "picked-floor-label" })
+  public pickedFloorLabel?: string;
+
+  @property({ attribute: "pick-floor-label" })
+  public pickFloorLabel?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+
+    const currentFloors = this._currentFloors;
+    return html`
+      ${currentFloors.map(
+        (floor) => html`
+          <div>
+            <ha-floor-picker
+              .curValue=${floor}
+              .noAdd=${this.noAdd}
+              .hass=${this.hass}
+              .value=${floor}
+              .label=${this.pickedFloorLabel}
+              .includeDomains=${this.includeDomains}
+              .excludeDomains=${this.excludeDomains}
+              .includeDeviceClasses=${this.includeDeviceClasses}
+              .deviceFilter=${this.deviceFilter}
+              .entityFilter=${this.entityFilter}
+              .disabled=${this.disabled}
+              @value-changed=${this._floorChanged}
+            ></ha-floor-picker>
+          </div>
+        `
+      )}
+      <div>
+        <ha-floor-picker
+          .noAdd=${this.noAdd}
+          .hass=${this.hass}
+          .label=${this.pickFloorLabel}
+          .helper=${this.helper}
+          .includeDomains=${this.includeDomains}
+          .excludeDomains=${this.excludeDomains}
+          .includeDeviceClasses=${this.includeDeviceClasses}
+          .deviceFilter=${this.deviceFilter}
+          .entityFilter=${this.entityFilter}
+          .disabled=${this.disabled}
+          .placeholder=${this.placeholder}
+          .required=${this.required && !currentFloors.length}
+          @value-changed=${this._addFloor}
+          .excludeFloors=${currentFloors}
+        ></ha-floor-picker>
+      </div>
+    `;
+  }
+
+  private get _currentFloors(): string[] {
+    return this.value || [];
+  }
+
+  private async _updateFloors(floors) {
+    this.value = floors;
+
+    fireEvent(this, "value-changed", {
+      value: floors,
+    });
+  }
+
+  private _floorChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const curValue = (ev.currentTarget as any).curValue;
+    const newValue = ev.detail.value;
+    if (newValue === curValue) {
+      return;
+    }
+    const currentFloors = this._currentFloors;
+    if (!newValue || currentFloors.includes(newValue)) {
+      this._updateFloors(currentFloors.filter((ent) => ent !== curValue));
+      return;
+    }
+    this._updateFloors(
+      currentFloors.map((ent) => (ent === curValue ? newValue : ent))
+    );
+  }
+
+  private _addFloor(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    const toAdd = ev.detail.value;
+    if (!toAdd) {
+      return;
+    }
+    (ev.currentTarget as any).value = "";
+    const currentFloors = this._currentFloors;
+    if (currentFloors.includes(toAdd)) {
+      return;
+    }
+
+    this._updateFloors([...currentFloors, toAdd]);
+  }
+
+  static override styles = css`
+    div {
+      margin-top: 8px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-floors-picker": HaFloorsPicker;
+  }
+}