20240731.0 (#21510)

.browserslistrc

@@ -1,28 +1,25 @@
 [modern]
-# Support for dynamic import is the main litmus test for serving modern builds.
+# Modern builds target recent browsers supporting the latest features to minimize transpilation, polyfills, etc.
-# Although officially a ES2020 feature, browsers implemented it early, so this
+# It is served to browsers meeting the following requirements:
-# enables all of ES2017 and some features in ES2018.
+# - released in the last year + current alpha/beta versions
-supports es6-module-dynamic-import
+# - Firefox extended support release (ESR)
-
+# - with global utilization at or above 0.5%
-# Exclude Safari 11-12 because of a bug in tagged template literals
+# - must support dynamic import of ES modules
-# https://bugs.webkit.org/show_bug.cgi?id=190756
+# - exclude browsers no longer being maintained
-# Note: Dropping version 11 also enables several more ES2018 features
+# - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
-not Safari < 13
+unreleased versions
-not iOS < 13
+last 1 year
-
+Firefox ESR
-# Exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
+>= 0.5% and supports es6-module-dynamic-import
-# Babel ignores these automatically, but we need here for Webpack to output ESM with dynamic imports
+not dead
 not KaiOS > 0
 not QQAndroid > 0
 not UCAndroid > 0
 
-# Exclude unsupported browsers
-not dead
-
 [legacy]
 # Legacy builds are served when modern requirements are not met and support browsers:
 # - released in the last 7 years + current alpha/beta versionss
-# - with global utilization above 0.05%
+# - with global utilization at or above 0.05%
 # The lattermost query ensures that support for popular old browsers is not dropped too early
 # (e.g. IE 11, Android 4.4, or Samsung 4).
 #
@@ -36,4 +33,10 @@ not dead
 # As of May 2023, only web sockets must be added to the query.
 unreleased versions
 last 7 years
-> 0.05% and supports websockets
+>= 0.05% and supports websockets
+
+[legacy-sw]
+# Same as legacy plus supports service workers
+unreleased versions
+last 7 years
+>= 0.05% and supports websockets and supports serviceworkers

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -63,7 +63,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v4.1.7
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v4.1.7
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/release.yaml

@@ -34,7 +34,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.0.6
+        uses: softprops/action-gh-release@v2.0.8
         with:
           files: |
             dist/*.whl
@@ -74,9 +74,9 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2024.01.0
+        uses: home-assistant/wheels@2024.07.1
         with:
-          abi: cp311
+          abi: cp312
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

.husky/pre-commit

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

.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch

@@ -0,0 +1,55 @@
+diff --git a/build/inject-manifest.js b/build/inject-manifest.js
+index 60e3d2bb51c11a19fbbedbad65e101082ec41c36..fed6026630f43f86e25446383982cf6fb694313b 100644
+--- a/build/inject-manifest.js
++++ b/build/inject-manifest.js
+@@ -104,7 +104,7 @@ async function injectManifest(config) {
+             replaceString: manifestString,
+             searchString: options.injectionPoint,
+         });
+-        filesToWrite[options.swDest] = source;
++        filesToWrite[options.swDest] = source.replace(url, encodeURI(upath_1.default.basename(destPath)));
+         filesToWrite[destPath] = map;
+     }
+     else {
+diff --git a/build/lib/translate-url-to-sourcemap-paths.js b/build/lib/translate-url-to-sourcemap-paths.js
+index 3220c5474eeac6e8a56ca9b2ac2bd9be48529e43..5f003879a904d4840529a42dd056d288fd213771 100644
+--- a/build/lib/translate-url-to-sourcemap-paths.js
++++ b/build/lib/translate-url-to-sourcemap-paths.js
+@@ -22,7 +22,7 @@ function translateURLToSourcemapPaths(url, swSrc, swDest) {
+         const possibleSrcPath = upath_1.default.resolve(upath_1.default.dirname(swSrc), url);
+         if (fs_extra_1.default.existsSync(possibleSrcPath)) {
+             srcPath = possibleSrcPath;
+-            destPath = upath_1.default.resolve(upath_1.default.dirname(swDest), url);
++            destPath = `${swDest}.map`;
+         }
+         else {
+             warning = `${errors_1.errors['cant-find-sourcemap']} ${possibleSrcPath}`;
+diff --git a/src/inject-manifest.ts b/src/inject-manifest.ts
+index 8795ddcaa77aea7b0356417e4bc4b19e2b3f860c..fcdc68342d9ac53936c9ed40a9ccfc2f5070cad3 100644
+--- a/src/inject-manifest.ts
++++ b/src/inject-manifest.ts
+@@ -129,7 +129,10 @@ export async function injectManifest(
+       searchString: options.injectionPoint!,
+     });
+ 
+-    filesToWrite[options.swDest] = source;
++    filesToWrite[options.swDest] = source.replace(
++      url!,
++      encodeURI(upath.basename(destPath)),
++    );
+     filesToWrite[destPath] = map;
+   } else {
+     // If there's no sourcemap associated with swSrc, a simple string
+diff --git a/src/lib/translate-url-to-sourcemap-paths.ts b/src/lib/translate-url-to-sourcemap-paths.ts
+index 072eac40d4ef5d095a01cb7f7e392a9e034853bd..f0bbe69e88ef3a415de18a7e9cb264daea273d71 100644
+--- a/src/lib/translate-url-to-sourcemap-paths.ts
++++ b/src/lib/translate-url-to-sourcemap-paths.ts
+@@ -28,7 +28,7 @@ export function translateURLToSourcemapPaths(
+     const possibleSrcPath = upath.resolve(upath.dirname(swSrc), url);
+     if (fse.existsSync(possibleSrcPath)) {
+       srcPath = possibleSrcPath;
+-      destPath = upath.resolve(upath.dirname(swDest), url);
++      destPath = `${swDest}.map`;
+     } else {
+       warning = `${errors['cant-find-sourcemap']} ${possibleSrcPath}`;
+     }

build-scripts/bundle.cjs

@@ -47,7 +47,7 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __DEV__: !isProdBuild,
-  __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+  __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
   __SUPERVISOR__: false,
@@ -79,7 +79,12 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   sourceMap: !isTestBuild,
 });
 
-module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
+module.exports.babelOptions = ({
+  latestBuild,
+  isProdBuild,
+  isTestBuild,
+  sw,
+}) => ({
   babelrc: false,
   compact: false,
   assumptions: {
@@ -87,7 +92,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     setPublicClassFields: true,
     setSpreadProperties: true,
   },
-  browserslistEnv: latestBuild ? "modern" : "legacy",
+  browserslistEnv: latestBuild ? "modern" : `legacy${sw ? "-sw" : ""}`,
   presets: [
     [
       "@babel/preset-env",
@@ -135,8 +140,14 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "@babel/plugin-transform-runtime",
       { version: dependencies["@babel/runtime"] },
     ],
-    // Support  some proposals still in TC39 process
+    // Transpile decorators (still in TC39 process)
-    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    // Modern browsers support class fields and private methods, but transform is required with the older decorator version dictated by Lit
+    [
+      "@babel/plugin-proposal-decorators",
+      { version: "2018-09", decoratorsBeforeExport: true },
+    ],
+    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-transform-private-methods",
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
@@ -215,7 +226,13 @@ module.exports.config = {
     return {
       name: "frontend" + nameSuffix(latestBuild),
       entry: {
-        service_worker: "./src/entrypoints/service_worker.ts",
+        "service-worker":
+          !env.useRollup() && !latestBuild
+            ? {
+                import: "./src/entrypoints/service-worker.ts",
+                layer: "sw",
+              }
+            : "./src/entrypoints/service-worker.ts",
         app: "./src/entrypoints/app.ts",
         authorize: "./src/entrypoints/authorize.ts",
         onboarding: "./src/entrypoints/onboarding.ts",

build-scripts/gulp/compress.js

@@ -1,19 +1,54 @@
 // Tasks to compress
 
+import { constants } from "node:zlib";
 import gulp from "gulp";
+import brotli from "gulp-brotli";
 import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
+const filesGlob = "*.{js,json,css,svg,xml}";
+const brotliOptions = {
+  skipLarger: true,
+  params: {
+    [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
+  },
+};
 const zopfliOptions = { threshold: 150 };
 
-const compressDist = (rootDir) =>
+const compressDistBrotli = (rootDir, modernDir) =>
   gulp
-    .src([
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
-      `${rootDir}/**/*.{js,json,css,svg,xml}`,
+      base: rootDir,
+    })
+    .pipe(brotli(brotliOptions))
+    .pipe(gulp.dest(rootDir));
+
+const compressDistZopfli = (rootDir, modernDir) =>
+  gulp
+    .src(
+      [
+        `${rootDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
+        `!${rootDir}/sw-modern.js`,
         `${rootDir}/{authorize,onboarding}.html`,
-    ])
+      ],
+      { base: rootDir }
+    )
     .pipe(zopfli(zopfliOptions))
     .pipe(gulp.dest(rootDir));
 
-gulp.task("compress-app", () => compressDist(paths.app_output_root));
+const compressAppBrotli = () =>
-gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));
+  compressDistBrotli(paths.app_output_root, paths.app_output_latest);
+const compressHassioBrotli = () =>
+  compressDistBrotli(paths.hassio_output_root, paths.hassio_output_latest);
+
+const compressAppZopfli = () =>
+  compressDistZopfli(paths.app_output_root, paths.app_output_latest);
+const compressHassioZopfli = () =>
+  compressDistZopfli(paths.hassio_output_root, paths.hassio_output_latest);
+
+gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(compressHassioBrotli, compressHassioZopfli)
+);

build-scripts/gulp/entry-html.js

@@ -1,5 +1,6 @@
 // Tasks to generate entry HTML
 
+import { getUserAgentRegex } from "browserslist-useragent-regexp";
 import fs from "fs-extra";
 import gulp from "gulp";
 import { minify } from "html-minifier-terser";
