Add user selector with multiple and system option

.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 do not report issues for custom cards.**
+        **Please not not report issues for custom cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases
@@ -24,7 +24,6 @@ body:
           required: true
         - label: I have tried a different browser to see if it is related to my browser.
           required: true
-        - label: I have tried reproducing the issue in [safe mode](https://www.home-assistant.io/blog/2023/11/01/release-202311/#restarting-into-safe-mode) to rule out problems with unsupported custom resources.
   - type: markdown
     attributes:
       value: |

.github/labeler.yml

@@ -1,45 +1,31 @@
 Build:
-  - changed-files:
-      - any-glob-to-any-file:
-          - build-scripts/**
-          - .browserslistrc
-          - gulpfile.js
+  - build-scripts/**
+  - .browserslistrc
+  - gulpfile.js
 
 Cast:
-  - changed-files:
-      - any-glob-to-any-file:
-          - cast/src/**
-          - src/cast/**
+  - cast/src/**
+  - src/cast/**
 
 Demo:
-  - changed-files:
-      - any-glob-to-any-file:
-          - demo/src/**
-          - src/fake_data/**
+  - demo/src/**
+  - src/fake_data/**
 
 Design:
-  - changed-files:
-      - any-glob-to-any-file:
-          - gallery/src/**
-          - src/fake_data/**
+  - gallery/src/**
+  - src/fake_data/**
 
 Dependencies:
-  - changed-files:
-      - any-glob-to-any-file:
-          - package.json
-          - renovate.json
-          - yarn.lock
-          - .yarn/**
-          - .yarnrc.yml
-          - .nvmrc
+  - package.json
+  - renovate.json
+  - yarn.lock
+  - .yarn/**
+  - .yarnrc.yml
+  - .nvmrc
 
 GitHub Actions:
-  - changed-files:
-      - any-glob-to-any-file:
-          - .github/workflows/**
-          - .github/*.yml
+  - .github/workflows/**
+  - .github/*.yml
 
 Supervisor:
-  - changed-files:
-      - any-glob-to-any-file:
-          - hassio/src/**
+  - hassio/src/**

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
+        run: ./node_modules/.bin/gulp build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
@@ -75,7 +75,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -99,7 +99,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2

.github/workflows/demo_deployment.yaml

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

.github/workflows/design_deployment.yaml

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

.github/workflows/design_preview.yaml

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

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@v5.0.0
+        uses: actions/labeler@v4.3.0
         with:
           sync-labels: true

.github/workflows/lock.yml

@@ -9,10 +9,9 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v5.0.1
+      - uses: dessant/lock-threads@v4.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: ""

.github/workflows/nightly.yaml

@@ -23,12 +23,12 @@ jobs:
         uses: actions/checkout@v4.1.1
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v4
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/release.yaml

@@ -29,12 +29,12 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v4
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v9.0.0
+        uses: actions/stale@v8.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.nvmrc

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

.yarnrc.yml

@@ -1,9 +1,11 @@
-compressionLevel: mixed
-
 defaultSemverRangePrefix: ""
 
-enableGlobalCache: false
-
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+plugins:
+  - 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

@@ -1,56 +0,0 @@
-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

@@ -1,7 +1,6 @@
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
-const { dependencies } = require("../package.json");
 
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
@@ -13,7 +12,11 @@ module.exports.sourceMapURL = () => {
 };
 
 // Files from NPM Packages that should not be imported
-module.exports.ignorePackages = () => [];
+// eslint-disable-next-line unused-imports/no-unused-vars
+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 }) =>
@@ -32,6 +35,8 @@ 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(
@@ -86,12 +91,14 @@ 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 : "usage",
-        corejs: latestBuild ? false : dependencies["core-js"],
+        useBuiltIns: latestBuild ? false : "entry",
+        corejs: latestBuild ? false : { version: "3.33", proposals: true },
         bugfixes: true,
         shippedProposals: true,
       },
@@ -109,39 +116,27 @@ 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: {
-          ...Object.fromEntries(
-            ["lit", "lit-element", "lit-html"].map((m) => [
-              m,
-              [
-                "html",
-                { name: "svg", encapsulation: "svg" },
-                { name: "css", encapsulation: "style" },
-              ],
-            ])
-          ),
-          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
+          lit: [
+            "html",
+            { name: "svg", encapsulation: "svg" },
+            { name: "css", encapsulation: "style" },
+          ],
+          "@polymer/polymer/lib/utils/html-tag": ["html"],
         },
         strictCSS: true,
         htmlMinifier: module.exports.htmlMinifierOptions,
-        failOnError: false, // we can turn this off in case of false positives
+        failOnError: true, // we can turn this off in case of false positives
       },
     ],
     // Import helpers and regenerator from runtime package
     [
       "@babel/plugin-transform-runtime",
-      { version: dependencies["@babel/runtime"] },
+      { version: require("../package.json").dependencies["@babel/runtime"] },
     ],
     // Support  some proposals still in TC39 process
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
@@ -152,18 +147,6 @@ 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"
-        : "webpack-watch-app"
+      ? "rollup-watch-app"
+      : "webpack-watch-app"
   )
 );
 

build-scripts/gulp/download-translations.js

@@ -161,10 +161,6 @@ 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"
-        : "eval-cheap-module-source-map",
+      ? "nosources-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 ? "[name].[contenthash].js" : "[name].js",
+        isProdBuild && !isStatsBuild ? "[id]-[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 { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
@@ -22,9 +22,8 @@ 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";
@@ -39,10 +38,10 @@ class HcCast extends LitElement {
 
   @state() private askWrite = false;
 
-  @state() private lovelaceViews?: LovelaceViewConfig[] | null;
+  @state() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
-    if (this.lovelaceViews === undefined) {
+    if (this.lovelaceConfig === undefined) {
       return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
@@ -73,44 +72,43 @@ class HcCast extends LitElement {
         ${error
           ? html` <div class="card-content">${error}</div> `
           : !this.castManager.status
-            ? html`
-                <p class="center-item">
-                  <mwc-button raised @click=${this._handleLaunch}>
-                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
-                    Start Casting
-                  </mwc-button>
-                </p>
-              `
-            : html`
-                <div class="section-header">PICK A VIEW</div>
-                <paper-listbox
-                  attr-for-selected="data-path"
-                  .selected=${this.castManager.status.lovelacePath || ""}
-                >
-                  ${(
-                    this.lovelaceViews ?? [
-                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
-                    ]
-                  ).map(
-                    (view, idx) => html`
-                      <paper-icon-item
-                        @click=${this._handlePickView}
-                        data-path=${view.path || idx}
-                      >
-                        ${view.icon
-                          ? html`
-                              <ha-icon
-                                .icon=${view.icon}
-                                slot="item-icon"
-                              ></ha-icon>
-                            `
-                          : ""}
-                        ${view.title || view.path}
-                      </paper-icon-item>
-                    `
-                  )}
-                </paper-listbox>
-              `}
+          ? html`
+              <p class="center-item">
+                <mwc-button raised @click=${this._handleLaunch}>
+                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                  Start Casting
+                </mwc-button>
+              </p>
+            `
+          : html`
+              <div class="section-header">PICK A VIEW</div>
+              <paper-listbox
+                attr-for-selected="data-path"
+                .selected=${this.castManager.status.lovelacePath || ""}
+              >
+                ${(this.lovelaceConfig
+                  ? this.lovelaceConfig.views
+                  : [generateDefaultViewConfig({}, {}, {}, {}, () => "")]
+                ).map(
+                  (view, idx) => html`
+                    <paper-icon-item
+                      @click=${this._handlePickView}
+                      data-path=${view.path || idx}
+                    >
+                      ${view.icon
+                        ? html`
+                            <ha-icon
+                              .icon=${view.icon}
+                              slot="item-icon"
+                            ></ha-icon>
+                          `
+                        : ""}
+                      ${view.title || view.path}
+                    </paper-icon-item>
+                  `
+                )}
+              </paper-listbox>
+            `}
         <div class="card-actions">
           ${this.castManager.status
             ? html`
@@ -138,15 +136,11 @@ class HcCast extends LitElement {
     llColl.refresh().then(
       () => {
         llColl.subscribe((config) => {
-          if (isStrategyDashboard(config)) {
-            this.lovelaceViews = null;
-          } else {
-            this.lovelaceViews = config.views;
-          }
+          this.lovelaceConfig = config;
         });
       },
       async () => {
-        this.lovelaceViews = null;
+        this.lovelaceConfig = null;
       }
     );
 
@@ -165,7 +159,9 @@ class HcCast extends LitElement {
     toggleAttribute(
       this,
       "hide-icons",
-      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
+      this.lovelaceConfig
+        ? !this.lovelaceConfig.views.some((view) => view.icon)
+        : true
     );
   }
 

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

@@ -1,5 +1,6 @@
 import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
 import {
   Auth,
   Connection,
@@ -23,7 +24,6 @@ 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."
-      : err === ERR_INVALID_HTTPS_TO_HTTP
-        ? html`
-            Cannot connect to Home Assistant instances over "http://".
-            ${seeFAQ("https")}
-          `
-        : `Unknown error (${err}).`;
+    ? "Please enter a Home Assistant URL."
+    : err === ERR_INVALID_HTTPS_TO_HTTP
+    ? html`
+        Cannot connect to Home Assistant instances over "http://".
+        ${seeFAQ("https")}
+      `
+    : `Unknown error (${err}).`;
 
 const INTRO = html`
   <p>
@@ -116,11 +116,13 @@ 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>
-            <ha-textfield
-              label="Home Assistant URL"
-              placeholder="https://abcdefghijklmnop.ui.nabu.casa"
-              @keydown=${this._handleInputKeyDown}
-            ></ha-textfield>
+            <p>
+              <paper-input
+                label="Home Assistant URL"
+                placeholder="https://abcdefghijklmnop.ui.nabu.casa"
+                @keydown=${this._handleInputKeyDown}
+              ></paper-input>
+            </p>
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
@@ -194,7 +196,7 @@ export class HcConnect extends LitElement {
   }
 
   private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
+    const inputEl = this.shadowRoot!.querySelector("paper-input")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -313,10 +315,6 @@ export class HcConnect extends LitElement {
       .spacer {
         flex: 1;
       }
-
-      ha-textfield {
-        width: 100%;
-      }
     `;
   }
 }

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

@@ -1,5 +1,7 @@
-import { LovelaceCardConfig } from "../../../../src/data/lovelace/config/card";
-import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import {
+  LovelaceCardConfig,
+  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/config/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
 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/config/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
@@ -14,8 +14,7 @@ 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,26 +21,18 @@ 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,
-  LovelaceDashboardStrategyConfig,
-} from "../../../../src/data/lovelace/config/types";
-import { fetchResources } from "../../../../src/data/lovelace/resource";
+} from "../../../../src/data/lovelace";
 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_CONFIG: LovelaceDashboardStrategyConfig = {
-  strategy: {
-    type: "original-states",
-  },
-};
+const DEFAULT_STRATEGY = "original-states";
 
 let resourcesLoaded = false;
 @customElement("hc-main")
@@ -101,7 +93,7 @@ export class HcMain extends HassElement {
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
         .urlPath=${this._urlPath}
-        @config-refresh=${this._generateDefaultLovelaceConfig}
+        @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;
   }
@@ -292,20 +284,9 @@ export class HcMain extends HassElement {
       // configuration.
       try {
         await llColl.refresh();
-        this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
-          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);
-          }
-        });
+        this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
+          this._handleNewLovelaceConfig(lovelaceConfig)
+        );
       } catch (err: any) {
         if (
           atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
@@ -319,7 +300,7 @@ export class HcMain extends HassElement {
         }
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
-        await this._generateDefaultLovelaceConfig();
+        await this._generateLovelaceConfig();
       }
     }
     if (!resourcesLoaded) {
@@ -335,13 +316,15 @@ export class HcMain extends HassElement {
     this._sendStatus();
   }
 
-  private async _generateDefaultLovelaceConfig() {
+  private async _generateLovelaceConfig() {
     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/config/types";
+import { LovelaceConfig } from "../../../src/data/lovelace";
 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/config/card";
+import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
 import {
@@ -39,9 +39,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`<ha-circular-progress
-                  indeterminate
-                ></ha-circular-progress>`
+              ? html`<ha-circular-progress active></ha-circular-progress>`
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`
@@ -50,7 +48,8 @@ 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: conf.authorName }
+                            "name",
+                            conf.authorName
                           )}
                         </a>
                       </small>

demo/src/html/index.html.template

@@ -74,9 +74,19 @@
   <body>
     <div id="ha-launch-screen">
       <div class="ha-launch-screen-spacer"></div>
-      <svg xmlns="http://www.w3.org/2000/svg" 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"/>
-        <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
+      <svg
+        viewBox="0 0 240 240"
+        fill="none"
+        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)
-          : addHours(currentDate, 1);
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -80,8 +80,8 @@ const generateSumStatistics = (
       period === "day"
         ? addDays(currentDate, 1)
         : period === "month"
-          ? addMonths(currentDate, 1)
-          : addHours(currentDate, 1);
+        ? addMonths(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}
-              inDialog
+              in-dialog
             ></state-card-content>
 
             <more-info-content

gallery/src/data/demo_states.js

@@ -509,7 +509,7 @@ export default {
       away_mode: "on",
       aux_heat: "off",
       unit_of_measurement: "°C",
-      friendly_name: "HVAC",
+      friendly_name: "Hvac",
       supported_features: 3833,
     },
     last_changed: "2018-07-19T10:44:46.200650+00:00",

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

@@ -1,10 +1,8 @@
-import { css, html, LitElement, TemplateResult, nothing } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/chips/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-chip";
+import "../../../../src/components/ha-chip-set";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
 
@@ -12,6 +10,10 @@ const chips: {
   icon?: string;
   content?: string;
 }[] = [
+  {},
+  {
+    icon: mdiHomeAssistant,
+  },
   {
     content: "Content",
   },
@@ -27,73 +29,31 @@ export class DemoHaChips extends LitElement {
     return html`
       <ha-card header="ha-chip demo">
         <div class="card-content">
-          <p>Action chip</p>
+          ${chips.map(
+            (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-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}>
+                <ha-chip .hasIcon=${chip.icon !== undefined}>
                   ${chip.icon
                     ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
                       </ha-svg-icon>`
                     : ""}
                   ${chip.content}
-                </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>
               `
             )}
           </ha-chip-set>
@@ -108,10 +68,12 @@ 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-circular-progress.markdown

@@ -1,4 +0,0 @@
----
-title: Circular Progress
-subtitle: Can be used to indicate an ongoing task.
----

gallery/src/pages/components/ha-circular-progress.ts

@@ -1,64 +0,0 @@
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-circular-progress";
-import "@material/web/progress/circular-progress";
-import { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-circular-progress")
-export class DemoHaCircularProgress extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`<ha-card header="Basic circular progress">
-        <div class="card-content">
-          <ha-circular-progress indeterminate></ha-circular-progress></div
-      ></ha-card>
-      <ha-card header="Different circular progress sizes">
-        <div class="card-content">
-          <ha-circular-progress
-            indeterminate
-            size="tiny"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="small"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="medium"
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            size="large"
-          ></ha-circular-progress></div
-      ></ha-card>
-      <ha-card header="Circular progress with an aria-label">
-        <div class="card-content">
-          <ha-circular-progress
-            indeterminate
-            aria-label="Doing something..."
-          ></ha-circular-progress>
-          <ha-circular-progress
-            indeterminate
-            .ariaLabel=${"Doing something..."}
-          ></ha-circular-progress></div
-      ></ha-card>`;
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-circular-progress": DemoHaCircularProgress;
-  }
-}

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

@@ -11,7 +11,6 @@ const buttons: {
   min?: number;
   max?: number;
   step?: number;
-  unit?: string;
   class?: string;
 }[] = [
   {
@@ -30,11 +29,6 @@ const buttons: {
     label: "Custom",
     class: "custom",
   },
-  {
-    id: "unit",
-    label: "With unit",
-    unit: "m",
-  },
 ];
 
 @customElement("demo-components-ha-control-number-buttons")
@@ -56,7 +50,6 @@ 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,7 +9,6 @@ const sliders: {
   id: string;
   label: string;
   mode?: "start" | "end" | "cursor";
-  unit?: string;
   class?: string;
 }[] = [
   {
@@ -32,21 +31,18 @@ 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",
   },
 ];
 
@@ -97,7 +93,6 @@ export class DemoHaBarSlider extends LitElement {
                 @value-changed=${this.handleValueChanged}
                 @slider-moved=${this.handleSliderMoved}
                 aria-labelledby=${id}
-                .unit=${config.unit}
               >
               </ha-control-slider>
             </div>
@@ -119,7 +114,6 @@ 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,22 +5,9 @@ subtitle: Dialogs provide important prompts in a user flow.
 
 # Material Design 3
 
-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).
+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).
 
-# 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.
+# Highlighted guidelines
 
 ## Content
 
@@ -30,6 +17,14 @@ Our dialogs are based on the latest version of Material Design. Please note that
 - 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://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.
+- 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.
 - 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/lovelace/thermostat-card.ts

@@ -35,18 +35,6 @@ const ENTITIES = [
     friendly_name: "Nest",
     supported_features: 43,
   }),
-  getEntity("climate", "sensibo", "fan_only", {
-    current_temperature: null,
-    temperature: null,
-    min_temp: 0,
-    max_temp: 1,
-    target_temp_step: 1,
-    hvac_modes: ["fan_only", "off"],
-    friendly_name: "Sensibo purifier",
-    fan_modes: ["low", "high"],
-    fan_mode: "low",
-    supported_features: 9,
-  }),
   getEntity("climate", "unavailable", "unavailable", {
     supported_features: 43,
   }),
@@ -69,23 +57,6 @@ const CONFIGS = [
   entity: climate.nest
     `,
   },
-  {
-    heading: "Fan only example",
-    config: `
-- type: thermostat
-  entity: climate.sensibo
-  features:
-    - type: climate-hvac-modes
-      hvac_modes:
-        - fan_only
-        - 'off'
-    - type: climate-fan-modes
-      style: icons
-      fan_modes:
-        - low
-        - high
-    `,
-  },
   {
     heading: "Unavailable",
     config: `

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

@@ -10,6 +10,7 @@ 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/action_handler";
+import { ActionHandlerEvent } from "../../../../src/data/lovelace";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
 
 @customElement("demo-misc-util-long-press")

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

@@ -31,21 +31,6 @@ const ENTITIES = [
     max_temp: 30,
     supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
   }),
-  getEntity("climate", "fan", "fan_only", {
-    friendly_name: "Basic fan",
-    hvac_modes: ["fan_only", "off"],
-    hvac_mode: "fan_only",
-    fan_modes: ["low", "high"],
-    fan_mode: "low",
-    current_temperature: null,
-    temperature: null,
-    min_temp: 0,
-    max_temp: 1,
-    target_temp_step: 1,
-    supported_features:
-      // eslint-disable-next-line no-bitwise
-      ClimateEntityFeature.TARGET_TEMPERATURE | ClimateEntityFeature.FAN_MODE,
-  }),
   getEntity("climate", "hvac", "auto", {
     friendly_name: "Basic hvac",
     hvac_modes: ["auto", "off"],

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

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

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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,49 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,78 +0,0 @@
-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

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

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

@@ -1,49 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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/update.ts

@@ -1,6 +1,12 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import {
+  UPDATE_SUPPORT_BACKUP,
+  UPDATE_SUPPORT_PROGRESS,
+  UPDATE_SUPPORT_INSTALL,
+  UPDATE_SUPPORT_RELEASE_NOTES,
+} from "../../../../src/data/update";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -9,14 +15,13 @@ import {
 } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { LONG_TEXT } from "../../data/text";
-import { UpdateEntityFeature } from "../../../../src/data/update";
 
 const base_attributes = {
   title: "Awesome",
   installed_version: "1.2.2",
   latest_version: "1.2.3",
   release_url: "https://home-assistant.io",
-  supported_features: UpdateEntityFeature.INSTALL,
+  supported_features: UPDATE_SUPPORT_INSTALL,
   skipped_version: null,
   in_progress: false,
   release_summary:
@@ -56,7 +61,7 @@ const ENTITIES = [
   getEntity("update", "update7", "on", {
     ...base_attributes,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.BACKUP,
+      base_attributes.supported_features + UPDATE_SUPPORT_BACKUP,
     friendly_name: "With backup support",
   }),
   getEntity("update", "update8", "on", {
@@ -68,21 +73,21 @@ const ENTITIES = [
     ...base_attributes,
     in_progress: 25,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
     friendly_name: "With 25 in_progress",
   }),
   getEntity("update", "update10", "on", {
     ...base_attributes,
     in_progress: 50,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
     friendly_name: "With 50 in_progress",
   }),
   getEntity("update", "update11", "on", {
     ...base_attributes,
     in_progress: 75,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
     friendly_name: "With 75 in_progress",
   }),
   getEntity("update", "update12", "unavailable", {
@@ -109,19 +114,19 @@ const ENTITIES = [
     ...base_attributes,
     friendly_name: "Update with release notes",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
   }),
   getEntity("update", "update17", "off", {
     ...base_attributes,
     friendly_name: "Update with release notes error",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
   }),
   getEntity("update", "update18", "off", {
     ...base_attributes,
     friendly_name: "Update with release notes loading",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
   }),
   getEntity("update", "update19", "on", {
     ...base_attributes,
@@ -137,10 +142,9 @@ const ENTITIES = [
   getEntity("update", "update21", "on", {
     ...base_attributes,
     in_progress: true,
-    friendly_name:
-      "Update with in_progress true and  UpdateEntityFeature.PROGRESS",
+    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
   }),
 ];
 

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

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

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

@@ -1,50 +0,0 @@
-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,9 +49,11 @@ export class HassioAddonRepositoryEl extends LitElement {
       return html`
         <div class="content">
           <p class="description">
-            ${this.supervisor.localize("store.no_results_found", {
-              repository: repo.name,
-            })}
+            ${this.supervisor.localize(
+              "store.no_results_found",
+              "repository",
+              repo.name
+            )}
           </p>
         </div>
       `;
@@ -84,15 +86,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_available")}
+                      ? this.supervisor.localize("addon.state.not_installed")
+                      : 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,
@@ -106,8 +108,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-tab.ts

@@ -20,7 +20,7 @@ class HassioAddonConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
     const hasConfiguration =
       (this.addon.options && Object.keys(this.addon.options).length) ||

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

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

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

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

@@ -34,7 +34,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
     return html`
       <div class="content">
@@ -85,7 +85,8 @@ class HassioAddonDocumentationDashboard extends LitElement {
     } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.documentation.get_documentation",
-        { error: extractApiErrorMessage(err) }
+        "error",
+        extractApiErrorMessage(err)
       );
     }
   }

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

@@ -22,7 +22,7 @@ class HassioAddonInfoDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
     return html`

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/chips/ha-chip-set";
-import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/ha-chip";
+import "../../../../src/components/ha-chip-set";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -78,7 +78,6 @@ 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,
@@ -235,32 +234,28 @@ class HassioAddonInfo extends LitElement {
 
           <ha-chip-set class="capabilities">
             ${this.addon.stage !== "stable"
-              ? html`
-                  <ha-assist-chip
-                    filled
-                    class=${classMap({
-                      yellow: this.addon.stage === "experimental",
-                      red: this.addon.stage === "deprecated",
-                    })}
-                    @click=${this._showMoreInfo}
-                    id="stage"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        `addon.dashboard.capability.stages.${this.addon.stage}`
-                      )
-                    )}
+              ? html` <ha-chip
+                  hasIcon
+                  class=${classMap({
+                    yellow: this.addon.stage === "experimental",
+                    red: this.addon.stage === "deprecated",
+                  })}
+                  @click=${this._showMoreInfo}
+                  id="stage"
+                >
+                  <ha-svg-icon
+                    slot="icon"
+                    .path=${STAGE_ICON[this.addon.stage]}
                   >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${STAGE_ICON[this.addon.stage]}
-                    >
-                    </ha-svg-icon>
-                  </ha-assist-chip>
-                `
+                  </ha-svg-icon>
+                  ${this.supervisor.localize(
+                    `addon.dashboard.capability.stages.${this.addon.stage}`
+                  )}
+                </ha-chip>`
               : ""}
 
-            <ha-assist-chip
-              filled
+            <ha-chip
+              hasIcon
               class=${classMap({
                 green: Number(this.addon.rating) >= 6,
                 yellow: [3, 4, 5].includes(Number(this.addon.rating)),
@@ -268,197 +263,151 @@ 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-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @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>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.full_access
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @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>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.hardware"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.homeassistant_api
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @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>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.core"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this._computeHassioApi
               ? html`
-                  <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-chip hasIcon @click=${this._showMoreInfo} id="hassio_api">
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiHomeAssistant}
                     ></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                    ) || this.addon.hassio_role}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.docker_api
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="docker_api"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.docker"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="docker_api">
                     <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.docker"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.host_pid
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="host_pid"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.host_pid"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="host_pid">
                     <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host_pid"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.apparmor !== "default"
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @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>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.apparmor"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.auth_api
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="auth_api"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.auth"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="auth_api">
                     <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.auth"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.ingress
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="ingress"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.ingress"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="ingress">
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.ingress"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.signed
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="signed"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.signed"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="signed">
                     <ha-svg-icon slot="icon" .path=${mdiLinkLock}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.signed"
+                    )}
+                  </ha-chip>
                 `
               : ""}
           </ha-chip-set>
 
           <div class="description light-color">
             ${this.addon.description}.<br />
-            ${this.supervisor.localize("addon.dashboard.visit_addon_page", {
-              name: html`<a
-                href=${this.addon.url!}
-                target="_blank"
-                rel="noreferrer"
+            ${this.supervisor.localize(
+              "addon.dashboard.visit_addon_page",
+              "name",
+              html`<a href=${this.addon.url!} target="_blank" rel="noreferrer"
                 >${this.addon.name}</a
-              >`,
-            })}
+              >`
+            )}
           </div>
           <div class="addon-container">
             <div>
@@ -625,10 +574,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_needed: addonStoreInfo!.homeassistant,
-                      }
+                      "core_version_installed",
+                      this.supervisor.core.version,
+                      "core_version_needed",
+                      addonStoreInfo!.homeassistant
                     )}
                   </ha-alert>
                 `
@@ -801,11 +750,12 @@ 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_experimental: `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
-                icon_deprecated: `<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon>`,
-              }
+              "icon_stable",
+              `<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon>`,
+              "icon_experimental",
+              `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
+              "icon_deprecated",
+              `<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon>`
             )
           : this.supervisor.localize(
               `addon.dashboard.capability.${id}.description`
@@ -867,9 +817,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
-        error: extractApiErrorMessage(err),
-      });
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -887,9 +839,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
-        error: extractApiErrorMessage(err),
-      });
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -907,9 +861,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
-        error: extractApiErrorMessage(err),
-      });
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -927,9 +883,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
-        error: extractApiErrorMessage(err),
-      });
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -947,9 +905,11 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
-        error: extractApiErrorMessage(err),
-      });
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 
@@ -1225,35 +1185,23 @@ class HassioAddonInfo extends LitElement {
         .description a {
           color: var(--primary-color);
         }
-        ha-assist-chip {
-          --md-sys-color-primary: var(--text-primary-color);
-          --md-sys-color-on-surface: var(--text-primary-color);
-          --ha-assist-chip-filled-container-color: var(--primary-color);
+        ha-chip {
+          text-transform: capitalize;
+          --ha-chip-text-color: var(--text-primary-color);
+          --ha-chip-background-color: var(--primary-color);
         }
 
         .red {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-red,
-            #df4c1e
-          );
+          --ha-chip-background-color: var(--label-badge-red, #df4c1e);
         }
         .blue {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-blue,
-            #039be5
-          );
+          --ha-chip-background-color: var(--label-badge-blue, #039be5);
         }
         .green {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-green,
-            #0da035
-          );
+          --ha-chip-background-color: var(--label-badge-green, #0da035);
         }
         .yellow {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-yellow,
-            #f4b400
-          );
+          --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
         }
         .capabilities {
           margin-bottom: 16px;
@@ -1312,6 +1260,9 @@ 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-log-tab.ts

@@ -18,9 +18,7 @@ class HassioAddonLogDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`
-        <ha-circular-progress indeterminate></ha-circular-progress>
-      `;
+      return html` <ha-circular-progress active></ha-circular-progress> `;
     }
     return html`
       <div class="content">

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

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

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

@@ -1,12 +1,11 @@
 import Fuse from "fuse.js";
-import type { IFuseOptions } from "fuse.js";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
-  const options: IFuseOptions<StoreAddon> = {
+  const options: Fuse.IFuseOptions<StoreAddon> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
-    minMatchCharLength: Math.min(filter.length, 2),
+    minMatchCharLength: 2,
     threshold: 0.2,
   };
   const fuse = new Fuse(addons, options);

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

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

hassio/src/dashboard/hassio-update.ts

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

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

@@ -95,7 +95,7 @@ class HassioBackupDialog
           </ha-header-bar>
         </div>
         ${this._restoringBackup
-          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+          ? html`<ha-circular-progress active></ha-circular-progress>`
           : html`
               <supervisor-backup-content
                 .hass=${this.hass}

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -57,7 +57,7 @@ class HassioCreateBackupDialog extends LitElement {
         )}
       >
         ${this._creatingBackup
-          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+          ? html`<ha-circular-progress active></ha-circular-progress>`
           : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-select";
 import {
   extractApiErrorMessage,
@@ -70,11 +71,7 @@ class HassioDatadiskDialog extends LitElement {
         ?hideActions=${this.moving}
       >
         ${this.moving
-          ? html` <ha-circular-progress
-                aria-label="Moving"
-                size="large"
-                indeterminate
-              >
+          ? html` <ha-circular-progress alt="Moving" size="large" active>
               </ha-circular-progress>
               <p class="progress-text">
                 ${this.dialogParams.supervisor.localize(
@@ -108,12 +105,12 @@ class HassioDatadiskDialog extends LitElement {
                     </ha-select>
                   `
                 : this.devices === undefined
-                  ? this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.loading_devices"
-                    )
-                  : this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.no_devices"
-                    )}
+                ? this.dialogParams.supervisor.localize(
+                    "dialog.datadisk_move.loading_devices"
+                  )
+                : this.dialogParams.supervisor.localize(
+                    "dialog.datadisk_move.no_devices"
+                  )}
 
               <mwc-button
                 slot="secondaryAction"

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

@@ -145,7 +145,8 @@ export class DialogHassioNetwork
                   ? html`<p>
                       ${this.supervisor.localize(
                         "dialog.network.connected_to",
-                        { ssid: this._interface?.wifi?.ssid }
+                        "ssid",
+                        this._interface?.wifi?.ssid
                       )}
                     </p>`
                   : ""}
@@ -155,11 +156,7 @@ export class DialogHassioNetwork
                   .disabled=${this._scanning}
                 >
                   ${this._scanning
-                    ? html`<ha-circular-progress
-                        aria-label="Scanning"
-                        indeterminate
-                        size="small"
-                      >
+                    ? html`<ha-circular-progress active size="small">
                       </ha-circular-progress>`
                     : this.supervisor.localize("dialog.network.scan_ap")}
                 </mwc-button>
@@ -278,7 +275,7 @@ export class DialogHassioNetwork
         </mwc-button>
         <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
           ${this._processing
-            ? html`<ha-circular-progress indeterminate size="small">
+            ? html`<ha-circular-progress active size="small">
               </ha-circular-progress>`
             : this.supervisor.localize("common.save")}
         </mwc-button>

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

@@ -158,7 +158,7 @@ class HassioRepositoriesDialog extends LitElement {
             <mwc-button @click=${this._addRepository}>
               ${this._processing
                 ? html`<ha-circular-progress
-                    indeterminate
+                    active
                     size="small"
                   ></ha-circular-progress>`
                 : this._dialogParams!.supervisor.localize(

hassio/src/hassio-my-redirect.ts

@@ -76,15 +76,17 @@ class HassioMyRedirect extends LitElement {
     const redirect = REDIRECTS[path];
 
     if (!redirect) {
-      this._error = this.supervisor.localize("my.not_supported", {
-        link: html`<a
+      this._error = this.supervisor.localize(
+        "my.not_supported",
+        "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.routeTail;
+      ? this._ingressRoute(this.panel.config?.ingress)
+      : this.routeTail;
 
     el.hass = this.hass;
     el.narrow = this.narrow;

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

@@ -96,11 +96,13 @@ class HassioCoreInfo extends LitElement {
             slot="primaryAction"
             class="warning"
             @click=${this._coreRestart}
-            .title=${this.supervisor.localize("common.restart_name", {
-              name: "Core",
-            })}
+            .title=${this.supervisor.localize(
+              "common.restart_name",
+              "name",
+              "Core"
+            )}
           >
-            ${this.supervisor.localize("common.restart_name", { name: "Core" })}
+            ${this.supervisor.localize("common.restart_name", "name", "Core")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -120,12 +122,16 @@ class HassioCoreInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("confirm.restart.title", {
-        name: "Home Assistant Core",
-      }),
-      text: this.supervisor.localize("confirm.restart.text", {
-        name: "Home Assistant Core",
-      }),
+      title: this.supervisor.localize(
+        "confirm.restart.title",
+        "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"),
     });
@@ -140,9 +146,11 @@ class HassioCoreInfo extends LitElement {
     } catch (err: any) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
-          title: this.supervisor.localize("common.failed_to_restart_name", {
-            name: "Home Assistant Core",
-          }),
+          title: this.supervisor.localize(
+            "common.failed_to_restart_name",
+            "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`
-                      <ha-progress-button
-                        @click=${this._toggleBeta}
-                        .title=${this.supervisor.localize(
-                          "system.supervisor.join_beta_description"
-                        )}
-                      >
-                        ${this.supervisor.localize(
-                          "system.supervisor.join_beta_action"
-                        )}
-                      </ha-progress-button>
-                    `
-                  : ""}
+                ? html`
+                    <ha-progress-button
+                      @click=${this._toggleBeta}
+                      .title=${this.supervisor.localize(
+                        "system.supervisor.join_beta_description"
+                      )}
+                    >
+                      ${this.supervisor.localize(
+                        "system.supervisor.join_beta_action"
+                      )}
+                    </ha-progress-button>
+                  `
+                : ""}
             </ha-settings-row>
 
             ${this.supervisor.supervisor.supported
@@ -200,13 +200,17 @@ class HassioSupervisorInfo extends LitElement {
           <ha-progress-button
             class="warning"
             @click=${this._supervisorRestart}
-            .title=${this.supervisor.localize("common.restart_name", {
-              name: "Supervisor",
-            })}
+            .title=${this.supervisor.localize(
+              "common.restart_name",
+              "name",
+              "Supervisor"
+            )}
           >
-            ${this.supervisor.localize("common.restart_name", {
-              name: "Supervisor",
-            })}
+            ${this.supervisor.localize(
+              "common.restart_name",
+              "name",
+              "Supervisor"
+            )}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -288,12 +292,16 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("confirm.restart.title", {
-        name: "Supervisor",
-      }),
-      text: this.supervisor.localize("confirm.restart.text", {
-        name: "Supervisor",
-      }),
+      title: this.supervisor.localize(
+        "confirm.restart.title",
+        "name",
+        "Supervisor"
+      ),
+      text: this.supervisor.localize(
+        "confirm.restart.text",
+        "name",
+        "Supervisor"
+      ),
       confirmText: this.supervisor.localize("common.restart"),
       dismissText: this.supervisor.localize("common.cancel"),
     });
@@ -307,9 +315,11 @@ class HassioSupervisorInfo extends LitElement {
       await restartSupervisor(this.hass);
     } catch (err: any) {
       showAlertDialog(this, {
-        title: this.supervisor.localize("common.failed_to_restart_name", {
-          name: "Supervisor",
-        }),
+        title: this.supervisor.localize(
+          "common.failed_to_restart_name",
+          "name",
+          "Supervisor"
+        ),
         text: extractApiErrorMessage(err),
       });
     } finally {
@@ -324,7 +334,8 @@ class HassioSupervisorInfo extends LitElement {
       ),
       text: this.supervisor.localize(
         "system.supervisor.share_diagonstics_description",
-        { line_break: html`<br /><br />` }
+        "line_break",
+        html`<br /><br />`
       ),
     });
   }

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

@@ -124,10 +124,13 @@ class HassioSupervisorLog extends LitElement {
         this._selectedLogProvider
       );
     } catch (err: any) {
-      this._error = this.supervisor.localize("system.log.get_logs", {
-        provider: this._selectedLogProvider,
-        error: extractApiErrorMessage(err),
-      });
+      this._error = this.supervisor.localize(
+        "system.log.get_logs",
+        "provider",
+        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://www.home-assistant.io/latest-release-notes/";
+      ? "https://next.home-assistant.io/latest-release-notes/"
+      : "https://www.home-assistant.io/latest-release-notes/";
   }
   if (entry === "os") {
     return version.includes("dev")
@@ -141,51 +141,44 @@ class UpdateAvailableCard extends LitElement {
                 })}
               </p>`
             : !this._updating
-              ? html`
-                  ${this._changelogContent
-                    ? html`
-                        <ha-faded>
-                          <ha-markdown .content=${this._changelogContent}>
-                          </ha-markdown>
-                        </ha-faded>
-                      `
-                    : ""}
-                  <div class="versions">
-                    <p>
-                      ${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
-                    aria-label="Updating"
-                    size="large"
-                    indeterminate
-                  >
-                  </ha-circular-progress>
-                  <p class="progress-text">
-                    ${this.supervisor.localize("update_available.updating", {
+            ? html`
+                ${this._changelogContent
+                  ? html`
+                      <ha-faded>
+                        <ha-markdown .content=${this._changelogContent}>
+                        </ha-markdown>
+                      </ha-faded>
+                    `
+                  : ""}
+                <div class="versions">
+                  <p>
+                    ${this.supervisor.localize("update_available.description", {
                       name: this._name,
-                      version: this._version_latest,
+                      version: this._version,
+                      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,41 +25,42 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.6",
-    "@braintree/sanitize-url": "7.0.0",
-    "@codemirror/autocomplete": "6.11.1",
-    "@codemirror/commands": "6.3.2",
-    "@codemirror/language": "6.9.3",
+    "@babel/runtime": "7.23.2",
+    "@braintree/sanitize-url": "6.0.4",
+    "@codemirror/autocomplete": "6.10.2",
+    "@codemirror/commands": "6.3.0",
+    "@codemirror/language": "6.9.2",
     "@codemirror/legacy-modes": "6.3.3",
-    "@codemirror/search": "6.5.5",
-    "@codemirror/state": "6.3.3",
-    "@codemirror/view": "6.22.3",
+    "@codemirror/search": "6.5.4",
+    "@codemirror/state": "6.3.1",
+    "@codemirror/view": "6.21.4",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.12.0",
-    "@formatjs/intl-displaynames": "6.6.4",
+    "@formatjs/intl-datetimeformat": "6.11.1",
+    "@formatjs/intl-displaynames": "6.6.1",
     "@formatjs/intl-getcanonicallocales": "2.3.0",
-    "@formatjs/intl-listformat": "7.5.3",
-    "@formatjs/intl-locale": "3.4.3",
-    "@formatjs/intl-numberformat": "8.9.0",
-    "@formatjs/intl-pluralrules": "5.2.10",
-    "@formatjs/intl-relativetimeformat": "11.2.10",
-    "@fullcalendar/core": "6.1.10",
-    "@fullcalendar/daygrid": "6.1.10",
-    "@fullcalendar/interaction": "6.1.10",
-    "@fullcalendar/list": "6.1.10",
-    "@fullcalendar/luxon3": "6.1.10",
-    "@fullcalendar/timegrid": "6.1.10",
-    "@lezer/highlight": "1.2.0",
+    "@formatjs/intl-listformat": "7.5.0",
+    "@formatjs/intl-locale": "3.4.0",
+    "@formatjs/intl-numberformat": "8.8.0",
+    "@formatjs/intl-pluralrules": "5.2.7",
+    "@formatjs/intl-relativetimeformat": "11.2.7",
+    "@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",
     "@lit-labs/context": "0.4.1",
-    "@lit-labs/motion": "1.0.6",
-    "@lit-labs/observers": "2.0.2",
-    "@lit-labs/virtualizer": "2.0.11",
+    "@lit-labs/motion": "1.0.4",
+    "@lit-labs/observers": "2.0.1",
+    "@lit-labs/virtualizer": "2.0.7",
     "@lrnwebcomponents/simple-tooltip": "7.0.18",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
     "@material/mwc-button": "0.27.0",
     "@material/mwc-checkbox": "0.27.0",
+    "@material/mwc-circular-progress": "0.27.0",
     "@material/mwc-dialog": "0.27.0",
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-fab": "0.27.0",
@@ -80,9 +81,12 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.1.1",
-    "@mdi/js": "7.4.47",
-    "@mdi/svg": "7.4.47",
+    "@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",
@@ -90,8 +94,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.2",
-    "@vaadin/vaadin-themable-mixin": "24.3.2",
+    "@vaadin/combo-box": "24.2.1",
+    "@vaadin/vaadin-themable-mixin": "24.2.1",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -99,46 +103,46 @@
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "chart.js": "4.4.1",
+    "chart.js": "4.4.0",
     "comlink": "4.4.1",
-    "core-js": "3.34.0",
+    "core-js": "3.33.1",
     "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.10",
-    "fuse.js": "7.0.0",
+    "fuse.js": "6.6.2",
     "google-timezones-json": "1.2.0",
-    "hls.js": "1.4.14",
+    "hls.js": "1.4.12",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.8",
+    "intl-messageformat": "10.5.4",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
-    "luxon": "3.4.4",
-    "marked": "11.1.0",
+    "luxon": "3.4.3",
+    "marked": "9.1.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
-    "punycode": "2.3.1",
+    "punycode": "2.3.0",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",
+    "resize-observer-polyfill": "1.5.1",
     "roboto-fontface": "0.10.0",
-    "rrule": "2.8.1",
-    "sortablejs": "1.15.1",
+    "rrule": "2.7.2",
+    "sortablejs": "1.15.0",
     "stacktrace-js": "2.0.2",
     "superstruct": "1.0.3",
     "tinykeys": "2.1.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "1.0.37",
+    "ua-parser-js": "1.0.36",
     "unfetch": "5.0.0",
-    "vis-data": "7.1.9",
-    "vis-network": "9.1.9",
-    "vue": "2.7.16",
+    "vis-data": "7.1.7",
+    "vis-network": "9.1.8",
+    "vue": "2.7.15",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.0.0",
@@ -150,61 +154,62 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.23.6",
-    "@babel/helper-define-polyfill-provider": "0.4.4",
-    "@babel/plugin-proposal-decorators": "7.23.6",
-    "@babel/plugin-transform-runtime": "7.23.6",
-    "@babel/preset-env": "7.23.6",
-    "@babel/preset-typescript": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.8.3",
-    "@koa/cors": "5.0.0",
-    "@lokalise/node-api": "12.1.0",
+    "@babel/core": "7.23.2",
+    "@babel/plugin-proposal-decorators": "7.23.2",
+    "@babel/plugin-transform-runtime": "7.23.2",
+    "@babel/preset-env": "7.23.2",
+    "@babel/preset-typescript": "7.23.2",
+    "@bundle-stats/plugin-webpack-filter": "4.7.8",
+    "@koa/cors": "4.0.0",
+    "@lokalise/node-api": "12.0.0",
     "@octokit/auth-oauth-device": "6.0.1",
     "@octokit/plugin-retry": "6.0.1",
     "@octokit/rest": "20.0.2",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
-    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-json": "6.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.5",
-    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.12",
-    "@types/chromecast-caf-sender": "1.0.8",
+    "@rollup/plugin-replace": "5.0.4",
+    "@types/babel__plugin-transform-runtime": "7.9.4",
+    "@types/chromecast-caf-receiver": "6.0.11",
+    "@types/chromecast-caf-sender": "1.0.7",
+    "@types/esprima": "4.0.5",
     "@types/glob": "8.1.0",
-    "@types/html-minifier-terser": "7.0.2",
-    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.8",
-    "@types/leaflet-draw": "1.0.11",
-    "@types/luxon": "3.3.7",
-    "@types/mocha": "10.0.6",
-    "@types/qrcode": "1.5.5",
-    "@types/serve-handler": "6.1.4",
-    "@types/sortablejs": "1.15.7",
-    "@types/tar": "6.1.10",
-    "@types/ua-parser-js": "0.7.39",
+    "@types/html-minifier-terser": "7.0.1",
+    "@types/js-yaml": "4.0.8",
+    "@types/leaflet": "1.9.7",
+    "@types/leaflet-draw": "1.0.9",
+    "@types/luxon": "3.3.3",
+    "@types/mocha": "10.0.3",
+    "@types/qrcode": "1.5.4",
+    "@types/serve-handler": "6.1.3",
+    "@types/sortablejs": "1.15.4",
+    "@types/tar": "6.1.7",
+    "@types/ua-parser-js": "0.7.38",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.16.0",
-    "@typescript-eslint/parser": "6.16.0",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "5.0.0",
+    "chai": "4.3.10",
     "del": "7.1.0",
-    "eslint": "8.56.0",
+    "eslint": "8.52.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-disable": "2.0.3",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-lit": "1.11.0",
-    "eslint-plugin-lit-a11y": "4.1.1",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-lit": "1.10.1",
+    "eslint-plugin-lit-a11y": "4.1.0",
     "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.2.0",
+    "fs-extra": "11.1.1",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
@@ -216,28 +221,28 @@
     "husky": "8.0.3",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.2.0",
-    "lit-analyzer": "2.0.2",
+    "lint-staged": "15.0.2",
+    "lit-analyzer": "2.0.1",
     "lodash.template": "4.5.0",
     "magic-string": "0.30.5",
     "map-stream": "0.0.7",
     "mocha": "10.2.0",
     "object-hash": "3.0.0",
-    "open": "10.0.2",
+    "open": "9.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.1.1",
+    "prettier": "3.0.3",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "5.9.2",
     "serve-handler": "6.1.5",
-    "sinon": "17.0.1",
+    "sinon": "17.0.0",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.2",
     "tar": "6.2.0",
-    "terser-webpack-plugin": "5.3.10",
-    "ts-lit-plugin": "2.0.1",
-    "typescript": "5.3.3",
+    "terser-webpack-plugin": "5.3.9",
+    "ts-lit-plugin": "2.0.0",
+    "typescript": "5.2.2",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
     "webpack": "5.89.0",
@@ -245,18 +250,16 @@
     "webpack-dev-server": "4.15.1",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
-    "webpackbar": "6.0.0",
+    "webpackbar": "5.0.2",
     "workbox-build": "7.0.0"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "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.8.0",
-    "clean-css": "5.3.3",
-    "@lit/reactive-element": "1.6.3",
+    "lit@^2.7.4 || ^3.0.0": "^2.7.4",
     "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@4.0.2"
+  "packageManager": "yarn@3.6.4"
 }

public/static/icons/mask-icon.svg

@@ -1 +1,23 @@
-<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>
+<?xml version="1.0" standalone="no"?>
+<!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      = "20240103.0"
+version      = "20231027.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

renovate.json

@@ -1,6 +1,5 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "configMigration": true,
   "extends": [
     ":ignoreModulesAndTests",
     ":label(Dependencies)",
@@ -11,7 +10,7 @@
     "group:recommended",
     "npm:unpublishSafe"
   ],
-  "enabledManagers": ["npm", "nvm"],
+  "enabledManagers": ["npm"],
   "postUpdateOptions": ["yarnDedupeHighest"],
   "lockFileMaintenance": {
     "description": ["Run after patch releases but before next beta"],
@@ -29,22 +28,11 @@
       "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,5 +40,4 @@ docker run \
     --file /opt/src/${LOCAL_FILE} \
     --lang-iso ${LANG_ISO} \
     --convert-placeholders=false \
-    --replace-modified=true \
-#    --cleanup-mode=true
+    --replace-modified=true

src/auth/ha-auth-flow.ts

@@ -8,20 +8,13 @@ import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-formfield";
-import {
-  AuthProvider,
-  autocompleteLoginFields,
-  createLoginFlow,
-  deleteLoginFlow,
-  redirectWithAuthCode,
-  submitLoginFlow,
-} from "../data/auth";
+import "../components/ha-markdown";
+import { AuthProvider, autocompleteLoginFields } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
-import { fireEvent } from "../common/dom/fire_event";
 
 type State = "loading" | "error" | "step";
 
@@ -37,18 +30,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;
   }
@@ -56,29 +49,27 @@ 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;
     }
 
-    this._state = "step";
-
-    const oldStep = changedProps.get("step") as HaAuthFlow["step"];
+    const oldStep = changedProps.get("_step") as HaAuthFlow["_step"];
 
     if (
       !oldStep ||
-      this.step.flow_id !== oldStep.flow_id ||
-      (this.step.type === "form" &&
+      this._step.flow_id !== oldStep.flow_id ||
+      (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"
-          ? computeInitialHaFormData(this.step.data_schema)
+        this._step.type === "form"
+          ? computeInitialHaFormData(this._step.data_schema)
           : undefined;
     }
   }
@@ -86,27 +77,13 @@ export class HaAuthFlow extends LitElement {
   protected render() {
     return html`
       <style>
-        ha-auth-flow .store-token {
-          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 {
+        ha-auth-flow .action {
+          margin: 24px 0 8px;
           text-align: center;
-          max-width: 336px;
-          width: 100%;
         }
-        ha-auth-form {
-          display: block;
-          margin-top: 16px;
+        ha-auth-flow .store-token {
+          margin-top: 10px;
+          margin-left: -16px;
         }
       </style>
       <form>${this._renderForm()}</form>
@@ -141,7 +118,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;
     }
 
@@ -155,31 +132,20 @@ export class HaAuthFlow extends LitElement {
   }
 
   private _renderForm() {
-    const showBack =
-      this.step?.type === "form" &&
-      this.authProvider?.users &&
-      !["select_mfa_module", "mfa"].includes(this.step.step_id);
-
     switch (this._state) {
       case "step":
-        if (this.step == null) {
+        if (this._step == null) {
           return nothing;
         }
-
         return html`
-          ${this._renderStep(this.step)}
-          <div class="action ${showBack ? "space-between" : ""}">
-            ${showBack
-              ? html`<mwc-button @click=${this._localFlow}>
-                  ${this.localize("ui.panel.page-authorize.form.previous")}
-                </mwc-button>`
-              : nothing}
+          ${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>
@@ -188,9 +154,11 @@ export class HaAuthFlow extends LitElement {
       case "error":
         return html`
           <ha-alert alert-type="error">
-            ${this.localize("ui.panel.page-authorize.form.error", {
-              error: this._errorMessage,
-            })}
+            ${this.localize(
+              "ui.panel.page-authorize.form.error",
+              "error",
+              this._errorMessage
+            )}
           </ha-alert>
           <div class="action">
             <mwc-button raised @click=${this._startOver}>
@@ -214,18 +182,24 @@ export class HaAuthFlow extends LitElement {
       case "abort":
         return html`
           ${this.localize("ui.panel.page-authorize.abort_intro")}:
-          ${this.localize(
-            `ui.panel.page-authorize.form.providers.${step.handler[0]}.abort.${step.reason}`
-          )}
+          <ha-markdown
+            allowsvg
+            breaks
+            .content=${this.localize(
+              `ui.panel.page-authorize.form.providers.${step.handler[0]}.abort.${step.reason}`
+            )}
+          ></ha-markdown>
         `;
       case "form":
         return html`
-          <h1>
-            ${!["select_mfa_module", "mfa"].includes(step.step_id)
-              ? this.localize("ui.panel.page-authorize.welcome_home")
-              : this.localize("ui.panel.page-authorize.just_checking")}
-          </h1>
-          ${this._computeStepDescription(step)}
+          ${this._computeStepDescription(step)
+            ? html`
+                <ha-markdown
+                  breaks
+                  .content=${this._computeStepDescription(step)}
+                ></ha-markdown>
+              `
+            : nothing}
           <ha-auth-form
             .data=${this._stepData}
             .schema=${autocompleteLoginFields(step.data_schema)}
@@ -238,28 +212,15 @@ export class HaAuthFlow extends LitElement {
           ${this.clientId === genClientId() &&
           !["select_mfa_module", "mfa"].includes(step.step_id)
             ? html`
-                <div class="space-between">
-                  <ha-formfield
-                    class="store-token"
-                    .label=${this.localize(
-                      "ui.panel.page-authorize.store_token"
-                    )}
-                  >
-                    <ha-checkbox
-                      .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>
+                <ha-formfield
+                  class="store-token"
+                  .label=${this.localize("ui.panel.page-authorize.store_token")}
+                >
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
+                  ></ha-checkbox>
+                </ha-formfield>
               `
             : ""}
         `;
@@ -269,12 +230,15 @@ 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") {
-      deleteLoginFlow(this.step.flow_id).catch((err) => {
+    if (this._step && this._step.type === "form") {
+      fetch(`/auth/login_flow/${this._step.flow_id}`, {
+        method: "DELETE",
+        credentials: "same-origin",
+      }).catch((err) => {
         // eslint-disable-next-line no-console
         console.error("Error delete obsoleted auth flow", err);
       });
@@ -289,26 +253,26 @@ export class HaAuthFlow extends LitElement {
     }
 
     try {
-      const response = await createLoginFlow(this.clientId, this.redirectUri, [
-        newProvider.type,
-        newProvider.id,
-      ]);
+      const response = await fetch("/auth/login_flow", {
+        method: "POST",
+        credentials: "same-origin",
+        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") {
-          redirectWithAuthCode(
-            this.redirectUri!,
-            data.result,
-            this.oauth2State,
-            this.storeToken
-          );
+          this._redirect(data.result);
           return;
         }
 
-        this.step = data;
+        this._step = data;
         this._state = "step";
       } else {
         this._state = "error";
@@ -322,6 +286,27 @@ 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;
   }
@@ -329,7 +314,13 @@ 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;
-    return this.localize(resourceKey, step.description_placeholders);
+    const args: string[] = [];
+    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) {
@@ -358,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;
     }
@@ -370,7 +361,11 @@ export class HaAuthFlow extends LitElement {
     const postData = { ...this._stepData, client_id: this.clientId };
 
     try {
-      const response = await submitLoginFlow(this.step.flow_id, postData);
+      const response = await fetch(`/auth/login_flow/${this._step.flow_id}`, {
+        method: "POST",
+        credentials: "same-origin",
+        body: JSON.stringify(postData),
+      });
 
       const newStep = await response.json();
 
@@ -381,15 +376,10 @@ export class HaAuthFlow extends LitElement {
       }
 
       if (newStep.type === "create_entry") {
-        redirectWithAuthCode(
-          this.redirectUri!,
-          newStep.result,
-          this.oauth2State,
-          this.storeToken
-        );
+        this._redirect(newStep.result);
         return;
       }
-      this.step = newStep;
+      this._step = newStep;
       this._state = "step";
     } catch (err: any) {
       // eslint-disable-next-line no-console
@@ -400,10 +390,6 @@ export class HaAuthFlow extends LitElement {
       this._submitting = false;
     }
   }
-
-  private _localFlow() {
-    fireEvent(this, "default-login-flow", { value: false });
-  }
 }
 
 declare global {

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

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

src/auth/ha-authorize.ts

@@ -13,7 +13,6 @@ 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");
 
@@ -40,8 +39,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _error?: string;
 
-  @state() private _forceDefaultLogin = false;
-
   constructor() {
     super();
     const query = extractSearchParamsObject() as AuthUrlSearchParams;
@@ -63,7 +60,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           ha-authorize ha-alert {
             display: block;
             margin: 16px 0;
-            background-color: var(--primary-background-color, #fafafa);
           }
         </style>
         <ha-alert alert-type="error"
@@ -72,7 +68,19 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       `;
     }
 
-    const inactiveProviders = this._authProviders?.filter(
+    if (!this._authProviders) {
+      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
     );
 
@@ -82,82 +90,20 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       <style>
         ha-pick-auth-provider {
           display: block;
-          margin-top: 24px;
+          margin-top: 48px;
         }
-        ha-auth-flow,
-        ha-local-auth-flow {
-          display: flex;
-          justify-content: center;
-          flex-direction: column;
-          align-items: center;
+        ha-auth-flow {
+          display: block;
+          margin-top: 24px;
         }
         ha-alert {
           display: block;
           margin: 16px 0;
-          background-color: var(--primary-background-color, #fafafa);
         }
         p {
           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;
-        }
-        .action {
-          margin: 16px 0 8px;
-          display: flex;
-          width: 100%;
-          max-width: 336px;
-          justify-content: center;
-        }
-        .space-between {
-          justify-content: space-between;
-        }
-        .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
@@ -174,61 +120,33 @@ 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}
 
-      <div
-        class="card-content"
-        @default-login-flow=${this._handleDefaultLoginFlow}
-      >
-        ${!this._authProvider
-          ? html`<p>
-              ${this.localize("ui.panel.page-authorize.initializing")}
-            </p> `
-          : !this._forceDefaultLogin &&
-              this._authProvider!.users &&
-              this.clientId != null &&
-              this.redirectUri != null
-            ? html`<ha-local-auth-flow
-                .clientId=${this.clientId}
-                .redirectUri=${this.redirectUri}
-                .oauth2State=${this.oauth2State}
-                .authProvider=${this._authProvider}
-                .authProviders=${this._authProviders}
-                .localize=${this.localize}
-                .ownInstance=${this._ownInstance}
-              ></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>
+      <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>
+          `
+        : ""}
     `;
   }
 
@@ -281,18 +199,12 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       );
     }
 
-    if (window.innerWidth > 450) {
-      import("../resources/particles");
-    }
-
     // If we are logging into the instance that is hosting this auth form
     // we will register the service worker to start preloading.
     if (url.host === location.host) {
       this._ownInstance = true;
       registerServiceWorker(this, false);
     }
-
-    import("../components/ha-language-picker");
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -333,22 +245,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  private _handleDefaultLoginFlow(ev) {
-    this._forceDefaultLogin = ev.detail.value;
-  }
-
   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

@@ -1,485 +0,0 @@
-/* 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 { BasePerson, listUserPersons } 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?: Record<string, BasePerson>;
-
-  @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).filter(
-      (userId) => userId in this._persons!
-    );
-    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;
-        }
-        ha-list-item {
-          margin-top: 16px;
-        }
-        ha-button {
-          --mdc-typography-button-text-transform: none;
-        }
-        .forgot-password-container {
-          text-align: right;
-          padding: 8px 0 16px 0;
-        }
-        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>`
-        : nothing}
-      ${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"
-                  readonly
-                  .value=${this.authProvider.users[this._selectedUser]}
-                />
-                <ha-auth-textfield
-                  .type=${this._unmaskedPassword ? "text" : "password"}
-                  autocomplete="current-password"
-                  id="password"
-                  name="password"
-                  .label=${this.localize(
-                    "ui.panel.page-authorize.form.providers.homeassistant.step.init.data.password"
-                  )}
-                  required
-                  autoValidate
-                  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 class="forgot-password-container">
-                  <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>
-                <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>
-              </form>
-            </div>`
-          : 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() {
-    try {
-      this._persons = await listUserPersons();
-    } catch {
-      this._persons = {};
-      this._error = "Failed to fetch persons";
-    }
-  }
-
-  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,
-            true
-          );
-          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,
-                true
-              );
-              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,
-          true
-        );
-        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", { value: true });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-local-auth-flow": HaLocalAuthFlow;
-  }
-  interface HASSDomEvents {
-    "default-login-flow": { value: boolean };
-  }
-}

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

@@ -21,11 +21,7 @@ export class HaPickAuthProvider extends LitElement {
 
   protected render() {
     return html`
-      <h3>
-        <span
-          >${this.localize("ui.panel.page-authorize.pick_auth_provider")}</span
-        >
-      </h3>
+      <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
       <mwc-list>
         ${this.authProviders.map(
           (provider) => html`
@@ -39,8 +35,8 @@ export class HaPickAuthProvider extends LitElement {
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
-        )}
-      </mwc-list>
+        )}</mwc-list
+      >
     `;
   }
 
@@ -49,34 +45,12 @@ export class HaPickAuthProvider extends LitElement {
   }
 
   static styles = css`
-    h3 {
-      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;
+    p {
+      margin-top: 0;
     }
     mwc-list {
-      margin: 16px -16px 0;
-      --mdc-list-side-padding: 24px;
+      margin: 0 -16px;
+      --mdc-list-side-padding: 16px;
     }
   `;
 }

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

@@ -58,10 +58,10 @@ const matchMaxScale = (
   return outputColors.map((value) => Math.round(value * factor));
 };
 
-export const mired2kelvin = (miredTemperature: number) =>
+const mired2kelvin = (miredTemperature: number) =>
   Math.floor(1000000 / miredTemperature);
 
-export const kelvin2mired = (kelvintTemperature: number) =>
+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) =>
-          isComponentLoaded(hass, integration)
-        )
-      : true;
+    ? page.components.some((integration) =>
+        isComponentLoaded(hass, integration)
+      )
+    : true;
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;

src/common/const.ts

@@ -29,7 +29,6 @@ import {
   mdiFlash,
   mdiFlower,
   mdiFormatListBulleted,
-  mdiFormatListCheckbox,
   mdiFormTextbox,
   mdiGauge,
   mdiGoogleAssistant,
@@ -65,7 +64,6 @@ import {
   mdiTransmissionTower,
   mdiWater,
   mdiWaterPercent,
-  mdiWeatherPartlyCloudy,
   mdiWeatherPouring,
   mdiWeatherRainy,
   mdiWeatherWindy,
@@ -130,7 +128,6 @@ export const FIXED_DOMAIN_ICONS = {
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   wake_word: mdiChatSleep,
-  weather: mdiWeatherPartlyCloudy,
   zone: mdiMapMarkerRadius,
 };
 
@@ -169,7 +166,6 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   precipitation_intensity: mdiWeatherPouring,
   pressure: mdiGauge,
   reactive_power: mdiFlash,
-  shopping_List: mdiFormatListCheckbox,
   signal_strength: mdiWifi,
   sound_pressure: mdiEarHearing,
   speed: mdiSpeedometer,
@@ -207,7 +203,6 @@ export const DOMAINS_WITH_CARD = [
   "select",
   "timer",
   "text",
-  "update",
   "vacuum",
   "water_heater",
 ];

src/common/datetime/localize_date.ts

@@ -1,31 +0,0 @@
-import memoizeOne from "memoize-one";
-
-export const localizeWeekdays = memoizeOne(
-  (language: string, short: boolean): string[] => {
-    const days: string[] = [];
-    const format = new Intl.DateTimeFormat(language, {
-      weekday: short ? "short" : "long",
-      timeZone: "UTC",
-    });
-    for (let i = 0; i < 7; i++) {
-      const date = new Date(Date.UTC(1970, 0, 1 + 3 + i));
-      days.push(format.format(date));
-    }
-    return days;
-  }
-);
-
-export const localizeMonths = memoizeOne(
-  (language: string, short: boolean): string[] => {
-    const months: string[] = [];
-    const format = new Intl.DateTimeFormat(language, {
-      month: short ? "short" : "long",
-      timeZone: "UTC",
-    });
-    for (let i = 0; i < 12; i++) {
-      const date = new Date(Date.UTC(1970, 0 + i, 1));
-      months.push(format.format(date));
-    }
-    return months;
-  }
-);