diff --git a/public/__init__.py b/public/__init__.py
index 1debde5485..493110db57 100644
--- a/public/__init__.py
+++ b/public/__init__.py
@@ -2,6 +2,6 @@
 from pathlib import Path
 
 
-def where():
+def where() -> Path:
     """Return path to the frontend."""
     return Path(__file__).parent
diff --git a/public/py.typed b/public/py.typed
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/setup.cfg b/setup.cfg
index f3efcd2597..f1b3450973 100644
--- a/setup.cfg
+++ b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220224.0
+version      = 20220226.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
@@ -19,3 +19,8 @@ python_requires = >= 3.4.0
 [options.packages.find]
 include =
     hass_frontend*
+
+[mypy]
+python_version = 3.4
+show_error_codes = True
+strict = True
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 521ea4499a..916257695a 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -52,19 +52,21 @@ class MoreInfoMediaPlayer extends LitElement {
     return html`
       <div class="controls">
         <div class="basic-controls">
-          ${controls!.map(
-            (control) => html`
-              <ha-icon-button
-                action=${control.action}
-                @click=${this._handleClick}
-                .path=${control.icon}
-                .label=${this.hass.localize(
-                  `ui.card.media_player.${control.action}`
-                )}
-              >
-              </ha-icon-button>
-            `
-          )}
+          ${!controls
+            ? ""
+            : controls.map(
+                (control) => html`
+                  <ha-icon-button
+                    action=${control.action}
+                    @click=${this._handleClick}
+                    .path=${control.icon}
+                    .label=${this.hass.localize(
+                      `ui.card.media_player.${control.action}`
+                    )}
+                  >
+                  </ha-icon-button>
+                `
+              )}
         </div>
         ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
           ? html`
diff --git a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
index c837304ea9..96bfd08fc5 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
@@ -145,7 +145,7 @@ export class HaDeviceAction extends LitElement {
   static styles = css`
     ha-device-picker {
       display: block;
-      margin-bottom: 24px;
+      margin-bottom: 16px;
     }
     ha-device-action-picker {
       display: block;
diff --git a/src/panels/config/automation/action/types/ha-automation-action-event.ts b/src/panels/config/automation/action/types/ha-automation-action-event.ts
index ee133fa7da..e022bb5f50 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-event.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts
@@ -50,7 +50,7 @@ export class HaEventAction extends LitElement implements ActionElement {
       <ha-yaml-editor
         .hass=${this.hass}
         .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.event.service_data"
+          "ui.panel.config.automation.editor.actions.type.event.event_data"
         )}
         .name=${"event_data"}
         .defaultValue=${event_data}
diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
index 13942a211a..ed8b536bba 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
@@ -162,8 +162,8 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     return [
       haStyle,
       css`
-        ha-select {
-          margin-top: 8px;
+        ha-textfield {
+          margin-top: 16px;
         }
       `,
     ];
diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
index 2b76b0918c..e0f4554fa4 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
@@ -33,7 +33,6 @@ export class HaWaitForTriggerAction
         .value=${timeout || ""}
         @change=${this._valueChanged}
       ></ha-textfield>
-      <br />
       <ha-formfield
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.wait_for_trigger.continue_timeout"
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
index fca4616a7e..88277292d8 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
@@ -117,8 +117,8 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
     );
 
     const data = {
-      mode_before: "value",
-      mode_after: "value",
+      mode_before: inputModeBefore ? "input" : "value",
+      mode_after: inputModeAfter ? "input" : "value",
       ...this.condition,
     };
 
@@ -137,18 +137,11 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
     ev.stopPropagation();
     const newValue = ev.detail.value;
 
-    const newModeAfter = newValue.mode_after === "input";
-    const newModeBefore = newValue.mode_before === "input";
+    this._inputModeAfter = newValue.mode_after === "input";
+    this._inputModeBefore = newValue.mode_before === "input";
 
-    if (newModeAfter !== this._inputModeAfter) {
-      this._inputModeAfter = newModeAfter;
-      newValue.after = undefined;
-    }
-
-    if (newModeBefore !== this._inputModeBefore) {
-      this._inputModeBefore = newModeBefore;
-      newValue.before = undefined;
-    }
+    delete newValue.mode_after;
+    delete newValue.mode_before;
 
     Object.keys(newValue).forEach((key) =>
       newValue[key] === undefined || newValue[key] === ""
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index 8c77470c7f..2f67454a9c 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -17,7 +17,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
@@ -118,6 +118,8 @@ class HaConfigDashboard extends LitElement {
 
   @property() public showAdvanced!: boolean;
 
+  @state() private _tip?: string;
+
   private _notifyUpdates = false;
 
   protected render(): TemplateResult {
@@ -204,7 +206,7 @@ class HaConfigDashboard extends LitElement {
           <div class="tips">
             <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
             <span class="tip-word">Tip!</span>
-            <span class="text">${randomTip(this.hass)}</span>
+            <span class="text">${this._tip}</span>
           </div>
         </ha-config-section>
       </ha-app-layout>
@@ -214,6 +216,10 @@ class HaConfigDashboard extends LitElement {
   protected override updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
+    if (!this._tip && changedProps.has("hass")) {
+      this._tip = randomTip(this.hass);
+    }
+
     if (!changedProps.has("supervisorUpdates") || !this._notifyUpdates) {
       return;
     }
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 74a5b8027d..97fa25cc84 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -289,6 +289,12 @@ class HaPanelDevTemplate extends LitElement {
         .rendered.error {
           color: var(--error-color);
         }
+
+        @media all and (max-width: 870px) {
+          .render-pane {
+            max-width: 100%;
+          }
+        }
       `,
     ];
   }
diff --git a/src/panels/media-browser/browser-media-player.ts b/src/panels/media-browser/browser-media-player.ts
index 182f944e3f..bc88414a98 100644
--- a/src/panels/media-browser/browser-media-player.ts
+++ b/src/panels/media-browser/browser-media-player.ts
@@ -25,6 +25,7 @@ export class BrowserMediaPlayer {
     private onChange: () => void
   ) {
     const player = new Audio(this.resolved.url);
+    player.autoplay = true;
     player.volume = volume;
     player.addEventListener("play", this._handleChange);
     player.addEventListener("playing", () => {
@@ -33,15 +34,7 @@ export class BrowserMediaPlayer {
     });
     player.addEventListener("pause", this._handleChange);
     player.addEventListener("ended", this._handleChange);
-    player.addEventListener("canplaythrough", () => {
-      if (this._removed) {
-        return;
-      }
-      if (this.buffering) {
-        player.play();
-      }
-      this.onChange();
-    });
+    player.addEventListener("canplaythrough", this._handleChange);
     this.player = player;
   }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index d080bac456..d1ec5a56b3 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1863,7 +1863,7 @@
                 "event": {
                   "label": "Fire event",
                   "event": "[%key:ui::panel::config::automation::editor::triggers::type::event::label%]",
-                  "service_data": "[%key:ui::components::service-control::service_data%]"
+                  "event_data": "[%key:ui::panel::config::automation::editor::triggers::type::event::event_data%]"
                 },
                 "device_id": {
                   "label": "Device",