Bumped version to 20251201.0

Fix floor compare

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+        uses: github/codeql-action/init@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
         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@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+        uses: github/codeql-action/autobuild@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4
 
       # ℹ️ 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@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+        uses: github/codeql-action/analyze@e12f0178983d466f2f6028f5cc7a6d786fd97f4b # v4.31.4

.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@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # 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@c45aaa919ef85620af54242a241ac17a8fa35983 # v3.2.1
+        uses: relative-ci/agent-action@feb19ddc698445db27401f1490f6ac182da0816f # v3.2.0
         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@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6.1.0
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
         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.11.0
+        uses: home-assistant/wheels@2025.10.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@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
         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@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

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

@@ -305,8 +305,9 @@ 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!
@@ -346,8 +347,9 @@ 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.6",
-    "@vaadin/vaadin-themable-mixin": "24.9.6",
+    "@vaadin/combo-box": "24.9.5",
+    "@vaadin/vaadin-themable-mixin": "24.9.5",
     "@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.7",
+    "@bundle-stats/plugin-webpack-filter": "4.21.6",
     "@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.5",
+    "@rspack/core": "1.6.4",
     "@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.14",
+    "@vitest/coverage-v8": "4.0.13",
     "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": "13.0.0",
+    "glob": "12.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.7.1",
+    "prettier": "3.6.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.48.0",
+    "typescript-eslint": "8.47.0",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.14",
+    "vitest": "4.0.13",
     "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      = "20251029.0"
+version      = "20251201.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/translations/entity-state.ts

@@ -45,8 +45,9 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +27,6 @@ const safeParseFloat = (value) => {
   return isFinite(parsed) ? parsed : null;
 };
 
-@customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -796,6 +795,7 @@ 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 = "asc";
+      this.sortDirection = null;
     }
 
-    this.sortColumn = columnId;
+    this.sortColumn = this.sortDirection === null ? undefined : 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +17,6 @@ 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;
 
@@ -266,3 +265,5 @@ 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: var(--ha-space-4);
-          --md-list-item-trailing-space: var(--ha-space-2);
+          --md-list-item-leading-space: 8px;
+          --md-list-item-trailing-space: 8px;
           --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,11 +1,10 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators";
+import { 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;
 
@@ -90,6 +89,8 @@ class HaEntityMarker extends LitElement {
   `;
 }
 
+customElements.define("ha-entity-marker", HaEntityMarker);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-entity-marker": HaEntityMarker;

src/data/floor_registry.ts

@@ -1,4 +1,3 @@
-import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { AreaRegistryEntry } from "./area_registry";
 import type { RegistryEntry } from "./registry";
@@ -75,27 +74,3 @@ export const getFloorAreaLookup = (
   }
   return floorAreaLookup;
 };
-
-export const floorCompare =
-  (entries?: HomeAssistant["floors"], order?: string[]) =>
-  (a: string, b: string) => {
-    const indexA = order ? order.indexOf(a) : -1;
-    const indexB = order ? order.indexOf(b) : -1;
-    if (indexA === -1 && indexB === -1) {
-      const floorA = entries?.[a];
-      const floorB = entries?.[b];
-      if (floorA && floorB && floorA.level !== floorB.level) {
-        return (floorB.level ?? -9999) - (floorA.level ?? -9999);
-      }
-      const nameA = floorA?.name ?? a;
-      const nameB = floorB?.name ?? b;
-      return stringCompare(nameA, nameB);
-    }
-    if (indexA === -1) {
-      return 1;
-    }
-    if (indexB === -1) {
-      return -1;
-    }
-    return indexA - indexB;
-  };

src/data/hassio/backup.ts

@@ -47,7 +47,8 @@ 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,7 +18,8 @@ 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,7 +18,8 @@ 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,7 +11,8 @@ 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,7 +29,8 @@ 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,7 +106,8 @@ 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,7 +32,8 @@ 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,9 +19,8 @@ declare global {
   }
 }
 
-export interface HassDialog<
-  T = HASSDomEvents[ValidHassDomEvent],
-> extends HTMLElement {
+export interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]>
+  extends HTMLElement {
   showDialog(params: T);
   closeDialog?: () => boolean;
 }

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

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { slugify } from "../../../common/string/slugify";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-camera-stream";
@@ -9,7 +9,6 @@ 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;
 
@@ -113,6 +112,8 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +32,6 @@ 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;
 
@@ -568,6 +567,8 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +13,6 @@ import {
   importMoreInfoControl,
 } from "../state_more_info_control";
 
-@customElement("more-info-group")
 class MoreInfoGroup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -107,6 +106,8 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +15,6 @@ 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;
 
@@ -250,6 +249,8 @@ 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,10 +1,9 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { 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;
 
@@ -121,6 +120,8 @@ class HaInitPage extends LitElement {
   `;
 }
 
+customElements.define("ha-init-page", HaInitPage);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-init-page": HaInitPage;

src/layouts/hass-subpage.ts

@@ -128,8 +128,6 @@ 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 = "asc";
+      this._sortDirection = null;
     }
