Fix device automations

package.json

@@ -28,7 +28,7 @@
     "@babel/runtime": "7.25.7",
     "@braintree/sanitize-url": "7.1.0",
     "@codemirror/autocomplete": "6.18.1",
-    "@codemirror/commands": "6.7.0",
+    "@codemirror/commands": "6.6.2",
     "@codemirror/language": "6.10.3",
     "@codemirror/legacy-modes": "6.4.1",
     "@codemirror/search": "6.5.6",
@@ -89,8 +89,8 @@
     "@polymer/polymer": "3.5.1",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.4.11",
-    "@vaadin/vaadin-themable-mixin": "24.4.11",
+    "@vaadin/combo-box": "24.4.10",
+    "@vaadin/vaadin-themable-mixin": "24.4.10",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -195,7 +195,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "chai": "5.1.1",
-    "del": "8.0.0",
+    "del": "7.1.0",
     "eslint": "8.57.1",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "18.0.0",
@@ -205,7 +205,7 @@
     "eslint-plugin-lit": "1.15.0",
     "eslint-plugin-lit-a11y": "4.1.4",
     "eslint-plugin-unused-imports": "4.1.4",
-    "eslint-plugin-wc": "2.2.0",
+    "eslint-plugin-wc": "2.1.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
     "glob": "11.0.0",

pyproject.toml

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

script/bootstrap

@@ -18,9 +18,5 @@ if [[ -n "$DEVCONTAINER" ]]; then
     fi
 fi
 
-if ! command -v yarn &> /dev/null; then
-    echo "Error: yarn not found. Please install it following the official instructions: https://yarnpkg.com/getting-started/install" >&2
-    exit 1
-fi
 # Install node modules
-yarn install
+    yarn install

src/common/util/array-move.ts

@@ -20,15 +20,6 @@ function findNestedItem(
   }, obj);
 }
 
