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,