20231129.0 (#18809)

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please do not report issues for custom cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases

.github/workflows/lock.yml

@@ -9,9 +9,10 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4.0.1
+      - uses: dessant/lock-threads@v5.0.1
         with:
           github-token: ${{ github.token }}
+          process-only: "issues, prs"
           issue-lock-inactive-days: "30"
           issue-exclude-created-before: "2020-10-01T00:00:00Z"
           issue-lock-reason: ""

.nvmrc

@@ -1 +1 @@
-18
+lts/iron

.yarnrc.yml

@@ -1,11 +1,9 @@
+compressionLevel: mixed
+
 defaultSemverRangePrefix: ""
 
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
-plugins:
+yarnPath: .yarn/releases/yarn-4.0.2.cjs
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.6.4.cjs

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

@@ -0,0 +1,56 @@
+import defineProvider from "@babel/helper-define-polyfill-provider";
+
+// List of polyfill keys with supported browser targets for the functionality
+const PolyfillSupport = {
+  fetch: {
+    android: 42,
+    chrome: 42,
+    edge: 14,
+    firefox: 39,
+    ios: 10.3,
+    opera: 29,
+    opera_mobile: 29,
+    safari: 10.1,
+    samsung: 4.0,
+  },
+  proxy: {
+    android: 49,
+    chrome: 49,
+    edge: 12,
+    firefox: 18,
+    ios: 10.0,
+    opera: 36,
+    opera_mobile: 36,
+    safari: 10.0,
+    samsung: 5.0,
+  },
+};
+
+// Map of global variables and/or instance and static properties to the
+// corresponding polyfill key and actual module to import
+const polyfillMap = {
+  global: {
+    Proxy: { key: "proxy", module: "proxy-polyfill" },
+    fetch: { key: "fetch", module: "unfetch/polyfill" },
+  },
+  instance: {},
+  static: {},
+};
+
+// Create plugin using the same factory as for CoreJS
+export default defineProvider(
+  ({ createMetaResolver, debug, shouldInjectPolyfill }) => {
+    const resolvePolyfill = createMetaResolver(polyfillMap);
+    return {
+      name: "HA Custom",
+      polyfills: PolyfillSupport,
+      usageGlobal(meta, utils) {
+        const polyfill = resolvePolyfill(meta);
+        if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
+          debug(polyfill.desc.key);
+          utils.injectGlobalImport(polyfill.desc.module);
+        }
+      },
+    };
+  }
+);

build-scripts/bundle.cjs

@@ -12,11 +12,7 @@ module.exports.sourceMapURL = () => {
 };
 
 // Files from NPM Packages that should not be imported
-// eslint-disable-next-line unused-imports/no-unused-vars
+module.exports.ignorePackages = () => [];
-module.exports.ignorePackages = ({ latestBuild }) => [
-  // Part of yaml.js and only used for !!js functions that we don't use
-  require.resolve("esprima"),
-];
 
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
@@ -35,8 +31,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       require.resolve(
         path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
       ),
-    // This polyfill is loaded in workers to support ES5, filter it out.
-    latestBuild && require.resolve("proxy-polyfill/src/index.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
@@ -91,14 +85,12 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     setSpreadProperties: true,
   },
   browserslistEnv: latestBuild ? "modern" : "legacy",
-  // Must be unambiguous because some dependencies are CommonJS only
-  sourceType: "unambiguous",
   presets: [
     [
       "@babel/preset-env",
       {
-        useBuiltIns: latestBuild ? false : "entry",
+        useBuiltIns: latestBuild ? false : "usage",
-        corejs: latestBuild ? false : { version: "3.33", proposals: true },
+        corejs: latestBuild ? false : "3.33",
         bugfixes: true,
         shippedProposals: true,
       },
@@ -116,21 +108,33 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
+    [
+      path.resolve(
+        paths.polymer_dir,
+        "build-scripts/babel-plugins/custom-polyfill-plugin.js"
+      ),
+      { method: "usage-global" },
+    ],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
       {
         modules: {
-          lit: [
+          ...Object.fromEntries(
-            "html",
+            ["lit", "lit-element", "lit-html"].map((m) => [
-            { name: "svg", encapsulation: "svg" },
+              m,
-            { name: "css", encapsulation: "style" },
+              [
-          ],
+                "html",
-          "@polymer/polymer/lib/utils/html-tag": ["html"],
+                { name: "svg", encapsulation: "svg" },
+                { name: "css", encapsulation: "style" },
+              ],
+            ])
+          ),
+          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
         },
         strictCSS: true,
         htmlMinifier: module.exports.htmlMinifierOptions,
-        failOnError: true, // we can turn this off in case of false positives
+        failOnError: false, // we can turn this off in case of false positives
       },
     ],
     // Import helpers and regenerator from runtime package
@@ -147,6 +151,18 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     /node_modules[\\/]webpack[\\/]buildin/,
   ],
   sourceMaps: !isTestBuild,
+  overrides: [
+    {
+      // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
+      // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
+      sourceType: "unambiguous",
+      include: /\/node_modules\//,
+      exclude: [
+        "element-internals-polyfill",
+        "@?lit(?:-labs|-element|-html)?",
+      ].map((p) => new RegExp(`/node_modules/${p}/`)),
+    },
+  ],
 });
 
 const nameSuffix = (latestBuild) => (latestBuild ? "-modern" : "-legacy");

build-scripts/gulp/app.js

@@ -30,8 +30,8 @@ gulp.task(
     env.useWDS()
       ? "wds-watch-app"
       : env.useRollup()
-      ? "rollup-watch-app"
+        ? "rollup-watch-app"
-      : "webpack-watch-app"
+        : "webpack-watch-app"
   )
 );
 

build-scripts/gulp/download-translations.js

@@ -161,6 +161,10 @@ gulp.task("fetch-lokalise", async function () {
             })
           );
         })
+        .catch((err) => {
+          console.error(err);
+          throw err;
+        })
     )
   );
 });

build-scripts/webpack.cjs

