Add preview for time_date integration

.devcontainer/devcontainer.json

@@ -5,7 +5,6 @@
     "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,20 +24,14 @@ Design:
           - src/fake_data/**
 
 Dependencies:
-  - any:
   - changed-files:
-          # Match when only these files are changed (i.e. don't match PRs that happen to add or remove packages)
-          - any-glob-to-all-files:
+      - any-glob-to-any-file:
           - 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.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.1
         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.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -37,20 +37,17 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.0.0
+        uses: actions/cache@v3.3.2
         with:
           path: |
             node_modules/.cache/prettier
             node_modules/.cache/eslint
-            node_modules/.cache/typescript
           key: lint-${{ github.sha }}
           restore-keys: lint-
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
         run: yarn run lint:types
-      - name: Run lit-analyzer
-        run: yarn run lint:lit --quiet
       - name: Run prettier
         run: yarn run lint:prettier
   test:
@@ -60,7 +57,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +75,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,7 +86,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v3.1.3
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -102,7 +99,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -113,7 +110,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v3.1.3
         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.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -63,7 +63,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.1
         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.2
+        uses: actions/setup-node@v4.0.1
         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.2
+        uses: actions/setup-node@v4.0.1
         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.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,7 +42,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
 
       - name: Bump version
-        run: script/version_bump.js nightly
+        run: script/version_bump.cjs nightly
 
       - name: Build nightly Python wheels
         run: |
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v3.1.3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.3.1
+        uses: actions/upload-artifact@v3.1.3
         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@v6.0.0
+      - uses: release-drafter/release-drafter@v5
         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.2
+        uses: actions/setup-node@v4.0.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2024.01.0
+        uses: home-assistant/wheels@2023.10.5
         with:
           abi: cp311
           tag: musllinux_1_2

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

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

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

@@ -1,73 +0,0 @@
-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.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

build-scripts/gulp/compress.js

@@ -1,26 +1,16 @@
 // Tasks to compress
 
-import { deleteAsync } from "del";
 import gulp from "gulp";
-import gulpIf from "gulp-if";
-import vinylPaths from "vinyl-paths";
 import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
 const zopfliOptions = { threshold: 150 };
 
-const compressedExt = /\.gz$/;
-const deleteUncompressed = (p) => deleteAsync(p.replace(compressedExt, ""));
-
 const compressDist = (rootDir) =>
   gulp
-    .src([
-      `${rootDir}/**/*.{js?(.map),json,css,svg,xml}`,
-      `${rootDir}/{authorize,onboarding}.html`,
-    ])
+    .src([`${rootDir}/**/*.{js,json,css,svg}`])
     .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(rootDir))
-    .pipe(gulpIf(compressedExt, vinylPaths(deleteUncompressed)));
+    .pipe(gulp.dest(rootDir));
 
 gulp.task("compress-app", () => compressDist(paths.app_output_root));
 gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));

build-scripts/gulp/translations.js

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

build-scripts/gulp/webpack.js

@@ -115,9 +115,7 @@ gulp.task("webpack-prod-app", () =>
 
 gulp.task("webpack-dev-server-demo", () =>
   runDevServer({
-    compiler: webpack(
-      createDemoConfig({ isProdBuild: false, latestBuild: true })
-    ),
+    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
     contentBase: paths.demo_output_root,
     port: 8090,
   })
@@ -133,9 +131,7 @@ gulp.task("webpack-prod-demo", () =>
 
 gulp.task("webpack-dev-server-cast", () =>
   runDevServer({
-    compiler: webpack(
-      createCastConfig({ isProdBuild: false, latestBuild: true })
-    ),
+    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
@@ -178,9 +174,8 @@ gulp.task("webpack-prod-hassio", () =>
 
 gulp.task("webpack-dev-server-gallery", () =>
   runDevServer({
-    compiler: webpack(
-      createGalleryConfig({ isProdBuild: false, latestBuild: true })
-    ),
+    // 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 })),
     contentBase: paths.gallery_output_root,
     port: 8100,
     listenHost: "0.0.0.0",

build-scripts/webpack.cjs

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

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

@@ -31,11 +31,11 @@ import "./hc-layout";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
-  @property({ attribute: false }) public auth!: Auth;
+  @property() public auth!: Auth;
 
-  @property({ attribute: false }) public connection!: Connection;
+  @property() public connection!: Connection;
 
-  @property({ attribute: false }) public castManager!: CastManager;
+  @property() public castManager!: CastManager;
 
   @state() private askWrite = false;
 
@@ -241,8 +241,6 @@ 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;
+  @property() public subtitle?: string | undefined;
 
-  @property({ attribute: false }) public auth?: Auth;
+  @property() public auth?: Auth;
 
-  @property({ attribute: false }) public connection?: Connection;
+  @property() public connection?: Connection;
 
-  @property({ attribute: false }) public user?: HassUser;
+  @property() public user?: HassUser;
 
   protected render(): TemplateResult {
     return html`

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

