diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js
deleted file mode 100644
index d228de67de..0000000000
--- a/src/components/entity/state-info.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import "@polymer/paper-tooltip/paper-tooltip";
-/* eslint-plugin-disable lit */
-import LocalizeMixin from "../../mixins/localize-mixin";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { computeRTL } from "../../common/util/compute_rtl";
-import "../ha-relative-time";
-import "./state-badge";
-
-class StateInfo extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate} ${this.stateBadgeTemplate} ${this.infoTemplate}
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          @apply --paper-font-body1;
-          min-width: 120px;
-          white-space: nowrap;
-        }
-
-        state-badge {
-          float: left;
-        }
-
-        :host([rtl]) state-badge {
-          float: right;
-        }
-
-        .info {
-          margin-left: 56px;
-        }
-
-        :host([rtl]) .info {
-          margin-right: 56px;
-          margin-left: 0;
-          text-align: right;
-        }
-
-        .name {
-          @apply --paper-font-common-nowrap;
-          color: var(--primary-text-color);
-          line-height: 40px;
-        }
-
-        .name[in-dialog],
-        :host([secondary-line]) .name {
-          line-height: 20px;
-        }
-
-        .time-ago,
-        .extra-info,
-        .extra-info > * {
-          @apply --paper-font-common-nowrap;
-          color: var(--secondary-text-color);
-        }
-
-        .row {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: no-wrap;
-          width: 100%;
-          justify-content: space-between;
-          margin: 0 2px 4px 0;
-        }
-
-        .row:last-child {
-          margin-bottom: 0px;
-        }
-      </style>
-    `;
-  }
-
-  static get stateBadgeTemplate() {
-    return html` <state-badge state-obj="[[stateObj]]"></state-badge> `;
-  }
-
-  static get infoTemplate() {
-    return html`
-      <div class="info">
-        <div class="name" in-dialog$="[[inDialog]]">
-          [[computeStateName(stateObj)]]
-        </div>
-        <template is="dom-if" if="[[inDialog]]">
-          <div class="time-ago">
-            <ha-relative-time
-              id="last_changed"
-              hass="[[hass]]"
-              datetime="[[stateObj.last_changed]]"
-            ></ha-relative-time>
-            <paper-tooltip animation-delay="0" for="last_changed">
-              <div>
-                <div class="row">
-                  <span class="column-name">
-                    [[localize('ui.dialogs.more_info_control.last_changed')]]:
-                  </span>
-                  <ha-relative-time
-                    hass="[[hass]]"
-                    datetime="[[stateObj.last_changed]]"
-                  ></ha-relative-time>
-                </div>
-                <div class="row">
-                  <span>
-                    [[localize('ui.dialogs.more_info_control.last_updated')]]:
-                  </span>
-                  <ha-relative-time
-                    hass="[[hass]]"
-                    datetime="[[stateObj.last_updated]]"
-                  ></ha-relative-time>
-                </div>
-              </div>
-            </paper-tooltip>
-          </div>
-        </template>
-        <template is="dom-if" if="[[!inDialog]]">
-          <div class="extra-info"><slot> </slot></div>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-      inDialog: {
-        type: Boolean,
-        value: () => false,
-      },
-      rtl: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "computeRTL(hass)",
-      },
-    };
-  }
-
-  computeStateName(stateObj) {
-    return computeStateName(stateObj);
-  }
-
-  computeRTL(hass) {
-    return computeRTL(hass);
-  }
-}
-
-customElements.define("state-info", StateInfo);
diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
new file mode 100644
index 0000000000..91991d5e22
--- /dev/null
+++ b/src/components/entity/state-info.ts
@@ -0,0 +1,158 @@
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import type { HassEntity } from "home-assistant-js-websocket";
+
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { computeRTL } from "../../common/util/compute_rtl";
+import type { HomeAssistant } from "../../types";
+
+import "../ha-relative-time";
+import "./state-badge";
+
+@customElement("state-info")
+class StateInfo extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @property({ type: Boolean }) public inDialog = false;
+
+  // property used only in css
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    return html`<state-badge
+        .stateObj=${this.stateObj}
+        .stateColor=${true}
+      ></state-badge>
+      <div class="info">
+        <div class="name" .inDialog=${this.inDialog}>
+          ${computeStateName(this.stateObj)}
+        </div>
+        ${this.inDialog
+          ? html`<div class="time-ago">
+              <ha-relative-time
+                id="last_changed"
+                .hass=${this.hass}
+                .datetime=${this.stateObj.last_changed}
+              ></ha-relative-time>
+              <paper-tooltip animation-delay="0" for="last_changed">
+                <div>
+                  <div class="row">
+                    <span class="column-name">
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_changed"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_changed}
+                    ></ha-relative-time>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_updated"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_updated}
+                    ></ha-relative-time>
+                  </div>
+                </div>
+              </paper-tooltip>
+            </div>`
+          : html`<div class="extra-info"><slot> </slot></div>`}
+      </div>`;
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (!changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.language !== this.hass.language) {
+      this.rtl = computeRTL(this.hass);
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        @apply --paper-font-body1;
+        min-width: 120px;
+        white-space: nowrap;
+      }
+
+      state-badge {
+        float: left;
+      }
+
+      :host([rtl]) state-badge {
+        float: right;
+      }
+
+      .info {
+        margin-left: 56px;
+      }
+
+      :host([rtl]) .info {
+        margin-right: 56px;
+        margin-left: 0;
+        text-align: right;
+      }
+
+      .name {
+        @apply --paper-font-common-nowrap;
+        color: var(--primary-text-color);
+        line-height: 40px;
+      }
+
+      .name[in-dialog],
+      :host([secondary-line]) .name {
+        line-height: 20px;
+      }
+
+      .time-ago,
+      .extra-info,
+      .extra-info > * {
+        @apply --paper-font-common-nowrap;
+        color: var(--secondary-text-color);
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: no-wrap;
+        width: 100%;
+        justify-content: space-between;
+        margin: 0 2px 4px 0;
+      }
+
+      .row:last-child {
+        margin-bottom: 0px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "state-info": StateInfo;
+  }
+}