From cb0bc762b124b83ce2dcb2c290c5dd6d2e38e7e6 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 14 Jul 2023 17:40:17 +0000
Subject: [PATCH] Update dependency prettier to v3 (#17215)

* Update dependency prettier to v3

* Update config and remove .prettierignore

* Reformat

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Steve Repsher <steverep@users.noreply.github.com>
---
 .prettierignore                               |   9 -
 gallery/src/pages/automation/editor-action.ts |  21 +-
 .../src/pages/automation/editor-condition.ts  |  21 +-
 .../src/pages/automation/editor-trigger.ts    |  21 +-
 gallery/src/pages/components/ha-selector.ts   |  35 +-
 gallery/src/pages/components/ha-tip.ts        |   5 +-
 .../src/addon-view/info/hassio-addon-info.ts  |  15 +-
 .../components/supervisor-backup-content.ts   |  44 +-
 .../dialogs/network/dialog-hassio-network.ts  |  37 +-
 .../registries/dialog-hassio-registries.ts    |   9 +-
 .../dialog-hassio-repositories.ts             |   9 +-
 hassio/src/system/hassio-core-info.ts         |  15 +-
 hassio/src/system/hassio-host-info.ts         |  15 +-
 hassio/src/system/hassio-supervisor-info.ts   |  15 +-
 package.json                                  |   6 +-
 prettier.config.js                            |   3 +
 src/common/translations/localize.ts           |   2 +-
 src/components/chart/ha-chart-base.ts         |  58 +--
 .../device/ha-area-devices-picker.ts          |  11 +-
 .../device/ha-device-automation-picker.ts     |   2 +-
 src/components/device/ha-device-picker.ts     |  11 +-
 src/components/entity/ha-entities-picker.ts   |   6 +-
 src/components/entity/ha-statistic-picker.ts  |  42 +-
 src/components/entity/state-badge.ts          |   4 +-
 src/components/ha-addon-picker.ts             |  25 +-
 src/components/ha-analytics.ts                |  65 ++-
 src/components/ha-area-picker.ts              |  13 +-
 src/components/ha-button-toggle-group.ts      |   4 +-
 src/components/ha-config-entry-picker.ts      |  45 +-
 src/components/ha-control-button.ts           |   3 +-
 src/components/ha-control-circular-slider.ts  |  10 +-
 src/components/ha-control-select.ts           |   4 +-
 src/components/ha-control-slider.ts           |   7 +-
 src/components/ha-control-switch.ts           |   3 +-
 src/components/ha-form/ha-form-grid.ts        |  21 +-
 src/components/ha-form/types.ts               |   2 +-
 src/components/ha-gauge.ts                    |  12 +-
 src/components/ha-hs-color-picker.ts          |   4 +-
 src/components/ha-mount-picker.ts             |  41 +-
 .../ha-selector/ha-selector-select.ts         |  25 +-
 src/components/ha-service-picker.ts           |  13 +-
 src/components/ha-temp-color-picker.ts        |   4 +-
 src/components/ha-tts-voice-picker.ts         |   7 +-
 .../media-player/ha-media-player-browse.ts    |  17 +-
 src/components/user/ha-users-picker.ts        |  66 +--
 src/data/config.ts                            |   2 +-
 src/data/frontend.ts                          |   6 +-
 src/data/selector.ts                          |  58 ++-
 .../config-flow/step-flow-create-entry.ts     |  37 +-
 .../lights/dialog-light-color-favorite.ts     |  31 +-
 .../lights/light-color-rgb-picker.ts          |   4 +-
 .../controls/more-info-configurator.ts        |  13 +-
 .../more-info/controls/more-info-fan.ts       |  33 +-
 .../controls/more-info-media_player.ts        |  27 +-
 .../notifications/notification-drawer.ts      |  13 +-
 .../ha-voice-command-dialog.ts                |  32 +-
 src/layouts/hass-tabs-subpage.ts              |  39 +-
 src/panels/calendar/ha-panel-calendar.ts      |  33 +-
 .../dialog-add-application-credential.ts      |   7 +-
 .../config/areas/ha-config-area-page.ts       |  17 +-
 .../types/ha-automation-action-choose.ts      | 113 ++---
 .../config/automation/ha-automation-picker.ts | 127 +++---
 .../thingtalk/ha-thingtalk-placeholders.ts    | 199 +++++----
 .../config/blueprint/ha-blueprint-overview.ts |   9 +-
 .../core/ha-config-system-navigation.ts       |   5 +-
 .../ha-device-automation-card.ts              |  29 +-
 .../config/devices/ha-config-device-page.ts   |  61 ++-
 .../components/ha-energy-battery-settings.ts  |  13 +-
 .../components/ha-energy-device-settings.ts   |  13 +-
 .../components/ha-energy-gas-settings.ts      |  13 +-
 .../components/ha-energy-solar-settings.ts    |  13 +-
 .../components/ha-energy-water-settings.ts    |  13 +-
 .../dialogs/dialog-energy-solar-settings.ts   |  49 +--
 .../entity-registry-settings-editor.ts        |   8 +-
 .../config/entities/ha-config-entities.ts     |  17 +-
 .../hardware/dialog-hardware-available.ts     |  89 ++--
 .../config/helpers/forms/ha-counter-form.ts   |   9 +-
 .../helpers/forms/ha-input_boolean-form.ts    |   9 +-
 .../helpers/forms/ha-input_button-form.ts     |   9 +-
 .../helpers/forms/ha-input_datetime-form.ts   |   9 +-
 .../helpers/forms/ha-input_number-form.ts     |   9 +-
 .../helpers/forms/ha-input_select-form.ts     |   9 +-
 .../helpers/forms/ha-input_text-form.ts       |   9 +-
 .../config/helpers/forms/ha-schedule-form.ts  |   9 +-
 .../config/helpers/forms/ha-timer-form.ts     |   9 +-
 .../config/helpers/ha-config-helpers.ts       |  13 +-
 .../ha-config-integration-page.ts             |  33 +-
 .../ha-config-integrations-dashboard.ts       |   2 +-
 .../integrations/ha-domain-integrations.ts    |  45 +-
 .../zha/zha-config-dashboard.ts               |  39 +-
 .../zha/zha-groups-dashboard.ts               |   5 +-
 .../zwave_js/dialog-zwave_js-add-node.ts      |  41 +-
 .../dialog-zwave_js-node-statistics.ts        |   2 +-
 .../zwave_js/zwave_js-node-config.ts          |  52 +--
 .../ha-config-lovelace-dashboards.ts          |  11 +-
 .../resources/ha-config-lovelace-resources.ts |  11 +-
 .../config/network/supervisor-network.ts      |  37 +-
 .../repairs/dialog-system-information.ts      |  46 +--
 src/panels/config/scene/ha-scene-dashboard.ts |  92 ++---
 src/panels/config/scene/ha-scene-editor.ts    |  73 ++--
 src/panels/config/script/ha-script-picker.ts  |  91 ++--
 src/panels/config/tags/ha-config-tags.ts      |  66 +--
 src/panels/config/users/ha-config-users.ts    |   5 +-
 .../debug/assist-render-pipeline-run.ts       |  13 +-
 .../ha-config-voice-assistants-expose.ts      |   9 +-
 .../event/event-subscribe-card.ts             |  37 +-
 .../service/developer-tools-service.ts        |  19 +-
 .../template/developer-tools-template.ts      |  38 +-
 .../developer-yaml-config.ts                  |  35 +-
 .../energy/hui-energy-distribution-card.ts    |  24 +-
 .../energy/hui-energy-sources-table-card.ts   | 391 +++++++++---------
 .../lovelace/cards/hui-media-control-card.ts  |  20 +-
 .../lovelace/cards/hui-shopping-list-card.ts  | 100 ++---
 src/panels/lovelace/cards/hui-tile-card.ts    |   4 +-
 .../common/process-config-entities.ts         |   2 +-
 .../components/hui-energy-period-selector.ts  |   4 +-
 .../create-element/create-element-base.ts     |   4 +-
 .../hui-statistics-graph-card-editor.ts       |   9 +-
 .../hui-dialog-create-headerfooter.ts         |  39 +-
 .../entity-rows/hui-select-entity-row.ts      |  25 +-
 .../lovelace/strategies/get-strategy.ts       |   2 +-
 .../ha-long-lived-access-tokens-card.ts       |  38 +-
 src/panels/profile/ha-mfa-modules-card.ts     |  31 +-
 src/panels/profile/ha-refresh-tokens-card.ts  | 104 ++---
 src/state-summary/state-card-select.ts        |  25 +-
 src/state/url-sync-mixin.ts                   |   2 +-
 yarn.lock                                     |  12 +-
 127 files changed, 1842 insertions(+), 1820 deletions(-)
 delete mode 100644 .prettierignore
 create mode 100644 prettier.config.js

diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 68fe46e32c..0000000000
--- a/.prettierignore
+++ /dev/null
@@ -1,9 +0,0 @@
-build
-translations/*
-node_modules/*
-hass_frontend/*
-pip-selfcheck.json
-
-# vscode
-.vscode/*
-!.vscode/extensions.json
diff --git a/gallery/src/pages/automation/editor-action.ts b/gallery/src/pages/automation/editor-action.ts
index 376f547d72..28f9bb16e2 100644
--- a/gallery/src/pages/automation/editor-action.ts
+++ b/gallery/src/pages/automation/editor-action.ts
@@ -85,17 +85,16 @@ class DemoHaAutomationEditorAction extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-automation-action
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .actions=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
-                    @value-changed=${valueChanged}
-                  ></ha-automation-action>
-                `
+              (slot) => html`
+                <ha-automation-action
+                  slot=${slot}
+                  .hass=${this.hass}
+                  .actions=${this.data[sampleIdx]}
+                  .sampleIdx=${sampleIdx}
+                  .disabled=${this._disabled}
+                  @value-changed=${valueChanged}
+                ></ha-automation-action>
+              `
             )}
           </demo-black-white-row>
         `
diff --git a/gallery/src/pages/automation/editor-condition.ts b/gallery/src/pages/automation/editor-condition.ts
index 7504d9dc46..3a43eda71e 100644
--- a/gallery/src/pages/automation/editor-condition.ts
+++ b/gallery/src/pages/automation/editor-condition.ts
@@ -121,17 +121,16 @@ class DemoHaAutomationEditorCondition extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-automation-condition
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .conditions=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
-                    @value-changed=${valueChanged}
-                  ></ha-automation-condition>
-                `
+              (slot) => html`
+                <ha-automation-condition
+                  slot=${slot}
+                  .hass=${this.hass}
+                  .conditions=${this.data[sampleIdx]}
+                  .sampleIdx=${sampleIdx}
+                  .disabled=${this._disabled}
+                  @value-changed=${valueChanged}
+                ></ha-automation-condition>
+              `
             )}
           </demo-black-white-row>
         `
diff --git a/gallery/src/pages/automation/editor-trigger.ts b/gallery/src/pages/automation/editor-trigger.ts
index cdc9ed2c83..30c9721256 100644
--- a/gallery/src/pages/automation/editor-trigger.ts
+++ b/gallery/src/pages/automation/editor-trigger.ts
@@ -167,17 +167,16 @@ class DemoHaAutomationEditorTrigger extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-automation-trigger
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .triggers=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    .disabled=${this._disabled}
-                    @value-changed=${valueChanged}
-                  ></ha-automation-trigger>
-                `
+              (slot) => html`
+                <ha-automation-trigger
+                  slot=${slot}
+                  .hass=${this.hass}
+                  .triggers=${this.data[sampleIdx]}
+                  .sampleIdx=${sampleIdx}
+                  .disabled=${this._disabled}
+                  @value-changed=${valueChanged}
+                ></ha-automation-trigger>
+              `
             )}
           </demo-black-white-row>
         `
diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 9ac7959635..4cdc97013b 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -497,24 +497,23 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
             ${["light", "dark"].map((slot) =>
               Object.entries(info.input).map(
-                ([key, value]) =>
-                  html`
-                    <ha-settings-row narrow slot=${slot}>
-                      <span slot="heading">${value?.name || key}</span>
-                      <span slot="description">${value?.description}</span>
-                      <ha-selector
-                        .hass=${this.hass}
-                        .selector=${value!.selector}
-                        .key=${key}
-                        .label=${this._label ? value!.name : undefined}
-                        .value=${data[key] ?? value!.default}
-                        .disabled=${this._disabled}
-                        .required=${this._required}
-                        @value-changed=${valueChanged}
-                        .helper=${this._helper ? "Helper text" : undefined}
-                      ></ha-selector>
-                    </ha-settings-row>
-                  `
+                ([key, value]) => html`
+                  <ha-settings-row narrow slot=${slot}>
+                    <span slot="heading">${value?.name || key}</span>
+                    <span slot="description">${value?.description}</span>
+                    <ha-selector
+                      .hass=${this.hass}
+                      .selector=${value!.selector}
+                      .key=${key}
+                      .label=${this._label ? value!.name : undefined}
+                      .value=${data[key] ?? value!.default}
+                      .disabled=${this._disabled}
+                      .required=${this._required}
+                      @value-changed=${valueChanged}
+                      .helper=${this._helper ? "Helper text" : undefined}
+                    ></ha-selector>
+                  </ha-settings-row>
+                `
               )
             )}
           </demo-black-white-row>
diff --git a/gallery/src/pages/components/ha-tip.ts b/gallery/src/pages/components/ha-tip.ts
index 1f349efa7e..b9e9e5fc73 100644
--- a/gallery/src/pages/components/ha-tip.ts
+++ b/gallery/src/pages/components/ha-tip.ts
@@ -20,9 +20,8 @@ export class DemoHaTip extends LitElement {
           <ha-card header="ha-tip ${mode} demo">
             <div class="card-content">
               ${tips.map(
-                (tip) => html`<ha-tip .hass=${provideHass(this)}
-                  >${tip}</ha-tip
-                >`
+                (tip) =>
+                  html`<ha-tip .hass=${provideHass(this)}>${tip}</ha-tip>`
               )}
             </div>
           </ha-card>
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 5800d2e1b0..fee9340720 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -544,14 +544,13 @@ class HassioAddonInfo extends LitElement {
                       <code slot="description"> ${this.addon.hostname} </code>
                     </ha-settings-row>
                     ${metrics.map(
-                      (metric) =>
-                        html`
-                          <supervisor-metric
-                            .description=${metric.description}
-                            .value=${metric.value ?? 0}
-                            .tooltip=${metric.tooltip}
-                          ></supervisor-metric>
-                        `
+                      (metric) => html`
+                        <supervisor-metric
+                          .description=${metric.description}
+                          .value=${metric.value ?? 0}
+                          .tooltip=${metric.tooltip}
+                        ></supervisor-metric>
+                      `
                     )}`
                 : ""}
             </div>
diff --git a/hassio/src/components/supervisor-backup-content.ts b/hassio/src/components/supervisor-backup-content.ts
index ded21bf63a..81b4f6fbf1 100644
--- a/hassio/src/components/supervisor-backup-content.ts
+++ b/hassio/src/components/supervisor-backup-content.ts
@@ -384,28 +384,30 @@ export class SupervisorBackupContent extends LitElement {
         : undefined;
     let checkedItems = 0;
     this[section].forEach((item) => {
-      templates.push(html`<ha-formfield
-        .label=${html`<supervisor-formfield-label
-          .label=${item.name}
-          .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
-          .imageUrl=${section === "addons" &&
-          !this.onboarding &&
-          atLeastVersion(this.hass.config.version, 0, 105) &&
-          addons?.get(item.slug)?.icon
-            ? `/api/hassio/addons/${item.slug}/icon`
-            : undefined}
-          .version=${item.version}
+      templates.push(
+        html`<ha-formfield
+          .label=${html`<supervisor-formfield-label
+            .label=${item.name}
+            .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
+            .imageUrl=${section === "addons" &&
+            !this.onboarding &&
+            atLeastVersion(this.hass.config.version, 0, 105) &&
+            addons?.get(item.slug)?.icon
+              ? `/api/hassio/addons/${item.slug}/icon`
+              : undefined}
+            .version=${item.version}
+          >
+          </supervisor-formfield-label>`}
         >
-        </supervisor-formfield-label>`}
-      >
-        <ha-checkbox
-          .item=${item}
-          .checked=${item.checked}
-          .section=${section}
-          @change=${this._updateSectionEntry}
-        >
-        </ha-checkbox>
-      </ha-formfield>`);
+          <ha-checkbox
+            .item=${item}
+            .checked=${item.checked}
+            .section=${section}
+            @change=${this._updateSectionEntry}
+          >
+          </ha-checkbox>
+        </ha-formfield>`
+      );
 
       if (item.checked) {
         checkedItems++;
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index 943e92972c..f3a77f8b40 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -168,25 +168,24 @@ export class DialogHassioNetwork
                         ${this._accessPoints.accesspoints
                           .filter((ap) => ap.ssid)
                           .map(
-                            (ap) =>
-                              html`
-                                <mwc-list-item
-                                  twoline
-                                  @click=${this._selectAP}
-                                  .activated=${ap.ssid ===
-                                  this._wifiConfiguration?.ssid}
-                                  .ap=${ap}
-                                >
-                                  <span>${ap.ssid}</span>
-                                  <span slot="secondary">
-                                    ${ap.mac} -
-                                    ${this.supervisor.localize(
-                                      "dialog.network.signal_strength"
-                                    )}:
-                                    ${ap.signal}
-                                  </span>
-                                </mwc-list-item>
-                              `
+                            (ap) => html`
+                              <mwc-list-item
+                                twoline
+                                @click=${this._selectAP}
+                                .activated=${ap.ssid ===
+                                this._wifiConfiguration?.ssid}
+                                .ap=${ap}
+                              >
+                                <span>${ap.ssid}</span>
+                                <span slot="secondary">
+                                  ${ap.mac} -
+                                  ${this.supervisor.localize(
+                                    "dialog.network.signal_strength"
+                                  )}:
+                                  ${ap.signal}
+                                </span>
+                              </mwc-list-item>
+                            `
                           )}
                       </mwc-list>
                     `
diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
index e26753e5dc..d623ebf3b8 100644
--- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts
+++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
@@ -157,10 +157,11 @@ class HassioRegistriesDialog extends LitElement {
   }
 
   public focus(): void {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index aeac743f31..bf42ff4499 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -209,10 +209,11 @@ class HassioRepositoriesDialog extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts
index 254d602e87..7754728757 100644
--- a/hassio/src/system/hassio-core-info.ts
+++ b/hassio/src/system/hassio-core-info.ts
@@ -81,14 +81,13 @@ class HassioCoreInfo extends LitElement {
           </div>
           <div>
             ${metrics.map(
-              (metric) =>
-                html`
-                  <supervisor-metric
-                    .description=${metric.description}
-                    .value=${metric.value ?? 0}
-                    .tooltip=${metric.tooltip}
-                  ></supervisor-metric>
-                `
+              (metric) => html`
+                <supervisor-metric
+                  .description=${metric.description}
+                  .value=${metric.value ?? 0}
+                  .tooltip=${metric.tooltip}
+                ></supervisor-metric>
+              `
             )}
           </div>
         </div>
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index cfb039d935..4e84c0f23f 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -154,14 +154,13 @@ class HassioHostInfo extends LitElement {
                 </ha-settings-row>`
               : ""}
             ${metrics.map(
-              (metric) =>
-                html`
-                  <supervisor-metric
-                    .description=${metric.description}
-                    .value=${metric.value ?? 0}
-                    .tooltip=${metric.tooltip}
-                  ></supervisor-metric>
-                `
+              (metric) => html`
+                <supervisor-metric
+                  .description=${metric.description}
+                  .value=${metric.value ?? 0}
+                  .tooltip=${metric.tooltip}
+                ></supervisor-metric>
+              `
             )}
           </div>
         </div>
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index 1dbca65417..d083bfb613 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -178,14 +178,13 @@ class HassioSupervisorInfo extends LitElement {
           </div>
           <div class="metrics-block">
             ${metrics.map(
-              (metric) =>
-                html`
-                  <supervisor-metric
-                    .description=${metric.description}
-                    .value=${metric.value ?? 0}
-                    .tooltip=${metric.tooltip}
-                  ></supervisor-metric>
-                `
+              (metric) => html`
+                <supervisor-metric
+                  .description=${metric.description}
+                  .value=${metric.value ?? 0}
+                  .tooltip=${metric.tooltip}
+                ></supervisor-metric>
+              `
             )}
           </div>
         </div>
diff --git a/package.json b/package.json
index 2611334d32..c7be5ec960 100644
--- a/package.json
+++ b/package.json
@@ -227,7 +227,7 @@
     "object-hash": "3.0.0",
     "open": "9.1.0",
     "pinst": "3.0.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.0",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
@@ -256,9 +256,5 @@
     "sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
   },
-  "prettier": {
-    "trailingComma": "es5",
-    "arrowParens": "always"
-  },
   "packageManager": "yarn@3.6.1"
 }
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000000..e8646cb474
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,3 @@
+export default {
+  trailingComma: "es5",
+};
diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts
index 8117af0ffe..15773a5cb5 100644
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -38,7 +38,7 @@ export type LocalizeKeys =
 // Tweaked from https://www.raygesualdo.com/posts/flattening-object-keys-with-typescript-types
 export type FlattenObjectKeys<
   T extends Record<string, any>,
-  Key extends keyof T = keyof T
+  Key extends keyof T = keyof T,
 > = Key extends string
   ? T[Key] extends Record<string, unknown>
     ? `${Key}.${FlattenObjectKeys<T[Key]>}`
diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index 902d567885..389fd8dab6 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -108,23 +108,24 @@ export default class HaChartBase extends LitElement {
         ? html`<div class="chartLegend">
             <ul>
               ${this.data.datasets.map(
-                (dataset, index) => html`<li
-                  .datasetIndex=${index}
-                  @click=${this._legendClick}
-                  class=${classMap({
-                    hidden: this._hiddenDatasets.has(index),
-                  })}
-                  .title=${dataset.label}
-                >
-                  <div
-                    class="bullet"
-                    style=${styleMap({
-                      backgroundColor: dataset.backgroundColor as string,
-                      borderColor: dataset.borderColor as string,
+                (dataset, index) =>
+                  html`<li
+                    .datasetIndex=${index}
+                    @click=${this._legendClick}
+                    class=${classMap({
+                      hidden: this._hiddenDatasets.has(index),
                     })}
-                  ></div>
-                  <div class="label">${dataset.label}</div>
-                </li>`
+                    .title=${dataset.label}
+                  >
+                    <div
+                      class="bullet"
+                      style=${styleMap({
+                        backgroundColor: dataset.backgroundColor as string,
+                        borderColor: dataset.borderColor as string,
+                      })}
+                    ></div>
+                    <div class="label">${dataset.label}</div>
+                  </li>`
               )}
             </ul>
           </div>`
@@ -156,18 +157,19 @@ export default class HaChartBase extends LitElement {
               <div>
                 <ul>
                   ${this._tooltip.body.map(
-                    (item, i) => html`<li>
-                      <div
-                        class="bullet"
-                        style=${styleMap({
-                          backgroundColor: this._tooltip!.labelColors[i]
-                            .backgroundColor as string,
-                          borderColor: this._tooltip!.labelColors[i]
-                            .borderColor as string,
-                        })}
-                      ></div>
-                      ${item.lines.join("\n")}
-                    </li>`
+                    (item, i) =>
+                      html`<li>
+                        <div
+                          class="bullet"
+                          style=${styleMap({
+                            backgroundColor: this._tooltip!.labelColors[i]
+                              .backgroundColor as string,
+                            borderColor: this._tooltip!.labelColors[i]
+                              .borderColor as string,
+                          })}
+                        ></div>
+                        ${item.lines.join("\n")}
+                      </li>`
                   )}
                 </ul>
               </div>
diff --git a/src/components/device/ha-area-devices-picker.ts b/src/components/device/ha-area-devices-picker.ts
index d7c4a1d0b3..8964ff566c 100644
--- a/src/components/device/ha-area-devices-picker.ts
+++ b/src/components/device/ha-area-devices-picker.ts
@@ -36,12 +36,11 @@ interface AreaDevices {
   devices: string[];
 }
 
-const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (
-  item
-) => html`<mwc-list-item twoline>
-  <span>${item.name}</span>
-  <span slot="secondary">${item.devices.length} devices</span>
-</mwc-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) =>
+  html`<mwc-list-item twoline>
+    <span>${item.name}</span>
+    <span slot="secondary">${item.devices.length} devices</span>
+  </mwc-list-item>`;
 
 @customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts
index 0189fc5d4c..87257aba4f 100644
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -17,7 +17,7 @@ const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
 
 export abstract class HaDeviceAutomationPicker<
-  T extends DeviceAutomation
+  T extends DeviceAutomation,
 > extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts
index fb837d15b2..8b8d5bf8a0 100644
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -45,12 +45,11 @@ export type HaDevicePickerDeviceFilterFunc = (
 
 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
-const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<mwc-list-item
-  .twoline=${!!item.area}
->
-  <span>${item.name}</span>
-  <span slot="secondary">${item.area}</span>
-</mwc-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) =>
+  html`<mwc-list-item .twoline=${!!item.area}>
+    <span>${item.name}</span>
+    <span slot="secondary">${item.area}</span>
+  </mwc-list-item>`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
diff --git a/src/components/entity/ha-entities-picker.ts b/src/components/entity/ha-entities-picker.ts
index 8eae3577bb..21aebdfd2c 100644
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -130,9 +130,9 @@ class HaEntitiesPickerLight extends LitElement {
 
   private _getEntityFilter = memoizeOne(
     (
-        value: string[] | undefined,
-        entityFilter: HaEntityPickerEntityFilterFunc | undefined
-      ): HaEntityPickerEntityFilterFunc =>
+      value: string[] | undefined,
+      entityFilter: HaEntityPickerEntityFilterFunc | undefined
+    ): HaEntityPickerEntityFilterFunc =>
       (stateObj: HassEntity) =>
         (!value || !value.includes(stateObj.entity_id)) &&
         (!entityFilter || entityFilter(stateObj))
diff --git a/src/components/entity/ha-statistic-picker.ts b/src/components/entity/ha-statistic-picker.ts
index f5c1d7ff22..e9a9388243 100644
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -87,26 +87,28 @@ export class HaStatisticPicker extends LitElement {
 
   private _statistics: StatisticItem[] = [];
 
-  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
-    item
-  ) => html`<mwc-list-item graphic="avatar" twoline>
-    ${item.state
-      ? html`<state-badge slot="graphic" .stateObj=${item.state}></state-badge>`
-      : ""}
-    <span>${item.name}</span>
-    <span slot="secondary"
-      >${item.id === "" || item.id === "__missing"
-        ? html`<a
-            target="_blank"
-            rel="noopener noreferrer"
-            href=${documentationUrl(this.hass, "/more-info/statistics/")}
-            >${this.hass.localize(
-              "ui.components.statistic-picker.learn_more"
-            )}</a
-          >`
-        : item.id}</span
-    >
-  </mwc-list-item>`;
+  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (item) =>
+    html`<mwc-list-item graphic="avatar" twoline>
+      ${item.state
+        ? html`<state-badge
+            slot="graphic"
+            .stateObj=${item.state}
+          ></state-badge>`
+        : ""}
+      <span>${item.name}</span>
+      <span slot="secondary"
+        >${item.id === "" || item.id === "__missing"
+          ? html`<a
+              target="_blank"
+              rel="noopener noreferrer"
+              href=${documentationUrl(this.hass, "/more-info/statistics/")}
+              >${this.hass.localize(
+                "ui.components.statistic-picker.learn_more"
+              )}</a
+            >`
+          : item.id}</span
+      >
+    </mwc-list-item>`;
 
   private _getStatistics = memoizeOne(
     (
diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index 2b6f936497..1c91fce31b 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -211,7 +211,9 @@ export class StateBadge extends LitElement {
           background: var(--divider-color);
         }
         ha-state-icon {
-          transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
+          transition:
+            color 0.3s ease-in-out,
+            filter 0.3s ease-in-out;
         }
         .missing {
           color: #fce588;
diff --git a/src/components/ha-addon-picker.ts b/src/components/ha-addon-picker.ts
index 099da62e9f..c169ecc532 100644
--- a/src/components/ha-addon-picker.ts
+++ b/src/components/ha-addon-picker.ts
@@ -11,19 +11,18 @@ import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
 import "./ha-list-item";
 
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
-  item
-) => html`<ha-list-item twoline graphic="icon">
-  <span>${item.name}</span>
-  <span slot="secondary">${item.slug}</span>
-  ${item.icon
-    ? html`<img
-        alt=""
-        slot="graphic"
-        .src="/api/hassio/addons/${item.slug}/icon"
-      />`
-    : ""}
-</ha-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) =>
+  html`<ha-list-item twoline graphic="icon">
+    <span>${item.name}</span>
+    <span slot="secondary">${item.slug}</span>
+    ${item.icon
+      ? html`<img
+          alt=""
+          slot="graphic"
+          .src="/api/hassio/addons/${item.slug}/icon"
+        />`
+      : ""}
+  </ha-list-item>`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {
diff --git a/src/components/ha-analytics.ts b/src/components/ha-analytics.ts
index 9faec6a273..15e356582d 100644
--- a/src/components/ha-analytics.ts
+++ b/src/components/ha-analytics.ts
@@ -53,39 +53,38 @@ export class HaAnalytics extends LitElement {
         </ha-switch>
       </ha-settings-row>
       ${ADDITIONAL_PREFERENCES.map(
-        (preference) =>
-          html`
-            <ha-settings-row>
-              <span slot="heading" data-for=${preference}>
-                ${this.localize(
-                  `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
-                )}
-              </span>
-              <span slot="description" data-for=${preference}>
-                ${this.localize(
-                  `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.description`
-                )}
-              </span>
-              <span>
-                <ha-switch
-                  @change=${this._handleRowClick}
-                  .checked=${this.analytics?.preferences[preference]}
-                  .preference=${preference}
-                  name=${preference}
-                >
-                </ha-switch>
-                ${!baseEnabled
-                  ? html`
-                      <simple-tooltip animation-delay="0" position="right">
-                        ${this.localize(
-                          `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
-                        )}
-                      </simple-tooltip>
-                    `
-                  : ""}
-              </span>
-            </ha-settings-row>
-          `
+        (preference) => html`
+          <ha-settings-row>
+            <span slot="heading" data-for=${preference}>
+              ${this.localize(
+                `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
+              )}
+            </span>
+            <span slot="description" data-for=${preference}>
+              ${this.localize(
+                `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.description`
+              )}
+            </span>
+            <span>
+              <ha-switch
+                @change=${this._handleRowClick}
+                .checked=${this.analytics?.preferences[preference]}
+                .preference=${preference}
+                name=${preference}
+              >
+              </ha-switch>
+              ${!baseEnabled
+                ? html`
+                    <simple-tooltip animation-delay="0" position="right">
+                      ${this.localize(
+                        `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
+                      )}
+                    </simple-tooltip>
+                  `
+                : ""}
+            </span>
+          </ha-settings-row>
+        `
       )}
       <ha-settings-row>
         <span slot="heading" data-for="diagnostics">
diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts
index 1ea409aafe..5d56c69082 100644
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -34,13 +34,12 @@ import "./ha-svg-icon";
 
 type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 
-const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
-  item
-) => html`<mwc-list-item
-  class=${classMap({ "add-new": item.area_id === "add_new" })}
->
-  ${item.name}
-</mwc-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
+  html`<mwc-list-item
+    class=${classMap({ "add-new": item.area_id === "add_new" })}
+  >
+    ${item.name}
+  </mwc-list-item>`;
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts
index 8534cfba0b..e4dd2e9524 100644
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -94,7 +94,9 @@ export class HaButtonToggleGroup extends LitElement {
         opacity: 0;
         pointer-events: none;
         content: "";
-        transition: opacity 15ms linear, background-color 15ms linear;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
       }
       ha-icon-button[active]::before,
       mwc-button[active]::before {
diff --git a/src/components/ha-config-entry-picker.ts b/src/components/ha-config-entry-picker.ts
index fb99d62b5a..65f2064931 100644
--- a/src/components/ha-config-entry-picker.ts
+++ b/src/components/ha-config-entry-picker.ts
@@ -47,29 +47,28 @@ class HaConfigEntryPicker extends LitElement {
     this._getConfigEntries();
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
-    item
-  ) => html`<mwc-list-item twoline graphic="icon">
-    <span
-      >${item.title ||
-      this.hass.localize(
-        "ui.panel.config.integrations.config_entry.unnamed_entry"
-      )}</span
-    >
-    <span slot="secondary">${item.localized_domain_name}</span>
-    <img
-      alt=""
-      slot="graphic"
-      src=${brandsUrl({
-        domain: item.domain,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      })}
-      referrerpolicy="no-referrer"
-      @error=${this._onImageError}
-      @load=${this._onImageLoad}
-    />
-  </mwc-list-item>`;
+  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (item) =>
+    html`<mwc-list-item twoline graphic="icon">
+      <span
+        >${item.title ||
+        this.hass.localize(
+          "ui.panel.config.integrations.config_entry.unnamed_entry"
+        )}</span
+      >
+      <span slot="secondary">${item.localized_domain_name}</span>
+      <img
+        alt=""
+        slot="graphic"
+        src=${brandsUrl({
+          domain: item.domain,
+          type: "icon",
+          darkOptimized: this.hass.themes?.darkMode,
+        })}
+        referrerpolicy="no-referrer"
+        @error=${this._onImageError}
+        @load=${this._onImageLoad}
+      />
+    </mwc-list-item>`;
 
   protected render() {
     if (!this._configEntries) {
diff --git a/src/components/ha-control-button.ts b/src/components/ha-control-button.ts
index 8c8f467f76..1eee1286e6 100644
--- a/src/components/ha-control-button.ts
+++ b/src/components/ha-control-button.ts
@@ -122,7 +122,8 @@ export class HaControlButton extends LitElement {
         height: 100%;
         width: 100%;
         background-color: var(--control-button-background-color);
-        transition: background-color 180ms ease-in-out,
+        transition:
+          background-color 180ms ease-in-out,
           opacity 180ms ease-in-out;
         opacity: var(--control-button-background-opacity);
       }
diff --git a/src/components/ha-control-circular-slider.ts b/src/components/ha-control-circular-slider.ts
index 97bc2ea566..5b3caf3bef 100644
--- a/src/components/ha-control-circular-slider.ts
+++ b/src/components/ha-control-circular-slider.ts
@@ -566,7 +566,9 @@ export class HaControlCircularSlider extends LitElement {
         fill: none;
         stroke: var(--control-circular-slider-background);
         opacity: var(--control-circular-slider-background-opacity);
-        transition: stroke 180ms ease-in-out, opacity 180ms ease-in-out;
+        transition:
+          stroke 180ms ease-in-out,
+          opacity 180ms ease-in-out;
         stroke-linecap: round;
         stroke-width: 24px;
       }
@@ -576,9 +578,11 @@ export class HaControlCircularSlider extends LitElement {
         fill: none;
         stroke-linecap: round;
         stroke-width: 24px;
-        transition: stroke-width 300ms ease-in-out,
+        transition:
+          stroke-width 300ms ease-in-out,
           stroke-dasharray 300ms ease-in-out,
-          stroke-dashoffset 300ms ease-in-out, stroke 180ms ease-in-out,
+          stroke-dashoffset 300ms ease-in-out,
+          stroke 180ms ease-in-out,
           opacity 180ms ease-in-out;
       }
 
diff --git a/src/components/ha-control-select.ts b/src/components/ha-control-select.ts
index 1a48c0574c..855fc338a1 100644
--- a/src/components/ha-control-select.ts
+++ b/src/components/ha-control-select.ts
@@ -283,7 +283,9 @@ export class HaControlSelect extends LitElement {
         width: 100%;
         background-color: var(--control-select-color);
         opacity: 0;
-        transition: background-color ease-in-out 180ms, opacity ease-in-out 80ms;
+        transition:
+          background-color ease-in-out 180ms,
+          opacity ease-in-out 80ms;
       }
       .option.focused::before,
       .option:hover::before {
diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts
index 3f4abcf4e3..c3450c6014 100644
--- a/src/components/ha-control-slider.ts
+++ b/src/components/ha-control-slider.ts
@@ -327,7 +327,8 @@ export class HaControlSlider extends LitElement {
         height: 100%;
         width: 100%;
         background-color: var(--control-slider-color);
-        transition: transform 180ms ease-in-out,
+        transition:
+          transform 180ms ease-in-out,
           background-color 180ms ease-in-out;
       }
       .slider .slider-track-bar.show-handle {
@@ -427,7 +428,9 @@ export class HaControlSlider extends LitElement {
         position: absolute;
         background-color: white;
         border-radius: var(--handle-size);
-        transition: left 180ms ease-in-out, bottom 180ms ease-in-out;
+        transition:
+          left 180ms ease-in-out,
+          bottom 180ms ease-in-out;
         top: 0;
         bottom: 0;
         left: calc(var(--value, 0) * (100% - var(--cursor-size)));
diff --git a/src/components/ha-control-switch.ts b/src/components/ha-control-switch.ts
index ae15ce98b7..759ee93f9d 100644
--- a/src/components/ha-control-switch.ts
+++ b/src/components/ha-control-switch.ts
@@ -208,7 +208,8 @@ export class HaControlSwitch extends LitElement {
         border-radius: calc(
           var(--control-switch-border-radius) - var(--control-switch-padding)
         );
-        transition: transform 180ms ease-in-out,
+        transition:
+          transform 180ms ease-in-out,
           background-color 180ms ease-in-out;
         background-color: var(--control-switch-off-color);
         color: white;
diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index f74377c12a..a3fbcb079a 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -55,17 +55,16 @@ export class HaFormGrid extends LitElement implements HaFormElement {
   protected render(): TemplateResult {
     return html`
       ${this.schema.schema.map(
-        (item) =>
-          html`
-            <ha-form
-              .hass=${this.hass}
-              .data=${this.data}
-              .schema=${[item]}
-              .disabled=${this.disabled}
-              .computeLabel=${this.computeLabel}
-              .computeHelper=${this.computeHelper}
-            ></ha-form>
-          `
+        (item) => html`
+          <ha-form
+            .hass=${this.hass}
+            .data=${this.data}
+            .schema=${[item]}
+            .disabled=${this.disabled}
+            .computeLabel=${this.computeLabel}
+            .computeHelper=${this.computeHelper}
+          ></ha-form>
+        `
       )}
     `;
   }
diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts
index 287b904780..e2e032312d 100644
--- a/src/components/ha-form/types.ts
+++ b/src/components/ha-form/types.ts
@@ -98,7 +98,7 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
 // Type utility to unionize a schema array by flattening any grid schemas
 export type SchemaUnion<
   SchemaArray extends readonly HaFormSchema[],
-  Schema = SchemaArray[number]
+  Schema = SchemaArray[number],
 > = Schema extends HaFormGridSchema | HaFormExpandableSchema
   ? SchemaUnion<Schema["schema"]>
   : Schema;
diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts
index 1895e419db..e6faa19773 100644
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@@ -138,12 +138,12 @@ export class Gauge extends LitElement {
               : this.valueText ||
                 formatNumber(this.value, this.locale, this.formatOptions)
           }${
-      this._segment_label
-        ? ""
-        : this.label === "%"
-        ? blankBeforePercent(this.locale) + "%"
-        : ` ${this.label}`
-    }
+            this._segment_label
+              ? ""
+              : this.label === "%"
+              ? blankBeforePercent(this.locale) + "%"
+              : ` ${this.label}`
+          }
         </text>
       </svg>`;
   }
diff --git a/src/components/ha-hs-color-picker.ts b/src/components/ha-hs-color-picker.ts
index ba5d038526..cef11cfc38 100644
--- a/src/components/ha-hs-color-picker.ts
+++ b/src/components/ha-hs-color-picker.ts
@@ -406,7 +406,9 @@ class HaHsColorPicker extends LitElement {
         filter: url(#marker-shadow);
       }
       .container:not(.pressed) circle {
-        transition: transform 100ms ease-in-out, fill 100ms ease-in-out;
+        transition:
+          transform 100ms ease-in-out,
+          fill 100ms ease-in-out;
       }
       .container:not(.pressed) .cursor {
         transition: transform 200ms ease-in-out;
diff --git a/src/components/ha-mount-picker.ts b/src/components/ha-mount-picker.ts
index fd47688001..6a35dea416 100644
--- a/src/components/ha-mount-picker.ts
+++ b/src/components/ha-mount-picker.ts
@@ -81,28 +81,25 @@ class HaMountPicker extends LitElement {
           ? dataDiskOption
           : nothing}
         ${this._filterMounts(this._mounts, this.usage).map(
-          (mount) => html`<ha-list-item
-            twoline
-            graphic="icon"
-            .value=${mount.name}
-          >
-            <span>${mount.name}</span>
-            <span slot="secondary"
-              >${mount.server}${mount.port
-                ? `:${mount.port}`
-                : nothing}${mount.type === SupervisorMountType.NFS
-                ? mount.path
-                : `:${mount.share}`}</span
-            >
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mount.usage === SupervisorMountUsage.MEDIA
-                ? mdiPlayBox
-                : mount.usage === SupervisorMountUsage.SHARE
-                ? mdiFolder
-                : mdiBackupRestore}
-            ></ha-svg-icon>
-          </ha-list-item>`
+          (mount) =>
+            html`<ha-list-item twoline graphic="icon" .value=${mount.name}>
+              <span>${mount.name}</span>
+              <span slot="secondary"
+                >${mount.server}${mount.port
+                  ? `:${mount.port}`
+                  : nothing}${mount.type === SupervisorMountType.NFS
+                  ? mount.path
+                  : `:${mount.share}`}</span
+              >
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mount.usage === SupervisorMountUsage.MEDIA
+                  ? mdiPlayBox
+                  : mount.usage === SupervisorMountUsage.SHARE
+                  ? mdiFolder
+                  : mdiBackupRestore}
+              ></ha-svg-icon>
+            </ha-list-item>`
         )}
         ${this.usage === SupervisorMountUsage.BACKUP &&
         this._mounts.default_backup_mount
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index e8bd3ac4b4..71747c4d27 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -112,19 +112,18 @@ export class HaSelectSelector extends LitElement {
         ${value?.length
           ? html`<ha-chip-set>
               ${value.map(
-                (item, idx) =>
-                  html`
-                    <ha-chip hasTrailingIcon>
-                      ${options.find((option) => option.value === item)
-                        ?.label || item}
-                      <ha-svg-icon
-                        slot="trailing-icon"
-                        .path=${mdiClose}
-                        .idx=${idx}
-                        @click=${this._removeItem}
-                      ></ha-svg-icon>
-                    </ha-chip>
-                  `
+                (item, idx) => html`
+                  <ha-chip hasTrailingIcon>
+                    ${options.find((option) => option.value === item)?.label ||
+                    item}
+                    <ha-svg-icon
+                      slot="trailing-icon"
+                      .path=${mdiClose}
+                      .idx=${idx}
+                      @click=${this._removeItem}
+                    ></ha-svg-icon>
+                  </ha-chip>
+                `
               )}
             </ha-chip-set>`
           : ""}
diff --git a/src/components/ha-service-picker.ts b/src/components/ha-service-picker.ts
index 9ef0dc670a..db4dec62d7 100644
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@@ -10,12 +10,13 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
-) => html`<mwc-list-item twoline>
-  <span>${item.name}</span>
-  <span slot="secondary"
-    >${item.name === item.service ? "" : item.service}</span
-  >
-</mwc-list-item>`;
+) =>
+  html`<mwc-list-item twoline>
+    <span>${item.name}</span>
+    <span slot="secondary"
+      >${item.name === item.service ? "" : item.service}</span
+    >
+  </mwc-list-item>`;
 
 @customElement("ha-service-picker")
 class HaServicePicker extends LitElement {
diff --git a/src/components/ha-temp-color-picker.ts b/src/components/ha-temp-color-picker.ts
index b2f2b26dfc..4e0d109109 100644
--- a/src/components/ha-temp-color-picker.ts
+++ b/src/components/ha-temp-color-picker.ts
@@ -418,7 +418,9 @@ class HaTempColorPicker extends LitElement {
         filter: url(#marker-shadow);
       }
       .container:not(.pressed) circle {
-        transition: transform 100ms ease-in-out, fill 100ms ease-in-out;
+        transition:
+          transform 100ms ease-in-out,
+          fill 100ms ease-in-out;
       }
       .container:not(.pressed) .cursor {
         transition: transform 200ms ease-in-out;
diff --git a/src/components/ha-tts-voice-picker.ts b/src/components/ha-tts-voice-picker.ts
index 8cbe24dffd..cfea9c3c5c 100644
--- a/src/components/ha-tts-voice-picker.ts
+++ b/src/components/ha-tts-voice-picker.ts
@@ -62,9 +62,10 @@ export class HaTTSVoicePicker extends LitElement {
             </ha-list-item>`
           : nothing}
         ${this._voices.map(
-          (voice) => html`<ha-list-item .value=${voice.voice_id}>
-            ${voice.name}
-          </ha-list-item>`
+          (voice) =>
+            html`<ha-list-item .value=${voice.voice_id}>
+              ${voice.name}
+            </ha-list-item>`
         )}
       </ha-select>
     `;
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index ae617af86b..2600758eac 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -930,7 +930,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           margin-right: 16px;
           background-size: cover;
           border-radius: 2px;
-          transition: width 0.4s, height 0.4s;
+          transition:
+            width 0.4s,
+            height 0.4s;
         }
         .header-info {
           display: flex;
@@ -977,7 +979,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           overflow: hidden;
           text-overflow: ellipsis;
           margin-bottom: 0;
-          transition: height 0.5s, margin 0.5s;
+          transition:
+            height 0.5s,
+            margin 0.5s;
         }
 
         .not-shown {
@@ -1121,7 +1125,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           top: auto;
           bottom: 0px;
           right: 8px;
-          transition: bottom 0.1s ease-out, opacity 0.1s ease-out;
+          transition:
+            bottom 0.1s ease-out,
+            opacity 0.1s ease-out;
         }
 
         .child .play:hover {
@@ -1220,7 +1226,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           position: relative;
           background-position: center;
           border-radius: 0;
-          transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
+          transition:
+            width 0.4s,
+            height 0.4s,
+            padding-bottom 0.4s;
         }
         ha-fab {
           position: absolute;
diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts
index a78de5ed4c..aeda071a88 100644
--- a/src/components/user/ha-users-picker.ts
+++ b/src/components/user/ha-users-picker.ts
@@ -40,38 +40,40 @@ class HaUsersPickerLight extends LitElement {
 
     const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
     return html`
-      ${guard([notSelectedUsers], () =>
-        this.value?.map(
-          (user_id, idx) => html`
-            <div>
-              <ha-user-picker
-                .label=${this.pickedUserLabel}
-                .noUserLabel=${this.hass!.localize(
-                  "ui.components.user-picker.remove_user"
-                )}
-                .index=${idx}
-                .hass=${this.hass}
-                .value=${user_id}
-                .users=${this._notSelectedUsersAndSelected(
-                  user_id,
-                  this.users,
-                  notSelectedUsers
-                )}
-                @value-changed=${this._userChanged}
-              ></ha-user-picker>
-              <ha-icon-button
-                .userId=${user_id}
-                .label=${this.hass!.localize(
-                  "ui.components.user-picker.remove_user"
-                )}
-                .path=${mdiClose}
-                @click=${this._removeUser}
-              >
-                ></ha-icon-button
-              >
-            </div>
-          `
-        )
+      ${guard(
+        [notSelectedUsers],
+        () =>
+          this.value?.map(
+            (user_id, idx) => html`
+              <div>
+                <ha-user-picker
+                  .label=${this.pickedUserLabel}
+                  .noUserLabel=${this.hass!.localize(
+                    "ui.components.user-picker.remove_user"
+                  )}
+                  .index=${idx}
+                  .hass=${this.hass}
+                  .value=${user_id}
+                  .users=${this._notSelectedUsersAndSelected(
+                    user_id,
+                    this.users,
+                    notSelectedUsers
+                  )}
+                  @value-changed=${this._userChanged}
+                ></ha-user-picker>
+                <ha-icon-button
+                  .userId=${user_id}
+                  .label=${this.hass!.localize(
+                    "ui.components.user-picker.remove_user"
+                  )}
+                  .path=${mdiClose}
+                  @click=${this._removeUser}
+                >
+                  ></ha-icon-button
+                >
+              </div>
+            `
+          )
       )}
       <ha-user-picker
         .label=${this.pickUserLabel ||
diff --git a/src/data/config.ts b/src/data/config.ts
index c2273ce72b..7c872f1279 100644
--- a/src/data/config.ts
+++ b/src/data/config.ts
@@ -13,7 +13,7 @@ interface InvalidConfig {
 type ValidKeys = "trigger" | "action" | "condition";
 
 export const validateConfig = <
-  T extends Partial<{ [key in ValidKeys]: unknown }>
+  T extends Partial<{ [key in ValidKeys]: unknown }>,
 >(
   hass: HomeAssistant,
   config: T
diff --git a/src/data/frontend.ts b/src/data/frontend.ts
index 8760859c65..9e0095e7a9 100644
--- a/src/data/frontend.ts
+++ b/src/data/frontend.ts
@@ -14,7 +14,7 @@ declare global {
 export type ValidUserDataKey = keyof FrontendUserData;
 
 export const fetchFrontendUserData = async <
-  UserDataKey extends ValidUserDataKey
+  UserDataKey extends ValidUserDataKey,
 >(
   conn: Connection,
   key: UserDataKey
@@ -29,7 +29,7 @@ export const fetchFrontendUserData = async <
 };
 
 export const saveFrontendUserData = async <
-  UserDataKey extends ValidUserDataKey
+  UserDataKey extends ValidUserDataKey,
 >(
   conn: Connection,
   key: UserDataKey,
@@ -42,7 +42,7 @@ export const saveFrontendUserData = async <
   });
 
 export const getOptimisticFrontendUserDataCollection = <
-  UserDataKey extends ValidUserDataKey
+  UserDataKey extends ValidUserDataKey,
 >(
   conn: Connection,
   userDataKey: UserDataKey
diff --git a/src/data/selector.ts b/src/data/selector.ts
index f046a5a1fd..71805ef7d4 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -145,21 +145,20 @@ export interface DeviceSelector {
 }
 
 export interface LegacyDeviceSelector {
-  device:
-    | DeviceSelector["device"] & {
-        /**
-         * @deprecated Use filter instead
-         */
-        integration?: DeviceSelectorFilter["integration"];
-        /**
-         * @deprecated Use filter instead
-         */
-        manufacturer?: DeviceSelectorFilter["manufacturer"];
-        /**
-         * @deprecated Use filter instead
-         */
-        model?: DeviceSelectorFilter["model"];
-      };
+  device: DeviceSelector["device"] & {
+    /**
+     * @deprecated Use filter instead
+     */
+    integration?: DeviceSelectorFilter["integration"];
+    /**
+     * @deprecated Use filter instead
+     */
+    manufacturer?: DeviceSelectorFilter["manufacturer"];
+    /**
+     * @deprecated Use filter instead
+     */
+    model?: DeviceSelectorFilter["model"];
+  };
 }
 
 export interface DurationSelector {
@@ -185,21 +184,20 @@ export interface EntitySelector {
 }
 
 export interface LegacyEntitySelector {
-  entity:
-    | EntitySelector["entity"] & {
-        /**
-         * @deprecated Use filter instead
-         */
-        integration?: EntitySelectorFilter["integration"];
-        /**
-         * @deprecated Use filter instead
-         */
-        domain?: EntitySelectorFilter["domain"];
-        /**
-         * @deprecated Use filter instead
-         */
-        device_class?: EntitySelectorFilter["device_class"];
-      };
+  entity: EntitySelector["entity"] & {
+    /**
+     * @deprecated Use filter instead
+     */
+    integration?: EntitySelectorFilter["integration"];
+    /**
+     * @deprecated Use filter instead
+     */
+    domain?: EntitySelectorFilter["domain"];
+    /**
+     * @deprecated Use filter instead
+     */
+    device_class?: EntitySelectorFilter["device_class"];
+  };
 }
 
 export interface StatisticSelector {
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index a43477d8c0..1ceb034b7a 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -48,26 +48,25 @@ class StepFlowCreateEntry extends LitElement {
               </p>
               <div class="devices">
                 ${this.devices.map(
-                  (device) =>
-                    html`
-                      <div class="device">
-                        <div>
-                          <b>${computeDeviceName(device, this.hass)}</b><br />
-                          ${!device.model && !device.manufacturer
-                            ? html`&nbsp;`
-                            : html`${device.model}
-                              ${device.manufacturer
-                                ? html`(${device.manufacturer})`
-                                : ""}`}
-                        </div>
-                        <ha-area-picker
-                          .hass=${this.hass}
-                          .device=${device.id}
-                          .value=${device.area_id ?? undefined}
-                          @value-changed=${this._areaPicked}
-                        ></ha-area-picker>
+                  (device) => html`
+                    <div class="device">
+                      <div>
+                        <b>${computeDeviceName(device, this.hass)}</b><br />
+                        ${!device.model && !device.manufacturer
+                          ? html`&nbsp;`
+                          : html`${device.model}
+                            ${device.manufacturer
+                              ? html`(${device.manufacturer})`
+                              : ""}`}
                       </div>
-                    `
+                      <ha-area-picker
+                        .hass=${this.hass}
+                        .device=${device.id}
+                        .value=${device.area_id ?? undefined}
+                        @value-changed=${this._areaPicked}
+                      ></ha-area-picker>
+                    </div>
+                  `
                 )}
               </div>
             `}
diff --git a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
index 410ba70c04..8549c90682 100644
--- a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
+++ b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
@@ -150,22 +150,21 @@ class DialogLightColorFavorite extends LitElement {
             ? html`
                 <div class="modes">
                   ${this._modes.map(
-                    (value) =>
-                      html`
-                        <ha-icon-button-toggle
-                          border-only
-                          .selected=${value === this._mode}
-                          .label=${this.hass.localize(
-                            `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
-                          )}
-                          .mode=${value}
-                          @click=${this._modeChanged}
-                        >
-                          <span
-                            class="wheel ${classMap({ [value]: true })}"
-                          ></span>
-                        </ha-icon-button-toggle>
-                      `
+                    (value) => html`
+                      <ha-icon-button-toggle
+                        border-only
+                        .selected=${value === this._mode}
+                        .label=${this.hass.localize(
+                          `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
+                        )}
+                        .mode=${value}
+                        @click=${this._modeChanged}
+                      >
+                        <span
+                          class="wheel ${classMap({ [value]: true })}"
+                        ></span>
+                      </ha-icon-button-toggle>
+                    `
                   )}
                 </div>
               `
diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
index cf50ae5c04..90b18f4223 100644
--- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
@@ -415,7 +415,7 @@ class LightRgbColorPicker extends LitElement {
         number,
         number,
         number,
-        number
+        number,
       ];
       this._applyColor({ rgbww_color });
     } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
@@ -427,7 +427,7 @@ class LightRgbColorPicker extends LitElement {
         number,
         number,
         number,
-        number
+        number,
       ];
       this._applyColor({ rgbw_color });
     }
diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts
index 0e68a22c7e..76c2fb9f5b 100644
--- a/src/dialogs/more-info/controls/more-info-configurator.ts
+++ b/src/dialogs/more-info/controls/more-info-configurator.ts
@@ -36,12 +36,13 @@ export class MoreInfoConfigurator extends LitElement {
             </ha-alert>`
           : ""}
         ${this.stateObj.attributes.fields.map(
-          (field) => html`<ha-textfield
-            .label=${field.name}
-            .name=${field.id}
-            .type=${field.type}
-            @change=${this._fieldChanged}
-          ></ha-textfield>`
+          (field) =>
+            html`<ha-textfield
+              .label=${field.name}
+              .name=${field.id}
+              .type=${field.type}
+              @change=${this._fieldChanged}
+            ></ha-textfield>`
         )}
         ${this.stateObj.attributes.submit_caption
           ? html`<p class="submit">
diff --git a/src/dialogs/more-info/controls/more-info-fan.ts b/src/dialogs/more-info/controls/more-info-fan.ts
index 588397c5ce..ae841e996c 100644
--- a/src/dialogs/more-info/controls/more-info-fan.ts
+++ b/src/dialogs/more-info/controls/more-info-fan.ts
@@ -299,23 +299,22 @@ class MoreInfoFan extends LitElement {
                       ></ha-svg-icon>
                     </ha-outlined-button>
                     ${this.stateObj.attributes.preset_modes?.map(
-                      (mode) =>
-                        html`
-                          <ha-list-item
-                            .value=${mode}
-                            .activated=${this._presetMode === mode}
-                          >
-                            ${computeAttributeValueDisplay(
-                              this.hass.localize,
-                              this.stateObj!,
-                              this.hass.locale,
-                              this.hass.config,
-                              this.hass.entities,
-                              "preset_mode",
-                              mode
-                            )}
-                          </ha-list-item>
-                        `
+                      (mode) => html`
+                        <ha-list-item
+                          .value=${mode}
+                          .activated=${this._presetMode === mode}
+                        >
+                          ${computeAttributeValueDisplay(
+                            this.hass.localize,
+                            this.stateObj!,
+                            this.hass.locale,
+                            this.hass.config,
+                            this.hass.entities,
+                            "preset_mode",
+                            mode
+                          )}
+                        </ha-list-item>
+                      `
                     )}
                   </ha-button-menu>
                 `
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 047605cd8a..1d9fcbe0fc 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -156,20 +156,19 @@ class MoreInfoMediaPlayer extends LitElement {
                 @closed=${stopPropagation}
               >
                 ${stateObj.attributes.source_list!.map(
-                  (source) =>
-                    html`
-                      <mwc-list-item .value=${source}
-                        >${computeAttributeValueDisplay(
-                          this.hass.localize,
-                          stateObj,
-                          this.hass.locale,
-                          this.hass.config,
-                          this.hass.entities,
-                          "source",
-                          source
-                        )}</mwc-list-item
-                      >
-                    `
+                  (source) => html`
+                    <mwc-list-item .value=${source}
+                      >${computeAttributeValueDisplay(
+                        this.hass.localize,
+                        stateObj,
+                        this.hass.locale,
+                        this.hass.config,
+                        this.hass.entities,
+                        "source",
+                        source
+                      )}</mwc-list-item
+                    >
+                  `
                 )}
                 <ha-svg-icon .path=${mdiLoginVariant} slot="icon"></ha-svg-icon>
               </ha-select>
diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts
index b11a45a345..57407a62ad 100644
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/src/dialogs/notifications/notification-drawer.ts
@@ -108,12 +108,13 @@ export class HuiNotificationDrawer extends LitElement {
         <div class="notifications">
           ${notifications.length
             ? html`${notifications.map(
-                (notification) => html`<div class="notification">
-                  <notification-item
-                    .hass=${this.hass}
-                    .notification=${notification}
-                  ></notification-item>
-                </div>`
+                (notification) =>
+                  html`<div class="notification">
+                    <notification-item
+                      .hass=${this.hass}
+                      .notification=${notification}
+                    ></notification-item>
+                  </div>`
               )}
               ${this._notifications.length > 1
                 ? html`<div class="notification-actions">
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index de68790067..b479b07a22 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -158,20 +158,24 @@ export class HaVoiceCommandDialog extends LitElement {
                 ></ha-svg-icon>
               </ha-button>
               ${this._pipelines?.map(
-                (pipeline) => html`<ha-list-item
-                  ?selected=${pipeline.id === this._pipelineId ||
-                  (!this._pipelineId &&
-                    pipeline.id === this._preferredPipeline)}
-                  .pipeline=${pipeline.id}
-                  @click=${this._selectPipeline}
-                  .hasMeta=${pipeline.id === this._preferredPipeline}
-                >
-                  ${pipeline.name}${pipeline.id === this._preferredPipeline
-                    ? html`
-                        <ha-svg-icon slot="meta" .path=${mdiStar}></ha-svg-icon>
-                      `
-                    : nothing}
-                </ha-list-item>`
+                (pipeline) =>
+                  html`<ha-list-item
+                    ?selected=${pipeline.id === this._pipelineId ||
+                    (!this._pipelineId &&
+                      pipeline.id === this._preferredPipeline)}
+                    .pipeline=${pipeline.id}
+                    @click=${this._selectPipeline}
+                    .hasMeta=${pipeline.id === this._preferredPipeline}
+                  >
+                    ${pipeline.name}${pipeline.id === this._preferredPipeline
+                      ? html`
+                          <ha-svg-icon
+                            slot="meta"
+                            .path=${mdiStar}
+                          ></ha-svg-icon>
+                        `
+                      : nothing}
+                  </ha-list-item>`
               )}
               ${this.hass.user?.is_admin
                 ? html`<li divider role="separator"></li>
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index bbc978fd7d..e8c470df3b 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -94,26 +94,25 @@ class HassTabsSubpage extends LitElement {
       }
 
       return shownTabs.map(
-        (page) =>
-          html`
-            <a href=${page.path}>
-              <ha-tab
-                .hass=${this.hass}
-                .active=${page.path === activeTab?.path}
-                .narrow=${this.narrow}
-                .name=${page.translationKey
-                  ? localizeFunc(page.translationKey)
-                  : page.name}
-              >
-                ${page.iconPath
-                  ? html`<ha-svg-icon
-                      slot="icon"
-                      .path=${page.iconPath}
-                    ></ha-svg-icon>`
-                  : ""}
-              </ha-tab>
-            </a>
-          `
+        (page) => html`
+          <a href=${page.path}>
+            <ha-tab
+              .hass=${this.hass}
+              .active=${page.path === activeTab?.path}
+              .narrow=${this.narrow}
+              .name=${page.translationKey
+                ? localizeFunc(page.translationKey)
+                : page.name}
+            >
+              ${page.iconPath
+                ? html`<ha-svg-icon
+                    slot="icon"
+                    .path=${page.iconPath}
+                  ></ha-svg-icon>`
+                : ""}
+            </ha-tab>
+          </a>
+        `
       );
     }
   );
diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index 878d6348fa..c2562d1357 100644
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -79,23 +79,22 @@ class PanelCalendar extends LitElement {
               ${this.hass.localize("ui.components.calendar.my_calendars")}
             </div>
             ${this._calendars.map(
-              (selCal) =>
-                html`
-                  <div>
-                    <mwc-formfield .label=${selCal.name}>
-                      <mwc-checkbox
-                        style=${styleMap({
-                          "--mdc-theme-secondary": selCal.backgroundColor!,
-                        })}
-                        .value=${selCal.entity_id}
-                        .checked=${!this._deSelectedCalendars.includes(
-                          selCal.entity_id
-                        )}
-                        @change=${this._handleToggle}
-                      ></mwc-checkbox>
-                    </mwc-formfield>
-                  </div>
-                `
+              (selCal) => html`
+                <div>
+                  <mwc-formfield .label=${selCal.name}>
+                    <mwc-checkbox
+                      style=${styleMap({
+                        "--mdc-theme-secondary": selCal.backgroundColor!,
+                      })}
+                      .value=${selCal.entity_id}
+                      .checked=${!this._deSelectedCalendars.includes(
+                        selCal.entity_id
+                      )}
+                      @change=${this._handleToggle}
+                    ></mwc-checkbox>
+                  </mwc-formfield>
+                </div>
+              `
             )}
           </div>
           <ha-full-calendar
diff --git a/src/panels/config/application_credentials/dialog-add-application-credential.ts b/src/panels/config/application_credentials/dialog-add-application-credential.ts
index 8c1283ec8f..35d02f2837 100644
--- a/src/panels/config/application_credentials/dialog-add-application-credential.ts
+++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts
@@ -28,9 +28,10 @@ interface Domain {
   name: string;
 }
 
-const rowRenderer: ComboBoxLitRenderer<Domain> = (item) => html`<mwc-list-item>
-  <span>${item.name}</span>
-</mwc-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<Domain> = (item) =>
+  html`<mwc-list-item>
+    <span>${item.name}</span>
+  </mwc-list-item>`;
 
 @customElement("dialog-add-application-credential")
 export class DialogAddApplicationCredential extends LitElement {
diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts
index 4edc723c0e..8a326e6867 100644
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -283,15 +283,14 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
                 ? devices.map(
-                    (device) =>
-                      html`
-                        <a href="/config/devices/device/${device.id}">
-                          <paper-item>
-                            <paper-item-body> ${device.name} </paper-item-body>
-                            <ha-icon-next></ha-icon-next>
-                          </paper-item>
-                        </a>
-                      `
+                    (device) => html`
+                      <a href="/config/devices/device/${device.id}">
+                        <paper-item>
+                          <paper-item-body> ${device.name} </paper-item-body>
+                          <ha-icon-next></ha-icon-next>
+                        </paper-item>
+                      </a>
+                    `
                   )
                 : html`
                     <paper-item class="no-link"
diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index 2d25f72f39..3d6349657a 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -109,64 +109,65 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
     return html`
       ${(action.choose ? ensureArray(action.choose) : []).map(
-        (option, idx) => html`<ha-card>
-          <ha-expansion-panel
-            leftChevron
-            @expanded-changed=${this._expandedChanged}
-          >
-            <h3 slot="header">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.option",
-                "number",
-                idx + 1
-              )}:
-              ${this._getDescription(option, idx)}
-            </h3>
+        (option, idx) =>
+          html`<ha-card>
+            <ha-expansion-panel
+              leftChevron
+              @expanded-changed=${this._expandedChanged}
+            >
+              <h3 slot="header">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.type.choose.option",
+                  "number",
+                  idx + 1
+                )}:
+                ${this._getDescription(option, idx)}
+              </h3>
 
-            <ha-icon-button
-              slot="icons"
-              .idx=${idx}
-              .disabled=${this.disabled}
-              @click=${this._removeOption}
-              .label=${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.remove_option"
-              )}
-              .path=${mdiDelete}
-            ></ha-icon-button>
-            <div class="card-content">
-              <h4>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.type.choose.conditions"
-                )}:
-              </h4>
-              <ha-automation-condition
-                nested
-                .conditions=${ensureArray<string | Condition>(
-                  option.conditions
+              <ha-icon-button
+                slot="icons"
+                .idx=${idx}
+                .disabled=${this.disabled}
+                @click=${this._removeOption}
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.type.choose.remove_option"
                 )}
-                .reOrderMode=${this.reOrderMode}
-                .disabled=${this.disabled}
-                .hass=${this.hass}
-                .idx=${idx}
-                @value-changed=${this._conditionChanged}
-              ></ha-automation-condition>
-              <h4>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.type.choose.sequence"
-                )}:
-              </h4>
-              <ha-automation-action
-                nested
-                .actions=${ensureArray(option.sequence) || []}
-                .reOrderMode=${this.reOrderMode}
-                .disabled=${this.disabled}
-                .hass=${this.hass}
-                .idx=${idx}
-                @value-changed=${this._actionChanged}
-              ></ha-automation-action>
-            </div>
-          </ha-expansion-panel>
-        </ha-card>`
+                .path=${mdiDelete}
+              ></ha-icon-button>
+              <div class="card-content">
+                <h4>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.type.choose.conditions"
+                  )}:
+                </h4>
+                <ha-automation-condition
+                  nested
+                  .conditions=${ensureArray<string | Condition>(
+                    option.conditions
+                  )}
+                  .reOrderMode=${this.reOrderMode}
+                  .disabled=${this.disabled}
+                  .hass=${this.hass}
+                  .idx=${idx}
+                  @value-changed=${this._conditionChanged}
+                ></ha-automation-condition>
+                <h4>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.type.choose.sequence"
+                  )}:
+                </h4>
+                <ha-automation-action
+                  nested
+                  .actions=${ensureArray(option.sequence) || []}
+                  .reOrderMode=${this.reOrderMode}
+                  .disabled=${this.disabled}
+                  .hass=${this.hass}
+                  .idx=${idx}
+                  @value-changed=${this._actionChanged}
+                ></ha-automation-action>
+              </div>
+            </ha-expansion-panel>
+          </ha-card>`
       )}
       <ha-button
         outlined
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 65af78bae3..a6ae94240b 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -212,70 +212,69 @@ class HaAutomationPicker extends LitElement {
         title: "",
         width: this.narrow ? undefined : "10%",
         type: "overflow-menu",
-        template: (_: string, automation: any) =>
-          html`
-            <ha-icon-overflow-menu
-              .hass=${this.hass}
-              narrow
-              .items=${[
-                {
-                  path: mdiInformationOutline,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.editor.show_info"
-                  ),
-                  action: () => this._showInfo(automation),
-                },
-                {
-                  path: mdiPlay,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.editor.run"
-                  ),
-                  action: () => this._runActions(automation),
-                },
-                {
-                  path: mdiTransitConnection,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.editor.show_trace"
-                  ),
-                  action: () => this._showTrace(automation),
-                },
-                {
-                  divider: true,
-                },
-                {
-                  path: mdiContentDuplicate,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.picker.duplicate"
-                  ),
-                  action: () => this.duplicate(automation),
-                },
-                {
-                  path:
-                    automation.state === "off"
-                      ? mdiPlayCircleOutline
-                      : mdiStopCircleOutline,
-                  label:
-                    automation.state === "off"
-                      ? this.hass.localize(
-                          "ui.panel.config.automation.editor.enable"
-                        )
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.disable"
-                        ),
-                  action: () => this._toggle(automation),
-                },
-                {
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.picker.delete"
-                  ),
-                  path: mdiDelete,
-                  action: () => this._deleteConfirm(automation),
-                  warning: true,
-                },
-              ]}
-            >
-            </ha-icon-overflow-menu>
-          `,
+        template: (_: string, automation: any) => html`
+          <ha-icon-overflow-menu
+            .hass=${this.hass}
+            narrow
+            .items=${[
+              {
+                path: mdiInformationOutline,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.editor.show_info"
+                ),
+                action: () => this._showInfo(automation),
+              },
+              {
+                path: mdiPlay,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.editor.run"
+                ),
+                action: () => this._runActions(automation),
+              },
+              {
+                path: mdiTransitConnection,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.editor.show_trace"
+                ),
+                action: () => this._showTrace(automation),
+              },
+              {
+                divider: true,
+              },
+              {
+                path: mdiContentDuplicate,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.picker.duplicate"
+                ),
+                action: () => this.duplicate(automation),
+              },
+              {
+                path:
+                  automation.state === "off"
+                    ? mdiPlayCircleOutline
+                    : mdiStopCircleOutline,
+                label:
+                  automation.state === "off"
+                    ? this.hass.localize(
+                        "ui.panel.config.automation.editor.enable"
+                      )
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.disable"
+                      ),
+                action: () => this._toggle(automation),
+              },
+              {
+                label: this.hass.localize(
+                  "ui.panel.config.automation.picker.delete"
+                ),
+                path: mdiDelete,
+                action: () => this._deleteConfirm(automation),
+                warning: true,
+              },
+            ]}
+          >
+          </ha-icon-overflow-menu>
+        `,
       };
       return columns;
     }
diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
index 9731a96394..3be3fbe024 100644
--- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
+++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
@@ -133,110 +133,107 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
           ${Object.entries(this.placeholders).map(
-            ([type, placeholders]) =>
-              html`
-                <h3>
-                  ${this.hass.localize(
-                    `ui.panel.config.automation.editor.${type}s.name`
-                  )}:
-                </h3>
-                ${placeholders.map((placeholder) => {
-                  if (placeholder.fields.includes("device_id")) {
-                    const extraInfo = getPath(this._extraInfo, [
-                      type,
-                      placeholder.index,
-                    ]);
-                    return html`
-                      <ha-area-devices-picker
-                        .type=${type}
-                        .placeholder=${placeholder}
-                        @value-changed=${this._devicePicked}
-                        .hass=${this.hass}
-                        .area=${extraInfo ? extraInfo.area_id : undefined}
-                        .devices=${extraInfo && extraInfo.device_ids
-                          ? extraInfo.device_ids
-                          : undefined}
-                        .includeDomains=${placeholder.domains}
-                        .includeDeviceClasses=${placeholder.device_classes}
-                        .label=${this._getLabel(
-                          placeholder.domains,
-                          placeholder.device_classes
-                        )}
-                      ></ha-area-devices-picker>
-                      ${extraInfo && extraInfo.manualEntity
-                        ? html`
-                            <h3>
-                              ${this.hass.localize(
-                                `ui.panel.config.automation.thingtalk.link_devices.ambiguous_entities`
-                              )}
-                            </h3>
-                            ${Object.keys(extraInfo.manualEntity).map(
-                              (idx) => html`
-                                <ha-entity-picker
-                                  id="device-entity-picker"
-                                  .type=${type}
-                                  .placeholder=${placeholder}
-                                  .index=${idx}
-                                  @change=${this._entityPicked}
-                                  .includeDomains=${placeholder.domains}
-                                  .includeDeviceClasses=${placeholder.device_classes}
-                                  .hass=${this.hass}
-                                  .label=${`${this._getLabel(
-                                    placeholder.domains,
-                                    placeholder.device_classes
-                                  )} of device ${this._getDeviceName(
-                                    getPath(this._placeholderValues, [
-                                      type,
-                                      placeholder.index,
-                                      idx,
-                                      "device_id",
-                                    ])
-                                  )}`}
-                                  .entityFilter=${(entityState: HassEntity) => {
-                                    const devId =
-                                      this._placeholderValues[type][
-                                        placeholder.index
-                                      ][idx].device_id;
-                                    return this._deviceEntityLookup[
-                                      devId
-                                    ].includes(entityState.entity_id);
-                                  }}
-                                ></ha-entity-picker>
-                              `
-                            )}
-                          `
-                        : ""}
-                    `;
-                  }
-                  if (placeholder.fields.includes("entity_id")) {
-                    return html`
-                      <ha-entity-picker
-                        .type=${type}
-                        .placeholder=${placeholder}
-                        @change=${this._entityPicked}
-                        .includeDomains=${placeholder.domains}
-                        .includeDeviceClasses=${placeholder.device_classes}
-                        .hass=${this.hass}
-                        .label=${this._getLabel(
-                          placeholder.domains,
-                          placeholder.device_classes
-                        )}
-                      ></ha-entity-picker>
-                    `;
-                  }
+            ([type, placeholders]) => html`
+              <h3>
+                ${this.hass.localize(
+                  `ui.panel.config.automation.editor.${type}s.name`
+                )}:
+              </h3>
+              ${placeholders.map((placeholder) => {
+                if (placeholder.fields.includes("device_id")) {
+                  const extraInfo = getPath(this._extraInfo, [
+                    type,
+                    placeholder.index,
+                  ]);
                   return html`
-                    <div class="error">
-                      ${this.hass.localize(
-                        `ui.panel.config.automation.thingtalk.link_devices.unknown_placeholder`
-                      )}<br />
-                      ${placeholder.domains}<br />
-                      ${placeholder.fields.map(
-                        (field) => html` ${field}<br /> `
+                    <ha-area-devices-picker
+                      .type=${type}
+                      .placeholder=${placeholder}
+                      @value-changed=${this._devicePicked}
+                      .hass=${this.hass}
+                      .area=${extraInfo ? extraInfo.area_id : undefined}
+                      .devices=${extraInfo && extraInfo.device_ids
+                        ? extraInfo.device_ids
+                        : undefined}
+                      .includeDomains=${placeholder.domains}
+                      .includeDeviceClasses=${placeholder.device_classes}
+                      .label=${this._getLabel(
+                        placeholder.domains,
+                        placeholder.device_classes
                       )}
-                    </div>
+                    ></ha-area-devices-picker>
+                    ${extraInfo && extraInfo.manualEntity
+                      ? html`
+                          <h3>
+                            ${this.hass.localize(
+                              `ui.panel.config.automation.thingtalk.link_devices.ambiguous_entities`
+                            )}
+                          </h3>
+                          ${Object.keys(extraInfo.manualEntity).map(
+                            (idx) => html`
+                              <ha-entity-picker
+                                id="device-entity-picker"
+                                .type=${type}
+                                .placeholder=${placeholder}
+                                .index=${idx}
+                                @change=${this._entityPicked}
+                                .includeDomains=${placeholder.domains}
+                                .includeDeviceClasses=${placeholder.device_classes}
+                                .hass=${this.hass}
+                                .label=${`${this._getLabel(
+                                  placeholder.domains,
+                                  placeholder.device_classes
+                                )} of device ${this._getDeviceName(
+                                  getPath(this._placeholderValues, [
+                                    type,
+                                    placeholder.index,
+                                    idx,
+                                    "device_id",
+                                  ])
+                                )}`}
+                                .entityFilter=${(entityState: HassEntity) => {
+                                  const devId =
+                                    this._placeholderValues[type][
+                                      placeholder.index
+                                    ][idx].device_id;
+                                  return this._deviceEntityLookup[
+                                    devId
+                                  ].includes(entityState.entity_id);
+                                }}
+                              ></ha-entity-picker>
+                            `
+                          )}
+                        `
+                      : ""}
                   `;
-                })}
-              `
+                }
+                if (placeholder.fields.includes("entity_id")) {
+                  return html`
+                    <ha-entity-picker
+                      .type=${type}
+                      .placeholder=${placeholder}
+                      @change=${this._entityPicked}
+                      .includeDomains=${placeholder.domains}
+                      .includeDeviceClasses=${placeholder.device_classes}
+                      .hass=${this.hass}
+                      .label=${this._getLabel(
+                        placeholder.domains,
+                        placeholder.device_classes
+                      )}
+                    ></ha-entity-picker>
+                  `;
+                }
+                return html`
+                  <div class="error">
+                    ${this.hass.localize(
+                      `ui.panel.config.automation.thingtalk.link_devices.unknown_placeholder`
+                    )}<br />
+                    ${placeholder.domains}<br />
+                    ${placeholder.fields.map((field) => html` ${field}<br /> `)}
+                  </div>
+                `;
+              })}
+            `
           )}
         </div>
         <mwc-button @click=${this.skip} slot="secondaryAction">
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index 44fd7f79c8..c926a2c581 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -125,11 +125,10 @@ class HaBlueprintOverview extends LitElement {
         direction: "asc",
         grows: true,
         template: narrow
-          ? (name, entity: any) =>
-              html`
-                ${name}<br />
-                <div class="secondary">${entity.path}</div>
-              `
+          ? (name, entity: any) => html`
+              ${name}<br />
+              <div class="secondary">${entity.path}</div>
+            `
           : undefined,
       },
       type: {
diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index 9225670215..ade0cf81a8 100644
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -181,9 +181,8 @@ class HaConfigSystemNavigation extends LitElement {
       const hardwareInfo: HardwareInfo = await this.hass.callWS({
         type: "hardware/info",
       });
-      this._boardName = hardwareInfo?.hardware.find(
-        (hw) => hw.board !== null
-      )?.name;
+      this._boardName = hardwareInfo?.hardware.find((hw) => hw.board !== null)
+        ?.name;
     } else if (isHassioLoaded) {
       const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
       if (osData.board) {
diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
index 9bf3e433ea..7ea0ec1026 100644
--- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
@@ -20,7 +20,7 @@ declare global {
 }
 
 export abstract class HaDeviceAutomationCard<
-  T extends DeviceAutomation
+  T extends DeviceAutomation,
 > extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -76,20 +76,19 @@ export abstract class HaDeviceAutomationCard<
       <div class="content">
         <ha-chip-set>
           ${automations.map(
-            (automation, idx) =>
-              html`
-                <ha-chip
-                  .index=${idx}
-                  @click=${this._handleAutomationClicked}
-                  class=${automation.metadata?.secondary ? "secondary" : ""}
-                >
-                  ${this._localizeDeviceAutomation(
-                    this.hass,
-                    this.entityReg!,
-                    automation
-                  )}
-                </ha-chip>
-              `
+            (automation, idx) => html`
+              <ha-chip
+                .index=${idx}
+                @click=${this._handleAutomationClicked}
+                class=${automation.metadata?.secondary ? "secondary" : ""}
+              >
+                ${this._localizeDeviceAutomation(
+                  this.hass,
+                  this.entityReg!,
+                  automation
+                )}
+              </ha-chip>
+            `
           )}
         </ha-chip-set>
         ${!this._showSecondary && automations.length < this.automations.length
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 2cd52f253c..2c2051065e 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -376,32 +376,30 @@ export class HaConfigDevicePage extends LitElement {
     const firstDeviceAction = actions.shift();
 
     if (device.disabled_by) {
-      deviceInfo.push(
-        html`
-          <ha-alert alert-type="warning">
-            ${this.hass.localize(
-              "ui.panel.config.devices.enabled_cause",
-              "type",
-              this.hass.localize(
-                `ui.panel.config.devices.type.${device.entry_type || "device"}`
-              ),
-              "cause",
-              this.hass.localize(
-                `ui.panel.config.devices.disabled_by.${device.disabled_by}`
-              )
-            )}
-          </ha-alert>
-          ${device.disabled_by === "user"
-            ? html`
-                <div class="card-actions" slot="actions">
-                  <mwc-button unelevated @click=${this._enableDevice}>
-                    ${this.hass.localize("ui.common.enable")}
-                  </mwc-button>
-                </div>
-              `
-            : ""}
-        `
-      );
+      deviceInfo.push(html`
+        <ha-alert alert-type="warning">
+          ${this.hass.localize(
+            "ui.panel.config.devices.enabled_cause",
+            "type",
+            this.hass.localize(
+              `ui.panel.config.devices.type.${device.entry_type || "device"}`
+            ),
+            "cause",
+            this.hass.localize(
+              `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+            )
+          )}
+        </ha-alert>
+        ${device.disabled_by === "user"
+          ? html`
+              <div class="card-actions" slot="actions">
+                <mwc-button unelevated @click=${this._enableDevice}>
+                  ${this.hass.localize("ui.common.enable")}
+                </mwc-button>
+              </div>
+            `
+          : ""}
+      `);
     }
 
     this._renderIntegrationInfo(device, integrations, deviceInfo);
@@ -751,12 +749,11 @@ export class HaConfigDevicePage extends LitElement {
                   ? html`
                       <div>
                         ${this._deviceAlerts.map(
-                          (alert) =>
-                            html`
-                              <ha-alert .alertType=${alert.level}>
-                                ${alert.text}
-                              </ha-alert>
-                            `
+                          (alert) => html`
+                            <ha-alert .alertType=${alert.level}>
+                              ${alert.text}
+                            </ha-alert>
+                          `
                         )}
                       </div>
                     `
diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts
index dc4923f27a..9d27716a8a 100644
--- a/src/panels/config/energy/components/ha-energy-battery-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts
@@ -76,13 +76,12 @@ export class EnergyBatterySettings extends LitElement {
             >
           </p>
           ${batteryValidation.map(
-            (result) =>
-              html`
-                <ha-energy-validation-result
-                  .hass=${this.hass}
-                  .issues=${result}
-                ></ha-energy-validation-result>
-              `
+            (result) => html`
+              <ha-energy-validation-result
+                .hass=${this.hass}
+                .issues=${result}
+              ></ha-energy-validation-result>
+            `
           )}
 
           <h3>
diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts
index 52012f4106..dc2df5472f 100644
--- a/src/panels/config/energy/components/ha-energy-device-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-device-settings.ts
@@ -68,13 +68,12 @@ export class EnergyDeviceSettings extends LitElement {
             >
           </p>
           ${this.validationResult?.device_consumption.map(
-            (result) =>
-              html`
-                <ha-energy-validation-result
-                  .hass=${this.hass}
-                  .issues=${result}
-                ></ha-energy-validation-result>
-              `
+            (result) => html`
+              <ha-energy-validation-result
+                .hass=${this.hass}
+                .issues=${result}
+              ></ha-energy-validation-result>
+            `
           )}
           <h3>
             ${this.hass.localize(
diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts
index 14f6653f05..135d686ebc 100644
--- a/src/panels/config/energy/components/ha-energy-gas-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts
@@ -74,13 +74,12 @@ export class EnergyGasSettings extends LitElement {
             >
           </p>
           ${gasValidation.map(
-            (result) =>
-              html`
-                <ha-energy-validation-result
-                  .hass=${this.hass}
-                  .issues=${result}
-                ></ha-energy-validation-result>
-              `
+            (result) => html`
+              <ha-energy-validation-result
+                .hass=${this.hass}
+                .issues=${result}
+              ></ha-energy-validation-result>
+            `
           )}
           <h3>
             ${this.hass.localize("ui.panel.config.energy.gas.gas_consumption")}
diff --git a/src/panels/config/energy/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts
index 4fe65f0188..ccc7e492e7 100644
--- a/src/panels/config/energy/components/ha-energy-solar-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts
@@ -79,13 +79,12 @@ export class EnergySolarSettings extends LitElement {
             >
           </p>
           ${solarValidation.map(
-            (result) =>
-              html`
-                <ha-energy-validation-result
-                  .hass=${this.hass}
-                  .issues=${result}
-                ></ha-energy-validation-result>
-              `
+            (result) => html`
+              <ha-energy-validation-result
+                .hass=${this.hass}
+                .issues=${result}
+              ></ha-energy-validation-result>
+            `
           )}
 
           <h3>
diff --git a/src/panels/config/energy/components/ha-energy-water-settings.ts b/src/panels/config/energy/components/ha-energy-water-settings.ts
index a997629695..278b3f747e 100644
--- a/src/panels/config/energy/components/ha-energy-water-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-water-settings.ts
@@ -75,13 +75,12 @@ export class EnergyWaterSettings extends LitElement {
             >
           </p>
           ${waterValidation.map(
-            (result) =>
-              html`
-                <ha-energy-validation-result
-                  .hass=${this.hass}
-                  .issues=${result}
-                ></ha-energy-validation-result>
-              `
+            (result) => html`
+              <ha-energy-validation-result
+                .hass=${this.hass}
+                .issues=${result}
+              ></ha-energy-validation-result>
+            `
           )}
           <h3>
             ${this.hass.localize(
diff --git a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
index 2cc14377b5..dd05a30612 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
@@ -139,31 +139,32 @@ export class DialogEnergySolarSettings
         ${this._forecast
           ? html`<div class="forecast-options">
               ${this._configEntries?.map(
-                (entry) => html`<ha-formfield
-                  .label=${html`<div
-                    style="display: flex; align-items: center;"
+                (entry) =>
+                  html`<ha-formfield
+                    .label=${html`<div
+                      style="display: flex; align-items: center;"
+                    >
+                      <img
+                        alt=""
+                        referrerpolicy="no-referrer"
+                        style="height: 24px; margin-right: 16px;"
+                        src=${brandsUrl({
+                          domain: entry.domain,
+                          type: "icon",
+                          darkOptimized: this.hass.themes?.darkMode,
+                        })}
+                      />${entry.title}
+                    </div>`}
                   >
-                    <img
-                      alt=""
-                      referrerpolicy="no-referrer"
-                      style="height: 24px; margin-right: 16px;"
-                      src=${brandsUrl({
-                        domain: entry.domain,
-                        type: "icon",
-                        darkOptimized: this.hass.themes?.darkMode,
-                      })}
-                    />${entry.title}
-                  </div>`}
-                >
-                  <ha-checkbox
-                    .entry=${entry}
-                    @change=${this._forecastCheckChanged}
-                    .checked=${this._source?.config_entry_solar_forecast?.includes(
-                      entry.entry_id
-                    )}
-                  >
-                  </ha-checkbox>
-                </ha-formfield>`
+                    <ha-checkbox
+                      .entry=${entry}
+                      @change=${this._forecastCheckChanged}
+                      .checked=${this._source?.config_entry_solar_forecast?.includes(
+                        entry.entry_id
+                      )}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>`
               )}
               <mwc-button @click=${this._addForecast}>
                 ${this.hass.localize(
diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts
index 96d1214370..940ea5de59 100644
--- a/src/panels/config/entities/entity-registry-settings-editor.ts
+++ b/src/panels/config/entities/entity-registry-settings-editor.ts
@@ -892,11 +892,9 @@ export class EntityRegistrySettingsEditor extends LitElement {
                   "ui.dialogs.entity_registry.editor.use_device_area"
                 )}
                 ${this.hass.devices[this.entry.device_id].area_id
-                  ? `(${
-                      this.hass.areas[
-                        this.hass.devices[this.entry.device_id].area_id!
-                      ]?.name
-                    })`
+                  ? `(${this.hass.areas[
+                      this.hass.devices[this.entry.device_id].area_id!
+                    ]?.name})`
                   : ""}</span
               >
               <span slot="description"
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 67b0b4e5bb..9c0815850c 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -201,15 +201,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         direction: "asc",
         grows: true,
         template: narrow
-          ? (name, entity: EntityRow) =>
-              html`
-                ${name}<br />
-                <div class="secondary">
-                  ${entity.entity_id} |
-                  ${this.hass.localize(`component.${entity.platform}.title`) ||
-                  entity.platform}
-                </div>
-              `
+          ? (name, entity: EntityRow) => html`
+              ${name}<br />
+              <div class="secondary">
+                ${entity.entity_id} |
+                ${this.hass.localize(`component.${entity.platform}.title`) ||
+                entity.platform}
+              </div>
+            `
           : undefined,
       },
       entity_id: {
diff --git a/src/panels/config/hardware/dialog-hardware-available.ts b/src/panels/config/hardware/dialog-hardware-available.ts
index d60d801b19..817ee0db12 100644
--- a/src/panels/config/hardware/dialog-hardware-available.ts
+++ b/src/panels/config/hardware/dialog-hardware-available.ts
@@ -110,51 +110,50 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
           </search-input>
         </div>
         ${devices.map(
-          (device) =>
-            html`
-              <ha-expansion-panel
-                .header=${device.name}
-                .secondary=${device.by_id || undefined}
-                outlined
-              >
-                <div class="device-property">
-                  <span>
-                    ${this.hass.localize(
-                      "ui.panel.config.hardware.available_hardware.subsystem"
-                    )}:
-                  </span>
-                  <span>${device.subsystem}</span>
-                </div>
-                <div class="device-property">
-                  <span>
-                    ${this.hass.localize(
-                      "ui.panel.config.hardware.available_hardware.device_path"
-                    )}:
-                  </span>
-                  <code>${device.dev_path}</code>
-                </div>
-                ${device.by_id
-                  ? html`
-                      <div class="device-property">
-                        <span>
-                          ${this.hass.localize(
-                            "ui.panel.config.hardware.available_hardware.id"
-                          )}:
-                        </span>
-                        <code>${device.by_id}</code>
-                      </div>
-                    `
-                  : ""}
-                <div class="attributes">
-                  <span>
-                    ${this.hass.localize(
-                      "ui.panel.config.hardware.available_hardware.attributes"
-                    )}:
-                  </span>
-                  <pre>${dump(device.attributes, { indent: 2 })}</pre>
-                </div>
-              </ha-expansion-panel>
-            `
+          (device) => html`
+            <ha-expansion-panel
+              .header=${device.name}
+              .secondary=${device.by_id || undefined}
+              outlined
+            >
+              <div class="device-property">
+                <span>
+                  ${this.hass.localize(
+                    "ui.panel.config.hardware.available_hardware.subsystem"
+                  )}:
+                </span>
+                <span>${device.subsystem}</span>
+              </div>
+              <div class="device-property">
+                <span>
+                  ${this.hass.localize(
+                    "ui.panel.config.hardware.available_hardware.device_path"
+                  )}:
+                </span>
+                <code>${device.dev_path}</code>
+              </div>
+              ${device.by_id
+                ? html`
+                    <div class="device-property">
+                      <span>
+                        ${this.hass.localize(
+                          "ui.panel.config.hardware.available_hardware.id"
+                        )}:
+                      </span>
+                      <code>${device.by_id}</code>
+                    </div>
+                  `
+                : ""}
+              <div class="attributes">
+                <span>
+                  ${this.hass.localize(
+                    "ui.panel.config.hardware.available_hardware.attributes"
+                  )}:
+                </span>
+                <pre>${dump(device.attributes, { indent: 2 })}</pre>
+              </div>
+            </ha-expansion-panel>
+          `
         )}
       </ha-dialog>
     `;
diff --git a/src/panels/config/helpers/forms/ha-counter-form.ts b/src/panels/config/helpers/forms/ha-counter-form.ts
index 92c844af88..c2b03630ab 100644
--- a/src/panels/config/helpers/forms/ha-counter-form.ts
+++ b/src/panels/config/helpers/forms/ha-counter-form.ts
@@ -53,10 +53,11 @@ class HaCounterForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
index 82912b4552..870d83cf22 100644
--- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
@@ -31,10 +31,11 @@ class HaInputBooleanForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-input_button-form.ts b/src/panels/config/helpers/forms/ha-input_button-form.ts
index a67b65d5d3..0b8ec14ede 100644
--- a/src/panels/config/helpers/forms/ha-input_button-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_button-form.ts
@@ -31,10 +31,11 @@ class HaInputButtonForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
index 61e70d735a..c44fe057c8 100644
--- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
@@ -45,10 +45,11 @@ class HaInputDateTimeForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts
index f090713f72..0c83b7861c 100644
--- a/src/panels/config/helpers/forms/ha-input_number-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_number-form.ts
@@ -60,10 +60,11 @@ class HaInputNumberForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index 378c6aa179..55217382bd 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -43,10 +43,11 @@ class HaInputSelectForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-input_text-form.ts b/src/panels/config/helpers/forms/ha-input_text-form.ts
index d8ba12b444..90252e2ab0 100644
--- a/src/panels/config/helpers/forms/ha-input_text-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_text-form.ts
@@ -50,10 +50,11 @@ class HaInputTextForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts
index 1656fafb00..5a503eef1b 100644
--- a/src/panels/config/helpers/forms/ha-schedule-form.ts
+++ b/src/panels/config/helpers/forms/ha-schedule-form.ts
@@ -98,10 +98,11 @@ class HaScheduleForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts
index 1d427ef7af..4108f7fa43 100644
--- a/src/panels/config/helpers/forms/ha-timer-form.ts
+++ b/src/panels/config/helpers/forms/ha-timer-form.ts
@@ -39,10 +39,11 @@ class HaTimerForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
+    this.updateComplete.then(
+      () =>
+        (
+          this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+        )?.focus()
     );
   }
 
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index 41d5f03441..55b9cb1bb7 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -96,13 +96,12 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           filterable: true,
           grows: true,
           direction: "asc",
-          template: (name, item: any) =>
-            html`
-              ${name}
-              ${narrow
-                ? html` <div class="secondary">${item.entity_id}</div> `
-                : ""}
-            `,
+          template: (name, item: any) => html`
+            ${name}
+            ${narrow
+              ? html` <div class="secondary">${item.entity_id}</div> `
+              : ""}
+          `,
         },
       };
       if (!narrow) {
diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index 45292826bc..9248d0c805 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -410,22 +410,23 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                   </h1>
                   <mwc-list>
                     ${discoveryFlows.map(
-                      (flow) => html`<ha-list-item
-                        hasMeta
-                        class="discovered"
-                        noninteractive
-                      >
-                        ${flow.localized_title}
-                        <ha-button
-                          slot="meta"
-                          unelevated
-                          .flow=${flow}
-                          @click=${this._continueFlow}
-                          .label=${this.hass.localize(
-                            "ui.panel.config.integrations.configure"
-                          )}
-                        ></ha-button>
-                      </ha-list-item>`
+                      (flow) =>
+                        html`<ha-list-item
+                          hasMeta
+                          class="discovered"
+                          noninteractive
+                        >
+                          ${flow.localized_title}
+                          <ha-button
+                            slot="meta"
+                            unelevated
+                            .flow=${flow}
+                            @click=${this._continueFlow}
+                            .label=${this.hass.localize(
+                              "ui.panel.config.integrations.configure"
+                            )}
+                          ></ha-button>
+                        </ha-list-item>`
                     )}
                   </mwc-list>
                 </ha-card>`
diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
index 2e60ec2935..77e7ab18fd 100644
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@@ -150,7 +150,7 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
     ): [
       [string, ConfigEntryExtended[]][],
       ConfigEntryExtended[],
-      ConfigEntryExtended[]
+      ConfigEntryExtended[],
     ] => {
       let filteredConfigEntries: ConfigEntryExtended[];
       const ignored: ConfigEntryExtended[] = [];
diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts
index 0a96aa0856..ed4fc8c160 100644
--- a/src/panels/config/integrations/ha-domain-integrations.ts
+++ b/src/panels/config/integrations/ha-domain-integrations.ts
@@ -44,29 +44,30 @@ class HaDomainIntegrations extends LitElement {
               ${this.hass.localize("ui.panel.config.integrations.discovered")}
             </h3>
             ${this.flowsInProgress.map(
-              (flow) => html`<mwc-list-item
-                graphic="medium"
-                .flow=${flow}
-                @request-selected=${this._flowInProgressPicked}
-                hasMeta
-              >
-                <img
-                  alt=""
-                  slot="graphic"
-                  loading="lazy"
-                  src=${brandsUrl({
-                    domain: flow.handler,
-                    type: "icon",
-                    useFallback: true,
-                    darkOptimized: this.hass.themes?.darkMode,
-                  })}
-                  referrerpolicy="no-referrer"
-                />
-                <span
-                  >${localizeConfigFlowTitle(this.hass.localize, flow)}</span
+              (flow) =>
+                html`<mwc-list-item
+                  graphic="medium"
+                  .flow=${flow}
+                  @request-selected=${this._flowInProgressPicked}
+                  hasMeta
                 >
-                <ha-icon-next slot="meta"></ha-icon-next>
-              </mwc-list-item>`
+                  <img
+                    alt=""
+                    slot="graphic"
+                    loading="lazy"
+                    src=${brandsUrl({
+                      domain: flow.handler,
+                      type: "icon",
+                      useFallback: true,
+                      darkOptimized: this.hass.themes?.darkMode,
+                    })}
+                    referrerpolicy="no-referrer"
+                  />
+                  <span
+                    >${localizeConfigFlowTitle(this.hass.localize, flow)}</span
+                  >
+                  <ha-icon-next slot="meta"></ha-icon-next>
+                </mwc-list-item>`
             )}
             <li divider role="separator"></li>
             ${this.integration &&
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
index 6fe1e65f6b..13b2f85c66 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
@@ -223,25 +223,26 @@ class ZHAConfigDashboard extends LitElement {
         </ha-card>
         ${this._configuration
           ? Object.entries(this._configuration.schemas).map(
-              ([section, schema]) => html`<ha-card
-                header=${this.hass.localize(
-                  `component.zha.config_panel.${section}.title`
-                )}
-              >
-                <div class="card-content">
-                  <ha-form
-                    .hass=${this.hass}
-                    .schema=${schema}
-                    .data=${this._configuration!.data[section]}
-                    @value-changed=${this._dataChanged}
-                    .section=${section}
-                    .computeLabel=${this._computeLabelCallback(
-                      this.hass.localize,
-                      section
-                    )}
-                  ></ha-form>
-                </div>
-              </ha-card>`
+              ([section, schema]) =>
+                html`<ha-card
+                  header=${this.hass.localize(
+                    `component.zha.config_panel.${section}.title`
+                  )}
+                >
+                  <div class="card-content">
+                    <ha-form
+                      .hass=${this.hass}
+                      .schema=${schema}
+                      .data=${this._configuration!.data[section]}
+                      @value-changed=${this._dataChanged}
+                      .section=${section}
+                      .computeLabel=${this._computeLabelCallback(
+                        this.hass.localize,
+                        section
+                      )}
+                    ></ha-form>
+                  </div>
+                </ha-card>`
             )
           : ""}
         <ha-card>
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
index 0b756fe41d..b57fbcf6ea 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
@@ -94,8 +94,9 @@ export class ZHAGroupsDashboard extends LitElement {
               title: this.hass.localize("ui.panel.config.zha.groups.group_id"),
               type: "numeric",
               width: "15%",
-              template: (groupId: number) =>
-                html` ${formatAsPaddedHex(groupId)} `,
+              template: (groupId: number) => html`
+                ${formatAsPaddedHex(groupId)}
+              `,
               sortable: true,
             },
             members: {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index d6a1b460a9..7ffc6554b2 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -228,27 +228,28 @@ class DialogZWaveJSAddNode extends LitElement {
                   .sort()
                   .reverse()
                   .map(
-                    (securityClass) => html`<ha-formfield
-                      .label=${html`<b
-                          >${this.hass.localize(
-                            `ui.panel.config.zwave_js.security_classes.${SecurityClass[securityClass]}.title`
-                          )}</b
-                        >
-                        <div class="secondary">
-                          ${this.hass.localize(
-                            `ui.panel.config.zwave_js.security_classes.${SecurityClass[securityClass]}.description`
-                          )}
-                        </div>`}
-                    >
-                      <ha-checkbox
-                        @change=${this._handleSecurityClassChange}
-                        .value=${securityClass}
-                        .checked=${this._securityClasses.includes(
-                          securityClass
-                        )}
+                    (securityClass) =>
+                      html`<ha-formfield
+                        .label=${html`<b
+                            >${this.hass.localize(
+                              `ui.panel.config.zwave_js.security_classes.${SecurityClass[securityClass]}.title`
+                            )}</b
+                          >
+                          <div class="secondary">
+                            ${this.hass.localize(
+                              `ui.panel.config.zwave_js.security_classes.${SecurityClass[securityClass]}.description`
+                            )}
+                          </div>`}
                       >
-                      </ha-checkbox>
-                    </ha-formfield>`
+                        <ha-checkbox
+                          @change=${this._handleSecurityClassChange}
+                          .value=${securityClass}
+                          .checked=${this._securityClasses.includes(
+                            securityClass
+                          )}
+                        >
+                        </ha-checkbox>
+                      </ha-formfield>`
                   )}
               </div>
               <mwc-button
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts
index ed32965b98..39eac1a73d 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts
@@ -364,7 +364,7 @@ class DialogZWaveJSNodeStatistics extends LitElement {
 
         const workingRoutesValueMap: [
           string,
-          WorkingRouteStatistics | null | undefined
+          WorkingRouteStatistics | null | undefined,
         ][] = [
           ["lwr", this._nodeStatistics?.lwr],
           ["nlwr", this._nodeStatistics?.nlwr],
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
index 5fc4637007..79dbf42c05 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@@ -179,32 +179,34 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               item.endpoint.toString()
             )
           ).map(
-            ([endpoint, configParamEntries]) => html`<div class="content">
-              <h3>
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.node_config.endpoint",
-                  "endpoint",
-                  endpoint
-                )}
-              </h3>
-              <ha-card>
-                ${configParamEntries
-                  .sort(([_, paramA], [__, paramB]) =>
-                    paramA.property !== paramB.property
-                      ? paramA.property - paramB.property
-                      : paramA.property_key! - paramB.property_key!
-                  )
-                  .map(
-                    ([id, item]) => html` <ha-settings-row
-                      class="config-item"
-                      .configId=${id}
-                      .narrow=${this.narrow}
-                    >
-                      ${this._generateConfigBox(id, item)}
-                    </ha-settings-row>`
+            ([endpoint, configParamEntries]) =>
+              html`<div class="content">
+                <h3>
+                  ${this.hass.localize(
+                    "ui.panel.config.zwave_js.node_config.endpoint",
+                    "endpoint",
+                    endpoint
                   )}
-              </ha-card>
-            </div>`
+                </h3>
+                <ha-card>
+                  ${configParamEntries
+                    .sort(([_, paramA], [__, paramB]) =>
+                      paramA.property !== paramB.property
+                        ? paramA.property - paramB.property
+                        : paramA.property_key! - paramB.property_key!
+                    )
+                    .map(
+                      ([id, item]) =>
+                        html` <ha-settings-row
+                          class="config-item"
+                          .configId=${id}
+                          .narrow=${this.narrow}
+                        >
+                          ${this._generateConfigBox(id, item)}
+                        </ha-settings-row>`
+                    )}
+                </ha-card>
+              </div>`
           )}
         </ha-config-section>
       </hass-tabs-subpage>
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 3430181210..7af4aa2587 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -123,12 +123,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
           sortable: true,
           filterable: true,
           width: "20%",
-          template: (mode) =>
-            html`
-              ${this.hass.localize(
-                `ui.panel.config.lovelace.dashboards.conf_mode.${mode}`
-              ) || mode}
-            `,
+          template: (mode) => html`
+            ${this.hass.localize(
+              `ui.panel.config.lovelace.dashboards.conf_mode.${mode}`
+            ) || mode}
+          `,
         };
         if (dashboards.some((dashboard) => dashboard.filename)) {
           columns.filename = {
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index 411d288fbe..1d9cc10c8c 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -58,12 +58,11 @@ export class HaConfigLovelaceRescources extends LitElement {
         sortable: true,
         filterable: true,
         width: "30%",
-        template: (type) =>
-          html`
-            ${this.hass.localize(
-              `ui.panel.config.lovelace.resources.types.${type}`
-            ) || type}
-          `,
+        template: (type) => html`
+          ${this.hass.localize(
+            `ui.panel.config.lovelace.resources.types.${type}`
+          ) || type}
+        `,
       },
     })
   );
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index a2cd8ffe30..114649620d 100644
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -139,25 +139,24 @@ export class HassioNetwork extends LitElement {
                         ${this._accessPoints.accesspoints
                           .filter((ap) => ap.ssid)
                           .map(
-                            (ap) =>
-                              html`
-                                <mwc-list-item
-                                  twoline
-                                  @click=${this._selectAP}
-                                  .activated=${ap.ssid ===
-                                  this._wifiConfiguration?.ssid}
-                                  .ap=${ap}
-                                >
-                                  <span>${ap.ssid}</span>
-                                  <span slot="secondary">
-                                    ${ap.mac} -
-                                    ${this.hass.localize(
-                                      "ui.panel.config.network.supervisor.signal_strength"
-                                    )}:
-                                    ${ap.signal}
-                                  </span>
-                                </mwc-list-item>
-                              `
+                            (ap) => html`
+                              <mwc-list-item
+                                twoline
+                                @click=${this._selectAP}
+                                .activated=${ap.ssid ===
+                                this._wifiConfiguration?.ssid}
+                                .ap=${ap}
+                              >
+                                <span>${ap.ssid}</span>
+                                <span slot="secondary">
+                                  ${ap.mac} -
+                                  ${this.hass.localize(
+                                    "ui.panel.config.network.supervisor.signal_strength"
+                                  )}:
+                                  ${ap.signal}
+                                </span>
+                              </mwc-list-item>
+                            `
                           )}
                       </mwc-list>
                     `
diff --git a/src/panels/config/repairs/dialog-system-information.ts b/src/panels/config/repairs/dialog-system-information.ts
index bc3b1e0181..c96ac4c574 100644
--- a/src/panels/config/repairs/dialog-system-information.ts
+++ b/src/panels/config/repairs/dialog-system-information.ts
@@ -305,13 +305,11 @@ class DialogSystemInformation extends LitElement {
     const sections: TemplateResult[] = [];
 
     if (!this._systemInfo) {
-      sections.push(
-        html`
-          <div class="loading-container">
-            <ha-circular-progress active></ha-circular-progress>
-          </div>
-        `
-      );
+      sections.push(html`
+        <div class="loading-container">
+          <ha-circular-progress active></ha-circular-progress>
+        </div>
+      `);
     } else {
       const domains = Object.keys(this._systemInfo).sort(sortKeys);
       for (const domain of domains) {
@@ -371,24 +369,22 @@ class DialogSystemInformation extends LitElement {
           `);
         }
         if (domain !== "homeassistant") {
-          sections.push(
-            html`
-              <div class="card-header">
-                <h3>${domainToName(this.hass.localize, domain)}</h3>
-                ${!domainInfo.manage_url
-                  ? ""
-                  : html`
-                      <a class="manage" href=${domainInfo.manage_url}>
-                        <mwc-button>
-                          ${this.hass.localize(
-                            "ui.panel.config.info.system_health.manage"
-                          )}
-                        </mwc-button>
-                      </a>
-                    `}
-              </div>
-            `
-          );
+          sections.push(html`
+            <div class="card-header">
+              <h3>${domainToName(this.hass.localize, domain)}</h3>
+              ${!domainInfo.manage_url
+                ? ""
+                : html`
+                    <a class="manage" href=${domainInfo.manage_url}>
+                      <mwc-button>
+                        ${this.hass.localize(
+                          "ui.panel.config.info.system_health.manage"
+                        )}
+                      </mwc-button>
+                    </a>
+                  `}
+            </div>
+          `);
         }
         sections.push(html`
           <table>
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index df9f6be040..3a7a7790b8 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -90,8 +90,9 @@ class HaSceneDashboard extends LitElement {
             "ui.panel.config.scene.picker.headers.state"
           ),
           type: "icon",
-          template: (_, scene) =>
-            html` <ha-state-icon .state=${scene}></ha-state-icon> `,
+          template: (_, scene) => html`
+            <ha-state-icon .state=${scene}></ha-state-icon>
+          `,
         },
         name: {
           title: this.hass.localize(
@@ -151,50 +152,49 @@ class HaSceneDashboard extends LitElement {
         title: "",
         width: "72px",
         type: "overflow-menu",
-        template: (_: string, scene: any) =>
-          html`
-            <ha-icon-overflow-menu
-              .hass=${this.hass}
-              narrow
-              .items=${[
-                {
-                  path: mdiInformationOutline,
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.show_info"
-                  ),
-                  action: () => this._showInfo(scene),
-                },
-                {
-                  path: mdiPlay,
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.activate"
-                  ),
-                  action: () => this._activateScene(scene),
-                },
-                {
-                  divider: true,
-                },
-                {
-                  path: mdiContentDuplicate,
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.duplicate"
-                  ),
-                  action: () => this._duplicate(scene),
-                  disabled: !scene.attributes.id,
-                },
-                {
-                  label: this.hass.localize(
-                    "ui.panel.config.scene.picker.delete"
-                  ),
-                  path: mdiDelete,
-                  action: () => this._deleteConfirm(scene),
-                  warning: scene.attributes.id,
-                  disabled: !scene.attributes.id,
-                },
-              ]}
-            >
-            </ha-icon-overflow-menu>
-          `,
+        template: (_: string, scene: any) => html`
+          <ha-icon-overflow-menu
+            .hass=${this.hass}
+            narrow
+            .items=${[
+              {
+                path: mdiInformationOutline,
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.show_info"
+                ),
+                action: () => this._showInfo(scene),
+              },
+              {
+                path: mdiPlay,
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.activate"
+                ),
+                action: () => this._activateScene(scene),
+              },
+              {
+                divider: true,
+              },
+              {
+                path: mdiContentDuplicate,
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.duplicate"
+                ),
+                action: () => this._duplicate(scene),
+                disabled: !scene.attributes.id,
+              },
+              {
+                label: this.hass.localize(
+                  "ui.panel.config.scene.picker.delete"
+                ),
+                path: mdiDelete,
+                action: () => this._deleteConfirm(scene),
+                warning: scene.attributes.id,
+                disabled: !scene.attributes.id,
+              },
+            ]}
+          >
+          </ha-icon-overflow-menu>
+        `,
       };
 
       return columns;
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 4a93bb65e7..ffb3b25c42 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -324,43 +324,42 @@ export class HaSceneEditor extends SubscribeMixin(
                   </div>
 
                   ${devices.map(
-                    (device) =>
-                      html`
-                        <ha-card outlined>
-                          <h1 class="card-header">
-                            ${device.name}
-                            <ha-icon-button
-                              .path=${mdiDelete}
-                              .label=${this.hass.localize(
-                                "ui.panel.config.scene.editor.devices.delete"
-                              )}
-                              .device=${device.id}
-                              @click=${this._deleteDevice}
-                            ></ha-icon-button>
-                          </h1>
-                          ${device.entities.map((entityId) => {
-                            const entityStateObj = this.hass.states[entityId];
-                            if (!entityStateObj) {
-                              return nothing;
-                            }
-                            return html`
-                              <paper-icon-item
-                                .entityId=${entityId}
-                                @click=${this._showMoreInfo}
-                                class="device-entity"
-                              >
-                                <state-badge
-                                  .stateObj=${entityStateObj}
-                                  slot="item-icon"
-                                ></state-badge>
-                                <paper-item-body>
-                                  ${computeStateName(entityStateObj)}
-                                </paper-item-body>
-                              </paper-icon-item>
-                            `;
-                          })}
-                        </ha-card>
-                      `
+                    (device) => html`
+                      <ha-card outlined>
+                        <h1 class="card-header">
+                          ${device.name}
+                          <ha-icon-button
+                            .path=${mdiDelete}
+                            .label=${this.hass.localize(
+                              "ui.panel.config.scene.editor.devices.delete"
+                            )}
+                            .device=${device.id}
+                            @click=${this._deleteDevice}
+                          ></ha-icon-button>
+                        </h1>
+                        ${device.entities.map((entityId) => {
+                          const entityStateObj = this.hass.states[entityId];
+                          if (!entityStateObj) {
+                            return nothing;
+                          }
+                          return html`
+                            <paper-icon-item
+                              .entityId=${entityId}
+                              @click=${this._showMoreInfo}
+                              class="device-entity"
+                            >
+                              <state-badge
+                                .stateObj=${entityStateObj}
+                                slot="item-icon"
+                              ></state-badge>
+                              <paper-item-body>
+                                ${computeStateName(entityStateObj)}
+                              </paper-item-body>
+                            </paper-icon-item>
+                          `;
+                        })}
+                      </ha-card>
+                    `
                   )}
 
                   <ha-card
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index 7433bb98e5..5efba11854 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -165,53 +165,50 @@ class HaScriptPicker extends LitElement {
       title: "",
       width: this.narrow ? undefined : "10%",
       type: "overflow-menu",
-      template: (_: string, script: any) =>
-        html`
-          <ha-icon-overflow-menu
-            .hass=${this.hass}
-            narrow
-            .items=${[
-              {
-                path: mdiInformationOutline,
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.show_info"
-                ),
-                action: () => this._showInfo(script),
-              },
-              {
-                path: mdiPlay,
-                label: this.hass.localize("ui.panel.config.script.picker.run"),
-                action: () => this._runScript(script),
-              },
-              {
-                path: mdiTransitConnection,
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.show_trace"
-                ),
-                action: () => this._showTrace(script),
-              },
-              {
-                divider: true,
-              },
-              {
-                path: mdiContentDuplicate,
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.duplicate"
-                ),
-                action: () => this._duplicate(script),
-              },
-              {
-                label: this.hass.localize(
-                  "ui.panel.config.script.picker.delete"
-                ),
-                path: mdiDelete,
-                action: () => this._deleteConfirm(script),
-                warning: true,
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
-        `,
+      template: (_: string, script: any) => html`
+        <ha-icon-overflow-menu
+          .hass=${this.hass}
+          narrow
+          .items=${[
+            {
+              path: mdiInformationOutline,
+              label: this.hass.localize(
+                "ui.panel.config.script.picker.show_info"
+              ),
+              action: () => this._showInfo(script),
+            },
+            {
+              path: mdiPlay,
+              label: this.hass.localize("ui.panel.config.script.picker.run"),
+              action: () => this._runScript(script),
+            },
+            {
+              path: mdiTransitConnection,
+              label: this.hass.localize(
+                "ui.panel.config.script.picker.show_trace"
+              ),
+              action: () => this._showTrace(script),
+            },
+            {
+              divider: true,
+            },
+            {
+              path: mdiContentDuplicate,
+              label: this.hass.localize(
+                "ui.panel.config.script.picker.duplicate"
+              ),
+              action: () => this._duplicate(script),
+            },
+            {
+              label: this.hass.localize("ui.panel.config.script.picker.delete"),
+              path: mdiDelete,
+              action: () => this._deleteConfirm(script),
+              warning: true,
+            },
+          ]}
+        >
+        </ha-icon-overflow-menu>
+      `,
     };
 
     return columns;
diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index e566aff75d..61a61c8af7 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -70,18 +70,19 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           sortable: true,
           filterable: true,
           grows: true,
-          template: (name, tag: any) => html`${name}
-          ${narrow
-            ? html`<div class="secondary">
-                ${tag.last_scanned_datetime
-                  ? html`<ha-relative-time
-                      .hass=${this.hass}
-                      .datetime=${tag.last_scanned_datetime}
-                      capitalize
-                    ></ha-relative-time>`
-                  : this.hass.localize("ui.panel.config.tag.never_scanned")}
-              </div>`
-            : ""}`,
+          template: (name, tag: any) =>
+            html`${name}
+            ${narrow
+              ? html`<div class="secondary">
+                  ${tag.last_scanned_datetime
+                    ? html`<ha-relative-time
+                        .hass=${this.hass}
+                        .datetime=${tag.last_scanned_datetime}
+                        capitalize
+                      ></ha-relative-time>`
+                    : this.hass.localize("ui.panel.config.tag.never_scanned")}
+                </div>`
+              : ""}`,
         },
       };
       if (!narrow) {
@@ -106,33 +107,38 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           title: "",
           label: this.hass.localize("ui.panel.config.tag.headers.write"),
           type: "icon-button",
-          template: (_write, tag: any) => html` <ha-icon-button
-            .tag=${tag}
-            @click=${this._handleWriteClick}
-            .label=${this.hass.localize("ui.panel.config.tag.write")}
-            .path=${mdiContentDuplicate}
-          ></ha-icon-button>`,
+          template: (_write, tag: any) =>
+            html` <ha-icon-button
+              .tag=${tag}
+              @click=${this._handleWriteClick}
+              .label=${this.hass.localize("ui.panel.config.tag.write")}
+              .path=${mdiContentDuplicate}
+            ></ha-icon-button>`,
         };
       }
       columns.automation = {
         title: "",
         type: "icon-button",
-        template: (_automation, tag: any) => html` <ha-icon-button
-          .tag=${tag}
-          @click=${this._handleAutomationClick}
-          .label=${this.hass.localize("ui.panel.config.tag.create_automation")}
-          .path=${mdiRobot}
-        ></ha-icon-button>`,
+        template: (_automation, tag: any) =>
+          html` <ha-icon-button
+            .tag=${tag}
+            @click=${this._handleAutomationClick}
+            .label=${this.hass.localize(
+              "ui.panel.config.tag.create_automation"
+            )}
+            .path=${mdiRobot}
+          ></ha-icon-button>`,
       };
       columns.edit = {
         title: "",
         type: "icon-button",
-        template: (_settings, tag: any) => html` <ha-icon-button
-          .tag=${tag}
-          @click=${this._handleEditClick}
-          .label=${this.hass.localize("ui.panel.config.tag.edit")}
-          .path=${mdiCog}
-        ></ha-icon-button>`,
+        template: (_settings, tag: any) =>
+          html` <ha-icon-button
+            .tag=${tag}
+            @click=${this._handleEditClick}
+            .label=${this.hass.localize("ui.panel.config.tag.edit")}
+            .path=${mdiCog}
+          ></ha-icon-button>`,
       };
       return columns;
     }
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 54c949f7d7..a125ef8b81 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -77,8 +77,9 @@ export class HaConfigUsers extends LitElement {
           width: "20%",
           direction: "asc",
           hidden: narrow,
-          template: (groupIds: User["group_ids"]) =>
-            html` ${localize(`groups.${groupIds[0]}`)} `,
+          template: (groupIds: User["group_ids"]) => html`
+            ${localize(`groups.${groupIds[0]}`)}
+          `,
         },
         is_active: {
           title: this.hass.localize(
diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
index f30d5cf5d7..14da1d1e7d 100644
--- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
+++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
@@ -101,13 +101,12 @@ const renderProgress = (
 
 const renderData = (data: Record<string, any>, keys: Record<string, string>) =>
   Object.entries(keys).map(
-    ([key, label]) =>
-      html`
-        <div class="row">
-          <div>${label}</div>
-          <div>${data[key]}</div>
-        </div>
-      `
+    ([key, label]) => html`
+      <div class="row">
+        <div>${label}</div>
+        <div>${data[key]}</div>
+      </div>
+    `
   );
 
 const dataMinusKeysRender = (
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
index 98363e9bed..e6f171f367 100644
--- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
@@ -150,11 +150,10 @@ export class VoiceAssistantsExpose extends LitElement {
         filterable: true,
         direction: "asc",
         grows: true,
-        template: (name, entry) =>
-          html`
-            ${name}<br />
-            <div class="secondary">${entry.entity_id}</div>
-          `,
+        template: (name, entry) => html`
+          ${name}<br />
+          <div class="secondary">${entry.entity_id}</div>
+        `,
       },
       area: {
         title: this.hass.localize(
diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index d1d7afc0aa..d6fc035474 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -70,25 +70,24 @@ class EventSubscribeCard extends LitElement {
           ${repeat(
             this._events,
             (event) => event.id,
-            (event) =>
-              html`
-                <div class="event">
-                  ${this.hass!.localize(
-                    "ui.panel.developer-tools.tabs.events.event_fired",
-                    "name",
-                    event.id
-                  )}
-                  ${formatTime(
-                    new Date(event.event.time_fired),
-                    this.hass!.locale,
-                    this.hass!.config
-                  )}:
-                  <ha-yaml-editor
-                    .defaultValue=${event.event}
-                    readOnly
-                  ></ha-yaml-editor>
-                </div>
-              `
+            (event) => html`
+              <div class="event">
+                ${this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.event_fired",
+                  "name",
+                  event.id
+                )}
+                ${formatTime(
+                  new Date(event.event.time_fired),
+                  this.hass!.locale,
+                  this.hass!.config
+                )}:
+                <ha-yaml-editor
+                  .defaultValue=${event.event}
+                  readOnly
+                ></ha-yaml-editor>
+              </div>
+            `
           )}
         </div>
       </ha-card>
diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index 66da2d5f0e..d0600df766 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -66,8 +66,8 @@ class HaPanelDevService extends LitElement {
         data: {},
       };
       if (this._yamlMode) {
-        this.updateComplete.then(() =>
-          this._yamlEditor?.setValue(this._serviceData)
+        this.updateComplete.then(
+          () => this._yamlEditor?.setValue(this._serviceData)
         );
       }
     } else if (!this._serviceData?.service) {
@@ -79,8 +79,8 @@ class HaPanelDevService extends LitElement {
         data: {},
       };
       if (this._yamlMode) {
-        this.updateComplete.then(() =>
-          this._yamlEditor?.setValue(this._serviceData)
+        this.updateComplete.then(
+          () => this._yamlEditor?.setValue(this._serviceData)
         );
       }
     }
@@ -248,11 +248,12 @@ class HaPanelDevService extends LitElement {
                   ? fields
                   : this._filterSelectorFields(fields)
                 ).map(
-                  (field) => html` <tr>
-                    <td><pre>${field.key}</pre></td>
-                    <td>${field.description}</td>
-                    <td>${field.example}</td>
-                  </tr>`
+                  (field) =>
+                    html` <tr>
+                      <td><pre>${field.key}</pre></td>
+                      <td>${field.description}</td>
+                      <td>${field.example}</td>
+                    </tr>`
                 )}
               </table>
               ${this._yamlMode
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index fe0a0c158c..c7618b38d5 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -202,30 +202,28 @@ class HaPanelDevTemplate extends LitElement {
                   ${this._templateResult.listeners.domains
                     .sort()
                     .map(
-                      (domain) =>
-                        html`
-                          <li>
-                            <b
-                              >${this.hass.localize(
-                                "ui.panel.developer-tools.tabs.templates.domain"
-                              )}</b
-                            >: ${domain}
-                          </li>
-                        `
+                      (domain) => html`
+                        <li>
+                          <b
+                            >${this.hass.localize(
+                              "ui.panel.developer-tools.tabs.templates.domain"
+                            )}</b
+                          >: ${domain}
+                        </li>
+                      `
                     )}
                   ${this._templateResult.listeners.entities
                     .sort()
                     .map(
-                      (entity_id) =>
-                        html`
-                          <li>
-                            <b
-                              >${this.hass.localize(
-                                "ui.panel.developer-tools.tabs.templates.entity"
-                              )}</b
-                            >: ${entity_id}
-                          </li>
-                        `
+                      (entity_id) => html`
+                        <li>
+                          <b
+                            >${this.hass.localize(
+                              "ui.panel.developer-tools.tabs.templates.entity"
+                            )}</b
+                          >: ${entity_id}
+                        </li>
+                      `
                     )}
                 </ul>
               `
diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
index 8b67a7e7a5..50bc2e2d60 100644
--- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
+++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
@@ -142,24 +142,23 @@ export class DeveloperYamlConfig extends LitElement {
             </ha-call-service-button>
           </div>
           ${this._reloadableDomains.map(
-            (domain) =>
-              html`
-                <div class="card-actions">
-                  <ha-call-service-button
-                    .hass=${this.hass}
-                    .domain=${domain}
-                    service="reload"
-                    >${this.hass.localize(
-                      `ui.panel.developer-tools.tabs.yaml.section.reloading.${domain}`
-                    ) ||
-                    this.hass.localize(
-                      "ui.panel.developer-tools.tabs.yaml.section.reloading.reload",
-                      "domain",
-                      domainToName(this.hass.localize, domain)
-                    )}
-                  </ha-call-service-button>
-                </div>
-              `
+            (domain) => html`
+              <div class="card-actions">
+                <ha-call-service-button
+                  .hass=${this.hass}
+                  .domain=${domain}
+                  service="reload"
+                  >${this.hass.localize(
+                    `ui.panel.developer-tools.tabs.yaml.section.reloading.${domain}`
+                  ) ||
+                  this.hass.localize(
+                    "ui.panel.developer-tools.tabs.yaml.section.reloading.reload",
+                    "domain",
+                    domainToName(this.hass.localize, domain)
+                  )}
+                </ha-call-service-button>
+              </div>
+            `
           )}
         </ha-card>
       </div>
diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
index 378f6e7a5f..e621bdea72 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@@ -446,8 +446,8 @@ class HuiEnergyDistrubutionCard
                             cy="40"
                             r="38"
                             stroke-dasharray="${homeSolarCircumference} ${
-                            CIRCLE_CIRCUMFERENCE - homeSolarCircumference
-                          }"
+                              CIRCLE_CIRCUMFERENCE - homeSolarCircumference
+                            }"
                             shape-rendering="geometricPrecision"
                             stroke-dashoffset="-${
                               CIRCLE_CIRCUMFERENCE - homeSolarCircumference