-    this._sortColumn = columnId;
+    this._sortColumn = this._sortDirection === null ? undefined : 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 { customElement, property, query, state } from "lit/decorators";
+import { property, query, state } from "lit/decorators";
 import type { LocalizeKeys } from "../common/translations/localize";
 import "../components/ha-button";
 import "../components/ha-icon-button";
@@ -26,7 +26,6 @@ export interface ToastActionParams {
     | { translationKey: LocalizeKeys; args?: Record<string, string> };
 }
 
-@customElement("notification-manager")
 class NotificationManager extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -116,6 +115,8 @@ 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,7 +90,9 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +26,6 @@ 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;
 
@@ -272,3 +271,8 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +40,6 @@ 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;
 
@@ -427,3 +426,5 @@ declare global {
     "dialog-area-registry-detail": DialogAreaDetail;
   }
 }
+
+customElements.define("dialog-area-registry-detail", DialogAreaDetail);

src/panels/config/areas/dialog-areas-floors-order.ts

@@ -1,480 +0,0 @@
-import { mdiClose, mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import {
-  type AreasFloorHierarchy,
-  getAreasFloorHierarchy,
-  getAreasOrder,
-  getFloorOrder,
-} from "../../../common/areas/areas-floor-hierarchy";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-button";
-import "../../../components/ha-dialog-header";
-import "../../../components/ha-floor-icon";
-import "../../../components/ha-icon";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../components/ha-md-dialog";
-import "../../../components/ha-md-list";
-import "../../../components/ha-md-list-item";
-import "../../../components/ha-sortable";
-import "../../../components/ha-svg-icon";
-import type { AreaRegistryEntry } from "../../../data/area_registry";
-import {
-  reorderAreaRegistryEntries,
-  updateAreaRegistryEntry,
-} from "../../../data/area_registry";
-import { reorderFloorRegistryEntries } from "../../../data/floor_registry";
-import { haStyle, haStyleDialog } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-import { showToast } from "../../../util/toast";
-import type { AreasFloorsOrderDialogParams } from "./show-dialog-areas-floors-order";
-
-const UNASSIGNED_FLOOR = "__unassigned__";
-
-interface FloorChange {
-  areaId: string;
-  floorId: string | null;
-}
-
-@customElement("dialog-areas-floors-order")
-class DialogAreasFloorsOrder extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _open = false;
-
-  @state() private _hierarchy?: AreasFloorHierarchy;
-
-  @state() private _saving = false;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  public async showDialog(
-    _params: AreasFloorsOrderDialogParams
-  ): Promise<void> {
-    this._open = true;
-    this._computeHierarchy();
-  }
-
-  private _computeHierarchy(): void {
-    this._hierarchy = getAreasFloorHierarchy(
-      Object.values(this.hass.floors),
-      Object.values(this.hass.areas)
-    );
-  }
-
-  public closeDialog(): void {
-    this._dialog?.close();
-  }
-
-  private _dialogClosed(): void {
-    this._open = false;
-    this._hierarchy = undefined;
-    this._saving = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._open || !this._hierarchy) {
-      return nothing;
-    }
-
-    const dialogTitle = this.hass.localize(
-      "ui.panel.config.areas.dialog.reorder_title"
-    );
-
-    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-          <span slot="title" .title=${dialogTitle}>${dialogTitle}</span>
-        </ha-dialog-header>
-        <div slot="content" class="content">
-          <ha-sortable
-            handle-selector=".floor-handle"
-            draggable-selector=".floor"
-            @item-moved=${this._floorMoved}
-            invert-swap
-          >
-            <div class="floors">
-              ${repeat(
-                this._hierarchy.floors,
-                (floor) => floor.id,
-                (floor) => this._renderFloor(floor)
-              )}
-            </div>
-          </ha-sortable>
-          ${this._hierarchy.areas.length > 0
-            ? this._renderUnassignedAreas()
-            : nothing}
-        </div>
-        <div slot="actions">
-          <ha-button @click=${this.closeDialog} appearance="plain">
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button @click=${this._save} .disabled=${this._saving}>
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  private _renderFloor(floor: { id: string; areas: string[] }) {
-    const floorEntry = this.hass.floors[floor.id];
-    if (!floorEntry) {
-      return nothing;
-    }
-
-    return html`
-      <div class="floor">
-        <div class="floor-header">
-          <ha-floor-icon .floor=${floorEntry}></ha-floor-icon>
-          <span class="floor-name">${floorEntry.name}</span>
-          <ha-svg-icon
-            class="floor-handle"
-            .path=${mdiDragHorizontalVariant}
-          ></ha-svg-icon>
-        </div>
-        <ha-sortable
-          handle-selector=".area-handle"
-          draggable-selector="ha-md-list-item"
-          @item-moved=${this._areaMoved}
-          @item-added=${this._areaAdded}
-          group="areas"
-          .floor=${floor.id}
-        >
-          <ha-md-list>
-            ${floor.areas.length > 0
-              ? floor.areas.map((areaId) => this._renderArea(areaId))
-              : html`<p class="empty">
-                  ${this.hass.localize(
-                    "ui.panel.config.areas.dialog.empty_floor"
-                  )}
-                </p>`}
-          </ha-md-list>
-        </ha-sortable>
-      </div>
-    `;
-  }
-
-  private _renderUnassignedAreas() {
-    return html`
-      <div class="floor unassigned">
-        <div class="floor-header">
-          <span class="floor-name">
-            ${this.hass.localize(
-              "ui.panel.config.areas.dialog.unassigned_areas"
-            )}
-          </span>
-        </div>
-        <ha-sortable
-          handle-selector=".area-handle"
-          draggable-selector="ha-md-list-item"
-          @item-moved=${this._areaMoved}
-          group="areas"
-          .floor=${UNASSIGNED_FLOOR}
-          no-drop
-        >
-          <ha-md-list>
-            ${this._hierarchy!.areas.map((areaId) => this._renderArea(areaId))}
-          </ha-md-list>
-        </ha-sortable>
-      </div>
-    `;
-  }
-
-  private _renderArea(areaId: string) {
-    const area = this.hass.areas[areaId];
-    if (!area) {
-      return nothing;
-    }
-
-    return html`
-      <ha-md-list-item .sortableData=${area}>
-        ${area.icon
-          ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
-          : html`<ha-svg-icon
-              slot="start"
-              .path=${mdiTextureBox}
-            ></ha-svg-icon>`}
-        <span slot="headline">${area.name}</span>
-        <ha-svg-icon
-          class="area-handle"
-          slot="end"
-          .path=${mdiDragHorizontalVariant}
-        ></ha-svg-icon>
-      </ha-md-list-item>
-    `;
-  }
-
-  private _floorMoved(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._hierarchy) {
-      return;
-    }
-
-    const { oldIndex, newIndex } = ev.detail;
-    const newFloors = [...this._hierarchy.floors];
-    const [movedFloor] = newFloors.splice(oldIndex, 1);
-    newFloors.splice(newIndex, 0, movedFloor);
-
-    this._hierarchy = {
-      ...this._hierarchy,
-      floors: newFloors,
-    };
-  }
-
-  private _areaMoved(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._hierarchy) {
-      return;
-    }
-
-    const { floor } = ev.currentTarget as HTMLElement & { floor: string };
-    const { oldIndex, newIndex } = ev.detail;
-    const floorId = floor === UNASSIGNED_FLOOR ? null : floor;
-
-    if (floorId === null) {
-      // Reorder unassigned areas
-      const newAreas = [...this._hierarchy.areas];
-      const [movedArea] = newAreas.splice(oldIndex, 1);
-      newAreas.splice(newIndex, 0, movedArea);
-
-      this._hierarchy = {
-        ...this._hierarchy,
-        areas: newAreas,
-      };
-    } else {
-      // Reorder areas within a floor
-      this._hierarchy = {
-        ...this._hierarchy,
-        floors: this._hierarchy.floors.map((f) => {
-          if (f.id === floorId) {
-            const newAreas = [...f.areas];
-            const [movedArea] = newAreas.splice(oldIndex, 1);
-            newAreas.splice(newIndex, 0, movedArea);
-            return { ...f, areas: newAreas };
-          }
-          return f;
-        }),
-      };
-    }
-  }
-
-  private _areaAdded(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._hierarchy) {
-      return;
-    }
-
-    const { floor } = ev.currentTarget as HTMLElement & { floor: string };
-    const { data: area, index } = ev.detail as {
-      data: AreaRegistryEntry;
-      index: number;
-    };
-
-    const newFloorId = floor === UNASSIGNED_FLOOR ? null : floor;
-
-    // Update hierarchy
-    this._hierarchy = {
-      ...this._hierarchy,
-      floors: this._hierarchy.floors.map((f) => {
-        if (f.id === newFloorId) {
-          // Add to new floor at the specified index
-          const newAreas = [...f.areas];
-          newAreas.splice(index, 0, area.area_id);
-          return { ...f, areas: newAreas };
-        }
-        // Remove from old floor
-        return {
-          ...f,
-          areas: f.areas.filter((id) => id !== area.area_id),
-        };
-      }),
-      // Remove from unassigned if moving to a floor
-      areas:
-        newFloorId !== null
-          ? this._hierarchy.areas.filter((id) => id !== area.area_id)
-          : this._hierarchy.areas,
-    };
-  }
-
-  private _computeFloorChanges(): FloorChange[] {
-    if (!this._hierarchy) {
-      return [];
-    }
-
-    const changes: FloorChange[] = [];
-
-    // Check areas assigned to floors
-    for (const floor of this._hierarchy.floors) {
-      for (const areaId of floor.areas) {
-        const originalFloorId = this.hass.areas[areaId]?.floor_id ?? null;
-        if (floor.id !== originalFloorId) {
-          changes.push({ areaId, floorId: floor.id });
-        }
-      }
-    }
-
-    // Check unassigned areas
-    for (const areaId of this._hierarchy.areas) {
-      const originalFloorId = this.hass.areas[areaId]?.floor_id ?? null;
-      if (originalFloorId !== null) {
-        changes.push({ areaId, floorId: null });
-      }
-    }
-
-    return changes;
-  }
-
-  private async _save(): Promise<void> {
-    if (!this._hierarchy || this._saving) {
-      return;
-    }
-
-    this._saving = true;
-
-    try {
-      const areaOrder = getAreasOrder(this._hierarchy);
-      const floorOrder = getFloorOrder(this._hierarchy);
-
-      // Update floor assignments for areas that changed floors
-      const floorChanges = this._computeFloorChanges();
-      const floorChangePromises = floorChanges.map(({ areaId, floorId }) =>
-        updateAreaRegistryEntry(this.hass, areaId, {
-          floor_id: floorId,
-        })
-      );
-
-      await Promise.all(floorChangePromises);
-
-      // Reorder areas and floors
-      await reorderAreaRegistryEntries(this.hass, areaOrder);
-      await reorderFloorRegistryEntries(this.hass, floorOrder);
-
-      this.closeDialog();
-    } catch (err: any) {
-      showToast(this, {
-        message:
-          err.message ||
-          this.hass.localize("ui.panel.config.areas.dialog.reorder_failed"),
-      });
-      this._saving = false;
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-md-dialog {
-          min-width: 600px;
-          max-height: 90%;
-          --dialog-content-padding: 8px 24px;
-        }
-
-        @media all and (max-width: 600px), all and (max-height: 500px) {
-          ha-md-dialog {
-            --md-dialog-container-shape: 0;
-            min-width: 100%;
-            min-height: 100%;
-          }
-        }
-
-        .floors {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
-        .floor {
-          border: 1px solid var(--divider-color);
-          border-radius: var(--ha-card-border-radius, 12px);
-          overflow: hidden;
-        }
-
-        .floor.unassigned {
-          border-style: dashed;
-          margin-top: 16px;
-        }
-
-        .floor-header {
-          display: flex;
-          align-items: center;
-          padding: 12px 16px;
-          background-color: var(--secondary-background-color);
-          gap: 12px;
-        }
-
-        .floor-name {
-          flex: 1;
-          font-weight: var(--ha-font-weight-medium);
-        }
-
-        .floor-handle {
-          cursor: grab;
-          color: var(--secondary-text-color);
-        }
-
-        .unassigned .floor-header {
-          background-color: transparent;
-        }
-
-        ha-md-list {
-          padding: 0;
-          --md-list-item-leading-space: 16px;
-          --md-list-item-trailing-space: 16px;
-          display: flex;
-          flex-direction: column;
-        }
-
-        ha-md-list-item {
-          --md-list-item-one-line-container-height: 48px;
-          --md-list-item-container-shape: 0;
-        }
-
-        ha-md-list-item.sortable-drag {
-          border-radius: 0;
-        }
-
-        .area-handle {
-          cursor: grab;
-          color: var(--secondary-text-color);
-        }
-
-        .empty {
-          text-align: center;
-          color: var(--secondary-text-color);
-          font-style: italic;
-          margin: 0;
-          padding: 12px 16px;
-          order: 1;
-        }
-
-        ha-md-list:has(ha-md-list-item) .empty {
-          display: none;
-        }
-
-        .content {
-          padding-top: 16px;
-          padding-bottom: 16px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-areas-floors-order": DialogAreasFloorsOrder;
-  }
-}

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 { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -27,7 +27,6 @@ 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;
 
@@ -145,6 +144,10 @@ class DialogFloorDetail extends LitElement {
                 "ui.panel.config.floors.editor.level"
               )}
               type="number"
+              .helper=${this.hass.localize(
+                "ui.panel.config.floors.editor.level_helper"
+              )}
+              helperPersistent
             ></ha-textfield>
 
             <ha-icon-picker
@@ -358,3 +361,5 @@ declare global {
     "dialog-floor-registry-detail": DialogFloorDetail;
   }
 }
+
+customElements.define("dialog-floor-registry-detail", DialogFloorDetail);

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

@@ -2,10 +2,10 @@ import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
+  mdiDragHorizontalVariant,
   mdiHelpCircle,
   mdiPencil,
   mdiPlus,
-  mdiSort,
 } from "@mdi/js";
 import {
   css,
@@ -21,6 +21,7 @@ import memoizeOne from "memoize-one";
 import {
   getAreasFloorHierarchy,
   getAreasOrder,
+  getFloorOrder,
   type AreasFloorHierarchy,
 } from "../../../common/areas/areas-floor-hierarchy";
 import { formatListWithAnds } from "../../../common/string/format-list";
@@ -41,6 +42,7 @@ import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import {
   createFloorRegistryEntry,
   deleteFloorRegistryEntry,
+  reorderFloorRegistryEntries,
   updateFloorRegistryEntry,
 } from "../../../data/floor_registry";
 import {
@@ -56,7 +58,6 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-import { showAreasFloorsOrderDialog } from "./show-dialog-areas-floors-order";
 import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
 
 const UNASSIGNED_FLOOR = "__unassigned__";
@@ -175,90 +176,94 @@ export class HaConfigAreasDashboard extends LitElement {
         .route=${this.route}
         has-fab
       >
-        <ha-button-menu slot="toolbar-icon">
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-          <ha-list-item graphic="icon" @click=${this._showReorderDialog}>
-            <ha-svg-icon .path=${mdiSort} slot="graphic"></ha-svg-icon>
-            ${this.hass.localize("ui.panel.config.areas.picker.reorder")}
-          </ha-list-item>
-          <ha-list-item graphic="icon" @click=${this._showHelp}>
-            <ha-svg-icon .path=${mdiHelpCircle} slot="graphic"></ha-svg-icon>
-            ${this.hass.localize("ui.common.help")}
-          </ha-list-item>
-        </ha-button-menu>
+        <ha-icon-button
+          slot="toolbar-icon"
+          .label=${this.hass.localize("ui.common.help")}
+          .path=${mdiHelpCircle}
+          @click=${this._showHelp}
+        ></ha-icon-button>
         <div class="container">
-          <div class="floors">
-            ${this._hierarchy.floors.map(({ areas, id }) => {
-              const floor = this.hass.floors[id];
-              if (!floor) {
-                return nothing;
-              }
-              return html`
-                <div class="floor">
-                  <div class="header">
-                    <h2>
-                      <ha-floor-icon .floor=${floor}></ha-floor-icon>
-                      ${floor.name}
-                    </h2>
-                    <div class="actions">
-                      <ha-button-menu
-                        .floor=${floor}
-                        @action=${this._handleFloorAction}
-                      >
-                        <ha-icon-button
-                          slot="trigger"
-                          .path=${mdiDotsVertical}
-                        ></ha-icon-button>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
-                            .path=${mdiPencil}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
-                            "ui.panel.config.areas.picker.floor.edit_floor"
-                          )}</ha-list-item
+          <ha-sortable
+            handle-selector=".handle"
+            draggable-selector=".floor"
+            @item-moved=${this._floorMoved}
+            .options=${SORT_OPTIONS}
+            group="floors"
+            invert-swap
+          >
+            <div class="floors">
+              ${this._hierarchy.floors.map(({ areas, id }) => {
+                const floor = this.hass.floors[id];
+                if (!floor) {
+                  return nothing;
+                }
+                return html`
+                  <div class="floor">
+                    <div class="header">
+                      <h2>
+                        <ha-floor-icon .floor=${floor}></ha-floor-icon>
+                        ${floor.name}
+                      </h2>
+                      <div class="actions">
+                        <ha-svg-icon
+                          class="handle"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
+                        <ha-button-menu
+                          .floor=${floor}
+                          @action=${this._handleFloorAction}
                         >
-                        <ha-list-item class="warning" graphic="icon"
-                          ><ha-svg-icon
-                            class="warning"
-                            .path=${mdiDelete}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
-                            "ui.panel.config.areas.picker.floor.delete_floor"
-                          )}</ha-list-item
-                        >
-                      </ha-button-menu>
+                          <ha-icon-button
+                            slot="trigger"
+                            .path=${mdiDotsVertical}
+                          ></ha-icon-button>
+                          <ha-list-item graphic="icon"
+                            ><ha-svg-icon
+                              .path=${mdiPencil}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.edit_floor"
+                            )}</ha-list-item
+                          >
+                          <ha-list-item class="warning" graphic="icon"
+                            ><ha-svg-icon
+                              class="warning"
+                              .path=${mdiDelete}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.delete_floor"
+                            )}</ha-list-item
+                          >
+                        </ha-button-menu>
+                      </div>
                     </div>
