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

@@ -1,9 +0,0 @@
-build
-translations/*
-node_modules/*
-hass_frontend/*
-pip-selfcheck.json
-
-# vscode
-.vscode/*
-!.vscode/extensions.json

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>
         `

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>
         `

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>
         `

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>

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>

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>

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++;

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>
                     `

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()
     );
   }
 

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()
     );
   }
 

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>

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>

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>

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"
 }

prettier.config.js

@@ -0,0 +1,3 @@
+export default {
+  trailingComma: "es5",
+};

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]>}`

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>

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) {

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;
 

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) {

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))

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(
     (

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;

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 {

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">

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 {

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 {

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) {

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);
       }

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;
       }
 

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 {

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)));

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;

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>
+        `
       )}
     `;
   }

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;

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>`;
   }

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;

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

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>`
           : ""}

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 {

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;

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>
     `;

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;

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 ||

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

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

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 {

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>
             `}

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>
               `

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 });
     }

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">

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>
                 `

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>

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">

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>

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>
+        `
       );
     }
   );

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

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 {

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"

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

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;
     }

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">

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: {

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) {

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

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>
                     `

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>

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(

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")}

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>

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(

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(

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"

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: {

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>
     `;

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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()
     );
   }
 

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) {

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>`

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[] = [];

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 &&

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>

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: {

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

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],

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>

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 = {

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}
+        `,
       },
     })
   );

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>
                     `

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>

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;

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