@@ -51,8 +51,8 @@ const createWebpackConfig = ({
     devtool: isTestBuild
       ? false
       : isProdBuild
-      ? "nosources-source-map"
+        ? "nosources-source-map"
-      : "eval-cheap-module-source-map",
+        : "eval-cheap-module-source-map",
     entry,
     node: false,
     module: {
@@ -191,11 +191,11 @@ const createWebpackConfig = ({
       filename: ({ chunk }) =>
         !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
           ? "[name].js"
-          : "[name]-[contenthash].js",
+          : "[name].[contenthash].js",
       chunkFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash].js" : "[name].js",
+        isProdBuild && !isStatsBuild ? "[name].[contenthash].js" : "[name].js",
       assetModuleFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash][ext]" : "[id][ext]",
+        isProdBuild && !isStatsBuild ? "[id].[contenthash][ext]" : "[id][ext]",
       crossOriginLoading: "use-credentials",
       hashFunction: "xxhash64",
       hashDigest: "base64url",

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

@@ -3,7 +3,7 @@ import { mdiCast, mdiCastConnected } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
@@ -22,8 +22,9 @@ import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
-  LovelaceConfig,
 } from "../../../../src/data/lovelace";
+import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
+import { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
@@ -38,10 +39,10 @@ class HcCast extends LitElement {
 
   @state() private askWrite = false;
 
-  @state() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceViews?: LovelaceViewConfig[] | null;
 
   protected render(): TemplateResult {
-    if (this.lovelaceConfig === undefined) {
+    if (this.lovelaceViews === undefined) {
       return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
@@ -72,43 +73,44 @@ class HcCast extends LitElement {
         ${error
           ? html` <div class="card-content">${error}</div> `
           : !this.castManager.status
-          ? html`
+            ? html`
-              <p class="center-item">
+                <p class="center-item">
-                <mwc-button raised @click=${this._handleLaunch}>
+                  <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
-                  Start Casting
+                    Start Casting
-                </mwc-button>
+                  </mwc-button>
-              </p>
+                </p>
-            `
+              `
-          : html`
+            : html`
-              <div class="section-header">PICK A VIEW</div>
+                <div class="section-header">PICK A VIEW</div>
-              <paper-listbox
+                <paper-listbox
-                attr-for-selected="data-path"
+                  attr-for-selected="data-path"
-                .selected=${this.castManager.status.lovelacePath || ""}
+                  .selected=${this.castManager.status.lovelacePath || ""}
-              >
+                >
-                ${(this.lovelaceConfig
+                  ${(
-                  ? this.lovelaceConfig.views
+                    this.lovelaceViews ?? [
-                  : [generateDefaultViewConfig({}, {}, {}, {}, () => "")]
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
-                ).map(
+                    ]
-                  (view, idx) => html`
+                  ).map(
-                    <paper-icon-item
+                    (view, idx) => html`
-                      @click=${this._handlePickView}
+                      <paper-icon-item
-                      data-path=${view.path || idx}
+                        @click=${this._handlePickView}
-                    >
+                        data-path=${view.path || idx}
-                      ${view.icon
+                      >
-                        ? html`
+                        ${view.icon
-                            <ha-icon
+                          ? html`
-                              .icon=${view.icon}
+                              <ha-icon
-                              slot="item-icon"
+                                .icon=${view.icon}
-                            ></ha-icon>
+                                slot="item-icon"
-                          `
+                              ></ha-icon>
-                        : ""}
+                            `
-                      ${view.title || view.path}
+                          : ""}
-                    </paper-icon-item>
+                        ${view.title || view.path}
-                  `
+                      </paper-icon-item>
-                )}
+                    `
-              </paper-listbox>
+                  )}
-            `}
+                </paper-listbox>
+              `}
         <div class="card-actions">
           ${this.castManager.status
             ? html`
@@ -136,11 +138,15 @@ class HcCast extends LitElement {
     llColl.refresh().then(
       () => {
         llColl.subscribe((config) => {
-          this.lovelaceConfig = config;
+          if (isStrategyDashboard(config)) {
+            this.lovelaceViews = null;
+          } else {
+            this.lovelaceViews = config.views;
+          }
         });
       },
       async () => {
-        this.lovelaceConfig = null;
+        this.lovelaceViews = null;
       }
     );
 
@@ -159,9 +165,7 @@ class HcCast extends LitElement {
     toggleAttribute(
       this,
       "hide-icons",
-      this.lovelaceConfig
+      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
-        ? !this.lovelaceConfig.views.some((view) => view.icon)
-        : true
     );
   }
 

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import {
   Auth,
   Connection,
@@ -24,6 +23,7 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
+import "../../../../src/components/ha-textfield";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -33,13 +33,13 @@ const translateErr = (err) =>
   err === ERR_CANNOT_CONNECT
     ? "Unable to connect"
     : err === ERR_HASS_HOST_REQUIRED
-    ? "Please enter a Home Assistant URL."
+      ? "Please enter a Home Assistant URL."
-    : err === ERR_INVALID_HTTPS_TO_HTTP
+      : err === ERR_INVALID_HTTPS_TO_HTTP
-    ? html`
+        ? html`
-        Cannot connect to Home Assistant instances over "http://".
+            Cannot connect to Home Assistant instances over "http://".
-        ${seeFAQ("https")}
+            ${seeFAQ("https")}
-      `
+          `
-    : `Unknown error (${err}).`;
+        : `Unknown error (${err}).`;
 
 const INTRO = html`
   <p>
@@ -116,13 +116,11 @@ export class HcConnect extends LitElement {
               To get started, enter your Home Assistant URL and click authorize.
               If you want a preview instead, click the show demo button.
             </p>
-            <p>
+            <ha-textfield
-              <paper-input
+              label="Home Assistant URL"
-                label="Home Assistant URL"
+              placeholder="https://abcdefghijklmnop.ui.nabu.casa"
-                placeholder="https://abcdefghijklmnop.ui.nabu.casa"
+              @keydown=${this._handleInputKeyDown}
-                @keydown=${this._handleInputKeyDown}
+            ></ha-textfield>
-              ></paper-input>
-            </p>
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
@@ -196,7 +194,7 @@ export class HcConnect extends LitElement {
   }
 
   private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("paper-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -315,6 +313,10 @@ export class HcConnect extends LitElement {
       .spacer {
         flex: 1;
       }
+
+      ha-textfield {
+        width: 100%;
+      }
     `;
   }
 }

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -1,7 +1,5 @@
-import {
+import { LovelaceCardConfig } from "../../../../src/data/lovelace/config/card";
-  LovelaceCardConfig,
+import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
-  LovelaceConfig,
-} from "../../../../src/data/lovelace";
 import { castContext } from "../cast_context";
 
 export const castDemoLovelace: () => LovelaceConfig = () => {

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

@@ -1,7 +1,7 @@
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import {
   MockHomeAssistant,
   provideHass,

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

@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
@@ -14,7 +14,8 @@ import "./hc-launch-screen";
 class HcLovelace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig;
+  @property({ attribute: false })
+  public lovelaceConfig!: LovelaceConfig;
 
   @property() public viewPath?: string | number;
 

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

@@ -21,18 +21,26 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
-  fetchResources,
   getLegacyLovelaceCollection,
   getLovelaceCollection,
+} from "../../../../src/data/lovelace";
+import {
+  isStrategyDashboard,
   LegacyLovelaceConfig,
   LovelaceConfig,
-} from "../../../../src/data/lovelace";
+  LovelaceDashboardStrategyConfig,
+} from "../../../../src/data/lovelace/config/types";
+import { fetchResources } from "../../../../src/data/lovelace/resource";
 import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
 import { HassElement } from "../../../../src/state/hass-element";
 import { castContext } from "../cast_context";
 import "./hc-launch-screen";
 
-const DEFAULT_STRATEGY = "original-states";
+const DEFAULT_CONFIG: LovelaceDashboardStrategyConfig = {
+  strategy: {
+    type: "original-states",
+  },
+};
 
 let resourcesLoaded = false;
 @customElement("hc-main")
@@ -93,7 +101,7 @@ export class HcMain extends HassElement {
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
         .urlPath=${this._urlPath}
-        @config-refresh=${this._generateLovelaceConfig}
+        @config-refresh=${this._generateDefaultLovelaceConfig}
       ></hc-lovelace>
     `;
   }
@@ -284,9 +292,20 @@ export class HcMain extends HassElement {
       // configuration.
       try {
         await llColl.refresh();
-        this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
+        this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
-          this._handleNewLovelaceConfig(lovelaceConfig)
+          if (isStrategyDashboard(rawConfig)) {
-        );
+            const { generateLovelaceDashboardStrategy } = await import(
+              "../../../../src/panels/lovelace/strategies/get-strategy"
+            );
+            const config = await generateLovelaceDashboardStrategy(
+              rawConfig.strategy,
+              this.hass!
+            );
+            this._handleNewLovelaceConfig(config);
+          } else {
+            this._handleNewLovelaceConfig(rawConfig);
+          }
+        });
       } catch (err: any) {
         if (
           atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
@@ -300,7 +319,7 @@ export class HcMain extends HassElement {
         }
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
-        await this._generateLovelaceConfig();
+        await this._generateDefaultLovelaceConfig();
       }
     }
     if (!resourcesLoaded) {
@@ -316,15 +335,13 @@ export class HcMain extends HassElement {
     this._sendStatus();
   }
 
-  private async _generateLovelaceConfig() {
+  private async _generateDefaultLovelaceConfig() {
     const { generateLovelaceDashboardStrategy } = await import(
       "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
       await generateLovelaceDashboardStrategy(
-        {
+        DEFAULT_CONFIG.strategy,
-          type: DEFAULT_STRATEGY,
-        },
         this.hass!
       )
     );

demo/src/configs/types.ts

@@ -1,5 +1,5 @@
 import { LocalizeFunc } from "../../../src/common/translations/localize";
-import { LovelaceConfig } from "../../../src/data/lovelace";
+import { LovelaceConfig } from "../../../src/data/lovelace/config/types";
 import { Entity } from "../../../src/fake_data/entity";
 
 export interface DemoConfig {

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

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
-import { LovelaceCardConfig } from "../../../src/data/lovelace";
+import { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
 import {
@@ -48,8 +48,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                         <a target="_blank" href=${conf.authorUrl}>
                           ${this.hass.localize(
                             "ui.panel.page-demo.cards.demo.demo_by",
-                            "name",
+                            { name: conf.authorName }
-                            conf.authorName
                           )}
                         </a>
                       </small>

demo/src/html/index.html.template

@@ -74,19 +74,9 @@
   <body>
     <div id="ha-launch-screen">
       <div class="ha-launch-screen-spacer"></div>
-      <svg
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
-        viewBox="0 0 240 240"
+        <path fill="#18BCF2" d="M240 224.762a15 15 0 0 1-15 15H15a15 15 0 0 1-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.7805c5.83-5.83 15.38-5.83 21.21 0l98.79 98.7895c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/>
-        fill="none"
+        <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M240 224.762C240 233.012 233.25 239.762 225 239.762H15C6.75 239.762 0 233.012 0 224.762V134.762C0 126.512 4.77 114.993 10.61 109.153L109.39 10.3725C115.22 4.5425 124.77 4.5425 130.6 10.3725L229.39 109.162C235.22 114.992 240 126.522 240 134.772V224.772V224.762Z"
-          fill="#F2F4F9"
-        />
-        <path
-          d="M229.39 109.153L130.61 10.3725C124.78 4.5425 115.23 4.5425 109.4 10.3725L10.61 109.153C4.78 114.983 0 126.512 0 134.762V224.762C0 233.012 6.75 239.762 15 239.762H107.27L66.64 199.132C64.55 199.852 62.32 200.262 60 200.262C48.7 200.262 39.5 191.062 39.5 179.762C39.5 168.462 48.7 159.262 60 159.262C71.3 159.262 80.5 168.462 80.5 179.762C80.5 182.092 80.09 184.322 79.37 186.412L111 218.042V102.162C104.2 98.8225 99.5 91.8425 99.5 83.7725C99.5 72.4725 108.7 63.2725 120 63.2725C131.3 63.2725 140.5 72.4725 140.5 83.7725C140.5 91.8425 135.8 98.8225 129 102.162V183.432L160.46 151.972C159.84 150.012 159.5 147.932 159.5 145.772C159.5 134.472 168.7 125.272 180 125.272C191.3 125.272 200.5 134.472 200.5 145.772C200.5 157.072 191.3 166.272 180 166.272C177.5 166.272 175.12 165.802 172.91 164.982L129 208.892V239.772H225C233.25 239.772 240 233.022 240 224.772V134.772C240 126.522 235.23 115.002 229.39 109.162V109.153Z"
-          fill="#18BCF2"
-        />
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>

demo/src/stubs/recorder.ts

@@ -43,8 +43,8 @@ const generateMeanStatistics = (
       period === "day"
         ? addDays(currentDate, 1)
         : period === "month"
-        ? addMonths(currentDate, 1)
+          ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
+          : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -80,8 +80,8 @@ const generateSumStatistics = (
       period === "day"
         ? addDays(currentDate, 1)
         : period === "month"
-        ? addMonths(currentDate, 1)
+          ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
+          : addHours(currentDate, 1);
   }
   return statistics;
 };

gallery/src/components/demo-more-info.ts

@@ -23,7 +23,7 @@ class DemoMoreInfo extends LitElement {
             <state-card-content
               .stateObj=${state}
               .hass=${this.hass}
-              in-dialog
+              inDialog
             ></state-card-content>
 
             <more-info-content

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

@@ -1,8 +1,10 @@
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-chip";
+import "../../../../src/components/chips/ha-chip-set";
-import "../../../../src/components/ha-chip-set";
+import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/chips/ha-input-chip";
+import "../../../../src/components/chips/ha-filter-chip";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
 
@@ -10,10 +12,6 @@ const chips: {
   icon?: string;
   content?: string;
 }[] = [
-  {},
-  {
-    icon: mdiHomeAssistant,
-  },
   {
     content: "Content",
   },
@@ -29,31 +27,73 @@ export class DemoHaChips extends LitElement {
     return html`
       <ha-card header="ha-chip demo">
         <div class="card-content">
-          ${chips.map(
+          <p>Action chip</p>
-            (chip) => html`
-              <ha-chip .hasIcon=${chip.icon !== undefined}>
-                ${chip.icon
-                  ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                    </ha-svg-icon>`
-                  : ""}
-                ${chip.content}
-              </ha-chip>
-            `
-          )}
-        </div>
-      </ha-card>
-      <ha-card header="ha-chip-set demo">
-        <div class="card-content">
           <ha-chip-set>
             ${chips.map(
               (chip) => html`
-                <ha-chip .hasIcon=${chip.icon !== undefined}>
+                <ha-assist-chip .label=${chip.content}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-assist-chip>
+              `
+            )}
+            ${chips.map(
+              (chip) => html`
+                <ha-assist-chip .label=${chip.content} selected>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-assist-chip>
+              `
+            )}
+          </ha-chip-set>
+          <p>Filter chip</p>
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-filter-chip .label=${chip.content}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-filter-chip>
+              `
+            )}
+            ${chips.map(
+              (chip) => html`
+                <ha-filter-chip .label=${chip.content} selected>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-filter-chip>
+              `
+            )}
+          </ha-chip-set>
+          <p>Input chip</p>
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-input-chip .label=${chip.content}>
                   ${chip.icon
                     ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
                       </ha-svg-icon>`
                     : ""}
                   ${chip.content}
-                </ha-chip>
+                </ha-input-chip>
+              `
+            )}
+            ${chips.map(
+              (chip) => html`
+                <ha-input-chip .label=${chip.content} selected>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-input-chip>
               `
             )}
           </ha-chip-set>
@@ -68,12 +108,10 @@ export class DemoHaChips extends LitElement {
         max-width: 600px;
         margin: 24px auto;
       }
-      ha-chip {
-        margin-bottom: 4px;
-      }
       .card-content {
         display: flex;
         flex-direction: column;
+        align-items: flex-start;
       }
     `;
   }

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

@@ -11,6 +11,7 @@ const buttons: {
   min?: number;
   max?: number;
   step?: number;
+  unit?: string;
   class?: string;
 }[] = [
   {
@@ -29,6 +30,11 @@ const buttons: {
     label: "Custom",
     class: "custom",
   },
+  {
+    id: "unit",
+    label: "With unit",
+    unit: "m",
+  },
 ];
 
 @customElement("demo-components-ha-control-number-buttons")
@@ -50,6 +56,7 @@ export class DemoHarControlNumberButtons extends LitElement {
               <pre>Config: ${JSON.stringify(config)}</pre>
               <ha-control-number-buttons
                 .value=${this.value}
+                .unit=${config.unit}
                 .min=${config.min}
                 .max=${config.max}
                 .step=${config.step}

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

@@ -9,6 +9,7 @@ const sliders: {
   id: string;
   label: string;
   mode?: "start" | "end" | "cursor";
+  unit?: string;
   class?: string;
 }[] = [
   {
@@ -31,18 +32,21 @@ const sliders: {
     label: "Slider (start mode) and custom style",
     mode: "start",
     class: "custom",
+    unit: "mm",
   },
   {
     id: "slider-end-custom",
     label: "Slider (end mode) and custom style",
     mode: "end",
     class: "custom",
+    unit: "mm",
   },
   {
     id: "slider-cursor-custom",
     label: "Slider (cursor mode) and custom style",
     mode: "cursor",
     class: "custom",
+    unit: "mm",
   },
 ];
 
@@ -93,6 +97,7 @@ export class DemoHaBarSlider extends LitElement {
                 @value-changed=${this.handleValueChanged}
                 @slider-moved=${this.handleSliderMoved}
                 aria-labelledby=${id}
+                .unit=${config.unit}
               >
               </ha-control-slider>
             </div>
@@ -114,6 +119,7 @@ export class DemoHaBarSlider extends LitElement {
                   @value-changed=${this.handleValueChanged}
                   @slider-moved=${this.handleSliderMoved}
                   aria-label=${label}
+                  .unit=${config.unit}
                 >
                 </ha-control-slider>
               `;

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

@@ -5,9 +5,22 @@ subtitle: Dialogs provide important prompts in a user flow.
 
 # Material Design 3
 
-Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guideliness. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
 
-# Highlighted guidelines
+# Guidelines
+
+## Design
+
+- Dialogs have a max width of 560px. Alert and confirmation dialogs got a fixed width of 320px. If you need more width, consider a dedicated page instead.
+- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guideliness.
+- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
+- Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
+- The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
+- Keep the labels short, for example `Save`, `Delete`, `Enable`.
+- Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
+- Destructive actions should be a red warning button.
+- Alert or confirmation dialogs only have buttons and no X-icon.
+- Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
 
 ## Content
 
@@ -17,14 +30,6 @@ Our dialogs are based on the latest version of Material Design. Specs and guidel
 - If users become unsure, they read the description. Make sure this explains what will happen.
 - Strive for minimalism.
 
-## Buttons and X-icon
-
-- Keep the labels short, for example `Save`, `Delete`, `Enable`.
-- Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
-- Destructive actions should be a red warning button.
-- Alert or confirmation dialogs only have buttons and no X-icon.
-- Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
-
 ## Example
 
 ### Confirmation dialog

gallery/src/pages/concepts/home.markdown

@@ -18,7 +18,7 @@ The Home Assistant interface is based on Material Design. It's a design system c
 
 We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:
 
-- Meet us at <a href="https://discord.gg/BPBc8rZ9" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
+- Meet us at <a href="https://www.home-assistant.io/join-chat" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 

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

@@ -10,7 +10,6 @@ import { computeStateDisplay } from "../../../../src/common/entity/compute_state
 import "../../../../src/components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
 import "../../../../src/components/entity/state-badge";
-import "../../../../src/components/ha-chip";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
 

gallery/src/pages/misc/util-long-press.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { ActionHandlerEvent } from "../../../../src/data/lovelace";
+import { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
 
 @customElement("demo-misc-util-long-press")

gallery/src/pages/more-info/input-text.markdown

@@ -0,0 +1,3 @@
+---
+title: Input Text
+---

gallery/src/pages/more-info/input-text.ts

@@ -0,0 +1,46 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("input_text", "text", "Inspiration", {
+    friendly_name: "Text",
+    mode: "text",
+  }),
+];
+
+@customElement("demo-more-info-input-text")
+class DemoMoreInfoInputText extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-input-text": DemoMoreInfoInputText;
+  }
+}

gallery/src/pages/more-info/lock.markdown

@@ -0,0 +1,3 @@
+---
+title: Lock
+---

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

@@ -0,0 +1,49 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("lock", "lock", "locked", {
+    friendly_name: "Lock",
+    device_class: "lock",
+  }),
+  getEntity("lock", "unavailable", "unavailable", {
+    friendly_name: "Unavailable lock",
+  }),
+];
+
+@customElement("demo-more-info-lock")
+class DemoMoreInfoLock extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-lock": DemoMoreInfoLock;
+  }
+}

gallery/src/pages/more-info/media-player.markdown

@@ -0,0 +1,3 @@
+---
+title: Media Player
+---

gallery/src/pages/more-info/media-player.ts

@@ -0,0 +1,41 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { createMediaPlayerEntities } from "../../data/media_players";
+
+const ENTITIES = createMediaPlayerEntities();
+
+@customElement("demo-more-info-media-player")
+class DemoMoreInfoMediaPlayer extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-media-player": DemoMoreInfoMediaPlayer;
+  }
+}

gallery/src/pages/more-info/number.markdown

@@ -0,0 +1,3 @@
+---
+title: Number
+---

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

@@ -0,0 +1,78 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("number", "box1", 0, {
+    friendly_name: "Box1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "box",
+    unit_of_measurement: "items",
+  }),
+  getEntity("number", "slider1", 0, {
+    friendly_name: "Slider1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "slider",
+    unit_of_measurement: "items",
+  }),
+  getEntity("number", "auto1", 0, {
+    friendly_name: "Auto1",
+    min: 0,
+    max: 1000,
+    step: 1,
+    initial: 0,
+    mode: "auto",
+    unit_of_measurement: "items",
+  }),
+  getEntity("number", "auto2", 0, {
+    friendly_name: "Auto2",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "auto",
+    unit_of_measurement: "items",
+  }),
+];
+
+@customElement("demo-more-info-number")
+class DemoMoreInfoNumber extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-number": DemoMoreInfoNumber;
+  }
+}

gallery/src/pages/more-info/scene.markdown

@@ -0,0 +1,3 @@
+---
+title: Scene
+---

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

@@ -0,0 +1,49 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("scene", "romantic_lights", "scening", {
+    entity_id: ["light.bed_light", "light.ceiling_lights"],
+    friendly_name: "Romantic Scene",
+  }),
+  getEntity("scene", "unavailable", "unavailable", {
+    friendly_name: "Romantic Scene",
+  }),
+];
+
+@customElement("demo-more-info-scene")
+class DemoMoreInfoScene extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-scene": DemoMoreInfoScene;
+  }
+}

gallery/src/pages/more-info/timer.markdown

@@ -0,0 +1,3 @@
+---
+title: Timer
+---

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

@@ -0,0 +1,46 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("timer", "timer", "idle", {
+    friendly_name: "Timer",
+    duration: "0:05:00",
+  }),
+];
+
+@customElement("demo-more-info-timer")
+class DemoMoreInfoTimer extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-timer": DemoMoreInfoTimer;
+  }
+}

gallery/src/pages/more-info/vacuum.markdown

@@ -0,0 +1,3 @@
+---
+title: Vacuum
+---

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

@@ -0,0 +1,50 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { VacuumEntityFeature } from "../../../../src/data/vacuum";
+
+const ENTITIES = [
+  getEntity("vacuum", "first_floor_vacuum", "docked", {
+    friendly_name: "First floor vacuum",
+    supported_features:
+      VacuumEntityFeature.START +
+      VacuumEntityFeature.STOP +
+      VacuumEntityFeature.RETURN_HOME,
+  }),
+];
+
+@customElement("demo-more-info-vacuum")
+class DemoMoreInfoVacuum extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-vacuum": DemoMoreInfoVacuum;
+  }
+}

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

@@ -49,11 +49,9 @@ export class HassioAddonRepositoryEl extends LitElement {
       return html`
         <div class="content">
           <p class="description">
-            ${this.supervisor.localize(
+            ${this.supervisor.localize("store.no_results_found", {
-              "store.no_results_found",
+              repository: repo.name,
-              "repository",
+            })}
-              repo.name
-            )}
           </p>
         </div>
       `;
@@ -86,15 +84,15 @@ export class HassioAddonRepositoryEl extends LitElement {
                           )
                         : this.supervisor.localize("addon.state.installed")
                       : addon.available
-                      ? this.supervisor.localize("addon.state.not_installed")
+                        ? this.supervisor.localize("addon.state.not_installed")
-                      : this.supervisor.localize("addon.state.not_available")}
+                        : this.supervisor.localize("addon.state.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available
-                      ? "not_available"
+                        ? "not_available"
-                      : ""}
+                        : ""}
                     .iconImage=${atLeastVersion(
                       this.hass.config.version,
                       0,
@@ -108,8 +106,8 @@ export class HassioAddonRepositoryEl extends LitElement {
                         ? "update"
                         : "installed"
                       : !addon.available
-                      ? "unavailable"
+                        ? "unavailable"
-                      : ""}
+                        : ""}
                   ></hassio-card-content>
                 </div>
               </ha-card>

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

@@ -104,50 +104,50 @@ class HassioAddonConfig extends LitElement {
               selector: { select: { options: entry.options } },
             }
           : entry.type === "string"
-          ? entry.multiple
+            ? entry.multiple
-            ? {
+              ? {
-                name: entry.name,
+                  name: entry.name,
-                required: entry.required,
+                  required: entry.required,
-                selector: {
+                  selector: {
-                  select: { options: [], multiple: true, custom_value: true },
+                    select: { options: [], multiple: true, custom_value: true },
-                },
-              }
-            : {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  text: {
-                    type:
-                      entry.format || MASKED_FIELDS.includes(entry.name)
-                        ? "password"
-                        : "text",
                   },
-                },
+                }
-              }
+              : {
-          : entry.type === "boolean"
+                  name: entry.name,
-          ? {
+                  required: entry.required,
-              name: entry.name,
+                  selector: {
-              required: entry.required,
+                    text: {
-              selector: { boolean: {} },
+                      type:
-            }
+                        entry.format || MASKED_FIELDS.includes(entry.name)
-          : entry.type === "schema"
+                          ? "password"
-          ? {
+                          : "text",
-              name: entry.name,
+                    },
-              required: entry.required,
+                  },
-              selector: { object: {} },
+                }
-            }
+            : entry.type === "boolean"
-          : entry.type === "float" || entry.type === "integer"
+              ? {
-          ? {
+                  name: entry.name,
-              name: entry.name,
+                  required: entry.required,
-              required: entry.required,
+                  selector: { boolean: {} },
-              selector: {
+                }
-                number: {
+              : entry.type === "schema"
-                  mode: "box",
+                ? {
-                  step: entry.type === "float" ? "any" : undefined,
+                    name: entry.name,
-                },
+                    required: entry.required,
-              },
+                    selector: { object: {} },
-            }
+                  }
-          : entry
+                : entry.type === "float" || entry.type === "integer"
+                  ? {
+                      name: entry.name,
+                      required: entry.required,
+                      selector: {
+                        number: {
+                          mode: "box",
+                          step: entry.type === "float" ? "any" : undefined,
+                        },
+                      },
+                    }
+                  : entry
       )
   );
 
@@ -340,11 +340,9 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_reset", {
-        "addon.failed_to_reset",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
     button.progress = false;
   }
@@ -381,11 +379,9 @@ class HassioAddonConfig extends LitElement {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
       eventdata.success = false;
     }
     button.progress = false;

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

@@ -180,11 +180,9 @@ class HassioAddonNetwork extends LitElement {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_reset", {
-        "addon.failed_to_reset",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
       button.actionError();
     }
   }
@@ -220,11 +218,9 @@ class HassioAddonNetwork extends LitElement {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
       button.actionError();
     }
   }

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -85,8 +85,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.documentation.get_documentation",
-        "error",
+        { error: extractApiErrorMessage(err) }
-        extractApiErrorMessage(err)
       );
     }
   }

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

@@ -31,8 +31,8 @@ import { navigate } from "../../../../src/common/navigate";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-chip";
+import "../../../../src/components/chips/ha-chip-set";
-import "../../../../src/components/ha-chip-set";
+import "../../../../src/components/chips/ha-assist-chip";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -78,6 +78,7 @@ import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-has
 import { hassioStyle } from "../../resources/hassio-style";
 import "../../update-available/update-available-card";
 import { addonArchIsSupported, extractChangelog } from "../../util/addon";
+import { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -234,28 +235,32 @@ class HassioAddonInfo extends LitElement {
 
           <ha-chip-set class="capabilities">
             ${this.addon.stage !== "stable"
-              ? html` <ha-chip
+              ? html`
-                  hasIcon
+                  <ha-assist-chip
-                  class=${classMap({
+                    filled
-                    yellow: this.addon.stage === "experimental",
+                    class=${classMap({
-                    red: this.addon.stage === "deprecated",
+                      yellow: this.addon.stage === "experimental",
-                  })}
+                      red: this.addon.stage === "deprecated",
-                  @click=${this._showMoreInfo}
+                    })}
-                  id="stage"
+                    @click=${this._showMoreInfo}
-                >
+                    id="stage"
-                  <ha-svg-icon
+                    .label=${capitalizeFirstLetter(
-                    slot="icon"
+                      this.supervisor.localize(
-                    .path=${STAGE_ICON[this.addon.stage]}
+                        `addon.dashboard.capability.stages.${this.addon.stage}`
+                      )
+                    )}
                   >
-                  </ha-svg-icon>
+                    <ha-svg-icon
-                  ${this.supervisor.localize(
+                      slot="icon"
-                    `addon.dashboard.capability.stages.${this.addon.stage}`
+                      .path=${STAGE_ICON[this.addon.stage]}
-                  )}
+                    >
-                </ha-chip>`
+                    </ha-svg-icon>
+                  </ha-assist-chip>
+                `
               : ""}
 
-            <ha-chip
+            <ha-assist-chip
-              hasIcon
+              filled
               class=${classMap({
                 green: Number(this.addon.rating) >= 6,
                 yellow: [3, 4, 5].includes(Number(this.addon.rating)),
@@ -263,151 +268,197 @@ class HassioAddonInfo extends LitElement {
               })}
               @click=${this._showMoreInfo}
               id="rating"
+              .label=${capitalizeFirstLetter(
+                this.supervisor.localize(
+                  "addon.dashboard.capability.label.rating"
+                )
+              )}
             >
               <ha-svg-icon slot="icon" .path=${RATING_ICON[this.addon.rating]}>
               </ha-svg-icon>
-
+            </ha-assist-chip>
-              ${this.supervisor.localize(
-                "addon.dashboard.capability.label.rating"
-              )}
-            </ha-chip>
             ${this.addon.host_network
               ? html`
-                  <ha-chip
+                  <ha-assist-chip
-                    hasIcon
+                    filled
                     @click=${this._showMoreInfo}
                     id="host_network"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.host"
+                      )
+                    )}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiNetwork}> </ha-svg-icon>
-                    ${this.supervisor.localize(
+                  </ha-assist-chip>
-                      "addon.dashboard.capability.label.host"
-                    )}
-                  </ha-chip>
                 `
               : ""}
             ${this.addon.full_access
               ? html`
-                  <ha-chip
+                  <ha-assist-chip
-                    hasIcon
+                    filled
                     @click=${this._showMoreInfo}
                     id="full_access"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.hardware"
+                      )
+                    )}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiChip}></ha-svg-icon>
-                    ${this.supervisor.localize(
+                  </ha-assist-chip>
-                      "addon.dashboard.capability.label.hardware"
-                    )}
-                  </ha-chip>
                 `
               : ""}
             ${this.addon.homeassistant_api
               ? html`
-                  <ha-chip
+                  <ha-assist-chip
-                    hasIcon
+                    filled
                     @click=${this._showMoreInfo}
                     id="homeassistant_api"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.core"
+                      )
+                    )}
                   >
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiHomeAssistant}
                     ></ha-svg-icon>
-                    ${this.supervisor.localize(
+                  </ha-assist-chip>
-                      "addon.dashboard.capability.label.core"
-                    )}
-                  </ha-chip>
                 `
               : ""}
             ${this._computeHassioApi
               ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="hassio_api">
+                  <ha-assist-chip
+                    filled
+                    @click=${this._showMoreInfo}
+                    id="hassio_api"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                      ) || this.addon.hassio_role
+                    )}
+                  >
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiHomeAssistant}
                     ></ha-svg-icon>
-                    ${this.supervisor.localize(
+                  </ha-assist-chip>
-                      `addon.dashboard.capability.role.${this.addon.hassio_role}`
-                    ) || this.addon.hassio_role}
-                  </ha-chip>
                 `
               : ""}
             ${this.addon.docker_api
               ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="docker_api">
+                  <ha-assist-chip
-                    <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
+                    filled
-                    ${this.supervisor.localize(
+                    @click=${this._showMoreInfo}
-                      "addon.dashboard.capability.label.docker"
+                    id="docker_api"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.docker"
+                      )
                     )}
-                  </ha-chip>
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
+                  </ha-assist-chip>
                 `
               : ""}
             ${this.addon.host_pid
               ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="host_pid">
+                  <ha-assist-chip
-                    <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
+                    filled
-                    ${this.supervisor.localize(
+                    @click=${this._showMoreInfo}
-                      "addon.dashboard.capability.label.host_pid"
+                    id="host_pid"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.host_pid"
+                      )
                     )}
-                  </ha-chip>
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
+                  </ha-assist-chip>
                 `
               : ""}
             ${this.addon.apparmor !== "default"
               ? html`
-                  <ha-chip
+                  <ha-assist-chip
-                    hasIcon
+                    filled
                     @click=${this._showMoreInfo}
                     class=${this._computeApparmorClassName}
                     id="apparmor"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.apparmor"
+                      )
+                    )}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiShield}></ha-svg-icon>
-                    ${this.supervisor.localize(
+                  </ha-assist-chip>
-                      "addon.dashboard.capability.label.apparmor"
-                    )}
-                  </ha-chip>
                 `
               : ""}
             ${this.addon.auth_api
               ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="auth_api">
+                  <ha-assist-chip
-                    <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
+                    filled
-                    ${this.supervisor.localize(
+                    @click=${this._showMoreInfo}
-                      "addon.dashboard.capability.label.auth"
+                    id="auth_api"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.auth"
+                      )
                     )}
-                  </ha-chip>
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
+                  </ha-assist-chip>
                 `
               : ""}
             ${this.addon.ingress
               ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="ingress">
+                  <ha-assist-chip
+                    filled
+                    @click=${this._showMoreInfo}
+                    id="ingress"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.ingress"
+                      )
+                    )}
+                  >
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
-                    ${this.supervisor.localize(
+                  </ha-assist-chip>
-                      "addon.dashboard.capability.label.ingress"
-                    )}
-                  </ha-chip>
                 `
               : ""}
             ${this.addon.signed
               ? html`
-                  <ha-chip hasIcon @click=${this._showMoreInfo} id="signed">
+                  <ha-assist-chip
-                    <ha-svg-icon slot="icon" .path=${mdiLinkLock}></ha-svg-icon>
+                    filled
-                    ${this.supervisor.localize(
+                    @click=${this._showMoreInfo}
-                      "addon.dashboard.capability.label.signed"
+                    id="signed"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize(
+                        "addon.dashboard.capability.label.signed"
+                      )
                     )}
-                  </ha-chip>
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiLinkLock}></ha-svg-icon>
+                  </ha-assist-chip>
                 `
               : ""}
           </ha-chip-set>
 
           <div class="description light-color">
             ${this.addon.description}.<br />
-            ${this.supervisor.localize(
+            ${this.supervisor.localize("addon.dashboard.visit_addon_page", {
-              "addon.dashboard.visit_addon_page",
+              name: html`<a
-              "name",
+                href=${this.addon.url!}
-              html`<a href=${this.addon.url!} target="_blank" rel="noreferrer"
+                target="_blank"
+                rel="noreferrer"
                 >${this.addon.name}</a
-              >`
+              >`,
-            )}
+            })}
           </div>
           <div class="addon-container">
             <div>
@@ -574,10 +625,10 @@ class HassioAddonInfo extends LitElement {
                   <ha-alert alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_version",
-                      "core_version_installed",
+                      {
-                      this.supervisor.core.version,
+                        core_version_installed: this.supervisor.core.version,
-                      "core_version_needed",
+                        core_version_needed: addonStoreInfo!.homeassistant,
-                      addonStoreInfo!.homeassistant
+                      }
                     )}
                   </ha-alert>
                 `
@@ -750,12 +801,11 @@ class HassioAddonInfo extends LitElement {
         id === "stage"
           ? this.supervisor.localize(
               `addon.dashboard.capability.${id}.description`,
-              "icon_stable",
+              {
-              `<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon>`,
+                icon_stable: `<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon>`,
-              "icon_experimental",
+                icon_experimental: `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
-              `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
+                icon_deprecated: `<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon>`,
-              "icon_deprecated",
+              }
-              `<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon>`
             )
           : this.supervisor.localize(
               `addon.dashboard.capability.${id}.description`
@@ -817,11 +867,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
   }
 
@@ -839,11 +887,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
   }
 
@@ -861,11 +907,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
   }
 
@@ -883,11 +927,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
   }
 
@@ -905,11 +947,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.failed_to_save", {
-        "addon.failed_to_save",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
   }
 
@@ -1185,23 +1225,35 @@ class HassioAddonInfo extends LitElement {
         .description a {
           color: var(--primary-color);
         }
-        ha-chip {
+        ha-assist-chip {
-          text-transform: capitalize;
+          --md-sys-color-primary: var(--text-primary-color);
-          --ha-chip-text-color: var(--text-primary-color);
+          --md-sys-color-on-surface: var(--text-primary-color);
-          --ha-chip-background-color: var(--primary-color);
+          --ha-assist-chip-filled-container-color: var(--primary-color);
         }
 
         .red {
-          --ha-chip-background-color: var(--label-badge-red, #df4c1e);
+          --ha-assist-chip-filled-container-color: var(
+            --label-badge-red,
+            #df4c1e
+          );
         }
         .blue {
-          --ha-chip-background-color: var(--label-badge-blue, #039be5);
+          --ha-assist-chip-filled-container-color: var(
+            --label-badge-blue,
+            #039be5
+          );
         }
         .green {
-          --ha-chip-background-color: var(--label-badge-green, #0da035);
+          --ha-assist-chip-filled-container-color: var(
+            --label-badge-green,
+            #0da035
+          );
         }
         .yellow {
-          --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
+          --ha-assist-chip-filled-container-color: var(
+            --label-badge-yellow,
+            #f4b400
+          );
         }
         .capabilities {
           margin-bottom: 16px;
@@ -1260,9 +1312,6 @@ class HassioAddonInfo extends LitElement {
         }
 
         @media (max-width: 720px) {
-          ha-chip {
-            line-height: 36px;
-          }
           .addon-options {
             max-width: 100%;
           }

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -72,11 +72,9 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("addon.logs.get_logs", {
-        "addon.logs.get_logs",
+        error: extractApiErrorMessage(err),
-        "error",
+      });
-        extractApiErrorMessage(err)
-      );
     }
   }
 

hassio/src/components/hassio-filter-addons.ts

@@ -6,7 +6,7 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
   const options: IFuseOptions<StoreAddon> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
-    minMatchCharLength: 2,
+    minMatchCharLength: Math.min(filter.length, 2),
     threshold: 0.2,
   };
   const fuse = new Fuse(addons, options);

hassio/src/components/supervisor-formfield-label.ts

@@ -17,8 +17,11 @@ class SupervisorFormfieldLabel extends LitElement {
       ${this.imageUrl
         ? html`<img loading="lazy" alt="" src=${this.imageUrl} class="icon" />`
         : this.iconPath
-        ? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
+          ? html`<ha-svg-icon
-        : ""}
+              .path=${this.iconPath}
+              class="icon"
+            ></ha-svg-icon>`
+          : ""}
       <span class="label">${this.label}</span>
       ${this.version
         ? html`<span class="version">(${this.version})</span>`

hassio/src/dashboard/hassio-addons.ts

@@ -68,17 +68,19 @@ class HassioAddons extends LitElement {
                         .iconTitle=${addon.state !== "started"
                           ? this.supervisor.localize("dashboard.addon_stopped")
                           : addon.update_available!
-                          ? this.supervisor.localize(
+                            ? this.supervisor.localize(
-                              "dashboard.addon_new_version"
+                                "dashboard.addon_new_version"
-                            )
+                              )
-                          : this.supervisor.localize("dashboard.addon_running")}
+                            : this.supervisor.localize(
+                                "dashboard.addon_running"
+                              )}
                         .iconClass=${addon.update_available
                           ? addon.state === "started"
                             ? "update"
                             : "update stopped"
                           : addon.state === "started"
-                          ? "running"
+                            ? "running"
-                          : "stopped"}
+                            : "stopped"}
                         .iconImage=${atLeastVersion(
                           this.hass.config.version,
                           0,

hassio/src/dashboard/hassio-update.ts

@@ -46,11 +46,9 @@ export class HassioUpdate extends LitElement {
     return html`
       <div class="content">
         <h1>
-          ${this.supervisor.localize(
+          ${this.supervisor.localize("common.update_available", {
-            "common.update_available",
+            count: updatesAvailable,
-            "count",
+          })}
-            updatesAvailable
-          )}
           🎉
         </h1>
         <div class="card-group">

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

@@ -105,12 +105,12 @@ class HassioDatadiskDialog extends LitElement {
                     </ha-select>
                   `
                 : this.devices === undefined
-                ? this.dialogParams.supervisor.localize(
+                  ? this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.loading_devices"
+                      "dialog.datadisk_move.loading_devices"
-                  )
+                    )
-                : this.dialogParams.supervisor.localize(
+                  : this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.no_devices"
+                      "dialog.datadisk_move.no_devices"
-                  )}
+                    )}
 
               <mwc-button
                 slot="secondaryAction"

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

@@ -145,8 +145,7 @@ export class DialogHassioNetwork
                   ? html`<p>
                       ${this.supervisor.localize(
                         "dialog.network.connected_to",
-                        "ssid",
+                        { ssid: this._interface?.wifi?.ssid }
-                        this._interface?.wifi?.ssid
                       )}
                     </p>`
                   : ""}

hassio/src/hassio-my-redirect.ts

@@ -76,17 +76,15 @@ class HassioMyRedirect extends LitElement {
     const redirect = REDIRECTS[path];
 
     if (!redirect) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("my.not_supported", {
-        "my.not_supported",
+        link: html`<a
-        "link",
-        html`<a
           target="_blank"
           rel="noreferrer noopener"
           href="https://my.home-assistant.io/faq.html#supported-pages"
         >
           ${this.supervisor.localize("my.faq_link")}
-        </a>`
+        </a>`,
-      );
+      });
       return;
     }
 

hassio/src/hassio-router.ts

@@ -67,8 +67,8 @@ class HassioRouter extends HassRouterPage {
     const route = hassioPanel
       ? this.route
       : ingressPanel && this.panel.config?.ingress
-      ? this._ingressRoute(this.panel.config?.ingress)
+        ? this._ingressRoute(this.panel.config?.ingress)
-      : this.routeTail;
+        : this.routeTail;
 
     el.hass = this.hass;
     el.narrow = this.narrow;

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

@@ -96,13 +96,11 @@ class HassioCoreInfo extends LitElement {
             slot="primaryAction"
             class="warning"
             @click=${this._coreRestart}
-            .title=${this.supervisor.localize(
+            .title=${this.supervisor.localize("common.restart_name", {
-              "common.restart_name",
+              name: "Core",
-              "name",
+            })}
-              "Core"
-            )}
           >
-            ${this.supervisor.localize("common.restart_name", "name", "Core")}
+            ${this.supervisor.localize("common.restart_name", { name: "Core" })}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -122,16 +120,12 @@ class HassioCoreInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
+      title: this.supervisor.localize("confirm.restart.title", {
-        "confirm.restart.title",
+        name: "Home Assistant Core",
-        "name",
+      }),
-        "Home Assistant Core"
+      text: this.supervisor.localize("confirm.restart.text", {
-      ),
+        name: "Home Assistant Core",
-      text: this.supervisor.localize(
+      }),
-        "confirm.restart.text",
-        "name",
-        "Home Assistant Core"
-      ),
       confirmText: this.supervisor.localize("common.restart"),
       dismissText: this.supervisor.localize("common.cancel"),
     });
@@ -146,11 +140,9 @@ class HassioCoreInfo extends LitElement {
     } catch (err: any) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
-          title: this.supervisor.localize(
+          title: this.supervisor.localize("common.failed_to_restart_name", {
-            "common.failed_to_restart_name",
+            name: "Home Assistant Core",
-            "name",
+          }),
-            "Home AssistantCore"
-          ),
           text: extractApiErrorMessage(err),
         });
       }

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

@@ -109,19 +109,19 @@ class HassioSupervisorInfo extends LitElement {
                     </ha-progress-button>
                   `
                 : this.supervisor.supervisor.channel === "stable"
-                ? html`
+                  ? html`
-                    <ha-progress-button
+                      <ha-progress-button
-                      @click=${this._toggleBeta}
+                        @click=${this._toggleBeta}
-                      .title=${this.supervisor.localize(
+                        .title=${this.supervisor.localize(
-                        "system.supervisor.join_beta_description"
+                          "system.supervisor.join_beta_description"
-                      )}
+                        )}
-                    >
+                      >
-                      ${this.supervisor.localize(
+                        ${this.supervisor.localize(
-                        "system.supervisor.join_beta_action"
+                          "system.supervisor.join_beta_action"
-                      )}
+                        )}
-                    </ha-progress-button>
+                      </ha-progress-button>
-                  `
+                    `
-                : ""}
+                  : ""}
             </ha-settings-row>
 
             ${this.supervisor.supervisor.supported
@@ -200,17 +200,13 @@ class HassioSupervisorInfo extends LitElement {
           <ha-progress-button
             class="warning"
             @click=${this._supervisorRestart}
-            .title=${this.supervisor.localize(
+            .title=${this.supervisor.localize("common.restart_name", {
-              "common.restart_name",
+              name: "Supervisor",
-              "name",
+            })}
-              "Supervisor"
-            )}
           >
-            ${this.supervisor.localize(
+            ${this.supervisor.localize("common.restart_name", {
-              "common.restart_name",
+              name: "Supervisor",
-              "name",
+            })}
-              "Supervisor"
-            )}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -292,16 +288,12 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
+      title: this.supervisor.localize("confirm.restart.title", {
-        "confirm.restart.title",
+        name: "Supervisor",
-        "name",
+      }),
-        "Supervisor"
+      text: this.supervisor.localize("confirm.restart.text", {
-      ),
+        name: "Supervisor",
-      text: this.supervisor.localize(
+      }),
-        "confirm.restart.text",
-        "name",
-        "Supervisor"
-      ),
       confirmText: this.supervisor.localize("common.restart"),
       dismissText: this.supervisor.localize("common.cancel"),
     });
@@ -315,11 +307,9 @@ class HassioSupervisorInfo extends LitElement {
       await restartSupervisor(this.hass);
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.supervisor.localize(
+        title: this.supervisor.localize("common.failed_to_restart_name", {
-          "common.failed_to_restart_name",
+          name: "Supervisor",
-          "name",
+        }),
-          "Supervisor"
-        ),
         text: extractApiErrorMessage(err),
       });
     } finally {
@@ -334,8 +324,7 @@ class HassioSupervisorInfo extends LitElement {
       ),
       text: this.supervisor.localize(
         "system.supervisor.share_diagonstics_description",
-        "line_break",
+        { line_break: html`<br /><br />` }
-        html`<br /><br />`
       ),
     });
   }

