20231130.0 (#18843)

package.json

@@ -27,13 +27,13 @@
   "dependencies": {
     "@babel/runtime": "7.23.4",
     "@braintree/sanitize-url": "6.0.4",
-    "@codemirror/autocomplete": "6.11.0",
+    "@codemirror/autocomplete": "6.11.1",
-    "@codemirror/commands": "6.3.0",
+    "@codemirror/commands": "6.3.1",
-    "@codemirror/language": "6.9.2",
+    "@codemirror/language": "6.9.3",
     "@codemirror/legacy-modes": "6.3.3",
-    "@codemirror/search": "6.5.4",
+    "@codemirror/search": "6.5.5",
-    "@codemirror/state": "6.3.1",
+    "@codemirror/state": "6.3.2",
-    "@codemirror/view": "6.22.0",
+    "@codemirror/view": "6.22.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.0",
     "@formatjs/intl-displaynames": "6.6.4",
@@ -91,8 +91,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.2.3",
+    "@vaadin/combo-box": "24.2.4",
-    "@vaadin/vaadin-themable-mixin": "24.2.3",
+    "@vaadin/vaadin-themable-mixin": "24.2.4",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",

pyproject.toml

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

src/auth/ha-auth-flow.ts

@@ -21,6 +21,7 @@ import {
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
+import { fireEvent } from "../common/dom/fire_event";
 
 type State = "loading" | "error" | "step";
 
@@ -85,10 +86,6 @@ export class HaAuthFlow extends LitElement {
   protected render() {
     return html`
       <style>
-        ha-auth-flow .action {
-          margin: 24px 0 8px;
-          text-align: center;
-        }
         ha-auth-flow .store-token {
           margin-left: -16px;
         }
@@ -158,14 +155,25 @@ export class HaAuthFlow extends LitElement {
   }
 
   private _renderForm() {
+    const showBack =
+      this.step?.type === "form" &&
+      this.authProvider?.users &&
+      !["select_mfa_module", "mfa"].includes(this.step.step_id);
+
     switch (this._state) {
       case "step":
         if (this.step == null) {
           return nothing;
         }
+
         return html`
           ${this._renderStep(this.step)}
-          <div class="action">
+          <div class="action ${showBack ? "space-between" : ""}">
+            ${showBack
+              ? html`<mwc-button @click=${this._localFlow}>
+                  ${this.localize("ui.panel.page-authorize.form.previous")}
+                </mwc-button>`
+              : nothing}
             <mwc-button
               raised
               @click=${this._handleSubmit}
@@ -294,7 +302,8 @@ export class HaAuthFlow extends LitElement {
           redirectWithAuthCode(
             this.redirectUri!,
             data.result,
-            this.oauth2State
+            this.oauth2State,
+            this.storeToken
           );
           return;
         }
@@ -375,7 +384,8 @@ export class HaAuthFlow extends LitElement {
         redirectWithAuthCode(
           this.redirectUri!,
           newStep.result,
-          this.oauth2State
+          this.oauth2State,
+          this.storeToken
         );
         return;
       }
@@ -390,6 +400,10 @@ export class HaAuthFlow extends LitElement {
       this._submitting = false;
     }
   }
+
+  private _localFlow() {
+    fireEvent(this, "default-login-flow", { value: false });
+  }
 }
 
 declare global {

src/auth/ha-authorize.ts

@@ -116,6 +116,16 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           position: relative;
           padding: 16px;
         }
+        .action {
+          margin: 16px 0 8px;
+          display: flex;
+          width: 100%;
+          max-width: 336px;
+          justify-content: center;
+        }
+        .space-between {
+          justify-content: space-between;
+        }
         .footer {
           padding-top: 8px;
           display: flex;
@@ -164,7 +174,10 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           </ha-alert>`
         : nothing}
 
-      <div class="card-content">
+      <div
+        class="card-content"
+        @default-login-flow=${this._handleDefaultLoginFlow}
+      >
         ${!this._authProvider
           ? html`<p>
               ${this.localize("ui.panel.page-authorize.initializing")}
@@ -181,7 +194,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
                 .authProviders=${this._authProviders}
                 .localize=${this.localize}
                 .ownInstance=${this._ownInstance}
-                @default-login-flow=${this._handleDefaultLoginFlow}
               ></ha-local-auth-flow>`
             : html`<ha-auth-flow
                   .clientId=${this.clientId}
@@ -315,8 +327,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  private _handleDefaultLoginFlow() {
+  private _handleDefaultLoginFlow(ev) {
-    this._forceDefaultLogin = true;
+    this._forceDefaultLogin = ev.detail.value;
   }
 
   private async _handleAuthProviderPick(ev) {

src/auth/ha-local-auth-flow.ts

@@ -17,7 +17,7 @@ import {
   submitLoginFlow,
 } from "../data/auth";
 import { DataEntryFlowStep } from "../data/data_entry_flow";
-import { listPersons } from "../data/person";
+import { BasePerson, listUserPersons } from "../data/person";
 import "./ha-auth-textfield";
 import type { HaAuthTextField } from "./ha-auth-textfield";
 
@@ -43,7 +43,7 @@ export class HaLocalAuthFlow extends LitElement {
 
   @state() private _submitting = false;
 
-  @state() private _persons?: Promise<Record<string, string>>;
+  @state() private _persons?: Record<string, BasePerson>;
 
   @state() private _selectedUser?: string;
 
@@ -65,7 +65,9 @@ export class HaLocalAuthFlow extends LitElement {
     if (!this.authProvider?.users || !this._persons) {
       return nothing;
     }
-    const userIds = Object.keys(this.authProvider.users);
+    const userIds = Object.keys(this.authProvider.users).filter(
+      (userId) => userId in this._persons!
+    );
     return html`
       <style>
         .content {
@@ -146,16 +148,6 @@ export class HaLocalAuthFlow extends LitElement {
           height: 120px;
           --person-badge-font-size: 3em;
         }
-        .action {
-          margin: 16px 0 8px;
-          display: flex;
-          width: 100%;
-          max-width: 336px;
-          justify-content: center;
-        }
-        .space-between {
-          justify-content: space-between;
-        }
         ha-list-item {
           margin-top: 16px;
         }
@@ -198,9 +190,9 @@ export class HaLocalAuthFlow extends LitElement {
         : this._selectedUser
           ? html`<div class="login-form"><div class="person">
               <ha-person-badge
-                .person=${this._persons![this._selectedUser]}
+                .person=${this._persons[this._selectedUser]}
               ></ha-person-badge>
-              <p>${this._persons![this._selectedUser].name}</p>
+              <p>${this._persons[this._selectedUser].name}</p>
             </div>
             <form>
               <input
@@ -273,6 +265,7 @@ export class HaLocalAuthFlow extends LitElement {
               >
                 ${userIds.map((userId) => {
                   const person = this._persons![userId];
+
                   return html`<div
                     class="person"
                     .userId=${userId}
@@ -316,7 +309,12 @@ export class HaLocalAuthFlow extends LitElement {
   }
 
   private async _load() {
-    this._persons = await (await listPersons()).json();
+    try {
+      this._persons = await listUserPersons();
+    } catch {
+      this._persons = {};
+      this._error = "Failed to fetch persons";
+    }
   }
 
   private _restart() {
@@ -353,7 +351,8 @@ export class HaLocalAuthFlow extends LitElement {
           redirectWithAuthCode(
             this.redirectUri!,
             data.result,
-            this.oauth2State
+            this.oauth2State,
+            true
           );
           return;
         }
@@ -374,7 +373,8 @@ export class HaLocalAuthFlow extends LitElement {
               redirectWithAuthCode(
                 this.redirectUri!,
                 result.result,
-                this.oauth2State
+                this.oauth2State,
+                true
               );
               return;
             }
@@ -433,7 +433,8 @@ export class HaLocalAuthFlow extends LitElement {
         redirectWithAuthCode(
           this.redirectUri!,
           newStep.result,
-          this.oauth2State
+          this.oauth2State,
+          true
         );
         return;
       }
@@ -462,7 +463,7 @@ export class HaLocalAuthFlow extends LitElement {
   }
 
   private _otherLogin() {
-    fireEvent(this, "default-login-flow");
+    fireEvent(this, "default-login-flow", { value: true });
   }
 }
 
@@ -471,6 +472,6 @@ declare global {
     "ha-local-auth-flow": HaLocalAuthFlow;
   }
   interface HASSDomEvents {
-    "default-login-flow": undefined;
+    "default-login-flow": { value: boolean };
   }
 }

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

@@ -303,6 +303,11 @@ export class StateHistoryCharts extends LitElement {
         padding-right: 1px;
       }
 
+      .entry-container:not(:first-child) {
+        border-top: 2px solid var(--divider-color);
+        margin-top: 16px;
+      }
+
       .container,
       lit-virtualizer {
         height: 100%;

src/components/ha-faded.ts

@@ -17,7 +17,7 @@ class HaFaded extends LitElement {
         @click=${this._showContent}
       >
         <slot
-          @iron-resize=${
+          @content-resize=${
             // ha-markdown-element fire this when render is complete
             this._setShowContent
           }
@@ -79,4 +79,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-faded": HaFaded;
   }
+  interface HASSDomEvents {
+    "content-resize": undefined;
+  }
 }

src/components/ha-markdown-element.ts

@@ -99,7 +99,7 @@ class HaMarkdownElement extends ReactiveElement {
     }
   }
 
-  private _resize = () => fireEvent(this, "iron-resize");
+  private _resize = () => fireEvent(this, "content-resize");
 }
 
 declare global {

src/components/map/ha-map.ts

@@ -136,7 +136,7 @@ export class HaMap extends ReactiveElement {
       autoFitRequired = true;
     }
 
-    if (this.autoFit && autoFitRequired) {
+    if (changedProps.has("_loaded") || (this.autoFit && autoFitRequired)) {
       this.fitMap();
     }
 
@@ -155,10 +155,11 @@ export class HaMap extends ReactiveElement {
   }
 
   private _updateMapStyle(): void {
-    const darkMode = this.darkMode ?? this.hass.themes.darkMode;
+    const darkMode = this.darkMode ?? this.hass.themes.darkMode ?? false;
+    const forcedDark = this.darkMode ?? false;
     const map = this.shadowRoot!.getElementById("map");
     map!.classList.toggle("dark", darkMode);
-    map!.classList.toggle("forced-dark", this.darkMode);
+    map!.classList.toggle("forced-dark", forcedDark);
   }
 
   private async _loadMap(): Promise<void> {

src/components/user/ha-person-badge.ts

@@ -2,12 +2,12 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { Person } from "../../data/person";
+import { BasePerson } from "../../data/person";
 import { computeUserInitials } from "../../data/user";
 
 @customElement("ha-person-badge")
 class PersonBadge extends LitElement {
-  @property({ attribute: false }) public person?: Person;
+  @property({ attribute: false }) public person?: BasePerson;
 
   protected render() {
     if (!this.person) {

src/data/area_registry.ts

@@ -130,8 +130,8 @@ export const areaCompare =
     const indexA = order ? order.indexOf(a) : -1;
     const indexB = order ? order.indexOf(b) : 1;
     if (indexA === -1 && indexB === -1) {
-      const nameA = entries?.[a].name ?? a;
+      const nameA = entries?.[a]?.name ?? a;
-      const nameB = entries?.[b].name ?? b;
+      const nameB = entries?.[b]?.name ?? b;
       return stringCompare(nameA, nameB);
     }
     if (indexA === -1) {

src/data/auth.ts

@@ -80,7 +80,8 @@ export const deleteLoginFlow = (flow_id) =>
 export const redirectWithAuthCode = (
   url: string,
   authCode: string,
-  oauth2State: string | undefined
+  oauth2State: string | undefined,
+  storeToken: boolean
 ) => {
   // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
   if (!url.includes("?")) {
@@ -94,7 +95,9 @@ export const redirectWithAuthCode = (
   if (oauth2State) {
     url += `&state=${encodeURIComponent(oauth2State)}`;
   }
-  url += `&storeToken=true`;
+  if (storeToken) {
+    url += `&storeToken=true`;
+  }
 
   document.location.assign(url);
 };

src/data/history.ts

@@ -49,6 +49,7 @@ export interface LineChartEntity {
 
 export interface LineChartUnit {
   unit: string;
+  device_class?: string;
   identifier: string;
   data: LineChartEntity[];
 }
@@ -323,7 +324,8 @@ const processTimelineEntity = (
 };
 
 const processLineChartEntities = (
-  unit,
+  unit: string,
+  device_class: string | undefined,
   entities: HistoryStates,
   hassEntities: HassEntities
 ): LineChartUnit => {
@@ -391,6 +393,7 @@ const processLineChartEntities = (
 
   return {
     unit,
+    device_class,
     identifier: Object.keys(entities).join(""),
     data,
   };
@@ -466,6 +469,12 @@ export const computeHistory = (
       }[domain];
     }
 
+    const deviceClass: string | undefined = (
+      currentState?.attributes || numericStateFromHistory?.a
+    )?.device_class;
+
+    const key = computeGroupKey(unit, deviceClass);
+
     if (!unit) {
       timelineDevices.push(
         processTimelineEntity(
@@ -478,19 +487,32 @@ export const computeHistory = (
           currentState
         )
       );
-    } else if (unit in lineChartDevices && entityId in lineChartDevices[unit]) {
+    } else if (key in lineChartDevices && entityId in lineChartDevices[key]) {
-      lineChartDevices[unit][entityId].push(...stateInfo);
+      lineChartDevices[key][entityId].push(...stateInfo);
     } else {
-      if (!(unit in lineChartDevices)) {
+      if (!(key in lineChartDevices)) {
-        lineChartDevices[unit] = {};
+        lineChartDevices[key] = {};
       }
-      lineChartDevices[unit][entityId] = stateInfo;
+      lineChartDevices[key][entityId] = stateInfo;
     }
   });
 
-  const unitStates = Object.keys(lineChartDevices).map((unit) =>
+  const unitStates = Object.keys(lineChartDevices).map((key) => {
-    processLineChartEntities(unit, lineChartDevices[unit], hass.states)
+    const splitKey = key.split("_");
-  );
+    const unit = splitKey[0];
+    const deviceClass = splitKey[1] || undefined;
+    return processLineChartEntities(
+      unit,
+      deviceClass,
+      lineChartDevices[key],
+      hass.states
+    );
+  });
 
   return { line: unitStates, timeline: timelineDevices };
 };
+
+export const computeGroupKey = (
+  unit: string | undefined,
+  device_class: string | undefined
+) => `${unit}_${device_class || ""}`;

src/data/person.ts

@@ -1,11 +1,14 @@
 import { HomeAssistant } from "../types";
 
-export interface Person {
+export interface BasePerson {
-  id: string;
   name: string;
+  picture?: string;
+}
+
+export interface Person extends BasePerson {
+  id: string;
   user_id?: string;
   device_trackers?: string[];
-  picture?: string;
 }
 
 export interface PersonMutableParams {
@@ -21,9 +24,14 @@ export const fetchPersons = (hass: HomeAssistant) =>
     config: Person[];
   }>({ type: "person/list" });
 
-export const listPersons = () =>
+export const listUserPersons = (): Promise<Record<string, BasePerson>> =>
   fetch("/api/person/list", {
     credentials: "same-origin",
+  }).then((resp) => {
+    if (resp.ok) {
+      return resp.json();
+    }
+    throw new Error(resp.statusText);
   });
 
 export const createPerson = (

src/dialogs/area-filter/area-filter-dialog.ts

@@ -73,6 +73,7 @@ export class DialogAreaFilter
       animation: 150,
       fallbackClass: "sortable-fallback",
       handle: ".handle",
+      draggable: ".draggable",
       onChoose: (evt: SortableEvent) => {
         (evt.item as any).placeholder =
           document.createComment("sort-placeholder");
@@ -128,16 +129,21 @@ export class DialogAreaFilter
               const name = this.hass!.areas[area]?.name || area;
               return html`
                 <ha-list-item
-                  class=${classMap({ hidden: !isVisible })}
+                  class=${classMap({
+                    hidden: !isVisible,
+                    draggable: isVisible,
+                  })}
                   hasMeta
                   graphic="icon"
                   noninteractive
                 >
-                  <ha-svg-icon
+                  ${isVisible
-                    class="handle"
+                    ? html`<ha-svg-icon
-                    .path=${mdiDrag}
+                        class="handle"
-                    slot="graphic"
+                        .path=${mdiDrag}
-                  ></ha-svg-icon>
+                        slot="graphic"
+                      ></ha-svg-icon>`
+                    : nothing}
                   ${name}
                   <ha-icon-button
                     tabindex="0"
@@ -177,6 +183,11 @@ export class DialogAreaFilter
       hidden.push(area);
     }
     this._hidden = hidden;
+    const nonHiddenAreas = this._areas.filter(
+      (ar) => !this._hidden.includes(ar)
+    );
+    const hiddenAreas = this._areas.filter((ar) => this._hidden.includes(ar));
+    this._areas = [...nonHiddenAreas, ...hiddenAreas];
   }
 
   static get styles(): CSSResultGroup {
@@ -193,7 +204,7 @@ export class DialogAreaFilter
           overflow: visible;
         }
         .hidden {
-          opacity: 0.3;
+          color: var(--disabled-text-color);
         }
         .handle {
           cursor: grab;

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

@@ -6,16 +6,8 @@ import {
   mdiTuneVariant,
   mdiWaterPercent,
 } from "@mdi/js";
-import {
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  css,
-  html,
-  nothing,
-} from "lit";
 import { property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
@@ -50,8 +42,6 @@ class MoreInfoClimate extends LitElement {
 
   @state() private _mainControl: MainControl = "temperature";
 
-  private _resizeDebounce?: number;
-
   protected render() {
     if (!this.stateObj) {
       return nothing;
@@ -293,21 +283,6 @@ class MoreInfoClimate extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("stateObj") || !this.stateObj) {
-      return;
-    }
-
-    if (this._resizeDebounce) {
-      clearTimeout(this._resizeDebounce);
-    }
-    this._resizeDebounce = window.setTimeout(() => {
-      fireEvent(this, "iron-resize");
-      this._resizeDebounce = undefined;
-    }, 500);
-  }
-
   private _setMainControl(ev: any) {
     ev.stopPropagation();
     this._mainControl = ev.currentTarget.control;

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

@@ -8,7 +8,6 @@ import {
   nothing,
 } from "lit";
 import { property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
@@ -38,8 +37,6 @@ class MoreInfoHumidifier extends LitElement {
     }
   }
 
-  private _resizeDebounce?: number;
-
   protected render() {
     if (!this.stateObj) {
       return nothing;
@@ -135,21 +132,6 @@ class MoreInfoHumidifier extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("stateObj") || !this.stateObj) {
-      return;
-    }
-
-    if (this._resizeDebounce) {
-      clearTimeout(this._resizeDebounce);
-    }
-    this._resizeDebounce = window.setTimeout(() => {
-      fireEvent(this, "iron-resize");
-      this._resizeDebounce = undefined;
-    }, 500);
-  }
-
   private _handleStateChanged(ev) {
     const newVal = ev.target.value || null;
     this._callServiceHelper(

src/html/index.html.template

@@ -39,7 +39,7 @@
         align-items: center;
       }
       #ha-launch-screen svg {
-        width: 170px;
+        width: 112px;
         flex-shrink: 0;
       }
       #ha-launch-screen .ha-launch-screen-spacer {

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

@@ -226,10 +226,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         };
       });
 
-      if (!Object.keys(configEntriesCopy).length) {
-        return states;
-      }
-
       const entries = Object.values(configEntriesCopy).map((configEntry) => ({
         id: configEntry.entry_id,
         entity_id: "",

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

@@ -360,17 +360,16 @@ class HaPanelDevState extends LitElement {
   }
 
   private _updateEntity() {
-    if (!this._entityId) {
+    const entityState = this._entityId
+      ? this.hass.states[this._entityId]
+      : undefined;
+    if (!entityState) {
       this._entity = undefined;
       this._state = "";
       this._stateAttributes = {};
       this._updateEditor();
       return;
     }
-    const entityState = this.hass.states[this._entityId];
-    if (!entityState) {
-      return;
-    }
     this._entity = entityState;
     this._state = entityState.state;
     this._stateAttributes = entityState.attributes;

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

@@ -46,6 +46,7 @@ import {
   EntityHistoryState,
   LineChartUnit,
   LineChartEntity,
+  computeGroupKey,
 } from "../../data/history";
 import { fetchStatistics, Statistics } from "../../data/recorder";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
@@ -221,14 +222,20 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
   ): HistoryResult {
     const result: HistoryResult = { ...historyResult, line: [] };
 
-    const units = new Set(
+    const keys = new Set(
       historyResult.line
-        .map((i) => i.unit)
+        .map((i) => computeGroupKey(i.unit, i.device_class))
-        .concat(ltsResult.line.map((i) => i.unit))
+        .concat(
+          ltsResult.line.map((i) => computeGroupKey(i.unit, i.device_class))
+        )
     );
-    units.forEach((unit) => {
+    keys.forEach((key) => {
-      const historyItem = historyResult.line.find((i) => i.unit === unit);
+      const historyItem = historyResult.line.find(
-      const ltsItem = ltsResult.line.find((i) => i.unit === unit);
+        (i) => computeGroupKey(i.unit, i.device_class) === key
+      );
+      const ltsItem = ltsResult.line.find(
+        (i) => computeGroupKey(i.unit, i.device_class) === key
+      );
       if (historyItem && ltsItem) {
         const newLineItem: LineChartUnit = { ...historyItem, data: [] };
         const entities = new Set(

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

@@ -5,41 +5,46 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { isUnavailableState } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { NumberCardFeatureConfig } from "./types";
+import { NumericInputCardFeatureConfig } from "./types";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-number-buttons";
 import "../../../components/ha-control-slider";
 import "../../../components/ha-icon";
 
-export const supportsNumberCardFeature = (stateObj: HassEntity) => {
+export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "input_number" || domain === "number";
 };
 
-@customElement("hui-number-card-feature")
+@customElement("hui-numeric-input-card-feature")
-class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
+class HuiNumericInputCardFeature
+  extends LitElement
+  implements LovelaceCardFeature
+{
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: NumberCardFeatureConfig;
+  @state() private _config?: NumericInputCardFeatureConfig;
 
   @state() _currentState?: string;
 
-  static getStubConfig(): NumberCardFeatureConfig {
+  static getStubConfig(): NumericInputCardFeatureConfig {
     return {
-      type: "number",
+      type: "numeric-input",
       style: "buttons",
     };
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import("../editor/config-elements/hui-number-card-feature-editor");
+    await import(
-    return document.createElement("hui-number-card-feature-editor");
+      "../editor/config-elements/hui-numeric-input-card-feature-editor"
+    );
+    return document.createElement("hui-numeric-input-card-feature-editor");
   }
 
-  public setConfig(config: NumberCardFeatureConfig): void {
+  public setConfig(config: NumericInputCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -69,7 +74,7 @@ class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsNumberCardFeature(this.stateObj)
+      !supportsNumericInputCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -110,6 +115,10 @@ class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
       }
       ha-control-slider {
         --control-slider-color: var(--feature-color);
+        --control-slider-background: var(--feature-color);
+        --control-slider-background-opacity: 0.2;
+        --control-slider-thickness: 40px;
+        --control-slider-border-radius: 10px;
       }
       .container {
         padding: 0 12px 12px 12px;
@@ -121,6 +130,6 @@ class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-number-card-feature": HuiNumberCardFeature;
+    "hui-numeric-input-card-feature": HuiNumericInputCardFeature;
   }
 }

src/panels/lovelace/card-features/types.ts

@@ -50,8 +50,8 @@ export interface SelectOptionsCardFeatureConfig {
   type: "select-options";
 }
 
-export interface NumberCardFeatureConfig {
+export interface NumericInputCardFeatureConfig {
-  type: "number";
+  type: "numeric-input";
   style?: "buttons" | "slider";
 }
 
@@ -109,7 +109,7 @@ export type LovelaceCardFeatureConfig =
   | TargetTemperatureCardFeatureConfig
   | WaterHeaterOperationModesCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | NumberCardFeatureConfig;
+  | NumericInputCardFeatureConfig;
 
 export type LovelaceCardFeatureContext = {
   entity_id?: string;

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

@@ -42,6 +42,7 @@ import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
+import { hasAction } from "../common/has-action";
 import "../components/hui-timestamp-display";
 import "../card-features/hui-card-features";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
@@ -362,7 +363,10 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
           <div
             class="background"
             @action=${this._handleAction}
-            .actionHandler=${actionHandler()}
+            .actionHandler=${actionHandler({
+              hasHold: hasAction(this._config!.hold_action),
+              hasDoubleClick: hasAction(this._config!.double_tap_action),
+            })}
             role="button"
             tabindex="0"
             aria-labelledby="info"

src/panels/lovelace/cards/types.ts

@@ -535,6 +535,8 @@ export interface TileCardConfig extends LovelaceCardConfig {
   show_entity_picture?: string;
   vertical?: boolean;
   tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
   icon_tap_action?: ActionConfig;
   features?: LovelaceCardFeatureConfig[];
 }

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -476,7 +476,7 @@ export const generateDefaultViewConfig = (
 
   if (areasPrefs?.hidden) {
     for (const area of areasPrefs.hidden) {
-      splittedByAreaDevice.areasWithEntities[area] = [];
+      delete splittedByAreaDevice.areasWithEntities[area];
     }
   }
 

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -3,14 +3,14 @@ import "../card-features/hui-climate-hvac-modes-card-feature";
 import "../card-features/hui-climate-preset-modes-card-feature";
 import "../card-features/hui-cover-open-close-card-feature";
 import "../card-features/hui-cover-position-card-feature";
-import "../card-features/hui-cover-tilt-position-card-feature";
 import "../card-features/hui-cover-tilt-card-feature";
+import "../card-features/hui-cover-tilt-position-card-feature";
 import "../card-features/hui-fan-speed-card-feature";
 import "../card-features/hui-humidifier-modes-card-feature";
 import "../card-features/hui-lawn-mower-commands-card-feature";
 import "../card-features/hui-light-brightness-card-feature";
 import "../card-features/hui-light-color-temp-card-feature";
-import "../card-features/hui-number-card-feature";
+import "../card-features/hui-numeric-input-card-feature";
 import "../card-features/hui-select-options-card-feature";
 import "../card-features/hui-target-temperature-card-feature";
 import "../card-features/hui-vacuum-commands-card-feature";
@@ -34,11 +34,11 @@ const TYPES: Set<LovelaceCardFeatureConfig["type"]> = new Set([
   "lawn-mower-commands",
   "light-brightness",
   "light-color-temp",
+  "numeric-input",
   "select-options",
   "target-temperature",
   "vacuum-commands",
   "water-heater-operation-modes",
-  "number",
 ]);
 
 export const createCardFeatureElement = (config: LovelaceCardFeatureConfig) =>

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

@@ -33,7 +33,7 @@ import { supportsHumidifierModesCardFeature } from "../../card-features/hui-humi
 import { supportsLawnMowerCommandCardFeature } from "../../card-features/hui-lawn-mower-commands-card-feature";
 import { supportsLightBrightnessCardFeature } from "../../card-features/hui-light-brightness-card-feature";
 import { supportsLightColorTempCardFeature } from "../../card-features/hui-light-color-temp-card-feature";
-import { supportsNumberCardFeature } from "../../card-features/hui-number-card-feature";
+import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
@@ -61,7 +61,7 @@ const UI_FEATURE_TYPES = [
   "target-temperature",
   "vacuum-commands",
   "water-heater-operation-modes",
-  "number",
+  "numeric-input",
 ] as const satisfies readonly FeatureType[];
 
 type UiFeatureTypes = (typeof UI_FEATURE_TYPES)[number];
@@ -73,7 +73,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "water-heater-operation-modes",
   "lawn-mower-commands",
   "climate-preset-modes",
-  "number",
+  "numeric-input",
 ]);
 
 const SUPPORTS_FEATURE_TYPES: Record<
@@ -92,7 +92,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "lawn-mower-commands": supportsLawnMowerCommandCardFeature,
   "light-brightness": supportsLightBrightnessCardFeature,
   "light-color-temp": supportsLightColorTempCardFeature,
-  number: supportsNumberCardFeature,
+  "numeric-input": supportsNumericInputCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
   "vacuum-commands": supportsVacuumCommandsCardFeature,
   "water-heater-operation-modes": supportsWaterHeaterOperationModesCardFeature,

src/panels/lovelace/editor/config-elements/hui-numeric-input-card-feature-editor.ts

@@ -6,14 +6,14 @@ import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import {
-  NumberCardFeatureConfig,
+  NumericInputCardFeatureConfig,
   LovelaceCardFeatureContext,
 } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 
-@customElement("hui-number-card-feature-editor")
+@customElement("hui-numeric-input-card-feature-editor")
-export class HuiNumberCardFeatureEditor
+export class HuiNumericInputCardFeatureEditor
   extends LitElement
   implements LovelaceCardFeatureEditor
 {
@@ -21,9 +21,9 @@ export class HuiNumberCardFeatureEditor
 
   @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: NumberCardFeatureConfig;
+  @state() private _config?: NumericInputCardFeatureConfig;
 
-  public setConfig(config: NumberCardFeatureConfig): void {
+  public setConfig(config: NumericInputCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -39,7 +39,7 @@ export class HuiNumberCardFeatureEditor
               options: ["slider", "buttons"].map((mode) => ({
                 value: mode,
                 label: localize(
-                  `ui.panel.lovelace.editor.features.types.number.style_list.${mode}`
+                  `ui.panel.lovelace.editor.features.types.numeric-input.style_list.${mode}`
                 ),
               })),
             },
@@ -53,7 +53,7 @@ export class HuiNumberCardFeatureEditor
       return nothing;
     }
 
-    const data: NumberCardFeatureConfig = {
+    const data: NumericInputCardFeatureConfig = {
       style: "buttons",
       ...this._config,
     };
@@ -79,12 +79,12 @@ export class HuiNumberCardFeatureEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) =>
     this.hass!.localize(
-      `ui.panel.lovelace.editor.features.types.number.${schema.name}`
+      `ui.panel.lovelace.editor.features.types.numeric-input.${schema.name}`
     );
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-number-card-feature-editor": HuiNumberCardFeatureEditor;
+    "hui-numeric-input-card-feature-editor": HuiNumericInputCardFeatureEditor;
   }
 }

src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts

@@ -55,7 +55,6 @@ export class HuiViewVisibilityEditor extends LitElement {
 
     fetchUsers(this.hass).then((users) => {
       this._users = users.filter((user) => !user.system_generated);
-      fireEvent(this, "iron-resize");
     });
   }
 

src/panels/lovelace/hui-root.ts

@@ -655,8 +655,6 @@ class HUIRoot extends LitElement {
       if (!oldLovelace || oldLovelace.editMode !== this.lovelace!.editMode) {
         const views = this.config && this.config.views;
 
-        fireEvent(this, "iron-resize");
-
         // Leave unused entities when leaving edit mode
         if (
           this.lovelace!.mode === "storage" &&
@@ -980,8 +978,6 @@ class HUIRoot extends LitElement {
     }
 
     root.appendChild(view);
-    // Recalculate to see if we need to adjust content area for tab bar
-    fireEvent(this, "iron-resize");
   }
 
   static get styles(): CSSResultGroup {

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

@@ -64,11 +64,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   private _mqlListenerRef?: () => void;
 
-  public constructor() {
-    super();
-    this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     this._initMqls();

src/state/quick-bar-mixin.ts

@@ -64,6 +64,11 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
         return;
       }
 
+      if (e.defaultPrevented) {
+        return;
+      }
+      e.preventDefault();
+
       showQuickBar(this, { commandMode });
     }
 
@@ -75,6 +80,11 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
         return;
       }
 
+      if (e.defaultPrevented) {
+        return;
+      }
+      e.preventDefault();
+
       const targetPath = mainWindow.location.pathname;
       const isHassio = isComponentLoaded(this.hass, "hassio");
       const myParams = new URLSearchParams();

src/translations/en.json

@@ -5292,8 +5292,8 @@
               "select-options": {
                 "label": "Select options"
               },
-              "number": {
+              "numeric-input": {
-                "label": "Number",
+                "label": "Numeric input",
                 "style": "Style",
                 "style_list": {
                   "buttons": "Buttons",

src/types.ts

@@ -49,7 +49,6 @@ declare global {
     };
     change: undefined;
     "hass-logout": undefined;
-    "iron-resize": undefined;
     "config-refresh": undefined;
     "hass-api-called": {
       success: boolean;

yarn.lock

@@ -1458,9 +1458,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/autocomplete@npm:6.11.0":
+"@codemirror/autocomplete@npm:6.11.1":
-  version: 6.11.0
+  version: 6.11.1
-  resolution: "@codemirror/autocomplete@npm:6.11.0"
+  resolution: "@codemirror/autocomplete@npm:6.11.1"
   dependencies:
     "@codemirror/language": "npm:^6.0.0"
     "@codemirror/state": "npm:^6.0.0"
@@ -1471,25 +1471,25 @@ __metadata:
     "@codemirror/state": ^6.0.0
     "@codemirror/view": ^6.0.0
     "@lezer/common": ^1.0.0
-  checksum: 09678373b04de5770802fe0d0be0f7a0858994b344d9de104fb53751a8e6bf57536d8c8be9a28466efd581414420b87584a41e24e31317fa66f4a2451c30a2f7
+  checksum: 5281bec2b77d2cf916f8774e324afb862646050eab929f33780a2a67b9957d02d9abceec5f47b1b5163fedc4d07a62f1ec13fa0e2ad4b022fb75f010362e8f0e
   languageName: node
   linkType: hard
 
-"@codemirror/commands@npm:6.3.0":
+"@codemirror/commands@npm:6.3.1":
-  version: 6.3.0
+  version: 6.3.1
-  resolution: "@codemirror/commands@npm:6.3.0"
+  resolution: "@codemirror/commands@npm:6.3.1"
   dependencies:
     "@codemirror/language": "npm:^6.0.0"
     "@codemirror/state": "npm:^6.2.0"
     "@codemirror/view": "npm:^6.0.0"
     "@lezer/common": "npm:^1.1.0"
-  checksum: 4e35a1bb345fba1338a8cd1a607f44bce72cfec8fffc82c6dac039e5dc3a48ff9d111ca499cd0ea3291a6249124be5a8ca484c8194aea1c69ec47d1bb0b773a2
+  checksum: c4b5637062c86a1c96c8de0edc32148a59058471799ef209b18f6ed57b31ab47300d3db185ab6e375188acb05294d6e6dac6ba4540ee20e8101b77d4739f778c
   languageName: node
   linkType: hard
 
-"@codemirror/language@npm:6.9.2, @codemirror/language@npm:^6.0.0":
+"@codemirror/language@npm:6.9.3, @codemirror/language@npm:^6.0.0":
-  version: 6.9.2
+  version: 6.9.3
-  resolution: "@codemirror/language@npm:6.9.2"
+  resolution: "@codemirror/language@npm:6.9.3"
   dependencies:
     "@codemirror/state": "npm:^6.0.0"
     "@codemirror/view": "npm:^6.0.0"
@@ -1497,7 +1497,7 @@ __metadata:
     "@lezer/highlight": "npm:^1.0.0"
     "@lezer/lr": "npm:^1.0.0"
     style-mod: "npm:^4.0.0"
-  checksum: ab7ea88cf8bcd5a7ba6f3fed2a0396dfb8506691a3f8484a8a27f9814397b1642468e9629fe27213190efa57fc5a1fdb0d294043d81413d7e7f2063017b53dbf
+  checksum: 331230a3876ed469cbf18dc2733040aa42a175b1a038080e4c317cf7f1fd8e929dc6838ba4749ea52992805f20be85878214cab6e0e7c7ab5fda872844611b7a
   languageName: node
   linkType: hard
 
@@ -1510,32 +1510,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/search@npm:6.5.4":
+"@codemirror/search@npm:6.5.5":
-  version: 6.5.4
+  version: 6.5.5
-  resolution: "@codemirror/search@npm:6.5.4"
+  resolution: "@codemirror/search@npm:6.5.5"
   dependencies:
     "@codemirror/state": "npm:^6.0.0"
     "@codemirror/view": "npm:^6.0.0"
     crelt: "npm:^1.0.5"
-  checksum: c852ab7754a98b2470ea79f6f857d3cd85b93cc5eb4505ba3cdbbf00a2b6cba117a81f305817afb2eb565d947c9a7181aa012b4eaad468e194cd82320d08d81d
+  checksum: 61707efa563edaea1d83f0680db63a953f3f1c125e50bd912d84d07129aa5ba1f3a775f62339f7931c01f5afd69db777c0571215bd0aaef51964c37ee932f6df
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:6.3.1, @codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.4, @codemirror/state@npm:^6.2.0":
+"@codemirror/state@npm:6.3.2, @codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.4, @codemirror/state@npm:^6.2.0":
-  version: 6.3.1
+  version: 6.3.2
-  resolution: "@codemirror/state@npm:6.3.1"
+  resolution: "@codemirror/state@npm:6.3.2"
-  checksum: 3760a6ad4a0a73202c7493065fe71be5fc10f018c232763a637de1eb9b5918ef84083aa89a411487f1707ea570f2f8dd6add451abe047a67a552acc5cd914d69
+  checksum: 6f46d7b3bf85d86383b8bc693d424734be247e2a6c22eb8979a1bdcb807895a6c39e81c9da361e10b210716b1a143517fdc6154261e4981118b31ed7ac328d51
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.22.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0":
+"@codemirror/view@npm:6.22.1, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0":
-  version: 6.22.0
+  version: 6.22.1
-  resolution: "@codemirror/view@npm:6.22.0"
+  resolution: "@codemirror/view@npm:6.22.1"
   dependencies:
     "@codemirror/state": "npm:^6.1.4"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: df9a41c13724d55b540d6c84ac81788f0bc03fcbdae6206c7ee80056906a6734413b7a8c500c6c793d9ef527f2ff5f2c7f1eec481de22e6e6139335deb627783
+  checksum: 01688ece35683aaa6999bb0deae31e9f7825336906a1658150fdb6d1b8d060b672845bead9a0416a692c2e60926cdc88f525ed106d9c0284397c47f936cab26e
   languageName: node
   linkType: hard
 
@@ -4723,126 +4723,126 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.2.3":
+"@vaadin/a11y-base@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/a11y-base@npm:24.2.3"
+  resolution: "@vaadin/a11y-base@npm:24.2.4"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
     lit: "npm:^2.0.0"
-  checksum: 1611f94bbbe3ff359e1270b873cdb593ba62b945d373f9a98411d721a3d030ee2a54e077fb4a347ef5b0b1cde894c93a8287b481d2c9357b5d8a05263f3b0dbb
+  checksum: 916f719f547b4eaad38c27849ea0b369e27c15e3d91a3f2aa310b804c89099911b325d333c150bfc8ac3307e759254cb1bbf120210fa420b8db697cfd4ff5091
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.2.3":
+"@vaadin/combo-box@npm:24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/combo-box@npm:24.2.3"
+  resolution: "@vaadin/combo-box@npm:24.2.4"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.2.3"
+    "@vaadin/a11y-base": "npm:~24.2.4"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/field-base": "npm:~24.2.3"
+    "@vaadin/field-base": "npm:~24.2.4"
-    "@vaadin/input-container": "npm:~24.2.3"
+    "@vaadin/input-container": "npm:~24.2.4"
-    "@vaadin/item": "npm:~24.2.3"
+    "@vaadin/item": "npm:~24.2.4"
-    "@vaadin/lit-renderer": "npm:~24.2.3"
+    "@vaadin/lit-renderer": "npm:~24.2.4"
-    "@vaadin/overlay": "npm:~24.2.3"
+    "@vaadin/overlay": "npm:~24.2.4"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-material-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-material-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
-  checksum: aeec6d5450ab626a39c5be1d7117d76f5446601b15731dcb37d53007e033d0966eba17a77e79da13825b1ba4c85345cd2f6c3a7a255fc99a5ffa2e950e3c6d45
+  checksum: a8327d4c774bce0f48ff7bd625ecff13f7d050f6b0e283a811c742e9ca232616b9d356f560c9408bd216c8b13032e0a4dd230c9ee23981c42f4b0aad9321843c
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.2.3":
+"@vaadin/component-base@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/component-base@npm:24.2.3"
+  resolution: "@vaadin/component-base@npm:24.2.4"
   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:^2.0.0"
-  checksum: 31fc786bacc203ad73c41d42ed751e2ee94603b4b75c5015a80925aa0cdd6a6d6484306f5573985ff9e93d8c454b3dd36f4cb8cea2ee19e604ff662885757318
+  checksum: a7b0d70add9290190efdbd4cf0c114d88061848d5ea2aeb3767481d40f38d53c9af9ac831f2c7cb78ec187faefeaa67acf6c420ad87c0ce993f8e68031dcff61
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.2.3":
+"@vaadin/field-base@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/field-base@npm:24.2.3"
+  resolution: "@vaadin/field-base@npm:24.2.4"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.2.3"
+    "@vaadin/a11y-base": "npm:~24.2.4"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
     lit: "npm:^2.0.0"
-  checksum: 965202e508099fc7a0cd90f4c7cf0e759d1082f1bf289c36712414096ad2c402e903c24eaa31c14b5f48b1c6173bd1f4ee38c1d87e1a6c42787493631f4be34a
+  checksum: f23258b1d9de2dbf2bfb4bef62d5504b45a87b854a917525f3f241734ef754e7f15bfc0c0076406434d68a7a53b344c79c78b914b7c3958f682c99c1ede0ed59
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.2.3":
+"@vaadin/icon@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/icon@npm:24.2.3"
+  resolution: "@vaadin/icon@npm:24.2.4"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
     lit: "npm:^2.0.0"
-  checksum: 21ad0a359fc50a07a330733a4417bbc13029da54da082dd7cef5154a46cca0e9066b1cbbc807346453bf1c6e4099374bca6eb524e205a23fdff1873468a3d895
+  checksum: 3cd963450c3516457f44ba77166aa7f94d35fdb3803671bfad02799485ec09dce15820bf1b48c20e7860f61d61fc1355c5bc4e7a35a2856cf5d13a6f2426e20b
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.2.3":
+"@vaadin/input-container@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/input-container@npm:24.2.3"
+  resolution: "@vaadin/input-container@npm:24.2.4"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-material-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-material-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
-  checksum: 6ea71beca5d1d90d9401573b7b5da76664573a24e0b3be9d3fb655be4a7ba6bab46a4ac0df44c33ae67723008cf413643f2f591693bfde9373ef1c2b8058adeb
+  checksum: 5d9fb325157fb694bd519865c4ff297139fcc68973f78ca40755ea471ff26641372cbabf92c7884d16c486fec2f5e2dc5f15ed8f065d214e115c4aeff6fb6627
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.2.3":
+"@vaadin/item@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/item@npm:24.2.3"
+  resolution: "@vaadin/item@npm:24.2.4"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.2.3"
+    "@vaadin/a11y-base": "npm:~24.2.4"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-material-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-material-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
-  checksum: 985805df2ab6177f646f453ee226575977dad407aa9bdb11c74fdacb439fa62b6851f52676b3eead5048d44d417aaa39e379e80deacbc19c0b3e831199383a3b
+  checksum: 4ec5f78083f7811b26345bb760c2c6835e7ec18c33a78e9532f4aae7b913f319f984b91500c23365d611a146559b70ffcb72a94b504aef079583bebe05ae6558
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.2.3":
+"@vaadin/lit-renderer@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/lit-renderer@npm:24.2.3"
+  resolution: "@vaadin/lit-renderer@npm:24.2.4"
   dependencies:
     lit: "npm:^2.0.0"
-  checksum: f8700d2986e2a9f818f6bd89789cad47f7a32a53bf4fb185996f072891a8777dab59319e17c0cac55d63dbe235be618a9fcd852679c48049220f65059df67ab8
+  checksum: 85173b8b0e35cfa4665fe9d772fe88a11d3f87a6985a3c8bfb208e64da841d93868e718ac68ab47780a2d53670b1ed72e38c83890dc2039a663a975767031e45
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.2.3":
+"@vaadin/overlay@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/overlay@npm:24.2.3"
+  resolution: "@vaadin/overlay@npm:24.2.4"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.2.3"
+    "@vaadin/a11y-base": "npm:~24.2.4"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-material-styles": "npm:~24.2.3"
+    "@vaadin/vaadin-material-styles": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
-  checksum: 514af25a6f83aa314831fd9c1661eade7487ec601bc070900e74bf9dcafcfbe103740dcb4fa870227004d44e50264d926d560f82f4af11d648798a7a17b1e001
+  checksum: b89b4594eea00bbfa58feaea71f03e700c16fd293767450bcccec8259bb206987190c8e36611a437a1f0b131043ff419d57791a6fd60b485352fe5d721c0444d
   languageName: node
   linkType: hard
 
@@ -4853,36 +4853,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.2.3":
+"@vaadin/vaadin-lumo-styles@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.2.3"
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.2.4"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/icon": "npm:~24.2.3"
+    "@vaadin/icon": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
-  checksum: 9c7137aa754a1903a9f430c67eef5988aa15372067ab0e37d0e06f21d3e7e1c49bfc805e47031692218de6e231134b1495a5ce9fd878d63a82716a8463b5f247
+  checksum: b8cae5be9744ab69cbc11d98e17c20d3af6ceb28b5347bb1b68dd9d82c1aa492b924da602ade88a7d86d3c701fe034b2d952c0836ff94bada30d9e4b61b6e104
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.2.3":
+"@vaadin/vaadin-material-styles@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/vaadin-material-styles@npm:24.2.3"
+  resolution: "@vaadin/vaadin-material-styles@npm:24.2.4"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.2.3"
+    "@vaadin/component-base": "npm:~24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.2.4"
-  checksum: d66c58c2d48ea1beec77ff07354fc133138a595ef4d047940d94f4cdefed24fc42eb08616546518df0467f499f2e84fdcfbc4f181a13f32da4e5dc78c334bfb3
+  checksum: b0cbbd1706961756a92da68caf28f1b05c3a85e5bf66672a442b047c13e7342b101ed06fb9bdae30a22c31bc081b3b0d787c557f400781d6c18c8f4b2ea7bf8e
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.2.3, @vaadin/vaadin-themable-mixin@npm:~24.2.3":
+"@vaadin/vaadin-themable-mixin@npm:24.2.4, @vaadin/vaadin-themable-mixin@npm:~24.2.4":
-  version: 24.2.3
+  version: 24.2.4
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.2.3"
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.2.4"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^2.0.0"
-  checksum: 56d2528e8b39705fa059bbb2b8ed4b127acfae5bd1dd017393e990883f45b5e6e1aeb16f4260c26c88d1350ff218221a07479816ac1790dea0d5ddcd427c1fbe
+  checksum: b7737be6bd1b08ed534209eae5899c723642284e0fe34147b77c409a53294b70df9ebd96a1b850cd91934ee19c9300b36eb80b4b99aeb0dda27e7b93f355faa5
   languageName: node
   linkType: hard
 
@@ -9564,13 +9564,13 @@ __metadata:
     "@babel/runtime": "npm:7.23.4"
     "@braintree/sanitize-url": "npm:6.0.4"
     "@bundle-stats/plugin-webpack-filter": "npm:4.8.3"
-    "@codemirror/autocomplete": "npm:6.11.0"
+    "@codemirror/autocomplete": "npm:6.11.1"
-    "@codemirror/commands": "npm:6.3.0"
+    "@codemirror/commands": "npm:6.3.1"
-    "@codemirror/language": "npm:6.9.2"
+    "@codemirror/language": "npm:6.9.3"
     "@codemirror/legacy-modes": "npm:6.3.3"
-    "@codemirror/search": "npm:6.5.4"
+    "@codemirror/search": "npm:6.5.5"
-    "@codemirror/state": "npm:6.3.1"
+    "@codemirror/state": "npm:6.3.2"
-    "@codemirror/view": "npm:6.22.0"
+    "@codemirror/view": "npm:6.22.1"
     "@egjs/hammerjs": "npm:2.0.17"
     "@formatjs/intl-datetimeformat": "npm:6.12.0"
     "@formatjs/intl-displaynames": "npm:6.6.4"
@@ -9657,8 +9657,8 @@ __metadata:
     "@types/webspeechapi": "npm:0.0.29"
     "@typescript-eslint/eslint-plugin": "npm:6.12.0"
     "@typescript-eslint/parser": "npm:6.12.0"
-    "@vaadin/combo-box": "npm:24.2.3"
+    "@vaadin/combo-box": "npm:24.2.4"
-    "@vaadin/vaadin-themable-mixin": "npm:24.2.3"
+    "@vaadin/vaadin-themable-mixin": "npm:24.2.4"
     "@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"