@@ -461,8 +461,8 @@ class HuiEnergyDistrubutionCard
                             cy="40"
                             r="38"
                             stroke-dasharray="${homeBatteryCircumference} ${
-                            CIRCLE_CIRCUMFERENCE - homeBatteryCircumference
-                          }"
+                              CIRCLE_CIRCUMFERENCE - homeBatteryCircumference
+                            }"
                             stroke-dashoffset="-${
                               CIRCLE_CIRCUMFERENCE -
                               homeBatteryCircumference -
@@ -478,8 +478,8 @@ class HuiEnergyDistrubutionCard
                             cy="40"
                             r="38"
                             stroke-dasharray="${homeLowCarbonCircumference} ${
-                            CIRCLE_CIRCUMFERENCE - homeLowCarbonCircumference
-                          }"
+                              CIRCLE_CIRCUMFERENCE - homeLowCarbonCircumference
+                            }"
                             stroke-dashoffset="-${
                               CIRCLE_CIRCUMFERENCE -
                               homeLowCarbonCircumference -
@@ -611,8 +611,8 @@ class HuiEnergyDistrubutionCard
                     id="return"
                     class="return"
                     d="M${hasBattery ? 45 : 47},0 v15 c0,${
-                    hasBattery ? "35 -10,30 -30,30" : "40 -10,35 -30,35"
-                  } h-20"
+                      hasBattery ? "35 -10,30 -30,30" : "40 -10,35 -30,35"
+                    } h-20"
                     vector-effect="non-scaling-stroke"
                   ></path> `
                 : ""}
@@ -621,8 +621,8 @@ class HuiEnergyDistrubutionCard
                     id="solar"
                     class="solar"
                     d="M${hasBattery ? 55 : 53},0 v15 c0,${
-                    hasBattery ? "35 10,30 30,30" : "40 10,35 30,35"
-                  } h20"
+                      hasBattery ? "35 10,30 30,30" : "40 10,35 30,35"
+                    } h20"
                     vector-effect="non-scaling-stroke"
                   ></path>`
                 : ""}
