After rebase clean

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

build-scripts/gulp/compress.js

@@ -15,23 +15,29 @@ const brotliOptions = {
 };
 const zopfliOptions = { threshold: 150 };
 
-const compressDistBrotli = (rootDir, modernDir) =>
+const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
   gulp
-    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
-      base: rootDir,
-    })
+    .src(
+      [
+        `${modernDir}/**/${filesGlob}`,
+        compressServiceWorker ? `${rootDir}/sw-modern.js` : undefined,
+      ].filter(Boolean),
+      {
+        base: rootDir,
+      }
+    )
     .pipe(brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-const compressDistZopfli = (rootDir, modernDir) =>
+const compressDistZopfli = (rootDir, modernDir, compressModern = false) =>
   gulp
     .src(
       [
         `${rootDir}/**/${filesGlob}`,
-        `!${modernDir}/**/${filesGlob}`,
+        compressModern ? undefined : `!${modernDir}/**/${filesGlob}`,
         `!${rootDir}/{sw-modern,service_worker}.js`,
         `${rootDir}/{authorize,onboarding}.html`,
-      ],
+      ].filter(Boolean),
       { base: rootDir }
     )
     .pipe(zopfli(zopfliOptions))
@@ -40,12 +46,20 @@ const compressDistZopfli = (rootDir, modernDir) =>
 const compressAppBrotli = () =>
   compressDistBrotli(paths.app_output_root, paths.app_output_latest);
 const compressHassioBrotli = () =>
-  compressDistBrotli(paths.hassio_output_root, paths.hassio_output_latest);
+  compressDistBrotli(
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    false
+  );
 
 const compressAppZopfli = () =>
   compressDistZopfli(paths.app_output_root, paths.app_output_latest);
 const compressHassioZopfli = () =>
-  compressDistZopfli(paths.hassio_output_root, paths.hassio_output_latest);
+  compressDistZopfli(
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    true
+  );
 
 gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
 gulp.task(

package.json

@@ -25,10 +25,10 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.25.4",
+    "@babel/runtime": "7.25.6",
     "@braintree/sanitize-url": "7.1.0",
     "@codemirror/autocomplete": "6.18.0",
-    "@codemirror/commands": "6.6.0",
+    "@codemirror/commands": "6.6.1",
     "@codemirror/language": "6.10.2",
     "@codemirror/legacy-modes": "6.4.1",
     "@codemirror/search": "6.5.6",
@@ -88,8 +88,8 @@
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.4.6",
-    "@vaadin/vaadin-themable-mixin": "24.4.6",
+    "@vaadin/combo-box": "24.4.7",
+    "@vaadin/vaadin-themable-mixin": "24.4.7",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -216,7 +216,7 @@
     "husky": "9.1.5",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.2.9",
+    "lint-staged": "15.2.10",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",

pyproject.toml

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

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

@@ -25,7 +25,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
-import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import { HomeAssistant } from "../../types";
@@ -35,6 +34,7 @@ import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
 import { LocalizeFunc } from "../../common/translations/localize";
+import { nextRender } from "../../common/util/render-status";
 
 export interface RowClickedEvent {
   id: string;
@@ -169,8 +169,6 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  @state() private _items: DataTableRowData[] = [];
-
   @state() private _collapsedGroups: string[] = [];
 
   private _checkableRowsCount?: number;
@@ -179,7 +177,9 @@ export class HaDataTable extends LitElement {
 
   private _sortColumns: SortableColumnContainer = {};
 
-  private curRequest = 0;
+  private _curRequest = 0;
+
+  private _lastUpdate = 0;
 
   // @ts-ignore
   @restoreScroll(".scroller") private _savedScrollPos?: number;
@@ -206,9 +206,9 @@ export class HaDataTable extends LitElement {
 
   public connectedCallback() {
     super.connectedCallback();
-    if (this._items.length) {
+    if (this._filteredData.length) {
       // Force update of location of rows
-      this._items = [...this._items];
+      this._filteredData = [...this._filteredData];
     }
   }
 
@@ -291,16 +291,13 @@ export class HaDataTable extends LitElement {
       properties.has("columns") ||
       properties.has("_filter") ||
       properties.has("sortColumn") ||
-      properties.has("sortDirection") ||
-      properties.has("groupColumn") ||
-      properties.has("groupOrder") ||
-      properties.has("_collapsedGroups")
+      properties.has("sortDirection")
     ) {
       this._sortFilterData();
     }
 
     if (properties.has("selectable") || properties.has("hiddenColumns")) {
-      this._items = [...this._items];
+      this._filteredData = [...this._filteredData];
     }
   }
 
@@ -467,7 +464,15 @@ export class HaDataTable extends LitElement {
                   scroller
                   class="mdc-data-table__content scroller ha-scrollbar"
                   @scroll=${this._saveScrollPos}
-                  .items=${this._items}
+                  .items=${this._groupData(
+                    this._filteredData,
+                    localize,
+                    this.appendRow,
+                    this.hasFab,
+                    this.groupColumn,
+                    this.groupOrder,
+                    this._collapsedGroups
+                  )}
                   .keyFunction=${this._keyFunction}
                   .renderItem=${renderRow}
                 ></lit-virtualizer>
@@ -602,8 +607,13 @@ export class HaDataTable extends LitElement {
 
   private async _sortFilterData() {
     const startTime = new Date().getTime();
-    this.curRequest++;
-    const curRequest = this.curRequest;
+    const timeBetweenUpdate = startTime - this._lastUpdate;
+    const timeBetweenRequest = startTime - this._curRequest;
+    this._curRequest = startTime;
+
+    const forceUpdate =
+      !this._lastUpdate ||
+      (timeBetweenUpdate > 500 && timeBetweenRequest < 500);
 
     let filteredData = this.data;
     if (this._filter) {
@@ -614,6 +624,10 @@ export class HaDataTable extends LitElement {
       );
     }
 
+    if (!forceUpdate && this._curRequest !== startTime) {
+      return;
+    }
+
     const prom = this.sortColumn
       ? sortData(
           filteredData,
@@ -634,91 +648,103 @@ export class HaDataTable extends LitElement {
         setTimeout(resolve, 100 - elapsed);
       });
     }
-    if (this.curRequest !== curRequest) {
+
+    if (!forceUpdate && this._curRequest !== startTime) {
       return;
     }
 
-    const localize = this.localizeFunc || this.hass.localize;
-
-    if (this.appendRow || this.hasFab || this.groupColumn) {
-      let items = [...data];
-
-      if (this.groupColumn) {
-        const grouped = groupBy(items, (item) => item[this.groupColumn!]);
-        if (grouped.undefined) {
-          // make sure ungrouped items are at the bottom
-          grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
-          delete grouped.undefined;
-        }
-        const sorted: {
-          [key: string]: DataTableRowData[];
-        } = Object.keys(grouped)
-          .sort((a, b) => {
-            const orderA = this.groupOrder?.indexOf(a) ?? -1;
-            const orderB = this.groupOrder?.indexOf(b) ?? -1;
-            if (orderA !== orderB) {
-              if (orderA === -1) {
-                return 1;
-              }
-              if (orderB === -1) {
-                return -1;
-              }
-              return orderA - orderB;
-            }
-            return stringCompare(
-              ["", "-", "—"].includes(a) ? "zzz" : a,
-              ["", "-", "—"].includes(b) ? "zzz" : b,
-              this.hass.locale.language
-            );
-          })
-          .reduce((obj, key) => {
-            obj[key] = grouped[key];
-            return obj;
-          }, {});
-        const groupedItems: DataTableRowData[] = [];
-        Object.entries(sorted).forEach(([groupName, rows]) => {
-          groupedItems.push({
-            append: true,
-            content: html`<div
-              class="mdc-data-table__cell group-header"
-              role="cell"
-              .group=${groupName}
-              @click=${this._collapseGroup}
-            >
-              <ha-icon-button
-                .path=${mdiChevronUp}
-                class=${this._collapsedGroups.includes(groupName)
-                  ? "collapsed"
-                  : ""}
-              >
-              </ha-icon-button>
-              ${groupName === UNDEFINED_GROUP_KEY
-                ? localize("ui.components.data-table.ungrouped")
-                : groupName || ""}
-            </div>`,
-          });
-          if (!this._collapsedGroups.includes(groupName)) {
-            groupedItems.push(...rows);
-          }
-        });
-        items = groupedItems;
-      }
-
-      if (this.appendRow) {
-        items.push({ append: true, content: this.appendRow });
-      }
-
-      if (this.hasFab) {
-        items.push({ empty: true });
-      }
-
-      this._items = items;
-    } else {
-      this._items = data;
-    }
+    this._lastUpdate = startTime;
     this._filteredData = data;
   }
 
+  private _groupData = memoizeOne(
+    (
+      data: DataTableRowData[],
+      localize: LocalizeFunc,
+      appendRow,
+      hasFab: boolean,
+      groupColumn: string | undefined,
+      groupOrder: string[] | undefined,
+      collapsedGroups: string[]
+    ) => {
+      if (appendRow || hasFab || groupColumn) {
+        let items = [...data];
+
+        if (groupColumn) {
+          const grouped = groupBy(items, (item) => item[groupColumn]);
+          if (grouped.undefined) {
+            // make sure ungrouped items are at the bottom
+            grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
+            delete grouped.undefined;
+          }
+          const sorted: {
+            [key: string]: DataTableRowData[];
+          } = Object.keys(grouped)
+            .sort((a, b) => {
+              const orderA = groupOrder?.indexOf(a) ?? -1;
+              const orderB = groupOrder?.indexOf(b) ?? -1;
+              if (orderA !== orderB) {
+                if (orderA === -1) {
+                  return 1;
+                }
+                if (orderB === -1) {
+                  return -1;
+                }
+                return orderA - orderB;
+              }
+              return stringCompare(
+                ["", "-", "—"].includes(a) ? "zzz" : a,
+                ["", "-", "—"].includes(b) ? "zzz" : b,
+                this.hass.locale.language
+              );
+            })
+            .reduce((obj, key) => {
+              obj[key] = grouped[key];
+              return obj;
+            }, {});
+          const groupedItems: DataTableRowData[] = [];
+          Object.entries(sorted).forEach(([groupName, rows]) => {
+            groupedItems.push({
+              append: true,
+              content: html`<div
+                class="mdc-data-table__cell group-header"
+                role="cell"
+                .group=${groupName}
+                @click=${this._collapseGroup}
+              >
+                <ha-icon-button
+                  .path=${mdiChevronUp}
+                  class=${collapsedGroups.includes(groupName)
+                    ? "collapsed"
+                    : ""}
+                >
+                </ha-icon-button>
+                ${groupName === UNDEFINED_GROUP_KEY
+                  ? localize("ui.components.data-table.ungrouped")
+                  : groupName || ""}
+              </div>`,
+            });
+            if (!collapsedGroups.includes(groupName)) {
+              groupedItems.push(...rows);
+            }
+          });
+          items = groupedItems;
+        }
+
+        if (appendRow) {
+          items.push({ append: true, content: appendRow });
+        }
+
+        if (hasFab) {
+          items.push({ empty: true });
+        }
+
+        return items;
+      }
+      return data;
+    }
+  );
+
   private _memFilterData = memoizeOne(
     (
       data: DataTableRowData[],
@@ -802,8 +828,8 @@ export class HaDataTable extends LitElement {
 
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
-    if (this._items.length) {
-      this._items = [...this._items];
+    if (this._filteredData.length) {
+      this._filteredData = [...this._filteredData];
     }
     fireEvent(this, "selection-changed", {
       value: this._checkedRows,

src/components/ha-badge.ts

@@ -0,0 +1,155 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import "./ha-ripple";
+
+type BadgeType = "badge" | "button";
+
+@customElement("ha-badge")
+export class HaBadge extends LitElement {
+  @property() public type: BadgeType = "badge";
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, attribute: "icon-only" }) iconOnly = false;
+
+  protected render() {
+    const label = this.label;
+
+    return html`
+      <div
+        class="badge ${classMap({
+          "icon-only": this.iconOnly,
+        })}"
+        role=${ifDefined(this.type === "button" ? "button" : undefined)}
+        tabindex=${ifDefined(this.type === "button" ? "0" : undefined)}
+      >
+        <ha-ripple .disabled=${this.type !== "button"}></ha-ripple>
+        <slot name="icon"></slot>
+        ${this.iconOnly
+          ? nothing
+          : html`<span class="info">
+              ${label ? html`<span class="label">${label}</span>` : nothing}
+              <span class="content"><slot></slot></span>
+            </span>`}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        --badge-color: var(--secondary-text-color);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .badge {
+        position: relative;
+        --ha-ripple-color: var(--badge-color);
+        --ha-ripple-hover-opacity: 0.04;
+        --ha-ripple-pressed-opacity: 0.12;
+        transition:
+          box-shadow 180ms ease-in-out,
+          border-color 180ms ease-in-out;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        height: var(--ha-badge-size, 36px);
+        min-width: var(--ha-badge-size, 36px);
+        padding: 0px 12px;
+        box-sizing: border-box;
+        width: auto;
+        border-radius: var(
+          --ha-badge-border-radius,
+          calc(var(--ha-badge-size, 36px) / 2)
+        );
+        background: var(
+          --ha-card-background,
+          var(--card-background-color, white)
+        );
+        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
+        backdrop-filter: var(--ha-card-backdrop-filter, none);
+        border-width: var(--ha-card-border-width, 1px);
+        box-shadow: var(--ha-card-box-shadow, none);
+        border-style: solid;
+        border-color: var(
+          --ha-card-border-color,
+          var(--divider-color, #e0e0e0)
+        );
+      }
+      .badge:focus-visible {
+        --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+        --shadow-focus: 0 0 0 1px var(--badge-color);
+        border-color: var(--badge-color);
+        box-shadow: var(--shadow-default), var(--shadow-focus);
+      }
+      [role="button"] {
+        cursor: pointer;
+      }
+      [role="button"]:focus {
+        outline: none;
+      }
+      .info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding-inline-start: initial;
+        text-align: center;
+        font-family: Roboto;
+      }
+      .label {
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 10px;
+        letter-spacing: 0.1px;
+        color: var(--secondary-text-color);
+      }
+      .content {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 16px;
+        letter-spacing: 0.1px;
+        color: var(--primary-text-color);
+      }
+      ::slotted([slot="icon"]) {
+        --mdc-icon-size: 18px;
+        color: var(--badge-color);
+        line-height: 0;
+        margin-left: -4px;
+        margin-right: 0;
+        margin-inline-start: -4px;
+        margin-inline-end: 0;
+      }
+      ::slotted(img[slot="icon"]) {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        object-fit: cover;
+        overflow: hidden;
+        margin-left: -10px;
+        margin-right: 0;
+        margin-inline-start: -10px;
+        margin-inline-end: 0;
+      }
+      .badge.icon-only {
+        padding: 0;
+      }
+      .badge.icon-only ::slotted([slot="icon"]) {
+        margin-left: 0;
+        margin-right: 0;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-badge": HaBadge;
+  }
+}

src/components/ha-selector/ha-selector-number.ts

@@ -67,7 +67,9 @@ export class HaNumberSelector extends LitElement {
     }
 
     return html`
-      ${this.label ? html`${this.label}${this.required ? "*" : ""}` : nothing}
+      ${this.label && !isBox
+        ? html`${this.label}${this.required ? "*" : ""}`
+        : nothing}
       <div class="input">
         ${!isBox
           ? html`

src/components/ha-selector/ha-selector-text.ts

@@ -82,6 +82,7 @@ export class HaTextSelector extends LitElement {
         .disabled=${this.disabled}
         .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
         @input=${this._handleChange}
+        @change=${this._handleChange}
         .label=${this.label || ""}
         .prefix=${this.selector.text?.prefix}
         .suffix=${this.selector.text?.type === "password"

src/data/lovelace/config/section.ts

@@ -6,6 +6,7 @@ export interface LovelaceBaseSectionConfig {
   title?: string;
   visibility?: Condition[];
   column_span?: number;
+  row_span?: number;
 }
 
 export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {

src/data/lovelace/config/view.ts

@@ -25,6 +25,8 @@ export interface LovelaceBaseViewConfig {
   // Only used for section view, it should move to a section view config type when the views will have dedicated editor.
   max_columns?: number;
   dense_section_placement?: boolean;
+  column_breakpoints?: Record<string, number>;
+  experimental_breakpoints?: boolean;
 }
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {

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

@@ -3,7 +3,6 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
@@ -12,6 +11,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
+import "../../../components/ha-badge";
 import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
@@ -160,15 +160,14 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
 
     if (!stateObj) {
       return html`
-        <div class="badge error">
-          <ha-svg-icon .hass=${this.hass} .path=${mdiAlertCircle}></ha-svg-icon>
-          <span class="info">
-            <span class="label">${entityId}</span>
-            <span class="content">
-              ${this.hass.localize("ui.badge.entity.not_found")}
-            </span>
-          </span>
-        </div>
+        <ha-badge .label=${entityId} class="error">
+          <ha-svg-icon
+            slot="icon"
+            .hass=${this.hass}
+            .path=${mdiAlertCircle}
+          ></ha-svg-icon>
+          ${this.hass.localize("ui.badge.entity.not_found")}
+        </ha-badge>
       `;
     }
 
@@ -204,42 +203,32 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
     const content = showState ? stateDisplay : showName ? name : undefined;
 
     return html`
-      <div
-        style=${styleMap(style)}
-        class="badge ${classMap({
-          active,
-          "no-info": !showState && !showName,
-          "no-icon": !showIcon,
-        })}"
+      <ha-badge
+        .type=${this.hasAction ? "button" : "badge"}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),
           hasDoubleClick: hasAction(this._config!.double_tap_action),
         })}
-        role=${ifDefined(this.hasAction ? "button" : undefined)}
-        tabindex=${ifDefined(this.hasAction ? "0" : undefined)}
+        .label=${label}
+        .iconOnly=${!content}
+        style=${styleMap(style)}
+        class=${classMap({ active })}
       >
-        <ha-ripple .disabled=${!this.hasAction}></ha-ripple>
         ${showIcon
           ? imageUrl
-            ? html`<img src=${imageUrl} aria-hidden />`
+            ? html`<img slot="icon" src=${imageUrl} aria-hidden />`
             : html`
                 <ha-state-icon
+                  slot="icon"
                   .hass=${this.hass}
                   .stateObj=${stateObj}
                   .icon=${this._config.icon}
                 ></ha-state-icon>
               `
           : nothing}
-        ${content
-          ? html`
-              <span class="info">
-                ${label ? html`<span class="label">${name}</span>` : nothing}
-                <span class="content">${content}</span>
-              </span>
-            `
-          : nothing}
-      </div>
+        ${content}
+      </ha-badge>
     `;
   }
 
@@ -249,119 +238,15 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      ha-badge {
         --badge-color: var(--state-inactive-color);
-        -webkit-tap-highlight-color: transparent;
       }
-      .badge.error {
+      ha-badge.error {
         --badge-color: var(--red-color);
       }
-      .badge {
-        position: relative;
-        --ha-ripple-color: var(--badge-color);
-        --ha-ripple-hover-opacity: 0.04;
-        --ha-ripple-pressed-opacity: 0.12;
-        transition:
-          box-shadow 180ms ease-in-out,
-          border-color 180ms ease-in-out;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        height: var(--ha-badge-size, 36px);
-        min-width: var(--ha-badge-size, 36px);
-        padding: 0px 8px;
-        box-sizing: border-box;
-        width: auto;
-        border-radius: var(
-          --ha-badge-border-radius,
-          calc(var(--ha-badge-size, 36px) / 2)
-        );
-        background: var(
-          --ha-card-background,
-          var(--card-background-color, white)
-        );
-        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
-        backdrop-filter: var(--ha-card-backdrop-filter, none);
-        border-width: var(--ha-card-border-width, 1px);
-        box-shadow: var(--ha-card-box-shadow, none);
-        border-style: solid;
-        border-color: var(
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
-        );
-        --mdc-icon-size: 18px;
-        text-align: center;
-        font-family: Roboto;
-      }
-      .badge:focus-visible {
-        --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-        --shadow-focus: 0 0 0 1px var(--badge-color);
-        border-color: var(--badge-color);
-        box-shadow: var(--shadow-default), var(--shadow-focus);
-      }
-      button,
-      [role="button"] {
-        cursor: pointer;
-      }
-      button:focus,
-      [role="button"]:focus {
-        outline: none;
-      }
-      .badge.active {
+      ha-badge.active {
         --badge-color: var(--primary-color);
       }
-      .info {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        padding-right: 4px;
-        padding-inline-end: 4px;
-        padding-inline-start: initial;
-      }
-      .label {
-        font-size: 10px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 10px;
-        letter-spacing: 0.1px;
-        color: var(--secondary-text-color);
-      }
-      .content {
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 16px;
-        letter-spacing: 0.1px;
-        color: var(--primary-text-color);
-      }
-      ha-state-icon,
-      ha-svg-icon {
-        color: var(--badge-color);
-        line-height: 0;
-      }
-      img {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        object-fit: cover;
-        overflow: hidden;
-      }
-      .badge.no-info {
-        padding: 0;
-      }
-      .badge:not(.no-icon):not(.no-info) img {
-        margin-left: -6px;
-        margin-inline-start: -6px;
-        margin-inline-end: initial;
-      }
-      .badge.no-icon .info {
-        padding-right: 4px;
-        padding-left: 4px;
-        padding-inline-end: 4px;
-        padding-inline-start: 4px;
-      }
     `;
   }
 }

src/panels/lovelace/badges/hui-error-badge.ts

@@ -2,12 +2,11 @@ import { mdiAlertCircle } from "@mdi/js";
 import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../components/ha-label-badge";
+import "../../../components/ha-badge";
 import "../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../types";
 import { showAlertDialog } from "../custom-card-helpers";
 import { LovelaceBadge } from "../types";
-import { HuiEntityBadge } from "./hui-entity-badge";
 import { ErrorBadgeConfig } from "./types";
 
 export const createErrorBadgeElement = (config) => {
@@ -55,41 +54,36 @@ export class HuiErrorBadge extends LitElement implements LovelaceBadge {
     }
 
     return html`
-      <button class="badge error" @click=${this._viewDetail}>
-        <ha-svg-icon .hass=${this.hass} .path=${mdiAlertCircle}></ha-svg-icon>
-        <ha-ripple></ha-ripple>
-        <span class="content">
-          <span class="name">Error</span>
-          <span class="state">${this._config.error}</span>
-        </span>
-      </button>
+      <ha-badge
+        class="error"
+        @click=${this._viewDetail}
+        type="button"
+        label="Error"
+      >
+        <ha-svg-icon slot="icon" .path=${mdiAlertCircle}></ha-svg-icon>
+        <div class="content">${this._config.error}</div>
+      </ha-badge>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      HuiEntityBadge.styles,
-      css`
-        .badge.error {
-          --badge-color: var(--error-color);
-          border-color: var(--badge-color);
-        }
-        ha-svg-icon {
-          color: var(--badge-color);
-        }
-        .state {
-          max-width: 100px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        pre {
-          font-family: var(--code-font-family, monospace);
-          white-space: break-spaces;
-          user-select: text;
-        }
-      `,
-    ];
+    return css`
+      ha-badge {
+        --badge-color: var(--error-color);
+        --ha-card-border-color: var(--error-color);
+      }
+      .content {
+        max-width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      pre {
+        font-family: var(--code-font-family, monospace);
+        white-space: break-spaces;
+        user-select: text;
+      }
+    `;
   }
 }
 

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

@@ -12,6 +12,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
+import { listenMediaQuery } from "../../../common/dom/media_query";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
@@ -28,8 +29,29 @@ import { showEditSectionDialog } from "../editor/section-editor/show-edit-sectio
 import { HuiSection } from "../sections/hui-section";
 import type { Lovelace } from "../types";
 
+type Breakpoints = Record<string, number>;
+
 export const DEFAULT_MAX_COLUMNS = 4;
 
+export const DEFAULT_BREAKPOINTS: Breakpoints = {
+  "0": 1,
+  "768": 2,
+  "1280": 3,
+  "1600": 4,
+  "1920": 5,
+  "2560": 6,
+};
+
+const buildMediaQueries = (breakpoints: Breakpoints) =>
+  Object.keys(breakpoints).map((breakpoint, index, array) => {
+    const nextBreakpoint = array[index + 1] as string | undefined;
+    let mediaQuery = `(min-width: ${breakpoint}px)`;
+    if (nextBreakpoint) {
+      mediaQuery += ` and (max-width: ${parseInt(nextBreakpoint) - 1}px)`;
+    }
+    return mediaQuery;
+  });
+
 const parsePx = (value: string) => parseInt(value.replace("px", ""));
 
 @customElement("hui-sections-view")
@@ -52,8 +74,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
   @state() _dragging = false;
 
+  private _listeners: Array<() => void> = [];
+
+  @state() private _breakpointsColumns: number = 1;
+
   private _columnsController = new ResizeController(this, {
     callback: (entries) => {
+      // Don't do anything if we are using breakpoints
+      if (this._config?.experimental_breakpoints) return 1;
+
       const totalWidth = entries[0]?.contentRect.width;
 
       const style = getComputedStyle(this);
@@ -76,8 +105,13 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     },
   });
 
+  private get _sizeColumns() {
+    return this._columnsController.value ?? 1;
+  }
+
   public setConfig(config: LovelaceViewConfig): void {
     this._config = config;
+    this._attachMediaQueriesListeners();
   }
 
   private _sectionConfigKeys = new WeakMap<HuiSection, string>();
@@ -100,12 +134,35 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     this._computeSectionsCount();
   };
 
+  private _attachMediaQueriesListeners() {
+    this._detachMediaQueriesListeners();
+    if (!this._config?.experimental_breakpoints) return;
+    const breakpoints = this._config?.column_breakpoints ?? DEFAULT_BREAKPOINTS;
+    const maxColumns = this._config?.max_columns ?? DEFAULT_MAX_COLUMNS;
+    const mediaQueries = buildMediaQueries(breakpoints);
+    this._listeners = mediaQueries.map((mediaQuery, index) =>
+      listenMediaQuery(mediaQuery, (matches) => {
+        if (matches) {
+          const columns = Object.values(breakpoints)[index];
+          this._breakpointsColumns = Math.min(maxColumns, columns);
+        }
+      })
+    );
+  }
+
+  private _detachMediaQueriesListeners() {
+    while (this._listeners.length) {
+      this._listeners.pop()!();
+    }
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
     this.addEventListener(
       "section-visibility-changed",
       this._sectionVisibilityChanged
     );
+    this._attachMediaQueriesListeners();
   }
 
   disconnectedCallback(): void {
@@ -114,6 +171,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       "section-visibility-changed",
       this._sectionVisibilityChanged
     );
+    this._detachMediaQueriesListeners();
   }
 
   willUpdate(changedProperties: PropertyValues<typeof this>): void {
@@ -130,7 +188,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       this._sectionColumnCount + (this.lovelace?.editMode ? 1 : 0);
     const editMode = this.lovelace.editMode;
 
-    const maxColumnCount = this._columnsController.value ?? 1;
+    const maxColumnCount = this._config?.experimental_breakpoints
+      ? this._breakpointsColumns
+      : this._sizeColumns;
 
     return html`
       <hui-view-badges
@@ -166,6 +226,8 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                 maxColumnCount
               );
 
+              const rowSpan = sectionConfig?.row_span || 1;
+
               (section as any).itemPath = [idx];
 
               return html`
@@ -173,6 +235,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                   class="section"
                   style=${styleMap({
                     "--column-span": columnSpan,
+                    "--row-span": rowSpan,
                   })}
                 >
                     ${
@@ -318,9 +381,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       :host {
         --row-height: var(--ha-view-sections-row-height, 56px);
         --row-gap: var(--ha-view-sections-row-gap, 8px);
-        --column-gap: var(--ha-view-sections-column-gap, 32px);
-        --column-max-width: var(--ha-view-sections-column-max-width, 500px);
+        --column-gap: var(--ha-view-sections-column-gap, 24px);
         --column-min-width: var(--ha-view-sections-column-min-width, 320px);
+        --column-max-width: var(--ha-view-sections-column-max-width, 500px);
         display: block;
       }
 
@@ -332,9 +395,10 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       .section {
         border-radius: var(--ha-card-border-radius, 12px);
         grid-column: span var(--column-span);
+        grid-row: span var(--row-span);
       }
 
-      .section:not(:has(> *:not([hidden]))) {
+      .section:has(hui-section[hidden]) {
         display: none;
       }
 

yarn.lock

@@ -1379,12 +1379,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.25.4, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4":
-  version: 7.25.4
-  resolution: "@babel/runtime@npm:7.25.4"
+"@babel/runtime@npm:7.25.6, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10/70d2a420c24a3289ea6c4addaf3a1c4186bc3d001c92445faa3cd7601d7d2fbdb32c63b3a26b9771e20ff2f511fa76b726bf256f823cdb95bc37b8eadbd02f70
+  checksum: 10/0c4134734deb20e1005ffb9165bf342e1074576621b246d8e5e41cc7cb315a885b7d98950fbf5c63619a2990a56ae82f444d35fe8c4691a0b70c2fe5673667dc
   languageName: node
   linkType: hard
 
@@ -1458,15 +1458,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/commands@npm:6.6.0":
-  version: 6.6.0
-  resolution: "@codemirror/commands@npm:6.6.0"
+"@codemirror/commands@npm:6.6.1":
+  version: 6.6.1
+  resolution: "@codemirror/commands@npm:6.6.1"
   dependencies:
     "@codemirror/language": "npm:^6.0.0"
     "@codemirror/state": "npm:^6.4.0"
     "@codemirror/view": "npm:^6.27.0"
     "@lezer/common": "npm:^1.1.0"
-  checksum: 10/e984511b8ac06a1afe01005a50af7a0b6765cf350547d281a13aedbcccbc8620187c6dce55caa0f7c8ba409771e4abb4aa3bae824b6870249c8176b57cc4a42e
+  checksum: 10/533f33db08a4ff7e400ff61e48d34525afdc894f92442a5bf469ed24b1992a61bf726b61647e2faa552a2f4703c149c92026d9a1f9169f615582cdfc36fcb010
   languageName: node
   linkType: hard
 
@@ -4661,129 +4661,129 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/a11y-base@npm:24.4.6"
+"@vaadin/a11y-base@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/a11y-base@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.6"
+    "@vaadin/component-base": "npm:~24.4.7"
     lit: "npm:^3.0.0"
-  checksum: 10/46acdd62f5485b7b3dce8e746123a58fe4c6c619d51d6fdf5c3d1be52eb5939b22161c1fc321f2c69682950c79326f97ec5684dfd83b3ab09b7d65a16035647f
+  checksum: 10/a6b73c3ad697c5b511e0695004f1a1d1bcea025be77f277a5b1a525c686f8b91d1b02930d4318283d30849c4afdedf57b955540f43c80ff43a4392460b3603dd
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/combo-box@npm:24.4.6"
+"@vaadin/combo-box@npm:24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/combo-box@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.6"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/field-base": "npm:~24.4.6"
-    "@vaadin/input-container": "npm:~24.4.6"
-    "@vaadin/item": "npm:~24.4.6"
-    "@vaadin/lit-renderer": "npm:~24.4.6"
-    "@vaadin/overlay": "npm:~24.4.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
-  checksum: 10/437cf54c1198f347786ef864cd77a52ac9bc9f4dba527c25c678c5a5ca5c0c41e8359db1d24430a053cb70b69fde68a061112247ed6b8ee1ffb8859937624a28
+    "@vaadin/a11y-base": "npm:~24.4.7"
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/field-base": "npm:~24.4.7"
+    "@vaadin/input-container": "npm:~24.4.7"
+    "@vaadin/item": "npm:~24.4.7"
+    "@vaadin/lit-renderer": "npm:~24.4.7"
+    "@vaadin/overlay": "npm:~24.4.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
+  checksum: 10/d99b9f7261279b75493de192c555e2125edd22544bbe5d4acdd1859c4f0b942848c9655b72dab8e5d85e5103b3c72425a43482acbfc75be70a20dd00908281a4
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/component-base@npm:24.4.6"
+"@vaadin/component-base@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/component-base@npm:24.4.7"
   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/3849183ed62c6742cba4923ecc6d49edede0d85b5d4edd7c9efb37ee260468072065d9cf3e66b741de01f53662e0551049069ee79caf65b220d5db1e932ebe5e
+  checksum: 10/c84bdcdf85ec46717e575af1c6d570cd81bbc22524024d769fc427df79cad603b1c3aca8015ff0c764a61ed3da274242da3c100d2dfc1529e065fa35af389daa
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/field-base@npm:24.4.6"
+"@vaadin/field-base@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/field-base@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.6"
-    "@vaadin/component-base": "npm:~24.4.6"
+    "@vaadin/a11y-base": "npm:~24.4.7"
+    "@vaadin/component-base": "npm:~24.4.7"
     lit: "npm:^3.0.0"
-  checksum: 10/27fb01628a3ef83142c4de854e92940e8edcb136af9e75c4687fa627a017f6a36861069a22306581019b3ee9dce133e7b38b991886755f83ed0a359cebb51ab1
+  checksum: 10/8e83d40ef8d2ddd2171a3cb6426554043cd7ac5937643cfc63f6386b80cb84fe2610282d37b62a71c4f6957860d6baa24a08f201b740bd887eabf0c61e310178
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/icon@npm:24.4.6"
+"@vaadin/icon@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/icon@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
     lit: "npm:^3.0.0"
-  checksum: 10/4baa72e80f6dd9c12e8c6a3681a90eb602289a5f3f1c90bd921a0c6904f5406abdc2034ef1fad66d7ddfbd8789ab66c26d4d43aedfbd135a97da09e3e5914fcf
+  checksum: 10/f094ad8137e63df193bdf3952d7419ac68bf02d2b0777598062a4e609568bffa931af5a16b07566b1ef09f88ba99e1b9d72d94cb13c04f69a4079c0a296fd684
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/input-container@npm:24.4.6"
+"@vaadin/input-container@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/input-container@npm:24.4.7"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
     lit: "npm:^3.0.0"
-  checksum: 10/5ae6a9e951e7423127443dd5b1c990cc78be581c067787839dceb58927abac3a4615f8b9cf15b61d4b7f50d4ae603be5e402f943b21930d734d66e4924f869c4
+  checksum: 10/55e5e695724a5a1456fbfb8060dd855d82723d5bf22356e2387d7b88ad2f5778b5a84f3fbae144a6568922eb0476d7b972ee6dac0a635e64874fa50281766685
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/item@npm:24.4.6"
+"@vaadin/item@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/item@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.6"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
-  checksum: 10/628757ac9c28f6440dec7a73143e2bce5ae8b59d7840b3a8219d107eab3e835a5ae2725e0c957e922582d9566c760bc7360a5ebdad459a74added914c072a9ec
+    "@vaadin/a11y-base": "npm:~24.4.7"
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
+  checksum: 10/4f08a165ac81c065d4f2a305ee4d89d35a33fa30f584266ff2f230936bf3b75e144530a6ee9667be8a5325cd945bfd55fb2a36c28fd77baca4a656420206eb15
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/lit-renderer@npm:24.4.6"
+"@vaadin/lit-renderer@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/lit-renderer@npm:24.4.7"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/e0063bf2a31caab3ff55414fa6937a864b494e6efe1178a24d17f7196d71e137fddf8adf458523f534f707f17f5e51b16b449b79c27c38b865c5c4eec97b5805
+  checksum: 10/1548e54ededd4c26aa0eef27c460c44379b1e6497571e157a1d8e2a58bb645a638d7a7952375848f977181bbcedfec115ba893181f87b7431d031c7d64c3db4b
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/overlay@npm:24.4.6"
+"@vaadin/overlay@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/overlay@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.6"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
+    "@vaadin/a11y-base": "npm:~24.4.7"
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
     lit: "npm:^3.0.0"
-  checksum: 10/cdd92fd6b01e643e638b03072fffa8542ee1f00ef3966e9b2c3fdc34309a94451dfeeac72c611356a1a63f2f0398ea7f6da2902afd095668001161d77fa0cd46
+  checksum: 10/761edb1b1defb30fd32132847a60b6fffc9673956a2344480a9b73c954477fce6e3689866c9998d8e6d52cd91db345fd0ff1e18e39c8cb79697b4f285a7cf68f
   languageName: node
   linkType: hard
 
@@ -4794,36 +4794,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.4.6"
+"@vaadin/vaadin-lumo-styles@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.4.7"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/icon": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
-  checksum: 10/f1dd83c36850ecf3951e484e9d57b192b56a55c78e978f587ea5fb16607d4ef257013b04793a90791f85cf66b7bfa613edb208826a607fe1afb21fd39eb5491d
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/icon": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
+  checksum: 10/e792225fdf37a440c864158263df4b1a8315ddc7fce7d983bc74aeaf0a726b046e5688866d80c860936c64554c2ddb446de44242a65ebf1f27248e0a338bf02c
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/vaadin-material-styles@npm:24.4.6"
+"@vaadin/vaadin-material-styles@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/vaadin-material-styles@npm:24.4.7"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.6"
-  checksum: 10/c1add552163cf7e67633722d2eb9df48dce68b5519587befd84a3678e5f1972b5286f065613015c7b11961e96cf8b41266f0e1b0e63a2648df18ec14179f51aa
+    "@vaadin/component-base": "npm:~24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.7"
+  checksum: 10/2de8ba3be9def3c63c4d25dfec07db4df7efcab5155601788204a443762d78729218b37eb18854933a60d27981affd5f87168f82e3e6a6533db96e147a367f1f
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.4.6, @vaadin/vaadin-themable-mixin@npm:~24.4.6":
-  version: 24.4.6
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.4.6"
+"@vaadin/vaadin-themable-mixin@npm:24.4.7, @vaadin/vaadin-themable-mixin@npm:~24.4.7":
+  version: 24.4.7
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.4.7"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
-  checksum: 10/ae91d1f870e16f4296d8a7dee2ee6765a1e2036a4eb8e5189e86ec20307d9cf196eb7bb50c1f220450a2d74e67fe4899d1ce940c320ea5957164c4f27546c52b
+  checksum: 10/aef690ca7d4ab90da0e0e3b0cb4e12a03a27b93e13481023394c118d64388e44606072bd640beece35ba21dddd2b8417261ca1ab05934a270c7facf7f0827e54
   languageName: node
   linkType: hard
 
@@ -8918,11 +8918,11 @@ __metadata:
     "@babel/plugin-transform-runtime": "npm:7.25.4"
     "@babel/preset-env": "npm:7.25.4"
     "@babel/preset-typescript": "npm:7.24.7"
-    "@babel/runtime": "npm:7.25.4"
+    "@babel/runtime": "npm:7.25.6"
     "@braintree/sanitize-url": "npm:7.1.0"
     "@bundle-stats/plugin-webpack-filter": "npm:4.15.0"
     "@codemirror/autocomplete": "npm:6.18.0"
-    "@codemirror/commands": "npm:6.6.0"
+    "@codemirror/commands": "npm:6.6.1"
     "@codemirror/language": "npm:6.10.2"
     "@codemirror/legacy-modes": "npm:6.4.1"
     "@codemirror/search": "npm:6.5.6"
@@ -9013,8 +9013,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.6"
-    "@vaadin/vaadin-themable-mixin": "npm:24.4.6"
+    "@vaadin/combo-box": "npm:24.4.7"
+    "@vaadin/vaadin-themable-mixin": "npm:24.4.7"
     "@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"
@@ -9070,7 +9070,7 @@ __metadata:
     jszip: "npm:3.10.1"
     leaflet: "npm:1.9.4"
     leaflet-draw: "npm:1.0.4"
-    lint-staged: "npm:15.2.9"
+    lint-staged: "npm:15.2.10"
     lit: "npm:2.8.0"
     lit-analyzer: "npm:2.0.3"
     lodash.merge: "npm:4.6.2"
@@ -10497,9 +10497,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lint-staged@npm:15.2.9":
-  version: 15.2.9
-  resolution: "lint-staged@npm:15.2.9"
+"lint-staged@npm:15.2.10":
+  version: 15.2.10
+  resolution: "lint-staged@npm:15.2.10"
   dependencies:
     chalk: "npm:~5.3.0"
     commander: "npm:~12.1.0"
@@ -10507,13 +10507,13 @@ __metadata:
     execa: "npm:~8.0.1"
     lilconfig: "npm:~3.1.2"
     listr2: "npm:~8.2.4"
-    micromatch: "npm:~4.0.7"
+    micromatch: "npm:~4.0.8"
     pidtree: "npm:~0.6.0"
     string-argv: "npm:~0.3.2"
     yaml: "npm:~2.5.0"
   bin:
     lint-staged: bin/lint-staged.js
-  checksum: 10/2f7342ca3fc7e2a8a0cc3db79ca8d2ad0269b98b13220f3a6745a514aacf1f83487a23a550569081ea962f9a576af7df8d687a8330a9c3c2c27348d5a4d5440e
+  checksum: 10/ab6930cd633dbb5b6ec7c81fc06c65df41e9f80d93dd22e0d79c6e272cdfd8110a0fbdec60303d46a06b30bcd92261153630e2c937531b77ec5ae41e7e9d90d3
   languageName: node
   linkType: hard
 
@@ -10937,7 +10937,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:~4.0.7":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:~4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies: