Add inital form data to hui-form-editor

.devcontainer/devcontainer.json

@@ -2,12 +2,12 @@
   "name": "Home Assistant Frontend",
   "build": {
     "dockerfile": "Dockerfile",
-    "context": "..",
+    "context": ".."
   },
   "appPort": "8124:8123",
   "postStartCommand": "script/bootstrap",
   "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}",
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
   "customizations": {
     "vscode": {
@@ -16,7 +16,7 @@
         "esbenp.prettier-vscode",
         "runem.lit-plugin",
         "github.vscode-pull-request-github",
-        "eamodio.gitlens",
+        "eamodio.gitlens"
       ],
       "settings": {
         "files.eol": "\n",
@@ -27,17 +27,17 @@
         "editor.renderWhitespace": "boundary",
         "editor.rulers": [80],
         "[typescript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
         },
         "[javascript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
         },
         "files.trimTrailingWhitespace": true,
         "terminal.integrated.shell.linux": "/usr/bin/zsh",
         "gitlens.showWelcomeOnInstall": false,
         "gitlens.showWhatsNewAfterUpgrades": false,
-        "workbench.startupEditor": "none",
-      },
-    },
-  },
+        "workbench.startupEditor": "none"
+      }
+    }
+  }
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -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,51 +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:
-  - any:
-      - changed-files:
-          # Match when only these files are changed (i.e. don't match PRs that happen to add or remove packages)
-          - any-glob-to-all-files:
-              - package.json
-              - renovate.json
-              - yarn.lock
-              - .yarn/**
-              - .yarnrc.yml
-              - .nvmrc
-      # Dependabot and Renovate branches always match (i.e. compatibility tweaks by members considered minor)
-      - head-branch:
-          - "^renovate/"
-          - "^dependabot/"
+  - 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
@@ -37,20 +37,17 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.0.0
+        uses: actions/cache@v3.3.2
         with:
           path: |
             node_modules/.cache/prettier
             node_modules/.cache/eslint
-            node_modules/.cache/typescript
           key: lint-${{ github.sha }}
           restore-keys: lint-
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
         run: yarn run lint:types
-      - name: Run lit-analyzer
-        run: yarn run lint:lit --quiet
       - name: Run prettier
         run: yarn run lint:prettier
   test:
@@ -60,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:
@@ -78,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
@@ -89,7 +86,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.2.0
+        uses: actions/upload-artifact@v3.1.3
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -102,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
@@ -113,7 +110,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.2.0
+        uses: actions/upload-artifact@v3.1.3
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.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/nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           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
@@ -42,7 +42,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
 
       - name: Bump version
-        run: script/version_bump.js nightly
+        run: script/version_bump.cjs nightly
 
       - name: Build nightly Python wheels
         run: |
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.2.0
+        uses: actions/upload-artifact@v3.1.3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.2.0
+        uses: actions/upload-artifact@v3.1.3
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release.yaml

@@ -34,7 +34,7 @@ jobs:
           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
@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2024.01.0
+        uses: home-assistant/wheels@2023.10.5
         with:
           abi: cp311
           tag: musllinux_1_2

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
@@ -91,7 +90,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "@babel/preset-env",
       {
         useBuiltIns: latestBuild ? false : "usage",
-        corejs: latestBuild ? false : dependencies["core-js"],
+        corejs: latestBuild ? false : "3.33",
         bugfixes: true,
         shippedProposals: true,
       },
@@ -141,7 +140,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     // 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 }],

build-scripts/gulp/compress.js

@@ -8,10 +8,7 @@ const zopfliOptions = { threshold: 150 };
 
 const compressDist = (rootDir) =>
   gulp
-    .src([
-      `${rootDir}/**/*.{js,json,css,svg,xml}`,
-      `${rootDir}/{authorize,onboarding}.html`,
-    ])
+    .src([`${rootDir}/**/*.{js,json,css,svg}`])
     .pipe(zopfli(zopfliOptions))
     .pipe(gulp.dest(rootDir));
 

build-scripts/gulp/translations.js

@@ -426,7 +426,6 @@ gulp.task(
       "fetch-nightly-translations",
       gulp.series("clean-translations", "ensure-translations-build-dir")
     ),
-    gulp.parallel("create-test-metadata", "create-test-translation"),
     "build-master-translation",
     "build-merged-translations",
     "build-translation-fragment-supervisor",

build-scripts/webpack.cjs

@@ -7,9 +7,6 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
-const {
-  TransformAsyncModulesPlugin,
-} = require("transform-async-modules-webpack-plugin");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -145,6 +142,17 @@ const createWebpackConfig = ({
         ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
+      // See `src/resources/intl-polyfill-legacy.ts` for explanation
+      !latestBuild &&
+        new webpack.NormalModuleReplacementPlugin(
+          new RegExp(
+            path.resolve(paths.polymer_dir, "src/resources/intl-polyfill.ts")
+          ),
+          path.resolve(
+            paths.polymer_dir,
+            "src/resources/intl-polyfill-legacy.ts"
+          )
+        ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -155,8 +163,6 @@ const createWebpackConfig = ({
           stats: { assets: true, chunks: true, modules: true },
           transform: (stats) => JSON.stringify(filterStats(stats)),
         }),
-      !latestBuild &&
-        new TransformAsyncModulesPlugin({ browserslistEnv: "legacy" }),
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],

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

@@ -31,11 +31,11 @@ import "./hc-layout";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
-  @property({ attribute: false }) public auth!: Auth;
+  @property() public auth!: Auth;
 
-  @property({ attribute: false }) public connection!: Connection;
+  @property() public connection!: Connection;
 
-  @property({ attribute: false }) public castManager!: CastManager;
+  @property() public castManager!: CastManager;
 
   @state() private askWrite = false;
 

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

@@ -10,13 +10,13 @@ import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {
-  @property() public subtitle?: string;
+  @property() public subtitle?: string | undefined;
 
-  @property({ attribute: false }) public auth?: Auth;
+  @property() public auth?: Auth;
 
-  @property({ attribute: false }) public connection?: Connection;
+  @property() public connection?: Connection;
 
-  @property({ attribute: false }) public user?: HassUser;
+  @property() public user?: HassUser;
 
   protected render(): TemplateResult {
     return html`

cast/src/receiver/layout/hc-launch-screen.ts

@@ -12,8 +12,8 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
-          alt="Nabu Casa logo on left, Home Assistant logo on right, and red heart in center"
-          src="https://cast.home-assistant.io/images/nabu-loves-hass.png"
+          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
+          src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
         />
         <div class="status">
           ${this.hass ? "Connected" : "Not Connected"}

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

