Add buttons on mobile to move sections

This reverts commit 3abdffda9c.

.devcontainer/devcontainer.json

@@ -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}"

.github/labeler.yml

@@ -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:

.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.2
         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.2
         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.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/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -75,7 +78,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.2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -86,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v3.1.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/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -110,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v4.3.1
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.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.2
         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.2
         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.2
         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.2
         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.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/upload-artifact@v3.1.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/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v4.3.1
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release-drafter.yaml

@@ -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 }}

.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.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

.yarn/patches/@lrnwebcomponents-simple-tooltip-npm-8.0.0-77591f2e0c.patch

@@ -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;

.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch

@@ -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();

.yarn/patches/sortablejs-npm-1.15.2-73347ae85a.patch

@@ -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);

.yarnrc.yml

@@ -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

build-scripts/gulp/compress.js

@@ -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));
 

build-scripts/gulp/translations.js

@@ -426,6 +426,7 @@ 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/gulp/webpack.js

@@ -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",

build-scripts/webpack.cjs

@@ -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"],

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

@@ -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;
       }
 

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 | 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`

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

@@ -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;
       }
     `;
   }

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

@@ -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++) {

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

@@ -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)

demo/src/ha-demo.ts

@@ -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);

demo/src/stubs/icons.ts

@@ -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: {} };
+    }
+  );
+};

demo/src/stubs/sensor.ts

@@ -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",
+      ],
+    },
+  ]);
+};

demo/src/stubs/todo.ts

@@ -21,4 +21,5 @@ export const mockTodo = (hass: MockHomeAssistant) => {
       },
     ] as TodoItem[],
   }));
+  hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };

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

@@ -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>
     `;

gallery/src/components/demo-card.ts

@@ -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;
 

gallery/src/components/demo-cards.ts

@@ -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;
 

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() 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);

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

@@ -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`

gallery/src/data/traces/basic_trace.ts

@@ -17,6 +17,7 @@ export const basicTrace: DemoTrace = {
         {
           path: "trigger/0",
           timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
         },
       ],
       "condition/0": [

gallery/src/data/traces/motion-light-trace.ts

@@ -17,6 +17,7 @@ export const motionLightTrace: DemoTrace = {
         {
           path: "trigger/0",
           timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
         },
       ],
       "action/0": [

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 { 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]}`;
 

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

@@ -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;
   }
 }

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

@@ -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;
   }
 }

gallery/src/pages/automation/trace-timeline.ts

@@ -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() {

gallery/src/pages/automation/trace.ts

@@ -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() {

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=${ifDefined(btn.disabled)}
+                ?disabled=${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=${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>
               `;

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=${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>
               `;

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

@@ -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";

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

@@ -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: [],
   },

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

@@ -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;

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

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

@@ -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 {

gallery/src/pages/lovelace/alarm-panel-card.ts

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

gallery/src/pages/lovelace/entity-button-card.ts

@@ -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);
   }
 }
 

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

gallery/src/pages/lovelace/grid-and-stack-card.ts

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

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

@@ -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
 

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

@@ -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;
   }
 }

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -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);
   }
 }
 

gallery/src/pages/lovelace/picture-entity-card.ts

@@ -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);
   }
 }
 

gallery/src/pages/lovelace/picture-glance-card.ts

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

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

@@ -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);
   }
 }
 

gallery/src/pages/lovelace/todo-list-card.ts

@@ -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);
   }

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

@@ -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");
   }

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

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

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

@@ -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;
 

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

@@ -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;
 

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

@@ -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;
 

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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) 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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -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;
 

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

@@ -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;
 

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() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
 
   @query("demo-more-infos") private _demoRoot!: HTMLElement;
 

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

@@ -140,3 +140,9 @@ 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!: 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;
+  }
+}

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

@@ -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;
 

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

@@ -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 {

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!: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
   @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!: 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;

hassio/src/backups/hassio-backups.ts

@@ -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 {

hassio/src/components/hassio-card-content.ts

@@ -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;

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

@@ -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 {

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

@@ -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;
       }
     `;
   }