Merge branch 'rc'

* Update disabled state logic in action and condition editors to account for indent property

* Remove opacity

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.4.cjs
+yarnPath: .yarn/releases/yarn-4.9.3.cjs

package.json

@@ -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.8.6",
+    "@vaadin/combo-box": "24.8.5",
-    "@vaadin/vaadin-themable-mixin": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.8.5",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -112,7 +112,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.11",
+    "hls.js": "1.6.10",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -123,7 +123,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.1",
-    "marked": "16.2.1",
+    "marked": "16.2.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -159,7 +159,7 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.1",
+    "@rspack/core": "1.4.11",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -218,7 +218,7 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.41.0",
+    "typescript-eslint": "8.40.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -235,7 +235,7 @@
     "globals": "16.3.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@vaadin/vaadin-themable-mixin": "24.8.6"
+    "@vaadin/vaadin-themable-mixin": "24.8.5"
   },
-  "packageManager": "yarn@4.9.4"
+  "packageManager": "yarn@4.9.3"
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250827.0"
+version      = "20250903.5"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/components/ha-automation-row.ts

@@ -25,6 +25,8 @@ export class HaAutomationRow extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "building-block" })
   public buildingBlock = false;
 
+  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
+
   @query(".row")
   private _rowElement?: HTMLDivElement;
 