+                    <ha-sortable
+                      handle-selector="a"
+                      draggable-selector="a"
+                      @item-added=${this._areaAdded}
+                      @item-moved=${this._areaMoved}
+                      group="areas"
+                      .options=${SORT_OPTIONS}
+                      .floor=${floor.floor_id}
+                    >
+                      <div class="areas">
+                        ${areas.map((areaId) => {
+                          const area = this.hass.areas[areaId];
+                          if (!area) {
+                            return nothing;
+                          }
+                          const stats = areasStats.get(area.area_id);
+                          return this._renderArea(area, stats);
+                        })}
+                      </div>
+                    </ha-sortable>
                   </div>
-                  <ha-sortable
-                    handle-selector="a"
-                    draggable-selector="a"
-                    @item-added=${this._areaAdded}
-                    @item-moved=${this._areaMoved}
-                    group="areas"
-                    .options=${SORT_OPTIONS}
-                    .floor=${floor.floor_id}
-                  >
-                    <div class="areas">
-                      ${areas.map((areaId) => {
-                        const area = this.hass.areas[areaId];
-                        if (!area) {
-                          return nothing;
-                        }
-                        const stats = areasStats.get(area.area_id);
-                        return this._renderArea(area, stats);
-                      })}
-                    </div>
-                  </ha-sortable>
-                </div>
-              `;
-            })}
-          </div>
+                `;
+              })}
+            </div>
+          </ha-sortable>
 
           ${this._hierarchy.areas.length
             ? html`
@@ -390,6 +395,51 @@ export class HaConfigAreasDashboard extends LitElement {
     });
   }
 
+  private async _floorMoved(ev) {
+    ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
+    const { oldIndex, newIndex } = ev.detail;
+
+    const reorderFloors = (
+      floors: AreasFloorHierarchy["floors"],
+      oldIdx: number,
+      newIdx: number
+    ) => {
+      const newFloors = [...floors];
+      const [movedFloor] = newFloors.splice(oldIdx, 1);
+      newFloors.splice(newIdx, 0, movedFloor);
+      return newFloors;
+    };
+
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: reorderFloors(this._hierarchy.floors, oldIndex, newIndex),
+    };
+
+    const areaOrder = getAreasOrder(this._hierarchy);
+    const floorOrder = getFloorOrder(this._hierarchy);
+
+    // Block hierarchy updates for 500ms to avoid flickering
+    // because of multiple async updates
+    this._blockHierarchyUpdateFor(500);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await reorderFloorRegistryEntries(this.hass, floorOrder);
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.floor_reorder_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
   private async _areaMoved(ev) {
     ev.stopPropagation();
     if (!this.hass || !this._hierarchy) {
@@ -552,10 +602,6 @@ export class HaConfigAreasDashboard extends LitElement {
     this._openAreaDialog();
   }
 
-  private _showReorderDialog() {
-    showAreasFloorsOrderDialog(this, {});
-  }
-
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.areas.caption"),

src/panels/config/areas/show-dialog-areas-floors-order.ts

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-
-export interface AreasFloorsOrderDialogParams {}
-
-export const loadAreasFloorsOrderDialog = () =>
-  import("./dialog-areas-floors-order");
-
-export const showAreasFloorsOrderDialog = (
-  element: HTMLElement,
-  params: AreasFloorsOrderDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-areas-floors-order",
-    dialogImport: loadAreasFloorsOrderDialog,
-    dialogParams: params,
-  });
-};

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 { customElement, property, query, state } from "lit/decorators";
+import { 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,7 +112,6 @@ declare global {
   }
 }
 
-@customElement("ha-automation-editor")
 export class HaAutomationEditor extends PreventUnsavedMixin(
   KeyboardShortcutMixin(LitElement)
 ) {
@@ -1340,3 +1339,5 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     ];
   }
 }
+
+customElements.define("ha-automation-editor", HaAutomationEditor);

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

@@ -35,8 +35,6 @@ 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,
@@ -329,19 +327,14 @@ 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
-                ? formattedTime
-                : html`
-                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
-                    <span id=${elementId}>${relativeTime(date, locale)}</span>
-                  `}
+                ? formatShortDateTimeWithConditionalYear(
+                    date,
+                    this.hass.locale,
+                    this.hass.config
+                  )
+                : relativeTime(date, locale)}
             `;
           },
         },

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 { customElement, state } from "lit/decorators";
+import { 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,7 +13,6 @@ 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;
 
@@ -156,3 +155,5 @@ declare global {
     "dialog-manage-cloudhook": DialogManageCloudhook;
   }
 }
