20230502.0 (#16382)

* Improve RTL, style and interaction

* Add message for microphone not supported

* Fix style

* Add explanation as a message

* Update message

* Update translation variable

.browserslistrc

@@ -0,0 +1,21 @@
+[modern]
+# Support for dynamic import is the main litmus test for serving modern builds.
+# Although officially a ES2020 feature, browsers implemented it early, so this
+# enables all of ES2017 and some features in ES2018.
+supports es6-module-dynamic-import
+
+# Exclude Safari 11-12 because of a bug in tagged template literals
+# https://bugs.webkit.org/show_bug.cgi?id=190756
+# Note: Dropping version 11 also enables several more ES2018 features
+not Safari < 13
+not iOS < 13
+
+# Exclude unsupported browsers
+not dead
+
+[legacy]
+# Legacy builds are transpiled to ES5 (strict mode) but also must support some features that cannot be polyfilled:
+# - web sockets to communicate with backend
+# - inline SVG used widely in buttons, widgets, etc.
+# - custom events used for most user interactions
+supports use-strict and supports websockets and supports svg-html5 and supports customevent

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

@@ -25,7 +25,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
@@ -48,7 +48,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
@@ -66,7 +66,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
@@ -84,7 +84,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:

.github/workflows/codeql-analysis.yml

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

.github/workflows/demo_deployment.yaml

@@ -17,13 +17,13 @@ jobs:
   deploy_dev:
     runs-on: ubuntu-latest
     name: Demo Development
-    if: github.event_name != 'push' || github.ref != 'master'
+    if: github.event_name != 'push' || github.ref_name != 'master'
     environment:
       name: Demo Development
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
         with:
           ref: dev
 
@@ -53,13 +53,13 @@ jobs:
   deploy_master:
     runs-on: ubuntu-latest
     name: Demo Production
-    if: github.event_name == 'push' && github.ref == 'master'
+    if: github.event_name == 'push' && github.ref_name == 'master'
     environment:
       name: Demo Production
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
         with:
           ref: master
 

.github/workflows/design_deployment.yaml

@@ -17,7 +17,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0

.github/workflows/design_preview.yaml

@@ -22,7 +22,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0

.github/workflows/nightly.yaml

@@ -21,7 +21,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4

.github/workflows/release.yaml

@@ -24,7 +24,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -75,7 +75,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2022.10.1
+        uses: home-assistant/wheels@2023.04.0
         with:
           abi: cp310
           tag: musllinux_1_2

.github/workflows/translations.yaml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Upload Translations
         run: |

build-scripts/bundle.cjs

@@ -84,17 +84,23 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
 module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   babelrc: false,
   compact: false,
+  assumptions: {
+    privateFieldsAsProperties: true,
+    setPublicClassFields: true,
+    setSpreadProperties: true,
+  },
+  browserslistEnv: latestBuild ? "modern" : "legacy",
   presets: [
-    !latestBuild && [
+    [
       "@babel/preset-env",
       {
-        useBuiltIns: "entry",
-        corejs: { version: "3.29", proposals: true },
+        useBuiltIns: latestBuild ? false : "entry",
+        corejs: latestBuild ? false : { version: "3.30", proposals: true },
         bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
-  ].filter(Boolean),
+  ],
   plugins: [
     [
       path.resolve(
@@ -106,22 +112,8 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
-      "@babel/plugin-proposal-object-rest-spread",
-      { loose: true, useBuiltIns: true },
-    ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-top-level-await",
-    // Support  various proposals
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
+    // Support  some proposals still in TC39 process
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
-    ["@babel/plugin-proposal-private-methods", { loose: true }],
-    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
-    ["@babel/plugin-proposal-class-properties", { loose: true }],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",

build-scripts/gulp/app.cjs

@@ -24,8 +24,7 @@ gulp.task(
     gulp.parallel(
       "gen-service-worker-app-dev",
       "gen-icons-json",
-      "gen-pages-dev",
-      "gen-index-app-dev",
+      "gen-pages-app-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -50,10 +49,6 @@ gulp.task(
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests
     ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel(
-      "gen-pages-prod",
-      "gen-index-app-prod",
-      "gen-service-worker-app-prod"
-    )
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
   )
 );

build-scripts/gulp/cast.cjs

@@ -19,7 +19,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "gen-index-cast-dev",
+    "gen-pages-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
@@ -35,6 +35,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
-    "gen-index-cast-prod"
+    "gen-pages-cast-prod"
   )
 );

build-scripts/gulp/demo.cjs

@@ -21,7 +21,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel(
       "gen-icons-json",
-      "gen-index-demo-dev",
+      "gen-pages-demo-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -42,6 +42,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
-    "gen-index-demo-prod"
+    "gen-pages-demo-prod"
   )
 );

build-scripts/gulp/entry-html.cjs

@@ -8,344 +8,223 @@ const paths = require("../paths.cjs");
 const env = require("../env.cjs");
 const { htmlMinifierOptions, terserOptions } = require("../bundle.cjs");
 
-const templatePath = (tpl) =>
-  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
-
-const readFile = (pth) => fs.readFileSync(pth).toString();
-
-const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
-  const compiled = template(readFile(pathFunc(pth)));
+const renderTemplate = (templateFile, data = {}) => {
+  const compiled = template(
+    fs.readFileSync(templateFile, { encoding: "utf-8" })
+  );
   return compiled({
     ...data,
     useRollup: env.useRollup(),
     useWDS: env.useWDS(),
-    renderTemplate,
+    // Resolve any child/nested templates relative to the parent and pass the same data
+    renderTemplate: (childTemplate) =>
+      renderTemplate(
+        path.resolve(path.dirname(templateFile), childTemplate),
+        data
+      ),
   });
 };
 
-const renderDemoTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
-  );
+const WRAP_TAGS = { ".js": "script", ".css": "style" };
 
-const renderCastTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
-  );
-
-const renderGalleryTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
-  );
-
-const minifyHtml = (content) =>
-  minify(content, {
+const minifyHtml = (content, ext) => {
+  const wrapTag = WRAP_TAGS[ext] || "";
+  const begTag = wrapTag && `<${wrapTag}>`;
+  const endTag = wrapTag && `</${wrapTag}>`;
+  return minify(begTag + content + endTag, {
     ...htmlMinifierOptions,
     conservativeCollapse: false,
     minifyJS: terserOptions({
       latestBuild: false, // Shared scripts should be ES5
       isTestBuild: true, // Don't need source maps
     }),
-  });
+  }).then((wrapped) =>
+    wrapTag ? wrapped.slice(begTag.length, -endTag.length) : wrapped
+  );
+};
 
-const PAGES = ["onboarding", "authorize"];
+// Function to generate a dev task for each project's configuration
+// Note Currently WDS paths are hard-coded to only work for app
+const genPagesDevTask =
+  (
+    pageEntries,
+    inputRoot,
+    outputRoot,
+    useWDS = false,
+    inputSub = "src/html",
+    publicRoot = ""
+  ) =>
+  async () => {
+    for (const [page, entries] of Object.entries(pageEntries)) {
+      const content = renderTemplate(
+        path.resolve(inputRoot, inputSub, `${page}.template`),
+        {
+          latestEntryJS: entries.map((entry) =>
+            useWDS
+              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
+              : `${publicRoot}/frontend_latest/${entry}.js`
+          ),
+          es5EntryJS: entries.map(
+            (entry) => `${publicRoot}/frontend_es5/${entry}.js`
+          ),
+          latestCustomPanelJS: useWDS
+            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
+            : `${publicRoot}/frontend_latest/custom-panel.js`,
+          es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
+        }
+      );
+      fs.outputFileSync(path.resolve(outputRoot, page), content);
+    }
+  };
 
-gulp.task("gen-pages-dev", (done) => {
-  for (const page of PAGES) {
-    const content = renderTemplate(page, {
-      latestPageJS: `/frontend_latest/${page}.js`,
-
-      es5PageJS: `/frontend_es5/${page}.js`,
-    });
-
-    fs.outputFileSync(
-      path.resolve(paths.app_output_root, `${page}.html`),
-      content
-    );
-  }
-  done();
-});
-
-gulp.task("gen-pages-prod", async () => {
-  const latestManifest = require(path.resolve(
-    paths.app_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
-
-  const minifiedHTML = [];
-  for (const page of PAGES) {
-    const content = renderTemplate(page, {
-      latestPageJS: latestManifest[`${page}.js`],
-      es5PageJS: es5Manifest[`${page}.js`],
-    });
-
-    minifiedHTML.push(
-      minifyHtml(content).then((minified) =>
-        fs.outputFileSync(
-          path.resolve(paths.app_output_root, `${page}.html`),
-          minified
+// Same as previous but for production builds
+// (includes minification and hashed file names from manifest)
+const genPagesProdTask =
+  (
+    pageEntries,
+    inputRoot,
+    outputRoot,
+    outputLatest,
+    outputES5,
+    inputSub = "src/html"
+  ) =>
+  async () => {
+    const latestManifest = require(path.resolve(outputLatest, "manifest.json"));
+    const es5Manifest = outputES5
+      ? require(path.resolve(outputES5, "manifest.json"))
+      : {};
+    const minifiedHTML = [];
+    for (const [page, entries] of Object.entries(pageEntries)) {
+      const content = renderTemplate(
+        path.resolve(inputRoot, inputSub, `${page}.template`),
+        {
+          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
+          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          latestCustomPanelJS: latestManifest["custom-panel.js"],
+          es5CustomPanelJS: es5Manifest["custom-panel.js"],
+        }
+      );
+      minifiedHTML.push(
+        minifyHtml(content, path.extname(page)).then((minified) =>
+          fs.outputFileSync(path.resolve(outputRoot, page), minified)
         )
-      )
-    );
-  }
-  await Promise.all(minifiedHTML);
-});
+      );
+    }
+    await Promise.all(minifiedHTML);
+  };
 
-gulp.task("gen-index-app-dev", (done) => {
-  let latestAppJS;
-  let latestCoreJS;
-  let latestCustomPanelJS;
+// Map HTML pages to their required entrypoints
+const APP_PAGE_ENTRIES = {
+  "authorize.html": ["authorize"],
+  "onboarding.html": ["onboarding"],
+  "index.html": ["core", "app"],
+};
 
-  if (env.useWDS()) {
-    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
-    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
-    latestCustomPanelJS =
-      "http://localhost:8000/src/entrypoints/custom-panel.ts";
-  } else {
-    latestAppJS = "/frontend_latest/app.js";
-    latestCoreJS = "/frontend_latest/core.js";
-    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
-  }
+gulp.task(
+  "gen-pages-app-dev",
+  genPagesDevTask(
+    APP_PAGE_ENTRIES,
+    paths.polymer_dir,
+    paths.app_output_root,
+    env.useWDS()
+  )
+);
 
-  const content = renderTemplate("index", {
-    latestAppJS,
-    latestCoreJS,
-    latestCustomPanelJS,
-
-    es5AppJS: "/frontend_es5/app.js",
-    es5CoreJS: "/frontend_es5/core.js",
-    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
-  }).replace(/#THEMEC/g, "{{ theme_color }}");
-
-  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
-  done();
-});
-
-gulp.task("gen-index-app-prod", async () => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-app-prod",
+  genPagesProdTask(
+    APP_PAGE_ENTRIES,
+    paths.polymer_dir,
+    paths.app_output_root,
     paths.app_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
-  const content = renderTemplate("index", {
-    latestAppJS: latestManifest["app.js"],
-    latestCoreJS: latestManifest["core.js"],
-    latestCustomPanelJS: latestManifest["custom-panel.js"],
+    paths.app_output_es5
+  )
+);
 
-    es5AppJS: es5Manifest["app.js"],
-    es5CoreJS: es5Manifest["core.js"],
-    es5CustomPanelJS: es5Manifest["custom-panel.js"],
-  });
-  const minified = (await minifyHtml(content)).replace(
-    /#THEMEC/g,
-    "{{ theme_color }}"
-  );
+const CAST_PAGE_ENTRIES = {
+  "faq.html": ["launcher"],
+  "index.html": ["launcher"],
+  "media.html": ["media"],
+  "receiver.html": ["receiver"],
+};
 
-  fs.outputFileSync(
-    path.resolve(paths.app_output_root, "index.html"),
-    minified
-  );
-});
+gulp.task(
+  "gen-pages-cast-dev",
+  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
+);
 
-gulp.task("gen-index-cast-dev", (done) => {
-  const contentReceiver = renderCastTemplate("receiver", {
-    latestReceiverJS: "/frontend_latest/receiver.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "receiver.html"),
-    contentReceiver
-  );
-
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: "/frontend_latest/media.js",
-    es5MediaJS: "/frontend_es5/media.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
-
-  const contentFAQ = renderCastTemplate("launcher-faq", {
-    latestLauncherJS: "/frontend_latest/launcher.js",
-    es5LauncherJS: "/frontend_es5/launcher.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "faq.html"),
-    contentFAQ
-  );
-
-  const contentLauncher = renderCastTemplate("launcher", {
-    latestLauncherJS: "/frontend_latest/launcher.js",
-    es5LauncherJS: "/frontend_es5/launcher.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "index.html"),
-    contentLauncher
-  );
-  done();
-});
-
-gulp.task("gen-index-cast-prod", (done) => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-cast-prod",
+  genPagesProdTask(
+    CAST_PAGE_ENTRIES,
+    paths.cast_dir,
+    paths.cast_output_root,
     paths.cast_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.cast_output_es5,
-    "manifest.json"
-  ));
+    paths.cast_output_es5
+  )
+);
 
-  const contentReceiver = renderCastTemplate("receiver", {
-    latestReceiverJS: latestManifest["receiver.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "receiver.html"),
-    contentReceiver
-  );
+const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
 
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: latestManifest["media.js"],
-    es5MediaJS: es5Manifest["media.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
+gulp.task(
+  "gen-pages-demo-dev",
+  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
+);
 
-  const contentFAQ = renderCastTemplate("launcher-faq", {
-    latestLauncherJS: latestManifest["launcher.js"],
-    es5LauncherJS: es5Manifest["launcher.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "faq.html"),
-    contentFAQ
-  );
-
-  const contentLauncher = renderCastTemplate("launcher", {
-    latestLauncherJS: latestManifest["launcher.js"],
-    es5LauncherJS: es5Manifest["launcher.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "index.html"),
-    contentLauncher
-  );
-  done();
-});
-
-gulp.task("gen-index-demo-dev", (done) => {
-  const content = renderDemoTemplate("index", {
-    latestDemoJS: "/frontend_latest/main.js",
-
-    es5DemoJS: "/frontend_es5/main.js",
-  });
-
-  fs.outputFileSync(
-    path.resolve(paths.demo_output_root, "index.html"),
-    content
-  );
-  done();
-});
-
-gulp.task("gen-index-demo-prod", async () => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-demo-prod",
+  genPagesProdTask(
+    DEMO_PAGE_ENTRIES,
+    paths.demo_dir,
+    paths.demo_output_root,
     paths.demo_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.demo_output_es5,
-    "manifest.json"
-  ));
-  const content = renderDemoTemplate("index", {
-    latestDemoJS: latestManifest["main.js"],
+    paths.demo_output_es5
+  )
+);
 
-    es5DemoJS: es5Manifest["main.js"],
-  });
-  const minified = await minifyHtml(content);
+const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
-  fs.outputFileSync(
-    path.resolve(paths.demo_output_root, "index.html"),
-    minified
-  );
-});
+gulp.task(
+  "gen-pages-gallery-dev",
+  genPagesDevTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root
+  )
+);
 
-gulp.task("gen-index-gallery-dev", (done) => {
-  const content = renderGalleryTemplate("index", {
-    latestGalleryJS: "./frontend_latest/entrypoint.js",
-  });
+gulp.task(
+  "gen-pages-gallery-prod",
+  genPagesProdTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root,
+    paths.gallery_output_latest
+  )
+);
 
-  fs.outputFileSync(
-    path.resolve(paths.gallery_output_root, "index.html"),
-    content
-  );
-  done();
-});
+const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
 
-gulp.task("gen-index-gallery-prod", async () => {
-  const latestManifest = require(path.resolve(
-    paths.gallery_output_latest,
-    "manifest.json"
-  ));
-  const content = renderGalleryTemplate("index", {
-    latestGalleryJS: latestManifest["entrypoint.js"],
-  });
-  const minified = await minifyHtml(content);
+gulp.task(
+  "gen-pages-hassio-dev",
+  genPagesDevTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    undefined,
+    "src",
+    paths.hassio_publicPath
+  )
+);
 
-  fs.outputFileSync(
-    path.resolve(paths.gallery_output_root, "index.html"),
-    minified
-  );
-});
-
-gulp.task("gen-index-hassio-dev", async () => {
-  writeHassioEntrypoint(
-    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
-    `${paths.hassio_publicPath}/frontend_es5/entrypoint.js`
-  );
-});
-
-gulp.task("gen-index-hassio-prod", async () => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-hassio-prod",
+  genPagesProdTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
     paths.hassio_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
     paths.hassio_output_es5,
-    "manifest.json"
-  ));
-  writeHassioEntrypoint(
-    latestManifest["entrypoint.js"],
-    es5Manifest["entrypoint.js"]
-  );
-});
-
-function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
-  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
-  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-  fs.writeFileSync(
-    path.resolve(paths.hassio_output_root, "entrypoint.js"),
-    `
-function loadES5() {
-  var el = document.createElement('script');
-  el.src = '${es5Entrypoint}';
-  document.body.appendChild(el);
-}
-if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
-    loadES5();
-} else {
-  try {
-    new Function("import('${latestEntrypoint}')")();
-  } catch (err) {
-    loadES5();
-  }
-}
-  `,
-    { encoding: "utf-8" }
-  );
-}
+    "src"
+  )
+);

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

@@ -8,6 +8,7 @@ const gulp = require("gulp");
 const jszip = require("jszip");
 const tar = require("tar");
 const { Octokit } = require("@octokit/rest");
+const { retry } = require("@octokit/plugin-retry");
 const { createOAuthDeviceAuth } = require("@octokit/auth-oauth-device");
 
 const MAX_AGE = 24; // hours
@@ -95,7 +96,7 @@ gulp.task("fetch-nightly-translations", async function () {
 
   // Authenticate with token and request workflow runs from GitHub
   console.log("Fetching new translations...");
-  const octokit = new Octokit({
+  const octokit = new (Octokit.plugin(retry))({
     userAgent: "Fetch Nightly Translations",
     auth: tokenAuth.token,
   });

build-scripts/gulp/gallery.cjs

@@ -3,7 +3,7 @@ const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
 const { marked } = require("marked");
-const glob = require("glob");
+const { glob } = require("glob");
 const yaml = require("js-yaml");
 
 const env = require("../env.cjs");
@@ -159,7 +159,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "gen-index-gallery-dev",
+    "gen-pages-gallery-dev",
     gulp.parallel(
       env.useRollup()
         ? "rollup-dev-server-gallery"
@@ -193,6 +193,6 @@ gulp.task(
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
-    "gen-index-gallery-prod"
+    "gen-pages-gallery-prod"
   )
 );

build-scripts/gulp/hassio.cjs

@@ -17,7 +17,7 @@ gulp.task(
     },
     "clean-hassio",
     "gen-dummy-icons-json",
-    "gen-index-hassio-dev",
+    "gen-pages-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
@@ -39,7 +39,7 @@ gulp.task(
     "build-locale-data",
     "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
-    "gen-index-hassio-prod",
+    "gen-pages-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])
   )

build-scripts/gulp/locale-data.cjs

@@ -19,6 +19,7 @@ const modules = {
   "intl-relativetimeformat": "RelativeTimeFormat",
   "intl-datetimeformat": "DateTimeFormat",
   "intl-numberformat": "NumberFormat",
+  "intl-displaynames": "DisplayNames",
 };
 
 gulp.task("create-locale-data", (done) => {

build-scripts/list-plugins-and-polyfills.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+// Script to print Babel plugins and Core JS polyfills that will be used by browserslist environments
+
+import { version as babelVersion } from "@babel/core";
+import presetEnv from "@babel/preset-env";
+import compilationTargets from "@babel/helper-compilation-targets";
+import coreJSCompat from "core-js-compat";
+import { logPlugin } from "@babel/preset-env/lib/debug.js";
+import { babelOptions } from "./bundle.cjs";
+
+const detailsOpen = (heading) =>
+  `<details>\n<summary><h4>${heading}</h4></summary>\n`;
+const detailsClose = "</details>\n";
+
+const dummyAPI = {
+  version: babelVersion,
+  assertVersion: () => {},
+  caller: (callback) =>
+    callback({
+      name: "Dummy Bundler",
+      supportsStaticESM: true,
+      supportsDynamicImport: true,
+      supportsTopLevelAwait: true,
+      supportsExportNamespaceFrom: true,
+    }),
+  targets: () => ({}),
+};
+
+for (const buildType of ["Modern", "Legacy"]) {
+  const browserslistEnv = buildType.toLowerCase();
+  const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
+  const presetEnvOpts = babelOpts.presets[0][1];
+
+  // Invoking preset-env in debug mode will log the included plugins
+  console.log(detailsOpen(`${buildType} Build Babel Plugins`));
+  presetEnv.default(dummyAPI, {
+    ...presetEnvOpts,
+    browserslistEnv,
+    debug: true,
+  });
+  console.log(detailsClose);
+
+  // Manually log the Core-JS polyfills using the same technique
+  if (presetEnvOpts.useBuiltIns) {
+    console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
+    const targets = compilationTargets.default(babelOpts?.targets, {
+      browserslistEnv,
+    });
+    const polyfillList = coreJSCompat({ targets }).list;
+    console.log(
+      "The following %i polyfills may be injected by Babel:\n",
+      polyfillList.length
+    );
+    for (const polyfill of polyfillList) {
+      logPlugin(polyfill, targets, coreJSCompat.data);
+    }
+    console.log(detailsClose);
+  }
+}

cast/src/html/_social_meta.html.template

@@ -0,0 +1,24 @@
+<meta property="fb:app_id" content="338291289691179" />
+<meta property="og:title" content="Home Assistant Cast" />
+<meta property="og:site_name" content="Home Assistant Cast" />
+<meta property="og:url" content="https://cast.home-assistant.io/" />
+<meta property="og:type" content="website" />
+<meta
+  property="og:description"
+  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+/>
+<meta
+  property="og:image"
+  content="https://cast.home-assistant.io/images/google-nest-hub.png"
+/>
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@home_assistant" />
+<meta name="twitter:title" content="Home Assistant Cast" />
+<meta
+  name="twitter:description"
+  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+/>
+<meta
+  name="twitter:image"
+  content="https://cast.home-assistant.io/images/google-nest-hub.png"
+/>

cast/src/html/faq.html.template

@@ -3,7 +3,7 @@
   <head>
     <title>Home Assistant Cast - FAQ</title>
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate('_style_base') %>
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       body {
         background-color: #e5e5e5;
@@ -35,25 +35,14 @@
     />
   </head>
   <body>
-    <%= renderTemplate('_js_base') %>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <script>
-      import("<%= latestLauncherJS %>");
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
       window.latestJS = true;
     </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
-    </script>
-
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
     <hc-layout subtitle="FAQ">
       <style>
         a {

cast/src/html/index.html.template

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <%= renderTemplate("_social_meta.html.template") %>
+  </head>
+  <body>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <hc-connect></hc-connect>
+    <script>
+      <% for (const entry of latestEntryJS) { %>
+        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),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-57927901-9', 'auto');
+    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
+    </script>
+  </body>
+</html>

cast/src/html/launcher.html.template

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Home Assistant Cast</title>
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate('_style_base') %>
-    <style>
-      body {
-        background-color: #e5e5e5;
-      }
-    </style>
-    <meta property="fb:app_id" content="338291289691179">
-    <meta property="og:title" content="Home Assistant Cast">
-    <meta property="og:site_name" content="Home Assistant Cast">
-    <meta property="og:url" content="https://cast.home-assistant.io/">
-    <meta property="og:type" content="website">
-    <meta property="og:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
-    <meta property="og:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@home_assistant">
-    <meta name="twitter:title" content="Home Assistant Cast">
-    <meta name="twitter:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
-    <meta name="twitter:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
-  </head>
-  <body>
-    <%= renderTemplate('_js_base') %>
-
-    <hc-connect></hc-connect>
-
-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
-    </script>
-    <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),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-57927901-9', 'auto');
-    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
-    </script>
-  </body>
-</html>

cast/src/html/media.html.template

@@ -22,25 +22,14 @@
     </script>
   </head>
   <body>
-    <%= renderTemplate('_js_base') %>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <cast-media-player></cast-media-player>
-
     <script>
-      import("<%= latestMediaJS %>");
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
       window.latestJS = true;
     </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5MediaJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5MediaJS %>");
-        <% } %>
-      }
-    </script>
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
   </body>
 </html>

cast/src/html/receiver.html.template

@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
   <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-  <script type="module" src="<%= latestReceiverJS %>"></script>
-  <%= renderTemplate('_style_base') %>
+  <% for (const entry of latestEntryJS) { %>
+    <script type="module" src="<%= entry %>"></script>
+  <% } %>
+  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
   <style>
     body {
       background-color: white;

demo/src/html/_social_meta.html.template

@@ -0,0 +1,26 @@
+<meta property="fb:app_id" content="338291289691179" />
+<meta property="og:title" content="Home Assistant Demo" />
+<meta property="og:site_name" content="Home Assistant" />
+<meta property="og:url" content="https://demo.home-assistant.io/" />
+<meta property="og:type" content="website" />
+<meta
+  property="og:description"
+  content="Open source home automation that puts local control and privacy first."
+/>
+<meta
+  property="og:image"
+  content="https://www.home-assistant.io/images/default-social.png"
+/>
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@home_assistant" />
+
+<meta name="twitter:title" content="Home Assistant" />
+<meta
+  name="twitter:description"
+  content="Open source home automation that puts local control and privacy first."
+/>
+<meta
+  name="twitter:image"
+  content="https://www.home-assistant.io/images/default-social.png"
+/>

demo/src/html/index.html.template

@@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" />
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-    <link rel="icon" href="/static/icons/favicon.ico" />
+    <title>Home Assistant Demo</title>
+    <%= renderTemplate("../../../src/html/_header.html.template") %>
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
@@ -35,33 +34,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#03a9f4" />
-    <meta property="fb:app_id" content="338291289691179" />
-    <meta property="og:title" content="Home Assistant Demo" />
-    <meta property="og:site_name" content="Home Assistant" />
-    <meta property="og:url" content="https://demo.home-assistant.io/" />
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:description"
-      content="Open source home automation that puts local control and privacy first."
-    />
-    <meta
-      property="og:image"
-      content="https://www.home-assistant.io/images/default-social.png"
-    />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@home_assistant" />
-
-    <meta name="twitter:title" content="Home Assistant" />
-    <meta
-      name="twitter:description"
-      content="Open source home automation that puts local control and privacy first."
-    />
-    <meta
-      name="twitter:image"
-      content="https://www.home-assistant.io/images/default-social.png"
-    />
-    <title>Home Assistant Demo</title>
+    <%= renderTemplate("_social_meta.html.template") %>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
@@ -107,29 +80,22 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
-
     <ha-demo></ha-demo>
-
-    <%= renderTemplate('_js_base') %>
-    <%= renderTemplate('_preload_roboto') %>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
     <script>
-      import("<%= latestDemoJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5DemoJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5DemoJS %>");
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
+      // 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") %>
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function (d, t) {

gallery/src/html/index.html.template

@@ -8,8 +8,9 @@
     />
     <meta name="theme-color" content="#2157BC" />
     <title>Home Assistant Design</title>
-
-    <script type="module" src="<%= latestGalleryJS %>"></script>
+    <% for (const entry of latestEntryJS) { %>
+      <script type="module" src="<%= entry %>"></script>
+    <% } %>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;

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

@@ -336,7 +336,7 @@ const SCHEMAS: {
           ["and", "another_one"],
           ["option", "1000"],
         ],
-        name: "select many otions",
+        name: "select many options",
         default: "default",
       },
     ],
@@ -364,7 +364,7 @@ const SCHEMAS: {
           and: "another_one",
           option: "1000",
         },
-        name: "multi many otions",
+        name: "multi many options",
         default: ["default"],
       },
     ],

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

@@ -92,11 +92,7 @@ export class HassioAddonStore extends LitElement {
         .route=${this.route}
         .header=${this.supervisor.localize("panel.store")}
       >
-        <ha-button-menu
-          corner="BOTTOM_START"
-          slot="toolbar-icon"
-          @action=${this._handleAction}
-        >
+        <ha-button-menu slot="toolbar-icon" @action=${this._handleAction}>
           <ha-icon-button
             .label=${this.supervisor.localize("common.menu")}
             .path=${mdiDotsVertical}
@@ -220,7 +216,7 @@ export class HassioAddonStore extends LitElement {
     });
   }
 
-  private async _filterChanged(e) {
+  private _filterChanged(e) {
     this._filter = e.detail.value;
   }
 

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

@@ -168,7 +168,7 @@ class HassioAddonConfig extends LitElement {
             ${this.supervisor.localize("addon.configuration.options.header")}
           </h2>
           <div class="card-menu">
-            <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+            <ha-button-menu @action=${this._handleAction}>
               <ha-icon-button
                 .label=${this.supervisor.localize("common.menu")}
                 .path=${mdiDotsVertical}

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

@@ -29,7 +29,6 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { navigate } from "../../../../src/common/navigate";
-import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
@@ -47,6 +46,7 @@ import {
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
   installHassioAddon,
+  rebuildLocalAddon,
   restartHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
@@ -640,13 +640,12 @@ class HassioAddonInfo extends LitElement {
                   </ha-progress-button>
                   ${this.addon.build
                     ? html`
-                        <ha-call-api-button
+                        <ha-progress-button
                           class="warning"
-                          .hass=${this.hass}
-                          .path="hassio/addons/${this.addon.slug}/rebuild"
+                          @click=${this._rebuildClicked}
                         >
                           ${this.supervisor.localize("addon.dashboard.rebuild")}
-                        </ha-call-api-button>
+                        </ha-progress-button>
                       `
                     : ""}`
               : ""}
@@ -966,6 +965,21 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
+  private async _rebuildClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    try {
+      await rebuildLocalAddon(this.hass, this.addon.slug);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.supervisor.localize("addon.dashboard.action_error.rebuild"),
+        text: extractApiErrorMessage(err),
+      });
+    }
+    button.progress = false;
+  }
+
   private async _startClicked(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
     button.progress = true;
@@ -1124,10 +1138,6 @@ class HassioAddonInfo extends LitElement {
         ha-svg-icon.stopped {
           color: var(--error-color);
         }
-        ha-call-api-button {
-          font-weight: 500;
-          color: var(--primary-color);
-        }
         protection-enable mwc-button {
           --mdc-theme-primary: white;
         }

hassio/src/backups/hassio-backups.ts

@@ -195,11 +195,7 @@ export class HassioBackups extends LitElement {
           : "/config"}
         supervisor
       >
-        <ha-button-menu
-          corner="BOTTOM_START"
-          slot="toolbar-icon"
-          @action=${this._handleAction}
-        >
+        <ha-button-menu slot="toolbar-icon" @action=${this._handleAction}>
           <ha-icon-button
             .label=${this.supervisor?.localize("common.menu")}
             .path=${mdiDotsVertical}

hassio/src/dashboard/hassio-dashboard.ts

@@ -9,7 +9,6 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
-import "./hassio-update";
 import "../../../src/layouts/hass-subpage";
 
 @customElement("hassio-dashboard")
@@ -22,6 +21,12 @@ class HassioDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  firstUpdated() {
+    if (!atLeastVersion(this.hass.config.version, 2022, 5)) {
+      import("./hassio-update");
+    }
+  }
+
   protected render(): TemplateResult {
     if (atLeastVersion(this.hass.config.version, 2022, 5)) {
       return html`<hass-subpage
@@ -44,7 +49,7 @@ class HassioDashboard extends LitElement {
             <ha-svg-icon
               slot="icon"
               .path=${mdiStorePlus}
-            ></ha-svg-icon> </ha-fab
+            ></ha-svg-icon></ha-fab
         ></a>
       </hass-subpage>`;
     }

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

@@ -316,7 +316,7 @@ export class DialogHassioNetwork
       >
         <div class="radio-row">
           <ha-formfield
-            .label=${this.supervisor.localize("dialog.network.dhcp")}
+            .label=${this.supervisor.localize("dialog.network.auto")}
           >
             <ha-radio
               @change=${this._handleRadioValueChanged}

hassio/src/entrypoint.js.template

@@ -0,0 +1,22 @@
+(function () {
+  function loadES5(src) {
+    var el = document.createElement("script");
+    el.src = src;
+    document.body.appendChild(el);
+  }
+  if (/.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent)) {
+    <% for (const entry of es5EntryJS) { %>
+      loadES5("<%= entry %>");
+    <% } %>
+  } else {
+    try {
+        <% for (const entry of latestEntryJS) { %>
+          new Function("import('<%= entry %>')")();
+        <% } %>
+    } catch (err) {
+      <% for (const entry of es5EntryJS) { %>
+        loadES5("<%= entry %>");
+      <% } %>
+  }
+  }
+})();

hassio/src/entrypoint.ts

@@ -2,6 +2,7 @@
 import "../../src/resources/compatibility";
 import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../../src/resources/roboto";
+import "../../src/resources/ha-style";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./hassio-main";
 

hassio/src/hassio-main.ts

@@ -9,7 +9,6 @@ import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import "../../src/layouts/hass-loading-screen";
 import { HomeAssistant } from "../../src/types";
 import "./hassio-router";
 import { SupervisorBaseElement } from "./supervisor-base-element";

hassio/src/hassio-panel-router.ts

@@ -5,12 +5,8 @@ import {
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
 import { HomeAssistant, Route } from "../../src/types";
-import "./addon-store/hassio-addon-store";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./dashboard/hassio-dashboard";
-// Don't codesplit the others, because it breaks the UI when pushed to a Pi
-import "./backups/hassio-backups";
-import "./system/hassio-system";
 
 @customElement("hassio-panel-router")
 class HassioPanelRouter extends HassRouterPage {
@@ -31,12 +27,15 @@ class HassioPanelRouter extends HassRouterPage {
       },
       store: {
         tag: "hassio-addon-store",
+        load: () => import("./addon-store/hassio-addon-store"),
       },
       backups: {
         tag: "hassio-backups",
+        load: () => import("./backups/hassio-backups"),
       },
       system: {
         tag: "hassio-system",
+        load: () => import("./system/hassio-system"),
       },
     },
   };

hassio/src/hassio-panel.ts

@@ -4,6 +4,7 @@ import {
   Supervisor,
   supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
+import "../../src/layouts/hass-loading-screen";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 

hassio/src/hassio-router.ts

@@ -5,7 +5,6 @@ import {
   HassRouterPage,
   RouterOptions,
 } from "../../src/layouts/hass-router-page";
-import "../../src/resources/ha-style";
 import { HomeAssistant } from "../../src/types";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-panel";

hassio/src/resources/hassio-style.ts

@@ -44,10 +44,6 @@ export const hassioStyle = css`
       grid-template-columns: repeat(auto-fit, minmax(300px, 0.25fr));
     }
   }
-  ha-call-api-button {
-    font-weight: 500;
-    color: var(--primary-color);
-  }
   .error {
     color: var(--error-color);
     margin-top: 16px;

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

@@ -184,7 +184,7 @@ class HassioHostInfo extends LitElement {
               `
             : ""}
 
-          <ha-button-menu corner="BOTTOM_START">
+          <ha-button-menu>
             <ha-icon-button
               .label=${this.supervisor.localize("common.menu")}
               .path=${mdiDotsVertical}

hassio/src/update-available/update-available-card.ts

@@ -42,9 +42,6 @@ import { updateCore } from "../../../src/data/supervisor/core";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-subpage";
-import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
 import { addonArchIsSupported, extractChangelog } from "../util/addon";
 

package.json

@@ -26,20 +26,21 @@
   "type": "module",
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
-    "@codemirror/autocomplete": "6.4.2",
-    "@codemirror/commands": "6.2.2",
+    "@codemirror/autocomplete": "6.5.1",
+    "@codemirror/commands": "6.2.3",
     "@codemirror/language": "6.6.0",
     "@codemirror/legacy-modes": "6.3.2",
     "@codemirror/search": "6.3.0",
     "@codemirror/state": "6.2.0",
-    "@codemirror/view": "6.9.3",
+    "@codemirror/view": "6.9.5",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.5.1",
+    "@formatjs/intl-datetimeformat": "6.7.0",
+    "@formatjs/intl-displaynames": "6.3.1",
     "@formatjs/intl-getcanonicallocales": "2.1.0",
-    "@formatjs/intl-locale": "3.1.1",
-    "@formatjs/intl-numberformat": "8.3.5",
-    "@formatjs/intl-pluralrules": "5.1.10",
-    "@formatjs/intl-relativetimeformat": "11.1.10",
+    "@formatjs/intl-locale": "3.2.1",
+    "@formatjs/intl-numberformat": "8.4.1",
+    "@formatjs/intl-pluralrules": "5.2.1",
+    "@formatjs/intl-relativetimeformat": "11.2.1",
     "@fullcalendar/core": "6.1.5",
     "@fullcalendar/daygrid": "6.1.5",
     "@fullcalendar/interaction": "6.1.5",
@@ -90,33 +91,33 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "23.3.9",
-    "@vaadin/vaadin-themable-mixin": "23.3.9",
+    "@vaadin/combo-box": "23.3.11",
+    "@vaadin/vaadin-themable-mixin": "23.3.11",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
     "@vue/web-component-wrapper": "1.3.0",
-    "@webcomponents/scoped-custom-element-registry": "0.0.8",
-    "@webcomponents/webcomponentsjs": "2.7.0",
+    "@webcomponents/scoped-custom-element-registry": "0.0.9",
+    "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "chart.js": "3.3.2",
     "comlink": "4.4.1",
-    "core-js": "3.29.1",
+    "core-js": "3.30.1",
     "cropperjs": "1.5.13",
     "date-fns": "2.29.3",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "fuse.js": "6.6.2",
-    "google-timezones-json": "1.0.2",
+    "google-timezones-json": "1.1.0",
     "hls.js": "1.3.5",
     "home-assistant-js-websocket": "8.0.1",
     "idb-keyval": "6.2.0",
-    "intl-messageformat": "10.3.3",
+    "intl-messageformat": "10.3.4",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.3",
     "leaflet-draw": "1.0.4",
-    "lit": "2.7.0",
+    "lit": "2.7.2",
     "marked": "4.3.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
@@ -148,26 +149,19 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.21.3",
-    "@babel/plugin-external-helpers": "7.18.6",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/core": "7.21.4",
     "@babel/plugin-proposal-decorators": "7.21.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-syntax-top-level-await": "7.14.5",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-typescript": "7.21.0",
+    "@babel/preset-env": "7.21.4",
+    "@babel/preset-typescript": "7.21.4",
     "@koa/cors": "4.0.0",
     "@octokit/auth-oauth-device": "4.0.4",
+    "@octokit/plugin-retry": "4.1.3",
     "@octokit/rest": "19.0.7",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-replace": "5.0.2",
     "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "1.0.5",
@@ -184,40 +178,40 @@
     "@types/sortablejs": "1.15.1",
     "@types/tar": "6.1.4",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "5.57.0",
-    "@typescript-eslint/parser": "5.57.0",
-    "@web/dev-server": "0.1.37",
-    "@web/dev-server-rollup": "0.4.0",
+    "@typescript-eslint/eslint-plugin": "5.59.0",
+    "@typescript-eslint/parser": "5.59.0",
+    "@web/dev-server": "0.1.38",
+    "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.2",
     "babel-plugin-template-html-minifier": "4.1.0",
     "chai": "4.3.7",
     "del": "7.0.0",
-    "eslint": "8.37.0",
+    "eslint": "8.38.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-import-resolver-webpack": "0.13.2",
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-lit": "1.8.2",
-    "eslint-plugin-lit-a11y": "2.4.0",
+    "eslint-plugin-lit": "1.8.3",
+    "eslint-plugin-lit-a11y": "2.4.1",
     "eslint-plugin-unused-imports": "2.0.0",
     "eslint-plugin-wc": "1.4.0",
     "esprima": "4.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.1.1",
-    "glob": "9.3.2",
+    "glob": "10.2.1",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
     "gulp-json-transform": "0.4.8",
     "gulp-merge-json": "2.1.2",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
-    "html-minifier-terser": "7.1.0",
+    "html-minifier-terser": "7.2.0",
     "husky": "8.0.3",
-    "instant-mocha": "1.5.0",
+    "instant-mocha": "1.5.1",
     "jszip": "3.10.1",
-    "lint-staged": "13.2.0",
+    "lint-staged": "13.2.1",
     "lit-analyzer": "1.2.1",
     "lodash.template": "4.5.0",
     "magic-string": "0.30.0",
@@ -233,7 +227,7 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.9.0",
     "serve-handler": "6.1.5",
-    "sinon": "15.0.3",
+    "sinon": "15.0.4",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.1",
     "tar": "6.1.13",
@@ -244,7 +238,7 @@
     "vinyl-source-stream": "2.0.0",
     "webpack": "=5.72.1",
     "webpack-cli": "5.0.1",
-    "webpack-dev-server": "4.13.1",
+    "webpack-dev-server": "4.13.3",
     "webpack-manifest-plugin": "5.0.0",
     "webpackbar": "5.0.2",
     "workbox-build": "6.5.4"

pyproject.toml

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

src/auth/ha-auth-flow.ts

@@ -9,6 +9,7 @@ import {
   PropertyValues,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
@@ -20,13 +21,12 @@ import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import "./ha-password-manager-polyfill";
 
 type State = "loading" | "error" | "step";
 
 @customElement("ha-auth-flow")
-export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
+export class HaAuthFlow extends LitElement {
   @property({ attribute: false }) public authProvider?: AuthProvider;
 
   @property() public clientId?: string;
@@ -35,6 +35,8 @@ export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
+  @property() public localize!: LocalizeFunc;
+
   @state() private _state: State = "loading";
 
   @state() private _stepData?: Record<string, any>;

src/auth/ha-authorize.ts

@@ -82,12 +82,13 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         .redirectUri=${this.redirectUri}
         .oauth2State=${this.oauth2State}
         .authProvider=${this._authProvider}
+        .localize=${this.localize}
       ></ha-auth-flow>
 
       ${inactiveProviders.length > 0
         ? html`
             <ha-pick-auth-provider
-              .resources=${this.resources}
+              .localize=${this.localize}
               .clientId=${this.clientId}
               .authProviders=${inactiveProviders}
               @pick-auth-provider=${this._handleAuthProviderPick}

src/auth/ha-pick-auth-provider.ts

@@ -2,10 +2,10 @@ import "@material/mwc-list";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-next";
 import "../components/ha-list-item";
 import { AuthProvider } from "../data/auth";
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 
 declare global {
   interface HASSDomEvents {
@@ -14,9 +14,11 @@ declare global {
 }
 
 @customElement("ha-pick-auth-provider")
-export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
+export class HaPickAuthProvider extends LitElement {
   @property() public authProviders: AuthProvider[] = [];
 
+  @property() public localize!: LocalizeFunc;
+
   protected render() {
     return html`
       <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>

src/common/const.ts

@@ -50,6 +50,7 @@ import {
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
+  mdiSpeakerMessage,
   mdiSpeedometer,
   mdiSunWireless,
   mdiThermometer,
@@ -75,8 +76,8 @@ export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
-  alert: mdiAlert,
   air_quality: mdiAirFilter,
+  alert: mdiAlert,
   calendar: mdiCalendar,
   climate: mdiThermostat,
   configurator: mdiCog,
@@ -106,10 +107,12 @@ export const FIXED_DOMAIN_ICONS = {
   script: mdiScriptText,
   select: mdiFormatListBulleted,
   sensor: mdiEye,
-  siren: mdiBullhorn,
   simple_alarm: mdiBell,
+  siren: mdiBullhorn,
+  stt: mdiMicrophoneMessage,
   text: mdiFormTextbox,
   timer: mdiTimerOutline,
+  tts: mdiSpeakerMessage,
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   zone: mdiMapMarkerRadius,

src/common/dom/speech-recognition.ts

@@ -1,7 +0,0 @@
-export const SpeechRecognition =
-  window.SpeechRecognition || window.webkitSpeechRecognition;
-export const SpeechGrammarList =
-  window.SpeechGrammarList || window.webkitSpeechGrammarList;
-export const SpeechRecognitionEvent =
-  // @ts-expect-error
-  window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;

src/common/entity/compute_state_display.ts

@@ -24,26 +24,47 @@ import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 import { supportsFeatureFromAttributes } from "./supports-feature";
 
+export const computeStateDisplaySingleEntity = (
+  localize: LocalizeFunc,
+  stateObj: HassEntity,
+  locale: FrontendLocaleData,
+  entity: EntityRegistryDisplayEntry | undefined,
+  state?: string
+): string =>
+  computeStateDisplayFromEntityAttributes(
+    localize,
+    locale,
+    entity,
+    stateObj.entity_id,
+    stateObj.attributes,
+    state !== undefined ? state : stateObj.state
+  );
+
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
   entities: HomeAssistant["entities"],
   state?: string
-): string =>
-  computeStateDisplayFromEntityAttributes(
+): string => {
+  const entity = entities[stateObj.entity_id] as
+    | EntityRegistryDisplayEntry
+    | undefined;
+
+  return computeStateDisplayFromEntityAttributes(
     localize,
     locale,
-    entities,
+    entity,
     stateObj.entity_id,
     stateObj.attributes,
     state !== undefined ? state : stateObj.state
   );
+};
 
 export const computeStateDisplayFromEntityAttributes = (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
-  entities: HomeAssistant["entities"],
+  entity: EntityRegistryDisplayEntry | undefined,
   entityId: string,
   attributes: any,
   state: string
@@ -52,8 +73,6 @@ export const computeStateDisplayFromEntityAttributes = (
     return localize(`state.default.${state}`);
   }
 
-  const entity = entities[entityId] as EntityRegistryDisplayEntry | undefined;
-
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
   if (isNumericFromAttributes(attributes)) {
     // state is duration
@@ -174,11 +193,9 @@ export const computeStateDisplayFromEntityAttributes = (
     );
   }
 
-  // state of button is a timestamp
+  // state is a timestamp
   if (
-    domain === "button" ||
-    domain === "input_button" ||
-    domain === "scene" ||
+    ["button", "input_button", "scene", "stt", "tts"].includes(domain) ||
     (domain === "sensor" && attributes.device_class === "timestamp")
   ) {
     try {

src/common/language/format_language.ts

@@ -0,0 +1,22 @@
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
+
+export const formatLanguageCode = (
+  languageCode: string,
+  locale: FrontendLocaleData
+) => {
+  try {
+    return formatLanguageCodeMem(locale)?.of(languageCode) ?? languageCode;
+  } catch {
+    return languageCode;
+  }
+};
+
+const formatLanguageCodeMem = memoizeOne((locale: FrontendLocaleData) =>
+  Intl && "DisplayNames" in Intl
+    ? new Intl.DisplayNames(locale.language, {
+        type: "language",
+        fallback: "code",
+      })
+    : undefined
+);

src/common/structs/is-entity-id.ts

@@ -1,17 +0,0 @@
-import { refine, string } from "superstruct";
-
-const isEntityId = (value: string): boolean => value.includes(".");
-
-export const entityId = () =>
-  refine(string(), "entity ID (domain.entity)", isEntityId);
-
-const isEntityIdOrAll = (value: string): boolean => {
-  if (value === "all") {
-    return true;
-  }
-
-  return isEntityId(value);
-};
-
-export const entityIdOrAll = () =>
-  refine(string(), "entity ID (domain.entity or all)", isEntityIdOrAll);

src/common/translations/blank_before_percent.ts

@@ -4,7 +4,7 @@ import { FrontendLocaleData } from "../../data/translation";
 export const blankBeforePercent = (
   localeOptions: FrontendLocaleData
 ): string => {
-  switch (localeOptions.language) {
+  switch (localeOptions?.language) {
     case "cz":
     case "de":
     case "fi":

src/common/translations/localize.ts

@@ -2,6 +2,7 @@ import { shouldPolyfill as shouldPolyfillLocale } from "@formatjs/intl-locale/li
 import { shouldPolyfill as shouldPolyfillPluralRules } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import { shouldPolyfill as shouldPolyfillRelativeTime } from "@formatjs/intl-relativetimeformat/lib/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDateTime } from "@formatjs/intl-datetimeformat/lib/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDisplayName } from "@formatjs/intl-displaynames/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources, TranslationDict } from "../../types";
 import { getLocalLanguage } from "../../util/common-translation";
@@ -83,6 +84,10 @@ if (__BUILD__ === "latest") {
     polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
     polyfills.push(import("@formatjs/intl-datetimeformat/add-all-tz"));
   }
+  if (shouldPolyfillDisplayName(locale)) {
+    polyfills.push(import("@formatjs/intl-displaynames/polyfill"));
+    polyfills.push(import("@formatjs/intl-displaynames/locale-data/en"));
+  }
 }
 
 export const polyfillsLoaded =
@@ -216,6 +221,17 @@ export const loadPolyfillLocales = async (language: string) => {
       // @ts-ignore
       Intl.DateTimeFormat.__addLocaleData(await result.json());
     }
+    if (
+      Intl.DisplayNames &&
+      // @ts-ignore
+      typeof Intl.DisplayNames.__addLocaleData === "function"
+    ) {
+      const result = await fetch(
+        `/static/locale-data/intl-displaynames/${language}.json`
+      );
+      // @ts-ignore
+      Intl.DisplayNames.__addLocaleData(await result.json());
+    }
   } catch (e) {
     // Ignore
   }

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

@@ -1,77 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import "./ha-progress-button";
-
-@customElement("ha-call-api-button")
-class HaCallApiButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public method: "POST" | "GET" | "PUT" | "DELETE" = "POST";
-
-  @property() public data = {};
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public progress = false;
-
-  @property() public path?: string;
-
-  @query("ha-progress-button", true) private _progressButton;
-
-  render() {
-    return html`
-      <ha-progress-button
-        .progress=${this.progress}
-        @click=${this._buttonTapped}
-        ?disabled=${this.disabled}
-        ><slot></slot
-      ></ha-progress-button>
-    `;
-  }
-
-  async _buttonTapped() {
-    this.progress = true;
-    const eventData: {
-      method: string;
-      path: string;
-      data: any;
-      success?: boolean;
-      response?: any;
-    } = {
-      method: this.method,
-      path: this.path!,
-      data: this.data,
-    };
-
-    try {
-      const resp = await this.hass.callApi(this.method, this.path!, this.data);
-      this.progress = false;
-      this._progressButton.actionSuccess();
-      eventData.success = true;
-      eventData.response = resp;
-    } catch (err: any) {
-      this.progress = false;
-      this._progressButton.actionError();
-      eventData.success = false;
-      eventData.response = err;
-    }
-
-    fireEvent(this, "hass-api-called", eventData as any);
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host([disabled]) {
-        pointer-events: none;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-call-api-button": HaCallApiButton;
-  }
-}

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

@@ -276,7 +276,11 @@ export default class HaChartBase extends LitElement {
       top: this.chart!.canvas.offsetTop + context.tooltip.caretY + 12 + "px",
       left:
         this.chart!.canvas.offsetLeft +
-        clamp(context.tooltip.caretX, 100, this.clientWidth - 100) -
+        clamp(
+          context.tooltip.caretX,
+          100,
+          this.clientWidth - 100 - this.paddingYAxis
+        ) -
         100 +
         "px",
     };
@@ -302,7 +306,7 @@ export default class HaChartBase extends LitElement {
     return css`
       :host {
         display: block;
-        position: relative;
+        position: var(--chart-base-position, relative);
       }
       .chartContainer {
         overflow: hidden;

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

@@ -73,7 +73,7 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   main?: boolean;
   title: TemplateResult | string;
   label?: TemplateResult | string;
-  type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
+  type?: "numeric" | "icon" | "icon-button" | "overflow-menu" | "flex";
   template?: (data: any, row: T) => TemplateResult | string | typeof nothing;
   width?: string;
   maxWidth?: string;
@@ -359,10 +359,10 @@ export class HaDataTable extends LitElement {
       return nothing;
     }
     if (row.append) {
-      return html` <div class="mdc-data-table__row">${row.content}</div> `;
+      return html`<div class="mdc-data-table__row">${row.content}</div>`;
     }
     if (row.empty) {
-      return html` <div class="mdc-data-table__row"></div> `;
+      return html`<div class="mdc-data-table__row"></div>`;
     }
     return html`
       <div
@@ -406,6 +406,7 @@ export class HaDataTable extends LitElement {
             <div
               role=${column.main ? "rowheader" : "cell"}
               class="mdc-data-table__cell ${classMap({
+                "mdc-data-table__cell--flex": column.type === "flex",
                 "mdc-data-table__cell--numeric": column.type === "numeric",
                 "mdc-data-table__cell--icon": column.type === "icon",
                 "mdc-data-table__cell--icon-button":
@@ -663,6 +664,11 @@ export class HaDataTable extends LitElement {
           box-sizing: border-box;
         }
 
+        .mdc-data-table__cell.mdc-data-table__cell--flex {
+          display: flex;
+          overflow: initial;
+        }
+
         .mdc-data-table__cell.mdc-data-table__cell--icon {
           overflow: initial;
         }
@@ -979,6 +985,7 @@ export class HaDataTable extends LitElement {
         }
         lit-virtualizer {
           contain: size layout !important;
+          overscroll-behavior: contain;
         }
       `,
     ];

src/components/ha-aliases-editor.ts

@@ -0,0 +1,133 @@
+import "@material/mwc-button/mwc-button";
+import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-area-picker";
+import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-aliases-editor")
+class AliasesEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public aliases!: string[];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  protected render() {
+    if (!this.aliases) {
+      return nothing;
+    }
+
+    return html`
+      ${this.aliases.map(
+        (alias, index) => html`
+          <div class="layout horizontal center-center row">
+            <ha-textfield
+              .disabled=${this.disabled}
+              dialogInitialFocus=${index}
+              .index=${index}
+              class="flex-auto"
+              .label=${this.hass!.localize("ui.dialogs.aliases.input_label", {
+                number: index + 1,
+              })}
+              .value=${alias}
+              ?data-last=${index === this.aliases.length - 1}
+              @input=${this._editAlias}
+              @keydown=${this._keyDownAlias}
+            ></ha-textfield>
+            <ha-icon-button
+              .disabled=${this.disabled}
+              .index=${index}
+              slot="navigationIcon"
+              label=${this.hass!.localize("ui.dialogs.aliases.remove_alias", {
+                number: index + 1,
+              })}
+              @click=${this._removeAlias}
+              .path=${mdiDeleteOutline}
+            ></ha-icon-button>
+          </div>
+        `
+      )}
+      <div class="layout horizontal center-center">
+        <mwc-button @click=${this._addAlias} .disabled=${this.disabled}>
+          ${this.hass!.localize("ui.dialogs.aliases.add_alias")}
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </mwc-button>
+      </div>
+    `;
+  }
+
+  private async _addAlias() {
+    this.aliases = [...this.aliases, ""];
+    this._fireChanged(this.aliases);
+    await this.updateComplete;
+    const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
+      | HaTextField
+      | undefined;
+    field?.focus();
+  }
+
+  private async _editAlias(ev: Event) {
+    const index = (ev.target as any).index;
+    const aliases = [...this.aliases];
+    aliases[index] = (ev.target as any).value;
+    this._fireChanged(aliases);
+  }
+
+  private async _keyDownAlias(ev: KeyboardEvent) {
+    if (ev.key === "Enter") {
+      ev.stopPropagation();
+      this._addAlias();
+    }
+  }
+
+  private async _removeAlias(ev: Event) {
+    const index = (ev.target as any).index;
+    const aliases = [...this.aliases];
+    aliases.splice(index, 1);
+    this._fireChanged(aliases);
+  }
+
+  private _fireChanged(value) {
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .row {
+          margin-bottom: 8px;
+        }
+        ha-textfield {
+          display: block;
+        }
+        ha-icon-button {
+          display: block;
+        }
+        mwc-button {
+          margin-left: 8px;
+        }
+        #alias_input {
+          margin-top: 8px;
+        }
+        .alias {
+          border: 1px solid var(--divider-color);
+          border-radius: 4px;
+          margin-top: 4px;
+          --mdc-icon-button-size: 24px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-aliases-editor": AliasesEditor;
+  }
+}

src/components/ha-analytics.ts

@@ -2,9 +2,9 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { LocalizeFunc } from "../common/translations/localize";
 import type { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-settings-row";
 import "./ha-switch";
 import type { HaSwitch } from "./ha-switch";
@@ -19,7 +19,7 @@ declare global {
 
 @customElement("ha-analytics")
 export class HaAnalytics extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public localize!: LocalizeFunc;
 
   @property({ attribute: false }) public analytics?: Analytics;
 
@@ -34,12 +34,12 @@ export class HaAnalytics extends LitElement {
     return html`
       <ha-settings-row>
         <span slot="heading" data-for="base">
-          ${this.hass.localize(
+          ${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.title`
           )}
         </span>
         <span slot="description" data-for="base">
-          ${this.hass.localize(
+          ${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.description`
           )}
         </span>
@@ -57,12 +57,12 @@ export class HaAnalytics extends LitElement {
           html`
             <ha-settings-row>
               <span slot="heading" data-for=${preference}>
-                ${this.hass.localize(
+                ${this.localize(
                   `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
                 )}
               </span>
               <span slot="description" data-for=${preference}>
-                ${this.hass.localize(
+                ${this.localize(
                   `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.description`
                 )}
               </span>
@@ -77,7 +77,7 @@ export class HaAnalytics extends LitElement {
                 ${!baseEnabled
                   ? html`
                       <simple-tooltip animation-delay="0" position="right">
-                        ${this.hass.localize(
+                        ${this.localize(
                           `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                         )}
                       </simple-tooltip>
@@ -89,12 +89,12 @@ export class HaAnalytics extends LitElement {
       )}
       <ha-settings-row>
         <span slot="heading" data-for="diagnostics">
-          ${this.hass.localize(
+          ${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.title`
           )}
         </span>
         <span slot="description" data-for="diagnostics">
-          ${this.hass.localize(
+          ${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.description`
           )}
         </span>

src/components/ha-assist-pipeline-picker.ts

@@ -0,0 +1,109 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValueMap,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { formatLanguageCode } from "../common/language/format_language";
+import { AssistPipeline, listAssistPipelines } from "../data/assist_pipeline";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const PREFERRED = "__PREFERRED_PIPELINE_OPTION__";
+
+@customElement("ha-assist-pipeline-picker")
+export class HaAssistPipelinePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _pipelines?: AssistPipeline[];
+
+  @state() _preferredPipeline: string | null = null;
+
+  protected render() {
+    if (!this._pipelines) {
+      return nothing;
+    }
+    const value = this.value ?? PREFERRED;
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.pipeline-picker.pipeline")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        <ha-list-item .value=${PREFERRED}>
+          ${this.hass!.localize("ui.components.pipeline-picker.preferred", {
+            preferred: this._pipelines.find(
+              (pipeline) => pipeline.id === this._preferredPipeline
+            )?.name,
+          })}
+        </ha-list-item>
+        ${this._pipelines.map(
+          (pipeline) =>
+            html`<ha-list-item .value=${pipeline.id}>
+              ${pipeline.name}
+              (${formatLanguageCode(pipeline.language, this.hass.locale)})
+            </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected firstUpdated(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changedProperties);
+    listAssistPipelines(this.hass).then((pipelines) => {
+      this._pipelines = pipelines.pipelines;
+      this._preferredPipeline = pipelines.preferred_pipeline;
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === PREFERRED)
+    ) {
+      return;
+    }
+    this.value = target.value === PREFERRED ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-assist-pipeline-picker": HaAssistPipelinePicker;
+  }
+}

src/components/ha-button-menu.ts

@@ -10,7 +10,7 @@ import type { HaIconButton } from "./ha-icon-button";
 export class HaButtonMenu extends LitElement {
   protected readonly [FOCUS_TARGET];
 
-  @property() public corner: Corner = "TOP_START";
+  @property() public corner: Corner = "BOTTOM_START";
 
   @property() public menuCorner: MenuCorner = "START";
 

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

@@ -35,7 +35,7 @@ interface FilterValue {
 export class HaRelatedFilterButtonMenu extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property() public corner: Corner = "TOP_START";
+  @property() public corner: Corner = "BOTTOM_START";
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 

src/components/ha-button.ts

@@ -13,6 +13,9 @@ export class HaButton extends Button {
         margin-inline-end: 8px;
         direction: var(--direction);
       }
+      .mdc-button {
+        height: var(--button-height, 36px);
+      }
     `,
   ];
 }

src/components/ha-combo-box.ts

@@ -14,8 +14,9 @@ import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
-import "./ha-list-item";
 import "./ha-icon-button";
+import "./ha-list-item";
+import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 registerStyles(

src/components/ha-control-select.ts

@@ -310,6 +310,8 @@ export class HaControlSelect extends LitElement {
       .option .content span {
         display: block;
         width: 100%;
+        -webkit-hyphens: auto;
+        -moz-hyphens: auto;
         hyphens: auto;
       }
       :host([vertical]) {

src/components/ha-conversation-agent-picker.ts

@@ -0,0 +1,159 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { debounce } from "../common/util/debounce";
+import { Agent, listAgents } from "../data/conversation";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+@customElement("ha-conversation-agent-picker")
+export class HaConversationAgentPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public language?: string;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _agents?: Agent[];
+
+  protected render() {
+    if (!this._agents) {
+      return nothing;
+    }
+    const value =
+      this.value ??
+      (this.required &&
+      (!this.language ||
+        this._agents
+          .find((agent) => agent.id === "homeassistant")
+          ?.supported_languages.includes(this.language))
+        ? "homeassistant"
+        : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize(
+          "ui.components.coversation-agent-picker.conversation_agent"
+        )}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize(
+                "ui.components.coversation-agent-picker.none"
+              )}
+            </ha-list-item>`
+          : nothing}
+        ${this._agents.map(
+          (agent) =>
+            html`<ha-list-item
+              .value=${agent.id}
+              .disabled=${agent.supported_languages !== "*" &&
+              agent.supported_languages.length === 0}
+            >
+              ${agent.name}
+            </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateAgents();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateAgents();
+    }
+  }
+
+  private _debouncedUpdateAgents = debounce(() => this._updateAgents(), 500);
+
+  private async _updateAgents() {
+    const { agents } = await listAgents(
+      this.hass,
+      this.language,
+      this.hass.config.country || undefined
+    );
+
+    this._agents = agents;
+
+    if (!this.value) {
+      return;
+    }
+
+    const selectedAgent = agents.find((agent) => agent.id === this.value);
+
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedAgent?.supported_languages,
+    });
+
+    if (
+      !selectedAgent ||
+      (selectedAgent.supported_languages !== "*" &&
+        selectedAgent.supported_languages.length === 0)
+    ) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._agents!.find((agent) => agent.id === this.value)
+        ?.supported_languages,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-conversation-agent-picker": HaConversationAgentPicker;
+  }
+  interface HASSDomEvents {
+    "supported-languages-changed": { value: "*" | string[] | undefined };
+  }
+}

src/components/ha-dialog.ts

@@ -7,7 +7,7 @@ import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
-const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button"];
+const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button", "ha-list-item"];
 
 export const createCloseHeading = (
   hass: HomeAssistant,
@@ -92,7 +92,7 @@ export class HaDialog extends DialogBase {
         padding: 24px 24px 0 24px;
       }
       .mdc-dialog__actions {
-        padding: 0 24px 24px 24px;
+        padding: 12px 24px 12px 24px;
       }
       .mdc-dialog__title::before {
         display: block;

src/components/ha-drawer.ts

@@ -1,15 +1,84 @@
 import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
 import { styles } from "@material/mwc-drawer/mwc-drawer.css";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
+import { css, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+
+const blockingElements = (document as any).$blockingElements;
 
 @customElement("ha-drawer")
 export class HaDrawer extends DrawerBase {
+  @property() public direction: "ltr" | "rtl" = "ltr";
+
+  private _mc?: HammerManager;
+
+  protected createAdapter() {
+    return {
+      ...super.createAdapter(),
+      trapFocus: () => {
+        blockingElements.push(this);
+        this.appContent.inert = true;
+        document.body.style.overflow = "hidden";
+      },
+      releaseFocus: () => {
+        blockingElements.remove(this);
+        this.appContent.inert = false;
+        document.body.style.overflow = "";
+      },
+    };
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.has("direction")) {
+      this.mdcRoot.dir = this.direction;
+    }
+    if (changedProps.has("open") && this.open && this.type === "modal") {
+      this._setupSwipe();
+    } else if (this._mc) {
+      this._mc.destroy();
+      this._mc = undefined;
+    }
+  }
+
+  private async _setupSwipe() {
+    const hammer = await import("../resources/hammer");
+    this._mc = new hammer.Manager(document, {
+      touchAction: "pan-y",
+    });
+    this._mc.add(
+      new hammer.Swipe({
+        direction:
+          this.direction === "rtl"
+            ? hammer.DIRECTION_RIGHT
+            : hammer.DIRECTION_LEFT,
+      })
+    );
+    this._mc.on("swipeleft swiperight", () => {
+      fireEvent(this, "hass-toggle-menu", { open: false });
+    });
+  }
+
   static override styles = [
     styles,
     css`
       .mdc-drawer {
+        position: fixed;
         top: 0;
+        border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
+      }
+      .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
+        z-index: 200;
+      }
+      .mdc-drawer-app-content {
+        overflow: unset;
+        flex: none;
+        padding-left: var(--mdc-drawer-width);
+        padding-inline-start: var(--mdc-drawer-width);
+        padding-inline-end: initial;
+        direction: var(--direction);
+        width: 100%;
+        box-sizing: border-box;
       }
     `,
   ];

src/components/ha-form/ha-form-expandable.ts

@@ -71,6 +71,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
         display: block;
         --expansion-panel-content-padding: 0;
         border-radius: 6px;
+        --ha-card-border-radius: 6px;
       }
       ha-svg-icon,
       ha-icon {

src/components/ha-form/ha-form-grid.ts

@@ -33,6 +33,11 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: HaFormSchema) => string;
 
+  public async focus() {
+    await this.updateComplete;
+    this.renderRoot.querySelector("ha-form")?.focus();
+  }
+
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("schema")) {

src/components/ha-form/ha-form-multi_select.ts

@@ -82,7 +82,6 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
       <ha-button-menu
         .disabled=${this.disabled}
         fixed
-        corner="BOTTOM_START"
         @opened=${this._handleOpen}
         @closed=${this._handleClose}
         multi

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

@@ -4,6 +4,7 @@ import {
   html,
   LitElement,
   PropertyValues,
+  ReactiveElement,
   TemplateResult,
 } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -56,13 +57,18 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public localizeValue?: (key: string) => string;
 
-  public focus() {
-    const root = this.shadowRoot?.querySelector(".root");
+  public async focus() {
+    await this.updateComplete;
+    const root = this.renderRoot.querySelector(".root");
     if (!root) {
       return;
     }
     for (const child of root.children) {
       if (child.tagName !== "HA-ALERT") {
+        if (child instanceof ReactiveElement) {
+          // eslint-disable-next-line no-await-in-loop
+          await child.updateComplete;
+        }
         (child as HTMLElement).focus();
         break;
       }

src/components/ha-gauge.ts

@@ -211,6 +211,7 @@ export class Gauge extends LitElement {
         font-size: 50px;
         fill: var(--primary-text-color);
         text-anchor: middle;
+        direction: ltr;
       }
     `;
   }

src/components/ha-icon-overflow-menu.ts

@@ -38,7 +38,6 @@ export class HaIconOverflowMenu extends LitElement {
               @click=${this._handleIconOverflowMenuOpened}
               @closed=${this._handleIconOverflowMenuClosed}
               class="ha-icon-overflow-menu-overflow"
-              corner="BOTTOM_START"
               absolute
             >
               <ha-icon-button

src/components/ha-language-picker.ts

@@ -0,0 +1,162 @@
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { formatLanguageCode } from "../common/language/format_language";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+import { FrontendLocaleData } from "../data/translation";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+@customElement("ha-language-picker")
+export class HaLanguagePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public languages?: string[];
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property({ type: Boolean }) public nativeName = false;
+
+  @property({ type: Boolean }) public noSort = false;
+
+  @state() _defaultLanguages: string[] = [];
+
+  @query("ha-select") private _select!: HaSelect;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._computeDefaultLanguageOptions();
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("languages") || changedProperties.has("value")) {
+      this._select.layoutOptions();
+      if (this._select.value !== this.value) {
+        fireEvent(this, "value-changed", { value: this._select.value });
+      }
+      if (!this.value) {
+        return;
+      }
+      const languageOptions = this._getLanguagesOptions(
+        this.languages ?? this._defaultLanguages,
+        this.hass.locale,
+        this.nativeName
+      );
+      const selectedItem = languageOptions.find(
+        (option) => option.value === this.value
+      );
+      if (!selectedItem) {
+        this.value = undefined;
+      }
+    }
+  }
+
+  private _getLanguagesOptions = memoizeOne(
+    (languages: string[], locale: FrontendLocaleData, nativeName: boolean) => {
+      let options: { label: string; value: string }[] = [];
+
+      if (nativeName) {
+        const translations = this.hass.translationMetadata.translations;
+        options = languages.map((lang) => ({
+          value: lang,
+          label: translations[lang]?.nativeName ?? lang,
+        }));
+      } else {
+        options = languages.map((lang) => ({
+          value: lang,
+          label: formatLanguageCode(lang, locale),
+        }));
+      }
+
+      if (!this.noSort) {
+        options.sort((a, b) =>
+          caseInsensitiveStringCompare(a.label, b.label, locale.language)
+        );
+      }
+      return options;
+    }
+  );
+
+  private _computeDefaultLanguageOptions() {
+    if (!this.hass.translationMetadata?.translations) {
+      return;
+    }
+
+    this._defaultLanguages = Object.keys(
+      this.hass.translationMetadata.translations
+    );
+  }
+
+  protected render() {
+    const languageOptions = this._getLanguagesOptions(
+      this.languages ?? this._defaultLanguages,
+      this.hass.locale,
+      this.nativeName
+    );
+
+    const value =
+      this.value ?? (this.required ? languageOptions[0]?.value : this.value);
+
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass.localize("ui.components.language-picker.language")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${languageOptions.length === 0
+          ? html`<ha-list-item value=""
+              >${this.hass.localize(
+                "ui.components.language-picker.no_languages"
+              )}</ha-list-item
+            >`
+          : languageOptions.map(
+              (option) => html`
+                <ha-list-item .value=${option.value}
+                  >${option.label}</ha-list-item
+                >
+              `
+            )}
+      </ha-select>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (!this.hass || target.value === "" || target.value === this.value) {
+      return;
+    }
+    this.value = target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-language-picker": HaLanguagePicker;
+  }
+}

src/components/ha-list-item.ts

@@ -30,6 +30,9 @@ export class HaListItem extends ListItemBase {
           margin-inline-end: 0px !important;
           direction: var(--direction);
         }
+        .mdc-deprecated-list-item__meta {
+          display: var(--mdc-list-item-meta-display);
+        }
         :host([multiline-secondary]) {
           height: auto;
         }
@@ -54,6 +57,9 @@ export class HaListItem extends ListItemBase {
           .mdc-deprecated-list-item__primary-text::before {
           display: none;
         }
+        :host([disabled]) {
+          color: var(--disabled-text-color);
+        }
       `,
     ];
   }

src/components/ha-qr-scanner.ts

@@ -70,11 +70,7 @@ class HaQrScanner extends LitElement {
       ? html`<video></video>
           <div id="canvas-container">
             ${this._cameras && this._cameras.length > 1
-              ? html`<ha-button-menu
-                  corner="BOTTOM_START"
-                  fixed
-                  @closed=${stopPropagation}
-                >
+              ? html`<ha-button-menu fixed @closed=${stopPropagation}>
                   <ha-icon-button
                     slot="trigger"
                     .label=${this.localize(

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

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { AssistPipelineSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-assist-pipeline-picker";
+
+@customElement("ha-selector-assist_pipeline")
+export class HaAssistPipelineSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: AssistPipelineSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`<ha-assist-pipeline-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-assist-pipeline-picker>`;
+  }
+
+  static styles = css`
+    ha-conversation-agent-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-assist_pipeline": HaAssistPipelineSelector;
+  }
+}

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

@@ -0,0 +1,51 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ConversationAgentSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-conversation-agent-picker";
+
+@customElement("ha-selector-conversation_agent")
+export class HaConversationAgentSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: ConversationAgentSelector;
+
+  @property() public value?: any;
+
+  @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?: {
+    language?: string;
+  };
+
+  protected render() {
+    return html`<ha-conversation-agent-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .language=${this.selector.conversation_agent?.language ||
+      this.context?.language}
+      .label=${this.label}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-conversation-agent-picker>`;
+  }
+
+  static styles = css`
+    ha-conversation-agent-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-conversation_agent": HaConversationAgentSelector;
+  }
+}

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

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { LanguageSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-language-picker";
+
+@customElement("ha-selector-language")
+export class HaLanguageSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: LanguageSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-language-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .languages=${this.selector.language?.languages}
+        .nativeName=${Boolean(this.selector?.language?.native_name)}
+        .noSort=${Boolean(this.selector?.language?.no_sort)}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-language-picker>
+    `;
+  }
+
+  static styles = css`
+    ha-language-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-language": HaLanguageSelector;
+  }
+}

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

@@ -135,7 +135,7 @@ export class HaSelectSelector extends LitElement {
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
-          .value=${this._filter}
+          .value=${""}
           .items=${optionItems}
           .allowCustomValue=${this.selector.select.custom_value ?? false}
           @filter-changed=${this._filterChanged}
@@ -213,7 +213,7 @@ export class HaSelectSelector extends LitElement {
   private _valueChanged(ev) {
     ev.stopPropagation();
     const value = ev.detail?.value || ev.target.value;
-    if (this.disabled || value === undefined) {
+    if (this.disabled || value === undefined || value === this.value) {
       return;
     }
     fireEvent(this, "value-changed", {

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

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { STTSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-stt-picker";
+
+@customElement("ha-selector-stt")
+export class HaSTTSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: STTSelector;
+
+  @property() public value?: any;
+
+  @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?: {
+    language?: string;
+  };
+
+  protected render() {
+    return html`<ha-stt-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.stt?.language || this.context?.language}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-stt-picker>`;
+  }
+
+  static styles = css`
+    ha-stt-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-stt": HaSTTSelector;
+  }
+}

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

@@ -30,6 +30,13 @@ export class HaTextSelector extends LitElement {
 
   @state() private _unmaskedPassword = false;
 
+  public async focus() {
+    await this.updateComplete;
+    (
+      this.renderRoot.querySelector("ha-textarea, ha-textfield") as HTMLElement
+    )?.focus();
+  }
+
   protected render() {
     if (this.selector.text?.multiline) {
       return html`<ha-textarea

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

@@ -0,0 +1,52 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { TTSVoiceSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-tts-voice-picker";
+
+@customElement("ha-selector-tts_voice")
+export class HaTTSVoiceSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TTSVoiceSelector;
+
+  @property() public value?: any;
+
+  @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?: {
+    language?: string;
+    engineId?: string;
+  };
+
+  protected render() {
+    return html`<ha-tts-voice-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.tts_voice?.language || this.context?.language}
+      .engineId=${this.selector.tts_voice?.engineId || this.context?.engineId}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-tts-voice-picker>`;
+  }
+
+  static styles = css`
+    ha-tts-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-tts-voice": HaTTSVoiceSelector;
+  }
+}

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

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { TTSSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-tts-picker";
+
+@customElement("ha-selector-tts")
+export class HaTTSSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TTSSelector;
+
+  @property() public value?: any;
+
+  @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?: {
+    language?: string;
+  };
+
+  protected render() {
+    return html`<ha-tts-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.tts?.language || this.context?.language}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-tts-picker>`;
+  }
+
+  static styles = css`
+    ha-tts-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-tts": HaTTSSelector;
+  }
+}

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

@@ -6,7 +6,7 @@ import { HomeAssistant } from "../../types";
 import "../../panels/lovelace/components/hui-action-editor";
 import { ActionConfig } from "../../data/lovelace";
 
-@customElement("ha-selector-ui-action")
+@customElement("ha-selector-ui_action")
 export class HaSelectorUiAction extends LitElement {
   @property() public hass!: HomeAssistant;
 
@@ -24,7 +24,7 @@ export class HaSelectorUiAction extends LitElement {
         .label=${this.label}
         .hass=${this.hass}
         .config=${this.value}
-        .actions=${this.selector["ui-action"]?.actions}
+        .actions=${this.selector.ui_action?.actions}
         .tooltipText=${this.helper}
         @value-changed=${this._valueChanged}
       ></hui-action-editor>

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

@@ -6,7 +6,7 @@ import { UiColorSelector } from "../../data/selector";
 import "../../panels/lovelace/components/hui-color-picker";
 import { HomeAssistant } from "../../types";
 
-@customElement("ha-selector-ui-color")
+@customElement("ha-selector-ui_color")
 export class HaSelectorUiColor extends LitElement {
   @property() public hass!: HomeAssistant;
 

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

@@ -14,9 +14,11 @@ const LOAD_ELEMENTS = {
   addon: () => import("./ha-selector-addon"),
   area: () => import("./ha-selector-area"),
   attribute: () => import("./ha-selector-attribute"),
+  assist_pipeline: () => import("./ha-selector-assist-pipeline"),
   boolean: () => import("./ha-selector-boolean"),
   color_rgb: () => import("./ha-selector-color-rgb"),
   config_entry: () => import("./ha-selector-config-entry"),
+  conversation_agent: () => import("./ha-selector-conversation-agent"),
   constant: () => import("./ha-selector-constant"),
   date: () => import("./ha-selector-date"),
   datetime: () => import("./ha-selector-datetime"),
@@ -25,11 +27,13 @@ const LOAD_ELEMENTS = {
   entity: () => import("./ha-selector-entity"),
   statistic: () => import("./ha-selector-statistic"),
   file: () => import("./ha-selector-file"),
+  language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),
   number: () => import("./ha-selector-number"),
   object: () => import("./ha-selector-object"),
   select: () => import("./ha-selector-select"),
   state: () => import("./ha-selector-state"),
+  stt: () => import("./ha-selector-stt"),
   target: () => import("./ha-selector-target"),
   template: () => import("./ha-selector-template"),
   text: () => import("./ha-selector-text"),
@@ -37,12 +41,16 @@ const LOAD_ELEMENTS = {
   icon: () => import("./ha-selector-icon"),
   media: () => import("./ha-selector-media"),
   theme: () => import("./ha-selector-theme"),
+  tts: () => import("./ha-selector-tts"),
+  tts_voice: () => import("./ha-selector-tts-voice"),
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
-  "ui-action": () => import("./ha-selector-ui-action"),
-  "ui-color": () => import("./ha-selector-ui-color"),
+  ui_action: () => import("./ha-selector-ui-action"),
+  ui_color: () => import("./ha-selector-ui-color"),
 };
 
+const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);
+
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -67,12 +75,17 @@ export class HaSelector extends LitElement {
 
   @property() public context?: Record<string, any>;
 
-  public focus() {
-    this.shadowRoot?.getElementById("selector")?.focus();
+  public async focus() {
+    await this.updateComplete;
+    (this.renderRoot.querySelector("#selector") as HTMLElement)?.focus();
   }
 
   private get _type() {
-    return Object.keys(this.selector)[0];
+    const type = Object.keys(this.selector)[0];
+    if (LEGACY_UI_SELECTORS.has(type)) {
+      return type.replace("-", "_");
+    }
+    return type;
   }
 
   protected willUpdate(changedProps: PropertyValues) {
@@ -88,6 +101,10 @@ export class HaSelector extends LitElement {
     if ("device" in selector) {
       return handleLegacyDeviceSelector(selector);
     }
+    const type = Object.keys(this.selector)[0];
+    if (LEGACY_UI_SELECTORS.has(type)) {
+      return { [type.replace("-", "_")]: selector[type] };
+    }
     return selector;
   });
 

src/components/ha-settings-row.ts

@@ -52,18 +52,17 @@ export class HaSettingsRow extends LitElement {
         white-space: nowrap;
       }
       .body > .secondary {
-        font-family: var(--paper-font-body1_-_font-family);
-        -webkit-font-smoothing: var(
-          --paper-font-body1_-_-webkit-font-smoothing
-        );
-        font-size: var(--paper-font-body1_-_font-size);
-        font-weight: var(--paper-font-body1_-_font-weight);
-        line-height: var(--paper-font-body1_-_line-height);
-
-        color: var(
-          --paper-item-body-secondary-color,
-          var(--secondary-text-color)
+        display: block;
+        padding-top: 4px;
+        font-family: var(
+          --mdc-typography-body2-font-family,
+          var(--mdc-typography-font-family, Roboto, sans-serif)
         );
+        -webkit-font-smoothing: antialiased;
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        font-weight: var(--mdc-typography-body2-font-weight, 400);
+        line-height: normal;
+        color: var(--secondary-text-color);
       }
       .body[two-line] {
         min-height: calc(

src/components/ha-sidebar.ts

@@ -28,8 +28,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
-  PropertyValues,
   nothing,
+  PropertyValues,
 } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -810,6 +810,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     }
     tooltip.innerHTML = item.querySelector(".item-text")!.innerHTML;
     tooltip.style.display = "block";
+    tooltip.style.position = "fixed";
     tooltip.style.top = `${top}px`;
     tooltip.style.left = `${item.offsetLeft + item.clientWidth + 4}px`;
   }
@@ -840,6 +841,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       haStyleScrollbar,
       css`
         :host {
+          overflow: visible;
           height: 100%;
           display: block;
           overflow: hidden;

src/components/ha-stt-picker.ts

@@ -0,0 +1,156 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { debounce } from "../common/util/debounce";
+import { listSTTEngines, STTEngine } from "../data/stt";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+const NAME_MAP = { cloud: "Home Assistant Cloud" };
+
+@customElement("ha-stt-picker")
+export class HaSTTPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _engines?: STTEngine[];
+
+  protected render() {
+    if (!this._engines) {
+      return nothing;
+    }
+    const value =
+      this.value ??
+      (this.required
+        ? this._engines.find(
+            (engine) => engine.supported_languages?.length !== 0
+          )
+        : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.stt-picker.stt")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.stt-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._engines.map((engine) => {
+          let label = engine.engine_id;
+          if (engine.engine_id.includes(".")) {
+            const stateObj = this.hass!.states[engine.engine_id];
+            label = stateObj ? computeStateName(stateObj) : engine.engine_id;
+          } else if (engine.engine_id in NAME_MAP) {
+            label = NAME_MAP[engine.engine_id];
+          }
+          return html`<ha-list-item
+            .value=${engine.engine_id}
+            .disabled=${engine.supported_languages?.length === 0}
+          >
+            ${label}
+          </ha-list-item>`;
+        })}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateEngines();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateEngines();
+    }
+  }
+
+  private _debouncedUpdateEngines = debounce(() => this._updateEngines(), 500);
+
+  private async _updateEngines() {
+    this._engines = (
+      await listSTTEngines(
+        this.hass,
+        this.language,
+        this.hass.config.country || undefined
+      )
+    ).providers;
+
+    if (!this.value) {
+      return;
+    }
+
+    const selectedEngine = this._engines.find(
+      (engine) => engine.engine_id === this.value
+    );
+
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedEngine?.supported_languages,
+    });
+
+    if (!selectedEngine || selectedEngine.supported_languages?.length === 0) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._engines!.find((engine) => engine.engine_id === this.value)
+        ?.supported_languages,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-stt-picker": HaSTTPicker;
+  }
+}

src/components/ha-target-picker.ts

@@ -283,7 +283,6 @@ export class HaTargetPicker extends LitElement {
     return html`<mwc-menu-surface
       open
       .anchor=${this._addContainer}
-      .corner=${"BOTTOM_START"}
       @closed=${this._onClosed}
       @opened=${this._onOpened}
       @opened-changed=${this._openedChanged}

src/components/ha-theme-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/ha-tts-picker.ts

@@ -0,0 +1,159 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { debounce } from "../common/util/debounce";
+import { listTTSEngines, TTSEngine } from "../data/tts";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+const NAME_MAP = {
+  cloud: "Home Assistant Cloud",
+  google_translate: "Google Translate",
+};
+
+@customElement("ha-tts-picker")
+export class HaTTSPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _engines?: TTSEngine[];
+
+  protected render() {
+    if (!this._engines) {
+      return nothing;
+    }
+    const value =
+      this.value ??
+      (this.required
+        ? this._engines.find(
+            (engine) => engine.supported_languages?.length !== 0
+          )
+        : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.tts-picker.tts")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.tts-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._engines.map((engine) => {
+          let label = engine.engine_id;
+          if (engine.engine_id.includes(".")) {
+            const stateObj = this.hass!.states[engine.engine_id];
+            label = stateObj ? computeStateName(stateObj) : engine.engine_id;
+          } else if (engine.engine_id in NAME_MAP) {
+            label = NAME_MAP[engine.engine_id];
+          }
+          return html`<ha-list-item
+            .value=${engine.engine_id}
+            .disabled=${engine.supported_languages?.length === 0}
+          >
+            ${label}
+          </ha-list-item>`;
+        })}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateEngines();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateEngines();
+    }
+  }
+
+  private _debouncedUpdateEngines = debounce(() => this._updateEngines(), 500);
+
+  private async _updateEngines() {
+    this._engines = (
+      await listTTSEngines(
+        this.hass,
+        this.language,
+        this.hass.config.country || undefined
+      )
+    ).providers;
+
+    if (!this.value) {
+      return;
+    }
+
+    const selectedEngine = this._engines.find(
+      (engine) => engine.engine_id === this.value
+    );
+
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedEngine?.supported_languages,
+    });
+
+    if (!selectedEngine || selectedEngine.supported_languages?.length === 0) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._engines!.find((engine) => engine.engine_id === this.value)
+        ?.supported_languages,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tts-picker": HaTTSPicker;
+  }
+}

src/components/ha-tts-voice-picker.ts

@@ -0,0 +1,147 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { debounce } from "../common/util/debounce";
+import { listTTSVoices, TTSVoice } from "../data/tts";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+@customElement("ha-tts-voice-picker")
+export class HaTTSVoicePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public engineId?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _voices?: TTSVoice[] | null;
+
+  @query("ha-select") private _select?: HaSelect;
+
+  protected render() {
+    if (!this._voices) {
+      return nothing;
+    }
+    const value =
+      this.value ?? (this.required ? this._voices[0]?.voice_id : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.tts-voice-picker.voice")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.tts-voice-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._voices.map(
+          (voice) => html`<ha-list-item .value=${voice.voice_id}>
+            ${voice.name}
+          </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateVoices();
+    } else if (
+      changedProperties.has("language") ||
+      changedProperties.has("engineId")
+    ) {
+      this._debouncedUpdateVoices();
+    }
+  }
+
+  private _debouncedUpdateVoices = debounce(() => this._updateVoices(), 500);
+
+  private async _updateVoices() {
+    if (!this.engineId || !this.language) {
+      this._voices = undefined;
+      return;
+    }
+    this._voices = (
+      await listTTSVoices(this.hass, this.engineId, this.language)
+    ).voices;
+
+    if (!this.value) {
+      return;
+    }
+
+    if (
+      !this._voices ||
+      !this._voices.find((voice) => voice.voice_id === this.value)
+    ) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("_voices") &&
+      this._select?.value !== this.value
+    ) {
+      this._select?.layoutOptions();
+      fireEvent(this, "value-changed", { value: this._select?.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tts-voice-picker": HaTTSVoicePicker;
+  }
+}

src/components/ha-yaml-editor.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
@@ -31,6 +31,8 @@ export class HaYamlEditor extends LitElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public autoUpdate = false;
+
   @property({ type: Boolean }) public readOnly = false;
 
   @property({ type: Boolean }) public required = false;
@@ -41,7 +43,11 @@ export class HaYamlEditor extends LitElement {
     try {
       this._yaml =
         value && !isEmpty(value)
-          ? dump(value, { schema: this.yamlSchema, quotingType: '"' })
+          ? dump(value, {
+              schema: this.yamlSchema,
+              quotingType: '"',
+              noRefs: true,
+            })
           : "";
     } catch (err: any) {
       // eslint-disable-next-line no-console
@@ -56,6 +62,13 @@ export class HaYamlEditor extends LitElement {
     }
   }
 
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (this.autoUpdate && changedProperties.has("value")) {
+      this.setValue(this.value);
+    }
+  }
+
   protected render() {
     if (this._yaml === undefined) {
       return nothing;

src/components/media-player/ha-browse-media-tts.ts

@@ -21,6 +21,7 @@ import { buttonLinkStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
 import "../ha-textarea";
+import "../ha-language-picker";
 
 export interface TtsMediaPickedEvent {
   item: MediaPlayerItem;
@@ -103,21 +104,17 @@ class BrowseMediaTTS extends LitElement {
 
     return html`
       <div class="cloud-options">
-        <ha-select
-          fixedMenuPosition
-          naturalMenuWidth
+        <ha-language-picker
+          .hass=${this.hass}
           .label=${this.hass.localize(
             "ui.components.media-browser.tts.language"
           )}
           .value=${selectedVoice[0]}
-          @selected=${this._handleLanguageChange}
+          .languages=${languages}
           @closed=${stopPropagation}
+          @value-changed=${this._handleLanguageChange}
         >
-          ${languages.map(
-            ([key, label]) =>
-              html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
-          )}
-        </ha-select>
+        </ha-language-picker>
 
         <ha-select
           fixedMenuPosition
@@ -184,10 +181,10 @@ class BrowseMediaTTS extends LitElement {
   }
 
   async _handleLanguageChange(ev) {
-    if (ev.target.value === this._cloudOptions![0]) {
+    if (ev.detail.value === this._cloudOptions![0]) {
       return;
     }
-    this._cloudOptions = [ev.target.value, this._cloudOptions![1]];
+    this._cloudOptions = [ev.detail.value, this._cloudOptions![1]];
   }
 
   async _handleGenderChange(ev) {
@@ -256,7 +253,8 @@ class BrowseMediaTTS extends LitElement {
         display: flex;
         justify-content: space-between;
       }
-      .cloud-options ha-select {
+      .cloud-options ha-select,
+      ha-language-picker {
         width: 48%;
       }
       ha-textarea {