Upgrade to Lit 2 (#9199)

build-scripts/webpack.js

@@ -117,7 +117,7 @@ const createWebpackConfig = ({
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
           require.resolve(
-            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+            "@lit-labs/virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
           )
         ),
         path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
@@ -126,6 +126,10 @@ const createWebpackConfig = ({
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
+      alias: {
+        "lit/decorators$": "lit/decorators.js",
+        "lit/directive$": "lit/directive.js",
+      },
     },
     output: {
       filename: ({ chunk }) => {

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

@@ -1,16 +1,9 @@
+import "@material/mwc-button/mwc-button";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  state,
-  TemplateResult,
-} from "lit-element";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
@@ -32,7 +25,6 @@ import {
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
-import "@material/mwc-button/mwc-button";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {

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

@@ -11,15 +11,8 @@ import {
   getAuth,
   getAuthOptions,
 } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-  state,
-} from "lit-element";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {

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

@@ -4,15 +4,8 @@ import {
   getUser,
   HassUser,
 } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")

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

@@ -1,10 +1,5 @@
-import {
+import { html, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {

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

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")

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

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";

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

@@ -3,7 +3,8 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { customElement, html, state, TemplateResult } from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,

demo/src/custom-cards/card-modder.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import "./card-tools";
 
 class CardModder extends LitElement {

demo/src/custom-cards/card-tools.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { html, LitElement } from "lit-element";
+import { html, LitElement } from "lit";
 
 if (!window.cardTools) {
   const version = 0.2;

demo/src/custom-cards/cast-demo-row.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
 import { CastManager } from "../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../src/cast/receiver_messages";
 import "../../../src/components/ha-icon";

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

@@ -1,14 +1,7 @@
 import "@material/mwc-button";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { property, state } from "lit/decorators";
-  CSSResultGroup,
+import { until } from "lit/directives/until";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { until } from "lit-html/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";

gallery/src/demos/demo-automation-describe-action.ts

@@ -1,12 +1,6 @@
 import { safeDump } from "js-yaml";
-import {
+import { html, css, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property } from "lit/decorators";
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
 import "../../../src/components/ha-card";
 import { describeAction } from "../../../src/data/script_i18n";
 import { provideHass } from "../../../src/fake_data/provide_hass";

gallery/src/demos/demo-automation-describe-condition.ts

@@ -1,11 +1,6 @@
 import { safeDump } from "js-yaml";
-import {
+import { html, css, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement } from "lit/decorators";
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
 import "../../../src/components/ha-card";
 import { describeCondition } from "../../../src/data/automation_i18n";
 

gallery/src/demos/demo-automation-describe-trigger.ts

@@ -1,11 +1,6 @@
 import { safeDump } from "js-yaml";
-import {
+import { html, css, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement } from "lit/decorators";
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
 import "../../../src/components/ha-card";
 import { describeTrigger } from "../../../src/data/automation_i18n";
 

gallery/src/demos/demo-automation-trace-timeline.ts

@@ -1,11 +1,5 @@
-import {
+import { html, css, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property } from "lit/decorators";
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";
 import "../../../src/components/trace/hat-trace-timeline";

gallery/src/demos/demo-automation-trace.ts

@@ -1,12 +1,4 @@
-import {
+import { html, css, LitElement, TemplateResult } from "lit";
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  state,
-  property,
-} from "lit-element";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";
 import "../../../src/components/trace/hat-trace-timeline";
@@ -15,6 +7,7 @@ import { HomeAssistant } from "../../../src/types";
 import { DemoTrace } from "../data/traces/types";
 import { basicTrace } from "../data/traces/basic_trace";
 import { motionLightTrace } from "../data/traces/motion-light-trace";
+import { customElement, property, state } from "lit/decorators";
 
 const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-conditional-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-entities-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-gauge-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-glance-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-grid-and-stack-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";

gallery/src/demos/demo-hui-iframe-card.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../components/demo-cards";
 
 const CONFIGS = [

gallery/src/demos/demo-hui-light-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-map-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-markdown-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { mockTemplate } from "../../../demo/src/stubs/template";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-picture-entity-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-picture-glance-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-hui-plant-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createPlantEntities } from "../data/plants";

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, query } from "lit/decorators";
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

gallery/src/demos/demo-integration-card.ts

@@ -1,12 +1,4 @@
-import {
+import { html, css, LitElement, TemplateResult } from "lit";
-  customElement,
-  html,
-  css,
-  state,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 
@@ -23,7 +15,8 @@ import type {
 } from "../../../src/panels/config/integrations/ha-config-integrations";
 import { DeviceRegistryEntry } from "../../../src/data/device_registry";
 import { EntityRegistryEntry } from "../../../src/data/entity_registry";
-import { classMap } from "lit-html/directives/class-map";
+import { classMap } from "lit/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
 
 const createConfigEntry = (
   title: string,

gallery/src/demos/demo-more-info-light.ts

@@ -1,12 +1,5 @@
-import {
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, query } from "lit/decorators";
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
 import "../../../src/components/ha-card";
 import {
   LightColorModes,

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

@@ -1,5 +1,6 @@
 import "@material/mwc-button";
-import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";

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

@@ -1,12 +1,6 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { property } from "lit/decorators";
-  CSSResultGroup,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";

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

@@ -5,12 +5,12 @@ import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
-  state,
+  html,
   LitElement,
-  property,
   PropertyValues,
-} from "lit-element";
+  TemplateResult,
-import { html, TemplateResult } from "lit-html";
+} from "lit";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";

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

@@ -5,14 +5,12 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";

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

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";

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

@@ -6,15 +6,12 @@ import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";

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

@@ -2,14 +2,12 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";

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

@@ -1,14 +1,5 @@
 import "../../../../src/components/ha-card";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import {
@@ -21,6 +12,7 @@ import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { customElement, property, state } from "lit/decorators";
 
 @customElement("hassio-addon-documentation-tab")
 class HassioAddonDocumentationDashboard extends LitElement {

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

@@ -4,16 +4,8 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";

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

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {

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

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";

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

@@ -14,17 +14,9 @@ import {
   mdiPound,
   mdiShield,
 } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
+import { classMap } from "lit/directives/class-map";
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";

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

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";

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

@@ -1,14 +1,6 @@
 import "@material/mwc-button";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,

hassio/src/components/hassio-ansi-to-html.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 
 interface State {
   bold: boolean;

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

@@ -1,13 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../src/components/ha-relative-time";
 import "../../../src/components/ha-svg-icon";
 import { HomeAssistant } from "../../../src/types";

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

@@ -2,13 +2,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";

hassio/src/components/supervisor-metric.ts

@@ -1,13 +1,6 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
+import { classMap } from "lit/directives/class-map";
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import "../../../src/components/ha-bar";
 import "../../../src/components/ha-settings-row";
 import { roundWithOneDecimal } from "../../../src/util/calculate";

hassio/src/dashboard/hassio-addons.ts

@@ -1,13 +1,6 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
 import { compare } from "../../../src/common/string/compare";

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";

hassio/src/dashboard/hassio-update.ts

@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import { mdiHomeAssistant } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";

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

@@ -1,13 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-markdown";
 import { haStyleDialog } from "../../../../src/resources/styles";

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

@@ -6,17 +6,9 @@ import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
+import { cache } from "lit/directives/cache";
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { cache } from "lit-html/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";

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

@@ -3,16 +3,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDelete } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";

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

@@ -5,17 +5,8 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";

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

@@ -1,16 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResult,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { formatDate } from "../../../../src/common/datetime/format_date";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { compare } from "../../../../src/common/string/compare";
@@ -334,7 +326,7 @@ class HassioCreateSnapshotDialog extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,

hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts

@@ -1,14 +1,6 @@
 import { mdiClose } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-header-bar";
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";

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

@@ -3,16 +3,8 @@ import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
 import "@polymer/paper-checkbox/paper-checkbox";
 import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-header-bar";

hassio/src/dialogs/suggestAddonRestart.ts

@@ -1,4 +1,4 @@
-import type { LitElement } from "lit-element";
+import type { LitElement } from "lit";
 import {
   HassioAddonDetails,
   restartHassioAddon,

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

@@ -1,13 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";

hassio/src/hassio-main.ts

@@ -1,4 +1,5 @@
-import { customElement, html, property, PropertyValues } from "lit-element";
+import { html, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";

hassio/src/hassio-my-redirect.ts

@@ -1,11 +1,4 @@
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { sanitizeUrl } from "@braintree/sanitize-url";
 import {
   createSearchParam,
@@ -20,6 +13,7 @@ import {
 import { navigate } from "../../src/common/navigate";
 import { HomeAssistant, Route } from "../../src/types";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
+import { customElement, property, state } from "lit/decorators";
 
 const REDIRECTS: Redirects = {
   supervisor: {

hassio/src/hassio-panel-router.ts

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,

hassio/src/hassio-panel.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import {
   Supervisor,
   supervisorCollection,

hassio/src/hassio-router.ts

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import {

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

@@ -2,14 +2,12 @@ import { mdiMenu } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";

hassio/src/resources/hassio-style.ts

@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const hassioStyle = css`
   .content {

hassio/src/snapshots/hassio-snapshots.ts

@@ -4,14 +4,12 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
-  state,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import relativeTime from "../../../src/common/datetime/relative_time";

hassio/src/supervisor-base-element.ts

@@ -1,5 +1,6 @@
 import { Collection, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { state, LitElement, property, PropertyValues } from "lit-element";
+import { LitElement, PropertyValues } from "lit";
+import { property, state } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { computeLocalize } from "../../src/common/translations/localize";
 import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon";

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

@@ -1,15 +1,7 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";

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

@@ -3,15 +3,8 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import { safeDump } from "js-yaml";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";

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

@@ -1,13 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";

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

@@ -2,16 +2,8 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";

hassio/src/system/hassio-system.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";

package.json

@@ -42,22 +42,23 @@
     "@fullcalendar/daygrid": "5.1.0",
     "@fullcalendar/interaction": "5.1.0",
     "@fullcalendar/list": "5.1.0",
-    "@material/chips": "=9.0.0-canary.1c156d69d.0",
+    "@lit-labs/virtualizer": "^0.6.0",
-    "@material/mwc-button": "^0.20.0",
+    "@material/chips": "=12.0.0-canary.1a8d06483.0",
-    "@material/mwc-checkbox": "^0.20.0",
+    "@material/mwc-button": "canary",
-    "@material/mwc-circular-progress": "^0.20.0",
+    "@material/mwc-checkbox": "canary",
-    "@material/mwc-dialog": "^0.20.0",
+    "@material/mwc-circular-progress": "canary",
-    "@material/mwc-fab": "^0.20.0",
+    "@material/mwc-dialog": "canary",
-    "@material/mwc-formfield": "^0.20.0",
+    "@material/mwc-fab": "canary",
-    "@material/mwc-icon-button": "^0.20.0",
+    "@material/mwc-formfield": "canary",
-    "@material/mwc-list": "^0.20.0",
+    "@material/mwc-icon-button": "canary",
-    "@material/mwc-menu": "^0.20.0",
+    "@material/mwc-list": "canary",
-    "@material/mwc-radio": "^0.20.0",
+    "@material/mwc-menu": "canary",
-    "@material/mwc-ripple": "^0.20.0",
+    "@material/mwc-radio": "canary",
-    "@material/mwc-switch": "^0.20.0",
+    "@material/mwc-ripple": "canary",
-    "@material/mwc-tab": "^0.20.0",
+    "@material/mwc-switch": "canary",
-    "@material/mwc-tab-bar": "^0.20.0",
+    "@material/mwc-tab": "canary",
-    "@material/top-app-bar": "=9.0.0-canary.1c156d69d.0",
+    "@material/mwc-tab-bar": "canary",
+    "@material/top-app-bar": "=12.0.0-canary.1a8d06483.0",
     "@mdi/js": "5.9.55",
     "@mdi/svg": "5.9.55",
     "@polymer/app-layout": "^3.0.2",
@@ -115,9 +116,7 @@
     "js-yaml": "^3.13.1",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit-element": "2.5.1",
+    "lit": "^2.0.0-rc.2",
-    "lit-html": "1.4.1",
-    "lit-virtualizer": "^0.4.2",
     "marked": "2.0.0",
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",
@@ -241,8 +240,8 @@
   "resolutions": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
-    "lit-html": "1.4.1",
+    "lit-html": "2.0.0-rc.3",
-    "lit-element": "2.5.1"
+    "lit-element": "3.0.0-rc.2"
   },
   "main": "src/home-assistant.js",
   "husky": {

src/auth/ha-auth-flow.ts

@@ -3,12 +3,11 @@ import {
   css,
   CSSResultGroup,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import "../components/ha-form/ha-form";
 import "../components/ha-markdown";
 import { AuthProvider } from "../data/auth";

src/auth/ha-authorize.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-  css,
+import { property, state } from "lit/decorators";
-  CSSResultGroup,
-  html,
-  state,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
 import punycode from "punycode";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";

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

@@ -1,6 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
 import { AuthProvider } from "../data/auth";

src/common/decorators/local-storage.ts

@@ -1,5 +1,5 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { PropertyDeclaration, ReactiveElement } from "lit-element";
+import { PropertyDeclaration, ReactiveElement } from "lit";
 import type { ClassElement } from "../../types";
 
 type Callback = (oldValue: any, newValue: any) => void;

src/common/decorators/restore-scroll.ts

@@ -1,4 +1,4 @@
-import type { LitElement } from "lit-element";
+import type { LitElement } from "lit";
 import type { ClassElement } from "../../types";
 
 export const restoreScroll = (selector: string): any => (

src/common/dom/dynamic-element-directive.ts

@@ -1,4 +1,4 @@
-import { noChange } from "lit-html";
+import { noChange } from "lit";
 import {
   ChildPart,
   Directive,
@@ -6,8 +6,7 @@ import {
   DirectiveParameters,
   PartInfo,
   PartType,
-  // eslint-disable-next-line import/extensions
+} from "lit/directive";
-} from "lit-html/directive.js";
 
 export const dynamicElement = directive(
   class extends Directive {

src/common/image/extract_color.ts

@@ -1,7 +1,7 @@
 // We import the minified bundle because the unminified bundle
 // has some quirks that break wds. See #7784 for unminified version.
-import Vibrant from "node-vibrant/dist/vibrant";
 import type { Swatch, Vec3 } from "@vibrant/color";
+import Vibrant from "node-vibrant/dist/vibrant";
 import { getRGBContrastRatio } from "../color/rgb";
 
 const CONTRAST_RATIO = 4.5;

src/common/search/search-input.ts

@@ -1,15 +1,9 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
+import { classMap } from "lit/directives/class-map";
-  customElement,
-  LitElement,
-  property,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
 import "../../components/ha-svg-icon";
 import { fireEvent } from "../dom/fire_event";
 

src/common/style/icon_color_css.ts

@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const iconColorCSS = css`
   ha-icon[data-domain="alert"][data-state="on"],

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

@@ -1,11 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { property, query } from "lit/decorators";
-  CSSResultGroup,
-  html,
-  LitElement,
-  property,
-  query,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "./ha-progress-button";

src/components/buttons/ha-progress-button.ts

@@ -1,15 +1,7 @@
 import "@material/mwc-button";
 import type { Button } from "@material/mwc-button";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import "../ha-circular-progress";
 
 @customElement("ha-progress-button")

src/components/data-table/ha-data-table.ts

@@ -1,21 +1,23 @@
+import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import deepClone from "deep-clone-simple";
 import {
   css,
   CSSResultGroup,
-  customElement,
-  eventOptions,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { classMap } from "lit-html/directives/class-map";
+import {
-import { ifDefined } from "lit-html/directives/if-defined";
+  customElement,
-import { styleMap } from "lit-html/directives/style-map";
+  property,
-import { scroll } from "lit-virtualizer";
+  state,
+  query,
+  eventOptions,
+} from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -167,6 +169,10 @@ export class HaDataTable extends LitElement {
     }
   }
 
+  protected firstUpdated() {
+    this.updateComplete.then(() => this._calcTableHeight());
+  }
+
   protected updated(properties: PropertyValues) {
     super.updated(properties);
 
@@ -333,6 +339,8 @@ export class HaDataTable extends LitElement {
                 >
                   ${scroll({
                     items: this._items,
+                    layout: Layout1d,
+                    // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
                       if (row.append) {
                         return html`

src/components/date-range-picker.ts

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import wrap from "@vue/web-component-wrapper";
-import { customElement } from "lit-element";
 import Vue from "vue";
 import DateRangePicker from "vue2-daterange-picker";
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";

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

@@ -10,14 +10,12 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";

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

@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceAction,
   fetchDeviceActions,

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

@@ -2,15 +2,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { property, state } from "lit/decorators";
-  CSSResultGroup,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceAutomation,

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

@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceCondition,
   fetchDeviceConditions,

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

@@ -4,15 +4,12 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -34,8 +31,8 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import type { HaComboBox } from "../ha-combo-box";
 import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 
 interface Device {
   name: string;

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

@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceTrigger,
   fetchDeviceTriggers,

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

@@ -1,10 +1,5 @@
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property } from "lit/decorators";
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";

src/components/entity/ha-battery-icon.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { batteryIcon } from "../../common/entity/battery_icon";
 import "../ha-icon";
 

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

@@ -1,11 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property } from "lit/decorators";
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { PolymerChangedEvent } from "../../polymer-types";

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

@@ -7,14 +7,12 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";

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

@@ -8,14 +8,12 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";

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

@@ -3,21 +3,20 @@ import {
   css,
   CSSResultGroup,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
+import "../ha-formfield";
 import "../ha-icon-button";
 import "../ha-switch";
-import "../ha-formfield";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&

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

@@ -2,15 +2,13 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { classMap } from "lit-html/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";

src/components/entity/state-badge.ts

@@ -3,14 +3,13 @@ import {
   css,
   CSSResultGroup,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { property, state } from "lit/decorators";
-import { styleMap } from "lit-html/directives/style-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateIcon } from "../../common/entity/state_icon";

src/components/entity/state-info.ts

@@ -1,14 +1,7 @@
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { HomeAssistant } from "../../types";

src/components/ha-addon-picker.ts

@@ -1,12 +1,5 @@
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state, query } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { compare } from "../common/string/compare";

src/components/ha-analytics-learn-more.ts

@@ -1,4 +1,4 @@
-import { html } from "lit-element";
+import { html } from "lit";
 import { HomeAssistant } from "../types";
 import { documentationUrl } from "../util/documentation-url";
 

src/components/ha-analytics.ts

@@ -1,13 +1,6 @@
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";

src/components/ha-area-picker.ts

@@ -9,15 +9,12 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";

src/components/ha-attributes.ts

@@ -1,18 +1,11 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
+import { until } from "lit/directives/until";
-  customElement,
+import { haStyle } from "../resources/styles";
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { until } from "lit-html/directives/until";
 import hassAttributeUtil, {
   formatAttributeName,
 } from "../util/hass-attributes-util";
-import { haStyle } from "../resources/styles";
 
 let jsYamlPromise: Promise<typeof import("js-yaml")>;
 

src/components/ha-bar.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, LitElement, svg, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  LitElement,
-  property,
-  svg,
-  TemplateResult,
-} from "lit-element";
 import {
   getValueInPercentage,
   normalize,

src/components/ha-blueprint-picker.ts

@@ -1,15 +1,8 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { compare } from "../common/string/compare";

src/components/ha-button-menu.ts

@@ -1,15 +1,7 @@
 import "@material/mwc-menu";
 import type { Corner, Menu } from "@material/mwc-menu";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
   @property() public corner: Corner = "TOP_START";

src/components/ha-button-related-filter-menu.ts

@@ -1,26 +1,18 @@
 import "@material/mwc-icon-button";
 import type { Corner } from "@material/mwc-menu";
-import { mdiFilterVariant } from "@mdi/js";
-import {
-  css,
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariant } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
-import "./ha-svg-icon";
-import "./ha-area-picker";
-import "./device/ha-device-picker";
-import "./entity/ha-entity-picker";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { computeDeviceName } from "../data/device_registry";
+import { findRelated, RelatedResult } from "../data/search";
+import type { HomeAssistant } from "../types";
+import "./device/ha-device-picker";
+import "./entity/ha-entity-picker";
+import "./ha-area-picker";
+import "./ha-svg-icon";
 
 declare global {
   // for fire event

src/components/ha-button-toggle-group.ts

@@ -1,15 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
+import { styleMap } from "lit/directives/style-map";
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
 import "./ha-svg-icon";

src/components/ha-camera-stream.ts

@@ -1,18 +1,16 @@
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
 import {
   CameraEntity,
   CAMERA_SUPPORT_STREAM,

src/components/ha-card.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 
 @customElement("ha-card")
 export class HaCard extends LitElement {

src/components/ha-checkbox.ts

@@ -1,12 +1,8 @@
-import "@material/mwc-checkbox";
+import { Checkbox } from "@material/mwc-checkbox";
-import type { Checkbox } from "@material/mwc-checkbox";
+import { customElement } from "lit/decorators";
-import { customElement } from "lit-element";
-import type { Constructor } from "../types";
-
-const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
 
 @customElement("ha-checkbox")
-export class HaCheckbox extends MwcCheckbox {
+export class HaCheckbox extends Checkbox {
   public firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");

src/components/ha-chip-set.ts

@@ -3,13 +3,12 @@ import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   TemplateResult,
   unsafeCSS,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-chip";
 

src/components/ha-chip.ts

@@ -1,17 +1,15 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
-import "./ha-icon";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   TemplateResult,
   unsafeCSS,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import "./ha-icon";
 
 declare global {
   // for fire event
@@ -34,7 +32,7 @@ export class HaChip extends LitElement {
               <slot name="icon"></slot>
             </div>`
           : null}
-        <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
+        <div class="mdc-chip__ripple"></div>
         <span role="gridcell">
           <span role="button" tabindex="0" class="mdc-chip__primary-action">
             <span class="mdc-chip__text"><slot></slot></span>

src/components/ha-circular-progress.ts

@@ -1,5 +1,5 @@
 import { CircularProgress } from "@material/mwc-circular-progress";
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
 // @ts-ignore

src/components/ha-climate-state.ts

@@ -1,13 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { formatNumber } from "../common/string/format_number";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
 import type { HomeAssistant } from "../types";

src/components/ha-code-editor.ts

@@ -1,13 +1,6 @@
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
-import {
+import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  state,
-  property,
-  PropertyValues,
-  ReactiveElement,
-  css,
-  CSSResultGroup,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
 

src/components/ha-color-picker.js

@@ -1,8 +1,8 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { EventsMixin } from "../mixins/events-mixin";
 import { hs2rgb, rgb2hs } from "../common/color/convert-color";
+import { EventsMixin } from "../mixins/events-mixin";
 /**
  * Color-picker custom element
  *

src/components/ha-combo-box.ts

@@ -5,17 +5,8 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";

src/components/ha-cover-controls.ts

@@ -2,15 +2,13 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { classMap } from "lit-html/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";

src/components/ha-cover-tilt-controls.ts

@@ -2,15 +2,13 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { classMap } from "lit-html/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
 import CoverEntity from "../util/cover-model";

src/components/ha-date-input.ts

@@ -1,17 +1,9 @@
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
-import {
-  css,
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
-import "@polymer/paper-input/paper-input";
-import { fireEvent } from "../common/dom/fire_event";
 import { mdiCalendar } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
 import "./ha-svg-icon";
 
 const i18n = {

src/components/ha-date-range-picker.ts

@@ -7,13 +7,12 @@ import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../common/datetime/format_date_time";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";

src/components/ha-dialog.ts

@@ -1,14 +1,11 @@
-import "@material/mwc-dialog";
+import { Dialog } from "@material/mwc-dialog";
-import type { Dialog } from "@material/mwc-dialog";
-import { style } from "@material/mwc-dialog/mwc-dialog-css";
 import { mdiClose } from "@mdi/js";
-import { css, CSSResultGroup, customElement, html } from "lit-element";
+import { css, CSSResultGroup, html } from "lit";
+import { customElement } from "lit/decorators";
 import { computeRTLDirection } from "../common/util/compute_rtl";
-import type { Constructor, HomeAssistant } from "../types";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
-const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
-
 export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
   <span class="header_title">${title}</span>
   <mwc-icon-button
@@ -22,7 +19,8 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
 `;
 
 @customElement("ha-dialog")
-export class HaDialog extends MwcDialog {
+// @ts-expect-error
+export class HaDialog extends Dialog {
   public scrollToPos(x: number, y: number) {
     this.contentElement.scrollTo(x, y);
   }
@@ -33,7 +31,7 @@ export class HaDialog extends MwcDialog {
 
   protected static get styles(): CSSResultGroup {
     return [
-      style,
+      Dialog.styles,
       css`
         .mdc-dialog {
           --mdc-dialog-scroll-divider-color: var(--divider-color);

src/components/ha-expansion-panel.ts

@@ -1,15 +1,7 @@
 import { mdiChevronDown } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query } from "lit/decorators";
-  CSSResultGroup,
+import { classMap } from "lit/directives/class-map";
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-svg-icon";
 

src/components/ha-fab.ts

@@ -1,12 +1,8 @@
-import "@material/mwc-fab";
+import { Fab } from "@material/mwc-fab";
-import type { Fab } from "@material/mwc-fab";
+import { customElement } from "lit/decorators";
-import { customElement } from "lit-element";
-import { Constructor } from "../types";
-
-const MwcFab = customElements.get("mwc-fab") as Constructor<Fab>;
 
 @customElement("ha-fab")
-export class HaFab extends MwcFab {
+export class HaFab extends Fab {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");

src/components/ha-file-upload.ts

@@ -2,18 +2,9 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
-import {
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-  css,
+import { customElement, property, state, query } from "lit/decorators";
-  customElement,
+import { classMap } from "lit/directives/class-map";
-  html,
-  state,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-circular-progress";
 import "./ha-svg-icon";

src/components/ha-form/ha-form-boolean.ts

@@ -1,15 +1,7 @@
 import "@polymer/paper-checkbox/paper-checkbox";
 import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   HaFormBooleanData,

src/components/ha-form/ha-form-constant.ts

@@ -1,13 +1,12 @@
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaFormConstantSchema, HaFormElement } from "./ha-form";
 

src/components/ha-form/ha-form-float.ts

@@ -1,13 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, query } from "lit/decorators";
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./ha-form";
 

src/components/ha-form/ha-form-integer.ts

@@ -2,16 +2,8 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-slider/paper-slider";
 import type { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
 import "../ha-slider";

src/components/ha-form/ha-form-multi_select.ts

@@ -4,17 +4,8 @@ import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-ripple/paper-ripple";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-icon";
 import {

src/components/ha-form/ha-form-positive_time_period_dict.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, query } from "lit/decorators";
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import "../ha-time-input";
 import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./ha-form";
 

src/components/ha-form/ha-form-select.ts

@@ -1,15 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-paper-dropdown-menu";
 import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";

src/components/ha-form/ha-form-string.ts

@@ -1,17 +1,9 @@
+import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-svg-icon";
 import type {
@@ -19,7 +11,6 @@ import type {
   HaFormStringData,
   HaFormStringSchema,
 } from "./ha-form";
-import "@material/mwc-icon-button/mwc-icon-button";
 
 @customElement("ha-form-string")
 export class HaFormString extends LitElement implements HaFormElement {

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

@@ -1,11 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaTimeData } from "../ha-time-input";

src/components/ha-formfield.ts

@@ -1,18 +1,12 @@
-import "@material/mwc-formfield";
+import { Formfield } from "@material/mwc-formfield";
-import type { Formfield } from "@material/mwc-formfield";
+import { css, CSSResultGroup } from "lit";
-import { style } from "@material/mwc-formfield/mwc-formfield-css";
+import { customElement } from "lit/decorators";
-import { css, CSSResultGroup, customElement } from "lit-element";
-import { Constructor } from "../types";
-
-const MwcFormfield = customElements.get(
-  "mwc-formfield"
-) as Constructor<Formfield>;
-
 @customElement("ha-formfield")
-export class HaFormfield extends MwcFormfield {
+// @ts-expect-error
+export class HaFormfield extends Formfield {
   protected static get styles(): CSSResultGroup {
     return [
-      style,
+      Formfield.styles,
       css`
         :host(:not([alignEnd])) ::slotted(ha-switch) {
           margin-right: 10px;

src/components/ha-gauge.ts

@@ -1,14 +1,7 @@
-import {
+import { css, LitElement, PropertyValues, svg } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  customElement,
+import { ifDefined } from "lit/directives/if-defined";
-  state,
+import { styleMap } from "lit/directives/style-map";
-  LitElement,
-  property,
-  PropertyValues,
-  svg,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendTranslationData } from "../data/translation";

src/components/ha-header-bar.ts

@@ -1,6 +1,7 @@
 // @ts-ignore
 import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
-import { css, customElement, html, LitElement, unsafeCSS } from "lit-element";
+import { css, html, LitElement, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {

src/components/ha-help-tooltip.ts

@@ -1,13 +1,7 @@
 import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
+import { css, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "./ha-svg-icon";
 
 @customElement("ha-help-tooltip")

src/components/ha-hls-player.ts

@@ -2,15 +2,12 @@ import type HlsType from "hls.js";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";

src/components/ha-icon-button-arrow-next.ts

@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 

src/components/ha-icon-button-arrow-prev.ts

@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 

src/components/ha-icon-button-next.ts

@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 

src/components/ha-icon-button-prev.ts

@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 

src/components/ha-icon-button.ts

@@ -1,13 +1,6 @@
 import "@material/mwc-icon-button";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "./ha-icon";
 
 @customElement("ha-icon-button")

src/components/ha-icon-input.ts

@@ -1,12 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
+import { css, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon";
 

src/components/ha-icon.ts

@@ -2,14 +2,12 @@ import "@polymer/iron-icon/iron-icon";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { debounce } from "../common/util/debounce";
 import { CustomIcon, customIconsets } from "../data/custom_iconsets";

src/components/ha-label-badge.ts

@@ -3,11 +3,11 @@ import {
   CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { classMap } from "lit-html/directives/class-map";
+import { property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "./ha-icon";
 
 class HaLabelBadge extends LitElement {

src/components/ha-markdown-element.ts

@@ -1,4 +1,5 @@
-import { customElement, property, ReactiveElement } from "lit-element";
+import { ReactiveElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 

src/components/ha-markdown.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "./ha-markdown-element";
 
 @customElement("ha-markdown")

src/components/ha-menu-button.ts

@@ -1,16 +1,8 @@
 import "@material/mwc-icon-button";
 import { mdiMenu } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";

src/components/ha-picture-upload.ts

@@ -2,14 +2,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiImagePlus } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import { createImage, generateImageThumbnailUrl } from "../data/image";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";

src/components/ha-radio.ts

@@ -1,12 +1,7 @@
-import "@material/mwc-radio";
+import { Radio } from "@material/mwc-radio";
-import type { Radio } from "@material/mwc-radio";
+import { customElement } from "lit/decorators";
-import { customElement } from "lit-element";
-import type { Constructor } from "../types";
-
-const MwcRadio = customElements.get("mwc-radio") as Constructor<Radio>;
-
 @customElement("ha-radio")
-export class HaRadio extends MwcRadio {
+export class HaRadio extends Radio {
   public firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");

src/components/ha-related-items.ts

@@ -2,14 +2,12 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import {
   AreaRegistryEntry,

src/components/ha-relative-time.ts

@@ -1,9 +1,5 @@
-import {
+import { PropertyValues, ReactiveElement } from "lit";
-  customElement,
+import { customElement, property } from "lit/decorators";
-  property,
-  PropertyValues,
-  ReactiveElement,
-} from "lit-element";
 import relativeTime from "../common/datetime/relative_time";
 import type { HomeAssistant } from "../types";
 

src/components/ha-selector/ha-selector-action.ts

@@ -1,11 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
 import { Action } from "../../data/script";
 import { ActionSelector } from "../../data/selector";
 import "../../panels/config/automation/action/ha-automation-action";

src/components/ha-selector/ha-selector-addon.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { AddonSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-addon-picker";

src/components/ha-selector/ha-selector-area.ts

@@ -1,4 +1,5 @@
-import { customElement, html, state, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import { EntityRegistryEntry } from "../../data/entity_registry";

src/components/ha-selector/ha-selector-boolean.ts

@@ -1,11 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";

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

@@ -1,4 +1,5 @@
-import { customElement, html, state, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import { DeviceSelector } from "../../data/selector";

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

@@ -1,5 +1,6 @@
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { customElement, html, state, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { subscribeEntityRegistry } from "../../data/entity_registry";
 import { EntitySelector } from "../../data/selector";

src/components/ha-selector/ha-selector-number.ts

@@ -1,13 +1,7 @@
 import "@polymer/paper-input/paper-input";
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
+import { classMap } from "lit/directives/class-map";
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { NumberSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";

src/components/ha-selector/ha-selector-object.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-yaml-editor";

src/components/ha-selector/ha-selector-select.ts

@@ -1,14 +1,8 @@
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
 import { SelectSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
 import "../ha-paper-dropdown-menu";
 
 @customElement("ha-selector-select")

src/components/ha-selector/ha-selector-target.ts

@@ -8,15 +8,8 @@ import {
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-} from "lit-element";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import {

src/components/ha-selector/ha-selector-text.ts

@@ -1,9 +1,10 @@
-import { customElement, html, LitElement, property } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-textarea";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
 
 @customElement("ha-selector-text")
 export class HaTextSelector extends LitElement {

src/components/ha-selector/ha-selector-time.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { TimeSelector } from "../../data/selector";

src/components/ha-selector/ha-selector.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { Selector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
@@ -9,11 +10,11 @@ import "./ha-selector-boolean";
 import "./ha-selector-device";
 import "./ha-selector-entity";
 import "./ha-selector-number";
-import "./ha-selector-target";
-import "./ha-selector-time";
 import "./ha-selector-object";
-import "./ha-selector-text";
 import "./ha-selector-select";
+import "./ha-selector-target";
+import "./ha-selector-text";
+import "./ha-selector-time";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {

src/components/ha-service-control.ts

@@ -4,17 +4,8 @@ import {
   HassServices,
   HassServiceTarget,
 } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-  css,
+import { customElement, property, state, query } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";

src/components/ha-service-picker.ts

@@ -1,4 +1,5 @@
-import { html, state, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";

src/components/ha-settings-row.ts

@@ -1,13 +1,6 @@
 import "@polymer/paper-item/paper-item-body";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 
 @customElement("ha-settings-row")
 export class HaSettingsRow extends LitElement {

src/components/ha-sidebar.ts

@@ -15,18 +15,15 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResultGroup,
-  customElement,
-  eventOptions,
-  html,
-  state,
-  LitElement,
-  property,
-  PropertyValues,
   CSSResult,
-} from "lit-element";
+  CSSResultGroup,
-import { classMap } from "lit-html/directives/class-map";
+  html,
-import { guard } from "lit-html/directives/guard";
+  LitElement,
+  PropertyValues,
+} from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { guard } from "lit/directives/guard";
 import memoizeOne from "memoize-one";
 import { LocalStorage } from "../common/decorators/local-storage";
 import { fireEvent } from "../common/dom/fire_event";

src/components/ha-svg-icon.ts

@@ -1,12 +1,5 @@
-import {
+import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
-  css,
+import { customElement, property } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  LitElement,
-  property,
-  svg,
-  SVGTemplateResult,
-} from "lit-element";
 
 @customElement("ha-svg-icon")
 export class HaSvgIcon extends LitElement {

src/components/ha-switch.ts

@@ -1,14 +1,10 @@
-import "@material/mwc-switch";
+import { Switch } from "@material/mwc-switch";
-import type { Switch } from "@material/mwc-switch";
+import { css, CSSResultGroup } from "lit";
-import { style } from "@material/mwc-switch/mwc-switch-css";
+import { customElement, property } from "lit/decorators";
-import { css, CSSResultGroup, customElement, property } from "lit-element";
 import { forwardHaptic } from "../data/haptics";
-import { Constructor } from "../types";
-
-const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
-
 @customElement("ha-switch")
-export class HaSwitch extends MwcSwitch {
+// @ts-expect-error
+export class HaSwitch extends Switch {
   // Generate a haptic vibration.
   // Only set to true if the new value of the switch is applied right away when toggling.
   // Do not add haptic when a user is required to press save.
@@ -27,9 +23,9 @@ export class HaSwitch extends MwcSwitch {
     });
   }
 
-  protected static get styles(): CSSResultGroup {
+  static get styles(): CSSResultGroup {
     return [
-      style,
+      Switch.styles,
       css`
         .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
           background-color: var(--switch-checked-button-color);

src/components/ha-tab.ts

@@ -1,19 +1,15 @@
 import type { Ripple } from "@material/mwc-ripple";
 import "@material/mwc-ripple/mwc-ripple";
 import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import {
-  css,
-  CSSResultGroup,
   customElement,
   eventOptions,
-  html,
-  state,
-  LitElement,
   property,
   queryAsync,
-  TemplateResult,
+  state,
-} from "lit-element";
+} from "lit/decorators";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { ifDefined } from "lit/directives/if-defined";
 import "./ha-icon";
 import "./ha-svg-icon";
 

src/components/ha-tabs.ts

@@ -2,7 +2,7 @@ import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-ic
 import type { PaperTabElement } from "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import type { PaperTabsElement } from "@polymer/paper-tabs/paper-tabs";
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { Constructor } from "../types";
 
 const PaperTabs = customElements.get(

src/components/ha-target-picker.ts

@@ -14,18 +14,9 @@ import {
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
-  css,
+import { customElement, property, state, query } from "lit/decorators";
-  CSSResultGroup,
+import { classMap } from "lit/directives/class-map";
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  query,
-  unsafeCSS,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { ensureArray } from "../common/ensure-array";
 import { computeDomain } from "../common/entity/compute_domain";

src/components/ha-time-input.ts

@@ -1,11 +1,5 @@
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, query } from "lit/decorators";
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import "./paper-time-input";
 

src/components/ha-yaml-editor.ts

@@ -1,12 +1,6 @@
 import { safeDump, safeLoad } from "js-yaml";
-import {
+import { html, LitElement, TemplateResult } from "lit";
-  customElement,
+import { customElement, property, state } from "lit/decorators";
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-code-editor";
 

src/components/map/ha-location-editor.ts

@@ -11,13 +11,12 @@ import {
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   LeafletModuleType,

src/components/map/ha-locations-editor.ts

@@ -11,13 +11,12 @@ import {
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   LeafletModuleType,

src/components/map/ha-map.ts

@@ -2,13 +2,12 @@ import { Circle, Layer, Map, Marker, TileLayer } from "leaflet";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import {
   LeafletModuleType,
   replaceTileLayer,

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

@@ -1,13 +1,5 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
+import { customElement, property, state } from "lit/decorators";
-  CSSResultGroup,
-  customElement,
-  html,
-  state,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import type {
   MediaPickedEvent,

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

@@ -8,19 +8,21 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
   CSSResultGroup,
-  customElement,
-  eventOptions,
   html,
-  state,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
-import { classMap } from "lit-html/directives/class-map";
+import {
-import { ifDefined } from "lit-html/directives/if-defined";
+  customElement,
-import { styleMap } from "lit-html/directives/style-map";
+  property,
+  state,
+  query,
+  eventOptions,
+} from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";

src/components/state-history-charts.ts

@@ -1,19 +1,18 @@
-import "./ha-circular-progress";
 import {
   css,
   CSSResultGroup,
-  customElement,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { HistoryResult } from "../data/history";
+import type { HomeAssistant } from "../types";
+import "./ha-circular-progress";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import type { HomeAssistant } from "../types";
-import { HistoryResult } from "../data/history";
 
 @customElement("state-history-charts")
 class StateHistoryCharts extends LitElement {

src/components/trace/ha-timeline.ts

@@ -1,13 +1,6 @@
 import { mdiCircleOutline } from "@mdi/js";
-import {
+import { css, html, LitElement, TemplateResult } from "lit";
-  LitElement,
+import { customElement, property, state } from "lit/decorators";
-  customElement,
-  html,
-  css,
-  property,
-  TemplateResult,
-  state,
-} from "lit-element";
 import { buttonLinkStyle } from "../../resources/styles";
 import "../ha-svg-icon";