hassio/src/system/hassio-supervisor-log.ts

@@ -124,13 +124,10 @@ class HassioSupervisorLog extends LitElement {
         this._selectedLogProvider
       );
     } catch (err: any) {
-      this._error = this.supervisor.localize(
+      this._error = this.supervisor.localize("system.log.get_logs", {
-        "system.log.get_logs",
+        provider: this._selectedLogProvider,
-        "provider",
+        error: extractApiErrorMessage(err),
-        this._selectedLogProvider,
+      });
-        "error",
-        extractApiErrorMessage(err)
-      );
     }
   }
 

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

@@ -70,8 +70,8 @@ const changelogUrl = (
     return version.includes("dev")
       ? "https://github.com/home-assistant/core/commits/dev"
       : version.includes("b")
-      ? "https://next.home-assistant.io/latest-release-notes/"
+        ? "https://next.home-assistant.io/latest-release-notes/"
-      : "https://www.home-assistant.io/latest-release-notes/";
+        : "https://www.home-assistant.io/latest-release-notes/";
   }
   if (entry === "os") {
     return version.includes("dev")
@@ -141,44 +141,47 @@ class UpdateAvailableCard extends LitElement {
                 })}
               </p>`
             : !this._updating
-            ? html`
+              ? html`
-                ${this._changelogContent
+                  ${this._changelogContent
-                  ? html`
+                    ? html`
-                      <ha-faded>
+                        <ha-faded>
-                        <ha-markdown .content=${this._changelogContent}>
+                          <ha-markdown .content=${this._changelogContent}>
-                        </ha-markdown>
+                          </ha-markdown>
-                      </ha-faded>
+                        </ha-faded>
-                    `
+                      `
-                  : ""}
+                    : ""}
-                <div class="versions">
+                  <div class="versions">
-                  <p>
+                    <p>
-                    ${this.supervisor.localize("update_available.description", {
+                      ${this.supervisor.localize(
+                        "update_available.description",
+                        {
+                          name: this._name,
+                          version: this._version,
+                          newest_version: this._version_latest,
+                        }
+                      )}
+                    </p>
+                  </div>
+                  ${["core", "addon"].includes(this._updateType)
+                    ? html`
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "update_available.create_backup"
+                          )}
+                        >
+                          <ha-checkbox checked></ha-checkbox>
+                        </ha-formfield>
+                      `
+                    : ""}
+                `
+              : html`<ha-circular-progress alt="Updating" size="large" active>
+                  </ha-circular-progress>
+                  <p class="progress-text">
+                    ${this.supervisor.localize("update_available.updating", {
                       name: this._name,
-                      version: this._version,
+                      version: this._version_latest,
-                      newest_version: this._version_latest,
                     })}
-                  </p>
+                  </p>`}
-                </div>
-                ${["core", "addon"].includes(this._updateType)
-                  ? html`
-                      <ha-formfield
-                        .label=${this.supervisor.localize(
-                          "update_available.create_backup"
-                        )}
-                      >
-                        <ha-checkbox checked></ha-checkbox>
-                      </ha-formfield>
-                    `
-                  : ""}
-              `
-            : html`<ha-circular-progress alt="Updating" size="large" active>
-                </ha-circular-progress>
-                <p class="progress-text">
-                  ${this.supervisor.localize("update_available.updating", {
-                    name: this._name,
-                    version: this._version_latest,
-                  })}
-                </p>`}
         </div>
         ${this._version !== this._version_latest && !this._updating
           ? html`