@@ -205,6 +205,7 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
+      this._hassUUID = msg.hassUUID;
     } catch (err: any) {
       const errorMessage = this._getErrorMessage(err);
       this._error = errorMessage;
@@ -224,17 +225,6 @@ export class HcMain extends HassElement {
       this.hass.connection.close();
     }
     this.initializeHass(auth, connection);
-    if (this._hassUUID !== msg.hassUUID) {
-      this._hassUUID = msg.hassUUID;
-      this._lovelacePath = null;
-      this._urlPath = undefined;
-      this._lovelaceConfig = undefined;
-      if (this._unsubLovelace) {
-        this._unsubLovelace();
-        this._unsubLovelace = undefined;
-      }
-      resourcesLoaded = false;
-    }
     this._error = undefined;
     this._sendStatus();
   }
@@ -243,7 +233,7 @@ export class HcMain extends HassElement {
     this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
-    if (!this.hass?.connected) {
+    if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
       this._sendError(
@@ -294,7 +284,6 @@ export class HcMain extends HassElement {
       this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
-        this._unsubLovelace = undefined;
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
         ? getLovelaceCollection(this.hass.connection, msg.urlPath)

gallery/src/components/demo-black-white-row.ts

@@ -11,7 +11,7 @@ class DemoBlackWhiteRow extends LitElement {
 
   @property() value!: any;
 
-  @property({ type: Boolean }) public disabled = false;
+  @property() disabled = false;
 
   protected render(): TemplateResult {
     return html`

gallery/src/components/demo-card.ts

@@ -11,11 +11,11 @@ export interface DemoCardConfig {
 
 @customElement("demo-card")
 class DemoCard extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property() public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public config!: DemoCardConfig;
+  @property() public config!: DemoCardConfig;
 
-  @property({ type: Boolean }) public showConfig = false;
+  @property() public showConfig = false;
 
   @state() private _size?: number;
 

gallery/src/components/demo-cards.ts

@@ -10,9 +10,9 @@ import "../ha-demo-options";
 
 @customElement("demo-cards")
 class DemoCards extends LitElement {
-  @property({ attribute: false }) public configs!: DemoCardConfig[];
+  @property() public configs!: DemoCardConfig[];
 
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property() public hass!: HomeAssistant;
 
   @state() private _showConfig = false;
 

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

@@ -8,11 +8,11 @@ import { HomeAssistant } from "../../../src/types";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property() public hass!: HomeAssistant;
 
   @property() public entityId!: string;
 
-  @property({ type: Boolean }) public showConfig = false;
+  @property() public showConfig!: boolean;
 
   render() {
     const state = this._getState(this.entityId, this.hass.states);

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

@@ -1,19 +1,19 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
-import { HomeAssistant } from "../../../src/types";
-import "../ha-demo-options";
 import "./demo-more-info";
+import "../ha-demo-options";
+import { HomeAssistant } from "../../../src/types";
 
 @customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property() public hass!: HomeAssistant;
 
-  @property({ type: Array }) public entities!: string[];
+  @property() public entities!: [];
 
-  @state() private _showConfig = false;
+  @property({ attribute: false }) _showConfig: boolean = false;
 
   render() {
     return html`

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/ha-gallery.ts

@@ -1,14 +1,14 @@
+import { mdiMenu } from "@mdi/js";
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-import { mdiMenu } from "@mdi/js";
-import { LitElement, PropertyValues, css, html } from "lit";
-import { customElement, query, state } from "lit/decorators";
-import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
-import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
+import { html, css, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
+import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
+import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import "./components/page-description";
 
 const GITHUB_DEMO_URL =
@@ -24,7 +24,7 @@ const FAKE_HASS = {
 
 @customElement("ha-gallery")
 class HaGallery extends LitElement {
-  @state() private _page =
+  @property() private _page =
     document.location.hash.substring(1) ||
     `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;
 

gallery/src/pages/automation/editor-condition.ts

@@ -80,7 +80,7 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
 ];
 
 @customElement("demo-automation-editor-condition")
-export class DemoAutomationEditorCondition extends LitElement {
+class DemoHaAutomationEditorCondition extends LitElement {
   @state() private hass!: HomeAssistant;
 
   @state() private _disabled = false;
@@ -155,6 +155,6 @@ export class DemoAutomationEditorCondition extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-automation-editor-condition": DemoAutomationEditorCondition;
+    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
   }
 }

gallery/src/pages/automation/editor-trigger.ts

@@ -126,7 +126,7 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 ];
 
 @customElement("demo-automation-editor-trigger")
-export class DemoAutomationEditorTrigger extends LitElement {
+class DemoHaAutomationEditorTrigger extends LitElement {
   @state() private hass!: HomeAssistant;
 
   @state() private _disabled = false;
@@ -201,6 +201,6 @@ export class DemoAutomationEditorTrigger extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-automation-editor-trigger": DemoAutomationEditorTrigger;
+    "demo-ha-automation-editor-trigger": DemoHaAutomationEditorTrigger;
   }
 }

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

@@ -59,7 +59,7 @@ export class DemoHaBarButton extends LitElement {
               <ha-control-button
                 class=${ifDefined(btn.class)}
                 label=${ifDefined(btn.label)}
-                ?disabled=${btn.disabled}
+                disabled=${ifDefined(btn.disabled)}
               >
                 <ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
               </ha-control-button>

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

@@ -135,7 +135,7 @@ export class DemoHaControlSelect extends LitElement {
                 class=${ifDefined(config.class)}
                 @value-changed=${this.handleValueChanged}
                 aria-labelledby=${id}
-                ?disabled=${config.disabled}
+                disabled=${ifDefined(config.disabled)}
               >
               </ha-control-select>
             </div>
@@ -156,7 +156,7 @@ export class DemoHaControlSelect extends LitElement {
                   class=${ifDefined(config.class)}
                   @value-changed=${this.handleValueChanged}
                   aria-labelledby=${id}
-                  ?disabled=${config.disabled}
+                  disabled=${ifDefined(config.disabled)}
                 >
                 </ha-control-select>
               `;

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

@@ -63,8 +63,8 @@ export class DemoHaControlSwitch extends LitElement {
                 .pathOn=${mdiLightbulb}
                 .pathOff=${mdiLightbulbOff}
                 aria-labelledby=${id}
-                ?disabled=${config.disabled}
-                ?reversed=${config.reversed}
+                disabled=${ifDefined(config.disabled)}
+                reversed=${ifDefined(config.reversed)}
               >
               </ha-control-switch>
             </div>
@@ -86,8 +86,8 @@ export class DemoHaControlSwitch extends LitElement {
                   aria-label=${label}
                   .pathOn=${mdiGarageOpen}
                   .pathOff=${mdiGarage}
-                  ?disabled=${config.disabled}
-                  ?reversed=${config.reversed}
+                  disabled=${ifDefined(config.disabled)}
+                  reversed=${ifDefined(config.reversed)}
                 >
                 </ha-control-switch>
               `;

gallery/src/pages/components/ha-expansion-panel.ts

@@ -3,7 +3,6 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-expansion-panel";
-import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-markdown";
 import "../../components/demo-black-white-row";
 import { LONG_TEXT } from "../../data/text";

gallery/src/pages/date-time/date-time-numeric.ts

@@ -1,20 +1,19 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-date-time-numeric")
 export class DemoDateTimeDateTimeNumeric extends LitElement {

gallery/src/pages/date-time/date-time-seconds.ts

@@ -1,20 +1,19 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-date-time-seconds")
 export class DemoDateTimeDateTimeSeconds extends LitElement {

gallery/src/pages/date-time/date-time-short-year.ts

@@ -1,20 +1,19 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-date-time-short-year")
 export class DemoDateTimeDateTimeShortYear extends LitElement {

gallery/src/pages/date-time/date-time-short.ts

@@ -1,20 +1,19 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-date-time-short")
 export class DemoDateTimeDateTimeShort extends LitElement {

gallery/src/pages/date-time/date-time.ts

@@ -1,20 +1,19 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-date-time")
 export class DemoDateTimeDateTime extends LitElement {

gallery/src/pages/date-time/time-seconds.ts

@@ -1,20 +1,18 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatTimeWithSeconds } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatTimeWithSeconds } from "../../../../src/common/datetime/format_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-time-seconds")
 export class DemoDateTimeTimeSeconds extends LitElement {

gallery/src/pages/date-time/time-weekday.ts

@@ -1,20 +1,18 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatTimeWeekday } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatTimeWeekday } from "../../../../src/common/datetime/format_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-time-weekday")
 export class DemoDateTimeTimeWeekday extends LitElement {

gallery/src/pages/date-time/time.ts

@@ -1,20 +1,19 @@
-import "@material/mwc-list/mwc-list";
-import { LitElement, css, html } from "lit";
+import { html, css, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { formatTime } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatTime } from "../../../../src/common/datetime/format_time";
+import { timeOptions } from "../../data/date-options";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
+  DateFormat,
+  FirstWeekday,
   TimeZone,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { timeOptions } from "../../data/date-options";
 
 @customElement("demo-date-time-time")
 export class DemoDateTimeTime extends LitElement {

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

@@ -65,23 +65,15 @@ const CONFIGS = [
     >> ...by using additional greater-than signs right next to each other...
     > > > ...or with spaces between arrows.
 
-    > [!NOTE]
-    > This is a GitHub note alert
+    > **Warning** Hey there
+    > This is a warning with a title
 
-    > [!TIP]
-    > This is a GitHub tip alert
+    > **Note**
+    > This is a note
 
-    > [!IMPORTANT]
-    > This is a GitHub important alert
-
-    > [!WARNING]
-    > This is a GitHub warning alert
-
-    > [!CAUTION]
-    > This is a GitHub caution alert
-
-    > [!TIP]
-    > - This is a list entry in GitHub tip alert
+    > **Note**
+    > This is a multiline note
+    > Lorem ipsum...
 
     ## Lists
 

gallery/src/pages/lovelace/media-player-row.ts

@@ -55,7 +55,7 @@ const CONFIGS = [
 ];
 
 @customElement("demo-lovelace-media-player-row")
-export class DemoLovelaceMediaPlayerRow extends LitElement {
+class DemoHuiMediaPlayerRow extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
   protected render(): TemplateResult {
@@ -73,6 +73,6 @@ export class DemoLovelaceMediaPlayerRow extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-media-player-row": DemoLovelaceMediaPlayerRow;
+    "demo-lovelace-media-player-rows": DemoHuiMediaPlayerRow;
   }
 }

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

@@ -344,7 +344,6 @@ export class DemoEntityState extends LitElement {
           title: "Icon",
           template: (entry) => html`
             <state-badge
-              .hass=${hass}
               .stateObj=${entry.stateObj}
               .stateColor=${true}
             ></state-badge>

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

@@ -59,9 +59,3 @@ export class DemoUtilLongPress extends LitElement {
     }
   `;
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-misc-util-long-press": DemoUtilLongPress;
-  }
-}

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"],
@@ -92,7 +77,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-climate")
 class DemoMoreInfoClimate extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -141,7 +141,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-cover")
 class DemoMoreInfoCover extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -29,7 +29,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-humidifier")
 class DemoMoreInfoHumidifier extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -32,7 +32,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-input-number")
 class DemoMoreInfoInputNumber extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -18,7 +18,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-input-text")
 class DemoMoreInfoInputText extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -140,7 +140,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-light")
 class DemoMoreInfoLight extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -21,7 +21,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-lock")
 class DemoMoreInfoLock extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -13,7 +13,7 @@ const ENTITIES = createMediaPlayerEntities();
 
 @customElement("demo-more-info-media-player")
 class DemoMoreInfoMediaPlayer extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -50,7 +50,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-number")
 class DemoMoreInfoNumber extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -21,7 +21,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-scene")
 class DemoMoreInfoScene extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -18,7 +18,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-timer")
 class DemoMoreInfoTimer extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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,16 +142,15 @@ 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,
   }),
 ];
 
 @customElement("demo-more-info-update")
 class DemoMoreInfoUpdate extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -22,7 +22,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-vacuum")
 class DemoMoreInfoVacuum extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

gallery/src/pages/more-info/water-heater.ts

@@ -42,7 +42,7 @@ const ENTITIES = [
 
 @customElement("demo-more-info-water-heater")
 class DemoMoreInfoWaterHeater extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
+  @property() public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -140,9 +140,3 @@ export class HassioAddonRepositoryEl extends LitElement {
     ];
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-repository": HassioAddonRepositoryEl;
-  }
-}

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

@@ -56,7 +56,7 @@ export class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
@@ -248,9 +248,3 @@ export class HassioAddonStore extends LitElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-addon-store": HassioAddonStore;
-  }
-}

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

@@ -65,9 +65,9 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @state() private _configHasChanged = false;
+  @property({ type: Boolean }) private _configHasChanged = false;
 
-  @state() private _valid = true;
+  @property({ type: Boolean }) private _valid = true;
 
   @state() private _canShowSchema = false;
 

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

@@ -51,7 +51,7 @@ class HassioAddonDashboard extends LitElement {
     | HassioAddonDetails
     | StoreAddonDetails;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @state() private _error?: string;
 
@@ -250,9 +250,7 @@ class HassioAddonDashboard extends LitElement {
     }
 
     if (path === "uninstall") {
-      if (this.isConnected) {
-        navigate(this._backPath);
-      }
+      window.history.back();
     } else if (path === "install") {
       this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
     } else {

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

@@ -10,7 +10,7 @@ import "./hassio-addon-info";
 
 @customElement("hassio-addon-info-tab")
 class HassioAddonInfoDashboard extends LitElement {
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 

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

@@ -99,7 +99,7 @@ const RATING_ICON = {
 
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 

hassio/src/backups/hassio-backups.ts

@@ -59,11 +59,11 @@ export class HassioBackups extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ attribute: false }) public route!: Route;
+  @property({ type: Object }) public route!: Route;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property({ type: Boolean }) public isWide = false;
+  @property({ type: Boolean }) public isWide!: boolean;
 
   @state() private _selectedBackups: string[] = [];
 

hassio/src/components/supervisor-backup-content.ts

@@ -1,4 +1,6 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   CSSResultGroup,
   LitElement,
@@ -14,7 +16,6 @@ import { formatDateTime } from "../../../src/common/datetime/format_date_time";
 import { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-textfield";
 import "../../../src/components/ha-radio";
 import type { HaRadio } from "../../../src/components/ha-radio";
 import {
@@ -24,9 +25,12 @@ import {
 } from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import { HomeAssistant, TranslationDict } from "../../../src/types";
+import {
+  HomeAssistant,
+  TranslationDict,
+  ValueChangedEvent,
+} from "../../../src/types";
 import "./supervisor-formfield-label";
-import type { HaTextField } from "../../../src/components/ha-textfield";
 
 type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
   keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
@@ -72,7 +76,7 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorBackupContent extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public localize?: LocalizeFunc;
+  @property() public localize?: LocalizeFunc;
 
   @property({ attribute: false }) public supervisor?: Supervisor;
 
@@ -96,7 +100,7 @@ export class SupervisorBackupContent extends LitElement {
 
   @property() public confirmBackupPassword = "";
 
-  @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;
+  @query("paper-input, ha-radio, ha-checkbox", true) private _focusTarget;
 
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
@@ -147,13 +151,13 @@ export class SupervisorBackupContent extends LitElement {
                 )
               : this.backup.date}
           </div>`
-        : html`<ha-textfield
+        : html`<paper-input
             name="backupName"
             .label=${this._localize("name")}
             .value=${this.backupName}
-            @change=${this._handleTextValueChanged}
+            @value-changed=${this._handleTextValueChanged}
           >
-          </ha-textfield>`}
+          </paper-input>`}
       ${!this.backup || this.backup.type === "full"
         ? html`<div class="sub-header">
               ${!this.backup
@@ -261,23 +265,23 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupHasPassword
         ? html`
-            <ha-textfield
+            <paper-input
               .label=${this._localize("password")}
               type="password"
               name="backupPassword"
               .value=${this.backupPassword}
-              @change=${this._handleTextValueChanged}
+              @value-changed=${this._handleTextValueChanged}
             >
-            </ha-textfield>
+            </paper-input>
             ${!this.backup
-              ? html`<ha-textfield
+              ? html` <paper-input
                   .label=${this._localize("confirm_password")}
                   type="password"
                   name="confirmBackupPassword"
                   .value=${this.confirmBackupPassword}
-                  @change=${this._handleTextValueChanged}
+                  @value-changed=${this._handleTextValueChanged}
                 >
-                </ha-textfield>`
+                </paper-input>`
               : ""}
           `
         : ""}
@@ -425,9 +429,9 @@ export class SupervisorBackupContent extends LitElement {
     this[input.name] = input.value;
   }
 
-  private _handleTextValueChanged(ev: InputEvent) {
-    const input = ev.currentTarget as HaTextField;
-    this[input.name!] = input.value;
+  private _handleTextValueChanged(ev: ValueChangedEvent<string>) {
+    const input = ev.currentTarget as PaperInputElement;
+    this[input.name!] = ev.detail.value;
   }
 
   private _toggleHasPassword(): void {

hassio/src/dashboard/hassio-addons.ts

@@ -20,7 +20,7 @@ class HassioAddons extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @state() private _filter?: string;
 
@@ -128,7 +128,6 @@ class HassioAddons extends LitElement {
         ha-card {
           cursor: pointer;
           overflow: hidden;
-          direction: ltr;
         }
         .search {
           position: sticky;

hassio/src/dashboard/hassio-dashboard.ts

@@ -21,7 +21,7 @@ class HassioDashboard extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
@@ -133,8 +133,6 @@ class HassioDashboard extends LitElement {
           position: fixed;
           right: calc(16px + env(safe-area-inset-right));
           bottom: calc(16px + env(safe-area-inset-bottom));
-          inset-inline-end: calc(16px + env(safe-area-inset-right));
-          inset-inline-start: initial;
           z-index: 1;
         }
       `,

hassio/src/dashboard/hassio-update.ts

@@ -151,9 +151,3 @@ export class HassioUpdate extends LitElement {
     ];
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-update": HassioUpdate;
-  }
-}

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

@@ -27,7 +27,8 @@ const SCHEMA = memoizeOne(
 class HassioBackupLocationDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _dialogParams?: HassioBackupLocationDialogParams;
+  @property({ attribute: false })
+  public _dialogParams?: HassioBackupLocationDialogParams;
 
   @state() private _data?: { default_backup_mount: string | null };
 

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,

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

@@ -4,6 +4,7 @@ import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
@@ -13,7 +14,6 @@ import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-radio";
@@ -34,7 +34,6 @@ import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioNetworkDialogParams } from "./show-dialog-network";
-import type { HaTextField } from "../../../../src/components/ha-textfield";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -246,7 +245,7 @@ export class DialogHassioNetwork
                       ${this._wifiConfiguration.auth === "wpa-psk" ||
                       this._wifiConfiguration.auth === "wep"
                         ? html`
-                            <ha-textfield
+                            <paper-input
                               class="flex-auto"
                               type="password"
                               id="psk"
@@ -254,9 +253,10 @@ export class DialogHassioNetwork
                                 "dialog.network.wifi_password"
                               )}
                               version="wifi"
-                              @change=${this._handleInputValueChangedWifi}
+                              @value-changed=${this
+                                ._handleInputValueChangedWifi}
                             >
-                            </ha-textfield>
+                            </paper-input>
                           `
                         : ""}
                     `
@@ -358,33 +358,33 @@ export class DialogHassioNetwork
         </div>
         ${this._interface![version].method === "static"
           ? html`
-              <ha-textfield
+              <paper-input
                 class="flex-auto"
                 id="address"
                 .label=${this.supervisor.localize("dialog.network.ip_netmask")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].address)}
-                @change=${this._handleInputValueChanged}
+                @value-changed=${this._handleInputValueChanged}
               >
-              </ha-textfield>
-              <ha-textfield
+              </paper-input>
+              <paper-input
                 class="flex-auto"
                 id="gateway"
                 .label=${this.supervisor.localize("dialog.network.gateway")}
                 .version=${version}
                 .value=${this._interface![version].gateway}
-                @change=${this._handleInputValueChanged}
+                @value-changed=${this._handleInputValueChanged}
               >
-              </ha-textfield>
-              <ha-textfield
+              </paper-input>
+              <paper-input
                 class="flex-auto"
                 id="nameservers"
                 .label=${this.supervisor.localize("dialog.network.dns_servers")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].nameservers)}
-                @change=${this._handleInputValueChanged}
+                @value-changed=${this._handleInputValueChanged}
               >
-              </ha-textfield>
+              </paper-input>
             `
           : ""}
       </ha-expansion-panel>
@@ -517,11 +517,11 @@ export class DialogHassioNetwork
     this.requestUpdate("_wifiConfiguration");
   }
 
-  private _handleInputValueChanged(ev: Event): void {
-    const source = ev.target as HaTextField;
-    const value = source.value;
+  private _handleInputValueChanged(ev: CustomEvent): void {
+    const value: string | null | undefined = (ev.target as PaperInputElement)
+      .value;
     const version = (ev.target as any).version as "ipv4" | "ipv6";
-    const id = source.id;
+    const id = (ev.target as PaperInputElement).id;
 
     if (
       !value ||
@@ -535,10 +535,10 @@ export class DialogHassioNetwork
     this._interface[version]![id] = value;
   }
 
-  private _handleInputValueChangedWifi(ev: Event): void {
-    const source = ev.target as HaTextField;
-    const value = source.value;
-    const id = source.id;
+  private _handleInputValueChangedWifi(ev: CustomEvent): void {
+    const value: string | null | undefined = (ev.target as PaperInputElement)
+      .value;
+    const id = (ev.target as PaperInputElement).id;
 
     if (
       !value ||
@@ -630,7 +630,7 @@ export class DialogHassioNetwork
           --expansion-panel-summary-padding: 0 16px;
           margin: 4px 0;
         }
-        ha-textfield {
+        paper-input {
           padding: 0 14px;
         }
         mwc-list-item {

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

@@ -157,10 +157,11 @@ class HassioRegistriesDialog extends LitElement {
   }
 
   public focus(): void {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 

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

@@ -1,5 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDeleteOff } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
@@ -25,14 +27,12 @@ import {
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
-import type { HaTextField } from "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-textfield";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @query("#repository_input", true) private _optionInput?: HaTextField;
+  @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
   @state() private _repositories?: HassioAddonRepository[];
 
@@ -145,7 +145,7 @@ class HassioRepositoriesDialog extends LitElement {
               )
             : html`<paper-item> No repositories </paper-item>`}
           <div class="layout horizontal bottom">
-            <ha-textfield
+            <paper-input
               class="flex-auto"
               id="repository_input"
               .value=${this._dialogParams!.url || ""}
@@ -154,7 +154,7 @@ class HassioRepositoriesDialog extends LitElement {
               )}
               @keydown=${this._handleKeyAdd}
               dialogInitialFocus
-            ></ha-textfield>
+            ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._processing
                 ? html`<ha-circular-progress
@@ -209,10 +209,11 @@ class HassioRepositoriesDialog extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 

hassio/src/hassio-main.ts

@@ -21,7 +21,7 @@ export class HassioMain extends SupervisorBaseElement {
 
   @property({ attribute: false }) public panel!: HassioPanelInfo;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);

hassio/src/hassio-panel-router.ts

@@ -16,7 +16,7 @@ class HassioPanelRouter extends HassRouterPage {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   protected routerOptions: RouterOptions = {
     beforeRender: (page: string) =>

hassio/src/hassio-panel.ts

@@ -14,7 +14,7 @@ class HassioPanel extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 

hassio/src/hassio-router.ts

@@ -18,7 +18,7 @@ class HassioRouter extends HassRouterPage {
 
   @property({ attribute: false }) public panel!: HassioPanelInfo;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   protected routerOptions: RouterOptions = {
     // Hass.io has a page with tabs, so we route all non-matching routes to it.

hassio/src/supervisor-base-element.ts

@@ -29,10 +29,6 @@ import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
 import { HomeAssistant, Route } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";
-import {
-  computeRTLDirection,
-  setDirectionStyles,
-} from "../../src/common/util/compute_rtl";
 
 declare global {
   interface HASSDomEvents {
@@ -99,7 +95,6 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
     if (changedProperties.has("_language") || !this.hasUpdated) {
       this._initializeLocalize();
-      this._applyDirection(this.hass);
     }
   }
 
@@ -220,9 +215,4 @@ export class SupervisorBaseElement extends urlSyncMixin(
       );
     }
   }
-
-  private _applyDirection(hass: HomeAssistant) {
-    const direction = computeRTLDirection(hass);
-    setDirectionStyles(direction, this);
-  }
 }

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

@@ -1,10 +1,9 @@
+import "../../../src/components/ha-ansi-to-html";
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
-import "../../../src/components/ha-ansi-to-html";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-select";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";

hassio/src/system/hassio-system.ts

@@ -18,7 +18,7 @@ class HassioSystem extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 

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

@@ -94,7 +94,7 @@ class UpdateAvailableCard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public addonSlug?: string;
 

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

@@ -11,7 +11,7 @@ class UpdateAvailableDashboard extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 

lint-staged.config.js

@@ -2,7 +2,6 @@ export default {
   "*.?(c|m){js,ts}": [
     "eslint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
     "prettier --cache --write",
-    "lit-analyzer --quiet",
   ],
   "*.{json,css,md,markdown,html,y?aml}": "prettier --cache --write",
   "translations/*/*.json": (files) =>

package.json

@@ -13,8 +13,8 @@
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "tsc",
-    "lint:lit": "lit-analyzer \"{.,*}/src/**/*.ts\"",
-    "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types && yarn run lint:lit",
+    "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
+    "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
     "postinstall": "husky install",
     "prepack": "pinst --disable",
@@ -25,24 +25,24 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.8",
+    "@babel/runtime": "7.23.5",
     "@braintree/sanitize-url": "7.0.0",
-    "@codemirror/autocomplete": "6.12.0",
-    "@codemirror/commands": "6.3.3",
-    "@codemirror/language": "6.10.0",
+    "@codemirror/autocomplete": "6.11.1",
+    "@codemirror/commands": "6.3.2",
+    "@codemirror/language": "6.9.3",
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.5",
-    "@codemirror/state": "6.4.0",
-    "@codemirror/view": "6.23.0",
+    "@codemirror/state": "6.3.3",
+    "@codemirror/view": "6.22.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.12.2",
-    "@formatjs/intl-displaynames": "6.6.6",
+    "@formatjs/intl-datetimeformat": "6.12.0",
+    "@formatjs/intl-displaynames": "6.6.4",
     "@formatjs/intl-getcanonicallocales": "2.3.0",
-    "@formatjs/intl-listformat": "7.5.5",
-    "@formatjs/intl-locale": "3.4.5",
-    "@formatjs/intl-numberformat": "8.9.2",
-    "@formatjs/intl-pluralrules": "5.2.12",
-    "@formatjs/intl-relativetimeformat": "11.2.12",
+    "@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",
@@ -53,7 +53,7 @@
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.6",
     "@lit-labs/observers": "2.0.2",
-    "@lit-labs/virtualizer": "2.0.12",
+    "@lit-labs/virtualizer": "2.0.11",
     "@lrnwebcomponents/simple-tooltip": "7.0.18",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
@@ -80,17 +80,18 @@
     "@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/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.4",
-    "@vaadin/vaadin-themable-mixin": "24.3.4",
+    "@vaadin/combo-box": "24.2.5",
+    "@vaadin/vaadin-themable-mixin": "24.2.5",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -100,25 +101,25 @@
     "app-datepicker": "5.1.1",
     "chart.js": "4.4.1",
     "comlink": "4.4.1",
-    "core-js": "3.35.1",
+    "core-js": "3.33.3",
     "cropperjs": "1.6.1",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
-    "element-internals-polyfill": "1.3.10",
+    "element-internals-polyfill": "1.3.9",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
-    "hls.js": "1.5.1",
+    "hls.js": "1.4.13",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.10",
+    "intl-messageformat": "10.5.8",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "11.1.1",
+    "marked": "11.0.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -127,7 +128,7 @@
     "qrcode": "1.5.3",
     "roboto-fontface": "0.10.0",
     "rrule": "2.8.1",
-    "sortablejs": "1.15.2",
+    "sortablejs": "1.15.1",
     "stacktrace-js": "2.0.2",
     "superstruct": "1.0.3",
     "tinykeys": "2.1.0",
@@ -137,7 +138,7 @@
     "unfetch": "5.0.0",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
-    "vue": "2.7.16",
+    "vue": "2.7.15",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.0.0",
@@ -149,14 +150,14 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.23.7",
-    "@babel/helper-define-polyfill-provider": "0.5.0",
-    "@babel/plugin-proposal-decorators": "7.23.7",
-    "@babel/plugin-transform-runtime": "7.23.7",
-    "@babel/preset-env": "7.23.8",
+    "@babel/core": "7.23.5",
+    "@babel/helper-define-polyfill-provider": "0.4.3",
+    "@babel/plugin-proposal-decorators": "7.23.5",
+    "@babel/plugin-transform-runtime": "7.23.4",
+    "@babel/preset-env": "7.23.5",
     "@babel/preset-typescript": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.9.1",
-    "@koa/cors": "5.0.0",
+    "@bundle-stats/plugin-webpack-filter": "4.8.3",
+    "@koa/cors": "4.0.0",
     "@lokalise/node-api": "12.1.0",
     "@octokit/auth-oauth-device": "6.0.1",
     "@octokit/plugin-retry": "6.0.1",
@@ -164,18 +165,18 @@
     "@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.13",
+    "@types/chromecast-caf-receiver": "6.0.12",
     "@types/chromecast-caf-sender": "1.0.8",
     "@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.4.2",
+    "@types/luxon": "3.3.7",
     "@types/mocha": "10.0.6",
     "@types/qrcode": "1.5.5",
     "@types/serve-handler": "6.1.4",
@@ -183,22 +184,22 @@
     "@types/tar": "6.1.10",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.19.0",
-    "@typescript-eslint/parser": "6.19.0",
+    "@typescript-eslint/eslint-plugin": "6.13.2",
+    "@typescript-eslint/parser": "6.13.2",
     "@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.55.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.1.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-import": "2.29.0",
+    "eslint-plugin-lit": "1.10.1",
     "eslint-plugin-lit-a11y": "4.1.1",
     "eslint-plugin-unused-imports": "3.0.0",
     "eslint-plugin-wc": "2.0.4",
@@ -216,27 +217,26 @@
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
     "lint-staged": "15.2.0",
-    "lit-analyzer": "2.0.3",
+    "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.3",
+    "open": "9.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.2.4",
+    "prettier": "3.1.0",
     "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.10.0",
     "serve-handler": "6.1.5",
     "sinon": "17.0.1",
     "source-map-url": "0.4.1",
-    "systemjs": "6.14.3",
+    "systemjs": "6.14.2",
     "tar": "6.2.0",
-    "terser-webpack-plugin": "5.3.10",
-    "transform-async-modules-webpack-plugin": "1.0.2",
-    "ts-lit-plugin": "2.0.2",
+    "terser-webpack-plugin": "5.3.9",
+    "ts-lit-plugin": "2.0.1",
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
@@ -245,7 +245,7 @@
     "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",

pyproject.toml

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

script/version_bump.cjs

@@ -1,10 +1,7 @@
 #!/usr/bin/env node
-/* eslint-disable no-console */
-import fs from "fs";
-import util from "util";
-import child_process from "child_process";
-
-const exec = util.promisify(child_process.exec);
+const fs = require("fs");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
 
 function patch(version) {
   const parts = version.split(".");
@@ -21,7 +18,7 @@ function today() {
 
 function auto(version) {
   const todayVersion = today();
-  if (todayVersion.split(".")[0] !== version.split(".")[0]) {
+  if (todayVersion !== version) {
     return todayVersion;
   }
   return patch(version);
@@ -47,7 +44,7 @@ async function main(args) {
     commit = true;
   } else {
     method = args.length > 0 && methods[args[0]];
-    commit = args.length > 1 && args[1] === "--commit";
+    commit = args.length > 1 && args[1] == "--commit";
   }
 
   if (!method) {

src/auth/ha-auth-flow.ts

@@ -21,6 +21,7 @@ import {
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
+import { fireEvent } from "../common/dom/fire_event";
 
 type State = "loading" | "error" | "step";
 
@@ -34,13 +35,11 @@ export class HaAuthFlow extends LitElement {
 
   @property() public oauth2State?: string;
 
-  @property({ attribute: false }) public localize!: LocalizeFunc;
+  @property() public localize!: LocalizeFunc;
 
   @property({ attribute: false }) public step?: DataEntryFlowStep;
 
-  @property({ type: Boolean }) public initStoreToken = false;
-
-  @state() private _storeToken = false;
+  @property({ type: Boolean }) private storeToken = false;
 
   @state() private _state: State = "loading";
 
@@ -57,10 +56,6 @@ export class HaAuthFlow extends LitElement {
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
-    if (!this.hasUpdated) {
-      this._storeToken = this.initStoreToken;
-    }
-
     if (!changedProps.has("step")) {
       return;
     }
@@ -160,6 +155,11 @@ 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) {
@@ -168,7 +168,12 @@ export class HaAuthFlow extends LitElement {
 
         return html`
           ${this._renderStep(this.step)}
-          <div class="action">
+          <div class="action ${showBack ? "space-between" : ""}">
+            ${showBack
+              ? html`<mwc-button @click=${this._localFlow}>
+                  ${this.localize("ui.panel.page-authorize.form.previous")}
+                </mwc-button>`
+              : nothing}
             <mwc-button
               raised
               @click=${this._handleSubmit}
@@ -222,8 +227,7 @@ export class HaAuthFlow extends LitElement {
           </h1>
           ${this._computeStepDescription(step)}
           <ha-auth-form
-            .localize=${this.localize}
-            .data=${this._stepData!}
+            .data=${this._stepData}
             .schema=${autocompleteLoginFields(step.data_schema)}
             .error=${step.errors}
             .disabled=${this._submitting}
@@ -242,7 +246,7 @@ export class HaAuthFlow extends LitElement {
                     )}
                   >
                     <ha-checkbox
-                      .checked=${this._storeToken}
+                      .checked=${this.storeToken}
                       @change=${this._storeTokenChanged}
                     ></ha-checkbox>
                   </ha-formfield>
@@ -265,7 +269,7 @@ 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) {
@@ -299,7 +303,7 @@ export class HaAuthFlow extends LitElement {
             this.redirectUri!,
             data.result,
             this.oauth2State,
-            this._storeToken
+            this.storeToken
           );
           return;
         }
@@ -381,7 +385,7 @@ export class HaAuthFlow extends LitElement {
           this.redirectUri!,
           newStep.result,
           this.oauth2State,
-          this._storeToken
+          this.storeToken
         );
         return;
       }
@@ -396,6 +400,10 @@ 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

@@ -59,7 +59,7 @@ export class HaAuthFormString extends HaFormString {
               html`<div style="width: 24px"></div>`
             : this.schema.description?.suffix
         }
-        .validationMessage=${this.schema.required ? this.localize?.("ui.panel.page-authorize.form.error_required") : undefined}
+        .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
         @change=${this._valueChanged}
         ></ha-auth-textfield>

src/auth/ha-auth-form.ts

@@ -1,23 +1,11 @@
 /* eslint-disable lit/prefer-static-styles */
 import { html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";
 import { HaForm } from "../components/ha-form/ha-form";
 import "./ha-auth-form-string";
-import { LocalizeFunc } from "../common/translations/localize";
-
-const localizeBaseKey = "ui.panel.page-authorize.form";
 
 @customElement("ha-auth-form")
 export class HaAuthForm extends HaForm {
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
-  protected getFormProperties(): Record<string, any> {
-    return {
-      localize: this.localize,
-      localizeBaseKey,
-    };
-  }
-
   protected fieldElementName(type: string): string {
     if (type === "string") {
       return `ha-auth-form-${type}`;

src/auth/ha-auth-textfield.ts

@@ -47,7 +47,7 @@ export class HaAuthTextField extends HaTextField {
     // TODO: live() directive needs casting for lit-analyzer
     // https://github.com/runem/lit-analyzer/pull/91/files
     // TODO: lit-analyzer labels min/max as (number|string) instead of string
-    return html`<input
+    return html` <input
       aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
       aria-controls=${ifDefined(ariaControlsOrUndef)}
       aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}

src/auth/ha-authorize.ts

@@ -13,6 +13,7 @@ import {
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
+import "./ha-local-auth-flow";
 
 import("./ha-pick-auth-provider");
 
@@ -35,12 +36,12 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _authProviders?: AuthProvider[];
 
-  @state() private _preselectStoreToken = false;
-
   @state() private _ownInstance = false;
 
   @state() private _error?: string;
 
+  @state() private _forceDefaultLogin = false;
+
   constructor() {
     super();
     const query = extractSearchParamsObject() as AuthUrlSearchParams;
@@ -83,7 +84,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           display: block;
           margin-top: 24px;
         }
-        ha-auth-flow {
+        ha-auth-flow,
+        ha-local-auth-flow {
           display: flex;
           justify-content: center;
           flex-direction: column;
@@ -174,29 +176,44 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           </ha-alert>`
         : nothing}
 
-      <div class="card-content">
+      <div
+        class="card-content"
+        @default-login-flow=${this._handleDefaultLoginFlow}
+      >
         ${!this._authProvider
           ? html`<p>
               ${this.localize("ui.panel.page-authorize.initializing")}
             </p> `
-          : html`<ha-auth-flow
+          : !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}
-                .initStoreToken=${this._preselectStoreToken}
-              ></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>
-                  `
-                : ""}`}
+                .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
@@ -302,14 +319,13 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         return;
       }
 
-      if (authProviders.providers.length === 0) {
+      if (authProviders.length === 0) {
         this._error = "No auth providers returned. Unable to finish login.";
         return;
       }
 
-      this._authProviders = authProviders.providers;
-      this._authProvider = authProviders.providers[0];
-      this._preselectStoreToken = authProviders.preselect_remember_me;
+      this._authProviders = authProviders;
+      this._authProvider = authProviders[0];
     } catch (err: any) {
       this._error = "Unable to fetch auth providers.";
       // eslint-disable-next-line
@@ -317,6 +333,10 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
+  private _handleDefaultLoginFlow(ev) {
+    this._forceDefaultLogin = ev.detail.value;
+  }
+
   private async _handleAuthProviderPick(ev) {
     this._authProvider = ev.detail;
   }
@@ -332,9 +352,3 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-authorize": HaAuthorize;
-  }
-}

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

@@ -0,0 +1,485 @@
+/* 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

@@ -8,9 +8,6 @@ import "../components/ha-list-item";
 import { AuthProvider } from "../data/auth";
 
 declare global {
-  interface HTMLElementTagNameMap {
-    "ha-pick-auth-provider": HaPickAuthProvider;
-  }
   interface HASSDomEvents {
     "pick-auth-provider": AuthProvider;
   }
@@ -18,9 +15,9 @@ declare global {
 
 @customElement("ha-pick-auth-provider")
 export class HaPickAuthProvider extends LitElement {
-  @property({ attribute: false }) public authProviders: AuthProvider[] = [];
+  @property() public authProviders: AuthProvider[] = [];
 
-  @property({ attribute: false }) public localize!: LocalizeFunc;
+  @property() public localize!: LocalizeFunc;
 
   protected render() {
     return html`

src/common/const.ts

@@ -18,6 +18,7 @@ import {
   mdiChatSleep,
   mdiClipboardList,
   mdiClock,
+  mdiCloudUpload,
   mdiCog,
   mdiCommentAlert,
   mdiCounter,
@@ -28,7 +29,6 @@ import {
   mdiFlash,
   mdiFlower,
   mdiFormatListBulleted,
-  mdiFormatListCheckbox,
   mdiFormTextbox,
   mdiGauge,
   mdiGoogleAssistant,
@@ -64,7 +64,6 @@ import {
   mdiTransmissionTower,
   mdiWater,
   mdiWaterPercent,
-  mdiWeatherPartlyCloudy,
   mdiWeatherPouring,
   mdiWeatherRainy,
   mdiWeatherWindy,
@@ -126,9 +125,9 @@ export const FIXED_DOMAIN_ICONS = {
   time: mdiClock,
   timer: mdiTimerOutline,
   tts: mdiSpeakerMessage,
+  updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   wake_word: mdiChatSleep,
-  weather: mdiWeatherPartlyCloudy,
   zone: mdiMapMarkerRadius,
 };
 
@@ -167,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,
@@ -252,7 +250,6 @@ export const DOMAINS_INPUT_ROW = [
   "text",
   "time",
   "vacuum",
-  "valve",
 ];
 
 /** States that we consider "off". */
@@ -271,7 +268,6 @@ export const DOMAINS_TOGGLE = new Set([
   "group",
   "automation",
   "humidifier",
-  "valve",
 ]);
 
 /** Domains that have a dynamic entity image / picture. */

src/common/datetime/format_date.ts

@@ -1,8 +1,7 @@
 import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
-import { DateFormat, FrontendLocaleData } from "../../data/translation";
+import { FrontendLocaleData, DateFormat } from "../../data/translation";
 import "../../resources/intl-polyfill";
-import { resolveTimeZone } from "./resolve-time-zone";
 
 // Tuesday, August 10
 export const formatDateWeekdayDay = (
@@ -17,7 +16,7 @@ const formatDateWeekdayDayMem = memoizeOne(
       weekday: "long",
       month: "long",
       day: "numeric",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -34,7 +33,7 @@ const formatDateMem = memoizeOne(
       year: "numeric",
       month: "long",
       day: "numeric",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -51,7 +50,7 @@ const formatDateShortMem = memoizeOne(
       year: "numeric",
       month: "short",
       day: "numeric",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -106,7 +105,7 @@ const formatDateNumericMem = memoizeOne(
         year: "numeric",
         month: "numeric",
         day: "numeric",
-        timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+        timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
       });
     }
 
@@ -114,7 +113,7 @@ const formatDateNumericMem = memoizeOne(
       year: "numeric",
       month: "numeric",
       day: "numeric",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     });
   }
 );
@@ -131,7 +130,7 @@ const formatDateVeryShortMem = memoizeOne(
     new Intl.DateTimeFormat(locale.language, {
       day: "numeric",
       month: "short",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -147,7 +146,7 @@ const formatDateMonthYearMem = memoizeOne(
     new Intl.DateTimeFormat(locale.language, {
       month: "long",
       year: "numeric",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -162,7 +161,7 @@ const formatDateMonthMem = memoizeOne(
   (locale: FrontendLocaleData, serverTimeZone: string) =>
     new Intl.DateTimeFormat(locale.language, {
       month: "long",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -177,7 +176,7 @@ const formatDateYearMem = memoizeOne(
   (locale: FrontendLocaleData, serverTimeZone: string) =>
     new Intl.DateTimeFormat(locale.language, {
       year: "numeric",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -192,7 +191,7 @@ const formatDateWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData, serverTimeZone: string) =>
     new Intl.DateTimeFormat(locale.language, {
       weekday: "long",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -207,6 +206,6 @@ const formatDateWeekdayShortMem = memoizeOne(
   (locale: FrontendLocaleData, serverTimeZone: string) =>
     new Intl.DateTimeFormat(locale.language, {
       weekday: "short",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );

src/common/datetime/format_date_time.ts

@@ -4,7 +4,6 @@ import { FrontendLocaleData } from "../../data/translation";
 import "../../resources/intl-polyfill";
 import { formatDateNumeric } from "./format_date";
 import { formatTime } from "./format_time";
-import { resolveTimeZone } from "./resolve-time-zone";
 import { useAmPm } from "./use_am_pm";
 
 // August 9, 2021, 8:23 AM
@@ -23,7 +22,7 @@ const formatDateTimeMem = memoizeOne(
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -43,7 +42,7 @@ const formatShortDateTimeWithYearMem = memoizeOne(
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -62,7 +61,7 @@ const formatShortDateTimeMem = memoizeOne(
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -83,7 +82,7 @@ const formatDateTimeWithSecondsMem = memoizeOne(
       minute: "2-digit",
       second: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 

src/common/datetime/format_time.ts

@@ -2,7 +2,6 @@ import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import "../../resources/intl-polyfill";
-import { resolveTimeZone } from "./resolve-time-zone";
 import { useAmPm } from "./use_am_pm";
 
 // 9:15 PM || 21:15
@@ -18,7 +17,7 @@ const formatTimeMem = memoizeOne(
       hour: "numeric",
       minute: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -36,7 +35,7 @@ const formatTimeWithSecondsMem = memoizeOne(
       minute: "2-digit",
       second: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -54,7 +53,7 @@ const formatTimeWeekdayMem = memoizeOne(
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
@@ -72,6 +71,6 @@ const formatTime24hMem = memoizeOne(
       hour: "numeric",
       minute: "2-digit",
       hour12: false,
-      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );