Update dropdown adjustments

* Comma separate field examples if it is a list

* Remove prettier ignore and json.stringify all examples

* Use YAML format

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/init@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/autobuild@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
+        uses: github/codeql-action/analyze@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5

.github/workflows/nightly.yaml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
+        uses: actions/setup-python@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@feb19ddc698445db27401f1490f6ac182da0816f # v3.2.0
+        uses: relative-ci/agent-action@c45aaa919ef85620af54242a241ac17a8fa35983 # v3.2.1
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
+        uses: actions/setup-python@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6.1.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
         with:
           files: |
             dist/*.whl
@@ -75,7 +75,7 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.10.0
+        uses: home-assistant/wheels@2025.11.0
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -108,7 +108,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -137,6 +137,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

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

@@ -305,9 +305,8 @@ export class HcMain extends HassElement {
         await llColl.refresh();
         this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
           if (isStrategyDashboard(rawConfig)) {
-            const { generateLovelaceDashboardStrategy } = await import(
-              "../../../../src/panels/lovelace/strategies/get-strategy"
-            );
+            const { generateLovelaceDashboardStrategy } =
+              await import("../../../../src/panels/lovelace/strategies/get-strategy");
             const config = await generateLovelaceDashboardStrategy(
               rawConfig,
               this.hass!
@@ -347,9 +346,8 @@ export class HcMain extends HassElement {
   }
 
   private async _generateDefaultLovelaceConfig() {
-    const { generateLovelaceDashboardStrategy } = await import(
-      "../../../../src/panels/lovelace/strategies/get-strategy"
-    );
+    const { generateLovelaceDashboardStrategy } =
+      await import("../../../../src/panels/lovelace/strategies/get-strategy");
     this._handleNewLovelaceConfig(
       await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
     );

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

@@ -88,8 +88,8 @@ class HassioRegistriesDialog extends LitElement {
                 <ha-button
                   ?disabled=${Boolean(
                     !this._input.registry ||
-                      !this._input.username ||
-                      !this._input.password
+                    !this._input.username ||
+                    !this._input.password
                   )}
                   @click=${this._addNewRegistry}
                   appearance="filled"

package.json

@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.5",
-    "@vaadin/vaadin-themable-mixin": "24.9.5",
+    "@vaadin/combo-box": "24.9.6",
+    "@vaadin/vaadin-themable-mixin": "24.9.6",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -152,13 +152,13 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.5",
-    "@bundle-stats/plugin-webpack-filter": "4.21.6",
+    "@bundle-stats/plugin-webpack-filter": "4.21.7",
     "@lokalise/node-api": "15.4.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
     "@rsdoctor/rspack-plugin": "1.3.11",
-    "@rspack/core": "1.6.4",
+    "@rspack/core": "1.6.5",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -178,7 +178,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.13",
+    "@vitest/coverage-v8": "4.0.14",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -194,7 +194,7 @@
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.2",
-    "glob": "12.0.0",
+    "glob": "13.0.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -209,7 +209,7 @@
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.6.2",
+    "prettier": "3.7.2",
     "rspack-manifest-plugin": "5.2.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
@@ -217,9 +217,9 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.47.0",
+    "typescript-eslint": "8.48.0",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.13",
+    "vitest": "4.0.14",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20251202.0"
+version      = "20251029.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/translations/entity-state.ts

@@ -45,9 +45,8 @@ export const computeFormatFunctions = async (
   formatEntityAttributeName: FormatEntityAttributeNameFunc;
   formatEntityName: FormatEntityNameFunc;
 }> => {
-  const { computeStateDisplay } = await import(
-    "../entity/compute_state_display"
-  );
+  const { computeStateDisplay } =
+    await import("../entity/compute_state_display");
   const { computeAttributeValueDisplay, computeAttributeNameDisplay } =
     await import("../entity/compute_attribute_display");
 

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

@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
@@ -27,6 +27,7 @@ const safeParseFloat = (value) => {
   return isFinite(parsed) ? parsed : null;
 };
 
+@customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -795,7 +796,6 @@ export class StateHistoryChartLine extends LitElement {
     return Math.abs(value) < 1 ? value : roundingFn(value);
   }
 }
-customElements.define("state-history-chart-line", StateHistoryChartLine);
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -838,10 +838,10 @@ export class HaDataTable extends LitElement {
     } else if (this.sortDirection === "asc") {
       this.sortDirection = "desc";
     } else {
-      this.sortDirection = null;
+      this.sortDirection = "asc";
     }
 
-    this.sortColumn = this.sortDirection === null ? undefined : columnId;
+    this.sortColumn = columnId;
 
     fireEvent(this, "sorting-changed", {
       column: columnId,

src/components/entity/state-badge.ts

@@ -2,7 +2,7 @@ import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -17,6 +17,7 @@ import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import type { HomeAssistant } from "../../types";
 import "../ha-state-icon";
 
+@customElement("state-badge")
 export class StateBadge extends LitElement {
   public hass?: HomeAssistant;
 
@@ -265,5 +266,3 @@ declare global {
     "state-badge": StateBadge;
   }
 }
-
-customElements.define("state-badge", StateBadge);

src/components/ha-picker-field.ts

@@ -103,8 +103,8 @@ export class HaPickerField extends LitElement {
           --md-list-item-two-line-container-height: 56px;
           --md-list-item-top-space: 0px;
           --md-list-item-bottom-space: 0px;
-          --md-list-item-leading-space: 8px;
-          --md-list-item-trailing-space: 8px;
+          --md-list-item-leading-space: var(--ha-space-4);
+          --md-list-item-trailing-space: var(--ha-space-2);
           --ha-md-list-item-gap: var(--ha-space-2);
           /* Remove the default focus ring */
           --md-focus-ring-width: 0px;

src/components/ha-service-control.ts