package.json

@@ -25,35 +25,35 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.2",
+    "@babel/runtime": "7.23.4",
     "@braintree/sanitize-url": "6.0.4",
-    "@codemirror/autocomplete": "6.10.2",
+    "@codemirror/autocomplete": "6.11.0",
     "@codemirror/commands": "6.3.0",
     "@codemirror/language": "6.9.2",
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.4",
     "@codemirror/state": "6.3.1",
-    "@codemirror/view": "6.21.4",
+    "@codemirror/view": "6.22.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.11.1",
+    "@formatjs/intl-datetimeformat": "6.12.0",
-    "@formatjs/intl-displaynames": "6.6.1",
+    "@formatjs/intl-displaynames": "6.6.4",
     "@formatjs/intl-getcanonicallocales": "2.3.0",
-    "@formatjs/intl-listformat": "7.5.0",
+    "@formatjs/intl-listformat": "7.5.3",
-    "@formatjs/intl-locale": "3.4.0",
+    "@formatjs/intl-locale": "3.4.3",
-    "@formatjs/intl-numberformat": "8.8.0",
+    "@formatjs/intl-numberformat": "8.9.0",
-    "@formatjs/intl-pluralrules": "5.2.7",
+    "@formatjs/intl-pluralrules": "5.2.10",
-    "@formatjs/intl-relativetimeformat": "11.2.7",
+    "@formatjs/intl-relativetimeformat": "11.2.10",
     "@fullcalendar/core": "6.1.9",
     "@fullcalendar/daygrid": "6.1.9",
     "@fullcalendar/interaction": "6.1.9",
     "@fullcalendar/list": "6.1.9",
     "@fullcalendar/luxon3": "6.1.9",
     "@fullcalendar/timegrid": "6.1.9",
-    "@lezer/highlight": "1.1.6",
+    "@lezer/highlight": "1.2.0",
     "@lit-labs/context": "0.4.1",
-    "@lit-labs/motion": "1.0.4",
+    "@lit-labs/motion": "1.0.6",
-    "@lit-labs/observers": "2.0.1",
+    "@lit-labs/observers": "2.0.2",
-    "@lit-labs/virtualizer": "2.0.7",
+    "@lit-labs/virtualizer": "2.0.11",
     "@lrnwebcomponents/simple-tooltip": "7.0.18",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
@@ -84,9 +84,6 @@
     "@material/web": "=1.0.1",
     "@mdi/js": "7.3.67",
     "@mdi/svg": "7.3.67",
-    "@polymer/iron-flex-layout": "3.0.1",
-    "@polymer/iron-input": "3.0.1",
-    "@polymer/iron-resizable-behavior": "3.0.1",
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
@@ -94,8 +91,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.2.1",
+    "@vaadin/combo-box": "24.2.3",
-    "@vaadin/vaadin-themable-mixin": "24.2.1",
+    "@vaadin/vaadin-themable-mixin": "24.2.3",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -105,33 +102,34 @@
     "app-datepicker": "5.1.1",
     "chart.js": "4.4.0",
     "comlink": "4.4.1",
-    "core-js": "3.33.1",
+    "core-js": "3.33.3",
     "cropperjs": "1.6.1",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
+    "element-internals-polyfill": "1.3.9",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
     "hls.js": "1.4.12",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.4",
+    "intl-messageformat": "10.5.8",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
-    "luxon": "3.4.3",
+    "luxon": "3.4.4",
-    "marked": "9.1.2",
+    "marked": "10.0.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
-    "punycode": "2.3.0",
+    "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",
     "resize-observer-polyfill": "1.5.1",
     "roboto-fontface": "0.10.0",
-    "rrule": "2.7.2",
+    "rrule": "2.8.1",
     "sortablejs": "1.15.0",
     "stacktrace-js": "2.0.2",
     "superstruct": "1.0.3",
@@ -140,8 +138,8 @@
     "tsparticles-preset-links": "2.12.0",
     "ua-parser-js": "1.0.37",
     "unfetch": "5.0.0",
-    "vis-data": "7.1.7",
+    "vis-data": "7.1.9",
-    "vis-network": "9.1.8",
+    "vis-network": "9.1.9",
     "vue": "2.7.15",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -154,12 +152,13 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.23.2",
+    "@babel/core": "7.23.3",
-    "@babel/plugin-proposal-decorators": "7.23.2",
+    "@babel/helper-define-polyfill-provider": "0.4.3",
-    "@babel/plugin-transform-runtime": "7.23.2",
+    "@babel/plugin-proposal-decorators": "7.23.3",
-    "@babel/preset-env": "7.23.2",
+    "@babel/plugin-transform-runtime": "7.23.4",
-    "@babel/preset-typescript": "7.23.2",
+    "@babel/preset-env": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.7.8",
+    "@babel/preset-typescript": "7.23.3",
+    "@bundle-stats/plugin-webpack-filter": "4.8.3",
     "@koa/cors": "4.0.0",
     "@lokalise/node-api": "12.0.0",
     "@octokit/auth-oauth-device": "6.0.1",
@@ -170,33 +169,32 @@
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-json": "6.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.4",
+    "@rollup/plugin-replace": "5.0.5",
-    "@types/babel__plugin-transform-runtime": "7.9.4",
+    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.11",
+    "@types/chromecast-caf-receiver": "6.0.12",
-    "@types/chromecast-caf-sender": "1.0.7",
+    "@types/chromecast-caf-sender": "1.0.8",
-    "@types/esprima": "4.0.5",
     "@types/glob": "8.1.0",
-    "@types/html-minifier-terser": "7.0.1",
+    "@types/html-minifier-terser": "7.0.2",
-    "@types/js-yaml": "4.0.8",
+    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.7",
+    "@types/leaflet": "1.9.8",
-    "@types/leaflet-draw": "1.0.9",
+    "@types/leaflet-draw": "1.0.11",
-    "@types/luxon": "3.3.3",
+    "@types/luxon": "3.3.5",
-    "@types/mocha": "10.0.3",
+    "@types/mocha": "10.0.6",
-    "@types/qrcode": "1.5.4",
+    "@types/qrcode": "1.5.5",
-    "@types/serve-handler": "6.1.3",
+    "@types/serve-handler": "6.1.4",
-    "@types/sortablejs": "1.15.4",
+    "@types/sortablejs": "1.15.7",
-    "@types/tar": "6.1.7",
+    "@types/tar": "6.1.10",
-    "@types/ua-parser-js": "0.7.38",
+    "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.9.0",
+    "@typescript-eslint/parser": "6.12.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
     "chai": "4.3.10",
     "del": "7.1.0",
-    "eslint": "8.52.0",
+    "eslint": "8.54.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.0.0",
@@ -204,10 +202,9 @@
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-lit": "1.10.1",
-    "eslint-plugin-lit-a11y": "4.1.0",
+    "eslint-plugin-lit-a11y": "4.1.1",
     "eslint-plugin-unused-imports": "3.0.0",
     "eslint-plugin-wc": "2.0.4",
-    "esprima": "4.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.1.1",
     "glob": "10.3.10",
@@ -221,7 +218,7 @@
     "husky": "8.0.3",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.0.2",
+    "lint-staged": "15.1.0",
     "lit-analyzer": "2.0.1",
     "lodash.template": "4.5.0",
     "magic-string": "0.30.5",
@@ -230,19 +227,19 @@
     "object-hash": "3.0.0",
     "open": "9.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.0.3",
+    "prettier": "3.1.0",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.9.2",
+    "rollup-plugin-visualizer": "5.9.3",
     "serve-handler": "6.1.5",
-    "sinon": "17.0.0",
+    "sinon": "17.0.1",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.2",
     "tar": "6.2.0",
     "terser-webpack-plugin": "5.3.9",
     "ts-lit-plugin": "2.0.1",
-    "typescript": "5.2.2",
+    "typescript": "5.3.2",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
     "webpack": "5.89.0",
@@ -257,9 +254,11 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.5.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit@^2.7.4 || ^3.0.0": "^2.7.4",
+    "lit": "2.8.0",
+    "clean-css": "5.3.2",
+    "@lit/reactive-element": "1.6.3",
     "sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
   },
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@4.0.2"
 }

public/static/icons/mask-icon.svg

@@ -1,23 +1 @@
-<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 240 240"><path d="M120.001 0c-3.787 0-7.573 1.499-10.444 4.49L12.211 105.905a25.921 25.921 0 0 0-2.098 2.501 35.25 35.25 0 0 0-1.96 2.942c-3.01 5.021-5.285 11.318-6.074 16.898-.03.21-.088.429-.11.636a27.355 27.355 0 0 0-.213 3.317v93.023a14.78 14.78 90 0 0 14.78 14.78h90.92L67.422 198.29a20.2 20.2 90 1 1 12.542-13.06l31.17 32.474V98.726a20.2 20.2 90 1 1 17.734 0v83.44l31.001-32.299a20.2 20.2 90 1 1 12.267 13.357l-43.269 45.082V240h94.9a14.479 14.479 90 0 0 14.478-14.479v-93.314c0-1.059-.069-2.168-.214-3.314-.7-5.73-3.06-12.327-6.183-17.537a35.801 35.801 0 0 0-1.955-2.937 26.271 26.271 0 0 0-2.102-2.506L130.444 4.486C127.573 1.494 123.786-.002 120.001 0"/></svg>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="480.000000pt" height="480.000000pt" viewBox="0 0 480.000000 480.000000"
- preserveAspectRatio="xMidYMid meet">
-<g transform="translate(0.000000,480.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2313 4666 c-23 -7 -56 -23 -75 -34 -47 -30 -2059 -2048 -2095 -2102
--45 -67 -77 -135 -109 -230 l-29 -85 0 -995 0 -995 27 -51 c31 -59 93 -118
-152 -145 39 -18 83 -19 1001 -19 l960 0 -406 405 c-395 395 -406 406 -433 395
--15 -5 -63 -10 -107 -10 -429 0 -566 577 -181 767 67 34 86 38 164 42 105 4
-165 -13 246 -67 113 -74 175 -190 176 -327 1 -44 -3 -96 -7 -115 l-8 -35 316
--315 315 -315 0 1160 -1 1160 -51 35 c-260 177 -226 567 62 704 82 39 209 48
-293 21 239 -78 354 -352 242 -575 -32 -63 -89 -125 -141 -156 l-44 -26 0 -811
-0 -812 315 315 c218 217 313 320 309 330 -14 35 -16 134 -4 190 26 122 111
-227 230 284 82 39 209 48 293 21 115 -38 214 -130 258 -242 19 -46 23 -78 24
--153 0 -86 -3 -101 -32 -163 -40 -84 -118 -163 -198 -202 -49 -23 -77 -29
--150 -33 -50 -2 -108 1 -130 7 l-40 11 -437 -438 -438 -437 0 -307 0 -308 998
-0 c981 0 998 1 1042 21 58 26 115 81 148 144 l27 50 0 995 0 995 -33 95 c-72
-209 -6 135 -1147 1278 -840 843 -1040 1037 -1082 1059 -64 31 -159 39 -220 19z"/>
-</g>
-</svg>