-function updateNestedItem(obj: any, path: ItemPath): any {
-  const lastKey = path.pop()!;
-  const parent = findNestedItem(obj, path);
-  parent[lastKey] = Array.isArray(parent[lastKey])
-    ? [...parent[lastKey]]
-    : [parent[lastKey]];
-  return obj;
-}
-
 export function nestedArrayMove<A>(
   obj: A,
   oldIndex: number,
@@ -36,18 +27,14 @@ export function nestedArrayMove<A>(
   oldPath?: ItemPath,
   newPath?: ItemPath
 ): A {
-  let newObj = (Array.isArray(obj) ? [...obj] : { ...obj }) as A;
-
-  if (oldPath) {
-    newObj = updateNestedItem(newObj, [...oldPath]);
-  }
-  if (newPath) {
-    newObj = updateNestedItem(newObj, [...newPath]);
-  }
-
+  const newObj = (Array.isArray(obj) ? [...obj] : { ...obj }) as A;
   const from = oldPath ? findNestedItem(newObj, oldPath) : newObj;
   const to = newPath ? findNestedItem(newObj, newPath, true) : newObj;
 
+  if (!Array.isArray(from) || !Array.isArray(to)) {
+    return obj;
+  }
+
   const item = from.splice(oldIndex, 1)[0];
   to.splice(newIndex, 0, item);
 

src/components/device/ha-device-automation-picker.ts

@@ -3,6 +3,7 @@ import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { fullEntitiesContext } from "../../data/context";
 import {
   DeviceAutomation,
@@ -103,6 +104,7 @@ export abstract class HaDeviceAutomationPicker<
         .label=${this.label}
         .value=${value}
         @selected=${this._automationChanged}
+        @closed=${stopPropagation}
         .disabled=${this._automations.length === 0}
       >
         ${value === NO_AUTOMATION_KEY

src/components/ha-grid-size-picker.ts

@@ -68,7 +68,7 @@ export class HaGridSizeEditor extends LitElement {
           .min=${columnMin}
           .max=${columnMax}
           .range=${this.columns}
-          .value=${fullWidth ? this.columns : this.value?.columns}
+          .value=${fullWidth ? this.columns : columnValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledColumns}
@@ -83,7 +83,7 @@ export class HaGridSizeEditor extends LitElement {
           .max=${rowMax}
           .range=${this.rows}
           vertical
-          .value=${autoHeight ? rowMin : this.value?.rows}
+          .value=${rowValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledRows}

src/components/ha-service-control.ts

@@ -174,6 +174,7 @@ export class HaServiceControl extends LitElement {
       if (this._value && serviceData) {
         const loadDefaults = this.value && !("data" in this.value);
         // Set mandatory bools without a default value to false
+        this._value = { ...this._value };
         if (!this._value.data) {
           this._value.data = {};
         }

src/data/lovelace/config/action.ts

@@ -1,4 +1,5 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { Action } from "../../script";
 
 export interface ToggleActionConfig extends BaseActionConfig {
   action: "toggle";
@@ -31,6 +32,11 @@ export interface MoreInfoActionConfig extends BaseActionConfig {
   entity_id?: string;
 }
 
+export interface SequenceActionConfig extends BaseActionConfig {
+  action: "sequence";
+  actions?: Action[];
+}
+
 export interface AssistActionConfig extends BaseActionConfig {
   action: "assist";
   pipeline_id?: string;
@@ -67,4 +73,5 @@ export type ActionConfig =
   | MoreInfoActionConfig
   | AssistActionConfig
   | NoActionConfig
-  | CustomActionConfig;
+  | CustomActionConfig
+  | SequenceActionConfig;

src/data/lovelace/config/card.ts

@@ -1,16 +1,11 @@
 import type { Condition } from "../../../panels/lovelace/common/validate-condition";
-import type {
-  LovelaceGridOptions,
-  LovelaceLayoutOptions,
-} from "../../../panels/lovelace/types";
+import type { LovelaceLayoutOptions } from "../../../panels/lovelace/types";
 
 export interface LovelaceCardConfig {
   index?: number;
   view_index?: number;
   view_layout?: any;
-  /** @deprecated Use `grid_options` instead */
   layout_options?: LovelaceLayoutOptions;
-  grid_options?: LovelaceGridOptions;
   type: string;
   [key: string]: any;
   visibility?: Condition[];

src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts

@@ -83,15 +83,9 @@ export const getZHADeviceActions = async (
       classes: "warning",
       action: async () => {
         const confirmed = await showConfirmationDialog(el, {
-          title: hass.localize(
-            "ui.dialogs.zha_device_info.confirmations.remove_title"
-          ),
           text: hass.localize(
-            "ui.dialogs.zha_device_info.confirmations.remove_text"
+            "ui.dialogs.zha_device_info.confirmations.remove"
           ),
-          confirmText: hass.localize("ui.common.remove"),
-          dismissText: hass.localize("ui.common.cancel"),
-          destructive: true,
         });
 
         if (!confirmed) {

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -482,9 +482,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
     const network = (ev.currentTarget as any).network as ThreadNetwork;
     const router = (ev.currentTarget as any).router as ThreadRouter;
     const otbr = (ev.currentTarget as any).otbr as OTBRInfo;
-    const index = network.dataset
-      ? Number(ev.detail.index)
-      : Number(ev.detail.index) + 1;
+    const index = Number(ev.detail.index);
     switch (index) {
       case 0:
         this._setPreferredBorderAgent(network.dataset!, router);

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

@@ -5,7 +5,6 @@ import { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../types";
-import { migrateLayoutToGridOptions } from "../common/compute-card-grid-size";
 import { computeCardSize } from "../common/compute-card-size";
 import {
   attachConditionMediaQueriesListeners,
@@ -13,7 +12,7 @@ import {
 } from "../common/validate-condition";
 import { createCardElement } from "../create-element/create-card-element";
 import { createErrorCardConfig } from "../create-element/create-element-base";
-import type { LovelaceCard, LovelaceGridOptions } from "../types";
+import type { LovelaceCard, LovelaceLayoutOptions } from "../types";
 
 declare global {
   interface HASSDomEvents {
@@ -68,44 +67,20 @@ export class HuiCard extends ReactiveElement {
     return 1;
   }
 
-  public getGridOptions(): LovelaceGridOptions {
-    const elementOptions = this.getElementGridOptions();
-    const configOptions = this.getConfigGridOptions();
-    return {
-      ...elementOptions,
-      ...configOptions,
-    };
+  public getLayoutOptions(): LovelaceLayoutOptions {
+    const configOptions = this.config?.layout_options ?? {};
+    if (this._element) {
+      const cardOptions = this._element.getLayoutOptions?.() ?? {};
+      return {
+        ...cardOptions,
+        ...configOptions,
+      };
+    }
+    return configOptions;
   }
 
-  // options provided by the element
-  public getElementGridOptions(): LovelaceGridOptions {
-    if (!this._element) return {};
-
-    if (this._element.getGridOptions) {
-      return this._element.getGridOptions();
-    }
-    if (this._element.getLayoutOptions) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `This card (${this.config?.type}) is using "getLayoutOptions" and it is deprecated, contact the developer to suggest to use "getGridOptions" instead`
-      );
-      const config = migrateLayoutToGridOptions(
-        this._element.getLayoutOptions()
-      );
-      return config;
-    }
-    return {};
-  }
-
-  // options provided by the config
-  public getConfigGridOptions(): LovelaceGridOptions {
-    if (this.config?.grid_options) {
-      return this.config.grid_options;
-    }
-    if (this.config?.layout_options) {
-      return migrateLayoutToGridOptions(this.config.layout_options);
-    }
-    return {};
+  public getElementLayoutOptions(): LovelaceLayoutOptions {
+    return this._element?.getLayoutOptions?.() ?? {};
   }
 
   private _updateElement(config: LovelaceCardConfig) {

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

@@ -187,6 +187,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       }
       .content p {
         margin: 0;
+        font-family: Roboto;
         font-style: normal;
         white-space: nowrap;
         overflow: hidden;

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -275,7 +275,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                     "ui.panel.lovelace.cards.todo-list.no_unchecked_items"
                   )}
                 </p>`}
-            ${!this._config.hide_completed && checkedItems.length
+            ${checkedItems.length
               ? html`
                   <div role="separator">
                     <div class="divider"></div>

src/panels/lovelace/cards/types.ts

@@ -453,7 +453,6 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
   title?: string;
   theme?: string;
   entity?: string;
-  hide_completed?: boolean;
 }
 
 export interface StackCardConfig extends LovelaceCardConfig {

src/panels/lovelace/common/compute-card-grid-size.ts

@@ -1,34 +1,8 @@
 import { conditionalClamp } from "../../../common/number/clamp";
-import { LovelaceGridOptions, LovelaceLayoutOptions } from "../types";
-
-const GRID_COLUMN_MULTIPLIER = 3;
-
-const multiplyBy = <T extends number | string | undefined>(
-  value: T,
-  multiplier: number
-): T => (typeof value === "number" ? ((value * multiplier) as T) : value);
-
-export const migrateLayoutToGridOptions = (
-  options: LovelaceLayoutOptions
-): LovelaceGridOptions => {
-  const gridOptions: LovelaceGridOptions = {
-    columns: multiplyBy(options.grid_columns, GRID_COLUMN_MULTIPLIER),
-    max_columns: multiplyBy(options.grid_max_columns, GRID_COLUMN_MULTIPLIER),
-    min_columns: multiplyBy(options.grid_min_columns, GRID_COLUMN_MULTIPLIER),
-    rows: options.grid_rows,
-    max_rows: options.grid_max_rows,
-    min_rows: options.grid_min_rows,
-  };
-  for (const [key, value] of Object.entries(gridOptions)) {
-    if (value === undefined) {
-      delete gridOptions[key];
-    }
-  }
-  return gridOptions;
-};
+import { LovelaceLayoutOptions } from "../types";
 
 export const DEFAULT_GRID_SIZE = {
-  columns: 12,
+  columns: 4,
   rows: "auto",
 } as CardGridSize;
 
@@ -38,14 +12,14 @@ export type CardGridSize = {
 };
 
 export const computeCardGridSize = (
-  options: LovelaceGridOptions
+  options: LovelaceLayoutOptions
 ): CardGridSize => {
-  const rows = options.rows ?? DEFAULT_GRID_SIZE.rows;
-  const columns = options.columns ?? DEFAULT_GRID_SIZE.columns;
-  const minRows = options.min_rows;
-  const maxRows = options.max_rows;
-  const minColumns = options.min_columns;
-  const maxColumns = options.max_columns;
+  const rows = options.grid_rows ?? DEFAULT_GRID_SIZE.rows;
+  const columns = options.grid_columns ?? DEFAULT_GRID_SIZE.columns;
+  const minRows = options.grid_min_rows;
+  const maxRows = options.grid_max_rows;
+  const minColumns = options.grid_min_columns;
+  const maxColumns = options.grid_max_columns;
 
   const clampedRows =
     typeof rows === "string" ? rows : conditionalClamp(rows, minRows, maxRows);

src/panels/lovelace/common/handle-action.ts

@@ -3,6 +3,7 @@ import { navigate } from "../../../common/navigate";
 import { forwardHaptic } from "../../../data/haptics";
 import { domainToName } from "../../../data/integration";
 import { ActionConfig } from "../../../data/lovelace/config/action";
+import { callExecuteScript } from "../../../data/service";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { showVoiceCommandDialog } from "../../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { HomeAssistant } from "../../../types";
@@ -177,6 +178,13 @@ export const handleAction = async (
       });
       break;
     }
+    case "sequence": {
+      if (!actionConfig.actions) {
+        return;
+      }
+      callExecuteScript(hass, actionConfig.actions);
+      break;
+    }
     case "fire-dom-event": {
       fireEvent(node, "ll-custom", actionConfig);
     }

src/panels/lovelace/components/hui-action-editor.ts

@@ -1,3 +1,5 @@
+import { ContextProvider } from "@lit-labs/context";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -14,7 +16,10 @@ import "../../../components/ha-assist-pipeline-picker";
 import { HaFormSchema, SchemaUnion } from "../../../components/ha-form/types";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-navigation-picker";
+import { HaSelect } from "../../../components/ha-select";
 import "../../../components/ha-service-control";
+import { fullEntitiesContext } from "../../../data/context";
+import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import {
   ActionConfig,
   CallServiceActionConfig,
@@ -22,9 +27,9 @@ import {
   UrlActionConfig,
 } from "../../../data/lovelace/config/action";
 import { ServiceAction } from "../../../data/script";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
-import { HaSelect } from "../../../components/ha-select";
 
 export type UiAction = Exclude<ActionConfig["action"], "fire-dom-event">;
 
@@ -34,6 +39,7 @@ const DEFAULT_ACTIONS: UiAction[] = [
   "navigate",
   "url",
   "perform-action",
+  "sequence",
   "assist",
   "none",
 ];
@@ -70,8 +76,17 @@ const ASSIST_SCHEMA = [
   },
 ] as const satisfies readonly HaFormSchema[];
 
+const SEQUENCE_SCHEMA = [
+  {
+    name: "actions",
+    selector: {
+      action: {},
+    },
+  },
+] as const satisfies readonly HaFormSchema[];
+
 @customElement("hui-action-editor")
-export class HuiActionEditor extends LitElement {
+export class HuiActionEditor extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public config?: ActionConfig;
 
   @property() public label?: string;
@@ -86,6 +101,19 @@ export class HuiActionEditor extends LitElement {
 
   @query("ha-select") private _select!: HaSelect;
 
+  private _entitiesContext = new ContextProvider(this, {
+    context: fullEntitiesContext,
+    initialValue: [],
+  });
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass!.connection!, (entities) => {
+        this._entitiesContext.setValue(entities);
+      }),
+    ];
+  }
+
   get _navigation_path(): string {
     const config = this.config as NavigateActionConfig | undefined;
     return config?.navigation_path || "";
@@ -120,6 +148,11 @@ export class HuiActionEditor extends LitElement {
     }
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.hass!.loadFragmentTranslation("config");
+    this.hass!.loadBackendTranslation("device_automation");
+  }
+
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -218,6 +251,17 @@ export class HuiActionEditor extends LitElement {
             </ha-form>
           `
         : nothing}
+      ${this.config?.action === "sequence"
+        ? html`
+            <ha-form
+              .hass=${this.hass}
+              .schema=${SEQUENCE_SCHEMA}
+              .data=${this.config}
+              .computeLabel=${this._computeFormLabel}
+              @value-changed=${this._formValueChanged}
+            ></ha-form>
+          `
+        : nothing}
     `;
   }
 
@@ -289,7 +333,15 @@ export class HuiActionEditor extends LitElement {
     });
   }
 
-  private _computeFormLabel(schema: SchemaUnion<typeof ASSIST_SCHEMA>) {
+  private _computeFormLabel(
+    schema:
+      | SchemaUnion<typeof ASSIST_SCHEMA>
+      | SchemaUnion<typeof NAVIGATE_SCHEMA>
+      | SchemaUnion<typeof SEQUENCE_SCHEMA>
+  ) {
+    if (schema.name === "actions") {
+      return "";
+    }
     return this.hass?.localize(
       `ui.panel.lovelace.editor.action-editor.${schema.name}`
     );

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list";
 import { mdiCheck, mdiDotsVertical } from "@mdi/js";
 import { css, html, LitElement, nothing, PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -17,6 +17,7 @@ import "../../../../components/ha-slider";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-switch";
 import "../../../../components/ha-yaml-editor";
+import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { haStyle } from "../../../../resources/styles";
@@ -25,9 +26,8 @@ import { HuiCard } from "../../cards/hui-card";
 import {
   CardGridSize,
   computeCardGridSize,
-  migrateLayoutToGridOptions,
 } from "../../common/compute-card-grid-size";
-import { LovelaceGridOptions } from "../../types";
+import { LovelaceLayoutOptions } from "../../types";
 
 @customElement("hui-card-layout-editor")
 export class HuiCardLayoutEditor extends LitElement {
@@ -37,16 +37,21 @@ export class HuiCardLayoutEditor extends LitElement {
 
   @property({ attribute: false }) public sectionConfig!: LovelaceSectionConfig;
 
-  @state() _defaultGridOptions?: LovelaceGridOptions;
+  @state() _defaultLayoutOptions?: LovelaceLayoutOptions;
 
   @state() public _yamlMode = false;
 
   @state() public _uiAvailable = true;
 
+  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
+
   private _cardElement?: HuiCard;
 
   private _mergedOptions = memoizeOne(
-    (options?: LovelaceGridOptions, defaultOptions?: LovelaceGridOptions) => ({
+    (
+      options?: LovelaceLayoutOptions,
+      defaultOptions?: LovelaceLayoutOptions
+    ) => ({
       ...defaultOptions,
       ...options,
     })
@@ -55,30 +60,19 @@ export class HuiCardLayoutEditor extends LitElement {
   private _computeCardGridSize = memoizeOne(computeCardGridSize);
 
   private _isDefault = memoizeOne(
-    (options?: LovelaceGridOptions) =>
-      options?.columns === undefined && options?.rows === undefined
+    (options?: LovelaceLayoutOptions) =>
+      options?.grid_columns === undefined && options?.grid_rows === undefined
   );
 
-  private _configGridOptions = (config: LovelaceCardConfig) => {
-    if (config.grid_options) {
-      return config.grid_options;
-    }
-    if (config.layout_options) {
-      return migrateLayoutToGridOptions(config.layout_options);
-    }
-    return {};
-  };
-
   render() {
-    const configGridOptions = this._configGridOptions(this.config);
     const options = this._mergedOptions(
-      configGridOptions,
-      this._defaultGridOptions
+      this.config.layout_options,
+      this._defaultLayoutOptions
     );
 
     const value = this._computeCardGridSize(options);
 
-    const totalColumns = (this.sectionConfig.column_span ?? 1) * 12;
+    const totalColumns = (this.sectionConfig.column_span ?? 1) * 4;
 
     return html`
       <div class="header">
@@ -136,24 +130,24 @@ export class HuiCardLayoutEditor extends LitElement {
         ? html`
             <ha-yaml-editor
               .hass=${this.hass}
-              .defaultValue=${configGridOptions}
+              .defaultValue=${this.config.layout_options}
               @value-changed=${this._valueChanged}
             ></ha-yaml-editor>
           `
         : html`
             <ha-grid-size-picker
               style=${styleMap({
-                "max-width": `${totalColumns * 20 + 50}px`,
+                "max-width": `${totalColumns * 45 + 50}px`,
               })}
               .columns=${totalColumns}
               .hass=${this.hass}
               .value=${value}
-              .isDefault=${this._isDefault(configGridOptions)}
+              .isDefault=${this._isDefault(this.config.layout_options)}
               @value-changed=${this._gridSizeChanged}
-              .rowMin=${options.min_rows}
-              .rowMax=${options.max_rows}
-              .columnMin=${options.min_columns}
-              .columnMax=${options.max_columns}
+              .rowMin=${options.grid_min_rows}
+              .rowMax=${options.grid_max_rows}
+              .columnMin=${options.grid_min_columns}
+              .columnMax=${options.grid_max_columns}
             ></ha-grid-size-picker>
             <ha-settings-row>
               <span slot="heading" data-for="full-width">
@@ -173,19 +167,6 @@ export class HuiCardLayoutEditor extends LitElement {
               >
               </ha-switch>
             </ha-settings-row>
-            <ha-settings-row>
-              <span slot="heading" data-for="full-width">
-                ${this.hass.localize(
-                  "ui.panel.lovelace.editor.edit_card.layout.precision_mode"
-                )}
-              </span>
-              <span slot="description" data-for="full-width">
-                ${this.hass.localize(
-                  "ui.panel.lovelace.editor.edit_card.layout.precision_mode_helper"
-                )}
-              </span>
-              <ha-switch name="full-precision_mode"> </ha-switch>
-            </ha-settings-row>
           `}
     `;
   }
@@ -199,10 +180,11 @@ export class HuiCardLayoutEditor extends LitElement {
       this._cardElement.config = this.config;
       this._cardElement.addEventListener("card-updated", (ev: Event) => {
         ev.stopPropagation();
-        this._defaultGridOptions = this._cardElement?.getElementGridOptions();
+        this._defaultLayoutOptions =
+          this._cardElement?.getElementLayoutOptions();
       });
       this._cardElement.load();
-      this._defaultGridOptions = this._cardElement.getElementGridOptions();
+      this._defaultLayoutOptions = this._cardElement.getElementLayoutOptions();
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err);
@@ -229,49 +211,53 @@ export class HuiCardLayoutEditor extends LitElement {
       case 1:
         this._yamlMode = true;
         break;
+      case 2:
+        this._reset();
+        break;
     }
   }
 
+  private async _reset() {
+    const newConfig = { ...this.config };
+    delete newConfig.layout_options;
+    this._yamlEditor?.setValue({});
+    fireEvent(this, "value-changed", { value: newConfig });
+  }
+
   private _gridSizeChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     const value = ev.detail.value as CardGridSize;
 
     const newConfig: LovelaceCardConfig = {
       ...this.config,
-      grid_options: {
-        ...this.config.grid_options,
-        columns: value.columns,
-        rows: value.rows,
+      layout_options: {
+        ...this.config.layout_options,
+        grid_columns: value.columns,
+        grid_rows: value.rows,
       },
     };
 
-    this._updateValue(newConfig);
-  }
+    if (newConfig.layout_options!.grid_columns === undefined) {
+      delete newConfig.layout_options!.grid_columns;
+    }
+    if (newConfig.layout_options!.grid_rows === undefined) {
+      delete newConfig.layout_options!.grid_rows;
+    }
+    if (Object.keys(newConfig.layout_options!).length === 0) {
+      delete newConfig.layout_options;
+    }
 
-  private _updateValue(value: LovelaceCardConfig): void {
-    if (value.grid_options!.columns === undefined) {
-      delete value.grid_options!.columns;
-    }
-    if (value.grid_options!.rows === undefined) {
-      delete value.grid_options!.rows;
-    }
-    if (Object.keys(value.grid_options!).length === 0) {
-      delete value.grid_options;
-    }
-    if (value.layout_options) {
-      delete value.layout_options;
-    }
-    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "value-changed", { value: newConfig });
   }
 
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    const options = ev.detail.value as LovelaceGridOptions;
+    const options = ev.detail.value as LovelaceLayoutOptions;
     const newConfig: LovelaceCardConfig = {
       ...this.config,
-      grid_options: options,
+      layout_options: options,
     };
-    this._updateValue(newConfig);
+    fireEvent(this, "value-changed", { value: newConfig });
   }
 
   private _fullWidthChanged(ev): void {
@@ -279,12 +265,14 @@ export class HuiCardLayoutEditor extends LitElement {
     const value = ev.target.checked;
     const newConfig: LovelaceCardConfig = {
       ...this.config,
-      grid_options: {
-        ...this.config.grid_options,
-        columns: value ? "full" : (this._defaultGridOptions?.min_columns ?? 1),
+      layout_options: {
+        ...this.config.layout_options,
+        grid_columns: value
+          ? "full"
+          : (this._defaultLayoutOptions?.grid_min_columns ?? 1),
       },
     };
-    this._updateValue(newConfig);
+    fireEvent(this, "value-changed", { value: newConfig });
   }
 
   static styles = [

src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, boolean, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
@@ -18,7 +18,6 @@ const cardConfigStruct = assign(
     title: optional(string()),
     theme: optional(string()),
     entity: optional(string()),
-    hide_completed: optional(boolean()),
   })
 );
 
@@ -31,7 +30,6 @@ const SCHEMA = [
     },
   },
   { name: "theme", selector: { theme: {} } },
-  { name: "hide_completed", selector: { boolean: {} } },
 ] as const;
 
 @customElement("hui-todo-list-card-editor")
@@ -89,10 +87,6 @@ export class HuiTodoListEditor
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;
-      case "hide_completed":
-        return this.hass!.localize(
-          "ui.panel.lovelace.editor.card.todo-list.hide_completed"
-        );
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`

src/panels/lovelace/editor/structs/action-struct.ts

@@ -48,6 +48,12 @@ const actionConfigStructService = object({
   confirmation: optional(actionConfigStructConfirmation),
 });
 
+const actionConfigStructSequence = object({
+  action: literal("sequence"),
+  actions: optional(array(object())),
+  confirmation: optional(actionConfigStructConfirmation),
+});
+
 const actionConfigStructNavigate = object({
   action: literal("navigate"),
   navigation_path: string(),
@@ -101,6 +107,9 @@ export const actionConfigStruct = dynamic<any>((value) => {
       case "more-info": {
         return actionConfigStructMoreInfo;
       }
+      case "sequence": {
+        return actionConfigStructSequence;
+      }
     }
   }
 

src/panels/lovelace/editor/structs/base-card-struct.ts

@@ -4,6 +4,5 @@ export const baseLovelaceCardConfig = object({
   type: string(),
   view_layout: any(),
   layout_options: any(),
-  grid_options: any(),
   visibility: any(),
 });

src/panels/lovelace/sections/hui-grid-section.ts

@@ -84,9 +84,9 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
             (_cardConfig, idx) => {
               const card = this.cards![idx];
               card.layout = "grid";
-              const gridOptions = card.getGridOptions();
+              const layoutOptions = card.getLayoutOptions();
 
-              const { rows, columns } = computeCardGridSize(gridOptions);
+              const { rows, columns } = computeCardGridSize(layoutOptions);
 
               return html`
                 <div
@@ -96,7 +96,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
                     "--row-size": typeof rows === "number" ? rows : undefined,
                   })}
                   class="card ${classMap({
-                    "fit-rows": typeof rows === "number",
+                    "fit-rows": typeof layoutOptions?.grid_rows === "number",
                     "full-width": columns === "full",
                   })}"
                 >
@@ -165,7 +165,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
       haStyle,
       css`
         :host {
-          --base-column-count: 12;
+          --base-column-count: 4;
           --row-gap: var(--ha-section-grid-row-gap, 8px);
           --column-gap: var(--ha-section-grid-column-gap, 8px);
           --row-height: var(--ha-section-grid-row-height, 56px);
@@ -230,8 +230,8 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
 
         .add {
           outline: none;
-          grid-row: span 1;
-          grid-column: span 6;
+          grid-row: span var(--row-size, 1);
+          grid-column: span var(--column-size, 2);
           background: none;
           cursor: pointer;
           border-radius: var(--ha-card-border-radius, 12px);

src/panels/lovelace/types.ts

@@ -51,23 +51,12 @@ export type LovelaceLayoutOptions = {
   grid_max_rows?: number;
 };
 
-export type LovelaceGridOptions = {
-  columns?: number | "full";
-  rows?: number | "auto";
-  max_columns?: number;
-  min_columns?: number;
-  min_rows?: number;
-  max_rows?: number;
-};
-
 export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   preview?: boolean;
   layout?: string;
   getCardSize(): number | Promise<number>;
-  /** @deprecated Use `getGridOptions` instead */
   getLayoutOptions?(): LovelaceLayoutOptions;
-  getGridOptions?(): LovelaceGridOptions;
   setConfig(config: LovelaceCardConfig): void;
 }
 

src/translations/en.json

@@ -1635,8 +1635,7 @@
           "zigbee_information": "View the Zigbee information for the device."
         },
         "confirmations": {
-          "remove_title": "Remove device",
-          "remove_text": "This device will be permanently removed from the Zigbee network."
+          "remove": "Are you sure that you want to remove the device?"
         },
         "quirk": "Quirk",
         "last_seen": "Last seen",
@@ -5645,9 +5644,7 @@
             },
             "layout": {
               "full_width": "Full width card",
-              "full_width_helper": "Take up the full width of the section whatever its size",
-              "precision_mode": "Precision mode",
-              "precision_mode_helper": "Change the card width with precision without limits"
+              "full_width_helper": "Take up the full width of the section whatever its size"
             }
           },
           "edit_badge": {
@@ -5755,10 +5752,12 @@
               "more-info": "More info",
               "toggle": "Toggle",
               "navigate": "Navigate",
+              "sequence": "Sequence",
               "assist": "Assist",
               "url": "URL",
               "none": "Nothing"
-            }
+            },
+            "sequence_actions": "Actions"
           },
           "condition-editor": {
             "explanation": "The card will be shown when ALL conditions below are fulfilled.",
@@ -6134,8 +6133,7 @@
             "todo-list": {
               "name": "To-do list",
               "description": "The to-do list card allows you to add, edit, check-off, and clear items from your to-do list.",
-              "integration_not_loaded": "This card requires the `todo` integration to be set up.",
-              "hide_completed": "Hide completed items"
+              "integration_not_loaded": "This card requires the `todo` integration to be set up."
             },
             "thermostat": {
               "name": "Thermostat",

yarn.lock

@@ -1451,15 +1451,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/commands@npm:6.7.0":
-  version: 6.7.0
-  resolution: "@codemirror/commands@npm:6.7.0"
+"@codemirror/commands@npm:6.6.2":
+  version: 6.6.2
+  resolution: "@codemirror/commands@npm:6.6.2"
   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/3f331b4c2f4e3cc029cbfd75946d85bf82b403dcaf4b0dd317ad0fff1018b872378adaae5d9f1c66a3a470f376fb270ea8578264b77d70b6aadeb545c984cb02
+  checksum: 10/345dc8b5f1fd11636dd4e8bf1923536008cf1aea555c60f81586cf92df5bd6596fa21df27c4ab30d2fdcc2559f4f61d1402fe92e50a21e0979606bcacc2f2534
   languageName: node
   linkType: hard
 
@@ -3899,13 +3899,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sindresorhus/merge-streams@npm:^2.1.0":
-  version: 2.3.0
-  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
-  checksum: 10/798bcb53cd1ace9df84fcdd1ba86afdc9e0cd84f5758d26ae9b1eefd8e8887e5fc30051132b9e74daf01bb41fa5a2faf1369361f83d76a3b3d7ee938058fd71c
-  languageName: node
-  linkType: hard
-
 "@sinonjs/commons@npm:^3.0.1":
   version: 3.0.1
   resolution: "@sinonjs/commons@npm:3.0.1"
@@ -4669,129 +4662,129 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/a11y-base@npm:24.4.11"
+"@vaadin/a11y-base@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/a11y-base@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.11"
+    "@vaadin/component-base": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/7329f5cd4fa1a94eb7b51832695bd9fc40ae2a6049ffd315b87045e10e19e98c16f58a573c6e766b2208b71f4c41581f514973393edd506bf120bf1c7f620ca1
+  checksum: 10/858b58837bc5d8762ab86906384c1fcf1f1cb65ab593b9b3962d0e6fd5cce956952a28d80d66dc2e1eddd68b36fbd04a65c0509f786f7fcea7352ecd1e8ff0a9
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/combo-box@npm:24.4.11"
+"@vaadin/combo-box@npm:24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/combo-box@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.11"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/field-base": "npm:~24.4.11"
-    "@vaadin/input-container": "npm:~24.4.11"
-    "@vaadin/item": "npm:~24.4.11"
-    "@vaadin/lit-renderer": "npm:~24.4.11"
-    "@vaadin/overlay": "npm:~24.4.11"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
-  checksum: 10/003bee4da780e33346290be47e02f42e822738b5fad5b56a3b2f1bd7f6f01baf8994a9275a311698c604e5c1ae5bf71dac2bc054f0295a5873b5a904bafb2da9
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/field-base": "npm:~24.4.10"
+    "@vaadin/input-container": "npm:~24.4.10"
+    "@vaadin/item": "npm:~24.4.10"
+    "@vaadin/lit-renderer": "npm:~24.4.10"
+    "@vaadin/overlay": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/327930d76cfc90d17d0966769f864e4918bd5e98ce5ba2bbe79dce1355faf803682ba0b3ec454a4060750037860362e0eb8d4f7ef80ed2c79b565d17f6c422cf
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/component-base@npm:24.4.11"
+"@vaadin/component-base@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/component-base@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
     "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
     "@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
     lit: "npm:^3.0.0"
-  checksum: 10/55e6a70583a7a67ecb460228c25df9b0456cb209e7b1940ab2ace59272ab1da1379079e156466cd9b0ef3d63a2a7dcf97b3c22883702d8b86596d284b592bc8e
+  checksum: 10/1cdba96a018accf9070b21560041b50288c081afd39ef3aeb841c7071f3ff5dfe1133d9dc86ba2ab68c4874db765caae50e47b405dd5a0d01d22110018133d01
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/field-base@npm:24.4.11"
+"@vaadin/field-base@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/field-base@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.11"
-    "@vaadin/component-base": "npm:~24.4.11"
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/ba43a2a71d97a46256e965bb712d4ff149caf58733cd9bb283fe4bf83dc4f69772c298527757c1b0ea0d89d6ffa4c14df5075d1bf006f714ae174b1e18975c99
+  checksum: 10/4b7f8c96810716a7e8338ca1c3d15ee3081bb4cd859bba44c1ac10d68ce2b3263878e8e4e135b71f5a51bbee30e8ff690c23bd740594553832248534f5e90ec8
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/icon@npm:24.4.11"
+"@vaadin/icon@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/icon@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/d6c850596540544ee1de844e4cb008c691732a5f6fa4a489e4bb1d8660b59103d29d6e6886a89a600b237dee79587f4b726dadc12e674824083d42efcf1a6ec8
+  checksum: 10/8fd33f6a9cde75cd93c8a76c2c4dcf3db83ffb0f77b814eac0e2991202495f87c015068ba58c4133d7e212926b3948ef940d828c75b2b5448a2376fbdbe30267
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/input-container@npm:24.4.11"
+"@vaadin/input-container@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/input-container@npm:24.4.10"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/60c5ae022c046c7b09978047d516ebd88169ed5958a65d1e22ca2153b5d9a4af0527f3efc0989498214ace4c3d5a1ea32a91c729a5da22771cb36b3b39f5e704
+  checksum: 10/a16b2dd4ac0dace3a575718fc097e0082142286bd75730283f70144fcb5bf7b1c49a04266c066f359e6910fbd2b93b9e1d44f4dd87f1c9eddc45bea9bc72e023
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/item@npm:24.4.11"
+"@vaadin/item@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/item@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.11"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
-  checksum: 10/4e16cf0b45c642957753fc091a6290d1b7f780045321fd7cd79c429455dd48704c768e0153ed7c53fd2d3721a52ad4202ef4a177860ee962a293763f64d7f1b9
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/f7e344d11b351c28fe13a342e383d3a0c28295387effd94ac08b0605d48ed636e2798918a2b3619f9ebbab3be59a3981c72c6503d2f8e7d80ef30769f941a6ef
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/lit-renderer@npm:24.4.11"
+"@vaadin/lit-renderer@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/lit-renderer@npm:24.4.10"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/5c0e2c7bf62c9117c1c8eb5c2be12d400a1599fbeb190ab70b3df7921296c9b8ed14867fe98a0ce9c2cba58bd56f7956e88b45245dcca61f5b14821bd83d85f2
+  checksum: 10/4794767d1ff99efc0dccdd2aeef4eb191a18f3b0f25236078f22c90327a91ca1e9199c8dc28c640ee312b1c82f04360970545d64cafc3a116cedac24992e082c
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/overlay@npm:24.4.11"
+"@vaadin/overlay@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/overlay@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.4.11"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-material-styles": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
+    "@vaadin/a11y-base": "npm:~24.4.10"
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-material-styles": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
     lit: "npm:^3.0.0"
-  checksum: 10/6042c905658960ae6adb12de7ab00d415a7305e9ab9d304da9c055dcd4b155af0a6b2e74df520eeb36f424239f6b3ecd8c6729852db98136396b01a1dfbfe767
+  checksum: 10/db07a22a6b7e925deef378d04981612a27123800cdf98fc5fcc73571a90eaa5910403954cf50873671f0fc27610820f261d4a7fd0cfc4e97416c3d568a89a012
   languageName: node
   linkType: hard
 
@@ -4802,36 +4795,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.4.11"
+"@vaadin/vaadin-lumo-styles@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.4.10"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/icon": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
-  checksum: 10/23486bcf4e0c4a5dba3ea3a51566f048e08fb63106ea23bda59e4ea6970f61b6f8758f643ec181536684e55ff87de17c9fbe207ff883b113cf111587fae7b994
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/icon": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/eabd0eecf6f8cc4b2a4acd2db5c77a47758f19ee0bfcdb0fe2ea28c6dedcd8b67e23ca0b31215ad5878d8f89a5c04adcfbfd5384d41cc1096c60990d3801dfa9
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/vaadin-material-styles@npm:24.4.11"
+"@vaadin/vaadin-material-styles@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/vaadin-material-styles@npm:24.4.10"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.4.11"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.4.11"
-  checksum: 10/e8f48c5e8c50ab24942b9e32515f950056595a858357d27f07234c69dbf282417a1b85c5eeed4af9abf706d3640ee645a5bcd1668b80cf88632c03b8bb4b7bbe
+    "@vaadin/component-base": "npm:~24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.4.10"
+  checksum: 10/eb4f71967059093ad705f95c62c1aef7e01ee8f9300b9af6261454d09791f05786b1ead9ec890b5aaf1491ba504f45f793ceb267d3bf318f5465f91faaa8f037
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.4.11, @vaadin/vaadin-themable-mixin@npm:~24.4.11":
-  version: 24.4.11
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.4.11"
+"@vaadin/vaadin-themable-mixin@npm:24.4.10, @vaadin/vaadin-themable-mixin@npm:~24.4.10":
+  version: 24.4.10
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.4.10"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
-  checksum: 10/efd5319e18045383b98e120c0a9f8caeee4c8eefc29b906edee6d0fafedf846ced9657f6869ceab8b069ac4112d9db7de0e626f54c6945d7dd2124cffeae2894
+  checksum: 10/d9b974854e67fd21059705d2641210b288b0a023245bf38fe29bf0819b8918c32f32e71c1abca8c10a6c8254be644a7e802e5d5c47241e339e9caa5702868135
   languageName: node
   linkType: hard
 
@@ -5358,6 +5351,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aggregate-error@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "aggregate-error@npm:4.0.1"
+  dependencies:
+    clean-stack: "npm:^4.0.0"
+    indent-string: "npm:^5.0.0"
+  checksum: 10/bb3ffdfd13447800fff237c2cba752c59868ee669104bb995dfbbe0b8320e967d679e683dabb640feb32e4882d60258165cde0baafc4cd467cc7d275a13ad6b5
+  languageName: node
+  linkType: hard
+
 "ajv-formats@npm:^2.1.1":
   version: 2.1.1
   resolution: "ajv-formats@npm:2.1.1"
@@ -6303,6 +6306,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-stack@npm:^4.0.0":
+  version: 4.2.0
+  resolution: "clean-stack@npm:4.2.0"
+  dependencies:
+    escape-string-regexp: "npm:5.0.0"
+  checksum: 10/373f656a31face5c615c0839213b9b542a0a48057abfb1df66900eab4dc2a5c6097628e4a0b5aa559cdfc4e66f8a14ea47be9681773165a44470ef5fb8ccc172
+  languageName: node
+  linkType: hard
+
 "cli-cursor@npm:^5.0.0":
   version: 5.0.0
   resolution: "cli-cursor@npm:5.0.0"
@@ -6948,17 +6960,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"del@npm:8.0.0":
-  version: 8.0.0
-  resolution: "del@npm:8.0.0"
+"del@npm:7.1.0":
+  version: 7.1.0
+  resolution: "del@npm:7.1.0"
   dependencies:
-    globby: "npm:^14.0.2"
+    globby: "npm:^13.1.2"
+    graceful-fs: "npm:^4.2.10"
     is-glob: "npm:^4.0.3"
     is-path-cwd: "npm:^3.0.0"
     is-path-inside: "npm:^4.0.0"
-    p-map: "npm:^7.0.2"
-    slash: "npm:^5.1.0"
-  checksum: 10/502dea7a846f989e1d921733f5d41ae4ae9b3eff168d335bfc050c9ce938ddc46198180be133814269268c4b0aed441a82fbace948c0ec5eed4ed086a4ad3b0e
+    p-map: "npm:^5.5.0"
+    rimraf: "npm:^3.0.2"
+    slash: "npm:^4.0.0"
+  checksum: 10/93527e78e95125809ff20a112814b00648ed64af204be1a565862698060c9ec8f5c5fe1a4866725acfde9b0da6423f4b7a7642c1d38cd4b05cbeb643a7b089e3
   languageName: node
   linkType: hard
 
@@ -7434,6 +7448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escape-string-regexp@npm:5.0.0":
+  version: 5.0.0
+  resolution: "escape-string-regexp@npm:5.0.0"
+  checksum: 10/20daabe197f3cb198ec28546deebcf24b3dbb1a5a269184381b3116d12f0532e06007f4bc8da25669d6a7f8efb68db0758df4cd981f57bc5b57f521a3e12c59e
+  languageName: node
+  linkType: hard
+
 "escape-string-regexp@npm:^1.0.5":
   version: 1.0.5
   resolution: "escape-string-regexp@npm:1.0.5"
@@ -7600,15 +7621,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-wc@npm:2.2.0":
-  version: 2.2.0
-  resolution: "eslint-plugin-wc@npm:2.2.0"
+"eslint-plugin-wc@npm:2.1.1":
+  version: 2.1.1
+  resolution: "eslint-plugin-wc@npm:2.1.1"
   dependencies:
     is-valid-element-name: "npm:^1.0.0"
     js-levenshtein-esm: "npm:^1.2.0"
   peerDependencies:
-    eslint: ">=8.40.0"
-  checksum: 10/12ffc021f0e5a42d97b782e92f249fad923d7c1af4c2603384482c8371e72bbd6084891b14928cae71084e0a8cef9ad914acf746aad9cdaca6cd6212e499513d
+    eslint: ">=5"
+  checksum: 10/230e7f6fcc41c2c47cb5d4cdea7cf58059545dc2b7405a24b7b5a97d28b4497fa4c39409e7a7d83d45a580938de9fa887edd53f368a54e03c3900e29dcd2879e
   languageName: node
   linkType: hard
 
@@ -7924,7 +7945,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -8628,17 +8649,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^14.0.2":
-  version: 14.0.2
-  resolution: "globby@npm:14.0.2"
+"globby@npm:^13.1.2":
+  version: 13.2.2
+  resolution: "globby@npm:13.2.2"
   dependencies:
-    "@sindresorhus/merge-streams": "npm:^2.1.0"
-    fast-glob: "npm:^3.3.2"
+    dir-glob: "npm:^3.0.1"
+    fast-glob: "npm:^3.3.0"
     ignore: "npm:^5.2.4"
-    path-type: "npm:^5.0.0"
-    slash: "npm:^5.1.0"
-    unicorn-magic: "npm:^0.1.0"
-  checksum: 10/67660da70fc1223f7170c1a62ba6c373385e9e39765d952b6518606dec15ed8c7958e9dae6ba5752a31dbc1e9126f146938b830ad680fe794141734ffc3fbb75
+    merge2: "npm:^1.4.1"
+    slash: "npm:^4.0.0"
+  checksum: 10/4494a9d2162a7e4d327988b26be66d8eab87d7f59a83219e74b065e2c3ced23698f68fb10482bf9337133819281803fb886d6ae06afbb2affa743623eb0b1949
   languageName: node
   linkType: hard
 
@@ -8877,7 +8897,7 @@ __metadata:
     "@braintree/sanitize-url": "npm:7.1.0"
     "@bundle-stats/plugin-webpack-filter": "npm:4.15.1"
     "@codemirror/autocomplete": "npm:6.18.1"
-    "@codemirror/commands": "npm:6.7.0"
+    "@codemirror/commands": "npm:6.6.2"
     "@codemirror/language": "npm:6.10.3"
     "@codemirror/legacy-modes": "npm:6.4.1"
     "@codemirror/search": "npm:6.5.6"
@@ -8969,8 +8989,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.11"
-    "@vaadin/vaadin-themable-mixin": "npm:24.4.11"
+    "@vaadin/combo-box": "npm:24.4.10"
+    "@vaadin/vaadin-themable-mixin": "npm:24.4.10"
     "@vibrant/color": "npm:3.2.1-alpha.1"
     "@vibrant/core": "npm:3.2.1-alpha.1"
     "@vibrant/quantizer-mmcq": "npm:3.2.1-alpha.1"
@@ -8993,7 +9013,7 @@ __metadata:
     date-fns-tz: "npm:3.2.0"
     deep-clone-simple: "npm:1.1.1"
     deep-freeze: "npm:0.0.1"
-    del: "npm:8.0.0"
+    del: "npm:7.1.0"
     dialog-polyfill: "npm:0.5.6"
     element-internals-polyfill: "npm:1.3.11"
     eslint: "npm:8.57.1"
@@ -9005,7 +9025,7 @@ __metadata:
     eslint-plugin-lit: "npm:1.15.0"
     eslint-plugin-lit-a11y: "npm:4.1.4"
     eslint-plugin-unused-imports: "npm:4.1.4"
-    eslint-plugin-wc: "npm:2.2.0"
+    eslint-plugin-wc: "npm:2.1.1"
     fancy-log: "npm:2.0.0"
     fs-extra: "npm:11.2.0"
     fuse.js: "npm:7.0.0"
@@ -9399,6 +9419,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"indent-string@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "indent-string@npm:5.0.0"
+  checksum: 10/e466c27b6373440e6d84fbc19e750219ce25865cb82d578e41a6053d727e5520dc5725217d6eb1cc76005a1bb1696a0f106d84ce7ebda3033b963a38583fb3b3
+  languageName: node
+  linkType: hard
+
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -11643,10 +11670,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-map@npm:^7.0.2":
-  version: 7.0.2
-  resolution: "p-map@npm:7.0.2"
-  checksum: 10/b4a590038b991c17b9c1484aa8c24cb9d3aa8a6167d02b9f9459c9200c7d392202a860c95b6dcd190d51f5f083ed256b32f9cb5976785022b0111bab853ec58b
+"p-map@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "p-map@npm:5.5.0"
+  dependencies:
+    aggregate-error: "npm:^4.0.0"
+  checksum: 10/089a709d2525208a965b7907cc8e58af950542629b538198fc142c40e7f36b3b492dd6a46a1279515ccab58bb6f047e04593c0ab5ef4539d312adf7f761edf55
   languageName: node
   linkType: hard
 
@@ -11926,13 +11955,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-type@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "path-type@npm:5.0.0"
-  checksum: 10/15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
-  languageName: node
-  linkType: hard
-
 "pathval@npm:^2.0.0":
   version: 2.0.0
   resolution: "pathval@npm:2.0.0"
@@ -13103,10 +13125,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slash@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "slash@npm:5.1.0"
-  checksum: 10/2c41ec6fb1414cd9bba0fa6b1dd00e8be739e3fe85d079c69d4b09ca5f2f86eafd18d9ce611c0c0f686428638a36c272a6ac14799146a8295f259c10cc45cde4
+"slash@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "slash@npm:4.0.0"
+  checksum: 10/da8e4af73712253acd21b7853b7e0dbba776b786e82b010a5bfc8b5051a1db38ed8aba8e1e8f400dd2c9f373be91eb1c42b66e91abb407ff42b10feece5e1d2d
   languageName: node
   linkType: hard
 
@@ -14356,13 +14378,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unicorn-magic@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "unicorn-magic@npm:0.1.0"
-  checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"