Bump typescript, lint, prettier (#10108)

.eslintrc.json

@@ -1,9 +1,10 @@
 {
   "extends": [
+    "airbnb-base",
     "airbnb-typescript/base",
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
-    "plugin:lit/recommended",
+    "plugin:lit/all",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
@@ -109,7 +110,9 @@
       }
     ],
     "unused-imports/no-unused-imports": "error",
-    "lit/attribute-value-entities": "off"
+    "lit/attribute-value-entities": "off",
+    "lit/no-template-map": "off",
+    "lit/no-template-arrow": "warn"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

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

@@ -191,7 +191,7 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (err) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }

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

@@ -212,7 +212,7 @@ export class HcConnect extends LitElement {
     let url: URL;
     try {
       url = new URL(value);
-    } catch (err) {
+    } catch (err: any) {
       this.error = "Invalid URL";
       return;
     }
@@ -240,7 +240,7 @@ export class HcConnect extends LitElement {
     try {
       this.loading = true;
       auth = await getAuth(options);
-    } catch (err) {
+    } catch (err: any) {
       if (init === "saved-tokens" && err === ERR_CANNOT_CONNECT) {
         this.cannotConnect = true;
         return;
@@ -259,7 +259,7 @@ export class HcConnect extends LitElement {
 
     try {
       conn = await createConnection({ auth });
-    } catch (err) {
+    } catch (err: any) {
       // In case of saved tokens, silently solve problems.
       if (init === "saved-tokens") {
         if (err === ERR_CANNOT_CONNECT) {
@@ -285,7 +285,7 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (err) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }

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

@@ -148,14 +148,14 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-    } catch (err) {
+    } catch (err: any) {
       this._error = this._getErrorMessage(err);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
-    } catch (err) {
+    } catch (err: any) {
       this._error = this._getErrorMessage(err);
       return;
     }
@@ -193,7 +193,7 @@ export class HcMain extends HassElement {
         this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
-      } catch (err) {
+      } catch (err: any) {
         // eslint-disable-next-line
         console.log("Error fetching Lovelace configuration", err, msg);
         // Generate a Lovelace config.

demo/src/custom-cards/ha-demo-card.ts

@@ -44,7 +44,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                     (conf) => html`
                       ${conf.name}
                       <small>
-                        <a target="_blank" href="${conf.authorUrl}">
+                        <a target="_blank" href=${conf.authorUrl}>
                           ${this.hass.localize(
                             "ui.panel.page-demo.cards.demo.demo_by",
                             "name",
@@ -94,7 +94,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     this._switching = true;
     try {
       await setDemoConfig(this.hass, this.lovelace!, index);
-    } catch (err) {
+    } catch (err: any) {
       alert("Failed to switch config :-(");
     } finally {
       this._switching = false;

demo/src/stubs/lovelace.ts

@@ -23,9 +23,9 @@ customElements.whenDefined("hui-view").then(() => {
   // eslint-disable-next-line
   const HUIView = customElements.get("hui-view");
   // Patch HUI-VIEW to make the lovelace object available to the demo card
-  const oldCreateCard = HUIView.prototype.createCardElement;
+  const oldCreateCard = HUIView!.prototype.createCardElement;
 
-  HUIView.prototype.createCardElement = function (config) {
+  HUIView!.prototype.createCardElement = function (config) {
     const el = oldCreateCard.call(this, config);
     if (el.tagName === "HA-DEMO-CARD") {
       (el as HADemoCard).lovelace = this.lovelace;

gallery/src/demos/demo-util-long-press.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
@@ -9,7 +9,6 @@ import { actionHandler } from "../../../src/panels/lovelace/common/directives/ac
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {
     return html`
-      ${this.renderStyle()}
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
@@ -41,26 +40,22 @@ export class DemoUtilLongPress extends LitElement {
     area.scrollTop = area.scrollHeight;
   }
 
-  private renderStyle() {
+  static styles = css`
-    return html`
+    ha-card {
-      <style>
+      width: 200px;
-        ha-card {
+      margin: calc(42vh - 140px) auto;
-          width: 200px;
+      padding: 8px;
-          margin: calc(42vh - 140px) auto;
+      text-align: center;
-          padding: 8px;
+    }
-          text-align: center;
+    ha-card:first-of-type {
-        }
+      margin-top: 16px;
-        ha-card:first-of-type {
+    }
-          margin-top: 16px;
+    ha-card:last-of-type {
-        }
+      margin-bottom: 16px;
-        ha-card:last-of-type {
+    }
-          margin-bottom: 16px;
-        }
 
-        textarea {
+    textarea {
-          height: 50px;
+      height: 50px;
-        }
+    }
-      </style>
+  `;
-    `;
-  }
 }

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

@@ -259,7 +259,7 @@ class HassioAddonConfig extends LitElement {
         path: "options",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.common.update_available",
         "error",
@@ -300,7 +300,7 @@ class HassioAddonConfig extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",

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

@@ -89,9 +89,9 @@ class HassioAddonNetwork extends LitElement {
                     <td>
                       <paper-input
                         @value-changed=${this._configChanged}
-                        placeholder="${this.supervisor.localize(
+                        placeholder=${this.supervisor.localize(
                           "addon.configuration.network.disabled"
-                        )}"
+                        )}
                         .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
@@ -171,7 +171,7 @@ class HassioAddonNetwork extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_reset",
         "error",
@@ -207,7 +207,7 @@ class HassioAddonNetwork extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",

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

@@ -79,7 +79,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.hass,
         this.addon!.slug
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.documentation.get_logs",
         "error",

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

@@ -222,7 +222,7 @@ class HassioAddonDashboard extends LitElement {
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
-    } catch (err) {
+    } catch (err: any) {
       this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;
     }

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

@@ -123,18 +123,18 @@ class HassioAddonInfo extends LitElement {
               <div class="card-content">
                 <hassio-card-content
                   .hass=${this.hass}
-                  .title="${this.supervisor.localize(
+                  .title=${this.supervisor.localize(
                     "addon.dashboard.new_update_available",
                     "name",
                     this.addon.name,
                     "version",
                     this.addon.version_latest
-                  )}"
+                  )}
-                  .description="${this.supervisor.localize(
+                  .description=${this.supervisor.localize(
                     "common.running_version",
                     "version",
                     this.addon.version
-                  )}"
+                  )}
                   icon=${mdiArrowUpBoldCircle}
                   iconClass="update"
                 ></hassio-card-content>
@@ -254,7 +254,7 @@ class HassioAddonInfo extends LitElement {
             ${this.supervisor.localize(
               "addon.dashboard.visit_addon_page",
               "name",
-              html`<a href="${this.addon.url!}" target="_blank" rel="noreferrer"
+              html`<a href=${this.addon.url!} target="_blank" rel="noreferrer"
                 >${this.addon.name}</a
               >`
             )}
@@ -437,10 +437,10 @@ class HassioAddonInfo extends LitElement {
               ${this.addon.version
                 ? html`
                     <div
-                      class="${classMap({
+                      class=${classMap({
                         "addon-options": true,
                         started: this.addon.state === "started",
-                      })}"
+                      })}
                     >
                       <ha-settings-row ?three-line=${this.narrow}>
                         <span slot="heading">
@@ -796,7 +796,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -818,7 +818,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -840,7 +840,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -862,7 +862,7 @@ class HassioAddonInfo extends LitElement {
         path: "security",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -884,7 +884,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -912,7 +912,7 @@ class HassioAddonInfo extends LitElement {
         title: this.supervisor.localize("addon.dashboard.changelog"),
         content,
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "addon.dashboard.action_error.get_changelog"
@@ -934,7 +934,7 @@ class HassioAddonInfo extends LitElement {
         path: "install",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.install"),
         text: extractApiErrorMessage(err),
@@ -955,7 +955,7 @@ class HassioAddonInfo extends LitElement {
         path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.stop"),
         text: extractApiErrorMessage(err),
@@ -976,7 +976,7 @@ class HassioAddonInfo extends LitElement {
         path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.restart"),
         text: extractApiErrorMessage(err),
@@ -1035,7 +1035,7 @@ class HassioAddonInfo extends LitElement {
         button.progress = false;
         return;
       }
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Failed to validate addon configuration",
         text: extractApiErrorMessage(err),
@@ -1053,7 +1053,7 @@ class HassioAddonInfo extends LitElement {
         path: "start",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
@@ -1091,7 +1091,7 @@ class HassioAddonInfo extends LitElement {
         path: "uninstall",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "addon.dashboard.action_error.uninstall"

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

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

hassio/src/backups/hassio-backups.ts

@@ -294,7 +294,7 @@ export class HassioBackups extends LitElement {
       await Promise.all(
         this._selectedBackups.map((slug) => removeBackup(this.hass, slug))
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("backup.failed_to_delete"),
         text: extractApiErrorMessage(err),

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

@@ -37,7 +37,7 @@ class HassioCardContent extends LitElement {
       ${this.iconImage
         ? html`
             <div class="icon_image ${this.iconClass}">
-              <img src="${this.iconImage}" .title=${this.iconTitle} />
+              <img src=${this.iconImage} .title=${this.iconTitle} />
               <div></div>
             </div>
           `

hassio/src/components/hassio-upload-backup.ts

@@ -70,7 +70,7 @@ export class HassioUploadBackup extends LitElement {
     try {
       const backup = await uploadBackup(this.hass, file);
       fireEvent(this, "backup-uploaded", { backup: backup.data });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Upload failed",
         text: extractApiErrorMessage(err),

hassio/src/components/supervisor-metric.ts

@@ -20,10 +20,10 @@ class SupervisorMetric extends LitElement {
       <div slot="description" .title=${this.tooltip ?? ""}>
         <span class="value"> ${roundedValue} % </span>
         <ha-bar
-          class="${classMap({
+          class=${classMap({
             "target-warning": roundedValue > 50,
             "target-critical": roundedValue > 85,
-          })}"
+          })}
           .value=${this.value}
         ></ha-bar>
       </div>

hassio/src/dashboard/hassio-update.ts

@@ -136,7 +136,7 @@ export class HassioUpdate extends LitElement {
           </ha-settings-row>
         </div>
         <div class="card-actions">
-          <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
+          <a href=${releaseNotesUrl} target="_blank" rel="noreferrer">
             <mwc-button>
               ${this.supervisor.localize("common.release_notes")}
             </mwc-button>
@@ -206,7 +206,7 @@ export class HassioUpdate extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: item.key,
       });
-    } catch (err) {
+    } catch (err: any) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {

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

@@ -311,7 +311,7 @@ class HassioBackupDialog
             : "snapshots"
         }/${this._backup!.slug}/download`
       );
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         text: extractApiErrorMessage(err),
       });

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

@@ -127,7 +127,7 @@ class HassioCreateBackupDialog extends LitElement {
 
       this._dialogParams!.onCreate();
       this.closeDialog();
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
     this._creatingBackup = false;

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

@@ -149,7 +149,7 @@ class HassioDatadiskDialog extends LitElement {
     this.moving = true;
     try {
       await moveDatadisk(this.hass, this.selectedDevice!);
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
           title: this.dialogParams!.supervisor.localize(

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

@@ -287,7 +287,7 @@ export class DialogHassioNetwork
         this.hass,
         this._interface.interface
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Failed to scan for accesspoints",
         text: extractApiErrorMessage(err),
@@ -448,7 +448,7 @@ export class DialogHassioNetwork
         this._interface!.interface,
         interfaceOptions
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.network.failed_to_change"),
         text: extractApiErrorMessage(err),

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

@@ -190,7 +190,7 @@ class HassioRegistriesDialog extends LitElement {
       await addHassioDockerRegistry(this.hass, data);
       await this._loadRegistries();
       this._addingRegistry = false;
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.registries.failed_to_add"),
         text: extractApiErrorMessage(err),
@@ -204,7 +204,7 @@ class HassioRegistriesDialog extends LitElement {
     try {
       await removeHassioDockerRegistry(this.hass, entry.registry);
       await this._loadRegistries();
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.registries.failed_to_remove"),
         text: extractApiErrorMessage(err),

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

@@ -185,7 +185,7 @@ class HassioRepositoriesDialog extends LitElement {
       this._repositories = addonsinfo.repositories;
 
       fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
   }
@@ -207,7 +207,7 @@ class HassioRepositoriesDialog extends LitElement {
       await this._loadData();
 
       input.value = "";
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
     this._processing = false;
@@ -229,7 +229,7 @@ class HassioRepositoriesDialog extends LitElement {
         addons_repositories: newRepositories,
       });
       await this._loadData();
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
   }

hassio/src/dialogs/suggestAddonRestart.ts

@@ -26,7 +26,7 @@ export const suggestAddonRestart = async (
   if (confirmed) {
     try {
       await restartHassioAddon(hass, addon.slug);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(element, {
         title: supervisor.localize(
           "common.failed_to_restart_name",

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -148,7 +148,7 @@ class DialogSupervisorUpdate extends LitElement {
           this.hass,
           this._dialogParams!.backupParams
         );
-      } catch (err) {
+      } catch (err: any) {
         this._error = extractApiErrorMessage(err);
         this._action = null;
         return;
@@ -158,7 +158,7 @@ class DialogSupervisorUpdate extends LitElement {
     this._action = "update";
     try {
       await this._dialogParams!.updateHandler!();
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
         this._action = null;

hassio/src/hassio-my-redirect.ts

@@ -87,7 +87,7 @@ class HassioMyRedirect extends LitElement {
     let url: string;
     try {
       url = this._createRedirectUrl(redirect);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize("my.error");
       return;
     }

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -91,7 +91,7 @@ class HassioIngressView extends LitElement {
       if (requestedAddon) {
         try {
           addonInfo = await fetchHassioAddonInfo(this.hass, requestedAddon);
-        } catch (err) {
+        } catch (err: any) {
           await showAlertDialog(this, {
             text: extractApiErrorMessage(err),
             title: requestedAddon,
@@ -145,7 +145,7 @@ class HassioIngressView extends LitElement {
 
     try {
       addon = await fetchHassioAddonInfo(this.hass, addonSlug);
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         text: "Unable to fetch add-on info to start Ingress",
         title: "Supervisor",
@@ -179,7 +179,7 @@ class HassioIngressView extends LitElement {
 
     try {
       session = await createSessionPromise;
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         text: "Unable to create an Ingress session",
         title: addon.name,
@@ -195,7 +195,7 @@ class HassioIngressView extends LitElement {
     this._sessionKeepAlive = window.setInterval(async () => {
       try {
         await validateHassioSession(this.hass, session);
-      } catch (err) {
+      } catch (err: any) {
         session = await createHassioSession(this.hass);
       }
     }, 60000);

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

@@ -144,7 +144,7 @@ class HassioCoreInfo extends LitElement {
 
     try {
       await restartCore(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
           title: this.supervisor.localize(

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

@@ -247,7 +247,7 @@ class HassioHostInfo extends LitElement {
     let hardware;
     try {
       hardware = await fetchHassioHardwareInfo(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_get_hardware_list"
@@ -277,7 +277,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await rebootHost(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       // Ignore connection errors, these are all expected
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
@@ -307,7 +307,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await shutdownHost(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       // Ignore connection errors, these are all expected
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
@@ -348,7 +348,7 @@ class HassioHostInfo extends LitElement {
     try {
       await updateOS(this.hass);
       fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
           title: this.supervisor.localize(
@@ -386,7 +386,7 @@ class HassioHostInfo extends LitElement {
         fireEvent(this, "supervisor-collection-refresh", {
           collection: "host",
         });
-      } catch (err) {
+      } catch (err: any) {
         showAlertDialog(this, {
           title: this.supervisor.localize("system.host.failed_to_set_hostname"),
           text: extractApiErrorMessage(err),
@@ -401,7 +401,7 @@ class HassioHostInfo extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: "host",
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_import_from_usb"

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

@@ -282,7 +282,7 @@ class HassioSupervisorInfo extends LitElement {
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.supervisor.failed_to_set_option"
@@ -300,7 +300,7 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await this._reloadSupervisor();
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("system.supervisor.failed_to_reload"),
         text: extractApiErrorMessage(err),
@@ -343,7 +343,7 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await restartSupervisor(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "common.failed_to_restart_name",
@@ -388,7 +388,7 @@ class HassioSupervisorInfo extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: "supervisor",
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "common.failed_to_update_name",
@@ -427,10 +427,10 @@ class HassioSupervisorInfo extends LitElement {
               <li>
                 ${UNSUPPORTED_REASON_URL[reason]
                   ? html`<a
-                      href="${documentationUrl(
+                      href=${documentationUrl(
                         this.hass,
                         UNSUPPORTED_REASON_URL[reason]
-                      )}"
+                      )}
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -458,10 +458,10 @@ class HassioSupervisorInfo extends LitElement {
               <li>
                 ${UNHEALTHY_REASON_URL[reason]
                   ? html`<a
-                      href="${documentationUrl(
+                      href=${documentationUrl(
                         this.hass,
                         UNHEALTHY_REASON_URL[reason]
-                      )}"
+                      )}
                       target="_blank"
                       rel="noreferrer"
                     >
@@ -483,7 +483,7 @@ class HassioSupervisorInfo extends LitElement {
         diagnostics: !this.supervisor.supervisor?.diagnostics,
       };
       await setSupervisorOption(this.hass, data);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.supervisor.failed_to_set_option"

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

@@ -130,7 +130,7 @@ class HassioSupervisorLog extends LitElement {
         this.hass,
         this._selectedLogProvider
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "system.log.get_logs",
         "provider",

package.json

@@ -145,18 +145,18 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.15.5",
     "@babel/plugin-external-helpers": "^7.14.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-typescript": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
@@ -173,23 +173,24 @@
     "@types/mocha": "^8",
     "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.28.3",
+    "@typescript-eslint/parser": "^4.32.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.2.2",
     "chai": "^4.3.4",
     "del": "^4.0.0",
-    "eslint": "^7.30.0",
+    "eslint": "^7.32.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-lit": "^1.5.1",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-unused-imports": "^1.1.2",
+    "eslint-plugin-unused-imports": "^1.1.5",
-    "eslint-plugin-wc": "^1.3.0",
+    "eslint-plugin-wc": "^1.3.2",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.2",
@@ -201,7 +202,7 @@
     "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
     "instant-mocha": "^1.3.1",
-    "lint-staged": "^11.0.1",
+    "lint-staged": "^11.1.2",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
@@ -210,7 +211,7 @@
     "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
@@ -222,7 +223,7 @@
     "systemjs": "^6.3.2",
     "terser-webpack-plugin": "^5.2.4",
     "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "^5.55.1",

src/auth/ha-auth-flow.ts

@@ -194,7 +194,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         this._state = "error";
         this._errorMessage = data.message;
       }
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error("Error starting auth flow", err);
       this._state = "error";
@@ -317,7 +317,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         return;
       }
       await this._updateStep(newStep);
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error("Error submitting step", err);
       this._state = "error";

src/auth/ha-authorize.ts

@@ -76,20 +76,20 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       ${loggingInWith}
 
       <ha-auth-flow
-        .resources="${this.resources}"
+        .resources=${this.resources}
-        .clientId="${this.clientId}"
+        .clientId=${this.clientId}
-        .redirectUri="${this.redirectUri}"
+        .redirectUri=${this.redirectUri}
-        .oauth2State="${this.oauth2State}"
+        .oauth2State=${this.oauth2State}
-        .authProvider="${this._authProvider}"
+        .authProvider=${this._authProvider}
       ></ha-auth-flow>
 
       ${inactiveProviders.length > 0
         ? html`
             <ha-pick-auth-provider
-              .resources="${this.resources}"
+              .resources=${this.resources}
-              .clientId="${this.clientId}"
+              .clientId=${this.clientId}
-              .authProviders="${inactiveProviders}"
+              .authProviders=${inactiveProviders}
-              @pick-auth-provider="${this._handleAuthProviderPick}"
+              @pick-auth-provider=${this._handleAuthProviderPick}
             ></ha-pick-auth-provider>
           `
         : ""}
@@ -158,7 +158,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
       this._authProviders = authProviders;
       this._authProvider = authProviders[0];
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line
       console.error("Error loading auth providers", err);
     }

src/auth/ha-password-manager-polyfill.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";

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

@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
@@ -18,14 +18,6 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
 
   protected render() {
     return html`
-      <style>
-        paper-item {
-          cursor: pointer;
-        }
-        p {
-          margin-top: 0;
-        }
-      </style>
       <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
       ${this.authProviders.map(
         (provider) => html`
@@ -41,5 +33,14 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
   private _handlePick(ev) {
     fireEvent(this, "pick-auth-provider", ev.currentTarget.auth_provider);
   }
+
+  static styles = css`
+    paper-item {
+      cursor: pointer;
+    }
+    p {
+      margin-top: 0;
+    }
+  `;
 }
 customElements.define("ha-pick-auth-provider", HaPickAuthProvider);

src/common/auth/token_storage.ts

@@ -33,7 +33,7 @@ export function saveTokens(tokens: AuthData | null) {
   if (tokenCache.writeEnabled) {
     try {
       storage.hassTokens = JSON.stringify(tokens);
-    } catch (err) {
+    } catch (err: any) {
       // write failed, ignore it. Happens if storage is full or private mode.
     }
   }
@@ -58,7 +58,7 @@ export function loadTokens() {
       } else {
         tokenCache.tokens = null;
       }
-    } catch (err) {
+    } catch (err: any) {
       tokenCache.tokens = null;
     }
   }

src/common/decorators/local-storage.ts

@@ -74,7 +74,7 @@ class Storage {
     this._storage[storageKey] = value;
     try {
       window.localStorage.setItem(storageKey, JSON.stringify(value));
-    } catch (err) {
+    } catch (err: any) {
       // Safari in private mode doesn't allow localstorage
     }
   }

src/common/dom/apply_themes_on_element.ts

@@ -167,7 +167,7 @@ const processTheme = (
       const prefixedRgbKey = `--${rgbKey}`;
       styles[prefixedRgbKey] = rgbValue;
       keys[prefixedRgbKey] = "";
-    } catch (e) {
+    } catch (err: any) {
       continue;
     }
   }

src/common/dom/get_main_window.ts

@@ -5,4 +5,4 @@ export const mainWindow =
     ? window
     : parent.name === MAIN_WINDOW_NAME
     ? parent
-    : top;
+    : top!;

src/common/number/format_number.ts

@@ -51,10 +51,10 @@ export const formatNumber = (
         locale,
         getDefaultFormatOptions(num, options)
       ).format(Number(num));
-    } catch (error) {
+    } catch (err: any) {
       // Don't fail when using "TEST" language
       // eslint-disable-next-line no-console
-      console.error(error);
+      console.error(err);
       return new Intl.NumberFormat(
         undefined,
         getDefaultFormatOptions(num, options)

src/common/translations/localize.ts

@@ -108,7 +108,7 @@ export const computeLocalize = async (
           language,
           formats
         );
-      } catch (err) {
+      } catch (err: any) {
         return "Translation error: " + err.message;
       }
       cache._localizationCache[messageKey] = translatedMessage;
@@ -125,7 +125,7 @@ export const computeLocalize = async (
 
     try {
       return translatedMessage.format<string>(argObject) as string;
-    } catch (err) {
+    } catch (err: any) {
       return "Translation " + err;
     }
   };

src/common/util/parse-aspect-ratio.ts

@@ -25,7 +25,7 @@ export default function parseAspectRatio(input: string) {
     return arr.length === 1
       ? { w: parseOrThrow(arr[0]), h: 1 }
       : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) };
-  } catch (err) {
+  } catch (err: any) {
     // Ignore the error
   }
   return null;

src/components/buttons/ha-call-api-button.ts

@@ -50,7 +50,7 @@ class HaCallApiButton extends LitElement {
       this._progressButton.actionSuccess();
       eventData.success = true;
       eventData.response = resp;
-    } catch (err) {
+    } catch (err: any) {
       this.progress = false;
       this._progressButton.actionError();
       eventData.success = false;

src/components/device/ha-area-devices-picker.ts

@@ -50,6 +50,7 @@ interface AreaDevices {
   devices: string[];
 }
 
+// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
     paper-item {
       padding: 0;

src/components/device/ha-device-picker.ts

@@ -46,6 +46,7 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
+// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
     paper-item {
       padding: 0;

src/components/entity/ha-entity-attribute-picker.ts

@@ -23,6 +23,7 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
+// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
     paper-item {
       padding: 0;

src/components/entity/ha-entity-picker.ts

@@ -26,6 +26,7 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
+// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
     paper-icon-item {
       padding: 0;

src/components/entity/ha-state-label-badge.ts

@@ -57,11 +57,11 @@ export class HaStateLabelBadge extends LitElement {
       return html`
         <ha-label-badge
           class="warning"
-          label="${this.hass!.localize("state_badge.default.error")}"
+          label=${this.hass!.localize("state_badge.default.error")}
           icon="hass:alert"
-          description="${this.hass!.localize(
+          description=${this.hass!.localize(
             "state_badge.default.entity_not_found"
-          )}"
+          )}
         ></ha-label-badge>
       `;
     }
@@ -70,27 +70,25 @@ export class HaStateLabelBadge extends LitElement {
 
     return html`
       <ha-label-badge
-        class="${classMap({
+        class=${classMap({
           [domain]: true,
           "has-unit_of_measurement":
             "unit_of_measurement" in entityState.attributes,
-        })}"
+        })}
-        .value="${this._computeValue(domain, entityState)}"
+        .value=${this._computeValue(domain, entityState)}
-        .icon="${this.icon
+        .icon=${this.icon ? this.icon : this._computeIcon(domain, entityState)}
-          ? this.icon
+        .image=${this.icon
-          : this._computeIcon(domain, entityState)}"
-        .image="${this.icon
           ? ""
           : this.image
           ? this.image
           : entityState.attributes.entity_picture_local ||
-            entityState.attributes.entity_picture}"
+            entityState.attributes.entity_picture}
-        .label="${this._computeLabel(
+        .label=${this._computeLabel(
           domain,
           entityState,
           this._timerTimeRemaining
-        )}"
+        )}
-        .description="${this.name ? this.name : computeStateName(entityState)}"
+        .description=${this.name ? this.name : computeStateName(entityState)}
       ></ha-label-badge>
     `;
   }

src/components/entity/ha-statistic-picker.ts

@@ -77,6 +77,7 @@ export class HaStatisticPicker extends LitElement {
     id: string;
     name: string;
     state?: HassEntity;
+    // eslint-disable-next-line lit/prefer-static-styles
   }> = (item) => html`<style>
       paper-icon-item {
         padding: 0;
@@ -110,7 +111,7 @@ export class HaStatisticPicker extends LitElement {
             ? html`<a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="${documentationUrl(this.hass, "/more-info/statistics/")}"
+                href=${documentationUrl(this.hass, "/more-info/statistics/")}
                 >${this.hass.localize(
                   "ui.components.statistic-picker.learn_more"
                 )}</a

src/components/ha-addon-picker.ts

@@ -12,6 +12,7 @@ import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
 
+// eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
     paper-item {
       padding: 0;
@@ -109,7 +110,7 @@ class HaAddonPicker extends LitElement {
           ),
         });
       }
-    } catch (error) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize(
           "ui.componencts.addon-picker.error.fetch_addons.title"

src/components/ha-area-picker.ts

@@ -46,6 +46,7 @@ import "./ha-svg-icon";
 
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
   item
+  // eslint-disable-next-line lit/prefer-static-styles
 ) => html`<style>
     paper-item {
       padding: 0;
@@ -435,7 +436,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           });
           this._areas = [...this._areas!, area];
           this._setValue(area.area_id);
-        } catch (err) {
+        } catch (err: any) {
           showAlertDialog(this, {
             text: this.hass.localize(
               "ui.components.area-picker.add_dialog.failed_create_area"

src/components/ha-camera-stream.ts

@@ -117,7 +117,7 @@ class HaCameraStream extends LitElement {
       );
 
       this._url = url;
-    } catch (err) {
+    } catch (err: any) {
       // Fails if we were unable to get a stream
       // eslint-disable-next-line
       console.error(err);

src/components/ha-combo-box.ts

@@ -13,6 +13,7 @@ import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
+// eslint-disable-next-line lit/prefer-static-styles
 const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
     paper-item {
       margin: -5px -10px;

src/components/ha-label-badge.ts

@@ -26,10 +26,10 @@ class HaLabelBadge extends LitElement {
       <div class="badge-container">
         <div class="label-badge" id="badge">
           <div
-            class="${classMap({
+            class=${classMap({
               value: true,
               big: Boolean(this.value && this.value.length > 4),
-            })}"
+            })}
           >
             <slot>
               ${this.icon && !this.value && !this.image
@@ -43,10 +43,10 @@ class HaLabelBadge extends LitElement {
           ${this.label
             ? html`
                 <div
-                  class="${classMap({
+                  class=${classMap({
                     label: true,
                     big: this.label.length > 5,
-                  })}"
+                  })}
                 >
                   <span>${this.label}</span>
                 </div>

src/components/ha-markdown-element.ts

@@ -38,9 +38,8 @@ class HaMarkdownElement extends ReactiveElement {
 
     const walker = document.createTreeWalker(
       this,
-      1 /* SHOW_ELEMENT */,
+      NodeFilter.SHOW_ELEMENT,
-      null,
+      null
-      false
     );
 
     while (walker.nextNode()) {

src/components/ha-picture-upload.ts

@@ -89,7 +89,7 @@ export class HaPictureUpload extends LitElement {
       const media = await createImage(this.hass, file);
       this.value = generateImageThumbnailUrl(media.id, this.size);
       fireEvent(this, "change");
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         text: err.toString(),
       });

src/components/ha-related-items.ts

@@ -162,7 +162,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
                   <li>
                     <button
                       @click=${this._openMoreInfo}
-                      .entityId="${entityId}"
+                      .entityId=${entityId}
                       class="link"
                     >
                       ${entity.attributes.friendly_name || entityId}
@@ -187,7 +187,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
                     <button
                       class="link"
                       @click=${this._openMoreInfo}
-                      .entityId="${groupId}"
+                      .entityId=${groupId}
                     >
                       ${group.attributes.friendly_name || group.entity_id}
                     </button>
@@ -212,7 +212,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
                     <button
                       class="link"
                       @click=${this._openMoreInfo}
-                      .entityId="${sceneId}"
+                      .entityId=${sceneId}
                     >
                       ${scene.attributes.friendly_name || scene.entity_id}
                     </button>
@@ -239,7 +239,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
                     <button
                       class="link"
                       @click=${this._openMoreInfo}
-                      .entityId="${automationId}"
+                      .entityId=${automationId}
                     >
                       ${automation.attributes.friendly_name ||
                       automation.entity_id}
@@ -267,7 +267,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
                     <button
                       class="link"
                       @click=${this._openMoreInfo}
-                      .entityId="${scriptId}"
+                      .entityId=${scriptId}
                     >
                       ${script.attributes.friendly_name || script.entity_id}
                     </button>

src/components/ha-service-control.ts

@@ -197,10 +197,10 @@ export class HaServiceControl extends LitElement {
         <p>${serviceData?.description}</p>
         ${this._manifest
           ? html` <a
-              href="${this._manifest.documentation}"
+              href=${this._manifest.documentation}
-              title="${this.hass.localize(
+              title=${this.hass.localize(
                 "ui.components.service-control.integration_doc"
-              )}"
+              )}
               target="_blank"
               rel="noreferrer"
             >
@@ -406,7 +406,7 @@ export class HaServiceControl extends LitElement {
     this._manifest = undefined;
     try {
       this._manifest = await fetchIntegrationManifest(this.hass, integration);
-    } catch (err) {
+    } catch (err: any) {
       // Ignore if loading manifest fails. Probably bad JSON in manifest
     }
   }

src/components/ha-service-picker.ts

@@ -11,6 +11,7 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
+  // eslint-disable-next-line lit/prefer-static-styles
 ) => html`<style>
     paper-item {
       padding: 0;

src/components/ha-yaml-editor.ts

@@ -36,7 +36,7 @@ export class HaYamlEditor extends LitElement {
         value && !isEmpty(value)
           ? dump(value, { schema: this.yamlSchema })
           : "";
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error(err, value);
       alert(`There was an error converting to YAML: ${err}`);
@@ -73,7 +73,7 @@ export class HaYamlEditor extends LitElement {
     if (this._yaml) {
       try {
         parsed = load(this._yaml, { schema: this.yamlSchema });
-      } catch (err) {
+      } catch (err: any) {
         // Invalid YAML
         isValid = false;
       }

src/components/media-player/ha-media-player-browse.ts

@@ -375,10 +375,10 @@ export class HaMediaPlayerBrowse extends LitElement {
                         "ui.components.media-browser.learn_adding_local_media",
                         "documentation",
                         html`<a
-                          href="${documentationUrl(
+                          href=${documentationUrl(
                             this.hass,
                             "/more-info/local-media/add-media"
-                          )}"
+                          )}
                           target="_blank"
                           rel="noreferrer"
                           >${this.hass.localize(
@@ -510,7 +510,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         item.media_content_id,
         item.media_content_type
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize(
           "ui.components.media-browser.media_browsing_error"
@@ -591,10 +591,10 @@ export class HaMediaPlayerBrowse extends LitElement {
             "ui.components.media-browser.setup_local_help",
             "documentation",
             html`<a
-              href="${documentationUrl(
+              href=${documentationUrl(
                 this.hass,
                 "/more-info/local-media/setup-media"
-              )}"
+              )}
               target="_blank"
               rel="noreferrer"
               >${this.hass.localize(

src/components/trace/hat-graph-branch.ts

@@ -88,7 +88,7 @@ export class HatGraphBranch extends LitElement {
           `
         : ""}
       <div id="branches">
-        <svg id="lines" width="${this._totalWidth}" height="${this._maxHeight}">
+        <svg id="lines" width=${this._totalWidth} height=${this._maxHeight}>
           ${this._branches.map((branch) => {
             if (branch.end) return "";
             return svg`

src/components/trace/hat-script-graph.ts

@@ -453,7 +453,7 @@ export class HatScriptGraph extends LitElement {
           </mwc-icon-button>
         </div>
       `;
-    } catch (err) {
+    } catch (err: any) {
       if (__DEV__) {
         // eslint-disable-next-line no-console
         console.log("Error creating script graph:", err);

src/components/trace/hat-trace-timeline.ts

@@ -239,7 +239,7 @@ class ActionRenderer {
     let data;
     try {
       data = getDataFromPath(this.trace.config, path);
-    } catch (err) {
+    } catch (err: any) {
       this._renderEntry(
         path,
         `Unable to extract path ${path}. Download trace and report as bug`

src/data/cached-history.ts

@@ -136,7 +136,7 @@ export const getRecentWithCache = (
         ),
       ]);
       fetchedHistory = results[1];
-    } catch (err) {
+    } catch (err: any) {
       delete stateHistoryCache[cacheKey];
       throw err;
     }

src/data/collection.ts

@@ -63,7 +63,7 @@ export const getOptimisticCollection = <StateType>(
 
       try {
         return await saveCollection(conn, data);
-      } catch (err) {
+      } catch (err: any) {
         if (store) {
           store.setState(current as any, true);
         }

src/data/logbook.ts

@@ -103,7 +103,7 @@ export const getLogbookDataCache = async (
     DATA_CACHE[cacheKey] = {};
   }
 
-  if (DATA_CACHE[cacheKey][entityId]) {
+  if (entityId in DATA_CACHE[cacheKey]) {
     return DATA_CACHE[cacheKey][entityId];
   }
 

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -121,7 +121,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
         </mwc-button>
         <mwc-button
           slot="primaryAction"
-          @click="${this._updateEntry}"
+          @click=${this._updateEntry}
           .disabled=${this._submitting}
         >
           ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
@@ -171,7 +171,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
       }
       this._params!.entryUpdated(result.config_entry);
       this.closeDialog();
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || "Unknown error";
     } finally {
       this._submitting = false;

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -115,7 +115,7 @@ class DataEntryFlowDialog extends LitElement {
           this.hass,
           params.continueFlowId
         );
-      } catch (err) {
+      } catch (err: any) {
         this._step = undefined;
         this._params = undefined;
         showAlertDialog(this, {
@@ -370,7 +370,7 @@ class DataEntryFlowDialog extends LitElement {
       let step: DataEntryFlowStep;
       try {
         step = await this._params!.flowConfig.createFlow(this.hass, handler);
-      } catch (err) {
+      } catch (err: any) {
         this._step = undefined;
         this._params = undefined;
         showAlertDialog(this, {

src/dialogs/config-flow/step-flow-abort.ts

@@ -26,7 +26,7 @@ class StepFlowAbort extends LitElement {
         ${this.flowConfig.renderAbortDescription(this.hass, this.step)}
       </div>
       <div class="buttons">
-        <mwc-button @click="${this._flowDone}"
+        <mwc-button @click=${this._flowDone}
           >${this.hass.localize(
             "ui.panel.config.integrations.config_flow.close"
           )}</mwc-button

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -65,7 +65,7 @@ class StepFlowCreateEntry extends LitElement {
             `}
       </div>
       <div class="buttons">
-        <mwc-button @click="${this._flowDone}"
+        <mwc-button @click=${this._flowDone}
           >${localize(
             "ui.panel.config.integrations.config_flow.finish"
           )}</mwc-button
@@ -87,7 +87,7 @@ class StepFlowCreateEntry extends LitElement {
       await updateDeviceRegistryEntry(this.hass, device, {
         area_id: area,
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         text: this.hass.localize(
           "ui.panel.config.integrations.config_flow.error_saving_area",

src/dialogs/config-flow/step-flow-form.ts

@@ -159,7 +159,7 @@ class StepFlowForm extends LitElement {
       fireEvent(this, "flow-update", {
         step,
       });
-    } catch (err) {
+    } catch (err: any) {
       this._errorMsg =
         (err && err.body && err.body.message) || "Unknown error occurred";
     } finally {

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -118,12 +118,12 @@ class StepFlowPickHandler extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.integrations.note_about_website_reference"
                 )}<a
-                  href="${documentationUrl(
+                  href=${documentationUrl(
                     this.hass,
                     `/integrations/${
                       this._filter ? `#search/${this._filter}` : ""
                     }`
-                  )}"
+                  )}
                   target="_blank"
                   rel="noreferrer"
                   >${this.hass.localize(

src/dialogs/make-dialog-manager.ts

@@ -84,7 +84,7 @@ export const showDialog = async (
         { dialog: dialogTag, dialogParams: dialogParams, open: true },
         ""
       );
-    } catch (err) {
+    } catch (err: any) {
       // dialogParams could not be cloned, probably contains callback
       mainWindow.history.pushState(
         { dialog: dialogTag, dialogParams: null, open: true },

src/dialogs/more-info/controls/more-info-camera.ts

@@ -106,7 +106,7 @@ class MoreInfoCamera extends LitElement {
           preload_stream: checkbox.checked!,
         }
       );
-    } catch (err) {
+    } catch (err: any) {
       alert(err.message);
       checkbox.checked = !checkbox.checked;
     }

src/dialogs/more-info/controls/more-info-counter.ts

@@ -21,21 +21,21 @@ class MoreInfoCounter extends LitElement {
     return html`
       <div class="actions">
         <mwc-button
-          .action="${"increment"}"
+          .action=${"increment"}
           @click=${this._handleActionClick}
           .disabled=${disabled}
         >
           ${this.hass!.localize("ui.card.counter.actions.increment")}
         </mwc-button>
         <mwc-button
-          .action="${"decrement"}"
+          .action=${"decrement"}
           @click=${this._handleActionClick}
           .disabled=${disabled}
         >
           ${this.hass!.localize("ui.card.counter.actions.decrement")}
         </mwc-button>
         <mwc-button
-          .action="${"reset"}"
+          .action=${"reset"}
           @click=${this._handleActionClick}
           .disabled=${disabled}
         >

src/dialogs/more-info/controls/more-info-timer.ts

@@ -27,26 +27,17 @@ class MoreInfoTimer extends LitElement {
           : ""}
         ${this.stateObj.state === "active"
           ? html`
-              <mwc-button
+              <mwc-button .action=${"pause"} @click=${this._handleActionClick}>
-                .action=${"pause"}
-                @click="${this._handleActionClick}"
-              >
                 ${this.hass!.localize("ui.card.timer.actions.pause")}
               </mwc-button>
             `
           : ""}
         ${this.stateObj.state === "active" || this.stateObj.state === "paused"
           ? html`
-              <mwc-button
+              <mwc-button .action=${"cancel"} @click=${this._handleActionClick}>
-                .action=${"cancel"}
-                @click="${this._handleActionClick}"
-              >
                 ${this.hass!.localize("ui.card.timer.actions.cancel")}
               </mwc-button>
-              <mwc-button
+              <mwc-button .action=${"finish"} @click=${this._handleActionClick}>
-                .action=${"finish"}
-                @click="${this._handleActionClick}"
-              >
                 ${this.hass!.localize("ui.card.timer.actions.finish")}
               </mwc-button>
             `

src/dialogs/more-info/controls/more-info-weather.ts

@@ -175,7 +175,7 @@ class MoreInfoWeather extends LitElement {
                   ${item.condition
                     ? html`
                         <ha-svg-icon
-                          .path="${weatherIcons[item.condition]}"
+                          .path=${weatherIcons[item.condition]}
                         ></ha-svg-icon>
                       `
                     : ""}

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -141,7 +141,7 @@ export class MoreInfoLogbook extends LitElement {
         this.hass.user?.is_admin ? loadTraceContexts(this.hass) : {},
         this._fetchUserPromise,
       ]);
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message;
     }
 

src/dialogs/notifications/configurator-notification-item.ts

@@ -33,7 +33,7 @@ export class HuiConfiguratorNotificationItem extends LitElement {
           )}
         </div>
 
-        <mwc-button slot="actions" @click="${this._handleClick}"
+        <mwc-button slot="actions" @click=${this._handleClick}
           >${computeStateDisplay(
             this.hass.localize,
             this.notification,

src/dialogs/notifications/notification-item.ts

@@ -29,13 +29,13 @@ export class HuiNotificationItem extends LitElement {
       ? html`
           <configurator-notification-item
             .hass=${this.hass}
-            .notification="${this.notification}"
+            .notification=${this.notification}
           ></configurator-notification-item>
         `
       : html`
           <persistent-notification-item
             .hass=${this.hass}
-            .notification="${this.notification}"
+            .notification=${this.notification}
           ></persistent-notification-item>
         `;
   }

src/dialogs/notifications/persistent-notification-item.ts

@@ -24,16 +24,13 @@ export class HuiPersistentNotificationItem extends LitElement {
       <notification-item-template>
         <span slot="header"> ${this.notification.title} </span>
 
-        <ha-markdown
+        <ha-markdown breaks content=${this.notification.message}></ha-markdown>
-          breaks
-          content="${this.notification.message}"
-        ></ha-markdown>
 
         <div class="time">
           <span>
             <ha-relative-time
               .hass=${this.hass}
-              .datetime="${this.notification.created_at}"
+              .datetime=${this.notification.created_at}
             ></ha-relative-time>
             <paper-tooltip animation-delay="0">
               ${this._computeTooltip(this.hass, this.notification)}
@@ -41,7 +38,7 @@ export class HuiPersistentNotificationItem extends LitElement {
           </span>
         </div>
 
-        <mwc-button slot="actions" @click="${this._handleDismiss}"
+        <mwc-button slot="actions" @click=${this._handleDismiss}
           >${this.hass.localize(
             "ui.card.persistent_notification.dismiss"
           )}</mwc-button

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -271,7 +271,7 @@ export class QuickBar extends LitElement {
       >
         <span>
           <ha-chip
-            .label="${item.categoryText}"
+            .label=${item.categoryText}
             hasIcon
             class="command-category ${item.categoryKey}"
           >

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
@@ -114,7 +115,7 @@ export class HaVoiceCommandDialog extends LitElement {
                 <div class="side-by-side" @click=${this._completeOnboarding}>
                   <a
                     class="button"
-                    href="${this._agentInfo.onboarding.url}"
+                    href=${this._agentInfo.onboarding.url}
                     target="_blank"
                     rel="noreferrer"
                     ><mwc-button unelevated
@@ -138,7 +139,7 @@ export class HaVoiceCommandDialog extends LitElement {
         >
           ${this._conversation.map(
             (message) => html`
-              <div class="${this._computeMessageClasses(message)}">
+              <div class=${this._computeMessageClasses(message)}>
                 ${message.text}
               </div>
             `
@@ -159,11 +160,11 @@ export class HaVoiceCommandDialog extends LitElement {
         <div class="input">
           <paper-input
             @keyup=${this._handleKeyUp}
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               `ui.dialogs.voice_command.${
                 SpeechRecognition ? "label_voice" : "label"
               }`
-            )}"
+            )}
             autofocus
           >
             ${SpeechRecognition

src/entrypoints/core.ts

@@ -68,7 +68,7 @@ const connProm = async (auth) => {
     }
 
     return { auth, conn };
-  } catch (err) {
+  } catch (err: any) {
     if (err !== ERR_INVALID_AUTH) {
       throw err;
     }

src/external_app/external_auth.ts

@@ -71,7 +71,7 @@ export class ExternalAuth extends Auth {
       try {
         await this._tokenCallbackPromise;
         return;
-      } catch (e) {
+      } catch (err: any) {
         // _tokenCallbackPromise is in a rejected state
         // Clear the _tokenCallbackPromise and go on refreshing access token
         this._tokenCallbackPromise = undefined;

src/layouts/ha-app-layout.js

@@ -1,3 +1,4 @@
+/* eslint-plugin-disable lit */
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

src/layouts/hass-tabs-subpage-data-table.ts

@@ -169,7 +169,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         ? html`<div class="active-filters">
             ${this.narrow
               ? html`<div>
-                  <ha-svg-icon .path="${mdiFilterVariant}"></ha-svg-icon>
+                  <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
                   <paper-tooltip animation-delay="0" position="left">
                     ${filterInfo}
                   </paper-tooltip>

src/layouts/hass-tabs-subpage.ts

@@ -178,7 +178,7 @@ class HassTabsSubpage extends LitElement {
       >
         <slot></slot>
       </div>
-      <div id="fab" class="${classMap({ tabs: showTabs })}">
+      <div id="fab" class=${classMap({ tabs: showTabs })}>
         <slot name="fab"></slot>
       </div>
     `;

src/layouts/home-assistant-main.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lit/prefer-static-styles */
 import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";

src/layouts/home-assistant.ts

@@ -145,10 +145,12 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
           if (registration) {
             registration.update();
           } else {
+            // @ts-ignore Firefox supports forceGet
             location.reload(true);
           }
         });
       } else {
+        // @ts-ignore Firefox supports forceGet
         location.reload(true);
       }
     }
@@ -170,7 +172,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       const { auth, conn } = result;
       this._haVersion = conn.haVersion;
       this.initializeHass(auth, conn);
-    } catch (err) {
+    } catch (err: any) {
       this._error = true;
     }
   }

src/onboarding/ha-onboarding.ts

@@ -183,7 +183,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
         // Only load if we have supervisor
         import("./onboarding-restore-backup");
       }
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error(
         "Something went wrong loading onboarding-restore-backup",
@@ -220,7 +220,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       }
 
       this._steps = steps;
-    } catch (err) {
+    } catch (err: any) {
       alert("Something went wrong loading onboarding, try refreshing");
     }
   }
@@ -240,7 +240,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
           authCode: result.auth_code,
         });
         await this._connectHass(auth);
-      } catch (err) {
+      } catch (err: any) {
         alert("Ah snap, something went wrong!");
         location.reload();
       } finally {
@@ -275,7 +275,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
           client_id: authParams.client_id!,
           redirect_uri: authParams.redirect_uri!,
         });
-      } catch (err) {
+      } catch (err: any) {
         this.hass!.connection.close();
         await this.hass!.auth.revoke();
 

src/onboarding/onboarding-analytics.ts

@@ -72,7 +72,7 @@ class OnboardingAnalytics extends LitElement {
       fireEvent(this, "onboarding-step", {
         type: "analytics",
       });
-    } catch (err) {
+    } catch (err: any) {
       alert(`Failed to save: ${err.message}`);
     }
   }

src/onboarding/onboarding-core-config.ts

@@ -307,7 +307,7 @@ class OnboardingCoreConfig extends LitElement {
       if (values.currency) {
         this._currency = values.currency;
       }
-    } catch (err) {
+    } catch (err: any) {
       alert(`Failed to detect location information: ${err.message}`);
     } finally {
       this._working = false;
@@ -333,7 +333,7 @@ class OnboardingCoreConfig extends LitElement {
         type: "core_config",
         result,
       });
-    } catch (err) {
+    } catch (err: any) {
       this._working = false;
       alert(`Failed to save: ${err.message}`);
     }

src/onboarding/onboarding-create-user.ts

@@ -58,49 +58,49 @@ class OnboardingCreateUser extends LitElement {
     <form>
       <paper-input
         name="name"
-        label="${this.localize("ui.panel.page-onboarding.user.data.name")}"
+        label=${this.localize("ui.panel.page-onboarding.user.data.name")}
         .value=${this._name}
         @value-changed=${this._handleValueChanged}
         required
         auto-validate
         autocapitalize='on'
-        .errorMessage="${this.localize(
+        .errorMessage=${this.localize(
           "ui.panel.page-onboarding.user.required_field"
-        )}"
+        )}
         @blur=${this._maybePopulateUsername}
       ></paper-input>
 
       <paper-input
         name="username"
-        label="${this.localize("ui.panel.page-onboarding.user.data.username")}"
+        label=${this.localize("ui.panel.page-onboarding.user.data.username")}
         value=${this._username}
         @value-changed=${this._handleValueChanged}
         required
         auto-validate
         autocapitalize='none'
-        .errorMessage="${this.localize(
+        .errorMessage=${this.localize(
           "ui.panel.page-onboarding.user.required_field"
-        )}"
+        )}
       ></paper-input>
 
       <paper-input
         name="password"
-        label="${this.localize("ui.panel.page-onboarding.user.data.password")}"
+        label=${this.localize("ui.panel.page-onboarding.user.data.password")}
         value=${this._password}
         @value-changed=${this._handleValueChanged}
         required
         type='password'
         auto-validate
-        .errorMessage="${this.localize(
+        .errorMessage=${this.localize(
           "ui.panel.page-onboarding.user.required_field"
-        )}"
+        )}
       ></paper-input>
 
       <paper-input
         name="passwordConfirm"
-        label="${this.localize(
+        label=${this.localize(
           "ui.panel.page-onboarding.user.data.password_confirm"
-        )}"
+        )}
         value=${this._passwordConfirm}
         @value-changed=${this._handleValueChanged}
         required
@@ -110,9 +110,9 @@ class OnboardingCreateUser extends LitElement {
           this._passwordConfirm !== "" &&
           this._passwordConfirm !== this._password
         }
-        .errorMessage="${this.localize(
+        .errorMessage=${this.localize(
           "ui.panel.page-onboarding.user.error.password_not_match"
-        )}"
+        )}
       ></paper-input>
 
       <p class="action">
@@ -189,7 +189,7 @@ class OnboardingCreateUser extends LitElement {
         type: "user",
         result,
       });
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line
       console.error(err);
       this._loading = false;

src/onboarding/onboarding-restore-backup.ts

@@ -62,7 +62,7 @@ class OnboardingRestoreBackup extends ProvideHassLitMixin(LitElement) {
     if (this.restoring) {
       try {
         await fetchInstallationType();
-      } catch (err) {
+      } catch (err: any) {
         if ((err as Error).message === "unauthorized") {
           window.location.replace("/");
         }

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -83,7 +83,7 @@ class DialogAreaDetail extends LitElement {
               <mwc-button
                 slot="secondaryAction"
                 class="warning"
-                @click="${this._deleteEntry}"
+                @click=${this._deleteEntry}
                 .disabled=${this._submitting}
               >
                 ${this.hass.localize("ui.panel.config.areas.editor.delete")}
@@ -92,7 +92,7 @@ class DialogAreaDetail extends LitElement {
           : html``}
         <mwc-button
           slot="primaryAction"
-          @click="${this._updateEntry}"
+          @click=${this._updateEntry}
           .disabled=${nameInvalid || this._submitting}
         >
           ${entry
@@ -130,7 +130,7 @@ class DialogAreaDetail extends LitElement {
         await this._params!.createEntry!(values);
       }
       this._params = undefined;
-    } catch (err) {
+    } catch (err: any) {
       this._error =
         err.message ||
         this.hass.localize("ui.panel.config.areas.editor.unknown_error");

src/panels/config/areas/ha-config-area-page.ts

@@ -388,7 +388,7 @@ class HaConfigAreaPage extends LitElement {
         try {
           await deleteAreaRegistryEntry(this.hass!, entry!.area_id);
           return true;
-        } catch (err) {
+        } catch (err: any) {
           return false;
         }
       },

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -310,7 +310,9 @@ export default class HaAutomationActionRow extends LitElement {
     }
 
     if (type !== getType(this.action)) {
-      const elClass = customElements.get(`ha-automation-action-${type}`);
+      const elClass = customElements.get(
+        `ha-automation-action-${type}`
+      ) as CustomElementConstructor & { defaultConfig: Action };
 
       fireEvent(this, "value-changed", {
         value: {

src/panels/config/automation/action/types/ha-automation-action-service.ts

@@ -37,8 +37,8 @@ export class HaServiceAction extends LitElement implements ActionElement {
     }
     try {
       assert(this.action, actionStruct);
-    } catch (error) {
+    } catch (err: any) {
-      fireEvent(this, "ui-mode-not-available", error);
+      fireEvent(this, "ui-mode-not-available", err);
       return;
     }
     if (this.action && hasTemplate(this.action)) {

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -111,7 +111,11 @@ export default class HaAutomationConditionEditor extends LitElement {
       return;
     }
 
-    const elClass = customElements.get(`ha-automation-condition-${type}`);
+    const elClass = customElements.get(
+      `ha-automation-condition-${type}`
+    ) as CustomElementConstructor & {
+      defaultConfig: Omit<Condition, "condition">;
+    };
 
     if (type !== this.condition.condition) {
       fireEvent(this, "value-changed", {

src/panels/config/automation/ha-automation-editor.ts

@@ -378,7 +378,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       }
       this._dirty = false;
       this._config = config;
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         text:
           err.status_code === 404

src/panels/config/automation/ha-automation-picker.ts

@@ -150,9 +150,9 @@ class HaAutomationPicker extends LitElement {
           <mwc-icon-button
             .automation=${automation}
             @click=${this._showInfo}
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.config.automation.picker.show_info_automation"
-            )}"
+            )}
           >
             <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
           </mwc-icon-button>
@@ -202,9 +202,9 @@ class HaAutomationPicker extends LitElement {
           >
             <mwc-icon-button
               .disabled=${!automation.attributes.id}
-              .label="${this.hass.localize(
+              .label=${this.hass.localize(
                 "ui.panel.config.automation.picker.edit_automation"
-              )}"
+              )}
             >
               <ha-svg-icon
                 .path=${automation.attributes.id ? mdiPencil : mdiPencilOff}
@@ -300,7 +300,7 @@ class HaAutomationPicker extends LitElement {
         ${this.hass.localize("ui.panel.config.automation.picker.introduction")}
         <p>
           <a
-            href="${documentationUrl(this.hass, "/docs/automation/editor/")}"
+            href=${documentationUrl(this.hass, "/docs/automation/editor/")}
             target="_blank"
             rel="noreferrer"
           >

src/panels/config/automation/manual-automation-editor.ts

@@ -72,10 +72,7 @@ export class HaManualAutomationEditor extends LitElement {
                 "ui.panel.config.automation.editor.modes.description",
                 "documentation_link",
                 html`<a
-                  href="${documentationUrl(
+                  href=${documentationUrl(this.hass, "/docs/automation/modes/")}
-                    this.hass,
-                    "/docs/automation/modes/"
-                  )}"
                   target="_blank"
                   rel="noreferrer"
                   >${this.hass.localize(
@@ -167,7 +164,7 @@ export class HaManualAutomationEditor extends LitElement {
             )}
           </p>
           <a
-            href="${documentationUrl(this.hass, "/docs/automation/trigger/")}"
+            href=${documentationUrl(this.hass, "/docs/automation/trigger/")}
             target="_blank"
             rel="noreferrer"
           >
@@ -196,7 +193,7 @@ export class HaManualAutomationEditor extends LitElement {
             )}
           </p>
           <a
-            href="${documentationUrl(this.hass, "/docs/scripts/conditions/")}"
+            href=${documentationUrl(this.hass, "/docs/scripts/conditions/")}
             target="_blank"
             rel="noreferrer"
           >
@@ -225,7 +222,7 @@ export class HaManualAutomationEditor extends LitElement {
             )}
           </p>
           <a
-            href="${documentationUrl(this.hass, "/docs/automation/action/")}"
+            href=${documentationUrl(this.hass, "/docs/automation/action/")}
             target="_blank"
             rel="noreferrer"
           >

src/panels/config/automation/thingtalk/dialog-thingtalk.ts

@@ -145,10 +145,10 @@ class DialogThingtalk extends LitElement {
           >
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button class="left" @click="${this._skip}">
+          <mwc-button class="left" @click=${this._skip}>
             ${this.hass.localize(`ui.common.skip`)}
           </mwc-button>
-          <mwc-button @click="${this._generate}" .disabled=${this._submitting}>
+          <mwc-button @click=${this._generate} .disabled=${this._submitting}>
             ${this._submitting
               ? html`<ha-circular-progress
                   active
@@ -178,7 +178,7 @@ class DialogThingtalk extends LitElement {
       const result = await convertThingTalk(this.hass, this._value);
       config = result.config;
       placeholders = result.placeholders;
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message;
       this._submitting = false;
       return;

src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts

@@ -127,7 +127,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
         modal
         with-backdrop
         .opened=${this.opened}
-        @opened-changed="${this._openedChanged}"
+        @opened-changed=${this._openedChanged}
       >
         <h2>
           ${this.hass.localize(
@@ -244,10 +244,10 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
           )}
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button class="left" @click="${this.skip}">
+          <mwc-button class="left" @click=${this.skip}>
             ${this.hass.localize(`ui.common.skip`)}
           </mwc-button>
-          <mwc-button @click="${this._done}" .disabled=${!this._isDone}>
+          <mwc-button @click=${this._done} .disabled=${!this._isDone}>
             ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
           </mwc-button>
         </div>

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -241,7 +241,11 @@ export default class HaAutomationTriggerRow extends LitElement {
       return;
     }
 
-    const elClass = customElements.get(`ha-automation-trigger-${type}`);
+    const elClass = customElements.get(
+      `ha-automation-trigger-${type}`
+    ) as CustomElementConstructor & {
+      defaultConfig: Omit<Trigger, "platform">;
+    };
 
     if (type !== this.trigger.platform) {
       const value = {

src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts

@@ -29,8 +29,8 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
           "ui.panel.config.automation.editor.triggers.type.event.event_type"
         )}
         name="event_type"
-        .value="${event_type}"
+        .value=${event_type}
-        @value-changed="${this._valueChanged}"
+        @value-changed=${this._valueChanged}
       ></paper-input>
       <ha-yaml-editor
         .label=${this.hass.localize(

src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts

@@ -35,7 +35,7 @@ export default class HaGeolocationTrigger extends LitElement {
         )}
         name="source"
         .value=${source}
-        @value-changed="${this._valueChanged}"
+        @value-changed=${this._valueChanged}
       ></paper-input>
       <ha-entity-picker
         .label=${this.hass.localize(

src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts

@@ -30,7 +30,7 @@ export default class HaHassTrigger extends LitElement {
       <paper-radio-group
         .selected=${event}
         aria-labelledby="eventlabel"
-        @paper-radio-group-changed="${this._radioGroupPicked}"
+        @paper-radio-group-changed=${this._radioGroupPicked}
       >
         <paper-radio-button name="start">
           ${this.hass.localize(

src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts

@@ -43,8 +43,8 @@ export default class HaNumericStateTrigger extends LitElement {
 
     return html`
       <ha-entity-picker
-        .value="${entity_id}"
+        .value=${entity_id}
-        @value-changed="${this._valueChanged}"
+        @value-changed=${this._valueChanged}
         .name=${"entity_id"}
         .hass=${this.hass}
         allow-custom-entity

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -183,8 +183,8 @@ class DialogImportBlueprint extends LitElement {
         return;
       }
       this._result = await importBlueprint(this.hass, url);
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     } finally {
       this._importing = false;
     }
@@ -206,8 +206,8 @@ class DialogImportBlueprint extends LitElement {
       );
       this._params.importedCallback();
       this.closeDialog();
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     } finally {
       this._saving = false;
     }

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -244,10 +244,10 @@ class HaBlueprintOverview extends LitElement {
         ${this.hass.localize("ui.panel.config.blueprint.overview.introduction")}
         <p>
           <a
-            href="${documentationUrl(
+            href=${documentationUrl(
               this.hass,
               "/docs/automation/using_blueprints/"
-            )}"
+            )}
             target="_blank"
             rel="noreferrer"
           >

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -110,7 +110,7 @@ export class CloudAlexaPref extends LitElement {
     this._syncing = true;
     try {
       await syncCloudAlexaEntities(this.hass!);
-    } catch (err) {
+    } catch (err: any) {
       alert(
         `${this.hass!.localize(
           "ui.panel.config.cloud.account.alexa.sync_entities_error"
@@ -126,7 +126,7 @@ export class CloudAlexaPref extends LitElement {
     try {
       await updateCloudPref(this.hass!, { alexa_enabled: toggle.checked! });
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       toggle.checked = !toggle.checked;
     }
   }
@@ -138,7 +138,7 @@ export class CloudAlexaPref extends LitElement {
         alexa_report_state: toggle.checked!,
       });
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       alert(
         `${this.hass!.localize(
           "ui.panel.config.cloud.account.alexa.state_reporting_error",

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -35,8 +35,8 @@ export class CloudGooglePref extends LitElement {
         <div class="switch">
           <ha-switch
             id="google_enabled"
-            .checked="${google_enabled}"
+            .checked=${google_enabled}
-            @change="${this._enableToggleChanged}"
+            @change=${this._enableToggleChanged}
           ></ha-switch>
         </div>
         <div class="card-content">
@@ -111,15 +111,15 @@ export class CloudGooglePref extends LitElement {
                     "ui.panel.config.cloud.account.google.enter_pin_info"
                   )}
                   <paper-input
-                    label="${this.hass.localize(
+                    label=${this.hass.localize(
                       "ui.panel.config.cloud.account.google.devices_pin"
-                    )}"
+                    )}
                     id="google_secure_devices_pin"
-                    placeholder="${this.hass.localize(
+                    placeholder=${this.hass.localize(
                       "ui.panel.config.cloud.account.google.enter_pin_hint"
-                    )}"
+                    )}
                     .value=${google_secure_devices_pin || ""}
-                    @change="${this._pinChanged}"
+                    @change=${this._pinChanged}
                   ></paper-input>
                 </div>
               `
@@ -171,7 +171,7 @@ export class CloudGooglePref extends LitElement {
     try {
       await updateCloudPref(this.hass, { [toggle.id]: toggle.checked! });
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       toggle.checked = !toggle.checked;
     }
   }
@@ -183,7 +183,7 @@ export class CloudGooglePref extends LitElement {
         google_report_state: toggle.checked!,
       });
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       alert(
         `Unable to ${toggle.checked ? "enable" : "disable"} report state. ${
           err.message
@@ -201,7 +201,7 @@ export class CloudGooglePref extends LitElement {
       });
       showSaveSuccessToast(this, this.hass);
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       alert(
         `${this.hass.localize(
           "ui.panel.config.cloud.account.google.enter_pin_error"

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -56,8 +56,8 @@ export class CloudRemotePref extends LitElement {
       >
         <div class="switch">
           <ha-switch
-            .checked="${remote_enabled}"
+            .checked=${remote_enabled}
-            @change="${this._toggleChanged}"
+            @change=${this._toggleChanged}
           ></ha-switch>
         </div>
         <div class="card-content">
@@ -130,7 +130,7 @@ export class CloudRemotePref extends LitElement {
         await disconnectCloudRemote(this.hass);
       }
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       alert(err.message);
       toggle.checked = !toggle.checked;
     }

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -188,7 +188,7 @@ export class CloudTTSPref extends LitElement {
         tts_default_voice: [language, newGender],
       });
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       this.savingPreferences = false;
       // eslint-disable-next-line no-console
       console.error(err);
@@ -212,7 +212,7 @@ export class CloudTTSPref extends LitElement {
         tts_default_voice: [language, gender],
       });
       fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err) {
+    } catch (err: any) {
       this.savingPreferences = false;
       // eslint-disable-next-line no-console
       console.error(err);

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -98,7 +98,7 @@ export class CloudWebhooks extends LitElement {
                         `
                       : this._cloudHooks![entry.webhook_id]
                       ? html`
-                          <mwc-button @click="${this._handleManageButton}">
+                          <mwc-button @click=${this._handleManageButton}>
                             ${this.hass!.localize(
                               "ui.panel.config.cloud.account.webhooks.manage"
                             )}
@@ -156,7 +156,7 @@ export class CloudWebhooks extends LitElement {
 
     try {
       updatedWebhook = await createCloudhook(this.hass!, entry.webhook_id);
-    } catch (err) {
+    } catch (err: any) {
       alert((err as WebhookError).message);
       return;
     } finally {
@@ -178,7 +178,7 @@ export class CloudWebhooks extends LitElement {
     this._progress = [...this._progress, webhookId];
     try {
       await deleteCloudhook(this.hass!, webhookId!);
-    } catch (err) {
+    } catch (err: any) {
       alert(
         `${this.hass!.localize(
           "ui.panel.config.cloud.account.webhooks.disable_hook_error_msg"

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -159,7 +159,7 @@ export class DialogTryTts extends LitElement {
         options: { gender },
       });
       url = result.path;
-    } catch (err) {
+    } catch (err: any) {
       this._loadingExample = false;
       showAlertDialog(this, {
         text: `Unable to load example. ${err.error || err.body || err}`,

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -57,7 +57,7 @@ class DialogCloudCertificate extends LitElement {
         </div>
 
         <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._closeDialog}"
+          <mwc-button @click=${this._closeDialog}
             >${this.hass!.localize(
               "ui.panel.config.cloud.dialog_certificate.close"
             )}</mwc-button

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -54,10 +54,10 @@ export class DialogManageCloudhook extends LitElement {
             )}
           </p>
           <paper-input
-            label="${inputLabel}"
+            label=${inputLabel}
-            value="${cloudhook.cloudhook_url}"
+            value=${cloudhook.cloudhook_url}
-            @click="${this._copyClipboard}"
+            @click=${this._copyClipboard}
-            @blur="${this._restoreLabel}"
+            @blur=${this._restoreLabel}
           ></paper-input>
           <p>
             ${cloudhook.managed
@@ -70,7 +70,7 @@ export class DialogManageCloudhook extends LitElement {
                   ${this.hass!.localize(
                     "ui.panel.config.cloud.dialog_cloudhook.info_disable_webhook"
                   )}
-                  <button class="link" @click="${this._disableWebhook}">
+                  <button class="link" @click=${this._disableWebhook}>
                     ${this.hass!.localize(
                       "ui.panel.config.cloud.dialog_cloudhook.link_disable_webhook"
                     )}</button
@@ -80,14 +80,14 @@ export class DialogManageCloudhook extends LitElement {
         </div>
 
         <div class="paper-dialog-buttons">
-          <a href="${docsUrl}" target="_blank" rel="noreferrer">
+          <a href=${docsUrl} target="_blank" rel="noreferrer">
             <mwc-button
               >${this.hass!.localize(
                 "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
               )}</mwc-button
             >
           </a>
-          <mwc-button @click="${this._closeDialog}"
+          <mwc-button @click=${this._closeDialog}
             >${this.hass!.localize(
               "ui.panel.config.cloud.dialog_cloudhook.close"
             )}</mwc-button
@@ -134,7 +134,7 @@ export class DialogManageCloudhook extends LitElement {
       paperInput.label = this.hass!.localize(
         "ui.panel.config.cloud.dialog_cloudhook.copied_to_clipboard"
       );
-    } catch (err) {
+    } catch (err: any) {
       // Copying failed. Oh no
     }
   }

src/panels/config/core/ha-config-analytics.ts

@@ -75,7 +75,7 @@ class ConfigAnalytics extends LitElement {
     this._error = undefined;
     try {
       this._analyticsDetails = await getAnalyticsDetails(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || err;
     }
   }
@@ -87,7 +87,7 @@ class ConfigAnalytics extends LitElement {
         this.hass,
         this._analyticsDetails?.preferences || {}
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || err;
     }
   }

src/panels/config/core/ha-config-core-form.ts

@@ -279,7 +279,7 @@ class ConfigCoreForm extends LitElement {
         unit_system: this._unitSystemValue,
         time_zone: this._timeZoneValue,
       });
-    } catch (err) {
+    } catch (err: any) {
       alert(`Error saving config: ${err.message}`);
     } finally {
       this._working = false;

src/panels/config/core/ha-config-name-form.ts

@@ -75,7 +75,7 @@ class ConfigNameForm extends LitElement {
       await saveCoreConfig(this.hass, {
         location_name: this._nameValue,
       });
-    } catch (err) {
+    } catch (err: any) {
       alert("FAIL");
     } finally {
       this._working = false;

src/panels/config/core/ha-config-network.ts

@@ -87,7 +87,7 @@ class ConfigNetwork extends LitElement {
         }
       }
       this._networkConfig = coreNetwork;
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || err;
     }
   }
@@ -99,7 +99,7 @@ class ConfigNetwork extends LitElement {
         this.hass,
         this._networkConfig?.configured_adapters || []
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || err;
     }
   }

src/panels/config/core/ha-config-url-form.ts

@@ -120,7 +120,7 @@ class ConfigUrlForm extends LitElement {
         external_url: this._external_url || null,
         internal_url: this._internal_url || null,
       });
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || err;
     } finally {
       this._working = false;

src/panels/config/customize/ha-config-customize.ts

@@ -3,6 +3,7 @@ import { property } from "lit/decorators";
 import "../../../components/ha-card";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import "../ha-config-section";
@@ -23,7 +24,6 @@ class HaConfigCustomize extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <style include="ha-style"></style>
       <hass-tabs-subpage
       .hass=${this.hass}
         .narrow=${this.narrow}
@@ -75,11 +75,14 @@ class HaConfigCustomize extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
-      a {
+      haStyle,
-        color: var(--primary-color);
+      css`
-      }
+        a {
-    `;
+          color: var(--primary-color);
+        }
+      `,
+    ];
   }
 }
 customElements.define("ha-config-customize", HaConfigCustomize);

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -50,11 +50,11 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
       <ha-dialog
         open
         @closed=${this._close}
-        .heading="${this.hass!.localize(
+        .heading=${this.hass!.localize(
           "ui.dialogs.mqtt_device_debug_info.title",
           "device",
           computeDeviceName(this._params.device, this.hass)
-        )}"
+        )}
       >
         <h4>
           ${this.hass!.localize(
@@ -138,7 +138,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
       ${this._debugInfo!.entities.map(
         (entity) => html`
           <li class="entitylistitem">
-            '${computeStateName(this.hass.states[entity.entity_id])}'
+            ${computeStateName(this.hass.states[entity.entity_id])}
             (<code>${entity.entity_id}</code>)
             <br />MQTT discovery data:
             <ul class="discoverydata">

src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts

@@ -16,7 +16,7 @@ export class HaDeviceActionsMqtt extends LitElement {
   protected render(): TemplateResult {
     return html`
       <mwc-button @click=${this._showDebugInfo}> MQTT Info </mwc-button>
-      <mwc-button class="warning" @click="${this._confirmDeleteEntry}">
+      <mwc-button class="warning" @click=${this._confirmDeleteEntry}>
         ${this.hass.localize("ui.panel.config.devices.delete")}
       </mwc-button>
     `;

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -107,7 +107,7 @@ class MQTTMessages extends LitElement {
     if (typeof payload === "string") {
       try {
         o = JSON.parse(payload);
-      } catch (e) {
+      } catch (err: any) {
         o = null;
       }
     }

src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts

@@ -14,7 +14,7 @@ export class HaDeviceActionsTasmota extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-button class="warning" @click="${this._confirmDeleteEntry}">
+      <mwc-button class="warning" @click=${this._confirmDeleteEntry}>
         ${this.hass.localize("ui.panel.config.devices.delete")}
       </mwc-button>
     `;

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -111,7 +111,7 @@ class DialogDeviceRegistryDetail extends LitElement {
         </mwc-button>
         <mwc-button
           slot="primaryAction"
-          @click="${this._updateEntry}"
+          @click=${this._updateEntry}
           .disabled=${this._submitting}
         >
           ${this.hass.localize("ui.panel.config.devices.update")}
@@ -142,7 +142,7 @@ class DialogDeviceRegistryDetail extends LitElement {
         disabled_by: this._disabledBy || null,
       });
       this.closeDialog();
-    } catch (err) {
+    } catch (err: any) {
       this._error =
         err.message ||
         this.hass.localize("ui.panel.config.devices.unknown_error");

src/panels/config/devices/ha-config-device-page.ts

@@ -687,7 +687,7 @@ export class HaConfigDevicePage extends LitElement {
                 try {
                   // eslint-disable-next-line no-await-in-loop
                   result = await disableConfigEntry(this.hass, cnfg_entry);
-                } catch (err) {
+                } catch (err: any) {
                   showAlertDialog(this, {
                     title: this.hass.localize(
                       "ui.panel.config.integrations.config_entry.disable_error"
@@ -710,7 +710,7 @@ export class HaConfigDevicePage extends LitElement {
         }
         try {
           await updateDeviceRegistryEntry(this.hass, this.deviceId, updates);
-        } catch (err) {
+        } catch (err: any) {
           showAlertDialog(this, {
             title: this.hass.localize(
               "ui.panel.config.devices.update_device_error"

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -419,7 +419,7 @@ export class HaConfigDeviceDashboard extends LitElement {
             <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item
-            @request-selected="${this._showDisabledChanged}"
+            @request-selected=${this._showDisabledChanged}
             graphic="control"
             .selected=${this._showDisabled}
           >

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -62,7 +62,7 @@ export class EnergyBatterySettings extends LitElement {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="${documentationUrl(this.hass, "/docs/energy/battery/")}"
+              href=${documentationUrl(this.hass, "/docs/energy/battery/")}
               >${this.hass.localize(
                 "ui.panel.config.energy.battery.learn_more"
               )}</a
@@ -167,7 +167,7 @@ export class EnergyBatterySettings extends LitElement {
           (source) => source !== sourceToDelete
         ),
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
     }
   }

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -51,10 +51,10 @@ export class EnergyDeviceSettings extends LitElement {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="${documentationUrl(
+              href=${documentationUrl(
                 this.hass,
                 "/docs/energy/individual-devices/"
-              )}"
+              )}
               >${this.hass.localize(
                 "ui.panel.config.energy.device_consumption.learn_more"
               )}</a
@@ -126,7 +126,7 @@ export class EnergyDeviceSettings extends LitElement {
           (device) => device !== deviceToDelete
         ),
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
     }
   }

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -62,7 +62,7 @@ export class EnergyGasSettings extends LitElement {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="${documentationUrl(this.hass, "/docs/energy/gas/")}"
+              href=${documentationUrl(this.hass, "/docs/energy/gas/")}
               >${this.hass.localize("ui.panel.config.energy.gas.learn_more")}</a
             >
           </p>
@@ -156,7 +156,7 @@ export class EnergyGasSettings extends LitElement {
           (source) => source !== sourceToDelete
         ),
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
     }
   }

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -91,10 +91,10 @@ export class EnergyGridSettings extends LitElement {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="${documentationUrl(
+              href=${documentationUrl(
                 this.hass,
                 "/docs/energy/electricity-grid/"
-              )}"
+              )}
               >${this.hass.localize(
                 "ui.panel.config.energy.grid.learn_more"
               )}</a
@@ -393,7 +393,7 @@ export class EnergyGridSettings extends LitElement {
 
     try {
       await this._savePreferences(preferences);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
     }
   }
@@ -423,7 +423,7 @@ export class EnergyGridSettings extends LitElement {
 
     try {
       await this._savePreferences(preferences);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
     }
   }

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -65,10 +65,7 @@ export class EnergySolarSettings extends LitElement {
             <a
               target="_blank"
               rel="noopener noreferrer"
-              href="${documentationUrl(
+              href=${documentationUrl(this.hass, "/docs/energy/solar-panels/")}
-                this.hass,
-                "/docs/energy/solar-panels/"
-              )}"
               >${this.hass.localize(
                 "ui.panel.config.energy.solar.learn_more"
               )}</a
@@ -175,7 +172,7 @@ export class EnergySolarSettings extends LitElement {
           (source) => source !== sourceToDelete
         ),
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
     }
   }

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -110,8 +110,8 @@ export class DialogEnergyBatterySettings
     try {
       await this._params!.saveCallback(this._source!);
       this.closeDialog();
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
   }
 

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -100,8 +100,8 @@ export class DialogEnergyDeviceSettings
     try {
       await this._params!.saveCallback(this._device!);
       this.closeDialog();
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
   }
 

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -255,8 +255,8 @@ export class DialogEnergyGasSettings
       }
       await this._params!.saveCallback(this._source!);
       this.closeDialog();
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
   }
 

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -288,8 +288,8 @@ export class DialogEnergyGridFlowSettings
       }
       await this._params!.saveCallback(this._source!);
       this.closeDialog();
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
   }
 

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -212,8 +212,8 @@ export class DialogEnergySolarSettings
       }
       await this._params!.saveCallback(this._source!);
       this.closeDialog();
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
   }
 

src/panels/config/energy/ha-config-energy.ts

@@ -126,17 +126,17 @@ class HaConfigEnergy extends LitElement {
     const energyInfoPromise = await getEnergyInfo(this.hass);
     try {
       this._preferences = await getEnergyPreferences(this.hass);
-    } catch (e) {
+    } catch (err: any) {
-      if (e.code === "not_found") {
+      if (err.code === "not_found") {
         this._preferences = INITIAL_CONFIG;
       } else {
-        this._error = e.message;
+        this._error = err.message;
       }
     }
     try {
       this._validationResult = await validationPromise;
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
     this._info = await energyInfoPromise;
   }
@@ -146,8 +146,8 @@ class HaConfigEnergy extends LitElement {
     this._validationResult = undefined;
     try {
       this._validationResult = await getEnergyPreferenceValidation(this.hass);
-    } catch (e) {
+    } catch (err: any) {
-      this._error = e.message;
+      this._error = err.message;
     }
     this._info = await getEnergyInfo(this.hass);
   }

src/panels/config/entities/dialog-entity-editor.ts

@@ -162,7 +162,7 @@ export class DialogEntityEditor extends LitElement {
               this._params!.entity_id,
               "faq_link",
               html`<a
-                href="${documentationUrl(this.hass, "/faq/unique_id")}"
+                href=${documentationUrl(this.hass, "/faq/unique_id")}
                 target="_blank"
                 rel="noreferrer"
                 >${this.hass.localize("ui.dialogs.entity_registry.faq")}</a
@@ -174,8 +174,8 @@ export class DialogEntityEditor extends LitElement {
                     "ui.dialogs.entity_registry.info_customize",
                     "customize_link",
                     html`<a
-                      href="${"/config/customize/edit/" +
+                      href=${"/config/customize/edit/" +
-                      this._params!.entity_id}"
+                      this._params!.entity_id}
                       rel="noreferrer"
                       >${this.hass.localize(
                         "ui.dialogs.entity_registry.customize_link"

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -203,7 +203,7 @@ export class EntityRegistrySettingsHelper extends LitElement {
       }
       await this._registryEditor?.updateEntry();
       fireEvent(this, "close-dialog");
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || "Unknown error";
     } finally {
       this._submitting = false;

src/panels/config/entities/entity-registry-settings.ts

@@ -237,14 +237,14 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       <div class="buttons">
         <mwc-button
           class="warning"
-          @click="${this._confirmDeleteEntry}"
+          @click=${this._confirmDeleteEntry}
           .disabled=${this._submitting ||
           !(stateObj && stateObj.attributes.restored)}
         >
           ${this.hass.localize("ui.dialogs.entity_registry.editor.delete")}
         </mwc-button>
         <mwc-button
-          @click="${this._updateEntry}"
+          @click=${this._updateEntry}
           .disabled=${invalidDomainUpdate || this._submitting}
         >
           ${this.hass.localize("ui.dialogs.entity_registry.editor.update")}
@@ -324,7 +324,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         });
       }
       fireEvent(this as HTMLElement, "close-dialog");
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || "Unknown error";
     } finally {
       this._submitting = false;

src/panels/config/entities/ha-config-entities.ts

@@ -587,7 +587,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
               </mwc-icon-button>
               <mwc-list-item
-                @request-selected="${this._showDisabledChanged}"
+                @request-selected=${this._showDisabledChanged}
                 graphic="control"
                 .selected=${this._showDisabled}
               >
@@ -600,7 +600,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 )}
               </mwc-list-item>
               <mwc-list-item
-                @request-selected="${this._showRestoredChanged}"
+                @request-selected=${this._showRestoredChanged}
                 graphic="control"
                 .selected=${this._showUnavailable}
               >
@@ -613,7 +613,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 )}
               </mwc-list-item>
               <mwc-list-item
-                @request-selected="${this._showReadOnlyChanged}"
+                @request-selected=${this._showReadOnlyChanged}
                 graphic="control"
                 .selected=${this._showReadOnly}
               >

src/panels/config/helpers/dialog-helper-detail.ts

@@ -96,14 +96,14 @@ export class DialogHelperDetail extends LitElement {
               </div>
               <mwc-button
                 slot="primaryAction"
-                @click="${this._createItem}"
+                @click=${this._createItem}
                 .disabled=${this._submitting}
               >
                 ${this.hass!.localize("ui.panel.config.helpers.dialog.create")}
               </mwc-button>
               <mwc-button
                 slot="secondaryAction"
-                @click="${this._goBack}"
+                @click=${this._goBack}
                 .disabled=${this._submitting}
               >
                 ${this.hass!.localize("ui.common.back")}
@@ -145,7 +145,7 @@ export class DialogHelperDetail extends LitElement {
                   </div>
                 `;
               })}
-              <mwc-button slot="primaryAction" @click="${this.closeDialog}">
+              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass!.localize("ui.common.cancel")}
               </mwc-button>
             `}
@@ -166,7 +166,7 @@ export class DialogHelperDetail extends LitElement {
     try {
       await HELPERS[this._platform](this.hass, this._item);
       this.closeDialog();
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message || "Unknown error";
     } finally {
       this._submitting = false;

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -75,9 +75,9 @@ class HaCounterForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -53,9 +53,9 @@ class HaInputBooleanForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -64,9 +64,9 @@ class HaInputDateTimeForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -79,9 +79,9 @@ class HaInputNumberForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -65,9 +65,9 @@ class HaInputSelectForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -70,9 +70,9 @@ class HaInputTextForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -56,9 +56,9 @@ class HaTimerForm extends LitElement {
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
-          .errorMessage="${this.hass!.localize(
+          .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
-          )}"
+          )}
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>

src/panels/config/info/ha-config-info.ts

@@ -37,15 +37,15 @@ class HaConfigInfo extends LitElement {
       >
         <div class="about">
           <a
-            href="${documentationUrl(this.hass, "")}"
+            href=${documentationUrl(this.hass, "")}
             target="_blank"
             rel="noreferrer"
             ><img
               src="/static/icons/favicon-192x192.png"
               height="192"
-              alt="${this.hass.localize(
+              alt=${this.hass.localize(
                 "ui.panel.config.info.home_assistant_logo"
-              )}"
+              )}
           /></a>
           <br />
           <h2>Home Assistant ${hass.connection.haVersion}</h2>
@@ -58,7 +58,7 @@ class HaConfigInfo extends LitElement {
           </p>
           <p class="develop">
             <a
-              href="${documentationUrl(this.hass, "/developers/credits/")}"
+              href=${documentationUrl(this.hass, "/developers/credits/")}
               target="_blank"
               rel="noreferrer"
             >
@@ -122,8 +122,8 @@ class HaConfigInfo extends LitElement {
                     ${customUiList.map(
                       (item) => html`
                         <div>
-                          <a href="${item.url}" target="_blank"> ${item.name}</a
+                          <a href=${item.url} target="_blank"> ${item.name}</a>:
-                          >: ${item.version}
+                          ${item.version}
                         </div>
                       `
                     )}

src/panels/config/integrations/ha-integration-card.ts

@@ -82,7 +82,7 @@ export class HaIntegrationCard extends LitElement {
     return html`
       <ha-card
         outlined
-        class="${classMap({
+        class=${classMap({
           single: hasItem,
           group: !hasItem,
           hasMultiple: this.items.length > 1,
@@ -90,7 +90,7 @@ export class HaIntegrationCard extends LitElement {
           "state-not-loaded": hasItem && item!.state === "not_loaded",
           "state-failed-unload": hasItem && item!.state === "failed_unload",
           "state-error": hasItem && ERROR_STATES.includes(item!.state),
-        })}"
+        })}
         .configEntry=${item}
       >
         <ha-integration-header
@@ -298,12 +298,12 @@ export class HaIntegrationCard extends LitElement {
           >
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
-          <mwc-list-item @request-selected="${this._handleRename}">
+          <mwc-list-item @request-selected=${this._handleRename}>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"
             )}
           </mwc-list-item>
-          <mwc-list-item @request-selected="${this._handleSystemOptions}">
+          <mwc-list-item @request-selected=${this._handleSystemOptions}>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.system_options"
             )}
@@ -328,20 +328,20 @@ export class HaIntegrationCard extends LitElement {
           item.state === "loaded" &&
           item.supports_unload &&
           item.source !== "system"
-            ? html`<mwc-list-item @request-selected="${this._handleReload}">
+            ? html`<mwc-list-item @request-selected=${this._handleReload}>
                 ${this.hass.localize(
                   "ui.panel.config.integrations.config_entry.reload"
                 )}
               </mwc-list-item>`
             : ""}
           ${item.disabled_by === "user"
-            ? html`<mwc-list-item @request-selected="${this._handleEnable}">
+            ? html`<mwc-list-item @request-selected=${this._handleEnable}>
                 ${this.hass.localize("ui.common.enable")}
               </mwc-list-item>`
             : item.source !== "system"
             ? html`<mwc-list-item
                 class="warning"
-                @request-selected="${this._handleDisable}"
+                @request-selected=${this._handleDisable}
               >
                 ${this.hass.localize("ui.common.disable")}
               </mwc-list-item>`
@@ -349,7 +349,7 @@ export class HaIntegrationCard extends LitElement {
           ${item.source !== "system"
             ? html`<mwc-list-item
                 class="warning"
-                @request-selected="${this._handleDelete}"
+                @request-selected=${this._handleDelete}
               >
                 ${this.hass.localize(
                   "ui.panel.config.integrations.config_entry.delete"
@@ -495,7 +495,7 @@ export class HaIntegrationCard extends LitElement {
     let result: DisableConfigEntryResult;
     try {
       result = await disableConfigEntry(this.hass, entryId);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize(
           "ui.panel.config.integrations.config_entry.disable_error"
@@ -522,7 +522,7 @@ export class HaIntegrationCard extends LitElement {
     let result: DisableConfigEntryResult;
     try {
       result = await enableConfigEntry(this.hass, entryId);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.hass.localize(
           "ui.panel.config.integrations.config_entry.disable_error"

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -45,13 +45,13 @@ class HaPanelDevMqtt extends LitElement {
             </div>
           </ha-card>
           <ha-card
-            header="${this.hass.localize(
+            header=${this.hass.localize(
               "ui.panel.config.mqtt.description_publish"
-            )}"
+            )}
           >
             <div class="card-content">
               <paper-input
-                label="${this.hass.localize("ui.panel.config.mqtt.topic")}"
+                label=${this.hass.localize("ui.panel.config.mqtt.topic")}
                 .value=${this.topic}
                 @value-changed=${this._handleTopic}
               ></paper-input>
@@ -59,7 +59,7 @@ class HaPanelDevMqtt extends LitElement {
               <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
               <ha-code-editor
                 mode="jinja2"
-                .value="${this.payload}"
+                .value=${this.payload}
                 @value-changed=${this._handlePayload}
               ></ha-code-editor>
             </div>

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -35,9 +35,7 @@ class MqttSubscribeCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        header="${this.hass.localize(
+        header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
-          "ui.panel.config.mqtt.description_listen"
-        )}"
       >
         <form>
           <paper-input
@@ -107,7 +105,7 @@ class MqttSubscribeCard extends LitElement {
     let payload: string;
     try {
       payload = JSON.stringify(JSON.parse(message.payload), null, 4);
-    } catch (e) {
+    } catch (err: any) {
       payload = message.payload;
     }
     this._messages = [

src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts

@@ -79,7 +79,7 @@ class DialogOZWRefreshNode extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed="${this._close}"
+        @closed=${this._close}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.ozw.refresh_node.title")

src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts

@@ -113,7 +113,7 @@ class OZWNodeConfig extends LitElement {
                     ${this._node.node_query_stage}
                     ${this._metadata?.metadata.ProductManualURL
                       ? html` <a
-                          href="${this._metadata.metadata.ProductManualURL}"
+                          href=${this._metadata.metadata.ProductManualURL}
                         >
                           <p>
                             ${this.hass.localize(
@@ -136,9 +136,9 @@ class OZWNodeConfig extends LitElement {
                   ? html`
                       <ha-card
                         class="content"
-                        header="${this.hass.localize(
+                        header=${this.hass.localize(
                           "ui.panel.config.ozw.common.wakeup_instructions"
-                        )}"
+                        )}
                       >
                         <div class="card-content">
                           <span class="secondary">
@@ -199,7 +199,7 @@ class OZWNodeConfig extends LitElement {
         metadataProm,
         configProm,
       ]);
-    } catch (err) {
+    } catch (err: any) {
       if (err.code === ERR_NOT_FOUND) {
         this._error = ERR_NOT_FOUND;
         return;

src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts

@@ -90,7 +90,7 @@ class OZWNodeDashboard extends LitElement {
                       Query Stage: ${this._node.node_query_stage}
                       ${this._metadata?.metadata.ProductManualURL
                         ? html` <a
-                            href="${this._metadata.metadata.ProductManualURL}"
+                            href=${this._metadata.metadata.ProductManualURL}
                           >
                             <p>Product Manual</p>
                           </a>`
@@ -167,7 +167,7 @@ class OZWNodeDashboard extends LitElement {
         this.ozwInstance,
         this.nodeId
       );
-    } catch (err) {
+    } catch (err: any) {
       if (err.code === ERR_NOT_FOUND) {
         this._not_found = true;
         return;

src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts

@@ -61,7 +61,7 @@ class DialogZHACluster extends LitElement {
       <ha-dialog
         open
         hideActions
-        @closed="${this._close}"
+        @closed=${this._close}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.zha.clusters.header")
@@ -69,20 +69,20 @@ class DialogZHACluster extends LitElement {
       >
         <zha-clusters
           .hass=${this.hass}
-          .selectedDevice="${this._device}"
+          .selectedDevice=${this._device}
-          @zha-cluster-selected="${this._onClusterSelected}"
+          @zha-cluster-selected=${this._onClusterSelected}
         ></zha-clusters>
         ${this._selectedCluster
           ? html`
               <zha-cluster-attributes
                 .hass=${this.hass}
-                .selectedNode="${this._device}"
+                .selectedNode=${this._device}
-                .selectedCluster="${this._selectedCluster}"
+                .selectedCluster=${this._selectedCluster}
               ></zha-cluster-attributes>
               <zha-cluster-commands
                 .hass=${this.hass}
-                .selectedNode="${this._device}"
+                .selectedNode=${this._device}
-                .selectedCluster="${this._selectedCluster}"
+                .selectedCluster=${this._selectedCluster}
               ></zha-cluster-commands>
             `
           : ""}
@@ -90,8 +90,8 @@ class DialogZHACluster extends LitElement {
           ? html`
               <zha-device-binding-control
                 .hass=${this.hass}
-                .selectedDevice="${this._device}"
+                .selectedDevice=${this._device}
-                .bindableDevices="${this._bindableDevices}"
+                .bindableDevices=${this._bindableDevices}
               ></zha-device-binding-control>
             `
           : ""}
@@ -99,8 +99,8 @@ class DialogZHACluster extends LitElement {
           ? html`
               <zha-group-binding-control
                 .hass=${this.hass}
-                .selectedDevice="${this._device}"
+                .selectedDevice=${this._device}
-                .groups="${this._groups}"
+                .groups=${this._groups}
               ></zha-group-binding-control>
             `
           : ""}

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts

@@ -36,7 +36,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
       <ha-dialog
         open
         hideActions
-        @closed="${this._close}"
+        @closed=${this._close}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -66,7 +66,7 @@ class DialogZHAReconfigureDevice extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed="${this.closeDialog}"
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize(`ui.dialogs.zha_reconfigure_device.heading`) +

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -152,7 +152,7 @@ class ZHAAddDevicesPage extends LitElement {
               readonly
               max-rows="10"
               class="log"
-              value="${this._formattedEvents}"
+              value=${this._formattedEvents}
             >
             </paper-textarea>`
           : ""}

src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts

@@ -70,11 +70,11 @@ export class ZHAAddGroupPage extends LitElement {
           </p>
           <paper-input
             type="string"
-            .value="${this._groupName}"
+            .value=${this._groupName}
             @value-changed=${this._handleNameChange}
-            placeholder="${this.hass!.localize(
+            placeholder=${this.hass!.localize(
               "ui.panel.config.zha.groups.group_name_placeholder"
-            )}"
+            )}
           ></paper-input>
 
           <div class="header">
@@ -92,10 +92,10 @@ export class ZHAAddGroupPage extends LitElement {
 
           <div class="paper-dialog-buttons">
             <mwc-button
-              .disabled="${!this._groupName ||
+              .disabled=${!this._groupName ||
               this._groupName === "" ||
-              this._processingAdd}"
+              this._processingAdd}
-              @click="${this._createGroup}"
+              @click=${this._createGroup}
               class="button"
             >
               ${this._processingAdd

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -68,7 +68,7 @@ export class ZHAClusterAttributes extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-config-section .isWide="${this.isWide}">
+      <ha-config-section .isWide=${this.isWide}>
         <div class="header" slot="header">
           <span>
             ${this.hass!.localize(
@@ -77,7 +77,7 @@ export class ZHAClusterAttributes extends LitElement {
           </span>
           <ha-icon-button
             class="toggle-help-icon"
-            @click="${this._onHelpTap}"
+            @click=${this._onHelpTap}
             icon="hass:help-circle"
           >
           </ha-icon-button>
@@ -91,15 +91,15 @@ export class ZHAClusterAttributes extends LitElement {
         <ha-card class="content">
           <div class="attribute-picker">
             <paper-dropdown-menu
-              label="${this.hass!.localize(
+              label=${this.hass!.localize(
                 "ui.panel.config.zha.cluster_attributes.attributes_of_cluster"
-              )}"
+              )}
               class="menu"
             >
               <paper-listbox
                 slot="dropdown-content"
-                .selected="${this._selectedAttributeIndex}"
+                .selected=${this._selectedAttributeIndex}
-                @iron-select="${this._selectedAttributeChanged}"
+                @iron-select=${this._selectedAttributeChanged}
               >
                 ${this._attributes.map(
                   (entry) => html`
@@ -135,30 +135,26 @@ export class ZHAClusterAttributes extends LitElement {
     return html`
       <div class="input-text">
         <paper-input
-          label="${this.hass!.localize("ui.panel.config.zha.common.value")}"
+          label=${this.hass!.localize("ui.panel.config.zha.common.value")}
           type="string"
-          .value="${this._attributeValue}"
+          .value=${this._attributeValue}
-          @value-changed="${this._onAttributeValueChanged}"
+          @value-changed=${this._onAttributeValueChanged}
-          placeholder="${this.hass!.localize(
+          placeholder=${this.hass!.localize("ui.panel.config.zha.common.value")}
-            "ui.panel.config.zha.common.value"
-          )}"
         ></paper-input>
       </div>
       <div class="input-text">
         <paper-input
-          label="${this.hass!.localize(
+          label=${this.hass!.localize(
             "ui.panel.config.zha.common.manufacturer_code_override"
-          )}"
+          )}
           type="number"
-          .value="${this._manufacturerCodeOverride}"
+          .value=${this._manufacturerCodeOverride}
-          @value-changed="${this._onManufacturerCodeOverrideChanged}"
+          @value-changed=${this._onManufacturerCodeOverrideChanged}
-          placeholder="${this.hass!.localize(
+          placeholder=${this.hass!.localize("ui.panel.config.zha.common.value")}
-            "ui.panel.config.zha.common.value"
-          )}"
         ></paper-input>
       </div>
       <div class="card-actions">
-        <mwc-button @click="${this._onGetZigbeeAttributeClick}">
+        <mwc-button @click=${this._onGetZigbeeAttributeClick}>
           ${this.hass!.localize(
             "ui.panel.config.zha.cluster_attributes.get_zigbee_attribute"
           )}
@@ -176,7 +172,7 @@ export class ZHAClusterAttributes extends LitElement {
           .hass=${this.hass}
           domain="zha"
           service="set_zigbee_cluster_attribute"
-          .serviceData="${this._setAttributeServiceData}"
+          .serviceData=${this._setAttributeServiceData}
         >
           ${this.hass!.localize(
             "ui.panel.config.zha.cluster_attributes.set_zigbee_attribute"

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -62,7 +62,7 @@ export class ZHAClusterCommands extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-config-section .isWide="${this.isWide}">
+      <ha-config-section .isWide=${this.isWide}>
         <div class="header" slot="header">
           <span>
             ${this.hass!.localize(
@@ -71,7 +71,7 @@ export class ZHAClusterCommands extends LitElement {
           </span>
           <ha-icon-button
             class="toggle-help-icon"
-            @click="${this._onHelpTap}"
+            @click=${this._onHelpTap}
             icon="hass:help-circle"
           >
           </ha-icon-button>
@@ -85,15 +85,15 @@ export class ZHAClusterCommands extends LitElement {
         <ha-card class="content">
           <div class="command-picker">
             <paper-dropdown-menu
-              label="${this.hass!.localize(
+              label=${this.hass!.localize(
                 "ui.panel.config.zha.cluster_commands.commands_of_cluster"
-              )}"
+              )}
               class="menu"
             >
               <paper-listbox
                 slot="dropdown-content"
-                .selected="${this._selectedCommandIndex}"
+                .selected=${this._selectedCommandIndex}
-                @iron-select="${this._selectedCommandChanged}"
+                @iron-select=${this._selectedCommandChanged}
               >
                 ${this._commands.map(
                   (entry) => html`
@@ -121,15 +121,15 @@ export class ZHAClusterCommands extends LitElement {
             ? html`
                 <div class="input-text">
                   <paper-input
-                    label="${this.hass!.localize(
+                    label=${this.hass!.localize(
                       "ui.panel.config.zha.common.manufacturer_code_override"
-                    )}"
+                    )}
                     type="number"
-                    .value="${this._manufacturerCodeOverride}"
+                    .value=${this._manufacturerCodeOverride}
-                    @value-changed="${this._onManufacturerCodeOverrideChanged}"
+                    @value-changed=${this._onManufacturerCodeOverrideChanged}
-                    placeholder="${this.hass!.localize(
+                    placeholder=${this.hass!.localize(
                       "ui.panel.config.zha.common.value"
-                    )}"
+                    )}
                   ></paper-input>
                 </div>
                 <div class="card-actions">
@@ -137,7 +137,7 @@ export class ZHAClusterCommands extends LitElement {
                     .hass=${this.hass}
                     domain="zha"
                     service="issue_zigbee_cluster_command"
-                    .serviceData="${this._issueClusterCommandServiceData}"
+                    .serviceData=${this._issueClusterCommandServiceData}
                   >
                     ${this.hass!.localize(
                       "ui.panel.config.zha.cluster_commands.issue_zigbee_command"

src/panels/config/integrations/integration-panels/zha/zha-clusters.ts

@@ -62,11 +62,11 @@ export class ZHAClusters extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-config-section .isWide="${this.isWide}">
+      <ha-config-section .isWide=${this.isWide}>
         <div class="header" slot="header">
           <ha-icon-button
             class="toggle-help-icon"
-            @click="${this._onHelpTap}"
+            @click=${this._onHelpTap}
             icon="hass:help-circle"
           >
           </ha-icon-button>
@@ -85,8 +85,8 @@ export class ZHAClusters extends LitElement {
             >
               <paper-listbox
                 slot="dropdown-content"
-                .selected="${this._selectedClusterIndex}"
+                .selected=${this._selectedClusterIndex}
-                @iron-select="${this._selectedClusterChanged}"
+                @iron-select=${this._selectedClusterChanged}
               >
                 ${this._clusters.map(
                   (entry) => html`

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -84,7 +84,7 @@ class ZHAConfigDashboard extends LitElement {
           ${this.configEntryId
             ? html`<div class="card-actions">
                 <a
-                  href="${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}"
+                  href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
                 >
                   <mwc-button
                     >${this.hass.localize(
@@ -93,7 +93,7 @@ class ZHAConfigDashboard extends LitElement {
                   >
                 </a>
                 <a
-                  href="${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}"
+                  href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
                 >
                   <mwc-button
                     >${this.hass.localize(

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -46,12 +46,12 @@ export class ZHADeviceBindingControl extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-config-section .isWide="${this.isWide}">
+      <ha-config-section .isWide=${this.isWide}>
         <div class="header" slot="header">
           <span>Device Binding</span>
           <ha-icon-button
             class="toggle-help-icon"
-            @click="${this._onHelpTap}"
+            @click=${this._onHelpTap}
             icon="hass:help-circle"
           >
           </ha-icon-button>
@@ -63,8 +63,8 @@ export class ZHADeviceBindingControl extends LitElement {
             <paper-dropdown-menu label="Bindable Devices" class="menu">
               <paper-listbox
                 slot="dropdown-content"
-                .selected="${this._bindTargetIndex}"
+                .selected=${this._bindTargetIndex}
-                @iron-select="${this._bindTargetIndexChanged}"
+                @iron-select=${this._bindTargetIndexChanged}
               >
                 ${this.bindableDevices.map(
                   (device) => html`
@@ -87,16 +87,16 @@ export class ZHADeviceBindingControl extends LitElement {
             : ""}
           <div class="card-actions">
             <mwc-button
-              @click="${this._onBindDevicesClick}"
+              @click=${this._onBindDevicesClick}
-              .disabled="${!(this._deviceToBind && this.selectedDevice)}"
+              .disabled=${!(this._deviceToBind && this.selectedDevice)}
               >Bind</mwc-button
             >
             ${this._showHelp
               ? html` <div class="helpText">Bind devices.</div> `
               : ""}
             <mwc-button
-              @click="${this._onUnbindDevicesClick}"
+              @click=${this._onUnbindDevicesClick}
-              .disabled="${!(this._deviceToBind && this.selectedDevice)}"
+              .disabled=${!(this._deviceToBind && this.selectedDevice)}
               >Unbind</mwc-button
             >
             ${this._showHelp

src/panels/config/integrations/integration-panels/zha/zha-device-card.ts

@@ -91,9 +91,9 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
             ${entities.map(
               (entity) => html`
                 <state-badge
-                  @click="${this._openMoreInfo}"
+                  @click=${this._openMoreInfo}
                   .title=${entity.stateName!}
-                  .stateObj="${this.hass!.states[entity.entity_id]}"
+                  .stateObj=${this.hass!.states[entity.entity_id]}
                   slot="item-icon"
                 ></state-badge>
               `
@@ -186,7 +186,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
         area_id: area,
       });
       this.device!.area_id = area;
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         text: this.hass.localize(
           "ui.panel.config.integrations.config_flow.error_saving_area",

src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts

@@ -68,7 +68,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
               direction: "asc",
               grows: true,
               template: (name, device: any) => html`
-                <a href="${`/config/devices/device/${device.dev_id}`}">
+                <a href=${`/config/devices/device/${device.dev_id}`}>
                   ${name}
                 </a>
               `,
@@ -87,7 +87,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
               direction: "asc",
               grows: true,
               template: (name, device: any) => html`
-                <a href="${`/config/devices/device/${device.dev_id}`}">
+                <a href=${`/config/devices/device/${device.dev_id}`}>
                   ${name}
                 </a>
               `,

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -71,7 +71,7 @@ export class ZHAGroupBindingControl extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-config-section .isWide="${this.isWide}">
+      <ha-config-section .isWide=${this.isWide}>
         <div class="sectionHeader" slot="header">
           <span
             >${this.hass!.localize(
@@ -80,7 +80,7 @@ export class ZHAGroupBindingControl extends LitElement {
           >
           <ha-icon-button
             class="toggle-help-icon"
-            @click="${this._onHelpTap}"
+            @click=${this._onHelpTap}
             icon="hass:help-circle"
           >
           </ha-icon-button>
@@ -101,8 +101,8 @@ export class ZHAGroupBindingControl extends LitElement {
             >
               <paper-listbox
                 slot="dropdown-content"
-                .selected="${this._bindTargetIndex}"
+                .selected=${this._bindTargetIndex}
-                @iron-select="${this._bindTargetIndexChanged}"
+                @iron-select=${this._bindTargetIndexChanged}
               >
                 ${this.groups.map(
                   (group) => html` <paper-item>${group.name}</paper-item> `
@@ -139,8 +139,8 @@ export class ZHAGroupBindingControl extends LitElement {
             : ""}
           <div class="card-actions">
             <mwc-button
-              @click="${this._onBindGroupClick}"
+              @click=${this._onBindGroupClick}
-              .disabled="${!this._canBind}"
+              .disabled=${!this._canBind}
               >${this.hass!.localize(
                 "ui.panel.config.zha.group_binding.bind_button_label"
               )}</mwc-button
@@ -155,8 +155,8 @@ export class ZHAGroupBindingControl extends LitElement {
                 `
               : ""}
             <mwc-button
-              @click="${this._onUnbindGroupClick}"
+              @click=${this._onUnbindGroupClick}
-              .disabled="${!this._canBind}"
+              .disabled=${!this._canBind}
               >${this.hass!.localize(
                 "ui.panel.config.zha.group_binding.unbind_button_label"
               )}</mwc-button

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -155,13 +155,13 @@ export class ZHAGroupPage extends LitElement {
 
                 <div class="paper-dialog-buttons">
                   <mwc-button
-                    .disabled="${!this._selectedDevicesToRemove.length ||
+                    .disabled=${!this._selectedDevicesToRemove.length ||
-                    this._processingRemove}"
+                    this._processingRemove}
-                    @click="${this._removeMembersFromGroup}"
+                    @click=${this._removeMembersFromGroup}
                     class="button"
                   >
                     <ha-circular-progress
-                      ?active="${this._processingRemove}"
+                      ?active=${this._processingRemove}
                       alt=${this.hass.localize(
                         "ui.panel.config.zha.groups.removing_members"
                       )}
@@ -190,9 +190,9 @@ export class ZHAGroupPage extends LitElement {
 
           <div class="paper-dialog-buttons">
             <mwc-button
-              .disabled="${!this._selectedDevicesToAdd.length ||
+              .disabled=${!this._selectedDevicesToAdd.length ||
-              this._processingAdd}"
+              this._processingAdd}
-              @click="${this._addMembersToGroup}"
+              @click=${this._addMembersToGroup}
               class="button"
             >
               ${this._processingAdd

src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts

@@ -453,7 +453,7 @@ export class ZwaveMigration extends LitElement {
         this._zwaveJsEntryId!,
         true
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Failed to get migration data!",
         text:

src/panels/config/integrations/integration-panels/zwave/zwave-network.ts

@@ -45,7 +45,7 @@ export class ZwaveNetwork extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-config-section .isWide="${this.isWide}">
+      <ha-config-section .isWide=${this.isWide}>
         <div class="sectionHeader" slot="header">
           <span>
             ${this.hass!.localize(
@@ -54,7 +54,7 @@ export class ZwaveNetwork extends LitElement {
           </span>
           <ha-icon-button
             class="toggle-help-icon"
-            @click="${this._onHelpTap}"
+            @click=${this._onHelpTap}
             icon="hass:help-circle"
           ></ha-icon-button>
         </div>
@@ -64,10 +64,7 @@ export class ZwaveNetwork extends LitElement {
           )}
           <p>
             <a
-              href="${documentationUrl(
+              href=${documentationUrl(this.hass, "/docs/z-wave/control-panel/")}
-                this.hass,
-                "/docs/z-wave/control-panel/"
-              )}"
               target="_blank"
               rel="noreferrer"
             >
@@ -217,14 +214,14 @@ export class ZwaveNetwork extends LitElement {
       <ha-call-service-button
         .hass=${this.hass}
         domain="zwave"
-        service="${service}"
+        service=${service}
       >
         ${this.hass!.localize("ui.panel.config.zwave.services." + service)}
       </ha-call-service-button>
       <ha-service-description
         .hass=${this.hass}
         domain="zwave"
-        service="${service}"
+        service=${service}
         ?hidden=${!this._showHelp}
       >
       </ha-service-description>

src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts

@@ -52,9 +52,9 @@ export class ZwaveNodeConfig extends LitElement {
             ? html`
                 <div class="card-actions">
                   <paper-input
-                    .floatLabel="${this.hass!.localize(
+                    .floatLabel=${this.hass!.localize(
                       "ui.panel.config.zwave.common.wakeup_interval"
-                    )}"
+                    )}
                     type="number"
                     .value=${this._wakeupInput !== -1
                       ? this._wakeupInput

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -89,7 +89,7 @@ class DialogZWaveJSAddNode extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed="${this.closeDialog}"
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.zwave_js.add_node.title")
@@ -363,7 +363,7 @@ class DialogZWaveJSAddNode extends LitElement {
                         again by excluding the device and adding it again.
                       </ha-alert>`
                     : ""}
-                  <a href="${`/config/devices/device/${this._device!.id}`}">
+                  <a href=${`/config/devices/device/${this._device!.id}`}>
                     <mwc-button>
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.add_node.view_device"
@@ -432,7 +432,7 @@ class DialogZWaveJSAddNode extends LitElement {
         this._entryId!,
         this._pinInput!.value as string
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message;
       this._status = "validate_dsk_enter_pin";
     }
@@ -447,7 +447,7 @@ class DialogZWaveJSAddNode extends LitElement {
         this._entryId!,
         this._securityClasses
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = err.message;
       this._status = "grant_security_classes";
     }

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts

@@ -225,8 +225,8 @@ class DialogZWaveJSHealNode extends LitElement {
       this._status = (await healNode(this.hass, this.entry_id!, this.node_id!))
         ? "finished"
         : "failed";
-    } catch (error) {
+    } catch (err: any) {
-      this._error = error.message;
+      this._error = err.message;
       this._status = "failed";
     }
   }

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts

@@ -63,7 +63,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed="${this.closeDialog}"
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize(

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts

@@ -48,7 +48,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed="${this.closeDialog}"
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.zwave_js.remove_node.title")

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -154,14 +154,14 @@ class ZWaveJSConfigDashboard extends LitElement {
                   </div>
                   <div class="card-actions">
                     <a
-                      href="${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}"
+                      href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
                     >
                       <mwc-button>
                         ${this.hass.localize("ui.panel.config.devices.caption")}
                       </mwc-button>
                     </a>
                     <a
-                      href="${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}"
+                      href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
                     >
                       <mwc-button>
                         ${this.hass.localize(
@@ -422,7 +422,7 @@ class ZWaveJSConfigDashboard extends LitElement {
         this.hass,
         `/api/zwave_js/dump/${this.configEntryId}`
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Error",
         text: err.error || err.body || err,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -168,8 +168,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
                   "device_database",
                   html`<a
                     rel="noreferrer noopener"
-                    href="${this._nodeMetadata?.device_database_url ||
+                    href=${this._nodeMetadata?.device_database_url ||
-                    "https://devices.zwave-js.io"}"
+                    "https://devices.zwave-js.io"}
                     target="_blank"
                     >${this.hass.localize(
                       "ui.panel.config.zwave_js.node_config.zwave_js_device_database"
@@ -389,8 +389,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
       this._config![target.key].value = value;
 
       this.setResult(target.key, result.status);
-    } catch (error) {
+    } catch (err: any) {
-      this.setError(target.key, error.message);
+      this.setError(target.key, err.message);
     }
   }
 

src/panels/config/logs/dialog-system-log-detail.ts

@@ -68,7 +68,7 @@ class DialogSystemLogDetail extends LitElement {
         !this._manifest.documentation.includes("www.home-assistant.io"));
 
     return html`
-      <ha-dialog open @closed=${this.closeDialog} hideActions heading=${true}>
+      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${true}>
         <ha-header-bar slot="heading">
           <mwc-icon-button slot="navigationIcon" dialogAction="cancel">
             <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
@@ -77,7 +77,7 @@ class DialogSystemLogDetail extends LitElement {
             ${this.hass.localize(
               "ui.panel.config.logs.details",
               "level",
-              html`<span class="${item.level.toLowerCase()}"
+              html`<span class=${item.level.toLowerCase()}
                 >${this.hass.localize(
                   "ui.panel.config.logs.level." + item.level.toLowerCase()
                 )}</span
@@ -163,7 +163,7 @@ class DialogSystemLogDetail extends LitElement {
   private async _fetchManifest(integration: string) {
     try {
       this._manifest = await fetchIntegrationManifest(this.hass, integration);
-    } catch (err) {
+    } catch (err: any) {
       // Ignore if loading manifest fails. Probably bad JSON in manifest
     }
   }

src/panels/config/logs/system-log-card.ts

@@ -62,7 +62,7 @@ export class SystemLogCard extends LitElement {
                                 this.hass!.locale
                               )}
                               –
-                              ${html`(<span class="${item.level.toLowerCase()}"
+                              ${html`(<span class=${item.level.toLowerCase()}
                                   >${this.hass.localize(
                                     "ui.panel.config.logs.level." +
                                       item.level.toLowerCase()

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -74,7 +74,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed="${this._close}"
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -205,7 +205,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
           : ""}
         <mwc-button
           slot="primaryAction"
-          @click="${this._updateDashboard}"
+          @click=${this._updateDashboard}
           .disabled=${urlInvalid || titleInvalid || this._submitting}
         >
           ${this._params.urlPath
@@ -293,7 +293,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
         );
       }
       this._close();
-    } catch (err) {
+    } catch (err: any) {
       this._error = err?.message || "Unknown error";
     } finally {
       this._submitting = false;

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -298,7 +298,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
             (res) => res !== dashboard
           );
           return true;
-        } catch (err) {
+        } catch (err: any) {
           return false;
         }
       },

src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts

@@ -151,7 +151,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
               <mwc-button
                 slot="secondaryAction"
                 class="warning"
-                @click="${this._deleteResource}"
+                @click=${this._deleteResource}
                 .disabled=${this._submitting}
               >
                 ${this.hass!.localize(
@@ -162,7 +162,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
           : html``}
         <mwc-button
           slot="primaryAction"
-          @click="${this._updateResource}"
+          @click=${this._updateResource}
           .disabled=${urlInvalid || !this._type || this._submitting}
         >
           ${this._params.resource
@@ -206,7 +206,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
         await this._params!.createResource(values);
       }
       this._params = undefined;
-    } catch (err) {
+    } catch (err: any) {
       this._error = err?.message || "Unknown error";
     } finally {
       this._submitting = false;

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -185,7 +185,7 @@ export class HaConfigLovelaceRescources extends LitElement {
             confirm: () => location.reload(),
           });
           return true;
-        } catch (err) {
+        } catch (err: any) {
           return false;
         }
       },

src/panels/config/person/dialog-person-detail.ts

@@ -120,12 +120,10 @@ class DialogPersonDetail extends LitElement {
               dialogInitialFocus
               .value=${this._name}
               @value-changed=${this._nameChanged}
-              label="${this.hass!.localize(
+              label=${this.hass!.localize("ui.panel.config.person.detail.name")}
-                "ui.panel.config.person.detail.name"
+              error-message=${this.hass!.localize(
-              )}"
-              error-message="${this.hass!.localize(
                 "ui.panel.config.person.detail.name_error_msg"
-              )}"
+              )}
               required
               auto-validate
             ></paper-input>
@@ -198,10 +196,10 @@ class DialogPersonDetail extends LitElement {
                   <ul>
                     <li>
                       <a
-                        href="${documentationUrl(
+                        href=${documentationUrl(
                           this.hass,
                           "/integrations/#presence-detection"
-                        )}"
+                        )}
                         target="_blank"
                         rel="noreferrer"
                         >${this.hass!.localize(
@@ -211,7 +209,7 @@ class DialogPersonDetail extends LitElement {
                     </li>
                     <li>
                       <a
-                        @click="${this._closeDialog}"
+                        @click=${this._closeDialog}
                         href="/config/integrations"
                       >
                         ${this.hass!.localize(
@@ -228,7 +226,7 @@ class DialogPersonDetail extends LitElement {
               <mwc-button
                 slot="secondaryAction"
                 class="warning"
-                @click="${this._deleteEntry}"
+                @click=${this._deleteEntry}
                 .disabled=${(this._user && this._user.is_owner) ||
                 this._submitting}
               >
@@ -248,7 +246,7 @@ class DialogPersonDetail extends LitElement {
           : html``}
         <mwc-button
           slot="primaryAction"
-          @click="${this._updateEntry}"
+          @click=${this._updateEntry}
           .disabled=${nameInvalid || this._submitting}
         >
           ${this._params.entry
@@ -398,7 +396,7 @@ class DialogPersonDetail extends LitElement {
         this._personExists = true;
       }
       this._params = undefined;
-    } catch (err) {
+    } catch (err: any) {
       this._error = err ? err.message : "Unknown error";
     } finally {
       this._submitting = false;

src/panels/config/person/ha-config-person.ts

@@ -248,7 +248,7 @@ class HaConfigPerson extends LitElement {
             (ent) => ent !== entry
           );
           return true;
-        } catch (err) {
+        } catch (err: any) {
           return false;
         }
       },

src/panels/config/scene/ha-scene-dashboard.ts

@@ -74,9 +74,9 @@ class HaSceneDashboard extends LitElement {
           html`
             <mwc-icon-button
               .scene=${scene}
-              title="${this.hass.localize(
+              title=${this.hass.localize(
                 "ui.panel.config.scene.picker.activate_scene"
-              )}"
+              )}
               @click=${(ev: Event) => this._activateScene(ev)}
             >
               <ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
@@ -102,9 +102,9 @@ class HaSceneDashboard extends LitElement {
           <mwc-icon-button
             .scene=${scene}
             @click=${this._showInfo}
-            title="${this.hass.localize(
+            title=${this.hass.localize(
               "ui.panel.config.scene.picker.show_info_scene"
-            )}"
+            )}
           >
             <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
           </mwc-icon-button>
@@ -123,9 +123,9 @@ class HaSceneDashboard extends LitElement {
           >
             <mwc-icon-button
               .disabled=${!scene.attributes.id}
-              title="${this.hass.localize(
+              title=${this.hass.localize(
                 "ui.panel.config.scene.picker.edit_scene"
-              )}"
+              )}
             >
               <ha-svg-icon
                 .path=${scene.attributes.id ? mdiPencil : mdiPencilOff}
@@ -234,7 +234,7 @@ class HaSceneDashboard extends LitElement {
         ${this.hass.localize("ui.panel.config.scene.picker.introduction")}
         <p>
           <a
-            href="${documentationUrl(this.hass, "/docs/scene/editor/")}"
+            href=${documentationUrl(this.hass, "/docs/scene/editor/")}
             target="_blank"
             rel="noreferrer"
           >

src/panels/config/scene/ha-scene-editor.ts

@@ -254,9 +254,9 @@ export class HaSceneEditor extends SubscribeMixin(
         ${this.narrow ? html` <span slot="header">${name}</span> ` : ""}
         <div
           id="root"
-          class="${classMap({
+          class=${classMap({
             rtl: computeRTL(this.hass),
-          })}"
+          })}
         >
           ${this._config
             ? html`
@@ -312,9 +312,9 @@ export class HaSceneEditor extends SubscribeMixin(
                             ${device.name}
                             <ha-icon-button
                               icon="hass:delete"
-                              title="${this.hass.localize(
+                              title=${this.hass.localize(
                                 "ui.panel.config.scene.editor.devices.delete"
-                              )}"
+                              )}
                               .device=${device.id}
                               @click=${this._deleteDevice}
                             ></ha-icon-button>
@@ -404,9 +404,9 @@ export class HaSceneEditor extends SubscribeMixin(
                                       <ha-icon-button
                                         icon="hass:delete"
                                         .entityId=${entityId}
-                                        .title="${this.hass.localize(
+                                        .title=${this.hass.localize(
                                           "ui.panel.config.scene.editor.entities.delete"
-                                        )}"
+                                        )}
                                         @click=${this._deleteEntity}
                                       ></ha-icon-button>
                                     </paper-icon-item>
@@ -554,7 +554,7 @@ export class HaSceneEditor extends SubscribeMixin(
     let config: SceneConfig;
     try {
       config = await getSceneConfig(this.hass, this.sceneId!);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         text:
           err.status_code === 404
@@ -798,7 +798,7 @@ export class HaSceneEditor extends SubscribeMixin(
       if (!this.sceneId) {
         navigate(`/config/scene/edit/${id}`, { replace: true });
       }
-    } catch (err) {
+    } catch (err: any) {
       this._errors = err.body.message || err.message;
       showToast(this, {
         message: err.body.message || err.message,

src/panels/config/script/ha-script-editor.ts

@@ -242,10 +242,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                   "ui.panel.config.script.editor.modes.description",
                                   "documentation_link",
                                   html`<a
-                                    href="${documentationUrl(
+                                    href=${documentationUrl(
                                       this.hass,
                                       "/integrations/script/#script-modes"
-                                    )}"
+                                    )}
                                     target="_blank"
                                     rel="noreferrer"
                                     >${this.hass.localize(
@@ -309,9 +309,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                     </a>
                                     <mwc-button
                                       @click=${this._runScript}
-                                      title="${this.hass.localize(
+                                      title=${this.hass.localize(
                                         "ui.panel.config.script.picker.run_script"
-                                      )}"
+                                      )}
                                       ?disabled=${this._dirty}
                                     >
                                       ${this.hass.localize(
@@ -337,10 +337,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               )}
                             </p>
                             <a
-                              href="${documentationUrl(
+                              href=${documentationUrl(
                                 this.hass,
                                 "/docs/scripts/"
-                              )}"
+                              )}
                               target="_blank"
                               rel="noreferrer"
                             >
@@ -370,9 +370,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                         >
                           <mwc-button
                             @click=${this._runScript}
-                            title="${this.hass.localize(
+                            title=${this.hass.localize(
                               "ui.panel.config.script.picker.run_script"
-                            )}"
+                            )}
                             ?disabled=${this._dirty}
                           >
                             ${this.hass.localize(