pyproject.toml

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

renovate.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "configMigration": true,
   "extends": [
     ":ignoreModulesAndTests",
     ":label(Dependencies)",
@@ -10,7 +11,7 @@
     "group:recommended",
     "npm:unpublishSafe"
   ],
-  "enabledManagers": ["npm"],
+  "enabledManagers": ["npm", "nvm"],
   "postUpdateOptions": ["yarnDedupeHighest"],
   "lockFileMaintenance": {
     "description": ["Run after patch releases but before next beta"],
@@ -28,11 +29,22 @@
       "matchPackageNames": ["vue"],
       "allowedVersions": "< 3"
     },
+    {
+      "description": "Group MDI packages",
+      "groupName": "Material Design Icons",
+      "matchPackageNames": ["@mdi/js", "@mdi/svg"]
+    },
     {
       "description": "Group tsparticles engine and presets",
       "groupName": "tsparticles",
       "matchPackageNames": ["tsparticles-engine"],
       "matchPackagePrefixes": ["tsparticles-preset-"]
+    },
+    {
+      "description": "Group and temporarily disable WDS packages",
+      "groupName": "Web Dev Server",
+      "matchPackagePrefixes": ["@web/dev-server"],
+      "enabled": false
     }
   ]
 }

script/translations_upload_base

@@ -40,4 +40,5 @@ docker run \
     --file /opt/src/${LOCAL_FILE} \
     --lang-iso ${LANG_ISO} \
     --convert-placeholders=false \
-    --replace-modified=true
+    --replace-modified=true \
+#    --cleanup-mode=true

src/auth/ha-auth-flow.ts

@@ -8,8 +8,14 @@ import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-formfield";
-import "../components/ha-markdown";
+import {
-import { AuthProvider, autocompleteLoginFields } from "../data/auth";
+  AuthProvider,
+  autocompleteLoginFields,
+  createLoginFlow,
+  deleteLoginFlow,
+  redirectWithAuthCode,
+  submitLoginFlow,
+} from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -30,18 +36,18 @@ export class HaAuthFlow extends LitElement {
 
   @property() public localize!: LocalizeFunc;
 
+  @property({ attribute: false }) public step?: DataEntryFlowStep;
+
+  @property({ type: Boolean }) private storeToken = false;
+
   @state() private _state: State = "loading";
 
   @state() private _stepData?: Record<string, any>;
 
-  @state() private _step?: DataEntryFlowStep;
-
   @state() private _errorMessage?: string;
 
   @state() private _submitting = false;
 
-  @state() private _storeToken = false;
-
   createRenderRoot() {
     return this;
   }
@@ -49,27 +55,29 @@ export class HaAuthFlow extends LitElement {
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
-    if (!changedProps.has("_step")) {
+    if (!changedProps.has("step")) {
       return;
     }
 
-    if (!this._step) {
+    if (!this.step) {
       this._stepData = undefined;
       return;
     }
 
-    const oldStep = changedProps.get("_step") as HaAuthFlow["_step"];
+    this._state = "step";
+
+    const oldStep = changedProps.get("step") as HaAuthFlow["step"];
 
     if (
       !oldStep ||
-      this._step.flow_id !== oldStep.flow_id ||
+      this.step.flow_id !== oldStep.flow_id ||
-      (this._step.type === "form" &&
+      (this.step.type === "form" &&
         oldStep.type === "form" &&
-        this._step.step_id !== oldStep.step_id)
+        this.step.step_id !== oldStep.step_id)
     ) {
       this._stepData =
-        this._step.type === "form"
+        this.step.type === "form"
-          ? computeInitialHaFormData(this._step.data_schema)
+          ? computeInitialHaFormData(this.step.data_schema)
           : undefined;
     }
   }
@@ -82,9 +90,27 @@ export class HaAuthFlow extends LitElement {
           text-align: center;
         }
         ha-auth-flow .store-token {
-          margin-top: 10px;
           margin-left: -16px;
         }
+        a.forgot-password {
+          color: var(--primary-color);
+          text-decoration: none;
+          font-size: 0.875rem;
+        }
+        .space-between {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        form {
+          text-align: center;
+          max-width: 336px;
+          width: 100%;
+        }
+        ha-auth-form {
+          display: block;
+          margin-top: 16px;
+        }
       </style>
       <form>${this._renderForm()}</form>
     `;
@@ -118,7 +144,7 @@ export class HaAuthFlow extends LitElement {
       this._providerChanged(this.authProvider);
     }
 
-    if (!changedProps.has("_step") || this._step?.type !== "form") {
+    if (!changedProps.has("step") || this.step?.type !== "form") {
       return;
     }
 
@@ -134,18 +160,18 @@ export class HaAuthFlow extends LitElement {
   private _renderForm() {
     switch (this._state) {
       case "step":
-        if (this._step == null) {
+        if (this.step == null) {
           return nothing;
         }
         return html`
-          ${this._renderStep(this._step)}
+          ${this._renderStep(this.step)}
           <div class="action">
             <mwc-button
               raised
               @click=${this._handleSubmit}
               .disabled=${this._submitting}
             >
-              ${this._step.type === "form"
+              ${this.step.type === "form"
                 ? this.localize("ui.panel.page-authorize.form.next")
                 : this.localize("ui.panel.page-authorize.form.start_over")}
             </mwc-button>
@@ -154,11 +180,9 @@ export class HaAuthFlow extends LitElement {
       case "error":
         return html`
           <ha-alert alert-type="error">
-            ${this.localize(
+            ${this.localize("ui.panel.page-authorize.form.error", {
-              "ui.panel.page-authorize.form.error",
+              error: this._errorMessage,
-              "error",
+            })}
-              this._errorMessage
-            )}
           </ha-alert>
           <div class="action">
             <mwc-button raised @click=${this._startOver}>
@@ -182,24 +206,18 @@ export class HaAuthFlow extends LitElement {
       case "abort":
         return html`
           ${this.localize("ui.panel.page-authorize.abort_intro")}:
-          <ha-markdown
+          ${this.localize(
-            allowsvg
+            `ui.panel.page-authorize.form.providers.${step.handler[0]}.abort.${step.reason}`
-            breaks
+          )}
-            .content=${this.localize(
-              `ui.panel.page-authorize.form.providers.${step.handler[0]}.abort.${step.reason}`
-            )}
-          ></ha-markdown>
         `;
       case "form":
         return html`
-          ${this._computeStepDescription(step)
+          <h1>
-            ? html`
+            ${!["select_mfa_module", "mfa"].includes(step.step_id)
-                <ha-markdown
+              ? this.localize("ui.panel.page-authorize.welcome_home")
-                  breaks
+              : this.localize("ui.panel.page-authorize.just_checking")}
-                  .content=${this._computeStepDescription(step)}
+          </h1>
-                ></ha-markdown>
+          ${this._computeStepDescription(step)}
-              `
-            : nothing}
           <ha-auth-form
             .data=${this._stepData}
             .schema=${autocompleteLoginFields(step.data_schema)}
@@ -212,15 +230,28 @@ export class HaAuthFlow extends LitElement {
           ${this.clientId === genClientId() &&
           !["select_mfa_module", "mfa"].includes(step.step_id)
             ? html`
-                <ha-formfield
+                <div class="space-between">
-                  class="store-token"
+                  <ha-formfield
-                  .label=${this.localize("ui.panel.page-authorize.store_token")}
+                    class="store-token"
-                >
+                    .label=${this.localize(
-                  <ha-checkbox
+                      "ui.panel.page-authorize.store_token"
-                    .checked=${this._storeToken}
+                    )}
-                    @change=${this._storeTokenChanged}
+                  >
-                  ></ha-checkbox>
+                    <ha-checkbox
-                </ha-formfield>
+                      .checked=${this.storeToken}
+                      @change=${this._storeTokenChanged}
+                    ></ha-checkbox>
+                  </ha-formfield>
+                  <a
+                    class="forgot-password"
+                    href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    >${this.localize(
+                      "ui.panel.page-authorize.forgot_password"
+                    )}</a
+                  >
+                </div>
               `
             : ""}
         `;
@@ -230,15 +261,12 @@ export class HaAuthFlow extends LitElement {
   }
 
   private _storeTokenChanged(e: CustomEvent<HTMLInputElement>) {
-    this._storeToken = (e.currentTarget as HTMLInputElement).checked;
+    this.storeToken = (e.currentTarget as HTMLInputElement).checked;
   }
 
   private async _providerChanged(newProvider?: AuthProvider) {
-    if (this._step && this._step.type === "form") {
+    if (this.step && this.step.type === "form") {
-      fetch(`/auth/login_flow/${this._step.flow_id}`, {
+      deleteLoginFlow(this.step.flow_id).catch((err) => {
-        method: "DELETE",
-        credentials: "same-origin",
-      }).catch((err) => {
         // eslint-disable-next-line no-console
         console.error("Error delete obsoleted auth flow", err);
       });
@@ -253,26 +281,25 @@ export class HaAuthFlow extends LitElement {
     }
 
     try {
-      const response = await fetch("/auth/login_flow", {
+      const response = await createLoginFlow(this.clientId, this.redirectUri, [
-        method: "POST",
+        newProvider.type,
-        credentials: "same-origin",
+        newProvider.id,
-        body: JSON.stringify({
+      ]);
-          client_id: this.clientId,
-          handler: [newProvider.type, newProvider.id],
-          redirect_uri: this.redirectUri,
-        }),
-      });
 
       const data = await response.json();
 
       if (response.ok) {
         // allow auth provider bypass the login form
         if (data.type === "create_entry") {
-          this._redirect(data.result);
+          redirectWithAuthCode(
+            this.redirectUri!,
+            data.result,
+            this.oauth2State
+          );
           return;
         }
 
-        this._step = data;
+        this.step = data;
         this._state = "step";
       } else {
         this._state = "error";
@@ -286,27 +313,6 @@ export class HaAuthFlow extends LitElement {
     }
   }
 
-  private _redirect(authCode: string) {
-    // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
-    let url = this.redirectUri!;
-    if (!url.includes("?")) {
-      url += "?";
-    } else if (!url.endsWith("&")) {
-      url += "&";
-    }
-
-    url += `code=${encodeURIComponent(authCode)}`;
-
-    if (this.oauth2State) {
-      url += `&state=${encodeURIComponent(this.oauth2State)}`;
-    }
-    if (this._storeToken) {
-      url += `&storeToken=true`;
-    }
-
-    document.location.assign(url);
-  }
-
   private _stepDataChanged(ev: CustomEvent) {
     this._stepData = ev.detail.value;
   }
@@ -314,13 +320,7 @@ export class HaAuthFlow extends LitElement {
   private _computeStepDescription(step: DataEntryFlowStepForm) {
     const resourceKey =
       `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description` as const;
-    const args: string[] = [];
+    return this.localize(resourceKey, step.description_placeholders);
-    const placeholders = step.description_placeholders || {};
-    Object.keys(placeholders).forEach((key) => {
-      args.push(key);
-      args.push(placeholders[key]);
-    });
-    return this.localize(resourceKey, ...args);
   }
 
   private _computeLabelCallback(step: DataEntryFlowStepForm) {
@@ -349,10 +349,10 @@ export class HaAuthFlow extends LitElement {
 
   private async _handleSubmit(ev: Event) {
     ev.preventDefault();
-    if (this._step == null) {
+    if (this.step == null) {
       return;
     }
-    if (this._step.type !== "form") {
+    if (this.step.type !== "form") {
       this._providerChanged(this.authProvider);
       return;
     }
@@ -361,11 +361,7 @@ export class HaAuthFlow extends LitElement {
     const postData = { ...this._stepData, client_id: this.clientId };
 
     try {
-      const response = await fetch(`/auth/login_flow/${this._step.flow_id}`, {
+      const response = await submitLoginFlow(this.step.flow_id, postData);
-        method: "POST",
-        credentials: "same-origin",
-        body: JSON.stringify(postData),
-      });
 
       const newStep = await response.json();
 
@@ -376,10 +372,14 @@ export class HaAuthFlow extends LitElement {
       }
 
       if (newStep.type === "create_entry") {
-        this._redirect(newStep.result);
+        redirectWithAuthCode(
+          this.redirectUri!,
+          newStep.result,
+          this.oauth2State
+        );
         return;
       }
-      this._step = newStep;
+      this.step = newStep;
       this._state = "step";
     } catch (err: any) {
       // eslint-disable-next-line no-console

src/auth/ha-auth-form-string.ts

@@ -41,8 +41,8 @@ export class HaAuthFormString extends HaFormString {
         !this.isPassword
           ? this.stringType
           : this.unmaskedPassword
-          ? "text"
+            ? "text"
-          : "password"
+            : "password"
       }
         .label=${this.label}
         .value=${this.data || ""}

src/auth/ha-authorize.ts

@@ -13,6 +13,7 @@ import {
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
+import "./ha-local-auth-flow";
 
 import("./ha-pick-auth-provider");
 
@@ -39,6 +40,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _error?: string;
 
+  @state() private _forceDefaultLogin = false;
+
   constructor() {
     super();
     const query = extractSearchParamsObject() as AuthUrlSearchParams;
@@ -68,19 +71,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       `;
     }
 
-    if (!this._authProviders) {
+    const inactiveProviders = this._authProviders?.filter(
-      return html`
-        <style>
-          ha-authorize p {
-            font-size: 14px;
-            line-height: 20px;
-          }
-        </style>
-        <p>${this.localize("ui.panel.page-authorize.initializing")}</p>
-      `;
-    }
-
-    const inactiveProviders = this._authProviders.filter(
       (prv) => prv !== this._authProvider
     );
 
@@ -89,13 +80,16 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     return html`
       <style>
         ha-pick-auth-provider {
-          display: block;
-          margin-top: 48px;
-        }
-        ha-auth-flow {
           display: block;
           margin-top: 24px;
         }
+        ha-auth-flow,
+        ha-local-auth-flow {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          align-items: center;
+        }
         ha-alert {
           display: block;
           margin: 16px 0;
@@ -104,6 +98,54 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           font-size: 14px;
           line-height: 20px;
         }
+        .card-content {
+          background: var(
+            --ha-card-background,
+            var(--card-background-color, white)
+          );
+          box-shadow: var(--ha-card-box-shadow, none);
+          box-sizing: border-box;
+          border-radius: var(--ha-card-border-radius, 12px);
+          border-width: var(--ha-card-border-width, 1px);
+          border-style: solid;
+          border-color: var(
+            --ha-card-border-color,
+            var(--divider-color, #e0e0e0)
+          );
+          color: var(--primary-text-color);
+          position: relative;
+          padding: 16px;
+        }
+        .footer {
+          padding-top: 8px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        ha-language-picker {
+          width: 200px;
+          border-radius: 4px;
+          overflow: hidden;
+          --ha-select-height: 40px;
+          --mdc-select-fill-color: none;
+          --mdc-select-label-ink-color: var(--primary-text-color, #212121);
+          --mdc-select-ink-color: var(--primary-text-color, #212121);
+          --mdc-select-idle-line-color: transparent;
+          --mdc-select-hover-line-color: transparent;
+          --mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
+          --mdc-shape-small: 0;
+        }
+        .footer a {
+          text-decoration: none;
+          color: var(--primary-text-color);
+          margin-right: 16px;
+        }
+        h1 {
+          font-size: 28px;
+          font-weight: 400;
+          margin-top: 16px;
+          margin-bottom: 16px;
+        }
       </style>
 
       ${!this._ownInstance
@@ -120,33 +162,59 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
                   >`,
                 })}
           </ha-alert>`
-        : html`<p>${this.localize("ui.panel.page-authorize.authorizing")}</p>`}
-      ${inactiveProviders.length > 0
-        ? html`<p>
-            ${this.localize("ui.panel.page-authorize.logging_in_with", {
-              authProviderName: html`<b>${this._authProvider!.name}</b>`,
-            })}
-          </p>`
         : nothing}
 
-      <ha-auth-flow
+      <div class="card-content">
-        .clientId=${this.clientId}
+        ${!this._authProvider
-        .redirectUri=${this.redirectUri}
+          ? html`<p>
-        .oauth2State=${this.oauth2State}
+              ${this.localize("ui.panel.page-authorize.initializing")}
-        .authProvider=${this._authProvider}
+            </p> `
-        .localize=${this.localize}
+          : !this._forceDefaultLogin &&
-      ></ha-auth-flow>
+              this._authProvider!.users &&
-
+              this.clientId != null &&
-      ${inactiveProviders.length > 0
+              this.redirectUri != null
-        ? html`
+            ? html`<ha-local-auth-flow
-            <ha-pick-auth-provider
+                .clientId=${this.clientId}
-              .localize=${this.localize}
+                .redirectUri=${this.redirectUri}
-              .clientId=${this.clientId}
+                .oauth2State=${this.oauth2State}
-              .authProviders=${inactiveProviders}
+                .authProvider=${this._authProvider}
-              @pick-auth-provider=${this._handleAuthProviderPick}
+                .authProviders=${this._authProviders}
-            ></ha-pick-auth-provider>
+                .localize=${this.localize}
-          `
+                .ownInstance=${this._ownInstance}
-        : ""}
+                @default-login-flow=${this._handleDefaultLoginFlow}
+              ></ha-local-auth-flow>`
+            : html`<ha-auth-flow
+                  .clientId=${this.clientId}
+                  .redirectUri=${this.redirectUri}
+                  .oauth2State=${this.oauth2State}
+                  .authProvider=${this._authProvider}
+                  .localize=${this.localize}
+                ></ha-auth-flow>
+                ${inactiveProviders!.length > 0
+                  ? html`
+                      <ha-pick-auth-provider
+                        .localize=${this.localize}
+                        .clientId=${this.clientId}
+                        .authProviders=${inactiveProviders}
+                        @pick-auth-provider=${this._handleAuthProviderPick}
+                      ></ha-pick-auth-provider>
+                    `
+                  : ""}`}
+      </div>
+      <div class="footer">
+        <ha-language-picker
+          .value=${this.language}
+          .label=${""}
+          nativeName
+          @value-changed=${this._languageChanged}
+        ></ha-language-picker>
+        <a
+          href="https://www.home-assistant.io/docs/authentication/"
+          target="_blank"
+          rel="noreferrer noopener"
+          >${this.localize("ui.panel.page-authorize.help")}</a
+        >
+      </div>
     `;
   }
 
@@ -205,6 +273,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       this._ownInstance = true;
       registerServiceWorker(this, false);
     }
+
+    import("../components/ha-language-picker");
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -245,7 +315,22 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
+  private _handleDefaultLoginFlow() {
+    this._forceDefaultLogin = true;
+  }
+
   private async _handleAuthProviderPick(ev) {
     this._authProvider = ev.detail;
   }
+
+  private _languageChanged(ev: CustomEvent) {
+    const language = ev.detail.value;
+    this.language = language;
+
+    try {
+      localStorage.setItem("selectedLanguage", JSON.stringify(language));
+    } catch (err: any) {
+      // Ignore
+    }
+  }
 }

src/auth/ha-local-auth-flow.ts

@@ -0,0 +1,476 @@
+/* eslint-disable lit/prefer-static-styles */
+import "@material/mwc-button";
+import { mdiEye, mdiEyeOff } from "@mdi/js";
+import { html, LitElement, nothing, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { LocalizeFunc } from "../common/translations/localize";
+import "../components/ha-alert";
+import "../components/ha-button";
+import "../components/ha-icon-button";
+import "../components/user/ha-person-badge";
+import {
+  AuthProvider,
+  createLoginFlow,
+  deleteLoginFlow,
+  redirectWithAuthCode,
+  submitLoginFlow,
+} from "../data/auth";
+import { DataEntryFlowStep } from "../data/data_entry_flow";
+import { listPersons } from "../data/person";
+import "./ha-auth-textfield";
+import type { HaAuthTextField } from "./ha-auth-textfield";
+
+@customElement("ha-local-auth-flow")
+export class HaLocalAuthFlow extends LitElement {
+  @property({ attribute: false }) public authProvider?: AuthProvider;
+
+  @property({ attribute: false }) public authProviders?: AuthProvider[];
+
+  @property() public clientId?: string;
+
+  @property() public redirectUri?: string;
+
+  @property() public oauth2State?: string;
+
+  @property({ type: Boolean }) public ownInstance = false;
+
+  @property() public localize!: LocalizeFunc;
+
+  @state() private _error?: string;
+
+  @state() private _step?: DataEntryFlowStep;
+
+  @state() private _submitting = false;
+
+  @state() private _persons?: Promise<Record<string, string>>;
+
+  @state() private _selectedUser?: string;
+
+  @state() private _unmaskedPassword = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!this.hasUpdated) {
+      this._load();
+    }
+  }
+
+  protected render() {
+    if (!this.authProvider?.users || !this._persons) {
+      return nothing;
+    }
+    const userIds = Object.keys(this.authProvider.users);
+    return html`
+      <style>
+        .content {
+          max-width: 560px;
+        }
+        .persons {
+          margin-top: 24px;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 16px;
+          justify-content: center;
+        }
+        .persons.force-small {
+          max-width: 350px;
+        }
+        .person {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          flex-shrink: 0;
+          text-align: center;
+          cursor: pointer;
+          width: 80px;
+        }
+        .person[role="button"] {
+          outline: none;
+          padding: 8px;
+          border-radius: 4px;
+        }
+        .person[role="button"]:focus-visible {
+          background: rgba(var(--rgb-primary-color), 0.1);
+        }
+        .person p {
+          margin-bottom: 0;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          width: 100%;
+        }
+        ha-person-badge {
+          width: 80px;
+          height: 80px;
+          --person-badge-font-size: 2em;
+        }
+        form {
+          width: 100%;
+        }
+        ha-auth-textfield {
+          display: block !important;
+          position: relative;
+        }
+        ha-auth-textfield ha-icon-button {
+          position: absolute;
+          top: 4px;
+          right: 4px;
+          z-index: 9;
+        }
+        .login-form {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+          max-width: 336px;
+          margin-top: 24px;
+        }
+        .login-form .person {
+          cursor: default;
+          width: auto;
+        }
+        .login-form .person p {
+          font-size: 28px;
+          margin-top: 24px;
+          margin-bottom: 32px;
+          line-height: normal;
+        }
+        .login-form ha-person-badge {
+          width: 120px;
+          height: 120px;
+          --person-badge-font-size: 3em;
+        }
+        .action {
+          margin: 16px 0 8px;
+          display: flex;
+          width: 100%;
+          max-width: 336px;
+          justify-content: center;
+        }
+        .space-between {
+          justify-content: space-between;
+        }
+        ha-list-item {
+          margin-top: 16px;
+        }
+        ha-button {
+          --mdc-typography-button-text-transform: none;
+        }
+        a.forgot-password {
+          color: var(--primary-color);
+          text-decoration: none;
+          font-size: 0.875rem;
+        }
+        button {
+          color: var(--primary-color);
+          background: none;
+          border: none;
+          padding: 8px;
+          font: inherit;
+          font-size: 0.875rem;
+          text-align: left;
+          cursor: pointer;
+          outline: none;
+          border-radius: 4px;
+        }
+        button:focus-visible {
+          background: rgba(var(--rgb-primary-color), 0.1);
+        }
+      </style>
+      ${this._error
+        ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+        : ""}
+      ${this._step
+        ? html`<ha-auth-flow
+            .clientId=${this.clientId}
+            .redirectUri=${this.redirectUri}
+            .oauth2State=${this.oauth2State}
+            .step=${this._step}
+            storeToken
+            .localize=${this.localize}
+          ></ha-auth-flow>`
+        : this._selectedUser
+          ? html`<div class="login-form"><div class="person">
+              <ha-person-badge
+                .person=${this._persons![this._selectedUser]}
+              ></ha-person-badge>
+              <p>${this._persons![this._selectedUser].name}</p>
+            </div>
+            <form>
+              <input
+                type="hidden"
+                name="username"
+                autocomplete="username"
+                .value=${this.authProvider.users[this._selectedUser]}
+              />
+              <ha-auth-textfield
+              .type=${this._unmaskedPassword ? "text" : "password"}
+                id="password"
+                name="password"
+        .label=${this.localize(
+          "ui.panel.page-authorize.form.providers.homeassistant.step.init.data.password"
+        )}
+        required
+        autoValidate
+        autocomplete
+        iconTrailing
+        validationMessage="Required"
+              >
+              <ha-icon-button
+        toggles
+        .label=${
+          this.localize(
+            this._unmaskedPassword
+              ? "ui.panel.page-authorize.form.hide_password"
+              : "ui.panel.page-authorize.form.show_password"
+          ) || (this._unmaskedPassword ? "Hide password" : "Show password")
+        }
+        @click=${this._toggleUnmaskedPassword}
+        .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
+      ></ha-icon-button>
+    </ha-auth-textfield>
+      </div>
+              <div class="action space-between">
+              <mwc-button
+                  @click=${this._restart}
+                  .disabled=${this._submitting}
+                >
+                  ${this.localize("ui.panel.page-authorize.form.previous")}
+                </mwc-button>
+              <mwc-button
+                  raised
+                  @click=${this._handleSubmit}
+                  .disabled=${this._submitting}
+                >
+                  ${this.localize("ui.panel.page-authorize.form.next")}
+                </mwc-button>
+              </div>
+              <div class="action">
+              <a class="forgot-password"
+                  href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  >${this.localize(
+                    "ui.panel.page-authorize.forgot_password"
+                  )}</a
+                >
+                </div>
+            </form>`
+          : html`<h1>
+                ${this.localize("ui.panel.page-authorize.welcome_home")}
+              </h1>
+              ${this.localize("ui.panel.page-authorize.who_is_logging_in")}
+              <div
+                class="persons ${userIds.length < 10 && userIds.length % 4 === 1
+                  ? "force-small"
+                  : ""}"
+              >
+                ${userIds.map((userId) => {
+                  const person = this._persons![userId];
+                  return html`<div
+                    class="person"
+                    .userId=${userId}
+                    @click=${this._personSelected}
+                    @keyup=${this._handleKeyUp}
+                    role="button"
+                    tabindex="0"
+                  >
+                    <ha-person-badge .person=${person}></ha-person-badge>
+                    <p>${person.name}</p>
+                  </div>`;
+                })}
+              </div>
+              <div class="action">
+                <button @click=${this._otherLogin} tabindex="0">
+                  ${this.localize("ui.panel.page-authorize.other_options")}
+                </button>
+              </div>`}
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    this.addEventListener("keypress", (ev) => {
+      if (ev.key === "Enter") {
+        this._handleSubmit(ev);
+      }
+    });
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("_selectedUser") && this._selectedUser) {
+      const passwordElement = this.renderRoot.querySelector(
+        "#password"
+      ) as HaAuthTextField;
+      passwordElement.updateComplete.then(() => {
+        passwordElement.focus();
+      });
+    }
+  }
+
+  private async _load() {
+    this._persons = await (await listPersons()).json();
+  }
+
+  private _restart() {
+    this._selectedUser = undefined;
+    this._error = undefined;
+  }
+
+  private _toggleUnmaskedPassword() {
+    this._unmaskedPassword = !this._unmaskedPassword;
+  }
+
+  private _handleKeyUp(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      this._personSelected(ev);
+    }
+  }
+
+  private async _personSelected(ev) {
+    const userId = ev.currentTarget.userId;
+    if (
+      this.ownInstance &&
+      this.authProviders?.find((prv) => prv.type === "trusted_networks")
+    ) {
+      try {
+        const flowResponse = await createLoginFlow(
+          this.clientId,
+          this.redirectUri,
+          ["trusted_networks", null]
+        );
+
+        const data = await flowResponse.json();
+
+        if (data.type === "create_entry") {
+          redirectWithAuthCode(
+            this.redirectUri!,
+            data.result,
+            this.oauth2State
+          );
+          return;
+        }
+
+        try {
+          if (!data.data_schema[0].options.find((opt) => opt[0] === userId)) {
+            throw new Error("User not available");
+          }
+
+          const postData = { user: userId, client_id: this.clientId };
+
+          const response = await submitLoginFlow(data.flow_id, postData);
+
+          if (response.ok) {
+            const result = await response.json();
+
+            if (result.type === "create_entry") {
+              redirectWithAuthCode(
+                this.redirectUri!,
+                result.result,
+                this.oauth2State
+              );
+              return;
+            }
+          } else {
+            throw new Error("Invalid response");
+          }
+        } catch {
+          deleteLoginFlow(data.flow_id).catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error("Error delete obsoleted auth flow", err);
+          });
+        }
+      } catch {
+        // Ignore
+      }
+    }
+    this._selectedUser = userId;
+  }
+
+  private async _handleSubmit(ev: Event) {
+    ev.preventDefault();
+
+    if (!this.authProvider?.users || !this._selectedUser) {
+      return;
+    }
+
+    this._error = undefined;
+    this._submitting = true;
+
+    const flowResponse = await createLoginFlow(
+      this.clientId,
+      this.redirectUri,
+      ["homeassistant", null]
+    );
+
+    const data = await flowResponse.json();
+
+    const postData = {
+      username: this.authProvider.users[this._selectedUser],
+      password: (this.renderRoot.querySelector("#password") as HaAuthTextField)
+        .value,
+      client_id: this.clientId,
+    };
+
+    try {
+      const response = await submitLoginFlow(data.flow_id, postData);
+
+      const newStep = await response.json();
+
+      if (response.status === 403) {
+        this._error = newStep.message;
+        return;
+      }
+
+      if (newStep.type === "create_entry") {
+        redirectWithAuthCode(
+          this.redirectUri!,
+          newStep.result,
+          this.oauth2State
+        );
+        return;
+      }
+
+      if (newStep.errors.base) {
+        this._error = this.localize(
+          `ui.panel.page-authorize.form.providers.homeassistant.error.${newStep.errors.base}`
+        );
+        throw new Error(this._error);
+      }
+
+      this._step = newStep;
+    } catch {
+      deleteLoginFlow(data.flow_id).catch((err) => {
+        // eslint-disable-next-line no-console
+        console.error("Error delete obsoleted auth flow", err);
+      });
+      if (!this._error) {
+        this._error = this.localize(
+          "ui.panel.page-authorize.form.unknown_error"
+        );
+      }
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  private _otherLogin() {
+    fireEvent(this, "default-login-flow");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-local-auth-flow": HaLocalAuthFlow;
+  }
+  interface HASSDomEvents {
+    "default-login-flow": undefined;
+  }
+}

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

@@ -21,7 +21,11 @@ export class HaPickAuthProvider extends LitElement {
 
   protected render() {
     return html`
-      <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
+      <h3>
+        <span
+          >${this.localize("ui.panel.page-authorize.pick_auth_provider")}</span
+        >
+      </h3>
       <mwc-list>
         ${this.authProviders.map(
           (provider) => html`
@@ -35,8 +39,8 @@ export class HaPickAuthProvider extends LitElement {
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
-        )}</mwc-list
+        )}
-      >
+      </mwc-list>
     `;
   }
 
@@ -45,12 +49,34 @@ export class HaPickAuthProvider extends LitElement {
   }
 
   static styles = css`
-    p {
+    h3 {
-      margin-top: 0;
+      margin: 0 -16px;
+      position: relative;
+      z-index: 1;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+    h3:before {
+      border-top: 1px solid var(--divider-color);
+      content: "";
+      margin: 0 auto;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      z-index: -1;
+    }
+    h3 span {
+      background: var(--card-background-color);
+      padding: 0 15px;
     }
     mwc-list {
-      margin: 0 -16px;
+      margin: 16px -16px 0;
-      --mdc-list-side-padding: 16px;
+      --mdc-list-side-padding: 24px;
     }
   `;
 }

src/common/color/convert-light-color.ts

@@ -58,10 +58,10 @@ const matchMaxScale = (
   return outputColors.map((value) => Math.round(value * factor));
 };
 
-const mired2kelvin = (miredTemperature: number) =>
+export const mired2kelvin = (miredTemperature: number) =>
   Math.floor(1000000 / miredTemperature);
 