@@ -1024,7 +1024,9 @@ class HuiEnergyDistrubutionCard
     }
     .circle svg circle {
       animation: rotate-in 0.6s ease-in;
-      transition: stroke-dashoffset 0.4s, stroke-dasharray 0.4s;
+      transition:
+        stroke-dashoffset 0.4s,
+        stroke-dasharray 0.4s;
       fill: none;
     }
     @keyframes rotate-in {
diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
index a6570a4485..734a4067ae 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
@@ -452,217 +452,220 @@ export class HuiEnergySourcesTableCard
                   </tr>`
                 : ""}
               ${types.grid?.map(
-                (source) => html`${source.flow_from.map((flow, idx) => {
-                  const energy =
-                    calculateStatisticSumGrowth(
-                      this._data!.stats[flow.stat_energy_from]
-                    ) || 0;
-                  totalGrid += energy;
-
-                  const compareEnergy =
-                    (compare &&
+                (source) =>
+                  html`${source.flow_from.map((flow, idx) => {
+                    const energy =
                       calculateStatisticSumGrowth(
-                        this._data!.statsCompare[flow.stat_energy_from]
-                      )) ||
-                    0;
-                  totalGridCompare += compareEnergy;
+                        this._data!.stats[flow.stat_energy_from]
+                      ) || 0;
+                    totalGrid += energy;
 
-                  const cost_stat =
-                    flow.stat_cost ||
-                    this._data!.info.cost_sensors[flow.stat_energy_from];
-                  const cost = cost_stat
-                    ? calculateStatisticSumGrowth(
-                        this._data!.stats[cost_stat]
-                      ) || 0
-                    : null;
-                  if (cost !== null) {
-                    totalGridCost += cost;
-                  }
+                    const compareEnergy =
+                      (compare &&
+                        calculateStatisticSumGrowth(
+                          this._data!.statsCompare[flow.stat_energy_from]
+                        )) ||
+                      0;
+                    totalGridCompare += compareEnergy;
 
-                  const costCompare =
-                    compare && cost_stat
+                    const cost_stat =
+                      flow.stat_cost ||
+                      this._data!.info.cost_sensors[flow.stat_energy_from];
+                    const cost = cost_stat
                       ? calculateStatisticSumGrowth(
-                          this._data!.statsCompare[cost_stat]
+                          this._data!.stats[cost_stat]
                         ) || 0
                       : null;
-                  if (costCompare !== null) {
-                    totalGridCostCompare += costCompare;
-                  }
+                    if (cost !== null) {
+                      totalGridCost += cost;
+                    }
 
-                  const modifiedColor =
-                    idx > 0
-                      ? this.hass.themes.darkMode
-                        ? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
-                        : labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
-                      : undefined;
-                  const color = modifiedColor
-                    ? rgb2hex(lab2rgb(modifiedColor))
-                    : consumptionColor;
+                    const costCompare =
+                      compare && cost_stat
+                        ? calculateStatisticSumGrowth(
+                            this._data!.statsCompare[cost_stat]
+                          ) || 0
+                        : null;
+                    if (costCompare !== null) {
+                      totalGridCostCompare += costCompare;
+                    }
 
-                  return html`<tr class="mdc-data-table__row">
-                    <td class="mdc-data-table__cell cell-bullet">
-                      <div
-                        class="bullet"
-                        style=${styleMap({
-                          borderColor: color,
-                          backgroundColor: color + "7F",
-                        })}
-                      ></div>
-                    </td>
-                    <th class="mdc-data-table__cell" scope="row">
-                      ${getStatisticLabel(
-                        this.hass,
-                        flow.stat_energy_from,
-                        this._data?.statsMetadata[flow.stat_energy_from]
-                      )}
-                    </th>
-                    ${compare
-                      ? html`<td
+                    const modifiedColor =
+                      idx > 0
+                        ? this.hass.themes.darkMode
+                          ? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
+                          : labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
+                        : undefined;
+                    const color = modifiedColor
+                      ? rgb2hex(lab2rgb(modifiedColor))
+                      : consumptionColor;
+
+                    return html`<tr class="mdc-data-table__row">
+                      <td class="mdc-data-table__cell cell-bullet">
+                        <div
+                          class="bullet"
+                          style=${styleMap({
+                            borderColor: color,
+                            backgroundColor: color + "7F",
+                          })}
+                        ></div>
+                      </td>
+                      <th class="mdc-data-table__cell" scope="row">
+                        ${getStatisticLabel(
+                          this.hass,
+                          flow.stat_energy_from,
+                          this._data?.statsMetadata[flow.stat_energy_from]
+                        )}
+                      </th>
+                      ${compare
+                        ? html`<td
+                              class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                            >
+                              ${formatNumber(compareEnergy, this.hass.locale)}
+                              kWh
+                            </td>
+                            ${showCosts
+                              ? html`<td
+                                  class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                                >
+                                  ${costCompare !== null
+                                    ? formatNumber(
+                                        costCompare,
+                                        this.hass.locale,
+                                        {
+                                          style: "currency",
+                                          currency: this.hass.config.currency!,
+                                        }
+                                      )
+                                    : ""}
+                                </td>`
+                              : ""}`
+                        : ""}
+                      <td
+                        class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                      >
+                        ${formatNumber(energy, this.hass.locale)} kWh
+                      </td>
+                      ${showCosts
+                        ? html` <td
                             class="mdc-data-table__cell mdc-data-table__cell--numeric"
                           >
-                            ${formatNumber(compareEnergy, this.hass.locale)} kWh
-                          </td>
-                          ${showCosts
-                            ? html`<td
-                                class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                              >
-                                ${costCompare !== null
-                                  ? formatNumber(
-                                      costCompare,
-                                      this.hass.locale,
-                                      {
-                                        style: "currency",
-                                        currency: this.hass.config.currency!,
-                                      }
-                                    )
-                                  : ""}
-                              </td>`
-                            : ""}`
-                      : ""}
-                    <td
-                      class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                    >
-                      ${formatNumber(energy, this.hass.locale)} kWh
-                    </td>
-                    ${showCosts
-                      ? html` <td
-                          class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                        >
-                          ${cost !== null
-                            ? formatNumber(cost, this.hass.locale, {
-                                style: "currency",
-                                currency: this.hass.config.currency!,
-                              })
-                            : ""}
-                        </td>`
-                      : ""}
-                  </tr>`;
-                })}
-                ${source.flow_to.map((flow, idx) => {
-                  const energy =
-                    (calculateStatisticSumGrowth(
-                      this._data!.stats[flow.stat_energy_to]
-                    ) || 0) * -1;
-                  totalGrid += energy;
-                  const cost_stat =
-                    flow.stat_compensation ||
-                    this._data!.info.cost_sensors[flow.stat_energy_to];
-                  const cost = cost_stat
-                    ? (calculateStatisticSumGrowth(
-                        this._data!.stats[cost_stat]
-                      ) || 0) * -1
-                    : null;
-                  if (cost !== null) {
-                    totalGridCost += cost;
-                  }
-
-                  const energyCompare =
-                    ((compare &&
-                      calculateStatisticSumGrowth(
-                        this._data!.statsCompare[flow.stat_energy_to]
-                      )) ||
-                      0) * -1;
-                  totalGridCompare += energyCompare;
-
-                  const costCompare =
-                    compare && cost_stat
+                            ${cost !== null
+                              ? formatNumber(cost, this.hass.locale, {
+                                  style: "currency",
+                                  currency: this.hass.config.currency!,
+                                })
+                              : ""}
+                          </td>`
+                        : ""}
+                    </tr>`;
+                  })}
+                  ${source.flow_to.map((flow, idx) => {
+                    const energy =
+                      (calculateStatisticSumGrowth(
+                        this._data!.stats[flow.stat_energy_to]
+                      ) || 0) * -1;
+                    totalGrid += energy;
+                    const cost_stat =
+                      flow.stat_compensation ||
+                      this._data!.info.cost_sensors[flow.stat_energy_to];
+                    const cost = cost_stat
                       ? (calculateStatisticSumGrowth(
-                          this._data!.statsCompare[cost_stat]
+                          this._data!.stats[cost_stat]
                         ) || 0) * -1
                       : null;
-                  if (costCompare !== null) {
-                    totalGridCostCompare += costCompare;
-                  }
+                    if (cost !== null) {
+                      totalGridCost += cost;
+                    }
 
-                  const modifiedColor =
-                    idx > 0
-                      ? this.hass.themes.darkMode
-                        ? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
-                        : labDarken(rgb2lab(hex2rgb(returnColor)), idx)
-                      : undefined;
-                  const color = modifiedColor
-                    ? rgb2hex(lab2rgb(modifiedColor))
-                    : returnColor;
+                    const energyCompare =
+                      ((compare &&
+                        calculateStatisticSumGrowth(
+                          this._data!.statsCompare[flow.stat_energy_to]
+                        )) ||
+                        0) * -1;
+                    totalGridCompare += energyCompare;
 
-                  return html`<tr class="mdc-data-table__row">
-                    <td class="mdc-data-table__cell cell-bullet">
-                      <div
-                        class="bullet"
-                        style=${styleMap({
-                          borderColor: color,
-                          backgroundColor: color + "7F",
-                        })}
-                      ></div>
-                    </td>
-                    <th class="mdc-data-table__cell" scope="row">
-                      ${getStatisticLabel(
-                        this.hass,
-                        flow.stat_energy_to,
-                        this._data?.statsMetadata[flow.stat_energy_to]
-                      )}
-                    </th>
-                    ${compare
-                      ? html`<td
+                    const costCompare =
+                      compare && cost_stat
+                        ? (calculateStatisticSumGrowth(
+                            this._data!.statsCompare[cost_stat]
+                          ) || 0) * -1
+                        : null;
+                    if (costCompare !== null) {
+                      totalGridCostCompare += costCompare;
+                    }
+
+                    const modifiedColor =
+                      idx > 0
+                        ? this.hass.themes.darkMode
+                          ? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
+                          : labDarken(rgb2lab(hex2rgb(returnColor)), idx)
+                        : undefined;
+                    const color = modifiedColor
+                      ? rgb2hex(lab2rgb(modifiedColor))
+                      : returnColor;
+
+                    return html`<tr class="mdc-data-table__row">
+                      <td class="mdc-data-table__cell cell-bullet">
+                        <div
+                          class="bullet"
+                          style=${styleMap({
+                            borderColor: color,
+                            backgroundColor: color + "7F",
+                          })}
+                        ></div>
+                      </td>
+                      <th class="mdc-data-table__cell" scope="row">
+                        ${getStatisticLabel(
+                          this.hass,
+                          flow.stat_energy_to,
+                          this._data?.statsMetadata[flow.stat_energy_to]
+                        )}
+                      </th>
+                      ${compare
+                        ? html`<td
+                              class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                            >
+                              ${formatNumber(energyCompare, this.hass.locale)}
+                              kWh
+                            </td>
+                            ${showCosts
+                              ? html`<td
+                                  class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                                >
+                                  ${costCompare !== null
+                                    ? formatNumber(
+                                        costCompare,
+                                        this.hass.locale,
+                                        {
+                                          style: "currency",
+                                          currency: this.hass.config.currency!,
+                                        }
+                                      )
+                                    : ""}
+                                </td>`
+                              : ""}`
+                        : ""}
+                      <td
+                        class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                      >
+                        ${formatNumber(energy, this.hass.locale)} kWh
+                      </td>
+                      ${showCosts
+                        ? html` <td
                             class="mdc-data-table__cell mdc-data-table__cell--numeric"
                           >
-                            ${formatNumber(energyCompare, this.hass.locale)} kWh
-                          </td>
-                          ${showCosts
-                            ? html`<td
-                                class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                              >
-                                ${costCompare !== null
-                                  ? formatNumber(
-                                      costCompare,
-                                      this.hass.locale,
-                                      {
-                                        style: "currency",
-                                        currency: this.hass.config.currency!,
-                                      }
-                                    )
-                                  : ""}
-                              </td>`
-                            : ""}`
-                      : ""}
-                    <td
-                      class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                    >
-                      ${formatNumber(energy, this.hass.locale)} kWh
-                    </td>
-                    ${showCosts
-                      ? html` <td
-                          class="mdc-data-table__cell mdc-data-table__cell--numeric"
-                        >
-                          ${cost !== null
-                            ? formatNumber(cost, this.hass.locale, {
-                                style: "currency",
-                                currency: this.hass.config.currency!,
-                              })
-                            : ""}
-                        </td>`
-                      : ""}
-                  </tr>`;
-                })}`
+                            ${cost !== null
+                              ? formatNumber(cost, this.hass.locale, {
+                                  style: "currency",
+                                  currency: this.hass.config.currency!,
+                                })
+                              : ""}
+                          </td>`
+                        : ""}
+                    </tr>`;
+                  })}`
               )}
               ${types.grid
                 ? html` <tr class="mdc-data-table__row total">
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index aa8074d220..fcd449cdf0 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -609,7 +609,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         right: 0;
 
         opacity: 1;
-        transition: width 0.8s, opacity 0.8s linear 0.8s;
+        transition:
+          width 0.8s,
+          opacity 0.8s linear 0.8s;
       }
 
       .image {
@@ -621,8 +623,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         right: 0;
         height: 100%;
         opacity: 1;
-        transition: width 0.8s, background-image 0.8s, background-color 0.8s,
-          background-size 0.8s, opacity 0.8s linear 0.8s;
+        transition:
+          width 0.8s,
+          background-image 0.8s,
+          background-color 0.8s,
+          background-size 0.8s,
+          opacity 0.8s linear 0.8s;
       }
 
       .no-image .image {
@@ -640,13 +646,17 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         height: 100%;
         background-image: url("/static/images/card_media_player_bg.png");
         width: 50%;
-        transition: opacity 0.8s, background-color 0.8s;
+        transition:
+          opacity 0.8s,
+          background-color 0.8s;
       }
 
       .off .image,
       .off .color-gradient {
         opacity: 0;
-        transition: opacity 0s, width 0.8s;
+        transition:
+          opacity 0s,
+          width 0.8s;
         width: 0;
       }
 
diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 0a6b08d6d3..1b7dc10a56 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -147,10 +147,12 @@ class HuiShoppingListCard
         ${this._reordering
           ? html`
               <div id="sortable">
-                ${guard([this._uncheckedItems, this._renderEmptySortable], () =>
-                  this._renderEmptySortable
-                    ? ""
-                    : this._renderItems(this._uncheckedItems!)
+                ${guard(
+                  [this._uncheckedItems, this._renderEmptySortable],
+                  () =>
+                    this._renderEmptySortable
+                      ? ""
+                      : this._renderItems(this._uncheckedItems!)
                 )}
               </div>
             `
@@ -178,23 +180,22 @@ class HuiShoppingListCard
               ${repeat(
                 this._checkedItems!,
                 (item) => item.id,
-                (item) =>
-                  html`
-                    <div class="editRow">
-                      <ha-checkbox
-                        tabindex="0"
-                        .checked=${item.complete}
-                        .itemId=${item.id}
-                        @change=${this._completeItem}
-                      ></ha-checkbox>
-                      <ha-textfield
-                        class="item"
-                        .value=${item.name}
-                        .itemId=${item.id}
-                        @change=${this._saveEdit}
-                      ></ha-textfield>
-                    </div>
-                  `
+                (item) => html`
+                  <div class="editRow">
+                    <ha-checkbox
+                      tabindex="0"
+                      .checked=${item.complete}
+                      .itemId=${item.id}
+                      @change=${this._completeItem}
+                    ></ha-checkbox>
+                    <ha-textfield
+                      class="item"
+                      .value=${item.name}
+                      .itemId=${item.id}
+                      @change=${this._saveEdit}
+                    ></ha-textfield>
+                  </div>
+                `
               )}
             `
           : ""}
@@ -207,35 +208,34 @@ class HuiShoppingListCard
       ${repeat(
         items,
         (item) => item.id,
-        (item) =>
-          html`
-            <div class="editRow" item-id=${item.id}>
-              <ha-checkbox
-                tabindex="0"
-                .checked=${item.complete}
-                .itemId=${item.id}
-                @change=${this._completeItem}
-              ></ha-checkbox>
-              <ha-textfield
-                class="item"
-                .value=${item.name}
-                .itemId=${item.id}
-                @change=${this._saveEdit}
-              ></ha-textfield>
-              ${this._reordering
-                ? html`
-                    <ha-svg-icon
-                      .title=${this.hass!.localize(
-                        "ui.panel.lovelace.cards.shopping-list.drag_and_drop"
-                      )}
-                      class="reorderButton"
-                      .path=${mdiDrag}
-                    >
-                    </ha-svg-icon>
-                  `
-                : ""}
-            </div>
-          `
+        (item) => html`
+          <div class="editRow" item-id=${item.id}>
+            <ha-checkbox
+              tabindex="0"
+              .checked=${item.complete}
+              .itemId=${item.id}
+              @change=${this._completeItem}
+            ></ha-checkbox>
+            <ha-textfield
+              class="item"
+              .value=${item.name}
+              .itemId=${item.id}
+              @change=${this._saveEdit}
+            ></ha-textfield>
+            ${this._reordering
+              ? html`
+                  <ha-svg-icon
+                    .title=${this.hass!.localize(
+                      "ui.panel.lovelace.cards.shopping-list.drag_and_drop"
+                    )}
+                    class="reorderButton"
+                    .path=${mdiDrag}
+                  >
+                  </ha-svg-icon>
+                `
+              : ""}
+          </div>
+        `
       )}
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 3471b6348b..f9b10c65a9 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -453,7 +453,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         height: 100%;
         z-index: 0;
         overflow: hidden;
-        transition: box-shadow 180ms ease-in-out, border-color 180ms ease-in-out;
+        transition:
+          box-shadow 180ms ease-in-out,
+          border-color 180ms ease-in-out;
       }
       ha-card.active {
         --tile-color: var(--state-icon-color);
diff --git a/src/panels/lovelace/common/process-config-entities.ts b/src/panels/lovelace/common/process-config-entities.ts
index 1d4519ea5f..49ce41ad27 100644
--- a/src/panels/lovelace/common/process-config-entities.ts
+++ b/src/panels/lovelace/common/process-config-entities.ts
@@ -3,7 +3,7 @@ import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 
 export const processConfigEntities = <
-  T extends EntityConfig | LovelaceRowConfig
+  T extends EntityConfig | LovelaceRowConfig,
 >(
   entities: Array<T | string>,
   checkEntityId = true
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index 9cd6666cd3..dd923698ff 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -343,7 +343,9 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         opacity: 0;
         pointer-events: none;
         content: "";
-        transition: opacity 15ms linear, background-color 15ms linear;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
         opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
       }
       ha-icon-button.active::before {
diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts
index 792b8fd2e3..a92d49ba8b 100644
--- a/src/panels/lovelace/create-element/create-element-base.ts
+++ b/src/panels/lovelace/create-element/create-element-base.ts
@@ -185,7 +185,7 @@ export const createLovelaceElement = <T extends keyof CreateElementConfigTypes>(
 };
 
 export const tryCreateLovelaceElement = <
-  T extends keyof CreateElementConfigTypes
+  T extends keyof CreateElementConfigTypes,
 >(
   tagSuffix: T,
   config: CreateElementConfigTypes[T]["config"],
@@ -246,7 +246,7 @@ export const tryCreateLovelaceElement = <
 };
 
 export const getLovelaceElementClass = async <
-  T extends keyof CreateElementConfigTypes
+  T extends keyof CreateElementConfigTypes,
 >(
   type: string,
   tagSuffix: T,
diff --git a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts
index 8cb52183c5..3ed3b6d8af 100644
--- a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts
@@ -246,10 +246,11 @@ export class HuiStatisticsGraphCardEditor
     );
     const configured_stat_types = this._config!.stat_types
       ? ensureArray(this._config.stat_types)
-      : stat_types.filter((stat_type) =>
-          this._metaDatas?.some((metaData) =>
-            statisticsMetaHasType(metaData, stat_type)
-          )
+      : stat_types.filter(
+          (stat_type) =>
+            this._metaDatas?.some((metaData) =>
+              statisticsMetaHasType(metaData, stat_type)
+            )
         );
     const data = {
       chart_type: "line",
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index d1b5423e5e..092dd02134 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -56,26 +56,25 @@ export class HuiCreateDialogHeaderFooter
       >
         <div class="elements">
           ${headerFooterElements.map(
-            (headerFooter, index) =>
-              html`
-                <ha-card
-                  role="button"
-                  tabindex="0"
-                  aria-labelledby=${"card-name-" + index}
-                  outlined
-                  .type=${headerFooter.type}
-                  @click=${this._handleHeaderFooterPicked}
-                  @keyDown=${this._handleHeaderFooterPicked}
-                  dialogInitialFocus
-                >
-                  <ha-svg-icon .path=${headerFooter.icon}></ha-svg-icon>
-                  <div .id=${"card-name-" + index} role="none presentation">
-                    ${this.hass!.localize(
-                      `ui.panel.lovelace.editor.header-footer.types.${headerFooter.type}.name`
-                    )}
-                  </div>
-                </ha-card>
-              `
+            (headerFooter, index) => html`
+              <ha-card
+                role="button"
+                tabindex="0"
+                aria-labelledby=${"card-name-" + index}
+                outlined
+                .type=${headerFooter.type}
+                @click=${this._handleHeaderFooterPicked}
+                @keyDown=${this._handleHeaderFooterPicked}
+                dialogInitialFocus
+              >
+                <ha-svg-icon .path=${headerFooter.icon}></ha-svg-icon>
+                <div .id=${"card-name-" + index} role="none presentation">
+                  ${this.hass!.localize(
+                    `ui.panel.lovelace.editor.header-footer.types.${headerFooter.type}.name`
+                  )}
+                </div>
+              </ha-card>
+            `
           )}
         </div>
         <div slot="primaryAction">
diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
index 2d7d3c51e1..31b51927c1 100644
--- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
@@ -75,19 +75,18 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
         >
           ${stateObj.attributes.options
             ? stateObj.attributes.options.map(
-                (option) =>
-                  html`
-                    <mwc-list-item .value=${option}>
-                      ${computeStateDisplay(
-                        this.hass!.localize,
-                        stateObj,
-                        this.hass!.locale,
-                        this.hass!.config,
-                        this.hass!.entities,
-                        option
-                      )}
-                    </mwc-list-item>
-                  `
+                (option) => html`
+                  <mwc-list-item .value=${option}>
+                    ${computeStateDisplay(
+                      this.hass!.localize,
+                      stateObj,
+                      this.hass!.locale,
+                      this.hass!.config,
+                      this.hass!.entities,
+                      option
+                    )}
+                  </mwc-list-item>
+                `
               )
             : ""}
         </ha-select>
diff --git a/src/panels/lovelace/strategies/get-strategy.ts b/src/panels/lovelace/strategies/get-strategy.ts
index 4e13f6ef36..59ae47b141 100644
--- a/src/panels/lovelace/strategies/get-strategy.ts
+++ b/src/panels/lovelace/strategies/get-strategy.ts
@@ -32,7 +32,7 @@ const strategies: Record<
 };
 
 const getLovelaceStrategy = async <
-  T extends LovelaceDashboardStrategy | LovelaceViewStrategy
+  T extends LovelaceDashboardStrategy | LovelaceViewStrategy,
 >(
   strategyType: string
 ): Promise<T> => {
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.ts b/src/panels/profile/ha-long-lived-access-tokens-card.ts
index 5edcbfb34d..c622ad0d7e 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.ts
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.ts
@@ -61,23 +61,27 @@ class HaLongLivedTokens extends LitElement {
                 )}
               </p>`
             : accessTokens!.map(
-                (token) => html`<ha-settings-row two-line>
-                  <span slot="heading">${token.client_name}</span>
-                  <div slot="description">
-                    ${this.hass.localize(
-                      "ui.panel.profile.long_lived_access_tokens.created",
-                      "date",
-                      relativeTime(new Date(token.created_at), this.hass.locale)
-                    )}
-                  </div>
-                  <ha-icon-button
-                    .token=${token}
-                    .disabled=${token.is_current}
-                    .label=${this.hass.localize("ui.common.delete")}
-                    .path=${mdiDelete}
-                    @click=${this._deleteToken}
-                  ></ha-icon-button>
-                </ha-settings-row>`
+                (token) =>
+                  html`<ha-settings-row two-line>
+                    <span slot="heading">${token.client_name}</span>
+                    <div slot="description">
+                      ${this.hass.localize(
+                        "ui.panel.profile.long_lived_access_tokens.created",
+                        "date",
+                        relativeTime(
+                          new Date(token.created_at),
+                          this.hass.locale
+                        )
+                      )}
+                    </div>
+                    <ha-icon-button
+                      .token=${token}
+                      .disabled=${token.is_current}
+                      .label=${this.hass.localize("ui.common.delete")}
+                      .path=${mdiDelete}
+                      @click=${this._deleteToken}
+                    ></ha-icon-button>
+                  </ha-settings-row>`
               )}
         </div>
 
diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts
index c6fed2b149..ce3f94c0a2 100644
--- a/src/panels/profile/ha-mfa-modules-card.ts
+++ b/src/panels/profile/ha-mfa-modules-card.ts
@@ -17,21 +17,22 @@ class HaMfaModulesCard extends LitElement {
     return html`
       <ha-card .header=${this.hass.localize("ui.panel.profile.mfa.header")}>
         ${this.mfaModules.map(
-          (module) => html`<ha-settings-row two-line>
-            <span slot="heading">${module.name}</span>
-            <span slot="description">${module.id}</span>
-            ${module.enabled
-              ? html`<mwc-button .module=${module} @click=${this._disable}
-                  >${this.hass.localize(
-                    "ui.panel.profile.mfa.disable"
-                  )}</mwc-button
-                >`
-              : html`<mwc-button .module=${module} @click=${this._enable}
-                  >${this.hass.localize(
-                    "ui.panel.profile.mfa.enable"
-                  )}</mwc-button
-                >`}
-          </ha-settings-row>`
+          (module) =>
+            html`<ha-settings-row two-line>
+              <span slot="heading">${module.name}</span>
+              <span slot="description">${module.id}</span>
+              ${module.enabled
+                ? html`<mwc-button .module=${module} @click=${this._disable}
+                    >${this.hass.localize(
+                      "ui.panel.profile.mfa.disable"
+                    )}</mwc-button
+                  >`
+                : html`<mwc-button .module=${module} @click=${this._enable}
+                    >${this.hass.localize(
+                      "ui.panel.profile.mfa.enable"
+                    )}</mwc-button
+                  >`}
+            </ha-settings-row>`
         )}
       </ha-card>
     `;
diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts
index b271002a63..6217936dcb 100644
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -50,57 +50,61 @@ class HaRefreshTokens extends LitElement {
         ${this.hass.localize("ui.panel.profile.refresh_tokens.description")}
         ${refreshTokens?.length
           ? refreshTokens!.map(
-              (token) => html`<ha-settings-row three-line>
-                <span slot="heading"
-                  >${this.hass.localize(
-                    "ui.panel.profile.refresh_tokens.token_title",
-                    { clientId: token.client_id }
-                  )}
-                </span>
-                <div slot="description">
-                  ${this.hass.localize(
-                    "ui.panel.profile.refresh_tokens.created_at",
-                    {
-                      date: relativeTime(
-                        new Date(token.created_at),
-                        this.hass.locale
-                      ),
-                    }
-                  )}
-                </div>
-                <div slot="description">
-                  ${token.last_used_at
-                    ? this.hass.localize(
-                        "ui.panel.profile.refresh_tokens.last_used",
-                        {
-                          date: relativeTime(
-                            new Date(token.last_used_at),
-                            this.hass.locale
-                          ),
-                          location: token.last_used_ip,
-                        }
-                      )
-                    : this.hass.localize(
-                        "ui.panel.profile.refresh_tokens.not_used"
-                      )}
-                </div>
-                <div>
-                  ${token.is_current
-                    ? html`<simple-tooltip animation-delay="0" position="left">
-                        ${this.hass.localize(
-                          "ui.panel.profile.refresh_tokens.current_token_tooltip"
+              (token) =>
+                html`<ha-settings-row three-line>
+                  <span slot="heading"
+                    >${this.hass.localize(
+                      "ui.panel.profile.refresh_tokens.token_title",
+                      { clientId: token.client_id }
+                    )}
+                  </span>
+                  <div slot="description">
+                    ${this.hass.localize(
+                      "ui.panel.profile.refresh_tokens.created_at",
+                      {
+                        date: relativeTime(
+                          new Date(token.created_at),
+                          this.hass.locale
+                        ),
+                      }
+                    )}
+                  </div>
+                  <div slot="description">
+                    ${token.last_used_at
+                      ? this.hass.localize(
+                          "ui.panel.profile.refresh_tokens.last_used",
+                          {
+                            date: relativeTime(
+                              new Date(token.last_used_at),
+                              this.hass.locale
+                            ),
+                            location: token.last_used_ip,
+                          }
+                        )
+                      : this.hass.localize(
+                          "ui.panel.profile.refresh_tokens.not_used"
                         )}
-                      </simple-tooltip>`
-                    : ""}
-                  <ha-icon-button
-                    .token=${token}
-                    .disabled=${token.is_current}
-                    .label=${this.hass.localize("ui.common.delete")}
-                    .path=${mdiDelete}
-                    @click=${this._deleteToken}
-                  ></ha-icon-button>
-                </div>
-              </ha-settings-row>`
+                  </div>
+                  <div>
+                    ${token.is_current
+                      ? html`<simple-tooltip
+                          animation-delay="0"
+                          position="left"
+                        >
+                          ${this.hass.localize(
+                            "ui.panel.profile.refresh_tokens.current_token_tooltip"
+                          )}
+                        </simple-tooltip>`
+                      : ""}
+                    <ha-icon-button
+                      .token=${token}
+                      .disabled=${token.is_current}
+                      .label=${this.hass.localize("ui.common.delete")}
+                      .path=${mdiDelete}
+                      @click=${this._deleteToken}
+                    ></ha-icon-button>
+                  </div>
+                </ha-settings-row>`
             )
           : ""}
       </div>
diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts
index 354136c67e..4e6b48c9dc 100644
--- a/src/state-summary/state-card-select.ts
+++ b/src/state-summary/state-card-select.ts
@@ -29,19 +29,18 @@ class StateCardSelect extends LitElement {
         @closed=${stopPropagation}
       >
         ${this.stateObj.attributes.options.map(
-          (option) =>
-            html`
-              <mwc-list-item .value=${option}>
-                ${computeStateDisplay(
-                  this.hass.localize,
-                  this.stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities,
-                  option
-                )}
-              </mwc-list-item>
-            `
+          (option) => html`
+            <mwc-list-item .value=${option}>
+              ${computeStateDisplay(
+                this.hass.localize,
+                this.stateObj,
+                this.hass.locale,
+                this.hass.config,
+                this.hass.entities,
+                option
+              )}
+            </mwc-list-item>
+          `
         )}
       </ha-select>
     `;
diff --git a/src/state/url-sync-mixin.ts b/src/state/url-sync-mixin.ts
index 387bf8fd9b..70b908feac 100644
--- a/src/state/url-sync-mixin.ts
+++ b/src/state/url-sync-mixin.ts
@@ -19,7 +19,7 @@ export let historyPromise: Promise<void> | undefined;
 let historyResolve: undefined | (() => void);
 
 export const urlSyncMixin = <
-  T extends Constructor<ReactiveElement & ProvideHassElement>
+  T extends Constructor<ReactiveElement & ProvideHassElement>,
 >(
   superClass: T
 ) =>
diff --git a/yarn.lock b/yarn.lock
index 77a5aaaa45..e4275e4f19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9752,7 +9752,7 @@ __metadata:
     object-hash: 3.0.0
     open: 9.1.0
     pinst: 3.0.0
-    prettier: 2.8.8
+    prettier: 3.0.0
     proxy-polyfill: 0.3.2
     punycode: 2.3.0
     qr-scanner: 1.4.2
@@ -13208,12 +13208,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.8.8":
-  version: 2.8.8
-  resolution: "prettier@npm:2.8.8"
+"prettier@npm:3.0.0":
+  version: 3.0.0
+  resolution: "prettier@npm:3.0.0"
   bin:
-    prettier: bin-prettier.js
-  checksum: b49e409431bf129dd89238d64299ba80717b57ff5a6d1c1a8b1a28b590d998a34e083fa13573bc732bb8d2305becb4c9a4407f8486c81fa7d55100eb08263cf8
+    prettier: bin/prettier.cjs
+  checksum: 6a832876a1552dc58330d2467874e5a0b46b9ccbfc5d3531eb69d15684743e7f83dc9fbd202db6270446deba9c82b79d24383d09924c462b457136a759425e33
   languageName: node
   linkType: hard