diff --git a/gallery/src/demos/demo-integration-card.ts b/gallery/src/demos/demo-integration-card.ts
index 4da42f1279..5067d6e455 100644
--- a/gallery/src/demos/demo-integration-card.ts
+++ b/gallery/src/demos/demo-integration-card.ts
@@ -206,6 +206,7 @@ const createDeviceRegistryEntries = (
     model: "Mock Device",
     name: "Tag Reader",
     sw_version: null,
+    hw_version: "1.0.0",
     id: "mock-device-id",
     identifiers: [],
     via_device_id: null,
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index e887991ec0..91e072ba72 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -133,6 +133,7 @@ class HassioAddonInfo extends LitElement {
               .narrow=${this.narrow}
               .supervisor=${this.supervisor}
               .addonSlug=${this.addon.slug}
+              @update-complete=${this._updateComplete}
             ></update-available-card>
           `
         : ""}
@@ -865,6 +866,15 @@ class HassioAddonInfo extends LitElement {
     }
   }
 
+  private _updateComplete() {
+    const eventdata = {
+      success: true,
+      response: undefined,
+      path: "install",
+    };
+    fireEvent(this, "hass-api-called", eventdata);
+  }
+
   private async _installClicked(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
     button.progress = true;
diff --git a/hassio/src/components/supervisor-backup-content.ts b/hassio/src/components/supervisor-backup-content.ts
index 58ca3bcb94..d1422521b8 100644
--- a/hassio/src/components/supervisor-backup-content.ts
+++ b/hassio/src/components/supervisor-backup-content.ts
@@ -350,9 +350,7 @@ export class SupervisorBackupContent extends LitElement {
     if (folders?.length) {
       data.folders = folders;
     }
-    if (this.homeAssistant) {
-      data.homeassistant = this.homeAssistant;
-    }
+    data.homeassistant = this.homeAssistant;
 
     return data;
   }
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 03f1fc0395..b9707f5986 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -1,5 +1,6 @@
+import "@polymer/paper-tooltip/paper-tooltip";
 import "@material/mwc-button/mwc-button";
-import { mdiDelete } from "@mdi/js";
+import { mdiDelete, mdiDeleteOff } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -15,6 +16,7 @@ import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonsInfo,
+  HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -60,11 +62,24 @@ class HassioRepositoriesDialog extends LitElement {
       .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
   );
 
+  private _filteredUsedRepositories = memoizeOne(
+    (repos: HassioAddonRepository[], addons: HassioAddonInfo[]) =>
+      repos
+        .filter((repo) =>
+          addons.some((addon) => addon.repository === repo.slug)
+        )
+        .map((repo) => repo.slug)
+  );
+
   protected render(): TemplateResult {
     if (!this._dialogParams?.supervisor || this._repositories === undefined) {
       return html``;
     }
     const repositories = this._filteredRepositories(this._repositories);
+    const usedRepositories = this._filteredUsedRepositories(
+      repositories,
+      this._dialogParams.supervisor.supervisor.addons
+    );
     return html`
       <ha-dialog
         .open=${this._opened}
@@ -89,18 +104,32 @@ class HassioRepositoriesDialog extends LitElement {
                       <div secondary>${repo.maintainer}</div>
                       <div secondary>${repo.url}</div>
                     </paper-item-body>
-                    <ha-icon-button
-                      .slug=${repo.slug}
-                      .label=${this._dialogParams!.supervisor.localize(
-                        "dialog.repositories.remove"
-                      )}
-                      .path=${mdiDelete}
-                      @click=${this._removeRepository}
-                    ></ha-icon-button>
+                    <div class="delete">
+                      <ha-icon-button
+                        .disabled=${usedRepositories.includes(repo.slug)}
+                        .slug=${repo.slug}
+                        .path=${usedRepositories.includes(repo.slug)
+                          ? mdiDeleteOff
+                          : mdiDelete}
+                        @click=${this._removeRepository}
+                      >
+                      </ha-icon-button>
+                      <paper-tooltip
+                        animation-delay="0"
+                        position="bottom"
+                        offset="1"
+                      >
+                        ${this._dialogParams!.supervisor.localize(
+                          usedRepositories.includes(repo.slug)
+                            ? "dialog.repositories.used"
+                            : "dialog.repositories.remove"
+                        )}
+                      </paper-tooltip>
+                    </div>
                   </paper-item>
                 `
               )
-            : html` <paper-item> No repositories </paper-item> `}
+            : html`<paper-item> No repositories </paper-item>`}
           <div class="layout horizontal bottom">
             <paper-input
               class="flex-auto"
@@ -157,6 +186,9 @@ class HassioRepositoriesDialog extends LitElement {
           margin: 32px;
           text-align: center;
         }
+        div.delete ha-icon-button {
+          color: var(--error-color);
+        }
       `,
     ];
   }
diff --git a/hassio/src/update-available/update-available-dashboard.ts b/hassio/src/update-available/update-available-dashboard.ts
index 481808a126..9e1598527c 100644
--- a/hassio/src/update-available/update-available-dashboard.ts
+++ b/hassio/src/update-available/update-available-dashboard.ts
@@ -46,6 +46,7 @@ class UpdateAvailableDashboard extends LitElement {
       update-available-card {
         margin: auto;
         margin-top: 16px;
+        margin-bottom: 24px;
         max-width: 600px;
       }
     `;
diff --git a/package.json b/package.json
index 5b05a0ddcd..d000f29c21 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.0.11",
-    "home-assistant-js-websocket": "^5.11.3",
+    "home-assistant-js-websocket": "^5.12.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
diff --git a/setup.py b/setup.py
index f70ca702e7..8ec5a8641a 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20211215.0",
+    version="20211220.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",
diff --git a/src/common/const.ts b/src/common/const.ts
index ef88067ac2..0b668adb45 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -199,13 +199,16 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
   "select",
 ];
 
-/** Domains that render an input element instead of a text value when rendered in a row.
+/** Domains that render an input element instead of a text value when displayed in a row.
  *  Those rows should then not show a cursor pointer when hovered (which would normally
  *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
  *  should not act as a click target to open the more info dialog (the row name and state icon
- *  still do of course) as the click might instead e.g. activate the input field that this row shows.
+ *  still do of course) as the click should instead e.g. activate the input field  or toggle
+ *  the button that this row shows.
  */
 export const DOMAINS_INPUT_ROW = [
+  "automation",
+  "button",
   "cover",
   "fan",
   "group",
@@ -223,6 +226,7 @@ export const DOMAINS_INPUT_ROW = [
   "script",
   "select",
   "switch",
+  "vacuum",
 ];
 
 /** Domains that should have the history hidden in the more info dialog. */
diff --git a/src/data/device_registry.ts b/src/data/device_registry.ts
index 5c039437e4..7a16c1ec10 100644
--- a/src/data/device_registry.ts
+++ b/src/data/device_registry.ts
@@ -13,6 +13,7 @@ export interface DeviceRegistryEntry {
   model: string | null;
   name: string | null;
   sw_version: string | null;
+  hw_version: string | null;
   via_device_id: string | null;
   area_id: string | null;
   name_by_user: string | null;
diff --git a/src/external_app/external_messaging.ts b/src/external_app/external_messaging.ts
index f5640858fc..7dd03095cb 100644
--- a/src/external_app/external_messaging.ts
+++ b/src/external_app/external_messaging.ts
@@ -110,7 +110,7 @@ export class ExternalMessaging {
           },
         });
       } else if (msg.command === "restart") {
-        this.connection.socket.close();
+        this.connection.reconnect(true);
         this.fireMessage({
           id: msg.id,
           type: "result",
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index 0f764be982..8ca7b46de0 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -271,7 +271,10 @@ export const provideHass = (
     updateStates,
     updateTranslations,
     addTranslations,
-    loadFragmentTranslation: async (_fragment: string) => hass().localize,
+    loadFragmentTranslation: async (fragment: string) => {
+      await updateTranslations(fragment);
+      return hass().localize;
+    },
     addEntities,
     mockWS(type, callback) {
       wsCommands[type] = callback;
diff --git a/src/panels/config/devices/device-detail/ha-device-info-card.ts b/src/panels/config/devices/device-detail/ha-device-info-card.ts
index 3e8b56810b..821f430598 100644
--- a/src/panels/config/devices/device-detail/ha-device-info-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-info-card.ts
@@ -66,6 +66,17 @@ export class HaDeviceCard extends LitElement {
                 </div>
               `
             : ""}
+          ${this.device.hw_version
+            ? html`
+                <div class="extra-info">
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.hardware",
+                    "version",
+                    this.device.hw_version
+                  )}
+                </div>
+              `
+            : ""}
           <slot></slot>
         </div>
         <slot name="actions"></slot>
@@ -107,9 +118,9 @@ export class HaDeviceCard extends LitElement {
         word-wrap: break-word;
       }
       .manuf,
-      .entity-id,
       .model {
         color: var(--secondary-text-color);
+        word-wrap: break-word;
       }
     `;
   }
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
index d95402bc51..290ff126ac 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
@@ -218,9 +218,11 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
         .device .manuf {
           color: var(--secondary-text-color);
           margin-bottom: 20px;
+          word-wrap: break-word;
         }
         .extra-info {
           margin-top: 8px;
+          word-wrap: break-word;
         }
         state-badge {
           cursor: pointer;
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 2e9cca12a4..d5bbd66b3d 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -163,16 +163,16 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     if (!this._config || !this._hass) {
       return;
     }
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldHass = changedProps.get("_hass") as HomeAssistant | undefined;
     const oldConfig = changedProps.get("_config") as
       | EntitiesCardConfig
       | undefined;
 
     if (
-      !oldHass ||
-      !oldConfig ||
-      oldHass.themes !== this.hass.themes ||
-      oldConfig.theme !== this._config.theme
+      (changedProps.has("_hass") &&
+        (!oldHass || oldHass.themes !== this._hass.themes)) ||
+      (changedProps.has("_config") &&
+        (!oldConfig || oldConfig.theme !== this._config.theme))
     ) {
       applyThemesOnElement(this, this._hass.themes, this._config.theme);
     }
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 5f185bf46e..b87c39f5a7 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -33,6 +33,13 @@ class HuiGenericEntityRow extends LitElement {
 
   @property({ type: Boolean }) public hideName = false;
 
+  // Allows to control if this row should capture the user interaction, e.g. with its
+  // toggle switch, button or input field. Some domains dynamically decide what to show
+  // => static determination will not work => the caller has to pass the desired value in.
+  // Same applies for custom components that want to override the default behavior.
+  // Default behavior is controlled by DOMAINS_INPUT_ROW.
+  @property({ type: Boolean }) public catchInteraction?;
+
   protected render(): TemplateResult {
     if (!this.hass || !this.config) {
       return html``;
@@ -50,8 +57,11 @@ class HuiGenericEntityRow extends LitElement {
     }
 
     const domain = computeDomain(this.config.entity);
+    // By default, we always show a pointer, since if there is no explicit configuration provided,
+    // the frontend always assumes "more-info" in the action handler. We only need to hide the pointer
+    // if the tap action is explicitly set to "none".
     const pointer = !(
-      this.config.tap_action && this.config.tap_action.action !== "none"
+      this.config.tap_action && this.config.tap_action.action === "none"
     );
 
     const hasSecondary = this.secondaryText || this.config.secondary_info;
@@ -144,7 +154,7 @@ class HuiGenericEntityRow extends LitElement {
               : ""}
           </div>`
         : html``}
-      ${!DOMAINS_INPUT_ROW.includes(domain)
+      ${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
         ? html` <div
             class="text-content ${classMap({
               pointer,
diff --git a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
index 32c3f0d1ad..79eab48a0d 100644
--- a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
@@ -41,11 +41,18 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
+    const showToggle =
+      stateObj.state === "on" ||
+      stateObj.state === "off" ||
+      UNAVAILABLE_STATES.includes(stateObj.state);
+
     return html`
-      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        ${stateObj.state === "on" ||
-        stateObj.state === "off" ||
-        UNAVAILABLE_STATES.includes(stateObj.state)
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+        .catchInteraction=${!showToggle}
+      >
+        ${showToggle
           ? html`
               <ha-entity-toggle
                 .hass=${this.hass}
diff --git a/src/translations/en.json b/src/translations/en.json
index 102da654c6..6395157249 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1461,7 +1461,8 @@
               "telegram": "Telegram notify services",
               "smtp": "SMTP notify services",
               "mqtt": "Manually configured MQTT entities",
-              "rpi_gpio": "Raspberry Pi GPIO entities"
+              "rpi_gpio": "Raspberry Pi GPIO entities",
+              "timer": "Timers"
             },
             "server_management": {
               "heading": "Server management",
@@ -2444,6 +2445,7 @@
             "manuf": "by {manufacturer}",
             "via": "Connected via",
             "firmware": "Firmware: {version}",
+            "hardware": "Hardware: {version}",
             "unnamed_entry": "Unnamed entry",
             "unknown_via_device": "Unknown device",
             "area": "In {area}",
@@ -4465,7 +4467,8 @@
       "repositories": {
         "title": "Manage add-on repositories",
         "add": "Add",
-        "remove": "Remove"
+        "remove": "Remove",
+        "used": "Repository is in use for installed add-ons and can't be removed."
       },
       "restart_addon": {
         "confirm_text": "Restart add-on",
diff --git a/yarn.lock b/yarn.lock
index e40476833a..f7d31e3124 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9113,7 +9113,7 @@ fsevents@^1.2.7:
     gulp-rename: ^2.0.0
     gulp-zopfli-green: ^3.0.1
     hls.js: ^1.0.11
-    home-assistant-js-websocket: ^5.11.3
+    home-assistant-js-websocket: ^5.12.0
     html-minifier: ^4.0.0
     husky: ^1.3.1
     idb-keyval: ^5.1.3
@@ -9184,10 +9184,10 @@ fsevents@^1.2.7:
   languageName: unknown
   linkType: soft
 
-"home-assistant-js-websocket@npm:^5.11.3":
-  version: 5.11.3
-  resolution: "home-assistant-js-websocket@npm:5.11.3"
-  checksum: 3ab90e5105c5f379d77fb23ab53eaec2789be7bf1fd507a7520d9cf329d36942b8e978a591b822cff96100630d43bd036a4e25e2f49c40d0c56a111808fb90a5
+"home-assistant-js-websocket@npm:^5.12.0":
+  version: 5.12.0
+  resolution: "home-assistant-js-websocket@npm:5.12.0"
+  checksum: 62171c10e55e3245c9a4fc77dbd2641f234a66b4e3d0adaf8c4364c567473555dbf34f3d737bf3f31e92f2a198051b57f2782fd71f8406784693e64496809501
   languageName: node
   linkType: hard