-const kelvin2mired = (kelvintTemperature: number) =>
+export const kelvin2mired = (kelvintTemperature: number) =>
   Math.floor(1000000 / kelvintTemperature);
 
 export const rgbww2rgb = (

src/common/config/can_show_page.ts

@@ -10,10 +10,10 @@ const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
   page.component
     ? isComponentLoaded(hass, page.component)
     : page.components
-    ? page.components.some((integration) =>
+      ? page.components.some((integration) =>
-        isComponentLoaded(hass, integration)
+          isComponentLoaded(hass, integration)
-      )
+        )
-    : true;
+      : true;
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;

src/common/const.ts

@@ -203,6 +203,7 @@ export const DOMAINS_WITH_CARD = [
   "select",
   "timer",
   "text",
+  "update",
   "vacuum",
   "water_heater",
 ];

src/common/dom/dynamic_content_updater.ts

@@ -1,33 +0,0 @@
-/**
- * Update root's child element to be newElementTag replacing another existing child if any.
- * Copy attributes into the child element.
- */
-export default function dynamicContentUpdater(root, newElementTag, attributes) {
-  const rootEl = root;
-  let customEl;
-
-  if (rootEl.lastChild && rootEl.lastChild.tagName === newElementTag) {
-    customEl = rootEl.lastChild;
-  } else {
-    if (rootEl.lastChild) {
-      rootEl.removeChild(rootEl.lastChild);
-    }
-    // Creating an element with upper case works fine in Chrome, but in FF it doesn't immediately
-    // become a defined Custom Element. Polymer does that in some later pass.
-    customEl = document.createElement(newElementTag.toLowerCase());
-  }
-
-  if (customEl.setProperties) {
-    customEl.setProperties(attributes);
-  } else {
-    // If custom element definition wasn't loaded yet - setProperties would be
-    // missing, but no harm in setting attributes one-by-one then.
-    Object.keys(attributes).forEach((key) => {
-      customEl[key] = attributes[key];
-    });
-  }
-
-  if (customEl.parentNode === null) {
-    rootEl.appendChild(customEl);
-  }
-}

src/common/dom/get_main_window.ts

@@ -4,5 +4,5 @@ export const mainWindow =
   window.name === MAIN_WINDOW_NAME
     ? window
     : parent.name === MAIN_WINDOW_NAME
-    ? parent
+      ? parent
-    : top!;
+      : top!;

src/common/entity/compute_attribute_display.ts

@@ -18,6 +18,7 @@ import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 import { computeStateDomain } from "./compute_state_domain";
+import { blankBeforeUnit } from "../translations/blank_before_unit";
 
 export const computeAttributeValueDisplay = (
   localize: LocalizeFunc,
@@ -55,20 +56,12 @@ export const computeAttributeValueDisplay = (
       unit = getWeatherUnit(config, stateObj as WeatherEntity, attribute);
     }
 
-    if (unit === "%") {
+    if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
-      return `${formattedValue}${blankBeforePercent(locale)}${unit}`;
+      unit = config.unit_system.temperature;
-    }
-
-    if (unit === "°") {
-      return `${formattedValue}${unit}`;
     }
 
     if (unit) {
-      return `${formattedValue} ${unit}`;
+      return `${formattedValue}${blankBeforeUnit(unit, locale)}${unit}`;
-    }
-
-    if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
-      return `${formattedValue} ${config.unit_system.temperature}`;
     }
 
     return formattedValue;

src/common/entity/compute_state_display.ts

@@ -2,14 +2,10 @@ import { HassConfig, HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
 import { FrontendLocaleData, TimeZone } from "../../data/translation";
-import {
-  updateIsInstallingFromAttributes,
-  UPDATE_SUPPORT_PROGRESS,
-} from "../../data/update";
 import { HomeAssistant } from "../../types";
 import {
-  formatDuration,
   UNIT_TO_MILLISECOND_CONVERT,
+  formatDuration,
 } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
@@ -19,10 +15,9 @@ import {
   getNumberFormatOptions,
   isNumericFromAttributes,
 } from "../number/format_number";
-import { blankBeforePercent } from "../translations/blank_before_percent";
+import { blankBeforeUnit } from "../translations/blank_before_unit";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
-import { supportsFeatureFromAttributes } from "./supports-feature";
 
 export const computeStateDisplaySingleEntity = (
   localize: LocalizeFunc,
@@ -108,16 +103,20 @@ export const computeStateDisplayFromEntityAttributes = (
         // fallback to default
       }
     }
-    const unit = !attributes.unit_of_measurement
+
-      ? ""
+    const value = formatNumber(
-      : attributes.unit_of_measurement === "%"
-      ? blankBeforePercent(locale) + "%"
-      : ` ${attributes.unit_of_measurement}`;
-    return `${formatNumber(
       state,
       locale,
       getNumberFormatOptions({ state, attributes } as HassEntity, entity)
-    )}${unit}`;
+    );
+
+    const unit = attributes.unit_of_measurement;
+
+    if (unit) {
+      return `${value}${blankBeforeUnit(unit)}${unit}`;
+    }
+
+    return value;
   }
 
   const domain = computeDomain(entityId);
@@ -204,27 +203,6 @@ export const computeStateDisplayFromEntityAttributes = (
     }
   }
 