@@ -450,7 +450,7 @@ export class HaServiceControl extends LitElement {
 
     const hasOptional = Boolean(
       !shouldRenderServiceDataYaml &&
-        serviceData?.flatFields.some((field) => showOptionalToggle(field))
+      serviceData?.flatFields.some((field) => showOptionalToggle(field))
     );
 
     const targetEntities = this._getTargetedEntities(

src/components/map/ha-entity-marker.ts

@@ -1,10 +1,11 @@
 import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-state-icon";
 
+@customElement("ha-entity-marker")
 class HaEntityMarker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -89,8 +90,6 @@ class HaEntityMarker extends LitElement {
   `;
 }
 
-customElements.define("ha-entity-marker", HaEntityMarker);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-entity-marker": HaEntityMarker;

src/data/hassio/backup.ts

@@ -47,8 +47,7 @@ export interface HassioFullBackupCreateParams {
   confirm_password?: string;
   background?: boolean;
 }
-export interface HassioPartialBackupCreateParams
-  extends HassioFullBackupCreateParams {
+export interface HassioPartialBackupCreateParams extends HassioFullBackupCreateParams {
   folders?: string[];
   addons?: string[];
   homeassistant?: boolean;

src/data/lawn_mower.ts

@@ -18,8 +18,7 @@ export const enum LawnMowerEntityFeature {
 }
 
 interface LawnMowerEntityAttributes
-  extends HassEntityAttributeBase,
-    Record<string, any> {}
+  extends HassEntityAttributeBase, Record<string, any> {}
 
 export interface LawnMowerEntity extends HassEntityBase {
   attributes: LawnMowerEntityAttributes;

src/data/lovelace/config/section.ts

@@ -18,8 +18,7 @@ export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {
   cards?: LovelaceCardConfig[];
 }
 
-export interface LovelaceStrategySectionConfig
-  extends LovelaceBaseSectionConfig {
+export interface LovelaceStrategySectionConfig extends LovelaceBaseSectionConfig {
   strategy: LovelaceStrategyConfig;
 }
 

src/data/lovelace/config/types.ts

@@ -11,8 +11,7 @@ export interface LovelaceConfig extends LovelaceDashboardBaseConfig {
   views: LovelaceViewRawConfig[];
 }
 
-export interface LovelaceDashboardStrategyConfig
-  extends LovelaceDashboardBaseConfig {
+export interface LovelaceDashboardStrategyConfig extends LovelaceDashboardBaseConfig {
   strategy: LovelaceStrategyConfig;
 }
 

src/data/lovelace/dashboard.ts

@@ -29,8 +29,7 @@ export interface LovelaceDashboardMutableParams {
   title: string;
 }
 
-export interface LovelaceDashboardCreateParams
-  extends LovelaceDashboardMutableParams {
+export interface LovelaceDashboardCreateParams extends LovelaceDashboardMutableParams {
   url_path: string;
   mode: "storage";
 }

src/data/trace.ts

@@ -106,8 +106,7 @@ export interface AutomationTrace extends BaseTrace {
 }
 
 export interface AutomationTraceExtended
-  extends AutomationTrace,
-    BaseTraceExtended {
+  extends AutomationTrace, BaseTraceExtended {
   config: ManualAutomationConfig;
   blueprint_inputs?: BlueprintAutomationConfig;
 }

src/dialogs/generic/show-dialog-box.ts

@@ -32,8 +32,7 @@ export interface PromptDialogParams extends BaseDialogBoxParams {
 }
 
 export interface DialogBoxParams
-  extends ConfirmationDialogParams,
-    PromptDialogParams {
+  extends ConfirmationDialogParams, PromptDialogParams {
   confirm?: (out?: string) => void;
   confirmation?: boolean;
   prompt?: boolean;

src/dialogs/make-dialog-manager.ts

@@ -19,8 +19,9 @@ declare global {
   }
 }
 
-export interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]>
-  extends HTMLElement {
+export interface HassDialog<
+  T = HASSDomEvents[ValidHassDomEvent],
+> extends HTMLElement {
   showDialog(params: T);
   closeDialog?: (historyState?: any) => boolean;
 }

src/dialogs/more-info/controls/more-info-camera.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { slugify } from "../../../common/string/slugify";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-camera-stream";
@@ -9,6 +9,7 @@ import type { HomeAssistant } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import { showToast } from "../../../util/toast";
 
+@customElement("more-info-camera")
 class MoreInfoCamera extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -112,8 +113,6 @@ class MoreInfoCamera extends LitElement {
   `;
 }
 
-customElements.define("more-info-camera", MoreInfoCamera);
-
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-camera": MoreInfoCamera;

src/dialogs/more-info/controls/more-info-climate.ts

@@ -7,7 +7,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
@@ -32,6 +32,7 @@ import { moreInfoControlStyle } from "../components/more-info-control-style";
 
 type MainControl = "temperature" | "humidity";
 
+@customElement("more-info-climate")
 class MoreInfoClimate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -567,8 +568,6 @@ class MoreInfoClimate extends LitElement {
   }
 }
 
-customElements.define("more-info-climate", MoreInfoClimate);
-
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-climate": MoreInfoClimate;

src/dialogs/more-info/controls/more-info-group.ts

@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import type { GroupEntity } from "../../../data/group";
 import { computeGroupDomain } from "../../../data/group";
@@ -13,6 +13,7 @@ import {
   importMoreInfoControl,
 } from "../state_more_info_control";
 
+@customElement("more-info-group")
 class MoreInfoGroup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -106,8 +107,6 @@ class MoreInfoGroup extends LitElement {
   }
 }
 
-customElements.define("more-info-group", MoreInfoGroup);
-
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-group": MoreInfoGroup;

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -1,7 +1,7 @@
 import { mdiPower, mdiTuneVariant } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
@@ -15,6 +15,7 @@ import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
 
+@customElement("more-info-humidifier")
 class MoreInfoHumidifier extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -249,8 +250,6 @@ class MoreInfoHumidifier extends LitElement {
   }
 }
 
-customElements.define("more-info-humidifier", MoreInfoHumidifier);
-
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-humidifier": MoreInfoHumidifier;

src/layouts/ha-init-page.ts

@@ -1,9 +1,10 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../components/ha-spinner";
 import "../components/ha-button";
 
+@customElement("ha-init-page")
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
 