@@ -78,6 +80,8 @@ export class HaAutomationRow extends LitElement {
       ev.key !== " " &&
       !(
         (this.sortSelected || ev.altKey) &&
+        !(ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
         (ev.key === "ArrowUp" || ev.key === "ArrowDown")
       )
     ) {
@@ -130,6 +134,7 @@ export class HaAutomationRow extends LitElement {
     .expand-button {
       transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
       color: var(--ha-color-on-neutral-quiet);
+      margin-left: -8px;
     }
     :host([building-block]) .leading-icon-wrapper {
       background-color: var(--ha-color-fill-neutral-loud-resting);
@@ -168,9 +173,20 @@ export class HaAutomationRow extends LitElement {
       margin: 0 12px;
     }
     :host([sort-selected]) .row {
-      box-shadow:
+      outline: solid;
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
+    }
+    .row:hover {
+      background-color: rgba(var(--rgb-primary-text-color), 0.04);
+    }
+    :host([highlight]) .row {
+      background-color: rgba(var(--rgb-primary-color), 0.08);
+    }
+    :host([highlight]) .row:hover {
+      background-color: rgba(var(--rgb-primary-color), 0.16);
     }
   `;
 }
@@ -183,5 +199,8 @@ declare global {
   interface HASSDomEvents {
     "toggle-collapsed": undefined;
     "stop-sort-selection": undefined;
+    "copy-row": undefined;
+    "cut-row": undefined;
+    "delete-row": undefined;
   }
 }

src/components/ha-bottom-sheet.ts

@@ -30,6 +30,8 @@ export class HaBottomSheet extends LitElement {
 
   @state() private _dialogMaxViewpointHeight = 70;
 
+  @state() private _dialogMinViewpointHeight = 55;
+
   @state() private _dialogViewportHeight?: number;
 
   render() {
@@ -41,6 +43,7 @@ export class HaBottomSheet extends LitElement {
           ? `${this._dialogViewportHeight}vh`
           : "auto",
         maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        minHeight: `${this._dialogMinViewpointHeight}vh`,
       })}
     >
       <div class="handle-wrapper">
@@ -80,6 +83,7 @@ export class HaBottomSheet extends LitElement {
       this._dialogViewportHeight =
         (this._dialog.offsetHeight / window.innerHeight) * 100;
       this._dialogMaxViewpointHeight = 90;
+      this._dialogMinViewpointHeight = 20;
     } else {
       // after close animation is done close dialog element and fire closed event
       this._dialog.close();
@@ -228,7 +232,6 @@ export class HaBottomSheet extends LitElement {
       box-shadow: var(--wa-shadow-l);
       padding: 0;
       margin: 0;
-
       top: auto;
       inset-inline-end: auto;
       bottom: 0;

src/components/ha-items-display-editor.ts

@@ -393,10 +393,13 @@ export class HaItemDisplayEditor extends LitElement {
       --md-list-item-one-line-container-height: 48px;
     }
     ha-md-list-item.drag-selected {
-      box-shadow:
+      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
       border-radius: 8px;
+      outline: solid;
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
     }
     ha-md-list-item ha-icon-button {
       margin-left: -12px;

src/components/ha-md-dialog.ts

@@ -159,6 +159,7 @@ export class HaMdDialog extends Dialog {
         --md-dialog-headline-size: var(--ha-font-size-xl);
         --md-dialog-supporting-text-size: var(--ha-font-size-m);
         --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
+        --md-divider-color: var(--divider-color);
       }
 
       :host([type="alert"]) {

src/components/ha-related-items.ts

@@ -3,6 +3,7 @@ import {
   mdiDevices,
   mdiPaletteSwatch,
   mdiTextureBox,
+  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -266,7 +267,9 @@ export class HaRelatedItems extends LitElement {
                   <a href="/config/devices/device/${relatedDeviceId}">
                     <ha-list-item hasMeta graphic="icon">
                       <ha-svg-icon
-                        .path=${mdiDevices}
+                        .path=${device.entry_type === "service"
+                          ? mdiTransitConnectionVariant
+                          : mdiDevices}
                         slot="graphic"
                       ></ha-svg-icon>
                       ${device.name_by_user || device.name}

src/components/ha-sortable.ts

@@ -15,21 +15,16 @@ declare global {
     "item-added": {
       index: number;
       data: any;
+      item: any;
     };
     "item-removed": {
       index: number;
     };
     "drag-start": undefined;
     "drag-end": undefined;
-    "item-cloned": HaSortableClonedEventData;
   }
 }
 
-export interface HaSortableClonedEventData {
-  item: any;
-  clone: any;
-}
-
 export type HaSortableOptions = Omit<
   SortableInstance.SortableOptions,
   "onStart" | "onChoose" | "onEnd" | "onUpdate" | "onAdd" | "onRemove"
@@ -154,7 +149,6 @@ export class HaSortable extends LitElement {
       onUpdate: this._handleUpdate,
       onAdd: this._handleAdd,
       onRemove: this._handleRemove,
-      onClone: this._handleClone,
     };
 
     if (this.draggableSelector) {
@@ -187,6 +181,7 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-added", {
       index: evt.newIndex,
       data: evt.item.sortableData,
+      item: evt.item,
     });
   };
 
@@ -194,10 +189,6 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-removed", { index: evt.oldIndex });
   };
 
-  private _handleClone = (evt) => {
-    fireEvent(this, "item-cloned", evt);
-  };
-
   private _handleEnd = async (evt) => {
     fireEvent(this, "drag-end");
     // put back in original location

src/data/automation.ts

@@ -387,18 +387,6 @@ export const normalizeAutomationConfig = <
     }
   }
 
-  // We move all conditions into the action for display
-  if (config.conditions) {
-    if (config.actions) {
-      (config.actions as Action[]).unshift(
-        ...(config.conditions as Condition[])
-      );
-    } else {
-      config.actions = config.conditions;
-    }
-    delete config.conditions;
-  }
-
   return config;
 };
 
@@ -568,7 +556,6 @@ export interface AutomationClipboard {
 }
 
 export interface BaseSidebarConfig {
-  toggleYamlMode: () => boolean;
   delete: () => void;
   close: (focus?: boolean) => void;
 }
@@ -580,6 +567,7 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
+  toggleYamlMode: () => void;
   config: Trigger;
   yamlMode: boolean;
   uiSupported: boolean;
@@ -593,6 +581,7 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
+  toggleYamlMode: () => void;
   config: Condition;
   yamlMode: boolean;
   uiSupported: boolean;
@@ -606,6 +595,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
   cut: () => void;
   copy: () => void;
   run: () => void;
+  toggleYamlMode: () => void;
   config: {
     action: Action;
   };
@@ -627,6 +617,7 @@ export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
     key: string;
     excludeKeys: string[];
   };
+  toggleYamlMode: () => void;
   yamlMode: boolean;
 }
 

src/data/graph.ts

@@ -1 +1 @@
-export const strokeWidth = 5;
+export const strokeWidth = 2;

src/dialogs/generic/dialog-box.ts

@@ -3,11 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-button";
+import "../../components/ha-dialog-header";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
-import "../../components/ha-dialog-header";
 import "../../components/ha-svg-icon";
-import "../../components/ha-button";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
 import type { HomeAssistant } from "../../types";
@@ -52,7 +52,7 @@ class DialogBox extends LitElement {
       return nothing;
     }
 
-    const confirmPrompt = this._params.confirmation || this._params.prompt;
+    const confirmPrompt = this._params.confirmation || !!this._params.prompt;
 
     const dialogTitle =
       this._params.title ||
@@ -62,7 +62,7 @@ class DialogBox extends LitElement {
     return html`
       <ha-md-dialog
         open
-        .disableCancelAction=${confirmPrompt || false}
+        .disableCancelAction=${confirmPrompt}
         @closed=${this._dialogClosed}
         type="alert"
         aria-labelledby="dialog-box-title"
@@ -100,23 +100,22 @@ class DialogBox extends LitElement {
             : ""}
         </div>
         <div slot="actions">
-          ${confirmPrompt &&
+          ${confirmPrompt
-          html`
+            ? html`
                 <ha-button
                   @click=${this._dismiss}
-              ?dialogInitialFocus=${!this._params.prompt &&
+                  ?autofocus=${!this._params.prompt && this._params.destructive}
-              this._params.destructive}
                   appearance="plain"
                 >
                   ${this._params.dismissText
                     ? this._params.dismissText
                     : this.hass.localize("ui.common.cancel")}
                 </ha-button>
-          `}
+              `
+            : nothing}
           <ha-button
             @click=${this._confirm}
-            ?dialogInitialFocus=${!this._params.prompt &&
+            ?autofocus=${!this._params.prompt && !this._params.destructive}
-            !this._params.destructive}
             variant=${this._params.destructive ? "danger" : "brand"}
           >
             ${this._params.confirmText

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

@@ -8,6 +8,7 @@ import {
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
+  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -311,6 +312,8 @@ export class MoreInfoDialog extends LitElement {
     const isAdmin = this.hass.user!.is_admin;
 
     const deviceId = this._getDeviceId();
+    const deviceType =
+      (deviceId && this.hass.devices[deviceId].entry_type) || "device";
 
     const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
     const isSpecificInitialView =
@@ -434,11 +437,18 @@ export class MoreInfoDialog extends LitElement {
                                 @request-selected=${this._goToDevice}
                               >
                                 ${this.hass.localize(
-                                  "ui.dialogs.more_info_control.device_info"
+                                  "ui.dialogs.more_info_control.device_or_service_info",
+                                  {
+                                    type: this.hass.localize(
+                                      `ui.dialogs.more_info_control.device_type.${deviceType}`
+                                    ),
+                                  }
                                 )}
                                 <ha-svg-icon
                                   slot="graphic"
-                                  .path=${mdiDevices}
+                                  .path=${deviceType === "service"
+                                    ? mdiTransitConnectionVariant
+                                    : mdiDevices}
                                 ></ha-svg-icon>
                               </ha-list-item>
                             `

src/dialogs/shortcuts/dialog-shortcuts.ts

@@ -1,121 +1,148 @@
+import { mdiAppleKeyboardCommand } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
-import { createCloseHeading } from "../../components/ha-dialog";
-import type { HomeAssistant } from "../../types";
-import { haStyleDialog } from "../../resources/styles";
-import "../../components/ha-alert";
-import "../../components/chips/ha-assist-chip";
 import type { LocalizeKeys } from "../../common/translations/localize";
+import "../../components/ha-alert";
+import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import { isMac } from "../../util/is_mac";
 
 interface Text {
-  type: "text";
+  textTranslationKey: LocalizeKeys;
-  key: LocalizeKeys;
 }
 
-type ShortcutString = string | { key: LocalizeKeys };
+interface LocalizedShortcut {
+  shortcutTranslationKey: LocalizeKeys;
+}
+
+type ShortcutString = string | LocalizedShortcut;
 
 interface Shortcut {
-  type: "shortcut";
   shortcut: ShortcutString[];
-  key: LocalizeKeys;
+  descriptionTranslationKey: LocalizeKeys;
 }
 
 interface Section {
-  key: LocalizeKeys;
+  titleTranslationKey: LocalizeKeys;
   items: (Text | Shortcut)[];
 }
 
+const CTRL_CMD = "__CTRL_CMD__";
+
 const _SHORTCUTS: Section[] = [
   {
-    key: "ui.dialogs.shortcuts.searching.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.searching.title",
     items: [
-      { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" },
       {
-        type: "shortcut",
+        textTranslationKey: "ui.dialogs.shortcuts.searching.on_any_page",
+      },
+      {
         shortcut: ["C"],
-        key: "ui.dialogs.shortcuts.searching.search_command",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_command",
       },
       {
-        type: "shortcut",
         shortcut: ["E"],
-        key: "ui.dialogs.shortcuts.searching.search_entities",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_entities",
       },
       {
-        type: "shortcut",
         shortcut: ["D"],
-        key: "ui.dialogs.shortcuts.searching.search_devices",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_devices",
       },
       {
-        type: "text",
+        textTranslationKey:
-        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+          "ui.dialogs.shortcuts.searching.on_pages_with_tables",
       },
       {
-        type: "shortcut",
+        shortcut: [CTRL_CMD, "F"],
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
+        descriptionTranslationKey:
-        key: "ui.dialogs.shortcuts.searching.search_in_table",
+          "ui.dialogs.shortcuts.searching.search_in_table",
       },
     ],
   },
   {
-    key: "ui.dialogs.shortcuts.assist.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.assist.title",
     items: [
       {
-        type: "shortcut",
         shortcut: ["A"],
-        key: "ui.dialogs.shortcuts.assist.open_assist",
+        descriptionTranslationKey: "ui.dialogs.shortcuts.assist.open_assist",
       },
     ],
   },
   {
-    key: "ui.dialogs.shortcuts.automation_script.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.automation_script.title",
     items: [
       {
-        type: "shortcut",
+        shortcut: [CTRL_CMD, "C"],
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
+        descriptionTranslationKey:
-        key: "ui.dialogs.shortcuts.automation_script.paste",
+          "ui.dialogs.shortcuts.automation_script.copy",
       },
       {
-        type: "shortcut",
+        shortcut: [CTRL_CMD, "X"],
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut",
-        key: "ui.dialogs.shortcuts.automation_script.save",
-      },
-    ],
       },
       {
-    key: "ui.dialogs.shortcuts.charts.title",
-    items: [
-      {
-        type: "shortcut",
         shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          CTRL_CMD,
-          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" },
         ],
-        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.delete",
       },
       {
-        type: "shortcut",
+        shortcut: [CTRL_CMD, "V"],
-        shortcut: [
+        descriptionTranslationKey:
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          "ui.dialogs.shortcuts.automation_script.paste",
-          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
-        ],
-        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
       },
       {
-        type: "shortcut",
+        shortcut: [CTRL_CMD, "S"],
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
+        descriptionTranslationKey:
-        key: "ui.dialogs.shortcuts.charts.double_click",
+          "ui.dialogs.shortcuts.automation_script.save",
       },
     ],
   },
   {
-    key: "ui.dialogs.shortcuts.other.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.charts.title",
+    items: [
+      {
+        shortcut: [
+          CTRL_CMD,
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.shortcuts.drag" },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+      },
+      {
+        shortcut: [
+          CTRL_CMD,
+          {
+            shortcutTranslationKey:
+              "ui.dialogs.shortcuts.shortcuts.scroll_wheel",
+          },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+      },
+      {
+        shortcut: [
+          {
+            shortcutTranslationKey:
+              "ui.dialogs.shortcuts.shortcuts.double_click",
+          },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.double_click",
+      },
+    ],
+  },
+  {
+    titleTranslationKey: "ui.dialogs.shortcuts.other.title",
     items: [
       {
-        type: "shortcut",
         shortcut: ["M"],
-        key: "ui.dialogs.shortcuts.other.my_link",
+        descriptionTranslationKey: "ui.dialogs.shortcuts.other.my_link",
       },
     ],
   },
@@ -137,17 +164,28 @@ class DialogShortcuts extends LitElement {
   }
 
   private _renderShortcut(
-    shortcuts: ShortcutString[],
+    shortcutKeys: ShortcutString[],
-    translationKey: LocalizeKeys
+    descriptionKey: LocalizeKeys
   ) {
-    const keys = shortcuts.map((shortcut) =>
-      typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key)
-    );
-
     return html`
       <div class="shortcut">
-        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
+        ${shortcutKeys.map(
-        ${this.hass.localize(translationKey)}
+          (shortcutKey) =>
+            html`<span
+              >${shortcutKey === CTRL_CMD
+                ? isMac
+                  ? html`<ha-svg-icon
+                      .path=${mdiAppleKeyboardCommand}
+                    ></ha-svg-icon>`
+                  : this.hass.localize("ui.panel.config.automation.editor.ctrl")
+                : typeof shortcutKey === "string"
+                  ? shortcutKey
+                  : this.hass.localize(
+                      shortcutKey.shortcutTranslationKey
+                    )}</span
+            >`
+        )}
+        ${this.hass.localize(descriptionKey)}
       </div>
     `;
   }
@@ -171,16 +209,18 @@ class DialogShortcuts extends LitElement {
         <div class="content">
           ${_SHORTCUTS.map(
             (section) => html`
-              <h3>${this.hass.localize(section.key)}</h3>
+              <h3>${this.hass.localize(section.titleTranslationKey)}</h3>
               <div class="items">
                 ${section.items.map((item) => {
-                  if (item.type === "text") {
+                  if ("shortcut" in item) {
-                    return html`<p>${this.hass.localize(item.key)}</p>`;
+                    return this._renderShortcut(
+                      (item as Shortcut).shortcut,
+                      (item as Shortcut).descriptionTranslationKey
+                    );
                   }
-                  if (item.type === "shortcut") {
+                  return html`<p>
-                    return this._renderShortcut(item.shortcut, item.key);
+                    ${this.hass.localize((item as Text).textTranslationKey)}
-                  }
+                  </p>`;
-                  return nothing;
                 })}
               </div>
             `
@@ -232,6 +272,10 @@ class DialogShortcuts extends LitElement {
       .items p {
         margin-bottom: 8px;
       }
+
+      ha-svg-icon {
+        width: 12px;
+      }
     `,
   ];
 }

src/mixins/keyboard-shortcut-mixin.ts

@@ -1,5 +1,6 @@
 import type { LitElement } from "lit";
 import type { Constructor } from "../types";
+import { canOverrideAlphanumericInput } from "../common/dom/can-override-input";
 
 declare global {
   type SupportedShortcuts = Record<string, () => void>;
@@ -11,23 +12,62 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
   class extends superClass {
     private _keydownEvent = (event: KeyboardEvent) => {
       const supportedShortcuts = this.supportedShortcuts();
-      if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        !event.shiftKey &&
+        !event.altKey &&
+        event.key in supportedShortcuts
+      ) {
+        // Only capture the event if the user is not focused on an input
+        if (!canOverrideAlphanumericInput(event.composedPath())) {
+          return;
+        }
+        // Don't capture the event if the user is selecting text
+        if (window.getSelection()?.toString()) {
+          return;
+        }
         event.preventDefault();
         supportedShortcuts[event.key]();
+        return;
+      }
+
+      const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
+      if (event.key in supportedSingleKeyShortcuts) {
+        event.preventDefault();
+        supportedSingleKeyShortcuts[event.key]();
       }
     };
 
+    private _listenersAdded = false;
+
     public connectedCallback() {
       super.connectedCallback();
-      window.addEventListener("keydown", this._keydownEvent);
+      this.addKeyboardShortcuts();
     }
 
     public disconnectedCallback() {
-      window.removeEventListener("keydown", this._keydownEvent);
+      this.removeKeyboardShortcuts();
       super.disconnectedCallback();
     }
 
+    public addKeyboardShortcuts() {
+      if (this._listenersAdded) {
+        return;
+      }
+      this._listenersAdded = true;
+      window.addEventListener("keydown", this._keydownEvent);
+    }
+
+    public removeKeyboardShortcuts() {
+      this._listenersAdded = false;
+      window.removeEventListener("keydown", this._keydownEvent);
+    }
+
     protected supportedShortcuts(): SupportedShortcuts {
       return {};
     }
+
+    protected supportedSingleKeyShortcuts(): SupportedShortcuts {
+      return {};
+    }
   };

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

@@ -50,7 +50,9 @@ export default class HaAutomationActionEditor extends LitElement {
         class=${classMap({
           "card-content": true,
           disabled:
-            this.disabled || (this.action.enabled === false && !this.yamlMode),
+            !this.indent &&
+            (this.disabled ||
+              (this.action.enabled === false && !this.yamlMode)),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,
@@ -97,7 +99,7 @@ export default class HaAutomationActionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
       value: migrateAutomationAction(ev.detail.value),
     });
   }

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

@@ -5,12 +5,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -151,6 +151,8 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -193,6 +195,10 @@ export default class HaAutomationActionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
+  get selected() {
+    return this._selected;
+  }
+
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
 
@@ -303,7 +309,7 @@ export default class HaAutomationActionRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiContentDuplicate}
+                .path=${mdiPlusCircleMultipleOutline}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -436,7 +442,6 @@ export default class HaAutomationActionRow extends LitElement {
         ${this.optionsInSidebar
           ? html`<ha-automation-row
               .disabled=${this.action.enabled === false}
-              @click=${this._toggleSidebar}
               .leftChevron=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
@@ -447,12 +452,14 @@ export default class HaAutomationActionRow extends LitElement {
                 ))}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              @toggle-collapsed=${this._toggleCollapse}
+              .highlight=${this.highlight}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
               ].includes(blockType!)}
               .sortSelected=${this.sortSelected}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -511,6 +518,15 @@ export default class HaAutomationActionRow extends LitElement {
   };
 
   private _runAction = async () => {
+    requestAnimationFrame(() => {
+      // @ts-ignore is supported in all browsers except firefox
+      if (this.scrollIntoViewIfNeeded) {
+        // @ts-ignore is supported in all browsers except firefox
+        this.scrollIntoViewIfNeeded();
+        return;
+      }
+      this.scrollIntoView();
+    });
     const validated = await validateConfig(this.hass, {
       actions: this.action,
     });
@@ -620,6 +636,12 @@ export default class HaAutomationActionRow extends LitElement {
 
   private _copyAction = () => {
     this._setClipboard();
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.copied_to_clipboard"
+      ),
+      duration: 2000,
+    });
   };
 
   private _cutAction = () => {
@@ -628,6 +650,12 @@ export default class HaAutomationActionRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.cut_to_clipboard"
+      ),
+      duration: 2000,
+    });
   };
 
   private _moveUp = () => {
@@ -661,8 +689,7 @@ export default class HaAutomationActionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
+      fireEvent(this, "request-close-sidebar");
-      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -688,7 +715,7 @@ export default class HaAutomationActionRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       disable: this._onDisable,
       delete: this._onDelete,
@@ -706,12 +733,12 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 
@@ -758,10 +785,6 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
-  public isSelected() {
-    return this._selected;
-  }
-
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -6,11 +6,9 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
-import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import {
   ACTION_BUILDING_BLOCKS,
@@ -46,8 +44,6 @@ export default class HaAutomationAction extends LitElement {
   @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
     false;
 
-  @state() private _showReorder = false;
-
   @state() private _rowSortSelected?: number;
 
   @state()
@@ -68,33 +64,17 @@ export default class HaAutomationAction extends LitElement {
 
   private _actionKeys = new WeakMap<Action, string>();
 
-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
   protected render() {
     return html`
       <ha-sortable
         handle-selector=".handle"
         draggable-selector="ha-automation-action-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
         group="actions"
         invert-swap
         @item-moved=${this._actionMoved}
         @item-added=${this._actionAdded}
         @item-removed=${this._actionRemoved}
-        @item-cloned=${this._actionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -115,12 +95,12 @@ export default class HaAutomationAction extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._actionChanged}
                 .hass=${this.hass}
-                ?highlight=${this.highlightedActions?.includes(action)}
+                .highlight=${this.highlightedActions?.includes(action)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}
               >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                   ? html`
                       <div
                         tabindex="0"
@@ -319,11 +299,8 @@ export default class HaAutomationAction extends LitElement {
   private async _actionAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    let selected = false;
+    const item = ev.detail.item as HaAutomationActionRow;
-    if (data?.["ha-automation-row-selected"]) {
+    const selected = item.selected;
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
 
     let actions = [
       ...this.actions.slice(0, index),
@@ -381,12 +358,6 @@ export default class HaAutomationAction extends LitElement {
     fireEvent(this, "value-changed", { value: actions });
   }
 
-  private _actionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.action && ev.detail.item.isSelected()) {
-      ev.detail.item.action["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _duplicateAction(ev: CustomEvent) {
     ev.stopPropagation();
     const index = (ev.target as any).index;

src/panels/config/automation/action/types/ha-automation-action-condition.ts

@@ -3,6 +3,7 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../../common/string/compare";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
@@ -66,6 +67,7 @@ export class HaConditionAction extends LitElement implements ActionElement {
               .value=${this.action.condition}
               naturalMenuWidth
               @selected=${this._typeChanged}
+              @closed=${stopPropagation}
             >
               ${this._processedTypes(this.hass.localize).map(
                 ([opt, label, icon]) => html`

src/panels/config/automation/add-automation-element-dialog.ts

@@ -1,4 +1,9 @@
-import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
+import {
+  mdiAppleKeyboardCommand,
+  mdiClose,
+  mdiContentPaste,
+  mdiPlus,
+} from "@mdi/js";
 import Fuse from "fuse.js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -41,11 +46,14 @@ import {
 } from "../../../data/integration";
 import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
+import { HaFuse } from "../../../resources/fuse";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
+import { isMac } from "../../../util/is_mac";
+import { showToast } from "../../../util/toast";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
-import { HaFuse } from "../../../resources/fuse";
 
 const TYPES = {
   trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
@@ -85,7 +93,10 @@ const ENTITY_DOMAINS_OTHER = new Set([
 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
 
 @customElement("add-automation-element-dialog")
-class DialogAddAutomationElement extends LitElement implements HassDialog {
+class DialogAddAutomationElement
+  extends KeyboardShortcutMixin(LitElement)
+  implements HassDialog
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: AddAutomationElementDialogParams;
@@ -108,9 +119,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
 
   @state() private _height?: number;
 
+  @state() private _narrow = false;
+
   public showDialog(params): void {
     this._params = params;
     this._group = params.group;
+
+    this.addKeyboardShortcuts();
+
     if (this._params?.type === "action") {
       this.hass.loadBackendTranslation("services");
       this._fetchManifests();
@@ -120,9 +136,12 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     this._fullScreen = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
+
+    this._narrow = matchMedia("(max-width: 870px)").matches;
   }
 
   public closeDialog() {
+    this.removeKeyboardShortcuts();
     if (this._params) {
       fireEvent(this, "dialog-closed", { dialog: this.localName });
     }
@@ -555,15 +574,37 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   .value=${PASTE_VALUE}
                   @click=${this._selected}
                 >
+                  <div class="shortcut-label">
+                    <div class="label">
+                      <div>
                         ${this.hass.localize(
                           `ui.panel.config.automation.editor.${this._params.type}s.paste`
                         )}
-                  <span slot="supporting-text"
+                      </div>
-                    >${this.hass.localize(
+                      <div class="supporting-text">
+                        ${this.hass.localize(
                           // @ts-ignore
                           `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
+                        )}
+                      </div>
+                    </div>
+                    ${!this._narrow
+                      ? html`<span class="shortcut">
+                          <span
+                            >${isMac
+                              ? html`<ha-svg-icon
+                                  slot="start"
+                                  .path=${mdiAppleKeyboardCommand}
+                                ></ha-svg-icon>`
+                              : this.hass.localize(
+                                  "ui.panel.config.automation.editor.ctrl"
                                 )}</span
                           >
+                          <span>+</span>
+                          <span>V</span>
+                        </span>`
+                      : nothing}
+                  </div>
                   <ha-svg-icon
                     slot="start"
                     .path=${mdiContentPaste}
@@ -571,7 +612,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
                 </ha-md-list-item>
                 <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-            : ""}
+            : nothing}
           ${repeat(
             items,
             (item) => item.key,
@@ -637,6 +678,30 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     this._filter = ev.detail.value;
   }
 
+  private _addClipboard = () => {
+    if (this._params?.clipboardItem) {
+      this._params!.add(PASTE_VALUE);
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.automation.editor.item_pasted",
+          {
+            item: this.hass.localize(
+              // @ts-ignore
+              `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
+            ),
+          }
+        ),
+      });
+      this.closeDialog();
+    }
+  };
+
+  protected supportedShortcuts(): SupportedShortcuts {
+    return {
+      v: () => this._addClipboard(),
+    };
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -660,6 +725,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           max-width: 100vw;
           --md-list-item-leading-space: 24px;
           --md-list-item-trailing-space: 24px;
+          --md-list-item-supporting-text-font: var(--ha-font-size-s);
         }
         ha-md-list-item img {
           width: 24px;
@@ -668,6 +734,27 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           display: block;
           margin: 0 16px;
         }
+        .shortcut-label {
+          display: flex;
+          gap: 12px;
+          justify-content: space-between;
+        }
+        .shortcut-label .supporting-text {
+          color: var(--secondary-text-color);
+          font-size: var(--ha-font-size-s);
+        }
+        .shortcut-label .shortcut {
+          --mdc-icon-size: 12px;
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 2px;
+        }
+        .shortcut-label .shortcut span {
+          font-size: var(--ha-font-size-s);
+          font-family: var(--ha-font-family-code);
+          color: var(--ha-color-text-secondary);
+        }
       `,
     ];
   }

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

@@ -53,8 +53,9 @@ export default class HaAutomationConditionEditor extends LitElement {
         class=${classMap({
           "card-content": true,
           disabled:
-            this.disabled ||
+            !this.indent &&
-            (this.condition.enabled === false && !this.yamlMode),
+            (this.disabled ||
+              (this.condition.enabled === false && !this.yamlMode)),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,
@@ -103,8 +104,9 @@ export default class HaAutomationConditionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    // @ts-ignore
+    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
-    fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
+      value: ev.detail.value,
+    });
   }
 
   private _onUiChanged(ev: CustomEvent) {

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

@@ -4,12 +4,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -53,6 +53,7 @@ import {
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
+import { showToast } from "../../../../util/toast";
 import "../ha-automation-editor-warning";
 import { rowStyles } from "../styles";
 import "./ha-automation-condition-editor";
@@ -116,6 +117,8 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @property({ type: Boolean, attribute: "sort-selected" })
   public sortSelected = false;
 
@@ -152,6 +155,10 @@ export default class HaAutomationConditionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
+  get selected() {
+    return this._selected;
+  }
+
   private _renderRow() {
     return html`
       <ha-svg-icon
@@ -212,7 +219,7 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiContentDuplicate}
+                .path=${mdiPlusCircleMultipleOutline}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -355,12 +362,13 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              @click=${this._toggleSidebar}
+              .highlight=${this.highlight}
-              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
                 this.condition.condition
               )}
               .sortSelected=${this.sortSelected}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -375,12 +383,12 @@ export default class HaAutomationConditionRow extends LitElement {
             error: this._testingResult === false,
           })}"
         >
-          ${this._testingResult
+          ${this._testingResult === undefined
-            ? this.hass.localize(
+            ? nothing
-                "ui.panel.config.automation.editor.conditions.testing_pass"
-              )
             : this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_error"
+                `ui.panel.config.automation.editor.conditions.testing_${
+                  this._testingResult ? "pass" : "error"
+                }`
               )}
         </div>
       </ha-card>
@@ -477,6 +485,15 @@ export default class HaAutomationConditionRow extends LitElement {
     this._testingResult = undefined;
     this._testing = true;
     const condition = this.condition;
+    requestAnimationFrame(() => {
+      // @ts-ignore is supported in all browsers expect firefox
+      if (this.scrollIntoViewIfNeeded) {
+        // @ts-ignore is supported in all browsers expect firefox
+        this.scrollIntoViewIfNeeded();
+        return;
+      }
+      this.scrollIntoView();
+    });
 
     try {
       const validateResult = await validateConfig(this.hass, {
@@ -567,6 +584,12 @@ export default class HaAutomationConditionRow extends LitElement {
 
   private _copyCondition = () => {
     this._setClipboard();
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.copied_to_clipboard"
+      ),
+      duration: 2000,
+    });
   };
 
   private _cutCondition = () => {
@@ -575,6 +598,12 @@ export default class HaAutomationConditionRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.cut_to_clipboard"
+      ),
+      duration: 2000,
+    });
   };
 
   private _moveUp = () => {
@@ -635,8 +664,7 @@ export default class HaAutomationConditionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
+      fireEvent(this, "request-close-sidebar");
-      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -660,7 +688,7 @@ export default class HaAutomationConditionRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       disable: this._onDisable,
       delete: this._onDelete,
@@ -676,12 +704,12 @@ export default class HaAutomationConditionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 
@@ -694,10 +722,6 @@ export default class HaAutomationConditionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
-  public isSelected() {
-    return this._selected;
-  }
-
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -6,12 +6,10 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
-import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
   AutomationClipboard,
@@ -44,8 +42,6 @@ export default class HaAutomationCondition extends LitElement {
   @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
     false;
 
-  @state() private _showReorder = false;
-
   @state() private _rowSortSelected?: number;
 
   @state()
@@ -66,21 +62,6 @@ export default class HaAutomationCondition extends LitElement {
 
   private _conditionKeys = new WeakMap<Condition, string>();
 
-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
   protected updated(changedProperties: PropertyValues) {
     if (!changedProperties.has("conditions")) {
       return;
@@ -165,13 +146,12 @@ export default class HaAutomationCondition extends LitElement {
       <ha-sortable
         handle-selector=".handle"
         draggable-selector="ha-automation-condition-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
         group="conditions"
         invert-swap
         @item-moved=${this._conditionMoved}
         @item-added=${this._conditionAdded}
         @item-removed=${this._conditionRemoved}
-        @item-cloned=${this._conditionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -193,12 +173,12 @@ export default class HaAutomationCondition extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._conditionChanged}
                 .hass=${this.hass}
-                ?highlight=${this.highlightedConditions?.includes(cond)}
+                .highlight=${this.highlightedConditions?.includes(cond)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}
               >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                   ? html`
                       <div
                         tabindex="0"
@@ -337,11 +317,8 @@ export default class HaAutomationCondition extends LitElement {
   private async _conditionAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    let selected = false;
+    const item = ev.detail.item as HaAutomationConditionRow;
-    if (data?.["ha-automation-row-selected"]) {
+    const selected = item.selected;
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
     let conditions = [
       ...this.conditions.slice(0, index),
       data,
@@ -379,12 +356,6 @@ export default class HaAutomationCondition extends LitElement {
     fireEvent(this, "value-changed", { value: conditions });
   }
 
-  private _conditionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.isSelected()) {
-      ev.detail.item.condition["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _conditionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const conditions = [...this.conditions];

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

@@ -1,7 +1,6 @@
 import { consume } from "@lit/context";
 import {
   mdiCog,
-  mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
   mdiDelete,
@@ -11,20 +10,18 @@ import {
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiRobotConfused,
   mdiStopCircleOutline,
   mdiTag,
   mdiTransitConnection,
-  mdiUnfoldLessHorizontal,
-  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { isArray } from "@tsparticles/engine";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
@@ -44,7 +41,6 @@ import type {
   AutomationConfig,
   AutomationEntity,
   BlueprintAutomationConfig,
-  Condition,
 } from "../../../data/automation";
 import {
   deleteAutomation,
@@ -339,7 +335,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiContentDuplicate}
+              .path=${mdiPlusCircleMultipleOutline}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -373,30 +369,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
-          ${!useBlueprint
-            ? html`
-                <ha-list-item graphic="icon" @click=${this._collapseAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldLessHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.collapse_all"
-                  )}
-                </ha-list-item>
-
-                <ha-list-item graphic="icon" @click=${this._expandAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldMoreHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.expand_all"
-                  )}
-                </ha-list-item>
-              `
-            : nothing}
-
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -621,6 +593,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       this.hass
     ) {
       const initData = getAutomationEditorInitData();
+      this._dirty = !!initData;
       let baseConfig: Partial<AutomationConfig> = { description: "" };
       if (!initData || !("use_blueprint" in initData)) {
         baseConfig = {
@@ -1064,28 +1037,8 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       });
     }
 
-    // Move conditions at top of action to automation condition key
-    const configToSave = { ...this._config! };
-    configToSave.conditions = !configToSave.conditions
-      ? []
-      : isArray(configToSave.conditions)
-        ? [...configToSave.conditions]
-        : [configToSave.conditions];
-    configToSave.actions = !configToSave.actions
-      ? []
-      : isArray(configToSave.actions)
-        ? [...configToSave.actions]
-        : [configToSave.actions];
-
-    while (
-      configToSave.actions.length > 0 &&
-      "condition" in configToSave.actions[0]
-    ) {
-      configToSave.conditions.push(configToSave.actions.shift() as Condition);
-    }
-
     try {
-      await saveAutomationConfig(this.hass, id, configToSave);
+      await saveAutomationConfig(this.hass, id, this._config!);
 
       if (this._entityRegistryUpdate !== undefined) {
         let entityId = this._entityId;
@@ -1160,6 +1113,10 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveAutomation(),
+      c: () => this._copySelectedRow(),
+      x: () => this._cutSelectedRow(),
+      Delete: () => this._deleteSelectedRow(),
+      Backspace: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1171,14 +1128,28 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     return this._confirmUnsavedChanged();
   }
 
+  // @ts-ignore
   private _collapseAll() {
     this._manualEditor?.collapseAll();
   }
 
+  // @ts-ignore
   private _expandAll() {
     this._manualEditor?.expandAll();
   }
 
+  private _copySelectedRow() {
+    this._manualEditor?.copySelectedRow();
+  }
+
+  private _cutSelectedRow() {
+    this._manualEditor?.cutSelectedRow();
+  }
+
+  private _deleteSelectedRow() {
+    this._manualEditor?.deleteSelectedRow();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -1,6 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-bottom-sheet";
 import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
 import {
@@ -34,6 +33,8 @@ export default class HaAutomationSidebar extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _yamlMode = false;
 
   @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
@@ -52,8 +53,9 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-trigger>
       `;
     }
@@ -67,8 +69,9 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-condition>
       `;
     }
@@ -82,8 +85,9 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-action>
       `;
     }
@@ -96,7 +100,7 @@ export default class HaAutomationSidebar extends LitElement {
           .isWide=${this.isWide}
           .narrow=${this.narrow}
           .disabled=${this.disabled}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-option>
       `;
     }
@@ -110,8 +114,9 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-script-field-selector>
       `;
     }
@@ -125,8 +130,9 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-script-field>
       `;
     }
@@ -182,8 +188,8 @@ export default class HaAutomationSidebar extends LitElement {
     return undefined;
   }
 
-  private _handleCloseSidebar(ev: CustomEvent) {
+  public triggerCloseSidebar(ev?: CustomEvent) {
-    ev.stopPropagation();
+    ev?.stopPropagation();
     if (this.narrow) {
       this._bottomSheetElement?.closeSheet();
       return;
@@ -197,17 +203,12 @@ export default class HaAutomationSidebar extends LitElement {
   }
 
   private _toggleYamlMode = () => {
-    this._yamlMode = this.config!.toggleYamlMode();
+    (this.config as ActionSidebarConfig)?.toggleYamlMode();
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.config,
-        yamlMode: this._yamlMode,
-      },
-    });
   };
 
   static styles = css`
     :host {
+      z-index: 6;
       outline: none;
       height: 100%;
       --ha-card-border-radius: var(
@@ -235,5 +236,8 @@ declare global {
 
   interface HASSDomEvents {
     "toggle-yaml-mode": undefined;
+    "yaml-changed": {
+      value: unknown;
+    };
   }
 }

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

@@ -3,7 +3,13 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAll,
+  state,
+} from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
   any,
@@ -28,6 +34,7 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
+  ActionSidebarConfig,
   AutomationConfig,
   Condition,
   ManualAutomationConfig,
@@ -45,6 +52,8 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "./action/ha-automation-action";
 import type HaAutomationAction from "./action/ha-automation-action";
+import "./condition/ha-automation-condition";
+import type HaAutomationCondition from "./condition/ha-automation-condition";
 import "./ha-automation-sidebar";
 import type HaAutomationSidebar from "./ha-automation-sidebar";
 import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
@@ -90,8 +99,15 @@ export class HaManualAutomationEditor extends LitElement {
 
   @state() private _sidebarConfig?: SidebarConfig;
 
+  @state() private _sidebarKey?: string;
+
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
+  @queryAll("ha-automation-action, ha-automation-condition")
+  private _collapsableElements?: NodeListOf<
+    HaAutomationAction | HaAutomationCondition
+  >;
+
   private _previousConfig?: ManualAutomationConfig;
 
   public connectedCallback() {
@@ -150,12 +166,59 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
+        @request-close-sidebar=${this._triggerCloseSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
       ></ha-automation-trigger>
 
+      <div class="header">
+        <h2 id="conditions-heading" class="name">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.conditions.header"
+          )}
+          <span class="small"
+            >(${this.hass.localize("ui.common.optional")})</span
+          >
+        </h2>
+        <a
+          href=${documentationUrl(this.hass, "/docs/automation/condition/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ha-icon-button
+            .path=${mdiHelpCircle}
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.learn_more"
+            )}
+          ></ha-icon-button>
+        </a>
+      </div>
+      ${!ensureArray(this.config.conditions)?.length
+        ? html`<p>
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.description",
+              { user: this.hass.user?.name || "Alice" }
+            )}
+          </p>`
+        : nothing}
+
+      <ha-automation-condition
+        role="region"
+        aria-labelledby="conditions-heading"
+        .conditions=${this.config.conditions || []}
+        .highlightedConditions=${this._pastedConfig?.conditions || []}
+        @value-changed=${this._conditionChanged}
+        .hass=${this.hass}
+        .disabled=${this.disabled || this.saving}
+        .narrow=${this.narrow}
+        @open-sidebar=${this._openSidebar}
+        @request-close-sidebar=${this._triggerCloseSidebar}
+        @close-sidebar=${this._handleCloseSidebar}
+        root
+        sidebar
+      ></ha-automation-condition>
+
       <div class="header">
         <h2 id="actions-heading" class="name">
           ${this.hass.localize(
@@ -192,7 +255,7 @@ export class HaManualAutomationEditor extends LitElement {
         .highlightedActions=${this._pastedConfig?.actions || []}
         @value-changed=${this._actionChanged}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
+        @request-close-sidebar=${this._triggerCloseSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         .hass=${this.hass}
         .narrow=${this.narrow}
@@ -211,7 +274,11 @@ export class HaManualAutomationEditor extends LitElement {
         })}
       >
         <div class="content-wrapper">
-          <div class="content">
+          <div
+            class="content ${this._sidebarConfig && this.narrow
+              ? "has-bottom-sheet"
+              : ""}"
+          >
             <slot name="alerts"></slot>
             ${this._renderContent()}
           </div>
@@ -238,6 +305,7 @@ export class HaManualAutomationEditor extends LitElement {
             .config=${this._sidebarConfig}
             @value-changed=${this._sidebarConfigChanged}
             .disabled=${this.disabled}
+            .sidebarKey=${this._sidebarKey}
           ></ha-automation-sidebar>
         </div>
       </div>
@@ -265,6 +333,7 @@ export class HaManualAutomationEditor extends LitElement {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
+    this._sidebarKey = JSON.stringify(this._sidebarConfig);
 
     await this._sidebarElement?.updateComplete;
     this._sidebarElement?.focus();
@@ -282,8 +351,12 @@ export class HaManualAutomationEditor extends LitElement {
     };
   }
 
-  private _closeSidebar() {
+  private _triggerCloseSidebar() {
     if (this._sidebarConfig) {
+      if (this._sidebarElement) {
+        this._sidebarElement.triggerCloseSidebar();
+        return;
+      }
       this._sidebarConfig?.close();
     }
   }
@@ -320,7 +393,7 @@ export class HaManualAutomationEditor extends LitElement {
   }
 
   private _saveAutomation() {
-    this._closeSidebar();
+    this._triggerCloseSidebar();
     fireEvent(this, "save-automation");
   }
 
@@ -425,7 +498,12 @@ export class HaManualAutomationEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      if (this.dirty) {
+      if (
+        this.dirty ||
+        ensureArray(this.config.triggers)?.length ||
+        ensureArray(this.config.conditions)?.length ||
+        ensureArray(this.config.actions)?.length
+      ) {
         const result = await new Promise<boolean>((resolve) => {
           showPasteReplaceDialog(this, {
             domain: "automation",
@@ -534,24 +612,36 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private _getCollapsableElements() {
-    return this.shadowRoot!.querySelectorAll<HaAutomationAction>(
-      "ha-automation-action"
-    );
-  }
-
   public expandAll() {
-    this._getCollapsableElements().forEach((element) => {
+    this._collapsableElements?.forEach((element) => {
       element.expandAll();
     });
   }
 
   public collapseAll() {
-    this._getCollapsableElements().forEach((element) => {
+    this._collapsableElements?.forEach((element) => {
       element.collapseAll();
     });
   }
 
+  public copySelectedRow() {
+    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
+      (this._sidebarConfig as ActionSidebarConfig).copy();
+    }
+  }
+
+  public cutSelectedRow() {
+    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
+      (this._sidebarConfig as ActionSidebarConfig).cut();
+    }
+  }
+
+  public deleteSelectedRow() {
+    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
+      (this._sidebarConfig as ActionSidebarConfig).delete();
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

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

@@ -2,9 +2,9 @@ import { consume } from "@lit/context";
 import {
   mdiArrowDown,
   mdiArrowUp,
-  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
@@ -86,6 +86,10 @@ export default class HaAutomationOptionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
+  get selected() {
+    return this._selected;
+  }
+
   private _expandedChanged(ev) {
     if (ev.currentTarget.id !== "option") {
       return;
@@ -167,7 +171,7 @@ export default class HaAutomationOptionRow extends LitElement {
                 )}
                 <ha-svg-icon
                   slot="start"
-                  .path=${mdiContentDuplicate}
+                  .path=${mdiPlusCircleMultipleOutline}
                 ></ha-svg-icon>
               </ha-md-menu-item>
 
@@ -271,9 +275,10 @@ export default class HaAutomationOptionRow extends LitElement {
               left-chevron
               .collapsed=${this._collapsed}
               .selected=${this._selected}
+              .sortSelected=${this.sortSelected}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
-              .sortSelected=${this.sortSelected}
+              @delete-row=${this._removeOption}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -376,8 +381,7 @@ export default class HaAutomationOptionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
+      fireEvent(this, "request-close-sidebar");
-      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -395,7 +399,6 @@ export default class HaAutomationOptionRow extends LitElement {
       rename: () => {
         this._renameOption();
       },
-      toggleYamlMode: () => false, // no yaml mode for options
       delete: this._removeOption,
       duplicate: this._duplicateOption,
       defaultOption: !!this.defaultActions,
@@ -404,12 +407,12 @@ export default class HaAutomationOptionRow extends LitElement {
     this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 
@@ -446,10 +449,6 @@ export default class HaAutomationOptionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
-  public isSelected() {
-    return this._selected;
-  }
-
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -6,11 +6,9 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
-import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type { AutomationClipboard } from "../../../../data/automation";
 import type { Option } from "../../../../data/script";
@@ -35,8 +33,6 @@ export default class HaAutomationOption extends LitElement {
   @property({ type: Boolean, attribute: "show-default" })
   public showDefaultActions = false;
 
-  @state() private _showReorder = false;
-
   @state() private _rowSortSelected?: number;
 
   @state()
@@ -57,33 +53,17 @@ export default class HaAutomationOption extends LitElement {
 
   private _optionsKeys = new WeakMap<Option, string>();
 
-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
   protected render() {
     return html`
       <ha-sortable
         handle-selector=".handle"
         draggable-selector="ha-automation-option-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
         group="options"
         invert-swap
         @item-moved=${this._optionMoved}
         @item-added=${this._optionAdded}
         @item-removed=${this._optionRemoved}
-        @item-cloned=${this._optionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -107,7 +87,7 @@ export default class HaAutomationOption extends LitElement {
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}
               >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                   ? html`
                       <div
                         tabindex="0"
@@ -259,11 +239,8 @@ export default class HaAutomationOption extends LitElement {
   private async _optionAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    let selected = false;
+    const item = ev.detail.item as HaAutomationOptionRow;
-    if (data?.["ha-automation-row-selected"]) {
+    const selected = item.selected;
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
 
     const options = [
       ...this.options.slice(0, index),
@@ -291,12 +268,6 @@ export default class HaAutomationOption extends LitElement {
     fireEvent(this, "value-changed", { value: options });
   }
 
-  private _optionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.isSelected()) {
-      ev.detail.item.option["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _optionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const options = [...this.options];

src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts

@@ -1,11 +1,12 @@
-import { customElement, property, state } from "lit/decorators";
 import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
-import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { customElement, property, state } from "lit/decorators";
-import type { HomeAssistant } from "../../../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
-import "../trigger/ha-automation-trigger-row";
+import "../../../../components/ha-yaml-editor";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
 import type { PasteReplaceDialogParams } from "./show-dialog-paste-replace";
 
 @customElement("ha-dialog-paste-replace")

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

@@ -1,16 +1,18 @@
 import {
+  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -20,6 +22,7 @@ import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
 import type { RepeatAction } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
+import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
@@ -41,6 +44,8 @@ export default class HaAutomationSidebarAction extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -100,18 +105,24 @@ export default class HaAutomationSidebarAction extends LitElement {
       <span slot="subtitle">${subtitle}</span>
 
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}>
-        ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
         <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
         .disabled=${!!disabled}
       >
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.rename"
           )}
-        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -123,36 +134,85 @@ export default class HaAutomationSidebarAction extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
+        <ha-svg-icon
+          slot="start"
+          .path=${mdiPlusCircleMultipleOutline}
+        ></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.duplicate"
           )}
-        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.copy}
         .disabled=${this.disabled}
       >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
         <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.copy"
+          )}
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span>C</span>
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
         <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.cut"
+          )}
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span>X</span>
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -160,13 +220,16 @@ export default class HaAutomationSidebarAction extends LitElement {
         tabindex="-1"
       ></ha-md-divider>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
-        ${this.hass.localize(
-          `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-        )}
         <ha-svg-icon
           slot="start"
           .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -174,25 +237,51 @@ export default class HaAutomationSidebarAction extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
           )}
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.del"
+                  )}</span
+                >
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
-        : html`<ha-automation-action-editor
+        : keyed(
+            this.sidebarKey,
+            html`<ha-automation-action-editor
               class="sidebar-editor"
               .hass=${this.hass}
               .action=${actionConfig}
               .yamlMode=${this.yamlMode}
               .uiSupported=${this.config.uiSupported}
               @value-changed=${this._valueChangedSidebar}
+              @yaml-changed=${this._yamlChangedSidebar}
               sidebar
               narrow
               .disabled=${this.disabled}
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
-          ></ha-automation-action-editor>`}
+            ></ha-automation-action-editor>`
+          )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -220,6 +309,12 @@ export default class HaAutomationSidebarAction extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts

@@ -1,4 +1,6 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiClose, mdiDotsVertical } from "@mdi/js";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
   customElement,
@@ -43,7 +45,22 @@ export default class HaAutomationSidebarCard extends LitElement {
 
   @state() private _contentScrolled = false;
 
-  @query(".card-content") private _contentElement?: HTMLDivElement;
+  @state() private _contentScrollable = false;
+
+  @query(".card-content") private _contentElement!: HTMLDivElement;
+
+  private _contentSize = new ResizeController(this, {
+    target: null,
+    callback: (entries) => {
+      if (entries[0]?.target) {
+        this._canScrollDown(entries[0].target);
+      }
+    },
+  });
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this._contentSize.observe(this._contentElement);
+  }
 
   protected render() {
     return html`
@@ -94,14 +111,29 @@ export default class HaAutomationSidebarCard extends LitElement {
         <div class="card-content" @scroll=${this._onScroll}>
           <slot></slot>
         </div>
+        ${this.narrow
+          ? html`
+              <div
+                class="fade ${this._contentScrollable ? "scrollable" : ""}"
+              ></div>
+            `
+          : nothing}
       </ha-card>
     `;
   }
 
   @eventOptions({ passive: true })
-  private _onScroll() {
+  private _onScroll(ev) {
-    const top = this._contentElement?.scrollTop ?? 0;
+    const top = ev.target.scrollTop ?? 0;
     this._contentScrolled = top > 0;
+
+    this._canScrollDown(ev.target);
+  }
+
+  private _canScrollDown(element: HTMLElement) {
+    this._contentScrollable =
+      (element.scrollHeight ?? 0) - (element.clientHeight ?? 0) >
+      (element.scrollTop ?? 0);
   }
 
   private _closeSidebar() {
@@ -125,6 +157,7 @@ export default class HaAutomationSidebarCard extends LitElement {
     @media all and (max-width: 870px) {
       ha-card.mobile {
         border: none;
+        box-shadow: none;
       }
       ha-card.mobile {
         border-bottom-right-radius: var(--ha-border-radius-square);
@@ -138,7 +171,6 @@ export default class HaAutomationSidebarCard extends LitElement {
       transition: box-shadow 180ms ease-in-out;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      z-index: 6;
       position: relative;
       background-color: var(
         --ha-dialog-surface-background,
@@ -147,12 +179,28 @@ export default class HaAutomationSidebarCard extends LitElement {
     }
 
     ha-dialog-header.scrolled {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+      box-shadow: var(--bar-box-shadow);
+    }
+
+    .fade {
+      position: fixed;
+      bottom: -12px;
+      left: 0;
+      right: 0;
+      height: 12px;
+      pointer-events: none;
+      transition: box-shadow 180ms ease-in-out;
+    }
+
+    .fade.scrollable {
+      box-shadow: var(--bar-box-shadow);
+      transform: rotate(180deg);
     }
 
     .card-content {
       max-height: calc(100% - 80px);
       overflow: auto;
+      margin-top: 0;
     }
 
     @media (min-width: 450px) and (min-height: 500px) {

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

@@ -1,21 +1,30 @@
 import {
+  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import type { ConditionSidebarConfig } from "../../../../data/automation";
+import {
+  testCondition,
+  type ConditionSidebarConfig,
+} from "../../../../data/automation";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
+import { validateConfig } from "../../../../data/config";
 import type { HomeAssistant } from "../../../../types";
+import { isMac } from "../../../../util/is_mac";
+import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
 import "../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -35,8 +44,14 @@ export default class HaAutomationSidebarCondition extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
+  @state() private _testing = false;
+
+  @state() private _testingResult?: boolean;
+
   @query(".sidebar-editor")
   public editor?: HaAutomationConditionEditor;
 
@@ -50,6 +65,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         }
       }
     }
+    // Reset testing state when condition changes
+    if (changedProperties.has("sidebarKey")) {
+      this._testing = false;
+    }
   }
 
   protected render() {
@@ -85,21 +104,27 @@ export default class HaAutomationSidebarCondition extends LitElement {
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.test}>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this._testCondition}>
+        <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.test"
           )}
-        <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
         .disabled=${!!disabled}
       >
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.rename"
           )}
-        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
 
       <ha-md-divider
@@ -113,10 +138,16 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
+        <ha-svg-icon
+          slot="start"
+          .path=${mdiPlusCircleMultipleOutline}
+        ></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.duplicate"
           )}
-        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -124,8 +155,28 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.copy}
         .disabled=${this.disabled}
       >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
         <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.copy"
+          )}
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span>C</span>
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -133,18 +184,41 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
         <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.cut"
+          )}
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span>X</span>
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -152,13 +226,16 @@ export default class HaAutomationSidebarCondition extends LitElement {
         tabindex="-1"
       ></ha-md-divider>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
-        ${this.hass.localize(
-          `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-        )}
         <ha-svg-icon
           slot="start"
           .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -166,27 +243,128 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
           )}
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.del"
+                  )}</span
+                >
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
-        : html`<ha-automation-condition-editor
+        : keyed(
+            this.sidebarKey,
+            html`<ha-automation-condition-editor
               class="sidebar-editor"
               .hass=${this.hass}
               .condition=${this.config.config}
               .yamlMode=${this.yamlMode}
               .uiSupported=${this.config.uiSupported}
               @value-changed=${this._valueChangedSidebar}
+              @yaml-changed=${this._yamlChangedSidebar}
               .disabled=${this.disabled}
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
               sidebar
-          ></ha-automation-condition-editor> `}
+            ></ha-automation-condition-editor>`
+          )}
+      <div class="testing-wrapper">
+        <div
+          class="testing ${classMap({
+            active: this._testing,
+            pass: this._testingResult === true,
+            error: this._testingResult === false,
+            narrow: this.narrow,
+          })}"
+        >
+          ${this._testingResult === undefined
+            ? nothing
+            : this.hass.localize(
+                `ui.panel.config.automation.editor.conditions.testing_${
+                  this._testingResult ? "pass" : "error"
+                }`
+              )}
+        </div>
+      </div>
     </ha-automation-sidebar-card>`;
   }
 
+  private _testCondition = async () => {
+    if (this._testing) {
+      return;
+    }
+    this._testingResult = undefined;
+    this._testing = true;
+    const condition = this.config.config;
+
+    try {
+      const validateResult = await validateConfig(this.hass, {
+        conditions: condition,
+      });
+
+      // Abort if condition changed.
+      if (this.config.config !== condition) {
+        this._testing = false;
+        return;
+      }
+
+      if (!validateResult.conditions.valid) {
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.automation.editor.conditions.invalid_condition"
+          ),
+          text: validateResult.conditions.error,
+        });
+        this._testing = false;
+        return;
+      }
+
+      let result: { result: boolean };
+      try {
+        result = await testCondition(this.hass, condition);
+      } catch (err: any) {
+        if (this.config.config !== condition) {
+          this._testing = false;
+          return;
+        }
+
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.config.automation.editor.conditions.test_failed"
+          ),
+          text: err.message,
+        });
+        this._testing = false;
+        return;
+      }
+
+      this._testingResult = result.result;
+    } finally {
+      setTimeout(() => {
+        this._testing = false;
+      }, 2500);
+    }
+  };
+
   private _handleUiModeNotAvailable(ev: CustomEvent) {
     this._warnings = handleStructError(this.hass, ev.detail).warnings;
     if (!this.yamlMode) {
@@ -209,11 +387,67 @@ export default class HaAutomationSidebarCondition extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  static styles = sidebarEditorStyles;
+  static styles = [
+    sidebarEditorStyles,
+    css`
+      ha-automation-sidebar-card {
+        position: relative;
+      }
+      .testing-wrapper {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        margin: -1px;
+        overflow: hidden;
+        border-top-right-radius: var(
+          --ha-card-border-radius,
+          var(--ha-border-radius-lg)
+        );
+        border-top-left-radius: var(
+          --ha-card-border-radius,
+          var(--ha-border-radius-lg)
+        );
+        pointer-events: none;
+        height: 100px;
+      }
+      .testing {
+        --testing-color: var(--divider-color, #e0e0e0);
+        text-transform: uppercase;
+        font-size: var(--ha-font-size-m);
+        font-weight: var(--ha-font-weight-bold);
+        background-color: var(--testing-color);
+        color: var(--text-primary-color);
+        max-height: 0px;
+        transition:
+          max-height 0.3s ease-in-out,
+          padding-top 0.3s ease-in-out;
+        text-align: center;
+      }
+      .testing.active.narrow {
+        padding-top: 16px;
+      }
+      .testing.active {
+        max-height: 100%;
+      }
+      .testing.error {
+        --testing-color: var(--accent-color);
+      }
+      .testing.pass {
+        --testing-color: var(--success-color);
+      }
+    `,
+  ];
 }
 
 declare global {

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

@@ -1,8 +1,14 @@
-import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js";
+import {
-import { html, LitElement } from "lit";
+  mdiAppleKeyboardCommand,
+  mdiDelete,
+  mdiPlusCircleMultipleOutline,
+  mdiRenameBox,
+} from "@mdi/js";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
+import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
@@ -52,10 +58,13 @@ export default class HaAutomationSidebarOption extends LitElement {
               .clickAction=${this.config.rename}
               .disabled=${!!disabled}
             >
+              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+              <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.triggers.rename"
                 )}
-              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+              </div>
             </ha-md-menu-item>
 
             <ha-md-menu-item
@@ -63,13 +72,16 @@ export default class HaAutomationSidebarOption extends LitElement {
               @click=${this.config.duplicate}
               .disabled=${this.disabled}
             >
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiPlusCircleMultipleOutline}
+              ></ha-svg-icon>
+              <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.duplicate"
                 )}
-              <ha-svg-icon
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-                slot="start"
+              </div>
-                .path=${mdiContentDuplicate}
-              ></ha-svg-icon>
             </ha-md-menu-item>
             <ha-md-divider
               slot="menu-items"
@@ -82,10 +94,32 @@ export default class HaAutomationSidebarOption extends LitElement {
               .disabled=${this.disabled}
               class="warning"
             >
+              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+              <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.type.choose.remove_option"
                 )}
-              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+                ${!this.narrow
+                  ? html`<span class="shortcut">
+                      <span
+                        >${isMac
+                          ? html`<ha-svg-icon
+                              slot="start"
+                              .path=${mdiAppleKeyboardCommand}
+                            ></ha-svg-icon>`
+                          : this.hass.localize(
+                              "ui.panel.config.automation.editor.ctrl"
+                            )}</span
+                      >
+                      <span>+</span>
+                      <span
+                        >${this.hass.localize(
+                          "ui.panel.config.automation.editor.del"
+                        )}</span
+                      >
+                    </span>`
+                  : nothing}
+              </div>
             </ha-md-menu-item>
           `}
 

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts

@@ -1,10 +1,12 @@
-import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
+import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-selector-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -24,6 +26,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -65,10 +69,13 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -76,19 +83,45 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
           )}
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.del"
+                  )}</span
+                >
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
-      <ha-script-field-selector-editor
+      ${keyed(
+        this.sidebarKey,
+        html`<ha-script-field-selector-editor
           class="sidebar-editor"
           .hass=${this.hass}
           .field=${this.config.config.field}
           .disabled=${this.disabled}
           @value-changed=${this._valueChangedSidebar}
+          @yaml-changed=${this._yamlChangedSidebar}
           .yamlMode=${this.yamlMode}
-      ></ha-script-field-selector-editor>
+        ></ha-script-field-selector-editor>`
+      )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -116,6 +149,12 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts

@@ -1,9 +1,11 @@
-import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
+import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -23,6 +25,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -58,10 +62,13 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -69,12 +76,36 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
           )}
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+          ${!this.narrow
+            ? html`<span class="shortcut">
+                <span
+                  >${isMac
+                    ? html`<ha-svg-icon
+                        slot="start"
+                        .path=${mdiAppleKeyboardCommand}
+                      ></ha-svg-icon>`
+                    : this.hass.localize(
+                        "ui.panel.config.automation.editor.ctrl"
+                      )}</span
+                >
+                <span>+</span>
+                <span
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.del"
+                  )}</span
+                >
+              </span>`
+            : nothing}
+        </div>
       </ha-md-menu-item>
-      <ha-script-field-editor
+      ${keyed(
+        this.sidebarKey,
+        html`<ha-script-field-editor
           class="sidebar-editor"
           .hass=${this.hass}
           .field=${this.config.config.field}
@@ -83,7 +114,9 @@ export default class HaAutomationSidebarScriptField extends LitElement {
           .disabled=${this.disabled}
           .yamlMode=${this.yamlMode}
           @value-changed=${this._valueChangedSidebar}
-      ></ha-script-field-editor>
+          @yaml-changed=${this._yamlChangedSidebar}
+        ></ha-script-field-editor>`
+      )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -110,6 +143,12 @@ export default class HaAutomationSidebarScriptField extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

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

@@ -1,21 +1,24 @@
 import {
+  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { TriggerSidebarConfig } from "../../../../data/automation";
 import { isTriggerList } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
+import { isMac } from "../../../../util/is_mac";
 import { sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
@@ -35,6 +38,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _requestShowId = false;
 
   @state() private _warnings?: string[];
@@ -86,10 +91,13 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.rename}
           .disabled=${disabled || type === "list"}
         >
+          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+          <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.rename"
             )}
-          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+          </div>
         </ha-md-menu-item>
         ${!this.yamlMode &&
         !("id" in this.config.config) &&
@@ -99,10 +107,13 @@ export default class HaAutomationSidebarTrigger extends LitElement {
               .clickAction=${this._showTriggerId}
               .disabled=${disabled || type === "list"}
             >
+              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
+              <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.triggers.edit_id"
                 )}
-              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+              </div>
             </ha-md-menu-item>`
           : nothing}
 
@@ -120,7 +131,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.duplicate"
           )}
-          <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
+          <ha-svg-icon
+            slot="start"
+            .path=${mdiPlusCircleMultipleOutline}
+          ></ha-svg-icon>
         </ha-md-menu-item>
 
         <ha-md-menu-item
@@ -128,10 +142,28 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.copy}
           .disabled=${this.disabled}
         >
+          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+          <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.copy"
             )}
-          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+            ${!this.narrow
+              ? html`<span class="shortcut">
+                  <span
+                    >${isMac
+                      ? html`<ha-svg-icon
+                          slot="start"
+                          .path=${mdiAppleKeyboardCommand}
+                        ></ha-svg-icon>`
+                      : this.hass.localize(
+                          "ui.panel.config.automation.editor.ctrl"
+                        )}</span
+                  >
+                  <span>+</span>
+                  <span>C</span>
+                </span>`
+              : nothing}
+          </div>
         </ha-md-menu-item>
 
         <ha-md-menu-item
@@ -139,20 +171,41 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.cut}
           .disabled=${this.disabled}
         >
+          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+          <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.cut"
             )}
-          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+            ${!this.narrow
+              ? html`<span class="shortcut">
+                  <span
+                    >${isMac
+                      ? html`<ha-svg-icon
+                          slot="start"
+                          .path=${mdiAppleKeyboardCommand}
+                        ></ha-svg-icon>`
+                      : this.hass.localize(
+                          "ui.panel.config.automation.editor.ctrl"
+                        )}</span
+                  >
+                  <span>+</span>
+                  <span>X</span>
+                </span>`
+              : nothing}
+          </div>
         </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
           .clickAction=${this._toggleYamlMode}
           .disabled=${!this.config.uiSupported || !!this._warnings}
         >
+          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <div class="overflow-label">
             ${this.hass.localize(
               `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
             )}
-          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+          </div>
         </ha-md-menu-item>
         <ha-md-divider
           slot="menu-items"
@@ -164,13 +217,16 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.disable}
           .disabled=${type === "list"}
         >
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-          )}
           <ha-svg-icon
             slot="start"
             .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
           ></ha-svg-icon>
+          <div class="overflow-label">
+            ${this.hass.localize(
+              `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+            )}
+            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+          </div>
         </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
@@ -178,23 +234,49 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .disabled=${this.disabled}
           class="warning"
         >
+          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+          <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.actions.delete"
             )}
-          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+            ${!this.narrow
+              ? html`<span class="shortcut">
+                  <span
+                    >${isMac
+                      ? html`<ha-svg-icon
+                          slot="start"
+                          .path=${mdiAppleKeyboardCommand}
+                        ></ha-svg-icon>`
+                      : this.hass.localize(
+                          "ui.panel.config.automation.editor.ctrl"
+                        )}</span
+                  >
+                  <span>+</span>
+                  <span
+                    >${this.hass.localize(
+                      "ui.panel.config.automation.editor.del"
+                    )}</span
+                  >
+                </span>`
+              : nothing}
+          </div>
         </ha-md-menu-item>
-        <ha-automation-trigger-editor
+        ${keyed(
+          this.sidebarKey,
+          html`<ha-automation-trigger-editor
             class="sidebar-editor"
             .hass=${this.hass}
             .trigger=${this.config.config}
             @value-changed=${this._valueChangedSidebar}
+            @yaml-changed=${this._yamlChangedSidebar}
             .uiSupported=${this.config.uiSupported}
             .showId=${this._requestShowId}
             .yamlMode=${this.yamlMode}
             .disabled=${this.disabled}
             @ui-mode-not-available=${this._handleUiModeNotAvailable}
             sidebar
-        ></ha-automation-trigger-editor>
+          ></ha-automation-trigger-editor>`
+        )}
       </ha-automation-sidebar-card>
     `;
   }
@@ -221,6 +303,12 @@ export default class HaAutomationSidebarTrigger extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/styles.ts

@@ -37,12 +37,6 @@ export const rowStyles = css`
   ha-tooltip {
     cursor: default;
   }
-  :host([highlight]) ha-card {
-    --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-    --shadow-focus: 0 0 0 1px var(--state-inactive-color);
-    border-color: var(--state-inactive-color);
-    box-shadow: var(--shadow-default), var(--shadow-focus);
-  }
   .hidden {
     display: none;
   }
@@ -50,7 +44,6 @@ export const rowStyles = css`
 
 export const editorStyles = css`
   .disabled {
-    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -142,6 +135,11 @@ export const manualEditorStyles = css`
   .content {
     padding-top: 24px;
     padding-bottom: 72px;
+    transition: padding-bottom 180ms ease-in-out;
+  }
+
+  .content.has-bottom-sheet {
+    padding-bottom: calc(90vh - 72px);
   }
 
   ha-automation-sidebar {
@@ -190,8 +188,7 @@ export const automationRowsStyles = css`
     scroll-margin-top: 48px;
   }
   .handle {
-    margin: 4px;
+    padding: 4px;
-    padding: 8px;
     cursor: move; /* fallback if grab cursor is unsupported */
     cursor: grab;
     border-radius: var(--ha-border-radius-pill);
@@ -219,9 +216,42 @@ export const automationRowsStyles = css`
 export const sidebarEditorStyles = css`
   .sidebar-editor {
     display: block;
-    padding-top: 16px;
+    padding-top: 8px;
   }
   .description {
     padding-top: 16px;
   }
+  .overflow-label {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    white-space: nowrap;
+  }
+  .overflow-label .shortcut {
+    --mdc-icon-size: 12px;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+  }
+  .overflow-label .shortcut span {
+    font-size: var(--ha-font-size-s);
+    font-family: var(--ha-font-family-code);
+    color: var(--ha-color-text-secondary);
+  }
+  .shortcut-placeholder {
+    display: inline-block;
+    width: 60px;
+  }
+  .shortcut-placeholder.mac {
+    width: 46px;
+  }
+  @media all and (max-width: 870px) {
+    .shortcut-placeholder {
+      display: none;
+    }
+  }
+  ha-md-menu-item {
+    --mdc-icon-size: 24px;
+  }
 `;

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

@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
       value: migrateAutomationTrigger(ev.detail.value),
     });
   }
@@ -141,7 +141,6 @@ export default class HaAutomationTriggerEditor extends LitElement {
       haStyle,
       css`
         .disabled {
-          opacity: 0.5;
           pointer-events: none;
         }
 

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

@@ -4,12 +4,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -52,6 +52,7 @@ import {
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
+import { showToast } from "../../../../util/toast";
 import "../ha-automation-editor-warning";
 import { rowStyles } from "../styles";
 import "./ha-automation-trigger-editor";
@@ -113,6 +114,8 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -151,6 +154,10 @@ export default class HaAutomationTriggerRow extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
+  get selected() {
+    return this._selected;
+  }
+
   private _triggerUnsub?: Promise<UnsubscribeFunc>;
 
   private _renderRow() {
@@ -219,7 +226,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiContentDuplicate}
+                .path=${mdiPlusCircleMultipleOutline}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -347,9 +354,10 @@ export default class HaAutomationTriggerRow extends LitElement {
           ? html`<ha-automation-row
               .disabled=${"enabled" in this.trigger &&
               this.trigger.enabled === false}
-              @click=${this._toggleSidebar}
               .selected=${this._selected}
+              .highlight=${this.highlight}
               .sortSelected=${this.sortSelected}
+              @click=${this._toggleSidebar}
               >${this._selected
                 ? "selected"
                 : nothing}${this._renderRow()}</ha-automation-row
@@ -470,8 +478,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
+      fireEvent(this, "request-close-sidebar");
-      fireEvent(this, "close-sidebar");
       return;
     }
     this.openSidebar();
@@ -494,7 +501,7 @@ export default class HaAutomationTriggerRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       disable: this._onDisable,
       delete: this._onDelete,
@@ -508,12 +515,12 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._selected = true;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180);
     }
   }
 
@@ -631,6 +638,12 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   private _copyTrigger = () => {
     this._setClipboard();
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.copied_to_clipboard"
+      ),
+      duration: 2000,
+    });
   };
 
   private _cutTrigger = () => {
@@ -639,6 +652,12 @@ export default class HaAutomationTriggerRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.cut_to_clipboard"
+      ),
+      duration: 2000,
+    });
   };
 
   private _moveUp = () => {
@@ -676,10 +695,6 @@ export default class HaAutomationTriggerRow extends LitElement {
       customElements.get(`ha-automation-trigger-${type}`) !== undefined
   );
 
-  public isSelected() {
-    return this._selected;
-  }
-
   public focus() {
     this._automationRowElement?.focus();
   }

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

@@ -6,12 +6,10 @@ import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
-import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
   AutomationClipboard,
@@ -45,8 +43,6 @@ export default class HaAutomationTrigger extends LitElement {
 
   @property({ type: Boolean }) public root = false;
 
-  @state() private _showReorder = false;
-
   @state() private _rowSortSelected?: number;
 
   @state()
@@ -64,33 +60,17 @@ export default class HaAutomationTrigger extends LitElement {
 
   private _triggerKeys = new WeakMap<Trigger, string>();
 
-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
   protected render() {
     return html`
       <ha-sortable
         handle-selector=".handle"
         draggable-selector="ha-automation-trigger-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
         group="triggers"
         invert-swap
         @item-moved=${this._triggerMoved}
         @item-added=${this._triggerAdded}
         @item-removed=${this._triggerRemoved}
-        @item-cloned=${this._triggerCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -110,12 +90,12 @@ export default class HaAutomationTrigger extends LitElement {
                 .hass=${this.hass}
                 .disabled=${this.disabled}
                 .narrow=${this.narrow}
-                ?highlight=${this.highlightedTriggers?.includes(trg)}
+                .highlight=${this.highlightedTriggers?.includes(trg)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}
               >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                   ? html`
                       <div
                         tabindex="0"
@@ -278,11 +258,8 @@ export default class HaAutomationTrigger extends LitElement {
   private async _triggerAdded(ev: CustomEvent): Promise<void> {
     ev.stopPropagation();
     const { index, data } = ev.detail;
-    let selected = false;
+    const item = ev.detail.item as HaAutomationTriggerRow;
-    if (data?.["ha-automation-row-selected"]) {
+    const selected = item.selected;
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
 
     let triggers = [
       ...this.triggers.slice(0, index),
@@ -321,12 +298,6 @@ export default class HaAutomationTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: triggers });
   }
 
-  private _triggerCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.isSelected()) {
-      ev.detail.item.trigger["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _triggerChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const triggers = [...this.triggers];

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -42,6 +42,8 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
         .disabled=${this.disabled || this._tags.length === 0}
         .value=${this.trigger.tag_id}
         @selected=${this._tagChanged}
+        fixedMenuPosition
+        naturalMenuWidth
       >
         ${this._tags.map(
           (tag) => html`

src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts

@@ -125,7 +125,7 @@ export class HaWebhookTrigger extends LitElement {
             .path=${mdiContentCopy}
           ></ha-icon-button>
         </ha-textfield>
-        <ha-button-menu multi @closed=${stopPropagation}>
+        <ha-button-menu multi @closed=${stopPropagation} fixed>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass!.localize(

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -132,7 +132,7 @@ class DialogDeviceRegistryDetail extends LitElement {
           </div>
         </div>
         <ha-button
-          slot="primaryAction"
+          slot="secondaryAction"
           @click=${this.closeDialog}
           .disabled=${this._submitting}
           appearance="plain"

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

@@ -773,6 +773,11 @@ export class HaConfigDevicePage extends LitElement {
                         appearance="plain"
                         target=${ifDefined(firstDeviceAction!.target)}
                         class=${ifDefined(firstDeviceAction!.classes)}
+                        .variant=${firstDeviceAction!.classes?.includes(
+                          "warning"
+                        )
+                          ? "danger"
+                          : "brand"}
                         .action=${firstDeviceAction!.action}
                         @click=${this._deviceActionClicked}
                       >

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -226,6 +226,7 @@ export class EnergyBatterySettings extends LitElement {
         .label {
           overflow: hidden;
           text-overflow: ellipsis;
+          white-space: nowrap;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -34,16 +34,6 @@ const UPDATE_THROTTLE_TIME = 10000;
 const CORE_SOURCE_ID = "ha";
 const CORE_SOURCE_LABEL = "Home Assistant";
 
-const RSSI_COLOR_THRESHOLDS: [number, string][] = [
-  [-70, "--green-color"], // Excellent: > -70 dBm
-  [-75, "--lime-color"], // Good: -70 to -75 dBm
-  [-80, "--yellow-color"], // Okay: -75 to -80 dBm
-  [-85, "--amber-color"], // Marginal: -80 to -85 dBm
-  [-90, "--orange-color"], // Weak: -85 to -90 dBm
-  [-95, "--deep-orange-color"], // Poor: -90 to -95 dBm
-  [-Infinity, "--red-color"], // Very poor: < -95 dBm
-];
-
 @customElement("bluetooth-network-visualization")
 export class BluetoothNetworkVisualization extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -135,16 +125,6 @@ export class BluetoothNetworkVisualization extends LitElement {
     `;
   }
 
-  private _getRssiColorVar = memoizeOne((rssi: number): string => {
-    for (const [threshold, colorVar] of RSSI_COLOR_THRESHOLDS) {
-      if (rssi > threshold) {
-        return colorVar;
-      }
-    }
-    // Fallback (should never reach here)
-    return "--red-color";
-  });
-
   private _formatNetworkData = memoizeOne(
     (
       data: BluetoothDeviceData[],
@@ -226,7 +206,7 @@ export class BluetoothNetworkVisualization extends LitElement {
             symbol: "none",
             lineStyle: {
               width: this._getLineWidth(node.rssi),
-              color: style.getPropertyValue(this._getRssiColorVar(node.rssi)),
+              color: style.getPropertyValue("--primary-color"),
             },
           });
           return;
@@ -247,7 +227,7 @@ export class BluetoothNetworkVisualization extends LitElement {
           lineStyle: {
             width: this._getLineWidth(node.rssi),
             color: device
-              ? style.getPropertyValue(this._getRssiColorVar(node.rssi))
+              ? style.getPropertyValue("--primary-color")
               : style.getPropertyValue("--disabled-color"),
           },
         });

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -199,10 +199,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
           "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
         ),
         sortable: true,
-        hidden: narrow,
         type: "icon",
-        minWidth: "120px",
+        hidden: narrow,
-        maxWidth: "120px",
         template: (dashboard) =>
           dashboard.require_admin
             ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
@@ -212,10 +210,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
         title: localize(
           "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
         ),
-        hidden: narrow,
         type: "icon",
-        minWidth: "120px",
+        hidden: narrow,
-        maxWidth: "120px",
         template: (dashboard) =>
           dashboard.show_in_sidebar
             ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`

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

@@ -1,7 +1,6 @@
 import { consume } from "@lit/context";
 import {
   mdiCog,
-  mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
   mdiDelete,
@@ -11,12 +10,11 @@ import {
   mdiInformationOutline,
   mdiPlay,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiRobotConfused,
   mdiTag,
   mdiTransitConnection,
-  mdiUnfoldLessHorizontal,
-  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -308,7 +306,7 @@ export class HaScriptEditor extends SubscribeMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiContentDuplicate}
+              .path=${mdiPlusCircleMultipleOutline}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -342,30 +340,6 @@ export class HaScriptEditor extends SubscribeMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
-          ${!useBlueprint
-            ? html`
-                <ha-list-item graphic="icon" @click=${this._collapseAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldLessHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.collapse_all"
-                  )}
-                </ha-list-item>
-
-                <ha-list-item graphic="icon" @click=${this._expandAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldMoreHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.expand_all"
-                  )}
-                </ha-list-item>
-              `
-            : nothing}
-
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -1047,6 +1021,10 @@ export class HaScriptEditor extends SubscribeMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveScript(),
+      c: () => this._copySelectedRow(),
+      x: () => this._cutSelectedRow(),
+      Delete: () => this._deleteSelectedRow(),
+      Backspace: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1058,14 +1036,28 @@ export class HaScriptEditor extends SubscribeMixin(
     return this._confirmUnsavedChanged();
   }
 
+  // @ts-ignore
   private _collapseAll() {
     this._manualEditor?.collapseAll();
   }
 
+  // @ts-ignore
   private _expandAll() {
     this._manualEditor?.expandAll();
   }
 
+  private _copySelectedRow() {
+    this._manualEditor?.copySelectedRow();
+  }
+
+  private _cutSelectedRow() {
+    this._manualEditor?.cutSelectedRow();
+  }
+
+  private _deleteSelectedRow() {
+    this._manualEditor?.deleteSelectedRow();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -152,7 +152,12 @@ export default class HaScriptFieldEditor extends LitElement {
     ev.stopPropagation();
     const value = { ...ev.detail.value };
 
-    if (typeof value !== "object" || Object.keys(value).length !== 1) {
+    if (
+      typeof value !== "object" ||
+      Object.keys(value).length !== 1 ||
+      !value[Object.keys(value)[0]] ||
+      !value[Object.keys(value)[0]].selector
+    ) {
       this._yamlError = "yaml_error";
       return;
     }
@@ -165,7 +170,7 @@ export default class HaScriptFieldEditor extends LitElement {
 
     const newValue = { ...value[key], key };
 
-    fireEvent(this, "value-changed", { value: newValue });
+    fireEvent(this, "yaml-changed", { value: newValue });
   }
 
   private _computeLabelCallback = (

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

@@ -32,6 +32,8 @@ export default class HaScriptFieldRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ type: Boolean }) public highlight?: boolean;
+
   @state() private _yamlMode = false;
 
   @state() private _selected = false;
@@ -61,6 +63,8 @@ export default class HaScriptFieldRow extends LitElement {
           left-chevron
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
+          .highlight=${this.highlight}
+          @delete-row=${this._onDelete}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -83,6 +87,7 @@ export default class HaScriptFieldRow extends LitElement {
             .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
               Object.keys(this.field.selector)[0]
             )}
+            .highlight=${this.highlight}
           >
             <h3 slot="header">
               ${this.hass.localize(
@@ -157,8 +162,7 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
+      fireEvent(this, "request-close-sidebar");
-      fireEvent(this, "close-sidebar");
       return;
     }
 
@@ -171,8 +175,7 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selectorRowSelected) {
-      this._selectorRowSelected = false;
+      fireEvent(this, "request-close-sidebar");
-      fireEvent(this, "close-sidebar");
       return;
     }
 
@@ -218,7 +221,7 @@ export default class HaScriptFieldRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       delete: this._onDelete,
       config: {
@@ -231,12 +234,12 @@ export default class HaScriptFieldRow extends LitElement {
     } satisfies ScriptFieldSidebarConfig);
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180); // duration of transition of added padding for bottom sheet
     }
   }
 
@@ -331,13 +334,6 @@ export default class HaScriptFieldRow extends LitElement {
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }
-        :host([highlight]) ha-card {
-          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-          --shadow-focus: 0 0 0 1px var(--state-inactive-color);
-          border-color: var(--state-inactive-color);
-          box-shadow: var(--shadow-default), var(--shadow-focus);
-        }
-
         .selector-row {
           padding: 12px 0 16px 16px;
         }

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

@@ -132,7 +132,7 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
       return;
     }
 
-    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "yaml-changed", { value });
   }
 
   private _computeLabelCallback = (

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

@@ -43,7 +43,7 @@ export default class HaScriptFields extends LitElement {
                   .disabled=${this.disabled}
                   @value-changed=${this._fieldChanged}
                   .hass=${this.hass}
-                  ?highlight=${this.highlightedFields?.[key] !== undefined}
+                  .highlight=${this.highlightedFields?.[key] !== undefined}
                   .narrow=${this.narrow}
                 >
                 </ha-script-field-row>
@@ -76,10 +76,12 @@ export default class HaScriptFields extends LitElement {
       row.focus();
 
       if (this.narrow) {
+        window.setTimeout(() => {
           row.scrollIntoView({
             block: "start",
             behavior: "smooth",
           });
+        }, 180); // duration of transition of added padding for bottom sheet
       }
     });
   }

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

@@ -2,7 +2,13 @@ import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import { load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAll,
+  state,
+} from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
   any,
@@ -24,7 +30,10 @@ import {
 } from "../../../common/url/search-params";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
-import type { SidebarConfig } from "../../../data/automation";
+import type {
+  ActionSidebarConfig,
+  SidebarConfig,
+} from "../../../data/automation";
 import type { Action, Fields, ScriptConfig } from "../../../data/script";
 import {
   getActionType,
@@ -73,11 +82,18 @@ export class HaManualScriptEditor extends LitElement {
 
   @state() private _sidebarConfig?: SidebarConfig;
 
+  @state() private _sidebarKey?: string;
+
   @query("ha-script-fields")
   private _scriptFields?: HaScriptFields;
 
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
+  @queryAll("ha-automation-action, ha-script-fields")
+  private _collapsableElements?: NodeListOf<
+    HaAutomationAction | HaScriptFields
+  >;
+
   private _previousConfig?: ScriptConfig;
 
   private _openFields = false;
@@ -154,6 +170,7 @@ export class HaManualScriptEditor extends LitElement {
               .disabled=${this.disabled}
               .narrow=${this.narrow}
               @open-sidebar=${this._openSidebar}
+              @request-close-sidebar=${this._triggerCloseSidebar}
               @close-sidebar=${this._handleCloseSidebar}
             ></ha-script-fields>`
         : nothing
@@ -184,6 +201,7 @@ export class HaManualScriptEditor extends LitElement {
       .highlightedActions=${this._pastedConfig?.sequence || []}
       @value-changed=${this._sequenceChanged}
       @open-sidebar=${this._openSidebar}
+      @request-close-sidebar=${this._triggerCloseSidebar}
       @close-sidebar=${this._handleCloseSidebar}
       .hass=${this.hass}
       .narrow=${this.narrow}
@@ -202,7 +220,11 @@ export class HaManualScriptEditor extends LitElement {
         })}
       >
         <div class="content-wrapper">
-          <div class="content">
+          <div
+            class="content ${this._sidebarConfig && this.narrow
+              ? "has-bottom-sheet"
+              : ""}"
+          >
             <slot name="alerts"></slot>
             ${this._renderContent()}
           </div>
@@ -223,6 +245,7 @@ export class HaManualScriptEditor extends LitElement {
         </div>
         <div class="sidebar-positioner">
           <ha-automation-sidebar
+            .sidebarKey=${this._sidebarKey}
             tabindex="-1"
             class=${classMap({ hidden: !this._sidebarConfig })}
             .narrow=${this.narrow}
@@ -354,7 +377,11 @@ export class HaManualScriptEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      if (this.dirty) {
+      if (
+        this.dirty ||
+        ensureArray(this.config.sequence)?.length ||
+        Object.keys(this.config.fields || {}).length
+      ) {
         const result = await new Promise<boolean>((resolve) => {
           showPasteReplaceDialog(this, {
             domain: "script",
@@ -463,6 +490,7 @@ export class HaManualScriptEditor extends LitElement {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
+    this._sidebarKey = JSON.stringify(this._sidebarConfig);
 
     await this._sidebarElement?.updateComplete;
     this._sidebarElement?.focus();
@@ -480,11 +508,13 @@ export class HaManualScriptEditor extends LitElement {
     };
   }
 
-  private _closeSidebar() {
+  private _triggerCloseSidebar() {
     if (this._sidebarConfig) {
-      const closeRow = this._sidebarConfig?.close;
+      if (this._sidebarElement) {
-      this._sidebarConfig = undefined;
+        this._sidebarElement.triggerCloseSidebar();
-      closeRow?.();
+        return;
+      }
+      this._sidebarConfig?.close();
     }
   }
 
@@ -493,28 +523,40 @@ export class HaManualScriptEditor extends LitElement {
   }
 
   private _saveScript() {
-    this._closeSidebar();
+    this._triggerCloseSidebar();
     fireEvent(this, "save-script");
   }
 
-  private _getCollapsableElements() {
-    return this.shadowRoot!.querySelectorAll<
-      HaAutomationAction | HaScriptFields
-    >("ha-automation-action, ha-script-fields");
-  }
-
   public expandAll() {
-    this._getCollapsableElements().forEach((element) => {
+    this._collapsableElements?.forEach((element) => {
       element.expandAll();
     });
   }
 
   public collapseAll() {
-    this._getCollapsableElements().forEach((element) => {
+    this._collapsableElements?.forEach((element) => {
       element.collapseAll();
     });
   }
 
+  public copySelectedRow() {
+    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
+      (this._sidebarConfig as ActionSidebarConfig).copy();
+    }
+  }
+
+  public cutSelectedRow() {
+    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
+      (this._sidebarConfig as ActionSidebarConfig).cut();
+    }
+  }
+
+  public deleteSelectedRow() {
+    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
+      (this._sidebarConfig as ActionSidebarConfig).delete();
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

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

@@ -568,10 +568,6 @@ class HaPanelDevState extends LitElement {
           margin: 0 8px 16px;
         }
 
-        ha-expansion-panel p {
-          padding: 0 8px;
-        }
-
         .inputs {
           width: 100%;
           max-width: 800px;
@@ -583,9 +579,8 @@ class HaPanelDevState extends LitElement {
 
         .button-row {
           display: flex;
-          margin: 8px 0;
+          margin-top: 8px;
           align-items: center;
-          gap: 8px;
         }
 
         :host([narrow]) .state-wrapper {

src/panels/lovelace/card-features/hui-button-card-feature.ts

@@ -4,6 +4,8 @@ import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
+import { hasScriptFields } from "../../../data/script";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
@@ -46,6 +48,14 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {
     const service =
       domain === "button" || domain === "input_button" ? "press" : "turn_on";
 
+    if (domain === "script") {
+      const entityId = this._stateObj.entity_id;
+      if (hasScriptFields(this.hass!, entityId)) {
+        showMoreInfoDialog(this, { entityId: entityId });
+        return;
+      }
+    }
+
     this.hass.callService(domain, service, {
       entity_id: this._stateObj.entity_id,
     });

src/panels/lovelace/card-features/hui-history-chart-card-feature.ts

@@ -1,301 +0,0 @@
-import { css, html, LitElement, nothing, svg } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import {
-  computeHistory,
-  subscribeHistoryStatesTimeWindow,
-} from "../../../data/history";
-import type {
-  HistoryResult,
-  LineChartUnit,
-  TimelineEntity,
-} from "../../../data/history";
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceCardFeature } from "../types";
-import type {
-  LovelaceCardFeatureContext,
-  HistoryChartCardFeatureConfig,
-} from "./types";
-import { getSensorNumericDeviceClasses } from "../../../data/sensor";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { getGraphColorByIndex } from "../../../common/color/colors";
-import { computeTimelineColor } from "../../../components/chart/timeline-color";
-import { downSampleLineData } from "../../../components/chart/down-sample";
-import { fireEvent } from "../../../common/dom/fire_event";
-
-export const supportsHistoryChartCardFeature = (
-  _hass: HomeAssistant,
-  context: LovelaceCardFeatureContext
-) =>
-  !!context.entity_id &&
-  ["sensor", "binary_sensor"].includes(computeDomain(context.entity_id));
-
-@customElement("hui-history-chart-card-feature")
-class HuiHistoryChartCardFeature
-  extends SubscribeMixin(LitElement)
-  implements LovelaceCardFeature
-{
-  @property({ attribute: false, hasChanged: () => false })
-  public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
-
-  @state() private _config?: HistoryChartCardFeatureConfig;
-
-  @state() private _stateHistory?: HistoryResult;
-
-  private _interval?: number;
-
-  static getStubConfig(): HistoryChartCardFeatureConfig {
-    return {
-      type: "history-chart",
-      hours_to_show: 24,
-    };
-  }
-
-  public setConfig(config: HistoryChartCardFeatureConfig): void {
-    if (!config) {
-      throw new Error("Invalid configuration");
-    }
-    this._config = config;
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    // redraw the graph every minute to update the time axis
-    clearInterval(this._interval);
-    this._interval = window.setInterval(() => this.requestUpdate(), 1000 * 60);
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this._interval);
-  }
-
-  protected hassSubscribe() {
-    return [this._subscribeHistory()];
-  }
-
-  protected render() {
-    if (
-      !this._config ||
-      !this.hass ||
-      !this.context ||
-      !this._stateHistory ||
-      !supportsHistoryChartCardFeature(this.hass, this.context)
-    ) {
-      return nothing;
-    }
-
-    const line = this._stateHistory.line[0];
-    const timeline = this._stateHistory.timeline[0];
-    const width = this.clientWidth;
-    const height = this.clientHeight;
-    if (line) {
-      const points = this._generateLinePoints(line);
-      const { paths, filledPaths } = this._getLinePaths(points);
-      const color = getGraphColorByIndex(0, this.style);
-
-      return html`
-        <div class="line" @click=${this._handleClick}>
-          ${svg`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-            ${paths.map(
-              (path) =>
-                svg`<path d="${path}" stroke="${color}" stroke-width="1" stroke-linecap="round" fill="none" />`
-            )}
-            ${filledPaths.map(
-              (path) =>
-                svg`<path d="${path}" stroke="none" stroke-linecap="round" fill="${color}" fill-opacity="0.2" />`
-            )}
-              </svg>`}
-        </div>
-      `;
-    }
-    if (timeline) {
-      const ranges = this._generateTimelineRanges(timeline);
-      return html`
-        <div class="timeline" @click=${this._handleClick}>
-          ${svg`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-            <g>
-                ${ranges.map((r) => svg`<rect x="${r.startX}" y="0" width="${r.endX - r.startX}" height="${height}" fill="${r.color}" />`)}
-            </g>
-            </svg>`}
-        </div>
-      `;
-    }
-    return nothing;
-  }
-
-  private _handleClick() {
-    // open more info dialog to show more detailed history
-    fireEvent(this, "hass-more-info", { entityId: this.context!.entity_id! });
-  }
-
-  private async _subscribeHistory(): Promise<() => Promise<void>> {
-    if (
-      !isComponentLoaded(this.hass!, "history") ||
-      !this.context?.entity_id ||
-      !this._config
-    ) {
-      return () => Promise.resolve();
-    }
-
-    const { numeric_device_classes: sensorNumericDeviceClasses } =
-      await getSensorNumericDeviceClasses(this.hass!);
-
-    return subscribeHistoryStatesTimeWindow(
-      this.hass!,
-      (historyStates) => {
-        this._stateHistory = computeHistory(
-          this.hass!,
-          historyStates,
-          [this.context!.entity_id!],
-          this.hass!.localize,
-          sensorNumericDeviceClasses,
-          false
-        );
-      },
-      this._config!.hours_to_show ?? 24,
-      [this.context!.entity_id!]
-    );
-  }
-
-  private _generateLinePoints(line: LineChartUnit): { x: number; y: number }[] {
-    const width = this.clientWidth;
-    const height = this.clientHeight;
-    let minY = Number(line.data[0].states[0].state);
-    let maxY = Number(line.data[0].states[0].state);
-    const minX = line.data[0].states[0].last_changed;
-    const maxX = Date.now();
-    line.data[0].states.forEach((stateData) => {
-      const stateValue = Number(stateData.state);
-      if (stateValue < minY) {
-        minY = stateValue;
-      }
-      if (stateValue > maxY) {
-        maxY = stateValue;
-      }
-    });
-    const rangeY = maxY - minY || minY * 0.1;
-    const sampledData = downSampleLineData(
-      line.data[0].states.map((stateData) => [
-        stateData.last_changed,
-        Number(stateData.state),
-      ]),
-      width,
-      minX,
-      maxX
-    );
-    // add margin to the min and max
-    minY -= rangeY * 0.1;
-    maxY += rangeY * 0.1;
-    const yDenom = maxY - minY || 1;
-    const xDenom = maxX - minX || 1;
-    const points = sampledData!.map((point) => {
-      const x = ((point![0] - minX) / xDenom) * width;
-      const y = height - ((Number(point![1]) - minY) / yDenom) * height;
-      return { x, y };
-    });
-    points.push({ x: width, y: points[points.length - 1].y });
-    return points;
-  }
-
-  private _generateTimelineRanges(timeline: TimelineEntity) {
-    if (timeline.data.length === 0) {
-      return [];
-    }
-    const computedStyles = getComputedStyle(this);
-    const width = this.clientWidth;
-    const minX = timeline.data[0].last_changed;
-    const maxX = Date.now();
-    let prevEndX = 0;
-    let prevStateColor = "";
-    const ranges = timeline.data.map((t) => {
-      const x = ((t.last_changed - minX) / (maxX - minX)) * width;
-      const range = {
-        startX: prevEndX,
-        endX: x,
-        color: prevStateColor,
-      };
-      prevStateColor = computeTimelineColor(
-        t.state,
-        computedStyles,
-        this.hass!.states[timeline.entity_id]
-      );
-      prevEndX = x;
-      return range;
-    });
-    ranges.push({
-      startX: prevEndX,
-      endX: width,
-      color: prevStateColor,
-    });
-    return ranges;
-  }
-
-  private _getLinePaths(points: { x: number; y: number }[]) {
-    const paths: string[] = [];
-    const filledPaths: string[] = [];
-    if (!points.length) {
-      return { paths, filledPaths };
-    }
-    // path can interupted by missing data, so we need to split the path into segments
-    const pathSegments: { x: number; y: number }[][] = [[]];
-    points.forEach((point) => {
-      if (!isNaN(point.y)) {
-        pathSegments[pathSegments.length - 1].push(point);
-      } else if (pathSegments[pathSegments.length - 1].length > 0) {
-        pathSegments.push([]);
-      }
-    });
-
-    pathSegments.forEach((pathPoints) => {
-      // create a smoothed path
-      let next: { x: number; y: number };
-      let path = "";
-      let last = pathPoints[0];
-
-      path += `M ${last.x},${last.y}`;
-
-      pathPoints.forEach((coord) => {
-        next = coord;
-        path += ` ${(next.x + last.x) / 2},${(next.y + last.y) / 2}`;
-        path += ` Q${next.x},${next.y}`;
-        last = next;
-      });
-
-      path += ` ${next!.x},${next!.y}`;
-      paths.push(path);
-      filledPaths.push(
-        path +
-          ` L ${next!.x},${this.clientHeight} L ${pathPoints[0].x},${this.clientHeight} Z`
-      );
-    });
-
-    return { paths, filledPaths };
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: var(--feature-height);
-    }
-    :host > div {
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-    }
-    .timeline {
-      border-radius: 4px;
-      overflow: hidden;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-history-chart-card-feature": HuiHistoryChartCardFeature;
-  }
-}

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -0,0 +1,164 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { isNumericFromAttributes } from "../../../common/number/format_number";
+import "../../../components/ha-spinner";
+import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../types";
+import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates";
+import "../components/hui-graph-base";
+import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import type {
+  TrendGraphCardFeatureConfig,
+  LovelaceCardFeatureContext,
+} from "./types";
+
+export const supportsTrendGraphCardFeature = (
+  hass: HomeAssistant,
+  context: LovelaceCardFeatureContext
+) => {
+  const stateObj = context.entity_id
+    ? hass.states[context.entity_id]
+    : undefined;
+  if (!stateObj) return false;
+  const domain = computeDomain(stateObj.entity_id);
+  return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
+};
+
+export const DEFAULT_HOURS_TO_SHOW = 24;
+
+@customElement("hui-trend-graph-card-feature")
+class HuiHistoryChartCardFeature
+  extends SubscribeMixin(LitElement)
+  implements LovelaceCardFeature
+{
+  @property({ attribute: false, hasChanged: () => false })
+  public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: TrendGraphCardFeatureConfig;
+
+  @state() private _coordinates?: [number, number][];
+
+  private _interval?: number;
+
+  static getStubConfig(): TrendGraphCardFeatureConfig {
+    return {
+      type: "trend-graph",
+    };
+  }
+
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
+    await import(
+      "../editor/config-elements/hui-trend-graph-card-feature-editor"
+    );
+    return document.createElement("hui-trend-graph-card-feature-editor");
+  }
+
+  public setConfig(config: TrendGraphCardFeatureConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    // redraw the graph every minute to update the time axis
+    clearInterval(this._interval);
+    this._interval = window.setInterval(() => this.requestUpdate(), 1000 * 60);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(this._interval);
+  }
+
+  protected hassSubscribe() {
+    return [this._subscribeHistory()];
+  }
+
+  protected render() {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.context ||
+      !supportsTrendGraphCardFeature(this.hass, this.context)
+    ) {
+      return nothing;
+    }
+    if (!this._coordinates) {
+      return html`
+        <div class="container">
+          <ha-spinner size="small"></ha-spinner>
+        </div>
+      `;
+    }
+    if (!this._coordinates.length) {
+      return html`
+        <div class="container">
+          <div class="info">No state history found.</div>
+        </div>
+      `;
+    }
+    return html`
+      <hui-graph-base .coordinates=${this._coordinates}></hui-graph-base>
+    `;
+  }
+
+  private async _subscribeHistory(): Promise<() => Promise<void>> {
+    if (
+      !isComponentLoaded(this.hass!, "history") ||
+      !this.context?.entity_id ||
+      !this._config
+    ) {
+      return () => Promise.resolve();
+    }
+
+    const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
+
+    return subscribeHistoryStatesTimeWindow(
+      this.hass!,
+      (historyStates) => {
+        this._coordinates =
+          coordinatesMinimalResponseCompressedState(
+            historyStates[this.context!.entity_id!],
+            hourToShow,
+            500,
+            2,
+            undefined
+          ) || [];
+      },
+      hourToShow,
+      [this.context!.entity_id!]
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100%;
+      height: var(--feature-height);
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: flex-end;
+      pointer-events: none !important;
+    }
+    hui-graph-base {
+      width: 100%;
+      --accent-color: var(--feature-color);
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      overflow: hidden;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-trend-graph-card-feature": HuiHistoryChartCardFeature;
+  }
+}

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

@@ -187,9 +187,9 @@ export interface UpdateActionsCardFeatureConfig {
   backup?: "yes" | "no" | "ask";
 }
 
-export interface HistoryChartCardFeatureConfig {
+export interface TrendGraphCardFeatureConfig {
-  type: "history-chart";
+  type: "trend-graph";
-  hours_to_show: number;
+  hours_to_show?: number;
 }
 
 export const AREA_CONTROLS = [
@@ -239,7 +239,7 @@ export type LovelaceCardFeatureConfig =
   | FanOscillateCardFeatureConfig
   | FanPresetModesCardFeatureConfig
   | FanSpeedCardFeatureConfig
-  | HistoryChartCardFeatureConfig
+  | TrendGraphCardFeatureConfig
   | HumidifierToggleCardFeatureConfig
   | HumidifierModesCardFeatureConfig
   | LawnMowerCommandsCardFeatureConfig
@@ -251,7 +251,7 @@ export type LovelaceCardFeatureConfig =
   | MediaPlayerVolumeSliderCardFeatureConfig
   | NumericInputCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | HistoryChartCardFeatureConfig
+  | TrendGraphCardFeatureConfig
   | TargetHumidityCardFeatureConfig
   | TargetTemperatureCardFeatureConfig
   | ToggleCardFeatureConfig

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

@@ -36,12 +36,11 @@ export class HuiClockCardDigital extends LitElement {
       locale = { ...locale, time_format: this.config.time_format };
     }
 
-    const h12 = useAmPm(locale);
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: h12 ? "numeric" : "2-digit",
+      hour: "2-digit",
       minute: "2-digit",
       second: "2-digit",
-      hourCycle: h12 ? "h12" : "h23",
+      hourCycle: useAmPm(locale) ? "h12" : "h23",
       timeZone:
         this.config?.time_zone ||
         resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),

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

@@ -109,7 +109,7 @@ class HuiEnergySankeyCard
         "ui.panel.lovelace.cards.energy.energy_distribution.home"
       ),
       value: Math.max(0, consumption.total.used_total),
-      color: computedStyle.getPropertyValue("--primary-color"),
+      color: computedStyle.getPropertyValue("--primary-color").trim(),
       index: 1,
     };
     nodes.push(homeNode);
@@ -125,7 +125,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.battery"
         ),
         value: totalBatteryOut,
-        color: computedStyle.getPropertyValue("--energy-battery-out-color"),
+        color: computedStyle
+          .getPropertyValue("--energy-battery-out-color")
+          .trim(),
         index: 0,
       });
       links.push({
@@ -141,7 +143,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.battery"
         ),
         value: totalBatteryIn,
-        color: computedStyle.getPropertyValue("--energy-battery-in-color"),
+        color: computedStyle
+          .getPropertyValue("--energy-battery-in-color")
+          .trim(),
         index: 1,
       });
       if (consumption.total.grid_to_battery > 0) {
@@ -169,9 +173,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.grid"
         ),
         value: totalFromGrid,
-        color: computedStyle.getPropertyValue(
+        color: computedStyle
-          "--energy-grid-consumption-color"
+          .getPropertyValue("--energy-grid-consumption-color")
-        ),
+          .trim(),
         index: 0,
       });
 
@@ -192,7 +196,7 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.solar"
         ),
         value: totalSolarProduction,
-        color: computedStyle.getPropertyValue("--energy-solar-color"),
+        color: computedStyle.getPropertyValue("--energy-solar-color").trim(),
         index: 0,
       });
 
@@ -213,13 +217,15 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_distribution.grid"
         ),
         value: totalToGrid,
-        color: computedStyle.getPropertyValue("--energy-grid-return-color"),
+        color: computedStyle
+          .getPropertyValue("--energy-grid-return-color")
+          .trim(),
         index: 1,
       });
       if (consumption.total.battery_to_grid > 0) {
         links.push({
           source: "battery",
-          target: "grid",
+          target: "grid_return",
           value: consumption.total.battery_to_grid,
         });
       }
@@ -295,7 +301,7 @@ class HuiEnergySankeyCard
               label: this.hass.floors[floorId].name,
               value: floors[floorId].value,
               index: 2,
-              color: computedStyle.getPropertyValue("--primary-color"),
+              color: computedStyle.getPropertyValue("--primary-color").trim(),
             });
             links.push({
               source: "home",
@@ -316,7 +322,7 @@ class HuiEnergySankeyCard
                 label: this.hass.areas[areaId]!.name,
                 value: areas[areaId].value,
                 index: 3,
-                color: computedStyle.getPropertyValue("--primary-color"),
+                color: computedStyle.getPropertyValue("--primary-color").trim(),
               });
               links.push({
                 source: floorNodeId,
@@ -360,7 +366,9 @@ class HuiEnergySankeyCard
           "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
         ),
         value: untrackedConsumption,
-        color: computedStyle.getPropertyValue("--state-unavailable-color"),
+        color: computedStyle
+          .getPropertyValue("--state-unavailable-color")
+          .trim(),
         index: 3 + deviceSections.length,
       });
       links.push({

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

@@ -138,6 +138,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       flex-direction: column;
       justify-content: flex-end;
       height: 100%;
+      min-height: 24px;
     }
     [role="button"] {
       cursor: pointer;
@@ -147,7 +148,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       transition: transform 180ms ease-in-out;
     }
     .container {
-      padding: 2px 4px;
+      padding: 0 4px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;

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

@@ -0,0 +1,372 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
+import { computeCssColor } from "../../../common/color/compute-color";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { generateEntityFilter } from "../../../common/entity/entity_filter";
+import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import "../../../components/ha-ripple";
+import "../../../components/tile/ha-tile-icon";
+import "../../../components/tile/ha-tile-info";
+import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
+import "../../../state-display/state-display";
+import type { HomeAssistant } from "../../../types";
+import { actionHandler } from "../common/directives/action-handler-directive";
+import { handleAction } from "../common/handle-action";
+import { hasAction } from "../common/has-action";
+import {
+  findEntities,
+  getSummaryLabel,
+  HOME_SUMMARIES_FILTERS,
+  HOME_SUMMARIES_ICONS,
+  type HomeSummary,
+} from "../strategies/home/helpers/home-summaries";
+import type { LovelaceCard, LovelaceGridOptions } from "../types";
+import type { HomeSummaryCard } from "./types";
+
+const COLORS: Record<HomeSummary, string> = {
+  lights: "amber",
+  climate: "deep-orange",
+  security: "blue-grey",
+  media_players: "blue",
+};
+
+@customElement("hui-home-summary-card")
+export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: HomeSummaryCard;
+
+  public setConfig(config: HomeSummaryCard): void {
+    this._config = config;
+  }
+
+  public getCardSize(): number {
+    return this._config?.vertical ? 2 : 1;
+  }
+
+  public getGridOptions(): LovelaceGridOptions {
+    const columns = 6;
+    let min_columns = 6;
+    let rows = 1;
+
+    if (this._config?.vertical) {
+      rows++;
+      min_columns = 3;
+    }
+    return {
+      columns,
+      rows,
+      min_columns,
+      min_rows: rows,
+    };
+  }
+
+  private _handleAction(ev: ActionHandlerEvent) {
+    handleAction(this, this.hass!, this._config!, ev.detail.action!);
+  }
+
+  private get _hasCardAction() {
+    return (
+      hasAction(this._config?.tap_action) ||
+      hasAction(this._config?.hold_action) ||
+      hasAction(this._config?.double_tap_action)
+    );
+  }
+
+  private _computeSummaryState(): string {
+    if (!this._config || !this.hass) {
+      return "";
+    }
+    const allEntities = Object.keys(this.hass!.states);
+
+    const areas = Object.values(this.hass.areas);
+    const areasFilter = generateEntityFilter(this.hass, {
+      area: areas.map((area) => area.area_id),
+    });
+
+    const entitiesInsideArea = allEntities.filter(areasFilter);
+
+    switch (this._config.summary) {
+      case "lights": {
+        // Number of lights on
+        const lightsFilters = HOME_SUMMARIES_FILTERS.lights.map((filter) =>
+          generateEntityFilter(this.hass!, filter)
+        );
+
+        const lightEntities = findEntities(entitiesInsideArea, lightsFilters);
+
+        const onLights = lightEntities.filter((entityId) => {
+          const s = this.hass!.states[entityId]?.state;
+          return s === "on";
+        });
+
+        return onLights.length
+          ? this.hass.localize("ui.card.home-summary.count_lights_on", {
+              count: onLights.length,
+            })
+          : this.hass.localize("ui.card.home-summary.all_lights_off");
+      }
+      case "climate": {
+        // Min/Max temperature of the areas
+        const areaSensors = areas
+          .map((area) => area.temperature_entity_id)
+          .filter(Boolean);
+
+        const sensorsValues = areaSensors
+          .map(
+            (entityId) => parseFloat(this.hass!.states[entityId!]?.state) || NaN
+          )
+          .filter((value) => !isNaN(value));
+
+        if (sensorsValues.length === 0) {
+          return "";
+        }
+        const minTemp = Math.min(...sensorsValues);
+        const maxTemp = Math.max(...sensorsValues);
+
+        if (isNaN(minTemp) || isNaN(maxTemp)) {
+          return "";
+        }
+
+        const formattedMinTemp = formatNumber(minTemp, this.hass?.locale, {
+          minimumFractionDigits: 1,
+          maximumFractionDigits: 1,
+        });
+        const formattedMaxTemp = formatNumber(maxTemp, this.hass?.locale, {
+          minimumFractionDigits: 1,
+          maximumFractionDigits: 1,
+        });
+        return formattedMinTemp === formattedMaxTemp
+          ? `${formattedMinTemp}°`
+          : `${formattedMinTemp} - ${formattedMaxTemp}°`;
+      }
+      case "security": {
+        // Alarm and lock status
+        const securityFilters = HOME_SUMMARIES_FILTERS.security.map((filter) =>
+          generateEntityFilter(this.hass!, filter)
+        );
+
+        const securityEntities = findEntities(
+          entitiesInsideArea,
+          securityFilters
+        );
+
+        const locks = securityEntities.filter((entityId) => {
+          const domain = computeDomain(entityId);
+          return domain === "lock";
+        });
+
+        const alarms = securityEntities.filter((entityId) => {
+          const domain = computeDomain(entityId);
+          return domain === "alarm_control_panel";
+        });
+
+        const disarmedAlarms = alarms.filter((entityId) => {
+          const s = this.hass!.states[entityId]?.state;
+          return s === "disarmed";
+        });
+
+        if (!locks.length && !alarms.length) {
+          return "";
+        }
+
+        const unlockedLocks = locks.filter((entityId) => {
+          const s = this.hass!.states[entityId]?.state;
+          return s === "unlocked" || s === "jammed" || s === "open";
+        });
+
+        if (unlockedLocks.length) {
+          return this.hass.localize(
+            "ui.card.home-summary.count_locks_unlocked",
+            {
+              count: unlockedLocks.length,
+            }
+          );
+        }
+        if (disarmedAlarms.length) {
+          return this.hass.localize(
+            "ui.card.home-summary.count_alarms_disarmed",
+            {
+              count: disarmedAlarms.length,
+            }
+          );
+        }
+        return this.hass.localize("ui.card.home-summary.all_secure");
+      }
+      case "media_players": {
+        // Playing media
+        const mediaPlayerFilters = HOME_SUMMARIES_FILTERS.media_players.map(
+          (filter) => generateEntityFilter(this.hass!, filter)
+        );
+
+        const mediaPlayerEntities = findEntities(
+          entitiesInsideArea,
+          mediaPlayerFilters
+        );
+
+        const playingMedia = mediaPlayerEntities.filter((entityId) => {
+          const s = this.hass!.states[entityId]?.state;
+          return s === "playing";
+        });
+
+        return playingMedia.length
+          ? this.hass.localize("ui.card.home-summary.count_media_playing", {
+              count: playingMedia.length,
+            })
+          : this.hass.localize("ui.card.home-summary.no_media_playing");
+      }
+    }
+    return "";
+  }
+
+  protected render() {
+    if (!this._config || !this.hass) {
+      return nothing;
+    }
+
+    const contentClasses = { vertical: Boolean(this._config.vertical) };
+
+    const color = computeCssColor(COLORS[this._config.summary]);
+
+    const style = {
+      "--tile-color": color,
+    };
+
+    const secondary = this._computeSummaryState();
+
+    const label = getSummaryLabel(this.hass.localize, this._config.summary);
+    const icon = HOME_SUMMARIES_ICONS[this._config.summary];
+
+    return html`
+      <ha-card style=${styleMap(style)}>
+        <div
+          class="background"
+          @action=${this._handleAction}
+          .actionHandler=${actionHandler({
+            hasHold: hasAction(this._config!.hold_action),
+            hasDoubleClick: hasAction(this._config!.double_tap_action),
+          })}
+          role=${ifDefined(this._hasCardAction ? "button" : undefined)}
+          tabindex=${ifDefined(this._hasCardAction ? "0" : undefined)}
+          aria-labelledby="info"
+        >
+          <ha-ripple .disabled=${!this._hasCardAction}></ha-ripple>
+        </div>
+        <div class="container">
+          <div class="content ${classMap(contentClasses)}">
+            <ha-tile-icon>
+              <ha-icon slot="icon" .icon=${icon}></ha-icon>
+            </ha-tile-icon>
+            <ha-tile-info
+              id="info"
+              .primary=${label}
+              .secondary=${secondary}
+            ></ha-tile-info>
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      --tile-color: var(--state-inactive-color);
+      -webkit-tap-highlight-color: transparent;
+    }
+    ha-card:has(.background:focus-visible) {
+      --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+      --shadow-focus: 0 0 0 1px var(--tile-color);
+      border-color: var(--tile-color);
+      box-shadow: var(--shadow-default), var(--shadow-focus);
+    }
+    ha-card {
+      --ha-ripple-color: var(--tile-color);
+      --ha-ripple-hover-opacity: 0.04;
+      --ha-ripple-pressed-opacity: 0.12;
+      height: 100%;
+      transition:
+        box-shadow 180ms ease-in-out,
+        border-color 180ms ease-in-out;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    ha-card.active {
+      --tile-color: var(--state-icon-color);
+    }
+    [role="button"] {
+      cursor: pointer;
+      pointer-events: auto;
+    }
+    [role="button"]:focus {
+      outline: none;
+    }
+    .background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: var(--ha-card-border-radius, 12px);
+      margin: calc(-1 * var(--ha-card-border-width, 1px));
+      overflow: hidden;
+    }
+    .container {
+      margin: calc(-1 * var(--ha-card-border-width, 1px));
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+    .container.horizontal {
+      flex-direction: row;
+    }
+
+    .content {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 10px;
+      flex: 1;
+      min-width: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+      gap: 10px;
+    }
+
+    .vertical {
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+    }
+    .vertical ha-tile-info {
+      width: 100%;
+      flex: none;
+    }
+
+    ha-tile-icon {
+      --tile-icon-color: var(--tile-color);
+      position: relative;
+      padding: 6px;
+      margin: -6px;
+    }
+
+    ha-tile-info {
+      position: relative;
+      min-width: 0;
+      transition: background-color 180ms ease-in-out;
+      box-sizing: border-box;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-home-summary-card": HuiHomeSummaryCard;
+  }
+}

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

@@ -7,7 +7,6 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateActive } from "../../../common/entity/state_active";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-state-icon";
@@ -31,6 +30,15 @@ import type {
 } from "./types";
 import type { PersonEntity } from "../../../data/person";
 
+const STATES_OFF = new Set([
+  "closed",
+  "locked",
+  "not_home",
+  "off",
+  "unavailable",
+  "unknown",
+]);
+
 @customElement("hui-picture-glance-card")
 class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -295,7 +303,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
           .disabled=${!hasAction(entityConf.tap_action)}
           .config=${entityConf}
           class=${classMap({
-            "state-on": stateActive(stateObj),
+            "state-on": !STATES_OFF.has(stateObj.state),
           })}
           title=${`${computeStateName(
             stateObj

src/panels/lovelace/cards/types.ts

@@ -26,6 +26,7 @@ import type {
 import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
 import type { TimeFormat } from "../../../data/translation";
+import type { HomeSummary } from "../strategies/home/helpers/home-summaries";
 
 export type AlarmPanelCardConfigState =
   | "arm_away"
@@ -588,3 +589,11 @@ export interface HeadingCardConfig extends LovelaceCardConfig {
   /** @deprecated Use `badges` instead */
   entities?: LovelaceHeadingBadgeConfig[];
 }
+
+export interface HomeSummaryCard extends LovelaceCardConfig {
+  summary: HomeSummary;
+  vertical?: boolean;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
+}

src/panels/lovelace/common/graph/coordinates.ts

@@ -14,8 +14,8 @@ const calcPoints = (
   detail: number,
   min: number,
   max: number
-): number[][] => {
+): [number, number][] => {
-  const coords = [] as number[][];
+  const coords = [] as [number, number][];
   const height = 80;
   let yRatio = (max - min) / height;
   yRatio = yRatio !== 0 ? yRatio : height;
@@ -61,7 +61,7 @@ export const coordinates = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): number[][] | undefined => {
+): [number, number][] | undefined => {
   history.forEach((item) => {
     item.state = Number(item.state);
   });
@@ -119,7 +119,7 @@ export const coordinatesMinimalResponseCompressedState = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): number[][] | undefined => {
+): [number, number][] | undefined => {
   if (!history) {
     return undefined;
   }

src/panels/lovelace/components/hui-graph-base.ts

@@ -13,7 +13,7 @@ export class HuiGraphBase extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this._path
-        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100">
+        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="none">
           <g>
             <mask id="fill">
               <path
@@ -25,8 +25,10 @@ export class HuiGraphBase extends LitElement {
             <rect height="100%" width="100%" id="fill-rect" fill="var(--accent-color)" mask="url(#fill)"></rect>
             <mask id="line">
               <path
+                vector-effect="non-scaling-stroke"
+                class='line'
                 fill="none"
-                stroke="var(--accent-color)"
+                stroke="white"
                 stroke-width="${strokeWidth}"
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -54,6 +56,10 @@ export class HuiGraphBase extends LitElement {
     :host {
       display: flex;
       width: 100%;
+      height: 100%;
+    }
+    .line {
+      opacity: 0.8;
     }
     .fill {
       opacity: 0.1;

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

@@ -68,6 +68,7 @@ const LAZY_LOAD_TYPES = {
   "energy-sankey": () => import("../cards/energy/hui-energy-sankey-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),
   error: () => import("../cards/hui-error-card"),
+  "home-summary": () => import("../cards/hui-home-summary-card"),
   gauge: () => import("../cards/hui-gauge-card"),
   "history-graph": () => import("../cards/hui-history-graph-card"),
   "horizontal-stack": () => import("../cards/hui-horizontal-stack-card"),

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

@@ -36,7 +36,7 @@ import "../card-features/hui-valve-position-card-feature";
 import "../card-features/hui-water-heater-operation-modes-card-feature";
 import "../card-features/hui-area-controls-card-feature";
 import "../card-features/hui-bar-gauge-card-feature";
-import "../card-features/hui-history-chart-card-feature";
+import "../card-features/hui-trend-graph-card-feature";
 
 import type { LovelaceCardFeatureConfig } from "../card-features/types";
 import {
@@ -75,7 +75,7 @@ const TYPES = new Set<LovelaceCardFeatureConfig["type"]>([
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "history-chart",
+  "trend-graph",
   "target-humidity",
   "target-temperature",
   "toggle",

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

@@ -46,7 +46,7 @@ import { supportsMediaPlayerPlaybackCardFeature } from "../../card-features/hui-
 import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature";
 import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
-import { supportsHistoryChartCardFeature } from "../../card-features/hui-history-chart-card-feature";
+import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature";
 import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature";
@@ -100,7 +100,7 @@ const UI_FEATURE_TYPES = [
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "history-chart",
+  "trend-graph",
   "target-humidity",
   "target-temperature",
   "toggle",
@@ -128,6 +128,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "lawn-mower-commands",
   "numeric-input",
   "select-options",
+  "trend-graph",
   "update-actions",
   "vacuum-commands",
   "water-heater-operation-modes",
@@ -168,7 +169,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "media-player-volume-slider": supportsMediaPlayerVolumeSliderCardFeature,
   "numeric-input": supportsNumericInputCardFeature,
   "select-options": supportsSelectOptionsCardFeature,
-  "history-chart": supportsHistoryChartCardFeature,
+  "trend-graph": supportsTrendGraphCardFeature,
   "target-humidity": supportsTargetHumidityCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
   toggle: supportsToggleCardFeature,

src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts

@@ -0,0 +1,82 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-form/ha-form";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../types";
+import { DEFAULT_HOURS_TO_SHOW } from "../../card-features/hui-trend-graph-card-feature";
+import type {
+  LovelaceCardFeatureContext,
+  TrendGraphCardFeatureConfig,
+} from "../../card-features/types";
+import type { LovelaceCardFeatureEditor } from "../../types";
+
+const SCHEMA = [
+  {
+    name: "hours_to_show",
+    default: DEFAULT_HOURS_TO_SHOW,
+    selector: { number: { min: 1, mode: "box" } },
+  },
+] as const satisfies HaFormSchema[];
+
+@customElement("hui-trend-graph-card-feature-editor")
+export class HuiTrendGraphCardFeatureEditor
+  extends LitElement
+  implements LovelaceCardFeatureEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: TrendGraphCardFeatureConfig;
+
+  public setConfig(config: TrendGraphCardFeatureConfig): void {
+    this._config = config;
+  }
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    const data = { ...this._config };
+
+    if (!this._config.hours_to_show) {
+      data.hours_to_show = DEFAULT_HOURS_TO_SHOW;
+    }
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hours_to_show":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+      default:
+        return "";
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-trend-graph-card-feature-editor": HuiTrendGraphCardFeatureEditor;
+  }
+}

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -61,7 +61,7 @@ export class HuiGraphHeaderFooter
 
   @state() protected _config?: GraphHeaderFooterConfig;
 
-  @state() private _coordinates?: number[][];
+  @state() private _coordinates?: [number, number][];
 
   private _error?: string;
 

src/panels/lovelace/hui-root.ts

@@ -355,7 +355,10 @@ class HUIRoot extends LitElement {
       overflowItems.forEach((i) => {
         const title = [this.hass!.localize(i.key), i.suffix].join(" ");
         const action = i.subItems
-          ? () => {
+          ? (e) => {
+              if (!shouldHandleRequestSelectedEvent(e)) {
+                return;
+              }
               showListItemsDialog(this, {
                 title: title,
                 items: i.subItems!.map((si) => ({

src/panels/lovelace/strategies/home/home-climate-view-strategy.ts

@@ -12,30 +12,11 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import { computeObjectId } from "../../../../common/entity/compute_object_id";
 
 export interface HomeClimateViewStrategyConfig {
   type: "home-climate";
 }
 
-const createTempHumidBadge = (hass: HomeAssistant, entityId: string) => {
-  const stateObj = hass.states[entityId];
-  return {
-    type: "tile",
-    entity: entityId,
-    name: stateObj
-      ? computeStateName(stateObj)
-      : computeObjectId(entityId).replace(/_/g, " "),
-    features: [
-      {
-        type: "history-chart",
-        hours_to_show: 3,
-      },
-    ],
-  };
-};
-
 const processAreasForClimate = (
   areaIds: string[],
   hass: HomeAssistant,
@@ -52,8 +33,28 @@ const processAreasForClimate = (
       area: area.area_id,
     });
     const areaEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
 
-    if (areaEntities.length > 0) {
+    const temperatureEntityId = area.temperature_entity_id;
+    if (temperatureEntityId && hass.states[temperatureEntityId]) {
+      areaCards.push({
+        ...computeTileCard(temperatureEntityId),
+        features: [{ type: "trend-graph" }],
+      });
+    }
+    const humidityEntityId = area.humidity_entity_id;
+    if (humidityEntityId && hass.states[humidityEntityId]) {
+      areaCards.push({
+        ...computeTileCard(humidityEntityId),
+        features: [{ type: "trend-graph" }],
+      });
+    }
+
+    for (const entityId of areaEntities) {
+      areaCards.push(computeTileCard(entityId));
+    }
+
+    if (areaCards.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
@@ -63,21 +64,7 @@ const processAreasForClimate = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
+      cards.push(...areaCards);
-      if (hass.areas[areaId].temperature_entity_id) {
-        cards.push(
-          createTempHumidBadge(hass, hass.areas[areaId].temperature_entity_id)
-        );
-      }
-      if (hass.areas[areaId].humidity_entity_id) {
-        cards.push(
-          createTempHumidBadge(hass, hass.areas[areaId].humidity_entity_id)
-        );
-      }
-
-      for (const entityId of areaEntities) {
-        cards.push(computeTileCard(entityId));
-      }
     }
   }
 

src/panels/lovelace/strategies/home/home-lights-view-strategy.ts

@@ -32,10 +32,15 @@ const processAreasForLights = (
       area: area.area_id,
     });
     const areaLights = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
 
     const computeTileCard = computeAreaTileCardConfig(hass, "", false);
 
-    if (areaLights.length > 0) {
+    for (const entityId of areaLights) {
+      areaCards.push(computeTileCard(entityId));
+    }
+
+    if (areaCards.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
@@ -45,10 +50,7 @@ const processAreasForLights = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
+      cards.push(...areaCards);
-      for (const entityId of areaLights) {
-        cards.push(computeTileCard(entityId));
-      }
     }
   }
 

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -9,16 +9,12 @@ import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import type {
   AreaCardConfig,
-  ButtonCardConfig,
+  HomeSummaryCard,
   MarkdownCardConfig,
   TileCardConfig,
   WeatherForecastCardConfig,
 } from "../../cards/types";
 import { getAreas } from "../areas/helpers/areas-strategy-helper";
-import {
-  getSummaryLabel,
-  HOME_SUMMARIES_ICONS,
-} from "./helpers/home-summaries";
 
 export interface HomeMainViewStrategyConfig {
   type: "home-main";
@@ -114,61 +110,57 @@ export class HomeMainViewStrategy extends ReactiveElement {
           heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"),
         },
         {
-          type: "button",
+          type: "home-summary",
-          icon: HOME_SUMMARIES_ICONS.lights,
+          summary: "lights",
-          name: getSummaryLabel(hass.localize, "lights"),
+          vertical: true,
-          icon_height: "24px",
-          grid_options: {
-            rows: 2,
-            columns: 4,
-          },
           tap_action: {
             action: "navigate",
             navigation_path: "lights",
           },
-        } satisfies ButtonCardConfig,
-        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.climate,
-          name: getSummaryLabel(hass.localize, "climate"),
-          icon_height: "30px",
           grid_options: {
             rows: 2,
             columns: 4,
           },
+        } satisfies HomeSummaryCard,
+        {
+          type: "home-summary",
+          summary: "climate",
+          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "climate",
           },
-        } satisfies ButtonCardConfig,
-        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.security,
-          name: getSummaryLabel(hass.localize, "security"),
-          icon_height: "30px",
           grid_options: {
             rows: 2,
             columns: 4,
           },
+        } satisfies HomeSummaryCard,
+        {
+          type: "home-summary",
+          summary: "security",
+          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "security",
           },
-        } satisfies ButtonCardConfig,
-        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.media_players,
-          name: getSummaryLabel(hass.localize, "media_players"),
-          icon_height: "30px",
           grid_options: {
             rows: 2,
             columns: 4,
           },
+        } satisfies HomeSummaryCard,
+        {
+          type: "home-summary",
+          summary: "media_players",
+          vertical: true,
           tap_action: {
             action: "navigate",
             navigation_path: "media-players",
           },
-        } satisfies ButtonCardConfig,
+          grid_options: {
+            rows: 2,
+            columns: 4,
+          },
+        } satisfies HomeSummaryCard,
       ],
     };
 
@@ -215,6 +207,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
             "ui.panel.lovelace.cards.energy.energy_distribution.title_today"
           ),
           type: "energy-distribution",
+          collection_key: "energy_home_dashboard",
           link_dashboard: true,
         });
       }

src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts

@@ -29,6 +29,14 @@ const processAreasForMediaPlayers = (
       area: area.area_id,
     });
     const areaEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
+
+    for (const entityId of areaEntities) {
+      cards.push({
+        type: "media-control",
+        entity: entityId,
+      } satisfies MediaControlCardConfig);
+    }
 
     if (areaEntities.length > 0) {
       cards.push({
@@ -40,13 +48,7 @@ const processAreasForMediaPlayers = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
+      cards.push(...areaCards);
-      for (const entityId of areaEntities) {
-        cards.push({
-          type: "media-control",
-          entity: entityId,
-        } satisfies MediaControlCardConfig);
-      }
     }
   }
 

src/panels/lovelace/strategies/home/home-security-view-strategy.ts

@@ -12,9 +12,6 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import { computeObjectId } from "../../../../common/entity/compute_object_id";
 
 export interface HomeSecurityViewStrategyConfig {
   type: "home-security";
@@ -35,7 +32,13 @@ const processAreasForSecurity = (
     const areaFilter = generateEntityFilter(hass, {
       area: area.area_id,
     });
+
     const areaEntities = entities.filter(areaFilter);
+    const areaCards: LovelaceCardConfig[] = [];
+
+    for (const entityId of areaEntities) {
+      areaCards.push(computeTileCard(entityId));
+    }
 
     if (areaEntities.length > 0) {
       cards.push({
@@ -47,28 +50,7 @@ const processAreasForSecurity = (
           navigation_path: `areas-${area.area_id}`,
         },
       });
-
+      cards.push(...areaCards);
-      for (const entityId of areaEntities) {
-        const stateObj = hass.states[entityId];
-        cards.push(
-          computeDomain(entityId) === "binary_sensor" &&
-            stateObj?.attributes.device_class === "motion"
-            ? {
-                type: "tile",
-                entity: entityId,
-                name: stateObj
-                  ? computeStateName(stateObj)
-                  : computeObjectId(entityId).replace(/_/g, " "),
-                features: [
-                  {
-                    type: "history-chart",
-                    hours_to_show: 6,
-                  },
-                ],
-              }
-            : computeTileCard(entityId)
-        );
-      }
     }
   }
 

src/resources/theme/color/color.globals.ts

@@ -218,6 +218,7 @@ export const colorStyles = css`
     --table-row-alternative-background-color: var(--secondary-background-color);
     --data-table-background-color: var(--card-background-color);
     --markdown-code-background-color: var(--primary-background-color);
+    --bar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
 
     /* https://github.com/material-components/material-web/blob/master/docs/theming.md */
     --mdc-theme-primary: var(--primary-color);
@@ -246,6 +247,7 @@ export const colorStyles = css`
     --mdc-dialog-scroll-divider-color: var(--divider-color);
     --mdc-dialog-heading-ink-color: var(--primary-text-color);
     --mdc-dialog-content-ink-color: var(--primary-text-color);
+    --mdc-top-app-bar-fixed-box-shadow: var(--bar-box-shadow);
 
     --mdc-text-field-idle-line-color: var(--input-idle-line-color);
     --mdc-text-field-hover-line-color: var(--input-hover-line-color);
@@ -360,6 +362,8 @@ export const darkColorStyles = css`
     --ha-button-warning-light-color: #917b54c1;
     --ha-button-neutral-color: #d9dae0;
     --ha-button-neutral-light-color: #6a7081;
+
+    --bar-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
   }
 `;
 

src/translations/en.json

@@ -5,7 +5,7 @@
     "config": "Settings",
     "states": "Overview",
     "map": "Map",
-    "logbook": "Activity",
+    "logbook": "Logbook",
     "history": "History",
     "todo": "To-do lists",
     "developer_tools": "Developer tools",
@@ -201,6 +201,15 @@
         "open_door_confirm": "Really open?",
         "open_door_done": "Done"
       },
+      "home-summary": {
+        "all_lights_off": "All off",
+        "count_lights_on": "{count} {count, plural,\n one {on}\n other {on}\n}",
+        "count_locks_unlocked": "{count} {count, plural,\n one {unlocked}\n other {unlocked}\n}",
+        "count_alarms_disarmed": "{count} {count, plural,\n one {disarmed}\n other {disarmed}\n}",
+        "all_secure": "All secure",
+        "no_media_playing": "No media playing",
+        "count_media_playing": "{count} {count, plural,\n one {playing}\n other {playing}\n}"
+      },
       "media_player": {
         "source": "Source",
         "sound_mode": "Sound mode",
@@ -517,7 +526,7 @@
         }
       },
       "logbook": {
-        "entries_not_found": "No activity found.",
+        "entries_not_found": "No logbook events found.",
         "triggered_by": "triggered by",
         "triggered_by_automation": "triggered by automation",
         "triggered_by_script": "triggered by script",
@@ -530,7 +539,7 @@
         "triggered_by_homeassistant_stopping": "triggered by Home Assistant stopping",
         "triggered_by_homeassistant_starting": "triggered by Home Assistant starting",
         "show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]",
-        "retrieval_error": "Could not load activity",
+        "retrieval_error": "Could not load logbook",
         "not_loaded": "[%key:ui::dialogs::helper_settings::platform_not_loaded%]",
         "messages": {
           "was_away": "was detected away",
@@ -669,7 +678,7 @@
       },
       "subpage-data-table": {
         "filters": "Filters",
-        "show_results": "show {number} results",
+        "show_results": "Show {number} results",
         "clear_filter": "Clear filter",
         "close_filter": "Close filters",
         "exit_selection_mode": "Exit selection mode",
@@ -1373,8 +1382,13 @@
         "info": "Information",
         "related": "Related",
         "history": "History",
-        "logbook": "Activity",
+        "logbook": "Logbook",
         "device_info": "Device info",
+        "device_or_service_info": "[%key:ui::panel::config::devices::device_info%]",
+        "device_type": {
+          "device": "[%key:ui::panel::config::devices::type::device_heading%]",
+          "service": "[%key:ui::panel::config::devices::type::service_heading%]"
+        },
         "last_changed": "Last changed",
         "last_updated": "Last updated",
         "show_more": "Show more",
@@ -2026,11 +2040,13 @@
         "title": "Shortcuts",
         "enable_shortcuts_hint": "For keyboard shortcuts to work, make sure you have them enabled in your {user_profile}.",
         "enable_shortcuts_hint_user_profile": "user profile",
+        "keys": {
+          "del": "Del"
+        },
         "shortcuts": {
           "double_click": "Double-click",
           "scroll_wheel": "Scroll",
-          "drag": "Drag",
+          "drag": "Drag"
-          "ctrl_cmd": "Ctrl/Cmd"
         },
         "searching": {
           "title": "Searching",
@@ -2047,6 +2063,9 @@
         },
         "automation_script": {
           "title": "Automations / Scripts",
+          "copy": "to copy the selected item to clipboard",
+          "cut": "to cut the selected item and place it on the clipboard",
+          "delete": "to delete the selected item",
           "paste": "to paste automation/script YAML from clipboard to editor",
           "save": "to save automation/script"
         },
@@ -3847,6 +3866,9 @@
             "type_script_plural": "[%key:ui::panel::config::blueprint::overview::types_plural::script%]",
             "new_automation_setup_failed_title": "New {type} setup failed",
             "new_automation_setup_failed_text": "Your new {type} has saved, but waiting for it to setup has timed out. This could be due to errors parsing your configuration.yaml, please check the configuration in developer tools. Your {type} will not be visible until this is corrected, and {types} are reloaded. Changes to area, category, or labels were not saved and must be reapplied.",
+            "item_pasted": "{item} pasted",
+            "ctrl": "Ctrl",
+            "del": "Del",
             "triggers": {
               "name": "Triggers",
               "header": "When",
@@ -3873,6 +3895,8 @@
               "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]",
               "triggering_event_detail": "Triggering event detail",
               "trigger": "Trigger",
+              "copied_to_clipboard": "Trigger copied to clipboard",
+              "cut_to_clipboard": "Trigger cut to clipboard",
               "groups": {
                 "entity": {
                   "label": "Entity",
@@ -4109,6 +4133,9 @@
             },
             "conditions": {
               "name": "Conditions",
+              "header": "And if",
+              "description": "All conditions added here need to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.",
+              "learn_more": "Learn more about conditions",
               "add": "Add condition",
               "search": "Search condition",
               "add_building_block": "Add building block",
@@ -4132,6 +4159,8 @@
               "type_select": "Condition type",
               "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]",
               "condition": "Condition",
+              "copied_to_clipboard": "Condition copied to clipboard",
+              "cut_to_clipboard": "Condition cut to clipboard",
               "groups": {
                 "entity": {
                   "label": "Entity",
@@ -4301,6 +4330,8 @@
               "type_select": "Action type",
               "continue_on_error": "Continue on error",
               "action": "Action",
+              "copied_to_clipboard": "Action copied to clipboard",
+              "cut_to_clipboard": "Action cut to clipboard",
               "groups": {
                 "helpers": {
                   "label": "Helpers"
@@ -4565,7 +4596,7 @@
             "tabs": {
               "details": "Step details",
               "timeline": "Trace timeline",
-              "logbook": "Related activity",
+              "logbook": "Related logbook entries",
               "automation_config": "Automation config",
               "step_config": "Step config",
               "changed_variables": "Changed variables",
@@ -4582,7 +4613,7 @@
               "error": "Error: {error}",
               "result": "Result:",
               "step_not_executed": "This step was not executed.",
-              "no_logbook_entries": "No activity found for this step.",
+              "no_logbook_entries": "No logbook entries found for this step.",
               "no_variables_changed": "No variables changed",
               "unable_to_find_config": "Unable to find config"
             },
@@ -4608,8 +4639,8 @@
               "disabled": "(disabled)",
               "triggered_by": "{triggeredBy, select, \n alias {{alias} triggered}\n other {Triggered} \n} {triggeredPath, select, \n trigger {by the {trigger}}\n other {manually} \n} at {time}",
               "path_error": "Unable to extract path {path}. Download trace and report as bug.",
-              "not_all_entries_are_related_automation_note": "Not all shown activity might be related to this automation.",
+              "not_all_entries_are_related_automation_note": "Not all shown logbook entries might be related to this automation.",
-              "not_all_entries_are_related_script_note": "Not all shown activity might be related to this script."
+              "not_all_entries_are_related_script_note": "Not all shown logbook entries might be related to this script."
             }
           }
         },
@@ -7526,8 +7557,8 @@
               "square": "Render cards as squares"
             },
             "logbook": {
-              "name": "Activity",
+              "name": "Logbook",
-              "description": "The Activity card shows a list of events for entities."
+              "description": "The Logbook card shows a list of events for entities."
             },
             "history-graph": {
               "name": "History graph",
@@ -8168,8 +8199,8 @@
               "bar-gauge": {
                 "label": "Bar gauge"
               },
-              "history-chart": {
+              "trend-graph": {
-                "label": "History chart"
+                "label": "Trend graph"
               }
             }
           },

yarn.lock

@@ -3281,58 +3281,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/error-codes@npm:0.18.0":
+"@module-federation/error-codes@npm:0.17.1":
-  version: 0.18.0
+  version: 0.17.1
-  resolution: "@module-federation/error-codes@npm:0.18.0"
+  resolution: "@module-federation/error-codes@npm:0.17.1"
-  checksum: 10/ccd00f6b2504ec2e685bda6d175ed86df27e21994b36869140a18059595716e9ea7db5d0b516a095891ec9e6c90e702f42a366743df3652bf91ff3bb4f895991
+  checksum: 10/5f5f02a90a423479c84e4ff4398a3a9e31b66bd545e7c978ecb8a417f33162b86e749356baab14c006e741c9cebae549335a4c99e94ce7ef54210269fdf74f7f
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-core@npm:0.18.0":
+"@module-federation/runtime-core@npm:0.17.1":
-  version: 0.18.0
+  version: 0.17.1
-  resolution: "@module-federation/runtime-core@npm:0.18.0"
+  resolution: "@module-federation/runtime-core@npm:0.17.1"
   dependencies:
-    "@module-federation/error-codes": "npm:0.18.0"
+    "@module-federation/error-codes": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.18.0"
+    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/82af795408f2e92bea9c801a2057f1a6ed85eaf131195d5deaa4ef9a6a88db9e2cb851b4416e6e43a841459986b5ebb84e98b4625fb9bbd98cee11929f1ede6b
+  checksum: 10/b0c945379bde13af84ceb833e3bfe3c8cf11fd265af0ad7640a1506017529458f408a4a3f1bd0f4b5983da71438913d5c25ed25e20908eb1f789bd1483616650
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-tools@npm:0.18.0":
+"@module-federation/runtime-tools@npm:0.17.1":
-  version: 0.18.0
+  version: 0.17.1
-  resolution: "@module-federation/runtime-tools@npm:0.18.0"
+  resolution: "@module-federation/runtime-tools@npm:0.17.1"
   dependencies:
-    "@module-federation/runtime": "npm:0.18.0"
+    "@module-federation/runtime": "npm:0.17.1"
-    "@module-federation/webpack-bundler-runtime": "npm:0.18.0"
+    "@module-federation/webpack-bundler-runtime": "npm:0.17.1"
-  checksum: 10/c6b1483899865e4c73be0ae77e6e1a5f517798f7ab3b8c6df2bb7ed22463e7a471f68d5f9528b2aff5b45e2db67596805028206f3956aafec5a36dcefb94afd2
+  checksum: 10/2e183e357b644dbe015d0e51df3fe601852ca79ffe3a30c582eee7a2050d7600eb3253f5de15e476c60741d0a1dd70add1ade7b5a3537cd2ee12bfee286284ea
   languageName: node
   linkType: hard
 
-"@module-federation/runtime@npm:0.18.0":
+"@module-federation/runtime@npm:0.17.1":
-  version: 0.18.0
+  version: 0.17.1
-  resolution: "@module-federation/runtime@npm:0.18.0"
+  resolution: "@module-federation/runtime@npm:0.17.1"
   dependencies:
-    "@module-federation/error-codes": "npm:0.18.0"
+    "@module-federation/error-codes": "npm:0.17.1"
-    "@module-federation/runtime-core": "npm:0.18.0"
+    "@module-federation/runtime-core": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.18.0"
+    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/6164597782b21840e3b8f159000338d8e20a817a60909015c11402e9e6442d60d9c3b4b6f25d92d7261011ef1fc0e8caafbb91f25c29b372f28764cbea8ef9eb
+  checksum: 10/f5405968dff4fa2cf510127701ec1722105f44298fd09eafeecead450b7bb95a05450749157fe2fc39caf6241bec9e45caa9a55375b48e7f195db84799a8df0c
   languageName: node
   linkType: hard
 
-"@module-federation/sdk@npm:0.18.0":
+"@module-federation/sdk@npm:0.17.1":
-  version: 0.18.0
+  version: 0.17.1
-  resolution: "@module-federation/sdk@npm:0.18.0"
+  resolution: "@module-federation/sdk@npm:0.17.1"
-  checksum: 10/f397dc53c705ad1f1e19530a8ff79116bb5aeeef92a79b3acaaa6140ae4e5784b42e81d1445eabf536c007c9383857f6764506ed725a6352464fe1ce581af89a
+  checksum: 10/daaaa49ed900c00a69641130cf673ad5d5b8623d82fb4bd03a67c839a6da760a0a5ae29b836ba66eeb95ee5392e558588ffd987a2c00b05c2b0a7c5039ed042d
   languageName: node
   linkType: hard
 
-"@module-federation/webpack-bundler-runtime@npm:0.18.0":
+"@module-federation/webpack-bundler-runtime@npm:0.17.1":
-  version: 0.18.0
+  version: 0.17.1
-  resolution: "@module-federation/webpack-bundler-runtime@npm:0.18.0"
+  resolution: "@module-federation/webpack-bundler-runtime@npm:0.17.1"
   dependencies:
-    "@module-federation/runtime": "npm:0.18.0"
+    "@module-federation/runtime": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.18.0"
+    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/c80f26e02d497948a0864283bedf13118d5c188ac8165e71edce5da72776091db6da2dc5da5d47a53fbb6914bfbff1ddfce16a6b9c18485a9a41a04bc4060e34
+  checksum: 10/72e5030529dbc53df6271fa78bdb63976d0601fe9fde5105f8a7325e0fa296bc35277b9b084e52995cd314b89e12d33f8b869c1d63a13231c2948d4c741e72fd
   languageName: node
   linkType: hard
 
@@ -3990,92 +3990,92 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-arm64@npm:1.5.1":
+"@rspack/binding-darwin-arm64@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-darwin-arm64@npm:1.5.1"
+  resolution: "@rspack/binding-darwin-arm64@npm:1.4.11"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rspack/binding-darwin-x64@npm:1.5.1":
+"@rspack/binding-darwin-x64@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-darwin-x64@npm:1.5.1"
+  resolution: "@rspack/binding-darwin-x64@npm:1.4.11"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-arm64-gnu@npm:1.5.1":
+"@rspack/binding-linux-arm64-gnu@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.5.1"
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.4.11"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-arm64-musl@npm:1.5.1":
+"@rspack/binding-linux-arm64-musl@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-linux-arm64-musl@npm:1.5.1"
+  resolution: "@rspack/binding-linux-arm64-musl@npm:1.4.11"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-x64-gnu@npm:1.5.1":
+"@rspack/binding-linux-x64-gnu@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-linux-x64-gnu@npm:1.5.1"
+  resolution: "@rspack/binding-linux-x64-gnu@npm:1.4.11"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rspack/binding-linux-x64-musl@npm:1.5.1":
+"@rspack/binding-linux-x64-musl@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-linux-x64-musl@npm:1.5.1"
+  resolution: "@rspack/binding-linux-x64-musl@npm:1.4.11"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rspack/binding-wasm32-wasi@npm:1.5.1":
+"@rspack/binding-wasm32-wasi@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-wasm32-wasi@npm:1.5.1"
+  resolution: "@rspack/binding-wasm32-wasi@npm:1.4.11"
   dependencies:
     "@napi-rs/wasm-runtime": "npm:^1.0.1"
   conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-arm64-msvc@npm:1.5.1":
+"@rspack/binding-win32-arm64-msvc@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.5.1"
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.4.11"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-ia32-msvc@npm:1.5.1":
+"@rspack/binding-win32-ia32-msvc@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.5.1"
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.4.11"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rspack/binding-win32-x64-msvc@npm:1.5.1":
+"@rspack/binding-win32-x64-msvc@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding-win32-x64-msvc@npm:1.5.1"
+  resolution: "@rspack/binding-win32-x64-msvc@npm:1.4.11"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@rspack/binding@npm:1.5.1":
+"@rspack/binding@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/binding@npm:1.5.1"
+  resolution: "@rspack/binding@npm:1.4.11"
   dependencies:
-    "@rspack/binding-darwin-arm64": "npm:1.5.1"
+    "@rspack/binding-darwin-arm64": "npm:1.4.11"
-    "@rspack/binding-darwin-x64": "npm:1.5.1"
+    "@rspack/binding-darwin-x64": "npm:1.4.11"
-    "@rspack/binding-linux-arm64-gnu": "npm:1.5.1"
+    "@rspack/binding-linux-arm64-gnu": "npm:1.4.11"
-    "@rspack/binding-linux-arm64-musl": "npm:1.5.1"
+    "@rspack/binding-linux-arm64-musl": "npm:1.4.11"
-    "@rspack/binding-linux-x64-gnu": "npm:1.5.1"
+    "@rspack/binding-linux-x64-gnu": "npm:1.4.11"
-    "@rspack/binding-linux-x64-musl": "npm:1.5.1"
+    "@rspack/binding-linux-x64-musl": "npm:1.4.11"
-    "@rspack/binding-wasm32-wasi": "npm:1.5.1"
+    "@rspack/binding-wasm32-wasi": "npm:1.4.11"
-    "@rspack/binding-win32-arm64-msvc": "npm:1.5.1"
+    "@rspack/binding-win32-arm64-msvc": "npm:1.4.11"
-    "@rspack/binding-win32-ia32-msvc": "npm:1.5.1"
+    "@rspack/binding-win32-ia32-msvc": "npm:1.4.11"
-    "@rspack/binding-win32-x64-msvc": "npm:1.5.1"
+    "@rspack/binding-win32-x64-msvc": "npm:1.4.11"
   dependenciesMeta:
     "@rspack/binding-darwin-arm64":
       optional: true
@@ -4097,23 +4097,23 @@ __metadata:
       optional: true
     "@rspack/binding-win32-x64-msvc":
       optional: true
-  checksum: 10/a6756a35bda55fd9e21b1ce142ca18e228d92832dc213027a19314981f8f12e6510dd862a9724ee96dee61755b3dd30ce73b2bb117d150e9f5ce73ba8fe4b57a
+  checksum: 10/8bb94774204f41888ff442afec06f019d008abba79964b74d566acf64f7216a148a1842f90c44b3bf680e69b697d8e5cd0f1cca6fd0b8a94df5f97c2a3f05510
   languageName: node
   linkType: hard
 
-"@rspack/core@npm:1.5.1":
+"@rspack/core@npm:1.4.11":
-  version: 1.5.1
+  version: 1.4.11
-  resolution: "@rspack/core@npm:1.5.1"
+  resolution: "@rspack/core@npm:1.4.11"
   dependencies:
-    "@module-federation/runtime-tools": "npm:0.18.0"
+    "@module-federation/runtime-tools": "npm:0.17.1"
-    "@rspack/binding": "npm:1.5.1"
+    "@rspack/binding": "npm:1.4.11"
     "@rspack/lite-tapable": "npm:1.0.1"
   peerDependencies:
     "@swc/helpers": ">=0.5.1"
   peerDependenciesMeta:
     "@swc/helpers":
       optional: true
-  checksum: 10/b7a6269d5bdbcad140d172ebe951f4693711573d4f38e4c676c250a9cc6c1bdf602ad5187eeacc07ff12b74d510b746c92e3f112c8ab4dca46846c595d2876b0
+  checksum: 10/77d463bd90feb2d24f7bc56df198f0b7ad310a9eb676070eac8d78014d151e783943c5b44c64700a51a36708c626a341eeaa9b3287e358616d09dfe25ab04e77
   languageName: node
   linkType: hard
 
@@ -4964,106 +4964,106 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:8.41.0":
+"@typescript-eslint/eslint-plugin@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.41.0"
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.40.0"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.41.0"
+    "@typescript-eslint/scope-manager": "npm:8.40.0"
-    "@typescript-eslint/type-utils": "npm:8.41.0"
+    "@typescript-eslint/type-utils": "npm:8.40.0"
-    "@typescript-eslint/utils": "npm:8.41.0"
+    "@typescript-eslint/utils": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.40.0"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^7.0.0"
     natural-compare: "npm:^1.4.0"
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
-    "@typescript-eslint/parser": ^8.41.0
+    "@typescript-eslint/parser": ^8.40.0
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/b96e3fd9e8ae2c289aa7f1c0d2fbf89c608d37f54162a893bac5895318b05d21d3fd456cf7a6adf165915a8212f773f1bae9b4d83f732441864f6d92d083ed99
+  checksum: 10/9df4d4ac58734a34964b791622dcb94ffc6c49c1d0f4fd0480b3fc0e026527df7167ff78a4f8bbd29089d605756c28c1a90b2f0653df34b40ac8b969bc6c92e9
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:8.41.0":
+"@typescript-eslint/parser@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/parser@npm:8.41.0"
+  resolution: "@typescript-eslint/parser@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.41.0"
+    "@typescript-eslint/scope-manager": "npm:8.40.0"
-    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.40.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/d4ba418aa62e08d49a5b953c9debd52674c30b9b2bb7bf2efc173a22ad3942df72cd83072beac06d98dad82741baf502a55fc648925ca407b01abdc908675f67
+  checksum: 10/1e60f70e9d02f930553db7f4684c27c376fadf345db155414a22d1a32cd21def7d36496bd63c1acbf3afbec9fb8794947e880f88c1143b83e1d3c45146cec41a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/project-service@npm:8.41.0":
+"@typescript-eslint/project-service@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/project-service@npm:8.41.0"
+  resolution: "@typescript-eslint/project-service@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.41.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.40.0"
-    "@typescript-eslint/types": "npm:^8.41.0"
+    "@typescript-eslint/types": "npm:^8.40.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/ff8315de005ea7072ecd208b50b35fa01db034f110f30f415faa9c9441648494e5322723a0a4267beb28524babd6b04b349c32f2a2821f4ae0e9c4d503e1e8f0
+  checksum: 10/86491aa65c1dd78c9784dddd8467601aef8be652c5fb3a901e8b1995cf07c1dbe11d0ab4610d770e3f4063c0c254a6c6aa5fb7cf724bf12fa4ee56f47f3a2955
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.41.0":
+"@typescript-eslint/scope-manager@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.41.0"
+  resolution: "@typescript-eslint/scope-manager@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.40.0"
-  checksum: 10/4fc1dd6b3390d3a770c228dac227f35ff1126034fce484ab5e5a4fdbe2dab5dca1c8de3c528708320fee021adec1a1260ee45ed2aef9f7e3fdfbb1faf2191f9f
+  checksum: 10/0c5aa10208bfbb506bf3925a420c3de667298064bde400f03ee52c19cd0785dd05c2c820e05724d005737e2920d925aff0318ec3308156f9b81c84736a1fe46b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/tsconfig-utils@npm:8.41.0, @typescript-eslint/tsconfig-utils@npm:^8.41.0":
+"@typescript-eslint/tsconfig-utils@npm:8.40.0, @typescript-eslint/tsconfig-utils@npm:^8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.41.0"
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.40.0"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/522d54252f9647d22e46f963df6bafe98aa0572b021e6acf7474c40f1a68afa6753f23a0a125abb1d792a89a1b1cc654d918553a03d08f769139f2f40b0d026c
+  checksum: 10/c5a557cc83d194902140af0ddfa10b2776db3625e2c9bb609d0d720aa78a0735ff71df8bffd5c2a1b90cdada8242543c5421ad4dcd58cf2ff12717b733bcfca9
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.41.0":
+"@typescript-eslint/type-utils@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/type-utils@npm:8.41.0"
+  resolution: "@typescript-eslint/type-utils@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.40.0"
-    "@typescript-eslint/utils": "npm:8.41.0"
+    "@typescript-eslint/utils": "npm:8.40.0"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/6c4c693c1ee3d1a1a3635898d59f1a3bcdf224be84284ea95a21fa68a3206bae32ce04d371df366fcad250a3eca3af723ed6ca1b4aefba238d4e553797c2dc9d
+  checksum: 10/296c718330b2ac4408840258c30c01072de01ffe1c009be00c5049be1b19a71cbb2e258363ae349150760bcd2d34799df305b4cfc4d7f3b2fa9760ac8ffb3f75
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.41.0, @typescript-eslint/types@npm:^8.41.0":
+"@typescript-eslint/types@npm:8.40.0, @typescript-eslint/types@npm:^8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/types@npm:8.41.0"
+  resolution: "@typescript-eslint/types@npm:8.40.0"
-  checksum: 10/e2fe5d9125264a1b1310fff7ac65e827da9885219d7f910dba090dcf7d4242830cb96695c7257634b22e1947943a2e890f9740536d95612452e5752385ab6a5b
+  checksum: 10/f3931d0920a42b3bc69e9cdeb67a0c710597271cdd9d7c736302bdc52d21df1c962082df7cd712eeabd2c47658415d0a4b7d72f819cb38f82f4e234b48dbaa57
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.41.0":
+"@typescript-eslint/typescript-estree@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.41.0"
+  resolution: "@typescript-eslint/typescript-estree@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/project-service": "npm:8.41.0"
+    "@typescript-eslint/project-service": "npm:8.40.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.41.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.40.0"
-    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.40.0"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
@@ -5072,160 +5072,160 @@ __metadata:
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/e039815d2ee03727fadb32c460e0c7df71a35b6c93a87e019c63836c53e51ce41f1975b32c9e5bcc840f4cd49c7bf7715c95df149f915379ec4c559d02436623
+  checksum: 10/2e61ecfecb933f644799a7c11e4c7a730df57290c8d0482082cff7739b2401b0cf3b1ebef7b08a54a90285978957a49850d1a53061e8770164da651172ebee32
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.41.0":
+"@typescript-eslint/utils@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/utils@npm:8.41.0"
+  resolution: "@typescript-eslint/utils@npm:8.40.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.7.0"
-    "@typescript-eslint/scope-manager": "npm:8.41.0"
+    "@typescript-eslint/scope-manager": "npm:8.40.0"
-    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.40.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/863565c0891d89ee27497571092783a7fa90e281a7643f1bda5d9e8b94aea2acbc851e81141ce7a53ddea3638a0527ea165801dd9611f5532940e4d413c955a8
+  checksum: 10/b4cd1e6a4f55cc6475189de12e6bd418080a227e794745a2af304ab21655b031c28dae6387d4e9b54dd2f420696cec4f77cca9c66db405ed2281e0e09c95ba1c
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.41.0":
+"@typescript-eslint/visitor-keys@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.41.0"
+  resolution: "@typescript-eslint/visitor-keys@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.40.0"
     eslint-visitor-keys: "npm:^4.2.1"
-  checksum: 10/3c764be2f0d3b212c2cb7d0cc8a7b0ed378feb58883654471fd8ee943f1e124c0b78df92fe14368ceb46016b0e3ae1c47e2630ec3599aa7b4bd54f7793747657
+  checksum: 10/191f47998001a5e9cdde7491b0215d9c6c45c637aedd7d32cafd35ce2a4a0f4b8582edab015e09238f48e025a788b99efd8e70e4e3200e32143f91c95112abcd
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.8.6":
+"@vaadin/a11y-base@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/a11y-base@npm:24.8.6"
+  resolution: "@vaadin/a11y-base@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/1127282ee3d2814de85ac7df2e3661db955bec78472ab4991229440ef532c6de6955c48c6353f913a4d911c938ed0205f6cff73928c52866f324237be110a222
+  checksum: 10/64c0447b1715f842aa5953a0ffeb78e3ae677aa9dc61fa2389dead20947519d897070fd42a164b09dda9465d7cf48fa413f62a3c9afed8aac43590d920616f24
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.8.6":
+"@vaadin/combo-box@npm:24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/combo-box@npm:24.8.6"
+  resolution: "@vaadin/combo-box@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/field-base": "npm:~24.8.6"
+    "@vaadin/field-base": "npm:~24.8.5"
-    "@vaadin/input-container": "npm:~24.8.6"
+    "@vaadin/input-container": "npm:~24.8.5"
-    "@vaadin/item": "npm:~24.8.6"
+    "@vaadin/item": "npm:~24.8.5"
-    "@vaadin/lit-renderer": "npm:~24.8.6"
+    "@vaadin/lit-renderer": "npm:~24.8.5"
-    "@vaadin/overlay": "npm:~24.8.6"
+    "@vaadin/overlay": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/95031f4fd2adfe584a235d83da30b8bd5a3bcdcc6e342c9b1d4305c9ccf7ef7c2041b5930e7206408b2d01c81fc6555d1f556e31321433cc069905afe5aa1507
+  checksum: 10/430e04ce3c7f977bfde771bf5aafb4dd2e862ecffd93a3296df596b24626c7a93dbe16f4e39b8e88089ce60a5f5d5a95db17fe305df6f30593f39dc1f79ec8af
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.8.6":
+"@vaadin/component-base@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/component-base@npm:24.8.6"
+  resolution: "@vaadin/component-base@npm:24.8.5"
   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/d4bff00004f659d93ec3ae4c6c5f5f645672f093cccf20bb6b0957939b31d9ecd29ecf32d7863c1a212784f0baf84f32ffee7c9158451de7c91bc009d8e42d24
+  checksum: 10/7f9ec08ca2dcedb15990cff87282523505e1df668ecbdbe624e91b75aae8b08062924e9dee7886e97a971054dda025277b368f32f8c57ee4e7ca022d7c23b862
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.8.6":
+"@vaadin/field-base@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/field-base@npm:24.8.6"
+  resolution: "@vaadin/field-base@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/a1b1121e5ed690645f2e7b0400e5f1880aac0fdff81fd57fc85c325187587005162f835d322868fc5788f74ebb69ce99f1cea3cde49b23aab67310aac67df996
+  checksum: 10/6851c05949c389bd76f201dd876ae0f0725e53146b0026bdfc8ec8a9b3712a2f52b18f23bd73971c8d76f5026c6186a0b54073850fa2a31890c7594dc2d61cb2
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.8.6":
+"@vaadin/icon@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/icon@npm:24.8.6"
+  resolution: "@vaadin/icon@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/569e5241bb421f8a30fe34c360f97b6e521f3dcde65dcf2fbeb60d699e230406605b48d301ca4e1cfa2cf64b56ca2b95e9a013a5e6e51f910e60b683aaeca64b
+  checksum: 10/0ba15d8ea903e6a64bf5bdd3f5e91c74ebbb75bcacdb273faae0b71dec8e83a7c6daccbcbd8700c45e48bf6c5fec4552236b7ee464ebf06b1aba6e74a6eb3565
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.8.6":
+"@vaadin/input-container@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/input-container@npm:24.8.6"
+  resolution: "@vaadin/input-container@npm:24.8.5"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/b18631fd45f59cc9d728a58da911feb119398c0e76962fa7cdcf62cf8582f722cdfc4bdcf52be5f678a390bf9006339351fcaf08b1cbcfe5905638d13c74f100
+  checksum: 10/04ca1f54f101858557a9dba55ef46706091f54a2344fb5322c89fb84abe717d97db60b43010496e9948e5a3d6779ba700e6d6eb986c8e37df96bc9bc9efe676e
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.8.6":
+"@vaadin/item@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/item@npm:24.8.6"
+  resolution: "@vaadin/item@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/59f9bd95794b30a2f65cba1482a1f496370f92f834bf532255622a76a43066c53ee0c6fc5eb3ca5d777835532f3efaa2415edce91823f91f2462ecb1342a3bce
+  checksum: 10/da0d69cfde4655a8209cfa67c342bb48c7fe1f5ec48f15065582e6a8d3e48926b8e28e5fb68dcb526421d3f7faeea7292afd8957258cf7658e46ad40bd1328e8
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.8.6":
+"@vaadin/lit-renderer@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/lit-renderer@npm:24.8.6"
+  resolution: "@vaadin/lit-renderer@npm:24.8.5"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/eb721a0e09156e67d857ea95ed2285b63f041e82fff60c40822de6050a4ee21e18330b208b14850a72a4ea2e0f7ee43b3d9518d228dc22672e7b69e25da43662
+  checksum: 10/a5cdfbd7ff3e7cf979fa826b4151879c0ad8b9068b254c690e8a82d859ffd553ca935bcee5115d1a3b914ff018a393dcb2460a75d8f5caab975654624060172b
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.8.6":
+"@vaadin/overlay@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/overlay@npm:24.8.6"
+  resolution: "@vaadin/overlay@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
     lit: "npm:^3.0.0"
-  checksum: 10/2a1047f4a8fc11bf51a5095cd66bd6cd9122c5edadb57ab84a559f86d90301bf16d95fd877b9fc2e7cdbcd3bd1856ab73649ec7301251b58feb5a03f42e1ccea
+  checksum: 10/e9b414ebc3dc885020edea0ec399556dfdc7ab3256f544dad6410a30683862f91566bae8b691e0dd5f228ffd470c84efb33ee52fef4c85bec509919d3c226720
   languageName: node
   linkType: hard
 
@@ -5236,37 +5236,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.8.6":
+"@vaadin/vaadin-lumo-styles@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.8.6"
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.8.5"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/icon": "npm:~24.8.6"
+    "@vaadin/icon": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
-  checksum: 10/fe01c0a93caa669a3b63573d2294834805d1e393bc5a0d7bcdee030d9f7ef2d73e2fc1a40543f82a4516b8fa155eaf13f6bb84653e26686c6ecb2ee22dfa9500
+  checksum: 10/95279f74f09d7608c312879ce8d375ffe9039f79a8326ad3c994e59704a1ba34e632cac4c9c2b838f590f52de856ff98e3357955054c73e2941bcb873ecb57ce
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.8.6":
+"@vaadin/vaadin-material-styles@npm:~24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/vaadin-material-styles@npm:24.8.6"
+  resolution: "@vaadin/vaadin-material-styles@npm:24.8.5"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
-  checksum: 10/a19f479b567e929b6c375e3a0518b651f99d4ca329ba4323cf4582c13d3b01e73392bb082a3216a3f8d84a7b004df42042ac71e64b66d9f20ae2740f3a57459f
+  checksum: 10/e1f531deda484f1e7e8485a1d5f2e5eed5a74b7c30554ede3d7a45643fc9f54e2eb364c1cc32543097f04eda3fcab466508c527be5166df2930695268fc737c8
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.8.6":
+"@vaadin/vaadin-themable-mixin@npm:24.8.5":
-  version: 24.8.6
+  version: 24.8.5
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.8.6"
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.8.5"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
     style-observer: "npm:^0.0.8"
-  checksum: 10/eb0b356f86d0f19914284219243812dde31d5b54b6f192a3bcb569d0403d100c820080d60878be90b859fd7e2a4342a5e054291a0f3c12888c173ca4122290af
+  checksum: 10/90b883ea34f39b381d3777ac8ea15797d12b899883bdb64ac14e9d170ae113f3f5b29f3492a10d2aeec05cb05ce0b6708d0963110f9ca9858af247210c1e89ce
   languageName: node
   linkType: hard
 
@@ -9298,10 +9298,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hls.js@npm:1.6.11":
+"hls.js@npm:1.6.10":
-  version: 1.6.11
+  version: 1.6.10
-  resolution: "hls.js@npm:1.6.11"
+  resolution: "hls.js@npm:1.6.10"
-  checksum: 10/a7fb6407bd9729186fcdff14fb37d98d24ddfdce69e30165179a1af4c66fc83252bd85ee9199df91220ca5573fed7529b861d40fe86d93b4c06dc89ccc33382a
+  checksum: 10/28ba90e7915dd178b59907f99320f02bdf81023cd570e40e4aace32c4d744bb8a4404f1d6f040cd00a152334a76d97fee702a88596dd9ecaebe93aa5ac48506f
   languageName: node
   linkType: hard
 
@@ -9377,7 +9377,7 @@ __metadata:
     "@octokit/rest": "npm:22.0.0"
     "@replit/codemirror-indentation-markers": "npm:6.5.3"
     "@rsdoctor/rspack-plugin": "npm:1.2.3"
-    "@rspack/core": "npm:1.5.1"
+    "@rspack/core": "npm:1.4.11"
     "@rspack/dev-server": "npm:1.1.4"
     "@shoelace-style/shoelace": "npm:2.20.1"
     "@swc/helpers": "npm:0.5.17"
@@ -9402,8 +9402,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.8.6"
+    "@vaadin/combo-box": "npm:24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:24.8.5"
     "@vibrant/color": "npm:4.0.0"
     "@vitest/coverage-v8": "npm:3.2.4"
     "@vue/web-component-wrapper": "npm:1.3.0"
@@ -9446,7 +9446,7 @@ __metadata:
     gulp-json-transform: "npm:0.5.0"
     gulp-rename: "npm:2.1.0"
     gulp-zopfli-green: "npm:6.0.2"
-    hls.js: "npm:1.6.11"
+    hls.js: "npm:1.6.10"
     home-assistant-js-websocket: "npm:9.5.0"
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
@@ -9466,7 +9466,7 @@ __metadata:
     lodash.template: "npm:4.5.0"
     luxon: "npm:3.7.1"
     map-stream: "npm:0.0.7"
-    marked: "npm:16.2.1"
+    marked: "npm:16.2.0"
     memoize-one: "npm:6.0.0"
     node-vibrant: "npm:4.0.3"
     object-hash: "npm:3.0.0"
@@ -9488,7 +9488,7 @@ __metadata:
     tinykeys: "npm:3.0.0"
     ts-lit-plugin: "npm:2.0.2"
     typescript: "npm:5.9.2"
-    typescript-eslint: "npm:8.41.0"
+    typescript-eslint: "npm:8.40.0"
     ua-parser-js: "npm:2.0.4"
     vite-tsconfig-paths: "npm:5.1.4"
     vitest: "npm:3.2.4"
@@ -11137,12 +11137,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:16.2.1":
+"marked@npm:16.2.0":
-  version: 16.2.1
+  version: 16.2.0
-  resolution: "marked@npm:16.2.1"
+  resolution: "marked@npm:16.2.0"
   bin:
     marked: bin/marked.js
-  checksum: 10/67e911a7dd416869649dee18dc4a9683c0ccd8e72ba0fee3b3f578f857416e69780013e9d63762c600e6f9cf997c5af9fa0507a2053f8e65d39c5459c245c0cd
+  checksum: 10/0a73dcfbe500514d2f1106da99708beed8a31de586e2826e1aa47ca0e0a4850b1e9598569b09d5366d4f4dee2d279a13f32616ed1ee75c832068eb7dd660f66f
   languageName: node
   linkType: hard
 
@@ -14527,18 +14527,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript-eslint@npm:8.41.0":
+"typescript-eslint@npm:8.40.0":
-  version: 8.41.0
+  version: 8.40.0
-  resolution: "typescript-eslint@npm:8.41.0"
+  resolution: "typescript-eslint@npm:8.40.0"
   dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.41.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.40.0"
-    "@typescript-eslint/parser": "npm:8.41.0"
+    "@typescript-eslint/parser": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.40.0"
-    "@typescript-eslint/utils": "npm:8.41.0"
+    "@typescript-eslint/utils": "npm:8.40.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/a398a367b3a674bcdb74f060e0b06aacb9e8bd0637079c5079ff66a43a35286098b97d71fca1b81b738c0df840fda4b53aeee03ed0aacef03f9644c61a68960e
+  checksum: 10/b96dc4e70bd551e5399b928e946957cce622cba89f0ff87521f9e93f223acbe406930a1ebee845b158f586959cb7d85f15ea2250b97341aa87f50a3c987d068a
   languageName: node
   linkType: hard