Add and fix stylistic eslint rules (#23735)

* Fix stylistic eslint rules

* Fix eslint issues

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

@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list";
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -208,8 +208,7 @@ class HcCast extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     .center-item {
       display: flex;
       justify-content: space-around;
@@ -270,7 +269,6 @@ class HcCast extends LitElement {
       color: var(--primary-color);
     }
   `;
-  }
 }
 
 declare global {

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

@@ -13,7 +13,7 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -293,8 +293,7 @@ export class HcConnect extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     .card-content a {
       color: var(--primary-color);
     }
@@ -322,7 +321,6 @@ export class HcConnect extends LitElement {
       width: 100%;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -63,8 +63,7 @@ class HcLayout extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: flex;
       min-height: 100%;
@@ -152,7 +151,6 @@ class HcLayout extends LitElement {
       }
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../../src/types";
@@ -24,8 +24,7 @@ class HcLaunchScreen extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: block;
       height: 100vh;
@@ -48,7 +47,6 @@ class HcLaunchScreen extends LitElement {
       color: #1d2126;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,10 +1,4 @@
-import {
-  css,
-  type CSSResultGroup,
-  html,
-  LitElement,
-  type TemplateResult,
-} from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -117,8 +111,7 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     hui-view-container {
       display: flex;
       position: relative;
@@ -130,7 +123,6 @@ class HcLovelace extends LitElement {
       max-width: 100%;
     }
   `;
-  }
 }
 
 export interface CastViewChanged {

demo/src/configs/demo-configs.ts

@@ -3,7 +3,7 @@ import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { energyEntities } from "../stubs/entities";
 import type { DemoConfig } from "./types";
 
-export const demoConfigs: Array<() => Promise<DemoConfig>> = [
+export const demoConfigs: (() => Promise<DemoConfig>)[] = [
   () => import("./sections").then((mod) => mod.demoSections),
   () => import("./arsaboo").then((mod) => mod.demoArsaboo),
   () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),

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

@@ -1,5 +1,4 @@
 import { mdiTelevision } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -67,8 +66,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: flex;
       align-items: center;
@@ -97,7 +95,6 @@ class CastDemoRow extends LitElement implements LovelaceRow {
       width: 24px;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -32,6 +32,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return this._hidden ? 0 : 2;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   public setConfig(_config: LovelaceCardConfig) {}
 
   protected render() {

demo/src/stubs/history.ts

@@ -131,6 +131,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
         });
       }, 1);
 
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       return () => {};
     }
   );

demo/src/stubs/persistent_notification.ts

@@ -15,6 +15,7 @@ export const mockPersistentNotification = (hass: MockHomeAssistant) => {
         },
       },
     } as PersistentNotificationMessage);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
 };

demo/src/stubs/template.ts

@@ -11,6 +11,7 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       result: msg.template,
       listeners: { all: false, domains: [], entities: [], time: false },
     });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
 };

demo/src/stubs/todo.ts

@@ -22,5 +22,6 @@ export const mockTodo = (hass: MockHomeAssistant) => {
       },
     ] as TodoItem[],
   }));
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };

eslint.config.mjs