@@ -12,8 +12,8 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
-          alt="Nabu Casa logo on left, Home Assistant logo on right, and red heart in center"
-          src="https://cast.home-assistant.io/images/nabu-loves-hass.png"
+          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
+          src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
         />
         <div class="status">
           ${this.hass ? "Connected" : "Not Connected"}
@@ -28,6 +28,7 @@ class HcLaunchScreen extends LitElement {
       :host {
         display: block;
         height: 100vh;
+        padding-top: 64px;
         background-color: white;
         font-size: 24px;
       }
@@ -35,13 +36,15 @@ class HcLaunchScreen extends LitElement {
         display: flex;
         flex-direction: column;
         text-align: center;
-        align-items: center;
-        height: 100%;
-        justify-content: space-evenly;
       }
       img {
-        max-width: 80%;
-        object-fit: cover;
+        width: 717px;
+        height: 376px;
+        display: block;
+        margin: 0 auto;
+      }
+      .status {
+        padding-right: 54px;
       }
     `;
   }

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 | null;
+  @property() public viewPath?: string | number;
 
   @property() public urlPath: string | null = null;
 
@@ -93,9 +93,6 @@ 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 _urlPath?: string | null;
-
   @state() private _error?: string;
 
+  @state() private _urlPath?: string | null;
+
   private _hassUUID?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
@@ -81,7 +81,7 @@ export class HcMain extends HassElement {
 
     if (
       !this._lovelaceConfig ||
-      this._urlPath === undefined ||
+      this._lovelacePath === null ||
       // 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}
-        .urlPath=${this._urlPath}
         .viewPath=${this._lovelacePath}
+        .urlPath=${this._urlPath}
         @config-refresh=${this._generateDefaultLovelaceConfig}
       ></hc-lovelace>
     `;
@@ -205,6 +205,7 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
+      this._hassUUID = msg.hassUUID;
     } catch (err: any) {
       const errorMessage = this._getErrorMessage(err);
       this._error = errorMessage;
@@ -224,17 +225,6 @@ export class HcMain extends HassElement {
       this.hass.connection.close();
     }
     this.initializeHass(auth, connection);
-    if (this._hassUUID !== msg.hassUUID) {
-      this._hassUUID = msg.hassUUID;
-      this._lovelaceConfig = undefined;
-      this._urlPath = undefined;
-      this._lovelacePath = null;
-      if (this._unsubLovelace) {
-        this._unsubLovelace();
-        this._unsubLovelace = undefined;
-      }
-      resourcesLoaded = false;
-    }
     this._error = undefined;
     this._sendStatus();
   }