+
+customElements.define("dialog-manage-cloudhook", DialogManageCloudhook);

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

@@ -1138,20 +1138,23 @@ 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,
@@ -1160,8 +1163,9 @@ 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,
@@ -1170,8 +1174,9 @@ 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,
@@ -1215,8 +1220,9 @@ 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);
@@ -1298,7 +1304,9 @@ 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}
@@ -1307,7 +1315,9 @@ 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/ha-config-entities.ts

@@ -116,10 +116,8 @@ 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,7 +530,9 @@ 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",
@@ -540,22 +542,30 @@ 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",
@@ -570,7 +580,9 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +14,6 @@ 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;
 
@@ -157,3 +156,5 @@ 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 { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -15,7 +15,6 @@ 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;
 
@@ -260,3 +259,5 @@ 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 { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-alert";
@@ -26,7 +26,6 @@ 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;
 
@@ -273,3 +272,5 @@ declare global {
     "dialog-system-log-detail": DialogSystemLogDetail;
   }
 }
+
+customElements.define("dialog-system-log-detail", DialogSystemLogDetail);

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 { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
@@ -43,7 +43,6 @@ const cropOptions: CropOptions = {
   aspectRatio: 1,
 };
 
-@customElement("dialog-person-detail")
 class DialogPersonDetail extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -568,3 +567,5 @@ 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 { formatShortDateTimeWithConditionalYear } from "../../../common/datetime/format_date_time";
+import { formatShortDateTime } 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,21 +301,10 @@ 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
-                ? formattedTime
-                : html`
-                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
-                    <span id=${elementId}
-                      >${relativeTime(date, this.hass.locale)}</span
-                    >
-                  `}
+                ? formatShortDateTime(date, this.hass.locale, this.hass.config)
+                : relativeTime(date, this.hass.locale)}
             `;
           },
         },

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 { customElement, property, query, state } from "lit/decorators";
+import { 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,7 +79,6 @@ 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))
 ) {
@@ -1279,6 +1278,8 @@ 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,8 +33,6 @@ 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,
@@ -304,27 +302,19 @@ 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`
-              ${dayDifference > 3
-                ? formattedTime
-                : html`
-                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
-                    <span id=${elementId}
-                      >${relativeTime(date, this.hass.locale)}</span
-                    >
-                  `}
+              ${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")}
             `;
           },
         },

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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +20,6 @@ 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;
 
@@ -298,3 +297,5 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +23,6 @@ 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;
 
@@ -368,3 +367,5 @@ 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 { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -19,7 +19,6 @@ const SCHEMA = [
   },
 ];
 
-@customElement("dialog-home-zone-detail")
 class DialogHomeZoneDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -152,3 +151,5 @@ 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 { customElement, property, state } from "lit/decorators";
+import { 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,7 +14,6 @@ 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;
 
@@ -242,3 +241,5 @@ 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 { customElement, property } from "lit/decorators";
+import { property } from "lit/decorators";
 import type { NavigateOptions } from "../../common/navigate";
 import { navigate } from "../../common/navigate";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -22,7 +22,6 @@ declare global {
   }
 }
 
-@customElement("ha-panel-custom")
 export class HaPanelCustom extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -172,3 +171,5 @@ export class HaPanelCustom extends ReactiveElement {
     iframeDoc.close();
   }
 }
+
+customElements.define("ha-panel-custom", HaPanelCustom);

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 = "asc";
+      this._sortDirection = null;
     }
-    this._sortColumn = columnId;
+    this._sortColumn = this._sortDirection === null ? undefined : 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 { customElement, property, query, state } from "lit/decorators";
+import { 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,7 +52,6 @@ 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;
 
@@ -680,6 +679,8 @@ 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,7 +62,9 @@ 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,7 +142,9 @@ 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,7 +71,9 @@ 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,7 +70,9 @@ 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,7 +71,9 @@ 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,7 +71,9 @@ 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,7 +71,9 @@ 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,7 +79,9 @@ 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,7 +68,9 @@ 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,7 +71,9 @@ 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,7 +128,9 @@ 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,7 +60,9 @@ 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,7 +57,9 @@ 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,7 +64,9 @@ 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,7 +54,9 @@ 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,7 +56,9 @@ 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,7 +172,9 @@ 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,7 +73,9 @@ 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/energy/hui-power-sources-graph-card.ts

@@ -323,9 +323,9 @@ export class HuiPowerSourcesGraphCard
     const negative: [number, number][] = [];
     Object.entries(data).forEach(([x, y]) => {
       const ts = Number(x);
-      const sumY = y.reduce((a, b) => a + b, 0);
-      positive.push([ts, Math.max(0, sumY)]);
-      negative.push([ts, Math.min(0, sumY)]);
+      const meanY = y.reduce((a, b) => a + b, 0) / y.length;
+      positive.push([ts, Math.max(0, meanY)]);
+      negative.push([ts, Math.min(0, meanY)]);
     });
     return { positive, negative };
   }

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

@@ -1,6 +1,5 @@
 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";
@@ -13,7 +12,6 @@ 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");
@@ -117,3 +115,5 @@ 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,10 +1,8 @@
 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) {
@@ -42,3 +40,5 @@ declare global {
     "hui-vertical-stack-card": HuiVerticalStackCard;
   }
 }
+
+customElements.define("hui-vertical-stack-card", HuiVerticalStackCard);

src/panels/lovelace/cards/types.ts

@@ -183,7 +183,8 @@ 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;
@@ -201,12 +202,14 @@ 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,6 +1,5 @@
 /* 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";
@@ -33,7 +32,6 @@ declare global {
   }
 }
 
-@customElement("action-handler")
 class ActionHandler extends HTMLElement implements ActionHandlerType {
   public holdTime = 500;
 
@@ -45,7 +43,6 @@ 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",
@@ -229,6 +226,8 @@ 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,9 +43,8 @@ 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,4 +1,3 @@
-import { customElement } from "lit/decorators";
 import type { HomeAssistant } from "../../../types";
 import { createStyledHuiElement } from "../cards/picture-elements/create-styled-hui-element";
 import {
@@ -12,10 +11,11 @@ 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,3 +86,5 @@ declare global {
     "hui-conditional-element": HuiConditionalElement;
   }
 }
+
+customElements.define("hui-conditional-element", HuiConditionalElement);

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

@@ -11,7 +11,9 @@ 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,7 +24,9 @@ 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,7 +21,9 @@ 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,7 +20,9 @@ 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,7 +39,9 @@ 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

@@ -635,10 +635,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/areas/helpers/areas-strategy-helper.ts

@@ -7,7 +7,6 @@ import { orderCompare } from "../../../../../common/string/compare";
 import type { AreaRegistryEntry } from "../../../../../data/area_registry";
 import { areaCompare } from "../../../../../data/area_registry";
 import type { FloorRegistryEntry } from "../../../../../data/floor_registry";
-import { floorCompare } from "../../../../../data/floor_registry";
 import type { LovelaceCardConfig } from "../../../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../../../types";
 import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature";
@@ -302,7 +301,12 @@ export const getFloors = (
   floorsOrder?: string[]
 ): FloorRegistryEntry[] => {
   const floors = Object.values(entries);
-  const compare = floorCompare(entries, floorsOrder);
+
+  if (!floorsOrder) {
+    return floors;
+  }
+
+  const compare = orderCompare(floorsOrder);
 
   return floors.sort((floorA, floorB) =>
     compare(floorA.floor_id, floorB.floor_id)

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

@@ -21,7 +21,9 @@ 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,7 +22,9 @@ 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,11 +12,14 @@ 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;