Revert

* Fix hui-conditional-row causing varying row margins.

* Update row gap CSS var

* Apply suggestion from @bramkragten

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Apply suggestion from @bramkragten

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Apply suggestion from @bramkragten

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Use row-visibility-change method fired in hui-conditional-row

* Update to pass row in row-visibility-changed event

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/autobuild@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/analyze@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         with:
           files: |
             dist/*.whl
@@ -108,7 +108,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -137,6 +137,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
+        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

package.json

@@ -37,15 +37,15 @@
     "@codemirror/view": "6.38.4",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.0",
+    "@formatjs/intl-datetimeformat": "6.18.1",
-    "@formatjs/intl-displaynames": "6.8.11",
+    "@formatjs/intl-displaynames": "6.8.12",
-    "@formatjs/intl-durationformat": "0.7.4",
+    "@formatjs/intl-durationformat": "0.7.5",
-    "@formatjs/intl-getcanonicallocales": "2.5.5",
+    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.11",
+    "@formatjs/intl-listformat": "7.7.12",
-    "@formatjs/intl-locale": "4.2.11",
+    "@formatjs/intl-locale": "4.2.12",
-    "@formatjs/intl-numberformat": "8.15.4",
+    "@formatjs/intl-numberformat": "8.15.5",
-    "@formatjs/intl-pluralrules": "5.4.4",
+    "@formatjs/intl-pluralrules": "5.4.5",
-    "@formatjs/intl-relativetimeformat": "11.4.11",
+    "@formatjs/intl-relativetimeformat": "11.4.12",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/interaction": "6.1.19",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.1",
+    "@vaadin/combo-box": "24.9.2",
-    "@vaadin/vaadin-themable-mixin": "24.9.1",
+    "@vaadin/vaadin-themable-mixin": "24.9.2",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -114,7 +114,7 @@
     "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.16",
+    "intl-messageformat": "10.7.17",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -183,7 +183,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.36.0",
+    "eslint": "9.37.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",

src/common/controllers/undo-redo-controller.ts

@@ -0,0 +1,141 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+
+const UNDO_REDO_STACK_LIMIT = 75;
+
+/**
+ * Configuration options for the UndoRedoController.
+ *
+ * @template ConfigType The type of configuration to manage.
+ */
+export interface UndoRedoControllerConfig<ConfigType> {
+  stackLimit?: number;
+  currentConfig: () => ConfigType;
+  apply: (config: ConfigType) => void;
+}
+
+/**
+ * A controller to manage undo and redo operations for a given configuration type.
+ *
+ * @template ConfigType The type of configuration to manage.
+ */
+export class UndoRedoController<ConfigType> implements ReactiveController {
+  private _host: ReactiveControllerHost;
+
+  private _undoStack: ConfigType[] = [];
+
+  private _redoStack: ConfigType[] = [];
+
+  private readonly _stackLimit: number = UNDO_REDO_STACK_LIMIT;
+
+  private readonly _apply: (config: ConfigType) => void = () => {
+    throw new Error("No apply function provided");
+  };
+
+  private readonly _currentConfig: () => ConfigType = () => {
+    throw new Error("No currentConfig function provided");
+  };
+
+  constructor(
+    host: ReactiveControllerHost,
+    options: UndoRedoControllerConfig<ConfigType>
+  ) {
+    if (options.stackLimit !== undefined) {
+      this._stackLimit = options.stackLimit;
+    }
+
+    this._apply = options.apply;
+    this._currentConfig = options.currentConfig;
+    this._host = host;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    window.addEventListener("undo-change", this._onUndoChange);
+  }
+
+  hostDisconnected() {
+    window.removeEventListener("undo-change", this._onUndoChange);
+  }
+
+  private _onUndoChange = (ev: Event) => {
+    ev.stopPropagation();
+    this.undo();
+    this._host.requestUpdate();
+  };
+
+  /**
+   * Indicates whether there are actions available to undo.
+   *
+   * @returns `true` if there are actions to undo, `false` otherwise.
+   */
+  public get canUndo(): boolean {
+    return this._undoStack.length > 0;
+  }
+
+  /**
+   * Indicates whether there are actions available to redo.
+   *
+   * @returns `true` if there are actions to redo, `false` otherwise.
+   */
+  public get canRedo(): boolean {
+    return this._redoStack.length > 0;
+  }
+
+  /**
+   * Commits the current configuration to the undo stack and clears the redo stack.
+   *
+   * @param config The current configuration to commit.
+   */
+  public commit(config: ConfigType) {
+    if (this._undoStack.length >= this._stackLimit) {
+      this._undoStack.shift();
+    }
+    this._undoStack.push({ ...config });
+    this._redoStack = [];
+  }
+
+  /**
+   * Undoes the last action and applies the previous configuration
+   * while saving the current configuration to the redo stack.
+   */
+  public undo() {
+    if (this._undoStack.length === 0) {
+      return;
+    }
+    this._redoStack.push({ ...this._currentConfig() });
+    const config = this._undoStack.pop()!;
+    this._apply(config);
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Redoes the last undone action and reapplies the configuration
+   * while saving the current configuration to the undo stack.
+   */
+  public redo() {
+    if (this._redoStack.length === 0) {
+      return;
+    }
+    this._undoStack.push({ ...this._currentConfig() });
+    const config = this._redoStack.pop()!;
+    this._apply(config);
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Resets the undo and redo stacks, clearing all history.
+   */
+  public reset() {
+    this._undoStack = [];
+    this._redoStack = [];
+  }
+}
+
+declare global {
+  interface HASSDomEvents {
+    "undo-change": undefined;
+  }
+}

src/common/dom/is-navigation-click.ts

@@ -31,10 +31,10 @@ export const isNavigationClick = (e: MouseEvent, preventDefault = true) => {
 
   const location = window.location;
   const origin = location.origin || location.protocol + "//" + location.host;
-  if (href.indexOf(origin) !== 0) {
+  if (!href.startsWith(origin)) {
     return undefined;
   }
-  href = href.substr(origin.length);
+  href = href.slice(origin.length);
 
   if (href === "#") {
     return undefined;

src/common/dom/view_transition.ts

@@ -0,0 +1,53 @@
+/**
+ * Trigger a view transition if supported by the browser
+ * @param updateCallback - Callback function that updates the DOM
+ * @returns Promise that resolves when the transition is complete
+ */
+export const startViewTransition = async (
+  updateCallback: () => void | Promise<void>
+): Promise<void> => {
+  // Check if View Transitions API is supported
+  if (
+    !document.startViewTransition ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    // Fallback: just run the update without transition
+    await updateCallback();
+    return;
+  }
+
+  // Start the view transition
+  const transition = document.startViewTransition(async () => {
+    await updateCallback();
+  });
+
+  try {
+    await transition.finished;
+  } catch (error) {
+    // Transitions can be skipped, which is fine
+    // eslint-disable-next-line no-console
+    console.debug("View transition skipped or failed:", error);
+  }
+};
+
+/**
+ * Helper to apply view transition on first render
+ * @param _element - The element to observe (unused, kept for API consistency)
+ * @param callback - Callback when element is first rendered
+ */
+export const applyViewTransitionOnLoad = (
+  _element: HTMLElement,
+  callback?: () => void
+): void => {
+  if (!document.startViewTransition) {
+    callback?.();
+    return;
+  }
+
+  // Use requestAnimationFrame to ensure DOM is ready
+  requestAnimationFrame(() => {
+    startViewTransition(() => {
+      callback?.();
+    });
+  });
+};

src/common/entity/compute_object_id.ts

@@ -1,3 +1,3 @@
 /** Compute the object ID of a state. */
 export const computeObjectId = (entityId: string): string =>
-  entityId.substr(entityId.indexOf(".") + 1);
+  entityId.slice(entityId.indexOf(".") + 1);

src/common/util/parse-aspect-ratio.ts

@@ -14,7 +14,7 @@ export default function parseAspectRatio(input: string) {
   }
   try {
     if (input.endsWith("%")) {
-      return { w: 100, h: parseOrThrow(input.substr(0, input.length - 1)) };
+      return { w: 100, h: parseOrThrow(input.slice(0, -1)) };
     }
 
     const arr = input.replace(":", "x").split("x");

src/components/entity/ha-statistic-picker.ts

@@ -20,6 +20,7 @@ import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-icon-button";
+import "../ha-input-helper-text";
 import type {
   PickerComboBoxItem,
   PickerComboBoxSearchFn,
@@ -464,7 +465,6 @@ export class HaStatisticPicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
-        .helper=${this.helper}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-button.ts

@@ -41,8 +41,7 @@ export class HaButton extends Button {
     return [
       Button.styles,
       css`
-        .button {
+        :host {
-          /* set theme vars */
           --wa-form-control-padding-inline: 16px;
           --wa-font-weight-action: var(--ha-font-weight-medium);
           --wa-form-control-border-radius: var(
@@ -54,7 +53,8 @@ export class HaButton extends Button {
             --ha-button-height,
             var(--button-height, 40px)
           );
-
+        }
+        .button {
           font-size: var(--ha-font-size-m);
           line-height: 1;
 
@@ -223,6 +223,12 @@ export class HaButton extends Button {
         .button.has-end {
           padding-inline-end: 8px;
         }
+
+        .label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding: var(--ha-space-1) 0;
+        }
       `,
     ];
   }

src/components/ha-hls-player.ts

@@ -321,7 +321,7 @@ class HaHLSPlayer extends LitElement {
               } else if (data.response.code >= 400) {
                 error += " (Stream never started)";
               } else {
-                error += " (" + data.response.code + ")";
+                error += ` (${data.response.code})`;
               }
             }
             this._setRetryableError(error);

src/data/energy.ts

@@ -102,7 +102,6 @@ export type EnergySolarForecasts = Record<string, EnergySolarForecast>;
 export interface DeviceConsumptionEnergyPreference {
   // This is an ever increasing value
   stat_consumption: string;
-  stat_power?: string;
   name?: string;
   included_in_stat?: string;
 }
@@ -110,8 +109,6 @@ export interface DeviceConsumptionEnergyPreference {
 export interface FlowFromGridSourceEnergyPreference {
   // kWh meter
   stat_energy_from: string;
-  // W meter
-  stat_power_from?: string;
 
   // $ meter
   stat_cost: string | null;
@@ -124,8 +121,6 @@ export interface FlowFromGridSourceEnergyPreference {
 export interface FlowToGridSourceEnergyPreference {
   // kWh meter
   stat_energy_to: string;
-  // W meter
-  stat_power_to?: string;
 
   // $ meter
   stat_compensation: string | null;
@@ -148,7 +143,6 @@ export interface SolarSourceTypeEnergyPreference {
   type: "solar";
 
   stat_energy_from: string;
-  stat_power_from?: string;
   config_entry_solar_forecast: string[] | null;
 }
 
@@ -156,8 +150,6 @@ export interface BatterySourceTypeEnergyPreference {
   type: "battery";
   stat_energy_from: string;
   stat_energy_to: string;
-  stat_power_from?: string;
-  stat_power_to?: string;
 }
 export interface GasSourceTypeEnergyPreference {
   type: "gas";

src/dialogs/more-info/ha-more-info-settings.ts

@@ -70,9 +70,7 @@ export class HaMoreInfoSettings extends LitElement {
     if (!this.entry) {
       return;
     }
-    if (
+    if (!(this.entry.platform in PLATFORMS_WITH_SETTINGS_TAB)) {
-      !Object.keys(PLATFORMS_WITH_SETTINGS_TAB).includes(this.entry.platform)
-    ) {
       this._settingsElementTag = "entity-registry-settings";
       return;
     }

src/fake_data/provide_hass.ts

@@ -167,7 +167,7 @@ export const provideHass = (
   }
 
   mockAPI(/states\/.+/, (_method, path, parameters) => {
-    const [domain, objectId] = path.substr(7).split(".", 2);
+    const [domain, objectId] = path.slice(7).split(".", 2);
     if (!domain || !objectId) {
       return;
     }

src/mixins/undo-redo-mixin.ts

@@ -1,60 +0,0 @@
-import type { LitElement } from "lit";
-import type { Constructor } from "../types";
-
-export const UndoRedoMixin = <T extends Constructor<LitElement>, ConfigType>(
-  superClass: T
-) => {
-  class UndoRedoClass extends superClass {
-    private _undoStack: ConfigType[] = [];
-
-    private _redoStack: ConfigType[] = [];
-
-    protected _undoStackLimit = 75;
-
-    protected pushToUndo(config: ConfigType) {
-      if (this._undoStack.length >= this._undoStackLimit) {
-        this._undoStack.shift();
-      }
-      this._undoStack.push({ ...config });
-      this._redoStack = [];
-    }
-
-    public undo() {
-      const currentConfig = this.currentConfig;
-      if (this._undoStack.length === 0 || !currentConfig) {
-        return;
-      }
-      this._redoStack.push({ ...currentConfig });
-      const config = this._undoStack.pop()!;
-      this.applyUndoRedo(config);
-    }
-
-    public redo() {
-      const currentConfig = this.currentConfig;
-      if (this._redoStack.length === 0 || !currentConfig) {
-        return;
-      }
-      this._undoStack.push({ ...currentConfig });
-      const config = this._redoStack.pop()!;
-      this.applyUndoRedo(config);
-    }
-
-    public get canUndo(): boolean {
-      return this._undoStack.length > 0;
-    }
-
-    public get canRedo(): boolean {
-      return this._redoStack.length > 0;
-    }
-
-    protected get currentConfig(): ConfigType | undefined {
-      return undefined;
-    }
-
-    protected applyUndoRedo(_: ConfigType) {
-      throw new Error("applyUndoRedo not implemented");
-    }
-  }
-
-  return UndoRedoClass;
-};

src/onboarding/onboarding-restore-backup.ts

@@ -209,9 +209,7 @@ class OnboardingRestoreBackup extends LitElement {
       }
 
       if (this._cloudStatus?.logged_in && !this._backupId) {
-        this._backup = backups.find(({ agents }) =>
+        this._backup = backups.find(({ agents }) => CLOUD_AGENT in agents);
-          Object.keys(agents).includes(CLOUD_AGENT)
-        );
 
         if (!this._backup) {
           this._view = "empty_cloud";

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -70,7 +70,6 @@ import { describeAction } from "../../../../data/script_i18n";
 import { callExecuteScript } from "../../../../data/service";
 import {
   showAlertDialog,
-  showConfirmationDialog,
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
@@ -650,21 +649,19 @@ export default class HaAutomationActionRow extends LitElement {
   };
 
   private _onDelete = () => {
-    showConfirmationDialog(this, {
+    fireEvent(this, "value-changed", { value: null });
-      title: this.hass.localize(
+    if (this._selected) {
-        "ui.panel.config.automation.editor.actions.delete_confirm_title"
+      fireEvent(this, "close-sidebar");
-      ),
+    }
-      text: this.hass.localize(
+
-        "ui.panel.config.automation.editor.actions.delete_confirm_text"
+    showToast(this, {
-      ),
+      message: this.hass.localize("ui.common.successfully_deleted"),
-      dismissText: this.hass.localize("ui.common.cancel"),
+      duration: 4000,
-      confirmText: this.hass.localize("ui.common.delete"),
+      action: {
-      destructive: true,
+        text: this.hass.localize("ui.common.undo"),
-      confirm: () => {
+        action: () => {
-        fireEvent(this, "value-changed", { value: null });
+          fireEvent(window, "undo-change");
-        if (this._selected) {
+        },
-          fireEvent(this, "close-sidebar");
-        }
       },
     });
   };

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -53,7 +53,6 @@ import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity_registry";
 import {
   showAlertDialog,
-  showConfirmationDialog,
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
@@ -532,21 +531,19 @@ export default class HaAutomationConditionRow extends LitElement {
   };
 
   private _onDelete = () => {
-    showConfirmationDialog(this, {
+    fireEvent(this, "value-changed", { value: null });
-      title: this.hass.localize(
+    if (this._selected) {
-        "ui.panel.config.automation.editor.conditions.delete_confirm_title"
+      fireEvent(this, "close-sidebar");
-      ),
+    }
-      text: this.hass.localize(
+
-        "ui.panel.config.automation.editor.conditions.delete_confirm_text"
+    showToast(this, {
-      ),
+      message: this.hass.localize("ui.common.successfully_deleted"),
-      dismissText: this.hass.localize("ui.common.cancel"),
+      duration: 4000,
-      confirmText: this.hass.localize("ui.common.delete"),
+      action: {
-      destructive: true,
+        text: this.hass.localize("ui.common.undo"),
-      confirm: () => {
+        action: () => {
-        fireEvent(this, "value-changed", { value: null });
+          fireEvent(window, "undo-change");
-        if (this._selected) {
+        },
-          fireEvent(this, "close-sidebar");
-        }
       },
     });
   };

src/panels/config/automation/ha-automation-editor.ts

@@ -74,7 +74,7 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
-import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
+import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
@@ -111,12 +111,9 @@ declare global {
   }
 }
 
-const baseEditorMixins = PreventUnsavedMixin(KeyboardShortcutMixin(LitElement));
+export class HaAutomationEditor extends PreventUnsavedMixin(
-
+  KeyboardShortcutMixin(LitElement)
-export class HaAutomationEditor extends UndoRedoMixin<
+) {
-  typeof baseEditorMixins,
-  AutomationConfig
->(baseEditorMixins) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public automationId: string | null = null;
@@ -183,6 +180,11 @@ export class HaAutomationEditor extends UndoRedoMixin<
     value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
   ) => void;
 
+  private _undoRedoController = new UndoRedoController<AutomationConfig>(this, {
+    apply: (config) => this._applyUndoRedo(config),
+    currentConfig: () => this._config!,
+  });
+
   protected willUpdate(changedProps) {
     super.willUpdate(changedProps);
 
@@ -235,8 +237,8 @@ export class HaAutomationEditor extends UndoRedoMixin<
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.undo")}
                 .path=${mdiUndo}
-                @click=${this.undo}
+                @click=${this._undo}
-                .disabled=${!this.canUndo}
+                .disabled=${!this._undoRedoController.canUndo}
                 id="button-undo"
               >
               </ha-icon-button>
@@ -253,8 +255,8 @@ export class HaAutomationEditor extends UndoRedoMixin<
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
-                @click=${this.redo}
+                @click=${this._redo}
-                .disabled=${!this.canRedo}
+                .disabled=${!this._undoRedoController.canRedo}
                 id="button-redo"
               >
               </ha-icon-button>
@@ -298,16 +300,16 @@ export class HaAutomationEditor extends UndoRedoMixin<
           ${this._mode === "gui" && this.narrow
             ? html`<ha-list-item
                   graphic="icon"
-                  @click=${this.undo}
+                  @click=${this._undo}
-                  .disabled=${!this.canUndo}
+                  .disabled=${!this._undoRedoController.canUndo}
                 >
                   ${this.hass.localize("ui.common.undo")}
                   <ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon>
                 </ha-list-item>
                 <ha-list-item
                   graphic="icon"
-                  @click=${this.redo}
+                  @click=${this._redo}
-                  .disabled=${!this.canRedo}
+                  .disabled=${!this._undoRedoController.canRedo}
                 >
                   ${this.hass.localize("ui.common.redo")}
                   <ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon>
@@ -518,7 +520,6 @@ export class HaAutomationEditor extends UndoRedoMixin<
                           @value-changed=${this._valueChanged}
                           @save-automation=${this._handleSaveAutomation}
                           @editor-save=${this._handleSaveAutomation}
-                          @undo-paste=${this.undo}
                         >
                           <div class="alert-wrapper" slot="alerts">
                             ${this._errors || stateObj?.state === UNAVAILABLE
@@ -791,7 +792,7 @@ export class HaAutomationEditor extends UndoRedoMixin<
     ev.stopPropagation();
 
     if (this._config) {
-      this.pushToUndo(this._config);
+      this._undoRedoController.commit(this._config);
     }
 
     this._config = ev.detail.value;
@@ -1202,9 +1203,9 @@ export class HaAutomationEditor extends UndoRedoMixin<
       x: () => this._cutSelectedRow(),
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
-      z: () => this.undo(),
+      z: () => this._undo(),
-      Z: () => this.redo(),
+      Z: () => this._redo(),
-      y: () => this.redo(),
+      y: () => this._redo(),
     };
   }
 
@@ -1238,16 +1239,20 @@ export class HaAutomationEditor extends UndoRedoMixin<
     this._manualEditor?.deleteSelectedRow();
   }
 
-  protected get currentConfig() {
+  private _applyUndoRedo(config: AutomationConfig) {
-    return this._config;
-  }
-
-  protected applyUndoRedo(config: AutomationConfig) {
     this._manualEditor?.triggerCloseSidebar();
     this._config = config;
     this._dirty = true;
   }
 
+  private _undo() {
+    this._undoRedoController.undo();
+  }
+
+  private _redo() {
+    this._undoRedoController.redo();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/automation/manual-automation-editor.ts

@@ -616,7 +616,7 @@ export class HaManualAutomationEditor extends LitElement {
       action: {
         text: this.hass.localize("ui.common.undo"),
         action: () => {
-          fireEvent(this, "undo-paste");
+          fireEvent(this, "undo-change");
 
           this._pastedConfig = undefined;
         },
@@ -742,6 +742,5 @@ declare global {
     "open-sidebar": SidebarConfig;
     "request-close-sidebar": undefined;
     "close-sidebar": undefined;
-    "undo-paste": undefined;
   }
 }

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -33,10 +33,7 @@ import { describeCondition } from "../../../../data/automation_i18n";
 import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity_registry";
 import type { Action, Option } from "../../../../data/script";
-import {
+import { showPromptDialog } from "../../../../dialogs/generic/show-dialog-box";
-  showConfirmationDialog,
-  showPromptDialog,
-} from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import "../action/ha-automation-action";
@@ -49,6 +46,7 @@ import {
   overflowStyles,
   rowStyles,
 } from "../styles";
+import { showToast } from "../../../../util/toast";
 
 @customElement("ha-automation-option-row")
 export default class HaAutomationOptionRow extends LitElement {
@@ -365,23 +363,21 @@ export default class HaAutomationOptionRow extends LitElement {
 
   private _removeOption = () => {
     if (this.option) {
-      showConfirmationDialog(this, {
+      fireEvent(this, "value-changed", {
-        title: this.hass.localize(
+        value: null,
-          "ui.panel.config.automation.editor.actions.type.choose.delete_confirm_title"
+      });
-        ),
+      if (this._selected) {
-        text: this.hass.localize(
+        fireEvent(this, "close-sidebar");
-          "ui.panel.config.automation.editor.actions.delete_confirm_text"
+      }
-        ),
+
-        dismissText: this.hass.localize("ui.common.cancel"),
+      showToast(this, {
-        confirmText: this.hass.localize("ui.common.delete"),
+        message: this.hass.localize("ui.common.successfully_deleted"),
-        destructive: true,
+        duration: 4000,
-        confirm: () => {
+        action: {
-          fireEvent(this, "value-changed", {
+          text: this.hass.localize("ui.common.undo"),
-            value: null,
+          action: () => {
-          });
+            fireEvent(window, "undo-change");
-          if (this._selected) {
+          },
-            fireEvent(this, "close-sidebar");
-          }
         },
       });
     }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -53,7 +53,6 @@ import type { EntityRegistryEntry } from "../../../../data/entity_registry";
 import { TRIGGER_ICONS, isTriggerList } from "../../../../data/trigger";
 import {
   showAlertDialog,
-  showConfirmationDialog,
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
@@ -603,22 +602,20 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _onDelete = () => {
-    showConfirmationDialog(this, {
+    fireEvent(this, "value-changed", { value: null });
-      title: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.delete_confirm_title"
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.delete_confirm_text"
-      ),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      confirmText: this.hass.localize("ui.common.delete"),
-      destructive: true,
-      confirm: () => {
-        fireEvent(this, "value-changed", { value: null });
 
-        if (this._selected) {
+    if (this._selected) {
-          fireEvent(this, "close-sidebar");
+      fireEvent(this, "close-sidebar");
-        }
+    }
+
+    showToast(this, {
+      message: this.hass.localize("ui.common.successfully_deleted"),
+      duration: 4000,
+      action: {
+        text: this.hass.localize("ui.common.undo"),
+        action: () => {
+          fireEvent(window, "undo-change");
+        },
       },
     });
   };

src/panels/config/backup/ha-config-backup-backups.ts

@@ -71,6 +71,9 @@ import { showGenerateBackupDialog } from "./dialogs/show-dialog-generate-backup"
 import { showNewBackupDialog } from "./dialogs/show-dialog-new-backup";
 import { showUploadBackupDialog } from "./dialogs/show-dialog-upload-backup";
 import { downloadBackup } from "./helper/download_backup";
+import type { HaMdMenu } from "../../../components/ha-md-menu";
+import "../../../components/ha-md-menu";
+import "../../../components/ha-md-menu-item";
 
 interface BackupRow extends DataTableRowData, BackupContent {
   formatted_type: string;
@@ -120,6 +123,10 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
+  @query("#overflow-menu") private _overflowMenu?: HaMdMenu;
+
+  private _overflowBackup?: BackupContent;
+
   public connectedCallback() {
     super.connectedCallback();
     window.addEventListener("location-changed", this._locationChanged);
@@ -254,24 +261,12 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         hideable: false,
         type: "overflow-menu",
         template: (backup) => html`
-          <ha-icon-overflow-menu
+          <ha-icon-button
-            .hass=${this.hass}
+            .selected=${backup}
-            narrow
+            .label=${this.hass.localize("ui.common.overflow_menu")}
-            .items=${[
+            .path=${mdiDotsVertical}
-              {
+            @click=${this._toggleOverflowMenu}
-                label: this.hass.localize("ui.common.download"),
+          ></ha-icon-button>
-                path: mdiDownload,
-                action: () => this._downloadBackup(backup),
-              },
-              {
-                label: this.hass.localize("ui.common.delete"),
-                path: mdiDelete,
-                action: () => this._deleteBackup(backup),
-                warning: true,
-              },
-            ]}
-          >
-          </ha-icon-overflow-menu>
         `,
       },
     })
@@ -290,6 +285,20 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         : undefined
   );
 
+  private _toggleOverflowMenu = (ev) => {
+    if (!this._overflowMenu) {
+      return;
+    }
+
+    if (this._overflowMenu.open) {
+      this._overflowMenu.close();
+      return;
+    }
+    this._overflowBackup = ev.target.selected;
+    this._overflowMenu.anchorElement = ev.target;
+    this._overflowMenu.show();
+  };
+
   private _handleGroupingChanged(ev: CustomEvent) {
     this._activeGrouping = ev.detail.value;
   }
@@ -366,14 +375,16 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         clickable
         id="backup_id"
         has-filters
-        .filters=${Object.values(this._filters).filter((filter) =>
+        .filters=${
-          Array.isArray(filter)
+          Object.values(this._filters).filter((filter) =>
-            ? filter.length
+            Array.isArray(filter)
-            : filter &&
+              ? filter.length
-              Object.values(filter).some((val) =>
+              : filter &&
-                Array.isArray(val) ? val.length : val
+                Object.values(filter).some((val) =>
-              )
+                  Array.isArray(val) ? val.length : val
-        ).length}
+                )
+          ).length
+        }
         selectable
         .selected=${this._selected.length}
         .initialGroupColumn=${this._activeGrouping}
@@ -415,28 +426,30 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         </div>
 
         <div slot="selection-bar">
-          ${!this.narrow
+          ${
-            ? html`
+            !this.narrow
-                <ha-button
+              ? html`
-                  appearance="plain"
+                  <ha-button
-                  @click=${this._deleteSelected}
+                    appearance="plain"
-                  variant="danger"
+                    @click=${this._deleteSelected}
-                >
+                    variant="danger"
-                  ${this.hass.localize(
+                  >
-                    "ui.panel.config.backup.backups.delete_selected"
+                    ${this.hass.localize(
-                  )}
+                      "ui.panel.config.backup.backups.delete_selected"
-                </ha-button>
+                    )}
-              `
+                  </ha-button>
-            : html`
+                `
-                <ha-icon-button
+              : html`
-                  .label=${this.hass.localize(
+                  <ha-icon-button
-                    "ui.panel.config.backup.backups.delete_selected"
+                    .label=${this.hass.localize(
-                  )}
+                      "ui.panel.config.backup.backups.delete_selected"
-                  .path=${mdiDelete}
+                    )}
-                  class="warning"
+                    .path=${mdiDelete}
-                  @click=${this._deleteSelected}
+                    class="warning"
-                ></ha-icon-button>
+                    @click=${this._deleteSelected}
-              `}
+                  ></ha-icon-button>
+                `
+          }
         </div>
 
         <ha-filter-states
@@ -449,29 +462,43 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           expanded
           .narrow=${this.narrow}
         ></ha-filter-states>
-        ${!this._needsOnboarding
+        ${
-          ? html`
+          !this._needsOnboarding
-              <ha-fab
+            ? html`
-                slot="fab"
+                <ha-fab
-                ?disabled=${backupInProgress}
+                  slot="fab"
-                .label=${this.hass.localize(
+                  ?disabled=${backupInProgress}
-                  "ui.panel.config.backup.backups.new_backup"
+                  .label=${this.hass.localize(
-                )}
+                    "ui.panel.config.backup.backups.new_backup"
-                extended
+                  )}
-                @click=${this._newBackup}
+                  extended
-              >
+                  @click=${this._newBackup}
-                ${backupInProgress
+                >
-                  ? html`<div slot="icon" class="loading">
+                  ${backupInProgress
-                      <ha-spinner .size=${"small"}></ha-spinner>
+                    ? html`<div slot="icon" class="loading">
-                    </div>`
+                        <ha-spinner .size=${"small"}></ha-spinner>
-                  : html`<ha-svg-icon
+                      </div>`
-                      slot="icon"
+                    : html`<ha-svg-icon
-                      .path=${mdiPlus}
+                        slot="icon"
-                    ></ha-svg-icon>`}
+                        .path=${mdiPlus}
-              </ha-fab>
+                      ></ha-svg-icon>`}
-            `
+                </ha-fab>
-          : nothing}
+              `
+            : nothing
+        }
       </hass-tabs-subpage-data-table>
+      <ha-md-menu id="overflow-menu" positioning="fixed">
+          <ha-md-menu-item .clickAction=${this._downloadBackup}>
+              <ha-svg-icon slot="start" .path=${mdiDownload}></ha-svg-icon>
+            ${this.hass.localize("ui.common.download")}
+          </ha-md-menu-item>
+            <ha-md-menu-item class="warning" .clickAction=${this._deleteBackup}>
+              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+            ${this.hass.localize("ui.common.delete")}
+            </ha-md-menu-item>
+        </ha-md-menu>
+      >
+      </ha-icon-overflow-menu>
     `;
   }
 
@@ -545,11 +572,18 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     navigate(`/config/backup/details/${id}`);
   }
 
-  private async _downloadBackup(backup: BackupContent): Promise<void> {
+  private async _downloadBackup(): Promise<void> {
-    downloadBackup(this.hass, this, backup, this.config);
+    if (!this._overflowBackup) {
+      return;
+    }
+    downloadBackup(this.hass, this, this._overflowBackup, this.config);
   }
 
-  private async _deleteBackup(backup: BackupContent): Promise<void> {
+  private async _deleteBackup(): Promise<void> {
+    if (!this._overflowBackup) {
+      return;
+    }
+
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize("ui.panel.config.backup.dialogs.delete.title"),
       text: this.hass.localize("ui.panel.config.backup.dialogs.delete.text"),
@@ -562,9 +596,11 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     }
 
     try {
-      await deleteBackup(this.hass, backup.backup_id);
+      await deleteBackup(this.hass, this._overflowBackup.backup_id);
-      if (this._selected.includes(backup.backup_id)) {
+      if (this._selected.includes(this._overflowBackup.backup_id)) {
-        this._selected = this._selected.filter((id) => id !== backup.backup_id);
+        this._selected = this._selected.filter(
+          (id) => id !== this._overflowBackup!.backup_id
+        );
       }
     } catch (err: any) {
       showAlertDialog(this, {

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

@@ -68,7 +68,7 @@ class HaConfigBlueprint extends HassRouterPage {
       (!changedProps || changedProps.has("route")) &&
       this._currentPage === "edit"
     ) {
-      const blueprintId = this.routeTail.path.substr(1);
+      const blueprintId = this.routeTail.path.slice(1);
       pageEl.blueprintId = blueprintId === "new" ? null : blueprintId;
     }
   }

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

@@ -770,43 +770,39 @@ export class HaConfigDevicePage extends LitElement {
             ${firstDeviceAction || actions.length
               ? html`
                   <div class="card-actions" slot="actions">
-                    <div>
+                    <ha-button
-                      <ha-button
+                      href=${ifDefined(firstDeviceAction!.href)}
-                        href=${ifDefined(firstDeviceAction!.href)}
+                      rel=${ifDefined(
-                        rel=${ifDefined(
+                        firstDeviceAction!.target ? "noreferrer" : undefined
-                          firstDeviceAction!.target ? "noreferrer" : undefined
+                      )}
-                        )}
+                      appearance="plain"
-                        appearance="plain"
+                      target=${ifDefined(firstDeviceAction!.target)}
-                        target=${ifDefined(firstDeviceAction!.target)}
+                      class=${ifDefined(firstDeviceAction!.classes)}
-                        class=${ifDefined(firstDeviceAction!.classes)}
+                      .variant=${firstDeviceAction!.classes?.includes("warning")
-                        .variant=${firstDeviceAction!.classes?.includes(
+                        ? "danger"
-                          "warning"
+                        : "brand"}
-                        )
+                      .action=${firstDeviceAction!.action}
-                          ? "danger"
+                      @click=${this._deviceActionClicked}
-                          : "brand"}
+                    >
-                        .action=${firstDeviceAction!.action}
+                      ${firstDeviceAction!.label}
-                        @click=${this._deviceActionClicked}
+                      ${firstDeviceAction!.icon
-                      >
+                        ? html`
-                        ${firstDeviceAction!.label}
+                            <ha-svg-icon
-                        ${firstDeviceAction!.icon
+                              class=${ifDefined(firstDeviceAction!.classes)}
-                          ? html`
+                              .path=${firstDeviceAction!.icon}
-                              <ha-svg-icon
+                              slot="start"
-                                class=${ifDefined(firstDeviceAction!.classes)}
+                            ></ha-svg-icon>
-                                .path=${firstDeviceAction!.icon}
+                          `
-                                slot="start"
+                        : nothing}
-                              ></ha-svg-icon>
+                      ${firstDeviceAction!.trailingIcon
-                            `
+                        ? html`
-                          : nothing}
+                            <ha-svg-icon
-                        ${firstDeviceAction!.trailingIcon
+                              .path=${firstDeviceAction!.trailingIcon}
-                          ? html`
+                              slot="end"
-                              <ha-svg-icon
+                            ></ha-svg-icon>
-                                .path=${firstDeviceAction!.trailingIcon}
+                          `
-                                slot="end"
+                        : nothing}
-                              ></ha-svg-icon>
+                    </ha-button>
-                            `
-                          : nothing}
-                      </ha-button>
-                    </div>
 
                     ${actions.length
                       ? html`

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -18,7 +18,6 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-battery-settings")
 export class DialogEnergyBatterySettings
@@ -33,14 +32,10 @@ export class DialogEnergyBatterySettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   public async showDialog(
     params: EnergySettingsBatteryDialogParams
   ): Promise<void> {
@@ -51,9 +46,6 @@ export class DialogEnergyBatterySettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
     const allSources: string[] = [];
     this._params.battery_sources.forEach((entry) => {
       allSources.push(entry.stat_energy_from);
@@ -64,16 +56,6 @@ export class DialogEnergyBatterySettings
         id !== this._source?.stat_energy_from &&
         id !== this._source?.stat_energy_to
     );
-    const allPowerSources: string[] = [];
-    this._params.battery_sources.forEach((entry) => {
-      if (entry.stat_power_from) allPowerSources.push(entry.stat_power_from);
-      if (entry.stat_power_to) allPowerSources.push(entry.stat_power_to);
-    });
-    this._excludeListPower = allPowerSources.filter(
-      (id) =>
-        id !== this._source?.stat_power_from &&
-        id !== this._source?.stat_power_to
-    );
   }
 
   public closeDialog() {
@@ -90,6 +72,8 @@ export class DialogEnergyBatterySettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -101,6 +85,12 @@ export class DialogEnergyBatterySettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -115,10 +105,6 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_from,
           ]}
           @value-changed=${this._statisticToChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.entity_para",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -135,40 +121,6 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_to,
           ]}
           @value-changed=${this._statisticFromChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.entity_para",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source.stat_power_to}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.power_into_battery"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerToChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.entity_para",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source.stat_power_from}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.power_out_of_battery"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerFromChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.entity_para",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
         ></ha-statistic-picker>
 
         <ha-button
@@ -198,14 +150,6 @@ export class DialogEnergyBatterySettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
-  private _powerToChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = { ...this._source!, stat_power_to: ev.detail.value };
-  }
-
-  private _powerFromChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = { ...this._source!, stat_power_from: ev.detail.value };
-  }
-
   private async _save() {
     try {
       await this._params!.saveCallback(this._source!);
@@ -224,11 +168,7 @@ export class DialogEnergyBatterySettings
           --mdc-dialog-max-width: 430px;
         }
         ha-statistic-picker {
-          display: block;
+          width: 100%;
-          margin-bottom: var(--ha-space-4);
-        }
-        ha-statistic-picker:last-of-type {
-          margin-bottom: 0;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -21,7 +21,6 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsDeviceDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-device-settings")
 export class DialogEnergyDeviceSettings
@@ -36,14 +35,10 @@ export class DialogEnergyDeviceSettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
 
   public async showDialog(
@@ -55,15 +50,9 @@ export class DialogEnergyDeviceSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
     this._excludeList = this._params.device_consumptions
       .map((entry) => entry.stat_consumption)
       .filter((id) => id !== this._device?.stat_consumption);
-    this._excludeListPower = this._params.device_consumptions
-      .map((entry) => entry.stat_power)
-      .filter((id) => id && id !== this._device?.stat_power) as string[];
   }
 
   private _computePossibleParents() {
@@ -104,6 +93,8 @@ export class DialogEnergyDeviceSettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -117,6 +108,12 @@ export class DialogEnergyDeviceSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -128,28 +125,9 @@ export class DialogEnergyDeviceSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._device?.stat_power}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.device_consumption_power"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerStatisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.device_consumption_power_helper",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
         <ha-textfield
           .label=${this.hass.localize(
             "ui.panel.config.energy.device_consumption.dialog.display_name"
@@ -232,20 +210,6 @@ export class DialogEnergyDeviceSettings
     this._computePossibleParents();
   }
 
-  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (!this._device) {
-      return;
-    }
-    const newDevice = {
-      ...this._device,
-      stat_power: ev.detail.value,
-    } as DeviceConsumptionEnergyPreference;
-    if (!newDevice.stat_power) {
-      delete newDevice.stat_power;
-    }
-    this._device = newDevice;
-  }
-
   private _nameChanged(ev) {
     const newDevice = {
       ...this._device!,
@@ -281,19 +245,15 @@ export class DialogEnergyDeviceSettings
     return [
       haStyleDialog,
       css`
-        ha-statistic-picker {
-          display: block;
-          margin-bottom: var(--ha-space-2);
-        }
         ha-statistic-picker {
           width: 100%;
         }
         ha-select {
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
           width: 100%;
         }
         ha-textfield {
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
           width: 100%;
         }
       `,

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -31,7 +31,6 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsGridFlowDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-grid-flow-settings")
 export class DialogEnergyGridFlowSettings
@@ -52,14 +51,10 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   public async showDialog(
     params: EnergySettingsGridFlowDialogParams
   ): Promise<void> {
@@ -85,10 +80,6 @@ export class DialogEnergyGridFlowSettings
           ? "stat_energy_from"
           : "stat_energy_to"
       ];
-    const initialSourceIdPower =
-      this._source[
-        this._params.direction === "from" ? "stat_power_from" : "stat_power_to"
-      ];
 
     this._pickedDisplayUnit = getDisplayUnit(
       this.hass,
@@ -98,9 +89,6 @@ export class DialogEnergyGridFlowSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
 
     this._excludeList = [
       ...(this._params.grid_source?.flow_from?.map(
@@ -110,15 +98,6 @@ export class DialogEnergyGridFlowSettings
         (entry) => entry.stat_energy_to
       ) || []),
     ].filter((id) => id !== initialSourceId);
-
-    this._excludeListPower = [
-      ...(this._params.grid_source?.flow_from?.map(
-        (entry) => entry.stat_power_from
-      ) || []),
-      ...(this._params.grid_source?.flow_to?.map(
-        (entry) => entry.stat_power_to
-      ) || []),
-    ].filter((id) => id && id !== initialSourceIdPower) as string[];
   }
 
   public closeDialog() {
@@ -136,6 +115,8 @@ export class DialogEnergyGridFlowSettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     const unitPriceSensor = this._pickedDisplayUnit
       ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
       : undefined;
@@ -169,11 +150,19 @@ export class DialogEnergyGridFlowSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <p>
+        <div>
-          ${this.hass.localize(
+          <p>
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+            ${this.hass.localize(
-          )}
+              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
-        </p>
+            )}
+          </p>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
+              { unit: pickableUnit }
+            )}
+          </p>
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -189,32 +178,9 @@ export class DialogEnergyGridFlowSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          .helper=${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source[
-            this._params.direction === "from"
-              ? "stat_power_from"
-              : "stat_power_to"
-          ]}
-          .label=${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.power_stat`
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerStatisticChanged}
-          .helper=${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
         <p>
           ${this.hass.localize(
             `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.cost_para`
@@ -374,15 +340,6 @@ export class DialogEnergyGridFlowSettings
     };
   }
 
-  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = {
-      ...this._source!,
-      [this._params!.direction === "from"
-        ? "stat_power_from"
-        : "stat_power_to"]: ev.detail.value,
-    };
-  }
-
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
     if (ev.detail.value) {
       const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
@@ -423,10 +380,6 @@ export class DialogEnergyGridFlowSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
-        ha-statistic-picker {
-          display: block;
-          margin: var(--ha-space-4) 0;
-        }
         ha-formfield {
           display: block;
         }

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -28,7 +28,6 @@ import { brandsUrl } from "../../../../util/brands-url";
 import type { EnergySettingsSolarDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-solar-settings")
 export class DialogEnergySolarSettings
@@ -47,14 +46,10 @@ export class DialogEnergySolarSettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   public async showDialog(
     params: EnergySettingsSolarDialogParams
   ): Promise<void> {
@@ -67,15 +62,9 @@ export class DialogEnergySolarSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
     this._excludeList = this._params.solar_sources
       .map((entry) => entry.stat_energy_from)
       .filter((id) => id !== this._source?.stat_energy_from);
-    this._excludeListPower = this._params.solar_sources
-      .map((entry) => entry.stat_power_from)
-      .filter((id) => id && id !== this._source?.stat_power_from) as string[];
   }
 
   public closeDialog() {
@@ -92,6 +81,8 @@ export class DialogEnergySolarSettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -103,6 +94,12 @@ export class DialogEnergySolarSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -114,28 +111,9 @@ export class DialogEnergySolarSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.entity_para",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source.stat_power_from}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.solar_production_power"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerStatisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.entity_para",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
         <h3>
           ${this.hass.localize(
             "ui.panel.config.energy.solar.dialog.solar_production_forecast"
@@ -289,10 +267,6 @@ export class DialogEnergySolarSettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
-  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = { ...this._source!, stat_power_from: ev.detail.value };
-  }
-
   private async _save() {
     try {
       if (!this._forecast) {
@@ -313,10 +287,6 @@ export class DialogEnergySolarSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
-        ha-statistic-picker {
-          display: block;
-          margin-bottom: var(--ha-space-4);
-        }
         img {
           height: 24px;
           margin-right: 16px;

src/panels/config/integrations/ha-config-integration-page.ts

@@ -442,9 +442,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                     : nothing}
                   ${this._manifest?.is_built_in &&
                   this._manifest.quality_scale &&
-                  Object.keys(QUALITY_SCALE_MAP).includes(
+                  this._manifest.quality_scale in QUALITY_SCALE_MAP
-                    this._manifest.quality_scale
-                  )
                     ? html`
                         <div class="integration-info">
                           <a

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -70,7 +70,7 @@ export class ZHAClusterCommands extends LitElement {
             ${this._commands.map(
               (entry) => html`
                 <ha-list-item .value=${String(entry.id)}>
-                  ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"}
+                  ${entry.name} (id: ${formatAsPaddedHex(entry.id)})
                 </ha-list-item>
               `
             )}

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

@@ -74,7 +74,7 @@ class HaConfigScene extends HassRouterPage {
       this._currentPage === "edit"
     ) {
       pageEl.creatingNew = undefined;
-      const sceneId = this.routeTail.path.substr(1);
+      const sceneId = this.routeTail.path.slice(1);
       pageEl.sceneId = sceneId === "new" ? null : sceneId;
     }
   }

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

@@ -98,7 +98,7 @@ class HaConfigScript extends HassRouterPage {
       this._currentPage === "show"
     ) {
       pageEl.creatingNew = undefined;
-      const scriptId = this.routeTail.path.substr(1);
+      const scriptId = this.routeTail.path.slice(1);
       pageEl.entityId = scriptId === "new" ? null : scriptId;
       return;
     }
@@ -108,7 +108,7 @@ class HaConfigScript extends HassRouterPage {
       this._currentPage !== "dashboard"
     ) {
       pageEl.creatingNew = undefined;
-      const scriptId = this.routeTail.path.substr(1);
+      const scriptId = this.routeTail.path.slice(1);
       pageEl.scriptId = scriptId === "new" ? null : scriptId;
     }
   }

src/panels/config/script/ha-script-editor.ts

@@ -65,7 +65,7 @@ import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
+import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
@@ -78,14 +78,9 @@ import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
 
-const baseEditorMixins = SubscribeMixin(
+export class HaScriptEditor extends SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
-);
+) {
-
-export class HaScriptEditor extends UndoRedoMixin<
-  typeof baseEditorMixins,
-  ScriptConfig
->(baseEditorMixins) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public scriptId: string | null = null;
@@ -141,6 +136,11 @@ export class HaScriptEditor extends UndoRedoMixin<
     value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
   ) => void;
 
+  private _undoRedoController = new UndoRedoController<ScriptConfig>(this, {
+    apply: (config) => this._applyUndoRedo(config),
+    currentConfig: () => this._config!,
+  });
+
   protected willUpdate(changedProps) {
     super.willUpdate(changedProps);
 
@@ -188,8 +188,8 @@ export class HaScriptEditor extends UndoRedoMixin<
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.undo")}
                 .path=${mdiUndo}
-                @click=${this.undo}
+                @click=${this._undo}
-                .disabled=${!this.canUndo}
+                .disabled=${!this._undoRedoController.canUndo}
                 id="button-undo"
               >
               </ha-icon-button>
@@ -205,8 +205,8 @@ export class HaScriptEditor extends UndoRedoMixin<
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
-                @click=${this.redo}
+                @click=${this._redo}
-                .disabled=${!this.canRedo}
+                .disabled=${!this._undoRedoController.canRedo}
                 id="button-redo"
               >
               </ha-icon-button>
@@ -249,16 +249,16 @@ export class HaScriptEditor extends UndoRedoMixin<
           ${this._mode === "gui" && this.narrow
             ? html`<ha-list-item
                   graphic="icon"
-                  @click=${this.undo}
+                  @click=${this._undo}
-                  .disabled=${!this.canUndo}
+                  .disabled=${!this._undoRedoController.canUndo}
                 >
                   ${this.hass.localize("ui.common.undo")}
                   <ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon>
                 </ha-list-item>
                 <ha-list-item
                   graphic="icon"
-                  @click=${this.redo}
+                  @click=${this._redo}
-                  .disabled=${!this.canRedo}
+                  .disabled=${!this._undoRedoController.canRedo}
                 >
                   ${this.hass.localize("ui.common.redo")}
                   <ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon>
@@ -463,7 +463,6 @@ export class HaScriptEditor extends UndoRedoMixin<
                           @value-changed=${this._valueChanged}
                           @editor-save=${this._handleSaveScript}
                           @save-script=${this._handleSaveScript}
-                          @undo-paste=${this.undo}
                         >
                           <div class="alert-wrapper" slot="alerts">
                             ${this._errors || stateObj?.state === UNAVAILABLE
@@ -679,7 +678,7 @@ export class HaScriptEditor extends UndoRedoMixin<
 
   private _valueChanged(ev) {
     if (this._config) {
-      this.pushToUndo(this._config);
+      this._undoRedoController.commit(this._config);
     }
 
     this._config = ev.detail.value;
@@ -776,7 +775,7 @@ export class HaScriptEditor extends UndoRedoMixin<
     }
 
     if (this._config) {
-      this.pushToUndo(this._config);
+      this._undoRedoController.commit(this._config);
     }
 
     this._manualEditor?.addFields();
@@ -1110,9 +1109,9 @@ export class HaScriptEditor extends UndoRedoMixin<
       x: () => this._cutSelectedRow(),
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
-      z: () => this.undo(),
+      z: () => this._undo(),
-      Z: () => this.redo(),
+      Z: () => this._redo(),
-      y: () => this.redo(),
+      y: () => this._redo(),
     };
   }
 
@@ -1146,16 +1145,20 @@ export class HaScriptEditor extends UndoRedoMixin<
     this._manualEditor?.deleteSelectedRow();
   }
 
-  protected get currentConfig() {
+  private _applyUndoRedo(config: ScriptConfig) {
-    return this._config;
-  }
-
-  protected applyUndoRedo(config: ScriptConfig) {
     this._manualEditor?.triggerCloseSidebar();
     this._config = config;
     this._dirty = true;
   }
 
+  private _undo() {
+    this._undoRedoController.undo();
+  }
+
+  private _redo() {
+    this._undoRedoController.redo();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-field-row.ts

@@ -20,13 +20,13 @@ import "../../../components/ha-md-menu-item";
 import type { ScriptFieldSidebarConfig } from "../../../data/automation";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { indentStyle, overflowStyles } from "../automation/styles";
 import "./ha-script-field-selector-editor";
 import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
+import { showToast } from "../../../util/toast";
 
 @customElement("ha-script-field-row")
 export default class HaScriptFieldRow extends LitElement {
@@ -386,21 +386,19 @@ export default class HaScriptFieldRow extends LitElement {
   };
 
   private _onDelete = () => {
-    showConfirmationDialog(this, {
+    fireEvent(this, "value-changed", { value: null });
-      title: this.hass.localize(
+    if (this._selected || this._selectorRowSelected) {
-        "ui.panel.config.script.editor.field_delete_confirm_title"
+      fireEvent(this, "close-sidebar");
-      ),
+    }
-      text: this.hass.localize(
+
-        "ui.panel.config.script.editor.field_delete_confirm_text"
+    showToast(this, {
-      ),
+      message: this.hass.localize("ui.common.successfully_deleted"),
-      dismissText: this.hass.localize("ui.common.cancel"),
+      duration: 4000,
-      confirmText: this.hass.localize("ui.common.delete"),
+      action: {
-      destructive: true,
+        text: this.hass.localize("ui.common.undo"),
-      confirm: () => {
+        action: () => {
-        fireEvent(this, "value-changed", { value: null });
+          fireEvent(window, "undo-change");
-        if (this._selected || this._selectorRowSelected) {
+        },
-          fireEvent(this, "close-sidebar");
-        }
       },
     });
   };

src/panels/config/script/manual-script-editor.ts

@@ -491,7 +491,7 @@ export class HaManualScriptEditor extends LitElement {
       action: {
         text: this.hass.localize("ui.common.undo"),
         action: () => {
-          fireEvent(this, "undo-paste");
+          fireEvent(this, "undo-change");
 
           this._pastedConfig = undefined;
         },

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

@@ -83,6 +83,21 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   private _footerElement?: LovelaceHeaderFooter;
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("row-visibility-changed", (ev) =>
+      this._updateRowVisibility(ev)
+    );
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "row-visibility-changed",
+      this._updateRowVisibility
+    );
+  }
+
   set hass(hass: HomeAssistant) {
     this._hass = hass;
     this.shadowRoot
@@ -251,18 +266,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
     #states {
       flex: 1;
-    }
+      display: flex;
-
+      flex-direction: column;
-    #states > * {
+      gap: var(--entities-card-row-gap, var(--card-row-gap, 8px));
-      margin: 8px 0;
-    }
-
-    #states > *:first-child {
-      margin-top: 0;
-    }
-
-    #states > *:last-child {
-      margin-bottom: 0;
     }
 
     #states > div > * {
@@ -320,8 +326,16 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       element.hass = this._hass;
     }
 
-    return html`<div>${element}</div>`;
+    return html`<div ?hidden=${element.hidden}>${element}</div>`;
   }
+
+  private _updateRowVisibility = (ev) => {
+    if (ev.detail?.value === false) {
+      ev.detail?.row?.parentElement!.style.setProperty("display", "none");
+    } else {
+      ev.detail?.row?.parentElement!.style.setProperty("display", "");
+    }
+  };
 }
 
 declare global {

src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts

@@ -222,9 +222,9 @@ export class HuiCreateDialogBadge
   private _handleBadgePicked(ev) {
     const config = ev.detail.config;
     if (this._params!.entities && this._params!.entities.length) {
-      if (Object.keys(config).includes("entities")) {
+      if ("entities" in config) {
         config.entities = this._params!.entities;
-      } else if (Object.keys(config).includes("entity")) {
+      } else if ("entity" in config) {
         config.entity = this._params!.entities[0];
       }
     }

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -244,9 +244,9 @@ export class HuiCreateDialogCard
   private _handleCardPicked(ev) {
     const config = ev.detail.config;
     if (this._params!.entities && this._params!.entities.length) {
-      if (Object.keys(config).includes("entities")) {
+      if ("entities" in config) {
         config.entities = this._params!.entities;
-      } else if (Object.keys(config).includes("entity")) {
+      } else if ("entity" in config) {
         config.entity = this._params!.entities[0];
       }
     }

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

@@ -129,8 +129,7 @@ export class HuiStatisticCardEditor
           name: "period",
           required: true,
           selector:
-            selectedPeriodKey &&
+            selectedPeriodKey && selectedPeriodKey in periods
-            Object.keys(periods).includes(selectedPeriodKey)
               ? {
                   select: {
                     multiple: false,

src/panels/lovelace/hui-root.ts

@@ -25,6 +25,10 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import {
+  applyViewTransitionOnLoad,
+  startViewTransition,
+} from "../../common/dom/view_transition";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { goBack, navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
@@ -72,7 +76,7 @@ import {
 } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { haStyle } from "../../resources/styles";
+import { haStyle, haStyleViewTransitions } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -619,6 +623,9 @@ class HUIRoot extends LitElement {
     window.addEventListener("scroll", this._handleWindowScroll, {
       passive: true,
     });
+
+    // Trigger view transition on initial load
+    applyViewTransitionOnLoad(this);
   }
 
   public connectedCallback(): void {
@@ -1158,43 +1165,45 @@ class HUIRoot extends LitElement {
     // Recreate a new element to clear the applied themes.
     const root = this._viewRoot;
 
-    if (root.lastChild) {
+    startViewTransition(() => {
-      root.removeChild(root.lastChild);
+      if (root.lastChild) {
-    }
+        root.removeChild(root.lastChild);
+      }
 
-    if (viewIndex === "hass-unused-entities") {
+      if (viewIndex === "hass-unused-entities") {
-      const unusedEntities = document.createElement("hui-unused-entities");
+        const unusedEntities = document.createElement("hui-unused-entities");
-      // Wait for promise to resolve so that the element has been upgraded.
+        // Wait for promise to resolve so that the element has been upgraded.
-      import("./editor/unused-entities/hui-unused-entities").then(() => {
+        import("./editor/unused-entities/hui-unused-entities").then(() => {
-        unusedEntities.hass = this.hass!;
+          unusedEntities.hass = this.hass!;
-        unusedEntities.lovelace = this.lovelace!;
+          unusedEntities.lovelace = this.lovelace!;
-        unusedEntities.narrow = this.narrow;
+          unusedEntities.narrow = this.narrow;
-      });
+        });
-      root.appendChild(unusedEntities);
+        root.appendChild(unusedEntities);
-      return;
+        return;
-    }
+      }
 
-    let view;
+      let view;
-    const viewConfig = this.config.views[viewIndex];
+      const viewConfig = this.config.views[viewIndex];
 
-    if (!viewConfig) {
+      if (!viewConfig) {
-      this.lovelace!.setEditMode(true);
+        this.lovelace!.setEditMode(true);
-      return;
+        return;
-    }
+      }
 
-    if (!force && this._viewCache![viewIndex]) {
+      if (!force && this._viewCache![viewIndex]) {
-      view = this._viewCache![viewIndex];
+        view = this._viewCache![viewIndex];
-    } else {
+      } else {
-      view = document.createElement("hui-view");
+        view = document.createElement("hui-view");
-      view.index = viewIndex;
+        view.index = viewIndex;
-      this._viewCache![viewIndex] = view;
+        this._viewCache![viewIndex] = view;
-    }
+      }
 
-    view.lovelace = this.lovelace;
+      view.lovelace = this.lovelace;
-    view.hass = this.hass;
+      view.hass = this.hass;
-    view.narrow = this.narrow;
+      view.narrow = this.narrow;
 
-    root.appendChild(view);
+      root.appendChild(view);
+    });
   }
 
   private _openShortcutDialog(ev: Event) {
@@ -1205,6 +1214,7 @@ class HUIRoot extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      haStyleViewTransitions,
       css`
         :host {
           -ms-user-select: none;
@@ -1259,6 +1269,7 @@ class HUIRoot extends LitElement {
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
+          view-transition-name: lovelace-toolbar;
         }
         .narrow .toolbar {
           padding: 0 4px;
@@ -1407,6 +1418,7 @@ class HUIRoot extends LitElement {
         hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;
+          view-transition-name: lovelace-view;
         }
         /**
          * In edit mode we have the tab bar on a new line *

src/panels/lovelace/special-rows/hui-conditional-row.ts

@@ -7,7 +7,13 @@ import type {
   EntityConfig,
   LovelaceRow,
 } from "../entity-rows/types";
+import { fireEvent } from "../../../common/dom/fire_event";
 
+declare global {
+  interface HASSDomEvents {
+    "row-visibility-changed": { row: LovelaceRow; value: boolean };
+  }
+}
 @customElement("hui-conditional-row")
 class HuiConditionalRow extends HuiConditionalBase implements LovelaceRow {
   public setConfig(config: ConditionalRowConfig): void {
@@ -26,6 +32,15 @@ class HuiConditionalRow extends HuiConditionalBase implements LovelaceRow {
         : config.row
     ) as LovelaceRow;
   }
+
+  protected setVisibility(conditionMet: boolean): void {
+    const visible = this.preview || conditionMet;
+    const previouslyHidden = this.hidden;
+    super.setVisibility(conditionMet);
+    if (previouslyHidden !== this.hidden) {
+      fireEvent(this, "row-visibility-changed", { row: this, value: visible });
+    }
+  }
 }
 
 declare global {

src/resources/state-control-styles.ts

@@ -0,0 +1,67 @@
+import { css } from "lit";
+
+/**
+ * Shared styles for state control toggle components
+ * Used by: cover, valve, lock, fan, light toggle controls
+ */
+export const stateControlToggleStyle = css`
+  ha-control-switch {
+    height: 45vh;
+    max-height: 320px;
+    min-height: 200px;
+    --control-switch-thickness: 130px;
+    --control-switch-border-radius: var(--ha-border-radius-6xl);
+    --control-switch-padding: 6px;
+    --mdc-icon-size: 24px;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    width: 130px;
+    height: 45vh;
+    max-height: 320px;
+    min-height: 200px;
+    padding: 6px;
+    box-sizing: border-box;
+  }
+
+  ha-control-button {
+    flex: 1;
+    width: 100%;
+    --control-button-border-radius: var(--ha-border-radius-6xl);
+    --mdc-icon-size: 24px;
+  }
+
+  ha-control-button.active {
+    --control-button-icon-color: white;
+    --control-button-background-color: var(--color);
+    --control-button-focus-color: var(--color);
+    --control-button-background-opacity: 1;
+  }
+
+  ha-control-button:not(:last-child) {
+    margin-bottom: 6px;
+  }
+`;
+
+/**
+ * Additional styles for components with pulse animation (like lock toggle)
+ */
+export const stateControlPulseStyle = css`
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .pulse {
+    animation: pulse 1s infinite;
+  }
+`;

src/resources/styles.ts

@@ -196,3 +196,58 @@ export const baseEntrypointStyles = css`
     width: 100vw;
   }
 `;
+
+export const haStyleViewTransitions = css`
+  @media (prefers-reduced-motion: no-preference) {
+    /* Toolbar fade in */
+    ::view-transition-group(lovelace-toolbar) {
+      animation-duration: var(--ha-animation-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-new(lovelace-toolbar) {
+      animation: fade-in var(--ha-animation-duration) ease-out;
+      animation-delay: var(--ha-animation-delay-base);
+    }
+
+    /* View slide down */
+    ::view-transition-group(lovelace-view) {
+      animation-duration: var(--ha-animation-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-new(lovelace-view) {
+      animation: fade-in-slide-down var(--ha-animation-duration) ease-out;
+      animation-delay: var(--ha-animation-delay-base);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;

src/resources/theme/core.globals.ts

@@ -42,6 +42,24 @@ export const coreStyles = css`
     --ha-space-18: 72px;
     --ha-space-19: 76px;
     --ha-space-20: 80px;
+
+    /* Animation timing */
+    --ha-animation-duration: 350ms;
+    --ha-animation-delay-base: 50ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      --ha-animation-duration: 150ms;
+      --ha-animation-delay-base: 20ms;
+    }
+  }
+
+  /* Enable View Transitions API for supported browsers */
+  @supports (view-transition-name: none) {
+    :root {
+      view-transition-name: root;
+    }
   }
 `;
 

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -10,6 +10,7 @@ import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
+import { stateControlToggleStyle } from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-state-control-cover-toggle")
@@ -137,41 +138,7 @@ export class HaStateControlCoverToggle extends LitElement {
     `;
   }
 
-  static styles = css`
+  static styles = [stateControlToggleStyle];
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
 }
 
 declare global {

src/state-control/ha-state-control-toggle.ts

@@ -1,7 +1,7 @@
 import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,7 @@ import "../components/ha-control-button";
 import "../components/ha-control-switch";
 import { UNAVAILABLE, UNKNOWN } from "../data/entity";
 import { forwardHaptic } from "../data/haptics";
+import { stateControlToggleStyle } from "../resources/state-control-styles";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-state-control-toggle")
@@ -128,42 +129,7 @@ export class HaStateControlToggle extends LitElement {
     `;
   }
 
-  static styles = css`
+  static styles = [stateControlToggleStyle];
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-focus-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
 }
 
 declare global {

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,10 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { LockEntity } from "../../data/lock";
 import { callProtectedLockService } from "../../data/lock";
+import {
+  stateControlToggleStyle,
+  stateControlPulseStyle,
+} from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 declare global {
@@ -145,56 +149,7 @@ export class HaStateControlLockToggle extends LitElement {
     `;
   }
 
-  static styles = css`
+  static styles = [stateControlToggleStyle, stateControlPulseStyle];
-    @keyframes pulse {
-      0% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .pulse {
-      animation: pulse 1s infinite;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-focus-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
 }
 
 declare global {

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -10,6 +10,7 @@ import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
+import { stateControlToggleStyle } from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-state-control-valve-toggle")
@@ -137,42 +138,7 @@ export class HaStateControlValveToggle extends LitElement {
     `;
   }
 
-  static styles = css`
+  static styles = [stateControlToggleStyle];
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-focus-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
 }
 
 declare global {

src/translations/en.json

@@ -3031,7 +3031,6 @@
                 "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",
                 "entity_para": "Pick a sensor which measures grid consumption in either of {unit}.",
                 "energy_stat": "Consumed energy",
-                "power_stat": "Current power consumption",
                 "cost_para": "Select how Home Assistant should keep track of the costs of the consumed energy.",
                 "no_cost": "Do not track costs",
                 "cost_stat": "Use an entity tracking the total costs",
@@ -3046,7 +3045,6 @@
                 "paragraph": "Grid production is the energy that flows from your solar panels to the grid.",
                 "entity_para": "Pick a sensor which measures grid production in either of {unit}.",
                 "energy_stat": "Energy returned to the grid",
-                "power_stat": "Current power returned to the grid",
                 "cost_para": "Do you get money back when you return energy to the grid?",
                 "no_cost": "I do not get money back",
                 "cost_stat": "Use an entity tracking the total received money",
@@ -3073,7 +3071,6 @@
               "header": "Configure solar panels",
               "entity_para": "Pick a sensor which measures solar energy production in either of {unit}.",
               "solar_production_energy": "Solar production energy",
-              "solar_production_power": "Solar production power",
               "solar_production_forecast": "Solar production forecast",
               "solar_production_forecast_description": "Adding solar production forecast information will allow you to quickly see your expected production for today.",
               "dont_forecast_production": "Don't forecast production",
@@ -3091,11 +3088,9 @@
             "add_battery_system": "Add battery system",
             "dialog": {
               "header": "Configure battery system",
-              "entity_para": "Pick sensors that measure the electricity flowing in and out of the battery in either of {unit}.",
+              "entity_para": "Pick sensors which measure energy going into and coming out of the battery in either of {unit}.",
-              "energy_into_battery": "Energy charged into the battery",
+              "energy_into_battery": "Energy going into the battery",
-              "energy_out_of_battery": "Energy discharged from the battery",
+              "energy_out_of_battery": "Energy coming out of the battery"
-              "power_into_battery": "Power charging the battery",
-              "power_out_of_battery": "Power discharging the battery"
             }
           },
           "gas": {
@@ -3157,12 +3152,10 @@
               "header": "Add a device",
               "display_name": "Display name",
               "device_consumption_energy": "Device energy consumption",
-              "device_consumption_power": "Device power consumption",
+              "selected_stat_intro": "Select the energy sensor that measures the device's energy usage in either of {unit}.",
-              "selected_stat_intro": "Select the sensor that measures the device's energy usage in either of {unit}.",
               "included_in_device": "Upstream device",
               "included_in_device_helper": "If this device is already counted by another device (such as a smart switch measured by a smart breaker), selecting the upstream device prevents duplicate energy tracking.",
-              "no_upstream_devices": "No eligible upstream devices",
+              "no_upstream_devices": "No eligible upstream devices"
-              "device_consumption_power_helper": "Select the sensor that measures the device's power usage in either of {unit}."
             }
           }
         },
@@ -3914,8 +3907,6 @@
               "change_alias": "Rename trigger",
               "alias": "Trigger name",
               "delete": "[%key:ui::common::delete%]",
-              "delete_confirm_title": "Delete trigger?",
-              "delete_confirm_text": "It will be permanently deleted.",
               "unsupported_platform": "No visual editor support for platform: {platform}",
               "type_select": "Trigger type",
               "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]",
@@ -4179,8 +4170,6 @@
               "change_alias": "Rename condition",
               "alias": "Condition name",
               "delete": "[%key:ui::common::delete%]",
-              "delete_confirm_title": "Delete condition?",
-              "delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
               "unsupported_condition": "No visual editor support for condition: {condition}",
               "type_select": "Condition type",
               "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]",
@@ -4350,8 +4339,6 @@
               "disable": "Disable",
               "disabled": "Disabled",
               "delete": "[%key:ui::common::delete%]",
-              "delete_confirm_title": "Delete action?",
-              "delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
               "unsupported_action": "No visual editor support for this action",
               "type_select": "Action type",
               "continue_on_error": "Continue on error",
@@ -4813,8 +4800,6 @@
               "label": "Field",
               "field_selector": "Field selector"
             },
-            "field_delete_confirm_title": "Delete field?",
-            "field_delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
             "header": "Script: {name}",
             "default_name": "New script",
             "modes": {

yarn.lock

@@ -1613,19 +1613,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/config-helpers@npm:^0.3.1":
+"@eslint/config-helpers@npm:^0.4.0":
-  version: 0.3.1
+  version: 0.4.0
-  resolution: "@eslint/config-helpers@npm:0.3.1"
+  resolution: "@eslint/config-helpers@npm:0.4.0"
-  checksum: 10/fc1a90ef6180aa4b5187cee04cfc566abb2a32b77ca3e7eeb4312c7388f6898221adaf8451d9ddb22e0b8860d900fefb1eb1435e4f32f8d8732de87f14605f8f
+  dependencies:
+    "@eslint/core": "npm:^0.16.0"
+  checksum: 10/d5fdbf927a77b98d2462f025f8b1a5b610609201f8d1dd47032a2937842f02bf3bdf9cb672025c83a00f3255dfd218172f989caa724853c4a8f434124a6d79ff
   languageName: node
   linkType: hard
 
-"@eslint/core@npm:^0.15.2":
+"@eslint/core@npm:^0.16.0":
-  version: 0.15.2
+  version: 0.16.0
-  resolution: "@eslint/core@npm:0.15.2"
+  resolution: "@eslint/core@npm:0.16.0"
   dependencies:
     "@types/json-schema": "npm:^7.0.15"
-  checksum: 10/41d6273bbc6897cca34a2ca4e80a24bf6f1d43519456ebaa3c38f187da2d9e06f442c64f6e2a2813f055dce35e5cea33a21d0ac3b5b0830b7165641c640faf5d
+  checksum: 10/3cea45971b2d0114267b6101b673270b5d8047448cc7a8cbfdca0b0245e9d5e081cb25f13551dc7d55a090f98c13b33f0c4999f8ee8ab058537e6037629a0f71
   languageName: node
   linkType: hard
 
@@ -1646,10 +1648,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:9.36.0":
+"@eslint/js@npm:9.37.0":
-  version: 9.36.0
+  version: 9.37.0
-  resolution: "@eslint/js@npm:9.36.0"
+  resolution: "@eslint/js@npm:9.37.0"
-  checksum: 10/a0542f529f87b9ad69ef85c47b0c070b763591a61773b131a9d1d53934a587f0708c05a1a8f48a6805486004a4922c91d696c1e4835ff61f8750ffbded2f0c30
+  checksum: 10/2ead426ed47af0b914c7d7064eb59fede858483cf9511f78ded840708aca578138f2a6c375916d520f4f2ecf25945f4bd47b8a84e42106b4eb46f7708a36db1d
   languageName: node
   linkType: hard
 
@@ -1660,13 +1662,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/plugin-kit@npm:^0.3.5":
+"@eslint/plugin-kit@npm:^0.4.0":
-  version: 0.3.5
+  version: 0.4.0
-  resolution: "@eslint/plugin-kit@npm:0.3.5"
+  resolution: "@eslint/plugin-kit@npm:0.4.0"
   dependencies:
-    "@eslint/core": "npm:^0.15.2"
+    "@eslint/core": "npm:^0.16.0"
     levn: "npm:^0.4.1"
-  checksum: 10/b8552d79c3091446b07d8b87a9a8ccb8cdee4d933c0ed46b8f61029c3382246fec8d04ea7d1e61656d9275263205ccaa40019fd7581bbce897eca3eda42d5dad
+  checksum: 10/2c37ca00e352447215aeadcaff5765faead39695f1cb91cd3079a43261b234887caf38edc462811bb3401acf8c156c04882f87740df936838290c705351483be
   languageName: node
   linkType: hard
 
@@ -1696,15 +1698,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/ecma402-abstract@npm:2.3.4":
+"@formatjs/ecma402-abstract@npm:2.3.5":
-  version: 2.3.4
+  version: 2.3.5
-  resolution: "@formatjs/ecma402-abstract@npm:2.3.4"
+  resolution: "@formatjs/ecma402-abstract@npm:2.3.5"
   dependencies:
     "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/573971ffc291096a4b9fcc80b4708124e89bf2e3ac50e0f78b41eb797e9aa1b842f4dc3665e4467a853c738386821769d9e40408a1d25bc73323a1f057a16cf2
+  checksum: 10/254651057170836237dc4f0fbb372157f97133c4dcee414007e0cdb5b589baf0546c2f6337d117b988ee0a4f0a4d8247780aaa9e96b410c568495f162c40dc50
   languageName: node
   linkType: hard
 
@@ -1717,144 +1719,144 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.11.2":
+"@formatjs/icu-messageformat-parser@npm:2.11.3":
-  version: 2.11.2
+  version: 2.11.3
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.2"
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.3"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/icu-skeleton-parser": "npm:1.8.14"
+    "@formatjs/icu-skeleton-parser": "npm:1.8.15"
     tslib: "npm:^2.8.0"
-  checksum: 10/e919eb2a132ac1d54fb1a7e3a3254007649b55196d3818090df92a4268dcddf20cbdf863c06039fbbe7a35a8a3f17bdc172dade99d1f17c1d8a95dcec444c3e3
+  checksum: 10/339f5ff5ea7417e2db7f01bd41340f78fd5a8e56a66e723272d21ce7ab4b265dcb45748cdca76eac7137e2b5e6767986812b471e011b4602cf7afbc6da57fb98
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:1.8.14":
+"@formatjs/icu-skeleton-parser@npm:1.8.15":
-  version: 1.8.14
+  version: 1.8.15
-  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.14"
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.15"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
     tslib: "npm:^2.8.0"
-  checksum: 10/2fbe3155c310358820b118d8c9844f314eff3500a82f1c65402434a3095823e1afeaab8d1762b4a59cc5679d82dc4c8c134683565d7cdae4daace23251f46a47
+  checksum: 10/19825abc1a5eef0288456c08420d06f3da8256fbe81db0b9ead48cacc94954d748c8068988e26d184d38fca2e50c191ecda5a10ff3935529c3134b8d80db0538
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:6.18.0":
+"@formatjs/intl-datetimeformat@npm:6.18.1":
-  version: 6.18.0
+  version: 6.18.1
-  resolution: "@formatjs/intl-datetimeformat@npm:6.18.0"
+  resolution: "@formatjs/intl-datetimeformat@npm:6.18.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/b70edaa4cfa150f0a6cbeeb1488e6acdea21349abdefc4e37b923de68592c6f330a966456bf6000f233d0f715cf3b8cfce23d5a4ed574fa8ea35ccb5bea80886
+  checksum: 10/66938778ecf37472a7e2f1d9349b0ac249fcbd5d684ae5614dea07287876182429980ba2fe3671224f981065baf017ac955f4b3c1f3c924c89bf2ec82dd1acd8
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:6.8.11":
+"@formatjs/intl-displaynames@npm:6.8.12":
-  version: 6.8.11
+  version: 6.8.12
-  resolution: "@formatjs/intl-displaynames@npm:6.8.11"
+  resolution: "@formatjs/intl-displaynames@npm:6.8.12"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/05c785d9e767cc1e4d1bd40d6989c3318b6a98cb43dd6808f501f5e5538bb3a1fb8fa80f8d2282d598501d3d193a406f0127acce6b14cb7c595ab6d981437e6f
+  checksum: 10/7de27ef7e8cde2febce84d5443f00b70062cbd0c3f1039ce8ed1caacb15c4c7a36da16295f26657d59aa4663141a04d7b1083bfd1eea6a4e8ad9dc6093a2c886
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.7.4":
+"@formatjs/intl-durationformat@npm:0.7.5":
-  version: 0.7.4
+  version: 0.7.5
-  resolution: "@formatjs/intl-durationformat@npm:0.7.4"
+  resolution: "@formatjs/intl-durationformat@npm:0.7.5"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/d62273ecd635475ca91e9b501301f3f396403fa91b584c550734b19b2d194ba1316b27303fed985c1d42ae933d54eb220da6540edfdf376b0d9371ecfd0d4e15
+  checksum: 10/4dc81b112fed25dc8da0a16ddeff033b7c763bf9a1cfd7b1b25c1216f7f147eb67a47059a3cf95b4d4ade150c54a813542b84e69298905a4bc22548d74bf8567
   languageName: node
   linkType: hard
 
-"@formatjs/intl-enumerator@npm:1.8.10":
+"@formatjs/intl-enumerator@npm:1.8.11":
-  version: 1.8.10
+  version: 1.8.11
-  resolution: "@formatjs/intl-enumerator@npm:1.8.10"
+  resolution: "@formatjs/intl-enumerator@npm:1.8.11"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
     tslib: "npm:^2.8.0"
-  checksum: 10/9e0e762143248bf91e174d3abc15261b47ac7294632d26797cf5b001707aa68ca2deeb05c95f7308aa2cffa46d61b0fac46306dea722ab210dfa012990743798
+  checksum: 10/8646a517cd4160c1ceff888ec8fdf652caa3d375fa41231e829c13bc7be0cd156c9642e339b75e9cfa8ef60ae8140c766f9055318c62f1c1d9345f25cdb7f426
   languageName: node
   linkType: hard
 
-"@formatjs/intl-getcanonicallocales@npm:2.5.5":
+"@formatjs/intl-getcanonicallocales@npm:2.5.6":
-  version: 2.5.5
+  version: 2.5.6
-  resolution: "@formatjs/intl-getcanonicallocales@npm:2.5.5"
+  resolution: "@formatjs/intl-getcanonicallocales@npm:2.5.6"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/2a32202765c9a4f16fc36f4e4afca7fd5f4f35885ad2ca671352a7bba1a19d5ec81933d52ab1855c8570e73247213739d9d2d95d2438bd9f02a1f0db7cb9b8a9
+  checksum: 10/1d3d13fa1758a9bb7854f3afd844ecb70a4333a7cfbb6822b99e3b8ab6269e525a0ca23a8a47c3944e5376bc19e9e423b5cc3043db1c6de64909986c5cec6fc0
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:7.7.11":
+"@formatjs/intl-listformat@npm:7.7.12":
-  version: 7.7.11
+  version: 7.7.12
-  resolution: "@formatjs/intl-listformat@npm:7.7.11"
+  resolution: "@formatjs/intl-listformat@npm:7.7.12"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/e7de54dcbcfdd8718870501623fb1be55dbac11e2582b7961d4668fb5e1f0d1f6da0388ed49084a4527e500dbea548670659efccb690f3b4398f0f8bcd5221dd
+  checksum: 10/eee910e83ad28b3b3c24ab6e155720187ae5b5ac936ffa2c8ec6cc8c392c194fd5c79a166290da1c6de8dc1857e3d9d11241029832ec88f7a85cce1821b7f067
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:4.2.11":
+"@formatjs/intl-locale@npm:4.2.12":
-  version: 4.2.11
+  version: 4.2.12
-  resolution: "@formatjs/intl-locale@npm:4.2.11"
+  resolution: "@formatjs/intl-locale@npm:4.2.12"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-enumerator": "npm:1.8.10"
+    "@formatjs/intl-enumerator": "npm:1.8.11"
-    "@formatjs/intl-getcanonicallocales": "npm:2.5.5"
+    "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/8746af66ebd5284f189c83e0d59a4d781490ce3eadaab284bf96c4240eaf8b9422130a94a842a1ab12fa14bb2cdf02e9f78ac3b9cf955156fafeffab9d73d7a2
+  checksum: 10/42111a3002a5a2076b3eb012073230f69c62355dc03647bc17f4d0805f39c7e720e2281b359277d020fef623944a5bcc1ddc3dae9a3af74886d876147680147d
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.6.1":
+"@formatjs/intl-localematcher@npm:0.6.2":
-  version: 0.6.1
+  version: 0.6.2
-  resolution: "@formatjs/intl-localematcher@npm:0.6.1"
+  resolution: "@formatjs/intl-localematcher@npm:0.6.2"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/c7b3bc8395d18670677f207b2fd107561fff5d6394a9b4273c29e0bea920300ec3a2eefead600ebb7761c04a770cada28f78ac059f84d00520bfb57a9db36998
+  checksum: 10/eb12a7f5367bbecdfafc20d7f005559ce840f420e970f425c5213d35e94e86dfe75bde03464971a26494bf8427d4961269db22ecad2834f2a19d888b5d9cc064
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:8.15.4":
+"@formatjs/intl-numberformat@npm:8.15.5":
-  version: 8.15.4
+  version: 8.15.5
-  resolution: "@formatjs/intl-numberformat@npm:8.15.4"
+  resolution: "@formatjs/intl-numberformat@npm:8.15.5"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/232740eb4992f1bf4f829f05a755f427089a70b56a8a715fa9ac8604f701691701e989247ef1537a1d7c90e315b4153b82cf2e67e7f9d5b78d471c1cf59abace
+  checksum: 10/3440371a43c54cdd2aa3714cb518ad22e491dd19fbc0c046e712dde078d3f6ed709474376863d64d2bddb506957d1cf265d440f6723b88211044a7b56186e550
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:5.4.4":
+"@formatjs/intl-pluralrules@npm:5.4.5":
-  version: 5.4.4
+  version: 5.4.5
-  resolution: "@formatjs/intl-pluralrules@npm:5.4.4"
+  resolution: "@formatjs/intl-pluralrules@npm:5.4.5"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/919f80e144283b5849014bc245626916224adc0d693e8be5531168f1c7af54bb4c8cbd77a12ceba1d13ad49171680d346d9176464fae5013e13f79d9c7baa02a
+  checksum: 10/00f650891893b743d126dd2bf0d17c1b16a8c9e0e0dd94cd0895e66cb556246116263e9603204e1991924814d0ed3a3503765914aff08181d5e4435dfc5e547c
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:11.4.11":
+"@formatjs/intl-relativetimeformat@npm:11.4.12":
-  version: 11.4.11
+  version: 11.4.12
-  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.11"
+  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.12"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.1"
+    "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/fda4da27c0245869316c9199ed4e0521988be8b41b3e685f4abcb486f01d5b4c72f2ecf1b19b07091c15360c7691a4dd87199f81943d1ad6bda084c746fc8ec3
+  checksum: 10/f6adca59738cb7f58d2ea985558d8fc45e567406de6fb6e67894afe790e2a9fa1a19d34853afc36805fa4a3d638e29c62d6c6ba3ec2a85628c240081dcdfebc1
   languageName: node
   linkType: hard
 
@@ -5080,131 +5082,131 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.9.1":
+"@vaadin/a11y-base@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/a11y-base@npm:24.9.1"
+  resolution: "@vaadin/a11y-base@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/f8789d0ff11f2c3aa3e8b5bcf4f1af32af1dcd7eb671c2fb4cae63331840c6a79f070bc637e6762f8bbd15ec0d6e4d9cb378507fb2a78cc7f876934914c4ea32
+  checksum: 10/3e49b03daf1a1f16c4592364d8ddd0be574589779302f6cca10a242aab8a6052d69475eb60c77473267539ec2f741acd4a3794cd24aee5fa424dacfa3871668b
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.9.1":
+"@vaadin/combo-box@npm:24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/combo-box@npm:24.9.1"
+  resolution: "@vaadin/combo-box@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/field-base": "npm:~24.9.1"
+    "@vaadin/field-base": "npm:~24.9.2"
-    "@vaadin/input-container": "npm:~24.9.1"
+    "@vaadin/input-container": "npm:~24.9.2"
-    "@vaadin/item": "npm:~24.9.1"
+    "@vaadin/item": "npm:~24.9.2"
-    "@vaadin/lit-renderer": "npm:~24.9.1"
+    "@vaadin/lit-renderer": "npm:~24.9.2"
-    "@vaadin/overlay": "npm:~24.9.1"
+    "@vaadin/overlay": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/422fd0d2e47678e759526097d128aba13f2e70147631baf43a0328cadb95c1bdc4ce0ab459a5a8710882568194ff79e3c0d73c3c4ebf3ffcac72a43dfbfe6ade
+  checksum: 10/6931a185b4bf3854fae224e79eafc97b46fd0078f1757f458e5b5ddbc91b6dcbb80cdc27d8c4e7e20a75bb95e32da867f285a7c116eed23282bc9662b5b841f3
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.9.1":
+"@vaadin/component-base@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/component-base@npm:24.9.1"
+  resolution: "@vaadin/component-base@npm:24.9.2"
   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/5cb4870a0e0581bbb275c0addb144e0a3823fe4d86826d8fa2bff5c61105a5b6a34d7f65d13686a3b5f6e9e585105caa5b45716b9574ae7a0f323c1a6aa79535
+  checksum: 10/782c8186a69ae51ac0e07af643a5d0cdfa9d281a3bda25ed8df0f3bd24210489e5f8fb60a5aec7e242d6d986fc16d54343dbc3725fc022da8890c9734f10e561
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.9.1":
+"@vaadin/field-base@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/field-base@npm:24.9.1"
+  resolution: "@vaadin/field-base@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/47440fa611ad1bab1f996a6e1471959d156d9bed88f0671ffb07f32d9fee0fea267c71c6f35fe207dba919bddf43488552a0bdf5cbe64387a00256f22b4f1948
+  checksum: 10/456670e9fa69374e53cc3bd69a2a7bccfc447eec40756db1a3b6ea2ee2af39c529e0ae77d2b7977f65d26bcd323d448f9788794b67cb3e20027988e63c3a3d77
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.9.1":
+"@vaadin/icon@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/icon@npm:24.9.1"
+  resolution: "@vaadin/icon@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/0574f83fe14d5ffc5c8cf40a5fb38b80373d3ec590bedd1046800cda70f3d5d9337e4f062cdd2c79f917f71b6a71e850c4127da2cb8f7b863f0dd86a7e8d851b
+  checksum: 10/86581231e2d46292152e7010852276a870700fdd5f0cce3ab234fcd5fa57827120163e0c9f6e34f436b5d43b20c741e6b51a40f9f2148cc77087f1b15d17e016
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.9.1":
+"@vaadin/input-container@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/input-container@npm:24.9.1"
+  resolution: "@vaadin/input-container@npm:24.9.2"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/f8e2420fd3c0187eb2d1b96a53685e6ac053ce390ab5ab0c9cb9a7be42c66fe500828c0b0e3ef270ba3802b5c6dc667646906d8db3a7a8a0bef4b24decf1ffc7
+  checksum: 10/fd8ff7458dddd01cf7d2bb4cf6a969473ccad4dec6292897698aa3a51db3b74e30e1ae4077aa092e324041734f4829febf9f81345ee6b142138cfe4436a8a0ba
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.9.1":
+"@vaadin/item@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/item@npm:24.9.1"
+  resolution: "@vaadin/item@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/2f7c1cdeedd38aa80a8a8756690ca4d73415d801a37156d0f6e78e7dbebf470f3db090c7a7511e6f47d0ff6189447d4a452285622a8edd9364ab5cd5477649ab
+  checksum: 10/1173fa0b147acfe66cb817ce518e8d7b2a4189e3386c98e8eebee7c15767d51b35d2b60a7d0ab165431dbe09061a492da96414755c936621e68cddaefa5c9301
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.9.1":
+"@vaadin/lit-renderer@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/lit-renderer@npm:24.9.1"
+  resolution: "@vaadin/lit-renderer@npm:24.9.2"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/bdaaa2354352155e8b500e6c207881ec73be66acdccd98346375b1139d97d3acaec3b908e61db6cbde78b9f0b0aa94921144e3090d6bfaa5bb39961923b6f7db
+  checksum: 10/a33d22a26ae4d66c371e620a19da67ee1aab2cdb75dbcbf5dd4dc885368b9fc90a7063112dba7b58eee8cf3d7b69a6640941aa50106db1a287eca5c8188bbf76
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.9.1":
+"@vaadin/overlay@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/overlay@npm:24.9.1"
+  resolution: "@vaadin/overlay@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/3d84412fe98c43b8e9487a5426f72dbc09fcad964d9f792bc7daab944776f106dfc27b0242642effb77e45a3314eccf646c3cd0cfc1852646f69fe1eab5bca32
+  checksum: 10/48d52a1038c3ee033d56a819cd67da171b2f640bdfdbc1d1bb9091401a0a661f817862587efa0a5eda0ad5119ed0014edb1fd9f96b31b0724399c935d33133c0
   languageName: node
   linkType: hard
 
@@ -5215,37 +5217,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.9.1":
+"@vaadin/vaadin-lumo-styles@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.1"
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.2"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/icon": "npm:~24.9.1"
+    "@vaadin/icon": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
-  checksum: 10/6318b68ccee1ca3527d6aa503d3a57d5a9920a00b459057fa7a98336d071a63e905dfd1e29c965f740c7b409ea5a9cc5bd99f769633803b3d485f765741e43ee
+  checksum: 10/ea0f008ccc4cabe1ae40f5fb78fb59b0b0d6996694ba054df1b634296563f75abeb0c1cbcde5adac8cc9e455e341f2b8fe13b132aa393e5a94804f1b4e6c8c43
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.9.1":
+"@vaadin/vaadin-material-styles@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/vaadin-material-styles@npm:24.9.1"
+  resolution: "@vaadin/vaadin-material-styles@npm:24.9.2"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
-  checksum: 10/e3cb4a5de4d28bcd43b82a94d25880af5b22116f15b0f711d5b66aaaf5116e144fe6f05143fee9e65ecc6d6ea8a3b734864667c20135e3047e79c3aab9a03f00
+  checksum: 10/bbe07aa29a8e9ea36f62cf1e17c497e38207850743be450d05976febb5b9d751766abf1a56d116410c09e91e6b390164f7fdb47714fac981c323cc75d00fa084
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.9.1, @vaadin/vaadin-themable-mixin@npm:~24.9.1":
+"@vaadin/vaadin-themable-mixin@npm:24.9.2, @vaadin/vaadin-themable-mixin@npm:~24.9.2":
-  version: 24.9.1
+  version: 24.9.2
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.9.1"
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
     style-observer: "npm:^0.0.8"
-  checksum: 10/90139de617724f01b116a52388319d9e9d752215b98bf5a7ee10eebf4b0d21583c1ac8a238a921bfe83665c3becd5586d322a4d463cdf3e9bfa493331c68a604
+  checksum: 10/80e06db3dc145ea28c43b58829eb298524dd44732e419ebd99e562053a7b7bcb4dec121e12bcba96610b63b328250dc4b09776d9d2dae94b3cca7f0414d5590c
   languageName: node
   linkType: hard
 
@@ -8030,18 +8032,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:9.36.0":
+"eslint@npm:9.37.0":
-  version: 9.36.0
+  version: 9.37.0
-  resolution: "eslint@npm:9.36.0"
+  resolution: "eslint@npm:9.37.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.8.0"
     "@eslint-community/regexpp": "npm:^4.12.1"
     "@eslint/config-array": "npm:^0.21.0"
-    "@eslint/config-helpers": "npm:^0.3.1"
+    "@eslint/config-helpers": "npm:^0.4.0"
-    "@eslint/core": "npm:^0.15.2"
+    "@eslint/core": "npm:^0.16.0"
     "@eslint/eslintrc": "npm:^3.3.1"
-    "@eslint/js": "npm:9.36.0"
+    "@eslint/js": "npm:9.37.0"
-    "@eslint/plugin-kit": "npm:^0.3.5"
+    "@eslint/plugin-kit": "npm:^0.4.0"
     "@humanfs/node": "npm:^0.16.6"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@humanwhocodes/retry": "npm:^0.4.2"
@@ -8076,7 +8078,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/6e512a82e680e6cdc554e97c7e232b83171f24a52fb46f89c2df74bcb80fe59b6e0a989485c9fe7e9ca81556b1953dd8604ace4ed37f651eded9a37816c06b7c
+  checksum: 10/c7530470c9cafe9a7f768477f7894d9b9d28e92995186223e99fbd9edeb391119e2a70678a2e98e213ae37cbb41de89403b510f5f33df2340aa65dd6f2a3c0bb
   languageName: node
   linkType: hard
 
@@ -9190,15 +9192,15 @@ __metadata:
     "@codemirror/view": "npm:6.38.4"
     "@date-fns/tz": "npm:1.4.1"
     "@egjs/hammerjs": "npm:2.0.17"
-    "@formatjs/intl-datetimeformat": "npm:6.18.0"
+    "@formatjs/intl-datetimeformat": "npm:6.18.1"
-    "@formatjs/intl-displaynames": "npm:6.8.11"
+    "@formatjs/intl-displaynames": "npm:6.8.12"
-    "@formatjs/intl-durationformat": "npm:0.7.4"
+    "@formatjs/intl-durationformat": "npm:0.7.5"
-    "@formatjs/intl-getcanonicallocales": "npm:2.5.5"
+    "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
-    "@formatjs/intl-listformat": "npm:7.7.11"
+    "@formatjs/intl-listformat": "npm:7.7.12"
-    "@formatjs/intl-locale": "npm:4.2.11"
+    "@formatjs/intl-locale": "npm:4.2.12"
-    "@formatjs/intl-numberformat": "npm:8.15.4"
+    "@formatjs/intl-numberformat": "npm:8.15.5"
-    "@formatjs/intl-pluralrules": "npm:5.4.4"
+    "@formatjs/intl-pluralrules": "npm:5.4.5"
-    "@formatjs/intl-relativetimeformat": "npm:11.4.11"
+    "@formatjs/intl-relativetimeformat": "npm:11.4.12"
     "@fullcalendar/core": "npm:6.1.19"
     "@fullcalendar/daygrid": "npm:6.1.19"
     "@fullcalendar/interaction": "npm:6.1.19"
@@ -9267,8 +9269,8 @@ __metadata:
     "@types/tar": "npm:6.1.13"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
-    "@vaadin/combo-box": "npm:24.9.1"
+    "@vaadin/combo-box": "npm:24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:24.9.2"
     "@vibrant/color": "npm:4.0.0"
     "@vitest/coverage-v8": "npm:3.2.4"
     "@vue/web-component-wrapper": "npm:1.3.0"
@@ -9291,7 +9293,7 @@ __metadata:
     dialog-polyfill: "npm:0.5.6"
     echarts: "npm:6.0.0"
     element-internals-polyfill: "npm:3.0.2"
-    eslint: "npm:9.36.0"
+    eslint: "npm:9.37.0"
     eslint-config-airbnb-base: "npm:15.0.0"
     eslint-config-prettier: "npm:10.1.8"
     eslint-import-resolver-webpack: "npm:0.13.10"
@@ -9315,7 +9317,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
-    intl-messageformat: "npm:10.7.16"
+    intl-messageformat: "npm:10.7.17"
     js-yaml: "npm:4.1.0"
     jsdom: "npm:27.0.0"
     jszip: "npm:3.10.1"
@@ -9710,15 +9712,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.7.16":
+"intl-messageformat@npm:10.7.17":
-  version: 10.7.16
+  version: 10.7.17
-  resolution: "intl-messageformat@npm:10.7.16"
+  resolution: "intl-messageformat@npm:10.7.17"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/ecma402-abstract": "npm:2.3.5"
     "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.2"
+    "@formatjs/icu-messageformat-parser": "npm:2.11.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/c19b77c5e495ce8b0d1aa0d95444bf3a4f73886805f1e08d7159b364abcf2f63686b2ccf202eaafb0e39a0e9fde61848b8dd2db1679efd4f6ec8f6a3d0e77928
+  checksum: 10/4f8c30c998bfc14eb64894414b94a8923045ab31d7bbf0978dab6621c644d451ff5c533c04ce8128163b74dd6d59061ec1ef3acb1cbab3302d31cbdb21947620
   languageName: node
   linkType: hard