@@ -243,7 +233,7 @@ export class HcMain extends HassElement {
     this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
-    if (!this.hass?.connected) {
+    if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
       this._sendError(
@@ -285,7 +275,7 @@ export class HcMain extends HassElement {
         ],
       };
       this._urlPath = "energy";
-      this._lovelacePath = null;
+      this._lovelacePath = 0;
       this._sendStatus();
       return;
     }
@@ -294,7 +284,6 @@ export class HcMain extends HassElement {
       this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
-        this._unsubLovelace = undefined;
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
         ? getLovelaceCollection(this.hass.connection, msg.urlPath)

demo/src/ha-demo.ts

@@ -17,14 +17,12 @@ 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";
@@ -52,13 +50,11 @@ 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

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

@@ -1,58 +0,0 @@
-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,5 +21,4 @@ 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, nothing } from "lit";
+import { html, LitElement, css, TemplateResult } 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({ type: Boolean }) public disabled = false;
+  @property() disabled = false;
 
   protected render(): TemplateResult {
     return html`
@@ -45,9 +45,7 @@ class DemoBlackWhiteRow extends LitElement {
               </mwc-button>
             </div>
           </ha-card>
-          ${this.value
-            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
-            : nothing}
+          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
         </div>
       </div>
     `;

gallery/src/components/demo-card.ts

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

gallery/src/components/demo-cards.ts

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

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

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

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

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

gallery/src/ha-gallery.ts

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

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

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

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

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

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

@@ -3,6 +3,7 @@
 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";

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

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

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

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

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

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

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

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

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

@@ -10,7 +10,6 @@ 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";
@@ -98,25 +97,22 @@ const DEVICES = [
   },
 ];
 
-const AREAS: AreaRegistryEntry[] = [
+const AREAS = [
   {
     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,7 +9,6 @@ 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";
@@ -94,25 +93,22 @@ const DEVICES = [
   },
 ];
 
-const AREAS: AreaRegistryEntry[] = [
+const AREAS = [
   {
     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: [],
   },
@@ -275,14 +271,6 @@ 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!" } },
-      },
     },
   },
   {
@@ -509,7 +497,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           this.requestUpdate();
         };
         return html`
-          <demo-black-white-row .title=${info.name}>
+          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
             ${["light", "dark"].map((slot) =>
               Object.entries(info.input).map(
                 ([key, value]) => html`
@@ -542,8 +530,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
   }
 
   static styles = css`
-    ha-settings-row {
-      --paper-item-body-two-line-min-height: 0;
+    ha-selector {
+      width: 60;
     }
     .options {
       max-width: 800px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,6 @@ 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", {
@@ -85,7 +84,6 @@ 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,7 +3,6 @@ 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", {
@@ -147,7 +146,6 @@ class DemoArea extends LitElement {
         entity_id: "binary_sensor.kitchen_door",
       },
     ]);
-    mockIcons(hass);
   }
 }
 

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

@@ -3,7 +3,6 @@ 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", {
@@ -67,7 +66,6 @@ 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,7 +3,6 @@ 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", {
@@ -324,7 +323,6 @@ 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,7 +3,6 @@ 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", {
@@ -83,7 +82,6 @@ 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,7 +3,6 @@ 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", {
@@ -124,7 +123,6 @@ 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,7 +3,6 @@ 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", {}),
@@ -129,7 +128,6 @@ 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,7 +3,6 @@ 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", {
@@ -239,7 +238,6 @@ 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,7 +4,6 @@ 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", {
@@ -215,7 +214,6 @@ class DemoStack extends LitElement {
     hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
     mockHistory(hass);
-    mockIcons(hass);
   }
 }
 

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

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

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

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

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

@@ -3,7 +3,6 @@ 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", {
@@ -139,7 +138,6 @@ 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,7 +3,6 @@ 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", {
@@ -94,7 +93,6 @@ 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,7 +3,6 @@ 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", {
@@ -135,7 +134,6 @@ 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,7 +3,6 @@ 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 = [
   {
@@ -44,7 +43,6 @@ 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,7 +3,6 @@ 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", {
@@ -117,7 +116,6 @@ 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,7 +6,6 @@ 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", {
@@ -80,18 +79,6 @@ 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: `
@@ -185,7 +172,6 @@ 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,7 +4,6 @@ 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", {
@@ -48,7 +47,6 @@ 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,7 +11,6 @@ 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 = [
@@ -54,7 +53,6 @@ const SENSOR_DEVICE_CLASSES = [
   "volatile_organic_compounds_parts",
   "voltage",
   "volume",
-  "volume_flow_rate",
   "water",
   "weight",
   "wind_speed",
@@ -292,7 +290,6 @@ 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(
@@ -347,7 +344,6 @@ export class DemoEntityState extends LitElement {
           title: "Icon",
           template: (entry) => html`
             <state-badge
-              .hass=${hass}
               .stateObj=${entry.stateObj}
               .stateColor=${true}
             ></state-badge>
@@ -399,16 +395,6 @@ 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,9 +59,3 @@ export class DemoUtilLongPress extends LitElement {
     }
   `;
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-misc-util-long-press": DemoUtilLongPress;
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -56,7 +56,7 @@ export class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
@@ -243,16 +243,8 @@ 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;
 
-  @state() private _configHasChanged = false;
+  @property({ type: Boolean }) private _configHasChanged = false;
 
-  @state() private _valid = true;
+  @property({ type: Boolean }) private _valid = true;
 
   @state() private _canShowSchema = false;
 

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

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

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

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

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

@@ -99,7 +99,7 @@ const RATING_ICON = {
 
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
@@ -1188,13 +1188,11 @@ 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: var(--float-end);
+          float: right;
           font-size: 15px;
           vertical-align: middle;
         }

hassio/src/backups/hassio-backups.ts

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

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

@@ -37,8 +37,6 @@ class SupervisorFormfieldLabel extends LitElement {
       }
       .label {
         margin-right: 4px;
-        margin-inline-end: 4px;
-        margin-inline-start: initial;
       }
       .version {
         color: var(--secondary-text-color);
@@ -47,8 +45,6 @@ class SupervisorFormfieldLabel extends LitElement {
         max-height: 22px;
         max-width: 22px;
         margin-right: 8px;
-        margin-inline-end: 8px;
-        margin-inline-start: initial;
       }
     `;
   }

hassio/src/components/supervisor-metric.ts

@@ -64,8 +64,6 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
-        padding-inline-start: initial;
-        padding-inline-end: 4px;
         flex-shrink: 0;
       }
     `;

hassio/src/dashboard/hassio-addons.ts

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

hassio/src/dashboard/hassio-dashboard.ts

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