@@ -120,8 +121,6 @@ class HaInitPage extends LitElement {
   `;
 }
 
-customElements.define("ha-init-page", HaInitPage);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-init-page": HaInitPage;

src/layouts/hass-subpage.ts

@@ -128,6 +128,8 @@ class HassSubpage extends LitElement {
         ha-menu-button,
         ha-icon-button-arrow-prev,
         ::slotted([slot="toolbar-icon"]) {
+          display: flex;
+          align-items: center;
           pointer-events: auto;
           color: var(--sidebar-icon-color);
         }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -621,9 +621,9 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     } else if (this._sortDirection === "asc") {
       this._sortDirection = "desc";
     } else {
-      this._sortDirection = null;
+      this._sortDirection = "asc";
     }
-    this._sortColumn = this._sortDirection === null ? undefined : columnId;
+    this._sortColumn = columnId;
 
     fireEvent(this, "sorting-changed", {
       column: columnId,

src/managers/notification-manager.ts

@@ -1,6 +1,6 @@
 import { mdiClose } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
-import { property, query, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import type { LocalizeKeys } from "../common/translations/localize";
 import "../components/ha-button";
 import "../components/ha-icon-button";
@@ -26,6 +26,7 @@ export interface ToastActionParams {
     | { translationKey: LocalizeKeys; args?: Record<string, string> };
 }
 
+@customElement("notification-manager")
 class NotificationManager extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -115,8 +116,6 @@ class NotificationManager extends LitElement {
   }
 }
 
-customElements.define("notification-manager", NotificationManager);
-
 declare global {
   interface HTMLElementTagNameMap {
     "notification-manager": NotificationManager;

src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts

@@ -90,9 +90,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
       this._email = this._cloudLoginElement.emailField.value;
     }
 
-    await import(
-      "../../panels/config/cloud/forgot-password/cloud-forgot-password-card"
-    );
+    await import("../../panels/config/cloud/forgot-password/cloud-forgot-password-card");
     this._view = "forgot-password";
   }
 

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -3,7 +3,7 @@ import { TZDate } from "@date-fns/tz";
 import { addDays, isSameDay } from "date-fns";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { formatDate } from "../../common/datetime/format_date";
 import { formatDateTime } from "../../common/datetime/format_date_time";
 import { formatTime } from "../../common/datetime/format_time";
@@ -26,6 +26,7 @@ import type { CalendarEventDetailDialogParams } from "./show-dialog-calendar-eve
 import { showCalendarEventEditDialog } from "./show-dialog-calendar-event-editor";
 import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
 
+@customElement("dialog-calendar-event-detail")
 class DialogCalendarEventDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -271,8 +272,3 @@ declare global {
     "dialog-calendar-event-detail": DialogCalendarEventDetail;
   }
 }
-
-customElements.define(
-  "dialog-calendar-event-detail",
-  DialogCalendarEventDetail
-);

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@@ -40,6 +40,7 @@ const SENSOR_DOMAINS = ["sensor"];
 const TEMPERATURE_DEVICE_CLASSES = [SENSOR_DEVICE_CLASS_TEMPERATURE];
 const HUMIDITY_DEVICE_CLASSES = [SENSOR_DEVICE_CLASS_HUMIDITY];
 
+@customElement("dialog-area-registry-detail")
 class DialogAreaDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -426,5 +427,3 @@ declare global {
     "dialog-area-registry-detail": DialogAreaDetail;
   }
 }
-
-customElements.define("dialog-area-registry-detail", DialogAreaDetail);

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -1,7 +1,7 @@
 import { mdiTextureBox } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -27,6 +27,7 @@ import type { HomeAssistant } from "../../../types";
 import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
 import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
 
+@customElement("dialog-floor-registry-detail")
 class DialogFloorDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -361,5 +362,3 @@ declare global {
     "dialog-floor-registry-detail": DialogFloorDetail;
   }
 }
-
-customElements.define("dialog-floor-registry-detail", DialogFloorDetail);

src/panels/config/automation/condition/types/ha-automation-condition-platform.ts

@@ -124,9 +124,9 @@ export class HaPlatformCondition extends LitElement {
 
     const hasOptional = Boolean(
       conditionDesc?.fields &&
-        Object.values(conditionDesc.fields).some((field) =>
-          showOptionalToggle(field)
-        )
+      Object.values(conditionDesc.fields).some((field) =>
+        showOptionalToggle(field)
+      )
     );
 
     return html`

src/panels/config/automation/ha-automation-editor.ts

@@ -23,7 +23,7 @@ import {
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, query, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -112,6 +112,7 @@ declare global {
   }
 }
 
+@customElement("ha-automation-editor")
 export class HaAutomationEditor extends PreventUnsavedMixin(
   KeyboardShortcutMixin(LitElement)
 ) {
@@ -1339,5 +1340,3 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     ];
   }
 }
-
-customElements.define("ha-automation-editor", HaAutomationEditor);

src/panels/config/automation/ha-automation-picker.ts

@@ -35,6 +35,8 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
+import { slugify } from "../../../common/string/slugify";
+import "../../../components/ha-tooltip";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import {
   hasRejectedItems,
@@ -327,14 +329,19 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             const date = new Date(automation.last_triggered);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
+            const formattedTime = formatShortDateTimeWithConditionalYear(
+              date,
+              this.hass.locale,
+              this.hass.config
+            );
+            const elementId = "last-triggered-" + slugify(automation.entity_id);
             return html`
               ${dayDifference > 3
-                ? formatShortDateTimeWithConditionalYear(
-                    date,
-                    this.hass.locale,
-                    this.hass.config
-                  )
-                : relativeTime(date, locale)}
+                ? formattedTime
+                : html`
+                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
+                    <span id=${elementId}>${relativeTime(date, locale)}</span>
+                  `}
             `;
           },
         },

src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts

@@ -160,9 +160,9 @@ export class HaPlatformTrigger extends LitElement {
 
     const hasOptional = Boolean(
       triggerDesc?.fields &&
-        Object.values(triggerDesc.fields).some((field) =>
-          showOptionalToggle(field)
-        )
+      Object.values(triggerDesc.fields).some((field) =>
+        showOptionalToggle(field)
+      )
     );
 
     return html`

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,7 +1,7 @@
 import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { state } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -13,6 +13,7 @@ import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 import "../../../../components/ha-button";
 import "../../../../components/ha-copy-textfield";
 
+@customElement("dialog-manage-cloudhook")
 export class DialogManageCloudhook extends LitElement {
   protected hass?: HomeAssistant;
 
@@ -155,5 +156,3 @@ declare global {
     "dialog-manage-cloudhook": DialogManageCloudhook;
   }
 }
-
-customElements.define("dialog-manage-cloudhook", DialogManageCloudhook);

src/panels/config/core/ha-config-section-updates.ts

@@ -1,4 +1,11 @@
-import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
+import {
+  mdiCheckboxBlankOutline,
+  mdiCheckboxMarked,
+  mdiDotsVertical,
+  mdiLocationEnter,
+  mdiLocationExit,
+  mdiRefresh,
+} from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
@@ -78,11 +85,13 @@ class HaConfigSectionUpdates extends LitElement {
               .path=${mdiDotsVertical}
             ></ha-icon-button>
 
-            <ha-dropdown-item
-              type="checkbox"
-              value="show_skipped"
-              .checked=${this._showSkipped}
-            >
+            <ha-dropdown-item value="show_skipped">
+              <ha-svg-icon
+                .path=${this._showSkipped
+                  ? mdiCheckboxMarked
+                  : mdiCheckboxBlankOutline}
+                slot="icon"
+              ></ha-svg-icon>
               ${this.hass.localize("ui.panel.config.updates.show_skipped")}
             </ha-dropdown-item>
             ${this._supervisorInfo
@@ -92,6 +101,12 @@ class HaConfigSectionUpdates extends LitElement {
                     value="toggle_beta"
                     .disabled=${this._supervisorInfo.channel === "dev"}
                   >
+                    <ha-svg-icon
+                      .path=${this._supervisorInfo.channel === "stable"
+                        ? mdiLocationEnter
+                        : mdiLocationExit}
+                      slot="icon"
+                    ></ha-svg-icon>
                     ${this._supervisorInfo.channel === "stable"
                       ? this.hass.localize("ui.panel.config.updates.join_beta")
                       : this.hass.localize(

src/panels/config/devices/ha-config-device-page.ts

@@ -1138,23 +1138,20 @@ export class HaConfigDevicePage extends LitElement {
     }
 
     if (domains.includes("mqtt")) {
-      const mqtt = await import(
-        "./device-detail/integration-elements/mqtt/device-actions"
-      );
+      const mqtt =
+        await import("./device-detail/integration-elements/mqtt/device-actions");
       const actions = mqtt.getMQTTDeviceActions(this, device);
       deviceActions.push(...actions);
     }
     if (domains.includes("zha")) {
-      const zha = await import(
-        "./device-detail/integration-elements/zha/device-actions"
-      );
+      const zha =
+        await import("./device-detail/integration-elements/zha/device-actions");
       const actions = await zha.getZHADeviceActions(this, this.hass, device);
       deviceActions.push(...actions);
     }
     if (domains.includes("zwave_js")) {
-      const zwave = await import(
-        "./device-detail/integration-elements/zwave_js/device-actions"
-      );
+      const zwave =
+        await import("./device-detail/integration-elements/zwave_js/device-actions");
       const actions = await zwave.getZwaveDeviceActions(
         this,
         this.hass,
@@ -1163,9 +1160,8 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions.push(...actions);
     }
     if (domains.includes("esphome")) {
-      const esphome = await import(
-        "./device-detail/integration-elements/esphome/device-actions"
-      );
+      const esphome =
+        await import("./device-detail/integration-elements/esphome/device-actions");
       const actions = await esphome.getESPHomeDeviceActions(
         this,
         this.hass,
@@ -1174,9 +1170,8 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions.push(...actions);
     }
     if (domains.includes("matter")) {
-      const matter = await import(
-        "./device-detail/integration-elements/matter/device-actions"
-      );
+      const matter =
+        await import("./device-detail/integration-elements/matter/device-actions");
       const defaultActions = matter.getMatterDeviceDefaultActions(
         this,
         this.hass,
@@ -1220,9 +1215,8 @@ export class HaConfigDevicePage extends LitElement {
     ).map((int) => int.domain);
 
     if (domains.includes("zwave_js")) {
-      const zwave = await import(
-        "./device-detail/integration-elements/zwave_js/device-alerts"
-      );
+      const zwave =
+        await import("./device-detail/integration-elements/zwave_js/device-alerts");
 
       const alerts = await zwave.getZwaveDeviceAlerts(this.hass, device);
       deviceAlerts.push(...alerts);
@@ -1304,9 +1298,7 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (domains.includes("zwave_js")) {
-      import(
-        "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
-      );
+      import("./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js");
       deviceInfo.push(html`
         <ha-device-info-zwave_js
           .hass=${this.hass}
@@ -1315,9 +1307,7 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (domains.includes("matter")) {
-      import(
-        "./device-detail/integration-elements/matter/ha-device-info-matter"
-      );
+      import("./device-detail/integration-elements/matter/ha-device-info-matter");
       deviceInfo.push(html`
         <ha-device-info-matter
           .hass=${this.hass}

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -1012,7 +1012,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ? html`<ha-area-picker
                   .hass=${this.hass}
                   .value=${this._areaId}
-                  .placeholder=${this._device?.area_id}
                   .disabled=${this.disabled}
                   @value-changed=${this._areaPicked}
                 ></ha-area-picker>`

src/panels/config/entities/ha-config-entities.ts

@@ -116,8 +116,10 @@ import { showAddIntegrationDialog } from "../integrations/show-add-integration-d
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { slugify } from "../../../common/string/slugify";
 
-export interface StateEntity
-  extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
+export interface StateEntity extends Omit<
+  EntityRegistryEntry,
+  "id" | "unique_id"
+> {
   readonly?: boolean;
   selectable?: boolean;
   id?: string;

src/panels/config/ha-panel-config.ts

@@ -530,9 +530,7 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
       zha: {
         tag: "zha-config-dashboard-router",
         load: () =>
-          import(
-            "./integrations/integration-panels/zha/zha-config-dashboard-router"
-          ),
+          import("./integrations/integration-panels/zha/zha-config-dashboard-router"),
       },
       mqtt: {
         tag: "mqtt-config-panel",
@@ -542,30 +540,22 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
       zwave_js: {
         tag: "zwave_js-config-router",
         load: () =>
-          import(
-            "./integrations/integration-panels/zwave_js/zwave_js-config-router"
-          ),
+          import("./integrations/integration-panels/zwave_js/zwave_js-config-router"),
       },
       matter: {
         tag: "matter-config-panel",
         load: () =>
-          import(
-            "./integrations/integration-panels/matter/matter-config-panel"
-          ),
+          import("./integrations/integration-panels/matter/matter-config-panel"),
       },
       thread: {
         tag: "thread-config-panel",
         load: () =>
-          import(
-            "./integrations/integration-panels/thread/thread-config-panel"
-          ),
+          import("./integrations/integration-panels/thread/thread-config-panel"),
       },
       bluetooth: {
         tag: "bluetooth-config-dashboard-router",
         load: () =>
-          import(
-            "./integrations/integration-panels/bluetooth/bluetooth-config-dashboard-router"
-          ),
+          import("./integrations/integration-panels/bluetooth/bluetooth-config-dashboard-router"),
       },
       dhcp: {
         tag: "dhcp-config-panel",
@@ -580,9 +570,7 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
       zeroconf: {
         tag: "zeroconf-config-panel",
         load: () =>
-          import(
-            "./integrations/integration-panels/zeroconf/zeroconf-config-panel"
-          ),
+          import("./integrations/integration-panels/zeroconf/zeroconf-config-panel"),
       },
       application_credentials: {
         tag: "ha-config-application-credentials",

src/panels/config/helpers/forms/dialog-schedule-block-info.ts

@@ -1,7 +1,7 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
 import memoizeOne from "memoize-one";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-form/ha-form";
@@ -14,6 +14,7 @@ import type {
 } from "./show-dialog-schedule-block-info";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 
+@customElement("dialog-schedule-block-info")
 class DialogScheduleBlockInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -156,5 +157,3 @@ declare global {
     "dialog-schedule-block-info": DialogScheduleBlockInfo;
   }
 }
-
-customElements.define("dialog-schedule-block-info", DialogScheduleBlockInfo);

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -1,6 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -15,6 +15,7 @@ import type { HomeAssistant } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
 import type { IssueCommandServiceData } from "./types";
 
+@customElement("zha-cluster-commands")
 export class ZHAClusterCommands extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
@@ -259,5 +260,3 @@ declare global {
     "zha-cluster-commands": ZHAClusterCommands;
   }
 }
-
-customElements.define("zha-cluster-commands", ZHAClusterCommands);

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -192,9 +192,9 @@ export class ZHAGroupBindingControl extends LitElement {
   private get _canBind(): boolean {
     return Boolean(
       this._groupToBind &&
-        this._clustersToBind &&
-        this._clustersToBind?.length > 0 &&
-        this.device
+      this._clustersToBind &&
+      this._clustersToBind?.length > 0 &&
+      this.device
     );
   }
 

src/panels/config/logs/dialog-system-log-detail.ts

@@ -1,7 +1,7 @@
 import { mdiClose, mdiContentCopy } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-alert";
@@ -26,6 +26,7 @@ import { showToast } from "../../../util/toast";
 import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
 
+@customElement("dialog-system-log-detail")
 class DialogSystemLogDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -272,5 +273,3 @@ declare global {
     "dialog-system-log-detail": DialogSystemLogDetail;
   }
 }
-
-customElements.define("dialog-system-log-detail", DialogSystemLogDetail);

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -326,7 +326,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
       PANEL_DASHBOARDS.forEach((panel) => {
         const panelInfo = this.hass.panels[panel];
-        if (!panel) {
+        if (!panelInfo) {
           return;
         }
         const item: DataTableItem = {

src/panels/config/person/dialog-person-detail.ts

@@ -1,7 +1,7 @@
 import { mdiPencil } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
@@ -43,6 +43,7 @@ const cropOptions: CropOptions = {
   aspectRatio: 1,
 };
 
+@customElement("dialog-person-detail")
 class DialogPersonDetail extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -567,5 +568,3 @@ declare global {
     "dialog-person-detail": DialogPersonDetail;
   }
 }
-
-customElements.define("dialog-person-detail", DialogPersonDetail);

src/panels/config/scene/ha-scene-dashboard.ts

@@ -24,7 +24,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
-import { formatShortDateTime } from "../../../common/datetime/format_date_time";
+import { formatShortDateTimeWithConditionalYear } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
@@ -301,10 +301,21 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             const date = new Date(scene.state);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
+            const formattedTime = formatShortDateTimeWithConditionalYear(
+              date,
+              this.hass.locale,
+              this.hass.config
+            );
+            const elementId = "last-activated-" + slugify(scene.entity_id);
             return html`
               ${dayDifference > 3
-                ? formatShortDateTime(date, this.hass.locale, this.hass.config)
-                : relativeTime(date, this.hass.locale)}
+                ? formattedTime
+                : html`
+                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
+                    <span id=${elementId}
+                      >${relativeTime(date, this.hass.locale)}</span
+                    >
+                  `}
             `;
           },
         },

src/panels/config/script/ha-script-editor.ts

@@ -21,7 +21,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { property, query, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack, navigate } from "../../../common/navigate";
@@ -79,6 +79,7 @@ import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
 import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 
+@customElement("ha-script-editor")
 export class HaScriptEditor extends SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
 ) {
@@ -1278,8 +1279,6 @@ export class HaScriptEditor extends SubscribeMixin(
   }
 }
 
-customElements.define("ha-script-editor", HaScriptEditor);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-script-editor": HaScriptEditor;

src/panels/config/script/ha-script-picker.ts

@@ -33,6 +33,8 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
+import { slugify } from "../../../common/string/slugify";
+import "../../../components/ha-tooltip";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import {
   hasRejectedItems,
@@ -302,19 +304,27 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           sortable: true,
           title: localize("ui.card.automation.last_triggered"),
           template: (script) => {
+            if (!script.last_triggered) {
+              return this.hass.localize("ui.components.relative_time.never");
+            }
             const date = new Date(script.last_triggered);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
+            const formattedTime = formatShortDateTimeWithConditionalYear(
+              date,
+              this.hass.locale,
+              this.hass.config
+            );
+            const elementId = "last-triggered-" + slugify(script.entity_id);
             return html`
-              ${script.last_triggered
-                ? dayDifference > 3
-                  ? formatShortDateTimeWithConditionalYear(
-                      date,
-                      this.hass.locale,
-                      this.hass.config
-                    )
-                  : relativeTime(date, this.hass.locale)
-                : this.hass.localize("ui.components.relative_time.never")}
+              ${dayDifference > 3
+                ? formattedTime
+                : html`
+                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
+                    <span id=${elementId}
+                      >${relativeTime(date, this.hass.locale)}</span
+                    >
+                  `}
             `;
           },
         },

src/panels/config/voice-assistants/cloud-alexa-pref.ts

@@ -1,6 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
@@ -20,6 +20,7 @@ import {
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 
+@customElement("cloud-alexa-pref")
 export class CloudAlexaPref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -297,5 +298,3 @@ declare global {
     "cloud-alexa-pref": CloudAlexaPref;
   }
 }
-
-customElements.define("cloud-alexa-pref", CloudAlexaPref);

src/panels/config/voice-assistants/cloud-google-pref.ts

@@ -1,6 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
@@ -23,6 +23,7 @@ import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 
+@customElement("cloud-google-pref")
 export class CloudGooglePref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -367,5 +368,3 @@ declare global {
     "cloud-google-pref": CloudGooglePref;
   }
 }
-
-customElements.define("cloud-google-pref", CloudGooglePref);

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -19,6 +19,7 @@ const SCHEMA = [
   },
 ];
 
+@customElement("dialog-home-zone-detail")
 class DialogHomeZoneDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -151,5 +152,3 @@ declare global {
     "dialog-home-zone-detail": DialogHomeZoneDetail;
   }
 }
-
-customElements.define("dialog-home-zone-detail", DialogHomeZoneDetail);

src/panels/config/zone/dialog-zone-detail.ts

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
@@ -14,6 +14,7 @@ import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
 
+@customElement("dialog-zone-detail")
 class DialogZoneDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -241,5 +242,3 @@ declare global {
     "dialog-zone-detail": DialogZoneDetail;
   }
 }
-
-customElements.define("dialog-zone-detail", DialogZoneDetail);

src/panels/custom/ha-panel-custom.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import type { NavigateOptions } from "../../common/navigate";
 import { navigate } from "../../common/navigate";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -22,6 +22,7 @@ declare global {
   }
 }
 
+@customElement("ha-panel-custom")
 export class HaPanelCustom extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -171,5 +172,3 @@ export class HaPanelCustom extends ReactiveElement {
     iframeDoc.close();
   }
 }
-
-customElements.define("ha-panel-custom", HaPanelCustom);

src/panels/developer-tools/action/developer-tools-action.ts

@@ -1,7 +1,7 @@
 import { mdiHelpCircle } from "@mdi/js";
 import type { HassService } from "home-assistant-js-websocket";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
-import { load } from "js-yaml";
+import { dump, load } from "js-yaml";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -320,7 +320,10 @@ class HaPanelDevAction extends LitElement {
                         ${this.hass.localize(
                           `component.${domain}.services.${serviceName}.fields.${field.key}.example`,
                           descriptionPlaceholders
-                        ) || field.example}
+                        ) ||
+                        (typeof field.example === "object"
+                          ? html`<pre>${dump(field.example)}</pre>`
+                          : field.example)}
                       </td>
                     </tr>`
                 )}

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -547,9 +547,9 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
     } else if (this._sortDirection === "asc") {
       this._sortDirection = "desc";
     } else {
-      this._sortDirection = null;
+      this._sortDirection = "asc";
     }
