Add buttons on mobile to move sections

Revert "Transform helper to warning for edit view type"
This reverts commit 3abdffda9c.
2026-08-10 08:31:57 +00:00 · 2024-03-01 15:37:23 +01:00 · 2024-03-01 14:57:08 +01:00 · 2024-03-01 14:55:34 +01:00 · 2024-03-01 13:09:21 +01:00 · 2024-03-01 13:09:10 +01:00
898 changed files with 21016 additions and 13270 deletions
@@ -5,6 +5,7 @@
    "context": ".."
  },
  "appPort": "8124:8123",
+  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
  "postStartCommand": "script/bootstrap",
  "containerEnv": {
    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
@@ -24,14 +24,20 @@ Design:
          - src/fake_data/**

 Dependencies:
-  - changed-files:
-      - any-glob-to-any-file:
-          - package.json
-          - renovate.json
-          - yarn.lock
-          - .yarn/**
-          - .yarnrc.yml
-          - .nvmrc
+  - 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/"

 GitHub Actions:
  - changed-files:
@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -37,17 +37,20 @@ 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@v3.3.2
+        uses: actions/cache@v4.0.0
        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:
@@ -57,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -75,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -86,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/[email protected].3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -99,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -110,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/[email protected].3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -63,7 +63,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -19,7 +19,7 @@ jobs:
        uses: actions/[email protected]

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -24,7 +24,7 @@ jobs:
        uses: actions/[email protected]

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -28,7 +28,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -42,7 +42,7 @@ jobs:
          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}

      - name: Bump version
-        run: script/version_bump.cjs nightly
+        run: script/version_bump.js 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/[email protected].3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/[email protected].3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: translations
          path: translations.tar.gz
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6.0.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -34,7 +34,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
        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@2023.10.5
+        uses: home-assistant/wheels@2024.01.0
        with:
          abi: cp311
          tag: musllinux_1_2
@@ -0,0 +1,13 @@
+diff --git a/simple-tooltip.js b/simple-tooltip.js
+index 78a87f6a223925f0e29fbedb268c85a142ec6985..3d686dd6a3d5a93342b4b01408089fc316b408ca 100644
+--- a/simple-tooltip.js
+++ b/simple-tooltip.js
+@@ -195,6 +195,8 @@ class SimpleTooltip extends LitElement {
+         .hidden {
+           position: absolute;
+           left: -10000px;
+          inset-inline-start: -10000px;
+          inset-inline-end: initial;
+           top: auto;
+           width: 1px;
+           height: 1px;
@@ -1,39 +0,0 @@
-diff --git a/modular/sortable.complete.esm.js b/modular/sortable.complete.esm.js
-index 02e9f2d6bebeb430fe6e7c1cc3f9c3c9df051f14..bb8268b0844a1faa4108cc92c0be2a3dbaf23f83 100644
--- a/modular/sortable.complete.esm.js
-+++ b/modular/sortable.complete.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
-        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index b04c8b4634f7c6b4ef1aadbb48afe6564306dea9..39a107163c8c336ebd669b5ea8a936af87e1c1e7 100644
--- a/modular/sortable.core.esm.js
-+++ b/modular/sortable.core.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
-        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.esm.js b/modular/sortable.esm.js
-index 6ec7ed1bb557e21c2578200161e989c65d23150b..0a05475a22904472fac6c13f524c674da76584b0 100644
--- a/modular/sortable.esm.js
-+++ b/modular/sortable.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
-        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
@@ -0,0 +1,73 @@
+diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
+index 93ba17509e2e8583ab241fea6845fbe714c584a2..de0651ddb5dced30d36f7d764da0dd0b441f523f 100644
+--- a/modular/sortable.core.esm.js
+++ b/modular/sortable.core.esm.js
+@@ -1461,7 +1461,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           }
+           target = parent; // store last element
+         }
+-        /* jshint boss:true */ while (parent = parent.parentNode);
+        /* jshint boss:true */ while (parent = parent.parentNode || parent.getRootNode().host);
+       }
+       _unhideGhostForTarget();
+     }
+@@ -1781,11 +1781,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         }
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
+           capture();
+-          if (elLastChild && elLastChild.nextSibling) {
+-            // the last draggable element is not the last node
+-            el.insertBefore(dragEl, elLastChild.nextSibling);
+-          } else {
+-            el.appendChild(dragEl);
+          try {
+            if (elLastChild && elLastChild.nextSibling) {
+              // the last draggable element is not the last node
+              el.insertBefore(dragEl, elLastChild.nextSibling);
+            } else {
+              el.appendChild(dragEl);
+            }
+          }
+          catch(err) {
+            return completed(false);
+           }
+           parentEl = el; // actualization
+ 
+@@ -1802,7 +1807,13 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         targetRect = getRect(target);
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
+           capture();
+-          el.insertBefore(dragEl, firstChild);
+          try {
+            el.insertBefore(dragEl, firstChild);
+          }
+          catch(err) {
+            return completed(false);
+          }
+          
+           parentEl = el; // actualization
+ 
+           changed();
+@@ -1849,12 +1860,17 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           _silent = true;
+           setTimeout(_unsilent, 30);
+           capture();
+-          if (after && !nextSibling) {
+-            el.appendChild(dragEl);
+-          } else {
+-            target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+-          }
+ 
+          try {
+            if (after && !nextSibling) {
+              el.appendChild(dragEl);
+            } else {
+              target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+            }
+          }
+          catch(err) {
+            return completed(false);
+          }
+           // Undo chrome's scroll adjustment (has no effect on other browsers)
+           if (scrolledPastTop) {
+             scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs
@@ -8,7 +8,10 @@ const zopfliOptions = { threshold: 150 };

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

@@ -115,7 +115,9 @@ gulp.task("webpack-prod-app", () =>

 gulp.task("webpack-dev-server-demo", () =>
  runDevServer({
-    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createDemoConfig({ isProdBuild: false, latestBuild: true })
+    ),
    contentBase: paths.demo_output_root,
    port: 8090,
  })
@@ -131,7 +133,9 @@ gulp.task("webpack-prod-demo", () =>

 gulp.task("webpack-dev-server-cast", () =>
  runDevServer({
-    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createCastConfig({ isProdBuild: false, latestBuild: true })
+    ),
    contentBase: paths.cast_output_root,
    port: 8080,
    // Accessible from the network, because that's how Cast hits it.
@@ -174,8 +178,9 @@ gulp.task("webpack-prod-hassio", () =>

 gulp.task("webpack-dev-server-gallery", () =>
  runDevServer({
-    // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
-    compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createGalleryConfig({ isProdBuild: false, latestBuild: true })
+    ),
    contentBase: paths.gallery_output_root,
    port: 8100,
    listenHost: "0.0.0.0",
@@ -7,6 +7,9 @@ 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");

@@ -142,17 +145,6 @@ 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({
@@ -163,6 +155,8 @@ 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"],
@@ -31,11 +31,11 @@ import "./hc-layout";

@customElement("hc-cast")
 class HcCast extends LitElement {
-  @property() public auth!: Auth;
+  @property({ attribute: false }) public auth!: Auth;

-  @property() public connection!: Connection;
+  @property({ attribute: false }) public connection!: Connection;

-  @property() public castManager!: CastManager;
+  @property({ attribute: false }) public castManager!: CastManager;

  @state() private askWrite = false;

@@ -241,6 +241,8 @@ class HcCast extends LitElement {

      mwc-button ha-svg-icon {
        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
        height: 18px;
      }

@@ -10,13 +10,13 @@ import "../../../../src/components/ha-card";

@customElement("hc-layout")
 class HcLayout extends LitElement {
-  @property() public subtitle?: string | undefined;
+  @property() public subtitle?: string;

-  @property() public auth?: Auth;
+  @property({ attribute: false }) public auth?: Auth;

-  @property() public connection?: Connection;
+  @property({ attribute: false }) public connection?: Connection;

-  @property() public user?: HassUser;
+  @property({ attribute: false }) public user?: HassUser;

  protected render(): TemplateResult {
    return html`
@@ -12,8 +12,8 @@ class HcLaunchScreen extends LitElement {
    return html`
      <div class="container">
        <img
-          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"
+          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"
        />
        <div class="status">
          ${this.hass ? "Connected" : "Not Connected"}
@@ -28,7 +28,6 @@ class HcLaunchScreen extends LitElement {
      :host {
        display: block;
        height: 100vh;
-        padding-top: 64px;
        background-color: white;
        font-size: 24px;
      }
@@ -36,15 +35,13 @@ class HcLaunchScreen extends LitElement {
        display: flex;
        flex-direction: column;
        text-align: center;
+        align-items: center;
+        height: 100%;
+        justify-content: space-evenly;
      }
      img {
-        width: 717px;
-        height: 376px;
-        display: block;
-        margin: 0 auto;
-      }
-      .status {
-        padding-right: 54px;
+        max-width: 80%;
+        object-fit: cover;
      }
    `;
  }
@@ -17,7 +17,7 @@ class HcLovelace extends LitElement {
  @property({ attribute: false })
  public lovelaceConfig!: LovelaceConfig;

-  @property() public viewPath?: string | number;
+  @property() public viewPath?: string | number | null;

  @property() public urlPath: string | null = null;

@@ -93,6 +93,9 @@ class HcLovelace extends LitElement {
  }

  private get _viewIndex() {
+    if (this.viewPath === null) {
+      return 0;
+    }
    const selectedView = this.viewPath;
    const selectedViewInt = parseInt(selectedView as string, 10);
    for (let i = 0; i < this.lovelaceConfig.views.length; i++) {
@@ -51,10 +51,10 @@ export class HcMain extends HassElement {

  @state() private _lovelacePath: string | number | null = null;

-  @state() private _error?: string;
-
  @state() private _urlPath?: string | null;

+  @state() private _error?: string;
+
  private _hassUUID?: string;

  private _unsubLovelace?: UnsubscribeFunc;
@@ -81,7 +81,7 @@ export class HcMain extends HassElement {

    if (
      !this._lovelaceConfig ||
-      this._lovelacePath === null ||
+      this._urlPath === undefined ||
      // Guard against part of HA not being loaded yet.
      !this.hass ||
      !this.hass.states ||
@@ -99,8 +99,8 @@ export class HcMain extends HassElement {
      <hc-lovelace
        .hass=${this.hass}
        .lovelaceConfig=${this._lovelaceConfig}
-        .viewPath=${this._lovelacePath}
        .urlPath=${this._urlPath}
+        .viewPath=${this._lovelacePath}
        @config-refresh=${this._generateDefaultLovelaceConfig}
      ></hc-lovelace>
    `;
@@ -205,7 +205,6 @@ export class HcMain extends HassElement {
          expires_in: 0,
        }),
      });
-      this._hassUUID = msg.hassUUID;
    } catch (err: any) {
      const errorMessage = this._getErrorMessage(err);
      this._error = errorMessage;
@@ -225,6 +224,17 @@ export class HcMain extends HassElement {
      this.hass.connection.close();
    }
    this.initializeHass(auth, connection);
+    if (this._hassUUID !== msg.hassUUID) {
+      this._hassUUID = msg.hassUUID;
+      this._lovelaceConfig = undefined;
+      this._urlPath = undefined;
+      this._lovelacePath = null;
+      if (this._unsubLovelace) {
+        this._unsubLovelace();
+        this._unsubLovelace = undefined;
+      }
+      resourcesLoaded = false;
+    }
    this._error = undefined;
    this._sendStatus();
  }
@@ -233,7 +243,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) {
+    if (!this.hass?.connected) {
      this._sendStatus(msg.senderId!);
      this._error = "Cannot show Lovelace because we're not connected.";
      this._sendError(
@@ -260,7 +270,7 @@ export class HcMain extends HassElement {
    }

    this._error = undefined;
-    if (msg.urlPath === "lovelace") {
+    if (msg.urlPath === "lovelace" || msg.urlPath === undefined) {
      msg.urlPath = null;
    }
    this._lovelacePath = msg.viewPath;
@@ -275,7 +285,7 @@ export class HcMain extends HassElement {
        ],
      };
      this._urlPath = "energy";
-      this._lovelacePath = 0;
+      this._lovelacePath = null;
      this._sendStatus();
      return;
    }
@@ -284,6 +294,7 @@ 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)
@@ -17,12 +17,14 @@ import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFrontend } from "./stubs/frontend";
+import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
 import { mockRecorder } from "./stubs/recorder";
 import { mockTodo } from "./stubs/todo";
+import { mockSensor } from "./stubs/sensor";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
@@ -50,11 +52,13 @@ export class HaDemo extends HomeAssistantAppEl {
    mockHistory(hass);
    mockRecorder(hass);
    mockTodo(hass);
+    mockSensor(hass);
    mockSystemLog(hass);
    mockTemplate(hass);
    mockEvents(hass);
    mockMediaPlayer(hass);
    mockFrontend(hass);
+    mockIcons(hass);
    mockEnergy(hass);
    mockPersistentNotification(hass);
    mockConfigEntries(hass);
@@ -0,0 +1,33 @@
+import { IconCategory } from "../../../src/data/icons";
+import { ENTITY_COMPONENT_ICONS } from "../../../src/fake_data/entity_component_icons";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockIcons = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "frontend/get_icons",
+    async ({
+      category,
+      integration,
+    }: {
+      category: IconCategory;
+      integration?: string;
+    }) => {
+      if (integration) {
+        try {
+          const response = await fetch(
+            `https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/components/${integration}/icons.json`
+          ).then((resp) => resp.json());
+          return { resources: { [integration]: response[category] || {} } };
+        } catch {
+          return { resources: {} };
+        }
+      }
+      if (category === "entity_component") {
+        return {
+          resources: ENTITY_COMPONENT_ICONS,
+        };
+      }
+      return { resources: {} };
+    }
+  );
+};
@@ -0,0 +1,58 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSensor = (hass: MockHomeAssistant) => {
+  hass.mockWS("sensor/numeric_device_classes", () => [
+    {
+      numeric_device_classes: [
+        "volume_storage",
+        "gas",
+        "data_size",
+        "irradiance",
+        "wind_speed",
+        "volatile_organic_compounds",
+        "volatile_organic_compounds_parts",
+        "voltage",
+        "frequency",
+        "precipitation_intensity",
+        "volume",
+        "precipitation",
+        "battery",
+        "nitrogen_dioxide",
+        "speed",
+        "signal_strength",
+        "pm1",
+        "nitrous_oxide",
+        "atmospheric_pressure",
+        "data_rate",
+        "temperature",
+        "power_factor",
+        "aqi",
+        "current",
+        "volume_flow_rate",
+        "humidity",
+        "duration",
+        "ozone",
+        "distance",
+        "pressure",
+        "pm25",
+        "weight",
+        "energy",
+        "carbon_monoxide",
+        "apparent_power",
+        "illuminance",
+        "energy_storage",
+        "moisture",
+        "power",
+        "water",
+        "carbon_dioxide",
+        "ph",
+        "reactive_power",
+        "monetary",
+        "nitrogen_monoxide",
+        "pm10",
+        "sound_pressure",
+        "sulphur_dioxide",
+      ],
+    },
+  ]);
+};
@@ -21,4 +21,5 @@ export const mockTodo = (hass: MockHomeAssistant) => {
      },
    ] as TodoItem[],
  }));
+  hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };
@@ -1,5 +1,5 @@
 import { Button } from "@material/mwc-button";
-import { html, LitElement, css, TemplateResult } from "lit";
+import { html, LitElement, css, TemplateResult, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -9,9 +9,9 @@ import "../../../src/components/ha-card";
 class DemoBlackWhiteRow extends LitElement {
  @property() title!: string;

-  @property() value!: any;
+  @property() value?: any;

-  @property() disabled = false;
+  @property({ type: Boolean }) public disabled = false;

  protected render(): TemplateResult {
    return html`
@@ -45,7 +45,9 @@ class DemoBlackWhiteRow extends LitElement {
              </mwc-button>
            </div>
          </ha-card>
-          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+          ${this.value
+            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
+            : nothing}
        </div>
      </div>
    `;
@@ -11,11 +11,11 @@ export interface DemoCardConfig {

@customElement("demo-card")
 class DemoCard extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public config!: DemoCardConfig;
+  @property({ attribute: false }) public config!: DemoCardConfig;

-  @property() public showConfig = false;
+  @property({ type: Boolean }) public showConfig = false;

  @state() private _size?: number;

@@ -10,9 +10,9 @@ import "../ha-demo-options";

@customElement("demo-cards")
 class DemoCards extends LitElement {
-  @property() public configs!: DemoCardConfig[];
+  @property({ attribute: false }) public configs!: DemoCardConfig[];

-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _showConfig = false;

@@ -8,11 +8,11 @@ import { HomeAssistant } from "../../../src/types";

@customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property() public entityId!: string;

-  @property() public showConfig!: boolean;
+  @property({ type: Boolean }) public showConfig = false;

  render() {
    const state = this._getState(this.entityId, this.hass.states);
@@ -1,19 +1,19 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
-import "./demo-more-info";
-import "../ha-demo-options";
 import { HomeAssistant } from "../../../src/types";
+import "../ha-demo-options";
+import "./demo-more-info";

@customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public entities!: [];
+  @property({ type: Array }) public entities!: string[];

-  @property({ attribute: false }) _showConfig: boolean = false;
+  @state() private _showConfig = false;

  render() {
    return html`
@@ -17,6 +17,7 @@ export const basicTrace: DemoTrace = {
        {
          path: "trigger/0",
          timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
        },
      ],
      "condition/0": [
@@ -17,6 +17,7 @@ export const motionLightTrace: DemoTrace = {
        {
          path: "trigger/0",
          timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
        },
      ],
      "action/0": [
@@ -1,14 +1,14 @@
-import { mdiMenu } from "@mdi/js";
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-import { html, css, LitElement, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators";
+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 "../../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 {
-  @property() private _page =
+  @state() private _page =
    document.location.hash.substring(1) ||
    `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;

@@ -80,7 +80,7 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
 ];

@customElement("demo-automation-editor-condition")
-class DemoHaAutomationEditorCondition extends LitElement {
+export class DemoAutomationEditorCondition extends LitElement {
  @state() private hass!: HomeAssistant;

  @state() private _disabled = false;
@@ -155,6 +155,6 @@ class DemoHaAutomationEditorCondition extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
+    "demo-automation-editor-condition": DemoAutomationEditorCondition;
  }
 }
@@ -126,7 +126,7 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 ];

@customElement("demo-automation-editor-trigger")
-class DemoHaAutomationEditorTrigger extends LitElement {
+export class DemoAutomationEditorTrigger extends LitElement {
  @state() private hass!: HomeAssistant;

  @state() private _disabled = false;
@@ -201,6 +201,6 @@ class DemoHaAutomationEditorTrigger extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-trigger": DemoHaAutomationEditorTrigger;
+    "demo-automation-editor-trigger": DemoAutomationEditorTrigger;
  }
 }
@@ -3,7 +3,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-script-graph";
 import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
@@ -56,6 +55,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
  }

  static get styles() {
@@ -60,6 +60,7 @@ export class DemoAutomationTrace extends LitElement {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
  }

  static get styles() {
@@ -59,7 +59,7 @@ export class DemoHaBarButton extends LitElement {
              <ha-control-button
                class=${ifDefined(btn.class)}
                label=${ifDefined(btn.label)}
-                disabled=${ifDefined(btn.disabled)}
+                ?disabled=${btn.disabled}
              >
                <ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
              </ha-control-button>
@@ -135,7 +135,7 @@ export class DemoHaControlSelect extends LitElement {
                class=${ifDefined(config.class)}
                @value-changed=${this.handleValueChanged}
                aria-labelledby=${id}
-                disabled=${ifDefined(config.disabled)}
+                ?disabled=${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=${ifDefined(config.disabled)}
+                  ?disabled=${config.disabled}
                >
                </ha-control-select>
              `;
@@ -63,8 +63,8 @@ export class DemoHaControlSwitch extends LitElement {
                .pathOn=${mdiLightbulb}
                .pathOff=${mdiLightbulbOff}
                aria-labelledby=${id}
-                disabled=${ifDefined(config.disabled)}
-                reversed=${ifDefined(config.reversed)}
+                ?disabled=${config.disabled}
+                ?reversed=${config.reversed}
              >
              </ha-control-switch>
            </div>
@@ -86,8 +86,8 @@ export class DemoHaControlSwitch extends LitElement {
                  aria-label=${label}
                  .pathOn=${mdiGarageOpen}
                  .pathOff=${mdiGarage}
-                  disabled=${ifDefined(config.disabled)}
-                  reversed=${ifDefined(config.reversed)}
+                  ?disabled=${config.disabled}
+                  ?reversed=${config.reversed}
                >
                </ha-control-switch>
              `;
@@ -3,6 +3,7 @@ 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";
@@ -10,6 +10,7 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
@@ -97,22 +98,25 @@ const DEVICES = [
  },
 ];

-const AREAS = [
+const AREAS: AreaRegistryEntry[] = [
  {
    area_id: "backyard",
    name: "Backyard",
+    icon: null,
    picture: null,
    aliases: [],
  },
  {
    area_id: "bedroom",
    name: "Bedroom",
+    icon: "mdi:bed",
    picture: null,
    aliases: [],
  },
  {
    area_id: "livingroom",
    name: "Livingroom",
+    icon: "mdi:sofa",
    picture: null,
    aliases: [],
  },
@@ -9,6 +9,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import { BlueprintInput } from "../../../../src/data/blueprint";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
@@ -93,22 +94,25 @@ const DEVICES = [
  },
 ];

-const AREAS = [
+const AREAS: AreaRegistryEntry[] = [
  {
    area_id: "backyard",
    name: "Backyard",
+    icon: null,
    picture: null,
    aliases: [],
  },
  {
    area_id: "bedroom",
    name: "Bedroom",
+    icon: "mdi:bed",
    picture: null,
    aliases: [],
  },
  {
    area_id: "livingroom",
    name: "Livingroom",
+    icon: "mdi:sofa",
    picture: null,
    aliases: [],
  },
@@ -271,6 +275,14 @@ const SCHEMAS: {
        selector: { color_temp: {} },
      },
      color_rgb: { name: "Color", selector: { color_rgb: {} } },
+      qr_code: {
+        name: "QR Code",
+        selector: { qr_code: { data: "https://home-assistant.io" } },
+      },
+      constant: {
+        name: "Constant",
+        selector: { constant: { value: true, label: "Yes!" } },
+      },
    },
  },
  {
@@ -497,7 +509,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
          this.requestUpdate();
        };
        return html`
-          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
+          <demo-black-white-row .title=${info.name}>
            ${["light", "dark"].map((slot) =>
              Object.entries(info.input).map(
                ([key, value]) => html`
@@ -530,8 +542,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
  }

  static styles = css`
-    ha-selector {
-      width: 60;
+    ha-settings-row {
+      --paper-item-body-two-line-min-height: 0;
    }
    .options {
      max-width: 800px;
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } 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 {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } 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 {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } 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 {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } 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 {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } 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 {
@@ -1,18 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-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 "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
 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 {
@@ -1,18 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-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 "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
 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 {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } 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 {
@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -84,6 +85,7 @@ class DemoAlarmPanelEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -146,6 +147,7 @@ class DemoArea extends LitElement {
        entity_id: "binary_sensor.kitchen_door",
      },
    ]);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "controller_1", "on", {
@@ -66,6 +67,7 @@ class DemoConditional extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -323,6 +324,7 @@ class DemoEntities extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -82,6 +83,7 @@ class DemoButtonEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("device_tracker", "demo_paulus", "work", {
@@ -123,6 +124,7 @@ class DemoEntityFilter extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("sensor", "brightness", "12", {}),
@@ -128,6 +129,7 @@ class DemoGaugeEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("device_tracker", "demo_paulus", "home", {
@@ -238,6 +239,7 @@ class DemoGlanceEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -4,6 +4,7 @@ import { mockHistory } from "../../../../demo/src/stubs/history";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "kitchen_lights", "on", {
@@ -214,6 +215,7 @@ class DemoStack extends LitElement {
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
    mockHistory(hass);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -76,6 +77,7 @@ class DemoLightEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -65,15 +65,23 @@ const CONFIGS = [
    >> ...by using additional greater-than signs right next to each other...
    > > > ...or with spaces between arrows.

-    > **Warning** Hey there
-    > This is a warning with a title
+    > [!NOTE]
+    > This is a GitHub note alert

-    > **Note**
-    > This is a note
+    > [!TIP]
+    > This is a GitHub tip alert

-    > **Note**
-    > This is a multiline note
-    > Lorem ipsum...
+    > [!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

    ## Lists

@@ -55,7 +55,7 @@ const CONFIGS = [
 ];

@customElement("demo-lovelace-media-player-row")
-class DemoHuiMediaPlayerRow extends LitElement {
+export class DemoLovelaceMediaPlayerRow extends LitElement {
  @query("#demos") private _demoRoot!: HTMLElement;

  protected render(): TemplateResult {
@@ -73,6 +73,6 @@ class DemoHuiMediaPlayerRow extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-lovelace-media-player-rows": DemoHuiMediaPlayerRow;
+    "demo-lovelace-media-player-row": DemoLovelaceMediaPlayerRow;
  }
 }
@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -138,6 +139,7 @@ class DemoPictureElements extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "kitchen_lights", "on", {
@@ -93,6 +94,7 @@ class DemoPictureEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("switch", "decorative_lights", "on", {
@@ -134,6 +135,7 @@ class DemoPictureGlance extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { createPlantEntities } from "../../data/plants";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const CONFIGS = [
  {
@@ -43,6 +44,7 @@ export class DemoPlantEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(createPlantEntities());
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("climate", "ecobee", "auto", {
@@ -116,6 +117,7 @@ class DemoThermostatEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -6,6 +6,7 @@ import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("switch", "tv_outlet", "on", {
@@ -79,6 +80,18 @@ const CONFIGS = [
  color: pink
    `,
  },
+  {
+    heading: "Whole tile tap action",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+  color: pink
+  tap_action:
+    action: toggle
+  icon_tap_action:
+    action: none
+    `,
+  },
  {
    heading: "Unknown entity",
    config: `
@@ -172,6 +185,7 @@ class DemoTile extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -4,6 +4,7 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { mockTodo } from "../../../../demo/src/stubs/todo";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("todo", "shopping_list", "2", {
@@ -47,6 +48,7 @@ class DemoTodoListEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);

    mockTodo(hass);
  }
@@ -11,6 +11,7 @@ import "../../../../src/components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
 import "../../../../src/components/entity/state-badge";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { HomeAssistant } from "../../../../src/types";

 const SENSOR_DEVICE_CLASSES = [
@@ -53,6 +54,7 @@ const SENSOR_DEVICE_CLASSES = [
  "volatile_organic_compounds_parts",
  "voltage",
  "volume",
+  "volume_flow_rate",
  "water",
  "weight",
  "wind_speed",
@@ -290,6 +292,7 @@ const ENTITIES: HassEntity[] = [
  createEntity("water_heater.high_demand", "high_demand"),
  createEntity("water_heater.heat_pump", "heat_pump"),
  createEntity("water_heater.gas", "gas"),
+  createEntity("select.speed", "ridiculous_speed"),
 ];

 function createEntity(
@@ -344,6 +347,7 @@ export class DemoEntityState extends LitElement {
          title: "Icon",
          template: (entry) => html`
            <state-badge
+              .hass=${hass}
              .stateObj=${entry.stateObj}
              .stateColor=${true}
            ></state-badge>
@@ -395,6 +399,16 @@ export class DemoEntityState extends LitElement {
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
+    mockIcons(hass);
+    hass.updateHass({
+      entities: {
+        "select.speed": {
+          entity_id: "select.speed",
+          translation_key: "speed",
+          platform: "demo",
+        },
+      },
+    });
    hass.updateTranslations(null, "en");
    hass.updateTranslations("config", "en");
  }
@@ -59,3 +59,9 @@ export class DemoUtilLongPress extends LitElement {
    }
  `;
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-util-long-press": DemoUtilLongPress;
+  }
+}
@@ -92,7 +92,7 @@ const ENTITIES = [

@customElement("demo-more-info-climate")
 class DemoMoreInfoClimate extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -141,7 +141,7 @@ const ENTITIES = [

@customElement("demo-more-info-cover")
 class DemoMoreInfoCover extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -29,7 +29,7 @@ const ENTITIES = [

@customElement("demo-more-info-humidifier")
 class DemoMoreInfoHumidifier extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -32,7 +32,7 @@ const ENTITIES = [

@customElement("demo-more-info-input-number")
 class DemoMoreInfoInputNumber extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -18,7 +18,7 @@ const ENTITIES = [

@customElement("demo-more-info-input-text")
 class DemoMoreInfoInputText extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -140,7 +140,7 @@ const ENTITIES = [

@customElement("demo-more-info-light")
 class DemoMoreInfoLight extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -21,7 +21,7 @@ const ENTITIES = [

@customElement("demo-more-info-lock")
 class DemoMoreInfoLock extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -13,7 +13,7 @@ const ENTITIES = createMediaPlayerEntities();

@customElement("demo-more-info-media-player")
 class DemoMoreInfoMediaPlayer extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -50,7 +50,7 @@ const ENTITIES = [

@customElement("demo-more-info-number")
 class DemoMoreInfoNumber extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -21,7 +21,7 @@ const ENTITIES = [

@customElement("demo-more-info-scene")
 class DemoMoreInfoScene extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -18,7 +18,7 @@ const ENTITIES = [

@customElement("demo-more-info-timer")
 class DemoMoreInfoTimer extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -146,7 +146,7 @@ const ENTITIES = [

@customElement("demo-more-info-update")
 class DemoMoreInfoUpdate extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -22,7 +22,7 @@ const ENTITIES = [

@customElement("demo-more-info-vacuum")
 class DemoMoreInfoVacuum extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -42,7 +42,7 @@ const ENTITIES = [

@customElement("demo-more-info-water-heater")
 class DemoMoreInfoWaterHeater extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

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

  @property({ attribute: false }) public supervisor!: Supervisor;

-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;

  @property({ attribute: false }) public route!: Route;

@@ -243,8 +243,16 @@ export class HassioAddonStore extends LitElement {
      }
      .advanced a {
        margin-left: 0.5em;
+        margin-inline-start: 0.5em;
+        margin-inline-end: initial;
        color: var(--primary-color);
      }
    `;
  }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-store": HassioAddonStore;
+  }
+}
@@ -65,9 +65,9 @@ class HassioAddonConfig extends LitElement {

  @property({ attribute: false }) public supervisor!: Supervisor;

-  @property({ type: Boolean }) private _configHasChanged = false;
+  @state() private _configHasChanged = false;

-  @property({ type: Boolean }) private _valid = true;
+  @state() private _valid = true;

  @state() private _canShowSchema = false;

@@ -51,7 +51,7 @@ class HassioAddonDashboard extends LitElement {
    | HassioAddonDetails
    | StoreAddonDetails;

-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;

  @state() private _error?: string;

@@ -250,7 +250,9 @@ class HassioAddonDashboard extends LitElement {
    }

    if (path === "uninstall") {
-      window.history.back();
+      if (this.isConnected) {
+        navigate(this._backPath);
+      }
    } else if (path === "install") {
      this.addon = await fetchHassioAddonInfo(this.hass, this.addon!.slug);
    } else {
@@ -10,7 +10,7 @@ import "./hassio-addon-info";

@customElement("hassio-addon-info-tab")
 class HassioAddonInfoDashboard extends LitElement {
-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;

  @property({ attribute: false }) public route!: Route;

@@ -99,7 +99,7 @@ const RATING_ICON = {

@customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;

  @property({ attribute: false }) public route!: Route;

@@ -1188,11 +1188,13 @@ class HassioAddonInfo extends LitElement {
        }
        .addon-header {
          padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: initial;
          font-size: 24px;
          color: var(--ha-card-header-color, --primary-text-color);
        }
        .addon-version {
-          float: right;
+          float: var(--float-end);
          font-size: 15px;
          vertical-align: middle;
        }
@@ -1261,6 +1263,7 @@ class HassioAddonInfo extends LitElement {
        .card-actions {
          justify-content: space-between;
          display: flex;
+          direction: var(--direction);
        }
        .changelog {
          display: contents;
@@ -59,11 +59,11 @@ export class HassioBackups extends LitElement {

  @property({ attribute: false }) public supervisor!: Supervisor;

-  @property({ type: Object }) public route!: Route;
+  @property({ attribute: false }) public route!: Route;

-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean }) public narrow = false;

-  @property({ type: Boolean }) public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;

  @state() private _selectedBackups: string[] = [];

@@ -395,6 +395,8 @@ export class HassioBackups extends LitElement {
        .selected-txt {
          font-weight: bold;
          padding-left: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: initial;
          color: var(--primary-text-color);
        }
        .table-header .selected-txt {
@@ -405,6 +407,8 @@ export class HassioBackups extends LitElement {
        }
        .header-toolbar .header-btns {
          margin-right: -12px;
+          margin-inline-end: -12px;
+          margin-inline-start: initial;
        }
        .header-btns > mwc-button,
        .header-btns > ha-icon-button {
@@ -60,6 +60,10 @@ class HassioCardContent extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
+      :host {
+        direction: ltr;
+      }
+
      ha-svg-icon {
        margin-right: 24px;
        margin-left: 8px;
@@ -1,6 +1,4 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
  CSSResultGroup,
  LitElement,
@@ -16,6 +14,7 @@ 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 {
@@ -25,12 +24,9 @@ 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,
-  ValueChangedEvent,
-} from "../../../src/types";
+import { HomeAssistant, TranslationDict } 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"];
@@ -76,7 +72,7 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorBackupContent extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public localize?: LocalizeFunc;
+  @property({ attribute: false }) public localize?: LocalizeFunc;

  @property({ attribute: false }) public supervisor?: Supervisor;

@@ -100,7 +96,7 @@ export class SupervisorBackupContent extends LitElement {

  @property() public confirmBackupPassword = "";

-  @query("paper-input, ha-radio, ha-checkbox", true) private _focusTarget;
+  @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;

  public willUpdate(changedProps) {
    super.willUpdate(changedProps);
@@ -151,13 +147,13 @@ export class SupervisorBackupContent extends LitElement {
                )
              : this.backup.date}
          </div>`
-        : html`<paper-input
+        : html`<ha-textfield
            name="backupName"
            .label=${this._localize("name")}
            .value=${this.backupName}
-            @value-changed=${this._handleTextValueChanged}
+            @change=${this._handleTextValueChanged}
          >
-          </paper-input>`}
+          </ha-textfield>`}
      ${!this.backup || this.backup.type === "full"
        ? html`<div class="sub-header">
              ${!this.backup
@@ -265,23 +261,23 @@ export class SupervisorBackupContent extends LitElement {
        : ""}
      ${this.backupHasPassword
        ? html`
-            <paper-input
+            <ha-textfield
              .label=${this._localize("password")}
              type="password"
              name="backupPassword"
              .value=${this.backupPassword}
-              @value-changed=${this._handleTextValueChanged}
+              @change=${this._handleTextValueChanged}
            >
-            </paper-input>
+            </ha-textfield>
            ${!this.backup
-              ? html` <paper-input
+              ? html`<ha-textfield
                  .label=${this._localize("confirm_password")}
                  type="password"
                  name="confirmBackupPassword"
                  .value=${this.confirmBackupPassword}
-                  @value-changed=${this._handleTextValueChanged}
+                  @change=${this._handleTextValueChanged}
                >
-                </paper-input>`
+                </ha-textfield>`
              : ""}
          `
        : ""}
@@ -320,6 +316,8 @@ export class SupervisorBackupContent extends LitElement {
        display: flex;
        flex-direction: column;
        margin-left: 30px;
+        margin-inline-start: 30px;
+        margin-inline-end: initial;
      }
      ha-formfield.password {
        display: block;
@@ -328,6 +326,8 @@ export class SupervisorBackupContent extends LitElement {
      .backup-types {
        display: flex;
        margin-left: -13px;
+        margin-inline-start: -13px;
+        margin-inline-end: initial;
      }
      .sub-header {
        margin-top: 8px;
@@ -429,9 +429,9 @@ export class SupervisorBackupContent extends LitElement {
    this[input.name] = input.value;
  }

-  private _handleTextValueChanged(ev: ValueChangedEvent<string>) {
-    const input = ev.currentTarget as PaperInputElement;
-    this[input.name!] = ev.detail.value;
+  private _handleTextValueChanged(ev: InputEvent) {
+    const input = ev.currentTarget as HaTextField;
+    this[input.name!] = input.value;
  }

  private _toggleHasPassword(): void {
@@ -37,6 +37,8 @@ class SupervisorFormfieldLabel extends LitElement {
      }
      .label {
        margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
      }
      .version {
        color: var(--secondary-text-color);
@@ -45,6 +47,8 @@ class SupervisorFormfieldLabel extends LitElement {
        max-height: 22px;
        max-width: 22px;
        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
      }
    `;
  }
@@ -64,6 +64,8 @@ class SupervisorMetric extends LitElement {
      .value {
        width: 48px;
        padding-right: 4px;
+        padding-inline-start: initial;
+        padding-inline-end: 4px;
        flex-shrink: 0;
      }
    `;
--- a/Show More
+++ b/Show More