-  if (domain === "update") {
-    // When updating, and entity does not support % show "Installing"
-    // When updating, and entity does support % show "Installing (xx%)"
-    // When update available, show the version
-    // When the latest version is skipped, show the latest version
-    // When update is not available, show "Up-to-date"
-    // When update is not available and there is no latest_version show "Unavailable"
-    return state === "on"
-      ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS) &&
-          typeof attributes.in_progress === "number"
-          ? localize("ui.card.update.installing_with_progress", {
-              progress: attributes.in_progress,
-            })
-          : localize("ui.card.update.installing")
-        : attributes.latest_version
-      : attributes.skipped_version === attributes.latest_version
-      ? attributes.latest_version ?? localize("state.default.unavailable")
-      : localize("ui.card.update.up_to_date");
-  }
-
   return (
     (entity?.translation_key &&
       localize(

src/common/entity/domain_icon.ts

@@ -100,8 +100,8 @@ export const domainIconWithoutDefault = (
       return compareState === "unavailable"
         ? mdiRobotConfused
         : compareState === "off"
-        ? mdiRobotOff
+          ? mdiRobotOff
-        : mdiRobot;
+          : mdiRobot;
 
     case "binary_sensor":
       return binarySensorIcon(compareState, stateObj);

src/common/translations/blank_before_unit.ts

@@ -0,0 +1,15 @@
+import { FrontendLocaleData } from "../../data/translation";
+import { blankBeforePercent } from "./blank_before_percent";
+
+export const blankBeforeUnit = (
+  unit: string,
+  localeOptions?: FrontendLocaleData
+): string => {
+  if (unit === "°") {
+    return "";
+  }
+  if (localeOptions && unit === "%") {
+    return blankBeforePercent(localeOptions);
+  }
+  return " ";
+};

src/common/translations/localize.ts

@@ -1,4 +1,5 @@
 import IntlMessageFormat from "intl-messageformat";
+import type { HTMLTemplateResult } from "lit";
 import { polyfillLocaleData } from "../../resources/locale-data-polyfill";
 import { Resources, TranslationDict } from "../../types";
 
@@ -40,9 +41,13 @@ export type FlattenObjectKeys<
     : `${Key}`
   : never;
 
+// Later, don't return string when HTML is passed, and don't allow undefined
 export type LocalizeFunc<Keys extends string = LocalizeKeys> = (
   key: Keys,
-  ...args: any[]
+  values?: Record<
+    string,
+    string | number | HTMLTemplateResult | null | undefined
+  >
 ) => string;
 
 interface FormatType {
@@ -124,6 +129,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
       argObject = args[0];
     } else {
       for (let i = 0; i < args.length; i += 2) {
+        // @ts-expect-error in some places the old format (key, value, key, value) is used
         argObject[args[i]] = args[i + 1];
       }
     }

src/components/buttons/ha-progress-button.ts

@@ -40,15 +40,15 @@ export class HaProgressButton extends LitElement {
               ${this._result === "success"
                 ? html`<ha-svg-icon .path=${mdiCheckBold}></ha-svg-icon>`
                 : this._result === "error"
-                ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
+                  ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
-                : this.progress
+                  : this.progress
-                ? html`
+                    ? html`
-                    <ha-circular-progress
+                        <ha-circular-progress
-                      size="small"
+                          size="small"
-                      active
+                          active
-                    ></ha-circular-progress>
+                        ></ha-circular-progress>
-                  `
+                      `
-                : ""}
+                    : ""}
             </div>
           `}
     `;

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

@@ -45,10 +45,14 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ type: Number }) public chartIndex?;
 
+  @property({ type: Boolean }) public logarithmicScale = false;
+
   @state() private _chartData?: ChartData<"line">;
 
   @state() private _entityIds: string[] = [];
 
+  private _datasetToDataIndex: number[] = [];
+
   @state() private _chartOptions?: ChartOptions;
 
   @state() private _yWidth = 0;
@@ -78,7 +82,9 @@ export class StateHistoryChartLine extends LitElement {
       !this.hasUpdated ||
       changedProps.has("showNames") ||
       changedProps.has("startTime") ||
-      changedProps.has("endTime")
+      changedProps.has("endTime") ||
+      changedProps.has("unit") ||
+      changedProps.has("logarithmicScale")
     ) {
       this._chartOptions = {
         parsing: false,
@@ -132,20 +138,38 @@ export class StateHistoryChartLine extends LitElement {
               }
             },
             position: computeRTL(this.hass) ? "right" : "left",
+            type: this.logarithmicScale ? "logarithmic" : "linear",
           },
         },
         plugins: {
           tooltip: {
             callbacks: {
-              label: (context) =>
+              label: (context) => {
-                `${context.dataset.label}: ${formatNumber(
+                let label = `${context.dataset.label}: ${formatNumber(
                   context.parsed.y,
                   this.hass.locale,
                   getNumberFormatOptions(
                     undefined,
                     this.hass.entities[this._entityIds[context.datasetIndex]]
                   )
-                )} ${this.unit}`,
+                )} ${this.unit}`;
+                const dataIndex =
+                  this._datasetToDataIndex[context.datasetIndex];
+                const data = this.data[dataIndex];
+                if (data.statistics && data.statistics.length > 0) {
+                  const source =
+                    data.states.length === 0 ||
+                    context.parsed.x < data.states[0].last_changed
+                      ? `\n${this.hass.localize(
+                          "ui.components.history_charts.source_stats"
+                        )}`
+                      : `\n${this.hass.localize(
+                          "ui.components.history_charts.source_history"
+                        )}`;
+                  label += source;
+                }
+                return label;
+              },
             },
           },
           filler: {
@@ -167,6 +191,19 @@ export class StateHistoryChartLine extends LitElement {
             hitRadius: 50,
           },
         },
+        segment: {
+          borderColor: (context) => {
+            // render stat data with a slightly transparent line
+            const dataIndex = this._datasetToDataIndex[context.datasetIndex];
+            const data = this.data[dataIndex];
+            return data.statistics &&
+              data.statistics.length > 0 &&
+              (data.states.length === 0 ||
+                context.p0.parsed.x < data.states[0].last_changed)
+              ? this._chartData!.datasets[dataIndex].borderColor + "7F"
+              : undefined;
+          },
+        },
         // @ts-expect-error
         locale: numberFormatToLocale(this.hass.locale),
         onClick: (e: any) => {
@@ -212,6 +249,7 @@ export class StateHistoryChartLine extends LitElement {
     const entityStates = this.data;
     const datasets: ChartDataset<"line">[] = [];
     const entityIds: string[] = [];
+    const datasetToDataIndex: number[] = [];
     if (entityStates.length === 0) {
       return;
     }
@@ -219,7 +257,7 @@ export class StateHistoryChartLine extends LitElement {
     this._chartTime = new Date();
     const endTime = this.endTime;
     const names = this.names || {};
-    entityStates.forEach((states) => {
+    entityStates.forEach((states, dataIdx) => {
       const domain = states.domain;
       const name = names[states.entity_id] || states.name;
       // array containing [value1, value2, etc]
@@ -264,6 +302,7 @@ export class StateHistoryChartLine extends LitElement {
           data: [],
         });
         entityIds.push(states.entity_id);
+        datasetToDataIndex.push(dataIdx);
       };
 
       if (
@@ -470,7 +509,7 @@ export class StateHistoryChartLine extends LitElement {
 
         // Process chart data.
         // When state is `unknown`, calculate the value and break the line.
-        states.states.forEach((entityState) => {
+        const processData = (entityState: LineChartState) => {
           const value = safeParseFloat(entityState.state);
           const date = new Date(entityState.last_changed);
           if (value !== null && lastNullDate) {
@@ -499,6 +538,22 @@ export class StateHistoryChartLine extends LitElement {
           ) {
             lastNullDate = date;
           }
+        };
+
+        if (states.statistics) {
+          const stopTime =
+            !states.states || states.states.length === 0
+              ? 0
+              : states.states[0].last_changed;
+          for (let i = 0; i < states.statistics.length; i++) {
+            if (stopTime && states.statistics[i].last_changed >= stopTime) {
+              break;
+            }
+            processData(states.statistics[i]);
+          }
+        }
+        states.states.forEach((entityState) => {
+          processData(entityState);
         });
         if (lastNullDate !== null) {
           pushData(lastNullDate, [null]);
@@ -516,6 +571,7 @@ export class StateHistoryChartLine extends LitElement {
       datasets,
     };
     this._entityIds = entityIds;
+    this._datasetToDataIndex = datasetToDataIndex;
   }
 }
 customElements.define("state-history-chart-line", StateHistoryChartLine);

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

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

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

@@ -73,6 +73,8 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
+  @property({ type: Boolean }) public logarithmicScale = false;
+
   private _computedStartTime!: Date;
 
   private _computedEndTime!: Date;
@@ -159,6 +161,7 @@ export class StateHistoryCharts extends LitElement {
           .names=${this.names}
           .chartIndex=${index}
           .clickForMoreInfo=${this.clickForMoreInfo}
+          .logarithmicScale=${this.logarithmicScale}
           @y-width-changed=${this._yWidthChanged}
         ></state-history-chart-line>
       </div> `;

src/components/chart/statistics-chart.ts

@@ -71,6 +71,8 @@ export class StatisticsChart extends LitElement {
 
   @property({ type: Boolean }) public hideLegend = false;
 
+  @property({ type: Boolean }) public logarithmicScale = false;
+
   @property({ type: Boolean }) public isLoadingData = false;
 
   @property() public period?: string;
@@ -98,7 +100,8 @@ export class StatisticsChart extends LitElement {
       !this.hasUpdated ||
       changedProps.has("unit") ||
       changedProps.has("period") ||
-      changedProps.has("chartType")
+      changedProps.has("chartType") ||
+      changedProps.has("logarithmicScale")
     ) {
       this._createOptions();
     }
@@ -198,6 +201,7 @@ export class StatisticsChart extends LitElement {
             display: unit || this.unit,
             text: unit || this.unit,
           },
+          type: this.logarithmicScale ? "logarithmic" : "linear",
         },
       },
       plugins: {
@@ -396,8 +400,8 @@ export class StatisticsChart extends LitElement {
               ? type === "min" && hasMean
                 ? "+1"
                 : type === "max"
-                ? "-1"
+                  ? "-1"
-                : false
+                  : false
               : false,
             borderColor:
               band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color,

src/components/chart/timeline-chart/textbar-element.ts

@@ -40,8 +40,8 @@ export class TextBarElement extends BarElement {
       (options?.backgroundColor === "transparent"
         ? "transparent"
         : luminosity(hex2rgb(options.backgroundColor)) > 0.5
-        ? "#000"
+          ? "#000"
-        : "#fff");
+          : "#fff");
 
     // ctx.font = "12px arial";
     ctx.fillStyle = textColor;

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

@@ -0,0 +1,54 @@
+import "element-internals-polyfill";
+import { MdAssistChip } from "@material/web/chips/assist-chip";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-assist-chip")
+export class HaAssistChip extends MdAssistChip {
+  @property({ type: Boolean, reflect: true }) filled = false;
+
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-assist-chip-container-shape: 16px;
+        --md-assist-chip-outline-color: var(--outline-color);
+        --md-assist-chip-label-text-weight: 400;
+        --ha-assist-chip-filled-container-color: rgba(
+          var(--rgb-primary-text-color),
+          0.15
+        );
+      }
+      /** Material 3 doesn't have a filled chip, so we have to make our own **/
+      .filled {
+        display: flex;
+        pointer-events: none;
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        background-color: var(--ha-assist-chip-filled-container-color);
+      }
+      /** Set the size of mdc icons **/
+      ::slotted([slot="icon"]) {
+        display: flex;
+        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+      }
+    `,
+  ];
+
+  protected override renderOutline() {
+    if (this.filled) {
+      return html`<span class="filled"></span>`;
+    }
+
+    return super.renderOutline();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-assist-chip": HaAssistChip;
+  }
+}

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

@@ -0,0 +1,12 @@
+import "element-internals-polyfill";
+import { MdChipSet } from "@material/web/chips/chip-set";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-chip-set")
+export class HaChipSet extends MdChipSet {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-chip-set": HaChipSet;
+  }
+}

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

@@ -0,0 +1,42 @@
+import "element-internals-polyfill";
+import { MdFilterChip } from "@material/web/chips/filter-chip";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-filter-chip")
+export class HaFilterChip extends MdFilterChip {
+  @property({ type: Boolean, reflect: true, attribute: "no-leading-icon" })
+  noLeadingIcon = false;
+
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
+        --md-filter-chip-container-shape: 16px;
+        --md-filter-chip-outline-color: var(--outline-color);
+        --md-filter-chip-selected-container-color: rgba(
+          var(--rgb-primary-text-color),
+          0.15
+        );
+      }
+    `,
+  ];
+
+  protected renderLeadingIcon() {
+    if (this.noLeadingIcon) {
+      // eslint-disable-next-line lit/prefer-nothing
+      return html``;
+    }
+    return super.renderLeadingIcon();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-chip": HaFilterChip;
+  }
+}

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

@@ -0,0 +1,36 @@
+import "element-internals-polyfill";
+import { MdInputChip } from "@material/web/chips/input-chip";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-input-chip")
+export class HaInputChip extends MdInputChip {
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
+        --md-input-chip-container-shape: 16px;
+        --md-input-chip-outline-color: var(--outline-color);
+        --md-input-chip-selected-container-color: rgba(
+          var(--rgb-primary-text-color),
+          0.15
+        );
+      }
+      /** Set the size of mdc icons **/
+      ::slotted([slot="icon"]) {
+        display: flex;
+        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-input-chip": HaInputChip;
+  }
+}

src/components/data-table/sort-filter-worker.ts

@@ -1,6 +1,4 @@
-// To use comlink under ES5
 import { expose } from "comlink";
-import "proxy-polyfill";
 import { stringCompare } from "../../common/string/compare";
 import type {
   ClonedDataTableColumnData,

src/components/device/ha-area-devices-picker.ts

@@ -1,325 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { stringCompare } from "../../common/string/compare";
-import {
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../../data/area_registry";
-import {
-  DeviceEntityLookup,
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-import { ValueChangedEvent, HomeAssistant } from "../../types";
-import "../ha-icon-button";
-import "../ha-svg-icon";
-import "./ha-devices-picker";
-
-interface DevicesByArea {
-  [areaId: string]: AreaDevices;
-}
-
-interface AreaDevices {
-  id?: string;
-  name: string;
-  devices: string[];
-}
-
-const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) =>
-  html`<mwc-list-item twoline>
-    <span>${item.name}</span>
-    <span slot="secondary">${item.devices.length} devices</span>
-  </mwc-list-item>`;
-
-@customElement("ha-area-devices-picker")
-export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value?: string;
-
-  @property() public area?: string;
-
-  @property() public devices?: string[];
-
-  /**
-   * Show only devices with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show no devices with entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  /**
-   * Show only deviced with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @state() private _areaPicker = true;
-
-  @state() private _devices?: DeviceRegistryEntry[];
-
-  @state() private _areas?: AreaRegistryEntry[];
-
-  @state() private _entities?: EntityRegistryEntry[];
-
-  private _selectedDevices: string[] = [];
-
-  private _filteredDevices: DeviceRegistryEntry[] = [];
-
-  private _getAreasWithDevices = memoizeOne(
-    (
-      devices: DeviceRegistryEntry[],
-      areas: AreaRegistryEntry[],
-      entities: EntityRegistryEntry[],
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"]
-    ): AreaDevices[] => {
-      if (!devices.length) {
-        return [];
-      }
-
-      const deviceEntityLookup: DeviceEntityLookup = {};
-      for (const entity of entities) {
-        if (!entity.device_id) {
-          continue;
-        }
-        if (!(entity.device_id in deviceEntityLookup)) {
-          deviceEntityLookup[entity.device_id] = [];
-        }
-        deviceEntityLookup[entity.device_id].push(entity);
-      }
-
-      let inputDevices = [...devices];
-
-      if (includeDomains) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return deviceEntityLookup[device.id].some((entity) =>
-            includeDomains.includes(computeDomain(entity.entity_id))
-          );
-        });
-      }
-
-      if (excludeDomains) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return true;
-          }
-          return entities.every(
-            (entity) =>
-              !excludeDomains.includes(computeDomain(entity.entity_id))
-          );
-        });
-      }
-
-      if (includeDeviceClasses) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return deviceEntityLookup[device.id].some((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            if (!stateObj) {
-              return false;
-            }
-            return (
-              stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class)
-            );
-          });
-        });
-      }
-
-      this._filteredDevices = inputDevices;
-
-      const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
-      for (const area of areas) {
-        areaLookup[area.area_id] = area;
-      }
-
-      const devicesByArea: DevicesByArea = {};
-
-      for (const device of inputDevices) {
-        const areaId = device.area_id;
-        if (areaId) {
-          if (!(areaId in devicesByArea)) {
-            devicesByArea[areaId] = {
-              id: areaId,
-              name: areaLookup[areaId].name,
-              devices: [],
-            };
-          }
-          devicesByArea[areaId].devices.push(device.id);
-        }
-      }
-
-      const sorted = Object.keys(devicesByArea)
-        .sort((a, b) =>
-          stringCompare(
-            devicesByArea[a].name || "",
-            devicesByArea[b].name || "",
-            this.hass.locale.language
-          )
-        )
-        .map((key) => devicesByArea[key]);
-
-      return sorted;
-    }
-  );
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this._areas = areas;
-      }),
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities;
-      }),
-    ];
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.has("area") && this.area) {
-      this._areaPicker = true;
-      this.value = this.area;
-    } else if (changedProps.has("devices") && this.devices) {
-      this._areaPicker = false;
-      const filteredDeviceIds = this._filteredDevices.map(
-        (device) => device.id
-      );
-      const selectedDevices = this.devices.filter((device) =>
-        filteredDeviceIds.includes(device)
-      );
-      this._setValue(selectedDevices);
-    }
-  }
-
-  protected render() {
-    if (!this._devices || !this._areas || !this._entities) {
-      return nothing;
-    }
-    const areas = this._getAreasWithDevices(
-      this._devices,
-      this._areas,
-      this._entities,
-      this.includeDomains,
-      this.excludeDomains,
-      this.includeDeviceClasses
-    );
-    if (!this._areaPicker || areas.length === 0) {
-      return html`
-        <ha-devices-picker
-          @value-changed=${this._devicesPicked}
-          .hass=${this.hass}
-          .includeDomains=${this.includeDomains}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .value=${this._selectedDevices}
-          .pickDeviceLabel=${`Add ${this.label} device`}
-          .pickedDeviceLabel=${`${this.label} device`}
-        ></ha-devices-picker>
-        ${areas.length > 0
-          ? html`
-              <mwc-button @click=${this._switchPicker}
-                >Choose an area</mwc-button
-              >
-            `
-          : ""}
-      `;
-    }
-    return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        item-value-path="id"
-        item-id-path="id"
-        item-label-path="name"
-        .items=${areas}
-        .value=${this._value}
-        .renderer=${rowRenderer}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.device-picker.device")
-          : `${this.label} in area`}
-        @value-changed=${this._areaPicked}
-      >
-      </ha-combo-box>
-      <mwc-button @click=${this._switchPicker}>
-        Choose individual devices
-      </mwc-button>
-    `;
-  }
-
-  private get _value() {
-    return this.value || [];
-  }
-
-  private async _switchPicker() {
-    this._areaPicker = !this._areaPicker;
-  }
-
-  private async _areaPicked(ev: ValueChangedEvent<string>) {
-    const value = ev.detail.value;
-    let selectedDevices = [];
-    const target = ev.target as any;
-    if (target.selectedItem) {
-      selectedDevices = target.selectedItem.devices;
-    }
-
-    if (value !== this._value || this._selectedDevices !== selectedDevices) {
-      this._setValue(selectedDevices, value);
-    }
-  }
-
-  private _devicesPicked(ev: CustomEvent) {
-    ev.stopPropagation();
-    const selectedDevices = ev.detail.value;
-    this._setValue(selectedDevices);
-  }
-
-  private _setValue(selectedDevices: string[], value = "") {
-    this.value = value;
-    this._selectedDevices = selectedDevices;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value: selectedDevices });
-      fireEvent(this, "change");
-    }, 0);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-area-devices-picker": HaAreaDevicesPicker;
-  }
-}

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

@@ -1,35 +1,27 @@
-import "@material/mwc-list/mwc-list-item";
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { HassEntity } from "home-assistant-js-websocket";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { stringCompare } from "../../common/string/compare";
 import {
-  AreaRegistryEntry,
+  ScorableTextItem,
-  subscribeAreaRegistry,
+  fuzzyFilterSort,
-} from "../../data/area_registry";
+} from "../../common/string/filter/sequence-matching";
+import { AreaRegistryEntry } from "../../data/area_registry";
 import {
-  computeDeviceName,
+  DeviceEntityDisplayLookup,
-  DeviceEntityLookup,
   DeviceRegistryEntry,
-  getDeviceEntityLookup,
+  computeDeviceName,
-  subscribeDeviceRegistry,
+  getDeviceEntityDisplayLookup,
 } from "../../data/device_registry";
-import {
+import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
-  EntityRegistryEntry,
+import { HomeAssistant, ValueChangedEvent } from "../../types";
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-import { ValueChangedEvent, HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
-import {
+import "../ha-list-item";
-  fuzzyFilterSort,
-  ScorableTextItem,
-} from "../../common/string/filter/sequence-matching";
 
 interface Device {
   name: string;
@@ -46,13 +38,13 @@ export type HaDevicePickerDeviceFilterFunc = (
 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
 const rowRenderer: ComboBoxLitRenderer<Device> = (item) =>
-  html`<mwc-list-item .twoline=${!!item.area}>
+  html`<ha-list-item .twoline=${!!item.area}>
     <span>${item.name}</span>
     <span slot="secondary">${item.area}</span>
-  </mwc-list-item>`;
+  </ha-list-item>`;
 
 @customElement("ha-device-picker")
-export class HaDevicePicker extends SubscribeMixin(LitElement) {
+export class HaDevicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
@@ -61,12 +53,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
-  @property() public devices?: DeviceRegistryEntry[];
-
-  @property() public areas?: AreaRegistryEntry[];
-
-  @property() public entities?: EntityRegistryEntry[];
-
   /**
    * Show only devices with entities from specific domains.
    * @type {Array}
@@ -117,7 +103,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     (
       devices: DeviceRegistryEntry[],
       areas: AreaRegistryEntry[],
-      entities: EntityRegistryEntry[],
+      entities: EntityRegistryDisplayEntry[],
       includeDomains: this["includeDomains"],
       excludeDomains: this["excludeDomains"],
       includeDeviceClasses: this["includeDeviceClasses"],
@@ -136,7 +122,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         ];
       }
 
-      let deviceEntityLookup: DeviceEntityLookup = {};
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
 
       if (
         includeDomains ||
@@ -144,13 +130,10 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         includeDeviceClasses ||
         entityFilter
       ) {
-        deviceEntityLookup = getDeviceEntityLookup(entities);
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
       }
 
-      const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
+      const areaLookup = areas;
-      for (const area of areas) {
-        areaLookup[area.area_id] = area;
-      }
 
       let inputDevices = devices.filter(
         (device) => device.id === this.value || !device.disabled_by
@@ -276,30 +259,16 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     await this.comboBox?.focus();
   }
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this.devices = devices;
-      }),
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this.areas = areas;
-      }),
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this.entities = entities;
-      }),
-    ];
-  }
-
   protected updated(changedProps: PropertyValues) {
     if (
-      (!this._init && this.devices && this.areas && this.entities) ||
+      (!this._init && this.hass) ||
       (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
       const devices = this._getDevices(
-        this.devices!,
+        Object.values(this.hass.devices),
-        this.areas!,
+        Object.values(this.hass.areas),
-        this.entities!,
+        Object.values(this.hass.entities),
         this.includeDomains,
         this.excludeDomains,
         this.includeDeviceClasses,

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

@@ -112,9 +112,9 @@ export class HaStateLabelBadge extends LitElement {
     const image = this.icon
       ? ""
       : this.image
-      ? this.image
+        ? this.image
-      : entityState.attributes.entity_picture_local ||
+        : entityState.attributes.entity_picture_local ||
-        entityState.attributes.entity_picture;
+          entityState.attributes.entity_picture;
     const value =
       !image && !showIcon
         ? this._computeValue(domain, entityState, entry)
@@ -186,12 +186,12 @@ export class HaStateLabelBadge extends LitElement {
           entityState.state === UNAVAILABLE
           ? "—"
           : isNumericState(entityState)
-          ? formatNumber(
+            ? formatNumber(
-              entityState.state,
+                entityState.state,
-              this.hass!.locale,
+                this.hass!.locale,
-              getNumberFormatOptions(entityState, entry)
+                getNumberFormatOptions(entityState, entry)
-            )
+              )
-          : this.hass!.formatEntityState(entityState);
+            : this.hass!.formatEntityState(entityState);
     }
   }
 

src/components/entity/state-info.ts

@@ -125,7 +125,7 @@ class StateInfo extends LitElement {
         text-overflow: ellipsis;
       }
 
-      .name[in-dialog],
+      .name[inDialog],
       :host([secondary-line]) .name {
         line-height: 20px;
       }

src/components/ha-aliases-editor.ts

@@ -1,12 +1,8 @@
-import "@material/mwc-button/mwc-button";
+import { LitElement, html, nothing } from "lit";
-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-textfield";
-import type { HaTextField } from "./ha-textfield";
 import { fireEvent } from "../common/dom/fire_event";
+import { HomeAssistant } from "../types";
+import "./ha-multi-textfield";
 
 @customElement("ha-aliases-editor")
 class AliasesEditor extends LitElement {
@@ -22,107 +18,23 @@ class AliasesEditor extends LitElement {
     }
 
     return html`
-      ${this.aliases.map(
+      <ha-multi-textfield
-        (alias, index) => html`
+        .hass=${this.hass}
-          <div class="layout horizontal center-center row">
+        .value=${this.aliases}
-            <ha-textfield
+        .disabled=${this.disabled}
-              .disabled=${this.disabled}
+        .label=${this.hass!.localize("ui.dialogs.aliases.label")}
-              dialogInitialFocus=${index}
+        .removeLabel=${this.hass!.localize("ui.dialogs.aliases.remove")}
-              .index=${index}
+        .addLabel=${this.hass!.localize("ui.dialogs.aliases.add")}
-              class="flex-auto"
+        item-index
-              .label=${this.hass!.localize("ui.dialogs.aliases.input_label", {
+        @value-changed=${this._aliasesChanged}
-                number: index + 1,
+      >
-              })}
+      </ha-multi-textfield>
-              .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() {
+  private _aliasesChanged(value) {
-    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 {

src/components/ha-area-filter.ts

@@ -0,0 +1,96 @@
+import { mdiChevronRight, mdiSofa } from "@mdi/js";
+import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-dialog";
+import { HomeAssistant } from "../types";
+import "./ha-svg-icon";
+import "./ha-textfield";
+
+export type AreaFilterValue = {
+  hidden?: string[];
+  order?: string[];
+};
+
+@customElement("ha-area-filter")
+export class HaAreaPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public value?: AreaFilterValue;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  protected render(): TemplateResult {
+    const allAreasCount = Object.keys(this.hass.areas).length;
+    const hiddenAreasCount = this.value?.hidden?.length ?? 0;
+
+    const description =
+      hiddenAreasCount === 0
+        ? this.hass.localize("ui.components.area-filter.all_areas")
+        : allAreasCount === hiddenAreasCount
+          ? this.hass.localize("ui.components.area-filter.no_areas")
+          : this.hass.localize("ui.components.area-filter.area_count", {
+              count: allAreasCount - hiddenAreasCount,
+            });
+
+    return html`
+      <ha-list-item
+        tabindex="0"
+        role="button"
+        hasMeta
+        twoline
+        graphic="icon"
+        @click=${this._edit}
+        @keydown=${this._edit}
+        .disabled=${this.disabled}
+      >
+        <ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
+        <span>${this.label}</span>
+        <span slot="secondary">${description}</span>
+        <ha-svg-icon
+          slot="meta"
+          .label=${this.hass.localize("ui.common.edit")}
+          .path=${mdiChevronRight}
+        ></ha-svg-icon>
+      </ha-list-item>
+    `;
+  }
+
+  private async _edit(ev) {
+    if (ev.defaultPrevented) {
+      return;
+    }
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    ev.preventDefault();
+    ev.stopPropagation();
+    const value = await showAreaFilterDialog(this, {
+      title: this.label,
+      initialValue: this.value,
+    });
+    if (!value) return;
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-list-item {
+        --mdc-list-side-padding-left: 8px;
+        --mdc-list-side-padding-right: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-area-filter": HaAreaPicker;
+  }
+}