20241002.0 (#22185)

* Await removal of statistics when fixing

* refactor

* translations

README.md

@@ -27,3 +27,5 @@ A complete guide can be found at the following [link](https://www.home-assistant
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
 We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.
+
+[![Home Assistant - A project from the Open Home Foundation](https://www.openhomefoundation.org/badges/home-assistant.png)](https://www.openhomefoundation.org/)

package.json

@@ -33,7 +33,7 @@
     "@codemirror/legacy-modes": "6.4.1",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.34.0",
+    "@codemirror/view": "6.34.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.5",
     "@formatjs/intl-displaynames": "6.6.8",
@@ -89,8 +89,8 @@
     "@polymer/polymer": "3.5.1",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.4.9",
-    "@vaadin/vaadin-themable-mixin": "24.4.9",
+    "@vaadin/combo-box": "24.4.10",
+    "@vaadin/vaadin-themable-mixin": "24.4.10",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -172,7 +172,7 @@
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.17",
     "@types/chromecast-caf-sender": "1.0.10",
-    "@types/color-name": "1.1.4",
+    "@types/color-name": "2.0.0",
     "@types/glob": "8.1.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240927.0"
+version      = "20241002.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

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

@@ -1011,6 +1011,7 @@ export class HaDataTable extends LitElement {
           /* @noflip */
           padding-inline-end: initial;
           width: 60px;
+          min-width: 60px;
         }
 
         .mdc-data-table__table {

src/components/ha-color-picker.ts

@@ -1,6 +1,6 @@
 import { mdiInvertColorsOff, mdiPalette } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
@@ -8,8 +8,9 @@ import { stopPropagation } from "../common/dom/stop_propagation";
 import { LocalizeKeys } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";
-import "./ha-select";
 import "./ha-md-divider";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
 
 @customElement("ha-color-picker")
 export class HaColorPicker extends LitElement {
@@ -32,7 +33,17 @@ export class HaColorPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  _valueSelected(ev) {
+  @query("ha-select") private _select!: HaSelect;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // Refresh layout options when the field is connected to the DOM to ensure current value displayed
+    this._select.layoutOptions();
+  }
+
+  private _valueSelected(ev) {
+    ev.stopPropagation();
+    if (!this.isConnected) return;
     const value = ev.target.value;
     this.value = value === this.defaultColor ? undefined : value;
     fireEvent(this, "value-changed", {
@@ -41,7 +52,13 @@ export class HaColorPicker extends LitElement {
   }
 
   render() {
-    const value = this.value || this.defaultColor;
+    const value = this.value || this.defaultColor || "";
+
+    const isCustom = !(
+      THEME_COLORS.has(value) ||
+      value === "none" ||
+      value === "state"
+    );
 
     return html`
       <ha-select
@@ -110,6 +127,14 @@ export class HaColorPicker extends LitElement {
             </ha-list-item>
           `
         )}
+        ${isCustom
+          ? html`
+              <ha-list-item .value=${value} graphic="icon">
+                ${value}
+                <span slot="graphic">${this.renderColorCircle(value)}</span>
+              </ha-list-item>
+            `
+          : nothing}
       </ha-select>
     `;
   }

src/data/recorder.ts

@@ -332,3 +332,6 @@ export const getDisplayUnit = (
 
 export const isExternalStatistic = (statisticsId: string): boolean =>
   statisticsId.includes(":");
+
+export const updateStatisticsIssues = (hass: HomeAssistant) =>
+  hass.callWS({ type: "recorder/update_statistics_issues" });

src/data/timer.ts

@@ -72,8 +72,8 @@ export const timerTimeRemaining = (
 
   if (stateObj.state === "active") {
     const now = new Date().getTime();
-    const madeActive = new Date(stateObj.last_changed).getTime();
-    timeRemaining = Math.max(timeRemaining - (now - madeActive) / 1000, 0);
+    const finishes = new Date(stateObj.attributes.finishes_at).getTime();
+    timeRemaining = Math.max((finishes - now) / 1000, 0);
   }
 
   return timeRemaining;

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts

@@ -2,7 +2,7 @@ import { css, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-circular-progress";
-import { UNAVAILABLE } from "../../data/entity";
+import { OFF, ON, UNAVAILABLE } from "../../data/entity";
 import { HomeAssistant } from "../../types";
 import { AssistantSetupStyles } from "./styles";
 
@@ -14,6 +14,8 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
 
   private _updated = false;
 
+  private _refreshTimeout?: number;
+
   protected override willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
 
@@ -28,17 +30,18 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
         const oldState = oldHass.states[this.updateEntityId];
         const newState = this.hass.states[this.updateEntityId];
         if (
-          oldState?.state === UNAVAILABLE &&
-          newState?.state !== UNAVAILABLE
+          (oldState?.state === UNAVAILABLE &&
+            newState?.state !== UNAVAILABLE) ||
+          (oldState?.state === OFF && newState?.state === ON)
         ) {
           // Device is rebooted, let's move on
-          this._tryUpdate();
+          this._tryUpdate(false);
         }
       }
     }
 
     if (changedProperties.has("updateEntityId")) {
-      this._tryUpdate();
+      this._tryUpdate(true);
     }
   }
 
@@ -54,7 +57,11 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
 
     return html`<div class="content">
       <img src="/static/icons/casita/loading.png" />
-      <h1>Updating your voice assistant</h1>
+      <h1>
+        ${stateObj.state === OFF
+          ? "Checking for updates"
+          : "Updating your voice assistant"}
+      </h1>
       <p class="secondary">
         We are making sure you have the latest and greatest version of your
         voice assistant. This may take a few minutes.
@@ -75,7 +82,8 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
     </div>`;
   }
 
-  private async _tryUpdate() {
+  private async _tryUpdate(refreshUpdate: boolean) {
+    clearTimeout(this._refreshTimeout);
     if (!this.updateEntityId) {
       return;
     }
@@ -91,6 +99,16 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
         {},
         { entity_id: updateEntity.entity_id }
       );
+    } else if (refreshUpdate) {
+      await this.hass.callService(
+        "homeassistant",
+        "update_entity",
+        {},
+        { entity_id: this.updateEntityId }
+      );
+      this._refreshTimeout = window.setTimeout(() => {
+        this._nextStep();
+      }, 5000);
     } else {
       this._nextStep();
     }

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

@@ -35,6 +35,7 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-expansion-panel";
 import { getSignedPath } from "../../../data/auth";
 import {
   ConfigEntry,
@@ -1354,16 +1355,14 @@ export class HaConfigDevicePage extends LitElement {
             .filter((entity) => entity.newId)
             .map(
               (entity) =>
-                html`<li style="white-space: nowrap;">
-                  ${entity.oldId} -> ${entity.newId}
-                </li>`
+                html`<tr>
+                  <td>${entity.oldId}</td>
+                  <td>${entity.newId}</td>
+                </tr>`
             );
           const dialogNoRenames = entityIdRenames
             .filter((entity) => !entity.newId)
-            .map(
-              (entity) =>
-                html`<li style="white-space: nowrap;">${entity.oldId}</li>`
-            );
+            .map((entity) => html`<li>${entity.oldId}</li>`);
 
           if (dialogRenames.length) {
             renameEntityid = await showConfirmationDialog(this, {
@@ -1372,17 +1371,46 @@ export class HaConfigDevicePage extends LitElement {
               ),
               text: html`${this.hass.localize(
                   "ui.panel.config.devices.confirm_rename_entity_ids_warning"
-                )} <br /><br />${this.hass.localize(
-                  "ui.panel.config.devices.confirm_rename_entity_will_rename"
-                )}:
-                ${dialogRenames}
+                )} <br /><br />
+                <ha-expansion-panel outlined>
+                  <span slot="header"
+                    >${this.hass.localize(
+                      "ui.panel.config.devices.confirm_rename_entity_will_rename",
+                      { count: dialogRenames.length }
+                    )}</span
+                  >
+                  <div style="overflow: auto;">
+                    <table style="width: 100%; text-align: var(--float-start);">
+                      <tr>
+                        <th>
+                          ${this.hass.localize(
+                            "ui.panel.config.devices.confirm_rename_old"
+                          )}
+                        </th>
+                        <th>
+                          ${this.hass.localize(
+                            "ui.panel.config.devices.confirm_rename_new"
+                          )}
+                        </th>
+                      </tr>
+                      ${dialogRenames}
+                    </table>
+                  </div>
+                </ha-expansion-panel>
                 ${dialogNoRenames.length
-                  ? html`<br /><br />${this.hass.localize(
-                        "ui.panel.config.devices.confirm_rename_entity_wont_rename",
-                        { deviceSlug: oldDeviceSlug }
-                      )}:
-                      ${dialogNoRenames}`
-                  : nothing}`,
+                  ? html`<ha-expansion-panel outlined>
+                      <span slot="header"
+                        >${this.hass.localize(
+                          "ui.panel.config.devices.confirm_rename_entity_wont_rename",
+                          {
+                            count: dialogNoRenames.length,
+                            deviceSlug: oldDeviceSlug,
+                          }
+                        )}</span
+                      >
+                      ${dialogNoRenames}</ha-expansion-panel
+                    >`
+                  : nothing} `,
               confirmText: this.hass.localize("ui.common.rename"),
               dismissText: this.hass.localize("ui.common.no"),
               warning: true,
@@ -1392,11 +1420,15 @@ export class HaConfigDevicePage extends LitElement {
               title: this.hass.localize(
                 "ui.panel.config.devices.confirm_rename_entity_no_renamable_entity_ids"
               ),
-              text: html`${this.hass.localize(
-                "ui.panel.config.devices.confirm_rename_entity_wont_rename",
-                { deviceSlug: oldDeviceSlug }
-              )}:
-              ${dialogNoRenames}`,
+              text: html`<ha-expansion-panel outlined>
+                <span slot="header"
+                  >${this.hass.localize(
+                    "ui.panel.config.devices.confirm_rename_entity_wont_rename",
+                    { deviceSlug: oldDeviceSlug, count: dialogNoRenames.length }
+                  )}</span
+                >
+                ${dialogNoRenames}
+              </ha-expansion-panel>`,
             });
           }
         }

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

@@ -18,6 +18,7 @@ import { showRepairsIssueDialog } from "./show-repair-issue-dialog";
 import {
   STATISTIC_TYPES,
   StatisticsValidationResult,
+  updateStatisticsIssues,
 } from "../../../data/recorder";
 
 @customElement("ha-config-repairs")
@@ -144,25 +145,19 @@ class HaConfigRepairs extends LitElement {
       issue.translation_key &&
       STATISTIC_TYPES.includes(issue.translation_key as any)
     ) {
-      const localize =
-        await this.hass.loadFragmentTranslation("developer-tools");
+      this.hass.loadFragmentTranslation("developer-tools");
       const data = await fetchRepairsIssueData(
         this.hass.connection,
         issue.domain,
         issue.issue_id
       );
       if ("issue_type" in data.issue_data) {
-        await fixStatisticsIssue(
-          this,
-          this.hass,
-          localize || this.hass.localize,
-          {
-            type: data.issue_data
-              .issue_type as StatisticsValidationResult["type"],
-            data: data.issue_data as any,
-          }
-        );
-        this.hass.callWS({ type: "recorder/update_statistics_issues" });
+        await fixStatisticsIssue(this, {
+          type: data.issue_data
+            .issue_type as StatisticsValidationResult["type"],
+          data: data.issue_data as any,
+        });
+        updateStatisticsIssues(this.hass);
       }
     } else {
       showRepairsIssueDialog(this, {

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

@@ -50,8 +50,6 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
 
   private _disabledEntities = new Set<string>();
 
-  private _deletedStatistics = new Set<string>();
-
   protected firstUpdated() {
     this._validateStatistics();
   }
@@ -225,9 +223,7 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
 
     this._data = statisticIds
       .filter(
-        (statistic) =>
-          !this._disabledEntities.has(statistic.statistic_id) &&
-          !this._deletedStatistics.has(statistic.statistic_id)
+        (statistic) => !this._disabledEntities.has(statistic.statistic_id)
       )
       .map((statistic) => {
         statsIds.add(statistic.statistic_id);
@@ -241,8 +237,7 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
     Object.keys(issues).forEach((statisticId) => {
       if (
         !statsIds.has(statisticId) &&
-        !this._disabledEntities.has(statisticId) &&
-        !this._deletedStatistics.has(statisticId)
+        !this._disabledEntities.has(statisticId)
       ) {
         this._data.push({
           statistic_id: statisticId,
@@ -265,20 +260,7 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
         (FIX_ISSUES_ORDER[itemB.type] ?? 99)
     );
     const issue = issues[0];
-    const result = await fixStatisticsIssue(
-      this,
-      this.hass,
-      this.hass.localize,
-      issue
-    );
-    if (
-      result &&
-      ["no_state", "entity_no_longer_recorded", "state_class_removed"].includes(
-        issue.type
-      )
-    ) {
-      this._deletedStatistics.add(issue.data.statistic_id);
-    }
+    await fixStatisticsIssue(this, issue);
     this._validateStatistics();
   };
 

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

@@ -0,0 +1,201 @@
+import "@material/mwc-button/mwc-button";
+import { CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-circular-progress";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-dialog";
+import { clearStatistics, getStatisticLabel } from "../../../data/recorder";
+import { haStyle, haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
+import type { DialogStatisticsFixParams } from "./show-dialog-statistics-fix";
+import { showAlertDialog } from "../../lovelace/custom-card-helpers";
+
+@customElement("dialog-statistics-fix")
+export class DialogStatisticsFix extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: DialogStatisticsFixParams;
+
+  @state() private _clearing = false;
+
+  public showDialog(params: DialogStatisticsFixParams): void {
+    this._params = params;
+  }
+
+  public closeDialog(): void {
+    this._cancel();
+  }
+
+  private _closeDialog(): void {
+    this._params = undefined;
+    this._clearing = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    const issue = this._params.issue;
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        @closed=${this._closeDialog}
+        .heading=${this.hass.localize(
+          `ui.panel.developer-tools.tabs.statistics.fix_issue.${issue.type}.title`
+        )}
+      >
+        <p>
+          ${this.hass.localize(
+            `ui.panel.developer-tools.tabs.statistics.fix_issue.${issue.type}.info_text_1`,
+            {
+              name: getStatisticLabel(
+                this.hass,
+                this._params.issue.data.statistic_id,
+                undefined
+              ),
+              statistic_id: this._params.issue.data.statistic_id,
+            }
+          )}<br /><br />
+          ${this.hass.localize(
+            `ui.panel.developer-tools.tabs.statistics.fix_issue.${issue.type}.info_text_2`,
+            { statistic_id: issue.data.statistic_id }
+          )}
+          ${issue.type === "entity_not_recorded"
+            ? html`<br /><br />
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    "/integrations/recorder/#configure-filter"
+                  )}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  ${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_not_recorded.info_text_3_link"
+                  )}</a
+                >`
+            : issue.type === "entity_no_longer_recorded"
+              ? html`<a
+                    href=${documentationUrl(
+                      this.hass,
+                      "/integrations/recorder/#configure-filter"
+                    )}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.info_text_3_link"
+                    )}</a
+                  ><br /><br />
+                  ${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.info_text_4"
+                  )}`
+              : issue.type === "state_class_removed"
+                ? html`<ul>
+                      <li>
+                        ${this.hass.localize(
+                          "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_3"
+                        )}
+                      </li>
+                      <li>
+                        ${this.hass.localize(
+                          "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_4"
+                        )}
+                        <a
+                          href="https://developers.home-assistant.io/docs/core/entity/sensor/#long-term-statistics"
+                          target="_blank"
+                          rel="noreferrer noopener"
+                        >
+                          ${this.hass.localize(
+                            "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_4_link"
+                          )}</a
+                        >
+                      </li>
+                      <li>
+                        ${this.hass.localize(
+                          "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_5"
+                        )}
+                      </li>
+                    </ul>
+                    ${this.hass.localize(
+                      "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_6",
+                      { statistic_id: issue.data.statistic_id }
+                    )}`
+                : nothing}
+        </p>
+
+        ${issue.type !== "entity_not_recorded"
+          ? html`<mwc-button
+                slot="primaryAction"
+                @click=${this._clearStatistics}
+                class="warning"
+                .disabled=${this._clearing}
+              >
+                ${this._clearing
+                  ? html`<ha-circular-progress
+                      indeterminate
+                      size="small"
+                      aria-label="Saving"
+                    ></ha-circular-progress>`
+                  : nothing}
+                ${this.hass.localize("ui.common.delete")}
+              </mwc-button>
+              <mwc-button slot="secondaryAction" @click=${this._cancel}>
+                ${this.hass.localize("ui.common.close")}
+              </mwc-button>`
+          : html`<mwc-button slot="primaryAction" @click=${this._cancel}>
+              ${this.hass.localize("ui.common.ok")}
+            </mwc-button>`}
+      </ha-dialog>
+    `;
+  }
+
+  private _cancel(): void {
+    this._params?.cancelCallback!();
+    this._closeDialog();
+  }
+
+  private async _clearStatistics(): Promise<void> {
+    this._clearing = true;
+    try {
+      await clearStatistics(this.hass, [this._params!.issue.data.statistic_id]);
+    } catch (err: any) {
+      await showAlertDialog(this, {
+        title:
+          err.code === "timeout"
+            ? this.hass.localize(
+                "ui.panel.developer-tools.tabs.statistics.fix_issue.clearing_timeout_title"
+              )
+            : this.hass.localize(
+                "ui.panel.developer-tools.tabs.statistics.fix_issue.clearing_failed"
+              ),
+        text:
+          err.code === "timeout"
+            ? this.hass.localize(
+                "ui.panel.developer-tools.tabs.statistics.fix_issue.clearing_timeout_text"
+              )
+            : err.message,
+      });
+    } finally {
+      this._clearing = false;
+      this._params?.fixedCallback!();
+      this._closeDialog();
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [haStyle, haStyleDialog];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-statistics-fix": DialogStatisticsFix;
+  }
+}

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

@@ -1,171 +1,17 @@
-import { html } from "lit";
-import {
-  clearStatistics,
-  getStatisticLabel,
-  StatisticsValidationResult,
-} from "../../../data/recorder";
-import { documentationUrl } from "../../../util/documentation-url";
-import {
-  showConfirmationDialog,
-  showAlertDialog,
-} from "../../lovelace/custom-card-helpers";
+import { StatisticsValidationResult } from "../../../data/recorder";
+import { showFixStatisticsDialog } from "./show-dialog-statistics-fix";
 import { showFixStatisticsUnitsChangedDialog } from "./show-dialog-statistics-fix-units-changed";
-import { LocalizeFunc } from "../../../common/translations/localize";
-import { HomeAssistant } from "../../../types";
 
 export const fixStatisticsIssue = async (
   element: HTMLElement,
-  hass: HomeAssistant,
-  localize: LocalizeFunc,
   issue: StatisticsValidationResult
 ) => {
-  switch (issue.type) {
-    case "no_state":
-      return showConfirmationDialog(element, {
-        title: localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.no_state.title"
-        ),
-        text: html`${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.no_state.info_text_1",
-            {
-              name: getStatisticLabel(hass, issue.data.statistic_id, undefined),
-              statistic_id: issue.data.statistic_id,
-            }
-          )}<br /><br />${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.no_state.info_text_2",
-            { statistic_id: issue.data.statistic_id }
-          )}`,
-        confirmText: localize("ui.common.delete"),
-        destructive: true,
-        confirm: async () => {
-          await clearStatistics(hass, [issue.data.statistic_id]);
-        },
-      });
-    case "entity_not_recorded":
-      return showAlertDialog(element, {
-        title: localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_not_recorded.title"
-        ),
-        text: html`${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_not_recorded.info_text_1",
-            {
-              name: getStatisticLabel(hass, issue.data.statistic_id, undefined),
-            }
-          )}<br /><br />${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_not_recorded.info_text_2"
-          )}<br /><br />
-          <a
-            href=${documentationUrl(
-              hass,
-              "/integrations/recorder/#configure-filter"
-            )}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            ${localize(
-              "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_not_recorded.info_text_3_link"
-            )}</a
-          >`,
-      });
-    case "entity_no_longer_recorded":
-      return showConfirmationDialog(element, {
-        title: localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.title"
-        ),
-        text: html`${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.info_text_1",
-            {
-              name: getStatisticLabel(hass, issue.data.statistic_id, undefined),
-              statistic_id: issue.data.statistic_id,
-            }
-          )}
-          ${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.info_text_2"
-          )}
-          <a
-            href=${documentationUrl(
-              hass,
-              "/integrations/recorder/#configure-filter"
-            )}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            ${localize(
-              "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.info_text_3_link"
-            )}</a
-          ><br /><br />
-          ${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.entity_no_longer_recorded.info_text_4"
-          )}`,
-        confirmText: localize("ui.common.delete"),
-        destructive: true,
-        confirm: async () => {
-          await clearStatistics(hass, [issue.data.statistic_id]);
-        },
-      });
-    case "state_class_removed":
-      return showConfirmationDialog(element, {
-        title: localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.title"
-        ),
-        text: html`${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_1",
-            {
-              name: getStatisticLabel(hass, issue.data.statistic_id, undefined),
-              statistic_id: issue.data.statistic_id,
-            }
-          )}<br /><br />
-          ${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_2"
-          )}
-          <ul>
-            <li>
-              ${localize(
-                "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_3"
-              )}
-            </li>
-            <li>
-              ${localize(
-                "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_4"
-              )}
-              <a
-                href="https://developers.home-assistant.io/docs/core/entity/sensor/#long-term-statistics"
-                target="_blank"
-                rel="noreferrer noopener"
-              >
-                ${localize(
-                  "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_4_link"
-                )}</a
-              >
-            </li>
-            <li>
-              ${localize(
-                "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_5"
-              )}
-            </li>
-          </ul>
-          ${localize(
-            "ui.panel.developer-tools.tabs.statistics.fix_issue.state_class_removed.info_text_6",
-            { statistic_id: issue.data.statistic_id }
-          )}`,
-        confirmText: localize("ui.common.delete"),
-        destructive: true,
-        confirm: async () => {
-          await clearStatistics(hass, [issue.data.statistic_id]);
-        },
-      });
-    case "units_changed":
-      return showFixStatisticsUnitsChangedDialog(element, {
-        issue,
-      });
-    default:
-      return showAlertDialog(element, {
-        title: localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.no_support.title"
-        ),
-        text: localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.no_support.info_text_1"
-        ),
-      });
+  if (issue.type === "units_changed") {
+    return showFixStatisticsUnitsChangedDialog(element, {
+      issue,
+    });
   }
+  return showFixStatisticsDialog(element, {
+    issue,
+  });
 };

src/panels/developer-tools/statistics/show-dialog-statistics-fix.ts

@@ -0,0 +1,33 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import { StatisticsValidationResult } from "../../../data/recorder";
+
+export const loadFixDialog = () => import("./dialog-statistics-fix");
+
+export interface DialogStatisticsFixParams {
+  issue: StatisticsValidationResult;
+  fixedCallback?: () => void;
+  cancelCallback?: () => void;
+}
+
+export const showFixStatisticsDialog = (
+  element: HTMLElement,
+  detailParams: DialogStatisticsFixParams
+) =>
+  new Promise((resolve) => {
+    const origCallback = detailParams.fixedCallback;
+
+    fireEvent(element, "show-dialog", {
+      dialogTag: "dialog-statistics-fix",
+      dialogImport: loadFixDialog,
+      dialogParams: {
+        ...detailParams,
+        cancelCallback: () => {
+          resolve(false);
+        },
+        fixedCallback: () => {
+          resolve(true);
+          origCallback?.();
+        },
+      },
+    });
+  });

src/panels/lovelace/editor/config-elements/hui-heading-card-editor.ts

@@ -70,7 +70,7 @@ export class HuiHeadingCardEditor
           name: "heading_style",
           selector: {
             select: {
-              mode: "dropdown",
+              mode: "list",
               options: ["title", "subtitle"].map((value) => ({
                 label: localize(
                   `ui.panel.lovelace.editor.card.heading.heading_style_options.${value}`

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

@@ -37,6 +37,7 @@ export const DEFAULT_CONFIG: Partial<EntityHeadingBadgeConfig> = {
 const entityConfigStruct = object({
   type: optional(string()),
   entity: string(),
+  name: optional(string()),
   icon: optional(string()),
   state_content: optional(union([string(), array(string())])),
   show_state: optional(boolean()),
@@ -86,6 +87,12 @@ export class HuiHeadingEntityEditor
               name: "",
               type: "grid",
               schema: [
+                {
+                  name: "name",
+                  selector: {
+                    text: {},
+                  },
+                },
                 {
                   name: "icon",
                   selector: { icon: {} },
@@ -128,7 +135,7 @@ export class HuiHeadingEntityEditor
             },
             {
               name: "state_content",
-              selector: { ui_state_content: {} },
+              selector: { ui_state_content: { allow_name: true } },
               context: { filter_entity: "entity" },
             },
           ],
@@ -213,7 +220,7 @@ export class HuiHeadingEntityEditor
       return;
     }
 
-    const config = ev.detail.value as FormData;
+    const config = { ...ev.detail.value } as FormData;
 
     if (config.displayed_elements) {
       config.show_state = config.displayed_elements.includes("state");
@@ -269,6 +276,10 @@ export class HuiHeadingEntityEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.heading.entity_config.${schema.name}_helper`
         );
+      case "name":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.heading.entity_config.name_helper`
+        );
       default:
         return undefined;
     }

src/panels/lovelace/editor/hui-element-editor.ts

@@ -317,6 +317,7 @@ export abstract class HuiElementEditor<
 
   private _handleUIConfigChanged(ev: UIConfigChangedEvent<T>) {
     ev.stopPropagation();
+    if (!this.GUImode) return;
     const config = ev.detail.config;
     Object.keys(config).forEach((key) => {
       if (config[key] === undefined) {

src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts

@@ -15,7 +15,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
-import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -507,12 +507,6 @@ export class HuiDialogEditView extends LitElement {
           margin-inline-end: auto;
           margin-inline-start: initial;
         }
-        ha-circular-progress {
-          display: none;
-        }
-        ha-circular-progress[indeterminate] {
-          display: block;
-        }
         .selected_menu_item {
           color: var(--primary-color);
         }

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

@@ -125,12 +125,15 @@ export class HuiEntityHeadingBadge
       "--icon-color": color,
     };
 
+    const name = config.name || stateObj.attributes.friendly_name;
+
     return html`
       <ha-heading-badge
         .type=${hasAction(config.tap_action) ? "button" : "text"}
         @action=${this._handleAction}
         .actionHandler=${actionHandler()}
         style=${styleMap(style)}
+        .title=${name}
       >
         ${config.show_icon
           ? html`
@@ -148,6 +151,8 @@ export class HuiEntityHeadingBadge
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 .content=${config.state_content}
+                .name=${config.name}
+                dash-unavailable
               ></state-display>
             `
           : nothing}

src/panels/lovelace/heading-badges/types.ts

@@ -16,6 +16,7 @@ export interface ErrorBadgeConfig extends LovelaceHeadingBadgeConfig {
 export interface EntityHeadingBadgeConfig extends LovelaceHeadingBadgeConfig {
   type?: "entity";
   entity: string;
+  name?: string;
   state_content?: string | string[];
   icon?: string;
   show_state?: boolean;

src/state-display/state-display.ts

@@ -57,6 +57,9 @@ class StateDisplay extends LitElement {
 
   @property({ attribute: false }) public name?: string;
 
+  @property({ type: Boolean, attribute: "dash-unavailable" })
+  public dashUnavailable?: boolean;
+
   protected createRenderRoot() {
     return this;
   }
@@ -73,6 +76,9 @@ class StateDisplay extends LitElement {
     const domain = computeStateDomain(stateObj);
 
     if (content === "state") {
+      if (this.dashUnavailable && isUnavailableState(stateObj.state)) {
+        return "—";
+      }
       if (
         (stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP ||
           TIMESTAMP_STATE_DOMAINS.includes(domain)) &&

src/translations/en.json

@@ -4089,8 +4089,10 @@
           },
           "confirm_rename_entity_ids": "Do you also want to rename the entity IDs of your entities?",
           "confirm_rename_entity_ids_warning": "This will not change any configuration (like automations, scripts, scenes, dashboards) that is currently using these entities! You will have to update them yourself to use the new entity IDs!",
-          "confirm_rename_entity_will_rename": "The following entity IDs will be renamed",
-          "confirm_rename_entity_wont_rename": "The following entity IDs will not be renamed as they do not contain the current device name ({deviceSlug})",
+          "confirm_rename_entity_will_rename": "{count} {count, plural,\n  one {entity ID}\n  other {entity IDs}\n} will be renamed",
+          "confirm_rename_new": "New",
+          "confirm_rename_old": "Old",
+          "confirm_rename_entity_wont_rename": "{count} {count, plural,\n  one {entity ID}\n  other {entity IDs}\n} will not be renamed as they do not contain the current device name ({deviceSlug})",
           "confirm_rename_entity_no_renamable_entity_ids": "No renamable entity IDs",
           "confirm_disable_config_entry": "There are no more devices for the config entry {entry_name}, do you want to instead disable the config entry?",
           "update_device_error": "Updating the device failed",
@@ -6026,6 +6028,8 @@
               "entity_config": {
                 "color": "[%key:ui::panel::lovelace::editor::card::tile::color%]",
                 "color_helper": "[%key:ui::panel::lovelace::editor::card::tile::color_helper%]",
+                "name": "[%key:ui::panel::lovelace::editor::card::generic::name%]",
+                "name_helper": "Visible if selected in state content",
                 "visibility": "Visibility",
                 "visibility_explanation": "The entity will be shown when ALL conditions below are fulfilled. If no conditions are set, the entity will always be shown.",
                 "appearance": "Appearance",
@@ -6964,6 +6968,9 @@
             },
             "fix_issue": {
               "fix": "Fix issue",
+              "clearing_failed": "Clearing the statistics failed",
+              "clearing_timeout_title": "Clearing not done yet",
+              "clearing_timeout_text": "The clearing of the statistics took longer than expected, it might take longer for the issue to disappear.",
               "no_support": {
                 "title": "Fix issue",
                 "info_text_1": "Fixing this issue is not supported yet."

test/common/entity/timer_time_remaining_test.ts

@@ -42,8 +42,8 @@ describe("timerTimeRemaining", () => {
           state: "active",
           attributes: {
             remaining: "0:01:05",
+            finishes_at: "2018-01-17T16:16:17+00:00",
           },
-          last_changed: "2018-01-17T16:15:12Z",
         } as any),
         47
       );

yarn.lock

@@ -1511,14 +1511,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.34.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
-  version: 6.34.0
-  resolution: "@codemirror/view@npm:6.34.0"
+"@codemirror/view@npm:6.34.1, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
+  version: 6.34.1
+  resolution: "@codemirror/view@npm:6.34.1"
   dependencies:
     "@codemirror/state": "npm:^6.4.0"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/df790659d229b2bd5867d8d424c7d911bf4800e893cf71cf1caf03797a70a1af561a05ce81a03f2e326320eb0a16db078a5ba4af2f89d790b578de94ea83f6ea
+  checksum: 10/012f195d7c9da2f9693b2192e0e52c7d3f94d9c887c46e218ddb36ee1a050978ee6a13c7d0207dd3fb970b4454198962112b9afe17e1f23d2b89a274b7d186a0
   languageName: node
   linkType: hard
 
@@ -4041,10 +4041,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/color-name@npm:1.1.4":
-  version: 1.1.4
-  resolution: "@types/color-name@npm:1.1.4"
-  checksum: 10/be275af06d32e6f09c8f1b8c15d35d2b8194736af980569b2fa572720339a19b3d5ccb63ce5950105d859d5c6226c98b8d8ecd613d626e757667037a90b9b47f
+"@types/color-name@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@types/color-name@npm:2.0.0"
+  checksum: 10/341d46645757c859ff1b6533d07f9c04e674e90ed44e63d38dcda20fd6dcf96289cb2c45f0137102bd8761dc691d239d107e18d4377df2784139c01bab36fc9f
   languageName: node
   linkType: hard
 
@@ -4669,129 +4669,129 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/a11y-base@npm:24.4.9"
+"@vaadin/a11y-base@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/a11y-base@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.9"
+    "@vaadin/component-base": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/65406dd93126bd45720313b398e58d77369dbfe4c695a8ba7a23b6d5fc4ecfaf74718827b5c8cb38ef44b5f530afe99a7d4e3712cbab86f133fe59d52fa6d427
+  checksum: 10/858b58837bc5d8762ab86906384c1fcf1f1cb65ab593b9b3962d0e6fd5cce956952a28d80d66dc2e1eddd68b36fbd04a65c0509f786f7fcea7352ecd1e8ff0a9
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/combo-box@npm:24.4.9"
+"@vaadin/combo-box@npm:24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/combo-box@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.9"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/field-base": "npm:~24.4.9"
-    "@vaadin/input-container": "npm:~24.4.9"
-    "@vaadin/item": "npm:~24.4.9"
-    "@vaadin/lit-renderer": "npm:~24.4.9"
-    "@vaadin/overlay": "npm:~24.4.9"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
-  checksum: 10/5dbdd0b8ff1ba0fdf6f6ec476027ffe204380f2ba1ce011206418df0e26e78ec59787e7a5ff7290b9d3c0c509423ed0ea5dcf8ac56200c719d6dafaf24bc2b91
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/field-base": "npm:~24.4.10"
+    "@vaadin/input-container": "npm:~24.4.10"
+    "@vaadin/item": "npm:~24.4.10"
+    "@vaadin/lit-renderer": "npm:~24.4.10"
+    "@vaadin/overlay": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/327930d76cfc90d17d0966769f864e4918bd5e98ce5ba2bbe79dce1355faf803682ba0b3ec454a4060750037860362e0eb8d4f7ef80ed2c79b565d17f6c422cf
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/component-base@npm:24.4.9"
+"@vaadin/component-base@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/component-base@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
     "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
     "@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
     lit: "npm:^3.0.0"
-  checksum: 10/7ed428617ea8dc7a4dfc8a5f700f584727ae0f850928226fe8da93908a3b799e705fc972d13fde99ec200b081ac5f3d88f3d17547f1f4b289eafdc49c1128388
+  checksum: 10/1cdba96a018accf9070b21560041b50288c081afd39ef3aeb841c7071f3ff5dfe1133d9dc86ba2ab68c4874db765caae50e47b405dd5a0d01d22110018133d01
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/field-base@npm:24.4.9"
+"@vaadin/field-base@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/field-base@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.9"
-    "@vaadin/component-base": "npm:~24.4.9"
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/9a7955948a6270f89c5e0c5a9f3e35c7d02fa1490855460a6509bcaca1dc8d7aabe48b5f6d459f6f25202082ec277528aa3a1d3e0d0864528a6393b3c75a692d
+  checksum: 10/4b7f8c96810716a7e8338ca1c3d15ee3081bb4cd859bba44c1ac10d68ce2b3263878e8e4e135b71f5a51bbee30e8ff690c23bd740594553832248534f5e90ec8
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/icon@npm:24.4.9"
+"@vaadin/icon@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/icon@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/d59c2d3f1abd97f36be9472d8f4eebc42e4ac520c8ac9054e53bb7e29c9d937a7ef13420ef13c6d3e93a1376b6b14c75e56b44ce76c6ee61e216d79c28906640
+  checksum: 10/8fd33f6a9cde75cd93c8a76c2c4dcf3db83ffb0f77b814eac0e2991202495f87c015068ba58c4133d7e212926b3948ef940d828c75b2b5448a2376fbdbe30267
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/input-container@npm:24.4.9"
+"@vaadin/input-container@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/input-container@npm:24.4.10"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/ec30c4bf821f865c8faec035496c5af6d69a6a84387e897e990ac8e73bae2e1697b303737a5c14727d6b5e9d736e1b01b4174d2ab85a07490f5ac4d94dbc574c
+  checksum: 10/a16b2dd4ac0dace3a575718fc097e0082142286bd75730283f70144fcb5bf7b1c49a04266c066f359e6910fbd2b93b9e1d44f4dd87f1c9eddc45bea9bc72e023
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/item@npm:24.4.9"
+"@vaadin/item@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/item@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.9"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
-  checksum: 10/932760421383a479e98c6c572a567a9221517dcf4d9a24f98c25d0a4fbe2db82b6ae7da043ff7454122c7b31990f29d2015442e9d9a5cd3f24a6519dbf985b14
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/f7e344d11b351c28fe13a342e383d3a0c28295387effd94ac08b0605d48ed636e2798918a2b3619f9ebbab3be59a3981c72c6503d2f8e7d80ef30769f941a6ef
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/lit-renderer@npm:24.4.9"
+"@vaadin/lit-renderer@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/lit-renderer@npm:24.4.10"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/62b8ee678068488e217db3b090a190f2e9fb04266c10bf3badd9cec2aa9a9352667f0fc3afaa6406c41bf92b1cf6165accd295116dc7bb719930bcd9c787d033
+  checksum: 10/4794767d1ff99efc0dccdd2aeef4eb191a18f3b0f25236078f22c90327a91ca1e9199c8dc28c640ee312b1c82f04360970545d64cafc3a116cedac24992e082c
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/overlay@npm:24.4.9"
+"@vaadin/overlay@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/overlay@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.9"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/2190be292a1be8fa0981fdbd661c7750e752926a0b56fd44f79027fc127ab0f02ecb461ad7d7a54e951a514659ac850fa782c95f2d397784cf46bc20ed99745f
+  checksum: 10/db07a22a6b7e925deef378d04981612a27123800cdf98fc5fcc73571a90eaa5910403954cf50873671f0fc27610820f261d4a7fd0cfc4e97416c3d568a89a012
   languageName: node
   linkType: hard
 
@@ -4802,36 +4802,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.4.9"
+"@vaadin/vaadin-lumo-styles@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.4.10"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/icon": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
-  checksum: 10/1c29528abc011f514d2f574105f2474a6fe56dd43d8c945bd1cb86377282436d0bd0c3505d3e18a5965898d5a48a94ac64171a50b1ac7929ad37a112b5e4f488
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/icon": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/eabd0eecf6f8cc4b2a4acd2db5c77a47758f19ee0bfcdb0fe2ea28c6dedcd8b67e23ca0b31215ad5878d8f89a5c04adcfbfd5384d41cc1096c60990d3801dfa9
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/vaadin-material-styles@npm:24.4.9"
+"@vaadin/vaadin-material-styles@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/vaadin-material-styles@npm:24.4.10"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.9"
-  checksum: 10/fe9e70613b33e765e2db06df5b2c340b7adec6354ce7a87089ea2b2651f68cb744095c64e0fa9650eea46aa27e826a537a3f715f4d4cda6977519442ff402060
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/eb4f71967059093ad705f95c62c1aef7e01ee8f9300b9af6261454d09791f05786b1ead9ec890b5aaf1491ba504f45f793ceb267d3bf318f5465f91faaa8f037
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.4.9, @vaadin/vaadin-themable-mixin@npm:~24.4.9":
-  version: 24.4.9
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.4.9"
+"@vaadin/vaadin-themable-mixin@npm:24.4.10, @vaadin/vaadin-themable-mixin@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
-  checksum: 10/791a1cb20e8512905c00b9d7ffe8bbfc672e4854e8d9346539648269a76aa95139046687a1bc6b0c2e46e34b8d6498ef039277d1d6ff223782823246566b412b
+  checksum: 10/d9b974854e67fd21059705d2641210b288b0a023245bf38fe29bf0819b8918c32f32e71c1abca8c10a6c8254be644a7e802e5d5c47241e339e9caa5702868135
   languageName: node
   linkType: hard
 
@@ -8908,7 +8908,7 @@ __metadata:
     "@codemirror/legacy-modes": "npm:6.4.1"
     "@codemirror/search": "npm:6.5.6"
     "@codemirror/state": "npm:6.4.1"
-    "@codemirror/view": "npm:6.34.0"
+    "@codemirror/view": "npm:6.34.1"
     "@egjs/hammerjs": "npm:2.0.17"
     "@formatjs/intl-datetimeformat": "npm:6.12.5"
     "@formatjs/intl-displaynames": "npm:6.6.8"
@@ -8978,7 +8978,7 @@ __metadata:
     "@types/babel__plugin-transform-runtime": "npm:7.9.5"
     "@types/chromecast-caf-receiver": "npm:6.0.17"
     "@types/chromecast-caf-sender": "npm:1.0.10"
-    "@types/color-name": "npm:1.1.4"
+    "@types/color-name": "npm:2.0.0"
     "@types/glob": "npm:8.1.0"
     "@types/html-minifier-terser": "npm:7.0.2"
     "@types/js-yaml": "npm:4.0.9"
@@ -8995,8 +8995,8 @@ __metadata:
     "@types/webspeechapi": "npm:0.0.29"
     "@typescript-eslint/eslint-plugin": "npm:7.18.0"
     "@typescript-eslint/parser": "npm:7.18.0"
-    "@vaadin/combo-box": "npm:24.4.9"
-    "@vaadin/vaadin-themable-mixin": "npm:24.4.9"
+    "@vaadin/combo-box": "npm:24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:24.4.10"
     "@vibrant/color": "npm:3.2.1-alpha.1"
     "@vibrant/core": "npm:3.2.1-alpha.1"
     "@vibrant/quantizer-mmcq": "npm:3.2.1-alpha.1"