-    this._sortColumn = this._sortDirection === null ? undefined : columnId;
+    this._sortColumn = columnId;
   }
 
   private _handleGroupBy(ev) {

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -11,9 +11,9 @@ import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 const sourceHasCost = (source: Record<string, any>): boolean =>
   Boolean(
     source.stat_cost ||
-      source.stat_compensation ||
-      source.entity_energy_price ||
-      source.number_energy_price
+    source.stat_compensation ||
+    source.entity_energy_price ||
+    source.number_energy_price
   );
 
 @customElement("energy-overview-view-strategy")

src/panels/history/ha-panel-history.ts

@@ -12,7 +12,7 @@ import type {
 } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
-import { property, query, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { storage } from "../../common/decorators/storage";
@@ -52,6 +52,7 @@ import type { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
 import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
 
+@customElement("ha-panel-history")
 class HaPanelHistory extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
@@ -679,8 +680,6 @@ class HaPanelHistory extends LitElement {
   }
 }
 
-customElements.define("ha-panel-history", HaPanelHistory);
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-panel-history": HaPanelHistory;

src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts

@@ -62,9 +62,7 @@ class HuiAlarmModeCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-alarm-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-alarm-modes-card-feature-editor");
     return document.createElement("hui-alarm-modes-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -142,9 +142,7 @@ class HuiAreaControlsCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-area-controls-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-area-controls-card-feature-editor");
     return document.createElement("hui-area-controls-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts

@@ -71,9 +71,7 @@ class HuiClimateFanModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-climate-fan-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-climate-fan-modes-card-feature-editor");
     return document.createElement("hui-climate-fan-modes-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -70,9 +70,7 @@ class HuiClimateHvacModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-climate-hvac-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-climate-hvac-modes-card-feature-editor");
     return document.createElement("hui-climate-hvac-modes-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts

@@ -71,9 +71,7 @@ class HuiClimatePresetModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-climate-preset-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-climate-preset-modes-card-feature-editor");
     return document.createElement(
       "hui-climate-preset-modes-card-feature-editor"
     );

src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts

@@ -71,9 +71,7 @@ class HuiClimateSwingHorizontalModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-climate-swing-horizontal-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-climate-swing-horizontal-modes-card-feature-editor");
     return document.createElement(
       "hui-climate-swing-horizontal-modes-card-feature-editor"
     );

src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts

@@ -71,9 +71,7 @@ class HuiClimateSwingModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-climate-swing-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-climate-swing-modes-card-feature-editor");
     return document.createElement(
       "hui-climate-swing-modes-card-feature-editor"
     );

src/panels/lovelace/card-features/hui-counter-actions-card-feature.ts

@@ -79,9 +79,7 @@ class HuiCounterActionsCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-counter-actions-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-counter-actions-card-feature-editor");
     return document.createElement("hui-counter-actions-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts

@@ -68,9 +68,7 @@ class HuiFanPresetModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-fan-preset-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-fan-preset-modes-card-feature-editor");
     return document.createElement("hui-fan-preset-modes-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts

@@ -71,9 +71,7 @@ class HuiHumidifierModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-humidifier-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-humidifier-modes-card-feature-editor");
     return document.createElement("hui-humidifier-modes-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts

@@ -128,9 +128,7 @@ class HuiLawnMowerCommandCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-lawn-mower-commands-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-lawn-mower-commands-card-feature-editor");
     return document.createElement(
       "hui-lawn-mower-commands-card-feature-editor"
     );

src/panels/lovelace/card-features/hui-media-player-volume-buttons-card-feature.ts

@@ -60,9 +60,7 @@ class HuiMediaPlayerVolumeButtonsCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-media-player-volume-buttons-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-media-player-volume-buttons-card-feature-editor");
     return document.createElement(
       "hui-media-player-volume-buttons-card-feature-editor"
     );

src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts

@@ -57,9 +57,7 @@ class HuiNumericInputCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-numeric-input-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-numeric-input-card-feature-editor");
     return document.createElement("hui-numeric-input-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-select-options-card-feature.ts

@@ -64,9 +64,7 @@ class HuiSelectOptionsCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-select-options-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-select-options-card-feature-editor");
     return document.createElement("hui-select-options-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -54,9 +54,7 @@ class HuiHistoryChartCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-trend-graph-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-trend-graph-card-feature-editor");
     return document.createElement("hui-trend-graph-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-update-actions-card-feature.ts

@@ -56,9 +56,7 @@ class HuiUpdateActionsCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-update-actions-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-update-actions-card-feature-editor");
     return document.createElement("hui-update-actions-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts

@@ -172,9 +172,7 @@ class HuiVacuumCommandCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-vacuum-commands-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-vacuum-commands-card-feature-editor");
     return document.createElement("hui-vacuum-commands-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -73,9 +73,7 @@ class HuiWaterHeaterOperationModeCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import(
-      "../editor/config-elements/hui-water-heater-operation-modes-card-feature-editor"
-    );
+    await import("../editor/config-elements/hui-water-heater-operation-modes-card-feature-editor");
     return document.createElement(
       "hui-water-heater-operation-modes-card-feature-editor"
     );

src/panels/lovelace/cards/hui-grid-card.ts

@@ -1,5 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css } from "lit";
+import { customElement } from "lit/decorators";
 import { computeCardSize } from "../common/compute-card-size";
 import type { LovelaceCardEditor } from "../types";
 import { HuiStackCard } from "./hui-stack-card";
@@ -12,6 +13,7 @@ const SQUARE_ROW_HEIGHTS_BY_COLUMNS = {
   3: 2,
 };
 
+@customElement("hui-grid-card")
 class HuiGridCard extends HuiStackCard<GridCardConfig> {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-grid-card-editor");
@@ -115,5 +117,3 @@ declare global {
     "hui-grid-card": HuiGridCard;
   }
 }
-
-customElements.define("hui-grid-card", HuiGridCard);

src/panels/lovelace/cards/hui-picture-card.ts

@@ -182,12 +182,12 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
         class=${classMap({
           clickable: Boolean(
             (this._config.image_entity && !this._config.tap_action) ||
-              (this._config.tap_action &&
-                this._config.tap_action.action !== "none") ||
-              (this._config.hold_action &&
-                this._config.hold_action.action !== "none") ||
-              (this._config.double_tap_action &&
-                this._config.double_tap_action.action !== "none")
+            (this._config.tap_action &&
+              this._config.tap_action.action !== "none") ||
+            (this._config.hold_action &&
+              this._config.hold_action.action !== "none") ||
+            (this._config.double_tap_action &&
+              this._config.double_tap_action.action !== "none")
           ),
         })}
       >

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -207,9 +207,9 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       hasAction(this._config.tap_action) ||
       Boolean(
         !this._config.tap_action &&
-          (this._config.camera_image ||
-            this._config.image_entity ||
-            this._config.entity)
+        (this._config.camera_image ||
+          this._config.image_entity ||
+          this._config.entity)
       );
 
     return html`

src/panels/lovelace/cards/hui-vertical-stack-card.ts

@@ -1,8 +1,10 @@
 import type { CSSResultGroup } from "lit";
 import { css } from "lit";
+import { customElement } from "lit/decorators";
 import { computeCardSize } from "../common/compute-card-size";
 import { HuiStackCard } from "./hui-stack-card";
 
+@customElement("hui-vertical-stack-card")
 class HuiVerticalStackCard extends HuiStackCard {
   public async getCardSize() {
     if (!this._cards) {
@@ -40,5 +42,3 @@ declare global {
     "hui-vertical-stack-card": HuiVerticalStackCard;
   }
 }
-
-customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);

src/panels/lovelace/cards/types.ts

@@ -183,8 +183,7 @@ export interface EnergyDevicesGraphCardConfig extends EnergyCardBaseConfig {
   modes?: ("bar" | "pie")[];
 }
 
-export interface EnergyDevicesDetailGraphCardConfig
-  extends EnergyCardBaseConfig {
+export interface EnergyDevicesDetailGraphCardConfig extends EnergyCardBaseConfig {
   type: "energy-devices-detail-graph";
   title?: string;
   max_devices?: number;
@@ -202,14 +201,12 @@ export interface EnergySolarGaugeCardConfig extends EnergyCardBaseConfig {
   title?: string;
 }
 
-export interface EnergySelfSufficiencyGaugeCardConfig
-  extends EnergyCardBaseConfig {
+export interface EnergySelfSufficiencyGaugeCardConfig extends EnergyCardBaseConfig {
   type: "energy-self-sufficiency-gauge";
   title?: string;
 }
 
-export interface EnergyGridNeutralityGaugeCardConfig
-  extends EnergyCardBaseConfig {
+export interface EnergyGridNeutralityGaugeCardConfig extends EnergyCardBaseConfig {
   type: "energy-grid-neutrality-gauge";
   title?: string;
 }

src/panels/lovelace/common/directives/action-handler-directive.ts

@@ -1,5 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { noChange } from "lit";
+import { customElement } from "lit/decorators";
 import type { AttributePart, DirectiveParameters } from "lit/directive";
 import { directive, Directive } from "lit/directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -32,6 +33,7 @@ declare global {
   }
 }
 
+@customElement("action-handler")
 class ActionHandler extends HTMLElement implements ActionHandlerType {
   public holdTime = 500;
 
@@ -43,6 +45,7 @@ class ActionHandler extends HTMLElement implements ActionHandlerType {
 
   private dblClickTimeout?: number;
 
+  // eslint-disable-next-line lit/lifecycle-super -- not a LitElement
   public connectedCallback() {
     Object.assign(this.style, {
       position: "fixed",
@@ -226,8 +229,6 @@ class ActionHandler extends HTMLElement implements ActionHandlerType {
   }
 }
 
-customElements.define("action-handler", ActionHandler);
-
 const getActionHandler = (): ActionHandlerType => {
   const body = document.body;
   if (body.querySelector("action-handler")) {

src/panels/lovelace/editor/types.ts

@@ -43,8 +43,9 @@ export interface ConfigError {
   message: string;
 }
 
-export interface EntitiesEditorEvent<T extends EntityConfig = EntityConfig>
-  extends CustomEvent {
+export interface EntitiesEditorEvent<
+  T extends EntityConfig = EntityConfig,
+> extends CustomEvent {
   detail: {
     entities?: T[];
     item?: any;

src/panels/lovelace/elements/hui-conditional-element.ts

@@ -1,3 +1,4 @@
+import { customElement } from "lit/decorators";
 import type { HomeAssistant } from "../../../types";
 import { createStyledHuiElement } from "../cards/picture-elements/create-styled-hui-element";
 import {
@@ -11,11 +12,10 @@ import type {
   LovelaceElementConfig,
 } from "./types";
 
+@customElement("hui-conditional-element")
 class HuiConditionalElement extends HTMLElement implements LovelaceElement {
   public static async getConfigElement(): Promise<LovelacePictureElementEditor> {
-    await import(
-      "../editor/config-elements/elements/hui-conditional-element-editor"
-    );
+    await import("../editor/config-elements/elements/hui-conditional-element-editor");
     return document.createElement("hui-conditional-element-editor");
   }
 
@@ -86,5 +86,3 @@ declare global {
     "hui-conditional-element": HuiConditionalElement;
   }
 }
-
-customElements.define("hui-conditional-element", HuiConditionalElement);

src/panels/lovelace/elements/hui-service-button-element.ts

@@ -11,9 +11,7 @@ export class HuiServiceButtonElement
   implements LovelaceElement
 {
   public static async getConfigElement(): Promise<LovelacePictureElementEditor> {
-    await import(
-      "../editor/config-elements/elements/hui-service-button-element-editor"
-    );
+    await import("../editor/config-elements/elements/hui-service-button-element-editor");
     return document.createElement("hui-service-button-element-editor");
   }
 

src/panels/lovelace/elements/hui-state-badge-element.ts

@@ -24,9 +24,7 @@ export class HuiStateBadgeElement
   implements LovelaceElement
 {
   public static async getConfigElement(): Promise<LovelacePictureElementEditor> {
-    await import(
-      "../editor/config-elements/elements/hui-state-badge-element-editor"
-    );
+    await import("../editor/config-elements/elements/hui-state-badge-element-editor");
     return document.createElement("hui-state-badge-element-editor");
   }
 

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -21,9 +21,7 @@ import type { LovelaceElement, StateIconElementConfig } from "./types";
 @customElement("hui-state-icon-element")
 export class HuiStateIconElement extends LitElement implements LovelaceElement {
   public static async getConfigElement(): Promise<LovelacePictureElementEditor> {
-    await import(
-      "../editor/config-elements/elements/hui-state-icon-element-editor"
-    );
+    await import("../editor/config-elements/elements/hui-state-icon-element-editor");
     return document.createElement("hui-state-icon-element-editor");
   }
 

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -20,9 +20,7 @@ import type { LovelaceElement, StateLabelElementConfig } from "./types";
 @customElement("hui-state-label-element")
 class HuiStateLabelElement extends LitElement implements LovelaceElement {
   public static async getConfigElement(): Promise<LovelacePictureElementEditor> {
-    await import(
-      "../editor/config-elements/elements/hui-state-label-element-editor"
-    );
+    await import("../editor/config-elements/elements/hui-state-label-element-editor");
     return document.createElement("hui-state-label-element-editor");
   }
 

src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts

@@ -39,9 +39,7 @@ export class HuiEntityHeadingBadge
   implements LovelaceHeadingBadge
 {
   public static async getConfigElement(): Promise<LovelaceHeadingBadgeEditor> {
-    await import(
-      "../editor/heading-badge-editor/hui-entity-heading-badge-editor"
-    );
+    await import("../editor/heading-badge-editor/hui-entity-heading-badge-editor");
     return document.createElement("hui-heading-entity-editor");
   }
 

src/panels/lovelace/hui-root.ts

@@ -662,10 +662,10 @@ class HUIRoot extends LitElement {
   private _isVisible = (view: LovelaceViewConfig) =>
     Boolean(
       this._editMode ||
-        view.visible === undefined ||
-        view.visible === true ||
-        (Array.isArray(view.visible) &&
-          view.visible.some((show) => show.user === this.hass!.user?.id))
+      view.visible === undefined ||
+      view.visible === true ||
+      (Array.isArray(view.visible) &&
+        view.visible.some((show) => show.user === this.hass!.user?.id))
     );
 
   private _clearParam(param: string) {

src/panels/lovelace/strategies/iframe/iframe-dashboard-strategy.ts

@@ -21,9 +21,7 @@ export class IframeDashboardStrategy extends ReactiveElement {
   }
 
   public static async getConfigElement(): Promise<LovelaceStrategyEditor> {
-    await import(
-      "../../editor/dashboard-strategy-editor/hui-iframe-dashboard-strategy-editor"
-    );
+    await import("../../editor/dashboard-strategy-editor/hui-iframe-dashboard-strategy-editor");
     return document.createElement("hui-iframe-dashboard-strategy-editor");
   }
 

src/panels/lovelace/strategies/original-states/original-states-dashboard-strategy.ts

@@ -22,9 +22,7 @@ export class OriginalStatesDashboardStrategy extends ReactiveElement {
   }
 
   public static async getConfigElement(): Promise<LovelaceStrategyEditor> {
-    await import(
-      "../../editor/dashboard-strategy-editor/hui-original-states-dashboard-strategy-editor"
-    );
+    await import("../../editor/dashboard-strategy-editor/hui-original-states-dashboard-strategy-editor");
     return document.createElement(
       "hui-original-states-dashboard-strategy-editor"
     );

src/panels/lovelace/strategies/types.ts

@@ -12,14 +12,11 @@ export interface LovelaceStrategy<T = any> {
   configRequired?: boolean;
 }
 
-export interface LovelaceDashboardStrategy
-  extends LovelaceStrategy<LovelaceConfig> {}
+export interface LovelaceDashboardStrategy extends LovelaceStrategy<LovelaceConfig> {}
 
-export interface LovelaceViewStrategy
-  extends LovelaceStrategy<LovelaceViewConfig> {}
+export interface LovelaceViewStrategy extends LovelaceStrategy<LovelaceViewConfig> {}
 
-export interface LovelaceSectionStrategy
-  extends LovelaceStrategy<LovelaceSectionConfig> {}
+export interface LovelaceSectionStrategy extends LovelaceStrategy<LovelaceSectionConfig> {}
 
 export interface LovelaceStrategyEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceStrategyConfig): void;

src/panels/lovelace/types.ts

@@ -112,8 +112,7 @@ export interface LovelaceBadgeConstructor extends Constructor<LovelaceBadge> {
   getConfigForm?: () => LovelaceConfigForm;
 }
 
-export interface LovelaceHeaderFooterConstructor
-  extends Constructor<LovelaceHeaderFooter> {
+export interface LovelaceHeaderFooterConstructor extends Constructor<LovelaceHeaderFooter> {
   getStubConfig?: (
     hass: HomeAssistant,
     entities: string[],
@@ -126,8 +125,7 @@ export interface LovelaceRowConstructor extends Constructor<LovelaceRow> {
   getConfigElement?: () => LovelaceRowEditor;
 }
 
-export interface LovelaceElementConstructor
-  extends Constructor<LovelaceElement> {
+export interface LovelaceElementConstructor extends Constructor<LovelaceElement> {
   getConfigElement?: () => LovelacePictureElementEditor;
   getStubConfig?: (
     hass: HomeAssistant,
@@ -151,8 +149,7 @@ export interface LovelaceBadgeEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceBadgeConfig): void;
 }
 
-export interface LovelaceHeaderFooterEditor
-  extends LovelaceGenericElementEditor {
+export interface LovelaceHeaderFooterEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceHeaderFooterConfig): void;
 }
 
@@ -160,8 +157,7 @@ export interface LovelaceRowEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceRowConfig): void;
 }
 
-export interface LovelacePictureElementEditor
-  extends LovelaceGenericElementEditor {
+export interface LovelacePictureElementEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceElementConfig): void;
 }
 
@@ -184,8 +180,7 @@ export interface LovelaceCardFeature extends HTMLElement {
   position?: LovelaceCardFeaturePosition;
 }
 
-export interface LovelaceCardFeatureConstructor
-  extends Constructor<LovelaceCardFeature> {
+export interface LovelaceCardFeatureConstructor extends Constructor<LovelaceCardFeature> {
   getStubConfig?: (
     hass: HomeAssistant,
     context?: LovelaceCardFeatureContext
@@ -198,8 +193,7 @@ export interface LovelaceCardFeatureConstructor
   isSupported?: (stateObj?: HassEntity) => boolean;
 }
 
-export interface LovelaceCardFeatureEditor
-  extends LovelaceGenericElementEditor {
+export interface LovelaceCardFeatureEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceCardFeatureConfig): void;
 }
 
@@ -209,8 +203,7 @@ export interface LovelaceHeadingBadge extends HTMLElement {
   setConfig(config: LovelaceHeadingBadgeConfig);
 }
 
-export interface LovelaceHeadingBadgeConstructor
-  extends Constructor<LovelaceHeadingBadge> {
+export interface LovelaceHeadingBadgeConstructor extends Constructor<LovelaceHeadingBadge> {
   getStubConfig?: (
     hass: HomeAssistant,
     stateObj?: HassEntity
@@ -222,7 +215,6 @@ export interface LovelaceHeadingBadgeConstructor
   };
 }
 
-export interface LovelaceHeadingBadgeEditor
-  extends LovelaceGenericElementEditor {
+export interface LovelaceHeadingBadgeEditor extends LovelaceGenericElementEditor {
   setConfig(config: LovelaceHeadingBadgeConfig): void;
 }

src/panels/lovelace/views/hui-masonry-view.ts

@@ -1,7 +1,7 @@
 import { mdiPlus } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/entity/ha-state-label-badge";
@@ -33,6 +33,7 @@ const getColumnIndex = (columnSizes: number[], size: number) => {
   return minIndex;
 };
 
+@customElement("hui-masonry-view")
 export class MasonryView extends LitElement implements LovelaceViewElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -356,5 +357,3 @@ declare global {
     "hui-masonry-view": MasonryView;
   }
 }
-
-customElements.define("hui-masonry-view", MasonryView);