@@ -20,6 +20,7 @@ export default [
     "airbnb-base",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
     "plugin:wc/recommended",
     "plugin:lit/all",
     "plugin:lit-a11y/recommended",

gallery/src/pages/automation/describe-action.ts

@@ -177,8 +177,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     this._action = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -196,7 +195,6 @@ export class DemoAutomationDescribeAction extends LitElement {
       width: 50%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/automation/describe-condition.ts

@@ -98,8 +98,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
     this._condition = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -117,7 +116,6 @@ export class DemoAutomationDescribeCondition extends LitElement {
       width: 50%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/automation/describe-trigger.ts

@@ -121,8 +121,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -140,7 +139,6 @@ export class DemoAutomationDescribeTrigger extends LitElement {
       width: 50%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/automation/trace-timeline.ts

@@ -58,8 +58,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     hass.updateTranslations("config", "en");
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px;
@@ -73,7 +72,6 @@ export class DemoAutomationTraceTimeline extends LitElement {
       right: 0;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/automation/trace.ts

@@ -68,8 +68,7 @@ export class DemoAutomationTrace extends LitElement {
     this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px;
@@ -89,7 +88,6 @@ export class DemoAutomationTrace extends LitElement {
       right: 0;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-alert.ts

@@ -177,8 +177,7 @@ export class DemoHaAlert extends LitElement {
     );
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     :host {
       display: flex;
       flex-direction: row;
@@ -216,7 +215,6 @@ export class DemoHaAlert extends LitElement {
       --mdc-theme-primary: var(--primary-text-color);
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-bar.ts

@@ -63,8 +63,7 @@ export class DemoHaBar extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -76,7 +75,6 @@ export class DemoHaBar extends LitElement {
       --ha-bar-primary-color: var(--error-color);
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-chips.ts

@@ -103,8 +103,7 @@ export class DemoHaChips extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -115,7 +114,6 @@ export class DemoHaChips extends LitElement {
       align-items: flex-start;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-circular-progress.ts

@@ -48,14 +48,12 @@ export class DemoHaCircularProgress extends LitElement {
       ></ha-card>`;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-button.ts

@@ -14,12 +14,12 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-control-button-group";
 
-type Button = {
+interface Button {
   label: string;
   icon?: string;
   class?: string;
   disabled?: boolean;
-};
+}
 
 const buttons: Button[] = [
   {
@@ -35,10 +35,10 @@ const buttons: Button[] = [
   },
 ];
 
-type ButtonGroup = {
+interface ButtonGroup {
   vertical?: boolean;
   class?: string;
-};
+}
 
 const buttonGroups: ButtonGroup[] = [
   {},
@@ -137,8 +137,7 @@ export class DemoHaBarButton extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -183,7 +182,6 @@ export class DemoHaBarButton extends LitElement {
       margin-right: 4px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-circular-slider.ts

@@ -133,8 +133,7 @@ export class DemoHaCircularSlider extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -165,7 +164,6 @@ export class DemoHaCircularSlider extends LitElement {
       align-items: center;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -73,8 +73,7 @@ export class DemoHarControlNumberButtons extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -98,7 +97,6 @@ export class DemoHarControlNumberButtons extends LitElement {
       --control-number-buttons-border-radius: 36px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-select-menu.ts

@@ -8,19 +8,19 @@ import "../../../../src/components/ha-control-select-menu";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 
-type SelectMenuOptions = {
+interface SelectMenuOptions {
   label: string;
   value: string;
   icon?: string;
-};
+}
 
-type SelectMenu = {
+interface SelectMenu {
   label: string;
   icon: string;
   class?: string;
   disabled?: boolean;
   options: SelectMenuOptions[];
-};
+}
 
 const selects: SelectMenu[] = [
   {
@@ -112,8 +112,7 @@ export class DemoHaControlSelectMenu extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -137,7 +136,6 @@ export class DemoHaControlSelectMenu extends LitElement {
       width: 100px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-select.ts

@@ -168,8 +168,7 @@ export class DemoHaControlSelect extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -203,7 +202,6 @@ export class DemoHaControlSelect extends LitElement {
       margin-right: 4px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-slider.ts

@@ -131,8 +131,7 @@ export class DemoHaBarSlider extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -167,7 +166,6 @@ export class DemoHaBarSlider extends LitElement {
       margin-right: 4px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-switch.ts

@@ -99,8 +99,7 @@ export class DemoHaControlSwitch extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -136,7 +135,6 @@ export class DemoHaControlSwitch extends LitElement {
       margin-right: 4px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-expansion-panel.ts

@@ -143,13 +143,11 @@ export class DemoHaExpansionPanel extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-expansion-panel {
       margin: -16px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-faded.ts

@@ -61,14 +61,12 @@ export class DemoHaFaded extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-hs-color-picker.ts

@@ -91,8 +91,7 @@ export class DemoHaHsColorPicker extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -111,7 +110,6 @@ export class DemoHaHsColorPicker extends LitElement {
       margin: 0 0 12px 0;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-label-badge.ts

@@ -95,8 +95,7 @@ export class DemoHaLabelBadge extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       max-width: 600px;
       margin: 24px auto;
@@ -113,7 +112,6 @@ export class DemoHaLabelBadge extends LitElement {
       align-items: center;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/components/ha-tip.ts

@@ -48,8 +48,7 @@ export class DemoHaTip extends LitElement {
     );
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     :host {
       display: flex;
       flex-direction: row;
@@ -68,7 +67,6 @@ export class DemoHaTip extends LitElement {
       margin: 24px auto;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-numeric.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-seconds.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-short-year.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-short.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeDateTimeShort extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeDateTime extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeDateTime extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/date.ts

@@ -90,8 +90,7 @@ export class DemoDateTimeDate extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     .header {
       font-weight: bold;
     }
@@ -111,7 +110,6 @@ export class DemoDateTimeDate extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/time-seconds.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeTimeSeconds extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/time-weekday.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeTimeWeekday extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/date-time/time.ts

@@ -100,8 +100,7 @@ export class DemoDateTimeTime extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-control-select {
       max-width: 800px;
       margin: 12px auto;
@@ -125,7 +124,6 @@ export class DemoDateTimeTime extends LitElement {
       width: 20%;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/misc/entity-state.ts

@@ -321,13 +321,13 @@ function createEntity(
   };
 }
 
-type EntityRowData = {
+interface EntityRowData {
   stateObj: HassEntity;
   entity_id: string;
   state: string;
   device_class?: string;
   domain: string;
-};
+}
 
 function createRowData(stateObj: HassEntity): EntityRowData {
   return {
@@ -429,8 +429,7 @@ export class DemoEntityState extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     .color {
       display: block;
       height: 20px;
@@ -439,7 +438,6 @@ export class DemoEntityState extends LitElement {
       background-color: rgb(--color);
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/misc/ha-markdown.ts

@@ -76,14 +76,12 @@ export class DemoMiscMarkdown extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     ha-card {
       margin: 12px;
       padding: 12px;
     }
   `;
-  }
 }
 
 declare global {

gallery/src/pages/misc/integration-card.ts

@@ -135,12 +135,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [
   },
 ];
 
-const configEntries: Array<{
+const configEntries: {
   items: ConfigEntryExtended[];
   is_custom?: boolean;
   disabled?: boolean;
   highlight?: string;
-}> = [
+}[] = [
   { items: [loadedEntry] },
   { items: [configPanelEntry] },
   { items: [optionsFlowEntry] },
@@ -349,8 +349,7 @@ export class DemoIntegrationCard extends LitElement {
     this.isCloud = !this.isCloud;
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     .container {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -368,7 +367,6 @@ export class DemoIntegrationCard extends LitElement {
       display: block;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -211,8 +211,7 @@ export class HassioAddonStore extends LitElement {
     this._filter = e.detail.value;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     hassio-addon-repository {
       margin-top: 24px;
     }
@@ -239,7 +238,6 @@ export class HassioAddonStore extends LitElement {
       color: var(--primary-color);
     }
   `;
-  }
 }
 
 declare global {

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

@@ -299,7 +299,7 @@ class HassioAddonConfig extends LitElement {
     if (this.addon.schema && this._canShowSchema && !this._yamlMode) {
       this._valid = true;
       this._configHasChanged = true;
-      this._options! = ev.detail.value;
+      this._options = ev.detail.value;
     } else {
       this._configHasChanged = true;
       this._valid = ev.detail.isValid;

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

@@ -151,7 +151,7 @@ class HassioAddonNetwork extends LitElement {
 
   private async _configChanged(ev: CustomEvent): Promise<void> {
     this._configHasChanged = true;
-    this._config! = ev.detail.value;
+    this._config = ev.detail.value;
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {

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

@@ -1,5 +1,5 @@
 import { mdiHelpCircle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -64,8 +64,7 @@ class HassioCardContent extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       direction: ltr;
     }
@@ -143,7 +142,6 @@ class HassioCardContent extends LitElement {
       background-color: var(--error-color);
     }
   `;
-  }
 }
 
 declare global {

hassio/src/components/supervisor-backup-content.ts

@@ -1,5 +1,5 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
@@ -283,8 +283,7 @@ export class SupervisorBackupContent extends LitElement {
     this.homeAssistant = !this.homeAssistant;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     .partial-picker ha-formfield {
       display: block;
     }
@@ -328,7 +327,6 @@ export class SupervisorBackupContent extends LitElement {
       margin-top: 8px;
     }
   `;
-  }
 
   public backupDetails():
     | HassioPartialBackupCreateParams

hassio/src/components/supervisor-formfield-label.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -30,8 +30,7 @@ class SupervisorFormfieldLabel extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: flex;
       align-items: center;
@@ -52,7 +51,6 @@ class SupervisorFormfieldLabel extends LitElement {
       margin-inline-start: initial;
     }
   `;
-  }
 }
 
 declare global {

hassio/src/components/supervisor-metric.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -31,8 +31,7 @@ class SupervisorMetric extends LitElement {
     </ha-settings-row>`;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     ha-settings-row {
       padding: 0;
       height: 54px;
@@ -45,10 +44,7 @@ class SupervisorMetric extends LitElement {
       justify-content: space-between;
     }
     ha-bar {
-        --ha-bar-primary-color: var(
-          --hassio-bar-ok-color,
-          var(--success-color)
-        );
+      --ha-bar-primary-color: var(--hassio-bar-ok-color, var(--success-color));
     }
     .target-warning {
       --ha-bar-primary-color: var(
@@ -70,7 +66,6 @@ class SupervisorMetric extends LitElement {
       flex-shrink: 0;
     }
   `;
-  }
 }
 
 declare global {

hassio/src/hassio-panel.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -39,15 +39,13 @@ class HassioPanel extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       --app-header-background-color: var(--sidebar-background-color);
       --app-header-text-color: var(--sidebar-text-color);
       --app-header-border-bottom: 1px solid var(--divider-color);
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 import { mdiMenu } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -325,8 +325,7 @@ class HassioIngressView extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     iframe {
       display: block;
       width: 100%;
@@ -369,7 +368,6 @@ class HassioIngressView extends LitElement {
       --app-header-border-bottom: 1px solid var(--divider-color);
     }
   `;
-  }
 }
 
 declare global {

hassio/src/update-available/update-available-dashboard.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -38,8 +38,7 @@ class UpdateAvailableDashboard extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     hass-subpage {
       --app-header-background-color: var(--primary-background-color);
       --app-header-text-color: var(--sidebar-text-color);
@@ -51,7 +50,6 @@ class UpdateAvailableDashboard extends LitElement {
       max-width: 600px;
     }
   `;
-  }
 }
 
 declare global {

src/cast/cast_manager.ts

@@ -32,7 +32,7 @@ export class CastManager {
   // If the cast connection is connected to our Hass.
   public status?: ReceiverStatusMessage;
 
-  private _eventListeners: { [event: string]: CastEventListener[] } = {};
+  private _eventListeners: Record<string, CastEventListener[]> = {};
 
   constructor(auth?: Auth) {
     this.auth = auth;

src/common/config/components_with_service.ts

@@ -4,6 +4,6 @@ import type { HomeAssistant } from "../../types";
 export const componentsWithService = (
   hass: HomeAssistant,
   service: string
-): Array<string> =>
+): string[] =>
   hass &&
   Object.keys(hass.services).filter((key) => service in hass.services[key]);

src/common/decorators/storage.ts

@@ -31,11 +31,9 @@ class StorageClass {
 
   public storage: globalThis.Storage;
 
-  private _storage: { [storageKey: string]: any } = {};
+  private _storage: Record<string, any> = {};
 
-  private _listeners: {
-    [storageKey: string]: Callback[];
-  } = {};
+  private _listeners: Record<string, Callback[]> = {};
 
   public addFromStorage(storageKey: any): void {
     if (!this._storage[storageKey]) {

src/common/decorators/transform.ts

@@ -5,9 +5,7 @@ import { shallowEqual } from "../util/shallow-equal";
 /**
  * Transform function type.
  */
-export interface Transformer<T = any, V = any> {
-  (value: V): T;
-}
+export type Transformer<T = any, V = any> = (value: V) => T;
 
 type ReactiveTransformElement = ReactiveElement & {
   _transformers: Map<PropertyKey, Transformer>;

src/common/dom/ancestors-with-property.ts

@@ -32,7 +32,7 @@ export const ancestorsWithProperty = (
   property: string | symbol,
   own = DEFAULT_OWN
 ) => {
-  const ancestors: Set<Element> = new Set();
+  const ancestors = new Set<Element>();
   while (element) {
     ancestors.add(element);
     element = closestWithProperty(element, property, own);

src/common/dom/apply_themes_on_element.ts

@@ -13,7 +13,7 @@ import { labBrighten, labDarken } from "../color/lab";
 import { rgbContrast } from "../color/rgb";
 
 interface ProcessedTheme {
-  keys: { [key: string]: "" };
+  keys: Record<string, "">;
   styles: Record<string, string>;
 }
 

src/common/entity/compute_state_name.ts

@@ -3,7 +3,7 @@ import { computeObjectId } from "./compute_object_id";
 
 export const computeStateNameFromEntityAttributes = (
   entityId: string,
-  attributes: { [key: string]: any }
+  attributes: Record<string, any>
 ): string =>
   attributes.friendly_name === undefined
     ? computeObjectId(entityId).replace(/_/g, " ")

src/common/entity/supports-feature.ts

@@ -6,9 +6,7 @@ export const supportsFeature = (
 ): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
 
 export const supportsFeatureFromAttributes = (
-  attributes: {
-    [key: string]: any;
-  },
+  attributes: Record<string, any>,
   feature: number
 ): boolean =>
   // eslint-disable-next-line no-bitwise

src/common/string/filter/filter.ts

@@ -130,7 +130,7 @@ enum Arrow {
  * 4. `<match_pos_0>` etc
  */
 // export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
-export type FuzzyScore = Array<number>;
+export type FuzzyScore = number[];
 
 export function fuzzyScore(
   pattern: string,
@@ -469,7 +469,7 @@ const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certai
 const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
 const _diag = initTable(); // the length of a contiguous diagonal match
 const _table = initTable();
-const _arrows = <Arrow[][]>initTable();
+const _arrows = initTable() as Arrow[][];
 
 function initArr(maxLen: number) {
   const row: number[] = [];
@@ -498,8 +498,7 @@ function _fillInMaxWordMatchPos(
   }
 }
 
-export interface FuzzyScorer {
-  (
+export type FuzzyScorer = (
   pattern: string,
   lowPattern: string,
   patternPos: number,
@@ -507,8 +506,7 @@ export interface FuzzyScorer {
   lowWord: string,
   wordPos: number,
   firstMatchCanBeWeak: boolean
-  ): FuzzyScore | undefined;
-}
+) => FuzzyScore | undefined;
 
 export function createMatches(score: undefined | FuzzyScore): Match[] {
   if (typeof score === "undefined") {

src/common/translations/localize.ts

@@ -56,9 +56,7 @@ export type LocalizeFunc<Keys extends string = LocalizeKeys> = (
   >
 ) => string;
 
-interface FormatType {
-  [format: string]: any;
-}
+type FormatType = Record<string, any>;
 export interface FormatsType {
   number: FormatType;
   date: FormatType;

src/common/util/group-by.ts

@@ -1,7 +1,7 @@
 export const groupBy = <T>(
   list: T[],
   keySelector: (item: T) => string
-): { [key: string]: T[] } => {
+): Record<string, T[]> => {
   const result = {};
   for (const item of list) {
     const key = keySelector(item);

src/common/util/time-cache-entity-promise-func.ts

@@ -1,8 +1,6 @@
 import type { HomeAssistant } from "../../types";
 
-interface ResultCache<T> {
-  [entityId: string]: Promise<T> | undefined;
-}
+type ResultCache<T> = Record<string, Promise<T> | undefined>;
 
 /**
  * Call a function with result caching per entity.

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../ha-circular-progress";
@@ -62,8 +62,7 @@ export class HaProgressButton extends LitElement {
     }, 2000);
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       outline: none;
       display: inline-block;
@@ -119,7 +118,6 @@ export class HaProgressButton extends LitElement {
       visibility: hidden;
     }
   `;
-  }
 }
 
 declare global {

src/components/chart/ha-chart-base.ts

@@ -6,7 +6,7 @@ import type {
   TooltipModel,
   UpdateMode,
 } from "chart.js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { PropertyValues } from "lit";
 import { css, html, nothing, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -60,7 +60,7 @@ export class HaChartBase extends LitElement {
 
   @state() private _tooltip?: Tooltip;
 
-  @state() private _hiddenDatasets: Set<number> = new Set();
+  @state() private _hiddenDatasets = new Set<number>();
 
   @state() private _showZoomHint = false;
 
@@ -526,8 +526,7 @@ export class HaChartBase extends LitElement {
     this._tooltip = undefined;
   };
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: block;
       position: relative;
@@ -664,7 +663,6 @@ export class HaChartBase extends LitElement {
       border: 1px solid var(--divider-color);
     }
   `;
-  }
 }
 
 declare global {

src/components/chart/ha-sankey-chart.ts

@@ -4,7 +4,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import memoizeOne from "memoize-one";
 import type { HomeAssistant } from "../../types";
 
-export type Node = {
+export interface Node {
   id: string;
   value: number;
   index: number; // like z-index but for x/y
@@ -12,13 +12,17 @@ export type Node = {
   tooltip?: string;
   color?: string;
   passThrough?: boolean;
-};
-export type Link = { source: string; target: string; value?: number };
+}
+export interface Link {
+  source: string;
+  target: string;
+  value?: number;
+}
 
-export type SankeyChartData = {
+export interface SankeyChartData {
   nodes: Node[];
   links: Link[];
-};
+}
 
 type ProcessedNode = Node & {
   x: number;
@@ -35,13 +39,13 @@ type ProcessedLink = Link & {
   passThroughNodeIds: string[];
 };
 
-type Section = {
+interface Section {
   nodes: ProcessedNode[];
   offset: number;
   index: number;
   totalValue: number;
   statePerPixel: number;
-};
+}
 
 const MIN_SIZE = 3;
 const DEFAULT_COLOR = "var(--primary-color)";

src/components/chart/state-history-chart-line.ts

@@ -553,11 +553,11 @@ export class StateHistoryChartLine extends LitElement {
             !states.states || states.states.length === 0
               ? 0
               : states.states[0].last_changed;
-          for (let i = 0; i < states.statistics.length; i++) {
-            if (stopTime && states.statistics[i].last_changed >= stopTime) {
+          for (const statistic of states.statistics) {
+            if (stopTime && statistic.last_changed >= stopTime) {
               break;
             }
-            processData(states.statistics[i]);
+            processData(statistic);
           }
         }
         states.states.forEach((entityState) => {

src/components/chart/state-history-chart-timeline.ts

@@ -1,6 +1,6 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { getRelativePosition } from "chart.js/helpers";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -319,13 +319,11 @@ export class StateHistoryChartTimeline extends LitElement {
     };
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     ha-chart-base {
       --chart-max-height: none;
     }
   `;
-  }
 }
 
 declare global {

src/components/chart/state-history-charts.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
@@ -272,8 +272,7 @@ export class StateHistoryCharts extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: block;
       /* height of single timeline chart = 60px */
@@ -329,7 +328,6 @@ export class StateHistoryCharts extends LitElement {
       width: 100%;
     }
   `;
-  }
 }
 
 declare global {

src/components/chart/statistics-chart.ts

@@ -4,7 +4,7 @@ import type {
   ChartOptions,
   ChartType,
 } from "chart.js";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -60,7 +60,7 @@ export class StatisticsChart extends LitElement {
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ attribute: false, type: Array })
-  public statTypes: Array<StatisticType> = ["sum", "min", "mean", "max"];
+  public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
   @property({ attribute: false }) public chartType: ChartType = "line";
 
@@ -372,7 +372,7 @@ export class StatisticsChart extends LitElement {
       }
 
       // array containing [value1, value2, etc]
-      let prevValues: Array<number | null> | null = null;
+      let prevValues: (number | null)[] | null = null;
       let prevEndTime: Date | undefined;
 
       // The datasets for the current statistic
@@ -382,7 +382,7 @@ export class StatisticsChart extends LitElement {
       const pushData = (
         start: Date,
         end: Date,
-        dataValues: Array<number | null> | null
+        dataValues: (number | null)[] | null
       ) => {
         if (!dataValues) return;
         if (start > end) {
@@ -494,7 +494,7 @@ export class StatisticsChart extends LitElement {
           return;
         }
         prevDate = startDate;
-        const dataValues: Array<number | null> = [];
+        const dataValues: (number | null)[] = [];
         statTypes.forEach((type) => {
           let val: number | null | undefined;
           if (type === "sum") {
@@ -528,8 +528,7 @@ export class StatisticsChart extends LitElement {
     this._statisticIds = statisticIds;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: block;
       min-height: 60px;
@@ -540,7 +539,6 @@ export class StatisticsChart extends LitElement {
       color: var(--secondary-text-color);
     }
   `;
-  }
 }
 
 declare global {

src/components/chart/timeline-chart/timeline-color.ts

@@ -49,7 +49,7 @@ function computeTimelineStateColor(
 }
 
 let colorIndex = 0;
-const stateColorMap: Map<string, string> = new Map();
+const stateColorMap = new Map<string, string>();
 
 function computeTimeLineGenericColor(
   state: string,

src/components/data-table/dialog-data-table-settings.ts

@@ -218,8 +218,8 @@ export class DialogDataTableSettings extends LitElement {
 
       // Array.findLastIndex when supported or core-js polyfill
       const findLastIndex = (
-        arr: Array<any>,
-        fn: (item: any, index: number, arr: Array<any>) => boolean
+        arr: any[],
+        fn: (item: any, index: number, arr: any[]) => boolean
       ) => {
         for (let i = arr.length - 1; i >= 0; i--) {
           if (fn(arr[i], i, arr)) return i;

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

@@ -33,8 +33,7 @@ class HaDataTableIcon extends LitElement {
     this.addEventListener("tap", hide);
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     :host {
       display: inline-block;
       position: relative;
@@ -57,7 +56,6 @@ class HaDataTableIcon extends LitElement {
       border-radius: 2px;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -98,8 +98,7 @@ class HaDataTableLabels extends LitElement {
     }
   }
 
-  static get styles() {
-    return css`
+  static styles = css`
     :host {
       display: block;
       flex-grow: 1;
@@ -122,7 +121,6 @@ class HaDataTableLabels extends LitElement {
       border: 1px solid var(--divider-color);
     }
   `;
-  }
 }
 
 declare global {

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

@@ -48,9 +48,10 @@ export interface SortingChangedEvent {
 
 export type SortingDirection = "desc" | "asc" | null;
 
-export interface DataTableColumnContainer<T = any> {
-  [key: string]: DataTableColumnData<T>;
-}
+export type DataTableColumnContainer<T = any> = Record<
+  string,
+  DataTableColumnData<T>
+>;
 
 export interface DataTableSortColumnData {
   sortable?: boolean;
@@ -94,9 +95,7 @@ export interface DataTableRowData {
   selectable?: boolean;
 }
 
-export interface SortableColumnContainer {
-  [key: string]: ClonedDataTableColumnData;
-}
+export type SortableColumnContainer = Record<string, ClonedDataTableColumnData>;
 
 const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 
@@ -694,9 +693,9 @@ export class HaDataTable extends LitElement {
             grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
             delete grouped.undefined;
           }
-          const sorted: {
-            [key: string]: DataTableRowData[];
-          } = Object.keys(grouped)
+          const sorted: Record<string, DataTableRowData[]> = Object.keys(
+            grouped
+          )
             .sort((a, b) => {
               const orderA = groupOrder?.indexOf(a) ?? -1;
               const orderB = groupOrder?.indexOf(b) ?? -1;

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

@@ -1,6 +1,5 @@
 import { consume } from "@lit-labs/context";
 import "@material/mwc-list/mwc-list-item";
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -185,11 +184,9 @@ export abstract class HaDeviceAutomationPicker<
     fireEvent(this, "value-changed", { value });
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     ha-select {
       display: block;
     }
   `;
-  }
 }

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

@@ -1,6 +1,6 @@
 import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
@@ -152,8 +152,7 @@ export class HaEntityToggle extends LitElement {
     }, 2000);
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       white-space: nowrap;
       min-width: 38px;
@@ -170,7 +169,6 @@ export class HaEntityToggle extends LitElement {
       padding: 13px 5px;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -26,7 +26,7 @@ const TRUNCATED_DOMAINS = [
   "alarm_control_panel",
   "device_tracker",
   "person",
-] as const satisfies ReadonlyArray<keyof typeof FIXED_DOMAIN_STATES>;
+] as const satisfies readonly (keyof typeof FIXED_DOMAIN_STATES)[];
 
 type TruncatedDomain = (typeof TRUNCATED_DOMAINS)[number];
 type TruncatedKey = {
@@ -262,8 +262,7 @@ export class HaStateLabelBadge extends LitElement {
     this._timerTimeRemaining = timerTimeRemaining(stateObj);
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       cursor: pointer;
     }
@@ -305,7 +304,6 @@ export class HaStateLabelBadge extends LitElement {
       --ha-label-badge-color: var(--label-badge-yellow);
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,4 +1,3 @@
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -172,8 +171,7 @@ class HaStatisticsPicker extends LitElement {
     this._updateStatistics([...currentEntities, toAdd]);
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       width: 200px;
       display: block;
@@ -184,7 +182,6 @@ class HaStatisticsPicker extends LitElement {
       margin-top: 8px;
     }
   `;
-  }
 }
 
 declare global {

src/components/entity/state-badge.ts

@@ -35,7 +35,7 @@ export class StateBadge extends LitElement {
   // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
   @property({ type: Boolean, reflect: true }) public icon = true;
 
-  @state() private _iconStyle: { [name: string]: string | undefined } = {};
+  @state() private _iconStyle: Record<string, string | undefined> = {};
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -108,7 +108,7 @@ export class StateBadge extends LitElement {
     }
     const stateObj = this.stateObj;
 
-    const iconStyle: { [name: string]: string } = {};
+    const iconStyle: Record<string, string> = {};
     let backgroundImage = "";
 
     this.icon = true;

src/components/entity/state-info.ts

@@ -1,6 +1,5 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -75,8 +74,7 @@ class StateInfo extends LitElement {
       </div>`;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       min-width: 120px;
       white-space: nowrap;
@@ -135,7 +133,6 @@ class StateInfo extends LitElement {
       margin-bottom: 0px;
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,6 +1,5 @@
 import {
   css,
-  type CSSResultGroup,
   html,
   LitElement,
   type PropertyValues,
@@ -47,8 +46,7 @@ export class HaAnsiToHtml extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     pre {
       overflow-x: auto;
       margin: 0;
@@ -123,7 +121,6 @@ export class HaAnsiToHtml extends LitElement {
       color: var(--text-primary-color);
     }
   `;
-  }
 
   /**
    * add new lines to the log

src/components/ha-area-filter.ts

@@ -1,5 +1,5 @@
 import { mdiTextureBox } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -9,10 +9,10 @@ import "./ha-icon-next";
 import "./ha-svg-icon";
 import "./ha-textfield";
 
-export type AreaFilterValue = {
+export interface AreaFilterValue {
   hidden?: string[];
   order?: string[];
-};
+}
 
 @customElement("ha-area-filter")
 export class HaAreaPicker extends LitElement {
@@ -80,14 +80,12 @@ export class HaAreaPicker extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     ha-list-item {
       --mdc-list-side-padding-left: 8px;
       --mdc-list-side-padding-right: 8px;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-area-floor-picker.ts

@@ -345,9 +345,10 @@ export class HaAreaFloorPicker extends LitElement {
       );
 
       // @ts-ignore
-      const floorAreaEntries: Array<
-        [FloorRegistryEntry | undefined, AreaRegistryEntry[]]
-      > = Object.entries(floorAreaLookup)
+      const floorAreaEntries: [
+        FloorRegistryEntry | undefined,
+        AreaRegistryEntry[],
+      ][] = Object.entries(floorAreaLookup)
         .map(([floorId, floorAreas]) => {
           const floor = floors.find((fl) => fl.floor_id === floorId)!;
           return [floor, floorAreas] as const;

src/components/ha-assist-chat.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, LitElement, html, nothing } from "lit";
 import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
 import { customElement, property, query, state } from "lit/decorators";
@@ -475,8 +475,7 @@ export class HaAssistChat extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       flex: 1;
       display: flex;
@@ -629,7 +628,6 @@ export class HaAssistChat extends LitElement {
       top: 0px;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-assist-pipeline-picker.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValueMap } from "lit";
+import type { PropertyValueMap } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -90,13 +90,11 @@ export class HaAssistPipelinePicker extends LitElement {
     });
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     ha-select {
       width: 100%;
     }
   `;
-  }
 
   private _changed(ev): void {
     const target = ev.target as HaSelect;

src/components/ha-badge.ts

@@ -1,4 +1,3 @@
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -38,8 +37,7 @@ export class HaBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       --badge-color: var(--secondary-text-color);
       -webkit-tap-highlight-color: transparent;
@@ -75,10 +73,7 @@ export class HaBadge extends LitElement {
       border-width: var(--ha-card-border-width, 1px);
       box-shadow: var(--ha-card-box-shadow, none);
       border-style: solid;
-        border-color: var(
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
-        );
+      border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
     }
     .badge:focus-visible {
       --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
@@ -145,7 +140,6 @@ export class HaBadge extends LitElement {
       margin-inline-end: 0;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-bar.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, LitElement, svg } from "lit";
 import { customElement, property } from "lit/decorators";
 import {
@@ -34,8 +34,7 @@ export class HaBar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     rect {
       height: 100%;
     }
@@ -52,7 +51,6 @@ export class HaBar extends LitElement {
       width: 100%;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-blueprint-picker.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -95,8 +94,7 @@ class HaBluePrintPicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: inline-block;
     }
@@ -106,7 +104,6 @@ class HaBluePrintPicker extends LitElement {
       display: block;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-button-menu.ts

@@ -1,7 +1,7 @@
 import type { Button } from "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
@@ -103,8 +103,7 @@ export class HaButtonMenu extends LitElement {
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: inline-block;
       position: relative;
@@ -113,7 +112,6 @@ export class HaButtonMenu extends LitElement {
       color: var(--disabled-text-color);
     }
   `;
-  }
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import type { Button } from "@material/mwc-button/mwc-button";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -66,8 +66,7 @@ export class HaButtonToggleGroup extends LitElement {
     fireEvent(this, "value-changed", { value: this.active });
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     div {
       display: flex;
       --mdc-icon-button-size: var(--button-toggle-size, 36px);
@@ -139,7 +138,6 @@ export class HaButtonToggleGroup extends LitElement {
       border-right-width: 1px;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-camera-stream.ts

@@ -1,11 +1,4 @@
-import {
-  css,
-  type CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  type PropertyValues,
-} from "lit";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
@@ -28,10 +21,10 @@ import "./ha-web-rtc-player";
 
 const MJPEG_STREAM = "mjpeg";
 
-type Stream = {
+interface Stream {
   type: StreamType | typeof MJPEG_STREAM;
   visible: boolean;
-};
+}
 
 @customElement("ha-camera-stream")
 export class HaCameraStream extends LitElement {
@@ -256,8 +249,7 @@ export class HaCameraStream extends LitElement {
     }
   );
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host,
     img {
       display: block;
@@ -271,7 +263,6 @@ export class HaCameraStream extends LitElement {
       display: none;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-card.ts

@@ -1,4 +1,3 @@
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -8,8 +7,7 @@ export class HaCard extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public raised = false;
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       background: var(
         --ha-card-background,
@@ -22,10 +20,7 @@ export class HaCard extends LitElement {
       border-radius: var(--ha-card-border-radius, 12px);
       border-width: var(--ha-card-border-width, 1px);
       border-style: solid;
-        border-color: var(
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
-        );
+      border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
       color: var(--primary-text-color);
       display: block;
       transition: all 0.3s ease-out;
@@ -71,7 +66,6 @@ export class HaCard extends LitElement {
       padding: 5px 16px;
     }
   `;
-  }
 
   protected render() {
     return html`

src/components/ha-climate-state.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { ClimateEntity } from "../data/climate";
@@ -136,8 +136,7 @@ class HaClimateState extends LitElement {
     return stateString;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host {
       display: flex;
       flex-direction: column;
@@ -163,7 +162,6 @@ class HaClimateState extends LitElement {
       direction: ltr;
     }
   `;
-  }
 }
 
 declare global {

src/components/ha-code-editor.ts

@@ -7,7 +7,7 @@ import type {
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import type { HassEntities } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { PropertyValues } from "lit";
 import { css, ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -339,13 +339,11 @@ export class HaCodeEditor extends ReactiveElement {
     return [];
   };
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
     :host(.error-state) .cm-gutters {
       border-color: var(--error-state-color, red);
     }
   `;
-  }
 }
 
 declare global {