@@ -17,6 +18,12 @@ const renderTemplate = (templateFile, data = {}) => {
     ...data,
     useRollup: env.useRollup(),
     useWDS: env.useWDS(),
+    modernRegex: getUserAgentRegex({
+      env: "modern",
+      allowHigherVersions: true,
+      mobileToDesktop: true,
+      throwOnMissing: true,
+    }).toString(),
     // Resolve any child/nested templates relative to the parent and pass the same data
     renderTemplate: (childTemplate) =>
       renderTemplate(

build-scripts/gulp/service-worker.js

@@ -1,19 +1,18 @@
-// Generate service worker.
+// Generate service workers
-// Based on manifest, create a file with the content as service_worker.js
 
-import fs from "fs-extra";
+import { deleteAsync } from "del";
 import gulp from "gulp";
-import path from "path";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
-import sourceMapUrl from "source-map-url";
+import { join, relative } from "node:path";
-import workboxBuild from "workbox-build";
+import { injectManifest } from "workbox-build";
 import paths from "../paths.cjs";
 
-const swDest = path.resolve(paths.app_output_root, "service_worker.js");
+const SW_MAP = {
+  [paths.app_output_latest]: "modern",
+  [paths.app_output_es5]: "legacy",
+};
 
-const writeSW = (content) => fs.outputFileSync(swDest, content.trim() + "\n");
+const SW_DEV =
-
-gulp.task("gen-service-worker-app-dev", (done) => {
-  writeSW(
   `
 console.debug('Service worker disabled in development');
 
@@ -22,46 +21,39 @@ self.addEventListener('install', (event) => {
   // removing any prod service worker the dev might have running
   self.skipWaiting();
 });
-  `
+  `.trim() + "\n";
+
+gulp.task("gen-service-worker-app-dev", async () => {
+  await mkdir(paths.app_output_root, { recursive: true });
+  await Promise.all(
+    Object.values(SW_MAP).map((build) =>
+      writeFile(join(paths.app_output_root, `sw-${build}.js`), SW_DEV, {
+        encoding: "utf-8",
+      })
+    )
   );
-  done();
 });
 
-gulp.task("gen-service-worker-app-prod", async () => {
+gulp.task("gen-service-worker-app-prod", () =>
-  // Read bundled source file
+  Promise.all(
-  const bundleManifestLatest = fs.readJsonSync(
+    Object.entries(SW_MAP).map(async ([outPath, build]) => {
-    path.resolve(paths.app_output_latest, "manifest.json")
+      const manifest = JSON.parse(
+        await readFile(join(outPath, "manifest.json"), "utf-8")
       );
-  let serviceWorkerContent = fs.readFileSync(
+      const swSrc = join(paths.app_output_root, manifest["service-worker.js"]);
-    paths.app_output_root + bundleManifestLatest["service_worker.js"],
+      const buildDir = relative(paths.app_output_root, outPath);
-    "utf-8"
+      const { warnings } = await injectManifest({
-  );
+        swSrc,
-
+        swDest: join(paths.app_output_root, `sw-${build}.js`),
-  // Delete old file from frontend_latest so manifest won't pick it up
+        injectionPoint: "__WB_MANIFEST__",
-  fs.removeSync(
-    paths.app_output_root + bundleManifestLatest["service_worker.js"]
-  );
-  fs.removeSync(
-    paths.app_output_root + bundleManifestLatest["service_worker.js.map"]
-  );
-
-  // Remove ES5
-  const bundleManifestES5 = fs.readJsonSync(
-    path.resolve(paths.app_output_es5, "manifest.json")
-  );
-  fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
-  fs.removeSync(
-    paths.app_output_root + bundleManifestES5["service_worker.js.map"]
-  );
-
-  const workboxManifest = await workboxBuild.getManifest({
         // Files that mach this pattern will be considered unique and skip revision check
         // ignore JS files + translation files
-    dontCacheBustURLsMatching: /(frontend_latest\/.+|static\/translations\/.+)/,
+        dontCacheBustURLsMatching: new RegExp(
-
+          `(?:${buildDir}/.+|static/translations/.+)`
+        ),
         globDirectory: paths.app_output_root,
         globPatterns: [
-      "frontend_latest/*.js",
+          `${buildDir}/*.js`,
           // Cache all English translations because we catch them as fallback
           // Using pattern to match hash instead of * to avoid caching en-GB
           // 'v' added as valid hash letter because in dev we hash with 'dev'
@@ -75,19 +67,15 @@ gulp.task("gen-service-worker-app-prod", async () => {
           "static/fonts/roboto/Roboto-Regular.woff2",
           "static/fonts/roboto/Roboto-Bold.woff2",
         ],
+        globIgnores: [`${buildDir}/service-worker*`],
       });
-
+      if (warnings.length > 0) {
-  for (const warning of workboxManifest.warnings) {
+        console.warn(
-    console.warn(warning);
+          `Problems while injecting ${build} service worker:\n`,
-  }
+          warnings.join("\n")
-
+        );
-  // remove source map and add WB manifest
+      }
-  serviceWorkerContent = sourceMapUrl.removeFrom(serviceWorkerContent);
+      await deleteAsync(`${swSrc}?(.map)`);
-  serviceWorkerContent = serviceWorkerContent.replace(
+    })
-    "WB_MANIFEST",
+  )
-    JSON.stringify(workboxManifest.manifestEntries)
 );
-
-  // Write new file to root
-  fs.writeFileSync(swDest, serviceWorkerContent);
-});

build-scripts/webpack.cjs

@@ -63,14 +63,19 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          use: {
+          use: (info) => ({
             loader: "babel-loader",
             options: {
-              ...bundle.babelOptions({ latestBuild, isProdBuild, isTestBuild }),
+              ...bundle.babelOptions({
+                latestBuild,
+                isProdBuild,
+                isTestBuild,
+                sw: info.issuerLayer === "sw",
+              }),
               cacheDirectory: !isProdBuild,
               cacheCompression: false,
             },
-          },
+          }),
           resolve: {
             fullySpecified: false,
           },
@@ -235,6 +240,7 @@ const createWebpackConfig = ({
       ),
     },
     experiments: {
+      layers: true,
       outputModule: true,
     },
   };

cast/src/html/faq.html.template

@@ -36,13 +36,7 @@
   </head>
   <body>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <script>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
     <hc-layout subtitle="FAQ">
       <style>
         a {

cast/src/html/index.html.template

@@ -13,15 +13,9 @@
     <%= renderTemplate("_social_meta.html.template") %>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <hc-connect></hc-connect>
-    <script>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-      <% for (const entry of latestEntryJS) { %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
     <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

cast/src/html/media.html.template

@@ -16,14 +16,8 @@
     </style>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <cast-media-player></cast-media-player>
-    <script>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-      <% for (const entry of latestEntryJS) { %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
   </body>
 </html>

demo/src/ha-demo.ts

@@ -82,6 +82,8 @@ export class HaDemo extends HomeAssistantAppEl {
         has_entity_name: false,
         unique_id: "co2_intensity",
         options: null,
+        created_at: 0,
+        modified_at: 0,
       },
       {
         config_entry_id: "co2signal",
@@ -100,6 +102,8 @@ export class HaDemo extends HomeAssistantAppEl {
         has_entity_name: false,
         unique_id: "grid_fossil_fuel_percentage",
         options: null,
+        created_at: 0,
+        modified_at: 0,
       },
     ]);
 

demo/src/html/index.html.template

@@ -69,6 +69,14 @@
       #ha-launch-screen .ha-launch-screen-spacer {
         flex: 1;
       }
+      .ohf-logo {
+        color: grey;
+        font-size: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
     </style>
   </head>
   <body>
@@ -79,19 +87,14 @@
         <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
+      <div class="ohf-logo">
+        a project from
+        <img src="/static/icons/ohf.svg" alt="Open Home Foundation" height="32">
+      </div>
     </div>
     <ha-demo></ha-demo>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
-    <script>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
-        <% for (const entry of latestEntryJS) { %>
-          import("<%= entry %>");
-        <% } %>
-        window.latestJS = true;
-      }
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
   </body>
 </html>

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

@@ -15,6 +15,7 @@ import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
+import { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -41,7 +42,7 @@ const ENTITIES = [
   }),
 ];
 
-const DEVICES = [
+const DEVICES: DeviceRegistryEntry[] = [
   {
     area_id: "bedroom",
     configuration_url: null,
@@ -53,6 +54,7 @@ const DEVICES = [
     identifiers: [["demo", "volume1"] as [string, string]],
     manufacturer: null,
     model: null,
+    model_id: null,
     name_by_user: null,
     name: "Dishwasher",
     sw_version: null,
@@ -60,6 +62,8 @@ const DEVICES = [
     via_device_id: null,
     serial_number: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: "backyard",
@@ -72,6 +76,7 @@ const DEVICES = [
     identifiers: [["demo", "pwm1"] as [string, string]],
     manufacturer: null,
     model: null,
+    model_id: null,
     name_by_user: null,
     name: "Lamp",
     sw_version: null,
@@ -79,6 +84,8 @@ const DEVICES = [
     via_device_id: null,
     serial_number: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: null,
@@ -91,6 +98,7 @@ const DEVICES = [
     identifiers: [["demo", "pwm1"] as [string, string]],
     manufacturer: null,
     model: null,
+    model_id: null,
     name_by_user: "User name",
     name: "Technical name",
     sw_version: null,
@@ -98,6 +106,8 @@ const DEVICES = [
     via_device_id: null,
     serial_number: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 
@@ -110,6 +120,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: "bedroom",
@@ -119,6 +131,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: "livingroom",
@@ -128,6 +142,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 

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

@@ -21,6 +21,7 @@ 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";
+import { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -41,7 +42,7 @@ const ENTITIES = [
   }),
 ];
 
-const DEVICES = [
+const DEVICES: DeviceRegistryEntry[] = [
   {
     area_id: "bedroom",
     configuration_url: null,
@@ -53,6 +54,7 @@ const DEVICES = [
     identifiers: [["demo", "volume1"] as [string, string]],
     manufacturer: null,
     model: null,
+    model_id: null,
     name_by_user: null,
     name: "Dishwasher",
     sw_version: null,
@@ -60,6 +62,8 @@ const DEVICES = [
     via_device_id: null,
     serial_number: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: "backyard",
@@ -72,6 +76,7 @@ const DEVICES = [
     identifiers: [["demo", "pwm1"] as [string, string]],
     manufacturer: null,
     model: null,
+    model_id: null,
     name_by_user: null,
     name: "Lamp",
     sw_version: null,
@@ -79,6 +84,8 @@ const DEVICES = [
     via_device_id: null,
     serial_number: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: null,
@@ -91,6 +98,7 @@ const DEVICES = [
     identifiers: [["demo", "pwm1"] as [string, string]],
     manufacturer: null,
     model: null,
+    model_id: null,
     name_by_user: "User name",
     name: "Technical name",
     sw_version: null,
@@ -98,6 +106,8 @@ const DEVICES = [
     via_device_id: null,
     serial_number: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 
@@ -110,6 +120,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: "bedroom",
@@ -119,6 +131,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     area_id: "livingroom",
@@ -128,6 +142,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 
@@ -138,6 +154,8 @@ const FLOORS: FloorRegistryEntry[] = [
     level: 0,
     icon: null,
     aliases: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     floor_id: "first",
@@ -145,6 +163,8 @@ const FLOORS: FloorRegistryEntry[] = [
     level: 1,
     icon: "mdi:numeric-1",
     aliases: [],
+    created_at: 0,
+    modified_at: 0,
   },
   {
     floor_id: "second",
@@ -152,6 +172,8 @@ const FLOORS: FloorRegistryEntry[] = [
     level: 2,
     icon: "mdi:numeric-2",
     aliases: [],
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 
@@ -162,6 +184,8 @@ const LABELS: LabelRegistryEntry[] = [
     icon: null,
     color: "yellow",
     description: null,
+    created_at: 0,
+    modified_at: 0,
   },
   {
     label_id: "entertainment",
@@ -169,6 +193,8 @@ const LABELS: LabelRegistryEntry[] = [
     icon: "mdi:popcorn",
     color: "blue",
     description: null,
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 

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

@@ -287,11 +287,11 @@ const CONFIGS = [
     config: `
 - type: entities
   entities:
-    - type: call-service
+    - type: perform-action
       icon: mdi:power
       name: Bed light
       action_name: Toggle light
-      service: light.toggle
+      action: light.toggle
       data:
         entity_id: light.bed_light
     - type: section

gallery/src/pages/lovelace/picture-card.markdown

@@ -0,0 +1,3 @@
+---
+title: Picture Card
+---

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

@@ -0,0 +1,61 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
+
+const ENTITIES = [
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    entity_picture: "/images/paulus.jpg",
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Image URL",
+    config: `
+- type: picture
+  image: /images/living_room.png
+    `,
+  },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture
+  image_entity: person.paulus
+    `,
+  },
+  {
+    heading: "Error: Image required",
+    config: `
+- type: picture
+  entity: person.paulus
+    `,
+  },
+];
+
+@customElement("demo-lovelace-picture-card")
+class DemoPicture extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(ENTITIES);
+    mockIcons(hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-lovelace-picture-card": DemoPicture;
+  }
+}

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

@@ -25,6 +25,15 @@ const ENTITIES = [
     friendly_name: "Movement Backyard",
     device_class: "motion",
   }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    entity_picture: "/images/paulus.jpg",
+  }),
+  getEntity("sensor", "battery", 35, {
+    device_class: "battery",
+    friendly_name: "Battery",
+    unit_of_measurement: "%",
+  }),
 ];
 
 const CONFIGS = [
@@ -123,6 +132,19 @@ const CONFIGS = [
         left: 35%
     `,
   },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture-elements
+  image_entity: person.paulus
+  elements:
+  - type: state-icon
+    entity: sensor.battery
+    style:
+      top: 8%
+      left: 8%
+    `,
+  },
 ];
 
 @customElement("demo-lovelace-picture-elements-card")

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

@@ -12,6 +12,10 @@ const ENTITIES = [
   getEntity("light", "bed_light", "off", {
     friendly_name: "Bed Light",
   }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    entity_picture: "/images/paulus.jpg",
+  }),
 ];
 
 const CONFIGS = [
@@ -50,6 +54,13 @@ const CONFIGS = [
   entity: camera.demo_camera
     `,
   },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture-entity
+  entity: person.paulus
+    `,
+  },
   {
     heading: "Hidden name",
     config: `

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

@@ -20,6 +20,15 @@ const ENTITIES = [
     friendly_name: "Basement Floor Wet",
     device_class: "moisture",
   }),
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    entity_picture: "/images/paulus.jpg",
+  }),
+  getEntity("sensor", "battery", 35, {
+    device_class: "battery",
+    friendly_name: "Battery",
+    unit_of_measurement: "%",
+  }),
 ];
 
 const CONFIGS = [
@@ -90,6 +99,15 @@ const CONFIGS = [
     - light.ceiling_lights
     `,
   },
+  {
+    heading: "Person entity",
+    config: `
+- type: picture-glance
+  image_entity: person.paulus
+  entities:
+    - sensor.battery
+    `,
+  },
   {
     heading: "Custom icon",
     config: `

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

@@ -358,13 +358,11 @@ export class DemoEntityState extends LitElement {
         },
         entity_id: {
           title: "Entity ID",
-          width: "30%",
           filterable: true,
           sortable: true,
         },
         state: {
           title: "State",
-          width: "20%",
           sortable: true,
           template: (entry) =>
             html`${computeStateDisplay(
@@ -379,14 +377,12 @@ export class DemoEntityState extends LitElement {
         device_class: {
           title: "Device class",
           template: (entry) => html`${entry.device_class ?? "-"}`,
-          width: "20%",
           filterable: true,
           sortable: true,
         },
         domain: {
           title: "Domain",
           template: (entry) => html`${computeDomain(entry.entity_id)}`,
-          width: "20%",
           filterable: true,
           sortable: true,
         },

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

@@ -203,6 +203,8 @@ const createEntityRegistryEntries = (
     options: null,
     labels: [],
     categories: {},
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 
@@ -215,6 +217,7 @@ const createDeviceRegistryEntries = (
     connections: [],
     manufacturer: "ESPHome",
     model: "Mock Device",
+    model_id: "ABC-001",
     name: "Tag Reader",
     sw_version: null,
     hw_version: "1.0.0",
@@ -227,6 +230,8 @@ const createDeviceRegistryEntries = (
     disabled_by: null,
     configuration_url: null,
     labels: [],
+    created_at: 0,
+    modified_at: 0,
   },
 ];
 

hassio/src/backups/hassio-backups.ts

@@ -127,14 +127,13 @@ export class HassioBackups extends LitElement {
         main: true,
         sortable: true,
         filterable: true,
-        grows: true,
+        flex: 2,
         template: (backup) =>
           html`${backup.name || backup.slug}
             <div class="secondary">${backup.secondary}</div>`,
       },
       size: {
         title: this.supervisor.localize("backup.size"),
-        width: "15%",
         hidden: narrow,
         filterable: true,
         sortable: true,
@@ -142,7 +141,6 @@ export class HassioBackups extends LitElement {
       },
       location: {
         title: this.supervisor.localize("backup.location"),
-        width: "15%",
         hidden: narrow,
         filterable: true,
         sortable: true,
@@ -151,7 +149,6 @@ export class HassioBackups extends LitElement {
       },
       date: {
         title: this.supervisor.localize("backup.created"),
-        width: "15%",
         direction: "desc",
         hidden: narrow,
         filterable: true,

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

@@ -66,7 +66,8 @@ class HassioRepositoriesDialog extends LitElement {
           repo.slug !== "core" && // The core add-ons repository
           repo.slug !== "local" && // Locally managed add-ons
           repo.slug !== "a0d7b954" && // Home Assistant Community Add-ons
-          repo.slug !== "5c53de3b" // The ESPHome repository
+          repo.slug !== "5c53de3b" && // The ESPHome repository
+          repo.slug !== "d5369777" // Music Assistant repository
       )
       .sort((a, b) =>
         caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language)

hassio/src/entrypoint.js.template

@@ -4,11 +4,7 @@
     el.src = src;
     document.body.appendChild(el);
   }
-  if (/.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent)) {
+  if (<%= modernRegex %>.test(navigator.userAgent)) {
-    <% for (const entry of es5EntryJS) { %>
-      loadES5("<%= entry %>");
-    <% } %>
-  } else {
     try {
         <% for (const entry of latestEntryJS) { %>
           new Function("import('<%= entry %>')")();
@@ -17,6 +13,10 @@
       <% for (const entry of es5EntryJS) { %>
         loadES5("<%= entry %>");
       <% } %>
+  } else {
+    <% for (const entry of es5EntryJS) { %>
+      loadES5("<%= entry %>");
+    <% } %>
   }
   }
 })();

package.json

@@ -16,7 +16,7 @@
     "lint:lit": "lit-analyzer \"{.,*}/src/**/*.ts\"",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types && yarn run lint:lit",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "postinstall": "husky install",
+    "postinstall": "husky",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.cjs \"test/**/*.ts\""
@@ -25,15 +25,15 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.24.7",
+    "@babel/runtime": "7.25.0",
-    "@braintree/sanitize-url": "7.0.4",
+    "@braintree/sanitize-url": "7.1.0",
     "@codemirror/autocomplete": "6.17.0",
     "@codemirror/commands": "6.6.0",
     "@codemirror/language": "6.10.2",
     "@codemirror/legacy-modes": "6.4.0",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.28.4",
+    "@codemirror/view": "6.29.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.5",
     "@formatjs/intl-displaynames": "6.6.8",
@@ -43,12 +43,12 @@
     "@formatjs/intl-numberformat": "8.10.3",
     "@formatjs/intl-pluralrules": "5.2.14",
     "@formatjs/intl-relativetimeformat": "11.2.14",
-    "@fullcalendar/core": "6.1.11",
+    "@fullcalendar/core": "6.1.15",
-    "@fullcalendar/daygrid": "6.1.11",
+    "@fullcalendar/daygrid": "6.1.15",
-    "@fullcalendar/interaction": "6.1.11",
+    "@fullcalendar/interaction": "6.1.15",
-    "@fullcalendar/list": "6.1.11",
+    "@fullcalendar/list": "6.1.15",
-    "@fullcalendar/luxon3": "6.1.11",
+    "@fullcalendar/luxon3": "6.1.15",
-    "@fullcalendar/timegrid": "6.1.11",
+    "@fullcalendar/timegrid": "6.1.15",
     "@lezer/highlight": "1.2.0",
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.7",
@@ -80,7 +80,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.5.1",
+    "@material/web": "2.0.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
@@ -88,8 +88,8 @@
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.4.1",
+    "@vaadin/combo-box": "24.4.4",
-    "@vaadin/vaadin-themable-mixin": "24.4.1",
+    "@vaadin/vaadin-themable-mixin": "24.4.4",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -129,7 +129,7 @@
     "rrule": "2.8.1",
     "sortablejs": "1.15.2",
     "stacktrace-js": "2.0.2",
-    "superstruct": "1.0.4",
+    "superstruct": "2.0.2",
     "tinykeys": "2.1.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
@@ -149,18 +149,18 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.24.9",
     "@babel/helper-define-polyfill-provider": "0.6.2",
     "@babel/plugin-proposal-decorators": "7.24.7",
     "@babel/plugin-transform-runtime": "7.24.7",
-    "@babel/preset-env": "7.24.7",
+    "@babel/preset-env": "7.25.0",
     "@babel/preset-typescript": "7.24.7",
-    "@bundle-stats/plugin-webpack-filter": "4.13.3",
+    "@bundle-stats/plugin-webpack-filter": "4.13.4",
     "@koa/cors": "5.0.0",
-    "@lokalise/node-api": "12.6.0",
+    "@lokalise/node-api": "12.7.0",
     "@octokit/auth-oauth-device": "7.1.1",
     "@octokit/plugin-retry": "7.1.1",
-    "@octokit/rest": "21.0.0",
+    "@octokit/rest": "21.0.1",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "26.0.1",
@@ -185,12 +185,13 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/eslint-plugin": "7.17.0",
-    "@typescript-eslint/parser": "7.15.0",
+    "@typescript-eslint/parser": "7.17.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
+    "browserslist-useragent-regexp": "4.1.3",
     "chai": "5.1.1",
     "del": "7.1.0",
     "eslint": "8.57.0",
@@ -200,18 +201,19 @@
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-lit": "1.14.0",
-    "eslint-plugin-lit-a11y": "4.1.3",
+    "eslint-plugin-lit-a11y": "4.1.4",
-    "eslint-plugin-unused-imports": "4.0.0",
+    "eslint-plugin-unused-imports": "4.0.1",
     "eslint-plugin-wc": "2.1.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
-    "glob": "10.4.3",
+    "glob": "11.0.0",
     "gulp": "5.0.0",
+    "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
-    "gulp-zopfli-green": "6.0.1",
+    "gulp-zopfli-green": "6.0.2",
     "html-minifier-terser": "7.2.0",
-    "husky": "9.0.11",
+    "husky": "9.1.3",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
     "lint-staged": "15.2.7",
@@ -224,27 +226,26 @@
     "object-hash": "3.0.0",
     "open": "10.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.12.0",
     "serve-handler": "6.1.5",
     "sinon": "18.0.0",
-    "source-map-url": "0.4.1",
     "systemjs": "6.15.1",
-    "tar": "7.4.0",
+    "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.10",
     "transform-async-modules-webpack-plugin": "1.1.1",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.5.3",
+    "typescript": "5.5.4",
-    "webpack": "5.92.1",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "6.0.1",
-    "workbox-build": "7.1.1"
+    "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
@@ -253,7 +254,7 @@
     "lit": "2.8.0",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "1.6.3",
-    "@fullcalendar/daygrid": "6.1.11",
+    "@fullcalendar/daygrid": "6.1.15",
     "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"
   },

public/static/icons/ohf.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 50 630.66 166">
+  <defs>
+    <style>
+        path {
+            fill: #2dbbed;
+            stroke-width: 0px;
+        }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #edeced; }
+        }
+    </style>
+  </defs>
+  <path d="M137.38,167.9h-73.35c-1.64,0-2.97,1.33-2.97,2.97v24.6c0,1.64,1.33,2.97,2.97,2.97h9.33c1.64,0,2.97-1.33,2.97-2.97v-12.3h61.06v12.3c0,1.64,1.33,2.97,2.97,2.97h9.33c1.64,0,2.97-1.33,2.97-2.97v-24.6c0-1.64-1.33-2.97-2.97-2.97h-12.3Z"/>
+  <path d="M111.04,65.25c-2.31-2.31-6.09-2.31-8.39,0l-37.4,37.4c-2.31,2.31-4.2,6.87-4.2,10.13v33.92c0,3.26,2.67,5.94,5.94,5.94h79.71c3.26,0,5.94-2.67,5.94-5.94v-33.92c0-3.26-1.89-7.82-4.2-10.13l-37.4-37.4Z"/>
+  <g>
+    <path d="M211.92,76.32c4.22,0,8.13.76,11.73,2.29,3.6,1.52,6.65,3.63,9.15,6.32,2.5,2.69,4.45,5.91,5.85,9.68,1.39,3.77,2.09,7.84,2.09,12.22.05,4.33-.63,8.39-2.03,12.2-1.41,3.81-3.38,7.06-5.91,9.76-2.53,2.7-5.61,4.82-9.23,6.35-3.62,1.54-7.53,2.28-11.73,2.23-5.55.08-10.54-1.2-14.96-3.83-4.42-2.63-7.83-6.28-10.23-10.95-2.4-4.67-3.56-9.9-3.48-15.68-.05-4.33.63-8.39,2.03-12.2,1.41-3.81,3.37-7.06,5.89-9.78,2.52-2.71,5.58-4.84,9.19-6.37s7.49-2.28,11.64-2.23ZM211.99,125.68c4.98,0,8.92-1.69,11.83-5.06,2.91-3.38,4.36-7.97,4.36-13.79s-1.45-10.48-4.34-13.85c-2.89-3.36-6.84-5.04-11.85-5.04s-8.96,1.68-11.85,5.04c-2.89,3.36-4.34,7.98-4.34,13.85s1.45,10.48,4.34,13.83c2.89,3.35,6.84,5.03,11.85,5.03Z"/>
+    <path d="M293.19,96.89c0,5.92-1.79,10.68-5.36,14.29-3.57,3.61-8.43,5.42-14.59,5.42h-11.69v19.79h-11.93v-59.02h23.78c6.18,0,11.02,1.74,14.53,5.22,3.51,3.48,5.26,8.25,5.26,14.29ZM280.59,96.66c0-2.5-.81-4.57-2.44-6.2-1.63-1.63-3.98-2.44-7.06-2.44h-9.54v18.19h9.54c3.1,0,5.46-.88,7.08-2.64,1.62-1.76,2.42-4.06,2.42-6.9Z"/>
+    <path d="M338.75,125.17v11.22h-37.15v-59.02h37.15v11.34h-25.23v12.59h22.41v10.56h-22.41v13.3h25.23Z"/>
+    <path d="M400.7,77.38v59.02h-11.85l-25.85-39.97v39.97h-11.85v-59.02h11.85l25.85,40.05v-40.05h11.85Z"/>
+    <path d="M434.49,77.38h11.93v23.86l23.39.08v-23.94h12.01v59.02h-12.01v-24.44l-23.39-.16v24.6h-11.93v-59.02Z"/>
+    <path d="M519.36,76.32c4.22,0,8.13.76,11.73,2.29,3.6,1.52,6.65,3.63,9.15,6.32,2.5,2.69,4.45,5.91,5.85,9.68,1.39,3.77,2.09,7.84,2.09,12.22.05,4.33-.63,8.39-2.03,12.2-1.41,3.81-3.38,7.06-5.91,9.76s-5.61,4.82-9.23,6.35c-3.62,1.54-7.53,2.28-11.73,2.23-5.55.08-10.54-1.2-14.96-3.83-4.42-2.63-7.83-6.28-10.23-10.95-2.4-4.67-3.56-9.9-3.48-15.68-.05-4.33.63-8.39,2.03-12.2,1.41-3.81,3.37-7.06,5.89-9.78,2.52-2.71,5.58-4.84,9.19-6.37s7.49-2.28,11.64-2.23ZM519.43,125.68c4.98,0,8.92-1.69,11.83-5.06,2.91-3.38,4.36-7.97,4.36-13.79s-1.45-10.48-4.34-13.85c-2.89-3.36-6.84-5.04-11.85-5.04s-8.96,1.68-11.85,5.04c-2.89,3.36-4.34,7.98-4.34,13.85s1.45,10.48,4.34,13.83c2.89,3.35,6.84,5.03,11.85,5.03Z"/>
+    <path d="M616.62,77.38v59.02h-11.77v-32.27l-12.63,32.27h-11.3l-12.48-32.03v32.03h-11.38v-59.02h11.38l18.15,45.09,18.26-45.09h11.77Z"/>
+    <path d="M666.29,125.17v11.22h-37.15v-59.02h37.15v11.34h-25.23v12.59h22.41v10.56h-22.41v13.3h25.23Z"/>
+  </g>
+  <g>
+    <path d="M189.92,159.75v13.29h17.01v6.07h-17.01v18.53h-6.75v-44.28h26.97v6.39h-20.22Z"/>
+    <path d="M235.89,152.64c3.07-.04,5.95.52,8.62,1.67s4.95,2.74,6.83,4.77c1.87,2.03,3.34,4.47,4.4,7.3,1.06,2.84,1.57,5.87,1.53,9.1.04,3.25-.47,6.31-1.53,9.16-1.06,2.86-2.53,5.29-4.4,7.32-1.87,2.02-4.15,3.61-6.83,4.76-2.68,1.15-5.55,1.71-8.62,1.67-3.07.04-5.94-.52-8.61-1.67-2.67-1.15-4.94-2.74-6.81-4.77-1.87-2.03-3.34-4.47-4.39-7.3-1.05-2.83-1.56-5.87-1.52-9.1-.04-3.23.47-6.27,1.52-9.11,1.05-2.84,2.51-5.28,4.39-7.32,1.87-2.03,4.14-3.63,6.81-4.79,2.67-1.16,5.54-1.72,8.61-1.68ZM225.59,187.27c2.61,2.96,6.06,4.45,10.36,4.45s7.75-1.48,10.35-4.45c2.6-2.96,3.9-6.89,3.9-11.79s-1.3-8.86-3.9-11.82c-2.6-2.96-6.05-4.45-10.35-4.45s-7.76,1.49-10.36,4.46c-2.61,2.97-3.91,6.91-3.91,11.81s1.3,8.83,3.91,11.79Z"/>
+    <path d="M264.38,153.35h6.75v28.31c.02,3.37,1.01,5.92,2.97,7.64,1.96,1.73,4.54,2.59,7.73,2.59s5.63-.91,7.67-2.72c2.04-1.81,3.06-4.32,3.06-7.51v-28.31h6.75v28.58c0,2.6-.47,4.95-1.4,7.06-.93,2.11-2.2,3.85-3.79,5.2-1.6,1.36-3.44,2.4-5.55,3.14s-4.35,1.1-6.75,1.1-4.55-.36-6.63-1.07c-2.08-.71-3.94-1.74-5.56-3.08-1.63-1.34-2.91-3.07-3.85-5.2-.94-2.13-1.41-4.52-1.41-7.15v-28.58Z"/>
+    <path d="M344.44,153.35v44.28h-6.75l-21.83-33.37v33.37h-6.75v-44.28h6.75l21.83,33.43v-33.43h6.75Z"/>
+    <path d="M391.61,175.54c.02,3.17-.53,6.15-1.65,8.92-1.12,2.78-2.67,5.14-4.64,7.08-1.97,1.94-4.34,3.46-7.11,4.55-2.77,1.09-5.72,1.61-8.88,1.55h-14.75v-44.28h14.75c4.16-.06,7.96.86,11.38,2.77,3.42,1.9,6.1,4.56,8.04,7.97,1.94,3.41,2.89,7.23,2.86,11.45ZM384.44,175.54c0-4.68-1.39-8.48-4.18-11.4-2.79-2.92-6.45-4.39-10.99-4.39h-7.88v31.61h7.88c4.58,0,8.25-1.45,11.02-4.36,2.77-2.9,4.15-6.73,4.15-11.46Z"/>
+    <path d="M421.25,186.99h-17.67l-3.84,10.65h-6.93l16-44.28h7.26l16.09,44.28h-7.14l-3.78-10.65ZM419.29,181.25l-6.81-19.3-6.87,19.3h13.68Z"/>
+    <path d="M462.47,159.75h-12.85v37.89h-6.81v-37.89h-12.85v-6.39h32.5v6.39Z"/>
+    <path d="M468.57,197.63v-44.28h6.81v44.28h-6.81Z"/>
+    <path d="M504.19,152.64c3.07-.04,5.95.52,8.62,1.67,2.68,1.15,4.95,2.74,6.83,4.77,1.87,2.03,3.34,4.47,4.4,7.3,1.06,2.84,1.57,5.87,1.53,9.1.04,3.25-.47,6.31-1.53,9.16-1.06,2.86-2.53,5.29-4.4,7.32-1.87,2.02-4.15,3.61-6.83,4.76-2.68,1.15-5.55,1.71-8.62,1.67-3.07.04-5.94-.52-8.61-1.67-2.67-1.15-4.94-2.74-6.81-4.77-1.87-2.03-3.34-4.47-4.39-7.3-1.05-2.83-1.56-5.87-1.52-9.1-.04-3.23.47-6.27,1.52-9.11,1.05-2.84,2.51-5.28,4.39-7.32,1.87-2.03,4.14-3.63,6.81-4.79,2.67-1.16,5.54-1.72,8.61-1.68ZM493.89,187.27c2.61,2.96,6.06,4.45,10.36,4.45s7.75-1.48,10.35-4.45c2.6-2.96,3.9-6.89,3.9-11.79s-1.3-8.86-3.9-11.82c-2.6-2.96-6.05-4.45-10.35-4.45s-7.76,1.49-10.36,4.46c-2.61,2.97-3.91,6.91-3.91,11.81s1.3,8.83,3.91,11.79Z"/>
+    <path d="M568.43,153.35v44.28h-6.75l-21.83-33.37v33.37h-6.75v-44.28h6.75l21.83,33.43v-33.43h6.75Z"/>
+  </g>
+</svg>

pyproject.toml

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

src/common/navigate.ts

@@ -25,7 +25,9 @@ export const navigate = (path: string, options?: NavigateOptions) => {
   if (__DEMO__) {
     if (replace) {
       mainWindow.history.replaceState(
-        mainWindow.history.state?.root ? { root: true } : options?.data ?? null,
+        mainWindow.history.state?.root
+          ? { root: true }
+          : (options?.data ?? null),
         "",
         `${mainWindow.location.pathname}#${path}`
       );
@@ -34,7 +36,7 @@ export const navigate = (path: string, options?: NavigateOptions) => {
     }
   } else if (replace) {
     mainWindow.history.replaceState(
-      mainWindow.history.state?.root ? { root: true } : options?.data ?? null,
+      mainWindow.history.state?.root ? { root: true } : (options?.data ?? null),
       "",
       path
     );

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

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators";
+import { HassServiceTarget } from "home-assistant-js-websocket";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
 import { HomeAssistant } from "../../types";
@@ -17,7 +18,9 @@ class HaCallServiceButton extends LitElement {
 
   @property() public service!: string;
 
-  @property({ type: Object }) public serviceData = {};
+  @property({ type: Object }) public target!: HassServiceTarget;
+
+  @property({ type: Object }) public data = {};
 
   @property() public confirmation?;
 
@@ -39,7 +42,8 @@ class HaCallServiceButton extends LitElement {
     const eventData = {
       domain: this.domain,
       service: this.service,
-      serviceData: this.serviceData,
+      data: this.data,
+      target: this.target,
       success: false,
     };
 
@@ -47,7 +51,12 @@ class HaCallServiceButton extends LitElement {
       this.shadowRoot!.querySelector("ha-progress-button")!;
 
     try {
-      await this.hass.callService(this.domain, this.service, this.serviceData);
+      await this.hass.callService(
+        this.domain,
+        this.service,
+        this.data,
+        this.target
+      );
       this.progress = false;
       progressElement.actionSuccess();
       eventData.success = true;
@@ -85,7 +94,8 @@ declare global {
     "hass-service-called": {
       domain: string;
       service: string;
-      serviceData: object;
+      target: HassServiceTarget;
+      data: object;
       success: boolean;
     };
   }

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

@@ -159,10 +159,10 @@ export class StateHistoryChartTimeline extends LitElement {
           },
           afterUpdate: (y) => {
             const yWidth = this.showNames
-              ? y.width ?? 0
+              ? (y.width ?? 0)
               : computeRTL(this.hass)
                 ? 0
-                : y.left ?? 0;
+                : (y.left ?? 0);
             if (
               this._yWidth !== Math.floor(yWidth) &&
               y.ticks.length === this.data.length

src/components/data-table/dialog-data-table-settings.ts

@@ -109,7 +109,8 @@ export class DialogDataTableSettings extends LitElement {
                 const canHide = !col.main && col.hideable !== false;
                 const isVisible = !(this._columnOrder &&
                 this._columnOrder.includes(col.key)
-                  ? this._hiddenColumns?.includes(col.key) ?? col.defaultHidden
+                  ? (this._hiddenColumns?.includes(col.key) ??
+                    col.defaultHidden)
                   : col.defaultHidden);
 
                 return html`<ha-list-item
@@ -193,6 +194,7 @@ export class DialogDataTableSettings extends LitElement {
           .filter(([_key, col]) => col.defaultHidden)
           .map(([key]) => key)),
     ];
+
     if (wasHidden && hidden.includes(column)) {
       hidden.splice(hidden.indexOf(column), 1);
     } else if (!wasHidden) {
@@ -242,7 +244,11 @@ export class DialogDataTableSettings extends LitElement {
             newOrder.splice(lastMoveable + 1, 0, col.key);
           }
 
-          if (col.defaultHidden) {
+          if (
+            col.key !== column &&
+            col.defaultHidden &&
+            !hidden.includes(col.key)
+          ) {
             hidden.push(col.key);
           }
         }

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

@@ -85,9 +85,9 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
     | "flex";
   template?: (row: T) => TemplateResult | string | typeof nothing;
   extraTemplate?: (row: T) => TemplateResult | string | typeof nothing;
-  width?: string;
+  minWidth?: string;
   maxWidth?: string;
-  grows?: boolean;
+  flex?: number;
   forceLTR?: boolean;
   hidden?: boolean;
 }
@@ -216,6 +216,18 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
+  protected updated() {
+    const header = this.renderRoot.querySelector(".mdc-data-table__header-row");
+    if (!header) {
+      return;
+    }
+    if (header.scrollWidth > header.clientWidth) {
+      this.style.setProperty("--table-row-width", `${header.scrollWidth}px`);
+    } else {
+      this.style.removeProperty("--table-row-width");
+    }
+  }
+
   public willUpdate(properties: PropertyValues) {
     super.willUpdate(properties);
 
@@ -355,7 +367,12 @@ export class HaDataTable extends LitElement {
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
-          <div class="mdc-data-table__header-row" role="row" aria-rowindex="1">
+          <div
+            class="mdc-data-table__header-row"
+            role="row"
+            aria-rowindex="1"
+            @scroll=${this._scrollContent}
+          >
             <slot name="header-row">
               ${this.selectable
                 ? html`
@@ -379,7 +396,8 @@ export class HaDataTable extends LitElement {
                 if (
                   column.hidden ||
                   (this.columnOrder && this.columnOrder.includes(key)
-                    ? this.hiddenColumns?.includes(key) ?? column.defaultHidden
+                    ? (this.hiddenColumns?.includes(key) ??
+                      column.defaultHidden)
                     : column.defaultHidden)
                 ) {
                   return nothing;
@@ -397,18 +415,16 @@ export class HaDataTable extends LitElement {
                     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
+                    style=${styleMap({
-                      ? styleMap({
+                      minWidth: column.minWidth,
-                          [column.grows ? "minWidth" : "width"]: column.width,
+                      maxWidth: column.maxWidth,
-                          maxWidth: column.maxWidth || "",
+                      flex: column.flex || 1,
-                        })
+                    })}
-                      : ""}
                     role="columnheader"
                     aria-sort=${ifDefined(
                       sorted
@@ -518,7 +534,7 @@ export class HaDataTable extends LitElement {
             (narrow && !column.main && !column.showNarrow) ||
             column.hidden ||
             (this.columnOrder && this.columnOrder.includes(key)
-              ? this.hiddenColumns?.includes(key) ?? column.defaultHidden
+              ? (this.hiddenColumns?.includes(key) ?? column.defaultHidden)
               : column.defaultHidden)
           ) {
             return nothing;
@@ -537,15 +553,13 @@ export class HaDataTable extends LitElement {
                 "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),
               })}"
-              style=${column.width
+              style=${styleMap({
-                ? styleMap({
+                minWidth: column.minWidth,
-                    [column.grows ? "minWidth" : "width"]: column.width,
+                maxWidth: column.maxWidth,
-                    maxWidth: column.maxWidth ? column.maxWidth : "",
+                flex: column.flex || 1,
-                  })
+              })}
-                : ""}
             >
               ${column.template
                 ? column.template(row)
@@ -560,8 +574,8 @@ export class HaDataTable extends LitElement {
                               !column2.showNarrow &&
                               !(this.columnOrder &&
                               this.columnOrder.includes(key2)
-                                ? this.hiddenColumns?.includes(key2) ??
+                                ? (this.hiddenColumns?.includes(key2) ??
-                                  column2.defaultHidden
+                                  column2.defaultHidden)
                                 : column2.defaultHidden)
                           )
                           .map(
@@ -596,7 +610,7 @@ export class HaDataTable extends LitElement {
       filteredData = await this._memFilterData(
         this.data,
         this._sortColumns,
-        this._filter
+        this._filter.trim()
       );
     }
 
@@ -814,6 +828,17 @@ export class HaDataTable extends LitElement {
   @eventOptions({ passive: true })
   private _saveScrollPos(e: Event) {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
+
+    this.renderRoot.querySelector(".mdc-data-table__header-row")!.scrollLeft = (
+      e.target as HTMLDivElement
+    ).scrollLeft;
+  }
+
+  @eventOptions({ passive: true })
+  private _scrollContent(e: Event) {
+    this.renderRoot.querySelector("lit-virtualizer")!.scrollLeft = (
+      e.target as HTMLDivElement
+    ).scrollLeft;
   }
 
   private _collapseGroup = (ev: Event) => {
@@ -888,8 +913,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__row {
           display: flex;
-          width: 100%;
           height: var(--data-table-row-height, 52px);
+          width: var(--table-row-width, 100%);
         }
 
         .mdc-data-table__row ~ .mdc-data-table__row {
@@ -913,18 +938,26 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-row {
           height: 56px;
           display: flex;
-          width: 100%;
           border-bottom: 1px solid var(--divider-color);
+          overflow: auto;
         }
 
+        /* Hide scrollbar for Chrome, Safari and Opera */
         .mdc-data-table__header-row::-webkit-scrollbar {
           display: none;
         }
 
+        /* Hide scrollbar for IE, Edge and Firefox */
+        .mdc-data-table__header-row {
+          -ms-overflow-style: none; /* IE and Edge */
+          scrollbar-width: none; /* Firefox */
+        }
+
         .mdc-data-table__cell,
         .mdc-data-table__header-cell {
           padding-right: 16px;
           padding-left: 16px;
+          min-width: 150px;
           align-self: center;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -972,6 +1005,8 @@ export class HaDataTable extends LitElement {
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
+          flex-grow: 0;
+          flex-shrink: 0;
         }
 
         .mdc-data-table__cell a {
@@ -990,7 +1025,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__header-cell--icon,
         .mdc-data-table__cell--icon {
-          width: 54px;
+          min-width: 64px;
+          flex: 0 0 64px !important;
         }
 
         .mdc-data-table__cell--icon img {
@@ -1030,11 +1066,14 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu,
         .mdc-data-table__header-cell--icon-button,
         .mdc-data-table__cell--icon-button {
+          min-width: 64px;
+          flex: 0 0 64px !important;
           padding: 8px;
         }
 
         .mdc-data-table__header-cell--icon-button,
         .mdc-data-table__cell--icon-button {
+          min-width: 56px;
           width: 56px;
         }
 

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

@@ -0,0 +1,315 @@
+import { mdiDrag } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { LitElement, PropertyValues, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { ensureArray } from "../../common/array/ensure-array";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import {
+  STATE_DISPLAY_SPECIAL_CONTENT,
+  STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS,
+} from "../../state-display/state-display";
+import { HomeAssistant, ValueChangedEvent } from "../../types";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+
+const HIDDEN_ATTRIBUTES = [
+  "access_token",
+  "available_modes",
+  "battery_icon",
+  "battery_level",
+  "code_arm_required",
+  "code_format",
+  "color_modes",
+  "device_class",
+  "editable",
+  "effect_list",
+  "entity_id",
+  "entity_picture",
+  "event_types",
+  "fan_modes",
+  "fan_speed_list",
+  "friendly_name",
+  "frontend_stream_type",
+  "has_date",
+  "has_time",
+  "hvac_modes",
+  "icon",
+  "id",
+  "max_color_temp_kelvin",
+  "max_mireds",
+  "max_temp",
+  "max",
+  "min_color_temp_kelvin",
+  "min_mireds",
+  "min_temp",
+  "min",
+  "mode",
+  "operation_list",
+  "options",
+  "percentage_step",
+  "precipitation_unit",
+  "preset_modes",
+  "pressure_unit",
+  "remaining",
+  "sound_mode_list",
+  "source_list",
+  "state_class",
+  "step",
+  "supported_color_modes",
+  "supported_features",
+  "swing_modes",
+  "target_temp_step",
+  "temperature_unit",
+  "token",
+  "unit_of_measurement",
+  "visibility_unit",
+  "wind_speed_unit",
+];
+
+@customElement("ha-entity-state-content-picker")
+class HaEntityStatePicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId?: string;
+
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property() public label?: string;
+
+  @property() public value?: string[] | string;
+
+  @property() public helper?: string;
+
+  @state() private _opened = false;
+
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
+  private options = memoizeOne((entityId?: string, stateObj?: HassEntity) => {
+    const domain = entityId ? computeDomain(entityId) : undefined;
+    return [
+      {
+        label: this.hass.localize("ui.components.state-content-picker.state"),
+        value: "state",
+      },
+      {
+        label: this.hass.localize(
+          "ui.components.state-content-picker.last_changed"
+        ),
+        value: "last_changed",
+      },
+      {
+        label: this.hass.localize(
+          "ui.components.state-content-picker.last_updated"
+        ),
+        value: "last_updated",
+      },
+      ...(domain
+        ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
+            STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
+          ).map((content) => ({
+            label: this.hass.localize(
+              `ui.components.state-content-picker.${content}`
+            ),
+            value: content,
+          }))
+        : []),
+      ...Object.keys(stateObj?.attributes ?? {})
+        .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
+        .map((attribute) => ({
+          value: attribute,
+          label: this.hass.formatEntityAttributeName(stateObj!, attribute),
+        })),
+    ];
+  });
+
+  private _filter = "";
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+
+    const value = this._value;
+
+    const stateObj = this.entityId
+      ? this.hass.states[this.entityId]
+      : undefined;
+
+    const options = this.options(this.entityId, stateObj);
+    const optionItems = options.filter(
+      (option) => !this._value.includes(option.value)
+    );
+
+    return html`
+      ${value?.length
+        ? html`
+            <ha-sortable
+              no-style
+              @item-moved=${this._moveItem}
+              .disabled=${this.disabled}
+            >
+              <ha-chip-set>
+                ${repeat(
+                  this._value,
+                  (item) => item,
+                  (item, idx) => {
+                    const label =
+                      options.find((option) => option.value === item)?.label ||
+                      item;
+                    return html`
+                      <ha-input-chip
+                        .idx=${idx}
+                        @remove=${this._removeItem}
+                        .label=${label}
+                        selected
+                      >
+                        <ha-svg-icon
+                          slot="icon"
+                          .path=${mdiDrag}
+                          data-handle
+                        ></ha-svg-icon>
+
+                        ${label}
+                      </ha-input-chip>
+                    `;
+                  }
+                )}
+              </ha-chip-set>
+            </ha-sortable>
+          `
+        : nothing}
+
+      <ha-combo-box
+        item-value-path="value"
+        item-label-path="label"
+        .hass=${this.hass}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .value=${""}
+        .items=${optionItems}
+        allow-custom-value
+        @filter-changed=${this._filterChanged}
+        @value-changed=${this._comboBoxValueChanged}
+        @opened-changed=${this._openedChanged}
+      ></ha-combo-box>
+    `;
+  }
+
+  private get _value() {
+    return !this.value ? [] : ensureArray(this.value);
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+    this._comboBox.filteredItems = this._comboBox.items;
+  }
+
+  private _filterChanged(ev?: CustomEvent): void {
+    this._filter = ev?.detail.value || "";
+
+    const filteredItems = this._comboBox.items?.filter((item) => {
+      const label = item.label || item.value;
+      return label.toLowerCase().includes(this._filter?.toLowerCase());
+    });
+
+    if (this._filter) {
+      filteredItems?.unshift({ label: this._filter, value: this._filter });
+    }
+
+    this._comboBox.filteredItems = filteredItems;
+  }
+
+  private async _moveItem(ev: CustomEvent) {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+    const value = this._value;
+    const newValue = value.concat();
+    const element = newValue.splice(oldIndex, 1)[0];
+    newValue.splice(newIndex, 0, element);
+    this._setValue(newValue);
+    await this.updateComplete;
+    this._filterChanged();
+  }
+
+  private async _removeItem(ev) {
+    ev.stopPropagation();
+    const value: string[] = [...this._value];
+    value.splice(ev.target.idx, 1);
+    this._setValue(value);
+    await this.updateComplete;
+    this._filterChanged();
+  }
+
+  private _comboBoxValueChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (this.disabled || newValue === "") {
+      return;
+    }
+
+    const currentValue = this._value;
+
+    if (currentValue.includes(newValue)) {
+      return;
+    }
+
+    setTimeout(() => {
+      this._filterChanged();
+      this._comboBox.setInputValue("");
+    }, 0);
+
+    this._setValue([...currentValue, newValue]);
+  }
+
+  private _setValue(value: string[]) {
+    const newValue =
+      value.length === 0 ? undefined : value.length === 1 ? value[0] : value;
+    this.value = newValue;
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+    }
+
+    ha-chip-set {
+      padding: 8px 0;
+    }
+
+    .sortable-fallback {
+      display: none;
+      opacity: 0;
+    }
+
+    .sortable-ghost {
+      opacity: 0.4;
+    }
+
+    .sortable-drag {
+      cursor: grabbing;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entity-state-content-picker": HaEntityStatePicker;
+  }
+}

src/components/entity/ha-state-label-badge.ts

@@ -134,7 +134,7 @@ export class HaStateLabelBadge extends LitElement {
           this._timerTimeRemaining
         )}
         .description=${this.showName
-          ? this.name ?? computeStateName(entityState)
+          ? (this.name ?? computeStateName(entityState))
           : undefined}
       >
         ${!image && showIcon

src/components/ha-area-picker.ts

@@ -279,6 +279,8 @@ export class HaAreaPicker extends LitElement {
             icon: null,
             aliases: [],
             labels: [],
+            created_at: 0,
+            modified_at: 0,
           },
         ];
       }
@@ -295,6 +297,8 @@ export class HaAreaPicker extends LitElement {
               icon: "mdi:plus",
               aliases: [],
               labels: [],
+              created_at: 0,
+              modified_at: 0,
             },
           ];
     }
@@ -377,6 +381,8 @@ export class HaAreaPicker extends LitElement {
             picture: null,
             labels: [],
             aliases: [],
+            created_at: 0,
+            modified_at: 0,
           },
         ] as AreaRegistryEntry[];
       } else {
@@ -393,6 +399,8 @@ export class HaAreaPicker extends LitElement {
             picture: null,
             labels: [],
             aliases: [],
+            created_at: 0,
+            modified_at: 0,
           },
         ] as AreaRegistryEntry[];
       }

src/components/ha-base-time-input.ts

@@ -1,10 +1,12 @@
 import "@material/mwc-list/mwc-list-item";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { mdiClose } from "@mdi/js";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
+import "./ha-icon-button";
 import { HaTextField } from "./ha-textfield";
 import "./ha-input-helper-text";
 
@@ -124,11 +126,14 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property() amPm: "AM" | "PM" = "AM";
 
+  @property({ type: Boolean, reflect: true }) public clearable?: boolean;
+
   protected render(): TemplateResult {
     return html`
       ${this.label
         ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
         : ""}
+      <div class="time-input-wrap-wrap">
         <div class="time-input-wrap">
           ${this.enableDay
             ? html`
@@ -234,6 +239,15 @@ export class HaBaseTimeInput extends LitElement {
               >
               </ha-textfield>`
             : ""}
+          ${this.clearable && !this.required && !this.disabled
+            ? html`<ha-icon-button
+                label="clear"
+                @click=${this._clearValue}
+                .path=${mdiClose}
+              ></ha-icon-button>`
+            : nothing}
+        </div>
+
         ${this.format === 24
           ? ""
           : html`<ha-select
@@ -249,13 +263,17 @@ export class HaBaseTimeInput extends LitElement {
               <mwc-list-item value="AM">AM</mwc-list-item>
               <mwc-list-item value="PM">PM</mwc-list-item>
             </ha-select>`}
-      </div>
         ${this.helper
           ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
           : ""}
+      </div>
     `;
   }
 
+  private _clearValue(): void {
+    fireEvent(this, "value-changed");
+  }
+
   private _valueChanged(ev: InputEvent) {
     const textField = ev.currentTarget as HaTextField;
     this[textField.name] =
@@ -302,18 +320,25 @@ export class HaBaseTimeInput extends LitElement {
   }
 
   static styles = css`
+    :host([clearable]) {
+      position: relative;
+    }
     :host {
       display: block;
     }
+    .time-input-wrap-wrap {
+      display: flex;
+    }
     .time-input-wrap {
       display: flex;
       border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
       overflow: hidden;
       position: relative;
       direction: ltr;
+      padding-right: 3px;
     }
     ha-textfield {
-      width: 40px;
+      width: 55px;
       text-align: center;
       --mdc-shape-small: 0;
       --text-field-appearance: none;
@@ -335,6 +360,21 @@ export class HaBaseTimeInput extends LitElement {
       --mdc-shape-small: 0;
       width: 85px;
     }
+    :host([clearable]) .mdc-select__anchor {
+        padding-inline-end: var(--select-selected-text-padding-end, 12px);
+    }
+    ha-icon-button {
+      position: relative
+      --mdc-icon-button-size: 36px;
+      --mdc-icon-size: 20px;
+      color: var(--secondary-text-color);
+      direction: var(--direction);
+      display: flex;
+      align-items: center;
+      background-color:var(--mdc-text-field-fill-color, whitesmoke);
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+    }
     label {
       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased;

src/components/ha-floor-picker.ts

@@ -295,6 +295,8 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
             icon: null,
             level: null,
             aliases: [],
+            created_at: 0,
+            modified_at: 0,
           },
         ];
       }
@@ -309,6 +311,8 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
               icon: "mdi:plus",
               level: null,
               aliases: [],
+              created_at: 0,
+              modified_at: 0,
             },
           ];
     }
@@ -391,6 +395,8 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
             icon: null,
             level: null,
             aliases: [],
+            created_at: 0,
+            modified_at: 0,
           },
         ] as FloorRegistryEntry[];
       } else {
@@ -405,6 +411,8 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
             icon: "mdi:plus",
             level: null,
             aliases: [],
+            created_at: 0,
+            modified_at: 0,
           },
         ] as FloorRegistryEntry[];
       }

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -94,6 +94,8 @@ export const computeInitialHaFormData = (
         data[field.name] = selector.color_temp?.min_mireds ?? 153;
       } else if (
         "action" in selector ||
+        "trigger" in selector ||
+        "condition" in selector ||
         "media" in selector ||
         "target" in selector
       ) {

src/components/ha-grid-size-picker.ts

@@ -20,7 +20,7 @@ export class HaGridSizeEditor extends LitElement {
 
   @property({ attribute: false }) public value?: GridSizeValue;
 
-  @property({ attribute: false }) public rows = 6;
+  @property({ attribute: false }) public rows = 8;
 
   @property({ attribute: false }) public columns = 4;
 
@@ -205,7 +205,7 @@ export class HaGridSizeEditor extends LitElement {
       .preview {
         position: relative;
         grid-area: preview;
-        aspect-ratio: 1 / 1;
+        aspect-ratio: 1 / 1.2;
       }
       .preview > div {
         position: absolute;

src/components/ha-label-picker.ts

@@ -303,6 +303,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
             icon: null,
             color: null,
             description: null,
+            created_at: 0,
+            modified_at: 0,
           },
         ];
       }
@@ -317,6 +319,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
               icon: "mdi:plus",
               color: null,
               description: null,
+              created_at: 0,
+              modified_at: 0,
             },
           ];
     }

src/components/ha-related-items.ts

@@ -6,12 +6,12 @@ import {
   mdiSofa,
 } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -20,7 +20,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { Blueprints, fetchBlueprints } from "../data/blueprint";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
-import { findRelated, ItemType, RelatedResult } from "../data/search";
+import { ItemType, RelatedResult, findRelated } from "../data/search";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
@@ -109,6 +109,26 @@ export class HaRelatedItems extends LitElement {
         )
       );
 
+  private _getConfigEntries = memoizeOne(
+    (
+      relatedConfigEntries: string[] | undefined,
+      entries: ConfigEntry[] | undefined
+    ) => {
+      const configEntries =
+        relatedConfigEntries && entries
+          ? relatedConfigEntries.map((entryId) =>
+              entries!.find((configEntry) => configEntry.entry_id === entryId)
+            )
+          : undefined;
+
+      const configEntryDomains = new Set(
+        configEntries?.map((entry) => entry?.domain)
+      );
+
+      return { configEntries, configEntryDomains };
+    }
+  );
+
   protected render() {
     if (!this._related) {
       return nothing;
@@ -128,22 +148,25 @@ export class HaRelatedItems extends LitElement {
         </mwc-list>
       `;
     }
+
+    const { configEntries, configEntryDomains } = this._getConfigEntries(
+      this._related.config_entry,
+      this._entries
+    );
+
     return html`
-      ${this._related.config_entry && this._entries
+      ${configEntries || this._related.integration
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.integration")}
             </h3>
             <mwc-list
-              >${this._related.config_entry.map((relatedConfigEntryId) => {
+              >${configEntries?.map((entry) => {
-                const entry: ConfigEntry | undefined = this._entries!.find(
-                  (configEntry) => configEntry.entry_id === relatedConfigEntryId
-                );
                 if (!entry) {
                   return nothing;
                 }
                 return html`
                   <a
-                    href=${`/config/integrations/integration/${entry.domain}#config_entry=${relatedConfigEntryId}`}
+                    href=${`/config/integrations/integration/${entry.domain}#config_entry=${entry.entry_id}`}
                     @click=${this._navigateAwayClose}
                   >
                     <ha-list-item hasMeta graphic="icon">
@@ -164,8 +187,34 @@ export class HaRelatedItems extends LitElement {
                     </ha-list-item>
                   </a>
                 `;
-              })}</mwc-list
+              })}
-            >`
+              ${this._related.integration
+                ?.filter((integration) => !configEntryDomains.has(integration))
+                .map(
+                  (integration) =>
+                    html`<a
+                      href=${`/config/integrations/integration/${integration}`}
+                      @click=${this._navigateAwayClose}
+                    >
+                      <ha-list-item hasMeta graphic="icon">
+                        <img
+                          .src=${brandsUrl({
+                            domain: integration,
+                            type: "icon",
+                            useFallback: true,
+                            darkOptimized: this.hass.themes?.darkMode,
+                          })}
+                          crossorigin="anonymous"
+                          referrerpolicy="no-referrer"
+                          alt=${integration}
+                          slot="graphic"
+                        />
+                        ${this.hass.localize(`component.${integration}.title`)}
+                        <ha-icon-next slot="meta"></ha-icon-next>
+                      </ha-list-item>
+                    </a>`
+                )}
+            </mwc-list>`
         : nothing}
       ${this._related.device
         ? html`<h3>

src/components/ha-selector/ha-selector-boolean.ts

@@ -12,6 +12,8 @@ export class HaBooleanSelector extends LitElement {
 
   @property({ type: Boolean }) public value = false;
 
+  @property() public placeholder?: any;
+
   @property() public label?: string;
 
   @property() public helper?: string;
@@ -22,7 +24,7 @@ export class HaBooleanSelector extends LitElement {
     return html`
       <ha-formfield alignEnd spaceBetween .label=${this.label}>
         <ha-switch
-          .checked=${this.value}
+          .checked=${this.value ?? this.placeholder === true}
           @change=${this._handleChange}
           .disabled=${this.disabled}
         ></ha-switch>

src/components/ha-selector/ha-selector-duration.ts

@@ -30,6 +30,7 @@ export class HaTimeDuration extends LitElement {
         .disabled=${this.disabled}
         .required=${this.required}
         ?enableDay=${this.selector.duration?.enable_day}
+        ?enableMillisecond=${this.selector.duration?.enable_millisecond}
       ></ha-duration-input>
     `;
   }

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

@@ -57,6 +57,10 @@ const SELECTOR_SCHEMAS = {
       name: "enable_day",
       selector: { boolean: {} },
     },
+    {
+      name: "enable_millisecond",
+      selector: { boolean: {} },
+    },
   ] as const,
   entity: [
     {

src/components/ha-selector/ha-selector-time.ts

@@ -27,6 +27,7 @@ export class HaTimeSelector extends LitElement {
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
         .required=${this.required}
+        clearable
         .helper=${this.helper}
         .label=${this.label}
         enable-second

src/components/ha-selector/ha-selector-ui-state-content.ts

@@ -0,0 +1,48 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { UiStateContentSelector } from "../../data/selector";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../types";
+import "../entity/ha-entity-state-content-picker";
+
+@customElement("ha-selector-ui_state_content")
+export class HaSelectorUiStateContent extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: UiStateContentSelector;
+
+  @property() public value?: string | string[];
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property({ attribute: false }) public context?: {
+    filter_entity?: string;
+  };
+
+  protected render() {
+    return html`
+      <ha-entity-state-content-picker
+        .hass=${this.hass}
+        .entityId=${this.selector.ui_state_content?.entity_id ||
+        this.context?.filter_entity}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-entity-state-content-picker>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-ui_state_content": HaSelectorUiStateContent;
+  }
+}

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

@@ -57,6 +57,7 @@ const LOAD_ELEMENTS = {
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
   ui_color: () => import("./ha-selector-ui-color"),
+  ui_state_content: () => import("./ha-selector-ui-state-content"),
 };
 
 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);

src/components/ha-service-control.ts

@@ -77,7 +77,7 @@ export class HaServiceControl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public value?: {
-    service: string;
+    action: string;
     target?: HassServiceTarget;
     data?: Record<string, any>;
   };
@@ -112,23 +112,23 @@ export class HaServiceControl extends LitElement {
       | undefined
       | this["value"];
 
-    if (oldValue?.service !== this.value?.service) {
+    if (oldValue?.action !== this.value?.action) {
       this._checkedKeys = new Set();
     }
 
     const serviceData = this._getServiceInfo(
-      this.value?.service,
+      this.value?.action,
       this.hass.services
     );
 
     // Fetch the manifest if we have a service selected and the service domain changed.
     // If no service is selected, clear the manifest.
-    if (this.value?.service) {
+    if (this.value?.action) {
       if (
-        !oldValue?.service ||
+        !oldValue?.action ||
-        computeDomain(this.value.service) !== computeDomain(oldValue.service)
+        computeDomain(this.value.action) !== computeDomain(oldValue.action)
       ) {
-        this._fetchManifest(computeDomain(this.value?.service));
+        this._fetchManifest(computeDomain(this.value?.action));
       }
     } else {
       this._manifest = undefined;
@@ -168,7 +168,7 @@ export class HaServiceControl extends LitElement {
       this._value = this.value;
     }
 
-    if (oldValue?.service !== this.value?.service) {
+    if (oldValue?.action !== this.value?.action) {
       let updatedDefaultValue = false;
       if (this._value && serviceData) {
         const loadDefaults = this.value && !("data" in this.value);
@@ -367,7 +367,7 @@ export class HaServiceControl extends LitElement {
 
   protected render() {
     const serviceData = this._getServiceInfo(
-      this._value?.service,
+      this._value?.action,
       this.hass.services
     );
 
@@ -392,11 +392,11 @@ export class HaServiceControl extends LitElement {
       this._value
     );
 
-    const domain = this._value?.service
+    const domain = this._value?.action
-      ? computeDomain(this._value.service)
+      ? computeDomain(this._value.action)
       : undefined;
-    const serviceName = this._value?.service
+    const serviceName = this._value?.action
-      ? computeObjectId(this._value.service)
+      ? computeObjectId(this._value.action)
       : undefined;
 
     const description =
@@ -410,7 +410,7 @@ export class HaServiceControl extends LitElement {
       ? nothing
       : html`<ha-service-picker
           .hass=${this.hass}
-          .value=${this._value?.service}
+          .value=${this._value?.action}
           .disabled=${this.disabled}
           @value-changed=${this._serviceChanged}
         ></ha-service-picker>`}
@@ -451,7 +451,7 @@ export class HaServiceControl extends LitElement {
           >
           <span slot="description"
             >${this.hass.localize(
-              "ui.components.service-control.target_description"
+              "ui.components.service-control.target_secondary"
             )}</span
           ><ha-selector
             .hass=${this.hass}
@@ -478,7 +478,9 @@ export class HaServiceControl extends LitElement {
     ${shouldRenderServiceDataYaml
       ? html`<ha-yaml-editor
           .hass=${this.hass}
-          .label=${this.hass.localize("ui.components.service-control.data")}
+          .label=${this.hass.localize(
+            "ui.components.service-control.action_data"
+          )}
           .name=${"data"}
           .readOnly=${this.disabled}
           .defaultValue=${this._value?.data}
@@ -594,11 +596,11 @@ export class HaServiceControl extends LitElement {
   };
 
   private _localizeValueCallback = (key: string) => {
-    if (!this._value?.service) {
+    if (!this._value?.action) {
       return "";
     }
     return this.hass.localize(
-      `component.${computeDomain(this._value.service)}.selector.${key}`
+      `component.${computeDomain(this._value.action)}.selector.${key}`
     );
   };
 
@@ -610,7 +612,7 @@ export class HaServiceControl extends LitElement {
     if (checked) {
       this._checkedKeys.add(key);
       const field = this._getServiceInfo(
-        this._value?.service,
+        this._value?.action,
         this.hass.services
       )?.fields.find((_field) => _field.key === key);
 
@@ -656,7 +658,7 @@ export class HaServiceControl extends LitElement {
 
   private _serviceChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
-    if (ev.detail.value === this._value?.service) {
+    if (ev.detail.value === this._value?.action) {
       return;
     }
 
@@ -715,7 +717,7 @@ export class HaServiceControl extends LitElement {
     }
 
     const value = {
-      service: newService,
+      action: newService,
       target,
     };
 

src/components/ha-service-picker.ts

@@ -46,7 +46,7 @@ class HaServicePicker extends LitElement {
     return html`
       <ha-combo-box
         .hass=${this.hass}
-        .label=${this.hass.localize("ui.components.service-picker.service")}
+        .label=${this.hass.localize("ui.components.service-picker.action")}
         .filteredItems=${this._filteredServices(
           this.hass.localize,
           this.hass.services,

src/components/ha-sidebar.ts

@@ -210,6 +210,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private _editStyleLoaded = false;
 
+  private _unsubPersistentNotifications: UnsubscribeFunc | undefined;
+
   @storage({
     key: "sidebarPanelOrder",
     state: true,
@@ -283,15 +285,26 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       hass.localize !== oldHass.localize ||
       hass.locale !== oldHass.locale ||
       hass.states !== oldHass.states ||
-      hass.defaultPanel !== oldHass.defaultPanel
+      hass.defaultPanel !== oldHass.defaultPanel ||
+      hass.connected !== oldHass.connected
     );
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    subscribeNotifications(this.hass.connection, (notifications) => {
+    this.subscribePersistentNotifications();
+  }
+
+  private subscribePersistentNotifications(): void {
+    if (this._unsubPersistentNotifications) {
+      this._unsubPersistentNotifications();
+    }
+    this._unsubPersistentNotifications = subscribeNotifications(
+      this.hass.connection,
+      (notifications) => {
         this._notifications = notifications;
-    });
+      }
+    );
   }
 
   protected updated(changedProps) {
@@ -306,6 +319,14 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       return;
     }
 
+    if (
+      this.hass &&
+      changedProps.get("hass")?.connected === false &&
+      this.hass.connected === true
+    ) {
+      this.subscribePersistentNotifications();
+    }
+
     this._calculateCounts();
 
     if (!SUPPORT_SCROLL_IF_NEEDED) {

src/components/ha-slider.ts

@@ -15,6 +15,7 @@ export class HaSlider extends MdSlider {
     css`
       :host {
         --md-sys-color-primary: var(--primary-color);
+        --md-sys-color-on-primary: var(--text-primary-color);
         --md-sys-color-outline: var(--outline-color);
         --md-sys-color-on-surface: var(--primary-text-color);
         --md-slider-handle-width: 14px;

src/components/ha-time-input.ts

@@ -23,6 +23,8 @@ export class HaTimeInput extends LitElement {
   @property({ type: Boolean, attribute: "enable-second" })
   public enableSecond = false;
 
+  @property({ type: Boolean, reflect: true }) public clearable?: boolean;
+
   protected render() {
     const useAMPM = useAmPm(this.locale);
 
@@ -48,22 +50,26 @@ export class HaTimeInput extends LitElement {
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}
         .required=${this.required}
+        .clearable=${this.clearable && this.value !== undefined}
         .helper=${this.helper}
       ></ha-base-time-input>
     `;
   }
 
-  private _timeChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+  private _timeChanged(ev: CustomEvent<{ value?: TimeChangedEvent }>) {
     ev.stopPropagation();
     const eventValue = ev.detail.value;
 
     const useAMPM = useAmPm(this.locale);
-    let value;
+    let value: string | undefined;
 
+    // An undefined eventValue means the time selector is being cleared,
+    // the `value` variable will (intentionally) be left undefined.
     if (
-      !isNaN(eventValue.hours) ||
+      eventValue !== undefined &&
+      (!isNaN(eventValue.hours) ||
         !isNaN(eventValue.minutes) ||
-      !isNaN(eventValue.seconds)
+        !isNaN(eventValue.seconds))
     ) {
       let hours = eventValue.hours || 0;
       if (eventValue && useAMPM) {

src/components/ha-yaml-editor.ts

@@ -49,6 +49,8 @@ export class HaYamlEditor extends LitElement {
 
   @property({ type: Boolean }) public copyClipboard = false;
 
+  @property({ type: Boolean }) public hasExtraActions = false;
+
   @state() private _yaml = "";
 
   public setValue(value): void {
@@ -100,13 +102,16 @@ export class HaYamlEditor extends LitElement {
         @value-changed=${this._onChange}
         dir="ltr"
       ></ha-code-editor>
-      ${this.copyClipboard
+      ${this.copyClipboard || this.hasExtraActions
         ? html`<div class="card-actions">
-            <mwc-button @click=${this._copyYaml}>
+            ${this.copyClipboard
+              ? html` <mwc-button @click=${this._copyYaml}>
                   ${this.hass.localize(
                     "ui.components.yaml-editor.copy_to_clipboard"
                   )}
-            </mwc-button>
+                </mwc-button>`
+              : nothing}
+            <slot name="extra-actions"></slot>
           </div>`
         : nothing}
     `;

src/components/map/ha-map.ts

@@ -483,12 +483,12 @@ export class HaMap extends ReactiveElement {
       const entityName =
         typeof entity !== "string" && entity.label_mode === "state"
           ? this.hass.formatEntityState(stateObj)
-          : customTitle ??
+          : (customTitle ??
             title
               .split(" ")
               .map((part) => part[0])
               .join("")
-              .substr(0, 3);
+              .substr(0, 3));
 
       // create marker with the icon
       const marker = Leaflet.marker([latitude, longitude], {

src/components/search-input-outlined.ts

@@ -79,7 +79,7 @@ class SearchInputOutlined extends LitElement {
   }
 
   private async _filterInputChanged(e) {
-    this._filterChanged(e.target.value?.trim());
+    this._filterChanged(e.target.value);
   }
 
   private async _clearSearch() {

src/components/search-input.ts

@@ -67,7 +67,7 @@ class SearchInput extends LitElement {
   }
 
   private async _filterInputChanged(e) {
-    this._filterChanged(e.target.value?.trim());
+    this._filterChanged(e.target.value);
   }
 
   private async _clearSearch() {

src/components/tile/ha-tile-icon.ts

@@ -17,7 +17,7 @@ export class HaTileIcon extends LitElement {
     return css`
       :host {
         --tile-icon-color: var(--disabled-color);
-        --mdc-icon-size: 24px;
+        --mdc-icon-size: 22px;
       }
       .shape::before {
         content: "";
@@ -32,9 +32,9 @@ export class HaTileIcon extends LitElement {
       }
       .shape {
         position: relative;
-        width: 40px;
+        width: 36px;
-        height: 40px;
+        height: 36px;
-        border-radius: 20px;
+        border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;

src/components/tile/ha-tile-image.ts

@@ -25,9 +25,9 @@ export class HaTileImage extends LitElement {
     return css`
       .image {
         position: relative;
-        width: 40px;
+        width: 36px;
-        height: 40px;
+        height: 36px;
-        border-radius: 20px;
+        border-radius: 18px;
         display: flex;
         flex: none;
         align-items: center;

src/components/tile/ha-tile-info.ts

@@ -33,7 +33,7 @@ export class HaTileInfo extends LitElement {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        min-height: 40px;
+        height: 36px;
       }
       span {
         text-overflow: ellipsis;

src/components/trace/hat-script-graph.ts

@@ -424,7 +424,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${node.service ? undefined : mdiRoomService}
+        .iconPath=${node.action ? undefined : mdiRoomService}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
@@ -432,11 +432,11 @@ export class HatScriptGraph extends LitElement {
         .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       >
-        ${node.service
+        ${node.action
           ? html`<ha-service-icon
               slot="icon"
               .hass=${this.hass}
-              .service=${node.service}
+              .service=${node.action}
             ></ha-service-icon>`
           : nothing}
       </hat-graph-node>

src/data/area_registry.ts

@@ -2,10 +2,11 @@ import { stringCompare } from "../common/string/compare";
 import { HomeAssistant } from "../types";
 import { DeviceRegistryEntry } from "./device_registry";
 import { EntityRegistryEntry } from "./entity_registry";
+import { RegistryEntry } from "./registry";
 
 export { subscribeAreaRegistry } from "./ws-area_registry";
 
-export interface AreaRegistryEntry {
+export interface AreaRegistryEntry extends RegistryEntry {
   area_id: string;
   floor_id: string | null;
   name: string;

src/data/automation.ts

@@ -6,7 +6,7 @@ import { navigate } from "../common/navigate";
 import { Context, HomeAssistant } from "../types";
 import { BlueprintInput } from "./blueprint";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
-import { Action, MODES } from "./script";
+import { Action, MODES, migrateAutomationAction } from "./script";
 
 export const AUTOMATION_DEFAULT_MODE: (typeof MODES)[number] = "single";
 export const AUTOMATION_DEFAULT_MAX = 10;
@@ -28,7 +28,7 @@ export interface ManualAutomationConfig {
   description?: string;
   trigger: Trigger | Trigger[];
   condition?: Condition | Condition[];
-  action: Action | Action[];
+  action?: Action | Action[];
   mode?: (typeof MODES)[number];
   max?: number;
   max_exceeded?:
@@ -357,7 +357,7 @@ export const normalizeAutomationConfig = <
 >(
   config: T
 ): T => {
-  // Normalize data: ensure trigger, action and condition are lists
+  // Normalize data: ensure triggers, actions and conditions are lists
   // Happens when people copy paste their automations into the config
   for (const key of ["trigger", "condition", "action"]) {
     const value = config[key];
@@ -365,6 +365,9 @@ export const normalizeAutomationConfig = <
       config[key] = [value];
     }
   }
+
+  config.action = migrateAutomationAction(config.action || []);
+
   return config;
 };
 

src/data/cover.ts

@@ -115,8 +115,8 @@ export function computeCoverPositionStateDisplay(
   position?: number
 ) {
   const statePosition = stateActive(stateObj)
-    ? stateObj.attributes.current_position ??
+    ? (stateObj.attributes.current_position ??
-      stateObj.attributes.current_tilt_position
+      stateObj.attributes.current_tilt_position)
     : undefined;
 
   const currentPosition = position ?? statePosition;

src/data/device_automation.ts

@@ -178,7 +178,11 @@ const getEntityName = (
   entityId: string | undefined
 ): string => {
   if (!entityId) {
-    return "<unknown entity>";
+    return (
+      "<" +
+      hass.localize("ui.panel.config.automation.editor.unknown_entity") +
+      ">"
+    );
   }
   if (entityId.includes(".")) {
     const state = hass.states[entityId];
@@ -191,7 +195,11 @@ const getEntityName = (
   if (entityReg) {
     return computeEntityRegistryName(hass, entityReg) || entityId;
   }
-  return "<unknown entity>";
+  return (
+    "<" +
+    hass.localize("ui.panel.config.automation.editor.unknown_entity") +
+    ">"
+  );
 };
 
 export const localizeDeviceAutomationAction = (

src/data/device_registry.ts

@@ -1,25 +1,27 @@
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
+import { ConfigEntry } from "./config_entries";
 import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
 } from "./entity_registry";
-import { ConfigEntry } from "./config_entries";
 import type { EntitySources } from "./entity_sources";
+import { RegistryEntry } from "./registry";
 
 export {
   fetchDeviceRegistry,
   subscribeDeviceRegistry,
 } from "./ws-device_registry";
 
-export interface DeviceRegistryEntry {
+export interface DeviceRegistryEntry extends RegistryEntry {
   id: string;
   config_entries: string[];
   connections: Array<[string, string]>;
   identifiers: Array<[string, string]>;
   manufacturer: string | null;
   model: string | null;
+  model_id: string | null;
   name: string | null;
   labels: string[];
   sw_version: string | null;

src/data/entity_registry.ts

@@ -7,6 +7,7 @@ import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 import { LightColor } from "./light";
 import { computeDomain } from "../common/entity/compute_domain";
+import { RegistryEntry } from "./registry";
 
 export { subscribeEntityRegistryDisplay } from "./ws-entity_registry_display";
 
@@ -43,7 +44,7 @@ export interface EntityRegistryDisplayEntryResponse {
   entity_categories: Record<number, EntityCategory>;
 }
 
-export interface EntityRegistryEntry {
+export interface EntityRegistryEntry extends RegistryEntry {
   id: string;
   entity_id: string;
   name: string | null;

src/data/floor_registry.ts

@@ -4,10 +4,11 @@ import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 import { AreaRegistryEntry } from "./area_registry";
+import { RegistryEntry } from "./registry";
 
 export { subscribeAreaRegistry } from "./ws-area_registry";
 
-export interface FloorRegistryEntry {
+export interface FloorRegistryEntry extends RegistryEntry {
   floor_id: string;
   name: string;
   level: number | null;

src/data/group.ts

@@ -1,10 +1,8 @@
 import {
   HassEntityAttributeBase,
   HassEntityBase,
-  UnsubscribeFunc,
 } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { HomeAssistant } from "../types";
 
 interface GroupEntityAttributes extends HassEntityAttributeBase {
   entity_id: string[];
@@ -17,11 +15,6 @@ export interface GroupEntity extends HassEntityBase {
   attributes: GroupEntityAttributes;
 }
 
-export interface GroupPreview {
-  state: string;
-  attributes: Record<string, any>;
-}
-
 export const computeGroupDomain = (
   stateObj: GroupEntity
 ): string | undefined => {
@@ -31,17 +24,3 @@ export const computeGroupDomain = (
   ];
   return uniqueDomains.length === 1 ? uniqueDomains[0] : undefined;
 };
-
-export const subscribePreviewGroup = (
-  hass: HomeAssistant,
-  flow_id: string,
-  flow_type: "config_flow" | "options_flow",
-  user_input: Record<string, any>,
-  callback: (preview: GroupPreview) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(callback, {
-    type: "group/start_preview",
-    flow_id,
-    flow_type,
-    user_input,
-  });

src/data/label_registry.ts

@@ -1,10 +1,11 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
 import { stringCompare } from "../common/string/compare";
-import { HomeAssistant } from "../types";
 import { debounce } from "../common/util/debounce";
+import { HomeAssistant } from "../types";
+import { RegistryEntry } from "./registry";
 
-export interface LabelRegistryEntry {
+export interface LabelRegistryEntry extends RegistryEntry {
   label_id: string;
   name: string;
   icon: string | null;

src/data/lovelace.ts

@@ -3,9 +3,10 @@ import {
   getCollection,
   HassEventBase,
 } from "home-assistant-js-websocket";
+import { HuiBadge } from "../panels/lovelace/badges/hui-badge";
 import type { HuiCard } from "../panels/lovelace/cards/hui-card";
 import type { HuiSection } from "../panels/lovelace/sections/hui-section";
-import { Lovelace, LovelaceBadge } from "../panels/lovelace/types";
+import { Lovelace } from "../panels/lovelace/types";
 import { HomeAssistant } from "../types";
 import { LovelaceSectionConfig } from "./lovelace/config/section";
 import { fetchConfig, LegacyLovelaceConfig } from "./lovelace/config/types";
@@ -21,7 +22,7 @@ export interface LovelaceViewElement extends HTMLElement {
   narrow?: boolean;
   index?: number;
   cards?: HuiCard[];
-  badges?: LovelaceBadge[];
+  badges?: HuiBadge[];
   sections?: HuiSection[];
   isStrategy: boolean;
   setConfig(config: LovelaceViewConfig): void;

src/data/lovelace/config/action.ts

@@ -5,10 +5,12 @@ export interface ToggleActionConfig extends BaseActionConfig {
 }
 
 export interface CallServiceActionConfig extends BaseActionConfig {
-  action: "call-service";
+  action: "call-service" | "perform-action";
-  service: string;
+  /** @deprecated "service" is kept for backwards compatibility. Replaced by "perform_action". */
+  service?: string;
+  perform_action: string;
   target?: HassServiceTarget;
-  // "service_data" is kept for backwards compatibility. Replaced by "data".
+  /** @deprecated "service_data" is kept for backwards compatibility. Replaced by "data". */
   service_data?: Record<string, unknown>;
   data?: Record<string, unknown>;
 }

src/data/lovelace/config/badge.ts

@@ -1,4 +1,25 @@
+import { Condition } from "../../../panels/lovelace/common/validate-condition";
+
 export interface LovelaceBadgeConfig {
-  type?: string;
+  type: string;
   [key: string]: any;
+  visibility?: Condition[];
 }
+
+export const ensureBadgeConfig = (
+  config: Partial<LovelaceBadgeConfig> | string
+): LovelaceBadgeConfig => {
+  if (typeof config === "string") {
+    return {
+      type: "entity",
+      entity: config,
+    };
+  }
+  if ("type" in config && config.type) {
+    return config as LovelaceBadgeConfig;
+  }
+  return {
+    type: "entity",
+    ...config,
+  };
+};

src/data/lovelace/config/view.ts

@@ -27,7 +27,7 @@ export interface LovelaceBaseViewConfig {
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
   type?: string;
-  badges?: Array<string | LovelaceBadgeConfig>;
+  badges?: (string | Partial<LovelaceBadgeConfig>)[]; // Badge can be just an entity_id or without type
   cards?: LovelaceCardConfig[];
   sections?: LovelaceSectionRawConfig[];
 }

src/data/lovelace_custom_cards.ts

@@ -8,6 +8,14 @@ export interface CustomCardEntry {
   documentationURL?: string;
 }
 
+export interface CustomBadgeEntry {
+  type: string;
+  name?: string;
+  description?: string;
+  preview?: boolean;
+  documentationURL?: string;
+}
+
 export interface CustomCardFeatureEntry {
   type: string;
   name?: string;
@@ -18,6 +26,7 @@ export interface CustomCardFeatureEntry {
 export interface CustomCardsWindow {
   customCards?: CustomCardEntry[];
   customCardFeatures?: CustomCardFeatureEntry[];
+  customBadges?: CustomBadgeEntry[];
   /**
    * @deprecated Use customCardFeatures
    */
@@ -34,6 +43,9 @@ if (!("customCards" in customCardsWindow)) {
 if (!("customCardFeatures" in customCardsWindow)) {
   customCardsWindow.customCardFeatures = [];
 }
+if (!("customBadges" in customCardsWindow)) {
+  customCardsWindow.customBadges = [];
+}
 if (!("customTileFeatures" in customCardsWindow)) {
   customCardsWindow.customTileFeatures = [];
 }
@@ -43,10 +55,14 @@ export const getCustomCardFeatures = () => [
   ...customCardsWindow.customCardFeatures!,
   ...customCardsWindow.customTileFeatures!,
 ];
+export const customBadges = customCardsWindow.customBadges!;
 
 export const getCustomCardEntry = (type: string) =>
   customCards.find((card) => card.type === type);
 
+export const getCustomBadgeEntry = (type: string) =>
+  customBadges.find((badge) => badge.type === type);
+
 export const isCustomType = (type: string) =>
   type.startsWith(CUSTOM_TYPE_PREFIX);
 

src/data/otbr.ts

@@ -5,33 +5,44 @@ export interface OTBRInfo {
   border_agent_id: string;
   channel: number;
   extended_address: string;
+  extended_pan_id: string;
   url: string;
 }
 
-export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfo> =>
+export type OTBRInfoDict = Record<string, OTBRInfo>;
+
+export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfoDict> =>
   hass.callWS({
     type: "otbr/info",
   });
 
-export const OTBRCreateNetwork = (hass: HomeAssistant): Promise<void> =>
+export const OTBRCreateNetwork = (
+  hass: HomeAssistant,
+  extended_address: string
+): Promise<void> =>
   hass.callWS({
     type: "otbr/create_network",
+    extended_address,
   });
 
 export const OTBRSetNetwork = (
   hass: HomeAssistant,
+  extended_address: string,
   dataset_id: string
 ): Promise<void> =>
   hass.callWS({
     type: "otbr/set_network",
+    extended_address,
     dataset_id,
   });
 
 export const OTBRSetChannel = (
   hass: HomeAssistant,
+  extended_address: string,
   channel: number
 ): Promise<{ delay: number }> =>
   hass.callWS({
     type: "otbr/set_channel",
+    extended_address,
     channel,
   });

src/data/person.ts

@@ -1,3 +1,7 @@
+import {
+  HassEntityAttributeBase,
+  HassEntityBase,
+} from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface BasePerson {
@@ -18,6 +22,20 @@ export interface PersonMutableParams {
   picture: string | null;
 }
 
+interface PersonEntityAttributes extends HassEntityAttributeBase {
+  id?: string;
+  user_id?: string;
+  device_trackers?: string[];
+  editable?: boolean;
+  gps_accuracy?: number;
+  latitude?: number;
+  longitude?: number;
+}
+
+export interface PersonEntity extends HassEntityBase {
+  attributes: PersonEntityAttributes;
+}
+
 export const fetchPersons = (hass: HomeAssistant) =>
   hass.callWS<{
     storage: Person[];

src/data/preview.ts

@@ -1,21 +1,27 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
-export interface ThresholdPreview {
+const HAS_CUSTOM_PREVIEW = ["template"];
+
+export interface GenericPreview {
   state: string;
   attributes: Record<string, any>;
 }
 
-export const subscribePreviewThreshold = (
+export const subscribePreviewGeneric = (
   hass: HomeAssistant,
+  domain: string,
   flow_id: string,
   flow_type: "config_flow" | "options_flow",
   user_input: Record<string, any>,
-  callback: (preview: ThresholdPreview) => void
+  callback: (preview: GenericPreview) => void
 ): Promise<UnsubscribeFunc> =>
   hass.connection.subscribeMessage(callback, {
-    type: "threshold/start_preview",
+    type: `${domain}/start_preview`,
     flow_id,
     flow_type,
     user_input,
   });
+
+export const previewModule = (domain: string): string =>
+  HAS_CUSTOM_PREVIEW.includes(domain) ? domain : "generic";

src/data/registry.ts

@@ -0,0 +1,4 @@
+export interface RegistryEntry {
+  created_at: number;
+  modified_at: number;
+}

src/data/repairs.ts

@@ -32,7 +32,11 @@ export const fetchRepairsIssues = (conn: Connection) =>
     type: "repairs/list_issues",
   });
 
-export const fetchRepairsIssueData = (conn: Connection, domain, issue_id) =>
+export const fetchRepairsIssueData = (
+  conn: Connection,
+  domain: string,
+  issue_id: string
+) =>
   conn.sendMessagePromise<{ issue_data: { string: any } }>({
     type: "repairs/get_issue_data",
     domain,

src/data/script.ts

@@ -49,7 +49,7 @@ const targetStruct = object({
 export const serviceActionStruct: Describe<ServiceAction> = assign(
   baseActionStruct,
   object({
-    service: optional(string()),
+    action: optional(string()),
     service_template: optional(string()),
     entity_id: optional(string()),
     target: optional(targetStruct),
@@ -62,7 +62,7 @@ export const serviceActionStruct: Describe<ServiceAction> = assign(
 const playMediaActionStruct: Describe<PlayMediaAction> = assign(
   baseActionStruct,
   object({
-    service: literal("media_player.play_media"),
+    action: literal("media_player.play_media"),
     target: optional(object({ entity_id: optional(string()) })),
     entity_id: optional(string()),
     data: object({ media_content_id: string(), media_content_type: string() }),
@@ -73,7 +73,7 @@ const playMediaActionStruct: Describe<PlayMediaAction> = assign(
 const activateSceneActionStruct: Describe<ServiceSceneAction> = assign(
   baseActionStruct,
   object({
-    service: literal("scene.turn_on"),
+    action: literal("scene.turn_on"),
     target: optional(object({ entity_id: optional(string()) })),
     entity_id: optional(string()),
     metadata: object(),
@@ -132,7 +132,7 @@ export interface EventAction extends BaseAction {
 }
 
 export interface ServiceAction extends BaseAction {
-  service?: string;
+  action?: string;
   service_template?: string;
   entity_id?: string;
   target?: HassServiceTarget;
@@ -160,7 +160,7 @@ export interface DelayAction extends BaseAction {
 }
 
 export interface ServiceSceneAction extends BaseAction {
-  service: "scene.turn_on";
+  action: "scene.turn_on";
   target?: { entity_id?: string };
   entity_id?: string;
   metadata: Record<string, unknown>;
@@ -191,7 +191,7 @@ export interface WaitForTriggerAction extends BaseAction {
 }
 
 export interface PlayMediaAction extends BaseAction {
-  service: "media_player.play_media";
+  action: "media_player.play_media";
   target?: { entity_id?: string };
   entity_id?: string;
   data: { media_content_id: string; media_content_type: string };
@@ -404,7 +404,7 @@ export const getActionType = (action: Action): ActionType => {
   if ("set_conversation_response" in action) {
     return "set_conversation_response";
   }
-  if ("service" in action) {
+  if ("action" in action) {
     if ("metadata" in action) {
       if (is(action, activateSceneActionStruct)) {
         return "activate_scene";
@@ -425,3 +425,60 @@ export const hasScriptFields = (
   const fields = hass.services.script[computeObjectId(entityId)]?.fields;
   return fields !== undefined && Object.keys(fields).length > 0;
 };
+
+export const migrateAutomationAction = (
+  action: Action | Action[]
+): Action | Action[] => {
+  if (Array.isArray(action)) {
+    return action.map(migrateAutomationAction) as Action[];
+  }
+
+  if ("service" in action) {
+    if (!("action" in action)) {
+      action.action = action.service;
+    }
+    delete action.service;
+  }
+
+  if ("sequence" in action) {
+    for (const sequenceAction of (action as SequenceAction).sequence) {
+      migrateAutomationAction(sequenceAction);
+    }
+  }
+
+  const actionType = getActionType(action);
+
+  if (actionType === "parallel") {
+    const _action = action as ParallelAction;
+    migrateAutomationAction(_action.parallel);
+  }
+
+  if (actionType === "choose") {
+    const _action = action as ChooseAction;
+    if (Array.isArray(_action.choose)) {
+      for (const choice of _action.choose) {
+        migrateAutomationAction(choice.sequence);
+      }
+    } else if (_action.choose) {
+      migrateAutomationAction(_action.choose.sequence);
+    }
+    if (_action.default) {
+      migrateAutomationAction(_action.default);
+    }
+  }
+
+  if (actionType === "repeat") {
+    const _action = action as RepeatAction;
+    migrateAutomationAction(_action.repeat.sequence);
+  }
+
+  if (actionType === "if") {
+    const _action = action as IfAction;
+    migrateAutomationAction(_action.then);
+    if (_action.else) {
+      migrateAutomationAction(_action.else);
+    }
+  }
+
+  return action;
+};

src/data/script_i18n.ts

@@ -192,7 +192,7 @@ const tryDescribeAction = <T extends ActionType>(
 
     if (
       config.service_template ||
-      (config.service && isTemplate(config.service))
+      (config.action && isTemplate(config.action))
     ) {
       return hass.localize(
         targets.length
@@ -204,8 +204,8 @@ const tryDescribeAction = <T extends ActionType>(
       );
     }
 
-    if (config.service) {
+    if (config.action) {
-      const [domain, serviceName] = config.service.split(".", 2);
+      const [domain, serviceName] = config.action.split(".", 2);
       const service =
         hass.localize(`component.${domain}.services.${serviceName}.name`) ||
         hass.services[domain][serviceName]?.name;
@@ -217,7 +217,7 @@ const tryDescribeAction = <T extends ActionType>(
             : `${actionTranslationBaseKey}.service.description.service_name_no_targets`,
           {
             domain: domainToName(hass.localize, domain),
-            name: service || config.service,
+            name: service || config.action,
             targets: formatListWithAnds(hass.locale, targets),
           }
         );
@@ -230,7 +230,7 @@ const tryDescribeAction = <T extends ActionType>(
         {
           name: service
             ? `${domainToName(hass.localize, domain)}: ${service}`
-            : config.service,
+            : config.action,
           targets: formatListWithAnds(hass.locale, targets),
         }
       );

src/data/search.ts

@@ -8,6 +8,7 @@ export interface RelatedResult {
   device?: string[];
   entity?: string[];
   group?: string[];
+  integration?: string[];
   scene?: string[];
   script?: string[];
   script_blueprint?: string[];

src/data/selector.ts

@@ -2,6 +2,8 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
+import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
+import { isHelperDomain } from "../panels/config/helpers/const";
 import { UiAction } from "../panels/lovelace/components/hui-action-editor";
 import { HomeAssistant, ItemPath } from "../types";
 import {
@@ -13,8 +15,6 @@ import {
   EntityRegistryEntry,
 } from "./entity_registry";
 import { EntitySources } from "./entity_sources";
-import { isHelperDomain } from "../panels/config/helpers/const";
-import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 
 export type Selector =
   | ActionSelector
@@ -64,7 +64,8 @@ export type Selector =
   | TTSSelector
   | TTSVoiceSelector
   | UiActionSelector
-  | UiColorSelector;
+  | UiColorSelector
+  | UiStateContentSelector;
 
 export interface ActionSelector {
   action: {
@@ -202,6 +203,7 @@ export interface LegacyDeviceSelector {
 export interface DurationSelector {
   duration: {
     enable_day?: boolean;
+    enable_millisecond?: boolean;
   } | null;
 }
 
@@ -455,6 +457,13 @@ export interface UiColorSelector {
   ui_color: { default_color?: boolean } | null;
 }
 
+export interface UiStateContentSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  ui_state_content: {
+    entity_id?: string;
+  } | null;
+}
+
 export const expandLabelTarget = (
   hass: HomeAssistant,
   labelId: string,

src/data/time_date.ts

@@ -1,21 +0,0 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { HomeAssistant } from "../types";
-
-export interface TimeDatePreview {
-  state: string;
-  attributes: Record<string, any>;
-}
-
-export const subscribePreviewTimeDate = (
-  hass: HomeAssistant,
-  flow_id: string,
-  flow_type: "config_flow" | "options_flow",
-  user_input: Record<string, any>,
-  callback: (preview: TimeDatePreview) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(callback, {
-    type: "time_date/start_preview",
-    flow_id,
-    flow_type,
-    user_input,
-  });

src/data/timer.ts

@@ -92,7 +92,7 @@ export const computeDisplayTimer = (
     return hass.formatEntityState(stateObj);
   }
 
-  let display = secondsToDuration(timeRemaining || 0);
+  let display = secondsToDuration(timeRemaining || 0) || "0";
 
   if (stateObj.state === "paused") {
     display = `${display} (${hass.formatEntityState(stateObj)})`;

src/dialogs/config-flow/previews/flow-preview-generic.ts

@@ -2,23 +2,22 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { FlowType } from "../../../data/data_entry_flow";
-import {
+import { GenericPreview, subscribePreviewGeneric } from "../../../data/preview";
-  ThresholdPreview,
-  subscribePreviewThreshold,
-} from "../../../data/threshold";
 import { HomeAssistant } from "../../../types";
 import "./entity-preview-row";
 import { debounce } from "../../../common/util/debounce";
 import { fireEvent } from "../../../common/dom/fire_event";
 
-@customElement("flow-preview-threshold")
+@customElement("flow-preview-generic")
-class FlowPreviewThreshold extends LitElement {
+class FlowPreviewGeneric extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public flowType!: FlowType;
 
   public handler!: string;
 
+  @property() public domain!: string;
+
   @property() public stepId!: string;
 
   @property() public flowId!: string;
@@ -55,7 +54,7 @@ class FlowPreviewThreshold extends LitElement {
     ></entity-preview-row>`;
   }
 
-  private _setPreview = (preview: ThresholdPreview) => {
+  private _setPreview = (preview: GenericPreview) => {
     const now = new Date().toISOString();
     this._preview = {
       entity_id: `${this.stepId}.___flow_preview___`,
@@ -79,14 +78,14 @@ class FlowPreviewThreshold extends LitElement {
       return;
     }
     try {
-      this._unsub = subscribePreviewThreshold(
+      this._unsub = subscribePreviewGeneric(
         this.hass,
+        this.domain,
         this.flowId,
         this.flowType,
         this.stepData,
         this._setPreview
       );
-      await this._unsub;
       fireEvent(this, "set-flow-errors", { errors: {} });
     } catch (err: any) {
       if (typeof err.message === "string") {
@@ -103,6 +102,6 @@ class FlowPreviewThreshold extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "flow-preview-threshold": FlowPreviewThreshold;
+    "flow-preview-generic": FlowPreviewGeneric;
   }
 }

src/dialogs/config-flow/previews/flow-preview-group.ts

@@ -1,90 +0,0 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LitElement, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { FlowType } from "../../../data/data_entry_flow";
-import { GroupPreview, subscribePreviewGroup } from "../../../data/group";
-import { HomeAssistant } from "../../../types";
-import "./entity-preview-row";
-import { debounce } from "../../../common/util/debounce";
-
-@customElement("flow-preview-group")
-class FlowPreviewGroup extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public flowType!: FlowType;
-
-  public handler!: string;
-
-  @property() public stepId!: string;
-
-  @property() public flowId!: string;
-
-  @property({ attribute: false }) public stepData!: Record<string, any>;
-
-  @state() private _preview?: HassEntity;
-
-  private _unsub?: Promise<UnsubscribeFunc>;
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._unsub) {
-      this._unsub.then((unsub) => unsub());
-      this._unsub = undefined;
-    }
-  }
-
-  willUpdate(changedProps) {
-    if (changedProps.has("stepData")) {
-      this._debouncedSubscribePreview();
-    }
-  }
-
-  protected render() {
-    return html`<entity-preview-row
-      .hass=${this.hass}
-      .stateObj=${this._preview}
-    ></entity-preview-row>`;
-  }
-
-  private _setPreview = (preview: GroupPreview) => {
-    const now = new Date().toISOString();
-    this._preview = {
-      entity_id: `${this.stepId}.___flow_preview___`,
-      last_changed: now,
-      last_updated: now,
-      context: { id: "", parent_id: null, user_id: null },
-      ...preview,
-    };
-  };
-
-  private _debouncedSubscribePreview = debounce(() => {
-    this._subscribePreview();
-  }, 250);
-
-  private async _subscribePreview() {
-    if (this._unsub) {
-      (await this._unsub)();
-      this._unsub = undefined;
-    }
-    if (this.flowType === "repair_flow") {
-      return;
-    }
-    try {
-      this._unsub = subscribePreviewGroup(
-        this.hass,
-        this.flowId,
-        this.flowType,
-        this.stepData,
-        this._setPreview
-      );
-    } catch (err) {
-      this._preview = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "flow-preview-group": FlowPreviewGroup;
-  }
-}

src/dialogs/config-flow/previews/flow-preview-time_date.ts

@@ -1,94 +0,0 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LitElement, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { FlowType } from "../../../data/data_entry_flow";
-import {
-  TimeDatePreview,
-  subscribePreviewTimeDate,
-} from "../../../data/time_date";
-import { HomeAssistant } from "../../../types";
-import "./entity-preview-row";
-import { debounce } from "../../../common/util/debounce";
-
-@customElement("flow-preview-time_date")
-class FlowPreviewTimeDate extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public flowType!: FlowType;
-
-  public handler!: string;
-
-  @property() public stepId!: string;
-
-  @property() public flowId!: string;
-
-  @property() public stepData!: Record<string, any>;
-
-  @state() private _preview?: HassEntity;
-
-  private _unsub?: Promise<UnsubscribeFunc>;
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._unsub) {
-      this._unsub.then((unsub) => unsub());
-      this._unsub = undefined;
-    }
-  }
-
-  willUpdate(changedProps) {
-    if (changedProps.has("stepData")) {
-      this._debouncedSubscribePreview();
-    }
-  }
-
-  protected render() {
-    return html`<entity-preview-row
-      .hass=${this.hass}
-      .stateObj=${this._preview}
-    ></entity-preview-row>`;
-  }
-
-  private _setPreview = (preview: TimeDatePreview) => {
-    const now = new Date().toISOString();
-    this._preview = {
-      entity_id: `${this.stepId}.___flow_preview___`,
-      last_changed: now,
-      last_updated: now,
-      context: { id: "", parent_id: null, user_id: null },
-      ...preview,
-    };
-  };
-
-  private _debouncedSubscribePreview = debounce(() => {
-    this._subscribePreview();
-  }, 250);
-
-  private async _subscribePreview() {
-    if (this._unsub) {
-      (await this._unsub)();
-      this._unsub = undefined;
-    }
-    if (this.flowType === "repair_flow") {
-      return;
-    }
-    try {
-      this._unsub = subscribePreviewTimeDate(
-        this.hass,
-        this.flowId,
-        this.flowType,
-        this.stepData,
-        this._setPreview
-      );
-      await this._unsub;
-    } catch (err) {
-      this._preview = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "flow-preview-time_date": FlowPreviewTimeDate;
-  }
-}

src/dialogs/config-flow/step-flow-form.ts

@@ -25,6 +25,7 @@ import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
 import { haStyle } from "../../resources/styles";
+import { previewModule } from "../../data/preview";
 
 @customElement("step-flow-form")
 class StepFlowForm extends LitElement {
@@ -76,8 +77,9 @@ class StepFlowForm extends LitElement {
                 "ui.panel.config.integrations.config_flow.preview"
               )}:
             </h3>
-            ${dynamicElement(`flow-preview-${this.step.preview}`, {
+            ${dynamicElement(`flow-preview-${previewModule(step.preview)}`, {
               hass: this.hass,
+              domain: step.preview,
               flowType: this.flowConfig.flowType,
               handler: step.handler,
               stepId: step.step_id,
@@ -120,7 +122,7 @@ class StepFlowForm extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("step") && this.step?.preview) {
-      import(`./previews/flow-preview-${this.step.preview}`);
+      import(`./previews/flow-preview-${previewModule(this.step.preview)}`);
     }
   }
 

src/dialogs/more-info/controls/more-info-climate.ts

@@ -6,7 +6,14 @@ import {
   mdiTuneVariant,
   mdiWaterPercent,
 } from "@mdi/js";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@@ -39,6 +46,17 @@ class MoreInfoClimate extends LitElement {
 
   @state() private _mainControl: MainControl = "temperature";
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (
+      changedProps.has("stateObj") &&
+      this.stateObj &&
+      this._mainControl === "humidity" &&
+      !supportsFeature(this.stateObj, ClimateEntityFeature.TARGET_HUMIDITY)
+    ) {
+      this._mainControl = "temperature";
+    }
+  }
+
   protected render() {
     if (!this.stateObj) {
       return nothing;